@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100;400;700&display=swap');
html, body, p, form, h1, h2, h3, h4, h5, h6, ul, li  {padding:0; margin:0;}
    html,body{
        text-align: center;
        margin: 0;
        font-family: 'Roboto Condensed', sans-serif;
        height:100vh;
        min-height:550px;
        background-repeat: no-repeat;
        background-size:cover;
        background-position:center;
        position:relative;
    }
    .h4,.h5{
        display: none;  
    }
    .wlcm-msg-resp{
        display:none;
    }
    .resp-login{
        display: none;
    }
    .resp-reg{
        display: none;
    }
    a{
        text-decoration:none;
        color:#444444;
    }
    .login-reg-panel{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        text-align:center;
        right:0;left:0;
        margin:auto;
        background-color: #DAE1FF ;
        color:white;
    }
    .white-panel,.white-panel-admin{
        background-color: rgba(255,255, 255, 1);
        position:absolute;
        transition:.3s ease-in-out;
        z-index:0;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.3), 0 6px 0 rgba(0,0,0,0.19);
    }
    .login-reg-panel input[type="radio"]{
        position:relative;
        display:none;
    }
    .login-reg-panel{
        color:#B8B8B8;
    }
    .login-reg-panel #label-login, 
    .login-reg-panel #label-register{
        border:1px solid #9E9E9E;
        display:block;
        text-align:center;
        cursor:pointer;
    }
    .login-info-box{
        left:0;
        position:absolute;
        text-align:left;
        color:black;
    }
    .register-info-box{
        right:0;
        position:absolute;
        text-align:left;
        color:black;
    }
    .right-log{right:50px !important;}
    
    .login-show, 
    .register-show{
        z-index: 1;
        display:none;
        opacity:0;
        transition:0.3s ease-in-out;
        color:#242424;
        text-align:left;
    }
    .show-log-panel{
        display:block;
        opacity:0.9;
        
    }
    .login-show input[type="text"], .login-show input[type="password"], .login-show input[type="email"]{
        width: 100%;
        display: block;
        border: 1px solid #b5b5b5;
        outline: none;
    }
    .login-show input[type="button"], .login-show input[type="submit"] {
        background: #444444;
        color: #f9f9f9;
        border: none;
        text-transform: uppercase;
        border-radius: 2px;
        float:right;
        cursor:pointer;
    }
    .login-show .fpwd{
        display:inline-block;
    }
    
    .register-show input[type="text"], .register-show input[type="password"], .register-show input[type="email"], .register-show select, .register-show input[type="date"], .register-show input[type="phone"]{
        width: 100%;
        display: block;
        border: 1px solid #b5b5b5;
        outline: none;
        background-color: white;
    }
    .register-show input[type="button"], .register-show input[type="submit"] {
        width: 100%;
        background: #444444;
        color: #f9f9f9;
        border: none; 
        text-transform: uppercase;
        border-radius: 2px;
        float:right;
        cursor:pointer;
    }
    a{
        text-decoration:none;
        color:#2c7715;
    }
    .welcome-msg{
        font-size:1.1rem;
    }
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    .login-reg-panel{
        width:70%;
        height:400px;
    }
    .white-panel,.white-panel-admin{
        height:620px;
        top:-120px;
        width:50%;
        right:calc(50% - 50px);
    }
    .white-panel-admin{
        height:570px;
    }
    .login-reg-panel #label-login, 
    .login-reg-panel #label-register{
        padding:5px 5px;
        width:150px;
        border-radius:10px;
        font-weight: 600;
        font-size: 18px;
    }
    .login-info-box{
        width:48%;
        padding:0 50px;
        top:10%;
    }
    .register-info-box{
        width:48%;
        padding-left:70px;
        padding-right: 20px;
        top:10%;
    }
    .login-show, 
    .register-show{
        padding:50px;
    }
    .login-show input[type="text"], .login-show input[type="password"], .login-show input[type="email"]{
        margin:20px 0;
        padding: 10px;
    
    }
    .login-show input[type="button"], .login-show input[type="submit"] {
        max-width: 150px;
        width: 100%;
        padding: 10px;
    }
    .login-show a{
        padding:10px 0;
    }
    .register-show input[type="text"], .register-show input[type="password"], .register-show input[type="email"], .register-show select, .register-show input[type="date"], .register-show input[type="phone"]{
        margin:20px 0;
        padding: 5px;
    }
    .register-show input[type="button"], .register-show input[type="submit"] {
        max-width: 150px;
        padding: 10px;
    }
}
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
    .h3,.h5{
        display: none;
    }
    .h4{
    display: block;
    }
    .login-reg-panel{
        width:80%;
        height:400px;
    }
    .white-panel,.white-panel-admin{
        height:610px;
        top:-70px;
        width:50%;
        right:calc(50% - 50px);
    }
    .white-panel-admin{
        height:525px;
    }
    .login-reg-panel #label-login, 
    .login-reg-panel #label-register{
        padding:5px 5px;
        width:150px;
        border-radius:10px;
        font-weight: 600;
        font-size: 18px;
    }
    .login-info-box{
        width:50%;
        padding:0 50px;
        top:10%;
    }
    .register-info-box{
        width:48%;
        padding-left:70px;
        padding-right: 20px;
        top:10%;
    }
    .login-show, 
    .register-show{
        padding:40px;
    }
    .login-show input[type="text"],.login-show input[type="email"], .login-show input[type="password"]{
        margin:20px 0;
        padding: 10px;
    
    }
    .login-show input[type="button"], .login-show input[type="submit"] {
        max-width: 150px;
        width: 100%;
        padding: 10px;
    }
    .login-show a{
        padding:10px 0;
    }
    .register-show input[type="text"],.register-show input[type="email"], .register-show input[type="password"], .register-show select, .register-show input[type="date"], .register-show input[type="phone"]{
        margin:20px 0;
        padding: 5px;
      
    }
    .register-show input[type="button"], .register-show input[type="submit"] {
        max-width: 150px;
        padding: 10px;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
    .h3,.h5{
        display: none;
    }
    .h4{
    display: block;
    }
    .login-reg-panel{
        width:90%;
        height:400px;
    }
    .white-panel,.white-panel-admin{
        height:610px;
        top:-70px;
        width:50%;
        right:calc(50% - 50px);
    }
    .white-panel-admin{
        height:510px;
    }
    .login-reg-panel #label-login, 
    .login-reg-panel #label-register{
        padding:5px 5px;
        width:150px;
        border-radius:10px;
        font-weight: 600;
        font-size: 18px;
    }
    .login-info-box{
        width:48%;
        padding:0 50px;
        top:10%;
    }
    .register-info-box{
        width:48%;
        padding-left:70px;
        padding-right: 20px;
        top:10%;
    }
    .login-show, 
    .register-show{
        padding:40px;
    }
    .login-show input[type="text"],.login-show input[type="email"], .login-show input[type="password"]{
        margin:20px 0;
        padding: 10px;
    
    }
    .login-show input[type="button"], .login-show input[type="submit"] {
        max-width: 150px;
        width: 100%;
        padding: 10px;
    }
    .login-show a{
        padding:10px 0;
    }
    .register-show input[type="text"],.register-show input[type="email"], .register-show input[type="password"], .register-show select, .register-show input[type="date"], .register-show input[type="phone"]{
        margin:20px 0;
        padding: 5px;
        backcolor: white;
    }
    .register-show input[type="button"], .register-show input[type="submit"] {
        max-width: 150px;
        padding: 10px;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 381px) and (max-width: 767px) {
    .h3,.h5{
        display: none;
    }
    .h4{
    display: block;
    }
    .wlcm-msg-resp{
        display:block;
    }
    .resp-login{
        display: block;
    }
    .resp-reg{
        display: block;
    }
    .login-reg-panel{
        width:100%;
        height:300px;
    }
    .white-panel,.white-panel-admin{
        height:640px;
        top:-120px;
        width:80%;
    }
    .white-panel-admin{
        height:480px;
    }
    .login-reg-panel #label-login, 
    .login-reg-panel #label-register{
        padding:5px 5px;
        width:150px;
        border-radius:10px;
        font-weight: 600;
        font-size: 18px;
    }
    .login-info-box{
        display:none;
    }
    .register-info-box{
       display:none;
    }
    .login-show, 
    .register-show{
        padding:50px;
    }
    .login-show input[type="text"],.login-show input[type="email"], .login-show input[type="password"]{
        margin:20px 0;
        padding: 10px;
    
    }
    .login-show input[type="button"], .login-show input[type="submit"] {
        max-width: 120px;
        width: 100%;
        padding: 10px;
    }
    .login-show a{
        padding:10px 0;
    }
    .register-show input[type="text"],.register-show input[type="email"], .register-show input[type="password"], .register-show select, .register-show input[type="date"], .register-show input[type="phone"]{
        margin:20px 0;
        padding: 5px;
    }
    .register-show input[type="button"], .register-show input[type="submit"] {
        max-width: 120px;
        padding: 10px;
    } 

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 380px) {
    .h3,.h4{
        display: none;
    }
    
    .h5{
    display: block;
    }
    .wlcm-msg-resp{
        display:block;
    }
    .right-log{
        right:30px !important;
    }
    .resp-login{
        display: block;
    }
    .resp-reg{
        display: block;
    }
    .login-reg-panel{
        width:100%;
        height:300px;
    }
    .white-panel,.white-panel-admin{
        height:620px;
        top:-130px;
        width:80%;
    }
    .white-panel-admin{
        height:410px;
    }
    .login-reg-panel #label-login, 
    .login-reg-panel #label-register{
        padding:5px 5px;
        width:150px;
        border-radius:10px;
        font-weight: 600;
        font-size: 18px;
    }
    .login-info-box{
        display:none;
    }
    .register-info-box{
       display:none;
    }
    .login-show, 
    .register-show{
        padding:20px;
    }
    .login-show input[type="text"],.login-show input[type="email"], .login-show input[type="password"]{
        margin:20px 0;
        padding: 10px;
    
    }
    .login-show input[type="button"], .login-show input[type="submit"] {
        max-width: 150px;
        width: 100%;
        padding: 10px;
    }
    .login-show a{
        padding:10px 0;
    }
    .register-show a{
        padding:0 10px;
    }
    .register-show input[type="text"],.register-show input[type="email"], .register-show input[type="password"], .register-show select, .register-show input[type="date"], .register-show input[type="phone"]{
        margin:20px 0;
        padding: 5px;
    }
    .register-show input[type="button"], .register-show input[type="submit"] {
        max-width: 100px;
        padding: 10px;
    } 


}

/*-------Start test-------*/
#container{
    display: block;
    margin-top: 30px;
    margin: auto;
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.3), 0 6px 0 rgba(0,0,0,0.19);
    width:50%;
    background-color: rgb(255, 255, 255);
    height: 90%;
    padding: 15px;
}


.navbar-light .navbar-nav .nav-link {
    color: rgb(6, 82, 168);
  
}

.navbar-toggler{
    font-size: 0.8rem;

}


@media (min-width: 571px) {
.img-responsive {
        max-width: 60%;
        height: auto;
}
   
    .navbar-toggler{
        position: fixed;
        top:1em;
        right: 1em;
        display: inline;
        font-size: 0.9rem;
    }
}
@media (max-width: 570px) {
    .img-responsive {
            content:url("images/fat_logo.png");
            width:200px;
            height: 100px;
           
         
    }
    .navbar-toggler{
        position: fixed;
        top:1em;
        right: 1em;
        display: inline;
        font-size: 0.8rem;
    }
}