@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    overflow-x: hidden !important;
}

html {
    overflow-x: hidden;
}

/* Works on Firefox */
* {
    scrollbar-width: 18px; /*thin;*/
}

    *::-webkit-scrollbar {
        width: 10px;
        width: 10px !important;
        height: 10px !important;
    }

    *::-webkit-scrollbar-track {
        background: #e9e9e9; /* color of the tracking area */
    }

    *::-webkit-scrollbar-thumb {
        background-color: #aeaeae; /* color of the scroll thumb */
        border-radius: 10px; /* roundness of the scroll thumb */
        /* border: 1px solid #000066;  */ /* creates padding around scroll thumb */
    }

.bg-lightblue {
    background: #2d9cdb;
}

.text-lightblue {
    color: #2d9cdb !important;
    font-weight: 700 !important;
}

.bg-lightgreen {
    background: #08e1ba;
}

.bg-black {
    background: #010101;
}

.bg-gray {
    background: #a76c6c;
}

.bg-yellow {
    background: #ffb800;
}

.bg-blue {
    background: #0038ff;
}

.bg-red {
    background: #fc4d4d;
}

.bg-amber {
    background: #f2994a;
}

.bg-darkgreen {
    background: #00916e;
}

.bg-black {
    background: #5e5d5d;
}

.bg-purple {
    background: #7267CB;
}

.text-purple {
    color: #7267CB !important;
    font-weight: 600 !important;
}

.btn-primary {
    background: #397CC3 !important;
}

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

.form-control::-webkit-input-placeholder {
    color: #545454;
}

.masterWrap {
    padding: 0 2%;
    padding-bottom: 2%;
}

.form-group {
    margin-bottom: 1.2em;
}

p {
    margin-bottom: 0 !important;
}

.approveIcon {
    font-size: 1.7em;
    color: #04B78C;
    padding-right: 10px;
}

.leaveText {
    display: flex;
    align-items: center;
}

.rejectIcon {
    font-size: 1.7em;
    color: #D62646;
    padding-right: 10px;
}

.Width200 {
    width: 250px !important;
}

.colorBlue {
    color: #5d3ebf !important;
}

.textGreen {
    color: #2b9c67 !important;
}

.btnBorder {
    border: 1px solid #5d3ebf;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9em;
    padding: 0.15em 0.7rem;
}

    .btnBorder i {
        font-size: 1.2em;
        vertical-align: middle;
    }

.form-control {
    border-radius: 20px !important;
    height: calc(1.9rem + 2px);
    font-size: 12px !important;
    background: transparent;
    border: 1.5px solid #c1c1c1;
    margin-bottom: 15px;
}

.ProfileInfo {
    margin-top: 1.5em;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px;
}

.filterWrap .select2-container--default .select2-selection--single {
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5 !important;
    border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9d9d9d;
    font-size: 12px;
    padding: 0.5em;
}

#example1 {
    display: block;
    width: 100%;
    position: relative;
    color: #397cc3 !important;
    overflow-x: scroll;
    /*top: -200000000px;*/
}

#SearchFilter {
    position: absolute;
    border: 2px solid #dbdbdb;
    right: 30%;
    padding: 0 10px;
    width: 300px;
    border-radius: 10px;
    height: calc(2.2rem + 2px);
}

#Universal_SearchFilter {
    position: absolute;
    border: 2px solid #dbdbdb;
    right: 30%;
    padding: 0 10px;
    width: 230px;
    border-radius: 10px;
    height: calc(2.2rem + 2px);
}

.Universal_SearchFilter {
    position: absolute;
    border: 2px solid #dbdbdb;
    right: 30%;
    padding: 0 10px;
    width: 230px;
    border-radius: 10px;
    height: calc(2.2rem + 2px);
}

.SearchFilter {
    position: absolute;
    border: 2px solid #dbdbdb;
    right: 320px;
    padding: 0 10px;
    width: 300px;
    border-radius: 10px;
    height: calc(2.2rem + 2px);
}

.DatableBtnWrap {
    position: relative;
}

.searchWrap {
    position: relative;
}

.searchWrap1 {
    position: relative;
}

.searchWrap i {
    position: absolute;
    right: 2%;
    top: 3px;
    z-index: 999;
    font-size: 1.5em;
}

.searchWrap1 i {
    position: absolute;
    right: 10px;
    top: 3px;
    z-index: 999;
    font-size: 1.5em;
}

.clockpicker-popover {
    z-index: 9999 !important;
}

.ProfileInfo label {
    padding-left: 5px;
    margin-bottom: 1px !important;
}

.UserMenu ul li.active:before {
    content: ">";
    position: absolute;
    right: 0;
    font-size: 16px;
    font-weight: 600;
}

.ProfileInfo .form-control {
    border-radius: 20px !important;
    height: calc(2.5rem + 2px);
    font-size: 12px !important;
    background: transparent;
    border: 1.5px solid #c1c1c1;
    border-radius: 10px !important;
    margin-bottom: 15px;
}

#AddressForm .form-control {
    border-radius: 20px !important;
    height: calc(2.5rem + 2px);
    font-size: 12px !important;
    background: transparent;
    border: 1.5px solid #c1c1c1;
    border-radius: 10px !important;
    margin-bottom: 15px;
}

.ProfileInfo .form-group {
    margin: 0 !important;
}

.modal-header {
    border-bottom: none !important;
    padding: 0.5rem 1.3em;
    padding-top: 0.8em;
}

.close {
    opacity: 1 !important;
    font-size: 1.8em;
}

.modal-body {
    padding: 1.3rem;
    padding-top: 0.5em;
    padding-bottom: 1.5em;
}

.modal-title {
    font-weight: 600;
    font-size: 1.1em;
}

.formHeading {
    color: #1b4bad;
    font-weight: 600;
    font-size: 14px;
}

.modal-dialog {
    margin: 6.75rem auto;
    margin-left: auto !important;
    max-width: 550px !important;
}

.btn1 {
    width: 100%;
    background: #18d27a;
    border-radius: 20px;
    padding: 10px;
    color: #fff !important;
}

.modal-content {
    border-radius: 10px;
    border: none;
    box-shadow: 0px 0px 21px rgb(104 62 75 / 20%);
}

.removeRow {
    text-align: right;
}

.btnRemove {
    color: #3018a2 !important;
    text-decoration: underline !important;
    font-weight: 600;
    padding-right: 10px;
}

.MainrowDB {
    margin-bottom: 2em !important;
}

.mastererror {
    display: none;
    margin-left: .5rem;
    font-size: 0.9rem;
    z-index: 10000;
    width: 31%;
    height: 80px;
    text-align: left;
    right: 1%;
    box-shadow: 0px 0px 20px #acacac8f;
    padding: 30px 0px;
    top: 15%;
    position: fixed !important;
    padding-left: 0;
    color: #535353;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
}

.border-div {
    width: 5px;
    height: 60px;
    border-radius: 10px;
    background: #2bb083;
    position: absolute;
    display: flex;
    align-items: center;
    top: 10px;
    left: 15px;
}

.msgdiv {
    width: 100%;
    display: block;
    padding: 0.6em;
    padding-top: 0.8em;
}

#lblerrorpage {
    text-align: left;
    width: 73%;
    margin: 0 auto;
    margin-left: 20%;
}

    #lblerrorpage h4 {
        font-size: 1.2em;
        margin: 0;
    }

    #lblerrorpage p {
        font-size: 0.8em;
        font-weight: 500;
        margin: 0;
        width: inherit;
        padding-top: 0px;
    }

.alerticon {
    position: absolute;
    left: 8%;
    top: 25%;
    font-size: 2em;
    color: #2bb083;
}

.crossico {
    position: absolute;
    right: 4%;
    top: 45%;
    font-size: 1em;
}

.container-fulid {
    padding: 2em;
}

.dashboard-card {
    background-color: #E7E8F5;
    color: #1341A0;
    border-radius: 15px;
    padding: 0.5em;
    transition: 0.5s;
}

    .dashboard-card:hover {
        background-color: #1341A0;
        color: #fff;
        border-radius: 15px;
        padding: 0.5em;
        box-shadow: 1px 5px 10px 0px #1241a0;
    }

        .dashboard-card:hover .card-right-panel-text {
            color: #fff;
        }

.card-main-title {
    font-size: 1.3em;
}

.card-main-highlited-value {
    font-size: 3.5em;
}

.card-right-panel-text {
    text-align: right;
    line-height: 1.5;
    font-size: 12px;
    color: #6f6f6f;
    font-weight: 400;
}

.top-heading-bar a {
    background: #e7e8f5;
    text-decoration: none;
    padding: 11px;
    border-radius: 10px;
    display: inline-flex;
    color: #1241a0;
    font-weight: 600;
    margin-right: 20px;
    font-size: 0.8em;
}

    .top-heading-bar a i {
        margin-right: 10px;
    }

#example1_length {
    display: none !important;
}

.dataTables_length {
    display: none !important;
}

.dtfilter {
    display: flex;
    align-items: center;
}

.ddfilters {
    display: flex;
    margin-left: auto;
    align-items: center;
}

.entriesLength {
    display: flex;
    width: 100px;
    align-items: center;
    margin: 0 !important;
    position: absolute;
    right: 20%;
}

    .entriesLength label {
        margin: 0 !important;
        padding-right: 10px;
    }

.top-heading-bar .active {
    background-color: #1241a0 !important;
    color: #fff;
}

.row.top-heading-bar {
    height: auto !important;
    margin-bottom: 20px;
}

.top-Business-carousel {
    height: 60px !important;
}

    .top-Business-carousel a {
        background: #e7e8f5;
        text-decoration: none;
        padding: 11px;
        border-radius: 10px;
        color: #1241a0;
        font-weight: 600;
        margin-right: 20px;
    }

        .top-Business-carousel a i {
            margin-right: 10px;
        }

    .top-Business-carousel .active {
        background-color: #1241a0 !important;
        color: #fff;
    }

.card {
    border: none !important;
}

.slick-prev {
    left: -16px;
}

.slick-next {
    right: -25px;
}

.slick-prev, .slick-next {
}

.shadow {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10) !important;
}

.slick-slider {
    width: 100%;
    background-color: transparent;
}

    .slick-slider .slick-track {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .slick-slider .slick-slide {
        float: none;
        display: inline-block;
        vertical-align: middle;
        padding: 10px 0px;
        margin: 10px;
        background-color: white;
        transition: all 0.3s ease;
        height: auto;
        padding: 20px 5px;
        border-radius: 10px;
    }

        .slick-slider .slick-slide.slick-current {
            /* background: #673ab7;
            color: #fff;*/
        }

.slick-current .btnwrap .btn-border {
    color: #fff !important;
    border: 2px solid #fff;
}

    .slick-current .btnwrap .btn-border:hover {
        background: #fff !important;
        color: #673ab7 !important;
        border: 2px solid #fff;
    }

.slick-slider .slick-slide.slick-current .maincount p {
    color: #fff !important;
}

.slick-slider .slick-slide.slick-current .detailwrap p {
    color: #fff !important;
}

.slick-slider .slick-slide.slick-current .criclewrap p {
    color: #000 !important;
}

.slick-list {
    padding-left: 0 !important;
}

.slick-list {
    padding-right: 50px !important;
}

.slick-slider .slick-slide:first-child {
    margin-left: 0;
}

.slick-next {
}

    .slick-prev:before, .slick-next:before {
        font-family: 'slick';
        font-size: 20px;
        line-height: 1;
        opacity: .75;
        color: #0b2e85 !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

#datepicker.form-control {
    border-radius: .25rem !important;
    height: calc(2.8rem + 2px);
    background: #e7e8f5;
    padding: 0 8%;
    position: relative;
    border: none;
}

.dropdown-menu {
    z-index: 9999 !important;
}

.datepicker-dropdown {
    z-index: 9999 !important;
}

/*#ddHalfday {
    display: none;
}*/

.chkbox {
    width: 15px;
    height: 15px;
    margin-left: 3px;
    margin-right: 10px;
    border-radius: 0 !important;
}

.chklbl {
    display: flex;
    align-items: center;
    margin-top: 1.5em;
}

.MainChkboxWrap {
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 2.5em 0 !important;
    padding: 1em 0.5em;
    padding-top: 0;
}

    .MainChkboxWrap .form-check-inline {
        display: block !important;
        margin: 0 !important;
        text-align: center;
    }

.chckWrap {
    padding: 1em 2.5em;
}

.form-check-inline label {
    display: block !important;
    padding: 0;
    font-size: 1.4em;
    font-weight: 600;
}

.input-group-addon i {
    position: absolute;
    right: 15px;
    top: 0.4em;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #c7baba24 !important;
    opacity: 1;
    color: #5f5f5f;
    cursor: not-allowed;
}

.table-condensed td {
    padding: 10px !important;
}

.datepicker-switch {
    text-align: center !important;
}

.calico {
    position: absolute;
    top: 7px;
    right: 50px;
    font-size: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 2rem !important;
    /*background: #ffffff;*/
    border-radius: 12px;
    border: 1px solid #c1c1c1;
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 32px !important;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 10px !important;
}

.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: none !important;
}
/*.vh-100{
    height:100vh!important;
}*/
#NO2 {
    display: none !important;
}

#LIGHT {
    display: none !important;
}


.lds-dual-ring1.hidden {
    visibility: hidden;
}

.lds-dual-ring1 {
    display: inline-block;
    width: 80px;
    height: 80px;
}

    .lds-dual-ring1:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 25% auto;
        border-radius: 50%;
        border: 6px solid #5471e6;
        border-color: #5471e6 transparent #5471e6 transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.overlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(251,251,251,.8);
    z-index: 99999;
    opacity: 1;
    transition: all 0.5s;
}

.WrokingDetailsWrap {
    display: flex;
    flex-direction: row;
}

.CountDetails {
    filter: blur(0) !important;
}

.DetailBox {
    width: 10.5%;
    margin: 1%;
    /*display: flex;*/
    padding: 10px 10px 0 10px;
    /*filter: blur(0.7px);*/
    border-radius: 10px;
    color: #000;
    box-shadow: 0px 0px 7px #efefef, inset 0px 0px 7px #ffffff;
    font-family: 'Noto Sans', sans-serif;
}

    .DetailBox p {
        color: #000;
        font-size: 11.2px;
        font-weight: 400;
        text-transform: capitalize;
        font-family: 'Noto Sans', sans-serif;
    }

#pendingR {
    color: #ffb800 !important;
}

#approvedR {
    color: #08e1ba !important;
}

#RejectedRR {
    color: #f6b4a2 !important;
}

.CounterWrap {
    box-shadow: 0px 0px 11px #efefef, inset 0px 0px 10px #ffffff;
    border-radius: 10px;
    padding: 1em;
    padding-bottom: 0.8em;
    margin-top: 1em;
}

.holidaywrap {
    box-shadow: 0px 0px 11px #efefef, inset 0px 0px 10px #ffffff;
    border-radius: 10px;
    padding: 1em;
    padding-bottom: 0.2em;
    margin-top: 2em;
    min-height: 215px;
    max-height: 276px;
    overflow-y: auto;
}

    .holidaywrap h3 {
        font-size: 1.5em;
        font-weight: 600;
    }

    .holidaywrap ul {
        margin-top: 20px;
        padding: 0;
        position: relative;
    }

.updateBtn {
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 15px;
    font-size: 0.7em !important;
    font-weight: 600;
    text-transform: capitalize !important;
    background: #007cc3;
    border-radius: 10px;
    color: #fff !important;
    padding: 0.7em 1em;
    text-transform: uppercase;
}

.holidaywrap ul li {
    list-style-type: none;
}

.holidaywrap ul li {
    list-style-type: none;
    padding: 1em;
    background: #f5f5f5;
    border-radius: 10px;
}

.workingHrslbl {
    font-weight: 600;
    color: #00378A;
}

.holidaywrap ul li h4 {
    color: #00378A;
    font-weight: 600;
    font-size: 0.8em;
    margin: 0;
    margin-top: 3px;
}

    .holidaywrap ul li h4 span {
        color: #00378A;
        font-weight: 600;
        margin: 0;
    }

.modal h4 {
    font-size: 1.3em;
    font-weight: 600;
}

.modal .btn-submit {
    margin: 0;
    background: #007cc3;
    color: #f5f5f5 !important;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 10px;
    font-size: 1em;
    margin-right: 1.5em;
    padding: 0.1em 2em;
    display: flex;
    box-shadow: 0px 5px 5px 0px #cdb2b7ad;
    align-items: center;
}

.modal .btn-cancel {
    background: #dfdfdf;
    color: #4e4e4e !important;
}

.holidaywrap ul li p {
    font-size: 0.8em;
    font-weight: 400;
    color: #000;
}

.taskLbl {
    margin-top: 25px !important;
}

.Dayinfo {
    display: flex;
    flex-direction: row;
}

    .Dayinfo h3 {
        font-size: 1.5em;
        font-weight: 600;
    }

    .Dayinfo p {
        margin-left: auto !important;
        font-size: 12px;
        color: #000;
        font-weight: 500;
    }

.clockbtn {
    margin-top: 30px;
    margin-right: 15px;
    background: #f5f5f5;
    color: #999999 !important;
    padding: 0.7em 0.7em;
    font-size: 14px;
    border-radius: 20px;
}

    .clockbtn.active {
        background: #007cc3;
        color: #f5f5f5 !important;
        font-weight: 600;
    }

.btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
    background: #f5f5f5 !important;
    color: #999999 !important;
    border: none !important;
}

.fc-prev-button {
    position: absolute;
    left: 34%;
    top: 13.8%;
    height: 20px;
    width: 20px;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.fc-next-button {
    position: absolute;
    right: 34%;
    top: 13.8%;
    height: 20px;
    width: 20px;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.fc-theme-standard td, .fc-theme-standard th {
    border: 1px solid #ddd;
    border: none !important;
}

.fc .fc-daygrid-day-top {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.fc-theme-standard .fc-scrollgrid {
    border: 1px solid #ddd;
    border: none !important;
}

thead {
    background: transparent;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: none !important;
}

.fc .fc-scroller-liquid-absolute {
    position: absolute;
    top: 0;
    overflow: hidden !important;
    right: 0;
    left: 0;
    bottom: 0;
    margin-top: 2.5%;
}

.fc-direction-ltr {
    direction: ltr;
    text-align: left;
    padding: 0 2%;
    border: 1px solid #ccc;
    border-radius: 10px;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2em;
}

.fc .fc-toolbar-title {
    font-size: 1.25em !important;
    font-weight: 600;
    margin: 0;
}

.fc .fc-button .fc-icon {
    font-size: 1em;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
    margin-top: 0.5em;
    padding-bottom: 20px;
    border-bottom: 2px solid #f5f5f5;
}

.fc .fc-col-header-cell-cushion {
    display: inline-block;
    padding: 2px 4px;
    font-size: 1.2em !important;
    font-weight: 600;
}

#calendar {
    margin-top: 1em;
    border: none;
    box-shadow: 0px 0px 10px #efefef, inset 0px 0px 11px #ffffff;
    height: 620px !important;
}

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
    position: relative;
    min-height: 0em !important;
}

.fc .fc-daygrid-body {
    width: auto !important;
}

.fc-col-header {
    width: 100% !important;
}

.fc-scrollgrid-sync-table {
    width: 100% !important;
    height: auto !important;
}

.fc-day-today {
    background-color: transparent !important;
}

    .fc-day-today .fc-daygrid-day-frame {
        background: #f3f3f3;
        justify-content: center;
        align-items: center;
        left: 0;
        margin: 0 auto;
    }



/*
i wish this required CSS was better documented :(
https://github.com/FezVrasta/popper.js/issues/674
derived from this CSS on this page: https://popper.js.org/tooltip-examples.html
*/

.popper,
.tooltip {
    position: absolute;
    z-index: 9999;
    background: #FFC107;
    color: black;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: center;
}

.style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
}

.popper .popper__arrow,
.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
}

.tooltip .tooltip-arrow,
.popper .popper__arrow {
    border-color: #FFC107;
}

.style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
}

.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
    margin-bottom: 5px;
}

    .popper[x-placement^="top"] .popper__arrow,
    .tooltip[x-placement^="top"] .tooltip-arrow {
        border-width: 5px 5px 0 5px;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        bottom: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;
    }

.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
    margin-top: 5px;
}

    .tooltip[x-placement^="bottom"] .tooltip-arrow,
    .popper[x-placement^="bottom"] .popper__arrow {
        border-width: 0 5px 5px 5px;
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-color: transparent;
        top: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;
    }

.TableSpecWrap {
    display: none;
    align-items: center;
}

.spanWrap {
    display: flex;
    align-items: center;
    font-size: 0.8em;
}

.TableSpecWrap .mr-1 {
    margin-right: 0.45rem !important
}

.Holidaymonth {
    display: inline-flex;
    align-items: center;
}

.kraWrap {
    padding: 2em;
    background: url(../images/Orion-Card-BG.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    height: 240px;
    border-radius: 15px;
    box-shadow: 0px 5px 5px 0px rgb(137 137 137 / 66%);
}

.kraHead {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}

    .kraHead i {
        display: flex;
        margin-left: auto;
        font-size: 1.8em;
    }

.KRAList {
    height: 150px !important;
    overflow-y: scroll;
}

.kraWrap ul {
    padding-left: 1.5em;
    padding-right: 3px;
    margin-bottom: 0;
    list-style: none;
    position: relative;
}

    .kraWrap ul li {
        line-height: 2.5;
    }

        .kraWrap ul li:before {
            content: '>';
            position: absolute;
            left: 0;
            list-style-type: none;
            line-height: 2.5;
            color: #007cc3;
            font-weight: 500;
        }

.KRAList::-webkit-scrollbar {
    width: 5px;
    border-radius: 10px;
    background-color: #d11f1f !important;
}

.KRAList::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #000 !important;
}

.KRAList::-webkit-scrollbar-thumb {
    background: #818181;
}

#RegMsg, #weekoffMsg, #lateloginearlyoutMsg {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 1.5% 0;
    padding: 0 0.9em;
}

    #RegMsg p, #weekoffMsg p, #lateloginearlyoutMsg p {
        color: #000;
        font-weight: 500;
        font-size: 0.8em;
    }

    #RegMsg i, #weekoffMsg i, #lateloginearlyoutMsg i {
        font-weight: 500;
        font-size: 1.3em;
        padding-right: 5px;
    }


#RegMsg, #earlyoutMsg {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 1.5% 0;
    padding: 0 0.9em;
}

    #RegMsg p, #earlyoutMsg p {
        color: #000;
        font-weight: 500;
        font-size: 0.8em;
    }

    #RegMsg i, #earlyoutMsg i {
        font-weight: 500;
        font-size: 1.3em;
        padding-right: 5px;
    }


#RegMsg, #lateloginMsg {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 1.5% 0;
    padding: 0 0.9em;
}

    #RegMsg p, #lateloginMsg p {
        color: #000;
        font-weight: 500;
        font-size: 0.8em;
    }

    #RegMsg i, #lateloginMsg i {
        font-weight: 500;
        font-size: 1.3em;
        padding-right: 5px;
    }

.icon-blue {
    color: #3c81ff;
}

.icon-orange {
    color: #fa9d33;
}

.icon-green {
    color: #00bd67;
}

.icon-red {
    color: #f93a42;
}

.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
    margin-left: 5px;
}

.btnpopup {
    background-color: rgba(63, 8, 18, 0.88);
    position: absolute;
    right: 5px;
    top: 5px;
    border-radius: 10px !important;
    margin: 0 !important;
    box-shadow: -4px 3px 7px 0px rgb(193 193 193 / 97%);
}

.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
    margin-right: 5px;
}

    .popper[x-placement^="left"] .popper__arrow,
    .tooltip[x-placement^="left"] .tooltip-arrow {
        border-width: 5px 0 5px 5px;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        right: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
    }

.fc-h-event .fc-event-main {
    color: #fff;
    word-break: break-all;
    font-size: 10px;
    white-space: normal;
    color: var(--fc-event-text-color,#fff);
    padding: 0% 6%;
}

.TblHead {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}

#monthpicker {
    margin-left: auto;
    width: 165px;
    padding: 7px;
    background: #eee;
    border: none;
    border-radius: 10px;
}

.formWrap {
    padding: 1.5em 2em;
    border-radius: 15px;
    border: 2px solid #e7e7e7;
}

    .formWrap .form-control {
        border-radius: 10px !important;
        height: calc(2.8rem + 2px) !important;
        font-size: 13px !important;
        background: transparent;
        border: 1.5px solid #c1c1c1;
        margin-bottom: 22px;
    }

    .formWrap h2 {
        font-size: 1.4em;
        font-weight: 600;
    }

    .formWrap .form-group {
        margin-bottom: 1em;
    }

.btn-link {
    font-weight: 500;
    color: #1b1b1b;
    font-size: 0.8em;
    padding: 0.3em 0.1em;
    background-color: transparent;
}

    .btn-link:hover {
        color: #000000;
        text-decoration: none;
        background-color: transparent;
        border-color: transparent;
    }

.TaskInfo {
    position: absolute;
    right: 20px;
    top: 5px;
    font-size: 11px;
    color: #232323 !important;
    font-weight: 400;
}

    .TaskInfo p {
        color: #595959 !important;
        padding-right: 5px;
        display: inline-flex;
        font-size: 12px;
        font-weight: 500;
    }

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem 0;
    background: #f2f2f2;
    border-radius: 10px;
    padding-top: 0.5em;
    min-height: auto;
}

.AccordianIcon {
    font-size: 1.2em;
    color: #397cc3;
    margin-right: 5px;
}

.collapsed h5 {
    display: flex;
    align-items: center;
}

.card-header {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    background-color: transparent;
    border: 2px solid rgba(0, 0, 0, 0.125);
    margin-top: 10px;
    border-radius: 10px !important;
    position: relative !important;
}

.projectName {
    color: #007cc3 !important;
}

.btn-submit {
    margin: 0;
    background: #007cc3;
    color: #f5f5f5 !important;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 10px;
    font-size: 1em;
    padding: 0.5em 2em;
    display: flex;
    box-shadow: 0px 5px 5px 0px #cdb2b7ad;
    align-items: center;
}

.btn-cancel {
    background: #e5e5e5;
    color: #000 !important;
    font-weight: 600;
    border-radius: 10px;
    font-size: 1em;
    padding: 0.3em 1.1em;
    box-shadow: 0px 5px 5px 0px #cdb2b7ad !important;
}

.mainwrap .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 37.333333%;
    max-width: 37.333333%;
}

.mainwrap .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 62.666667%;
    max-width: 62.666667%;
}

fc-daygrid-block-event .fc-event-time, .fc-daygrid-block-event .fc-event-title {
    padding: 1px;
    justify-content: center;
    display: flex !important;
}

.UserInfo {
    padding: 2.5em 3.5em;
    background: #f9f9f9;
}

    .UserInfo h5 {
        font-size: 21px;
        font-weight: 600;
    }

.UserMenu {
    padding: 3em 1em;
}

.mainwrap {
    margin-top: 20px;
}

.editbtnPhoto {
    position: absolute;
    z-index: 0;
    left: 15px;
    visibility: hidden;
    transition: all 0.3s ease-out;
}

.userImage:hover .editbtnPhoto {
    visibility: visible;
    transition: all 0.3s ease-out;
}

.UserDetailsWrap h3 {
    font-size: 2em;
    font-weight: 600;
    margin-top: 1em;
    display: flex;
}

.editdiv:focus-within {
    outline: none !important;
    border-bottom: 2px solid #000;
}

.editable {
    outline: none !important;
    border-bottom: 2px solid #000;
}

.errDiv {
    background: #dddddd;
    color: #000 !important;
    font-size: 16px;
    font-weight: 500;
    padding: 10px;
    border-radius: 10px;
    display: none;
    margin-top: 20px
}

.fc .fc-daygrid-event {
    z-index: 6;
    margin-top: 1px;
    cursor: pointer;
}

.UserMenu ul li {
    list-style-type: none;
    padding: 1em 0em;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    font-size: 1.1em;
    position: relative;
    cursor: pointer;
}

    .UserMenu ul li i {
        margin-left: -2em;
        padding-right: 1em;
        font-size: 20px;
    }

    .UserMenu ul li:first-child {
        list-style-type: none;
        padding-top: 0em;
    }

.bgUser {
    background: #f9f9f9;
    height: 100%;
    overflow: hidden;
}

.MonthpickerWrap {
    position: relative;
}

    .MonthpickerWrap i {
        position: absolute;
        right: 10px;
        top: 10px;
    }

.ui-button-text {
    display: none;
}

.UserLeavesWrap {
    display: none;
}

.modal .form-control {
    border-radius: 10px !important;
    margin-bottom: 15px;
}

.modalsubmit i {
    font-size: 23px;
    font-weight: 500;
    padding-left: 10px;
}

.modalsubmit1 {
    padding: 0.4em 2em !important;
}

#viewordermodal .modal-dialog {
    max-width: 700px !important;
}

#viewordermodal h4 {
    font-size: 1.3em;
    font-weight: 600;
}

#viewordermodal .modal-body {
    padding: 1.5rem;
    padding-top: 1.5em;
    padding-bottom: 3.5em;
}

button.close {
    padding: 0;
    max-width: 100%;
    background-color: #e9e9e9;
    width: 40px;
    height: 41px;
    border-radius: 50%;
    font-size: 0,8em;
    color: #000;
    position: absolute;
    right: 0px;
    top: 0px;
    font-weight: 400;
    outline: none;
    box-shadow: none;
    text-shadow: none;
    opacity: 1 !important;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 0.75;
    border: none !important;
    outline: none !important;
}

.filterWrap h5 {
    display: inline-flex;
    margin-right: 1em;
    font-size: 1.1em;
    font-weight: 600;
}

.mainhead {
    font-size: 1.4em;
    font-weight: 600;
}

.selectbox {
    margin-right: 1em !important;
    background: #f5f5f5;
    color: #585858 !important;
    font-weight: 500;
    padding: 0.7em 1.3em;
    font-size: 14px !important;
    border-radius: 10px;
    border: none;
}

.selectbox_tbl {
    margin-right: 2px !important;
    background-color: #f5f5f5;
    color: #585858 !important;
    font-weight: 500;
    /* padding: 0.7em 1.3em;*/
    font-size: 14px !important;
    border-radius: 10px !important;
    width: 180px;
    border: none;
}

.AddBox {
    /* width: 21%;*/
    margin: 0;
    /*  display: flex;*/
    float: right;
    padding: 0.4em 0.7em;
    /* display:flex;*/
    align-items: center;
    border-radius: 8px;
    color: #ffff !important;
    cursor: pointer;
}

.UserLeavesWrap .AddBox {
    /* width: 21%;*/
    margin: 0;
    display: flex;
    float: right;
    padding: 0.4em 0.6em;
    font-size: 1.1em;
    border-radius: 8px;
    color: #ffff !important;
}

.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 15px !important;
}

.detailtable {
    padding: 0.5em 0.6em;
    padding: 10px;
    font-size: 16px
}

.form-group {
    margin: 3px;
}

table.detailtable th {
    padding: 1em;
    color: black;
}

.modal-backdrop.show {
    opacity: 0.9;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #fff;
}

.disabledtbl {
    pointer-events: none;
    background: #e2e2e2 !important;
    color: #000;
}

#viewordermodal .modal-dialog {
    margin: 4.75rem auto;
    margin-left: auto !important;
    max-width: 650px !important;
}

#viewordermodal label {
    display: inline-block;
    margin-bottom: 2px !important;
    font-size: 12px;
}

#viewordermodal .form-control {
    margin-bottom: 8px !important;
}

#viewordermodal .btn-submit {
    padding: 0.5em 2em;
}

#ddlDepartment {
    display: inline-flex;
}

.poweredby {
    position: fixed;
    width: 100%;
    background: #f9f9f9;
    bottom: 0;
    left: 0;
    z-index: 9999;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    padding: 0.3em;
}

    .poweredby img {
        width: 100px;
        padding: 0 0.5em;
    }

.timer_button:disabled,
.timer_button[disabled] {
    cursor: no-drop !important;
    pointer-events: none !important;
}

#datepicker_month.form-control {
    border-radius: 10px !important;
    background: #f5f5f5;
    border: none;
    color: #280606;
}

#year_picker.form-control {
    border-radius: 10px !important;
    background: #f5f5f5;
    border: none;
    color: #280606;
}

#datepicker_month1.form-control {
    border-radius: 10px !important;
    background: #f5f5f5;
    border: none;
    color: #280606;
}

.UserDp.form-control {
    background: #e3e3e3 !important;
}

.filterWrap .select2-container--default .select2-selection--single {
    background-color: #e3e3e3;
    border: 1px solid #f5f5f5 !important;
    border-radius: 4px;
}

.select2-container--disabled .select2-container--default .select2-selection--single {
    background-color: #e3e3e3 !important;
}

#entries.form-control {
    border-radius: 10px !important;
    background: #f5f5f5;
    border: none;
    color: #280606;
    width: 7em;
}

.entries.form-control {
    border-radius: 10px !important;
    background: #e7e7e7;
    border: none;
    color: #280606;
}

.form-check-inline .form-check-input {
    margin: 0 !important;
    width: 1.3em;
    height: 1.3em;
    border: 1px solid #007cc3 !important;
    margin-top: 1.5em !important;
}

/*.form-group1 {
    display: block;
    margin-bottom: 15px;
}*/
.form-check input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.form-check label {
    position: relative;
    cursor: pointer;
    width: 40px;
}

    .form-check label:after {
        content: '';
        -webkit-appearance: none;
        background-color: transparent;
        border: 2px solid #399a00;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 7px;
        display: block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        width: 10px;
        margin-right: 0px;
        margin: 0 auto;
        margin-top: 15px;
    }

.form-check input:checked + label:before {
    content: '';
    display: block;
    position: absolute;
    top: 47px;
    left: 17.5px;
    width: 5px;
    height: 11px;
    border: solid #fff;
    z-index: 9999;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-check input:checked + label:after {
    background: #e5b413;
    border: 2px solid #e5b413;
}

#ProfileUpdateForm .select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 1px solid #d3d3d3 !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eee;
    cursor: default;
}

#TaskUpdateForm .select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #c1c1c1 !important;
}

.toggle-btn {
    width: 80px;
    height: 40px;
    margin: 10px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    background: url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyklEQVQ4T42TaxHCQAyENw5wAhLACVUAUkABOCkSwEkdhNmbpHNckzv689L98toIAKjqGcAFwElEFr5ln6ruAMwA7iLyFBM/TPDuQSrxwf6fCKBoX2UMIYGYkg8BLOnVg2RiAEexGaQQq4w9e9klcxGLLAUwgDAcihlYAR1IvZA1sz/+AAaQjXhTQQVoe2Yo3E7UQiT2ijeQdojRtClOfVKvMVyVpU594kZK9zzySWTlcNqZY9tjCsUds00+A57z1e35xzlzJjee8xf0HYp+cOZQUQAAAABJRU5ErkJggg==') no-repeat 50px center #e74c3c;
    cursor: pointer;
    -webkit-transition: background-color 0.4s ease-in-out;
    -moz-transition: background-color 0.4s ease-in-out;
    -o-transition: background-color 0.4s ease-in-out;
    transition: background-color 0.4s ease-in-out;
    cursor: pointer;
}

    .toggle-btn.active {
        background: url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmUlEQVQ4T6WT0RWDMAhFeZs4ipu0mawZpaO4yevBc6hUIWLNd+4NeQDk5sE/PMkZwFvZywKSTxF5iUgH0C4JHGyF97IggFVSqyCFga0CvQSg70Mdwd8QSSr4sGBMcgavAgdvwQCtApvA2uKr1x7Pu++06ItrF5LXPB/CP4M0kKTwYRIDyRAOR9lJTuF0F0hOAJbKopVHOZN9ACS0UgowIx8ZAAAAAElFTkSuQmCC') no-repeat 10px center #2ecc71;
    }

        .toggle-btn.active .round-btn {
            left: 45px;
        }

    .toggle-btn .round-btn {
        width: 30px;
        height: 30px;
        background-color: #fff;
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -15px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .toggle-btn .cb-value {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 9;
        cursor: pointer;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

@media only screen and (max-width: 600px) {
    .col-12 {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0;
    }

    .MenuwrappDiv {
        flex: 0 0 10.8%;
        max-width: 10.8%;
    }

    #sidebar {
        display: block;
    }

    .WrokingDetailsWrap {
        display: inline-block;
        margin-top: 2em;
    }

    .DetailBox {
        width: 44.5%;
        margin: 1%;
        display: inline-block;
    }

    .DetailBox_mob {
        width: 44.5%;
        margin: 1%;
        display: inline-block;
    }

    .DetailBox h5 {
        font-size: 0.9rem;
    }

    .modal-dialog {
        margin: 6.75rem auto;
        margin-left: auto !important;
        max-width: 300px !important;
    }

    .fc-next-button {
        position: absolute;
        right: 18%;
        top: 6%;
    }

    .fc-prev-button {
        position: absolute;
        left: 18%;
        top: 6%;
    }

    .bgUser {
        height: auto;
    }

    .modal .btn-submit {
        font-size: 0.8em;
        margin-right: 1em;
        padding: 0.1em 1em;
    }

    .main-section {
        position: relative;
        background: #00D3ED;
        transform: translate(0%,80%);
        padding: 60px 0px;
        margin: auto;
    }

    .datepicker-section {
        margin: auto;
    }

        .datepicker-section h1 {
            color: #275760;
            font-weight: bold;
        }

    .row-m-0 {
        margin: 0;
    }

    .dataTables_wrapper {
        overflow-x: scroll;
    }

    #viewordermodal .modal-dialog {
        max-width: 320px !important;
    }

    .empBtn {
        margin-top: 1em;
        background-color: #397cc3;
        position: absolute;
        top: -55px;
        right: 3em;
        font-size: 0.8em;
    }

    .mainhead {
        margin-bottom: 1em !important;
        font-size: 1.2em;
    }

    .dataTables_length {
        display: block;
    }

    table.dataTable thead th, table.dataTable tfoot th {
        font-weight: 600;
        font-size: 0.8em !important;
        text-align: left !important;
    }

    table.dataTable tbody td {
        font-size: 0.8em !important;
    }

    table.dataTable tbody th, table.dataTable tbody td {
        padding: 5px 10px;
    }

    .tblbtn {
        font-size: 11px !important;
        padding: 0.5em 0;
        width: 90px !important;
    }

    .filterWrap .selectbox {
        margin-right: 1em !important;
        background: #f5f5f5;
        color: #585858 !important;
        font-weight: 500;
        padding: 0.7em 0.8em;
        font-size: 11px !important;
        border-radius: 10px;
        border: none;
    }

    .clockbtn {
        margin-right: 15px;
        background: #f5f5f5;
        color: #999999 !important;
        padding: 0.5em 0.8em;
        font-size: 1em !important;
    }

    .updateBtn {
        position: absolute;
        right: 6px;
        top: 10px;
        font-size: 0.6em !important;
        font-weight: 500;
        padding: 0.7em 0.5em;
    }

    .holidaywrap ul li {
        padding: 1.3em;
    }

    .mastererror {
        /*position: absolute;*/
        left: 9%;
        width: 250px;
    }
}


.dataTables_wrapper .dataTables_filter input {
    outline: none;
}

.dataTables_wrapper .dataTables_filter {
    float: left;
    position: relative;
}


.ri-file-search-fill {
    position: absolute;
    right: 3%;
    top: 34%;
    z-index: 999;
    font-size: 1.5em;
}

.addmenubtn {
    font-size: 13px;
}

.drptgl {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px !important;
    transform: translateY(-50%);
}

.list_btn {
    background: #397cc3;
    color: #fff;
    font-size: 1em;
    text-transform: capitalize;
}

.collapsed {
    background: #fff;
    color: #000;
}
/* dropdowm */
.dropbtn {
    color: #7c7c7c;
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

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

.dropdown-content-collapse {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: auto;
    box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 20%);
    /*z-index: 1;*/
    z-index: 20;
    text-align: left !important;
    right: 84%;
    top: -240%;
}

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

        .dropdown-content-collapse p:hover {
            background-color: #f1f1f1
        }

.collapse_dropdown:hover .dropdown-content-collapse {
    display: block;
}

.dark_m_white {
    background: #fff;
}

.list_card {
    padding: 1.25rem;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    cursor: pointer !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
}

/* ================================== loader =========================================*/
#loaderwrap {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(252, 252, 255);
}

#loader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.icon-img1 {
    /* filter: opacity(0.7) invert(1) !important;*/
}


#new_lblerrorpage {
    text-align: left;
    width: 73%;
    margin: 0 auto;
    margin-left: 17%;
}

    #new_lblerrorpage h4 {
        font-size: 1.2em;
        margin: 0;
    }

    #new_lblerrorpage p {
        font-size: 0.8em;
        font-weight: 500;
        margin: 0;
        width: inherit;
        padding-top: 0px;
    }

.suggestion-list {
    background: #1b1b1b;
}

    .suggestion-list p:hover {
        background-color: #424242;
    }



.flatpickr-calendar {
    transform: scale(0.8);
    transform-origin: top left;
    transition: transform 0.2s ease-in-out; /* Add smooth scaling effect */
}
/* Adjust positioning relative to the input */
.flatpickr-calendar {
    position: absolute;
    top: 10px; /* Adjust top to avoid overlap */
    left: 0px; /* Align it properly */
    z-index: 9999; /* Ensure it's above other elements */
    transform: scale(0.8);
    width: 305px !important; /* Adjust the width as needed */
    height: auto; /* Keep height automatic, adjust only if necessary */
}

.form-control:disabled, .form-control[readonly] {
    background-color: #ffffff !important;
    cursor: not-allowed;
}

.xdsoft_time_box {
    width: 70px !important;
}

.xdsoft_timepicker {
    margin-right: 10px !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
    background-position: -35px 0 !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    background-position: -35px -15px !important;
}