:root {
    --red: #DC3545;
    --green: #28A745;
    --yellow: #FD7E14;
    --light-blue: #00B4D6;
    --gray: #6C757D;
    --gray-300: #DEE2E6;
    --asar: #F6CC61;
    --ejra: #59C3F0;
    --barname: #BF0980;
    --niaz: #75B9BB;
    --payesh: #102D69;
    --weinno: #0178BC;
    --gray-700: #495057;
    color-scheme: light;
}

.width-auto {
    width: auto !important;
}

.input-group textarea {
    /*width: auto !important;*/
}

.topbar .navbar-header {
    background: rgb(0,0,0,0.12);
    padding: 2px;
}

.nav-userinfo span {
    font-size: 12px;
    margin-right: 5px;
    line-height: 30px;
    color: #fff;
}

table:not(.no-header-color) thead {
    background-color: #2f3d4a;
    color: #fff;
}

table tbody {
    border: 2px solid #343a40 !important;
    border-collapse: collapse !important;
}

    table, table tbody tr {
        border-collapse: collapse !important;
    }

.table-scroll {
    max-height: 250px;
    overflow-y: scroll;
    border: 2px solid #343a40 !important;
}

.mds-bootstrap-persian-datetime-picker-container tbody, .no-border {
    border: none !important;
}

.border-purple {
    border-color: #7460ee !important;
}

.card-mail .modal, .card-mail .modal table,
.card-mail label {
    font-size: 11px !important;
}

.fa.fa-star:not(.text-warning) {
    color: #d7d7d7;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: #9a9a9a;
}

.fa.fa-star.text-warning {
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: #4c350a;
}

.card-mail .fa.fa-star:not(.text-warning):hover {
    color: #ffbc34;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: #4c350a;
}

.short-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtl, .text-rtl {
    direction: rtl;
}

.ltr, .text-ltr {
    direction: ltr;
}

.col-td-1 {
    width: 8.33%;
}

.col-td-2 {
    width: 16.66%;
}

.col-td-3 {
    width: 25%;
}

.col-td-4 {
    width: 33.33%;
}

.col-td-5 {
    width: 41.65%;
}

.col-td-6 {
    width: 50%;
}

.bootstrap-dialog-draggable {
    padding-bottom: 0 !important;
}

.bootstrap-dialog-header {
    width: 100%;
}
/*.page-titles {
    background-color: #fff;
    padding-top: 15px;
    border: 1px solid #ddd;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    margin-bottom: 0 !important;
}
div#formMainBody .card:nth-of-type(1) {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}*/

.card .control-label {
    /*text-align: left;*/
}

.card .form-group .control-label {
    text-align: right;
    /*color: #9a9a9a;*/
    width: 100%;
}

.bootstrap-dialog-header {
    width: 100%;
    font-size: 15px;
    font-weight: bold;
}



.bg-gray {
    background-color: #dae6e8 !important
}

a.bg-gray:focus, a.bg-gray:hover, button.bg-gray:focus, button.bg-gray:hover {
    background-color: #d1f1f7 !important
}

/*--background-color: #dae6e8;*/

div.note-editor.card {
    min-height: 300px;
}

div.note-editing-area {
    padding-top: 20px;
}

.dropdown-header {
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    margin-top: -8px;
    color: #54667a !important;
}

input[type=text] {
    min-height: 32px;
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .pageOfMergeClassroomAndTrainingCalendarProgram .popover {
        width: 100% !important;
        max-width: 220px !important;
    }

        .pageOfMergeClassroomAndTrainingCalendarProgram .popover h5.mb-0.font-13 {
            font-size: 10px !important;
        }

    .white-space-inherit-sm {
        white-space: inherit;
    }
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .pageOfMergeClassroomAndTrainingCalendarProgram .popover {
        max-width: 300px !important;
    }

        .pageOfMergeClassroomAndTrainingCalendarProgram .popover h5.mb-0.font-13 {
            font-size: 10px !important;
        }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .pageOfMergeClassroomAndTrainingCalendarProgram .popover {
        max-width: 500px !important;
    }

        .pageOfMergeClassroomAndTrainingCalendarProgram .popover h5.mb-0.font-13 {
            font-size: 11px !important;
        }

    .nav-userinfo {
        display: inline-flex !important;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pageOfMergeClassroomAndTrainingCalendarProgram .popover {
        max-width: 600px !important;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .pageOfMergeClassroomAndTrainingCalendarProgram .popover {
        max-width: 600px !important;
    }
}

.btn.btn-app {
    border-radius: 5px;
    position: relative;
    padding: 0px 12px;
    margin: 0 0 8px 5px;
    min-width: 80px;
    height: 40px;
    color: #666;
    border: 1px solid; /*#ddd;
    background-color: #f4f4f4;*/
    text-align: center;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

.btn-app i {
    font-size: 25px !important;
    display: block;
    padding: 0 !important;
    margin-left: 5px;
}

.btn-app:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 0px);
    height: 50%;
    background-image: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.2));
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    font-size: 13px;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice {
    float: right !important;
}

/*a:hover.btn-app {
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset, 0 0 5px 2px rgba(255, 255, 255, 0.75), 0 0 10px 2px rgba(255, 255, 255, 0.75) inset;
}*/
a: hover.btn-app {
    box-shadow: 0 1px 4px #009efba1, 0 0px rgba(0, 0, 0, 0.05)
}

.btn-app.bgc-gradient-blue:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-blue:not(:disabled):not(.disabled):active,
.bgc-gradient-blue {
    background: linear-gradient(356deg, #003264 0%,#6ac9e0 100%);
    background-image: linear-gradient(356deg, #003264 0%,#6ac9e0 100%)
}

.btn-app.bgc-gradient-red:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-red:not(:disabled):not(.disabled):active,
.bgc-gradient-red {
    background: linear-gradient(135deg, #f200a1 0%,#f6062f 100%);
}

.btn-app.bgc-gradient-yellow:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-yellow:not(:disabled):not(.disabled):active,
.bgc-gradient-yellow {
    background: linear-gradient(#740,gold);
}

.btn-app.bgc-gradient-purple:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-purple:not(:disabled):not(.disabled):active,
.bgc-gradient-purple {
    background: linear-gradient(135deg, #ff3cab 0%,#774a9f 100%);
}

.btn-app.bgc-gradient-orange:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-orange:not(:disabled):not(.disabled):active,
.bgc-gradient-orange {
    background: linear-gradient(135deg, #fda000 0%,#d31f8a 100%);
}

.btn-app.bgc-gradient-green:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-green:not(:disabled):not(.disabled):active,
.bgc-gradient-green {
    background: linear-gradient(166deg, #0fe1f0 0%,#036ED9 100%)
}

.btn-app.bgc-gradient-black:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-black:not(:disabled):not(.disabled):active,
.bgc-gradient-black {
    background: linear-gradient(#000,#888);
}

.btn-app.bgc-gradient-dark-green:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-dark-green:not(:disabled):not(.disabled):active,
.bgc-gradient-dark-green {
    background: linear-gradient(#184e68,#57ca85)
}

.btn-app.bgc-gradient-pink:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-pink:not(:disabled):not(.disabled):active,
.bgc-gradient-pink {
    background: linear-gradient(135deg, #FF57B9 0%,#A704FD 100%);
}

.btn-app.bgc-gradient-dark-blue:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-dark-blue:not(:disabled):not(.disabled):active,
.bgc-gradient-dark-blue {
    background: linear-gradient(#003869,#0089ff)
}

.btn-app.bgc-gradient-blue-yellow:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-blue-yellow:not(:disabled):not(.disabled):active,
.bgc-gradient-blue-yellow {
    background: linear-gradient(0deg, #5e2563 0%,#65789b 100%);
}

.btn-app.bgc-gradient-brown:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-brown:not(:disabled):not(.disabled):active,
.bgc-gradient-brown {
    background: linear-gradient(135deg, #c28c5c 0%,#8f532f 100%);
}

.btn-app.bgc-gradient-red-gray:not(:disabled):not(.disabled).active,
.btn-app.bgc-gradient-red-gray:not(:disabled):not(.disabled):active,
.bgc-gradient-red-gray {
    background: linear-gradient(145deg, #6698c6 0%,#dc2e2e 100%)
}

.f-13 {
    font-size: 13px;
}

.f-23 {
    font-size: 23px;
}


.text-left-ltr {
    direction: ltr;
    text-align: left;
}

.text-correct--english-persian-char {
    unicode-bidi: bidi-override;
}


/*.btn.btn-app1 {
    height: 150px;
    width: 150px;
    background: #fff;
    border-radius: 20px;
    margin: 20px;
    border: 1px solid #dde1e7;
}

.btn.btn-app {
    box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
}

.btn.btn-app:hover {
    box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);
}
*/

.d-grid {
    display: grid;
}

.d-inherit {
    display: inherit;
}

.panel-classinfo .data-item label {
    margin-bottom: 0;
}

.panel-classinfo .data-item {
    min-height: 18px;
    margin-bottom: 15px;
}

.card .form-group .required-field:after {
    float: right !important;
}

.required-field:after {
    content: "*";
    float: left;
    color: red;
    padding: 0 5px;
    font-size: 12px;
}

.float-none.required-field:after {
    float: none !important;
}

.day-info {
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
}

.list-times {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: space-evenly;
}

.list-place {
/*    width: 5%;*/
    display: grid;
    height: 100%;
    text-align: center
}

.day-body {
    width: 100%;
    height: 100%;
}

.list-class {
  /*  width: calc(100% - 40px);*/
    display: grid;
    align-items: center;
    padding-right: 10px;
}

.cursor-pointer {
    cursor: pointer
}

.flex-card {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: all .5s
}


[dir] .flex-card {
    background-color: #fff;
    border: 1px solid #fcfcfc;
    border-radius: 15px;
    margin-bottom: 20px
}



    [dir] .flex-card.light-bordered {
        border: 1px solid #e5e5e5 !important
    }

.course-card .course-start .course-date {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 122px;
    height: 100%;
}


.row-menu-color a:nth-child(1) {
    border-color: #003EC9;
}

.row-menu-color a:nth-child(2) {
    border-color: #0672CE;
}

.row-menu-color a:nth-child(3) {
    border-color: #0CA8D3;
}

.row-menu-color a:nth-child(4) {
    border-color: #11D0D7;
}

.row-menu-color a:nth-child(5) {
    border-color: #16DBBB;
}

.row-menu-color a:nth-child(6) {
    border-color: #1ADE99;
}

.row-menu-color a:nth-child(7) {
    border-color: #030CF4;
}

.row-menu-color a:nth-child(8) {
    border-color: #4803F4;
}

.row-menu-color a:nth-child(9) {
    border-color: #9703F4;
}

.row-menu-color a:nth-child(10) {
    border-color: #E503F4;
}

.row-menu-color a:nth-child(11) {
    border-color: #F403B4;
}

.row-menu-color a:nth-child(12) {
    border-color: #F40366;
}

.row-menu-color a:nth-child(13) {
    border-color: #F40317;
}

.row-menu-color a:nth-child(14) {
    border-color: #F43D03;
}

.row-menu-color a:nth-child(15) {
    border-color: #F48C03;
}

.row-menu-color a:nth-child(16) {
    border-color: #F4DA03;
}

.row-menu-color a:nth-child(17) {
    border-color: #C0F403;
}

.row-menu-color a:nth-child(18) {
    border-color: #71F403;
}

.row-menu-color a:nth-child(19) {
    border-color: #23F403;
}

.row-menu-color a:nth-child(20) {
    border-color: #03F432;
}

.row-menu-color a:nth-child(21) {
    border-color: #00A6A2;
}

.row-menu-color a:nth-child(22) {
    border-color: #00BCBC;
}

.row-menu-color a:nth-child(23) {
    border-color: #00D2D2;
}

.row-menu-color a:nth-child(24) {
    border-color: #00CAE9;
}

.row-menu-color a:nth-child(25) {
    border-color: #03a9f4;
}

.row-menu-color a:nth-child(26) {
    border-color: #035BF4;
}

.row-menu-color a:nth-child(27) {
    border-color: #030CF4;
}

.row-menu-color a:nth-child(28) {
    border-color: #4803F4;
}

.row-menu-color a:nth-child(29) {
    border-color: #9703F4;
}

.row-menu-color a:nth-child(30) {
    border-color: #E503F4;
}

.row-menu-color a:nth-child(31) {
    border-color: #F403B4;
}

.row-menu-color a:nth-child(32) {
    border-color: #F40366;
}

.row-menu-color a:nth-child(33) {
    border-color: #F40317;
}

.row-menu-color a:nth-child(34) {
    border-color: #F43D03;
}

.row-menu-color a:nth-child(35) {
    border-color: #F48C03;
}

.row-menu-color a:nth-child(36) {
    border-color: #F4DA03;
}

.row-menu-color a:nth-child(37) {
    border-color: #C0F403;
}

.row-menu-color a:nth-child(38) {
    border-color: #71F403;
}

.row-menu-color a:nth-child(39) {
    border-color: #23F403;
}

.row-menu-color a:nth-child(40) {
    border-color: #03F432;
}

.row-menu-color a:nth-child(1) i {
    color: #00A6A2;
}

.row-menu-color a:nth-child(2) i {
    color: #00BCBC;
}

.row-menu-color a:nth-child(3) i {
    color: #00D2D2;
}

.row-menu-color a:nth-child(4) i {
    color: #00CAE9;
}

.row-menu-color a:nth-child(5) i {
    color: #03a9f4;
}

.row-menu-color a:nth-child(6) i {
    color: #035BF4;
}

.row-menu-color a:nth-child(7) i {
    color: #030CF4;
}

.row-menu-color a:nth-child(8) i {
    color: #4803F4;
}

.row-menu-color a:nth-child(9) i {
    color: #9703F4;
}

.row-menu-color a:nth-child(10) i {
    color: #E503F4;
}

.row-menu-color a:nth-child(11) i {
    color: #F403B4;
}

.row-menu-color a:nth-child(12) i {
    color: #F40366;
}

.row-menu-color a:nth-child(13) i {
    color: #F40317;
}

.row-menu-color a:nth-child(14) i {
    color: #F43D03;
}

.row-menu-color a:nth-child(15) i {
    color: #F48C03;
}

.row-menu-color a:nth-child(16) i {
    color: #F4DA03;
}

.row-menu-color a:nth-child(17) i {
    color: #C0F403;
}

.row-menu-color a:nth-child(18) i {
    color: #71F403;
}

.row-menu-color a:nth-child(19) i {
    color: #23F403;
}

.row-menu-color a:nth-child(20) i {
    color: #03F432;
}

.row-menu-color a:nth-child(21) i {
    color: #00A6A2;
}

.row-menu-color a:nth-child(22) i {
    color: #00BCBC;
}

.row-menu-color a:nth-child(23) i {
    color: #00D2D2;
}

.row-menu-color a:nth-child(24) i {
    color: #00CAE9;
}

.row-menu-color a:nth-child(25) i {
    color: #03a9f4;
}

.row-menu-color a:nth-child(26) i {
    color: #035BF4;
}

.row-menu-color a:nth-child(27) i {
    color: #030CF4;
}

.row-menu-color a:nth-child(28) i {
    color: #4803F4;
}

.row-menu-color a:nth-child(29) i {
    color: #9703F4;
}

.row-menu-color a:nth-child(30) i {
    color: #E503F4;
}

.row-menu-color a:nth-child(31) i {
    color: #F403B4;
}

.row-menu-color a:nth-child(32) i {
    color: #F40366;
}

.row-menu-color a:nth-child(33) i {
    color: #F40317;
}

.row-menu-color a:nth-child(34) i {
    color: #F43D03;
}

.row-menu-color a:nth-child(35) i {
    color: #F48C03;
}

.row-menu-color a:nth-child(36) i {
    color: #F4DA03;
}

.row-menu-color a:nth-child(37) i {
    color: #C0F403;
}

.row-menu-color a:nth-child(38) i {
    color: #71F403;
}

.row-menu-color a:nth-child(39) i {
    color: #23F403;
}

.row-menu-color a:nth-child(40) i {
    color: #03F432;
}



/*
 * Misc: print
 * -----------
 */
@media print {
    .no-print,
    .main-sidebar,
    .right-side,
    .main-header,
    .content-header {
        display: none !important;
    }

    .content-wrapper,
    .left-side,
    .main-footer {
        margin-right: 0 !important;
        min-height: 0 !important;
        -webkit-transform: translate(0, 0) !important;
        -ms-transform: translate(0, 0) !important;
        -o-transform: translate(0, 0) !important;
        transform: translate(0, 0) !important;
    }

    .fixed .content-wrapper,
    .fixed .left-side {
        padding-top: 0 !important;
    }

    .invoice {
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
    }

    .invoice-col {
        float: right;
        width: 33.3333333%;
    }

    .table-responsive {
        overflow: auto;
    }

        .table-responsive > .table tr th,
        .table-responsive > .table tr td {
            white-space: normal !important;
        }
}

.w-70 {
    width: 70% !important;
}

.equal-width {
    flex: 1 1 0 !important;
}

[class^="new-color-"] {
    border: 1px solid;
}

.new-color-red {
    background-color: rgba(255, 99, 132, 0.2);
    border-color: rgb(255, 99, 132);
}

.new-color-orange {
    background-color: rgba(255, 159, 64, 0.2);
    border-color: rgb(255, 159, 64);
}

.new-color-yellow {
    background-color: rgba(255, 205, 86, 0.2);
    border-color: rgb(255, 205, 86);
}

.new-color-green {
    background-color: rgba(75, 192, 192, 0.2);
    border-color: rgb(75, 192, 192);
}

.new-color-blue {
    background-color: rgba(54, 162, 235, 0.2);
    border-color: rgb(54, 162, 235);
}

.new-color-purple {
    background-color: rgba(153, 102, 255, 0.2);
    border-color: rgb(153, 102, 255);
}

.new-color-gray {
    background-color: rgba(201, 203, 207, 0.2);
    border-color: rgb(201, 203, 207);
}

.inc-btn-padding .btn {
    padding-right: 4px;
    padding-left: 4px;
    margin-bottom: 2px;
}

.select2-container--default .select2-search--inline .select2-search__field {
    direction: rtl;
    padding-right: 10px;
}

.select2-container .select2-search--inline {
    float: right !important;
}

@media (max-width: 576px) {
    .pt-xs-4, .py-xs-4 {
        padding-top: 1.5rem !important;
    }

    .pb-xs-4, .py-xs-4 {
        padding-bottom: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .pt-lsm-4, .py-lsm-4 {
        padding-top: 1.5rem !important;
    }

    .pb-lsm-4, .py-lsm-4 {
        padding-bottom: 1.5rem !important;
    }
}

.custom-control-label::before {
    background-color: #c7c7c7;
}

#password-strength-status {
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 4px;
    margin-top: 5px;
}

    #password-strength-status.new-color-gray {
        color: red !important;
    }

.translate-middle {
    transform: translate(-50%,-50%) !important;
}

.start-100 {
    left: 100% !important;
}

.header-title {
    border-bottom: 2px solid #e1e1e1;
    padding-bottom: 10px;
    width: 30%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.flip-card {
    background-color: transparent;
    width: 200px;
    height: 280px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    overflow: unset !important;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-back {
    background-color: #b8b2db;
    color: #000;
    transform: rotateY(180deg);
    border-radius: 7px;
    z-index: 999;
}

.br-primary {
    border-color: #7460ee !important;
}

.badge_bookmark {
    z-index: 999;
    border-top-right-radius: 7px;
    right: 0;
}

.badge_pin {
    z-index: 999;
    border-top-right-radius: 7px;
    left: 0;
    top: 10px;
}




.fa-rotate-45 {
    -ms-transform: rotate(45deg); /* Internet Explorer 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg); /* Standard syntax */
}




/*از اینجا*/

.best .title {
    font-family: "Raleway";
    font-size: 24px;
    font-weight: 700;
    color: #5d4037;
    text-align: center;
}

.best p {
    line-height: 1.5em;
}

.best h1 + p, p + p {
    margin-top: 10px;
}

.best .container {
    padding: 40px 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.best .card-wrap {
    margin: 15px 10px;
    transform: perspective(800px);
    transform-style: preserve-3d;
    cursor: pointer;
}

    .best .card-wrap:hover .card-item-footer {
        transform: translateY(0);
    }

        .best .card-wrap:hover .card-item-footer p {
            opacity: 1;
        }

    .best .card-wrap:hover .card-item-footer, .card-wrap:hover .card-item-footer p {
        transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

        .best .card-wrap:hover .card-item-footer:after {
            transition: 5s cubic-bezier(0.23, 1, 0.32, 1);
            opacity: 1;
            transform: translateY(0);
        }

    .best .card-wrap:hover .card-bg {
        transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
        opacity: 0.8;
    }

    .best .card-wrap:hover .card-item {
        transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
        box-shadow: rgba(255, 255, 255, 0.2) 0 0 0px 1px, rgba(255, 255, 255, 1) 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 0 20px 0, inset #333 0 0 0 1px, inset white 0 0 0 1px
    }

.best .card-item {
    position: relative;
    flex: 0 0 240px;
    width: 200px;
    background-color: #fff;
    background-size: contain;
    height: 280px;
    overflow: hidden;
    border-radius: 10px;
    transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    border: 1px solid;
}

.best .card-bg {
    opacity: 0.7;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: inherit;
    transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    pointer-events: none;
}

.best .card-item-footer {
    padding: 0 10px 10px;
    position: absolute;
    bottom: 0;
    color: #fff;
    background-color: #fff;
    border-radius: 10px;
}


    .best .card-item-footer * {
        position: relative;
        z-index: 1;
    }

    .best .card-item-footer h1 {
        font-family: "Playfair Display";
        font-size: 36px;
        font-weight: 700;
        text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
    }

.select {
    min-height: 32px !important;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat left .75rem center/8px 10px;
}





/*mr hashemi roye system z ---14030331*/
.badge-circle {
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
    font-size: 1rem;
    line-height: 2rem;
    padding: 0;
}

.background--danger, .bg-danger {
    background-color: #f53d55 !important;
}

.background--tertiary, .bg-tertiary {
    background-color: #9779e3 !important;
}

.background--warning, .bg-warning {
    background-color: #f6c460 !important;
}

.background--success, .bg-success {
    background-color: #66df7c !important;
}

.background--warning2, .bg-warning2 {
    background-color: #f89c59 !important;
}

.background--info, .bg-info {
    background-color: #52bbd3 !important;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.shadow-sm, .shadow-sm--on-hover:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(132, 138, 163, 0.1) !important;
}

ul.boxs-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    justify-content: space-around;
}

@@media only screen and (min-width: 769px) and (max-width: 1632px) {
    #main-ul li {
        margin: 2.7em;
        padding: 1em;
        flex: 0 0 15vw !important;
        height: 15vw !important;
    }
}

@@media only screen and (min-width: 501px) and (max-width: 768px) {
    #main-ul li {
        margin: 2.7em;
        padding: 1em;
        flex: 0 0 20vw !important;
        height: 20vw !important;
    }
}

@@media only screen and (min-width: 300px) and (max-width: 500px) {
    #main-ul li {
        flex: 0 0 32vw !important;
        height: 32vw !important;
    }
}

#main-ul li {
    border-radius: 6px;
    margin: 3px;
    flex: 0 0 7vw;
    height: 7vw;
    display: block;
    background: #fff;
    transition: all 300ms;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

ul.boxs-list li.box-items {
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    text-align: center;
    border: 1px solid;
}

section.boxlistItem {
    height: auto !important;
}

summary::marker,
summary::-webkit-details-marker {
    display: none;
    content: '' !important;
}

.max-h-dropdown {
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.icon-dropdown-lastlogin {
    border: 1px solid;
    text-align: center;
    padding: 10px;
    border-radius: 50px;
}

    .icon-dropdown-lastlogin i {
        line-height: 20px !important;
    }

.form-all {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 4px 4px rgba(87,100,126,.21);
    background-color: #fff;
    font-size: 16px;
}

ul.form-section {
    margin: 0;
    padding: 0 14px
}

.pageLogo-mobile, ul.page-section {
    max-width: inherit
}

.form-line, ul.page-section {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: start;
    align-items: flex-start
}

.form-section {
    margin: 12px 4px
}

li[data-type=control_head] {
    list-style: none
}

.form-input-wide {
    width: 100%
}

ul.page-section {
    margin: 0;
    padding: 0 38px;
    list-style: none
}

.form-line {
    padding: 12px 10px;
    margin: 12px 4px;
    border-radius: 3px;
    position: relative;
    width: 100%;
    transition: background-color .15s
}

.form-line {
    padding: 12px 10px;
    margin: 12px 4px;
    border-radius: 3px;
    position: relative;
    width: 100%;
    transition: background-color .15s
}

.form-line {
    margin-top: 12px;
    margin-bottom: 12px
}

.form-label {
    display: inline-block;
    font-weight: 500;
    word-break: break-word
}

.form-label-top {
    width: 100%;
    margin-left: 2px;
    margin-bottom: 14px;
    font-weight: bold;
    color: #2525b9;
}

.form-label.form-label-auto {
    display: block;
    float: none;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.form-input-wide {
    width: 100%
}

.form-multiple-column, .form-single-column {
    width: 100%;
    display: inline-block
}

.form-radio + label, .form-radio + span {
    padding-left: 30px;
    min-height: 20px;
    font-size: .9375em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    word-break: break-word
}

.form-radio-item label {
    width: 100%;
    padding-right: 5px;
    word-break: break-word
}

.form-radio + label:after, .form-radio + label div:after, .form-radio + span:after, .form-radio + span div:after {
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    content: "";
    position: absolute;
    border-radius: 50%;
}

.form-radio + label:after, .form-radio + span:after {
    transform: scale(0);
    opacity: 0;
    transition: transform .2s,opacity .2s
}

.form-multiple-column .form-checkbox-item:not(.formCheckboxOther):not(:last-child), .form-multiple-column .form-radio-item:not(.formRadioOther):not(:last-child), .form-single-column .form-checkbox-item:not(.formCheckboxOther):not(:last-child), .form-single-column .form-radio-item:not(.formRadioOther):not(:last-child) {
    margin-bottom: 10px
}

.form-radio-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.form-radio + label, .form-radio + span {
    display: inline-block
}

.border-dotted {
    border-style: dotted;
}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .form-multiple-column[data-columncount="4"] .form-checkbox-item, .form-multiple-column[data-columncount="4"] .form-radio-item {
        width: 25%
    }

    .form-multiple-column .form-checkbox-item, .form-multiple-column .form-radio-item, .form-single-column .form-checkbox-item, .form-single-column .form-radio-item {
        float: right;
    }
}

.w-90 {
    width : 90% !important;
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;  
    }
      
/* start dashboard style */
.new-header {
    border: var(--sds-size-stroke-border) solid rgba(0, 0, 0, 0.10);
    background: linear-gradient(90deg, #0178BC 0%, #00B5D6 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

.new-header {
    border: var(--sds-size-stroke-border) solid rgba(0, 0, 0, 0.10);
    background: linear-gradient(90deg, #0178BC 0%, #00B5D6 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

    .new-header .navbar-light .navbar-nav .nav-item > a.nav-link {
        color: rgba(255, 255, 255, 0.8) !important;
    }

        .new-header .navbar-light .navbar-nav .nav-item > a.nav-link:hover, .new-header .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
            color: #ffffff !important;
        }


    .new-header .top-navbar {
        max-height: 40px;
        padding: 0px 15px 0 0;
    }

        .new-header .top-navbar .dropdown-toggle::after {
            display: none;
        }

        .new-header .top-navbar .navbar-header {
            min-height: 40px;
            text-align: center;
        }

            .new-header .top-navbar .navbar-header .navbar-brand {
                margin-right: 0px;
                padding-bottom: 0px;
                padding-top: 0px;
            }

                .new-header .top-navbar .navbar-header .navbar-brand .light-logo {
                    display: none;
                }

                .new-header .top-navbar .navbar-header .navbar-brand b {
                    /*line-height: 70px;*/
                    display: inline-block;
                }

        .new-header .top-navbar .navbar-nav > .nav-item > .nav-link {
            padding-left: .75rem;
            padding-right: .75rem;
            font-size: 24px;
        }

        .new-header .top-navbar .navbar-nav > .nav-item.show {
            background: rgba(0, 0, 0, 0.05);
        }

        .new-header .top-navbar .app-search {
            position: relative;
            /*margin-top: 13px;*/
            margin-right: 10px;
            display: inline-block;
            margin-bottom: 0;
        }

            .new-header .top-navbar .app-search input {
                width: 200px;
                font-size: 11px;
                -webkit-transition: 0.5s ease-in;
                -o-transition: 0.5s ease-in;
                transition: 0.5s ease-in;
            }

                .new-header .top-navbar .app-search input:focus {
                    width: 240px;
                }

            .new-header .top-navbar .app-search .srh-btn {
                position: absolute;
                top: 8px;
                cursor: pointer;
                background: #ffffff;
                width: 15px;
                height: 15px;
                right: 10px;
                font-size: 14px;
            }

    .new-header .profile-pic {
        width: 30px;
        border-radius: 100%;
    }

    .new-header .dropdown-menu {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
        border-color: rgba(120, 130, 140, 0.13);
    }

        .new-header .dropdown-menu .dropdown-item {
            padding: 7px 1.5rem;
        }

    .new-header ul.dropdown-user {
        padding: 0px;
        width: 270px;
    }

        .new-header ul.dropdown-user li {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

            .new-header ul.dropdown-user li.divider {
                height: 1px;
                margin: 4px 0;
                overflow: hidden;
                background-color: rgba(120, 130, 140, 0.13);
            }

            .new-header ul.dropdown-user li .dw-user-box {
                padding: 10px 15px;
            }

                .new-header ul.dropdown-user li .dw-user-box .u-img {
                    width: 80px;
                    display: inline-block;
                    vertical-align: top;
                }

                    .new-header ul.dropdown-user li .dw-user-box .u-img img {
                        width: 100%;
                        border-radius: 5px;
                        border: solid 1px #ddd;
                    }

                .new-header ul.dropdown-user li .dw-user-box .u-text {
                    display: inline-block;
                    padding-left: 10px;
                }

                    .new-header ul.dropdown-user li .dw-user-box .u-text h4 {
                        margin: 0px;
                    }

                    .new-header ul.dropdown-user li .dw-user-box .u-text p {
                        margin-bottom: 2px;
                        font-size: 14px;
                    }

                    .new-header ul.dropdown-user li .dw-user-box .u-text .btn {
                        color: #ffffff;
                        padding: 5px 10px;
                        display: inline-block;
                    }

                        .new-header ul.dropdown-user li .dw-user-box .u-text .btn:hover {
                            background: #e6294b;
                        }

            .new-header ul.dropdown-user li a {
                padding: 5px 15px;
                display: block;
                color: #54667a;
            }

                .new-header ul.dropdown-user li a:hover {
                    background: #f2f7f8;
                    color: #009efb;
                    text-decoration: none;
                }


header.new-header ul#left-top-nav-bar li {
    border-right: solid 1px #ffffff6b;
    margin-right: 10px;
}

header.new-header ul#left-top-nav-bar div.user-img {
    width: 30px;
}

    header.new-header ul#left-top-nav-bar div.user-img .profile-status {
        left: 21px;
    }

.quick-access-btn-blue a {
    border-radius: 12px 0px 12px 12px;
    border-color: var(--light-blue);
    border-right: 16px solid var(--light-blue);
    padding: 2px;
    margin: 1px;
    background: var(--Default-White, #FFF);
    color: var(--gray);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-height: 30px;
}

.quick-access-btn-green a {
    border-radius: 12px 0px 12px 12px;
    border-color: var(--green);
    border-right: 16px solid var(--green);
    padding: 2px;
    margin: 1px;
    background: var(--Default-White, #FFF);
    color: var(--gray);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-height: 30px;
}

.quick-access-btn-red a {
    border-radius: 12px 0px 12px 12px;
    border-color: var(--red);
    border-right: 16px solid var(--red);
    padding: 2px;
    margin: 1px;
    background: var(--Default-White, #FFF);
    color: var(--gray);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-height: 30px;
}

.quick-access-btn-blue a:hover {
    color: var(--light-blue);
}

.quick-access-btn-green a:hover {
    color: var(--green);
}

.quick-access-btn-red a:hover {
    color: var(--red);
}

.row-start {
    align-content: flex-start;
}

.weinno-card-blue span {
    color: var(--light-blue);
}

.weinno-card-blue a {
    color: var(--light-blue) !important;
}

.weinno-card-green span {
    color: var(--green);
}

.weinno-card-green a {
    color: var(--green) !important;
}

.weinno-card-red span {
    color: var(--red);
}

.weinno-card-red a {
    color: var(--red) !important;
}

.weinno-card-yellow span {
    color: var(--yellow);
}

.weinno-card-yellow a {
    color: var(--yellow) !important;
}

.weinno-card span {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    min-width: 45px;
}

.weinno-card a {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}

.weinno-card {
    border: 1px solid var(--gray-300);
    min-height: 85px;
}

.weinno-stage {
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: #fff;
}

    .weinno-stage a {
        display: block;
        font-weight: 400;
        font-size: 13px;
        color: gray;
    }

    .weinno-stage .btn {
        min-width: 120px;
        color: #fff;
    }
    .weinno-stage .btn:hover {
       background-color: #fff;
    }


    .weinno-stage .inside-box {
        border-radius: 8px;
        border: 1px solid var(--gray-300);
    }

    .weinno-stage .card-header {
        background: #fff;
        border: 0px;
    }

    .weinno-stage .circ {
        z-index: 3;
        position: absolute;
    }

.weinno-stage-asar a:hover {
    color: var(--asar) !important;
}

.weinno-stage-asar .btn {
    background-color: var(--asar);
}
    .weinno-stage-asar .btn:hover {
        border: 1px solid var(--asar);
    }

.weinno-stage-asar .circ {
    bottom: 0;
    left: 0;
    margin-bottom: 5px;
    margin-left: 5px;
}

.weinno-stage-ejra a:hover {
    color: var(--ejra) !important;
}

.weinno-stage-ejra .btn {
    background-color: var(--ejra);
}
    .weinno-stage-ejra .btn:hover {
        border: 1px solid var(--ejra);
    }

.weinno-stage-ejra .circ {
    bottom: 0;
    margin-bottom: 5px;
}

.weinno-stage-niaz a:hover {
    color: var(--niaz) !important;
}

.weinno-stage-niaz .btn {
    background-color: var(--niaz);
}
.weinno-stage-niaz .btn:hover {
    border: 1px solid var(--niaz);
}

.weinno-stage-niaz .circ {
    left: 0;
    margin-left: 5px;
}

.weinno-stage-barname a:hover {
    color: var(--barname) !important;
}

.weinno-stage-barname .btn {
    background-color: var(--barname);
}
    .weinno-stage-barname .btn:hover {
        border: 1px solid var(--barname);
    }


.weinno-stage-payesh {
    border-bottom: 4px solid var(--payesh);
}

    .weinno-stage-payesh a {
        display: flex;
        justify-content: center;
    }

        .weinno-stage-payesh a:hover {
            color: var(--payesh) !important;
        }

    .weinno-stage-payesh .btn {
        background-color: var(--payesh);
    }
        .weinno-stage-payesh .btn:hover {
            border: 1px solid var(--payesh);
        }

    .weinno-stage-payesh .but {
        justify-content: center;
    }

    .weinno-stage-payesh h5 {
        display: flex;
        justify-content: center;
    }
/* end dashboard style */
.weinno-output-card h5, .weinno-output-card p {
    color: #fff;
    font-weight:600;
}

.weinno-output-card a {
    background: #fff;
    min-width: 200px;
}

.weinno-output-action {
    background: var(--light-blue);
}

    .weinno-output-action a {
        color: var(--light-blue) !important;
    }

        .weinno-output-action a:hover {
            background: var(--light-blue) !important;
            color: #fff !important;
            border: 1px solid #fff;
        }

.weinno-output-report {
    background: var(--weinno);
}

    .weinno-output-report a {
        color: var(--weinno) !important;
    }

        .weinno-output-report a:hover {
            background: var(--weinno) !important;
            color: #fff !important;
            border: 1px solid #fff;
        }

.info-card-blue span {
    color: var(--light-blue);
}

.info-card-blue {
    border: 1px solid var(--light-blue) !important;
}

.info-card-green span {
    color: var(--green);
}

.info-card-green {
    border: 1px solid var(--green) !important;
}

.info-card-red span {
    color: var(--red);
}

.info-card-red {
    border: 1px solid var(--red) !important;
}

.info-card-yellow span {
    color: var(--yellow);
}

.info-card-yellow {
    border: 1px solid var(--yellow) !important;
}

.info-card span {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    min-width: 45px;
}

.info-card-botton {
    min-height: 85px;
}

.weinno-output-card {
    min-height: 85px;
    display: flex;
   
    height: 119px !important;
    border-radius: 12px !important;
}
.weinno-card .progress-bar {
    height:16px;
}
.weinno-card-red .progress-bar {
    width:25%;
    background-color:var(--red);
}
.weinno-card-yellow .progress-bar {
    width: 50%;
    background-color: var(--yellow);
}
.weinno-card-green .progress-bar {
    width: 75%;
    background-color: var(--green);
}
.weinno-card .sub-title{
    color:var(--gray);
    font-size:10px;
}
.info-card .card-body {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.info-card-big {
    display: flex;
  /*  width: 346px !important;*/
    height: 119px !important;
    padding: 42px 73px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.help-text {
    font-size: 12px;
    line-height: 1.8;
}
.color-circle {
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(0,0,0,.3);
    margin-left: 5px;
    transition: all 280ms cubic-bezier(.4, 0, .2, 1);
   
}


.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}
.line-height-20 {
    line-height: 20px;
}


.Alarmbox {
    position: relative;
    border-top: 0;
    margin-bottom: 30px;
    width: 100%;
    background: #fff;
    padding: 0px;
    -webkit-transition: .5s;
    transition: .5s;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
    border-bottom: 1px;
}

.h1, .h2, .h3, .h4, .h5, .h6, body, h1, h2, h3, h4, h5, h6 {
    font-family: Poppins, sans-serif;

    text-shadow: none;
}

.box-header.with-border {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom:10px;
}

.box-header {
    color: #455a64;
    display: block;
    padding: 0.8rem 1.25rem;
    position: relative;
    border-bottom: 1px solid rgba(97, 106, 120, 0.07);
}

    .box-header .box-title, .box-header > .fa, .box-header > .glyphicon, .box-header > .ion {
        display: inline-block;
        margin: 0;
    }

.box-title {
    z-index: auto;
}

.p-0 {
    padding: 0 !important;
}

.box-body > *:last-child {
    margin-bottom: 0;
}

.media-list > .media:not(.media-list-header):not(.media-list-footer),
.media-list .media-list-body > .media {
    margin-bottom: 0;
    border-bottom: 1px;
}

.media-single,
.media-center-v {
    -webkit-box-align: center;
    align-items: center;
    margin:20px;
    border-top: 1px solid #ebebeb;
    padding-top: 5px;
}

.media {
    -webkit-transition: background-color .2s linear;
    transition: background-color .2s linear;
    border-bottom:1px;
}

.media {
    flex-shrink: 0;
    border-bottom: 1px;
}

.media {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px;
}

.text-gray {
    color: black;
}

.font-weight-500 {
    font-weight: 500 !important;
}

.border-primary {
    border-color: #666EE8 !important;
}

.media-body {
    min-width: 0;
    border-bottom: 1px;
}

.media > * {
    margin: 0rem 1rem;
}

.bl-5 {
    border-left: 5px solid #ebebeb !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.media-body {

    border-bottom: 1px;
}

.media-body {
    flex: 1;
    border-bottom: 1px;
}

.text-fade {
    color: rgba(97, 106, 120, 0.7) !important;
    font-size: 12px;
    padding: 12px;
}

.border-primary {
    border-color: #666EE8 !important;
}

.br-5 {
    border-right: 5px solid #ebebeb !important;
}

.badge-break {
    line-height : 15px;
    white-space : pre-wrap;
}

.validextension-select {
    width: 300px; /* عرض مورد نظر برای select */
}

.title-input {
    width: 300px; /* عرض مورد نظر برای input عنوان مستندات */
}

.cardnotice {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #b4a8a8;
    background-clip: border-box;
    border: 0 solid transparent;
    border-radius: 0;
}

.card-notice {
    margin-bottom: 30px;
}

.card-body-notice {
    flex: 1 1 auto;
    padding: 1.57rem;

   
}

.note-has-grid .nav-link {
    padding: .5rem
}

.note-has-grid .single-note-item .card {
    border-radius: 10px
}

.note-has-grid .single-note-item .favourite-note {
    cursor: pointer
}

.note-has-grid .single-note-item .side-stick {
    position: absolute;
    width: 3px;
    height: 35px;
    left: 0;
    background-color: rgba(82, 95, 127, .5)
}

.note-has-grid .single-note-item .category-dropdown.dropdown-toggle:after {
    display: none
}

.note-has-grid .single-note-item .category [class*=category-] {
    height: 15px;
    width: 15px;
    display: none
}

    .note-has-grid .single-note-item .category [class*=category-]::after {
        content: "\f0d7";
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 12px;
        color: #fff;
        position: absolute
    }

.note-has-grid .single-note-item .category .category-business {
    background-color: rgba(44, 208, 126, .5);
    border: 2px solid #2cd07e
}

.note-has-grid .single-note-item .category .category-social {
    background-color: rgba(44, 171, 227, .5);
    border: 2px solid #2cabe3
}

.note-has-grid .single-note-item .category .category-important {
    background-color: rgba(255, 80, 80, .5);
    border: 2px solid #ff5050
}

.note-has-grid .single-note-item.all-category .point {
    color: rgba(82, 95, 127, .5);
   
    
}

.note-has-grid .single-note-item.note-business .point {
    color: rgba(44, 208, 126, .5)
}

.note-has-grid .single-note-item.note-business .side-stick {
    background-color: rgba(44, 208, 126, .5)
}

.note-has-grid .single-note-item.note-business .category .category-business {
    display: inline-block
}

.note-has-grid .single-note-item.note-favourite .favourite-note {
    color: #ffc107
}

.note-has-grid .single-note-item.note-social .point {
    color: rgba(44, 171, 227, .5)
}

.note-has-grid .single-note-item.note-social .side-stick {
    background-color: rgba(44, 171, 227, .5)
}

.note-has-grid .single-note-item.note-social .category .category-social {
    display: inline-block
}

.note-has-grid .single-note-item.note-important .point {
    color: rgba(255, 80, 80, .5)
}

.note-has-grid .single-note-item.note-important .side-stick {
    background-color: rgba(255, 80, 80, .5)
}

.note-has-grid .single-note-item.note-important .category .category-important {
    display: inline-block
}

.note-has-grid .single-note-item.all-category .more-options,
.note-has-grid .single-note-item.all-category.note-favourite .more-options {
    display: block
}

.note-has-grid .single-note-item.all-category.note-business .more-options,
.note-has-grid .single-note-item.all-category.note-favourite.note-business .more-options,
.note-has-grid .single-note-item.all-category.note-favourite.note-important .more-options,
.note-has-grid .single-note-item.all-category.note-favourite.note-social .more-options,
.note-has-grid .single-note-item.all-category.note-important .more-options,
.note-has-grid .single-note-item.all-category.note-social .more-options {
    display: none
}

@media (max-width:767.98px) {
    .note-has-grid .single-note-item {
        max-width: 100%
    }
}

@media (max-width:991.98px) {
    .note-has-grid .single-note-item {
        max-width: 216px
    }
}

.rounded-pill {
    border-radius: 50rem !important;
}
.selected-word {
    background-color: #cce5ff; 
    color: #007bff;
}


.active-notice {
    background-color: #007bff;
    color: white;
}

.container-notice {
    width: 100%;
    /* padding-left: 15px; */
    /* padding-right: 15px; */
    margin-left: auto;
    margin-right: auto;
}


.main-inner-EvaluationAnswer {
    margin-top: 0;
    margin-bottom: 2rem;
    padding: 1.5rem;
}
.d-flex-evaluationanswer {
    display: flex !important;
}

.activity-header-evaluationanswer {
    margin-right: 15px;
    margin-left: 15px;
}

.no-overflow {
    overflow: auto;
}

.qn-question, .qn-answer {
    margin: 0 0 .5em;
    overflow: auto;

}



.qn-legend {
    float: right;
    font-size: inherit;
    width: auto;
}

.qn-content {
    margin-bottom: 10px;
    margin-right: 55px;
}

.qn-info {
    float: right;
    width: auto;
    padding: 7px;
    background: #eee;
    font-weight: bold;
}
.qn-info h2.qn-number {
        margin: 0;
        font-size: 2em;
        line-height: 1.2em;
}

.qn-question {
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: .1em;
    padding-top: .1em;
    background-color: #e4f1fa;
}

.qn-answer input[type="radio"] {
    margin-right: 30px; /* فاصله بین radio button و label */
}

.evaluation-question-text {
    text-align: right;
    font-size: 14px;
}

.qn-question p {
    margin-bottom: .6em;
    margin-top: .5em;
}

.progress-evaluation {
    width: 80%;
    background-color: #e0e0e0;
    border-radius: 10px;
    margin: 20px 0;
    overflow: hidden;

}

.progress-bar-evaluation {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.bg-gradient-bloody {
    background: #f54ea2;
    background: -webkit-linear-gradient( 45deg, #f54ea2, #ff7676) !important;
    background: linear-gradient( 45deg, #f54ea2, #ff7676) !important;
}

.bg-gradient-ohhappiness {
    background: #00b09b;
    background: -webkit-linear-gradient( 45deg, #00b09b, #96c93d) !important;
    background: linear-gradient( 45deg, #00b09b, #96c93d) !important;
}

.bg-gradient-blooker {
    background: #ffdf40;
    background: -webkit-linear-gradient( 45deg, #ffdf40, #ff8359) !important;
    background: linear-gradient( 45deg, #ffdf40, #ff8359) !important;
}

.table-border-dotted 
.table-border-dotted thead tr th
{
    border: dotted 2px #000;
}

.icon-style-questionnaire {
    display: block;
    margin: 0 auto;
    margin-bottom: 15px; 
}

.card-body-questionnaire {
    min-height: 400px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-body-questionnaire {
    text-align: right;
}

.card-body-questionnaire {
    text-align: right; 
}

    .card-body-questionnaire h4 {
        text-align: center; 
    }

    .card-body-questionnaire a {
        text-align: center; 
        display: inline-block; 
        margin-top: 20px; 
    }

    .card-body-questionnaire p,
    .card-body-questionnaire a {
        text-align: right; 
    }
    .card-body-questionnaire a {
        display: inline-flex;
        align-items: center; 
        justify-content: center; 
        text-align: center; 
        width: 100%; 
        margin-top: 20px;
    }

.button-container-comparative {
    text-align: left;
    margin-top: 10px;
}

    .button-container-comparative .btn {
        margin-right: 10px; 
    }

/*evaluation answer form*/
.btn-pagination-ev {
    
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(75, 108, 183, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

    .btn-pagination-ev:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(75, 108, 183, 0.4);
        color: white;
    }

    .btn-pagination-ev:active {
        transform: translateY(0);
    }

.btn-pagination-disabled-ev {
   
    cursor: not-allowed;
    opacity: 0.7;
    transform: none !important;
    box-shadow: none !important;
}

.btn-pagination-ev i {
    transition: transform 0.3s ease;
}

.btn-pagination-ev:not(:disabled):hover i.fa-arrow-right {
    transform: translateX(-3px);
}

.btn-pagination-ev:not(:disabled):hover i.fa-arrow-left {
    transform: translateX(3px);
}

.new-header {
    border: var(--sds-size-stroke-border) solid rgba(0, 0, 0, 0.10);
    background: linear-gradient(90deg, #0178BC 0%, #00B5D6 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

    .new-header .navbar-light .navbar-nav .nav-item > a.nav-link {
        color: rgba(255, 255, 255, 0.8) !important;
    }

        .new-header .navbar-light .navbar-nav .nav-item > a.nav-link:hover, .new-header .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
            color: #ffffff !important;
        }


    .new-header .top-navbar {
        max-height: 40px;
        padding: 0px 15px 0 0;
    }

        .new-header .top-navbar .dropdown-toggle::after {
            display: none;
        }

        .new-header .top-navbar .navbar-header {
            min-height: 40px;
            text-align: center;
        }

            .new-header .top-navbar .navbar-header .navbar-brand {
                margin-right: 0px;
                padding-bottom: 0px;
                padding-top: 0px;
            }

                .new-header .top-navbar .navbar-header .navbar-brand .light-logo {
                    display: none;
                }

                .new-header .top-navbar .navbar-header .navbar-brand b {
                    /*line-height: 70px;*/
                    display: inline-block;
                }

        .new-header .top-navbar .navbar-nav > .nav-item > .nav-link {
            padding-left: .75rem;
            padding-right: .75rem;
            font-size: 24px;
        }

        .new-header .top-navbar .navbar-nav > .nav-item.show {
            background: rgba(0, 0, 0, 0.05);
        }

        .new-header .top-navbar .app-search {
            position: relative;
            /*margin-top: 13px;*/
            margin-right: 10px;
            display: inline-block;
            margin-bottom: 0;
        }
.height-questionnaire {
    min-height: 95%;
}



/*Questionnaire*/

.quote-card {
    background: #fff;
    color: #222222;
    padding: 40px 50px 80px 30px; 
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(34, 34, 34, 0.12);
    position: relative;
    overflow: visible; 
    min-height: 150px;
    border: none;
    border-radius: 8px;
    z-index: 1;
}

.quote-card p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 90%;
    position: relative;
    z-index: 2;
    text-align: right;
}

.quote-card cite {
    font-size: 16px;
    margin-top: 15px;
    display: block;
    font-weight: 200;
    opacity: 0.8;
    text-align: left;
}

.quote-card:before {
    font-family: Georgia, serif;
    content: "“";
    position: absolute;
    top: -10px;
    right: 30px;
    font-size: 20em;
    color: rgba(238, 238, 238, 0.8);
    font-weight: normal;
    z-index: 0;
    line-height: 1;
}

.quote-card:after {
    font-family: Georgia, serif;
    content: "”";
    position: absolute;
    bottom: -55px;  
    left: 20px; 
    font-size: 20em;
    color: rgba(238, 238, 238, 0.8);
    font-weight: normal;
    z-index: 0;
    line-height: 0.3;
}

@media (max-width: 640px) {
    .quote-card {
        padding: 30px 20px 60px 20px;
    }

    .quote-card:before {
        right: 15px;
        font-size: 4em;
    }

    .quote-card:after {
        left: 10px;
        font-size: 25em;
        bottom: -20px; 
    }
}

            .new-header .top-navbar .app-search input {
                width: 200px;
                font-size: 11px;
                -webkit-transition: 0.5s ease-in;
                -o-transition: 0.5s ease-in;
                transition: 0.5s ease-in;
            }

                .new-header .top-navbar .app-search input:focus {
                    width: 240px;
                }

            .new-header .top-navbar .app-search .srh-btn {
                position: absolute;
                top: 8px;
                cursor: pointer;
                background: #ffffff;
                width: 15px;
                height: 15px;
                right: 10px;
                font-size: 14px;
            }

    .new-header .profile-pic {
        width: 30px;
        border-radius: 100%;
    }

    .new-header .dropdown-menu {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
        border-color: rgba(120, 130, 140, 0.13);
    }

        .new-header .dropdown-menu .dropdown-item {
            padding: 7px 1.5rem;
        }

    .new-header ul.dropdown-user {
        padding: 0px;
        width: 270px;
    }

        .new-header ul.dropdown-user li {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }



label.control-label-checkbox {
    display: flex;
    width: auto;
    min-width: 25px;
    justify-content: center;
    align-items: flex-end;
}
.sort-ghost {
    opacity: 0.3;
    transition: all 0.7s ease-out;
}
.sort-item-handle {
    cursor: grab;
    margin-left: 10px;
    color: #888;
}

#AbsenceReport_columns_sort, #AbsenceReport_columns_sort * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
            .new-header ul.dropdown-user li.divider {
                height: 1px;
                margin: 4px 0;
                overflow: hidden;
                background-color: rgba(120, 130, 140, 0.13);
            }

            .new-header ul.dropdown-user li .dw-user-box {
                padding: 10px 15px;
            }

                .new-header ul.dropdown-user li .dw-user-box .u-img {
                    width: 80px;
                    display: inline-block;
                    vertical-align: top;
                }

                    .new-header ul.dropdown-user li .dw-user-box .u-img img {
                        width: 100%;
                        border-radius: 5px;
                        border: solid 1px #ddd;
                    }

                .new-header ul.dropdown-user li .dw-user-box .u-text {
                    display: inline-block;
                    padding-left: 10px;
                }

                    .new-header ul.dropdown-user li .dw-user-box .u-text h4 {
                        margin: 0px;
                    }

                    .new-header ul.dropdown-user li .dw-user-box .u-text p {
                        margin-bottom: 2px;
                        font-size: 14px;
                    }

                    .new-header ul.dropdown-user li .dw-user-box .u-text .btn {
                        color: #ffffff;
                        padding: 5px 10px;
                        display: inline-block;
                    }

                        .new-header ul.dropdown-user li .dw-user-box .u-text .btn:hover {
                            background: #e6294b;
                        }

            .new-header ul.dropdown-user li a {
                padding: 5px 15px;
                display: block;
                color: #54667a;
            }

                .new-header ul.dropdown-user li a:hover {
                    background: #f2f7f8;
                    color: #009efb;
                    text-decoration: none;
                }


header.new-header ul#left-top-nav-bar li {
    border-right: solid 1px #ffffff6b;
    margin-right: 10px;
}

header.new-header ul#left-top-nav-bar div.user-img {
    width: 30px;
}

    header.new-header ul#left-top-nav-bar div.user-img .profile-status {
        left: 21px;
    }

.quick-access-btn-blue a {
    border-radius: 12px 0px 12px 12px;
    border-color: var(--light-blue);
    border-right: 16px solid var(--light-blue);
    padding: 2px;
    margin: 1px;
    background: var(--Default-White, #FFF);
    color: var(--gray);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-height: 30px;
}

.quick-access-btn-green a {
    border-radius: 12px 0px 12px 12px;
    border-color: var(--green);
    border-right: 16px solid var(--green);
    padding: 2px;
    margin: 1px;
    background: var(--Default-White, #FFF);
    color: var(--gray);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-height: 30px;
}

.quick-access-btn-red a {
    border-radius: 12px 0px 12px 12px;
    border-color: var(--red);
    border-right: 16px solid var(--red);
    padding: 2px;
    margin: 1px;
    background: var(--Default-White, #FFF);
    color: var(--gray);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-height: 30px;
}

.quick-access-btn-blue a:hover {
    color: var(--light-blue);
}

.quick-access-btn-green a:hover {
    color: var(--green);
}

.quick-access-btn-red a:hover {
    color: var(--red);
}

.row-start {
    align-content: flex-start;
}

.weinno-card-blue span {
    color: var(--light-blue);
}

.weinno-card-blue a {
    color: var(--light-blue) !important;
}

.weinno-card-green span {
    color: var(--green);
}

.weinno-card-green a {
    color: var(--green) !important;
}

.weinno-card-red span {
    color: var(--red);
}

.weinno-card-red a {
    color: var(--red) !important;
}

.weinno-card-yellow span {
    color: var(--yellow);
}

.weinno-card-yellow a {
    color: var(--yellow) !important;
}

.weinno-card span {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    min-width: 45px;
}

.weinno-card a {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}

.weinno-card {
    border: 1px solid var(--gray-300);
    min-height: 85px;
}

.weinno-stage {
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: #fff;
}

    .weinno-stage a {
        display: block;
        font-weight: 400;
        font-size: 13px;
    }

    .weinno-stage button {
        min-width: 120px;
        color: #fff;
    }

    .weinno-stage .inside-box {
        border-radius: 8px;
        border: 1px solid var(--gray-300);
    }

    .weinno-stage .card-header {
        background: #fff;
        border: 0px;
    }

    .weinno-stage .circ {
        z-index: 3;
        position: absolute;
    }

.weinno-stage-asar a:hover {
    color: var(--asar) !important;
}

.weinno-stage-asar button {
    background-color: var(--asar);
}

.weinno-stage-asar .circ {
    bottom: 0;
    left: 0;
    margin-bottom: 5px;
    margin-left: 5px;
}

.weinno-stage-ejra a:hover {
    color: var(--ejra) !important;
}

.weinno-stage-ejra button {
    background-color: var(--ejra);
}

.weinno-stage-ejra .circ {
    bottom: 0;
    margin-bottom: 5px;
}

.weinno-stage-niaz a:hover {
    color: var(--niaz) !important;
}

.weinno-stage-niaz button {
    background-color: var(--niaz);
}

.weinno-stage-niaz .circ {
    left: 0;
    margin-left: 5px;
}

.weinno-stage-barname a:hover {
    color: var(--barname) !important;
}

.weinno-stage-barname button {
    background-color: var(--barname);
}

.weinno-stage-payesh {
    border-bottom: 4px solid var(--payesh);
}

    .weinno-stage-payesh a {
        display: flex;
        justify-content: center;
    }

        .weinno-stage-payesh a:hover {
            color: var(--payesh) !important;
        }

    .weinno-stage-payesh button {
        background-color: var(--payesh);
    }

    .weinno-stage-payesh .but {
        justify-content: center;
    }

    .weinno-stage-payesh h5 {
        display: flex;
        justify-content: center;
    }
/* end dashboard style */
.weinno-output-card h5, .weinno-output-card p {
    color: #fff;
}

.weinno-output-card a {
    background: #fff;
    min-width: 200px;
}

.weinno-output-action {
    background: var(--light-blue);
}

    .weinno-output-action a {
        color: var(--light-blue) !important;
    }

        .weinno-output-action a:hover {
            background: var(--light-blue) !important;
            color: #fff !important;
            border: 1px solid #fff;
        }

.weinno-output-report {
    background: var(--weinno);
}

    .weinno-output-report a {
        color: var(--weinno) !important;
    }

        .weinno-output-report a:hover {
            background: var(--weinno) !important;
            color: #fff !important;
            border: 1px solid #fff;
        }

.info-card-blue span {
    color: var(--light-blue);
}

.info-card-blue {
    border: 1px solid var(--light-blue) !important;
}

.info-card-green span {
    color: var(--green);
}

.info-card-green {
    border: 1px solid var(--green) !important;
}

.info-card-red span {
    color: var(--red);
}

.info-card-red {
    border: 1px solid var(--red) !important;
}

.info-card-yellow span {
    color: var(--yellow);
}

.info-card-yellow {
    border: 1px solid var(--yellow) !important;
}

.info-card span {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    min-width: 45px;
}

.info-card-botton {
    min-height: 85px;
}
.border-thick {
    border-width: 2px !important;
}


.weinno-output-card {
    min-height: 85px;
    
}
.weinno-card .progress-bar {
    height:16px;
}
.weinno-card-red .progress-bar {
    width:25%;
    background-color:var(--red);
}
.weinno-card-yellow .progress-bar {
    width: 50%;
    background-color: var(--yellow);
}
.weinno-card-green .progress-bar {
    width: 75%;
    background-color: var(--green);
}
.weinno-card .sub-title{
    color:var(--gray);
    font-size:10px;
}
.info-card .card-body {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}




/*noticetraining*/



.noticetrainingboard .card:not([class*=card-outline-]) {
    border: 0;
}

.noticetrainingboard .card {
    height: 100%;
    box-shadow: 0 9px 23px rgba(0, 0, 0, 0.09), 0 5px 5px rgba(0, 0, 0, 0.06) !important;
    -webkit-transition: box-shadow 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    -moz-transition: box-shadow 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    -o-transition: box-shadow 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transition: box-shadow 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    -webkit-border-radius: 0.4167rem;
    -moz-border-radius: 0.4167rem;
    -ms-border-radius: 0.4167rem;
    -o-border-radius: 0.4167rem;
    border-radius: 0.4167rem;
}

.noticetrainingboard .blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.noticetrainingboard blockquote {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-left: .25rem solid #eceeef;
    border-right: none;
    height:150px;
}

.noticetrainingboard blockquote {
    margin: 0 0 1rem;
}

.noticetrainingboard .blockquote p {
    font-size: 1.1rem;
}

.noticetrainingboard .card .card-body p {
    margin-bottom: 1rem;
}

.noticetrainingboard .card:not([class*=card-outline-]) {
    border-left: 1px solid white;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.noticetrainingboard blockquote {
    border-left: .25rem solid white;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

/*invitationcooperation*/


.p-xl-inco {
    padding: 40px;
}

.lazur-bg-inco {
    background-color: #23c6c8;
    color: #ffffff;
}



.navy-bg {
    background-color: #1ab394;
    color: #ffffff;
}

.yellow-bg-inco {
    background-color: #f8ac59;
    color: #ffffff;
}

.widget-inco {
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
}

    .widget-inco h2, .widget-inco h3 {
        margin-top: 5px;
        margin-bottom: 0;
        border-bottom: 1px dotted white;
    }

.m-t-md-inco {
    margin-top: 20px;
}

/*invitationcooperationdocument*/
.invitation-upload-box {
    border: 2px dashed #4a6fdc;
    border-radius: 10px;
    padding: 20px 15px;
    max-width: 400px;
    padding-right: 30px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    background-color: #f8faff;
}

    .invitation-upload-box:hover {
        border-color: #2e54b8;
        background-color: #f0f4ff;
        box-shadow: 0 4px 12px rgba(74, 111, 220, 0.1);
    }

    .invitation-upload-box input[type="file"] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        top: 0;
        left: 0;
        cursor: pointer;
    }

    .invitation-upload-box img {
        max-width: 100%;
        max-height: 220px;
        object-fit: contain;
        border-radius: 8px;
        margin-bottom: 15px;
        border: 1px solid #e0e6ff;
    }

    .invitation-upload-box .text {
        color: #3a4e8a;
        font-weight: 600;
        font-size: 1rem; 
        margin-bottom: 10px;
    }

    .invitation-upload-box .hint {
        color: #7a8bb8;
        font-size: 0.9rem;
        margin-top: 8px;
    }
.invitation-color {
    background-color: #9AA6B2;
}



.custom-close-button {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #999;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
}

    .custom-close-button:hover {
        color: #666;
    }

.confirmed-row {
    background-color: #d4edda; 
}

.pageOfMergeClassroomAndTrainingCalendarProgram tr.align-middle td {
    vertical-align: middle !important
}

/*////////////////////*/
.pageOfMergeClassroomAndTrainingCalendarProgram .alert-icon {
    font-size: 13px;
    color: white; /* رنگ  داخل مثلث */
    text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red; /* دور  قرمز */
}
.pageOfMergeClassroomAndTrainingCalendarProgram .info-icon {
    font-size: 13px;
    color: white; /* رنگ  داخل  */
    text-shadow: -1px -1px 0 #009efb, 1px -1px 0 #009efb, -1px 1px 0 #009efb, 1px 1px 0 #009efb; /* دور آبی */
}
.pageOfMergeClassroomAndTrainingCalendarProgram .purple-icon {
    font-size: 13px;
    color: white; /* رنگ  داخل  */
    text-shadow: -1px -1px 0 #7460ee, 1px -1px 0 #7460ee, -1px 1px 0 #7460ee, 1px 1px 0 #7460ee; /* دور بنفش */
}
.pageOfMergeClassroomAndTrainingCalendarProgram .dark-icon {
    font-size: 13px;
    color: white; /* رنگ  داخل  */
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; /* دور مشکی */
}
.pageOfMergeClassroomAndTrainingCalendarProgram .success-icon {
    font-size: 13px;
    color: white; /* رنگ  داخل  */
    text-shadow: -1px -1px 0 green, 1px -1px 0 green, -1px 1px 0 green, 1px 1px 0 green; /* دور سبز */
}
.pageOfMergeClassroomAndTrainingCalendarProgram .orange-icon {
    font-size: 13px;
    color: white; /* رنگ  داخل  */
    text-shadow: -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange, 1px 1px 0 orange; /* دور زرد */
}
.pageOfMergeClassroomAndTrainingCalendarProgram .warning-icon {
    font-size: 13px;
    color: white; /* رنگ  داخل  */
    text-shadow: -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange, 1px 1px 0 orange; /* دور زرد */
}


.infoinvi-card {
   
    margin: 40px auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: #fff;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    .infoinvi-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-bottom: 1px solid #ddd;
    }

.infoinvi-card-body {
    padding: 20px;
}

    .infoinvi-card-body h4 {
        font-weight: 600;
        margin-bottom: 8px;
        color: #343a40;
    }

    .infoinvi-card-body h6 {
        color: #6c757d;
        margin-bottom: 15px;
        font-weight: 400;
    }

    .infoinvi-card-body p {
        color: #495057;
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .infoinvi-card-body a {
        color: #007bff;
        margin: 0 10px;
        font-size: 1.2rem;
        transition: color 0.3s ease;
    }

        .infoinvi-card-body a:hover {
            color: #0056b3;
            text-decoration: none;
        }


icon-style-invitation{
    color:cornflowerblue;
}


/*file upload invitationcooperation*/


.invitation-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(139, 95, 191, 0.1);
}

.invitation-header {
    text-align: center;
    margin-bottom: 25px;
}

.invitation-main-icon {
    color: #8B5FBF;
    font-size: 3rem;
    margin-bottom: 15px;
}

.invitation-dropzone {
    border: 2px dashed #8B5FBF;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 20px;
    background: #F9F5FF;
    transition: all 0.3s;
}

    .invitation-dropzone:hover {
        background: #F0E6FF;
    }

.invitation-upload-btn {
    background: #8B5FBF;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    transition: all 0.3s;
}

    .invitation-upload-btn:hover {
        background: #7A4FAA;
        transform: translateY(-2px);
    }

.invitation-file-list {
    margin-top: 30px;
}

.invitation-file-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.invitation-file-icon {
    color: #8B5FBF;
    margin-right: 15px;
    font-size: 1.5rem;
}

.invitation-remove-btn {
    color: #ff6b6b;
    background: none;
    border: none;
    margin-left: auto;
    cursor: pointer;
}

.invitation-file-input {
    display: none;
}

.bg-light-danger-invitation {
    background-color: #f8d7da; 
  
}
.image-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.image-preview {
    max-width: 150px;
    max-height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
}

.image-name {
    word-break: break-all;
    text-align: center;
    max-width: 150px;
}

.invitation-remove-btn {
    background: none;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    margin-left: auto;
}

.description-tooltip {
    position: absolute;
    top: 20px;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    width: 100%;
    z-index: 100;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    direction: rtl;
}

.descriptions-tooltip-cooperation {
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);

    bottom: 0;width: 100%;
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    top: 20px;
    right: 0;
}

.image-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: zoom-out;
}

.modal-image {
    max-width: 90%;
    max-height: 90%;
    border: 2px solid white;
    border-radius: 8px;
}

.invitation-card-container {
    display: inline-block;
    margin: 10px;
}

.invitation-card {
    width: 400px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}



.invitation-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

.invitation-card-body {
    padding: 10px;
    flex-grow: 1;
}

.invitation-card-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.invitation-card-text {
    font-size: 14px;
    color: #555;
}

.invitation-card-footer {
    padding: 8px 10px;
    text-align: right;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
}

.invitation-download-btn {
    font-size: 13px;
    padding: 4px 8px;
    color: #007bff;
    border: 1px solid #007bff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

    .invitation-download-btn:hover {
        background-color: #007bff;
        color: white;
    }
.bottom-0 {
    bottom : 0;
}
div.toast div.toast-message {
    white-space: pre-line;
}
#toast-container.toast-bottom-center > div, #toast-container.toast-top-center > div {
    width : 400px !important;
}
.training-filled-checkbox {
    width: 15px;
    height: 15px;
    cursor: pointer;
    appearance: none;
    border: 2px solid #ccc;
    border-radius: 3px;
}

.training-filled-checkbox:checked {
    background-color: #007bff;
    border-color: #3c393e;
}


/* ---------- ChatBox ---------- */

.chat-box {
  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
}

.chat-box .border-bottom-0-5 {
    border-radius: 0 0 0.5rem 0.5rem;
}

.chat-box .pointer {
  cursor: pointer;
}

.chat-box .chat-box-header {
  border-radius: 0.5rem 0.5rem 0 0;
  background: linear-gradient(310deg, #0c8985 0%, #2ca9a5 100%);
  color: white;
  padding: 0 0.3rem;
}

.chat-box .chat-list {
  background: #fff;
  max-height: 75vh;
  min-height: 50vh;
  overflow-y: scroll;
}

.chat-box .chat {
  border-radius: 0.5rem;
  padding-right: 0.25rem;
  min-width: 12rem;
  max-width: 75%;
  color: #222;
}

@media (min-width: 768px) {
  .chat-box .chat {
    min-width: 15rem !important;
  }
}

@media (min-width: 992px) {
  .chat-box .chat {
    min-width: 20rem !important;
    max-width: 35rem !important;
  }
}

.chat-box .pre-line {
  white-space: pre-line;
}

.chat-box .chat-attachment {
  border-radius: 0.5rem;
  background-color: #0db5d352;
  border: 1px solid #2c96a9;
  color: #2c566e;
  width: 7rem;
  @media (min-width: 768px) {
    width: 12rem !important;
  }
}


.chat-box .bg-chat-1 {
  background: #eeeeee;
}

.chat-box .bg-chat-2 {
  background: #e2f6ff;
}

.chat-box .bg-chat-3 {
  background: #f5f5cd;
}

.chat-box .fs-85 {
  font-size: 0.85rem;
}

.chat-box .fs-75 {
  font-size: 0.75rem;
}

.chat-box .chat-list::-webkit-scrollbar {
  width: 4px;
}

.chat-box .chat-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-box .chat-list::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background: #b0b0b0;
}

.chat-box .fs-7 {
  font-size: smaller;
}

.chat-box .chat-date {
  color: #000000;
  background: #ffffff;
  padding: 0.2rem 2rem 0 2rem;
  box-shadow: 0 0 0 0 #fff !important;
  border: 1px dashed #aaa;
  border-radius: 1rem;
}

.chat-box .chat-box-footer {
  background: #eee;
}

.chat-box .chat-box-footer-empty {
  padding: 1.3rem;
}

.chat-box .time-info {
  color: #4285f4;
  border: 1px dotted #4285f4;
  border-radius: 0.4rem;
  background-color: #d9e7fd;
}

.chat-box .table-importance {
  display: inline-block;
  vertical-align: middle;
  border-radius: 2rem;
}

.chat-box .text-hover-success:hover {
  color: #2dce89;
}

.chat-box .text-hover-info:hover {
  color: #4285f4;
}

.chat-box [contenteditable]:empty::before {
  content: attr(placeholder);
  color: #aaa;
  pointer-events: none;
}

.chat-box .overflow-hidden {
  overflow: hidden;
}

.chat-box .replied-chat-height {
  height: 2.25rem;
}

.chat-box .inner-chat-selected {
  background-color: #f9f9f9;
}

.chat-box .replied-chat {
  background-color: #98b3af30;
}

.chat-box .chat-file-selector-icon {
  margin: 0.25rem 0.4rem !important;
}

.chat-box .chat-file-selector-file {
  margin-top: 0.08rem !important;
}

.chat-box .mt-0-1 {
  margin-top: 0.2rem !important;
}

.chat-box .awe-time-box {
  min-height: 28px !important;
  max-width: 150px;
}

.chat-box .outline-none {
  outline: none !important;
}

.chat-box .border-none {
  border: none !important;
}

/* --- Bootstrap 5 → 4 Class Equivalents --- */

/* Font Sizes */
.chat-box .fs-4 { font-size: 1.5rem !important; }
/* .chat-box .fs-6 { font-size: 0.85rem !important; } */

/* Font Weights */
.chat-box .fw-bold { font-weight: 600 !important; }

/* Margin and Padding (Start/End instead of Left/Right) */
.chat-box .ms-0 { margin-left: 0 !important; }
.chat-box .ms-1 { margin-left: 0.25rem !important; }
.chat-box .ms-2 { margin-left: 0.5rem !important; }
.chat-box .ms-3 { margin-left: 1rem !important; }

.chat-box .me-0 { margin-right: 0 !important; }
.chat-box .me-1 { margin-right: 0.25rem !important; }
.chat-box .me-2 { margin-right: 0.5rem !important; }
.chat-box .me-3 { margin-right: 1rem !important; }

.chat-box .ps-0 { padding-left: 0 !important; }
.chat-box .ps-1 { padding-left: 0.25rem !important; }
.chat-box .ps-2 { padding-left: 0.5rem !important; }
.chat-box .ps-3 { padding-left: 1rem !important; }

.chat-box .pe-0 { padding-right: 0 !important; }
.chat-box .pe-1 { padding-right: 0.25rem !important; }
.chat-box .pe-2 { padding-right: 0.5rem !important; }
.chat-box .pe-3 { padding-right: 1rem !important; }

/* Flex utilities */
.chat-box .flex-fill { flex: 1 1 auto !important; }
.chat-box .flex-grow-1 { flex-grow: 1 !important; }

/* Line Height */
.chat-box .lh-sm { line-height: 1.25 !important; }

/* Text */
.chat-box .text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* Border (logical direction support) */
.chat-box .border-end {
  border-right: 1px solid #dee2e6 !important;
  border-left: 0 !important;
}
.chat-box .border-3 { border-width: 3px !important; }
.chat-box .border-secondary { border-color: #6c757d !important; }

/* Close button (BS5) */
.chat-box .btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3e%3cpath d='M2.5 2.5l11 11M13.5 2.5l-11 11' stroke='%23000' stroke-linecap='round'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  appearance: none;
}
.chat-box .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.chat-box .btn-close:hover {
  opacity: 0.75;
}

/* Background gradients (custom fallback for bg-gradient-*) */
.chat-box .bg-gradient-danger {
  background: linear-gradient(180deg, #dc3545, #c82333) !important;
  color: #fff !important;
}
.chat-box .bg-gradient-success {
  background: linear-gradient(180deg, #28a745, #218838) !important;
  color: #fff !important;
}

/* Patch .row to simulate Bootstrap 5 gutter behavior in BS4 */
.chat-box .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.chat-box .row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}



/* ---------- chatBox end ----------- */

.dropdown-menu-custom {
    width: 700px; 
    max-height: 250px; 
    overflow-y: auto; 
    padding: 10px;
}

.dropdown-menu-custom {
    width: 700px;
    max-height: 250px;
    overflow-y: auto;
    padding: 10px;
}

/*score dashboard*/


.management-btn {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;

}
.weinno-recieve-btn {
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    background: #007BFF;
    border-radius: 8px !important;
}
.weinno-table-header {
    align-self: stretch;
}
.tabel-header{
    background-color: var(--gray-700);
}
.pychart {
    width: 212px;
    height: 254px;
    padding: 14px 8px;
    background: #fff;
}
.custom-flex {
    width: 280px;
    gap: 6px;
}
.h-119 {
    height: 119px;
    align-self: stretch;
}

.btn-group.custom-radius > .btn:last-child:not(:first-child),
.btn-group.custom-radius > .dropdown-toggle:not(:first-child),
.pagination-lg.custom-radius .page-item:last-child .page-link,
.page-item:last-child .page-link {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.btn-group.custom-radius > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.pagination-lg.custom-radius .page-item:first-child .page-link,
.page-item:first-child .page-link {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.custom-radius-btn{
    border-radius:12px !important;
}
.h-34{
    height:34px;
}