/***********************************************************/
/*******CME About Us Page Responsive Design Changes********/
/*********************************************************/

/*********************************************************************************************************/
/************** THIS PAGE IS CALLED ABOUT US BUT IT IS DOING THE CSS FOR ALL THE CME PAGES **************/
/*******************************************************************************************************/


.LoginSubbackground{
    width: 100% !important;
    }

/* This makes it so the user cannot scroll right and left of the page and gets rid of the overflow */
    html {
        overflow-x: hidden !important;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        }
    body {
    height: 100%;
    overflow-x: hidden !important;
    }
}

/* Sizing areas where the content on the page is responsive. */
@media screen and (min-width:652px){
    .MobileLoginSubbackground{        
        display:none;
    }
}
@media screen and (max-width: 360px){
    .BottomColumns{
        width: 25% !important;
        border-left: none !important;
        border-right: none !important;
        height: auto !important;
    }
    .MobileLoginSubbackground{
       position: relative; right:190px;
        height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    }
        .ReturningUsers{
        padding-bottom: 10px;
    }
    .MedicalRecordsContentDiv{
        width:250px !important;
        padding-right: 50px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:252px !important;
        padding-right: 50px !important;
    }

    .MedicalRecordsContentDiv .form-group .editing-form-label-cell{padding-right:50px; width:150px; text-align: left !important;}
    .MedicalRecordsContentDiv .form-group{display:grid !important; max-width: 200px !important;}
    .logon-remember-me-checkbox{padding-right: 100px !important;}
    .MedicalRecordsContentDiv .Validator-Div{width:200px !important;}
}
@media screen and (min-width: 361px) and (max-width: 401px) {
    .BottomColumns{
        width: 28% !important;
        border-left: none !important;
        border-right: none !important;
    }
    .MobileLoginSubbackground{
        position: relative; right:170px;
        height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    
    }
    .ReturningUsers{
        padding-bottom: 10px;
    }
    .MedicalRecordsContentDiv{
        width:280px !important;
        padding-right: 50px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:282px !important;
        padding-right: 50px !important;
    }

    .MedicalRecordsContentDiv .form-group .editing-form-label-cell{padding-right:50px; width:150px; text-align: left !important;}
    .MedicalRecordsContentDiv .form-group{display:grid !important; max-width: 200px !important;}
    .logon-remember-me-checkbox{padding-right: 100px !important;}
    .MedicalRecordsContentDiv .Validator-Div{width:200px !important;}
}
@media screen and (min-width: 402px) and (max-width: 423px){
    .BottomColumns{
        width:  30% !important;
        border-left: none !important;
        border-right: none !important;
    }
    .MobileLoginSubbackground{
       position: relative; right:145px;
        height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    }
    .ReturningUsers{
        padding-bottom: 10px;
    }
    .MedicalRecordsContentDiv{
        width:300px !important;
        padding-right: 50px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:302px !important;
        padding-right: 50px !important;
    }

    .MedicalRecordsContentDiv .form-group .editing-form-label-cell{padding-right:50px; width:150px; text-align: left !important;}
    .MedicalRecordsContentDiv .form-group{display:grid !important; max-width: 200px !important;}
    .logon-remember-me-checkbox{padding-right: 100px !important;}
    .MedicalRecordsContentDiv .Validator-Div{width:200px !important;}
}
@media screen and (min-width: 424px) and (max-width: 475px){
    .BottomColumns{
        width: 32.5% !important;
        border-left: none !important;
        border-right: none !important;
    }
    .MobileLoginSubbackground{
       position: relative; right:120px;
        height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    }
    .ReturningUsers{
        padding-bottom: 10px;
    }
    .MedicalRecordsContentDiv{
        width:370px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:372px !important;
    }
}
@media screen and (min-width: 476px) and (max-width: 550px){
    .BottomColumns{
        width: 37% !important;
        border-left: none !important;
        border-right: none !important; 
    }  
    .MobileLoginSubbackground{
        position: relative; right:105px;
        height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    }
    .ReturningUsers{
        padding-bottom: 10px;
    }
    .MedicalRecordsContentDiv{
        width:400px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:402px !important;
    }
}
@media screen and (min-width: 551px) and (max-width: 618px){
    .BottomColumns{
        width: 44% !important;
    }
    .MobileLoginSubbackground{
       position: relative; right:50px;
        height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    }
    .ReturningUsers{
        padding-bottom:20px;
    }
    .MedicalRecordsContentDiv{
        width:450px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:452px !important;
    }
}
@media screen and (min-width: 619px) and (max-width: 652px){
    .BottomColumns{
        width: 50% !important;
        word-wrap: break-word;
    }
    .MobileLoginSubbackground{
       position: relative; right:40px;
       height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    }
    .ReturningUsers{
        padding-bottom:20px;
    }

}
@media screen and (max-width: 652px){
    .LoginSubbackground{
        display:none !important;
    }
}
@media screen and (min-width: 653px) and (max-width: 700px){
    .BottomColumns{
        width: 54% !important;
        word-wrap: break-word;
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 195px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 60% !important;
        height: 135px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .ReturningUsers, .NewUsers{
        padding-left:50px;
    }
    .ReturningUsers{
        padding-bottom:20px;
    }

}
@media screen and (min-width: 701px) and (max-width: 734px){
    .BottomColumns{
        width: 56.5% !important;  
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 220px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 60% !important;
        height: 145px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .ReturningUsers, .NewUsers{
        padding-left:100px;
    }
    .ReturningUsers{
        padding-bottom:20px;
    }
 
}
@media screen and (min-width: 735px) and (max-width: 755px){
    .BottomColumns{
        width: 59% !important; 
        word-wrap: break-word;
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 220px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 60% !important;
        height: 145px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .ReturningUsers, .NewUsers{
        padding-left:130px;
    }
    .ReturningUsers{
        padding-bottom:20px;
    }
}
@media screen and (min-width: 756px) and (max-width: 790px){
    .BottomColumns{
        width: 60% !important;    
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 220px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 60% !important;
        height: 145px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .ReturningUsers, .NewUsers{
        padding-left:130px;
    }
    .ReturningUsers{
        padding-bottom:20px;
    }
}
@media screen and (min-width: 791px) and (max-width: 860px){
    .BottomColumns{
        width: 65% !important;
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 245px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 70% !important;
        height: 165px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .ReturningUsers, .NewUsers{
        padding-left:140px;
    }
    .ReturningUsers{
        padding-bottom:20px;
    }
}
@media screen and (min-width: 861px) and (max-width: 920px){
    .BottomColumns{
        width: 70% !important;
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 399px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 73% !important;
        height: 190px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleHeaderWrapNoBlue{
        width: 73% !important;
    }
    .ReturningUsers{
        float:left;
    }
    .NewUsers{
        padding-left:430px;
    }
    .MedicalRecordsContentDiv{
        width:400px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:402px !important;
    }
}
@media screen and (min-width: 921px) and (max-width: 1000px){
    .BottomColumns{
        width: 75% !important;
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 450px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 84% !important;
        height: 190px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .ReturningUsers{
        float:left;
    }
    .NewUsers{
        padding-left:450px;
    }
    .MedicalRecordsContentDiv{
        width:420px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:422px !important;
    }

}
@media screen and (min-width: 1001px) and (max-width: 1050px){
    .BottomColumns{
        width: 80% !important;
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 400px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 90% !important;
        height: 200px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .ReturningUsers{
        float:left;
    }
    .NewUsers{
        padding-left:500px;
    }

}
@media screen and (min-width: 1051px) and (max-width: 1105px){
    .BottomColumns{
        width: 80.5% !important;
    }
    .LoginSubbackground{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 495px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 92% !important;
        height: 200px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleHeaderWrapNoBlue, .zoneMiddleHeaderWrap{
        width: 92% !important;
    }
    .AuthLabel{
        padding-top: 10px;
    }
        .ReturningUsers{
        float:left;
    }
    .NewUsers{
        padding-left:550px;
    }
}
@media screen and (min-width: 1106px) {
    .BottomColumns{
        width: 90%;
    }  

    .ReturningUsers{
        float:left;
    }
    .NewUsers{
        padding-left:600px;
    }
}
@media screen and (min-width: 1000px){
    .MedicalRecordsContentDiv{
        width:450px !important;
    }
    .MedicalRecordsHeadersDiv{
        width:452px !important;
    }
}

/*This is controlling the Returing users and New Users forms*/

.MedicalRecordsContentDiv .logon-password-retrieval-link{
    font-size: 12px !important;
}
.MedicalRecordsContentDiv .Button-Div::after {
  content: "\A""\A";
  white-space: pre;
}
.error-label::before{
    content: "\A""\A";
    white-space: pre;
}
.error-label::after {
  content: "\A""\A";
  white-space: pre;
}
.logon-remember-me-checkbox::after {
  content: "\A""\A";
  white-space: pre;
}
.MedicalRecordsContentDiv .logon-password-retrieval-button{width:150px !important;}
.MedicalRecordsContentDiv .Login-Button{width:100px !important;}
.MedicalRecordsContentDiv .Password-Textbox{width:147px !important;}


/* Created this section to deal with the New users and Returning until it gets to 424px */
@media screen and (min-width: 424px) {
.MedicalRecordsContentDiv .form-group .editing-form-label-cell{text-align: left !important; width:200px;}
.MedicalRecordsContentDiv .password-strength .passw-strength-indicator{max-width: 175px !important;}
.MedicalRecordsContentDiv .form-group .editing-form-value-cell {text-align: left !important; max-width: 200px !important;}
.logon-remember-me-checkbox{padding-left:195px;}
.MedicalRecordsContentDiv .logon-panel #LoginButton{max-width:10px !important;}
.MedicalRecordsContentDiv .Button-Div{margin-left: 200px !important;}
}