@font-face {
	font-family: 'avenir';
	src: url('/static/core/fonts/Avenir/Avenir-Book.ttf');
    font-type: normal;
    font-weight: normal;
}

:root {
    --main-black: #373a36;
    --main-bgclr: #efdbb2;
    --main-bgclr-dark: #dfc187;
    --main-itclr2: #f19c49;
    --main-itclr3: #007c80;
	--main-bgclr-light: #354E6D;
	--main-selected-clr: forestgreen;
	--main-unselected-clr: darkred;
	--main-error-clr: #f9e7ea;
	--form-error: #da0000;  /* TODO -> check this color */
}

body {
    background-color: #F9F9F9;
    margin: 0;
    font-family: 'avenir', Arial, sans-serif;
    cursor: default;
    color: var(--main-black);
    height: 100%;
    position: relative;
}

a{
    text-decoration: none;
    color: unset;
}

.required > label,
.required > * > label,
label.required{
    font-weight: 600;
}

.required > label::before,
.required > * > label::before,
label.required::before{
    content: '* ';
    color: var(--main-itclr2);
}

input.error, select.error{
    color: initial;
    background-color: var(--main-error-clr) !important;
}

.error{
    color: var(--main-error-clr);
}

.error-bgr{
    background-color: var(--main-error-clr);
}

.correct, .selected{
    color: var(--main-selected-clr);
}

.correct-bgr, .selected-bgr{
    background-color: var(--main-selected-clr);
}

input::placeholder {
    opacity: 0.4;
    font-style: italic;
}

.hidden{
    display: none !important;
}

ul{
    list-style: none;
    padding-left: 10px;
}

.form-errors{
    color: crimson;
}

.form-warnings{
    color: #989804;
}

input[readonly]{
    border: none;
    border-bottom: 1px solid var(--main-itclr3);
    color: var(--main-itclr3);
}

input[type="color"] {
    width: 75px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    outline: 0;
    cursor: pointer;
}

[readonly]{
    cursor:default;
}

button[disabled] {
    pointer-events: none;
    visibility: hidden;
    opacity: 0.7;
}

.avoid-pointer-events{
    pointer-events: none;
}

.pointer{
    cursor: pointer;
}

.invisible{
    visibility: hidden;
}

#overlays_container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 199;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: none;
}

#overlays_container.displayed {
    display: flex;
}

.overlay{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: grey;
    opacity: 0.8;
    z-index: 200;
    display: block;
}

.overlay-content {
    z-index: 201;
    align-items: center;
    justify-content: center;
    display: block;
    outline: none;
    width: 90%;
    height: 90%;
}

.overlay-content.small {
    width: 50%;
}

.overlay-content ~ .overlay-content {
    margin-left: 0;
    position: absolute;
    height: 90%;
}

.overlay-content.ultra-small {
    width: 40%;
    height: 50%;
}

.embedded_content {
    width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.embedded_content ~ .embedded_content {
    position: relative;
    left: -25%;
}

.modal {
    height: 100%;
    background-color: whitesmoke;
    box-shadow: 0 0 10px whitesmoke;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.modal-body {
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100% - 170px);
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.small .modal-body {
    text-align: center;
}

.modal-section{
    align-items: center;
    padding: 5px 5%;
    height: 70px;
    background-color: var(--main-bgclr);
    display: flex;
    grid-gap: 10px;
}

.small .modal-section{
}

.modal-header{
    justify-content: center;
    font-size: 100%;
    height: 60px;
}

.modal-header.no-footer{
    justify-content: space-between;
}

.modal-body > form {
    min-width: 90%;
}

.modal-footer{
    justify-content: center;
}

.modal-footer > button,
.modal-footer > .actions > h1 {
    border: solid 2px var(--main-itclr2);
    padding: 10px 20px;
    border-radius: 10px;
    background-color: var(--main-itclr2);
    background-color: transparent;
    color: var(--main-black);
    font-weight: bold;
    margin: 0 10px;
    transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.modal-footer > button:hover,
.modal-footer > .actions > h1:hover {
    background-color: var(--main-itclr2);
    color: whitesmoke;
}

.modal-footer > button:active {
    background-color: var(--main-itclr3);
    border: solid 2px var(--main-itclr3);
}

.center{
    margin-right: auto;
    margin-left: auto;
}

.relative{
    position: relative;
}

.absolute{
    position: absolute;
}

.inline{
    display: inline-block;
}

.flex{
    display: flex;
    align-items: center;
    grid-gap: 10px;
}

.inline-flex {
    display: inline-flex !important;
}

.id {
    display: none;
}

.spacer-10{
    width: 10px;
    height: 10px;
    visibility: hidden;
}

/* ---------- BUTTONS ----------- */

.btn{
    background-color: var(--main-bgclr);
    color: var(--main-black);
    border: 1px solid var(--main-black);
    padding: 5px 10px;
    border-radius: 6px;
    transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out;
}

.btn:hover{
    background-color: var(--main-bgclr-dark);
}

/* ---------- TOOLTIPS ----------- */

.tooltip{
    display: none;
    position: absolute;
    background-color: whitesmoke;
    padding: 5px 10px;
    border: 1px solid grey;
    border-radius: 8px;
    width: fit-content;
    min-width: 150px;
    min-height: 40px;
    line-height: 20px;
    text-align: center;
    z-index: 100;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-family: 'avenir';
    font-weight: normal;
}

.big-tooltip{
    min-width: 200px !important;
}

.show-tooltip:hover > .tooltip,
.show-tooltip:hover + .tooltip{
    display: flex;
    color: black;
    color: var(--main-black);
    box-shadow: 1px 1px 2px grey;
}

.show-tooltip:hover > button[disabled] + .tooltip,
button[disabled]:hover + .tooltip {
    display: none !important;
}

.scale-80 .tooltip {
    font-size: 19px;
    line-height: 1.3;
    padding: 7px 10px;
    min-width: 150px;
}

.show-tooltip{
    position: relative;
}

td.show-tooltip {
    width: fit-content;
}

.top{bottom: calc(100% + 5px);}
.top-0{top:0;}

.left{right: calc(100% + 5px);}
.left-0{right: -2px;}
.left-aligned {left: 5px;}

.right{left:calc(100% + 5px);}
.right-0{left: -2px;}
.right-aligned {right: 5px;}

.bottom{top:calc(100% + 5px);}
.bottom-0{bottom: 0;}

.middle{transform: translate(-61px, 0%);}

.tooltip.large {
    max-width: 400px;
    width: max-content;
}

.tooltip-align-vertical {
    display: flex;
    align-items: center;
}

.tooltip-align-horizontal {
    display: flex;
    justify-content: center;
}

.tooltip.width-medium {
    min-width: 200px;
}

.tooltip.width-medium.middle.left-0 {
    right: -20px;
}

/* ---------- CONDITIONALS ---------- */
.show-when-direct-parent-hover,
.show-when-parent-hover{
    visibility: hidden;
}

.parent:hover > .show-when-direct-parent-hover,
.parent:hover .show-when-parent-hover{
    visibility: unset;
}


/* ---------- LANGUAGES ----------- */

.language-select{
    cursor: pointer;
}

.current-language{
    font-size: 1.1vw;
    color: #434343;
}

.current-language:hover{
    color: grey;
}

.other-languages{
    display: none;
    position: absolute;
    line-height: 20px;
    background-color: white;
    text-align: center;
    border: 1px solid lightgrey;
    width: 100px;
    left: -40px;
}

.other-languages > span{
    padding: 10px 10px;
    background-color: white;
    display: block;
}

.other-languages > span:hover{
    background-color: whitesmoke;
}

.show-other-languages > .other-languages{
    display: block;
}

/* ------- MATERIAL ICONS ----------- */
.material-icons,
.material-icons-outlined{
    color: #2e2e2e;
    cursor: pointer;
    background-color: transparent;
}

button.material-icons,
button.material-icons-outlined{
    border: none;
}

button.material-icons-standardized,
button > span.material-icons-standardized{
    opacity: 0.4;
    font-size: 35px;
}

button.material-icons:hover,
button.material-icons-outlined:hover,
button > span.material-icons:hover,
button > span.material-icons-outlined:hover{
    opacity: 0.6;
}

button.material-icons-standardized:hover,
button > span.material-icons-standardized:hover{
    opacity: 1;
}

button.material-icons:active,
button.material-icons.outlined:active,
button > span.material-icons:active,
button > span.material-icons-outlined:active{
    opacity: 0.4;
}

button.shortcut {
    font-size: 115%;
    background-color: var(--main-bgclr);
    border: none;
    color: var(--main-black);
    padding: 5px 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out;
    font-weight: bold;
}

button.shortcut:hover {
    background-color: var(--main-itclr3);
    color: whitesmoke;
}

/* ------------------ CUSTOM IT BUTTONS -------

button.IT {
    display: block;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    width: 45px;
    height: 45px;
    margin: auto;
    opacity: 0.5;
    transition: background-size 0.2s ease-in-out,
                opacity 0.2s ease-in-out;
    background-color: transparent;
    border: none;
}

button.IT:hover{
    background-size: 35px;
    opacity: 1;
}

button.IT:active{
    background-size: 40px;
}

button.IT.add {
    background-image: url(/static/core/icons/icons_it/add_black.png);
}

button.IT.edit {
    background-image: url(/static/core/icons/icons_it/pencil_black.png);
}

button.IT.delete {
    background-image: url(/static/core/icons/icons_it/trash_black.png);
}

button.IT.close {
    background-image: url(/static/core/icons/icons_it/add_black.png);
    transform: rotate(45deg);
}

button.IT.save {
    background-image: url(/static/core/icons/icons_it/save_black.png);
}


/* ------------------ FORMS ------------------- */

.label-col {
    min-width: 205px;
    width: 30%;
    text-align: end;
}

#extra_fields_tr > td.label-col {
    border-right: solid 1px;
    padding-right: 10px;
}

#extra_fields > h3 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#extra_fields > h3 > .matrix_set {
    font-size: 90%;
    color: var(--main-itclr3);
}

#extra_fields > h3 > .matrix_set:before {
    content: '> ';
}


form #extra_fields table .label-col {
    width: 150px;
}

.label-col label{
    margin-left: 10px;
    text-align: right;
    display: inline-block;
    font-size: 110%;
}

form #extra_fields table .label-col label {
    font-size: inherit;
}

.label-col > div{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.input-col {
    /*max-width: calc(100% - 225px);*/
}

form input,
form select{
    width: calc(100% - 8px);
    height: 25px;
    text-align: left;
    border: none;
    border-bottom: solid lightgrey 1px;
    background-color: white;
    padding-bottom: 0px;
}

form input[type="date"],
form input[type="text"].date,
form input[type="number"],
form input[type="text"][name="unit"]{
    width: 150px;
}

form textarea {
    width: calc(100% - 15px);
    border: none;
    border-left: solid 1px;
    border-bottom: solid 1px lightgrey;
    padding: 0 5px;
}

form .comment > textarea {
    margin-top: 5px;
}

form textarea::placeholder {
    color: lightgrey;
}

form textarea:focus-visible {
    outline: none;
    border-color: var(--main-itclr2);
}

form table + .comment > textarea {
    border-left-color: transparent;
    margin-left: 10px;
    width: calc(100% - 32px);
    margin-top: 5px;
}

form table {
    width: 100%;
    border-spacing: 10px 3vh;
    padding: 5px 0;
}

.modal-body > form > table > tbody > tr > td:nth-child(3){
    width: 10%;
}

td.comment-show-or-hide.hidden-comment:hover > span.hide-comment,
td.comment-show-or-hide:not(.hidden-comment):hover > span.show-comment {
    display: none;
}

.input-col > table {
    border-left: solid 1px;
    border-spacing: 10px 1vh;
}

.input-col > table:hover {
    border-left: solid 1px var(--main-itclr3);
}

form #extra_fields table {
    border-spacing: 5px 1vh;
}

form #extra_fields > table.cols-table,
form #extra_fields > table.rows-table {
    border-left: none;
    padding: 0 5px 20px;
    border-spacing: 14px 0vh;
}

form table.options-table {
    border-spacing: 25px 0vh;
}

form table.options-table tr {
    display: flex;
    min-height: 45px;
    align-items: center;
    justify-content: center;
}

.modal-body form table td.actions {
    width: 50px;
}

form table.options-table tr > td {
    width: calc(100% - 50px);
    margin-right: 25px;
}

form table.options-table td.actions {
    width: 100px;
    display: inline-flex;
}

form table.options-table + button {
    margin: 0 auto;
}

input:focus,
select:focus {
    border-bottom: solid var(--main-itclr2) 1px;
    outline: none;
}

.submit-bt{
    margin-top: 15px;
}

form button[class^="icon-"]:hover,
form button [class*=" icon-"]:hover {
    opacity: 0.8;
    cursor: pointer;
}

.modal-footer  {
    background-size: 40px;
    position: relative;
}

.error-list{
    padding: 0;
    margin: -15px;
    text-align: center;
    color: var(--form-error);
}

.fieldset{
    margin-bottom: 50px;
}

.fieldset h1,
.fieldset h2{
    border-bottom: 1px solid var(--main-black);
    padding-left: 5px;
    width: 100%;
    color: var(--main-itclr2);
}

.fieldset table{
    padding-left: 10px;
}

.img-preview{
    display: flex;
    align-items: center;
    height: 150px;
}

.img-preview > img{
    height: 150px;
    box-shadow: 4px 4px 3px lightgrey;
}

/* Full page loader */
#loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    display: none;
}

#loader.loading{
    display: flex;
    flex-direction: column;
    grid-gap: 25px;
}

/* Element loading */
.loaded .loader{
    display: none !important;
}