/*
    DEMO STYLE
*/
@import url('fonts/fonts.css');

body {
    font-family: 'Qanelas', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

:focus {
    outline: none !important;
}


.toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
    .toggle-switch input[type="checkbox"] {
        display: none;
    }

.switch-slider {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 15px;
    transition: 0.3s;
    margin-right: 8px;
}

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

input[type="checkbox"]:checked + .switch-slider {
    background-color: #4caf50;
}

input[type="checkbox"]:checked + .switch-slider::before {
    transform: translateX(20px);
}

input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

    input[type="checkbox"] + label:before {
        border: 1px solid #E9E9E9;
        background-color: #F9F9F9;
        content: "\00a0";
        display: inline-block;
        font: 12px/1em sans-serif;
        height: 16px;
        margin: 0 5px 1px 0;
        padding: 0;
        vertical-align: middle;
        width: 16px;
        border-radius: 3px;
    }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type="checkbox"]:checked + label:before {
    background: #056ED8;
    color: white;
    content: "\2713";
    text-align: center;
    border: 2px solid #056ED8;
}

input[type="checkbox"]:checked + label:after {
    font-weight: bold;
}

input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}

a {
    display: inline-block;
    color: inherit;
    transition: all 0.3s;
}

    a,
    a:hover,
    a:focus {
        text-decoration: none;
    }

        a:hover, a:focus {
            color: #FF0000;
        }

h1, h2, h3, h4, h6 {
    font-family: 'Qanelas', sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 50px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

.p-lg {
    font-size: 24px;
}

.p-xs {
    font-size: 12px;
}

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

.p-md {
    font-size: 20px;
}

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

.semi-bold {
    font-weight: 600 !important;
}

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

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

.blue-text {
    color: #056ED8;
}

.l-grey-text {
    color: #999999;
}

.grey-text {
    color: #666666;
}

.green-text {
    color: #06B100;
}

.red-text {
    color: #FF0000;
}

.check-label {
    cursor: pointer;
}

.site-label {
    color: #1A2631;
    font-weight: 600;
    margin-bottom: 5px;
}

.site-input {
    width: 100%;
    border: 1px solid #E9E9E9;
    border-radius: 50px;
    color: #333333;
    background: #F9F9F9;
    padding: 12px 17px;
    appearance: none;
    font-weight: 500;
}

    .site-input::placeholder {
        color: #999999;
    }

select.site-input {
    background: url('../images/select-arrow.png') no-repeat 95% 50% #F9F9F9;
}

textarea.site-input {
    border-radius: 28px;
    resize: none;
}

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

.w-190 {
    width: 190px;
}

.grey-bg {
    background: #F3F2F6;
    border-radius: 10px;
}

.w-270 {
    width: 270px;
}

input[type="password"].site-input {
    padding-right: 40px;
}

.pass-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 17px;
    line-height: 0;
    color: #1A1824;
}

.site-btn {
    background: #FF0000;
    border-radius: 50px;
    border: 1px solid #FF0000;
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 13px 25px;
    min-width: 160px;
    transition: ease-in-out .2s;
}

    .site-btn:hover, a.site-btn:focus {
        background: transparent;
        color: #FF0000;
    }

.border-btn {
    background: transparent;
    color: #666666;
    border: 1px solid #666666;
}

    .border-btn:hover {
        background: #666666;
        color: white;
        border: 1px solid #666666;
    }

.red-border-btn {
    background: transparent;
    color: #FF0000;
    border: 1px solid #FF0000;
}

    .red-border-btn:hover {
        background: #FF0000;
        color: white;
        border: 1px solid #FF0000;
    }

.blue-border-btn {
    background: transparent;
    color: #056ED8;
    border: 1px solid #056ED8;
}

    .blue-border-btn:hover {
        background: #056ED8;
        color: white;
        border: 1px solid #056ED8;
    }

.blue-btn {
    background: #056ED8;
    color: white;
    border: 1px solid #056ED8;
}

    .blue-btn:hover {
        background: transparent;
        color: #056ED8;
        border: 1px solid #056ED8;
    }

.green-btn {
    background: #05D897;
    color: white;
    border: 1px solid #05D897;
}

    .green-btn:hover {
        background: transparent;
        color: #05D897;
        border: 1px solid #05D897;
    }

.employee-btns .site-btn {
    min-width: 110px;
    padding: 10px;
}

.table-btn {
    background: transparent;
    color: #FF0000;
    padding: 5px 25px;
    border: 1px solid #FF0000;
    min-width: 91px;
}

    .table-btn:hover {
        background: #FF0000;
        color: white;
        border: 1px solid #FF0000;
    }

.id-img {
    width: 194px;
    height: 115px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    width: 100%;
}

.sidebar {
    width: 260px;
    height: calc(100vh - 100px);
    position: fixed;
    transition: all 0.35s ease-in-out, left 0.35s ease-in-out, margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
    background: white;
    z-index: 2;
    overflow-y: auto;
    bottom: 0;
    padding-bottom: 100px;
    border-right: 1px solid #E9E9E9;
}

    .sidebar a, .sidebar .accordion button {
        color: #000000;
        display: block;
        font-weight: 600;
        font-size: 16px;
        padding: 10px 20px;
        min-height: 45px;
    }

ul li {
    list-style: none;
}

.main {
    width: 100%;
    height: 100%;
}

.bg-me1 {
    background-color: #FFFFFF;
    position: fixed;
    width: 100%;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px 0px 27px;
    box-shadow: 0 3px 36px rgb(0 0 0 / 5%);
    height: 100px;
}

.main-body {
    margin-left: 260px;
    padding: 100px 20px 25px 25px;
    background: #F3F2F6;
    min-height: 100vh;
    transition: ease-in-out .4s;
}

.sidebar-toggle {
    display: none;
}

    .sidebar-toggle i {
        color: black;
        font-size: 20px;
    }

.sidebar ul li a:hover, .sidebar ul li.active a {
    color: white;
    background: #FF0000;
}

.ss-scroll {
    width: 6px;
}

.ss-content {
    width: calc(100% + 20px);
}

.transparent-btn {
    background: transparent;
    padding: 0;
    border: 0;
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar-links {
    display: flex !important;
    align-items: center;
    white-space: nowrap;
}

.sidebar.collapsed .dash-link {
    display: none;
}

.sidebar.collapsed .sidebar-links {
    display: block;
    position: relative;
}

.dash-link {
    padding: 0 10px;
    line-height: 1;
}

.sidebar.collapsed .sidebar-links:hover .dash-link {
    display: inline-block;
    position: relative;
    left: 60px;
    background: black;
    color: white;
    z-index: 999;
    position: fixed;
    padding: 5px 20px;
}

.admin-img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    object-position: center;
    border-radius: 100%;
    border: 2px solid #E8E8E8;
}

ul.dropdown-menu {
    background: white;
    border: 1px solid #E8E8E8;
    border-radius: 11px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 16%);
}

.dropdown-item {
    color: #333333;
    font-weight: 600;
    font-size: 14px;
    border-radius: 3px;
}

.dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu a:active {
    background: #EEEEEE;
    color: #333333 !important;
}

.dropdown-item i {
    color: #666666 !important;
}

.cursor-pointer {
    cursor: pointer;
}

.noti-dropdown, .user-dropdown {
    right: 0 !important;
    left: initial !important;
    position: absolute !important;
}

.user-dropdown {
    top: 45px !important;
}

.noti-dropdown {
    width: 320px;
}

.noti-span {
    width: 9px;
    height: 9px;
    border-radius: 100%;
    color: white;
    background: #056ED8;
    position: absolute;
    top: 2px;
    right: 0px;
    font-size: 10px;
}

.noti-count {
    border-radius: 2px;
    color: #ff0000;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(53, 139, 216, .13);
    font-weight: 600;
    padding: 2px 10px;
}

.noti-dropdown hr {
    border: 0;
    height: 1px;
    width: 100%;
    background: rgb(112 112 112 / 50%);
}

.noti-dropdown .dropdown-item {
    white-space: initial;
}

.notifications-list {
    height: 185px;
    overflow-y: auto;
}

.noti-dropdown .ss-content {
    width: calc(100% + 20px);
    overflow-y: auto;
}

.noti-dropdown a:hover {
    color: initial;
    background: transparent;
}

.notifications-list a {
    padding-right: 25px !important;
}

.notifications-list .ss-scroll {
    background: #ff0000;
}

.sidebar .ss-scroll {
    background: white;
}

.sidebar .ss-content {
    overflow-x: hidden;
}
/* ---------------------------------------------------
    LOGIN
----------------------------------------------------- */
.login-bg {
    min-height: 100vh;
}

.login-left {
    min-height: 100vh;
    background-image: url(../images/login_new.png);
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    border-radius: 0 65px 65px 0;
    padding: 60px !important;
    color: white;
}

.login-left-bg {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    width: 100%;
}

.login-card {
    background: white;
    border-radius: 5px;
    padding: 60px 40px 80px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 638px;
    margin: 0 auto;
}

.login-logo {
    position: relative;
    z-index: 2;
    width: 290px;
    margin-bottom: 25px;
}

.left-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    color: #1A1824;
}
/* ---------------------------------------------------
    DASHBOARD
----------------------------------------------------- */
.dash-card {
    background: white;
    padding: 30px;
    border-radius: 25px;
    border: 1px solid #E8E8E8;
    box-shadow: 0 2px 6px rgb(0 0 0 / 16%);
}

    .dash-card.grey-card {
        background: #E8E8E8;
    }

#myChart, #myChart2, #myChart3 {
    max-height: 410px;
    max-width: calc(100% - 45px);
}

.chart-text {
    transform: rotate(270deg);
    line-height: 0;
    white-space: nowrap;
}

.dash-card-text {
    font-size: 26px;
    font-weight: 700;
}

.dash-card-icon {
    width: 84px;
    height: 84px;
    background: #FFE9E9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #FF0000;
    border-radius: 19px;
}

.lh-0 {
    line-height: 1;
}

.dash-top-card {
    width: 100%;
    max-width: 470px;
    border-radius: 16px;
    border: 1px solid #E8E8E8;
    background: white;
    padding: 30px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 16%);
}
/* ---------------------------------------------------
    TABLE
----------------------------------------------------- */
table {
    border-collapse: separate;
    white-space: nowrap;
    border-spacing: 0 10px;
}

    table th {
        border: 0 !important;
        padding: 0 25px !important;
        font-weight: 700;
        font-size: 16px;
        color: #0F192F;
    }

    table td {
        border-top: 0;
        border-bottom: 0;
        padding: 15px 25px !important;
        color: black;
        font-weight: 500;
        vertical-align: middle;
    }

        table td:first-child {
            border-left: 0;
            border-radius: 50px 0 0 50px;
        }

        table td:last-child {
            border-right: 0;
            border-radius: 0 50px 50px 0;
        }

.table-responsive {
    padding-bottom: 30px;
}

.table .dropdown-menu a {
    color: #666666;
}

    .table .dropdown-menu a:hover {
        color: white;
    }

.search-barr .site-input {
    max-width: 250px;
    padding-right: 50px;
    width: 100%;
}

.search-barr {
    position: relative;
    max-width: 250px;
}

    .search-barr button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
    }

.pagination a.page-link {
    border-color: #CBCBCB !important;
    border-radius: 0 !important;
    color: rgb(77 77 77 / 52) !important;
    background: white !important;
}

    .pagination a.page-link:hover, .pagination li.active a.page-link {
        color: #EFDEBE !important;
        background: #FF0000 !important;
    }
/* CUSTOM CANVAS */
.filterBtn {
    background: transparent;
    border: 1px solid #FF0000;
    color: #FF0000;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    padding: 5px;
    transition: ease-in-out 0.2s;
}

    .filterBtn:focus,
    .filterBtn:hover {
        background-color: #FF0000;
        color: white;
    }

.custom_canvas .offcanvas {
    z-index: 14000;
}

.custom_canvas .offcanvas-header {
    justify-content: center !important;
}

.custom_canvas .btn-close.text-reset {
    position: absolute !important;
    right: 30px !important;
}

.custom_canvas h5 {
    font-family: 'Qanelas' !important;
    font-weight: bold !important;
    font-size: 25px;
}

.custom_canvas .offcanvas {
    z-index: 14000;
    background-color: #f1f1f1;
}
/* ---------------------------------------------------
    USER DETAILS
----------------------------------------------------- */
.employee-img-wrapper {
    width: 200px;
    height: 200px;
    position: relative;
}

.favorite-btn {
    width: 38px;
    height: 38px;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid #BCBCBC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF0000;
    position: absolute;
    bottom: -5px;
    right: 5px;
}

.employee-img {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 5px solid #FFFFFF;
    box-shadow: 0 3px 15px rgb(0, 0, 0, .16);
    object-fit: cover;
    object-position: center;
}

.document-img {
    width: 90px;
}

.modal-close-btn {
    position: absolute;
    top: -17px;
    right: -17px;
    z-index: 3;
    width: 34px;
    height: 34px;
    color: white;
    border-radius: 100%;
    border: 1px solid #FF0000;
    background: #FF0000;
    transition: ease-in-out .2s;
}

    .modal-close-btn:hover {
        background: transparent;
        color: #FF0000;
    }

#loti-1, #loti-2, #loti-3, #loti-4, #loti-5, #loti-6, #loti-7, #loti-8, #loti-9 {
    width: 100px;
    margin: 0 auto;
}

.notification-card {
    padding: 20px 25px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 6px 8px rgb(0 0 0 / 6%);
    border: 1px solid #F2F2F2;
}

.underline {
    text-decoration: underline;
}

.notification-card.blue-card div.m-grey-text {
    color: #ff0000;
}

input.site-input[disabled] {
    background: transparent;
    border-radius: 0;
    border: 0;
    padding: 0;
    color: #7D7D7D;
}

.user-img-upload {
    width: 175px;
    height: 100%;
    position: relative;
}

.user-img {
    width: 175px;
    height: 175px;
    border-radius: 100%;
    object-fit: cover;
    object-position: center;
    border: 2px solid #E8E8E8;
}

.camera-btn {
    background: #056ED8;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    color: white;
    border: 4px solid white;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 5px;
    right: 0;
    cursor: pointer;
}

.modal-content {
    border-radius: 35px;
    border: 0;
}

.modal {
    backdrop-filter: blur(6px);
    background: rgb(0 0 0 / 30%);
}

.dash-logo {
    width: 200px;
}

.noti-btn {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #E8E8E8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.navbar-brand {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #E9E9E9;
    padding-right: 32px;
}

.sidebar-icon {
    width: 30px;
}

    .sidebar-icon img {
        width: 25px;
    }

.sidebar ul li a:hover .sidebar-icon img, .sidebar ul li.active a .sidebar-icon img {
    filter: brightness(3) grayscale(0) saturate(1);
}

table tbody tr:nth-child(2n + 1) td {
    background: #F3F2F6;
}

.employee-details {
    max-width: 200px;
    text-align: center;
}

.status-tag {
    width: 71px;
    height: 23px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-tag {
    color: white;
    background: #05D897;
}

.pending-tag {
    color: white;
    background: #E99C2D;
}

.inactive-tag {
    background: #FF0000;
    color: white;
}

.employee-pills .nav-link {
    width: 160px !important;
    border-radius: 50px;
    background: #D2D2D2;
    color: white;
    font-weight: 500;
}

    .employee-pills .nav-link:hover {
        background: #999999;
    }

    .employee-pills .nav-link.active {
        background: #056ED8;
    }

.pending-text {
    color: #E99C2D !important;
}

.approved-text {
    color: #00825A !important;
}

.rejected-text {
    color: #FF0000 !important;
}

.inprogress-text {
    color: #CC02A4 !important;
}

.completed-text {
    color: #05D897 !important;
}

.paid-text {
    color: #056ED8 !important;
}

table .pending-text {
    width: 85px;
    height: 23px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E99C2D;
    color: white !important;
    font-size: 14px !important;
}

table .approved-text {
    width: 85px;
    height: 23px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00825A;
    color: white !important;
    font-size: 14px !important;
}

table .rejected-text, .rejected-tag {
    width: 85px;
    height: 23px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF0000;
    color: white !important;
    font-size: 14px !important;
}

table .inprogress-text {
    width: 85px;
    height: 23px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #CC02A4;
    color: white !important;
    font-size: 14px !important;
}

table .completed-text, .completed-tag {
    width: 85px;
    height: 23px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #05D897;
    color: white !important;
    font-size: 14px !important;
}

table .paid-text {
    width: 85px;
    height: 23px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #056ED8;
    color: white !important;
    font-size: 14px !important;
}

table .green-text {
    width: 85px;
    height: 23px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06B100;
    color: white !important;
    font-size: 14px !important;
}

.shift-tag {
    width: 150px;
    height: 105px;
    border-radius: 20px;
    background: #056ED8;
    color: white;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.shift-timing {
    max-width: 300px;
    padding: 10px 0;
    background: #eeeeee;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

    .shift-timing p {
        max-width: 150px;
        padding: 5px 10px;
        text-align: center;
        border: 0;
        background: #eeeeee;
        color: black;
    }

.company-card {
    background: white;
    padding: 30px 20px;
    border: 1px solid #D2D2D2;
    border-radius: 20px;
    transition: ease-in-out .2s;
}

    .company-card:hover {
        box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
    }

.company-img {
    width: 124px;
    height: 124px;
    border-radius: 100%;
    object-fit: cover;
    object-position: center;
}

.earning-tag {
    width: 100%;
    max-width: 320px;
    background: #FFE5E5;
    height: 89px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF0000;
    font-weight: 700;
    border-radius: 10px;
    padding: 20px;
}

.green-tag {
    background: #DAF9EF;
    color: #05D897;
}

.grey-tag {
    background: #EEEEEE;
    color: black;
    flex-direction: column;
    align-items: start;
}

.mxw-420 {
    max-width: 420px;
}

.mnh-100 {
    min-height: calc(100vh - 148px);
}

.sidebar .accordion-item {
    border: 0 !important;
}

.sidebar .accordion button {
    background: #FF0000 !important;
    color: #ffffff !important;
}

    .sidebar .accordion button .sidebar-icon img {
        filter: brightness(3) grayscale(0) saturate(1) !important;
    }

    .sidebar .accordion button.collapsed {
        border: 0 !important;
        color: #000000 !important;
        background: transparent !important;
    }

        .sidebar .accordion button.collapsed .sidebar-icon img {
            filter: none !important;
        }

    .sidebar .accordion button:focus {
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

.subadmin-privileges {
    width: calc(100% - 10px);
    white-space: nowrap;
    max-width: 800px;
    overflow-x: scroll !important;
    /* padding: 15px; */
    border: 1px solid #707070;
}

.sign-up-links {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 15px;
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

    .sign-up-links li a {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        border: 1px solid #B9B9B9;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }

        .sign-up-links li a:hover {
            background: #EEEEEE;
        }

.register-options {
    padding-left: 0;
    margin-bottom: 0;
}

    .register-options li a {
        width: 100%;
        margin-top: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #D2D2D2;
        border-radius: 50px;
        padding: 15px 25px;
        text-align: center;
    }

        .register-options li a:hover {
            background: #EEEEEE;
        }

.upload-company-img {
    border: 1px solid #056ED8;
    color: #056ED8;
    background: white;
    padding: 12px 35px;
    border-radius: 50px;
    cursor: pointer;
    transition: ease-in-out .2s;
}

    .upload-company-img:hover {
        color: white;
        background: #056ED8;
    }

.dashboard-link-card {
    border: 1px solid #BBBBBB;
    border-radius: 14px;
    padding: 20px;
    transition: ease-in-out 0.2s;
}

    .dashboard-link-card:hover {
        box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
    }

.job-app-img {
    width: 100px;
    height: 100px;
}

.step-form {
    padding: 20px;
}

.step-header ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.step-header li {
    font-weight: bold;
    padding: 10px 0;
    cursor: pointer;
    width: 100%;
    margin: 0 10px;
    text-align: center;
    border-bottom: 5px solid #EEEEEE;
}

    .step-header li.active {
        border-color: #FF0000;
    }

.step-content {
    margin-top: 20px;
}

.step {
    display: none;
}

.step-1 {
    display: block;
}

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

.step button:not(:last-child) {
    margin-right: 10px;
}

.gj-picker table {
    margin-top: 15px;
}

.gj-picker-bootstrap div[role=navigator] {
    padding: 15px 0 !important;
}

.gj-picker div[role=navigator] div[role=period] {
    color: #056ED8;
}

.gj-picker-bootstrap {
    background: #EEEEEE;
}

.gj-picker table tbody tr:nth-child(2n + 1) td {
    background: transparent;
}

.gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div {
    background-color: #056ED8;
    border-color: #056ED8;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.gj-datepicker .btn.btn-outline-secondary {
    border-radius: 0 50px 50px 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 50px;
    border: 1px solid #E9E9E9;
    background: #F9F9F9;
}

    .gj-datepicker .btn.btn-outline-secondary i.gj-icon {
        margin-top: 5px;
        margin-left: 3px;
    }

.review-card {
    background: #FFFFFF;
    box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
    padding: 20px;
    border-radius: 15px;
}

.star-text {
    color: #FFC107;
}

.feedback-poster-img {
    border: 3px solid white;
    box-shadow: 0 3px 15px rgb(0 0 0 / 16%);
}

.rating {
    display: inline-block;
}

    .rating input[type="radio"] {
        display: none;
    }

    .rating label {
        float: right;
        font-size: 30px;
        color: #ccc;
        cursor: pointer;
    }

        .rating label:before {
            content: '\2605';
        }

    .rating input[type="radio"]:checked ~ label {
        color: gold;
    }

.fc-content {
    background: #ff0000;
    border-color: #ff0000 !important;
}

.fc-day-grid-event {
    border-color: #ff0000 !important;
}

.fc-state-default {
    background: transparent;
    color: #ff0000;
    border-color: #ff0000;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 15px !important;
}

.fc-state-active {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
    color: white !important;
}

table tbody tr.red-table-row td {
    background: #FFA7A7 !important;
}

table tbody tr.green-table-row td {
    background: rgb(5, 216, 151, .34) !important;
}

.table-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: ease-in-out .2s;
}

.approve-btn {
    background: #05D897;
    border: 1px solid #05D897;
}

    .approve-btn:hover {
        background: transparent;
        color: #05D897;
        border: 1px solid #05D897;
    }

.reject-btn {
    background: #FF0000;
    border: 1px solid #FF0000;
}

    .reject-btn:hover {
        background: transparent;
        color: #FF0000;
        border: 1px solid #FF0000;
    }

.modal-content .shift-timing p {
    max-width: unset;
}

.modal-content .shift-timing {
    max-width: unset;
    margin: 0 auto;
}

.bg-modal {
    max-width: 650px;
}

    .bg-modal .modal-content {
        padding: 0 40px;
    }

.favorite-user-img {
    width: 88px;
    height: 88px;
    border: 4px solid white;
    box-shadow: 0 3px 15px rgb(0 0 0 / 16%);
}

.favorite-card {
    padding: 10px 20px;
    position: relative;
}

    .favorite-card .favorite-btn {
        top: 10px;
        right: 10px;
    }

.iti__selected-flag {
    border: 1px solid #E9E9E9;
    border-radius: 100%;
    background: #F9F9F9;
    width: 50px;
    height: 50px;
}

.iti {
    width: 100%;
}

.iti--allow-dropdown input {
    margin-left: 60px !important;
    padding: 12px 20px !important;
    width: calc(100% - 60px);
}

.subadmin-privileges-header {
    width: 100%;
    margin: 0 auto;
    /* padding: 10px; */
}

.privilege-headings, .privilege-headings p {
    width: 133px;
}

    .privilege-headings p {
        padding: 10px 10px 10px 10px;
        border-bottom: 1px solid #707070;
        height: 44px;
    }

        .privilege-headings p:last-child {
            padding: 15px 10px 15px 10px;
            border-bottom: 0;
        }

.subadmin-privileges-header p {
    background: #F9F9F9;
    height: 54.8px;
    border-bottom: 1px solid #707070 !important;
}

.manager-details-privelege .subadmin-privileges-header {
    background: #F9F9F9;
}

.manager-details-privelege {
    border: 0;
}

    .manager-details-privelege p {
        border: 0 !important;
    }

.app-count {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background: #056ED8;
    color: white;
    font-weight: 700;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-document {
    border: 1px dashed #707070;
    font-size: 20px;
    border-radius: 15px;
    max-width: 700px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.resource-img {
    width: 48px;
    height: 48px;
    border-radius: 100%;
}

.planning-resources {
    margin-top: 47.2px;
}

.planning-resources-header {
    padding: 15px;
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
}

.planning-team-card {
    width: 200px;
    height: 92px;
    align-items: center;
    gap: 6px;
    padding: 10px;
}

.fc-center h2 {
    font-size: 18px;
}

.fc-scroller {
    overflow-y: unset !important;
    height: auto !important;
}

#calendar table, .fc-content {
    white-space: unset !important;
}

#calendar tbody td {
    background: white !important;
    position: relative;
    white-space: unset !important;
    border-radius: 0 !important;
    border: 1px solid #ddd !important;
    border-left: 0 !important;
    border-top: 0 !important;
}

.fc-content {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(20, 199, 145);
}

.fc-event {
    position: static;
}

.fc-day-number {
    opacity: 0;
}

.fc-right .fc-button-group {
    opacity: 0;
}

#calendar td {
    border-radius: 155px !important;
}

.fc-today-button {
    display: none;
}

.fc-next-button {
    position: absolute !important;
    right: 70px;
}

.fc-center {
    padding-left: 40px;
}

.delete-btn {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background: #ff0000;
    color: white;
    border: 1px solid #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -5px;
    right: -5px;
}

.upload-img-box {
    position: relative;
}

    .upload-img-box, .upload-img-box img {
        width: 150px;
        height: 150px;
    }

        .upload-img-box img {
            border-radius: 10px;
            object-fit: cover;
            object-position: center;
        }

.upload-box, .upload-box-2 {
    border: 2px dashed #eeeeee;
    padding: 15px;
    display: none;
}

.upload-img-box-2 {
    width: 150px;
    height: 170px;
    text-align: center;
    position: relative;
}

    .upload-img-box-2 img {
        height: 150px;
        object-fit: contain;
    }

#file-name {
    font-size: 14px;
}

.plus-minus-div {
    margin: 0px 0px 25px 0px;
    display: flex;
    align-items: center;
}

.value-button {
    display: flex;
    border: 1px solid #e9e9e9;
    margin: 0px;
    /* width: 35px; */
    height: 50px;
    text-align: center;
    vertical-align: middle;
    padding: 12px 20px;
    background: #f9f9f9;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.js-shift-charges {
    text-align: center;
    border: none;
    border-top: 1px solid #e9e9e9;
    background: #F9F9F9;
    border-bottom: 1px solid #e9e9e9;
    margin: 0px;
    flex-grow: 1;
    width: 100%;
    /* height: 40px; */
    position: relative;
    /* font-family: "Poppins"; */
    padding: 12px 20px;
}

.js-no-of-people {
    text-align: center;
    border: none;
    border-top: 1px solid #e9e9e9;
    background: #F9F9F9;
    border-bottom: 1px solid #e9e9e9;
    margin: 0px;
    flex-grow: 1;
    width: 100%;
    /* height: 40px; */
    position: relative;
    /* font-family: "Poppins"; */
    padding: 12px 20px;
}

.plus-minus-div .js-decrease {
    border-radius: 50px 0 0 50px;
}

.plus-minus-div .js-increase {
    border-radius: 0 50px 50px 0;
}

.plus-minus-div .js-decrease-people {
    border-radius: 50px 0 0 50px;
}
.plus-minus-div .js-increase-people {
    border-radius: 0 50px 50px 0;
}
    .previous-job-img {
    width: 100px;
    height: 94px;
    border-radius: 15px;
    background: #F7F3ED;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.previous-job-tabs .nav-link {
    font-size: 20px;
    font-weight: 600;
    color: #999999;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
}

    .previous-job-tabs .nav-link.active {
        color: #333333;
        border: 0;
        border-bottom: 1px solid #333333 !important;
    }