*, *::before, *::after { box-sizing: border-box;}

html {
	overflow-y: scroll; 
}

body {
  margin:0;  
  font-family:'JetBrainsMono', sans-serif; 
  font-size: 1rem; 
}

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
@font-face {
  font-family: 'JetBrainsMono';
  src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype'),
       url('../fonts/JetBrainsMono-Regular.woff') format('woff'),
       url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'),
       url('../fonts/JetBrainsMono-Regular.eot') format('embedded-opentype');
  font-weight:400;
  font-style:normal;
 }

img { max-width: 100%; }

.container {display:flex; height:100vh; justify-content:center; align-items:center; padding:0 1em; margin:0; width:50%; }

#arealogin { display:flex; padding:0 2%; justify-content:space-evenly; }
.row {display:flex;}
.col {width:100%;}
.col + .col {margin-left:2em;}
.titlelogin {text-align:center;}
.formbox {display:flex; flex-direction:column; border-right: 1px solid rgba(0,0,0,0.2); justify-content: center; padding:0 2em;}
.subtitle {text-align:center; margin:0 0 2em 0; font-size:1.2em; color:rgba(0,41,68,1); text-transform:uppercase;}
input {
    font-size:0.9rem;
    display:block;
    width:100%;
    height:100%;
    padding:5px 10px;
    background:none;
    background-image:none;
    border:0.3px solid rgba(0,41,68,1);
    color:rgba(0,41,68,1);
    border-radius:0;
    transition:border-color .25s ease, box-shadow .25s ease;
    margin-top:0.5em;
    border-radius:5px;
  }
  input:focus {
    outline:none;
    border: 1.5px solid rgb(0, 97, 160);    
    font-weight:200; 
}

label {font-size:0.9rem;}

.field-wrap {
position:relative;
margin-bottom:1em;  
}

.linkforgot {  
    font-size:0.7em;
    color: rgba(0,41,68,1);
}

.button {
    border:0;
    outline:none;
    border-radius:0;
    padding:10px 0;
    font-size:0.9rem;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.1em;
    background:rgba(0,41,68,1);
    color:white;
    transition:all.5s ease;
    -webkit-appearance: none;
    margin-bottom:1em;
    border-radius:5px;
    cursor: pointer;
}  
.button:hover, .button:focus { background: rgb(0, 97, 160); }
.centra {display:flex; flex-direction: column; height:auto; align-items:center; justify-content:center; width:100%; }
.centra .logologin {padding:0.1em; width:100%; display:flex; justify-content: center; align-items: center;}
.centra .logologin .img_logo {width:auto;}
.brandcw div { color: rgba(0,41,68,1)} 
.poweredby {text-align:center; font-size:0.6rem;}
.infocw {font-size:0.8rem; text-align:center; margin:1em auto;}
.infocw a {color:rgba(0,41,68,1); text-decoration:none;}
.infocw a:hover {text-decoration:underline;} 
.servizicw {font-size:0.9rem; text-align:center;}
.ico_mail, .ico_tel { width:35px;}  

@media (max-width:767px)  {
    #arealogin {padding:50px 0; justify-content: center;}
    .container {width:100%;}
    .row {display:flex; flex-direction: column; }
    .formbox {border-bottom: 1px solid rgba(0,0,0,0.2); border-right:none;}
    .poweredby {margin-top:1em;}
    .col + .col {margin-left:0; margin-top:2em;}
}

@media (min-width:768px) and (max-width:900px) {
    .container {width:80%;}
}