:root {
    --azzurro: #04D3DE;
    --azzurrino: #e5f9fa;
    --magenta: #F93A78;
    --magentino: rgba(249, 58, 120, 0.07);
    --box-shadow-cards: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@font-face {
    font-family: "WotfardRegular";
    src: url("fonts/Wotfard-Regular.otf") format("opentype");
}

@font-face {
    font-family: "WotfardBold";
    src: url("fonts/Wotfard-SemiBold.otf") format("opentype");
}

* {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    box-sizing: border-box;
    font-size: inherit;
    color: inherit;
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
}

select {
    -webkit-appearance: none;
}

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

p {
    line-height: 1.4rem;
}

h1, h2, h3, h4, b, strong {
    font-weight: normal;
    font-family: "WotfardBold", sans-serif;
}

html {
    height: 100%;
}

body {
    font-family: "WotfardRegular", sans-serif;
    color: #444;
    background-color: #fcfcfc;
    padding-top: 140px;
    min-height: 100%;
    position: relative;
    padding-bottom: 550px;
}

.container {
    width: 90%;
    max-width: 1150px;
    margin: auto;
    display: block;
}

.container .media-partner-title {
    text-align: center;
    margin-top: 100px;
}

.media-partners {
    width: 100%;
    margin: auto;
    font-size: 0;
    max-height: 100px;
    padding-top: 30px;
}

.media-partners img {
    display: inline-block;
    vertical-align: middle;
    height: 25px;
    margin: 2.4%;
}

.media-partners img:nth-of-type(3) {
    height: 50px;
}


.container-ristretto {
    max-width: 300px;
    margin: auto;
}

.container-quasi-ristretto {
    max-width: 550px;
}

h1 {
    font-size: 1.7rem;
    text-align: center;
    padding-bottom: 50px;
}

.form-container input, .form-container button {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.form-container button {
    background-color: var(--azzurro);
    color: white;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

#banner-home {
    padding: 20px;
    height: 80px;
}

header {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    padding: 10px;
    padding-left: 20px;
    padding-right: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

header .logo {
    height: 20px;
}

.btn-profilo {
    display: block;
}

.btn-profilo img {
    height: 40px;
    border-radius: 50%;
}

.hoverizzato {
    transition: opacity .2s ease-in-out;
    cursor: pointer;
}

.hoverizzato * {
    cursor: pointer;
}

.hoverizzato:hover {
    opacity: .7;
}

footer {
    background-color: var(--azzurro);
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 200px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    min-height: 200px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.footer-colonne {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.footer-colonna {
    flex: 1;
}

.footer-colonna > div a {
    display: block;
    margin-top: 3px;
    margin-bottom: 5px;
    cursor: pointer;
}

.inner-caricamento-in-corso {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    height: 100vh;
    width: 100vw;
    z-index: 999999;
    background-color: rgba(2, 202, 211, 0.8);
    justify-content: center;
    align-items: center;
}

.inner-caricamento-in-corso .quadrato-caricamento {
    height: 100px;
    width: 100px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-caricamento-in-corso img {
    height: 50px;
}

.form label {
    color: var(--azzurro);
    font-size: .9rem;
    display: block;
    margin-bottom: 4px;
    margin-top: 30px;
    font-family: "WotfardBold", sans-serif;
    text-align: left;
}

.form-login {
    max-width: 320px;
    text-align: center;
}

.form-login h1 {
    color: var(--azzurro);
    font-size: 1.3rem;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.form input, .form select, .form textarea {
    width: 100%;
    display: block;
    padding: 13px;
    border-radius: 15px;
    border: solid 1.5px var(--azzurro);
}

.form input[type='radio'] {
    width: auto;
    display: inline-block;
}

.form textarea {
    height: 90px;
}

.bottone-cafone {
    display: block;
    padding: 13px;
    border-radius: 15px;
    color: white;
    background-color: var(--azzurro);
    border: none;
    text-align: center;
    margin-top: 30px;
    width: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    font-family: "WotfardBold", sans-serif;
    text-transform: uppercase;
    text-decoration: none !important;
}

.bottone-cafone.piccolo {
    display: inline-block;
    width: unset;
    margin: 0;
}

.bottone-cafone.magenta {
    background-color: var(--magenta);
    box-shadow: 0 5px 10px var(--magentino);

}

.bottone-cafone.grigio {
    margin-top: 15px;
    background-color: #ccc;
}

p.magenta {
    color: var(--magenta);
}

.bottone-flattato {
    font-size: 1rem;
    text-transform: uppercase;
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
    padding: 10px;
    background: transparent;
    border: none;
    display: block;
    margin: auto;
    text-decoration: none !important;
}

.bottone-flattato.magenta {
    color: var(--magenta);
}

.testo-azzurro {
    color: var(--azzurro) !important;
    /*margin-bottom: 15px !important;*/

}

.testo-magenta {
    color: var(--magenta);
}

.form-login .password-dimenticata {
    text-align: center;
    text-decoration: none;
    font-family: "WotfardBold", sans-serif;
    margin-top: 15px;
    color: var(--azzurro);
    display: block;

}

.barra-progresso-wizard {
    background-color: var(--azzurrino);
    border-radius: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.barra-progresso-wizard div {
    background-color: var(--azzurro);
    height: 8px;
    border-radius: 10px;
}

.titolo-wizard {
    font-family: "WotfardBold", sans-serif;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--azzurro);
}

.nascondi {
    display: none;
}

.wizard .placeholder-utente {
    height: 100px;
    display: block;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 10px;
}

.carica-documento {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    border: dashed 2px var(--azzurro);
    margin-top: 20px;
    padding: 30px;
}

.carica-documento .hint {
    margin-bottom: 10px;
    order: 0;
}

.carica-documento button {
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
    order: 2;
}

.dz-image-preview {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

.dz-success-mark, .dz-error-mark {
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    min-height: 30px;
    max-width: 30px;
    padding: 5px;
}

.dz-error-mark svg, .dz-success-mark svg {
    width: 100%;
}

.dz-error-message {
    font-size: .8rem;
    max-width: 40%;
}

.dz-error .dz-details, .dz-filename {
    display: none;
}

.dz-image-preview.dz-success .dz-success-mark {
    display: flex;
    background-color: lightseagreen;
}

.dz-image-preview.dz-error .dz-error-mark {
    display: flex;
    background-color: palevioletred;
}

.dz-image img {
    width: 60px;
    border-radius: 10px;
    margin-right: 20px;
}

.dz-upload {
    display: block;
    height: 8px;
    border-radius: 8px;
    background-color: var(--azzurro);
}

.dropzone .file-caricato {
    order: 3;
}

.ui-corner-all, .ui-corner-top, .ui-corner-tr {
    border-radius: 10px !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border-radius: 4px;
    text-align: center;
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #f6f6f6 !important;
    border: 1px solid var(--magenta) !important;
    color: var(--magenta) !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: var(--azzurro) !important;
    color: white !important;
}

.ui-widget.ui-widget-content {
    border: none !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.ui-datepicker .ui-datepicker-header {
    background-color: white;
    border: none !important;
}

.profilo-riga-utente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

.profilo-riga-utente__left {
    display: flex;
    justify-content: start;
    align-items: center;
}

.profilo-riga-utente__premium {
    font-size: 0.8rem;
    font-weight: bolder;
    margin-right: 20px;
}

.roofus-premium-card {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    padding: 40px 30px 30px;
    border-radius: 5px;
    margin: 50px 0;
}

.roofus-premium-card__header {
    margin-bottom: 35px;
}

.roofus-premium-card__header > div {
    display: inline-block;
}

.roofus-premium-card__title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-right: 30px;
}

.chip {
    padding: 4px 8px;
    border-radius: 100px;
}

.chip--enabled {
    background-color: rgb(225, 255, 215);
}

.chip--cancelled {
    background-color: #ffebc6;
}

.chip--disabled {
    background-color: rgb(255, 215, 215);
}

.chip-dot {
    padding: 6px;
    border-radius: 50%;
    margin-right: 5px;
}

.chip--enabled .chip-dot {
    background-color: rgb(102, 255, 0);
}

.chip--cancelled .chip-dot {
    background-color: orange;
}

.chip--disabled .chip-dot {
    background-color: rgb(255, 0, 0);
}

.chip .chip-text {
    font-size: 0.7rem;
    margin-bottom: 1px;
}

.chip > * {
    display: inline-block;
    vertical-align: middle;
}

.roofus-premium-card__feature {
    margin-bottom: 20px;
}

.roofus-premium-card__feature:last-child {
    margin-bottom: 30px;
}

.roofus-premium-card__feature > * {
    display: inline-block;
    vertical-align: middle;
}

.roofus-premium-card__check {
    width: 25px;
    margin-right: 15px;
}

.roofus-premium-card__cancel-sub {
    text-decoration: underline;
    border: none;
    background-color: transparent;
}

.acquisto-roofus-premium {
    padding: 100px 0;
}

.acquisto-roofus-premium__main-title {
    color: var(--azzurro);
    font-size: 2.4rem;
    font-family: "WotfardBold", sans-serif;
    margin-bottom: 20px;
}

.acquisto-roofus-premium__card {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    padding: 80px 50px;
    border-radius: 10px;
}

.acquisto-roofus-premium__title {
    font-size: 1.8rem;
    font-family: "WotfardBold", sans-serif;
    text-align: left;
    margin-top: 0;
    margin-bottom: 40px;
    padding: 0;
}

.acquisto-roofus-premium__flex {
    gap: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.acquisto-roofus-premium__flex--start {
    gap: 10px;
    align-items: start
}

.acquisto-roofus-premium__original-price {
    font-size: 1.4rem;
    text-decoration: line-through;
    margin-bottom: 8px;
}

.acquisto-roofus-premium__price {
    font-size: 1.4rem;
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
}

.acquisto-roofus-premium__vantaggi {
    margin-bottom: 40px;
}

.acquisto-roofus-premium__vantaggio {
    margin-bottom: 20px;
    line-height: 1.6rem;
}

.acquisto-roofus-premium__cane {
    width: 300px;
}

.acquisto-roofus-premium__bottone {
    display: inline-block;
    width: unset;
    margin-top: 0;
}

.acquisto-roofus-premium__nb {
    margin-top: 35px;
    color: darkgray;
}

.roofus-premium-disattiva-popup {
    display: none;
    background-color: white;
    position: fixed;
    z-index: 1000;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.33);
}

.close-popup-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.shadowed {
    box-shadow: 0 0 10000px rgba(0, 0, 0);
}

.roofus-premium-disattiva-popup__title {
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.roofus-premium-disattiva-popup__par {
    margin-bottom: 25px;
}

.roofus-premium-disattiva-popup .bottone-cafone {
    margin-bottom: 20px;
}

.immagine-profilo {
    height: 80px;
    border-radius: 50%;
}

.profilo-riga-utente .immagine-profilo {
    margin-right: 15px;
    height: 70px;
}

.profilo-riga-utente .saluto {
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 1.2rem;
}

.box-magentino {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    padding-left: 20px;
    border-radius: 15px;
    background-color: var(--magentino);
    margin-bottom: 5px;
    margin-top: 10px;
}

.box-azzurro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    padding-left: 20px;
    border-radius: 15px;
    background-color: var(--azzurrino);
    margin-bottom: 5px;
    margin-top: 10px;
}

.container .container-quasi-ristretto .box-azzurro .box-sezione-profilo .hoverizzato {
    filter: none !important;
}

.container .container-quasi-ristretto .box-azzurro .box-sezione-profilo {
    filter: none !important;
}


.box-azzurro.invisibile {
    background-color: transparent;
}

.box-azzurro.grigio {
    background-color: #eee;
}

.box-transparente{
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    padding-left: 0;
    border-radius: 15px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.box-azzurro .chevron {
    height: 25px;
}

.box-azzurro .chevron-gruppo {
    float: right;
    height: 25px;
}

.riga-provincia-comune {
    display: flex;
    align-items: start;
    width: 100%;
}

.riga-provincia-comune > div:last-child {
    width: 120px;
    padding-left: 10px;
}

.box-azzurro.disattivato {
    opacity: .4;
}

.padding-sopra {
    margin-top: 40px;
}

.divisore-light {
    height: 1px;
    background-color: #ccc;
    width: 100%;
    margin-top: 40px;
}

.box-sezione-profilo > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-sezione-profilo .check-fatto {
    background-image: url("img/check-fatto.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    margin-right: 15px;
}

.box-sezione-profilo .chevron {
    height: 14px;
    margin-left: 10px;
    filter: invert(74%) sepia(62%) saturate(1380%) hue-rotate(128deg) brightness(88%) contrast(98%);
}

.box-sezione-profilo .check-fatto.incompleto {
    opacity: .2;
}

.box-sezione-profilo.incompleto {
    background-color: rgba(249, 58, 120, 0.06);
}

.box-sezione-profilo.incompleto .check-fatto {
    background-image: url("img/check-non-fatto.svg");
}

.box-sezione-profilo.incompleto .chevron {
    filter: invert(32%) sepia(33%) saturate(3783%) hue-rotate(316deg) brightness(102%) contrast(95%);
}

.box-sezione-profilo b {
    color: var(--azzurro);
}

.box-sezione-profilo.incompleto b {
    color: var(--magenta);
}

.box-sezione-profilo p {
    font-size: .9rem;
    line-height: 1rem;
    margin-top: 5px;
}

h2 {
    margin-top: 40px;
    font-size: 1.4rem;
}

.btn-aggiunta-laterale {
    float: right;
    margin-top: -30px;
}

.btn-aggiunta-laterale img {
    height: 35px;
}

.riga-taglia-peso {
    display: flex;
    justify-content: space-between;
    align-content: center;
}

.riga-taglia-peso > div:first-child {
    width: 50%;
    box-sizing: border-box;
    padding-right: 10px;
}

.riga-taglia-peso > div:last-child {
    width: 50%;
    padding-left: 10px;
}

.riga-taglia-peso .taglie {
    margin-top: 15px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.riga-anno-sesso {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.riga-anno-sesso > div {
    width: 50%;
}

.riga-anno-sesso > div:first-child {
    padding-right: 10px;
}

.riga-anno-sesso > div:last-child {
    padding-left: 10px;
}

.smartradio {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    min-width: 60px;
    height: 44px;
    text-align: center;
    margin-right: 5px;
    margin-top: 10px;
    text-transform: uppercase;
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
    font-size: .9rem;
}

.smartradio:checked {
    background-color: var(--magenta);
    color: white;
    border-color: var(--magenta);
}

.smartradio::before {
    content: attr(data-label);
}

.smartradio:checked::before {
    content: attr(data-label);
    background-color: var(--magenta);
    color: white;
}

.tipologia-animale .smartradio:checked::before {
    content: attr(data-label);
    background-color: transparent;
    color: white;
}

.box-ricerca-dogsitter .tipologia-animale .smartradio {
    color: var(--azzurro);
    height: unset;
}

.staff-aggiungi-collaboratore {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
    text-transform: uppercase;
    margin-top: 50px;
}

.staff-aggiungi-collaboratore img {
    height: 35px;
    margin-right: 10px;
}

.box-staff-modificabile {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 30px;
}

.box-staff-modificabile img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-right: 10px;
}

#form-dati-staff .cambia-immagine, #form-dati-roofus .cambia-immagine {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 20px;
}

#form-dati-staff .cambia-immagine img, #form-dati-roofus .cambia-immagine img {
    height: 80px;
    width: 80px;
    margin-right: 10px;
    border-radius: 50%;
}

#form-dati-staff input[type='file'], #form-dati-roofus input[type='file'] {
    border: none;
    display: inline;
    padding: 0;
    margin-top: 10px;
}

.box-animale {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 10px;
}

.box-animale-dettaglio-prenotazione {
    display: block;
    padding-right: 20px;
    padding-left: 15px;
}

.box-animale img, .box-animale-dettaglio-prenotazione .immagine-profilo {
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.con-switcher-difianco {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.box-carica-foto-pagina {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 10px;
}

.box-carica-foto-pagina img {
    width: 60px;
    margin-right: 10px;
    border-radius: 5px;
}

.griglia-carica-foto-dog-hotel {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.titolo-secondario, .titolo-primario, .titolo-pass-bacheca {
    font-size: 1.2rem;
    color: var(--azzurro);
    margin-bottom: 4px;
    margin-top: 20px;
}

.titolo-pass-bacheca {
    font-size: 2rem;
    text-align: left;
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
}

.titolo-secondario-pass-bacheca {
    margin-bottom: 50px;
}

.titolo-primario {
    margin-top: 50px;
    font-size: 1.3rem;
}

.box-tariffa-attivabile {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: white;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: .9rem;
}

.box-tariffa-attivabile .nome-e-attivazione {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-tariffa-attivabile .riga-prezzi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.box-tariffa-attivabile .riga-prezzi b {
    color: mediumseagreen;
    font-size: 1.1rem;
}

.box-tariffa-attivabile .riga-prezzi input {
    padding: 12px;
    border-radius: 15px;
    border: solid 1px var(--azzurro);
    width: 80px;
    font-size: 1rem;
    margin-right: 5px;
}

.box-tariffa-attivabile select {
    display: block;
    width: 100px;
    border: solid 1px var(--azzurro);
    padding: 12px;
    border-radius: 15px;
    margin-top: 5px;
}

.orari-accettazioni {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.orari-accettazioni > div {
    width: 47%;
}

.orari-accettazioni b {
    display: block;
    margin-bottom: 5px;
    font-size: .9rem;
}

.secondario {
    opacity: .5;
    font-size: .9em;
}

.primario-label {
    font-size: .8em !important;
    color: #444;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.titolo-chat {
    font-size: 1rem;
    font-weight: 800;
}

.secondario.magenta {
    opacity: 1;
    color: var(--magenta);
}

.calendario-disponibilita-mese {
    margin-top: 50px;
}

.calendario-disponibilita {
    width: 100%;
    box-sizing: border-box;
    border-collapse: collapse;
    margin-top: 20px;
}

.calendario-disponibilita th {
    text-align: center;
    font-family: "WotfardRegular", sans-serif;
    font-weight: normal;
    border-bottom: solid 1px #ddd;
    color: var(--azzurro);
    font-size: .9rem;
    padding-bottom: 10px;
}

.calendario-prenotazioni th {
    padding-bottom: 30px;
    padding-top: 10px;
    border-color: transparent;
}

.calendario-disponibilita td {
    text-align: center;
    border-radius: 50%;
    align-items: center;
    font-size: .9rem;
    padding: 5px;
}

.calendario-disponibilita td div {
    transition: background-color .1s ease-in-out;
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
}

.calendario-prenotazioni td {
    font-size: 1rem;
}

.calendario-prenotazioni td div {
    justify-content: start;
    padding-top: 5px;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    min-height: 60px;
    width: auto;
}

.calendario-prenotazioni .casella-selezionata {
    background-color: var(--azzurrino);
    border-radius: 15px;
}

.calendario-prenotazioni .oggi {
    color: var(--magenta) !important;
}

.calendario-prenotazioni img {
    display: block;
    height: 13px;
    margin-top: 7px;
}

/* .calendario-disponibilita td:hover div,  */
.calendario-disponibilita td div.assente {
    background-color: #ffe4ee;
}

.calendario-prenotazioni td:hover div {
    background-color: transparent;
}

h1.scheda-dog-hotel {
    font-size: 1.4rem;
    margin-top: 30px;
    margin-bottom: 5px;
    text-align: left;
    padding: 0;
    color: var(--azzurro);
}

h2.scheda-dog-hotel {
    font-size: 1.1rem;
    margin-bottom: 10px;
    margin-top: 80px;
    padding: 0;
    color: var(--azzurro);
}

.box-stato-profilo .titoletto {
    display: flex;
    justify-content: start;
    align-items: center;
}

.box-stato-profilo.rosso {
    background-color: rgba(249, 58, 120, 0.06);
}

.box-stato-profilo.arancione {
    background-color: rgba(249, 58, 120, 0.06);
}

.box-stato-profilo.verde {
    background-color: #ECFBEB;
}

.box-stato-profilo .pallino {
    background-color: var(--magenta);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    margin-right: 10px;
}

.pallino.arancione {
    background-color: orange;
}

.pallino.verde {
    background-color: limegreen;
}

.box-stato-profilo > div {
    width: 100%;
}

.box-stato-profilo p {
    margin-top: 10px;
    font-size: .9rem;
    opacity: .6;
    line-height: 1.2rem;
}

.box-stato-profilo a.flattino {
    margin-top: 10px;
    text-transform: uppercase;
    font-family: "WotfardBold", sans-serif;
    display: block;
    font-size: .75rem;
}

.domanda-dettaglio-servizio {
    margin-top: 20px;
    margin-bottom: 25px;
}

.domanda-dettaglio-servizio b {
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
    display: block;
    margin-bottom: 5px;
}

.riga-radio-smartradiodue, .riga-checkbox-smartcheckdue {
    display: flex;
    justify-content: start;
    align-items: start;
}

.riga-checkbox-smartcheckdue input[type="checkbox"] {
    width: 25px;
    height: 25px;
}

.riga-checkbox-smartcheckdue input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    height: 40px;
    width: 40px;
    background-position: 10% 15%;
    background-size: 16px;
    background-repeat: no-repeat;
    background-image: url('img/check-bianco.svg');
}

.riga-radio-smartradiodue div, .riga-checkbox-smartcheckdue div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 25%;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
}

.riga-radio-smartradiodue input, .smartradiodue, .riga-checkbox-smartcheckdue input {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}

.riga-radio-smartradiodue input::before, .smartradiodue::before {
    content: '';
    display: block;
    height: 24px;
    width: 24px;
    border: solid 2px var(--azzurro);
    margin-left: -2px;
    border-radius: 50%;
}

.riga-radio-smartradiodue input:checked::after, .smartradiodue:checked::after {
    position: absolute;
    content: '';
    display: block;
    height: 16px;
    width: 16px;
    margin-top: -22px;
    margin-left: 4px;
    background-color: var(--magenta);
    border-radius: 50%;
}

header .bottone-cafone {
    margin: 0;
    display: block;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    margin-bottom: 5px;
    font-size: .9rem;
}

.riga-radio-smartradiodue label, .riga-checkbox-smartcheckdue label {
    font-size: .8rem;
    display: block;
}

.affianca, .affianca-wrap {
    display: flex;
    align-items: center;
}

.affianca-wrap {
    flex-wrap: wrap;
    gap: 8px;
}

.home-hero-sfondo {
    padding-top: 110px;
    padding-bottom: 170px;
    color: white;
    text-align: center;
}

.home-hero-sfondo h1 {
    font-size: 2.5rem;
    padding-bottom: 10px;
}

.home-hero-sfondo p {
    margin-bottom: 50px;
}

.box-ricerca-dogsitter {
    color: var(--azzurro);
    max-width: 400px;
    background-color: white;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    text-align: left;
}

.box-ricerca-dogsitter .titolo {
    font-size: 1.1rem;
    font-family: "WotfardBold", sans-serif;
}

.box-ricerca-dogsitter select, .box-ricerca-dogsitter input {
    padding: 10px;
    border-radius: 10px;
    color: #555;
    border: solid 1px var(--azzurro);
    margin-top: 10px;
    width: 100%;
    display: block;
}

.box-ricerca-dogsitter select, .form select {
    padding-right: 45px;
    background: url("/img/chevron-down.svg") no-repeat 98.5% center; /* !important used for overriding all other customisations */
    background: url("/img/chevron-down.svg") no-repeat calc(100% - 10px) center; /* Better placement regardless of input width */
}

.box-ricerca-dogsitter select, .box-ricerca-dogsitter input::placeholder {
    color: #bbb;
}

#data-range {
    background: url("/img/data-inizio.svg") no-repeat calc(100% - 10px) center;
}

.riga-date input {
    font-size: .9rem;
    background: url("/img/data-inizio.svg") no-repeat calc(100% - 10px) center;
    margin-right: 5px;
    margin-left: 5px;
}

.riga-date input:last-child {
    background: url("/img/data-fine.svg") no-repeat calc(100% - 10px) center;
}

.riga-date input:first-child {
    margin-left: 0;
}

.riga-date input:last-child {
    margin-right: 0;
}

.box-ricerca-dogsitter .dati-aggiuntivi {
    display: none;
}

.riga-date {
    display: flex;
    justify-content: space-between;
}

.box-ricerca-dogsitter .ricerca-maps {
    background: url("/img/cerca.svg") no-repeat calc(100% - 10px) center;
    padding-right: 35px;
}

.box-ricerca-dogsitter .bottone-cafone {
    padding: 13px;
    background-color: var(--magenta);
    margin-top: 10px;
}

.home-sezione-rassicurante {
    padding: 40px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: -50px;
}

.home-sezione-rassicurante > div {
    justify-content: space-between;
    display: flex;
}

.home-sezione-rassicurante h2 {
    text-align: center;
    color: var(--azzurro);
    margin-top: 10px;
    margin-bottom: 40px;
}

.box-garanzia {
    width: 100%;
    height: auto;
    display: flex;
    background-color: var(--azzurrino);
    border-radius: 20px;
    margin-bottom: 25px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

.box-garanzia img {
    order: 0;
    align-self: auto;
    height: 120px;
    margin-right: 30px;
}

.box-garanzia .testo-garanzia {
    padding-top: 45px;
    display: flex;
    height: auto;
    width: 45%;
    align-self: auto;
    align-content: flex-start;
    flex-direction: column;
    align-items: first;
}

.testo-garanzia h1 {
    color: var(--azzurro);
    text-align: left;
    margin: 0;
    display: block;
    padding-bottom: 10px;
}

.testo-garanzia p {
    font-size: 0.9rem;
    display: block;
    text-align: left;
    margin-bottom: 50px;
}

.box-rassicurante {
    width: 30%;
}

.box-rassicurante img {
    height: 100px;
    display: block;
    margin: auto;
    margin-bottom: 20px;
}

.box-rassicurante b {
    color: var(--azzurro);
    text-align: center;
    display: block;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.box-rassicurante p {
    font-size: .9rem;
    line-height: 1.3rem;
}

.box-riassunto-ricerca {
    padding: 20px;
    border-radius: 15px;
    background-color: var(--azzurrino);
    margin-top: 50px;
    margin-bottom: 20px;
}

.box-riassunto-ricerca b.testo-azzurro {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
}

.testo-azzurro-prenotazione {
    color: var(--azzurro);
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.box-riassunto-ricerca .bottone-cafone {
    margin-top: 0;
}

.box-dog-hotel {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.box-dog-hotel .immagine-anteprima {
    min-height: 220px;
    aspect-ratio: 1;
    width: 100%;
    background: #ddd;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.box-dog-hotel .immagine-anteprima > div:first-child {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 15px;
    flex: 1;
    align-items: flex-start;
}

.box-dog-hotel .immagine-anteprima > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 20px 20px 15px;
    color: white;
    flex: 5;
}

.chip-sfondo-bianco {
    background-color: white;
    border-radius: 40px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: .8rem;
    margin-right: 10px;
}

.chip-sfondo-bianco.magenta {
    color: var(--magenta);
}

.box-dog-hotel .nome {
    font-family: "WotfardBold", sans-serif;
    font-size: 1.1rem;
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: 5px;
    color: white;
}

.box-dog-hotel .citta {
    font-size: .9rem;
}

.box-dog-hotel .secondario {
    margin-top: 5px;
}

.box-dog-hotel .bollino-vip {
    color: white;
    background-color: var(--magenta);
    padding: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 40px;
    width: fit-content;
    font-size: .8rem;
    margin-bottom: 10px;
}

.bollino-premium {
    color: white;
    background-color: var(--magenta);
    padding: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 40px;
    width: fit-content;
    font-size: .8rem;
}

.container .bollino-vip {
    color: white;
    background-color: var(--magenta);
    padding: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 40px;
    width: fit-content;
    font-size: .8rem;
    margin-top: 30px;
}

.elenco-contatta-altri-sitter .box-dog-hotel::after {
    content: "";
    background-color: white;
    border-radius: 15px;
    height: 40px;
    width: 40px;
    border: solid 2px var(--azzurro);
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    background-size: 95% 90%;
    background-position: center;
}

.elenco-contatta-altri-sitter .box-dog-hotel.selezionato::after {
    background-image: url("img/background-check.png");
}

.box-dog-hotel--magnet {
    cursor: unset;
    opacity: 30%;
}

.media-valutazioni {
    color: var(--azzurro);
    min-width: 60px;
    text-align: right;
}

.media-valutazioni img {
    height: 20px;
    margin-bottom: -1px;
}

.titolo-valutazioni-scheda-dog-hotel {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.elenco-dog-hotels, .griglia-blog {
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr 1fr 1fr;
}

.elenco-dog-hotels {
    position: relative;
    z-index: 0;
}

.elenco-dog-hotels .box-dog-hotel {
    width: 100%;
    max-width: 450px;
}

.griglia-staff {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
}

.box-staff-singolo {
    display: flex;
    justify-content: start;
    width: 33%;
    font-size: .9rem;
    align-items: center;
    margin-bottom: 15px;
    padding-right: 10px;
    box-sizing: border-box;
}

.box-staff-singolo .anteprima {
    border-radius: 50%;
    height: 60px;
    margin-right: 10px;
}

.box-staff-singolo b {
    font-size: 1rem;
}

.griglia-servizi {
    display: flex;
    justify-content: start;
    align-items: end;
    flex-wrap: wrap;
}

.box-servizio-iconizzato {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 20%;
    text-align: center;
    margin-top: 40px;
}

.box-servizio-iconizzato img {
    height: 60px;
    margin-bottom: 10px;
}

.box-servizio-iconizzato label {
    font-size: .75rem;
    display: block;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.box-servizio-iconizzato.disattivato img {
    opacity: .2;
}

.spazia-in-mezzo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spazia-in-mezzo a {
    font-size: .9rem;
    text-decoration: underline;
}

.spazia-in-mezzo.dividi-equamente > * {
    width: 50%;
}

.spazia-in-mezzo .dividi-uno-due:first-of-type{
    width: 30%;
}

.spazia-in-mezzo .dividi-uno-due:last-of-type{
    width: 70%;
}




.header-dog-hotel {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.header-dog-hotel .colonna-disponibilita {
    width: 380px;
    min-width: 380px;
}

.box-verifica-disponibilita-dog-hotel {
    display: block;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 25px;
    box-sizing: border-box;
    border-radius: 15px;
}

.box-verifica-disponibilita-dog-hotel .titoletto {
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 1.1rem;
}

.riga-radio-servizio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #eee;
    padding-top: 12px;
    padding-bottom: 12px;
}

.riga-radio-servizio .prezzo {
    color: var(--azzurro);
    min-width: 55px;
    text-align: right;

    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.riga-radio-servizio .prezzo img {
    height: 18px;
    margin-right: 5px;
}

.riga-radio-servizio .prezzo b {
    display: block;
    width: 45px;
}

.riga-radio-servizio .radio-e-label {
    font-size: .9rem;
    display: flex;
    justify-content: start;
    align-items: center;
}

.riga-radio-servizio.disabilitato * {
    color: #ccc;
}

.riga-radio-servizio .smartradiodue {
    margin: 0;
    margin-top: -5px;
    margin-right: 10px;
}

.riga-radio-servizio .smartradiodue::before {
    height: 18px;
    width: 18px;
}

.riga-radio-servizio .smartradiodue:disabled::before {
    border-color: #ccc;
}

.riga-radio-servizio .smartradiodue:checked::after {
    height: 12px;
    width: 12px;
    margin-top: -17px;
    margin-left: 3px;
}

.header-dog-hotel .colonna-foto {
    width: calc(100% - 380px);
    padding-right: 30px;
}

.header-dog-hotel .foto-principale {
    display: block;
    background-size: cover;
    background-position: center;
    height: 390px;
    width: 100%;
    border-radius: 10px;
}

.header-dog-hotel .anteprime-foto {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 20px;
    overflow-x: scroll;
    background-color: transparent;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
}

.header-dog-hotel .anteprime-foto::-webkit-scrollbar {
    display: none;
}

.header-dog-hotel .anteprime-foto .anteprima {
    display: block;
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    border-radius: 8px;
    margin-right: 20px;
    background-color: #eee;
    background-size: cover;
    background-position: center;
}

.pin-location-scheda {
    height: 17px;
    margin-right: 5px;
    margin-bottom: -2px;
}

#mappa-quartiere {
    height: 300px;
    margin-top: 20px;
    border-radius: 10px;
    -webkit-transform: translate3d(0px, 0px, 0px);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.riga-ordinamento-ricerca {
    margin-bottom: 30px;
    position: relative;
}

.box-filtri-ricerca {
    display: none;
    position: absolute;
    top: 0;
    background-color: white;
    width: 100%;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 9;
}

.chiudi-filtri img {
    height: 25px;
    margin-bottom: -5px;
    margin-right: -5px;
}

.btn-filtra {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: solid 1.5px var(--azzurro);
    height: 50px;
    width: 50px;
}

.colonne-di-filtri {
    display: flex;
    justify-content: space-evenly;
    align-items: start;
}

.colonne-di-filtri label {
    display: block;
    font-family: "WotfardRegular", sans-serif;
    color: #444;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
}

.colonna-filtri > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 250px;
    margin-top: 15px;
    margin-bottom: 10px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    border: solid 2px var(--azzurro);
    border-radius: 3px;
    padding: 0;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: var(--azzurro);
}

input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    height: 19px;
    width: 19px;
    background-position: 10% 15%;
    background-size: 16px;
    background-repeat: no-repeat;
    background-image: url('img/check-bianco.svg');
}

input[type="checkbox"]:disabled {
    opacity: .4;
}

#home-sfondo-animato {
    position: absolute;
    left: 0;
    width: 100%;
    height: 770px;
    z-index: -1;
    object-fit: cover;
}

.box-servizio-aggiuntivo-modifica > div:last-child, .box-servizio-aggiuntivo > div:last-child {
    min-width: 50px;
    text-align: right;
}

.box-servizio-aggiuntivo-modifica p, .box-servizio-aggiuntivo p {
    font-size: .9rem;
    line-height: 1.3rem;
    margin-top: 5px;
}

.griglia-servizi-aggiuntivi-modifica {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    margin-top: 30px;
}

.griglia-servizi-aggiuntivi-modifica > * {
    width: 48%;
}

.box-servizio-aggiuntivo {
    margin-top: 10px;
    border-bottom: solid 1px #ccc;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.testo-centrato {
    text-align: center;
}

.ci-sei-quasi-illustrazione {
    display: block;
    margin: auto;
    height: 110px;
    margin-top: 80px;
}

.scelta-animale-sitting {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.scelta-animale-sitting .box-animale {
    width: calc((100% / 2) - 10px);
    min-width: 230px;
    margin-right: 10px;
}

.box-animale input {
    margin-right: 10px;
}

.carrello-prenotazione-inizia {
    background-color: var(--azzurrino);
    margin-top: 50px;
    padding-top: 40px;
    padding-bottom: 100px;
    margin-bottom: -230px;
}

.carrello-prenotazione-dettaglio {
    background-color: var(--azzurrino);
    margin-top: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.carrello-prenotazione-dettaglio hr {
    border: solid 1px black;
    margin-top: 20px;
}

.carrello-prenotazione-inizia .container > div, .carrello-prenotazione-dettaglio .container > div {
    margin-bottom: 10px;
}

.carrello-prenotazione-inizia .bottone-cafone {
    margin-top: 0;
}

.carrello-prenotazione-inizia .casella-totale {
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
    font-size: 1.2rem;
}

.carrello-prenotazione-inizia .iva-inclusa {
    font-size: .7rem;
    text-transform: uppercase;
}

.box-prenotazione {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--azzurrino);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.box-prenotazione > div:first-child {
    display: flex;
}

.box-prenotazione .chevron {
    height: 25px;
    margin-right: -10px;
}

.box-prenotazione .immagine-profilo {
    height: 50px;
    margin-right: 15px;
}

.box-prenotazione p {
    margin-top: 5px;
    font-size: .8rem;
    line-height: 1.2rem;
}

.richiesta-container {
    width: 100%;
    filter: drop-shadow(0px 20px 10px rgba(72, 69, 69, 0.03));
    background-color: #ffffff;
    border-radius: 15px;
    margin-bottom: 10px;
    margin-top: 15px;
    display: block;
    font-size: 0;
    height: 20px;
}


.richiesta-container .box-prenotazione {
    display: block;
    width: 100%;
}


.richiesta-container .stato-prenotazione-cerchio-arancio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    display: inline;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    background-color: #ea7931;
    transform: translate(50%, 50%);
}

.container {
    width: 95%;
    margin: 20px auto;
    /*filter: drop-shadow(0px 5px 5px rgba(72, 69, 69, 0.07));*/
}

button.accordion {
    width: 100%;
    background-color: #fff;
    border-radius: 15px 15px 0 0;
    border: none;
    outline: none;
    text-align: left;
    padding: 15px 20px;
    font-size: 18px;
    color: var(--azzurro);
    cursor: default;
    transition: border-radius .5s ease-in-out;
}

button.accordion.is-open {
    transition: none;
}

.accordion h1 {
    font-size: 15px;
    width: 200px;
    display: inline;
    vertical-align: bottom;

}

.accordion .stato-prenotazione-cerchio-verde {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #57e724;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 10px;
    /*display: block;*/
}

.accordion .stato-prenotazione-cerchio-arancio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f37646;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 10px;
    /*display: block;*/
}

button.accordion .chevron {
    width: 20px;
    height: 20px;
    background: url("/img/chevron-down.svg") no-repeat 98.5% center;
    display: block;
    float: right;
    padding-top: 5px;
    vertical-align: bottom;
}

button.accordion.is-open .chevron {
    transform: rotate(180deg);
}

button.accordion.is-open {
    border-radius: 15px 15px 0 0;
}

.accordion-content {
    background-color: white;
    padding: 0 2px;
    margin-bottom: 10px;
    height: auto;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
    font-size: 0;
    border-radius: 0 0 15px 15px;
}

.accordion-content div {
    width: 100%;
    margin: 5px auto;
    font-size: 0;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.accordion-content div:first-of-type {
    margin-top: 10px;
}

/*.accordion-content div:first-of-type{*/
/*    padding-top: 30px;*/
/*}*/

.accordion-content div .info-foto {
    display: inline-block;
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 20px;
    margin-bottom: 10px;
}

.accordion-content div .info-prenotazioni {
    display: inline-block;
    width: 80%;
    float: right;
    font-size: 14px;
    vertical-align: top;
    margin-right: 20px;
    position: relative;
}

.nome-sitter {
    font-weight: lighter;
    overflow: hidden;
    width: 80%;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
}

.info-prenotazioni .nome-sitter {
    font-weight: lighter;
}

.info-prenotazioni .numero-prenotazione {
    position: absolute;
    top: -13px;
    left: 0;
    font-size: 12px;
    font-weight: lighter;
    color: rgba(128, 128, 128, 0.51);
}

.accordion-content div .info-prenotazioni .label-stato-attesa-sitter {
    display: block;
    vertical-align: top;
    background-color: rgba(180, 179, 179, 0.18);
    max-width: 150px;
    text-align: center;
    font-size: 13px;
    font-weight: lighter;
    border-radius: 50px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    float: left;
}

.accordion-content div .info-prenotazioni .label-stato-azione-richiesta {
    display: block;
    vertical-align: top;
    background-color: rgba(180, 179, 179, 0.18);
    max-width: 150px;
    text-align: center;
    font-size: 13px;
    font-weight: lighter;
    border-radius: 50px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    float: left;
}

.accordion-content div .chat-notifiche-bubble {
    width: 18px;
    height: 18px;
    position: absolute;
    top: -10%;
    left: 11%;
    color: white;
    font-size: 6pt;
    text-align: center;
    line-height: 13px;
}

.info-prenotazioni .label-stato-confermata {
    display: block;
    vertical-align: top;
    background-color: rgba(140, 232, 140, 0.18);
    max-width: 150px;
    text-align: center;
    font-size: 13px;
    font-weight: lighter;
    border-radius: 50px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    float: left;
}

.info-prenotazioni .label-stato-annullata {
    display: block;
    vertical-align: top;
    background-color: rgba(229, 126, 165, 0.18);
    max-width: 150px;
    text-align: center;
    font-size: 13px;
    font-weight: lighter;
    border-radius: 50px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    float: left;
}


.label-stato-conferma {
}


.info-prenotazioni a {
    display: inline-block;
    vertical-align: bottom;
    float: right;
    font-size: 14px;
    horiz-align: right;
    color: var(--azzurro);
    text-transform: capitalize;
    font-weight: lighter;
    line-height: 50px;
}

.info-foto {
    width: 50px;
    height: 50px;
    margin: auto;
    float: left;
    border-radius: 50%;
    display: inline-block;
}


header .btn-prenotazioni {
    margin-right: 20px;
    text-align: center;
}

header .btn-prenotazioni img {
    height: 20px;
}

header .btn-prenotazioni label {
    font-size: .6rem;
    display: block;
}

.label-stato-prenotazione {
    display: inline-block;
    font-size: .9rem;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    border: solid 1px #999;
    color: #999;
    border-radius: 100px;
    margin-top: 10px;
}

.label-stato-prenotazione.confermata {
    color: #5fa15f;
    border-color: #5fa15f;
}

.label-stato-prenotazione.rifiutata {
    color: var(--magenta);
    border-color: var(--magenta);
}

.no-margin {
    margin: 0;
}

.prenotazione-apri-chat {
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
    background-color: var(--azzurrino);
    border-radius: 15px;
    padding: 12px;
    padding-left: 15px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.prenotazione-apri-chat img {
    height: 25px;
    margin-bottom: -4px;
}

.prenotazione-apri-chat .immagine-profilo {
    height: 40px;
    width: 40px;
    margin-right: 10px;
    margin-bottom: 0;
}

.prenotazione-apri-chat .bottone-cafone {
    margin: 0;
}

.chat-notifiche-bubble {
    position: absolute;
    margin-top: -47px;
    margin-left: 25px;
}

.chat-messaggi {
    transition: opacity 1s ease-in;
    opacity: 0;
    scroll-behavior: smooth;
    padding-bottom: 150px;
    z-index: 1;
}

.chat-messaggio {
    margin-left: 0;
    margin-right: 80px;
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 17px;
    border-radius: 20px;
    border-bottom-left-radius: 3px;
    background-color: #f1f1f1;
}

.chat-messaggio.mio {
    margin-left: 80px;
    margin-right: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 3px;
    background-color: var(--azzurrino);
}

.chat-messaggio.da-roofus {
    color: white;
    background-color: var(--azzurro);
}

.chat-messaggio.da-roofus > div:first-child {
    color: rgba(255, 255, 255, 0.7);
}

.chat-messaggio.da-roofus > div:first-child b {
    color: white;
}

.chat-messaggio > div:first-child {
    color: #999;
    font-size: .9rem;
}

.chat-messaggio > div:first-child b {
    color: black;
}

.chat-messaggio p {
    font-size: 1rem;
    line-height: 1.1rem;
    margin-top: 4px;
}

.chat-container-scrittura {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.chat-finta-textarea {
    border: solid 1px #ddd;
    border-radius: 10px;
    padding: 15px;
    padding-bottom: 0;
}

.chat-finta-textarea textarea {
    border: none;
    display: block;
    height: 70px;
    width: 100%;
    resize: none;
}

.chat-finta-textarea a {
    position: fixed;
    display: block;
    background-color: white;
    border-radius: 30px;
    bottom: 25px;
    right: 35px;
    padding: 10px;
    margin-top: -40px;
    margin-right: -5px;
    color: var(--azzurro);
    font-size: .8rem;
}

.chat-finta-textarea img {
    height: 20px;
    margin-bottom: -5px;
}

.max-width-chat {
    max-width: 550px;
}

.btn-vedi-pagina-pubblica {
    margin-top: 10px;
    margin-bottom: 20px;
}

.chat-torna-prenotazione {
    color: var(--azzurro);
    display: block;
    font-size: .8rem;
    margin-bottom: 10px;
    margin-top: -9px;
}

.chat-torna-prenotazione img {
    height: 17px;
    margin-bottom: -4px;
}

.btn-calendario {
    margin-top: 0;
}

.btn-calendario img {
    height: 17px;
    margin-right: 5px;
    margin-bottom: -2px;
}

.calendario-disponibilita-mese.spazia-in-mezzo {
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 1.2rem;
}

.calendario-disponibilita-mese img {
    height: 25px;
}

.home-come-funziona {
    background-color: var(--azzurro);
    margin-top: 80px;
    margin-bottom: 140px;
    padding-top: 70px;
    padding-bottom: 70px;
    color: white;
}

.home-come-funziona h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 30px;
    margin-top: 0;
}

.home-come-funziona .spazia-in-mezzo {
    align-items: start;
}

.box-come-funziona {
    width: 23%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-height: 320px;
}

.box-come-funziona .numero {
    display: flex;
    height: 50px;
    width: 50px;
    margin: auto;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--magenta);
    border: solid 4px white;
    margin-top: -40px;
    font-family: "WotfardBold", sans-serif;
}

.box-come-funziona .titoletto {
    color: var(--azzurro);
    text-align: center;
    font-size: 1.1rem;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}

.box-come-funziona img {
    height: 80px;
    display: block;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 20px;
}

.box-come-funziona p {
    color: #444;
    font-size: .9rem;
    line-height: 1.2rem;
    text-align: center;
}

.griglia-regioni {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.griglia-regioni a {
    display: block;
    width: 20%;
    padding-top: 10px;
    padding-bottom: 10px;
}

img.onboarding-completato {
    height: 200px;
    margin: auto;
    margin-top: 50px;
    display: block;
}

.metodo-di-pagamento img {
    height: 20px;
}

.orari-consegna-cane div {
    width: 48%;
}

.orari-consegna-cane select {
    margin-top: 5px;
}

.social img {
    height: 20px;
    margin-right: 10px;
    margin-top: 10px;
}

.aggiungi-animale-inizia-prenotazione div {
    width: 100%;
}

.aggiungi-animale-inizia-prenotazione select {
    background-color: white;
}

#chat-notifiche-bubble-container {
    margin-top: -42px;
    margin-left: 30px;
    position: absolute;
}

#chat-notifiche-bubble, .chat-notifiche-bubble {
    height: 19px;
    width: 19px;
    background-color: var(--magenta);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px white;
    border-radius: 50%;
    font-size: .5rem;
}

#growth-notifiche-bubble-container {
    margin-top: -42px;
    margin-left: 30px;
    position: absolute;
}

#growth-notifiche-bubble, .chat-notifiche-bubble {
    height: 19px;
    width: 19px;
    background-color: var(--magenta);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px white;
    border-radius: 50%;
    font-size: .7rem;
}

.box-prenotazione .chat-notifiche-bubble {
    height: 20px;
    width: 20px;
    font-size: .7rem;
    position: absolute;
    border-color: var(--azzurrino);
    margin-top: -50px;
    margin-left: 35px;
}

.box-totale-accreditare {
    margin-top: 40px;
    padding: 50px;
    text-align: center;
}

.box-totale-accreditare a {
    color: var(--azzurro);
    text-decoration: underline;
}

.box-totale-accreditare img {
    height: 22px;
    display: block;
    margin: auto;
    margin-bottom: 5px;
}

.box-totale-accreditare label {
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: .9rem;
}

.box-totale-accreditare .totale {
    font-size: 2rem;
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    margin-bottom: 30px;
}

.box-elenco-pagamenti-sitter {
    flex-direction: column;
}

.riga-pagamento-sitter {
    width: 100%;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    padding-top: 15px;
    padding-bottom: 15px;
}

.riga-pagamento-sitter:first-child {
    border-top: none;
}

.riga-pagamento-sitter:first-child {
    padding-top: 10px;
}

.riga-pagamento-sitter:last-child {
    padding-bottom: 10px;
}

.riga-pagamento-sitter p {
    margin-top: 5px;
}

.box-gia-accreditati {
    flex-direction: column;
    align-items: start;
    margin-top: 60px;
}

.box-gia-accreditati label {
    font-size: .9rem;
    font-family: "WotfardBold", sans-serif;
}

.box-gia-accreditati b {
    font-size: 1.4rem;
    font-family: "WotfardBold", sans-serif;
}

.nome-e-attivazione .switch {
    margin-left: 20px;
}

.container-carica-foto-pagina {
    flex-direction: column;
    align-items: start;
}

.griglia-foto-dog-hotel {
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr 1fr;
    margin-top: 50px;
}

.box-modifica-foto-dog-hotel .anteprima {
    width: 100%;
    height: auto;
    min-height: 100px;
    aspect-ratio: 1;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    margin-bottom: 10px;
}

.box-modifica-foto-dog-hotel a {
    text-decoration: none;
    color: var(--azzurro);
}

.box-modifica-foto-dog-hotel a:first-child {
    color: var(--magenta);
}

.link-partner-prenotazione {
    height: 14px;
    margin-left: 3px;
}

.box-accordion-ricevuta {
    margin-top: 30px;
    padding: 20px;
    padding-top: 13px;
    padding-bottom: 13px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.box-accordion-ricevuta .spazia-in-mezzo img, .box-animale-dettaglio-prenotazione .chevron {
    transition: transform .4s ease-in-out;
    height: 30px;
    transform: rotate(90deg);
    margin-bottom: -5px;
}

.box-accordion-ricevuta .spazia-in-mezzo img.aperto, .box-animale-dettaglio-prenotazione.aperto .chevron {
    transform: rotate(-90deg);
}

.contenuto-ricevuta {
    padding-top: 20px;
    color: #555;
    display: none;
}

.contenuto-ricevuta .spazia-in-mezzo {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: .9rem;
}

.contenuto-ricevuta .spazia-in-mezzo > div:last-child {
    width: 65px;
    text-align: right;
}

.contenuto-ricevuta hr {
    margin-top: 15px;
    margin-bottom: 15px;
    border: solid 1px #ddd;
}

.box-acquisto-servizio-aggiuntivo {
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    margin-bottom: 5px;
}

.box-acquisto-servizio-aggiuntivo b {
    display: block;
    font-size: 1.1rem;
    padding-bottom: 10px;
}

.box-acquisto-servizio-aggiuntivo .bottone-cafone {
    margin-top: 10px;
}

.pointer {
    cursor: pointer;
}

.diventa-dog-parent {
    background-color: transparent;
    border: solid 2px #ddd;
}

.diventa-dog-parent b {
    color: #666;
}

.diventa-dog-parent .chevron {
    opacity: 0;
}

.griglia-recensioni {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
}

.box-recensione {
    width: 45%;
    display: flex;
    justify-content: start;
    margin-top: 10px;
    margin-bottom: 30px;
}

.box-recensione > div:last-child {
    width: 100%;
}

.box-recensione .immagine-profilo {
    height: 50px;
    margin-right: 15px;
}

.box-recensione p {
    font-size: .9rem;
    margin-top: 7px;
}

.box-recensione .cinque-stelle {
    height: 15px;
}

.box-recensione .casella-stelline {
    color: #aaa;
    font-size: .9rem;
}

.box-recensione .casella-stelline img {
    height: 15px;
    margin-bottom: 0px;
    margin-left: 2px;
}

.spiegazione-prezzo {
    display: none;
    color: #666;
    padding: 10px;
    border-radius: 10px;
    margin-top: -5px;
    background-color: #f6f6f6;
    font-size: .9rem;
    margin-bottom: 30px;
    line-height: 1.2rem;

}

.avviso-in-chat {
    text-align: center;
    color: #bbb;
    width: 80%;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: .9rem;
}

.fancybox-overlay {
    z-index: 1000000 !important;
}

.torna-al-profilo {
    margin-top: 50px;
    margin-bottom: 30px;
    color: var(--azzurro);
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: .9rem;
}

.torna-al-profilo-inline {
    margin-top: 50px;
    margin-bottom: 30px;
    color: var(--azzurro);
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: .9rem;
}

.torna-al-profilo img {
    height: 20px;
    margin-right: 5px;
}

.non-sei-in-produzione {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100vw;
    height: 5px;
    justify-content: start;
    align-items: start;
    background-color: var(--magenta);
    box-shadow: 0 0 25px var(--magenta);
    font-size: .9rem;
    z-index: 99999;
    font-family: "WotfardBold", sans-serif;
}

.blue-neon{
    background-color: #4c4ce5;
    box-shadow: 0 0 25px #5555dc;
}

.griglia-blog {
    gap: 30px;
}

.box-articolo {
    background-color: #eee;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    min-height: 200px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-bottom: 60px;
}

.box-articolo .contenuto {
    background-color: white;
    border-radius: 15px;
    padding: 15px;
    padding-left: 20px;
    width: 85%;
    margin: auto;
    margin-bottom: -20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.box-articolo h2 {
    margin: 0;
    font-size: 1rem;
}

.box-articolo .categoria {
    font-size: .9rem;
    margin-top: 6px;
    color: var(--azzurro);
}

.corpo-articolo {
    margin-top: 40px;
}

.corpo-articolo p {
    line-height: 1.7rem;
    margin-top: 15px;
    margin-bottom: 15px;
}

.corpo-articolo img {
    display: block !important;
    margin: auto;
    height: auto !important;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
    max-width: 100%;
}

.corpo-articolo ul, .corpo-articolo ol {
    padding: 0;
    padding-inline-start: 40px;
}

.corpo-articolo a {
    color: var(--azzurro);
    text-underline: var(--azzurro);
    text-decoration: underline;
}

.copertina-articolo {
    margin-top: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.titolo-articolo {
    text-align: left;
    color: var(--azzurro);
    font-size: 1.4rem;
    padding: 0;
    padding-bottom: 20px;
}

.data-pubblicazione-articolo {
    font-size: .9rem;
    opacity: .7;
}

.chip-categoria-articolo {
    color: var(--azzurro);
    border: solid 1px var(--azzurro);
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 40px;
    text-decoration: none !important;
}

.categorie-del-blog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    margin-bottom: 30px;
    margin-top: -20px;
}

.categorie-del-blog .chip-categoria-articolo {
    margin: 10px;
}

.navigazione-blog {
    margin-top: 30px;
}

.navigazione-blog a {
    color: var(--azzurro);
}

.box-lascia-recensione {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 20px;
}

.box-lascia-recensione h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--azzurro);
}

.box-lascia-recensione textarea {
    margin-top: 10px;
    margin-bottom: 15px;
    resize: none;
}

.recensiona-stelline {
    display: flex;
    justify-content: center;
    align-items: center;
}

.recensiona-stelline img {
    height: 22px;
    display: block;
    margin: 3px;
    opacity: .3;
    cursor: pointer;
}

.recensiona-stelline img:hover, .recensiona-stelline img.accesa {
    opacity: 1;
}

.box-lascia-recensione button {
    margin-top: 15px;
}

.box-recensione .cancella {
    color: #888;
    margin-top: 5px;
    text-transform: uppercase;
    font-size: .7rem;
}

.home-sezione-cucce {
    background-color: var(--azzurrino);
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 90px;
    margin-top: 40px;
}

.home-sezione-cucce .partner-cucce {
    width: 100%;
    margin: auto;
    padding-bottom: 50px;
    font-size: 0;
}

.home-sezione-cucce .partner-cucce img {
    width: 160px;
    display: inline-block;
    margin: 10px 30px;
    vertical-align: middle;
}

.home-sezione-cucce .partner-cucce img:first-of-type {
    margin-left: 0;
}

.home-sezione-cucce .partner-cucce img:nth-of-type(2) {
    width: 100px;
}

.home-sezione-cucce .immagine-cuccia {
    height: 320px;
}

.home-sezione-cucce .container > div:first-child {
    max-width: 50%;
}

.diventa-sitter-footer {
    color: white;
    box-shadow: none;
    border: solid 2px white;
    background-color: transparent;
    margin-top: 0;
    margin-bottom: 20px;
    width: 80%;
}

.bottone-cafone.scopri-cucce-smart {
    display: inline-block;
    max-width: 170px;
}

.contatta-il-sitter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--azzurro);
    margin-top: 40px;
}

.contatta-il-sitter img {
    height: 15px;
    margin-right: 10px;
    margin-bottom: -2px;
}

.container-popup-contatto-sitter {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.box-contatto-sitter {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    min-height: 100px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.box-contatto-sitter .chiudi {
    height: 20px;
}

.box-contatto-sitter .spazia-in-mezzo {
    align-items: flex-start;
}

.box-contatto-sitter p {
    margin-top: 20px;
    margin-bottom: 20px;
}

.spiegazioni-usi-carte {
    padding-left: 20px;
    padding-bottom: 20px;
    line-height: 1.4rem;
}

.spiegazioni-usi-carte li {
    padding-top: 10px;
    font-size: .9rem;
}

.meta-scheda-sitter {
    margin-top: 10px;
}

.posti-disponibili {
    text-align: center;
    margin-top: 10px;
    font-size: .9rem;
}

.riga-accetta-registrazione {
    cursor: pointer;
    text-align: left;
    font-size: .8rem;
    margin-top: 20px;
}

.riga-accetta-registrazione input {
    margin-right: 10px;
}

.riga-accetta-registrazione label {
    font-family: "WotfardRegular", sans-serif;
    margin: 0;
    padding: 0;
    color: #444;
}

.riga-accetta-registrazione a {
    color: var(--azzurro);
    text-decoration: underline;
}

.box-dog-hotel-etichette {
    display: flex;
}

.box-dog-hotel-riga-servizio {
    font-size: .9rem;
    margin-bottom: 5px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.box-dog-hotel-riga-servizio > div:first-child {
    width: 22px;
}

.box-dog-hotel-riga-servizio img {
    height: 16px;
    max-width: 14px;
}

.form .prenotazione-flex-label {
    display: block;
    margin-top: 40px;
    margin-bottom: 5px;
    font-size: .9rem;
    font-family: "WotfardRegular", sans-serif;
    color: inherit;
}

.prenotazione-flex-textarea-obbligatoria {
    display: block;
    margin-top: 40px;
    font-size: .9rem;
    font-family: "WotfardRegular", sans-serif;
    color: inherit;
}

.prenotazione-flex-textarea-obbligatoria textarea {
    width: 100%;
    resize: none;
    font-size: 1rem;
}


.prenotazione-flex-griglia-servizi {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

.prenotazione-flex-griglia-servizi::-webkit-scrollbar {
    display: none;
}

.prenotazione-flex-griglia-servizi.nascondi {
    display: none;
}

.prenotazione-flex-servizio {
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
    padding: 30px;
    cursor: pointer;
    border: solid 1px white;
}

.prenotazione-flex-servizio.disabilitato {
    opacity: .7;
    box-shadow: none;
    background-color: #eee;
    color: #aaa;
    cursor: not-allowed;
}

.prenotazione-flex-servizio.selezionato {
    border-color: var(--magenta);
    color: var(--magenta);
    box-shadow: 0 5px 15px rgba(249, 58, 120, 0.07);
}

.prenotazione-flex-servizio img {
    display: none;
    height: 20px;
    margin-bottom: 12px;
}

.prenotazione-flex-servizio:not(.selezionato):not(.disabilitato) .azzurra {
    display: block;
}

.prenotazione-flex-servizio.disabilitato .grigia {
    display: block;
}

.prenotazione-flex-servizio.selezionato .magenta {
    display: block;
}

.avviso-contatta-altri-sitter {
    background-color: #FEEDF3;
    padding: 30px;
    border-radius: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.avviso-contatta-altri-sitter h3 {
    color: var(--magenta);
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.scheda-prenotazioneflex {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding-top: 60px;
}

.scheda-prenotazioneflex .dati-main-container {
    width: 420px;
    max-width: 420px;
    min-width: 420px;
    background-color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 35px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    z-index: 3;
}

.scheda-prenotazioneflex .chat-main-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
}


.dati-main-container .torna-al-profilo {
    margin-top: 30px;
}

.dati-main-container .box-azzurro {
    height: 300px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.numero-ingrandito {
    margin-top: 5px;
    font-size: 1.3rem;
}

.dati-main-container .box-azzurro > div {
    width: 100%;
}

.dati-main-container .box-azzurro .dividi-equamente {
    margin-top: 10px;
    margin-bottom: 5px;
}

.dati-main-container .aggiorna-prezzo {
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    text-decoration: none;
    padding-left: 10px;
}

.dati-main-container .bottone-cafone {
    margin: 0;
    margin-top: 10px;
}

.box-stato-prenotazione {
    display: flex;
    justify-content: start;
    border-radius: 16px;
    background-color: #eee;
    padding: 17px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.box-stato-prenotazione .bollino {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: #ddd;
    margin-right: 10px;
}

.box-stato-prenotazione.arancio {
    background-color: #FCF1EA;
}

.box-stato-prenotazione .bollino.arancio {
    background-color: #ED9052;
}

.box-stato-prenotazione.verde {
    background-color: #ECFBEB;
}

.box-stato-prenotazione .bollino.verde {
    background-color: #68E55A;
}

.box-stato-prenotazione.rosso {
    background-color: rgba(249, 58, 120, 0.1);
}

.box-stato-prenotazione .bollino.rosso {
    background-color: var(--magenta);
}

.chat-main-container .chat-messaggi {
    overflow-y: scroll;
    padding: 30px;
    padding-top: 100px;
    height: 100%;
}

.chat-main-container .chat-container-scrittura {
    position: relative;
    padding: 30px;
    padding-top: 0;
    box-shadow: none;
    background-color: transparent;
    z-index: 2;
}

.chat-main-container .chat-finta-textarea {
    background-color: white;
}

.chat-main-container .chat-finta-textarea a {
    bottom: 35px;
    right: 45px;
}

.chat-main-container .chat-messaggio {
    margin-right: 30%;
}

.chat-main-container .chat-messaggio.mio {
    margin-right: 0;
    margin-left: 30%;
}

.chat-main-container .chat-intestazione {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    height: 110px;
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 1.2rem;
    background: linear-gradient(to bottom, #fff, #fff, #fff, rgba(255, 255, 255, 0));
    z-index: 2;
}

.chat-main-container .chat-intestazione .secondario {
    font-family: "WotfardRegular", sans-serif;
    font-size: .9rem;
    color: black;
    opacity: .3;
}


.chat-main-container .chat-intestazione img {
    height: 50px;
    border-radius: 50%;
    margin-top: 20px;
    margin-left: -20px;
}

.scheda-prenotazioneflex .prenotazione-flex-label {
    margin-top: 15px;
}

.scheda-prenotazioneflex h1.scheda-dog-hotel {
    margin-top: 25px;
}

.scheda-prenotazioneflex #data-range {
    margin-top: 10px;
}

.scheda-prenotazioneflex #ora-consegna {
    width: 95%;
}

.container-pagamento-prenotazione-scheda {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;
}

.container-aggiunta-dati-fatturazione {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;
}

.box-pagamento-prenotazione-scheda {
    display: none;
    background-color: white;
    width: 80%;
    max-width: 600px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
}

.box-aggiunta-dati-fatturazione {
    display: none;
    background-color: white;
    width: 80%;
    max-width: 600px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
}

.box-pagamento-prenotazione-scheda h1, .box-aggiunta-dati-fatturazione h1 {
    color: var(--azzurro);
    font-size: 1.3rem;
    padding-bottom: 20px;
    text-align: left;
}

.prenotazione-flex-chip-pagamento {
    width: fit-content;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 30px;
    font-size: .9rem;
    background-color: #bbb;
    color: white;
    margin-bottom: 20px;
    margin-top: 3px;
}

.prenotazione-flex-chip-pagamento.verde {
    background-color: var(--azzurro);
}

.prenotazione-flex-chip-pagamento.arancio {
    background-color: #F1AB4A;
}

.prenotazione-flex-chip-pagamento.magenta {
    background-color: var(--magenta);
    border-radius: 10px;
}

.chat-intestazione .indietro-mobile {
    display: none;
}

.min-fit-content {
    min-width: fit-content;
    padding-left: 10px;
}

.dati-main-container .bottone-cafone.magenta {
    margin-bottom: 15px;
}

.dati-main-container .box-azzurro.box-animale-dettaglio-prenotazione {
    height: auto;
    padding: 20px;
}

.link-per-admin {
    color: var(--magenta);
    padding: 6px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    border: solid 1px var(--magenta);
    margin-top: 10px;
    display: block;
    width: fit-content;
}

.error-container {
    display: block;
    width: 100%;
    height: 50%;
}

.error-container div .bottone-cafone {
    margin: 10px auto;
    width: 200px;
    text-align: center
}


.container-ambassador {
    width: 95%;
    margin: 20px auto;
}

.container-molto-ristretto {
    width: 50%;
    margin: auto;
}

.container-ambassador a {
    color: var(--azzurro);
    text-decoration: underline;
}

.banner-ambassador {
    background-color: var(--azzurrino);
    width: 100%;
    margin: 0;
    height: auto;
    padding: 10px;
}

.sezioni-banner-ambassador {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: auto;
    width: 50%;
}

.sezioni-banner-ambassador div {
    width: 100%;
    margin: auto;
}

.sezioni-banner-ambassador div img {
    display: block;
    margin: auto;
    width: 130px;

}

.sezioni-banner-ambassador div p {
    text-align: center;
}

.sezione-magentina {
    display: block;
    border-radius: 10px;
    background-color: var(--magentino);
    width: 80%;
    padding: 10px 0;
    box-shadow: none;
    margin: auto;
}

.sezione-magentina p {
    color: var(--magenta);
    font-size: .9rem;
    text-align: center;
}

.container-checkbox {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    text-align: center;
    font-size: 0;

}

.container-checkbox p {
    font-size: 1.1rem;
}

.container-checkbox .switch-text {
    display: inline-block;
    height: 50px;
    padding-top: 8px;
    margin-right: 5px;
    vertical-align: top;
    font-size: .9rem;

}


.container-checkbox input.apple-switch {
    display: inline-block;
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 46px;
    height: 23px;
    margin-top: 10px;
    background-color: white;
    border: 4px solid rgba(155, 153, 153, 0.30);
    /*stroke: rgba(155, 153, 153, 0.30) 10px;*/
    /*stroke-width: 15px;*/
    /*border: none;*/
    /*outline-style: solid;*/
    /*outline-width: 5px;*/
    /*outline-color: rgba(155, 153, 153, 0.30);*/
    border-radius: 50px;
    box-shadow: inset -23px 0 0 0 rgba(155, 153, 153, 0.30);
    transition: all .12s linear;
}

.container-checkbox input.apple-switch:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    padding: 5px;
    background: transparent;
    width: 8px;
    height: 8px;
    /*border-radius: 50%;*/
}

.container-checkbox input.apple-switch:checked {
    box-shadow: inset 23px 0 0 0 var(--azzurro);
    border-color: var(--azzurro);
}

.container-checkbox input.apple-switch:checked:after {
    left: 20px;
}

.tipologia-animale.affianca {
    margin: 10px 0 20px;
    gap: 20px;
}

.prenotazione-inizia .tipologia-animale.affianca {
    justify-content: start;
}

.prenotazione-inizia .tipologia-animale .smartradio {
    padding-left: 35px;
    padding-right: 25px;
}

.prenotazione-inizia .tipologia-radio-wrapper {
    width: unset;
}

.tipologia-animale .smartradio:before {
    margin-left: 10px;
}

.tipologia-animale .smartradio:checked {
    background-color: transparent;
    border-color: var(--azzurro);
}

.tipologia-animale .smartradio:checked:before {
    color: var(--azzurro);
}

.tipologia-animale .smartradio:checked:after {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translate(-50%, -5%);
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    background-color: var(--magenta);
    border-radius: 50%;
}

.tipologia-radio-wrapper {
    position: relative;
    width: 100%;
}

.tipologia-radio-wrapper .radio {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--azzurro);
    border-radius: 50%;
    left: 25px;
    top: 50%;
    transform: translate(-50%, -25%);
}

/*.tipologia-radio-wrapper .radio:after {*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    content: "";*/
/*    width: 0.7rem;*/
/*    height: 0.7rem;*/
/*    background-color: var(--azzurro);*/
/*    border-radius: 50%;*/
/*}*/

/*INIZIO STATO DETTAGLI RICHIESTA*/


.frecce-stato {
    width: 102%;
    list-style: none;
    height: 45px;
    /*padding: 1px;*/
    margin: 10px auto;
    /*display: flex;*/
    /*flex-direction: row;*/
}

.freccia-stato {
    font-size: .7rem;
    color: #444;
    width: 32%;
    /*margin: 0.5%;*/
    height: 41px;
    text-align: center;
    border-radius: 5px;
    padding: 3px;
    /*float: left;*/
    position: relative;
    display: inline-flex;
    display: -webkit-box;
    display: -webkit-inline-flex;
    display: -ms-flexbox;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}


.freccia-stato img{
    width: 100%;
    height: 120%;
}

.freccia-stato p{
    width: 50%;
    height: 70%;
    line-height: 13px;
    position: absolute;
    top:55%;
    left:50%;
    transform: translate(-50%,-50%);
    margin: auto;
    z-index: 9;


}


.freccia-stato:nth-of-type(2) p{
    width: 70%;
    left: 50%;
}

.freccia-stato:nth-of-type(3) p{
    width: 70%;
}

.freccia-stato.testo-più-largo p{
    width: 80%;
}

.freccia-stato.testo-largo p{
    width: 85%;
}



/*.freccia-stato:first-of-type{*/
/*    line-height: 33px;*/
/*    text-align: center;*/
/*    background-size: 100% 41px;*/
/*    background-repeat: no-repeat;*/
/*    background-image: url("assets-roofus-nuovi/s1a.svg");*/
/*    background-position: left;*/
/*}*/

/*.freccia-stato:first-of-type.disattivato{*/
/*    background-image: url("assets-roofus-nuovi/s2a.svg");*/
/*}*/

/*.freccia-stato:nth-of-type(2){*/
/*    line-height: 33px;*/
/*    text-align: center;*/
/*    background-size: 100% 41px;*/
/*    background-repeat: no-repeat;*/
/*    background-image: url("assets-roofus-nuovi/s3b.svg");*/
/*    background-position: center;*/
/*}*/

/*.freccia-stato:nth-of-type(2).disattivato{*/
/*    background-image: url("assets-roofus-nuovi/s1b.svg");*/
/*}*/

/*.freccia-stato:nth-of-type(2).fatto{*/
/*    background-image: url("assets-roofus-nuovi/s3b.svg");*/
/*}*/

/*.freccia-stato:nth-of-type(2).attivato{*/
/*    background-image: url("assets-roofus-nuovi/s2b.svg");*/
/*}*/

/*.freccia-stato:nth-of-type(3){*/
/*    width: 100px;*/
/*    height: 40px;*/
/*    padding-top: 10px;*/
/*    line-height: 10px;*/
/*    text-align: center;*/
/*    background-size: 100% 41px;*/
/*    background-repeat: no-repeat;*/
/*    background-image: url("assets-roofus-nuovi/s3c.svg");*/
/*    background-position: right;*/
/*}*/

/*.freccia-stato:nth-of-type(3).disattivato {*/
/*    background-image: url("assets-roofus-nuovi/s1c.svg");*/
/*}*/

.testo-piccolo{
    font-size: .8rem;
}

.apri-link{
    width: 18px;
    height: 18px;
    display: inline;
    vertical-align: bottom;
}

.separa-scheda{
    color: rgba(43, 43, 43, 0.03);
    background-color: rgba(43, 43, 43, 0.03);
    border-radius: 2px;
    display: block;
    border: none;
    width: 100%;
    margin: 10px auto;
    min-height: 2px;
}


.torna-al-profilo-affiancato{
    display: inline-block;
    margin-bottom: 5px;
}

.torna-al-profilo-affiancato:first-of-type{
    text-align: left;
    width: 10%;
    height: 20px;
    vertical-align: top;
    position: relative;
}

.torna-al-profilo-affiancato img{
    margin-bottom: 20px;
    position: absolute;
    top: 25px;
    width: 90%;
}

.torna-al-profilo-affiancato:last-child{
    text-align: right;
    width: 90%;
}



.scheda-scritte-affiancate{
    width: 49%;
    display: inline-block;
}

.scheda-scritte-affiancate:first-of-type{
    float: left;
    text-align: left;
}

.scheda-scritte-affiancate:last-child{
    float: right;
    text-align: right;
}

.contain-centrato-block{
    text-align: center;
    width: 100%;
    margin: 20px auto;
    font-size: .9rem;
    font-weight: 800;

}

.contain-centrato-ristretto-block {
    text-align: center;
    width: 80%;
    margin: 20px auto;
    font-size: .9rem;
    font-weight: 800;
}


.contain-centrato{
    text-align: center;
    width: 80%;
    margin: 0 auto;
    font-size: .9rem;
    font-weight: 800;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%,0);
}

.contain-come-funziona{
    position: relative;
    padding: 20px;
    width: 100%;
    margin: 10px auto;
    font-size: .9rem;
    background-color: white;
    border-radius: 20px;
    box-shadow: rgba(43, 43, 43, 0.44) 1px 1px 20px 1000px;

}
.close-span{
    position: absolute;
    top: 35px;
    right: 20px;
    font-weight: lighter;
    font-size: 20px;
    color: var(--azzurro);
    cursor: pointer;
}

.close-span img{
    width: 20px;
    height: 20px;
    display: block;
}

.close-span-three{
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: lighter;
    font-size: 20px;
    color: var(--azzurro);
    cursor: pointer;
}

.close-span-three img{
    width: 20px;
    height: 20px;
    display: block;
}


.close-span-two{
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: lighter;
    font-size: 20px;
    color: var(--azzurro);
    cursor: pointer;
}

.close-span-two img{
    width: 20px;
    height: 20px;
    display: block;
}



.cane-triste{
    width: 30%;
    display: block;
    margin: auto;
}

.immagine-sx{
    width: 20%;
    display: inline;
}

.centrata{
    display: block;
    margin: 10px auto;
}


.spazio-sopra{
    margin-top: 36%;
}

.spazio-sopra-poco{
    margin-top: 12%;
}

.tuoi-cani{
    border-radius: 10px;
    background-color: var(--azzurrino);
    width: 100%;
    margin: 30px auto;
    height:60px;
}


.tuoi-cani .tuoi-cani-sx{
    width: 20%;
    display: inline;
    height: 60px;
    float: left;
}

.tuoi-cani .tuoi-cani-dx{
    width: 80%;
    display: inline;
    height: 60px;
    float: right;
    text-align: left;
}

.tuoi-cani-dx h2, .tuoi-cani-dx p{
    display: block;
    width: 100px;
    margin-top: 2px;
}

.tuoi-cani-dx p{
    font-size: .9rem;
}

.animale-scheda{
    width: 50px;
    border-radius: 50%;
    margin: 5px;
}

.bannerino-grigio{
    margin-top: 15px;
    text-transform: initial;
    font-size: .8rem;
    padding: 20px 5px;
    text-align: center;
    background-color: rgba(128, 128, 128, 0.19);
    border-radius: 10px;
}

.bannerino-grigio-conferma{
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
    text-transform: initial;
    font-size: .8rem;
    padding: 5px;
    background-color: rgba(128, 128, 128, 0.19);
    border-radius: 10px;
    height: 80px;
}

.bannerino-grigio-conferma .col-bannerino{
    width: 45.5%!important;
    height: 100%;
    display: inline-block;
    position: relative;
}

.col-bannerino span{
    display: block;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 10px;
}

.col-bannerino:first-of-type{
    float: left;
    margin-left: 15px;
    font-size: .7rem;
}
.col-bannerino:last-of-type{
    float: right;
}

.testo-container .icona-bidone{
 display: inline-block;
    vertical-align: bottom;
}

.label-conferma-flex{
    background-color: rgba(138, 231, 172, 0.37);
    border-radius: 30px;
    max-width: 280px;
    height: 30px;
    font-size: .9rem;
    text-align: center;
    display: block;
    line-height: 30px;
    margin: 10px 0;
}

.come-funziona-modal{
    /* Hidden by default */
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    height: 0;
    width: 100vw;
    z-index: 9999999; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background: transparent;
    transition: all .4s ease-in-out;
}

#aggiungi-carta {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;
}

#info-cancellazione, #costo-cancellazione {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;
}

#info-cancellazione .titolo-wizard {
    margin-top: 20px;
    font-size: 1.8rem;
}

#info-cancellazione .sottotitolo {
    margin: 10px 0 30px;
    font-family: "WotfardBold", sans-serif;
    color: darkgray;
    font-size: 1.1rem;
}

#info-cancellazione li {
    list-style: none;
    margin-bottom: 15px;
}

#info-cancellazione li span {
    font-family: "WotfardBold", sans-serif;
}

.come-funziona-modal-content{
    background:transparent;
    margin: auto;
    width: 100%;
    height: 100%;
}

.come-funziona-id{}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.immagini-inline-container{
    display: block;
    width: 70%;
    margin: auto;
    font-size: 0;
}

.immagini-inline-container .box{
    width: 20%;
    display: inline-block;
    vertical-align: top;
    margin: 6%;
}

.immagini-inline-container .box img{
    width: 50%;
    margin: auto;
    display: block;
    box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -webkit-box-shadow: none;
}

.immagini-inline-container .box p{
    font-size: .7rem;
    width: 100%;
    text-align: center;
    line-height: .76rem;
    margin-top:2px;
}


.motivazione-container{
    background-color: var(--azzurrino);
    max-width: 500px;
    min-width: 500px;
    padding: 70px 30px;
    height: 80vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 20px;
    box-shadow: rgba(43, 43, 43, 0.44) 1px 1px 20px 1000px;
}

.motivazione-container h1{
    font-size: 17pt;
    line-height: 20pt;
    text-align: center;
}

/* SELECT MOTIVAZIONI
 */

.select-cancellazione {
    position: relative;
    /*background: transparent;*/
    border-radius: 15px;
    border: 1px solid var(--azzurro);
    color: black;
    width: 100%;
    height: 46px;
    line-height: 20px;
    padding-left: 14px;
    background-color: var(--azzurrino);
    background-image: url('assets-roofus-nuovi/chevron.svg');
    background-position: 95% center;
    background-repeat: no-repeat;
    background-size: initial;
}

.select-cancellazione .chevron{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(-50%,-15px);
}

.text-area-modal{
    width: 100%;
    background-color: white;
    border-radius:15px;
    border: 1px solid var(--azzurro);
    color: black;
    padding-top: 12px;
    padding-left: 10px;
    height: 100px;
    resize: none;
}


.dettagli-contatti-modal{
    display: block;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    overflow: auto;
    background: transparent;
    transition: all .3s linear;
}

.dettagli-contatti-modal-content{
    background:transparent;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

.contain-dettagli-contatti{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    width: 70%;
    margin: 20px auto;
    background-color: white;
    border-radius: 20px;
    font-size: .9rem;
    box-shadow: rgba(43, 43, 43, 0.44) 1px 1px 20px 1000px;
}

.contain-dettagli-contatti div{
    display: block;
    margin: 5px;
    width: 100%;
}

/*.contain-dettagli-contatti .close-span-block img{*/
/*    float: right;*/
/*    width: 25px;*/
/*    margin-bottom: 20px;*/
/*}*/

.contain-dettagli-contatti div img{
    display: block;
    width: 30px;
}


.contain-dettagli-contatti p{
    text-align: left;
    width: 100%;
    margin: 10px;
    line-height: 1rem;
    font-size: .9rem;
}

.immagine-testo-affiancato{
    display: block;
    width: 100%;
    padding: 5px;
    font-size: 0;
}

.immagine-testo-affiancato img{
    display: inline-block;
    width: 25px;
    margin: 8px;
    vertical-align: top;
}

.immagine-testo-affiancato b{
    font-size: 12pt;
    display: inline-block;
    width: 85%;
    margin: 2px;
    vertical-align: top;
    cursor: pointer;
    line-height: 16pt;
}

.contatta-popup {
    display: none;
    width: 500px;
    max-width: 90%;
    box-shadow: rgba(43, 43, 43, 0.44) 1px 1px 20px 1000px;
    padding: 30px 25px;
    margin: 0 auto;
    background-color: white;
    position: fixed;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
}

.contatta-popup-chiudi:hover {
    filter: brightness(70%);
}

.contatta-popup-chiudi {
    position: absolute;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 100;
    right: 30px;
    top: 24px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: #a4a4a4;
}

.contatta-popup-titolo {
    font-family: "WotfardBold", sans-serif;
    font-size: 1.2rem;
    color: var(--azzurro);
    margin-bottom: 30px;
}

.button-copy-text-clipboard {
    background-color: transparent;
    border: none;
}

.button-copy-text-clipboard:hover {
    filter: brightness(60%);
}

.contatta-popup-dato {
    margin-bottom: 20px;
}

.contatta-popup-email {
    margin-bottom: 50px;
}

.container-popup {
    width: 30%;
    margin: 100px auto;
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: rgba(43, 43, 43, 0.44) 1px 1px 20px 1000px;
    position: relative;
}

.full-popup{
    padding: 40px;
    top: 30px;
    width: 100%;
    min-height: 100%;
    margin-top: 30px;
    background-color: white;
    box-shadow: rgba(43, 43, 43, 0.44) 1px 1px 20px 1000px;
    position: relative;
}
.full-popup > .bottone-cafone{
    width: 30%;
    margin: auto;
}

/* Bacheca Annunci */
.card-goto-bacheca {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    gap: 15px;
    border-radius: 15px;
    box-shadow: var(--box-shadow-cards);
    margin-bottom: 50px;
    margin-top: 60px;
}

.link-classic-magenta {
    color: var(--magenta);
    text-decoration: underline;
    font-size: 0.9rem;
}

.link-classic-magenta.testo-normale {
    font-size: 1rem;
}

.link-classic-magenta:hover {
    filter: brightness(80%);
}

.card-miei-annunci {
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--box-shadow-cards);
    margin-bottom: 50px;
    margin-top: 20px;
}

.al-mese {
    font-size: 0.9rem;
    color: black;
    font-family: "WotfardRegular", sans-serif;
}

.card-miei-annunci-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-goto-bacheca .titolo-wizard, .card-miei-annunci .titolo-wizard {
    margin-bottom: 10px;
}

.card-goto-bacheca .bottone-cafone, .card-miei-annunci .bottone-cafone {
    flex-basis: 20%;
    margin: 0;
}

.new-chip {
    display: inline-block;
    font-size: 0.8rem;
    padding: 5px;
    margin-left: 10px;
    margin-bottom: 15px;
    border-radius: 15px;
    color: white;
    background-color: var(--magenta);
    text-transform: uppercase;
}

.in-evidenza-chip {
    display: inline-block;
    font-size: 0.9rem;
    padding: 5px 10px;
    margin-top: 15px;
    border-radius: 15px;
    color: white;
    background-color: var(--magenta);
    text-transform: uppercase;
}

.in-evidenza-chip.gray {
    background-color: lightgray;
    color: black;
}

.bacheca-chip {
    display: flex;
    align-items: center;
    background-color: rgb(252, 115, 64);
    color: white;
    padding: 20px;
    margin-top: 80px;
    margin-left: 0;
    text-transform: unset;
    font-size: 0.9rem;
}

.bacheca-chip p * {
    vertical-align: middle;
}

.annunci {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 30px;
}

.header-bacheca {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
}

.header-bacheca-titolo {
    text-align: left;
    padding-bottom: 20px;
    margin: 0;
}

.header-bacheca-raggio-wrapper {
    display: flex;
    gap: 30px;
    align-items: center;
}

.header-bacheca-raggio {
    display: flex;
    gap: 15px;
    flex-basis: 60%;
}

.loading-bacheca-wrapper {
    margin-top: 100px;
}

.no-annunci-bacheca-wrapper {
    display: none;
    text-align: center;
    padding-top: 100px;
}

.no-annunci-bacheca-img {
    width: 200px;
}

.button-raggio-annunci {
    padding: 12px 20px;
    border: 1px solid var(--azzurro);
    border-radius: 15px;
    color: var(--azzurro);
    background-color: transparent;
    cursor: pointer;
}

.button-raggio-annunci-active {
    border: none;
    color: white;
    background-color: var(--magenta);
}

.card-annuncio {
    flex-basis: 48%;
    padding: 20px;
    border-radius: 15px;
    box-shadow: var(--box-shadow-cards);
}

.card-annuncio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.annuncio-cliente {
    display: flex;
}

.annuncio-cliente-info {
    padding: 5px 10px;
}

.annuncio-cliente-nome {
    font-family: "WotfardBold", sans-serif;
    margin-bottom: 4px;
}

.annuncio-image {
    height: 50px;
    border-radius: 50%;
}

.card-annuncio .bottone-cafone {
    font-size: 0.8rem;
    margin: 0;
}

.annuncio-boost-buttons {
    display: flex;
    align-items: end;
    gap: 10px;
}

.boost-card-annuncio-wrapper {
    padding: 20px;
    border-radius: 15px;
    box-shadow: var(--box-shadow-cards);
    background-color: white;
    rotate: -5deg;
    transform: scale(90%);
}

.boost-card-annuncio {
    display: flex;
    align-items: start;
    gap: 20px;
}

.boost-card-annuncio-title {
    color: var(--magenta);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.boost-card-annuncio .annuncio-cliente {
    margin-bottom: 20px;
}

.boost-card-annuncio-buttons-title {
    font-family: "WotfardBold", sans-serif;
    color: var(--azzurro);
    font-size: 0.8rem;
}

.boost-card-annuncio .card-annuncio-buttons {
    flex-direction: column;
}

.boost-card-annuncio-btn {
    background-color: var(--azzurro);
    padding: 15px;
    border-radius: 15px;
}

.annuncio-cliente-dove {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.annuncio-cliente-localita {
    font-size: 0.8rem;
}

.annuncio-cliente-chip {
    padding: 3px 10px;
    border-radius: 100px;
    background-color: rgb(232, 232, 232);
    font-size: 0.7rem;
}

.card-annuncio-body-titoli {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.card-annuncio-body-titoli span {
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 0.8rem;
}

.card-annuncio-body-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-annuncio-body-sitting {
    margin-bottom: 8px;
}

.card-annuncio-body-prezzo {
    font-family: "WotfardBold", sans-serif;
    font-size: 1.3rem;
}

.dettagli-annuncio {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 50px;
    padding: 50px;
    border-radius: 15px;
    box-shadow: var(--box-shadow-cards);
}

.dettagli-annuncio-info .annuncio-cliente {
    margin-bottom: 30px;
}

.annuncio-info-dettaglio {
    margin-bottom: 30px;
}

.annuncio-info-dettaglio-titolo {
    margin-bottom: 10px;
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 0.8rem;
}

.annuncio-info-dettaglio-testo {
    margin-bottom: 8px;
}

.annuncio-info-dettaglio-messaggio {
    line-height: 1.8rem;
}

.annuncio-cani {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.btn-card-cane {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 20px;
    border: 1px solid var(--azzurro);
    background-color: transparent;
}

.annuncio-card-cane-first {
    display: flex;
    align-items: center;
}

.annuncio-cane-nome {
    font-family: "WotfardBold", sans-serif;
    margin-bottom: 4px;
}

.annuncio-cane-image {
    height: 35px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.annuncio-cane-info {
    padding: 5px 15px;
}

.annuncio-cane-chevron {
    color: var(--azzurro);
}

.dettagli-annuncio-servizi {
    flex-basis: 42%;
    flex-shrink: 0;
    padding: 40px;
    border-radius: 20px;
    background-color: var(--azzurrino);
}

.annuncio-servizi-titolo {
    margin-bottom: 25px;
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 1.5rem;
}

.annuncio-servizi-minititolo {
    margin-bottom: 10px;
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 0.8rem;
}

.annuncio-servizi-prezzo {
    margin-bottom: 25px;
    font-family: "WotfardBold", sans-serif;
    font-size: 1.3rem;
}

.annuncio-servizi-nb {
    color: rgb(169, 169, 169);
    font-size: 0.7rem;
    line-height: 1.2rem;
}

.bottone-dettagli-annuncio-chiama {
    margin-top: 25px;
}

.header-dettagli-annuncio {
    margin-top: 100px;
    margin-bottom: 20px;
}

.button-indietro {
    display: inline-block;
    color: var(--azzurro);
    margin-bottom: 10px;
}

.button-indietro-arrow {
    vertical-align: middle;
    margin-right: 5px;
}

.button-indietro-testo {
    font-size: 0.8rem;
    vertical-align: middle;
}

.titolo-dettagli-annuncio {
    padding: 0;
    margin: 0;
    font-size: 2rem;
    text-align: left;
}

.scelta-pass {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.scelta-boost {
    padding: 50px;
    border-radius: 20px;
    border: 1px solid var(--azzurro);
    background-color: var(--azzurrino);
    flex-shrink: 0;
}

.scelta-pass--block {
    display: block;
}

.card-pass {
    padding: 50px;
    border-radius: 15px;
    box-shadow: var(--box-shadow-cards);
}

.card-pass--sconto {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.card-pass--sconto .card-pass-header-info {
    gap: 20px;
}

.card-pass--sconto-azioni {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.card-pass--sconto-azioni {
    font-size: 0.8rem;
}

.card-pass--sconto-azioni .bottone-cafone {
    margin: 0;
    padding: 10px 20px;
}

.card-pass-first {
    margin-bottom: 25px;
}

.card-pass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 20px;
    margin-bottom: 25px;
}

.card-pass-header-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.pass-title {
    font-family: "WotfardBold", sans-serif;
    font-size: 1.4rem;
}

.pass-price {
    font-size: 1.2rem;
}

.pass-activated {
    flex-basis: 25%;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.4rem;
}

.card-pass-header .bottone-cafone-magenta {
    flex-basis: 30%;
    color: white;
    background-color: var(--magenta);
    margin: 0;
}

.card-pass-info {
    margin-bottom: 20px;
}

.card-pass-info__sconto {
    margin-top: 5px;
    line-height: 1.8rem;
}

/* Pubblica annuncio*/
.pubblica-annuncio .titolo-primario {
    text-align: left;
    margin-bottom: 5px;
    padding-bottom: 0;
}

.pubblica-annuncio__prezzo {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 30px 0 5px;
}

.pubblica-annuncio__wrapper-bottone {
    margin: 30px 0 30px;
}

.pubblica-annuncio__non-pubblicare-wrapper {
    text-align: center;
}

.pubblica-annuncio__non-pubblicare {
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}

.vantaggi-boost {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
}

.vantaggi-boost__example {
    flex-shrink: 0;
}

.vantaggi-boost .card-annuncio {
    background-color: white;
    rotate: -10deg;
}

.vantaggi-pass {
    padding: 50px;
    border-radius: 20px;
    border: 1px solid var(--azzurro);
    background-color: var(--azzurrino);
    flex-shrink: 0;
}

.vantaggi-pass-title, .vantaggi-boost-title {
    margin-top: 20px;
    margin-bottom: 40px;
    color: var(--azzurro);
    font-family: "WotfardBold", sans-serif;
    font-size: 1.1rem;
}

.vantaggi-boost-title {
    color: black;
    font-size: 1.2rem;
    margin-top: unset;
}

.vantaggio-pass, .vantaggio-boost {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.vantaggio-check {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    vertical-align: middle;
}

.vantaggio-testo {
    font-size: 1rem;
    vertical-align: middle;
}

.acquisto-bacheca-successo {
    margin-top: 150px;
    text-align: center;
}

.acquisto-bacheca-successo * {
    margin-bottom: 30px;
}

.acquisto-bacheca-successo-img {
    width: 150px;
}

.disattiva-roofus-premium__img {
    width: 300px;
    margin-bottom: 0;
}

.titolo-premium-successo {
    font-size: 1.8rem;
}

.miei-annunci {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
}

.mio-annuncio {
    flex-basis: 47%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    border-radius: 15px;
    box-shadow: var(--box-shadow-cards);
}

.mio-annuncio-date {
    margin-bottom: 20px;
}

.mio-annuncio-svg {
    margin-right: 15px;
}

.mio-annuncio-elimina {
    color: var(--magenta);
}

.button-elimina-annuncio {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    gap: 10px;
    cursor: pointer;
}

.button-chevron {
    transform: rotate(180deg);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: rotate 0.5s;
}

.rotate-180 {
    rotate: -180deg;
}

.card-annuncio-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notabene-creazione-annuncio, .notabene-pubblica-annuncio {
    margin-top: 30px;
    line-height: 1.3rem;
    font-size: 0.9rem;
    color: darkgray;
}

.notabene-creazione-annuncio {
    color: black;
}

.boost {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 40px
}

.prenotazione-info{
    margin-top: 20px;
}

.prenotazione-attesa-cambia-idea {
    margin-top: 40px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: "WotfardBold", sans-serif;
}

.prenotazione-attesa-alert-prezzo {
    font-size: 0.9rem;
}

.prenotazioni-link-dettagli-contatto {
    cursor: pointer;
    color: rgba(82,79,79,0.66);
    font-weight: 200;
}

.prenotazioni-link-dettagli-contatto-azzurro {
    color: var(--azzurro);
    font-weight: 800;
}

.prenotazione-dettagli-richiesta {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.prenotazione-dettagli-richiesta-titolo {
    font-size: 1.4rem;
    padding: 0;
    margin-bottom: 5px;
    color: var(--azzurro);
}

.prenotazione-dettagli-contatti {
    margin-bottom: 15px;
}

.separa-scheda-desktop {
    margin-top: 50px;
}

.separa-scheda-mobile {
    display: none;
}

.btn-inline {
    display: inline-block;
    width: unset;
    margin-top: 15px;
    padding: 15px 50px;
    border-radius: 20px;
}

.text-center {
    text-align: center;
}


/* SEZIONE MOBILE */
@media screen and (max-width: 900px) {
    .acquisto-roofus-premium__card {
        padding: 40px 25px;
    }

    .acquisto-roofus-premium__flex--no-mobile {
        display: block;
    }

    .acquisto-roofus-premium__main-title {
        font-size: 2rem;
    }

    .acquisto-roofus-premium__title {
        font-size: 1.6rem;
        margin-bottom: 40px;
    }

    .acquisto-roofus-premium__cane {
        display: none;
    }

    .acquisto-roofus-premium__bottone {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    .annuncio-boost-buttons {
        display: block;
    }

    .vantaggi-boost {
        display: block;
    }

    .boost-card-annuncio-wrapper {
        max-width: 500px;
        margin: 30px auto;
    }

    .boost-card-annuncio {
        justify-content: space-between;
    }

    .boost-card-annuncio .annuncio-cliente-dove {
        display: block;
    }

    .annuncio-cliente-chip {
        display: block;
        margin: 8px 0 0 0;
    }

    .full-popup > .bottone-cafone{
        width: 100%;
        margin: auto;
    }

    .container-popup{
        width: 90%;
        background-color: white;
        border-radius: 20px;
        padding: 20px;
        box-shadow: rgba(43, 43, 43, 0.44) 1px 1px 20px 1000px;
        position: relative;
    }

    .contain-centrato-block{
        text-align: center;
        width: 100%;
        margin: auto;
        font-size: .9rem;
        font-weight: 800;
        padding: 20px;
    }

    .contain-centrato-block h2{
        font-size: 1rem;
    }


    .immagine-sx{
        width: 40%;
        display: inline;
    }

    .error-container {
        display: block;
        height: 800px;
    }

    .footer-colonne {
        text-decoration: none;
        display: block;
    }

    .footer-colonna {
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .form-login h1 {
        margin-top: 50px;
        padding-bottom: 0;
    }

    footer {
        margin-top: 120px;
    }

    .box-servizio-iconizzato {
        width: 33%;
    }

    .box-servizio-iconizzato img {
        height: 40px;
    }

    .box-staff-singolo {
        width: 100%;
    }

    .griglia-tariffe-del-partner {
        padding: 30px;
    }

    .griglia-tariffe-del-partner > div {
        width: 100%;
        margin-bottom: 50px;
    }

    .griglia-tariffe-del-partner > div:last-child {
        margin-bottom: 0;
    }

    .box-verifica-disponibilita-dog-hotel {
        padding: 20px;
    }

    .box-verifica-disponibilita-dog-hotel .bottone-cafone {
        font-size: .9rem;
    }

    .header-dog-hotel {
        display: block;
    }

    .header-dog-hotel .colonna-foto {
        padding-right: 0;
        width: 100%;
    }

    .header-dog-hotel .colonna-disponibilita {
        padding-top: 40px;
        min-width: auto;
        width: 100%;
    }

    .header-dog-hotel .foto-principale {
        height: 220px;
    }

    .riga-date {
        display: block;
    }

    .riga-date input {
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px;
    }

    .box-riassunto-ricerca {
        font-size: .9rem;
    }

    .box-riassunto-ricerca p {
        margin-top: 15px;
    }

    .colonne-di-filtri {
        display: block;
    }

    .colonna-filtri > div {
        width: 100%;
    }

    .griglia-servizi-aggiuntivi-modifica > * {
        max-width: none;
        width: 100%;
        margin-top: 0;
    }

    .scelta-animale-sitting .box-animale {
        width: 100%;
        min-width: 250px;
        margin-right: 0;
    }

    .carrello-prenotazione-inizia {
        margin-bottom: -100px;
    }

    .box-prenotazione .immagine-profilo {
        height: 40px;
        margin-right: 10px;
    }

    .home-come-funziona .spazia-in-mezzo {
        display: block;
    }

    .box-come-funziona {
        width: 100%;
        min-height: auto;
        margin-top: 50px;
        margin-bottom: 30px;
    }

    .home-sezione-rassicurante > div {
        display: block;
    }

    .box-rassicurante {
        width: 100%;
        margin-bottom: 40px;
    }

    .home-come-funziona {
        margin-bottom: 60px;
    }

    .griglia-regioni a {
        width: 50%;
        font-size: .9rem;
    }

    .home-hero-sfondo {
        padding-top: 50px;
        padding-bottom: 100px;
    }

    .home-hero-sfondo p {
        margin-bottom: 30px;
    }

    .home-hero-sfondo h1 {
        font-size: 2rem;
    }

    .box-prenotazione .chat-notifiche-bubble {
        margin-top: -45px;
        margin-left: 26px;
    }

    .box-recensione {
        width: 100%;
    }

    .box-recensione .spazia-in-mezzo {
        display: block;
    }

    .box-recensione .cinque-stelle {
        margin-top: 10px;
    }

    .elenco-dog-hotels, .griglia-blog {
        display: block;
    }

    .torna-al-profilo {
        margin-top: 30px;
        margin-bottom: -10px;
    }

    .metadati-articolo {
        display: block;
    }

    .chip-categoria-articolo {
        margin-top: 20px;
        display: inline-block;
    }

    .categorie-del-blog .chip-categoria-articolo {
        margin: 5px;
        font-size: .9rem;
    }

    .box-recensione .casella-stelline {
        margin-top: 8px;
    }

    .home-sezione-cucce .container {
        flex-direction: column-reverse;
    }

    .home-sezione-cucce .container > div:first-child {
        max-width: 100%;
    }

    .home-sezione-cucce .immagine-cuccia {
        height: 250px;
    }

    #data-range {
        font-size: .9rem;
    }

    .prenotazione-flex-griglia-servizi {
        display: flex;
        overflow-x: scroll;
        margin-top: 10px;
        padding-bottom: 15px;
    }

    .prenotazione-flex-servizio {
        min-width: 200px;
    }

    .scheda-prenotazioneflex .dati-main-container {
        max-width: 100%;
        min-width: auto;
        width: 100%;
        height: 100vh;
        box-shadow: none;
        box-sizing: border-box;
        padding: 25px;
        padding-bottom: 200px;
        background-color: transparent;
    }

    .scheda-prenotazioneflex .chat-main-container:not(.visibile-mobile) {
        display: none;
    }

    .dati-main-container .prenotazione-apri-chat {
        display: flex;
        justify-content: space-between;
    }

    .dati-main-container .prenotazione-apri-chat .bottone-cafone {
        margin: 0;
    }

    .nascondi-mobile {
        display: none !important;
    }

    .chat-main-container .chat-intestazione {
        font-size: 1rem;
    }

    .chat-main-container .chat-messaggi {
        position: relative;
        padding: 25px;
        padding-top: 120px;
        padding-bottom: 230px;
    }

    .chat-main-container .chat-intestazione {
        background: linear-gradient(to bottom, #fff, #fff, #fff, #fff, #fff, rgba(255, 255, 255, 0));
        padding-left: 25px;
        padding-right: 25px;
    }

    .chat-main-container .chat-intestazione img {
        height: 35px;
    }

    .chat-main-container .chat-container-scrittura {
        position: fixed;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, transparent, #FCFCFC);
        padding: 24px;
        padding-top: 0;
    }

    .chat-intestazione .indietro-mobile {
        display: flex;
        font-size: .9rem;
        font-family: "WotfardRegular", sans-serif;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .chat-intestazione .indietro-mobile img {
        height: 20px;
        margin: 0;
        margin-right: 5px;
    }

    .scheda-prenotazioneflex .dati-main-container .torna-al-profilo {
        margin: 0;
    }

    .box-garanzia {
        min-height: 220px;
        max-width: 450px;
        display: flex;
        flex-direction: column;
    }

    .box-garanzia img {
        align-self: first;
        margin: 15px 0;
    }

    .box-garanzia .testo-garanzia {
        width: 90%;
        padding: 2px;
        margin: 5px;
    }

    .accordion-content div .info-prenotazioni {
        max-width: 80%;
        width: 75%;
    }

    .sezioni-banner-ambassador div img {
        width: 130px;
    }


    .close-span{
        position: absolute;
        top: 35px;
        right: 20px;
        font-weight: lighter;
        font-size: 20px;
        color: var(--azzurro);
        cursor: pointer;
    }


    .close-span-inline{
        width: 100%;
    }
    .close-span-inline img{
        width: 20px;
        height: 20px;
    }

    .contain-dettagli-contatti .close-span-inline img{
        width: 20px;
        height: 20px;
    }

    .close-span-block{
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        margin-right: 10px;
        color: var(--azzurro);
        font-size: 15pt;
        font-weight: lighter;
        text-align: right;
        text-anchor: end;
        cursor: pointer;
    }

    .close-span-block img{
        display: flex;
        flex-direction: row-reverse;
        width: 30px;
        height: 30px;
    }

    .cane-triste{
        width: 40%;
        display: block;
        margin: auto;
    }

    .immagini-inline-container{
        display: block;
        width: 90%;
        margin: auto;
        font-size: 0;
    }

    .immagini-inline-container .box{
        width: 30%;
        display: inline-block;
        vertical-align: top;
        margin:0;
    }

    .immagini-inline-container .box img{
        width: 26%;
        margin: auto;
        display: block;
    }

    .immagini-inline-container .box p{
        font-size: .7rem;
        width: 100%;
        text-align: center;
        line-height: .76rem;
        margin-top:2px;
    }

    .freccia-stato p{
        width: 100px!important;
        left: 50%!important;
        transform: translate(-50%,-50%);
    }

    .motivazione-container{
        width: 350px;
        min-width: 300px;
        margin: auto;
    }

    .contain-come-funziona{
        width: 90%;
    }

    .header-bacheca {
        display: block;
    }

    .header-bacheca p {
        margin-bottom: 20px;
    }

    .header-bacheca-raggio-wrapper {
        justify-content: center;
    }

    .header-bacheca-raggio {
        flex-basis: unset;
    }

    .annunci {
        justify-content: center;
    }

    .card-annuncio {
        flex-basis: unset;
        width: 600px;
        max-width: 100%;
    }

    .dettagli-annuncio {
        display: block;
        padding: 30px;
    }

    .dettagli-annuncio-info {
        margin-bottom: 30px;
    }

    .btn-card-cane {
        padding: 8px;
    }

    .dettagli-annuncio-info-principali, .dettagli-annuncio-info-secondarie {
        display: flex;
        justify-content: space-between;
        gap: 25px;
    }

    .dettagli-annuncio-info-secondarie {
        flex-direction: row-reverse;
    }

    .dettagli-annuncio-servizi {
        padding: 25px;
    }

    .annuncio-servizi-titolo {
        margin-top: 15px;
    }

    .annuncio-info-dettaglio {
        flex-basis: 40%;
        flex-shrink: 0;
    }

    .scelta-pass {
        display: block;
    }

    .vantaggi-pass {
        margin-top: 50px;
    }

    .miei-annunci {
        display: block;
    }

    #banner-home {
        padding: 30px 20px;
        height: 115px;
    }

    body {
        padding-top: 175px;
    }

    header {
        top: 115px;
    }

    .miei-annunci .card-annuncio {
        margin: 0 auto 20px;
        width: 100%;
    }

    .prenotazioni-colonna-flex {
        display: flex;
        flex-direction: column-reverse;
    }

    .prenotazione-dettagli-contatti {
        margin-bottom: 10px;
    }

    .frecce-stato {
        margin-bottom: 15px;
    }

    .separa-scheda-desktop {
        display: none;
    }

    .separa-scheda-mobile {
        display: block;
    }

    .card-pass--sconto {
        display: block
    }

    .card-pass--sconto-azioni {
        font-size: 0.7rem;
        gap: 25px;
    }

    .card-pass--sconto-img {
        margin-top: 30px;
    }

    .bacheca-chip {
        align-items: start;
    }

    .bacheca-chip svg {
        margin-top: 3px;
    }
}

@media screen and (max-width: 450px) {
    .boost-card-annuncio {
        display: block;
    }

    .boost-card-annuncio .card-annuncio-buttons {
        margin-top: 20px;
    }

    #banner-home {
        padding: 20px;
    }

    body {
        padding-top: 175px;
    }

    header {
        padding-left: 15px;
        top: 115px;
    }

    header .btn-prenotazioni {
        margin-right: 17px;
    }

    .sezioni-banner-ambassador {
        column-gap: 5px;
        margin: auto;
        width: 100%;
    }

    .sezioni-banner-ambassador div {
        width: 100%;
        margin: auto;
    }

    .sezioni-banner-ambassador div img {
        width: 130px;
        margin: auto;
    }

    .container2 {
        width: 85%;
        margin: auto;
    }

    .accordion-content {
        padding: 0 5px;
    }

    .accordion-content div {
        width: 100%;
    }


    .accordion-content div .info-prenotazioni {
        width: 60%;
        float: left;
        margin-left: 6px;
    }

    .info-prenotazioni a {
        position: absolute;
        top: 16px;
        right: -25px;
    }

    .info-prenotazioni .label-stato-annullata {
        margin-right: 5px;
        height: 25px;
        width: 80px;
        line-height: 25px;
    }

    .info-prenotazioni .label-stato-confermata {
        margin-right: 5px;
        height: 25px;
        width: 83px;
        line-height: 25px;
    }

    .accordion-content div .info-prenotazioni .label-stato-attesa-sitter {
        margin-right: 5px;
        height: 25px;
        width: 125px;
        line-height: 25px;
    }

    .accordion-content div .info-prenotazioni .label-stato-azione-richiesta {
        margin-right: 5px;
        height: 25px;
        width: 105px;
        line-height: 25px;
    }


    .home-sezione-cucce .partner-cucce {
        font-size: 0;
        margin: auto;
    }

    .home-sezione-cucce .partner-cucce img {
        margin: 30px auto;
        display: block;
        width: 40%;
    }

    .home-sezione-cucce .partner-cucce img:first-of-type {
        padding-top: 50px;
        margin: 30px auto;
    }

    .home-sezione-cucce .partner-cucce img:nth-of-type(2) {
        width: 30%;
    }

    .media-partners {
        display: block;
        width: 100%;
        font-size: 0;
        margin: auto;
        padding-bottom: 200px;
    }

    .media-partners img {
        width: 25%;
        margin: 11px;
        display: inline-block;
        height: auto;
    }

    .media-partners img:nth-of-type(3) {
        width: 19%;
        height: auto;
        margin: 7%;
    }

    .accordion-content div .info-foto {
        width: 40px;
        height: 40px;
        float: left;
    }

    .accordion-content div .chat-notifiche-bubble {
        left: 50px;
    }

    .card-goto-bacheca {
        display: block;
    }

    .new-chip {
        margin-left: 6px;
    }

    .bacheca-chip {
        font-size: 0.8rem;
        padding: 10px;
        margin-left: 0;
    }

    .titolo-pass-bacheca, .acquisto-roofus-premium__title {
        font-size: 1.4rem;
    }

    .card-goto-bacheca-info {
        margin-bottom: 25px;
    }

    .card-goto-bacheca p {
        margin-bottom: 20px;
    }

    .header-bacheca-raggio-wrapper span {
        display: none;
    }

    .card-annuncio-body-sitting, .card-annuncio-body-date {
        font-size: 0.8rem;
    }

    .card-annuncio-body-prezzo {
        font-size: 1.2rem;
    }

    .annuncio-cliente-dove {
        gap: 7px;
    }

    .header-bacheca {
        margin-top: 50px;
    }

    .dettagli-annuncio-info-principali, .dettagli-annuncio-info-secondarie {
        display: block;
    }

    .titolo-dettagli-annuncio {
        font-size: 1.6rem;
    }

    .card-pass--sconto-azioni {
        flex-direction: column;
        gap: 20px;
    }

    .card-pass--sconto-azioni .bottone-cafone {
        width: 100%;
    }

    .card-pass, .vantaggi-pass {
        padding: 30px;
    }

    .card-pass-header {
        gap: 10px;
    }

    .pass-title {
        font-size: 1.1rem;
    }

    .vantaggi-pass {
        padding: 25px;
    }

    .vantaggi-pass-title {
        margin-bottom: 25px;
    }

    .vantaggio-check {
        width: 25px;
        height: 25px;
        margin-right: 8px;
    }

    .vantaggio-testo, .card-pass-info {
        font-size: 0.9rem;
    }

    .card-pass-header-info {
        gap: 15px;
    }

    .card-miei-annunci-base {
        gap: 12px;
    }

    .prenotazioni-attesa-conferma-colonna-flex {
        flex-direction: column;
    }

    .button-raggio-annunci {
        padding: 12px 15px;
    }

    .header-dettagli-annuncio {
        margin-top: 50px;
    }

    .vantaggio-pass {
        align-items: start;
    }

    .impersonation-exit-link.bottone-cafone {
        padding: 12px 15px;
        position: fixed;
        top: 15px;
        left: 10px;
        font-size: .8rem;
    }
}


.show-mobile,
.show-desktop {
    display: block;
}

.hide-mobile,
.hide-desktop
{
    display: none;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 900px) {

    .show-mobile {
        display: block;
    }

    .show-desktop {
        display: none;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 901px) {

    .show-mobile {
        display: none;
    }

    .show-desktop {
        display: block;
    }

}

.impersonation-exit-link.bottone-cafone {
    padding: 15px 20px;
}