body .seeting_modal {
    padding: 1rem;
}

body .modal .modal-dialog.modal-fullscreen {
    max-width: none;
    width: calc(100vw - 3rem);
    border-radius: 10px;
    box-shadow: 0 0 25px 25px #0009;
    margin: 0 auto;
}

.seeting_modal .modal-dialog {
    overflow: hidden;
}

.seeting_modal .modal-content {
    border-radius: var(--_bdr_radius_md) !important;
}

.seeting_modal .modal-body {
    /*background-color: var(--setting_light_bk);*/
    /*background-color: var(--new_bg_modal);*/
    background-color: var(--new_bg_modal_body);
    border-radius: var(--_bdr_radius_md) !important;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary_bk_color) transparent;
    scrollbar-gutter: stable both-edges;
}
/*.dark .seeting_modal .modal-body {
    background-color: #17181C;
}*/

.seeting_modal .modal-header {
    /*background-color: var(--_bg_light);*/
    border-bottom: var(--common_border) !important;
    background-color: var(--new_bg_modal);
    border-radius: var(--_bdr_radius_md);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    min-height: 62px;
}

    .seeting_modal .modal-header .modal-title {
        font-size: var(--c-font-size-100) !important;
        font-weight: var(--c-font-weight-semibold);
        color: var(--text_dark_color);
        margin: 0;
    }

.setting_page {
    max-width: 1200px;
    margin: 0 auto;
}

.setng_modal_row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.setng_modal_col1 {
    width: 100%;
    max-width: 250px;
    min-width: 250px;
    margin: 1rem 0 0 0;
    top: 16px;
}

.setng_modal_col2 {
    width: calc(100% - 270px);
}

.stng_bgr_icon {
    display: none;
}

.seeting_modal .modal-body::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}

.seeting_modal .modal-body::-webkit-scrollbar {
    width: 10px;
    height: 6px;
    background-color: transparent;
}

.seeting_modal .modal-body::-webkit-scrollbar-thumb {
    border-radius: 11px;
    background-color: var(--secondary_bk_color);
}

.seeting_modal .modal-body::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

.setng_modal_col1_top {
    padding: 7px 28px 7px 15px;
    border-top-left-radius: var(--_bdr_radius_md);
    border-top-right-radius: var(--_bdr_radius_md);
    border: var(--common_border);
    border-bottom: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    /*background-color: var(--tbl_header_bg);*/
    background-color: var(--_setting_card_bg);
}

.smc_heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.setng_modal_col1_top h4 {
    font-weight: var(--c-font-weight-medium);
    font-size: var(--c-font-size-100);
    color: var(--_darkgray2_color);
    width: 100%;
    margin: 0;
}

.stng_dropinnerlist {
    position: relative;
    margin: 5px 0;
    overflow: auto;
    max-height: 270px;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary_bk_color) transparent;
}

    .stng_dropinnerlist::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
    }

    .stng_dropinnerlist::-webkit-scrollbar {
        width: 5px;
        height: 6px;
        background-color: transparent;
    }

    .stng_dropinnerlist::-webkit-scrollbar-thumb {
        border-radius: 11px;
        background-color: var(--secondary_bk_color);
    }

    .stng_dropinnerlist::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

.stng_inner_tab_box i:nth-child(1) {
    min-width: 20px;
    max-width: 20px;
    text-align: center;
}

.stng_inner_tab_box .stng_mainmenu_text {
    font-weight: var(--c-font-weight-medium);
    font-size: var(--c-font-size-80-experimental);
    color: var(--_darkgray2_color);
    padding: 5px 16px;
    border-radius: var(--_bdr_radius_md);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.stng_inner_tab_box .stng_mainmenu_text span {
    color: var(--_darkgray2_color);
}
.dark .stng_mainmenu_text[aria-expanded="true"] span {
    color: #545454;
}

.stng_inner_tab_box .stng_mainmenu_text:hover span {
    color: #000000;
}
.dark .stng_inner_tab_box .stng_mainmenu_text:hover span {
    color: #ffffff;
}
.dark .stng_inner_tab_box .stng_mainmenu_text:hover{
    color: #ffffff;
}

.stng_inner_tab_box .stng_mainmenu_text:hover {
    background-color: #f1f1f1;
    color: #000000;
}
.dark .stng_inner_tab_box .stng_mainmenu_text:hover {
    background: rgba(255, 255, 255, .09);
    color: #ffffff;
}

    .stng_inner_tab_box .stng_mainmenu_text.active {
        background-color: #f1f1f1;
    }

.nav-link.stng_innermenu_text {
    padding-left: 35px !important;
}

    .nav-link.stng_innermenu_text:hover {
        background-color: #f1f1f1;
    }

.stng_inner_tab_box li a[aria-expanded="false"] .dropicon {
    transform: rotate(0deg);
    position: absolute;
    right: 15px;
    transition: 0.5s;
}

.stng_inner_tab_box li a[aria-expanded="true"] .dropicon {
    transform: rotate(90deg);
    position: absolute;
    right: 15px;
    fill: var(--_color_light) !important;
    transition: 0.5s;
}

.stng_inner_tab_box {
    border: var(--common_border);
    padding: 15px;
    /*background: var(--_color_white);*/
    background: var(--_setting_card_bg2);
    border-bottom-left-radius: var(--_bdr_radius_md);
    border-bottom-right-radius: var(--_bdr_radius_md);
}

    .stng_inner_tab_box .nav {
        gap: 2px;
        width: 100%;
    }

    .stng_inner_tab_box .nav-pills .nav-link {
        font-weight: var(--c-font-weight-medium);
        font-size: var(--c-font-size-80-experimental);
        color: var(--_darkgray2_color);
        padding: 5px 16px;
        text-align: inherit;
        width: 100%;
        display: flex;
        gap: 9px;
        align-items: center;
        border-radius: var(--_bdr_radius_md);
    }

        .stng_inner_tab_box .nav-pills .nav-link:hover {
            background-color: #f1f1f1;
            color: #000000;
        }
        .dark .stng_inner_tab_box .nav-pills .nav-link:hover {
            background: rgba(255, 255, 255, .09);
            color: #fff;
        }

            .stng_inner_tab_box .nav-pills .nav-link.active, .stng_inner_tab_box .nav-pills .show > .nav-link {
                color: #303030;
                background-color: #f1f1f1;
                border-radius: var(--_bdr_radius_md);
            }
.dark .stng_inner_tab_box .nav-pills .nav-link.active, .dark .stng_inner_tab_box .nav-pills .show > .nav-link {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

            .stng_inner_tab_box .nav-pills .nav-link.active i {
                font-weight: 900;
            }

.stng_p_top {
    margin: 28px 0;
}

    .stng_p_top h2 {
        font-size: var(--c-font-size-300);
        font-weight: var(--c-font-weight-bold);
        color: var(--text_dark_color);
        margin: 0;
    }
        .stng_p_top h2 span {
            font-size: var(--c-font-size-300);
            font-weight: var(--c-font-weight-bold);
            color: var(--text_dark_color);
            margin: 0;
        }

        .stng_p_top i {
            color: var(--text_dark_color);
        }

.stng_tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0px 0 0px 0;
    flex-wrap: wrap;
}

.stng_tab {
    transition: 0.5s;
    border-radius: var(--_bdr_radius_md);
}

    .stng_tab a {
        color: var(--_darkgray2_color);
        font-weight: var(--c-font-weight-medium);
        font-size: var(--c-font-size-80-experimental);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 14px;
    }

        .stng_tab a:hover {
            color: #323232;
        }

    .stng_tab.active {
        color: #323232;
        background-color: #D9DCE0;
        border-radius: var(--_bdr_radius_md);
    }

        .stng_tab.active a {
            color: #323232;
        }

    .stng_tab:hover {
        color: #323232;
        background-color: #D9DCE0;
    }
.gen_cmn_box_new {
    border-radius: var(--_bdr_radius_md);
    border: var(--common_border);
    /*background: var(--_color_white);*/
    /*background: var(--new_card_bg);*/
    background: var(--_setting_card_bg2);
    margin: 0rem 0 1.25rem 0;
    box-shadow: var(--_shadow_xs);
}

    .gen_cmn_box_new:focus-visible {
        outline: none;
    }

.gen_cmn_box_top_new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: var(--common_border);
    padding: 1rem 1rem;
}

    .gen_cmn_box_top_new h4 {
        font-size: var(--c-font-size-200);
        color: var(--text_dark_color);
        margin: 0 0 5px 0;
        font-weight: 600;
    }

    .gen_cmn_box_top_new p {
        color: var(--_color_semilight);
        margin: 0;
        font-weight: 500;
        font-size: var(--c-font-size-75);
        font-weight: var(--c-font-weight-regular);
    }

    .gen_cmn_box_top_new .link-primary {
        text-decoration: none;
        font-size: var(--c-font-size-80-experimental);
        color: #005bd3 !important;
        min-width: 80px;
    }

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

.gen_cmn_box_body_new {
    padding: 1rem 1rem;
}

    .gen_cmn_box_body_new .link-primary {
        font-size: var(--c-font-size-80-experimental);
        color: #005bd3 !important;
    }

    .gen_cmn_box_body_new .header_search {
        background-color: var(--_bg_dark);
    }

    .gen_cmn_box_body_new .serchinput .btn {
        background-color: var(--_bg_dark);
        border-radius: 11px;
    }

.waylay_img {
    width: 100%;
    position: relative;
    border-radius: 10px;
}

    .waylay_img svg {
        width: 100%;
        border-radius: 15px;
        box-shadow: 8px 8px 28.8px 0px #00000010;
    }

    .waylay_img .svg_color {
        fill: var(--_primary_color);
    }

    .waylay_img .svg_color2 {
        fill: var(--_primary_color);
        opacity: 0.1;
    }
    .waylay_img .svg_bg1 {
        fill: var(--_bg_dark);
    }
    .waylay_img .svg_bg2 {
        fill: var(--_bg_light);
    }
    .waylay_img .svg_sidebar {
        fill: var(--menu_bg);
    }

.gen_cmn_box_new .gen_c_selected {
    font-size: var(--c-font-size-100);
    color: var(--_color_dark);
    font-weight: 500;
    text-overflow: ellipsis;
    max-width: 270px;
    overflow: hidden;
    white-space: nowrap;
}

.gen_cntnt_row {
    display: flex;
    margin: 0px 0 1rem 0;
    width: 100%;
    gap: 5px;
    flex-direction: column;
}
.input_md {
    max-width: 300px;
}

.gen_cmn_box_new label {
    color: var(--_color_semilight);
    font-size: var(--c-font-size-75);
    font-weight: 500;
    width: 100%;
    max-width: fit-content;
}

.gen_cmn_box_new .form-select, .gen_cmn_box_new .form-control, .gen_cmn_box_top_new .form-select, .gen_cmn_box_new textarea {
    min-height: 38px;
    max-height: 38px;
    font-size: var(--c-font-size-80-experimental);
    border: var(--common_border);
    color: var(--_color_dark);
    /*background-color: var(--new_input_bg);*/
    background-color: var(--icon_bg_new) !important;
    font-weight: 500;
    border-radius: var(--_bdr_radius_md);
    width: 100%;
}
.gen_cmn_box_new .RefreshToken{
    width: auto;
}

.gen_cmn_box_new textarea {
    min-height: 100px !important;
}

.color_themes .top_round_icon {
    max-width: 30px;
    min-width: 30px;
    min-height: 30px;
    max-height: 30px;
}

.gen_cntnt_row.gcr_map .top_round_icon {
    max-width: 30px;
    min-width: 30px;
    min-height: 30px;
    max-height: 30px;
}

    .gen_cntnt_row.gcr_map .top_round_icon i {
        font-size: var(--c-font-size-75);
    }

.gen_cntnt_row.gcr_map .form-control {
    max-width: 317px;
}

.mob_warn {
    background-color: #FEF2F2;
    color: #DD2929;
    border-radius: var(--_bdr_radius_md);
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 20px;
    font-size: var(--c-font-size-75);
    margin: 10px 0 0 0;
}

    .mob_warn .link-primary {
        text-decoration: underline;
    }


.color_grid {
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
    background-color: var(--_primary_color);
    border-radius: var(--_bdr_radius_sm);
}

.color_grid2 {
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
    background-color: var(--_primary_color_light);
    border-radius: var(--_bdr_radius_sm);
}

.colorplates {
    display: flex;
    gap: 5px;
    width: max-content;
    border-radius: var(--_bdr_radius_sm);
    flex-wrap: wrap;
}

.color_plate {
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    display: block;
    border-radius: var(--_bdr_radius_sm);
    margin: 0 !important;
}

    .color_plate.red {
        background-color: #BB5380;
    }

    .color_plate.ornge {
        background-color: #EB7942;
    }

    .color_plate.ylow {
        background-color: #F2B840;
    }

    .color_plate.green {
        background-color: #5FC74D;
    }

    .color_plate.lightgreen {
        background-color: #66D9D2;
    }

    .color_plate.blue {
        background-color: #0078D7;
    }

    .color_plate.skyblue {
        background-color: #04ADF2;
    }

    .color_plate.pink {
        background-color: #EA36BE;
    }

    .color_plate.purple {
        background-color: #824BF4;
    }

    .color_plate.black {
        background-color: #14142A;
    }

.cl-custom-check.color_plate_input {
    display: none;
}

    .cl-custom-check.color_plate_input + .cl-custom-check-label.color_plate {
        border-radius: var(--_bdr_radius_sm);
    }

    .cl-custom-check.color_plate_input:checked + .cl-custom-check-label.color_plate {
        background-image: url(/assets/images/icons/checkIcon.svg) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        border: none;
    }

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

    .color_themes span {
        color: var(--_color_dark);
        font-weight: 500;
        font-size: var(--c-font-size-75);
    }

.grn_cmn_bottom {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 1rem;
}
    .grn_cmn_bottom .btn.btn-primary, .grn_cmn_bottom .btn.btn-secondary {
        min-width: 80px;
        padding: 8px;
    }

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

.sg_chng_img {
    background-color: #F9FAFB;
    border-radius: 7px;
    width: 100%;
    height: 100%;
    max-width: 120px;
    max-height: 120px;
    min-width: 120px;
    min-height: 120px;
    border: var(--common_border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: var(--_color_semilight);
    font-size: var(--c-font-size-75);
    text-align: center;
}

.sg_img_up span {
    color: var(--_color_semilight);
    font-size: var(--c-font-size-75);
    max-width: 170px;
}

.mob_layout .geo_input input {
    max-width: 280px;
    min-width: 280px;
}

.geo_input_icon .top_round_icon {
    min-width: 34px;
    max-width: 34px;
    max-height: 34px;
    min-height: 34px;
}

.geo_input_icon {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .geo_input_icon svg path {
        fill: var(--_color_dark);
    }

.dl_boxs {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.dl_box {
    width: 100%;
    max-width: 233px;
    border: var(--common_border);
    border-radius: var(--_bdr_radius_md);
    min-height: 268px;
}

.dlbox_top {
    padding: 13px 17px;
    border-bottom: var(--common_border);
    /*background-color: var(--_bg_dark);*/
    background-color: var(--new_input_bg);
    border-top-left-radius: var(--_bdr_radius_md);
    border-top-right-radius: var(--_bdr_radius_md);
}

.dl_box .top_round_icon {
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
}

.dlbox_top h4 {
    margin: 0;
    font-weight: 600;
    font-size: var(--c-font-size-80-experimental);
    color: var(--text_dark_color);
}

.dlbox_cntr {
    position: relative;
    height: 130px;
    background-image: url(/assets/images/dl_box_img.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    border-bottom: var(--common_border);
}
   .dark .dlbox_cntr{filter: invert(1);}

    .dlbox_icon {
        display: flex;
        align-items: center;
        gap: 10px;
        position: absolute;
        top: 6px;
        right: 6px;
    }

.dlbox_bottom {
    padding: 13px 17px;
}

.dlbox_bottom_inner {
    display: flex;
    gap: 15px;
    justify-content: space-between;
}

    .dlbox_bottom_inner span {
        font-size: var(--c-font-size-75);
        color: var(--_color_semilight);
        font-weight: 600;
        white-space: nowrap;
    }

    .dlbox_bottom_inner small {
        font-size: var(--c-font-size-75);
        color: var(--text_dark_color);
        font-weight: 600;
    }

.dl_box_empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--_color_semilight);
    transition: 0.5s;
}

.dl_box_added {
    color: var(--text_dark_color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    font-size: var(--c-font-size-75);
    gap: 0.5rem;
}

    .dl_box_added svg path {
        fill: var(--_color_light);
    }

.dl_box_empty:hover {
    background-color: #F3F8FD;
    border: 1.5px dashed #0d6efd;
    border-radius: var(--_bdr_radius_md);
}

.stng_gen_inner .nav.nav-pills {
    margin: 0 0 25px 0;
    gap: 9px;
}

.stng_gen_inner .nav-pills .nav-link {
    color: var(--_darkgray2_color);
    border-radius: var(--_bdr_radius_md);
    padding: 5px 16px;
    font-weight: var(--c-font-weight-medium);
    font-size: var(--c-font-size-80-experimental);
}

    .stng_gen_inner .nav-pills .nav-link.active, .stng_gen_inner .nav-pills .nav-link:hover, .stng_gen_inner .nav-pills .show > .nav-link {
        color: var(--text_dark_color);
        background-color: #D9DCE0;
        color: #323232;
    }

.mob_app_boxs {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
}

.mob_app_box {
    border-radius: 5px;
    border: var(--common_border);
    background: var(--_bg_dark);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .mob_app_box.mob_app_box_empty {
        border: 1px dashed #D9DCE0;
    }

        .mob_app_box.mob_app_box_empty small {
            display: none;
        }

.mob_app_box_empty a {
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.mob_app_box .top_round_icon {
    max-width: 21px;
    min-width: 21px;
    min-height: 21px;
    max-height: 21px;
    position: absolute;
    top: 5px;
    right: 5px;
}

    .mob_app_box .top_round_icon i {
        font-size: var(--c-font-size-75);
    }

.ma_center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    border-radius: 4px 4px 0px 0px;
}

    .ma_center i {
        font-size: 24px;
        color: var(--text_dark_color);
    }

.mob_app_box span {
    border-radius: 0px 0px 4px 4px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    background: #D9DCE0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 20px;
    color: #323232;
}

.mob_app_box .mdv_icon {
    display: none;
}

.mobile_app_row {
    align-items: end;
    row-gap: 35px;
}

.mobile_drag_viewp {
    border-radius: 11px;
    background: #D9DCE0;
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 100px;
}

.mobile_drag_viewc {
    width: 100%;
    max-width: 235px;
    height: 455px;
    background: #111827;
    border-radius: 11px;
    padding: 0px 0 0px 0;
}

.mdv_inner {
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.mdv_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 180px;
    margin: 0 auto;
    width: 100%;
    padding: 20px 0 0 0;
}

    .mdv_top h6 {
        font-size: var(--c-font-size-100);
        font-weight: 700;
        color: #fff;
        margin: 0;
    }

.mdv_round_icon {
    color: #fff;
    font-size: var(--c-font-size-70-experimental);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D9D9D9;
    border-radius: 50%;
    min-width: 30px;
    min-height: 30px;
    width: 30px;
    height: 30px;
}

.mdv_grid {
    display: grid;
    grid-gap: 7px;
    max-width: 200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit,minmax(85px,1fr));
}

    .mdv_grid .mob_app_box {
        border-radius: 8px;
        width: 100%;
        height: 49px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #7364FF;
        color: #fff;
        font-size: var(--c-font-size-80-experimental);
        border: transparent
    }

        .mdv_grid .mob_app_box i {
            font-size: var(--c-font-size-200);
            color: #fff;
        }

        .mdv_grid .mob_app_box.mob_app_box_empty {
            border-radius: 8px;
            border: 1px dashed #D9D9D9;
            background-color: transparent;
        }

            .mdv_grid .mob_app_box.mob_app_box_empty small {
                font-size: var(--c-font-size-80);
                color: #fff;
                display: block;
            }

            .mdv_grid .mob_app_box.mob_app_box_empty .link-primary {
                display: none;
            }

        .mdv_grid .mob_app_box .top_round_icon {
            display: none;
        }

        .mdv_grid .mob_app_box span {
            display: none;
        }

        .mdv_grid .mob_app_box .mdv_icon {
            display: block;
        }

.mdv_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #D9D9D9;
    padding: 15px 10px 15px 10px;
}

    .mdv_bottom .top_round_icon {
        display: none;
    }

    .mdv_bottom span {
        display: none;
    }

    .mdv_bottom .ma_center {
        border-radius: 5px;
        min-width: 30px;
        min-height: 30px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F9FAFB;
    }

        .mdv_bottom .ma_center i {
            color: #3D3E3D;
            font-size: var(--c-font-size-80-experimental);
        }

    .mdv_bottom .mob_app_box.mob_app_box_empty {
        border-radius: 5px;
        color: #fff;
        font-size: var(--c-font-size-80-experimental);
        border: 1px dashed #D9D9D9;
        background-color: #3D3E3D;
        min-width: 30px;
        min-height: 30px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .mdv_bottom .mob_app_box.mob_app_box_empty .link-primary {
            display: none;
        }

        .mdv_bottom .mob_app_box.mob_app_box_empty small {
            display: block;
            color: #fff;
        }

.mdv_subtiitle1 {
    position: absolute;
    color: var(--text_dark_color);
    font-size: var(--c-font-size-80-experimental);
    font-weight: 700;
    top: 250px;
    right: -83px;
}

.mdv_subtiitle2 {
    position: absolute;
    color: var(--text_dark_color);
    font-size: var(--c-font-size-80-experimental);
    font-weight: 700;
    bottom: 35px;
    right: -50px;
}

.center_arrow {
    position: absolute;
    left: -112px;
    top: 205px;
    text-align: center;
    max-width: 100px;
}

    .center_arrow h6 {
        font-size: var(--c-font-size-80-experimental);
        font-weight: 700;
        margin: 0;
        color: var(--_color_light);
    }

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

    .epd_modal_body .epd_modal_input .top_round_icon {
        border-radius: 10px;
        max-width: 37px;
        min-width: 37px;
        max-height: 37px;
        min-height: 37px;
    }


.nrml_check {
    display: flex;
    column-gap: 15px;
    align-items: center;
    justify-content: space-between;
}

    .nrml_check label {
        width: fit-content;
    }

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

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

    .auto_lebal .form-control {
        max-width: 42px;
        max-height: 38px;
    }

.pymnt_tbl_box .gen_cmn_box_top_new {
    border-bottom: transparent;
}

table .form-check-input[type=checkbox] {
    height: 12px;
}

.pymnt_tbl_box th:last-child, .pymnt_tbl_box td:last-child {
    text-align: initial !important;
}

.pymnt_tbl_box tr td:nth-child(1) .form-control {
    min-width: 120px;
}

.pymnt_tbl_box tr td:nth-child(4) .form-control {
    max-width: 70px;
}


.opn_hrs_setting {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
}

    .opn_hrs_setting .ohs_date {
        align-items: center;
    }

.ohs_day {
    display: flex;
    min-width: 250px;
    justify-content: space-between;
    align-items: center;
}

.ohs_row {
    flex: 1;
}

.opn_day select.form-select {
    background-color: var(--_bg_light);
    min-width: 125px;
}

.ohs_dates {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
    justify-content: space-between;
}

    .ohs_dates select.form-select {
        background-color: var(--_bg_light);
    }

.ohs_row a {
    color: currentColor;
}

.ohs_date_group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ohs_date {
    display: flex;
    gap: 0.25rem;
}

.ohs_day h6 {
    font-size: var(--c-font-size-80-experimental);
    margin-bottom: 0;
    color: var(--text_dark_color);
}

.ohs_action i {
    color: var(--text_dark_color);
}

.comp_oh div.opn_hrs_setting:nth-child(odd) {
    background-color: var(--_bg_dark);
}

.cmn_box_chck {
    display: flex !important;
    align-items: center;
    gap: 5px;
}

.cmn_box_chck {
    flex-direction: column;
}

.cmn_box_switch {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 4px;
}

    .cmn_box_switch input {
        margin: 0px !important;
    }

    .cmn_box_switch label {
        width: calc(100% - 35px) !important;
        max-width: fit-content;
    }

.cmn_chck_switch_list {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0 0 15px 0;
}

    .cmn_chck_switch_list .cmn_box_chck {
        max-width: 290px;
        width: 100%;
    }

.stng_ex_upr .form-switch {
    padding: 0;
}

.form-switch .form-check-input[type=checkbox] {
    min-width: auto;
    min-height: auto;
    max-width: inherit;
    max-height: inherit;
}

.stng_ex_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px 0;
}

    .stng_ex_wrap i {
        color: var(--_primary_text_color);
    }

    .stng_ex_wrap .ex_label {
        width: 100%;
        max-width: 70px;
    }

.stng_ex_inner {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 700px;
}

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

    .stng_ex_upr .form-select {
        max-width: 150px;
        min-width: 150px;
    }

    .stng_ex_upr input {
        max-width: 500px;
    }

.stng_ex_wrap .form-switch {
    min-width: 150px;
}

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


.stng_tabl i {
    color: var(--text_dark_color);
}

.stng_tabl table th:last-child, .stng_tabl table td:last-child {
    text-align: left;
}

.stng_tabl table tr td:nth-child(2), .stng_tabl table tr th:nth-child(2) {
    text-align: end;
}

.gen_cmn_box_new .top_round_icon {
    border: transparent;
}

    .gen_cmn_box_new .top_round_icon i {
        color: var(--_color_dark);
    }

    .gen_cmn_box_new .top_round_icon.active i {
        color: #fff;
    }

.inport_top_right {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .inport_top_right .form-control, .inport_top_right .form-select {
        background-color: var(--_color_white);
    }

.drug_sheet_col {
    width: 100%;
    height: calc(100vh - 500px);
    min-height: 150px;
    border-radius: var(--_bdr_radius_md);
    border: 1px dashed #949494;
    /*background-color: var(--_color_white);*/
    background-color: var(--new_input_bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px 0;
    position: relative;
    transition: 0.5s;
}

    .drug_sheet_col:hover .drug_sheet_col_overlay {
        display: flex;
    }

.drug_sheet_col_overlay {
    position: absolute;
    background-color: var(--_primary_color_light);
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    cursor: pointer;
    border-radius: var(--_bdr_radius_md);
}

    .drug_sheet_col_overlay .drug_icon i {
        color: var(--_primary_text_color);
        font-size: var(--c-font-size-300);
    }

    .drug_sheet_col_overlay h4 {
        color: var(--_primary_text_color);
        font-size: var(--c-font-size-300);
    }

    .drug_sheet_col_overlay p {
        color: var(--_primary_text_color);
        font-size: var(--c-font-size-100);
    }

.drug_sheet:hover .link-primary, .drug_sheet:hover i {
    color: var(--_primary_text_color);
}

.drug_sheet i {
    color: #005bd3;
    font-size: var(--c-font-size-300);
}

.drug_sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

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

.inport_top_right {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .inport_top_right .form-control, .inport_top_right .form-select {
        background-color: var(--_color_white);
    }

.drug_sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.inport_box .form-control, .inport_box .form-select {
    width: 100%;
    max-width: 320px;
    font-size: var(--c-font-size-75);
}

.inport_box i {
    color: #949494;
}

.imp_txt_input {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 15px 0;
}

.inport_box .form-select {
    margin: 0 0 15px 0;
}

.inport_box h4 {
    color: var(--text_dark_color);
    font-size: var(--c-font-size-100);
    font-weight: var(--c-font-weight-semibold);
    min-height: 40px;
}

.link_mdl {
    z-index: 9999 !important;
}

.linkcan_list {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    margin: 0 0 1.5rem 0;
}

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

.linkcan_list span {
    font-size: var(--c-font-size-100);
    color: var(--text_dark_color);
    font-weight: var(--c-font-weight-semibold);
}

.linkcan_list a {
    font-size: var(--c-font-size-100);
    font-weight: var(--c-font-weight-semibold);
}

.linkcan_list small {
    font-size: var(--c-font-size-100);
    color: var(--_darkgray2_color);
}

.links_canvas_bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.linkcan_list .top_round_icon {
    min-height: 32px;
    min-width: 32px;
    max-width: 32px;
    max-height: 32px;
}

.stng_ver_rows span {
    color: var(--text_dark_color);
    font-size: var(--c-font-size-80-experimental);
    font-weight: 500;
    width: 100%;
    display: block;
}

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

.acc_inner_box .stng_mship_tbl_btn {
    justify-content: center;
    max-width: 80px;
    margin-left: auto;
}
.stng_mship_tbl_btn a{cursor: pointer;}

.stng_mship_tbl_btn i {
    color: var(--text_dark_color);
    width: 20px;
    text-align: center;
}

.gen_cntcttab_row p {
    margin: 0;
    font-size: var(--c-font-size-75);
    color: var(--_color_semilight);
}

    .gen_cntcttab_row p b {
        color: var(--_color_semilight);
    }

.memcon_cloud_input {
    position: relative;
}

.slct_mail_icon {
    position: absolute;
    top: 7px;
    left: 15px;
}

.gen_cntcttab_row select {
    text-indent: 25px;
}

.allsubs_gen_box .form-check.form-switch {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

.fix_inner_chck {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

    .fix_inner_chck span {
        font-size: var(--c-font-size-80-experimental);
        white-space: nowrap;
    }
.lni_tabs .nav {
    margin: 0 0 30px 0;
    gap: 5px;
}

.lni_tabs .nav-link {
    border-radius: var(--_bdr_radius_md);
    padding: 5px 16px;
    font-weight: var(--c-font-weight-medium);
    font-size: var(--c-font-size-80-experimental);
    color: var(--_darkgray2_color);
}

    .lni_tabs .nav-link:hover {
        background-color: #D9DCE0;
        color: #323232;
        border-radius: var(--_bdr_radius_md)
    }

.lni_tabs .nav .nav-item .nav-link.active {
    border-radius: var(--_bdr_radius_md);
    background-color: #D9DCE0;
    color: #323232;
}

.finan_revenue_tbl table tr th:last-child {
    text-align: end !important;
}

.finan_revenue_tbl table tr td:last-child {
    text-align: end !important;
}

.sq_box {
    min-width: 38px;
    min-height: 38px;
    max-width: 38px;
    max-height: 38px;
    border: var(--common_border);
    border-radius: var(--_bdr_radius_sm);
    display: block;
}

    .sq_box.grannycolor {
        background-color: #DEF7EC;
    }

    .sq_box.lightcolor {
        background-color: #FEECDC;
    }

    .sq_box.lightredcolor {
        background-color: #FDE8E8;
    }

    .sq_box.yellow {
        background-color: #FF993A;
    }

    .sq_box.red {
        background-color: #DD2929;
    }

    .sq_box.blue {
        background-color: #0078D7;
    }

    .sq_box.dgreen {
        background-color: #718A36;
    }

    .sq_box.lgreen {
        background-color: #C4CF59;
    }

    .sq_box.orng {
        background-color: #FF993A;
    }

    .sq_box.darkred {
        background-color: #DD2929;
    }

    .sq_box.darkblue {
        background-color: #0078D7;
    }

    .sq_box.darkgreen {
        background-color: #046C4E;
    }

.sm_fc {
    max-width: 75px;
    min-width: 75px !important;
}

.finan_revenue_tbl .form-control, .finan_revenue_tbl .form-select {
    min-width: max-content;
}

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

.pln_act_cycle_col {
    margin: 0 0 10px 0;
}

.auto_lebal label {
    width: fit-content;
    min-width: fit-content;
}

.pln_act_cycle_col h6 {
    font-size: var(--c-font-size-80-experimental);
    color: var(--text_dark_color);
    margin: 0 0 4px 0;
    font-weight: var(--c-font-weight-semibold);
}

.coc_tabs .nav {
    margin: 0 0 25px 0;
    gap: 5px;
}

.coc_tabs .nav-link {
    border-radius: var(--_bdr_radius_md);
    padding: 5px 16px;
    font-weight: var(--c-font-weight-medium);
    font-size: var(--c-font-size-80-experimental);
    color: var(--_darkgray2_color);
}

    .coc_tabs .nav-link:hover {
        background-color: #D9DCE0;
        color: #323232;
        border-radius: var(--_bdr_radius_md)
    }

.coc_tabs .nav .nav-item .nav-link.active {
    border-radius: var(--_bdr_radius_md);
    background-color: #D9DCE0;
    color: #323232;
}

.md_fc {
    max-width: fit-content;
    min-width: fit-content;
}

.prev_top_btn {
    display: flex;
    align-items: center;
    gap: 10px;
}
    .prev_top_btn input.form-control {
        background-color: transparent !important;
    }

/* Keep the search/filter controls usable when a card subtitle is long.
   The title text wraps instead of squeezing the search input
   (e.g. Planner > Activities, whose subtitle runs several lines). */
.gen_cmn_box_top_new {
    flex-wrap: wrap;
}

    .gen_cmn_box_top_new .prev_top_btn {
        flex-shrink: 0;
    }

        .gen_cmn_box_top_new .prev_top_btn .search_input_new {
            min-width: 240px;
        }


    .bg_img_box {
        background-color: #E7E7E7;
        width: 100%;
        border-radius: var(--_bdr_radius_md);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        padding: 1rem;
        cursor: pointer;
    }

    .bg_img_box i, .bg_img_box a, .bg_img_box p {
        color: var(--_primary_color);
        font-size: var(--c-font-size-80-experimental);
        margin: 0;
    }

    .bg_img_box span {
        font-size: var(--c-font-size-80-experimental);
    }

    .bg_img_box:hover i, .bg_img_box:hover a, .bg_img_box:hover p {
        color: #005bd3;
    }

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

    .drop_box_new p {
        color: var(--_color_semilight);
        font-size: var(--c-font-size-80-experimental);
        line-height: 1.2;
        margin: 0;
        max-width: 200px;
    }

.bg_img_box_new {
    min-width: 120px;
    max-width: 120px;
    min-height: 120px;
    max-height: 120px;
    background-color: var(--tbl_header_bg);
    border: var(--common_border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    border-radius: 7px;
}

    .bg_img_box_new img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 7px;
    }

    .bg_img_box_new:hover {
        border-radius: 7px;
        border: 1px dashed #0078D7;
        background: rgba(0, 120, 215, 0.05);
    }

    .bg_img_box_new i, .bg_img_box_new a, .bg_img_box_new p {
        color: #0078D7;
        font-size: var(--c-font-size-75);
        margin: 0;
    }

.bodyfit_tabs .nav {
    margin: 0 0 25px 0;
    gap: 5px;
}

.bodyfit_tabs .nav-link {
    border-radius: var(--_bdr_radius_md);
    padding: 5px 16px;
    font-weight: var(--c-font-weight-medium);
    font-size: var(--c-font-size-80-experimental);
    color: var(--_darkgray2_color);
}

    .bodyfit_tabs .nav-link:hover {
        background-color: #D9DCE0;
        color: #323232;
        border-radius: var(--_bdr_radius_md)
    }

.bodyfit_tabs .nav .nav-item .nav-link.active {
    border-radius: var(--_bdr_radius_md);
    background-color: #D9DCE0;
    color: #323232;
}

.body_loc_tbl tr td, .body_loc_tbl tr th {
    text-align: left !important;
}

.pa_product_tabs .nav {
    margin: 0 0 25px 0;
    gap: 5px;
}

.pa_product_tabs .nav-link {
    border-radius: var(--_bdr_radius_md);
    padding: 5px 16px;
    font-weight: var(--c-font-weight-medium);
    font-size: var(--c-font-size-80-experimental);
    color: var(--_darkgray2_color);
}

    .pa_product_tabs .nav-link:hover {
        background-color: #D9DCE0;
        color: #323232;
        border-radius: var(--_bdr_radius_md)
    }

.pa_product_tabs .nav .nav-item .nav-link.active {
    border-radius: var(--_bdr_radius_md);
    background-color: #D9DCE0;
    color: #323232;
}

.li_inv_tabs .nav {
    margin: 0 0 25px 0;
    gap: 5px;
}

.li_inv_tabs .nav-link {
    border-radius: var(--_bdr_radius_md);
    padding: 5px 16px;
    font-weight: var(--c-font-weight-medium);
    font-size: var(--c-font-size-80-experimental);
    color: var(--_darkgray2_color);
}

    .li_inv_tabs .nav-link:hover {
        background-color: #D9DCE0;
        color: #323232;
        border-radius: var(--_bdr_radius_md)
    }

.li_inv_tabs .nav .nav-item .nav-link.active {
    border-radius: var(--_bdr_radius_md);
    background-color: #D9DCE0;
    color: #323232;
}

#tblMaintainEntities_ExerciseGroup select, #tblMaintainEntities_ExerciseGroup .form-control {
    min-width: max-content;
}

.stng_tbl_odd thead tr th:last-child, .stng_tbl_odd tbody tr td:last-child {
    text-align: right !important;
}

.stng_tbl_even thead tr th, .stng_tbl_even tbody tr td {
    text-align: left !important;
}


.play_link {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

    .play_link i {
        color: var(--text_dark_color);
    }

.playinput_icon {
    position: absolute;
    right: 10px;
    top: 6px;
}

    .playinput_icon i {
        color: var(--text_dark_color);
    }

.chck_screen_head {
    font-size: var(--c-font-size-100);
    color: var(--_darkgray_color);
    text-decoration: underline;
    margin: 0 0 20px 0;
}

.int_box_grid {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}
.int_box {
    border-radius: var(--_bdr_radius_md);
    border: var(--common_border);
    /*background: var(--_color_white);*/
    background-color: var(--_setting_card_bg2);
    box-shadow: var(--_shadow_xs);
    gap: 10px;
}
.int_box_body {
    padding: 1rem;
    border-bottom: var(--common_border);
    min-height: 100px;
}
.int_box_body p {
    color: var(--_color_semilight);
    margin: 0;
    font-size: var(--c-font-size-75);
    font-weight: var(--c-font-weight-regular);
}
.int_box_logo {
    min-height: 68px;
}
.int_box_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100px;
    max-height: 35px;
}
.int_box_logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 1rem;
    border-bottom: var(--common_border);
}
.int_box_inner_btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem;
    justify-content: space-between;
    gap: 10px;
}
.int_box_inner_btn .btn, .int_box_inner_btn .nav {
    width: 100%;
    font-size: var(--c-font-size-80-experimental);
}
    .int_box_inner_btn .btn.btn-secondary {
        /*background-color: var(--_bg_dark);*/
        background-color: var(--icon_bg_new);
    }
.int_box_inner_btn .btn.btn-secondary:hover {
    color: var(--text_dark_color) !important;
    background-color: var(--round_icon_bg);
}


.test_box {
    display: flex;
    background-color: var(--tbl_header_bg);
    align-items: center;
    width: 100%;
}

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

.test_box span {
    font-size: var(--c-font-size-75);
    font-weight: 500;
    color: var(--text_dark_color);
    max-width: 70px;
    min-width: 70px;
    line-height: 1.2;
    background-color: var(--tbl_header_bg);
    padding: 8px 10px;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.test_box li:nth-child(1) span {
    padding: 8px 10px 8px 16px;
}

.test_box .dlt_icon {
    visibility: hidden !important;
}

.test_box span:hover .dlt_icon {
    color: var(--text_dark_color);
    visibility: visible !important;
}

.test_box_chck {
    display: flex;
    width: 100%;
    align-items: center;
}

.test_col_chck {
    padding: 10px 10px 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 70px;
    min-width: 70px;
}

.test_box_chck .form-select {
    min-width: 60px;
    max-width: 60px;
    min-height: 30px;
    max-height: 30px;
    padding: 4px 6px;
    background-position: right 0.3rem center;
}

.test_col_chck .form-check-input {
    margin: 0px 0;
}

.test_box .top_round_icon {
    max-width: 30px;
    min-width: 30px;
    max-height: 30px;
    min-height: 30px;
}

    .test_box .top_round_icon i {
        font-size: 10px;
    }

.gcb_test {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary_bk_color) transparent;
}

    .gcb_test::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
    }

    .gcb_test::-webkit-scrollbar {
        width: 6px;
        background-color: transparent;
        height: 6px;
    }

    .gcb_test::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: var(--secondary_bk_color)
    }

.modal_upload_box {
    width: 100%;
    height: 200px;
    border: 1px dashed var(--secondary_bk_color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text_dark_color);
    font-size: var(--c-font-size-150) !important;
    border-radius: var(--_bdr_radius_md);
}


.mob_app_box:after {
    content: none;
    position: absolute;
    top: 14px;
}

.box_empty_1:after {
    content: '1';
}

.box_empty_2:after {
    content: '2';
}

.box_empty_3:after {
    content: '3';
}

.box_empty_4:after {
    content: '4';
}

.box_empty_5:after {
    content: '5';
}

.box_empty_6:after {
    content: '6';
}

.box_empty_7:after {
    content: '7';
}

.box_empty_8:after {
    content: '8';
}

.box_empty_9:after {
    content: '9';
}

.box_empty_10:after {
    content: '10';
}

.mdv_bottom .mob_app_box:after {
    top: 4px;
}

.mob_app_box .ma_box_close {
    display: none;
}

.mob_app_box.box_select:hover .ma_box_close {
    display: flex;
    position: absolute;
    top: 5px;
    right: 5px;
}

.mob_app_box.box_select .ma_box_close i {
    font-size: 12px;
}

.mdv_bottom .mob_app_box.box_select:hover .ma_box_close {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #3D3E3D;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mdv_bottom .mob_app_box.box_select:hover .ma_box_close i {
        color: #fff;
        font-size: 7px;
    }

.mob_app_box.disable {
    background-color: #00000075;
    cursor: no-drop;
}

    .mob_app_box.disable span {
        background-color: #00000075;
        color: #ffffffab;
    }

.mob_app_box.box_select {
    position: relative;
}

.mob_app_boxs .mob_app_box {
    cursor: grab;
}

.mdv_grid .mob_app_box.mob_app_box_empty:hover {
    background-color: #3D3E3D;
    border: 1px dashed #000;
}


.cp_multi_selector .select2-container--default .select2-selection--multiple {
    /*background-color: var(--_bg_dark);*/
    background-color: var(--new_input_bg);
    border: var(--common_border);
    color: var(--_color_dark);
    font-size: var(--c-font-size-80-experimental);
    padding: 3px 20px 3px 3px;
    line-height: 1;
}

.cp_multi_selector .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: var(--common_border);
    outline: none;
    background-color: var(--new_input_bg);
}

.select2-dropdown {
    border: var(--common_border) !important;
}

.select2-results__option.select2-results__option--selectable {
    color: var(--_color_dark) !important;
    font-size: var(--c-font-size-80-experimental) !important;
    border: 0 !important;
    /*background-color: var(--_color_white);*/
    background-color: var(--new_input_bg);
}

.select2-dropdown {
    /*background-color: var(--_bg_dark) !important;*/
    background-color: var(--new_input_bg) !important;
}

.seeting_modal .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    /*background-color: var(--_bg_dark) !important;*/
    background-color: var(--icon_bg_new) !important;
    color: var(--_color_dark) !important;
}
.seeting_modal .select2-search.select2-search--dropdown {
    background-color: var(--icon_bg_new) !important;
}

.cp_multi_selector .select2-container--default .select2-selection--multiple .select2-selection__choice {
    /*background-color: var(--_color_white);*/
    background-color: var(--new_input_bg);
    border: none;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 15px;
}

.cp_multi_selector .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 0px;
    padding-right: 0px;
    font-weight: 500;
    font-size: var(--c-font-size-80-experimental);
    color: var(--text_dark_color);
    white-space: break-spaces;
}

.cp_multi_selector .select2-selection.select2-selection--multiple {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}

.cp_multi_selector .select2-selection__choice {
    margin: 0px !important;
}

.cp_multi_selector .select2-selection__rendered {
    display: flex !important;
    gap: 10px;
    flex-wrap: wrap;
}

.select2-search.select2-search--inline {
    display: none !important;
}

.cp_multi_selector .select2-selection.select2-selection--multiple:after {
    content: "";
    background-image: url(/assets/images/icons/drop_icon2.svg);
    background-repeat: no-repeat;
    width: 11px;
    height: 11px;
    background-size: contain;
    right: 15px;
    top: 12px;
    position: absolute;
}

.dark .cp_multi_selector .select2-selection.select2-selection--multiple:after {
    filter: invert(1);
}
.dltconfirm_modal p {
    font-size: var(--c-font-size-200);
    color: var(--text_dark_color);
    margin: 0;
    font-weight: 500;
}

.modal-footer .btn {
    min-width: 90px;
}

.emp_auth_canvas {
    z-index: 9999 !important;
}

.emp_autocanva_list {
    margin: 0 0 15px 0;
    padding: 0 0 15px 0;
    border-bottom: var(--common_border);
}

    .emp_autocanva_list span {
        font-size: var(--c-font-size-100);
        color: var(--text_dark_color);
        font-weight: var(--c-font-weight-semibold);
        margin: 0 0 10px 0;
        display: block;
    }

.ea_chcklist {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    margin: 0 0 20px 0;
}

    .ea_chcklist label {
        font-size: var(--c-font-size-80-experimental);
    }

.modal-body .dlt_model {
    background-color: rgba(0,0,0,0.3);
}

body .modal-fullscreen .modal-header {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

body .form-check-input {
    min-width: 1rem;
    min-height: 1rem;
    max-width: 1rem;
    max-height: 1rem;
}

.tbl_long_text {
    text-overflow: ellipsis;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

.mem_inner_tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
}

    .mem_inner_tabs select {
        min-height: fit-content !important;
        margin: -15px 0 0px 0;
    }

.seeting_modal .input-group.header_search {
    /*background-color: var(--_bg_dark);*/
    background-color: var(--icon_bg_new);
}

.seeting_modal .row.dt-row {
    border: 0;
}

body .seeting_modal .stng_inner_modal .modal-body {
    background-color: var(--_color_white);
    border: 0 !important;
    border-radius: 0 !important;
    padding-right: 0.4rem !important;
    padding-left: 0.4rem !important;
}

body .seeting_modal .stng_inner_modal .modal-content {
    box-shadow: 0 0 0 50vmax rgba(0, 0, 0, 0.5);
}

body .seeting_modal .stng_inner_modal .modal-dialog {
    overflow: visible;
}

body .seeting_modal .stng_inner_modal .modal-header {
    background-color: var(--_bg_dark);
    border-radius: 0 !important;
    border: 0;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

body .seeting_modal .stng_inner_modal .modal-title {
    color: var(--_color_dark) !important;
    font-weight: 600 !important;
    font-size: var(--c-font-size-200) !important;
}

body .seeting_modal .stng_inner_modal .modal-header, body .seeting_modal .stng_inner_modal .modal-footer {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.article_stretch {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.article_zoom {
    transition: all 0.3s;
    transform: scale(1.5);
}

.article_center {
    transition: all 0.3s;
    transform: scale(0.8);
}

.stng_add_img {
    position: relative;
}

    .stng_add_img .show_profile_pop {
        min-width: 130px;
        max-width: 130px;
        min-height: 158px;
        max-height: 158px;
        border-radius: var(--_bdr_radius_md);
        border: 1.5px dashed #0078D7;
        background: rgba(0, 120, 215, 0.05);
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        color: #0078D7;
        padding: 20px;
        text-align: center;
        font-size: var(--c-font-size-100);
        position: relative;
    }

    .stng_add_img img {
        min-width: 130px;
        max-width: 130px;
        min-height: 158px;
        max-height: 158px;
        object-fit: cover;
        border-radius: var(--_bdr_radius_md);
        object-fit: cover;
    }

.is_stng_add_img {
    border: var(--common_border);
    padding: 0px;
    border-radius: var(--_bdr_radius_md);
    overflow: hidden;
    width: 100%;
    background-color: var(--new_input_bg);
}
#Add_Edit_company_profile_canv .stng_add_img {
    max-width: 100%;
    width: 100%;
}
#Add_Edit_company_profile_canv .stng_add_img .show_profile_pop {
    max-width: 100%;
    width: 100%;
}
#Add_Edit_company_profile_canv .stng_add_img .show_profile_pop {
    min-height: 85px;
}

    .is_stng_add_img img {
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
    }

    .stng_add_img_btm {
        width: 100%;
        position: absolute;
        bottom: 0;
        border-radius: 0 0 10px 10px;
        padding: 12px 5px;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--c-font-size-75);
        line-height: 13px;
        color: #fff;
        min-width: 20px;
        min-height: 18px;
    }

    .stng_add_img_top {
        position: absolute;
        top: 7px;
        right: 7px;
        color: #fff;
        min-width: 34px;
        min-height: 18px;
        padding: 4px 7px;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--c-font-size-75);
        line-height: 13px;
        border-radius: 4px;
    }

    .stng_add_imgtext {
        font-size: var(--c-font-size-75);
        color: var(--_color_semilight);
    }

    .top_round_icon.dlt_stngaddimg {
        display: none !important;
        position: absolute;
        top: 2px;
        left: 2px;
        max-width: 30px;
        min-width: 30px;
        max-height: 30px;
        min-height: 30px;
    }

    .is_stng_add_img:hover .dlt_stngaddimg {
        display: flex !important;
    }

    textarea#txtWebDescription {
        resize: none;
    }

    .barcardlist_canv.barcardlist {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        height: fit-content;
        overflow: auto;
        padding: 1rem;
        border: transparent;
        scrollbar-width: thin;
        scrollbar-color: var(--secondary_bk_color) transparent;
    }

    .seeting_modal .top_round_icon:active {
        background-color: var(--_bg_dark) !important;
        color: #323232 !important;
    }

        .seeting_modal .top_round_icon:active i, .seeting_modal .top_round_icon.active i {
            color: #323232 !important;
        }

    .setting_lni_tabs_new {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 0px 28px 0 !important;
    }

        .setting_lni_tabs_new.setting_lni_tabs_new {
            margin: 0 0px 15px 0 !important;
        }

        .setting_lni_tabs_new .lni_tabs_new .nav .nav-item .nav-link {
            padding: 0 !important;
        }

        .setting_lni_tabs_new .lni_tabs_new .nav {
            gap: 15px;
        }

    .cp_table_wrap.tbl_with_headend table.table thead tr th:last-child {
        text-align: end;
    }

    .setting_front_screen {
        padding: 1rem 1rem;
        border-radius: var(--_bdr_radius_md);
        border: var(--common_border);
        background: var(--_color_white);
        margin: 1rem 0 0 0;
        box-shadow: var(--_shadow_xs);
    }

    .search_input_new .input-group {
        /*background-color: var(--_bg_light);*/
        background-color: var(--icon_bg_new);
        padding: 5px;
        flex-wrap: nowrap;
        border: var(--common_border) !important;
        /* Rounded rectangle to match the F4 "search anything" bar (was a 25px pill). */
        border-radius: 12px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .setting_search_new {
        margin: 0 0 24px 0;
    }

        .setting_search_new input {
            background-color: transparent !important;
            border: 0 !important;
        }

    .search_input_new .input-group.search_input_expand {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .search_input_new .bar_search_dropdown {
        top: 45px;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border: var(--common_border) !important;
    }

    .search_input_new input {
        border: 0;
        font-weight: 500;
        font-size: var(--c-font-size-100);
        color: var(--text_dark_color) !important;
    }

        .search_input_new input:focus {
            border: 0;
        }

    .search_input_new .top_round_icon {
        border-radius: var(--_bdr_radius_md) !important;
        padding: 0;
    }

        .search_input_new .top_round_icon:hover {
            background-color: var(--_primary_color_dark);
            color: #fff;
        }

            .search_input_new .top_round_icon:hover i {
                color: #fff;
            }

        .search_input_new .top_round_icon:focus {
            background-color: var(--_primary_color);
        }

            .search_input_new .top_round_icon:focus i {
                color: #fff;
            }

    .search_input_new .search_input_new .input-group {
        max-height: 42px;
    }

    .search_input_new .top_round_icon {
        max-width: 35px;
        min-width: 35px;
        max-height: 35px;
        min-height: 35px;
    }

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

    .front_left_sec {
        max-width: 180px;
        min-width: 180px;
        padding-right: 15px;
        border-right: var(--common_border);
    }

    .front_center_sec {
        max-width: 160px;
        min-width: 160px;
        padding-right: 15px;
        border-right: var(--common_border);
    }

    .front_left_sec .nav-pills .nav-link {
        padding: 10px 16px !important;
        font-size: var(--c-font-size-100) !important;
    }

        .front_left_sec .nav-pills .nav-link i {
            min-width: 20px;
            margin: 0;
            text-align: left;
        }

    .seeting_modal .stng_inner_tab_box a[aria-expanded="true"] {
        background-color: #f1f1f1;
        color: #303030;
        border-radius: var(--_bdr_radius_md);
    }

    .dark .seeting_modal .stng_inner_tab_box a[aria-expanded="true"] {
        background: rgba(255, 255, 255, .09);
        color: #fff;
    }

        .dark .seeting_modal .stng_inner_tab_box a[aria-expanded="true"] span {
            color: #fff;
        }

    .seeting_modal .stng_inner_tab_box a[aria-expanded="true"] i {
        font-weight: 900;
    }

    .front_tabs .nav {
        gap: 2px;
    }

    .front_tabs .nav-pills .nav-link {
        font-weight: var(--c-font-weight-medium);
        width: 100%;
        font-size: var(--c-font-size-80-experimental);
        color: var(--_darkgray2_color);
        padding: 5px 16px;
        display: flex;
        gap: 9px;
        align-items: center;
        border-radius: var(--_bdr_radius_md);
    }

        .front_tabs .nav-pills .nav-link span {
            color: var(--_darkgray2_color);
            font-weight: var(--c-font-weight-medium);
            font-size: var(--c-font-size-80-experimental);
        }

        .front_tabs .nav-pills .nav-link.active, .front_tabs .nav-pills .show > .nav-link {
            color: #303030;
            background-color: #f1f1f1;
            border-radius: var(--_bdr_radius_md);
        }

        .front_tabs .nav-pills .nav-link:hover {
            background-color: #f1f1f1;
            color: #000000;
        }

    .front_small_heading {
        color: var(--_color_semilight);
        font-weight: var(--c-font-weight-medium);
        font-size: var(--c-font-size-80-experimental);
        padding: 0px 16px 4px 16px;
        display: block;
    }

    .front_center_list {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

        .front_center_list li {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .front_center_list .nav-link {
            color: var(--text_dark_color) !important;
            font-weight: 600 !important;
        }

    .dark .front_center_list .nav-link:hover {
        color: #323232 !important;
    }

    .dark .front_center_list .nav-link.active {
        color: #323232 !important;
    }

    .tab_view_box {
        border-radius: var(--_bdr_radius_md);
        border: var(--common_border);
        background: var(--_color_white);
        margin: 0rem 0 1.25rem 0;
        box-shadow: var(--_shadow_xs);
    }

    .tab_view_top {
        padding: 1rem 1rem;
        background-color: var(--_bg_dark);
        border-radius: 10px 10px 0 0;
    }

        .tab_view_top h4 {
            font-size: var(--c-font-size-80-experimental);
            color: var(--text_dark_color);
            margin: 0 0 5px 0;
            font-weight: 600;
        }

        .tab_view_top p {
            color: var(--_color_semilight);
            margin: 0;
            font-weight: 500;
            font-size: var(--c-font-size-80-experimental);
            font-weight: var(--c-font-weight-regular);
        }

    .tab_view_bottom {
        background-color: #D9D9D9;
        border-radius: 0 0 10px 10px;
        padding: 1rem 1rem 0 1rem;
    }

        .tab_view_bottom img {
            border-radius: 10px 10px 0 0;
            width: 100%;
            max-height: 218px;
            object-fit: cover;
        }

    .link-primary {
        cursor: pointer;
    }

    .opn_hrs_setting {
        align-items: center;
    }

    .ohs_dates {
        margin: 0;
    }

    .opn_day input {
        background-color: var(--_bg_light) !important;
    }


    .new_stng_tabs .nav-link {
        display: flex;
        align-items: center;
    }

    table .img_round {
        object-fit: cover;
        min-width: 32px;
        min-height: 32px;
        max-width: 32px;
        max-height: 32px;
        border-radius: 50%;
    }

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

    .red_dot {
        width: 15px;
        height: 15px;
        background-color: #F47272;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        margin: 0px 0 0 0;
    }

    .seeting_modal .top_round_icon.active {
        background-color: var(--_bg_dark) !important;
        color: #323232 !important;
    }

    .holiday_data {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
    }

        .holiday_data .ohs_col {
            align-items: center;
        }

    .hod_left {
        display: flex;
        min-width: 250px;
        justify-content: space-between;
        align-items: center;
    }

    .hod_row {
        flex: 1;
    }

    .hod_slct select.form-select {
        background-color: var(--_bg_light);
        min-width: 125px;
    }

    .hod_row input.form-control {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    .hod_row_inner {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
    }

        .hod_row_inner select.form-select {
            background-color: var(--_bg_light);
        }

    .hod_row a {
        color: currentColor;
    }

    .hod_group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .hod_col {
        display: flex;
        gap: 0.25rem;
    }

        .hod_col .filt_drop_inner i {
            color: var(--text_dark_color);
        }

    .hod_left h6 {
        font-size: var(--c-font-size-80-experimental);
        margin-bottom: 0;
        color: var(--text_dark_color);
    }

    .hod_left {
        display: flex;
        min-width: 250px;
        justify-content: space-between;
        align-items: center;
    }

    .ohs_action i {
        color: var(--text_dark_color);
    }

    .comp_oh div.holiday_data:nth-child(odd) {
        /*background-color: var(--_bg_dark);*/
        background-color: var(--new_strip_bg);
    }

    .stng_dropinnerlist li {
        margin: 0 0 1px 0;
    }

    body .lni_tabs_pills_new_white {
        margin-bottom: 15px !important;
    }

    .lni_tabs_pills_new_white .nav-item .nav-link {
        background-color: var(--_bg_dark);
        color: var(--_color_dark);
    }

    .hambuger_setting_icon {
        display: none;
    }

    .cloud_storage_prnt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0rem 0 1rem 0;
        border-bottom: var(--common_border);
        padding: 0 0 0rem 0;
        gap: 1rem;
        width: 100%;
    }

    .cloud_detail {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .cloud_storage_count {
        width: 47%;
    }

    .cloud_divider {
        width: 1px;
        height: 100%;
        max-width: 5px;
        margin: 0 10px;
        position: relative;
    }

        .cloud_divider hr {
            border: 1.5px solid var(--_border_color3);
            height: 160px;
            width: 1px;
            position: absolute;
            top: -85px;
            margin: 0px;
        }

    .cloud_storage_count h6 {
        font-size: var(--c-font-size-80-experimental);
        font-weight: var(--c-font-weight-semibold);
        margin: 0 0 2px 0;
    }

    .cloud_storage_count small {
        font-size: var(--c-font-size-75);
        font-weight: var(--c-font-weight-regular);
        white-space: nowrap;
    }

    .cloud_storage_count .top_round_icon2 {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #323232;
        max-width: 32px;
        min-width: 32px;
        max-height: 32px;
        min-height: 32px;
        border-radius: 50%;
        background-color: var(--_primary_color_light);
        border: transparent;
    }

        .cloud_storage_count .top_round_icon2 i {
            color: var(--_primary_color);
        }

    .cs_doc {
        display: flex;
        align-items: center;
        gap: 5px;
        border-bottom: var(--common_border);
        justify-content: space-between;
        padding: 0 0 2px 0;
    }

    .cs_inner {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
    }

    .cloud_graph {
        min-width: 200px;
        max-width: 200px;
        height: 200px;
    }

        .cloud_graph #gaugeChartData_cloudStorage > div {
            margin: -100px 0 0 0 !important;
        }

    .stng_cntr_heading {
        font-size: var(--c-font-size-80-experimental);
        color: var(--text_dark_color);
        margin: 0 0 5px 0;
        font-weight: 600;
    }

    .cloud_search {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .cloud_search .search_input_new .top_round_icon {
            max-width: 30px;
            min-width: 30px;
            max-height: 30px;
            min-height: 30px;
        }

            .cloud_search .search_input_new .top_round_icon i {
                color: #fff;
            }

        .cloud_search .search_input_new .form-control {
            min-height: fit-content;
            padding-top: 0;
            padding-bottom: 0;
        }

    @media screen and (max-width: 1400px) {
        .mobile_drag_viewp {
            max-width: 225px;
            margin-left: 90px;
        }

        .mobile_drag_viewc {
            max-width: 205px;
        }

        .center_arrow {
            left: -103px;
            max-width: 90px;
        }
    }

    @media screen and (max-width: 1199px) {
        .mob_app_boxs {
            grid-gap: 5px;
        }

        .ma_center {
            min-height: 45px;
        }

        .mobile_app_row {
            row-gap: 15px;
        }

        .mdv_grid .mob_app_box {
            height: 35px;
        }

        .mob_app_box:after {
            top: 8px;
        }

        .cloud_detail {
            gap: 0.5rem;
            row-gap: 1rem;
        }
    }

    @media screen and (max-width: 1023px) {
        .cloud_storage_count {
            width: 100%;
        }
    }

    @media screen and (max-width: 991px) {
        .stng_ex_wrap {
            flex-direction: column;
            align-items: baseline;
        }

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

        .stng_p_top h2 {
            font-size: var(--c-font-size-150);
        }

        .setng_modal_col2 {
            width: 100%;
        }

        .seeting_modal .modal-header {
            position: relative;
        }

        .stng_bgr_icon {
            display: block;
            margin-bottom: -20px;
            color: var(--text_dark_color);
            position: absolute;
            top: 20px;
            left: 115px;
        }

            .stng_bgr_icon i {
                color: var(--text_dark_color);
            }

        .setng_modal_col1 {
            transition: 0.5s;
            position: fixed !important;
            left: -250px;
            top: 88px !important;
            margin: 0rem 0 0 0;
            box-shadow: 0 0 10px 7px #00000014;
            border-radius: var(--_bdr_radius_md);
        }

            .setng_modal_col1.expand_smc1 {
                left: 32px;
                transition: 0.5s;
            }

        .stng_p_top {
            margin: 5px 0 10px 0;
        }

        .stng_inner_tab_box {
            height: calc(100% - 80px);
        }

        .ohs_day {
            min-width: 150px;
        }

        .ohs_dates select.form-select {
            padding: 7px 20px 7px 10px;
            background-position: right;
        }

        .stng_ex_wrap .form-switch {
            min-width: 135px;
        }

        .stng_ex_upr .form-select {
            max-width: 80px;
            min-width: 80px;
        }

        .inport_box h4 {
            font-size: var(--c-font-size-75);
        }

        .int_box_grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .mobile_drag_viewp {
            height: 380px;
        }

        .mobile_drag_viewc {
            height: 350px;
        }

        .mdv_top {
            padding: 10px 0 0 0;
        }

        .center_arrow h6 {
            font-size: var(--c-font-size-70-experimental);
        }

        .center_arrow {
            left: -89px;
            max-width: 75px;
        }

        .mobile_drag_viewp {
            margin-left: 80px;
        }

        .mdv_subtiitle1 {
            top: 172px;
        }

        .div_company_holiday {
            overflow: scroll;
        }

            .div_company_holiday .gen_cmn_box_new {
                min-width: 850px;
            }
    }

    @media screen and (max-width: 767px) {
        body .seeting_modal .modal-title {
            font-size: var(--c-font-size-80-experimental) !important;
            gap: 5px;
        }

        body .seeting_modal {
            padding: 0rem 0rem !important;
        }

            body .seeting_modal .modal-dialog {
                width: 100% !important;
                border-radius: 0 !important;
            }

            body .seeting_modal .modal-content {
                height: 100%;
                border: 0;
            }

            body .seeting_modal .modal-header {
                border-radius: 0 !important;
            }

            body .seeting_modal .modal-body {
                border-radius: 0 !important;
            }

        .setng_modal_col1 {
            top: 65px !important;
        }

            .setng_modal_col1.expand_smc1 {
                left: 5px;
                top: 65px !important;
            }

        .div_opening_hours {
            overflow: scroll;
        }

            .div_opening_hours .gen_cmn_box_new {
                min-width: 600px;
            }
    }

    @media screen and (max-width: 575px) {
        .center_arrow {
            display: none;
        }

        .mobile_drag_viewp {
            margin-left: 0px;
        }

        .mdv_subtiitle1 {
            display: none;
        }

        .mdv_subtiitle2 {
            display: none;
        }

        .mob_app_boxs {
            grid-template-columns: repeat(auto-fit,minmax(72px,1fr));
        }

        .ma_center i {
            font-size: 16px;
        }

        .cloud_storage_prnt {
            flex-direction: column;
            gap: 2rem;
        }

        .cloud_divider {
            display: none;
        }

        .cloud_storage_prnt {
            padding: 1rem 1rem;
        }

        .colorplates {
            width: auto;
        }

        .sg_img_up {
            flex-direction: column;
            gap: 5px;
        }

        .gen_cmn_box_top_new {
            flex-direction: column;
            align-items: flex-start;
            padding: 10px 15px;
        }

        .gen_cmn_box_body_new {
            padding: 10px 15px;
        }

        .gen_cmn_box_top_btn {
            gap: 8px;
        }

        .gc_editicon {
            min-width: 30px;
            max-width: 30px;
            min-height: 30px;
            max-height: 30px;
        }

        .grn_cmn_bottom .btn.btn-primary, .grn_cmn_bottom .btn.btn-secondary {
            min-width: 60px;
            padding: 8px;
        }

        .cmn_chck_switch_list {
            flex-direction: column;
            gap: 10px !important;
            width: 100%;
            align-items: flex-start !important;
        }

            .cmn_chck_switch_list .cmn_box_chck {
                max-width: 100%;
            }

        .stng_ex_upr {
            flex-direction: column;
            align-items: baseline;
        }

        .seeting_modal .modal-body {
            padding: 0.5rem;
        }
    }

    .form-control.fc_pymnt {
        max-width: 115px;
    }

    .dark .blockUI.blockOverlay {
        background-color: rgb(0, 0, 0) !important;
    }

    .dark .spinner {
        border: 4px #000 solid;
        border-top: 4px #2e93e6 solid;
    }

/*-15-05-2026- checkin select image-*/
.checkin_imgbox .stng_add_img {
    width: auto;
}

.checkin_imgbox .show_profile_pop,
.checkin_imgbox .show_img_pop,
.checkin_imgbox .show_img_pop img {
    padding: 0 !important;
    min-width: 120px;
    max-width: 120px;
    min-height: 120px;
    max-height: 120px;
}

.checkinImageContainer {
    max-height: 400px;
    overflow: auto;
    scrollbar-width: thin;
}
/* Deactivated employees inside an employee pick-list: greyed + italic, same look as the
   deactivated memberships on a calendar group. The colour needs !important because
   ".cp_table_wrap tbody tr td" (style.css) is more specific and would win otherwise. */
tr.emp-inactive-row td,
tr.emp-inactive-row td a {
    font-style: italic;
    color: #8a94a6 !important;
}

.tpl-trans-panel { display: none; }
.tpl-trans-panel.active { display: block; }

/* Two-column drawer: editor + fixed-width right sidebar (Variables). The whole row stretches to
   fill the real available offcanvas-body height instead of each column just shrinking to its own
   content (previously align-items:flex-start, no height on any ancestor) - that's what left the
   large empty gap below both the canvas and the Variables list. .offcanvas-body becomes the flex
   container (Bootstrap only makes it a flex ITEM of the offcanvas, not a container for its own
   children) so .tpl-drawer-flex can size against its real height. */
.eml_tmp_ofc .offcanvas-body { display: flex; flex-direction: column; min-height: 0; }
.tpl-drawer-flex { display: flex; gap: 0; align-items: stretch; flex: 1; min-height: 0; }
.tpl-drawer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.tpl-drawer-side {
    width: 240px;
    flex-shrink: 0;
    border-left: 1px solid var(--_border_color);
    padding-left: 16px;
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tpl-drawer-side.active { display: flex; }
.tpl-side-block { display: flex; flex-direction: column; }
.tpl-side-block-grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tpl-side-collapsible { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tpl-side-hdr { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin-bottom: 8px; }
.tpl-side-hdr-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.tpl-side-toggle { font-size: 9px; transition: transform .15s; }
#tplVarPanel.collapsed .tpl-side-toggle { transform: rotate(-90deg); }
#tplVarPanel.collapsed .tpl-side-collapsible { display: none; }
.tpl-side-btn { width: 100%; margin-top: 6px; padding: 7px; background: var(--_bg_dark); border: 1px solid var(--_border_color); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text_dark_color); cursor: pointer; }
.tpl-side-btn:hover { background: var(--_primary_color_light); border-color: var(--_primary_color_light); }
.tpl-side-btn-ai { background: var(--_primary_color_light); border-color: var(--_primary_color_light); color: var(--_color_dark); }
.tpl-side-btn-ai:hover { background: var(--_primary_color_light); }

/* mail_canvabody/.customeditor are shared classes (Member email form uses them too) - scoped to
   .eml_tmp_ofc so only this drawer's editor area fills height; the other offcanvas keeps its
   original content-sized layout. */
.eml_tmp_ofc .mail_canvabody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.eml_tmp_ofc #textBoxMessage.customeditor { display: flex; flex-direction: column; flex: 1; min-height: 0; }

#jstree .jstree-node {position: relative;white-space: normal;min-height: auto;line-height: 1;margin-left: 0;min-width: auto;}
#jstree li.jstree-node .jstree-children .jstree-anchor { padding-left:0px;}
#jstree li.jstree-node .jstree-children .jstree-leaf .jstree-anchor {
    padding-left: 16px;
}
   #jstree .jstree-anchor {
        display: flex;
        align-items: center;
        gap: 8px;
        height: auto;
        width: calc(100% - 40px);
        margin-left: 40px;
        box-sizing: border-box;
        padding: 12px 16px;
        line-height: 1.35;
        white-space: normal;
        color: var(--text_dark_color);
    }
#jstree li.jstree-leaf > .jstree-anchor { width: 100%; margin-left: 0; padding-left: 16px; }
#jstree .jstree-wholerow { height: 100% !important; border-radius:8px; }
#jstree .jstree-hovered {
    background: transparent !important;
}
#jstree .jstree-children .jstree-wholerow-hovered { background: var(--icon_hover_bg) !important; }
#jstree .jstree-wholerow-clicked {
    background: var(--_bg_dark) !important;
}
#jstree li.tpl-type-folder > .jstree-wholerow-clicked { background: transparent !important; }

#jstree .jstree-ocl {position: absolute;left: 14px;top: 0;margin: 0;background: none !important;width: 16px;height: 40px;display: flex;align-items: center;justify-content: center;}
#jstree .jstree-ocl::before { content: ''; width: 6px; height: 6px; border: solid var(--_color_semilight); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
#jstree li.jstree-open > .jstree-ocl::before { transform: rotate(-135deg); }
#jstree li.jstree-leaf > .jstree-ocl { display: none; }

#jstree > .jstree-container-ul { display: flex; flex-direction: column; gap: 22px; }
#jstree > .jstree-container-ul > li > .jstree-ocl::before { width: 7px; height: 7px; border-color: #6c757d; }
#jstree > .jstree-container-ul > li > .jstree-anchor { width: calc(100% - 26px); margin-left: 26px; padding:0.5rem; }
/* The uppercase group-header style is for FOLDERS only - the old selector did not check the
   node type, so a loose template at the top level rendered as chunky capitals too. */
#jstree > .jstree-container-ul > li.tpl-type-folder > .jstree-anchor { font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; color: #6c757d; }
#jstree > .jstree-container-ul > li > .jstree-anchor .jstree-themeicon { display: none; }
.tpl-group-line { flex: 1 1 auto; height: 1px; background: var(--_border_color3); margin: 0 2px; }
#jstree > .jstree-container-ul > li > .jstree-anchor .tpl-folder-count { flex-shrink: 0; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: var(--common_border); background: transparent; color: var(--_color_semilight); font-size: 11px; font-weight: 700; padding: 0 6px; margin: 0; }

/* overflow must stay visible: the per-row context menu (Edit/Copy/Delete) opens inside this
   card and was clipped to the top half of its first item. */
#jstree > .jstree-container-ul > li > .jstree-children { background: var(--new_card_bg); border: var(--common_border); border-radius: 12px; overflow: visible; padding:0.5rem; }

#jstree .jstree-children .jstree-anchor.tpl-type-folder { font-weight: 600; font-size: 13.5px; color: var(--text_dark_color); text-transform: none; letter-spacing: normal; text-align: left; justify-content: flex-start; }
#jstree .jstree-children .jstree-anchor.tpl-type-folder .jstree-themeicon { display: inline-block; font-size: 15px; margin-right: 0; flex-shrink: 0; }
#jstree .jstree-children .jstree-anchor.tpl-type-folder .tpl-folder-count { margin-left: auto; background: none; border: none; color: var(--_color_semilight); font-size: 12.5px; font-weight: 600; padding: 0; min-width: 0; height: auto; border-radius: 0; flex-shrink: 0; }

#jstree .jstree-anchor.tpl-type-email .jstree-themeicon,
#jstree .jstree-anchor.tpl-type-text .jstree-themeicon,
#jstree .jstree-anchor.tpl-type-sms .jstree-themeicon { display: none; }
.tpl-node-main { order: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.tpl-node-title { font-weight: 700; font-size: 13.5px; color: var(--text_dark_color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-node-type { font-size: 11px; color: var(--_color_semilight); }
.tpl-node-meta { order: 2; display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.tpl-node-arrow { order: 4; color: #ced4da; font-size: 12px; margin-left: 4px; flex-shrink: 0; }

#jstree .jstree-anchor > .fa-trash { order: 3; float: none !important; margin: 0 5px 0 5px !important; padding: 0 !important; color: #ced4da; font-size: 12px; flex-shrink: 0; }
#jstree .jstree-anchor > .fa-trash:hover { color: #DC2626; }

.tpl-node-kebab-wrap { order: 3; flex-shrink: 0; margin: 0 5px 0 5px; }
.tpl-node-kebab-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--_bdr_radius_md); color: #ced4da; }
.tpl-node-kebab-btn:hover { background-color: var(--icon_hover_bg); color: #111; }
.tpl-node-kebab-wrap .more_action_dropdown { top: 24px; z-index: 50; width: max-content; min-width: 160px; }

.tpl-var-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.tpl-var-category { font-size: 12.5px; }
.tpl-var-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--_bg_dark); border-radius: 6px; cursor: pointer; font-size: 12px; }
.tpl-var-item:hover { background: var(--_primary_color_light); }
.tpl-var-item:hover .tpl-var-arrow { color: var(--_color_dark); }
.tpl-var-item .tpl-var-text { flex: 1; min-width: 0; overflow: hidden; }
.tpl-var-item .tpl-var-code { font-family: monospace; color: var(--text_dark_color); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-var-item .tpl-var-desc { color: var(--_color_semilight); font-size: 10.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-var-item .tpl-var-arrow { color: var(--_color_semilight); font-size: 12px; flex-shrink: 0; }

.tpl-mode-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: 8px; background: var(--_bg_dark); border: 1px solid var(--_border_color); border-radius: 8px; flex-wrap: wrap; }
.tpl-fmt-btn { width: 26px; height: 26px; padding: 0; border: 1px solid var(--_border_color); background: var(--new_card_bg); border-radius: 6px; font-size: 12px; color: var(--text_dark_color); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tpl-fmt-btn:hover { border-color: var(--_color_dark); color: var(--_color_dark); }
.tpl-fmt-sep { width: 1px; height: 16px; background: var(--_border_color); margin: 0 2px; align-self: center; }
.tpl-mode-switch { margin-left: auto; display: flex; gap: 2px; background: var(--new_card_bg); border: 1px solid var(--_border_color); border-radius: 6px; padding: 2px; flex-shrink: 0; }
.tpl-mode-btn { padding: 3px 11px; border: none; background: transparent; border-radius: 4px; font-size: 11.5px; font-weight: 500; color: var(--text_dark_color); cursor: pointer; }
.tpl-mode-btn.active { background: var(--_primary_color); color: #fff; }

.tpl-dnd-wrap { display: flex; gap: 0; border: 1px solid var(--_border_color); border-radius: 8px; overflow: hidden; min-height: 320px; flex: 1; }
.tpl-block-palette { width: 140px; flex-shrink: 0; border-right: 1px solid var(--_border_color); background: var(--_bg_dark); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.tpl-palette-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--_color_semilight); padding: 6px 4px 2px; }
.tpl-palette-item { padding: 7px 8px; border-radius: 6px; border: 1px solid var(--_border_color); background: var(--new_card_bg); font-size: 12px; color: var(--text_dark_color); cursor: grab; user-select: none; }
.tpl-palette-item:hover { border-color: var(--_color_dark); color: var(--_color_dark); background: var(--_primary_color_light); }
.tpl-palette-item:focus-visible, .tpl-var-item:focus-visible { outline: 2px solid var(--_color_dark); outline-offset: 1px; }

/* Empty image block: a light invitation zone instead of the old black bar, which read as a
   rendering fault rather than "pick an image here". */
/* Fixed light colours, not theme variables: the block sits on the always-white mail canvas,
   and in dark theme the variable resolved to near-black - the exact black bar this replaces. */
.tpl-b-image-empty { display: flex; align-items: center; justify-content: center; background: #F5F7FA; border: 2px dashed #D8DCE3; border-radius: 6px; cursor: pointer; }
.tpl-b-image-empty .tpl-b-image-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #8a94a6; }
.tpl-b-image-empty .tpl-b-image-icon { font-size: 26px; }
.tpl-b-image-empty .tpl-b-image-hint { font-size: 12.5px; font-weight: 600; }

/* Variable pill: inserted tokens are atomic chips - backspace removes the whole token, so a
   half-deleted @[MEMBERFIRSTNAME@ can no longer fail silently at send time. */
.tpl-var-pill { display: inline-block; padding: 1px 7px; border-radius: 99px; background: var(--_primary_color_light); color: var(--_color_dark); font-family: monospace; font-size: .85em; white-space: nowrap; user-select: all; }

/* Preview renders in a sandboxed iframe (template CSS can no longer restyle the settings
   screen); the frame is the real 600px mail width. */
.tpl-preview-frame { width: 100%; border: none; display: block; background: #F5F7FA; }
.tpl-preview-mobile .tpl-preview-frame { width: 375px; margin: 0 auto; }

/* Language notice: yellow = unsaved machine-translation prefill, blue (-stored) = editing a
   stored language version. */
.tpl-trans-notice { padding: 8px 12px; margin-bottom: 8px; border: 1px solid #F0C36D; background: #FDF3D8; color: #8A6D1A; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.tpl-trans-notice.tpl-trans-notice-stored { border-color: #9DB8F0; background: #E8EFFF; color: #2B4E9B; }
.tpl-lang-stored { color: #1E9E5A; font-size: 11px; }
/* Language badges: plain uppercase codes styled as mini-pills - flag emoji render as bare
   letter codes on Windows (no flag font), which glued them together as "FRNL". */
.tpl-node-langs { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; cursor: default; }
.tpl-node-lang { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px; background: var(--_primary_color_light); color: var(--_color_dark); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
.tpl-lang-code { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 1px 5px; border-radius: 4px; background: var(--_bg_dark); border: 1px solid var(--_border_color); font-size: 10px; font-weight: 700; letter-spacing: .04em; font-style: normal; }

/* Image picker: folder dropdown + search above the grid, and the notices shown when a folder is
   empty or when only the newest images of a large folder are rendered. */
.tpl-img-folder { max-width: 280px; }
.tpl-img-search { flex: 1 1 140px; min-width: 140px; }
.tpl-img-empty { padding: 24px 4px; text-align: center; font-size: 13px; color: var(--_color_semilight); }
.tpl-img-capped { padding: 0 4px 6px; font-size: 11px; color: var(--_color_semilight); }

/* Image picker: name + date caption and a delete control per uploaded image. */
.tpl-img-caption { display: flex; align-items: center; gap: 6px; padding-top: 4px; font-size: 11px; color: var(--_color_semilight); }
.tpl-img-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-img-date { flex-shrink: 0; }
.tpl-img-delete { flex-shrink: 0; border: none; background: none; color: var(--_color_semilight); cursor: pointer; padding: 2px 4px; }
.tpl-img-delete:hover { color: #DC2626; }

/* Type icon rebuilt inside the restructured list rows (jstree's own themeicon is discarded
   by the rebuild). */
.tpl-node-typeicon { order: 0; flex-shrink: 0; width: 18px; text-align: center; font-size: 14px; color: var(--_color_semilight); }

/* Usage chip (list) + usage caption (drawer header): where a template is referenced. */
.tpl-node-usage { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--_primary_color_light); color: var(--_color_dark); font-size: 11px; font-weight: 700; flex-shrink: 0; cursor: default; }
.tpl-node-system { color: var(--_color_semilight); font-size: 11px; flex-shrink: 0; cursor: default; }
.tpl-usage-caption { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: rgba(255,255,255,.85); cursor: default; }

.tpl-sms-count-wrap { margin-top: 4px; }
.tpl-sms-count { font-size: 11.5px; color: var(--_color_semilight); }
.tpl-sms-count.text-danger { color: #DC2626 !important; }

.tpl-palette-item.tpl-dragging-from { opacity: .4; }
.tpl-canvas-area {
    flex: 1;
    overflow-y: auto;
    background: var(--_bg_dark);
    padding: 16px;
    min-width: 0;
}
/* padding-top reserves room for the first block's topbar, which hangs above the block.
   max-width 600px = real email width, so Design, Preview and the sent mail agree on line
   breaks, button size and image dimensions. */
.tpl-canvas { display: flex; flex-direction: column; padding-top: 26px; max-width: 600px; margin: 0 auto; width: 100%; }
.tpl-canvas-empty { padding: 32px; text-align: center; color: var(--_color_semilight); border: 2px dashed var(--_border_color); border-radius: 8px; background: rgba(255,255,255,.6); font-size: 12.5px; }
.tpl-drop-indicator { height: 3px; background: var(--_color_dark); border-radius: 99px; margin: 2px 0; }
.tpl-block { position: relative; border: 1.5px solid transparent; background: #fff; }
.tpl-block:hover { border-color: #C7CDFF; }
/* z-index lifts the selected block's overlaid propbar above the next sibling block */
.tpl-block.selected { border-color: var(--_color_dark); z-index: 2; }
.tpl-block.tpl-dragging-block { opacity: .3; }
/* Draws the eye to a block that just appeared/reappeared without the user's eyes already on it
   (duplicate, drop-insert, delete-undo) - previously these had zero visual feedback. */
.tpl-block.tpl-block-flash { animation: tpl-block-flash-anim 1.2s ease-out; }
@keyframes tpl-block-flash-anim {
    0% { box-shadow: 0 0 0 3px rgba(87,104,255,.55); border-color: var(--_color_dark); }
    100% { box-shadow: 0 0 0 3px rgba(87,104,255,0); }
}
.tpl-token-flash { animation: tpl-token-flash-anim 1.2s ease-out; border-radius: 3px; }
@keyframes tpl-token-flash-anim {
    0% { background: rgba(87,104,255,.35); }
    100% { background: rgba(87,104,255,0); }
}
/* Overlaid above the block instead of in-flow: showing it on hover must not change the
   block's height, or blocks shift 23px under the cursor (hover flicker loop, jumping
   drop indicator while dragging). */
.tpl-block-topbar { display: none; position: absolute; top: 0; left: -1.5px; right: -1.5px; transform: translateY(-100%); z-index: 3; align-items: center; gap: 4px; background: var(--_primary_color); padding: 3px 6px; }
.tpl-block:hover .tpl-block-topbar, .tpl-block.selected .tpl-block-topbar { display: flex; }
.tpl-block-handle { cursor: grab; color: rgba(255,255,255,.85); background: none; border: none; font-size: 12px; padding: 2px; }
.tpl-block-type-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.85); flex: 1; }
.tpl-block-action { width: 22px; height: 22px; border: none; background: rgba(255,255,255,.25); color: #fff; border-radius: 3px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tpl-block-action:hover { background: rgba(255,255,255,.3); }
.tpl-block-action:disabled { opacity: .35; cursor: not-allowed; background: rgba(255,255,255,.15); }
.tpl-block-content { width: 100%; }
/* Same construction as the topbar, hung below the block: selecting must not push the
   blocks underneath down. */
.tpl-block-propbar { display: none; position: absolute; top: 100%; left: -1.5px; right: -1.5px; z-index: 3; padding: 6px 10px; background: #F0F2FF; border-top: 1px solid #C7CDFF; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.tpl-block.selected .tpl-block-propbar { display: flex; }
.tpl-prop-input { font-size: 11.5px; padding: 3px 6px; border: 1px solid #C7CDFF; border-radius: 4px; }
.tpl-prop-input.sm { width: 60px; }
.tpl-prop-input.md { width: 120px; }
/* Button URL still at its untouched default ("" or "#") - the audit found this field had no
   validation at all. */
.tpl-prop-input.tpl-prop-invalid { border-color: #DC2626; background: #FEF2F2; }
.tpl-prop-color { width: 26px; height: 26px; padding: 1px; border: 1px solid #C7CDFF; border-radius: 4px; }
.tpl-prop-btn { padding: 3px 7px; border: 1px solid #C7CDFF; border-radius: 4px; background: #fff; font-size: 10.5px; cursor: pointer; }
.tpl-prop-btn.active { background: var(--_color_dark); color: #fff; border-color: var(--_color_dark); }

.tpl-b-text { padding: 8px 14px; font-size: 13px; line-height: 1.6; outline: none; min-height: 30px; }
.tpl-b-heading { padding: 12px 14px 6px; outline: none; min-height: 30px; }
.tpl-b-heading[data-level="h1"] { font-size: 21px; font-weight: 700; }
.tpl-b-heading[data-level="h2"] { font-size: 16px; font-weight: 700; }
/* An empty contenteditable block renders as literal blank space with no cue it's there or
   editable (P1 audit finding). :empty only matches a block with zero child nodes, which is
   exactly what a freshly-dropped block with props.text/html === '' renders as. */
.tpl-b-text:empty::before { content: 'Click to add text…'; color: var(--_color_semilight); pointer-events: none; }
.tpl-b-heading:empty::before { content: 'Your heading…'; color: var(--_color_semilight); pointer-events: none; }
.tpl-b-col:empty::before { content: 'Drop content here…'; color: var(--_color_semilight); pointer-events: none; font-style: italic; }
.tpl-b-image { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100px; background: #1a1a1a; color: #fff; cursor: pointer; }
.tpl-b-image img { width: 100%; display: block; }
.tpl-b-image-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .85; padding: 20px; }
.tpl-b-image-icon { font-size: 26px; }
.tpl-b-image-title { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tpl-b-image-hint { font-size: 10px; opacity: .7; text-transform: none; font-weight: 400; }
.tpl-b-button-wrap { padding: 12px 14px; text-align: center; }
.tpl-b-button { display: inline-block; padding: 10px 22px; border-radius: 6px; font-weight: 700; font-size: 13px; text-decoration: none; outline: none; cursor: text; }
.tpl-b-divider { padding: 8px 14px; }
.tpl-b-divider hr { border: none; margin: 0; }
.tpl-b-spacer { display: flex; align-items: center; justify-content: center; font-size: 10px; color: #aaa; background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 4px, #eee 4px, #eee 8px); }
.tpl-b-footer { padding: 12px 14px; background: #F5F7FA; border-top: 1px solid #E4E2DC; text-align: center; font-size: 10.5px; color: #888; line-height: 1.7; }
.tpl-b-cols { display: flex; }
.tpl-b-col { flex: 1; padding: 8px 10px; font-size: 13px; outline: none; min-height: 40px; border-right: 1px dashed #ddd; }
.tpl-b-col:last-child { border-right: none; }
.tpl-b-col.tpl-col-drop-target { background: #EEF0FF; outline: 2px dashed var(--_color_dark); outline-offset: -2px; }

.tpl-preview-wrap { overflow-y: auto; background: #EBEBEB; padding: 16px; border-radius: 8px; flex: 1; min-height: 320px; }
.tpl-preview-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tpl-preview-size-toggle { display: flex; gap: 2px; background: var(--new_card_bg); border: 1px solid var(--_border_color); border-radius: 6px; padding: 2px; }
.tpl-preview-card { background: #fff; border-radius: 8px; overflow: hidden; max-width: 600px; margin: 0 auto; font-size: 13px; transition: max-width .2s ease; }
.tpl-preview-card.tpl-preview-mobile { max-width: 375px; }
/* A [TOKEN] the preview couldn't resolve (real club info + sample member data both missed it) -
   shown as a merge field, not broken-looking bracket text (P1 audit finding). */
.tpl-token-unresolved { background: #FEF9C3; color: #92400E; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.tpl-source-view { width: 100%; min-height: 320px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; line-height: 1.7; color: #374151; background: #F8FAFC; border: 1px solid var(--_border_color); border-radius: 8px; padding: 14px 16px; resize: vertical; }

/* Template drawer header - email */
.eml_tmp_ofc .tpl-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap;padding: .65rem 1rem; }
.eml_tmp_ofc .tpl-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eml_tmp_ofc .tpl-header-left .offcanvas-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.eml_tmp_ofc .tpl-id-caption { font-size: 11.5px; color: var(--_color_semilight); flex-shrink: 0; }
/* Bootstrap's bg-light/text-dark utilities are fixed grays (!important, not app theme
   variables) - the type badge would stay a stray light-gray rectangle even in dark mode without
   this override. */
.dark .eml_tmp_ofc #tplTypeBadge { background-color: var(--_bg_dark) !important; color: var(--text_dark_color) !important; }
.eml_tmp_ofc .offcanvas-header .canvas_close_btn {
    padding-left: 0px; width:14px; padding-right:1rem;
}
.eml_tmp_ofc .tpl-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.eml_tmp_ofc .tpl-header-right .top_round_icon { min-width: 32px; max-width: 32px; min-height: 32px; max-height: 32px; }
.eml_tmp_ofc .tpl-lang-dropdown .dropdown-toggle,
.eml_tmp_ofc #saveData.btn_edit_html {
    padding: 10px !important;
    width: fit-content;
    min-width: auto;
}
/* Flag emoji glyphs render taller than Latin text at the same font-size (different font metrics) -
   give the flag its own smaller, line-height:1 span, sized to the app's own "small text" token
   instead of a one-off px value. */
.eml_tmp_ofc .tpl-lang-flag { font-size: var(--c-font-size-80-experimental); line-height: 1; vertical-align: 0px; }
.eml_tmp_ofc .tpl-kebab-dropdown .dropdown-menu,
.eml_tmp_ofc .tpl-lang-dropdown .dropdown-menu { font-size: var(--c-font-size-100); }
/* Bootstrap's .dropdown-item.active/:active default to its own --bs-dropdown-link-active-color/
   -bg tokens (plain Bootstrap blue), not this app's theme. Same fix already applied elsewhere in
   the app for the same problem (.profiledrop .dropdown-item.active, style.css:1080) - reusing the
   exact same two theme variables here instead of Bootstrap's defaults. */
.eml_tmp_ofc .tpl-lang-dropdown .dropdown-item.active,
.eml_tmp_ofc .tpl-lang-dropdown .dropdown-item:active,
.eml_tmp_ofc .tpl-kebab-dropdown .dropdown-item.active,
.eml_tmp_ofc .tpl-kebab-dropdown .dropdown-item:active {
    background-color: var(--_primary_color_light);
    color: var(--_color_semilight);
}
.eml_tmp_ofc .tpl-lang-dropdown .dropdown-item:hover,
.eml_tmp_ofc .tpl-kebab-dropdown .dropdown-item:hover {
    background-color: var(--_primary_color_light);
    border-radius: var(--_bdr_radius_sm);
    color: var(--_color_dark);
}
.eml_tmp_ofc .divFileContent {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1rem;
}
/* Description/Type/Subject/Preview text/Attachments collapse behind a one-line summary + "Edit
   details" toggle, matching the reference mockup - expanded only on demand instead of always
   taking up the top of the drawer. Collapsed by default (no .expanded class needed to hide). */
.eml_tmp_ofc .tpl-details-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0px 0 14px; border-bottom: 1px solid var(--_border_color); margin-bottom: 14px; }
.eml_tmp_ofc .tpl-details-summary-text { font-size: var(--c-font-size-80-experimental); color: var(--text_dark_color); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eml_tmp_ofc .tpl-details-label { font-size: var(--c-font-size-75); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--_color_semilight); }
.eml_tmp_ofc .tpl-details-sep { margin: 0 6px; color: var(--_color_semilight); }
.eml_tmp_ofc .tpl-details-muted { color: var(--_color_semilight); font-style: italic; }
.eml_tmp_ofc .tpl-details-toggle { font-size: var(--c-font-size-80-experimental); font-weight: 600; color: var(--_color_dark); white-space: nowrap; flex-shrink: 0; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.eml_tmp_ofc .tpl-details-toggle:hover { color: var(--_color_dark); }
.eml_tmp_ofc .tpl-details-chevron { font-size: 9px; transition: transform .15s; }
.eml_tmp_ofc .tpl-details-form { display: none; }
.eml_tmp_ofc .tpl-details-wrap.expanded .tpl-details-form { display: block; }
.eml_tmp_ofc .tpl-details-wrap.expanded .tpl-details-chevron { transform: rotate(180deg); }
/* The Type <select> (.form-select.DropType) has no app-specific styling anywhere, unlike
   .form-control inputs elsewhere in this drawer - it was falling back to a plain Bootstrap
   default with a squarer corner than the rest of the form. */
.eml_tmp_ofc .tpl-details-grid select.form-select { border-radius: var(--_bdr_radius_md); }
/* Description/Type/Subject/Preview text as two 50% columns instead of four stacked full-width
   rows. Only column-gap is set - .filter_input's own existing margin-bottom (style.css) already
   provides the vertical rhythm between rows, so adding row-gap too would double it up. */
.eml_tmp_ofc .tpl-details-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }

/* Header has 8 controls total (close/title/badge/id, then dropdown/attach/kebab/save) -
   flex-wrap:nowrap on the full-size header would clip or overflow on a phone-width drawer. */
@media (max-width: 576px) {
    .eml_tmp_ofc .tpl-header { flex-wrap: wrap; row-gap: 8px; }
    .eml_tmp_ofc .tpl-header-left, .eml_tmp_ofc .tpl-header-right { flex-wrap: wrap; }
    .eml_tmp_ofc .tpl-id-caption { display: none; }
    .eml_tmp_ofc .tpl-details-summary { flex-wrap: wrap; row-gap: 6px; }
    .eml_tmp_ofc .tpl-details-summary-text { white-space: normal; }
    .eml_tmp_ofc .tpl-details-grid { grid-template-columns: 1fr; }
}

/* Attachment chip in the drawer header + its panel. The file list used to live inside the
   collapsed "edit details" block, which meant a template's existing attachments were shown
   nowhere; the count badge makes them visible without opening anything. */
/* Everything here needs two classes: the panel hangs in .offcanvas-header, where style.css
   ("...header div button { width: 30px }", "...header div { display: flex }") and
   dev.style.css (span colour, !important) would otherwise reshape the rows. */
.tpl-attach-dropdown .tpl-attach-btn { position: relative; overflow: visible; }
#divTemplateFormEdit .tpl-attach-dropdown .tpl-attach-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--_color_dark); color: #fff !important; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.dropdown-menu.tpl-attach-panel { display: none; width: 320px; max-width: calc(100vw - 32px); padding: 12px; border: 1px solid var(--_border_color); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.14); }
.dropdown-menu.tpl-attach-panel.show { display: block; }
.tpl-attach-panel .tpl-attach-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 8px 4px; }
#divTemplateFormEdit .tpl-attach-panel .tpl-attach-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--_color_semilight) !important; }
#divTemplateFormEdit .tpl-attach-panel .tpl-attach-count { font-size: 11.5px; font-weight: 400; color: var(--_color_semilight) !important; }
.tpl-attach-panel .divFileContent { display: flex; flex-direction: column; align-items: stretch; gap: 4px; max-height: 260px; overflow-y: auto; overflow-x: hidden; }
.tpl-attach-panel .attach_row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-width: 0; flex: 0 0 auto; background: transparent; padding: 6px 4px !important; border-radius: 8px; }
.tpl-attach-panel .attach_row:hover { background: var(--_bg_dark); }
.tpl-attach-panel .tpl-attach-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background-color: var(--_bg_dark); background-color: var(--_primary_color_light); }
.tpl-attach-panel .tpl-attach-icon i { font-size: 14px; }
.tpl-attach-panel .tpl-attach-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1 1 auto; min-width: 0; }
.tpl-attach-panel .tpl-attach-info h4 { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-attach-panel .tpl-attach-info h4 a { color: inherit; text-decoration: none; }
.tpl-attach-panel .tpl-attach-info h4 a:hover { text-decoration: underline; }
#divTemplateFormEdit .tpl-attach-panel .tpl-attach-size { font-size: 11px; font-weight: 400; color: var(--_color_semilight) !important; }
.tpl-attach-panel .attach_row .att_loading { flex: 0 0 auto; margin-left: auto; width: 28px; height: 28px; }
.tpl-attach-panel .attach_row .att_loading:hover i { color: #DC2626; }
.tpl-attach-panel .tpl-attach-empty { display: block; padding: 6px 4px 2px 4px; font-size: 12px; color: var(--_color_semilight); }
.tpl-attach-panel .tpl-attach-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: auto; margin-top: 10px; padding: 8px !important; border: 1px solid var(--_border_color); border-radius: 8px; background: #fff; color: var(--_color_dark); font-size: 12.5px; font-weight: 600; }
.tpl-attach-panel .tpl-attach-add:hover { background: var(--_bg_dark); }

@media (max-width: 860px) {
    /* One naturally-flowing, scrollable column. The desktop layout stretches the columns to
       fit the drawer height; on a phone that shrank the main column BELOW its content
       (overflow stays visible), so the Variables panel was painted straight over the
       palette. Every flex child gets its natural height here and the body scrolls. */
    .eml_tmp_ofc .offcanvas-body { overflow-y: auto; }
    .tpl-drawer-flex { flex-direction: column; align-items: stretch; flex: 0 0 auto; }
    .tpl-drawer-main { flex: 0 0 auto; }
    .eml_tmp_ofc .mail_canvabody { flex: 0 0 auto; }
    .eml_tmp_ofc #textBoxMessage.customeditor { flex: 0 0 auto; }
    /* Palette becomes a wrapping strip above the canvas - side by side left ~250px for the
       600px mail and the two panels interleaved. */
    .tpl-dnd-wrap { flex-direction: column; min-height: 0; }
    .tpl-block-palette { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--_border_color); }
    .tpl-palette-label { width: auto; padding: 4px 6px; }
    .tpl-canvas-area { flex: 0 0 auto; overflow: visible; }
    .tpl-drawer-side { width: 100%; border-left: none; border-top: 1px solid #E4E2DC; padding-left: 0; margin-left: 0; padding-top: 16px; margin-top: 12px; max-height: none; flex: 0 0 auto; }
    .tpl-var-list { max-height: 260px; }
}