/********************************************************/
/***Medical Records MyChart Page Responsive Design Changes***/
/********************************************************/

@media screen and (min-width: 200px) and (max-width: 1024px){
    body{
        overflow-x: hidden !important;
    }
}
@media screen and (min-width: 200px) and (max-width: 1024px){
    body{
        overflow-x: hidden !important;
    }
}
@media screen and (min-width: 550px) and (max-width: 1024px){
    .zoneMiddleMenuWrap2::before {
        content: "MyChart";
        font-size: 20px;
        font-weight: bold; 
        color: #003b6f; 
        font-family: verdana, geneva, sans-serif;
        position: relative;
        /* top: 2px; */
        margin-top:0px;
        padding-left: .9em;
    } 
}
@media screen and (min-width: 360px) and (max-width: 550px){
    .zoneMiddleMenuWrap2::before {
        content: "MyChart";
        font-size: 20px;
        font-weight: bold; 
        color: #003b6f; 
        font-family: verdana, geneva, sans-serif;
        position: relative;
        margin-top:0px;
        padding-left: .9em;
    } 
}
@media screen and (max-width: 1024px){
    .medrecmidmenu{
        display:none !important;
    }
    .zoneContentWrap2{
        padding-left: 18px !important;
    }
}
@media screen and (min-width: 200px) and (max-width: 475px){
    .zoneMiddleHeaderWrapNoBlue{
        font-size: 10pt !important;
    }
}
@media screen and (min-width: 330px) and (max-width: 400px){
    .MedicalRecordsHeadersDiv{
        width: 294px !important;
    }
    div.BottomColumns.MedicalRecordsContentDiv.flex-items{
        width: 292px !important;
    }
    div.MyChartSignOnDiv.flex-items{
        padding-right: 0px !important;
    }
}
@media screen and (max-width: 364px){
    .threelinebreadcrumb{
        height: 52px !important;
        padding-right: 15px;
        width: 95vw !important;
    }
}
@media screen and (max-width: 394px){
    .threelinebreadcrumblarge{
        height: 52px !important;
        padding-right: 15px;
        width: 95vw !important;
    }
}

@media screen and (max-width: 767px){

    .EditingFormTable input:not([id*="PhoneNumber"])[type=text]{
        width: 40vw !important;
    }
    select{
        width: 52vw !important;
    }
  /*Phones breakpoint*/
  .flex-container{
    margin: inherit !important;
    width: 100vw !important;
  }
  .MedicalRecordsContentDiv{
    border: solid 1px #839fb8 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    -webkit-border-top-left-radius: 0 !important;
    -webkit-border-top-right-radius: 0 !important;
    -webkit-border-bottom-right-radius: 10px !important;
    -webkit-border-bottom-left-radius: 10px !important;
  }
  div.MedicalRecordsZonePhys div, .MedicalRecordsZonePhys {
    padding-left: 0px !important;
    padding-top: 0px !important;
  }
    .flex-container {
        display:flex !important;
        flex-direction: column;
        }
    .flex-items:nth-child(1) {
            order: 1;
            }
        /* MyChart Signon Div */
    .flex-items:nth-child(2) {
        order: 0;
        left: 0px !important;
        width: 348px !important;
        align-self: center !important;
        padding-bottom: 20px !important;
        }
    .flex-items:nth-child(3) {
        order: 2;
        height: auto !important;
        position: inherit !important;

        }
    .flex-items:nth-child(4) {
        order: 3;
        }
    .flex-items:nth-child(5) {
        order: 4;
        }
    .BottomColumns{
        width: 90vw !important;
    }
    .aboutpara span{
        font-size: 4.5vmin !important;
    }
    .zoneMiddleMenuWrap2{
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    } 
    .menuBackGroundLayerThreeJoinLMHS, .aboutlmhssubbackgroundLayer2, .aboutlmhssubbackgroundLayer1, .menuBackGroundLayerMedicalRecords2, .menuBackGroundLayerMedicalRecords{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 27.5vw !important;
    }
    .aboutlmhssubbackgroundLayer2 h2{
        display:none !important;
    }
    .MobileMedRec{
        position: relative;
          height: 47vw;
    }
    .zoneMiddleHeaderWrapNoBlue{
        font-size: 9pt !important;
        padding-left: 1.5em;
        min-width: 0px !important;
        width: 98vw;
    }
    .longbreadcrumb{
        height: 38px !important;
        padding-right: 15px;
    }
    .threelinebreadcrumb{
        height: 38px;
        padding-right: 15px !important;
    }
    .threelinebreadcrumblarge{
        height: 38px;
        padding-right: 15px !important;
    }

}
@media screen and (min-width: 768px) and (max-width: 1024px){
    .flex-container{
        margin: inherit !important;
        width: 100vw !important;
      }
      .MedicalRecordsContentDiv{
        border: solid 1px #839fb8 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 10px !important;
        border-bottom-left-radius: 10px !important;
        -webkit-border-top-left-radius: 0 !important;
        -webkit-border-top-right-radius: 0 !important;
        -webkit-border-bottom-right-radius: 10px !important;
        -webkit-border-bottom-left-radius: 10px !important;
      }
      div.MedicalRecordsZonePhys div, .MedicalRecordsZonePhys {
        padding-left: 0px !important;
        padding-top: 0px !important;
      }
        .flex-container {
            display:flex !important;
            flex-direction: column;
            }
        .flex-items:nth-child(1) {
                order: 1;
                }
            /* MyChart Signon Div */
        .flex-items:nth-child(2) {
            order: 0;
            left: 0px !important;
            width: 348px !important;
            align-self: center !important;
            padding-bottom: 20px !important;
            }
        .flex-items:nth-child(3) {
            order: 2;
            height: auto !important;
            position: inherit !important;
    
            }
        .flex-items:nth-child(4) {
            order: 3;
            }
        .flex-items:nth-child(5) {
            order: 4;
            }
    /* Tablet breakpoint */
    .BottomColumns{
        width: 96vw !important;  
    }
    .aboutpara span{
        font-size: 2.0vmin !important;
    }
    .zoneMiddleMenuWrap2{
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .menuBackGroundLayerThreeJoinLMHS, .aboutlmhssubbackgroundLayer2, .aboutlmhssubbackgroundLayer1,.menuBackGroundLayerMedicalRecords2, .menuBackGroundLayerMedicalRecords{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 27.5vw !important;
    }
    .menuBackGroundLayerThreeJoinLMHS a{
        position: relative; bottom:45px;
        font-size:  13px !important;
    }
    .menuBackGroundLayerThreeJoinLMHS h1{
        position: relative; bottom: 25px;
        font-size:  22px !important;
    }
    .MobileMedRec{
        position: relative;
         height: 47vw;
     }
     .zoneMiddleMenuWrap2::before {
        content: "MyChart";
        font-size: 20px;
        font-weight: bold; 
        color: #003b6f; 
        font-family: verdana, geneva, sans-serif;
        position: relative;
        padding-left: .9em;
    } 
    .zoneMiddleHeaderWrapNoBlue{
        font-size: 9pt !important;
        padding-left: 1.5em;
    }
    .Slogan-Div{
        padding-left: 1.5em !important;
    }
}