﻿.div-calendar {
    margin-right: 3%;
    margin-left: 3%;
}

@media (min-width: 1400px) {
    .div-calendar {
        margin-right: 10%;
        margin-left: 10%;
    }
}

.image-header-background {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .image-header-background {
        margin-top: 10px;
    }
}

.div-day {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    -webkit-user-select: none;
    user-select: none;
    background: #F6F1EE;
    color: #634237;
    text-align: center;
    padding: 20px;
    margin: 10px;
}

@media (min-width: 768px) {
    .div-day {
        font-size: 18px;
    }
}

/*.div-day:hover {
    outline: 5px solid #FF914D;
    outline-offset: -5px;
}*/
.div-select-day {
    outline: 5px solid #FF914D;
    outline-offset: -5px;
    color: #FF914D;
}
.div-day-close {
    background: #DCA792;
    color: #F6F1EE;
}

.image-prev-next {
    width: 30px;
}

.div-day-current {
    background: #DCA792;
}

.MultiCarousel {
    float: left;
    overflow: hidden;
    width: 100%;
    position: relative;
    border: 3px solid #A6A6A6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #ffffff;
    margin-top: -60px;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 3px 3px 11px rgb(135,135,135);
}

@media (min-width: 1200px) {
    .MultiCarousel {
        margin-top: -70px;
    }
}

.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left;
}

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

        .MultiCarousel .MultiCarousel-inner .item > div {
            text-align: center;
            padding: 15px;
            margin: 10px;
        }

.MultiCarousel .leftLst, .MultiCarousel .rightLst {
    position: absolute;
    border: none;
    background: none;
    filter: invert(25%) sepia(26%) saturate(706%) hue-rotate(329deg) brightness(98%) contrast(90%);
    top: 65%;
}

.MultiCarousel .leftLst {
    left: 0;
}

.MultiCarousel .rightLst {
    right: 0;
}

    .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over {
        pointer-events: none;
        filter: invert(79%) sepia(3%) saturate(10%) hue-rotate(28deg) brightness(87%) contrast(80%);
    }

.div-heder-booking {
    position: absolute;
    top: 15%;
    right: 10%;
    color: #634237;
}

.div-header-backgournd {
    position: relative;
}


@media (max-width: 768px) {
    .tx-select-day {
        color: #634237;
        font-size: 22px;
    }

    .image-calendar {
        display: none;
        margin-right: 0px;
    }
}

@media (min-width: 768px) {
    .tx-select-day {
        font-size: 25px;
    }
    .image-calendar {
        width: 25px;
        height: 25px;
        margin-right: 15px;
        filter: invert(25%) sepia(26%) saturate(706%) hue-rotate(329deg) brightness(98%) contrast(90%);
    }
}

.div-tx-select-day {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.hr-tx-select-day {
    padding-right: 30px;
    padding-left: 25px;
}
.tx-select-branch {
    margin-top: 160px;
    color: #634237;
}

@media (min-width: 768px) {
    .tx-select-branch {
        margin-top: 190px;
        color: #634237;
    }
}

.tx-header-branch-thonglor {
    font-size: 30px;
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 768px) {
    .div-branch-4 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: -80px;
    }
}

@media (min-width: 768px) {
    .div-branch-4 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: -100px;
        padding-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .div-branch-2 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 30px;
    }
}

@media (min-width: 768px) {
    .div-branch-2 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: -100px;
        padding-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .div-branch-3 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 30px;
    }
}

@media (min-width: 768px) {
    .div-branch-3 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

@media (min-width: 992px) {
    .div-branch-3 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: -100px;
        margin-bottom: 30px;

    }
}


@media (max-width: 768px) {
    .div-branch-5 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {
    .div-branch-5 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

@media (min-width: 992px) {
    .div-branch-5 {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 0px;
        margin-bottom: 30px;
    }
}
.transform {
    transition: all 2s ease;
}
.transform-active {
    background-color: #45cee0;
    height: 350px;


}
.div-booking-time-ver {
    height: 0;
}
.show-div-booking-time-ver {
    height: 350px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    border: 1px solid #A6A6A6;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.div-booking-time-hor {
    padding-top: 15px;
}

.color-pirmary {
    filter: invert(41%) sepia(57%) saturate(6996%) hue-rotate(208deg) brightness(100%) contrast(99%);
}
.color-waring {
    filter: invert(80%) sepia(37%) saturate(2904%) hue-rotate(352deg) brightness(103%) contrast(103%);
}
.color-info {
    filter: invert(84%) sepia(43%) saturate(2083%) hue-rotate(164deg) brightness(89%) contrast(94%);
}
.btn-booking-time {
    padding-left: 40px;
    padding-right: 40px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.div-btn-select-branch {
    width: 40px;
    border-width: 1px;
    border-style: solid;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 40px;
    border-color: #634237;
}
    .div-btn-select-branch:hover {
        filter: invert(75%) sepia(67%) saturate(3007%) hue-rotate(326deg) brightness(105%) contrast(101%);
    }

.btn-image-select-branch {
    width: 20px;
    height: 20px;
    filter: invert(25%) sepia(26%) saturate(706%) hue-rotate(329deg) brightness(98%) contrast(90%);
    -webkit-user-select: none;
    user-select: none;
}
    .btn-image-select-branch:hover {
        
    }
.row-select-branch {
    background: #E6DAD1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-top: 130px;
    margin-right: 10px;
    margin-left: 10px;
}

.image-select-branch-backgournd {
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    -webkit-user-select: none;
    user-select: none;
}

.div-select-branch-time {
    padding: 10px;
    background: #ffffff;
    border: 1px solid #A6A6A6;
    color: #634237;
}
.tx-heading-close {
    padding-top:50px;
    color: #DCA792;
}
.tx-heading-para-close {
    color: #DCA792;
}

.para-fail {
    margin-top: 10px;
    font-size: 12px;
    padding-left: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 15px;
}