/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* :root {
    --Text-Heading: #121212;
    --Secondary-text: #667085;
    --overlay-blocks-background: #F9FAFB;
    --Separator-line: 1px solid #EAECF0;
    --disabled-bg-color: #D0D5DD;
    --white-text: #fff;
    --Input-Label: #344054;
    --Input-Border: 1px solid #D0D5DD;
    --bg-brand-red: #F06A6A;
    --bg-brand-white: #fff;
    --bg-brand-black: #121212;
} */

body {
    font-family: "Inter", sans-serif !important;
}

.light-style .menu .app-brand.demo {
    height: 62px;
}

.dark-style .menu .app-brand.demo {
    height: 62px;
}

.app-brand-logo.demo {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -ms-flexbox;
    display: flex;
    width: 30px;
    height: 30px;
}

    .app-brand-logo.demo svg {
        width: 1.7rem;
        height: 1.7rem;
    }

.app-brand-text.demo {
    font-size: 1.75rem;
    letter-spacing: -0.45px;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 62px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
    z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
    display: block !important;
}

.demo-inline-spacing > * {
    margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir='rtl'] .rtl-only {
    display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
    #dropdown-variation-demo .btn-group .text-truncate {
        width: 231px;
        position: relative;
    }

        #dropdown-variation-demo .btn-group .text-truncate::after {
            position: absolute;
            top: 45%;
            right: 0.65rem;
        }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
}

.layout-demo-placeholder img {
    width: 900px;
}

.layout-demo-info {
    text-align: center;
    margin-top: 1rem;
}

/*==== New Design Add ====*/


.label-details {
    color: var(--text1-color);
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    line-height: 20px;
    margin-bottom: 6px !important;
}

.modal-header {
    padding: 12px 24px !important;
    border-bottom: var(--secondary-border) !important;
}

    .modal-header .modal-title {
        color: var(--text2-color);
        font-size: 20px;
        font-weight: 600;
    }

.modal-content {
    border-radius: 12px !important;
    background-color: var(--thired-bg);
    box-shadow: 0 0.125rem 1.25rem 0 rgb(0 0 0 / 40%) !important;
}

.modal-body {
    height: 100%;
    scrollbar-width: none;
    padding: 24px !important;
    overflow-x: scroll;
    max-height: calc(100vh - 280px);
}


/*====== Accordion style ======*/

.Participants-tabs .accordion .accordion-item {
    box-shadow: none !important;
    border-radius: var(--Space-8x, 16px);
    border: var(--secondary-border);
}


.Participants-tabs .accordion-item .accordion-button {
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text2-color) !important;
    background-color: var(--secondary-bg) !important;
}

.Participants-tabs .accordion-button:not(.collapsed) {
    border-bottom: var(--secondary-border);
}

.Participants-tabs .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.Participants-tabs .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}

.form-control,
.form-select {
    border: var(--primary-border) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding: 5px 12px !important;
    border-radius: 8px;
    background-color: var(--Input-BG);
    color: var(--text2-color);
}

.input-group-text {
    padding: 5px 12px !important;
    background-color: var(--Input-BG);
    border: var(--primary-border) !important;
}

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

    .form-control:focus, .form-select:focus {
        border-color: #004952 !important;
        background-color: var(--primary-bg);
    }


.phonenumber-details > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.accordion-body {
    background: var(--primary-bg);
    border-radius: 0px 0px 16px 16px;
}
/*====== Accordion style ======*/
/*====== button style ======*/
.add-new-btn .bx-plus {
    border-radius: 100px;
    background-color: #fff !important;
    color: #121212;
    width: 20px;
    height: 20px;
}

.add-new-btn span {
    display: flex;
    gap: 6px;
    align-items: center;
}

.add-new-btn {
    background-color: #004952 !important;
    border-color: #004952 !important;
}

    .add-new-btn:hover {
        background-color: #004952 !important;
        border-color: #004952 !important;
    }


.Default-Btn {
    border: 1px solid #004952 !important;
    background: #004952 !important;
    color: #fff;
}

.Normal-Btn {
    border: var(--secondary-border) !important;
    background: var(--thired-bg) !important;
    color: var(--text4-color) !important;
}

.Normal-Btn:hover {
    background-color: var(--primary-bg) !important;
}

.btn {
    min-height: 36px;
    height: 36px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    border-radius: 36px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.phonenumber-details > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dropzone {
    border: 1px dashed #D0D5DD !important;
    background: #f9fafb !important;
}

.text-heading-color {
    color: var(--text2-color);
}

.text-secondary-color {
    color: var(--icons-color);
}

/*====== page Heading style ======*/

.page-title .page-heading {
    font-size: 20px;
    box-sizing: border-box;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text2-color);
}

.page-title {
    margin-bottom: 16px;
}

.Participants-title h4 {
    font-size: 20px;
    color: var(--text2-color);
    font-weight: 600;
}

.page-link.disabled, .disabled > .page-link {
    background-color: var(--secondary-bg);
    color: var(--text2-color);
    border: var(--secondary-border) !important;
}

/*====== List style ======*/
.Participents-add-new {
    border: var(--secondary-border);
    border-radius: 12px;
    box-shadow: 0 2px 4px -2px #1018280f;
}

.table > thead {
    background: var(--secondary-bg);
    border-top: var(--secondary-border) !important;
}

.card-datatable thead tr th {
    padding-top: 12px;
    padding-bottom: 12px;
}

.card-datatable .table:not(.table-dark) thead:not(.table-dark) th {
    color: var(--text3-color) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
}

.btn-edit i {
    font-size: 14px;
    color: var(--text4-color);
}

.btn-delete i {
    color: #F06A6A;
}
/*===== logo Sidebar =====*/
/* .app-brand .app-brand-link {
  width: 46px;
} */
.app-brand .layout-menu-toggle i {
    color: #004952 !important;
}


.bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
    display: none;
}

.bg-menu-theme .menu-inner > .menu-item.active {
    background-color: transparent !important;
}

.menu-divider {
    border-top: none !important;
}

.menu-vertical .menu-sub .menu-link {
    padding-left: 0.938rem !important;
}


.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
    color: var(--text3-color) !important;
    font-weight: 500;
}

.menu-vertical .menu-icon {
    color: var(--text3-color) !important;
    font-size: 16px;
    margin-right: 0;
}

.menu-item.open > .menu-sub {
    margin-left: 20px;
}

.menu-inner {
    padding: 12px !important;
}

.menu-vertical .menu-inner > .menu-item {
    margin: 0 !important;
}

.menu-vertical .menu-item .menu-link,
.menu-vertical .menu-block {
    padding: 8px 12px !important;
    gap: 8px;
    border-radius: 8px !important;
}

.layout-menu-toggle {
    background-color: #0049521f;
    border-radius: 6px;
    padding: 7px;
}

.layout-menu-toggl .menu-toggle-icon {
    height: 22px;
    width: 22px;
    stroke: #1f2f3e;
    transform: rotate(0deg);
    transition: all .9s ease-in-out;
}

html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open:not(.active) > .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open:not(.active) > .menu-link:hover,
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover {
    background: rgba(43, 94, 94, .1) !important;
}

/* .menu-vertical .menu-item.open .menu-toggle {
  background: rgba(43, 94, 94, .1) !important;
} */

html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner > .menu-item.open:not(.active) {
    background-color: transparent !important;
}

/* .bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle) {
  background: rgba(43, 94, 94, .1) !important;
} */

.menu-vertical .menu-sub {
    padding-top: 0 !important;
}

.menu-vertical .menu-item .menu-link {
    margin-bottom: 6px;
}

.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-expanded) .bg-menu-theme .menu-inner > .menu-item.active {
    background-color: #dbe4f300 !important;
}

.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
    background: transparent !important;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    color: #004952 !important;
}

.layout-menu {
    box-shadow: unset !important;
}

.editParticipant span {
    font-weight: 600;
    color: var(--text2-color);
    text-transform: none;
    font-size: 14px;
}

.table > :not(caption) > * > * {
    color: var(--text2-color);
    font-weight: 400;
    font-size: 14px;
}

.dz-message {
    margin: 1rem 0 !important;
}

span.red-text {
    color: #004952;
    font-size: 14px;
}

span.white-text {
    color: #121212;
    font-size: 14px;
}

.dz-message .note {
    color: var(--text2-color) !important;
}

table.dataTable > tbody > tr.selected > * {
    color: #667085;
}

.add-new-btn .btn-primary:focus,
.btn-primary.focus,
.add-new-btn:hover {
    background-color: #004952e0 !important;
}

div.dataTables_wrapper div.dataTables_length select {
    min-width: 65px !important;
}

/* ===== Action Design ===== */

.btn-edit:hover,
.btn-delete:hover {
    background: var(--iconHoverColor);
}

.btn-edit,
.btn-delete {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}



.Action-column {
    display: flex;
    gap: 4px;
}

.table-title {
    font-weight: 600;
    color: var(--text2-color);
    text-transform: capitalize;
    font-size: 14px;
}

.table-details {
    color: #667085;
}

.Role-User {
    background-color: var(--iconHoverColor);
    border-radius: 16px;
    padding: 2px 8px;
    color: var(--text1-color);
    font-size: 12px;
}

.Status-inactive {
    background-color: #F06A6A;
    font-size: 10px !important;
    border-radius: 16px !important;
}

.Status-active {
    background-color: #17B26A;
    font-size: 10px !important;
    border-radius: 16px !important;
}

.dataTables_scrollHeadInner {
    padding-right: 0px !important;
}

.dataTables_info .select-info .select-item {
    margin-left: 4px;
}

/* Top bar Style */

.Profile-user {
    border-radius: 8px !important;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2), 0 32px 64px 0 rgba(0, 0, 0, .24) !important;
    width: 200px;
}

.Profile-username {
    color: var(--text1-color);
    font-weight: 700 !important;
    text-transform: none;
}

.Profile-rolename {
    color: var(--text3-color);
    font-weight: 400;
}


.Profile-user .log-out {
    border-bottom: var(--secondary-border);
}

.admin-profile .Profile-username {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 112px;
}

.form-check-input:checked {
    background-color: #004952 !important;
    border-color: #004952 !important;
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: #004952 !important;
    border-color: #004952 !important;
}

.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus, .pagination li.active > a:not(.page-link), .pagination li.active > a:not(.page-link):hover, .pagination li.active > a:not(.page-link):focus {
    border-color: #004952 !important;
    background-color: #004952 !important;
}

.light-style .bs-stepper.wizard-modern .bs-stepper-content {
    background: transparent !important;
}

.bs-stepper .bs-stepper-content {
    min-width: 42rem;
}

.btn-primary:hover, .btn-primary[data-trigger=hover].show.dropdown-toggle:hover {
    background-color: #004952db !important;
    border-color: #004952db !important;
}

.modal .btn-close {
    border-radius: 50px;
    color: var(--text2-color) !important;
    background-color: var(--thired-bg);
    border: var(--secondary-border);
}

.light-style .select2-container--default .select2-selection {
    border: var(--primary-border) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding: 5px 12px !important;
    border-radius: 8px;
    background-color: var(--Input-BG);
    /* color: var(--text2-color); */
}

.light-style .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4rem !important;
    padding-left: 0 !important;
    /* color: var(--text2-color); */
}

.light-style .select2-container--default .select2-selection--single {
    height: calc(1.067em + 0.938rem + calc(var(--bs-border-width) * 2)) !important;
}

.light-style .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--Input-BG) !important;
    border-radius: 8px !important;
    border: var(--primary-border) !important;
}

.light-style .select2-container--default .select2-results__option {
    color: var(--text4-color) !important;
}

/*.form-check-input {
    background: var(--primary-bg);
    border: var(--secondary-border);
}*/

.form-check-label {
    color: var(--text3-color);
    font-size: 14px;
}

.light-style .flatpickr-calendar, .light-style .flatpickr-days {
    background: var(--primary-bg) !important;
}

.light-style .flatpickr-day:hover, .light-style .flatpickr-day:focus, .light-style .flatpickr-day.nextMonthDay:hover, .light-style .flatpickr-day.prevMonthDay:hover, .light-style .flatpickr-day.today:hover, .light-style .flatpickr-day.nextMonthDay:focus, .light-style.flatpickr-day.prevMonthDay:focus, .light-style .flatpickr-day.today:focus {
    background: var(--background-color);
    color: var(--text4-color);
}

.previous-budgets .form-select {
    padding: 5px 20px !important;
}

.previous-budgets {
    width: 100%;
    min-width: 172px;
}

.export-btn {
    background-color: #004952;
}

.export-btn:hover {
    background-color: #004952db !important;
    border-color: #004952db !important;
}

.sk-circle-fade-dot {
    width: 50px;
    height: 50px;
    position: relative;
    margin: auto;
}

    .sk-circle-fade-dot .sk-child {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

        .sk-circle-fade-dot .sk-child:before {
            content: "";
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            border-radius: 100%;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        }

    .sk-circle-fade-dot .sk-circle-dot1 {
        transform: rotate(30deg);
    }

    .sk-circle-fade-dot .sk-circle-dot2 {
        transform: rotate(60deg);
    }

    .sk-circle-fade-dot .sk-circle-dot3 {
        transform: rotate(90deg);
    }

    .sk-circle-fade-dot .sk-circle-dot4 {
        transform: rotate(120deg);
    }

    .sk-circle-fade-dot .sk-circle-dot5 {
        transform: rotate(150deg);
    }

    .sk-circle-fade-dot .sk-circle-dot6 {
        transform: rotate(180deg);
    }

    .sk-circle-fade-dot .sk-circle-dot7 {
        transform: rotate(210deg);
    }

    .sk-circle-fade-dot .sk-circle-dot8 {
        transform: rotate(240deg);
    }

    .sk-circle-fade-dot .sk-circle-dot9 {
        transform: rotate(270deg);
    }

    .sk-circle-fade-dot .sk-circle-dot10 {
        transform: rotate(300deg);
    }

    .sk-circle-fade-dot .sk-circle-dot11 {
        transform: rotate(330deg);
    }

    .sk-circle-fade-dot .sk-circle-dot12 {
        transform: rotate(0deg);
    }

    .sk-circle-fade-dot .sk-circle-dot1:before {
        animation-delay: -1.1s;
    }

    .sk-circle-fade-dot .sk-circle-dot2:before {
        animation-delay: -1.0s;
    }

    .sk-circle-fade-dot .sk-circle-dot3:before {
        animation-delay: -0.9s;
    }

    .sk-circle-fade-dot .sk-circle-dot4:before {
        animation-delay: -0.8s;
    }

    .sk-circle-fade-dot .sk-circle-dot5:before {
        animation-delay: -0.7s;
    }

    .sk-circle-fade-dot .sk-circle-dot6:before {
        animation-delay: -0.6s;
    }

    .sk-circle-fade-dot .sk-circle-dot7:before {
        animation-delay: -0.5s;
    }

    .sk-circle-fade-dot .sk-circle-dot8:before {
        animation-delay: -0.4s;
    }

    .sk-circle-fade-dot .sk-circle-dot9:before {
        animation-delay: -0.3s;
    }

    .sk-circle-fade-dot .sk-circle-dot10:before {
        animation-delay: -0.2s;
    }

    .sk-circle-fade-dot .sk-circle-dot11:before {
        animation-delay: -0.1s;
    }

    .sk-circle-fade-dot .sk-circle-dot12:before {
        animation-delay: 0s;
    }


#edit-general-details-form input[readonly] {
    background-color: var(--disabled-bg-color);
    cursor: not-allowed;
    color: #a3afba;

}

#edit-general-details-form select:disabled {
    background-color: var(--disabled-bg-color);
    cursor: not-allowed;
    color: #a3afba;
}

#addExpenseForm input[readonly] ,textarea[readonly] {
    background-color: var(--disabled-bg-color);
    cursor: not-allowed;
    color: #a3afba;
}

#addExpenseForm #addExpenseForm select:disabled {
    background-color: var(--disabled-bg-color);
    cursor: not-allowed;
    color: #a3afba;
}

#edit-general-details-form .input-group-text{
background-color: var(--disabled-bg-color);
}

#addEmployeeWagesForm input[readonly], textarea[readonly] {
    background-color: var(--disabled-bg-color);
    cursor: not-allowed;
    color: #a3afba;
}



.light-style .select2-container--default.select2-container--disabled .select2-selection--single {
    color: #a3afba;
}

.light-style .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: unset;
}

.light-style .select2-container--default.select2-container--disabled .select2-selection--single{
    background-color: var(--disabled-bg-color);
    border: var(--primary-border) !important;
}

.form-select:disabled{
    background-color: var(--disabled-bg-color);
    border: var(--primary-border) !important;
}

.form-control:disabled {
     background-color: var(--disabled-bg-color);
    border: var(--primary-border) !important;
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}


.icons-frame-size{
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--icons-background-color);
    border-radius: 50px;
}

.light-style .flatpickr-input[readonly], .light-style .flatpickr-input ~ .form-control[readonly] {
    background: var(--Input-BG);
}