/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Default styles
-------------------------------------------------- */
/**/
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

#ui-datepicker-div {
    display: none;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    margin-top: 0.25rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    z-index: 9999 !important;
}

.ui-datepicker-calendar thead th {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: #78909C;
}

.ui-datepicker-calendar tbody td {
    width: 2.5rem;
    text-align: center;
    padding: 0;
}

    .ui-datepicker-calendar tbody td a {
        display: block;
        border-radius: 0.25rem;
        line-height: 2rem;
        transition: 0.3s all;
        color: #546E7A;
        font-size: 0.875rem;
        text-decoration: none;
    }

        .ui-datepicker-calendar tbody td a:hover {
            background-color: #E0F2F1;
        }

        .ui-datepicker-calendar tbody td a.ui-state-active {
            background-color: #009688;
            color: white;
        }

.ui-datepicker-header a.ui-corner-all {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    transition: 0.3s all;
}

    .ui-datepicker-header a.ui-corner-all:hover {
        background-color: #ECEFF1;
    }

.ui-datepicker-header a.ui-datepicker-prev {
    left: 0;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-size: 0.5rem;
    background-position: 50%;
    transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
    right: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 50%;
}

.ui-datepicker-header a > span {
    display: none;
}

.ui-datepicker-title {
    text-align: center;
    line-height: 2rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding-bottom: 0.25rem;
}

.ui-datepicker-week-col {
    color: #78909C;
    font-weight: 400;
    font-size: 0.75rem;
}

.div-tooltip {
    display: inline-flex;
    justify-content: flex-end;
}

    .div-tooltip [data-tip] {
        position: relative;
    }

        .div-tooltip [data-tip]:before {
            content: "";
            display: none;
            border: 5px solid #1a1a1a;
            border-top-color: #1a1a1a;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            position: absolute;
            top: -7px;
            left: 3px;
            z-index: 8;
            font-size: 0;
            line-height: 0;
            width: 0;
            height: 0;
        }

        .div-tooltip [data-tip]:after {
            display: none;
            content: attr(data-tip);
            position: absolute;
            top: -35px;
            left: 0px;
            padding: 5px 8px;
            background: #1a1a1a;
            color: #fff;
            z-index: 9;
            font-size: 0.8em;
            height: 18px;
            line-height: 18px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            white-space: normal;
            word-wrap: normal;
            text-align: center;
            text-decoration: none;
        }

        .div-tooltip [data-tip]:hover:before,
        .div-tooltip [data-tip]:hover:after {
            display: block;
        }

    .div-tooltip .tip-above[data-tip]:after {
        top: -57px;
        left: -101px;
        height: 50px;
        width: 230px;
    }

    .div-tooltip .tip-below[data-tip]:after {
        top: 22px;
        left: -101px;
        height: 92px;
        width: 210px;
    }

    .div-tooltip .tip-below[data-tip]:before {
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #1a1a1a;
        border-left-color: transparent;
        top: 13px;
        left: 5px;
    }

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    background: #E5E5E5;
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
}

.nav-top {
    top: 91px;
}


main {
    padding: 16px;
    padding-top: 76px;
    padding-left: 75px;
}

.main-navbarTop {
    padding: 16px;
    padding-top: 162px;
}

    .main-navbarTop nav.sticky {
        top: 141px;
    }

h1 {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 48px;
    text-transform: uppercase;
}

h2, .h2 {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    color: #357C57
}

h3 {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    /*    text-align: center;*/
    /*    font-style: italic;*/
}

h4 {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    padding: 3%;
}

p, a, body .span {
    color: #000000;
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

label {
    vertical-align: top;
    text-align: left;
}


button, .btn {
    padding: 8px 2%;
    color: #FFFFFF;
    background: rgba(1, 100, 5, 0.72);
    mix-blend-mode: normal;
    border: 2px solid rgba(1, 100, 5, 0.72);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
    margin-left: 2%;
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    position: relative;
}

    button:hover:not(:disabled),
    .btn:hover:not(:disabled) {
        background: #FFFFFF;
        color: rgba(1, 100, 5, 0.72);
    }

    button:active:not(:disabled),
    .btn:active:not(:disabled) {
        background: #ccc;
        color: rgba(1, 100, 5, 0.72);
    }

    button:disabled,
    .btn:disabled {
        cursor: not-allowed;
        opacity: .4;
    }
    

input:placeholder-shown {
    text-align: left;
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #616161;
    overflow: visible;
}

input::placeholder {
    overflow: visible;
}

select[readonly] {
    pointer-events: none;
    background: #e9ecef
}

a:hover {
    color: #D9D9D9;
}

.div-form .col-md-6 > select, .div-form .col-md-12 > select {
    width: 55%;
}

.scrollwrapper {
    background: #fff;
    overflow: scroll;
    display: block;
    width: 100%;
}

.scrollwrapper-table {
    overflow-x: auto;
    overflow-y: auto;
    display: block;
}

.scrollwrapper-y {
    background: #fff;
    display: block;
    overflow-y: scroll;
}

.scrollwrapper-none {
    background: #fff;
    display: block;
}

.table-sm {
    max-height: 500px;
}

.table-xs {
    max-height: 300px;
}

.table-width-md {
    max-width: 1300px;
}

.table-sm th,
.table-xs th {
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    z-index: 0;
}

/* Scrollbar Styling */
.scrollwrapper-table::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(109, 109, 109, 0.06);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(109, 109, 109, .8);
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(109, 109, 109, 0.6);
    }


.badge-pill {
    opacity: 0.9;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 6px 12px 6px 12px;
}

.blank-state {
    padding: 3rem;
    font-size: 150%;
    color: #737373;
    text-align: center;
    background-color: #fefefe;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: rgb(255, 255, 255, 0.9);
}

.blank-state-nopad {
    font-size: 150%;
    color: #737373;
    text-align: center;
    background-color: #fefefe;
    background-color: rgb(255, 255, 255, 0.9);
}

    .blank-state h2,
    .blank-state-nopad h2 {
        text-transform: none;
        font-weight: 500;
    }

.blank-state p
.blank-state-nopad p {
    color: #737373;
}

.blank-state-img {
    width: 400px;
    height: 250px;
    opacity: 0.5;
}

.blank-state-img-sm {
    width: 300px;
    height: 180px;
    opacity: 0.5;
}

.blank-state-img-xs {
    width: 200px;
    height: 120px;
    opacity: 0.5;
}

.full-width {
    margin-left: 15px;
    margin-right: 15px;
    width: 100%; /* use width instead of max-width here */
}

tr {
    /*border-bottom: 1px solid;*/
    /*border-bottom: 1px solid rgba(0, 0, 0, .15);*/
}

    tr:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.04);
    }

.table td {
    padding: 0.75rem;
    vertical-align: middle;
}

.table .thead-dark th,
.table .thead-light th {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    border-right: 1px solid #fff;
    z-index: 3;
}

.table .thead-dark th {
    color: white !important;
    font-size: 50px;
}

th,
th a {
    display: table-cell !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #495057 !important;
    vertical-align: middle !important;
}

th {
    border-bottom: 0;
    border-top: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
    margin-bottom: 0 !important;
}

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}


    ol > li {
        display: table;
        counter-increment: item;
        margin-bottom: 0.6em;
    }

        ol > li:before {
            content: counters(item, ".") ". ";
            display: table-cell;
            padding-right: 0.6em;
        }

li ol > li {
    margin: 0;
}

    li ol > li:before {
        content: counters(item, ".") " ";
    }

hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
}

    hr.light {
        width: 4.5rem;
        border: 0;
        height: 1px;
        background: lightgray;
        margin-left: 0;
        margin-right: auto;
    }

/*.container-fluid {
    padding-left: 3%
}*/

.container {
    font-size: 16px;
    /*    opacity: 0.8;*/
}

.contractualshift-container {
    border-radius: 15px;
    padding: 1rem 1rem 0.5rem 1rem;
    margin-bottom: 2rem;
    /*box-shadow: 0px 0px 8px rgba(1, 133, 6, 0.5);*/
    /*border: 2px solid rgba(1, 133, 6, 0.3);*/
    transition: background-color 0.6s ease; /* vendorless fallback */
    background-color: rgba(1, 133, 6, 0.08);
}

    .contractualshift-container:hover {
        background-color: rgba(1, 133, 6, 0.22);
    }

.control-label2 {
    text-align: right;
}

.findUs h6::before, .findUs h6::after {
    content: '';
    background-color: #e7e8e9;
    height: 1px;
    width: 45%;
    position: absolute;
    top: 50%;
}

.social-buttons {
    height: 3rem;
    width: 6rem;
    padding: 0.2rem 0.2rem 0.2rem 0.2rem;
}

.form-control {
    display: inline-block;
    /*    vertical-align: top;
    margin: 0 0.5rem 0.5rem 0;
    width: 40rem;
    font-weight: 400;*/
}

.form-text {
    margin: 0.2rem 0 0.2rem 0;
    width: 30rem;
}
/* Custom styles
-------------------------------------------------- */
a .navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
    height: 60px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

nav {
    z-index: 3;
}

.container-nav {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
/* Sticky footer styles
-------------------------------------------------- */


@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    body {
        font-size: 14px;
    }

    .nav-top {
        top: 90px;
    }

    .main-navbarTop {
        padding-top: 140px;
    }

        .main-navbarTop nav.sticky {
            top: 139px;
        }

    h1 {
        font-size: 40px;
    }

    h2, .h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 14px;
    }

    h4 {
        font-size: 14px;
    }

    p, a, body .span {
        font-size: 14px;
    }

    button, .btn {
        font-size: 14px;
    }

    input:placeholder-shown {
        font-size: 14px;
    }
}

@media (max-width: 425px) {
    html {
        font-size: 12px;
    }

    body {
        font-size: 12px;
    }

    .nav-top {
        top: 88px;
    }

    .main-navbarTop {
        padding-top: 130px;
    }

        .main-navbarTop nav.sticky {
            top: 130px;
        }

    h1 {
        font-size: 35px;
    }

    h2, .h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 12px;
    }

    h4 {
        font-size: 12px;
    }

    p, a, body .span {
        font-size: 12px;
    }

    button, .btn {
        font-size: 12px;
    }

    input:placeholder-shown {
        font-size: 12px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}


/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/*Login*/
.login-page {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    margin: auto;
    height: 100vh;
}

.div-logins {
    text-align: center;
    border-radius: 0;
    padding: 50px;
    width: 100%;
    max-width: 700px;
    min-height: 400px;
    margin: auto;
    /*    background: #FFFFFF;*/
    /*    border: 3px solid rgba(53, 124, 87, 1);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}

.div-logins-control {
    max-width: 700px;
    margin: auto;
}

.div-logins input.form-control {
    display: inline;
}

.transparent, .dashboard div.transparent {
    background: transparent;
}

.onloadanim {
    -webkit-animation: fadein 0.2s, slideIn 0.5s ease forwards;
    margin-bottom: 2.5rem;
}

.onloadanim2 {
    -webkit-animation: fadein 0.3s ease;
}

@keyframes fadein {
    from {
        opacity: 0.1;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes slideIn {
    0% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slide {
    100% {
        left: 0;
    }
}

.login-title {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #016405B8;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.div-logins-transparent button, .div-logins button, .div-logins .btn {
    padding: 8px 10%;
}

img.logo {
    width: 100px;
    opacity: 1;
}

.input-icons i {
    position: absolute;
    font-size: 40px;
    /* width: 100%; */
    padding: 6px;
    /* text-align: center; */
}

.input-icons {
    width: 80%;
    margin-bottom: 10px;
    background: #E5E5E5;
    border: 1px solid rgba(1, 133, 6, 0.72);
    display: inline-table;
}

.icon {
    padding: 10px;
    color: green;
    min-width: 50px;
    text-align: center;
}

.input-field {
    width: 60%;
    padding: 10px;
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    border: 1px solid;
}


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

.div-logins-transparent {
    background: transparent;
    text-align: center;
    border-radius: 0;
    width: 100%;
    max-width: 600px;
    min-height: 400px;
    margin: auto;
}

.m-l {
    margin: 5%
}

.m-m {
    margin: 3%
}

.m-s {
    margin: 1%
}

.text-danger {
    color: #dc3545;
}
.text-confirm {
    color: #4bdc35;
}
.text-pending {
    color: #dcd935;
}

.info {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 16px;
    text-align: center;
    color: #003CB0;
}

.at-end {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.sidebar {
    height: 100%;
    width: 375px;
    z-index: 2;
    background-color: rgba(0, 105, 4, 0.95);
    transition: 0.5s ease;
    overflow-x: hidden;
    padding-top: 60px;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: -307px;
    padding-top: 95px;
    font-weight: 400 !important;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(40px);
}


    .sidebar li {
        padding: 8px 14px;
        text-decoration: none;
        font-size: 18px;
        color: #818181;
        display: block;
    }

        .sidebar li:hover {
            color: #f1f1f1;
        }

    .sidebar:hover {
        left: 0px;
    }

        .sidebar:hover .img-icon {
            margin-left: 0px;
        }

    .sidebar:not(:hover) .round {
        margin-left: 307px;
    }

.logout-btn {
    margin-right: 0px;
    text-align: center;
}

.logout {
    width: 40px;
    height: 30px;
    text-align: center;
}

    .logout:hover {
        background-color: forestgreen;
        border-radius: 40%;
    }


.material-icons,
.icon-text {
    vertical-align: middle;
    color: #FFFFFF;
    font-size: 18px;
}

.material-symbols-outlined {
    vertical-align: middle;
    /*    color: #FFFFFF;*/
    font-size: 25px;
    font-weight: 400;
}

.material-icons {
    padding-bottom: 3px;
}


li.nav-item {
    display: inline-flex;
}

.nav-user {
    display: flex;
    align-items: center;
    margin-left: 64px;
    width: 100%;
    justify-content: space-between;
}

    .nav-link, .nav-user span, .nav-user a {
        color: #F6F6F6;
        font-weight: 400;
    }

.nav-item:hover {
    background: green;
    border-left: 2px solid #D9D9D9;
    /*margin-left: -5px;*/
}


.dashboard > div {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .dashboard > div > div {
        background: #FFFFFF;
    }

.div-form {
    background: #fff;
    padding: 3%;
    margin-top: 3%;
}

.div-form-nomargintop {
    background: #fff;
    padding: 3%;
    margin-bottom: 10px;
}

.green-top {
    border-top: 7px solid rgba(53, 124, 87, 1);
}

.round {
    border-radius: 50%;
    background: #D9D9D9;
    width: 43px;
    height: 43px;
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.nav-link.sub {
    font-weight: 400;
    font-size: 14px;
}


/*.active::after {
    content: "&9664";
}*/
.img {
    max-width: 75%;
    overflow: hidden;
}

.nav-item .img-icon {
    width: 35px;
    margin: 5px;
    margin-left: 310px;
}

.nav-item > div.div-icon {
    margin-right: 4px;
}

.sidebar:not(:hover) .nav-item .active {
    position: relative;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #E5E5E5;
    right: -2px;
    top: 14px;
    z-index: 3;
}

.megamenu > li:hover > .megapanel {
    display: block;
}

.navbar {
    position: fixed;
    width: 100%;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.sub {
    display: none
}

.navbar-title {
    font-weight: 400;
    font-size: 20px;
    color: #4A4A4A;
}

.profile-title {
    display: flex;
    width: 100%;
    height: 10%;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    margin-left: 0.7rem;
}

.center-content {
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.profile-content {
    display: flex;
    width: 100%;
    height: 100%;
}

.profile-picture-section {
    width: 45%;
    height: calc(100%-1rem);
}

.img-profile {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-picture-img {
    width: 170px;
    height: 170px;
    border-radius: 10%;
    background-color: #D9D9D9;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

.css-imgprofile {
    width: 170px;
    height: 170px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10%;
}

.profile-text-section {
    width: 55%;
}

.profile-picture-btn {
    margin-top: 1.5rem;
}

.css-btnprofile {
    width: 100px;
    height: 45px;
    font-size: 0.7rem;
    margin-left: 2rem;
}

.css-btnprofile-icon {
    font-size: 0.9rem;
    margin-right: 0.2rem;
}

#cards {
    display: flex;
    flex-wrap: wrap;
    max-width: 2000px;
    width: 100%;
}

@media (max-width: 1700px) {
    .profile-picture-img {
        width: 120px;
        height: 120px;
    }

    .css-imgprofile {
        width: 120px;
        height: 120px;
    }

    .css-btnprofile {
        margin-left: 0.6rem;
        margin-bottom: 5px;
    }
}

@media (max-width: 1200px) {
    .profile-picture-img {
        width: 120px;
        height: 120px;
    }

    .css-imgprofile {
        width: 120px;
        height: 120px;
    }

    .css-btnprofile {
        margin-left: 0.5rem;
    }

    .control-label2 {
        text-align: left;
    }

    .div-tooltip {
        display: inline-flex;
        justify-content: flex-start;
    }
}

@media (max-width: 800px) {

    .profile-picture-img {
        width: 100px;
        height: 100px;
    }

    .css-imgprofile {
        width: 100px;
        height: 100px;
    }

    .css-btnprofile {
        margin-left: 0;
    }

    .blank-state-img {
        width: 200px;
        height: 125px;
    }
}

@media (max-width: 500px) {
    .profile-picture-img {
        width: 120px;
        height: 120px;
    }

    .css-imgprofile {
        width: 120px;
        height: 120px;
    }

    .css-btnprofile {
        margin-left: 0.5rem;
    }
}

@media (max-width: 400px) {
    .profile-picture-img {
        width: 100px;
        height: 100px;
    }

    .css-imgprofile {
        width: 100px;
        height: 100px;
    }

    .css-btnprofile {
        margin-left: 0;
    }
}

.css-0 {
    margin-left: 1.3rem;
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 16px;
}

.css-0-bold {
    font-weight: 600;
    margin: 0;
}

.button--loading .button__text {
    visibility: hidden;
    opacity: 0;
}

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid transparent;
    border-color: #fff #fff #fff transparent;
    border-radius: 50%;
    animation: button-loading-spinner 0.8s linear infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.loading-card-content {
    opacity: 0.2;
}

.spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 40px);
    font-size: 30px;
    z-index: 9;
}

.sm.spinner {
    display: block;
    position: inherit;
    font-size: 17px;
    z-index: 9;
}

.spinner-border {
    width: 5rem;
    height: 5rem;
}

.sm.spinner-border,
.sm.spinner-border.placeholder {
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.2rem;
    margin-right: 0.5rem;
}

    .sm.spinner-border.placeholder {
        visibility: hidden;
    }

.sm.spinner-border, .green-text,
.spinner-border, .green-text {
    color: #357C57;
}

.div-header {
    background: #F5F5F5;
    border: 1px solid #D3D3D3;
    padding: 30px 10px 10px 10px;
    margin-bottom: 3%;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.flip-card {
    background-color: transparent;
    width: 325px;
    height: 200px;
    perspective: 1000px;
    margin-bottom: 9%;
    border-radius: 7.5px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 7.5px;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 7.5px;
}

.flip-card-front {
    background: rgba(1, 133, 6, 0.72);
    color: #ffffff;
    border-radius: 7.5px;
}

    .flip-card-front > div {
        height: 70%;
    }

    .flip-card-front .material-icons {
        font-size: 700%;
        margin: 0;
    }

    .flip-card-front h2 {
        background: #f1f1f1;
        color: rgba(1, 133, 6, 0.72);
        height: 30%;
        font-weight: 700;
        font-size: 20px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 7.5px 7.5px;
    }

.flip-card-back {
    background-color: #ffffff;
    color: #000;
    transform: rotateY(180deg);
    padding: 20px;
    display: grid;
    align-items: center;
    justify-content: center;
}

.dashcard {
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.15);
    border-radius: 8.5px;
    cursor: pointer;
    min-width: 250px !important;
}

.modal-body {
    width: 500px;
    height: 300px;
    overflow: scroll;
}

    .modal-body table {
        display: table;
    }

.pagination-container ul {
    list-style-type: none;
    padding-inline-start: 0px;
}

.pagination-container a, .pagination-container li {
    padding: 5px;
    min-width: 40px;
}

.pagination-container .material-icons, .pagination-container a {
    padding-bottom: unset;
    margin-right: unset;
    color: #000;
}

.pagination-container .active {
    background: rgba(0, 105, 4, 1);
}

    .pagination-container .active span {
        color: #ffffff;
    }

.pagination-container li:hover, .pagination-container li:hover .material-icons {
    background: rgba(99,179,69,255);
    color: #fff;
}

.form-label {
    width: 40%;
}

.div-check .form-label {
    width: 90%;
}

.form-input, .custom-select {
    display: inline-block;
    width: 55%;
    overflow: visible;
}

.btn-round {
    background: transparent;
    border: 3px solid rgba(0, 105, 4, 1);
    padding: 10px;
    border-radius: 25%;
    color: rgba(0, 105, 4, 1);
    font-size: 16px;
    text-align: center;
    float: right;
    margin: 3px;
    font-weight: 400;
}

    .btn-round:hover {
        color: rgba(53, 124, 87, 1)
    }

    .btn-round.text-danger {
        border: 3px solid #dc3545;
    }

.overall h4 {
    padding: 1%;
}

.overall > div > div > div {
    border-bottom: 1px solid;
}

.div-overall {
    background: white;
    padding: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.nav-tabs {
    /*    background: rgba(53, 124, 87, 1);*/
    background: rgba(0, 105, 4, 1);
    padding-top: 1%;
}

    .nav-tabs button.nav-link {
        background: #E5E5E5;
        color: rgba(0, 105, 4, 1);
        border-radius: 0;
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
    }

        .nav-tabs button.nav-link.active {
            background: #FFF;
            color: rgba(0, 105, 4, 1);
        }

.nav-top .nav-item.active {
    color: rgba(0, 105, 4, 0.95);
}

.nav-top .logout-btn span {
    color: rgba(0,0,0,.5);
}

.nav-top .nav-item:hover, .nav-top .dropdown-item {
    background: unset;
    border-left: 0px solid #D9D9D9;
    /*margin-left: -5px;*/
}

.nav-top .dropdown-menu {
    border: 0px;
}

.nav-top .dropdown-item {
    padding: 1px 5px;
    margin: 1.5px 10px;
    border-bottom: 1px solid;
    width: inherit;
    text-transform: uppercase;
}

.nav-top .dropdown-menu li:last-child .dropdown-item {
    border: 0;
}

.div-header h2, .div-header p {
    margin-left: 13px;
}

.div-tabs > form {
    background: #fff;
}

.tab-content {
    background: #fff;
    padding: 5%;
}

.card-form {
    border-radius: 8.5px;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.15);
}

.bg-white {
    background: #fff
}

.div-menubar {
    display: flow-root;
    background: #F5F5F5;
    border: 1px solid #D3D3D3;
    padding: 10px;
}

.text-small {
    font-size: 11px;
}

.text-medium {
    font-size: 14px;
}

.td-action {
    min-width: 125px;
    max-width: 200px;
    width: 10%;
}

    .td-action .btn {
        padding: 8px 6%;
    }

.modal h2 {
    font-weight: 700;
}

.btn-danger {
    background: #dc3545;
}

#resultJobSkill {
    display: flex;
}

    #resultJobSkill button, #resultJobSkill .btn {
        padding: 3px;
        margin: 5px;
        font-size: 12px;
    }

#JobSkillSelection {
    width: 80%
}

#LOAModal .modal-body {
    height: auto;
}

.sub-form-title {
    font-size: 1.25rem;
    border-top: 2px solid #006904;
    padding-top: 2%;
}

.sub-form-div {
    margin-top: 7%;
    margin-bottom: 5%;
}

#nav-tab button {
    margin-left: unset
}

.fade:not(.show) {
    display: none;
}

ul.col3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.modal-body.long {
    width: auto;
    height: auto;
}

h2.title-table {
    background: #006904;
    padding: 10px;
}

    h2.title-table span {
        padding: 13px;
        background: white;
        border-radius: 10px 10px 0px 0px;
    }

field-validation-error {
    color: red;
    font-weight: 600;
}

nav.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 77.5px;
    max-width: 100%;
    width: 100%;
    z-index: 1;
}

    nav.sticky > div {
        flex-wrap: nowrap;
    }

    nav.sticky .nav-tabs {
        display: flex;
        overflow: scroll;
    }


.ind-login-btn {
    background: transparent;
    border: 3px solid white;
    width: 200px;
    margin: 0;
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

    .ind-login-btn:hover {
        background: white;
        color: rgba(53, 124, 87, 1);
    }

    .ind-login-btn:active {
        background: #ccc;
        color: rgba(53, 124, 87, 1);
        border: 3px solid white;
    }

img.logo-login {
    width: 150px;
}

.login-header {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    color: #FFFFFF;
    margin-top: 50px;
    margin-bottom: 50px;
}

.login-index-div {
    background: rgba(127,127,127,0.15);
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.green-bar {
    height: 15px;
    background-color: rgba(53, 124, 87, 1);
}

.content-login-index {
    position: absolute;
    z-index: 2;
    width: 100%;
}

    .content-login-index .inside {
        padding: 6rem;
    }

.bg-img {
    background-repeat: no-repeat;
    background-size: cover;
}

.login-page h2 {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: rgba(1, 100, 5, 0.72);
}

.login-page h3 {
    /*    font-family: 'Gotham';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
}

.logo-login-2 {
    position: absolute;
    bottom: 60px;
    width: 200px;
}

.div-form .col-md-12, .div-form .col-md-6 {
    margin-bottom: 10px;
}

.div-pdf-preview {
    min-height: 450px;
}

tbody .form-input {
    width: 100%;
}

.inputDropdown {
    font-size: 16px;
    padding: 5px;
    border: none;
    border-bottom: 1px solid #ddd;
}

    .inputDropdown:focus {
        outline: 3px solid #ddd;
    }


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    width: 53%;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
    right: 6%;
    max-height: 180px;
}

    .dropdown-content p {
        color: black;
        padding: 10px;
        text-decoration: none;
        display: block;
    }

.dropdown p:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

.breadcrumb-nav {
    color: darkgray;
}

    .breadcrumb-nav span:after {
        content: '  > ';
    }

    .breadcrumb-nav span:last-child:after {
        content: '';
    }

    .breadcrumb-nav span:hover:after {
        color: darkgray;
    }

    .breadcrumb-nav span.active {
        color: #357C57;
    }

.disable {
    pointer-events: none;
}

tbody.custom-layout .col-6 {
    width: 50%;
    display: inline-flex;
}

tbody.custom-layout tr {
    border-bottom: 0px solid;
}

tbody.custom-layout td {
    /*    width: 100%;*/
    font-size: 13px;
}

tbody.custom-layout .value {
    text-align: right;
}

#loading-screen {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
}

#div-payslip .space {
    min-height: 20px;
    width: 100%;
}

#div-payslip .border {
    border: 1px solid #000 !important;
}

.url-RMA {
    color: #357C57;
    font-weight: bold;
    font-size: 10px;
}

.div-roles {
    display: none;
    position: absolute;
    background: white;
    padding: 5px;
}

.changeRole {
    color: #818181;
}

    .changeRole:hover {
        background: #ddd;
    }

.after {
    border-right: 1px solid;
}

#topBtn {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 99;
    border: none;
    outline: none;
    background-color: green;
    border-radius: 5px;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    padding: 8px 5px;
    color: #fff;
    opacity: 0.9;
}

.borderless {
    border: 0;
}

.dropdown-wide {
    height: 35px;
    border: 1px solid #ced4da;
    border-radius: 14px;
    width: 20vmin;
    font-weight: 500;
    font-size: 1rem;
    padding: 0 .55rem;
}

    .dropdown-wide:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.select2-container--default .select2-selection--single {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
    height: 40px;
    display: block;
    vertical-align: top;
    padding: .375rem .55rem;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        position: absolute;
        top: 8px;
        left: calc(50vmin - 20px);
    }

.flex-container {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.form-spacing,
.form-spacing2 {
    margin: 0 0.5rem 0.5rem 0;
    height: 40px;
}

.select2-container--default .select2-selection--single,
.form-spacing {
    width: 50vmin;
}

.select2-container .select2-selection--single {
    padding: 5px;
    height: 100%;
}

.form-spacing2 {
    width: calc(50vmin - 44px - 0.5rem);
}

    .form-control::placeholder,
    .form-spacing::placeholder,
    .form-spacing2::placeholder {
        font-size: 1rem;
        opacity: 0.7;
    }

.form-spacing3 {
    display: inline-flex;
    vertical-align: top;
    margin: 0 0.5rem 0.5rem 0;
    height: 40px;
    width: 35vmin;
    border-radius: 15px;
    font-size: 1.2rem;
}

.input-group {
    margin: 0 0.5rem 0.5rem 0;
    width: 51vmin;    
}

.title {
    font-size: 1.7em;
    text-transform: uppercase;
    color: #357C57;
    cursor: pointer;
}

.titlelighter {
    font-weight: 200;
}

.headerlight {
    font-size: 0.8rem;
    font-weight: 300;
    text-transform: uppercase;
    color: #808080;
}

.labels {
    margin-right: 1rem;
}

.labels-text {
    margin-right: 5rem;
}

.radiolabel {
    margin-right: 25px;
}

.radio-label {
    margin: 0 1rem 0.5rem 0;
    cursor: pointer;
}

.radio-danger {
    opacity: .7;
    color: forestgreen;
    font-size: 14px;
    font-weight: 400;
}

.radiodummy {
    pointer-events: none;
    opacity: 0.3;
}

.text {
    font-weight: normal;
    color: green;
}

.required::after {
    content: " *";
    color: red;
}

.field-validation-valid {
    display: none;
}

.validation-summary-valid {
    display: none;
}

.radio {
    width: 20px;
    margin: 15px 0 10px 0;
}

.dollar {
    display: inline-block;
    position: relative;
}

    .dollar input {
        padding-left: 15px;
    }

    .dollar:before {
        position: absolute;
        content: "$";
        opacity: 0.8;
        left: 10px;
        top: 10px;
    }

.clickable {
    cursor: pointer;
    user-select: none;
}

    .clickable:hover {
        color: rgb(1, 100, 5);
        font-weight: 400;
    }

.tab-content input[type="checkbox"] {
    display: inline-block;
    width: 5rem;
    vertical-align: top;
    max-width: 35%;
}

.checkbox-caption {
    display: inline-block;
    margin-top: 7px;
    margin-bottom: 30px;
    font-size: 1rem;
    font-weight: 500;
    width: 30vmin;
}

.sliderlock-caption {
    display: flex;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 0.8rem;
    font-weight: 500;
    /*width: 30vmin;*/
}

.textbox-caption {
    display: inline-block;
    margin-top: 7px;
    margin-bottom: 30px;
    margin: 7px 7px 30px 0;
    font-size: 1rem;
    font-weight: 500;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    margin-top: 8px;
    margin-right: 10px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 17px;
    background-color: #ccc;
    -webkit-transition: .2s;
    transition: .2s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 2px;
        border-radius: 50%;
        background-color: white;
        -webkit-transition: .2s;
        transition: .2s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

    input:checked + .slider:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}


.sliderred {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 17px;
    background-color: #ccc;
    -webkit-transition: .2s;
    transition: .2s;
}

    .sliderred:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 2px;
        border-radius: 50%;
        background-color: white;
        -webkit-transition: .2s;
        transition: .2s;
    }

input:checked + .sliderred {
    background-color: #eb4034;
}

    input:checked + .sliderred:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }

input:focus + .sliderred {
    box-shadow: 0 0 1px #eb4034;
}


.fc .fc-button-primary {
    background-color: rgb(53,124,87);
    background-color: var(--fc-button-bg-color, rgb(53,124,87));
}

    .fc .fc-button-primary:hover {
        background-color: rgb(53,124,87);
        background-color: var(--fc-button-hover-bg-color, rgb(101,177,68));
        border-color: rgb(53,124,87);
        border-color: var(--fc-button-hover-border-color, rgb(53,124,87));
    }

.fc .fc-toolbar-title {
    margin-left: 15px;
}

.fc .fc-toolbar-chunk {
    margin-right: 10px;
}

.fc .fc-button-primary:disabled {
    background-color: rgb(26, 50, 46);
    background-color: var(--fc-button-bg-color, rgb(26, 50, 46));
}

.dashboard .variance {
    height: Calc(100% - 0.5rem);
}

.weekday {
    background-color: rgb(101,177,68) !important;
}

.weekend {
    background-color: rgb(53,124,87) !important;
}

.ph {
    background-color: rgb(183, 191, 16) !important;
}

input.small-input-number {
    width: 80px;
}

.facial-profile {
    width: 50%;
}

.hideDate {
    visibility: hidden;
}

/*other custom css*/

.css-8sfm3v {
    width: 100%;
    min-height: 80vh;
    padding: 2rem 2rem;
    background: #fff;
}

.css-8asfjf {
    margin: auto;
    text-align: center;
    /*border: solid blue;*/
}

.css-cs9i5s {
    margin-top: 0rem;
    margin-bottom: 2rem;
    display: grid;
    align-content: center;
    align-items: center;
    /*border: solid gold;*/
}

.css-g8fi5s {
    margin-top: 2rem;
    margin-bottom: 2rem;
    min-width: 300px;
    /*border: solid green;*/
}

.css-9sfaj2 {
    display: block;
    float: left;
    width: 100%;
    height: 10%;
    align-items: start;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    margin-left: 0.7rem;
}

.css-099fnf {
    font-weight: 500;
    font-size: 1.3rem;
    margin: auto;
    text-align: left !important;
}

.css-9uiasf {
    /*max-height: 400px;
    max-width: 1300px;
    min-width: 200px*/
    /*max-width: 800px;*/
    margin-top: 2rem;
    max-height: 400px;
    overflow: auto;
    border-radius: 9px;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.4);
    /*border: solid;*/
}

.css-0ifs5j {
    /*max-width: 1280px;*/
    margin: 0 auto;
    border-radius: 9px;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.4);
    /*border: solid yellow;*/
}

.css-32nk5g {
    margin-top: 2rem;
}

.css-gi8u1 {
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.css-0igs5j {
    display: flex;
    width: 100%;
    /*height: 100vh;*/
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}

.css-2t3gg4 {
    width: 30vw;
    padding: 0 1rem;
}

.css-8gdn3 {
    /*background-color: rgba(100, 0, 0, 0.4);*/
    width: calc(100% - 30vw);
    padding: 2rem 1.2rem;
}

.css-gi8u0 {
    height: 100%;
    /*border: solid white;*/
    /*justify-content: center;*/
}

.css-23hndf {
    margin: 2rem 2rem 0rem 2rem;
    max-width: 500px;
    /*min-width: 400px;*/
    /*max-height: 400px;*/
    min-height: 800px;
    border-radius: 8px;
    overflow: auto;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.4);
    font-size: 14px;
}

.table-styleless {
    border-spacing: 5px 15px !important;
    border-collapse: collapse;
    background-color: #fff;
    margin-bottom: 0 !important;
}

    .table-styleless td {
        padding: 0.75rem;
        vertical-align: middle;
    }

    .table-styleless tr,
    .table-styleless tr:nth-child(even) {
        background-color: rgba(109, 109, 109, 0.02) !important;
        border: 0;
        margin-bottom: 55px;
    }

        .table-styleless tr:hover {
            background-color: rgba(109, 109, 109, 0.1) !important;
        }

.material-icons.green {
    color: green;
    font-weight: 800;
    font-size: 40px;
    opacity: .8;
    /*box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);*/
}

.material-icons.red {
    color: red;
    font-weight: 800;
    font-size: 40px;
    opacity: .8;
}

.profile-picture-img-xs {
    width: 100px;
    height: 100px;
    border-radius: 10%;
    background-color: #D9D9D9;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.css-imgprofile-xs {
    width: 100px;
    height: 100px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10%;
}

i.material-icons {
    font-size: 55px;
}

.css-98asfi {
    font-size: 2.5rem;
    font-weight: 500;
    margin: 0rem 0 2.5rem 0;
    /*border: solid red;*/
}

.css-fas98u {
    margin: auto;
    text-align: center;
    text-justify: auto;
    padding-bottom: 3rem;
}

#map {
    height: 400px;
    border-radius: 9px;
}

.css-09asdg,
.css-09asdn {
    border-radius: 20%;
    width: 45px;
    height: 45px;
    text-align: center;
    vertical-align: middle;
    /*border: 1px solid green;*/
}

    .css-09asdg:hover,
    .css-09asdn:hover {
        background-color: rgba(0, 0, 0, 0.1);
        cursor: default;
    }

.css-908uaf {
    position: fixed;
    right: 80px;
    opacity: 1;
    background-color: green;
}

button.css-908uaf {
    font-weight: normal;
    font-size: 14px;
    padding: 5px 10px;
    width: auto;
    border-radius: 20px;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.15);
}

    button.css-908uaf:disabled {
        opacity: .4;
    }

.css-23nlj {
    margin: 0 auto;
    text-align: center;
}

img.logo2 {
    width: 250px;
    opacity: 1;
    margin-top: 1rem;
    margin-bottom: 4rem;
    /*border: solid grey;*/
}

.css-214kna {
    display: inline-flex;
    vertical-align: top;
    margin: 0 0.5rem 0.5rem 1rem;
    height: 35px;
    width: 70px;
    text-align: center;
    border-radius: 12px;
}

.css-safio2 {
    text-overflow: ellipsis;
    overflow: hidden;
    /*width: 150px;*/
    /*white-space: nowrap;*/
}

.multicolumn {
    display: grid; /* to use css-grid */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    /*grid-template-rows: repeat(3, 1fr);*/
    gap: 0; /* creates a gap between the columns and rows */
    /*width: fit-content;*/
}

.css-9ufasj {
    height: 20px;
    margin-top: 3px;
}

.css-afs09i {
    margin-bottom: 15px;
    width: 30rem;
}

input[type=checkbox] {
    cursor: pointer;
}

.css-0i9dsg {
    opacity: 0.7;
}

.css-9asdgd {
    display: table-cell !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #495057 !important;
    vertical-align: middle !important;
}

.css-sajdi3 {
    display: none;
    background: rgba(1, 100, 5, 0.06);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 10px;
    -webkit-animation: fadein 0.5s ease;
}

.login-body {
    /*    background-image: url(/img/bg-login-2.png);*/
    background: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.divider {
    height: 125px
}

.css-asf9u {
    display: grid;
    pointer-events: none;
}

button.close {
    padding: 0;
    background-color: none;
    border: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.modal-body-a0sdf4 {
    padding: 1.5rem;
}

.css-faosi9 {
    display: block;
    margin: 0 0 3rem 0;
    width: 100%;
    height: 45px;
    /*border-radius: 6px;*/

    background: #357C57;
    color: #fff;
    border: 0px;
    font-size: 19px;
    border-radius: 4px;
    padding: 8px;
}

.css-faosi9:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.css-214ojf {
    height: 100px;
    overflow: auto;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,0.8);
}

.form-control-file {
    width: 100%;
    height: 100%;
    min-height: 8rem;
    outline: none;
    cursor: pointer;
    /*background-color: rgba(0, 0, 0, 0.1);*/
    color: rgba(30,144,255, 0.8);
    border-radius: 35px;
    border: 2px dashed;
    padding: 2rem;
    margin-top: 0.7rem;
    margin-bottom: 2rem;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    transition: background-color 0.6s ease; /* vendorless fallback */
}

.form-control-file-hover {
    background-color: rgba(1, 133, 6, 0.22);
}

.css-32njo9 {
    display: flex;
    font-size: 14px;
    text-align: center;
    justify-content: center;
    /*color: red;*/
}
/*.form-control-file:before {
        content: attr(data-title);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 8rem;
        line-height: 1rem;
        opacity: 1;
        visibility: visible;
        text-align: center;
        display: flex;
        justify-content: center;*/ /* Align horizontal */
/*align-items: center;*/ /* Align vertical */
/*border: 0.25rem dashed;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow: hidden;
    }

    .form-control-file:hover:before {
        border-style: solid;
        box-shadow: inset 0px 0px 0px 0.25rem currentColor;
    }*/
.shake-vertical {
    animation: shake-vertical 100ms ease-in-out infinite;
}

@keyframes shake-vertical {
    2% {
        transform: translate(0, 6px) rotate(0);
    }

    4% {
        transform: translate(0, -1px) rotate(0);
    }

    6% {
        transform: translate(0, -7px) rotate(0);
    }

    8% {
        transform: translate(0, -1px) rotate(0);
    }

    10% {
        transform: translate(0, 9px) rotate(0);
    }

    12% {
        transform: translate(0, 1px) rotate(0);
    }

    14% {
        transform: translate(0, 3px) rotate(0);
    }

    16% {
        transform: translate(0, 6px) rotate(0);
    }

    18% {
        transform: translate(0, 0px) rotate(0);
    }

    20% {
        transform: translate(0, 2px) rotate(0);
    }

    22% {
        transform: translate(0, 1px) rotate(0);
    }

    24% {
        transform: translate(0, 3px) rotate(0);
    }

    26% {
        transform: translate(0, 4px) rotate(0);
    }

    28% {
        transform: translate(0, 0px) rotate(0);
    }

    30% {
        transform: translate(0, -8px) rotate(0);
    }

    32% {
        transform: translate(0, 6px) rotate(0);
    }

    34% {
        transform: translate(0, 6px) rotate(0);
    }

    36% {
        transform: translate(0, -4px) rotate(0);
    }

    38% {
        transform: translate(0, 2px) rotate(0);
    }

    40% {
        transform: translate(0, -8px) rotate(0);
    }

    42% {
        transform: translate(0, -9px) rotate(0);
    }

    44% {
        transform: translate(0, -3px) rotate(0);
    }

    46% {
        transform: translate(0, 0px) rotate(0);
    }

    48% {
        transform: translate(0, -7px) rotate(0);
    }

    50% {
        transform: translate(0, 0px) rotate(0);
    }

    52% {
        transform: translate(0, 3px) rotate(0);
    }

    54% {
        transform: translate(0, -4px) rotate(0);
    }

    56% {
        transform: translate(0, 3px) rotate(0);
    }

    58% {
        transform: translate(0, -9px) rotate(0);
    }

    60% {
        transform: translate(0, 9px) rotate(0);
    }

    62% {
        transform: translate(0, -6px) rotate(0);
    }

    64% {
        transform: translate(0, 0px) rotate(0);
    }

    66% {
        transform: translate(0, -4px) rotate(0);
    }

    68% {
        transform: translate(0, 1px) rotate(0);
    }

    70% {
        transform: translate(0, 5px) rotate(0);
    }

    72% {
        transform: translate(0, 0px) rotate(0);
    }

    74% {
        transform: translate(0, -6px) rotate(0);
    }

    76% {
        transform: translate(0, -3px) rotate(0);
    }

    78% {
        transform: translate(0, 3px) rotate(0);
    }

    80% {
        transform: translate(0, 6px) rotate(0);
    }

    82% {
        transform: translate(0, 2px) rotate(0);
    }

    84% {
        transform: translate(0, -3px) rotate(0);
    }

    86% {
        transform: translate(0, 1px) rotate(0);
    }

    88% {
        transform: translate(0, 1px) rotate(0);
    }

    90% {
        transform: translate(0, 10px) rotate(0);
    }

    92% {
        transform: translate(0, -2px) rotate(0);
    }

    94% {
        transform: translate(0, -2px) rotate(0);
    }

    96% {
        transform: translate(0, -6px) rotate(0);
    }

    98% {
        transform: translate(0, -9px) rotate(0);
    }

    0%, 100% {
        transform: translate(0, 0) rotate(0);
    }
}

.css-afsi8f {
    display: none;
    margin: 0 3rem;
    font-size: 14px;
}

.css-jn624g {
    display: none;
    font-size: 16px;
    color: forestgreen;
    margin-right: 0.7rem;
}

.css-jn624r {
    display: none;
    font-size: 16px;
    color: red;
    margin-right: 0.7rem;
}

.css-fa9sy8 {
    display: flex;
}



.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    margin: 0;
    color: black;
    text-align: center;
    height: 1.5em;
    opacity: .5;
    &:before

{
    content: '';
    /*  // use the linear-gradient for the fading effect
            // use a solid background color for a solid bar background: linear-gradient(to right, transparent, #818078, transparent);*/
    background: black;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}

&:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 .5em;
    line-height: 1.5em;
    font-size: 10px;
    /*        // this is really the only tricky part, you need to specify the background color of the container element... color: #818078;*/
    background-color: #fcfcfa;
}

}



.notice-login {
    border-radius: 25px;
    background-color: #F3F2F2;
    font-size: 12px;
    padding: 12px;
    margin: 15px 0px;
}

    .notice-login h3 {
        color: #CE3C33;
        font-size: 12px;
    }

    .notice-login p {
        font-size: 12px;
    }

.login-country a {
    font-size: 14px;
    color: #357C57;
}

/*.login-country div:after {
    content: ' | ';
    color: #357C57;
    display: inline-flex;
    position: absolute;
}*/

.login-country span {
    color: #357C57;
}

.login-country div:last-child:after {
    content: '';
}

.btn-login {
    background: #357C57;
    color: #fff;
    border: 0px;
    font-size: 19px;
    border-radius: 4px;
    padding: 8px;
}

.bb-1 {
    border-bottom: 1px solid;
}

.btn-nobtn {
    background: unset;
    color: black;
    border: 0px;
    box-shadow: unset;
    width: 100%;
}

.header-login {
    border-bottom: 1px solid #357C57;
}

    .header-login .btn-nobtn {
        color: #357C57
    }

.login-subHeader {
    font-size: 14px;
    margin: 15px;
    text-align: center;
}

/* Carousel stick to be 100% is carousel-item 100vh & carousel-image height: 100%;*/
/* Carousel stretch is .carousel, .carousel-inner, .carousel-item 100% & carousel-image height: 100%; width: 100%;;*/
/* Carousel cover is Carousel stretch & carousel-image object-fit: cover;*/

/*.carousel-item {
    height: 100vh;
}*/
.carousel, .carousel-inner, .carousel-item {
    height: 100%;
}

.carousel-image {
    height: 100%;
    width: 100%;
    /*    object-fit: cover;*/
}

.emplo-photo {
    object-fit: cover;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.emplo-name {
    padding-left: 3%;
    white-space: nowrap;
    overflow: hidden;
}

.emplo-job {
    padding-left: 3%;
    font-weight: 300;
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
}

.emplo-name.Inactive {
    color: #FF0000;
}

.emplo-name.Verify {
    color: #ffff00;
}

.pay-header {
    border-radius: 5px;
    background: rgba(101, 177, 68, 1);
    color: #fff;
    font-weight: 300;
    font-family: Gotham;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    height: 20px;
}

.pay-value {
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    margin: 10px 0px;
}

.div-pay > div {
    padding: 0px 20px;
}

.main-pay tr.highlight > th, tr.highlight > td {
    font-size: 18px !important;
}

    .main-pay tr.highlight > th > span {
        display: block;
        font-size: 13px;
        font-weight: 400;
    }

.main-pay .custom-layout th, .custom-layout td {
    width: 50%
}

.main-pay tr .currency {
    float: left;
}

.table-border {
    border: 1px solid #000;
}

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

.pay-table {
    margin-top: 10px
}

.main-pay tr.highlight > th {
    background-color: #ededed;
    font-weight: 600 !important;
}

.scheduler-main button{
height:max-content;
width: max-content;
padding: 8px !important;
font-size: 16px !important;
}

.scheduler-main select{
  font-size: 16px !important;
}

.scheduler-main .template-wrap{
  display: flex;
  align-items: center;
}
.scheduler-main .src-img{
  width: 50px;
  max-height: 80px;
}
.scheduler-main .src-header{
  margin-left: 10px ;
}
.scheduler-main .src-workHour{
  font-size: 10px;
}
.scheduler-main .image-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.scheduler-main .event-template {
  min-height: 500px;
}

.scheduler-main select#subject
{
  height: 30px; 
  width: 120px;
  font-size: 12px;
}

[class*="-actl-"] {
    background: #eab676;
}

[class*="-schd-"] {
    background: #76b5c5;
}

td.schdlr {
    border: 1px solid #ff0000
}

.legend-body {
    display: inline-flex;
}

.legend-color {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

    .legend-color.actual {
        background: #eab676;
    }

    .legend-color.scheduler {
        background: #76b5c5;
    }

.legend-title {
    font-size: 20px;
}

.labels-text .form-control {
    max-width: 150px;
}

.InputGroup2 {
    display: none;
    height: 40px;
    width: 300px;
    margin: 12px 0 2rem 0px;
    font-size: 16px;
}

    .InputGroup2 input[type="radio"] {
        visibility: hidden; /* 1 */
        height: 0; /* 2 */
        width: 0; /* 2 */
    }

    .InputGroup2 label {
        display: flex;
        flex: auto;
        vertical-align: middle;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        background-color: var(--color-gray);
        color: white;
        padding: 5px 0px;
        border-radius: 6px;
        transition: color var(--transition-fast) ease-out, background-color var(--transition-fast) ease-in;
        user-select: none;
        margin-right: 8px;
    }

        .InputGroup2 label:last-of-type {
            margin-right: 0;
        }

    .InputGroup2 input[type="radio"]:checked + label {
        background-color: var(--color-dark-green);
        color: var(--color-white);
    }

    .InputGroup2 input[type="radio"]:disabled + label {
        background-color: var(--color-gray);
        color: var(--color-white);
        cursor: not-allowed;
        opacity: .4;
    }

    .InputGroup2 input[type="radio"]:hover:not(:checked) + label {
        background-color: var(--color-green);
        color: var(--color-white);
    }

.InputGroup {
    display: flex;
    height: 40px;
    width: 200px;
    margin: 0 0 2rem 48px;
    font-size: 16px;
}

    .InputGroup input[type="radio"] {
        visibility: hidden; /* 1 */
        height: 0; /* 2 */
        width: 0; /* 2 */
    }

    .InputGroup label {
        display: flex;
        flex: auto;
        vertical-align: middle;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        background-color: var(--color-gray);
        color: white;
        padding: 5px 0px;
        border-radius: 6px;
        transition: color var(--transition-fast) ease-out, background-color var(--transition-fast) ease-in;
        user-select: none;
        margin-right: 8px;
    }

        .InputGroup label:last-of-type {
            margin-right: 0;
        }

    .InputGroup input[type="radio"]:checked + label {
        background-color: var(--color-dark-green);
        color: var(--color-white);
    }

    .InputGroup input[type="radio"]:disabled + label {
        background-color: var(--color-gray);
        color: var(--color-white);
        cursor: not-allowed;
        opacity: .4;
    }

    .InputGroup input[type="radio"]:hover:not(:checked) + label {
        background-color: var(--color-green);
        color: var(--color-white);
    }

:root {
    --color-black: #232323;
    --color-pink: #ff6393;
    --color-dark-pink: #df4775;
    --color-purple: #342a47;
    --color-blue: deepskyblue;
    --color-gray: #525252;
    --color-green: #46ce1f;
    --color-dark-green: #00a809;
    --color-white: #ffffff;
    --transition-fast: 0.1s;
}

#ModalHRStand .modal-body {
    width: unset;
    height: unset;
}

.nav-top .dropdown-menu .submenu li .dropdown-item {
    border-bottom: 1px solid;
}

.nav-top .dropdown-menu .submenu li:last-child .dropdown-item {
    border: 0;
}

.faq h5{
    font-weight: 600;
}

.hideImportant {
    display: none !important;
}

.css-hrgrouptable {
    border: 2px solid rgba(1, 100, 5, 0.22);
    border-radius: 7.5px;
    padding: 2rem;
    margin-top: 2rem;
}

.css-16fsh3 {
    width: 22px;
    height: 22px;
}

.css-2141sa {
    flex: 1;
}

.css-2dgloa {
    display: flex;
    gap: 10px;
}

.css-jkgd91f {
    width: 300px;
    max-width: 300px;
}
.css-jkgd92f {
    width: 130px;
    max-width: 300px;
}

.submenu {
    overflow: auto;
    max-height: 450px;
}

.color-gray128{
    color: rgba(128, 128, 128,3) !important;
}