/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-color: #cccccc5e #ffffff;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 14px;
        height: 13px;
    }

    *::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 10px;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #e1e0e0;
        border-radius: 10px;
        border: 1px solid #ffffff;
    }

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

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

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

.border-radius-20px {
    border-radius: 20px !important;
}

.rem15 {
    width: 15rem !important;
}

.img-thumbnail {
    width: 100%;
    max-height: 100%;
    object-fit: fill;
}

.z-index-10000 {
    z-index: 10000 !important;
}

.responsive-font-13 {
    font-size: 13px !important;
}

.text-grey {
    color: #b4b4b4 !important;
}

.top-1px {
    top: 1px !important;
}

.font-size-74 {
    font-size: 74px !important;
}

.top_-20px {
    top: -20px !important;
}

.actioncard {
    position: absolute;
    left: -10rem !important;
    top: 0rem !important;
}

.file-selected-text {
    position: absolute;
    top: 45px;
    left: 60px;
    background: white;
    width: 36%;
}

.border-top-1px {
    border-top: 1px solid #ced4da !important;
}

.border-bottom-2px {
    border-bottom: 2px solid #eff2f7 !important;
}

.custom-title-color {
    color: #495057
}

.employeeLoginBg {
    background-color: #ed1941 !important;
}

.custom-file-button input[type=file] {
    margin-left: -2px !important;
}

    .custom-file-button input[type=file]::-webkit-file-upload-button {
        display: none;
    }

    .custom-file-button input[type=file]::file-selector-button {
        display: none;
    }

.custom-file-button:hover label {
    background-color: #dde0e3;
    cursor: pointer;
}

.custom-nav-active {
    color: #fff !important;
    background-color: #343a40 !important;
    border-color: #ced4da #ced4da #f3f3f7 !important;
}

.verti-timeline .event-list .event-timeline-dot {
    z-index: 0 !important;
}

.assigneeBoxcolor {
    background-color: #1084cd40;
    border-radius: 5px;
}

.font-size-25 {
    font-size: 25px;
}

.height56 {
    height: 56% !important;
}

.modalbodyheight {
    max-height: calc(100% - 20px) !important;
}

.height18rem {
    height: 18rem !important;
}

.confetti {
    flex-wrap: wrap;
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    margin: 0 auto;
    user-select: none;
    position: fixed;
    top: 0;
    left: 4%;
}

    .confetti > img {
        width: 40%;
        height: 50%;
    }

.percentage-position {
    position: relative;
    left: 0%;
    right: 0%;
    top: 1px;
}

.text-disabled-grey {
    color: #bcc1c5c7
}

.light-soft-success {
    background-color: #34c38f26
}

.light-soft-success-2 {
    background-color: #34c38f1f
}

@media only screen and (max-width: 1000px) {
    .Modal-xxl {
        max-width: 800px;
    }
}

@media only screen and (min-width: 1001px) and (max-width: 1200px) {
    .Modal-xxl {
        max-width: 1000px;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
    .Modal-xxl {
        max-width: 1200px;
    }
}

@media only screen and (min-width: 1401px) and (max-width: 1600px) {
    .Modal-xxl {
        max-width: 1400px;
    }
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .Modal-xxl {
        max-width: 1400px;
    }
}

@media only screen and (min-width: 1801px) {
    .Modal-xxl {
        max-width: 1600px;
    }
}

.gap-25px {
    gap: 15px !important;
}

.gradient-text {
    background: -webkit-linear-gradient(#ed1941, #e81840);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.successbg {
    background-color: #34c38f26;
}

table thead tr th:nth-child(1) {
    border-radius: 5px 0px 0px 0px !important;
}

table thead tr th:nth-last-child(1) {
    border-radius: 0px 5px 0px 0px !important;
}

table thead tr th {
    border-color: transparent !important
}

.dark-blue {
    color: #00009B;
}

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

.width-50px {
    width: 50px !important;
}

#filter-row {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    background-color: yellow;
    padding: 0px;
}

.border-bottom-1 {
    border-bottom: 1px solid #ebebeb !important;
}

    .border-bottom-1:hover {
        border-bottom: 1px solid #d1636361 !important;
    }

.two {
    display: none;
}

.select2-container .select2-search--inline .select2-search__field {
    padding: 2px !important;
}

.sorticon1 {
    position: relative;
    right: -15px;
    top: 0px;
}

.overdue-bg {
    background-color: #fff0f0;
}

.border-radius-3 {
    border-radius: 3px !important;
}

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

.img-width {
    width: 100% !important;
    height: 100% !important;
}

.w-fit-content {
    width: fit-content !important;
}

.btn-accepted-1 {
    color: #fff !important;
    line-height: 33px;
    padding-right: 14px;
    border-radius: 3px;
}

.borderIcon {
    border: 2px solid #ccc !important;
}

.sorticon2 {
    position: relative;
    right: -5px;
    top: 0px;
}

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

.searchboxtable {
    position: absolute;
    top: 56px;
    right: 9px;
    width: fit-content;
}

.pre {
    display: block;
    font-family: Poppins,sans-serif;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: pre-line;
}

.nofocus:focus-visible {
    outline: none;
    box-shadow: none;
}

.left-0 {
    left: 0;
}

.star-transaparent {
    color: #ced4da !important;
}

.cursor-NoAllowed {
    cursor: not-allowed !important;
}

.min-width-60 {
    min-width: 60px;
}

.min-width-100 {
    min-width: 100px;
}

.min-width-250 {
    min-width: 250px;
}

.min-width-700 {
    min-width: 700px;
}

.cursor-grab {
    cursor: grab;
}



.z-index1101 {
    z-index: 1101 !important; /* has to be larger than 1050 */
}

.cursor-grabbing {
    cursor: grabbing;
}

.font-size-23 {
    font-size: 23px !important;
}

.font-size-30 {
    font-size: 30px !important;
}

.font-size-38 {
    font-size: 38px !important;
}

.font-size-7 {
    font-size: 7px !important;
}

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

.iframe-size {
    width: 100%;
    height: 800px;
}

.border-grey {
    border: 1px solid #ced4da;
}

.width-100 {
    width: 100px;
}

.max-height-14rem {
    max-height: 14rem;
    overflow: auto;
}

.max-height-20rem {
    max-height: 20rem;
    overflow: auto;
}

.datepicker-icon-lg {
    position: absolute;
    right: 15px;
    top: 10px;
}

.datepicker-icon-lg2 {
    position: absolute;
    right: 22px;
    top: 37px;
}

.datepicker-icon-lg3 {
    position: absolute;
    right: 22px;
    top: 46px;
}

.datepicker-icon-lg5 {
    position: absolute;
    right: 22px;
    top: 10px;
}

.datepicker-icon-lg4 {
    position: absolute;
    left: 167px;
    top: 17px;
}

.waves-effect-under {
    position: inherit;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pre-line {
    word-wrap: initial;
    min-width: 100px;
    max-width: 210px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.bottombtn {
    position: fixed;
    /* top: 0; */
    bottom: 4.5rem;
    left: 0;
    right: 2rem;
    z-index: 10000;
}

.bottombtn1 {
    position: fixed;
    /* top: 0; */
    bottom: 5px;
    right: 2rem;
    z-index: 1050;
}

.height-0 {
    height: 19px !important;
}

.line-Height0 {
    line-height: 0px !important;
}

.line-Height30 {
    line-height: 30px;
}

.line-height-initial {
    line-height: initial !important;
}

.line-Height20 {
    line-height: 20px;
}

.maxwidth210 {
    max-width: 200px;
    white-space: inherit;
}

.max-width-100 {
    max-width: 100px;
}

.minwidth200 {
    min-width: 200px;
}

.filterCrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    /* background-color: #eff2f7; */
    border-radius: .25rem;
}

.filterCrumb-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.hstack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.gap-2 {
    gap: 0.5rem !important;
}

.height100 {
    height: 100%;
}

.text-red {
    color: red;
}

.width30 {
    width: 30px;
}

.bg-log-gray {
    background-color: #616b7fe8 !important;
}

.btn-log-color {
    background-color: #ed1941eb;
    border-color: #ed1941eb;
    color: white;
    transition: ease-in-out 1s;
}

    .btn-log-color:hover {
        background-color: #ed1941;
        border-color: #ed1941;
        color: white;
    }

.cursor-pointer {
    cursor: pointer;
}

.wrap {
    word-break: break-all;
    white-space: normal;
}

.cursor-default {
    cursor: default !important;
}

.min-height170 {
    min-height: 170px;
}

.min-width-150 {
    min-width: 150px;
}

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

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

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

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

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

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

.max-width-110 {
    max-width: 110px !important;
}

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

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

.max-width-140 {
    max-width: 140px !important;
}

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

.width-190 {
    width: 190px;
}

.max-height600 {
    max-height: 600px;
}

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


.height-auto {
    height: auto;
}

.min-height-fitcontent {
    min-height: fit-content;
}

.overflow-y {
    overflow-y: auto;
}

.z-index {
    z-index: 5;
}

.z-index-1 {
    z-index: 1;
}

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

.max-height {
    max-height: 43rem;
}

.radius50 {
    border-radius: 35px;
}

.pt-15 {
    padding-top: 15px;
}

.color-white {
    color: #fff;
}

.color-black {
    color: #000;
}

.color-grey {
    color: grey;
}

.shadow {
    box-shadow: 0 0 3px rgb(53 64 78 / 20%) !important;
}

.shadowCard {
    box-shadow: 0px 0px 15px 2px rgb(53 64 78 / 20%) !important;
}

.shadowClose {
    box-shadow: 0 3px 7px rgb(244 106 106 / 58%) !important;
}

.shadowTic {
    box-shadow: 0 3px 7px #34c38f !important;
}

.rounded {
    border-radius: 5px !important;
}

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

.bg-light {
    background-color: #f7f8fa !important;
}

.bg-primary, .btn-primary, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.focus, .btn-outline-primary:not(:disabled):not(.disabled):active, .badges-primary, .nav-pills .nav-link.active, .pagination .active a, .custom-control-input:checked ~ .custom-control-label:before, #preloader #status .spinner > div, .social-icon li a:hover, .back-to-top:hover, .back-to-home a, ::selection, #topnav .navbar-toggle.open span:hover, .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots.clickable .owl-dot:hover span, .watch-video a .play-icon-circle, .sidebar .widget .tagcloud > a:hover, .flatpickr-day.selected, .flatpickr-day.selected:hover, .tns-nav button.tns-nav-active, .form-check-input.form-check-input:checked {
    background-color: #6dc77a !important;
}

.badges {
    display: inline-block;
    padding: 5px 10px;
    font-size: 75%;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    color: #fff;
}

.letter-space2px {
    letter-spacing: 2px;
}

.btn-primary, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.focus, .btn-outline-primary:not(:disabled):not(.disabled):active {
}

.btn-primary, .btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.focus, .btn-outline-primary:not(:disabled):not(.disabled):active, .bg-soft-primary .border, .alert-primary, .alert-outline-primary, .badges-outline-primary, .nav-pills .nav-link.active, .pagination .active a, .form-group .form-control:focus, .form-group .form-control.active, .custom-control-input:checked ~ .custom-control-label:before, .custom-control-input:focus ~ .custom-control-label::before, .form-control:focus, .social-icon li a:hover, #topnav .has-submenu.active.active .menu-arrow, #topnav.scroll .navigation-menu > li:hover > .menu-arrow, #topnav.scroll .navigation-menu > li.active > .menu-arrow, #topnav .navigation-menu > li:hover > .menu-arrow, .flatpickr-day.selected, .flatpickr-day.selected:hover, .form-check-input:focus, .form-check-input.form-check-input:checked, .container-filter li.active, .container-filter li:hover {
    border-color: #6dc77a !important;
}

    .bg-primary, .btn-primary, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.focus, .btn-outline-primary:not(:disabled):not(.disabled):active, .badges-primary, .nav-pills .nav-link.active, .pagination .active a, .custom-control-input:checked ~ .custom-control-label:before, #preloader #status .spinner > div, .social-icon li a:hover, .back-to-top:hover, .back-to-home a, ::selection, #topnav .navbar-toggle.open span:hover, .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots.clickable .owl-dot:hover span, .watch-video a .play-icon-circle, .sidebar .widget .tagcloud > a:hover, .flatpickr-day.selected, .flatpickr-day.selected:hover, .tns-nav button.tns-nav-active, .form-check-input.form-check-input:checked {
        background-color: #556ee6 !important;
    }

/*.btn {
    padding: 8px 20px;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    font-weight: 600;
    border-radius: 35px;
}*/
.btn-auth {
    padding: 8px 20px;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    border: none;
    border-radius: 0.18rem;
}

.btn1 {
    padding: 5px 10px;
    outline: none;
    text-decoration: none;
    font-size: 13px;
    /* letter-spacing: 0.5px; */
    transition: all 0.3s;
    border-radius: 0.20rem;
}

.btn-primary {
    background-color: #50a5f1 !important;
    border: 1px solid #50a5f1 !important;
    color: #fff !important;
}

.btn {
    padding: 8px 20px;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    font-weight: 400;
    border-radius: 0.20rem;
}

.btn-margin {
    margin-top: 5px;
    margin-bottom: 5px
}

.btnCmn {
    padding: 4px 8px;
    outline: none;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    font-weight: 400;
    border-radius: 0.2rem;
}

.btnIcon {
    padding: 12px;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    font-weight: 600;
}

.btn-soft-primary {
    color: #556ee6;
    background-color: rgba(85,110,230,.1);
    border-color: transparent;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    border-radius: 0.20rem;
}

    .btn-soft-primary:hover {
        color: #f8f9fa;
        background-color: rgb(85 110 230);
        border-color: transparent;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        border-radius: 0.20rem;
    }

.btn-soft-danger {
    color: #f46a6a;
    background-color: rgba(244,106,106,.1);
    border-color: transparent;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    .btn-soft-danger:hover {
        color: #fff;
        background-color: #f46a6a;
        border-color: transparent;
    }

.btn-accepted {
    background-color: #34c38f !important;
    border: 1px solid #34c38f !important;
    color: #fff !important;
    box-shadow: 0 3px 7px #34c38f !important;
    border-radius: 0px;
}

.btn-rejected {
    background-color: #f46a6a !important;
    border: 1px solid #f46a6a !important;
    color: #fff !important;
    box-shadow: 0 3px 7px #f46a6a !important;
    border-radius: 0px;
}

.btn2 {
    padding: 5px 10px;
    outline: none;
    text-decoration: none;
    font-size: 13px;
    /* letter-spacing: 0.5px; */
    transition: all 0.3s;
    border-radius: 0.20rem;
}

.btnSerach {
    outline: none;
    text-decoration: none;
    padding: 5px 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    font-weight: 600;
    border-radius: 2px;
}

.btn-primary2 {
    background-color: rgba(244,106,106,.18) !important;
    border: 1px solid rgb(253 228 228) !important;
    color: #dc3545 !important;
    box-shadow: 0 3px 7px rgb(253 228 228) !important;
}

.btn-soft-success {
    color: #34c38f;
    background-color: rgba(52,195,143,.1);
    border-color: transparent;
    border-radius: 0.20rem;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    .btn-soft-success:hover {
        color: #fff;
        background-color: #34c38f;
        border-color: transparent;
    }

a {
    text-decoration: none;
}

.badge-pills {
    padding-right: .6em;
    padding-left: .6em;
    padding-top: 5px;
    padding-bottom: 5px;
    /* border-radius: 10rem; */
}
/*Toggle button*/
.check-box {
    transform: scale(1);
}

    .check-box input[type="checkbox"] {
        position: relative;
        appearance: none;
        width: 36px;
        height: 5px;
        background: #ccc;
        border-radius: 50px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: 0.4s;
    }

    .check-box input:checked[type="checkbox"] {
        background: #ff0000;
    }

    .check-box input[type="checkbox"]::after {
        position: absolute;
        content: "";
        width: 18px;
        height: 17px;
        top: -6px;
        left: 0;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        transform: scale(1.1);
        transition: 0.4s;
    }

    .check-box input:checked[type="checkbox"]::after {
        left: 50%;
    }


.bx-plus-circle:after {
    background-color: orangered;
}

.nav-tabs .nav-link {
}

Table
.table td, .table th {
    vertical-align: middle;
    border-top: 1px solid #eff2f7;
}

.table th {
    padding: 0.45rem 0.45rem 0.45rem 10px !important;
}

.table td {
    padding: 0px 10px 0px 10px !important;
    border-bottom: 1px solid #ced4da;
}

thead th {
    color: #000;
}

.padding-1px {
    padding: 1px;
}

.card {
    border-radius: .5rem;
}

.table-scroll {
    border-radius: .5rem;
}

    .table-scroll table thead th {
        font-size: 1.25rem;
    }

.font-size-11-5px {
    font-size: 11.9px !important;
}

.thead {
    top: -2px !important;
    position: sticky !important;
}

.table-responsives {
    display: block;
    width: 100%;
    height: 70%;
    overflow-x: auto;
}

@media screen and (max-width:500px) {
    .bottombtn {
        position: fixed;
        /* top: 0; */
        bottom: 0.5rem;
        left: 0;
        right: 1.5rem;
        z-index: 50;
    }

    .btn-width-100 {
        width: 100% !important;
    }

    .responsive-font-13 {
        font-size: 12px !important;
    }

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

    .calenderIco-1 {
        position: relative !important;
        right: 22px !important;
        top: 32px !important;
        z-index: 90000;
    }

    .width-50 {
        width: 100% !important;
        margin-left: 10px !important;
    }

    .min-width-700 {
        min-width: 360px;
        line-height: 22px;
    }

    .one {
        display: none !important;
    }

    .two {
        display: block;
    }

    .account-pages {
        position: absolute;
        top: 10%;
    }

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

@media screen and (max-width:575px) {
    .account-pages {
        position: absolute;
        top: 10%;
    }

    .height56 {
        height: 60% !important;
    }
}

@media screen and (min-width:500px) and (max-width:767px) {
    .bottombtn {
        position: fixed;
        /* top: 0; */
        bottom: 1.5rem;
        left: 0;
        right: 1.5rem;
        z-index: 50;
    }
}

@media screen and (max-width:768px) {
    .max-heght45rem {
        max-height: 25rem !important;
    }
}


@media screen and (min-width:768px) and (max-width:1225px) {
    .bottombtn {
        position: fixed;
        /* top: 0; */
        bottom: 3.5rem;
        left: 0;
        right: 2rem;
        z-index: 1;
    }

    .calenderIco-1 {
        position: relative;
        right: 25px !important;
        top: 30px !important;
        z-index: 90000;
    }

    .width-50 {
        width: 100% !important;
        margin-left: 15px !important;
    }

    .three {
        display: none;
    }

    .four {
        display: block;
    }
}

.table tbody tr:first-child td:first-child {
    padding-top: 8px !important;
}

.width-table {
    width: 100%;
}

.width-td {
    width: 90%;
}

.tblbtn {
    left: 90%;
    position: absolute;
}

.mb5px {
    margin-bottom: 5px;
}

@media screen and (max-width: 767px) {
    .tblbtn {
        left: 80%;
        position: absolute;
    }
}

@media screen and (min-width:1100px) and (max-width: 1300px) {
    .tblbtn {
        left: 90%;
        position: absolute;
    }
}

@media screen and (min-width:1301px) and (max-width: 1800px) {
    .tblbtn {
        left: 92%;
        position: absolute;
    }
}

/*ProfilePicUpdateCSS*/
.containerProf {
    max-width: 960px;
    padding: 30px;
}



.avatar-upload .avatar-edit {
    position: absolute;
    right: 22px;
    z-index: 1;
    top: 10px;
}

    .avatar-upload .avatar-edit input {
        display: none;
    }

        .avatar-upload .avatar-edit input + label {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            left: -30px;
            top: 14px;
            margin-bottom: 0;
            border-radius: 100%;
            background: #FFFFFF;
            border: 1px solid transparent;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
            cursor: pointer;
            font-weight: normal;
            transition: all 0.2s ease-in-out;
        }

            .avatar-upload .avatar-edit input + label:hover {
                background: #f1f1f1;
                border-color: #d6d6d6;
            }

            .avatar-upload .avatar-edit input + label:after {
            }

.avatar-upload .avatar-preview {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 30px;
    border-radius: 100%;
    border: 1px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

    .avatar-upload .avatar-preview > div {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
/*Pagination Styles*/
.Pagination {
    display: flex;
    justify-content: center;
    padding: 10px;
}

    .Pagination button {
        margin: 0px 5px 0px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 35px;
        height: 35px;
        border: 1px solid rgb(238, 238, 238);
        background: transparent;
        font-size: 13px;
        color: rgb(85, 85, 85);
        font-family: "Fira Sans", sans-serif;
        border-radius: 50%;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        line-height: 1.1;
    }

    .Pagination a {
        margin: 0px 5px 0px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 35px;
        height: 35px;
        border: 1px solid rgb(238, 238, 238);
        background: transparent;
        font-size: 13px;
        color: rgb(85, 85, 85);
        font-family: "Fira Sans", sans-serif;
        border-radius: 50%;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        line-height: 1.1;
    }

    .Pagination button:hover {
        background-color: #556ee6;
        color: #ffffff;
    }

    .Pagination a:hover {
        background-color: #556ee6;
        color: #ffffff;
    }

    .Pagination .active {
        background-color: #556ee6;
        color: #ffffff;
        border: 1px solid #556ee6;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

/*Modal-bottom*/
.modal-dialog-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: end;
    min-height: calc(100% - 0rem);
}

    .modal-dialog-bottom::before {
        display: block;
        height: calc(100vh - 1rem);
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        content: "";
    }
/*Kanban board*/
.columns {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    background-color: #fff;
    border-radius: .5rem;
}

.column-header {
    font-weight: bold;
    margin-bottom: 10px;
}

.carddrag {
    margin-top: 20px;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid #f6f6f6;
    border-radius: 4px;
    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03);
}

.card:hover {
    box-shadow: 0px 3px 6px rgb(0 0 0 / 8%);
}

.card-content {
    font-size: 14px;
}
/*rupeeposition*/
.rupee {
    position: relative;
    top: 38px;
    left: -125px;
}

.rupee1 {
    position: relative;
    top: 38px;
    left: -56px;
}
/*newcustomerPosition*/
.newCustomerposition {
    position: absolute;
    top: 40px;
    right: 14px;
}

.light-grey {
    color: #bdbdbd;
}

    .light-grey:hover {
        color: #50a5f1;
    }

.border-top-dashed {
    border-top: 1px dashed #d7d7d7;
}

.position-1 {
    position: absolute;
    top: 90px;
}

.position-2 {
    position: absolute;
    top: 3px;
}

.trashBtn-Pos {
    position: absolute;
    right: 12px;
    top: 37px;
    border-radius: 5px 5px;
}
/*small dropdown*/
.form-control-drops {
    display: block;
    width: 52%;
    height: calc(1.5em + 0.94rem + -10px);
    padding: 0px;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    background-color: #ffff;
    background-clip: padding-box;
    border: 1px solid #e5e5e5b8;
    border-radius: 0.25rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

    .form-control-drops:focus {
        border-color: #6dc77a !important;
    }

    .form-control-drops:focus-visible {
        border-color: transparent !important;
    }


/*stylish checkbox*/

/* Checkbox Styles */
.checkbox-wrapper-51 input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper-51 .toggle {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

    .checkbox-wrapper-51 .toggle:before {
        content: "";
        position: relative;
        top: 2px;
        left: 1px;
        width: 39px;
        height: 20px;
        display: block;
        background: #c8ccd4;
        border-radius: 12px;
        transition: background 0.2s ease;
    }

    .checkbox-wrapper-51 .toggle span {
        position: absolute;
        top: 3px;
        left: 2px;
        width: 19px;
        height: 18px;
        display: block;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(154,153,153,0.75);
        transition: all 0.2s ease;
    }

        .checkbox-wrapper-51 .toggle span svg {
            margin: 0px 5px 3px 5px;
            fill: none;
        }

            .checkbox-wrapper-51 .toggle span svg path {
                stroke: #c8ccd4;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 24;
                stroke-dashoffset: 0;
                transition: all 0.5s linear;
            }

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle:before {
    background: #34c38f;
}

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span {
    transform: translateX(18px);
}

    .checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span path {
        stroke: #52d66b;
        stroke-dasharray: 25;
        stroke-dashoffset: 25;
    }

.checkbox-wrapper-52 input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper-52 .toggle {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

    .checkbox-wrapper-52 .toggle:before {
        content: "";
        position: relative;
        top: 2px;
        left: 1px;
        width: 39px;
        height: 20px;
        display: block;
        background: #c8ccd4;
        border-radius: 12px;
        transition: background 0.2s ease;
    }

    .checkbox-wrapper-52 .toggle span {
        position: absolute;
        top: 3px;
        left: 2px;
        width: 19px;
        height: 18px;
        display: block;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(154,153,153,0.75);
        transition: all 0.2s ease;
    }

        .checkbox-wrapper-52 .toggle span svg {
            margin: 0px 5px 3px 5px;
            fill: none;
        }

            .checkbox-wrapper-52 .toggle span svg path {
                stroke: #c8ccd4;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 24;
                stroke-dashoffset: 0;
                transition: all 0.5s linear;
            }

.checkbox-wrapper-52 input[type="checkbox"]:checked + .toggle:before {
    background: #ff000a;
}

.checkbox-wrapper-52 input[type="checkbox"]:checked + .toggle span {
    transform: translateX(18px);
}

    .checkbox-wrapper-52 input[type="checkbox"]:checked + .toggle span path {
        stroke: #f0000a;
        stroke-dasharray: 25;
        stroke-dashoffset: 25;
    }
/*Image Tooltip*/
.Ctooltip {
    text-decoration: none;
    position: relative;
    transition: display 2s;
}

    .Ctooltip .d-span {
        display: none;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        color: black;
        background: white;
    }



    .Ctooltip:hover .d-span {
        display: block;
        position: absolute;
        top: -50px;
        left: 40px;
        z-index: 1020;
        width: auto;
        max-width: 400px;
        min-height: 155px;
        max-height: 400px;
    }

.PopupDiv {
    text-decoration: none;
    position: relative;
    transition: display 2s;
}

    .PopupDiv .d-span {
        display: none;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        color: black;
        background: white;
    }



    .PopupDiv:hover .d-span {
        display: block;
        position: absolute;
        top: -50px;
        left: 40px;
        z-index: 1020;
    }

        .PopupDiv:hover .d-span textarea {
            min-width: max-content !important;
            max-width: 500px;
            width: 500px !important;
            background: black;
            color: white;
        }

.flex-wrap {
    flex-wrap: wrap !important;
}

.gap-03 {
    gap: 0.3rem !important;
}

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

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #495057 !important;
        line-height: 36px !important;
        padding-left: 17px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }


/*happy birthday*/

/* Animation Three */
.animate {
    font-size: 50px;
    margin: 100px 0 0;
    border-bottom: 2px solid #ccc;
}

    .animate span {
        display: inline-block;
    }

a.repeat {
    display: inline-block;
    font-size: 12px;
    text-transform: none;
    text-decoration: none;
    color: orange;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-weight: normal;
    margin: 0 0 0 50px;
    border-radius: 3px;
    position: relative;
    bottom: 15px;
}

    a.repeat:hover {
        background: rgba(0, 0, 0, 0.7);
        color: white;
    }

.animate span:nth-of-type(2) {
    animation-delay: 0.05s;
}

.animate span:nth-of-type(3) {
    animation-delay: 0.1s;
}

.animate span:nth-of-type(4) {
    animation-delay: 0.15s;
}

.animate span:nth-of-type(5) {
    animation-delay: 0.2s;
}

.animate span:nth-of-type(6) {
    animation-delay: 0.25s;
}

.animate span:nth-of-type(7) {
    animation-delay: 0.3s;
}

.animate span:nth-of-type(8) {
    animation-delay: 0.35s;
}

.animate span:nth-of-type(9) {
    animation-delay: 0.4s;
}

.animate span:nth-of-type(10) {
    animation-delay: 0.45s;
}

.animate span:nth-of-type(11) {
    animation-delay: 0.5s;
}

.animate span:nth-of-type(12) {
    animation-delay: 0.55s;
}

.animate span:nth-of-type(13) {
    animation-delay: 0.6s;
}

.animate span:nth-of-type(14) {
    animation-delay: 0.65s;
}

.animate span:nth-of-type(15) {
    animation-delay: 0.7s;
}

.animate span:nth-of-type(16) {
    animation-delay: 0.75s;
}

.animate span:nth-of-type(17) {
    animation-delay: 0.8s;
}

.animate span:nth-of-type(18) {
    animation-delay: 0.85s;
}

.animate span:nth-of-type(19) {
    animation-delay: 0.9s;
}

.animate span:nth-of-type(20) {
    animation-delay: 0.95s;
}

.three span {
    color: #b10e81;
    opacity: 0;
    transform: translate(-300px, 0) scale(0);
    animation: sideSlide 0.5s forwards;
}

@keyframes sideSlide {
    60% {
        transform: translate(20px, 0) scale(1);
        color: #b10e81;
    }

    80% {
        transform: translate(20px, 0) scale(1);
        color: #b10e81;
    }

    99% {
        transform: translate(0) scale(1.2);
        color: #00f0ff;
    }

    100% {
        transform: translate(0) scale(1);
        opacity: 1;
        color: #b10e81;
    }
}

.btn-bg-success {
    color: #34c38f;
    background-color: rgba(52, 195, 143, .1);
    border-color: transparent;
    border-radius: 0.2rem;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.btn-bg-primary {
    color: #556ee6;
    background-color: rgba(85, 110, 230, .1);
    border-color: transparent;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    border-radius: 0.2rem;
}

.bagde.badge-spill.badge-soft-dark {
    background-color: #27262717;
    color: #596477;
}


/*feedback emoji*/
.feedback {
    --normal: #ECEAF3;
    --normal-shadow: #D9D8E3;
    --normal-mouth: #9795A4;
    --normal-eye: #595861;
    --active: #F8DA69;
    --active-shadow: #F4B555;
    --active-mouth: #F05136;
    --active-eye: #313036;
    --active-tear: #76b5e7;
    --active-shadow-angry: #e94f1d;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

    .feedback li {
        position: relative;
        border-radius: 50%;
        background: var(--sb, var(--normal));
        box-shadow: inset 3px -3px 4px var(--sh, var(--normal-shadow));
        transition: background 0.4s, box-shadow 0.4s, transform 0.3s;
        -webkit-tap-highlight-color: transparent;
    }

        .feedback li:not(:last-child) {
            margin-right: 20px;
        }

        .feedback li div {
            width: 35px;
            height: 35px;
            position: relative;
            transform: perspective(240px) translateZ(4px);
        }

            .feedback li div svg, .feedback li div:before, .feedback li div:after {
                display: block;
                position: absolute;
                left: var(--l, 7px);
                top: var(--t, 10px);
                width: var(--w, 8px);
                height: var(--h, 2px);
                transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)) translateZ(0);
            }

            .feedback li div svg {
                fill: none;
                stroke: var(--s);
                stroke-width: 2px;
                stroke-linecap: round;
                stroke-linejoin: round;
                transition: stroke 0.4s;
            }

                .feedback li div svg.eye {
                    --s: var(--e, var(--normal-eye));
                    --t: 16px;
                    --w: 7px;
                    --h: 5px;
                }

                    .feedback li div svg.eye.right {
                        --l: 23px;
                    }

                .feedback li div svg.mouth {
                    --s: var(--m, var(--normal-mouth));
                    --l: 10px;
                    --t: 24px;
                    --w: 15px;
                    --h: 6px;
                }

            .feedback li div:before, .feedback li div:after {
                content: "";
                z-index: var(--zi, 1);
                border-radius: var(--br, 1px);
                background: var(--b, var(--e, var(--normal-eye)));
                transition: background 0.4s;
            }

        .feedback li.angry {
            --step-1-rx: -24deg;
            --step-1-ry: 20deg;
            --step-2-rx: -24deg;
            --step-2-ry: -20deg;
        }

            .feedback li.angry div:before {
                --r: 20deg;
            }

            .feedback li.angry div:after {
                --l: 23px;
                --r: -20deg;
            }

            .feedback li.angry div svg.eye {
                stroke-dasharray: 4.55;
                stroke-dashoffset: 8.15;
            }

            .feedback li.angry.active {
                -webkit-animation: angry 1s linear;
                animation: angry 1s linear;
            }

                .feedback li.angry.active div:before {
                    --middle-y: -2px;
                    --middle-r: 22deg;
                    -webkit-animation: toggle 0.8s linear forwards;
                    animation: toggle 0.8s linear forwards;
                }

                .feedback li.angry.active div:after {
                    --middle-y: 1px;
                    --middle-r: -18deg;
                    -webkit-animation: toggle 0.8s linear forwards;
                    animation: toggle 0.8s linear forwards;
                }

        .feedback li.sad {
            --step-1-rx: 20deg;
            --step-1-ry: -12deg;
            --step-2-rx: -18deg;
            --step-2-ry: 14deg;
        }

            .feedback li.sad div:before, .feedback li.sad div:after {
                --b: var(--active-tear);
                --sc: 0;
                --w: 5px;
                --h: 5px;
                --t: 15px;
                --br: 50%;
            }

            .feedback li.sad div:after {
                --l: 25px;
            }

            .feedback li.sad div svg.eye {
                --t: 16px;
            }

            .feedback li.sad div svg.mouth {
                --t: 24px;
                stroke-dasharray: 9.5;
                stroke-dashoffset: 33.25;
            }

            .feedback li.sad.active div:before, .feedback li.sad.active div:after {
                -webkit-animation: tear 0.6s linear forwards;
                animation: tear 0.6s linear forwards;
            }

        .feedback li.ok {
            --step-1-rx: 4deg;
            --step-1-ry: -22deg;
            --step-1-rz: 6deg;
            --step-2-rx: 4deg;
            --step-2-ry: 22deg;
            --step-2-rz: -6deg;
        }

            .feedback li.ok div:before {
                --l: 10px;
                --t: 14px;
                --h: 4px;
                --w: 4px;
                --br: 50%;
                box-shadow: 12px 0 0 var(--e, var(--normal-eye));
            }

            .feedback li.ok div:after {
                --l: 11px;
                --t: 24px;
                --w: 14px;
                --h: 2px;
                --br: 1px;
                --b: var(--m, var(--normal-mouth));
            }

            .feedback li.ok.active div:before {
                --middle-s-y: .35;
                -webkit-animation: toggle 0.2s linear forwards;
                animation: toggle 0.2s linear forwards;
            }

            .feedback li.ok.active div:after {
                --middle-s-x: .5;
                -webkit-animation: toggle 0.7s linear forwards;
                animation: toggle 0.7s linear forwards;
            }

        .feedback li.good {
            --step-1-rx: -14deg;
            --step-1-rz: 10deg;
            --step-2-rx: 10deg;
            --step-2-rz: -8deg;
        }

            .feedback li.good div:before {
                --b: var(--m, var(--normal-mouth));
                --w: 5px;
                --h: 5px;
                --br: 50%;
                --t: 22px;
                --zi: 0;
                opacity: 0.5;
                box-shadow: 16px 0 0 var(--b);
                filter: blur(2px);
            }

            .feedback li.good div:after {
                --sc: 0;
            }

            .feedback li.good div svg.eye {
                --t: 15px;
                --sc: -1;
                stroke-dasharray: 4.55;
                stroke-dashoffset: 8.15;
            }

            .feedback li.good div svg.mouth {
                --t: 22px;
                --sc: -1;
                stroke-dasharray: 13.3;
                stroke-dashoffset: 23.75;
            }

            .feedback li.good.active div svg.mouth {
                --middle-y: 1px;
                --middle-s: -1;
                -webkit-animation: toggle 0.8s linear forwards;
                animation: toggle 0.8s linear forwards;
            }

        .feedback li.happy div {
            --step-1-rx: 18deg;
            --step-1-ry: 24deg;
            --step-2-rx: 18deg;
            --step-2-ry: -24deg;
        }

            .feedback li.happy div:before {
                --sc: 0;
            }

            .feedback li.happy div:after {
                --b: var(--m, var(--normal-mouth));
                --l: 10px;
                --t: 23px;
                --w: 16px;
                --h: 8px;
                --br: 0 0 8px 8px;
            }

            .feedback li.happy div svg.eye {
                --t: 14px;
                --sc: -1;
            }

        .feedback li.happy.active div:after {
            --middle-s-x: .95;
            --middle-s-y: .75;
            -webkit-animation: toggle 0.8s linear forwards;
            animation: toggle 0.8s linear forwards;
        }

        .feedback li:not(.active) {
            cursor: pointer;
        }

            .feedback li:not(.active):active {
                transform: scale(0.925);
            }

        .feedback li.active {
            --sb: var(--active);
            --sh: var(--active-shadow);
            --m: var(--active-mouth);
            --e: var(--active-eye);
        }

            .feedback li.active div {
                -webkit-animation: shake 0.8s linear forwards;
                animation: shake 0.8s linear forwards;
            }

@-webkit-keyframes shake {
    30% {
        transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px);
    }

    60% {
        transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px);
    }

    100% {
        transform: perspective(240px) translateZ(4px);
    }
}

@keyframes shake {
    30% {
        transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px);
    }

    60% {
        transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px);
    }

    100% {
        transform: perspective(240px) translateZ(4px);
    }
}

@-webkit-keyframes tear {
    0% {
        opacity: 0;
        transform: translateY(-2px) scale(0) translateZ(0);
    }

    50% {
        transform: translateY(12px) scale(0.6, 1.2) translateZ(0);
    }

    20%, 80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0);
    }
}

@keyframes tear {
    0% {
        opacity: 0;
        transform: translateY(-2px) scale(0) translateZ(0);
    }

    50% {
        transform: translateY(12px) scale(0.6, 1.2) translateZ(0);
    }

    20%, 80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0);
    }
}

@-webkit-keyframes toggle {
    50% {
        transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg));
    }
}

@keyframes toggle {
    50% {
        transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg));
    }
}

@-webkit-keyframes angry {
    40% {
        background: var(--active);
    }

    45% {
        box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry);
    }
}

@keyframes angry {
    40% {
        background: var(--active);
    }

    45% {
        box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry);
    }
}

.bg-soft-danger {
    background-color: #ff000021 !important;
    color: #dc3545 !important;
}

.bg-soft-success {
    color: #34c38f !important;
    background-color: rgba(52,195,143,.18) !important;
}

.bg-soft-dark {
    background-color: #27262717;
    color: #596477;
}

.history_li:hover {
    background-color: aliceblue;
}

.numberList_div {
    position: absolute !important;
    width: 100%;
    top: 4rem;
    left: 0rem;
    z-index: 1;
}

.addnumber_div {
    position: absolute !important;
    width: 100%;
    top: 4.5rem;
    left: 0rem;
    z-index: 1;
}

.shadow-md {
    box-shadow: 0 .125rem 0.25rem rgba(0,0,0,0.175) !important;
}

.shadow-md-solid {
    box-shadow: 0 0.125rem 0px 1px rgba(0,0,0,0.175) !important;
}

.shadow-md-solid-inset {
    box-shadow: inset 0 0.125rem 0px 1px rgba(0,0,0,0.175) !important;
}

.shadow-md-inset {
    box-shadow: inset 0 0.125rem 0.25rem rgba(0,0,0,0.175) !important;
}

.shadow-md-all {
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.175) !important
}

.max-heght45rem {
    max-height: 45rem;
}

.max-heght46rem2 {
    max-height: 46rem;
}

.btn-width-100 {
    width: 30%;
}

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

.min-height27rem {
    min-height: 27rem !important;
}

.Top-0 {
    top: 0 !important;
}

.badge-solid-red {
    color: #ffffff;
    background-color: rgb(255 0 0);
}

.badge-solid-green {
    color: #ffffff;
    background-color: #00a82b;
}

.border-top-left-right {
    border-radius: 5px 5px 0px 0px !important;
}

.max-hieght-600 {
    max-height: 600px !important;
}

.width-270px {
    width: 270px !important;
}

.blink {
    animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



.sub {
    font-size: 0.8rem;
    color: grey;
}



#output {
    width: inherit;
    font-family: "Exo";
    font-size: 2rem;
    height: 60px;
    font-weight: bold;
    color: #000000ad;
    border: 1px solid #dedede;
    padding: 5px 20px;
    border-radius: 15px;
}

    #output:focus-visible {
        outline: none !important;
    }

    #output span {
        padding-left: 3px !important;
    }

#call {
    display: inline-block;
    background-color: #66bb6a;
    padding: 4px 30px;
    margin: 10px;
    color: white;
    border-radius: 4px;
    float: left;
    cursor: pointer;
}

.botrow {
    margin: 0 auto;
    width: 280px;
    clear: both;
    text-align: center;
    font-family: 'Exo';
}

.digit:hover {
    border-radius: 50px;
    background-color: #34c38f;
    color: white;
    transition: 0.5s all;
}

#call:hover {
    background-color: #81c784;
}

.dig {
    float: left;
    padding: 10px 20px;
    margin: 10px;
    width: 30px;
    cursor: pointer;
}

.font-size-xx-large {
    font-size: xx-large !important;
}

.border-radius-times {
    border-radius: 0px 5px 5px 0px !important;
    border-left: 0px !important;
    color: #a4a7b4 !important;
}
/*player*/
.player-images {
    position: absolute;
    top: 25%;
    left: 24%;
}

.player {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 330px;
    height: 530px;
    border-radius: 15px;
    background-color: #fff6e7;
}

    .player input[type=range] {
        -webkit-appearance: none !important;
        margin: 0px;
        padding: 0px;
        background: #f2eae4;
        height: 5px;
        width: 150px;
        outline: none;
        cursor: pointer;
        overflow: hidden;
        border-radius: 5px;
    }

        .player input[type=range]::-ms-fill-lower {
            background: #f2eae4;
        }

        .player input[type=range]::-ms-fill-upper {
            background: #f2eae4;
        }

        .player input[type=range]::-moz-range-track {
            border: none;
            background: #f2eae4;
        }

        .player input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            background: #ff3677;
            height: 5px;
            width: 5px;
            border-radius: 50%;
            box-shadow: -100vw 0 0 100vw #f7d9b9;
        }

        .player input[type=range]::-moz-range-thumb {
            background: #ff3677;
            height: 8px;
            width: 8px;
            border-radius: 100%;
        }

        .player input[type=range]::-ms-thumb {
            -webkit-appearance: none !important;
            background: #ff3677;
            height: 8px;
            width: 8px;
            border-radius: 100%;
        }

    .player .cover {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translateX(-50%);
        box-shadow: 0 5px 20px 0 #d56c006d;
    }

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

    .player .info {
        position: absolute;
        left: 50%;
        top: 200px;
        transform: translateX(-50%);
        text-align: center;
    }

        .player .info .title {
            font-size: 20px;
            font-weight: 700;
            color: #444;
            margin-bottom: 2px;
        }

        .player .info .singer {
            font-size: 12px;
            color: #72646f;
        }

    .player .btn-box {
        position: absolute;
        top: 330px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

        .player .btn-box i {
            font-size: 24px;
            color: #72646f;
            margin: 0 30px;
            cursor: pointer;
        }

            .player .btn-box i.active {
                color: #ff3677;
            }

    .player .volume-box {
        display: none;
        position: absolute;
        left: 50%;
        top: 295px;
        transform: translateX(-50%);
        z-index: 1;
        padding: 0 20px;
    }

        .player .volume-box .volume-down {
            position: absolute;
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #72646f;
        }

        .player .volume-box .volume-up {
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #72646f;
        }

            .player .volume-box .volume-up::selection {
                background-color: unset;
            }

        .player .volume-box input[type=range] {
            height: 5px;
            width: 150px;
            margin: 0 0 15px 0;
        }

        .player .volume-box.active {
            display: block;
        }

    .player .music-box {
        position: absolute;
        left: 50%;
        top: 385px;
        transform: translateX(-50%);
    }

        .player .music-box input[type=range] {
            height: 5px;
            width: 230px;
            margin: 0 0 10px 0;
        }

            .player .music-box input[type=range]::-webkit-slider-thumb {
                height: 5px;
                width: 7px;
            }

        .player .music-box .current-time {
            position: absolute;
            left: -35px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            color: #72646f;
        }

        .player .music-box .duration {
            position: absolute;
            right: -35px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            color: #72646f;
        }

        .player .music-box .play,
        .player .music-box .pause {
            position: absolute;
            left: 50%;
            top: 55px;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background-color: #fff6e7;
            cursor: pointer;
            transition: all 0.4s;
        }

            .player .music-box .play i,
            .player .music-box .pause i {
                font-size: 36px;
                color: #72646f;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-48%, -50%);
            }

            .player .music-box .pause i {
                font-size: 32px;
                transform: translate(-50%, -50%);
            }

.carousel-indicators li {
    background-color: #b4b4b4 !important;
}

.vh90 {
    height: 90vh !important;
}

.left42 {
    left: 42% !important;
}

.bdayposterposition {
    top: 13rem;
    left: 30%;
    position: absolute;
}

#panel, #flip {
    padding: 5px;
    text-align: end !important;
    background-color: #fff;
}

#panel {
    display: none;
}

/*Loading Mask*/

.lmask {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: #000;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    opacity: 0.5;
}

    .lmask.fixed {
        position: fixed;
    }

    .lmask:before {
        content: "";
        background-color: rgba(0, 0, 0, 0);
        border: 5px solid rgb(255 255 255 / 90%);
        opacity: 0.9;
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-radius: 50px;
        box-shadow: 0 0 35px #ff0000;
        width: 50px;
        height: 50px;
        -moz-animation: spinPulse 1s infinite ease-in-out;
        -webkit-animation: spinPulse 1s infinite linear;
        margin: -25px 0 0 -25px;
        position: absolute;
        top: 50%;
        left: 50%;
    }

    .lmask:after {
        content: "";
        background-color: rgba(0, 0, 0, 0);
        border: 5px solid rgb(255 255 255 / 90%);
        opacity: 0.9;
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-radius: 50px;
        box-shadow: 0 0 15px #ffffff;
        width: 30px;
        height: 30px;
        -moz-animation: spinoffPulse 1s infinite linear;
        -webkit-animation: spinoffPulse 1s infinite linear;
        margin: -15px 0 0 -15px;
        position: absolute;
        top: 50%;
        left: 50%;
    }

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

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

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

/*3dCarousel*/
.Carousel3d {
    display: flex;
    justify-content: center;
    margin-top: 30vh;
}

.icon {
    position: absolute;
    border-radius: 50%;
    animation: carousel 7s infinite ease-in-out;
}

    .icon .one1 {
        filter: hue-rotate(180deg);
    }

    .icon .two2 {
        filter: hue-rotate(90deg);
        animation-delay: -1s;
    }

    .icon .three3 {
        filter: hue-rotate(25deg);
        animation-delay: -2s;
    }

@keyframes carousel {
    0% {
        transform: translate(-320px);
        scale: 50%;
        z-index: -1;
    }

    33% {
        transform: translate(0px);
        scale: 100%;
        z-index: 1;
    }

    66% {
        transform: translate(320px);
        scale: 50%;
        z-index: -1;
    }

    100% {
        transform: translate(-320px);
        scale: 50%;
        z-index: -1;
    }
}

#calender-droplist {
    min-width: 15rem !important;
}

    #calender-droplist li a {
        padding: 10px;
        color: black;
        cursor: pointer;
    }

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.75);
    }

    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 1s infinite;
    border: 1px solid black;
    border-radius: 200%;
}

.pulseBtn {
    background: #0b63bb;
    color: #fff;
    border: 1px solid #0b63bb;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: pulse 2s infinite;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(88, 120, 243, 1);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(88, 120, 243, 0);
    }

    100% {
        box-shadow: 0 0 0 50px rgba(88, 120, 243, 0);
    }
}

/* Centering modal content and section elements */


#pending .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the content inside the modal body */
    justify-content: center;
    text-align: center; /* Align all the content inside the modal to the center */
}

/* Center content in each section */
#pending .section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center;
    text-align: center; /* Ensure text is centered */
    width: 100%;
}

    /* Optional: Add some margin for spacing between elements */
    #pending .section h5, #pending .section h6 {
        margin-bottom: 15px;
    }

    #pending .section .badge {
        margin: 5px;
        font-size: 14px; /* Set font size for badges */
    }

/* Styling for the reCAPTCHA */
#g-recaptcha {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

#submitBtn {
    display: block;
    margin: 15px auto 0;
}


@media only screen and (max-width: 1000px) {
    #pending .modal-dialog {
        max-width: 800px;
    }
}

@media only screen and (min-width: 1001px) and (max-width: 1200px) {
    #pending .modal-dialog {
        max-width: 1000px;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
    #pending .modal-dialog {
        max-width: 1200px;
    }
}

@media only screen and (min-width: 1401px) and (max-width: 1600px) {
    #pending .modal-dialog {
        max-width: 1400px;
    }
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    #pending .modal-dialog {
        max-width: 1400px;
    }
}

@media only screen and (min-width: 1801px) {
    #pending .modal-dialog {
        max-width: 1600px;
    }
}