:root {
    --nav-width: 14rem;
    --header-color: #3B454E;
    --text-color: #3B454E;
    --sub-text-color: #707070;
    --deselected-text-color: #cacaca;
    --nav-color: #828AA5;
    --link-color: #6880ee;
    --delphos-color: #10A37F;
    --success-color: #10A37F;
    --error-color: #FF0000;
    --button-color: #b9b9b9;
    --disabled-color: #727272;
    --highlight-color: rgb(250, 248, 225);
    --shadow-color: #868686;
    --icon-stroke: var(--nav-color);
    font-family: 'Inter', sans-serif;
    line-height: 1.5em;
    color: var(--text-color);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
}
div {
    display: inline-block;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

a.in-text {
    text-decoration: underline;
}

h1, h2, h3 {
    color: var(--header-color);
}

input[type='text'], input[type='number'], input[type='file'], input[type='file'], select, button {
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    color: var(--text-color);
}

select, option {
    background-color: white;
}

.icon-button-main {
    font-family: 'icon-worksregular';
    font-size: 2rem;
    cursor: pointer;
    color: var(--nav-color);
}

.icon-button-small {
    font-family: 'icon-worksregular';
    font-size: 1rem;
    cursor: pointer;
    color: var(--nav-color);
}

.icon-main {
    width: 1em;
    min-width: 1em;
    height: 1em;
}

.icon-big {
    width: 2em;
    height: 2em;
}

.hidden {
    display: none;
}

.error {
    background-color: gold;
    color: var(--text-color);
    width: 100%;
    padding: 1em;
    border-radius: 10px;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.input-box {
    min-height: 3rem;
    border-radius: 10px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    column-gap: 0.5em;
    /* justify-content: space-between; */
    align-items: center;
    padding: 0 10px 0 10px;
    min-width: 3em;
    overflow: hidden;
}

.input-box input, select, textarea {
    border: none;
    outline: none;
    flex-grow: 1;
    overflow: hidden;
    min-width: 2em;
}

.input-box input[type="checkbox"] {
    flex-grow: 0;
    justify-self: flex-start;
}

.text-box {
    min-height: 3rem;
    padding: 0 10px 0 10px;
}

.button-go {
    border-radius: 10px;
    padding-top: 1.5em;
    min-height: 5em;
    background: var(--button-color);
    text-align: center;
    cursor: pointer;
    box-shadow: 5px 5px 5px var(--shadow-color);
}

.button-go:active {
    box-shadow: none;
    transform: translateY(5px);
}