﻿
    img {
        max-width: 100%;
    }

    h1.block, h2.block, h3.block, h4.block, h5.block, h6.block {
        padding-top: 0px;
    }

    .signature-border {
        border: 1px solid lightgrey;
        padding: 5px;
    }

    .has-error .signature-border {
        border-color: #e73d4a;
    }

    .has-success .signature-border {
        border-color: #27a4b0;
    }

    .align-center {
        text-align: center;
        margin: auto;
    }

    .word-break {
        word-wrap: break-word;
    }

    .form-body {
        padding-top: 10px;
    }

    .modal-body {
        padding: 0px 20px;
    }

    #resumen-wrapper .control-label {
        font-weight: 300;
        font-size: 16px;
    }

    .page-spinner-bar > div {
        background: #3598dc;
    }

    .bold {
        font-weight: 500 !important;
    }

    .col-no-padding {
        padding-left: 0px;
        padding-right: 0px;
    }

    .selectize-control {
        width: 100% !important;
    }

@media (max-width: 992px) {

    body, .form-control, .control-label, .radio-list label {
        font-size: 16px;
        overscroll-behavior: contain;
    }

    .note p {
        font-size: 15px;
    }

    .bold {
        font-weight: 600 !important;
    }

}    

/* ROOM SELECTOR */

    .room-content {
        background-color: #fff;
    }

    .room-content .column-container {
        margin: 0;
        background-color: #fff;
        overflow: hidden;
        border: 1px solid #e5e9ee;
        cursor: pointer;
    }

    .room-content .table-head {
        color: #fff;
        padding: 7px 0;
        text-align: center;
    }

    .room-content .table-head h2 {
        font-size: 26px;
    }

    .room-content .table-content {
        color: #5c6d7e;
        font-weight: 500;
        font-size: 16px;
        padding: 10px;
    }

    .room-content .table-content .row {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .room-content .table-content .row i {
        color: #6cade6;
        margin-right: 10px;
    }

    .room-content .table-image {
        text-align: center;
        padding: 10px;
    }

    /*
    .room-content .table-image:before {
        content: ' ';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    */

@media (min-width: 992px) {

    .room-content .table-head {
        padding: 7px 0;
    }

    .room-content .table-head h2 {
        font-size: 20px;
    }

    .room-content .table-content {
        font-weight: 500;
        font-size: 14px;
    }

    .room-content .table-content .row {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .room-content .table-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .room-content .table-image, 
    .room-content .table-content {
        min-height: 100px;
    }

}

@media (min-width: 1024px) {

    .room-content .table-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .room-content .table-image {
        text-align: center;
        padding: 0px;
    }
}

/* CONFIRMATION STYLES */

    .confirmation-header {
        width: 100%;
    }

    .confirmation-header > .row > div .c-title > h3 {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .confirmation-header > .row > div .c-title > .c-line-left {
        margin-bottom: 30px;
        height: 3px;
        width: 40px;
    }

    .confirmation-header > .row > div .c-title > p {
        margin-bottom: 10px;
        font-weight: 300;
    }

    .confirmation-header > .row > div > .c-container {
        background-size: auto;
        padding: 30px;
        margin: 0 0 30px 0;
    }

    .confirmation-header > .row > div > .c-container > .c-inverse > h3 {
        color: #ffffff;
        margin-top: 10px;
    }

    .confirmation-header > .row > div > .c-container > .c-inverse > .c-line-left {
        background-color: #ffffff;
    }

    .confirmation-header > .row > div > .c-container > .c-inverse > p {
        color: #ffffff;
    }

    .confirmation-header > .row > div > .c-container:last-child {
        margin-bottom: 0;
    }

    .confirmation-header > .row > div > .c-container:last-child p {
        margin-bottom: 0;
    }

    .confirmation-header > .row > div form {
        margin-bottom: 20px;
    }

    .confirmation-header .input-group {
        border: 0;
    }

    .confirmation-header .input-group .input-group-addon,
    .confirmation-header .input-group .btn {
        border: 0;
    }

    .confirmation-header > .row > div > .c-contact #image-qr,
    .confirmation-header > .row > div > .c-contact #image-qr canvas {
        margin-top: 10px;
        max-width: 100%;
        text-align: center;
    }

    .confirmation-header > .row > div > .c-contact {
        padding: 30px;
        margin: 0 0 30px 0;
    }

@media (max-width: 1024px) {
    .confirmation-header > .row > div form .input-group {
        width: 100%;
    }
}

@media (max-width: 991px) {

    .confirmation-header > .row > div > .c-container {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .confirmation-header > .row > div > .c-contact {
        padding: 30px;
        margin: 0 0 30px 0;
    }

}

/* OPTIONS BOX */

    .option-box {
        border: 1px solid #cbd1d9;
        position: relative;
        padding: 30px 20px;
        margin-bottom: 5px;
        padding-bottom: 75px;
        min-height: 250px;
        max-height: 300px;
    }

    .option-box-sm {
        border: 1px solid #cbd1d9;
        position: relative;
        padding: 30px 20px;
        margin-bottom: 5px;
        padding-bottom: 75px;
        min-height: 250px;
        max-height: 300px;
    }

    .option-box .option-icon,
    .option-box-sm .option-icon {
        display: block;
        color: #e4e7ec;
        text-align: center;
        margin-bottom: 15px;
        font-size: 50px;
    }

    .option-box .option-title,
    .option-box-sm .option-title{
        font-size: 16px;
        color: #434A54;
        text-align: center;
        width: 100%;
    }

    .option-box .option-title p,
    .option-box-sm .option-title p{
        font-weight: 500;
        padding: 0px;
    }

    .option-box .option-title p.small,
    .option-box-sm .option-title p.small{
        font-weight: 300;
    }

    .option-box .option-confirm, 
    .option-box-sm .option-confirm{
        width: 100%;
        display: block;
        text-align: center;
        height: 55px;
        position: absolute;
        left: 0;
        bottom: 0;
        color: #AAB2BD;
        background-color: #f3f5f8;
        font-size: 25px;
        padding-top: 10px;
    }

    /* H O V E R */

    .option-box:hover .option-icon,
    .option-box-sm:hover .option-icon {
        color: #87d865;
        -webkit-transition: border-color 0.3s ease-in-out;
        -moz-transition: border-color 0.3s ease-in-out;
        -ms-transition: border-color 0.3s ease-in-out;
        -o-transition: border-color 0.3s ease-in-out;
        transition: border-color 0.3s ease-in-out;
    }

    .option-box:hover .option-confirm,
    .option-box-sm:hover .option-confirm {
        background-color: #87d865;
        color: white;
        -webkit-transition: border-color 0.3s ease-in-out;
        -moz-transition: border-color 0.3s ease-in-out;
        -ms-transition: border-color 0.3s ease-in-out;
        -o-transition: border-color 0.3s ease-in-out;
        transition: border-color 0.3s ease-in-out;
    }

    .option-box:hover, .option-box-sm:hover {
        border-color: #87d865;
        cursor: pointer;
        -webkit-transition: border-color 0.3s ease-in-out;
        -moz-transition: border-color 0.3s ease-in-out;
        -ms-transition: border-color 0.3s ease-in-out;
        -o-transition: border-color 0.3s ease-in-out;
        transition: border-color 0.3s ease-in-out;
    }

    /* A C T I V E */

    .option-box.active .option-icon,
    .option-box-sm.active .option-icon {
        color: #87d865;
    }

    .option-box.active .option-confirm,
    .option-box-sm.active .option-confirm {
        background-color: #87d865;
        color: white;
    }

    .option-box.active, .option-box-sm.active {
        border-color: #87d865;
        cursor: pointer;
    }

    /* H E A D E R   B O X */

    .header-box {
        background-color: #2F373E;
        text-align: center;
        margin-top: 0 !important;
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        height: 55px;
        z-index: 10000;
        border-bottom: 1px solid #cbd1d9;
    }

    .header-box .header-action {
        cursor: pointer;
        position: absolute;
        top: 0;
        color: rgb(250, 245, 240);
        padding: 10px 20px;
        background-color: rgba(255, 255, 255, 0.12);
        text-align: center;
        font-size: 25px;
    }

    .header-box .header-text {
        cursor: pointer;
        position: absolute;
        top: 0;
        color: rgb(250, 245, 240);
        padding: 10px 20px;
        background-color: transparent;
        text-align: center;
        font-size: 25px;
        font-weight: 300;
        width: 100%;
    }

    .header-box .header-action.right {
        right: 0;
    }

    .header-box .header-action.left {
        left: 0;
    }

    .header-box .header-action:hover {
        background-color: rgba(255, 255, 255, 0.24);
    }