@media only screen and (max-width: 767px) {
    #bannerNameSignout {
        position: relative !important;
        top: 10% !important;
        left: 20px;
        margin-right: 0px;
    }
    .mobileHeight {
        margin-top: 2% !important;
    }
    .phonePadd {
        margin-top: 5% !important;
    }
    .leftOnMobile {
        position: relative !important;
        right: 6% !important;
    }
    .mobileCenter {
        text-align: center;
    }
    .mainPBtn {
        height: 60px;
        width: 90px;
    }
    .smallNBtn {
        position: relative;
        right: 18px;
    }
    .button-container{
        margin-bottom: 40px;
    }
    .versionDisplay {
        position: relative;
        top: 5px !important;
    }
    #modalCloseBtn {
        position: relative;
        right: 32% !important;
    }
}
@media only screen and (max-width: 1450px) {
    .topEyeDiv {
        margin-left: 100px !important;
    }
}
.grcaPhoto {
    height: 100px;
    width: 100px !important;
}
.downText {
    position: relative;
    top: 25px;
}
.centerText {
    text-align: center;
}
.rightText {
    text-align: right;
}
.signOutPlusName {
    position: relative;
    top: 70px;
}
.blueTBar {
    height: 100px;
}
.versionDisplay {
    position: relative;
    top: 30px;
    right: 15px;
}
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Prevents horizontal scroll */
}
.topSubHeading {
    position: relative;
    right: 10%;
}
.smallBBtn, .smallNBtn {
    width: 90px;
}
.chkBox {
    flex-shrink: 0;
}
.clover-footer {
    /* Able to hide this automatic SDK feature by enabling the line below */
    display: none;
}
iframe {
    max-height: 40px;
}
.card {
    padding: 10px;
    margin: 10px;
}
#formTC .isInvalid {
    border: 2px solid red;
}

#formTC label:has(+ input.isInvalid[type='checkbox']) {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-thickness: 2px;
}
.smallWarningTxt {
    color: gray;
}
.field {
    height: 37px;
}
#bannerNameSignout {
    margin-right: 20px;
}
.mainPBtn {
    height: 60px;
}
#paymentProcessingTag {
    position: absolute;
    font-size: large;
    bottom: 10px;
}
.grayColor {
    color: gray;
}
.asideIcon {
    position: relative;
    left: 50px;
}
.asideIconLocation {
    position: relative;
    right: 20px;
}
.asideIconPayment {
    position: relative;
    right: 45px; 
}
#modalCloseBtn {
    position: relative;
    right: 37%;
}
.equal-card {
    height: 80%;
}
#reviewInputsDiv {
    border: 1px solid black;
    border-radius: 5px;
}

#divOwnerInfo {
    display: none;
}

.floatr {
    float: right;
}


/*************************************************************************location page *******************************************/


/* map view size */
#viewDiv {
    height: 500px;
    width: 900px;
    margin: 0;
    position: relative;
}

#locationDiv {
    width: 900px;
    margin-bottom: 10px;
}

/* floating window max size on map: IF ON MAP */
/* #locationDiv {
    min-width: 340px;
    max-width: 360px;
} */

#locationDiv>div:first-child {
    width: 375px;
    padding-right: 20px;
    margin-right: 25px;
    border-right: 1px solid #666;
}

/* map loading icon */
#viewDiv-loading {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spinloading 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    /* Shifts the element back by half its own size */
    transform: translate(-50%, -50%);
}

@keyframes spinloading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Safari */
@-webkit-keyframes spinloading {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

/* Google search box CSS properties */
gmp-place-autocomplete {
    /* background-color: rgb(249 250 251); */
    color-scheme: light;
    /* border: 1px solid rgb(209, 213, 219); */
    /* border-radius: 9px; */
}