html,body{
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   font-family: Calibri, sans-serif;
   font-size: 14px;
}

body {
   margin: 0px;
   background-color: rgb(0, 0, 0);
   height: 100%;
   width: 100%;
}

div#wrapper{
  display: table;/*changes the div into a table layout. this now works on all browsers*/
  height: 100%; /*makes the div stretch the full height of the browser window*/
  width: 100%;
  margin: 0 auto; /*center aligning a div horizontally.*/
}

div#container{
 height: 100%;
 width: 100%;
 display: table-cell;/*displays the div as a table cell, thus making it a part of the table structure. */
 //vertical-align: middle;/*Vertically aligns the now div turned cell into the div turned table*/
 position: relative;/*it is necessary to use the position tag to make the table-cell code work*/
 text-align: center;/*this can be changed or removed as per your wish and website layout.*/
 margin: 0px auto;
}

.button-top {
  background: rgb(228, 228, 228);
  border-radius: 10px;
  margin-top: 5px;
  min-width: 200px;
}

.main_table {
  width: 100%;
  height: 100%;
  background-color: rgb(252, 252, 252);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgb(100, 100, 100);
  border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 0px;
}

.main_td {
  border: 1px solid black;
  border-radius-top-left: 5px;
  border-radius-top-right: 5px;
  -moz-border-radius: 5px;
  padding: 5px;
}

.button-bottom {
  color: rgb(248, 248, 248);
  background: rgb(33, 54, 95);
  border-radius: 10px;
  border: 1px solid rgb(45, 45, 45);
  margin-top: 5px;
  min-width: 150px;
}

.sales_table {
  width: 100%;
  height: 100%;
  background-color: rgb(238, 238, 238);
  padding: 0px;
}

.sales_td {
 /* background-color: rgb();*/
  color: rgb(45, 45, 45);
}

.sales_column {
  border: 1px solid rgb(200, 200, 200);
  text-align: center;
  padding: 2px;
}

.sales_column_head {
  font-family: arial, helvetica;
  border: 1px solid rgb(200, 200, 200);
  font-weight: bold;
  text-align: center;
  padding: 5px;
}

.section {
   width: 100%;
   min-height: 100%;
   border: 0px solid rgb(120, 120, 120);
   border-radius: 0px;
   background-color: rgb(0, 0, 0);
   text-align: center;
   margin: 0 auto;
}

.title {
   width: 99%;
   text-align: left;
   font-size: 18px;
   font-weight: bold;
   color: rgb(248, 248, 248);
   top: 0;
   position: fixed;
   padding-left: 14px;
   padding-right: 14px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   background: rgb(0, 0, 0);
   border-bottom: 1px solid rgb(150, 150, 150);
}       

.button-long {
    width: 125px;
    height: 35px;
    font-size: 80%;
    background: rgb(237, 237, 237);
    border-radius: 4px;
    text-align: left;
    overflow: hidden;
    border: 1px solid rgb(200, 200, 200);
}

.input_box {
    width: 200px;
    height: 30px;
    background-color: rgb(230, 239, 255);
    border: 1px solid rgb(150, 150, 150);
    border-radius: 5px; 
}

.data_row_title {
    width: 30%;
    text-align: right;
    vertical-align: middle;
    padding: 5px;
    font-weight: bold;
    background-color: rgb(248, 248, 248);
}

.data_row_data {
     vertical-align: middle;
     text-align: center;
     padding: 5px;
     background-color: rgb(252, 252, 252);
}

.ajax_content {
     width: 100%;
     margin: 0px auto;
}

.image_box {
     border: 10px solid rgb(0, 0, 0);
     background-color: rgb(0, 0, 0);
     width: 250px;
     height: 150px;
}

.image_box_inside {
     max-width: 250px;
     max-height: 188px;
}

.image_box_ranges {
     border: 1px solid rgb(210, 210, 210);
     background-color: rgb(255, 255, 255);
     width: 250px;
     height: 50px;
}

.main_body {
    width: 99%;
    min-height: 450px;
    background-color: rgb(0, 0, 0);
    border-radius: 5px;
    border: 0px solid rgb(150, 150, 150);
    margin: 0px auto;
}

.similar_box {
    background-color: rgb(255, 255, 255);
    width: 150px;
    vertical-align: middle;
    text-align: center;
}

.similar_image { 
    width: 80%;
    min-width: 50px;
    min-height: 60px;
}

.item_image {
    width: 15px;
    border: 1px solid rgb(220, 220, 220);
}

.main_content {
  display: table;/*changes the div into a table layout. this now works on all browsers*/
  height: 100%; /*makes the div stretch the full height of the browser window*/
  width: 100%;
  margin: 0 auto; /*center aligning a div horizontally.*/
}

.image_box_item {
     width: 150px;
     max-height: 188px;
}

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

.login_box {
  width: 25%;
  min-width: 423px;
  height: 250px;
  background-color: rgb(238, 238, 238);
  color: rgb(45, 45, 45);
  position: absolute;
  z-index: 15;
  top: 45%;
  left: 45%;
  margin: -100px 0 0 -150px;
  border-radius: 5px;
  text-align: center;
}

.title_search {
  color: rgb(248, 248, 248);
  font-weight: bold;
  font-size: 17px;
  font-style: italic;
}

.panel {
 background-color: rgb(248, 248, 248);
 width: 100%;
 border-radius: 5px;
 overflow: visible;
 scrolling: none;
}

.ajax_links {
 color: rgb(0, 0, 0);
 text-decoration: none;
}

.data_title {
 background-color: rgb(238, 238, 238);
}

.data_row {
 background-color: rgb(248, 248, 248);
}

.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}