body{overflow: hidden}
        .login_page_header{color:#fff;text-align: center;position: relative;top: 40px}
        .login_page_title{color: #fff;font-size: 28px;font-family: "Open Sans",sans-serif;font-weight: 100;}
        .login_page_moto{font-size: 12px;position: relative;bottom: 5px}
        .time_zone_main{position: relative;top: 205px}
        .time_zone{color: #fff;text-align: center;}
        .tm_icons{font-size:38px;color:#fff;}
        hr{border-top: 1px solid #dae0e53b;width: 100%;position: relative;top: 230px;}
        .carousel_container{position: relative;top: 225px;width: 100%;height: 100%;}
        .container{width:300px;margin-top: 150px}
        article{color: #fff;text-align: center}
        .margin_left{margin-left: 8px !important}
        
        
        #login_container{width: 40%;margin: 20% 25%;background: #ffffffe6;border: none}
        #Reset_container{width: 40%;margin: 22% 25%;background: #ffffffe6;border: none}
        #btnLogin,#reset_button{width:100%;}
        #forgot_password{float: right;position: relative;top:20px}
        .card-body{padding: 40px}
        input { font-family: 'FontAwesome'; } /* This is for the placeholder */
        #back_to_button{position: relative;left: 260px;bottom: 20px;font-size: 14px;text-decoration: none}
        #note{position: relative;top:19px;color: #28a745;}
        .margin-top{margin-top:25px}
        .header_top{font-family: sans-serif;font-size: 24px;font-weight: bold;margin-left: 20px;color: #545b62}
        .login_textbox{border-bottom: 1px solid #ddd !important;border: none ; box-shadow: none !important;font-size: 18px !important;height: 40px !important}
        #hexaware_logo{background-color: #495057; width: 10%;position: absolute;left: 40%;top: 20%;z-index: 1;}
        .sidebar{width: 350px;max-width: 350px;min-width: 350px;}
        .aside{text-align: center;display: flex;justify-content: space-around;flex-direction: column;padding: 30px 45px;height: 100%}
        .footer{color: #777;text-align: center;position: absolute;left: 820px !important;font-size: 12px;bottom: 0px;}
        #exit_logo{max-width: 250px;width: 250px;position: relative;top: 90px;left: 10px;opacity: 0.7}
       

/*For Multiple Screens*/

@media only screen 
          and (min-device-height: 1050px) 
          and (max-device-width: 1400px) 
    and (-webkit-min-device-pixel-ratio: 1) {
      
           #exit_logo {
                    max-width: 250px !important;
                    width: 250px !important;    
                    position: relative !important; 
                    top: 45px !important; 
                    }
              
              .carousel_container {
                position: relative !important;    
                top: 205px !important;    
              }
              
              hr {
                position: relative !important;   
                top: 215px !important;   
            }
              
           .time_zone_main {
            position: relative !important;   
            top: 195px !important;   
          }
        
        .footer {
            position: absolute;
            left: 590px !important;
        }
}



@media only screen 
          and (min-device-width: 900px) 
          and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) {
        
      #exit_logo {
    max-width: 200px;
    width: 250px;
    position: relative;
    top: 50px;
    left: 10px;
    opacity: 0.7;
}
        
        .time_zone_main {
            position: relative;
            top: 150px;
        }
        
        hr {
            border-top: 1px solid #dae0e53b;
            width: 100%;
            position: relative;
            top: 160px;
        }
        
        .carousel_container {
            position: relative;
            top: 145px;
            width: 100%;
            height: 100%;
}
        
 .footer {
    color: #777;
    text-align: center;
    position: absolute;
    left: 680px !important;
    font-size: 12px;
    bottom: 0px;
}
        
         .aside {padding: 0px 45px }
        
}


@media only screen 
          and (min-device-height: 960px) 
          and (max-device-width: 1280px) 
          and (-webkit-min-device-pixel-ratio: 1) {
             
        
                    #exit_logo {
                    max-width: 250px !important;
                    width: 250px !important;    
                    position: relative !important; 
                    top: 45px !important; 
                    }
              
              .carousel_container {
                position: relative !important;    
                top: 165px !important;    
              }
              
              hr {
                position: relative !important;   
                top: 180px !important;   
            }
              
           .time_zone_main {
            position: relative !important;   
            top: 165px !important;   
          }   
        .aside {padding: 40px 45px }         
}

@media only screen 
          and (min-device-height: 1024px) 
          and (max-device-width: 1280px) 
          and (-webkit-min-device-pixel-ratio: 1) {
             
        
                    #exit_logo {
                    max-width: 250px !important;
                    width: 250px !important;    
                    position: relative !important; 
                    top: 45px !important; 
                    }
              
              .carousel_container {
                position: relative !important;    
                top: 205px !important;    
              }
              
              hr {
                position: relative !important;   
                top: 215px !important;   
            }
              
           .time_zone_main {
            position: relative !important;   
            top: 195px !important;   
          }  
              
       .aside {padding: 40px 45px }       
                
}


@media only screen 
          and (min-device-height: 720px) 
          and (max-device-width: 1280px) 
          and (-webkit-min-device-pixel-ratio: 1) {
             
             .login_page_title{
                     position: relative;
                    bottom: 25px;
             }
             
             .login_page_moto {
                font-size: 12px;
                position: relative;
                bottom: 25px;
                 
             }
                    #exit_logo {
                    max-width: 180px;    
                    position: relative ;
                    top:15px ;
                }

             .time_zone_main {
                position: relative ;
                top: 90px ;   
             }
             
             hr {
                position: relative;
                top: 80px;
                 
             }
             
             .carousel_container {
                position: relative;
                 top: 35px;
             }
             
             .footer {
                position: absolute;
                left: 550px !important;
             }
              
          .aside {padding: 0px 45px }
}

@media only screen 
          and (min-device-height: 768px) 
          and (max-device-width: 1280px) 
          and (-webkit-min-device-pixel-ratio: 1) {
             
             .login_page_title{
                     position: relative;
                    bottom: 25px;
             }
             
             .login_page_moto {
                font-size: 12px;
                position: relative;
                bottom: 25px;
                 
             }
                    #exit_logo {
                    max-width: 180px;    
                    position: relative ;
                    top:15px ;
                }

             .time_zone_main {
                position: relative ;
                top: 100px ;   
             }
             
             hr {
                position: relative;
                top: 95px;
                 
             }
             
             .carousel_container {
                position: relative;
                 top: 55px;
             }
             
             .footer {
                position: absolute;
                left: 550px !important;
             }
              
          .aside {padding: 7px 45px }
}





@media only screen 
          and (min-device-width: 1281px) 
          and (max-device-width: 1366px) 
    and (-webkit-min-device-pixel-ratio: 1) {
        
        .login_page_header {
            position: relative;
            top: 20px;
        }
       #exit_logo {
            max-width: 160px;
            width: 160px;
            position: relative;
            top: 50px;
        } 
        
 .time_zone_main {
    position: relative;
    top: 115px;
}
        
 hr {
    position: relative;
    top: 115px;
} 
        
.carousel_container {
    position: relative;
    top: 85px;        
        
}
        
.aside {
    padding: 0px 45px ;        
}
        
.footer {
    position: absolute;
    left: 570px !important;        
        }
}




 /* Mobile Portrait and Landscape */
        @media(max-width: 458px) {
         aside{display: none !important}  
         .footer{left: 0px !important}   
         #back_to_button{left: 112px}   
        .login_textbox{font-size: 14px important}    
        #hexaware_logo{width: 30%;position: absolute;left: 35%;top: 10%;z-index: 1;}    
        .login_main_container{margin-top:300px}    
        #login_container,#Reset_container{width: 100%;margin:0%;position: relative;bottom: 150px;}
        #note{font-size: 12px}
        }

        
 /* IPAD Portrait and Landscape */
        @media only screen 
          and (min-device-width: 768px) 
          and (max-device-width: 1024px) 
          and (-webkit-min-device-pixel-ratio: 1) {
              
                #hexaware_logo {
                    background-color: #495057 !important;
                    width: 45% !important;
                    position: absolute !important;
                    left: 25% !important;
                    top: 13% !important;
                    z-index: 1 !important;
                }

                #login_container {
                    width: 100% !important;
                    margin: 70% 0% !important;
                    background: #ffffffe6 !important;
                    border: none !important;
                }

                .footer {
                    color: #777;
                    text-align: center !important;
                    position: absolute !important;
                    left: 400px !important;
                    font-size: 12px !important;
                    bottom: 0px !important;
                }



        }