@media only screen and (max-width: 480px) and (orientation: portrait),
       only screen and (max-height: 480px) and (orientation: landscape) {
    .modal-dialog [class*="colh-"] {
        width: unset;
    }

    #modalForm.show {
        display: block!important;
    }
    .quick #ct_person #table-wrapper {
        height: 100%;
        width: 100%;
        --cell-size: 44px;
        --cell-spacing: 8px;
        --more-persons-margin: 14px;
    }
    #ct_person #table-wrapper {
        --cell-size: 50px;
        order: 0;
        align-items: center;
    }
    .outletsChooser {
        width: 100%;
    }
    .select2-container {
        min-width: 100px;
    }
    #ct_person .extraSettingColRes {
        transform: translateY(0%);
    }
    body {
        width: 100%;
        padding: 0px!important;
    }
    .content-container {
        border-radius: 0;
		
    }
    #reservationSlider,
    #reservation-filter,
    .navigationPart {
        display: none;
    }
    header .header-segment:not(:last-child) {
        border: 0px;
        width: 100%;
    }
    .dateHeaderPart {
        flex: 0 0 90%;
    }
    .mainPart {
        flex: 0 0 10%;
    }
    .mainPart svg {
        width: auto;
        max-width: 38px;
        margin: 0 auto;
        margin-right: 10px;
        top: -16px;
        position: relative;
    }
    #rating-overview h1 {
        font-size: 17px;
        font-family: var(--roboto);
        font-weight: normal;
    }
    .rating-item {
        flex-wrap: wrap;
    }
    .rating-list-left>div>div {
        flex-direction: column!important;
        display: flex!important;
    }
    #rating-list-header h3 {
        font-size: 17px;
        font-family: var(--roboto);
        font-weight: normal;
    }
    #rating-list-header button {
        text-transform: uppercase;
        border-radius: 4px;
        border: 0;
        background-color: var(--ci-grey-80);
        color: #fff;
        width: 43%;
        height: 38px;
        float: left;
        font-size: 14px;
        padding: 5px 10px;
    }
    #reservation-detail-header {
        -webkit-flex-wrap: nowrap;
        flex-wrap: wrap;
    }
    .rating-detail>div {
        display: inherit;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        flex-wrap: wrap;
        align-items: center;
    }
    .ratingWholeInfoItem {
        float: left;
        width: 32.5%;
        text-align: center;
        font-size: 14px;
    }
    #right-container {
        padding: 0px;
    }
    .square-grid {
        display: none;
    }
    .quick .modal-body,
    .details .modal-body,
    .tableSettingsModal .modal-body {
        height: unset;
    }
    .quick .modal-body {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto auto;
        padding: 5px;
        grid-column-gap: 10px;
        grid-row-gap: 0;
        width: 100vw;
    }
    .add-reservation-content-item {
        width: 100%;
        height: 100% !important;
        max-width: 100% !important;
    }
    .btnPlan {
        display: none!important;
    }
    /*#ct_table .freeTables {
        display: none !important;
    }*/
    .quick #ct_time #busy-time-col {
        order: 2!important;
    }
    #ct_time .extraSettingColRes {
        flex: 0 0 50%;
    }
    #ct_table.add-reservation-content-item {
        height: auto;
    }
    #ct_table .square.freeTable {
        width: 14%;
        padding-bottom: 14%;
    }
    #ct_person .add-reservation-content-content>div {
        order: 2;
        flex: 0 0 100%!important;
    }
    #ct_person.walkin .add-reservation-content-content {
        display: flex;
        flex-wrap: wrap;
    }
    #ct_time #clock-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .quick .ui-datepicker-calendar td {
        width: 44px;
        height: 44px;
    }
    #reservation-detail-header div.customerCell {
        flex: 0 0 100%!important;
    }
    #reservation-detail-body {
        grid-template-columns: repeat(1, 1fr);
        grid-row-gap: 10px;
    }
    .phoneCell,
    .contactCell {
        width: 100%;
        margin-bottom: 3px;
        float: left;
    }
    .info-box-rating-detail {
        width: 33%;
        text-align: center;
        margin-bottom: 0px;
        border-top: 1px solid #969594;
        margin-top: 10px;
    }
    .notes {
        height: 200px;
    }
    .modal-body {
        height: 0;
    }
    .modal-footer {
        display: flex;
        flex-wrap: wrap;
        padding: 7px 0 !important;
        height: auto !important;
    }
    #reservationList-header {
        min-height: 50px!important;
        padding: 7px;
    }
    #reservationList-header>.row {
        width: 100%;
        height: 34px!important;
        padding: 0px;
        box-shadow: none;
        display: table;
    }
    #reservationList-header>.row .col-md-7 {
        width: 60%;
    }
    #reservationList-header>.filterRow>div {
        display: table-cell;
        vertical-align: bottom;
    }
    #statistics>span>h5,
    #reservations-total h1 {
        font-size: 14px!important;
    }
    .search-filter {
        border-radius: 0px;
    }
    #reservations-total h1 {
        font-weight: bold!important;
    }
    #statistics {
        padding: 0px;
        width: 40%!important;
        padding-bottom: 3px;
    }
    #statistics>span {
        float: left;
    }
    .reservations-statistics-block {
        position: relative;
        top: 4px;
        right: 0px;
        float: left;
    }
    .reservations-statistics-block svg {
        float: left;
        height: 15px;
        top: 4px;
        position: relative;
        left: 4px;
    }
    #reservations-total {
        padding: 0;
        position: relative;
        top: 10px;
        right: 0;
        float: left;
        display: inline-block;
    }
    div.reservations-statistics-block br {
        display: none;
    }
    #people-total {
        display: block;
        text-align: center;
        float: left;
        left: 7px;
        position: relative;
        top: 3px;
        font-size: 14px;
        font-weight: bold;
    }
    #reservation-detail-footer {
        height: auto;
        flex-wrap: wrap;
    }
    div#reservation-detail-footer>div {
        flex: 0 0 33%;
        word-break: break-all;
        margin-top: 10px;
    }
    #reservationList-footer {
        align-content: center;
        justify-content: center;
        height: 80px;
    }
    #reservationList-footer li {
        padding-top: 5px;
    }
    #reservationList-footer span {
        margin-top: 4px;
        text-align: center;
    }
    #reservationList-footer li img {
        height: 30px;
    }
    .itemContent .peopleInfo {
        width: 65px!important;
        font-size: 16px;
    }
    .itemContent .personInfo {
        font-size: 12px;
    }
    .reservation-system-info {
        flex: 0 0 90%;
        flex-wrap: wrap;
        padding: 5px 10px;
        margin-bottom: 10px;
    }
    #nav-overlay .spacer {
        display: none;
    }
    .logOutSpacer {
        width: 60px !important;
    }

    #reservation-scrollbar {
        display: none !important;
    }

    #colorOverview {
        flex-wrap: wrap;
    }

    .ui-datepicker-calendar td {
        width: unset;
        min-width: unset;
    }

    #ct_person table {
        transform: none;
    }

    #ct_table .filterRoom {
        min-width: unset;   
    }

    #ct_table #overview-settings {
        width: unset;
    }

    #ct_table .tables .nano {
        min-height: 150px;
    }

    #ct_table .freeTables, #ct_table .reservation-info-overview {
        height: unset;
        float: unset;
        padding: 0 0 1rem;
    }

    .freeTable .tableName {
        font-size: unset;
    }

    #ct_customer .subcontent {
        padding: 0 1.2rem;
    }

    #ct_customer #searchFields, #ct_customer #resultDiv {
        width: 100%;
        height: 50%;
        float: unset;
        padding: unset;
    }

    #ct_customer #resultDiv {
        padding: 10px;
    }

    #ct_infos .add-reservation-content-content > div:first-child {
        display: none;
    }
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
    .modal-dialog {
        width: 100vw;
        height: 100vh;
    }

    .modal-content {
        height: 100%;
    }

    #reservationList {
        width: 100%;
    }

    #resizeHandle, .resOverview {
        display: none !important;
    }
}

@media only screen and (max-height: 480px) and (orientation: landscape) {
    :root {
        --header-height: 0px;
    }

    header {
        display: none;
    }

    #resizeHandle, #reservationList {
        display: none;
    }

    .resOverview {
        width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .quick .modal-body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: stretch;
        gap: 10px;
        padding: 10px;
        width: 100%;
        overflow-y: auto;
    }
}