/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border:0;
}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

body {font-family: Arial, Helvetica, sans-serif;}


body{
	background-color:#ffffff;
}
#conteiner{
	float:left;
	width:85%;
	height:auto;
	padding:0 5% 5% 10%;
}
	#central_conteiner{
		float:left;
		width:65%;
		height:auto;
		/*background-color:#CCC;*/
	}
		#central_conteiner p{
			font-family: 'Blinker', serif;
			font-size:20px;
			line-height:35px;
			color:#000;
		}
		
		#central_conteiner h1{
			font-family: 'Blinker', serif;
			font-size:35px;
			line-height:45px;
			margin-left:40px;
			color:#041E42;
		}
		#central_conteiner h3{
			font-family: 'Blinker', serif;
			font-size:25px;
			line-height:45px;
			margin-left:40px;
			color:#041E42;
		}
		#titulo{
			float:left;
			width:97%;
			height:auto;
			font-family: 'Blinker', serif;
			font-size:30px;
			line-height:30px;
			background-color:#041E42;
			color:#FFF;
			padding:1%;
			margin:0 0 4% 1%;
		}

#links{
	width:100%;
	height:auto;
	align-items: center;
	vertical-align: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	border-bottom: solid 1px #999999;
	margin:2% 1%;
}		

		.link{
			text-decoration:none;
			font-family: 'Blinker', serif;
			font-size: 16px;
		}
		.new_acount, .recover_password{
			text-decoration:none;
			font-family: 'Blinker', serif;
			font-size:15px;
			line-height:20px;
			color:#03F;
			font-weight:bold;
			margin:0 auto 0 auto;
			padding:1%;
			opacity:1.0;
		}
		.insert_cod	{
			text-decoration:none;
			font-family: 'Blinker', serif;
			font-size:15px;
			line-height:20px;
			color:#cf0b3f;
			font-weight:bold;
			margin:0 auto 0 auto;
			padding:1%;
			opacity:1.0;
		}
		.new_acount:hover, .recover_password:hover, .insert_cod:hover{
			opacity:5.0;
		}

/*---------------------------------------------------------------------------------------------------------------*/
#myForm{
	width:60%;
	padding:2%;
	height:auto;
	margin:0 auto 0 auto;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

	#box{
		float:left;
		width:100%;
		height:auto;
		margin:0;
	}
		#icon_box{
			float:left;
			width:10%;
			height:25px;
		}
			#logo_conta{
				width:80%;
				opacity:0.9;
			}
		#campo_box{
			float:left;
			width:85%;
			height:auto;
		}
		#mensagem_erro{
			float:left;
			width:90%;
			padding-left:10%;
			margin-bottom:5px;
			height:auto;
			font-family: 'Blinker', serif;
			font-size: 14px;
			color:#F00;
		}
			label{
				float:left;
				font-family: 'Blinker', serif;
				font-size: 14px;
				color:#1863ca;
			}
	
			.form-container input[type=text], .form-container input[type=email], .form-container input[type=password] {
				width: 95%;
				padding: 5px 2%;
				font-family: 'Blinker', serif;
				color:#000;
				font-size:14px;
				line-height:20px;
				background: #FFF;
				border-bottom:solid 1px #999;
				margin-bottom:5px;
			}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=email]:focus, .form-container input[type=password]:focus {
	outline: none;
	border-bottom:solid 2px #03F;
}

.form-container .btn {
	background-color: #4CAF50;
	color: white;
	padding: 16px 2%;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
	margin-top:20px;	
}
.form-container .btn:disabled {
	background-color: #F00;
	opacity:0.5;
	border:3px solid #000;
	cursor:not-allowed;
}

.form-container .btn[disabled]:hover {
	background-color: #F00;
	opacity:0.5;
}


.form-container .btn:hover {
	opacity: 1;
}


#notas1{
	float:left;
	width:96%;
	height:auto;
	margin:10px 0 0 2%;
	font-family: 'Blinker', serif;
	font-size:14px
}
	red{
		color:#F00;
		font-size:20px;
	}
#notas2{
	float:left;
	width:96%;
	height:auto;
	margin:20px 0 0 2%;
}
	
#label{
	width:100%;
	float:left;
	font-family: 'Blinker', serif;
	font-size: 13px;
	color:#666;
	margin:15px 0 5px 0;
	word-wrap: break-word;
}

/*---------------------------------------------------------------------------------------------------------------*/		
.toggle{
	--uiToggleSize: var(--toggleSize, 1.25rem);
	--uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
	--uiToggleColor: var(--toggleColor, #222);
	
	display: var(--toggleDisplay, inline-flex);
	position: relative;
}

.toggle__input{
	/*
	The pattern by Sara Soueidan https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
	*/
	width: var(--uiToggleSize);
	height: var(--uiToggleSize);
	opacity: 0;
	
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

/*
1. Calculation of the gap for the custom checkbox
*/

.toggle__label{
	display: inline-flex;
	min-height: var(--uiToggleSize);
	padding-left: calc(var(--uiToggleSize) + var(--toggleIndent, .4em));
}

.toggle__input:not(:disabled) ~ .toggle__label{
	cursor: pointer;
}

/*
1. Ems helps to calculate size of the checkbox
*/

.toggle__label::after{
	content: "";
	box-sizing: border-box;  
	width: 1em;
	height: 1em;
	font-size: var(--uiToggleSize); /* 1 */
	
	background-color: transparent;
	border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);
	
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

.toggle__input:checked ~ .toggle__label::after{
	background-color: var(--uiToggleColor);
}

.toggle__text{
	margin-top: auto;
	margin-bottom: auto;
}

/*
The arrow size and position depends from sizes of square because I needed an arrow correct positioning from the top left corner of the element toggle

1. Ems helps to calculate size and position of the arrow
*/

.toggle__label::before{
	content: "";
	width: 0;
	height: 0;
	font-size: var(--uiToggleSize); /* 1 */
	
	border-left-width: 0;
	border-bottom-width: 0;
	border-left-style: solid;
	border-bottom-style: solid;
	border-color: var(--toggleArrowColor, #fff);
	
	position: absolute;
	top: .5428em;
	left: .25em;
	z-index: 3;
	
	transform-origin: left top;
	transform: rotate(-40deg) skew(10deg);
}

.toggle__input:checked ~ .toggle__label::before{
	--uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
	
	width: .4em;
	height: .2em;
	border-left-width: var(--uiToggleArrowWidth);
	border-bottom-width: var(--uiToggleArrowWidth);
}

/*
States
*/

/* focus state */

.toggle:focus-within{
	outline: var(--toggleOutlineWidthFocus, 3px) solid var(--toggleOutlineColorFocus, currentColor);
	outline-offset: var(--toggleOutlineOffsetFocus, 5px);
}

/* disabled state */

.toggle__input:disabled ~ .toggle__label{
	opacity: var(--toggleOpacityDisabled, .24);
	cursor: var(--toggleCursorDisabled, not-allowed);
	user-select: none;
}

/*
=====
PRESENTATION STYLES
=====
*/

/* 
The demo skin
*/

.toggle__label::after{
	border-radius: var(--toggleBorderRadius, 2px);
}

/* 
The animation of switching states
*/

.toggle__input:not(:disabled) ~ .toggle__label::before{
	will-change: width, height;
	opacity: 0;
}

.toggle__input:not(:disabled):checked ~ .toggle__label::before{
	opacity: 1;
	transition: opacity .1s ease-out .25s, width .1s ease-out .5s, height .2s ease-out .3s;
}

.toggle__input:not(:disabled) ~ .toggle__label::after{
	will-change: background-color;
	transition: background-color .2s ease-out;
}

/*
=====
SETTINGS
=====
*/

.page__custom-settings{
	--toggleColor: #690e90;
	--toggleOutlineColorFocus: #690e90;
	--toggleSize: 2rem;
}


/*
=====
DEMO
=====
*/


.page{
	box-sizing: border-box;
	max-width: 45rem;
	padding: 2.75rem 2rem 2.5rem;
	margin: auto;
	
	background-color: #fff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
	border-radius: 2px;
}

.page__section{
	display: flex;
	flex-wrap: wrap;
	font-weight: 700;
}

.page__section:nth-child(n+2){
	margin-top: 3rem;
}

.page__custom-settings{
	--pageToggleTextFontSize: 1.25rem;
}

.page__name{
	width: 100%;
}

.page__name::first-letter{
	text-transform: uppercase;
}

.page__toggle{
	float:left;
	width:98%;
	padding-left:2%;
	margin-top: 1.25rem;
	margin-right: 1.5rem;
	font-size: var(--pageToggleTextFontSize);
}

@media screen and (max-width:1680px) {
}

@media screen and (max-width:1400px) {

*{
	margin: 0;
	padding: 0;
	border:0;
}

}
@media screen and (max-width:1360px) {

*{
	margin: 0;
	padding: 0;
	border:0;
}

}

@media screen and (max-width:1000px) {

*{
	margin: 0;
	padding: 0;
	border:0;
}
	

}
@media screen and (max-width:900px) {

*{
	margin: 0;
	padding: 0;
	border:0;
}

#conteiner{
	width:96%;
	padding:0 2% 5% 2%;
}

	#central_conteiner{
		width:80%;
		/*background-color:#CCC;*/
	}
	
}
/*@media screen and (max-width:700px) {*/
@media screen and (max-aspect-ratio: 1/1) {
*{
	margin: 0;
	padding: 0;
	border:0;
}
		
}
@media screen and (max-width:700px) {
#conteiner{
	width:98%;
	padding:0 1% 5% 1%;
}

	#central_conteiner{
		width:100%;
		/*background-color:#CCC;*/
	}
	
		.new_acount, .recover_password{
			width:100%;
			float:left;
			margin:0;
		}
		.insert_cod	{
			width:100%;
			float:left;
			margin:0;
		}
		
		
#myForm{
	width:90%;
	padding:2%;
	height:auto;
	margin:0 auto 0 auto;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}		
	
}