/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
*/
/*ATTENZIONE:
        i due font (Latin e Korean) sono gestitsti nel .css del MainLayout*/
/*@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold.eot');
    src: url('Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('Roboto-Bold.woff') format('woff'), url('Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}*/


/* IDEXX ROSA */
/*--PinkIDEXX: #f4a9a7;*/ /*RGB(244, 169, 167)*/
/*--NewRedIDEXX: #f02d37;*/ /*rgb (240 45 55) QUELLO CORRETTO DOVEVA ESSERE #ea2839; RGB(234 40 57)*/
/*--DarkRedIDEXX: #D62533;*/
/*--RedIDEXXDark: #e84633; DA ELIMINARE Usato solo come rosso del messaggio dell'utilizzo dei Cookie*/


:root {
    --ClarityBlue: #036ae0;
    --LightBlueIDEXX: #00adc5;
    --LightBlueIDEXXDark: #047f8a;
    --PinkIDEXX: #9cdcff; /*RGB(156 220 255) NUOVO AZZURRO CHIARO - Light Clarity Blue*/
    --NewRedIDEXX: #036ae0; /*#0b76f0;*/ /*RGB(11 118 240) NUOVO AZZURRO SCURO - Clarity Blue */
    --DarkRedIDEXX: #035ec7; /*#00337f;*/ /*RGB(0 51 127) NUOVO AZZURRO PIU' SCURO - Dark Clarity Blue*/
    --DarkGrayIDEXX: #31353d; /*RGB(49 53 61)*/
    --MediumGrayIDEXX: #9A9B9C; /*RGB(154 155 156)*/
    --LighGrayIDEXX: #999999; /*#BCBDBC;*/ /*RGB(235 235 235)*/
    --BrightGrayIDEXX: #F2F2F2; /*#F0F0F0;*/ /*RGB(235 235 235)*/

    --LightRenewalGreen: #7FFFE0; /*RGB 127 255 224*/

    --DarkCalmBlue: #19617f; /*RGB(25, 97, 127)*/
    --LightCalmBlue: #99e5ff;
    /*--bs-font-sans-serif: 'Roboto', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
    /*gestione font Latin e Korean*/
    /*CI DEVONO ESSERE IN QUESTO .CSS ALTRIMENTI NON FUNZIONA*/
    --bs-font-sans-serif: 'Sora', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-font-Noto: 'Noto', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-Noto: var(--bs-font-Noto);
    --footer-height: 38px; /* altezza reale del footer */
    --footer-gap: 5px; /* margine extra tra menu e footer */
}

html, body, p {
    /*font-family: var(--bs-body-font-family);*/
    font-size: 14px;
    /*    font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        */
}

.cssBody::-webkit-scrollbar {
    width: 8px !important; /* width of the entire scrollbar */
    height: 10px !important; /* height of the entire scrollbar */ /*NON FUNZIONA*/
}

.cssBody::-webkit-scrollbar-track {
    /*background: var(--PinkIDEXX);*/ /* color of the tracking area */
    background: var(--BrightGrayIDEXX) !important; /* color of the tracking area */
}

.cssBody::-webkit-scrollbar-thumb {
    background-color: var(--DarkGrayIDEXX) !important; /* color of the scroll thumb */
    border-radius: 20px !important; /* roundness of the scroll thumb */
    border: 1px solid var(--BrightGrayIDEXX) !important; /* creates padding around scroll thumb */
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.cssFormLogin {
    background-color: rgba(255,255,255,0.13);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    /*border-radius: 10px;*/
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.1);
    padding-left: 0px;
    padding-right: 0px;
}

.CssBtnLucchettoLogin {
    height: 15px;
    width: 15px;
    background-image: url("images/lock.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 0px;
}

.CssBtnLogIn {
    height: 22px;
    width: 22px;
    background-image: url("images/LogIn.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnSearch {
    height: 22px;
    width: 22px;
    background-image: url("images/Search.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}


.CssBtnClear {
    height: 22px;
    width: 22px;
    background-image: url("images/IconClearWhite2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}



.CssBtnSearchSmall {
    height: 22px;
    width: 22px;
    background-image: url("images/Search.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}


.CssBtnClearSmall {
    height: 22px;
    width: 22px;
    background-image: url("images/IconClearWhite2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnBooking {
    height: 22px;
    width: 22px;
    background-image: url("images/IconBooking.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnPrint {
    height: 22px;
    width: 22px;
    background-image: url("images/IconPrint.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnAddUser {
    height: 22px;
    width: 22px;
    background-image: url("images/iconAddUserNEW.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnAddInfoCourierZone {
    height: 22px;
    width: 22px;
    background-image: url("images/AddUserInfoCourierZone.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.CssBtnModifyUser {
    height: 22px;
    width: 22px;
    background-image: url("images/IconModifyUser.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnCreateCustomer {
    height: 22px;
    width: 22px;
    background-image: url("images/IconCreateCustomer.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnAssign {
    height: 22px;
    width: 22px;
    background-image: url("images/iconAssign.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnModifyCourierRoute {
    height: 22px;
    width: 22px;
    background-image: url("images/IconModifyUser.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.CssBtnIconShowlist {
    height: 18px;
    width: 18px;
    background-image: url("images/iconshowlist.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.CssBtnDeleteText {
    height: 12px;
    width: 12px;
    background-image: url("images/icondeletetext.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnAddNewAreaType {
    height: 16px;
    width: 16px;
    background-image: url("images/iconAddNewTypeAreas.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnAddNewLineHaul {
    height: 22px;
    width: 22px;
    background-image: url("images/iconNewLineHaul.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssIconSearchText {
    height: 14px;
    width: 14px;
    background-image: url("images/iconSearchText2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnCopyInfo {
    height: 18px;
    width: 18px;
    background-image: url("images/clipboard.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.CssBtnSave {
    height: 22px;
    width: 22px;
    background-image: url("images/Save.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}


.CssBtnSaveNoMargin {
    height: 22px;
    width: 22px;
    background-image: url("images/Save.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}


.CssBtnEdit {
    height: 22px;
    width: 22px;
    background-image: url("images/Edit.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnEdit2 {
    height: 22px;
    width: 22px;
    background-image: url("images/Edit.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 2px;
}


.CssBtnUploadFile {
    height: 22px;
    width: 22px;
    background-image: url("images/iconUploadFileCity.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}


.CssBtnDelete {
    height: 22px;
    width: 22px;
    background-image: url("images/IconBookingCancelled.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnDelete {
    height: 22px;
    width: 22px;
    background-image: url("images/IconDeleteTrash.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 2px;
}

.CssBtnSaveNoMarginCourierRouteDetail {
    height: 22px;
    width: 22px;
    background-image: url("images/Save.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 2px;
}

.CssBtnCloseDay {
    height: 22px;
    width: 22px;
    background-image: url("images/CloseDay.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnH24Day {
    height: 22px;
    width: 22px;
    background-image: url("images/IconH24.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnChevronDown {
    height: 15px;
    width: 15px;
    background-image: url("images/chevron-down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 0px;
}

.IconCssEditCutoff {
    height: 18px;
    width: 18px;
    background-image: url("images/iconEditCutoff.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.iconCssSaveCutoff {
    height: 18px;
    width: 18px;
    background-image: url("images/iconSaveCutoff.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.iconCssUndoCutoff {
    height: 18px;
    width: 18px;
    background-image: url("images/iconUndoCutoff.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnChevronUp {
    height: 15px;
    width: 15px;
    background-image: url("images/chevron-up.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 0px;
}


.CssBtnChevronDown2 {
    height: 18px;
    width: 18px;
    background-image: url("images/chevron-down2.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 0px;
}

.CssBtnChevronUp2 {
    height: 18px;
    width: 18px;
    background-image: url("images/chevron-up2.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 0px;
}

.validation-message-container {
    height: 14px;
    font-size: 12px
}

.cssLogoApplicazione {
    height: 20px;
    width: auto;
    animation-name: LogoAnimation;
    animation-duration: 3s;
}

.BtnDefault {
    /*background-color: var(--LightBlueIDEXX);*/
    background-color: var(--NewRedIDEXX);
    border-radius: 4px;
    border: 0px;
    color: white;
    font-size: 14px;
    margin-top: 3px !important;
}

    .BtnDefault:hover {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white !important;
    }

    .BtnDefault:active {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white !important;
    }

    .BtnDefault:focus {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white !important;
    }

    .BtnDefault:disabled {
        background-color: #999393 !important;
        opacity: 1 !important;
    }

.BtnChangeHour {
    background-color: var(--NewRedIDEXX);
    border-radius: 4px;
    border: 0px;
    color: white;
    margin-top: 10px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .BtnChangeHour .tooltiptext {
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnChangeHour .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnChangeHour:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .BtnChangeHour:hover {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnChangeHour:active {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnChangeHour:focus {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnChangeHour:disabled {
        /*background-color: #999393 !important;*/
        background-color: var(--LighGrayIDEXX) !important;
        opacity: 1;
    }

.BtnChangeHour2 {
    background-color: var(--NewRedIDEXX);
    border-radius: 4px;
    border: 0px;
    color: white;
    margin-top: 80px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .BtnChangeHour2 .tooltiptext {
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnChangeHour2 .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnChangeHour2:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .BtnChangeHour2:hover {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnChangeHour2:active {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnChangeHour2:focus {
        background-color: var(--DarkRedIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnChangeHour2:disabled {
        background-color: #999393 !important;
    }

.BtnCloseDay {
    background-color: var(--GrayIDEXX);
    border-radius: 4px;
    border: 0px;
    color: white;
    margin-top: 10px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .BtnCloseDay .tooltiptext2 {
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnCloseDay .tooltiptext2::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnCloseDay:hover .tooltiptext2 {
        visibility: visible;
        opacity: 1;
    }

    .BtnCloseDay:hover {
        background-color: var(--DarkGrayIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnCloseDay:active {
        background-color: var(--DarkGrayIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnCloseDay:focus {
        background-color: var(--DarkGrayIDEXX) !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnCloseDay:disabled {
        background-color: #999393 !important;
    }


/*
.BtnH24Day {
    background-color: #D57FF5;
    border-radius: 4px;
    border: 0px;
    color: white;
    margin-top: 10px;
}

    .BtnH24Day:hover {
        background-color: #814d94 !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnH24Day:active {
        background-color: #814d94 !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnH24Day:focus {
        background-color: #814d94 !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnH24Day:disabled {
        background-color: #999393 !important;
    }
*/


.BtnH24Day {
    background-color: #D57FF5;
    border-radius: 4px;
    border: 0px;
    color: white;
    margin-top: 10px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .BtnH24Day .tooltiptext {
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnH24Day .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnH24Day:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .BtnH24Day:hover {
        background-color: #814d94 !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnH24Day:active {
        background-color: #814d94 !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnH24Day:focus {
        background-color: #814d94 !important;
        border-radius: 4px;
        border: 0px;
        color: white;
    }

    .BtnH24Day:disabled {
        background-color: #999393 !important;
    }

.CssBtnPasswordNascosta {
    height: 15px;
    width: 15px;
    background-image: url("images/eye-off.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 0px;
    padding: 0px;
}

.CssBtnPasswordVisibile {
    height: 15px;
    width: 15px;
    background-image: url("images/eye.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 0px;
    padding: 0px;
}

.BtnNoMargin {
    margin: 0px;
    padding: 0px;
}

.cssIconaRicercaIdentificativoVeterinario {
    height: 20px;
    width: 20px;
    background-image: url("images/Cerca_Nero.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 0px;
}

.CssBtnRicercaVeterinari {
    animation: AnimazioneBottoneRicercaVet 1s infinite alternate;
}

@keyframes AnimazioneBottoneRicercaVet {
    from {
        border: 1px solid rgba(184, 39, 39, 0.1);
    }

    to {
        border: 1px solid rgba(184, 39, 39, 0.5);
    }
}

.cssFormLayoutItemNoMarginPaddingLeft {
    margin-left: 0px;
    padding-left: 0px;
}

.cssFormLayoutItemNoMarginLeft {
    margin-left: 0px;
}

.cssFormLayoutItemNoMarginPadding {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.cssFormLayoutItemNoRight {
    margin-right: 0px;
    padding-right: 0px;
}

.cssFormLayoutItemNoLeft {
    margin-left: 0px;
    padding-left: 0px;
}


.cssBtnForgottenPwd {
    background-color: none;
    text-decoration: underline;
    color: var(--LightBlueIDEXX);
    font-weight: bold;
    font-size: 12px;
}

    .cssBtnForgottenPwd:hover {
        cursor: pointer;
        color: var(--DarkRedIDEXX);
        outline: none !important;
        box-shadow: none;
    }

    .cssBtnForgottenPwd:active {
        color: var(--DarkRedIDEXX);
        outline: none !important;
        box-shadow: none;
    }

    .cssBtnForgottenPwd:focus {
        color: var(--DarkRedIDEXX);
        outline: none !important;
        box-shadow: none;
    }

@keyframes PopUpAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.CssBtnEmail {
    height: 22px;
    width: 22px;
    background-image: url("images/mail.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.cssIconLoading {
    height: 22px;
    width: 22px;
    background-image: url("images/loader.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

.cssIconLoadingMedium {
    height: 20px;
    width: 20px;
    background-image: url("images/loader.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

.cssIconLoadingSmall {
    height: 18px;
    width: 18px;
    background-image: url("images/loader.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

.cssIconSendEmail {
    height: 22px;
    width: 22px;
    background-image: url("images/IconSendEmailGIF.gif");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;*/
}

.cssLoadCallDHLService {
    height: 64px;
    width: 64px;
    /*background-image: url("images/loaderDHLService.png");*/
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    /*background-position: left;*/
    top: 50%;
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
    display: block;
}
/*stile sfondo sidebar (barra menu laterale)*/
.sidebar {
    /*background-color: #374348 !important;*/
    /*background-image: linear-gradient(var(--DarkGrayIDEXX), #14110e) !important;*/
    background-color: var(--BrightGrayIDEXX);
    /*background-image: linear-gradient(#e66465, #9198e5);*/
    border-right: 1px solid #474a4b !important;
    height: 100%;
    contain: layout; /* Isola il layout del sidebar - rimuovo 'style' che non è supportato */
    /*overflow-y:auto;*/
}
    /*stile riquadro in alto con nome applicazione*/
    .sidebar .top-row {
        background-color: var(--DarkGrayIDEXX) !important;
    }
    /*stile TESTO riquadro in alto con nome applicazione*/
    .sidebar .navbar-brand {
        font-size: 1.1rem;
        /*color: #374348;*/
        color: black;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        /*.sidebar .nav-item a {
            color: #d7d7d7 !important;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }*/

        .sidebar .nav-item a {
            /*colore voci di menu*/
            color: var(--DarkGrayIDEXX) !important;
            font-size: 15px;
            margin-left: 5px;
            margin-right: 5px;
            height: auto !important;
            /*font-weight:600;*/
        }

            .sidebar .nav-item a.active {
                /*background-color: transparent !important;*/
                /*background-color: rgba(235,235,235,0.25) !important;*/
                /*background-color: rgba(244, 169, 167,0.25) !important;*/
                color: var(--NewRedIDEXX) !important; /*colore voci di menu all'attivazione*/
                /*border-bottom:2px solid var(--NewRedIDEXX);*/
                border-left: 5px solid var(--PinkIDEXX);
            }

            .sidebar .nav-item a:hover {
                /*background-color: rgba(244, 169, 167,0.25) !important;*/
                /*background-color: transparent !important;*/
                color: var(--NewRedIDEXX) !important; /*colore voci di menu all'hover*/
                /*border-bottom: 2px solid var(--NewRedIDEXX);*/
                border-left: 5px solid var(--PinkIDEXX);
                /*box-shadow: 0 0 40px rgba(8,7,16,0.6);*/
                box-shadow: 0 0 2px rgba(8,7,16,0.3);
            }

/* --- STRUTTURA GENERALE --- */
.main-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- HEADER BASE --- */
.site-top {
    position: sticky;
    top: 0;
    z-index: 1050;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: var(--DarkGrayIDEXX, #2f3a3f);
    padding: 0.5rem 1rem;
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* --- BRAND (LOGO + TITOLO) --- */
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

    .brand .logo {
        height: 43px;
        width: auto;
        border-radius: 6px;
    }

    .brand .title {
        font-size: 1.1rem;
        color:white;
    }

    .brand .subtitle {
        display: block;
        font-size: 1rem;
        color: var(--NewRedIDEXX, #ff6b6b);
    }

/* --- AREA DESTRA (LINGUA + USER) --- */
.right-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    /*min-height: 43px;*/ /* uguale all’altezza del logo */
}

.choose-language {
    color: #000;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.9rem;
}

.user-btn {
    display: flex;
    align-items: center;
}

/*FRED 1*/
.collapse {
    display: none;
}
/*FRED 2*/
/*.nav-scrollable {
    transition: max-height 0.3s ease;
}
*/

/*@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}*/
.numbag_title {
    text-align: right;
}
.numbag-container {
    display: flex;
    justify-content: flex-start; /* desktop default */
}
/* --- MOBILE --- */
@media (max-width: 768px) {
    .site-top {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .brand {
        width: 100%;
    }
    .brandmenu{
        display:none;
    }
        .right-area {
        width: 100%;
        justify-content: flex-end;
    }

    .brand .title {
        font-size: 1rem;
    }

    .brand .logo {
        height: 43px;
    }

    .content-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .right-area {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .choose-language {
        flex: 0 0 auto !important;
    }

    .user-btn {
        flex: 0 0 auto !important;
    }

        /* Se vuoi ridurre lo spazio a destra */
        .user-btn img {
            padding-right: 10px !important;
        }

    .nav-scrollable {
        width: 100%;
    }

    .nav-link.btn {
        text-align: left;
    }
    .numbag_title {
        text-align: center;
    }
    .numbag-container {
        justify-content: center; /* solo su mobile */
    }
    .CssDataGrid900, CssDataGrid900-reducedwidth {
        max-width: 400px !important;
    }

    .CssDataGrid900-reducedwidth {
        width: 400px !important; /* Assumendo che il menu laterale abbia una larghezza di 250px */
    }
    .cssPopUpDownloadAWBandProforma {
        min-width: 350px !important;
        /*animation-name: PopUpAnimation;*/
        animation-duration: 2s;
    }

    .cssPopUpMessage {
        Width: 350px !important;
        /*animation-name: PopUpAnimation;*/
        animation-duration: 2s;
    }
    .pickup-container {
        flex-wrap: wrap; /* va a capo se serve */
    }

    .spin-wrapper {
        max-width: 100%; /* spin edit occupa tutta la riga se spazio stretto */
    }
}
/* Elimina margini verticali indesiderati sotto l'header */
.content-wrapper,
.content-wrapper .content,
.content-wrapper article {
    margin-top: 0.5rem !important;
    padding-top: 0 !important;
}

    /* Elimina il margine del primo elemento del body */
    .content-wrapper > *:first-child,
    .content-wrapper .content > *:first-child {
        margin-top: 0.5rem !important;
    }

/* --- FIX DROPDOWN --- */
.dropdown-menu {
    position: absolute !important;
    z-index: 2000 !important;
}
.site-top {
    overflow: visible !important; /* consente al dropdown di uscire fuori */
}
.content-wrapper {
    position: relative;
    z-index: 1;
}


.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1); /*colore bottone apertura menu quando l'applicazione è su un piccolo schermo
        per cambiare colore ricordardi di aggiungere: !important
    */
}
.nav-scrollable {
    max-height: calc(100vh - 40px); /* lascia spazio al footer */
    overflow-y: auto;
    padding-bottom: 60px; /* spazio extra sotto per evitare sovrapposizioni */
}

/*footer.fixed-bottom {
    z-index: 100;*/ /* resta sopra ma non copre */
    /*background-color: #f8f9fa;*/ /* evita trasparenze */
/*}*/

/* Footer fisso in fondo */
footer.fixed-bottom {
    height: var(--footer-height);
    line-height: var(--footer-height); /* centra il testo verticalmente */
    z-index: 1000;
    background-color: #ebebeb; /* evita trasparenze */
    color: black;
    font-size: 10px;
}
/* Footer fisso in fondo */

.stileDxFormLayoutRitiriDHLWeb {
    border-bottom: 2px solid var(--DarkRedIDEXX);
    margin: 0px;
    padding: 0px;
}

/*.cssDxFormLayotPinkBorderLeft {*/
.cssDxFormLayotPinkBorderRight {
    border-right: 2px solid var(--PinkIDEXX)
}

.cssDxFormLayotPinkBorderBottom {
    border-bottom: 3px solid var(--MediumGrayIDEXX);
    padding-bottom: 10px
}

.circle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    /*border: 3px solid lightgray;*/
    border: 3px solid var(--GrayIDEXX);
}

.circlePromemoria {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    /*border: 3px solid lightgray;*/
    outline: none;
    padding-right: 15px;
    box-shadow: none;
}

    .circlePromemoria:focus {
        box-shadow: none;
    }

    .circlePromemoria:active {
        box-shadow: none;
    }

.cssNavLinkMainLayout {
    color: var(--DarkGrayIDEXX);
}

    .cssNavLinkMainLayout:hover {
        color: var(--DarkGrayIDEXX);
        text-decoration: underline;
    }

    .cssNavLinkMainLayout:focus {
        color: var(--DarkGrayIDEXX);
        text-decoration: underline;
    }

    .cssNavLinkMainLayout:active {
        color: var(--DarkGrayIDEXX);
        text-decoration: underline;
    }


.cssButtonMainLayout {
    background-color: transparent;
    color: var(--DarkGrayIDEXX);
    margin-right: 0px;
    padding-right: 0px;
    border: 0px;
    /*margin-left: 0px;*/
    /*padding-left: 0px;*/
}

    .cssButtonMainLayout:hover {
        background-color: transparent;
        color: var(--DarkGrayIDEXX);
        text-decoration: underline;
        border: 0px;
    }

    .cssButtonMainLayout:focus {
        background-color: transparent;
        color: var(--DarkGrayIDEXX);
        text-decoration: underline;
        border: 0px;
    }

    .cssButtonMainLayout:active {
        background-color: transparent;
        color: var(--DarkGrayIDEXX);
        text-decoration: underline;
        border: 0px;
    }

/*GESTIONE DIMENSIONI GRIGLIA*/
/*.CssDataGrid900 {
    font-size: small;
    font-family: 'Segoe UI';
    max-width: 700px;
}

    .CssDataGrid900 table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid900 .dxbl-grid-selected-row {
        background-color: var(--GrayIDEXX) !important;
        color: white !important;
    }

    .CssDataGrid900 th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: white;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid900 :hover {
        cursor: pointer;
    }

.CssDataGrid1200 {
    font-size: small;
    font-family: 'Segoe UI';
    max-width: 1190px;
}

    .CssDataGrid1200 table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid1200 .dxbl-grid-selected-row {
        background-color: var(--GrayIDEXX) !important;
        color: white !important;
    }

    .CssDataGrid1200 th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: white;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid1200 :hover {
        cursor: pointer;
    }

.CssDataGrid1600 {
    font-size: small;
    font-family: 'Segoe UI';
    max-width: 1590px;
}

    .CssDataGrid1600 table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid1600 .dxbl-grid-selected-row {
        background-color: var(--GrayIDEXX) !important;
        color: white !important;
    }

    .CssDataGrid1600 th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: white;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid1600 :hover {
        cursor: pointer;
    }*/

.div-table {
    display: table;
    width: auto;
    background-color: #eee;
    border: 1px solid #666666;
    border-spacing: 5px; /* cellspacing:poor IE support for  this */
}

.div-table-row {
    display: table-row;
    width: auto;
    clear: both;
}

.div-table-col {
    float: left; /* fix for  buggy browsers */
    display: table-column;
    width: 200px;
    background-color: #ccc;
}

.cssCaptionOpeningHoursCbo {
    text-align: center;
}

.hide {
    display: none;
}

.BtnHelp {
    /*background-color: var(--LighGrayIDEXX);*/
    background-color: white !important;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 0px;
    padding: 0px;
    margin-top: 3px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .BtnHelp .tooltiptextHelp {
        visibility: hidden;
        width: 200px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -100px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnHelp .tooltiptextHelp::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnHelp:hover .tooltiptextHelp {
        visibility: visible;
        opacity: 1;
    }

    .BtnHelp:hover {
        /*background-color: var(--GrayIDEXX);*/
        height: 18px;
        width: 18px;
        border-radius: 50%;
        border: 0px;
        padding: 0px;
    }

/*.BtnHelp:hover + .hide {
            display: block;
            border-radius: 4px;
            border: var(--GrayIDEXX);
            background-color: whitesmoke;
            color: var(--DarkGrayIDEXX);
            padding: 2px;
            margin-left: 5px;
            animation-name: HelpAnimation;
            animation-duration: 2s;
        }*/

/*.BtnShowOpeningHour {
    background-color: var(--BrightGrayIDEXX);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 0px;
    padding: 0px;
    margin-top: 3px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .BtnShowOpeningHour .tooltiptextShowOpeningHour {
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;*/
/*text-align: left;
        border-radius: 6px;
        padding: 5px 0;
        padding-left: 10px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnShowOpeningHour .tooltiptextShowOpeningHour::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnShowOpeningHour:hover .tooltiptextShowOpeningHour {
        visibility: visible;
        opacity: 1;
    }

    .BtnShowOpeningHour:hover {
        background-color: var(--MediumGrayIDEXX);
        height: 18px;
        width: 18px;
        border-radius: 50%;
        border: 0px;
        padding: 0px;
    }*/

@keyframes HelpAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.IconBtnHelp {
    height: 18px;
    width: 18px;
    background-image: url("images/IconHelp.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

DxFormLayoutItemNoMarginPadding {
    margin: 0px;
    padding: 0px;
}

.cssHourClinic {
    background-color: rgba(154, 156, 248, 0.4); /*blu*/
    color: #9A9CF8;
    border-left: 5px solid #9A9CF8;
    font-weight: bold;
    height: 40px;
    width: 100%;
    border-radius: 8px;
    padding-left: 5px;
    margin-top: 15px;
}

.CircleOpeningHour {
    height: 10px;
    width: 10px;
    /*background-color: rgba(154, 156, 248, 0.4);*/
    background-color: #9A9CF8;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.cssHourClinicSpecificDay {
    background-color: rgba(89, 167, 215, 0.4); /*azzurro*/
    color: #59A7D7;
    border-left: 5px solid #59A7D7;
    font-weight: bold;
    height: 40px;
    width: 100%;
    border-radius: 8px;
    padding-left: 5px;
    margin-top: 15px;
}

.CircleHourDay {
    height: 10px;
    width: 10px;
    /*background-color: rgba(89, 167, 215, 0.4);*/
    background-color: #59A7D7;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.cssClinicClose {
    background-color: rgba(114, 111, 115, 0.4); /*grigio*/
    color: #726f73;
    border-left: 5px solid #726f73;
    font-weight: bold;
    height: 40px;
    width: 100%;
    border-radius: 8px;
    padding-left: 5px;
    margin-top: 15px;
}

.CircleClose {
    height: 10px;
    width: 10px;
    /*background-color: rgba(114, 111, 115, 0.4);*/
    background-color: #726f73;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.cssClinicH24 {
    background-color: rgba(213, 127, 245, 0.4); /*violetto*/
    color: #D57FF5;
    border-left: 5px solid #D57FF5;
    font-weight: bold;
    height: 90px;
    width: 100%;
    border-radius: 8px;
    padding-left: 5px;
    margin-top: 15px;
}

.CircleH24 {
    height: 10px;
    width: 10px;
    /*background-color: rgba(213, 127, 245, 0.4);*/
    background-color: #D57FF5;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.cssPopUpDownloadAWBandProforma {
    min-width: 800px;
    /*animation-name: PopUpAnimation;*/
    animation-duration: 2s;
}

.cssPopUpDayHour {
    min-width: 800px;
    /*animation-name: PopUpAnimation;*/
    animation-duration: 2s;
}

@keyframes PopUpAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cssHeaderPopUpHourDay {
    background-color: var(--DarkGrayIDEXX);
    color: white;
}

.cssBackgroundPInkDarkGray {
    height: 150px;
    /*    background: linear-gradient(to bottom, var(--LighGrayIDEXX) 70%, var(--DarkGrayIDEXX) 30%);*/
    background: linear-gradient(to bottom, var(--BrightGrayIDEXX) 70%, var(--DarkGrayIDEXX) 30%);
    padding-top: 10px;
    border-bottom: 2px solid var(--PinkIDEXX);
    border-right: 2px solid var(--PinkIDEXX);
    border-left: 2px solid var(--PinkIDEXX);
}

.cssBackgroundGray {
    height: 150px;
    /*    background: linear-gradient(to bottom, var(--LighGrayIDEXX) 70%, var(--DarkGrayIDEXX) 30%);*/
    background-color: var(--DarkGrayIDEXX);
    padding-top: 10px;
    border-bottom: 2px solid var(--PinkIDEXX);
    border-right: 2px solid var(--PinkIDEXX);
    border-left: 2px solid var(--PinkIDEXX);
}

.cssDxFormLayoutItemClose {
    margin-top: 20px;
}

.cssOpeningHour {
    border: 2px solid var(--PinkIDEXX);
    /*background-color: white;*/
    /*background: linear-gradient(to bottom, white 70%, var(--PinkIDEXX) 30%);*/
    margin-bottom: 30px;
}

.cssColorMainLayout {
    /*background: linear-gradient(to right, var(--PinkIDEXX) 85%, var(--DarkGrayIDEXX) 15%);*/
    background-color: var(--DarkGrayIDEXX) !important;
    height: 60px !important;
}

.cssIconBtnNew {
    height: 15px;
    width: 15px;
    background-image: url("images/New.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}


.cssIconBtnModify {
    height: 15px;
    width: 15px;
    background-image: url("images/Modify.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnNew {
    height: 15px;
    width: 15px;
    background-image: url("images/New.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnBookingHistory {
    height: 28px;
    width: 28px;
    /*background-image: url("images/IconHistoryBooking.png");*/
    background-image: url("images/IconCalendarNEW.png");
    /*background-image: url("images/iconCalendarNewBlack.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnBookingHistory2 {
    height: 22px;
    width: 22px;
    /*background-image: url("images/IconHistoryBooking.png");*/
    background-image: url("images/iconIDEXXCalendarNEW.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnChangePassword {
    height: 22px;
    width: 22px;
    background-image: url("images/IconChangePassword.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnInstruction {
    height: 22px;
    width: 22px;
    /*background-image: url("images/IconBtnInstruction.png");*/
    background-image: url("images/IconInstructionNEW.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnInstructionVideo {
    height: 22px;
    width: 22px;
    /*background-image: url("images/Video.svg");*/
    background-image: url("images/iconVideoInstructionNEW.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnOpenHourLink {
    height: 22px;
    width: 22px;
    /*background-image: url("images/Video.svg");*/
    background-image: url("images/iconOpenHour2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnSupplies {
    height: 22px;
    width: 22px;
    /*background-image: url("images/IconBtnSupplies.png");*/
    background-image: url("images/iconOrderSuppliesNEW.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnVetConnectPlus {
    height: 22px;
    width: 22px;
    /*background-image: url("images/IconBtnVetConnectPlus.png");*/
    background-image: url("images/iconLinkVetConnectPlusNEW.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.cssIconBtnVideoTutorial {
    height: 22px;
    width: 22px;
    background-image: url("images/iconVideo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 5px;
}

.CssDataGrid {
    font-size: small;
    max-width: 1200px;
    height: 130px;
    position: absolute !important;
    z-index: 1;
}

    .CssDataGrid table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid .dxbl-grid-selected-row {
        background-color: var(--LighGrayIDEXX) !important;
        color: black !important;
    }

    .CssDataGrid th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: black;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid :hover {
        cursor: pointer;
    }

.CssDataGrid-reducedwidth {
    font-size: small;
    width: calc(1200px + 250px); /* Assumendo che il menu laterale abbia una larghezza di 250px */
    height: 130px;
    position: absolute !important;
    z-index: 1;
}

    .CssDataGrid-reducedwidth table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid-reducedwidth .dxbl-grid-selected-row {
        background-color: var(--LighGrayIDEXX) !important;
        color: black !important;
    }

    .CssDataGrid-reducedwidth th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: black;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid-reducedwidth :hover {
        cursor: pointer;
    }


.CssDataGrid900, CssDataGrid900-reducedwidth {
    font-size: small;
    max-width: 890px;
    position: absolute !important;
    z-index: 1;
}

    .CssDataGrid900 table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid900 .dxbl-grid-selected-row {
        background-color: var(--LighGrayIDEXX) !important;
        color: black !important;
    }

    .CssDataGrid900 th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: black;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid900 :hover {
        cursor: pointer;
    }

.CssDataGrid900-reducedwidth {
    font-size: small;
    width: calc(890px + 250px); /* Assumendo che il menu laterale abbia una larghezza di 250px */
    position: absolute !important;
    z-index: 1;
}

    .CssDataGrid900-reducedwidth table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid900-reducedwidth .dxbl-grid-selected-row {
        background-color: var(--LighGrayIDEXX) !important;
        color: black !important;
    }

    .CssDataGrid900-reducedwidth th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: black;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid900-reducedwidth :hover {
        cursor: pointer;
    }

.CssDataGrid1200 {
    font-size: small;
    max-width: 1190px;
    position: absolute !important;
    z-index: 1;
}

    .CssDataGrid1200 table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid1200 .dxbl-grid-selected-row {
        background-color: var(--LighGrayIDEXX) !important;
        color: black !important;
    }

    .CssDataGrid1200 th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: black;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid1200 :hover {
        cursor: pointer;
    }

.CssDataGrid1200-reducedwidth {
    font-size: small;
    width: calc(1190px + 250px); /* Assumendo che il menu laterale abbia una larghezza di 250px */
    position: absolute !important;
    z-index: 1;
}

    .CssDataGrid1200-reducedwidth table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid1200-reducedwidth .dxbl-grid-selected-row {
        background-color: var(--LighGrayIDEXX) !important;
        color: black !important;
    }

    .CssDataGrid1200-reducedwidth th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: black;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid1200-reducedwidth :hover {
        cursor: pointer;
    }

.CssDataGrid1600 {
    font-size: small;
    max-width: 1590px;
    position: absolute !important;
    z-index: 1;
}

    .CssDataGrid1600 table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid1600 .dxbl-grid-selected-row {
        background-color: var(--LighGrayIDEXX) !important;
        color: black !important;
    }

    .CssDataGrid1600 th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: black;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid1600 :hover {
        cursor: pointer;
    }

.CssDataGrid1600-reducedwidth {
    font-size: small;
    width: calc(1590px + 250px); /* Assumendo che il menu laterale abbia una larghezza di 250px */
    position: absolute !important;
    z-index: 1;
}

    .CssDataGrid1600-reducedwidth table tbody tr:nth-child(odd) {
        background-color: whitesmoke;
    }

    .CssDataGrid1600-reducedwidth .dxbl-grid-selected-row {
        background-color: var(--LighGrayIDEXX) !important;
        color: black !important;
    }

    .CssDataGrid1600-reducedwidth th {
        padding: 1px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: var(--PinkIDEXX) !important;
        color: black;
        font-weight: bold;
        text-align: center;
    }

    .CssDataGrid1600-reducedwidth :hover {
        cursor: pointer;
    }

.MyPageTitle {
    padding: 1px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: white !important;
    color: var(--DarkGrayIDEXX);
    /*font-weight: bold;*/
    font-size: 32px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    /*    src: url(https://fonts.gstatic.com/s/robotoslab/v24/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
*/
}

.MyPageTitleRed {
    padding: 1px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: var(--NewRedIDEXX);
    /*font-weight: bold;*/
    font-size: 22px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    /*    src: url(https://fonts.gstatic.com/s/robotoslab/v24/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
*/
}

.MyPageTitle {
    padding: 1px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: white !important;
    color: var(--DarkGrayIDEXX);
    /*font-weight: bold;*/
    font-size: 32px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    /*    src: url(https://fonts.gstatic.com/s/robotoslab/v24/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
*/
}

.MyPageSubTitle {
    padding: 1px;
    padding-top: 7px;
    padding-bottom: 7px;
    /*background-color: white !important;*/
    color: var(--DarkGrayIDEXX);
    /*font-weight: bold;*/
    font-size: 18px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    /*    src: url(https://fonts.gstatic.com/s/robotoslab/v24/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
*/
}

.MyText {
    padding: 0px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: white !important;
    color: var(--DarkGrayIDEXX);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
}

.MyTitle {
    padding: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    background-color: white !important;
    color: var(--DarkGrayIDEXX);
    font-weight: 600;
    font-size: 16px;
}

.MyTitleSpecial {
    padding: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    background-color: var(--BrightGrayIDEXX) !important;
    color: var(--NewRedIDEXX);
    font-weight: 600;
    font-size: 14px;
}

.MyTitle3 {
    padding: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    /*background-color: white !important;*/
    color: var(--DarkGrayIDEXX);
    font-weight: 600;
    font-size: 16px;
}

.MyTitlePickuDate {
    padding: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    /*background-color: var(--DarkGrayIDEXX) !important;*/
    background-color: transparent !important;
    color: var(--PinkIDEXX);
    font-size: 18px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

.MyTitlePickuDate2 {
    padding: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    /*background-color: var(--DarkGrayIDEXX) !important;*/
    background-color: transparent !important;
    color: var(--NewRedIDEXX);
    font-size: 18px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

.MyTitleFixedPickupDays {
    padding: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    color: var(--NewRedIDEXX);
    font-size: 16px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

.MyTitle2 {
    padding: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    background-color: white !important;
    color: var(--DarkGrayIDEXX);
    font-weight: 700;
    font-size: 14px;
}

.BtnLinkUtili {
    /*font-size: medium;*/
    color: var(--NewRedIDEXX);
    /*font-weight: bold;*/
    font-family: var(--bs-font-sans-serif);
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
}

    .BtnLinkUtili:hover {
        color: var(--DarkRedIDEXX);
        cursor: pointer;
    }

.BtnLinkUtili12 {
    /*font-size: medium;*/
    color: var(--NewRedIDEXX);
    /*font-weight: bold;*/
    font-family: var(--bs-font-sans-serif);
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
}

    .BtnLinkUtili12:hover {
        color: var(--DarkRedIDEXX);
    }

.BtnLinkLockbox {
    /*font-size: medium;*/
    color: #31353d;
    /*font-weight: bold;*/
    font-family: var(--bs-font-sans-serif);
    font-size: 20px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
}

    .BtnLinkLockbox:hover {
        color: #31353d;
    }


.BtnLinkChangeOpeningHour {
    /*font-size: medium;*/
    color: var(--NewRedIDEXX);
    /*font-weight: bold;*/
    font-family: var(--bs-font-sans-serif);
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
    margin-top: 10px;
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}


    .BtnLinkChangeOpeningHour .tooltiptextShowOpeningHour {
        font-size: 12px;
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnLinkChangeOpeningHour .tooltiptextShowOpeningHour::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnLinkChangeOpeningHour:hover .tooltiptextShowOpeningHour {
        visibility: visible;
        opacity: 1;
    }

    .BtnLinkChangeOpeningHour:hover {
        color: var(--DarkRedIDEXX);
    }

.BtnLaboratoryDestination {
    margin: 0px;
    padding: 0px;
    /*font-size: medium;*/
    /*color: var(--NewRedIDEXX);*/
    /*font-weight: bold;*/
    /* font-family: var(--bs-font-sans-serif);
    font-size: 16px;
    margin: 0px;
    padding: 0px;*/
    /*text-decoration: underline;*/
    /*margin-top: 10px;*/
    position: relative;
    display: inline-block;
    background-color: transparent !important;
    /*border-bottom: 1px dotted black;*/
}


    .BtnLaboratoryDestination .tooltiptextShowInfoLaboratoryDestination {
        font-size: 12px;
        visibility: hidden;
        /*width: 250px;*/
        width: 180px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 75%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnLaboratoryDestination .tooltiptextShowInfoLaboratoryDestination::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnLaboratoryDestination:hover .tooltiptextShowInfoLaboratoryDestination {
        visibility: visible;
        opacity: 1;
    }

    .BtnLaboratoryDestination:hover {
        color: var(--DarkRedIDEXX);
    }

.cssLogoCorriere {
    border: 2px solid var(--MediumGrayIDEXX);
    padding: 5px;
    margin-bottom: 0px;
}

.cssLaoutItemValidatePassword {
    margin-top: 0px;
    padding-top: 0px;
}

.cssDxfomrlayoutBookingHistory {
    margin-top: 10px;
    margin-bottom: 0px;
}
/*INIZIO :  animazione di attesa (spinner) con messaggio sotto l'immagine */
.spinnerCallingDHLServices {
    border: 16px solid var(--LighGrayIDEXX);
    border-top: 16px solid var(--PinkIDEXX);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 35%;
    left: 50%;
    position: fixed;
    /*position: absolute;*/
}

.spinnerPrintAWBandProforma {
    border: 8px solid var(--LighGrayIDEXX);
    border-top: 8px solid var(--PinkIDEXX);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 700ms linear infinite;
    top: 50%;
    left: 50%;
    position: fixed;
    /*position: absolute;*/
}

.spinner {
    border: 16px solid var(--LighGrayIDEXX);
    border-top: 16px solid var(--PinkIDEXX);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: fixed;
    /*position: absolute;*/
}

.spinnerUploadFile {
    border: 16px solid var(--LighGrayIDEXX);
    border-top: 16px solid var(--PinkIDEXX);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 700ms linear infinite;
    top: 42%;
    left: 48%;
    position: fixed;
    /*position: absolute;*/
}

.textSpinnerUploadFile {
    font-weight: bold;
    top: 52%;
    left: 46%;
    position: fixed;
    animation: blinker 3s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes spin2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.textSpinnerCallDHLServices {
    font-weight: bold;
    top: 55%;
    left: 49%;
    position: fixed;
    animation: blinker 3s linear infinite;
}

.textSpinnerPrint {
    font-weight: bold;
    top: 55%;
    left: 47%;
    /*left: 49%;*/
    position: fixed;
    animation: blinker 3s linear infinite;
}

.textSpinner {
    font-weight: bold;
    top: 50%;
    left: 52%;
    position: fixed;
    animation: blinker 3s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
/*FINE:  animazione di attesa (spinner) con messaggio sotto l'immagine */
.cssResultMessage {
    font-weight: bold;
    color: var(--DarkGrayIDEXX);
    font-size: 16px;
    margin-top: 15px;
}

.cssPopUpMessage {
    Width: 500px;
    /*animation-name: PopUpAnimation;*/
    animation-duration: 2s;
}

.cssHeaderConfirmBook {
    background-color: var(--PinkIDEXX) !important;
    color: var(--DarkGrayIDEXX);
    font-weight: bold;
}

.cssBackgroundFilterResearch {
    margin-top: 5px;
    background: var(--BrightGrayIDEXX); /*rgb(238, 238, 238);*/
    color: black;
    padding: 5px;
    -moz-box-shadow: 0 0 25px #b8b8b8;
    -webkit-box-shadow: 0 0 25px #b8b8b8;
    box-shadow: 0 0 5px #b8b8b8;
}

.cssBackgroundFilterEdit {
    /*background-color: var(--MediumGrayIDEXX);*/
    background-color: var(--DarkCalmBlue);
    padding: 5px;
    -moz-box-shadow: 0 0 25px #b8b8b8;
    -webkit-box-shadow: 0 0 25px #b8b8b8;
    box-shadow: 0 0 5px #b8b8b8;
}

.cssTbsBookingHistory {
    margin-left: 10px;
}

.CssCaptionWhite {
    /*color: white !important;*/
    color: black !important;
}

.CssCaptionDarkGray {
    color: var(--DarkGrayIDEXX) !important;
}

.cssTxtAWBNumber {
    /*width: 20%;*/
}

.cssTxtBoxEmptyError {
    /*width: 20%;*/
    animation: AnimazioneBorderRedButton 1s infinite alternate;
}

.cssTxtBoxEmptyErrorBooking {
    animation: AnimazioneBorderRedButton 1s infinite alternate;
    /*background-color: var(--LightRenewalGreen) !important;*/
}


.cssDropdown {
    animation: AnimazioneBorderRedButton 1s infinite alternate;
    background-color: var(--PinkIDEXX) !important;
}

@keyframes AnimazioneBorderRedButton {
    from {
        /*border: 1px solid rgba(184, 39, 39, 0.1);*/
        -moz-box-shadow: 0 0 0px red;
        -webkit-box-shadow: 0 0 0 red;
        box-shadow: 0 0 0 red;
    }

    to {
        /*border: 1px solid rgba(184, 39, 39, 0.5);*/
        -moz-box-shadow: 0 0 25px red;
        -webkit-box-shadow: 0 0 25px red;
        box-shadow: 0 0 5px red;
    }
}

.cssDevelopedBy {
    font-size: 11px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.cssDxFormLayoutItemDevelopedBy {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.cssInputClass {
    animation: AnimazioneBorderRedButton 1s infinite alternate;
}

.DxFormLayoutItemDateFromTo {
    margin-top: 0px;
    padding-top: 0px;
}

.cssPopUpCustomer {
    min-width: 850px;
    /* animation-name: PopUpAnimation;
    animation-duration: 2s;*/
}

.cssFormLayotItemSave {
    border-top: 1px solid whitesmoke;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

.csswarningEmail {
    color: var(--NewRedIDEXX);
    font-size: 12px;
    vertical-align: bottom;
}

.dot {
    height: 15px;
    width: 15px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.dotAlert {
    height: 10px;
    width: 10px;
    background-color: var(--NewRedIDEXX);
    border-radius: 50%;
    /*display: inline-block;*/
    position: absolute;
    margin-top: -10px;
    margin-left: 14px;
    animation: AnimazionePallinoRossoNotifica 1s infinite alternate;
}

@keyframes AnimazionePallinoRossoNotifica {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dotProfile {
    height: 45px;
    width: 45px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    padding: 6px;
    margin-top: 0px;
    margin-bottom: 5px;
}

.BtnWhite {
    border: 0px;
    background-color: white;
}

.dropdown-menu {
    width: auto !important;
    height: auto !important;
}

.cssComboLanguage {
    /*color: var(--NewRedIDEXX);*/
    color: black;
    /*width: 190px;*/
    width: 150px;
    /* -moz-box-shadow: 0 0 25px var(--NewRedIDEXX);
    -webkit-box-shadow: 0 0 25px var(--NewRedIDEXX);
    box-shadow: 0 0 5px var(--NewRedIDEXX);*/
    /*background-color: transparent !important;*/
    background-color: white !important;
}

    .cssComboLanguage:focus {
        /*color: var(--DarkGrayIDEXX);*/
        color: var(--NewRedIDEXX) !important;
    }
    /*.cssComboLanguage::after {
        content: url("images/IconOpenComboLanguage.png");
        height:10px;
        width:10px;
    }*/
    .cssComboLanguage option {
        background-color: var(--BrightGrayIDEXX);
        color: var(--DarkGrayIDEXX);
        height: 35px;
    }

.BoxHome {
    background: rgb(238, 238, 238);
    padding: 1px;
    /*-moz-box-shadow: 0 0 25px #b8b8b8;
    -webkit-box-shadow: 0 0 25px #b8b8b8;
    box-shadow: 0 0 5px #b8b8b8;*/
}

@keyframes spinnerFunc {
    to {
        transform: rotate(360deg);
    }
}

.spinnerFunc:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 35px;
    height: 35px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border-top: 2px solid #eb6e07;
    border-right: 2px solid transparent;
    animation: spinnerFunc .6s linear infinite;
}


.ScroolStyle::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ScroolStyle::-webkit-scrollbar-track {
    background-color: whitesmoke;
    border-radius: 16px;
}

.ScroolStyle::-webkit-scrollbar-thumb {
    background-color: gray;
    border-radius: 16px;
    height: 15px;
}

.MyCheckBox {
    font-size: 12px;
    font-weight: bold;
}

.MyCheckBoxPrincipalPage {
    font-size: 14px;
    font-weight: bold;
}

.MyCheckBoxNoBold {
    font-size: 12px;
    /*font-weight: bold;*/
}

.listbox-height {
    height: 170px !important;
}

    .listbox-height::-webkit-scrollbar {
        width: 12px; /* width of the entire scrollbar */
        height: 10px; /* height of the entire scrollbar */ /*NON FUNZIONA*/
    }

    .listbox-height::-webkit-scrollbar-track {
        /*background: var(--PinkIDEXX);*/ /* color of the tracking area */
        background: var(--BrightGrayIDEXX); /* color of the tracking area */
    }

    .listbox-height::-webkit-scrollbar-thumb {
        background-color: var(--DarkGrayIDEXX); /* color of the scroll thumb */
        border-radius: 20px; /* roundness of the scroll thumb */
        border: 3px solid var(--BrightGrayIDEXX); /* creates padding around scroll thumb */
    }

.cssHeaderDxFormLayoutGroup {
    background-color: var(--PinkIDEXX);
    color: var(--DarkGrayIDEXX);
    font-weight: bold;
}

/*.cssHeaderDxFormLayoutGroupHide {
    height:0px;
}*/

.cssReminder {
    font-weight: bold;
    color: var(--NewRedIDEXX);
}

.cssImageInsertSuccessfull {
    width: 150px;
    height: 150px;
    /*animation-name: animationImageSuccessfull;
    animation-duration: 4s;*/
}

@keyframes animationImageSuccessfull {
    from {
        width: 10px;
        height: 10px;
    }

    to {
        width: 180px;
        height: 180px;
    }
}

/*.ScroolStyleNavMenu::-webkit-scrollbar {
    width: 2px;
    height: 20px;
}

.ScroolStyleNavMenu::-webkit-scrollbar-track {
    background-color: whitesmoke;
    background-color: black;
    border-radius: 16px;
}

.ScroolStyleNavMenu::-webkit-scrollbar-thumb {
    background-color: gray;
    background-color: var(--DarkGrayIDEXX);
    border-radius: 16px;
    height: 15px;
}*/

/* Contenitore scrollabile del menu */
.ScroolStyleNavMenu {
    max-height: calc(100vh - var(--footer-height) - var(--footer-gap));
    overflow-y: auto;
    padding-bottom: calc(var(--footer-height) + var(--footer-gap));
    box-sizing: border-box;
}

    /* Personalizzazione della scrollbar */
    .ScroolStyleNavMenu::-webkit-scrollbar {
        width: 2px;
        height: 20px;
    }

    .ScroolStyleNavMenu::-webkit-scrollbar-track {
        background-color: black;
        border-radius: 16px;
    }

    .ScroolStyleNavMenu::-webkit-scrollbar-thumb {
        background-color: var(--DarkGrayIDEXX);
        border-radius: 16px;
        height: 15px;
    }
/* Contenitore scrollabile del menu */

.cssIconCloseNavMenu {
    height: 22px;
    width: 22px;
    /*background-image: url("images/skip-back.svg");*/
    background-image: url("images/iconCloseMenuNEW.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.cssIconOpenNavMenu {
    height: 22px;
    width: 22px;
    background-image: url("images/menu.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.BtnCloseNavMenu {
    background-color: transparent;
    border: 0px;
}

    .BtnCloseNavMenu:hover {
        background-color: transparent;
        border: 0px;
        cursor: pointer;
    }

    .BtnCloseNavMenu:active {
        background-color: transparent;
        border: 0px;
    }

    .BtnCloseNavMenu:focus {
        background-color: transparent;
        border: 0px;
    }

.cssCaptionCenter {
    width: 100%;
    text-align: center;
}

.cssBtnLink {
    background-color: transparent;
    border: 0px;
    text-align: start;
    padding: 0px;
}

    .cssBtnLink:hover {
        background-color: transparent;
        border: 0px;
        cursor: pointer;
    }

    .cssBtnLink:focus {
        background-color: transparent;
        border: 0px;
    }

    .cssBtnLink:active {
        background-color: transparent;
        border: 0px;
    }


.cssBtnCopyEmail {
    background-color: transparent;
    border: 0px;
    text-align: start;
    margin: 0px;
    padding: 0px;
}

    .cssBtnCopyEmail:hover {
        background-color: transparent;
        border: 0px;
        cursor: pointer;
        margin: 0px;
        padding: 0px;
    }

    .cssBtnCopyEmail:focus {
        background-color: transparent;
        border: 0px;
        margin: 0px;
        padding: 0px;
    }

    .cssBtnCopyEmail:active {
        background-color: transparent;
        border: 0px;
        margin: 0px;
        padding: 0px;
    }

.cssDxFormLayoutItemButton {
    align-content: start;
    text-align: start;
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

.cssDxFormLayoutItemTxtEmail {
    margin-left: 0px;
    padding-left: 0px;
}

.cssIconEmailBtn {
    height: 32px;
    width: 32px;
    /*background-image: url("images/IconEmail.png");*/
    background-image: url("images/IconCopyEmail.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 2px;
}

.cssInfoLegend {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin-left: 10px;
}

    .cssInfoLegend:hover {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0px;
    }

    .cssInfoLegend:focus {
        background-color: transparent;
        border: none;
        padding: 0px;
    }

    .cssInfoLegend:active {
        background-color: transparent;
        border: none;
        padding: 0px;
    }

.CssBtnInfoLegend {
    height: 22px;
    width: 22px;
    background-image: url("images/help-circle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.cssDxFormLayoutItemBookingResul {
    border-right: 1px solid var(--LighGrayIDEXX);
    border-left: 1px solid var(--LighGrayIDEXX);
    line-height: 10px;
    padding-top: 0px;
}

.cssPageStatistics {
    background-color: var(--LighGrayIDEXX);
    /*opacity:0.8;*/
}

.cssPageStatistics2 {
    border-left: 10px solid var(--DarkGrayIDEXX);
    background-color: var(--LighGrayIDEXX);
    /*opacity: 0.8;*/
}

.cssPageStatisticsFilter {
    background-color: var(--PinkIDEXX);
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    height: 50px
}

.cssGroupGraph1 {
    padding-top: 8px;
    padding-left: 8px;
    padding-bottom: 8px;
    padding-right: 4px;
    background-color: var(--BrightGrayIDEXX)
}

.cssGroupGraph2 {
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 8px;
    padding-right: 8px;
    /*background-color: var(--BrightGrayIDEXX);*/
    background-color: white;
    border: 1px solid whitesmoke;
}

.CaptionHeaderCenter {
    text-align: center;
}

.cssdxFormLayoutSpecialPickup {
    border-left: 2px solid var(--BrightGrayIDEXX);
}

.CaptionCenter {
    text-align: center;
}

.DxGrouCss {
    margin-top: 0px;
    padding-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.CssBtnDeletePhotoLockbox {
    height: 22px;
    width: 22px;
    /*background-image: url("images/IconDeletePhoto.png");*/
    background-image: url("images/iconDeletePhotoNEW.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 8px;
}

.CssBtnDeletePhoto {
    background-color: transparent;
    /*border-radius: 4px;*/
    border: 0px;
    color: var(--NewRedIDEXX);
    font-weight: bold;
    font-size: 14px;
}

    .CssBtnDeletePhoto:hover {
        background-color: transparent !important;
        border: 0px;
        color: var(--NewRedIDEXX);
        cursor: pointer;
        text-decoration: underline;
    }

    .CssBtnDeletePhoto:active {
        background-color: transparent;
        border-radius: 4px;
        border: 1px solid var(--NewRedIDEXX);
    }

    .CssBtnDeletePhoto:focus {
        background-color: transparent;
        color: var(--NewRedIDEXX);
        /*border-radius: 4px;*/
        border: 1px solid var(--NewRedIDEXX);
        color: var(--NewRedIDEXX);
    }

    .CssBtnDeletePhoto:disabled {
        background-color: #999393 !important;
    }


.image-container {
    position: relative;
    display: inline-block; /* oppure block */
}

.cssImgLockBox {
    /*box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);*/
    width: 100px;
    height: 80px;
    padding: 0px;
    margin-right: 5px;
    display: block;
    border-radius: 8px;
}

.BtnImgLockBox {
    /* width: 100px;*/
    /*height: 20px;*/
    border-radius: 8px;
    /*font-size: medium;*/
    color: var(--NewRedIDEXX);
    /*font-weight: bold;*/

    font-family: var(--bs-font-sans-serif);
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
    margin-top: 10px;
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
    font-size: 12px;
}

    .BtnImgLockBox:hover {
        color: var(--DarkRedIDEXX);
    }

/*.CssBtnOpenImage {
    height: 24px;
    width: 24px;
    background-image: url("images/IconOpenImage.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;*/
/*margin-right: 8px;*/
/*}*/

.CssBtnDeletePhoto2 {
    position: absolute;
    bottom: 6px;
    right: 10px;
    border-radius: 50%;
    /*border:2px solid green;*/
    background-color: red;
    /*border-radius: 4px;*/
    /*border: 0px;*/
    color: var(--NewRedIDEXX);
    font-weight: bold;
    font-size: 14px;
    width: 20px;
    height: 20px;
    padding: 0px;
}

    .CssBtnDeletePhoto2:hover {
        background-color: red !important;
        border: 0px;
        color: var(--NewRedIDEXX);
        cursor: pointer;
        text-decoration: underline;
    }

    .CssBtnDeletePhoto2:active {
        background-color: red !important;
        border-radius: 4px;
        border: 1px solid var(--NewRedIDEXX);
    }

    .CssBtnDeletePhoto2:focus {
        background-color: red !important;
        color: var(--NewRedIDEXX);
        /*border-radius: 4px;*/
        border: 1px solid var(--NewRedIDEXX);
        color: var(--NewRedIDEXX);
    }

    .CssBtnDeletePhoto2:disabled {
        background-color: #999393 !important;
    }

.CssBtnDeletePhotoLockbox2 {
    height: 13px;
    width: 13px;
    /*background-image: url("images/iconDeletePhotoNEW.png");*/
    /*background-image: url("images/iconDeletePhotoWhite.png");*/
    /*background-image: url("images/iconDeletePhotoWhite2.png");*/
    background-image: url("images/IconTrashDeletePhoto.png");
    /*background-image: url("images/iconDeletePhotoWhite3.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnDeletePhotoLockbox3 {
    height: 15px;
    width: 15px;
    /*background-image: url("images/iconDeletePhotoNEW.png");*/
    /*background-image: url("images/iconDeletePhotoWhite.png");*/
    /*background-image: url("images/iconDeletePhotoWhite2.png");*/
    /*background-image: url("images/IconTrashDeletePhoto.png");*/
    background-image: url("images/IconTrashDeletePhoto2.png");
    /*background-image: url("images/iconDeletePhotoWhite3.png");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnDeletePhoto3 {
    height: 40px;
    font-size: 12px;
    color: red;
}

    .CssBtnDeletePhoto3:hover {
        color: red !important;
        cursor: pointer;
    }

.cssTagBox {
    border-top: 1px solid var(--LighGrayIDEXX);
    border-left: 1px solid var(--LighGrayIDEXX);
    border-right: 1px solid var(--LighGrayIDEXX);
    border-radius: 6px;
    /*background-color: var(--BrightGrayIDEXX);*/
}

.cssTagBoxError {
    border-top: 1px solid var(--LighGrayIDEXX);
    border-left: 1px solid var(--LighGrayIDEXX);
    border-right: 1px solid var(--LighGrayIDEXX);
    border-radius: 6px;
    animation: AnimazioneBorderRedButton 1s infinite alternate;
    /*background-color: var(--BrightGrayIDEXX);*/
}

.IconCssChevronDown {
    height: 22px;
    width: 22px;
    background-image: url("images/chevron-down_Dark.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.IconCssChevronUp {
    height: 22px;
    width: 22px;
    background-image: url("images/chevron-up_Dark.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.cssDragAndDropAreaPC {
    border: 1px solid var(--PinkIDEXX);
    margin: 0px;
    width: 100%;
    /* SFONDO A SCACCHI
        background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 25px 25px;*/ /* Must be a square */
    /*background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px;*/ /* Must be half of one side of the square */
}

.cssDxUpload {
    width: 100%;
}

.btn-primary-outline {
    background-color: transparent;
    border-color: #ccc;
}

.cssdropdownitemLinkLockbox:active {
    background-color: var(--BrightGrayIDEXX);
}

.cssCloseNotification {
    background-color: var(--NewRedIDEXX);
    border: 1px solid var(--NewRedIDEXX);
    border-radius: 18px;
    color: white;
    width: 70px;
}

    .cssCloseNotification:focus {
        cursor: pointer;
    }

    .cssCloseNotification:active {
        background-color: white;
        border: 1px solid var(--NewRedIDEXX);
        border-radius: 18px;
        color: var(--NewRedIDEXX);
    }

.cssButtonUploadFile {
    border: 1px solid green;
    color: black;
    background-color: white;
}

    .cssButtonUploadFile:hover {
        cursor: pointer !important;
        border: 1px solid green !important;
        color: black !important;
        background-color: white !important;
        -moz-box-shadow: 0 0 25px #b8b8b8 !important;
        -webkit-box-shadow: 0 0 25px #b8b8b8 !important;
        box-shadow: 0 0 5px #b8b8b8 !important;
    }

    .cssButtonUploadFile:active {
        border: 1px solid green !important;
        color: black !important;
        background-color: white !important;
        -moz-box-shadow: 0 0 25px #b8b8b8 !important;
        -webkit-box-shadow: 0 0 25px #b8b8b8 !important;
        box-shadow: 0 0 5px #b8b8b8 !important;
    }

    .cssButtonUploadFile:focus {
        border: 1px solid green !important;
        color: black !important;
        background-color: white !important;
        -moz-box-shadow: 0 0 25px #b8b8b8 !important;
        -webkit-box-shadow: 0 0 25px #b8b8b8 !important;
        box-shadow: 0 0 5px #b8b8b8 !important;
    }

    .cssButtonUploadFile:disabled {
        border: 1px solid gray !important;
        color: black !important;
        background-color: lightgray !important;
        -moz-box-shadow: 0 0 25px #b8b8b8 !important;
        -webkit-box-shadow: 0 0 25px #b8b8b8 !important;
        box-shadow: 0 0 5px #b8b8b8 !important;
    }

.cssDeleteText {
    background-color: lightgray;
    border-radius: 50%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 1px;
    padding-left: 1px;
    margin-top: 4px;
}

    .cssDeleteText:focus {
        background-color: lightgray !important;
        border-radius: 50% !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-right: 1px !important;
        padding-left: 1px !important;
        margin-top: 4px !important;
        -moz-box-shadow: 0 0 25px #b8b8b8 !important;
        -webkit-box-shadow: 0 0 25px #b8b8b8 !important;
        box-shadow: 0 0 5px #b8b8b8 !important;
    }

    .cssDeleteText:hover {
        background-color: lightgray !important;
        border-radius: 50% !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-right: 1px !important;
        padding-left: 1px !important;
        margin-top: 4px !important;
        -moz-box-shadow: 0 0 25px #b8b8b8 !important;
        -webkit-box-shadow: 0 0 25px #b8b8b8 !important;
        box-shadow: 0 0 5px #b8b8b8 !important;
    }

    .cssDeleteText:active {
        background-color: lightgray !important;
        border-radius: 50% !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-right: 1px !important;
        padding-left: 1px !important;
        margin-top: 4px !important;
        -moz-box-shadow: 0 0 25px #b8b8b8 !important;
        -webkit-box-shadow: 0 0 25px #b8b8b8 !important;
        box-shadow: 0 0 5px #b8b8b8 !important;
    }

.cssbtnTextbox {
    background-color: white;
}

    .cssbtnTextbox:disabled {
        background-color: white;
        border: 0px;
    }

.TabIdexxStyle {
    --border-radius: .5rem;
    color: var(--DarkGrayIDEXX) !important;
    border-top-color: var(--PinkIDEXX) !important;
    border-top-width: .25rem !important;
    border-top-right-radius: var(--border-radius) !important;
    border-top-left-radius: var(--border-radius) !important;
}

.TabMasterCheckInvoice {
    --border-radius: .5rem;
    margin-right: 10px;
    /*border: 1px solid whitesmoke !important;*/
    background-color: #e3e2de !important;
}

.TabMasterCheckInvoiceClicked {
    --border-radius: .5rem;
    margin-right: 10px;
    border: 1px solid lightgray !important;
    /*background-color: rgba(66, 135, 245, 0.5) !important;*/
    background-color: var(--NewRedIDEXX) !important;
    color: white !important;
}

.IconTabAgreementClicked {
    height: 24px;
    width: 24px;
    background-image: url("images/IconAgreementClicked.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 4px;
}

.IconTabAgreement {
    height: 24px;
    width: 24px;
    background-image: url("images/IconAgreement.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 4px;
}

.IconTabAdditionalCostClicked {
    height: 24px;
    width: 24px;
    background-image: url("images/iconAdditionalCostClicked.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 4px;
}

.IconTabAdditionalCost {
    height: 24px;
    width: 24px;
    background-image: url("images/iconAdditionalCost.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-right: 4px;
}

.TabIdexxStyle2 {
    background-color: var(--DarkCalmBlue) !important;
    --border-radius: .5rem;
    color: white !important;
    border-top-color: white !important;
    border-top-width: .25rem !important;
    border-top-right-radius: var(--border-radius) !important;
    border-top-left-radius: var(--border-radius) !important;
}

.cssDayServedOff {
    background-color: lightgray;
    border-radius: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    color: black;
    font-weight: 600;
}

.cssDayServedOn {
    background-color: white;
    border: 2px solid #29b51d !important;
    border-radius: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    color: black;
    font-weight: 600;
}

.cssTextTime {
    /*background-color: lightgray;*/
    padding: 3px;
}

.cssBtnChangeList {
    /*color:mediumblue;*/
    color: forestgreen;
    font-weight: 600;
    background-color: transparent;
    border: 0px;
}

    .cssBtnChangeList:hover {
        cursor: pointer !important;
        color: forestgreen !important;
        background-color: transparent !important;
        border: 0px !important;
        font-weight: 600 !important;
    }

    .cssBtnChangeList:focus {
        background-color: transparent !important;
        border: 0px !important;
        color: forestgreen !important;
        font-weight: 600 !important;
    }

    .cssBtnChangeList:active {
        background-color: transparent !important;
        border: 0px !important;
        color: forestgreen !important;
        font-weight: 600 !important;
    }

.cssDxFormLayoutItemChangeList {
    padding-top: 0px;
    margin-bottom: 0px;
}

.cssMarginTopText1 {
    margin-top: 0px;
}

.cssMarginTopText2 {
    /*   margin-top: 20px;
    margin-bottom: 0px;*/
    height: 30px;
}

.cssMarginTopText {
    margin-top: 10px;
}

.BtnTrackingBooking {
    margin-top: 10px !important;
    color: var(--DarkGrayIDEXX);
    font-family: var(--bs-font-sans-serif);
    font-size: 14px;
    padding: 0px;
    border: 2px solid var(--DarkGrayIDEXX);
    border-radius: 24px;
    padding-left: 5px;
    padding-right: 5px;
}

    .BtnTrackingBooking:hover {
        margin-top: 10px !important;
        color: var(--DarkGrayIDEXX) !important;
        font-size: 14px !important;
        padding: 0px !important;
        border: 2px solid var(--DarkGrayIDEXX) !important;
        border-radius: 24px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

.cssBtnWhite {
    background-color: transparent;
    border: 2px solid white !important;
    border-radius: 4px;
    color: white;
}

    .cssBtnWhite:hover {
        background-color: transparent !important;
        border: 2px solid white !important;
        border-radius: 4px !important;
        color: white !important;
        -webkit-box-shadow: 1px 1px 5px 0px whitesmoke;
        -moz-box-shadow: 1px 1px 5px 0px whitesmoke;
        box-shadow: 1px 1px 5px 0px whitesmoke;
    }

    .cssBtnWhite:active {
        background-color: transparent !important;
        border: 2px solid white !important;
        border-radius: 4px !important;
        color: white !important;
        -webkit-box-shadow: 1px 1px 5px 0px whitesmoke;
        -moz-box-shadow: 1px 1px 5px 0px whitesmoke;
        box-shadow: 1px 1px 5px 0px whitesmoke;
    }

    .cssBtnWhite:focus {
        background-color: transparent !important;
        border: 2px solid white !important;
        border-radius: 4px !important;
        color: white !important;
        -webkit-box-shadow: 1px 1px 5px 0px whitesmoke;
        -moz-box-shadow: 1px 1px 5px 0px whitesmoke;
        box-shadow: 1px 1px 5px 0px whitesmoke;
    }

    .cssBtnWhite:disabled {
        /*background-color: #999393 !important;*/
        background-color: var(--DarkCalmBlue) !important;
        border: 2px solid grey !important;
        opacity: 1 !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

.csschkoverwrite {
    background-color: red;
    width: 50%;
}

.csswidthDxformaLayotItem150 {
    width: 150px;
}

.cssHeaderPopUpCustomers {
    background-color: var(--PinkIDEXX) !important;
}

.CssIconAddNewItemSystemTable {
    height: 18px;
    width: 18px;
    background-image: url("images/IconAddNewSystemTable.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnAddExtraCost {
    height: 20px;
    width: 20px;
    /*background-image: url("images/IconAddNewExtraCostType.png");*/
    background-image: url("images/IconSaveExtraCostType.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnEditExtraCost {
    height: 20px;
    width: 20px;
    background-image: url("images/IconEditExtraCostType.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnClearListExtraCost {
    height: 20px;
    width: 20px;
    background-image: url("images/IconClearExtraCostType.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnSelectAll {
    height: 22px;
    width: 22px;
    background-image: url("images/IconSelectAll.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 8px;*/
}

.CssBtnClosePopup {
    height: 20px;
    width: 20px;
    background-image: url("images/IconClosePopUp.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}



.CssBtnDeleteExtraCostType {
    height: 22px;
    width: 22px;
    background-image: url("images/IconDeleteExtraCost.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    /*margin-right: 2px;*/
}

.removemarginpaddingleft {
    margin-left: 0px;
    padding-left: 0px;
}

.removemarginpaddingright {
    margin-right: 0px;
    padding-right: 0px;
}

.cssGroup {
    z-index: 1;
}

.cssmargintop {
    margin-top: 10px;
}

.MyTitleCourierName {
    padding: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    /*background-color: var(--NewRedIDEXX) !important;*/
    background-color: transparent !important;
    color: var(--NewRedIDEXX);
    font-size: 18px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}



.BtnHelpServiceTitle {
    /*background-color: var(--LighGrayIDEXX);*/
    background-color: white !important;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 0px;
    padding: 0px;
    margin-top: 3px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .BtnHelpServiceTitle .tooltiptextHelpServiceTitle {
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        /*bottom: 125%;*/
        top: 125%; /*messo cosi per farlo comparire sotto il bottone*/
        left: 50%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnHelpServiceTitle .tooltiptextHelpServiceTitle::after {
            content: "";
            position: absolute;
            /*top: 100%;*/
            bottom: 100%; /*messo cosi per farlo comparire in alto al riquadro*/
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            /*border-color: #555 transparent transparent transparent;*/
            border-color: transparent transparent #555 transparent; /*messo cosi per farlo comparire con la punta verso l'alto*/
        }

    .BtnHelpServiceTitle:hover .tooltiptextHelpServiceTitle {
        visibility: visible;
        opacity: 1;
    }

    .BtnHelpServiceTitle:hover {
        /*background-color: var(--GrayIDEXX);*/
        height: 18px;
        width: 18px;
        border-radius: 50%;
        border: 0px;
        padding: 0px;
    }

.CustomerBorderFirstServiceSingle {
    position: relative;
    border: 1px solid var(--NewRedIDEXX);
    border-radius: 8px;
    /* padding: 10px;
    margin: 10px 0;
    margin-left: 5px;
    margin-right: 5px;*/
    width: 650px !important;
    /*flex: 1;*/
    margin: 5px;
    margin-left: 15px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
}
    /*.CustomerBorderFirstService:before {*/
    /*.CustomerBorderFirstService span{*/
    .CustomerBorderFirstServiceSingle .hcc {
        /*content:"1 Service";*/
        position: absolute;
        top: -10px;
        left: 20px;
        background: #fff;
        /*width: 140px;*/
        width: 200px;
        padding: 0 5px;
        /*font-weight:bold;*/
        font-size: 16px;
    }

.CustomerBorderFirstService {
    position: relative;
    border: 1px solid var(--NewRedIDEXX);
    border-radius: 8px;
    /* padding: 10px;
    margin: 10px 0;
    margin-left: 5px;
    margin-right: 5px;*/
    width: 650px !important;
    flex: 1;
    margin: 5px;
    margin-left: 15px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
}
    /*.CustomerBorderFirstService:before {*/
    /*.CustomerBorderFirstService span{*/
    .CustomerBorderFirstService .hcc {
        /*content:"1 Service";*/
        position: absolute;
        top: -10px;
        left: 20px;
        background: #fff;
        /*width: 140px;*/
        width: 200px;
        padding: 0 5px;
        /*font-weight:bold;*/
        font-size: 16px;
    }

.CustomerBorderSecondService {
    position: relative;
    border: 1px solid var(--NewRedIDEXX);
    border-radius: 8px;
    /*padding: 10px;
    margin: 10px 0;
    margin-left: 5px;
    margin-right: 5px;*/
    width: 650px !important;
    flex: 1;
    margin: 5px;
    margin-left: 15px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .CustomerBorderSecondService .hcc {
        /*content:"1 Service";*/
        position: absolute;
        top: -10px;
        left: 20px;
        background: #fff;
        /*width: 140px;*/
        width: 200px;
        padding: 0 5px;
        /*font-weight:bold;*/
        font-size: 16px;
    }

.BtnHelpService {
    /*background-color: var(--LighGrayIDEXX);*/
    background-color: white !important;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 0px;
    padding: 0px;
    margin-top: 3px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    margin-bottom: 4px !important;
}

    .BtnHelpService .tooltiptextHelp {
        visibility: hidden;
        /*width: 250px;*/
        width: 450px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        /*left: 50%;*/
        left: 70%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnHelpService .tooltiptextHelp::after {
            content: "";
            position: absolute;
            top: 100%;
            /*left: 50%;*/
            left: 116px;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnHelpService:hover .tooltiptextHelp {
        visibility: visible;
        opacity: 1;
    }

    .BtnHelpService:hover {
        /*background-color: var(--GrayIDEXX);*/
        height: 18px;
        width: 18px;
        border-radius: 50%;
        border: 0px;
        padding: 0px;
        margin-bottom: 4px;
    }

.BtnLinkDeleteBooking {
    /*font-size: medium;*/
    color: var(--NewRedIDEXX);
    /*font-weight: bold;*/
    font-family: var(--bs-font-sans-serif);
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
    /*margin-top: 10px;*/
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}
/*https://supportcenter.devexpress.com/ticket/details/t1245836/dxdateedit-for-blazor-show-only-days-of-the-selected-month*/

.dxbl-calendar-weekend {
    --dxbl-calendar-weekend-color: black;
}

/*.myCalendarCss .dxbl-calendar-weekend{
    color: black !important;
}*/
/* Hide calendar days outside the current month */
.myCalendarCss .dxbl-calendar-day.dxbl-calendar-not-current-view {
    visibility: hidden;
}

/* Remove week numbers (shifts other elements to the left) */
.myCalendarCss .dxbl-calendar-week-number,
.myCalendarCss .dxbl-calendar-days-of-week th:first-child {
    display: none;
}

/* Remove "td" element beside "Sun" text (shifts other elements to the left) */
.myCalendarCss .dxbl-calendar-days-of-week td:first-child {
    display: none;
}

/*https://supportcenter.devexpress.com/ticket/details/t1246958/dxtextbox-for-blazor-how-to-change-the-background-color-when-readonly-is-set-to-true*/
.MyDisabledComboBox .dxbl-text-edit-template {
    background-color: #E3E3E3 !important
}

.MyDisabledTextBox {
    background-color: #E3E3E3 !important;
}
/*https://supportcenter.devexpress.com/ticket/details/t1247532/dxtagbox-for-blazor-how-to-set-the-background-color-when-the-component-is-disabled*/
.MyDisabledTagBox {
    --dxbl-text-edit-disabled-root-bg: #E3E3E3 !important;
}
/* for vertical scrollbar */
.dxbl-scroll-viewer > .dxbl-scroll-viewer-vert-scroll-bar > .dxbl-scroll-viewer-scroll-thumb {
    --dxbl-scroll-viewer-vert-scroll-bar-hover-width: 10px;
    --dxbl-scroll-viewer-vert-scroll-bar-width: 10px;
    background-color: var(--MediumGrayIDEXX); /* uses the primary color used in the theme */
}

/* for horizontal scrollbar */
.dxbl-scroll-viewer > .dxbl-scroll-viewer-hor-scroll-bar > .dxbl-scroll-viewer-scroll-thumb {
    --dxbl-scroll-viewer-hor-scroll-bar-height: 10px;
    --dxbl-scroll-viewer-hor-scroll-bar-hover-height: 10px;
    background-color: var(--MediumGrayIDEXX); /* uses the primary color used in the theme */
}
/*https://supportcenter.devexpress.com/ticket/details/t1250971/grid-for-blazor-horizontal-scrollbar-with-increased-height-covers-the-last-row*/
.dxbl-scroll-viewer {
    padding-bottom: 10px;
}

.grid-modified-cell {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
}

/*.BtnHelpReason {*/
/*background-color: var(--LighGrayIDEXX);*/
/*background-color: white !important;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 0px;
    padding: 0px;
    margin-top: 3px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    margin-bottom: 4px !important;
}

    .BtnHelpReason .tooltiptextHelpReason {
        visibility: hidden;*/
/*width: 250px;*/
/*width: 450px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;*/
/*left: 50%;*/
/*left: 70%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnHelpReason .tooltiptextHelpReason::after {
            content: "";
            position: absolute;
            top: 100%;*/
/*left: 50%;*/
/*left: 116px;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .BtnHelpReason:hover .tooltiptextHelpReason {
        visibility: visible;
        opacity: 1;
    }

    .BtnHelpReason:hover {*/
/*background-color: var(--GrayIDEXX);*/
/*height: 18px;
        width: 18px;
        border-radius: 50%;
        border: 0px;
        padding: 0px;
        margin-bottom: 4px;
    }*/
.BtnHelpReason {
    background-color: white !important;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 0px;
    padding: 0px;
    margin-top: 3px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    margin-bottom: 4px !important;
}

    .BtnHelpReason .tooltiptextHelpReason {
        visibility: hidden;
        width: 450px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 25px; /* Posiziona il tooltip a destra del pulsante */
        transform: translateY(-50%); /* Centra verticalmente il tooltip */
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnHelpReason .tooltiptextHelpReason::after {
            content: "";
            position: absolute;
            top: 50%;
            left: -2%; /* Posiziona il triangolo all'estremità destra del tooltip */
            transform: translateY(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: transparent #555 transparent transparent; /* Triangolo punta verso sinistra */
        }

    .BtnHelpReason:hover .tooltiptextHelpReason {
        visibility: visible;
        opacity: 1;
    }

    .BtnHelpReason:hover {
        height: 18px;
        width: 18px;
        border-radius: 50%;
        border: 0px;
        padding: 0px;
        margin-bottom: 4px;
    }

.cssDragAndDropAreaSignatureProforma {
    border: 1px solid var(--PinkIDEXX);
    margin: 0px;
    width: 70%;
    margin-left: 40px !important;
    /* SFONDO A SCACCHI
        background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 25px 25px;*/ /* Must be a square */
    /*background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px;*/ /* Must be half of one side of the square */
}

.button-container {
    position: relative;
}

.cssBtnPhotoLockBox {
    position: absolute;
    padding: 0px;
    border-radius: 10px;
    transform: rotate(-10deg);
}

    .cssBtnPhotoLockBox:hover {
        position: absolute;
        padding: 0px;
        border-radius: 10px;
        opacity: 0.5;
    }


.BtnLinkLockBoxPhotos {
    /*font-size: medium;*/
    color: var(--NewRedIDEXX);
    /*font-weight: bold;*/
    font-family: var(--bs-font-sans-serif);
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
    margin-top: 10px;
    position: relative;
    /*display: inline-block;*/
    display: flex;
    align-items: center; /* centro verticale */
    /*gap: 8px;*/ /* opzionale, spaziatura tra gli elementi */
}

    .BtnLinkLockBoxPhotos .tooltiptextShowPreviewPhoto {
        font-size: 12px;
        visibility: hidden;
        width: 180px;
        /*background-color: #555;*/
        background-color: white;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        border: 2px dashed lightblue;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        /*left: 50%;*/
        left: 65%;
        margin-left: -125px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .BtnLinkLockBoxPhotos .tooltiptextShowPreviewPhoto::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: grey transparent transparent transparent;
        }

    .BtnLinkLockBoxPhotos:hover .tooltiptextShowPreviewPhoto {
        visibility: visible;
        opacity: 1;
    }

    .BtnLinkLockBoxPhotos:hover {
        color: var(--DarkRedIDEXX);
    }

.form-layout {
    margin-top: 0px;
    margin-bottom: 0px;
}

.cssstyleServerName {
    color: white;
}

    .cssstyleServerName:hover {
        color: black;
    }

/* Modalità una sola colonna */
.one-col .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.one-col .d-none.d-md-block {
    display: block !important;
}
.cssDxTimeEdit{
    width:100px;
}