@font-face {
    font-family: 'Yekan';
    src: url('../fonts/Yekan.woff2');
}
*
{
    direction: rtl!important;
    font-family: 'Yekan';
}




.container-sidebar
{
    width: 350px;
    transform: translateX(300px);
    transition: 300ms!important;
    z-index: 1!important;
}
.action-trigger
{
    transform: translateX(0)!important;
    transition: 300ms!important;
    z-index: 1!important;
}

.container-sidebar .action
{
    position: absolute !important;
    left: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer!important;
    z-index: 1;
}

.container-sidebar .action::after
{
    content: '\F12D';
    font-family: "bootstrap-icons";
    color: #0b939b;
    font-size: 30pt;
    cursor: pointer!important;
}







.header
{
    height: 60px;
    background-color: #F1F6F9;
    *filter: drop-shadow(1px 3px 2px #ccc);
}

.header .logo
{

}


.header .logo img
{
    width: 100%;
    filter: grayscale(0.8);
}



/**********************************************/
.sidebar
{
    width: 300px;
    height: 100vh;
    background-color: #222831 !important;
    position: relative;
    filter: drop-shadow(-1px -1px 6px black);
    z-index: 1;

}

.sidebar .detail-sidebar
{
    height:60px;
    background-color: #31363F;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar .detail-sidebar span
{
    color: #ffffff;
    font-size: 16pt!important;
}

.sidebar .menu
{
    height: 700px;
    background: #29313d;
    overflow-y: auto;
}

.sidebar .menu .list
{
    list-style-type: none;
    color: #ffffff;
    padding: 0;
}

.sidebar .menu .list li
{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 2px dashed #5d5d5d;
    cursor: pointer;
}

.sidebar .menu .list li.dropdown.show::after
{
    content: '\F282';
    font-family: "bootstrap-icons";
    color: #ffffff;
    font-size: 12pt;
}

.sidebar .menu .list li.dropdown.hide::after
{
    content: '\F286';
    font-family: "bootstrap-icons";
    color: #ffffff;
    font-size: 12pt;
}


.sidebar .menu .list .level-2
{
    margin: 0;
    padding: 0;
    background: #0b939b;
}

.sidebar .menu .list .level-2 li
{

}

.sidebar .menu .list .level-2 li a
{
    padding: 0 15px!important;
    color: #ffffff;
    text-decoration: none;
}

.sidebar .menu .list .level-2 li a:hover
{
    text-decoration: none!important;
}

.sidebar .menu .list .level-2 .level-3
{
    padding: 0;
    background: #EEEEEE;
}

.sidebar .menu .list .level-2 .level-3 li a
{
    padding: 0 30px !important;
    color: #222222;
}

.sidebar .menu .list ul
{
    display: none;
}




    /**********************************************/


.mask
{
    position: fixed;
    width: 100vw;
    height: 100%;
    background: #0a0a0a73;
    top: 0;
}

.installment-list
{
    border: 1px solid #eee;
    height: 100%;
    border-radius: 4px;
}


/**********************************************/

.title
{
    background: #ededed;
    color: #222;
    text-align: justify;
    padding: 10px 50px 10px 0;
    font-family: Yekan;
    font-size: 16pt;
}


.filters
{
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: #eee;
    margin: 50px 0 50px 0!important;
}

.main
{
    height: 100vh;
    overflow-y: auto;
}

.excel-plan
{
    background-position: left .75rem center!important;
}







/* width */
.sidebar .menu::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.sidebar .menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.sidebar .menu::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.sidebar .menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}



/************************************************************/
input[name=start]
{

}

input[name=start]::placeholder
{
    text-align: center!important;
}

input[name=end]::placeholder
{
    text-align: center!important;
}

input[name=detail]
{
    text-align: center!important;
}
/************************************************************/