:root {
    --font-family: 'Poppins', sans-serif;
    --font-family-light: 'Calibri', sans-serif;
    --font-weight-light: 100;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* testo base impostato a 16px */
    --font-size-small: 0.75rem; /* 12px */
    --font-size-normal: 1rem; /* 16px */
    --font-size-oversize: 1.25rem; /* 16px */
    --font-size-large: 1.5rem; /* px */
    --font-size-extralarge: 2rem; /* px */
    --font-size-element: 1.25rem; /* 20px */
    --font-size-section-title: 1.5rem; /* 24px */
    --font-size-main-title: 2rem; /* 32px */

    --color-dark: #202538;
    --color-teal: #00566d;
    --color-orange: #F67E23;
    --color-light: #FFFFFF;
    --color-negative: #da1717;
    --color-background: rgba(0, 86, 109, 0.05);
    --color-background-light: rgba(230, 239, 241, 1);
    --color-lines: rgba(0, 0, 0, 0.33);
    --color-gray-text: #808080;
    --color-teal-hover: #004050;
    --color-background-hover: rgba(0, 86, 109, 0.1);
    --color-light-hover: #e7e7e7;
    --color-overlay: rgba(0, 0, 0, .5);
    --border-radius-l: 1.5rem;
    --border-radius-m: 1rem;
    --border-radius-s: 0.75rem;
    --border-radius-xs: 0.5rem;
    --size-xxxs: 0.5rem;
    --size-xxs: 0.75rem;
    --size-xs: 1rem;
    --size-s: 1.5rem;
    --size-m: 2rem;
    --size-ml: 2.5rem;
    --size-l: 3rem;
    --size-xl: 4rem;
    --header-size-m: 123px;
    --header-size-l: 180px;
    --button-size-l: 3rem;
}

/**, *:hover {*/
/*    transition: all 0.6s ease-out;*/
/*}*/
.k-animation-container.telerik-blazor {
    transition: unset;
}
.k-window-title {
    white-space: pre-line;
}
.k-window-title h2 {
    white-space: pre-line;
}

*:focus {
    outline: none;
}

body {
    background-color: var(--color-light);
}

#page {
    background-color: var(--color-light);
    position: relative;
    display: flex;
    flex-direction: column;
}

#main {
    flex: 1;
    background-color: var(--color-light);
}

.cookie-banner-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

.cookie-banner-content p {
    margin: 0;
}

.secondo-piano {
    z-index: 10002;
}

.no-margins {
    margin: 0px !important;
}

.push-left {
    display: flex;
    flex-direction: row;
}

.k-window {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: var(--border-radius-l);
    background-color: var(--color-background-light);
}

.logon-window {
}

.primary-color {
    color: var(--color-teal);
}

.k-window.access-choice-modal {
    background-color: white;
}

.teal {
    color: var(--color-teal);
}

.k-window.access-choice-modal-ssn {
    background-color: var(--color-background-light);
}

.k-overlay {
    backdrop-filter: blur(10px);
    height: 100vh;
}

.register-form {
    overflow: auto;
}

.all-content-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    background-color: var(--color-light);
    /*margin-top: 63px;*/
}

.checkbox-round {
    width: 1.3em;
    height: 1.3em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #999;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.checkbox-round:checked {
    background-color: var(--color-teal);
}

.k-form > *:not(.k-hidden):first-child, .k-form > *.k-hidden + :not(.k-hidden) {
    margin-top: 24px;
}

.left-sidebar {
    min-width: 15vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-items: flex-start;
    align-items: center;
}



.left-sidebar .loto-logo {
    width: 90%;
    margin-top: var(--size-xs);
    height: var(--header-size-l);
    background-size: contain;
    background-position: center;
    border-radius: 0px;
}

.left-sidebar .loto-logo:hover {
    background-color: transparent;
    width: 100%;
}

.k-button-overlay, .loto-logo.k-button::before {
    background: none;
}

.right-sidebar {
    min-width: 15vw;
    height: calc(100vh - var(--size-l));
    display: flex;
    flex-direction: column;
    padding-top: var(--size-xs);
}

/* Handle */
/* Works on Firefox */
* {
    scrollbar-color: var(--color-teal) var(--color-light);
}

Works on Chrome, Edge, and Safari
*::-webkit-scrollbar {
    width: var(--size-xs);
    border-radius: 20px;
}

*::-webkit-scrollbar-track {
    background: var(--color-light);
    border-radius: 20px;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-teal);
    border-radius: 20px;
    border: 2px solid var(--color-light);
}

.content-wrapper {
    /*margin: auto;*/
    flex-direction: row;
    flex-wrap: wrap;
    width: 60vw;
}

.k-notification-error {
    background-color: #F99;
}

.k-notification-content {
    white-space: pre-wrap;
    display: flex;
}

.logon-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logon-container h4 {
    margin: 0px;
    color: #999;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
}

.logon-container .k-form.register-form {
    overflow: hidden;
}

.logon-container .k-tabstrip-content {
    outline: none;
    padding: 0px;
    margin: 0px;
    border: none;
    overflow: hidden;
}

.logon-container .k-form-legend {
    outline: none;
    padding: 0px;
    margin: 0px;
    border: none;
}

.logon-container .k-tabstrip-items-wrapper {
    display: none;
    padding: 0px;
    margin: 0px;
    border: none
}

.logon-container .k-form {
    outline: none;
    margin: 0px;
    border: none;
}

.register-form-container {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid grey;
}

.register-form .k-form-field {
    max-width: 450px;
    margin-top: 16px;
}

.register-form .k-label.k-form-label {
    margin-bottom: -15px;
}

.register-form .k-label.k-form-label:before {
    display: block;
    font-size: 36px;
    line-height: 42px;
    margin: 0px;
    padding: 0px;
    margin-right: 5px;
    font-weight: bold;
    content: "*";
}

.small-text {
    font-size: var(--font-size-small);
    line-height: var(--font-size-normal);
}

.k-form-field-wrap {
    display: flex;
    align-items: center;
}

.checkbox-text {
    margin-left: var(--size-xs);
}

/*.drawer-container {
    position: fixed;
    top: 0;
    display: inline-flex;
    width: 100%;
    background-color: #f6f6f6;
    line-height: 10px;
    border-bottom: inset;
    border-bottom-width: 1px;
    padding: 3px 8px !important;
    color: #656565;
    height: 63px;
}*/
/*
.drawer-title {
    margin: 0px;
    margin-left: 1rem;
    font-weight: bold;
    font-size: 24px;
    margin-top: 13px;
}

.drawer-heading {
    max-height: 56px;
    margin-top: 13px;
    align-content: center;
    text-align: center;
    margin-right: auto;
}

.drawer-title a {
    text-decoration: none;
    color: #004155;
}

    .drawer-title a:hover {
        color: #006699;
    }
*/
.drawer-container {
    margin: 0;
    width: 100%;
    padding: var(--size-s);
    height: 100vh;
    overflow: hidden;
}

.k-drawer-container {
    position: relative;
    width: 100%;
}

.drawer-custom-toolbar {
    width: 100%;
    padding: 3px 8px;
    color: #656565;
    justify-content: flex-end;
    justify-items: flex-end;
    align-items: center;
    align-content: center;
    display: flex;
    /*transition: all 0.6s ease-out;*/
}

.drawer-logo {
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 48px;
    max-height: 48px;
    margin-right: auto;
    min-width:250px;
}

.homepage-button {
    display: flex;
    width: var(--header-size-l);
    height: var(--header-size-l);
    flex-wrap: nowrap;
    text-transform: none;
    align-content: end;
    background-size: 10%;
    background-position: 50% 40%;
    border-radius: 20px;
    background-color: rgba(0, 86, 109, 0.05);
    box-shadow: none;
    margin-left: var(--size-s);
    margin-bottom: var(--size-s);
}

.homepage-button.activated {
    background-color: var(--color-teal);
    color: var(--color-light);
}

.homepage-button .k-button-text {
    font-size: var(--font-size-normal);
}

.homepage-button.logout-button {
    height: 96px;
    background-image: url("icons/logout.svg");
    background-size: contain;
    background-position: 10% 50%;
    text-align: end;
    flex-direction: row;
    align-content: flex-end;
    justify-content: center;
}

.homepage-button.logout-button .k-button-text {
    margin-left: 70px;
}

.icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    min-width: 24px;
    font-size: var(--font-size-small);
    box-shadow: none;
    border: none;
}

.icon-buttom {
}

.icon-small {
    min-width: 24px;
}

.small-icon {
    background-size: 50%;
}

.k-drawer-item .my-info-icon, .k-drawer-item .appointments-icon, .k-drawer-item .logout-icon {
    background-size: contain;
}

.my-info-icon {
    background-image: url("icons/profile.svg");
    background-size: 40%;
    text-align: end;
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-icon {
    background-image: url("icons/list-unordered-outline.svg");
    background-size: 40%;
    text-align: end;
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-end;
}


.logout-icon {
    background-image: url("icons/logout.svg");
    background-size: 40%;
    text-align: end;
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-end;
}

.my-info-icon.activated {
    background-image: url("icons/neg-profile.svg");
}

.appointments-icon.activated {
    background-image: url("icons/neg-list-unordered-outline.svg");
}


.content-wrapper {
    max-width: 1200px;
    min-height: 360px;
    /*margin: auto;*/
    overflow: hidden;
}

.small-centered {
    max-width: 350px;
    margin: auto;
    margin-top: 20px;
}

.content-centered {
    max-width: 1150px;
    margin: auto;
    margin-top: 20px;
}

.centered-text {
    text-align: center;
}

.change-password-page {
    flex-direction: column;
}

.user-menu-button .k-menu-link-text {
    padding: 10px;
}

.day-container {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
}


.k-form .k-form-buttons {
    justify-content: flex-end;
}

.k-disabled, .k-widget[disabled], .k-disabled {
    opacity: 1;
    filter: none !important;
    color: black !important;
}

.k-disabled [disabled], .k-disabled .k-disabled, .k-widget[disabled] [disabled], .k-widget[disabled] .k-disabled, .k-disabled [disabled], .k-disabled .k-disabled {
    opacity: 1;
    filter: none !important;
    border-color: rgba(0, 0, 0, 0.06);
    color: black !important;
    background-color: #ddd;
}

.availability-list-container {
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100vh - var(--header-size-l) - var(--size-xl) - var(--size-s) - var(--size-s) - var(--size-s) - var(--size-s) - var(--size-s) - var(--size-s) - var(--size-s));
    width: 100%;
}

.proper-case {
    text-transform: capitalize;
}

.upper-case, .upper-case input {
    text-transform: uppercase;
}


/* GENERAL */
.user-profile .k-disabled {
    opacity: 1;
}

/*STEPPER*/
/* TODO mantieni var size-xl margin top sopra un certo height/width*/
.stepper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0px;
    margin-top: 2vh;
    padding: 0px;
    gap: var(--size-l);
    font-size: 1.2rem;
}

.stepper div {
    width: var(--size-ml);
    height: var(--size-ml);
    background-image: url(icons/index.svg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    font-weight: bold;
    color: var(--color-teal);
}

.stepper div.active {
    color: white;
    background-image: url(icons/index-active.svg);
}

.stepper-legend {
    margin-top: var(--size-xs);
    font-weight: bolder;
    font-size: 2rem;
}

/* ACTIVITIES */

.grid-title {
    text-align: left;
    color: var(--color-dark);
    width: 100%;
    margin: 0px 0px 10px 0px;
    font-size: var(--font-size-section-title);
    font-weight: bold;
    font-family: var(--font-family);
}

.k-toolbar .k-input.searchbox {
    width: 100%;
    margin-top: var(--size-s);
    margin-bottom: var(--size-s);
}

.searchbox::before {
}


.availability-button {
    float: right;
}

.activity-grid {
    min-width: 375px;
    border-radius: var(--border-radius-l);
    border: none;
}

/*.k-grid-container,*/
.k-grid-header, .grid-toolbar-custom {
    background-color: rgba(0, 86, 109, 0.15);
    border-radius: var(--border-radius-l);
    border: none;
}

.k-grid-container {
    background-color: transparent;
}

.k-grid-header, .grid-toolbar-custom {
    margin-bottom: 5px;
    margin-top: 0px;
    /*    margin-left: var(--size-xl);
    margin-right: var(--size-xl);*/
    padding: 0px var(--size-s);
    /*padding: var(--size-xs) var(--size-xl) var(--size-m);*/
    /*height: var(--header-size-l);*/
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.k-grid-header, .grid-toolbar-custom .show-all-button {
    padding: 0px var(--size-xxs);
    min-width: unset;
    margin-left: var(--size-s);
    background-color: var(--color-teal);
}

.k-grid-toolbar {
    flex-direction: column;
    padding: 0px;
    border: none;
}

.k-grid-toolbar:before {
    display: none;
}


.grid-toolbar-custom.collapsed {
    height: 0px;
    visibility: hidden;
}

div.k-grid-header {
    display: none;
}

.k-grid-content, .k-grid-header-wrap, .k-table-thead, .k-table-row, .k-table-thead, .k-filter-row, .k-table-td {
    background-color: transparent;
    border: none;
}

.k-filtercell, .k-filtercell-wrapper {
    border-radius: var(--border-radius-m);
}

.k-header, .k-table-td {
    border: none !important;
    padding: 0px !important;
}

.k-datepicker.loto-input {
    min-width: 140px;
}

.k-textbox.k-input-solid, .k-datepicker.k-input-solid, .k-grid-search.k-input-solid {
    background-color: white;
    border-radius: var(--border-radius-m);
    border-top-left-radius: var(--border-radius-l);
    border-top-right-radius: var(--border-radius-l);
    border-bottom-left-radius: var(--border-radius-l) !important;
    border-bottom-right-radius: var(--border-radius-l) !important;
    border: none;
}

.k-toolbar-item, .k-grid-search.k-input-solid {
    width: 100%;
}

.k-grid-content {
    overflow-y: hidden;
}

.activity-grid .k-grid-content {
    overflow-y: scroll !important;
    height: calc(100vh - var(--header-size-l) - var(--size-xl) - var(--size-xl) - var(--size-xl) - var(--size-xl));
}

.k-grid-container {
    flex-direction: column;
}

.k-grid-container:before {
    color: var(--color-dark);
    font-size: var(--font-size-section-title);
    font-weight: bolder;
    padding-left: var(--size-xl);
    content: "Prestazioni Disponibili";
    display: none;
}

.activity-grid .k-table-tbody .k-table-row.k-grid-norecords {
    display: none;
}

.activity-grid .k-table-tbody .k-table-row {
    /* margin:var(--size-xs) 0px;*/
}

.activity-grid .k-table-tbody .k-table-row {
    background-color: transparent !important;
}

/*.activity-grid .k-table-tbody .k-table-row.chosen-activity {
    background-color: rgba(0, 86, 109, 0.25);
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid var(--color-teal);
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right:0px;

}*/

.access-choice-modal .k-window-title {
    text-align: center;
    justify-content: center;
    color: var(--color-dark);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
}

.activity-grid .k-table-tbody .k-table-row .k-table-td {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    font-size: var(--font-size-oversize);
    text-transform: capitalize;
}

.k-alert .k-button {
    height: var(--button-size-l);
    min-height: var(--button-size-l);
    border-radius: var(--border-radius-l);
    text-transform: none;
    padding: 0px var(--size-s) 0px var(--size-m);
    box-shadow: none;
    min-width: 150px;
}

.k-alert .k-dialog-content {
    font-size: var(--font-size-oversize);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family);
}

.loto-button {
    height: var(--button-size-l);
    min-height: var(--button-size-l);
    border-radius: var(--border-radius-l);
    text-transform: none;
    margin-left: auto;
    padding: 0px var(--size-s) 0px var(--size-m);
    box-shadow: none;
    min-width: 150px;
}

.loto-button .k-font-icon {
    font-size: var(--font-size-extralarge);
}

.loto-button.small {
    min-width: unset;
}

.loto-button.free {
    min-width: unset;
    padding: 0px;
}

.loto-button.left {
    margin-left: unset;
}

.loto-button.icon {
    height: auto;
    min-height: unset;
    min-width: unset;
}

.loto-button.icon .k-font-icon {
    font-size: var(--font-size-oversize);
}

.loto-button .k-button-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.loto-input {
    height: var(--button-size-l);
    min-height: var(--button-size-l);
    border-radius: var(--border-radius-l);
    border-bottom-left-radius: var(--border-radius-l) !important;
    border-bottom-right-radius: var(--border-radius-l) !important;
    background-color: white;
    text-transform: none;
    margin-left: auto;
    padding: 0px var(--size-xxxs);
    box-shadow: none;
}

.k-button-icon.k-icon.k-svg-icon.k-svg-i-x, .k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg, .k-button-md.k-icon-button .k-button-icon.k-icon-md > svg {
    width: 32px;
    height: 32px;
    fill: var(--color-teal);
}

.availability-day-details p {
    display: flex;
    width: 150px;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: center;
    margin-bottom: 0px;
    padding: 0.5rem;
    border-right: 2px solid #999;
}

.availability-day-details p.double {
    justify-content: flex-end;
}

.availability-day-details p.last {
    border: none;
}

.availability-day-activities {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
}

.availability-day-activities p {
    margin-bottom: 0px;
    padding: 0.5rem;
    border-bottom: 2px solid #999;
    max-width: 350px;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.availability-day-activities p.last {
    border: none;
}

.list-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 15px;
    align-items: center;
}

.recap-list {
    overflow-y: scroll;
    height: calc(100vh - ((var(--header-size-l))));
}

.recap-list-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 15px;

    margin-top: var(--size-s);
}

.recap-list .slot-container {
    margin-bottom: 0px;
    justify-content: space-between;
}

.recap-list .slot-details, .recap-list .slot-resource {
    flex-grow: 1;
}

.recap-list-footer {
    margin-bottom: var(--size-xxxs);
}

.patient-form .k-form-legend {
    color: var(--color-teal);
    font-size: var(--font-size-oversize);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family);
    border: 0px;
    padding: var(--size-s) var(--size-l) 0px;
}

.patient-form .k-form-fieldset.container {
    background-color: var(--color-background);
    border-radius: var(--border-radius-l);
    margin: 0px;
}

.patient-form .k-form-fieldset.subcontainer {
    margin: 0px;
    padding-right: var(--size-xs);
    padding-bottom: var(--size-xs);
}

.patient-form .k-form-fieldset.subcontainer legend {
    display: none;
}

.patient-form .k-form-fieldset.container.big {
    /*width: 35vw;
    max-width: 700px;*/
}

.patient-form .k-form-fieldset.container.small {
    padding-right: var(--size-xs);
    /*width: 23vw;
    max-width: 480px;*/
}

/*.loto-button .k-button-text:after {
    display: block;
    font-size: 28px;
    font-family: Calibri;
    font-weight: bolder;
    margin: 0px 0px 0px var(--size-xs);
    content: ">";
}*/
.loto-button.link {
    padding: 0px;
}

.loto-button.link .k-button-text {
    font-size: 28px;
    font-family: Calibri;
    font-weight: bolder;
    color: var(--color-teal);
}

/*    .loto-button.link .k-button-text:after {
        display: block;
        font-size: 36px;
        font-family: Calibri;
        font-weight: bolder;
        color: var(--color-teal);
        margin: 0px 0px 0px var(--size-xs);
        content: ">";
    }*/

.loto-back-button {
    height: var(--button-size-s);
    min-height: var(--button-size-s);
    border-radius: var(--border-radius-l);
    text-transform: none;
    box-shadow: none;
    min-width: 100px;
    font-weight: bolder;
}

.arrow-text {
    font-size: 36px;
    line-height: 26px;
}

.arrow-text-back {
    font-size: 18px;
    line-height: 12px;
    margin-right: 5px;
}

.loto-button.no-arrow .k-button-text:after {
    display: none;
}

.loto-button.k-button-link .k-button-text:after {
    display: none;
}

.list-button {
    width: 120px;
    background-color: var(--color-teal);
    color: var(--color-light);
    margin-left: auto;
    box-shadow: none;
}

.switch-label {
    font-size: var(--font-size-large);
    margin-left: auto;
    margin-right: 0px;
    padding: 0px;
}

.cart-actions .k-switch {
    margin: 0px 5px;
}

.switch-label.selected {
    font-weight: bold;
    color: var(--color-teal);
}

.switch-label.unselected {
    font-weight: normal;
    color: var(--color-gray-text);
}

.activity-grid-availabilities .switch-label.closer {
    margin-left: var(--size-l);
}

.logon-login-to-registration {
    /*   margin-left: 16px;*/
}

.logon-label {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-text);
    text-align: center;
    max-width: 150px;
}

.slot-container .loto-button {
    font-size: 22px;
}

.flex-right {
    margin-left: auto;
}

.flex-left {
    margin-right: auto;
}

.icon-list-item {
    width: 18px;
    height: 18px;
    background-image: url(icons/bullet.svg);
    background-position-y: 20%;
    margin-right: var(--size-xs);
    display: inline-block;
}

.appointment-container-head {
    font-size: var(--font-size-oversize);
}

.appointment-container-head .data {
    font-weight: bold;
    color: var(--color-teal);
    font-size: var(--font-size-large);
}

.list-button .k-button-text {
    margin: 0px;
    display: flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-items: safe center;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-large);
    font-family: var(--font-family-light);
    font-weight: var(--font-weight-light);
}

.list-button:hover {
    background-color: var(--color-teal-hover);
    color: var(--color-light-hover);
}

/* SSN CHOICE */
.access-choice-modal .k-window-content {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-direction: column;
}

.access-choice-modal .k-textbox {
    background-color: var(--color-background);
    color: black;
}

.access-choice-modal .k-textbox .k-input-inner {
    text-align: center;
}

.ssn-buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 25px;
    margin-bottom: 20px;
}

.service-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-container .k-form-label {
    color: #666;
}

.service-container .k-form-field-wrap {
    min-width: 80%
}

.access-mode {
    margin: 5px 0;
}

.access-mode .k-button {
    width: 100%;
    font-size: 22px;
}

.access-mode-ssn-code {
    max-width: 50px;
}

.access-mode-ssn .k-form-field {
    align-items: center;
}

.ssn-classes {
    display: flex;
    justify-content: space-between;
}

.ssn-classes .k-button {
    line-height: 32px;
}

.ssn-classes-header {
    text-align: center;
    font-size: 28px;
    line-height: 18px;
    margin-top: 25px;
}

.ssn-class-subheader {
    text-align: center;
    text-decoration: underline;
}

.ssn-reminder {
    display: block;
    clear: both;
    font-size: 16px;
}

.inizialeSSN {
    font-weight: bolder;
}

.access-choice-modal-ssn .k-window-title {
    font-size: var(--font-size-large);
}

/* FILTERS */
.filters {
    margin-left: auto;
}

.filters .k-form-field {
    margin-top: 0px !important;
}

.filters .k-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.filter-spacer {
    padding: 15px;
    min-width: 200px;
    width: 350px;
    height: 500px;
}


.availability-page-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.filters .k-form-buttons {
    align-items: flex-end;
}

.filters .k-form-label {
    color: #999;
    margin-left: var(--size-m);
    text-align: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-normal);
}

.availability-title {
    text-align: left;
    text-transform: capitalize;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 0px;
}


.availability-slot-container {
    display: flex;
}

/* AVAILABILITIES */

.loader-fixed-in-viewport.k-loader-container {
    position: fixed;
}


.filters, .stepper-container, .availability-container {
    max-width: 1200px;
}

.availability-nothing-found {
    min-width: 650px;
    text-align: center;
}

.availability-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--color-background);
    border-radius: var(--border-radius-l);
    padding: var(--size-xs) var(--size-l) 0px;
    align-items: center;
    gap: 25px;
}

.availability-day-container {
    display: flex;
    border: none;
    border: 4px solid transparent;
    background-color: var(--color-background);
    min-height: 50px;
    border-radius: var(--border-radius-l);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--size-s);
}

.availability-day-container.size2 {
    min-height: 75px;
}

.availability-day-container.size3 {
    min-height: 100px;
}

.availability-day-container.size4 {
    min-height: 125px;
}

.availability-day-container.size5 {
    min-height: 150px;
}

.availability-day-center-container {
    display: flex;
    flex-direction: row;
}

.details-value.bigger {
    font-size: var(--font-size-large);
}

.availability-day-container.selected {
    border: 4px solid var(--color-teal);
}

.availability-day-container.selected .availability-day-button .k-button-text {
    visibility: hidden;
}

.activity-cart-list-item-datetime {
    font-weight: normal;
    font-style: italic;
}

.loto-button.inverse.remove-button {
    height: 40px;
}

.availability-cart-item-date {
    width: 180px;
}

.details-value.bigger-ln {
    line-height: var(--font-size-extralarge);
}

.availability-day-date {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    border-right: 2px solid var(--color-teal);
    min-width: 125px;
    width: 125px;
    max-width: 125px;
}

.availability-day-date-details {
    min-width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0px;
    color: var(--color-teal);
}

.availability-day-details {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    flex-wrap: wrap;
    color: #666;
    min-width: 300px;
    width: 300px;
    max-width: 300px;
}

.details-value {
    /*float: right;*/
    font-weight: bold;
    /*clear: both;
    color: black;*/
}

.availability-day-word {
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    text-transform: capitalize;
}

.availability-day-day {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 40px;
    line-height: 32px;
    font-weight: bolder;
}

.availability-day-month {
    font-weight: bolder;
}

.availability-day-actions {
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
}

.availability-day-button {
    width: 100%;
    white-space: pre-wrap;
    color: #fff;
}

.load-more {
    width: 100%;
}

. /*availability-header .back-button {
    min-width: 200px;
    width: 320px;
    text-align: left;
}

    .availability-header .back-button .k-button-text::before {
        content: "< Torna a ";
    }*/
.expired-priority {
    border-top: 2px solid black;
}

.expired {
    opacity: 0.6;
}

.expired:hover {
    opacity: 1;
}


/* SLOTS  */
.slot-window {
    max-height: 100vh;
}

.window-title-container {
    display: flex;
    flex-wrap: wrap;
}

.slot-list {
}

.slot-container {
    margin-bottom: 5px;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #CCC;
    background-color: var(--color-background);
    min-height: 50px;
    border-radius: var(--border-radius-l);
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--size-s);
}

}

.slot-container.slot-list-header div {
    font-size: 28px;
    font-weight: bold;
}

.list-header h4 {
    font-weight: bold;
}

.slot-date {
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: bold;
    padding: 0px 10px;
    flex-basis: 15%;
    text-align: right;
    min-width: 125px;
    text-align: center;
    color: var(--color-teal);
}

.slot-details {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.slot-details p {
    flex-basis: 25%;
    margin-bottom: 0px;
    font-size: 16px;
}

.slot-date {
    padding: var(--size-xs);
    border-right: 2px solid var(--color-teal);
}

.slot-details div {
    padding: var(--size-xxxs);
    border-right: 2px solid #999;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-direction: row;
}

.slot-container.slot-list-header div .label {
    display: block;
}

.slot-resource {
    max-width: 350px;
}

.slot-resource p {
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.slot-location {
}

.slot-details div.slot-price {
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
}

.slot-price .price-header {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 100px;
}

.slot-activities {
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    justify-items: center;
    flex-grow: 1;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 10px;
}

.slot-activities p {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.slot-actions {
    display: flex;
    align-items: center;
}

.slot-actions .k-button {
}

.slot-container.slot-list-header div.slot-actions {
    /*width: 100px;*/
}

/* APPOINTMENTS */
.appointment-wrapper {
    flex-direction: column;
    margin-top: 0px;
}

.appointment-header .back-button {
    z-index: 3;
    min-width: 200px;
    width: 320px;
    text-align: left;
}

.appointment-header .back-button .k-button-text::before {
    content: "< Torna a ";
}

.appointment-header {
    height: var(--header-size-l);
    margin-bottom: var(--size-s);
    margin-top: var(--size-xs);
    background-color: var(--color-background);
    border-radius: var(--border-radius-l);
    font-size: var(--font-size-main-title);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
}

.appointment-header h1 {
    text-align: center;
}

.appointment-list {
    background-color: var(--color-background);
    border-radius: var(--border-radius-l);
    padding: var(--size-s) var(--size-l);
    /*transition: all 0.6s ease-out;*/
    max-height: calc(100vh - var(--header-size-l) - var(--size-s) - var(--size-s) - var(--size-s));
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 250px;
}

.appointment-supercontainer {
    display: flex;
    flex-direction: column;
    /*transition: all 0.6s ease-out;*/
}

.appointment-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: var(--size-xs);
    flex-wrap: nowrap;
}

.appointment-container div {
    /*flex-grow: 1;*/
}

..appointment-supercontainer.cancelled {
    color: #999;
}

.appointment-supercontainer.cancelled:hover {
    color: #000;
}

.appointment-supercontainer.past .appointment-datetime {
    color: rgb(84, 114, 122);
}

.appointment-supercontainer.past {
    color: #999;
}

.appointment-supercontainer.past:hover {
    color: #000;
}

.appointment-supercontainer.cancelled .appointment-datetime {
    text-decoration: line-through;
}

.appointment-detail > div {
    margin-top: 10px;
    background-color: var(--color-background);
    border-radius: var(--border-radius-s);
    padding: 20px;
}

.appointment-detail p {
    font-size: var(--font-size-oversize);
}

.appointment-detail .value {
    font-weight: bold;
}

.hide {
    opacity: 0;
    max-height: 0px;
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
}

.show {
    opacity: 1;
}

.appointment-container div {
}

.appointment-datetime {
    display: flex;
    flex-direction: column;
    padding: 10px;
    font-weight: bolder;
    font-size: xx-large;
    justify-content: center;
    align-items: center;
    /*margin: auto;*/
    border-right: 2px solid var(--color-teal);
    text-align: center;
    color: var(--color-teal);
    width: 150px;
    min-width:105px;
}

.appointment-date-hour {
    text-align: center;
}

.appointment-date-date {
}

.appointment-details {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-grow: 1;
}

.appointment-details div {
    border-right: 2px solid #999;
    padding-left: var(--size-xs);
    padding-right: var(--size-xs);
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

.appointment-details .resource {
    flex-grow: 1;
}

.appointment-details p {
    margin-bottom: 5px;
    line-height: 22px;
}

.appointment-details .label {
    display: inline-block;
    vertical-align: bottom;
}

.appointment-details .value {
    display: inline-block;
    vertical-align: bottom;
    font-weight: bold;
    max-width: 280px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.appointment-details-category {
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    border-bottom: 1px solid #999;
}

.appointment-details-category.title {
    margin-bottom: 10px;
}

.header-appointments .k-button, .user-menu-button .k-button {
    padding: 18px;
}

.appointment-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 110px;
    gap: 5px;
    margin-left: auto;
}

.appointment-actions .loto-button {
    margin: 0px;
    min-width: 110px;
}

.appointment-filters {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    padding-left: 0px;
    z-index: 2;
}

.appointment-prenotazione {
    flex-grow:1;
    min-width:200px;
}
.appointment-prenotazione .value {
    word-break: break-word;
    white-space: pre-wrap;
}
.appointment-paziente {
    border-right: none !important;
    width: 200px;
    min-width:200px;
}
.appointment-paziente .value {
    max-width: 200px;
    white-space: pre-wrap;
    word-break: break-word;
    text-overflow: ellipsis;
}
.appointment-details-category {
}

.checkbox-container {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 10px;
    color: var(--color-teal);
    font-weight: bold;
    font-size: var(--font-size-oversize);
    padding: 0px var(--size-l);
}

.checkbox-container #pastCheck, .checkbox-container #cancelledCheck {
    margin-top: 5px;
}

/* RECAP */

.recap-container {
    margin-bottom: 15px;
    margin-top: var(--size-xs);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    column-gap: 20px;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.recap-info-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: auto;
    width: 100%;
}

.additional-info {
    width: 100%;
}

.recap-title {
    width: 100%;
    color: var(--color-teal);
    font-weight: bold;
    font-size: var(--font-size-main-title);
    padding: var(--size-s) var(--size-l);
    border-radius: var(--border-radius-l);
    margin-bottom: var(--size-s);
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.recap-details {
    background-color: var(--color-background);
    border-radius: var(--border-radius-l);
    width: 100%;
    padding: var(--size-s) var(--size-l);
    display: flex;
    flex-direction: column;
}

.recap-details div.slot-price {
    border-right: none;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}


.additional-info .k-label.header {
    font-size: 18px;
    font-weight: bold;
}

.recap-date-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: green;
}

.recap-date-details div {
    flex-grow: 1;
}

.recap-datetime-standalone {
    display: none;
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    padding: 20px;
}

.recap-details {
}

.recap-details .value {
    font-weight: bold;
}

.recap-header .back-button {
    position: fixed;
    top: 63px;
    left: 15px;
    min-width: 200px;
    width: 320px;
    text-align: left;
}

.recap-header .back-button .k-button-text::before {
    content: "< Torna a ";
}

.recap-actions {
    width: 100%;
}

/*
    .recap-actions .k-button {
        height: 100%;
        min-height: 60px;
        font-size: 28px;
    }
*/

.recap-details .k-input-inner {
    text-overflow: unset;
    pointer-events: none;
}

.disabled-prescription .k-input-solid:disabled, .disabled-prescription .k-input-solid[disabled], .disabled-prescription .k-input-solid.k-disabled {
    border-color: rgba(0, 0, 0, 0.06);
    color: black;
    background-color: #ddd;
}

/* CONFIRMATION */
.completion-modal .k-window-titlebar {
    display: none;
}

.dialog-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: var(--size-m);
}

.dialog-container .icon {
    font-size: 6rem;
    color: var(--color-teal);
}

.dialog-container .titolo {
    font-size: var(--font-size-large);
    color: var(--color-teal);
}

.dialog-container .continue {
    font-size: var(--font-size-oversize);
    color: var(--color-teal);
    margin-left: 0px;
}

.dialog-container .continue:hover {
    color: var(--color-teal-hover);
    background-color: transparent;
}

/*.confirmation-container {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    column-gap: 50px;
}

.confirmation-message {
    width: 400px;
    margin: auto;
    padding: 10px;
    text-align: center;
    font-size: 28px;
    color: green;
    animation: mymove 5s;
}*/
/*@keyframes mymove {
    from {
        background-color: lightgreen;
    }

    to {
        background-color: white;
    }
}*/
.next-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* USER PROFILE */
.profile-header {
    height: var(--header-size-l);
    background-color: var(--color-background);
    border-radius: var(--border-radius-l);
    padding: var(--size-l);
    margin-bottom: var(--size-m);
}

.profile-form {
    width: 100%;
    border-radius: var(--border-radius-l);
    background-color: var(--color-background);
    padding: var(--size-s) var(--size-l);
}

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loto-button.profile-button, .loto-button.recap-button {
    width: 100%;
}


.test-debug {
    display: none;
}

.additional-info.disabled .k-form-field {
    pointer-events: none;
}

.availability-confirmation-container {
    flex-direction: column;
}

}

.topMenu a {
    display: block;
    padding: 0.3125rem 0.25rem;
}


.availability-day-details {
    min-width: 210px;
}


.filter-spacer {
    display: none;
}

.availability-container {
    margin: 0px;
    width: 60vw;
    height: calc(100vh - var(--header-size-l) - var(--size-s) - var(--size-s));
}


.appointment-container {
    margin-top: 10px;
    background-color: var(--color-background);
    border-radius: var(--border-radius-l);
}


.appointment-actions .k-button {
    width: 50%;
    max-height: 50px;
}

.default-text {
    width: 100%;
    margin-top: 50%;
    text-align: center;
    /*transition: all 0.6s ease-out;*/
}

.slot-container {
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
}


.slot-list-header {
    display: none;
}

.slot-details .label {
}

.slot-details .value {
    font-weight: bold;
}


.slot-actions .k-button {
    width: 100%;
}


.highlight {
    color: black;
    font-weight: bold;
    background-color: yellow;
}

.highlight textarea {
    color: black;
    font-weight: bold;
    background-color: yellow;
}

.mr20 {
    margin-right: 12px;
}

.required-notice {
    margin-right: auto;
    font-style: italic;
}

.inline-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: 38px;
}


/* Cookie Policy */

.policy-wrapper {
    flex-direction: column;
    padding: 0px var(--size-m);
    height: calc(100vh - 48px);
    overflow-y: scroll;
    text-align: justify;
}

.notification {
    min-width: 400px;
}


/* icons */
.icon-list-item {
    width: 18px;
    height: 18px;
    background-image: url(icons/bullet.svg);
    background-position-y: 20%;
    margin-right: var(--size-xs);
    display: inline-block;
}

.loto-icon {
    width: 22px;
    height: 22px;
    background-image: url(icons/bullet.svg);
    background-position-y: 20%;
    margin-right: var(--size-xxxs);
    display: inline-block;
}

.loto-icon.position {
    background-image: url(icons/address.svg);
}

.loto-icon.calendar {
    background-image: url(icons/calendar.svg);
    margin: 0px;
}

.loto-icon.time {
    background-image: url(icons/time.svg);
}

.loto-icon.resource {
    background-image: url(icons/doctor.svg);
}

.loto-icon.price {
    background-image: url(icons/price.svg);
}

.loto-icon.appointment {
    background-image: url(icons/appointments.svg);
}

.loto-icon.check {
    background-image: url(icons/done.svg);
}

/* enable absolute position for the icon */
.tb-icon-container {
    position: relative;
    width: 100%;
}

/* position icon over textbox */
.tb-icon-container .loto-icon.check {
    position: absolute;
    z-index: 1;
    top: 0.5em;
    left: 0.5em;
}

/* add space to textbox without floating label */
.tb-icon-container .k-textbox input,
{
    padding-left: 2em;
}

.recap-preparation .value {
    font-weight: normal;
}


.stepper-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    z-index: 10000;
}


.activity-cart-notification-number {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: red;
    color: white;
    border-radius: 50%;
    height: var(--size-m);
    width: var(--size-m);
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    font-size: var(--font-size-oversize);
    margin-left: auto;
}

.activity-cart-icon {
    margin-top: auto;
    background-image: url("icons/search.svg");
    background-size: 60%;
    text-align: end;
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-end;
    margin-bottom: 0px;
}


.availability-cart-icon {
    background-image: url("icons/shopping-cart.svg");
    background-size: 60%;
    text-align: end;
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-end;
    margin-left: 0px;
    margin-bottom: 0px;
}

.activity-cart-button-container.small-screen, .activity-cart-button-container.small-screen .activity-cart-icon {
    height: var(--size-m);
    width: var(--size-xl);
    background-position-x: 10%;
    color: transparent;
    margin-left: 0;
    margin-bottom: 0;
}

.small-screen .activity-cart-notification-number {
    height: var(--size-s);
    width: var(--size-s);
    font-size: var(--font-size-normal);
}

.activity-cart-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: var(--header-size-l);
    height: var(--header-size-l);
    margin-left: var(--size-s);
    margin-bottom: var(--size-s);
}


.activity-cart-item-description, .activity-cart-list-item-description {
    width: calc((var(--header-size-l)) - (2 * var(--size-s)));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.activity-cart-window {
    min-width: 800px;
    width: 50%;
}

.hours-cart-window {
    max-height: 90vh;
}

.activity-cart-container, .activity-cart-list-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-transform: none;
    align-content: stretch;
    background-size: 10%;
    background-position: 50% 40%;
    border-radius: 20px;
    box-shadow: none;
    padding: var(--size-s) 0px;
}

.activity-cart-list-container {
    /*background-color: rgba(0, 86, 109, 0.05);*/
    margin-left: var(--size-s);
    margin-bottom: var(--size-s);
    padding: var(--size-s);
}

.activity-cart-item, .activity-cart-list-item {
    display: flex;
    gap: 10px;
}

.activity-cart-item-nam {
}

.activity-cart-item-prescription-code,
.activity-cart-item-prescription-date,
.activity-cart-item-prescription-priority-code {
    text-align: right;
}

.activity-cart-item-actions {
}

.activity-cart-item-prescription-priority-code {
    text-align: center;
}

.activity-cart-list-item {
    background-color: var(--color-background);
    border-radius: var(--border-radius-s);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    gap: 0px;
}

.activity-cart-item-actions, .activity-cart-list-item-actions {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 2px;
    margin-bottom: var(--size-xs);
}

.activity-cart-item-actions {
    margin-left: auto;
}

.activity-cart-actions {
    display: flex;
    justify-content: flex-end;
    align-content: flex-end;
    gap: 5px;
}

.activity-cart-item-actions .k-button, .activity-cart-list-item-actions .k-button {
    flex-grow: 1;
    padding: 2px !important;
}


.activity-cart-list-item-description {
    width: calc((2 * var(--header-size-l)) - (2 * var(--size-s)));
}

.activity-cart-list-container {
    width: calc(2 * var(--header-size-l));
}

.activity-cart-list-item {
    font-weight: bold;
    font-size: var(--font-size-normal);
}


.activity-cart-list-container.large-screen.inline {
    width: 100%;
}

.filters-single-container {
    display: flex;
    flex-direction: row;
    margin: 0px;
}

.list-item-container .name {
    margin-right: auto;
}

.appointment-activities {
    font-weight: bold;
}

.appointment-activities .label {
    font-weight: normal;
}

.continue-button {
    margin-top: auto;
    font-size: 28px;
    /*color: var(--color-teal);*/
    background-color: var(--color-teal) !important;
    color: white;
    border-radius: var(--border-radius-l);
    float: right;
    margin-bottom: var(--size-s);
    margin-left: var(--size-s);
    font-weight: bold;
    text-transform: none;
    width: var(--header-size-l);
    box-shadow: none;
    box-shadow: 0 0 0 0 rgba(0, 128, 128, 0) !important;
    -moz-animation: pulse 2s infinite;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 1.5s infinite;
}

.continue-button:hover {
    -moz-animation: none;
    -webkit-animation: none;
    animation: none;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 128, 128, 0) !important;
        transform: scale(1);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 50px rgba(0, 128, 128, 255) !important;
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 128, 128, 0) !important;
    }
}

.continue-button .k-button.text {
    font-weight: bold;
    text-transform: none;
}

.continue-button .k-font-icon {
    font-size: var(--font-size-extralarge);
}

/*@media only screen and (min-height:1200px) {
    .continue-button {
        width: var(--header-size-l);
        height: var(--header-size-l);
        font-size: var(--font-size-oversize);
        margin-top: var(--size-xl);
        margin-left: var(--size-s);
        background-image: url("icons/neg-appointments.svg") !important;
        background-size: 40% !important;
        background-position: 50% 40% !important;
        background-repeat: no-repeat !important;
        flex-wrap: nowrap;
        text-transform: none;
        align-content: end;
        text-align: end;
        flex-direction: column;
        align-content: flex-end;
        justify-content: flex-end;
        box-shadow: none;
        margin-left: var(--size-s);
    }
}*/

.bold {
    font-weight: bold;
}

.red {
    background-color: rgba(230, 25, 75, 0.4);
    border-radius: 5px;
}

.green {
    background-color: rgba(60, 180, 75, 0.4);
    border-radius: 5px;
}

.yellow {
    background-color: rgba(255, 225, 25, 0.4);
    border-radius: 5px;
}

.blue {
    background-color: rgba(67, 99, 216, 0.4);
    border-radius: 5px;
}

.orange {
    background-color: rgba(245, 130, 49, 0.4);
    border-radius: 5px;
}

.purple {
    background-color: rgba(145, 30, 180, 0.4);
    border-radius: 5px;
}

.lime {
    background-color: rgba(191, 239, 69, 0.4);
    border-radius: 5px;
}

.cyan {
    background-color: rgba(66, 212, 244, 0.4);
    border-radius: 5px;
}


/*Rebuild*/
.center-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-page-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: var(--size-s)
}

.router-outlet {
    background-color: transparent;
}

.activity-grid-availabilities .loto-button.list-button {
    min-width: unset;
    padding: 0px 5px;
    width: 50px;
}

.activity-grid-availabilities .button-text {
    display: none;
}

.list-button.inverse {
    background-color: var(--color-light);
    color: var(--color-teal);
    border-color: var(--color-teal);
    margin-left: var(--size-xxxs);
    height: unset;
    min-height: unset;
}

/*
.activity-grid .k-table-tbody .k-table-row {
    width: calc(60vw - 2* var(--size-l));
    max-width: 1200px;
}*/

.activity-grid-availabilities .k-table-tbody .k-table-row .k-form-field,
.activity-grid-availabilities .k-table-tbody .k-table-row .k-form-buttons {
    margin: 0px;
}


.activity-grid-availabilities .k-table-tbody .k-table-row .k-table-td .filters-single-container {
    margin-left: auto;
}

.k-table-tbody .k-table-row .list-item-container {
    display: flex;
    width: 100%;
    font-size: var(--font-size-oversize);
    align-content: center;
    align-items: center;
    padding: var(--size-xs) var(--size-s);
    background-color: var(--color-background);
    border-radius: var(--border-radius-l);
    text-transform: none;
    margin-bottom: var(--size-xs);
}

.k-table-tbody .k-table-row.chosen-activity .list-item-container,
.activity-grid-availabilities .k-table-tbody .k-table-row .list-item-container {
    background-color: rgba(0, 86, 109, 0.15);
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid var(--color-teal);
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
}

.activity-grid .k-table-tbody .k-table-row.chosen-activity .list-item-container.last {
    margin-bottom: var(--size-s);
}

.slot-name {
    font-size: var(--font-size-oversize);
    font-weight: bold;
    margin-right: auto;
    margin-left: var(--size-s);
    white-space: pre-line;
}

.k-grid.k-grid-md.activity-grid-availabilities {
    border: 0px;
}

.k-reset .k-icon.k-svg-icon.k-cursor-pointer {
    display: none;
}

.activity-grid-availabilities .k-table-tbody .k-table-row .k-table-td .filters-single-container .loto-input {
    min-width: 250px;
    height: unset;
    min-height: unset;
}

.activity-grid-availabilities .k-table-tbody .k-table-row .k-table-td .filters-single-container .k-form-field-wrap {
    min-width: 250px;
}

.activity-grid-availabilities .k-table-tbody .k-table-row .k-table-td .filters-single-container .loto-input .k-input-inner {
    padding: 0px;
}

.k-table-td.k-group-cell {
    width: 0px;
}


.hidden {
    display: none;
}

.info-text {
    width: 100%;
    padding: var(--size-s);
    display: flex;
    flex-direction: column;
}


.slot-name:first-letter {
    text-transform: uppercase
}


.list-item-container .name {
    min-width: 28%;
}


.chosen-activity .list-item-container .name > span > span {
    padding-left: 5px;
    padding-right: 5px;
}

/*@media only screen and (min-width: 1500px) {
    .patient-form > .k-form-layout.k-d-grid {
        gap: 230px !important;
    }
}*/

@media only screen and (max-width: 1675px) {
    .availability-day-details {
        flex-direction: column;
        align-content: center;
        align-items: center;
        width: unset;
        min-width: unset;
        padding-left: var(--size-s);
    }

    .availability-day-details p {
        align-items: flex-start;
        align-content: flex-start;
    }
}

/* Large devices (large laptops and desktops, 1215px and up) */
@media only screen and (min-width: 1240px) {
    .drawer-custom-toolbar {
        display: none;
    }

    .xls, .ls, .ms, .ss, .xss {
        display: block;
    }


    .appointment-actions .k-button {
        width: 110px;
        height: 100%;
    }

    .activity-grid, .availability-container {
        margin-left: var(--size-s);
        width: calc(60vw - var(--size-s));
        max-width: calc(1200px - var(--size-s));
    }

    .activity-grid {
        margin-top: 12vh;
    }

    .bottom-page-container {
        display: none;
    }

    .activity-grid-availabilities {
        width: 60vw;
        max-width: 1200px;
    }

}

.recap-container {
    height: calc(100vh - 72px);
}


/* Small devices (phones and tablest, up to1240) */
@media only screen and (max-width: 1240px) {
    .xss {
        display: block;
    }

    .xls, .ls, .ms, .ss {
        display: none;
    }

    /*MAIN*/
    .drawer-custom-toolbar {
        display: flex;
    }

    .left-sidebar, .right-sidebar {
        display: none;
    }

    .drawer-container {
        padding: 0px;
    }

    .content-wrapper {
        width: 100vw;
    }

    .bottom-page-container {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1000;
    }

    .continue-button {
        height: unset;
        margin: 0px;
        width: 100%;
        border-radius: 0px;
    }

    /* Handle */
    /* Works on Firefox */
    * {
        scrollbar-color: var(--color-teal) var(--color-light);
    }

    /*Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: auto;
        border-radius: 2px;
    }

    *::-webkit-scrollbar-track {
        background: var(--color-light);
        border-radius: 2px;
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--color-teal);
        border-radius: 2px;
        border: 2px solid var(--color-light);
    }

    /*ACTIVITIES*/
    .activity-grid {
        width: 100vw;
        margin-top: var(--size-s);
    }

    .k-table-td {
        line-height: 20px;
    }

    .k-grid-container, .k-grid-header, .grid-toolbar-custom {
        border-radius: 0px;
    }

    .activity-grid .k-grid-content {
        overflow-y: scroll !important;
        height: calc(100vh - var(--header-size-l) - var(--size-xl) - var(--size-xl));
    }

    .k-grid-toolbar {
        flex-direction: column-reverse;
    }

    .stepper-container {
        /*background-color: var(--color-background-light);
        */
        padding: var(--size-s) 0px;
    }

    .stepper-legend {
        margin: 0px;
    }

    /*.grid-toolbar-custom {
        background-color: white;
        padding: 0px;
        margin: 0px;
        height: auto;
    }*/
    .loto-input, .k-grid-search.k-input-solid {
        border: 1px solid var(--color-teal) !important;
    }

    .k-grid-content {
        padding: 0px;
    }

    .activity-grid .k-table-tbody .k-table-row {
        display: block;
        margin: 0px;
        padding: 0px;
        background-color: transparent;
        border-radius: 0px !important;
    }


    .activity-grid .k-table-tbody .k-table-row .k-table-td {
        font-size: var(--font-size-normal);
    }

    /*ACCESS MODE*/
    .access-choice-modal .k-window-title {
        white-space: pre-line;
        max-width: 250px;
        margin: auto;
        max-height: 120px;
    }

    .ssn-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .service-container .k-form-field-wrap {
        width: 100%;
    }

    /*AVAILABILITIES*/
    .filters {
        width: 90vw;
        height: auto;
        margin-left: unset;
    }

    .filters .k-form {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .filters .k-form .k-form-field {
        width: 100%;
        margin-top: 0px;
    }

    .filters .k-form .k-form-buttons {
        width: 100%;
        margin-top: var(--size-s);
    }

    .filters .k-form .k-form-buttons .loto-button {
        width: 100%;
    }

    /*
        .filters .k-form {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

            .filters .k-form .k-form-field {
                width: 100%;
                margin-top: 0px;
            }

            .filters .k-form .k-form-buttons {
                width: 100%;
                margin-top: var(--size-s);
            }

                .filters .k-form .k-form-buttons .loto-button {
                    width: 100%;
                }*/
    .list-header {
        flex-direction: column;
    }

    .list-header h4 {
        text-align: center;
    }

    .loto-back-button {
        border: none;
        font-size: var(--font-size-oversize);
        font-weight: bold;
        background-color: var(--color-background) !important;
        width: 100%;
        border-radius: 0px;
    }

    .availability-list {
        width: 100vw;
        height: auto;
        padding: 0px;
        background-color: transparent;
    }

    .availability-container {
        width: 100vw;
        background-color: transparent;
    }

    .availability-day-date-details {
        min-width: unset;
    }

    .availability-day-word {
        font-size: 12px;
    }

    .availability-day-day {
        font-size: 26px;
        line-height: 28px;
    }

    .availability-day-month-word {
        font-size: 12px;
    }


    .availability-list-container {
        height: auto;
        overflow-y: hidden;
    }

    .availability-page-container {
        overflow-y: scroll;
        display: block;
        display: block;
        height: auto;
    }

    .availability-day-container {
        border-radius: 0px !important;
        justify-content: center;
        justify-items: center;
    }

    .availability-page-container .stepper-container {
        position: fixed;
    }

    .availability-day-actions {
        margin-left: var(--size-xxxs);
    }

    .availability-day-actions .loto-button.link .k-button-text {
        font-size: var(--font-size-oversize);
    }

    .availability-day-actions .loto-button {
        min-width: unset;
    }

    /*SLOTS*/
    .availability-slot-container .list-header {
        align-content: center;
        align-items: center;
    }

    .availability-slot-container .list-header h4 {
        max-width: 300px;
        white-space: pre-line;
    }

    .slot-date {
        padding: var(--size-xxxs);
        font-size: var(--font-size-oversize);
        min-width: unset;
    }

    .slot-details div {
        padding: 0px;
        border-right: none;
        text-align: left;
    }

    .slot-container {
        border-radius: 0px;
        flex-wrap: nowrap;
    }

    .slot-details {
        flex-direction: column;
        flex-grow: 1;
        border-right: 1px solid #999;
        padding: 0.5em;
    }

    .slot-details div.slot-price {
        flex-direction: row;
        max-width: 200px;
        align-items: center;
    }

    .slot-details div.slot-price .price-header {
        margin-right: auto;
    }

    .slot-details .details-value.bigger {
        font-size: var(--font-size-oversize);;
    }

    .slot-actions .loto-button.link .k-button-text {
        font-size: var(--font-size-oversize);
    }

    /*RECAP*/

    .recap-container {
        height: unset;
    }
    .recap-title {
        background-color: transparent
    }

    .recap-info-header {
        flex-direction: column-reverse;
    }
    .patient-form{
        margin-bottom: 100px;
    }
    .recap-title-start {
        color: black;
        clear: both;
    }

    .recap-details {
        padding: 0px;
        background-color: transparent;
    }

    .recap-list-header {
        flex-direction: column;
    }

    .recap-list-header h4 {
        text-align: center;
    }

    .recap-preparation {
        padding: var(--size-s);
    }

    .patient-form > .k-d-grid {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
    }

    .patient-form .k-form-fieldset.container.big {
        width: 100vw;
        margin-bottom: var(--size-s);
        max-width: unset;
        border-radius: 0px;
    }

    .patient-form .k-form-fieldset.container.small {
        width: 100vw;
        padding-bottom: var(--size-s);
        max-width: unset;
        border-radius: 0px;
    }

    /* APPOINTMENTS */
    .appointment-header {
        height: auto;
        padding-top: var(--size-s);
        border-radius: 0px;
    }

    .appointment-filters {
        padding: var(--size-xxxs);
        padding-left: 0px;
    }

    .appointment-header .checkbox-container {
        font-size: var(--font-size-normal);
    }

    .appointment-list {
        padding: 0px;
        border-radius: 0px;
        background-color: transparent;
        max-height: calc(100vh - var(--header-size-l) - var(--size-l) - var(--size-s));
    }

    .appointment-container-head {
        padding: var(--size-s) var(--size-l);
    }

    .appointment-supercontainer {
        background-color: var(--color-background);
        margin-bottom: var(--size-xs);
    }

    .appointment-container {
        flex-wrap: nowrap;
        /*background-color: transparent;*/
        padding: 0px;
    }

    .appointment-details {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: unset;
        border-right: 1px solid #999;
    }

    .appointment-details div {
        padding: var(--size-xxxs);
        flex-grow: 1;
        width: auto;
        border-right: none;
    }
    .appointment-paziente .value {
        max-width: 100%;
    }

    .appointment-actions {
        width: auto;
    }

    .appointment-actions .loto-button {
        padding: 0px;
        min-width: 110px;
    }

    .appointment-datetime {
        width: auto;
        min-width: 70px;
        font-size: var(--font-size-oversize);
        padding: var(--size-xxxs);
    }
    .appointment-actions .k-button-solid-base:disabled,
    .appointment-actions .k-button-solid-base.k-disabled{
        background-color: transparent;
    }
    
    
    
    .k-window-title.k-dialog-title {
        white-space: pre-line;
    }

    /*PROFILE*/
    .user-profile {
        height: calc(100vh - 72px);
        overflow-y: scroll;
    }

    .profile-header, .profile-form {
        margin-top: 0px;
        border-radius: 0px;
        padding: var(--size-s);
        height: auto;
    }

    .activity-grid-availabilities {
        margin-right: var(--size-s);
    }
}

.list-button.inverse.auto-left {
    /*margin-left: auto;*/
}


/*@media only screen and (min-height: 1900px) {
    .homepage-button.logout-button{
        margin-top:var(--size-l);
    }
}
*/
.cart-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
}

@media only screen and (max-height: 768px) {
    .availability-container {
        height: unset;
    }

    .center-page {
        overflow-y: scroll;
        height: calc(100vh - 54px);
    }
}

.doctor-small-screen, .doctor-small-screen .button-text {
    display: none !important;
}

.doctor-large-screen {
    display: block !important;
}

@media only screen and (max-width: 610px) {
    .doctor-small-screen, .doctor-small-screen .button-text {
        font-size: var(--font-size-normal);
        display: block !important;
    }

    .doctor-small-screen .not-chosen {
        opacity: 0.5;
    }

    .doctor-large-screen {
        display: none !important;
    }

    .cookie-banner-content {
        width: 85vw;
    }

    .loto-button.list-button.availability-button {
        margin-left: auto;
    }

    .cart-actions {

    }

    .resource-choice-modal .k-window-title {
        white-space: pre-line;
        width: 95vw;
        max-width: 595px;
        text-overflow: ellipsis;
        margin: auto;
        max-height: 450px;
    }

    .switch-label {
        margin-left: unset;
    }

    .switch-label.selected {
        font-weight: bold;
        color: white
    }

    .switch-label.unselected {
        font-weight: normal;
        color: var(--color-gray-text);
    }

    .chosen-activity .loto-row {
        width: 100%;
    }

    .k-table-tbody .k-table-row .list-item-container {
        border-radius: unset;
        flex-wrap: nowrap;
    }

    .k-table-tbody .k-table-row .list-item-container {
        flex-direction: row;
        align-items: center;
    }

    .chosen-activity .list-item-container .name > span {
        background-color: white;
        border-radius: 5px;
        color: black;
    }

    .availability-day-activities p {
        width: unset
    }

    .chosen-activity .list-item-container .name {
        width: unset;
        margin-right: unset;
    }

    .k-table-tbody .k-table-row.chosen-activity .list-item-container, .activity-grid-availabilities .k-table-tbody .k-table-row .list-item-container {
        flex-direction: row;
        padding: var(--size-xxxs) 0px 0px 0px;
        gap: 3px;
    }

    .k-table-tbody .k-table-row.chosen-activity .list-item-container, .activity-grid-availabilities .list-item-container .loto-button.list-button {
        /*width: 100%;*/
        border-radius: 0px;
        background-color: var(--color-teal);
        margin: 0px;
        color: white;
        margin-left: auto;
    }

    .chosen-activity .k-label {
        color: white;
    }

    .chosen-activity .list-item-container,
    .chosen-activity .list-item-container .name,
    .chosen-activity .list-item-container .name > span,
    .chosen-activity .list-item-container .name > span {
        /*width: 100%;*/
        text-align: center;

    }

    .chosen-activity .list-item-container .name,
    .chosen-activity .list-item-container .name > span,
    .chosen-activity .list-item-container .name > span {
        display: inline-block;
        margin-right: auto;
        max-width: calc(100vw - 150px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .chosen-activity .k-table-td.k-table-group-td.k-group-cell, .activity-grid-availabilities .k-group-col {
        width: 0px;
    }

    .icon-list-item {
        display: none
    }

    .chosen-activity .list-item-container, .activity-grid-availabilities .k-table-tbody .k-table-row .k-table-td .filters-single-container {
        margin-left: unset;
    }

    .availability-day-container {
        /*flex-direction: column;*/
        align-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }

    /*.availability-day-details{*/
    /*    flex-direction: column;*/
    /*}*/
    .availability-day-container div {
        border-right: none;
        align-content: center;
        justify-content: center;
    }

    .availability-day-container div p {
        text-align: center;
    }

    .availability-day-container div p span {
        text-align: center;

    }

    .availability-day-container div p span.details-value {
        margin-right: 0px;
    }

    .availability-day-container div .loto-button {
        margin-left: unset;
    }

    .availability-day-date {
        max-width: 80px;
        width: 80px;
        min-width: 80px;
    }

    .availability-day-center-container {
        flex-direction: column;
        margin-right: auto;
        max-width: 100px;
    }

    .availability-day-container .availability-day-details {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        min-width: unset;
        width: unset;
        padding: var(--size-xxxs);
    }

    .availability-day-activities {
        min-width: unset;
        width: unset;
        align-items: flex-start;
        align-content: flex-start;
    }

    .availability-day-details p {
        flex-direction: row;
        justify-items: flex-start;
        padding: 0px;
        width: unset;
        border-right: none;
        gap: 10px;
        font-size: var(--font-size-small);
    }

    .availability-day-details p.double {
        justify-content: flex-start;
        width: unset;
        max-width: 150px;
    }

    .availability-day-details p .details-value {
        text-align: left;
        margin-right: auto;
        font-size: 18px;
    }

    .activity-grid .k-table-tbody .k-table-row .k-button-text {
        /*color: var(--color-teal);*/
    }

    .activity-grid .k-table-tbody .k-table-row .loto-button {
        min-width: 50px;
        max-width: 60px;
        padding-left: 24px;
    }

    .list-button {
        /*background-color: transparent;*/
        border: none;
    }

    .list-button:hover {
        background-color: transparent;
        color: var(--color-teal);
    }

    .button-text {
        display: none;
    }

    .activity-grid .chosen-activity .loto-button.inverse {
        min-width: unset;
        padding: 0px 5px;
        width: 50px;
    }

    .stepper-container {
        padding: var(--size-xxxs) 0px;
    }

    .activity-grid {
        margin-top: var(--size-xxxs);
    }


    .activity-grid-availabilities {
        margin-right: 0px;
    }


    .icon-list-item {
        display: none
    }

    .k-table-tbody .k-table-row.chosen-activity .list-item-container, .activity-grid-availabilities .k-table-tbody .k-table-row .k-table-td .filters-single-container {
        margin-left: unset;
    }
}

/*Extra small devices*/
@media only screen and (max-width: 400px) {
    .slot-container {
        flex-wrap: wrap !important;
    }
}

@media only screen and (max-width: 1920px) {
    .large-screen {
        display: none;
    }
}

@media only screen and (min-width: 1921px) {
    .medium-screen {
        display: none;
    }
}

.loto-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.moving-details{
    font-size: var(--font-size-oversize);
    font-style: italic;
}

.privacy-button{
    margin-top: auto;
}