@import "components/theme_portal-r16sRFv.css";
@import "components/theme_nordic-xcXNT0x.css";
@import "components/theme_vanta-K_F3Cj4.css";
@import "components/theme_christmas-14d8_0u.css";
@import "components/theme_new_year-zq-_mZr.css";
@import "components/theme_halloween-rTNPY7s.css";
@import "components/theme_easter-IfJc3OK.css";
@import "components/theme_fourth_of_july-q70sFkX.css";
@import "components/theme_lights_out-Qyr0BhW.css";
@import "components/fonts-gq3povm.css";

:root {
    --navbar-height: 92px;
    --sidebar-width: 300px;
    --sidebar-height: calc(100vh - var(--navbar-height));
    --main-height: calc(100vh - var(--navbar-height));
    --main-width: calc(100vh - var(--sidebar-width));
}

html, body{
    font-family: "Inter", sans-serif;
    height: 100%;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
/*    overflow: hidden;*/
}

html::before {
    content: '';
    position: fixed;
    inset: 0;
    background: inherit;
    z-index: -1;
}

body {
    display: flex;
    flex-direction: column;
}

label.required:after {content: "* ";color: red;}

a, a:visited, a:hover, a:active, .btn-link {
    text-decoration: none;
}

/* ============================================================= */
/*                          PAGE LAYOUT                          */
/* ============================================================= */
.navbar {
    height: var(--navbar-height);
    position: sticky;
    top: 0;
    z-index: 1081;
}

.main-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.sidebar {
    width:var(--sidebar-width);
    padding: 1.5rem 0;
    position: sticky;
    flex-shrink: 0;
    top: var(--navbar-height);
    height: var(--sidebar-height);
    z-index: 1080;
    scrollbar-gutter: stable;
}

main {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    width: var(--main-width);
    height: var(--main-height);
}

.offcanvas-lg{
    background-color: var(--bs-body-bg) !important;
    min-width: 35%;
    padding: 2rem !important;
    margin-top: 4.55rem;
    margin-bottom: 1px;
    overflow-y: scroll;
    box-shadow: -4px 0 20px -4px rgba(var(--bs-primary-rgb), 0.35) !important;
}


#preferences-form{
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    height: calc(100vh - var(--navbar-height));
    width: 380px;
    z-index: 1080;
    background-color: var(--bs-body-bg);
    box-shadow: -6px 0 20px -6px rgba(var(--bs-primary-rgb), 0.55) !important;
    transition: ease-in-out;
}

[data-bs-theme] * {
    --portal-body-color: var(--bs-body-color);
    --portal-body-background: var(--bs-body-bg);
    --portal-sidebar-background: var(--bs-body-bg);
    --portal-navbar-background: var(--bs-body-bg);
    --portal-main-background: var(--bs-body-bg);
    --portal-scrollbar-track-color: var(--bs-body-bg);
    --portal-scrollbar-thumb-color: var(--bs-secondary-bg);
    --bs-link-color: var(--bs-link-color);
    --bs-link-hover-color: var(--bs-link-hover-color);
    --bs-heading-color: var(--bs-heading-color);
    --bs-btn-color: var(--bs-btn-color);
    --bs-badge-color: var(--bs-badge-color);
}

[data-bs-theme] .btn-primary   {color: var(--bs-btn-color); background-color: var(--bs-primary); border-color: var(--bs-primary); }
[data-bs-theme] .btn-success   {color: var(--bs-btn-color); background-color: var(--bs-success); border-color: var(--bs-success); }
[data-bs-theme] .btn-danger    {color: var(--bs-btn-color); background-color: var(--bs-danger) ; border-color: var(--bs-danger); }
[data-bs-theme] .btn-warning   {color: var(--bs-btn-color); background-color: var(--bs-warning); border-color: var(--bs-warning); }
[data-bs-theme] .btn-info      {color: var(--bs-btn-color); background-color: var(--bs-info); border-color: var(--bs-info); }
[data-bs-theme] .btn-secondary {color: var(--bs-btn-color); background-color: var(--bs-secondary) ; border-color: var(--bs-secondary); }
[data-bs-theme] .btn-light     {color: var(--bs-btn-color); background-color: var(--bs-light); border-color: var(--bs-light); }
[data-bs-theme] .btn-dark      {color: var(--bs-btn-color); background-color: var(--bs-dark); border-color: var(--bs-dark); }

/* Hover states (optional but recommended) */
[data-bs-theme] .btn-primary:hover   { background-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important; border-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important; }
[data-bs-theme] .btn-success:hover   { background-color: color-mix(in srgb, var(--bs-success) 85%, black) !important; border-color: color-mix(in srgb, var(--bs-success) 85%, black) !important; }
[data-bs-theme] .btn-danger:hover    { background-color: color-mix(in srgb, var(--bs-danger)  85%, black) !important; border-color: color-mix(in srgb, var(--bs-danger)  85%, black) !important; }
[data-bs-theme] .btn-warning:hover   { background-color: color-mix(in srgb, var(--bs-warning) 85%, black) !important; border-color: color-mix(in srgb, var(--bs-warning) 85%, black) !important; }

[data-bs-theme] .card,
[data-bs-theme] .modal,
[data-bs-theme] .modal-content,
[data-bs-theme] .dropdown-menu,
[data-bs-theme] .offcanvas,
[data-bs-theme] .toast,
[data-bs-theme] .alert,
[data-bs-theme] .popover,
[data-bs-theme] .accordion,
[data-bs-theme] .list-group,
[data-bs-theme] .navbar,
[data-bs-theme] .nav,
[data-bs-theme] .pagination,
[data-bs-theme] .breadcrumb {
    --bs-link-color: var(--bs-link-color);
    --bs-link-hover-color: var(--bs-link-hover-color);
    --bs-heading-color: var(--bs-heading-color);
    --bs-btn-color: var(--bs-btn-color);
    --bs-badge-color: var(--bs-badge-color);

    a { color: var(--bs-link-color)}
    a:hover { color: var(--bs-link-hover-color); }
    h1, h2, h3, h4, h5, h6 { color: var(--bs-heading-color) ; }
    a i{ color: var(--bs-btn-color) ; }
}

/* WebKit/Blink browsers (Chrome, Edge, new Opera, Safari) */
[data-bs-theme] ::-webkit-scrollbar {
    width: 12px;                     /* vertical scrollbar */
    height: 12px;                    /* horizontal scrollbar */
    background: transparent !important;
}

[data-bs-theme] ::-webkit-scrollbar-track,
[data-bs-theme]::-webkit-scrollbar-track-piece,
[data-bs-theme]::-webkit-scrollbar-corner {
    background: rgba(var(--bs-body-bg-rgb), 0.9);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

[data-bs-theme] ::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-primary-rgb), 0.85);
    border-radius: 10px;
    border: 2px solid rgba(var(--bs-body-bg-rgb), 0.9);
}

[data-bs-theme] ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-primary-rgb), 1);
}

[data-bs-theme] ::-webkit-scrollbar-corner {
    background: rgba(var(--bs-body-bg-rgb), 0.9);
}

[data-bs-theme] .sidebar,
[data-bs-theme] main{
    scrollbar-color: var(--portal-scrollbar-track-color) var(--portal-scrollbar-thumb-color);
    scrollbar-width: var(--portal-scrollbar-width);
}

[data-bs-theme="dark"],
[data-bs-theme="light"]{
    --portal-scrollbar-color: auto;
    --portal-scrollbar-width: thin;
}

[data-bs-theme="light"] .sidebar,
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="light"] .navbar,
[data-bs-theme="dark"] .navbar{
    color: var(--bs-link-color);
}

.pre{
    overflow-x: auto;        /* ← horizontal scroll if needed */
    white-space: pre-wrap;   /* ← preserves formatting + wraps */
    word-wrap: break-word;   /* ← breaks long words */
}

.icon-box{
    border-radius: 10px;
    width: 45px;
    height: 45px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 25px;
}

li.menu-label{font-size: .8rem;margin-top: .8rem}

/**
 * FLEX GROW. WONDERING WHY BS DOES NOT HAVE THESE BY DEFAULT.
 */
.flex-grow-2{flex-grow: 2 !important;}
.flex-grow-3{flex-grow: 3 !important;}
.flex-grow-4{flex-grow: 4 !important;}

/**
 * EXTRA TOPS
 */
.top-after-navbar{top: calc(var(--navbar-height) + 0.75rem);}
.top-5{top: 5% !important;}
.top-10{top: 10% !important;}
.top-15{top: 15% !important;}
.top-20{top: 20% !important;}
.top-25{top: 25% !important;}
.top-30{top: 30% !important;}
.top-35{top: 35% !important;}
.top-40{top: 40% !important;}
.top-45{top: 45% !important;}
.top-55{top: 55% !important;}
.top-60{top: 60% !important;}
.top-65{top: 65% !important;}
.top-70{top: 70% !important;}
.top-80{top: 80% !important;}
.top-85{top: 85% !important;}
.top-90{top: 90% !important;}
.top-95{top: 95% !important;}

/**
 * EXTRA BOTTOMS
 */
.bottom-0{bottom: 0 !important;}
.bottom-5{bottom: 5% !important;}
.bottom-10{bottom: 10% !important;}
.bottom-20{bottom: 20% !important;}
.bottom-25{bottom: 25% !important;}

/**
 * EXTRA Z-INDEXES
 */
.z-99{z-index: 99 !important;}
.z-999{z-index: 999 !important;}
.z-9999{z-index: 9999 !important;}

/** avatar **/
.avatar {position: relative; vertical-align: middle;display: inline-block;}
.avatar-sm{width: 2.5rem;height: 2.5rem;}
.avatar-lg{width: 3.5rem;height: 3.5rem;}
.avatar-xl{width: 4.5rem;height: 4.5rem;}
.avatar-sm img, .avatar-lg img, .avatar-xl img{width: 100%; height: 100%;}

.avatar-text{
    text-align: center;
    margin-right: .5rem !important;
    border-radius: 50% !important;
    color: #fff;
}

.avatar-text-sm{height: 32px;width: 32px;line-height: 32px;}
.avatar-text-md{height: 64px;width: 64px;line-height: 64px;}
.avatar-text-xl{height: 128px;width: 128px;line-height: 128px;}
.avatar-text-xxl{height: 256px;width: 265px;line-height: 256px;}

/** custom checkbox **/
.checkbox-container {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
}

/* Checkmark icon */
.checkbox-container::after {
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    margin-left: 7px;
    margin-top: 3px;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;

    transform: rotate(45deg);
    visibility: hidden; /* Initially hidden */
}

/* Show checkmark icon when container is checked */
.checkbox-container.checked{
    background-color: #0d6efd;
}
.checkbox-container.checked::after {
    visibility: visible;
}

.form-select-small{
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.625rem;
    font-size: 0.875rem;
    background: white !important;
}

.hr {border: none;margin-top:.5rem;margin-bottom: .5rem;}

.signature{
    width: 100%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/** extra text colors **/
.text-orange{opacity:1; color: #fd7e14;}
.text-purple{opacity:1; color: #6f42c1;}

/** gradient backgrounds **/
.bg-gradient-purple{background-image: linear-gradient(to right, rebeccapurple, purple);}
.bg-gradient-green{background-image: linear-gradient(to right, greenyellow, green);}
.bg-gradient-pinkish {background: linear-gradient(to right, #e66465, #9198e5) !important;}
.bg-gradient-red {background-image: linear-gradient(to right, firebrick, red);}
.bg-gradient-yellow {background-image: linear-gradient(to right, yellow, orange);}
.bg-gradient-blue {background-image: linear-gradient(to right, blue, #0a53be);}
.bg-gradient-sad {background: linear-gradient(to right, #e66465, #F0F65D) !important;}
.bg-gradient-exotic{background: linear-gradient(to right, #FE68C8, #FF8F95) !important;}
.bg-gradient-antarctica{background: linear-gradient(to right, #CAB4F9, #1DAF99) !important;}
.bg-gradient-trio {background-image: linear-gradient(to right, violet, darkred, purple);}

.column-md-2 {
    column-count: 2; /* Split content into three columns */
    column-gap: 20px; /* Space between columns */
    break-inside: avoid;
    }

.column-md-3 {
    column-count: 3; /* Split content into three columns */
    column-gap: 20px; /* Space between columns */
    break-inside: avoid;
}

.icon, .rounded-icon{
    text-align: center;
    line-height: 30px;
    width: 32px;
    height: 32px;
    padding: 2px;
    margin: 0;
}

.rounded-icon{
    border-radius: 50%;
}

.form-builder-component,
.form-builder-element
{
    margin-bottom: 1rem;
}