@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 

:root{
    --verd:#88c417;
    --vermelho:#ed1846;
    --azul:#1d2951;
    --azulhover:#02205f;
    --laranja1:#f5cf48;
    --laranja:#f4cf40;
    --branco:#FFFFFF;
}
body,html{
  !font-family: Roboto,sans-serif;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding:0;
  margin:0;
  background:skyblue;
  !color:#696969;
}
.container{
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:row;
  flex-flow:wrap;
  align-items:center;
  justify-content:space-around;
  background:skyblue;
  padding:0px;
  margin:0px;
}
.flogin{
	background:white;
	height:auto;
	width:30%;
	text-align:center;
	padding:10px;
	border-radius: 3px;
}
.flogin h3{
	margin-top:30px;
	margin-bottom:30px;
	font-weight:400;
	!color:#696969;
}
.flogin form input{
	padding:10px;
	margin-bottom:10px;
	width:85%;
	border-radius:3px;
	background-color:transparent;
    border: 1px solid skyblue;
	outline:none;
}
.flogin form input::placeholder{
    color:#C0C0C0;
	font-size:12px;
}

.flogin form label{
	display:flex;
	margin-left:4%;
	text-align:left;
	padding:5px 10px 5px 0px;
	background:transparent;
	align-items:left;
	margin-bottom:5px;
	font-size:12px;
	font-weight:300;
	color:black;
}
.flogin form input:focus{
    outline:none;
    border: 1px solid #fb8500;
    font-size:18px;
  
}
.flogin form input[type="submit"]{
	width:93%;
	border:none;
	background:#219ebc;
    font-weight:bold;
	color:white;
	margin:auto;
	margin-top:15px;
    margin-bottom:30px;
	transition: all .3s ease-in-out;
}
.flogin form input[type="submit"]:hover{
	background:#2565AE;
	color:white;
	transition: all .3s ease-in-out;
}
.msg{
	  width:86%;
	  height: auto;
	  border-radius:4px; 
      margin:auto;
	  margin-bottom:10px;
	  padding:10px;
	  background:#fb8500; 
      color:var(--branco);
	  font-weight:bold;
	  font-size:12px;
	  text-align:center;
	  text-transform:lowercase;
	  transition:all 0.5s ease;
}
..msg_de_erro1{
      user-select: none;
	  width: 100%;
	  height: 35px;
	  border-radius: 4px; 
      margin-bottom: 15px ;
	  transition: all 0.5s ease;
	  padding: 5px;
	  background: #fff3d4;
	  border: 1px solid #f6b73c;
	  color: #000050;
	  font-size: 20px;
	  text-align: center;
	  display: none;
	  text-transform: lowercase;
	  transition: all 0.5s ease;
}

/* MEDIA QUERY*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.container{
  background:var(--branco); 
 }
.flogin{
	width:100%;
	border-radius: 3px;
	
}	
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}