@import url('../fonts/fonts-clearSans.css');
/* @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;700&family=Work+Sans:wght@300;400;500;700&display=swap'); */

:root {
    --bs-body-color: #6b6f82 !important;
    --bs-primary-rgb: #3178C6 !important;
}

.differentMap .gm-style-iw-c.gm-style-iw {
    top: 148px !important;
    left: 100px !important;
}

.differentMap .gm-style-iw-tc::after {
    rotate: 90deg !important;
    -webkit-filter: drop-shadow(0 4px 2px rgba(178, 178, 178, 0)) !important;
    filter: drop-shadow(0 4px 2px rgba(178, 178, 178, 0)) !important;
    scale: 0.5 !important;
    top: 56px !important;
    left: 13px !important;
    height: 30px !important;
}

.differentMap .gm-ui-hover-effect {
    display: none !important;
}

body {
    font-family: 'ClearSans', sans-serif !important;
    font-size: 0.875rem;
    font-weight: 300;
    color: #333333 !important;
    background-color: #fff;
}

.me-p8 {
    margin-right: 0.8rem !important;
}

.me-18 {
    margin-right: 18px !important;
}

strong {
    font-weight: bold !important;
}

.fw-bold {
    font-weight: 500 !important;
}

.overflowY {
    overflow-y: auto;
}

.pointer {
    cursor: pointer;
}

.text-italic {
    font-style: italic !important;
}

.pending {
    min-height: calc(100vh - 190px);
    text-align: center;
    align-items: center !important;
    font-size: 24px;
    color: #1f355c;
    font-family: 'Inter', sans-serif;
}

.noRecords {
    text-align: center;
    align-items: center !important;
    color: #666;
    margin: 5% auto;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
}

a {
    color: #3178C6 !important
}

.nav-link {
    color: #596C8C !important;
    padding: 8px 16px !important;
}

a.bg-primary {
    color: #FFF !important
}

a:focus {
    box-shadow: none !important;
    outline: 0 !important;
}

.main-wrapper {
    width: 100%;
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
}

.mini-sidebar main#main {
    padding: 0px 0px 0 0px;
}

.content-wrapper {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
}

/* Header Clock */
.am-pm {
    position: relative;
    top: -15px;
    left: 6px;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6B6C72 !important;
}

.hh,
.mm,
.h-colon {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #333333 !important;
}

.ss,
.s-colon {
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #333333 !important;
}

/*Sidebar*/
.page-wrapper {
    left: 0;
    margin-left: 200px;
    /*margin-right: 80px;*/
    padding-top: 50px;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/*-----------------
    6. Sidebar
-----------------------*/
.sidebar {
    position: fixed;
    left: 0;
    top: 0px;
    bottom: 0;
    width: 200px;
    /* z-index: 9992; */
    background-color: #393A3D !important;
    margin-top: 0px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    transition: .3s ease all;
}

.sidebar.opened {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.sidebar-inner {
    height: 100%;
    transition: all 0.2s ease-in-out 0s;
}

.sidebar-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li a {
    color: rgba(212, 215, 220, 1) !important;
    display: flex;
    height: auto;
    padding: 8px 16px;
    vertical-align: middle;
}

.sidebar-menu li a:hover,
.dropdown-toggle.dropend.subdrop {
    /*color: #fbc80c !important;*/
    background-color: rgba(0, 0, 0, 1) !important;
    border-radius: 0 0;
}


.sidebar-menu li.active a {
    /*color: #fbc80c;
    background-color: #f3f3f3;*/
    background-color: rgba(0, 0, 0, .56) !important;
    color: #333 !important;
    background: transparent linear-gradient(260deg, #FFCC33 0%, #FBE378 100%) 0% 0% no-repeat padding-box;
}

.sidebar-menu ul li:last-child ul {
    margin-bottom: 17px !important;
}

.menu-title {
    color: #333;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 20px;
}

.menu-title>i {
    float: right;
    line-height: 40px;
}

.sidebar-menu li.menu-title a {
    color: #fbc80c;
    display: inline-block;
    float: right;
    padding: 0;
}

.sidebar-menu li.menu-title a.btn {
    color: #fff;
    display: block;
    float: none;
    font-size: 15px;
    line-height: inherit;
    margin-bottom: 15px;
}

.sidebar-menu ul li a.active {
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    /*background: #273650 !important;*/
    background-color: rgba(0, 0, 0, .56) !important;
    /*background: transparent linear-gradient( 90deg, #e14727 0%, #f78f37 100%) 0% 0% no-repeat padding-box;*/
    border-radius: 0 4px 4px 0;
    box-shadow: 3px 3px 20px 0 rgb(27 49 71 / 30%);
}

.sidebar-menu ul ul a.active {
    color: #2794d2 !important;
    text-decoration: none;
    background: rgba(0, 0, 0, .035) !important;
    box-shadow: none !important;
}

.mobile-user-menu {
    color: #fff;
    display: none;
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    width: 50px;
    z-index: 10;
}

.mobile-user-menu>a {
    color: #fbc80c;
    padding: 0;
}

.mobile-user-menu>a:hover {
    color: rgba(255, 204, 51, 0.95);
}

.mobile-user-menu>.dropdown-menu>a {
    line-height: 23px;
}

.profile-rightbar {
    display: none !important;
    color: #fbc80c;
    font-size: 26px;
    margin-left: 15px;
}

/* #ProfileTabContent .tab-pane {
    overflow-y: auto;
    max-height: calc(100vh - 208px);
    min-height: calc(100vh - 208px);
} */

.profileContent {
    padding: 0 1rem 1rem;
}

.badge {
    border-radius: 1rem !important;
}

.fixed-sidebar-right {
    position: fixed;
    top: 60px;
    right: 0;
    width: 300px;
    margin-right: -300px;
    bottom: 0;
    z-index: 101;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.sidebar .sidebar-menu>ul>li>a span,
.btnBug a span {
    transition: all 0.2s ease-in-out 0s;
    display: inline-block;
    white-space: nowrap;
}

.sidebar .sidebar-menu>ul>li>a span.badge {
    color: #fff;
    margin-left: auto;
}

.sidebar-menu ul ul a {
    display: block;
    /*color: #fff !important;*/
    padding: 6px 10px 6px 26px;
    position: relative;
    font-size: 14px !important;
}

.sidebar-menu ul ul {
    background-color: #393A3D !important;
    display: none;
    width: 250px;
    padding: 10px 0 !important;
}

.sidebar-menu ul ul ul a {
    padding: 7px 10px 7px 40px;
}

.sidebar-menu ul ul ul ul a {
    padding-left: 90px;
}

.sidebar-menu>ul>li {
    position: relative;
}

.sidebar-menu .menu-arrow {
    -webkit-transition: -webkit-transform 0.15s;
    -o-transition: -o-transform 0.15s;
    transition: transform .15s;
    position: absolute;
    right: 6px;
    display: inline-block;
    font-family: 'bootstrap-icons' !important;
    text-rendering: auto;
    line-height: 40px;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    line-height: 18px;
    top: 15px;
    font-weight: 700 !important;
}

.sidebar-menu .menu-arrow:before {
    content: "\F285";
}

.sidebar-menu li a.subdrop .menu-arrow {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sidebar-menu ul ul a .menu-arrow {
    top: 6px;
}

.sidebar-menu a {
    transition: unset;
    -moz-transition: unset;
    -o-transition: unset;
    -ms-transition: unset;
    -webkit-transition: unset;
}

.sidebar-menu>ul>li>a {
    padding: 8px 16px;
    align-items: center;
    display: flex;
    justify-content: flex-start;
    position: relative;
    transition: all 0.2s ease-in-out 0s;
    line-height: 24px;
}

.sidebar-menu ul li a i,
.sidebar-menu ul li a img {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    min-height: 24px;
    line-height: 18px;
    width: 22px;
    transition: all 0.2s ease-in-out 0s;
}

.sidebar-menu ul li a i {
    font-size: 20px;
    margin-right: 18px;
}

.sidebar-menu ul li.submenu ul li a i {
    font-size: 12px !important;
    margin-right: 0px !important;
}

.sidebar-menu ul li.active a i {
    color: #fff;
}

.btnBug a {
    color: #fbc80c !important
}

.sidebar-menu ul li.menu-title a i {
    font-size: 16px;
    margin-right: 0;
    text-align: right;
    width: auto;
}

.mini-sidebar .sidebar-menu i {
    font-size: 18px;
}

.mini-sidebar.expand-menu .sidebar-menu i {
    font-size: 14px;
}

/*-----------------
	42. Responsive
-----------------------*/
@media only screen and (min-width: 991px) {
    #toggle_btn {
        position: fixed;
        top: 34px;
        left: 180px;
        padding: 0 6.2px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: solid 6px #f5f5f9;
        color: #FFF !important;
        float: left;
        font-size: 14px;
        background-color: #393A3D !important;
        align-items: center;
        vertical-align: middle;
        display: flex;
        line-height: 1px;
        z-index: 1066;
        /*rotate: 180deg;*/
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    body.mini-sidebar #toggle_btn {
        opacity: 0;
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.mini-sidebar .header-left .logo span {
    display: none;
}

.mini-sidebar .header .header-left {
    padding: 0 5px;
    width: auto;
}

.mini-sidebar .sidebar {
    width: 55px;
}

.mini-sidebar.expand-menu .sidebar {
    width: 220px;
}

.mini-sidebar .menu-title {
    visibility: hidden;
    white-space: nowrap;
}

.mini-sidebar.expand-menu .menu-title {
    visibility: visible;
}

.modal-open .mini-sidebar .sidebar {
    z-index: 1051;
}

.mini-sidebar .sidebar .sidebar-menu ul>li>a span,
.mini-sidebar .btnBug a span,
.mini-sidebar .nav-tabs>li>a span {
    display: none;
    transition: all 0.2s ease-in-out;
    opacity: 0;
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu ul>li>a span,
.mini-sidebar.expand-menu .btnBug a span {
    display: inline;
    opacity: 1;
}

.mini-sidebar .page-wrapper {
    margin-left: 40px;
}

.mini-sidebar #toggle_btn {
    opacity: 0;
}

.mini-sidebar.expand-menu #toggle_btn {
    opacity: 100;
    left: 200px;
}

#toggle_btn i.page_arrow:before,
.sidepanel i.page_arrow:before {
    content: "\f0d9" !important;
}

.mini-sidebar #toggle_btn i.page_arrow:before {
    content: "\f0da" !important;
}

.mobile_btn,
.logo img.mini {
    display: none;
}

.hidden {
    display: none;
}

/* @media only screen and (max-width: 991.98px) {

    .mobile_btn,
    .logo img.mini {
        display: block;
    }

    .logo img.default {
        display: none;
    }

    .sidebar {
        margin-left: -225px;
        width: 225px;
    }

    .page-wrapper {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .slide-nav .sidebar {
        margin-left: 0;
    }

    #toggle_btn {
        display: none;
    }

    a.mobile_btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50%;
        border: solid 6px #f5f5f9;
        background-color: #3178C6;
        color: #FFF !important;
        font-size: 14px;
        height: 50px; 
        left: 0;
        line-height: 26px;
        padding: 1px 8px;
        margin-top: 5px;
    }

    section.mainSection {
        padding: 0 1rem !important;
    }

    .clock {
        display: none;
    }

    .menu-opened a.mobile_btn {
        position: absolute;
        left: 220px;
        z-index: 1098;
    }

    .slide-nav .page-wrapper {
        left: 225px;
        margin-left: 0;
    }

    header.fixed-top {
        left: 0px !important
    }

    .sidebar {
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .page-wrapper {
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
} */

.navbar-brand {
    padding: 5.13px 4px;
    /* background-color: #FFF !important; */
    width: 100%;
    /* height: 52px; */
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
    min-height: 1px;
    align-items: center;
    /* box-shadow: 0 4px 7px 0 rgb(0 0 0 / 8%); */
    margin: 10px 10px 24px 10px;
}

.navbar-brand img {
    max-height: 44px
}

.app-brand-text {
    font-size: 21px;
    /* font-family: 'Inter', sans-serif; */
    margin-left: 6px;
    color: #FFFFFF !important;
    font-weight: 300;
}

/*-----------------
    7. Content
-----------------------*/
.page-wrapper {
    /* left: 0; */
    /* margin-left: 200px; */
    /* margin-right: 80px; */
    /* padding-top: 50px; */
    /* position: relative; */
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.page-wrapper>.content {
    padding: 15px 15px 15px 25px;
}

.page-Fullwrapper {
    left: 0;
    padding-top: 50px;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.page-Fullwrapper>.content {
    padding: 15px;
}

.page-wrapper {
    min-height: calc(100vh - 28px) !important;
}

.navbar-dark {
    background-color: transparent !important;
    margin-top: 4px;
    background-color: #152147;
    padding: 0px 0px;
    /*box-shadow: 0px 2px 20px rgb(1 41 112 / 10%);*/
    margin-bottom: -25px;
}

.navbar-dark .container-fluid {
    background-color: #3178C6;
    /*background: linear-gradient(45deg,#7b1fa2,#7c4dff) !important;*/
    /*background: linear-gradient(to right,#8971ea,#7f72ea,#7574ea,#6a75e9,#5f76e8) !important;*/
    /*background: linear-gradient(to right,#496096,#4a609d) !important;*/
    /*background: linear-gradient(to right,#466497,#495f9e) !important;*/
    border-radius: 4px;
    box-shadow: 0 0.125rem 0.25rem rgb(90 103 216 / 40%);
}


header {
    background-color: #FFFFFF !important;
    border-bottom: solid 2px #ECEEF1;
    color: #6B6C72;
    height: 62px;
    background-color: #333333;
    color: #FFFFFF;

    /* box-shadow: 0 4px 7px 0 rgb(0 0 0 / 8%);
    padding: 9.5PX 0;
    margin-bottom: 1rem;
    border-radius: 0 0 5px 5px; */
}

header.fixed-top {
    left: 200px;
    /* z-index: 10600 !important */
}

.mini-sidebar header.fixed-top {
    left: 74px !important
}

.dropdown-menu.trakinglist {
    transform: translate(0, -50%) !important;
}

/*header .container-fluid {
    width: 100% !important;
    padding: 0;
}*/

/*section.mainSection {
    margin-top: 70px;
    padding: 0 2rem;
}*/

section.mainSection {
    background-color: #F1F1F1 !important;
}

.pagetitle h1 {
    font-size: 20px !important;
    margin-bottom: 0;
    color: #343434;
    font-family: 'ClearSans' !important;
    font-weight: 500 !important;
    /*border-bottom: solid 4px #3178C6;*/
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(45deg, #59a97b, #3178C6);
    border-image-slice: 1;
    padding: 11.8px 10px;
    /*margin-left: -21px;*/
    border-radius: 0 0 0px 5px !important;
}

.clock {
    padding: 12px 18px;
    font-size: 18px;
    font-weight: bold;
    /*margin: -10px;*/
    background-color: #f4f5f8;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(45deg, #59a97b, #3178C6);
    border-image-slice: 1;
}

.clock i {
    margin-right: 4px;
}

.pagetitle h1 i,
.clock i {
    color: #3178C6;
    margin-right: 0.3rem;
}

.pagetitle .btn {
    padding: 0.125rem 1rem;
}

nav.navbar-dark .nav-link {
    color: #fff !important;
    padding: .91rem 1.3rem !important;
    /* margin-right: 10px; */
}

nav.navbar-dark .nav-link:hover,
nav.navbar-dark .nav-link.active,
nav.navbar-dark .show>.nav-link {
    background-color: rgba(0, 0, 0, .2) !important;
    color: #FFF !important;
}

/*.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: 2rem;
    max-width: 98% !important;
}*/
.text-primary {
    color: #3178C6 !important;
}

.text-approved {
    color: #237d33 !important;
}

.text-denied {
    color: #c23522 !important;
}

.text-black {
    color: #000 !important;
}

.text-secondary {
    color: #d33c27 !important;
}

.text-gray {
    color: #666666 !important;
}

.text-gray333 {
    color: #333333 !important;
}

.text-5a5a5a {
    color: #5a5a5a !important;
}

.text-2f2f2f {
    color: #2f2f2f !important;
}

.text-7d7d7d {
    color: #7d7d7d !important;
}

.text-gray999 {
    color: #999999 !important;
}

.text-unpaid {
    color: #B35B20 !important;
}

/* Background bg */
.bg-primary {
    background-color: #3178C6 !important;
    color: #fff !important;
}

.bg-secondary {
    background-color: #d33c27 !important;
    color: #fff !important;
}

.bg-danger {
    --bs-bg-opacity: .3;
    background-color: #cb0b26 !important;
    color: #fff !important;
}

.bg-approved,
.bg-approved td {
    background: #eefce4 !important;
    color: #333 !important;
}

.bg-success {
    /* --bs-bg-opacity: .3; */
    background-color: rgb(35, 125, 51) !important;
    color: #fff !important;
}

.bg-warning,
.toast-warning {
    --bs-bg-opacity: .3;
    background: #db8484 !important;
    color: #682121 !important;
}

.bg-white {
    background-color: #fff !important;
    color: #343434 !important;
}

.bg-yellow {
    background-color: #FDB813 !important;
    color: #fff !important;
}

.bg-green,
tr.bg-green td {
    --bs-bg-opacity: .3;
    background-color: #9ddb84 !important;
    color: #356821 !important;
}

.bg-info {
    background-color: #84d2db !important;
    color: #216268 !important;
}



.bg-lightyellow,
tr.bg-lightyellow td {
    background: #fffccc !important;
    color: #333 !important;
}

.bg-graybadge {
    background-color: #999 !important;
    color: #333 !important;
}

.bg-gray7f7f7f {
    background-color: #7f7f7f !important;
    color: #333 !important;
}


.text-overtimebadge {
    color: #682121 !important;
}

.bg-overtimebadge {
    background: #db8484 !important;
    color: #682121 !important;
}

.bg-overtimebadge {
    background: #db8484 !important;
    color: #682121 !important;
}

.bg-approvedbadge {
    background: #9ddb84 !important;
    color: #356821 !important;
}

.tdHover_Action {
    margin: -10.4px;
    position: relative;
    left: -20px;
    bottom: -10px;
    white-space: nowrap;

}

.ReportTable {
    display: contents;
}

.div-window {
    height: calc(100vh - 90px) !important;
    max-height: none !important;
}

.fix-container {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ffffff;
    height: 100vh;
    transition: all 0.5s ease !important;
}

.geofence_filter {
    padding: 24px;
    border-bottom: 1px solid #DADADA;
    background-color: #F1F1F1;
}

.runReport {
    margin: 0 auto;
    text-align: center;
    height: calc(100vh - 252px);
    align-items: center !important;
}

.divPagination {
    padding: 12px 20px;
    text-align: right;
}

.projectname-badge {
    display: inline-block;
    padding: 0 8px 0;
    background-color: #3178C6;
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 400;
    /* min-height: 18px; */
    line-height: 1.4;
}

.PayrollReportTable {
    padding: 36px 36px 36px 24px !important;
    /* display: contents; */
    overflow: auto;
}

.PayrollReportTable table thead th {
    border-color: #f1f1f1 !important;
}

.PayrollReportTable th {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.PayrollReportTable table thead tr {
    border-top: 0px !important;
}


.reportDetail_Table {
    padding: 36px !important;
}

.reportDetail_Table table td {
    padding: 3px 10px !important;
    border-left: 1px solid #ccc !important;
}

.PayrollReportTable table tr:hover td {
    background-color: #eee !important;
    cursor: pointer !important;
}

.reportDetail_Table table tr:hover td.tdGroup {
    background-color: #999 !important;
    cursor: inherit !important;
}

td.tdDayChange,
.PayrollReportTable table tr:hover td.tdDayChange:hover {
    background-color: #c1c1c1 !important;
}

table.border_custom td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

table.ReportTable tr:hover td {

    background-color: #eee;
    cursor: pointer;
}

.reportDetail_hoverAction {
    position: absolute;
    left: -20px;
}

td.bg-gray {
    background-color: #e4e2e2 !important;
    color: inherit !important;
}

td.tdGroup,
.table-striped>tbody>tr td.group {
    background-color: #999 !important;
    color: #eee !important;
    border-top: 1px solid #999;
    padding: 0.138rem 10px !important;
}

td.tdGroup2,
.table-striped>tbody>tr td.group2 {
    background-color: #999 !important;
    color: #eee !important;
    border-top: 1px solid #999;
    padding: 0.138rem 10px !important;
}

.bg-gray {
    background-color: #999999 !important;
    color: #333333 !important;
}

.bg-lightgray {
    background-color: #eee !important;
}

.notification-bg {
    background-color: #DF1F26;
    color: #FFFFFF;
    border-radius: 4px !important;
    font-size: 12px;
    padding: 0 4px;
}

.no-notification {
    text-align: center;
    margin: 10% auto;
    font-size: 18px;
    color: #aeaeae;
    font-weight: 500;
}

.no-notification img {
    max-height: 80px;
    margin-bottom: 2rem;
}

/*--------------------------------------------------------------
# Header Nav    
--------------------------------------------------------------*/
.header-nav ul {
    list-style: none;
    margin-bottom: 0;
}

.header-nav>ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: #6B6C72 !important;
    margin-left: 25px;
    position: relative;
    padding: 0 !important;
}

.nav-profile {
    border: 1px solid #E3E5E8;
    border-radius: 3px;
    padding: 6px;
    white-space: nowrap;
    min-width: 168px;
    max-width: 258px;
    align-self: center;
}

.header-nav .nav-profile span {
    color: #6B6C72 !important;
}

.header-nav .nav-profile img {
    max-height: 32px;
    opacity: 0.8;
    margin-top: -5px;
}

.header-nav .nav-profile span.displayName,
.header-nav .nav-profile .companyDisplay {
    display: block;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-nav span {
    font-size: 14px;
    min-height: 14.25pt;
}

.profile_dropdownMenu .dropdown-item {
    padding: 0.532rem 0.45rem !important;
}

.SoundPreferencesIco i {
    color: #333333 !important;
}

.SoundPreferencesIco {
    position: absolute;
    font-size: 22px !important;
    color: #333333 !important;
    border-left: solid 1px #DADADA;
    margin: -3px 10px;
    right: 0;
    line-height: 29px;
    top: auto;
    padding-left: 10px;
    opacity: 0.7;
}

.header-nav .nav-profile .companyDisplay {
    min-height: 14px;
    font-size: 10px;
}

header .badge-number {
    position: absolute;
    inset: 9px auto auto auto;
    font-weight: normal;
    font-size: 12px !important;
    padding: 3px 4px;
    font-style: normal;
    border-radius: 4px !important;
    left: 7px;
    top: 11px;
    /* margin: 0 auto; */
}

.header-nav .nav-icon i {
    /* padding: 20px; */
    line-height: 62px;
}

.header-nav .notifications {
    /*inset: 8px -15px auto auto !important;*/
}

.header-nav .notifications .notification-item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .notifications .notification-item i {
    margin: 0 20px 0 10px;
    font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .notifications .notification-item:hover {
    background-color: #f6f9ff;
}

.header-nav .messages {
    /*inset: 8px -15px auto auto !important;*/
}

.header-nav .messages .message-item {
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .messages .message-item a {
    display: flex;
}

.header-nav .messages .message-item img {
    margin: 0 20px 0 10px;
    max-height: 40px;
}

.header-nav .messages .message-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444444;
}

.header-nav .messages .message-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .messages .message-item:hover {
    background-color: #f6f9ff;
}

.header-nav .profile {
    min-width: 180px;
    padding-bottom: 0;
    top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: #444444;
}

.header-nav .profile .dropdown-header span {
    font-size: 14px;
}

.header-nav .profile .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
    background-color: #f6f9ff;
}

h1 {
    font-size: 24px !important;
    letter-spacing: 0px;
    font-weight: bold !important;
}

small {
    font-size: 80% !important
}

a {
    text-decoration: none !important;
    cursor: pointer;
}


.admin-number {
    font-size: 40px;
    margin-bottom: 0px;
    color: #c20936;
    text-align: center;
}

.adminbox-text {
    font-size: 18px;
    color: #333;
    text-align: center;
}

.dashboard .col-md-4 {
    margin-bottom: 30px !important;
}

.card {
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 2px 6px rgb(1 41 112 / 12%);
}

.card .card {
    border: solid 1px #e6e9ec !important;
}

.card-header {
    background-color: #DADADA !important;

    padding: 0.42rem 1rem !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: solid 1px #c1c1c1 !important;
    border-bottom: 0px !important;
    border-radius: 3px 3px 0 0 !important;
}

#optmanageRateEngine .card {
    box-shadow: 0px 2px 6px rgb(1 41 112 / 22%) !important;
}

.card-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}

.card-body {
    padding: 10px 10px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    overflow-x: hidden;
}

.card-body.scrollNone {
    padding: 10px 10px;
    max-height: none;
    overflow: hidden;
}

.card-header,
.card-footer {
    border-color: #d9dee3 !important;
}

.card-body:has(.card-footer) {
    padding: 10px 10px 0 !important;
}

.form-label {
    color: #666;
    font-size: 12px;
    font-weight: 500;
    vertical-align: inherit;
    padding: 0 !important;
    margin: 0;
}

label.form-check-label {
    display: inline;
}

.form-control.inline,
.form-select.inline {
    display: inline;
}

.form-control,
.form-select {
    width: 100%;
    /*box-sizing: content-box;
	padding: 0;*/
    -webkit-transition: box-shadow .3s, border .3s;
    transition: box-shadow .3s, border .3s;
    /* border: none !important; */
    border: 1px solid #dadada !important;
    /* border: 1px solid rgba(0, 0, 0, 0.42) !important; */
    border-radius: 0 !important;
    outline: 0 !important;
    background-color: #fff !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

.form-control-Arial {
    font-family: Arial;
    border: 1px solid #DADADA;
}

.form-select.bg-gray {
    background-color: #d5d5d5 !important;
    color: rgba(0, 0, 0, 0.87) !important;
}

.form-control2 {
    color: rgba(0, 0, 0, 0.87);
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.42);
    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    font-family: ClearSans, sans-serif;
    line-height: 19px;
    background-color: #FFF;
}

.form-control2 input:focus-visible {
    outline-offset: 0px;
}

.form-select {
    padding: 0.25rem 1.15rem 0.25rem 0.35rem !important;
    background-position: right 0.15rem center !important;
}

select:focus .form-control:focus,
.accordion-button:focus {
    box-shadow: none;
}

input:not([type]):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border: 1px solid #3178C6 !important;
    box-shadow: 0px 0px 4px 0px #3178C6 !important;
    border: none;
    border-radius: 0;
    color: #333333 !important;
}

label.btn.btn-outline-primary {
    border-radius: 0 !important;
}

.week-custom input.btn-check:focus+.btn-outline-primary {
    box-shadow: none !important;
}

.btn-group .btn {
    min-width: auto !important;
    font-weight: 500;
}

.btn-group span label.btn-custom {
    color: #666 !important;
    font-weight: 400 !important;
}

.btn-outline-primary.btn-custom:active {
    background-color: #fff !important;
    color: #3178C6 !important;
    border-bottom: 1px solid #3178C6;
}

.btn-check:checked+.btn-outline-primary.btn-custom:focus {
    box-shadow: none !important;
}

.btn-check:checked+.btn-outline-primary.btn-custom {
    background-color: #fff !important;
    border-bottom: 1px solid #3178C6;
    color: #3178C6 !important;
}

input:not(.browser-default):focus:not([readonly])+label.btn-custom {
    color: #3178C6 !important
}

/* input:not(.browser-default):focus:not([readonly])+label,
select:not(.browser-default):focus:not([readonly])+label,
span.select2:focus:not([readonly])+label {
    color: #3178C6 !important
} */

textarea {
    outline: none;
    border: none
}

textarea:focus {
    /*border-color: transparent !important;*/
    box-shadow: none !important;
    border: 1px solid #695bbb !important;
    border-top: 0px solid #d9dee3 !important;
}

/* 
input:focus::-webkit-input-placeholder {
    color: transparent
}

input:focus:-moz-placeholder {
    color: transparent
}

input:focus::-moz-placeholder {
    color: transparent
}

input:focus:-ms-input-placeholder {
    color: transparent
}

textarea:focus::-webkit-input-placeholder {
    color: transparent                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
}

textarea:focus:-moz-placeholder {
    color: transparent
}

textarea:focus::-moz-placeholder {
    color: transparent
}

textarea:focus:-ms-input-placeholder {
    color: transparent
} */

.main-table .bootstrap-select .btn {
    padding: 4px 10px;
    font-size: 15px;
}

table tbody tr {
    border-bottom: solid 1px #e8eef3 !important;
}

table tbody tr:nth-child(2n+1) {
    background-color: rgba(244, 248, 251, .5) !important;
}

/*.table > :not(caption) > * > * {
    padding: 4px 6px;
}*/

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f4f8fb;
}

.form-custom-btn .form-select .btn {
    color: #999999 !important;
    font-size: 16px;
}


/*Login page css start here*/
.google_signin iframe,
.google_signin iframe div#container {
    min-width: 100% !important;
    width: 100% !important;
}

.google_signin iframe div#container.haAclf {
    display: block !important;
}

.app-brand-link img {
    max-height: 40px;
}

.login-info .container-fluid {
    width: 100%
}

.login-bg {
    background: url("../images/login_bg.png") center right;
    height: 100vh;
    width: 100%;
    background-size: cover;
}


.login-bg h2 {
    font-size: 80px;
    color: #fff;
    padding-top: 250px;
    text-align: center;
    margin: auto;
}

.login-bg h2 span {
    font-weight: 600;
    text-transform: uppercase;
}

.login-site-title {
    margin-top: 90px;
    margin-bottom: 50px;
}

.miscro-box {
    background-color: #d73b02;
    color: #fff;
    font-size: 14px;
    font-family: 'Segoe UI';
    height: 40px;
    border-radius: 4px;
    margin-bottom: 10px;
    width: 100%;
}

.miscro-box .lineleft {
    height: 34px;
    display: inline-block;
    padding-left: 10px;
    vertical-align: top;
    padding-top: 8px;
    font-weight: 600;
}

.google-box {
    color: #282a3c;
    font-size: 14px;
    font-family: Roboto;
    margin-right: 5px;
    border-radius: 4px;
    width: 100%;
    /* height: 40px;
    border: 1px solid #adb3b9; */
}

.google-box .lineleft {
    height: 34px;
    display: inline-block;
    padding-left: 10px;
    vertical-align: top;
    padding-top: 8px;
    font-weight: 600;
}

.sp {
    background-image: url(../images/spsprite.png);
    background-repeat: no-repeat;
    display: inline-block;
}


.sp.banner_close {
    background-position: -545px -100px;
    width: 36px;
    height: 36px;
    border: 0px !important;
    vertical-align: middle;
}

.sp.banner_logo {
    background-position: -493px -98px;
    width: 38px;
    height: 38px;
    border: 0px !important;
    vertical-align: middle;
}

.sp.outlook-icon {
    background-position: -2px -5px;
    width: 40px;
    height: 40px;
    border-right: 1px solid #cc0000;
}

.sp.googleln-icon {
    background-position: -48px -7px;
    width: 39px;
    height: 38px;
    border-right: 1px solid #adb3b9;
}

/* Buttons CSS */
button[disabled],
button[disabled]:hover,
button[disabled]:active {
    background-color: #EBEBEB !important;
    color: #999999 !important;
    border: 0 !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    cursor: default !important;
    text-shadow: none !important;
}

.btn+.btn {
    margin-left: 0.8rem;
}

.lnk-round {
    color: #666 !important;
    padding: 3.4px 6px;
    overflow: visible;
    text-align: center;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 50%;
}

.lnk-round:hover {
    background: rgba(0, 0, 0, 0.04);
}

.lnk-round-TE {
    color: #666 !important;
    padding: 0.4px 6px;
    overflow: visible;
    text-align: center;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 50%;
    font-size: 1.3rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
}

.lnk-round-TE:hover {
    color: #333 !important;
    background: rgba(0, 0, 0, 0.04);
}

.inviteBtn {
    margin-right: 4px;
    height: 30.33px;
    border: 1px solid #DADADA;
    background-color: #FFFFFF;
    display: inline-block;
    cursor: pointer;
    font-size: 22px;
    line-height: 29px;
    padding: 0 5px;
    border-bottom: 2px solid transparent !important;
}

.inviteBtn.inviteBtn-selected {
    color: #3178C6 !important;
    border-bottom: 2px solid #3178C6 !important;
}

.btn-check:focus+.btn,
.btn:focus {
    box-shadow: none !important;
}

.btn.btn-large {
    padding: 10px !important;
}

.btn,
.btn-flat,
.btn-large,
.btn-small {
    min-width: 75px;
    font-size: 14px;
    padding: 4px 8px 7px 8px;
    line-height: 23.7px;
    font-weight: 500;
    border: none;
    border-radius: 3px !important;
}

.btn.w-auto {
    min-width: auto !important;
}

.btn-32 {
    height: 32px;
    border-radius: 3px !important;
    font-size: 14px;
    font-weight: 400;
}

/* .btn-32 i {
    vertical-align: middle;
    position: absolute;
    display: inline-block;
    left: 19px;
    top: 12px;
} */

.btn-add {
    content: "";
    background-image: url(../images/btn_plus.png);
    background-repeat: no-repeat;
    background-size: 20px;
    transition: transform .2s ease-in-out;
    padding: 4px 12px 4px 30px;
    background-position: 10px center;
}

.btn-download {
    content: "";
    background-image: url(../images/btn_download.png);
    background-repeat: no-repeat;
    background-size: 24px;
    transition: transform .2s ease-in-out;
    padding: 4px 12px 4px 42px;
    background-position: 10px center;
}

.timeEntries_filter .btn {
    /* height: 32px;
    padding: 1.4px 9.6px 1.4px 5.6px;
    display: inline-block; */
}

.btn,
.btn-large,
.btn-small {
    cursor: pointer;
    -webkit-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
    text-align: center;
    text-decoration: none;
}

.btn-group-sm>.btn,
.btn-sm {
    padding: 0.20rem 0.87rem;
    font-size: .875rem !important;
    border-radius: 0.2rem;
    line-height: 1.691;
}

.btn-primary {
    color: #fff !important;
    background-color: #3178C6 !important;
    border: 1px solid #007ABF;
    box-shadow: none !important;
}

.btn-primary:hover {
    background-color: #2369B3 !important;
    border: 1px solid #2369B3 !important;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
}

.btn-profile {
    background-color: rgba(10, 72, 140, 0.75);
    width: 80px;
    height: 20px;
    text-align: center;
    color: #FFFFFF;
    font-family: 'ClearSans', sans-serif;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 1;
    border-radius: 2px;
    margin-bottom: 0;
    position: relative;
}

.btn-profile:hover {
    background-color: rgba(10, 72, 140, 0.75) !important;
    color: #FFFFFF !important;
}

.avatar.avatar-profile {
    width: 80px;
    height: 80px;
    /* padding: 8px; */
    margin-bottom: -10px;
    /* z-index: 0; */
}

.btn-secondary {
    color: #3178C6 !important;
    background-color: #F4F5F8 !important;
    border: 1px solid #3178C6 !important;
    /* box-shadow: 0 0.125rem 0.25rem 0 rgb(105 108 255 / 40%) !important; */
}

.btn-secondary:hover {
    color: #007ABF !important;
    border: 1px solid #007ABF !important;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;

}

.btn-outline-secondary {
    color: #3178C6 !important;
    background-color: #FFF !important;
    border: 1px solid #3178C6 !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgb(105 108 255 / 40%) !important;
}

.btn-outline-secondary:hover {
    color: #007ABF !important;
    border: 1px solid #007ABF !important;
}

.btn-transparent {
    color: rgba(0, 0, 0, 0.87) !important;
    box-shadow: none;
    white-space: nowrap;
    background-color: #FF000000;
    min-width: auto !important;
}

.btn-outline-gray {
    color: #393a3d !important;
    background-color: #FFF !important;
    border: 1px solid #6b6c72 !important;
    /* box-shadow: 0 0.125rem 0.25rem 0 rgb(105 108 255 / 40%) !important; */
}

.btn-outline-gray:hover {
    color: #393a3d !important;
    background-color: #e1e2e5 !important;
    border: 1px solid #6b6c72 !important;
}

.btn-transparent {
    color: rgba(0, 0, 0, 0.87) !important;
    box-shadow: none;
    white-space: nowrap;
    background-color: #FF000000;
    min-width: auto !important;
}

.btn-gray {
    color: rgba(0, 0, 0, 0.87) !important;
    box-shadow: none;
    white-space: nowrap;
    background-color: #DADADA;
    border: 1px solid #DADADA;
}

.btn-gray:hover,
.btn-transparent:hover {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    background-color: #d5d5d5 !important;
}

.btn-icon {
    color: #666666 !important;
    box-shadow: none;
    white-space: nowrap;
    background-color: #FF000000;
    min-width: auto !important;
    margin: 0 !important;
    font-size: 16px;
}

.btn-icon:hover {
    box-shadow: none;
    background-color: #d5d5d5 !important;
}

.btn-danger {
    color: #fff !important;
    background-color: #DF1F26 !important;
    border: 1px solid #DF1F26;
    box-shadow: none !important;
}

.btn-danger:hover {
    background-color: #CB0B26 !important;
    border: 1px solid #CB0B26 !important;
    /* box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; */
}

.btn-success {
    color: #fff !important;
    background-color: #4caf50 !important;
}

.btn-success:hover {
    background-color: #43a047 !important;
}

.btn-white {
    color: #3178C6 !important;
    background-color: #f4f8fb;
    border: 0px solid #FFF;
}

.btn-white:hover {
    background-color: rgba(255, 255, 255, .9) !important;
}

.btn-default {
    color: #000;
    background-color: #fff;
}

.dropdown-profile li:hover {
    background-color: #fff !important;
}

.dropdown-profile::before {
    border-color: transparent transparent rgb(254, 254, 254) transparent;
    border-style: solid;
    border-width: 7px;
    content: '';
    display: block;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    top: -14px;
    width: 0;
    height: 0;
}

.btn-chngpic {
    color: #666666;
    background-color: #fff;
    width: 100%;
}

.btn-chngpic:hover {
    color: #666666;
    background-color: #f1f1f1 !important;
}


.link-forgotpswd a {
    color: #152147;
    text-decoration: none;
    float: right;
}

.form-info {
    margin-left: 30px;
    margin-right: 30px;
}

.close-icon {
    float: right;
}

/*Login page css end here*/


#main {
    flex-basis: 100%;
    flex-direction: column;
    width: 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    padding: 0;
}

#main .card:last-child {
    margin-bottom: 0;
}

/*Home page css start here*/
.account-details ul {
    list-style-type: none;
    margin-top: 23px;
    float: right;
}

.account-details li {
    display: inline-block;
    margin-left: 50px;
}

.account-details a {
    text-decoration: none;
    color: #000;
}

.account-details i {
    color: #152147;
}

.site-title img {
    height: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*Home page css end here*/

/*data tables css start here*/

.dataTables_length label {
    float: left;
    display: flex;
    margin-top: 4px;
}

.dataTables_length select {
    margin-right: 10px;
    margin-left: 10px;
    min-width: 62px;
}

.dataTables_filter label {
    float: right;
    display: flex;
    margin-top: 4px;
    margin-bottom: 10px;
}

.dataTables_filter input {
    margin-left: 10px;
}

.dataTables_paginate .pagination {
    float: right;
    margin: 0 0 6px;
}

.mytable-new thead tr {
    /*background-color: #d7deff;*/
    color: #000;
}

.mytable-new thead tr th {
    font-weight: 600;
}

.mytable-new tbody .odd,
.table-striped>tbody>tr td {
    background-color: #fff;
}

tr th {
    font-weight: 600 !important
}

tr.read td {
    background-color: rgba(215, 222, 255, .6);
    opacity: .7
}

.active>.page-link,
.page-link.active,
.active>.page-link:hover {
    background-color: #3178C6 !important;
    border-color: #3178C6 !important;
    color: #FFF !important;
    box-shadow: 0 0.125rem 0.25rem rgb(105 108 255 / 40%);
    opacity: .8;
}

.page-item:not(:first-child) .page-link {
    margin-left: 0.1875rem;
}

.page-item .page-link {
    background-color: #e8eef3;
    border-color: #FFF;
    padding: 0.25rem 0.75rem;
    font-size: 14px;
    border: solid 0px #e8eef3 !important;
    min-width: calc(2rem + 0px);
    border-radius: 0.25rem;
}

.page-link:hover {
    background-color: #e6e9ec !important;
}

/*data tables css end here*/
/*footer css start here*/
.copyright {
    /*background-color: #d3d3d3;*/
    padding: 5px 6px 5px 6px;
    width: 100%;
    text-align: center;
    font-size: 12px;
}

/*footer css end here*/

/*profile page css start here*/
.profile-info {
    margin: 20px 0px;
}

.profile-img {
    text-align: center;
    margin: 3% auto;
}

.profile-img img {
    margin-bottom: 20px;
}

.profile-img i {
    margin-top: 10px;
    color: #0c1c6f;
}

.spaceleft10 {
    margin-left: 10px;
}

.personal-info h4 {
    color: #0c1c6f;
}

/*profile page css end here*/


.register-list-info p {
    font-size: 14px;
}

.accordion-button:not(.collapsed) {
    background: #eee !important;
    color: #000;
    font-size: 17px;
    font-weight: 700;
}

.accordion-button {
    padding: .6rem !important;
    background: #eee;
    font-size: 17px;
    font-weight: 700;
}

.accordion-button .title {
    background: rgb(51, 51, 51);
    color: #fff !important;
    z-index: 9;
    border-radius: 7px 7px 0px 0px;
    white-space: nowrap;
    padding: 8px 17px 17px 17px;
    display: inline;
}

.accordion-button .groupName {
    padding-left: 15px;
    padding-top: 4px;
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
}

.accordion-header .badge {
    font-size: 15px;
    font-weight: 700;
    padding: 7px;
}

.divReportDetails .accordion-item>div:not(.collapsed) .accordion-header .title {
    color: #fff !important;
}

.accordion-button.collapsed .title {
    background: transparent;
    color: #333 !important;
    width: auto;
    z-index: 9;
    border-radius: 7px 7px 0px 0px;
    padding: 8px 17px 11px 17px;
    display: inline;
    white-space: nowrap;

}


.accordion-button:after,
.accordion-button:not(.collapsed):after {
    background-size: 70%;
}

.accordion-button::after {
    margin-left: 0 !important;
    margin-right: auto;
}


.requistion-bg {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #4f4f4f;
}

.desc-list-info p {
    font-size: 14px;
}


.search-bg {
    background: #bbc0db;
    padding: 20px;
    border-radius: 6px;
}

/* Sticky container */
.sticky-container {
    position: sticky;
    top: 0;
}

.sticky-container .table>thead th {
    vertical-align: bottom;
    position: sticky;
    top: 0px;
    z-index: 10;
    background: #F1F1F1;
    border-top: solid 0px #dee2e6 !important;
}

.sticky-container .table>tbody th {
    vertical-align: bottom;
    position: sticky;
    top: 36px;
    z-index: 10;
    background: #F1F1F1;
    border-top: solid 1px #dee2e6 !important;
    font-weight: 400 !important;
}

.sticky-container .main-table {
    height: calc(100vh - 260px);
    overflow-y: auto;
    overflow-x: hidden;
}

thead.bg-white th {
    background-color: #fff !important;
}

.main-table .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
    padding: 0px;
    margin-left: 10px;
    margin-right: 10px;
}

.personal-info .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
    padding: 0px;
}

.personal-info .bootstrap-select .btn {
    background-color: #fff;
    border: none;
    padding: 8px 10px;
    text-transform: capitalize;
    font-size: 1rem;
    font-weight: 400;
    line-height: initial;
    color: #4f4f4f;
}

.personal-info .bootstrap-select .btn:hover {
    background-color: #fff;
    border: none;
    color: #a0a7ab;
}

.personal-info .bootstrap-select .btn:focus {
    background-color: #fff;
    border: none;
    color: #a0a7ab;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: 0px;
    outline: 0px !important;
    outline-offset: 0px;
}

.heading-btm {
    border-bottom: 1px solid #bbc0db;
    color: #152147;
    font-weight: bold;
}


.custom-sm-btn {
    padding: 2px 8px;
}

.cutom-textnone {
    text-decoration: none;
}

#panel {
    display: none;
}

.border-right-cst {
    border-right: 1px solid #ddd;
}

@media screen and (max-width: 1100px) and (min-width: 768px) {

    .main-table {
        overflow-x: scroll;
    }
}


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

@media (max-width:767px) {

    .login-site-title {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .form-info {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .account-details li {
        margin-left: 6px;
        margin-right: 6px;
    }

    .account-details ul {
        margin-top: 10px;
        float: left;
        margin-left: -40px;
        margin-bottom: 10px;
    }

    .main-table {
        overflow-x: scroll;
    }
}

.form-inline label.form-control-plaintext {
    display: inline-block;
    width: auto;
}

label.form-control-plaintext {
    /*font-weight: bold;*/
    padding: 0 0 0.8rem 0;
}

label.col-form-label {
    font-size: .9rem;
}

.lblForm {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.int-form:focus,
.ts-select-box input:focus,
.ts-select input:focus,
.ts-select-box select:focus,
.ts-select select:focus,
textarea:focus,
textarea.edit:focus,
.ts-text-box-container-focus,
.chosen-container-active {
    outline: none;
    border: 1px solid #3178C6 !important;
    box-shadow: 0px 0px 4px 0px #3178C6;

}

.int-form {
    font-family: ClearSans, sans-serif;
    height: 26px;
    border: 1px solid #dadada;
    padding-left: 5px;
    color: #333333;
    font-size: 14px;
    background-color: #FFF;
    width: 100%;
}

.col-form-label {
    /*padding: 0 !important;
    color: #695bbb;*/
}

.form-floating {
    position: relative;
    margin: 1rem 0 1.5rem 0 !important;
}

.form-floating.mb-0 {
    margin-bottom: 0 !important;
}

.form-floating>.form-control-plaintext:focus,
.form-floating>.form-control-plaintext:not(:placeholder-shown),
.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    /* padding-bottom: 0rem !important; */
    box-shadow: none;
}

.form-label2 {
    color: rgba(0, 0, 0, 0.87);
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
}

/*.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
    height: calc(2rem + 2px);
    line-height: 1.25;
}

.form-floating>label{
    padding: 0.4rem 0.75rem;
	margin-top:0px;
}

.form-control:focus {
    border-color:#ced4da;
    box-shadow: none;
}

.form-floating>.form-select {
    padding-top: 0rem;
    padding-bottom: 0rem;
}*/
.divForm_bg {
    padding: 10px 10px;
    margin: 0;
    background-color: #f1f1f1;
}

.divFilter_bg h6 {
    color: black;
}

.divFilter {
    border: solid 1px #e6e9ec;
    padding: 10px 10px;
    background-color: #FFFFFF;
    border-radius: 0;
    margin: -10px 0 0px;
}

.divFilter_bg {
    border: solid 1px #e6e9ec;
    padding: 10px 10px;
    background-color: #DADADA;
    margin: -10px -10px 0px -10px;
    border-radius: 5px 5px 0 0;
}

.divFilter_bg .form-floating {
    margin-bottom: 0 !important;
}

.comingSoon {
    font-size: 24px;
    font-weight: bold;
    margin: 10% auto;
    text-align: center;
    text-transform: capitalize;
}

/* Select 2 */

.form-floating .select2-container .select2-selection--single {
    border-bottom: 1px solid #d9dee3;
    height: calc(2.2rem + 2px);
    border-radius: 0;
    line-height: 1.25;
}

.form-floating .select2-container .select2-selection--multiple {
    border-bottom: 1px solid #d9dee3;
    min-height: calc(2.2rem + 2px);
    border-radius: 0;
    line-height: .95;
}

.form-floating .select2-container--default .select2-selection--single .select2-selection__arrow,
.form-floating .select2-container--default .select2-selection--multiple .select2-selection__arrow {
    height: 12px;
    right: 7px;
}

.form-floating .select2-container--default .select2-selection--single .select2-selection__arrow b,
.form-floating .select2-container--default .select2-selection--multiple .select2-selection__arrow b {
    /* border-color: #ccc transparent transparent; */
    /* border-style: solid; */
    /* border-width: 6px 6px 0; */
    height: 0.52em;
    left: 50%;
    margin-left: -10px;
    margin-top: 12px;
    position: absolute;
    top: 50%;
    width: 0.52em;
    content: "";
    transform: translateY(-50%) rotate(135deg);
    border: 1.4px solid;
    border-bottom: 0;
    border-left: 0;
}

.form-floating .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.form-floating .select2-container--default.select2-container--open .select2-selection--multiple .select2-selection__arrow b {
    border-color: transparent transparent #ccc;
    border-width: 0 6px 6px;
}

.form-floating .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0.25rem 0.35rem !important;
}

.form-floating .select2-container .select2-selection--multiple .select2-selection__rendered {
    padding: 0.25rem 0.35rem !important;
    margin-top: 4px !important;
}

.form-floating .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000;
    font-size: 16px !important;
    font-weight: normal;
}

.form-floating .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #000;
    font-size: 16px !important;
    font-weight: normal;
}

.form-floating .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #fc6075;
}

.divSearchselect {
    max-height: 250px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.divSearchTeamMemberModal {
    max-height: calc(100vh - 330px);
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* nav-tabs */
.nav.nav-tabs {
    margin: 0;
    padding: 4px 13px 0;
}

.nav-tabs li {
    margin: 1px .2em 0 0 !important;
}

.nav-tabs .nav-link {
    padding: 5.3px 16px !important;
}

.nav-tabs .nav-link {
    border: 1px solid #C1C1C1 !important;
    border-bottom-width: 0 !important;
    background: #cccccc !important;
    font-weight: normal;
    color: #555555 !important;
    font-size: .875rem !important;
}

.nav-tabs .nav-link.active {
    border: 1px solid #C1C1C1 !important;
    background: #f1f1f1 !important;
    font-weight: normal !important;
    color: #212121 !important;
    border-bottom: 1px solid #f1f1f1 !important;
}



/* Bordered Tabs */
.nav-tabs-bordered {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.nav-tabs-bordered .nav-link {
    border: none;
    color: #18599E !important;
    opacity: .7;
    font-weight: bold;
    padding: 6px 12px;
    overflow: hidden;
    position: relative;
    font-size: 0.875rem;
    max-width: 264px;
    min-width: 160px;
    box-sizing: border-box;
    min-height: 48px;
    text-align: center;
    flex-shrink: 0;
    font-family: ClearSans, sans-serif;
    font-weight: normal;
    line-height: 1.75;
    white-space: normal;
    text-transform: uppercase;
    border-bottom: 2px solid transparent !important;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: #3178C6 !important;
}

.nav-tabs-bordered .nav-link.active {
    background-color: #fff;
    opacity: 1 !important;
    border-bottom: 2px solid #3178C6 !important;
}

.tab-content {
    padding: 10px;
}

.tab-content.shadow {
    box-shadow: 0px 6px 7px 4px rgba(67, 89, 113, .12) !important;
    border: 1px solid #C1C1C1 !important;
    border-top: 0px !important;
}

.form-select:focus {
    box-shadow: none !important;
}

/* Search Input */
.search {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1);
}

.search .bi-search {
    position: absolute;
    top: 6px;
    left: 6px;
}

.search .bi-x-lg {
    position: absolute;
    top: 6px;
    right: 6px;
}

.search input {
    text-indent: 25px;
    border: 1px solid #d6d4d4;
}

/* Calender Input */
.calendar {
    position: relative;
    /* box-shadow: 0 0 40px rgba(51, 51, 51, .1); */
}

.calendar .calendarIco {
    position: absolute;
    top: 1px;
    right: 6px;
}

.calendar input {
    /* text-indent: 25px; */
    border: 1px solid #d6d4d4;
}

.AddTimeOff-Scrollable .calendar .calendarIco {
    top: 6px !important;
}

ul.list-group.selectCustomer {
    max-height: calc(100vh - 301px);
    overflow-y: auto;
}

.input-group>.form-control,
.input-group>.form-floating,
.input-group>.form-select,
.form-control,
.form-floating>.form-select {
    padding: 0.25rem 0.35rem !important;
    font-size: 14px !important;
}

.input-group-text {
    background-color: transparent !important;
    border-bottom: 1px solid #d9dee3 !important;
    border-radius: 0px !important;
    border-width: 1px 0 1px 1px !important;
    padding: .375rem .5rem !important;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 30px !important;
    line-height: 1.25 !important;
}

.form-floating>textarea.form-control,
.form-floating>.form-chk {
    min-height: calc(2.2rem + 2px) !important;
    height: auto !important;
}

.form-chk {
    padding: 14px 0 0 10px;
}

.form-floating>.form-chk~label {
    padding-top: 2rem;
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    border: 1px solid #d9dee3;
}

.form-floating>label {
    padding: 0rem !important;
    pointer-events: auto !important;
    top: -1.2rem;
    transition: none !important;
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    opacity: 1;
    transform: none !important;
}

.form-control:disabled,
.disabled {
    background-color: #e9ecef00;
    opacity: 0.4;
}

input.form-control.dateTimeFiller {
    min-width: 120px;
}


/* Custom Modal */
.confirmation .modal-dialog {
    height: auto !important;
    /*margin: auto !important;*/
}

.confirmation .modal-dialog .modal-content {
    height: auto;
    /*border-radius: 4px !important;*/
}

.confirmation h3 {
    margin: 6% 0 8%;
}

/*.modal.right {
    right: 0 !important;
    left: auto !important;
}*/
.modal {
    top: 50px;
    bottom: 18px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    border-left: 1px solid #e3e3e3;
    right: 10px !important;
}

.modal .modal-dialog {
    height: 100vh;
    margin: 0px 0 0px auto;
    width: auto;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out !important;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out !important;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out !important;
    transition: opacity 0.3s linear, right 0.3s ease-out !important;
}

.modal.show .modal-dialog {
    transform: translate(0, 0) !important;
}

.modal-content {
    box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%) !important;
    border-radius: 4px 0 0 4px !important;
    border: solid 0px;
    max-height: calc(100vh - 70px) !important;
}

.modal-header.bg-white,
.modal-body.bg-white,
.modal-footer.bg-white {
    background-color: #fff !important;
    border: 0 !important;
}

.modal-header,
.modal-footer {
    padding: 0.4rem 0.8rem !important;
    /* background-color: #F1F1F1; */
    background-color: transparent;
    font-size: 16px;
    border-top: 0px solid #c1c1c1;
    border-left: 0px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}

.modal-footer {
    padding: 0.4rem 0.8rem !important;
    background-color: #F1F1F1;
    font-size: 16px;
    border-top: 1px solid #c1c1c1;
    border-left: 1px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    display: flow-root;
    text-align: right;
}

.modal-custom .modal-header,
.modal-custom .modal-footer {
    border: none !important;
    background: #F1F1F1 !important;
}

.bg-f1f1f1 {
    background-color: #F1F1F1 !important;
}

.modal-header.bg-f1f1f1,
.modal-footer.bg-f1f1f1 {
    background-color: #F1F1F1 !important;
    border: 0px !important;
}

.modal-custom .btn-close {
    width: .5rem !important;
    height: .5rem !important;
}

.modal-header,
.modal-footer {
    background-color: #DADADA !important;
}


.modal-body {
    padding: 0.8rem 0.8rem !important;
    background-color: #F1F1F1 !important;
}

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

.modal-body .container-fluid {
    width: 100% !important;
}

.modal-title {
    font-weight: 500 !important;
    font-size: 16px;
}

.btn-help {
    box-sizing: content-box !important;
    width: 24px;
    height: 24px;
    color: #000;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    opacity: 0.5;
    font-size: 18px;
    line-height: 16px;
}

.btn-help:focus-visible {
    outline: none !important;
}

.btn-refresh {
    box-sizing: content-box !important;
    width: 24px;
    height: 24px;
    color: #000;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    -webkit-text-stroke: 1px;
    opacity: 0.4;
    font-size: 18px;
    line-height: 16px;
}

.btn-refresh:focus-visible {
    outline: none !important;
}

.modal-header .btn-close {
    padding: 0.25em 0.25em !important;
    margin: initial !important;
}

button.btn-close {
    background-size: 60%;
}

.btn-close:focus {
    box-shadow: none !important;
    opacity: 1;
}

.modal-backdrop.show {
    background-color: #435971 !important;
}

.modal-warningIco {
    color: rgb(255, 193, 7);
    font-size: 64px;
}

.modal-dangerIco {
    color: #CF1D1D;
    font-size: 64px;
}

.modal-successIco {
    color: #20972C;
    font-size: 64px;
}

.modal-body .select2-container {
    width: 100% !important;
}

.select2-container {
    z-index: 998 !important;
}

.select2-container.select2-container--open {
    z-index: 1056 !important;
}

.list-group-item.active {
    background-color: #f4f8fb;
    border: solid 1px #e6e9ec;
    color: #4f5ccd !important
}

.modal li.list-group-item {
    padding: .4rem !important;
}

ul.list-group.b-0 .list-group-item {
    border: 0 !important;
}

/*Custom Floating Group*/
.lblFloatcustom {
    font-size: .9rem;
    margin: 0;
    padding: 0;
    line-height: 1;
    transform: scale(.85) translateY(-0.5rem) translateX(-0.15rem);
    opacity: .8;
}

.mt--1 {
    margin-top: -1rem;
}

.mt--4 {
    margin-top: -4rem;
}

.ml--4px {
    margin-top: -4px;
}

.mt--1-6 {
    margin-top: -1.6rem;
}

.m--3px {
    margin-top: -3px;
}

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

.m--20px {
    margin-top: -20px;
}

.mt-px-16 {
    margin-top: 16px !important;
}

.form-control:focus {
    /* background-color: transparent !important; */
}

.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
    border: 1px solid #d9dee3;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Alerts */

.divAlert {
    position: fixed;
    display: flex;
    /* width: 50%; */
    /* justify-content: center; */
    /* align-items: center; */
    z-index: 1011;
    top: 162px;
    right: 2.3%;
    left: auto;
}

.alert.alert-custom {
    background: transparent !important;
    color: #333333 !important;
    font-size: 14px !important;
}

@media only screen and (max-width: 991.98px) {
    #main {
        margin-top: 75px !important;
        padding: 20px 0px;
        transition: all 0.3s;
        min-height: calc(100vh - 136px);
    }

    .divAlert {
        position: fixed;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        top: 50px;
    }
}

.alert {
    color: #ffffff !important;
    padding: 0.3rem 0.5rem 0.3rem 0.6rem;
    border-radius: 0.25rem;
    /* box-shadow: 0px 3px 6px #00000029; */
    color: #ffffff;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    font-size: 1rem;
    border: none !important;
}

.alert ul {
    margin-bottom: 0 !important;
}

.alert-success {
    background-color: #21a67a
}

.alert-danger,
.alert-error {
    background-color: #ed3833
}

.alert-warning {
    background-color: #F39C12
}

.alert-info {
    background-color: rgba(39, 148, 210, 0.5);
    color: #343434 !important;
}

.body-loginBG {
    /* background-color: #41a870; */
    background-image: linear-gradient(#41a870, #0096dd);
}

.modal .alert-info {
    font-size: 90%;
}

.login-wrapper {
    align-items: flex-start;
}

.login-wrapper {
    display: flex;
    flex-basis: 100%;
    min-height: 100vh;
    width: 100%;
}

.login-wrapper .login-inner {
    height: 100vh;
}

.login-wrapper .login-inner {
    width: 100%;
}

.login-wrapper .loginbg {
    background-color: #fff;
}

.w-px-30 {
    width: 30px;
}

.w-px-32 {
    width: 32px;
}

.w-px-40 {
    width: 40px !important;
}

.w-px-50 {
    width: 50px;
}

.w-px-60 {
    width: 60px !important;
}

.w-px-64 {
    width: 64px;
}

.w-px-70 {
    width: 70px !important;
}

.w-px-75 {
    width: 75px !important;
    min-width: 75px !important;
}

.w-px-80 {
    width: 80px !important;
    min-width: 80px !important;
}

.w-px-90 {
    width: 90px !important;
    min-width: 90px !important;
}

.w-px-100,
.filter-container .w-px-90 {
    width: 100px !important;
    min-width: 100px !important;
}

.w-px-108 {
    width: 108px;
}

.w-px-110 {
    width: 110px !important;
    min-width: 110px !important;
}


.w-px-120 {
    width: 120px !important;
}

.w-px-130 {
    width: 130px !important;
}

.w-px-140 {
    width: 140px !important;
    min-width: 140px !important;
}

.w-px-160 {
    width: 160px !important;
}

.w-px-376px {
    width: 376px !important;
}

.w-px-376px .w-px-90 {
    width: 100px !important;
    min-width: 100px !important;
}

.mw-auto {
    min-width: auto !important;
}

.w-px-400 {
    width: 400px !important;
}

.w-px-445 {
    width: 445px !important;
}

.w-px-170 {
    width: 170px !important;
}

.w-px-180 {
    width: 180px !important;
}

.w-px-210 {
    width: 210px !important;
}

.w-px-220 {
    width: 220px !important;
}

.w-px-240 {
    width: 240px !important;
}

.w-px-150 {
    width: 150px !important;
}

.w-px-160 {
    width: 160px !important;
}

.w-px-177 {
    width: 177px !important;
}

.w-px-200 {
    width: 200px !important;
}

.w-px-220 {
    width: 220px !important;
}

.w-px-300 {
    width: 300px !important;
}

.w-px-250 {
    width: 250px !important;
}

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

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

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

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

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

.w-945 {
    max-width: 945px
}

/* form input height for Report/Approval filter */
.h-px-21 {
    height: 21px;
}

.h-px-31 {
    height: 31px;
}

.h-px-32 {
    height: 32px;
}

.h-px-150 {
    height: 150px;
}

.h-px-186 {
    height: 186px;
}

.h-px-200 {
    height: 200px;
}

.h-px-216 {
    height: 216px;
}

.h-auto {
    min-height: auto;
    height: auto;
}

/* Nav Nav Pill Tabs */
.nav.nav-pills {
    border-bottom: solid 1px #c1c1c1;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF
}

.nav-pills li.nav-item {
    padding: 0 0px;
    margin: 0 !important;
}

.nav-pills li.nav-item .nav-link {
    font-size: .875rem !important;
    min-height: 48px !important;
    min-width: 160px !important;
    color: #3178C6 !important;
    font-weight: 300;
    transition: color .28s ease, background-color .28s ease;
    background-color: #fff !important;
    border-radius: 0 0;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 0 0;
    border-bottom: solid 2px rgba(27, 49, 71, 0) !important;
    text-align: center !important;
    text-transform: uppercase;
    opacity: .7;
}

.nav-pills li.nav-item .nav-link:hover {
    color: #18599E !important;
    background-color: #fff !important;
    border-bottom: solid 2px rgba(27, 49, 71, 0) !important;
}

.addEditJobs.nav-pills li.nav-item .nav-link {
    color: rgba(0, 0, 0, 0.54) !important;
    background-color: #fff !important;
    border-bottom: solid 2px rgba(27, 49, 71, 0) !important;
}

.addEditJobs.nav-pills li.nav-item .nav-link:hover,
.addEditJobs.nav-pills li.nav-item .nav-link.active:hover,
.addEditJobs.nav-pills li.nav-item .nav-link:active {
    color: #18599E !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom: solid 2px rgba(27, 49, 71, 0) !important;
}

.addEditJobs.nav-pills li.nav-item .nav-link.active {
    color: #18599E !important;
    border-bottom: solid 2px #3178C6 !important;
}

.addEditJobs.nav-pills li.nav-item .nav-link.active:hover {
    color: #18599E !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom: solid 2px #3178C6 !important;
}

.nav-pills li.nav-item .nav-link.active,
.nav-pills li.nav-item .show>.nav-link {
    color: #3178C6 !important;
    background-color: #fff !important;
    border-bottom: solid 2px #3178C6 !important;
    opacity: 1;
}

.nav-pills li.nav-item:first-child .nav-link {
    border-radius: 0px 0px 0 0 !important;
}

.nav-pills li.nav-item:last-child .nav-link {
    border-radius: 0px 5px 0 0 !important;
}

.rating {
    font-size: 18px;
    margin-left: 20px;
}

.rating .bi-star-fill {
    color: #ffab00;
}

.rating .bi-star {
    color: rgba(67, 89, 113, .2);
}

.accordion.custom-accordian,
.card-header:after {
    /*font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px !important;*/
}

.custom-accordian a.lnkDetails {
    z-index: 1010 !important;
    position: absolute;
}

a.toggleDetails,
a.toggleDetails.collapsed {
    position: absolute;
    top: 0;
    right: 0;
}

/*.custom-accordian .card-header {background-color: white;}*/
/*.accordion.custom-accordian .toggleDetails:before {
    float: right;
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}
.accordion.custom-accordian .toggleDetails.collapsed:before {
    float: right;
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);*/
/*background-image: var(--bs-accordion-btn-active-icon);*/
/*transform: var(--bs-accordion-btn-icon-transform);
}*/
/*.accordion.custom-accordian .toggleDetails:before {
    float: right;
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}
.accordion.custom-accordian .toggleDetails.collapsed:before {
    float: right;
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);*/
/*background-image: var(--bs-accordion-btn-active-icon);*/
/*transform: var(--bs-accordion-btn-icon-transform);
}*/
.accordion.custom-accordian .toggleDetails {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.accordion.custom-accordian .toggleDetails span {
    width: 1.25rem;
    height: 1.25rem;
}

.accordion.custom-accordian .toggleDetails::after {
    float: right;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}

.accordion.custom-accordian .toggleDetails:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-icon);
    transform: rotate(-180deg);
}

.divider {
    display: block;
    text-align: center;
    margin: 1rem 0;
    overflow: hidden;
    white-space: nowrap;
}

.divider .divider-text {
    position: relative;
    display: inline-block;
    font-size: .8rem;
    padding: 0rem 1rem;
}

.divider .divider-text:after {
    left: 100%;
}

.divider .divider-text:before {
    right: 100%;
}

.divider .divider-text:before,
.divider .divider-text:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100vw;
    border-top: 1px solid rgba(67, 89, 113, .2);
}

.divider .divider-text:before,
.divider .divider-text:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100vw;
    border-top: 1px solid rgba(67, 89, 113, .2);
}

/* Schedule Calender control */
.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item {
    border: 1px solid #DADADA !important;
    margin-right: 4px;
    margin-bottom: 4px;
    background: #DADADA !important;
    padding: 0px 3px 2px 8px !important;
    color: #333 !important;
    border-radius: 10px !important;
    float: left;
    font-size: 12px !important;
    line-height: 1.5;
    font-weight: 400 !important;
}

.multiselect-dropdown a {
    color: #000 !important;
    font-size: 0 !important;
}

.multiselect-dropdown a:before {
    color: #888888 !important;
    font-weight: 700;
    font-family: 'bootstrap-icons';
    content: "\F62A";
    font-size: 20px;
    position: relative;
    top: 6px;
    padding: 0;
    margin: 0;
    line-height: 1px;
}

.h-40 {
    min-height: 40px !important;
}

.schContainer ul.listing {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* h5::after {
    content: "";
    position: relative;
    z-index: -1;
    display: block;
    height: 4px;
    margin: 0 0 -4px;
    background: -webkit-linear-gradient(top, #F1F1F1, #F1F1F1);
    background: -moz-linear-gradient(top, #F1F1F1, #F1F1F1);
    background: linear-gradient(to bottom, #F1F1F1, #F1F1F1);
} */

.modal-body.CreateSchedule .form-label {
    font-size: 12px !important;
    text-transform: uppercase;
    font-weight: 500 !important;
}

.dx-widget {
    font-family: inherit !important;
    font-weight: 300 !important;
}

.bg-light-gray {
    background-color: #f7f7f7;
}

.table-bordered thead td,
.table-bordered thead th {
    border-bottom-width: 2px;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 0px solid #dee2e6;
    font-weight: 500 !important;
}

.table-bordered td,
.table-bordered th {
    border: 1px solid #f4f4f4;
}


.bg-sky.box-shadow {
    box-shadow: 0px 5px 0px 0px #00a2a7
}

.bg-orange.box-shadow {
    box-shadow: 0px 5px 0px 0px #af4305
}

.bg-green.box-shadow {
    box-shadow: 0px 5px 0px 0px #4ca520
}

.bg-yellow.box-shadow {
    box-shadow: 0px 5px 0px 0px #dcbf02
}

.bg-pink.box-shadow {
    box-shadow: 0px 5px 0px 0px #e82d8b
}

.bg-purple.box-shadow {
    box-shadow: 0px 5px 0px 0px #8343e8
}

.bg-lightred.box-shadow {
    box-shadow: 0px 5px 0px 0px #d84213
}


.bg-sky {
    background-color: #02c2c7
}

.bg-orange {
    background-color: #e95601
}

.bg-green {
    background: #9ddb84;
    color: #356821;
}

.bg-yellow {
    background-color: #f0d001
}

.bg-pink {
    background-color: #ff48a4
}

.bg-purple {
    background-color: #9d60ff
}

.bg-lightred {
    background-color: #ff5722
}

.padding-15px-lr {
    padding-left: 15px;
    padding-right: 15px;
}

.padding-5px-tb {
    padding-top: 5px;
    padding-bottom: 5px;
}

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

.border-radius-5 {
    border-radius: 5px;
}

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

.font-size10 {
    font-size: 10px;
}

.font-size14 {
    font-size: 14px;
}

.font-size15 {
    font-size: 15px;
}

.text-light-gray {
    color: #d6d5d5;
}

.font-size13 {
    font-size: 13px;
}

.table>:not(:last-child)>:last-child>* {
    border-bottom-color: #dee2e6 !important;
}

.table-bordered td,
.table-bordered th {
    border: 1px solid #dee2e6;
}

.table td,
.table th {
    padding: .5rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table.customPadding td,
.table.customPadding th {
    padding: 0 0 .1rem 0;
    margin-top: .5rem;
}

.table td {
    background: #FFFFFF;
}

.table.v-align-middle td {
    vertical-align: middle !important;
}

/* Background bg */
.bg-danger {
    --bs-bg-opacity: .3;
    /* background-color: rgba(227, 72, 39, .3) !important;
    color: #E34827 !important */

    background-color: #FBE3E4;
    color: #D12F19;
}

.bg-danger-approvedTS {
    --bs-bg-opacity: .3;
    background-color: #FBE3E4 !important;
    border: solid 1px #fbc2c4;
    padding: 8px;
    margin-bottom: .5rem;
}

.bg-danger-approvedTS label {
    color: #D12F19 !important;
}

.bi-building-fill-gear {
    content: "\F871";
}

.bi-ban::before {
    content: "\F6B6";
}

.form-check-input {
    margin: 0.35em 0.5em 0 0;
}

.form-check-input.s-24 {
    width: 24px;
    height: 24px;
    margin-top: 0;
}

.form-check-input:checked {
    background-color: #3178C6;
    border-color: #3178C6;
}

.spacer {
    font-size: 80%;
    margin: 0 7px;
    color: #333333;
}

.timeSlider div {
    background: url(../images/TimeSlider_bg.png) repeat-x;
}

.form-control-color {
    height: 28px;
    width: 30px;
}

/* Button Group */
.btn-group .btn.btn-outline-primary {
    padding: 3.5px 10.6px !important;
    min-width: auto !important;
}

.btn-outline-primary:hover {
    background-color: transparent !important;
}

.btn-group span {
    border: solid 1px #22538A;
}

.btn-group span:not(:last-of-type) {
    border-right: none;
}

.btn-group span label {
    color: #3178c6 !important;
    border-radius: 0;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.btn-group span:first-child {
    border-radius: 3px 0 0 3px !important;
}

.btn-group span:last-child {
    border-radius: 0 3px 3px 0 !important;
}

.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:nth-child(n+3),
.btn-group>:not(.btn-check)+.btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

button.btn.btn-sm.btn-secondary {
    box-shadow: none !important;
}

.btn-group.btn-group-secondary .btn-secondary {
    border: 1px solid rgba(0, 0, 0, 0.23) !important;
    color: rgba(0, 0, 0, 0.87) !important;
    background: white !important;
}

.btn-group.btn-group-secondary .btn-secondary:hover {
    border-bottom: 2px solid #999 !important;
}

.btn-group.btn-group-secondary .btn-primary {
    border-bottom: solid 2px #3178C6 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.23) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.23) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.23) !important;
    background: white !important;
    color: #3178C6 !important;
    box-shadow: none !important;
    /* border-radius: 2px !important; */
}

.btn-group.btn-group-secondary .btn {
    /* border: 1px solid rgba(0, 0, 0, 0.23) !important; */
    border-radius: 2px !important;
    line-height: 28px;
    height: 32px;
}

.btn-group.btn-group-secondary>.btn-group.btn-group-secondary:not(:first-child)>.btn,
.btn-group.btn-group-secondary>.btn:nth-child(n+3),
.btn-group.btn-group-secondary>:not(.btn-check)+.btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
    background-color: #3178C6 !important;
    color: #fff !important;
    /* --bs-btn-color: #3178C6;
    --bs-btn-border-color: #007ABF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #007ABF;
    --bs-btn-hover-border-color: #3178C6;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3178C6;
    --bs-btn-active-border-color: #3178C6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #3178C6;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #3178C6;
    --bs-gradient: none; */
}

hr {
    opacity: 0.15 !important;
}

/* TimeEntries Submit time */
.table td.td-group {
    top: 32px;
    left: 0;
    height: 24px;
    z-index: 5;
    position: sticky;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #DADADA !important;
    padding: 0.155em .5em !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.table td.td-group i {
    font-size: 12px !important;
}

.submitTimesheet {
    max-height: 305px;
    height: 305px;
    overflow-y: auto;
    overflow-x: hidden;
}

.submitTime span {
    width: 100%;
    display: block;
}

.submitTimesheetTable {
    /* text-align: center; */
    width: 100%;
    border-top: solid 1px #dee2e6 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    text-align: center;
}

.submitTime_date {
    font-size: 95%;
}

td .submitTime_minutes {
    font-size: 16px;
    font-weight: 500;
}

.submitTime_minutes {

    color: #333;
    font-size: 36px;
    margin-top: 8px;
    font-weight: bold;
    display: block;
    line-height: 36px;
}

.submitTime input {
    height: 18px !important;
    width: 18px !important;
}

.submitForm_footer {
    background-color: #f1f1f1 !important;
    padding: 10px !important;
}

select.form-select.selectType {
    width: 160px !important;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    opacity: .65 !important;
    padding: 0 !important;
    margin: -10px !important;
    height: calc(1.8rem + 2px) !important;
}

.dropend::after {
    content: "\F285";
    position: absolute;
    /* top: 15%; */
    right: 10px;
    font-family: 'bootstrap-icons' !important;
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    border: 0px solid;
}

.dropdown-menu {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.20);
    animation: dropdownAnimation .1s;
    padding: 0 !important;
    border: transparent !important;
    font-size: 14px !important;
}

.dropdown-menu.profile_dropdownMenu {
    background: #fefefe;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.20);
    width: 300px;
    outline: none;
    position: absolute;
    right: 10px;
    top: 64px;
    z-index: 1060;
}

.dropdown-menu.p-4 {
    padding: 1.5rem !important;
}

.dropdown-item {
    color: rgba(27, 49, 71, 1) !important;
    border-color: transparent !important;
    line-height: 1.54 !important;
    padding: 5px 15px !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #333333;
    background-color: #F1F1F1;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #333333;
    background-color: #F1F1F1;
}

/* Reponsive Bootstrap missing classes */
@media (max-width: 576px) {

    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        margin-bottom: 0.8rem;
    }
}


/* Left nav Pills */
.nav-align-left .nav-pills .nav-link {
    color: #333333 !important;
    background: #fff !important;
    border: solid 0px #fff !important;
    background-color: #FFF !important;
    white-space: nowrap;
    text-align: left !important;
    padding: 8px 16px !important;
}

.nav-align-left .nav-pills .nav-link.active {
    color: rgba(27, 49, 71, 1) !important;
    background: #fff !important;
    background-color: #f1f1f1 !important;
    font-weight: 400 !important;
}

.nav-align-left .nav-pills {
    border-right: 1px solid #DADADA !important;
    padding: 0 0px 0 0 !important;
}

.nav-align-right,
.nav-align-left {
    align-items: stretch
}

.nav-align-right>.nav,
.nav-align-right>div>.nav,
.nav-align-left>.nav,
.nav-align-left>div>.nav {
    flex-grow: 0;
    flex-direction: column
}

.nav-align-top,
.nav-align-right,
.nav-align-bottom,
.nav-align-left {
    display: flex;
}

.nav-align-right>.tab-content,
.nav-align-left>.tab-content {
    flex-grow: 1
}

.nav-align-top>.nav,
.nav-align-top>div>.nav,
.nav-align-right>.nav,
.nav-align-right>div>.nav,
.nav-align-bottom>.nav,
.nav-align-bottom>div>.nav,
.nav-align-left>.nav,
.nav-align-left>div>.nav {
    border: 0;
    z-index: 1;
    position: relative;
    min-height: calc(100vh - 196px);
}

.nav-align-right>.nav,
.nav-align-left>.nav {
    background: #FFF !important;
}

.nav-align-left>.tab-content {
    padding: 0 0.375rem 0.375rem 0.375rem;
}

.nav-align-top>.tab-content,
.nav-align-right>.tab-content,
.nav-align-bottom>.tab-content,
.nav-align-left>.tab-content {
    flex-shrink: 1;
    border: 0 solid #d9dee3;
    /* box-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%); */
    background-clip: padding-box;
    background: #fff;
}

.nav-align-right>.tab-content,
.nav-align-left>.tab-content {
    flex-grow: 1;
    /*max-height: calc(100vh - 196px);
    overflow-y: auto;
    overflow-x: hidden;*/
}

.tab-content>.active {
    display: block;
}

/* Report Layout */
.btn-ReportFilter {
    border-radius: 0 0 7px 7px;
    padding: 0 20px;
    background-color: #d5e4f5;
    border: none;
    cursor: pointer;
    position: relative;
    top: -1px;
    padding: 0 20px;
    height: 26px;
    line-height: 26px;
    background: #eee url(../images/filter_up.png) no-repeat 94% center;
    padding-right: 30px;
    font-size: 12px;
    z-index: 10;
    font-weight: bold;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.09);
    font-family: Arial;

    border: solid 1px #ccc;
    border-radius: 0 0 7px 7px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.09);
    border-top: 0px;
}

.btn-ReportFilter.collapsed {
    height: 26px;
    line-height: 26px;
    padding-right: 30px;
    background: #d5e4f5 url(../images/filter_down.png) no-repeat 94% center;

}

.btn-ReportFilter.collapsed:hover {
    height: 30px;
    line-height: 30px;

}

.divreportFilter {
    position: absolute;
    top: 40px;
    z-index: 1000;
    right: 20px;
    width: 70%;
    max-width: 900px !important;
    /* background-color: #eee !important; */
}

.divFilterExport {
    position: fixed;
    top: 50px;
    right: 20px;
    z-index: 1000;
}

#ReportMain {
    max-height: 100px;
}

.customDropMenu {
    padding: 1rem !important;
    min-width: 360px;
    /* width: 640px !important; */
    /* font-size: 90% !important; */
    background-color: #eee !important;
    border: solid 1px #ccc;
    border-radius: 0 0 7px 7px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.09);
}

/* 
.customDropMenu .form-control {
    font-size: 93% !important;
}

.customDropMenu label {
    font-size: 93% !important;
} */

.paymentWidgets {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
}

.paymentWidgets_container {
    margin-right: 10px;
    display: flex;
    /*line-height: normal !important;*/
    border-radius: 3px 3px 3px 3px !important;
}

.paymentWidgets_container small {
    font-size: 10px !important;
    font-weight: normal;
    line-height: 10px;
}

.paymentWidgets_container .paymentWidgets_dashboard.full-size {
    margin: 0px 0px 10px 0px !important;
    padding: 10px 10px 0 10px !important;
    height: 76px !important;
}

.paymentWidgets_dashboard {
    margin: 0px 10px 10px 0px;
    text-align: center;
    padding: 3px 10px 0 10px;
    /*background: #9ddb84;
    color: #356821;*/
    font-weight: bold;
    float: none;
    margin: 0;
    height: 38px;
}

.br-all {
    border-radius: 4px !important;
}

.br-t-r {
    border-radius: 0 4px 0 0 !important;
}

.br-b-r {
    border-radius: 0 0 4px 0 !important;
}

.br-tl-bl {
    border-radius: 4px 0 0 4px;
}

.br-tr-br {
    border-radius: 0 4px 4px 0;
}

.br-tl-tr {
    border-radius: 4px 4px 0 0 !important;
}

.br-br-bl {
    border-radius: 0 0 4px 4px !important;
}

.divReportDetails .accordion-header {
    width: 100%;
}

.divReportDetails .accordion-body {
    padding: 1rem 1.25rem;
    background: #F1F1F1;
}


.divReportDetails .badge+.badge {
    margin-left: 1rem
}

.reportCalender {
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    overflow-y: hidden;
    background-color: #E0E0E0;
    /* padding: 0.5rem 0; */
    margin: 0rem -1.25rem !important;
}

.reportCalender .card {
    display: inline-block;
    min-width: 56px;
    text-align: center !important;
    float: none;
    margin-left: 13px;
    margin-top: 15px;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

.reportCalender .card.weekend {
    background: #eee;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.reportCalender .card .card-body {
    text-align: center;
    padding: 3px;

}

.dayWeek {
    color: #888;
    margin-bottom: 9px;
    border-bottom: 1px solid #888;
}

.dayHour {
    background: #999;
    color: #eee;
    text-align: center;
    padding: 7px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: bold;
    display: block;
}

.dayNumber {
    color: #888;
    margin-top: 3px;
}


@media only screen and (max-width: 700px) {
    .divFilterExport {
        position: inherit !important;
        z-index: 1000;
        margin-bottom: 1rem;
    }
}

.OvertimeDetails {
    /* max-height: 254px;
    overflow-x: auto; */
}


.bg-straight {
    background-color: #dbb784 !important;
    color: #684b21 !important;
}

.bg-unpaidBreak {
    --bs-bg-opacity: .3;
    background-color: rgba(255, 255, 255, 0) !important;
    border-color: rgb(255, 164, 74) !important;
    border: solid 1px;
    color: rgb(107, 60, 25) !important;
}

.bg-overtime {
    --bs-bg-opacity: .3;
    background-color: rgba(255, 255, 255, 0) !important;
    border-color: #db8484 !important;
    border: solid 1px;
    color: rgba(0, 0, 0, .5) !important;
}

.bg-break {
    --bs-bg-opacity: .3;
    background-color: rgb(255, 164, 74) !important;
    color: rgb(107, 60, 25) !important;
    /* border: solid 1px; */
}

.reportFilter_Scroll {
    max-height: calc(100vh - 440px);
    overflow-y: auto;
    overflow-x: hidden;
}

.reportfilter_boxshadow {
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.09);
}

.saparator {
    /* font-size: 12px; */
    line-height: 20px;
    margin: 0 8px;
    opacity: 0.5;
}

td.tdButton {
    width: 100px
}

td.tdButton .btn+.btn {
    margin: 6px 0 0 !important
}

td.tdButton button {
    min-width: 80px
}

.divApprovalStatus {
    padding: 8px;
    background: #fff;
    border: 1px solid #dadada;
    position: relative;
    width: 465px;
    float: right;
    margin-bottom: 6px;
}

.approvalSummary {
    font-size: 10px;
    word-break: break-word;
}

.divApprovals_plus {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
}

.divLegend_Container {
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 6px;
    margin-bottom: 6px !important;
}

.divLegend span {
    padding: 0.2rem 1.4rem !important;
    font-size: 12px;
}

.btn-toolbar.divLegend span {
    border: solid 1px #ccc;
}

.btn-toolbar.divLegend span:nth-of-type(2n) {
    border-width: 1px 0;
}

/* Custom Popup Window width*/
#TimeClockdiv {
    max-width: 380px;
}

.headerClass {
    background-color: #DADADA;
    font-size: 16px;
    border-top: 1px solid #c1c1c1;
    border-left: 1px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}

.closeButtonFooter {
    background-color: #DADADA !important;
    color: #333333 !important;
}


/* Common Angular classes */
/* input:disabled, .form-control:disabled, .form-control[readonly] {
    cursor: default;
    background-color: #fafafa !important;
    color: #777777 !important;
    border-color: #DDDDDC !important;
    opacity: 1 !important;
} */

.time {
    color: #333333 !important
}

.fixed-top {
    z-index: 990 !important;
}

input:disabled,
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    cursor: default;
    background-color: #f8f8f8 !important;
    color: #545454 !important;
    border-color: #d0d0d0 !important;
    opacity: 1 !important;
}


.f-300 {
    font-weight: 300 !important;
}

.f-400 {
    font-weight: 400 !important;
}

.f-500 {
    font-weight: 500 !important;
}

.f-600 {
    font-weight: 600 !important;
}

.f-700 {
    font-weight: 700 !important;
}

.f-36 {
    font-size: 36px !important
}

.f-8 {
    font-size: 8px !important
}

.f-9 {
    font-size: 9px !important
}

.f-10 {
    font-size: 10px !important
}

.f-11 {
    font-size: 11px !important
}

.f-12 {
    font-size: 12px !important
}

.f-13 {
    font-size: 13px !important
}

.f-14 {
    font-size: 14px !important
}

.f-15 {
    font-size: 15px !important;
}

.f-16 {
    font-size: 16px !important;
}

.f-18 {
    font-size: 18px !important;
}

.f-20 {
    font-size: 20px !important;
}

.f-21 {
    font-size: 21px !important;
}

.f-24 {
    font-size: 24px !important;
}

.f-25 {
    font-size: 25px !important;
}

.f-34 {
    font-size: 34px !important;
}

.msgtoMember {
    color: rgba(0, 0, 0, 0.87);
    padding: 21px 18px;
    font-size: 14px;
    margin-top: 10px;
    line-height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #f1f1f1;
}

.navSidebar-section {
    display: flex;
}

.navSidebar-sidenav {
    display: inline-block;
    width: 200px;
    border-right: solid 1px red;
}

.navSidebar-Content {
    display: inline-block;
    vertical-align: top;
    min-width: 100%;
    padding: 0 10px 10px;
}

.navSidebar-sidenav-lnk {
    font-size: 14px;
    font-family: 'ClearSans', sans-serif;
    background-color: #FFFFFF;
    line-height: 19px;
    cursor: pointer;
    min-width: 177px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333333;
    padding: 7px 24px;
    display: block;
    border: none;
}

.companySettingContent {
    padding: 14px 23px !important;
    background-color: #f1f1f1 !important;
}

.companySettingContent .form-label {
    color: #333;
    font-size: 13px;
    font-weight: 300;
    vertical-align: inherit;
    padding: 0 !important;
    margin: 0;
}

/* #Notification-Tab.tab-pane .tab-contentScroll {
    max-height: calc(100vh - 259px) !important;
    min-height: calc(100vh - 259px) !important;
} */
.tab-contentScroll {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.38) !important;
    margin-bottom: 9px;
    /* padding: 14px 23px; */

    max-height: 390px !important;
    min-height: 390px !important;
    /* width: 471px; */
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}

.profileContentScroll {
    background-color: #f1f1f1;
    /* border: 1px solid rgba(0, 0, 0, 0.38) !important; */
    margin-bottom: 9px;
    /* padding: 14px 23px; */

    max-height: calc(100vh - 259px) !important;
    min-height: calc(100vh - 259px) !important;
    /* width: 471px; */
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}

.tab-contentScroll .tab-content {
    max-height: 339px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}

.tabTitle {
    font-size: 14px;
    -webkit-margin-before: 0;
    margin-block-start: 0;
    -webkit-margin-after: 0;
    margin-block-end: 0;
    display: inline-block;
    font-weight: 700 !important
}

ul.list-group.border-0 li {
    border: 0px !important;
}

/* .mat-mdc-dialog-container .mdc-dialog__surface {background-color:  transparent !important;} */
/* .mat-mdc-dialog-container {
    width: inherit !important;
} */
/* .mat-mdc-dialog-container .mdc-dialog__surface {
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2) !important;
    border-radius: 3px !important;
    border: solid 1px #c1c1c1 !important;
    overflow-y: hidden;
} */

/* Notification Dropdown */
.notification_dropdownMenu {
    font-family: 'ClearSans', sans-serif;
    width: 400px;
    border-radius: 3px;
    position: relative;
    top: 8px;
    left: 3px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.20);
    z-index: 10000000 !important;
    /* top: 60px !important;
    left: calc(100vw - 600px) !important;
    position: fixed !important;
    transform: unset !important; */
}

.notification-header {
    border-radius: 3px 3px 0 0;
    background-color: #F1F1F1;
    position: relative;
    width: 100%;
    padding: 12.64px 0px;
    line-height: 16px;
    color: #333333 !important;
    border-bottom: 1px solid #DADADA !important;
}

.notification-item {
    font-size: 14px;
    padding: 13px 13px 18px 13px;
    color: #666;
}

.nf-date {
    font-size: 0.8em;
    color: #999999;
    margin-bottom: 7px;
}

.nf-close {
    color: #666666 !important;
}

.nf-title {
    display: block;
    font-size: 1.17em;
    font-weight: bold;
}

/* who's working style */
#whosworking-modal .modal-content,
#loggedInLocation .modal-content {
    height: calc(100vh - 90px) !important;
    max-height: none !important;
}

#whosworking-modal .modal-body,
#loggedInLocation .modal-body {
    padding: 0 !important;
}

#whosworking-modal {
    /* max-width: 344px; */
}

#whosworking-modal.mapOn {
    width: 80% !important;
    max-width: 1027px;
    transition: all 0.5s ease !important;
}

.working-container {
    width: 100%;
    max-width: 344px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    background-color: #F1F1F1;
    height: 100vh;
    transition: all 0.5s ease !important;
}

.working-container.mapOn {
    top: 10px;
    right: 10px;
    height: calc(100vh - 150px);
    transition: width 167ms ease-in-out !important;
}

.list-wrapper {
    max-height: calc(100vh - 228px);
    overflow-y: auto;
}

.mapOn .list-wrapper {
    max-height: calc(100vh - 248px) !important;
}

.workinglist {
    border: 1px solid;
    border-color: #DADADA #DADADA transparent;
    /*max-height: 380px;*/
    border-radius: 3px;
    /* overflow-y: auto; */
    overflow-x: hidden;
    background-color: #FFFFFF;
}

.divWorkingList {
    border-bottom: 1px solid #DADADA;
    padding: 2px 6px 4px 4px;
    color: #666;
}

.divWorkingList:hover {
    /* background-color: #F1F1F1; */
    /* background-color: #3178C6;
    color: white; */
}

.divWorkingList .displayName {
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 14px;
    max-width: 172px;
}

.workinglist.notworking {
    margin-top: -0.1rem;
}

.notworking .divWorkingList .displayName {
    font-weight: 400 !important;
    font-size: 14px;
    max-width: 172px;
}

.divWorkingList .displayProjectName {
    color: #666 !important;
    font-weight: 300 !important;
    font-size: 12px;
    max-width: 170px;
}

.avatar {
    border-radius: 50%;
    font-weight: 300 !important;
    text-align: center;
    position: relative;
    background-color: #DADADA;
}

.avatar.w-32,
.avatar.w-32 img {
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.user_status {
    display: block;
    background: #46a657;
    transform: rotate(45deg) translate(16px) rotate(-45deg);
    z-index: 1;
    border: 2px solid #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: -80%;
    right: 50%;
    margin: -2.5px;
}

.avatar_status {
    display: block;
    background: #46a657;
    transform: rotate(45deg) translate(16px) rotate(-45deg);
    z-index: 1;
    border: 2px solid #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2.5px;
}

.avatar_inactive_status {
    display: block;
    background: #4d4f4e;
    transform: rotate(45deg) translate(16px) rotate(-45deg);
    z-index: 1;
    border: 2px solid #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2.5px;
}

#lnkMap {
    font-weight: 700;
    min-width: 70px !important;
    max-width: 60px !important;
}

#lnkMap sup.supmap {
    left: -0.8em;
    border: solid 0px #DADADA !important;
    background-color: #DADADA;
    top: -1em;
    border-radius: 50%;
    font-size: .75em !important;
}

#lnkMap sup.supmap i {
    font-size: 90% !important;
}

#lnkMap i {
    font-size: 18px;
    color: #000000 !important;
}

#lnkMap span {
    margin-left: -6px;
}

#lnkMap.btn-gray,
#lnkMap.btn-gray i {
    /* color: white !important; */
}

.mapOn #lnkMap.btn-gray,
.mapOn #lnkMap.btn-gray i {
    color: white !important;
    background-color: #3178C6 !important;

}

#lnkMap.btn-gray sup.supmap {
    /* background-color: #3178C6; */
}

/* accordian customise */
.workinglist .collapsed:hover {
    background: #f1f1f1;
}

.workinglist .accordion-body {
    padding: 2px !important;
}

.workinglist .accordion-item>div:not(.collapsed) {
    /* color: #333333 !important;
    background-color: #eee !important;
    color: #ffffff !important; */
    background-color: #1F7BC6 !important;
}

.divWorkingList .accordion-item:hover>div:not(.collapsed) {
    background-color: #116db8 !important;
}

.accordion-item>div:not(.collapsed) .divWorkingList,
.accordion-item>div:not(.collapsed) .displayName,
.accordion-item>div:not(.collapsed) .displayProjectName {
    /* .accordion-item>div:not(.collapsed) div { */
    color: #fff !important;
}

.accordion-item>div:not(.collapsed) i {
    color: #acc9e8 !important;
}

.accordion-item>div:not(.collapsed) .text-danger {
    color: #f99 !important;
}

.accordion-body .divForm_bg {
    background-color: #333333 !important;
    margin: -1rem -1.25rem 0rem !important;
    padding: 5px 20px !important;
}

.accordion-body .divForm_bg a {
    color: #ffffff !important;
}

/* User name truncate */
span.displayName,
.companyDisplay {
    display: block;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.whowork-displayName {
    display: block !important;
    max-width: 172px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #333 !important;
    white-space: nowrap;
}

.accordion-item>div:not(.collapsed) .whowork-displayName {
    color: #fff !important;
}



.scanContainer,
.scan_content {
    width: 470px;
    margin: 0 auto;
}

.scanContainer_print {
    width: 90%;
    margin: 0 auto;
    display: block;
}

.scanner_Print {
    width: 360px;
    border-radius: 20px;
    border: 2px solid #dee2e6;
    padding: 20px;
    text-align: center;
    margin: 2rem auto;
    box-shadow: 0px 2px 6px rgb(1 41 112 / 12%);
}

.scan_codenumber {
    text-align: center;
    font-size: 18px;
    letter-spacing: 4px;
    color: #77787a;
    font-weight: 300;
    margin: 0.5rem;
}

.circle-singleline {
    margin: 20px auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    border: solid 1px #808080;
    color: #808080;
    font-weight: 500;
}

.mb-6 {
    margin-bottom: 2.5rem !important;
}

.mat-mdc-icon-button.mat-mdc-button-base {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
}

mat-mdc-icon-button .mat-mdc-button-touch-target {
    position: absolute;
    top: 50%;
    height: 20px !important;
    left: 50%;
    width: 20px !important;
    transform: translate(-50%, -50%);
}

.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-indeterminate,
.mat-accent .mat-pseudo-checkbox-checked,
.mat-accent .mat-pseudo-checkbox-indeterminate {
    background: white !important;
}

.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
    background: white !important;
}

.mat-pseudo-checkbox::after {
    color: #3178C6 !important;
}

.mat-pseudo-checkbox::before {
    color: #fafafa;
}

/* ============ desktop view ============ */

.dropdown-menu {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu>li:hover {
    background-color: #f1f1f1
}

.dropdown-menu>li:hover>.submenu {
    display: block;
}

/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
    .dropdown-menu .dropdown-menu {
        margin-left: 0.7rem;
        margin-right: 0.7rem;
        margin-bottom: .5rem;
    }
}

/* ============ small devices .end// ============ */
/* .navbar-nav .nav-link {
  color: #fff;
}
.dropend .dropdown-toggle {
  color: salmon;
  margin-left: 1em;
}
.dropdown-item:hover {
  background-color: lightsalmon;
  color: #fff;
}
.dropdown .dropdown-menu {
  display: none;
}
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
}
@media screen and (min-width: 769px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }
  .dropend .dropdown-toggle {
    margin-left: 0.5em;
  }
} */
.list-group.custom.h-150 {
    height: 150px;
    border: 1px solid #DADADA;
    overflow-y: auto;
}

.list-group.custom .list-group-item {
    border: 0px;
}

.list-group.custom .list-group-item:hover,
.list-group.custom .list-group-item:active {
    background: #F1F1F1;
}

.form-control-thin {
    padding: 0px 1px !important;
    border: solid 1px #DADADA;
}

.mandatory {
    color: #DF1F26;
}

hr.menu_line {
    border: solid 1px white !important;
    height: 1px !important;
    margin: 6px 0 !important;
}

.rotate-30 {
    rotate: 30deg;
}

.nav-tabs.nav-custom {
    background: url(../images/tab_header_bg.png) repeat-x top;
}

.nav-tabs.nav-custom .nav-link.active {
    font-size: 18px !important;
    height: 55px;
    margin-top: 0px;
    min-width: 150px;
    text-align: center;
    font-size: 18px;
    font-weight: 700 !important;
    cursor: pointer;
    letter-spacing: -1px;
    background: white !important;
    border-radius: 8px 8px 0 0;
}

.nav-tabs.nav-custom .nav-link {
    font-size: 13px !important;
    margin-top: 20px;
    height: 35px;
    line-height: 26px;
    min-width: 145px;
    border: 1px solid #C1C1C1 !important;
    border-bottom-width: 0 !important;
    background: #eeeeee !important;
    font-weight: normal;
    color: #555555 !important;

}

.approvalDetail_NameTab {
    height: 50px;
    min-width: 143px;
    background: rgb(51, 51, 51);
    z-index: 9;
    border-radius: 7px 7px 0px 0px;
    color: white;
    font-size: 17px;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
    padding: 0 21.4px;
}

.p-7 {
    padding: 7px !important;
}

.brd_btmSilver {
    padding: 0px 20px 0 20px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 10px;
}

.table.no-border td {
    border: 0px;
}

table.table.no-border.p-0 td {
    padding: 0 !important;
}

table.table.no-border.p-0.w-auto td:first-child {
    padding-right: 20px !important;
}

.card-body.h-auto {
    max-height: none !important;
    overflow: none;
}

.badge-success {
    background-color: #237d33 !important;
    color: #fff !important;
}

.radius-16 {
    border-radius: 16px;
}

.badge-approved {
    border: none;
    display: inline-flex;
    outline: 0;
    padding: 0px 10px !important;
    font-size: 13px;
    /* box-sizing: border-box; */
    /* transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; */
    align-items: center;
    font-family: ClearSans-Light-Actual, ClearSans, sans-serif;
    white-space: nowrap;
    border-radius: 16px;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    background-color: #237d33;
    color: #FFF;
}

/* TimeEditor form table */
.tableTimeEditor-container {
    padding: 13px 13px 0px 13px;
    min-width: 500px;
    background-color: #f1f1f1 !important;
}

table.tableTimeEditor {
    width: 100%;
}

table.tableTimeEditor td.lblForm {
    width: 95px;
}

.tableTimeEditor td {
    padding: 0 0px 10.3px;
}

table.tableTimeEditor tbody tr:nth-child(2n+1) {
    background-color: transparent !important;
}

.settingformInput {
    height: 38px;
    border-width: 2px !important;
    border-style: inset !important;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)) !important;
    border-image: initial !important;
}

.settingformInput:hover {
    box-shadow: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)) !important;
}

.settingformInput:focus {
    box-shadow: none !important;
    outline: -webkit-focus-ring-color auto 1px;
}

/* Pay Rate Engine */
.settingList {
    max-height: calc(100vh - 240px);
    overflow: auto;
}

.PayRateEngine {
    /* padding: 8px 0 0 0; */
    max-height: 330px;
    /* width: auto; */
    overflow-y: auto;
    overflow-x: hidden;
    /* margin: 0; */
}

.PayRateEngine-card .row {
    min-height: 22px;
    height: 22px;
}

.PayRateEngine-card {
    height: 141px;
    background: #FFFFFF;
    border: 1px solid #dadada;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 3px;
    cursor: pointer;
    padding: 15px;
    margin-bottom: 1.4rem;
    position: relative;
}

.PayRateEngine-menu {
    fill: #999999;
    padding: 5px 5px 0 0;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
}

.policy-title {
    height: 72px;
}

.PayRateEngine-card:hover {
    border: 1px solid #CFCFCF;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.30);
}

.PayRateEngine .badge {
    font-weight: inherit;
    border-radius: 10px;
    padding: 0 7px;
    font-size: 11px;
    color: #666666;
    line-height: 20px;
}

.tab-content .sticky-bottom {
    bottom: -10px !important
}

/* Timesheet Editor */
.timesheet-body {
    /* max-height: 476px !important; */
    overflow-y: auto;
}

.divTimeSheet .divTimeSheet_label {
    font-weight: 500;
    font-size: 12px;
    color: #666666;
    vertical-align: inherit;
    text-transform: uppercase;
    /* height: 30px; */
    padding-right: 19px;
    width: 104px;
    min-width: 104px;
}

.edit_timesheetIco {
    background: url(../images/timecard_edit.png) top;

    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    border: 0;
    outline: 0;
}

.accordion-item>div:not(.collapsed) .edit_timesheetIco {
    background: url(../images/timecard_edit.png) bottom;
}

/* customTable for Invite member */
.table.border-0 tr,
.table.border-0 td {
    border: 0px !important;
}

.table.border-0 tr:hover,
.table.border-0 td:hover {
    background-color: transparent !important;
}

/* Freeze Table Header,footer and first colomn */
div.customTable {
    max-width: 100%;
    max-height: 282px;
    overflow-y: scroll;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

div.customTable .table thead th {
    border-bottom-color: #c1c1c1 !important;
}

div.customTable table {
    position: relative;
    border-collapse: collapse;
}

div.customTable tbody tr:nth-child(2n+1) {
    background-color: #fff !important;
}

div.customTable tbody tr:hover td {
    background-color: #eaf1f9 !important;
}

div.customTable tbody tr td.headerClass,
.bg-grayDA {
    background-color: #DADADA !important;
}


div.customTable tbody td {
    font-size: 14px;
    color: #333333;
    padding: 4px 10px 0 10px;
    line-height: 2;
}

div.customTable thead.white th {
    background-color: #fff !important;
}

div.customTable thead th {
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    top: 0;
    background: #eee !important;
    color: rgba(51, 51, 51, 0.7);
    font-size: 13px;
    font-weight: 700;
    height: 30px;
}

div.customTable tfoot th {
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    top: 100;
    background: #000 !important;
    color: #FFF;
}

div.customTable thead th:first-child,
div.customTable tfoot th:first-child {
    left: 0;
    z-index: 999;
}

div.customTable tbody th {
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    left: 0;
    background: #FFF;
    border-right: 1px solid #CCC;
}

input.chklg {
    height: 18px;
    width: 18px;
}

.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Time Entries */
.align-top td,
.align-top th {
    vertical-align: top !important;
}

td.weekend {
    text-align: center;
    font-weight: normal;
    background-color: #ebe9d6;
    border-top: 1px solid #DADADA;
    border-right: 1px solid #DADADA;
    border-bottom: 2px solid #DADADA;
    padding: 6px 2px;
}

.timeCard td input {
    text-align: right;

    padding: 3px 4px 1px 1px;
    width: 70px;
    text-align: right;
    border: none;
    height: 24px;
    line-height: 24px;
}

.timeCard td input:focus {
    /* background-color: #529214; */
    background-color: #E6EFC2 !important;
    border: 2px solid #529214 !important;
    height: 20px !important;
    width: 66px !important;
}

button.btn.btn-primary.w-px-165 {
    width: 108px;
}


/* Time Slider */
.timeslider-week {
    /* width: 642px; */
    text-align: center;
    margin: 1rem auto;
}

.timeslider-week a.day {
    background-color: rgb(255, 255, 255);
    font-size: 12px;
    cursor: pointer;
    padding: 4.39px 5px;
    vertical-align: middle;
    color: rgb(95, 95, 95) !important;
    white-space: nowrap;
    border-top: 1px solid rgb(218, 218, 218);
    border-bottom: 1px solid rgb(218, 218, 218);
    border-right: 1px solid rgb(218, 218, 218);
    display: inline-block;
}

.timeslider-week a.day.active {
    background-color: rgb(95, 95, 95);
    color: #fff !important;
}

.weekstart {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(218, 218, 218);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: rgb(235, 233, 214) !important;
}

.weekend {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(218, 218, 218);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgb(235, 233, 214) !important;
}

.timeslider-bordertop {
    border-top: 2px solid black;
}

.timeslider-user {
    float: right;
    overflow: hidden;
    color: white;
    background-color: #5f5f5f;
    width: 100px;
    padding: 2px 4px;
    margin: 0px 0px 0px 2px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    white-space: nowrap;
}

.timeslider-left {
    width: 140px;
    border-right: 2px solid black;
    padding-right: 5px;
    text-align: right;
}

.timeslider-left input.adduser {
    border: 1px solid #DADADA;
    color: Black;
    background-color: white;
    vertical-align: middle;
    padding: 1px;
    display: inline;
    font-size: 1em !important;
    width: 120px;
    padding: 1px !important;
    height: 20px !important;
    margin-top: 0.5rem;
}

.timeslider-left .btnaddUser {
    font-size: 12px;
    min-width: 60px;
    padding: 3px 7px 3px 7px;
    background-color: #DADADA;
    color: #333333;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
    font-weight: 500;
    margin: 4px;
    font-weight: 300 !important;
}

.timeEntries-tabs {
    background: #dadada !important;
    border-top: solid 1px #c1c1c1;
}

.accordion-button::before {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: auto;
    content: "";
    background-image: url("../images/accor_plus.png");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
    margin-right: 0 !important;
    margin-left: auto;
}

.accordion-button:not(.collapsed)::before {
    background-image: url("../images/accor_minus.png");
}

.accordion-button:before,
.accordion-button:not(.collapsed):before {
    background-size: 100%;
}

.accordion-button::after {
    display: none;
}

/* max body height */
.card-body.PayRollReportBody {
    max-height: calc(80vh - 42px) !important;
}

.PayrollReportBody .accordion-item {
    background-color: #fff;
    border: 0px;
    border-bottom: 1px solid #ccc;
}

.PayrollReportBody .accordion-body {
    padding: 1rem 1.25rem;
    background: #f1f1f1;
}

.PayrollReportBody .table td {
    border-top: 1px solid #cccccc !important;
}

.Copybutton-badge {
    background: #DF1F26 !important;
    border-radius: 17px !important;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    position: absolute;
    inset: -2px -5px auto auto;
    top: -16px;
    border: none !important;
    right: -10px;
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .24);
}

.table.timeOff tr:hover td {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.table.timeOff td,
.table.timeOff th {
    padding: 0.23rem .41rem !important;
    height: 40px;
}

.timeOff td .denyBtn,
.timeOff td .approveBtn {
    background-color: #DF1F26;
    height: 32px;
    padding: 0px 12px;
    min-width: auto;
    color: #FFF;
    font-size: 14px;
    box-sizing: border-box;
    transition: unset;
    font-weight: 400;
    line-height: 32px;
    border-radius: 2px;
    letter-spacing: normal;
    border: none;
    position: relative;
}

.timeOff td .denyBtn {
    background-color: #DF1F26;
}

.timeOff td .denyBtn:hover {
    background-color: #CB0B26;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);

}

.timeOff td .approveBtn {
    background-color: #4caf50;
}

.timeOff td .approveBtn:hover {
    background-color: #43a047 !important;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
}

.mdc-dialog__actions {
    min-height: auto !important;
    padding: 0 !important;
}


.conversationalView .form-control,
.conversationalView .form-control {
    padding: 1.6rem;
}

.payrollcontainer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    display: block;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;


    background-color: rgba(32, 32, 32, 0.9);
}

.alertTimeApproved {
    border: 1px solid rgb(219, 132, 132);
    margin-bottom: 7px;
    background-color: rgb(255, 223, 223);
    padding: 3px;
    font-weight: bold;
}

.fieldset {

    border: 2px solid #DDDDDD;
    padding: 8px 0 4px 10px;
    margin-bottom: 8px;
}

.legend {
    display: block;
    margin-top: -24px;
    /* background-color: white; */
    padding: 2px 4px;
    font-weight: bold;
}

.legend span {
    background-color: white;
    padding: 0px 6px;
    font-size: 15.4px;
    font-weight: 700;
}

.main-table.tocTable tr:hover td {
    background-color: rgba(49, 120, 198, 0.1) !important;
}

.main-table.tocTable {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

.divSelmemberGroup {
    overflow-y: auto;
    overflow-x: hidden;
    height: 220px;
}

.divSelmemberGroup ul li {
    background-color: #EEEEEE;
    font-weight: 700;
}

.divSelmemberGroup ul li ul li {
    background-color: #FFFFFF;
    padding-left: 5px;
}

.customfooter {
    padding: 4px 0 !important;
    background-color: #FFFFFF !important;
    border-top: 1px solid #202020;
}

.customeFooter_gray {
    /* flex: 0 0 81px; */
    padding: 10px 24px;
    background-color: #EBEBEB;
}

.timeOffDetails {
    max-height: 400px;
    height: 400px;
    overflow-y: auto;
}

/* Custom Report desing */
.report-body {
    padding: 12px 24px;
    min-height: 160px;
    max-height: 400px;
    overflow: auto;
    border-bottom: 1px solid #EAEAEA;
}

.report-footer {
    margin: .5rem 1rem;
}


/* Timesheet History Table */
.tableTimeHistory td {
    padding: 0.149rem !important;
    font-size: 13px;
}

.tableTimeHistory {
    margin-top: 10px;
    background-color: #ffffff !important;
    border-top: 1px solid #DADADA;
    margin-bottom: 0.2em;
    /* padding: .148rem !important; */
}

.tableTimeHistory th {
    padding: .148rem !important;
    font-size: 13px;
    font-weight: 300 !important;
    background: #f1f1f1 !important;
    border-right: 1px solid #DADADA;

}

.sticky-container .tableTimeHistory {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.list-container {
    max-height: calc(100vh - 300px);
    height: calc(100vh - 300px);
    overflow: auto;
    border: 1px solid #DADADA !important;
    background-color: #ffffff;
}

.list-container .list-group-item {
    padding: 0.41rem 1rem !important;
    border: none !important;
}

.list-container.memberdetails {
    height: 344px;
}

span.folder {
    width: 95%;
    display: inline-block;
}

span.folder::after {
    content: "\F285";
    font-family: 'bootstrap-icons' !important;
    right: 10px;
    position: absolute;
    font-weight: 700;
    color: #333333;
}

.divReportBox {
    max-height: 135px;
    max-width: 270px;
    overflow: auto;
    border: solid 1px #949494;
    border-radius: 2px;
    padding: 12px;
}

.hourBy-body {
    padding: 12px 24px;
    max-height: 435px;
    overflow: auto;
    border-bottom: 1px solid #EAEAEA;
}

.hourBy-body label.form-check-label {
    font-size: 12px !important;
}

.durationBG {
    background-color: #666666 !important;
    color: white !important;
    border-radius: 3px !important;
    padding: 0 3px !important;
}

.CreateSchedule-body {
    max-height: calc(100vh - 200px);
}

.table-TSHistory tr:nth-child(even) td {
    background-color: #EFFBFF;
}

.table-TSHistory td {
    border: 1px solid gray !important;
    padding: 3px 5px !important;
}

.table-TSHistory th {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    background-color: #5f5f5f;
    color: #fff;
    border: solid 1px #dee2e6 !important;
    padding: 3px 5px !important;
}

/* Schedule Custom css  */
.card-body.openSchedule {
    overflow: hidden;
}

.fc-toolbar-chunk div {
    display: inline;
}

.fc-button.fc-button-primary {
    color: #666666 !important;
    box-shadow: none;
    white-space: nowrap;
    background-color: #FF000000;
    min-width: auto !important;
    margin: 0 !important;
    font-size: 14px;
    border: none;
}

.fc-button.fc-button-primary:hover {
    box-shadow: none;
    background-color: #d5d5d5 !important;
}

h2.fc-toolbar-title {
    color: #313131 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-block;
    margin-left: 20px !important;
}

.fc-toolbar-chunk div {
    display: inline;
}

.fc-button-group {
    border: solid 1px #3178C6;
    border-radius: 3px;
}

.fc-button-group .fc-button-primary.fc-button-active,
.fc-button-group .fc-button-primary.fc-button-active:hover {
    background: #3178C6 !important;
    color: white !important;
}

.fc .fc-daygrid-body-balanced .fc-daygrid-day-events {
    left: 0px;
    position: absolute;
    right: 2px !important;
}

.fc-button-group .fc-button-primary {
    text-transform: capitalize;
}

.fc-button-group .fc-button-primary:hover {
    background: #ffffff !important;
}

.fc-scroller.fc-scroller-liquid-absolute {
    max-height: calc(100vh - 341px);
    /* overflow-x: hidden !important; */
}

/* .fc-datagrid-body tbody tr td:first-child   {
    border: solid 1px red !important;
    overflow: scroll;
    max-width: 50px !important;
    width: 70px;
} */

/* .fc .fc-datagrid-cell-cushion {
    overflow: auto;
    padding: 8px;
    white-space: nowrap;
    border: solid 1px red;
    max-width: 80px;
} */
.fc .fc-datagrid-cell-cushion {
    overflow: auto !important;
}

.fc-scroller-harness thead a,
.fc-timeline-slot-cushion {
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

table.fc-datagrid-body.fc-scrollgrid-sync-table tr td {
    max-width: 90px;
}

/* Schedule */
.schContainer {
    padding: 10px;
    border: 1px solid #DADADA;
}

/* Schedule */
.schContainer .modal-header {
    padding: 14px 0 !important;
    border-bottom: 1px solid #DADADA !important;
    background-color: transparent !important;
    border: 0px;
}

.sch-wrapper {
    width: calc(100% - 380px);
}

.CreateSchedule {
    width: 380px;
}

.CreateSchedule .modal-body {
    min-height: calc(100vh - 322px);
    max-height: calc(100vh - 322px);
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0rem;
}

.CreateSchedule .modal-footer {
    background-color: #F1F1F1 !important;
    border: 0px;
    padding-top: 20px !important;
}

.CreateSchedule .modal-footer.bt-1 {

    border-top: 1px solid rgb(218, 218, 218) !important;
}

.CreateSchedule input[type=text],
.CreateSchedule input[type=date],
.CreateSchedule input[type=time],
.CreateSchedule select {

    border: 1px solid #dadada !important;
    height: 40px !important;
}

.CreateSchedule label.formlabel {
    font-weight: 500;
    font-size: 12px;
    color: #666666;
    text-transform: uppercase;
}

.CreateSchedule .multiselect-dropdown .dropdown-btn {
    background-color: white;
    border: 1px solid #dadada !important;
    /* height: 40px !important; */
    line-height: 2.25 !important;
    padding: 0.25rem 0.35rem !important;
}

.CreateSchedule .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret {
    display: none !important;
}

.CreateSchedule .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item {
    margin: 4px 4px 0 0 !important;
}

.CreateSchedule .dropdown-btn span:last-child {
    font-weight: 500;
    font-size: 12px;
    color: #666666;
    vertical-align: inherit;
    text-transform: uppercase;
    margin-top: -54px;
    margin-right: -13px;
}

.CreateSchedule .form-control-color {
    height: 30px;
    width: 35px;
    /* padding: 8px 22px 0px 5px !important; */
    border: 0;
    background-color: white;
}

.fc .fc-view-harness {
    flex-grow: 1;
    position: relative;
    height: auto !important;
}

full-calendar {
    height: calc(100vh - 179px);
}

/* full-calendar col:first-child {
    width: 195px !important;
} */

th .fc-scroller-harness .fc-scroller {
    overflow: hidden !important;
    margin: 0 !important;
}

full-calendar th {
    background: #f1f1f1 !important;
    border: 0px !important;
    border-left: solid 1px #ddd !important;
}

full-calendar th:last-child {
    border-right: solid 1px #ddd !important;
}

.mat-mdc-dialog-surface.mdc-dialog__surface {
    overflow: hidden;
}

/* .fc-timeline-slot{
    background-color: #fff;
} */
/* .fc-resource{
    background-color: white;
} */
/* .fc-scroller-harness-liquid {
    background-color: white;
} */
.editDashed-border-draft {
    border-width: 3px !important;
}

.nonedit-border-weight {
    border-width: 1px !important;
}

.editDashed-border {
    border: 2px dashed;
}

.dashed-border {
    border: 2px dashed;
}

.fc-event {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    width: 100%;
    min-height: 32px;
    font-size: .85em;
    line-height: 1.3;
    border-radius: 3px;
    font-weight: 400;
    text-overflow: ellipsis;
}

.fc .fc-daygrid-day-frame {
    min-height: auto !important;
}

.icon-size {
    max-width: 15px;
    height: 11px;
}

.big-icon-size {
    max-width: 15px;
    height: 15px;
    margin-left: 5px;
}


.toast-success,
.toast-container .toast-success {
    background-color: #4caf50 !important;
    color: #fff !important;
}

.toast-info {
    background-color: rgb(70, 166, 87) !important;
    color: #fff !important;
    width: 400px !important;
    background-image: none !important;
}

.fc-icon-sch-Calico {
    content: "";
    background-image: url(../images/calendar.png);
    background-repeat: no-repeat;
    background-size: 28px;
    transition: transform .2s ease-in-out;
    padding: 0;
    background-position: center;
}

a.signDiffWay {
    font-family: Arial;
    font-size: 16px;
    color: rgb(57, 58, 61) !important;
}

/* Pagination */
.pagination-container {
    min-height: 52px;
    padding: 6px;
}

.pagination-container button {
    border: none;
    font-size: 1.5rem;
    color: #666;
    text-align: center;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 0.6rem;
    background-color: transparent;
}

.pagination-container button:disabled {
    background-color: transparent !important;
}

.pagination-container button:hover {
    background-color: #f7f7f7;
}

.tmd-body {
    /* max-height: calc(100vh - 270px);
    min-height: calc(100vh - 270px); */
    height: 480px;
    overflow-y: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

.tmd-body-listing {
    height: 531px;
    overflow-y: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

#tmDetailstab5 .tmd-body-listing .main-table {
    height: 469px;
}

.main-table.customFields {
    height: 388px;
    min-height: 388px;
    border: 1px solid #DADADA;
    border-top: 2px solid #DADADA;
    /* margin-bottom: 0.5rem;     */
    background: #fff;
}

.customFields .table tr td {
    border-bottom: solid 1px #fff !important;
}

.phone {
    margin: 5% 0;
    display: block;
    width: auto;
    text-align: center;
    font-size: 42px;
}

.phone sup {
    margin-left: -17px;
    color: green;
}

.phone sub {
    margin-left: -10px;
    color: green;
}

.btn-group.timesheet .btn.active {
    background-color: white !important;
    color: #3178C6 !important;
    border-bottom: solid 2px #3178C6 !important;
}

.btn-group.timesheet .btn {
    background-color: white !important;
    color: black !important;
    border: 1px solid rgba(0, 0, 0, 0.23) !important
}

.btn-group.timesheet .btn:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.btn-group.timesheet .btn {
    box-shadow: none !important;
}

.btn-outline-transparent {
    color: #000 !important;
    background-color: transparent !important;
    border: 1px solid #000;
    box-shadow: none !important;
}

.btn-outline-transparent:hover {
    background-color: #e5e5e5 !important;
}

.h-px-importTB {
    max-height: calc(100vh - 200px);
}

.history-created {
    width: calc(100% - 16px);
    padding: 8px;
    white-space: pre-wrap;
    border-radius: 5px;
    background-color: #F1F1F1;
}

header.timeClockWindow {
    background: #333333 !important;
    border-radius: 0 !important;
    height: auto !important;
}

.bg-info-item {
    padding: 6px;
    background-color: #FEFFE0;
    margin: 0 3px;
    font-size: 12px;
}

.cursor-pointer {
    cursor: pointer;
}

.timeOffAccuralModal {
    max-height: calc(100vh - 100px);
    overflow: auto;
}

.back-dialog {
    z-index: 0 !important;
}

/* .front-dialog {
    z-index: 1000 !important;
} */
.mapDetails {
    overflow-y: auto !important;
    max-height: 72% !important;
    overflow-x: hidden !important;
}

button#help_fab i {
    font-size: 28px;
    color: #fff;
}

#help_fab {
    position: fixed;
    bottom: 16px;
    left: 16px;
    /* transform: scale(0, 0); */
    /* transition: transform cubic-bezier(0.4, 0, 0.2, 1) 200ms; */
    background-color: #3178C6;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 50% !important;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, .4);
    height: 60px;
    width: 60px;
    z-index: 40;
    line-height: 2;
}

.helpContainer-header {
    padding: .5rem 1rem;
}

.helpContainer {
    height: 100vh;
    max-height: calc(100vh - 228px);
    overflow-y: auto;
}

.helpContainer-btn-close.text-white {
    background: none;
    border: none;
    font-size: 24px;
}

.helpCard .icon {
    width: 56px;
    height: 56px;
    background-color: rgb(244, 245, 248);
    border-radius: 100%;
    font-size: 28px;
    text-align: center;
    line-height: 2;
}

.helpCard {
    width: 364px;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    margin: 1rem auto;
    color: rgb(107, 108, 114);
}

.helpCard-body {
    padding: 20px;
}

.helpCard-footer {
    font-size: 12px;
    background-color: rgb(244, 245, 248);
    width: 100%;
    overflow: hidden;
}

ul#Reports_dropdownMenu {
    left: 200px;
    border: solid 1px red;
    width: 240px;
    position: fixed;
    background-color: #393A3D !important;
    z-index: 1060 !important;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);

    transform: none;
    transition: opacity 322ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 214ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    bottom: calc(100vh - 520px);
    left: 200px;
    transform-origin: 0px 51.8px;
}

ul#Reports_dropdownMenu ul {
    background-color: #393A3D !important;
}

/* Map Play Button */
.btn-round {
    background-color: #3178C6;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 50% !important;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, .4);
    height: 56px;
    width: 56px;
    z-index: 40;
    line-height: 1;
    position: sticky;
    font-size: 24px;
    text-align: center;
    color: white;
    bottom: 210px;
    left: 10px;
}

.AddTimeOff-Scrollable input:disabled,
.AddTimeOff-Scrollable select:disabled,
.AddTimeOff-Scrollable input.ng-untouched,
.AddTimeOff-Scrollable select.ng-untouched {
    border: dashed 1px rgba(0, 0, 0, 0.42) !important;
}