/* ------------------- Editable Button Code-------------------------- */
$quantity-btn-color: #95d7fc;
.form-group {
	width: 10%;
	margin: 30px;
	input[type="text"] {
		width: 100%;
		text-align: right;
	}
	.glyphicon {
		color: $quantity-btn-color;
	}
}

/* ---------------------------------------------- */
* {
  box-sizing: border-box;
}
/* Main menu ------------------------------------   Style Start    */
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  max-width: 204px;
}

div.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  max-width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
/* Main menu ------------------------------------   Style End     */


.container input[type=text],[type=password],[type=email],[type=date],[type=double],[type=number]{
  width: 80%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.container input[type=submit] {
  background-color:rgb(255, 221, 0);
  color: white;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position:static;
  margin-top:0px;
  
}

.container input[type=text],[type=email],[type=date],[type=double],[type=number],[type=password]{
  width: 80%;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
.addproductform input[type=text],[type=double],[type=submit],[type=email],[type=number]{
  width: 90%;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.addproductform input[type=email]{
  width: 90%;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
.addproductform select{
  width: 90%;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
.addproductform input[type=submit]:hover {
  background-color:rgb(0, 71, 204);
}



.container input[type=submit]:hover {
  background-color:rgb(0, 71, 204);
}
.row input[type=submit] {
  background-color:rgb(255, 221, 0);
  color: white;
  padding: 8px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  margin-top:0px;
  width: 20%;
}
.example button{
	border-radius: 4px;
}

.header{
	background-color:rgb(0, 191, 255);
	color:rgb(255, 255, 255);
	padding:0px;
}

.headertbl input[type=text] {
  padding: 5px 3px;
  font-size: 17px;
  border: 1px solid grey;
  float:left;
  width: 60%;
  background: #f1f1f1;
   border-radius: 4px;
}
.headertbl button[type=submit]:hover {
  background-color:rgb(255, 221, 0);
}
.headertbl button[type=submit] {
  background-color:rgb(204, 204, 204);
  color: white;
  padding:8px 5px;
 border: 1px solid grey;
  border-radius: 4px;
  cursor: pointer;
  position:absolute;
  margin-top:0px;
   width: 10%;
}
.productbdscr input[type=text] {
  padding: 8px 35px;
  font-size: 17px;
  border: 1px solid grey;
  float:left;
  width: 85%;
  background: #f1f1f1;
   border-radius: 4px;
}
.productbdscr button[type=submit]:hover {
  background-color:rgb(0, 71, 204);
}
.productbdscr button[type=submit] {
  background-color:rgb(255, 221, 0);
  color: white;
  padding: 11px 35px;
 border: 1px solid grey;
  border-radius: 4px;
  cursor: pointer;
  position:absolute;
  margin-top:0px;
   width: 10%;
}
/* ------------------------- - */

.salereorder input[type=date] {
  padding: 8px 35px;
  font-size: 17px;
  border: 1px solid grey;
  float:left;
  width: 40%;
  background: #f1f1f1;
   border-radius: 4px;
}
.salereorder input[type=submit]:hover {
  background-color:rgb(0, 71, 204);
}
.salereorder input[type=submit] {
  background-color:rgb(255, 221, 0);
  color: white;
  padding: 12px 35px;
 border: 1px solid grey;
  border-radius: 4px;
  cursor: pointer;
  position:absolute;
  margin-top:0px;
   width: 10%;
}
/* ------------------------------ */
.example input[type=text] {
  padding: 5px;
  font-size: 17px;
  border: 1px solid grey;
  float:left;
  width: 90%;
  background: #f1f1f1;
   border-radius: 4px;
}
/*  Form on update page   */
.exampleupdate input[type=text],[type=email],[type=date],[type=password]{
  width: 80%;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.exampleupdate1 input[type=text]{
  width: 67%;
  float:left;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.exampleupdate1 input[type=submit]{
  width: 10%;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
.exampleupdate2 input[type=text]{
  width: 45%;
  float:right;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}


.exampleupdate2 input[type=submit]{
  width: 10%;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
/* -----------Averge Cost Pace Search in Col-10---------- */
.exampleupdate3 input[type=text]{
  width: 54%;
  float:left;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.exampleupdate3 input[type=submit]{
  width: 10%;
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
/* -----------Averge Cost Pace Search in Col-10---------- */
.example input[type=submit]:hover {
  background-color:rgb(0, 71, 204);
}
.exampleupdate tr  {
  
  width: 40%;
  padding: 5px;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

 input[type=submit] {
  background-color:rgb(255, 221, 0);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position:absolute;
  margin-top:0px;
  
}

label {
  padding: 8px 8px 8px 0;
  display: inline-block;
}
/* for each input type as "Submit " this is the css code that styles the input type "submit"  */


input[type=submit]:hover {
  background-color:rgb(0, 71, 204);
}

.container {
  border-radius: 2px;
  background-color:hsl(300, 7%, 97%);
  padding: 3px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 0px;
  
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 0px;
 
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  
}
#addprod a{
	background-color:rgb(255, 221, 0);
	text-decoration:none;
	color: white;
}

#addprod :hover{
	
	background-color:rgb(0, 71, 204);
}

#logo{
	
	width:100px;
	padding:0px;
	 max-width: 100%;
    height: auto;

}

.indx1 img{
	width:100%;
	height:200px;
}
.indx11 img{
	width:100%;
	height:280px;
}

.indx img{
	width:100%;
	height:180px;
}
.indxproduct img{
	width:100%;
	height:270px;
}

* {
  box-sizing: border-box;
}



.regtbl{
	background-color:rgb(0, 71, 204);
	color:#ffe042;
	padding:12px;
}


.example input[type=text] {
	float:left;
  padding: 5px;
  font-size: 17px;
  border: 1px solid grey;
  float:left;
  width: 50%;
  background: #f1f1f1;
}

.example button {
  float: left;
  width: 20%;
  padding: 5px;
  background:rgb(255, 221, 0);
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}



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


.row::after {
  content: "";
  clear: both;
  display: table;
}
.col-6{
	
	margin-top:0px;
	padding:2px;
	
}


.proddistxt p h1{
	padding:8px;
	background-Color:#e6ffff;
}
/* This code style the column 3 h1 */
 .col-3 h1{
	 margin-top:0px;
	padding:1px;
	background-Color:rgb(255, 221, 0);
}


#cl3img{
	height:300px;
	padding:8px;
}

div.desc {
  padding: 10px;
  text-align: center;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

html {
  font-family: "Lucida Sans", sans-serif;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
}

.menu li {
   text-align: center;
  width:100%;
  text-decoration: none;
  padding: 7px;
  margin-bottom: 10px;

  background-color:rgb(31, 210, 255);
  
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

 .menu li a{
  text-decoration: none;
  color: #ffffff;
 
}
 

.menu li:hover {
  background-color: #0099cc;
}



.footer{
	background-color:#0099cc;
	color:#ffffff;
	text-align:center;
	font-size:12px;
	padding:8px;
}

/* Slide show Styling */
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width:100%;
  position: relative;
  margin: auto;
  
 
}
#slimg{
	
	width:100px;
	padding:0px;
	 max-width: 100%;
    height: auto;

}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #333300;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
  
 div.gallery img {
  width: 100%;
  height: auto;
}
}

/*-------------------Top Nav On Sales Report Page-----------------*/



@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}