/* Custom Css added 05-Oct-2021 */
/*:root {
    --menutheme: #800F2F;
    --menuthemelight : #c5909a;
    --menuactive:#e9768c;
    --menulight:#ba5b78cf;
    --menucol2:#A4133C;
    --circleicon : #640c251f;

    --gridrowlight: #fffafb;
    --gridhover:#f2f9ff;
    --gridpager:#858585;
    
    --btnPrimary:#1ab394;
    --btnsuccess:#1a7bb9;
    --btndenger:#ec4758;
    
    --grey: #BABFC7;   
    --greylight:#E5E6E7;
    --greyheader: #f5f5f5;
    --inputgroup:#dfdfdf;

    --black:#181D1F;
    --white:#ffffff;
    
}*/

body {
    background-color: var(--menutheme);
}

.bgOverlay {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #cccccc66;
    z-index: 9999;
}

.input-group.date .input-group-addon {
    border-right: 1px solid var(--greylight) !important;
    border-left: 0;
}

.form-control:focus, .single-line:focus {
    /*border-color: var(--menuactive);*/
}

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 7px;
    background-color: var(--menuthemelight);
    color: #FFFFFF;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--menuthemelight);
    border-radius: 3px;
}

.onoffswitch-switch {
    display: block;
    width: 18px;
    margin: 0;
    background: #FFFFFF;
    border: 2px solid var(--menuthemelight);
    border-radius: 3px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 36px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

/* PQ Grid Styles ------------- */
.pq-grid .fa {
    font-family: FontAwesome !important;
}

.ui-widget-header {
    text-transform: capitalize;
}

.pq-grid .spnEdit {
    cursor: pointer;
}

.pq-cont-inner {
    font-size: 12px !important;
}

.pq-header-outer, .pq-header-outer .pq-cont-inner {
    background: var(--greyheader) !important;
    border-bottom: 1px solid var(--grey) !important;
}



.pq-grid-row {
    /*background: #f8f8f8 !important;*/
    background: var(--gridrowlight) !important;
    color: var(--black) !important;
    font-size: 12px !important;
}

    .pq-grid-row.pq-striped {
        background: var(--white) !important;
    }

.pq-state-select.pq-striped, .pq-striped > .pq-grid-cell-hover, .pq-grid-row-hover.pq-striped {
    background: #d9e8f4 !important;
}

.pq-grid-cell-hover.ui-state-hover, .pq-grid-row-hover.ui-state-hover {
    background: var(--gridhover) !important;
}

.pq-no-wrap > .pq-grid-row > .pq-grid-cell, .pq-no-wrap > .pq-grid-row > .pq-grid-col > .pq-td-div {
    padding-top: 5px;
}

.pq-no-wrap > .pq-grid-row > .pq-grid-col > .pq-td-div {
    padding-top: 7px;
}

.pq-grid-col:hover {
    background: transparent !important;
}

.pq-filter-icon:hover, .pq-menu-icon:hover {
    opacity: 0.6 !important;
}

.pq-theme .ui-state-default, .pq-theme .ui-button {
    background-image: none !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: transparent !important;
}

span.spnDetail {
    font-size: 14px !important;
    border: 1px solid var(--grey);
    padding: 2px 5px;
    display: inline-block;
    margin-top: -2px;
}

.pq-grid .spnEdit {
    font-size: 16px;
    cursor: pointer;
    border: 1px solid var(--grey);
    padding: 1px 5px;
}

.pq-tabs .pq-grid-cell {
    padding-top: 0px !important;
}

.pq-focus, .pq-grid-row > .pq-grid-cell.pq-focus, .pq-grid-row > .pq-grid-col.pq-focus {
    outline: 1px solid #e5e5e5 !important;
}

/* PQ Grid Styles End------------- */

.main-title {
    font-size: 16px;
    text-transform: uppercase;
}

.ibox-tools {
    right: 8px !important;
    margin-top: 60px;
}

.ibox-content {
    padding: 0px;
}

.ibox-cust-content {
    padding: 15px 20px 20px 20px;
}

.pager-icon {
    font-size: 21px !important;
    color: var(--gridpager);
}

.pager-refresh-icon {
    font-size: 18px !important;
}

.pq-page-display, .pq-page-total, .pq-page-select, .pq-page-current {
    font-size: 13px !important;
}

.rdo-self-team, .rdo-outer-border {
    border: 1px solid var(--inputgroup);
    margin-right: 4px;
    padding: 10px 15px 0px 15px;
    min-width: 120px;
    display: inline-block;
    white-space: nowrap;
}

    .rdo-self-team label, .rdo-outer-border label {
        padding-left: 3px;
    }

.rdo-self-team-p10 {
    padding: 10px 15px 10px 15px;
}

.spnnote {
    font-size: 11px;
    color: #23c6c8;
    font-style: italic;
    font-weight: 500;
}

#page-wrapper {
    padding: 0
}

.ibox, .ibox-title, .ibox-content {
    border: none;
}

.Select-Msg {
    align-self: center;
    font-size: 20px;
    color: #bfbfbf;
    text-align: center;
}

.fa-5x {
    font-size: 150px !important;
}

.fa-eye,
.fa-download {
    color: #1982c4 !important;
}

.fa-eye-white {
    color: #ffffff !important;
}

.fa-download-black {
    color: #1c1c1c !important;
}

.pq-state-select.ui-state-highlight {
    background: #deeefa !important;
}

.pq-select-button > .pq-icon {
    margin-top: 7px !important;
}

/*.pq-select-text > .pq-select-item {
    line-height: 15px !important;
}*/

.pq-select-single .ui-icon-close {
    display: none;
}

/*-- Material Lite ---*/
.mdl-li {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    color: inherit !important;
}

.height-inherit {
    height: inherit !important;
}

.mdl-button.btn-primary {
    color: var(--white) !important;
    background-color: var(--btnPrimary) !important;
    border-color: var(--btnPrimary) !important;
}

.mdl-button.btn-success {
    color: var(--white) !important;
    background-color: var(--btnsuccess) !important;
    border-color: var(--btnsuccess) !important;
}

.mdl-button.btn-danger {
    color: var(--white) !important;
    background-color: var(--btndenger) !important;
    border-color: var(--btndenger) !important;
}

/*--------------*/

.animated-tabs .tab-pane {
    padding: 15px 0px;
}

.animated-tabs .nav-tabs {
    position: relative;
    border: none !important;
    background-color: var(--white);
    /*   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); */
    border-radius: 6px;
    display: inline-block;
    text-transform: uppercase;
    white-space: nowrap;
}

    .animated-tabs .nav-tabs li {
        margin: 0px !important;
    }

        .animated-tabs .nav-tabs li a {
            position: relative;
            margin-right: 25px !important;
            padding: 10px 0px 10px 0px !important;
            font-size: 14px;
            border: none !important;
            color: #333;
        }

    .animated-tabs .nav-tabs a:hover {
        background-color: var(--white) !important;
        border: none;
    }

.animated-tabs .slider {
    display: inline-block;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--menutheme);
    position: absolute;
    z-index: 1200;
    bottom: 0;
    transition: left .2s ease;
}

.animated-tabs .nav-tabs .active {
    background-color: transparent !important;
    border: none !important;
    color: var(--menutheme) !important;
}

/*-- Material Lite ---*/
.mDDl {
    color: inherit !important;
    text-align: center;
    padding: 10px 5px;
}

    .mDDl i {
        float: left;
        /* padding-right:5px;*/
    }

    .mDDl a {
        font-size: 13px;
        /* padding: 10px !important;*/
        color: inherit !important;
        padding-left: 8px;
    }


/* ----------- Drawer -----------*/
.drawer {
    height: 85vh;
    z-index: 2101 !important;
}

.fixed-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: #e8ebf3 !important;
}


.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    padding-right: 15px !important;
}

.drawer-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #00000038;
    z-index: 2100;
}

.drawer.fold {
    display: none;
}

    .drawer.fold.open {
        display: block !important;
    }

.drawer-overlay {
    display: none;
}

    .drawer-overlay.open {
        display: block;
    }

.drawer-contents {
    background-color: #fff !important;
}
/* ----------- Menu-----------*/
.navbar-default {
    position: fixed;
}

.sidebar-collapse li {
    background: #2F4050;
    width: 100%;
}

#page-wrapper {
    margin-left: 70px;
    width: calc(100% - 70px);
}

/* ------------- Header Color -------------*/
.navbar-fixed-top, .navbar-static-top {
    background-color: var(--white);
}

/* ---------------- Top Profile ---------------*/
.top-profile img {
    width: 26px;
    height: 26px;
    cursor: pointer;
}

/* ---------------- Others ---------------*/
.link-ctrl {
    color: #1c84c6 !important;
}

.link-dot-underline {
    color: #1c84c6 !important;
}

    .link-dot-underline:hover {
        text-decoration: underline !important;
        text-decoration-style: dotted !important;
    }

.disable-link {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    pointer-events: none;
}

.btn {
    text-transform: uppercase;
}

.modal-body {
    padding: 20px 20px 20px 20px;
    overflow-x: hidden;
}

.modal-header, .modal-footer {
    padding: 10px 20px;
}




/*---------- For Small Button for toggle ------
*/


/*-------------Blue----------------*/

/*---------- For Header ----------*/
.navbar-fixed-top, .navbar-static-top {
    background-color: #fafcff;
    /* color: #fff; */
}

/*.btn-primary {*/
/* color: #fff; */
/*background-color: #80b5e3;
    border-color: #5494cb;
}*/

/*---------- For Menu ----------*/

body.mini-navbar .nav-header {
    padding: 0;
    background-color: #0096C7; /*Ice blue*/
}

.sidebar-collapse li {
    background: #023E8A; /*body*/
    width: 100%;
}

.navbar-header a {
    color: var(--white);
    background-color: #0096C7; /*for collpase Header*/
    border-color: #0096C7;
}

.nav > li.active {
    border-left: 4px solid #9ec7e5;
    background: #588dbf !important;
}

/*Marron*/

.navbar-fixed-top, .navbar-static-top {
    background-color: var(--gridrowlight);
    /* color: var(--white); */
}

.navbar-header a {
    color: var(--white);
    background-color: var(--menuthemelight);
    border-color: var(--menuthemelight);
}

body.mini-navbar .nav-header {
    padding: 0;
    background-color: var(--menuthemelight); /*light link*/
}

.sidebar-collapse li {
    background: var(--menutheme); /*body*/
    width: 100%;
}

.navbar-header a {
    color: var(--white);
    background-color: var(--menuthemelight); /*for collpase Header*/
    border-color: var(--menuthemelight);
}

.nav > li.active {
    border-left: 4px solid var(--menuactive);
    background: #e5c8cc !important;
}

.metismenu {
    background: var(--menutheme);
}

.pace .pace-progress {
    background: var(--menutheme);
}

.comp-logo {
    width: 140px;
}

.assignHrIcon {
    font-size: 20px;
}

.disable-form input, .disable-form select {
    pointer-events: none;
    border: none;
    font-weight: bold;
    padding-left: 0;
    border-bottom: 1px dashed var(--circleicon);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

    .disable-form input::-webkit-input-placeholder {
        color: transparent;
    }

.disable-form label {
    pointer-events: none;
    margin: 8px 0 0 0;
}

/*.disable-form .ibox-footer {
    display:none;
}*/

.close-popup-btn {
    width: 92.5097px;
    height: 92.5097px;
    transform: translate(-50%, -50%) translate(16px, 13px);
}

.custom-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
    font-weight: 600;
}

.lapsed-label {
    background-color: var(--greydark);
    color: white;
}

/*#page-wrapper {
    min-height: 90vh !important;
}*/

#page-wrapper {
    min-height: 100vh !important;
}

/* -------- Full Screen Modal Start ---------------- */
@media (max-width: 575.98px) {
    .modal-fullscreen {
        padding: 0 !important;
    }

        .modal-fullscreen .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 767.98px) {
    .modal-fullscreen-sm {
        padding: 0 !important;
    }

        .modal-fullscreen-sm .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen-sm .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-sm .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 991.98px) {
    .modal-fullscreen-md {
        padding: 0 !important;
    }

        .modal-fullscreen-md .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen-md .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-md .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 1199.98px) {
    .modal-fullscreen-lg {
        padding: 0 !important;
    }

        .modal-fullscreen-lg .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100% !important;
            margin: 0;
        }

        .modal-fullscreen-lg .modal-content {
            height: 100% !important;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-lg .modal-body {
            overflow-y: auto;
        }
}

.modal-fullscreen-xl {
    padding: 0 !important;
}

    .modal-fullscreen-xl .modal-dialog:not(.md-avoid-full .modal-dialog) {
        width: 100%;
        max-width: none;
        height: 100% !important;
        margin: 0;
    }

    .modal-fullscreen-xl .modal-content:not(.md-avoid-full .modal-content) {
        height: 100% !important;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-xl .modal-body:not(.md-avoid-full .modal-body) {
        overflow-y: auto;
    }

    .modal-fullscreen-xl .modal-dialog-scrollable:not(.md-avoid-full .modal-dialog-scrollable) {
        max-height: calc(100%) !important;
    }

/* -------- Full Screen Modal End ---------------- */


.pq-select-text > .pq-select-item {
    border: 1px solid var(--greylight);
    float: left;
    margin-right: 4px !important;
    background: #f1f1f1 !important;
    border-radius: 2px;
    padding: 4px 5px 3px 5px !important;
    margin-top: 0px !important;
}

.pq-select-item > .ui-icon-close {
    float: right;
    cursor: pointer;
    margin: -1px 0px 0px 10px;
    color: #c4c4c4;
}

div.pq-select-menu > .pq-select-option-label, .pq-select-popup label {
    padding: 6px !important;
}

.ui-widget-header {
    background-color: #ededed !important;
    border: none !important;
    background: #ededed !important;
}

.pq-select-search-input {
    padding: 6px 4px !important;
    margin: 4px;
}

    .pq-select-search-input:focus {
        border: 1px solid #1ab394;
    }

.pq-select-search-div > .ui-icon {
    display: none;
}

.pq-select-all > .ui-icon-close {
    float: right;
    cursor: pointer;
    margin: -1px 0px 0px 10px;
    color: #c4c4c4;
}

.pq-select-search-div > .ui-icon {
    float: right;
    cursor: pointer;
    margin: 8px 4px 2px 0px;
    color: #c4c4c4;
}

.pq-select-multiple {
    height: auto;
    padding: 2px 2px 3px 11px !important;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0 !important;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0 !important;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0 !important;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0 !important;
}

div.pq-select-button {
    box-shadow: none !important;
}

.pq-select-text {
    line-height: 26px !important;
    padding: 0px;
}

.pq-select-search-div1 {
    height: 45px;
    margin-left: 2px !important;
    margin-right: 4px !important;
}

.ui-widget-content, .pq-select-text {
    color: inherit !important;
}

.ui-icon-arrowthick-1-s {
    top: 9px !important;
    right: 4px !important;
}

input.pq-grid-hd-search-field.ui-corner-all {
    margin-top: -4px;
    line-height: 21px;
}

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--greylight) !important;
    border-radius: 0px;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: inherit;
        color: inherit;
    }

.select2-container .select2-selection--single {
    height: 35px !important;
}

.select2-container .select2-search--inline .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0px !important;
}

.nav-menu {
    margin-top: 0px !important;
    z-index: 2050 !important;
}

/* Circle Progress Bar  */
.progress-circle {
    width: 150px;
    height: 150px;
    background: none;
    position: relative;
}

    .progress-circle::after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 15px solid #eee;
        position: absolute;
        top: 0;
        left: 0;
    }

    .progress-circle > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .progress-circle .progress-left {
        left: 0;
    }

    .progress-circle .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 15px;
        border-style: solid;
        position: absolute;
        top: 0;
    }

    .progress-circle .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    .progress-circle .progress-right {
        right: 0;
    }

        .progress-circle .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 80px;
            border-bottom-left-radius: 80px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
        }

    .progress-circle .progress-value {
        position: absolute;
        top: 0;
        left: 0;
    }

    .progress-circle sup {
        top: -0.8em;
    }

        .progress-circle sup.small {
            font-size: 55%;
            font-weight: 400;
        }

/*------------------------------------notification----------------------------*/
.appr-menu {
    cursor: pointer;
    align-items: center;
    /*margin-bottom: 20px;*/
    border: 1px solid rgb(28 28 28 / 40%);
    width: 4rem;
    padding: 12px;
    border-radius: 16px;
}

    .appr-menu:hover {
        background-color: #e7e7e7;
    }

    .appr-menu .menu-title {
        color: #1c1c1c;
        font-size: 18px;
        margin: 0;
    }

    .appr-menu .notify-img {
        width: 3rem;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        border-radius: 50%;
        font-weight: 600;
    }

.notify-title {
    background-color: #ccd5f0;
}

.notify-clr-purple {
    background: #EFD6F5;
    color: #9E65DB;
}

.notify-clr-pink {
    background: #FBD0E7;
    color: #F0409F;
}

.notify-clr-red {
    background: #FFCCCC;
    color: #FF6C6C;
}

.notify-clr-blue {
    background: #CEE1FD;
    color: #3683F6;
}

.notify-clr-orange {
    background: #FBDFD0;
    color: #F1874B;
}

.notify-clr-yellow {
    background: #FDEDCE;
    color: #F4A60B;
}

.notify-clr-green {
    background: #afffaf7d;
    color: #00800094;
}

.notify-clr-brown {
    background: #d8cab8a8;
    color: #5d40378c;
}

.notify-clr-teal {
    background: #E0F2F1;
    color: #00796b91;
}

.notify-clr-cyan {
    background: #E0F7FA;
    color: #00acc1ab;
}

.notify-clr-indigo {
    background: #E8EAF6;
    color: #3F51B5;
}

.notify-clr-lime {
    background: #F9FBE7;
    color: #C0CA33;
}

.notify-clr-purple-dark {
    background: #D1C4E9;
    color: #512DA8;
}

.notify-clr-amber {
    background: #FFF8E1;
    color: #FFC107;
}

.notify-clr-magenta {
    background: #d81b601f;
    color: #d81b60bd;
}

.notify-clr-sky {
    background: #E1F5FE;
    color: #039be5b5;
}

.notify-clr-chocolate {
    background: #DABF9D;
    color: #6D4C41;
}

.notify-clr-rose {
    background: #FCE4EC;
    color: #c2185b94;
}

.notify-clr-gold {
    background: #FFF5D9;
    color: #F5C300;
}


.appr-menu .badge {
    width: 3rem;
    border-radius: 12px;
    height: 24px;
    padding: 6px 0;
    text-align: center;
    margin-left: 4px;
}
/*----------for-empty-screen-----------------------*/
.noify-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

    .noify-empty-state img {
        width: 25rem;
        height: 20rem;
        margin-top: 6rem;
    }

    .noify-empty-state h3 {
        font-size: 23px;
        border: 2px dashed var(--inputgroup);
        padding: 2rem;
        width: 24rem;
        text-align: center;
        color: gray;
    }

/*----------for-empty-screen-----------------------*/
/*------------------------------------notification----------------------------*/
/* ------------- Footer --------------- */
.footer.fixed {
    padding: 5px 10px;
    margin-left: 0px;
}

body.mini-navbar .footer.fixed, body.body-small.mini-navbar .footer.fixed {
    margin: 0px;
}

.myFooter, .footer-button {
    margin-left: 70px !important;
    padding-left: 8px !important;
    bottom: 30px !important;
    background: #e8ebf3 !important;
    width: 100%;
}

.field-validation-valid {
    flex: 100%;
}

#emptyStateFillImg {
    content: url('../../Images/Empty_state_v2.png') !important;
    height: 60vh !important;
    width: 60vh !important;
}

.empty-text {
    padding: 40px;
    border: 2px dashed var(--inputgroup);
    font-size: 20px !important;
    margin-top: 20vh;
    border-radius: 4%;
    display: inline-block;
}

.empty-text-highlight {
    color: #dc3545;
}

#emptyStateFillImgAppr {
    content: url('../../Images/EMPTY/Approval_Empty_State.png') !important;
    height: 253px !important;
    width: 370px !important;
    /*margin-left: 200px !important;*/
    margin-top: 50px !important;
    object-fit: cover !important;
}

.empty-text-Appr {
    padding: 20px;
    border: 2px dashed var(--inputgroup);
    font-size: 20px;
    border-radius: 4%;
    display: inline-block;
    /*margin-left: 150px !important;*/
}

.circle-icon {
    background: var(--circleicon);
    padding: 15px;
    border-radius: 50%;
}

.box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

    .box > * {
        flex: 1 1 160px;
    }

/*---------------- Empty Skeleton Loader ----------*/

.skeleton-l7b3rudr5mu:empty {
    position: relative;
    height: 100%;
    background-color: var(--white);
    border-radius: 0px 0px 0px 0px;
    background-image: linear-gradient( #F5F7F9 15px, transparent 0 ),linear-gradient( #F5F7F9 15px, transparent 0 ),linear-gradient( #F5F7F9 15px, transparent 0 ),linear-gradient( #F5F7F9 10px, transparent 0 ),linear-gradient( #F5F7F9 10px, transparent 0 ),radial-gradient( circle 20px at 20px 20px, #F5F7F9 99%, transparent 0 );
    background-repeat: repeat-y;
    background-size: 43% 133px,90% 133px,74% 133px,200px 133px,200px 133px,40px 133px;
    background-position: 12px 119px,12px 92px,12px 67px,59px 39px,57px 21px,15px 12px;
}

    .skeleton-l7b3rudr5mu:empty:before {
        content: ' ';
        position: absolute;
        z-index: 1000;
        width: 100%;
        height: 95vh;
        -webkit-mask-image: linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% );
        -webkit-mask-repeat: repeat-y;
        -webkit-mask-size: 50px 500px;
        -webkit-mask-position: -20% 0;
        background-image: linear-gradient( rgba(224,224,224,1) 15px, transparent 0 ),linear-gradient( rgba(224,224,224,1) 15px, transparent 0 ),linear-gradient( rgba(224,224,224,1) 15px, transparent 0 ),linear-gradient( rgba(224,224,224,1) 10px, transparent 0 ),linear-gradient( rgba(224,224,224,1) 10px, transparent 0 ),radial-gradient( circle 20px at 20px 20px, rgba(224,224,224,1) 99%, transparent 0 );
        background-repeat: repeat-y;
        background-size: 43% 133px,90% 133px,74% 133px,200px 133px,200px 133px,40px 133px;
        background-position: 12px 119px,12px 92px,12px 67px,59px 39px,57px 21px,15px 12px;
        animation: shineForSkeleton-l7b3rudr5mu 2s infinite;
    }

@keyframes shineForSkeleton-l7b3rudr5mu {
    to {
        -webkit-mask-position: 120% 0
    }
}

.skeleton-container {
    margin-left: 70px;
}


/*-------------------------*/

#secondaryMenu {
    left: 70px;
    position: absolute;
}

    #secondaryMenu .nav.metismenu {
        height: 95vh;
    }

/*
#secondaryMenu Menu.sidebar-collapse li {
    background: #9c455e;
}

#secondaryMenu .navbar-static-side {
    width: 220px !important;
}

body.mini-navbar .profile-element, body.mini-navbar .nav-label, body.mini-navbar #secondaryMenu .navbar-default .nav li a span{
    display:block;
}

body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar #secondaryMenu .nav-second-level {
    display: block;
}

*/
/*-------------------- */
.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
    font-size: 12px;
    border-radius: 3px;
}

.mini-navbar .navbar-static-side {
    width: 70px;
}

.mini-navbar .profile-element,
.mini-navbar .nav-label,
.mini-navbar .navbar-default .nav li a span {
    display: none;
}

.mini-navbar .navbar-default .nav > li > a {
    font-size: 16px;
}

.mini-navbar .logo-element {
    display: block;
}

.mini-navbar .nav-header {
    padding: 0;
    background-color: var(--menulight);
}

.mini-navbar #page-wrapper {
    width: calc(100% - 70px);
}

.mini-navbar .footer.fixed,
.body-small.mini-navbar .footer.fixed {
    margin: 0 0 0 70px;
}

.mini-navbar.fixed-sidebar .footer.fixed {
    margin: 0;
}

.mini-navbar.canvas-menu .footer.fixed,
.canvas-menu .footer.fixed {
    margin: 0 !important;
}

.mini-navbar .branding {
    display: none;
}

.mini-navbar.fixed-sidebar .profile-element,
.block {
    display: block !important;
}

.mini-navbar.fixed-sidebar .nav-header {
    padding: 33px 25px;
}

.mini-navbar.fixed-sidebar .logo-element {
    display: none;
}


#secondaryMenu #side-menu .sec-menu-top {
    padding: 0px 5px;
    margin: 8px 0px 30px 0px;
}

    #secondaryMenu #side-menu .sec-menu-top i {
        color: white;
        font-size: 15px;
        float: right;
        cursor: pointer;
    }

        #secondaryMenu #side-menu .sec-menu-top i:hover {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }

    #secondaryMenu #side-menu .sec-menu-top .nav-comp-logo {
        width: 140px;
        margin-left: 20px;
        object-fit: contain;
    }

#secondaryMenu .nav-second-level li a {
    /*padding-left: 40px;*/
    padding-left: 28px;
}

#secondaryMenu .nav-third-level li a {
    padding-left: 48px;
}

#secondaryMenu .sidebar-collapse li, #secondaryMenu .metismenu, .mini-navbar .nav-header {
    background: var(--menucol2);
}

#secondaryMenu #side-menu .menu-title {
    color: var(--white);
    margin-left: 20px;
    padding: 8px;
    padding-bottom: 20px;
    font-weight: 600 !important;
    font-size: 14px !important;
}

#secondaryMenu #side-menu .nav > li > a {
    color: var(--white);
    font-weight: normal;
}

#secondaryMenu #side-menu .metismenu .arrow {
    margin-right: 2px;
}

.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus {
    background-color: var(--menulight);
}

.nav > li.active {
    border-left: 4px solid var(--menuactive);
    background: var(--menulight) !important;
}


#secondaryMenu .nav-menu {
    z-index: 2049 !important;
}

#secondaryMenu.sec-navbar-show {
    left: 70;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

#secondaryMenu.sec-navbar-hide {
    left: -220;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

/*------------- Top Nav Bar ---------------- */

body.fixed-nav #wrapper .navbar-static-side, body.fixed-nav #wrapper #page-wrapper {
    margin-top: 0px;
}

.nav-bg .navbar-fixed-top, .nav-bg .navbar-static-top {
    background: var(--topnavalt);
    height: 52px;
}

.company-title {
    padding: 10px;
}

.navbar .nav-options {
    margin-right: 15px;
    /*color: var(--white);*/
}

.nav-options .input-group-search {
    border-radius: 6px 0 0 6px;
}

.nav-options .fa-search {
    color: #676a6c;
}

.nav-options .nav-img {
    object-fit: contain;
    width: 100px;
    margin: 9px 0 0 0;
    background-color: white;
}

.nav-options .input-search {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 400px;
    border-radius: 0 6px 6px 0;
    height: 30px !important;
}


.nav-options .nav-profile {
    width: 28px;
    height: 28px;
    background: #d5d5d5;
    border-radius: 50%;
    text-align: center;
}

.navbar .nav-right-icons {
    margin-left: auto;
    display: flex;
}


#hrHome .icon-menubar {
    justify-content: space-evenly;
}

    #hrHome .icon-menubar .material-icons-outlined, #hrHome .icon-menubar .fa {
        vertical-align: middle;
        margin-right: 8px;
    }

    #hrHome .icon-menubar .fa {
        font-size: 20px;
    }

#hrHome .ibox-title {
    padding: 5px;
    min-height: 0;
}

#hrHome .icon-menubar .menu-item {
    /*padding: 5px 10px 5px 5px;*/
    padding: 5px 0px 1px 0px;
    cursor: pointer;
}

#hrHome .icon-menubar .menu-item-active {
    /*background-color: #ffebf7;
    border-radius: 7px;
    color: #81072f;*/
    font-weight: 600;
    border-bottom: 4px solid var(--menucol2);
}

    #hrHome .icon-menubar .menu-item-active .fa {
        color: #81072f;
        padding-bottom: 4px;
    }

    #hrHome .icon-menubar .menu-item-active .text-uppercase {
        color: var(--black);
    }


#hrHome .ibox-content {
    padding: 15px;
}

#hrHome .ibox-content-title {
    color: #1c1c1c;
}

#hrHome .app-container {
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 9px 9px; /* [row-gap] [column-gap]*/
}

    #hrHome .app-container .app-card {
        width: 350px;
        border: 1px solid #f1f3f5;
        border-radius: 5px;
        /* padding: 10px;*/
        position: relative;
        min-height: 220px;
    }

        #hrHome .app-container .app-card a {
            text-decoration: none;
            color: inherit;
        }

        #hrHome .app-container .app-card .app-menu {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
        }

        /*.app-menu-show*/
        #hrHome .app-container .app-card .app-menu-show {
            opacity: 1;
            visibility: visible;
            left: 0;
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            -ms-transition: 1s;
            transition: 1s;
            z-index: 1;
        }

        /*.app-menu-hide*/
        #hrHome .app-container .app-card .app-menu-hide {
            opacity: 0;
            visibility: hidden;
            left: -240px;
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            -ms-transition: 1s;
            transition: 1s;
            z-index: -1;
        }


        #hrHome .app-container .app-card .app-icon {
            padding: 10px;
        }

        #hrHome .app-container .app-card .app-label {
            color: #494949;
            display: inline-block;
        }

        #hrHome .app-container .app-card .app-icon img {
            object-fit: contain;
            background-color: #f5f5f5;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ededed;
        }

        #hrHome .app-container .app-card .app-desc {
            color: #777777;
            padding: 0 10px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #hrHome .app-container .app-card .app-link {
            /*   position: absolute;
            bottom: 5px;*/

            position: absolute;
            bottom: 0px;
            padding: 5px 10px;
            width: 100%;
            background: aliceblue;
        }

        #hrHome .app-container .app-card:hover {
            box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
        }

        #hrHome .app-container .app-card .app-link .material-icons-outlined {
            vertical-align: middle;
        }

        #hrHome .app-container .app-card .app-link a {
            color: #337ab7;
        }


#wrapper {
    /*overflow-x: visible; change by Amol on 14-Jan-2026 to solve the screen drag issues. Ref SCH Task 11384*/
    overflow-x: clip;
}

/*-----context menu ------ */
:root {
    --color-bg-primary: #d0d6df;
    --color-bg-primary-offset: #f1f3f7;
    --color-bg-secondary: #fff;
    --color-text-primary: #3a3c42;
    --color-text-primary-offset: #898c94;
    --color-orange: #FF6347;
    --color-green: #228B22;
    --color-purple: #9665c4;
    --color-black: var(--color-text-primary);
    --color-red: #d92027;
    --color-black: #000;
    --internal-light-dark: #f00;
}

.menu {
    display: flex;
    position: absolute;
    flex-direction: column;
    background-color: var(--color-bg-secondary);
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
    top: 10;
    left: 10;
    width: 248px;
}

    .menu.settings {
        width: 300px !important;
    }

.menu-list {
    margin: 0;
    display: block;
    width: 100%;
    padding: 8px;
}

.menu-list, ul {
    list-style-type: none;
}

    .menu-list + .menu-list {
        border-top: 1px solid #ddd;
    }

.menu-sub-list {
    display: none;
    padding: 8px;
    background-color: var(--color-bg-secondary);
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
    position: absolute;
    left: 100%;
    right: 0;
    z-index: 100;
    width: 100%;
    top: 0;
    flex-direction: column;
}

    .menu-sub-list:hover {
        display: flex;
    }

.menu-item {
    position: relative;
}

.menu-button {
    font: inherit;
    color: inherit;
    outline: none;
    border: 0;
    padding: 8px 8px;
    width: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--color-bg-secondary);
}

    .menu-button:hover {
        background-color: var(--color-bg-primary-offset);
    }

        .menu-button:hover + .menu-sub-list {
            display: flex;
        }

        .menu-button:hover svg {
            stroke: var(--color-text-primary);
        }

            .menu-button:hover svg.fa {
                color: var(--color-text-primary);
            }

.menu-item span {
    text-align: left;
}

.context-button:hover svg.fa {
    color: var(--color-text-primary);
}

.menu-button svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    stroke: var(--color-text-primary-offset);
}

    .menu-button svg.fa {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        color: var(--color-text-primary-offset);
    }

.context-button svg.fa {
    height: 30px;
    margin-right: 10px;
    color: var(--color-text-primary-offset);
}

.menu-button svg:nth-of-type(2) {
    margin-right: 0;
    position: absolute;
    right: 8px;
}

.menu-button span:nth-of-type(2) {
    margin-right: 0;
    position: absolute;
    right: 8px;
    font-size: x-small;
}

.menu-button span.second {
    color: var(--color-text-primary-offset);
    font-size: small;
    margin-left: 5px;
}

.menu-button.tor span:nth-of-type(1) {
    color: var(--color-text-primary-offset);
    font-size: small;
    margin-left: 5px;
}

.menu-button--delete:hover {
    color: var(--color-red);
}

    .menu-button--delete:hover svg:first-of-type {
        stroke: var(--color-red);
    }

.menu-button--orange svg:first-of-type {
    stroke: var(--color-orange);
    color: var(--color-orange);
}

.menu-button--green svg:first-of-type {
    stroke: var(--color-green);
}

.menu-button--purple svg:first-of-type {
    stroke: var(--color-purple);
}

.menu-button--black svg:first-of-type {
    stroke: var(--color-black);
}

.menu-button--checked svg:nth-of-type(2) {
    stroke: var(--color-purple);
}

/*Google Material Icon Offline Start*/
/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    /*src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');*/
    src: url('../../lib/materialicons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
/*Google Material Icon Offline End*/

table.dataTable thead th, table.dataTable thead td {
    /* padding: 5px 5px !important;*/
    border: 1px solid #c9c9c9;
    font-size: 13px;
}

table.dataTable tbody td {
    padding: 5px 10px !important;
    font-size: 13px;
}

table.dataTable thead th {
    border-bottom: 0px !important;
}

table.dataTable thead td {
    padding: 5px 5px !important;
    border-bottom: 0px !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 0px !important;
}

.top-navbar-container .typeahead__container {
    font: inherit;
}

.top-navbar-container .typeahead-desc {
    color: #5f6368ff !important;
    font-size: 13px;
}

.top-navbar-container .typeahead-title {
    font-weight: 600;
    font-size: 15px;
}

    .top-navbar-container .typeahead-title strong {
        color: #181D1F !important;
        text-decoration: underline;
    }

.top-navbar-container .typeahead__list {
    background-color: var(--topnavalt);
}

.top-navbar-container .mdl-menu__container {
    margin-right: 20px;
    width: 270px !important;
}

    .top-navbar-container .mdl-menu__container.is-visible .mdl-menu__outline {
        width: 270px !important;
    }

.top-navbar-container .mdl-menu {
    width: 270px !important;
}

.top-navbar-container .profile-item {
    padding: 7px 5px 7px 5px;
    text-align: center;
    font-size: 15px;
}

    .top-navbar-container .profile-item .email {
        font-size: 12px;
    }

    .top-navbar-container .profile-item .db-version {
        font-size: 11px;
    }

.top-navbar-container .profile-item-sep {
    border-top: 1px solid #dddddd;
    margin: 5px;
}

.top-navbar-container .profile-item-left {
    text-align: left !important;
    padding-left: 15px;
}


.top-navbar-container .top-profile-big img {
    width: 60px;
    height: 60px;
    cursor: pointer;
}


.btn.disableLRT:disabled {
    color: #fff !important;
    background-color: #626262 !important;
    border-color: #626262 !important;
}


.navbar .typeahead__list {
    height: 250px;
    overflow-y: auto;
}

.sticky-action-toolbar {
    position: -webkit-sticky;
    position: sticky;
    bottom: 30px;
    padding: 5px;
    pointer-events: auto;
    background-color: #e0e0e0e3;
    z-index: 10;
    /*border-radius: 4px;*/
}

/*
    textarea count custom plugin related css
*/
.textarea-count {
    float: right;
    padding: 0.1rem 0 0 0;
    font-size: 0.875rem;
}

.textarea-count-max {
    color: #ff0000c2
}

.disableSelection {
    cursor: not-allowed;
}

::placeholder {
    color: #313131 !important;
    opacity: 0.4 !important;
}

::-ms-input-placeholder { /* Edge 12 -18 */
    color: #313131 !important;
    opacity: 0.4 !important;
}

.a-link {
    color: #006699;
}

.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month {
    font-size: 16px;
}

    .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
        font-size: 15px;
    }

.cal-icon-addon {
    height: 36px;
    padding: 4px !important;
    width: 2.5rem;
}

    .cal-icon-addon .fa {
        font-size: 12px;
    }

    .cal-icon-addon .day {
        display: block;
        font-size: 10px;
        font-weight: 600;
        padding: 4px;
        color: #0da3ff;
    }

.sticky-tab-header {
    position: sticky !important;
    top: 8.02rem;
    width: 100%;
    /* background: white; */
    z-index: 2;
    height: 56px;
    border-radius: 0 !important;
}

    .sticky-tab-header .slider {
        bottom: 15px;
    }

/*--------------height adjustment------------------------*/

.sticky-pagetitle {
    position: sticky;
    top: 53px;
    z-index: 1210;
    border-bottom: 8px solid #f3f3f4;
}

.sticky-topheader {
    position: sticky;
    top: 0;
    z-index: 1211;
}

Li a i {
    padding-right: 5px;
}
/*--------------height adjustment------------------------*/

/* Style the scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

    ::-webkit-scrollbar:horizontal {
        height: 8px;
    }

/* Style the scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1; /*Background of the track */
    box-shadow: inset 0 0 5px grey;
}
/*
    ::-webkit-scrollbar-track:hover {
        background-color: rgba(0, 0, 0, .05);
        -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
    }*/

/*.scrollbar-hover::-webkit-scrollbar, .scrollbar-hover::-webkit-scrollbar-button, .scrollbar-hover::-webkit-scrollbar-thumb, .scrollbar-hover::-webkit-scrollbar-track {
    visibility: hidden;
}*/


/* Style the scrollbar thumb (the part you can drag) */
::-webkit-scrollbar-thumb {
    /*background-color: #888;*/ /* Color of the thumb */
    background-color: rgba(0, 0, 0, .2);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 2px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
}

    /* Hover effect for the scrollbar thumb */
    /*::-webkit-scrollbar-thumb:hover {
        background-color: #555;*/ /* Darker color when hovering */
    /*}*/


    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .4);
        -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
    }

/*--------------------- Reduce with for Standard Filter forms or large design forms ---------------------------------*/

/*------------Custom Filter Note--------------------*/

#spnCustFilter {
    color: #006699;
    font-style: italic;
}

/*-------------Custom Filter Note-----------------*/


/* Medium devices (landscape tablets, 1280px and up) */
@media only screen and (min-width: 1280px) {
    .ibox .ibox-content:has(.width-adj:not(.d-none)), .ibox .ibox-content .width-adj-self {
        width: 80%;
    }
}

/* Extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
    .ibox .ibox-content:has(.width-adj:not(.d-none)), .ibox .ibox-content .width-adj-self {
        width: 70%;
    }
}

/* to manage with for MonthYear picker, Date Picker*/

.mnthyr-w, .date-w, .mnthDispToday, .dateDispToday, .time-w {
    max-width: 140px;
    height: 36px;
}

.input-w {
    width: 180px;
}

.grid-link {
    color: #007bff !important;
    cursor: pointer;
    text-decoration: underline dotted;
}

button[data-button="viewpass"] span {
    text-decoration: underline dotted !important;
}

/* api disclaimer starts*/

.api-disclaimer-heading {
    text-decoration: underline dotted !important;
}

.api-disclaimer > .api-disclaimer-title, .api-disclaimer > .api-disclaimer-content {
    border: 1px solid #e7eaec !important;
    color: #313131;
}

.api-disclaimer, .border-bottom {
    border-bottom: none !important;
}

.api-disclaimer-list:before {
    content: ' \2022';
    margin-right: 15px;
}

/* api disclaimer ends*/