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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html
{
    height: 100%;
    
}

body
{
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #212529;
	width: 100%;
	display: flex;
	padding: 15px;
	background: rgba(40, 57, 101, .9);
	flex-direction: column;
	justify-content: center;
	align-content: center;
}

.fundo
{
    width: 100%;
    margin: 0 auto;
}

.background
{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #9053c7;
    background: rgba(40, 57, 101, .9);
}


@font-face {
  font-family: Password;
  src: url(../Fonts/password.ttf)
}

@font-face {
  font-family: Poppins;
  src: url(../Fonts/Poppins-Light.ttf)
}

.container {
  width: 1500px;
  margin: 0 auto;
  display: block;
}

@media screen and (min-width: 320px) {
  .container {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .container {
    width: 100%;
  }
}

@media screen and (min-width: 992px) {
  .container {
    width: 960px;
  }
}

@media screen and (min-width: 1000px) {
  .container {
    width: 1100px;
  }
}

@media screen and (min-width: 1500px) {
  .container {
    width: 1500px;
  }
}

.container .row {
  display: flex;
  flex-direction: row;
}

@media screen and (min-width: 320px) {
  .container .row {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .container .row {
    flex-direction: row;
  }
}

@media screen and (min-width: 992px) {
  .container .row {
    flex-direction: row;
  }
}

@media screen and (min-width: 1000px) {
  .container .row {
    flex-direction: row;
  }
}

@media screen and (min-width: 1500px) {
  .container .row {
    flex-direction: row;
  }
}

.container .row .coluna {
  flex: 1;
}

@media screen and (min-width: 320px) {
  .container .row .coluna {
    flex: 1;
  }
}

@media screen and (min-width: 768px) {
  .container .row .coluna {
    flex: 1;
  }
}

@media screen and (min-width: 992px) {
  .container .row .coluna {
    flex: 1;
  }
}

@media screen and (min-width: 1000px) {
  .container .row .coluna {
    flex: 1;
  }
}

@media screen and (min-width: 1500px) {
  .container .row .coluna {
    flex: 1;
  }
}

/*/////////////////////////////////////////////////////
ALERT RICH:MESSAGES ANIMATION*/
 @keyframes animacao {
  0% {
    right: -650px;
  }
  10% {
    right: 650px;
  }
  30% {
    right: 650px;
  }
  50% {
    right: 650px;
  }
  65% {
    right: 650px;
  }
  100% {
    right: -650px;
  }
}

.notificacao {
	position: fixed;
	top: 20px;
	right: -650px;
	z-index: 999999;
	padding: 20px;
}
	
/*SOMENTE NAS PAGINAS:LOGIN, ALTERAR SENHA E RECUPERAR SENHA E NOVA SENHA*/
.notificacao .msgWarmAnimated {
	background-color:  green!important;
	font-family: Poppins!important;
	font-size: 20px!important;
	color: #fff!important;
	padding: 20px!important;
	position: relative!important;
	animation-name: animacao!important;
	animation-duration: 5s!important;
}

.notificacao .msgErrorAnimated {
	background-color:  red!important;
	font-family: Poppins!important;
	font-size: 15px!important;
	color: #fff!important;
	padding: 20px!important;
	position: relative!important;
	animation-name: animacao!important;
	animation-duration: 5s!important;
	border-radius: 20px;
	border: 1px solid #1161ee;
}

.notificacao .msgInfoAnimated {
	background-color:  #87ceeb!important;
	font-family: Poppins!important;
	font-size: 15px!important;
	color: #fff!important;
	padding: 20px!important;
	position: relative!important;
	animation-name: animacao!important;
	animation-duration: 5s!important;
	border-radius: 20px;
	border: 1px solid #1161ee;
}


.notificacao .success {
	background-color: #59b259;
	font-family:Poppins!important;
	font-size: 15px;
	color: #fff;
	padding: 20px;
	position: relative;
	animation-name: animacao;
	animation-duration: 5s;
	display: none;
	border-radius: 20px;
	border: 1px solid #1161ee;
}
.notificacao .error {
	background-color: #f74b4d;
	font-family: Poppins!important;
	font-size: 15px;
	color: #fff;
	padding: 20px;
	position: relative;
	animation-name: animacao;
	animation-duration: 5s;
	display: none;
	border-radius: 20px;
	border: 1px solid #1161ee;
}
/*/////////////////////////////////////////////////////
FIM ALERT RICH:MESSAGES ANIMATION*/


/*/////////////////////////////////////////////////////
TEXTO*/

.poppins
{
	font-family:"Poppins", sans-serif!important;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*/////////////////////////////////////////////////////
TEXTO*/


.login-camada {
	width: 100%;
    margin: auto;
    max-width: 480px;
    min-height: 598px;
    position: relative;
    border-radius: 40px;
    background-size: 50rem !important;
    background: url("../images/fundo.jpeg") no-repeat center;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
}

.login-box {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 40px;
    padding: 0px 50px;
	background: linear-gradient(-135deg, rgba(135, 206, 255, 0.8), rgba(255, 255, 255, 1.5));
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 40px 0
}

.content-box {
	display: flex;
	flex-direction: column;
    margin: 0 auto;
}
    
.password{
	font-family: Password!important;
	letter-spacing: 5px;
}
    
.olho {
    cursor: pointer;
    top: -22px;
    left: 21rem;
    position: relative;
    margin: -18px 0;
    height: 26px;
}

.hr {
    height: 1px;
    background: #283965E6;
    
    width: 198px;
    margin: 12px auto 5px;
}

.content-box {
	display: flex;
	flex-direction: column;
}

.input-group {
 	margin: 30px 0;
}

	
.position-olho 
{
	 border: solid 1.5px #283965E6 !important;
	 border-radius: 1rem !important;
	 background: none !important;
	 padding: 1rem !important;
	 font-size: 1rem !important;
	 color: #283965E6 !important;
	 transition: border 150ms cubic-bezier(0.4,0,0.2,1) !important;
	 width: 100%;
	 font-family: Password!important;
	 letter-spacing: 5px;
}
			
.position-olhof
{
	 border: solid 1.5px #283965E6 !important;
	 border-radius: 1rem !important;
	 background: none !important;
	 padding: 1rem !important;
	 font-size: 1rem !important;
	 color: #283965E6 !important;
	 transition: border 150ms cubic-bezier(0.4,0,0.2,1) !important;
	 width: 100%;
	 letter-spacing: 5px;
}

.text 
{
	 border: solid 1.5px #283965E6 !important;
	 border-radius: 1rem !important;
	 background: none !important;
	 padding: 1rem !important;
	 font-size: 1rem !important;
	 color: #283965E6 !important;
	 transition: border 150ms cubic-bezier(0.4,0,0.2,1) !important;
	 width: 100%;
}

.user-label 
	{
	 position: absolute;
	 left: 15px;
	 color: #283965E6;
	 pointer-events: none;
	 transform: translateY(1rem);
	 transition: 150ms cubic-bezier(0.4,0,0.2,1);
	}
 
 .button
 {
    text-transform: uppercase;
    width: 240px;
    color: #fff !important;
    display: block;
    border: none;
    padding: 15px 20px;
    border-radius: 25px;
    background: rgba(40, 57, 101, .9) !important;
    margin: 30px 0 0 0;
    transition: all 0.5s ease;
    font-size: 14px !important;
    margin: 0 auto !important;
    font-size: 12px !important;
 }
	 
 .button:hover{
    background: linear-gradient(-135deg, rgba(135, 206, 255, 0.8), rgba(135, 206, 235, 1.5)) !important;
    color: #283965E6 !important;
    font-family: Poppins !important;
    font-weight: 900 !important;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
    margin: 0 auto !important;
    width: 240px;
    font-size: 12px !important;
}

		
		        
		.color-text
		{
			color: #283965E6;
		}
        
        .rich-mpnl-button
        {
        	display:none;
        }
        
       .rich-mpnl-mask-div 
       {
       		background-color: transparent !important; 
       		position: unset!important;
   		}
       .rich-mpnl-resizer
       {
       	display: none!important;
       }
       
       .rich-mpnl-body
       {
       	font-size:16px!important;
    	padding: 10px 4px!important;
       }
       
       @-moz-document url-prefix() 
       {
	        .rich-mpnl-body 
	        {
	           font-size:16px!important;
	    		padding: 0px 4px!important;
	        }
       }
       
       input:focus-visible {
		    outline-offset: -36px!important;
		}
		
		.group 
		{ 
		  position:relative; 
		  margin-bottom:30px; 
		}
		input 				
		{
		  font-size:18px!important;
		  padding:10px 10px 10px 5px!important;
		  display:block!important;
		  border:none!important;
		}
		
		input:focus { outline:none; }

		label 				 
		{
			font-family:"Poppins", sans-serif!important;
			color:#283965E6; 
			font-size:18px;
			font-weight:normal;
			position:absolute;
			pointer-events:none;
			left:12px;
			top:12px;
			transition:0.2s ease all; 
			-moz-transition:0.2s ease all; 
			-webkit-transition:0.2s ease all;
		}

		input:focus ~ label, input:valid ~ label 		
		{
		  top:-20px;
		  font-size:14px;
		  color:#5264AE;
		}
		
		.in-box
		{
			border: solid 1.5px #283965E6 !important; 
			border-radius: 0.9rem !important;  
			background: rgba(255, 255, 255, .4) !important; 
			width:100%;
		}
/*//////////////////////////////////////////////////////////////////
[ Final ]*/