* {
    font-family: "Lucida Grande","Tahoma","Lucida Sans Unicode","Tahoma","Verdana";
}

/* ---------------------- COMMON UTILITY CLASSES ----------------------  */
.left           { display: block; float: left;}
.right          { display: block; float: right;}
.invisible      { display: none;}
.padded         { padding: 10px;}
.specias        { margin: 10px;}
.padded-clear   { clear: both; padding: 5px 0px}
.clear          { clear: both; height: 0px; line-height: 0px}
.clear-left     { clear: left; }
.clear-right    { clear: right;}
.text-left		{ text-align: left !important;}
.text-right		{ text-align: right !important;}
.text-center	{ text-align: center;}
.transperent    { background: transparent !important; border-color: transparent !important;}

/* Colors */
.gray			{ color: gray;}
.green			{ color: green;}
.red			{ color: red;}
.jm-red			{ color: #eb2d2e;}

/* Lengths */
.px-80	{ display: block; width: 80px  !important;}
.px-100	{ display: block; width: 100px !important;}
.px-150	{ display: block; width: 150px !important;}
.px-200	{ display: block; width: 200px !important;}
.px-250	{ display: block; width: 250px !important;}
.px-300	{ display: block; width: 300px !important;}
.px-500	{ display: block; width: 500px !important;}

.pc-95	{ display: block; width: 95% !important;}
.pc-80	{ display: block; width: 80% !important;}
.pc-50	{ display: block; width: 50% !important;}
.pc-30	{ display: block; width: 30% !important;}

body{
	background:#ffffff;
	margin: 0px;
	font-family:tahoma;
	font-size:9pt;
	height:100%;
	width:100%;
}

h1{
	height:40px;	
}
h3{
	font-size: 14px;
	padding: 5px 0px;
	color: #666;
}

p{
	font-size: 12px;
	line-height: 110%;
	letter-spacing: .02em;
}

#wrapper{
	width:100%;
	height:100%;
	min-height:100%;
	position:absolute;
}

#header{
	font-family:tahoma;
	font-weight:bold;
	font-size:16pt;
}
#header-middle{
/*	background:url('../images/admin/banner-middle1.jpg');*/
	background:url('../images/admin/h-middle.jpg');
	/*background-repeat:repeat-x;*/
	/*text-align:left;*/
}
#header-right{
	text-align:right;
}

#footer{
	height:20px;
/*	background:url(../images/admin/footer.jpg);*/
	position:fixed;
	bottom:0%;
	width:100%;
}

th{
	background:url('../images/admin/mso-hd.gif');
	font-family:tahoma;
	font-weight:bold;
	font-size:9pt;
	height:25px;
}
.inputtext {
	margin-top: 2px; 
	width: 150px;
	border: #96a6c5 solid 1px;
	font-family:tahoma;
	font-size:9pt;
}
.inputpassword {
	margin-top: 2px;
	width: 150px;
	border: #96a6c5 solid 1px;
	font-family:tahoma;
	font-size:9pt;
}

.label {
	padding-left: 30px; 
	width: 150px; 
	color: #1d2a5b; 
	text-align: left;
}
.submitbutton{
	margin-top: 2px; 
	border: #96a6c5 solid 1px;
	background:#FFFFFF;
	font-family:tahoma;
	font-size:8pt;
	width: 100px;
}
select{
	border: #96a6c5 solid 1px;
	font-family:tahoma;
	font-size:9pt;
}
#error{
	border:#990000 1px solid;
	background:#FEEBEF;
	color:#A71230;
}

#menu{
	width: 100%;
	/*display: inline-block;*/
	margin-left: auto;
    margin-right: auto;
	text-align: center;
}

/* autocomplete */
.ac_input {
    width: 160px;
}
.ac_results {
    padding: 0px;
    border: 2px solid #C5E0FC;
    background-color: #fff;
    overflow: hidden;
}
.ac_results ul {
    width: 100%;
    text-align: left;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac_results iframe {
    display:none;/*sorry for IE5*/
    display/**/:block;/*sorry for IE5*/
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    filter:mask();
    width:3000px;
    height:3000px;
}
.ac_results li {
    margin: 0px;
    padding: 2px 5px;
    cursor: pointer;
    display: block;
    width: 100%;
    font: menu;
    font-size: 12px;
    overflow: hidden;
}
.ac_loading {
    background : url('../images/indicator.gif') right center no-repeat;
}
.ac_over {
    background-color: Highlight;
    color: HighlightText;
}


/* autocomplete factory */
.ac_input_factory {
    width: 350px;
}
.ac_results_factory {
    padding: 0px;
    border: 2px solid #C5E0FC;
    background-color: #fff;
    overflow: hidden;
}
.ac_results_factory ul {
    width: 100%;
    text-align: left;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac_results_factory iframe {
    display:none;/*sorry for IE5*/
    display/**/:block;/*sorry for IE5*/
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    filter:mask();
    width:3000px;
    height:3000px;
}
.ac_results_factory li {
    margin: 0px;
    padding: 2px 5px;
    cursor: pointer;
    display: block;
    width: 100%;
    font: menu;
    font-size: 12px;
    overflow: hidden;
}
.ac_loading_factory {
    background : url('../images/indicator.gif') right center no-repeat;
}
.ac_over_factory {
    background-color: Highlight;
    color: HighlightText;
}

/* autocomplete employee */
.ac_input_employee {
    width: 350px;
}
.ac_results_employee {
    padding: 0px;
    border: 2px solid #C5E0FC;
    background-color: #fff;
    overflow: hidden;
}
.ac_results_employee ul {
    width: 100%;
    text-align: left;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac_results_employee iframe {
    display:none;/*sorry for IE5*/
    display/**/:block;/*sorry for IE5*/
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    filter:mask();
    width:3000px;
    height:3000px;
}
.ac_results_employee li {
    margin: 0px;
    padding: 2px 5px;
    cursor: pointer;
    display: block;
    width: 100%;
    font: menu;
    font-size: 12px;
    overflow: hidden;
}
.ac_loading_employee {
    background : url('../images/indicator.gif') right center no-repeat;
}
.ac_over_employee {
    background-color: Highlight;
    color: HighlightText;
}

/* autocomplete buyer */
.ac_input_buyer {
    width: 350px;
}
.ac_results_buyer {
    padding: 0px;
    border: 2px solid #C5E0FC;
    background-color: #fff;
    overflow: hidden;
}
.ac_results_buyer ul {
    width: 100%;
    text-align: left;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac_results_buyer iframe {
    display:none;/*sorry for IE5*/
    display/**/:block;/*sorry for IE5*/
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    filter:mask();
    width:3000px;
    height:3000px;
}
.ac_results_buyer li {
    margin: 0px;
    padding: 2px 5px;
    cursor: pointer;
    display: block;
    width: 100%;
    font: menu;
    font-size: 12px;
    overflow: hidden;
}
.ac_loading_buyer {
    background : url('../images/indicator.gif') right center no-repeat;
}
.ac_over_buyer {
    background-color: Highlight;
    color: HighlightText;
}

/* autocomplete factory */
.ac_input_defect_item {
    width: 350px;
}
.ac_results_defect_item {
    padding: 0px;
    border: 2px solid #C5E0FC;
    background-color: #fff;
    overflow: hidden;
}
.ac_results_defect_item ul {
    width: 100%;
    text-align: left;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac_results_defect_item iframe {
    display:none;/*sorry for IE5*/
    display/**/:block;/*sorry for IE5*/
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    filter:mask();
    width:3000px;
    height:3000px;
}
.ac_results_defect_item li {
    margin: 0px;
    padding: 2px 5px;
    cursor: pointer;
    display: block;
    width: 100%;
    font: menu;
    font-size: 12px;
    overflow: hidden;
}
.ac_loading_defect_item {
    background : url('../images/indicator.gif') right center no-repeat;
}
.ac_over_defect_item {
    background-color: Highlight;
    color: HighlightText;
}



.odd{background-color: white;}
.even{background-color:#F6F6FF;}


/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
	display: none;
}

#rowData th, #rowData td{
   padding:0.8em;
   border:1px #C5E0FC solid;
}
/* defect name rotate */
.rotate {
	height:256px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	width: 1.5em;
}

.rotate div {
    -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
    -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
	-webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE8 */
    margin-left: -10em;
    margin-right: -10em;
}

.rotator div {
    -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
    -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
	-webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE8 */
    margin-left: -10em;
    margin-right: -10em;
}





.container {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.cell {
  color: white;
  font-size: 3rem;
  text-align: center;
  padding: 4rem;
}
.cell-1 {
  background: deepskyblue;
}
.cell-2 {
  background: orangered;
}
.cell-3 {
  background: royalblue;
}
.cell-4 {
  background: gold;
}
.cell-5 {
  background: blueviolet;
}
.cell-6 {
  background: limegreen;
}
.cell-7 {
  background: coral;
}
.cell-8 {
  background: lightseagreen;
}
.cell-9 {
  background: maroon;
}