.margin-bottom-20 {
    margin-bottom: 20px;
}


@media (max-width: 550px) {

    .persiandate {
        display: none;
    }
}

.persiandate {
    height: 44px;
    width: 100%;
    background-color: #182847;
    text-align: center;
}

    .persiandate p {
        margin: 0;
        position: relative;
        top: 11px;
        color: #c8d8ff;
    }



input#menu {
    display: none;
}

    .icon {
        /*background: #FFF;*/
        cursor: pointer;
        /*display: block;*/
        height: 24px;
        /*padding: 16px;*/
        width: 24px;
    }

label.icon {
    position: fixed;
    z-index: 200;
}

.icon .menu,
.icon .menu::before,
.icon .menu::after {
    background: #182847;
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    transition: background ease .3s, top ease .3s .3s, transform ease .3s;
    width: 20px;
}

.icon:hover .menu,
.icon:hover .menu::before,
.icon:hover .menu::after {
    background: #182847;
}

.icon .menu {
    left: 18px;
    top: 27px;
}

    .icon .menu::before {
        top: -6px;
    }

    .icon .menu::after {
        top: 6px;
    }

#menu:checked + .icon .menu {
    background: transparent;
}

    #menu:checked + .icon .menu::before {
        transform: rotate(45deg);
    }

    #menu:checked + .icon .menu::after {
        transform: rotate(-45deg);
    }

    #menu:checked + .icon .menu::before,
    #menu:checked + .icon .menu::after {
        top: 0;
        transition: top ease .3s, transform ease .3s .3s;
    }










i {
    position: relative;
    top: 2px;
}





/*sidebar*/




.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #182847;
    overflow-x: hidden;
    transition: 0.5s;
    z-index: 2;
    /*padding-top: 65px;*/
}


    /*  .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover {
            color: #f1f1f1;
        }
*/
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 16px;
        font-size: 36px;
        width: 100%;
        color: white;
        font-weight: 500;
    }


.sidebar-profile {
    background-color: #6f82b9;
    padding: 12px;
    border-radius: 0px 10px 0px 0px;
    border: 1px solid #3d5c9b;
    height: 253px;
}

.sidebar-profile-image {
    width: 100%;
    text-align: center;
}

    .sidebar-profile-image img {
        border-radius: 100%;
        border: 1px solid #207e20;
        box-shadow: 0px 0px 0px #009c08;
    }

.sidebar-profile-name {
    text-align: center;
}

    .sidebar-profile-name p {
        color: white;
        margin: 20px 10px;
        font-size: 18px;
        font-weight: 600;
        height: 27px;
    }

#main {
    transition: margin-right .5s;
    margin-right: 250px;
    overflow-x:hidden;
    /*padding: 16px;*/
}

@media screen and (max-width: 450px) {
    .hide-in-mobile {
        display:none;
    }
    .login-navbar .left div {
        padding: 0 10px !important;
    }


}












.accordion {
    --bs-accordion-border-radius: 0 !important;
    --bs-accordion-inner-border-radius: 0 !important;
}

.accordion-button {
    direction: rtl !important;
    font-weight: 500;
    background-color: #c8d8ff !important;
}

    .accordion-button::after {
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    .accordion-button i {
        padding-left: 5px;
        top: 0 !important;
        min-width: 22px;
    }

.accordion-body {
    padding: 0 !important;
}

.accordion-body {
    background-color: #dbe6fb;
    color: #09145c;
    font-size: 14px;
    font-weight: 300;
}

.menu-item-sub-parent {
    border: 1px solid #c8d8ff;
    width: 100%;
    cursor: pointer;
    transition: 0.3s;
    height:55px;
}

    .menu-item-sub-parent:hover {
        background-color: #b2b5ff;
        padding-right: 4px;
    }

.menu-item-sub {
    height: 100%;
    z-index:100;
    padding-right: 34px !important;
    padding: 16px 34px 16px 10px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    /*max-height: fit-content;*/
}
    .menu-item-sub .fa{
        height:100%;
    }

    .accordion-collapse {
        direction: rtl;
    }



/*end sidabar*/

.openNav {
    position: relative;
    top: 2px;
    cursor: pointer;
}

.login-navbar ul {
    display: flex;
    margin: auto 0;
    padding: 10px;
    background-color: cornflowerblue;
    color: aliceblue;
}

li.right {
    text-align: right;
    width: 100%;
    white-space:nowrap;
}

li.left {
    float: left;
}

.login-navbar .left div {
    width: max-content;
    padding: 0 30px;
}

.panel .menu {
    /* height: 100vh; */
}

.panel .page {
    padding-right: 0;
}

.panel .page-breadcrumb {
    background-color: white;
    padding: 10px 18px;
    position: relative;
}

.panel .page-breadcrumb-text {
    margin: auto;
    font-size: 13px;
    color: gray;
}

p.page-breadcrumb-text i {
    padding: 0 4px;
}


.page-title {
    padding: 0 0 12px 0;
}

.page-title-text {
    margin: auto;
    font-size: 20px;
    color: #417c71;
    text-shadow: 2px 1px 4px #c5fff4;
    font-weight: 900;
}

.page-data {
    /*height: 100vh;*/
    padding: 12px 20px 0 0;
    background-color: #f3f6fa;
}

.page-form {
    box-shadow: 0 10px 20px #00000014;
    background-color: #ffffff;
    margin: 0px 0px 20px 20px;
    border: 1px solid #eee;
    border-radius: 7px;
    padding: 10px 20px 10px 20px;
}

.form-title-text {
    border-bottom: 1px solid #e5e5e5;
    padding: 0 0 10px 0;
    color: darkgreen;
}

.form-input {
    margin: 0 0 20px 0;
    border: 1px solid #969696 !important;
    padding: 0 10px 0 0;
    height: 38px;
    border-radius: 4px;
    width: 100%;
}

.form-submit {
    max-width: 140px;
    float: left;
}

.page-result {
    box-shadow: 0 10px 20px #00000014;
    background-color: #ffffff;
    margin: 0px 0px 20px 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}

.page-result-title {
    border-bottom: 1px solid #e5e5e5;
    color: white;
    background-color: #0d6efd;
    border-radius: 7px 7px 0 0px;
    border: 1px solid #3c9fc5;
    margin: 0;
}

.page-result-title-text {
    padding: 10px 20px 10px 10px;
    margin: 0;
    color: white;
    /*width: auto;*/
}

.page-result-add {
    padding: 4px 4px;
    /*width: max-content;*/
}

.page-result-add-title {
    color: white;
    background-color: mediumseagreen;
    max-width: 180px;
    float: left;
    min-width: 180px;
    border: 1px solid forestgreen;
    text-align: center;
    justify-content: center;
    margin: auto;
    padding: 5px 5px 5px 5px;
    border-radius: 4px 4px 4px 4px;
    height: 36px;
}

/*validation elements*/
.text-danger {
    position: relative;
    bottom: 18px;
}

textarea ~ .text-danger {
    bottom: 26px;
}

.k-widget.k-dropdown ~ .text-danger {
    top: 2px;
}

.modal-body.text-danger {
    bottom: 0;
}

.k-grid-filter ~ .k-link {
    position: relative;
    left: 16px;
}

.form-link-file {
    font-weight: bolder;
    text-shadow: 1px 1px 1px #eae9ff;
    text-decoration: underline;
}
/*end validation elements*/



/*Modal*/

.modal-content {
    direction: rtl;
}
/*end Modal*/

/*Grid Operation*/
.grid-edit {
    color: blue !important;
    font-weight: 600;
}

    .grid-edit:hover {
        color: darkblue !important;
        cursor: pointer;
    }

#btn-create {
    margin: 20px 0 20px 0;
}

.grid-delete {
    color: red !important;
    font-weight: 600;
}

    .grid-delete:hover {
        color: darkred !important;
        cursor: pointer;
    }

.grid-view {
    color: orchid !important;
    font-weight: 600;
}

    .grid-view:hover {
        color: mediumorchid !important;
        cursor: pointer;
    }
/*end Grid Operation*/


/*Detail Pages*/
.detail-value-parent {
    display: flex;
    margin: 20px 0 30px 0;
}

.detail-label {
    display: inline-block;
    color: #989898;
    font-weight: 300;
}

.detail-value {
    padding-right: 20px;
    font-weight: 500;
    color: #7e7e7e;
}
/*End Detail Pages*/