@import "clearCss.css";

@import "style.css";

@import "tab.css";

@import "waterMark.css";



 
 .containerMain {
 
	width: 100%;
 
 
 }
 
	#stockSheets , #inventory	{
	
		width: 100%;
	
	}



/* Set a style for all buttons */

	#loginButton.button {
	
		background-color: #04AA6D;
		color: white;
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		cursor: pointer;
		width: 100%;
}

	.buttons {


			border-radius: 15%;
			background-color: #f44336;



	}
	button:hover {
  
		opacity: 0.8;
	}

/* Extra styles for the cancel button */

	.cancelbtn {
	
		width: auto;
		padding: 10px 18px;
		background-color: #f44336;
		
	}

/* Center the image and position the close button */

	.imgcontainer {
	
		text-align: center;
		margin: 24px 0 12px 0;
		position: relative;
		
	}

	img.avatar {
	
		width: 40%;
		border-radius: 50%;
	
	}



	span.psw {
  
		float: right;
		padding-top: 16px;
	
	}

/* The Modal (background) */

	.modal {
  
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		padding-top: 60px;

	}

/* Modal Content/Box */

	.modal-content {
	
		background-color: #fefefe;
		margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
		border: 1px solid #888;
		width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */

	.close {
	
		position: absolute;
		right: 25px;
		top: 0;
		color: #000;
		font-size: 35px;
		font-weight: bold;
		
}

	.close:hover, .close:focus {
	
		color: red;
		cursor: pointer;
		
}

/* Add Zoom Animation */

	.animate {
	
		
		animation: animatezoom 0.6s
		
}

	.roundCorners {
	
        border-radius: 15%;
        padding: 0.5%;
        margin: 0.5%;
	
	}
	
	
	.circles {
	
		border-radius: 50%;
		border: 2px snow solid;
		padding: 6px;
		background-color: navy;
		color: snow;
		
	}

	form {
	
		width:100%;
		
	}
  
	
   
 /* Flex Settings */

	fieldset {
    
      display: flex;
      width: 100%;
      
	}

	legend {

		font-weight: bold;
		
  	}

	textarea{

				display:none;


		  }

	.flex-container  { /* Set on a div element that holds a form */
        
        display:flex;
		flex-flow: row wrap;
        
		padding: 0.05;
        
       
        width:100%; 
       
        
        height:auto;
        
    }



	div.flex-container > fieldset {
 
      	flex: 0 1 100%;
      	padding:0.5%;
      
}

 div.flex-container fieldset  label , div.flex-container fieldset  label  input :not([type = checkbox ]) :not([type = radio]) { 
       
		padding: 0.5%;
		margin: 0.5%;
        flex: 0 1 20%; /* Standard syntax */ 

}

	div.flex-container fieldset  label  input [type=radio]{
	
		padding: 0.5%;
		margin: 0.5%;
		flex: 1 0 15%;
		flex-wrap: wrap;
		
		
	
		}
		
	div.flex-container >  label.radio {
	
		flex: 0 0 30%;
		flex-wrap: wrap;
		
	
	}
	
	div.flex-container >  label > textarea {
	
	
		padding: 0.5%;
		margin: 0.5%;
		flex: 0 0 60%;
		
		vertical-align: top;
		max-width: 100%;

		
		
	
	}
	
	
	

			
			
	.flex-container  > fieldset li:not(:last-child) {
	
		margin-bottom: 5%;
	
	
	}
	
	

	
	.flex-container > fieldset label, .flex-container  fieldset li p {
	
	
		flex: 1 0 40%;
		/*max-width: 220px; */
		
}
	

	

			
	.flex-container > fieldset li, .flex-chekboxes {
	
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	
	}   
	
	.flex-container ul {
 
	background: snow;
	color: steelblue;
	list-style-type: decimal;
	list-style-position: inside;
	
 
 
 }
 
 .flex-container ul li:nth-of-type(odd) {
 
		background: navy;
		color: snow;
 
 }

	
	.flex-checkboxes {
	
		padding: 0 0.5%;
		
		/*justify-content: space-between; */
	
	}
		
	


	.taskOptions {    

		display:none;
}

	@keyframes animatezoom {
	
		from {transform: scale(0)}
		to {transform: scale(1)}
}



.tooltip {
  position: relative;
  display: inline-block;
  border: 1px solid black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: navy;
  padding: 1px;
  
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

 @media only screen and (max-width: 900px) { /* settings for slightly smaller screens */

 #fullpage {

            max-width: 99%;
            padding: 1px;
			background-color: orange;

    }   

    
    
 
    header {

        display: none;
        
        }


   p {

        font-size: 0.9em;
        color: white;
        margin: 1px;

        padding: 1px;
        border-width: 1px;
        width: 100%;

    }
  

    div img {

        float: left;
        display: block;

    }


	




   



 

  
  

 

}

/* Above is for max-width 900px =================================================== */

 @media only screen and (max-width: 400px) { /* settings for smaller screens */




        body {

            background-color: navy;

        }



















/*
closing brace below for the media query */

} /* !!!!!!!!!!! */













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

  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}