/* COLORS */

/*

From focus color: #93aaf7

Logo colors:
#B8D7FF
#86B6F3
#4279BC
#163C6B

bg: #F3F2F3

primary btn : #445A83

tb btn     background: white;
    color: black;

digital color : #C6D9F1


switch color #86B6F3 (second color)

remove focus from btns

color for submenu acc: 4279BC (third)
*/

/* BUTTONS & CECKBOXES */

.default_btn {
    background-color: #445a83;
    color: white;
}

.default_btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.default_btn:hover {
    background-color: #163c6b;
}

.default_action_btn {
    background-color: black;
    color: white;
}

.default_action_btn:hover {
    background-color: black;
    color: white;
}

.mod_window_btn {
    background-color: black;
    color: white;
}

.action_btn {
    padding: 1em 2em;
    font-size: 20px;
}

.custom-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.plan_active_btn {
    background-color: #4279bc;
    color: white;
    box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
    -webkit-box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
    -moz-box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
}

.plan_active_btn:hover {
    background-color: #235693;
    color: white;
}

.btn_shaddow {
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
}

/*TEST*/

.container_tests_all {
    padding-left: 7vw;
    padding-right: 7vw;
}

.outer_container_tests {
    display: flex;
    justify-content: center;
}

.inner_container_tests {
    margin-top: var(--sp-x);
    min-width: 75vw;
    max-width: 95vw;
    background-color: #fff;
    box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding: var(--sp-mm) var(--sp-x);
}

.inner_container_tests_tb {
    position: relative;
    margin-top: var(--sp-s);
    max-width: 95vw;
    background-color: #fff;
    box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding: var(--sp-xx) var(--sp-xx);
}

.tb_container {
    margin-top: var(--sp-mm);
    background-color: #fff;
    box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding: var(--sp-s) var(--sp-x) var(--sp-x) var(--sp-x);
    max-width: 95vw;
}

.table_tb_c {
    border-collapse: collapse;
    border-spacing: 0;
}

.btn-name-submit {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-m);
}

.outer_container_tb {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--sp-x);
    margin-bottom: var(--sp-x);
}

.inner_container_tb {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align items to the left */
}

.give_gap {
    /* row-gap: 40px; */
}

.label_wrapper {
    display: flex;
    gap: 40px;
}

.outer_container_table {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
    margin-top: var(--sp-x);
}

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

.start_details {
    background-color: #e7f1ff;
    padding: 5px;
    width: 100%;
    border-radius: 0.25em;
}

.start_test_name {
    font-size: var(--text-size-100);
    margin-bottom: 0px;
}

.start_test_name_long {
    font-size: var(--text-size-90);
    color: grey;
    margin-bottom: 0px;
}

.start_title {
    color: grey;
    font-size: var(--text-size-100);
    min-width: 150px;
}

.start_input {
    font-size: var(--text-size-100);
    margin-bottom: 0px;
}

.start_share_btns {
    display: flex;
    gap: var(--sp-m);
    margin-bottom: var(--sp-m);
}

.start_details_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* background-color: #f6faff; */
    padding: 10px;
    border-radius: 0.25em;
    margin-bottom: 10px;
}

.start_test_details_text {
    font-size: var(--text-size-90);
    color: grey;
    border-bottom: 1px solid lightgrey;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.log_out_div {
    display: flex;
    align-items: center;
    /* background-color: #f6faff; */
    padding: var(--sp-s);
    border-radius: 0.25em;
    justify-content: space-between;
}

.log_out_start_txt {
    font-size: var(--text-size-95);
    color: grey;
}

.start_btn_more {
    min-height: 50px;
    min-width: 200px;
    display: flex;
    justify-content: center;
}

.icon_start_logout {
    display: flex;
    gap: 5px;
    align-items: center;
}

.border_start {
    display: flex;
    border-top: 1px solid #e3e3e3;
    padding: 20px;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}

.flex_bottom_checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.start_btn {
    color: white;
    background-color: black;
    padding: 0.8em 2em;
    font-size: 20px;
}

.inner_container_table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--sp-x);
}

.action_icon_seperator {
    margin-left: 10px;
    margin-right: 10px;
    border-right: 1px solid #e3e3e3;
    height: 1em;
}

.test_action_space {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.test_action_space_v2 {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.pre_test_action_space {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

.hidden_action_icons {
    display: none;
}

.visible_action_icons {
    display: flex;
}

.mod_clones .tbl__row {
    background-color: #e3eaf352;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid hsl(var(--tw1-color-contrast-lower-hsl));
}

.mod_clones .tbl__row:last-child {
    border-bottom: none;
}

.modular_bottom {
    margin-top: 1em;
    padding: 1em 1em;
    border-top: 1px solid hsl(var(--tw1-color-contrast-lower-hsl));
}

.optional_modular {
    margin-bottom: 10px;
}

.mod_table {
    border-radius: 0.25rem;
    background-color: rgb(216 219 255 / 16%);
}

.optional_mod_e3eaf352 {
    background-color: #e3eaf352;
}

/* FOR FORMS*/

.forminput {
    padding-bottom: 8px;
    border-bottom: 1px solid #dfdfdf;
    min-width: 30vw;
    font-size: 22px;
}

input:focus,
input:active {
    outline: none;
}

.transform_p {
    font-size: 22px;
}

.greycolor {
    color: #75757e;
}

/* CONTAINER PATIENTS */

.outer_container_add_patient {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--sp-x);
    margin-bottom: var(--sp-x);
}

.inner_container_add_patient {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--sp-m);
    /* Align items to the left */
}

.add_patient_container {
    margin-top: var(--sp-x);
    background-color: #fff;
    box-shadow: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    border-radius: 0.25em;
    padding: var(--sp-s) var(--sp-x) var(--sp-x) var(--sp-x);
}

.info_patient_container {
    padding: 0px var(--sp-m);
    margin-top: var(--sp-m);
}

.center_created_at_table {
    text-align: center;
}

.add_patient_btn {
    width: 100%;
    border-top: 1px solid #e3e3e3;
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.forminput_add_patient {
    padding-bottom: 5px;
    border-bottom: 1px solid #dfdfdf;
    min-width: 20vw;
    font-size: 22px;
}

.forminput_add_patient_test {
    padding-bottom: 5px;
    border-bottom: 1px solid #dfdfdf;
    width: 100%;
    font-size: 20px;
}

.none_found {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-m);
    font-size: var(--text-size-90);
}

.input_flex_patient {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-ss);
}

.lable_patient {
    font-size: var(--text-size-90);
    color: grey;
}

.forminput_patient {
    width: 100%;
    background-color: white;
    border: 1px solid #d6d6d6;
    padding: var(--sp-xs) var(--sp-s);
    border-radius: 0.25em;
    font-size: var(--text-size-100);
}

.forminput_patient:focus {
    border: 1px solid #93aaf7;
    box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -webkit-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -moz-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
}

.add_patient_modal {
    display: flex;
    flex-direction: column;
    padding: var(--sp-s) var(--sp-x) var(--sp-x) var(--sp-x);
    row-gap: var(--sp-m);
}

/* CONTAINER TEST INDEX CREATION */

.flex_container_btns {
    display: flex;
    gap: 20px;
}

.btns_test_complete_incomplete {
    align-self: flex-start;
}

.btns_add_tests {
    align-self: flex-start;
}

.flex_center_add_btns {
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider_vertical_add_btns {
    width: 1px;
    height: 1em;
    background-color: #ccc;
    margin: 0 12px;
}

.make_100_width {
    /* width: 100%; */
    max-width: 75vw;
}

.title_flex_qr {
    display: flex;
    gap: var(--sp-m);
    align-items: center;
}

.qr_title_c {
    background: hsl(0deg 0% 100% / 47%);
    color: #4279bc;
    border: 1px solid #665c5c29;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--text-size-100);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    /* will-change: transform; */
    padding: var(--mc4-space-2xs) var(--mc4-space-sm);
    border-radius: 0.25em;
}

.qr_title_c:hover {
    background: hsl(0deg 0% 95.9% / 47%);
    color: #4279bc;
}

@media (max-width: 767px) {
    .qr_title_c {
        display: none;
    }
}

.flex_dates {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    background-color: white;
    padding: 1em;
    margin-left: 1em;
    border-radius: 0.25em;
}

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

.flex_dates_label {
    min-width: 80px;
}

.date_input {
    border: 1px solid darkgrey;
    border-radius: 0.25em;
    padding: 5px;
}

.hide_checkbox_rows {
    display: none !important;
}

/* Media query for screens smaller than 768px */
@media (max-width: 767px) {
    .flex_container_btns {
        width: 100%;
        display: flex;
        gap: 1.5rem;
        flex-direction: column-reverse;
        justify-content: center;
    }

    .btns_test_complete_incomplete {
        /* align-self: flex-start; */
    }

    .btns_add_tests {
        /* align-self: center; */
    }

    .bj2-inline-flex {
        display: flex;
        flex-direction: column;
    }

    .sv7-inline-flex.margin_right_small {
        margin-right: 0px;
    }

    .flex_center_add_btns {
        flex-direction: column;
        gap: 0.5rem;
    }

    .divider_vertical_add_btns {
        display: none;
    }

    .tabs_outer {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .floating-label-control {
        margin-left: 5px;
        margin-right: 5px;
    }

    .filter_btn {
        margin-top: 10px;
        align-self: center;
        width: 100%;
        margin-left: 0px;
    }

    .reset_me {
        font-size: 16px;
        color: #2d2b2b;
        cursor: pointer;
    }

    .inner_container_tests {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .int-table__cell-start {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .select-container {
        padding-bottom: 20px;
    }

    .tb_container {
        max-width: 95vw;
        overflow: scroll;
    }
}

/* CONTAINER TEST CREATION */

.add_test_header_section {
    display: flex;
    align-items: center;
    gap: var(--sp-m);
}

.outer_container_add_test {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
    margin-top: var(--sp-x);
}

.inner_container_add_test {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align items to the left */
}

.container_multi_test_o {
    display: flex;
    margin: var(--sp-xx) 0;
    justify-content: center;
}

.add_test {
    min-width: 60vw;
    margin-top: 4vh;
    background-color: #fff;
    box-shadow: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    border-radius: 0.25em;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.add_test_flex_outer {
    display: flex;
}

.add_test_flex_selection {
    display: flex;
    flex-direction: column;
}

.add_test_flex_right {
    display: flex;
}

.right_div_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 0.25em;
}

.inner_selection {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-color: rgb(216 219 255 / 16%);
    box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
        0 0 0 1px hsla(230, 13%, 9%, 0.02),
        0 1px 3px -1px hsla(230, 13%, 9%, 0.2);
    border-radius: 0.25rem;
}

.selection_option_outer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    align-items: center;
}

.p_options {
    margin-bottom: 0px !important;
}

.option_text_top {
    margin-top: 20px;
}

.flex_confirm_add {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    border-top: 1px solid #e3e3e3;
}

.btn_confirm_add {
    margin-top: 15px;
    padding: 20px 25px;
}

.flex_center_add_test {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-xxx);
    margin-top: var(--sp-xx);
}

.inner_model_add_test {
    display: flex;
    border-radius: 0.25em;
    padding: 10px 15px;
}

.modal_test_details {
    width: 60%;
}

.modal_optional {
    width: 40%;
}

.outer_modal_add_test {
    display: flex;
    margin-top: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    border-radius: 0.25em;
    pointer-events: auto;
    gap: 20px;
    justify-content: space-between;
}

.warningwrapper {
    margin-top: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.limit_exceeded {
    font-size: small;
}

@media (max-width: 767px) {
    .flex_center_add_test {
        flex-direction: column;
    }

    .outer_container_add_test {
        padding-left: 10px;
        padding-right: 10px;
    }

    .add_test {
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .right-div {
        padding: var(--sp-m);
    }

    .inner_selection {
        width: 100%;
        padding: 5px;
    }

    .outer_modal_add_test {
        flex-direction: column;
    }

    .modal_test_details {
        width: 100%;
    }

    .modal_optional {
        width: 100%;
    }
}

/* CONTAINER DASHBOARD */

.outer_container_dashboard {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--sp-x) 0;
    flex-direction: column;
}

.inner_container_dashboard {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.card_icon_line {
    display: flex;
    justify-content: space-between;
}

.card_icon_line_text {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    font-size: var(--text-size-90);
    color: #4279bc;
    background-color: #4279bc36;
    height: max-content;
    padding: 3px 6px;
    border-radius: 0 4px 0 4px;
    align-items: center;
    gap: 5px;
}

.btn_flex {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    justify-content: flex-end;
}

.btn_flex_center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btns__btn_dashboard {
    border: 0;
    border-radius: 0.25em;
    line-height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0.5em 1em;
    text-decoration: none;
    transition: 0.2s;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
}

.disable_dashboard_btn {
    opacity: 0.5;
    pointer-events: none;
}

.gap_dashboard {
    gap: var(--sp-xx);
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .inner_container_dashboard {
        flex-direction: column;
        padding: var(--sp-s);
    }

    .table_container {
        width: 100%;
    }

    .card-v14 {
        width: 320px;
    }
}

/* CONTAINER WELCOME */

.outer_container_welcome {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5vh;
    gap: 10em;
}

.map_and_info {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--sp-s);
}

.info_map_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
    gap: var(--sp-s);
}

.header_flex_welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detail_text_welcome {
    margin-top: 20px;
    max-width: 40vw;
    text-align: center;
}

.steps_welcome {
    display: flex;
    justify-content: center;
    margin-top: 15vh;
}

.flex_center_welcome {
    display: flex;
}

.h2_alternate {
    text-align: center;
    font-size: 30px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    text-decoration: underline;
}

.h2_welcome {
    margin-bottom: 10vh;
}

.features_outer_1 {
    width: 100%;
    display: flex;
    align-items: center;
    /* gap: 100px; */
    flex-direction: column;
}

.features_outer_2 {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.features_outer_3 {
}

.feature_container_3 {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.feature_container_2 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    background-color: #ffffffe0;
    padding: 40px;
    border-radius: 0.25em;
}

.feature_container_1 {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

@media (max-width: 767px) {
    .feature_container_2 {
        padding: 0px;
    }

    .feature_title_desc {
        max-width: 220px !important;
    }
}

.feature_icon {
    min-width: 50px;
}

.feature_title_desc {
    display: flex;
    flex-direction: column;
    width: 300px;
}

.feature_header {
    color: #163c6b;
    font-size: var(--text-size-300);
}

.feature_header_h2 {
    padding-bottom: 10px;
}

.feature_description {
    color: grey;
    font-size: var(--text-size-100);
    margin-top: var(--sp-s);
}

.active_feature {
}

.active_feature_text {
    color: #163c6b;
    font-weight: bold;
}

.feature_pill_outer {
    display: flex;
    background-color: #b8d7ff;
    align-items: center;
    gap: 10px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 1.25em;
}

.small_round {
    height: 10px;
    width: 10px;
    background-color: #fff;
    padding: 2px;
    border-radius: 1em;
}

.inactive_feature_text {
    color: #5c5c5c;
    font-weight: bold;
}

.set_inactive_bg {
    background-color: #d5d5d5;
}

.set_inactive_text {
    color: #5c5c5c;
}

.feature_icon_img {
    width: 50px;
    height: 50px;
}

.filter_wel_margin {
    margin-bottom: 50px;
}

.header_guides {
    font-size: 30px;
}

.guides_bg {
    background: linear-gradient(
        90deg,
        rgba(134, 182, 243, 1) 0%,
        rgba(66, 121, 188, 1) 35%,
        rgba(22, 60, 107, 1) 100%
    );
}

.guides_container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.welcome_add_feature {
    display: flex;
    border-top: 1px solid #e3e3e3;
    padding-top: 1em;
    justify-content: flex-end;
}

.suggestion_charCount {
    font-size: 12px;
    text-align: right;
    margin-bottom: 2em;
}

.suggestion_text {
    min-height: 150px;
    width: 100% !important;
    font-size: 16px;
}

.suggestion_email {
    font-size: 16px !important;
}

.suggestion_email_check {
    font-size: 14px !important;
}

.suggestion_outer {
    display: flex;
    width: fit-content;
    font-size: 18px;
}

/* Media query for screens smaller than 1024px */
@media (max-width: 1024px) {
    .text-divider_wel {
        margin-bottom: 0px !important;
    }

    .features_outer_1 {
        align-items: center;
        gap: 30px;
        flex-direction: column;
    }

    .features_outer_2 {
        gap: 50px;
    }
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .outer_container_welcome {
        margin-top: 0px;
        flex-direction: column;
    }

    .info_map_text {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    .h2_alternate {
        font-size: 24px;
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    .detail_text_welcome {
        margin-top: 20px;
        text-align: center;
        padding-left: 1.5em;
        padding-right: 1.5em;
        max-width: 100vw;
    }

    .features_outer_1 {
        gap: 20px;
        padding-left: 10px;
        padding-right: 10px;
        flex-direction: column;
        align-items: center;
    }

    .features_outer_2 {
        gap: 50px;
    }

    .feature_container_3 {
        gap: 50px;
        flex-direction: column;
    }

    .feature_container_1 {
        gap: 20px;
    }

    .feature_icon_img {
        width: 40px;
        height: 40px;
    }

    .text-divider_wel {
        margin-bottom: 0px !important;
    }

    .header_guides {
        font-size: 24px;
    }

    hr {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* CONTAINER QR CODE EMAIL CREATION */

.outer_container_qr {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
    margin-top: 10vh;
}

.inner_container_qr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align items to the left */
}

.qr_container {
    background-color: white;
    box-shadow: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    border-radius: 0.25em;
    padding: var(--sp-s) var(--sp-x) var(--sp-x) var(--sp-x);
    display: flex;
    flex-direction: column;
    gap: var(--sp-mm);
    align-items: flex-end;
}

.qr_code {
    margin-top: 1vh;
}

.btn_disable_qr_email {
    pointer-events: none;
    opacity: 0.6;
}

.outer_qr_email {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    margin-top: var(--sp-x);
    margin-bottom: var(--sp-x);
}

.qr_code_sub_text {
    font-size: var(--text-size-90);
    color: grey;
    margin-bottom: 0px;
}

.copy_me_text {
    display: none;
}

@media (max-width: 767px) {
    .outer_qr_email {
        display: flex;
        align-items: center;
        gap: 30px;
        margin-top: 10vh;
        margin-bottom: 10vh;
        flex-direction: column;
    }

    .copy_me_text {
        display: flex;
    }

    #content-to-copy {
        display: none;
    }

    .email_container {
        max-width: 90vw;
    }
}

/* EMAIL */

.email_form_flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.email_copy_link_bg {
    background-color: white;
}

.email_link {
    display: flex;
}

.flex-item-to-stretch {
    flex-grow: 1;
}

.email_text {
    width: 100%;
    min-height: 260px;
    background-color: white;
    border: 1px solid rgb(205 205 205);
    padding: 3px;
    font-size: 14px;
}

.link_container {
}

.email_container {
    width: 100%;
}

#copyText {
    font-size: 16px;
}

.email_template {
    border: 1px solid #d6d6d6;
    background-color: white;
    padding: 10px;
    font-size: 16px;
}

.email_header {
    font-size: 16px;
}

.email_middle_txt {
    font-size: 16px;
    margin-bottom: 0px !important;
}

.email_header_row {
    margin-bottom: 10px;
}

.edit_action_btns_outer {
    width: 100%;
    display: flex;
    border-top: 1px solid #e3e3e3;
    /* margin-top: 2rem; */
    padding-top: 1rem;
    justify-content: flex-end;
}

.edit_action_right {
    display: flex;
    gap: 10px;
}

.edit_action_left {
    display: flex;
    gap: 10px;
}

/* CONTAINER FOR SETTINGS */

.inner_container_settings_main {
    background-color: #fff;
    box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding: var(--sp-m) var(--sp-mm);
}

.inner_settings_2 {
    margin-top: 5vh;
}

.inner_flex {
    padding-top: 1em;
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.multi-select-v2 {
    width: 65%;
    background-color: #b8d7ff75;
    padding-top: 1em;
    padding-bottom: 1rem;
    padding-left: 2em;
    padding-right: 2rem;
    border-radius: 0.25em;
}

.multi-select-v3 {
    width: 100%;
    margin-top: 1em;
    padding-left: 1em;
    padding-right: 1rem;
}

.half_width {
    width: 50%;
}

.inner_payment_container {
    margin-top: 20px;
    background-color: #f3f3f3bd;
    border-radius: 0.25em;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.coupon_container {
    gap: 2vw;
    margin-top: 50px;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* TEAM */

.inner_flex_team {
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: row;
}

.switch_div {
    display: flex;
    align-items: center;
    gap: 20px;
}

.switch_p {
    margin-bottom: 0px;
}

.test_amount {
    display: flex;
    flex-direction: column;
}

.absolute_amount_tests {
    border-top: 1px solid #e3e3e3;
    padding-top: 15px;
}

.gap_amount {
    gap: 20px;
}

/* CONTAINER FOR UPLOAD TEST IMAGES */

.outer_wrapper_upload {
    padding-bottom: 5%;
    margin-top: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload_wrapper {
    min-width: 50%;
    background-color: #fff;
    box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
        0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
        0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
        0 3.5px 6px hsla(230, 13%, 9%, 0.09);
    padding-bottom: 2em;
    border-radius: 0.375em;
    margin-top: 4vh;
}

.uploadarea {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
}

.upload_padding {
    padding-left: 2em;
    padding-right: 2em;
}

.list_wrapper {
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 0.25em;
    padding: 1.5em;
}

.help_accordion {
    border-style: solid;
    border-color: hsl(var(--ak6-color-contrast-lower-hsl));
    border-bottom-width: var(--accordion-border-width);
}

.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
    display: none;
}

/* Media query for screens smaller than 768px */
@media (max-width: 767px) {
    .upload_wrapper {
        padding: 1.5em;
    }

    .outer_wrapper_upload {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.text_hints_upload {
    font-size: 18px;
}

.omr_width_wrapper {
    min-width: 50%;
}

/* CONTAINER FOR PLANS & CHECKOUT */

.inner_container_plans_main {
    min-width: 60%;
    border-radius: 0.25em;
    background-color: white;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding-top: 0.2em;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.added_plans_main {
    min-width: 80%;
    box-shadow: none;
}

.added_container_plans {
    margin-top: 0px;
}

.inner_plans_2 {
    margin-top: 5vh;
}

.inner_container_row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

@media (max-width: 767px) {
    .inner_plans_2 {
        margin-top: 0;
    }

    .inner_container_plans_main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.gap_checkout {
    gap: 40px;
}

.inner_container_checkout_main {
    min-width: 40vw;
    background-color: #fff;
    box-shadow: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    border-radius: 0.25em;
    padding-top: 2em;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.inner_container_checkout_price {
    background-color: #fff;
    box-shadow: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    border-radius: 0.25em;
    padding-top: 0.2em;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.btns__btn_checkout {
    border: 0;
    border-radius: 0.25em;
    color: inherit;
    line-height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0.5em 1em;
    text-decoration: none;
    background-color: #000000;
    color: white;
    transition: 0.2s;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
}

.btns__btn_checkout:hover {
    background-color: #050544;
}

/* SWAP CONATINER */

.outer_container_plans_swap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.flex_position_swap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.inner_container_plans_swap {
    min-width: 50%;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgb(0 0 0 / 32%);
    border-radius: 0.25em;
    padding-top: 0.2em;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.header_plan_swap {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e3e3e3;
}

.current_plan_card {
    opacity: 0.5;
    pointer-events: none;
}

/* AUTH CONTAINER */

.outer_container_auth {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--sp-xxx);
    margin-bottom: var(--sp-xxx);
}

.inner_container_auth_main {
    min-width: 40vw;
    background-color: #fff;
    box-shadow: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    border-radius: 0.25em;
    padding-top: 2em;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* FLEX ALIGNMENTS */

.flex_end {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.flex_start {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex_center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.flex_center_between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex_down_right {
    display: flex;
    justify-content: flex-end;
    align-content: flex-end;
    align-items: center;
}

.flex_column {
    flex-direction: column;
}

.gap_vw {
    gap: 2vw;
}

.gap_vw_m {
    gap: 5vw;
}

.small_gap {
    gap: 10px;
}

.flex_get_back {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: black;
    padding-bottom: 3vh;
}

.flex_payment_done_by {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: black;
    margin-top: 10px;
}

.flex_out {
    display: flex;
    flex-direction: column;
}

/* MARGIN & PADDING */

.margin_top_inner {
    margin-top: 20px;
}

.margin_top_outer_view {
    margin-top: 2vh;
}

.margin_top_outer_view_5 {
    margin-top: 5vh;
}

.margin_top_sm {
    margin-top: var(--sp-m);
}

.margin_top_xs {
    margin-top: 1vh;
}

.margin_top_s {
    margin-top: 2vh;
}

/* TEXT DIVIDER */

.text-divider {
    margin: 0.5rem auto;
    display: flex;
    text-align: center;
    align-items: center;
}

.text-divider span {
    font-size: 0.9375rem;
    white-space: nowrap;
    padding: 0 1rem;
}

.text-divider::before,
.text-divider::after {
    content: "";
    display: inline-block;
    height: 1px;
    width: 20px;
    flex-grow: 1;
    background: hsl(240, 4%, 90%);
    vertical-align: middle;
}

.width_inner {
    width: 70%;
}

.divider_vertical {
    width: 1px;
    height: 1em;
    background-color: #ccc;
    margin: 0 12px;
}

.text-divider_wel {
    margin: 4rem auto;
    display: flex;
    text-align: center;
    align-items: center;
}

.text-divider_wel span {
    font-size: 0.9375rem;
    white-space: nowrap;
    padding: 0 2rem;
}

.text-divider_wel::before,
.text-divider_wel::after {
    content: "";
    display: inline-block;
    height: 1px;
    width: 20px;
    flex-grow: 1;
    background-color: #ccc;
    vertical-align: middle;
}

hr {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin-top: 70px;
    margin-bottom: 70px;
}

/* PILLS */

.pill {
    padding: var(--sp-xs) var(--sp-s);
    border-radius: 5em;
    font-size: var(--text-size-95);
}

.rectangle {
    padding: 5px 10px;
    border-radius: 2px;
}

.active {
    background-color: #c6d9f1;
    color: #4279bc;
}

.inactive {
    background-color: #ededed;
    color: grey;
}

.digital {
    background-color: #4279bc;
    color: white;
    font-weight: bold;
    font-size: 22px;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px -1px hsla(230, 13%, 9%, 0.2);
}

.paper {
    background-color: white;
    color: black;
    font-weight: bold;
    font-size: 22px;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px -1px hsla(230, 13%, 9%, 0.2);
}

.pill_invoice {
    padding: 5px 10px;
    border-radius: 18px;
    font-size: 16px;
}

.paid {
    background-color: black;
    color: white;
}

.pending {
    background-color: #838383;
    color: white;
}

.void {
    background-color: white;
    color: black;
}

.unknown {
    background-color: white;
    color: black;
}

/* FOR TEXTS and FORMS*/

.medium_info_text {
    border-top: 1px solid transparent;
    border-image: linear-gradient(
            to right,
            white,
            white 10%,
            lightgrey 40%,
            lightgrey 80%,
            white 90%,
            white 90%
        )
        1;
    padding-top: var(--sp-xs);
    font-size: var(--text-size-90);
    color: grey;
}

.text_s {
    font-size: 14px;
}

.padding_top_bottom {
    margin-top: 1em;
    padding-bottom: 1em;
}

.padding_left {
    padding-left: 20px;
}

.min_width_100 {
    min-width: 100px;
}

.make_bold {
    font-weight: bold;
}

.make_italic {
    font-style: italic;
}

.available_tests {
    font-size: var(--text-size-100);
    color: grey;
}

.min_width_setting_text {
    min-width: 300px;
}

.grey_text {
    color: grey;
}

.available_text {
    font-size: var(--text-size-90);
    color: grey;
}

.forminput_settings {
    background-color: white;
    border: 1px solid #d6d6d6;
    padding: var(--sp-s) var(--sp-s);
    border-radius: 0.25em;
    font-size: var(--text-size-100);
    height: 2.5rem;
}

.full_form_text {
    width: 100% !important;
    font-size: var(--text-size-100);
}

.forminput_settings:focus {
    border: 1px solid #93aaf7;
    box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -webkit-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -moz-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
}

.form_flex_row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.form_fpw_min {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
}

.pw_requirement {
    font-size: 14px;
}

.avb_wok {
    font-size: var(--text-size-90);
    color: grey;
}

.wd_300px {
    min-width: 300px;
}

.xs2_padding_margin_top {
    /* margin-top: 2rem; */
    padding-top: 1rem;
}

.disable_link_btn {
    opacity: 0.5;
    pointer-events: none;
}

.option_css {
    width: 90%;
    text-align: center;
    border: 1px solid #a19f9f;
    border-radius: 0.25em;
}

#team-size-arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

.left_line {
    border-left: 1px solid #d7d7da;
    padding-left: 15px;
    transform: translateX(2%);
}

.flex_center_between_team {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team_edit_btns {
    display: flex;
    gap: 15px;
}

@media (max-width: 767px) {
    .flex_center_between_team {
        flex-direction: column;
    }

    .team_edit_btns {
        margin-bottom: 15px;
    }
}

/* BORDER AND BOX SHADDOWS */

.border_top_thin {
    border-top: 1px solid #e3e3e3;
}

.border_top_thin_v2 {
    border-top: 1px solid #d7d7da;
}

/* HEADING DETAILS PLANS */

h4.heading_plans {
    padding-bottom: 20px;
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 500;
    font-size: var(--fk1-space-md);
}

/* BAR FOR PATIENT POINTS */

.points_bg_bar {
    background-color: #ddd;
    width: 100%;
    height: 10px;
    border-radius: 0.5em;
}

.points_complete {
    background-color: #4279bc;
    height: 10px;
    float: left;
    border-radius: 0.5em 0 0 0.5em;
}

.points_prep {
    background-color: #b8d7ff;
    height: 10px;
    float: left;
    border-radius: 0 0.5em 0.5em 0;
}

.points_legend {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.prep_points {
    background-color: #b8d7ff;
}

.complete_points {
    background-color: #4279bc;
}

.flex_legend_points {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.legend_container_points {
    margin-top: 5px;
    border-top: 1px solid #e3e3e3;
}

.too_much_points {
    color: red;
    /* color when maxPoints is exceeded */
}

/*ACCOUNT*/

.customisation_container {
    margin-top: 15px;
    background-color: #f5f5f5;
    padding: 10px 20px 20px 20px;
    border-radius: 0.25em;
}

.options_txt_custom_div {
    display: flex;
    flex-direction: column;
}

.options_txt_custom {
    font-size: 14px;
    color: gray;
}

.disabled_tr {
    opacity: 0.5;
    pointer-events: none;
}

.flex_link_outer {
    width: fit-content;
    display: flex;
    align-items: baseline;
    text-decoration: none;
    padding: 20px;
    gap: 5px;
    margin-top: 40px;
}

/*EDIT*/

.outer_edit {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
    margin-top: var(--sp-m);
}

.outer_edit_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-m);
}

.inner_edit_flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--sp-mm);
}

.label_edit {
    color: grey;
    font-size: var(--text-size-100);
    min-width: 150px;
}

.label_edit_add_t_p {
    font-size: 20px;
    color: #75757e;
}

.label_margin_top {
    margin-top: 20px;
}

.label_wrapper_edit {
    width: 100%;
    display: flex;
    gap: 40px;
    align-items: center;
}

.link_edit {
    font-size: 18px;
    text-decoration: none;
    color: black;
}

.edit_container {
    margin-top: 2vh;
    margin-bottom: 5vh;
    background-color: #fff;
    box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.forminput_edit {
    min-width: 300px;
    background-color: white;
    padding: 0.5em 0.75em;
    border-radius: 0.25em;
    font-size: var(--text-size-100);
}

.forminput_edit:focus {
    border: 1px solid #93aaf7;
    box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -webkit-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -moz-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
}

.point_wrapper_edit {
    display: flex;
}

.flex_points_center {
    display: flex;
    align-items: center;
    text-decoration: underline;
}

/* IE11 hide native button */
select::-ms-expand {
    display: none;
}

.selectdiv {
    position: relative;
    float: left;
    min-width: 200px;
}

.selectdiv:after {
    content: "<>";
    font: 17px "Consolas", monospace;
    color: #333;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 7px;
    /*Adjust for position however you want*/
    top: 12px;
    padding: 0 0 2px;
    border-bottom: 1px solid #999;
    /*left line */
    position: absolute;
    pointer-events: none;
}

.selectdiv select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Add some styling */
    display: block;
    width: 100%;
    min-width: 300px;
    /* height: 50px; */
    padding: var(--sp-xs) var(--sp-s);
    font-size: var(--text-size-100);
    line-height: 1.75;
    border: 1px solid lightgrey;
    -ms-word-break: normal;
    word-break: normal;
}

.selectdiv select:focus {
    outline: none !important;
    border: 1px solid #93aaf7;
    box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -webkit-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -moz-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
}

.select_table {
    position: relative;
    float: left;
    min-width: 150px;
    margin-bottom: 20px;
}

.select_table:after {
    content: "<>";
    font: 17px "Consolas", monospace;
    color: #333;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 7px;
    /*Adjust for position however you want*/
    top: 12px;
    padding: 0 0 2px;
    border-bottom: 1px solid #999;
    /*left line */
    position: absolute;
    pointer-events: none;
}

.select_table select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Add some styling */
    display: block;
    width: 100%;
    min-width: 150px;
    padding: var(--sp-xs) var(--sp-x) var(--sp-xs) var(--sp-xs);
    font-size: var(--text-size-95);
    line-height: 1.75;
    border: 1px solid lightgrey;
    -ms-word-break: normal;
    word-break: normal;
    border-radius: 0.25em;
}

.select_table select:focus {
    outline: none !important;
    border: 1px solid #93aaf7;
    box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -webkit-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -moz-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
}

.flex_point_form {
    display: flex;
}

.multiplier_input {
    width: 50px;
    text-align: center;
    border: 1px solid #dcdcdc;
    margin-left: 15px;
    border-top-left-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
}

.x_5_min {
    display: flex;
    height: 50px;
    font-size: 16px;
    text-align: center;
    padding: 10px;
    background-color: #dcdcdc;
    color: #5b5b64;
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    align-items: center;
}

.no_input_possible {
    border: none;
}

.edit_header_actions {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
}

.border_edit_bot {
    border-bottom: 1px solid #e3e3e3;
}

.edit_test_start_btns {
    display: flex;
    gap: 5px;
    align-items: center;
}

.edit_action_btns {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.flex_btn_save {
    display: flex;
}

.edit_icons_header {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-m);
}

.icon_edit_container {
    display: flex;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    /* background-color: #B8D7FF; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add_margin_top_edit {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.as_marked {
    background: rgba(239, 246, 254, 0.75) !important;
}

.opacity_tbl {
    opacity: 0.75;
}

.svg_action_btns {
    fill: #ffffff;
}

.bg-6e80a1 {
    background-color: #445a83;
}

.bg-6e80a1:hover {
    background-color: #374b72;
}

.bg-445a83 {
    background-color: #6e80a1;
}

.bg-445a83:hover {
    background-color: #374b72;
}

@media (max-width: 767px) {
    .label_wrapper_edit {
        display: flex;
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    .label_edit {
        font-size: 18px;
        min-width: 0px;
        color: #75757e;
    }

    .selectdiv select {
        height: 40px;
        font-size: 18px;
        min-width: 250px;
    }

    .selectdiv:after {
        content: "<>";
        font: 14px "Consolas", monospace;
        right: 7px;
        /*Adjust for position however you want*/
        top: 10px;
        padding: 0 0 2px;
    }

    .edit_container {
        padding: 1.5rem;
    }

    .link_edit {
        font-size: 15px;
    }

    .min_width_setting_text {
        min-width: 0px;
    }
}

.delete_tb_flex {
    display: flex;
    justify-content: center;
}

.archive_tb_btn {
    cursor: pointer;
}

/* FOR CONFIRMATIONS OR SINGEL ISSUE PAGES */

.outer_message_container {
    display: flex;
    justify-content: center;
    margin-top: 10vh;
    margin-bottom: 10vh;
    padding-left: 5px;
    padding-right: 5px;
}

.message_container {
    display: flex;
    background-color: white;
    flex-direction: column;
    max-width: 48rem;
    min-width: 30vw;
    border-radius: 0.25em;
    padding: 2em 2em;
    box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
        0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
        0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
        0 3.5px 6px hsla(230, 13%, 9%, 0.09);
}

.default_message {
    margin-top: 2em;
    color: hsl(225, 4%, 47%);
    text-align: center;
}

.message_header {
    margin-top: 0.5em;
    text-align: center;
}

.message_btns {
    border-top: 1px solid #e3e3e3;
    padding-top: 1em;
    margin-top: 2em;
    display: flex;
}

.reset_pw_header {
    margin-bottom: 1em;
}

.btns_apart {
    justify-content: space-between;
}

.message_error {
    color: red;
    text-align: center;
}

.message_feedback {
    color: green;
    text-align: center;
}

.center_email {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
    gap: 10px;
}

.set_message_btn_right {
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .message_btns {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
}

.avoid_p_margin {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.disable_customization {
    opacity: 0.5;
    pointer-events: none;
}

.no_custom_text {
    margin-top: 15px;
    margin-bottom: 10px;
}

.border_checkout_header {
    width: 100%;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #e3e3e3;
}

/* TESTDISPLAY */

.test_selected {
    pointer-events: none;
    opacity: 0.6;
}

.remove-test {
    cursor: pointer;
    color: #930000;
    font-size: var(--text-size-95);
}

.wish_test_footer {
    padding: 1em 1em;
    border-top: 1px solid #e3e3e3;
}

.wish_test_check {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wish_list {
    display: flex;
    background-color: white;
    border: 1px solid #dddddd;
    border-radius: 0.25em;
    padding: 0.5em 0.5em;
    list-style-type: none;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-size-100);
}

.wish_list_wrapper {
    display: none;
    gap: 5px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    border-radius: 0.25em;
    background-color: #e9e9e9;
    flex-direction: column;
}

#noTestMessage {
    text-align: center;
}

.wish_test_header {
    font-size: 20px;
    font-weight: bold;
}

.wish_email_width {
    width: 80% !important;
}

.wish_check_text {
    font-size: var(--text-size-90);
}

.wish_outer {
    display: flex;
    gap: 30px;
    background-color: #b8d7ff;
    width: fit-content;
    padding: 1em;
    border-radius: 0.25em;
    font-size: 18px;
    align-items: center;
    margin-bottom: 1em;
}

.table_border_inner {
    border-left: 1px solid #e3e3e3;
}

.is_archived {
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 767px) {
    .wish_outer {
        font-size: 16px;
    }

    .wish_container {
        margin-top: 10px;
        display: flex;
        justify-content: center;
    }

    .filter_accord {
        display: flex;
        justify-content: center;
    }
}

/* HELP */

.help_main_header {
    padding-bottom: var(--sp-x);
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: var(--sp-x);
}

.help_guides_wrapper {
    padding: 1em;
}

.available_num {
    background-color: #ffffff;
    padding: 1px 3px;
    border-radius: 0.25em;
    font-size: var(--text-size-90);
}

.card_outer_gap_div {
    display: flex;
    flex-direction: column;
    gap: var(--sp-x);
}

.cd-link {
    text-decoration: none;
    background-image: linear-gradient(
        to right,
        hsl(213, 48%, 50%) 50%,
        hsla(250, 84%, 54%, 0.2) 50%
    );
    background-size: 200% 1px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: background-position 0.2s;
    font-size: var(--text-size-100);
}

.cd-link:hover {
    background-position: 0% 100%;
}

.cd-link--contrast-higher {
    color: hsl(230, 13%, 9%);
    background-image: linear-gradient(
        to right,
        hsl(230, 13%, 9%) 50%,
        hsla(230, 13%, 9%, 0.1) 50%
    );
}

.cd-line-height-lg {
    line-height: 1.58;
}

.no_bg {
    background: none !important;
}

.email_info_first {
    font-size: var(--text-size-95);
}

#content-to-copy {
    font-size: var(--text-size-95);
}

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

.arcive_react_btn_div {
    border-left: 1px solid lightgray;
    margin-left: var(--sp-s);
    padding-left: var(--sp-s);
    display: flex;
}

.acr_re_text {
    font-size: var(--text-size-95);
}

.sidebar_info_pad {
    padding: 0px var(--sp-m);
    margin-top: var(--sp-m);
}

.datavis {
    display: flex;
    width: 100%;
    /* justify-content: center; */
}

.datavis2 {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

.datavis3 {
    display: flex;
}

.mar_pad_1 {
    margin-top: var(--sp-m);
    padding-top: var(--sp-m);
}

.can_create_btn_div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.empty-table-message {
    display: flex;
    justify-content: center;
    color: grey;
}

.form_input {
    background-color: white;
    border: 1px solid #d6d6d6;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-radius: 0.25em;
}

.form_input:focus {
    border: 1px solid #93aaf7;
    box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -webkit-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -moz-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
}

.standard_lable {
    color: grey;
    font-size: var(--text-size-90);
}

.form_lable_div {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xxs);
}

.blue_info {
    margin: var(--sp-s) 0;
    font-size: var(--text-size-90);
    background-color: #dde9f9;
    padding: var(--sp-xs) var(--sp-m);
    border-radius: 0.25em;
}

.b_inf_width {
    width: fit-content;
    background-color: #f8fafd;
}

.pending-test {
    display: flex;
    gap: var(--sp-m);
    padding: var(--sp-s);
    border-radius: 0.25em;
    background-color: white;
    width: 100%;
    box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
        0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
        0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
        0 3.5px 6px hsla(230, 13%, 9%, 0.09);
    align-items: center;
    justify-content: space-between;
}

.pending_text_div {
    display: flex;
    flex-direction: column;
    min-width: 400px;
}

.small_pending_txt {
    font-size: var(--text-size-90);
    color: grey;
}

.pending_btns_2 {
    display: flex;
    gap: var(--sp-s);
}

.pending-tests-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    margin-top: var(--sp-m);
}

.btn_template_cst_t {
    border-left: 1px solid lightgrey;
    padding-left: var(--sp-xs);
}

.simple_morph_flex {
    display: flex;
}

.flex_acticle_content {
    display: flex;
    gap: var(--sp-x);
}

@media (max-width: 767px) {
    .flex_acticle_content {
        display: flex;
        gap: var(--sp-x);
        flex-direction: column-reverse;
    }

    .documentation_container {
        width: 100% !important;
    }
}

.documentation_container {
    width: calc(100.5 * 8px);
}

.docu_content_container {
    width: calc(28 * 8px);
    max-width: calc(48 * 8px);
    flex-shrink: 0;
    flex-grow: 1;
}

#notifications_container_outer {
    /* background-color: wheat; */
}

#deleteAllContainer_notify {
    margin: var(--sp-xs) 0;
}

#deleteAll_notify {
    background-color: lightgrey;
    font-size: var(--text-size-90);
    padding: var(--sp-xs);
    cursor: pointer;
    border-radius: 0.25em;
}

#deleteAll_notify:hover {
    background-color: #d3d3d3b8;
}

#notificationsContainer {
}

.message_cont_dash {
    margin: var(--sp-xs) 0;
}

.magrin_xs {
    margin-bottom: var(--sp-xs);
}

.notimessg_container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.notification_card {
    background-color: white;
    border-radius: 0.25em;
    padding: var(--sp-s);
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    max-width: 600px;
}

.delete_notify_div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.notify_body_div {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xxs);
}

.card-body {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.notify_pill {
    display: flex;
    background-color: #4279bc36;
    color: #4279bc;
    border-radius: 0.5em;
    padding: var(--sp-ss) 5px;
    font-size: var(--text-size-90);
    width: max-content;
    margin-bottom: 4px;
}

.notify_title {
    font-size: var(--text-size-100);
    font-weight: bold;
}

.notify_desc {
    font-size: var(--text-size-95);
    color: grey;
}

.notify_text {
    font-size: var(--text-size-95);
}

.toggle-text {
    font-size: var(--text-size-95);
    color: #445a83;
    border-top: 1px solid lightgrey;
    margin-top: var(--sp-xs);
}

.notify_text {
    margin-top: var(--sp-xs);
}

.notify_header {
    font-size: var(--text-size-200);
    font-weight: bold;
}

.support_div_outer {
    background-color: white;
    border-radius: 0.25em;
    padding: var(--sp-s);
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: black;
    display: block;
    position: relative;
    max-width: 600px;
    transition: all 0.2s ease;
}

.support_div_outer:hover {
    background-color: rgb(248, 248, 248);
    transform: translateY(-4px);
}

.supp_col_flex {
    display: flex;
    flex-direction: column;
}

.supp_flx,
.supp_flx p {
    display: flex;
    gap: var(--sp-s);
    font-size: var(--text-size-90);
    color: grey;
}

.supp_badge {
    background-color: #4279bc36;
    font-size: var(--text-size-80);
    padding: 3px 5px;
    border-radius: 5em;
}

.badge_supp_position {
    display: flex;
    gap: var(--sp-xs);
    position: absolute;
    top: 5px;
    right: 5px;
}

.new_msg {
    background-color: #8ec1ff;
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 1px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.05);
}

.supp_outer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
}

.title_supp {
    font-weight: bold;
}

.supp_btn_mod {
    margin: var(--sp-m) 0;
}

.invalid-feedback {
    background-color: #ffd7d7;
    border-radius: 0.25em;
    padding: 3px 15px;
    font-size: 12px;
    width: max-content;
    color: red;
}

.top_feed {
    margin-top: 5px;
}

.is-invalid {
    border: 1px solid red;
}

.support_info_container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-s);
    background-color: white;
    max-width: 400px;
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;

    font-size: var(--text-size-100);
}

.info_supp_txt {
    font-weight: bold;
    font-size: var(--text-size-100);
}

.betreff_txt {
    font-size: var(--text-size-300);
    font-weight: bold;
}

.supp_back_btn {
    display: flex;
    gap: var(--sp-xs);
    text-decoration: none;
    color: #4279bc;
    max-width: max-content;
    margin-bottom: var(--sp-s);
}

.shared_attach_container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--sp-s);
    background-color: white;
    max-width: max-content;
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    margin-top: var(--sp-s);
}

.attachments_files {
    display: flex;
    gap: var(--sp-s);
    flex-wrap: wrap;
}

.attachment_file {
    background-color: #f0f4ff;
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding: var(--sp-s);
    text-decoration: none;
    font-size: var(--text-size-90);
    display: flex;
    gap: 4px;
    color: #4279bc;
}

.messages_supp {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    margin: var(--sp-s) 0;
}

.sup_message_container {
    background-color: white;
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding: var(--sp-s);
    font-size: var(--text-size-100);
}

.sup_msg_header {
    display: flex;
    gap: var(--sp-m);
    padding-bottom: var(--sp-xs);
    margin-bottom: var(--sp-xs);
    border-bottom: 1px solid lightgrey;
}

.bold_text {
    font-weight: bold;
}

.supp_reply_container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    padding-top: var(--sp-s);
    margin-top: var(--sp-m);
    border-top: 1px solid lightgrey;
}

.make_max_width_max {
    max-width: max-content;
}

.links_manual_container {
    display: flex;
    gap: var(--sp-m);
}

.admin_actions_ticket_div {
    display: flex;
    gap: var(--sp-m);
    position: absolute;
    top: 10px;
    right: 10px;
}

.closed_badge {
    background-color: #cdcdcd;
}

.closed_ticket {
    opacity: 0.7;
}

.accordion__header_max_width {
    width: max-content !important;
}

.tutorial_img_basic {
    min-width: auto;
    height: auto;
    border-radius: 0.25em;
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
}

.tutorial_accordion_text {
    max-width: 900px !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: var(--sp-m) 0;
}

.text__highlight {
    background-color: #dbdbdb;
    padding: 1px 2px;
    border-radius: 3px;
}

.figure_img {
    margin: var(--sp-m) 0 !important;
    font-size: var(--text-size-90);
    color: grey;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.strong_hd {
    display: block;
    margin-bottom: var(--sp-s);
}

.figure_left_img {
    align-items: flex-start;
}

.private_test_p {
    font-size: var(--text-size-90);
    margin-top: var(--sp-s);
    text-align: center;
    border: 1px solid lightgrey;
    width: fit-content;
    border-radius: 0.5em;
    padding: 5px 10px;
}

.private_test_div {
    display: flex;
    justify-content: center;
}

.small_lock_svg {
    height: 10px;
    width: auto;
    display: inline;
}

.outer_container_add_multi {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--sp-x);
    flex-direction: column;
}

.multi_header_section {
    margin-bottom: var(--sp-x);
}

.multi_container_outer {
    background-color: #ffffff;
    padding: var(--sp-x) var(--sp-x);
    border-radius: 0.25em;
    box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
    min-width: 600px;
    position: relative;
    margin-bottom: var(--sp-m);
}

.remove_btn_svg {
    background-color: #37383f2b;
    display: flex;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.remove_btn_svg:hover {
    background-color: #37383f61;
}

.remove_btn_multi {
    background-color: #4279bc24;
    display: flex;
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.remove_btn_multi:hover {
    background-color: #4279bc3b;
}

.remove_icon_mlti {
    width: 20px;
    height: 20px;
    color: #4279bc;
    stroke-width: 2;
}

.mltui_save_btns {
    display: flex;
    flex-direction: column;
    gap: var(--sp-m);
    align-items: flex-start;
    margin: var(--sp-x) 0;
}

.selection_header_mlt {
    border-bottom: 1px solid lightgray;
    margin-bottom: var(--sp-m);
    padding-bottom: var(--sp-s);
}

.flex_mulit_selecton {
    display: flex;
    flex-direction: column;
    gap: var(--sp-m);
}

.small_desc_mlti_txt {
    font-size: var(--text-size-95);
    margin-bottom: 3px;
    color: #2c3e50;
    font-weight: 500;
}

.small_desc_mlti_txt_sm {
    font-size: var(--text-size-90);
    color: grey;
    margin-top: 3px;
}

.test_selec_flex {
    display: flex;
    gap: 7px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.first_test_sel_div {
    width: 90%;
}

.tests-container {
    margin-bottom: var(--sp-m);
}

.npf_mlti {
    margin-top: 5px;
}

.mlit_card_container {
    margin: var(--sp-m) 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
}

.side_bar_mlti_a {
    text-decoration: none;
    position: relative;
}

.list-group-item-mtl {
    display: flex;
    background-color: white;
    color: #4279bc;
    cursor: pointer;
    border-radius: 0.15em;
    text-decoration: none;
    align-items: center;
    padding: var(--sp-s) var(--sp-m);
    gap: var(--sp-s);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    justify-content: space-between;
}

.multi_card_pat {
    font-size: var(--text-size-90);
    color: grey;
}

.upload-status-bulk {
    font-size: var(--text-size-90);
    color: grey;
    position: absolute;
    top: 5px;
    right: 7px;
}

.upload-user-info {
    display: flex;
    gap: var(--sp-m);
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 0.25em;
    padding: var(--sp-m);
    margin: var(--sp-m) 0;
    position: relative;
    max-width: 100%;
}

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

.upload-container-outer3 {
    display: flex;
    justify-content: flex-start;
}

.battery-navigation {
    display: flex;
    gap: var(--sp-m);
}

.active_cont_mtl {
    border: 2px solid #4279bc;
    border-radius: 0.15em;
}

.upload_background2 {
    background-color: #b8d7ff9c;
    padding: 20px 30px;
    border-radius: 0.25em;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.12);
}

.stp_hds {
    display: flex;
    gap: var(--sp-mm);
    align-items: center;
}

.soon_available {
    background-color: #d7d7da;
    padding: var(--sp-xs);
    border-radius: 0.25em;
    font-size: var(--text-size-90);
}

/* BASE FEATURES */

.split-layout {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: flex-start;
}

.menu-group {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    max-width: 500px;
}

.menu-item {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    padding: var(--sp-x) var(--sp-xxx) var(--sp-x) var(--sp-x);
    cursor: pointer;
    position: relative;
    /* Added for absolute positioning of content */
}

.menu-item:hover {
    background: #f1f1f196;
    transition: background-color 0.4s;
}

.menu-item:hover .menu-title {
    color: #4279bc;
    transition: background-color 0.4s;
}

.menu-item:hover .flex_svg_header {
    fill: #4279bc;
}

.menu-title {
    margin: 0;
    cursor: pointer;
    color: #7a7a7a;
    transition: background-color 0.3s;
    font-size: var(--text-size-200);
    font-weight: 500;
}

.menu-item.open {
    background: #f1f1f170;
}

.menu-item.open .menu-title {
    color: #4279bc;
}

.menu-title-mobile {
    color: #4279bc;
}

.menu-content {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out,
        margin 0.5s ease-out;
    opacity: 0;
    margin-top: 0;
    padding-left: 32px;
    /* Same as empty_div min-width */
}

.menu-item.open .menu-content {
    display: flex;
    max-height: 200px;
    opacity: 1;
    margin-top: var(--sp-m);
}

.preview-area {
    /* flex: 1; */
}

.preview-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: none;
    transition: opacity 0.3s;
}

.preview-img.show {
    display: block;
}

.flex_svg_header {
    display: flex;
    gap: 12px;
    align-items: center;
    fill: #7a7a7a;
}

.menu-item.open .flex_svg_header {
    fill: #4279bc;
}

.flex_svg_header_mobile {
    fill: #4279bc;
}

.svg_hero {
    width: 24px;
    height: 24px;
}

.svg_hero_x {
    width: 26px;
    height: 26px;
}

.feature_header_div {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.blue_header {
    color: #4279bc;
    font-size: 2.2rem;
}

.grey_text {
    color: grey;
}

/* BASE FEATURES END */

.tableholder_team {
    background-color: #fff;
    box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding: var(--sp-m) var(--sp-mm);
}

.column_flex_team {
    display: flex;
    flex-direction: column;
    gap: var(--sp-m);
}

.small_team_text {
    font-size: var(--text-size-90);
}

.id_magrin_team {
    margin: var(--sp-m) 0;
}

.team_header_section {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--sp-x);
}

.error_amount_false {
    padding: var(--sp-xs);
    background-color: #d71010bd;
    color: #240101;
    border-radius: 0.25em;
    font-size: var(--text-size-95);
}

.center_e_text {
    text-align: center;
}

#selectedTestsContainer,
#selectedComponentsContainer,
#selectedPatientContainer,
#selectedTestBatteryContainer,
#selectedUserContainer {
    margin-top: 10px;
}

#notification_date {
    margin-top: 5px;
}

.selected-components {
    /* margin-top: 10px; */
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
}

.selected-component {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    /* margin-top: 10px; */
    gap: var(--sp-s);
}

.component-actions {
    display: flex;
    align-items: center;
}

.remove-component {
    margin-left: 4px;
    cursor: pointer;
    color: #666;
    border: none;
    background: none;
    padding-left: 4px;
    border-left: 1px solid lightgrey;
}

.remove-component:hover {
    color: #ff0000;
}

.pre_save_bar {
    padding: var(--sp-xxs);
}

.menu_pre_creator_div {
    display: flex;
    align-items: center;
    margin-left: var(--sp-xxx);
}

.input_div_1_pre {
    display: flex;
    gap: 5px;
    align-items: center;
}

.input_400 {
    width: 400px;
}

.features_header_desc {
    background-color: #2759960a;
    padding: var(--sp-s);
    font-weight: 700;
    font-size: var(--text-size-95);
    border-radius: 0.25em;
    border: 1px solid #2759965c;
    width: fit-content;
}

.explorer_row_1 {
    display: flex;
    justify-content: space-between;
}

.expl-language-tag {
    font-size: var(--text-size-90);
    background-color: #ebebeb;
    border-radius: 0.25em;
    padding: 3px;
    border: 1px solid #ebebeb;
}

.explorer__result:hover .expl-language-tag {
    border: 1px solid lightgrey;
}

.hidden {
    display: none;
}

.test-battery-container {
    position: relative;
}

.test-battery-header {
    cursor: pointer;
}

.test-battery-header:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.test-battery-details {
    border-left: 2px solid #e5e7eb;
}

.rotate-180 {
    transform: rotate(180deg);
}

.mg_t_hd {
    margin-top: var(--sp-m);
}

.details_small_txt {
    font-size: var(--text-size-90);
    color: grey;
    cursor: pointer;
}

.table_a_link_outer {
    display: flex;
    gap: 4px;
    align-items: center;
    text-decoration: none;
    font-size: var(--text-size-95);
}

.table_a_link {
    height: 15px;
    stroke-width: 2;
    width: auto;
}

.details_name {
    font-size: var(--text-size-90);
}

.details_name_long {
    font-size: var(--text-size-90);
    color: grey;
}

.send_till {
    border: 1px solid lightgrey;
    background-color: white;
    padding: 0.5em 0.75em;
    border-radius: 0.25em;
    font-size: var(--text-size-90);
}

.favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.favorite-btn svg {
    width: 12px;
    height: 12px;
    transition: opacity 0.3s ease;
}

.favorite-btn:not(.active) svg {
    opacity: 0.4;
}

.favorite-btn.active svg {
    opacity: 1;
    fill: #4279bc;
}

.favorite-btn:hover svg {
    opacity: 0.8;
}

.menu-fx-c {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
}

.menu-cd-link {
    display: flex;
}

.tab_inner_section {
    display: flex;
    gap: var(--sp-xxx);
}

.encryption_img {
    width: auto;
    height: 70px;
}

.encrypt_img_div {
    display: flex;
    flex-direction: column;
    gap: var(--sp-m);
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .tab_inner_section {
        gap: var(--sp-x);
        flex-direction: column;
        padding: 0px var(--sp-m);
    }

    .encrypt_img_div {
        flex-direction: row;
    }

    .blue_header {
        font-size: 1.8rem;
    }

    .multi_container_outer {
        min-width: 100%;
    }

    .container_multi_test_o {
        margin: var(--sp-xx) var(--sp-s);
    }
}

.need_custom_outer {
    margin: var(--sp-xx) 0px;
    background-color: #f1f7fe;
    padding: var(--sp-s);
    border-radius: 0.25em;
}

.need_custom_plan {
    display: flex;
    gap: var(--sp-m);
    border-radius: 0.25em;
    padding: var(--sp-m);
    font-size: var(--text-size-100);
    background-color: white;
    color: #235693;
    border: 1px solid #23569370;
    box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
    -webkit-box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
    -moz-box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
    align-items: center;
}

.svg_custom_plan {
    background-color: #f0f7ff;
    padding: 10px;
    border-radius: 0.25em;
}

.input_height_pdf {
    height: fit-content !important;
}

.min_width_btn {
    width: fit-content;
}

.form-control-area {
    width: 100%;
    border: 1px solid #d6d6d6;
    outline: none;
    padding: var(--sp-xs);
    border-radius: 0.25em;
}

.form-control-area:focus {
    border: 1px solid #93aaf7;
    box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -webkit-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
    -moz-box-shadow: 0px 2px 8px 1px rgba(217, 217, 217, 0.4);
}

.info_box_outer {
    display: flex;
    gap: var(--sp-m);
    background-color: #4279bc1f;
    border: 1px solid #4279bc;
    padding: var(--sp-s);
    align-items: center;
    border-radius: 0.25em;
    box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
    margin: var(--sp-m) 0;
    line-height: 1.2;
}

.info_box_svg svg {
    height: auto;
    min-width: 30px;
    fill: #4279bc;
}

.info_box_text_div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: var(--text-size-90);
    align-items: flex-start;
}

.info_strong {
    font-weight: bold;
    color: #4279bc;
}

.lf_fl_dig_d {
    display: flex;
    gap: var(--sp-s);
    flex-direction: column;
    align-items: flex-start;
}

.back_btn_arrow {
    display: flex;
    gap: 5px;
    background-color: white;
    border: 1px solid lightgrey;
    border-radius: 0.25em;
    text-decoration: none;
    width: fit-content;
    padding: 7px;
    justify-content: center;
    align-items: center;
    margin: var(--sp-m) 0;
}

.back_btn_arrow:hover {
    background-color: rgb(243, 243, 243);
    cursor: pointer;
}

.arrow_arrow {
    display: flex;
    background-color: #80808042;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    align-items: center;
    justify-content: center;
    color: #4279bc;
}

.arrow_pos {
    transform: translateY(-2px);
}

.txt_arrow_btn {
    font-size: var(--text-size-95);
}

.special_link_p {
    text-decoration: none;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.special_link_p2 {
    position: absolute;
    bottom: 10px;
    right: 8px;
    text-decoration: none;
    display: flex;
    gap: 4px;
    font-size: var(--text-size-90);
    align-items: center;
}

.special_link_svg {
    height: 18px;
}

.scale-checkbox-info {
    display: flex;
    gap: var(--sp-m);
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 0.25em;
    padding: var(--sp-m);
    margin: var(--sp-m) 0;
    position: relative;
    width: fit-content;
}

.info_icon {
    min-width: 30px;
}

.link_outer_svg {
    height: 18px;
    margin-left: var(--sp-xxs);
}

.link_wrpddes {
    display: flex;
    gap: var(--sp-m);
    margin-top: var(--sp-m);
}

.open_pre_test_result_btn {
    background-color: grey;
}

/* Enhanced File Input */
.chart_text_input[type="file"] {
    position: relative;
    padding: var(--sp-s) var(--sp-m);
    background: white;
    border: 2px dashed #e9ecef;
    border-radius: 0.5em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: var(--text-size-90);
    color: #6c757d;
}

.chart_text_input[type="file"]:hover {
    border-color: #5a8fd0;
    background: #f8f9fa;
}

.chart_text_input[type="file"]:focus {
    border-color: #4279bc;
    outline: none;
}

.ts_st {
    stroke-width: 2;
}

.coupon_error {
    display: flex;
    margin-top: 5px;
    padding: 5px 10px;
    background-color: #ffd7d7;
    color: #940303;
    font-size: 12px;
    border-radius: 0.25em;
    width: 100%;
    justify-content: space-between;
}

.coupon_error_remove {
    display: flex;
    /* border-left: 1px solid #940303; */
    align-items: center;
    /* padding-left: 5px; */
}

#dismiss-coupon-error {
    display: flex;
    background-color: #da696999;
    color: #940303;
    border-radius: 50%;
    font-weight: bold;
    height: 20px;
    width: 20px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#dismiss-coupon-error:hover {
    background-color: #da6969bd;
}

.max_con_inf_re {
    max-width: 400px;
}

.container_view {
    height: 85vh;
    overflow: auto;
    max-width: 1400px;
    margin: 0 auto;
}

.card_tut_norm {
    font-size: var(--text-size-100);
    font-weight: bold;
    color: black;
}

.link_card_min {
    height: 100px;
}

.tut_col_bg {
    background-color: #f0f7ff;
}

/* Enhanced Back Button */
.back_btn_arrow {
    display: inline-flex;
    gap: 8px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
    min-height: 50px;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.back_btn_arrow:hover {
    background-color: #f8f9fa;
    border-color: #4279bc;
    transform: translateX(-4px);
    box-shadow: 0 4px 8px rgba(66, 121, 188, 0.15);
    cursor: pointer;
}

.arrow_arrow {
    display: flex;
    background-color: #4279bc15;
    border-radius: 50%;
    height: 28px;
    width: 28px;
    align-items: center;
    justify-content: center;
    color: #4279bc;
    transition: all 0.3s ease;
}

.back_btn_arrow:hover .arrow_arrow {
    background-color: #4279bc25;
}

.arrow_pos {
    transform: translateY(-1px);
    font-weight: bold;
}

.continue_btn_arrow {
    display: inline-flex;
    gap: 8px;
    min-height: 50px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.continue_btn_arrow:hover {
    background-color: #f8f9fa;
    border-color: #4279bc;
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(66, 121, 188, 0.15);
    cursor: pointer;
}

.confirm_btn_arrow {
    display: inline-flex;
    gap: 8px;
    background-color: #4279bc;
    color: white;
    min-height: 50px;
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    font-size: var(--text-size-100);
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.confirm_btn_arrow:hover {
    background-color: #4279bc;
    border-color: #f8f9fa;
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(66, 121, 188, 0.25);
    cursor: pointer;
}

.confirm_btn_arrow:hover .arrow_arrow {
    background-color: #4279bc25;
}

.txt_arrow_btn {
    font-size: var(--text-size-100);
    color: #333;
    font-weight: 500;
}

.support_data_div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-s);
}

.multi_p_form_area {
    position: relative;
    background-color: #f8f9fa;
    padding: var(--sp-m);
    border: 1px solid #d3d3d366;
    border-radius: 0.25em;
}

.more_info_btn_sus {
    display: inline-flex;
    gap: 6px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
    font-size: var(--text-size-100);
    padding: 10px 16px;
    justify-content: center;
    color: #4279bc;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.more_info_btn_sus:hover {
    background-color: #f8f9fa;
    border-color: #4279bc;
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(66, 121, 188, 0.15);
}

.form__label_team_change {
    font-size: var(--text-size-90);
    color: grey;
}

.form__input_team_change {
    background-color: white;
    border: 1px solid #d6d6d6;
    padding: var(--sp-s) var(--sp-s);
    border-radius: 0.25em;
    font-size: var(--text-size-100);
    height: 2.5rem;
}

.optional_pill_test {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    font-size: var(--text-size-90);
    color: grey;
    background-color: #8080801a;
    height: max-content;
    padding: 6px 14px;
    border-radius: 0 4px 0 4px;
    align-items: center;
}

.column-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.custom-checkbox-label {
    cursor: pointer;
    margin: 0;
}

.custom-checkbox-input {
    display: none;
}

.custom-checkbox-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin-right: 8px;
    font-size: var(--text-size-90);
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
}

/* Checked state (active/visible column) */
.custom-checkbox-input:checked + .custom-checkbox-badge {
    color: #4279bc;
    background-color: #dbeafe;
}

.custom-checkbox-input:checked + .custom-checkbox-badge:hover {
    background-color: #bfdbfe;
}

/* Unchecked state (inactive/hidden column) */
.custom-checkbox-input:not(:checked) + .custom-checkbox-badge {
    color: #6b7280;
    background-color: #f3f4f6;
}

.custom-checkbox-input:not(:checked) + .custom-checkbox-badge:hover {
    background-color: #e5e7eb;
    color: #374151;
}

.custom-checkbox-icon {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    margin-left: 2px;
    /* border-radius: 2px; */
    transition: all 0.2s ease;
}

.checkbox-svg {
    width: 15px;
    height: 15px;
    stroke-width: 2px;
}

#search-input {
    padding: var(--sp-xxs) var(--sp-m);
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: var(--text-size-100);
    width: 250px;
}

#search-input:focus-within {
    border: 1px solid #4279bc;
}

.select-wrapper {
    position: relative;
    display: inline-block;
    width: 150px;
}

#search-column {
    padding: var(--sp-xxs) var(--sp-m);
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: var(--text-size-100);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: calc(var(--sp-m) + 5px);
}

.select-arrow {
    position: absolute;
    right: var(--sp-xxs);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.page-size-selector {
    font-size: var(--text-size-90);
    color: grey;
}

.page-size-selector select {
    border: 1px solid grey;
    border-radius: 0.25em;
    padding: 2px;
}

#info-text {
    font-size: var(--text-size-90);
    color: grey;
    text-align: center;
    margin-top: var(--sp-s);
}

.table-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--sp-s);
}

.multi_patients_links {
    text-decoration: none;
    font-size: var(--text-size-100);
    border: 1px solid lightgray;
    padding: 3px 6px;
    border-radius: 0.25em;
    color: #4279bc;
}

.pagination {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

.pagination button {
    padding: var(--sp-xs) var(--sp-m);
    background: white;
    border: 1px solid lightgrey;
    cursor: pointer;
    border-radius: 0.25em;
}

.pagination button:hover:not(:disabled) {
    background: #4279bc;
    color: white;
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination button.active_pagi {
    background: #4279bc;
    color: white;
}

.hidden-column {
    display: none !important;
}

.pre-tests,
.battery-tests {
    margin-top: 5px;
}

.pre-tests-list,
.battery-tests-list {
    margin: 5px 0 0 15px;
    font-size: 0.9em;
}

@media (max-width: 767px) {
    .add_test_header_section {
        display: flex;
        gap: var(--sp-xs);
    }

    .right_div_inner {
        align-items: flex-start;
        gap: var(--sp-s);
    }
    .available_tests {
        font-size: var(--text-size-95);
    }

    .multi_container_outer {
        padding: var(--sp-m) var(--sp-s);
    }
    .multi_p_form_area {
        padding: var(--sp-m);
    }
}

.start_bg_opt {
    background-color: #f8f8f8;
    padding: var(--sp-s);
    border-radius: 0.25em;
    display: flex;
    flex-direction: column;
    gap: var(--sp-m);
}

.export_btn_main {
    display: flex;
    gap: var(--sp-xs);
    background-color: white;
    border: 1px solid #e0e0e0;
    color: #4279bc;
    cursor: pointer;
    border-radius: 2em;
    text-decoration: none;
    align-items: center;
    padding: var(--sp-xxs) var(--sp-s) var(--sp-xxs) var(--sp-xxs);
    /* gap: var(--sp-s); */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    will-change: transform;
    box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
    -webkit-box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
    -moz-box-shadow: 0px 9px 9px -6px rgba(161, 161, 161, 0.5);
}

.export_btn_main:hover {
    background-color: rgb(250 250 250);
    box-shadow: inset 0px 1px 0px hsla(var(--mc4-color-white-hsl), 0.1),
        0px 0px 0px 1px hsla(var(--mc4-color-black-hsl), 0.02),
        0px 1px 3px -1px hsla(var(--mc4-color-black-hsl), 0.2),
        0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.export_btn_main:hover .icon_export_container_list_btn {
    background: linear-gradient(
        125deg,
        #4279bc6b,
        #5a8ece4f,
        rgb(118 164 221 / 21%)
    );
}

.icon_export_container_list_btn {
    display: flex;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background: linear-gradient(
        150deg,
        #4279bc6b,
        #5a8ece4f,
        rgb(118 164 221 / 21%)
    );
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

.no_margin_p {
    margin: 0 !important;
}

.icon_export_container_list_btn svg {
    width: 1rem;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    fill: #4279bc;
}

.export_btn_ex {
    width: 110px;
    height: 85px;
}

.export_txt_p {
    font-size: var(--text-size-90);
}