/* Minification failed. Returning unminified contents.
(95,38): run-time error CSS1038: Expected hex color, found '#fff3'
(100,37): run-time error CSS1038: Expected hex color, found '#fff3'
(930,25): run-time error CSS1046: Expect comma, found '255'
(930,33): run-time error CSS1046: Expect comma, found '/'
(958,36): run-time error CSS1046: Expect comma, found '86'
(958,43): run-time error CSS1046: Expect comma, found '/'
(997,19): run-time error CSS1046: Expect comma, found '63'
(997,24): run-time error CSS1046: Expect comma, found ')'
: run-time error CSS1036: Expected expression, found ''
: run-time error CSS1036: Expected expression, found ''
: run-time error CSS1036: Expected expression, found ''
: run-time error CSS1036: Expected expression, found ''
: run-time error CSS1036: Expected expression, found ''
(5107,23): run-time error CSS1038: Expected hex color, found '#ffff'
(5182,24): run-time error CSS1046: Expect comma, found '63'
(5182,30): run-time error CSS1046: Expect comma, found '/'
(5732,24): run-time error CSS1046: Expect comma, found '192'
(5732,32): run-time error CSS1046: Expect comma, found '/'
(6992,24): run-time error CSS1046: Expect comma, found '63'
(6992,30): run-time error CSS1046: Expect comma, found '/'
(8161,34): run-time error CSS1046: Expect comma, found '0'
(8161,38): run-time error CSS1046: Expect comma, found '/'
(8177,34): run-time error CSS1046: Expect comma, found '0'
(8177,38): run-time error CSS1046: Expect comma, found '/'
(8196,36): run-time error CSS1046: Expect comma, found '181'
(8196,43): run-time error CSS1046: Expect comma, found ')'
(8199,31): run-time error CSS1046: Expect comma, found '255'
(8199,38): run-time error CSS1046: Expect comma, found ')'
(8416,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '='
(8473,35): run-time error CSS1039: Token not allowed after unary operator: '-neutral-light'
(9045,22): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(9214,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9317,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(9468,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(9688,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9690,31): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9691,34): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9700,37): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9701,38): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9702,36): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9707,37): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9708,38): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9884,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(9901,29): run-time error CSS1039: Token not allowed after unary operator: '-shades-spanish-gray'
(9902,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(9909,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(10015,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10134,28): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10135,22): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(10178,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10188,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(10625,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10631,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10638,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10644,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10650,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10656,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10663,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10669,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10675,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10681,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10687,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10693,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10699,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10705,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10711,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10717,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10724,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10730,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10738,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10744,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10750,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10756,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10763,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10769,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10777,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10783,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10789,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10841,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(10863,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(10872,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(10943,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10960,28): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(10961,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10992,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11001,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11011,28): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11012,22): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11040,28): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11067,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11068,26): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11089,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11090,26): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11114,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11125,23): run-time error CSS1046: Expect comma, found '0'
(11125,27): run-time error CSS1046: Expect comma, found '/'
(11125,56): run-time error CSS1039: Token not allowed after unary operator: '-explore-nav_box-shadow-spread'
(11170,39): run-time error CSS1039: Token not allowed after unary operator: '-shades-light-grey'
(11242,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11252,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11262,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11272,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11294,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11311,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11349,24): run-time error CSS1038: Expected hex color, found '#cccc'
(11409,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-100'
(11419,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-100'
(11468,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11475,36): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(11476,30): run-time error CSS1039: Token not allowed after unary operator: '-shades-light-grey'
(11644,32): run-time error CSS1039: Token not allowed after unary operator: '-shades-spanish-gray'
(11645,26): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11646,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(11840,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11887,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(11895,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11913,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11925,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11929,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(11949,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(12121,23): run-time error CSS1046: Expect comma, found '0'
(12121,27): run-time error CSS1046: Expect comma, found '/'
(12121,57): run-time error CSS1039: Token not allowed after unary operator: '-explore-nav_box-shadow-spread'
(12474,22): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(12484,26): run-time error CSS1039: Token not allowed after unary operator: '-shades-light-grey'
(12491,22): run-time error CSS1039: Token not allowed after unary operator: '-shades-light-grey'
(12536,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12553,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12663,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12684,26): run-time error CSS1039: Token not allowed after unary operator: '-shades-platinum'
(13149,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(14253,25): run-time error CSS1046: Expect comma, found '216'
(14253,32): run-time error CSS1046: Expect comma, found '/'
(14265,23): run-time error CSS1046: Expect comma, found '94'
(14265,30): run-time error CSS1046: Expect comma, found '/'
(14279,25): run-time error CSS1046: Expect comma, found '155'
(14279,32): run-time error CSS1046: Expect comma, found '/'
(14292,25): run-time error CSS1046: Expect comma, found '62'
(14292,32): run-time error CSS1046: Expect comma, found '/'
(14305,25): run-time error CSS1046: Expect comma, found '183'
(14305,33): run-time error CSS1046: Expect comma, found '/'
(14319,24): run-time error CSS1046: Expect comma, found '216'
(14319,31): run-time error CSS1046: Expect comma, found '/'
(14333,25): run-time error CSS1046: Expect comma, found '113'
(14333,33): run-time error CSS1046: Expect comma, found '/'
(14346,25): run-time error CSS1046: Expect comma, found '103'
(14346,33): run-time error CSS1046: Expect comma, found '/'
(14359,25): run-time error CSS1046: Expect comma, found '87'
(14359,30): run-time error CSS1046: Expect comma, found '/'
(14371,25): run-time error CSS1046: Expect comma, found '190'
(14371,33): run-time error CSS1046: Expect comma, found '/'
(14383,23): run-time error CSS1046: Expect comma, found '128'
(14383,30): run-time error CSS1046: Expect comma, found '/'
(14825,12): run-time error CSS1038: Expected hex color, found '#ffff'
(15050,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-quaternary'
(15051,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-white'
(15065,21): run-time error CSS1039: Token not allowed after unary operator: '-neutral-dark'
 */
@import url('../fonts/open_sans/open-sans.css');
@import url('../fonts/almarai/style.css');

html,
body {
    height: 100%;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.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;
}

    .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: 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;
}

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

.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: 80px;
}

    .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,
    .nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
        overflow: visible;
    }

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

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

.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 0 0 3px;
    }

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

.site_title img {
    height: 65px;
}

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

/*.nav-sm .main_container .top_nav {
    display: block;
    margin-left: 70px;
    z-index: 2;
    position: absolute;
    width: calc(100vw - 80px);
}*/

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

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
    /* border-right: 5px solid #1ABB9C */
}

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

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

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

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

.nav-sm ul.nav.child_menu {
    left: 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: left !important;
}

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

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

    .menu_section h3 {
        padding-left: 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%;
    }

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

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

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

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

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

.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;
    }

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

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

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

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

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

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

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

.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;
    }

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

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

.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) {
    .nav-md .container.body .right_col,
    .nav-md .container.body .top_nav {
        width: 100%;
        margin: 0;
    }

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

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

    /* .right_col {
        padding: 10px !important;
    }*/
}

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

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

.left_col .mCSB_scrollTools {
    width: 6px;
}

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

.blue {
    color: #3498db;
}

.purple {
    color: #9b59b6;
}

.green {
    color: #1abb9c;
}

.aero {
    color: #9cc2cb;
}

.red {
    color: #e74c3c;
}

.dark {
    color: #34495e;
}

.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: #34495e !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;
}

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

.navbar-nav > li > a,
.navbar-brand,
.navbar-nav > li > a {
    color: #fff !important;
}

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

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

.main_container .top_nav {
    display: block;
    margin-left: 0;
    position: fixed;
    /*  width: calc(100vw - 300px);*/
    width: 100%;
    z-index: 12;
    box-shadow: #ccc 3px 1px 8px -3px;
}

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

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

    .page-title .title_left {
        width: 45%;
        float: left;
        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;
        }

.fixed_height_320 {
    height: 320px;
}

.fixed_height_390 {
    height: 390px;
}

.fixed_height_200 {
    height: 200px;
}

.overflow_hidden {
    overflow: hidden;
}

.progress-bar-dark {
    background-color: #34495e !important;
}

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

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

.main_content {
    padding: 10px 20px;
}

.col-md-55 {
    width: 50%;
    margin-bottom: 10px;
}

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

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

@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;
    }
}

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

.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: left;*/
    padding-right: 10px;
    padding-left: 10px;
}

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

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

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

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

    a,
    a:visited,
    a:focus,
    a:active,
    :visited,
    :focus,
    :active,
    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
        outline: 0;
    }

        a:hover,
        a:focus {
            text-decoration: none;
        }

.navbar {
    margin-bottom: 0;
}

.navbar-header {
    background: #34495e;
}

.navbar-right {
    margin-right: 0;
    justify-content: flex-end;
}

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

@media (min-width: 480px) {
    .top_nav .navbar-right li {
        position: relative;
    }
}

.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;
}

.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.side-menu > li {
    position: relative;
    display: block;
    cursor: pointer;
}

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

        .nav.side-menu > li > a:hover {
            color: #f2f5f7 !important;
        }

        .nav.side-menu > li > a:hover,
        .nav > li > a:focus {
            text-decoration: none;
            background: transparent;
        }

.nav.child_menu {
    display: none;
    background: rgb(255 255 255 / 20%);
}

    /*  .nav.child_menu li:hover,
    .nav.child_menu li.active {
        background-color: rgb(0 0 0 / 6%);
    }*/

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

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

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

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

.nav.side-menu > li > a,
.nav.child_menu > li > a {
    color: #fff;
    font-weight: 500;
}

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

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

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

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

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

.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: 0;
    margin-right: 0px;
    /*  margin-top: 20px;*/
}

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

.site_title {
    width: 90%;
    color: #fff;
    display: block;
}

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

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

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

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

.top_search {
    padding: 0;
}

    .top_search .form-control {
        border-right: 0;
        box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
        border-radius: 25px 0px 0px 25px;
        padding-left: 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-right: 0;
        }

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

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

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

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

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

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

    .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;
}

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

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

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

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

@media (min-width: 992px) {
    footer {
        margin-left: 300px;
    }
}

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

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

@media (min-width: 768px) {
    .footer_fixed footer {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    .footer_fixed .nav-sm footer {
        margin-left: 0;
    }
}

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

.jqstooltip {
    background: #34495e !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;
}

.top_tiles {
    margin-bottom: 0;
}

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

article.media {
    width: 100%;
}

*,
*:before,
*: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:last-child {
            border-bottom: 1px solid #ddd;
        }

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

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

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

h2 {
    font-size: 30px;
    font-weight: 400;
}

#left,
#right {
    display: table;
}

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

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

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

    .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-heading {
    background: #f2f5f7;
    padding: 13px;
    width: 100%;
    display: block;
}

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

.x_panel {
    position: relative;
    width: 100%;
    margin-top: 0;
    border-radius: 8px; /*
    box-shadow: 1px 1px 7px -7px #2e3f52;*/
    display: inline-block;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    transition: all 0.2s ease;
}

.x_title {
    /* border-bottom: 2px solid #E6E9ED; */
    padding: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

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

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

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

    .x_title h2 small {
        margin-left: 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;
}

.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;
    }

    .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: 0px;
        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 .ratings {
        text-align: left;
        font-size: 16px;
    }

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

.profile_details .profile_left {
    background: white;
}

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

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

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

table.tile th,
table.tile td {
    text-align: center;
}

table.tile th {
    border-bottom: 1px solid #e6ecee;
}

table.tile td {
    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%;
}

    table.tile_info td {
        text-align: left;
        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: left;
            width: 18px;
            line-height: 28px;
        }

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

td span {
    line-height: inherit;
}

.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;
}

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

.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%;
}

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

.bulk-actions {
    display: none;
}

table.countries_list {
    width: 100%;
}

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

.paging_full_numbers a.paginate_active {
    background-color: rgba(38, 185, 154, 0.59) !important;
    border-color: rgba(38, 185, 154, 0.59) !important;
}

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

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: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.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);
        }

.dataTables_paginate a {
    background: #ff0000;
}

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

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

/*.dataTables_filter {
    width: auto;
    min-width: 30%;
    float: right;
    text-align: right;
}*/

.dataTables_info {
    width: 60%;
    float: left;
}

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

table.dataTable th.focus,
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 10px 10px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
    }

    table.display tfoot th {
        padding: 3px 18px 3px 10px;
        font-weight: bold;
    }

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

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

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

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

.dataTables_scroll {
    clear: both;
}

.dataTables_scrollBody {
    *margin-top: -1px;
    -webkit-overflow-scrolling: touch;
}

.top .dataTables_info {
    float: none;
}

.clear {
    clear: both;
}

.dataTables_empty {
    text-align: center;
}

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

    tfoot input.search_init {
        color: #999;
    }

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

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

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

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

    .paging_full_numbers a:active {
        outline: none;
    }

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

    .paging_full_numbers a.paginate_button,
    .paging_full_numbers a.paginate_active {
        border: 1px solid #aaa;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        padding: 2px 5px;
        margin: 0 3px;
        cursor: pointer;
    }

    .paging_full_numbers a.paginate_button {
        background-color: #ddd;
    }

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

    .paging_full_numbers a.paginate_active {
        background-color: #99b3ff;
    }

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

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

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

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 .image img {
            border-radius: 2px 2px 2px 2px;
            -webkit-border-radius: 2px 2px 2px 2px;
            float: left;
            margin-right: 10px;
            width: 11%;
        }

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

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

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

.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 > li > a {
        color: #5a738e;
    }

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

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

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

.dashboard-widget {
    background: #f6f6f6;
    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;
        }

ul.quick-list {
    width: 45%;
    padding-left: 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-right: 10px;
            color: #757679;
        }

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

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

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

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

    .widget_summary .w_center {
        float: left;
    }

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

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

.w_20 {
    width: 20%;
}

.w_25 {
    width: 25%;
}

.w_55 {
    width: 55%;
}

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

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

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

.tile_info a {
    text-overflow: ellipsis;
}

.sidebar-footer {
    bottom: 0px;
    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: left;
        background: #1c2c42;
        cursor: pointer;
    }

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

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

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

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

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

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

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: #eee;
        }

.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;
    }

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

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

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

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

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

    .fontawesome-icon-list .fa-hover a:hover .fa {
        font-size: 28px;
        vertical-align: -6px;
    }

    .fontawesome-icon-list .fa-hover a .fa {
        width: 32px;
        font-size: 16px;
        display: inline-block;
        text-align: right;
        margin-right: 10px;
    }

.main_menu .fa {
    width: 26px;
    opacity: 0.99;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-top: 2px;
}

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

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

    .tile-stats .icon {
        width: 20px;
        height: 20px;
        color: #bab8b8;
        position: absolute;
        right: 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.65857;
    }

    .tile-stats .count,
    .tile-stats h3,
    .tile-stats p {
        position: relative;
        margin: 0;
        margin-left: 10px;
        z-index: 5;
        padding: 0;
    }

    .tile-stats h3 {
        color: #bab8b8;
    }

    .tile-stats p {
        margin-top: 5px;
        font-size: 12px;
    }

    .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);
        }

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

table.tile_info {
    padding: 10px 15px;
}

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

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

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

.tile_head h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

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

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

.mail_content {
    background: none repeat scroll 0 0 #ffffff;
    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: #ffffff;
        float: right;
        font-style: normal;
        padding: 0 5px;
    }

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

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

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

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

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

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

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

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

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

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

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

.mail_heading h4 {
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 20px;
}

.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;
    right: 0;
    background: #fff;
    border: 1px solid #d9dee4;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 5px;
    z-index: 9999;
    display: none;
}

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

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

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

    .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-footer {
        padding: 10px;
    }

.editor.btn-toolbar {
    zoom: 1;
    background: #f7f7f7;
    margin: 5px 2px;
    padding: 3px 0;
    border: 1px solid #efefef;
}

.input-group {
    /*margin-bottom: 10px*/ /*comment by shyamal*/
}

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

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;
}

.form-control {
    width: 100%;
}

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

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

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

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

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

    .form-control-feedback.left {
        border-right: 1px solid #ccc;
        left: 13px;
    }

    .form-control-feedback.right {
        border-left: 1px solid #ccc;
        right: 13px;
    }

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

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

.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 #eed3d7;
}

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

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

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

.bad input,
.bad select,
.bad textarea {
    border: 1px solid #ce5454;
    box-shadow: 0 0 4px -2px #ce5454;
    position: relative;
    left: 0;
    -moz-animation: 0.7s 1 shake linear;
    -webkit-animation: 0.7s 1 shake linear;
}

.item input,
.item textarea {
    transition: 0.42s;
}

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

    .item .alert::after {
        content: "";
        display: block;
        height: 0;
        width: 0;
        border-color: transparent #ce5454 transparent transparent;
        border-style: solid;
        border-width: 11px 7px;
        position: absolute;
        left: -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 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: #bbb;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

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

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

.autocomplete-selected {
    background: #f0f0f0;
}

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

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

a.btn-success,
a.btn-primary,
a.btn-warning,
a.btn-danger {
    color: #fff;
}

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

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.active,
    .open .dropdown-toggle.btn-success {
        background: #169f85;
    }

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

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

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

    .btn-chackbox input {
        opacity: 0;
    }

    .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: #e9edef;
    background-color: #4b5f71;
    border-color: #364b5f;
}

    .btn-dark:hover,
    .btn-dark:focus,
    .btn-dark:active,
    .btn-dark.active,
    .open .dropdown-toggle.btn-dark {
        color: #ffffff;
        background-color: #394d5f;
        border-color: #394d5f;
    }

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

.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,
    .btn.btn-app > .glyphicon,
    .btn.btn-app > .ion {
        font-size: 20px;
        display: block;
    }

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

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

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

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

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

.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: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    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 #cccccc;
    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 {
    margin: 0 -10px 20px;
    overflow: hidden;
}

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

.bs-glyphicons li {
    float: left;
    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 .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 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;
        }
}

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

span.tag {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: block;
    float: left;
    padding: 5px 9px;
    text-decoration: none;
    background: #1abb9c;
    color: #f1f6f7;
    margin-right: 5px;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: helvetica;
}

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

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

.tagsinput input {
    width: 80px;
    margin: 0px;
    font-family: helvetica;
    font-size: 13px;
    border: 1px solid transparent;
    padding: 3px;
    background: transparent;
    color: #000;
    outline: 0px;
}

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

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

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

ul.bar_tabs {
    overflow: visible;
    background: #f5f7fa;
    height: 25px;
    margin: 21px 0 14px;
    padding-left: 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-left: 8px;
        background: #fff;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
    }

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

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

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

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

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

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

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

a:focus {
    outline: none;
}

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

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

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

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

.timeline .tags {
    position: absolute;
    top: 15px;
    left: 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;
    }

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

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

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

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

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

.byline {
    -webkit-font-smoothing: antialiased;
    font-style: italic;
    font-size: 0.9375em;
    line-height: 1.3;
    color: #aab6aa;
}

ul.social li {
    border: 0;
}

.social-sidebar,
.social-body {
    float: right;
}

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

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

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

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

.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;
}

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

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

.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_tally_box .btn-group button {
    text-align: center;
}

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

ul.widget_tally,
ul.widget_tally li {
    width: 100%;
}

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

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

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

.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;
}

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

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: left;
    }

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

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

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

    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: 0px;
    }

        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;
    }

.widget_tally_box p,
.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,
    .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.legend p {
        display: inline-block;
        margin: 0;
    }

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

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

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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.project_progress .progress {
    margin-bottom: 3px !important;
    margin-top: 5px;
}

.projects .list-inline {
    margin: 0;
}

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

ul.stats-overview {
    border-bottom: 1px solid #e8e8e8;
    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 #e8e8e8;
    }

        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.project_files li {
    margin-bottom: 5px;
}

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

.project_detail p {
    margin-bottom: 10px;
}

    .project_detail p.title {
        font-weight: bold;
        margin-bottom: 0;
    }

.avatar img {
    border-radius: 50%;
    max-width: 45px;
}

.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: #f5f5f5;
    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;
        right: -3px;
    }

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

    .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;
        left: -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-primary .ui-ribbon:after,
    .ui-ribbon-container.ui-ribbon-primary .ui-ribbon:before {
        border-top: 2px solid #5b90bf;
    }

    .ui-ribbon-container .ui-ribbon:before {
        left: 0;
        bottom: -1px;
    }

    .ui-ribbon-container .ui-ribbon:before {
        right: 0;
    }

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

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

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

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

    .view .mask,
    .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 0;
    }

.mask.no-caption .tools {
    margin: 90px 0 0 0;
}

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

.view p {
    font-family: Georgia, serif;
    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,
.view-first:hover p {
    opacity: 1;
    transform: translateY(0px);
}

.view-first:hover p {
    transition-delay: 0.1s;
}

.form-group.has-feedback span {
    display: block !important;
}

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

/*!
 * bootstrap-vertical-tabs - v1.2.1
 * https://dbtek.github.io/bootstrap-vertical-tabs
 * 2014-11-07
 * Copyright (c) 2014 Ismail Demirbilek
 * License: MIT
 */

.tabs-left,
.tabs-right {
    border-bottom: none;
    padding-top: 2px;
}

.tabs-left {
    border-right: 1px solid #f7f7f7;
}

.tabs-right {
    border-left: 1px solid #f7f7f7;
}

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

.tabs-left > li {
    margin-right: -1px;
}

.tabs-right > li {
    margin-left: -1px;
}

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

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

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

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

.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 0px 0px;
        }

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

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

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

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

    .sideways.tabs-left > 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: sans-serif;
        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;
}

.product-image img {
    width: 90%;
}

.prod_color li {
    margin: 0 10px;
}

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

.prod_size li {
    padding: 0;
}

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

.product_gallery a {
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    border: 1px solid #e5e5e5;
}

    .product_gallery a img {
        width: 100%;
        margin-top: 15px;
    }

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

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

.product_social {
    margin: 20px 0;
}

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

.login {
    background: #f5f6fa;
}

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

a.hiddenanchor {
    display: none;
}

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

.registration_form,
.login_form {
    position: absolute;
    top: 0px;
    width: 100%;
    /*background-color: white;*/
}

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

.login_form {
    z-index: 22;
}

#signup:target ~ .login_wrapper .registration_form,
#signin:target ~ .login_wrapper .login_form {
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: 0.1s;
}

#signup:target ~ .login_wrapper .login_form,
#signin:target ~ .login_wrapper .registration_form {
    animation-name: fadeOutLeft;
}

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

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

.left {
    float: left;
}

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

.rightNav {
    float: right;
    text-align: right;
}

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

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

.clearfix:after,
form:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.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,
    .login_content .btn-default:hover {
        text-decoration: none;
    }

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

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

        .login_content h1:before,
        .login_content h1:after {
            content: "";
            height: 1px;
            position: absolute;
            top: 10px;
            width: 27%;
        }

        .login_content h1:after {
            background: #7e7e7e;
            background: linear-gradient(left, #7e7e7e 0%, #fff 100%);
            right: 0;
        }

        .login_content h1:before {
            background: #7e7e7e;
            background: linear-gradient(right, #7e7e7e 0%, #fff 100%);
            left: 0;
        }

        .login_content h1:before,
        .login_content h1:after {
            content: "";
            height: 1px;
            position: absolute;
            top: 10px;
            width: 20%;
        }

        .login_content h1:after {
            background: #7e7e7e;
            background: linear-gradient(left, #7e7e7e 0%, #fff 100%);
            right: 0;
        }

        .login_content h1:before {
            background: #7e7e7e;
            background: linear-gradient(right, #7e7e7e 0%, #fff 100%);
            left: 0;
        }

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

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

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

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

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

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

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

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

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

.button {
    background: #f7f9fa;
    background: linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #cfd5d9;
    padding: 15px 0;
}

.login_content form input[type="submit"],
#content form .submit {
    float: left;
    margin-left: 22px;
}

.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: white;
    border-collapse: separate;
    border: 1px solid #ccc;
    padding: 4px;
    box-sizing: content-box;
    box-shadow: rgba(0, 0, 0, 0.07451) 0px 1px 1px 0px 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);
    -webkit-transform: scale(2, 2);
    -moz-transform: scale(2, 2);
    border: transparent;
    cursor: pointer;
    box-shadow: none;
    -webkit-box-shadow: none;
}

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

.dropdown-menu a {
    cursor: pointer;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    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--multiple
    .select2-selection__rendered {
        padding-top: 3px;
    }

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

    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice,
    .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,
.cropper .img-preview {
    background-color: #f7f7f7;
    width: 100%;
    text-align: center;
}

.cropper .img-container {
    min-height: 200px;
    max-height: 516px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .cropper .img-container {
        min-height: 516px;
    }
}

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

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

.cropper .img-preview {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

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

.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-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,
.cropper .docs-buttons > .btn-group,
.cropper .docs-buttons > .form-control {
    margin-right: 5px;
    margin-bottom: 10px;
}

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

.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-upload .tooltip-inner,
.cropper .btn-toggle .tooltip-inner {
    white-space: nowrap;
}

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

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

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

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

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

.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-cropped .modal-body {
    text-align: center;
}

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

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

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

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

.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,
        .wizard_horizontal ul.wizard_steps li:hover {
            display: block;
            position: relative;
            -moz-opacity: 1;
            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;
                left: 0;
            }

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

            .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.selected:before,
            .step_no {
                background: #34495e;
                color: #fff;
            }

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

        .wizard_horizontal ul.wizard_steps li:first-child a:before {
            left: 50%;
        }

        .wizard_horizontal ul.wizard_steps li:last-child a:before {
            right: 50%;
            width: 50%;
            left: auto;
        }

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

.actionBar {
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 10px 5px;
    text-align: right;
    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;
    }

.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;
        }

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

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

            .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.disabled .step_no {
                background: #ccc;
            }

            .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.selected:before,
            .step_no {
                background: #34495e;
                color: #fff;
            }

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

        .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;
        }

.form_wizard .loader {
    display: none;
}

.form_wizard .msgBox {
    display: none;
}

.progress {
    border-radius: 0;
}

.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 .more_info span {
    text-align: right;
    float: right;
}

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

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

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

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

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

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

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

ul.verticle_bars {
    width: 100%;
}

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

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

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

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

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

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

.ui-pnotify.dark .ui-pnotify-container {
    color: #e9edef;
    background-color: rgba(52, 73, 94, 0.88);
    border-color: rgba(52, 73, 94, 0.88);
}

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

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

.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 div p {
    display: inline-block;
}

.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: #e9edef;
    float: right;
    opacity: 1;
}

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

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

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

/*Add by shyamal*/
/*-----------------------------------*/
.checkboxDisable {
    pointer-events: none;
    background-color: #f9f9f9;
    border: 1px solid white;
}

.ReasonRemarkDisable {
    display: none;
}

/*-----------------------------------*/
/*
.x_content {
    direction: rtl;
}
*/
.main_menu .label {
    line-height: 11px;
    margin-top: 4px;
}

@media (max-width: 460px) {
    .dataTables_wrapper .col-sm-6 {
        width: 100%;
        margin-bottom: 5px;
    }

        .dataTables_wrapper .col-sm-6 .dataTables_filter {
            float: none;
        }
}

@media (max-width: 767px) {
    .dataTables_length {
        float: none;
    }
}

/* CSS3 Checkbox */
/*
.checkbox-input { display:block;position:relative; }
.checkbox-input:before { display:block;content:"";position:absolute;top:2px;left:0;height:20px;width:20px;background:red;border-radius:3px; }


 #input + label:after {
    content: 'click my input';
    color: blue;
  }

  #input:focus + label:after {
    content: 'not valid yet';
    color: blue;
  }

  #input:valid + label:after {
    content: 'looks good';
    color: red;
  }

/* CSS3 Checkbox - end */
/*

/*
.checkbox 																										{ display: block;position:relative;cursor:pointer; }
.checkbox input 																								{ position:absolute;z-index:-1;opacity:0;left:0;top:0; }
.checkbox div 																									{ position:absolute;top:2px;left:0;height:20px;width:20px;background:#e6e6e6;border-radius:3px; }
.checkbox input:checked ~ div 																			{ background: #1ABC9C; }
.checkbox:hover input:not([disabled]):checked ~ div,
.checkbox input:checked:focus ~ div 																	{ background: #1ABC9C; }
.checkbox input:disabled ~ div 																			{ background: #1ABC9C;opacity: 0.6;pointer-events: none; }
.checkbox div:after 																							{ content: '';position: absolute;display: none; }
.checkbox input:checked ~ div:after 																	{ display: block; }
.checkbox-wp div:after 																					{ left: 7px;top: 3px;width: 7px;height: 11px;border: solid #fff;border-width: 0 2px 2px 0;transform: rotate(40deg); }
.checkbox-wp input:disabled ~ div:after 																{ border-color: #F2F2F2; }


.checkbox-radio div 																							{ border-radius: 50%; }
.checkbox-radio div:after 																					{ left: 7px;top: 7px;height: 6px;width: 6px;border-radius: 50%;background: #fff; }
.checkbox-radio input:disabled ~ div:after 															{ background: #F2F2F2; }


.checkbox, .radio { margin-top:-3px; }

table thead .checkbox { margin-top:-7px;margin-top:-21px; }
table thead .checkbox.radio { margin-top:-7px;margin-top:-21px; }
*/

.daterangepicker.xdisplay {
    width: 228px;
}

.dataTables_wrapper > .row {
    overflow: auto !important; /*prevent datatables overflowing its container*/
}

/** bootstrap-datetimepicker **/
.input-group.date .input-group-addon {
    border-radius: 0 4px 4px 0 !important;
    background-color: #ffff !important;
}
/** /bootstrap-datetimepicker **/

/* CUSTOM CSS Starts */

/* Tiles */
.home-tiles-container {
    margin-top: 10px;
    margin-bottom: 15px;
    height: auto;
}

.home-tiles {
    /*  border-radius: 40px;
    background: #fff;
    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;
    /*    max-height: 251px;*/
    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;
    line-height: 30px;
}

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

    .caption p {
        margin-bottom: 0px;
        text-align: left !important;
    }
/* 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: 0;
    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-right: 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 scroll option for th e div*/
.ScrollDiv {
    overflow: auto !important;
    height: 500px !important;
}

/*For blue button in generate report*/
.WordReport {
    border: 1px solid #3c68ca !important;
    background-color: #4778e6 !important;
}

.DashBoardFilterHead {
    background-color: none;
    margin-bottom: 0;
    border: none;
}

.DashboardFilterText {
    color: #1965b1;
}

/*For therapist form table column coount*/
.TableTotalColumn {
    background-color: #e2dfd7 !important;
    color: #000;
    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;
}

/*Assessment tabs colour*/
.NewReportTab {
    /*background-color: #f5e361 !important;*/
    color: #f5e361 !important;
}

.pendingReportTab {
    color: #e64545 !important;
    /*background-color: #e64545 !important;*/
}

.ApprovedReportTab {
    color: #26b99a !important;
    /*background-color: #26b99a !important;*/
}

/*Blink Class*/
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.CountLabel {
    float: left;
}

.countLabelText {
    padding-left: 10px;
}

.CountDashboardMargin {
    padding-left: 50px;
}

@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;
    float: left;
    display: block;
    text-overflow: ellipsis;
    font-size: 18px;
    color: #000 !important;
}
/* form field style */

input,
select {
    border: 1px solid #e2e2e2 !important;
    color: #707070;
}

    select option {
        border-radius: 0
    }

label {
    color: #121212 !important;
    font-weight: normal;
}

#centerMngForm2 .radio label {
    padding-left: 0 !important;
}

input[type="radio"]:checked + .label-text:before {
    color: #ceb578 !important;
}

.form-group label {
    text-align: left !important;
    line-height: 3;
}

label text {
    margin-left: 10px !important;
}

.customCheckbox {
    display: flex;
    align-items: center;
}

    .customCheckbox text {
        margin-left: 10px;
    }

.OTcustomCheckbox {
    display: flex;
    justify-content: center;
}
/* 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-left: 20px;
}

.navbar-right {
    display: flex;
    align-items: center;
    height: 100%;
}

.session-schedular-icons {
    display: flex;
    /* height: 100%; */
    margin-right: 15px;
    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-right: 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-left: 10px;
}

/*.navbar-right li:last-child {
    border-left: 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-right: 20px;
    }

@media(max-width:767px) {
    .nav-container .nav-left-section {
        padding-right: 5px;
    }
}

.nav-container .nav-left-section .nav.toggle {
    display: none;
}

.nav-container .nav-left-section .mainlogo {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

@media(max-width:992px) {
    .nav-container .nav-left-section .nav.toggle {
        display: block;
    }
}

.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;
    /*width: 651px;*/
    max-width: 100%;
    padding: 20px 25px 40px 25px;
    border-radius: 20px;
    box-shadow: #cdcdcd 2px 5px 6px -2px;
}

    .login_form:after {
        content: '';
        background: #ceb578;
        width: 5px;
        height: 50px;
        position: absolute;
        right: 0;
        top: 35px;
    }

.login_form_lbw {
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*width: 500px;*/
    width: 651px;
    max-width: 100%;
    padding: 20px;
    border-radius: 20px;
}

.login-text {
    color: #e2e2e2 !important;
    border: 1px solid #e2e2e2 !important;
    border-left: 5px solid #5a6e7f !important;
}

.login_form .submit {
    width: 100%;
    background: #ceb578;
    border: none;
    border-radius: 6px;
}

    .login_form .submit:active,
    .login_form .submit:focus {
        background: #b69647;
    }

.login_form #loginForm {
    text-align: center;
}

.login_form .form-group {
    text-align: left;
}

.login_form_lbw .submit {
    width: 270px;
    background: #ceb578;
    border: none;
    border-radius: 5px;
}

    .login_form_lbw .submit:active,
    .login_form_lbw .submit:focus {
        background: #b69647;
    }

.login_form_lbw #loginForm {
    text-align: center;
}

.login_form_lbw .form-group {
    text-align: left;
}

/* Login form */

.cf-forgot-password label {
    padding: 0;
}

.cf-forgot-password,
.cf-forgot-password div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

    .cf-forgot-password div .checkbox {
        padding: 0;
    }

        .cf-forgot-password div .checkbox input {
            margin-top: 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;
}

/* Charts & Notification Tab */
.notification-tile {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

.notification-tile-desc {
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    height: 90px;
    border-radius: 8px 0 0 8px;
    padding: 15px;
    border-left: 8px solid rgba(0,0,0,0.2);
}

.notification-tile-count {
    display: flex;
    align-items: center;
    font-size: 35px;
    font-weight: 700;
    height: 90px;
    color: #fff;
    padding: 15px;
    border-radius: 0 8px 8px 0;
    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;
    }


.notification-tile:nth-child(3n + 4) {
    background: #ece0ff;
}

    .notification-tile:nth-child(3n + 4) .notification-tile-count {
        background: #ae97d1;
    }

/* 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-left: 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-right: 10px;
}

/* Table Styling */

table.dataTable.no-footer,
table.display thead,
table,
thead,
tbody,
tfoot,
td,
.dataTables_scrollBody {
    border: 0px solid #ccc !important;
    border-collapse: collapse;
}

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-right: 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;
}


.TimeSheet-head,
.TimeSheet-colHead {
    background-color: #2a3f54;
    color: #fff;
}

.dataTables_info {
    font-size: 12px !important;
    color: #2e3f52 !important;
}

#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: "Courier New", Courier, monospace;
    line-height: 14px;
    content: "+";
    background-color: #ceb578;
}

/* 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_filter input {
    font-size: 16px !important;
    color: #2e3f52 !important;
    height: 30px !important;
    margin-left: 5px;
    margin-right: 5px;
}

.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;
    }

.dt-buttons {
    /*  display: inline-flex;*/
    /*  margin-bottom: 10px;*/
    margin-top: 8px;
    /*  float: right;*/
}

.dataTables_length,
.dataTables_filter {
    margin-bottom: 5px;
}

/* Table Pagination
a.paginate_button.next {
  background: #ceb578 !important;
  color: #fff !important;
}
a.paginate_button.previous {
  background: #ceb578 !important;
  color: #fff !important;
} */

@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;
}

/* 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: 15px 30px;*/
    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;
}*/

/* 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: 767.98px) {
    .nav-logos {
        display: none;
    }
}

/* 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;
    right: 0;
    background: -moz-linear-gradient( left, rgba(153, 153, 153, 0) 0%, rgba(245, 246, 250, 1) 72% ); /* FF3.6-15 */
    background: -webkit-linear-gradient( left, rgba(153, 153, 153, 0) 0%, rgba(245, 246, 250, 1) 72% ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient( to right, rgba(153, 153, 153, 0) 0%, rgba(245, 246, 250, 1) 72% ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00999999', endColorstr='#f5f6fa',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;
    left: 0;
}

@media (max-width: 575.98px) {
    .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
    }
}

/* 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 */
.home-chart {
    margin-bottom: 15px;
    padding: 20px;
    background: #fff;
    margin-top: 0;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

/* Student List EDU */

.std-list-tiles {
    padding: 15px 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;
    color: #fff;
    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 .x_panel {
        margin: 0;
        padding: 0;
    }

    .displayStudentLocation .student-location-map {
        background: #fff;
        padding: 20px;
        margin-top: 0px;
        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;
        color: #fff !important;
    }

.btn-student-getDirection {
    background: #1c2c42;
    border-radius: 10px;
    border: none;
    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 !important;
    border: none;
    padding: 10px 20px;
    margin: 0;
    margin: 5px;
}

.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 !important;
    color: #fff !important;
}

.btn-dataTable-submit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .btn-dataTable-submit button {
        margin: 10px;
    }

.btn-success-zho {
    color: #fff !important;
    margin: 5px 10px;
}
/* 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: #fff !important;
        text-decoration: none;
    }

.btn_pre-notes-app,
.btn_behavious-plan,
.btn_iepplan {
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.btn-edit {
    border: none;
    padding: 10px 20px;
    background: #2e3f52;
    color: #fff;
    margin: 5px;
    border-radius: 4px;
}

    .btn-edit:hover,
    .btn-edit:active,
    .btn-edit:focus {
        background: #2e3f52 !important;
        color: #fff !important;
    }

.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 !important;
        color: #fff !important;
    }

.btn_pre-notes-app {
    background: #75ca9f;
}

.btn_behavious-plan {
    background: #9999cc;
}

.btn_iepplan {
    background: #ceb578;
}

/* 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;
}

/* 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;
    margin-top: 0;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}

.modal-content {
    border: none;
    box-shadow: none;
    background-clip: none;
}

.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 !important;
    background-color: #fff;
}

.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;
}

.icon-disability {
    position: absolute;
    right: -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;
}

@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);*/
        border: 2px solid #625f58;
        transition: 0.2s ease box-shadow, 0.2s ease transform;
        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 .breaktime {
        background-color: #e7ebe9;
    }

    .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-namesFriday {
        grid-area: week;
        display: grid;
        grid-template-columns: repeat(1, 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 > 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;
    right: 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 {
    right: 17px !important;
    width: 50px !important;
    height: 50px !important;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #c72d2d !important;
}

.Stdheader {
    border: 1px dashed #fff;
    padding: 10px;
}

/*===========================================================================Added by manaf 23-05-2023===========================================================================*/
#nprogress .spinner {
    top: 50%;
    right: 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;
    right: 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: left;
    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-right: 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%);
    left: -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;
    filter: brightness(100);
    transform: translate(30%, -50%);
    left: -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(25%, -50%);
    left: -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(25%, -50%);
    left: -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-left: 0;
    width: 100%;
}

.nav-hide .left_col {
    width: 0;
    left: -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-left: 0;
}

@media (max-width:991px) {
    .sm-hidden {
        display: block;
    }
    /*
    .nav-hide .main_container .top_nav {
        margin-left: 300px;
        width: calc(100vw - 300px);
    }*/

    .nav-hide .container.body .col-md-3.left_col {
        width: 300px;
        left: 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;
        left: 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-left: 300px;
    }

    .nav-hide footer {
        margin-left: 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 {
        left: 0;
    }

    .nav-tabs > li > a:after {
        right: 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;
    right: 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: calc(100% - 12px);
    background-position-y: center;
    background-size: 12px;
}

@media(max-width:992px) {
    select.form-control {
        margin: 5px 0;
    }
}

input[type=text], input[type=search] {
    border-radius: 6px;
    box-shadow: none;
}

input, select, textarea {
    border-radius: 6px;
    box-shadow: none;
    outline: none;
}

/*.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
}*/

.zh_pannel {
    padding: 5px 15px;
    margin: 10px 0;
}

.zho_pannel {
    padding: 15px;
    background: #fff;
    margin: 10px 0 0;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -7px #2e3f52;
}


.p-5 {
    padding: 5px;
}

.zh_pannel_p {
    padding: 15px 25px;
}

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

.bg-whit {
    background: #fff;
}

.mtb-5 {
    margin: 10px 0;
}

.ptb-15 {
    padding: 15px 0;
}

.pxy-15 {
    padding: 0 15px;
}

.mt-0 {
    margin-top: 0;
}

.px-15 {
    padding: 0 15px;
}

.m-0 {
    margin: 0;
}

.mt-15 {
    margin-top: 15px;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.box-shadow-none {
    box-shadow: none;
}

.btn-dlt {
    padding: 5px;
    background: #ee422b
}

.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: flex;
}

.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: #5e6dbf;
}

.d-flex .col-lg-3:nth-child(3n) .cardnew :after {
    background: #ca75b8;
}

.d-flex .col-lg-3:nth-child(4n) .cardnew :after {
    background: #337ab7;
}

.d-flex .col-lg-3:nth-child(5n) .cardnew :after {
    background: #ca8575;
}

.d-flex .col-lg-3:nth-child(6n) .cardnew :after {
    background: #ff805a;
}

.d-flex .col-lg-3:nth-child(7n) .cardnew :after {
    background: #e3c42d;
}

.caption-edu {
    margin-bottom: 10px;
    font-size: 20px;
    color: #2a3f54;
    font-weight: 600;
    text-transform: capitalize;
}

.h-100 {
    height: 100%;
}

.px-0 {
    padding-left: 0px;
    padding-right: 0px;
}

.indication {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.indication_wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
}

    .indication_wrapper .col {
        margin-right: 10px;
    }

        .indication_wrapper .col:last-child {
            margin-right: 2px;
        }

.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: 15px;
    padding-left: 0;
}

.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
.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;
}

.appointmentSchedule .fc-left .fc-button-group .fc-next-button .fc-icon-right-single-arrow {
    background-image: url('data:image/svg+xml,<svg width="13" height="21" viewBox="0 0 13 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.65333 0.417626L12.5448 9.49176C13.1517 10.0486 13.1517 10.9514 12.5448 11.5082L2.65333 20.5824C2.04635 21.1392 1.06223 21.1392 0.45524 20.5824C-0.151747 20.0255 -0.151747 19.1227 0.45524 18.5659L8.51492 11.1722V9.82784L0.45524 2.4341C-0.151747 1.87727 -0.151747 0.97446 0.45524 0.417626C1.06223 -0.139209 2.04635 -0.139209 2.65333 0.417626Z" fill="%23CEB675"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.appointmentSchedule .fc-left .fc-button-group .fc-prev-button .fc-icon-left-single-arrow {
    background-image: url('data:image/svg+xml,<svg width="13" height="21" viewBox="0 0 13 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3467 20.5824L0.455242 11.5082C-0.151745 10.9514 -0.151745 10.0486 0.455242 9.49176L10.3467 0.417623C10.9537 -0.13921 11.9378 -0.13921 12.5448 0.417623C13.1517 0.974459 13.1517 1.87726 12.5448 2.4341L4.48508 9.82784L4.48508 11.1722L12.5448 18.5659C13.1517 19.1227 13.1517 20.0255 12.5448 20.5824C11.9378 21.1392 10.9537 21.1392 10.3467 20.5824Z" fill="%23CEB675"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}
/*==============calender new styles start==========*/
.datepicker .datepicker-days .table-condensed {
    border: 0 !important;
}

.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 {
    box-shadow: none;
    outline: none;
    background-color: #fff;
}

    .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-right: 15px;
}

.infobox {
    color: #2e3f52;
    border: 1px dashed #ceb578;
    margin: 5px 0;
    background: #fffaed;
    padding: 10px;
    border-radius: 6px;
}

.indication_round {
    width: 24px;
    height: 24px;
    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 {
        left: -4px;
    }

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

/*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-next {
    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-prev {
    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;
}

.logo_ar {
    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";
}

.darkmode-enable [data-bs-toggle=darkmode] .glyphicon-eye-close:before {
    content: "\e105";
}


/*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: left;
}

.h2_classic_head {
    padding: 5px 10px;
    border-left: 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-right: 8px;
}

    .top-statistics.without-activecases div:last-child {
        margin-right: 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: left !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 8px 0 0;
    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;
    border: 0px !important;
    margin: 0 !important;
}

.titleLabel h4.brief {
    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;
}

table td a {
    display: inline-block;
}

.line-height2 {
    line-height: 2 !important;
}

.pro_summry_align a {
    display: inline-block;
    margin: 5px;
}

.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: calc(100% - 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 1px 1px 0px;
    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: 0;
    right: 0 !important;
    left: 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%);
    }*/

tbody.TimeSheet {
    display: contents;
}

.modal-contents {
    padding: 0 10px;
}

.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;
    right: 0;
    top: 7px;
}

.pro-align {
    float: left;
    width: 100%;
}

.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);
    left: 72px;
    width: 0;
    background: #fff; /*#FBFBFB*/
    overflow: auto;
    z-index: 9;
    padding: 8px;
    /* transition: .5s;*/
}

.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;
        left: 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: -35px;
    left: 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 6px 6px 0;
    border-color: transparent #fff transparent transparent;
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-style: solid;
    left: -6px;
    bottom: 65px;
}

.Zho_sidemenu .dropdown.open .dropdown-menu.top-position1, .Zho_sidemenu .dropdown .dropdown-menu.top-position1 {
    top: -65px;
    left: 60px;
    background: #fff;
    border-radius: 0;
    border: 0;
    text-align: center;
    box-shadow: #b1b1b1 1px 1px 9px -1px !important;
    min-width: auto;
    padding: 0 15px;
}

.Zho_sidemenu .top-position1:before {
    content: '';
    position: absolute;
    border-width: 6px 6px 6px 0;
    border-color: transparent #fff transparent transparent;
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-style: solid;
    left: -6px;
    top: 90px;
}

.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;
    letter-spacing: 30px;
    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: 10px;
}

.Zho_sidemenu .language_switch {
    margin: 0;
    padding: 0 15px;
    background: #fff;
    /*height: 65px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 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;
    height: 55px;
}

.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;
    left: 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;
    left: 0;
    width: calc(300px - 88px);
    padding: 0;
}

/*.Zho_sidemenu .menu_module.active:before {
    content: '';
    width: 72px;
    height: 56px;
    left: 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 16px 16px 25px;
}
*/
.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;
    right: 5px;
    width: 20px;
    background-size: 12px 12px !important;
    transform: rotate(0deg);
    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;
    right: 5px;
    width: 20px;
    background-size: 12px 12px !important;
    transform: rotate(90deg);
    top: 20px;
    opacity: 0.5;
    background-position: center !important;
}


/*================ === 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: left;
    font-size: 28px !important;
    font-style: normal;
    font-weight: 700 !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: right 12px center !important;
    background-size: 13px 7px !important;
    height: 44px;
    padding: 8px 35px 8px 16px;
    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: left 15px center;
    padding: 8px 16px 8px 48px;
    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 {
        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: left;
        line-height: 20px;
        padding: 16px 16px !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: left 15px center;
        padding: 8px 16px 8px 48px;
        background-repeat: no-repeat;
        height: 44px !important;
    }

/* #group_management_wrapper.dataTables_wrapper .dataTables_filter {
        position: absolute;
        right: 0;
        top: -58px;
    }*/

.Zho_table tr td {
    padding: 16px !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: left;
    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: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
}

.avatar-group-item:nth-child(2n) .avthar-name {
    background: #F93E97;
    color: #FFF;
    text-align: center;
    font-family: Almarai;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
}

.avatar-group-item:nth-child(3n) .avthar-name {
    background: #43D0E8;
    color: #FFF;
    text-align: center;
    font-family: Almarai;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
}

.avatar-group-item:nth-child(4n) .avthar-name {
    background: #F4BD21;
    color: #000;
    text-align: center;
    font-family: Almarai;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
}

.avatar-group-item:nth-child(5n) .avthar-name {
    background: #F93E97;
    color: #FFF;
    text-align: center;
    font-family: Almarai;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
}

.avatar-group-item:nth-child(6n) .avthar-name {
    background: #43D0E8;
    color: #FFF;
    text-align: center;
    font-family: Almarai;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.667px;
}

.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;
}

    .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: left;
    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: left 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-left: 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-left: 0 solid var(--shades-platinum, #E7E6EA) !important;
    border-right: 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-right: 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-left: 1rem;
}

/* SVG User Icon Style */
.assign_calender
.user-icon {
    width: 100%;
    max-width: 4rem;
    height: auto;
    margin-right: 1rem;
}

/* Status Indicator Style */
.assign_calender
.status-indicator {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #222222;
    margin-right: 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;
        right: 8px;
        top: 10px;
        width: 0;
    }

    .Scheduled_wrapper:hover .delete_session {
        position: absolute;
        right: 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 {
    right: 20px;
}

.responsive-table.schedule_table_left {
    width: 80%;
}

.schedule_table_right {
    width: 20% !important;
}

.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-left: 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;
    right: 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-right: 24px;
    margin-bottom: 24px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}

    .unitwrapper:hover {
        position: relative;
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
        z-index: 1;
    }

    .unitwrapper:last-child {
        margin-right: 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;
    transform: rotate(180deg);
}

.searchableList span {
    display: block;
}

.unitwrapper:nth-child(4n), .unitwrapper:nth-child(8n), .unitwrapper:nth-child(12n) {
    margin-right: 0px;
}


@media (max-width:992px) {
    .unitwrapper {
        width: calc(100% / 3 - 16px);
    }

        .unitwrapper:nth-child(3n), .unitwrapper:nth-child(6n), .unitwrapper:nth-child(9n), .unitwrapper:nth-child(12n) {
            margin-right: 0px;
        }

        .unitwrapper:nth-child(4n), .unitwrapper:nth-child(8n) {
            margin-right: 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-right: 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-right: 0px;
        }
}

@media (max-width:480px) {
    .unitwrapper {
        width: calc(100% / 1 );
        margin-right: 0 !important;
    }
}

.align-items-center {
    align-items: center;
}
/*================ ===Units End ==== =======================*/

.nav-button {
    z-index: 100 !important;
    position: fixed;
    top: 15px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    left: 15px
}

.nav-bars {
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
}



/*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;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

    .breadcum span {
        padding-right: 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-right: 1px solid #fff;
    align-items: center;
    margin-right: 32px;
    padding-right: 32px;
    margin-bottom: 24px;
}

@media(max-width:600px) {
    .lession_disc {
        display: flex;
        flex-direction: row;
        border: 0;
        padding: 0;
        margin: 0 0 8px 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;
        }
}

.lession_disc:last-child {
    border-right: 0px solid #fff;
}

.pl-16 {
    padding-left: 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-right: 0px;
    }

.Outcomes_counts {
    width: 100%;
    color: #121212;
}

    .Outcomes_counts ul {
        margin: 0;
        padding-left: 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-right: 16px;
    margin-bottom: 32px;
    overflow: hidden;
}

    .Performance_box:nth-child(4n), .Performance_box:nth-child(8n) {
        margin-right: 0;
    }

.Outcomes_counts ul li:before {
    counter-increment: item;
    content: counter(item);
    font-weight: bold;
    position: absolute;
    left: 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;
    left: 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-right: 16px;
        margin-bottom: 32px;
    }

        .Performance_box:nth-child(4n), .Performance_box:nth-child(8n) {
            margin-right: 16px;
        }

        .Performance_box:nth-child(2n), .Performance_box:nth-child(4n), .Performance_box:nth-child(6n), .Performance_box:nth-child(8n) {
            margin-right: 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-right: 16px;
        margin-bottom: 32px;
    }

        .Performance_box:nth-child(4n), .Performance_box:nth-child(8n) {
            margin-right: 0;
        }

        .Performance_box:nth-child(2n), .Performance_box:nth-child(4n), .Performance_box:nth-child(6n), .Performance_box:nth-child(8n) {
            margin-right: 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;
        right: 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 0 0 12px;
    margin: 0 0 0 12px;
}

    .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 0 0 12px;
    margin: 0 0 0 12px;
}

    .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;
    font-family: arial;
    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;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 100;
}

.custom-file img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 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-left: 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-left: 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-right: 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-left: 1px solid #E7E6EA;
}

.position-fixed::-webkit-scrollbar {
    width: 0px;
}

.position-fixed {
    position: fixed;
    right: 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-right: 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-left: 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-right: 5px;
        transform: rotate(-180deg);
    }
/*.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-left: 16px;
    color: #121212;
    height: 24px;
}

.green_box {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #4C9C2E;
    margin-left: 16px;
    color: #fff;
    height: 24px;
}

.mr-4 {
    margin-right: 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;
    right: 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;
    left: 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: right 12px center !important;
    background-size: 13px 7px !important;
    height: 44px;
    padding: 8px 35px 8px 16px;
    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 35px 8px 16px;
    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%;
    outline: none !important;
}

.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;
    right: 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-right: 5px;
}

.remove_attachmnt {
    display: flex;
    align-items: center;
}

    .remove_attachmnt svg {
        width: 25px;
        height: 25px
    }

.tablebg {
    background: #fbfbfb;
    border-radius: 10px;
    padding: 0px;
}

.table_attachment {
    border: 0 !important;
    margin: 0;
    margin: 5px;
}

    .table_attachment tr, .table_attachment td {
        border: 0 !important;
        padding: 8px 0;
        background: transparent;
    }

.table_matchColumn {
    border: 0 !important;
    margin: 0;
    /* margin: 5px;*/
}

    .table_matchColumn tr, .table_matchColumn td {
        border: 0 !important;
        /*padding: 8px 0;*/
        background: transparent;
    }
/*========================================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;
    left: 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;
    left: 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 {
    left: -300px;
}

.Zho_sidemenu .hoverwrapper:hover .side-menu > li.active .nav.child_menu {
    left: 72px;
    /* transition: .1s;*/
}

.Zho_sidemenu .hoverwrapper:hover .side-menu > li .nav.child_menu .sub_childmenu {
    left: 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: left;
        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 .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 {
    right: 20px !important;
    top: 65px !important;
    left: 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-left: 4px solid transparent;
}

    .slider-wrapper:hover, .slider-wrapper:active, .slider-wrapper:focus {
        border-left: 4px solid #9152C0;
        background: var(--shades-light-grey, #F5F5F7);
        cursor: pointer;
        box-shadow: none;
    }

.active-exam {
    border-left: 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 img {
        padding: 0 5px;
        height: 24px;
    }

    .details-wrapper a {
        cursor: pointer;
    }

    .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;
    right: 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;
    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;
}



/********/

.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: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-right: 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.sem_unit_active .sem_searchableList .unit_pics,
    .sem_unit.sem_unit_active .sem_searchableList .unit_pics img {
        border-radius: 16px 0 0 0;
    }

    .sem_unit.sem_unit_active {
        margin-bottom: 0px;
        border-radius: 16px 16px 0 0;
        filter: none;
    }

/*  .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: 16px 0 0 16px;
        object-fit: fill;
        overflow: hidden;
        background: #e7f3f9;
        width: 100px;
    }

        .sem_searchableList .unit_pics img {
            border-radius: 16px 0 0 16px;
            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 10px 0 0px;
    }

    .markbox .box1 {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #E2FBD7;
        border-radius: 12px;
        margin: 5px 10px 0 0px;
    }

    .markbox .box2 {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #FFF0D1;
        border-radius: 12px;
        margin: 5px 10px 0 0px;
    }

    .markbox .box3 {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #CCF8FE;
        border-radius: 12px;
        margin: 5px 10px 0 0px;
    }

    .markbox .box4 {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        text-align: center;
        flex-direction: column;
        background: #F1D1D1;
        border-radius: 12px;
        margin: 5px 10px 0 0px;
    }

.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 0 0 5px;
    border-radius: 4px;
}

.units_search1 {
    position: absolute;
    top: -60px;
    right: 0;
}

.units #searchableSection {
    display: flex;
}

@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;
    }
}

.active_semester1 {
    border-left: 3px solid #4c9c2e;
}

.active_semester2 {
    border-left: 3px solid #f5b126;
}

.active_semester3 {
    border-left: 3px solid #34b6fc;
}

/*********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: 8px 0 0 8px;
    }

    .switch-field label:last-of-type {
        border-radius: 0 8px 8px 0;
    }

/**********/


/****************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 0 0 10px;
    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 10px 20px 0;
}

    .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: left 6px center;
    padding: 8px 16px 8px 36px;
    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-right: 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;
    }

.headalignment {
    min-width: calc(33.33% + 7.5px);
}


.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;
    }

@media (max-width:992px) {
    .headalignment {
        min-width: auto;
    }

    .egyptlogo {
        width: auto;
        border-radius: 8px;
        background: #fff;
        margin: 10px 0px 0px 0px;
        height: 60px;
    }

        .egyptlogo img {
            height: auto;
            border-radius: 8px;
            width: 100%;
        }

    .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;
        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;
}

/***********************************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: right;
    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-left: 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;
    left: -58px;
    top: 30px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #ffff;
}

.week-unit {
    display: flex;
    flex: 1;
}

    .week-unit .units {
        flex: 1;
        padding: 10px 5px 10px 0;
        border-right: 1px solid #0000000a;
        margin-right: 10px;
    }

        .week-unit .units:last-child {
            border-right: 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: "\f0da";
        font: normal normal normal 14px/1 FontAwesome;
        margin-right: 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;
}

.answersPadding {
    padding: 3rem !important;
}

@media(max-width:768px) {
    .week-unit {
        flex-direction: column;
    }

        .week-unit .units {
            border-bottom: 1px solid #ddd;
            border-right: 0px solid #ddd;
        }

            .week-unit .units:last-child {
                border-bottom: 0 solid #ddd;
                border-right: 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 left 10px center;
    padding-left: 35px;
    font-weight: 600;
    color: #ffffff !important;
    background-size: 20px;
    margin-bottom: 5px;
    margin-left: 5px;
}

.Certificate_btn {
    border-radius: 6px;
    background: #31555a url(../images/Certificate.svg) no-repeat left 10px center;
    padding-left: 35px;
    font-weight: 600;
    color: #ffffff !important;
    background-size: 20px;
    margin-bottom: 5px;
    margin-left: 5px;
}


.actionwrapper .dropdown-menu {
    right: 0;
    left: inherit !important;
}

.pt-5 {
    padding-top: 5px;
}

/*left: inherit !important;
}*/

.apexcharts-canvas, .apexcharts-svg, .apexcharts-graphical {
    width: 100% !important;
}

    .apexcharts-svg foreignObject, .apexcharts-inner {
        width: 100% !important;
    }


        .apexcharts-svg foreignObject g, .apexcharts-svg foreignObject defs, .apexcharts-svg foreignObject svg {
            width: 100% !important;
        }

.searchinput {
    border-radius: 6px;
    border: 1px solid var(--neutral-quaternary, #D0D0D2);
    background: var(--neutral-white, #FFF);
    display: flex;
    padding: 12px 12px 12px 40px;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    background: #fff url("../images/search.svg") no-repeat left 12px center;
    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 right 8px center;
        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;
    }



.daterange_custom.daterange_custom_dash.daterangepicker.dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

@media (min-width: 730px) {
    .daterange_custom.daterange_custom_dash.daterangepicker.ltr .ranges {
        float: left;
    }
}


/*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%;
    left: 0px;
}

.row.res-gap15 .control-group .input-prepend.input-group .form-control:last-child {
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

.row.res-gap15 .control-group .input-prepend.input-group .input-group-addon:first-child {
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
}
/*16-05-24*/

.lesson_code {
    position: absolute;
    font-weight: 600;
    right: 15px;
    background: #fff;
    top: -36px;
    font-size: 14px;
    border-radius: 6px;
    color: #000;
    padding: 4px 10px;
    z-index: 9;
}
.rateunit_model {
    margin:0;
}