@font-face {
            font-family: 'Oxygen';
            src: url('2sDfZG1Wl4LcnbuKjk0m.woff2') format('woff2');
            font-display: swap;
        }
        .login-reg-panel{
            color:#B8B8B8;
        }
        .login-show, 
        .register-show{
            z-index: 1;
            display:none;
            opacity:0;
            transition:0.3s ease-in-out;
            color:#242424;
            text-align:left;
            padding:50px;
        }
        .show-log-panel{
            display:block;
            opacity:0.9;
        }
        .login-show input[type="text"],                
        .login-show input[type="password"]{
            width: 100%;
            display: block;
            margin:20px 0;
            padding: 10px;
            border: 1px solid #b5b5b5;
            outline: none;            
        }
        .inputs {
            width: 100%;
            display: block;
            margin:20px 0;
            padding: 10px;
            border: 1px solid #b5b5b5;
            outline: none;
            font-size:20px;        
        }
        .login-show input[type="button"] {
            max-width: 150px;
            width: 100%;
            background: #006ebf;
            color: #f9f9f9;
            border: none;
            padding: 10px;
            text-transform: uppercase;
            border-radius: 2px;
            float:right;
            cursor:pointer;
            text-align:center;
        }
        .login-show a{
            display:inline-block;
            padding:10px 0;
            font-size:18px;                   
        }
        a{
            text-decoration:none;
            color:#0731d1;
            font-size:20px;
            font-weight: 300; 
        }



.button_form {
    max-width: 100%;
    width: 100%;
    background: #0946c3;
    color: #f9f9f9;
    border: none;
    padding: 10px;
    text-transform: uppercase;
    float: right;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    outline: none;
}
        .button_form:disabled {
                    opacity: .5;
                    cursor:default;
        }
        .button_form:active {
                    outline: none;                      
        }
        .PasswordReset-reg-panel{
            transform: translateY(-50%);
	        text-align:center;
	        right:0;
            left:0;

            position: relative;
            top: 30%;
            width:70%;                        
            margin:auto;
            margin-top:150px;
            height:800px;
            background-color:#FFF; 
            /*background-image:url('Images/LOGO.png');*/
            background-size:30%;
            background-repeat:no-repeat;
            background-position-x:95%;
            background-position-y:center;
            opacity:.95;
        }
        .textbox_form {
                    width: 100%;
                    display: block;
                    margin:10px 0;
                    padding: 10px;
                    border: 1px solid #b5b5b5;
                    outline: none;
                    font-size:20px;
                    font-weight: 300; 
        }
        .numeric_textbox_form {
            width: 100%;
            display: block;
            margin:20px 0;
            padding: 10px;
            border: 1px solid #b5b5b5;
            outline: none;
            font-size:20px;
        }
        .login-reg-panel {
            margin-top: 1%;
            position: relative;
            margin-left: 10%;
            top:-70px;
            transform: translateY(-50%);
            text-align: center;
            width: 70%;
            right: 0;
            left: 0;
            height: 500px;
            background-color: #FFF;         
            background-size: 30%;
            background-repeat: no-repeat;
            background-position-x: 95%;
            background-position-y: center;
            opacity: .95;
        }
        #image {           
            position: relative;
            margin-left: 60%;
            transform: translateY(-50%);
            text-align: center;
            width: 70%;
            height:100%;          
            background-color: transparent;         
            background-repeat: no-repeat;
            top:40%;
        }
        .white-panel{
            background-color: rgba(255,255, 255, 1);
            height:450px;
            position:absolute;
            top:0px;
            width:50%;
            right:calc(50% - 50px);
            transition:.3s ease-in-out;
            z-index:0;
            box-shadow: 0 0 25px 1px #9E9E9E;
        }
        body{
	        height:100vh;
	        min-height:550px;	        
	        background-repeat: no-repeat;
	        background-size:cover;
	        background-position:center;
	        position:relative;
            overflow-y: hidden;
        }
footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    background-color: #004882;
}
        .FooterWrapper {
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }
        #FooterDiv {
            margin-top: 10px;
            margin-bottom: 10px;
            color: #FFF;
            font-size: 14px;
            text-align: center;
        }


@media (max-width : 1450px) {
    :root {
        --font_factor: 3px;
        --padding: 5px;        
        --porcent: 15%;
        --height: 100px;
    }

        .login-show, 
        .register-show{
            padding:calc(50px - var(--padding));
        }
        .login-show input[type="text"],                
        .login-show input[type="password"]{
            margin:calc(20px - var(--padding)) 0;
            padding: calc(10px - var(--padding));
        }
        .inputs {
            margin:calc(20px - var(--padding)) 0;
            padding: calc(10px - var(--padding));            
            font-size: calc(20px - var(--font_factor));        
        }
        .login-show input[type="button"] {
            max-width: 150px;                        
            padding: calc(10px - var(--padding));
        }
        .login-show a{
            padding:calc(10px - var(--padding)) 0;
            font-size: calc(20px - var(--font_factor));        
        }
        a{
            font-size: calc(20px - var(--font_factor));        
        }

        .button_form {
            padding: calc(10px - var(--padding));
            font-size: calc(15px - var(--font_factor)); 
        }
        .textbox_form {
            margin: calc(10px - var(--padding)) 0;
            padding:  calc(10px - var(--padding));                    
            font-size:calc(20px - var(--font_factor));                    
        }
        .numeric_textbox_form {
            margin: calc(10px - var(--padding)) 0;
            padding:  calc(10px - var(--padding));
            font-size:calc(20px - var(--font_factor));
        }
        .login-reg-panel {
            height: calc(500px - var(--height));
        }
        #image {                       
            top:50%;
        }
        .white-panel{            
            height:calc(450px - var(--height));           
            top:0px;
            width:50%;
            right:calc(50% - 50px);                        
        }
        #FooterDiv {
            margin-top: calc(10px - var(--padding));
            margin-bottom: calc(10px - var(--padding));            
            font-size: calc(14px - var(--font_factor));            
        }

}       

@media (max-width:992px) {
    .white-panel {
        height: 500px;        
        width: 100%;
        right: 50px;  
    }
    .login-reg-panel {
        margin-left: 15%;
        width: 80%;
        height: 500px;
    }
    #login_info {
        display: none;
    }
    .image_login {
        display:none;
    }
}

@media (max-width:768px) {

    .white-panel {        
        height: 500px;                
        width: 100%;
        right: 30px; 
    }

    .login-reg-panel {
        margin-left: 12%;
        width: 85%;
        height: 500px;
    }
    #login_info {
        display:none;
    }

}

@media (max-width:480px) {
    .white-panel {        
        height: 500px;                
        width: 100%;
        right: 10px; 
    }

    .login-reg-panel {
        margin-left: 10%;
        width: 90%;
        height: 500px;
    }
    #login_info {
        display: none;
    }

}