/* .app-sidebar {
    background-color: #016d77 !important;
} */

/* #kt_app_header {
    background-color: #ffffff !important;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
} */

body {
    /* background-color: #f5f5f5 !important; */
    font-family: "Outfit", sans-serif, -apple-system, BlinkMacSystemFont;
    font-weight: 400 !important;
}

@media (min-width: 992px) {
    .app-sidebar-menu .menu > .menu-item > .menu-link > .menu-title {
        font-size: 1.1rem;
        font-weight: 400;
    }
}

[data-kt-app-layout="dark-sidebar"]
    .app-sidebar
    .menu
    > .menu-item
    .menu-link.active {
    background-color: #37373b !important;
}

/* #submit-form
========================================== */

input {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom: 1px solid #000;
    width: 100%;
    color: #171717;
}

textarea {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom: 1px solid #000;
    width: 100%;
}

.floating-label {
    position: relative;
    margin-bottom: 30px;
}

.floating-input,
.floating-select {
    font-size: 16px;
    padding: 20px 17px 2px 0px;
    display: block;
    width: 100%;
    height: 48px;
    background: #fff;
    color: #262626;
    font-weight: 500;
}

.floating-input:focus,
.floating-select:focus {
    outline: none;
}

.floating-input:disabled {
    background-color: #fff6bd;
}

.floating-form .floating-label label {
    color: #4d5053;
    font-size: 22px;
    position: absolute;
    pointer-events: none;
    top: 13px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.floating-input:focus ~ label,
.floating-input:not(:placeholder-shown) ~ label {
    top: 7px;
    font-size: 12px;
    color: #808d9e;
    margin-top: 0;
}

.floating-select:focus ~ label,
.floating-select:not([value=""]):valid ~ label {
    top: 7px;
    font-size: 12px;
    color: #808d9e;
}

/* active state */
.floating-input:focus ~ .bar:before,
.floating-input:focus ~ .bar:after,
.floating-select:focus ~ .bar:before,
.floating-select:focus ~ .bar:after {
    width: 50%;
}

.floating-textarea {
    min-height: 150px;
    max-height: 260px;
    overflow: hidden;
    overflow-x: hidden;
    padding-top: 20px;
    line-height: 20px;
    margin-bottom: 50px;
}

/* highlighter */
.highlight {
    position: absolute;
    height: 50%;
    width: 100%;
    top: 15%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* active state */
.floating-input:focus ~ .highlight,
.floating-select:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

.calendly-badge-widget {
    display: inline-table !important;
}

.auth_page {
    body {
        background-image: url("assets/media/auth/bg4.jpg");
    }

    [data-bs-theme="dark"] body {
        background-image: url("assets/media/auth/bg4-dark.jpg");
    }
}

.py-40 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
}

.bg-btn {
    background-color: #fa3e5e;
    color: #fff;
}

.bg-btn i {
    color: #fff;
}

.bg-btn:hover {
    background-color: #db1033;
    color: #fff;
}

.text-color {
    color: #fa3e5e;
}

.text-color:hover {
    color: #db1033;
}

.upload-btn .menu-icon {
    position: absolute;
    right: 8px;
    top: 36px;
}

.txt-gray {
    color: #78829d !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #db1033;
    border-bottom: 2px solid #db1033;
    background: transparent;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link:hover {
    color: #db1033;
}

.nav-tabs .nav-link {
    border: none;
    margin-right: 25px;
}

.nav-tabs {
    border: none;
}

.nav-link {
    font-size: 14px;
    line-height: 1.29;
    color: #78829d;
    padding: 0 0 10px;
    border: none;
    background: transparent;
}

.modal-footer {
    justify-content: space-between;
}

table tbody tr td.subtitle {
    font-size: 14px;
    line-height: 1.29;
    color: #78829d;
    padding-bottom: 10px;
}

table tbody tr td.title {
    font-size: 14px;
    line-height: 1.29;
    color: #071437;
    padding-bottom: 10px;
    width: 90px;
    max-width: 100%;
}

table tbody tr td.space {
    padding: 0 22px 10px;
}

table tr td .dropdown button {
    background: url(/images/icon/action.png) no-repeat;
    height: 20px;
    width: 20px;
}

table tr td .dropdown button:hover {
    background: url(/images/icon/action-hover.png) no-repeat;
    height: 20px;
    width: 20px;
}

.ticket-registration {
    background-color: #e7ebef;
}

.ticket-registration h6 {
    color: #989898;
}

.heading {
    background-color: #500f0f;
    padding: 60px 40px 100px;
}

.heading h4 {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.25;
    color: #fff;
}
.heading .nav-title h2 {
    font-size: 48px;
    color: #ffd200;
    margin-bottom: 18px;
}
.member-box {
    border-radius: 16px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    padding: 25px;
    text-align: center;
}

.member-box p {
    font-size: 11px;
    font-weight: 600;
    line-height: 2.73;
    color: #989898;
}

.member-box input {
    border-radius: 8px;
    border: solid 1px #e4e4e4;
    background-color: #fff;
    padding: 8px 15px;
    margin-bottom: 15px;
}

.member-box button.btn-submit {
    border-radius: 8px;
    background-color: #c8c8c8;
    width: 100%;
    border: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 2.14;
    color: #fff;
    padding: 3px;
}

.member-box button.btn-submit:hover {
    background-color: #989898;
}

.register-box {
    border-radius: 16px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    padding: 20px;
}

#modal_create_xxl {
    --bs-modal-width: 1200px;
}

#modal_create_xl {
    --bs-modal-width: 1000px;
}

#modal_create_l {
    --bs-modal-width: 800px;
}

#modal_edit_xxl {
    --bs-modal-width: 1200px;
}

#modal_edit_xl {
    --bs-modal-width: 1000px;
}

#modal_edit_l {
    --bs-modal-width: 800px;
}

#modal_view {
    --bs-modal-width: 1000px;
}

#modal_view_s {
    --bs-modal-width: 600px;
}

#modal_installment {
    --bs-modal-width: 1000px;
}

/* .modal-header h2 {
    color: #fff !important;
} */

/* .modal .modal-header i {
    color: #fff !important;
} */

.modal .modal-header i:hover {
    color: rgba(242, 77, 77, 0.719) !important;
}

.show-btn {
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 15px;
    cursor: pointer;
}

.hide-password:before {
    content: "\f06e";
    /* Eye icon */
}

.hide-password:after {
    content: "\f070";
    /* Eye slash icon */
}

.box-card {
    padding: 15px 16px 5px 20px;
}

.txt-heading {
    font-weight: 400;
}

.warning_icon {
    color: rgb(1, 1, 1) !important;
    background-color: #fbee00 !important;
}

@media (max-width: 768px) {
    .end {
        text-align: start !important;
    }
}

.form-title {
    background-color: #565c637a;
    color: #fff;
    padding: 5px 20px;
    border-radius: 7px;
}

/* .btn i.close-icon:hover {
    color: red !important;
} */
.apexcharts-legend {
    left: auto !important;
}

.nav-pills .nav-item {
    margin-right: 0 !important;
}

.w-101 {
    width: 100% !important;
}

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

.input-group-text {
    border: none !important;
}

.app-header {
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(236, 239, 242, 0.3);
}

.remark {
    background-color: #d34569;
    color: #fff;
    padding: 5px 15px;
    width: fit-content;
    border-radius: 16px;
    margin-bottom: 8px;
    text-transform: capitalize;
}
.view-img-box {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #999999;
    margin-bottom: 5px;
    height: 225px;
}