#wrapper{
position: relative;
width: 98%;
box-shadow: 0 0 20px #000;
border: 3px solid #e1e1e1;
margin: 5px auto 5px auto;
}
#wrapper2{
position: relative;
width: 98%;
box-shadow: 0 0 20px #000;
border: 3px solid #e1e1e1;
margin: 5px auto 5px auto;
text-align: center;
}

a:link { color: blue; font-size: 12px; text-decoration: none; }
a:visited { color: blue; font-size: 12px; text-decoration: none; } 
a:hover { color: red; font-size: 12px; } 

table.tablecustdetails {
border-spacing:0px 0px;
width: 100%;
height: auto;
overflow: scroll;
border-radius: 5px;
border: 2px solid;
border-color: #F2F2F2;
background: #FAA8A8;
text-align: center;
}

table.tablepagination {
table-layout: fixed;
border-spacing:0px 0px;
width: 100%;
height: auto;
overflow: scroll;
background: #F2F2F2;
text-align: center;
}

table.table100 {
width: 100%;
}

td {
  white-space:nowrap;
}
td:last-child {
  width:100%;
}



td.light1 {color: black; background-color: #F2F2F2; width: 50px; font-size: 12px; text-align:left; }
td.dark1 {color: black; background-color: #CFCFCF; width: 50px; font-size: 12px; text-align:left; }
td.no1 {color: black; background-color: #FFF; width: 50px; font-size: 12px; text-align:left; }
td.red1X {color: red; background-color: #CFCFCF; width: 50px; font-size: 12px; text-align:left; font-weight: bold; }
td.red1 {color: black; background-color: #CFCFCF; width: 50px; font-size: 12px; text-align:left; }
td.megared1 {color: red; background-color: #FCC7C7; width: 50px; font-size: 12px; text-align:left; font-weight: bold;}
td.extramegared1 {color: red; background-color: #F89E9E; width: 50px; font-size: 12px; text-align:left; font-weight: bold;}

td.light2 {color: black; background-color: #F2F2F2; width: 50px; font-size: 12px; text-align:left; }
td.dark2 {color: black; background-color: #CFCFCF; width: 50px; font-size: 12px; text-align:left; }
td.no2 {color: black; background-color: #FFF; width: 50px; font-size: 12px; text-align:left;}
td.red2X {color: red; background-color: #FBEFEF; width: 50px; font-size: 12px; text-align:left; font-weight: bold; }
td.red2 {color: black; background-color: #FBEFEF; width: 50px; font-size: 12px; text-align:left; }
td.megared2 {color: red; background-color: #FCC7C7; width: 50px; font-size: 12px; text-align:left; font-weight: bold;}
td.extramegared2 {color: red; background-color: #F89E9E; width: 50px; font-size: 12px; text-align:left; font-weight: bold;}

td.light3 {color: black; background-color: #F2F2F2; width: 50px; font-size: 12px; text-align:right; }
td.dark3 {color: black; background-color: #CFCFCF; width: 50px; font-size: 12px; text-align:right; }
td.no3 {color: black; background-color: #FFF; width: 50px; font-size: 12px; text-align:right; }
td.red3X {color: red; background-color: #FCC7C7; width: 50px; font-size: 12px; text-align:right; font-weight: bold; }
td.red3 {color: black; background-color: #FCC7C7; width: 50px; font-size: 12px; text-align:right; }
td.megared3 {color: red; background-color: #FCC7C7; width: 50px; font-size: 12px; text-align:right; font-weight: bold; }
td.extramegared3 {color: red; background-color: #F89E9E; width: 50px; font-size: 12px; text-align:right; font-weight: bold; }
td.yellow3 {color: black; background-color: yellow; width: 50px; font-size: 12px; text-align:right; }



td.green2 {color: green; background-color: #E3F6CE; width: 230px; font-size: 12px; text-align:left; }
td.megagreen2 {color: white; background-color: green; width: 230px; font-size: 12px; text-align:left; }
td.yellow2 {color: black; background-color: yellow; width: 230px; font-size: 12px; text-align:left; }
td.blue2 {color: white; background-color: #81BEF7; width: 230px; font-size: 12px; text-align:left; }

td.green3 {color: green; background-color: #E3F6CE; width: 35px; font-size: 12px; text-align:right; }
td.megagreen3 {color: white; background-color: green; width: 35px; font-size: 12px; text-align:right; }
td.blue3 {color: white; background-color: #81BEF7; width: 35px; font-size: 12px; text-align:right; }
	

td.green1 {color: black; background-color: #E3F6CE; width: 50px; font-size: 12px; text-align:center; }
td.basket1 {color: black; background-color: yellow; width: 50px; font-size: 12px; text-align:center; }
td.yellow1 {color: black; background-color: yellow; width: 100px; font-size: 12px; text-align:left; }
td.payment1 {color: black; background-color: #F8E0E6; width: 100px; font-size: 12px; text-align:left; }
	td.megagreen1 {color: white; background-color: green; width: 70px; font-size: 12px; text-align:left;}
	td.blue1 {color: white; background-color: #81BEF7; width: 70px; font-size: 12px; text-align:left; }

td.no4 {color: black; background-color: #FFF; width: 250px; font-size: 12px; text-align:left; }
td.yes4 {color: black; background-color: #CFCFCF; width: 250px; font-size: 12px; text-align:left; }
td.red4 {color: red; background-color: #CFCFCF; width: 250px; font-size: 12px; text-align:left; }
td.green4 {color: black; background-color: #E3F6CE; width: 250px; font-size: 12px; text-align:left; }
td.yellow4 {color: black; background-color: yellow; width: 250px; font-size: 12px; text-align:left; }
td.payment4 {color: black; background-color: #F8E0E6; width: 250px; font-size: 12px; text-align:left; }
td.light4 {color: black; background-color: #F2F2F2; width: 250px; font-size: 12px; text-align:left; }

td.green2 {color: black; background-color: #E3F6CE; width: 50px; font-size: 12px; text-align:center; }
td.basket2 {color: black; background-color: #E3F6CE; width: 50px; font-size: 12px; text-align:center; }
td.yellow2 {color: black; background-color: yellow; width: 50px; font-size: 12px; text-align:right; }
td.payment2 {color: black; background-color: #F8E0E6; width: 50px; font-size: 12px; text-align:right; }

td.green3 {color: black; background-color: #E3F6CE; width: 50px; font-size: 12px; text-align:center; }
td.yellow3 {color: black; background-color: yellow; width: 50px; font-size: 12px; text-align:left; }
td.payment3 {color: black; background-color: #F8E0E6; width: 50px; font-size: 12px; text-align:left; }

td.yesauto {color: black; background-color: #CFCFCF; padding-right: auto; font-size: 15px; text-align:right; }

td.blank80 {width: 80px; }
td.blank100 {width: 100px; }

form.center {width:500px; margin: auto;}


td.yes5 {color: black; background-color: #CFCFCF; width: 25px; font-size: 12px; text-align:center; }
td.light5 {color: black; background-color: #F2F2F2; width: 25px; font-size: 12px; text-align:center; }
td.yellow5 {color: black; background-color: #F2F2F2; width: 25px; font-size: 12px; text-align:center; }

td.center {color: black; text-align:center; }
td.centerwide {color: black; text-align:center; padding:0px 100px 0px 100px;}



/* THIS IS THE SECTION WE ARE USING */
#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left; width:20%;
	font: bold 11px arial}

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	/*width: 140px;*/
	background: #5970B2;
	/*font-size: 18px;*/
	font-size: 16px;
	color: #FFF;
	text-align: center;
	text-decoration: none}

			.body {
			-webkit-user-select: none;
			-webkit-touch-callout: none;        
			}
			.hover_effect {
			-webkit-user-select: none;
			-webkit-touch-callout: none;        
			}
			.hover {
			-webkit-user-select: none;
			-webkit-touch-callout: none;        
			}
			#body {
			-webkit-user-select: none;
			-webkit-touch-callout: none;        
			}
			#hover_effect {
			-webkit-user-select: none;
			-webkit-touch-callout: none;        
			}
			#hover {
			-webkit-user-select: none;
			-webkit-touch-callout: none;        
			}

#sddm li a:hover, a:hover_effect
{	background: #49A3FF;}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	width: 20%;
	/*font-size: 18px;*/
	font-size: 16px;
	background: #EAEBD8;
	border: 1px solid #5970B2}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		/*font-size: 15px;*/
		font-size: 14px;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		/*font: 11px arial;*/}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF;}

		

    input#nicebutton{
    width:210px; /*same as the height*/
    height:30px; /*same as the width*/
    background-color:#CEF6F5;
    border:1px solid #CEF6F5; /*same colour as the background*/
    color:green;
    font-size:0.7em;
	font-weight:bold;
    /*set the border-radius at half the size of the width and height*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    /*give the button a small drop shadow*/
    -webkit-box-shadow: 0 0 7px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 7px rgba(0,0,0, .75);
    box-shadow: 2px 2px 10px rgba(0,0,0, .75);
    }
    /***NOW STYLE THE BUTTON'S HOVER STATE***/
    input#nicebutton:hover{
    background:#CEF0F0;
    border:1px solid #C0F0F0;
    /*reduce the size of the shadow to give a pushed effect*/
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    }
	
	


	
.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: orange;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
	
.popup {
  margin: 10px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 90%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
/*  position: absolute;
  top: 15px;
  right: 20px;
*/
  transition: all 200ms;
  font-size: 50px;
  font-weight: bold;
  text-decoration: none;
  color: red;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}