/* [↓]_BEGIN[S] >> [00]_ROOT_VARIABLES << SHB_[↓] */
:root {
    --font-alpha: "Manrope", sans-serif;

    --root-font-size: 10px;

    --base-font-size: 1.6rem;
    --base-font-weight: 400;
    --base-line-height: 125%;
    --base-color-back: #FFFFFF;
    --base-color-text: #111827;

    --head-font-size-01: 3.6rem;
    --head-font-size-02: 3.2rem;
    --head-font-size-03: 2.8rem;
    --head-font-size-04: 2.4rem;
    --head-font-size-05: 2rem;
    --head-font-size-06: 1.8rem;
    --head-font-weight: 600;
    --head-line-height: 150%;
    --head-color-text: #111827;

    --cms-landing-header-height: 120px;
    --cms-landing-footer-height: 080px;
    --cms-landing-common-spaces: 3.2rem;

    --cms-header-height: 70px;
    --cms-footer-height: 70px;
    --cms-action-height: 70px;

    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-gray-050: #F3F4F6;
    --color-gray-100: #ECECEC;
    --color-gray-200: #E9EAEB;
    --color-gray-700: #414651;

    --color-grey-050: #F8F8F8;
    --color-grey-100: #E6EAEE;
    --color-grey-200: #EEEFF2;
    --color-grey-300: #DFE5EF;
    --color-grey-400: #D1D5DB;
    --color-grey-500: #9CA3AF;
    --color-grey-600: #6B7280;
    --color-grey-700: #4B5563;

    --color-alpha-em: #54e048;
    --color-alpha: #1ea314;
    --color-alpha-sb: #1a6615;

    --color-success-em-dk: #043201;
    --color-success-em: #15690b;
    --color-success: #16A800;
    --color-success-sb: #75fe58;
    --color-success-sb-lt: #ecffe5;

    --color-danger-em-dk: #470908;
    --color-danger-em: #9d1a17;
    --color-danger: #e53935;
    --color-danger-sb: #ffa4a2;
    --color-danger-sb-lt: #ffe2e1;
}

/* [↑]_CEASE[S] >> [00]_ROOT_VARIABLES << SHB_[↑] */

/* [↓]_BEGIN[S] >> [01]_REBOOT << SHB_[↓] */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--root-font-size);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-alpha);
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    line-height: var(--base-line-height);
    background: var(--base-color-back);
    color: var(--base-color-text);
}

.btn-light {
    --bs-btn-color: var(--base-color-text);
    --bs-btn-bg: var(--color-gray-200);
    --bs-btn-border-color: var(--color-gray-200);
    --bs-btn-hover-color: var(--base-color-text);
    --bs-btn-hover-bg: var(--color-grey-200);
    --bs-btn-hover-border-color: var(--color-grey-200);
    --bs-btn-active-color: var(--base-color-text);
    --bs-btn-active-bg: var(--color-grey-200);
    --bs-btn-active-border-color: var(--color-grey-200);
    --bs-btn-disabled-color: var(--base-color-text);
    --bs-btn-disabled-bg: var(--color-gray-200);
    --bs-btn-disabled-border-color: var(--color-gray-200);
}

/* [↑]_CEASE[S] >> [01]_REBOOT << SHB_[↑] */

/* [↓]_BEGIN[S] >> [02]_TYPOGRAPHY << SHB_[↓] */
.font-alpha {
    font-family: var(--font-alpha) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-alpha);
    font-weight: var(--head-font-weight);
    line-height: var(--head-line-height);
    color: var(--head-color-text);
}

h1,
.h1 {
    --text-heading-size: var(--head-font-size-01);
    font-size: var(--text-heading-size);
}

h2,
.h2 {
    --text-heading-size: var(--head-font-size-02);
    font-size: var(--text-heading-size);
}

h3,
.h3 {
    --text-heading-size: var(--head-font-size-03);
    font-size: var(--text-heading-size);
}

h4,
.h4 {
    --text-heading-size: var(--head-font-size-04);
    font-size: var(--text-heading-size);
}

h5,
.h5 {
    --text-heading-size: var(--head-font-size-05);
    font-size: var(--text-heading-size);
}

h6,
.h6 {
    --text-heading-size: var(--head-font-size-06);
    font-size: var(--text-heading-size);
}

p,
.p {
    --text-heading-size: var(--base-font-size);
    font-size: var(--text-heading-size);
    color: var(--base-color-text);
    font-weight: 400;
}

h1.small,
h2.small,
h3.small,
h4.small,
h5.small,
h6.small,
.h1.small,
.h2.small,
.h3.small,
.h4.small,
.h5.small,
.h6.small {
    font-size: calc(80 * var(--text-heading-size) / 100);
}

p.small,
.p.small {
    font-size: calc(80.33 * var(--text-heading-size) / 100);
}

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis-line-1 {
    -webkit-line-clamp: 1;
}

.ellipsis-line-2 {
    -webkit-line-clamp: 2;
}

/* [↑]_CEASE[S] >> [02]_TYPOGRAPHY << SHB_[↑] */

/* [↓]_BEGIN[S] >> [03]_LAYOUT << SHB_[↓] */
.flex-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.flex-auto-0 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

/* [↓]_BEGIN[S] >> LAYOUT_LANDING_PAGE << SHB_[↓] */
.cms-landing-page-layout {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.cms-landing-page-layout::before {
    content: "";
    background-image: url("../media/images/backgrounds/cms-bg-corner-pattern.png"), url("../media/images/backgrounds/cms-bg-landing-gradient.svg");
    background-position: left top, left top;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    width: 50vw;
    height: 50vh;
    position: absolute;
    left: 0;
    top: 0;
    /* z-index: 0; */
}

.cms-landing-page-layout-header {
    height: var(--cms-landing-header-height);
    padding: var(--cms-landing-common-spaces);
    z-index: 2;
    flex: 0 0 auto;
}

.cms-landing-page-layout-header-logo {
    width: 21.6rem;
}

.cms-landing-page-layout-main {
    flex: 0 0 auto;
    height: calc(100% - (var(--cms-landing-header-height) + var(--cms-landing-footer-height)));
    overflow-y: auto;
    position: relative;
}

.cms-landing-page-layout-footer {
    height: var(--cms-landing-footer-height);
    padding: var(--cms-landing-common-spaces);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 170%;
    color: var(--color-grey-500);
    flex: 0 0 auto;
}

/* [↑]_CEASE[S] >> LAYOUT_LANDING_PAGE << SHB_[↑] */

/* [↓]_BEGIN[S] >> LAYOUT_ALPHA << SHB_[↓] */
.cms-layout-alpha {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.cms-head,
.cms-foot {
    flex: 0 0 auto;
}

.cms-head-row,
.cms-foot-row {
    gap: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cms-main {
    height: 100%;
    height: calc(100% - (var(--cms-header-height) + var(--cms-footer-height)));
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-grey-200);
    border-bottom: 1px solid var(--color-grey-200);
}

.cms-head,
.cms-head-row {
    height: var(--cms-header-height);
}

.cms-foot,
.cms-foot-row {
    height: var(--cms-footer-height);
}

.cms-foot-st {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 170%;
    color: var(--color-grey-500);
}

/* [↑]_CEASE[S] >> LAYOUT_ALPHA << SHB_[↑] */

/* [↓]_BEGIN[S] >> LAYOUT_ADMIN << SHB_[↓] */
.cms-layout-alpha {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* [↑]_CEASE[S] >> LAYOUT_ADMIN << SHB_[↑] */
/* [↑]_CEASE[S] >> [03]_LAYOUT << SHB_[↑] */

/* [↓]_BEGIN[S] >> [04]_MEDIA << SHB_[↓] */
img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.cover-image img,
.cover-image svg,
.contain-image img,
.contain-image svg,
.contain-image video,
.contain-image iframe {
    width: 100%;
    height: 100%;
    min-height: inherit;
    max-height: inherit;
}

.contain-image svg,
.contain-image img,
.contain-image video,
.contain-image iframe {
    -o-object-fit: contain;
    object-fit: contain;
}

.cover-image svg,
.cover-image img {
    -o-object-fit: cover;
    object-fit: cover;
}

/* [↑]_CEASE[S] >> [04]_MEDIA << SHB_[↑] */

/* [↓]_BEGIN[S] >> [05]_FORM_CONTROL << SHB_[↓] */
.cms-form-control.form-control {
    /* --bs-border-color:; */
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 140%;
    color: var(--color-grey-700);
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
}

.cms-form-control.form-control:focus {
    border-color: var(--color-grey-700);
    box-shadow: none;
    outline: none;
}

.cms-button.btn {
    --bs-btn-padding-x: 1.2rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-font-size: 1.6rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 140%;
    --bs-btn-box-shadow: none;
    --bs-btn-border-radius: 6px;
}

/* [↑]_CEASE[S] >> [05]_FORM_CONTROL << SHB_[↑] */

/* [↓]_BEGIN[S] >> [06]_COMPONENTS << SHB_[↓] */
/* NAV TABS COMPONENT */
.cms-tabs.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-hover-color: var(--color-alpha-em);
    --bs-nav-link-color: var(--base-color-text);
}

.cms-tabs.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--color-alpha);
}

.cms-tabs.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
}

.cms-tabs.nav-tabs .nav-link.active {
    border-color: var(--color-alpha);
}

.cms-tabs.nav-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}

/* TABLE COMPONENT */
.table-cms.table {
    margin: 0;
}

.table-cms.table>:not(caption)>*>* {
    padding: 1rem 1rem;
}

.table-cms.table .table-dark {
    --bs-table-bg: var(--color-alpha);
}

/* [↑]_CEASE[S] >> [06]_COMPONENTS << SHB_[↑] */

/* [↓]_BEGIN[S] >> [07]_PAGE_STYLES << SHB_[↓] */
/* [↓]_BEGIN[S] >> LANDING_PAGE << SHB_[↓] */
.cms-identity-container {
    position: relative;
    z-index: 2;
}

.cms-identity-head {
    display: flex;
    grid-gap: 10px;
    align-items: center;
    flex-direction: column;
    margin-bottom: 6rem;
}

.cms-identity-avatar {
    width: 6rem;
    height: 6rem;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    padding: 1rem;
    background-color: var(--color-success-sb-lt);
}

.cms-identity-head h2 {
    margin: 0;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 140%;
    text-align: center;
}

.cms-identity-head p {
    margin: 0;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 140%;
    text-align: center;
    color: var(--color-grey-600);
}

.cms-identity-selection-list {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.cms-identity-selection-item {
    --cms-identity-font-size: 1.8rem;
    background: var(--color-white);
    border: 2px solid #DFE5EF;
    border-radius: 12px;
    width: calc(50% - 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 0;
    overflow: hidden;
}

.cms-identity-selection-item:hover {
    cursor: pointer;
    border-color: var(--color-success);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.cms-identity-content {
    gap: 1.6rem;
    width: 100%;
    display: flex;
    align-items: center;
}

.cms-identity-list-avatars {
    width: 8rem;
    height: 8rem;
    flex: 0 0 auto;
}

.cms-identity-text {
    font-weight: 600;
    font-size: var(--cms-identity-font-size);
    line-height: 140%;
}

.cms-identity-selection-box {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-identity-selection-box input {
    width: var(--cms-identity-font-size);
    height: var(--cms-identity-font-size);
}

.cms-acknowledgement {
    text-align: center;
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
    font-size: 1.6rem;
    line-height: 140%;
}

.cms-acknowledgement li {
    list-style: none;
}

/* [↑]_CEASE[S] >> LANDING_PAGE << SHB_[↑] */


/* [↓]_BEGIN[S] >> MAIN_PAGE << SHB_[↓] */

.cms-head-ed {
    flex: 0 0 auto;
}

.cms-close-button {
    width: 2em;
    height: 2em;
    font-size: 2rem;
    border-radius: 8px;
    border: 1px solid var(--color-grey-100);
    color: var(--base-color-text);
    background: var(--color-white);
    transition: all 0.35s ease-in-out;
}

.cms-close-button:hover,
.cms-close-button:focus,
.cms-close-button:active {
    color: var(--color-grey-500);
    background: var(--color-grey-050);
    transition: all 0.35s ease-in-out;
}

.cms-action-bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    height: var(--cms-action-height);
    border-bottom: 1px solid var(--color-grey-200);
}

.cms-action-bar-st {
    width: calc(50% - 1px);
    padding: 2rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cms-action-bar-st p {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 140%;
}

.cms-content-divider {
    background-color: var(--color-grey-500);
    width: 2px;
}

.cms-action-bar-ed {
    width: calc(50% - 1px);
    flex: 0 0 auto;
    padding: 1rem 2rem;
}

.cms-action-search-box {
    position: relative;
    font-size: 1.6rem;
}

.cms-action-search-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--base-color-text);
}

.cms-image-search-input.form-control {
    font-family: var(--font-alpha);
    font-weight: 500;
    font-size: 1em;
    line-height: 140%;
    padding: 1rem calc(1em + (.75em * 2));
    border-radius: 8px;
    color: var(--base-color-text);
    background-color: var(--color-grey-050);
}

.cms-image-search-input.form-control:focus {
    box-shadow: none;
    outline: none;
}

.cms-action-search-button {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    font-size: 1em;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--base-color-text);
}

.cms-action-bar-ed .dropdown .dropdown-menu {
    --bs-dropdown-min-width: 100%;
    --bs-dropdown-font-size: 1.6rem;
    --bs-dropdown-item-padding-y: 1rem;
    --bs-dropdown-link-active-bg: var(--color-grey-600);
    max-height: 200px;
    overflow-y: auto;
}

.cms-action-bar-ed .dropdown-menu .dropdown-items {
    gap: 6px;
    display: flex;
    flex-direction: column;
}

.dropdown-item-head {
    display: block;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 140%;
    color: var(--base-color-text);
}

.dropdown-item-desc {
    display: block;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 140%;
    color: var(--color-grey-700);
}

.cms-main-content-body {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    height: calc(100% - var(--cms-action-height));
    /* overflow-y: auto; */
}

.cms-main-content-st {
    width: calc(50% - 1px);
    height: 100%;
    flex: 0 0 auto;
    overflow: auto;
    /* height: auto; */
    /* padding-left: 40px; */
}

.cms-main-content-st .image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.cms-main-content-st .image-wrapper img {
    max-width: unset;
    max-height: unset;
}

.cms-button-reset-abs {
    /* position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5; */
    display: none;
}

.cms-button-reset {
    display: none;
}

.cms-main-content-ed {
    height: 100%;
    width: calc(50% - 1px);
    flex: 0 0 auto;
    padding: 1.6rem;
    overflow-y: auto;
    background-color: var(--color-grey-050);
}

.cms-zoomed-version-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.cms-zoomed-version-head {
    gap: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cms-zoomed-version-head-st {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.cms-zoomed-version-head-ed {
    flex-shrink: 0;
}

.cms-button-key .cms-button-icon {
    transform: rotate(90deg);
    display: inline-block;
}

.cms-zoomed-version-title {
    font-weight: 700;
    font-size: 2rem;
    line-height: 140%;
}

.cms-blank-space-card {
    padding: 1.6rem;
    text-align: center;
    border-radius: 8px;
    background: var(--color-gray-100);
}

.cms-blank-space-card-body {
    gap: 1rem;
    display: flex;
    flex-direction: column;
    max-width: 24rem;
    height: 100%;
    max-height: 300px;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
}


.cms-blank-space-card-body h5 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 140%;
    margin: 0;
}

.cms-blank-space-card-body p {
    font-weight: 500;
    font-size: 12px;
    line-height: 20.4px;
    margin: 0;
}

.cms-zoomed-card {
    border-radius: 8px;
    background: var(--color-gray-100);
    padding: 0 1.6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-zoomed-data-container {
    gap: 1.6rem;
    display: flex;
    flex-direction: column;
}

.cms-zoomed-answer-box {
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.cms-zoomed-debug-panel h4,
.cms-zoomed-answer-box h4 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 140%;
    margin: 0;
}

.cms-zoomed-answer-form {
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cms-zoomed-answer-form button {
    flex: 0 0 auto;
}

.cms-zoomed-debug-panel {
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.cms-region-list {
    gap: 10px;
    display: flex;
    align-items: center;
}

.cms-region-list .intersection-item {
    max-width: 120px;
    padding: 0.8rem 1.2rem;
    border-radius: 3px;
    cursor: pointer;
    background: var(--color-gray-200);
    border-left: 4px solid var(--base-color-text);
    color: var(--base-color-text);
    transition: background 0.2s;
}

.cms-region-list .intersection-item:hover {
    background: var(--color-grey-400);
}

.cms-region-list .intersection-item.selected {
    color: var(--color-white);
    background: var(--color-success);
    border-left-color: var(--color-success-em);
}

.cms-incorrect-answer-feedback-container {
    gap: 6px;
    display: flex;
    flex-direction: column;
}

.cms-correct-answer-feedback,
.cms-incorrect-answer-feedback {
    gap: 10px;
    display: flex;
    align-content: center;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
}

.cms-correct-answer-feedback {
    color: var(--color-success);
}

.cms-incorrect-answer-feedback {
    color: var(--color-danger);
}

.cms-foot-process-button-group {
    gap: 8px;
    display: flex;
    align-items: center;
}

/* [↑]_CEASE[S] >> MAIN_PAGE << SHB_[↑] */

/* [↓]_BEGIN[S] >> ADMIN_STYLES << SHB_[↓] */
.cms-tab-content.tab-content .tab-pane {
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    background: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cms-tab-content.tab-content .tab-pane-heading {
    color: var(--base-color-text);
    border-bottom: 2px solid var(--base-color-text);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.cms-acknowledgement-list {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.cms-acknowledgement-item {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    border-radius: 4px;
    padding: 1.6rem;
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cms-acknowledgement-content-column {
    gap: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cms-acknowledgement-content-action {
    flex-shrink: 0;
}

.cms-acknowledgement-content-action .btn {
    font-size: 2rem;
    line-height: 1;
    padding: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-stats-card {
    background: linear-gradient(135deg, var(--color-alpha-sb) 0%, var(--color-alpha) 100%);
    color: var(--color-white);
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    border-radius: 10px;
    font-size: 1.8rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.cms-stats-card h4 {
    font-size: 2em;
    font-weight: 900;
    line-height: 100%;
    margin-bottom: 0;
    color: var(--color-white);
}

/* [↑]_CEASE[S] >> ADMIN_STYLES << SHB_[↑] */

/* [↓]_BEGIN[S] >> DEV_STYLES << DEV_[↓] */
.clickable-box {
    position: absolute;
    cursor: pointer;
    background: transparent;
    /* border: 1px solid rgba(255, 0, 0, 0.3); */
    pointer-events: none;
    z-index: 2;
}

.click-mode .clickable-box {
    pointer-events: auto;
}

.zoom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

#modeBtn {
    display: none !important;
}

.mode-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

.mode-btn:hover {
    background: #0056b3;
}

.mode-btn.active {
    background: #28a745;
}

.intersection-box {
    position: absolute;
    border: 2px solid rgba(255, 20, 147, 0.7);
    background: rgba(255, 20, 147, 0.2);
    pointer-events: none;
}

.selected-region {
    position: absolute;
    border: 1px solid rgba(255, 255, 0, 0.8);
    background: rgba(255, 255, 0, 0.16);
    pointer-events: none;
    z-index: 4;
}

.persistent-selection {
    position: absolute;
    /* border: 1px solid rgba(255, 0, 0, 0.8); */
    background: transparent;
    pointer-events: none;
    z-index: 3;
}

#labelInfo {
    margin-top: 15px;
    font-size: 14px;
    color: #444;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
}

.stats-info {
    display: none;
    background: #e7f3ff;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 12px;
}

.mode-indicator {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.hover-mode {
    background: #d4edda;
    color: #155724;
}

.click-mode {
    background: #fff3cd;
    color: #856404;
}

.freeze-mode {
    background: #f8d7da;
    color: #721c24;
}

.debug-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 8px;
    margin: 10px 0;
    font-size: 11px;
    border-radius: 4px;
}

.answer-error {
    color: var(--color-danger);
    display: none;
}

/* #mainImage {
    display: block;
    max-width: 100%;
    height: auto;
} */

/* .zoom-container {
    position: relative;
    border: 1px solid #ccc;
    width: 300px;
    height: 300px;
    overflow: hidden;
    background: #f5f5f5;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* .search-box {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
} */

/* .zoom-info {
    color: #666;
    font-size: 12px;
    margin-bottom: 10px;
} */

/* [↑]_CEASE[S] >> DEV_STYLES << DEV_[↑] */
/* [↑]_CEASE[S] >> [07]_PAGE_STYLES << SHB_[↑] */

/* Harsh Added */