/*========  for mobile ==========*/    
body{
    background-color:lightgray;
}  

.majorButton{
    min-width:80%;
    padding:1.0rem;
    font-weight:bold;
    font-size:3rem;
    border: 5px solid gray;
    border-style: outset;
    background-color:gray;
    color:white;
}    

.sideButton{
    min-width:10%;
    padding:0.2rem;
    font-weight:bold;
    font-size:2.5rem;
    border: 5px solid gray;
    border-style: outset;
    background-color:gray;
    color:white;
    margin-right:1rem;
}    

.sideButtonSmall{
    min-width:5%;
    padding:0.2rem;
    font-weight:bold;
    font-size:1.5rem;
    border: 5px solid gray;
    border-style: outset;
    background-color:gray;
    color:white;
    margin-right:1rem;
}    

.sideButtonSmallWide{
    width:100%;
    padding-left:0.2rem;
    font-weight:bold;
    font-size:2.3rem;
    border: 5px solid gray;
    border-style: outset;
    background-color:gray;
    color:white;
    margin-right:1rem;
}    

.nextPrice   ,  .nextName {
    float: right;
}

.removePrice  , .removeGuest  , .removeName{
    float: left;
}



.inputTip
{
    font-size:2.3rem; 
    width:98%;
}

.inputFieldName{
    width:40%;
    padding:0.2rem;
    font-weight:bold;
    font-size:2.5rem;
    border: 5px solid gray;
    border-style: outset;
    background-color:white;
    color:black;
    text-align: right;
}    

.inputFieldPrice{
    width:6rem;
    padding:0.2rem;
    font-weight:bold;
    font-size:2.5rem;
    border: 5px solid gray;
    border-style: outset;
    background-color:white;
    color:black;
    float:left;
}    

.selectField{


    padding:0.2rem;
    font-weight:bold;
    font-size:2.5rem !important;
    border: 5px solid gray;
    border-style: outset;
    background-color:white;
    color:black;
    margin-right: 20px;
}    

.selectFieldList{


    padding:0.2rem;
    font-weight:bold;
    font-size:3.5rem !important;
    border: 5px solid gray;
    border-style: outset;
    background-color:white;
    color:black;
    margin-right: 20px;
}    



.paymentsTable
{ width:100%;
  font-size:2rem;
  background-color:white;

}

.guestPaymentDiv
{
    border-style: outset; 
    margin-bottom:15px ;  
    border:5px solid gray;
    padding: 0.2rem;
    font-weight: bold;
    font-size: 2.5rem;
}





.inputPercTip
{
    font-size:2.0rem;  
}
.horCenter
{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.horCenterWide
{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}


.mediumVerSpacer
{   height:2rem;
    clear:both;       
}

.largeVerSpacer
{   height:5rem;
    clear:both;       
}


.extraLargeVerSpacer
{   height:10rem;
    clear:both;       
}


.hidden{
    display:none;
}

.shown{
    display:block;
}

smallHorSpacer 
{  width: 10px;

}    

.messageText{
    font-size:2.5rem; 
}


/*=========  for desk top screen ==========*/    
@media screen and (min-width: 1200px) 
{
    body{
        background-color:white;
    }    

    .majorButton{
        width:auto; 
        padding:1.0rem;
        font-weight:bold;
        background-color:gray;
        color:white;
    }   

    .sideButton{
        width:auto;
        padding:0.2rem;
        font-weight:bold;
        font-size:2rem;
        border: 5px solid gray;
        border-style: outset;
        background-color:gray;
        color:white;
        margin-right:1rem;
    }    

    .sideButtonSmall{
        min-width:5%;
        padding:0.2rem;
        font-weight:bold;
        font-size:1.5rem;
        border: 5px solid gray;
        border-style: outset;
        background-color:gray;
        color:white;
        margin-right:1rem;
    }    

    .sideButtonSmallWide{
        width:100%;
        padding:0.2rem;
        font-weight:bold;
        font-size:1.5rem;
        border: 5px solid gray;
        border-style: outset;
        background-color:gray;
        color:white;
        margin-right:1rem;
    }    


    .inputTip
    {
        font-size:2.3rem; 
        width:98%;
    }

    .inputFieldName{
        text-align: right;
        padding:0.2rem;
        font-weight:bold;
        font-size:2rem;
        border: 5px solid gray;
        border-style: outset;
        background-color:gray;
        color:white;
    }    

    .inputFieldPrice{
        width:6rem;
        padding:0.2rem;
        font-weight:bold;
        font-size:2rem;
        border: 5px solid gray;
        border-style: outset;
        background-color:gray;
        color:white;
        float:left;
    }    

    .selectField{
        width:auto;
        padding:0.2rem;
        font-weight:bold;
        font-size:2rem !important;
        border: 5px solid gray;
        border-style: outset;
        background-color:white;
        color:black;
         margin-right: 20px;
    }    

    .selectFieldList{


    padding:0.2rem;
    font-weight:bold;
    font-size:2rem !important;
    border: 5px solid gray;
    border-style: outset;
    background-color:white;
    color:black;
    margin-right: 20px;
}    
    
    
    .paymentsTable
    { width:auto;

    }


    .guestPaymentDiv
    {
        border-style: outset; 
        margin-bottom:15px ;  
        border:5px solid gray;
    }


    .messageText{
        font-size:1rem; 
    }

    .inputPercTip
    {
        font-size:1rem;  
    }


    .horCenter
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }

    .horCenterWide
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }


    .mediumVerSpacer
    {   height:2rem;
        clear:both;       
    }

    .largeVerSpacer
    {   height:5rem;
        clear:both;       
    }


    .extraLargeVerSpacer
    {   height:10rem;
        clear:both;       
    }

    .hidden{
        display:none;
    }

    .shown{
        display:block;
    }

    smallHorSpacer 
    {  width: 10px;

    }
}