@media screen and (max-height: 820px) {
    .ETMI_confirmdialog {
        width: initial !important;
        left: initial !important;
    }

    .content-body {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
    }
    #information_pdf .splashscreen {
        margin-top: 0%;
        margin-left: 0%;
        width: 100%;
        height: 100%;
        position: relative;
    }

    #information_pdf .splashscreen span.close-btn {

    }

    input[type="date"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="text"],
    select,
    textarea {
        font-size: 16px !important;
    }

    .grecaptcha-badge {
        visibility: hidden;
    }

    .actions-btns {
        width: 100%;
        margin-top: 10px;
    }

    .search, .slot-selection, .patient, .finalize, .cancel {
        overflow-y: auto;
    }

    #content {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        min-height: 100%;
        height: 100%;
        margin-top: 0;
        margin-left: 0;
        position: relative;
    }

    .sticky {
        display: none;
    }

    .content-calendar {
        justify-content: center;
        width: 100%;
        flex: 1;
        overflow-y: auto;
        margin-left: 0;
        border: 0 none;
    }

    #content[data-part="slot-selection"] .content-text {
        flex-direction: column;
    }

    #content[data-part="slot-selection"] .content-text h2 {
        width: 100%;
        min-width: 100%;
    }

    #content[data-part="slot-selection"] [data-role="first-disponibility"] {
        width: 240px;
        display: block;
    }

    div[data-role="slot-filter"] .site {
        display: none;
    }

    div[data-role="slot-filter"] .filter {
        flex-direction: column;
    }

    .slot-selection {
        padding: 0 10px;
        margin-top: 0;
        overflow: hidden;
        max-height: 100%;
        flex-direction: column;
        flex: 1;
    }

    .slot-selection button {
        font-size: 14px;
        margin: 5px;
        padding: 2px 15px;
    }

    .slot-selection .current-week {
        width: 100%;
        text-align: center;
        color: var(--blue);
        font-weight: bold;
    }

    .slot-selection .panel {
        max-height: 100%;
        overflow: auto;
    }

    .slot-selection .panel-heading {
        padding: 8px 10px;
        height: 48px;
        display: flex;
        align-items: center;
    }

    .slot-selection .panel-heading p {
        margin: 0;
        width: calc(100% - 175px);
        color: var(--blue);
    }

    .slot-selection .arrow-displayed {
        float: right;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slot-selection .panel-heading .label {
        flex: 1;
        color: white;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        height: 100%;
        white-space: normal;
    }

    .slot-selection .panel-heading .label.disponibilities-filtered {
        border: 1px dashed var(--border-slot);
        background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 5px);
        background-color: var(--blue-slot);
        color: black;
    }

    .slot-selection .panel-heading .label > div {
        flex: 1;
    }

    .slot-selection .panel-heading .label-default {
        background-color: #D9D9D9 !important;
        color: black;
    }

    .slot-selection .panel {
        margin: 0px !important;
        overflow: hidden;
    }

    .slot-selection .panel-body {
        padding: 10px;
        max-height: calc(100% - 55px) !important;
        height: calc(100% - 55px) !important;;
        overflow: auto;
    }

    .slot-selection .content-slots {
        overflow: auto;
        height: auto;
    }

    .slot-selection .show-more {
        overflow: hidden;
        max-height: 20px;
    }

    .arrows {
        padding: 0;
        position: relative;
        top: 0;
        display: flex;
        width: 100%;
        height: 40px;
        align-items: center;
        justify-content: center;
    }

    .slot-confirmation {
        display: none;
        border-top: 0px;
        flex: 1;
        width: 100%;
        margin-left: 0px;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }

    .slot-confirmation .part {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .slot-confirmation .part.site {
        flex: initial;
    }

    .slot-confirmation .part.physician {
        flex: 1;
    }

    .slot-confirmation .part:nth-child(2n) {
        flex-basis: 40%;
    }

    .slot-confirmation .return-disponibilities {
        flex-basis: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slot-confirmation .part .title {
        white-space: normal !important;
        align-items: center;
        justify-content: center;
    }

    .slot-confirmation .part .form-group {
        text-align: center;
    }

    .slot-confirmation select {
        width: calc(100% - 20px);
        display: inline-block;
    }

    .slot-selected {
        flex-direction: row;
    }

    .slot-confirmation label {
        display: inline-block;
        width:auto !important;
    }

    [data-role="echo-slot-selected"] {
        flex: 1;
    }

    #content[data-part="patient"] .actions-btns {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        gap: 10px;
    }

    #content[data-part="patient"] .actions-btns > div {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #content[data-part="patient"] .actions-btns .confirm-mobile,
    #content[data-part="slot-selection"] .actions-btns .confirm-mobile {
        display: block;
        height: 100%;
        width: 100%;
    }

    #content[data-part="slot-selection"] .actions-btns .confirm-mobile {
        display: none;
    }

    #content[data-part="patient"] .actions-btns .confirm-desktop,
    #content[data-part="slot-selection"] .actions-btns .confirm-desktop {
        display: none;
    }

    #content[data-part="patient"] .actions-btns > button[data-part="confirm"] {
        height: 100%;
        width: 100px;
    }

    #content[data-part="patient"] .actions-btns .confirm-mobile .icon-checkmark,
    #content[data-part="slot-selection"] .actions-btns .confirm-mobile .icon-checkmark {
        font-size: 30px;
    }

    #content[data-part="slot-selection"] .actions-btns {
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 10px;
    }

    #content[data-part="slot-selection"] .actions-btns > div {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #content[data-part="patient"] .actions-btns button, #content[data-part="slot-selection"] .actions-btns button {
        width: 200px;
    }

    #content[data-part="patient"] .content-children {
        display: flex;
        gap: 10px;
        flex-direction: column;
    }

    #content[data-part="slot-selection"] .content-children {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}