:root {
    /* Backgrounds */
    --bg-color-body: #eff2f4;
    --bg-color-card: #ffffff;
    --bg-color-callout: #eff2f4;
    --bg-color-footer: #374450;
    --bg-color-warning: #fff6e8;
    /* Colors */
    --color-primary: #50b4d6;
    --color-level-beginner: #333;
    --color-level-cap: #deb41e;
    --color-lightGrey: #eff2f4;
    --color-light-contrast: #eff2f4;
    --color-header: #374450;
    --color-text: #374450;
    --color-darkGrey: #3f4144;
    --color-darkGrey-hover: #323436;
    --color-error: #d43939;
    --color-success: #71b079;
    --color-warning: #eeb863;
    --color-warning-dark: #986d2a;
    --color-autotranslate-start: #38a169;
    --color-autotranslate-end: #9b2c2c;
    /* Borders */
    --border-color-input: #a8bec3;
    --border-color-input-hover: #5a6669;
    /* Grid */
    --grid-maxWidth: 160rem;
    --grid-gutter: 2rem;
    /* Table */
    --table-row-alt-bg: rgba(239, 242, 244, 0.5);
    /* Font */
    --font-display: 'Highwind', san-serif;
    --font-family-header: 'Highwind', 'Roboto', arial, sans-serif;
    --font-family-body: 'Roboto', monaco, 'Consolas', 'Lucida Console',
        sans-serif;
    --font-family-mono: 'Inconsolata', monaco, 'Consolas', 'Lucida Console',
        monospace;
    /* Shadow */
    --shadow-card: 0px 4px 20px rgba(40, 59, 76, 0.1);
    --shadow-button: 0px 5px 10px rgba(40, 59, 76, 0.2);
    --shadow-section: 0px 0px 20px rgba(40, 59, 76, 0.4);
    --shadow-tag: 0 0 2px rgba(40, 59, 76, 0.8);
    /* zIndex */
    --zIndex-notifications: 40;
}

:root[data-theme="dark"] {
    /* Backgrounds */
    --bg-color-body: #121212;
    --bg-color-card: #1e1e1e;
    --bg-color-callout: #2a2a2a;
    --bg-color-footer: #37445080;
    --bg-color-warning: #2e2e1e;

    /* Colors */
    --color-primary: #50b4d6;
    --color-level-beginner: #ccc;
    --color-level-cap: #deb41e;
    --color-lightGrey: #2a2a2a;
    --color-header: #a9afb5;
    --color-text: #e1e1e1;
    --color-darkGrey: #5a5a5a;
    --color-darkGrey-hover: #4e4e4e;
    --color-error: #ff6f6f;
    --color-success: #71b079;
    --color-warning: #f4c95d;
    --color-warning-dark: #986d2a;
    --color-autotranslate-start: #38a169;
    --color-autotranslate-end: #9b2c2c;

    /* Borders */
    --border-color-input: #555;
    --border-color-input-hover: #777;

    /* Tables */
    --table-row-alt-bg: rgba(42, 42, 42, 0.7);

    /* Shadows */
    --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-button: 0px 5px 10px rgba(0, 0, 0, 0.6);
    --shadow-section: 0px 0px 20px rgba(0, 0, 0, 0.8);
    --shadow-tag: 0 0 2px rgba(0, 0, 0, 1);
}

* {
    box-sizing: border-box;
}

body {
    color: var(--color-text);
    font-family: var(--font-family-body);
    margin: 0;
    padding: 0;
    background-color: var(--bg-color-body);
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    height: auto;
    overflow-y: scroll;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}

a {
    color: var(--color-primary);
}

input,
select,
button {
    color: var(--color-text);
    font-family: var(--font-family-body);
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}

button,
a {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-header);
    font-family: var(--font-family-header);
    letter-spacing: 2px;
    font-weight: 400;
}

h2 {
    font-size: 36px;
    line-height: 36px;
    margin-top: 0;
    margin-bottom: 24px;
}

h3 {
    font-size: 26px;
    line-height: 32px;
    margin-top: 0;
    margin-bottom: 20px;
}

h4 {
    font-size: 22px;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 16px;
}

p {
    margin: 20px 0;
}

img {
    user-drag: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
}

.notifications {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 0;
    overflow: visible;
    z-index: var(--zIndex-notifications);
}

.notifications .position-top-right {
    position: absolute;
    width: 430px;
    top: 8px;
    right: 0;
}

/* DataTables */
.dt-table {
    padding: 0 20px 10px;
    background: var(--bg-color-card) !important;
    box-shadow: var(--shadow-card);
    border-radius: 8px;
    overflow: hidden;
}

.dt-search {
    display: none;
}

.dt-pagination {
    height: initial;
    padding: 1rem 0;
    align-items: center;
    margin-top: 2rem;
}

.dt-pagination-rowcount {
    padding: 12px 20px;
    background: var(--bg-color-card) !important;
    box-shadow: var(--shadow-card);
    border-radius: 8px;
}

.dt-pagination-buttons {
    display: flex;
    column-gap: 8px;
    margin: 0;
    padding: 0;
}

.dt-pagination-buttons button {
    background: var(--bg-color-card);
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.dt-pagination-buttons button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dt-pagination-buttons button.active {
    cursor: default;
    color: var(--color-primary);
}

.datatable table {
    width: 100%;
    color: var(--color-header);
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0px 8px;
    font-weight: 600;
}

.datatable table p {
    margin-bottom: 0;
}

.datatable td,
.datatable th {
    text-align: left;
    vertical-align: top;
    padding: 14px 20px;
    border: none;
}

.datatable th {
    border-bottom: 1px solid rgba(82, 100, 117, 0.2);
}

.datatable tr:nth-of-type(2n) td {
    background: var(--table-row-alt-bg);
}

.datatable tr>td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.datatable tr>td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.datatable tbody tr:last-child {
    border: none;
}

/* Autotranslate styles */
.gm_autotranslate-start {
    color: var(--color-autotranslate-start);
    font-weight: bold;
}

.gm_autotranslate-end {
    color: var(--color-autotranslate-end);
    font-weight: bold;
}

.gm_autotranslate-start>img,
.gm_autotranslate-end>img {
    vertical-align: middle;
}

/* Recaptcha */
.grecaptcha-badge {
    visibility: hidden;
}


@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0 !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0 !important;
        scroll-behavior: auto !important;
    }
}


/**
 * SEEKING AG-GRID OVERRIDES
 */
.ag-button.ag-standard-button.ag-filter-apply-panel-button {
    border-radius: 4px !important;
    outline: none !important;
    border: 1px solid #000 !important;
    font-size: 12px !important;
    padding: 0px 8px !important;
}

.ag-input-field-input.ag-text-field-input,
.ag-input-field-input.ag-number-field-input {
    height: 24px !important;
    margin-top: 4px !important;
}

/**
 * Layout styles (from _layout.svelte)
 */
.page-background {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.1;
    background-image: url('https://pub-8d18c77b6a6c43f2ae9fc4c782ef9b78.r2.dev/images/page-background-by-zeppo.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 70% 120%;
    border-radius: 12px 12px 8px 8px;
}

@media only screen and (min-width: 900px) {
    .page-background {
        background-size: 80%;
        background-position: 125% 125%;
    }
}

@media only screen and (min-width: 1200px) {
    .page-background {
        background-size: 70%;
        background-position: bottom -100px right -150px;
    }
}

.page-body {
    margin-top: 72px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 72px);
}

.content {
    flex: 1 0 auto;
    margin-top: 80px;
    margin-bottom: 80px;
}

/**
 * Scrollbar
 */
::-webkit-scrollbar-track {
    background-color: var(--bg-color-body);
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(55, 68, 80, 0.5);
    border-radius: 5px;
    border: 2px solid var(--bg-color-body);
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(55, 68, 80, 0.7);
}

/* Dark theme scrollbar */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(169, 175, 181, 0.3);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(169, 175, 181, 0.5);
}