:root {
    --spGreen: #8cd2c7;
    --spGreen50: #8cd2c780;
    --spBlue: #24347c;
    --spBlue50: #24347c80;
    --spRed: #ec1c24;
    --spRed50: #ec1c2480;
  }
body {
    font-family: 'Roboto', sans-serif;
    color: black;
    background-position: left;
    background-size: cover;
}

p{
    margin-block-start: 0em;
}
h2{
    margin-block-start: 0;
    margin-block-end: 0.5em;
}

img {
    filter: drop-shadow(2px 2px 2px gray);
}

a {
    text-decoration: none;
    color: #24347c;
}

a:hover {
    font-weight: 600;
    color: #ec1c24;
}

input, select, button, textarea{
    width: 100%;
    background: whitesmoke;
}

.tagLine{
    margin-top: 0.25em;
}
.footer{
    display: block;
    position: fixed;
    background-color: #fff;
    bottom: 0;
    width: 100%;
}
.progress{
    box-sizing: border-box;
}
table{
    border-collapse: collapse;
}
.noStriped thead{
    background-color: silver;
}
.noStriped tbody tr {
    border-bottom: 1px solid silver;
}

.highlight:hover{
    background-color: silver;
    /* font-weight: 600; */
}

#leftContent{
    display: inline-block;
    float: left;
    width: 70%;
}

#rightContent{
    display: inline-block;
    float: left;
    width: 30%;
}

#bottomContent{
    display: inline-block;
    float: left;
    width: 100%;
}

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder{
    padding-left: 10px;
}

.cb{
    cursor: pointer;
}

.shortSelect{
    max-width: 95%;
    float: right;
}
.icons{
    height: 17px;
    width: auto;
    margin-right: 5px;
    cursor: pointer;
}
.bigIcons{
    height: 28px;
    width: auto;
    margin-left: 5px;
    cursor: pointer;
}
.plusminus{
    position:relative;
    top:4px;
}
.cartQty{
    width:4em;
    text-align:center;
    margin-left: 1px;
    margin-right: 4px;
}

#topLeft{
    /* background: whitesmoke; */
    width: 24%;
}
#topRight{
    /* background: whitesmoke; */
    width: 74%;
}
#bottom{
    /* background: whitesmoke; */
    width: 99%;
}
#topLeft, #topRight, #bottom{
    display: inline-block;
    float: left;
    padding: 0.5%;
}

.progress{
    border: 1px solid black;
}
.progress1, .progress0{
    display: inline-block;
    width:1%;
    margin: 0;
    padding: 0;
}
.progress1{
    background-color: rgb(150, 150, 255);
}
.progressTXT{
    font-weight: 600;
    color: red;
    position: relative;
    left: 102%;
}

.tGallery{
    width:100%;
    height:100%;
    display: flex;
    flex-wrap: wrap;
}
.tContainer {
    display: inline-block;
    float: left;
    color: black;
    padding: 3px;
    margin: 3px;
    border: solid 1px;
    border-radius: 3px;
    width: 50px;
    height: 50px;
    font-size: 0.7em;
}
.tImage{
    max-height:50px;
    max-width:50px;
}
.pImage{
    max-height:100px;
    max-width:100px;
}
.qrCode{
    width:200px;
    height:auto;
}
.qrCodeSmall{
    width:150px;
    height:auto;
}
.hidden{
    display: none;
}
.itemOption{
    padding-right: 10px;
}
.itemOptions{
    display:flex;
    flex-wrap:wrap;
}
#PDFcontent{
    margin-top: 1em;
}

.egate-button-row{
    height: 105px;
}

#eGate-button,
.egate-button{
    width: 100%;
    height: 50px;
    padding: 0.25em;
    background: var(--spGreen);
    font-size: 2em;
    margin-top: 10px;
    /* line-height: 24px; */
    text-transform: none;
    color: black;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #555;
    overflow: visible;
}
/* #eGate-button:hover,
.egate-button:hover{
    background: var(--spBlue);
    filter: brightness(0.95);
    color: var(--spRed);
    cursor: pointer;
} */

.creditCards{
    height: 40px;
    position: relative;
    top: 8px;
    margin: 0.25em;
}

.portalLogo{
    width: auto;
    height: 50px;
}
.contain{
    container-type: size;
}

@container (max-width: 700px){
    .egate-button{
        font-size: 1.75em;
    }
    .contain{
        height: 4em;
    }
}

@container (max-width: 600px){
    .egate-button{
        font-size: 1.5em;
    }
}

@container (max-width: 500px){
    .egate-button{
        font-size: 1.25em;
    }
}

@container (max-width: 400px){
    .egate-button{
        font-size: 1.0em;
    }
}

@container (max-width: 350px){
    .egate-button{
        font-size: 0.8em;
    }
}

@container (max-width: 300px){
    .egate-button{
        font-size: 0.6em;
    }
}

@media screen and (max-width:800px) {
    #topLeft, #topRight, #bottom, input[type=submit] {
        width: 100%;
        margin-top: unset;
        text-wrap: pretty;
    }
    .portalLogo{
        width: auto;
        height: 40px;
    }
}
@media screen and (max-width:600px) {
    .portalLogo{
        width: auto;
        height: 30px;
    }
}