/* Home ::: Smart School */
@charset utf-8;
	
		* {
			box-sizing: border-box;
		}

		body { 
			margin: 0;
			font-family: Helvetica, Arial, sans-serif;
			background: white;
			display: flex;
			flex-direction: column;
			min-height: 100%;
		}
		
				html {
				box-sizing: border-box;
				height: 100%;
				min-height: 100%;
			}
			
			*, *:before, *:after {
				box-sizing: inherit;
			}
			
			footer {
				margin-top: auto;
			}
			
			/* footer */
			.footer {
				background-color: white;
				color: rgb(125,125,125);
				padding-top: 10px;
				padding-bottom: 8px;
				text-align: center;
				margin: 0 auto;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				margin: 0 auto;
			}
		
	/* Text box */
		input[type=text], input[type=password],input[type=email],input[type=date]{
			font: Courier;
			width: 100%;
			padding: 10px;
			margin: 5px 0 22px 0;
			border: 1 px solid gray;
			font-size: 15px;
			color: rgb(125,125,125);
			border:1px solid lightgray;
			outline-color: gray;
		}
			
	/* Combo-box */
		select{ 
		   font: Courier;
			width: 100%;
			padding: 10px;
			margin: 5px 0 22px 0;
			font-size: 15px;
			color: rgb(125,125,125);
			border: 1px solid lightgray;
			outline-color: gray;
		}
		
		textarea{
			font: Courier;
			width: 100%;
			height: 100px;
			padding: 10px;
			margin: 5px 0 22px 0;
			border:1px solid lightgray;
			font-size: 15px;
			color: rgb(125,125,125);
			outline-color: gray; 
	  	} 
		
		/* Botão salvar */
			.btn{
				background-color: rgb(255,163,27,.8); 
				border: solid 1px rgb(255,163,27,.8); 
				color: white;
				padding: 12px 12px;
				margin: 0;
				cursor: pointer;
				width: 120px;
				border-radius: 5px;
				font-size: 15px;
				font-weight: bold;
			}  
			
			.btn:hover {
				opacity:.9;
			}
			
			/* Botão negativo */
			.cancelbtn {
				background-color: rgb(255,255,255);
				color: rgb(125,125,125);
				padding: 12px 12px;
				margin: 0px 0;
				border: 1px solid lightgray;
				cursor: pointer;
				width: 120px;
				border-radius: 5px;
				font-size: 15px;
				font-weight: bold;
				
		 	}
			
			.cancelbtn:hover{
				opacity: 0.8;
			}
			
			/* bullet */
			.os{
				color:rgb(255,194,5);
			}
			
			/*highlighth */
			.h{
				color:rgb(255,163,27,.8);
			}	
			
			label,p,h1,h2,h3,h4,h5,h6 { 
			  color: rgb(125,125,125);
			}
			 
			a { 
			  color:  rgb(125,125,125);
			  text-decoration: none;
			   
			}
			
			/* fieldset */
			fieldset {
				margin-left: 15px;
				margin-right: 15px;
				padding-top: 20px;
				padding-bottom: 20px;
				padding-left: 40px;
				padding-right: 40px;
				border: 1px solid lightgray;
				border-radius: 5px;
			}

			legend {
			  background-color:rgb(255,163,27,.8);
			  border: none;
			  border-radius: 2px;
			  color: white;
			  padding: 7px 9px;
			}
			
			/* pontos */
			.dot {
			  height: 20px;
			  width: 20px;
			  background-color: rgb(255,163,27);
			  border-radius: 50%;
			  display: inline-block;
			  opacity: .8; 
			  }
			
			/* talvez possa tirar */
			.warning {
				background-color: white;
				border-top: 1px solid rgb(255,194,5);
				border-bottom: 1px solid rgb(255,194,5);
			}
			
			.s{
				margin-top:8px;
				display:inline-block;
			}
			
			.borderb{
				border-bottom: 5px solid rgb(255,194,5);
			} 
			
			hr{
				opacity: .85;
			}
			
/* --- SOMENTE HOME  ---- */

			/* Menu */ 
			.header {
				overflow: hidden;
				background-color: white;
				border: 1px solid rgb(237,236,234);
				padding: 18px 15px; 
				width:95%;
				margin: 0 auto; 
			}
			
			/* Botões do menu */
			.header a {
				color: rgb(125,125,125);
				text-align: center;
				text-decoration: none;
				font-size: 17px; 
				line-height: 25px;
				padding: 3px 14px; 
				margin: 0 .5px 0 .5px;
			}
			
			/*
			.header a:hover {
				border-bottom: 2px solid rgb(255,163,27,.8);
				width:58%;
			} 
			*/
		
			/* Somente botão entrar */
			.header a.active {
				background-color: rgb(255,163,27,.8);
				color: white;
				border-radius: 5px;
				padding: 12px;
				width:48%;
			}
		
			.header-right {
				float: right; <!-- alinhamento à direita do menu -->
			}
			
			@media screen and (max-width: 500px) {
				
				
.header a {
					float: none;
					display: block;
					text-align: none;
				}
			
				.header-right {
					float: none;  
				}
			}
			
			/* area da logo - home */
			.header2 {
				font-family: Helvetica;
				padding-top: 14px;
				padding-bottom: 21px;
				text-align: center;
				font-weight: bold;
				color: rgb(125,125,125);
				margin-top: 12px;
			}
			
			/* logo */
			img.responsive {
				width: 14%;
				margin-top: 15px;
				
			} 
			
			/* visualização paisagem */
			@media screen and (max-width: 800px) {
				img.responsive {
					width: 30%;
					margin-bottom: 5px;
				} 
			}
			
			/* visualização celular */
			@media screen and (max-width: 400px) {
				.header-right{
				padding-left: 25%;
			}
				.header a {
					text-align: left; 
			}
				img.responsive {
					width: 60%;
					margin-bottom: 10px;
				} 
			} 
			
			/* Cards - main content (s) */
			/* Float four columns side by side */
			.column {
				float: left;
				width: 25%;
				padding: 0 5px;
			}
			
			.row {
			margin: 0 -5px; width:85%;
			}
			
			/* Clear floats after the columns */
			.row:after {
				content: "";
				display: table;
				clear: both;
			}
			
			/* Responsive columns */
			@media screen and (max-width: 600px) {
				.column {
					width: 100%;
					display: block;
					margin-bottom: 10px;
				}
			}
	
	.card {
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
				padding: 16px;
				text-align: center;
				/*background-color: rgb(237,236,234);*/
				color: white;
				border-radius: 5px;
				opacity: .85;
				background: rgb(246,246,246);
				/*background-image: url(../images/bg.webp);
				background-repeat:repeat;*/
			}
			
			.card:hover {
				box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
			}