/* essa folha de estilo demomina-se mystyle.css */
@charset utf-8;
@import url("fontes.css"); 

	* {
		box-sizing: border-box;
	}

	body { 
		margin: 0;
		font-family: Arial, Helvetica, sans-serif;
		background: white;
	}

	/* Text box */
	input[type=text], input[type=password],input[type=email],input[type=date],input[type=number],input[type=tel]{
		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;
		}
		
		
	input[type=datetime-local]{
		width: 100%;
		padding: 10px;
		margin: 5px 0 22px 0;
		border: 1 px solid lightgray;
		font-size: 15px;
		color: gray;
	}
	
	datetime-local{
		width: 100%;
		padding: 10px;
		margin: 5px 0 22px 0;
		border: 1 px solid lightgray;
		font-size: 15px;
		color: gray;
	}
	
	/* Botão positivo */
		.btn{
		background-color: rgb(0,174,239);
		color: white;
		padding: 14px 14px;
		margin: 0px 0;
		border: none;
		cursor: pointer;
		width: 150px;
		border-radius: 5px;
		font-size: 17px;
		font-weight: bold;
		box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	}
			
	.btn:hover {
		opacity: 0.8;
	}
			
	/* Botão negativo */
	.cancelbtn {
		background-color: rgb(255,255,255);
		color: gray;
		padding: 14px 14px;
		margin: 0px 0;
		border: 1px solid lightgray;
		cursor: pointer;
		width: 150px;
		border-radius: 5px;
		font-size: 16px;
		font-weight: bold;
		box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	}
			
	.cancelbtn:hover{
		opacity: 0.8;
	}
				
	/* Combo-box */
	select{ 
		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{
		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; 
  	} 

	label,p,h1,h2,h3,h4,h5,h6 { 
		color: rgb(125,125,125);
	}
	
	/* botão positivo */
	input[type=submit]{
		background-color: rgb(0,174,239); 
		color: white;
		padding: 14px 14px;
		margin: 0px 0;
		border: none;
		cursor: pointer;
		width: 120px;
		border-radius: 5px;
		font-size: 14px;
		font-weight: bold;
		box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	}
				
	/* botão negativo */
	input[type=reset]{
		background-color: rgb(255,255,255);
		color: gray;
		padding: 14px 14px;
		margin: 0px 0;
		border: 1px solid lightgray;
		cursor: pointer;
		width: 120px;
		border-radius: 5px;
		font-size: 14px;
		font-weight: bold;
		box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
		
	}
				
	.submit:hover {
		opacity: 0.8;
	}	
				
	.reset:hover {
		opacity: 0.8;
	}
	
	
			
.tooltip {

		position: relative;

		display: inline-block;

		<!-- border-bottom: 1px dotted black;-->

	}



	.tooltip .tooltiptext {

		visibility: hidden;

		width: 250px;

		background-color: black;

		color: #fff;

		text-align: center;

		border-radius: 6px;

		padding: 5px 0;

		/* Position the tooltip */

		position: absolute;

		z-index: 1;

		top: 100%;

		left: 50%;

		margin-left: -60px;

	}



	.tooltip:hover .tooltiptext {

		visibility: visible;

	}
			
	img.responsive {
		width: 10%;
		} 
			
	@media screen and (max-width: 800px) {
	   img.responsive {
			width: 50%; 
		} 
	}
	/* alert cabeçalho */		
	.alert {
		padding: 20px;
		background-color:  #f1f1f1;
		color: rgb(125,125,125);
	}

	.closebtn {
		margin-left: 15px;
		color: rgb(125,125,125);
		font-weight: bold;
		float: right;
		font-size: 22px;
		line-height: 20px;
		cursor: pointer;
		transition: 0.3s;
	}

	.closebtn:hover {
		color: black;
	}
			
	.divlog {
		width: 100%;
		padding: 12px;
		border: 1px solid lightgray;
		align: right;
		margin-top: 6px;
	}			
	
	.os{
		color:rgb(0,174,239);
	}
	
	/* The message box is shown when the user clicks on the password field */
	#message {
	  display:none;
	  background: #f1f1f1;
	  color: gray;
	  position: relative;
	  padding: 15px;
	  margin-top: 5px;
	}

	#message p {
	  padding: 10px 35px;
	  font-size: 17px;
	}

	/* Add a green text color and a checkmark when the requirements are right */
	.valid {
	  color: rgb(0,174,239);
	}

	.valid:before {
	  position: relative;
	  left: -35px;
	  content: "✔";
	}

	/* Add a red text color and an "x" when the requirements are wrong */
	.invalid {
	  color: gray;
	}

	.invalid:before {
	  position: relative;
	  left: -35px;
	  content: "✖";
	}
	/*Cursor para disabled fields*/
	.not-allowed {cursor: not-allowed;}