* {
    box-sizing: border-box;
}

html.site {
  scrollbar-gutter: stable;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

a {
    text-decoration: none;
}

ul, ol {
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

ul ul, ol ol {
    padding-left: 1.25rem;
}

:focus {
    outline: 0;
}

:focus-visible {
    outline-offset: -1px;
    outline: 2px solid var(--primary);
}

:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================================================
    Basic Grid
 ========================================================================== */

.row-fluid {
    display: flex;
    gap: 1.25rem;
    width: 100%;
}

.row-fluid > [class*="ba-col-"] {
    width: calc(var(--col) / 12 * 100%);
}

.column-wrapper > [class*="ba-col-"] {
    width: calc((var(--col) / 12 * 100%) - 1.25rem);
}

.ba-col-1  { --col: 1; }
.ba-col-2  { --col: 2; }
.ba-col-3  { --col: 3; }
.ba-col-4  { --col: 4; }
.ba-col-5  { --col: 5; }
.ba-col-6  { --col: 6; }
.ba-col-7  { --col: 7; }
.ba-col-8  { --col: 8; }
.ba-col-9  { --col: 9; }
.ba-col-10 { --col: 10; }
.ba-col-11 { --col: 11; }
.ba-col-12 { --col: 12; }

/* ========================================================================
    Basic CSS Classes
 ========================================================================== */

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

body .ba-hide-element {
    display: none;
}

/* ============ Display Properties ============ */

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

.ba-flex-inline {
    display: inline-flex;
}

/* ============ Thumbnails and Images ============ */

.ba-thumb-sq {
    background-position: center;
    background-size: cover;
    border-radius: 0.25rem;
    height: 3rem;
    min-width: 3rem;
}

.ba-img-thumb-sq {
    border-radius: 0.25rem;
    height: 3rem;
    object-fit: cover;
    width: 3rem;
}

.ba-img-thumb-sq-2xl {
    border-radius: 0.5rem;
    height: 6rem;
    object-fit: cover;
    width: 6rem;
}

.ba-img-cr-lg {
    border-radius: 50%;
    height: 3rem;
    object-fit: cover;
    width: 3rem;
}

/* ========================================================================
    Basic Elements
 ========================================================================== */

fieldset {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

input, select, textarea {
    background: none;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    font-family: inherit;
    font-size: inherit;
    height: 3rem;
    margin: 0;
    padding: 0.5rem;
    width: 100%;
}

textarea {
    display: block;
    max-width: 100%;
    min-height: 6.25rem;
    resize: vertical;
}

button {
    background: none;
    border: none;
    color: var(--title);
    cursor: pointer;
    line-height: 0;
    padding: 0;
}

table {
    width: 100%;
}

img, video {
    height: auto;
    width: 100%;
}

hr {
    background-color: var(--border);
    border: 0;
    height: 1px;
    margin-block: 2rem;
}

blockquote {
    background: var(--bg-secondary);
    border-left: 0.25rem solid var(--primary);
    margin: 2rem 0;
    padding: 2rem;
}

.ba-required {
    outline-offset: -1px;
    outline: 2px solid #d93025;
}

.highlight {
    background-color: yellow;
}

/* ============ Basic Elements - Button ============ */

.ba-btn {
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    color: inherit;
    font-family: inherit;
    font-size: 0.813rem;
    font-weight: 700;
    line-height: initial;
    padding: 1rem;
}

.ba-btn:hover {
    background-color: var(--bg-secondary);
    color: inherit;
}

.ba-btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--title-inverse);
}

.ba-btn-primary:hover {
    background-color: var(--primary);
    color: var(--title-inverse);
    opacity: 0.9;
}

/* ============ Basic Elements - Input Icon ============ */

.ba-field-icon {
    position: relative;
}

.ba-field-icon input {
    padding-left: 2rem !important;
}

.ba-field-icon svg {
    left: 0.5rem;
    opacity: 0.25;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
}

/* ============ Basic Elements - Checkbox and Radio ============ */

input:is([type="radio"], [type="checkbox"]) {
    appearance: none;
    border: 1px solid #ddd;
    cursor: pointer;
    height: 1.25rem;
    margin-right: 0.75rem;
    position: relative;
    vertical-align: sub;
    width: 1.25rem;
}

input[type="checkbox"] {
    border-radius: 0.25rem;
}

input[type="radio"] {
    border-radius: 50%;
}

input:is([type="radio"], [type="checkbox"]):checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

input:is([type="radio"], [type="checkbox"]):checked::after {
    color: #fff;
    content: "✓";
    font-size: 1rem;
    font-weight: 700;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* ========================================================================
    Tabs
 ========================================================================== */

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

/* ========================================================================
    Page Grid
 ========================================================================== */

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.body {
    flex: 1 1 auto;
}

.ba-container {
    margin: 0 auto;
    max-width: 100%;
}

/* ============ Page Grid - Basic Structure Elements ============ */

.ba-section, .ba-row, .ba-grid-column {
    max-width: 100%;
    min-height: 3rem;
    position: relative;
}

.ba-section, .ba-row {
    align-items: center;
    display: flex;
}

.ba-section-items {
    margin: 0 auto;
    width: 100%;
}

.ba-section {
    z-index: 1;
}

.ba-row {
    z-index: 2;
}

.ba-grid-column {
    z-index: 3;
}

.ba-layer-z {
    position: relative;
    z-index: 50;
}

/* ============ Page Grid - Overlay ============ */

.ba-overlay {
    border-radius: inherit;
    inset: 0;
    position: absolute;
}

body > .ba-overlay {
    position: fixed;
    z-index: -1;
}

/* ============ Page Grid - Video Background ============ */

.ba-video-background {
    border-radius: inherit;
    inset: 0;
    overflow: hidden;
    position: absolute;
}

.ba-video-background > div {
    width: 100%;
    height: 100%;
}

.ba-video-background video {
    height: 100%;
    object-fit: cover;
}

.ba-video-background iframe {
    height: calc(100vw * .5625);
    left: calc(0px - ((100vw - 100%) / 2));
    position: absolute;
    top: calc(50% - ((100vw * .5625) / 2));
    width: 100vw;
}

body > .ba-video-background {
    z-index: -4;
}

body > .ba-video-background * {
    position: fixed;
}

.ba-section > .ba-video-background {
    z-index: -3;
}

.ba-row .ba-video-background {
    z-index: -2;
}

.ba-grid-column .ba-video-background {
    z-index: -1;
}

/* ============ Page Grid - Animation ============ */

.visible {
    animation-fill-mode: both;
}

/* ========================================================================
    Page Grid - Basic CSS Classes
 ========================================================================== */

.ba-border-reset {
    --border-width: 0;
    --border-style: none;
    --border-color: transparent;
    --border-radius: 0;
    --border-top: 0;
    --border-right: 0;
    --border-bottom: 0;
    --border-left: 0;
}

.ba-shadow-reset {
    --shadow-horizontal: 0;
    --shadow-vertical: 0;
    --shadow-blur: 0;
    --shadow-spread: 0;
    --shadow-color: transparent;
}

.ba-border {
    border-style: var(--border-style);
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    border-width:
        calc(var(--border-top) * var(--border-width))
        calc(var(--border-right) * var(--border-width))
        calc(var(--border-bottom) * var(--border-width))
        calc(var(--border-left) * var(--border-width));
}

.ba-shadow {
    box-shadow:
        var(--shadow-horizontal)
        var(--shadow-vertical)
        var(--shadow-blur)
        var(--shadow-spread)
        var(--shadow-color);
}

/* ========================================================================
    Page Grid - Column
 ========================================================================== */

.column-wrapper {
    display: flex;
    gap: 1.25rem;
    position: relative;
    width: 100%;
}

.column-wrapper .ba-grid-column-wrapper {
    display: flex;
    flex-grow: 1;
    position: relative;
}

.ba-grid-column {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
}

/* ============ Column - Link ============ */

.ba-grid-column > a {
    cursor: pointer;
    inset: 0;
    position: absolute;
    z-index: 100;
}

/* ============ Column - Direction - Horizontal ============ */

.ba-col-direction-row {
    flex-direction: row;
}

.ba-col-direction-row.ba-col-x-left {
    justify-content: start;
}

.ba-col-direction-row.ba-col-x-center {
    justify-content: center;
}

.ba-col-direction-row.ba-col-x-right {
    justify-content: end;
}

.ba-col-direction-row.ba-col-y-top {
    align-items: start;
}

.ba-col-direction-row.ba-col-y-center {
    align-items: center;
}

.ba-col-direction-row.ba-col-y-bottom {
    align-items: end;
}

.ba-col-direction-row [class*="ba-col-x-"] > .ba-item {
    width: auto;
}

/* ============ Column - Direction - Vertical ============ */

:not(.ba-col-direction-row).ba-col-x-left {
    align-items: start;
}

:not(.ba-col-direction-row).ba-col-x-center {
    align-items: center;
}

:not(.ba-col-direction-row).ba-col-x-right {
    align-items: end;
}

:not(.ba-col-direction-row).ba-col-y-top {
    justify-content: start;
}

:not(.ba-col-direction-row).ba-col-y-center {
    justify-content: center;
}

:not(.ba-col-direction-row).ba-col-y-bottom {
    justify-content: end;
}

/* ========================================================================
    Page Grid - Sticky
 ========================================================================== */

/* ============ Sticky - Section ============ */

.ba-section-sticky.ba-wrapper {
    position: sticky;
    top: var(--section-sticky-offset);
    z-index: 20;  
}

/* ============ Sticky - Row ============ */

.ba-row-sticky {
    position: sticky;
    top: var(--row-sticky-offset);
    z-index: 40;
}

/* ============ Sticky - Column ============ */

.ba-col-sticky > .ba-grid-column {
    position: sticky;
}

.ba-col-sticky {    
    display: block !important;
}

/* ========================================================================
    Header
 ========================================================================== */

header {
    width: 100%;
    z-index: 1040;
}

/* ========================================================================
    Plugins
 ========================================================================== */

.ba-item {
    max-width: 100%;
    min-height: 1rem;
    position: relative;
    z-index: 4;
}

/* ========================================================================
    Modal Window - Basic Styles
 ========================================================================== */

.ba-modal-open {
    overflow: hidden;
}

.hide {
    display: none;
}

/* ========================================================================
    Tooltip
 ========================================================================== */

.ba-tooltip {
    background: #2c2c2c;
    border-radius: 4px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    color: #fff !important;
    display: none;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 18px;
    max-width: 200px;
    padding: 8px;
    position: absolute;
    width: max-content;
    z-index: 9060;
    -moz-osx-font-smoothing: initial;
    -webkit-font-smoothing: initial;
}

.ba-tooltip.ba-top {
    transform: translateY(-3.25rem);
}

.ba-tooltip.ba-bottom {
    transform: translateY(3.25rem);
}

.ba-tooltip.ba-right {
    transform: translateX(3.25rem);
}

.ba-tooltip.ba-last {
    right: 0;
}

*:hover > .ba-tooltip {
    display: block;
}

/* ========================================================================
    Drag and Drop
 ========================================================================== */

.sorting-handle {
    cursor: move;
}

.sorting-grid-handle-item {
    position: fixed;
}

.sorting-grid-placeholder-item {
    opacity: 0;
}

/* ========================================================================
    Context Panel
 ========================================================================== */

.ba-context-panel {
    background-color: var(--bg-primary);
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    display: none;
    overflow: hidden;
    position: absolute;
    width: 16rem;
    z-index: 2040;
}

.ba-context-panel-visible {
    display: block;
}

.ba-context-panel .ba-context-item {
    font-size: 0.875rem;
    line-height: initial;
    padding: 1rem 1.25rem;
    text-align: left;
    width: 100%;
}

.ba-context-panel .ba-context-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.ba-context-panel .ba-context-item:hover {
    background-color: var(--bg-secondary);
}