/* CSS Document */


body {
	
	font-family:  Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size:14px;
	margin:0px;
	padding:0px;
	background: #FF9007;
	
	height: 100vh;
	
	}
	
	

input{
margin:8px;
border-radius:5px;
}

a{
color:#FFF;
font-weight:600;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
text-decoration:none;
}

a:hover{
color:#F00;
background:white;
box-shadow: 0 5px 5px 0 greenyellow;
}


.flexdivheader{
display:flex;
width:100%;
background-color: rgba(21, 21, 22, 0.2);
height:50px;
justify-content:center;
}

.flexdivmenuitem{
padding:8px;
margin:auto;
background-color: rgba(21, 21, 22, 0.2);
border: 1px solid #141414;
box-shadow: 1px 1px 3px #000000;
border-radius:5px;
}


.headertd{

text-align:center;
}

.inputtextbox{
border:1px solid #CCC;
width:60px;

}

.mustinput{
border:1px solid #CCC;
width:60px;
background-color:#FF0;
}

#box-shadow:0 0 1rem orange;text{
font-size:13px;
line-height:20px;
}
.status{
.box-shadow:0 0 1rem orange;
padding-right:30px;
text-align:right;
background-color:rgba(41, 141, 255, 0.2);
height:40px;

}

.deliverysheettbl{
	background-color:#e4e5c9;
	color:#68685c;
	border: 1px solid #ffffff;
	text-align:right;
	}
	
	
	
/*-----------------------------------------div formatting--------------------------------------*/	
.container{
display:grid;
grid-template-columns:1fr;
text-align:center;
width:100%;
min-height:100vh;
background-color: #F5DEB3;
}

.fullscreeninput{
width:90%;
height: 1.5rem;
margin:5px;

}

.formcontainer{

margin:auto;
width:80%;
background-color:gray;
border-radius:10px;

}

/* CSS Gradient Button */
.button-87 {
  margin: auto;
  padding: 15px 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 1s;
  background-size: 200% auto;
  color: white;
  border-radius: 10px;
  display: block;
  border: 0px;
  font-weight: 800;
  box-shadow: 0px 0px 14px -7px #f09819;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
 
}

.button-87:active {
  transform: scale(5);
}


.statusnotification{
display:block;
background-color:#00A3E0;
color:white;
text-align:center;

}















/*---------------------------------------------------------------------------------------------*/
#container{
display:flex;
justify-content:center;
items-align:center;
}
#loginbox{
box-shadow:0 0 2rem rgb(255, 199, 126);
width:200px;
margin:auto;
margin-top:50px;
border:1px solid rgb(255, 199, 126);
padding:40px;
border-radius:0 40px 0 40px;
background-color:orange;
animation: transitionIn 3000ms;

}

@keyframes transitionIn{

from{
opacity:0;
transform: Rotate(45deg);
}

to {
opacity:1;
transform:Rotate(0deg);
}
}
#button {
    background-color: orangered; 
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
}

.inputs{
width:170px;
border-radius:5px;
outline:none;
background:white;
border:1px solid #ccc;
padding:6px;
margin:5px;

}

.inputs:focus{
    outline: none;
    border-color: #ffffff;
    box-shadow: 0px 0px 2px 2px orange;
}

.dashboardtable{
margin:auto;
width:100%;
}





.dashboardcards{
background-color:#F2E6C2;
display:flex;
/*display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap:1rem;*/
justify-content:center;
width:90%;
border-radius:15px;
margin:auto;
}

.dashboardcard{
background-color:#666;
border:solid 2px gray;
border-radius:12px;
overflow:hidden;
margin: 10px 5px 5px 5px;


}


.headerstyle{
background-color:#b0cff5;
text-align:left;
width:100%;

}


 nav{
        display: flex;  
         
    }
    
    nav a{
        font-family: 'Kanit', sans-serif;
        font-size:1rem;
        text-decoration: none;
        padding: 2px;
        margin: 2px;
        flex-grow: 1;
        background-color: #FFB300;
        border:0px solid #666666;
        border-radius: 5px;
        text-align: center;
        color: white;
        
    }
    a:hover{
        box-shadow: 0px 0px 5px orange;
        background-color: white;
        color: orange;
        
        
    }

#supplycontainer{
display:flex;
background-color:#F8F8FF;
width:100%;

}

#supplydivs{
flex-grow:1;
text-align:center;

}

#supplydivs p{
background-color:rgba(41, 141, 255, 0.2);
color:#666666;
border-radius:5px;
padding:0px;
margin-left:5px;
margin-right:5px;
margin-top:0px;
margin-bottom:0px;
}



.DailySales{

background-color:#F2E6C2;
width:350px;
position:absolute;
left:400px;

}

.Delivered{

	background-color:#F2E6C2;
	position:absolute;
	left:800px;

	

	width:400px;

	}

	

.AccountingTBL{

	background-color:#F2E6C2;

	}
ul li{
max-width:350px;
background-color:#FFF9A7;
padding:10px 5px 10px 5px;
margin:15px;
outline:2px solid orange;

}

}

/*-----------------------------------------Table Fomatting--------------------------------------*/
th{
background-color:white;
color:white;
}

thead th{
background-color:orange;
font-size:15px;
color:white;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;

}
tfoot{
background-color:#ECE80D;
font-size:15px;
color:#676852;
}


td {
background-color:#FBF3D5;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
color:#5A5B47;
padding-left:10px;
padding-right:10px;

}

tr:nth-child(odd) td{
background-color:#D6DAC8;
}


.DashContainer{
background-color:#ECE80D;
width:80%;
height:80%;
}

.data1{
background-color:#CC0000;
width:50%;
margin:5px;
position:relative;
float:left;
}
.data2{
background-color:#0000FF;
width:30%;
float:right;
clear: both;
position:relative;
}

select#dropdown{
background-color:orange;
border:1px solid #ccc;
margin-left:10px;
margin-right:20px;
margin-top:20px;
border-radius:3px;
color:white;
padding-left:20px;
width:180px;
font-size:1rem;

}


.payroll{
max-width: 600px;
background-color: orange;
display: grid;
grid-template-columns: 2fr 1fr;
padding: 20px;
border-radius: 0 20px 0 20px;
margin:20px;
box-shadow:.3rem .3rem 1rem 0 rgb(173, 173, 173);
}



.description{
background-color: white;
border-radius: 2px;
margin: 2px;
padding: 5px;

}

.data{
background-color: white;
border-radius: 2px;
margin: 2px;
padding: 5px;

}





/*-----------------------------------------Media Query--------------------------------------*/
@media screen and (max-width: 600px) {

.dashboardcards{

	display:block;
	width:95%;
	margin:auto;
	}
.dashboardcard{
margin:15px 0 0 0;
width:1fr;
}


.dashboardtable{
width:100%;
margin:0px;
}
.flexdivheader{
display:block;
height:auto;
}

.flexdivmenuitem{
width:95%;
padding:3px;
border-radius:2px;
}

 nav{
            flex-direction: column;
        }
#supplycontainer{
flex-direction:column;
}  
#supplydivs{
width:100%;

}  
      
}

@media screen and (min-width: 600px){
.formcontainer{
width:500px;
}
}