: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;
}

/**
 * svelte-select overrides
 */
.svelte-select-container {
    background-color: var(--bg-color-card) !important;
    color: var(--color-text) !important;
}

.svelte-select-container .list-container {
    background-color: var(--bg-color-callout) !important;
}

.svelte-select-container .item {
    color: var(--color-text) !important;
}

.svelte-select-container .item:hover {
    background-color: var(--bg-color-body) !important;
}

:root[data-theme='dark'] .svelte-select-container {
    background-color: var(--bg-color-card) !important;
    color: var(--color-text) !important;
}

:root[data-theme='dark'] .svelte-select-container .list-container {
    background-color: var(--bg-color-footer) !important;
}

:root[data-theme='dark'] .svelte-select-container .item {
    color: var(--color-text) !important;
}

:root[data-theme='dark'] .svelte-select-container .item:hover {
    background-color: var(--color-darkGrey-hover) !important;
}