: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; --border-color: #ccc; --icon-stroke: var(--nav-color); font-family: 'Inter', sans-serif; line-height: 1.5em; color: var(--text-color); } body, main, nav, ul, p, h1, h2, h3 { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: thin; } div { display: inline-block; } a { color: var(--link-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; } /* This class is used to toggle element visibility with hideElementWithId() and showElementWithId() functions. */ .hidden { display: none; } /* Pop up error message */ .error { background-color: gold; color: var(--text-color); width: 100%; padding: 1em; border-radius: 10px; } /* Class for the title of a page */ .title { display: flex; justify-content: space-between; align-items: baseline; width: 100%; } /* Wrapper around an input element Children must include 1 input, can have a label or span, icons and buttons. */ .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, .input-box select, .input-box textarea { border: none; outline: none; flex-grow: 1; overflow: hidden; min-width: 2em; width: 100%; } .input-box input[type="checkbox"] { flex-grow: 0; justify-self: flex-start; } .input-box span { white-space: nowrap; } .text-box { min-height: 3rem; padding: 0 10px 0 10px; } /* A raised button */ .button-go { cursor: pointer; box-shadow: 5px 5px 5px var(--shadow-color); } .button-go:active { box-shadow: none; transform: translateY(5px); } /* A flat button */ .button-flat { cursor: pointer; } /* To organise elements in a column (set of rows). The column takes 100% of the width but the elements don't have to have 100% width. The gap between elements is smaller than in the , good for grouping horizontal things together. */ .page-card { display: flex; flex-direction: column; justify-content: flex-start; row-gap: 0.5em; width: 100%; } /* To organise elements in one row filling all page width*/ .page-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 0.5em; width: 100%; } .page-row > * { flex-grow: 1; } .no-grow { flex-grow: 0; }