﻿/* MEDIUM SCREENS */
@media (max-width:1905px) and (min-width:1581px) {
    .thumbnailImage {
        width: 6.6vw;
    }

        .thumbnailImage img {
            width: 6.6vw;
        }

    .hotelReminderText {
        font-size: 1.8vw !important;
    }
}

/* SMALL SCREENS */
@media screen and (max-width: 1580px) {
    .hotelPhotos > .carousel {
        width: 100%;
    }

    .hotelReminderText {
        font-size: 2vw !important;
    }
}

/* NOTEBOOK LIKE */
@media screen and (max-width: 1470px) {
    .Banner, .DemoMain {
        position: relative;
        left: 105px;
    }

    .hotelReminderText {
        font-size: 2vw !important;
    }
}

/* SMALL RESOLUTION & SMARTPHONES LANDSCAPE */
@media screen and (max-width: 1270px) {
    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    .hotelReminderText {
        font-size: 2vw !important;
    }

    .tileMap {
        display: none;
    }

    .tileMini .brand .name {
        margin-bottom: 7px !important;
    }

        .tileMini .brand .name img {
            height: 64px !important;
            display: block;
            margin: auto;
        }

    .bestDeal {
        height: 230px !important;
    }

    table:not(.tableRecapFinanceResaProcess) {
        /*width: 100% !important;*/ /* For Contact Page */
    }

    .reservationContactForm table {
        width: auto !important
    }

    .Banner, .DemoMain {
        position: relative;
        left: 0px;
        width: 100%;
    }

    /*.modal-content
	{
        width: 95vw;
	}*/

    /*.imgBanner
    {
        width: calc(100vw - 8px);
        height: auto;
    }*/
    .imgLogo {
        /*
        position: absolute;
        top: 0px;
        left: 0px;
        height: 11vh !important;
        */
        display: none;
    }

    .filterZone {
        /*display:none;*/
        position: relative;
        display: none;
        height: unset;
        width: 100%;
        font-size: 20px;
        top: unset;
        left: unset;
        /*top:42px!important;
        left:0px!important;*/
    }

    .filterZoneClosed {
        display: none;
        position: absolute !important;
        top: 42px !important;
        left: 0px !important;
        width: 100px !important;
        height: 38px !important;
        line-height: 12px;
        background-color: transparent;
        border-right: 2px solid white;
    }

        .filterZoneClosed a {
            font-weight: 400;
            font-size: 9pt !important;
        }

    .filterHR {
        width: 100%;
        padding-top: 7px;
        padding-bottom: 7px;
    }


    #spanFilter A:link {
        font-size: 20px;
    }

    #spanFilter a img {
        display: none;
    }

    .txtFilterHotelName {
        margin-top: 5px;
        /*width: calc(100% - 50px);*/
        width: 97%;
        height: 30px;
    }

    .btFilterHotelName {
        margin-top: 0px;
        height: 30px !important;
        font-size: 20px !important;
        line-height: 20px;
    }

    .filterEquipments {
        width: 100%;
    }

    .HomeResponsive {
        display: inline;
    }

    .sliderDistance {
        width: 250px;
        margin-left: 6px;
        margin-bottom: 2px;
    }

    .sliderRooms {
        width: 270px;
        margin-left: 6px;
        margin-bottom: 2px;
    }

    .filterDateFrom, .filterDateTo {
        width: 48%;
        height: 30px;
    }

    .filterSliderRange {
        width: 95%;
    }

    #spanFilterClosed {
        display: none;
    }

    #spanFilterClosedResponsive {
        display: inline;
    }

        #spanFilterClosedResponsive a {
            color: White !important;
        }

    .filterContent * {
        font-size: 15px;
    }

    .showFilterZone {
        padding-left: 334px;
    }

    .searchResponsive {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: #CCCCCC;
        color: White;
        text-align: center;
        padding-top: 10px;
        margin-right: 5px;
    }

    .button.standart {
        font-size: 18px;
        line-height: 18px;
    }

    .customText, .ribbonText {
        margin-right: 0px;
    }

    /* HOTEL LIST */
    .rateSort {
        position: absolute;
        left: 200px;
    }

    .distanceSort {
        position: absolute;
        left: 350px;
    }

    .categorySort {
        position: absolute;
        left: 500px;
    }

    .switchLayout {
        display: block;
        position: absolute;
        left: 718px;
        top: 0;
        border-left: 4px solid white;
        height: 50px;
        width: 96px;
    }

        .switchLayout > table {
            margin: auto;
            text-align: center;
            display: inline-block;
            width: 100px;
        }

            .switchLayout > table td {
                height: 50px;
                width: 48px;
            }

    .containtPlaceHolderDiv {
        width: 100%;
        margin-left: 2px;
    }

    .showFilterZone {
        padding-left: 0px;
    }

    .tile.full {
        width: 100%;
        left: 0px;
    }

    .tile .tile-filter {
        width: 100% !important;
    }

    .quadro, .double {
        width: calc(100% - 20px) !important;
    }
    /* HOTEL */
    .hotelPhotos > .carousel {
        width: 100%; /*margin-left:-35px; width:493px;*/
    }

    .carousel .markers li a {
        width: 29px !important;
    }
    /*.hotelReminder { width: 100%; }*/
    .equipments {
        white-space: normal !important;
    }
    /*.scrollToTop{ right:30px; }*/
    .dlHotels {
        width: 100%;
    }

    .pgwSlideshow .ps-current {
        min-width: 100% !important;
    }
    /*.tableProducts { display: none; }*/
    .odd th, .even th {
        text-align: left;
        padding-left: 5px;
        padding-right: 5px;
        white-space: nowrap;
    }
    /* Fiche Hotel */
    TD.roomType {
        text-align: left;
        white-space: normal; /* Compulsory nights */
    }

    .thumbnailImages {
        display: inline-block;
    }

    .divScrollToMap {
        padding-top: 35px;
    }

    /* TEXTS SCREENS */
    .tiles .mainDivText, .CustomPage {
        width: 100%;
    }
    /* DON'T IMPACT POLICY */
    .mainDivText {
        text-align: left;
    }

    .CustomPage > table tr td {
        display: block;
    }

    .CustomPage > table img {
        max-width: 100%;
    }

    /* MAPS */
    .borderMap, .cadreMap, .cadreMapBig {
        width: 100%;
    }

    #panelMap {
        width: 100%;
    }

    /* MAPS POI */
    #divShowHideDirectionsInformation {
        right: 5px !important;
    }

    .select2-container {
        width: 180px !important;
        margin-right: 10px !important;
    }

    #map_canvasPOI {
        width: 535px !important;
    }
    /*#directionsPanelMap { width:280px!important; }*/

    /* GENERAL INFORMATION */
    .generalInformationTable {
        width: 50% !important;
    }

    /* RESA PROCESS */
    .step {
        width: 197px !important;
    }

    .reservationAuthentication {
        right: 0px;
    }

    .selectedHotel {
        display: none;
    }

    .reservationGuests {
        margin-right: 4% !important;
    }

    .scrollToLeftTD, .scrollToRightTD {
        width: 42px;
    }

    .scrollToLeft, .scrollToRight, .scrollToLeft:hover, .scrollToRight:hover {
        width: 40px;
        background-position: -15px center;
    }

    .calendarDateTile .tileContent, .calendarDateTile .tileSelectedContent {
        width: 50px;
    }

    .calendarDateTile .tileContentWithCurrency, .calendarDateTile .tileSelectedContentWithCurrency {
        width: 50px;
    }

    .pnlReservationDone {
        width: 97vw;
        height: 97vh;
    }

    .GuestDetailsFloatLeft {
        float: none;
        padding: 3px 0;
    }

    .styled-input {
        white-space: nowrap;
    }

    /* BASKET */
    #myBasket .basketReservationsList div {
        float: none;
    }

    .basketReservationsList-item .hotel-date:first-of-type {
        padding-right: 0 !important;
    }

    .basketReservationsList-item p.hotel-persons {
        text-align: center !important;
    }

    #myBasket .basketReservationsList {
        margin-bottom: 5px;
    }

        #myBasket .basketReservationsList .hotelRoom, #myBasket .basketReservationsList .guestsDates, #myBasket .basketReservationsList .deposit {
            width: 100%;
            line-height: normal;
        }

        #myBasket .basketReservationsList .depositText, #myBasket .basketReservationsList .depositAmount {
            display: inline-block;
            width: auto;
        }

        #myBasket .basketReservationsList .actions {
            clear: both;
        }

        #myBasket .basketReservationsList .deposit {
            float: none;
            text-align: center;
        }

    #myBasket #financialDetails, #myBasket #payment {
        float: none;
        width: 99%;
        clear: both;
        margin-top: 10px;
    }

    #myBasket .finalizeRequest {
        margin-right: 0px;
    }

    .confirmOrder {
        width: 100%;
        white-space: normal;
    }

    .editPopupResa {
        width: 97vw !important;
    }

    /* MANAGE MY RESA */
    .tile.middle {
        width: 96% !important;
    }

    .modificationSearch, .modificationHotelInformation {
        width: /*818px*/ 100% !important;
    }

    .modificationSearch {
        height: 100px !important;
    }

        .modificationSearch > a.button {
            margin: 15px auto 15px 0 !important;
            width: 143px;
            display: block;
        }

    .modificationReservationsList td {
        padding: 0px;
    }

    .modificationItem {
        width: 95% !important;
        text-align: center;
    }

        .modificationItem .reservationDetails td {
            text-align: center !important;
            padding-bottom: 15px;
        }

        .modificationItem .button {
            white-space: normal; /* For mobile design buttons text can be wrapped */
            height: auto;
            margin: auto;
        }

        .modificationItem > div {
            margin: 10px auto;
        }

    .modificationEdit {
        width: 100% !important;
    }

        .modificationEdit .reservationDates {
            margin-right: 5px;
        }

            .modificationEdit .reservationDates > div {
                float: left;
                clear: left;
                margin-top: 5px;
            }

                .modificationEdit .reservationDates > div:nth-child(2n) {
                    float: right;
                    clear: right;
                }

    .modificationEditTable {
        width: 100% !important;
    }

    .modificationHeader, .modificationFooter {
        text-align: center;
        margin: 5px;
    }

        .modificationFooter input.button {
            margin: 5px auto 5px auto;
            display: block;
        }

    .ConfirmFinish, .modificationFlightEdition {
        width: 96vw;
        height: auto !important;
        overflow-y: auto !important;
    }

        .ConfirmFinish:not(.modificationFlightEdition) {
            /*top: 40vh !important;*/
            top: 15vh;
            max-height: 75vh;
        }

    .offset1 {
        margin-left: 0px;
    }
    /* Thank You Page - ResaSubmitted */
    .thankYouDiv {
        padding-right: 10px;
    }
    .thankYouTitle{
        font-size:24pt;
        padding-top: 20px;
    }

    /* GEOGRAPHIC LIST */
    .geographicListWithMap {
        width: 224px !important;
    }
    /* FOOTER */
    /*.Footer { margin-left:210px; }*/
    /* LOGIN */
    .provider {
        margin: 20px 0px 0px 0px;
        right: 10px;
    }

    .divSignInFirstTime {
        min-height: 200px;
    }

    .SearchEquipments label {
        font-size: 10px;
    }

    .r-container {
        /* bug with inline-flex check if is still working for RG */
        display: flex !important;
    }

    .navbar-fixed-bottom.editMode {
        position: absolute !important;
        width: 100% !important;
        z-index: 100 !important;
        bottom: initial !important;
    }

    .spanAvailableHotels {
        /*display: block!important*/
    }
}

@media screen and (max-width: 800px) {
    .thumbnailImage {
        height: 70px;
        width: 110px;
    }

    .hotelReminderText {
        font-size: 20px !important;
    }

    .thumbnailImage > span {
        height: 70px;
        width: 110px;
        padding-left: 5px;
    }

    .thumbnailImage + .thumbnailImage {
        padding-left: 0px;
    }

    .thumbnailImages {
        display: inline-block;
        height: 150px !important;
    }

    .multiplePayments {
        width: 99% !important;
    }

    .cardMultiplePayments {
        width: 45%;
    }

    .moveAllMultiplePayments {
        display: none;
    }

    .labelHotelMultiplePayment {
        font-weight: 700;
        font-style: italic;
        font-size: 10px;
    }

    .labelMainGuestMultiplePayment {
        font-size: 10px;
    }

    .btnMobileMultiplePayment {
        display: inline-block !important;
    }

    .btnMobileMultiplePaymentHide {
        display: none !important;
    }

    .switchCompany {
        display: block !important;
    }
}

@media screen and (max-width: 700px) {
    .thumbnailImages {
        display: none;
    }
}

/* SMARTPHONES PORTRAIT */
@media screen and (max-width: 500px) {

    .hotelReminderText {
        font-size: 18px !important;
    }

    .flexbox {
        flex-direction: column;
    }

    .modificationEdit .reservationDates {
        width: 90%;
        display: block;
    }

    .modificationEditTable .personDetails input[type="text"] {
        display: block;
    }

    .modificationEditTable .personDetails input[type="text"], .modificationEditTable select {
        margin-top: 5px;
        margin-left: 10px;
    }

    .modificationEditTable > tr > td, .modificationEditTable > tbody > tr > td {
        padding-bottom: 20px;
    }

    .button.standart {
        font-size: 16px;
    }

    /* Watermark */
    .styled-input label {
        font-size: 8.5pt;
    }

    .customSitemap a {
        font-size: 7.5pt;
    }

    /* HOTEL LIST */
    .labelSort {
        display: none;
    }

    .tile-filter {
        display: flex;
        flex-wrap: nowrap;
        font-size: 9pt;
    }

        .tile-filter input[type="image"] {
            height: 12px;
        }

        .tile-filter > div {
            position: relative !important;
            left: initial;
            flex-grow: 1;
        }

    /* En mode mobile on agrandit le bouton addtobasket et on masque l'icone */
    .button.addToBasket {
        width: 100%;
    }

        .button.addToBasket.ico-addToBasket:before {
            background-image: none;
        }

    /* RESA PROCESS */
    .tableRecapFinanceResaProcess {
        width: 100%;
    }

    .recapFinanceResaProcessValue {
        text-align: right;
    }
}


table tbody tr td {
    padding: 3px 5px;
}

.personDetails.imw > * {
    display: block;
    margin-bottom: 10px;
}

@media screen and (min-width: 361px) and (max-width: 375px) {
    table tbody tr td {
        padding: 3px 5px;
    }

    .styled-input.wide.reservation {
        min-width: 136px;
    }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
    table tbody tr td {
        padding: 3px 5px;
    }

    .styled-input.wide.reservation {
        min-width: 129px;
    }
}

@media screen and (max-width: 320px) {
    table tbody tr td {
        padding: 3px 5px;
    }

    .styled-input.wide.reservation {
        min-width: 109px;
    }
}
