:root{
    --bg-color: #E8E8E8;
    --text-color: #3C3C3B;
    --header-color: #FFFFFF;
    --footer-color: #3C3C3B;
    --footer-text-color: #FFFFFF;
    --link-color: #E50046;
    --link-hover-color: #b90038;
    --subtitle-color: #767676;
    --placeholder-color: #B9B9B9;
    --line-color: #A8A8A8;
    --border-color: #E0E0E0;
    --margin-top-content: 60px;
    --input-disabled-text-color: #A2A2A2;
    --input-disabled-button-color: #B2B2B2;
    --message-background: #000000;
    --home-button-margin: 5%;
}

@font-face {
    font-family: "Trim Poster";
    src: url("../fonts/Trim poster/Letters from Sweden - Trim Poster Regular.otf") format("opentype");
}

@font-face {
    font-family: "Sailec";
    src: url("../fonts/Sailec/Type Dynamic - Sailec.otf") format("opentype");
}

body{
    font-family: Sailec;
    font-size: 16px;
    color: var(--text-color);

    padding: 0;
    margin: 0;

    background-color: var(--bg-color);
}

/* Header */
.header{
    background-color: var(--header-color);

    position: relative;
    z-index: 2;
}

.header-container{
    display: flex;
    flex-direction: row;

    padding: 32px 0;
}

/* Footer */
.footer{
    color: var(--footer-text-color);

    background-color: var(--footer-color);
}

.footer-container{
    display: flex;
    flex-direction: row;
    gap: 32px;

    padding: 32px 15%;
}

.footer-more-info{
    display: flex;
    justify-content: center;

    padding: 16px 0;
}

/* Content */
.content > *{
    max-width: 1320px;

    margin: auto;
}

input{
    height: 100%;
}

input[type="date"]:disabled,input[type="date"][clicked]:disabled{
    color: var(--input-disabled-text-color);
}

/* Main */
.main{
    background-color: var(--bg-color);
    margin-top: calc(var(--margin-top-content) + 25px);
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 95px;
    position: relative;
}

/* Not organised */
ul{
    list-style-type: none;
}

li{
    margin-bottom: 3px;
}

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

a:hover{
    color: var(--link-hover-color);
}

.txt-small{
    font-size: 14px;
}

.title{
    font: normal normal normal 37px/44px Trim Poster;
    text-align: center;
}

.subtitle{
    font: normal normal bold 23px/29px Sailec;
    color: var(--subtitle-color);
    text-align: center;
}

.title-container{
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.login-form{
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-top: 50px;
}

.form-group{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-form input{
    min-width: 450px;
    max-height: 47px;
}

/* Bottoni */
.login-form button{
    margin-top: 44px;
}

.login-button, .cerca-servizi-operazioni-button, .pulisci-filtro-button, .indietro-button{
    text-align: center;

    padding-top: 10px;
    padding-bottom: 10px;

    color: var(--footer-text-color);
    background-color: var(--footer-color);

    border: 0;
    border-radius: 10px;

    font: normal normal normal 14px/18px Sailec;

    cursor: pointer;
}

.button-apri-servizio{
    text-align: center;

    padding-top: 10px;
    padding-bottom: 10px;

    color: var(--footer-color);
    background-color: var(--footer-text-color);
    border: 1px solid var(--footer-color);

    border-radius: 10px;

    font: normal normal normal 14px/18px Sailec;

    cursor: pointer;

    width: 100px;
}

.button-apri-servizio:hover{
    color: var(--link-color);
    border-color: var(--link-color);
    background-color: var(--footer-text-color);
}

input, select{
    padding: 12px 0 12px 25px;

    font: normal normal normal 15px/19px Sailec;

    border: 0;
}

button:hover{
    background-color: var(--link-color);
}

/* Servizi */
.servizi-servizi-form{
    display: inline-grid;
    row-gap: 25px;
    column-gap: 25px;
    grid-template-columns: max-content auto auto auto;

    width: 100%;
    max-width: 1080px;

    margin-top: var(--margin-top-content);
}

.servizi-operazioni-form{
    display: inline-grid;
    row-gap: 25px;
    column-gap: 25px;
    grid-template-columns: auto auto auto auto;

    width: 100%;
    max-width: 1080px;

    margin-top: var(--margin-top-content);
}

.servizi-operazioni-form .group-operazione{
    margin-bottom: 15px;
}

.servizi-operazioni-form > .group-operazione{
    grid-column-start: 1;
    grid-column-end: 3;
}

.servizi-operazioni-form > .group-nome{
    grid-column-start: 1;
    grid-column-end: 1;
}

.servizi-servizi-form input,.servizi-servizi-form select, .servizi-operazioni-form input, .servizi-operazioni-form select{
    border-radius: 10px;
}

.very-short-block{
    width: 100px;
}

.short-block{
    width: 125px;
}

.medium-block{
    width: 175px;
}

.long-block{
    width: 400px;
}

.p5-block{
    width: 5%;
}

.p10-block{
    width: 10%;
}

.p15-block{
    width: 15%;
}

.p25-block{
    width: 25%;
}

.p30-block{
    width: 30%;
}

.p35-block{
    width: 35%;
}

.p50-block{
    width: 50%;
}

.full-block{
    width: 100%;
}

.very-short-column{
    width: 100px;
}

.short-column{
    width: 175px;
}

.medium-column{
    width: 250px;
}

.long-column{
    width: 400px;
}

.p20-column{
    width: 20%;
}

.p30-column{
    width: 30%;
}

.p50-column{
    width: 50%;
}

.p90-block{
    width: 90%;
}


.max-column{
    width: 100%;
}


input[type="date"], input[type="time"]{
    padding-right: 25px;
}

select{
    border-right: 25px solid white;
    cursor: pointer;
}

.cerca-servizi-operazioni-button{
    width: 110px;
    height: 37px;
    margin-left: auto;
    align-self: flex-end;
}

.cerca-servizi-operazioni-button:only-child{
    margin-top: 12px;
    margin-left: 0;
}

.servizi-servizi-form label, .servizi-operazioni-form label{
    font: normal normal normal 20px/25px Sailec;
    color: var(--subtitle-color);
}

.list-servizi{
    display: table;
    border-collapse: collapse;

    width: 100%;
}

.row-heading[empty-list]{
    display: none !important;
}

.list-servizi-container{
    background-color: var(--header-color);

    padding: 25px;

    border-radius: 5px;

    margin-top: 50px;

    width: 100%;
    max-width: 1030px;
}

.list-servizi > .row{
    display: table-row;

    border-bottom: 1px solid var(--line-color);
    color: var(--subtitle-color);
}

.list-servizi > .row > .column{
    display: table-cell;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    font: normal normal normal 15px/19px Sailec;
}

.list-servizi > .row > .column:first-child{
    padding-left: 10px;
}

.list-servizi > .row > .column:last-child{
    padding-right: 10px;
}

.list-servizi > .row:last-of-type{
    border-bottom: 0;
}

.list-servizi .row-heading{
    padding-top: 0;
}

.list-servizi .row.row-heading > .column{
    font: normal normal bold 20px/25px Sailec;
}

.list-servizi .row .action-column{
    margin-left: auto;
}

::placeholder, input[type="date"], input[type="time"], select{
    color: var(--placeholder-color);
}

.actions-container{
    display: flex;
    flex-direction: row;
    gap: 40px;

    align-items: center;

    margin-left: auto;
}

.action{
    cursor: pointer;
}

.action:hover{
    color: var(--link-hover-color);
}

.action a{
    text-decoration: none;
    color: inherit;
}

.burger{
    position: relative;
}

.user-menu{
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;

    padding: 8px;

    background-color: var(--header-color);

    border: 1px solid var(--border-color);
    border-radius: 10px;
    
    display: none;
}

.user-menu .menu-option{
    padding: 20px 15px;
    width: 180px;
}

.user-menu[open]{
    display: block;
}

.user-menu:focus{
    outline: none;
}

.scheda-profilo{
    margin-top: var(--margin-top-content);
    margin-bottom: var(--margin-top-content);

    display: flex;
    flex-direction: row;
    gap: 50px; 

    background-color: var(--header-color);

    width: 100%;
    max-width: 990px;

    padding: 50px;

    border-radius: 5px;
}

.dati-profilo{
    display: flex;
    flex-direction: column;
    gap: 15px;

    width: 100%;
}

.dati-profilo .row{
    display: flex;
    flex-direction: row;
}

.dati-profilo > .row > *:first-child{
    min-width: 200px;
    font: normal normal bold 20px/25px Sailec;
}

.dati-profilo > .row > *:last-child{
    font: normal normal normal 15px/19px Sailec;
}

.dati-profilo > .row .row{
    gap: 35px;

    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    padding-top: 10px;

    width: 100%;
}

.dati-profilo > .row .row:first-child{
    gap: 35px;

    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    padding-top: 0;
}

input:disabled, input:read-only{
    background-color: unset;
    padding-left: 0;
    padding-right: 0;

    color: var(--input-disabled-text-color);

    cursor: not-allowed;
}

/* Operazioni */
.list-operazioni{
    display: flex;
    flex-direction: column;

    background-color: var(--header-color);

    border-radius: 5px;

    padding: 40px;

    width: 100%;
    max-width: 1000px;

    margin-top: 50px;
}

.operazione{
    display: flex;
    flex-direction: row;

    border-bottom: 1px solid var(--line-color);

    padding-top: 40px;
    padding-bottom: 40px;
}

.block-operazione{
    flex: content;
}

.operazione:first-child{
    padding-top: 0;
}

.operazione:last-child{
    border: 0;
    padding-bottom: 0;
}

.dettagli-operazione{
    width: 50%;
}

.dettagli-operazione td{
    max-width: 400px;
    overflow: hidden;
}

.dettagli-operazione tr > td:first-child{
    font: normal normal bold 20px/25px Sailec;
    color: var(--subtitle-color);
    width: 40%;
}

.dettagli-operazione tr > td:nth-child(2){
    font: normal normal normal 15px/19px Sailec;
    color: var(--subtitle-color);

    padding-left: 30px;
    width: 60%;
}

.azioni-operazione{
    align-self: flex-end;

    margin-left: auto;

    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Bottoni */
button{
    text-align: center;

    padding: 10px 30px 10px 30px; 

    border-radius: 10px;

    font: normal normal normal 14px/18px Sailec;

    cursor: pointer;

    height: 100%;
}

.secondary-button{
    color: var(--footer-color);
    background-color: var(--footer-text-color);
    
    border: 1px solid var(--footer-color);
}

.secondary-button:hover{
    color: var(--link-color);
    border-color: var(--link-color);
    background-color: var(--footer-text-color);
}

.primary-button{
    color: var(--footer-text-color);
    background-color: var(--footer-color);

    border: 0;
}

/* Tabelle */
table{
    margin-bottom: 10px;
}

td{
    padding-bottom: 10px;
}

/* Operazione */
.servizi-operazione-dati {
    width: 100%;
    max-width: 1080px;

    margin-top: var(--margin-top-content);
}

.servizi-operazione-dati td:first-child{
    font: normal normal bold 20px/25px Sailec;
    color: var(--subtitle-color);
}


.servizi-operazione-dati td:last-child{
    padding-left: 40px;

    font: normal normal normal 15px/19px Sailec;
    color: var(--input-disabled-text-color);
}

.servizi-operazione-dati-container{
    background-color: var(--header-color);

    padding: 40px;
    border-radius: 5px;

    width: 100%;
    max-width: 1000px;

    margin-top: 40px;
}

.form-operazione{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.form-operazione .row{
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 15px;
}

.form-operazione input, .form-operazione select{
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.form-operazione input{
    padding: 12px 0 12px 25px;
}

.section-title{
    font: normal normal bold 25px/31px Sailec;
    color: var(--subtitle-color);

    padding-top: 30px;
    padding-bottom: 15px;
}

.form-operazione label{
    font: normal normal normal 20px/25px Sailec;
    color: var(--subtitle-color);
}

.servizi-operazione-dati-container > .mappa-actions{
    margin-top: 50px;

    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
}

:disabled{
    cursor: not-allowed;
}

.secondary-button:disabled{
    color: var(--input-disabled-button-color);
    border-color: var(--input-disabled-button-color);
}

.form-actions{
    margin-top: 40px;

    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: flex-end;

    width: 100%;
    max-width: 1080px;
}

.logo-container{
    cursor: pointer;
}

select[clicked],input[type="date"][clicked]{
    color: var(--text-color);
}

option:first-child{
    color: var(--input-disabled-text-color);
}

option{
    color: var(--text-color);
}

input[type="radio"]{
    cursor: pointer;
}

input[type="radio"]:disabled{
    cursor: not-allowed;
}

.hidden{
    display: none;
}

div[sortable]{
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

div[sortable] > img{
    display: none;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}


div[sortable][sorted-asc] > img{
    display: inline-block;
}

div[sortable][sorted-desc] > img{
    display: inline-block;
    transform: rotate(180deg);
}

.error-message{
    opacity: 0;
    text-align: center;

    color: var(--link-color);

    transition: all 1s linear;
}

.message-container{
    position: relative;

    height: 0;
    
    width: 100%;
    
    z-index: 1;

    animation-name: scompari;
    animation-delay: 1s;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.message{
    position: absolute;
    top: 0;
    left: 0;

    height: 75px;
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    color: var(--header-color);
    background-color: var(--footer-color);

    font-weight: medium;
}

@keyframes scompari{
    from{
        top: 0px;
    }
    to{
        top: -75px;
    }
}

.compari{
    opacity: 1;
}

.home-menu{
    display: flex;
    flex-direction: row;
    width: 100%; 
    gap: 5%;
    margin-top: var(--margin-top-content);
    margin-bottom: var(--margin-top-content);
}

.home-menu-button{
    width: 100%;
    height: 30vh;
    background-color: var(--header-color);
    margin-left: var(--home-button-margin);
    margin-right: var(--home-button-margin);
    padding: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border-radius: 5px;
    cursor: pointer;
}

.home-button-text{
    font: normal normal normal 32px/39px Trim Poster;
    text-align: center;
}

.home-button-icon > img{
    height: 100px;
}

.filtro-mese{
    display: flex;
    flex-direction: row;
    margin-bottom: -30px;
    margin-top: 50px;
    justify-content: center;
    width: 100%;
    max-width: 1030px;
}

.filtro-mese > div{
    cursor: pointer;
    font: normal normal normal 20px/25px Sailec;
    color: var(--subtitle-color);
}

.filtro-mese select{
    background-color: unset;
    border: 0;
    font: normal normal normal 20px/25px Sailec;
    color: var(--subtitle-color);
}

.filtro-mese option{
    font: normal normal normal 15px/19px Sailec;
}

@media screen and (max-width: 1320px){
    :root{
        --margin-top-content: 60px;
    }

    .header-container{
        padding-left: 20px;
        padding-right: 20px;
    }

    select, input[type="date"], input[type="time"]{
        border-right: 0;
        background-color: var(--header-color);
    }

    .header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .main{
        padding-top: 150px;
        padding-bottom: 300px;
    }

    .container{
        padding-left: 5%;
        padding-right: 5%;
        width: 100%;
    }
}

.pulisci-filtro-button{
    height: 37px;
}

.indietro-button{
    position: absolute;
    top: 0;
    left: calc((100% - 1080px) / 2);
    height: 40px;
}