body {
    background-color: #D3D3D3;
    font: 14px/18px "Lato",sans-serif;
    /*font-family: 'Tahoma';
    font-size: 1.35em;
    */
    color: #083346;
    text-align: center;
}
    
.wrap { background-color: #ffffff; }

.top-margin-10 { margin-top: 10px }
.bot-margin-10 { margin-bottom: 10px; }
.right-margin-10 { margin-right: 10px; }
.right-margin-15 { margin-right: 15px; }
.right-margin-25 { margin-right: 25px; }
.left-margin-10 { margin-left: 10px; }
.right-margin-4 { margin-right: 4px; }
.left-margin-4 { margin-left: 4px; }
.full-width { width: 100%; }

.display-block { display: block; }
.float-left { float: left; }

/* ID Styles */
#logo-container {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 0;
}
    
#application-container {
//    height: 100vh;
    width: 100%;
    background-color: #FFFFFF;        
}
    
#title-message {
    font-family: Tahoma;
    font-weight: bold;
    font-size: 200%;
    text-transform: uppercase;
    color: #00703C;
}
    
#mtitle-message {
    font-family: Tahoma;
    font-weight: bold;
    font-size: 200%;
    text-transform: uppercase;
    color: #848482;
}
    
#legal-message {
    font-family: Tahoma;
    font-style: italic;
    font-weight: bold;
    font-size: 75%;
    color: #002D40;
    float: left;
    text-align: left;
    margin-top: 25px;
    padding-left: 3px;
}
    
#instr-message {
    font-family: Tahoma;
    font-style: italic;
    font-size: 90%;
    color: #002D40;
    float: left;
    text-align: left;
    margin-top: 25px;
    padding-left: 3px;
}
    
#ssl-badge {
    height: 40px;
    width: 100px;
    float: left;
    display: inline-block;
}
    
#bbb-badge {
    height: 35px;
    width: 100px;
    float: left;
    display: inline-block;
    margin-top: 3px;
}

#review-buttons {
    display: block;
    float: right;
}
    
/* Text Styling */   
.bold-red {
    color: #00703C;
    font-weight: 900;    
}

.bold-gray {
    color: #848482;
    font-weight: 900;    
}

.bold-info {
    font-weight: 700;
    font-size: 1.25em;
    text-align: left;
}
    
.info-text { color: #083346; }
    
.retailer-info {
    text-align: left;
    float: left;
    display: inline-block;
}

.weight-500 { font-weight: 500; }

.center-margins {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Validation */
.error .input-error {
    font-family: 'Raleway', sans-serif;
    color: #8A1F11;
    font-size: 1em;
    font-weight: 500;
}
  
.error {
    background: none repeat scroll 0 0 #FBE3E4;
    font-family: 'Raleway', sans-serif;
    color: #8A1F11;
    font-size: 1em;
    font-weight: 600;
    list-style-type: none;
    text-align: left;
    width: auto;
    border: none;
}  

.error-box {
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #FBC2C4;
}

li label.valid { display: none !important; }

/* Form Styling */
.header {
    color: #FFFFFF;
    background-color: #00703C;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    font-size: 110%;
    margin-top: 25px;
    margin-bottom: 5px;
    display: inline-block;
    min-width: 215px;
}

.bheader {
    color: #FFFFFF;
    background-color: #0000ff;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    font-size: 110%;
    margin-top: 25px;
    margin-bottom: 5px;
    display: inline-block;
    min-width: 215px;
}

.mheader {
    color: #FFFFFF;
    background-color: #848482;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    font-size: 110%;
    margin-top: 25px;
    margin-bottom: 5px;
    display: inline-block;
    min-width: 215px;
}

.yheader {
    color: #000000;
    background-color: #FFE135;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    font-size: 110%;
    margin-top: 25px;
    margin-bottom: 5px;
    display: inline-block;
    min-width: 215px;
}

.rheader {
    color: #FFFFFF;
    background-color: #FF0000;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    font-size: 110%;
    margin-top: 25px;
    margin-bottom: 5px;
    display: inline-block;
    min-width: 215px;
}

label {
    font-weight: 600;
    color: #083346;
}

.top-label { display: block; }

.form-el {
    text-align: left;
    float: left;
    min-height: 55px;
    display: inline-block;
}

.logo {
    width: 90px;
    height: auto;
}

select:hover { cursor: pointer; }

#form-submit {
    height: 40px;
    min-width: 125px;
    font-size: 110%;
    font-weight: 800;
    border-width: 2.5px;
    float: right;
    margin-top: 6px;
}

#form-cancel {
    height: 40px;
    width: 125px;
    font-size: 110%;
    font-weight: 800;
    border-width: 2.5px;

    float: right;
    margin-top: 6px;
}

#form-edit {
        height: 30px;
        width: 90px;
        font-size: 110%;
        font-weight: 800;
        border-width: 2.5px;
        float: right;
        margin-top: 6px;
}
    
input[type='checkbox'] {
    /* Hide the input, but have it still be clickable - removed the opacity: 0; value*/

    float: left;
    margin-left: 2px;
    margin-top: 15px !important; /* this used to be set to 0px, but it was too high? */
    width: 16px;
    height: 20px;
    cursor: pointer;
    display: inline-block;
        
    /* Place default checkbox on top of custom image*/
    position: relative;
    z-index: 99;
        
    margin-bottom: 0 !important;
}

input[type='radio'] { margin-top: 10px; }

.bot-radio { margin-top: 10px; }

.bot-radio-label {
	display:inline; 
    margin: 0px 20px 0px 0px;
}

.bot-chkbox {
    margin-top: 0px !important;
    width: 25px !important;
    height: 46px !important;
    margin-right: -5px !important;
}

.bot-chkbox-label {
    background-position: left 26px !important; 
    background-size: 20px 20px !important;
    background-repeat: no-repeat;
    height: 46px !important;
    margin-left: -20px !important;
    padding-left: 0 !important;
}
	
input[type='checkbox'] + label {
    float: left;
    clear: none;
    display: inline-block;
    /* Push checkbox to the left*/
    margin-left: -132px;
    /* Push label to the right*/
    padding-left: 22px;
    cursor: pointer;
}

input[type='checkbox']:checked + label {
    /*background-image: url(/Content/Images/Checkbox_Checked.PNG);
    background-size: contain;
    */
}

.hor-checkbox-contianer {
    min-width: 150px;   
    min-height: 25px;
}
    
.rounded-textbox {
    border-top: 1px solid #848482;
    border-left: 1px solid #848482;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
	border-radius: 5px;
	margin-right: 3px;
	margin-bottom: 3px;
    padding-left: 5px;
	height: 25px;
}

.rounded-gtextbox {
    border: 1px solid #848482;
	border-radius: 5px;
	margin-right: 3px;
	margin-bottom: 3px;
    padding-left: 5px;
	height: 25px;
}

    .xxs-box { width: 30px; }
    .xs-box { width: 85px; }
    .s-box { width: 100px; }
    .sm-box { width: 120px; }
    .md-box { width: 175px; }
    .lg-box { width: 225px; }
    .xl-box { width: 375px; }

@media (min-width: 414px) and (max-width: 650px) {
    .inner-container {
        padding-left: 5%;
        padding-right: 5%;
    }
    .xs-box { width: 125px; }
    .sm-box { width: 160px; }
    .md-box { width: 360px; }
    .lg-box { width: 360px; }
    .xl-box { width: 360px; }
}
    
@media (max-width: 413px) {
    .inner-container {
        padding-left: 5%;
        padding-right: 5%;
    }
    .xs-box { width: 125px; }
    .sm-box { width: 150px; }
    .md-box { width: 215px; }
    .lg-box { width: 285px; }
    .xl-box { width: 285px; }
    .header { font-size: 105%; }
}