/* Modal (background) */
.requestACallModal {
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(58, 57, 57);
    /* Fallback color */
    background-color: rgba(58, 57, 57, 0.6);
    /* Black w/ opacity */
}

/* Modal Content */
.requestACallModal-content {
    background-color: #ffffff;
    font-family: Tahoma, sans-serif;
    margin: 15% auto;
    /* 15% from the top and centered */
    max-width: 900px;
    min-width: 290px;
    width: 80%;
    padding-bottom: 47px;
}

.request-call-modal__title-area {
    display: flex;
    border-bottom: #e9e9e9 solid 1px;
}

.request-call-modal__x-button {
    align-self: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.request-call-modal__x-icon {
    font-size: 4em;
}

.request-call-modal__bookend {
    flex-basis: 15%;
}

@media (max-width: 600px) {
    .request-call-modal__x-icon {
        font-size: 3em;
    }

    .request-call-modal__bookend {
        flex-basis: 20% !important;
    }

    .request-call-modal__bookend:nth-of-type(1) {
        display: none;
    }

    .requestACallModal .title {
        margin-left: 15px !important;
        text-align: left !important;
    }
}

.closeConfirm {
    width: 41px;
    height: 41px;
    position: relative;
    border: solid 1px #979797;
    border-radius: 50%;
}

.closeConfirm:after {
    content: '';
    height: 23px;
    border-left: solid 2px #9b9b9b;
    position: absolute;
    transform: rotate(45deg);
    left: 19px;
    top: 8px;
}

.closeConfirm:before {
    content: '';
    height: 23px;
    border-left: solid 2px #9b9b9b;
    position: absolute;
    transform: rotate(-45deg);
    left: 19px;
    top: 8px;
}

/* Header */
.requestACallModal .title {
    font-size: 24px;
    letter-spacing: 1.2px;
    text-align: center;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    padding: 33px 0px;
}

/* Body */
.requestACallModal .description {
    font-size: 16px;
    text-align: center;
    color: #4a4a4a;
    margin-top: 45px;
}

.requestACallModal .callBackInfo {
    font-size: 16px;
    text-align: center;
    color: #000000;
    margin-top: 20px;
    margin-bottom: 56px;
}

.requestACallModal .required {
    font-size: 16px;
    text-align: left;
    color: #cc0000;
}

.requestACallModal .requestACallForm {
    margin-left: auto;
    margin-right: auto;
    margin-top: 55px;
    width: 100%;
    max-width: 450px;
    padding-left: 15px;
    padding-right: 15px;
}

.requestACallModal .requiredInfo {
    width: 417px;
    height: 19px;
    margin: auto;
    margin-top: 56px;
}

.requestACallModal input.customerInfo--invalid {
    border: solid 1px #cc0000;
    background-color: #f5f5f5;
    font-size: 16px;
    text-align: left;
    color: #4a4a4a;
    margin-bottom: 4px;
    height: 50px;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
}

.requestACallModal input.customerInfo--valid {
    background-color: #f5f5f5;
    border: solid 1px #e4e2e3;
    font-size: 16px;
    text-align: left;
    color: #4a4a4a;
    margin-bottom: 4px;
    height: 50px;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
}

#availableDate {
    padding-left: 50px !important;
}


.requestACallModal .inputTitle {
    font-size: 16px;
    text-align: left;
    color: #4a4a4a;
    margin-top: 22px;
    margin-bottom: 10px;
}

.requestACallModal .availableTimeSelection {
    margin-top: 25px;
    margin-bottom: 30px;
}

.requestACallModal .buttonGroup {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    text-align: center;
}

.requestACallModal .okButton {
    padding: 10px 73px;
    background-color: #4782df;
    margin-right: 10px;
    border: solid 3px #4782df;
}

.requestACallModal .submitButton {
    padding: 10px 73px;
    background-color: #4782df;
    margin-right: 10px;
    border: solid 3px #4782df;
}

.requestACallModal .cancelButton {
    padding: 10px 73px;
    border-radius: 4px;
    border: solid 3px #4782df;
    background-color: #ffffff;
    color: #4782df;
}

.requestACallModal .cancelButtonSpanish {
    padding: 10px 63px;
    border-radius: 4px;
    border: solid 3px #4782df;
    background-color: #ffffff;
    color: #4782df;
}

.requestACallModal .disclaimer {
    margin-top: 17px;
    font-size: 10px;
    text-align: left;
    color: #4a4a4a;
}

.calendar {
    position: relative;
    z-index: 1;
    left: 15px;
    top: 30px;
    color: #337ab7;
    cursor: pointer;
    width: 4%;
    float: left;
}

.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover,
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover,
.bootstrap-datetimepicker-widget table th.disabled:hover {
    color: #dadada;
}

.requestACallModal .confirmationDescription {
    margin-top: 46px;
    text-align: center;
    font-size: 16px;
    color: #4a4a4a;
    max-width: 416px;
    margin-left: auto;
    margin-right: auto;
}

.requestACallModal .confirmationDescription p {
    margin: 0 22px 10px;
}

@media (max-width: 768px) {

    .requestACallModal .submitButton,
    .requestACallModal .cancelButton,
    .requestACallModal .cancelButtonSpanish {
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }

    .requestACallModal .okButton {
        width: 250px !important;
    }
}