@font-face {
    font-family: "light";
    src: url(/assets/fonts/opensans/OpenSans-Light.woff2);
}

@font-face {
    font-family: "regular";
    src: url(/assets/fonts/opensans/OpenSans-Regular.woff2);
}

@font-face {
    font-family: "medium";
    src: url(/assets/fonts/opensans/OpenSans-Medium.woff2);
}

@font-face {
    font-family: "bold";
    src: url(/assets/fonts/opensans/OpenSans-Bold.woff2);
}

@font-face {
    font-family: "icons";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    font-feature-settings: 'liga';
    src: url(/assets/fonts/materialicons/MaterialIconsOutlined-Regular.woff2);
}

body,
div.job-title span {
    font-size: clamp(1.4rem, .833vw, 1.6rem);
}

tr.job-part .job-part-company {
    font-size: clamp(1.2rem, .625vw, 1.2rem);
}

section#timeline header ul li,
div.job-title,
.job-part-text,
form#login-form label span {
    font-size: clamp(1rem, .729vw, 1rem);
}


section>article>header h4,
details summary,
#page-footer * {
    font-size: clamp(2rem, 1.042vw, 2rem);
}

body {
    font-family: "light", Arial, Helvetica, sans-serif;
}


section#timeline header ul li,
ul#object-results>li li,
th,
#custom-alert div.message,
div.chart>div>span {
    font-family: "regular", Arial, Helvetica, sans-serif;
}

section#timeline>header,
section#timeline header ul:first-of-type li,
label.block,
.job-part-id,
section#timeline .job-title span,
ul#object-results>li,
ul.field-list>li>span,
label.fav span,
#page-footer *,
form#login-form label span,
#custom-alert>section h2,
strong  {
    font-family: "medium", Arial, Helvetica, sans-serif;
}

button,
a.button,
footer button,
article>header,
details summary,
section#overlayContent header h3,
.job-part-company,
.job-part-summary,
thead th,
p#text-preview::before {
    font-family: "bold", Arial, Helvetica, sans-serif;
}

button,
a.button,
section#timeline header ul:first-of-type li,
fieldset>ul label,
article>header,
section#overlayContent header h3,
#custom-alert>section h2 {
    text-transform: uppercase;
}

button::before,
button::after {
    text-transform: none;
}

/* icons */
details summary::after {
    font-family: "icons";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    text-transform: none;
    font-size: 4rem;
    content: "expand_more";
}
details[open] summary::after {
    content: "expand_less";
}

ul#form-tabs button::before,
div.move button::before,
div.tools>button::before {
    font-family: "icons";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    text-transform: none;
    font-size: 2rem;
}

button.icon::before {
    font-family: "icons";
    font-size: 2.5rem;
    display: block;
}


ul#form-tabs button[data-id="fs-start"]::before {
    content: "home";
}
ul#form-tabs button[data-id="fs-dates"]::before {
    content: "event";
}
ul#form-tabs button[data-id="fs-jobs"]::before {
    content: "work";
}
ul#form-tabs button[data-id="fs-timeline"]::before {
    content: "schedule";
}
ul#form-tabs button[data-id="fs-companies"]::before {
    content: "build";
}
ul#form-tabs button[data-id="fs-jobs-companies"]::before {
    content: "edit";
}
ul#form-tabs button[data-id="fs-jobs-add"]::before,
button.icon.add::before {
    content: "add_circle";
}
ul#form-tabs button[data-id="fs-documents"]::before {
    content: "description";
}
ul#form-tabs button[data-id="fs-check"]::before {
    content: "task_alt";
}
ul#form-tabs button[data-id="fs-contracts"]::before {
    content: "send";
}
ul#form-tabs button[data-id="fs-statistics"]::before {
    content: "query_stats";
}
ul#form-tabs button[data-id="fs-user"]::before {
    content: "group";
}
ul#form-tabs button[data-id="fs-logout"]::before {
    content: "logout";
}

button.up::before {
    content: "arrow_drop_up";
}
button.down::before {
    content: "arrow_drop_down";
}
button.menu::before {
    content: "menu";
}
button.delete::before {
    content: "delete";
}
button.add::before {
    content: "subdirectory_arrow_right";
}
button.add2::before {
    content: "add";
}
button.edit::before {
    content: "edit";
}

button.accept,
button.cancel,
button.tool {
    padding-left: 4rem;
}

button.accept::before,
button.cancel::before,
button.tool::before {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: "icons";
    font-size: 2.5rem;
}
button.accept::before {
    content: "check_circle";
}
button.cancel::before {
    content: "cancel";
}
button.tool::before {
    content: "settings";
}

button.search,
button.camera,
button.add-attachment,
button.delete,
a.preview {
    
    margin: 0 0 0 1rem;
}

a.preview {
    display: inline-block;
    padding: 0!important;
}

button.search,
button.camera,
button.texts,
button.add-attachment,
button.delete,
button.edit,
button.save,
button.menu,
button.up,
button.down,
button.add2 {
    padding: 0;
    
}

button.search span,
button.camera span,
button.texts span,
button.add-attachment span,
button.delete span,
button.edit span,
button.save span,
button.add2 span {
    display: none!important;
    
}

button.search::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "search";
    padding: .25rem .5rem;
}

button.camera::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "add_a_photo";
    padding: .25rem .5rem;
}

button.texts::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "edit_note";
    padding: .25rem .5rem;
}



button.add-attachment::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "library_add";
    padding: .25rem .5rem;
}

button.delete::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "delete";
    padding: .25rem .5rem;
}

button.edit::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "edit";
    padding: .25rem .5rem;
}

button.save::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "save";
    padding: .25rem .5rem;
}

button.add2::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "add";
    padding: .25rem .5rem;
}

a.preview::before {
    display: inline-block;
    font-family: "icons";
    font-size: 2.5rem;
    content: "visibility";
    padding: .25rem .5rem;
    text-transform: none;
}


input[type="number"],
.job-part-company,
.num {
    text-align: right;
}

td.job-part-state span::before {
    font-family: "icons";
    font-size: 2.5rem;
}

tr td.job-part-state span::before {
    content: "check_circle";
}

tr.fail td.job-part-state span::before {
    content: "cancel";
}