@media (max-width: 1000px) {
    .hidden-mobile {
        display: none;
    }
}
body {
    text-align: right !important;
}
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
    text-align: right;
}
.notification {
    text-decoration: none;
    position: relative;
    border-radius: 2px;
    display: block;
}
a {
    text-decoration: none !important;
}
.dx-button {
    background: none !important;
}
.notification .badge {
    position: absolute;
    top: -7px;
    left: -7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ed6258, #b84a42);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    color: white;
    width: 22px;
    height: 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.77rem;
}
#ToDateDiv {
    display: flex;
    width:100%;
    gap:10px;
    flex-grow:5
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


    .btn:active, .btn.active {
        outline: 0;
        background-image: none;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }

    .btn:hover, .btn:focus {
        color: #333333;
        text-decoration: none;
    }



.btnw {
    width: 130px;
    border: #fff;
}

.fit {
    margin: 5px;
    border-radius: 10px;
}

.figborder {
    border: 1px solid #cccccc;
    border-radius: 10px;
}

.figcaption {
    font-weight: bold;
    color: #000;
    text-wrap: wrap;
    height: 75px;
}

.btn-default {
    color: #333333;
    background-color: #fffbfb;
    border-color: #cccccc;
}

.user-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    float: right;
    margin-left: .8rem;
}

/*#crumbs{
    margin-bottom:15px
}*/

#crumbs ul li a {
    display: block;
    float: left;
    height: 23px;
    background: #87aedd;
    text-align: center;
    position: relative;
    margin: 0 4px 0 0;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    padding: 3px 40px 0 80px;
    color: #fff !important
}

#crumbs ul {
    list-style: none;
    display: inline-table;
}

    #crumbs ul li {
        display: inline;
    }

        #crumbs ul li a:after {
            content: "";
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-right: 12px solid rgb(255, 255, 255);
            position: absolute;
            right: 0px;
            top: 0px;
            z-index: 0;
        }

        #crumbs ul li a:before {
            content: "";
            position: absolute;
            border-top: 12px solid transparent;
            border-right: 12px solid #87aedd;
            left: -11.4px;
            border-bottom: 12px solid transparent;
            top: 0px;
        }

        #crumbs ul li a:hover {
            background: #ff6a00;
        }

            #crumbs ul li a:hover:before {
                border-right-color: #ff6a00;
            }

        #crumbs ul li:first-child a {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

            #crumbs ul li:first-child a:before {
                display: none;
            }

        #crumbs ul li:last-child a {
            /* padding-right: 80px;*/
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

            #crumbs ul li:last-child a:after {
                display: none;
            }


a {
    color: #333333;
}

/*رنگ آیکون ها*/
.dx-datagrid .dx-link {
    text-decoration: underline;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.125);
}


.dx-widget {
    /*font-size: 12px !important;*/
    font-family: "primary-font" !important;
}
.dx-button-has-icon .dx-icon {
    font-size: 28px !important;
}
.dx-list-item-content {
    font-size: 14px !important;
 /*   white-space: pre-wrap !important;*/
    text-align: right;
}

.dx-overlay-wrapper input, .dx-overlay-wrapper textarea {
    font-family: "primary-font" !important;
}
.dx-widget input, .dx-widget textarea {
    font-family: "primary-font" !important;
}

/*.dx-button-mode-text .dx-icon {
    color: #007bff;
}*/
.dx-button .dx-icon {
    color: #007bff !important;
}
.dx-list-item .dx-icon {
    color: #007bff !important;
}
.dx-cardview-field-value--text-align-left {
    text-align: right !important;
}

.toolbar {
    width: 100%;
    background-color: #e8f0fd;
    color: rgba(0,0,0,.87);
    padding: 0;
    overflow: visible;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #ddd;
    transition: box-shadow 0.3s ease;
    border-radius:5px
}



/************آیکون ورود*/
.dx-toolbar-button .dx-menu .dx-menu-item .dx-menu-item-content {
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: unset;
}

.login-icone{
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content:center

}

.dx-toolbar-button .dx-menu .dx-menu-item .dx-menu-item-content {
     padding-top: 0!important; 
     padding-bottom:0!important; 
     line-height: 20px; 
}

.dx-toolbar-button .dx-menu .dx-menu-item {
    color: rgba(0, 0, 0, .87);
    font-size: 14px;
    font-weight: 500;
    height: 100%!important;
}

    .dx-toolbar-button .dx-menu .dx-menu-item:hover {
        background-color: rgba(129, 170, 214,0.8 ) !important
    }

.dx-toolbar .dx-toolbar-before {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;
}

.dx-toolbar .dx-toolbar-before p{
    margin-bottom:3px
}

.dx-toolbar-after .dx-toolbar-item {
    -webkit-padding-start: 5px;
    padding-inline-start: 10px;
}

.dx-scrollable-wrapper .dx-list-item .dx-icon {
    color: #004ea3 !important;
}

/*این قسمت مربوط به رنگ رکورد های گرید می باشد
*/
.RowRed {
    background: #fff5f5;
    /* border-right:6px solid #d92c1c; */
    background: #EB3F3F;
    background: linear-gradient(90deg, rgba(235, 63, 63, 0.19) 50%, rgba(235, 63, 63, 0.87) 100%)
}

.RowGreen {
    background: #f8fff8;
    /* border-right:6px solid #aae9f2; */
    background: #55ed9a;
    background: linear-gradient(90deg, rgba(85, 237, 154, 0.19) 50%, rgba(85, 237, 154, 0.87) 100%)
    !important;
}
.RowOrenge {
    background: #f8fff8;
    /* border-right:6px solid #aae9f2; */
    background: #e89d41;
    background: linear-gradient(90deg, rgba(232, 157, 65, 0.19) 50%, rgba(232, 157, 65, 0.87) 100%)
    !important;
}

    .RowRed:hover, .RowGreen:hover, .RowOrenge:hover {
        background: #f1faff;
        cursor: pointer
    }

.datetime-inline {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

#crumbs ul li a {
    display: block;
    float: left;
    height: 23px;
    background: #6e92cc;
    background: linear-gradient(27deg, rgba(110, 146, 204, 0.69) 0%, rgba(75, 121, 196, 0.9) 100%);
    text-align: center;
    position: relative;
    margin: 0 4px 0 0;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    padding: 3px 40px 0 80px;
    color: #fff !important
}

#crumbs ul {
    list-style: none;
    display: inline-table;
    padding-right:0!important
}

    #crumbs ul li {
        display: inline;
    }

        #crumbs ul li a:after {
            content: "";
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-right: 12px solid rgb(255, 255, 255);
            position: absolute;
            right: 0px;
            top: 0px;
            z-index: 0;
        }

        #crumbs ul li a:before {
            content: "";
            position: absolute;
            border-top: 12px solid transparent;
            border-right: 12px solid #8EAAD8;
            left: -11.4px;
            border-bottom: 12px solid transparent;
            top: 0px;
        }

        #crumbs ul li a:hover {
            background: #ff6a00;
        }

            #crumbs ul li a:hover:before {
                border-right-color: #ff6a00;
            }

        #crumbs ul li:first-child a {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

            #crumbs ul li:first-child a:before {
                display: none;
            }

        #crumbs ul li:last-child a {
            /* padding-right: 80px;*/
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

            #crumbs ul li:last-child a:after {
                display: none;
            }

a {
    color: #333333;
}
.dx-accordion-item-body {
    overflow: hidden;
    padding: 0 !important;
}




#customNotificationContainer {
    position: fixed;
    bottom: 20px;
    left: -300px; /* پنهان بیرون از سمت چپ */
    color: white;
    border-radius: 12px;
    transition: left 0.5s ease;
    z-index: 9999;
}

    #customNotificationContainer.show {
        left: 20px; /* وارد صفحه از سمت چپ */
    }
/* سطح 0 */
.level-1 {
    background-color: #ECF3FE; /* نزدیک به رنگ سایت */
    color: #0c3b73; /* آبی تیره برای متن */
    padding: 6px 10px;
    border-radius: 12px;
    font-weight: 600;
/*    box-shadow: 0 2px 6px rgba(0,0,0,0.05);*/
    transition: all 200ms ease;
}

    .level-1:hover, active {
        background-color: rgb(212,222,240); /* نزدیک به رنگ سایت */
    }

    /* سطح 1 */
    .level-2 {
        background-color: #cce5ff; /* آبی خیلی روشن */
        color: #004a99; /* آبی متوسط */
        padding: 5px 10px;
        border-radius: 10px;
        font-weight: 500;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }


        .level-2:hover, active {
            background-color: rgb(190,221,254);
        }


/* سطح 2 */
.level-3 {
    background-color: #fff9e6; /* کرم روشن / هلویی ملایم */
    color: #8a6d00; /* طلایی / زرد تیره */
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

    .level-3:hover, active {
        background-color: rgba(254,228,191,0.8);
    }



/* سطح 3 */
.level-4 {
    background-color: #d4f7da; /* سبز ملایم */
    color: rgb(26, 107, 44); /* سبز تیره */
    padding: 5px 8px;
    border-radius: 10px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

    .level-4:hover, active {
        background-color: rgb(195,235,201);
    }


    .level-1:hover,
    .level-2:hover,
    .level-3:hover,
    .level-4:hover {
        transform: translateY(-2px);
        /*        box-shadow: 0 4px 12px rgba(0,0,0,0.12);*/
        cursor: pointer;
    }


@media (max-width: 768px) {
    .popup {
        height: auto !important;
        max-height: 85vh!important;
        overflow-y: auto;
    }
}