/*
* CSS file Copyright SandCat LLC, 2024.
* All Rights reserved
*/
.nodisplay, .mobileonly{
    display:none;
}
.preloader__text{
    position:absolute;
    top:54vh;
    left:43vw;
    font-size:20px;
    color:var(--oxpins-base);
    font-family: var(--oxpins-font-three);
}
div.row.about-one__points div.col-sm-4.mb-5 div.text p {
    min-height:130px;
}
section a:not(.thm-btn), .container a:not(.thm-btn){
    color:#0a58ca;
}
.hero-tagline-top{
    position:absolute;
    left:5%;
    top:5%;
    font-size:60px;
    color:var(--oxpins-black);
    font-weight:900;
    line-height: 73px;
    opacity:1;
    font-family:var(--oxpins-font-two);
    z-index:100;
    text-shadow: 2px 2px 16px #fff;
}
.main-slider__title, .sub_title_large{
    font-size:42px;
    line-height:42px;
}
/* stripe form, login form, client-form, customer-form */
::placeholder {
    color:#aaa;
}
#payment-form, #loginform, #client-form, #customer-form{
    list-style-type:none;
    padding:0;
    border-radius:3px;
}
#payment-form div, #loginform div {
    margin: 5px 15px;
    display:flex;
    justify-content:flex-end;
    padding: 0.5em;
}
#loginform div, #loginform div a:visited{
    font-size: 24px;
    color: var(--oxpins-base);
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 10px;
    font-family: var(--oxpins-font-three);
}
#payment-form div > label, #loginform div > label{
    padding:0.5em 1em 0.5em 0;
    font-weight:600;
    flex:1;
}
#loginform button, .forgotpw, .New2ET{
    clear:both;
    float:right;
    margin-right:15px;
}
#rpwform .form-errors{
    padding:0 0 2em 0;
}
#payment-form div > input, #payment-form div button, #loginform div > input{
    padding:0.25em;
    margin:0 0.5em;
}
#payment-form div > input.card-expiry-month, #payment-form div > input.card-expiry-year{
    max-width:10vw;
}
.payment-errors, .form-errors{
    padding-left:3em;
    color:#f00;
    font-weight:900;
}
#otp-form{
    margin-top:20px;
}
#otp-form > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px; 
    text-align:right;
}
#otp-form button{
    float:right;
}
/*#otp-form > :nth-child(1){
     grid-area: 1 / 1 / 2 / 2;
}
#otp-form > :nth-child(2){
     grid-area: 2 / 1 / 2 / 2;
}
#otp-form > :nth-child(3){
     grid-area: 3 / 1 / 2 / 2;
}*/
.form-required{
    background-color:#dff0ff;
}
.st-inclose{
    margin-bottom:12px;
}
#service label, #service input, #service label, #service input{
    padding-right:1em;
    margin: 0.5em 0;
    font-weight:600;
}
.reqNote{
    position:relative;
    left:-30px;
}
.reqNote:before{
    content:"Required";
    font-size:50%;
    font-style:italic;
    position:relative;
    top:2.5ex;
    left:35px;
    color:red;
}
#client-form > div > div div, #customer-form > div > div div{
    display:grid;
    grid-template-columns:35% 65%;
    grid-gap:2px;
}
#client-form div > input, #customer-form div > input{
    grid-column: 2/3
}
#client-form .submit-button, #customer-form .submit-button {
    margin:0 auto;
    width:fit-content;
}
#client-form > div div.phone-grid, #customer-form  > div div.phone-grid{
    grid-template-columns: 35% 40% 20% 5%;
}
#client-form > div div.zone-grid{
    grid-template-columns: 35% 25% 20% 20%;
}
#customer-form  > div div.zone-grid{
    grid-template-columns: 35% 65% 0% 0%;
}
#client-form > div .phone-zone-1, #customer-form > div .phone-zone-1{
    grid-column:1;
}
#client-form > div .phone-zone-2, #customer-form > div .phone-zone-2{
    grid-column:2;
}
#client-form > div .phone-zone-3, #customer-form > div .phone-zone-3{
    grid-column:3;
    text-align: right;
    font-size:75%;
    align-content:center;
}
#client-form > div .phone-zone-4, #customer-form > div .phone-zone-4{
    grid-column:4;
    margin-right:5px;
}
#customer-form  > div div.pw-grid{
    grid-template-columns: 35% 60% 5%;
}
#customer-form > div .pw-zone-1{
    grid-column:1
}
#customer-form > div .pw-zone-2{
    grid-column:2;
}
#customer-form > div .pw-zone-3{
    grid-column:3;
    color:#3584ff;
    font-size:200%;
    margin:auto 5px;
}
.pwreveal:before{
    content: url('/assets/images/svg/openeye.svg');
}
.pwreveal-show:before{
    content: url('/assets/images/svg/closedeye.svg');
}

.special-note{
    font-style:italic;
    font-size:80%;
}
.footnote{
    margin:25px 0;
}
.step-bar{
    margin:10px auto;
    width:75%;
    font-size:60%;
    border-radius: 15px;
    text-align:center;
    display:grid;
    grid-gap:0.5px;
}

.step-bar .step-current {
    color: gray;
}
.step-bar .step-future {
    color: gray;
}
.completed {
    background-color: #6abdff;
    color: #8e8e8e;
}
.current {
    font-weight: bold;
}
#four-step-bar{
    grid-template-columns: 25% 25% 25% 25%;
    padding:0 1.5px 0 0;
}
#three-step-bar{
    grid-template-columns: 1fr 1fr 1fr;
}
div.step-bar > :nth-child(1){
    border-radius:15px 0 0 15px;
}
div#three-step-bar > :nth-child(3){
    border-radius:0 15px 15px 0;
}
div#four-step-bar > :nth-child(4){
    border-radius:0 15px 15px 0;
}
.step-bar > .step-current, .step-bar > .step-past, .step-bar > .step-future{
    background-color: #6abdff;
    border:thin solid #000;
    padding:0;
    margin:0;
    height:10px;
}
.step-bar > .step-future{
    background-color: #fff;
    color:#aaa;  
}
/* remove numbers from number format */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/* Service Rates and Point Explanations */
.space_between_p{
    padding-bottom:2ex;
}
#service_rates, #service_selection{
    width:75%;
    text-align:center;
    margin:auto;
}
#service_selection{
    width:100%;
    font-size:75%;
    margin: 24px auto;
}
#service_rates th, #service_selection th{
    color:#6abdff;
    font-size:125%;
    padding-bottom:2ex;
}
#service_rates tr, #service_selection tr{
    border-bottom: thin solid #6abdff;
    line-height: 18px;
}
#service_rates img, #service_selection img, .pricing-box img{
    width:45px;
    text-align: left;
}

.what-u-might-get{
    padding: 1ex 0;
}
#service_rates tbody tr td:first-child{
    text-align:left;
    padding: 5px 0;
}
.service_descrip{
    padding-left:2em;
}
#service_selection .service_descrip{
    display:inline-block;
    width:50%;
    text-align:left;
    padding: 0 0 0 10px;
}
td.checkbox-holder{
    vertical-align: middle;
}
#service_selection input[type="checkbox"]{
    -webkit-appearance: none;
    appearance:none;
    background-color:#ffffff;
    margin:0;
    font-size:1rem;
    color: currentColor;
    width: 1.5em;
    height: 1.5em;
    border: 0.2em solid currentColor;
    border-radius: 0.15em;
    transform: translate(-0.075em);
    display: inline-grid;
    place-content: center;
}
#service_selection input[type="checkbox"]::before{
    content: "";
    width: 0.85em;
    height: 0.85em;
    transform:  scale(0);
    transition: 75ms transform ease-in-out;
    box-shadow: inset 1em 1em var(#6abdff);
    background-color: CanvasText;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
#service_selection input[type="checkbox"]:checked::before{
    transform:translateX(0.4em) scale(1.1);
    background-color:#6abdff;
}
#service_selection .radio-holder{
    text-align: left;
    white-space: pre;
}
#pricing-holder{
    display:flex;
    flex-flow: row wrap;
    justify-content: space-around;
    border-top:solid #6abdff;
    border-bottom:solid #6abdff;
    padding-top: 15px;
    margin-top: 25px;
    width:100%;
}
.pricing-box{
    width: 18%;
    border:thin solid #aaa;
    box-shadow: 2px 2px 8px 2px #777;
    margin-right:1em;
    padding:2ex 0;
    border-radius: 25px;
    text-align: center;
}
#pricing-holder .pricing-box{
    display:grid;
    grid-template-rows: 0%;
    grid-template-columns: 1fr;
    grid-gap:1.5%;
    border:thin solid #aaa;
    box-shadow: 2px 2px 8px 2px #777;
    margin-right:1em;
    padding:2ex 0;
    border-radius: 25px;
}
#price-box-selection #pricing-holder .pricing-box{
    width:30%;
}
#price-box-selection .pricing-box.pb-recommended{
    box-shadow:2px 2px 15px 5px #096b01;
    top:25px;
    position:relative;
}
#price-box-selection .pricing-box.pb-recommended::before{
    content: "Recommended";
    position:relative;
    top:-50px;
    font-weight: 900;
    color:#096b01;
}
.pricing-box h3, .pricing-box h5{
    padding:0.5ex;
}
.pricing-box img.icon-large{
    width:120px;
    max-width:120px;
}
.priceSelected{
    background-color:#bff1c2;
}
#price-box-selection .pricing-box h3{
    font-size:100%;
}
.pb-pandp{
    grid-row:1;
    margin-bottom:35px;
}
.what-u-might-get{
    color: #6abdff;
    padding:0 10px;
    grid-row:row 2;
    margin:15px auto;
    min-height:40%;
}
.starting-label{
    float:left;
}
#price-box-selection .what-u-might-get img, .starting-services img{
    width:24px;
    display:inline-block;
    margin:0 5px;
}
#price-box-selection .what-u-might-get img.icon-large{
    width:55%;
}
.pb-btn{
    grid-row:5;
}
#price-box-selection .thm-btn{
    padding:5px;
    border-radius: 15px;
}
.swiper-container{
    background-color:rgba(246,251,249,1);
}
.col-center{
    margin: 0 auto;
}
p .explainPoints{
    font-weight:600;
    color:#096b01;
}
#pointSummary{
    font-size:80%;
}

.modal-titlebar{
    color:#000;
    background:#ff9670;
    border-radius:10px 10px 0 0;
    width:100%; 
}
.modal-title{
    float:left;  
    text-align: center;
    cursor:grab;
    padding-left:15px;
    min-width:95%;
}
.close-modal {
    font-size:200%;
    padding:15px;
    color: #555555;
    font-size: 28px;
    font-weight: bold;
    cursor:pointer;

}

.tox-statusbar{
    display: flex;
    align-items: center;
    justify-content: end;
}
.tox-statusbar__text-container{
    display: none !important;
}

@media only screen and (max-device-width : 450px) {
    .mobileonly{
        display:unset;
    }
    #service_rates img, #service_selection img,  .pricing-box img{
        width:25px;
        display:block;
        margin:auto;
    }
    #service_rates tbody tr td span, #service_selection tbody tr td span{
        display:inline-block;
        word-wrap:break-word;
    }
    #service_selection tbody tr {
        line-height:11px;
    }
    #service_selection .radio-holder{
        white-space: pre;
    }
    #service_selection .radio-holder * {
        margin:0;
        padding:0;
    }
    .service_descrip{
        padding: 0;
    }
    #pricing-holder{
        /*display:inline;*/
    }
    .what-u-might-get img{
        display:inline;
        width:40px;
    }

    /*corrections to template*/
    .hero-tagline-top{
        font-size:40px;
        text-align: center;
        left:0;
        top:0;
        padding:0 5%;
        background:#A0D8FB;
    }
    .main-slider .container {
        /*padding-top:232px;*/
        padding-top:150px;
    }
    .main-slider__title{
        font-size:35px;
        text-shadow: 1px 1px #fff4f4;
    }
    .swiper-wrapper{
        min-height:700px;
        top:150px;
    }
    div.swiper-container-fade, div.swiper-slide, div.swiper-slide-prev, div.swiper-slide-next, div.swiper-wrapper, 
    div.swiper-slide-duplicate,  div.swiper-slide-duplicate-active, div.swiper-slide-active,
    div.swiper-container, div.thm-swiper__slider, div.swiper-container-fade, div.swiper-container-initialized, 
    div.swiper-container-horizontal{
        transition-duration:0s !important;
    }
    .main-slider-shape-1{
        /*background-image:none !important;*/
        opacity:20%;
        object-fit: scale-down;
        background-image: url(../../../assets/images/shapes/main-slider-shape-1.jpg);
    }
    #loginform div{
        display:flex;
    }
    #loginform div > input, #loginform div > label {
        max-width:55%;
        flex-basis:50%;
        margin:0;
    }
    #client-form > div > div div, #customer-form >div > div div{
        grid-template-columns:40% 60%;
        grid-gap:0;
    }
    #client-form input,#client-form label, #customer-form input, #customer-form label{
        padding:0 0 0 5px;
        margin:2px 0;
        font-size:65%;
    }
    #client-form > div div.phone-grid{
        grid-template-columns: 40% 33% 22% 5%;
    }
    #client-form > div div.zone-grid{
        grid-template-columns: 40% 20% 20% 20%;
    }
    #customer-form > div div.zone-grid{
        grid-template-columns:40% 60%;
    }
    #customer-form > div div.pw-grid{
        grid-template-columns: 40% 50% 10%;
    }
    #customer-form > div div.phone-grid{
        grid-template-columns: 40% 35% 20% 5%;
    }
    #client-form > div .phone-zone-3, #customer-form > div .phone-zone-3{
        font-size:50%;
    }
    #client-form > div .phone-zone-3{
        text-align:left;
    }
    .reqNote{
        position:initial;
    }
    label:not(.reqNote){ 
        padding-left:25px !important;
    }
    .about-four{
        padding:0;
    }
    .about-four__img{
        margin:auto;
        width:75%;
    }
    #price-box-selection #pricing-holder .pricing-box{
        width:40%;  
    }

    /*end corrections */
}