body {
    font-size: 14px;
    color: #4c5258;
    letter-spacing: .5px;
    background: linear-gradient(90deg, rgb(0 174 239 / 4%) 0%, rgb(0 174 239 / 4%) 100%);
    overflow-x: hidden;
    font-family: Roboto, sans-serif 
}
a {
    text-decoration: none 
}
label {
    font-size: 14px !important;
    font-weight: 500 !important;
}

#frmminorityimageupload .card-title {
    font-size:18px;
}

.star {
    color:#fd3550;
}
.wrapper {
    width: 100%;
    position: relative 
}
.sidebar-wrapper {
    width: 250px;
    height: 540px;
    position: fixed;
    top: 90px;
    bottom: 0;
    left: 30PX;
    background: #fff;
    border-right: 0 solid #e4e4e4;
    z-index: 11;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%)!important;
    transition: all .2s ease-out 
}
.sidebar-header {
    width: 250px;
    height: 60px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 90px;
    bottom: 0;
    padding: 0 15px;
    z-index: 5;
    background: #fff;
    background-clip: padding-box;
    border-bottom: 1px solid #e4e4e4 
}
.logo-icon {
    width: 45px 
}

hr {
   margin: 10px 0px;
}

.hrm_logo img{
   width:130px;
}

.outer_page_login{
   margin-top:120px;
   margin-bottom:50px;
}

.logo-text {
    font-size: 22px;
    margin-left: 10px;
    margin-bottom: 0;
    margin-top: 18px;
    letter-spacing: 1px;
    color: #000;
}

.profile_box {
    max-height: 267px;
    min-height: 245px;
}

.toggle-icon {
    font-size: 22px;
    cursor: pointer;
    color: #000;
}

 .active_header {
   background: linear-gradient(90deg, rgba(232,232,232,1) 0%, rgba(245,238,197,1) 100%);
 }

.active_1{
   background-color: #2A3650 !important;
   color: #fff !important;
   border-radius: 50px;
}

.active_1 a{
   color: #fff !important;
}

.timing_des {
   font-size: 10px;
   border-radius: 5px;
   padding: 3px;
   color: #fff;
   font-weight: 600;
   background-color: #0e2359;
}

.timing_div {
   display:flex;
   flex-direction:column;
}

.bg-black {
   background-color: #2A3650;
}
.topbar {
    position: fixed;
    top: 0;
    left: 0px;
    right: 0;
    height: 60px;
    background: transparent;
    z-index: 10;
}
.topbar .navbar {
    width: 100%;
    height: 110px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.page-wrapper {
    height: 100%;
    margin-top: 60px;
    margin-bottom: 30px;
    margin-left: 250px 
}
.page-content {
    padding: 1.9rem 1.5rem 0.7rem 1.5rem 
}
.page-footer {
    background: #fff;
    left: 0px;
    right: 0;
    bottom: 0;
    position: fixed;
    text-align: center;
    padding: 7px;
    font-size: 14px;
    border-top: 1px solid #e4e4e4;
    z-index: 999;
}
.wrapper.toggled .topbar {
    left: 0px 
}
.wrapper.toggled .page-wrapper {
    margin-left: 70px 
}
.wrapper.toggled .page-footer {
    left: 0px 
}
.sidebar-wrapper ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: 0 0 
}
.sidebar-wrapper .metismenu {
    background: 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px;
    margin-top: 60px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column 
}
.sidebar-wrapper .metismenu li+li {
    margin-top: 5px 
}
.sidebar-wrapper .metismenu li:first-child {
    margin-top: 5px 
}
.sidebar-wrapper .metismenu li:last-child {
    margin-bottom: 5px 
}
.sidebar-wrapper .metismenu>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative 
}
.sidebar-wrapper .metismenu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 6px 5px;
    font-size: 15px;
    color: #5f5f5f;
    outline-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: .5px;
    border-radius: 0.25rem;
    transition: all .3s ease-out 
}
.sidebar-wrapper .metismenu a .parent-icon {
    font-size: 24px;
    line-height: 1 
}
.sidebar-wrapper .metismenu a .menu-title {
    margin-left: 10px 
}
.sidebar-wrapper .metismenu ul a {
    padding: 6px 15px 6px 20px;
    font-size: 15px;
    border: 0 
}
.sidebar-wrapper .metismenu ul a i {
    margin-right: 14px;
}
.sidebar-wrapper .metismenu ul {
    background: #fff 
}
.sidebar-wrapper .metismenu ul ul a {
    padding: 8px 15px 8px 30px 
}
.sidebar-wrapper .metismenu ul ul ul a {
    padding: 8px 15px 8px 45px 
}
.sidebar-wrapper .metismenu .mm-active>a, .sidebar-wrapper .metismenu a:active, .sidebar-wrapper .metismenu a:focus, .sidebar-wrapper .metismenu a:hover {
    color: #000;
    text-decoration: none;
    background-color: #def5fd;
}
.menu-label {
    padding: 20px 15px 5px 5px;
    color: #b0afaf;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px 
}
.metismenu .has-arrow:after {
    position: absolute;
    content: "";
    width: .5em;
    height: .5em;
    border-style: solid;
    border-width: 1.2px 0 0 1.2px;
    border-color: initial;
    right: 15px;
    transform: rotate(134deg) translateY(-50%);
    transform-origin: top;
    top: 50%;
    transition: all .3s ease-out 
}
@media screen and (min-width:1025px) {
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text {
        display: none 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper {
        width: 70px 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: 70px 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon {
        display: none 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        justify-content: center 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: 70px 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {
        justify-content: center 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-title {
        display: none 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li ul {
        display: none 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li.menu-label {
        display: none 
   }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow:after {
        display: none 
   }
    .email-toggle-btn {
        display: none!important 
   }
    .chat-toggle-btn {
        display: none!important 
   }
}
.product-show {
    font-size: 18px;
    left: 15px 
}
.product-discount {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 14px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% 
}
.color-indigator-item {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #e6e0e0;
    border-radius: 50%;
    cursor: pointer 
}
.product-grid .card {
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s 
}
@media (min-width:992px) {
    .product-grid .card:hover {
        margin-top: -.25rem;
        margin-bottom: .25rem;
        -webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3);
        box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3) 
   }
}
.back-to-top {
    display: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 26px;
    color: #fff;
    position: fixed;
    border-radius: 10px;
    bottom: 20px;
    right: 12px;
    background-color: #008cff;
    z-index: 5 
}
.back-to-top:hover {
    color: #fff;
    background-color: #000;
    transition: all .5s 
}
.breadcrumb-title {
    font-size: 22px;
}
.page-breadcrumb .breadcrumb li.breadcrumb-item {
    font-size: 16px 
}
.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    color: #6c757d;
    font-family: LineIcons;
    content: "\ea5c" 
}
.icon-badge {
    width: 45px;
    height: 45px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% 
}
.Quick_links {
    display: flex;
    gap: 16px;
}
.quick_title {
    font-size: 10px;
    line-height: 1.2;
}
.Quick_links .card .card-body {
    padding: 5px;
}
.Quick_links .card {
    margin-bottom: 5px;
}
.widgets-icons {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 20px;
    border-radius: 10px;
}
.widgets-icons-2 {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 27px;
    border-radius: 10px 
}
#geographic-map {
    width: 100%;
    height: 440px 
}
#geographic-map-2 {
    width: 100%;
    height: 300px 
}
#geographic-map-3 {
    width: 100%;
    height: 350px 
}
.product-img {
    width: 60px;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6 
}
.product-img img {
    width: 60px;
    height: 60px;
    padding: 6px 
}
.product-img-2 {
    width: 45px;
    height: 45px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6 
}
.product-img-2 img {
    width: 45px;
    height: 45px;
    padding: 1px 
}
.border-light-2 {
    border-color: rgb(255 255 255 / 12%)!important;
}
.product-list {
    position: relative;
    height: 380px 
}
.dashboard-top-countries {
    position: relative;
    height: 360px 
}
.customers-list {
    position: relative;
    height: 450px 
}
.store-metrics {
    position: relative;
    height: 450px;
}
.product-list-2 {
    position: relative;
    height: 450px;
}
.product-list .row {
    background-color: #f8f9fa;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s 
}
@media (min-width:992px) {
    .product-list .row:hover {
        background-color: #fff;
        margin-top: -.25rem;
        margin-bottom: .25rem;
        -webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .2);
        box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, .2) 
   }
}
.recent-product-img {
    width: 40px;
    height: 40px;
    background-color: #fbfbfb;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6 
}
.recent-product-img img {
    width: 40px;
    height: 40px;
    padding: 6px 
}
.theme-icons {
    background-color: #fff 
}
.lead-table .table {
    border-collapse: separate;
    border-spacing: 0 10px 
}
.fm-menu .list-group a {
    font-size: 16px;
    color: #5f5f5f;
    display: flex;
    align-items: center 
}
.fm-menu .list-group a i {
    font-size: 23px 
}
.fm-menu .list-group a:hover {
    background: #008cff;
    color: #fff;
    transition: all .2s ease-out 
}
.fm-file-box {
    font-size: 25px;
    background: #e9ecef;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem 
}
.fm-icon-box {
    font-size: 32px;
    background: #fff;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem 
}
.user-plus {
    width: 33px;
    height: 33px;
    margin-left: -14px;
    line-height: 33px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
    border: 1px dotted #a9b2bb;
    color: #404142 
}
.user-groups img {
    margin-left: -14px;
    border: 1px solid #e4e4e4;
    padding: 2px;
    cursor: pointer 
}
.contacts-social a {
    font-size: 16px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    background: #fff;
    border: 1px solid #eeecec;
    text-align: center;
    border-radius: 50%;
    color: #2b2a2a 
}
.customers-contacts a {
    font-size: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #eeecec;
    text-align: center;
    border-radius: 50%;
    color: #2b2a2a 
}
.order-actions a {
    font-size: 18px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    border: 1px solid #eeecec;
    text-align: center;
    border-radius: 20%;
    color: #2b2a2a 
}
.auth-cover-left {
    display: flex;
    background-color: #f7f7ff;
    min-height: 100vh;
}
.auth-cover-right {
    display: flex;
    background-color: #ffffff;
    min-height: 100vh;
}
.auth-img-cover-login {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.error {
    color: #dc3545;
}
form select.error, form textarea.error, form input.error, form input.error:focus, form textarea.error:focus, form select.error:focus {
    border-color: #ea5455 !important;
}
.customers-list .customers-list-item {
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s 
}
@media (min-width:992px) {
    .customers-list .customers-list-item:hover {
        background-color: #f8f9fa;
        border-radius: 10px;
        margin-top: -.25rem;
        margin-bottom: .25rem;
        -webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .2);
        box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, .2) 
   }
}
.right-15 {
    right: 15px!important 
}
.font-13 {
    font-size: 13px 
}
.font-14 {
    font-size: 14px 
}
.font-18 {
    font-size: 18px 
}
.font-20 {
    font-size: 20px 
}
.font-22 {
    font-size: 22px 
}
.font-24 {
    font-size: 24px 
}
.font-30 {
    font-size: 30px 
}
.font-35 {
    font-size: 35px 
}
.font-50 {
    font-size: 50px 
}
.font-60 {
    font-size: 60px 
}
.radius-30 {
    border-radius: 30px 
}
.radius-10 {
    border-radius: 10px 
}
.radius-15 {
    border-radius: 15px 
}
.row.row-group>div {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.row.row-group>div:last-child {
    border-right: none;
}
.cursor-pointer {
    cursor: pointer 
}
.dash-wrapper {
    margin: -1.5rem -1.5rem -3.5rem -1.5rem;
    padding: 1.5rem 1.5rem 3.5rem 1.5rem;
}
.dash-array-chart-box {
    width: 105px;
    height: 90px;
    position: relative;
    top: -15px;
    right: 30px;
}
.chart-container-0{
    position:relative;
    height:320px;
}
.chart-container-1{
    position:relative;
    height:260px;
}
.chart-container-2{
    position:relative;
    height:220px;
}
.chart-container-3{
    position:relative;
    height:188px;
}
.chart-container-4{
    position:relative;
    height:162px;
}
.chart-container-5{
    position:relative;
    height:110px;
}
.chart-container-6{
    position:relative;
    height:205px;
}
.chart-container-7{
    position:relative;
    height:60px;
}
.chart-container-8 {
    position: relative;
    height: 260px;
}
.chart-container-9 {
    position: relative;
    height: 280px;
}
.chart-container-10 {
    position: relative;
    height: 300px;
    top: 20px;
}
.chart-container-11 {
    position: relative;
    height: 280px;
}
.chart-container-12 {
    position: relative;
    height: 160px;
}
.chart-container-13 {
    position: relative;
    height: 240px;
}
.chart-container-14{
    position:relative;
    height:40px;
}
.w_chart {
    position: relative;
    display: inline-block;
    width: 65px !important;
    height: 65px !important;
    text-align: center;
    color: #32393f;
}
.w_chart canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 65px !important;
    height: 65px !important;
}
.w_percent {
    display: inline-block;
    line-height: 65px !important;
    z-index: 2;
}
.w_percent:after {
    content: '%';
    margin-left: 0.1em;
    font-size: .8em;
}
.chip {
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    color: rgba(0, 0, 0, .7);
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 16px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    box-shadow: none 
}
.chip img {
    float: left;
    width: 32px;
    height: 32px;
    margin: 0 8px 0 -12px;
    border-radius: 50% 
}
.chip .closebtn {
    padding-left: 10px;
    font-weight: 700;
    float: right;
    font-size: 16px;
    cursor: pointer 
}
.chip.chip-md {
    height: 42px;
    line-height: 42px;
    border-radius: 21px 
}
.chip.chip-md img {
    height: 42px;
    width: 42px 
}
#invoice {
    padding: 0 
}
.invoice {
    position: relative;
    background-color: #fff;
    min-height: 680px;
    padding: 15px 
}
.invoice header {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #008cff 
}
.invoice .company-details {
    text-align: right 
}
.invoice .company-details .name {
    margin-top: 0;
    margin-bottom: 0 
}
.invoice .contacts {
    margin-bottom: 20px 
}
.invoice .invoice-to {
    text-align: left 
}
.invoice .invoice-to .to {
    margin-top: 0;
    margin-bottom: 0 
}
.invoice .invoice-details {
    text-align: right 
}
.invoice .invoice-details .invoice-id {
    margin-top: 0;
    color: #008cff 
}
.invoice main {
    padding-bottom: 50px 
}
.invoice main .thanks {
    margin-top: -100px;
    font-size: 2em;
    margin-bottom: 50px 
}
.invoice main .notices {
    padding-left: 6px;
    border-left: 6px solid #008cff;
    background: #e7f2ff;
    padding: 10px 
}
.invoice main .notices .notice {
    font-size: 1.2em 
}
.invoice table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px 
}
.invoice table td, .invoice table th {
    padding: 15px;
    background: #eee;
    border-bottom: 1px solid #fff 
}
.invoice table th {
    white-space: nowrap;
    font-weight: 400;
    font-size: 16px 
}
.invoice table td h3 {
    margin: 0;
    font-weight: 400;
    color: #008cff;
    font-size: 1.2em 
}
.invoice table .qty, .invoice table .total, .invoice table .unit {
    text-align: right;
    font-size: 1.2em 
}
.invoice table .no {
    color: #fff;
    font-size: 1.6em;
    background: #008cff 
}
.invoice table .unit {
    background: #ddd 
}
.invoice table .total {
    background: #008cff;
    color: #fff 
}
.invoice table tbody tr:last-child td {
    border: none 
}
.invoice table tfoot td {
    background: 0 0;
    border-bottom: none;
    white-space: nowrap;
    text-align: right;
    padding: 10px 20px;
    font-size: 1.2em;
    border-top: 1px solid #aaa 
}
.invoice table tfoot tr:first-child td {
    border-top: none 
}
.invoice table tfoot tr:last-child td {
    color: #008cff;
    font-size: 1.4em;
    border-top: 1px solid #008cff 
}
.invoice table tfoot tr td:first-child {
    border: none 
}
.invoice footer {
    width: 100%;
    text-align: center;
    color: #777;
    border-top: 1px solid #aaa;
    padding: 8px 0 
}
@media print {
    .invoice {
        font-size: 11px!important;
        overflow: hidden!important 
   }
    .invoice footer {
        position: absolute;
        bottom: 10px;
        page-break-after: always 
   }
    .invoice>div:last-child {
        page-break-before: always 
   }
}
.main-row {
    height: 100vh 
}
.main-col {
    max-width: 500px;
    min-height: 300px 
}
.todo-done {
    text-decoration: line-through 
}
.chat-wrapper {
    width: auto;
    height: 600px;
    border-radius: .25rem;
    position: relative;
    background: #fff;
    box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1) 
}
.chat-sidebar {
    width: 340px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, .125);
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem 
}
.chat-sidebar-header {
    width: auto;
    height: auto;
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-right: 0 solid rgba(0, 0, 0, .125);
    border-top-left-radius: .25rem;
    padding: 15px 
}
.chat-sidebar-content {
    padding: 0 
}
.chat-user-online {
    position: relative 
}
.chat-sidebar-header .chat-user-online:before {
    content: '';
    position: absolute;
    bottom: 7px;
    left: 40px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e 
}
.chat-list .chat-user-online:before {
    content: '';
    position: absolute;
    bottom: 7px;
    left: 36px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e 
}
.chat-content {
    margin-left: 340px;
    padding: 85px 15px 15px 15px 
}
.chat-header {
    position: absolute;
    height: 70px;
    left: 340px;
    right: 0;
    top: 0;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-top-right-radius: .25rem;
    z-index: 1 
}
.chat-footer {
    position: absolute;
    height: 70px;
    left: 340px;
    right: 0;
    bottom: 0;
    padding: 15px;
    background: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, .125);
    border-bottom-right-radius: .25rem 
}
.chat-footer-menu a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    border-radius: 50%;
    margin: 3px;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%) 
}
.chat-tab-menu li a.nav-link {
    padding: .3rem .2rem;
    line-height: 1.2;
    color: #4a4b4c 
}
.chat-tab-menu .nav-pills .nav-link.active, .chat-tab-menu .nav-pills .show>.nav-link {
    color: #008cff;
    background-color: rgb(0 123 255 / 0%) 
}
.chat-title {
    font-size: 14px;
    color: #272b2f 
}
.chat-msg {
    font-size: 13px;
    color: #6c757d 
}
.chat-time {
    font-size: 13px;
    color: #6c757d 
}
.chat-list {
    position: relative;
    height: 300px 
}
.chat-list .list-group-item {
    border: 1px solid rgb(0 0 0 / 0%);
    background-color: transparent 
}
.chat-list .list-group-item:hover {
    border: 1px solid rgb(0 0 0 / 0%);
    background-color: rgb(13 110 253 / .12) 
}
.chat-list .list-group-item.active {
    background-color: rgb(13 110 253 / .12) 
}
.chart-online {
    color: #16e15e 
}
.chat-top-header-menu a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    border-radius: 50%;
    margin: 3px;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%) 
}
.chat-content {
    position: relative;
    width: auto;
    height: 520px 
}
.chat-content-leftside .chat-left-msg {
    width: fit-content;
    background-color: #eff2f5;
    padding: .8rem;
    border-radius: 12px;
    max-width: 480px;
    text-align: left;
    border-top-left-radius: 0 
}
.chat-content-rightside .chat-right-msg {
    width: fit-content;
    background-color: #dcedff;
    padding: .8rem;
    border-radius: 12px;
    float: right;
    max-width: 480px;
    text-align: left;
    border-bottom-right-radius: 0 
}
.chat-toggle-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    text-align: center;
    font-size: 24px;
    color: #6c757d;
    border-radius: 50%;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%) 
}
.email-wrapper {
    width: auto;
    height: 600px;
    overflow: hidden;
    border-radius: .25rem;
    position: relative;
    background: #fff;
    box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1) 
}
.email-sidebar {
    width: 250px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, .125);
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem 
}
.email-sidebar-header {
    width: auto;
    height: auto;
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-right: 0 solid rgba(0, 0, 0, .125);
    border-top-left-radius: .25rem;
    padding: 15px 
}
.email-navigation {
    position: relative;
    padding: 0;
    height: 345px;
    border-bottom: 1px solid rgba(0, 0, 0, .125) 
}
.email-header {
    position: absolute;
    height: 70px;
    left: 250px;
    right: 0;
    top: 0;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-top-right-radius: .25rem;
    z-index: 1 
}
.email-content {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: 70px;
    height: auto;
    margin-left: 250px;
    padding: 0;
    background: #fff;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem 
}
.email-navigation a.list-group-item {
    color: #404142;
    padding: .35rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 0%);
    transition: all .3s ease-out 
}
.email-navigation a.list-group-item:hover {
    background-color: rgb(13 110 253 / .12) 
}
.email-navigation a.list-group-item.active {
    color: #0b5ed7;
    font-weight: 600;
    background-color: rgb(13 110 253 / .12) 
}
.email-meeting {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0 
}
.email-meeting a.list-group-item {
    color: #404142;
    padding: .35rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 0%) 
}
.email-meeting a.list-group-item:hover {
    background-color: rgb(0 123 255 / 15%);
    transition: all .3s ease-out 
}
.email-hangout .chat-user-online:before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 45px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e 
}
.email-toggle-btn {
    width: auto;
    height: auto;
    margin-right: 10px;
    text-align: center;
    font-size: 24px;
    color: #404142;
    border-radius: 0;
    cursor: pointer;
    background-color: #fff;
    border: 0 solid rgb(0 0 0 / 15%) 
}
.email-actions {
    width: 230px 
}
.email-time {
    font-size: 13px;
    color: #6c757d 
}
.email-list div.email-message {
    background: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    color: #383a3c 
}
.email-list div.email-message:hover {
    transition: all .2s ease-out;
    background-color: #eceef1 
}
.email-list {
    position: relative;
    height: 530px 
}
.email-star {
    color: #6c757d 
}
.email-read-box {
    position: relative;
    height: 530px 
}
.compose-mail-popup {
    width: 42%;
    position: fixed;
    bottom: -30px;
    right: 30px;
    z-index: 15;
    display: none 
}
.compose-mail-toggled {
    display: block 
}
.compose-mail-title {
    font-size: 16px 
}
.compose-mail-close {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgb(255 255 255 / 0%) 
}
.compose-mail-close:hover {
    background-color: rgb(255 255 255 / 20%) 
}
.nav-primary.nav-tabs .nav-link.active {
    color: #008cff;
    border-color: #008cff #008cff #fff 
}
.nav-danger.nav-tabs .nav-link.active {
    color: #f41127;
    border-color: #f41127 #f41127 #fff 
}
.nav-success.nav-tabs .nav-link.active {
    color: #17a00e;
    border-color: #17a00e #17a00e #fff 
}
.nav-warning.nav-tabs .nav-link.active {
    color: #0d2157;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #0d2157; 
}
.nav-pills-danger.nav-pills .nav-link.active {
    color: #fff;
    background-color: #f41127 
}
.nav-pills-success.nav-pills .nav-link.active {
    color: #fff;
    background-color: #17a00e 
}
.nav-pills-warning.nav-pills .nav-link.active {
    color: #000;
    background-color: #ffc107 
}
.nav-search input.form-control {
    background-color: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 45%);
    color: #fff 
}
.nav-search button[type=submit] {
    background-color: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 32%);
    color: #fff 
}
.nav-search input.form-control::placeholder {
    opacity: .5!important;
    color: #fff!important 
}
.nav-search input.form-control::-ms-input-placeholder {
    color: #fff!important 
}
.round-pagination.pagination .page-item:first-child .page-link {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px 
}
.round-pagination.pagination .page-item:last-child .page-link {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px 
}
.bg-body {
    background-color: #f7f7ff!important;
}
.bg-light-primary {
    background-color: rgb(13 110 253 / .11)!important 
}
.bg-light-success {
    background-color: rgb(23 160 14 / .11)!important 
}
.bg-light-danger {
    background-color: rgb(244 17 39 / .11)!important 
}
.bg-light-warning {
    background-color: rgb(255 193 7 / .11)!important 
}
.bg-light-info {
    background-color: rgb(13 202 240 / 18%)!important 
}
.bg-light-transparent {
    background-color: rgb(0 0 0 / 15%)!important 
}
.bg-gradient-deepblue {
    background: #6a11cb;
    background: -webkit-linear-gradient( 45deg , #6a11cb, #2575fc)!important;
    background: linear-gradient( 45deg , #6a11cb , #2575fc)!important;
}
.bg-gradient-orange {
    background: #fc4a1a;
    background: -webkit-linear-gradient( 45deg , #fc4a1a, #f7b733)!important;
    background: linear-gradient( 45deg , #fc4a1a, #f7b733)!important;
}
.bg-gradient-ohhappiness {
    background: #00b09b;
    background: -webkit-linear-gradient( 45deg , #00b09b, #96c93d)!important;
    background: linear-gradient( 45deg , #00b09b, #96c93d)!important;
}
.bg-gradient-ibiza {
    background: #ee0979;
    background: -webkit-linear-gradient( 45deg , #ee0979, #ff6a00)!important;
    background: linear-gradient( 45deg , #ee0979, #ff6a00)!important;
}
.bg-gradient-scooter {
    background: #17ead9;
    background: -webkit-linear-gradient( 45deg , #17ead9, #6078ea)!important;
    background: linear-gradient( 45deg , #17ead9, #6078ea)!important;
}
.bg-gradient-bloody {
    background: #f54ea2;
    background: -webkit-linear-gradient( 45deg , #f54ea2, #ff7676)!important;
    background: linear-gradient( 45deg , #f54ea2, #ff7676)!important;
}
.bg-gradient-quepal {
    background: #42e695;
    background: -webkit-linear-gradient( 45deg , #42e695, #3bb2b8)!important;
    background: linear-gradient( 45deg , #42e695, #3bb2b8)!important;
}
.bg-gradient-blooker {
    background: #ffdf40;
    background: -webkit-linear-gradient( 45deg , #ffdf40, #ff8359)!important;
    background: linear-gradient( 45deg , #ffdf40, #ff8359)!important;
}
.bg-gradient-cosmic {
    background: linear-gradient(to right, #8e2de2, #4a00e0)!important 
}
.bg-gradient-burning {
    background: linear-gradient(to right, #ff416c, #ff4b2b)!important 
}
.bg-gradient-lush {
    background: linear-gradient(to right, #56ab2f, #a8e063)!important 
}
.bg-gradient-kyoto {
    background: linear-gradient(to right, #f7971e, #ffd200)!important 
}
.bg-gradient-blues {
    background: linear-gradient(to right, #56ccf2, #2f80ed)!important 
}
.bg-gradient-moonlit {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364)!important 
}
.split-bg-primary {
    background-color: #0c62e0;
    border-color: #0c62e0 
}
.split-bg-secondary {
    background-color: #515a62;
    border-color: #515a62 
}
.split-bg-success {
    background-color: #128e0a;
    border-color: #128e0a 
}
.split-bg-info {
    background-color: #0bb2d3;
    border-color: #0bb2d3 
}
.split-bg-warning {
    background-color: #e4ad07;
    border-color: #e4ad07 
}
.split-bg-danger {
    background-color: #e20e22;
    border-color: #e20e22 
}
.bg-facebook {
    background-color: #3b5998!important 
}
.bg-twitter {
    background-color: #55acee!important 
}
.bg-google {
    background-color: #e52d27!important 
}
.bg-linkedin {
    background-color: #0976b4!important 
}
/* Text Color */
.text-option{
    color: #32393f!important 
}
.text-facebook{
    color: #3b5998!important 
}
.text-twitter{
    color: #55acee!important 
}
.text-youtube{
    color: #e52d27!important 
}
.text-sky-light {
    color: #b4d2ff;
}
.section-authentication-signin {
    height: 100vh 
}
.authentication-forgot {
    height: 100vh;
    padding: 0 1rem 
}
.authentication-reset-password {
    height: 100vh;
    padding: 0 1rem 
}
.authentication-lock-screen {
    height: 100vh;
    padding: 0 1rem 
}
.error-404 {
    height: 100vh;
    padding: 0 1rem 
}
.error-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    margin: 5px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important 
}
.bg-login {
    background-image: url(../images/login-images/bg-login-img.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed 
}
.bg-forgot {
    background-image: url(../images/login-images/bg-forgot-password.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed 
}
.bg-lock-screen {
    background-image: url(../images/login-images/bg-lock-screen.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed 
}
.login-separater{
   margin-top:-20px;
}

.login-header .nav-item a {
   font-size: 15px;
   color: #000;
}

.card-body-border{
   border-top:5px solid #00aeef;
}

.forgot-password{
   color:#00aeef;
}

.login-card{
   margin-top:65px;
}

.login-header .fixed-top {
    height: 75px;
    background: #fff;
    box-shadow: 0px 0px 4px #00aeef9c;
}

.login-separater span {
    position: relative;
    top: 26px;
    margin-top: -10px;
    background-color: #fff;
    padding: 5px;
    font-size: 16px;
    color: #00aeef;
    z-index: 1 
}
.btn i {
    vertical-align: middle;
    font-size: 1rem;
    margin-top: -1em;
    margin-bottom: -.8em;
    margin-right: 5px 
}
.btn-inverse-primary {
    color: #008cff;
    background-color: rgba(0, 140, 255, 0.18);
    border-color: rgb(209, 234, 255);
}
.btn-inverse-primary:hover {
    color: #008cff;
    background-color: rgba(0, 140, 255, 0.18);
    border-color: rgba(0, 140, 255, 0.18);
}
.btn-inverse-primary:focus {
    color: #008cff;
    background-color: rgba(0, 140, 255, 0.18);
    border-color: rgba(0, 140, 255, 0.18);
    box-shadow: 0 0 0 .25rem rgba(49, 132, 253, .3) 
}
.btn-inverse-secondary {
    color: #75808a;
    background-color: rgba(117, 128, 138, 0.18);
    border-color: rgb(230, 232, 234);
}
.btn-inverse-secondary:hover {
    color: #75808a;
    background-color: rgba(117, 128, 138, 0.18);
    border-color: rgba(117, 128, 138, 0.18);
}
.btn-inverse-success {
    color: #15ca20;
    background-color: rgba(21, 202, 32, 0.18);
    border-color: rgb(212, 246, 214);
}
.btn-inverse-success:hover {
    color: #15ca20;
    background-color: rgba(21, 202, 32, 0.18);
    border-color: rgba(21, 202, 32, 0.18);
}
.btn-inverse-success:focus {
    color: #15ca20;
    background-color: rgba(21, 202, 32, 0.18);
    border-color: rgba(21, 202, 32, 0.18);
    box-shadow: 0 0 0 .25rem rgb(23 160 14 / 32%) 
}
.btn-inverse-danger {
    color: #fd3550;
    background-color: rgba(253, 53, 80, 0.18);
    border-color: rgb(255, 218, 223);
}
.btn-inverse-danger:hover {
    color: #fd3550;
    background-color: rgba(253, 53, 80, 0.18);
    border-color: rgba(253, 53, 80, 0.18);
}
.btn-inverse-danger:focus {
    color: #fd3550;
    background-color: rgba(253, 53, 80, 0.18);
    border-color: rgba(253, 53, 80, 0.18);
    box-shadow: 0 0 0 .25rem rgba(225, 83, 97, .3) 
}
.btn-inverse-warning {
    color: #ff9700;
    background-color: rgba(255, 151, 0, 0.18);
    border-color: rgb(255, 236, 209);
}
.btn-inverse-warning:hover {
    color: #ff9700;
    background-color: rgba(255, 151, 0, 0.18);
    border-color: rgba(255, 151, 0, 0.18);
}
.btn-inverse-warning:focus {
    color: #ff9700;
    background-color: rgba(255, 151, 0, 0.18);
    border-color: rgba(255, 151, 0, 0.18);
    box-shadow: 0 0 0 .25rem rgba(217, 164, 6, .3) 
}
.btn-inverse-info {
    color: #0dceec;
    background-color: rgba(13, 206, 236, 0.18);
    border-color: rgb(211, 246, 252);
}
.btn-inverse-info:hover {
    color: #0dceec;
    background-color: rgba(13, 206, 236, 0.18);
    border-color: rgba(13, 206, 236, 0.18);
}
.btn-inverse-light {
    color: #a7aaaa;
    background-color: rgba(233, 234, 234, 0.2);
    border-color: rgb(251, 251, 251);
}
.btn-inverse-light:hover {
    color: #a7aaaa;
    background-color: rgba(233, 234, 234, 0.2);
    border-color: rgba(233, 234, 234, 0.2);
}
.btn-inverse-dark {
    color: #223035;
    background-color: rgba(34, 48, 53, 0.2);
    border-color: #d7d9da;
}
.btn-inverse-dark:hover {
    color: #223035;
    background-color: rgba(34, 48, 53, 0.2);
    border-color: rgba(34, 48, 53, 0.2);
}
.btn-facebook, .btn-facebook:hover {
    box-shadow: 0 2px 2px 0 rgba(59, 89, 152, .14), 0 3px 1px -2px rgba(59, 89, 152, .2), 0 1px 5px 0 rgba(59, 89, 152, .12);
    background-color: #3b5998;
    border-color: #3b5998;
    color: #fff 
}
.btn-white {
    background-color: #fff;
    border-color: #e7eaf3 
}
.chart-container1 {
    position: relative;
    height: 380px 
}
.gmaps, .gmaps-panaroma {
    height: 400px;
    background: #eee;
    border-radius: 3px 
}
.pricing-table .card {
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    -webkit-border-radius: 15px;
    border-radius: 15px 
}
.pricing-table .card .card-header {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px 
}
@media (min-width:992px) {
    .pricing-table .card:hover {
        margin-top: -.25rem;
        margin-bottom: .25rem;
        -webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3);
        box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3) 
   }
}
.pricing-table .card .card-title {
    font-size: 1rem;
    letter-spacing: .2rem;
    font-weight: 500 
}
.pricing-table .card .card-price {
    font-size: 2.7rem 
}
.pricing-table .card .card-price .term {
    font-size: .875rem 
}
.pricing-table .card ul li.list-group-item {
    border-bottom: 1px solid rgb(0 0 0 / 0%);
    color: #3b3b3b;
    font-size: 16px 
}
input::placeholder {
    color: #000!important;
    opacity: .3!important 
}
.form-floating>.form-control::-moz-placeholder {
    color: transparent!important 
}
.form-floating>.form-control::placeholder {
    color: transparent!important 
}
.card-group {
    margin-bottom: 1.5rem 
}
.input-icon .form-control {
    padding-left: 2.5rem;
}
.input-icon span {
    font-size: 16px;
    left: 15px;
}
.topbar .navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 45px;
}
.topbar .navbar .navbar-nav .nav-link {
    color: #212529;
    font-size: 15px;
    padding:10px 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.topbar .navbar .navbar-nav .nav-link:hover, .topbar .navbar .navbar-nav .nav-link:focus {
    /*background-color: #f2f9ff;*/
    color: #ffb30a;
}
.dropdown-toggle-nocaret:after {
    display: none 
}
.alert-count {
    position: absolute;
    top: 2px;
    left: 22px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: #f62718 
}
.user-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0 solid #e5e5e5;
    padding: 0;
}
.user-info .user-name {
    font-size: 15px;
    font-weight: 500;
    color: #413c3c 
}
.user-info .designattion {
    font-size: 13px;
    color: #747474 
}
.user-box {
    display: flex;
    align-items: center;
    height: 60px;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
}
.topbar .navbar .dropdown-app .dropdown-menu {
    width: 270px;
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    border-radius: 16px;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}
.topbar .navbar .dropdown-app .dropdown-menu .app-container {
    position: relative;
    height: 370px;
}
.topbar .navbar .dropdown-app .dropdown-menu .app-box {
    padding: .5rem;
    border-radius: 1rem;
    transition: .2s;
}
.topbar .navbar .dropdown-app .dropdown-menu .app-box:hover {
    background-color: #edf0f3;
}
.topbar .navbar .dropdown-app .dropdown-menu .app-name {
    color: #212529;
    font-size: .64rem;
    text-decoration: none;
    font-weight: 500;
}
.dropdown-large {
    position: relative 
}
.dropdown-large .dropdown-menu {
    width: 360px;
    border: 0;
    padding: 0 0;
    border-radius: 10px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) 
}
.topbar .navbar .dropdown-large .dropdown-menu::after {
    content: '';
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -6px;
    right: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd 
}
.topbar .navbar .dropdown-menu::after {
    content: '';
    width: 13px;
    height: 13px;
    background: #ffff;
    position: absolute;
    top: -6px;
    right: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd 
}
.dropdown-large .msg-header {
    padding: .8rem 1rem;
    border-bottom: 1px solid #ededed;
    background-clip: border-box;
    background-color: #ffffff;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px 
}
.dropdown-large .msg-header-badge {
    background-color: rgb(0 140 255 / 12%);
    color: #008cff;
    padding: 2px 8px;
    margin-bottom: 0;
    border-radius: 4px;
}
.dropdown-large .msg-header .msg-header-title {
    font-size: 16px;
    color: #1c1b1b;
    margin-bottom: 0;
    font-weight: 500 
}
.dropdown-large .msg-header .msg-header-clear {
    font-size: 13px;
    color: #585858;
    margin-bottom: 0 
}
.dropdown-large .msg-footer {
    padding: .8rem 1rem;
    color: #1c1b1b;
    border-top: 1px solid #ededed;
    background-clip: border-box;
    background: 0 0;
    font-size: 14px;
    font-weight: 500;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem 
}
.dropdown-large .user-online {
    position: relative 
}
.dropdown-large .msg-name {
    font-size: 14px;
    margin-bottom: 0;
    color: #212529;
}
.dropdown-large .msg-info {
    font-size: 13px;
    margin-bottom: 0;
    color: #818189;
}
.dropdown-large .msg-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px 
}
.dropdown-large .msg-time {
    font-size: 12px;
    margin-bottom: 0;
    color: #818189 
}
.dropdown-large .user-online:after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e 
}
.dropdown-large .dropdown-menu .dropdown-item {
    padding: .5rem 1.3rem;
    border-bottom: 1px solid #ededed 
}
.header-message-list {
    position: relative;
    height: 360px 
}
.header-notifications-list {
    position: relative;
    height: 360px 
}
.dropdown-large .notify {
    width: 45px;
    height: 45px;
    font-size: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #f1f1f1;
    margin-right: 15px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropdown-large .cart-product-title {
    color: #140e22;
    font-size: 14px;
    margin-bottom: 0px;
}
.dropdown-large .cart-product-price {
    color: #818189;
    font-size: 14px;
    margin-bottom: 0;
}
.dropdown-large .cart-product-cancel {
    right: -7px;
    top: -5px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #eee;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.dropdown-large .cart-product {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 0px;
    border: 1px solid rgb(231 231 231);
    padding: 4px;
    background-color: rgb(255 255 255);
}
.dropdown-large .cart-product img {
    width: 100%;
}
.user-box .dropdown-menu i {
    vertical-align: middle;
    margin-right: 10px 
}
.dropdown-menu {
    -webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border: 0 solid #e9ecef;
    border-radius: 10px;
    font-size: 14px 
}
.topbar .navbar .dropdown-menu {
    -webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;
    animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown 
}
@-webkit-keyframes animdropdown {
    from {
        -webkit-transform: translate3d(0, 6px, 0);
        transform: translate3d(0, 6px, 0);
        opacity: 0 
   }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1 
   }
}
@keyframes animdropdown {
    from {
        -webkit-transform: translate3d(0, 6px, 0);
        transform: translate3d(0, 6px, 0);
        opacity: 0 
   }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1 
   }
}
.search-bar {
    width: 30%;
    cursor: pointer;
}
.search-bar a.btn, .search-bar a.btn:focus{
    color:#7b8288;
    cursor: pointer;
    background-color: #f7f7ff;
    border: 0;
}
.mobile-toggle-menu {
    display: none;
    font-size: 26px;
    color: #404142;
    cursor: pointer 
}
.switcher-wrapper {
    width: 280px;
    height: 100%;
    position: fixed;
    right: -280px;
    top: 0;
    bottom: 0;
    z-index: 16;
    background: #fff;
    border-left: 0 solid #d2d2d2;
    box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .13);
    transition: all .2s ease-out 
}
.switcher-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    background: #008cff;
    box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .13);
    color: #fff;
    text-align: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    top: 40%;
    right: 100%;
    cursor: pointer 
}
.switcher-wrapper.switcher-toggled {
    right: 0 
}
.switcher-body {
    padding: 1.25rem 
}
.switcher-body .form-check .form-check-input, .switcher-body .form-check .form-check-label {
    cursor: pointer 
}
.header-colors-indigators .indigator {
    width: 45px;
    height: 45px;
    background-color: #f4f2f2;
    border-radius: 10px;
    cursor: pointer 
}
@media screen and (max-width:1280px) {
    .email-header {
        height: auto 
   }
    .email-content {
        padding: 100px 0 0 0 
   }
}
@media only screen and (max-width: 1199px) {
    .row.row-group>div {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   }
    .row.row-group>div:last-child {
        border-right: none;
        border-bottom: 0;
   }
}
@media screen and (max-width:1024px) {
    .topbar {
        left: 0!important 
   }
    .mobile-toggle-menu {
        display: block;
        margin-top:25px;
   }
    .sidebar-wrapper {
        left: -300px;
        box-shadow: none 
   }
    .page-wrapper {
        margin-left: 0 
   }
    .page-footer {
        left: 0 
   }
    .wrapper.toggled .sidebar-wrapper {
        left: 0 
   }
    .wrapper.toggled .page-wrapper {
        margin-left: 0 
   }
    .wrapper.toggled .overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000;
        opacity: .6;
        z-index: 10;
        display: block;
        cursor: move;
        transition: all .2s ease-out 
   }
    .error-404 {
        height: auto;
        padding: 6rem 1rem 
   }
    .chat-header {
        border-top-left-radius: .25rem 
   }
    .chat-footer {
        border-bottom-left-radius: .25rem 
   }
    .chat-sidebar {
        left: -370px 
   }
    .chat-content {
        margin-left: 0 
   }
    .chat-header {
        left: 0 
   }
    .chat-footer {
        left: 0 
   }
    .chat-toggled .chat-sidebar {
        left: 0 
   }
    .chat-toggled .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 340px;
        background: #000;
        opacity: .5;
        z-index: 11;
        display: block;
        cursor: move;
        transition: all .3s ease-out 
   }
    .email-header {
        border-top-left-radius: .25rem 
   }
    .email-sidebar {
        left: -280px 
   }
    .email-content {
        margin-left: 0 
   }
    .email-header {
        left: 0 
   }
    .email-toggled .email-sidebar {
        left: 0 
   }
    .email-toggled .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 250px;
        background: #000;
        opacity: .5;
        z-index: 9;
        display: block;
        cursor: move;
        transition: all .3s ease-out 
   }
}
@media screen and (max-width:991px) {
    .section-authentication-signin {
        height: 100%;
        margin-top: 6rem;
        margin-bottom: 2rem 
   }
    .authentication-reset-password {
        height: auto;
        padding: 2rem 1rem 
   }
    .authentication-lock-screen {
        height: auto;
        padding: 2rem 1rem 
   }
    .compose-mail-popup {
        width: auto;
        position: fixed;
        bottom: -30px;
        right: 0;
        left: 0 
   }
}
@media screen and (max-width:767px) {
   .mobile-row {
       display: flex;
       flex-direction: column-reverse; /* Reverse the order of children */
   }
    .attendance_all{
        height: auto !important;
    }
   .top-menu {
       display:none;
   }
    .user-box .user-info {
        display: none 
   }
    .authentication-forgot {
        height: auto;
        padding: 2.5rem 1rem 
   }
}
@media screen and (max-width:620px) {
    .hrm_logo img{
        width:145px;
    }

    .user-box {
        margin-left:auto;
    }
    .topbar .navbar .dropdown-menu::after {
        display: none 
   }
    .topbar .navbar .dropdown {
        position: static!important 
   }
    .topbar .navbar .dropdown-menu {
        right:15px;
   }
}
@media screen and (max-width:520px) {
    .chat-footer-menu, .chat-top-header-menu {
        display: none 
   }
}

.parent-icon i {
   padding: 0px 5px;
   font-size: 16px;
}

.attendace_report i{
   background: #def5fd;
   padding: 8px;
   font-size: 18px;
   width: 45px;
   border-radius: 50px;
   text-align: center;
   margin-bottom:4px;
}

.attendace_report h4{
   font-size: 16px;
   margin-top: 8px;
   margin-bottom: 2px;
}

.working_time p {
   font-size:13px;
}

.working_time h4 {
   font-size: 16px;
   margin-top: 0px;
   margin-bottom: 2px;
}

.working_time {
   margin-top:4px;
   display:flex;
}

.working_time .time_icon i{
   display: flex;
   justify-content: center;
   background: #ffebbf;
   padding: 3px;
   font-size: 20px;
   width: 40px;
   border-radius: 50px;
   text-align: center;
   margin-right: 10px;
   margin-top:3px;
}

.working_sec {
   display:flex;
   margin-top: 10px;
   margin-bottom: 0px;
}

.working_sec .badge {
   margin-top:10px;
   padding:5px;
   display:flex;
   flex-direction:column;
}

.list-group-item {
   padding: 1.8px 0px;
}

.list-group-item span {
    font-size: 13px;
 }

.list-group-item h6 {
   font-size: 13px;
}

.profile-card__img {
   width: 150px;
   height: 150px;
   margin-left: auto;
   margin-right: auto;
   transform: translateY(-50%);
   border-radius: 50%;
   overflow: hidden;
   position: relative;
   z-index: 4;
   box-shadow: 0px 5px 50px 0px #6c44fc, 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
}

.profile-card__img img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

.attendance_table tr th {
   text-align:center;
}
.table_bg_theme tr th{
   background:#ffebbf4d;
}

.attendance_table tfoot tr td {
   background:#f8f9fa;
}

.text-red td {
   color: #dd4b39 !important;
   font-weight: bold;
}

.attendance_recap  p {
   letter-spacing:0;
}

.attendance_recap {
   height: 252px;
}

.attendance_all h5 {
   margin-bottom:5px;
   margin-top: 15px;
   font-size: 16px;
}

.attendance_all p {
   letter-spacing: 0px;
}

.attendance_all a {
   color: #000;
}

.birthday_cap {
   position: absolute;
   margin-top: -22px;
   margin-left: -7px;
   rotate: -20deg;
}

 .scrollbar
 {
     position: relative;
     height: 250px;
/*      background: #F5F5F5;*/
     overflow-y: scroll;
 }

 #scroll_user_list::-webkit-scrollbar-track
{
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   border-radius: 10px;
   background-color: #F5F5F5;
}

#scroll_user_list::-webkit-scrollbar
{
   width: 10px;
   background-color: #F5F5F5;
}

#scroll_user_list::-webkit-scrollbar-thumb
{
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   background-color: #ffebbf;
}

.highlighted {
   background-color: #ffeb3b; /* Yellow background */
}

.highlight td{
   background-color: #ffcccc !important; /* Light red background */
}

.submenu {
   display: none;
   list-style: none;
   padding-left: 20px;
}

.submenu.show {
   display: block;
}

.childmenu {
   display: none;
   list-style: none;
   padding-left: 20px;
}

.childmenu.show {
   display: block;
}

.scrollbox {
   height: 475px;
   overflow-y: scroll;
   background-color: #f6f6f6;
 }
 .scrollbox::-webkit-scrollbar {
   background-color: transparent;
   width: 0px;
 }
 
 .scrollbox:hover::-webkit-scrollbar {
   width: 8px;
 }
 .scrollbox:hover::-webkit-scrollbar-thumb {
   background-color: #ffebbf;
 }
 
 @media (hover: none) {
   .scrollbox::-webkit-scrollbar {
     width: 8px;
   }
   .scrollbox::-webkit-scrollbar-thumb {
     background-color: #ffebbf;
   }
 }


 .login-inner-form .form-group {
   margin-bottom: 6px;
}

 
 .login-inner-form .form-box .learner__code {
   border-radius: 3px 0px 0px 3px;
 }
 
   .login-inner-form .form-box .learner__verfiy {
   text-transform: capitalize;
     border: 1px solid #0000007a;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     font-size: 16px;
     border-left: 0;
     line-height: 27px;
     background: #2a555a;
 }
   .login-inner-form .form-box .learner__verfiy:after {
   content: none;
 }
   .important__news {
   padding: 10px;
   width: 100%;
   font-size: 12px;
   color: #000;
   display: flex;
 }
   .news-title {
   width: auto;
     display: inline-block;
     font-weight: 700;
 }
   .news-description {
   width: 93%;
   display: inline-block;
   font-weight: 700;
   margin-bottom: -7px;
 }
   .disclaimer {
   color: #000;
   border-top: 1px solid #9d9c9c;
   padding-top: 10px;
   margin-top: 15px;
   font-size: 10px;
   text-align: justify;
 }

 .attendance_all{
     height: 380px;
 }
 
 .upcmingholiday{
   background: linear-gradient(to right, #f7971e, #ffd200)!important;
   padding: 4px;
   margin-right: 5px;
   font-size: 15PX;
   width: 30px;
   border-radius: 50px;
   text-align: center;
   color: #000;
 }
 
 .events_card{
     height:93px;
 }
 
   .attendance_table tr td, tr th{
   font-size:13px;
 }
 .sdate_edate{
     display:flex;
     flex-direction: column;
 }
 
 .table_subject {
     width:30%;
     text-wrap:wrap;
     text-align:justify;
 }
 
 .nppendingleave{
   position: absolute;
   width: 100%;
   margin: auto;
   display: flex;
   justify-content: center;
   top: 36.5%;
   color: #fff;
   left: -9px;
   right: 42px;
 }
  .nppendingleave h3{
       color: #fff;
       font-size: 20px;
   }
   
   .pendding_img img {
       border-radius: 0px 0px 10px 10px;
   }
   
   .wish_btn .btn{
       font-size:12px;
   }
   
   #jobskills .greenbtn2.login a {
 color: #ffffff !important;
 text-decoration: none;
 font-weight: bold;
}
.greenbtn2 {
 width: 29%;
 float: left;
 background-color: #607d8b;
 color: #fff;
 border-radius:4px;
 font-size: 11px;
 padding:2px;
 text-align: center;
 margin:5px;
 font-weight: 600;
}


.display-date {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
  }
  
  .display-time {
    display: flex;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    border-radius: 5px;
    justify-content: center;
    transition: ease-in-out 0.1s;
    transition-property: background, box-shadow, color;
  }

  .notification ul {
    position: relative;
  }

    .notification ul {
        padding-left: 0px;
        list-style-type: none;
        margin-bottom: 0;
    }
  
  @media (min-width: 992px) and (max-width: 1440px) {
    .notification ul {
      height: 300px;
      overflow-y: auto;
      padding-left: 5px;
    }
    [dir=rtl] .notification ul {
      padding-left: unset;
      padding-right: 5px;
    }
  }
  .notification li {
    padding-bottom: 22px;
  }
  .notification li::before {
    position: absolute;
    content: "";
    border: 1px dashed #eee;
    opacity: 0.3;
    top: 0;
    left: 3px;
    height: 100%;
  }
  [dir=rtl] .notification li::before {
    left: unset;
    right: 3px;
  }
  .notification.to-do-list ul li {
    position: relative;
  }
  .notification.to-do-list ul li:last-child {
    padding-bottom: 0;
  }
  .notification .card .d-flex .w-100 p .badge {
    color: #fff;
    margin-left: 10px;
    font-weight: 500;
  }
  [dir=rtl] .notification .card .d-flex .w-100 p .badge {
    margin-left: unset;
    margin-right: 10px;
  }
  .notification .card .d-flex .w-100 h6 {
    margin-bottom: 5px;
    position: relative;
  }
  .notification .card .d-flex .w-100 h6 ~ p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-emphasis: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 260px;
  }
  @media (max-width: 767px) {
    .notification .card .d-flex .w-100 h6 ~ p {
      -webkit-line-clamp: unset;
      text-emphasis: unset;
      white-space: unset;
      text-overflow: unset;
      display: block;
      width: unset;
      overflow: visible;
    }
  }
  @keyframes round {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  .notification .card .d-flex .w-100 span {
    color: #000;
  }
  .notification .card .d-flex:nth-child(2) .flex-grow-1 h6 .dot-notification {
    background-color: #F99B0D;
    border: 5px solid #fdd9a2;
  }
  .notification .card .d-flex:last-child {
    margin-bottom: 0 !important;
  }
  .notification .date-content {
    padding: 4px 8px;
    border-radius: 5px;
  }
  
  
@media (min-width: 992px) and (max-width: 1440px) {
    .daily-task.notification ul {
      height: auto;
      padding-left: 0;
      overflow-y: unset;
    }
  }
  .daily-task.notification ul li {
    gap: 14px;
  }
  .daily-task svg {
    fill: #eee;
    width: 18px;
    height: 18px;
  }
  .daily-task h6 {
    margin-bottom: 10px;
  }
  .daily-task .task-content {
    flex: 1;
    border: 1px dashed #000;
    border-radius: 10px;
    padding: 5px 12px;
  }
  .daily-task .task-content a {
    margin-left: auto;
  }
  [dir=rtl] .daily-task .task-content a {
    margin-right: auto;
    margin-left: unset;
  }
  @media (max-width: 1710px) and (min-width: 1200px) {
    .daily-task .task-content a {
      background-color: unset;
      padding: 0;
    }
    .daily-task .task-content a:hover, .daily-task .task-content a:active, .daily-task .task-content a:focus {
      border: 0 !important;
      outline: none !important;
    }
  }
  @media (min-width: 1200px) and (max-width: 1615px) {
    .daily-task .task-content a {
      display: none;
    }
  }
  @media (max-width: 840px) and (min-width: 768px) {
    .daily-task .task-content a {
      background-color: unset;
      padding: 0;
    }
    .daily-task .task-content a:hover, .daily-task .task-content a:active, .daily-task .task-content a:focus {
      border: 0 !important;
      outline: none !important;
    }
  }
  @media (max-width: 420px) {
    .daily-task .task-content a {
      display: none;
    }
  }
  .daily-task .task-content h6 {
    font-size:14px;
    text-align: center;
    margin-bottom:2px;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow: hidden;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  @media (min-width: 1615px) and (max-width: 1920px) {
    .daily-task .task-content h6 {
      max-width: 115px;
    }
  }
  @media (min-width: 1200px) and (max-width: 1615px) {
    .daily-task .task-content h6 {
      max-width: 100%;
    }
  }
  @media (min-width: 992px) and (max-width: 1130px) {
    .daily-task .task-content h6 {
      max-width: 115px;
    }
  }
  @media (min-width: 768px) and (max-width: 785px) {
    .daily-task .task-content h6 {
      max-width: 122px;
    }
  }
  .daily-task .task-content .f-light {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .daily-task .task-content .f-light span {
    margin-bottom: -2px;
  }

  
.activity-dot-primary {
    min-width: 8px;
    height: 8px;
    width: 8px;
    background-color: #009DB5;
    border-radius: 100%;
    outline: 3px solid rgba(0, 157, 181, 0.25);
    position: relative;
    z-index: 0;
  }
  .activity-dot-primary::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 1px;
    background-color: #009DB5;
    top: 50%;
    right: -14px;
  }
  [dir=rtl] .activity-dot-primary::after {
    right: unset;
    left: -14px;
  }
  
  .timeline-dot-primary {
    min-width: 12px;
    height: 12px;
    background-color: #009DB5;
    outline: 5px solid rgba(0, 157, 181, 0.25);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .timeline-dot-primary {
      z-index: 1;
    }
  }
  
  .activity-dot-secondary {
    min-width: 8px;
    height: 8px;
    width: 8px;
    background-color: #F94C8E;
    border-radius: 100%;
    outline: 3px solid rgba(249, 76, 142, 0.25);
    position: relative;
    z-index: 0;
  }
  .activity-dot-secondary::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 1px;
    background-color: #F94C8E;
    top: 50%;
    right: -14px;
  }
  [dir=rtl] .activity-dot-secondary::after {
    right: unset;
    left: -14px;
  }
  
  .timeline-dot-secondary {
    min-width: 12px;
    height: 12px;
    background-color: #F94C8E;
    outline: 5px solid rgba(249, 76, 142, 0.25);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .timeline-dot-secondary {
      z-index: 1;
    }
  }
  
  .activity-dot-success {
    min-width: 8px;
    height: 8px;
    width: 8px;
    background-color: #83BF6E;
    border-radius: 100%;
    outline: 3px solid rgba(131, 191, 110, 0.25);
    position: relative;
    z-index: 0;
  }
  .activity-dot-success::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 1px;
    background-color: #83BF6E;
    top: 50%;
    right: -14px;
  }
  [dir=rtl] .activity-dot-success::after {
    right: unset;
    left: -14px;
  }
  
  .timeline-dot-success {
    min-width: 12px;
    height: 12px;
    background-color: #83BF6E;
    outline: 5px solid rgba(131, 191, 110, 0.25);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .timeline-dot-success {
      z-index: 1;
    }
  }
  
  .activity-dot-danger {
    min-width: 8px;
    height: 8px;
    width: 8px;
    background-color: #F6463A;
    border-radius: 100%;
    outline: 3px solid rgba(246, 70, 58, 0.25);
    position: relative;
    z-index: 0;
  }
  .activity-dot-danger::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 1px;
    background-color: #F6463A;
    top: 50%;
    right: -14px;
  }
  [dir=rtl] .activity-dot-danger::after {
    right: unset;
    left: -14px;
  }
  
  .timeline-dot-danger {
    min-width: 12px;
    height: 12px;
    background-color: #F6463A;
    outline: 5px solid rgba(246, 70, 58, 0.25);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .timeline-dot-danger {
      z-index: 1;
    }
  }
  
  .activity-dot-info {
    min-width: 8px;
    height: 8px;
    width: 8px;
    background-color: #25C5F7;
    border-radius: 100%;
    outline: 3px solid rgba(37, 197, 247, 0.25);
    position: relative;
    z-index: 0;
  }
  .activity-dot-info::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 1px;
    background-color: #25C5F7;
    top: 50%;
    right: -14px;
  }
  [dir=rtl] .activity-dot-info::after {
    right: unset;
    left: -14px;
  }
  
  .timeline-dot-info {
    min-width: 12px;
    height: 12px;
    background-color: #25C5F7;
    outline: 5px solid rgba(37, 197, 247, 0.25);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .timeline-dot-info {
      z-index: 1;
    }
  }
  
  .activity-dot-light {
    min-width: 8px;
    height: 8px;
    width: 8px;
    background-color: #F2F3F7;
    border-radius: 100%;
    outline: 3px solid rgba(242, 243, 247, 0.25);
    position: relative;
    z-index: 0;
  }
  .activity-dot-light::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 1px;
    background-color: #F2F3F7;
    top: 50%;
    right: -14px;
  }
  [dir=rtl] .activity-dot-light::after {
    right: unset;
    left: -14px;
  }
  
  .timeline-dot-light {
    min-width: 12px;
    height: 12px;
    background-color: #F2F3F7;
    outline: 5px solid rgba(242, 243, 247, 0.25);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .timeline-dot-light {
      z-index: 1;
    }
  }
  
  .activity-dot-dark {
    min-width: 8px;
    height: 8px;
    width: 8px;
    background-color: #2c323f;
    border-radius: 100%;
    outline: 3px solid rgba(44, 50, 63, 0.25);
    position: relative;
    z-index: 0;
  }
  .activity-dot-dark::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 1px;
    background-color: #2c323f;
    top: 50%;
    right: -14px;
  }
  [dir=rtl] .activity-dot-dark::after {
    right: unset;
    left: -14px;
  }
  
  .timeline-dot-dark {
    min-width: 12px;
    height: 12px;
    background-color: #2c323f;
    outline: 5px solid rgba(44, 50, 63, 0.25);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .timeline-dot-dark {
      z-index: 1;
    }
  }
  
  .activity-dot-warning {
    min-width: 8px;
    height: 8px;
    width: 8px;
    background-color: #F99B0D;
    border-radius: 100%;
    outline: 3px solid rgba(249, 155, 13, 0.25);
    position: relative;
    z-index: 0;
  }
  .activity-dot-warning::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 1px;
    background-color: #F99B0D;
    top: 50%;
    right: -14px;
  }
  [dir=rtl] .activity-dot-warning::after {
    right: unset;
    left: -14px;
  }
  
  .timeline-dot-warning {
    min-width: 12px;
    height: 12px;
    background-color: #F99B0D;
    outline: 5px solid rgba(249, 155, 13, 0.25);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .timeline-dot-warning {
      z-index: 1;
    }
    .label_sec {
        display:block!important;
    }
  }

  .widgets-icons i img{
      width:60px;
  }

  .center_detail h5 {
    margin: 0px; 
    font-size: 11px;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow: hidden;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .passbook_table tr td {
    padding: 3px;
    font-size: 13px;
  }
  
  #response .alert-error{
	background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 7px;
  }
  
  #response .alert-error span{
	margin-right: 5px;
  }

  #response .alert-error img{
	width:25px;
  }

  .label_sec {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 10px;
  }

  .dataTables_scrollBody table tbody tr td{
    font-size: 13px;
    padding: 3px 10px !important;
  }

  .attendace_report .app_img {
    display: flex;
    padding: 5px;
    margin: 0px 8px 0px 0px;
    border-radius: 5px;
    flex-direction: column;
    justify-content: center;
}



.attendace_report .app_img img{
  width:65px;
}
.attendace_report .support img{
    width:57px;
}
.attendace_report .ilearn img{
    width:57px;
}
.attendace_report .app_detail {
    display: block;
}
.attendace_report .app_detail h2{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}
.attendace_report .app_detail p{
    font-size: 11px;
    font-weight: normal;
    margin-bottom: 0px;
}

.qr_img{
    margin: 0px 10px;
    text-align: center;
}
.qr_img p{
    font-size: 10px;
    margin-bottom: 0;
}

.qr_img img{
    width:50px;
}
.carousel-wrapper {
    position: relative;
    overflow: hidden;
  }

  .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .carousel-item-custom {
    flex: 0 0 100%;
    box-sizing: border-box;
  }

  @media (min-width: 768px) {
    .carousel1 .carousel-item-custom {
      flex: 0 0 33.3333%; /* 3 visible */
    }

    .carousel2 .carousel-item-custom {
      flex: 0 0 20%; /* 5 visible */
    }
  }

  .carousel-control-prev,
  .carousel-control-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: rgb(162 243 255 / 60%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
  }

  .carousel-control-prev:hover,
  .carousel-control-next:hover {
    background-color: rgb(155 228 255);
  }

  .carousel-control-prev {
    left: 0px;
  }

  .carousel-control-next {
    right: 0px;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: invert(1);
    width: 1.25rem;
    height: 1.25rem;
  }

  .carousel-item-custom .card {
    margin: 10px;
  }

@media (max-width: 767px) {
    .Quick_links .card .card-body {
        padding: 5px;
        height: 65px;
        display: flex;
        align-items: center;
    }
    .widgets-icons {
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ededed;
        font-size: 8px;
        border-radius: 10px;
    }
    .Quick_links {
       gap: 11px;
    }

    .qr_img img {
        width: 35px;
    }
    .attendace_report .app_img img {
        width: 40px;
    }
    .attendace_report .app_detail p {
        font-size: 10px;
        line-height: 1.2;
        font-weight: normal;
        margin-bottom: 0px;
    }
    .attendace_report .app_detail h2 {
        font-size: 14px;
    }    
    
  }
  .weather-card {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
  }

  .weather-card h2 {
    margin: 0;
    font-size: 22px;
    color:#fff;
  }

  .weather-card .temp {
    font-size: 36px;
    font-weight: bold;
  }

  .weather-card .countdown {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .today-weather {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .today-weather i {
    font-size: 48px;
  }

  .forecast {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .day {
    text-align: center;
    font-size: 14px;
  }

  .day i {
    font-size: 20px;
    margin: 5px 0;
  }

  .day .temp-small {
    font-weight: bold;
  }

  .quick_b2c .card{
    margin-bottom: 0px;
  }
  
  @media (max-width: 768px) {
    .quick_card {
        margin-top:18px ;   
    }
    .quick_b2c .card {
        margin-bottom: 12px;
    }
    .attendance_recap {
        height: 470px;
    }
  }

    .carousel-control-prev,
    .carousel-control-next {
        z-index: 1;
        pointer-events: auto;
    }

.active_header {
    /* background: #fff; */
    background: linear-gradient(90deg, rgb(245, 252, 254) 0%, rgb(245, 252, 254) 100%);
	box-shadow: 0px 0px 4px #c6c6c6;
}

.card-primary .card-header {
    background: linear-gradient(135deg, #0072ff, #00c6ff);
    color: #fff;
}

table.table-bordered.dataTable {
  border-collapse: collapse;
  border: 1px solid #dee2e6; /* or your preferred border color */
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
  border: 1px solid #dee2e6;
}

.table tr th,.table tr td{
  font-size:12px;
}

.dataTables_filter {
	display: inline-flex;
    float: right;
}

.dataTables_info {
	float: inline-start;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.modal-header .modal-title {
	font-size:18px;
}

div.bhoechie-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
  margin-top: 20px;
  margin-left: 50px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
  opacity: 0.97;
  filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
  margin-bottom: 0;
  padding:13px;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
  background-color: #4d4d4d;
  background-image: #4d4d4d;
  color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -25px;
  border-left: 0;
  border-bottom: 26px solid transparent;
  border-top: 25px solid transparent;
  border-left: 25px solid #4d4d4d ;
}

div.bhoechie-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 10px;
}

div.bhoechie-tab div.bhoechie-tab-content:not(.active){
  display: none;
}

.display-tr {
	display: flex;
}

.bhoechie-tab-content .form-control {
	width: 80%;
}

.modal {
    background: #00000061;
}

.modal-header {
    flex-direction: row-reverse;
    padding: 12px 20px;
    background: #f0f8ff;
}

.profile_box h4 {
    color: #fff;
    font-size: 18px;
    text-shadow: 0px 0px 2px #ffffff;
}

.profile_box .profile_heading {
    position: relative;
    height: 80px;
    margin-top: -85px;
    color: #fff;
    justify-content: center;
}

#carousel2-wrapper .card {
    border-bottom: 4px solid #00bcfe;
}

.profile_box .background-wrapper {
    position: relative;
    height: 75px;
    background-image: url('../images_new/bg.jpg');
    background-size: cover;
    background-position: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden; /* Keeps overlay within rounded corners */
}

.profile_box .background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black layer */
}

.chart-container {
    background: white;
    border-radius: 10px;
  }
  .date-input-group {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    padding: 5px 12px;
    display: flex;
    align-items: center;
  }
  .date-input-group i {
    margin-right: 8px;
    color: #555;
  }
  .date-input-group input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-weight: 500;
  }
  .date-input-group input::placeholder {
    color: #555;
  }

  .meeting-button .form-select {
    font-size:14px;
  }

  #course-list {
    min-height: 10px;
    max-height: 175px;
    overflow: auto;
  }

  #batch-list {
    min-height: 10px;
    max-height: 175px;
    overflow: auto;
  }