/* Card */
.detail-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(59,91,152,0.10);
    padding: 0 18px 18px 18px;
    margin-bottom: 18px;
    float: left;
    width: 100%;
}
.detail-card-title {
    font-size: 1.15em;
    font-weight: 600;
    color: #3b5b98;
    padding: 14px 0 10px 0;
    border-bottom: 2px solid #e8ecf3;
    margin-bottom: 10px;
    text-align:left;
}
.detail-card-title i {
    margin-right: 6px;
}

tableDatiContattoNomeCampobody {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}


body, input, select, table, textarea, span, div, a {
    font-family: 'Roboto',Arial;
    font-size: medium;
    color: #3b5b98;
}






    /* Controlli arrotondati (tutti tranne menu a tendina)*/
    input[type="submit"], input[type="button"], input[type="text"], input[type="tel"], input[type="password"], textarea, a, #RiepilogoMese {
        padding: 8px 2px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

/* Controlli arrotondati - menu a tendina*/
select, option {
    padding: 8px 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}




input, textarea, select {
    border-color: #d1d9eb; /* #3b5b98; */
    Color: #3b5b98;
    border-width: 1px;
    border-style: Solid;
    border-width: 1px;
}

select {
    background-color: white;
}


    /* Colore background quando i controlli sono enabled=false*/
    input[disabled], select[disabled], textarea[disabled] {
        background-color: ghostwhite;
    }
    /* works in IE7+ and modern browsers */
    input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
        background-color: #FBFBFB;
        color: #1565c0;
    }
/*  IE8+ and modern browsers */




/* Textbox */
input[type="tel"], input[type="password"], input[type="text"], textarea {
    padding: 6px;
    margin: 1px;
    height: 2.8em;
}

/* Radio */
input[type="radio"] {
    padding: 116px;
    margin: 1px;
}



.z-depth-2 {
    -webkit-box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}


.z-depth-3 {
    -webkit-box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
}

.card {
    position: relative;
    overflow: hidden;
    margin: 0.5rem 0 1rem 0;
    border-radius: 2px;
}

/* Pulsanti */
input[type="submit"], input[type="button"], a.buttonColor1, a.buttonColor2, a.buttonColor3 {
    /*padding:16px 20px;*/
    padding: 1em 1em;
    cursor: pointer;
}

/* Pulsante*/
.buttonColor1 {
    /*border: 1px solid #3b5b98;*/
    border: 1px solid lightblue;
    Color: #3b5b98;
    background-color: white;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    border-radius: 6px !important;
}

.btn-icon-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233b5b98' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 12px center;
    padding-left: 34px !important;
}

.btn-icon-adduser {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='white' d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 14px;
    background-position: 12px center;
    padding-left: 36px !important;
}

.btn-icon-save {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 12px center;
    padding-left: 34px !important;
}

.btn-icon-cancel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%233b5b98' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 12px center;
    padding-left: 34px !important;
}

.btn-icon-back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%233b5b98' d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 12px center;
    padding-left: 34px !important;
}

.buttonColor2 {
    background-color: #1565c0;
    color: white;
    Border-Color: lightgray;
    font-weight: normal;
    border-width: 0px;
    border-style: Solid;
    border-width: 1px;
    text-decoration: none;
    display: inline-block;
    border-radius: 6px !important;
}


.buttonColor3 {
    background-color: #2196f3;
    color: white;
    Border-Color: white;
    font-weight: normal;
    border-width: 0px;
    border-style: Solid;
    border-width: 1px;
    text-decoration: none;
    display: inline-block;
}



a.calendarioColor1 {
    color: yellow;
}

.calendarioColor1 a {
    text-decoration: none;
}


.calendarioColor1 {
    max-width: 10%;
    margin: auto;
    vertical-align: middle;
}
/*Frecce mese predente successivo calendar.aspx*/
.CalendarMeseNextPrev a {
    font-size: 1.6em; /*serve per andare meglio a cliccare, con piu spazio sul touchscreen*/
    color: #3b5b98;
    padding: 20px;
}

.calendar_white_event_inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
    pointer-events: none;
}




/*Casella di testo*/
.textboxColor1 {
    Border-Color: DarkBlue;
    Color: DarkBlue;
    background-color: white;
}






div#ModalPopupBloccaSchermo_backgroundElement {
    z-index: 90001 !important;
}




.filtri-wrapper {
    background: #f8f9fc !important;
    border: 1px solid #e0e4ed !important;
    border-radius: 8px !important;
    padding: 6px 14px 10px 14px !important;
    margin: 10px 8px 10px 8px !important;
    width: calc(100% - 16px) !important;
    box-shadow: 0 1px 4px rgba(59, 91, 152, 0.06) !important;
    box-sizing: border-box !important;
}

    /* Riduco un po' i margini interni dei filtri per compattezza */
    .filtri-wrapper .divOpzioniInFila {
        margin-top: 10px;
        margin-bottom: 0px;
    }




/*--------------------------------------TABLE DATI CONTATTO************************/
/*Table dati contatto*/
.tableDatiContatto {
    width: 100%;
    max-width: 100%;
    Border: none;
    border-style: none;
    color: #3b5b98;
    margin: 0 auto;
    word-break: break-all;
    text-align: left;
    /*background-color:ghostwhite;*/
}

    .tableDatiContatto .tableDatiContattoColored {
        background-color: ghostwhite;
    }

    /*Celle tabella dati contatto*/
    .tableDatiContatto td {
        padding: 5px 1px;
    }

        /*Label tabella dati contatto*/
        .tableDatiContatto td span {
            background-color: Transparent;
            border-style: none;
        }

/* td celle con nome campi (Nominativo, Indirizzo, Telefono ecc */
tableDatiContatto, .tableDatiContattoNomeCampo {
    white-space: nowrap;
    width: 1%;
}

.AnagEnabled {
    height: initial !important;
}
.AnagDisabled {
    height: initial !important;
    color: #3b5b98 !important;
    border: 0px solid white !important;
    padding: 0 !important;
    margin: 0 !important;
}



/*******************DATAGRID GRIGLIA LISTA APPUNTAMENTI, LISTA INTERVENTI ECC *******************************/
.datagridColor1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    margin-top: 30px;
    background-color: transparent;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d0d8e8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(59, 91, 152, 0.08);
}

    .datagridColor1 td {
        border: none;
        border-bottom: 1px solid #e8ecf2;
        padding: 2px;
    }

table.datagridColor1 th, table.datagridColor1 td {
    border: none;
    border-bottom: 1px solid #e8ecf2;
}

.datagridColor1 .HeaderStyle {
    font-weight: 600;
    word-wrap: break-word;
    text-align: center;
    height: 44px;
    color: white;
    background-color: #3b5b98;
    border: none;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.03em;
}

    .datagridColor1 .HeaderStyle td {
        color: white;
        border-bottom: 2px solid #2d4a7a;
        padding: 10px 12px;
    }


.datagridColor1 .HeaderStyleBreakAll {
    font-weight: 600;
    word-break: break-all;
    text-align: center;
    height: 44px;
    color: white;
    background-color: #3b5b98;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.03em;
}

    .datagridColor1 .HeaderStyleBreakAll td {
        color: white;
        border-bottom: 2px solid #2d4a7a;
        padding: 10px 12px;
    }

.datagridColor1 .AlternatingItemStyle {
    color: #3B5B98;
    background-color: #ffffff;
}

.datagridColor1 .ItemStyle {
    color: #3B5B98;
    background-color: #f5f7fb;
}

.datagridColor1 tr:hover td {
    background-color: #e8f0fe;
    transition: background-color 0.15s ease;
}

.datagridColor1 .HeaderStyle tr:hover td,
.datagridColor1 .HeaderStyleBreakAll tr:hover td,
.datagridColor1 tr.HeaderStyle:hover td,
.datagridColor1 tr.HeaderStyleBreakAll:hover td {
    background-color: #3b5b98;
}

.datagridColor1 .PagerStyle {
    text-align: center;
    background-color: #f5f7fb;
    border-top: 1px solid #d0d8e8;
}

    .datagridColor1 .PagerStyle td {
        padding: 10px;
        border: none;
    }

    .datagridColor1 .PagerStyle a {
        padding: 4px 10px;
        font-size: 1.1em;
        color: #3b5b98;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.15s ease;
    }

    .datagridColor1 .PagerStyle a:hover {
        background-color: #d0d8e8;
    }

    .datagridColor1 .PagerStyle span {
        padding: 4px 10px;
        font-size: 1.1em;
        font-weight: 600;
        color: white;
        background-color: #3b5b98;
        border-radius: 4px;
    }


.datagridColor1 input {
    text-align: center;
    padding: 6px 14px;
    margin: 4px;
    color: #3b5b98;
    background-color: #d4e2f7;
    font-weight: 600;
    border: 1px solid #c0cedf;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.datagridColor1 input:hover {
    background-color: #d0d8e8;
}


/*Padding celle griglia orario giorni particolari slfagncal.aspx */
#datagridGiorniParticolari td {
    padding: 5px 5px;
}

/*Padding celle griglia orario base slfagncal.aspx */
#datagridCalendarioBase td {
    padding: 5px 15px;
}

/*Padding celle griglia risultati ricerca pagina nuovo appuntamento slfinsapp.aspx*/
#dgRicerca td {
    padding: 10px 14px;
    vertical-align: middle;
}


/******************************************************************************/



/*sezione informazioni aggiuntive pagina singolo appuntamento*/
#dgDatiAggiuntivi.SlfAgnApp td {
    padding: 10px !important;
}

.dgInterventi td {
    padding: 10px !important;
}

    .dgInterventi td[disabled="disabled"] {
        visibility: hidden !important;
    }




/* utilizzato ad esempio per tendine giorno mese ora minuti*/
.combo2caratteri {
    Height: 2.5em !important;
    Width: 4.5em;
    padding: 6px 4px;
}

/* utilizzato ad esempio per tendine anno*/
.combo4caratteri {
    Height: 2.5em !important;
    Width: 6.2em;
    padding: 4px 4px;
}




/* utilizzato ad esempio per textbox giorno mese in slfscelte.aspx*/
.text2caratteri {
    Height: 2.5em !important;
    Width: 3.5em;
    padding: 6px 4px;
    text-align: center;
}

/* utilizzato ad esempio per tendine anno*/
.text4caratteri {
    Height: 2.5em !important;
    Width: 4.5em;
    padding: 4px 4px;
    text-align: center;
}

/* utilizzato ad esempio per tendine data dd/mm/yyyy */
.text10caratteri {
    Height: 1.7em !important;
    Width: 12em;
    padding: 4px 4px;
}





/* menu a tendina*/
.selectColor1 {
    Border-Color: DarkBlue;
    Color: DarkBlue;
    background-color: white;
    padding: 5px;
}


/* Div fascia width 100%*/
.div100x100 {
    clear: left;
    float: left;
    border-style: none;
    border-color: inherit;
    border-width: 0;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: inherit;
    color: white;
    text-align: center;
    vertical-align: middle;
}


/* Div fascia colorata width 100% (esempio: avanzamento esiti / dati aggiuntivi / ecc*/
.divFasciaColor1 {
    clear: left;
    float: left;
    border-style: none;
    border-color: inherit;
    border-width: 0;
    width: 100%;
    padding: 15px 0px;
    margin-bottom: 20px;
    margin-top: 30px;
    background-color: #3b5b98;
    text-align: center;
    font-size: 1.1em;
    color: white;
}

/*Div con height differenti, affiancati side by side in flusso continuo su piu righe  (slfscelte.aspx)*/
.divOpzioniInFila {
    display: inline-table;
    margin: 20px 0px 0px 20px;
    vertical-align: middle;
    max-width: 100%
}



.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

    .flex-container .box {
    }





/*Tutte le label che riportano nome del campo, nome opzione ecc     font-weight:bold;   */
.etichettaEvidenziata, tableDatiContatto span, .tableDatiContattoNomeCampo span:first-of-type {
    font-size: larger !important;
    margin-right: 8px;
    color: #6b7a99;
    font-weight: 500;
    font-size: 0.95em !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.warning {
    color: #1565c0;
    /*background-color: lightblue;*/
    /*border: 1px solid #f5c2c7;*/
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 24px !important;
    /*
    min-width: 500px;
    display: inline-block;
    text-align: center;*/
}


.divMenuTop {
    clear: left;
    float: left;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    max-width: 100%;
    background-color: #3b5b98;
    border: 0;
    padding: 8px 0px;
    margin-bottom: 10px;
}


/* ------------MENUTOP MENU TOP --------------------------------------------*/

#MenuTop {
    height: auto !important;
}


#MenuTop {
    background: linear-gradient(135deg, #1565c0 0%, #3b5b98 50%, #476fb8 100%) !important;
}




    #MenuTop ul {
        width: 100% !important;
        height: auto !important;
    }

        #MenuTop ul li {
            line-height: 30px !important;
        }

            #MenuTop ul li.static {
                width: 20% !important;
                text-align: center;
            }

        #MenuTop ul li {
            vertical-align: middle !important;
            line-height: 50px !important;
        }

    #MenuTop a.popout { /*nasconde la freccietta nera che indica la presenza di un sottomenu*/
        background-image: none !important;
    }


    #MenuTop a {
        height: 50px !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }


@media screen and (max-width: 60em) {
    /*rimpiciolisco il font ma non vado ancora mai a capo...*/
    #MenuTop a {
        font-size: 1.0em !important;
    }
}

@media screen and (max-width: 50em) {
    /*inizio a consentire di andare a capo (line-height)*/
    #MenuTop a {
        height: 30px !important;
        line-height: 10px !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
        padding-top: 10px !important;
    }

    #MenuTop ul li {
        line-height: 10px !important;
    }
}

@media screen and (max-width: 25em) {
    #MenuTop a {
        font-size: 0.8em !important;
    }
}

/* --------------------------------------------------------------*/






.centrale {
    /* background-color:#0099FF; /*solo per vedere meglio la posizione del Div*/

    margin: 0 auto;
    text-align: center; /*per IE*/
}





.table {
    clear: left;
    float: left;
    display: table;
    border-collapse: separate;
    border-spacing: 0px 0px;
    border-style: none;
    border-color: inherit;
    border-width: 0;
    width: 100%;
    padding: 0px;
    margin: 0px;
    border-collapse: separate;
    border-spacing: 0px;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    word-wrap: break-word;
}

.cellFix {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    width: 20%;
    word-wrap: break-word;
}




/*pannello dimensione fissa ridotta utilizzato ad esempio in slfinsapp.aspx*/
.pannelloRidotto {
    width: 50em;
    margin: 0 auto;
    float: none;
}





/***********************STYLE RADIO BUTTON*******************************/
/*  http://viralpatel.net/blogs/css-radio-button-checkbox-background/ */
input[type=radio] {
    display: none;
}

    input[type=radio] + label {
        display: inline-block;
        margin: -2px;
        padding: 10px 12px;
        margin-bottom: 0;
        /*font-size: 14px;*/
        /*line-height: 20px;*/

        text-align: center;
        text-shadow: 0 1px 1px rgba(255,255,255,0.75);
        vertical-align: middle;
        cursor: pointer;
        background-color: #f5f5f5;
        background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
        background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
        background-image: -o-linear-gradient(top,#fff,#e6e6e6);
        background-image: linear-gradient(to bottom,#fff,#e6e6e6);
        background-repeat: repeat-x;
        border: 1px solid #ccc;
        border-color: #e6e6e6 #e6e6e6 #bfbfbf;
        border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
        border-bottom-color: #3b5b98;
        border-color: ghostwhite lightblue lightblue ghostwhite; /*marco*/

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    }

    input[type=radio]:checked + label {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        background-color: #e0e0e0;
        background-color: ThreeDLightShadow;
        color: white;
    }

/************************************************************************************/







/*----------------------- TABCONTAINER ---------------------------------------------------------------------*/
/* Nasconde bordi TabContainer */
.ajax__tab_body, .ajax__scroll_horizontal, .ajax__tab_xp ajax__tab_container ajax__tab_default, .ajax__tab_header, .ajax__tab_active, .ajax__tab_outer, .ajax__tab_inner {
    background: none !important;
    border: 0px !important;
}

/* posizione generale pulsantiera TabContainer */
.ajax__tab_header {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 10px !important;
    height: 30px !important; /* altezza pulsantiera - da modificare se si desidera cambiare l'altezza dei singoli pulsanti con la stessa height impostata per .ajax__tab_tab */
}

/* pulsanti interni del TabContainer */
.ajax__tab_tab {
    background: none !important;
    border: 1px !important;
    border-color: inherit !important;
    border-style: solid !important;
    width: 140px !important; /* larghezza pulsanti singoli del TabContainer*/
    height: 30px !important; /* altezza singoli pulsanti - da modificare se si desidera cambiare l'altezza dei singoli pulsanti con la stessa height impostata la pulsantiera ( .ajax__tab_header )*/
}

.ajax__tab_outer {
    margin-right: 10px !important; /* distanza tra un singolo pulsante del TabContainer e l'altro   */
}

/* posizione verticale del testo dell'etichetta del singolo pulsante rispetto al bordo del pulsante*/
.ajax__tab_tab span {
    vertical-align: middle !important;
    line-height: 30px !important;
}
/************************************************************************************/








/*----------------------- MODALPOPUPEXTENDER MODAL POPUP ---------------------------------------------------------------------*/

.modalPopupBackground {
    background-color: #666699;
    filter: alpha(opacity=50);
    opacity: 0.7;
}

.modalPopupPanel {
    background-color: #FFFFFF;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    padding-top: 10px;
    padding-left: 10px;
    width: 300px;
    height: 140px;
    padding: 0px;
    margin: 0px;
    border-color: lightblue;
    border-width: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
}

.ModalPopupTitle {
    background-clip: border-box;
    background-color: lightblue;
    background-origin: padding-box;
    background-size: auto;
    border-color: rgb(170, 170, 170);
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: rgb(34, 34, 34);
    display: block;
    font-weight: bold;
    outline-color: rgb(34, 34, 34);
    outline-style: none;
    outline-width: 0px;
    vertical-align: baseline;
    margin: 3px;
    text-align: left;
    padding: 6px;
}

.ModalPopupText {
    text-align: left;
    padding: 10px;
}
/************************************************************************************/


/*etichetta DEMO calendar.aspx*/
.calendar_white_corner div:last-child {
    visibility: hidden;
}






/******************RIPEILOGO INIZIO MESE   SLFSCELTE.ASPX CALENDAR.ASPX*/
#RiepilogoMese {
    /*arrotondamento in sezione arrotondamento*/
    background-color: GhostWhite;
    margin-right: 40px;
    text-align: center;
    border-color: lightblue;
    border-width: 1px;
    border-style: solid;
    padding: 0px;
}

.RiepilogoMeseHeader {
    background-color: #3b5b98;
    padding: 5px;
}

.RiepilogoMeseEtichetta {
    font-size: 1.3em;
}

.RiepilogoMeseValore {
    font-size: 1.3em;
    color: darkblue;
    line-height: 1.2em;
    font-weight: bold;
}
/*******************************************/




/******************Maschera Cambio password - profile.aspx*/
#changepass-div {
    margin: 10px auto;
    width: 500px;
    line-height: 1.5em;
    text-align: center;
}





/***************LOGIN SELFAGENT.ASPX*/
#login-div input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    -webkit-appearance: none;
}

/* ---------- LOGIN ---------- */

#login-div {
    margin: 10px auto;
    width: 300px;
    line-height: 1.5em;
}

#login-titolo {
    font-size: 1.7em;
    margin: 0 2px;
    padding: 20px 26px;
    font-size: x-large;
}

    #login-titolo span[class*="fontawesome-"] {
        margin-right: 14px;
    }

#login-div fieldset {
    background-color: #fff;
    padding: 20px 26px;
    font-size: 1.3em;
    border: 0px;
}




    #login-div fieldset p {
        color: #777;
        margin-bottom: 14px;
    }


#login-div .loginEtichetta {
    font-size: medium;
    font-weight: 200;
}

#login-div fieldset p:last-child {
    margin-bottom: 0;
}



#login-div fieldset input[type="text"], #login-div fieldset input[type="password"] {
    background-color: #eee;
    color: #777;
    padding: 0.5em 0px;
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 100;
}

#login-div fieldset input[type="submit"] {
    background-color: #3b5b98;
    color: #fff;
    display: block;
    margin: 0 auto;
    padding: 4px 0;
    width: 100px;
}

    #login-div fieldset input[type="submit"]:hover {
        background-color: #3b5b78;
    }





body.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #1565c0 0%, #1e88e5 40%, #42a5f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

/* Logo */
.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

    .login-logo .logo-telmar {
        display: inline-block;
        background: rgba(255,255,255,0.15);
        border-radius: 12px;
        padding: 12px 24px;
        backdrop-filter: blur(8px);
    }

        .login-logo .logo-telmar span.brand-name {
            color: #fff;
            font-size: 38px;
            font-weight: 800;
            letter-spacing: 2px;
        }

        .login-logo .logo-telmar span.brand-sub {
            color: rgba(255,255,255,0.85);
            font-size: 34px;
            font-weight: 300;
            margin-left: 4px;
        }

    .login-logo .tagline {
        color: rgba(255,255,255,0.7);
        font-size: 13px;
        font-weight: 500;
        margin-top: 8px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* Card */
.login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    animation: slideUp 0.5s ease-out;
    width: 100%;
}

    .login-card > div {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0;
        box-sizing: border-box;
    }

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card-header {
    background: white !important;
    color: #fff;
    text-align: center;
    padding: 28px 24px 0 24px !important;
    width: 100% !important;
    margin: 0 !important;
    display: block;
}

    .login-card-header .material-icons {
        font-size: 48px;
        margin-bottom: 8px;
        opacity: 0.9;
    }

    .login-card-header h1 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .login-card-header p {
        margin: 6px 0 0;
        font-size: 13px;
        opacity: 0.8;
    }

/* Body */
.login-card-body {
    padding: 32px 32px 28px;
}

.login-lang {
    text-align: right;
    margin-bottom: 20px;
}

    .login-lang select {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 6px 12px;
        font-size: 13px;
        color: #555;
        background: #fafafa;
        cursor: pointer;
        outline: none;
        transition: border-color 0.2s;
    }

        .login-lang select:focus {
            border-color: #1e88e5;
        }

.login-error {
    background: #fce4ec;
    color: #c62828;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 16px;
    text-align: center;
    display: none;
}

    .login-error:not(:empty) {
        display: block;
    }

.field-group {
    margin-bottom: 20px;
    position: relative;
    margin-left: 20px;
}

    .field-group label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .field-group .field-icon {
        position: absolute;
        left: 14px;
        top: 38px;
        color: #90a4ae;
        font-size: 20px;
        pointer-events: none;
        transition: color 0.3s;
    }

    .field-group input[type="text"],
    .field-group input[type="password"] {
        width: 240px;
        padding: 12px 14px 12px 46px;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        font-size: 15px;
        color: #333;
        background: #fafafa;
        transition: all 0.3s ease;
        outline: none;
        text-align: left !important;
        height: auto;
    }

        .field-group input[type="text"]:focus,
        .field-group input[type="password"]:focus {
            border-color: #1e88e5;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(30,136,229,0.12);
        }

.login-btn-wrap {
    margin: 25px 20px;
}

    .login-btn-wrap a {
        display: block;
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, #1565c0, #1e88e5);
        color: #fff !important;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 1px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(21,101,192,0.35);
    }

        .login-btn-wrap a:hover {
            background: linear-gradient(135deg, #0d47a1, #1565c0);
            box-shadow: 0 6px 20px rgba(21,101,192,0.45);
            transform: translateY(-1px);
        }

        .login-btn-wrap a:active {
            transform: translateY(0);
        }

.login-footer {
    text-align: center;
    padding: 0 24px 15px 24px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

    .login-footer span {
        font-size: 12px;
        color: #aaa;
    }












/*********************************************************************/



.invisibile {
    display: none;
    visibility: hidden;
}

.visibile {
    display: normal;
    visibility: visible;
}



.riempi {
    width: 100%;
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}



/* pulsanti top pagina nuovo appuntamento slfinsapp.aspx*/
#cmdDatiRicerca, #cmdRisultato, #cmdDettaglio {
   /* width: 12em;*/
   padding: 10px;
}

@media screen and (max-width: 50em) {
    #cmdDatiRicerca, #cmdRisultato, #cmdDettaglio {
        /* width: 30%;*/
    }
}


/* @media screen and (max-width: 25em), screen and (max-width: 700px), screen and ( -webkit-min-device-pixel-ratio: 1.25 ), only screen and ( min--moz-device-pixel-ratio: 1.25 ), only screen and ( -o-min-device-pixel-ratio: 1.25 / 1 ), only screen and ( min-device-pixel-ratio: 1.25 ), only screen and ( min-resolution: 100dpi ), only screen and ( min-resolution: 1.25dppx ) { */
@media screen and (max-width: 700px) {
    body, input, select, table, textarea, span, div, a {
        font-size: x-small;
    }



    /*Voci menu top (Calendario, gestione appuntamenti, esci ecc*/
    .divMenuTop {
    }

    /* Textbox */
    input[type="password"], input[type="text"], input[type="tel"], textarea {
        padding: 10px;
        margin: 1px;
    }
}


@media screen and (max-width: 40em) {
    /*
    pannello dimensione fissa ridotta utilizzato ad esempio in slfinsapp.aspx
*/
    .pannelloRidotto {
        width: 100%;
    }
}










@media screen and (max-width: 40em) {
    /******************colonne griglie in varie pagine. Se invece la dimensione dello schermo è piu grande vengono decise automaticamente le varie larghezze*/
    .dgCol_data {
        min-width: 2em;
        width: 8em;
        word-break: break-all;
    }

    .dgCol_ora {
        min-width: 2em;
        width: 6em;
        word-break: break-all;
    }

    dgCol_dataora {
        min-width: 3em;
        width: 6em;
        word-break: break-all;
    }

    .dgCol_nomeutente {
        min-width: 2em;
        width: 8em;
        word-break: break-all;
    }

    .dgCol_stato {
        min-width: 4em;
        width: 8em;
        word-break: break-all;
    }

    .dgCol_note {
        word-break: break-all;
        min-width: 5em;
    }

    .dgCol_attivita {
        min-width: 3em;
        width: 8em;
        word-break: break-all;
    }

    .dgCol_nominativo {
        min-width: 3em;
        width: 8em;
        word-break: break-all;
    }

    .dgCol_indirizzo {
        min-width: 3em;
        width: 8em;
        word-break: break-all;
    }

    .dgCol_citta {
        min-width: 3em;
        width: 8em;
        word-break: break-all;
    }

    .dgCol_provincia1 {
        width: 1px;
        word-break: normal;
    }

    .dgCol_id {
        min-width: 2em;
        width: 5em;
        word-break: break-all;
    }
}
/*****************************************************/












/*----------------------- MESSAGEBOX UNIVERSALE: OK/YES/NO/ANNULLA/CHECKBOX MODAL POPUP ---------------------------------------------------------------------*/

/*----------------------- UTILIZZATO DA TUTTI I FORM MODAL POPUP: MESSAGEBOX, E ALTRI ---------------------------------------------------------------------*/
.modalPanel {
    background-color: #FFFFFF;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    padding-top: 10px;
    padding-left: 10px;
    min-width: 500px; /* vedi   @media screen piu sotto*/
    width: 500px;
    max-width: 500px;
    min-height: 200px;
    padding: 5px;
    margin: 0px;
    border-color: lightblue;
    border-width: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
}

.modalPanelBackground {
    background-color: #666699;
    filter: alpha(opacity=40);
    opacity: 0.4;
}


/***********************/

.modalPanelContainerWidth900 {
    min-width: 900px;
    width: 900px;
}

.modalPanelContainerWidth1100 {
    min-width: 1100px;
    width: 1100px;
}

.modalPanelContainerWidth1500 {
    min-width: 1500px;
    width: 1500px;
}

@media screen and (max-width: 950px) {
    .modalPanelContainerWidth900 { /* per display piccoli*/
        min-width: 95%;
        max-width: 95%;
        width: 95%;
    }
}

@media screen and (max-width: 1100px) {
    .modalPanelContainerWidth1100 { /* per display piccoli*/
        min-width: 90%;
        max-width: 90%;
        width: 90%;
    }
}

@media screen and (max-width: 1500px) {
    .modalPanelContainerWidth1500 { /* per display piccoli*/
        min-width: 90%;
        max-width: 90%;
        width: 90%;
    }
}

.modalPanelContainerHeight850 {
    min-height: 850px;
    height: 850px;
}

    .modalPanelContainerHeight850 .modalPanelContent {
        min-height: 650px;
        height: 650px;
    }

@media screen and (max-height: 900px) {
    .modalPanelContainerHeight850 { /* per display piccoli*/
        min-height: 98%;
        max-height: 98%;
        height: 98%;
    }

        .modalPanelContainerHeight850 .modalPanelContent {
            height: 500px; /*se calc non dovesse funzionare*/
            min-height: 500px; /*se calc non dovesse funzionare*/
            max-height: 500px; /*se calc non dovesse funzionare*/
            min-height: calc(100vh - 230px);
            max-height: calc(100vh - 230px);
            height: calc(100vh - 230px);
        }
}

.modalPanelContainerHeightFull {
    min-height: 90%;
    max-height: 90%;
    height: 90%;
    overflow-y: auto;
}

    .modalPanelContainerHeightFull .modalPanelContent {
        height: 800px; /*se calc non dovesse funzionare*/
        min-height: 800px; /*se calc non dovesse funzionare*/
        max-height: 800px; /*se calc non dovesse funzionare*/
        min-height: calc(100vh - 230px);
        max-height: calc(100vh - 230px);
        height: calc(100vh - 230px);
    }




/***************************/




.messageBoxPanel {
    min-width: 500px; /* vedi   @media screen piu sotto*/
    width: 500px;
    max-width: 500px;
    min-height: 200px;
    overflow-y: auto;
    max-height: 100vh;
}

@media screen and (max-width: 550px) {
    .messageBoxPanel { /* per display piccoli*/
        min-width: 98%;
        max-width: 98%;
        width: 98%;
    }
}





.MessageBoxTitleMaterialize {
    background-color: #42A5F5 !important;
    vertical-align: baseline;
    margin: 3px;
    text-align: left;
    padding: 6px;
    color: white;
}

.MessageBoxTitle {
    font-size: 1.64rem;
    line-height: 1.804rem;
    margin: 0.82rem 0 0.656rem 0;
    font-weight: 400;
}


.MessageBoxBody {
    color: #1976D2 !important;
    margin-bottom: 10px;
    text-align: left;
    text-align: left;
    padding: 10px 0px;
    margin: 15px;
    text-align: center;
    margin: 15px;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
}

.MessageBoxCheckboxPanel {
    text-align: left;
    padding: 0 15px 0 15px;
    margin-top: 25px;
}

.MessageBoxTextboxPanel, .MessageBoxDropDownPanel {
    text-align: left;
    padding: 0 15px 0 15px;
}

    .MessageBoxTextboxPanel input[type=text], .MessageBoxDropDownPanel select {
        padding: 10px;
        margin: 0;
        width: 90%;
        width: -moz-available; /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
        width: fill-available;
    }

.MessageBoxTextboxPanel2 {
    margin-top: 45px;
}

    .MessageBoxTextboxPanel2 input[type="text"] {
        margin-top: 20px;
    }

.MessageBoxCmdMaterialize {
    height: 54px;
    background-color: #2196F3 !important;
    color: white;
    width: 8em;
    text-decoration: none;
    /*    padding: 0 6px;
    line-height: 56px;
    margin-top: 15px;
    display: inline-block;
    */
}

    a.MessageBoxCmdMaterialize, .MessageBoxCmdMaterialize a {
        padding: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin: 10px 10px;
    }

    .MessageBoxCmdMaterialize i {
        line-height: inherit;
    }


/************************************* Detail.aspx ***********************************************/

.txtAnag {
    width: -moz-available; /* Firefox */
    width: -webkit-fill-available; /* Chrome, Safari, Edge */
    width: stretch; /* Standard futuro */
}

.txtNominativo, .txtCitta, .txtIndirizzo {
    width:30em;
}

.txtCap {

}

.txtTelefono, .txtProvincia {

}

.call-phone-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    height: 2.2em;
    padding: 0.5em 1em !important;
    margin-right: 6px;
    box-sizing: border-box;
}

.call-phone-button i {
    margin: 0;
}






/************************************* DetailInt.ascx **********************************************/
.txtNoteInt {
    width: 100%;
    margin-right: 10px;
}


/************************************* DetailCheckin.ascx **********************************************/

#DetailCheckin_dgCheckin tr td {
    padding:10px 15px !important;
}


@media screen and (max-width: 700px) {
    #cmdMappa.detail, #hlStampa.detail {
        padding:1.5em;
    }
}




/************************* agenda del giorno e google maps *************************/
/* nasconde le indicazioni sul percorso, ad esempio "svolta a destra dopo 200m" ecc, e lascia visibile quindi solo le distanze totali */
.adp-directions {
    display: none !important;
}


#mapRoute {
    height: 500px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
}

/* marker A,B,C ecc sulla mappa nel caso di percorso non trovato e visualizzazione di punti singoli*/
#mapRoute img {
    width: 25px;
}


/* casella di ricerca / search box di google map*/
#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 20em;
    height: 40px;
    margin-top: 15px;
}

@media screen and (max-width: 35em) {
    #pac-input {
        margin-top: 36px; /* nei display piccoli devo abbassare la searchbar altrimenti collide con il menu drawing in alto a destra*/
    }
}


#pac-input:focus {
    border-color: #4d90fe;
}

.pac-container {
    font-family: Roboto;
}


.agenda-singolo-app {
    border-radius: 7px !important;
    justify-content: left;
    margin: 30px auto !important;
    border-collapse: initial !important;
    border-spacing: initial !important;
    /*border: 2px solid #666 !important;*/
    width: 800px !important;
    max-width: 90% !important;
    padding: 20px !important;
    background-color: white;
    text-align: left;
    font-weight: 300;
    text-decoration: none;
}

/*marker A,B,C ecc su lista dettaglio singoli appuntamenti*/
.agenda-singolo-app img {
    width: 25px;
}


/* ora singolo appuntamento*/
.orario {
    font-weight: 900 !important;
}





/* pulsanti associati al singolo giorno della settimana - per aprire dettaglio agenda giorno singolo*/
input[type=image].cmdDettaglioGiorno {
    /* la posizione è impostata in spostaPulsantiAgendaGiorno() */
    border-width: 0px !important;
    padding: 0 !important;
    width: 17px !important;
    height: 17px !important;
    position: absolute !important;
    background-repeat: no-repeat;
}

@media (max-width: 450px) {
    .tableDatiContatto td[colspan="2"] {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
}

/************************************************************************************/


/************************* Calendar.aspx - layout e stile *************************/

/* Toolbar: mini-calendario + pulsanti + stats + assenze */
.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding: 15px 10px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    background-color: #F7F8FA !important;
}

/* Mini-calendario ASP.NET Calendar1 */
.calendar-toolbar .mini-calendar {
    width: 248px !important;
    min-width: 248px;
    height: 198px !important;
    padding: 0 10px;
    color: #183d70;
    background: #ffffff !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 9px !important;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(32, 68, 108, 0.08);
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed;
    box-sizing: border-box;
    font-family: Roboto, Arial, sans-serif;
}

.calendar-toolbar .mini-calendar td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
}

.calendar-toolbar .mini-calendar td a {
    text-decoration: none;
    color: #183d70 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.calendar-toolbar .mini-calendar .mini-calendar-title {
    height: 38px !important;
    color: #123b73 !important;
    background: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
}

.calendar-toolbar .mini-calendar .mini-calendar-title {
    width: 100% !important;
    height: 38px;
}

.calendar-toolbar .mini-calendar .mini-calendar-title > tbody > tr {
    display: flex;
    align-items: center;
    width: 100%;
}

.calendar-toolbar .mini-calendar .mini-calendar-title > tbody > tr > td {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-toolbar .mini-calendar .mini-calendar-title > tbody > tr > td:nth-child(1) {
    order: 2;
    width: 32px !important;
}

.calendar-toolbar .mini-calendar .mini-calendar-title > tbody > tr > td:nth-child(2) {
    order: 1;
    flex: 1 1 auto;
    justify-content: flex-start;
    width: auto !important;
    padding-left: 4px !important;
    color: #123b73 !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

.calendar-toolbar .mini-calendar .mini-calendar-title > tbody > tr > td:nth-child(3) {
    order: 3;
    width: 32px !important;
}

.calendar-toolbar .mini-calendar .mini-calendar-nav-month {
    color: #183d70 !important;
    font-size: 25px;
    font-weight: 500;
}

.calendar-toolbar .mini-calendar .mini-calendar-nav-month a {
    width: 28px;
    height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 25px;
    font-weight: 500;
    line-height: 28px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.calendar-toolbar .mini-calendar .mini-calendar-nav-month a:hover {
    color: #0d6fdc !important;
    background-color: #edf5ff;
}

.calendar-toolbar .mini-calendar .mini-calendar-weekday {
    padding: 0 !important;
    height: 24px !important;
    color: #55749b !important;
    background: #ffffff !important;
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
}

.calendar-toolbar .mini-calendar .mini-calendar-day,
.calendar-toolbar .mini-calendar .mini-calendar-weekend,
.calendar-toolbar .mini-calendar .mini-calendar-other-month,
.calendar-toolbar .mini-calendar .mini-calendar-today,
.calendar-toolbar .mini-calendar .mini-calendar-selected {
    height: 26px !important;
    color: #183d70 !important;
    background: #ffffff !important;
}

    .calendar-toolbar .mini-calendar .mini-calendar-day a,
    .calendar-toolbar .mini-calendar .mini-calendar-weekend a,
    .calendar-toolbar .mini-calendar .mini-calendar-other-month a,
    .calendar-toolbar .mini-calendar .mini-calendar-today a,
    .calendar-toolbar .mini-calendar .mini-calendar-selected a {
        width: 26px;
        height: 26px;
        margin: 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: color 0.15s ease, background-color 0.15s ease;
        
    }

    .calendar-toolbar #Calendar1.mini-calendar td.mini-calendar-selected a {
        background: purple !important;
    }

        .calendar-toolbar .mini-calendar .mini-calendar-day a:hover,
        .calendar-toolbar .mini-calendar .mini-calendar-weekend a:hover,
        .calendar-toolbar .mini-calendar .mini-calendar-other-month a:hover {
            background-color: #edf5ff;
        }

.calendar-toolbar .mini-calendar .mini-calendar-other-month,
.calendar-toolbar .mini-calendar .mini-calendar-other-month a {
    color: #9aacc1 !important;
}

.calendar-toolbar .mini-calendar .mini-calendar-today a,
.calendar-toolbar .mini-calendar .mini-calendar-selected a {
    color: #ffffff !important;
    background: #0d6fdc !important;
    font-weight: 500;
}

.calendar-toolbar .mini-calendar .mini-calendar-selected a:hover {
    background: #0a5fbe !important;
}

.calendar-toolbar .mini-calendar .mini-calendar-today a:hover {
    background: #0a5fbe !important;
}

.calendar-toolbar .mini-calendar.mini-calendar-user-selected .mini-calendar-selected a {
    background: #b0128f !important;
    box-shadow: 0 2px 7px rgba(176, 18, 143, 0.42);
}

.calendar-toolbar .mini-calendar.mini-calendar-user-selected .mini-calendar-selected a:hover {
    background: #8e0f74 !important;
}

.calendar-toolbar .mini-calendar > tbody > tr:has(> .mini-calendar-other-month:first-child):has(> .mini-calendar-other-month:last-child) {
    display: none;
}

/* Pulsanti navigazione settimana */
.calendar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.calendar-nav .btn-nav {
    padding: 0.8em;
}

.calendar-nav .btn-nav:hover {
    background-color: #e8f0fe;
    box-shadow: 0 2px 6px rgba(59, 91, 152, 0.12);
}

.calendar-nav .btn-oggi {
    padding: 0.36em 1.2em;
    font-size: 1.5em;
    font-weight: 500;
    color: #3b5b98;
    background-color: white;
    cursor: pointer;
    margin-left: 6px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(59, 91, 152, 0.1);
    border-radius: 6px !important;
    border: 1px solid lightblue;
}





.calendar-nav .btn-oggi:hover {
    background-color: #2d4a7a;
    box-shadow: 0 2px 6px rgba(59, 91, 152, 0.2);
}

.calendar-nav .btn-view {
    padding: 0.8em 1em;
    background-color: white;
    border: 1px solid #d0d8e8 !important;
    border-radius: 8px !important;
    margin-left: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(59, 91, 152, 0.06);
}

.calendar-nav .btn-view:hover {
    background-color: #e8f0fe;
    box-shadow: 0 2px 6px rgba(59, 91, 152, 0.12);
}

/* Pannello statistiche */
.calendar-toolbar .calendar-stats {
    background-color: #f5f7fb;
    border: 1px solid #d0d8e8;
    border-radius: 8px;
    padding: 14px 18px;
    line-height: 2em;
    box-shadow: 0 2px 8px rgba(59, 91, 152, 0.08);
}

.calendar-toolbar .calendar-stats a {
    color: #3b5b98;
    text-decoration: none;
    transition: color 0.15s ease;
}

.calendar-toolbar .calendar-stats a:hover {
    color: #1565c0;
    text-decoration: underline;
}

/* Sezione assenze */
.calendar-assenze {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 15px;
}

.calendar-assenze .assenza-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.calendar-assenze .assenza-box {
    background: #ffffff;
    border: 1px solid #d0d8e8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(59, 91, 152, 0.08);
    text-align: center;
    min-width: 120px;
}

.calendar-assenze .assenza-box-header {
    background-color: #3b5b98;
    color: white;
    font-weight: 600;
    padding: 6px 12px;
    font-size: 0.85em;
}

.calendar-assenze .assenza-box-sublabel {
    color: #999;
    font-size: 0.8em;
    padding: 4px;
    background: #f5f7fb;
}

.calendar-assenze .assenza-box-content {
    padding: 8px;
    background: white;
}

.calendar-assenze .assenza-note {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 5px 0;
}

.calendar-assenze .assenza-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px 0;
}

/* DayPilot calendar wrapper */
.calendar-daypilot-wrapper {
    margin-top: 15px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    /*overflow: hidden;*/
    box-shadow: 0 2px 8px rgba(59, 91, 152, 0.08);
    border: 1px solid #d0d8e8;
}

@media screen and (max-width: 50em) {
    .calendar-toolbar {
        flex-direction: column;
        align-items: center;
    }

    .calendar-nav {
        justify-content: center;
    }
}


.distance {
    font-size: 1.5em;
    color: white;
    font-weight:bold;
}