/* Local fonts*/
@font-face {
    font-family: "SourceSansPro";
    src: url("/static/fonts/SourceSansPro-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "SourceSansPro";
    src: url("/static/fonts/SourceSansPro-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "SourceSansPro";
    src: url("/static/fonts/SourceSansPro-SemiBold.ttf");
    font-weight: 500;

}

@font-face {
    font-family: "SourceSansPro";
    src: url("/static/fonts/SourceSansPro-Bold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "SourceSansPro";
    src: url("/static/fonts/SourceSansPro-Black.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "OxaniumVW";
    src: url("/static/fonts/Oxanium-VariableFont_wght.ttf");
}


/*Body base properties*/
body {
    margin: 0;

    --blue-color_50op: hsla(202, 65%, 45%, 0.5);
    --blue-color_25op: hsla(202, 65%, 45%, 0.25);
    --blue-color_17op: hsla(202, 65%, 45%, 0.17);
    --blue-color_10op: hsla(202, 65%, 45%, 0.10);
    --blue-color_5op: hsla(202, 65%, 45%, 0.05);
    --blue-to-dark-color_50op: hsl(206, 50%, 30%, 0.5);

    --dark-color: hsl(210, 35%, 15%);
    --blue-to-dark-color: hsl(206, 50%, 30%);
    --blue-color: hsl(202, 65%, 45%);
    --blue-to-clear-color: #94b8d4;
    --clear-color: rgb(243, 244.5, 247);
    --blue-to-magenta-color: #771fca;
    --magenta-color: #D81556;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-family: 'SourceSansPro', 'Source Sans Pro', sans-serif;
    font-size: 16px;
    scroll-behavior: smooth;
    background-color: var(--clear-color);
    min-height: 100vh;
}


/* Base rules*/
a {
    text-decoration: none;
    color: var(--blue-color);
    font-weight: 500;
}

h2 {
    font-size: 32px;
    color: var(--dark-color);
    font-weight: 400;
}

h3 {
    font-size: 22px;
    font-weight: 500;
}

strong {
    font-weight: 500;
}

form {
    min-width: 320px;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: textfield;
}

button,
input[type=submit],
input[type=button] {
    color: white;
    font-weight: 500;
    white-space: nowrap;
}

input:not([type=checkbox]),
select,
button {
    padding: 8px 16px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: white;
    border-radius: 4px;
    border: 1px solid var(--blue-color_50op);
    flex-grow: 1;
    font-family: inherit;
}

/* Dedicated classes */
.hidden {
    display: none
}

.main-button {
    border: 1px solid var(--blue-color) !important;
    background-color: var(--blue-to-dark-color) !important;
    border: none !important;
}

.alt-button {
    background-color: var(--magenta-color) !important;
    border: none !important;
}

.bigbutton {
    padding: 12px 24px;
}

.wide-button{
    width: 100%;
}

.button-icon-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.compact-input {
    flex-grow: 0;
    width: auto !important;
}

.grid-form {
    display: grid;
    grid-template-columns: fit-content(200px) auto;
    gap: 16px
}

.fullw-input-form{
    display: flex !important;
    flex-direction: column;
    gap: 16px

}

.grid-form button,
.grid-form h2 {
    grid-column: 1/3;
}

.grid-form label {
    display: flex;
    align-items: center;
}

.grid-form .form-label::after {
    content: "";
    padding: 0;
}

.form-label::after {
    content: ":";
    padding: 0 12px 0 2px;
}

.grid-form input,
.grid-form button,
.grid-form select {
    margin: 0 !important;
}

.inactive, button:disabled, button[disabled] {
    opacity: 0.5;
    filter: grayscale(50%);
}

.h-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.button-icon {
    padding-right: 8px
}

.toolbutton {
    background-color: #D81556;
    display: inline-block;
    padding: 0px;
    border-radius: 4px;
    width: 16px;
    height: 16px
}


/* Grid styling */
.ag-theme-alpine {
    margin: 1em 0;
    --ag-font-size: 16px;
    --ag-row-height: 50px;
    --ag-odd-row-background-color: var(--blue-color_5op);
    --ag-row-border-color: var(--blue-color_17op);
    --ag-header-background-color: var(--blue-to-dark-color);
    --ag-header-foreground-color: white;
    --ag-border-radius: 4px;
    --ag-header-cell-hover-background-color: var(--dark-color);
    --ag-font-family: inherit
}

.ag-header-row {
    font-size: 19px !important;
    font-weight: 500 !important;
}

.ag-root-wrapper {
    border-radius: 4px;
    border: 1px solid var(--blue-color_25op) !important;
}

@media only screen and (max-width: 480px) {

  }