@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,500&subset=thai');

html, body {
    background: url('../../../Content/dist/img/pattern.png') #666 fixed;
    font-family: Kanit, sans-serif;
    font-size: small;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

.step {
    list-style: none;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0 2.75rem;
}

    .step .step-item {
        -ms-flex: 1 1 0;
        flex: 1;
        margin-top: 0;
        min-height: 1rem;
        position: relative;
        text-align: center;
    }

        .step .step-item:not(:first-child)::before {
            background: #e41c22;
            content: '';
            height: 2px;
            left: -50%;
            position: absolute;
            top: 9px;
            width: 100%;
        }

        .step .step-item a {
            color: #acb3c2;
            display: inline-block;
            padding: 20px 10px 0;
            text-decoration: none;
        }

            .step .step-item a::before {
                background: #e41c22;
                border: .1rem solid #fff;
                border-radius: 50%;
                content: '';
                display: block;
                height: .9rem;
                left: 50%;
                position: absolute;
                top: .2rem;
                transform: translateX(-50%);
                width: .9rem;
                z-index: 1;
            }

        .step .step-item.active a::before {
            background: #fff;
            border: .1rem solid #e41c22;
        }

        .step .step-item.active ~ .step-item::before {
            background: #696969;
        }

        .step .step-item.active ~ .step-item a::before {
            background: #696969;
        }

#frmRegister {
    background-color: #fff;
    padding: 1.5rem 2.75rem;
}

    #frmRegister hr {
        border-color: #2c3e50;
    }

    #frmRegister button {
        margin: 0 5px;
    }

.input-error {
    background-color: #ffdddd;
}

.tab, #title-error, #c-title-error {
    display: none;
}

    .tab .title, .tab .rtype {
        text-transform: uppercase;
        color: #8b0000;
        letter-spacing: 0px;
        font-size: 1.25rem;
        font-weight: bold;
        text-align: center;
    }

.icheck {
    list-style-type: none;
    margin-left: -15px;
}

    .icheck li div {
        float: left;
        margin-left: -22px;
    }

    .icheck li label {
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;
        vertical-align: top;
    }

    .icheck li input[type=text] {
        /*margin-left: -22px;*/
        margin: 0.5rem 0 0 -22px;
    }

label.icheck-inline {
    cursor: pointer;
    margin: 0 0.75rem 0 0.25rem;
}

#icheck-error {
    display: none;
    margin-left: 20px;
}

#other-error {
    display: none;
    margin-left: -22px;
}

.select2 {
    width: 100% !important;
}

select[readonly].select2-hidden-accessible + .select2-container {
    pointer-events: none;
    touch-action: none;
}

    select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
        background: #eee;
        box-shadow: none;
    }

    select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow,
    select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
        display: none;
    }

.copyright {
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
}

.g-recaptcha {
    display: inline-block;
}

#captcha {
    display: none;
    color: #ff0000;
}

.btn-next {
    color: #fff;
    background-color: #e41c22;
    border-color: #e41c22;
    width: 100px;
}

    .btn-next:hover {
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e41c22;
    }

.btn-previous {
    color: #fff;
    background-color: #9d9d9d;
    border-color: #9d9d9d;
    width: 100px;
}

    .btn-previous:hover {
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px #9d9d9d;
    }

.btn-add {
    color: #fff;
    background-color: #218838;
    border-color: #218838;
    width: 100px;
}

    .btn-add:hover {
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px #218838;
    }

.required {
    display: block;
    color: #ff0000;
}

#loading {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, .5) url('../../../Content/dist/img/loading.gif') center no-repeat;
}

.modal-dialog {
    max-width: 600px;
    width: auto !important;
    /*display: inline-block;*/
}

.modal-body {
    padding: 1.875rem;
    text-align: center;
}

.hotel-detail:last-child {
    margin-bottom: 0;
}

.room-type {
    background-color: #e41c22;
    color: #fff;
    font-weight: bold;
}

.hotel-service {
    background-color: #ccc;
}

.single {
    width: 50%;
    background-color: #807c7c;
    color: #fff;
}

.double {
    width: 50%;
    background-color: #4f4d4d;
    color: #fff;
}

.speech-bubble {
    display: inline-block;
    width: 250px;
    position: relative;
    background: #f30c1d;
    border-radius: .4em;
    padding: 5px;
    margin-bottom: 15px;
}

    .speech-bubble h2 {
        margin-top: 5px;
        font-size: 1.5rem;
        color: #ffffff;
    }

    .speech-bubble:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 0;
        border: 0.563em solid transparent;
        border-top-color: #f30c1d;
        border-bottom: 0;
        margin-left: -0.562em;
        margin-bottom: -0.562em;
        font-size: 1.5rem;
    }