* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: yekan-500;
    color: #6E6B7B;
}

html {
    height: 100%;
    direction: rtl;
}

body {
    height: 100%;
    background: #fafafa;
}

a {
    text-decoration: none;
}

ul, li {
    list-style: none;
}

.checkbox {
    width: 17px;
    height: 17px;
    border: 2px solid #6E6B7B;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.checkbox .checkbox-checked {
    width: 7px;
    height: 7px;
    border: 2px solid #6E6B7B;
    display: inline-block;
    border-radius: 50%;
    visibility: hidden;
}

input:checked + label .checkbox-checked {
    visibility: visible;
}
.table::-webkit-scrollbar {
    width: 5px;
}

.table::-webkit-scrollbar-track {
    background: transparent;
}

.table::-webkit-scrollbar-thumb {
    background: #e3e3e3;
    border-radius: 20px;
}

.table::-webkit-scrollbar-thumb:hover {
    background: #c1c1c1;
}

.table{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table table{
    width: 100%;
    margin: auto;
    border-collapse: collapse;
}
.table th{
    background: #F3F2F7;
    padding: 7px;
    font-weight: 500;
    color: #5E5873;
    font-size: 14px;
}
.table td{
    padding: 10px;
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid #F3F2F7;
    vertical-align: middle;

}
.table .table-action{
    margin: 0 5px;
}
.table td img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
}
.text{
    display: block;
    width: 100%;
    outline: none;
    padding: 7px 10px;
    border: 1px solid #D8D6DE;
    border-radius: 5px;
    margin-bottom: 15px ;
}
.text:focus{
    outline: 0;
    box-shadow: 0 3px 10px 0 rgb(216 214 222 / 10%);
}
.text:focus::placeholder{
    color: #595589;
}
.text-label{
    font-size: 13px;
}
.form{
    display: flex;
    justify-content: space-between;
}
.form .double{
    width: 50%;
    padding: 15px;
}
.submit{
    background-color: #7367F0!important;
    color: #FFF!important;
    padding: 7px 20px;
    border-radius: 5px;
    outline: none;
    border: none;
    cursor: pointer;
    margin: 15px;
}
.submit:hover{
    box-shadow: 0 1px 10px 1px #8176ef !important;
}
.valid:focus{
    border-color: #28C76F;
    box-shadow: 0 0 0 2px rgb(40 199 111 / 25%);
}
.valid{
    border: 1px solid #28C76F !important;
}
.invalid:focus{
    border-color: #EA5455;
    box-shadow: 0 0 0 2px rgba(234, 84, 85, 0.25);
}
.invalid{
    border: 1px solid #EA5455 !important;
}

.valid-txt{
    font-size: 13px;
    color: #28C76F;
    margin-top: -10px;
    margin-bottom: 5px;
}

.invalid-txt{
    font-size: 13px;
    color: #EA5455;
    margin-top: -10px;
    margin-bottom: 5px;
}

.select{
    display: block;
    width: 100%;
    outline: none;
    padding: 7px 10px;
    border: 1px solid #D8D6DE;
    border-radius: 5px;
    margin-bottom: 15px ;
    cursor: pointer;
}

.check{
    font-size: 13px;
    white-space: nowrap;
    margin-left: 15px;
}
.check label{
    margin: 0 5px;
    cursor: pointer;
}
.check input{
    cursor: pointer;
}
.file{
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
}
.file input{
    display: none;
}
.file label{
    width: 100px;
    height: 100px;
    border: 3px dashed #D8D6DE;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    margin-left: 15px;
}
.file i{
    font-size: 25px;
    max-width: 99%;
}
.file i img{
    max-width: 100%;
}
.file span{
    font-size: 13px;
    margin-top: 5px;
    text-overflow: ellipsis;
    width: 98%;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    direction: ltr;
}

.row{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.row .col{
    width: 50%;
    padding: 0 15px;
    margin-bottom: 5px;
}


/*=================================== Menu ===================================*/
.menu::-webkit-scrollbar {
    width: 5px;
}

.menu::-webkit-scrollbar-track {
    background: transparent;
}

.menu::-webkit-scrollbar-thumb {
    background: #e3e3e3;
    border-radius: 20px;
}

.menu::-webkit-scrollbar-thumb:hover {
    background: #c1c1c1;
}

.menu {
    width: 260px;
    height: 100%;
    color: #6E6B7B;
    background: #FFF;
    box-shadow: 0 0 20px 0 rgb(34 41 47 / 5%);
    padding: 15px;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    overflow-y: auto;
    position: fixed;
    right: 0;
    transition: .3s all ease-in-out;
    z-index: 9 !important;
}
.menu-close-desktop {
    right: -265px !important;
}
.menu .menu-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -20px;
}

.menu .menu-logo img {
    width: 120px;
    margin: 20px 0;
}

.menu .menu-toggle {
    display: flex;
    align-items: center;
}

#menu-toggle {
    display: none;
}

.menu .menu-item > a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    transition: .1s all ease-in-out;
    padding: 8px;
}


.menu .menu-item-text i {
    width: 25px;
    text-align: center;
    margin-left: 10px;
}

.menu .menu-item > a:hover .menu-item-text {
    margin-right: 10px;
    transition: .7s all ease;
}

.menu-item-arrow {
    transition: .3s all ease-in-out;
    margin-left: 5px;
}

.menu .menu-items .selected {
    background: #fafafa;
    border-radius: 5px;
}

.menu .menu-item ul {
    display: none;
    margin-bottom: 5px;
}

#menu-icon-desktop{
    display: inline-block;
}
#menu-icon-mobile{
    display: none;
}


/*=================================== Content ===================================*/
.content {
    margin-right: 260px;
    padding: 15px 20px;
    min-height: calc(100%);
    transition: .3s all ease-in-out;

}
.content-full {
    margin-right: 0 !important;
}

nav {
    height: 70px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 5%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 15px;
    z-index: 8;
}

nav .profile {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    font-size: 12px;
}

nav .profile .profile-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav .profile .profile-avatar img {
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 8px 0 rgb(34 41 47 / 12%), 0 2px 4px 0 rgb(34 41 47 / 8%);
    border-radius: 50%;
    margin-left: 10px;
}

nav .profile .avatar-online {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 2px solid #FFF;
    background: #28C76F;
}

nav .profile b {
    font-size: 14px;
}
#menu-icon-mobile , #menu-icon-desktop{
    font-size: 18px;
    margin-left: 20px;
    cursor: pointer;
}
nav .option {
    margin: 0 15px;
    display: flex;
    align-items: center;
}

nav .option a {
    margin: 0 5px;
    display: flex;
    align-items: center
}


main{
    background: white;
    border-radius: 10px;
    margin: 15px 0;
    padding: 15px 20px;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 5%);
}

main h1{
    font-size: 20px;
    font-weight: 500;
    color: #5E5873;
    margin-bottom: 25px ;
}
.search{
    margin-bottom: 25px;
}


/*=================================== Notification ===================================*/
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}


@-webkit-keyframes bounceInUp {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
        transform: translate3d(0, 3000px, 0) scaleY(5)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(.9);
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(.95);
        transform: translate3d(0, 10px, 0) scaleY(.95)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0) scaleY(.985);
        transform: translate3d(0, -5px, 0) scaleY(.985)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInUp {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
        transform: translate3d(0, 3000px, 0) scaleY(5)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(.9);
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(.95);
        transform: translate3d(0, 10px, 0) scaleY(.95)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0) scaleY(.985);
        transform: translate3d(0, -5px, 0) scaleY(.985)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

.notification{
    position: fixed;
    z-index: 10;
    width: 100%;
    max-width: 300px;
}
.notification-left{
    left: 0;
    bottom: 0;
}
.notification-center{
    right: 50%;
    bottom: 0;
    transform: translateX(50%);
}
.notification-right{
    right: 0;
    bottom: 0;
}
.alert{
    padding: 15px;
    max-width: 300px;
    border-radius: 5px;
    text-align: justify;
    font-size: 14px;
    cursor: pointer;
    margin: 10px ;
    width: 100%;
}
.alert-success{
    color: #3c763d;
    background-color: #dff0d8;
}
.alert-success::before{
    content: '\f058';
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    margin-left: 7px;
    font-size: 16px;
    vertical-align: top;
}

.alert-danger{
    color: #721c24;
    background-color: #f8d7da;
}
.alert-danger::before{
    content: '\f057';
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    margin-left: 7px;
    font-size: 16px;
    vertical-align: top;
}

.alert-warning{
    color: #856404;
    background-color: #fff3cd;
}
.alert-warning::before{
    content: '\f06a';
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    margin-left: 7px;
    font-size: 16px;
    vertical-align: top;
}

.alert-primary{
    color: #0c5460;
    background-color: #d1ecf1;
}
.alert-primary::before{
    content: '\f05a';
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    margin-left: 7px;
    font-size: 16px;
    vertical-align: top;
}

#close-menu{
    visibility: hidden;
}

@media screen and (max-width: 1279px){
    .menu{
        width: 90% !important;
        max-width: 260px !important;
        position: fixed !important;
        top: 0 !important;
        right: -260px;
        z-index: 9 !important;
        transition: .5s all ease-in-out;
    }
    .menu-open {
        right: 0 !important;
    }
    .content {
        margin-right: 0;
    }
    #menu-icon-desktop{
        display: none;
    }
    #menu-icon-mobile{
        display: inline-block;
    }

}
@media screen and (max-width: 800px){
    .content {
        padding: 10px;
    }
    .row{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        width: 100%;
    }
    .row .col{
        width: 100%;
        padding: 0;
        margin-bottom: 5px;
    }
    .file{
        padding: 15px 0;
    }
    #close-menu{
        visibility: visible;
    }
}


.pagination{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    font-family: sans-serif;
}

.pagination .page-link{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #F1F2F4;
}