body {
  margin: 0px;
  padding: 0px;
  font-family: arial;
}

body.mainform {
  background: #ffffff url('images/bg.jpg') no-repeat;
  background-position: center top;
}

#header { height: 111px; }
#content { background:#ffffff; color: black; width: 744px; margin-left: auto; margin-right: auto;  font-size: .9em;
}


#nav  { position:absolute; right:5px; top:0;  background-color:#ffffffAA; color:gray; font-size: .9em; text-align:right;}
#nav ul {padding: .2em;margin:0;min-height:unset;}

#nav ul li a { color: #3366BB; display:block; width:100%; margin:.2em; padding:.4em; }
#nav ul li a:hover { color:white; background:#3366BB; }

#load { background:red; position:absolute; left:0; top:0; width:100px; height:20px; color:white; display:none; }
#nojavascript { background:red; color: white; text-align:center; margin: 3px;  }
#notproduction { background:transparent; color: green; text-align:center; margin: 3px; height:20px;}
#error { background:red; color: yellow; text-align:center; margin: 0px; padding: 2px; font-weight: bold; }
#errmsg { text-align: left; color: #DDDD88; font-weight: normal; margin-left: 50px; }
#message { background:white; color: green; text-align:center; margin: 3px; padding: 2px; font-weight: bold; }
#flags { background:#F3EDCB; color: brown; text-align:center; margin: 3px; padding: 2px; font-weight: bold; 
   border-top: solid 0px white;
   border-left: solid 0px #AAAAAA;
   border-right: solid 2px #AAAAAA;
   border-bottom: solid 2px #AAAAAA;}
#chargeform { margin-top: -10px; margin-bottom: -10px;}
#Xmenu { height: 40px }


form { margin: 10px; }


/*body{ font-family: tahoma, arial; background:#000000; color: red; margin: 0px; }*/
table { margin: 10px 0; /*border: solid 0px black;*/ width:100%; }
th, label { font-size: 0.9em; color: #3366BB; font-weight: bold; padding: 2px; height:18px }
div.e
form.td { /*font-size: 0.9em;*/ color: black; text-align: left; padding: 2px; }
h1 { margin:0; padding-top:10px;}
h3 { margin:0; color: #3366BB; xtext-align: center; xfont-weight:bold; }
p { margin:0; padding-top:10px; padding-left:10px; color: #3366BB; text-align: center; padding: 2px; }
img { border: 0;}
td.label, span.label { width: 80%;/* font-size: 0.8em;*/ font-weight: bold }

table.vertical th {
  width: 10%; 
  padding-right: .5em;
  text-align: right;
}

rem.td {  width: 20em; }

body.mainform input[type=text], body.mainform select { 
  color: black; 
  font-size: 0.85em; 
  font-weight: bold; 
}

body.mainform input[type=text], body.mainform select { 
  width: 20em; 
  border: 1px solid #3366BB;
  -webkit-border-radius: 3px;
  border-radius: 3px;   
  padding: 3px 5px;    
}

body.mainform select.expiry {
  width: 9.9em;
}

select { padding: 1px; }

input[type=button] { 
  background: #3366BB;
  color: white;
  padding: 3px 10px;
  margin: 5px;
  border: 0;
  cursor: pointer;
  font-size: 1em; 
}
input[type=button]:hover { 
  background: #1b3767;
}


input[type=submit] { 
  background: #3366BB;
  color: white;
  padding: 5px 18px;
  margin: 5px;
  border: 0;
  cursor: pointer;
  font-size: 1.2em; 
}

input[disabled=disabled], input:disabled {
  background: #DDD;
  cursor: not-allowed;
}

.content td { border-top: solid 2px white; border-left: solid 2px white; padding-right: 10px; }

.offers_div { 
   background: #F3EDCB; 
   border: 1px solid #3366BB;
   
   xborder-top: solid 0px white;
   xborder-left: solid 0px #AAAAAA;
   xborder-right: solid 2px #AAAAAA;
   xborder-bottom: solid 2px #AAAAAA;
   
   overflow:auto;
   max-height: 300px;
   width: 100%;
   
   border-radius: 5px;   
   -webkit-border-radius: 5px;
}

.text_right { text-align: right; }
.text_left { text-align: left; }

.offers_table caption { caption-side: top; text-align: center; color: #3366BB; font-size: 1.1em; font-weight: bold }
#offers_dialog .offers_table tbody tr:hover { background: #ffeb0033; }

#loadsetrform { width: 320px; margin: auto; }


#searchform { width: 320px; margin: auto; margin-top: -20px; }


.popup  { background: #F3EDCB; 
   border-top: solid 1px #AAAAAA;
   border-left: solid 1px #AAAAAA;
   border-right: solid 5px #AAAAAA;
   border-bottom: solid 5px #AAAAAA;
   position: absolute;
   max-height: 660px; 
   top: 250px; 
   min-width: 500px;
   max-width: 90%;
   left: 4%;
   padding: 5px;
}

.datepopup  { background: #F3EDCB; 
   border-top: solid 1px #AAAAAA;
   border-left: solid 1px #AAAAAA;
   border-right: solid 5px #AAAAAA;
   border-bottom: solid 5px #AAAAAA;
   position: absolute;
   max-height: 660px; 
   top: 70px; 
   min-width: 500px;
   max-width: 90%;
   left: 3%;
   padding: 5px;
}
.close_button { position:absolute; right:5px; top:5px; }
.print_button { position:absolute; right:85px; top:5px; }

.results_div  { overflow:auto;  border-top: solid 1px #AAAAAA;  width: 100%;  max-height: 625px; }
.results_table  { overflow:auto; padding: 0px;background:red; }
.results_th { color: #3366BB; text-align: left; font-weight: bold; padding: 2px; width: 10%; height:25px }
.results_td { padding-right: 10px;}

#offers_generic .add_button { font-size: 0.7em; height:20px ;margin-top:-5px; margin-bottom:-5px; }


/* tables sorting */
table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
  border-color: #999;
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	font-size: 8pt;
	padding: 4px 20px 4px 4px;
}
table.tablesorter thead tr .header {
	background-image: url(images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
   
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

.side_menu  {
position: absolute;
top: 5px;
left: 5px;
}

ul {list-style: none; min-height: 200px;}

ul li {
position: relative;
} 

ul li ul {
list-style: none;
position: absolute;
left: 0;
top: 0;
display: none;
}

.sm_header { 
  position: absolute; 
  left: 0; top: 0 ; 
  width: 2em; 
  height: 14em; 
  color: #FFF; 
  background: #333; 
  padding: 25px 10px 5px 10px; 
}
.sm_header:hover {
  cursor: pointer;
}
ul li.sm_item { 
  width: 200px; 
  border-bottom: 1px solid #FFF; 
  background: #333; 
  padding: 5px 5px 5px 10px;
}

ul li.sm_item:hover {
   color: #4BD8FF;
   text-decoration: none;
   background: #3C3C3C;
   cursor: pointer;
}

ul li:hover ul { display: block; } 
ul li:hover ul li ul { display: none; }
ul li ul li:hover ul { display: block; } 

#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
.edittable { xwidth:150px;}

/* DEBUG */
/*
#header { background:#f06699; }
#menu  { background:#DDFFFF; }
#entry  { background:#FFDDFF; }
#chargeform { background:#FFFFDD; margin-top: -10px; margin-bottom: -10px;}
*/

.xblockMsg { background; transparent;  }
.xblockUI h1 { color:red; }
#xbusy { width: 260px; height: 230px;}
#xbusyimg { height: 30px;}
.busy_img { position:absolute; right:10px; bottom:10px;  opacity: 0.4;}

/* 20200811 manage.php */
section.main {
  font-size: .9em;
  padding: 22px 30px 30px 30px;
}
/* ===================================================== DIALOG ==*/

.dialog {
  xdisplay: table;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9998; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
 
}
.dialog .dialog-wrapper {
  display: contents; 
  vertical-align: middle;
}
.dialog .dialog-wrapper .dialog-contents {
  position: relative;
  overflow: hidden;
  z-index: 9999;
  min-width: 300px;
  max-width: 800px;

  border-radius: 5px;
  background-color: #FFFFFF;
  box-shadow: 0 5px 10px 0 rgba(57,69,88,0.3);
  animation: fadeInDown 0.1s linear;
  margin: auto; 
  
  max-height: 90%;
  overflow: auto;
}
.dialog .dialog-wrapper .dialog-contents .dialog-header {
  background-color: #F9F9F9;
  background-color: #daf5ff;
  background-color: #EEEEEE;
  color: #333;
  padding: 4px 30px;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #DDD;
}
.dialog .dialog-wrapper .dialog-contents .dialog-header h1{
  color: #333;
  display: inline-block;
}
.dialog .dialog-wrapper .dialog-contents .dialog-header .dialog_id {
  color: #aaa;
  border: none;
  vertical-align: top;
  margin: .8em;
  background: transparent;
}
.dialog .dialog-wrapper .dialog-contents .dialog-header button{
  margin-top: 1em;
  float: right;
  background: #999;
}

.dialog .dialog-wrapper .dialog-contents .dialog-content h1 {
  padding-bottom: 15px;
}


.dialog .dialog-wrapper .dialog-contents .dialog-container {
  position: relative;
  overflow: hidden;
  padding: 20px 30px;
  border-bottom: 1px solid #EEEEEE;
  cursor: pointer;
} 
.dialog div .dialog-contents .dialog-action-links {
  background-color: #F9F9F9;
  padding: 20px 30px;
  border-radius: 0 0 5px 5px;
}
/* specific form widths */
#dialog_user_edit div section {  width: 600px; }


.btn_normal, .btn_small {
    display: inline-block;
    xmargin: 0;
    outline: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Source Sans Pro',sans-serif;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    letter-spacing: 0.02em;
    box-shadow: 0 0.45px 3px 0 rgba(57,69,88,0.3);
    box-sizing: border-box;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.btn_blue {
  background-color: #1892c0; background-color: #007bff;
}

.btn_normal {
  height: 42px;
  padding: 0 25px;
  font-size: 16px;
  xmargin-top: 28px;
}
i {
    color: #333;
    font-size: 9px;
}
.page_body h2 {
  display: inline-block;
}
.page_body #page_actions {
  float: right;
}