/* input(221,18): run-time error CSS1030: Expected identifier, found '#spiaggia'
input(221,43): run-time error CSS1025: Expected comma or open brace, found ')' */

.mainOkBeach #content {
    padding-bottom: 0;
}

#content-mappa {
    -ms-overflow-style: none; /*Internet Explorer 10+ */
    scrollbar-width: none; /*Firefox */
    overflow: hidden;
    height: 80vh;
}
    #content-mappa::-webkit-scrollbar {
        display: none; /*Safari and Chrome */
    }

   /* #content-mappa:has(.styleMinimal) {
        overflow: scroll !important;
    }*/



/* ---------------------------------------------------- LEGENDA ----------------------------------------------------*/
#legendaColori{
    overflow-y: scroll !important;
}

.simboloLegenda {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    padding: 3px;
    margin: 1px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size:11px;
}

.descrizioneSimbolo {
    font-size: 12px;
    display: inline-table;
    margin: 3px 10px;
}




/* ---------------------------------------------------- HEADER ----------------------------------------------------*/

.erroreStabilimentoSel {
    text-align: center;
    margin-top: 10%;
    font-size: 14px;
}




.mappaTesta {
    margin-bottom: 3px !important;
}
    .mappaTesta div {
        padding: 0;
    }
        .mappaTesta div > div {
            padding: 0;
        }


.divComponentTesta {
    padding-bottom: 2px;
}

.divComponentButtonTesta {
    display: flex;
    gap: 4px;
}
    .divComponentButtonTesta .date-nav {
        display: grid;
        grid-template-columns: 25px auto 25px auto;
        grid-template-rows: auto auto;
        gap: 2px;
        max-width: 200px;
        min-width: 140px;
    }
    .divComponentButtonTesta .date-selector {
        min-width: 174px;
        max-width: 174px;
    }


.content-header .panel-body .btn {
    margin: 0;
}
    .content-header .panel-body .rowBtnZoom .btn {
        font-size: 20px;
        padding: 4px 10px;
    }


.buttonTesta {
    display: flex;
    gap: 8px;
    flex-direction: row;
}
    .buttonTesta .tools-btn,
    .buttonTesta .lettini-btn {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
    }
        .buttonTesta .tools-btn .divSubBtn,
        .buttonTesta .lettini-btn .divSubBtn {
            display: flex;
            flex-wrap:wrap;
            gap: 3px;
            background-color: whitesmoke;
            border-radius: 20px;
            padding: 1px;
        }

.mappaTesta .panel-body.show-mappa {
    display: grid;
    grid-template-columns: auto auto auto 1fr 184px;
    gap: 10px;
    row-gap: 6px;
    align-items: start;
}

.mappaTesta .panel-body:before,
.mappaTesta .panel-body:after {
    content: none;
}


.divComponentStabilimentoTesta {
    display: flex;
    gap: 4px;
}
    .divComponentStabilimentoTesta .btn-header a {
        margin: 0 !important;
        height: 33px !important;
        width: 33px !important;
        line-height: 24px !important;
        padding: 4px 0 0 0;
    }

.panel-body.show-mappa .centerElemInContent {
    justify-content: end;
    display: flex;
    gap: 4px;
}
    .panel-body.show-mappa .centerElemInContent .cliente-cbo {
        width: 100%;
        max-width: 400px;
        text-align:end;
    }




.btnTesta {
    padding: 4px 10px !important;
}
    .btnTesta.btnOpzioni {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 16px;
        white-space: nowrap;
    }
        .btnTesta.btnOpzioni:hover {
            background-color: floralwhite;
            border-color: #fb0;
            box-shadow: inset 0 0 3px #fb0;
        }        
        .btnTesta.btnOpzioni:focus{
            box-shadow:none;
        }

    .btnTesta.btnTestaActive {
        background-color: floralwhite;
        border-color: #fb0;
        box-shadow: inset 0 0 3px #fb0;
    }

    .btnTesta.btnResetClienteSearch {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }


.btnAddDayToRange {
    padding: 4px 6px !important;
}


.km-switch {
    border-radius: 4px !important;
}

.k-button.k-state-active, .k-button:active {
    color: white !important;
    background-color: royalblue !important;
}




/* ------------- SHOW FREE POST -------------*/

.btnTesta.btnOpzioni#btn_Morning,
.btnTesta.btnOpzioni#btn_Afternoon {
    font-size: 14px;
    padding: 5px 5px !important;
}


.mainOkBeach:has(#spiaggia.showFreeItem_AM) button#btn_Morning,
.mainOkBeach:has(#spiaggia.showFreeItem_PM) button#btn_Afternoon {
    background-color: floralwhite;
    border-color: #fb0;
    box-shadow: inset 0 0 3px #fb0;
}

.showFreeItem div.Ombrellone:has(.Occupato) {
    opacity: 0.2;
    pointer-events: none;
}
    
    .showFreeItem_AM div.Ombrellone:has(.Occupato):has(.AllDay),
    .showFreeItem_AM div.Ombrellone:has(.Occupato):has(.Morning) {
        opacity: 0.2;
        pointer-events: none;
    }

    .showFreeItem_PM div.Ombrellone:has(.Occupato):has(.AllDay),
    .showFreeItem_PM div.Ombrellone:has(.Occupato):has(.Afternoon) {
        opacity: 0.2;
        pointer-events: none;
    }


.showFreeItem div.Cabina.Occupato {
    opacity: 0.2;
    pointer-events: none;
}





/* ---------------------------------------------------- DESIGN MAPPA ----------------------------------------------------*/
#spiaggia.styleMinimal {
    cursor: pointer;
}

.sfondoSpiaggia {
    width: 100%;
    color: Black;
    position: relative;

    background-color: #f6da9b;
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: local;
  /*  background-position: bottom right;*/

}
.edit-mappa.sfondoSpiaggia {
    background-position-x: 40px;
    background-position-y: 40px;
}

.cellaStab {
    position: absolute;
}
    #spiaggia:not(.styleMinimal) .cellaStab{
        padding: 5px;
    }

.mappaPost {
    height: 100%;
    position: relative;
}


.mappaPost div#divBack {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: -1;
}


.mappaPost #iconBody {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 0;
    align-items: center;
    padding: 15px;
}
    .styleMinimal #iconBody {
        display:none;
    }


.mappaPost #divFront {
    height: 100%;
    max-height: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr; 
    padding: 1px 0px;
    text-align: left;
}
    .styleMinimal .mappaPost #divFront{
        grid-template-rows: 50% 50%;
        padding: 0px;
        overflow: hidden;
    }



.design-mappa #spiaggia.showPrenotazioneMultipla:not(.styleMinimal) .mappaPost:has(.Libero) #divFront {
    grid-template-rows: 1fr auto;
    grid-row-gap: 5px;
}




/*--------------- TOOLTIP su cella */
#spiaggia .k-tooltip-content, 
#mappaSituazione .k-tooltip-content, 
#gantt .k-tooltip-content {
    text-align: left;
    color: black;
}

#spiaggia .k-tooltip,
#mappaSituazione .k-tooltip,
#gantt .k-tooltip-content {
    background-color: rgba(250, 235, 190, 0.95) !important;
}
body:has(.notToolTip) .k-tooltip {
    visibility:hidden;
}


/*--------------- Event onHOVER */
div.Cabina:hover,
div.Ombrellone:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    cursor: pointer;
    filter: brightness(1.2);
}
   
    #spiaggia.styleMinimal div.cellaStab div.Ombrellone,
    #spiaggia.styleMinimal div.Arredamento,
    #spiaggia.styleMinimal div.Stabilimento {
        transform: none !important;
    }


.design-mappa .styleImage div.Cabina:hover > .testa,
.design-mappa .styleImage div.Ombrellone:hover > .testa {
    background-color: #fff;
    grid-template-columns: 1fr;
    justify-content:normal;
}

.design-mappa .styleImage.showClienti div.Ombrellone:hover .cliente {
    background-color: #fff;
}




/*---------------------------------------------------  TESTA  ---------------------------------------------------*/
.mappaPost .testa {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 15px;
    gap: 2px;
    align-content: center;
    color: black;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    margin: 0;
    padding: 1px 3px;
    min-height: 15px;
}
    .styleMinimal .testa {
        grid-template-columns: auto;
        padding: 0 2px;
        background-color: transparent;
        border-radius: 0px;
    }
    
    .design-mappa .ZonaLettini .testa {
        display: none !important;
    }
    

.testa .divSx {
    grid-column: 1;
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: 4px;
    align-items: center;
    align-content: center;
}
    .styleMinimal .testa .divSx {
        display: flex;
        flex-direction: row-reverse;
        justify-content: left;
    }

    .styleMinimal .testa .divSx .nome {
        color: white;
    }

    .Cabina .testa .divSx {
        display: flex;
        justify-content: left;
    }

    .testa .divSx .alertSx {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }


.testa .divDx {
    text-align: end;
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
    .styleMinimal .testa .divDx {
        display: flex;
        gap: 2px;
        text-align: right;
        position: absolute;
        right: 2px;
    }



.design-mappa#mappa-full[zoomType="up05"] #spiaggia:not(.styleMinimal) .testa {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    line-height: 1.2;
    min-height: 20px;
}
.design-mappa#mappa-full[zoomType="down05"] #spiaggia:not(.styleMinimal) .testa {
    display: flex;
    gap: 1px;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1;
    min-height:25px;
}

    .design-mappa#mappa-full[zoomType="up1"] #spiaggia:not(.styleMinimal) .testa .divSx {
        font-size: 100%;
    }
    .design-mappa#mappa-full[zoomType="up05"] #spiaggia:not(.styleMinimal) .testa .divSx {
        font-size: 150%;
        line-height: 1.2;
        grid-template-columns: auto 1fr;
    }
    .design-mappa#mappa-full[zoomType="down05"] #spiaggia:not(.styleMinimal) .testa .divSx {
        font-size: 190%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
    }
        .design-mappa#mappa-full[zoomType="down05"] #spiaggia.showPrenotazioneMultipla:not(.styleMinimal) .testa .divSx {
            flex-wrap: nowrap;
            font-size: 180%;
        }
            .design-mappa#mappa-full[zoomType="down05"] #spiaggia.showPrenotazioneMultipla:not(.styleMinimal) .testa .divSx div:has(.nome) {
                flex-grow: 1;
                overflow: hidden;
            }




    .design-mappa#mappa-full[zoomType="up05"] #spiaggia:not(.styleMinimal) .testa .divDx .alertDx {
        font-size: 14px;
    }
    .design-mappa#mappa-full[zoomType="down05"] #spiaggia:not(.styleMinimal) .testa .divDx .alertDx {
        font-size: 16px;
    }



.testa .alertIsFromBooking,
.edit-mappa .testa .alertIsFromBooking,
.simboloLegenda.alertIsFromBooking,
.settore_Bianco.Libero .alertIsFromBooking,
#prenotazioneWindow .alertIsFromBooking {
    color: #6621ceff;
}
    .styleMinimal .testa .alertIsFromBooking {
        color: white;
        font-size: 11px;
        font-weight: 200;
    }

    #pnlMap_ToEdit #pnl_Disp .dataCellaCalendario.dataPrenotabile {
        background-color: #6621ceff;
        border-color: #6621ceff;
    }


.edit-mappa .testa .alertIsFromBooking.alertIsFromBooking_Today {
    color: orangered;
}
    #pnlMap_ToEdit #pnl_Disp .dataCellaCalendario.dataTODAY {       
        border-color: orangered;
    }



.testa .alertDx {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
    .styleMinimal .testa .alertDx,
    .smallMappa .testa .alertDx {
        width: 12px;
        height: 12px;
        font-size: 10px;
    }

.testa .alertDx .alertInfo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content:center;
}


.testa .alertDx.alertScadenza,
.simboloLegenda.scadenza {
    color: red;
    background: white;
    border: 1px solid lightgray;
}

.testa .alertDx.alertSaldo,
.simboloLegenda.saldo {
    color: #00aa00ff;
    background-color: white;
}
    .testa .alertDx.alertSaldo,
    .simboloLegenda.saldo,
    .testa:has(.alertDx.alertSaldo) {
        border: 1px solid #00aa00ff;
    }

.styleMinimal .testa .alertDx.alertSaldo {
    color: white;
    background-color: #00aa00ff;
    border: 1px solid #28a745;
}
.styleMinimal .testa:has(.alertDx.alertSaldo) {
    border: none;
}

#spiaggia div.Ombrellone.DataDisponibile .testa .alertDx.alertScadenza,
#spiaggia div.Ombrellone.DataDisponibile .testa .alertDx.alertSaldo {
    display: none;
}



.testa .alertDx:has(.alertInfo.alertMex),
.simboloLegenda.sovrapposizione,
.simboloLegenda.outOfRange {
    color: #ffdd55ff;
    background: black;
}


.testa .alertDx .alertDataDisp,
.simboloLegenda.DataDisponibile {
        color: royalblue;
    }



.testa .alertDx .alertCheckOUT,
.simboloLegenda.Stato_CheckOUT {
    color: #247236ff;
}



.testa .nome.alertPrenoToConfirm,
.simboloLegenda.alertPrenoToConfirm {
    background-color: #fccf03 !important;
}
    .simboloLegenda.Stato_PrenoToConfirm {
        color: #fccf03 !important;
    }

.testa .nome.alertPrenoToConfirm {
    padding: 0px 4px 0px 4px;
    border-radius: 10px;
}
    .testa .nome.alertPrenoToConfirm span {
        color: black;
    }



    
/*--------------------------------------------------- ICONE  ---------------------------------------------------*/
.mappaPost #iconBody > div {
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
    border: none !important;
}

.cellaStab.divIconArredo {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



/*--------------------------------------------------- SELECT ---------------------------------------------------*/


.design-mappa .selectStruttura {
    display: none;
}


.showPrenotazioneMultipla .selectStruttura {
    display: flex;
    align-items: start;
}
    .showPrenotazioneMultipla .selectStruttura > input {
        display: block;
        margin: 0 !important;
    }
        
    .styleMinimal.showPrenotazioneMultipla .selectStruttura {
        justify-content: flex-end;
        padding: 0px 1px 3px;
    }


    .styleImage.showPrenotazioneMultipla .selectStruttura {
        justify-content: center;
        align-items: end;
        height: 100%;
        padding-bottom: 35%;
    }
    .design-mappa#mappa-full[zoomType="up05"] .styleImage.showPrenotazioneMultipla .selectStruttura {
        align-items: start;
        padding-top: 5px;
        padding-bottom: 0px;
    } 
    .design-mappa#mappa-full[zoomType="down05"] .styleImage.showPrenotazioneMultipla .selectStruttura {
        align-items: end;
        padding-bottom: 5px;
    }

        .styleImage.showPrenotazioneMultipla .selectStruttura > input {
            width: 20px;
            height: 20px;
        }
        .design-mappa#mappa-full[zoomType="up05"] .styleImage.showPrenotazioneMultipla .selectStruttura > input {
            width: 30px;
            height: 30px;
        }
        .design-mappa#mappa-full[zoomType="down05"] .styleImage.showPrenotazioneMultipla .selectStruttura > input {
            width: 40px;
            height: 40px;
            outline: 1px solid royalblue;
        }





/*--------------------------------------------------- CORPO - FOOTER  ---------------------------------------------------*/

.mappaPost .corpo {
    margin: 0;
    align-items: center;
    align-content: end;
}
    .styleMinimal .corpo {
        align-items: start;
    }


/*-------------  ATTREZZATURE */
.mappaPost .corpo .attrezzature {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 3px;
    justify-content: space-around;
    align-content: end;
    padding: 0 2px 1px;
}
    .styleMinimal .mappaPost .corpo .attrezzature {
        justify-content: initial;
    }



.mappaPost .corpo .attrezzature .alertPrenoRow {
    font-size: 10px;
    text-align: center;
    align-content: center;
    color: white;
}
    .startingSmallMappa .attrezzature .alertPrenoRow {
        line-height: 1em;
    }

#spiaggia:not(.styleMinimal) .mappaPost .corpo .attrezzature .alertPrenoRow {
    min-width:15px;
}


.mappaPost .corpo .attrezzature .alertPrenoRow.accessori {
    text-align: end;
    align-content: end;
}
    .styleMinimal .attrezzature .alertPrenoRow.accessori {
        font-size: 9px;
    }


.mappaPost .corpo .attrezzature .alertPrenoRow.alertTipoAttr,
.tooltipMappa.alertPrenoRow.alertTipoAttr {
    width: auto;
    height: 100%;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.tooltipMappa.alertPrenoRow.alertTipoAttr {
    width: 15px;
    height: 15px;
}



.mappaPost .corpo .attrezzature .alertPrenoRow.hideAlertDetail {
    visibility: hidden;
}

#spiaggia.hideDetailPreno .Ombrellone .corpo .attrezzature {
    visibility: hidden;
}




#mappa-full[zoomType="up1"] #spiaggia:not(.styleMinimal) .corpo .alertPrenoRow {
  
}
#mappa-full[zoomType="up05"] #spiaggia:not(.styleMinimal) .corpo .alertPrenoRow {
    font-size: 100%;
}
#mappa-full[zoomType="down05"] #spiaggia:not(.styleMinimal) .corpo .alertPrenoRow {
    font-size: 150%;
}



/*-------------  CLIENTE */
.cliente {
    display: none;
}



.showClienti .cliente {
    display: block;
    font-size: 12px;
    text-align: left;
    color: #000;
    padding: 0 4px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}
    .showClienti .Cabina .cliente {
        font-size: 10px;
    }
    .styleMinimal.showClienti .cliente {
        font-size: 10px;
        color: #fff;
        background-color: transparent;
    }


.showClienti div.Ombrellone .corpo .attrezzature,
.showClienti div.Cabina .corpo .attrezzature {
    display: none;
}


.showClientePreno div.Ombrellone {
    opacity: 0.2;
    pointer-events: none;
}
    .showClientePreno div.Ombrellone.isPrenoCliente {
        opacity: 1;
        pointer-events: auto;
    }


.showClientePreno div.Cabina {
    opacity: 0.2;
    pointer-events: none;
}
    .showClientePreno div.Cabina.isPrenoCliente {
        opacity: 1;
        pointer-events: auto;
    }


.showClientePreno div.ZonaLettini {
    opacity: 0.2;
    pointer-events: none;
}
    .showClientePreno div.ZonaLettini.isPrenoCliente {
        opacity: 1;
        pointer-events: auto;
    }



#mappa-full[zoomType="up1"] #spiaggia:not(.styleMinimal) .cliente {
}

#mappa-full[zoomType="up05"] #spiaggia:not(.styleMinimal) .cliente {
    font-size: 110%;
}

#mappa-full[zoomType="down05"] #spiaggia:not(.styleMinimal) .cliente {
    font-size: 150%;
    background-color: rgba(255, 255, 255, 0.8);
}


/*--------------------------------------------------- STATO e ALERT  ---------------------------------------------------*/

#spiaggia .mappaPost.Libero {
    border: none;
}



.mappaPost #divBack {
    display: flex;
}

.mappaPost #divBack,
.mappaPost #divBack > div {    
    width: 100%;
    height: 100%;
}
    .mappaPost #divBack .divMorning {
        aspect-ratio: 1;
        clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
        position: absolute;
        z-index: 0;
        padding:10px;
    }

    .mappaPost #divBack .divAfternoon {
        aspect-ratio: 1;
        clip-path: polygon(100% 0, 0 100%, 100% 100%);
        position: absolute;
        z-index: 1;
    }

    .mappaPost #divBack.AllDay .divMorning,
    .mappaPost #divBack:has(.divMorning.Libero):has(.divAfternoon.Libero) .divMorning
    {
        clip-path: rect(0 100% 100% 0 round 0%);
    }
    .mappaPost #divBack.AllDay .divAfternoon,
    .mappaPost #divBack:has(.divMorning.Libero):has(.divAfternoon.Libero) .divAfternoon {
        visibility: hidden;
    }

    .mappaPost.Cabina #divBack:has(.divMorning.Occupato):has(.divAfternoon.Occupato) .divMorning {
        clip-path: rect(0 100% 100% 0 round 0%);
    }
    .mappaPost.Cabina #divBack:has(.divMorning.Occupato):has(.divAfternoon.Occupato) .divAfternoon {
        visibility: hidden;
    }

.design-mappa #spiaggia:not(.styleMinimal) .mappaPost #divBack div,
#adminMappaForm .mappaPost #divBack div {
    border-radius: 8px;
}


/*--- LIBERO */
#spiaggia .mappaPost .Libero,
#spiaggia .mappaPost.Cabina .Libero,
#adminMappaForm .mappaPost .Stato_Libero,
.simboloLegenda.Libero {
    background-color: transparent;
    border: 0.05em solid transparent;
}
    .mainOkBeach .mappaPost .divMorning.Libero,
    .mainOkBeach .mappaPost .divAfternoon.Libero {
        border-color: transparent;
    }


/*--- OCCUPATO */
#spiaggia .mappaPost .Occupato,
#spiaggia .mappaPost.Cabina .Occupato,
#adminMappaForm .mappaPost .Stato_Occupato,
.simboloLegenda.Occupato {
    background-color: #ff1f1f;
    border: 0.05em solid #b50b0b;
}
    .mainOkBeach .mappaPost .divMorning.Occupato {
        border-color: #b50b0b transparent transparent #b50b0b;
    }
    .mainOkBeach .mappaPost .divAfternoon.Occupato {
        border-color: transparent #b50b0b #b50b0b transparent;
    }


/*--- Preno DA BOOKING */
#spiaggia .mappaPost .Occupato.Stato_PrenoBooking,
#spiaggia .mappaPost.Cabina .Occupato.Stato_PrenoBooking,
#adminMappaForm .mappaPost .Stato_PrenoBooking,
.simboloLegenda.Stato_PrenoBooking {
    background-color: #9333FF;
    border: 1px solid #7137c8ff;
}
    .mainOkBeach .mappaPost .divMorning.Occupato.Stato_PrenoBooking {
        border-color: #7137c8ff transparent transparent #7137c8ff;
    }
    .mainOkBeach .mappaPost .divAfternoon.Occupato.Stato_PrenoBooking {
        border-color: transparent #7137c8ff #7137c8ff transparent;
    }


/*-- STAGIONALE */
#spiaggia .mappaPost .Stato_PrenoStagionale,
#adminMappaForm .mappaPost .Stato_PrenoStagionale,
.simboloLegenda.Stato_PrenoStagionale {
    background-color: #ff1f1f;
    border: 0.05em solid #b50b0b;
}
    .mainOkBeach .mappaPost.Ombrellone .divMorning.Stato_PrenoStagionale {
        border-color: #b50b0b transparent transparent #b50b0b;
    }
    .mainOkBeach .mappaPost.Ombrellone .divAfternoon.Stato_PrenoStagionale {
        border-color: transparent #b50b0b #b50b0b transparent;
    }

    .simboloLegenda.Stato_PrenoStagionale{
        color: white;
    }


/*--- PRENO DA CONFERMARE */
#spiaggia .mappaPost .Occupato.Stato_PrenoToConfirm,
#adminMappaForm .mappaPost .Stato_PrenoToConfirm,
.simboloLegenda.Stato_PrenoToConfirm {
    background-color: #ff1f1f;
    border: 0.05em solid #b50b0b;
}
    .mainOkBeach .mappaPost .divMorning.Occupato.Stato_PrenoToConfirm {
        border-color: #b50b0b transparent transparent #b50b0b;
    }
    .mainOkBeach .mappaPost .divAfternoon.Occupato.Stato_PrenoToConfirm {
        border-color: transparent #b50b0b #b50b0b transparent;
    }



/*-- PARZIALMENTE Occupato */
#spiaggia .mappaPost .ParzialmenteOccupato,
#spiaggia .mappaPost.Cabina .ParzialmenteOccupato,
#adminMappaForm .mappaPost .Stato_ParzOccupato,
.simboloLegenda.ParzialmenteOccupato {
    background-color: transparent;
    border: 1px solid #db7414;
    color: black;
}
    .mainOkBeach .mappaPost.Ombrellone .divMorning.ParzialmenteOccupato {
        border-color: #db7414 transparent transparent #db7414;
    }
    .mainOkBeach .mappaPost.Ombrellone .divAfternoon.ParzialmenteOccupato {
        border-color: transparent #db7414 #db7414 transparent;
    }


#spiaggia.styleMinimal .mappaPost .ParzialmenteOccupato {
    background-color: #fb0;
}

#spiaggia:not(.styleMinimal) .mappaPost:has(.ParzialmenteOccupato) .nome,
#spiaggia:not(.styleMinimal) .mappaPost:has(.ParzialmenteOccupato) .corpo div {
    color: black;
}



/*-- Preno SOVRAPPOSTA */
#spiaggia .mappaPost .Occupato.Stato_Sovrapposizione,
#spiaggia .mappaPost.Cabina .Occupato.Stato_Sovrapposizione,
#adminMappaForm .mappaPost .Stato_Sovrapposizione,
.simboloLegenda.Stato_Sovrapposizione {
    background-color: #1c1f24ff;
    border: 0.05em solid #d4bd00ff;
}



/*-- Reso DISPONIBILE */
#spiaggia .mappaPost .DataDisponibile,
#adminMappaForm .mappaPost .Stato_DataDisp,
.simboloLegenda.DataDisponibile {
    background-color: transparent;
    border: 1px solid #2218de;
}
    .mainOkBeach .mappaPost .divMorning.DataDisponibile {
        border-color: #2218de transparent transparent #2218de;
    }
    .mainOkBeach .mappaPost .divAfternoon.DataDisponibile {
        border-color: transparent #2218de #2218de transparent;
    }

#spiaggia .mappaPost:has(.DataDisponibile) .nome,
#spiaggia .mappaPost:has(.DataDisponibile) .corpo div  {
    color: black;
}




/*-- CHECK IN */
#spiaggia .mappaPost .Stato_CheckIN,
.simboloLegenda.Stato_CheckIN {
    background-color: #28a745ff !important;
    border-color: #247236ff !important;
}
#adminMappaForm .mappaPost .Stato_CheckIN {
    background-color: #28a745ff;
    border-color: #247236ff;
}
    .mainOkBeach .mappaPost.Ombrellone .divMorning.Stato_CheckIN {
        border-color: #247236ff transparent transparent #247236ff;
    }
    .mainOkBeach .mappaPost.Ombrellone .divAfternoon.Stato_CheckIN {
        border-color: transparent #247236ff #247236ff transparent;
    }



/*-- CHECK OUT */
#spiaggia .mappaPost .Stato_CheckOUT,
.simboloLegenda.Stato_CheckOUT {
    background-color: transparent !important;
    border-style: solid;
    border-width: 0.16em;
    border-color: #247236ff !important;
}
#adminMappaForm .mappaPost .Stato_CheckOUT {
    background-color: transparent;
    border-style: solid;
    border-width: 0.16em;
    border-color: #247236ff;
}
    .mainOkBeach .mappaPost.Ombrellone .divMorning.Stato_CheckOUT {
        border-color: #247236ff transparent transparent #247236ff;
    }
    .mainOkBeach .mappaPost.Ombrellone .divAfternoon.Stato_CheckOUT {
        border-color: transparent #247236ff #247236ff transparent;
    }

#spiaggia .mappaPost:has(.Stato_CheckOUT) .nome,
#spiaggia .mappaPost:has(.Stato_CheckOUT) .corpo div {
    color: black;
}






/*-------------------------------------------------------------------------------- FINE DESIGN MAPPA -------------------------------------------------*/




/*---------------------------------- ALERT ---------------------*/
/*--- Alert Testa */

.alertMidday {
    color: violet;
}
.styleImage .alertMidday,
.simboloLegenda.alertMidday {
    color: violet;
}



/*--- Alert Corpo */
.simboloLegenda.dataCellaCalendario.dataLibera,
.dataCellaCalendario .dataLibera {
    background-color: #247236ff;
}

.simboloLegenda.dataCellaCalendario.dataOccupata,
.dataCellaCalendario .dataOccupata {
    background-color: #dc3545;
}

.simboloLegenda.dataCellaCalendario.dataSovrapposizione,
.dataCellaCalendario .dataSovrapposizione,
.divDataDispDetail .dataSovrapposizione {
    background-color: black;
}

.simboloLegenda.dataCellaCalendario.dataThisPreno,
.dataCellaCalendario .dataThisPreno {
    background-color: #ffc107;
    cursor: pointer;
}

.simboloLegenda.dataCellaCalendario.dataDisponibile,
.dataCellaCalendario .dataDisponibile,
.divDataDispDetail .dataDisponibile {
    background-color: royalblue;
    cursor: pointer;
}



/*-------------------------------------------------------------------------------- MAPPA CONFIG -------------------------------------------------*/

#adminMappaForm .blockConfigStato {
    display: grid;
    grid-template-columns: auto auto;
    grid-row-gap: 15px;
    grid-column-gap: 20px;
    padding-top:15px;
}

#adminMappaForm .divForStato h5{
    font-weight:400;
}


#adminMappaForm .blockStato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;

    border-style: solid;
    border-width: thin;
    border-color: whitesmoke;
    border-radius: 4px;

    padding: 15px 20px;
}

    #adminMappaForm .blockStato .tmpCellaStab {
        width: 100px;
        height: 100px;
    }
        #adminMappaForm .mappaPost #divBack:has(.Stato_Libero) {
            border-style: solid;
            border-width: thin;
            border-color: whitesmoke;
            border-radius: 8px;
        }

    #adminMappaForm .tmpCellaStab #iconBody > div {
        background-image: url(/img/mappa/postazioni/settore_Bianco.png?v=45roE5u6AkVvpKGmAzSRkkPgEP4);
    }

.blockStato .stato-data {
    display: flex;
    flex-direction:column;
    gap: 10px;
}


.listForColor {
    display: inline-flex;
    align-items: center;
}

    .listForColor .colorItem {
        padding: 12px;
        margin-right: 10px;
        border-radius: 4px;
    }

#adminMappaForm .k-input-value-text {
    display: inline-flex;
}

#adminMappaForm .dropdownBox .textSettoreItem {
    display: inline-block;
}