aside.bookingmask {
    overflow: unset;
}

.datepicker__info--selected, .datepicker__info--help {
    text-align: center;
    padding: 10px;
    background: #f0f0f3;
}

.big-date {
    text-align: center;
}

    .big-date .fa-arrow-circle-right, .big-date .fa-chevron-right {
        font-size: 30px;
        position: absolute;
        left: 47%;
        top: 50px;
    }

.big-date-checkin, .big-date-checkout {
    width: 50%;
    float: left;
    margin-top: 10px;
}

.big-date-checkin-bookingmask, .big-date-checkout-bookingmask {
    width: 49%;
    float: left;
    background-color: #fff;
    cursor: pointer;
    height: 85px;
    border: 1px solid #e8e5e5;
}

.big-date-checkin-bookingmask {
    margin-right: 5px
}

.big-date-checkout-bookingmask {
    margin-right: 0
}

.big-date-txtchkIn-bookingmask, .big-date-txtchkOut-bookingmask {
    font-size: 12px;
    padding: 8px 5px 0 5px;
    color: #b6b6b6;
}

.datepicker__topbar {
    padding: 10px
}

.datepicker__months {
    float: left;
    width: 100%;
    top: 0;
    padding: 20px;
}

#datepicker-input-id {
    right: 0;
}

.datepicker {
    border-radius: 0px;
    top: 173px
}

.datepicker__month-caption th {
    text-align: center;
}

th.datepicker__month-name {
    width: 100%;
}

th.datepicker__week-name {
    text-align: center;
}

/*set big date*/
.big-date-indaynum, .big-date-outdaynum, .big-date-indaynum-bookingmask, .big-date-outdaynum-bookingmask {
    width: 55%;
    float: left;
    font-size: 4em;
    line-height: 1em;
    font-weight: bold;
    text-align: right;
}

.style-date-left, .style-date-right, .style-date-left-bookingmask, .style-date-right-bookingmask {
    float: left;
    text-align: left;
    font-size: 10px;
    line-height: 12px;
    color: #7d7d7d;
    padding-top: 8px;
    padding-left: 3px;
}

.style-date-left, .style-date-right {
    color: #fff;
}

/*booking mask big date*/
.big-date-indaynum-bookingmask, .big-date-outdaynum-bookingmask {
    padding-top: 0px;
    color: #333;
}

#datepicker-input-id-mask .fa-long-arrow-right {
    margin-top: 0px;
}

.fa-long-arrow-right:before {
    position: absolute;
    top: 50px;
    left: 48%;
    font-size: 2em;
}

.booking .select-chk-inout .col {
    width: 100%;
}

#rtl .menuextras .reservations .dropdown-menu-extend {
    left: 0;
    right: inherit
}

    #rtl .bg-head .navbar-toggle,
    #rtl .menuextras .reservations .dropdown-menu-extend h3,
    #rtl .big-date-checkin-bookingmask, #rtl .big-date-checkout-bookingmask,
    #rtl .big-date-checkin, #rtl .big-date-checkout {
        float: right
    }

    #rtl .menuextras .reservations .dropdown-menu-extend #datepicker-input-id {
        left: 0;
        right: inherit
    }

@media (max-width :480px) {

    .datepicker__topbar {
        padding: 8px 10px
    }

    .datepicker__months {
        float: none;
        width: 100%
    }

    .datepicker__month {
        width: 100%
    }

    .datepicker__month--month2 {
        display: table
    }
}

/* portrait */
@media (max-width:414px), (max-width:480px) {

    /*and (max-height: 667px)*/
    /** empty */
    /** set arrow **/
    span.datepicker__month-button.datepicker__month-button--next.fa.fa-angle-right {
        top: 152px !important;
        position: absolute;
    }

    span.datepicker__month-button.datepicker__month-button--prev.fa.fa-angle-left {
        top: 152px !important;
        left: 20px;
        position: absolute;
    }
}

/*nokia n9*/
@media (max-width:480px) and (height:854px) {

    span.datepicker__month-button.datepicker__month-button--next.fa.fa-angle-right {
        top: 16px !important;
        position: absolute;
    }

    span.datepicker__month-button.datepicker__month-button--prev.fa.fa-angle-left {
        top: 16px !important;
        left: 20px;
        position: absolute;
    }

    .datepicker__months:before {
        width: 0px;
    }
}
/*nexus 7*/
@media (max-width: 600px) and (height: 960px) {

    .datepicker__month {
        width: 280px;
    }
}

@media (max-height: 375px) and (max-width: 812px), (max-height: 411px) and (max-width: 831px), (max-height: 414px) and (max-width: 736px), (max-height: 480px) and (max-width: 854px), (max-height: 480) {

    .datepicker__close-button {
        position: absolute;
        right: 0;
        top: 0;
    }

    .big-date-checkin, .big-date-checkout {
        float: left;
    }
    /*.datepicker__inner { position: fixed;width: 100%;height: 100vh;left: 0;top: 0;background: rgb(255,255,255);overflow-y: scroll;}*/
    .datepicker__month.datepicker__month--month1, .datepicker__month.datepicker__month--month2 {
        width: 45%;
    }

    th.datepicker__week-name {
        text-align: center;
    }
}

/* mobile - and landscape */
@media screen and (max-width: 480px), (max-width:667px) and (max-height:375), (max-width:480px) and (max-height:923), (max-width:736px) and (max-height:414), (max-width:823px) and (max-height:411), (max-width:736px) {
    .menuextras .reservations .dropdown-menu-extend #datepicker-input-id {
        position: absolute;
        top: 0 !important;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgb(255,255,255);
        overflow-y: scroll;
    }

    .datepicker__topbar {
        padding: 8px 10px
    }

    #datepicker-input-id-mask {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        position: fixed;
    }

    .date-caption {
        margin: 0; /*margin: 5px;*/
    }

    .big-date-checkin, .big-date-checkout {
        float: left;
    }
    /*.datepicker__inner {position: fixed;width: 100%;height: 100vh;left: 0;top: 0;background: rgb(255,255,255);}*/
    .menuextras .dropdown-menu-extend {
        overflow: scroll;
    }
}

/*iphone 5 */
@media (max-height: 568px) and (max-width: 320px), (max-height: 320px) and (max-width: 568px) {
    .datepicker__week-row {
        line-height: 0.5em;
    }
}
/*iphone 4 */
@media (max-width: 320px) and (max-height: 480px), (max-width: 412px) and (max-height: 412px) {
    .datepicker__month.datepicker__month--month1, .datepicker__month.datepicker__month--month2 {
        width: 100%;
    }
}

.menuextras .reservations .dropdown-menu-extend {
    position: absolute;
    min-width: 320px;
    right: 0;
    z-index: 1;
    margin-top: -1px;
    text-transform: none;
    margin-bottom: -10px;
    color: #5c6265;
    background-color: #fff;
    border-top: 2px solid #D38F86;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 3px 3px;
    padding: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

    .menuextras .reservations .dropdown-menu-extend h3 {
        float: left;
        font-family: 'Roboto Condensed',Kanit,sans-serif;
        font-size: 20px;
        margin: 0 0 15px 0;
        width: 100%;
    }

    /**custom*/
    .menuextras .reservations .dropdown-menu-extend .select-room {
        padding-top: 8px;
    }

        .menuextras .reservations .dropdown-menu-extend .select-room .col {
            float: left;
            width: 70px;
            line-height: 13px;
            font-size: 13px;
        }

            .menuextras .reservations .dropdown-menu-extend .select-room .col .smalltxt {
                font-size: 11px;
                color: #94a2ab;
            }

    .menuextras .reservations .dropdown-menu-extend .bkpromocode {
        padding: 8px 0 10px;
        overflow: hidden;
    }

.menuextras .dropdown-menu-extend label {
    text-transform: none;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
}

.menuextras .reservations .dropdown-menu-extend .select-room select {
    width: 65px;
}

dropdown-menu-extend
/**  left booking mask **/
.booking .select-chk-inout .col {
    float: none;
    width: 100% !important;
    margin-right: 0px;
}

#big-date-out-mask .big-date-outdaynum-bookingmask, #big-date-in-mask .big-date-indaynum-bookingmask {
    font-size: 4em;
}

/*Large Devices*/
@media only screen and (min-width: 812px) and (max-width: 823px) {
    .menuextras .reservations .dropdown-menu-extend {
        min-width: 100vw;
        min-height: 100vh;
        margin-top: -41px;
    }

    #datepicker-input-id {
        position: absolute;
        top: 0 !important;
        width: 100vw;
        height: 100vh;
        background: rgb(255,255,255);
        overflow-y: scroll;
    }

    #datepicker-input-id-mask {
        position: fixed;
        top: 0 !important;
        right: 0;
        width: 100vw;
        height: 100vh;
        background: rgb(255,255,255);
        overflow-y: scroll;
    }
}

@media (max-width:767px) {
    .menuextras .reservations .dropdown-menu-extend {
        min-width: 100vw;
        min-height: 100vh;
        margin-top: -41px;
    }

    #datepicker-input-id {
        position: absolute;
        top: 0 !important;
        width: 100vw;
        height: 100vh;
        background: rgb(255,255,255);
        overflow-y: scroll;
    }

    #datepicker-input-id-mask {
        position: fixed;
        top: 0 !important;
        right: 0;
        width: 100vw;
        height: 100vh;
        background: rgb(255,255,255);
        overflow-y: scroll;
    }
}

@media (max-width:740px) and (min-width:568px) {

    .menuextras .dropdown-menu-extend {
        overflow-y: scroll;
    }

    .menuextras .reservations .dropdown-menu-extend .bkpromocode, .menuextras .reservations .dropdown-menu-extend .linkCheckRate {
        float: left;
        width: 50%
    }

    .datepicker__months {
        padding: 10px
    }
}
/** arrow bounce **/
/* right bounce */
@-webkit-keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    40% {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    60% {
        -webkit-transform: translateX(-15px);
        transform: translateX(-15px);
    }
}

@-moz-keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(-30px);
    }

    60% {
        transform: translateX(-15px);
    }
}

@keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% {
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    40% {
        -ms-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    60% {
        -ms-transform: translateX(-15px);
        transform: translateX(-15px);
    }
}

.anime-rights {
    -webkit-animation: bounceRight 2s infinite;
    animation: bounceRight 2s infinite;
}
/* /right bounce */
/** prop - dest selection */
.selection-panel {
    width: 100%;
    height: 1000px;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    background-color: red;
}

/** hide arrow that's not use**/
.datepicker__month-button.datepicker__month-button--prev.fa.fa-angle-left.datepicker__month-button--disabled,
.datepicker__month-button.datepicker__month-button--next.fa.fa-angle-right.datepicker__month-button--disabled {
    display: none;
}

.style-date-right {
    height: 56px !important;
}

.datepicker__topbar {
    padding-bottom: 20px !important;
}

    .datepicker__topbar:after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 40px 40px 40px;
        border-color: transparent transparent #ffffff transparent;
        content: "";
        margin-left: 17%;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
    }

    /*.datepicker__topbar:hover:after {*/
    .datepicker__topbar.move-arrow:after {
        -webkit-transform: translate(3em,0);
        -moz-transform: translate(3em,0);
        -o-transform: translate(3em,0);
        -ms-transform: translate(3em,0);
        margin-left: 68%;
    }

.overlay-booking {
    z-index: 200;
}

.big-date-checkout-bookingmask.opacity {
    opacity: .3;
}

.big-date-checkin-bookingmask.opacity {
    opacity: .3;
}

.menuextras .dropdown-menu-extend:before {
    right: 50px;
}