/* Minification failed. Returning unminified contents.
(260,29): run-time error CSS1038: Expected hex color, found '#fff3'
(270,38): run-time error CSS1038: Expected hex color, found '#fff3'
(275,37): run-time error CSS1038: Expected hex color, found '#fff3'
(690,37): run-time error CSS1046: Expect comma, found '86'
(690,44): run-time error CSS1046: Expect comma, found '/'
(1421,23): run-time error CSS1046: Expect comma, found '0'
(1421,27): run-time error CSS1046: Expect comma, found '/'
(1475,19): run-time error CSS1046: Expect comma, found '63'
(1475,24): run-time error CSS1046: Expect comma, found ')'
(3908,23): run-time error CSS1038: Expected hex color, found '#ffff'
(5601,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '85px'
(5622,24): run-time error CSS1046: Expect comma, found '63'
(5622,30): run-time error CSS1046: Expect comma, found '/'
(6025,24): run-time error CSS1046: Expect comma, found '192'
(6025,32): run-time error CSS1046: Expect comma, found '/'
(7316,24): run-time error CSS1046: Expect comma, found '63'
(7316,30): run-time error CSS1046: Expect comma, found '/'
(8462,34): run-time error CSS1046: Expect comma, found '0'
(8462,38): run-time error CSS1046: Expect comma, found '/'
(8478,34): run-time error CSS1046: Expect comma, found '0'
(8478,38): run-time error CSS1046: Expect comma, found '/'
(8497,37): run-time error CSS1046: Expect comma, found '181'
(8497,44): run-time error CSS1046: Expect comma, found ')'
(8500,31): run-time error CSS1046: Expect comma, found '255'
(8500,38): run-time error CSS1046: Expect comma, found ')'
(8704,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '='
(8762,35): run-time error CSS1039: Token not allowed after unary operator: '-neutral-light'
(8902,37): run-time error CSS1046: Expect comma, found '255'
(8902,45): run-time error CSS1046: Expect comma, found '/'
(9257,29): run-time error CSS1038: Expected hex color, found '#fff0'
(9370,22): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(9545,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9651,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(9821,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10041,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10043,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10044,33): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10053,37): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10054,38): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10055,36): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10060,37): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10061,38): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10238,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10255,29): run-time error CSS1039: Token not allowed after unary operator: '-shades-spanish-gray'
(10256,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10263,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(10371,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10492,28): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10493,22): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(10536,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10546,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(10996,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11002,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11009,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11015,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11021,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11027,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11034,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11040,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11046,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11052,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11058,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11064,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11070,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11076,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11082,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11088,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11095,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11101,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11109,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11115,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11121,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11127,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11134,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11140,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11148,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11154,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11160,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11215,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11236,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11245,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11321,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11338,28): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11339,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11370,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11379,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11389,28): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11390,22): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11418,28): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11445,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11446,26): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11467,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11468,26): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11492,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11503,23): run-time error CSS1046: Expect comma, found '0'
(11503,27): run-time error CSS1046: Expect comma, found '/'
(11503,57): run-time error CSS1039: Token not allowed after unary operator: '-explore-nav_box-shadow-spread'
(11552,39): run-time error CSS1039: Token not allowed after unary operator: '-shades-light-grey'
(11624,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11634,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11644,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11654,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11676,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11694,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11732,24): run-time error CSS1038: Expected hex color, found '#cccc'
(11793,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-100'
(11803,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-100'
(11852,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11859,36): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11860,30): run-time error CSS1039: Token not allowed after unary operator: '-shades-light-grey'
(12028,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-spanish-gray'
(12029,26): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(12030,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(12226,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12274,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(12282,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12300,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12312,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12316,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(12336,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(12511,23): run-time error CSS1046: Expect comma, found '0'
(12511,27): run-time error CSS1046: Expect comma, found '/'
(12511,57): run-time error CSS1039: Token not allowed after unary operator: '-explore-nav_box-shadow-spread'
(12669,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-quaternary'
(12670,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-white'
(12684,21): run-time error CSS1039: Token not allowed after unary operator: '-neutral-dark'
(12913,22): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(12924,26): run-time error CSS1039: Token not allowed after unary operator: '-shades-light-grey'
(12931,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-light-grey'
(12976,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12993,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(13116,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(13137,26): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(13597,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(14707,25): run-time error CSS1046: Expect comma, found '216'
(14707,32): run-time error CSS1046: Expect comma, found '/'
(14719,23): run-time error CSS1046: Expect comma, found '94'
(14719,30): run-time error CSS1046: Expect comma, found '/'
(14733,25): run-time error CSS1046: Expect comma, found '155'
(14733,32): run-time error CSS1046: Expect comma, found '/'
(14746,25): run-time error CSS1046: Expect comma, found '62'
(14746,32): run-time error CSS1046: Expect comma, found '/'
(14759,25): run-time error CSS1046: Expect comma, found '183'
(14759,33): run-time error CSS1046: Expect comma, found '/'
(14773,24): run-time error CSS1046: Expect comma, found '216'
(14773,31): run-time error CSS1046: Expect comma, found '/'
(14787,25): run-time error CSS1046: Expect comma, found '113'
(14787,33): run-time error CSS1046: Expect comma, found '/'
(14800,25): run-time error CSS1046: Expect comma, found '103'
(14800,33): run-time error CSS1046: Expect comma, found '/'
(14813,25): run-time error CSS1046: Expect comma, found '87'
(14813,30): run-time error CSS1046: Expect comma, found '/'
(14825,25): run-time error CSS1046: Expect comma, found '190'
(14825,33): run-time error CSS1046: Expect comma, found '/'
(14837,23): run-time error CSS1046: Expect comma, found '128'
(14837,30): run-time error CSS1046: Expect comma, found '/'
(15280,12): run-time error CSS1038: Expected hex color, found '#ffff'
 */
@import url('../fonts/open_sans/open-sans.css');
@import url('../fonts/almarai/style.css');

.blue {
    color: #3498db;
}

.purple {
    color: #9b59b6;
}

.green {
    color: #1abb9c;
}

.aero {
    color: #9cc2cb;
}

.red {
    color: #e74c3c;
}

.dark {
    color: #2a3f54;
}

.border-blue {
    border-color: #3498db !important;
}

.border-purple {
    border-color: #9b59b6 !important;
}

.border-green {
    border-color: #1abb9c !important;
}

.border-aero {
    border-color: #9cc2cb !important;
}

.border-red {
    border-color: #e74c3c !important;
}

.border-dark {
    border-color: #2a3f54 !important;
}

.bg-white {
    background: #fff !important;
    border: 1px solid #fff !important;
    color: #73879c;
}

.bg-green {
    background: #1abb9c !important;
    border: 1px solid #1abb9c !important;
    color: #fff;
}

.bg-red {
    background: #e74c3c !important;
    border: 1px solid #e74c3c !important;
    color: #fff;
}

.bg-blue {
    background: #3498db !important;
    border: 1px solid #3498db !important;
    color: #fff;
}

.bg-orange {
    background: #f39c12 !important;
    border: 1px solid #f39c12 !important;
    color: #fff;
}

.bg-purple {
    background: #9b59b6 !important;
    border: 1px solid #9b59b6 !important;
    color: #fff;
}

.bg-blue-sky {
    background: #50c1cf !important;
    border: 1px solid #50c1cf !important;
    color: #fff;
}

/* change color required span in labels */
.control-label .required,
label .required {
    color: red;
}

.nav-sm .nav.side-menu li.active-sm ul ul,
.nav-sm ul.nav.child_menu ul {
    position: static;
    width: auto;
    background: none;
}

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

.fixed_height_320 {
    height: 320px;
}

.fixed_height_390 {
    height: 390px;
}

.fixed_height_200 {
    height: 200px;
}

.overflow_hidden {
    overflow: hidden;
}

.progress-bar-dark {
    background-color: #2a3f54 !important;
}

.progress-bar-gray {
    background-color: #bdc3c7 !important;
}

.center-margin {
    margin: 0 auto;
    float: none !important;
}

.left {
    float: left;
}

.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.CountDashboardMargin {
    padding-right: 50px !important;
}

pre,
code {
    direction: ltr !important;
}

.nowrap {
    white-space: nowrap;
}

[dir="rtl"] .fa-ul {
    margin-left: inherit;
    padding-left: inherit;
    margin-right: 2.14286em;
    padding-right: 0;
}

[dir="ltr"] .fa-ul {
    margin-left: 2.14286em;
    padding-left: 0;
    margin-right: inherit;
    padding-right: inherit;
}

[dir="rtl"] .fa-li {
    left: inherit;
    right: -2.14286em;
}

[dir="ltr"] .fa-li {
    left: -2.14286em;
    right: inherit;
}

.daterangepicker.dropdown-menu {
    border: 0;
}

.daterangepicker .ranges li {
    color: #73879c;
}

    .daterangepicker .ranges li.active,
    .daterangepicker .ranges li:hover {
        background: #536a7f;
        border: 1px solid #536a7f;
        color: #fff;
    }

.daterangepicker .input-mini {
    background-color: #eee;
    border: 1px solid #ccc;
    box-shadow: none !important;
}

    .daterangepicker .input-mini.active {
        border: 1px solid #ccc;
    }

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default;
    height: 30px;
    border: 1px solid #adb2b5;
    line-height: 30px;
    border-radius: 0px !important;
}

.daterangepicker select.monthselect {
    margin-right: 2%;
}

.daterangepicker td.in-range {
    background: #e4e7ea;
    color: #73879c;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #536a7f;
    color: #fff;
}

.daterangepicker th.available:hover {
    background: #eee;
    color: #34495e;
}

.daterangepicker:before,
.daterangepicker:after {
    content: none;
}

.daterangepicker .calendar.single {
    margin: 0 0 4px 0;
    border-right: 1px solid #fff3 !important;
}

    .daterangepicker .calendar.single .calendar-table {
        width: 224px;
        padding: 0 0 4px 0 !important;
    }

        .daterangepicker .calendar.single .calendar-table thead tr:first-child th {
            padding: 8px 5px;
            border-bottom: 1px solid #fff3 !important;
        }

        .daterangepicker .calendar.single .calendar-table thead th {
            border-radius: 0;
            border-right: 1px solid #fff3 !important;
        }

            .daterangepicker .calendar.single .calendar-table thead th:last-child {
                border-radius: 0;
                border-right: 1px solid #ccc !important;
            }

.daterangepicker.picker_1 {
    color: #fff;
    background: #34495e;
}

    .daterangepicker.picker_1 .calendar-table {
        background: #34495e;
    }

        .daterangepicker.picker_1 .calendar-table thead tr {
            background: #213345;
        }

            .daterangepicker.picker_1 .calendar-table thead tr:first-child {
                background: #1abb9c;
            }

        .daterangepicker.picker_1 .calendar-table td.off {
            background: #34495e;
            color: #999;
        }

        .daterangepicker.picker_1 .calendar-table td.available:hover {
            color: #34495e;
        }

.daterangepicker.picker_2 .calendar-table thead tr {
    color: #1abb9c;
}

    .daterangepicker.picker_2 .calendar-table thead tr:first-child {
        color: #73879c;
    }

.daterangepicker.picker_3 .calendar-table thead tr:first-child {
    color: #fff;
    background: #1abb9c;
}

.daterangepicker.picker_4 .calendar-table thead tr:first-child {
    color: #fff;
    background: #34495e;
}

.daterangepicker.picker_4 .calendar-table td,
.daterangepicker.picker_4 .calendar-table td.off {
    background: #ecf0f1;
    border: 1px solid #fff;
    border-radius: 0;
}

    .daterangepicker.picker_4 .calendar-table td.active {
        background: #34495e;
    }

.calendar-exibit .show-calendar {
    float: none;
    display: inline-block;
    position: relative;
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

    .calendar-exibit .show-calendar .calendar {
        margin: 0 0 4px 0;
    }

    .calendar-exibit .show-calendar.picker_1 {
        background: #34495e;
    }

.calendar-exibit .calendar-table {
    padding: 0 0 4px 0;
}

/*@font-face {
    font-family: "Droid Sans";
    src: url("../fonts/Yekan-modified.woff?1530327457") format("woff"), url("../fonts/Yekan-modified.ttf?1530327457") format("truetype"), url("../fonts/Yekan-modified.eot?1530327457") format("embedded-opentype");
}*/

.left_col {
    background: #ceb578;
    width: 100%;
}

    .left_col .mCSB_scrollTools {
        width: 6px;
    }

    .left_col .mCSB_dragger {
        max-height: 400px !important;
    }

.nav-sm .hidden-small {
    visibility: hidden;
}

.nav-sm .nav.side-menu li a {
    text-align: center !important;
    font-weight: 400;
    font-size: 10px;
    padding: 0px;
    margin: 0;
    border-left: 1px solid rgba(255,255,255,0.2);
}

    .nav-sm .nav.side-menu li a i {
        font-size: 20px !important;
        text-align: center;
        width: 100% !important;
        margin-bottom: 5px;
    }

        .nav-sm .nav.side-menu li a i.toggle-up {
            display: none !important;
        }

.nav-sm .nav.side-menu li.active-sm {
    /* border-left: 5px solid #1abb9c; */
}

.nav-sm .nav.side-menu li .label.label-success {
    width: 100%;
}

.nav-sm .nav.child_menu li.active {
    /*  border-left: 5px solid #1abb9c;*/
}

.nav-sm .profile {
    display: none;
}

.menu_section {
    margin-bottom: 0px;
    height: 100%;
}

    .menu_section h3 {
        padding-right: 15px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: bold;
        font-size: 11px;
        margin-bottom: 0;
        margin-top: 0;
        text-shadow: 1px 1px #000;
    }

    .menu_section > ul {
        padding-top: 0px;
        height: 100%;
    }

.nav-sm .menu_section {
    margin: 0;
    /*background: #ceb578;*/
}

    .nav-sm .menu_section h3 {
        display: none;
    }

.nav-sm footer {
    margin-right: 70px;
}

.nav-sm .container.body .right_col {
    padding: 80px 20px 0;
    margin-right: 70px;
    z-index: 2;
}

.nav-sm .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 72px;
    padding: 0;
    z-index: 999;
    position: fixed;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    top: 65px;
}

    .nav-sm .container.body .col-md-3.left_col.menu_fixed {
        position: fixed;
        height: 100%;
    }

    .nav-sm .container.body .col-md-3.left_col .mCSB_container {
        overflow: visible;
    }

    .nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
        overflow: visible;
    }

.nav-sm .navbar.nav_title {
    width: 70px;
}

    .nav-sm .navbar.nav_title a span {
        display: none;
    }

    .nav-sm .navbar.nav_title a i {
        font-size: 27px;
        margin: 13px 3px 0 0;
    }

/*.nav-sm .main_container .top_nav {
    display: block;
    margin-right: 70px;
    z-index: 2;
    position: absolute;
    width: calc(100vw - 80px);
}
*/
.nav-sm ul.nav.child_menu {
    right: 100%;
    position: absolute;
    top: 0;
    width: 210px;
    z-index: 4000;
    background: #3e5367;
    /* display: none;*/
}

.nav-sm .nav.side-menu > li:last-child ul.nav.child_menu {
    top: auto;
    bottom: 0;
}

.nav-sm .nav.side-menu > li:nth-last-child(2) ul.nav.child_menu {
    top: auto;
    bottom: 0;
}
/*
.nav-sm ul.nav.child_menu li {
    padding: 0 10px;
}
*/
.nav-sm ul.nav.child_menu li a {
    text-align: right !important;
}

.nav-sm > .nav.side-menu > li.active-sm > a {
    color: #1abb9c !important;
}

.nav-sm span.fa {
    display: none;
}

.nav-sm li li span.fa {
    display: inline-block;
}

.site_title {
    width: 100%;
    color: #fff !important;
    display: block;
}

    .site_title img {
        height: 65px;
    }

.nav-sm .site_title img {
    height: auto;
    width: 90%;
}

.site_title i {
    border: 1px solid #eaeaea;
    padding: 5px 6px;
    border-radius: 50%;
}

.site_title:hover {
    text-decoration: none;
}

.site_title:focus {
    text-decoration: none;
}

/* .menu_section {
  margin-bottom: 35px;
} */
.menu_section h3 {
    padding-right: 23px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 0;
    margin-top: 0;
    text-shadow: 1px 1px #000;
}

.menu_section > ul {
    padding-top: 0px;
}

.profile_pic {
    width: 35%;
    float: right;
}

.profile_info {
    padding: 25px 10px 10px;
    width: 65%;
    float: right;
}

    .profile_info span {
        font-size: 13px;
        line-height: 30px;
        color: #bab8b8;
    }

    .profile_info h2 {
        font-size: 14px;
        color: #ecf0f1;
        margin: 0;
        font-weight: 300;
    }

.main_menu .fa {
    width: 26px;
    opacity: 0.99;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
}

.main_menu span.fa {
    float: left;
    text-align: center;
    margin-top: 5px;
    font-size: 10px;
    min-width: inherit;
    color: #c4cfda;
}

.nav_menu {
    float: right;
    background: #fff;
    width: 100%;
    position: relative;
}

@media (min-width: 480px) {
    .nav_menu {
        position: static;
    }

    .top_nav .navbar-right li {
        position: relative;
    }
}

.nav-md .container.body .right_col {
    padding: 80px 20px 0;
    margin-right: 300px;
}

.nav-md .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 300px;
    padding: 0;
    position: fixed;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    transition: 0.3s;
    top: 65px;
}

    .nav-md .container.body .col-md-3.left_col.menu_fixed {
        height: 100%;
        position: fixed;
    }

.nav-md ul.nav.child_menu li:before {
    background: #3e5367;
    bottom: auto;
    content: "";
    height: 8px;
    right: 40px;
    margin-top: 15px;
    position: absolute;
    left: auto;
    width: 8px;
    z-index: 1;
    border-radius: 50%;
}

.nav-md ul.nav.child_menu li:after {
    border-right: 1px dashed rgb(66 86 104 / 50%);
    bottom: 0;
    content: "";
    right: 44px;
    position: absolute;
    top: 0px;
}

.nav-md ul.nav.child_menu li:last-child::after {
    bottom: 50%;
}

body {
    color: #121212;
    background: #fff;
    /*font-family: "Droid Arabic Kufi", sans-serif;*/
    font-family: Open Sans, Almarai, sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.471;
    padding: 0;
}

    body .container.body .right_col {
        background: #f7f7f7;
    }

.tooltip {
    font-family: Open Sans, Almarai, sans-serif !important;
}

.nav_title {
    width: 100%;
    float: left;
    background: #fff;
    border-radius: 0;
    text-align: center;
    box-shadow: #ccc 3px 2px 6px -1px;
}

@media (max-width: 991px) {
    /*  .right_col {
    padding: 10px !important;
  }*/

    /* .nav-md .container.body .right_col {
        width: 100%;
        margin: 0;       
        padding: 65px 15px 15px 15px;
    }*/

    .nav-md .container.body .right_col,
    .nav-md .container.body .top_nav {
        width: 100%;
        margin: 0;
    }

    .nav-md .container.body .top_nav {
        width: 100%;
        margin: 0;
    }

    .nav-md .container.body .right_col {
        width: calc(100% - 72px);
        padding: 65px 15px 15px 15px;
        margin-right: 72px;
    }

    /*.nav-md .container.body .col-md-3.left_col {
        display: none;
    }*/
}

@media (max-width: 1200px) {
    .tile {
        zoom: 85%;
        height: inherit;
    }

    .graph {
        zoom: 85%;
        height: inherit;
    }

    .x_title h2 {
        width: 62%;
        font-size: 17px;
    }
}

@media (max-width: 1270px) and (min-width: 192px) {
    .x_title h2 small {
        display: none;
    }
}

.container {
    width: 100%;
    padding: 0;
}

.navbar-nav > li > a {
    color: #fff !important;
    color: #fff !important;
    font-weight: 500;
    color: #ecf0f1 !important;
    margin-left: 0 !important;
    line-height: 32px;
}

.navbar-nav .open .dropdown-menu {
    position: absolute;
    background: #fff;
    margin-top: 0;
    border: 1px solid #d9dee4;
    left: 0;
    right: auto;
    width: 220px;
}

    .navbar-nav .open .dropdown-menu.msg_list {
        width: 300px;
    }

.navbar-brand {
    color: #fff !important;
    font-weight: 500;
    color: #ecf0f1 !important;
    margin-left: 0 !important;
    line-height: 32px;
}

.top_nav .nav > li > a:focus {
    background: #d9dee4;
}

.top_nav .nav > li > a:hover {
    background: #d9dee4;
}

.top_nav .nav .open > a {
    background: #d9dee4;
}

    .top_nav .nav .open > a:focus {
        background: #d9dee4;
    }

    .top_nav .nav .open > a:hover {
        background: #d9dee4;
    }

.top_nav .navbar-right {
    margin: 0;
    float: left !important;
    position: relative;
}

    .top_nav .navbar-right li {
        display: inline-block;
    }

.top_nav .dropdown-menu li {
    width: 100%;
}

    .top_nav .dropdown-menu li a {
        width: 100%;
        padding: 12px 20px;
    }

.top_nav li a i {
    font-size: 15px;
    transform: scaleX(-1);
}

    .top_nav li a i.fa.pull-right {
        margin-right: 0.3em;
        float: left !important;
    }

.page-title {
    width: 100%;
    height: 65px;
    padding: 10px 0;
}

    .page-title .title_left {
        width: 45%;
        float: right;
        display: block;
    }

        .page-title .title_left h3 {
            margin: 9px 0;
        }

    .page-title .title_right {
        width: 55%;
        float: left;
        display: block;
    }

        .page-title .title_right .pull-right {
            margin: 10px 0;
            float: left !important;
        }

table.tile h3 {
    font-weight: bold;
    vertical-align: middle !important;
}

table.tile h4 {
    font-weight: bold;
    vertical-align: middle !important;
}

table.tile span {
    font-weight: bold;
    vertical-align: middle !important;
}

table.tile th {
    text-align: center;
    border-bottom: 1px solid #e6e9ed;
}

table.tile td {
    text-align: center;
    padding: 5px 0;
}

    table.tile td ul {
        text-align: left;
        padding-left: 0;
    }

        table.tile td ul li {
            list-style: none;
            width: 100%;
        }

            table.tile td ul li a {
                width: 100%;
            }

                table.tile td ul li a big {
                    right: 0;
                    float: right;
                    margin-right: 13px;
                }

table.tile_info {
    width: 100%;
    padding: 10px 15px;
}

    table.tile_info td {
        text-align: right;
        padding: 1px;
        font-size: 15px;
    }

        table.tile_info td p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
            line-height: 28px;
        }

        table.tile_info td i {
            margin-right: 8px;
            font-size: 17px;
            float: right;
            width: 18px;
            line-height: 28px;
        }

        table.tile_info td:first-child {
            width: 83%;
        }

    table.tile_info span.right {
        margin-right: 0;
        float: right;
        position: absolute;
        right: 4%;
    }

table.countries_list {
    width: 100%;
}

    table.countries_list td {
        padding: 0 10px;
        line-height: 30px;
        border-top: 1px solid #ededed;
    }

table.jambo_table {
    border: 1px solid rgba(221, 221, 221, 0.78);
}

    table.jambo_table thead {
        background: rgba(52, 73, 94, 0.94);
        color: #ecf0f1;
    }

    table.jambo_table tbody tr.selected {
        background: rgba(38, 185, 154, 0.16);
    }

        table.jambo_table tbody tr.selected td {
            border-top: 1px solid rgba(38, 185, 154, 0.4);
            border-bottom: 1px solid rgba(38, 185, 154, 0.4);
        }

    table.jambo_table tbody tr:hover td {
        background: rgba(38, 185, 154, 0.07);
        border-top: 1px solid rgba(38, 185, 154, 0.11);
        border-bottom: 1px solid rgba(38, 185, 154, 0.11);
    }

table.dataTable th.focus {
    outline: 2px solid #1abb9c !important;
    outline-offset: -1px;
}

table.dataTable td.focus {
    outline: 2px solid #1abb9c !important;
    outline-offset: -1px;
}

table.display {
    margin: 0 auto;
    clear: both;
    width: 100%;
}

    table.display thead th {
        padding: 8px 18px 8px 10px;
        font-weight: bold;
        cursor: pointer;
    }

        table.display thead th:active {
            outline: none;
        }

    table.display thead td:active {
        outline: none;
    }

    table.display tr.heading2 td {
        border-bottom: 1px solid #aaa;
    }

    table.display tr.even.row_selected td {
        background-color: #b0bed9;
    }

    table.display tr.odd.row_selected td {
        background-color: #9fafd1;
    }

    table.display td {
        padding: 3px 10px;
    }

        table.display td.center {
            text-align: center;
        }

    table.display tfoot th {
        padding: 3px 18px 3px 10px;
        border-top: 1px solid #000;
        font-weight: bold;
    }

table.no-margin .progress {
    margin-bottom: 0;
}

.main_content {
    padding: 10px 20px;
}

.col-md-55 {
    width: 50%;
    margin-bottom: 10px;
    position: relative;
    min-height: 1px;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width: 768px) {
    .col-md-55 {
        width: 20%;
    }

    .footer_fixed footer {
        margin-right: 0;
    }

    .footer_fixed .nav-sm footer {
        margin-right: 0;
    }

    .bs-glyphicons {
        margin-right: 0;
        margin-left: 0;
    }

        .bs-glyphicons li {
            width: 12.5%;
            font-size: 12px;
        }

    .cropper .img-container {
        min-height: 516px;
    }
}

@media (min-width: 992px) {
    .col-md-55 {
        width: 20%;
    }

    footer {
        margin-right: 300px;
    }

    .tile_count .tile_stats_count {
        margin-bottom: 10px;
        border-bottom: 0;
        padding-bottom: 10px;
    }
}

@media (min-width: 1200px) {
    .col-md-55 {
        width: 20%;
    }
}

@media (min-width: 192px) and (max-width: 1270px) {
    table.tile_info span.right {
        margin-right: 7px;
        float: left;
    }
}

.col-md-55,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
    position: relative;
    min-height: 1px;
    /*  float: right;*/
    padding-right: 10px;
    padding-left: 10px;
}

.row {
    margin-right: -10px;
    margin-left: -10px;
}

h1,
.h1 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 400;
}

.h2 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}

    h3.degrees {
        font-size: 22px;
        font-weight: 400;
        text-align: center;
    }

.h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}

a {
    color: #5a738e;
    text-decoration: none;
    outline: 0;
}

    a:visited {
        outline: 0;
    }

    a:focus {
        outline: 0;
        text-decoration: none;
        outline: none;
    }

    a:active {
        outline: 0;
    }

    a:hover {
        text-decoration: none;
    }

    a.DTTT_button {
        border: 1px solid #e7e7e7 !important;
        background: #e7e7e7 !important;
        box-shadow: none !important;
    }

    a.user-profile {
        color: #5e6974 !important;
    }

    a.star {
        color: #428bca !important;
    }

    a.btn-success {
        color: #fff;
    }

    a.btn-primary {
        color: #fff;
    }

    a.btn-warning {
        color: #fff;
    }

    a.btn-danger {
        color: #fff;
    }

    a.hiddenanchor {
        display: none;
    }

:visited {
    outline: 0;
}

:focus {
    outline: 0;
}

:active {
    outline: 0;
}

.btn {
    margin-bottom: 5px;
    margin-right: 5px;
    border-radius: 3px;
}

    .btn:focus {
        outline: 0;
    }

    .btn:active:focus {
        outline: 0;
    }

    .btn:active.focus {
        outline: 0;
    }

    .btn.active:focus {
        outline: 0;
    }

    .btn.active.focus {
        outline: 0;
    }

    .btn.focus {
        outline: 0;
    }

    .btn.btn-app {
        position: relative;
        padding: 15px 5px;
        margin: 0 0 10px 10px;
        min-width: 80px;
        height: 60px;
        box-shadow: none;
        border-radius: 0;
        text-align: center;
        color: #666;
        border: 1px solid #ddd;
        background-color: #fafafa;
        font-size: 12px;
    }

        .btn.btn-app > .fa {
            font-size: 20px;
            display: block;
        }

        .btn.btn-app > .glyphicon {
            font-size: 20px;
            display: block;
        }

        .btn.btn-app > .ion {
            font-size: 20px;
            display: block;
        }

        .btn.btn-app > .badge {
            position: absolute;
            top: -3px;
            right: -10px;
            font-size: 10px;
            font-weight: 400;
        }

        .btn.btn-app:hover {
            background: #f4f4f4;
            color: #444;
            border-color: #aaa;
        }

        .btn.btn-app:active {
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        }

        .btn.btn-app:focus {
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        }

.navbar {
    margin-bottom: 0;
}

.navbar-header {
    background: #2a3f54;
}

.navbar-right {
    margin-right: 0;
}

.navbar-static-top {
    position: fixed;
    top: 0;
    width: 100%;
}

.sidebar-header {
    border-bottom: 0;
    margin-top: 46px;
}

    .sidebar-header:first-of-type {
        margin-top: 0;
    }

.nav.child_menu {
    display: none;
    background: rgb(0 0 0 / 6%);
}

    /* .nav.child_menu li:hover,
    .nav.child_menu li.active {
        background-color: rgba(255, 255, 255, 0.06)
    }*/

    .nav.child_menu li {
        padding-right: 50px;
        border-bottom: 1px dotted rgba(0,0,0,0.05);
    }

        .nav.child_menu li:hover {
            /* background-color: rgba(255, 255, 255, 0.06); */
        }

        .nav.child_menu li.active {
            /* background-color: rgba(255, 255, 255, 0.06); */
        }

        .nav.child_menu li li:hover {
            background: none;
        }

        .nav.child_menu li li.active {
            background: none;
        }

        .nav.child_menu li li a:hover {
            color: #fff;
        }

        .nav.child_menu li li a.active {
            color: #fff;
        }

    .nav.child_menu > li > a {
        color: #fff;
        font-weight: 500;
        /* color: rgba(255, 255, 255, 0.75); */
        font-size: 12px;
        padding: 9px;
    }

.nav li.current-page {
    /* background: rgba(255, 255, 255, 0.05); */
}

.nav li li li.current-page {
    background: none;
}

.nav li li.current-page a {
    color: rgb(46 63 82);
}

.nav.side-menu > li {
    position: relative;
    display: block;
    cursor: pointer;
}

    .nav.side-menu > li > a {
        margin-bottom: 5px;
        color: #e7e7e7;
        font-weight: 500;
    }

        .nav.side-menu > li > a:hover {
            color: #f2f5f7 !important;
            text-decoration: none;
            background: transparent;
        }

.nav-md .side-menu > li.active > a {
    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
    background: #2e3f52;
    /* box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;*/
    border-radius: 0px;
    margin-left: 0px;
    /* margin-top: 20px;*/
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 13px 15px 12px;
}

    .nav > li > a:focus {
        text-decoration: none;
        background: transparent;
        background-color: transparent;
    }

    .nav > li > a:hover {
        background-color: transparent;
    }

.nav.navbar-nav > li > a {
    color: #515356;
}

.nav.top_menu > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #2a3f54 !important;
}

.top_search {
    padding: 0;
}

    .top_search .form-control {
        border-left: 0;
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075);
        border-radius: 0 25px 25px 0 !important;
        padding-right: 20px;
        border: 1px solid rgba(221, 226, 232, 0.49);
    }

        .top_search .form-control:focus {
            border: 1px solid rgba(221, 226, 232, 0.49);
            border-left: 0;
        }

    .top_search .input-group-btn button {
        border-radius: 25px 0 0 25px !important;
        border: 1px solid rgba(221, 226, 232, 0.49);
        border-right: 0;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        color: #93a2b2;
        margin-bottom: 0 !important;
    }

.toggle {
    float: right;
    margin: 0;
}

    .toggle a {
        padding: 15px 15px 0;
        margin: 0;
        cursor: pointer;
    }

        .toggle a i {
            font-size: 20px;
        }

.panel_toolbox {
    float: left;
    min-width: 70px;
}

    .panel_toolbox.navbar-right {
        float: left !important;
        margin-left: 0;
        margin-right: auto;
    }

    .panel_toolbox > li {
        float: left;
        border: none !important;
        cursor: pointer;
    }

        .panel_toolbox > li > a {
            padding: 5px;
            color: #c5c7cb;
            font-size: 14px;
        }

            .panel_toolbox > li > a:hover {
                background: #f5f7fa;
            }

.line_30 {
    line-height: 30px;
}

.main_menu_side {
    padding: 0;
    background-image: url(../../image/sideMenuBackground.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

footer {
    background: #f7f7f7;
    display: block;
    font-size: 14px;
}

.custom-footer {
    width: 100%;
    padding: 0 20px;
    background: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .custom-footer span {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

.tile-stats {
    position: relative;
    display: block;
    margin-bottom: 12px;
    border: 1px solid #e7e7e7;
    overflow: hidden;
    padding-bottom: 5px;
    border-radius: 5px;
    background-clip: padding-box;
    background: #fff;
    transition: all 300ms ease-in-out;
}

    .tile-stats.sparkline {
        padding: 10px;
        text-align: center;
    }

    .tile-stats .icon {
        width: 20px;
        height: 20px;
        color: #bab8b8;
        position: absolute;
        left: 53px;
        top: 22px;
        z-index: 1;
    }

        .tile-stats .icon i {
            margin: 0;
            font-size: 60px;
            line-height: 0;
            vertical-align: bottom;
            padding: 0;
        }

    .tile-stats .count {
        font-size: 38px;
        font-weight: bold;
        line-height: 1.65857143;
        position: relative;
        margin: 0;
        margin-right: 10px;
        z-index: 5;
        padding: 0;
    }

    .tile-stats h3 {
        position: relative;
        margin: 0;
        margin-right: 10px;
        z-index: 5;
        padding: 0;
        color: #bab8b8;
    }

    .tile-stats p {
        position: relative;
        margin: 0;
        margin-right: 10px;
        z-index: 5;
        padding: 0;
        margin-top: 5px;
        font-size: 12px;
    }

    .tile-stats:hover .icon i {
        animation-name: tansformAnimation;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        color: rgba(58, 58, 58, 0.41);
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

    .tile-stats > .dash-box-footer {
        position: relative;
        text-align: center;
        margin-top: 5px;
        padding: 3px 0;
        color: #fff;
        color: rgba(255, 255, 255, 0.8);
        display: block;
        z-index: 10;
        background: rgba(0, 0, 0, 0.1);
        text-decoration: none;
    }

        .tile-stats > .dash-box-footer:hover {
            color: #fff;
            background: rgba(0, 0, 0, 0.15);
        }

.jqstooltip {
    background: #2a3f54 !important;
    width: 30px !important;
    height: 22px !important;
    text-decoration: none;
}

.tooltip {
    display: block !important;
}

.tiles {
    border-top: 1px solid #ccc;
    margin-top: 15px;
    padding-top: 5px;
    margin-bottom: 0;
}

.tile {
    overflow: hidden;
}

    .tile:hover {
        text-decoration: none;
    }

.top_tiles {
    margin-bottom: 0;
}

    .top_tiles .tile h2 {
        font-size: 30px;
        line-height: 30px;
        margin: 3px 0 7px;
        font-weight: bold;
    }

* {
    box-sizing: border-box;
}

    *:before {
        box-sizing: border-box;
    }

    *:after {
        box-sizing: border-box;
    }

#integration-list {
    width: 100%;
    margin: 0 auto;
    display: table;
}

    #integration-list ul {
        padding: 0;
        margin: 20px 0;
        color: #555;
    }

        #integration-list ul > li {
            list-style: none;
            border-top: 1px solid #ddd;
            display: block;
            padding: 15px;
            overflow: hidden;
        }

            #integration-list ul > li:hover {
                background: #efefef;
            }

        #integration-list ul:last-child {
            border-bottom: 1px solid #ddd;
        }

.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}

    .expand h2 {
        width: 85%;
        float: left;
    }

#left {
    display: table;
}

#right {
    display: table;
}

#sup {
    display: table-cell;
    vertical-align: middle;
    width: 80%;
}

.detail {
    margin: 10px 0;
    display: none;
    line-height: 22px;
    height: 150px;
}

    .detail a {
        text-decoration: none;
        color: #c0392b;
        border: 1px solid #c0392b;
        padding: 6px 10px 5px;
        font-size: 13px;
        margin-right: 7px;
    }

    .detail span {
        margin: 0;
    }

.right-arrow {
    width: 10px;
    float: right;
    font-weight: bold;
    font-size: 20px;
}

.accordion .panel {
    margin-bottom: 5px;
    border-radius: 0;
    border-bottom: 1px solid #efefef;
}

    .accordion .panel:hover {
        background: #f2f5f7;
    }

.accordion .panel-heading {
    background: #f2f5f7;
    padding: 13px;
    width: 100%;
    display: block;
}

.x_panel {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 0;
    border-radius: 8px;
    display: inline-block;
    column-break-inside: avoid;
    opacity: 1;
    transition: all 0.2s ease;
}

.x_title {
    padding: 1px 5px 6px;
    margin-bottom: 10px;
}

@media(max-width:768px) {
    .x_title {
        padding: 1px 0 6px 0;
    }
}


.x_title .filter {
    width: 40%;
    float: left;
}

.x_title h2 {
    margin: 5px 0 6px;
    float: right;
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

    .x_title h2 small {
        margin-right: 10px;
    }

.x_title span {
    color: #bdbdbd;
}

.x_content {
    padding: 0;
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 5px;
}

    .x_content h4 {
        font-size: 16px;
        font-weight: 600;
        color: #464646;
    }

legend {
    padding-bottom: 7px;
    font-size: 18px;
    color: inherit;
}

.demo-placeholder {
    height: 280px;
}

.profile_details:nth-child(3n) {
    clear: both;
}

.profile_details .profile_view {
    display: inline-block;
    padding: 10px;
    background: #fff;
}

    .profile_details .profile_view .divider {
        border-top: 1px solid #e5e5e5;
        padding-top: 5px;
        margin-top: 5px;
    }

    .profile_details .profile_view .ratings {
        margin-bottom: 0;
        text-align: left;
        font-size: 16px;
    }

    .profile_details .profile_view .bottom {
        background: #f2f5f7;
        padding: 9px 0;
        border-top: 1px solid #e6e9ed;
    }

    .profile_details .profile_view .left {
        margin-top: 20px;
    }

        .profile_details .profile_view .left p {
            margin-bottom: 3px;
        }

    .profile_details .profile_view .right {
        margin-top: 0;
        padding: 10px;
    }

    .profile_details .profile_view .img-circle {
        border: 1px solid #e6e9ed;
        padding: 2px;
    }

    .profile_details .profile_view h2 {
        margin: 5px 0;
    }

    .profile_details .profile_view .brief {
        margin: 0;
        font-weight: 300;
    }

.profile_details .profile_left {
    background: #fff;
}

.profile_details .emphasis {
    padding: 0;
}

td span {
    line-height: 28px;
}

td.group {
    background-color: #ccc;
    border-bottom: 2px solid #a19b9e;
    border-top: 2px solid #a19b9e;
}

td.details {
    background-color: #ccc;
    border: 2px solid #a19b9e;
}

.sidebar-widget {
    overflow: hidden;
}

.error-number {
    font-size: 90px;
    line-height: 90px;
    margin: 20px 0;
}

.col-middle {
    margin-top: 5%;
}

.mid_center {
    width: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
}

.bulk-actions {
    display: none;
}

.dataTables_paginate {
    float: left;
    text-align: left;
}

    .dataTables_paginate a {
        padding: 6px 9px !important;
        background: #ddd !important;
        border-color: #ddd !important;
        background: #ff0000;
    }

.paging_full_numbers {
    width: 400px;
    height: 22px;
    line-height: 22px;
}

    .paging_full_numbers a.paginate_active {
        background-color: rgba(38, 185, 154, 0.59) !important;
        border-color: rgba(38, 185, 154, 0.59) !important;
        background-color: #99b3ff;
        border: 1px solid #aaa;
        padding: 2px 5px;
        margin: 0 3px;
        cursor: pointer;
    }

    .paging_full_numbers a:active {
        outline: none;
    }

    .paging_full_numbers a:hover {
        text-decoration: none;
    }

    .paging_full_numbers a.paginate_button {
        border: 1px solid #aaa;
        padding: 2px 5px;
        margin: 0 3px;
        cursor: pointer;
        background-color: #ddd;
    }

        .paging_full_numbers a.paginate_button:hover {
            background-color: #ccc;
            text-decoration: none !important;
        }

button {
    margin-bottom: 5px;
    margin-right: 5px;
}

    button.DTTT_button {
        border: 1px solid #e7e7e7 !important;
        background: #e7e7e7 !important;
        box-shadow: none !important;
    }

div.DTTT_button {
    border: 1px solid #e7e7e7 !important;
    background: #e7e7e7 !important;
    box-shadow: none !important;
}

div.box {
    height: 100px;
    padding: 10px;
    overflow: auto;
    border: 1px solid #8080ff;
    background-color: #e5e5ff;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
    background: #fff;
    padding: 15px;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

.dataTables_processing {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 250px;
    height: 30px;
    margin-right: -125px;
    margin-top: -15px;
    padding: 14px 0 2px;
    border: 1px solid #ddd;
    text-align: center;
    color: #999;
    font-size: 14px;
    background-color: #fff;
    z-index: 1;
    border: 0;
}

/*.dataTables_length {
    width: 200px;
    float: right !important;
}
*/
/*div.dataTables_wrapper div.dataTables_filter,
.dataTables_filter {
    width: auto;
    min-width: 30%;
    float: left;
    text-align: left;
}
*/
.dataTables_info {
    width: 60%;
    float: right;
}

.dataTables_scroll {
    clear: both;
}

.dataTables_scrollBody {
    *margin-top: -1px;
}

.clear {
    clear: both;
}

.dataTables_empty {
    text-align: center;
}

ul.to_do {
    padding: 0;
}

    ul.to_do li {
        background: #f3f3f3;
        border-radius: 3px;
        position: relative;
        padding: 7px;
        margin-bottom: 5px;
        list-style: none;
    }

    ul.to_do p {
        margin: 0;
    }

ul.quick-list {
    width: 45%;
    padding-right: 0;
    display: inline-block;
}

    ul.quick-list li {
        padding-left: 10px;
        list-style: none;
        margin: 0;
        padding-bottom: 6px;
        padding-top: 4px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        ul.quick-list li i {
            padding-left: 10px;
            color: #757679;
        }

ul.top_profiles {
    height: 330px;
    width: 100%;
}

    ul.top_profiles li {
        margin: 0;
        padding: 3px 5px;
    }

        ul.top_profiles li:nth-child(odd) {
            background-color: #ededed;
        }

ul.parsley-errors-list {
    list-style: none;
    color: #e74c3c;
    padding-right: 0;
}

ul.bar_tabs {
    overflow: visible;
    background: #f5f7fa;
    height: 25px;
    margin: 21px 0 14px;
    padding-right: 14px;
    position: relative;
    z-index: 1;
    width: 100%;
    border-bottom: 1px solid #e6e9ed;
}

    ul.bar_tabs > li {
        border: 1px solid #e6e9ed;
        color: #333 !important;
        margin-top: -17px;
        margin-right: 8px;
        background: #fff;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
    }

        ul.bar_tabs > li.active {
            border-left: 6px solid #d3d6da;
            border-top: 0;
            margin-top: -15px;
        }

            ul.bar_tabs > li.active a {
                border-bottom: none;
            }

        ul.bar_tabs > li a {
            padding: 10px 17px;
            background: #f5f7fa;
            margin: 0;
            border-top-left-radius: 0;
        }

            ul.bar_tabs > li a:hover {
                border: 1px solid transparent;
            }

    ul.bar_tabs.left {
        padding-left: 14px;
    }

        ul.bar_tabs.left li {
            float: left;
        }

ul.bar_tabsColor > li.active {
    border-right: 6px solid #ceb578;
}

ul.widget_tally {
    width: 100%;
}

    ul.widget_tally li {
        width: 100%;
        padding: 2px 10px;
        border-bottom: 1px solid #ececec;
        padding-bottom: 4px;
    }

    ul.widget_tally .month {
        width: 70%;
        float: right;
    }

    ul.widget_tally .count {
        width: 30%;
        float: right;
        text-align: left;
    }

ul.widget_profile_box {
    width: 100%;
    height: 42px;
    padding: 3px;
    background: #ececec;
    margin-top: 40px;
    margin-left: 1px;
}

    ul.widget_profile_box li:first-child {
        width: 25%;
        float: right;
    }

        ul.widget_profile_box li:first-child a {
            float: right;
        }

    ul.widget_profile_box li:last-child {
        width: 25%;
        float: left;
    }

        ul.widget_profile_box li:last-child a {
            float: left;
        }

    ul.widget_profile_box li a {
        font-size: 22px;
        text-align: center;
        width: 35px;
        height: 35px;
        border: 1px solid rgba(52, 73, 94, 0.44);
        display: block;
        border-radius: 50%;
        padding: 0;
        padding-top: 5px;
        cursor: pointer;
    }

        ul.widget_profile_box li a:hover {
            color: #1abb9c !important;
            border: 1px solid #26b99a;
        }

    ul.widget_profile_box li .profile_img {
        width: 85px;
        height: 85px;
        margin: 0;
        margin-top: -28px;
    }

ul.count2 {
    width: 100%;
    margin-left: 1px;
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    padding: 10px 0;
}

    ul.count2 li {
        width: 30%;
        text-align: center;
        white-space: nowrap;
    }

        ul.count2 li h3 {
            font-weight: 400;
            margin: 0;
        }

        ul.count2 li span {
            font-weight: 300;
        }

ul.messages {
    padding: 0;
    list-style: none;
}

    ul.messages li {
        border-bottom: 1px dotted #e7e7e7;
        padding: 8px 0;
    }

        ul.messages li .message_date {
            float: left;
            text-align: left;
        }

            ul.messages li .message_date > .date {
                font-size: 35px;
                text-align: center;
            }

        ul.messages li .message_wrapper {
            margin-right: 50px;
            margin-left: 40px;
        }

            ul.messages li .message_wrapper blockquote {
                padding: 0 10px;
                margin: 0;
                border-right: 5px solid #ededed;
            }

            ul.messages li .message_wrapper h4.heading {
                font-weight: 600;
                margin: 0;
                cursor: pointer;
                margin-bottom: 10px;
                line-height: 100%;
            }

        ul.messages li img.avatar {
            height: 32px;
            width: 32px;
            float: right;
            display: inline-block;
            border-radius: 2px;
            padding: 2px;
            background: #f7f7f7;
            border: 1px solid #e7e7e7;
        }

ul.stats-overview {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

    ul.stats-overview li {
        display: inline-block;
        text-align: center;
        padding: 0 15px;
        width: 30%;
        font-size: 14px;
        border-right: 1px solid #eaeaea;
    }

        ul.stats-overview li:last-child {
            border-right: 0;
        }

        ul.stats-overview li .name {
            font-size: 12px;
        }

        ul.stats-overview li .value {
            font-size: 14px;
            font-weight: bold;
            display: block;
        }

        ul.stats-overview li:first-child {
            padding-left: 0;
        }

ul.verticle_bars {
    width: 100%;
}

    ul.verticle_bars li {
        width: 23%;
        height: 200px;
        margin: 0;
    }

ul.notifications {
    float: right;
    display: block;
    margin-bottom: 7px;
    padding: 0;
    width: 100%;
}

ul.msg_list li {
    background: #f7f7f7;
    padding: 5px;
    display: -ms-flexbox;
    display: flex;
    margin: 6px 6px 0;
    width: 96% !important;
}

    ul.msg_list li:last-child {
        margin-bottom: 6px;
        padding: 10px;
    }

    ul.msg_list li a {
        padding: 3px 5px !important;
    }

        ul.msg_list li a .time {
            font-size: 11px;
            font-style: italic;
            font-weight: bold;
            position: absolute;
            left: 35px;
        }

        ul.msg_list li a .message {
            display: block !important;
            font-size: 11px;
            direction: rtl;
        }

        ul.msg_list li a .image img {
            border-radius: 2px 2px 2px 2px;
            float: right;
            margin-left: 10px;
            width: 11%;
        }

ul.timeline li {
    position: relative;
    border-bottom: 1px solid #eaeaea;
    clear: both;
}

ul.social li {
    border: 0;
}

ul.user_data li {
    margin-bottom: 6px;
}

    ul.user_data li p {
        margin-bottom: 0;
    }

    ul.user_data li .progress {
        width: 90%;
    }

ul.project_files li {
    margin-bottom: 5px;
}

    ul.project_files li a i {
        width: 20px;
    }

.dropdown-menu {
    border: medium none;
    box-shadow: none;
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: none outside none;
    padding: 0;
    position: absolute;
    text-shadow: none;
    top: 100%;
    z-index: 9998;
    border: 1px solid #d9dee4;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

    .dropdown-menu a {
        cursor: pointer;
    }

    .dropdown-menu.msg_list span {
        white-space: normal;
    }

    .dropdown-menu > li > a {
        color: #5a738e;
    }

    .dropdown-menu .badge {
        float: left !important;
    }

.dashboard-widget {
    background: #f7f7f7;
    border-top: 5px solid #79c3df;
    border-radius: 3px;
    padding: 5px 10px 10px;
}

    .dashboard-widget .dashboard-widget-title {
        font-weight: normal;
        border-bottom: 1px solid #c1cdcd;
        margin: 0 0 10px 0;
        padding-bottom: 5px;
        padding-left: 40px;
        line-height: 30px;
    }

        .dashboard-widget .dashboard-widget-title i {
            font-size: 100%;
            margin-left: -35px;
            margin-right: 10px;
            color: #33a1c9;
            padding: 3px 6px;
            border: 1px solid #abd9ea;
            border-radius: 5px;
            background: #fff;
        }

.dashboard-widget-content {
    padding-top: 9px;
}

    .dashboard-widget-content .sidebar-widget {
        width: 55%;
        display: inline-block;
        vertical-align: top;
        background: #fff;
        border: 1px solid #abd9ea;
        border-radius: 5px;
        text-align: center;
        float: left;
        padding: 2px;
        margin-top: 10px;
    }

.widget_summary {
    width: 100%;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

    .widget_summary .w_left {
        float: right;
        text-align: right;
    }

    .widget_summary .w_center {
        float: left;
    }

    .widget_summary .w_right {
        float: right;
        text-align: left;
    }

        .widget_summary .w_right span {
            font-size: 20px;
        }

.w_20 {
    width: 20%;
}

.w_25 {
    width: 25%;
}

.w_55 {
    width: 55%;
}

span.right {
    float: right;
    font-size: 14px !important;
}

span.section {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

span.tag {
    display: block;
    float: right;
    padding: 5px 9px;
    text-decoration: none;
    background: #1abb9c;
    color: #f1f6f7;
    margin-right: 5px;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: Open Sans, Almarai, sans-serif !important;
}

    span.tag a {
        color: #f1f6f7 !important;
    }

.sidebar-footer {
    bottom: 0;
    clear: both;
    display: block;
    padding: 5px 0;
    position: fixed;
    width: 250px;
    background: #1c2c42;
    z-index: 999;
}

    .sidebar-footer a {
        padding: 7px 0 3px;
        text-align: center;
        width: 25%;
        font-size: 17px;
        display: block;
        float: right;
        background: #1c2c42;
        cursor: pointer;
    }

        .sidebar-footer a:hover {
            color: #fff;
        }

.tile_count {
    margin-bottom: 15px;
    margin-top: 15px;
}

    .tile_count .tile_stats_count {
        /*border-bottom: 1px solid #d9dee4;*/
        padding: 0 20px 0 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }

        .tile_count .tile_stats_count:before {
            content: "";
            position: absolute;
            right: 0;
            height: 65px;
            border-right: 2px solid #adb2b5;
            margin-top: 10px;
        }

        .tile_count .tile_stats_count .count {
            font-size: 30px;
            line-height: 47px;
            font-weight: 600;
        }

        .tile_count .tile_stats_count span {
            font-size: 12px;
        }

        .tile_count .tile_stats_count .count_bottom i {
            width: 12px;
        }

@media (min-width: 992px) {
    .tile_count .tile_stats_count:first-child:before {
        border-right: 0;
    }
}

@media (min-width: 768px) {
    .tile_count .tile_stats_count .count {
        font-size: 40px;
    }

    .tile_count .tile_stats_count span {
        font-size: 13px;
    }
}

@media (min-width: 992px) and (max-width: 1100px) {
    .tile_count .tile_stats_count .count {
        font-size: 30px;
    }
}

.dashboard_graph {
    background: #fff;
    padding: 7px 10px;
}

    .dashboard_graph .col-md-9 {
        padding: 0;
    }

    .dashboard_graph .col-md-3 {
        padding: 0;
    }

    .dashboard_graph .x_title {
        padding: 5px 5px 7px;
    }

        .dashboard_graph .x_title h3 {
            margin: 0;
            font-weight: normal;
        }

    .dashboard_graph p {
        margin: 0 0 4px;
    }

.media .profile_thumb {
    border: 1px solid;
    width: 50px;
    height: 50px;
    margin: 5px 10px 5px 0;
    border-radius: 50%;
    padding: 9px 12px;
}

    .media .profile_thumb i {
        font-size: 30px;
    }

.media .date {
    background: #ccc;
    width: 52px;
    margin-right: 10px;
    border-radius: 10px;
    padding: 5px;
}

    .media .date .month {
        margin: 0;
        text-align: center;
        color: #fff;
    }

    .media .date .day {
        text-align: center;
        color: #fff;
        font-size: 27px;
        margin: 0;
        line-height: 27px;
        font-weight: bold;
    }

.tile_header {
    /*border-bottom: transparent;*/
    padding: 7px 15px;
    margin-bottom: 15px;
    background: #e7e7e7;
}

.tiles-bottom {
    padding: 5px 10px;
    margin-top: 10px;
    background: rgba(194, 194, 194, 0.3);
    text-align: left;
}

.mail_content {
    background: none repeat scroll 0 0 #fff;
    border-radius: 4px;
    margin-top: 20px;
    min-height: 500px;
    padding: 10px 11px;
    width: 100%;
}

.list-btn-mail {
    margin-bottom: 15px;
}

    .list-btn-mail.active {
        border-bottom: 1px solid #39b3d7;
        padding: 0 0 14px;
    }

    .list-btn-mail > i {
        float: left;
        font-size: 18px;
        font-style: normal;
        width: 33px;
    }

    .list-btn-mail > .cn {
        background: none repeat scroll 0 0 #39b3d7;
        border-radius: 12px;
        color: #fff;
        float: right;
        font-style: normal;
        padding: 0 5px;
    }

.button-mail {
    margin: 0 0 15px !important;
    text-align: left;
    width: 100%;
}

.btn-group .btn {
    margin-bottom: 0;
    margin-right: 0;
}

.btn-group .parsley-errors-list {
    display: none;
}

.mail_list_column {
    border-right: 1px solid #dbdbdb;
}

.mail_view {
    border-right: 1px solid #dbdbdb;
}

.mail_list {
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 2px;
    display: inline-block;
}

    .mail_list .right {
        width: 5%;
        float: right;
        margin-right: 3%;
    }

    .mail_list .left {
        width: 90%;
        float: right;
    }

    .mail_list h3 {
        font-size: 15px;
        font-weight: bold;
        margin: 0 0 6px;
    }

        .mail_list h3 small {
            float: left;
            color: #aaa;
            font-size: 11px;
            line-height: 20px;
        }

    .mail_list .badge {
        padding: 3px 6px;
        font-size: 8px;
        background: #bab8b8;
    }

@media (max-width: 767px) {
    .mail_list {
        margin-bottom: 5px;
        display: inline-block;
    }
}

.attachment {
    margin-top: 30px;
}

    .attachment ul {
        width: 100%;
        list-style: none;
        padding-left: 0;
        display: inline-block;
        margin-bottom: 30px;
    }

        .attachment ul li {
            float: left;
            width: 150px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

            .attachment ul li img {
                height: 150px;
                border: 1px solid #ddd;
                padding: 5px;
                margin-bottom: 10px;
            }

            .attachment ul li span {
                float: right;
            }

    .attachment .file-name {
        float: left;
    }

    .attachment .links {
        width: 100%;
        display: inline-block;
    }

.compose {
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    border: 1px solid #d9dee4;
    border-left: 0;
    border-bottom: 0;
    border-top-right-radius: 5px;
    z-index: 9999;
    display: none;
}

    .compose .compose-header {
        padding: 5px;
        background: #169f85;
        color: #fff;
        border-top-right-radius: 5px;
    }

        .compose .compose-header .close {
            text-shadow: 0 1px 0 #fff;
            line-height: 0.8;
        }

    .compose .compose-body .editor-wrapper {
        height: 100%;
        min-height: 50px;
        max-height: 180px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        overflow: auto;
    }

    .compose .compose-body .editor.btn-toolbar {
        margin: 0;
    }

    .compose .compose-footer {
        padding: 10px;
    }

.input-group {
    margin-bottom: 10px;
}

.ln_solid {
    border-top: 1px solid #e5e5e5;
    color: #fff;
    background-color: #fff;
    height: 1px;
    margin: 20px 0;
}

.has-feedback .form-control {
    padding-right: 42.5px;
    padding-left: 12px;
}

.form-control {
    width: 100%;
}

    .form-control:focus {
        border-color: #ccd0d7;
        box-shadow: none !important;
    }

    .form-control.has-feedback-left {
        padding-right: inherit;
        padding-left: 45px;
    }

    .form-control.has-feedback-right {
        padding-left: 45px;
        padding-right: inherit;
    }

.form-horizontal .control-label {
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: right;
    margin-top: 0;
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}

.form-control-feedback {
    margin-top: 8px;
    height: 23px;
    color: #bab8b8;
    line-height: 24px;
    font-size: 15px;
}

    .form-control-feedback.left {
        border-right: 1px solid #ccc;
        left: 15px !important;
        right: auto !important;
    }

    .form-control-feedback.right {
        border-left: 1px solid #ccc;
        right: 15px !important;
        left: auto !important;
    }

.form-group {
    margin-bottom: 10px;
}

.validate {
    margin-top: 10px;
}

.invalid-form-error-message {
    margin-top: 10px;
    padding: 5px;
}

    .invalid-form-error-message.filled {
        border-left: 2px solid #e74c3c;
    }

p.parsley-success {
    color: #468847;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
}

p.parsley-error {
    color: #b94a48;
    background-color: #f2dede;
    border: 1px solid #f2dede;
}

textarea {
    padding: 10px;
    vertical-align: top;
    width: 200px;
}

    textarea.parsley-error {
        background: #faedec;
        border: 1px solid #e85445;
    }

    textarea:focus {
        outline-style: solid;
        outline-width: 2px;
    }

.bad input {
    border: 1px solid #ce5454;
    box-shadow: 0 0 4px -2px #ce5454;
    position: relative;
    left: 0;
}

.bad select {
    border: 1px solid #ce5454;
    box-shadow: 0 0 4px -2px #ce5454;
    position: relative;
    left: 0;
}

.bad textarea {
    border: 1px solid #ce5454;
    box-shadow: 0 0 4px -2px #ce5454;
    position: relative;
    left: 0;
}

.item input {
    transition: 0.42s;
}

.item textarea {
    transition: 0.42s;
}

.item .alert {
    float: right;
    margin: 0 20px 0 0;
    padding: 3px 10px;
    color: #fff;
    border-radius: 3px 3px 4px 4px;
    background-color: #ce5454;
    max-width: 170px;
    white-space: pre;
    position: relative;
    right: -15px;
    opacity: 0;
    z-index: 1;
    transition: 0.15s ease-out;
}

    .item .alert::after {
        content: "";
        display: block;
        height: 0;
        width: 0;
        border-color: transparent transparent transparent #ce5454;
        border-style: solid;
        border-width: 11px 7px;
        position: absolute;
        right: -13px;
        top: 1px;
    }

.item.bad .alert {
    left: 0;
    opacity: 1;
}

.inl-bl {
    display: inline-block;
}

.well .markup {
    background: #fff;
    color: #777;
    position: relative;
    padding: 45px 15px 15px;
    margin: 15px 0 0;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    box-shadow: none;
}

    .well .markup::after {
        content: "Example";
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 12px;
        font-weight: bold;
        color: #bab8b8;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.autocomplete-suggestions {
    border: 1px solid #e7e7e7;
    background: #f4f4f4;
    cursor: default;
    overflow: auto;
}

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399ff;
        font-weight: bolder;
    }

.autocomplete-suggestion {
    padding: 2px 5px;
    font-size: 1.2em;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #ededed;
}

.btn-success {
    background: #26b99a;
    border: 1px solid #169f85;
}

    .btn-success:hover {
        background: #169f85;
    }

    .btn-success:focus {
        background: #169f85;
    }

    .btn-success:active {
        background: #169f85;
    }

    .btn-success.active {
        background: #169f85;
    }

.btn-chackbox {
    background: #fff;
    border: 1px solid #ccb377;
    display: flex;
    align-items: center;
    margin: 5px 0;
    border-radius: 6px;
}

    .btn-chackbox input {
        opacity: 0;
    }

    .btn-chackbox label {
        margin-right: 5px;
    }

    .btn-chackbox text {
        margin-right: 10px;
    }

    .btn-chackbox:hover,
    .btn-chackbox:focus,
    .btn-chackbox:active,
    .btn-chackbox.active,
    .open .dropdown-toggle.btn-success {
        background: #fff;
        box-shadow: none;
    }

    .btn-chackbox
    .glyphicon-white {
        color: #ceb578;
    }

.btn-dark {
    color: #ededed;
    background-color: #4b5f71;
    border-color: #2a3f54;
}

    .btn-dark:hover {
        color: #fff;
        background-color: #394d5f;
        border-color: #394d5f;
    }

    .btn-dark:focus {
        color: #fff;
        background-color: #394d5f;
        border-color: #394d5f;
    }

    .btn-dark:active {
        color: #fff;
        background-color: #394d5f;
        border-color: #394d5f;
    }

    .btn-dark.active {
        color: #fff;
        background-color: #394d5f;
        border-color: #394d5f;
    }

.btn-round {
    border-radius: 30px;
}

.btn_ {
    display: inline-block;
    padding: 3px 9px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f2f5f7;
    background-image: linear-gradient(to bottom, #ffffff, #e7e7e7);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e7e7e7 #e7e7e7 #bdbdbd;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    border: 1px solid #ccc;
    border-bottom-color: #b3b3b3;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bs-glyphicons-list {
    padding-left: 0;
    list-style: none;
}

.bs-glyphicons {
    margin: 0 -10px 20px;
    overflow: hidden;
}

    .bs-glyphicons li {
        float: right;
        width: 25%;
        height: 115px;
        padding: 10px;
        font-size: 10px;
        line-height: 1.4;
        text-align: center;
        background-color: #f9f9f9;
        border: 1px solid #fff;
    }

        .bs-glyphicons li:hover {
            color: #fff;
            background-color: #1abb9c;
        }

@media (min-width: 768px) {
    .bs-glyphicons {
        margin-right: 0;
        margin-left: 0;
    }

        .bs-glyphicons li {
            width: 12.5%;
            font-size: 12px;
        }
}

.bs-glyphicons .glyphicon {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 24px;
}

.bs-glyphicons .glyphicon-class {
    display: block;
    text-align: center;
    word-wrap: break-word;
}

.bs-glyphicons-list {
    padding-left: 0;
    list-style: none;
}

.tagsinput {
    border: 1px solid #ccc;
    background: #fff;
    padding: 6px 6px 0;
    width: 300px;
    overflow-y: auto;
}

    .tagsinput input {
        width: 80px;
        margin: 0;
        font-family: Open Sans, Almarai, sans-serif !important;
        font-size: 13px;
        border: 1px solid transparent;
        padding: 3px;
        background: transparent;
        color: #000;
        outline: 0;
    }

    .tagsinput div {
        display: block;
        float: right;
    }

    .tagsinput span.tag a {
        font-weight: bold;
        color: #82ad2b;
        text-decoration: none;
        font-size: 11px;
    }

.tags_clear {
    clear: both;
    width: 100%;
    height: 0;
}

.not_valid {
    background: #fbd8db !important;
    color: #90111a !important;
}

.timeline .block {
    margin: 0;
    border-right: 3px solid #eaeaea;
    overflow: visible;
    padding: 10px 15px;
    margin-right: 105px;
}

.timeline.widget {
    min-width: 0;
    max-width: inherit;
}

    .timeline.widget .block {
        margin-right: 5px;
    }

.timeline .tags {
    position: absolute;
    top: 15px;
    right: 0;
    width: 84px;
}

.timeline .tag {
    display: block;
    height: 30px;
    font-size: 13px;
    padding: 8px;
}

    .timeline .tag span {
        display: block;
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.timeline .byline {
    padding: 0.25em 0;
}

.timeline h2.title {
    position: relative;
    font-size: 16px;
    margin: 0;
}

    .timeline h2.title:before {
        content: "";
        position: absolute;
        right: -23px;
        top: 3px;
        display: block;
        width: 14px;
        height: 14px;
        border: 3px solid #d2d3d2;
        border-radius: 14px;
        background: #f9f9f9;
    }

.tag {
    line-height: 1;
    background: #1abb9c;
    color: #fff !important;
}

    .tag:after {
        content: " ";
        height: 30px;
        width: 0;
        position: absolute;
        right: 100%;
        top: 0;
        margin: 0;
        pointer-events: none;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-right: 11px solid #1abb9c;
    }

.byline {
    font-style: italic;
    font-size: 0.9375em;
    line-height: 1.3;
    color: #aaa;
}

.social-sidebar {
    float: right;
    background: #ededed;
    width: 22%;
}

.social-body {
    float: right;
    border: 1px solid #ccc;
    width: 78%;
}

.chat .status {
    float: left;
    margin: 16px 0 0 -16px;
    font-size: 14px;
    font-weight: bold;
    width: 12px;
    height: 12px;
    display: block;
    border: 2px solid #fff;
    z-index: 12312;
    border-radius: 50%;
}

    .chat .status.online {
        background: #1abb9c;
    }

    .chat .status.away {
        background: #f39c12;
    }

    .chat .status.offline {
        background: #ccc;
    }

.chat .media-body {
    padding-top: 5px;
}

.chat .thumb img {
    width: 27px;
    height: 27px;
    border-radius: 50%;
}

.chart {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

    .chart canvas {
        position: absolute;
        top: 0;
        left: 0;
    }

.percent {
    display: inline-block;
    line-height: 110px;
    z-index: 2;
    font-size: 18px;
}

    .percent:after {
        content: "%";
        margin-left: 0.1em;
        font-size: 0.8em;
    }

.angular {
    margin-top: 100px;
}

    .angular .chart {
        margin-top: 0;
    }

.widget {
    min-width: 250px;
    max-width: 310px;
}

    .widget .verticle_bars li .progress.vertical.progress_wide {
        width: 65%;
    }

.widget_tally_box .flex {
    display: -ms-flexbox;
    display: flex;
}

.widget_tally_box p {
    text-align: center;
}

.widget_tally_box span {
    text-align: center;
}

.widget_tally_box .name {
    text-align: center;
    margin: 25px;
}

.widget_tally_box .name_title {
    text-align: center;
    margin: 5px;
}

.widget_tally_box ul.legend {
    margin: 0;
}

    .widget_tally_box ul.legend p {
        text-align: left;
        display: inline-block;
        margin: 0;
    }

    .widget_tally_box ul.legend span {
        text-align: left;
    }

    .widget_tally_box ul.legend li .icon {
        font-size: 20px;
        float: left;
        width: 14px;
    }

    .widget_tally_box ul.legend li .name {
        font-size: 14px;
        margin: 5px 0 0 14px;
        text-overflow: ellipsis;
        float: left;
    }

.widget_tally_box ul.verticle_bars li {
    height: 140px;
    width: 23%;
}

.widget_tally_box .btn-group button {
    text-align: center;
    color: inherit;
    font-weight: 500;
    background-color: #f2f5f7;
    border: 1px solid #e7e7e7;
}

.pie_bg {
    border-bottom: 1px solid rgba(101, 204, 182, 0.16);
    padding-bottom: 15px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    padding-bottom: 10px;
    box-shadow: 0 4px 6px -6px #222;
}

.divider {
    border-bottom: 1px solid #ddd;
    margin: 10px;
}

.divider-dashed {
    border-top: 1px dashed #e6e9ed;
    background-color: #fff;
    height: 1px;
    margin: 10px 0;
}

.profile_title {
    background: #f5f7fa;
    border: 0;
    padding: 7px 0;
    display: -ms-flexbox;
    display: flex;
}

.pricing {
    background: #fff;
}

    .pricing .title {
        background: #1abb9c;
        height: 110px;
        color: #fff;
        padding: 15px 0 0;
        text-align: center;
    }

        .pricing .title h2 {
            text-transform: capitalize;
            font-size: 18px;
            border-radius: 5px 5px 0 0;
            margin: 0;
            font-weight: 400;
        }

        .pricing .title h1 {
            font-size: 30px;
            margin: 12px;
        }

        .pricing .title span {
            background: rgba(51, 51, 51, 0.28);
            padding: 2px 5px;
        }

.pricing_features {
    background: #fafafa;
    padding: 20px 15px;
    min-height: 230px;
    font-size: 13.5px;
}

    .pricing_features ul li {
        margin-top: 10px;
    }

.pricing_footer {
    padding: 10px 15px;
    background-color: #f2f5f7;
    border-top: 1px solid #ddd;
    text-align: center;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

    .pricing_footer p {
        font-size: 13px;
        padding: 10px 0 2px;
        display: block;
    }

.ui-ribbon-container {
    position: relative;
}

    .ui-ribbon-container .ui-ribbon-wrapper {
        position: absolute;
        overflow: hidden;
        width: 85px;
        height: 88px;
        top: -3px;
        left: -3px;
    }

    .ui-ribbon-container .ui-ribbon {
        position: relative;
        display: block;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        transform: rotate(-45deg);
        padding: 7px 0;
        right: -5px;
        top: 15px;
        width: 120px;
        line-height: 20px;
        background-color: #555;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

        .ui-ribbon-container .ui-ribbon:before {
            left: 0;
            bottom: -1px;
            right: 0;
            position: absolute;
            content: " ";
            line-height: 0;
            border-top: 2px solid #555;
            border-left: 2px solid transparent;
            border-right: 2px solid transparent;
        }

        .ui-ribbon-container .ui-ribbon:after {
            position: absolute;
            content: " ";
            line-height: 0;
            border-top: 2px solid #555;
            border-left: 2px solid transparent;
            border-right: 2px solid transparent;
        }

    .ui-ribbon-container.ui-ribbon-primary .ui-ribbon {
        background-color: #5b90bf;
    }

        .ui-ribbon-container.ui-ribbon-primary .ui-ribbon:after {
            border-top: 2px solid #5b90bf;
        }

        .ui-ribbon-container.ui-ribbon-primary .ui-ribbon:before {
            border-top: 2px solid #5b90bf;
        }

.thumbnail {
    height: 190px;
    overflow: hidden;
}

    .thumbnail .image {
        height: 120px;
        overflow: hidden;
    }

/** bootstrap-datetimepicker **/
.input-group.date .input-group-addon {
    border-radius: 4px 0 0 4px !important;
    background-color: #ffff !important;
}
/** /bootstrap-datetimepicker **/
.home-tiles-container {
    margin-top: 10px;
    margin-bottom: 15px;
    height: auto;
}

.home-tiles {
    /*border-radius: 40px;*/
    /*background: #fff;*/
    /*background: #efeee7;
    font-size: large;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 11px -6px #000;
    max-height: 251px;*/
    border-radius: 8px;
    background: #fff;
    padding: 25px 20px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    position: relative;
    align-items: center;
    transition: all 0.35s;
    box-sizing: border-box;
}

    .home-tiles:hover {
        transform: translateY(-0.25em);
    }

.home-tiles-count {
    color: #3f567a;
    font-size: 30px;
    font-weight: 700;
}

.caption {
    font-size: 14px;
    padding: 9px 5px;
    text-align: right;
    max-width: calc(100% - 70px);
}

    .caption p {
        margin-bottom: 0px;
        text-align: right !important;
    }

.view {
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e7e7e7;
    cursor: default;
}

    .view .mask {
        position: absolute;
        width: 100%;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .view .content {
        position: absolute;
        width: 100%;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .view img {
        display: block;
        position: relative;
    }

    .view .tools {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 3px;
        background: rgba(0, 0, 0, 0.35);
        margin: 43px 0 0;
    }

        .view .tools a {
            display: inline-block;
            color: #fff;
            font-size: 18px;
            font-weight: 400;
            padding: 0 4px;
        }

    .view p {
        font-family: Open Sans, Almarai, sans-serif !important;
        font-style: italic;
        font-size: 12px;
        position: relative;
        color: #fff;
        padding: 10px 20px 20px;
        text-align: center;
    }

    .view a.info {
        display: inline-block;
        text-decoration: none;
        padding: 7px 14px;
        background: #000;
        color: #fff;
        text-transform: uppercase;
        box-shadow: 0 0 1px #000;
    }

.view-first img {
    transition: all 0.2s linear;
}

.view-first .mask {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease-in-out;
}

.view-first .tools {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}

.view-first:hover img {
    transform: scale(1.1);
}

.view-first:hover .mask {
    opacity: 1;
}

.view-first:hover .tools {
    opacity: 1;
    transform: translateY(0px);
}

.view-first:hover p {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 0.1s;
}

.tabs-left {
    border-bottom: none;
    padding-top: 2px;
    border-right: 1px solid #f7f7f7;
}

    .tabs-left > li {
        float: none;
        margin-bottom: 2px;
        margin-right: -1px;
    }

        .tabs-left > li > a {
            border-radius: 4px 0 0 4px;
            margin-right: 0;
            display: block;
            background: #f7f7f7;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .tabs-left > li.active > a {
            border-bottom-color: #f7f7f7;
            border-right-color: transparent;
        }

            .tabs-left > li.active > a:hover {
                border-bottom-color: #f7f7f7;
                border-right-color: transparent;
            }

            .tabs-left > li.active > a:focus {
                border-bottom-color: #f7f7f7;
                border-right-color: transparent;
            }

.tabs-right {
    border-bottom: none;
    padding-top: 2px;
    border-left: 1px solid #f7f7f7;
}

    .tabs-right > li {
        float: none;
        margin-bottom: 2px;
        margin-left: -1px;
    }

        .tabs-right > li > a {
            border-radius: 0 4px 4px 0;
            margin-right: 0;
            background: #f7f7f7;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .tabs-right > li.active > a {
            border-bottom: 1px solid #f7f7f7;
            border-left-color: transparent;
        }

            .tabs-right > li.active > a:hover {
                border-bottom: 1px solid #f7f7f7;
                border-left-color: transparent;
            }

            .tabs-right > li.active > a:focus {
                border-bottom: 1px solid #f7f7f7;
                border-left-color: transparent;
            }

.sideways {
    margin-top: 50px;
    border: none;
    position: relative;
}

    .sideways > li {
        height: 20px;
        width: 120px;
        margin-bottom: 100px;
    }

        .sideways > li > a {
            border-bottom: 1px solid #ddd;
            border-right-color: transparent;
            text-align: center;
            border-radius: 4px 4px 0 0;
        }

        .sideways > li.active > a {
            border-bottom-color: transparent;
            border-right-color: #ddd;
            border-left-color: #ddd;
        }

            .sideways > li.active > a:hover {
                border-bottom-color: transparent;
                border-right-color: #ddd;
                border-left-color: #ddd;
            }

            .sideways > li.active > a:focus {
                border-bottom-color: transparent;
                border-right-color: #ddd;
                border-left-color: #ddd;
            }

    .sideways.tabs-left {
        left: -50px;
    }

        .sideways.tabs-left > li {
            transform: rotate(-90deg);
        }

    .sideways.tabs-right {
        right: -50px;
    }

        .sideways.tabs-right > li {
            transform: rotate(90deg);
        }

.morris-hover {
    position: absolute;
    z-index: 1000;
}

    .morris-hover.morris-default-style {
        padding: 6px;
        color: #666;
        background: rgba(243, 242, 243, 0.8);
        border: solid 2px rgba(195, 194, 196, 0.8);
        font-family: Open Sans, Almarai, sans-serif !important;
        font-size: 12px;
        text-align: center;
    }

        .morris-hover.morris-default-style .morris-hover-row-label {
            font-weight: bold;
            margin: 0.25em 0;
        }

        .morris-hover.morris-default-style .morris-hover-point {
            white-space: nowrap;
            margin: 0.1em 0;
        }

.price {
    font-size: 40px;
    font-weight: 400;
    color: #26b99a;
    margin: 0;
}

.prod_title {
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 5px;
    margin: 30px 0;
    font-size: 20px;
    font-weight: 400;
}

.prod_color li {
    margin: 0 10px;
}

    .prod_color li p {
        margin-bottom: 0;
    }

.prod_color .color {
    width: 25px;
    height: 25px;
    border: 2px solid rgba(51, 51, 51, 0.28) !important;
    padding: 2px;
    border-radius: 50px;
}

.product_price {
    margin: 20px 0;
    padding: 5px 10px;
    background-color: #fff;
    text-align: left;
    border: 2px dashed #dfdfdf;
}

.price-tax {
    font-size: 18px;
}

.product_social {
    margin: 20px 0;
}

    .product_social ul li a i {
        font-size: 35px;
    }

.login {
    background: #f7f7f7;
}

    .login .fa-paw {
        font-size: 26px;
    }

.login_wrapper {
    right: 0;
    margin: 0 auto;
    margin-top: 10%;
    max-width: 350px;
    position: relative;
}

.registration_form {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 21;
    opacity: 0;
    width: 100%;
}

.login_form {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 22;
}

.animate {
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

.login_box {
    padding: 20px;
    margin: auto;
}

.login_content {
    margin: 0 auto;
    padding: 25px 0 0;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    min-width: 280px;
}

    .login_content a {
        text-decoration: none;
    }

        .login_content a:hover {
            text-decoration: underline;
        }

    .login_content h1 {
        font: normal 25px Droid Sans, Helvetica, Arial, sans-serif;
        letter-spacing: -0.05em;
        line-height: 20px;
        margin: 10px 0 30px;
    }

        .login_content h1:before {
            content: "";
            height: 1px;
            position: absolute;
            top: 10px;
            width: 20%;
            background: #7e7e7e;
            background: linear-gradient(to left, #7e7e7e 0%, #ffffff 100%);
            left: 0;
        }

        .login_content h1:after {
            content: "";
            height: 1px;
            position: absolute;
            top: 10px;
            width: 20%;
            background: #7e7e7e;
            background: linear-gradient(to right, #7e7e7e 0%, #ffffff 100%);
            right: 0;
        }

    .login_content form {
        margin: 20px 0;
        position: relative;
    }

        .login_content form input[type="text"] {
            border-radius: 3px;
            box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
            border: 1px solid #c5c7cb;
            color: #777;
            margin: 0 0 20px;
            width: 100%;
        }

            .login_content form input[type="text"]:focus {
                box-shadow: 0 0 2px #a97aad inset;
                background-color: #fff;
                border: 1px solid #a878af;
                outline: none;
            }

        .login_content form input[type="email"] {
            border-radius: 3px;
            box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
            border: 1px solid #c5c7cb;
            color: #777;
            margin: 0 0 20px;
            width: 100%;
        }

            .login_content form input[type="email"]:focus {
                box-shadow: 0 0 2px #a97aad inset;
                background-color: #fff;
                border: 1px solid #a878af;
                outline: none;
            }

        .login_content form input[type="password"] {
            border-radius: 3px;
            box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
            border: 1px solid #c5c7cb;
            color: #777;
            margin: 0 0 20px;
            width: 100%;
        }

            .login_content form input[type="password"]:focus {
                box-shadow: 0 0 2px #a97aad inset;
                background-color: #fff;
                border: 1px solid #a878af;
                outline: none;
            }

        .login_content form input[type="submit"] {
            /*float: left;*/
            margin-left: 38px;
        }

        .login_content form div a {
            font-size: 12px;
            margin: 10px 0 0 15px;
        }

    .login_content .btn-default:hover {
        text-decoration: none;
    }

    .login_content div .reset_pass {
        margin-top: 13px !important;
        margin-right: 39px;
        float: left;
    }

#username {
    background-position: 10px 10px !important;
}

#password {
    background-position: 10px -53px !important;
}

.reset_pass {
    margin-top: 10px !important;
}

.separator {
    border-top: 1px solid #d3d6da;
    margin-top: 10px;
    padding-top: 10px;
}

.button {
    background: #f7f9fa;
    background: linear-gradient(to bottom, #f7f9fa 0%, #ededed 100%);
    filter: progid:dximagetransform.microsoft.gradient(startcolorstr='$color_white_lilac_approx', endcolorstr='$color_gallery_approx', gradienttype=0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #ccd0d7;
    padding: 15px 0;
}

    .button a {
        background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
        color: #7e7e7e;
        font-size: 17px;
        padding: 2px 0 2px 40px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .button a:hover {
            background-position: 0 -135px;
            color: #00aeef;
        }

header {
    width: 100%;
}

#nprogress .bar {
    background: #ceb578;
}

#nprogress .peg {
    box-shadow: 0 0 10px #ceb578, 0 0 5px #ceb578;
}

#nprogress .spinner-icon {
    border-top-color: #ceb578;
    border-left-color: #ceb578;
}

.editor-wrapper {
    min-height: 250px;
    background-color: #fff;
    border-collapse: separate;
    border: 1px solid #ccc;
    padding: 4px;
    box-sizing: content-box;
    box-shadow: rgba(0, 0, 0, 0.07451) 0 1px 1px 0 inset;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    overflow: scroll;
    outline: none;
}

.voiceBtn {
    width: 20px;
    color: transparent;
    background-color: transparent;
    transform: scale(2, 2);
    border: transparent;
    cursor: pointer;
    box-shadow: none;
}

div[data-role="editor-toolbar"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    min-height: 38px;
}

    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
        color: #73879c;
        padding-top: 5px;
    }

    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
        height: 36px;
    }

.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    min-height: 38px;
}

    .select2-container--default
    .select2-selection--multiple
    .select2-selection__rendered {
        padding-top: 3px;
    }

    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
        margin-top: 2px;
        border: none;
        border-radius: 0;
        padding: 3px 5px;
    }

    .select2-container--default
    .select2-selection--multiple
    .select2-selection__clear {
        margin-top: 2px;
        border: none;
        border-radius: 0;
        padding: 3px 5px;
    }

.select2-container--default.select2-container--focus
.select2-selection--multiple {
    border: 1px solid #ccc;
}

.switchery {
    width: 32px;
    height: 20px;
}

    .switchery > small {
        width: 20px;
        height: 20px;
    }

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.cropper .img-container {
    background-color: #f7f7f7;
    width: 100%;
    text-align: center;
    min-height: 200px;
    max-height: 516px;
    margin-bottom: 20px;
}

    .cropper .img-container > img {
        max-width: 100%;
    }

.cropper .img-preview {
    background-color: #f7f7f7;
    width: 100%;
    text-align: center;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

    .cropper .img-preview > img {
        max-width: 100%;
    }

.cropper .docs-preview {
    margin-right: -15px;
}

.cropper .preview-lg {
    width: 263px;
    height: 148px;
}

.cropper .preview-md {
    width: 139px;
    height: 78px;
}

.cropper .preview-sm {
    width: 69px;
    height: 39px;
}

.cropper .preview-xs {
    width: 35px;
    height: 20px;
    margin-right: 0;
}

.cropper .docs-tooltip {
    display: block;
    margin: -6px -12px;
    padding: 6px 12px;
}

    .cropper .docs-tooltip > .icon {
        margin: 0 -3px;
        vertical-align: top;
    }

.cropper .tooltip-inner {
    white-space: normal;
}

.cropper .btn-toggle {
    padding: 6px;
}

    .cropper .btn-toggle .tooltip-inner {
        white-space: nowrap;
    }

    .cropper .btn-toggle > .docs-tooltip {
        margin: -6px;
        padding: 6px;
    }

.cropper .docs-cropped .modal-body {
    text-align: center;
}

    .cropper .docs-cropped .modal-body > img {
        max-width: 100%;
    }

    .cropper .docs-cropped .modal-body > canvas {
        max-width: 100%;
    }

.cropper .docs-cropped canvas {
    max-width: 100%;
}

.cropper .docs-data > .input-group {
    margin-bottom: 10px;
}

    .cropper .docs-data > .input-group > label {
        min-width: 80px;
    }

    .cropper .docs-data > .input-group > span {
        min-width: 50px;
    }

.cropper .docs-buttons > .btn {
    margin-right: 5px;
    margin-bottom: 10px;
}

.cropper .docs-buttons > .btn-group {
    margin-right: 5px;
    margin-bottom: 10px;
}

.cropper .docs-buttons > .form-control {
    margin-right: 5px;
    margin-bottom: 10px;
}

.cropper .docs-toggles > .btn {
    margin-bottom: 10px;
}

.cropper .docs-toggles > .btn-group {
    margin-bottom: 10px;
}

.cropper .docs-toggles > .dropdown {
    margin-bottom: 10px;
}

.cropper .btn-upload .tooltip-inner {
    white-space: nowrap;
}

.cropper .docs-options .dropdown-menu {
    width: 100%;
}

    .cropper .docs-options .dropdown-menu > li {
        padding: 3px 20px;
    }

        .cropper .docs-options .dropdown-menu > li:hover {
            background-color: #f7f7f7;
        }

        .cropper .docs-options .dropdown-menu > li > label {
            display: block;
        }

.cropper .docs-diagram .modal-dialog {
    max-width: 352px;
}

@media (max-width: 400px) {
    .cropper .btn-group-crop {
        margin-right: -15px !important;
    }

        .cropper .btn-group-crop .docs-tooltip {
            margin-left: -5px;
            margin-right: -5px;
            padding-left: 5px;
            padding-right: 5px;
        }

        .cropper .btn-group-crop > .btn {
            padding-left: 5px;
            padding-right: 5px;
        }
}

.form_wizard .stepContainer {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0 solid #ccc;
    overflow-x: hidden;
}

.form_wizard .loader {
    display: none;
}

.form_wizard .msgBox {
    display: none;
}

.step_no {
    background: #2a3f54;
    color: #fff;
    background: #2a3f54;
    color: #fff;
}

.wizard_verticle .stepContainer {
    width: 80%;
    float: left;
    padding: 0 10px;
}

.wizard_verticle .wizard_content {
    width: 80%;
    float: left;
    padding-left: 20px;
}

.wizard_verticle ul.wizard_steps {
    display: table;
    list-style: none;
    position: relative;
    width: 20%;
    float: left;
    margin: 0 0 20px;
}

    .wizard_verticle ul.wizard_steps li {
        display: list-item;
        text-align: center;
    }

        .wizard_verticle ul.wizard_steps li a {
            height: 80px;
            display: block;
            position: relative;
            filter: alpha(opacity=100);
            opacity: 1;
            color: #666;
        }

            .wizard_verticle ul.wizard_steps li a:first-child {
                margin-top: 20px;
            }

            .wizard_verticle ul.wizard_steps li a:before {
                content: "";
                position: absolute;
                height: 100%;
                background: #ccc;
                top: 20px;
                width: 4px;
                z-index: 4;
                left: 49%;
            }

            .wizard_verticle ul.wizard_steps li a .step_no {
                width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 100px;
                display: block;
                margin: 0 auto 5px;
                font-size: 16px;
                text-align: center;
                position: relative;
                z-index: 5;
            }

            .wizard_verticle ul.wizard_steps li a.done:before {
                background: #1abb9c;
                color: #fff;
            }

            .wizard_verticle ul.wizard_steps li a.done .step_no {
                background: #1abb9c;
                color: #fff;
            }

            .wizard_verticle ul.wizard_steps li a.disabled .step_no {
                background: #ccc;
            }

            .wizard_verticle ul.wizard_steps li a.selected:before {
                background: #2a3f54;
                color: #fff;
            }

        .wizard_verticle ul.wizard_steps li:hover {
            display: block;
            position: relative;
            filter: alpha(opacity=100);
            opacity: 1;
            color: #666;
        }

        .wizard_verticle ul.wizard_steps li:first-child a:before {
            left: 49%;
        }

        .wizard_verticle ul.wizard_steps li:last-child a:before {
            left: 49%;
            left: auto;
            width: 0;
        }

.actionBar {
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 10px 5px;
    text-align: left;
    margin-top: 10px;
}

    .actionBar .buttonDisabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.65;
        filter: alpha(opacity=65);
        box-shadow: none;
    }

    .actionBar a {
        margin: 0 3px;
    }

.progress {
    border-radius: 0;
}

    .progress.progress_sm {
        border-radius: 0;
        margin-bottom: 18px;
        height: 10px !important;
    }

        .progress.progress_sm .progress-bar {
            height: 10px !important;
        }

    .progress.vertical.progress_wide {
        width: 35px;
    }

.progress-bar-info {
    background-color: #3498db;
}

.progress-bar-success {
    background-color: #26b99a;
}

.progress_summary .progress {
    margin: 5px 0 12px !important;
}

.progress_summary .row {
    margin-bottom: 5px;
}

    .progress_summary .row .col-xs-2 {
        padding: 0;
    }

.progress_summary p {
    margin-bottom: 3px;
    width: 100%;
}

.progress_summary .more_info span {
    text-align: right;
    float: right;
}

.progress_summary .data span {
    text-align: right;
    float: right;
}

.progress_title .left {
    float: left;
    text-align: left;
}

.progress_title .right {
    float: right;
    text-align: right;
    font-weight: 300;
}

.alert-success {
    color: #fff;
    background-color: rgba(38, 185, 154, 0.88);
    border-color: rgba(38, 185, 154, 0.88);
}

.alert-info {
    color: #fff;
    background-color: rgba(52, 152, 219, 0.88);
    border-color: rgba(52, 152, 219, 0.88);
}

.alert-warning {
    color: #fff;
    background-color: rgba(243, 156, 18, 0.88);
    border-color: rgba(243, 156, 18, 0.88);
}

.alert-danger {
    color: #fff;
    background-color: rgba(231, 76, 60, 0.88);
    border-color: rgba(231, 76, 60, 0.88);
}

.alert-error {
    color: #fff;
    background-color: rgba(231, 76, 60, 0.88);
    border-color: rgba(231, 76, 60, 0.88);
}

.alert-dark {
    color: #fff;
    background-color: rgba(52, 73, 94, 0.88);
    border-color: rgba(52, 73, 94, 0.88);
}

.custom-notifications {
    position: fixed;
    margin: 15px;
    left: 0;
    float: right;
    width: 400px;
    z-index: 4000;
    bottom: 0;
}

.notifications li {
    float: right;
    margin: 3px;
    width: 36px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

    .notifications li:last-child {
        margin-left: 0;
    }

.notifications a {
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 9px 8px;
}

.tabbed_notifications .text {
    padding: 5px 15px;
    height: 140px;
    border-radius: 7px;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3);
}

.tabbed_notifications h2 {
    font-weight: bold;
    text-transform: uppercase;
    width: 80%;
    float: left;
    height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

.tabbed_notifications .close {
    padding: 5px;
    color: #ededed;
    float: right;
    opacity: 1;
}

.tabbed_notifications div p {
    display: inline-block;
}

.fc-state-default {
    background: #f2f5f7;
    color: #73879c;
}

.fc-state-down {
    color: #333;
    background: #ccc;
}

.fc-state-active {
    color: #333;
    background: #ccc;
}

.dropzone {
    min-height: 300px;
    border: 1px solid #e5e5e5;
}

.img-circle.profile_img {
    width: 70%;
    background: #fff;
    margin-right: 15%;
    z-index: 1000;
    position: inherit;
    margin-top: 20px;
    border: 1px solid rgba(52, 73, 94, 0.44);
    padding: 4px;
}

.profile.img_2 {
    text-align: center;
}

    .profile.img_2 .profile_pic {
        width: 100%;
    }

        .profile.img_2 .profile_pic .img-circle.profile_img {
            width: 50%;
            margin: 10px 0 0;
        }

    .profile.img_2 .profile_info {
        padding: 15px 10px 0;
        width: 100%;
        margin-bottom: 10px;
        float: left;
    }

.active a span.fa {
    text-align: left !important;
    margin-left: 4px;
}

.main_container .top_nav {
    display: block;
    margin-right: 0;
    position: fixed;
    width: 100%;
    z-index: 12;
    box-shadow: #ccc -1px 1px 8px -3px;
}

.grid_slider .col-md-6 {
    padding: 0 40px;
}

.bs-docs-sidebar .nav > li > a {
    display: block;
    padding: 4px 6px;
}

.footer_fixed footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

article.media {
    width: 100%;
}

.pagination.pagination-split li {
    display: inline-block;
    margin-right: 3px;
}

    .pagination.pagination-split li a {
        border-radius: 4px;
        color: #768399;
    }

.degrees:after {
    content: "o";
    position: relative;
    top: -12px;
    font-size: 13px;
    font-weight: 300;
}

.daily-weather .day {
    font-size: 14px;
    border-top: 2px solid rgba(115, 135, 156, 0.36);
    text-align: center;
    border-bottom: 2px solid rgba(115, 135, 156, 0.36);
    padding: 5px 0;
}

.weather-days .col-sm-2 {
    overflow: hidden;
    width: 16.66666667%;
}

@media (max-width: 768px) {
    .weather-days .col-sm-2 {
        float: right;
    }
}

.weather .row {
    margin-bottom: 0;
}

.top .dataTables_info {
    float: none;
}

tfoot input {
    margin: 0.5em 0;
    width: 100%;
    color: #444;
}

    tfoot input.search_init {
        color: #999;
    }

.example_alt_pagination div.dataTables_info {
    width: 40%;
}

.info-number .badge {
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    padding: 2px 6px;
    position: absolute;
    right: 2px;
    top: 8px;
}

h5.graph_title {
    text-align: left;
    margin-left: 10px;
}

    h5.graph_title i {
        margin-right: 10px;
        font-size: 17px;
    }

.tile_info a {
    text-overflow: ellipsis;
}

.user-profile img {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    margin-left: 10px;
}

.event .media-body p {
    margin-bottom: 0;
}

.event .media-body a.title {
    font-weight: bold;
}

h4.graph_title {
    margin: 7px;
    text-align: center;
}

.fontawesome-icon-list .fa-hover a {
    display: block;
    line-height: 32px;
    height: 32px;
    padding-left: 10px;
    border-radius: 4px;
    direction: ltr;
}

    .fontawesome-icon-list .fa-hover a:hover {
        background-color: #ddd;
        color: #fff;
        text-decoration: none;
    }

        .fontawesome-icon-list .fa-hover a:hover .fa {
            font-size: 28px;
            vertical-align: -6px;
        }

    .fontawesome-icon-list .fa-hover a .fa {
        font-size: 16px;
        display: inline-block;
        text-align: right;
        margin-right: 10px;
    }

.tile_head h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

.modal-footer .btn + .btn {
    margin-bottom: 5px;
    margin-right: 5px;
}

.btn-group-vertical .btn {
    margin-bottom: 0;
    margin-right: 0;
}

.mail_heading h4 {
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 20px;
}

.editor.btn-toolbar {
    zoom: 1;
    background: #f7f7f7;
    margin: 5px 2px;
    padding: 3px 0;
    border: 1px solid #efefef;
}

input.parsley-error {
    background: #faedec;
    border: 1px solid #e85445;
}

select.parsley-error {
    background: #faedec;
    border: 1px solid #e85445;
}

.open .dropdown-toggle.btn-success {
    background: #169f85;
}

.open .dropdown-toggle.btn-dark {
    color: #fff;
    background-color: #394d5f;
    border-color: #394d5f;
}

.thumb img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.tasks li {
    border-bottom: 1px dotted #e7e7e7;
    padding: 8px 0;
}

img.avatar {
    height: 32px;
    width: 32px;
    float: left;
    display: inline-block;
    border-radius: 2px;
    padding: 2px;
    background: #f7f7f7;
    border: 1px solid #e7e7e7;
}

.project_progress .progress {
    margin-bottom: 3px !important;
    margin-top: 5px;
}

.projects .list-inline {
    margin: 0;
}

.project_detail p {
    margin-bottom: 10px;
}

    .project_detail p.title {
        font-weight: bold;
        margin-bottom: 0;
    }

.avatar img {
    border-radius: 50%;
    max-width: 45px;
}

.mask.no-caption .tools {
    margin: 90px 0 0;
}

.product-image img {
    width: 90%;
}

.prod_size li {
    padding: 0;
}

.product_gallery a {
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    border: 1px solid #e5e5e5;
}

    .product_gallery a img {
        width: 100%;
        margin-top: 15px;
    }

#signup:target ~ .login_wrapper .registration_form {
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: 0.1s;
}

#signup:target ~ .login_wrapper .login_form {
    animation-name: fadeOutLeft;
}

#signin:target ~ .login_wrapper .login_form {
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: 0.1s;
}

#signin:target ~ .login_wrapper .registration_form {
    animation-name: fadeOutLeft;
}

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

form:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#content form .submit {
    float: left;
    margin-left: 38px;
}

.wizard_horizontal ul.wizard_steps {
    display: table;
    list-style: none;
    position: relative;
    width: 100%;
    margin: 0 0 20px;
}

    .wizard_horizontal ul.wizard_steps li {
        display: table-cell;
        text-align: center;
    }

        .wizard_horizontal ul.wizard_steps li a {
            display: block;
            position: relative;
            filter: alpha(opacity=100);
            opacity: 1;
            color: #666;
        }

            .wizard_horizontal ul.wizard_steps li a:before {
                content: "";
                position: absolute;
                height: 4px;
                background: #ccc;
                top: 20px;
                width: 100%;
                z-index: 4;
                right: 0;
            }

            .wizard_horizontal ul.wizard_steps li a .step_no {
                width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 100px;
                display: block;
                margin: 0 auto 5px;
                font-size: 16px;
                text-align: center;
                position: relative;
                z-index: 5;
            }

            .wizard_horizontal ul.wizard_steps li a.done:before {
                background: #1abb9c;
                color: #fff;
            }

            .wizard_horizontal ul.wizard_steps li a.done .step_no {
                background: #1abb9c;
                color: #fff;
            }

            .wizard_horizontal ul.wizard_steps li a.disabled .step_no {
                background: #ccc;
            }

            .wizard_horizontal ul.wizard_steps li a.selected:before {
                background: #2a3f54;
                color: #fff;
            }

        .wizard_horizontal ul.wizard_steps li:hover {
            display: block;
            position: relative;
            filter: alpha(opacity=100);
            opacity: 1;
            color: #666;
        }

        .wizard_horizontal ul.wizard_steps li:first-child a:before {
            right: 50%;
        }

        .wizard_horizontal ul.wizard_steps li:last-child a:before {
            left: 50%;
            width: 50%;
            right: auto;
        }

/** rtl pnotify **/
.ui-pnotify {
    left: 35px !important;
    right: auto !important;
}

.ui-pnotify-icon,
.ui-pnotify-icon span {
    float: right;
    margin-left: 0.2em;
}

.ui-pnotify-closer,
.ui-pnotify-sticker {
    float: left;
    margin-right: 0.2em;
}

.ui-pnotify.dark .ui-pnotify-container {
    color: #ededed;
    background-color: rgba(52, 73, 94, 0.88);
    border-color: rgba(52, 73, 94, 0.88);
}

/** New Styles **/
.colorpicker {
    right: inherit;
}

.jqvmap-zoomin,
.jqvmap-zoomout {
    min-width: 10px;
    min-height: 10px;
    width: auto;
    height: auto;
}

.fc .fc-button-group > * {
    float: right;
}

.fc-state-default.fc-prev-button,
.fc-state-default.fc-next-button {
    border-top-left-radius: initial;
    border-bottom-left-radius: initial;
    border-top-right-radius: initial;
    border-bottom-right-radius: initial;
}

.fc-state-default.fc-corner-left {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.fc-state-default.fc-corner-right {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

div#graph_donut svg text {
    font-family: Open Sans, Almarai, sans-serif !important;
}

.login-text {
    85px max-width: 100% !important;
    border-left-color: #2e3f52 !important;
    border-left-width: 10px !important;
    border-radius: 6px;
}

/* Home Notification Count */
.dashboard-home-report-count {
    border-radius: 50%;
    width: 85px;
    height: 60px;
    /* background-color: #44c7ea; */
    /* border: 2px solid #fff;*/
    /* box-shadow: 1px 1px 11px -6px #000;*/
    color: white;
    text-align: center;
    font-size: 40px;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgb(46 63 82 / 20%) 1px 1px 2px 1px;
    border: 0;
    border-radius: 8px;
    margin-left: 10px;
}

.home_dash .dashboard-home-report-count {
    width: 60px;
    height: 60px;
}

.home-tiles-container:nth-child(4n + 1) .dashboard-home-report-count {
    background-color: #44c7ea;
}

.home-tiles-container:nth-child(4n + 2) .dashboard-home-report-count {
    background-color: #75ca9f;
}

.home-tiles-container:nth-child(4n + 3) .dashboard-home-report-count {
    background-color: #9999cc;
}

.home-tiles-container:nth-child(4n + 4) .dashboard-home-report-count {
    background-color: #ae841f;
}
/*For blue button in generate report*/
.WordReport {
    border: 1px solid #3c68ca !important;
    background-color: #4778e6 !important;
}

/*For therapist form table column coount*/
.TableTotalColumn {
    background-color: #e2dfd7 !important;
    color: #337ab7;
    font-weight: 500;
    font-size: 16px;
}

.TotalGroupValue {
    color: #0a9e1d;
    font-size: 16px;
}

.TotalOutOfGroupValue {
    font-size: 16px;
}

.Typical {
    color: white !important;
    text-align: center !important;
    background-color: #0a9e1d !important;
}

.Probable {
    color: white !important;
    text-align: center !important;
    background-color: #d07d4c !important;
}

.Difinite {
    color: white !important;
    text-align: center !important;
    background-color: #d9534f !important;
}

.CountLabel {
    float: right;
}

.countLabelText {
    padding-right: 10px;
}

/*For scroll option for th e div*/
.ScrollDiv {
    overflow: auto !important;
    height: 500px !important;
}

/*Blink Class*/
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.leftNav {
    float: right;
    text-align: right;
}

.rightNav {
    float: left;
    text-align: left;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
/* Headings */
h2 {
    margin: 5px 0 6px;
    float: left;
    display: block;
    text-overflow: ellipsis;
    font-size: 20px;
    color: #000;
}

h3 {
    margin: 5px 0 6px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 18px;
    color: #000 !important;
}
/* Home Map */
#StudentsLocationMap {
    width: 100%;
    margin: 0 0 0px 0;
}

.student-location-map {
    margin-bottom: 10px;
}

    .student-location-map .x_title {
        padding: 25px 20px;
        padding-bottom: 20px;
        margin: 0;
    }

    .student-location-map .x_content {
        padding: 0;
        margin: 0;
    }

    .student-location-map .x_panel {
        background: #fff;
        padding: 0;
        margin-top: 0;
        border-radius: 8px;
        box-shadow: 1px 1px 7px -7px #2e3f52;
        overflow: hidden;
    }
/* nav bar Profile menu */
.nav_menu {
    height: 65px;
    padding-right: 20px;
}

.navbar-right {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.session-schedular-icons {
    display: flex;
    /* height: 100%; */
    margin-left: 15px;
    margin-right: inherit !important;
    gap: 5px;
}


    .session-schedular-icons i {
        font-size: 15px;
        color: #8598ad;
    }

    .session-schedular-icons .dropdownwraper {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        cursor: pointer;
        text-transform: none !important;
        transition: all 0.35s;
        position: relative;
    }

        .session-schedular-icons .dropdownwraper:hover {
            /* border-top: 5px solid #ae841f;*/
            background: #f5f6fa;
            transform: translateY(-0.05em);
        }


        .session-schedular-icons .dropdownwraper a {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 0 15px;
        }

.header_top .navbar-right li.h-100:first-child {
    margin-left: 20px;
}

.navbar-right .user-profile {
    color: #ae841f !important;
    font-size: 16px;
    background: #fff;
    height: 100%;
}

.user-profile:hover,
.user-profile:focus,
.user-profile:active {
    background: #fff !important;
}

.navbar-right .fa-angle-down {
    color: #b1b0b1;
    padding-right: 10px;
}

/*.navbar-right li:last-child {
    border-right: 1px solid #f3f3f3;
}*/

.navbar-right img {
    border-radius: 50%;
    border: 0 solid #ccc;
    width: 40px;
    height: 40px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

    .nav-container .nav-left-section {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 20px;
    }

@media(max-width:767px) {
    .nav-container .nav-left-section {
        padding-left: 5px;
    }
}

.nav-container .nav-left-section .nav.toggle {
    display: none;
}

@media(max-width:992px) {
    .nav-container .nav-left-section .nav.toggle {
        display: block;
    }
}

.nav-container .nav-left-section .mainlogo {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

.navbar-nav .open .dropdown-menu {
    left: 0;
    border: none !important;
    background: #fff;
    width: 100%;
}

.dropdown-usermenu li {
    padding: 10px 0;
    border: none;
}

/* Login Screen */
.login_form {
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 500px;
    max-width: 100%;
    padding: 20px;
    border-radius: 20px;
}

.login-text {
    color: #e2e2e2;
    border: 1px solid #e2e2e2;
    border-left: 5px solid #5a6e7f;
}

.login_form .submit {
    width: 270px;
    background: #ceb578;
    border: none;
    border-radius: 5px;
}

    .login_form .submit:active,
    .login_form .submit:focus {
        background: #b69647;
    }

.login_form #loginForm {
    text-align: center;
}

.login_form .form-group {
    text-align: left;
}

/* Charts & Notification Tab */
.notification-tile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

.notification-tile-desc {
    display: flex;
    align-items: center;
    width: 100%;
    color: black;
    height: 90px;
    border-radius: 0 8px 8px 0;
    padding: 15px;
    border-right: 8px solid rgba(0,0,0,0.2);
}

.notification-tile-count {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    font-weight: 700;
    height: 90px;
    color: #fff;
    padding: 15px;
    border-radius: 8px 0 0 8px;
    min-width: 130px;
    justify-content: center;
}


@media(max-width:767px) {


    .notification-tile-count {
        display: flex;
        align-items: center;
        font-size: 25px;
        font-weight: 700;
        height: 90px;
        color: #fff;
        padding: 15px;
        border-radius: 0 8px 8px 0;
        min-width: 100px;
        justify-content: center;
    }
}


.notification-tile:nth-child(3n + 1) {
    background: #d4fbe9;
}

    .notification-tile:nth-child(3n + 1) .notification-tile-count {
        background: #5ec394;
    }

.notification-tile:nth-child(3n + 2) {
    background: #e8efff;
}

    .notification-tile:nth-child(3n + 2) .notification-tile-count {
        background: #b9cef9;
    }

.notification-tile:nth-child(3n + 3) {
    background: rgb(98 192 239 / 24%);
}

    .notification-tile:nth-child(3n + 3) .notification-tile-count {
        background: #62c0ef;
    }

/* Student list */
.student-list {
    background: #fff;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

    .student-list .component-title {
        color: #203459;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        padding-bottom: 10px;
        font-size: 16px;
    }

        .student-list .component-title .fa {
            color: #8598ad;
        }

    .student-list .student-list-item {
        display: flex;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #ccd2dd;
    }

        .student-list .student-list-item img {
            border-radius: 50%;
            width: 55px;
            height: auto;
            border: 3px solid #203459;
        }

    .student-list .student-list-item-details {
        margin-right: 10px;
    }

        .student-list .student-list-item-details .student-list-item-name {
            color: #8598ad;
            font-size: 14px;
            text-transform: uppercase;
        }

.student-list-item-details .student-report {
    color: #ae841f;
    font-size: 14px;
}

.student-list-item-details .fa {
    margin-left: 10px;
}
/* Table Styling */

table.dataTable.no-footer,
table.display thead,
table,
thead,
tbody,
tfoot,
td,
.dataTables_scrollBody {
    border: none !important;
}

table {
    color: #2e3f52;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #e0e1e2 !important;
}

th {
    background: #ceb578;
    color: #fff;
    text-align: center;
    font-weight: 700;
    border: none !important;
    border-left: 1px solid #fff !important;
    vertical-align: middle !important;
}

    th[aria-label="Reports"] {
        background: #5a6e7f;
    }

    th[aria-label="IEP Plans Count: activate to sort column ascending"] {
        background: #ceb578;
    }

    th[aria-label="Behaviors Plan Count: activate to sort column ascending"] {
        background: #9999cc;
    }

    th[aria-label="Pre Note Count: activate to sort column ascending"] {
        background: #75ca9f;
    }

td {
    border: 1px solid #e0e1e2 !important;
    background-color: #fff;
    padding: 5px 8px !important;
    vertical-align: middle !important;
    color: #2e3f52;
    min-width: 80px;
}


.dataTables_info {
    font-size: 12px !important;
    color: #2e3f52 !important;
}

.TimeSheet-head,
.TimeSheet-colHead {
    background-color: #2a3f54;
    color: #fff;
}

#StudentExceptionTbl {
    margin: 5px 0;
}

.table-responsive {
    border: none !important;
    margin: 10px 0;
    background: #fff;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
}

.summaryTable {
    background: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    top: 38%;
    left: 7px;
    height: 14px;
    width: 14px;
    display: block;
    position: absolute;
    color: white;
    /* border: 2px solid white; */
    border-radius: 50%;
    /* box-shadow: 0 0 3px #444; */
    box-sizing: content-box;
    text-align: center;
    font-family: Open Sans, Almarai, sans-serif !important;
    line-height: 14px;
    content: "+";
    background-color: #ceb578;
}
/* Table Buttons */
.btn_pre-notes-app b,
.btn_behavious-plan b,
.btn_iepplan b {
    color: #fff;
}

    .btn_pre-notes-app b:hover,
    .btn_behavious-plan b:hover,
    .btn_iepplan b:hover {
        color: #2e3f52;
        text-decoration: none;
    }

.btn_pre-notes-app,
.btn_behavious-plan,
.btn_iepplan {
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
}

.btn_pre-notes-app {
    background: #75ca9f;
}

.btn_behavious-plan {
    background: #9999cc;
}

.btn_iepplan {
    background: #ceb578;
}

.btn-edit {
    border: none;
    padding: 10px 20px;
    background: #2e3f52;
    color: #fff;
    border-radius: 4px;
}

    .btn-edit:hover,
    .btn-edit:active,
    .btn-edit:focus {
        background: #2e3f52;
        color: #fff;
    }

.btn-delete {
    border: none;
    padding: 10px 20px;
    background: #bb1d1d;
    color: #fff;
    border-radius: 4px; /*
    margin: 0 !important;*/
}

    .btn-delete:hover,
    .btn-delete:active,
    .btn-delete:focus {
        background: #bb1d1d;
        color: #fff;
    }

.btn-success-zho {
    color: #fff !important;
    margin: 5px 10px;
}

/* Table Filters */

.std-datatable-filter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0px;
}

    .std-datatable-filter select {
        color: #2e3f52;
    }

    .std-datatable-filter label {
        font-size: 16px;
        padding: 0 5px !important;
    }

.dataTables_filter label {
    font-size: 16px !important;
    color: #2e3f52 !important;
}

.dataTables_length label {
    font-size: 16px !important;
    color: #2e3f52 !important;
    display: flex;
    align-items: center;
}

    .dataTables_length label select {
        margin: 0 5px;
        height: 30px !important;
        padding: 0 6px;
    }

.dataTables_filter input {
    font-size: 16px !important;
    color: #2e3f52 !important;
    height: 30px !important;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.dt-buttons {
    /*  display: inline-flex;*/
    /*  margin-top: 10px;*/
    margin-bottom: 8px;
    /*  float: left;*/
}

.dataTables_length,
.dataTables_filter {
    margin-bottom: 5px;
}

@media (max-width: 575.98px) {
    /*  .dt-buttons {
        flex-direction: column;
    }

    .dataTables_length,
    .dataTables_filter {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .dataTables_filter {
        width: 100% !important;
    }*/
}

@media (max-width: 1399.98px) {
    .dataTables_paginate,
    .dataTables_info {
        width: auto;
    }
}

.dt-button {
    border: 1px solid #e2e2e2 !important;
    padding: 5px 10px !important;
    border-radius: 6px;
    margin: 2px;
}

.dt-col-report img {
    width: 25px;
}

/* form field style */
#centerMngForm2 .radio label {
    padding-right: 0 !important;
}

input[type="radio"]:checked + .label-text:before {
    color: #ceb578 !important;
}

input,
select {
    border: 1px solid #ccc;
    color: #707070;
}

    select option {
        border-radius: 0
    }

label {
    color: #121212 !important;
    font-weight: normal;
}

.form-group label {
    line-height: 1;
}

.customCheckbox {
    display: flex;
    align-items: center;
}

    .customCheckbox span {
        margin-right: 10px;
    }

/* Side Nav Bar Small */

/*.nav-sm li.active > a {
    background: #3e5367;
    margin: 0;
    padding: 0;
}

.nav-sm li li.current-page a {
    color: rgb(206 181 120);
}*/
/* Side Nav Bar Large */
.nav-md .side-menu > li > a {
    margin: 0;
    padding: 0px;
    display: flex;
}
/*
    .nav-md .side-menu > li > a:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: rgb(0 0 0 / 10%);
        position: absolute;
        top: 100%;
        left: 0;
    }*/

.nav-md .side-menu > li:last-child > a:after {
    content: none;
}

.nav-md .side-menu > li.active > a:after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
}

/*.nav-sm .side-menu > li > a:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgb(0 0 0 / 10%);
    position: absolute;
    top: 100%;
    left: 0;
}*/
/* Login Footer */
.footer-login {
    width: 100% !important;
    margin-left: 0 !important;
    left: 0;
    padding: 0 40px;
}

#left-login-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Tiles Slider */
.mySwiper .carousel-control {
    background: none;
}

.mySwiper .swiper-button-next svg {
    width: 20px;
    height: 75%;
}

.mySwiper .swiper-button-prev {
    display: block;
    background: none;
    background-image: none;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0.2;
}

.mySwiper .swiper-button-next {
    height: 100%;
    width: 60px;
    top: 25px;
    left: 0;
    background: -moz-linear-gradient( left, rgba(245, 246, 250, 1) 26%, rgba(153, 153, 153, 0.01) 99%, rgba(153, 153, 153, 0) 100% ); /* FF3.6-15 */
    background: -webkit-linear-gradient( left, rgba(245, 246, 250, 1) 26%, rgba(153, 153, 153, 0.01) 99%, rgba(153, 153, 153, 0) 100% ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient( to right, rgba(245, 246, 250, 1) 26%, rgba(153, 153, 153, 0.01) 99%, rgba(153, 153, 153, 0) 100% ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6fa', endColorstr='#00999999',GradientType=1 ); /* IE6-9 */
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}
/* user profile menu */
.user-profile.dropdown-toggle {
    display: flex;
    align-items: center;
}

.user-profile-container {
    line-height: 1;
}

.user-profile-designation {
    color: #666666;
    font-size: 14px;
}

/* Session Scheduler */
.nav.navbar-nav.navbar-right {
    position: relative;
}

.session-schedular-heading {
    position: absolute;
    top: 0;
    right: 0;
}

/* Notification List */

.notification-list {
    margin-top: 10px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 1px 1px 11px -6px #000;
}

    .notification-list .x_panel {
        background: #fff;
    }

    .notification-list .panel_toolbox {
        min-width: 0;
    }

    .notification-list .component-title h2 {
        color: #203459;
        font-size: 16px;
    }

    .notification-list .component-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        padding-bottom: 10px;
    }

        .notification-list .component-title .fa {
            color: #8598ad;
        }

    .notification-list .tab-content h2 {
        float: none;
    }

        .notification-list .tab-content h2 a {
            text-overflow: ellipsis;
            overflow: hidden;
            display: block;
        }
/* Pagination  */
.dataTables_paginate a {
    background: #ffffff !important;
    padding: 5px 10px !important;
    color: #2e3f52 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px;
    margin: 5px 5px 0 5px
}

    .dataTables_paginate a:last-child {
        margin-right: 0;
    }

    .dataTables_paginate a:hover {
        color: #fff !important;
        background: #ceb578 !important;
        border-color: #997c35 !important;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background: #ceb578 !important;
    border-color: #997c35 !important;
}

/* charts */
/* charts */
.home-chart {
    margin-bottom: 15px;
    padding: 20px;
    background: #fff;
    margin-top: 0;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

/* Media Queries */
@media (max-width: 575.98px) {
    .user-profile-name,
    .user-profile-designation {
        display: none;
    }

    #left-login-footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        #left-login-footer span {
            text-align: center;
        }
}

@media (max-width: 768px) {
    .nav-logos {
        display: none;
    }
}

/* Student List EDU */

.std-list-tiles {
    padding: 15px;
}

/* Student Header */
.Stdheader .img-circle {
    border-radius: 50%;
    width: 150px;
    border: 5px solid #fff;
    height: 150px;
}

/* Student Oberservation */
/*.std-observation .x_panel {
    background: #fff;
}*/

.std-observation .std-observation-container {
    border-radius: 25px;
}

.btn-preNote {
    background: #5a6e7f;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}

    .btn-preNote:hover,
    .btn-preNote:active,
    .btn-preNote:focus {
        background: #5a6e7f !important;
        color: #fff !important;
    }

    .btn-preNote i {
        margin-right: 5px;
    }

.std-observation-container .dataTable {
    padding: 0;
}

/* Display Student Location */

.displayStudentLocation {
    padding-top: 80px;
}

.displayStudentLocation {
    margin-top: 20px;
}

    .displayStudentLocation .x_panel {
        margin: 0;
        padding: 0;
    }

    .displayStudentLocation .student-location-map {
        background: #fff;
        padding: 20px;
        margin-top: 0;
        border-radius: 8px;
        box-shadow: 1px 1px 7px -7px #2e3f52;
    }

.student-location-map h2 {
    font-size: 20px;
    color: #000;
}

.displayStudentLocation .student-dt {
    padding: 30px 10px;
}

/* Swiper Slider */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.student-list .student-list-item {
    margin-bottom: 0 !important;
    height: auto !important;
}

/* Buttons */

.btn-std-search {
    background: #ceb578;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
}

    .btn-std-search:hover,
    .btn-std-search:active,
    .btn-std-search:focus {
        background: #b39c65 !important;
        color: #fff !important;
    }

.btn-std-clear {
    background: #1c2c42;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
}

    .btn-std-clear:hover,
    .btn-std-clear:active,
    .btn-std-clear:focus {
        background: #172436 !important;
    }

.btn-student-getDirection {
    background: #1c2c42;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
}

    .btn-student-getDirection:hover,
    .btn-student-getDirection:active,
    .btn-student-getDirection:focus {
        background: #172436 !important;
        color: #fff !important;
    }

.btn-std-exception-save,
.btn-std-addcirriculam-update {
    background: #ceb578;
    color: #fff;
    border: none;
    padding: 10px 50px;
    margin: 0;
}

.custom_btn-std-exception-save {
    margin: 20px 20px 0 20px;
}

.btn-std-exception-save:hover,
.btn-std-exception-save:active,
.btn-std-exception-save:focus,
.btn-std-addcirriculam-update:hover,
.btn-std-addcirriculam-update:active,
.btn-std-addcirriculam-update:focus {
    background: #ceb578;
    color: #fff !important;
}

.btn-dataTable-submit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .btn-dataTable-submit button {
        margin: 10px;
    }

/* High School University */

.card-header {
    margin: 10px 0;
    padding: 0px;
}

#highschoolform .img-circle {
    border-radius: 50%;
    width: 150px;
    border: 5px solid #fff;
    height: 150px;
}

/* Session Schedular */

.fc-view-container .fc-cell-text span {
    background: #2e3f52 !important;
}

.fc-view-container .fc-timeline-event,
.fc-view-container .fc-time-grid-event,
.fc-view-container .fc-day-grid-event {
    background: #ceb578 !important;
    border-color: #ceb578 !important;
    padding: 5px;
}

.fc-view-container .fc-list-item-title {
    text-align: left;
}

.fc-view-container .fc-list-heading > td.fc-widget-header {
    background: #eee !important;
}

.fc-view-container .fc-list-table {
    margin: 0 !important;
}

.fc-event-dot {
    background: #ceb578 !important;
    border-color: #ceb578 !important;
}

.fc-view-container .fc-list-table td {
    border: none !important;
}

.fc-view-container .fc-list-table th,
.fc-view-container .fc-list-table tr {
    border: 1px solid #ddd !important;
}

.fc-view-container table {
    margin: 0;
}

.DashBoardFilterHead {
    background-color: none;
    margin-bottom: 0;
    border: none;
}

/* Student Information */

.std-disability-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .std-disability-info .container {
        background: #fff;
        border-radius: 50px;
        margin: 10px;
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .std-disability-info i {
        display: flex;
        align-items: center;
        justify-content: center;
        background: yellow;
        color: #fff;
        padding: 30px;
        font-size: 30px;
        font-weight: 600;
        margin: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid #000;
        border: 2px solid #fff;
        box-shadow: 1px 1px 11px -6px #000;
        color: white;
    }

    .std-disability-info label {
        font-size: 16px;
        font-weight: 700;
    }

    .std-disability-info span {
        font-size: 12px;
        font-weight: 500;
    }

    .std-disability-info .container:nth-child(3n + 1) i {
        background-color: #44c7ea;
    }

    .std-disability-info .container:nth-child(3n + 2) i {
        background-color: #75ca9f;
    }

    .std-disability-info .container:nth-child(3n + 3) i {
        background-color: #9999cc;
    }

.img-circle {
    border-radius: 50%;
    width: 130px;
    border: 5px solid #fff;
    height: 130px;
    margin-bottom: 5px;
    box-shadow: 1px 1px 11px -6px #000;
}

.std-info-header {
    text-align: center;
}

    .std-info-header #StudentImageFile {
        margin: 20px auto;
    }

.to_do {
    padding: 0;
    color: #000;
    margin-top: 5px;
}

/* Health Center */

.treatmentPlan .btn-container,
.ptexamination .btn-container,
.evaluateTP .btn-container,
.getMatrixOpt .btn-container,
.dailyProgressNote .btn-container,
.otExamination .btn-container,
.sltExamination .btn-container,
.hippoExamination .btn-container {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 575.98px) {
    .treatmentPlan .btn-container,
    .ptexamination .btn-container,
    .evaluateTP .btn-container,
    .getMatrixOpt .btn-container,
    .dailyProgressNote .btn-container,
    .otExamination .btn-container,
    .sltExamination .btn-container,
    .hippoExamination .btn-container {
        flex-direction: column;
    }
}

/* Modal */

.modal-content .x_panel {
    padding: 10px;
    border-radius: 5px;
}

.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 !important;
    background-color: #fff;
}

.modal-content {
    border: none;
    box-shadow: none;
    background-clip: none;
}

.modal-dialog {
    width: auto;
    margin: 0;
}

.modal::-webkit-scrollbar {
    width: 8px;
}

.modal::-webkit-scrollbar-thumb {
    background: #ceb578;
}

.modal::-webkit-scrollbar-track {
    background: #f1f1f1;
}

@media (max-width: 991.98px) {
    .modal {
        width: calc(100% - 20px);
        height: calc(100% - 100px);
        margin: 10px;
        padding: 0;
        left: 0;
        top: 0;
        transform: unset;
    }

    .modal-content {
        height: auto;
        min-height: 100%;
        border-radius: 0;
    }
}

.custom-tiles {
    background: #fff;
    padding: 15px;
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

.customPartition {
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px -5px #000;
    border-radius: 10px;
}

.icon-disability {
    position: absolute;
    left: -20px;
    top: -20px;
}

.appointmentSchedule .fc-content {
    white-space: pre-wrap;
}

.appointmentSchedule .btn-appointment {
    border: none;
    padding: 5px;
    background: #2e3f52;
    color: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.answersPadding {
    padding: 3rem !important;
}

@media (max-width: 1199.98px) {
    .modal {
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        margin: 50px;
        padding: 0;
        left: 0;
        top: 0;
        transform: unset;
    }

    .appointmentSchedule .btn-appointment {
        font-size: 0;
        border-radius: 50%;
        width: 10px;
        height: 10px;
    }

        .appointmentSchedule .btn-appointment::before {
            content: "+";
            font-size: 12px;
        }
}

/*Schedule*/
.timetable {
    display: grid;
    grid-template-areas: ". week" "time content";
    grid-template-columns: 70px;
    grid-template-rows: 35px;
    /*width: 80vw;
    height: 65vh;*/
    flex-wrap: nowrap;
}

    .timetable .subject-gradient {
        /*display: flex;*/
        width: 100%;
        height: 100%;
        /*background: linear-gradient(135deg, #eec08e, #dcee8e);*/
        transition: 0.2s ease box-shadow, 0.2s ease transform;
        border: 2px solid #625f58;
        color: white;
        line-height: 60px;
        font-size: 15px;
        /*text-align:center;*/
    }

        .timetable .subject-gradient:hover {
            box-shadow: 0 20px 30px 0 rgba(238, 192, 142, 0.3);
            transform: scale(1.05);
        }

    .timetable .weekend {
        background: #fbfbfc;
        color: #87a1ad;
    }

    .timetable .week-names {
        grid-area: week;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        text-transform: uppercase;
        font-size: 12px;
    }

        .timetable .week-names > div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            box-shadow: inset 1px 0 0 #ECEFF1;
        }

    .timetable .week-namesFriday {
        grid-area: week;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        text-transform: uppercase;
        font-size: 12px;
    }

        .timetable .week-namesFriday > div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            box-shadow: inset 1px 0 0 #ECEFF1;
        }

    .timetable .time-interval {
        grid-area: time;
        display: grid;
        grid-template-rows: repeat(11, 1fr);
        font-size: 14px;
    }

        .timetable .time-interval > div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 1px 0 0 #ECEFF1;
        }

    .timetable .content-schedule {
        grid-area: content;
        display: grid;
        grid-template-rows: repeat(11, 1fr);
        grid-template-columns: repeat(4, 1fr);
    }

    .timetable .content-scheduleFriday {
        grid-area: content;
        display: grid;
        grid-template-rows: repeat(11, 1fr);
        grid-template-columns: repeat(1, 1fr);
    }

    .timetable .content-schedule > div {
        box-shadow: inset 1px 0 0 #ECEFF1, inset 0 1px 0 0 #ECEFF1;
        text-align: center;
    }

    .timetable .content-scheduleFriday > div {
        box-shadow: inset 1px 0 0 #ECEFF1, inset 0 1px 0 0 #ECEFF1;
        text-align: center;
    }
/*Schedule*/
.top-statistics li div .icon {
    font-size: 100px;
    position: absolute;
    top: 14px;
    left: 10px;
    width: 54px;
    height: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

@media (max-width:480px) {
    .top-statistics li div .icon {
        position: relative;
        margin: 0 15px 15px 15px;
    }
}

@media (max-width:768px) {

    .nav-md .container.body .col-md-3.left_col {
        z-index: 3;
    }
}


.top-statistics li div .icon.pod-icon {
    left: 17px !important;
    width: 50px !important;
    height: 50px !important;
}


.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #c72d2d !important;
}

.ProgressSlider {
    direction: ltr !important;
    margin: 10% auto !important;
}



/*===========================================================================Added by manaf 23-05-2023===========================================================================*/
#nprogress .spinner {
    top: 50%;
    left: 50%;
}

.x_content.swiper.mySwiper {
    padding-left: 0;
    padding-right: 0;
}

.highcharts-legend, .highcharts-subtitle, .highcharts-title, .highcharts-exporting-group
.highcharts-axis-labels, .highcharts-xaxis-labels,
.highcharts-axis-labels text tspan,
.highcharts-label, .highcharts-tooltip, .highcharts-color-undefined,
.highcharts-axis-title tspan {
    font-family: Open Sans, Almarai, sans-serif !important;
}

.swiper-button-prev.swiper-button-disabled.swiper-button-lock {
    display: none;
}


.home-tiles-text {
    font-size: 14px;
    text-transform: capitalize;
}

.home-tiles-container
.home-tiles :after {
    content: '';
    height: 25%;
    width: 3px;
    position: absolute;
    left: 0;
    bottom: 20px;
}



.home-tiles-container:first-child
.home-tiles :after {
    content: '';
    background: #44c7ea;
}

.home-tiles-container:nth-child(2n)
.home-tiles :after {
    content: '';
    background: #75ca9f;
}

.home-tiles-container:nth-child(3n)
.home-tiles :after {
    content: '';
    background: #9999cc;
}

.home-tiles-container:nth-child(4n)
.home-tiles :after {
    content: '';
    background: #ae841f;
}


.dashboard-home-report-count .fa {
    position: relative;
}



.home_dash
.home-tiles .caption {
    text-align: right;
    padding: 0;
}

.home_dash
.home-tiles-container .dashboard-home-report-count {
    box-shadow: rgb(46 63 82 / 20%) 1px 1px 2px 1px;
    border: 0;
    border-radius: 8px;
    margin-left: 10px;
}


.home_dash
.home-tiles-container:first-child
.home-tiles .dashboard-home-report-count .fa-user-o:before {
    content: "";
    background: url(../images/Asset4.svg) no-repeat bottom;
    height: 40px;
    width: 40px;
    position: absolute;
    filter: brightness(100);
    transform: translate(-25%, -60%);
    right: -30px;
}

.home_dash
.home-tiles-container:nth-child(2n)
.home-tiles .dashboard-home-report-count .fa-user-o:before {
    content: "";
    background: url(../images/Asset2.svg) bottom no-repeat;
    height: 40px;
    width: 40px;
    position: absolute;
    position: absolute;
    filter: brightness(100);
    transform: translate(-25%, -50%);
    right: -30px;
}

.home_dash
.home-tiles-container:nth-child(3n)
.home-tiles .dashboard-home-report-count .fa-user-o:before {
    content: "";
    background: url(../images/Asset3.svg) bottom no-repeat;
    height: 40px;
    width: 40px;
    position: absolute;
    filter: brightness(100);
    transform: translate(-20%, -50%);
    right: -30px;
}

.home_dash
.home-tiles-container:nth-child(4n)
.home-tiles .dashboard-home-report-count .fa-user-o:before {
    content: "";
    background: url(../images/Asset1.svg) bottom no-repeat;
    height: 40px;
    width: 40px;
    position: absolute;
    filter: brightness(100);
    transform: translate(-20%, -50%);
    right: -30px;
}

@media (max-width:480px) {

    .home_dash .nav-tabs > li > a {
        width: 100%;
    }
}

.mySwiper .swiper-button-prev svg {
    width: 20px;
    transform: rotate(0);
    height: 75%;
}

.notification-tiles-container {
    min-height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 15px;
}

.nav-md
.main_menu_side {
    height: calc(100vh - 178px);
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-sm .main_menu_side {
    height: 100%;
    /*  overflow-y: auto;
    overflow-x: hidden;*/
}

.nav-sm .site_title {
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/*side menu styles*/

.nav.side-menu > li:last-child > a:after {
    background: transparent;
}
/*added new hide side bar for responsive start*/
.sm-hidden {
    display: none;
}

.nav-hide .main_container .top_nav {
    margin-right: 0;
    width: 100%;
}

.nav-hide .left_col {
    width: 0;
    right: -300px;
    min-height: 100%;
    padding: 0;
    position: fixed;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    transition: 0.3s;
    top: 65px;
}

.nav-hide .container.body .right_col {
    padding: 80px 20px 0;
    margin-left: 0;
}

.nav-md .container.body .right_col {
    transition: all 300ms linear;
}

.Zho_sidemenu .main_menu_side {
    transition: all 300ms linear;
}

.nav-hide footer {
    margin-right: 0;
}

@media (max-width:991px) {
    .sm-hidden {
        display: block;
    }

    /* .nav-hide .main_container .top_nav {
        margin-right: 300px;
        width: calc(100vw - 300px);
    }*/

    .nav-hide .container.body .col-md-3.left_col {
        width: 300px;
        right: 0;
        min-height: 100%;
        padding: 0;
        position: fixed;
        display: -ms-flexbox;
        display: flex;
        z-index: 1;
        transition: 0.3s;
    }

    .nav-hide .left_col {
        width: 300px;
        right: 0px;
        min-height: 100%;
        padding: 0;
        position: fixed;
        display: -ms-flexbox;
        display: flex;
        z-index: 1;
        transition: 0.3s;
    }



    .nav-hide .container.body .right_col {
        padding: 80px 20px 0;
        margin-right: 300px;
    }

    .nav-hide footer {
        margin-right: 300px;
    }

    .nav-hide .Zho_sidemenu .side-menu > li > a {
        padding: 0;
    }
}



/*added new hide side bar for responsive End*/
.mainlogo img {
    height: 36px;
}

/*End side menu styles*/




/* tab styles*/

.student-list .nav-tabs, .student-list .tab-content {
    margin: 0 15px;
}

.nav-tabs > li > a {
    transition: 0.3s;
}


    .nav-tabs > li > a:hover {
        text-decoration: none;
    }

    .nav-tabs > li > a:before,
    .nav-tabs > li > a:after {
        content: "";
        position: absolute;
        width: 0%;
        height: 2px;
        bottom: -2px;
        background: #ceb578;
    }

    .nav-tabs > li > a:before {
        right: 0;
    }

    .nav-tabs > li > a:after {
        left: 0;
        background: #ceb578;
        transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .nav-tabs > li > a:hover:before {
        background: #ceb578;
        width: 100%;
        transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .nav-tabs > li > a:hover:after {
        background: transparent;
        width: 100%;
        transition: 0s;
    }



.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
/*.student-list .tabpanel .nav-sm li.active > a*/ {
    background: #3e5367;
    /* margin: 0; */
    padding: 13px 15px 12px;
    border-radius: 8px 8px 0 0;
    position: relative;
    display: block;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}



.tab-content .tab-pane .nav-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.tab-content ul.bar_tabsColor > li.active {
    border-right: 0 solid #ceb578;
}

.tab-content .tab-pane .nav-tabs > li.active > a,
.tab-content .tab-pane .nav-tabs > li.active > a:hover,
.tab-content .tab-pane .nav-tabs > li.active > a:focus {
    color: #3e5367;
    /* margin: 0; */
    padding: 13px 15px 12px;
    border-radius: 8px 8px 0 0;
    position: relative;
    display: block;
    cursor: pointer;
    background: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
}

/*.tab-content .tab-content .tab-pane {
    border: 1px solid #eee;
}
*/

/*end tab style*/

.home_dash
.Home-Notification-Count {
    position: absolute;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -2px;
    font-size: 10px;
    left: 5px;
    background: #ffcd56;
}

.headline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

    .headline .btn-edit {
        margin: 0px;
    }

select.form-control {
    border: 1px #ccc solid;
    border-radius: 6px;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    background-image: url('data:image/svg+xml,<svg width="1097" height="610" viewBox="0 0 1097 610" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61 61L548.335 548.335L1035.67 61" stroke="gray" stroke-width="121.834" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position-x: 12px;
    background-position-y: center;
    background-size: 12px;
}

input[type=text], input[type=search] {
    border-radius: 6px;
}

input, select {
    border-radius: 6px;
}

/*.dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: left;
}*/

.Stdheader {
    border: 1px dashed #fff;
    padding: 10px;
}

.zh_pannel {
    padding: 5px 15px;
}

.zho_pannel {
    padding: 15px;
    background: #fff;
    margin: 10px 0 0;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

.p-5 {
    padding: 5px;
}

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

.bg-whit {
    background: #fff;
}

.mtb-5 {
    margin: 10px 0;
}

.ptb-15 {
    padding: 15px 0;
}

.pxy-15 {
    padding: 0 15px;
}

.m-0 {
    margin: 0;
}

.mt-15 {
    margin-top: 15px;
}

.my-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.mt-0 {
    margin-top: 0;
}

.px-15 {
    padding: 0 15px;
}

.m-0 {
    margin: 0;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-10 {
    margin-bottom: 10px;
}

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

.my-10 {
    margin: 10px 0;
}

.shadow-none {
    box-shadow: none;
}

.maphead {
    padding: 10px 0 !important;
    padding-bottom: 20px;
    margin: 0;
    display: block;
}

.bg-lighthash {
    background: #f7f7f7;
}

.home-tiles-count1 {
    color: #3f567a;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}

.p-10 {
    padding: 10px !important;
}

.p-8 {
    padding: 8px !important;
}

.cardnew {
    border-radius: 8px;
    background: #fff;
    padding: 5px 15px;
    box-shadow: 1px 1px 7px -2px #e3e3e3;
    /* max-height: 251px; */
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    position: relative;
    overflow: hidden;
    align-items: center
}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}



.cardnew :after {
    content: '';
    content: '';
    height: 3px;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
}

.d-flex .col-lg-3:first-child .cardnew :after {
    background: #75ca9f;
}

.d-flex .col-lg-3:nth-child(2n) .cardnew :after {
    background: #75ca9f;
}

.d-flex .col-lg-3:nth-child(3n) .cardnew :after {
    background: #75ca9f;
}

.d-flex .col-lg-3:nth-child(4n) .cardnew :after {
    background: #75ca9f;
}

.d-flex .col-lg-3:nth-child(5n) .cardnew :after {
    background: #75ca9f;
}

.d-flex .col-lg-3:nth-child(6n) .cardnew :after {
    background: #75ca9f;
}

.d-flex .col-lg-3:nth-child(7n) .cardnew :after {
    background: #75ca9f;
}

.caption-edu {
    margin-bottom: 10px;
    font-size: 20px;
    color: #2a3f54;
    font-weight: 600;
    text-transform: capitalize;
}

.h-100 {
    height: 100%;
}

.indication_wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
}

    .indication_wrapper .col {
        margin-left: 10px;
    }

        .indication_wrapper .col:last-child {
            margin-left: 2px;
        }

.indication {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
}

    .indication div {
        margin: 2px 1px 2px 1px;
        /* border: 1px dashed #ddd; */
        padding: 3px;
        min-width: 30%;
        font-size: 12px;
        font-weight: 600;
        text-transform: capitalize;
        border-radius: 8px;
    }

    .indication label {
        line-height: normal;
        margin: 0;
        padding: 0;
    }


.indic_round {
    background: #ceb578;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px dashed #ffffff;
    margin: 0 5px 5px 5px !important;
    color: #fff !important;
}

.indication2 div {
    display: flex;
    align-items: center;
}

.indication2 label {
    line-height: normal;
    margin: 0 4px 5px 4px !important;
}


.customradio.radio label {
    padding-right: 0;
    padding-left: 15px;
}

.justify-content-end {
    justify-content: end;
}

.px-5p {
    padding-left: 5px;
    padding-right: 5px;
}

.my-5 {
    margin-bottom: 15px;
    margin-top: 15px;
}

.studentlist_wrap {
    border: 1px dashed #e9e9e9;
    padding: 10px;
    border-radius: 20px;
    height: 100%;
    box-shadow: #eee 3px 2px 5px 1px;
    display: flex;
    flex-direction: column;
}

.font-italic {
    font-style: italic;
}

.img-student-wrap {
    display: flex;
    justify-content: center;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    overflow: hidden;
    margin: auto;
}

.justify-content-center {
    justify-content: center;
}

.flex-column {
    flex-direction: column;
}

.btn-round {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin: 10px 4px;
}


.studentno_lab {
    font-weight: 600;
    margin: 5px 0;
}

.studentno_labspace:after {
    content: "-";
}

.studentlist_wrap .studentno_lab {
    font-weight: 600;
    margin: 0px 0;
}

.studentlist_wrap
.student_name_txt {
    font-size: 1.25em;
    padding-left: 10px;
    padding-right: 10px;
    line-height: normal !important;
    text-align: center !important;
    margin: 10px 0 0;
    font-weight: 600;
}



.datepicker.datepicker-dropdown {
    border: 0 !important;
}

.datepicker .datepicker-days .table-condensed thead tr th {
    border-radius: 0;
}

    .datepicker .datepicker-days .table-condensed thead tr th.prev {
        border-radius: 6px 0 0 0;
        background: #2e3f52;
    }

    .datepicker .datepicker-days .table-condensed thead tr th.datepicker-switch {
        background: #2e3f52;
    }

    .datepicker .datepicker-days .table-condensed thead tr th.picker-switch {
        border-radius: 0;
        background: #2e3f52;
    }

    .datepicker .datepicker-days .table-condensed thead tr th.next {
        border-radius: 0 6px 0 0;
        background: #2e3f52;
    }

    .datepicker .datepicker-days .table-condensed thead tr th.dow {
        background: #ceb578;
    }

.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] {
    background-image: linear-gradient(to bottom,#8e7d53,#b98913);
    border-radius: 0;
}

    .datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {
        background-image: linear-gradient(to bottom,#8e7d53,#b98913);
        border-radius: 0;
    }

.datepicker td, .datepicker th {
    width: auto;
    height: auto;
    padding: 4px;
    min-width: 40px;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    border: 0px;
}

.datepicker table tr td span.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover {
    background-image: linear-gradient(to bottom,#8e7d53,#b98913);
}

.datepicker .picker-switch {
    border-radius: 0 !important;
}

.datepicker .prev {
    border-radius: 4px 0 0 0 !important;
}

.datepicker .next {
    border-radius: 0 4px 0 0 !important;
}

.datepicker .datepicker-months .table-condensed .prev, .datepicker .datepicker-months .table-condensed .picker-switch, .datepicker .datepicker-months .table-condensed .next,
.datepicker .datepicker-years .table-condensed .prev, .datepicker .datepicker-years .table-condensed .picker-switch, .datepicker .datepicker-years .table-condensed .next,
.datepicker .datepicker-decades .table-condensed .prev, .datepicker .datepicker-decades .table-condensed .picker-switch, .datepicker .datepicker-decades .table-condensed .next {
    background: rgba(46, 63, 82, 1);
}

.datepicker .datepicker-months .datepicker-switch:hover, .datepicker .datepicker-months .next:hover, .datepicker .datepicker-months .prev:hover, .datepicker tfoot tr th:hover,
.datepicker .datepicker-years .datepicker-switch:hover, .datepicker .datepicker-years .next:hover, .datepicker .datepicker-years .prev:hover,
.datepicker .datepicker-decades .datepicker-switch:hover, .datepicker .datepicker-decades .next:hover, .datepicker .datepicker-decades .prev:hover {
    background: rgba(46, 63, 82, 0.9) !important;
}

/*==============calender new styles End==========*/

.modal {
    border-radius: 8px;
}

input[type="file"] {
    padding: 6px 12px;
}

.bootstrap-select
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: #ceb578;
}

.bootstrap-select .dropdown-toggle.btn-default {
    border: 1px solid #e2e2e2;
    border-radius: 6px;
}

    .bootstrap-select .dropdown-toggle.btn-default:hover {
        box-shadow: none;
        outline: none;
        background-color: #fff;
    }

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    background: #fff;
    border-color: #e2e2e2;
}

.pr-15 {
    padding-left: 15px;
}

.infobox {
    color: #2e3f52;
    border: 1px dashed #ceb578;
    margin: 5px 0;
    background: #fffaed;
    padding: 10px;
    border-radius: 6px;
}

.indication_round {
    width: 22px;
    height: 22px;
    color: #fff !important;
    text-align: center !important;
    vertical-align: middle;
    line-height: normal !important;
    border-radius: 50%;
    font-size: 0;
    margin: 0;
}

.indication_sepr {
    margin: 0 4px;
    line-height: normal
}

.indications_wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 3px 6px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px dashed #ccc;
    font-size: 13px;
    flex: 1;
}

    .indications_wrapper label {
        line-height: normal;
        margin: 0;
        white-space: nowrap;
    }

.checkbox-lable-styles {
    height: 30px;
    width: 30px;
}

    .checkbox-lable-styles .glyphicon-ok {
        right: -7px;
    }

.w-100 {
    width: 100%;
}

/*Time Picker style start*/
.bootstrap-datetimepicker-widget .timepicker .table-condensed tr td {
    border: 0;
    min-width: 10px;
    padding: 2px 2px !important;
}

    .bootstrap-datetimepicker-widget .timepicker .table-condensed tr td .btn span.glyphicon {
        opacity: 1;
    }

.timepicker {
    text-align: center;
}

.timepicker-picker .table-condensed {
    margin: 0 !important;
    padding: 0;
    width: 100%;
}

    .timepicker-picker .table-condensed .btn {
        padding: 2px;
    }

.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour {
    border: 0px solid #ddd;
}

.bootstrap-datetimepicker-widget
.list-unstyled
.picker-switch.accordion-toggle {
    display: none;
}

.bootstrap-datetimepicker-widget
.list-unstyled {
    margin: 0;
}
/*Time Picker style End*/


/*swiper*/
.mySwiper
.swiper-button-prev {
    background: no-repeat url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 1024 1024" class="icon" version="1.1"> <path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="%232e3f52"></path> </svg>') !important;
    background-position: center right !important;
    background-size: 20px !important;
}

.mySwiper
.swiper-button-next {
    background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 1024 1024" class="icon" version="1.1"> <path d="M768 903.232l-50.432 56.768L256 512l461.568-448 50.432 56.768L364.928 512z" fill="%232e3f52"></path> </svg>') no-repeat !important;
    background-position: center left !important;
    background-size: 20px !important;
}

    .mySwiper .swiper-button-next svg {
        display: none;
    }

.mySwiper .swiper-button-prev svg {
    display: none;
}

.home-tiles-container .home-tiles .dashboard-home-report-count .fa:after {
    content: none;
}
/*==================*/
.home-tiles-container .home-tiles .dashboard-home-report-count .fa:after {
    content: none;
}

.logo_en {
    display: none;
}

.subhead_h3 {
    margin: 0 !important;
    padding: 10px 0 !important;
    font-size: 1.6rem;
    FONT-WEIGHT: 500;
}
/*managment dashboard styles*/
.top-statistics.without-activecases li {
    width: 100% !important;
    height: 100% !important;
    transform: inherit !important;
    min-width: 220px !important;
}

.fullscreen-enable [data-bs-toggle=fullscreen] .glyphicon-fullscreen::before {
    content: "\e164";
}

/*for Darkmode start*/
body.darkmode-enable .left_col.scroll-view,
body.darkmode-enable .top_nav .nav_menu,
body.darkmode-enable .right_col {
    filter: grayscale(1);
}

body.darkmode-enable::-webkit-scrollbar-thumb {
    background: #2a2a2a;
}

.darkmode-enable .Zho_sidemenu .side-menu > li .nav.child_menu {
    top: 0;
}

.darkmode-enable .sidebar-footer {
    bottom: 65px
}
/*End Darkmode*/

.dropdown.open .dropdown-menu.top-position,
.dropdown .dropdown-menu.top-position {
    top: -80px;
    left: 0;
    right: 0;
    background: #fff;
    /*   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out 0.15s;*/
    border-radius: 0;
    border: 0;
    text-align: center;
    box-shadow: #919191 -3px -1px 5px 1px !important;
}

.top-position a {
    width: 100%;
}

.dropdown.theme-dropdownicon .top-position {
    display: none;
    /* transition: transform 0.3s ease-out;*/
}

.dropdown.theme-dropdownicon.open .top-position {
    display: flex;
    /* transition: transform 0.3s ease-in;*/
    /* transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out 0.15s;*/
}


/*fore theme changing*/
body.theme1 .left_col {
    background: #fff;
}

    body.theme1 .left_col .nav.side-menu > li > a {
        color: #2e3f52 !important;
    }

        body.theme1 .left_col .nav.side-menu > li > a:hover {
            color: #999 !important;
        }

    body.theme1 .left_col .nav.side-menu > li.active > a {
        color: #fff !important;
    }

        body.theme1 .left_col .nav.side-menu > li.active > a ul li a {
            color: #999 !important;
        }

    body.theme1 .left_col .nav.child_menu > li > a {
        color: #555 !important;
    }

body.theme1.nav-md .side-menu > li > a:after {
    background: #efefef;
}

body.theme1 .main_menu_side::-webkit-scrollbar-track {
    background: #d5d5d5;
}

body.theme1::-webkit-scrollbar-track {
    background: #d5d5d5;
}

body.theme1::-webkit-scrollbar-thumb {
    background: #efefef;
}

.top-position input[type="radio"] {
    display: none !important;
}

.theme_wrapper {
    align-items: center;
    justify-content: center;
    display: flex;
    background: #fff;
    flex-direction: column;
    width: 100%;
}

.theme_label {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 0 0;
}

.theme_round {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px 0;
    flex-direction: row
}

.theme-dropdownicon label {
    width: 25px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    padding: 0;
    background: #fff;
    height: 25px;
    border-radius: 50%;
    margin: 5px;
    overflow: hidden;
    cursor: pointer;
}

.theme1round {
    background: #fff;
    /* border: 1px solid #ccc; */
    height: 20px;
    width: 20px;
    border-radius: 0%;
    display: block;
    /* margin: 10px; */
    width: 100%;
    height: 100%;
}

.theme2round {
    background: #ceb578;
    /* border: 1px solid #ccc; */
    height: 20px;
    width: 20px;
    border-radius: 0%;
    display: block;
    /* margin: 10px; */
    width: 100%;
    height: 100%;
}

hr {
    clear: both;
}

.tab-content > .tab-pane {
    padding-top: 0px;
}

.dashboard_wjhtna_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .dashboard_wjhtna_wrapper .TotalTiles {
        height: 100% !important;
        width: 100% !important;
        padding: 15px;
        box-shadow: #e7e7e7 2px 2px 6px 1px;
        border: 1px dashed rgb(0 0 0 / 10%);
        min-width: 270px;
        transition: all 0.35s;
        box-sizing: border-box;
    }

        .dashboard_wjhtna_wrapper .TotalTiles:hover {
            transform: translateY(-0.25em);
        }

@media (max-width:480px) {
    .dashboard_wjhtna_wrapper .TotalTiles {
        height: 100% !important;
        width: 100% !important;
        padding: 15px;
        box-shadow: #e7e7e7 2px 2px 6px 1px;
        border: 1px dashed rgb(0 0 0 / 10%);
        min-width: 200px;
    }
}

.dashboard_wjhtna_wrapper .TotalTiles div.SubCount {
    padding: 5px 10px;
}

    .dashboard_wjhtna_wrapper .TotalTiles div.SubCount .tests {
        padding: 5px 10px;
    }

.float-left {
    float: right;
}

.h2_classic_head {
    padding: 5px 10px;
    border-right: 3px solid rgb(206 181 120) !important;
    border-radius: 0 6px 5px 0;
    margin-top: -10px;
    background-color: rgb(255 255 255);
    border: 1px solid #eee;
}

    .h2_classic_head h2 {
        font-size: 16px;
    }

/*.top-statistics.without-activecases div {
    margin-left: 8px;
}

    .top-statistics.without-activecases div:last-child {
        margin-left: 0px;
    }*/
.top-statistics li div.SubCount span {
    color: #1c2c42;
    direction: rtl;
    font-weight: 500;
    font-size: 14px;
}

.hmd_box_wrapper {
    display: flex;
    flex-wrap: wrap;
}

    .hmd_box_wrapper .col-lg-4 {
        margin-bottom: 10px;
    }

        .hmd_box_wrapper .col-lg-4 .home-tiles {
            box-shadow: 1px 1px 7px -4px #000000;
            height: 100%;
        }

        .hmd_box_wrapper .col-lg-4 .home-tiles-container {
            height: 100%;
        }

            .hmd_box_wrapper .col-lg-4 .home-tiles-container .home-tiles .caption .home-tiles-count.count {
                font-size: 24px;
            }

            .hmd_box_wrapper .col-lg-4 .home-tiles-container .home-tiles .caption .count_top {
                font-size: 16px;
                font-weight: normal;
                text-align: right !important;
                text-overflow: ellipsis;
                overflow: hidden;
            }

                .hmd_box_wrapper .col-lg-4 .home-tiles-container .home-tiles .caption .count_top b {
                    font-size: 14px;
                    font-weight: normal;
                }


@media (max-width:480px) {
    .nav.nav-tabs {
        display: flex;
        flex-direction: column;
    }
}

.totalborder {
    border: 1px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 0 0;
    margin: 15px 0;
    border-radius: 5px;
    background: #fbfbfb;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
}

.x_content div[role='tabpanel'] ul.nav > li > a {
    margin: 8px 0 0 8px;
    background: #fff;
    border-bottom: 1px solid #dddddd;
}

    .x_content div[role='tabpanel'] ul.nav > li > a:hover, .x_content div[role='tabpanel'] ul.nav > li > a:active, .x_content div[role='tabpanel'] ul.nav > li > a:focus {
        background: #fff;
    }

.x_content div[role='tabpanel']
.nav-tabs > li.active > a, .x_content div[role='tabpanel'] .nav-tabs > li.active > a:hover, .x_content div[role='tabpanel'] .nav-tabs > li.active > a:focus {
    background: #3e5367;
}

.panel_toolbox > li > a {
    background: transparent !important;
}

.titleLabel h4 {
    color: #fff;
}

input[type=file] {
    padding: 4px;
}

    input[type=file]::file-selector-button {
        border: 2px solid #ccc;
        padding: 6px 12px;
        border-radius: .2em;
        background-color: #ccc;
        transition: 1s;
        display: inline-flex;
        text-align: center;
        align-items: center;
    }


        input[type=file]::file-selector-button:hover {
            background-color: #ccc;
            border: 2px solid #ccc;
            outline: none;
            box-shadow: none;
        }

.tab-content .tab-pane .nav-tabs li.active a {
    color: #fff !important;
}

.p-15 {
    padding: 15px;
}

.callout h4 {
    display: flex;
    width: 100%;
}

.callout.callout-danger .label {
    color: #1c2c42;
    flex: 1;
    display: flex;
}

.callout {
    display: flex;
    align-items: center;
    margin: 5px;
}

    .callout h4 {
        display: flex;
        align-items: center;
    }

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    font-family: Open Sans, Almarai, sans-serif !important;
}

.mx_px-5 {
    margin: 0 5px;
}

table td label {
    line-height: 1.2 !important;
    margin: 0;
}

.line-height2 {
    line-height: 2 !important;
}

.no-border {
    border: 0px !important;
}

.justify-content-between {
    justify-content: space-between;
}

.btn_startnew {
    font-size: 18px;
    min-height: 80px;
    min-width: 300px;
    text-align: center;
    vertical-align: middle;
    margin: 10px 10px 30px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

select {
    border: 1px #ccc solid;
    border-radius: 6px;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    background-image: url(data:image/svg+xml,<svg width="1097" height="610" viewBox="0 0 1097 610" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61 61L548.335 548.335L1035.67 61" stroke="gray" stroke-width="121.834" stroke-linecap="round" stroke-linejoin="round"/></svg>);
    background-repeat: no-repeat;
    background-position-x: 12px;
    background-position-y: center;
    background-size: 12px;
    width: 100%;
    display: block;
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
}

.form-control[disabled] ~ .input-group-addon, fieldset[disabled] .form-control ~ .input-group-addon {
    background: #eee !important;
    cursor: not-allowed;
    color: #9f9f9f;
    border-width: 1px 0 1px 1px;
    border-color: #ddd;
}

.Schedule_caldr input[type=text], .Schedule_caldr input[type=search] {
    margin: 3px 2px;
    border: 1px dashed #ccc !important;
    text-transform: capitalize;
}

.no-data {
    border: 1px dashed #ffafaf;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffdede;
    color: #b34646;
    padding: 10px;
    border-radius: 8px;
    margin: 10px 0;
}

.noti_panel {
    height: 455px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 10px 0;
}


@media(max-width:992px) {
    .noti_panel {
        height: auto;
        overflow: auto;
    }
}

.header_top .navbar-right .Hometop-Notification li:first-child {
    border-bottom: 1px solid var(--neutral-light, #E7E7E8);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.header_top .navbar-right .Hometop-Notification li:last-child {
    border-bottom: 0px dashed #eee;
    margin-bottom: 0px;
    padding-bottom: 00px;
}

.header_top.top_nav .nav > li > a:focus, .header_top.top_nav .nav > li > a:hover, .header_top.top_nav .nav .open > a, .header_top.top_nav .nav .open > a:focus, .header_top .top_nav .nav .open > a:hover {
    background: transparent;
}

.header_top .navbar-nav .dropdownwraper.open .dropdown-menu {
    padding: 0px;
    left: 0 !important;
    right: inherit;
    width: 320px;
    max-width: 340px;
    max-height: 40vh;
    overflow: auto;
    cursor: default;
    transition: .5s ease-in-out;
    animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center;
    border-radius: 16px;
    /* elv-light */
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
}

.dropdownwraper .Hometop-Notification li {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #E7E7E8;
}

    .dropdownwraper .Hometop-Notification li:last-child {
        border-left: 0;
        border-right: 0;
        border-bottom: 0 solid #E7E7E8;
    }

.Hometop-Notification-Count {
    position: absolute;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: #fff;
    background: #e94b4b;
    border-radius: 50%;
    top: 0px;
    right: 2px;
    font-size: 10px;
}

.Noti-student-list-item {
    display: flex;
}

    .Noti-student-list-item .Noti-student-list-item-img {
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #ccc;
        width: 40px;
        height: 40px;
        object-fit: cover;
    }

        .Noti-student-list-item .Noti-student-list-item-img img {
            border-radius: 50%;
            width: 40px;
            height: 40px;
        }

.noti-student-list-item-details {
    display: flex;
    padding: 0 8px;
    flex-direction: column;
}

.noti-prenot_btn {
    width: auto !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    background: #2e3f52;
    height: auto !important;
    border-radius: 4px;
    margin: 4px 0;
    color: #fff !important;
    font-size: 11px;
}

.noti-student-list-item-name {
    font-weight: 600;
    color: #ceb578;
}

@keyframes growDown {
    0% {
        transform: rotateY(90deg);
    }

    80% {
        transform: rotateY(-10deg);
    }

    100% {
        transform: rotateY(0);
    }
}


.left_ico {
    background: rgba(0,0,0,0.2);
    padding: 15px 6px 15px 20px;
}

.left_ico_label {
    padding: 15px 6px 15px 10px;
}
/*
.nav-sm .nav.side-menu li a .left_ico {
    background: transparent;
    padding: 15px 0 0 0;
}

.nav-sm .nav.side-menu li a .left_ico_label {
    padding: 0 5px 5px 5px;
}

.nav-sm .nav.side-menu li .child_menu li {
    padding: 0;
}*/

.nav-sm .nav.side-menu li .child_menu li.active a {
    border-right: 1px solid rgb(255 255 255 / 20%);
}

/* .nav-sm .nav.side-menu li .child_menu li a {
        padding: 8px 12px;
        margin: 0;
        font-size: 13px;
        border-bottom: 1px solid rgb(255 255 255 / 20%);
    }*/

.left_ico {
    background: rgba(0,0,0,0.2);
    padding: 15px 20px 15px 6px;
}

.left_ico_label {
    padding: 15px 10px 15px 6px;
}
/*
.nav-sm .nav.side-menu li a .left_ico {
    background: transparent;
    padding: 15px 0 0 0;
}

.nav-sm .nav.side-menu li a .left_ico_label {
    padding: 0 5px 5px 5px;
}

.nav-sm .nav.side-menu li .child_menu li {
    padding: 0;
}

    .nav-sm .nav.side-menu li .child_menu li.active a {
        border-left: 1px solid rgb(255 255 255 / 20%);
    }

    .nav-sm .nav.side-menu li .child_menu li a {
        padding: 8px 12px;
        margin: 0;
        font-size: 13px;
        border-bottom: 1px solid rgb(255 255 255 / 20%);
    }
*/
.bootstrap-select.btn-group .dropdown-toggle .bs-caret .caret {
    background: url('data:image/svg+xml,<svg width="1097" height="610" viewBox="0 0 1097 610" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61 61L548.335 548.335L1035.67 61" stroke="gray" stroke-width="121.834" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position-x: calc(100% - 12px);
    background-position-y: center;
    background-size: 12px;
    height: 25px;
    width: 25px;
    border: 0 !important;
    left: 0;
    top: 7px;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    text-align: right;
}

.bootstrap-select > .dropdown-toggle {
    padding-left: 25px;
}

.pro-align {
    float: right;
    width: 100%;
}

.bootstrap-select .dropdown-toggle.btn-default
.bs-caret {
    position: absolute;
    left: 50px;
    top: 0;
}

.main-content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/*==============================================scroll side bar==========================================*/
/* width */
.Zho_sidemenu ::-webkit-scrollbar {
    width: 0px;
}
/* Track */
.Zho_sidemenu ::-webkit-scrollbar-track {
    background: #fff;
}
/* Handle */
.Zho_sidemenu ::-webkit-scrollbar-thumb {
    background: #a0a7af;
}
    /* Handle on hover */
    .Zho_sidemenu ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/*common scrollbar*/
/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f7f7f7;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #ceb578;
}
/*end scroll side bar*/

/*media Query*/
@media (max-width:768px) {
    .home-tiles-container {
        width: 100%;
    }

    #studentAttendMarkDiv .d-flex .col-sm-12 {
        width: 100%;
    }

    .img-student-wrap {
        display: flex;
        justify-content: center;
        border-radius: 50%;
        height: 100px;
        width: 100px;
        overflow: hidden;
        margin: auto;
    }
}

/*===========================================================================End Style by manaf 23-05-2023===========================================================================*/



/*===========================================================================New Style by manaf based on new design 25-07-2023===========================================================================*/


/*================ ===Start side menu new ==== =======================*/



.Zho_sidemenu .main_menu_side .side-menu li {
    display: flex;
    padding: 0;
    border: 0;
    flex-direction: column;
}

.Zho_sidemenu .side-menu > li > a {
    width: 72px;
    height: 56px;
    /*  overflow: hidden;*/
    display: flex;
    align-items: center;
}

    .Zho_sidemenu .side-menu > li > a .left_ico_label {
        display: none;
    }


.Zho_sidemenu .side-menu > li .nav.child_menu {
    position: fixed;
    top: 65px;
    bottom: 0;
    height: calc(100% - 65px);
    right: 72px;
    width: 0;
    background: #fff; /*#FBFBFB*/
    overflow: auto;
    z-index: 9;
    padding: 8px;
}

.Zho_sidemenu .side-menu > li.active .nav.child_menu {
    -webkit-animation: square-slice-center-animate 0.3s ease;
    animation: square-slice-center-animate 0.3s ease;
    width: calc(300px - 72px);
}


.Zho_sidemenu .side-menu > li .nav.child_menu .sub_childmenu {
    top: 0px;
}

.Zho_sidemenu ul.nav.child_menu li:before,
.Zho_sidemenu ul.nav.child_menu li:after {
    content: none;
}

.Zho_sidemenu .main_menu_side {
    background: #fff;
}

.Zho_sidemenu .left_col {
    background: transparent;
}

.Zho_sidemenu .main_menu_side {
    height: calc(100vh - 178px);
}

.Zho_sidemenu .nav.child_menu > li > a {
    color: #595959;
    padding: 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

    .Zho_sidemenu .nav.child_menu > li > a:hover {
        color: #595959;
    }

/*.Zho_sidemenu .nav.child_menu > li.current-page > a {
    color: #3484F0;
    padding: 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;*/
/*border-top: 1px solid #F5F5F7;
    border-bottom: 1px solid #F5F5F7;*/
/*border-radius: 6px;
}*/

.Zho_sidemenu .left_ico {
    background: #F5F5F7;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    /* height: 56px;*/
}

    .Zho_sidemenu .left_ico .fa {
        color: #A0A7AF;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        width: 72px;
        /* height: 56px;*/
        margin: 0;
        cursor: pointer;
    }

.Zho_sidemenu ul li.active .left_ico .fa {
    color: #3484F0;
}

.Zho_sidemenu .new_logo {
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 46px;
    height: 65px;
}

    /*.Zho_sidemenu .new_logo:after {
        content: '';
        height: 100vh;
        position: absolute;
        width: 72px;
        background: #f5f5f7;
        top: 0;
        right: 0;
        bottom: 0;
    }
*/
    .Zho_sidemenu .new_logo svg {
        width: 34px;
        height: 36px;
        position: relative;
        z-index: 9;
    }

.Zho_sidemenu .submenu_head {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    padding: 16px;
    line-height: 21px; /* 140% */
    min-height: 56px;
    display: flex;
    align-items: center;
    width: 100%;
}

/*.Zho_sidemenu .nav.child_menu li:hover, .Zho_sidemenu .nav.child_menu li.active {
    background-color: #FBFBFB;
}*/

/*.Zho_sidemenu .nav li.active .child_menu li.current-page {
    background-color: #FBFBFB;
}*/

.Zho_sidemenu .sidebar-footer {
    width: 72px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.Zho_sidemenu .sidebar-footer {
    background: #f5f5f7;
    border: 0;
    padding: 0;
}

    .Zho_sidemenu .sidebar-footer a {
        background: #f5f5f7;
        color: #A0A7AF;
    }

    .Zho_sidemenu .sidebar-footer .dropdown a {
        background: #f5f5f7;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 72px;
        padding: 16px 24px;
    }

.Zho_sidemenu .dropdown.open .dropdown-menu.top-position, .Zho_sidemenu .dropdown .dropdown-menu.top-position {
    top: -20px;
    right: 60px;
    background: #fff;
    border-radius: 0;
    border: 0;
    text-align: center;
    box-shadow: #b1b1b1 1px 1px 9px -1px !important;
}

.Zho_sidemenu .fullscreen, .Zho_sidemenu .blackandwhite {
    padding: 15px 10px 0 10px;
    background: #fff !important;
    color: #A0A7AF !important;
    width: auto !important;
}

.Zho_sidemenu .top-position:before {
    content: '';
    position: absolute;
    border-width: 6px 0 6px 6px;
    border-color: #ffffff00 #fff0 #ffffff00 white;
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-style: solid;
    right: -6px;
    bottom: 65px;
}

.Zho_sidemenu .dropdown.open .dropdown-menu.top-position1, .Zho_sidemenu .dropdown .dropdown-menu.top-position1 {
    top: -65px;
    right: 65px;
    background: #fff;
    border-radius: 0;
    border: 0;
    text-align: center;
    box-shadow: #b1b1b1 1px 1px 9px -1px !important;
    min-width: 160px;
    padding: 0 15px;
}

.Zho_sidemenu .top-position1:before {
    position: absolute;
    right: -6px;
    top: 90px;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 6px solid transparent;
    border-right: 0;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
}

.Zho_sidemenu .top-position1 a {
    background: #fff !important;
}

.Zho_sidemenu .px-3 {
    padding: 0 3px;
}

.Zho_sidemenu .avtar_shotname {
    background: #B47915;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    color: #fff;
    font-size: 22px;
    overflow: hidden;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: start;
    text-transform: uppercase;
}

.Zho_sidemenu .sidebar-footer .signout-dropdownicon a {
    padding: 16px 18px;
}

.Zho_sidemenu .avtar_shotname .text {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    top: -2px;
    left: -8px;
    direction: ltr;
    letter-spacing: 12px;
}

.Zho_sidemenu .language_switch {
    margin: 0;
    padding: 0 15px;
    background: #fff;
    /* height: 65px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #f3f3f3;
}

    .Zho_sidemenu .language_switch li a {
        background: #fff;
        width: auto;
        height: 55px;
    }

        .Zho_sidemenu .language_switch li a .left_ico {
            background: #fff;
            width: auto;
        }

.Zho_sidemenu .theme_wrapper a {
    padding: 15px 10px 5px 10px !important;
    width: auto !important;
    background: #fff !important;
}

.tooltip {
    font-family: Open Sans, Almarai, sans-serif !important;
}

.fs-14 {
    font-size: 14px;
}

.hover_class .left_ico_label {
    border-radius: 4px;
    background: var(--text-primary, #121212);
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    display: flex !important;
    color: #fff;
    height: auto;
    width: auto;
    right: 60px;
    position: fixed;
    z-index: 99999;
    font-size: 13px;
    animation: square-slice-center-animate1 0.5s ease;
}

@keyframes square-slice-center-animate1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes square-slice-center-animate {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}


/*
.hover_class .left_ico_label {
    position: relative;
    background: #f5f5f7;
    width: calc(250px - 72px);
    left: 0;
    color: #000;
    padding: 15px 6px 15px 0px;
    z-index: 99;
    height: 56px;
    display: flex !important;
    transition: .5s;
    align-items:center;
}
    */
.Zho_sidemenu .left_ico .fa.fa-language {
    background: #fff;
    width: auto;
    color: #304154;
    font-size: 16px;
}

.Zho_sidemenu .side-menu > li > a.hover_text.hover_class {
    width: 100%;
}

.Zho_sidemenu .side-menu > li .nav.child_menu .sub_childmenu {
    position: relative;
    right: 0;
    width: calc(300px - 88px);
    padding: 0;
}

/*.Zho_sidemenu .menu_module.active:before {
    content: '';
    width: 72px;
    height: 56px;
    right: 0;
    top: 0;
    position: absolute;
    background: transparent;
    z-index: 9;
}*/

.Zho_sidemenu .user-profile-name1 {
    text-align: center;
    font-size: 14px;
    display: block;
    color: #666;
    margin: 10px 0 3px 0;
}

.Zho_sidemenu .user-profile-designation1 {
    text-align: center;
    font-size: 14px;
    display: block;
    color: #666;
    padding: 0px 0 15px 0;
    border-bottom: 1px dashed #eee;
    font-weight: 600;
}

.sidebar-footer .top-position1 .logout_txt {
    width: 145px !important;
}


/*.Zho_sidemenu .nav.child_menu > li > .sub_childmenu li a {
    padding: 16px 25px 16px 16px;
}
*/
.Zho_sidemenu .menu_section .menu_module.active .nav.child_menu .sub_module:before {
    content: '';
    background: no-repeat url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 1024 1024" class="icon" version="1.1"> <path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="%232e3f52"></path> </svg>') !important;
    height: 20px;
    position: absolute;
    left: 5px;
    width: 20px;
    background-size: 12px 12px !important;
    transform: rotate(180deg);
    top: 20px;
    opacity: 0.5;
    background-position: center !important;
}

.Zho_sidemenu .menu_section .active .nav.child_menu .active .sub_module:before {
    content: '';
    background: no-repeat url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 1024 1024" class="icon" version="1.1"> <path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="%232e3f52"></path> </svg>') !important;
    height: 20px;
    position: absolute;
    left: 5px;
    width: 20px;
    background-size: 12px 12px !important;
    transform: rotate(90deg);
    top: 20px;
    opacity: 0.5;
    background-position: center !important;
}


/*icons*/

/*================ ===End side menu new ==== =======================*/


/*================ === Vocational new styles ==== =======================*/
.zho-pannel {
    border-radius: 16px;
    background: #FFF;
    padding: 24px 24px 32px 24px;
    margin-top: 19px;
}

.zho_head {
    color: #000 !important;
    text-align: right;
    font-size: 28px !important;
    font-style: normal;
    font-weight: 800 !important;
    line-height: 36px;
}

.zho_form-control {
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,<svg width="1097" height="610" viewBox="0 0 1097 610" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61 61L548.335 548.335L1035.67 61" stroke="gray" stroke-width="121.834" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 13px 7px !important;
    height: 44px;
    padding: 8px 16px 8px 35px;
    justify-content: flex-end;
    align-items: center;
    border-radius: 50px;
    background: var(--shades-platinum, #E7E6EA);
    text-overflow: ellipsis;
    margin-bottom: 25px;
}

.search_input {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21.5308 20.4693L16.8368 15.7762C18.1973 14.1428 18.8757 12.0478 18.7309 9.92691C18.5861 7.80604 17.6293 5.82265 16.0593 4.38932C14.4894 2.95599 12.4274 2.18308 10.3021 2.23138C8.17687 2.27968 6.15205 3.14547 4.64888 4.64864C3.14571 6.15181 2.27993 8.17663 2.23163 10.3019C2.18333 12.4271 2.95623 14.4892 4.38956 16.0591C5.82289 17.629 7.80629 18.5859 9.92715 18.7307C12.048 18.8755 14.1431 18.1971 15.7765 16.8365L20.4696 21.5306C20.5393 21.6003 20.622 21.6556 20.713 21.6933C20.8041 21.731 20.9017 21.7504 21.0002 21.7504C21.0988 21.7504 21.1963 21.731 21.2874 21.6933C21.3784 21.6556 21.4612 21.6003 21.5308 21.5306C21.6005 21.4609 21.6558 21.3782 21.6935 21.2871C21.7312 21.1961 21.7506 21.0985 21.7506 21C21.7506 20.9014 21.7312 20.8038 21.6935 20.7128C21.6558 20.6218 21.6005 20.539 21.5308 20.4693ZM3.75021 10.5C3.75021 9.16495 4.14609 7.8599 4.88779 6.74987C5.62949 5.63984 6.6837 4.77467 7.9171 4.26378C9.1505 3.75289 10.5077 3.61922 11.8171 3.87967C13.1264 4.14012 14.3292 4.78299 15.2732 5.727C16.2172 6.671 16.8601 7.87374 17.1205 9.18311C17.381 10.4925 17.2473 11.8497 16.7364 13.0831C16.2255 14.3165 15.3603 15.3707 14.2503 16.1124C13.1403 16.8541 11.8352 17.25 10.5002 17.25C8.71061 17.248 6.99488 16.5362 5.72944 15.2707C4.46399 14.0053 3.7522 12.2896 3.75021 10.5Z" fill="black"/></svg>');
    background-position: right 15px center;
    padding: 8px 48px 8px 16px;
    background-repeat: no-repeat;
    height: 44px;
}


/***********data table**************/
.avatar-xxs {
    height: 2.5rem;
    width: 2.5rem;
}

.rounded-circle {
    border-radius: 50% !important;
}

.avatar-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .avatar-group .avatar-group-item:first-child {
        margin-right: 0px;
    }

    .avatar-group .avatar-group-item {
        margin-left: -6px;
        border: 2px solid #fff;
        border-radius: 50%;
        -webkit-transition: all .2s;
        transition: all .2s;
    }

        .avatar-group .avatar-group-item:hover {
            position: relative;
            -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
            z-index: 1;
        }

.Zho_table {
    border: 0;
    width: 100%;
    border-collapse: collapse;
}

    .Zho_table tr th {
        background: #fff;
        border-bottom: #E7E6EA 1px solid !important;
        border-left: 0 !important;
        border-top: 0 !important;
        border-right: 0 !important;
        color: #121212;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        text-align: right;
        line-height: 20px;
        padding: 16px 24px !important;
    }

#group_management_wrapper {
    background: transparent;
    clear: both;
    padding: 0;
    margin: 10px 0;
    border-radius: 0;
    box-shadow: none;
    overflow: auto;
}

    #group_management_wrapper.dataTables_wrapper .dataTables_filter input {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21.5308 20.4693L16.8368 15.7762C18.1973 14.1428 18.8757 12.0478 18.7309 9.92691C18.5861 7.80604 17.6293 5.82265 16.0593 4.38932C14.4894 2.95599 12.4274 2.18308 10.3021 2.23138C8.17687 2.27968 6.15205 3.14547 4.64888 4.64864C3.14571 6.15181 2.27993 8.17663 2.23163 10.3019C2.18333 12.4271 2.95623 14.4892 4.38956 16.0591C5.82289 17.629 7.80629 18.5859 9.92715 18.7307C12.048 18.8755 14.1431 18.1971 15.7765 16.8365L20.4696 21.5306C20.5393 21.6003 20.622 21.6556 20.713 21.6933C20.8041 21.731 20.9017 21.7504 21.0002 21.7504C21.0988 21.7504 21.1963 21.731 21.2874 21.6933C21.3784 21.6556 21.4612 21.6003 21.5308 21.5306C21.6005 21.4609 21.6558 21.3782 21.6935 21.2871C21.7312 21.1961 21.7506 21.0985 21.7506 21C21.7506 20.9014 21.7312 20.8038 21.6935 20.7128C21.6558 20.6218 21.6005 20.539 21.5308 20.4693ZM3.75021 10.5C3.75021 9.16495 4.14609 7.8599 4.88779 6.74987C5.62949 5.63984 6.6837 4.77467 7.9171 4.26378C9.1505 3.75289 10.5077 3.61922 11.8171 3.87967C13.1264 4.14012 14.3292 4.78299 15.2732 5.727C16.2172 6.671 16.8601 7.87374 17.1205 9.18311C17.381 10.4925 17.2473 11.8497 16.7364 13.0831C16.2255 14.3165 15.3603 15.3707 14.2503 16.1124C13.1403 16.8541 11.8352 17.25 10.5002 17.25C8.71061 17.248 6.99488 16.5362 5.72944 15.2707C4.46399 14.0053 3.7522 12.2896 3.75021 10.5Z" fill="black"/></svg>');
        background-position: right 15px center;
        padding: 8px 48px 8px 16px;
        background-repeat: no-repeat;
        height: 44px !important;
    }

/* #group_management_wrapper.dataTables_wrapper .dataTables_filter {
        position: absolute;
        left: 0;
        top: -58px;
    }*/

.Zho_table tr td {
    padding: 16px 24px !important;
    border-bottom: #E7E6EA 1px solid !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    vertical-align: top !important;
}

.zho_table_label {
    color: var(--text-primary, #121212);
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.avatar-group-item:first-child .avthar-name {
    background: #F4BD21;
    color: #000;
    text-align: center;
    font-family: Almarai;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-group-item:nth-child(2n) .avthar-name {
    background: #F93E97;
    color: #FFF;
    text-align: center;
    font-family: Almarai;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-group-item:nth-child(3n) .avthar-name {
    background: #43D0E8;
    color: #FFF;
    text-align: center;
    font-family: Almarai;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-group-item:nth-child(4n) .avthar-name {
    background: #F4BD21;
    color: #000;
    text-align: center;
    font-family: Almarai;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-group-item:nth-child(5n) .avthar-name {
    background: #F93E97;
    color: #FFF;
    text-align: center;
    font-family: Almarai;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-group-item:nth-child(6n) .avthar-name {
    background: #43D0E8;
    color: #FFF;
    text-align: center;
    font-family: Almarai;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-group-item .more_name {
    background: #9152C0;
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Zho_table tr:hover td {
    background: #f1f1f1;
    vertical-align: top !important;
}

.Zho_table .zho_showmore {
    background: #F5F5F7;
}

.Zho_table .zho_showmore_table {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    margin: 0;
    transition: all 0.5s ease-in-out;
}

    .Zho_table .zho_showmore_table tr {
        padding: 0 !important;
        background: transparent !important;
    }

    .Zho_table .zho_showmore_table td {
        padding: 8px 0 8px 16px !important;
        background: transparent !important;
        border: 0px !important;
        vertical-align: top !important;
    }

    .Zho_table .zho_showmore_table .teacher_name {
        background: #fff;
        display: flex;
        padding: 8px 12px;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        margin-top: 10px;
    }

.notassign_label {
    font-size: 14px;
    font-weight: 600;
    color: #9152c0;
}

.addmore.modal {
    overflow: hidden;
    height: 500px;
}

.custom-small-popup .modal-body {
    overflow: auto;
    height: 290px;
}

.flex-1 {
    flex: 1;
}

.mx-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.zho_showmore_table .main_txt {
    color: var(--text-primary, #121212);
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.zho_showmore_table .teacher_name:first-child .avatar-group-item .avthar-name {
    background: #F4BD21;
}

.zho_showmore_table .teacher_name:nth-child(2n) .avatar-group-item .avthar-name {
    background: #F93E97;
}

.zho_showmore_table .teacher_name:nth-child(3n) .avatar-group-item .avthar-name {
    background: #43D0E8;
}

.zho_showmore_table .teacher_name:nth-child(4n) .avatar-group-item .avthar-name {
    background: #F4BD21;
}

.zho_showmore_table .teacher_name:nth-child(5n) .avatar-group-item .avthar-name {
    background: #F93E97;
}

.zho_showmore_table .teacher_name:nth-child(6n) .avatar-group-item .avthar-name {
    background: #43D0E8;
}

.zho_showmore_table .teacher_name:nth-child(7n) .avatar-group-item .avthar-name {
    background: #F4BD21;
}

.zho_showmore_table .teacher_name:nth-child(8n) .avatar-group-item .avthar-name {
    background: #F93E97;
}

.zho_showmore_table .teacher_name:nth-child(9n) .avatar-group-item .avthar-name {
    background: #43D0E8;
}

.zho_showmore_table .teacher_name:nth-child(10n) .avatar-group-item .avthar-name {
    background: #F4BD21;
}

.zho_showmore_table .teacher_name:nth-child(11n) .avatar-group-item .avthar-name {
    background: #F93E97;
}

.zho_showmore_table .teacher_name:nth-child(12n) .avatar-group-item .avthar-name {
    background: #43D0E8;
}

.addmore_members {
    margin: 10px 0 0 0;
}

    .addmore_members a {
        color: #1888CA;
        text-align: left;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M20.8125 12C20.8125 12.1492 20.7532 12.2923 20.6477 12.3977C20.5423 12.5032 20.3992 12.5625 20.25 12.5625H12.5625V20.25C12.5625 20.3992 12.5032 20.5423 12.3977 20.6477C12.2923 20.7532 12.1492 20.8125 12 20.8125C11.8508 20.8125 11.7077 20.7532 11.6023 20.6477C11.4968 20.5423 11.4375 20.3992 11.4375 20.25V12.5625H3.75C3.60082 12.5625 3.45774 12.5032 3.35225 12.3977C3.24676 12.2923 3.1875 12.1492 3.1875 12C3.1875 11.8508 3.24676 11.7077 3.35225 11.6023C3.45774 11.4968 3.60082 11.4375 3.75 11.4375H11.4375V3.75C11.4375 3.60082 11.4968 3.45774 11.6023 3.35225C11.7077 3.24676 11.8508 3.1875 12 3.1875C12.1492 3.1875 12.2923 3.24676 12.3977 3.35225C12.5032 3.45774 12.5625 3.60082 12.5625 3.75V11.4375H20.25C20.3992 11.4375 20.5423 11.4968 20.6477 11.6023C20.7532 11.7077 20.8125 11.8508 20.8125 12Z" fill="%231888CA"/></svg>');
        background-position: right 2px center;
        background-size: 24px;
        display: flex;
        align-items: center;
        margin: 8px 0 8px 0;
        background-repeat: no-repeat;
        padding: 0px 30px;
        cursor: pointer;
    }

.remove_teach {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .remove_teach img {
        height: 24px;
        width: 24px;
    }

.text-bold {
    font-weight: 600;
}

.bg-lightdark td {
    background: #f1f1f1 !important;
}

.Zho_sidemenu .mainmenu_head {
    color: #3484F0;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    padding: 0 16px;
    line-height: 21px;
    min-height: 65px;
    display: flex;
    align-items: center;
    margin-right: 35px;
}

.Zho_sidemenu .module1 .mainmenu_head {
    color: #1888CA;
}

.Zho_sidemenu .module2 .mainmenu_head {
    color: #F4BD21;
}

.Zho_sidemenu .module3 .mainmenu_head {
    color: #9152C0;
}

.Zho_sidemenu .module4 .mainmenu_head {
    color: #4C9C2E;
}

.Zho_sidemenu .module5 .mainmenu_head {
    color: #AE841F;
}

.Zho_sidemenu .module6 .mainmenu_head {
    color: #3484F0;
}

.Zho_sidemenu .module7 .mainmenu_head {
    color: #1888CA;
}

.Zho_sidemenu .module8 .mainmenu_head {
    color: #4C9C2E;
}
/***********data table End**************/



/******schedule calendar table start*****/

/* Responsive Table Style */
.assign_calender .responsive-table {
    background-color: #fefefe;
    border-collapse: collapse;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    margin: 1rem 0;
    overflow: hidden;
    border: 0 !important;
}

.assign_calender
.responsive-table__row {
    display: grid;
    padding: 0;
}


.assign_calender
.responsive-table__row {
    grid-template-columns: 4fr 4fr 4fr 4fr;
}


    .assign_calender
    .responsive-table__row th,
    .assign_calender
    .responsive-table__row td {
        padding: 1rem;
    }


/*@media (max-width: 991px) {
    .assign_calender
    .responsive-table__head {
        display: none;
    }
}*/

.assign_calender
.responsive-table__head__title {
    display: flex;
    align-items: center;
    font-weight: 500;
    text-transform: capitalize;
    padding: 1rem;
    background: transparent;
    color: #000;
    border: 0 !important;
}

.assign_calender
.responsive-table__body .responsive-table__row {
    transition: 0.1s linear;
    transition-property: color, background;
}

    .assign_calender
    .responsive-table__body .responsive-table__row:last-child {
        border-bottom: none;
    }
/*.assign_calender
    .responsive-table__body .responsive-table__row:hover {
        color: #ffffff;
        background-color: #fb4f83;
    }*/
.assign_calender
.responsive-table__body__text {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border-top: 1px solid var(--shades-platinum, #E7E6EA) !important;
    border-bottom: 0 !important;
    border-right: 0 solid var(--shades-platinum, #E7E6EA) !important;
    border-left: 1px solid var(--shades-platinum, #E7E6EA) !important;
    background: transparent;
    vertical-align: top !important;
    padding: 0 5px !important;
    margin: 0;
}

    .assign_calender
    .responsive-table__body__text:first-child {
        border-left: 0px solid var(--shades-platinum, #E7E6EA) !important;
        border-right: 0px solid var(--shades-platinum, #E7E6EA) !important;
        border-top: 0px solid var(--shades-platinum, #E7E6EA) !important;
    }

    .assign_calender
    .responsive-table__body__text:last-child {
        border-left: 0px solid var(--shades-platinum, #E7E6EA) !important;
        border-right: 0px solid var(--shades-platinum, #E7E6EA) !important;
    }

    .assign_calender .responsive-table__body__text::before {
        margin-left: 1rem;
        font-weight: 600;
        text-transform: capitalize;
    }

/*@media (max-width: 991px) {
    .assign_calender
    .responsive-table__body__text::before {
        content: attr(data-title);
    }
}*/

@media (max-width: 400px) {
    .assign_calender
    .responsive-table__body__text::before {
        width: 100%;
        margin-bottom: 1rem;
    }
}

.assign_calender
.responsive-table__body__text--name {
    font-weight: 600;
}

@media (min-width: 768px) {
    .assign_calender
    .responsive-table__body__text--name::before {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .assign_calender
    .responsive-table__body__text--name {
        grid-column: 1/2;
        flex-direction: column;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .assign_calender
    .responsive-table__body__text--status,
    .assign_calender .responsive-table__body__text--types,
    .assign_calender .responsive-table__body__text--update {
        grid-column: 2/3;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .assign_calender
    .responsive-table__body__text--country {
        grid-column: 3/-1;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .assign_calender
    .responsive-table__body__text--name,
    .assign_calender .responsive-table__body__text--country {
        grid-row: 2;
    }
}

/* SVG Up Arrow Style */
.assign_calender
.up-arrow {
    height: 100%;
    max-height: 1.8rem;
    margin-right: 1rem;
}

/* SVG User Icon Style */
.assign_calender
.user-icon {
    width: 100%;
    max-width: 4rem;
    height: auto;
    margin-left: 1rem;
}

/* Status Indicator Style */
.assign_calender
.status-indicator {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #222222;
    margin-left: 0.5rem;
}

.assign_calender
.status-indicator--active {
    background: #25be64;
}

.assign_calender
.status-indicator--inactive {
    background: #dadde4;
}

.assign_calender
.status-indicator--new {
    background: #febf02;
}

.bg_lightdark {
    background: #f5f5f6 !important;
}

.Scheduled_wrapper {
    border-radius: 4px;
    background: #9152C0;
    /*display: flex;*/
    color: #fff;
    flex-direction: column;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    display: block;
    text-overflow: ellipsis;
    padding: 5px 4px 5px 8px;
    margin: 5px 0;
    width: 100%;
    position: relative;
}

    .Scheduled_wrapper .ShedulerTeacherName {
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .Scheduled_wrapper .delete_session {
        position: absolute;
        left: 8px;
        top: 10px;
        width: 0;
    }

    .Scheduled_wrapper:hover .delete_session {
        position: absolute;
        left: 8px;
        top: 10px;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="308" height="352" viewBox="0 0 308 352" fill="none"><path d="M131.884 0C107.706 0 87.9229 19.7827 87.9229 43.9615H43.9615C19.7827 43.9615 0 63.7441 0 87.9229H307.73C307.73 63.7441 287.948 43.9615 263.769 43.9615H219.807C219.807 19.7827 200.025 0 175.846 0H131.884ZM43.9615 131.884V343.339C43.9615 348.175 47.4784 351.692 52.3141 351.692H255.856C260.692 351.692 264.208 348.175 264.208 343.339V131.884H220.247V285.75C220.247 298.059 210.575 307.73 198.266 307.73C185.957 307.73 176.285 298.059 176.285 285.75V131.884H132.324V285.75C132.324 298.059 122.652 307.73 110.343 307.73C98.0341 307.73 88.3625 298.059 88.3625 285.75V131.884H44.4011H43.9615Z" fill="white"/></svg>');
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        z-index: 1;
        background-size: 16px 16px;
        cursor: pointer;
    }


.no-Schedule {
    min-height: 10px;
}

.breakgrid {
    grid-template-columns: 4fr 1fr !important;
}

.breakgrid-full {
    grid-template-columns: 5fr !important;
}

.breaktime {
    border-radius: 4px;
    background: #E9DCF2;
    color: var(--text-primary, #121212);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* margin: 0 5px; */
    display: flex;
    width: 100%;
    padding: 3px 4px;
}

.px-2 {
    padding: 0 6px;
}

.Scheduled_wrapper_empty {
    border-radius: 4px;
    border: 1px dashed var(--shades-spanish-gray, #949494);
    background: var(--shades-platinum, #E7E6EA);
    display: flex;
    flex-direction: column;
    width: 100%;
    text-overflow: ellipsis;
    padding: 5px 4px 5px 8px;
    margin: 5px 0;
    color: var(--text-secondary, #595959);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    height: calc(100% - 10px);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 53px;
}

@media (max-width:992px) {
    .Scheduled_wrapper_empty {
        height: auto;
    }
}

.Scheduled_wrapper_empty div:first-child {
    font-weight: 600;
}

.Scheduled_wrapper_empty:hover, .Scheduled_wrapper_empty:active, .Scheduled_wrapper_empty:focus, .Scheduled_wrapper_empty_active {
    border: 1px solid #9152C0;
    background: #fff;
}

.schedule_table_right .responsive-table__body__text:last-child .calnder_poup {
    left: 20px;
}

.schedule_table_right {
    width: 20% !important;
}

.responsive-table.schedule_table_left {
    width: 80%;
}

.schedule_table {
    display: flex;
}
/*.schedule_table_left {
   width:calc(100% - 17%) !important;
}
.schedule_table_right {
    width:  17% !important;
}*/
.schedule_table_right .responsive-table__row {
    grid-template-columns: 1fr;
}

.assign_calender .schedule_table_right .responsive-table__body__text:first-child {
    border-top: 1px solid #e0e1e2 !important;
    border-right: 1px solid #e0e1e2 !important;
}

.min-height_22 {
    min-height: 22px;
}
/******schedule calendar table end ******/


/***********calender_popup******** start****************/
.calnder_poup {
    position: absolute;
    margin-top: 50px;
    width: calc(100% / 4 - 80px);
    z-index: 1;
}

.border-radius-0 {
    border-radius: 0;
}

@media(max-width:600px) {
    .calnder_poup {
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
    }
}

.calnder_poup .modal-dialog {
    box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.20);
}

.calnder_poup .modal-sm {
    width: 100%;
    min-width: 280px;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.btn_vocational, .btn_vocational:hover, .btn_vocational:active, .btn_vocational:focus {
    border-radius: 6px;
    background: #9152C0;
    color: #fff;
    border: 0;
    outline: none;
}

.btn_vocational_cancel, .btn_vocational_cancel:hover, .btn_vocational_cancel:active, .btn_vocational_cancel:focus {
    border-radius: 6px;
    background: var(--shades-platinum, #E7E6EA);
    color: #000;
    border: 0;
    outline: none;
}

@media (min-width: 768px) {
    .calender_popup.modal {
        background: transparent;
    }

    .calender_popup .modal-sm {
        width: 300px;
    }

    .calender_popup .modal-dialog {
        margin: 30px auto;
    }
}

.border-0 {
    border: 0px;
}

.calnder_poup .col-md-12 {
    width: 100%;
}
/***********calender_popup******** end****************/


/********addmore popup******/
.addmore {
    background: transparent;
}

.modal-sm {
    width: 480px;
    margin: 30px auto;
}

.addmore .modal-title {
    margin: 0;
    color: #000;
    font-weight: 600;
}


.addmore .col-md-12 {
    width: 100%;
}

.zho_label {
    display: block;
    margin-bottom: 5px;
    color: #000 !important;
}


.modal-sm .zho_form-control.bootstrap-select {
    background: transparent !important;
    padding: 0;
    width: 100%;
    text-overflow: ellipsis;
    height: auto;
}

    .modal-sm .zho_form-control.bootstrap-select .dropdown-toggle {
        background: transparent;
        padding: 8px 35px 8px 16px;
        min-height: 44px;
        height: auto;
        padding: 8px 35px 8px 16px;
        justify-content: flex-end;
        align-items: center;
        border-radius: 8px;
    }

    .modal-sm .zho_form-control.bootstrap-select.btn-group .dropdown-toggle .filter-option {
        white-space: break-spaces;
    }

/*================ ===End side menu new ==== =======================*/
/*================ ===Units start ==== =======================*/

.no-bg {
    background: transparent !important;
}

.no-shahow {
    box-shadow: none !important;
}

.units {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

    .units .input_search {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21.5308 20.4693L16.8368 15.7762C18.1973 14.1428 18.8757 12.0478 18.7309 9.92691C18.5861 7.80604 17.6293 5.82265 16.0593 4.38932C14.4894 2.95599 12.4274 2.18308 10.3021 2.23138C8.17687 2.27968 6.15205 3.14547 4.64888 4.64864C3.14571 6.15181 2.27993 8.17663 2.23163 10.3019C2.18333 12.4271 2.95623 14.4892 4.38956 16.0591C5.82289 17.629 7.80629 18.5859 9.92715 18.7307C12.048 18.8755 14.1431 18.1971 15.7765 16.8365L20.4696 21.5306C20.5393 21.6003 20.622 21.6556 20.713 21.6933C20.8041 21.731 20.9017 21.7504 21.0002 21.7504C21.0988 21.7504 21.1963 21.731 21.2874 21.6933C21.3784 21.6556 21.4612 21.6003 21.5308 21.5306C21.6005 21.4609 21.6558 21.3782 21.6935 21.2871C21.7312 21.1961 21.7506 21.0985 21.7506 21C21.7506 20.9014 21.7312 20.8038 21.6935 20.7128C21.6558 20.6218 21.6005 20.539 21.5308 20.4693ZM3.75021 10.5C3.75021 9.16495 4.14609 7.8599 4.88779 6.74987C5.62949 5.63984 6.6837 4.77467 7.9171 4.26378C9.1505 3.75289 10.5077 3.61922 11.8171 3.87967C13.1264 4.14012 14.3292 4.78299 15.2732 5.727C16.2172 6.671 16.8601 7.87374 17.1205 9.18311C17.381 10.4925 17.2473 11.8497 16.7364 13.0831C16.2255 14.3165 15.3603 15.3707 14.2503 16.1124C13.1403 16.8541 11.8352 17.25 10.5002 17.25C8.71061 17.248 6.99488 16.5362 5.72944 15.2707C4.46399 14.0053 3.7522 12.2896 3.75021 10.5Z" fill="black"/></svg>');
        background-position: left 15px center;
        padding: 8px 16px 8px 48px;
        background-repeat: no-repeat;
        height: 44px !important;
    }

.units_search {
    position: absolute;
    top: -66px;
    left: 0;
}

.unitwrapper {
    display: flex;
    /* width: 244px;*/
    width: calc(100% / 4 - 18px);
    padding-bottom: 0px;
    flex-direction: column;
    align-items: flex-end;
    border-radius: 8px;
    border: 1px solid var(--shades-platinum, #E7E6EA);
    background: var(--text-white, #FFF);
    margin-left: 24px;
    margin-bottom: 24px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}

    .unitwrapper:hover {
        position: relative;
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        z-index: 1;
    }


    .unitwrapper:last-child {
        margin-left: 0px;
        margin-bottom: 24px;
    }


    .unitwrapper ul, .unitwrapper ul li {
        padding: 0 !important;
        margin: 0 !important;
    }

.unit_pics {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    object-fit: fill;
    overflow: hidden;
    background: #e7f3f9;
}

    .unit_pics img {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        width: 100%;
        height: 100%;
    }

.unithead {
    color: var(--text-primary, #121212);
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    padding: 16px 16px 8px 16px;
    display: block;
}

.unit_label {
    color: var(--text-secondary, #595959);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    padding: 0 16px 8px 16px;
}

.unitlink_nxt {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21 11.9999C21 12.1988 20.921 12.3896 20.7803 12.5303C20.6397 12.6709 20.4489 12.7499 20.25 12.7499H5.56029L11.0306 18.2193C11.1003 18.289 11.1556 18.3717 11.1933 18.4628C11.231 18.5538 11.2504 18.6514 11.2504 18.7499C11.2504 18.8485 11.231 18.9461 11.1933 19.0371C11.1556 19.1281 11.1003 19.2109 11.0306 19.2806C10.9609 19.3502 10.8782 19.4055 10.7872 19.4432C10.6961 19.4809 10.5985 19.5003 10.5 19.5003C10.4014 19.5003 10.3039 19.4809 10.2128 19.4432C10.1218 19.4055 10.039 19.3502 9.96935 19.2806L3.21935 12.5306C3.14962 12.4609 3.0943 12.3782 3.05656 12.2871C3.01882 12.1961 2.99939 12.0985 2.99939 11.9999C2.99939 11.9014 3.01882 11.8038 3.05656 11.7127C3.0943 11.6217 3.14962 11.539 3.21935 11.4693L9.96935 4.7193C10.1101 4.57857 10.301 4.49951 10.5 4.49951C10.699 4.49951 10.8899 4.57857 11.0306 4.7193C11.1713 4.86003 11.2504 5.05091 11.2504 5.24993C11.2504 5.44895 11.1713 5.63982 11.0306 5.78055L5.56029 11.2499H20.25C20.4489 11.2499 20.6397 11.3289 20.7803 11.4696C20.921 11.6103 21 11.801 21 11.9999Z" fill="%23121212"/></svg>');
    width: 24px;
    display: inline-flex;
    height: 24px;
    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
    margin: 0 16px 8px 16px;
}

.searchableList span {
    display: block;
}

.unitwrapper:nth-child(4n), .unitwrapper:nth-child(8n), .unitwrapper:nth-child(12n) {
    margin-left: 0px;
}


@media (max-width:992px) {
    .units_search {
        position: relative;
        top: 0;
        margin-bottom: 24px;
    }

    .units .input_search {
        width: 100%;
    }

    .unitwrapper {
        width: calc(100% / 3 - 16px);
    }

        .unitwrapper:nth-child(3n), .unitwrapper:nth-child(6n), .unitwrapper:nth-child(9n), .unitwrapper:nth-child(12n) {
            margin-left: 0px;
        }

        .unitwrapper:nth-child(4n), .unitwrapper:nth-child(8n) {
            margin-left: 24px;
        }
}

@media (max-width:768px) {
    .unitwrapper {
        width: calc(100% / 2 - 12px);
    }

        .unitwrapper:nth-child(3n), .unitwrapper:nth-child(6n), .unitwrapper:nth-child(9n), .unitwrapper:nth-child(12n) {
            margin-left: 24px;
        }

        .unitwrapper:nth-child(2n), .unitwrapper:nth-child(4n), .unitwrapper:nth-child(6n), .unitwrapper:nth-child(8n), .unitwrapper:nth-child(10n), .unitwrapper:nth-child(12n) {
            margin-left: 0px;
        }
}

@media (max-width:480px) {
    .unitwrapper {
        width: calc(100% / 1 );
        margin-left: 0 !important;
    }
}

.align-items-center {
    align-items: center;
}
/*================ ===Units End ==== =======================*/

.nav-button {
    z-index: 100;
    position: fixed;
    top: 15px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    right: 15px
}

.nav-bars {
    width: 40px;
    height: 40px;
    top: 0;
    right: 17px;
}




/*icons*/


.Zho_sidemenu .nav.side-menu li.AssessmentColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Assessment.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.AssessmentColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Assessment_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}


.Zho_sidemenu .nav.side-menu li.EducationtColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Education.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.EducationtColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Education_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.HealthcareColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Healthcare.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.HealthcareColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Healthcare_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.VocationalColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Vocational.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.VocationalColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Vocational_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.SportClubColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/SportsClub.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.SportClubColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/SportsClub_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.CustomerHappnsColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Customerhappiness.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.CustomerHappnsColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Customerhappiness_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.PrivateCentersColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/PrivateCenters.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.PrivateCentersColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/PrivateCenters_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}


.Zho_sidemenu .nav.side-menu li.DashboardColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Dashboard.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.DashboardColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Dashboard_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.ReportsColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Reports.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.ReportsColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Reports_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.OtherColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Othericon.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.OtherColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Othericon_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.AdminColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Admin.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.AdminColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/Admin_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.HomeColourGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/home.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.HomeColourGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/home_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}


.Zho_sidemenu .nav.side-menu li.HomeinventoryGrp .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/inventory.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}

.Zho_sidemenu .nav.side-menu li.HomeinventoryGrp.active .fa-icon {
    background-size: 24px !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    background: #F5F5F7 url('../images/menu_icons/inventory_active.svg') no-repeat;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 56px;
}




/*icons end*/

/*color bg based on module start*/
.Zho_sidemenu .nav.side-menu li.AssessmentColourGrp.active li.current-page a {
    background: rgba(24, 136, 202, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.AssessmentColourGrp.active li a:hover {
    background: rgba(24, 136, 202, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}


.Zho_sidemenu .nav.side-menu li.EducationtColourGrp.active li.current-page a {
    background: rgba(244, 189, 33, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.EducationtColourGrp.active li a:hover {
    background: rgba(244, 189, 33, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.HealthcareColourGrp.active li.current-page a {
    background: rgba(24, 136, 202, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.HealthcareColourGrp.active li a:hover {
    background: rgba(24, 136, 202, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}


.Zho_sidemenu .nav.side-menu li.VocationalColourGrp.active li.current-page a {
    background: rgba(145, 82, 192, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.VocationalColourGrp.active li a:hover {
    background: rgba(145, 82, 192, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.SportClubColourGrp.active li.current-page a {
    background: rgba(24, 136, 202, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.SportClubColourGrp.active li a:hover {
    background: rgba(24, 136, 202, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.CustomerHappnsColourGrp.active li.current-page a {
    background: rgba(244, 189, 33, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.CustomerHappnsColourGrp.active li a:hover {
    background: rgba(244, 189, 33, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.PrivateCentersColourGrp.active li.current-page a {
    background: rgba(76, 156, 46, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.PrivateCentersColourGrp.active li a:hover {
    background: rgba(76, 156, 46, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.DashboardColourGrp.active li.current-page a {
    background: rgba(174, 132, 31, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.DashboardColourGrp.active li a:hover {
    background: rgba(174, 132, 31, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}


.Zho_sidemenu .nav.side-menu li.ReportsColourGrp.active li.current-page a {
    background: rgba(76, 156, 46, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.ReportsColourGrp.active li a:hover {
    background: rgba(76, 156, 46, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}



.Zho_sidemenu .nav.side-menu li.OtherColourGrp.active li.current-page a {
    background: rgba(174, 132, 31, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.OtherColourGrp.active li a:hover {
    background: rgba(174, 132, 31, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.AdminColourGrp.active li.current-page a {
    background: rgba(76, 156, 46, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.AdminColourGrp.active li a:hover {
    background: rgba(76, 156, 46, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}


.Zho_sidemenu .nav.side-menu li.HomeColourGrp.active li.current-page a {
    background: rgba(24, 136, 202, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.HomeColourGrp.active li a:hover {
    background: rgba(24, 136, 202, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}



.Zho_sidemenu .nav.side-menu li.HomeinventoryGrp.active li a:hover {
    background: rgba(76, 156, 46, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.HomeinventoryGrp.active li.current-page a {
    background: rgba(174, 132, 31, 0.2);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}

.Zho_sidemenu .nav.side-menu li.HomeinventoryGrp.active li a:hover {
    background: rgba(174, 132, 31, 0.1);
    color: var(--text-primary, #121212);
    border-radius: 6px;
}


/*color bg based on module End*/
/*===========================================================================End New Style by manaf based on new design 25-07-2023===========================================================================*/



/*===========================================================================Start New Style by manaf based on new design each units 02-08-2023===========================================================================*/
.each_units_banner {
    /*background: url(../images/banner_vocational.png) 100% no-repeat;*/
    background: transparent;
    background-position: top;
    object-fit: cover;
    display: flex;
    width: 100%;
    min-height: 264px;
    background-size: cover;
    padding: 32px 32px 0 32px;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}


.each_units_banner_img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.each_units_banner:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    background: linear-gradient(350deg, #000 0%, rgba(0, 0, 0, 0.2) 100%);
}

.z-index1 {
    z-index: 1;
}

.breadcum {
    color: var(--text-white, #FFF);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

    .breadcum span {
        padding-left: 8px;
    }

    .breadcum a {
        color: #fff !important;
        cursor: pointer;
    }

.each_units_banner .zho_head {
    color: var(--text-white, #FFF) !important;
}

.view_lessons_btn {
    display: inline-flex;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-white, #FFF) !important;
    text-align: center;
    border-radius: 6px;
    background: #9747FF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    align-items: center;
    cursor: pointer;
    margin: 5px 0;
}

.mb-24 {
    margin-bottom: 24px;
}

.lession_disc {
    display: flex;
    color: #fff;
    border-left: 1px solid #fff;
    align-items: center;
    margin-left: 32px;
    padding-left: 32px;
    margin-bottom: 24px;
}

@media(max-width:600px) {
    .lession_disc {
        display: flex;
        flex-direction: row;
        border: 0;
        margin: 0 0 8px 0;
        padding: 0;
        justify-content: start;
    }

        .lession_disc .d-flex.flex-column.pl-16 {
            flex-direction: row;
        }

            .lession_disc .d-flex.flex-column.pl-16 .count {
                margin: 0 5px;
            }

        .lession_disc svg {
            width: 20px;
        }

    .view_lessons_btn {
        margin-bottom: 10px;
    }
}


.lession_disc:last-child {
    border-left: 0px solid #fff;
}

.pl-16 {
    padding-right: 16px;
}

.lession_disc .count {
    font-weight: 700;
    line-height: 28px;
}

.unit_discrpn {
    padding: 32px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.unit_discrpn_head {
    color: var(--text-primary, #121212);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 32px;
    display: flex;
    align-items: center;
    margin: 46px 0 24px 0;
    width: 100%;
}

.unit_resorces {
    display: inline-flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid var(--shades-platinum, #E7E6EA);
    color: var(--text-primary, #121212);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-right: 16px;
    margin-bottom: 10px;
}

    .unit_resorces:last-child {
        margin-left: 0px;
    }

.Outcomes_counts {
    width: 100%;
    color: #121212;
}

    .Outcomes_counts ul {
        margin: 0;
        padding-right: 60px;
        position: relative;
        counter-reset: item;
    }

        .Outcomes_counts ul li {
            margin: 0 0 16px 0;
            padding: 0px;
        }

            .Outcomes_counts ul li .headtxt {
                color: var(--text-primary, #121212);
                font-size: 16px;
                font-style: normal;
                font-weight: 800;
                line-height: 24px;
                margin: 32px 0;
            }

            .Outcomes_counts ul li .headtxt_sub {
                color: var(--text-primary, #121212);
                font-size: 16px;
                font-style: normal;
                font-weight: 800;
                line-height: 24px;
                margin-bottom: 16px;
            }

.Performance_box {
    border-radius: 6px;
    border: 1px solid var(--shades-platinum, #E7E6EA);
    background: var(--text-white, #FFF);
    display: flex;
    padding: 16px 12px;
    align-items: center;
    width: calc(100% / 4 - 12px) !important;
    margin-left: 16px;
    margin-bottom: 32px;
    overflow: hidden;
}

    .Performance_box:nth-child(4n), .Performance_box:nth-child(8n) {
        margin-left: 0;
    }

.Outcomes_counts ul li:before {
    counter-increment: item;
    content: counter(item);
    font-weight: bold;
    position: absolute;
    right: 0;
    font-size: 14px;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid var(--shades-platinum, #E7E6EA);
    background: #fff;
    z-index: 1;
}

.Outcomes_counts ul li:after {
    content: "";
    position: absolute;
    right: 22px;
    top: 0;
    font-size: 14px;
    width: 1px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: #E7E6EA;
}

.Outcomes_counts ul li:last-child::after {
    content: none;
}

@media(max-width:991px) {
    .Performance_box {
        border-radius: 6px;
        border: 1px solid var(--shades-platinum, #E7E6EA);
        background: var(--text-white, #FFF);
        display: flex;
        padding: 16px 12px;
        align-items: center;
        width: calc(100% / 2 - 12px) !important;
        margin-left: 16px;
        margin-bottom: 32px;
    }

        .Performance_box:nth-child(4n), .Performance_box:nth-child(8n) {
            margin-left: 16px;
        }

        .Performance_box:nth-child(2n), .Performance_box:nth-child(4n), .Performance_box:nth-child(6n), .Performance_box:nth-child(8n) {
            margin-left: 0;
        }
}

@media(max-width:480px) {
    .Performance_box {
        border-radius: 6px;
        border: 1px solid var(--shades-platinum, #E7E6EA);
        background: var(--text-white, #FFF);
        display: flex;
        padding: 16px 12px;
        align-items: center;
        width: 100% !important;
        margin-left: 16px;
        margin-bottom: 32px;
    }

        .Performance_box:nth-child(4n), .Performance_box:nth-child(8n) {
            margin-left: 0;
        }

        .Performance_box:nth-child(2n), .Performance_box:nth-child(4n), .Performance_box:nth-child(6n), .Performance_box:nth-child(8n) {
            margin-left: 0;
        }
}

.scrol_sticky {
    position: static;
    flex-wrap: wrap;
}

body {
    --explore-nav_box-shadow-spread: 4px;
}

.sticky {
    position: fixed;
    top: 65px;
    background: #fff;
    color: #333 !important;
    width: calc(100% + 64px);
    padding: 5px 15px;
    margin: 0 -32px;
    box-shadow: rgb(0 0 0 / 16%) -5px 0 calc(2px + var(--explore-nav_box-shadow-spread));
    z-index: 9;
}

    .sticky h2.zho_head {
        color: #333 !important;
        font-size: 18px !important;
    }

    .sticky .view_lessons_btn {
        padding: 6px 12px;
        font-size: 14px;
        position: fixed;
        left: 15px;
    }


/*===========================================================================End New Style by manaf based on new design each units 02-08-2023===========================================================================*/



/*===========================================================================Start New Style by manaf based on new design each lesson 03-08-2023===========================================================================*/
.my-16 {
    margin-left: 16px;
    margin-right: 16px;
}

.mx-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.lesson_name {
    color: #1888CA !important;
}

.tab_change_wrapper .nav-tabs {
    border: 0;
}


    .tab_change_wrapper .nav-tabs > li > a {
        background: #fff;
        color: #595959;
        padding: 8px 16px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        border-bottom: 2px solid var(--shades-light-grey, #F5F5F7);
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
    }

        .tab_change_wrapper .nav-tabs > li > a:hover,
        .tab_change_wrapper .nav-tabs > li > a:active {
            background: #fff;
            color: #9152C0;
            padding: 8px 16px;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            border-bottom: 2px solid #9152C0;
            margin: 0;
            border-radius: 0;
            border-left: 0;
            border-right: 0;
            border-top: 0;
        }


    .tab_change_wrapper .nav-tabs > li.active > a {
        background: #fff;
        color: #9152C0;
        padding: 8px 16px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        border-bottom: 2px solid #9152C0;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
    }

        .tab_change_wrapper .nav-tabs > li.active > a:hover,
        .tab_change_wrapper .nav-tabs > li.active > a:active {
            background: #fff;
            color: #9152C0;
            padding: 8px 16px;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            border-bottom: 2px solid #9152C0;
            margin: 0;
            border-radius: 0;
            border-left: 0;
            border-right: 0;
            border-top: 0;
        }



    .tab_change_wrapper .nav-tabs > li > a:before,
    .tab_change_wrapper .nav-tabs > li > a:after {
        background: #9152C0;
        transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

.tab_change_wrapper .tab-pane {
    padding: 28px 0;
}

    .tab_change_wrapper .tab-pane .main-headtxt {
        color: var(--text-primary, #121212);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px; /* 155.556% */
        padding: 12px 0;
        display: flex;
    }

.main-headtxt {
    color: var(--text-primary, #121212);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
    padding: 12px 0;
    display: flex;
}

.tab_change_wrapper .tab-pane .sub-headtxt {
    color: var(--text-primary, #121212);
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    padding: 12px 0 16px 0;
    display: flex;
}

.sub-headtxt {
    color: var(--text-primary, #121212);
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    padding: 12px 0 16px 0;
    display: flex;
}

.tab_change_wrapper .tab-pane .list ul {
    padding: 0 12px 0 0;
    margin: 0 12px 0 0;
}

    .tab_change_wrapper .tab-pane .list ul li {
        padding: 0 0 16px 0;
        margin: 0;
        list-style: disc;
        color: #121212;
    }

.tab_change_wrapper .tab-pane .teach_notes {
    color: var(--text-primary, #121212);
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px; /* 140% */
    margin-bottom: 24px;
}


.teacher_notes_wrapper .list li .action_links {
    flex: 1;
    white-space: nowrap;
    padding: 0 8px;
    display: flex;
    justify-content: flex-end;
}

.teacher_notes_wrapper .teach_notes {
    color: var(--text-primary, #121212);
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px; /* 140% */
    margin-bottom: 24px;
}

.teacher_notes_wrapper .list ul {
    padding: 0 12px 0 0;
    margin: 0 12px 0 0;
}

    .teacher_notes_wrapper .list ul li {
        padding: 0 0 16px 0;
        margin: 0;
        list-style: disc;
        color: #121212;
    }

.teacher_notes_wrapper .addmore_links {
    color: #1888CA;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

/****file uploads start*/
.custom-file {
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
    padding: 5px;
    border: 1px dashed #cccc;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.custom-file-label {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #121212 !important;
}

.custom-file-input {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 100;
}

.custom-file img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    width: 15px;
}

ul.file-list {
    font-family: arial;
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
}

    ul.file-list li {
        border: 0px solid #ddd;
        padding: 5px 0;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 5px;
    }

.remove-list {
    cursor: pointer;
    margin-right: 10px;
}
/****file uploads End*/


.zho_textarea {
    background: var(--primary-100, #FFF);
    border: 1px solid #E7E6EA;
    padding: 12px;
    border-radius: 6px;
    color: #121212;
    outline: none;
    margin-bottom: 12px;
}

    .zho_textarea:focus, .zho_textarea:active {
        background: var(--primary-100, #FFF);
        border: 1px solid #9152C0;
        padding: 12px;
        border-radius: 6px;
        outline: none;
    }

.ml-16 {
    margin-left: 16px;
}

.mb-16 {
    margin-bottom: 16px;
}

.h-fitcontent {
    height: fit-content;
}

.tab_change_wrapper .action_links a {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab_change_wrapper .addmore_links {
    color: #1888CA;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    cursor: pointer;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.tab_change_wrapper .resources {
    display: flex;
}

    .tab_change_wrapper .resources a {
        display: flex;
        width: 48px;
        height: 48px;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        border: 1px solid var(--shades-platinum, #E7E6EA);
        margin-left: 16px;
        cursor: pointer;
    }

        .tab_change_wrapper .resources a:hover {
            border-radius: 50px;
            border: 1px solid var(--shades-platinum, #E7E6EA);
            background: var(--shades-light-grey, #F5F5F7);
        }

.eachunits .student_details {
    margin: 0 -5px 0 -5px;
    padding: 20px 5px 10px 6px;
}

    .eachunits .student_details .student_details_headtxt {
        color: #000;
        font-size: 20px;
        font-style: normal;
        font-weight: 800;
        line-height: 28px; /* 140% */
    }

    .eachunits .student_details .propic {
        width: 48px;
        height: 48px;
        border-radius: 48px;
        background: lightgray 50%;
        overflow: hidden;
    }

        .eachunits .student_details .propic img {
            width: 48px;
            height: 48px;
            border-radius: 48px;
            background: lightgray 50%;
            overflow: hidden;
        }

.font14 {
    font-size: 14px;
    color: #595959;
}

.ml-8 {
    margin-right: 8px;
}

.my-8 {
    margin-left: 8px;
    margin-right: 8px;
}

.border-right-1 {
    border-right: 1px solid #E7E6EA;
}

.student_info_wrapper {
    flex-wrap: wrap;
    margin-top: 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    }


/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bababa;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 5px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        top: 1px;
        background-color: #fff;
        /*background-image: linear-gradient(90deg,rgb(186,186,186) 25%,
    transparent 25%,
    transparent 50%,
    rgb(186,186,186) 50%,
    rgb(186,186,186) 75%,
    transparent 75%,
    transparent);*/
        -webkit-transition: 0.4s;
        transition: 0.4s;
        border-radius: 4px;
    }

input:checked + .slider {
    background-color: #4C9C2E;
}

input:focus + .slider {
    box-shadow: 0 0 1px #f77500;
}

input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.infolink {
    cursor: pointer;
    margin: 0 2px;
    display: flex;
    align-items: center;
}

.col-70 {
    width: calc(70vw - 250px);
    padding-bottom: 75px;
}


.nav-sm .col-70 {
    width: calc(70vw - 200px);
    padding-bottom: 75px;
}

.col-30 {
    width: calc(30vw - 100px);
}
/*radio*/
.Number_radioboxed {
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
}

    .Number_radioboxed label {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        transition: all 0.3s;
        margin-right: 8px;
        border-radius: 50px;
        border: 1px solid var(--shades-spanish-gray, #949494);
        background: var(--text-white, #FFF);
        color: var(--text-secondary, #595959);
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        cursor: pointer;
    }

        .Number_radioboxed label:last-child {
            margin-left: 0px;
        }

    .Number_radioboxed input[type="radio"] {
        display: none;
    }

        .Number_radioboxed input[type="radio"]:checked + label {
            border: 0;
            background: #9152C0;
            color: #fff !important;
        }


.student_detailscard {
    border-bottom: 1px solid #E7E6EA;
    margin: 0px;
    padding: 0 20px;
}

    .student_detailscard:last-child {
        border: 0;
    }

.mx-15 {
    margin: 0 15px;
}

.border-left-1 {
    border-right: 1px solid #E7E6EA;
}

.position-fixed::-webkit-scrollbar {
    width: 0px;
}

.position-fixed {
    position: fixed;
    left: 0;
    background: #fff;
    top: 65px;
    bottom: 55px;
    overflow-x: hidden;
    overflow-y: auto;
}
/**radio button start*/
.zho_radio {
    padding: 16px 0;
}

    .zho_radio
    .radio {
        margin: 0.5rem;
    }

        .zho_radio
        .radio input[type=radio] {
            position: absolute;
            opacity: 0;
        }

        .zho_radio .radio label {
            padding: 0;
        }

    .zho_radio
    .radio {
        display: inline-flex;
    }

        .zho_radio
        .radio input[type=radio] + .radio-label:before {
            content: "";
            background: #fff;
            border-radius: 100%;
            border: 1px solid #1888CA;
            display: inline-block;
            width: 1.4em;
            height: 1.4em;
            position: relative;
            top: 0;
            margin-left: 12px;
            vertical-align: top;
            cursor: pointer;
            text-align: center;
            transition: all 250ms ease;
        }

        .zho_radio
        .radio input[type=radio]:checked + .radio-label:before {
            background-color: #1888CA;
            box-shadow: inset 0 0 0 4px #f4f4f4;
        }

        .zho_radio
        .radio input[type=radio]:focus + .radio-label:before {
            outline: none;
            border-color: #3197ee;
        }

        .zho_radio
        .radio input[type=radio]:disabled + .radio-label:before {
            box-shadow: inset 0 0 0 4px #f4f4f4;
            border-color: #b4b4b4;
            background: #b4b4b4;
        }

        .zho_radio
        .radio input[type=radio] + .radio-label:empty:before {
            margin-right: 0;
        }


/**radio button end*/
@media (max-width:1074px) {
    .position-fixed {
        bottom: 70px;
    }
}

@media (max-width:991px) {
    .position-fixed {
        bottom: 28px;
    }

    .col-70 {
        width: calc(70vw - 40px );
    }

    .col-30 {
        width: calc(30vw);
    }
}

@media (max-width:600px) {
    .position-fixed {
        bottom: 0;
        top: 0;
        position: relative;
    }

    .eachunits {
        flex-direction: column;
    }

    .col-70 {
        width: 100%;
        padding-bottom: 0 !important;
    }

    .col-30 {
        width: 100%;
    }

    .border-left-1 {
        border-top: 1px solid #E7E6EA;
        border-right: 0 solid #E7E6EA;
    }

    footer {
        position: relative !important;
    }

    .student_detailscard:last-child {
        border: 0;
        padding-bottom: 40px;
    }
}


/*===========================================================================End New Style by manaf based on new design each lesson 03-08-2023===========================================================================*/




/*===========================================================================Start New Style by manaf based on new design all lesson 04-08-2023===========================================================================*/
.lesson_one {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid #E7E6EA;
    padding: 32px 0;
    position: relative;
}

.backlink_vocation {
    color: var(--text-primary, #121212) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    margin-bottom: 16px;
    display: inline-flex;
}

    .backlink_vocation img {
        margin-left: 5px;
    }


/*.lesson_one:last-child {
        border-bottom: 0px solid #E7E6EA;
    }*/

.yellow_box {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #F4BD21;
    margin-right: 16px;
    color: #121212;
    height: 24px;
}

.green_box {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #4C9C2E;
    margin-right: 16px;
    color: #fff;
    height: 24px;
}

.mr-4 {
    margin-left: 4px;
}

.sec_font {
    color: var(--text-secondary, #595959) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.font-label {
    color: var(--text-primary, #121212);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.active-green svg path {
    fill: #4C9C2E;
    stroke: #4C9C2E;
}

.active-yellow svg path {
    fill: #F4BD21;
    stroke: #F4BD21;
}

.lesson_link {
    color: var(--text-primary, #121212);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 5px;
}

    .lesson_link:hover, .lesson_link:active, .lesson_link:focus {
        text-decoration: underline;
        color: var(--text-primary, #121212);
    }

.progress_label {
    color: var(--text-secondary, #595959);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.lession_edit {
    display: flex;
    cursor: pointer;
    margin: 5px;
    justify-content: flex-end;
    position: absolute;
    left: 0;
    bottom: 10px;
}

.lesson_one .progress {
    width: 200px;
    border-radius: 4px;
    background: var(--shades-platinum, #E7E6EA);
    height: 8px;
    margin-bottom: 8px;
}

    .lesson_one .progress .progress-bar-color {
        border-radius: 4px;
        background: #4C9C2E;
    }

.font-size20 {
    font-size: 20px;
}


.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 220px
}

/*===========================================================================End New Style by manaf based on new design all lesson 04-08-2023===========================================================================*/


/*******logo color change based on class ******* start *******/

.Zho_sidemenu .new_logo.AssessmentColourGrp svg path {
    fill: #1888CA;
}

.Zho_sidemenu .new_logo.EducationtColourGrp svg path {
    fill: #F4BD21;
}

.Zho_sidemenu .new_logo.HealthcareColourGrp svg path {
    fill: #1888CA;
}

.Zho_sidemenu .new_logo.VocationalColourGrp svg path {
    fill: #9152C0;
}

.Zho_sidemenu .new_logo.SportClubColourGrp svg path {
    fill: #1888CA;
}

.Zho_sidemenu .new_logo.CustomerHappnsColourGrp svg path {
    fill: #F4BD21;
}

.Zho_sidemenu .new_logo.PrivateCentersColourGrp svg path {
    fill: #4C9C2E;
}

.Zho_sidemenu .new_logo.DashboardColourGrp svg path {
    fill: #AE841F;
}

.Zho_sidemenu .new_logo.ReportsColourGrp svg path {
    fill: #4C9C2E;
}

.Zho_sidemenu .new_logo.OtherColourGrp svg path {
    fill: #AE841F;
}

.Zho_sidemenu .new_logo.AdminColourGrp svg path {
    fill: #4C9C2E;
}


/***********/
.Zho_sidemenu .side-menu:before {
    content: '';
    background: #f5f5f7;
    height: 100vh;
    width: 72px;
    position: absolute;
    right: 0;
    top: 0;
}

.anchorAllHametList {
    width: auto;
}
/*******logo color change based on class ******* End *******/




/*========================================Start New page create sesson Style by manaf based on new design all lesson 10-08-2023================= ====*/
.min-height-auto {
    min-height: auto !important;
}


.form-select_zho {
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,<svg width="1097" height="610" viewBox="0 0 1097 610" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61 61L548.335 548.335L1035.67 61" stroke="gray" stroke-width="121.834" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 13px 7px !important;
    height: 44px;
    padding: 8px 16px 8px 35px;
    justify-content: flex-end;
    align-items: center;
    border-radius: 50px;
    background: #fff;
    text-overflow: ellipsis;
    margin-bottom: 25px;
    border: 1px solid #e2e2e2 !important;
}

.form-control_zho {
    box-shadow: none;
    height: 44px;
    padding: 8px 16px 8px 35px;
    justify-content: flex-end;
    align-items: center;
    border-radius: 50px !important;
    background: #fff;
    text-overflow: ellipsis;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    border: 1px solid #e2e2e2 !important;
    padding: 8px 35px 8px 16px;
    display: block;
    width: 100%;
}

.form-control_textarea {
    box-shadow: none;
    min-height: 80px;
    padding: 8px 35px 8px 16px;
    justify-content: flex-end;
    align-items: center;
    border-radius: 10px !important;
    background: #fff;
    text-overflow: ellipsis;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    border: 1px solid #e2e2e2 !important;
    padding: 8px 35px 8px 16px;
    display: block;
    width: 100%;
    outline: none !important;
}

.p-30 {
    padding: 30px;
}

input[type=file].zhofile::file-selector-button {
    border: 2px solid #ccc;
    padding: 6px 12px;
    border-radius: 50px;
    background-color: #ccc;
    transition: 1s;
    display: inline-flex;
    text-align: center;
    align-items: center;
}

.info-box {
    border-radius: 8px;
    background: #fff;
    color: #333 !important;
    padding: 25px 15px;
    box-shadow: rgb(0 0 0 / 9%) 2px 0px calc(2px + var(--explore-nav_box-shadow-spread));
    margin-bottom: 25px;
}

.addnew-link {
    position: absolute;
    bottom: -2px;
    left: 14px;
    color: #3786f0;
    cursor: pointer;
    text-decoration: underline;
}

.pt-10 {
    padding-top: 10px;
}

.zho-btn {
    background: #3484f0;
    border-radius: 50px;
    padding: 6px 15px;
    min-width: 80px;
    min-height: 46px;
    outline: none;
    color: #fff;
    margin-left: 10px;
}

.zho-btn-submit {
    background: #3484f0;
    border-radius: 50px;
    padding: 6px 15px;
    min-width: 120px;
    min-height: 46px;
    outline: none;
    color: #fff;
    margin: 0px;
}

.zho_multiselect {
    display: block !important;
    width: 100% !important;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    height: 44px;
    position: relative;
}

    .zho_multiselect .dropdown-toggle.btn-default {
        border-radius: 50px !important;
        height: 44px;
    }

    .zho_multiselect .dropdown-toggle .bs-caret .caret {
        top: 12px !important;
    }

    .zho_multiselect .dropdown-toggle.btn-default:hover {
        border: 1px solid #e2e2e2 !important;
    }

.btn {
    font-size: 16px;
}

.zho_multiselect .dropdown-menu li a {
    color: #121212 !important;
    font-size: 14px;
    padding: 6px 15px;
}

.zho_multiselect .no-results {
    padding: 3px;
    background: #f5f5f5;
    margin: 0 5px;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 4px;
    border-radius: 12px;
    font-size: 14px;
}

.zho_multiselect input[type=text], .zho_multiselect input[type=search] {
    border-radius: 20px;
}

.zho_multiselect .dropdown-menu {
    border-radius: 10px;
    margin: -1px 0 0 0;
    border-radius: 4px 4px 16px 16px;
    width: 100%;
}

    .zho_multiselect .dropdown-menu.inner {
        max-height: 150px !important;
    }

    .zho_multiselect .dropdown-menu li a span.text {
        white-space: normal;
    }

.attachment_ico {
    padding-left: 5px;
}

.remove_attachmnt svg {
    width: 25px;
    height: 25px
}

.remove_attachmnt {
    display: flex;
    align-items: center;
}

.tablebg {
    background: #fbfbfb;
    border-radius: 10px;
    margin: 5px;
}

.table_attachment {
    border: 0 !important;
    margin: 0;
}

    .table_attachment tr, .table_attachment td {
        border: 0 !important;
        padding: 8px 0;
        background: transparent;
    }


.table_matchColumn {
    border: 0 !important;
    /*margin: 0;*/
}

    .table_matchColumn tr, .table_matchColumn td {
        border: 0 !important;
        /* padding: 8px 0;*/
        background: transparent;
    }

.zho_multiselect.btn-group.show-tick .dropdown-menu li a span.text {
    margin-left: 34px;
    margin-right: 0 !important;
}

.zho_multiselect.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    left: 15px;
    right: inherit !important;
}

.searchinput {
    border-radius: 6px;
    border: 1px solid var(--neutral-quaternary, #D0D0D2);
    background: var(--neutral-white, #FFF);
    display: flex;
    padding: 12px 40px 12px 12px !important;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    background: #fff url("../images/search.svg") no-repeat right 12px center !important;
    height: 49px;
}

    .searchinput .dropdown-menu ul.dropdown-menu.inner li a {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2.4375C10.1087 2.4375 8.25991 2.99833 6.68736 4.04907C5.11482 5.09981 3.88917 6.59327 3.16541 8.34059C2.44164 10.0879 2.25227 12.0106 2.62125 13.8656C2.99022 15.7205 3.90096 17.4244 5.2383 18.7617C6.57564 20.099 8.27951 21.0098 10.1345 21.3788C11.9894 21.7477 13.9121 21.5584 15.6594 20.8346C17.4067 20.1108 18.9002 18.8852 19.9509 17.3126C21.0017 15.7401 21.5625 13.8913 21.5625 12C21.5595 9.46478 20.5511 7.03425 18.7584 5.24158C16.9658 3.44891 14.5352 2.44048 12 2.4375ZM12 20.4375C10.3312 20.4375 8.69992 19.9426 7.31238 19.0155C5.92484 18.0884 4.84338 16.7706 4.20477 15.2289C3.56616 13.6871 3.39907 11.9906 3.72463 10.3539C4.05019 8.71721 4.85379 7.21379 6.03379 6.03379C7.2138 4.85378 8.71722 4.05019 10.3539 3.72462C11.9906 3.39906 13.6871 3.56615 15.2289 4.20477C16.7706 4.84338 18.0884 5.92484 19.0155 7.31238C19.9427 8.69992 20.4375 10.3312 20.4375 12C20.435 14.237 19.5453 16.3817 17.9635 17.9635C16.3817 19.5453 14.237 20.435 12 20.4375ZM16.3125 12C16.3125 12.1492 16.2532 12.2923 16.1478 12.3977C16.0423 12.5032 15.8992 12.5625 15.75 12.5625H12.5625V15.75C12.5625 15.8992 12.5032 16.0423 12.3978 16.1477C12.2923 16.2532 12.1492 16.3125 12 16.3125C11.8508 16.3125 11.7077 16.2532 11.6023 16.1477C11.4968 16.0423 11.4375 15.8992 11.4375 15.75V12.5625H8.25C8.10082 12.5625 7.95775 12.5032 7.85226 12.3977C7.74677 12.2923 7.6875 12.1492 7.6875 12C7.6875 11.8508 7.74677 11.7077 7.85226 11.6023C7.95775 11.4968 8.10082 11.4375 8.25 11.4375H11.4375V8.25C11.4375 8.10082 11.4968 7.95774 11.6023 7.85225C11.7077 7.74676 11.8508 7.6875 12 7.6875C12.1492 7.6875 12.2923 7.74676 12.3978 7.85225C12.5032 7.95774 12.5625 8.10082 12.5625 8.25V11.4375H15.75C15.8992 11.4375 16.0423 11.4968 16.1478 11.6023C16.2532 11.7077 16.3125 11.8508 16.3125 12Z" fill="black"/></svg>') no-repeat left 8px center !important;
        padding: 15px;
        color: var(--neutral-dark, #121212);
        /* text-align: right; */
        /* font-family: "Expo Arabic"; */
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        display: flex;
        /* height: 48px; */
        padding: 16px;
        justify-content: space-between;
        align-items: center;
    }

/*========================================End New page create sesson Style by manaf based on new design all lesson 10-08-2023================= ====*/

/**********side toggle new icon style*/


.toggle_side_icon {
    position: fixed;
    right: 288px;
    top: 75px;
    z-index: 9;
    cursor: pointer;
    width: 25PX;
    height: 25px;
    border-radius: 50%;
    box-shadow: #eee 2px 2px 5px 1px;
}

    .toggle_side_icon img {
        width: 25PX;
        height: 25px;
        border-radius: 50%;
    }

.nav-sm .toggle_side_icon {
    position: fixed;
    right: 58px;
    top: 75px;
    z-index: 9999;
    cursor: pointer;
    display: block !important;
}

.nav-sm .main_menu_side {
    height: calc(100vh - 178px);
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-sm .right_col {
    background: #f9f9f9;
}

.Zho_sidemenu .hoverwrapper .side-menu > li.active .nav.child_menu {
    right: -300px;
}

.Zho_sidemenu .hoverwrapper:hover .side-menu > li.active .nav.child_menu {
    right: 72px;
    /* transition: .1s;*/
}

.Zho_sidemenu .hoverwrapper:hover .side-menu > li .nav.child_menu .sub_childmenu {
    right: 0;
}

.Zho_sidemenu .hoverwrapper:hover .side-menu > li.active .nav.child_menu .sub_childmenu {
    width: 100%;
}


@media (max-width: 991px) {
    .nav-sm .toggle_side_icon {
        display: none !important;
    }
}

.swiper {
    z-index: 0;
}
/**********/




/**************table zho new 17-08-23***************/
.zho-table.table-responsive {
    padding: 0px;
    margin: 0px 0;
}

.zho-table table {
    width: 100%;
    border: 0 !important;
    border-collapse: collapse;
    color: #121212;
}

    .zho-table table tr th {
        width: 100%;
        border: 0 !important;
        border-collapse: collapse;
        padding: 12px 16px !important;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        color: #121212;
        background: #F5F5F7;
        text-align: right;
        white-space: nowrap;
    }

    .zho-table table tr td {
        color: #121212;
        width: 100%;
        border-bottom: 1px solid #E7E6EA !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-left: 0 !important;
        border-collapse: collapse;
        padding: 24px 16px !important;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }

    .zho-table table tr:last-child td {
        border: 0px solid #E7E6EA !important;
    }


.zho-table .support_attachment {
    color: #1888CA;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

    .zho-table .support_attachment a {
        color: #1888CA;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        white-space: nowrap;
        cursor: pointer;
        text-decoration: none;
    }
/************************end table ZHO*/


.no-data-wrapper {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-content: center;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 408px);
    padding: 15px;
}

    .no-data-wrapper img {
        display: flex;
        width: 294px;
        align-content: center;
        justify-content: center;
    }


/**********confirmation alert box custom new */

/*.stack-modal {
    left: 20px !important;
    top: 65px !important;
    right: inherit !important;
    margin: 0 !important;
}*/

.stack-modal .alert-warning {
    background: #fff;
    color: #101010;
    border: 0;
    box-shadow: #ccc 2px 1px 3px 1px;
}

.stack-modal .ui-pnotify-action-bar .ui-pnotify-action-button:first-child {
    font-size: 16px;
    background: #9152c0;
    color: #fff;
    border: 1px solid #9152c0;
    border-radius: 6px;
}

.stack-modal .ui-pnotify-action-bar .ui-pnotify-action-button:nth-child(2n) {
    font-size: 16px;
    background: #fff;
    color: #101010;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/**********23-08-23 Exams styles************/
.mt-10 {
    margin-top: 10px;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.min-w200 {
    min-width: 200px;
}

.slider-wrapper {
    border-radius: 6px;
    background: var(--text-white, #FFF);
    padding: 12px 8px;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: 0.1s all;
    border-right: 4px solid transparent;
    border-left: 0px solid transparent !important;
}

    .slider-wrapper:hover, .slider-wrapper:active, .slider-wrapper:focus {
        border-right: 4px solid #9152C0;
        background: var(--shades-light-grey, #F5F5F7);
        cursor: pointer;
        box-shadow: none;
    }

.active-exam {
    border-right: 4px solid #9152C0;
    background: var(--shades-light-grey, #F5F5F7);
    cursor: pointer;
    box-shadow: none;
}

.left-picwrapper {
    height: 67px;
    width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .left-picwrapper img {
        object-fit: cover;
        width: 100%;
    }

.overflow-initial {
    overflow: initial;
}

.px-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.mt-64 {
    margin-top: 64px;
}

.mt-40 {
    margin-top: 40px;
}

.details-wrapper {
    padding: 24px 0;
    border-bottom: 1px solid #E7E6EA;
    display: flex;
    justify-content: space-between;
    color: var(--text-primary, #121212);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

    .details-wrapper a {
        cursor: pointer;
    }

        .details-wrapper a img {
            padding: 0 5px;
            height: 24px;
        }

    .details-wrapper h1 {
        color: var(--text-primary, #121212);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        padding: 0;
        color: #505050;
        /* background: red; */
        display: flex;
        justify-content: start;
        align-items: center;
    }

.d-none {
    display: none;
}

.zho-form-control-feedback.right {
    border: 0px solid #ccc;
    left: 13px;
}

.zho-form-control-feedback {
    height: 23px;
    color: #bbb;
    position: absolute;
    top: 17px;
    font-size: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.ml-0 {
    margin-left: 0px;
}

.color-sec {
    color: #6d6d6d !important;
}

.violet_text {
    color: #9152C0 !important;
}

.page_fileupload {
    height: 44px;
    border-radius: 10px !important;
}

.w-20 {
    width: 20%
}

@media (max-width:767px) {
    .w-20 {
        width: 100%
    }
}

.editbtn_sliderwrapper {
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
}

.editbtn_sliderwrapper {
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-content: center;
    display: none;
}


.active-exam.slider-wrapper .editbtn_sliderwrapper {
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-content: center;
    display: flex;
}

.lesson_one.progressbarexam {
    flex: 1;
    margin: 0 30px;
    padding: 0;
    border: 0 !important;
    justify-content: flex-end;
}
/**********23-08-23 Exams styles End************/

.picblack {
    filter: grayscale(1);
}




/*********vocational studentprofile start***********/
.wrapper_box {
    background: #FFF;
    filter: drop-shadow(2px 5px 18px rgba(0, 0, 0, 0.05));
    padding: 16px;
    margin-bottom: 15px;
    display: flex;
    border-radius: 8px;
    cursor: pointer;
}

.yearhead {
    color: var(--text-primary, #121212);
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 163.636% */
    margin: 0 0 5px 0;
    padding: 0;
    display: block;
}



.progressbar_grade {
    display: flex;
    flex-direction: column;
}

    .progressbar_grade .progress {
        width: 100%;
        border-radius: 4px;
        background: var(--shades-platinum, #E7E6EA);
        height: 10px;
        margin-bottom: 4px;
    }

    .progressbar_grade .sem1 .progress .progress-bar-color {
        background: #4C9C2E;
    }

    .progressbar_grade .sem2 .progress .progress-bar-color {
        background: #f5b126;
    }

    .progressbar_grade .sem3 .progress .progress-bar-color {
        background: #34b6fc;
    }

    .progressbar_grade .progress .progress-bar-color {
        border-radius: 4px;
    }

.mb-5 {
    margin-bottom: 5px;
}

.text-bolder {
    font-weight: 700;
}

.progress_ico img {
    width: 20px;
    opacity: 0.2;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}



/********/

.progressbig {
    background: rgba(255,255,255,0.1);
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 40px;
    width: 500px;
}

.progressbig-value {
    animation: load 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 30px;
    width: 0;
}

@keyframes load {
    0% {
        width: 0;
    }

    100% {
        width: 68%;
    }
}

.overall.progress .progress-bar {
    line-height: 30px;
}

.overall {
    height: 30px;
    border-radius: 8px;
    margin-bottom: 10px;
}

    .overall .progress-bar {
        background-color: #31555A;
    }

.progresautowidth {
    width: 80%;
    margin: auto;
}

.circle_grade {
    margin-bottom: 45px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 20px;
    text-align: center;
    margin-top: 20px;
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

/**circle progress*/
.circle_grade
.progress {
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}

    .circle_grade
    .progress:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 17px solid #FFF;
        position: absolute;
        top: 0;
        left: 0;
        background: #e2fbd7;
        z-index: -1;
    }

    .circle_grade
    .progress:before {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 12px solid #e2fbd7;
        position: absolute;
        top: 0;
        left: 0;
    }

    .circle_grade
    .progress > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .circle_grade
    .progress .progress-left {
        left: 0;
    }

    .circle_grade
    .progress .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 12px;
        border-style: solid;
        position: absolute;
        top: 0;
        border-color: #34B53A;
    }

    .circle_grade
    .progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: 75px;
        border-bottom-right-radius: 75px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    .circle_grade
    .progress .progress-right {
        right: 0;
    }

        .circle_grade
        .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 75px;
            border-bottom-left-radius: 75px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
        }

    .circle_grade
    .progress .progress-value {
        display: flex;
        border-radius: 50%;
        font-size: 36px;
        text-align: center;
        line-height: 20px;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-weight: 300;
    }

        .circle_grade
        .progress .progress-value div {
            margin-top: -10px;
        }

        .circle_grade
        .progress .progress-value span {
            font-size: 26px;
            text-transform: uppercase;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: normal;
            margin: 0 20px;
            line-height: 35px;
        }

.circle_grade .notqulified.progress:before {
    border: 12px solid #fbd7d7;
}

.circle_grade .notqulified.progress:before {
    border: 12px solid #fbd7d7;
}

.circle_grade .notqulified.progress:after {
    background: #fbd7d7;
}
/* This for loop creates the 	necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.circle_grade
.progress[data-percentage="10"] .progress-right .progress-bar {
    animation: loading-1 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="10"] .progress-left .progress-bar {
    animation: 0;
}

.circle_grade
.progress[data-percentage="20"] .progress-right .progress-bar {
    animation: loading-2 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="20"] .progress-left .progress-bar {
    animation: 0;
}

.circle_grade
.progress[data-percentage="30"] .progress-right .progress-bar {
    animation: loading-3 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="30"] .progress-left .progress-bar {
    animation: 0;
}

.circle_grade
.progress[data-percentage="40"] .progress-right .progress-bar {
    animation: loading-4 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="40"] .progress-left .progress-bar {
    animation: 0;
}

.circle_grade
.progress[data-percentage="50"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="50"] .progress-left .progress-bar {
    animation: 0;
}

.circle_grade
.progress[data-percentage="60"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="60"] .progress-left .progress-bar {
    animation: loading-1 1.5s linear forwards 1.5s;
}

.circle_grade
.progress[data-percentage="70"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="70"] .progress-left .progress-bar {
    animation: loading-2 1.5s linear forwards 1.5s;
}

.circle_grade
.progress[data-percentage="80"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="80"] .progress-left .progress-bar {
    animation: loading-3 1.5s linear forwards 1.5s;
}

.circle_grade
.progress[data-percentage="90"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="90"] .progress-left .progress-bar {
    animation: loading-4 1.5s linear forwards 1.5s;
}

.circle_grade
.progress[data-percentage="100"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.circle_grade
.progress[data-percentage="100"] .progress-left .progress-bar {
    animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(36);
        transform: rotate(36deg);
    }
}

@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(72);
        transform: rotate(72deg);
    }
}

@keyframes loading-3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(108);
        transform: rotate(108deg);
    }
}

@keyframes loading-4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(144);
        transform: rotate(144deg);
    }
}

@keyframes loading-5 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180);
        transform: rotate(180deg);
    }
}

.progress {
    margin-bottom: 1em;
}
/*********************/
.allunits_sem {
    margin: 10px 0 15px 0;
    display: flex;
}

.position-relative {
    position: relative;
}

.sem_unit {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 0;
    margin-bottom: 15px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
    background: #FFF;
    filter: drop-shadow(3px 2px 7px rgba(0, 0, 0, 0.05));
    padding: 0;
    border-radius: 16px;
    cursor: default !important;
}

    .sem_unit:hover {
        position: relative;
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }

.sem_searchableList {
    margin: 0;
    padding: 0;
    width: 100%;
}

    .sem_searchableList li {
        display: flex;
    }


    .sem_searchableList .unit_pics {
        border-radius: 0 16px 16px 0;
        object-fit: fill;
        overflow: hidden;
        background: #e7f3f9;
        width: 100px;
    }

        .sem_searchableList .unit_pics img {
            border-radius: 0 16px 16px 0;
            width: 100%;
            height: 100%;
        }

.sem-unithead {
    color: var(--text-primary, #121212);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    display: block;
}

.markbox {
    display: flex;
    color: #000;
    flex-wrap: wrap;
    font-size: 14px;
    margin: 5px 0 0 0;
}

    .markbox .boxAvg {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #f5e8f2;
        border-radius: 12px;
        margin: 5px 0 0 10px;
    }

    .markbox .box1 {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #E2FBD7;
        border-radius: 12px;
        margin: 5px 0 0 10px;
    }

    .markbox .box2 {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #FFF0D1;
        border-radius: 12px;
        margin: 5px 0 0 10px;
    }

    .markbox .box3 {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #CCF8FE;
        border-radius: 12px;
        margin: 5px 0 0 10px;
    }

    .markbox .box4 {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #F1D1D1;
        border-radius: 12px;
        margin: 5px 0 0 10px;
    }

.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.gradewrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    color: #3D3D3D;
    padding: 0 15px;
}

.gradesystem {
    display: flex;
}

.gradewrapper div {
    color: #3D3D3D !important;
}

.gradebox {
    background: #E2FBD7;
    display: flex;
    align-content: center;
    justify-content: center;
    color: #3D3D3D;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    padding: 2px 8px;
    margin: 0 5px 0 0;
    border-radius: 4px;
}

.units_search1 {
    position: absolute;
    top: -60px;
    left: 0;
}


@media (max-width:768px) {
    .sem_searchableList li {
        display: flex;
        flex-direction: column;
    }

    .unit_pics {
        width: 100% !important;
        height: 100px;
        border-radius: 16px 16px 0 0px !important;
    }

    .markbox {
        display: flex;
        color: #000;
        flex-wrap: wrap;
        font-size: 14px;
        margin: 10px 0;
        justify-content: center;
    }

    .gradewrapper {
        align-items: center;
        padding: 0px 15px 15px 15px;
    }

    .sem-unithead {
        text-align: center;
    }

    .units_search1 {
        position: relative;
        top: -13px;
        margin: auto;
    }
}

.units #searchableSection {
    display: flex;
}

.active_semester1 {
    border-right: 3px solid #4c9c2e;
}

.active_semester2 {
    border-right: 3px solid #f5b126;
}

.active_semester3 {
    border-right: 3px solid #34b6fc;
}

/*********vocational studentprofile End***********/


/*********vocational studentprofile End***********/
/*toggle 3feilds checkbox*/
.switch-field {
    display: flex;
    margin-bottom: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    margin: 5px 0;
}

    .switch-field input {
        position: absolute !important;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        width: 1px;
        border: 0;
        overflow: hidden;
    }

    .switch-field label {
        background-color: #fff;
        color: rgba(0, 0, 0, 0.6);
        font-size: 14px;
        line-height: 1;
        text-align: center;
        padding: 8px 16px;
        margin-right: -1px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: none;
        transition: all 0.1s ease-in-out;
        margin-bottom: 0px;
    }

        .switch-field label:hover {
            cursor: pointer;
        }

    .switch-field input:checked + label {
        background-color: #31555a;
        box-shadow: none;
        color: #fff !important;
    }

    .switch-field label:first-of-type {
        border-radius: 0 8px 8px 0;
    }

    .switch-field label:last-of-type {
        border-radius: 8px 0 0 8px;
    }

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




/****************circle container*******************/
.circle-container {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    position: relative;
}

    .circle-container .circle {
        margin: 0px 10px;
    }

.circle.percentage-100 .percentage-bar:after, .circle.percentage-99 .percentage-bar:after, .circle.percentage-98 .percentage-bar:after, .circle.percentage-97 .percentage-bar:after, .circle.percentage-96 .percentage-bar:after, .circle.percentage-95 .percentage-bar:after, .circle.percentage-94 .percentage-bar:after, .circle.percentage-93 .percentage-bar:after, .circle.percentage-92 .percentage-bar:after, .circle.percentage-91 .percentage-bar:after, .circle.percentage-90 .percentage-bar:after, .circle.percentage-89 .percentage-bar:after, .circle.percentage-88 .percentage-bar:after, .circle.percentage-87 .percentage-bar:after, .circle.percentage-86 .percentage-bar:after, .circle.percentage-85 .percentage-bar:after, .circle.percentage-84 .percentage-bar:after, .circle.percentage-83 .percentage-bar:after, .circle.percentage-82 .percentage-bar:after, .circle.percentage-81 .percentage-bar:after, .circle.percentage-80 .percentage-bar:after, .circle.percentage-79 .percentage-bar:after, .circle.percentage-78 .percentage-bar:after, .circle.percentage-77 .percentage-bar:after, .circle.percentage-76 .percentage-bar:after, .circle.percentage-75 .percentage-bar:after, .circle.percentage-74 .percentage-bar:after, .circle.percentage-73 .percentage-bar:after, .circle.percentage-72 .percentage-bar:after, .circle.percentage-71 .percentage-bar:after, .circle.percentage-70 .percentage-bar:after, .circle.percentage-69 .percentage-bar:after, .circle.percentage-68 .percentage-bar:after, .circle.percentage-67 .percentage-bar:after, .circle.percentage-66 .percentage-bar:after, .circle.percentage-65 .percentage-bar:after, .circle.percentage-64 .percentage-bar:after, .circle.percentage-63 .percentage-bar:after, .circle.percentage-62 .percentage-bar:after, .circle.percentage-61 .percentage-bar:after, .circle.percentage-60 .percentage-bar:after, .circle.percentage-59 .percentage-bar:after, .circle.percentage-58 .percentage-bar:after, .circle.percentage-57 .percentage-bar:after, .circle.percentage-56 .percentage-bar:after, .circle.percentage-55 .percentage-bar:after, .circle.percentage-54 .percentage-bar:after, .circle.percentage-53 .percentage-bar:after, .circle.percentage-52 .percentage-bar:after, .circle.percentage-51 .percentage-bar:after {
    position: absolute;
    content: "";
    -webkit-clip-path: inset(0 0 0 50%);
    clip-path: inset(0 0 0 50%);
    transform: rotate(0deg);
    width: 60px;
    height: 60px;
    border: 6px solid #34B53A;
    background: transparent;
    border-radius: 100%;
    transition: width 0.2s ease-out, height 0.2s ease-out, border-width 0.2s ease-out;
}

.circle.percentage-100 .percentage-bar, .circle.percentage-99 .percentage-bar, .circle.percentage-98 .percentage-bar, .circle.percentage-97 .percentage-bar, .circle.percentage-96 .percentage-bar, .circle.percentage-95 .percentage-bar, .circle.percentage-94 .percentage-bar, .circle.percentage-93 .percentage-bar, .circle.percentage-92 .percentage-bar, .circle.percentage-91 .percentage-bar, .circle.percentage-90 .percentage-bar, .circle.percentage-89 .percentage-bar, .circle.percentage-88 .percentage-bar, .circle.percentage-87 .percentage-bar, .circle.percentage-86 .percentage-bar, .circle.percentage-85 .percentage-bar, .circle.percentage-84 .percentage-bar, .circle.percentage-83 .percentage-bar, .circle.percentage-82 .percentage-bar, .circle.percentage-81 .percentage-bar, .circle.percentage-80 .percentage-bar, .circle.percentage-79 .percentage-bar, .circle.percentage-78 .percentage-bar, .circle.percentage-77 .percentage-bar, .circle.percentage-76 .percentage-bar, .circle.percentage-75 .percentage-bar, .circle.percentage-74 .percentage-bar, .circle.percentage-73 .percentage-bar, .circle.percentage-72 .percentage-bar, .circle.percentage-71 .percentage-bar, .circle.percentage-70 .percentage-bar, .circle.percentage-69 .percentage-bar, .circle.percentage-68 .percentage-bar, .circle.percentage-67 .percentage-bar, .circle.percentage-66 .percentage-bar, .circle.percentage-65 .percentage-bar, .circle.percentage-64 .percentage-bar, .circle.percentage-63 .percentage-bar, .circle.percentage-62 .percentage-bar, .circle.percentage-61 .percentage-bar, .circle.percentage-60 .percentage-bar, .circle.percentage-59 .percentage-bar, .circle.percentage-58 .percentage-bar, .circle.percentage-57 .percentage-bar, .circle.percentage-56 .percentage-bar, .circle.percentage-55 .percentage-bar, .circle.percentage-54 .percentage-bar, .circle.percentage-53 .percentage-bar, .circle.percentage-52 .percentage-bar, .circle.percentage-51 .percentage-bar {
    -webkit-clip-path: none;
    clip-path: none;
}

/* percentage circle style */
.circle {
    width: 60px;
    height: 60px;
    cursor: default;
}

    .circle span {
        position: absolute;
        display: block;
        vertical-align: middle;
        width: 60px;
        height: 60px;
        text-align: center;
        color: #000000;
        line-height: 60px;
        font-size: 16px;
        font-weight: 600;
        transition: font-size 0.2s ease-out;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .circle:before {
        position: absolute;
        content: "";
        background-color: transparent;
        width: 60px;
        height: 60px;
        border: 6px solid #e2fbd7;
        background: transparent;
        border-radius: 100%;
        transition: width 0.2s ease-out, height 0.2s ease-out, border-width 0.2s ease-out;
    }

    .circle .percentage-bar {
        width: 60px;
        height: 60px;
        position: absolute;
        -webkit-clip-path: inset(0 0 0 50%);
        clip-path: inset(0 0 0 50%);
    }

        .circle .percentage-bar:before {
            position: absolute;
            content: "";
            -webkit-clip-path: inset(0 50% 0 0);
            clip-path: inset(0 50% 0 0);
            transform: rotate(0deg);
            width: 60px;
            height: 60px;
            border: 6px solid #34b53a;
            background: transparent;
            border-radius: 100%;
            transition: width 0.2s ease-out, height 0.2s ease-out, border-width 0.2s ease-out;
        }

    .circle:hover:before {
        width: 60px;
        height: 60px;
        border-width: 8px;
    }

    .circle:hover span {
        font-size: 18px;
    }

    .circle:hover .percentage-bar:before, .circle:hover .percentage-bar:after {
        width: 60px;
        height: 60px;
        border-width: 8px;
    }

    .circle.percentage-1 .percentage-bar:before {
        transform: rotate(3.6deg);
    }

    .circle.percentage-2 .percentage-bar:before {
        transform: rotate(7.2deg);
    }

    .circle.percentage-3 .percentage-bar:before {
        transform: rotate(10.8deg);
    }

    .circle.percentage-4 .percentage-bar:before {
        transform: rotate(14.4deg);
    }

    .circle.percentage-5 .percentage-bar:before {
        transform: rotate(18deg);
    }

    .circle.percentage-6 .percentage-bar:before {
        transform: rotate(21.6deg);
    }

    .circle.percentage-7 .percentage-bar:before {
        transform: rotate(25.2deg);
    }

    .circle.percentage-8 .percentage-bar:before {
        transform: rotate(28.8deg);
    }

    .circle.percentage-9 .percentage-bar:before {
        transform: rotate(32.4deg);
    }

    .circle.percentage-10 .percentage-bar:before {
        transform: rotate(36deg);
    }

    .circle.percentage-11 .percentage-bar:before {
        transform: rotate(39.6deg);
    }

    .circle.percentage-12 .percentage-bar:before {
        transform: rotate(43.2deg);
    }

    .circle.percentage-13 .percentage-bar:before {
        transform: rotate(46.8deg);
    }

    .circle.percentage-14 .percentage-bar:before {
        transform: rotate(50.4deg);
    }

    .circle.percentage-15 .percentage-bar:before {
        transform: rotate(54deg);
    }

    .circle.percentage-16 .percentage-bar:before {
        transform: rotate(57.6deg);
    }

    .circle.percentage-17 .percentage-bar:before {
        transform: rotate(61.2deg);
    }

    .circle.percentage-18 .percentage-bar:before {
        transform: rotate(64.8deg);
    }

    .circle.percentage-19 .percentage-bar:before {
        transform: rotate(68.4deg);
    }

    .circle.percentage-20 .percentage-bar:before {
        transform: rotate(72deg);
    }

    .circle.percentage-21 .percentage-bar:before {
        transform: rotate(75.6deg);
    }

    .circle.percentage-22 .percentage-bar:before {
        transform: rotate(79.2deg);
    }

    .circle.percentage-23 .percentage-bar:before {
        transform: rotate(82.8deg);
    }

    .circle.percentage-24 .percentage-bar:before {
        transform: rotate(86.4deg);
    }

    .circle.percentage-25 .percentage-bar:before {
        transform: rotate(90deg);
    }

    .circle.percentage-26 .percentage-bar:before {
        transform: rotate(93.6deg);
    }

    .circle.percentage-27 .percentage-bar:before {
        transform: rotate(97.2deg);
    }

    .circle.percentage-28 .percentage-bar:before {
        transform: rotate(100.8deg);
    }

    .circle.percentage-29 .percentage-bar:before {
        transform: rotate(104.4deg);
    }

    .circle.percentage-30 .percentage-bar:before {
        transform: rotate(108deg);
    }

    .circle.percentage-31 .percentage-bar:before {
        transform: rotate(111.6deg);
    }

    .circle.percentage-32 .percentage-bar:before {
        transform: rotate(115.2deg);
    }

    .circle.percentage-33 .percentage-bar:before {
        transform: rotate(118.8deg);
    }

    .circle.percentage-34 .percentage-bar:before {
        transform: rotate(122.4deg);
    }

    .circle.percentage-35 .percentage-bar:before {
        transform: rotate(126deg);
    }

    .circle.percentage-36 .percentage-bar:before {
        transform: rotate(129.6deg);
    }

    .circle.percentage-37 .percentage-bar:before {
        transform: rotate(133.2deg);
    }

    .circle.percentage-38 .percentage-bar:before {
        transform: rotate(136.8deg);
    }

    .circle.percentage-39 .percentage-bar:before {
        transform: rotate(140.4deg);
    }

    .circle.percentage-40 .percentage-bar:before {
        transform: rotate(144deg);
    }

    .circle.percentage-41 .percentage-bar:before {
        transform: rotate(147.6deg);
    }

    .circle.percentage-42 .percentage-bar:before {
        transform: rotate(151.2deg);
    }

    .circle.percentage-43 .percentage-bar:before {
        transform: rotate(154.8deg);
    }

    .circle.percentage-44 .percentage-bar:before {
        transform: rotate(158.4deg);
    }

    .circle.percentage-45 .percentage-bar:before {
        transform: rotate(162deg);
    }

    .circle.percentage-46 .percentage-bar:before {
        transform: rotate(165.6deg);
    }

    .circle.percentage-47 .percentage-bar:before {
        transform: rotate(169.2deg);
    }

    .circle.percentage-48 .percentage-bar:before {
        transform: rotate(172.8deg);
    }

    .circle.percentage-49 .percentage-bar:before {
        transform: rotate(176.4deg);
    }

    .circle.percentage-50 .percentage-bar:before {
        transform: rotate(180deg);
    }

    .circle.percentage-51 .percentage-bar:before {
        transform: rotate(183.6deg);
    }

    .circle.percentage-52 .percentage-bar:before {
        transform: rotate(187.2deg);
    }

    .circle.percentage-53 .percentage-bar:before {
        transform: rotate(190.8deg);
    }

    .circle.percentage-54 .percentage-bar:before {
        transform: rotate(194.4deg);
    }

    .circle.percentage-55 .percentage-bar:before {
        transform: rotate(198deg);
    }

    .circle.percentage-56 .percentage-bar:before {
        transform: rotate(201.6deg);
    }

    .circle.percentage-57 .percentage-bar:before {
        transform: rotate(205.2deg);
    }

    .circle.percentage-58 .percentage-bar:before {
        transform: rotate(208.8deg);
    }

    .circle.percentage-59 .percentage-bar:before {
        transform: rotate(212.4deg);
    }

    .circle.percentage-60 .percentage-bar:before {
        transform: rotate(216deg);
    }

    .circle.percentage-61 .percentage-bar:before {
        transform: rotate(219.6deg);
    }

    .circle.percentage-62 .percentage-bar:before {
        transform: rotate(223.2deg);
    }

    .circle.percentage-63 .percentage-bar:before {
        transform: rotate(226.8deg);
    }

    .circle.percentage-64 .percentage-bar:before {
        transform: rotate(230.4deg);
    }

    .circle.percentage-65 .percentage-bar:before {
        transform: rotate(234deg);
    }

    .circle.percentage-66 .percentage-bar:before {
        transform: rotate(237.6deg);
    }

    .circle.percentage-67 .percentage-bar:before {
        transform: rotate(241.2deg);
    }

    .circle.percentage-68 .percentage-bar:before {
        transform: rotate(244.8deg);
    }

    .circle.percentage-69 .percentage-bar:before {
        transform: rotate(248.4deg);
    }

    .circle.percentage-70 .percentage-bar:before {
        transform: rotate(252deg);
    }

    .circle.percentage-71 .percentage-bar:before {
        transform: rotate(255.6deg);
    }

    .circle.percentage-72 .percentage-bar:before {
        transform: rotate(259.2deg);
    }

    .circle.percentage-73 .percentage-bar:before {
        transform: rotate(262.8deg);
    }

    .circle.percentage-74 .percentage-bar:before {
        transform: rotate(266.4deg);
    }

    .circle.percentage-75 .percentage-bar:before {
        transform: rotate(270deg);
    }

    .circle.percentage-76 .percentage-bar:before {
        transform: rotate(273.6deg);
    }

    .circle.percentage-77 .percentage-bar:before {
        transform: rotate(277.2deg);
    }

    .circle.percentage-78 .percentage-bar:before {
        transform: rotate(280.8deg);
    }

    .circle.percentage-79 .percentage-bar:before {
        transform: rotate(284.4deg);
    }

    .circle.percentage-80 .percentage-bar:before {
        transform: rotate(288deg);
    }

    .circle.percentage-81 .percentage-bar:before {
        transform: rotate(291.6deg);
    }

    .circle.percentage-82 .percentage-bar:before {
        transform: rotate(295.2deg);
    }

    .circle.percentage-83 .percentage-bar:before {
        transform: rotate(298.8deg);
    }

    .circle.percentage-84 .percentage-bar:before {
        transform: rotate(302.4deg);
    }

    .circle.percentage-85 .percentage-bar:before {
        transform: rotate(306deg);
    }

    .circle.percentage-86 .percentage-bar:before {
        transform: rotate(309.6deg);
    }

    .circle.percentage-87 .percentage-bar:before {
        transform: rotate(313.2deg);
    }

    .circle.percentage-88 .percentage-bar:before {
        transform: rotate(316.8deg);
    }

    .circle.percentage-89 .percentage-bar:before {
        transform: rotate(320.4deg);
    }

    .circle.percentage-90 .percentage-bar:before {
        transform: rotate(324deg);
    }

    .circle.percentage-91 .percentage-bar:before {
        transform: rotate(327.6deg);
    }

    .circle.percentage-92 .percentage-bar:before {
        transform: rotate(331.2deg);
    }

    .circle.percentage-93 .percentage-bar:before {
        transform: rotate(334.8deg);
    }

    .circle.percentage-94 .percentage-bar:before {
        transform: rotate(338.4deg);
    }

    .circle.percentage-95 .percentage-bar:before {
        transform: rotate(342deg);
    }

    .circle.percentage-96 .percentage-bar:before {
        transform: rotate(345.6deg);
    }

    .circle.percentage-97 .percentage-bar:before {
        transform: rotate(349.2deg);
    }

    .circle.percentage-98 .percentage-bar:before {
        transform: rotate(352.8deg);
    }

    .circle.percentage-99 .percentage-bar:before {
        transform: rotate(356.4deg);
    }

    .circle.percentage-100 .percentage-bar:before {
        transform: rotate(360deg);
    }


/*************end circle */
.absent_type {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 5px;
    border: 4px solid #f9938f;
    box-shadow: #ededed 2px 1px 6px 1px;
    flex-direction: column;
    background: #f9938f;
    overflow: hidden;
    width: 70px;
}

.absent_type_color1 {
    border: 4px solid #e8a270 !important;
    background: #e8a270 !important;
}

.absent_type_color2 {
    border: 4px solid #6494db !important;
    background: #6494db !important;
}

.absent_type_color3 {
    border: 4px solid #ffb000 !important;
    background: #ffb000 !important;
}

.absent_type_lbl {
    color: #fff;
    padding: 0 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.absent_type_pic {
    background: #fff;
    width: 100%;
    text-align: center;
    padding: 5px 0 5px 0;
    margin-bottom: 5px;
}

    .absent_type_pic img {
        width: 30px;
    }
/****/
.mark_alllesson_box {
    background: #FFF;
    filter: drop-shadow(2px 5px 18px rgba(0, 0, 0, 0.05));
    padding: 0 16px;
    margin-bottom: 15px;
    display: flex;
    border-radius: 0 0 16px 16px;
    cursor: pointer;
    width: 100%;
    flex-direction: column;
}

.max-height300 {
    max-height: 315px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 0;
}

.mark_alllesson .bb-1-dashed:last-child {
    border-bottom: 0px dashed #E7E7E7;
}

.bb-1-dashed {
    border-bottom: 1px dashed #E7E7E7;
}


.expandarrow {
    align-items: center;
    display: inline-flex;
    background: #fff;
    justify-content: center;
    width: 30px;
    margin: 5px 10px 0 0px;
    border-radius: 50%;
    height: 30px;
}

    .expandarrow img {
        height: 22px;
        width: 22px;
    }

.sem_unit .expandarrow img {
    transform: rotate(180deg);
    filter: brightness(0.5);
}

.sem_unit_active .expandarrow img {
    transform: rotate(0deg);
    filter: brightness(0.5);
}

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




/***********************************EGYPT DASHBOARD***********************/

.dashboardbox {
    background: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    /* min-height: 157px;*/
    height: 100%;
}

.equal .col-lg-2, .equal .col-md-4, .equal .col-sm-12, .equal .col-xs-12,
.equal .col-lg-6, .equal .col-md-6, .equal .col-sm-12 {
    margin-bottom: 15px;
}
/* @media (max-width:992px) {
    .dashboardbox {
        margin-bottom:30px;
    }
}*/
.greendashbg {
    background: #E2FBD7;
}

.reddashbg {
    background: #FFE5D3;
}

.bluedashbg {
    background: #CCF8FE;
}

.yellowdashbg {
    background: #FFF5CC;
}

.violetdashbg {
    background: #eadeff;
}

.lightgreendashbg {
    background: #bdfff9;
}


.egyptdash_employeicon_violet {
    color: #9C27B0;
    font-size: 24px;
}

.egyptdash_icon_lightgreen {
    color: #009688;
    font-size: 24px;
}



.lightgreenlab {
    color: #009688;
}

.violetlab {
    color: #9c27b0;
}


.dash_ico {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .dash_ico img {
        height: 32px;
        width: 32px;
    }

.dash_count {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.greenlab {
    color: #34B53A;
}

.redlab {
    color: #FF3A29;
}

.bluelab {
    color: #02A0FC;
}

.yellowlab {
    color: #FFB200;
}

.dashhead {
    color: #000;
    text-align: center;
    padding-bottom: 5px;
    margin: 0 0 5px 0;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.goalsdash .circle_grade {
    margin-bottom: 0;
    border-bottom: 0px dashed #eee;
    padding-bottom: 0px;
    text-align: center;
    margin-top: 0px;
}

    .goalsdash .circle_grade .progress {
        width: 90px;
        height: 90px;
    }

        .goalsdash .circle_grade .progress .progress-value div {
            margin: 0;
        }

        .goalsdash .circle_grade .progress .progress-value span {
            text-transform: uppercase;
            font-weight: 600;
            font-size: 20px;
        }

    .goalsdash .circle_grade .progress {
        line-height: 120px;
    }

        .goalsdash .circle_grade .progress .progress-value {
            font-size: inherit;
        }



.sessiondash .circle_grade {
    margin-bottom: 0;
    border-bottom: 0px dashed #eee;
    padding-bottom: 0px;
    text-align: center;
    margin-top: 0px;
}

    .sessiondash .circle_grade .progress {
        width: 90px;
        height: 90px;
    }

        .sessiondash .circle_grade .progress .progress-value div {
            margin: 0;
        }

        .sessiondash .circle_grade .progress .progress-value span {
            text-transform: uppercase;
            font-weight: 600;
            font-size: 20px;
        }

    .sessiondash .circle_grade .progress {
        line-height: 120px;
    }

        .sessiondash .circle_grade .progress .progress-value {
            font-size: inherit;
        }

        .sessiondash
        .circle_grade .progress .progress-bar {
            border-color: #4339F2;
        }

        .sessiondash
        .circle_grade .progress:before {
            border-color: #DAD7FE;
        }

.mb-15 {
    margin-bottom: 15px;
}

.mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.female_count {
    font-size: 30px;
    font-weight: bold;
    color: #F93E97;
}

.male_count {
    font-size: 30px;
    font-weight: bold;
    color: #28439F;
}

.chart_min-h250 {
    min-height: 250px;
}

.chart_min-h270 {
    min-height: 270px;
}

.chart_min-h350 {
    min-height: 350px;
}

.chart_min-h450 {
    min-height: 450px;
}

.chart_min-h500 {
    min-height: 500px;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.Disabilities_progress {
    font-size: 14px;
    flex: 1;
}

    .Disabilities_progress .progress {
        height: 10px;
        border-radius: 10px;
        margin: 5px 0 10px 0;
    }

.Disabilities_icon {
    width: 37px;
    height: 37px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 0px 20px 10px;
}

    .Disabilities_icon img {
        width: 21px;
        height: 21px;
    }

.Intellectual .Disabilities_icon {
    background: rgb(223 216 93 / 20%);
}

.Intellectual .progress-bar {
    background-color: #DAD242;
}

.Intellectual .disability-color {
    color: #DAD242;
}

.Autism .Disabilities_icon {
    background: rgb(0 94 235 / 20%);
}

.Autism .progress-bar {
    background-color: #005EEB;
}

.Autism .disability-color {
    color: #005EEB;
}



.Hearing .Disabilities_icon {
    background: rgb(249 155 84 / 20%);
}

.Hearing .progress-bar {
    background-color: #F99B54;
}

.Hearing .disability-color {
    color: #F99B54;
}


.Visual .Disabilities_icon {
    background: rgb(249 62 151 / 20%);
}

.Visual .progress-bar {
    background-color: #F93E97;
}

.Visual .disability-color {
    color: #F93E97;
}


.Physical .Disabilities_icon {
    background: rgb(103 183 220 / 20%);
}

.Physical .progress-bar {
    background-color: #67B7DC;
}

.Physical .disability-color {
    color: #67B7DC;
}



.Psycho .Disabilities_icon {
    background: rgb(60 216 86 / 20%);
}

.Psycho .progress-bar {
    background-color: #3CD856;
}

.Psycho .disability-color {
    color: #3CD856;
}



.Multiple .Disabilities_icon {
    background: rgb(181 113 250 / 20%);
}

.Multiple .progress-bar {
    background-color: #B571FA;
}

.Multiple .disability-color {
    color: #B571FA;
}


.Learning .Disabilities_icon {
    background: rgb(221 103 136 / 20%);
}

.Learning .progress-bar {
    background-color: #DD6788;
}

.Learning .disability-color {
    color: #DD6788;
}


.Communication .Disabilities_icon {
    background: rgb(194 87 0 / 20%);
}

.Communication .progress-bar {
    background-color: #C25700;
}

.Communication .disability-color {
    color: #C25700;
}

.Attention .Disabilities_icon {
    background: rgb(146 190 255 / 20%);
}

.Attention .progress-bar {
    background-color: #92BEFF;
}

.Attention .disability-color {
    color: #92BEFF;
}

.Deaf-Blind .Disabilities_icon {
    background: rgb(0 128 85 / 20%);
}

.Deaf-Blind .progress-bar {
    background-color: #008055;
}

.Deaf-Blind .disability-color {
    color: #008055;
}


.Center_search .input_search {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21.5308 20.4693L16.8368 15.7762C18.1973 14.1428 18.8757 12.0478 18.7309 9.92691C18.5861 7.80604 17.6293 5.82265 16.0593 4.38932C14.4894 2.95599 12.4274 2.18308 10.3021 2.23138C8.17687 2.27968 6.15205 3.14547 4.64888 4.64864C3.14571 6.15181 2.27993 8.17663 2.23163 10.3019C2.18333 12.4271 2.95623 14.4892 4.38956 16.0591C5.82289 17.629 7.80629 18.5859 9.92715 18.7307C12.048 18.8755 14.1431 18.1971 15.7765 16.8365L20.4696 21.5306C20.5393 21.6003 20.622 21.6556 20.713 21.6933C20.8041 21.731 20.9017 21.7504 21.0002 21.7504C21.0988 21.7504 21.1963 21.731 21.2874 21.6933C21.3784 21.6556 21.4612 21.6003 21.5308 21.5306C21.6005 21.4609 21.6558 21.3782 21.6935 21.2871C21.7312 21.1961 21.7506 21.0985 21.7506 21C21.7506 20.9014 21.7312 20.8038 21.6935 20.7128C21.6558 20.6218 21.6005 20.539 21.5308 20.4693ZM3.75021 10.5C3.75021 9.16495 4.14609 7.8599 4.88779 6.74987C5.62949 5.63984 6.6837 4.77467 7.9171 4.26378C9.1505 3.75289 10.5077 3.61922 11.8171 3.87967C13.1264 4.14012 14.3292 4.78299 15.2732 5.727C16.2172 6.671 16.8601 7.87374 17.1205 9.18311C17.381 10.4925 17.2473 11.8497 16.7364 13.0831C16.2255 14.3165 15.3603 15.3707 14.2503 16.1124C13.1403 16.8541 11.8352 17.25 10.5002 17.25C8.71061 17.248 6.99488 16.5362 5.72944 15.2707C4.46399 14.0053 3.7522 12.2896 3.75021 10.5Z" fill="black"/></svg>');
    background-position: right 6px center;
    padding: 8px 36px 8px 16px;
    background-repeat: no-repeat;
    height: 32px !important;
    width: 150px;
    font-size: 14px;
    background-size: 18px;
}

.centerwrapper {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    width: 100%;
    padding: 0;
    margin: 0 0 0px 0;
    color: #000;
    cursor: default;
    color: #000;
    padding-left: 10px;
}

    .centerwrapper:hover,
    .centerwrapper:active {
        color: #000;
    }

    .centerwrapper ul {
        width: 100%;
        margin: 0;
        padding: 0;
    }

        .centerwrapper ul li {
            display: flex;
            width: 100%;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding: 10px 0 9px 0;
        }

    .centerwrapper:last-child ul li {
        border-bottom: 0px solid #eee;
    }

    .centerwrapper ul li div {
        padding: 0 10px;
        font-size: 14px;
    }

    .centerwrapper ul li .progress {
        flex: 1;
        margin: 0 15px;
        height: 5px;
        border-radius: 10px;
        padding: 0;
    }

.centerbox {
    border: 1px solid #ccc;
    border-radius: 14px;
    padding: 5px 15px !important;
    display: flex;
    justify-content: center;
    min-width: 50px;
}



.centerwrapper:nth-child(4n) .progress-bar {
    background-color: #0095FF;
}

.centerwrapper:nth-child(4n) .progress {
    background-color: #CDE7FF;
}

.centerwrapper:nth-child(4n) .centerbox {
    border-color: #0095FF;
    color: #0095FF;
    background: #F0F9FF;
}



.centerwrapper:nth-child(4n+1) .progress-bar {
    background-color: #00E096;
}

.centerwrapper:nth-child(4n+1) .progress {
    background-color: #8CFAC7;
}

.centerwrapper:nth-child(4n+1) .centerbox {
    border-color: #00E096;
    color: #00E096;
    background: #F0F9FF;
}


.centerwrapper:nth-child(4n+2) .progress-bar {
    background-color: #884DFF;
}

.centerwrapper:nth-child(4n+2) .progress {
    background-color: #C5A8FF;
}

.centerwrapper:nth-child(4n+2) .centerbox {
    border-color: #884DFF;
    color: #884DFF;
    background: #F0F9FF;
}



.centerwrapper:nth-child(4n+3) .progress-bar {
    background-color: #FF8F0D;
}

.centerwrapper:nth-child(4n+3) .progress {
    background-color: #FFD5A4;
}

.centerwrapper:nth-child(4n+3) .centerbox {
    border-color: #FF8F0D;
    color: #FF8F0D;
    background: #F0F9FF;
}


.loadmore {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border: 1px dashed #eee;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
}

.egyptlogo {
    height: 82px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px 0 10px;
}

    .egyptlogo img {
        height: 82px;
        width: auto;
        border-radius: 8px;
    }

@media(max-width:992px) {
    .egyptlogo img {
        height: auto;
        border-radius: 8px;
    }
}

.egyptlogo2 {
    margin: 0 0 0 10px;
    height: 62px;
    width: auto;
}

    .egyptlogo2 img {
        height: 100%;
        width: auto;
    }


.arrow_box {
    position: relative;
    background: #555;
    border: 2px solid #000000;
}

    .arrow_box:after, .arrow_box:before {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .arrow_box:after {
        border-color: rgba(85, 85, 85, 0);
        border-right-color: #555;
        border-width: 10px;
        margin-top: -10px;
    }

    .arrow_box:before {
        border-color: rgba(0, 0, 0, 0);
        border-right-color: #000000;
        border-width: 13px;
        margin-top: -13px;
    }

.headalignment {
    min-width: calc(33.33% + 7.5px);
}

@media (max-width:992px) {
    .headalignment {
        min-width: auto;
    }

    .egyptlogo {
        width: auto;
        border-radius: 8px;
        background: #fff;
        margin: 10px 0 0px 0px;
        height: 60px;
    }

    .res-egyptdas {
        flex-direction: column;
        align-items: flex-start;
    }

        .res-egyptdas .headalignment {
            width: 100%
        }
}
/*#searchableSection {*/
/*max-height: 625px;*/
/*overflow-x: hidden;
    overflow-y: auto;*/
/*display: block;*/
/*margin: 0px;
   
}*/
.sortbutton {
    cursor: pointer;
    display: inline-block;
}

.sortbutton {
    cursor: pointer;
    display: inline-block;
}

@media (max-width:767px) {
    #xshidden {
        display: none;
    }
}

/*14-11-23*/
.equal {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.serialno a {
    counter-increment: item;
}

    .serialno a ul li:before {
        content: counter(item);
        text-align: center;
        display: inline-flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        margin: 0 10px;
        font-size: 14px;
    }

.print-in-dashboard #HeadTitlesDiv {
    display: flex !important;
    flex-wrap: wrap;
    margin: 0;
    gap: 15px;
}


@media(max-width:992px) {
    .print-in-dashboard #HeadTitlesDiv .mn_dashbrd_wrapper {
        width: calc(33.33% - 10px);
    }
}

@media(max-width:768px) {
    .print-in-dashboard #HeadTitlesDiv .mn_dashbrd_wrapper {
        width: calc(50% - 10px);
    }
}

@media(max-width:600px) {
    .print-in-dashboard #HeadTitlesDiv .mn_dashbrd_wrapper {
        width: 100%;
    }
}



/***********************************EGYPT DASHBOARD END***********************/
/************* Disable btn 01/11/2023 abdo **********************/
.btnCustomClass {
    opacity: 0.45;
    pointer-events: none;
}

.btn-warning {
    border: none;
    padding: 10px 20px;
    background: #2e3f52;
    color: #fff;
    margin: 5px;
    border-radius: 4px;
}


/***********************************Palastine DASHBOARD 29/12/2023***********************/
.lightbluedashbg {
    background: #003d8814;
}

.lightbluelab {
    color: #28439f;
}

.mb-1 {
    margin-bottom: 0.5em;
}

.apexcharts-text tspan, .apexcharts-tooltip, .apexcharts-tooltip-title, .apexcharts-tooltip-text, .apexcharts-legend-text {
    font-family: Open Sans, Almarai, sans-serif !important;
}

/***********************************Palastine DASHBOARD End***********************/



/***********************************vocational curriculum 03/02/2024***********************/
.vocational_curriculum .panel-heading {
    padding: 0;
    border: 0;
    background: #fff;
}

    .vocational_curriculum .panel-heading.active {
        border-bottom: #f5f5f7 1px solid;
    }


.vocational_curriculum
.panel-title > a, .vocational_curriculum .panel-title > a:active {
    display: block;
    padding: 15px;
    color: #555;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    word-spacing: 3px;
    text-decoration: none;
}

.vocational_curriculum
.panel-heading a:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f077";
    float: left;
    transition: all 0.5s;
    color: #c5c7cb;
}

.vocational_curriculum
.panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.vocational_curriculum .panel-default {
    border-color: #f5f5f7;
}

    .vocational_curriculum
    .panel-default > .panel-heading + .panel-collapse > .panel-body {
        border: 0;
    }

.curriculam_table {
    display: flex;
}

.curriculam_card {
    margin: 0 0 8px 0;
    display: flex;
    flex: 1;
    border: 1px solid #0000000a;
    border-radius: 5px;
    min-height: 100px;
    position: relative;
    margin-right: 30px;
    padding: 0 15px;
}

.weekname {
    font-size: 14px;
    text-transform: capitalize;
    transform: rotate(-90deg);
    padding: 5px 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 80px;
    background: #4CAF50;
    height: 34px;
    position: absolute;
    right: -58px;
    top: 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #ffff;
}

.week-unit {
    display: flex;
    flex: 1;
}

    .week-unit .units {
        flex: 1;
        padding: 10px 5px 10px 0;
        border-left: 1px solid #0000000a;
        margin-left: 10px;
    }

        .week-unit .units:last-child {
            border-left: 0 solid #ddd;
        }

    .week-unit .lession_card {
        padding: 5px 5px;
        font-style: normal;
        font-size: 14px;
    }

.lession_card .headlesson {
    display: flex;
}

    .lession_card .headlesson:before {
        content: "\f0d9";
        font: normal normal normal 14px/1 FontAwesome;
        margin-left: 5px;
        color: #4caf50;
        margin-top: 4px;
    }

.curriculam_table:first-child .curriculam_card .weekname {
    background: #4CAF50;
}

.curriculam_table:first-child .curriculam_card {
    background: #4caf5014;
}

.curriculam_table:nth-child(2n) .curriculam_card .weekname {
    background: #FFC107;
}

.curriculam_table:nth-child(2n) .curriculam_card {
    background: #ffc10721;
}

.curriculam_table:nth-child(2n) .lession_card .headlesson:before {
    color: #ffc107;
}

.curriculam_table:nth-child(3n) .curriculam_card .weekname {
    background: #E91E63;
}

.curriculam_table:nth-child(3n) .curriculam_card {
    background: #e91e6314;
}

.curriculam_table:nth-child(3n) .lession_card .headlesson:before {
    color: #E91E63;
}

.curriculam_table:nth-child(4n) .curriculam_card .weekname {
    background: #9C27B0;
}

.curriculam_table:nth-child(5n) .curriculam_card .weekname {
    background: #0078d4;
}

.curriculam_table:nth-child(4n) .curriculam_card {
    background: #9c27b017;
}

.curriculam_table:nth-child(4n) .lession_card .headlesson:before {
    color: #9C27B0;
}

@media(max-width:768px) {
    .week-unit {
        flex-direction: column;
    }

        .week-unit .units {
            border-bottom: 1px solid #ddd;
            border-left: 0px solid #ddd;
        }

            .week-unit .units:last-child {
                border-bottom: 0 solid #ddd;
                border-left: 0px solid #ddd;
            }
}
/***********************************vocational curriculum 03/02/2024 End***********************/

/*16-01-24*/
.cursorpoint {
    cursor: pointer;
}

.lesson_column {
    border: 1px dashed #eee;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    width: calc(33% - 15px);
}


.not_evaluated {
    text-align: center;
    padding: 0 5px;
}

    .not_evaluated .absent_type_lbl {
        color: red;
        font-weight: 600;
        font-size: 14px;
    }

.not_evaluated_pic img {
    width: 75px;
}


@media(max-width:992px) {
    .lesson_column {
        border: 1px dashed #eee;
        padding: 10px;
        border-radius: 12px;
        display: flex;
        width: calc(50% - 10px);
    }
}

@media(max-width:768px) {
    .markbox .boxAvg {
        flex-direction: column;
    }

    .markbox .boxAvg, .markbox .box1, .markbox .box2, .markbox .box3, .markbox .box4 {
        width: 100%;
    }

        .markbox .boxAvg .d-flex .d-flex.flex-column {
            flex: 1;
        }
}

@media(max-width:480px) {
    .lesson_column {
        border: 1px dashed #eee;
        padding: 10px;
        border-radius: 12px;
        display: flex;
        width: 100%;
    }
}

.gap-15 {
    gap: 15px;
}

.tranScript_btn {
    border-radius: 6px;
    background: #31555a url(../images/tranScript.svg) no-repeat right 10px center;
    padding-right: 35px;
    font-weight: 600;
    color: #ffffff !important;
    background-size: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.Certificate_btn {
    border-radius: 6px;
    background: #31555a url(../images/Certificate.svg) no-repeat right 10px center;
    padding-right: 35px;
    font-weight: 600;
    color: #ffffff !important;
    background-size: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.actionwrapper .dropdown-menu {
    left: 0;
    right: inherit !important;
}

.pt-5 {
    padding-top: 5px;
}

.ph.ph-caret-right:before {
    content: "\e9ff" !important;
}

.transaction {
    transition: 0.5s;
}

.ml-16 {
    margin-right: 16px;
    margin-left: inherit !important;
}

.deleteicon-table {
    margin-right: auto;
    margin-left: inherit !important;
}


/****************production data table css***********************/
.production-datatable {
    box-shadow: 0px 0px 5.5px 3.5px rgba(0, 0, 0, 0.02) !important;
}

    .production-datatable .dataTables_wrapper tr th {
        text-align: right !important;
    }

    .production-datatable table.dataTable thead .sorting_asc,
    .production-datatable table.dataTable thead .sorting,
    .production-datatable table.dataTable thead .sorting_desc {
        background-position: left 15px center !important;
    }
/****************production data table css end***********************/
.production_countbox .countbox {
    margin-right: auto;
    margin-left: inherit !important;
}

.daterange_custom.daterange_rpt {
    max-width: 430px !important;
}

/******/
html[dir="rtl"] .quiz_image_wrapper label:before {
    left: 0 !important;
    right: inherit !important;
}
/**************Product_wrk_rpt start*************/


.Product_wrk_rpt table tr th {
    text-align: right !important;
}

html[dir="rtl"] .Product_wrk_rpt .dataTables_wrapper .dataTables_filter input {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21.5308 20.4693L16.8368 15.7762C18.1973 14.1428 18.8757 12.0478 18.7309 9.92691C18.5861 7.80604 17.6293 5.82265 16.0593 4.38932C14.4894 2.95599 12.4274 2.18308 10.3021 2.23138C8.17687 2.27968 6.15205 3.14547 4.64888 4.64864C3.14571 6.15181 2.27993 8.17663 2.23163 10.3019C2.18333 12.4271 2.95623 14.4892 4.38956 16.0591C5.82289 17.629 7.80629 18.5859 9.92715 18.7307C12.048 18.8755 14.1431 18.1971 15.7765 16.8365L20.4696 21.5306C20.5393 21.6003 20.622 21.6556 20.713 21.6933C20.8041 21.731 20.9017 21.7504 21.0002 21.7504C21.0988 21.7504 21.1963 21.731 21.2874 21.6933C21.3784 21.6556 21.4612 21.6003 21.5308 21.5306C21.6005 21.4609 21.6558 21.3782 21.6935 21.2871C21.7312 21.1961 21.7506 21.0985 21.7506 21C21.7506 20.9014 21.7312 20.8038 21.6935 20.7128C21.6558 20.6218 21.6005 20.539 21.5308 20.4693ZM3.75021 10.5C3.75021 9.16495 4.14609 7.8599 4.88779 6.74987C5.62949 5.63984 6.6837 4.77467 7.9171 4.26378C9.1505 3.75289 10.5077 3.61922 11.8171 3.87967C13.1264 4.14012 14.3292 4.78299 15.2732 5.727C16.2172 6.671 16.8601 7.87374 17.1205 9.18311C17.381 10.4925 17.2473 11.8497 16.7364 13.0831C16.2255 14.3165 15.3603 15.3707 14.2503 16.1124C13.1403 16.8541 11.8352 17.25 10.5002 17.25C8.71061 17.248 6.99488 16.5362 5.72944 15.2707C4.46399 14.0053 3.7522 12.2896 3.75021 10.5Z" fill="black"/></svg>');
    background-position: right 7px center;
    padding: 8px 30px 8px 16px;
}

html[dir="rtl"] .move_left_wrapper {
    width: 250px !important;
}

.quiz_checkradio span.glyphicon.glyphicon-ok.glyphicon-white {
    position: absolute;
    left: 0;
    right: inherit !important;
}
/**************Product_wrk_rpt End***************/
.delivery_table th, .delivery_table td {
    text-align: right !important;
}

@media(max-width:767px) {
    html[dir="rtl"] .move_left_wrapper {
        width: 100% !important;
    }
}


.sales_order_table th {
    text-align: right;
}

/*15-03-24*/
.Product_wrk_rpt table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
.Product_wrk_rpt table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    top: 40%;
    right: 0px;
    left: inherit !important;
}
/*19-03-24*/
.move_left_wrapper .moveleft_position {
    right: 65px;
    left: inherit !important;
}


.row.res-gap15 .control-group .input-prepend.input-group .form-control:last-child {
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
}

.row.res-gap15 .control-group .input-prepend.input-group .input-group-addon:first-child {
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}



.customer_details_wrapper {
    margin-left: inherit !important;
    margin-right: -17px;
}


/******************New Appointments Start ********************************************/
.actions_wrapper .dropdown-menu {
    left: 0 !important;
    right: inherit !important;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: #eee 5px 4px 9px -6px;
}

.scheduled_status,
.completed_status,
.cancelled_status {
    padding: 2px 12px 2px 4px !important;
}

.side_model {
    right: inherit !important;
    left: 0 !important;
}
/*******************new data table*******************/
.new_data_table table tr th {
    text-align: right !important;
}

html[dir="rtl"] .new_data_table .dataTables_wrapper .dataTables_filter input {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21.5308 20.4693L16.8368 15.7762C18.1973 14.1428 18.8757 12.0478 18.7309 9.92691C18.5861 7.80604 17.6293 5.82265 16.0593 4.38932C14.4894 2.95599 12.4274 2.18308 10.3021 2.23138C8.17687 2.27968 6.15205 3.14547 4.64888 4.64864C3.14571 6.15181 2.27993 8.17663 2.23163 10.3019C2.18333 12.4271 2.95623 14.4892 4.38956 16.0591C5.82289 17.629 7.80629 18.5859 9.92715 18.7307C12.048 18.8755 14.1431 18.1971 15.7765 16.8365L20.4696 21.5306C20.5393 21.6003 20.622 21.6556 20.713 21.6933C20.8041 21.731 20.9017 21.7504 21.0002 21.7504C21.0988 21.7504 21.1963 21.731 21.2874 21.6933C21.3784 21.6556 21.4612 21.6003 21.5308 21.5306C21.6005 21.4609 21.6558 21.3782 21.6935 21.2871C21.7312 21.1961 21.7506 21.0985 21.7506 21C21.7506 20.9014 21.7312 20.8038 21.6935 20.7128C21.6558 20.6218 21.6005 20.539 21.5308 20.4693ZM3.75021 10.5C3.75021 9.16495 4.14609 7.8599 4.88779 6.74987C5.62949 5.63984 6.6837 4.77467 7.9171 4.26378C9.1505 3.75289 10.5077 3.61922 11.8171 3.87967C13.1264 4.14012 14.3292 4.78299 15.2732 5.727C16.2172 6.671 16.8601 7.87374 17.1205 9.18311C17.381 10.4925 17.2473 11.8497 16.7364 13.0831C16.2255 14.3165 15.3603 15.3707 14.2503 16.1124C13.1403 16.8541 11.8352 17.25 10.5002 17.25C8.71061 17.248 6.99488 16.5362 5.72944 15.2707C4.46399 14.0053 3.7522 12.2896 3.75021 10.5Z" fill="black"/></svg>');
    background-position: right 7px center;
    padding: 8px 30px 8px 16px;
}

.new_data_table table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
.new_data_table table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    top: 40%;
    right: 0px;
    left: inherit !important;
}

.new_data_table table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child .table_link.lefttab_link, .new_data_table table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child .table_link.lefttab_link {
    padding-left: inherit !important;
    padding-right: 30px;
}
/*******************new data table*******************/
#group_management_wrapper #group_management_filter.dataTables_filter {
    float: left !important;
}

.dropdown_left-position {
    left: 0 !important;
    right: inherit !important;
    padding: 10px 10px !important;
}

.count-filter {
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    padding-top: 15px;
    gap: 8px;
    width: calc(100% - 265px);
    right: 0;
}

.btn-export {
    padding: 8px 16px 8px 16px;
    background-repeat: no-repeat;
    height: 44px !important;
    background: #fff;
    border: 1px solid #e2e2e2 !important;
    border-radius: 6px;
    margin: 0;
}

@media(max-width:600px) {
    .count-filter {
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        padding-top: 0;
    }
}

.fullsearchdropdown .btn-group.searchinput .dropdown-toggle {
    padding: 0 12px !important;
    background: transparent !important;
    box-shadow: none;
}
/******************New Appointments End ********************************************/
/***range slider start*/


.lesson_code {
    position: absolute;
    font-weight: 600;
    left: 15px;
    right: inherit !important;
    background: #fff;
    top: -36px;
    font-size: 14px;
    border-radius: 6px;
    color: #000;
    padding: 4px 10px;
    z-index: 9;
}


.range-slider__value:after {
    right: -7px;
    left: inherit !important;
    border-right: inherit !important;
    border-left: 7px solid #9152c0;
}

.range-slider__value {
    margin-right: 8px;
    margin-left: inherit !important;
}
/***range slider end*/



/*vocational update*/
.units_completed,
.units_progress,
.units_pending {
    left: 10px;
    right: inherit !important;
}


/***/


/*07/1/25*/
.rateunit_model {
    right:inherit !important;
}

html[dir=rtl] .rtl-model-100 {
    
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    top: 0;
}
html[dir=rtl]
.dropdown-linewrap
.bootstrap-select.btn-group .dropdown-menu.open {
    right: 0;
    left: inherit !important;
}

html[dir=rtl]
.dropdown-linewrap
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
    margin-left: 34px;
    margin-right: inherit !important;
}
html[dir=rtl]
.dropdown-linewrap
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    right: inherit !important;
    left: 15px;
}