/* =============================================================================
   Workstatz by Zinia - theme build of new-style.css
   Host: app.workstatz.com

   Palette is verbatim from "Workstatz by Zinia_Brand 2026.pdf":
     PRIMARY    #05a4a4  #e4bb21          GRADIENT  #05a4a4 > #e4bb21
     SECONDARY  #3a3a3c  #5a595c  #e6e7eb
                #1abc9c  #f39c12  #27ae60  #16a085  #8e44ad
     FONTS      Inter (primary), Arial (system/fallback)

   Generated from new-style.css - keep the base file as the source of structure and
   re-generate this file when new-style.css changes.
   ============================================================================= */
.toolbar {
    text-align: center;
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.suspended_user {
    line-height: 1.6;
    margin-bottom: -24px;
}

.suspended_user i {
    color: #fff9b2;
}

.loaderIcon {
    border: 4px solid #f3f3f3;
    border-radius: 60%;
    border-top: 4px solid #05a4a4;
    border-bottom: 4px solid #05a4a4;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    margin-left: 450px;
    position: absolute;
}

.box {
    padding: 0.5rem !important;
    margin: 7px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 7px 12px #e6e7eb;
    /*border: 1px solid #dddddd5c !important;*/
    border: none !important;
    transition: all 3s ease-out;
    ;
}

.box:first-child {
    margin: 7px 7px 7px 0px;
    background: linear-gradient(45deg, #16a085, #05a4a4);
}

.box:nth-child(2), .btn-sts-online {
    background: linear-gradient(45deg, #27ae60, #2ecc71);
}

.box:nth-child(3), .btn-sts-idle {
    background: linear-gradient(45deg, #27ae60, #2ecc71);
}

.box:nth-child(4), .btn-sts-offline, .btn-sts-currently-offline {
    background: linear-gradient(45deg, #f39c12, #e4bb21);
}

.box:nth-child(5), .btn-sts-absent {
    background: linear-gradient(45deg, #c0392b, #e74c3c);
}
.box:nth-child(6) {
    margin: 7px 0px 7px 7px;
    background: linear-gradient(45deg, #8e44ad, #9b59b6);

}
.btn-sts-suspend {
    background: linear-gradient(45deg, #8e44ad, #9b59b6);
}
.box:last-child {
    margin: 7px 0px 7px 7px;
    background: linear-gradient(45deg, #8e44ad, #9b59b6);
}

.box .text-primary,
.box .text-success,
.box .text-warning,
.box .text-info,
.box .text-danger,
.box .text-secondary {
    color: #fff !important;
}

.no-page-title .card {
    /* box-shadow: 0px 0px 12px #e6e7eb75 !important; */
    box-shadow: 0px 0px 12px #b8c2cc75 !important;
    border: none !important;
}

.no-page-title .card h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 600;
    color: #333a40;
}

.no-page-title .btn-group-sm>.btn,
.btn-sm {
    /*line-height: 2.5;*/
}

.no-page-title .bg-success {
    background-color: #cacacb85 !important;
    color: #3a3a3c;
    font-size: 13px;
}

.box:nth-of-type(1):hover {
    background: linear-gradient(45deg, #05a4a4, #16a085);
}

.box:nth-of-type(2):hover {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
}

.box:nth-of-type(3):hover {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
}

.box:nth-of-type(4):hover {
    background: linear-gradient(45deg, #e4bb21, #f39c12);
}

.box:nth-of-type(5):hover {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
}

.box:nth-of-type(6):hover {
    /*background: linear-gradient(45deg, #16a085, #27ae60);*/
    background: linear-gradient(45deg,  #9b59b6, #8e44ad);
}
.box:last-child:hover {
    background: linear-gradient(45deg, #9b59b6, #8e44ad);
}
.box:nth-of-type(1):hover .text-primary {
    color: #fff !important;

}

.box:nth-of-type(2):hover .text-success {
    color: #fff !important;
}

.box:nth-of-type(3):hover .text-warning {
    color: #fff !important;
}

.box:nth-of-type(4):hover .text-info {
    color: #fff !important;
}

.box:nth-of-type(5):hover .text-danger {
    color: #fff !important;
    ;
}

.box:nth-of-type(6):hover .text-secondary {
    color: #fff !important;
}

.page-header .navbar-nav>li>a {
    font-size: 13px !important;
}

.page-header .navbar-nav>li>a:hover,
.page-header .navbar-nav>li>a:link,
.page-header .navbar-nav>li>a:focus {
    color: #fff !important;
    background: transparent !important;
}

.btn-help {
    color: #fff !important;
    font-size: 14px;
    height: 40px !important;
    line-height: 25px !important;
    margin: 10px auto;
    background: #1abc9c !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-app-name {
    color: #2D2D2D;
}

.table-responsive-sm::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.table-responsive-sm::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.table-responsive-sm::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.table tbody tr td h3 {
    padding: 20px;
    font-size: 16px;
}

#chartWebsite h3 {
    padding: 20px;
    font-size: 16px;
}

#chartApplication h3 {
    padding: 20px;
    font-size: 16px;
}

#unReadPushNotificationCount {
    background-color: #16a085 !important;
    width: 22px;
    height: 22px;
    align-items: center;
    display: flex;
    text-align: center;
    margin: auto;
    border-radius: 50px;
    justify-content: center;
    font-size: 10px;
}

#toastNotifications i {
    font-size: 20px;
    color: #fff !important;
}

.head_cls {
    border-bottom: 1px solid #ddd;
    padding: 14px;
    height: 40px;
    line-height: 40px;
    background: #dce5eb;
}

.lft_with_bg {
    text-align: left;
    background: #fff;
    border-right: 1px solid #ddd !important;
}

.lft_with_bg_title {
    text-align: left;
    background: #fff;
    border-right: 1px solid #ddd !important;
}

.tbl_clr1 {
    margin-bottom: 0px;
}

.tbl_clr1 .text-dark {
    color: #343a40 !important;
    border-bottom: 1px solid #ddd;
}

.tbl_clr1 .text-primary {
    color: #05a4a4 !important;
    border-bottom: 1px solid #ddd;
}

.tbl_clr1 .table-responsive-sm .text-warning {
    color: #f39c12 !important;
    border-bottom: 1px solid #ddd;
}

.tbl_clr1 .text-success {
    color: #28a745 !important;
    border-bottom: 1px solid #ddd;
}

.tbl_clr1 .text-danger {
    color: #F44336 !important;
    border-bottom: 1px solid #ddd;
}

.tbl_clr1 .text-secondary {
    color: #607D8B !important;
}

.table-responsive-sm .text-warning {
    color: #f39c12 !important;
    border-bottom: 1px solid #ddd;
}

.dashboard_main1 .btn-group {
    margin-top: 20px;
}

.btn_gray {
    border: 1px solid #ddd;
    color: #000;
    font-size: 13px !important;
    font-weight: 500;
}

.btn_gray.active {
    background: #05a4a4;
    color: #fff !important;
    box-shadow: 0px 4px 5px #cfd3d8 !important;
    border: 1px solid #05a4a4;
    border-radius: 3px;
}

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

.side_logo {
    width: 40px;
}

.collapsed-sidebar .secondary-sidebar .secondary-sidebar-bar .logo-box .right_logo {
    display: none;
}

.text_side {
    text-align: left;
}

.inner_table {
    background: #f1f1f159;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: calc(225px - 1rem);
    overflow-y: scroll;
    overflow-x: hidden;
}

.btn_view {
    color: #fff;
    /* background: linear-gradient(45deg, #05a4a4, #16a085); */
    background-color: #05a4a4;
    /* border-color: #05a4a4; */
    box-shadow: 0px 4px 5px #cfd3d8;
}

.btn_view:hover {
    color: #fff;
    background: #16a085;
    /*border:1px solid #cfd3d8;*/
}

.info_cirlcle {
    color: #fff !important;
    font-size: 17px;
}

.btn_group1 {
    gap: 15px;
}

.btn.disabled,
.btn:disabled {
    cursor: no-drop;
    opacity: 65%;
}

.btn_group1 button {
    border-radius: 6px;
}

.hidden-sidebar .navbar-header .navbar-toggler:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color;
}

.btn-help:focus {
    box-shadow: none !important;
}


/*  employee details  */
.bulk_data .btn-primary {
    color: #fff;
    background-color: #05a4a4;
    border-color: #05a4a4;
    border-radius: 35px !important;
    font-size: 14px;
    padding: 4px 20px;
}

.bulk_data .btn-primary:hover {
    background: #fff !important;
    color: #05a4a4 !important;
}

.bulk_data .btn-group {
    gap: 20px;
    display: flex;
    width: 60%;
    margin: auto;
}

.btn_bdr_gray {
    border: 1px solid #ddd;
}

.active_filter_data {
    margin-bottom: 40px;
    margin-top: 24px;
}

.active_filter_data {
    gap: 20px;
}

.btn_float {
    float: right;
}

#ShowEntriesList {
    border: 1px solid #ddd;
    color: #706f6f;
    padding: 8px;
    border-radius: 5px;
    background: #fff;
}

.idle_card label {
    margin-top: 10px;
}

.idle_card label:first-child {
    margin-top: 0px;
}

/*  end */

/*   employee attandance */
#download_btn_csv {
    color: #fff;
    background-color: #05a4a4 !important;
    border-color: #05a4a4 !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
}

#download_btn {
    padding: 10px 20px !important;
    border-radius: 4px !important;
}

.attan_history .small {
    font-size: 13px;
}

#pdfReportsDownload {
    color: #fff;
    background-color: #05a4a4;
    border-color: #05a4a4;
    box-shadow: 0px 4px 5px #cfd3d8;
}

#csvReportsDownload {
    color: #fff;
    background-color: #05a4a4;
    border-color: #05a4a4;
    box-shadow: 0px 4px 5px #cfd3d8;
    line-height: 40px;
    border-radius: 4px;
}

#csvReportsDownload button {
    color: #fff;
    background-color: #05a4a4;
    border-color: #05a4a4;
}

#tableRemove::-webkit-scrollbar {
    height: 6px;
    border-radius: 10px;
}

.input-group-append {
    display: block;
}

/*  end */

/* emp notification*/
.table-primary {
    background-color: #cacacb85 !important;
    color: #3a3a3c;
    font-size: 13px;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #1110 !important;
}

/* table.dataTable {
    border-collapse: collapse;
    border-spacing: 0;
  } */
.emp_noti #emp_short {
    margin-bottom: 30px;
}

.gap_20 {
    gap: 20px;
}

.gap_10 {
    gap: 10px;
}

.gap_6 {
    gap: 6px;
}

#reportrange {
    overflow: hidden;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #ddd !important;
    border-radius: 3px;
    padding: 8px !important;
    background-color: transparent;
    padding: 4px;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #ddd !important;
    border-radius: 3px;
    padding: 9px !important;
    background-color: transparent;
    margin-left: 3px;
}

#logs_table_wrapper #logs_table_length {
    margin-top: 0px;
}

/*  end */

#reportrangess {
    overflow: hidden;
}

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

.table_web_scrl {
    overflow-x: hidden;
}


/* setting starts */
.no-page-title .table-primary {
    background-color: #cacacb85 !important;
    color: #3a3a3c;
    font-size: 13px;
}

.see-all-less {
    padding: 0px 10px !important;
    font-size: 12px !important;
    height: 25px;
}

#stroageTypeData .dropdown a {
    padding: 5px 40px;
}

.btn-primary {
    color: #fff !important;
    /*background-color: #05a4a4 !important;*/
    /*border-color: #05a4a4 !important;*/
}

.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #05a4a4 !important;
    border-color: #05a4a4 !important;
}

.table-primary>th {
    background-color: #05a4a40d !important;
}

.alert-primary {
    color: #0b5d4e;
    background-color: #f0f0f0 !important;
    border-color: #c2eae9;
}

.tabdata td {
    font-size: 12px;
}

#roletablebody a {
    border: 1px solid #05a4a43d;
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
    margin: 3px;
}

#ModuleSelection {
    border: 1px solid #ddd;
    color: #706f6f;
    padding: 8px;
    border-radius: 4px;
}

.mt_35_minus {
    margin-top: -35px;
    margin-bottom: 20px;
}

.badge {
    display: inline-block;
    padding: .75em .7em !important;
    margin-bottom: 10px;
}

#dropdownMenuLink {
    padding: 5px 30px;
}

#groupsTableIds a {
    /* border: 1px solid #05a4a43d; */
    padding: 2px 8px;
    border-radius: 3px;
}

#groupsTableIds .tdshort a {
    border: 0px;
}

/*   setting page css end */

/*   alert  css */
.fs-14 {
    font-size: 14px;
}

.fw-700 {
    font-weight: 700;
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    /*background-color: rgba(0, 0, 0, .03);*/
    background-color: rgb(234 245 255);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    color: #373535;
    font-weight: 500;
    font-size: 14px;
}

.bulk_data {
    text-align: center;
    width: 100%;
}

.badge-primary {
    color: #fff;
    margin: 0.2rem;
    background-color: #05a4a4 !important;
}

.rPolicyId {
    /*display: flex;*/
    justify-content: space-between;
}

/*  alert css end */
#logs_body td a {
    display: flex;
    justify-content: center;
}

.shadow_box {
    box-shadow: 0px 0em 0.5rem rgb(234 245 255) !important;
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    height: 100px;
    margin-bottom: 10px;
}

.product_title {
    font-size: 13px;
    font-weight: 700;
    padding: 16px 0px;
    margin-bottom: 0px;
}

.product_val {
    color: #737373;
    font-weight: 400;
    font-size: 16px;
}

.active_filter_data .btn {
    border-radius: 3px;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

.projName {
    color: #3a3a3c !important;
}

#ProjectsTable {
    margin-bottom: 10px;
    /* display: contents; */
}

/* .pro1{
  padding: 5px 0px !important;
} */

/*   modal  */

.modal-footer .btn-success {
    color: #fff;
    background-color: #16a085;
    border-color: #16a085;
}

.modal-header {
    background: linear-gradient(45deg, #05a4a4, #16a085);
    color: #fff;
    padding: 15px !important;
}

.modal-header .close {
    color: #fff;
    opacity: 1;
}

.modal-header h4,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h5,
.modal-header h6 {
    font-size: 16px;
}

.modal-body {
    padding: 2rem !important;
}

.modal-body input {
    border: 1px solid #ddd;
    /* height: 35px; */
    padding: 20px 10px;
}

.modal-body input:focus-visible {
    outline: 1px solid #16a085
}

.modal-body select {
    border: 1px solid #ddd;
    color: #706f6f;
    /* padding: 10px 10px; */
    border-radius: 5px;
    line-height: 6px;
    /*height: 45px;*/
    background: #fff;
}

.modal-body .dataTables_length {
    margin-top: 0px;
}

.modal {
    overflow-x: hidden;
    overflow-y: auto;
}

/* .table > colgroup + thead > tr:first-child > td{
border-top: 0;
color: #3a3a3c;
font-size: 13px;
background: #e6e6e6;
} */
table thead tr {
    border-top: 0;
    color: #3a3a3c;
    font-size: 13px;
    background: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-bottom: 5px;
}

/* .hidden{
  display: none;
} */
/* .hidden {
              display: none;
          } */

/*  modal end */
.right_logo {
    width: 80%;
    height: fit-content;
    margin: 5px 0 0 0;
}

.activity_logs .btn-success {
    color: #fff;
    background-color: #05a4a4 !important;
    border-color: #05a4a4 !important;
}

.fs-18 {
    font-size: 18px;
}

.res_activity_content p {
    font-size: 14px;
}

.d_none1 {
    display: none;
}



/*    responsive activity card */
.res_activity a {
    border-radius: 0px !important;
    justify-content: space-between;
}

.res_activity li {
    width: 31%;
    text-align: center;
}

.res_activity_content {
    border: 1px solid #eee8e8;
    box-shadow: 0px 0px 10px #e0f5f5;
    border-radius: 2px;
    padding: 30px 25px;
}

.activity_tab {
    font-size: 14px;
    font-weight: 600;
}

.fs-17 {
    font-size: 17px;
}

.bdr_b {
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.bdr_b:nth-of-type(1) {
    border-top: 1px solid #fff;
}

.btn_gray:hover {
    color: #05a4a4;
}

/* #pills-today-tab:hover {
    color: #5a595c !important;
  }
  #pills-yes-tab:hover {
    color: #5a595c !important;
  }
  #pills-this_week-tab:hover {
    color: #5a595c !important;
  } */
.res_activity .nav-link.active,
.res_activity .show>.nav-link {
    background-color: #05a4a4;
    border-radius: 3px !important;
    color: #fff !important;
}

.res_activity li a:hover {
    color: #5a595c !important;
}

.res_activity>li>a {
    padding: 6px 0px !important;
}

/*  responsive activity card end */
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgb(38 143 255 / 9%) !important;
}

.emp_noti select {
    margin-bottom: 20px;
}

/* responsive */

/* media query for mobile responsive */
@media (max-width:767px) {
    .d_block1 {
        display: none;
    }

    .d_none1 {
        display: block !important;
    }

    .attan_history .input-group {
        margin-top: 10px;
    }

    .secondary-sidebar-menu ul li a {
        padding: 13px 15px !important;
    }

    .accordion-menu .sub-menu li a {
        padding: 10px 10px 7px 52px !important;
    }

    .res_mt_10 {
        margin-top: 10px;
    }

    .display_cont .form-control {
        margin-bottom: 20px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        box-sizing: border-box;
        display: inline-block;
        min-width: 1.2em !important;
        padding: 0.3em 0.6em !important;
        margin-left: 0px !important;
        text-align: center;
        text-decoration: none !important;
    }

    #ExportButton {
        width: 100%;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .bulk_data .btn-group {
        gap: 20px;
        display: block;
        width: 100%;
        margin: auto;
    }

    .select2-container--default .select2-selection--single {
        margin-bottom: 20px;
    }

    .group_create {
        width: 100%;
        margin-bottom: 20px;
    }

    #dropdownMenuLink {
        padding: 0px 10px;
    }

    .page-title {
        font-size: 15px;
        margin-bottom: 20px;
    }


    .gigantic.pagination input,
    .gigantic.paginationInside input {
        width: 140px !important;
    }

    .btn_group1 {
        gap: 3px;
    }

    .page-header .navbar-nav>li>a {
        padding: 10px !important;
    }

    .btn_gray {
        font-size: 13px !important;
    }

    #sbs-example-navbar-collapse-1 {
        display: none;
    }

    .hidden-sidebar .logo-sm {
        height: 50px !important;
    }

    .h-75 {
        height: 60% !important;
    }

    .hidden-sidebar .logo-sm #sidebar-toggle-button {
        height: 50px !important;
        line-height: 50px !important;
        background: #e0f5f5;
    }

    .hidden-sidebar .logo-sm .logo-box {
        height: 50px !important;
        line-height: 50px !important;
        justify-content: center;
        margin: auto;
    }

    .page-inner {
        padding: 20px !important;
    }

    .box:first-child {
        margin: 7px;
    }

    .box:last-child {
        margin: 7px;
    }

    .pd_data {
        padding: 0px;
    }

    .text_side {
        text-align: center;
    }

    .d_none {
        display: none;
    }

    .hidden-sidebar .navbar-header .navbar-toggler {
        height: 50px !important;
        line-height: 50px !important;
        background: #e0f5f5;
    }

    .emp_attan {
        overflow-x: scroll;
    }

    .emp_attan::-webkit-scrollbar {
        height: 6px;
        overflow-x: scroll;
    }

    .emp_attan_main .form-control {
        margin-bottom: 20px;
    }

    .gigantic.pagination a,
    .gigantic.paginationInside a {
        height: 26px !important;
        width: 17px !important;
    }

    #EmployeedateOfjoin {
        margin-bottom: 0px !important;
    }

    .form-control {
        /* margin-bottom: 20px; */
    }

    .table-wrap.table-responsive::-webkit-scrollbar {
        height: 6px;
    }

    .table:not(.table-borderless)>thead>tr>th {
        font-size: 12px;
    }

    .stickyCol-table .stickyCol-sticky-col {
        width: 110px;
    }

    .stickyCol-scroller {
        margin-left: 110px;
    }

    #reportrange {
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .table_web_scrl::-webkit-scrollbar {
        height: 6px;
    }

    .table_web_scrl {
        overflow-x: auto !important;
    }

    /*.hidden-sidebar .page-header .container-fluid{*/
    /*    height: 50px !important;*/
    /*}*/
    /*.hidden-sidebar .page-header .navbar{*/
    /*    height: 50px !important;*/
    /*}*/
}

/*style="font-size: 13px;white-space: nowrap;"*/

@media screen and (min-width:320px) and (max-width:460px) {
    .bulk_data .btn-group {
        gap: 20px;
        display: block;
    }

    .prod_repo_flex {
        display: block !important;
    }

    .width_full_btn1 {
        width: 100%;
        margin-bottom: 10px;
    }

    .width_full_btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .active_filter_data {
        display: block;
    }

    .active_filter_data button {
        width: 100%;
        margin-bottom: 10px;
    }

    .d-hotline,
    .license {
        display: none !important;
    }
}

@media screen and (min-width:320px) and (max-width:515px) {

    .width_full_btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .d-hotline,
    .license {
        display: none !important;
    }
}

@media screen and (min-width:460px) and (max-width:767px) {
    .prod_repo_flex {
        display: flex !important;
    }

    .d-hotline,
    .license {
        display: none !important;
    }
}

@media screen and (min-width:515px) and (max-width:767px) {}

@media screen and (min-width:768px) and (max-width:1024px) {
    .shadow_box {
        height: 120px;
    }

    .display_cont {
        display: contents;
    }

    .shadow_box {
        height: 125px;
    }

    .bulk_data .btn-group {
        gap: 20px;
        display: block;
        width: 100%;
        margin: auto;
    }

}

ul#sidebar_menus::-webkit-scrollbar {
    display: none;
}

ul#sidebar_menus::-webkit-scrollbar-thumb {
    display: none;
}

ul#sidebar_menus::-webkit-scrollbar-track {
    display: none;
}

ul#sidebar_menus:hover::-webkit-scrollbar {
    display: block;
    width: 5px;
}

ul#sidebar_menus:hover::-webkit-scrollbar-thumb {
    display: block;
    background: #888;
}

ul#sidebar_menus:hover::-webkit-scrollbar-track {
    display: block;
    background: #f1f1f1;
}

.btn-success {
    color: #fff;
    background-color: #05a4a4 !important;
    border-color: #05a4a4 !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.btn-success:hover {
    color: #fff;
    background-color: #16a085 !important;
    border-color: #16a085 !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.table-responsive::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #888;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.btn-danger {
    color: #fff;
    background-color: #5a595c !important;
    border-color: #5a595c !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.btn-light.toggle-off {
    background-color: #5a595c !important;
}

/*.btn-light {*/
/*    color: #212529;*/
/*    background-color: #5a595c;*/
/*}*/
.btn-primary {
    color: #fff;
    background-color: #05a4a4 !important;
    border-color: #05a4a4 !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.btn-primary:hover {
    color: #fff;
    background-color: #16a085 !important;
    border-color: #05a4a4 !important;
}

.pagination a.disabled,
.pagination a.disabled:hover,
.pagination a.disabled:focus,
.pagination a.disabled:active,
.paginationInside a.disabled,
.paginationInside a.disabled:hover,
.paginationInside a.disabled:focus,
.paginationInside a.disabled:active {
    background-color: #05a4a4;
    background-image: linear-gradient(#05a4a4, #16a085) !important;
    color: #ffffff !important;
    cursor: default;
}

.pagination a,
.paginationInside a {
    background-image: linear-gradient(#05a4a4, #16a085) !important;
    color: #ffffff !important;
}

.btn-p-btn.active {
    background: #05a4a4;
    color: #fff;
    border-radius: 5px !important;
}

.btn-p-btn {
    background: none;
    color: #05a4a4;
    padding: 10px;
    border-radius: 5px !important;
}

.btn-p-btn.focus,
.btn-p-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 0%);
}

.btn-top-btn.active {
    background: #16a085;
    border: #05a4a433;
    color: #fff;
}

.btn-top-btn {
    background: #05a4a4;
    color: #fff;
    border: #05a4a433;
    padding: 10px;
}

.idleProductive .badge-warning {
    color: #ffffff;
    background-color: #3a3a3c;
}

.idleProductive .badge-dark {
    color: #fff;
    background-color: #16a085;
}

.table-wrap.stickyCol-scroller {
    margin-bottom: 30px;
}

.stickyCol-scroller::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.btn-secondary {
    color: #fff;
    background-color: #05a4a4;
    border-color: #05a4a4;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #16a085 !important;
    border-color: #05a4a4 !important;
}

.modal .close:focus {
    outline: none;
    outline: none;
}

.form-control {
    padding: 0.5rem 0.75rem !important;
    height: 40px;
    line-height: 2rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5rem 0.75rem !important;
    height: 40px !important;
    ;
}

.input-group-append .btn {
    padding: 0.5rem 0.75rem !important;
    height: 40px;
}

button {
    padding: 0.5rem 0.75rem !important;
    min-height: 40px;
    height: auto;
}

.badge-info {
    color: #fff;
    background-color: #05a4a4;
}

.btn-info {
    /* color: #fff;
    background-color: #05a4a4 !important;
    border-color: #5a595c !important;
    box-shadow: 0px 4px 5px #cfd3d8;
    padding: 10px; */


    color: #ffffff;
    background: none;
    background-color: #05a4a4 !important;
    border-color: #5a595c !important;
    box-shadow: 0px 4px 5px #cfd3d8;
    padding: 10px;
}


.btn-info:hover {
    /* color: #ffffff; */
    background-color: white;
}

.emp_attan {
    margin-bottom: 30px;
}

.text-primary {
    color: #05a4a4 !important;
}

.gigantic.pagination a,
.gigantic.paginationInside a {
    height: 30px !important;
    width: 25px !important;
    font-size: 18px;
    line-height: 30px !important;
}

.dataTables_scrollBody::-webkit-scrollbar {
    /*width: 5px;*/
    height: 5px;
}

table.dataTable thead .sorting {
    background: #e3e3e4;



}

.table-responsive {
    margin-bottom: 10px;
}

#policyPage {
    padding: 0.7rem 0.75rem !important;
}

.width_full_btn1 .width_full_btn {
    padding: 0.7rem 0.75rem !important;
    /*height: 40px;*/
}

.table-monitoring .userNameButton {
    padding: 10px 20px !important;
    height: 0px;
    line-height: 0px;
    color: #ffffff;
    background-color: #05a4a4;
    border-color: #05a4a4;
}

.table-monitoring .userNameButton:hover {
    background-color: #16a085;
    border-color: #16a085;
    box-shadow: 0px 4px 5px #cfd3d8;
}

#UpdateTimeZoneID {
    margin-bottom: 20px;
}

#FilteredDiv {
    margin-bottom: 30px;
}

.fa-info-circle {
    color: #05a4a4;
}

.btn_gray_white {
    background: #fff;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
}

.btn_gray:focus {
    outline: none;
}

.btn-warning {
    color: #ffffff;
    background-color: #05a4a4;
    border-color: #05a4a4;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.btn-warning:hover {
    background-color: #16a085;
    border-color: #16a085;
    color: white;
}

.btn-danger:hover {
    background-color: #16a085 !important;
    border-color: #16a085 !important;
}

.btn-info:active,
.btn-info.active {
    background-color: #05a4a4 !important;
    border-color: #5a595c !important;
    /* box-shadow: 0px 4px 5px #cfd3d8; */
    border-radius: 5px !important;
}

.btn-info.focus,
.btn-info:focus {
    box-shadow: 0px 4px 5px #cfd3d8 !important;
}

#autoacceptTimeclaim+div .toggle-off  ,
#setting2fa+div .toggle-off{
    padding-top: 0;
    margin-top: 0rem !important;
    line-height: 18px !important;
    color: #fff;
    /* background: transparent; */
}

table.dataTable.nowrap th,
table.dataTable.nowrap td {
    white-space: nowrap;
    vertical-align: middle;
}

.btn-top-btn:hover {
    background: #16a085;
    color: #fff;
    border: #05a4a433;
}

.active_filter_data button {
    border-radius: 3px;
}

.btn-outline-danger {
    color: #05a4a4;
    border-color: #05a4a4;
}

.btn-outline-success {
    color: #05a4a4;
    border-color: #05a4a4;
}

.btn-outline-success:hover ,.btn-outline-success:active, .app-btn-active{
    color: #fff;
    background-color: #05a4a4;
    border-color: #05a4a4;
}

.btn-outline-danger:hover,.btn-outline-danger:active, .web-btn-active {
    color: #fff;
    background-color: #05a4a4;
    border-color: #05a4a4;
}

#ModuleSelection:focus-visible {
    outline: none;
}

#appendShiftData td a {
    border: 1px solid #5a595c;
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-block;
    margin: 3px;
    background: #5a595c;
    color: #fff !important;
}

#appendShiftData td a .text-danger,
#appendShiftData td a .text-success {
    color: #fff !important;
}

.toggle.btn-xs {
    width: 63.8438px !important;
    height: 25px !important;
    border-radius: 1rem;
}

/* .toggle.btn-xs.off{
    width: 92px !important;
} */
label.btn-xs.toggle-off {
    padding-left: calc(44px - 18px);
}

.toggle-off,
.toggle-on {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toggle-handle {
    position: relative;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    height: 23px !important;
    width: 44px !important;
    border-radius: 50px !important;
    border-width: 0 1px;
    background-color: #fff;
}

.csv_pdf button {
    padding: 10px 20px !important;
    margin-right: 3px;
}

@media only screen and (min-width:768px) and (max-width: 1024px) {
    .export_btn {
        padding-left: 0px;
        padding-right: 10px;
    }
}

span.dt_txt_name {
    color: #fff;
    font-size: 14px;
}

.box h3 {
    color: #fff;
    margin-bottom: 0px;
}

#ShowEntriesList :focus-visible {
    outline: none;
}

#chartTime h5 {
    color: #05a4a4 !important;
    text-align: center;
    font-weight: 500;
    font-size: 22px !important;
}

#activityChart p {
    color: #05a4a4 !important;
    text-align: center;
    font-weight: 500;
    font-size: 22px !important;
}

#webHistoryChart p,
#appendSSData p,
#chartApp p,
#browserHistoryTable p {
    color: #05a4a4 !important;
    text-align: center;
    font-weight: 500;
    font-size: 19px !important;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel] {
    padding-left: 84px !important;
}

#append_users button {
    background: #05a4a4 !important;
    border: 1px solid #05a4a4 !important;
    box-shadow: 0px 2px 7px #cfd3d8 !important;
}

#append_users button i {
    color: #ffffff !important;
    font-size: 17px;
}

.form-check.form-control {
    padding: 8px 20px !important;
}

#ShowEntriesList:focus-visible {
    outline: none !important;
}

#SaveButton {
    padding: 0px 20px !important;
}

.btn-sm.group_create {
    line-height: 2.5 !important;
    float: right;
}

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

.mt_30 {
    margin-top: 30px;
}

.w_70 {
    width: 70%;
}



/* ============SHAHNA'S NEW CSS START================ */
body {
    position: relative;
}

#requestTimeField {
    padding-right: 24px !important;
}

#domainTime .html-duration-picker-input-controls-wrapper .controls {
    display: inline-block;
    position: absolute;
    top: 0px;
    padding: 0px 0;
    height: 100% !IMPORTANT;
    background: #f0f0f0;
}

#domainTime .html-duration-picker-input-controls-wrapper .scroll-btn {
    text-align: center;
    width: 12px;
    padding: 0 4px !important;
    border: none;
    cursor: default;
    position: relative;
    height: auto;
    top: -8px !important;
}

#domainTime .html-duration-picker-input-controls-wrapper .scroll-btn:first-of-type {
    top: 3px !important;
    height: auto;
}

/* #domainTime .html-duration-picker-input-controls-wrapper .scroll-btn:last-of-type {
    top: -1px !important;
} */
#domainTime .html-duration-picker-input-controls-wrapper .caret {
    position: relative;
    right: 2px;
    z-index: 9;
    top: 1px;
    cursor: pointer;
}

#ActivityID.btn-info,
#CategoryID.btn-info {
    background-color: #05a4a4;
    border: #05a4a433;
}

table .text-light {
    color: #949494 !important;
}

.actionBtn-col-sm {
    display: flex;
    justify-content: center;
    align-items: center;
}

.actionBtn-col-sm .toggle-wrapper {
    margin-top: 0rem;
    max-width: 128px;
    width: 100%;
}

.actionBtn-col-sm .toggle-wrapper .form-group {
    margin-bottom: 0;
}

input#idleTimeForTimeSheet {
    padding-right: 26px !important;
}

#trackingTime .controlsDivStyle {
    top: 0px !important;
    padding: 0px 0 !important;
    height: 100% !important;
    width: 23px !important;
    margin-top: 0 !important;
    background: #f0f0f0;
    left: 93% !important;
}

#trackingTime .controlsDivStyle .scroll-up {
    top: 10px !important;
    left: 1px;
    z-index: 1;
    min-height: auto;
}

#trackingTime .caretStyle {
    position: relative;
    top: -4px;
    right: 3px;
}

#trackingTime .controlsDivStyle .scroll-down {
    top: 19.5px !important;
    left: 1px;
    z-index: 9;
    min-height: auto;
}

.toggle-off {
    color: white !important;
}

#autoacceptTimeclaim+div .toggle-off ,
#setting2fa+div .toggle-off{
    line-height: 2 !important;
    text-align: right;
    padding-right: 11px;
}

#autoacceptTimeclaim+div .toggle-on,
#setting2fa+div .toggle-on,
#AgentUpdate .toggle-on,
#roleSet .toggle-on {
    line-height: 1.3;
    text-align: left;
    padding-left: 9px;
}

#roleSet .toggle-off,
#AgentUpdate .toggle-off {
    line-height: 1.3 !important;
    text-align: right;
    padding-right: 15px;
}

#Websites_adv .select2-selection.select2-selection--multiple {
    padding: 2px 12px !important;
    max-height: 100px;
    overflow: auto;
    height: auto;
}

#Websites_adv button#AdvanceSaveButton {
    padding: 0.25rem 0.5rem !important;
    min-height: auto !important;
}

#upgradeManagerModal .select2-selection.select2-selection--multiple .select2-selection__rendered {
    position: relative;
    padding-right: 10px;
}

#upgradeManagerModal .select2-container--default .select2-selection--multiple .select2-selection__clear {
    font-size: 18px;
    line-height: 1;
    position: absolute;
    right: 0px;
    top: 0;
}

#upgradeManagerModal .select2-selection.select2-selection--multiple {
    max-height: 187px;
    overflow: auto;
    height: auto;
}

[aria-labelledby="navbarDropdown"].dropdown-menu li {
    padding: 5px 7px;
}

[aria-labelledby="navbarDropdown"].dropdown-menu li:last-child {
    border-top: 1px solid #f1f1f1;
}

.secondary-sidebar-bar {
    height: 61px;
    border-bottom: 1px solid #e5e9ec;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset -6px -1px 8px -5px #e6e7eb;
}

.secondary-sidebar-bar>img {
    max-width: 153px;
    transition: all .3s;
}

.collapsed-sidebar img.img-fluid.right_logo {
    display: none;
    transform: scale(0);
}

.page-header span.hrms-text {
    color: white !important;
    font-weight: 500;
    text-transform: uppercase;
}

a.btn-app-name {
    position: relative;
}

span.hrms-text {
    color: white !important;
    font-weight: 500;
    text-transform: uppercase;
}

span.hrms-beta-text {
    position: absolute;
    top: calc(50% - 13px);
    transform: translateY(-50%);
    right: 2px;
    height: auto;
    line-height: initial;
    background: linear-gradient(45deg, #f39c12, #e4bb21) !important;
    color: white !important;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

@keyframes animationgradienttitle {
    0% {
        background-position: 0 1600px;
    }

    100% {
        background-position: 1600px 0;
    }
}

.c-article__title {
    color: #fc3735;
    background: linear-gradient(left, #a72727, #811414, #c24646);
    background: -webkit-linear-gradient(left, #a72727, #811414, #c24646);
    background-size: 1600px 200px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-name: animationgradienttitle;
    animation-name: animationgradienttitle;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.c-article__title .overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#reportrange+i {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    cursor: pointer;
}

[role="textbox"].select2-selection__rendered,
#select2-deptoption-container,
#select2-empoption-container {
    line-height: 1.7 !important;
}

[role="textbox"].select2-selection__rendered+.select2-selection__arrow,
#select2-deptoption-container+.select2-selection__arrow,
#select2-empoption-container+.select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
}

/* FOR ADMIN LOGIN PAGE START */
.admin-login-wrapper.page-container {
    background: transparent;
    position: relative;
    z-index: 2;
    margin: auto;
    width: 100%;
    max-width: 444px;
    /* overflow: hidden auto; */
}

.admin-login-wrapper.page-container .jumbotron {
    max-width: 420px;
    width: 100%;
    background: white;
    border-radius: 6px;
    box-shadow: 0px 6px 22px -10px black;
    text-align: center;
    margin: 11px;
}

.admin-login-wrapper.page-container .logo-wrapper {
    margin: 31px auto 22px;
}

.admin-login-wrapper.page-container .logo-wrapper img {
    max-width: 228px;
    width: 100%;
}

.admin-login-wrapper.page-container .login-text {
    font-size: 18px;
    margin-bottom: 22px;
    color: #3a3a3c;
    text-transform: capitalize;
}

.admin-login-wrapper.page-container .form-control {
    border: none;
    border-bottom: 1.3px solid gainsboro;
    border-radius: 0;
    padding: 0.5rem .3rem !important;
}

#loginButtonDiv {
    background: linear-gradient(45deg, #05a4a4, #16a085);
    border: 1px solid #c8c8c8;
    color: white;
    font-size: 13px;
    margin-bottom: 12px;
    font-weight: 500;
    text-transform: uppercase;
    box-shadow: 0px 7px 9px -7px #a4a4a4, inset 0px 1px 6px -4px white;
    transition: all .3s;
}

.admin-login-wrapper.page-container .forget-pswd-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px auto 22px;
}

input#isNewClientLogin,
[for="isNewClientLogin"] {
    cursor: pointer;
}

#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(45deg, #05a4a4, #16a085);
    overflow: hidden;
    min-height: 100vh;
}

/* FOR ADMIN LOGIN PAGE ENDS */
.active_filter_data {
    margin-bottom: 24px;
    margin-top: 0px;
}

#empDetails_Table thead th {
    min-width: 111px;
}

#timeSheetDataTable th {
    text-transform: capitalize;
}

.secondary-sidebar-menu ul li .sub-menu {
    position: unset !important;
}

.collapsed-sidebar .secondary-sidebar-menu ul li .sub-menu {
    position: absolute !important;
}

.collapsed-sidebar .secondary-sidebar-menu ul li {
    position: static !important;
}

.secondary-sidebar {
    z-index: 999;
}

#sidebar_menus span.hrms-beta-text {
    right: unset;
    left: 100%;
}

button#inActiveStatus+button {
    color: #dc3545;
    border-color: #dc3545;
}

button#inActiveStatus+button:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-high.focus,
.btn-high:focus {
    box-shadow: 0 0 0 0.2rem rgb(255 98 0 / 97%);
}

/* ============SHAHNA'S NEW CSS ENDS================ */


/* SHAHNA'S CSS START */
*/ body {
    font-family: 'Inter', Arial, sans-serif;
}

body.login-whole-wrapper {
    min-height: 100vh;
    height: 100% !important;
}

body.login-whole-wrapper .admin-login-wrapper.page-container {
    min-height: 100vh !important;
}

.page-header {
    position: fixed;
    right: 0;
    top: 0;
    background: linear-gradient(45deg, #05a4a4, #16a085);
    box-shadow: 0px 0px 10px #e6e7eb;
    z-index: 999;
}

.page-header #bs-example-navbar-collapse-1>ul>li>a>i {
    color: white;
}

span.hrms-beta-text {
    position: absolute;
    top: calc(50% - 11px);
    transform: translateY(-50%);
    right: 2px;
    height: auto;
    line-height: initial;
    background: linear-gradient(45deg, #f39c12, #e4bb21) !important;
    color: white !important;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.new-feature-btn {
    outline: 0 !important;
    border: 0 !important;
    background: transparent;
}

.page-header .navbar-nav>li>a:link {
    color: #ffffff !important;
    text-transform: capitalize;
}

#toastNotifications {
    position: relative;
    margin-top: 7px !important;
}

a#toastNotifications .notification {
    position: absolute;
    top: 2px;
    right: calc(0% - 1px);
    border-radius: 50%;
}

a#toastNotifications .notification p {
    margin-bottom: 0;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    text-align: center;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #16a085 !important;
    font-weight: 500;
    box-shadow: 1px 1px 7px -2px #0000009e;
}


.moretext {
    display: none;
}

button.notification-close-btn {
    outline: 0;
    border: none;
    background: transparent;
    font-size: 12px;
    opacity: .6;
    position: absolute;
    right: 11px;
    top: 3px;
    transition: all .3s;
    color: white;
    padding: 0 !important;
    height: auto;
}

button.notification-close-btn:hover {
    transform: rotate(360deg);
    color: white;
    opacity: .99;
}

.new-feature-sidebar-wrapper {
    position: fixed;
    right: 0;
    max-width: 350px;
    width: 0px;
    background: #fafafa;
    height: 100vh;
    top: 0;
    z-index: 999;
    box-shadow: 1px 7px 35px -12px black;
    transition: all .3s;
    overflow-y: scroll;
}
.new-feature-sidebar-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.new-feature-sidebar-wrapper.open {
    width: 100% !important;
}

.new-feature-sidebar-wrapper .header-div {
    background: linear-gradient(276deg, #1abc9c, #05a4a4);
}

.new-feature-sidebar-wrapper .header-div h1 {
    font-size: 15px;
    padding: 14px;
    color: white;
    text-shadow: 0 0 0.2px;
}

.feature-content-wrapper {
    padding: 1px 9px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: auto;
    max-height: calc(100vh - 56px);
    overflow: visible;
    padding-bottom: 7px;
}
.progress-item {
    overflow: visible !important;
}

.feature-content-wrapper .card {
    border: 1px solid transparent;
    padding: 6px 11px 11px !important;
    transition: all .3s;
}

.feature-content-wrapper .card button.notification-close-btn {
    right: 6px;
    top: 6px;
    color: gray;
    display: none;
}

.feature-content-wrapper .card button.notification-close-btn:hover {
    transform: rotate(360deg);
    color: gray;
    opacity: .8;
}

.feature-content-wrapper .card:hover {
    box-shadow: 0px 2px 15px -9px black;
}

.top-header-time-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 13px auto 8px;
}

.new-feature-badge {
    position: relative;
}

.new-feature-badge>img {
    width: 36px;
    border-radius: 50%;
    height: 36px;
    object-fit: contain;
    box-shadow: 0px 7px 15px -11px black
}

.new-feature-badge:before {
    position: absolute;
    top: -11px;
    left: -2px;
    content: 'New Feature';
    font-size: 9px;
    background: linear-gradient(45deg, #c0392b, #e74c3c);
    padding: 4px 6px;
    border-radius: 5px;
    line-height: 1;
    color: white;
    text-shadow: 0 0 0.8px;
    width: 71px;
}

.new-feature-item-time {
    font-size: 10px;
    margin-right: 0px;
}

h2.title {
    font-size: 13px;
    font-weight: 600;
    color: #3b5998;
    text-transform: capitalize;
}

.new-feature-item p {
    font-size: 12px;
    margin-bottom: 6px;
}

a.moreless-button {
    font-size: 10px;
    background: linear-gradient(45deg, #3b5998, #3a3a3c);
    color: white;
    padding: 7px 11px;
    border-radius: 3px;
    margin: 0;
    box-shadow: 0px 0px 17px -9px white, inset -4px -4px 7px -4px #3a3a3c;
    max-width: fit-content;
}

.NF-video-upper-text {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-feature-sidebar-wrapper .NF-img,
.new-feature-sidebar-wrapper iframe {
    border-radius: 0.25rem;
}

.new-feature-sidebar-wrapper .ads-pic-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.new-feature-sidebar-wrapper .card.remove-feature-card {
    animation: removeFeatureCard .3s linear forwards;
}

@keyframes removeFeatureCard {
    from {
        transform: translateX(0);
        display: block;
    }

    to {
        transform: translateX(-110%);
        display: none;
    }
}

.feature-search-div {
    position: absolute;
    top: 9px;
    right: 28px;
    width: calc(100% - 32px);
    text-align: end;
}

.feature-search-div input {
    outline: 0;
    border: 0 !important;
    box-shadow: 3px 2px 10px -7px black;
    width: 0;
    padding: 0;
    font-size: 11px;
    transition: all .3s;
}

.feature-search-div button {
    outline: 0;
    border: 0;
    background: transparent;
    color: white;
    font-size: 13px;
    opacity: .6;
    transition: all .3s;
}

.feature-search-div input.width-a {
    width: calc(100% - 39px) !important;
    padding: 5px 9px !important;
}

.feature-search-div button:hover {
    opacity: .99;
}

.feature-content-wrapper .feature-modal-btn {
    outline: 0;
    border-radius: 45px;
    border: 0;
    padding: 7px 25px !important;
    font-size: 12px;
    background: linear-gradient(45deg, #05a4a4, #16a085);
    color: white;
    box-shadow: 0px 4px 11px -5px black;
    transition: all .3s;
    height: auto;
}

.feature-content-wrapper .feature-check-out-btn {
    outline: 0;
    border-radius: 45px;
    border: 0;
    padding: 5px 13px;
    background: linear-gradient(45deg, #16a085, #05a4a4);
    color: white;
    box-shadow: 0px 4px 11px -5px black;
    transition: all .3s;
    display: block;
    margin: 13px 0 4px;
    max-width: fit-content;
    font-size: 10px;
    transition: all .3s;
}

.feature-content-wrapper .feature-modal-btn:hover,
.feature-content-wrapper .feature-check-out-btn:hover {
    box-shadow: none !important;
}

.feature-content-wrapper ::-webkit-scrollbar {
    width: 12px;
}

.new-feature-btn {
    outline: 0 !important;
    border: 0 !important;
    background: transparent;
}

.select2-selection.select2-selection--multiple {
    overflow: auto;
}

.ads-pic-wrapper h2 {
    white-space: nowrap;
    max-width: 160px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* FOR NEW SIDEBAR FEEDBACK MODAL */

.clear {
    clear: both;
    width: 0;
    height: 0;
    visibility: hidden;
    overflow: hidden;
}

.test .open {

    display: none !important;
}

.smiley .open {
    display: block;
}

.smiley .close {
    display: none;
}

.test .close {
    display: block !important;
}

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

.feedback_container {
    text-align: center;
}

.title_feedback {
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 15px;
}

.rating_div {
    margin-bottom: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
}

.smiley span {
    display: block;
    cursor: pointer;
    font-weight: 500;
}

.smiley img {
    width: 40px;
    height: 40px;
}

.close {
    opacity: 1 !important;
}

.comment_div textarea {
    width: 100%;
    border: 1px solid #05a4a4;
    resize: none;
    outline: 0;
    font-weight: 500;
    padding: 8px;
    font-size: 12px;
}

.submit_btn {
    margin-top: 15px;
    text-align: center;
}

.submit_btn a {
    display: inline-block;
    background: #05a4a4;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 26px;
    text-transform: uppercase;
}

/* ************************** */
.page-header .navbar-nav>li>a>img {
    box-shadow: 6px 0px 10px -5px #00000047, -3px 4px 10px -6px #f3f3f38f;
    border: 0;
}

.secondary-sidebar-bar>img {
    max-width: 153px;
    transition: all .3s;
}

.secondary-sidebar-bar .logo-box {
    color: #000 !important;
    height: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset -6px -1px 8px -5px #e6e7eb;
    width: 100%;
}

.secondary-sidebar-bar .logo-box img:first-child {
    width: 39px;
}

.secondary-sidebar-bar .logo-box img:last-child {
    max-width: 150px;
    width: 80%;
    height: fit-content;
    margin: 5px 0 0 0;
    transition: all .3s;
    max-height: 44px;
    object-fit: contain;
}

.collapsed-sidebar .secondary-sidebar-bar .logo-box img:last-child {
    display: none;
}

.activity-break-down-table.table>thead:first-child>tr:first-child,
.activity-break-down-table.table>thead:first-child>tr:first-child>th:first-child,
tbody#activity_breakdown_data tr,
tbody#activity_breakdown_data>tr>td:first-child {
    border: 1px solid #e5e9ec !important;
}

tbody#activity_breakdown_data>tr>td:first-child {
    text-align: left;
}

.inner_table .table>thead:first-child>tr:first-child>th {
    line-height: 1.7;
}

.dashboard_main1 .table>tbody>tr:last-child>td,
.dashboard_main1 .table>tbody>tr:last-child {
    border: none;
}

table#ProjectsTable th,
table#ProjectTable th {
    line-height: 1.5;
}

.modal-backdrop {
    z-index: 9999;
}

.modal, .tooltip, .swal2-container, .select2-container .select2-dropdown {
    z-index: 9999999 !important;
}

.form-check-inline .form-check-input {
    vertical-align: baseline;
}

.form-check-label[for="idle-btn"],
.form-check-label[for="offline-btn"],
.form-check-label[for="break-btn"] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

div#editProject label,
#projectfulldetail label,
#email_report label:not(.form-check-label) {
    font-weight: 600;
}

#email_report .form-check-label {
    cursor: pointer;
}

#ManagerUsersModal input[value="Add Members"],
#ManagerUsersModal input[value="Delete Members"] {
    padding: 10px;
}

#ManagerUsersModal .button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

#manager_employeesList td {
    padding: 10px 18px;
}

#manager_employeesList tr:first-child>td {
    border-top: 0 !important;
}

.table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(45deg, #05a4a4, #16a085) !important;
    color: #fff !important;
    border: 1px solid #ffffff !important;
}

.tooltip-inner {
    max-width: 200px;
    width: fit-content;
    word-wrap: normal;
    word-break: break-word;
}

table#desktop_control_table>thead>tr>th:nth-child(7),
table#desktop_control_table>thead>tr>th:nth-child(8) {
    width: 88px !important;
}

#dropdownMenuLink+.dropdown-menu .dropdown-item {
    font-weight: 500 !important;
    font-size: 12px !important;
}

tbody#appendDataProRanking .form-check-label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#appendDataProRanking .domainTime--btn {
    max-width: 161px;
    width: 161px;
    margin-right: 1px;
}

#newrole .toggle-on,
#newrole .toggle-off {
    line-height: 1.1;
}

div#shift_list_update #shiftDataForm label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
}

#shift_list_update input#mon,
#shift_list_update input#monStart,
#shift_list_update input#thu,
#shift_list_update input#fri,
#shift_list_update input#sat,
#shift_list_update input#sun {
    margin-top: 0;
}

#select2-role0-results .select2-container--default .select2-results>.select2-results__options,
.select2-container--default .select2-results>.select2-results__options#select2-role-EditEmployee-results {
    overflow-x: hidden;
}

tbody#groupBodyId>tr>td:not(:last-child) a {
    padding: 0;
}

#General .form-control,
#MonitoringControl .form-control {
    vertical-align: middle;
    line-height: inherit;
}

#Websites_adv button {
    height: 37px;
    /* margin-bottom: 8px; */
}

#MonitoringControl #checkAll,
#inputFormRow #AllLocationsFeature,
#inputFormRow #AllDepartmentsFeature,
#inputFormRow #AllEmployeesFeature {
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.font-weight-600 {
    font-weight: 600;
}

.add-new-alert {
    padding: 0.5rem 0.75rem !important;
    height: 40px;
    line-height: 1.8;
}

/* #appendDataProRanking tr > td:first-child{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
} */



/* SHAHNA'S CSS ENDS */

#Unlimited .form-control .form-check-label {
    line-height: 1.6;
}

.create_group {
    line-height: 2.5;
    float: right;
}

.admin-login-wrapper .jumbotron .login-logo {
    max-width: 228px;
    margin: 31px auto 22px;
}

#isClientDiv {
    margin: 8px auto 22px;
}

.invalid_authentication {
    color: #721c24;
    background-color: #f8d7da;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 12px 15px;
    font-size: 13px;
}

#visable[type=radio] {
    margin-top: 6px;
}

#stealth[type=radio] {
    margin-top: 6px;
}

.page-container {
    position: relative;
}

.footer {
    background: #fff;
    bottom: 0;
    color: #3e463e;
    padding: 11px 30px;
    position: absolute;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.3px;
    width: calc(100% - 220px);
    right: 0;
    z-index: 9;
}

.collapsed-sidebar footer.footer {
    width: calc(100% - 60px);
}

@media (max-width: 767px) {
    #bs-example-navbar-collapse-1 {
        display: none !important;
    }

    .footer {
        width: 100% !important;
    }

    .report_download-file-btn>div:first-child {
        top: 0 !important;
    }
}

.total_time {
    /* margin: 7px 7px 7px 0px; */
    background: linear-gradient(45deg, #16a085, #05a4a4);
    color: white;
}

.total_time:hover {
    background: linear-gradient(45deg, #05a4a4, #16a085);
}

.active_time {
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    color: white;
}

.active_time:hover {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
}

.productive_time {
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    color: white !important;
}

.productive_time:hover {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
}

.non_productive_time {
    background: linear-gradient(45deg, #f39c12, #e4bb21);
    color: white !important;
}

.non_productive_time:hover {
    background: linear-gradient(45deg, #e4bb21, #f39c12);
}

.neutral_time {
    background: linear-gradient(45deg, #c0392b, #e74c3c);
    color: #fff !important;
}

.neutral_time:hover {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
}

.productivity {
    background: linear-gradient(45deg, #8e44ad, #9b59b6);
    color: #fff !important;
}

.productivity:hover {
    background: linear-gradient(45deg, #9b59b6, #8e44ad);
}

.license {
    padding: 7px 23px !important;
    z-index: 9;
}

.license span {
    padding-left: 2rem !important;
}

.btn-group.nav.nav-tabs {
    border: 0 !important;
}

.table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.table-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
    color: white !important;
}

/* #emp-currently-ofline #currently-offline_table.current-off tbody tr.odd td button[type=button].btn.btn-info{
    background-color: #5a595c !important;
    border-color: #5a595c !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}
#emp-currently-ofline #currently-offline_table.crrent-off tbody tr.odd td button[type=button].btn.btn-info:hover{
    background-color: #16a085 !important;
    border-color: #16a085 !important;
} */

.office_network_div {
    background-color: #05a4a4 !important;
}

#oneSearch.srch-btn {
    color: #fff;
    background-color: #5a595c !important;
    border-color: #5a595c !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}

#oneSearch.srch-btn:hover {

    background-color: #16a085 !important;
    border-color: #16a085 !important;
}

/* .notification_btn button:focus {
    box-shadow: none !important;
} */

.addTask_save-btn {
    color: #fff;
    background-color: #05a4a4 !important;
    border-color: #05a4a4 !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.addTask_save-btn:hover {
    color: #fff;
    background-color: #16a085 !important;
    border-color: #05a4a4 !important;
}

.edit_project_updateBtn.btn-warning.focus,
.btn-warning:focus {
    box-shadow: none !important;
}

.edit_project_updateBtn.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show>.btn-warning.dropdown-toggle {
    color: white;
    background-color: #16a085 !important;
    border-color: #16a085 !important;
}

.project-testing-colmn .card-body {
    font-size: 14px;
    white-space: nowrap;
    max-width: 155px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 1rem;
}

.row.project-testing-colmn .card {
    min-height: 85px !important;
}

.seeAllReport-pdfDownload {
    margin-right: 3px !important;
}

.sellAllreports-csvButton {
    margin-right: 2px;
}

.sellAllreports-csvButton:focus {
    box-shadow: 0 0 0 0.2rem rgb(3 199 132 / 50%) !important;
}

.setting-productivityRule-search {
    color: #fff;
    background-color: #05a4a4;
    border-color: #05a4a4;
}

.setting-productivityRule-search:hover,
.setting-shiftManage-creatShift:hover {
    color: #fff;
    background-color: #16a085 !important;
    border-color: #05a4a4 !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.setting-shiftManage-creatShift {
    color: #fff;
    background-color: #5a595c !important;
    border-color: #5a595c !important;
    box-shadow: 0px 4px 5px #cfd3d8;
}

.setting-shiftManage-creatShift:hover {
    background-color: #16a085 !important;
    border-color: #16a085 !important;
}

.table-striped.productivity-table th {
    min-width: 110px;
}

.empFullDetail-automationCode .card-body {
    font-size: 13.5px;
    white-space: nowrap;
    /* max-width: 150px; */
    width: 100%;
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    display: inline-block;
    text-align: center;
}

.gj-picker.datepicker,
.daterangepicker {
    z-index: 9999999;
}

#EmployeeReportTable_wrapper #webAppEmployeeData tr td:nth-child(2),
table[aria-describedby="EmployeeReportTable_info"] thead tr th:nth-child(2) {
    max-width: 173px;
    text-overflow: ellipsis;
    overflow: hidden;
}

table[aria-describedby="EmployeeReportTable_info"] thead tr th:nth-child(9) {
    min-width: 57px;
}

.table-wrap.table-responsive {
    position: relative;
    /* overflow: hidden; */
}

div#timeSheetDataTable_wrapper {
    position: unset !important;
    padding-top: 52px;
    overflow: auto;
}

#timeSheetDataTable_wrapper .dataTables_length {
    position: absolute;
    left: 18px;
    top: 0;
}

#timeSheetDataTable_filter {
    position: absolute;
    right: 18px;
    top: 0;
}

.alertNotification.table-wrap.table-responsive {
    overflow: scroll;
}

table#suspended_users_datatable tbody#appendSuspendedTR tr td button[type=button] {
    color: #ffffff;
    background-color: #8e44ad;
    border-color: #8e44ad;
    box-shadow: 0px 4px 5px #cfd3d8;
}

table#suspended_users_datatable tbody#appendSuspendedTR tr td button[type=button]:hover {

    background-color: #8e44ad !important;
    border-color: #8e44ad !important;
    color: white;

}

table#emp-currently-ofline tbody#currently-offline_table tr td button[type=button] {
    color: #ffffff;
    background-color: #7f8c8d;
    border-color: #7f8c8d;
    box-shadow: 0px 4px 5px #cfd3d8;
}

table#emp-currently-ofline tbody#currently-offline_table tr td button[type=button]:hover {
    background-color: #7f8c8d !important;
    border-color: #7f8c8d !important;
    color: white;
}

#alert[aria-labelledby="AlertSettings"] label .form-check-inline .form-check-input {

    vertical-align: baseline;
}

#roleNameInput {
    margin-top: 4px;
}

#desktop_control_table thead tr th,
#desktop_control_table tbody tr th {
    min-width: 140px;
}

/* [aria-describedby="EmployeeReportTable_info"]> thead > tr > th:nth-child(1){
    min-width: 95px;
} */
[aria-describedby="EmployeeReportTable_info"]>thead>tr>th:nth-child(2) {
    min-width: 161px;
}

[aria-describedby="EmployeeReportTable_info"]>thead>tr>th:nth-child(1),
[aria-describedby="EmployeeReportTable_info"]>thead>tr>th:nth-child(5) {
    min-width: 93px;
}

#webAppEmployeeData>tr>td:first-child {
    max-width: 110px;
    width: 110px;
    text-overflow: ellipsis;
    overflow: hidden;
}

#webAppEmployeeData>tr>td:nth-child(3),
#webAppEmployeeData>tr>td:nth-child(4),
#webAppEmployeeData>tr>td:nth-child(5) {
    width: 76px;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
}

table[aria-describedby="EmployeeReportTable_info"] thead tr th.table-primary.fixed-side.sorting_asc,
th.table-primary.fixed-side.sorting_desc {
    background: white !IMPORTANT;
}

.html-duration-picker-input-controls-wrapper {
    width: 80px !important;
}

span#errorLatLng.success-msg {
    color: green !important;
}

/* div.caret.caret-down, div.caret.caret-up  {
transform: translateX(-4px);
} */
.html-duration-picker-input-controls-wrapper .scroll-btn {
    top: -1px !important;
}

.feature-content-wrapper .card:first-child .new-feature-item {
    margin-bottom: 7px;
}

.daterangepicker {
    z-index: 9999999;
}

.report_download-file-btn {
    align-items: center;
    display: flex;
}

.report_download-file-btn>div:first-child {
    position: relative;
    top: 6px;
}

#domainTime button.scroll-btn {
    min-height: auto;
}

.department-th {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.department-th>a {
    max-width: 87px;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

#ManagerUsersModal .UnassignButton-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

#ManagerUsersModal .form-group {
    margin-bottom: 0;
}

#AttendanceListData>tr>td {
    font-size: 12px;
    color: #646464;
    text-transform: capitalize;
}

.scrollStyle {
    width: 18.8px !important;
    padding: 0 5px !important;
    min-height: auto;
}

.caretStyle {
    position: relative;
}

.caretStyle.caretUpStyle {
    top: 5px;
}

.caretStyle.caretDownStyle {
    top: -5px;
}

.silah-container-wrapper>div:first-child {
    position: absolute;
    z-index: 999999;
    left: calc(100vw - 200px);
}
.tab-action-wrapper > a {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    color: #7a7a7a;
}
.tab-action-wrapper > a:hover{
    color: #05a4a4;
}
.employee-mobile-nav{
    display: flex;
    justify-content: center;
    align-items: center;
}
button.btn.see-all-less.btn-primary.btn-sm.btn-See-All {
    min-height: auto;
}
/* .tooltip{
    pointer-events: none;
} */
.tClaim-border-gray{
    /* border: 0.5px solid #e5e9ec; */
    /* padding: 8px; */
    /* border-radius: 2px; */
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* gap: 2px; */
}
.tClaim-radioBtn{
    padding: 8px 10px;
    /* background-color: #e3e3e3cf; */
    /* color: #fff; */
    border-radius: 5px;
    font-weight: 500;
    box-shadow: 0px 0px 9px 1px #cccccca8;
}
.tClaim-radioBtn:hover{
    box-shadow: none;
}
.page-container{
    padding-bottom: 42px;
    min-height: 100vh;
    overflow: hidden;
    background: #fff0
}
.footer{
background: #fff0;
}
.statusBtn {
  min-height: 20px;
}

@media screen and (max-width: 886px) {
    .silah-container-wrapper>div:first-child {
        position: relative;
        left: unset;
        margin: 0 auto !important;
        padding: 35px 0 0;
    }
}

/* @media screen and (min-width:769px) and (max-width:856px){
    .login-content > div> div:first-child {
        max-height: 100vh;
        overflow: auto;
        padding: 10px 30px;
        margin: 18px auto;
        display: block;
    }
    .login-content .login-box {
        padding-top: 0px !important;
        padding: 0;
    }
} */
@media screen and (max-width:768px){
    .page-sidebar-visible .secondary-sidebar-bar {
        box-shadow: none;
    }
    .page-sidebar-visible .secondary-sidebar-bar .logo-box {
        box-shadow: none;
    }
    .employee-mobile-nav {
        justify-content: center;
        align-items: center;
        background: #1abc9c;
        display: none;
        width:100%;
        min-height: 57px;
    }
    .employee-mobile-nav > a:first-child {
        margin: 10px 0;
    }
    .employee-mobile-nav.show--nav{
        display: flex !important;
    }
}
@media (max-width: 575px) {
    .weekly {
        padding-left: 30px;
    }

    .monthly {
        padding-left: 35px;
    }
}


/* =============================================================================
   WORKSTATZ BRAND LAYER
   Everything above is the base new-style.css with the palette re-mapped.
   Everything below is Workstatz-specific and has no equivalent in the base.

   Colour roles
     teal-deep  #0e7e7e  every interactive fill that carries white text
                         (buttons, active pills, badges, pagination)
     teal       #05a4a4  brand primary - chrome, gradients, icons, accents
     teal-dark  #16a085  hovers on chrome, sidebar active
     gold       #e4bb21  status + data only, never a button
   ============================================================================= */

:root {
    /* primary */
    --wz-teal: #05a4a4;
    --wz-gold: #e4bb21;
    /* secondary / application */
    --wz-ink: #3a3a3c;
    --wz-ink-2: #5a595c;
    --wz-grey: #e6e7eb;
    --wz-turquoise: #1abc9c;
    --wz-orange: #f39c12;
    --wz-green: #27ae60;
    --wz-teal-dark: #16a085;
    --wz-purple: #8e44ad;
    /* derived */
    --wz-teal-deep: #0e7e7e;
    --wz-teal-deeper: #0a6363;
    --wz-red: #c0392b;
    --wz-teal-wash: #e0f5f5;
    --wz-gold-wash: #fdf8e6;
}

body {
    font-family: 'Inter', Arial, sans-serif;
}

/* --- Status tiles ----------------------------------------------------------
   The base file shares gradient stops between the dashboard tiles and the
   productivity chips, so the palette re-map resolves them in favour of the
   productivity meaning. Idle and offline are re-stated here so the row reads
   total / online / idle / offline / absent / suspended in brand colours.
   -------------------------------------------------------------------------- */
.box:nth-child(3),
.btn-sts-idle {
    background: linear-gradient(45deg, var(--wz-orange), var(--wz-gold));
}

.box:nth-of-type(3):hover {
    background: linear-gradient(45deg, var(--wz-gold), var(--wz-orange));
}

.box:nth-child(4),
.btn-sts-offline,
.btn-sts-currently-offline {
    background: linear-gradient(45deg, var(--wz-ink), var(--wz-ink-2));
}

.box:nth-of-type(4):hover {
    background: linear-gradient(45deg, var(--wz-ink-2), var(--wz-ink));
}

/* Neutral productivity is a grey, not the red the absent tile needs. */
.neutral_time {
    background: linear-gradient(45deg, var(--wz-ink-2), #7f8c8d);
}

.neutral_time:hover {
    background: linear-gradient(45deg, #7f8c8d, var(--wz-ink-2));
}

/* --- Collapsed sidebar -----------------------------------------------------
   The rail expects a two-image lockup (mark + wordmark) and hides the last
   image when collapsed; the module only renders one image, so the rail ends up
   blank. Swap the wordmark for the round W mark instead of hiding it.
   -------------------------------------------------------------------------- */
.collapsed-sidebar .secondary-sidebar-bar .logo-box img:last-child {
    display: block;
    content: url("../images/favicons/39123bc4f4079470f614f33d21449927.png");
    max-width: 34px;
    margin: 0 auto;
}

/* --- Every button is the same teal -----------------------------------------
   Gold is a status and data colour in this brand, not an action colour, so no
   control below is ever gold. #0e7e7e carries white text at 4.9:1 (AA).
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary.dropdown-toggle,
.btn-secondary,
.btn-success,
.bulk_data .btn-primary,
.btn_view,
.btn_gray.active,
.badge-primary,
.btn-p-btn.active,
#csvReportsDownload,
#download_btn_csv,
#loginButtonDiv {
    background: var(--wz-teal-deep) !important;
    background-color: var(--wz-teal-deep) !important;
    border-color: var(--wz-teal-deep) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0px 4px 5px rgba(14, 126, 126, 0.28);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.dropdown-toggle:hover,
.btn-secondary:hover,
.btn-success:hover,
.bulk_data .btn-primary:hover,
.btn_view:hover,
.btn_gray.active:hover,
.btn-p-btn.active:hover,
#csvReportsDownload:hover,
#download_btn_csv:hover,
#loginButtonDiv:hover {
    background: var(--wz-teal-deeper) !important;
    background-color: var(--wz-teal-deeper) !important;
    border-color: var(--wz-teal-deeper) !important;
    color: #fff !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-secondary:focus,
.btn-success:focus,
.btn_view:focus,
.btn_gray.active:focus {
    box-shadow: 0 0 0 0.2rem rgba(14, 126, 126, 0.35) !important;
}

.btn_gray:hover {
    color: var(--wz-teal-deep);
}

.btn-p-btn {
    color: var(--wz-teal-deep);
}

/* --- License info pill -----------------------------------------------------
   Markup is <button class="btn btn-primary license">, so it inherits the teal
   button fill while .license span / .license text (0,1,1) tint the inner text.
   It reports state rather than performing an action, so it takes the ink
   treatment instead of the button one: white on #3a3a3c is 11.3:1 and the gold
   "More Info" is 6.1:1. That link carries an inline color:#FFFF00, which only
   an !important author rule can override.
   -------------------------------------------------------------------------- */
.btn-primary.license,
.license {
    background: var(--wz-ink) !important;
    background-color: var(--wz-ink) !important;
    border-color: var(--wz-ink) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.btn-primary.license,
.license,
.license span,
.license text,
.license i {
    color: #fff !important;
}

#invoiceMoreInfoBtn,
#invoiceMoreInfoBtn i,
.license #invoiceMoreInfoBtn,
.license #invoiceMoreInfoBtn i {
    color: var(--wz-gold) !important;
}

#invoiceMoreInfoBtn:hover,
#invoiceMoreInfoBtn:hover i {
    color: #f2d45c !important;
    text-decoration: underline;
}

/* --- Danger stays a danger colour ------------------------------------------ */
.btn-danger {
    background-color: var(--wz-red) !important;
    border-color: var(--wz-red) !important;
    color: #fff !important;
    box-shadow: 0px 4px 5px rgba(192, 57, 43, 0.3);
}

.btn-danger:hover {
    background-color: #a93226 !important;
    border-color: #a93226 !important;
}

/* --- Pagination ------------------------------------------------------------ */
.pagination a,
.paginationInside a {
    background-image: linear-gradient(var(--wz-teal), var(--wz-teal-deep)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.pagination a.disabled,
.pagination a.disabled:hover,
.pagination a.disabled:focus,
.pagination a.disabled:active,
.paginationInside a.disabled,
.paginationInside a.disabled:hover,
.paginationInside a.disabled:focus,
.paginationInside a.disabled:active {
    background-image: linear-gradient(var(--wz-grey), #d3d5da) !important;
    color: var(--wz-ink-2) !important;
    cursor: default;
}

/* --- Chrome ---------------------------------------------------------------- */
.page-header {
    background: linear-gradient(45deg, var(--wz-teal-dark), var(--wz-teal));
}

.modal-header {
    background: var(--wz-teal-deep) !important;
    color: #fff;
    border-bottom: 3px solid var(--wz-gold);
}

.modal-header .close {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
}

#particles-js {
    background: linear-gradient(45deg, var(--wz-teal), var(--wz-teal-dark));
}

/* --- Tables / headings ----------------------------------------------------- */
.no-page-title .table-primary,
.no-page-title .bg-success {
    background-color: var(--wz-teal-wash) !important;
    color: var(--wz-ink);
    font-size: 13px;
}

table thead tr {
    color: var(--wz-ink);
}

/* --- Whitelabel login card ------------------------------------------------- */
.admin-login-wrapper.page-container .login-text {
    color: var(--wz-ink);
}

.admin-login-wrapper .jumbotron .login-logo,
.admin-login-wrapper.page-container .logo-wrapper img {
    max-width: 228px;
    height: auto;
    object-fit: contain;
}

.admin-login-wrapper.page-container a {
    color: var(--wz-teal-deep);
}

.admin-login-wrapper.page-container .form-control:focus {
    border-bottom-color: var(--wz-teal);
    box-shadow: none;
}

/* --- MFA / OTP modal -------------------------------------------------------
   Layout/_header.blade.php carries an inline <style> block that hardcodes an
   indigo palette for the two-factor modal. That block is shared by every
   brand, so it is re-stated here instead of edited. The theme <link> tags come
   after it in the document, so plain rules win.
   -------------------------------------------------------------------------- */
.method-card:hover,
.method-card.active,
.authentic {
    border-color: var(--wz-teal);
}

.method-card.active {
    background-color: var(--wz-teal-wash);
}

.method-icon {
    color: var(--wz-teal-deep);
}

.method-card h6,
.toggle-wrapper label {
    color: var(--wz-ink);
}

.mfa-border-gray {
    border-left: 4px solid var(--wz-teal);
}

.mfa-border-gray p {
    color: var(--wz-ink) !important;
}

.otp:focus,
.otp-input:focus,
.form-otp input:focus {
    border-color: var(--wz-teal);
    box-shadow: 0 0 0 3px rgba(5, 164, 164, 0.2);
}

.otp-instructions {
    background-color: var(--wz-teal-wash);
    border-left: 3px solid var(--wz-teal);
}

.btn-verify {
    background: var(--wz-teal-deep);
    color: #fff;
}

.btn-verify:hover {
    background: var(--wz-teal-deeper);
    color: #fff;
}

.btn-light-primary {
    background-color: var(--wz-teal-wash);
    color: var(--wz-teal-deep);
}

.btn-light-primary:hover {
    background-color: #cfeceb;
    color: var(--wz-teal-deeper);
}

/* --- Shared custom.css -----------------------------------------------------
   custom.css is loaded by every brand, so it cannot be re-coloured in place.
   It is linked before this file on the app layouts, so the few components it
   still paints in the stock blue are re-stated here.
   -------------------------------------------------------------------------- */
.expireHeader {
    background: var(--wz-ink);
    border-bottom: 3px solid var(--wz-gold);
}

.card-blue-grid {
    background-image: linear-gradient(to right, var(--wz-teal), var(--wz-teal-dark));
}

.form_wizard .nav-pills.nav-wizard > li.active a {
    background-color: var(--wz-teal-deep);
    color: #fff;
}

.form_wizard .nav-pills.nav-wizard > li.active .nav-arrow {
    border-color: transparent transparent transparent var(--wz-teal-deep);
}

.form_wizard .nav-pills.nav-wizard > li.active .nav-wedge {
    border-color: var(--wz-teal-deep) var(--wz-teal-deep) var(--wz-teal-deep) transparent;
}

.formwizardpopup .modal-content.banner,
.formwizardpopup .modal-content.banner .modal-body {
    background: var(--wz-ink);
}

.idleProductive .badge-new {
    background-color: var(--wz-teal-deep);
    color: #fff;
}

.ui-state-active {
    color: var(--wz-ink) !important;
}

/* =============================================================================
   CALM SURFACE PASS
   Calm comes from flat fills, even weight and quiet geometry - not from
   desaturating. Muted brand hues read as dirty, so every tile below is the
   guide's application colour at full cleanliness, laid down flat. The
   softening is all in the surfaces around them.
   ============================================================================= */

:root {
    --wz-t-total: #16a085;    /* green sea   */
    --wz-t-online: #27ae60;   /* nephritis   */
    --wz-t-idle: #f39c12;     /* orange      */
    --wz-t-offline: #7f8c8d;  /* asbestos    */
    --wz-t-absent: #e74c3c;   /* alizarin    */
    --wz-t-suspend: #8e44ad;  /* wisteria    */
    --wz-surface: #f4f6f6;

    /* Deeper cuts of the same hues, for small text on white where the tile
       fills would be too light to read. */
    --wz-x-active: #0e8b88;
    --wz-x-idle: #b9770a;
    --wz-x-productive: #1e8c4e;
    --wz-x-nonproductive: #c0392b;
    --wz-x-neutral: #6c7a7b;
}

/* --- Page and card surfaces ------------------------------------------------ */
.page-content {
    background: var(--wz-surface);
}

.no-page-title .card {
    box-shadow: 0 2px 14px rgba(58, 58, 60, 0.07) !important;
    border-radius: 10px;
}

/* --- Status tiles: muted, equal weight, lift instead of colour-flip -------- */
.box {
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(58, 58, 60, 0.08);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(58, 58, 60, 0.14);
    filter: saturate(1.06);
}

.box:first-child,
.box:nth-of-type(1):hover {
    background: var(--wz-t-total);
}

.box:nth-child(2),
.box:nth-of-type(2):hover,
.btn-sts-online {
    background: var(--wz-t-online);
}

.box:nth-child(3),
.box:nth-of-type(3):hover,
.btn-sts-idle {
    background: var(--wz-t-idle);
}

.box:nth-child(4),
.box:nth-of-type(4):hover,
.btn-sts-offline,
.btn-sts-currently-offline {
    background: var(--wz-t-offline);
}

.box:nth-child(5),
.box:nth-of-type(5):hover,
.btn-sts-absent {
    background: var(--wz-t-absent);
}

.box:nth-child(6),
.box:nth-of-type(6):hover,
.box:last-child,
.box:last-child:hover,
.btn-sts-suspend {
    background: var(--wz-t-suspend);
}

/* --- Employee Full Details time tiles --------------------------------------
   These six were six distinct hues in the base. The palette re-map sent
   .active_time (#a376fc,#f96f9b) and .productive_time (#00cef9,#00e6af) to the
   same green, because "online" and "productive" share a colour on the
   dashboard status row - but here they are neighbouring tiles on one row and
   collided. Restated flat and distinct, matching the dashboard treatment.
   -------------------------------------------------------------------------- */
.total_time,
.total_time:hover {
    background: var(--wz-t-total);
}

.active_time,
.active_time:hover {
    background: var(--wz-turquoise);
}

.productive_time,
.productive_time:hover {
    background: var(--wz-t-online);
}

.non_productive_time,
.non_productive_time:hover {
    background: var(--wz-t-idle);
}

.neutral_time,
.neutral_time:hover {
    background: var(--wz-t-offline);
}

.productivity,
.productivity:hover {
    background: var(--wz-t-suspend);
}

.total_time,
.active_time,
.productive_time,
.non_productive_time,
.neutral_time,
.productivity {
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(58, 58, 60, 0.08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.total_time:hover,
.active_time:hover,
.productive_time:hover,
.non_productive_time:hover,
.neutral_time:hover,
.productivity:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(58, 58, 60, 0.14);
}

/* --- Chrome: shallower gradient so the bar reads flat, not banded ---------- */
.page-header {
    background: linear-gradient(90deg, #0e7e7e, #13908c);
    box-shadow: 0 1px 6px rgba(58, 58, 60, 0.12);
}

/* --- Controls: rounder, lighter shadow ------------------------------------- */
.btn-primary,
.btn-primary.dropdown-toggle,
.btn-secondary,
.btn-success,
.bulk_data .btn-primary,
.btn_view,
.btn_gray,
.btn_gray.active,
.btn-p-btn.active,
#csvReportsDownload,
#download_btn_csv,
#loginButtonDiv {
    border-radius: 6px;
}

.btn-primary,
.btn-primary.dropdown-toggle,
.btn-secondary,
.btn-success,
.bulk_data .btn-primary,
.btn_view,
.btn_gray.active,
.btn-p-btn.active,
#csvReportsDownload,
#download_btn_csv,
#loginButtonDiv {
    box-shadow: 0 2px 6px rgba(14, 126, 126, 0.22);
}

/* --- Tables ---------------------------------------------------------------- */
.no-page-title .table-primary,
.no-page-title .bg-success,
.activity-break-down-table thead th,
.lft_with_bg {
    background-color: #eef5f5 !important;
    color: var(--wz-ink);
}

.table-responsive tbody tr:hover {
    background-color: #f7fbfb;
}

/* The base paints the horizontal scroller thumb #888 on #f1f1f1, which reads
   as a heavy dark bar under every wide table. */
.table-responsive,
.table-wrap.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #bcc9c9 transparent;
}

.table-responsive::-webkit-scrollbar,
.table-wrap.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb,
.table-wrap.table-responsive::-webkit-scrollbar-thumb {
    background: #c4cfcf;
    border-radius: 8px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.table-wrap.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #a7b6b6;
}

.table-responsive::-webkit-scrollbar-track,
.table-wrap.table-responsive::-webkit-scrollbar-track {
    background: #eef1f1;
    border-radius: 8px;
}

/* Activity Break Down uses Bootstrap text utilities on each <tr>; those carry
   !important, so this needs both the extra class and !important to land. */
.activity-break-down-table .text-primary {
    color: var(--wz-x-active) !important;
}

.activity-break-down-table .text-warning {
    color: var(--wz-x-idle) !important;
}

.activity-break-down-table .text-success {
    color: var(--wz-x-productive) !important;
}

.activity-break-down-table .text-danger {
    color: var(--wz-x-nonproductive) !important;
}

.activity-break-down-table .text-secondary {
    color: var(--wz-x-neutral) !important;
}

.activity-break-down-table .text-dark {
    color: var(--wz-ink) !important;
}

/* --- Sidebar --------------------------------------------------------------- */
.secondary-sidebar-menu > ul > li:hover,
#sidebar_menus li a.active {
    background-color: #eef6f6;
}

.secondary-sidebar-menu ul li a i.menu-icon {
    box-shadow: none;
}

/* --- Bootstrap outline buttons ---------------------------------------------
   bootstrap.min.css (4.3.1) is shared by every brand and is never re-coloured,
   so .btn-outline-primary keeps #007bff and .btn-outline-info keeps #17a2b8 -
   blue text and border at rest, a blue fill once selected. The Employee page
   tab strip adds .btn-primary to mark the active tab, so the compound
   selector below has to outrank the plain .btn-outline-primary reset.
   Success and danger are left alone: those stay semantic.
   -------------------------------------------------------------------------- */
.btn-outline-primary {
    color: var(--wz-teal-deep) !important;
    border-color: var(--wz-teal-deep) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.btn-primary,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff !important;
    background-color: var(--wz-teal-deep) !important;
    border-color: var(--wz-teal-deep) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus {
    box-shadow: 0 0 0 0.2rem rgba(14, 126, 126, 0.35) !important;
}

.btn-outline-info {
    color: var(--wz-teal) !important;
    border-color: var(--wz-teal) !important;
    background-color: transparent !important;
}

.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info.active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active {
    color: #fff !important;
    background-color: var(--wz-teal) !important;
    border-color: var(--wz-teal) !important;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(5, 164, 164, 0.35) !important;
}

.btn-outline-secondary {
    color: var(--wz-ink-2) !important;
    border-color: #c3c7c9 !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
    color: #fff !important;
    background-color: var(--wz-ink-2) !important;
    border-color: var(--wz-ink-2) !important;
}

/* The tab strips mark the selected tab by adding .btn-primary to whichever
   outline variant it is. Selection should read as one colour, so the compound
   wins over the grey/red the variant would otherwise give it. */
.btn-outline-secondary.btn-primary,
.btn-outline-danger.btn-primary,
.btn-outline-success.btn-primary,
.btn-outline-info.btn-primary {
    color: #fff !important;
    background-color: var(--wz-teal-deep) !important;
    border-color: var(--wz-teal-deep) !important;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(90, 89, 92, 0.3) !important;
}

/* --- Bootstrap utility + component defaults --------------------------------
   Same reason as the outline buttons: bootstrap.min.css is shared and keeps
   #007bff / #17a2b8. .text-primary alone appears in 69 views, and the checked
   checkbox, focus ring and pagination all default to blue.
   .box .text-primary and .activity-break-down-table .text-primary are both
   0,2,0 so they still outrank the reset below and keep their own colours.
   -------------------------------------------------------------------------- */
.text-primary {
    color: var(--wz-teal-deep) !important;
}

.text-info {
    color: var(--wz-teal) !important;
}

.bg-primary,
.bg-info,
.badge-info {
    background-color: var(--wz-teal-deep) !important;
    color: #fff !important;
}

.border-primary {
    border-color: var(--wz-teal-deep) !important;
}

.border-info {
    border-color: var(--wz-teal) !important;
}

.alert-primary,
.alert-info {
    color: #0b5d4e;
    background-color: var(--wz-teal-wash);
    border-color: #bfe3e2;
}

.btn-info {
    background-color: var(--wz-teal) !important;
    border-color: var(--wz-teal) !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:active {
    background-color: var(--wz-teal-dark) !important;
    border-color: var(--wz-teal-dark) !important;
}

/* .btn-info doubles as the tab strip on Employee Full Details. Bootstrap tab
   links keep focus after a click, so folding :focus into the :hover rule left
   the selected tab stuck on the hover green. Focus gets a ring, not a fill. */
.btn-info:focus:not(:hover):not(.active) {
    background-color: var(--wz-teal) !important;
    border-color: var(--wz-teal) !important;
    box-shadow: 0 0 0 0.2rem rgba(5, 164, 164, 0.35) !important;
}

/* A selected tab needs to be distinguishable from its neighbours. */
.btn-info.active,
.btn-info.nav-link.active,
.nav-tabs .btn-info.nav-link.active,
.btn-group .btn-info.nav-link.active {
    background-color: var(--wz-teal-deep) !important;
    border-color: var(--wz-teal-deep) !important;
    color: #fff !important;
}

/* --- Employee Full Details tab strip ---------------------------------------
   This one strip is deliberately a GHOST bar, not solid buttons: the base sets
   `.tab-action-wrapper > a { background: transparent !important; color:#7a7a7a }`.
   Its links also carry .btn-info, so the generic .btn-info rules above forced
   white text onto a transparent background and the unselected tabs vanished -
   `background: transparent !important` (0,1,1) outranks `.btn-info` (0,1,0)
   even though both are !important, while the grey colour had no !important to
   defend itself. These selectors are 0,2,1 / 0,3,1 so they settle it, and they
   restore the intended ghost design in brand colours.
   -------------------------------------------------------------------------- */
.tab-action-wrapper > a.btn-info,
.tab-action-wrapper > a.nav-link {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--wz-ink-2) !important;
    font-weight: 500;
}

.tab-action-wrapper > a.btn-info:hover,
.tab-action-wrapper > a.nav-link:hover,
.tab-action-wrapper > a.btn-info:focus,
.tab-action-wrapper > a.nav-link:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--wz-teal-deep) !important;
}

.tab-action-wrapper > a.btn-info.active,
.tab-action-wrapper > a.nav-link.active,
.tab-action-wrapper > a.btn-info.active:hover,
.tab-action-wrapper > a.nav-link.active:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--wz-teal-deep) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--wz-teal) !important;
    border-radius: 0 !important;
}

.btn-link {
    color: var(--wz-teal-deep);
}

.btn-link:hover {
    color: var(--wz-teal-deeper);
}

/* --- Breadcrumb links -------------------------------------------------------
   `style="color: #0686d8"` is hardcoded onto breadcrumb anchors 106 times
   across 78 views. Editing all of them would touch every brand, and an inline
   style beats any normal rule, so !important is required. Server-rendered
   style attributes keep the author's literal text (unlike CSSOM-set styles,
   which serialise to rgb()), so the hex matches directly - the attribute
   selectors are the safety net for anchors outside a .breadcrumb.
   -------------------------------------------------------------------------- */
.breadcrumb a,
.breadcrumb-item a,
.breadcrumb-item.active a,
a[style*="#0686d8"],
a[style*="#0686D8"],
li[style*="#0686d8"] {
    color: var(--wz-teal-deep) !important;
}

.breadcrumb a:hover,
.breadcrumb-item a:hover,
a[style*="#0686d8"]:hover {
    color: var(--wz-teal-deeper) !important;
}

/* Native radios and checkboxes are not Bootstrap custom-controls - they are
   plain <input class="form-check-input">, used across 68 views, and browsers
   paint them with the default system blue. accent-color is the only hook. */
input[type="radio"],
input[type="checkbox"],
.form-check-input {
    accent-color: var(--wz-teal-deep);
}

/* Checked checkboxes / radios and switches */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--wz-teal-deep);
    border-color: var(--wz-teal-deep);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(5, 164, 164, 0.25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--wz-teal);
}

/* Focus rings on inputs and selects */
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--wz-teal);
    box-shadow: 0 0 0 0.2rem rgba(5, 164, 164, 0.2);
}

/* Bootstrap's own pagination and list groups */
.page-link {
    color: var(--wz-teal-deep);
}

.page-item.active .page-link {
    background-color: var(--wz-teal-deep);
    border-color: var(--wz-teal-deep);
    color: #fff;
}

.list-group-item.active {
    background-color: var(--wz-teal-deep);
    border-color: var(--wz-teal-deep);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--wz-teal-deep);
    color: #fff;
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--wz-teal-deep) !important;
}

/* --- Employee table row states ---------------------------------------------
   employeeDetail.js paints these two states as INLINE styles rather than
   classes: #fff9b2 acid yellow for every row in the Suspended list, #dfe6ec
   for a checked row. That file is shared by all three brands, so the colours
   cannot be changed at source without changing EmpMonitor and Silah too.

   Matching on the serialised inline value is the only CSS-only way to reach
   them. Browsers serialise the attribute as rgb(), so that form is matched
   first, with the hex kept as a fallback. An !important author rule outranks
   an inline style, so these land. If the JS ever changes those constants the
   selectors simply stop matching and the original colours return - it fails
   back to today's behaviour rather than breaking.
   -------------------------------------------------------------------------- */
tr[style*="rgb(255, 249, 178)"],
tr[style*="rgb(255,249,178)"],
tr[style*="#fff9b2"],
tr[style*="#FFF9B2"] {
    background-color: #fdf4dc !important;
}

tr[style*="rgb(255, 249, 178)"] > td,
tr[style*="rgb(255,249,178)"] > td,
tr[style*="#fff9b2"] > td,
tr[style*="#FFF9B2"] > td {
    background-color: transparent !important;
}

tr[style*="rgb(223, 230, 236)"],
tr[style*="rgb(223,230,236)"],
tr[style*="#dfe6ec"],
tr[style*="#DFE6EC"] {
    background-color: #d9edec !important;
}

/* --- Employee Full Details: Screen Cast / Terminal / video -----------------
   _middleSubSections.blade.php hardcodes blues both as style="" attributes and
   inside a @verbatim <style> block. That partial is shared by all three brands
   so it is not edited; every control there carries an id or class, and an
   !important author rule outranks an inline style, so they are re-stated here.
   -------------------------------------------------------------------------- */
#button_connect_ws,
#terminal_connect_btn,
#terminal_card .rt-send {
    background: var(--wz-teal-deep) !important;
    box-shadow: 0 2px 4px rgba(14, 126, 126, 0.25) !important;
}

.btn-test-latency {
    background: var(--wz-teal) !important;
    box-shadow: 0 2px 4px rgba(5, 164, 164, 0.25) !important;
}

#agent_connection_status {
    background: var(--wz-teal-wash) !important;
    color: #0b5d4e !important;
}

#terminal_card .rt-prompt,
#terminal_card .rt-meta,
.rt-title i.fa-terminal {
    color: var(--wz-teal) !important;
}

.video_view,
.video-controls-toggle {
    background: var(--wz-teal-deep) !important;
    background-color: var(--wz-teal-deep) !important;
}

/* Only background-image is overridden: EmployeeFullDetails.js drives the fill
   through style.backgroundSize, and an !important background shorthand would
   reset that longhand and freeze the slider fill. */
.speed-slider {
    background-image: linear-gradient(to right, var(--wz-teal), var(--wz-teal)) !important;
}

.speed-slider::-webkit-slider-thumb {
    border-color: var(--wz-teal) !important;
}

.speed-slider::-moz-range-thumb {
    border-color: var(--wz-teal) !important;
}

.speed-slider::-moz-range-thumb:hover {
    background: var(--wz-teal) !important;
}

.autoplay-control input[type="checkbox"] {
    accent-color: var(--wz-teal);
}

/* --- Data table polish ------------------------------------------------------ */
#fetch_Details tr,
.table-responsive tbody tr {
    border-bottom: 1px solid #edf1f1;
}

#fetch_Details td,
.table-responsive tbody td {
    vertical-align: middle;
}

/* --- Dropdown (select2) selected row ----------------------------------------
   select2 ships its own blue (#5897fb highlighted, #ddd selected), which reads
   as off-brand. Repaint both in the Workstatz teal colour.

   This only reaches <select>s initialised as select2. A native <select> popup is
   drawn by the OS and takes the system accent colour - CSS cannot touch it, so a
   filter has to go through select2 before it can match the theme. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wz-teal-deep);
    color: #ffffff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #e0f5f5;
    color: #2c2c2c;
    font-weight: 600;
}

.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background-color: var(--wz-teal-deep);
    color: #ffffff;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--wz-teal-deep);
}

/* --- Loading spinners -------------------------------------------------------
   Three spinners all hardcode #3498db and all win on source order over this file:
     .loader / .loaders  - plugins/bootstrap/css/loader.css, pulled in via the
                           extra-style-links section, which _layout yields AFTER
                           the theme stylesheets.
     .loaderIcon         - re-declared inline in several page <style> blocks
                           (page-style is yielded later still).
   Editing loader.css directly is not an option: it is shared with EmpMonitor and
   Silah. Prefixing with `body` raises specificity to (0,1,1) so the brand colour
   wins regardless of load order, without touching the shared plugin file. */
body .loader,
body .loaders {
    border-top-color: var(--wz-teal-deep);
}

body .loaderIcon {
    border-top-color: var(--wz-teal-deep);
    border-bottom-color: var(--wz-teal-deep);
}

/* #cover-spin is the full-page overlay spinner, used across 13 views. Its colour
   is declared 12 times - #057dca in livemonitor.css and plain black in the inline
   <style> of several report/attendance views - so it never matched the brand. The
   id gives those rules (1,0,0); prefixing with `body` gives (1,0,1) and wins over
   all of them. border-top-color stays transparent: that gap is what makes the
   ring read as a spinning arc. */
body #cover-spin::after {
    border-color: var(--wz-teal-deep);
    border-top-color: transparent;
}

/* --- Date range picker ------------------------------------------------------
   daterangepicker.css hardcodes #08c for the selected range in the left-hand list
   and #357ebd / #ebf4f8 for selected and in-range calendar days. It is loaded in
   _header before the theme files, BUT four views (emp_attendance, employee_attendance,
   trackUserSetting, web_app_usage) also pull it from a CDN in extra-style-links,
   which _layout yields AFTER the theme. Prefixing with `body` raises specificity so
   the brand colour wins in both cases. Colour matches the select2 highlight so
   dropdowns and the calendar read as one set. */
body .daterangepicker .ranges li.active {
    background-color: var(--wz-teal-deep);
    color: #ffffff;
}

body .daterangepicker .ranges li:hover {
    background-color: var(--wz-teal-wash);
}

body .daterangepicker td.active,
body .daterangepicker td.active:hover {
    background-color: var(--wz-teal-deep);
    border-color: transparent;
    color: #ffffff;
}

body .daterangepicker td.in-range {
    background-color: var(--wz-teal-wash);
    color: #2c2c2c;
}