#divModifiers
{
    position: absolute;
    text-align: center;
    
    height:80%;
    width:35%;
    
    top:10%;
    left:30%;
    
    opacity: 1;
    
    display: inline-block;    
    background-color:white;
    border: 1px solid white;
    border-radius:4px;
    z-index: 100;
    overflow-y:auto;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px 0px;
    
    display:grid;
    grid-template-columns: auto;
    row-gap:0px;
    align-content:start;
        
} 

#divStickyHeader
{
    position: sticky;top:0;
    background-color:white;
}

.exitX
{
    float:right;margin-right:5px;
    cursor:pointer;
}

.exitX::after
{
    clear: both;
    cursor:auto;
}

.exitPayErrorX
{
    float:right;margin-right:5px;
    cursor:pointer;
    color:black !important;
    margin-top:5px;
}

.exitPayErrorX::after
{
    clear: both;
    cursor:auto;
}

.exitX_delChoice
{
    padding:10px;
    width:100%;
    text-align:right;
}

.ModGrid-header
{
    font-size:1.5em;
    text-align:left;
    padding:5px;
    border-bottom:1px solid lightGray;
    height:50px;
}

.modGrid-OnlineDesc
{
    color: rgb(105, 114, 128);
    text-align:left;
    padding:5px;    
    height:50px;  
}

.modGrid-Qty
{
    font-size:1.5em;
    text-align:left;
    padding:5px;
    border-bottom:1px solid lightGray;
    background-color:#f6f5f5;
 
}

.modOuterDiv
{
    display:block;
    background-color:white;
    border-radius:10px;
    box-shadow: rgba(213, 213, 213, 0.5) 4px 4px 4px 4px;    
    
    margin-left:auto;
    margin-right:auto;
    width:96%;

    padding:5px;
    margin-bottom:5px;  
    text-align:left;
}

.qtyOuterDiv
{
    display:block;
    background-color:white;
    border-radius:10px;
    box-shadow: rgba(213, 213, 213, 0.5) 4px 4px 4px 4px;    
    
    margin-left:auto;
    margin-right:auto;
    width:96%;

    padding:5px;
    margin-bottom:5px;  
    text-align:left;    
}

#divQty
{
    display:inline-block;
    border:none;
}

#divQtyCtr
{
    padding:10px;
    font-size:1em;
    width:100%;
    display:grid;
    align-items: center;
    grid-template-columns: 30px 30px 30px auto;
    row-gap:2px;
    grid-template-areas:       
        'minus qty plus price price';    
}

.textVerticleCenter
{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;    
}

.qtyRound
{
    border:2px solid rgb(105, 114, 128);
    display: inline-block;
    border-radius: 0px;
    width: 30px;
    height: 30px;
    text-align: center;  
    color: rgb(105, 114, 128);
}

.qtyCurrent
{
    color:darkRed;
    display: inline-block;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;           
    
}

.qtyItem1 { grid-area: minus; text-align:center;}
.qtyItem2 { grid-area: qty; text-align:center; font-weight:bold;}
.qtyItem3 { grid-area: plus; text-align:center;}
.qtyItem4 { grid-area: price; text-align:right;}


#divOptionsCtr
{           
    width:100%;
    margin-left:auto;
    margin-right:auto;

    display: grid ;
    align-items: center ;
    grid-auto-flow: row ;
    grid-auto-rows: auto ; /* play with this to change height of the children, 50% will fill half */
    grid-template-columns: unset; /* do not set template columns and rows */
    grid-template-rows: unset;
    overflow-y: scroll;
    
}

.modHeaderFont
{
    font-size:1.5em;
}

.modChildHdr
{
    background-color:white;    
    width:100%;
    padding:5px;
    margin-bottom:5px; 
}

.modRadio
{
    font-size:.75em;
}

.modSelect
{
    font-size:.75em;
}

.addToCartButton
{
    border-radius: 24px;
    cursor: pointer;
    padding: 5px 8px;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-property: color, border-color, background-color;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    background-color: rgb(197, 69, 49);
    border-style: none; 
    width:80%;
    height:44px;
    
    bottom:0;
    position:sticky;
    position: -webkit-sticky; /* Safari */
}

#divCmdAddToCart
{
    padding:20px;
    bottom:0;
    position:sticky;
    position: -webkit-sticky; /* Safari */
    border-top:1px solid lightGray;
    background-color:white;
}

#divAddToCartButton
{
    padding: 20px;
}

@media only screen and (max-width: 1024px) 
{    
    #divModifiers
    {
        width:100%;
        height:100%;
        position: absolute;
        top:0;
        text-align: center;
        display: inline-block;
        border:1px solid white;
        left:0%; 
        overflow-y:scroll;
    }      
}