@media all and (max-width: 50em) {
    .columns .ui-grid-a .ui-block-a {
        display: none;
    }
    .columns .ui-grid-a .ui-block-b { 
        width: 100%;
        float:none; 
    }

    .overview .ui-grid-a .ui-block-a {
        width: 100%;
        float:none; 
    }
    .overview .ui-grid-a .ui-block-b { 
        display: none;
    }
    .overview .ui-grid-a .ui-block-c { 
        display: none;
    }

    .navismall {width: 100%; display: block;}
    .navilarge {width: 0%; display: none;}

    tr.separator {width:100%; display:inline-block;}


    .CompareBuyingOptions .ui-grid-a{margin-bottom:30px;}
    .CompareBuyingOptions .ui-grid-a .ui-block-a{width:100%;display:block;float:left;}
    .CompareBuyingOptions .ui-grid-a .ui-block-b{width:100%;display:block;float:left;}
    
    .CompareBuyingOptions .ui-grid-a .buyingOption .ui-block-a{width:100%;display:block;float:left;margin-bottom:30px;}
    .CompareBuyingOptions .ui-grid-a .buyingOption .ui-block-b{width:100%;display:block;float:left;}


    .CompareBuyingOptions .ui-grid-c{margin-bottom:30px;background-color:#eee;}  
    .CompareBuyingOptions .ui-grid-c .ui-block-a{width:100%;display:block;float:left;background-color:white;}
    .CompareBuyingOptions .ui-grid-c .ui-block-b{width:30%;display:block;float:left;}
    .CompareBuyingOptions .ui-grid-c .ui-block-c{width:70%;display:block;float:left;}
    .CompareBuyingOptions .ui-grid-c .ui-block-d{width:100%;display:block;float:left;}




}

@media screen and (min-width: 1080px) {
   .ui-mobile .ui-page {
       max-width: 1080px;
       margin-left: calc(50% - 540px);
   }
}

@media all and (min-width: 50em) {
    .columns .ui-grid-a .ui-block-a {
        width: 25%;
        display: block;
    }
    .columns .ui-grid-a .ui-block-b { 
        width: 75%;
        float:right; 
    }
    #pageRightHandSide {
        margin: 1px;
        padding-left: 20px;
    }

    .overview .ui-grid-a .ui-block-a {
        display: none;
    }
    .overview .ui-grid-a .ui-block-b { 
        width: 25%;
        display: block;
    }
    .overview .ui-grid-a .ui-block-c { 
        width: 75%;
        display: block;
    }

    .navilarge {width: 100%; display: block;}
    .navismall {width: 0%; display: none;}
    tr.separator {width:0%; display:none;}

    .CompareBuyingOptions .ui-grid-a{margin-bottom:20px;}
    .CompareBuyingOptions .ui-grid-a .ui-block-a{width:20%;display:block;float:left;}
    .CompareBuyingOptions .ui-grid-a .ui-block-b{width:80%;display:block;float:left;}
    
    .CompareBuyingOptions .ui-grid-a .buyingOption .ui-block-a{width:48%;display:block;float:left; margin-right:4%;}
    .CompareBuyingOptions .ui-grid-a .buyingOption .ui-block-b{width:48%;display:block;float:left;}

    .CompareBuyingOptions .ui-grid-c .ui-block-a{width: 20%;display:block;}
    .CompareBuyingOptions .ui-grid-c .ui-block-b{width: 15%; float:left;}
    .CompareBuyingOptions .ui-grid-c .ui-block-c{width: 17%;}
    .CompareBuyingOptions .ui-grid-c .ui-block-d{width: 48%;}




}


.CompareBuyingOptions .buyingOption .ui-block-a,
.CompareBuyingOptions .buyingOption .ui-block-b{

}

.buyingOption label{
 width:48%;
 float:left;
}

.CompareBuyingOptions .buyingOption ul .liInner{
border-top:0px;
}

.CompareBuyingOptions .buyingOption ul li label:nth-child(2){

text-align:right;
}

.CompareBuyingOptions .buyingOption ul li {
background-color:#f8efc0;
/*background-color: rgb(0, 162, 232);*/
background-color:#fff;
}


/*clarify**********************************/

#pagefooter{
text-shadow:none;
color:white;
}

.ui-listview > li h2 {
font-size: 1.4em;
}

.ui-select .ui-btn select{
text-align:left;
}

label.ui-btn,
.ui-select .ui-btn,
select{
    font-weight:400;
}
/***********************************/



div {border:0px solid fuchsia;}

#pageLeftHandSide {

}

#customerlogo {
    text-align: center;
    margin-top:30px;
    height:100px;
}

table { 
    width:100%;
    margin-top: 20px !important;
}
table caption { 
    text-align:left;  
}
table thead th { 
    text-align:left; 
    border-bottom-width:1px; 
    border-top-width:1px; 
}
table th, td {
    text-align:left; 
    padding:6px;
}

table th.center, td.center {
    text-align:center;
    padding:6px;
}

#pagefooter {
    text-align: center;
    padding: 10px;
    font-size: 10px;
}

#marketing-box{
    float:left;
    padding:0px;
    width:300px;
    margin:0px 0px 0px 0px;
}
#marketing-box .marketing-info{
    border:1px solid #ccc;
    margin:0px;
    overflow:hidden;
    background:url(../img/grad-bottom.png) repeat-x bottom left;
}

#info-box{
    padding-top:0px;
    width:165px;
}

#info-box .dates{
    position:relative;
    border:1px solid #aaa;
    width:165px;
}
#info-box .marketing-info{
    border:1px solid #aaa;
    width:165px;
    margin-top:20px;
    overflow:hidden;
}

#info-box .head, #marketing-box .head{
    height:15px;
    background:url(../page-pics/infos-head-grad.png) repeat-x;
    border-bottom:1px solid #aaa;
    padding-top:2px;
    font:bold 10px Arial, Helvetica, sans-serif;
    text-align:center;
}

#info-box .marketing-text, #marketing-box .marketing-text{
    padding:10px 5px 10px 5px;
}

div.colLeft {
    width:30%;
    float:left;
    display:block;
}

div.col05 {
    width:5%;
    float:left;
    display:block;
}

div.col07 {
    width:7%;
    float:left;
    display:block;
}

div.col10 {
    width:10%;
    float:left;
    display:block;
}

div.col15 {
    width:15%;
    float:left;
    display:block;
}

div.col20 {
    width:20%;
    float:left;
    display:block;
}

div.col40 {
    width:40%;
    float:left;
    display:block;
}

div.col60 {
    width:60%;
    float:left;
    display:block;
}

div.col75 {
    width:75%;
    float:left;
    display:block;
}

div.col80 {
    width:80%;
    float:left;
    display:block;
}

div.col90 {
    width:90%;
    float:left;
    display:block;
}

div.colRight {
    width:65%;
    float:left;
    display:block;
}

div.col20 {
    width:20%;
    float:left;
    display:block;
}

div.col50 {
    width:50%;
    float:left;
    display:block;
}

div.col60 {
    width:60%;
    float:left;
    display:block;
}

div.col80 {
    width:80%;
    float:left;
    display:block;
}

div.width75 {
    width:75px;
    float:left;
    display:block;
}

div.width40 {
    width:40px;
    float:left;
    display:block;
}

div.colRight {
    width:65%;
    float:left;
    display:block;
    padding: 5px;
}

div.max600 {
    max-width: 600px;
}

input:disabled {
    pointer-events:none;
}

.requiredCheckbox {
    display:inline-block;
    margin:5px;
}

.error-padding {
    padding: 15px;
}

.errorMessage {
    color:red !important;
}

.error {
    border:1px solid red;
}

.alignRight {
    text-align: right;
}

.alignCenter {
    text-align: center;
}


div.confirmationLine {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 15px;
}

div.spacer {
    font-size: 0;
    height: 10px;
    line-height: 0;
}

div.topRow {
    margin-top: 20px;
}

div.clear {
    clear: both;
}

div.center {
    text-align: center;
}

a.button {
    background-color: lightgray;
    line-height: normal;
    display: inline-block;
    align-items: center;
    padding: 10px;
    color: black !important;
    text-decoration: none;
    border-radius: 10px;
    width: 90%;
}
div.topMargin0 {
    margin-top: 0px !important;
}

div.topMargin5 {
    margin-top: 5px !important;
}

div.topMargin10 {
    margin-top: 10px !important;
}

div.sidePadding10 {
    padding-left: 10px;
    padding-right: 10px;
}

div.wrap {
    word-wrap: break-word;
    white-space: normal;
}

.small-font {
    font-size: 12.5px;
}

input.invisible  {
    display: none;
}

tr.separator {
    height:5px;
    background-color: lightgrey;
}

#date-table th {
        margin-top: 5px;
}



/* INPUT VALIDATION ERROR */
#error {
    margin: 0 auto;
    width: 96%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#error .message {
    text-align: center;
    color: #111;
    font-size: 1em;
    font-weight: 500;
    padding: 20px;
    border: 2px solid red;
}

.error-width {
    max-width: 95% !important;
    position: relative !important;
}

.mobile-errorpage-fix {
    top: 30px!important;
}

/* Hide the eye from a password input in MS Edge and IE */
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {
    display: none;
}

.fa-eye-icon2 {
    font-size: 15px;
    color: black;
    position: absolute;
    top: 15px;
    right: 12px;
    cursor: pointer;
}

.fa-eye-icon3 {
    font-size: 15px;
    color: black;
    position: absolute;
    top: 15px;
    right: 11px;
    cursor: pointer;
}