._client {
    padding-top: 0;
    padding-right: 10vh;
    padding-left: 10vh;
}

._container {
    text-align: center;
}

._apptContainer {
    margin: 5vh;
}

._orderContainer {
    padding: 5vh;
    display: none;
    width: 95%;
    margin-left: 2.5%;
}

.public-appt-btn {
    display: inline-block;
    padding: 2vh 1.5vh;
    margin: 1vh;
    background-image: linear-gradient(to top right, #4462da, #4a4cd3,rgb(59, 115, 219));
    color: rgb(230, 228, 228);
    border: none;
    
    border:1px solid rgb(117 171 210 / 14%);
    cursor: pointer;

    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 20px;
    margin: 1 auto;
}

.div {
    height: 400px;
    width: 400px;
    background: black;

    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

.public-appt-date {
    margin: 0 auto;
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    color: #303030;
    padding-bottom: 2vh;
    padding-top: 2vh;
}

.user-date-form {
    margin: 0 auto;
    font-size: 1.5rem;
    letter-spacing: .2rem;
    text-transform: uppercase;
}

.user-btn {
    display: inline-block;
    padding: 2vh 1.5vh;
    margin: 1vh 1vh;
    background-image: linear-gradient(to right, #2e8dfa, #205bff);
    color: #fff;
    border: none;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

.addOnDiv {
    display: block;
}

.addOn-form {
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 40px;
    margin: 0 auto;
}

.addOn-choice {
    display: inline;
    color: #000;
    padding-right: 2vh;
    word-spacing: -.2rem;
}

.addOn-box {
    position: absolute;
    transform: translate(-143%, 8%);
    height: 25px;
    width: 25px;
    margin-right: 5vh;
}

.addonPrice {
    color: #da284f;
}

.addOn-choice-submit {
    display: block;
    color: #fff;
    background-image: linear-gradient(to bottom right, rgb(255, 57, 133), rgb(243, 43, 76));
    text-align: center;
    margin: 0 auto;
    border: none;
    padding: 2vh 2.5vh;
    margin-top: 4vh;
    border-radius: 20px;
}

.wantAddons {
    font-size: 2rem;
    color: #4a4cd3;
    margin-top: 5vh;
    margin-bottom: 2vh;
}

.order-date, .order-time, .order-pPrice, .order-pName, .order-aPrice, .order-aName, .order-subtotal, .order-aTotalPrice {
    font-size: 1.3rem;
    font-weight: 300;
    color: #303030;

}

.order-colorChange {
    font-size: 2rem;
    color: #da284f;
}

.order-confirmation-details {
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 10px;
    width: fit-content;
    margin: 0 auto;
    -webkit-text-stroke-width: thick;
}

.order-customer-details {
    font-weight: 300;
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding-top: 5vh;
    margin: 0 auto;
    width: fit-content;
}

.order-confirmation-details, .order-customer-details, .order-submit-payment {
    display: block;
}

.collect-customer-details {
    text-align: end;
    font-size: 1.3rem;
    color: #202020;
    width: 50%;
    margin-left: 25%;
}

.order-customer-details {
    padding-bottom: 8vh;
}

.order-confirmation-details {
    margin-bottom: 5vh;
}

.submit-customer-details {
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgb(55, 126, 189) 0%, rgb(38, 92, 161) 90% );
    color: #fff;
    border: none;
    padding: 1.5vh 2vh;
    border-radius: 7px;
    cursor: pointer;
    width: 40%;
    margin-left: 30%;
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
}

@media all and (max-width: 600px) {
    .order-customer-details {
        width: 100%;
    }

    .collect-customer-details {
    
        padding-right: 15%;
        text-align: end;
        font-size: 1.3rem;
        color: #4a4cd3;
        width: 80%;
        margin-left: 10%;
    }
}

@media all and (max-width: 500px) {
    ._client {
        padding: 0;
    }

    ._apptContainer {
        margin: 0;
    }

    ._orderContainer {
        display: block;
        
        padding: 1vh;
    }

    .order-confirmation-details {
        margin-bottom: 8vh;
    }

    .collect-customer-details {
        font-size: 1rem;
        padding: 0;
        padding-right: 6vh;
        
    }

    .public-appt-btn {
        margin-right: 4vh;
    }

}

@media all and (max-width: 460px) {
    .submit-customer-details {
        width: 60%;
        margin-left: 20%;
    }
}