﻿/*Styles General Forms*/
*{
    padding:0;
    margin:0;
}
.degrade {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(0,0,0) 80%);
    z-index: 0;
    top: 1px;
}
.invalid-feedback {
    grid-column: 2;
}
.container-form {
    position: relative;
    background-color: black;
}
    .container-form .contanier-image img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
.content-page-form {
    position: relative;
    height: auto;
    z-index: 15;
    top: 5rem;
    left: 50%;
    transform: translate(-50%);
    display: grid;
    grid-template-columns: repeat(2, 50%);
    width: 75%;
    justify-content: center;
    gap: 20%;
}
    .gap--removed{
        justify-content: start !important;
        gap: 0% !important; 
    }

.content-text-page-form {
    color: #fff;
    /* padding-right: 10%; */
    width: 50%;
}
    .content-text-page-form h1 {
        /* font-size: 1.875rem; */
        font-size: calc(38px + 7*(100vw - 768px)/832);
        font-family: CorpoATitleCon;
        /* line-height: 20px; */
        padding-bottom: 1rem;
    }
    .content-text-page-form span{
        padding-bottom:2rem;
    }
    .content-text-page-form .subtext {
        font-family: "Corpo S Text Office";
        font-size: 18px;
    }
.content-text-page-form p {
    font-family: "Corpo S Text Office";
    font-size: 18px;
    /* line-height: 1.4px; */
}
.contentForm {
    background-color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 6rem;
}
.content-text-page-form h3 {
    /*font-family: 'CorpoS';
    font-size: 20px;
    padding: 2rem 0;*/
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4rem;
    padding-bottom: 1rem;
}
    .contentForm .content-inputs {
        display: grid;
        grid-template-columns: 35% 65%;
        padding: 0.3rem;
    }
        .contentForm .content-inputs h1 {
            display: flex;
            color: #404040;
            font-size: 16px;
            font-weight: initial;
            font-family: "Corpo S Text Office Bold";
            max-width: 13rem;
            align-items: start;
            font-weight: bold;
        }

.form-ServiceBooking .ebrochure--spaces p {
    display: flex;
    align-items: start;

}
/* .form-recall .contentForm .content-inputs h1 {
    color: #404040;
    font-size: 15px;
    font-weight: bold;
    font-family: "Arial";
    padding-right: 1rem;
} */
.content-radio {
    display: grid;
    grid-template-columns: repeat(30, auto);
    padding: 0.3rem 0;
}
.form-ServiceBooking .content-radio {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    padding: 0.3rem 0;
}
.customer-info {
    color: #404040;
    padding: 1rem 0.3rem;
}
    .customer-info h1 {
        color: #404040;
            font-size: 16px;
            font-family: "Corpo S Text Office Bold";
            font-weight: bold;
            max-width: 12rem;
    }
.customer-info p {
    font-size: 16px
}
.container-form .content-btn {
    width: 100%;
    display: grid;
    /* grid-template-columns: 50% 50%; */
    grid-template-columns: 45%;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
}
/*.form-ServiceBooking .container-form .content-btn {
    max-width: 20rem;
    display: grid;
    grid-template-columns: 100%;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
    margin: auto;
}*/
.container-form .content-btn button.btn.btn-primary {
    width: 100%;
    background-color: #0078D6;
    border-radius: 3rem;
    padding: 0.8rem;
    font-weight: bold;
    font-family: "Corpo S Text Office Bold";
    font-size: 14px;
}
.container-form .content-btn button.btn.btn-primary:hover {
    background: #014880 !important;
    background-color: #014880 !important;
}

.container-form .content-btn button.type2btn {
    width: 100%;
    background-color: white;
    border-radius: 3rem;
    padding: 0.7rem;
    border: 1px solid black;
    font-size: 16px;
}
.container-form .content-btn button.type1btn {
    width: 100%;
    background-color: #0078D6;
    border-radius: 3rem;
    padding: 0.7rem !important;
    border: 1px solid #0078D6;
    font-size: 16px;
}
button.type1btn {
    width: 100%;
    background-color: #0078D6;
    border-radius: 3rem;
    padding: 0.7rem;
    border: 1px solid #0078D6;
    font-size: 16px;
}
/*Styles Recall*/
.form-recall .container-form .contanier-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}
.form-recall .content-section-radio p {
    font-weight: initial;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-family: "CorpoSDem"
}
.form-recall .content-radio {
    display: grid;
    grid-template-columns: repeat(2, auto);
    padding: 0.3rem 0;
}
.content-input-form-second{
    padding:1rem 0;
}
.ServiceBooking .content-radio {
    display: grid;
    grid-template-columns: repeat(2, auto);
    padding: 0.3rem 0;
}

    .captcha-form {
    transform: scale(0.9);
    transform-origin: 0 0;
}
.input-icon input{
    width: 100%;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
}
.form-check {
    font-size: 13px;
    font-family: "Corpo S Text Office";
}
.form-select {
    color: rgba(0, 0, 0, 0.7);
}
.form-recall .form-check {
    font-family: 'Arial';
    font-size: 15px;
}
.form-ServiceBooking .content-iam {
    display:grid;
    grid-template-columns: 1fr 1fr;
}
.content-text-page-form .content-textArea {
    padding-top:2.3rem;
}
.content-btn-hour {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .5rem;
    margin: auto;
    max-width: 20rem;
}
.content-btn-hour button {
    background-color: #fff;
    border: 1px solid;
    border-radius: 5rem;
    padding: 0.4rem;
}
.content-inputs-date {
    display: grid;
    grid-template-columns: 49% 49% !important;
    gap: 2%;
    padding: 0.3rem;
}
.content-btn-hour .checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    max-width: 20rem;
    height: 30px;
    border: 1px solid black;
    border-radius: 5rem;
}

        .content-btn-hour .checkbox-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .content-btn-hour .checkbox-container .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5rem;
        }

    .content-btn-hour .checkbox-container input:checked ~ .checkmark {
        background-color: #2196F3;
        border-color: #2196F3;
        color: white;
        transition: .4s;
    }
.content-btn-hour input::placeholder {
    font-family: CORPORATEACON;
    font-size: 16px;
    color: #000000B2;
}

@media (min-width: 1024px) {
    
    .ps-lg-custom{
        padding-left: 120px !important;
        line-height: 35px;
    }
    .w--85{
        width: 90% !important;
    }
}

@media (max-width: 1200px) {
    .content-page-form {
        width: 95%;
    }
}
    @media (max-width: 1024px) {
        .content-page-form {
            grid-template-columns: 100%;
        }
        .content-page-form {
            width: 80%;
        }

        .content-text-page-form {
            color: #fff;
            /* padding: 0.5rem; */
        }
        .content-page-form {
            width: 90%;
            top: 2rem;
        }

        .contentForm .content-inputs h1 {
            font-size: 13px;
            text-align: left;
        }

        .contentForm input.form-control {
            /* padding: 0.2rem 0.6rem; */
        }

        .form-recall .content-section-radio p {
            /* font-size: 15px; */
        }

        label.form-check-label {
            /* font-size: 11px; */
        }

        .content-text-page-form p {
            /* font-size: 14px; */
            line-height: 1.4rem;
        }
        .form-ServiceBooking .content-radio {
            display: grid;
            grid-template-columns: 100%;
            padding: 0.3rem 0;
        }
        .contentForm .content-inputs {
            display: inherit;
            grid-template-columns: 100%;
        }
        .form-recall .content-radio {
            grid-template-columns: 100%;
        }
        .form-ServiceBooking .content-iam {
            display: grid;
            grid-template-columns: 100%;
        }
        .content-date {
            padding-bottom: 1rem;
        }
    }

    @media (max-width: 500px) {
        .content-page-form {
            width: 90%;
            gap: 0;
        }

        .content-text-page-form {
            width: unset;
        }

        .checkmark {
            font-size: 12px;
        }

        .contentForm .content-inputs h1 {
            font-size: 14px;
        }

        .contentForm input.form-control {
            /* padding: 0rem 0.6rem; */
        }

        .form-recall .content-section-radio p {
            font-size: 14px;
        }

        label.form-check-label {
            /* font-size: 9px; */
        }

        .content-text-page-form h1 {
            /* margin-bottom: 30px; */
            /* padding-top: 70px; */
        }

        .content-text-page-form p {
            /* font-size: 16px; */
            line-height: 25.4px;
            padding-bottom: 1rem;
        }
        .captcha-form {
            transform: scale(0.8);
        }
        .invalid-feedback {
            font-size: 10px;
        }
        .container-form .content-btn {
            gap: 0.5rem;
        }
        .container-form .content-btn button.btn.btn-primary {
            font-size: 13px;
        }
        .container-form .content-btn button.type2btn {
            font-size: 13px;
        }

        .contentForm .content-inputs h1 {
            max-width: unset;
        }

        .contentForm {
            padding: 1.5rem;
        }
    }
@media (max-width: 400px) {
    .content-inputs.content-inputs-date {
        grid-template-columns: 100% !important;
    }
}

.rounded-pill {
    border-top-left-radius: 50rem;
    border-top-right-radius: 50rem;
    border-bottom-right-radius: 50rem;
    border-bottom-left-radius: 50rem;
}