/* COLOURS

NAVY BLUE: #0E53A0
BLUE: #0392CD
LIGHT BLUE: #78B9E3
V LIGHT BLUE #D6F7FF

*/

body {
  /*background: #ffffff url('images/bg.jpg') no-repeat;*/

  margin: 0px;
  padding: 0px;
  background-position: center top;
  background:#F9F9F9;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  font-weight:bold;
  
  /* force footer to bottom, works with div::flex-grow:1 just above footer */
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between
} 


#footer { 
  background:#333; 
  color:#999; 
  text-align:center;
  font-size: 9px;
  padding:5px ;
  width:100%;
  display: inline-block;
}
#footer i { color: #999; }



header {
    xbackground-color: #000;
    xheight: 67px;
    height: auto;
    width: auto;
    margin-top: 0;
    xpadding-bottom: 20px;
    xpadding: 0 17px;
    position: relative;
}
header .headermain {
  background-color: #000;
}
header .headermain > div {
    xheight: 94px;
    height: auto;
    xpadding-bottom: 10px;
    margin: 0 auto;
    position: relative;
    max-width: 944px;
    display:block;
}
header .logo {
    height: auto;
    padding-left: 0;
    left: 0;
}
header .logo .countryname {
    color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 17px;
    font-weight: bold;
    line-height: 27px;
    padding-left: 2px;
    vertical-align: middle;
}
header .logo .corplogo {
    padding-left: 6px;
    padding-right: 17px;
}
header .logo .corplogodivided {
    display: inline;
    height: 61px;
    margin-top: 0;
    padding-right: 8px;
    padding-top: 0;
    width: 6px;
}
header .logo img {
    border: 0 none;
    vertical-align: middle;
}
header .logo a {
    color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 17px;
    font-weight: bold;
    line-height: 27px;
    padding-left: 2px;
    border: 0 none;
    vertical-align: middle;
    text-decoration: none;
}
header .logo a:hover {
    border: 0 none;
    font-family: Arial,Helvetica,sans-serif;
    vertical-align: middle;
}

.right { float: right; }
.center { display: table; margin: 0 auto; }

header .profile-menu {
  xposition: relative;
  xfloat: right;
  
  position: absolute;
  right: 0;
  top: 0;  
}

header .profile-menu>.profile-image {
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 40px;
  margin: 10px;
}

header .profile-image {
  overflow: hidden;
  position: relative;
  display: block;
  width: 120px;
  height: 120px;
  line-height: 116px;
  margin: 0 auto;
  border-radius: 50%;
  text-align: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 2px rgba(57,69,88,0.4);
  box-sizing: border-box;
}

header .profile-image span {
  display: block;
  height: 100%;
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  background-color: #1892c0; background-color: #007bffaa;
}

header .profile-image span {
  display: block;
  height: 100%;
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  background-color: #1892c0; background-color: #007bffaa;
}

header .profile-image-medium {
  width: 80px;
  height: 80px;
  line-height: 76px;
}

header .profile-image-medium span {
  font-size: 40px;
}
header .profile-image-small span {
  font-size: 30px;
  padding-top: 3px;
}


header .profile-menu-account {
  position: relative;
  overflow: hidden;
  padding: 20px 30px;
  border-bottom: 1px solid #EEEEEE;
  cursor: pointer;
}
header .profile-menu-account .profile-image {
  float: left;
  margin: 10px 20px 0 0;
}
header .profile-menu-account h2 {
  font-size: 22px;
  font-weight: 400;
  color: #394558;
  margin-bottom: 0;
}
header .profile-menu-account.is-logged-in .email {
  margin-left: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header .profile-menu .profile-menu-dropdown {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  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 */
}

header .profile-menu .profile-menu-dropdown .profile-menu-contents {
  position: absolute;
  right: 20px;
  top: 80px;
  width: 400px;
  margin-top: 20px;
  border-radius: 5px;
  background-color: #FFFFFF;
  box-shadow: 0 5px 10px 0 rgba(57,69,88,0.3);
  z-index: 9999;
  -webkit-animation: fadeInDown 0.1s;
  -moz-animation: fadeInDown 0.1s;
  animation: fadeInDown 0.1s;
}

header .profile-menu-account:first-child {
  border-radius: 5px 5px 0 0;
}

header .profile-menu .profile-menu-dropdown .profile-menu-action-links {
  background-color: #F9F9F9;
  padding: 20px 30px;
  border-radius: 0 0 5px 5px;
}

.float-right {
  float: right;
}

header .profile-menu-account .user-edit {
  float: right;
}




















/*
.usr  { 
   color:gray; font-size: 10px; vertical-align: top; padding-right: 16px; position: absolute;
       right: 5px;
    top: 5px;
}
*/
.metalinks {
  color: #FFFFFF;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 10px;
  margin-left: 0;
  margin-top: 0;
  padding-right: 16px;
  position: absolute;
  right: 80px;
  top: 10px;
  vertical-align: bottom;
}
.metalinks a, .metalinks a:visited{ font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration:none;}
.metalinks a:hover{ font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration:underline;}
.metalinks img{ border:0px; }


/* ===================================================== NOTES ==*/
.notes { display: inline-block; font-size: .8em; position: fixed; z-index: 9999; margin: 5px;}
.notes pre { font-size: inherit; color: yellow; width: auto; background-color: rgba(20, 20, 100, 0.8);max-height:400px;max-width:400px;}
.notes pre.warning { font-size: 2em; font-weight:bold; color: yellow; background-color: black;}


.phperror {
  xposition: fixed;
  z-index: 999999;
  xtop: 80px;
  xleft: 10%;
  xwidth: 80%;
  padding: 2px;
  margin: 0;
  color: darkred;
  background-color: rgba(255,255,0,0.8);
}

#message_div {
  padding: 2px;
  margin: 0;
  color: green;
  background: rgba(255, 254, 208, 0.7);
}

#message_div p { 
  color: darkgreen;
  font-size: 1.2em;
  display: inline-block;
  margin: .5em;
  vertical-align:top;
}
#message_div svg, #message_div span { 
  color: green;
}
#message_div p #message_msg { 
  font-size: .8em;
}
#message_div span.right, #error_div span.right {
  font-size:.8em;
  cursor: pointer;
}

.msg_dismiss  {
  margin-top:5px;
}

#error_div {
  padding: 2px;
  margin: 0;
  color: red;
  background: rgba(255,255,0,0.7);
  background-color: rgba(255, 190, 190, 0.7);
}

#error_div p { 
  color: darkred;
  display: inline-block;
}

#error_div svg, #error_div span { 
  color: red;
}


.error {
  padding: 2px 4px;
  margin: 0;
  color: red;
  font-size:1.1em;
  font-weight:bold;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,0,0.6), rgba(255,255,0,0.6), rgba(255,0,0,0));
  text-align: center;
}
.error::before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f071";
  padding-right: 4px;
  display:none;
}

z#error { 
  background:red; 
  color: yellow; 
  text-align:center; 
  margin: 0px auto; 
  padding: 0px; 
  font-size: 14px; 
  font-weight: bold;
  xwidth: 90%;
  border-radius: 6px;
}

#content { 
  background:#eee; 
  xcolor: #32a7de; 
  font-size: .9em; 
  xmin-height: 500px;
  padding: 22px 30px 30px 30px;  
  -webkit-transform: translateZ(0);
}

#fill {
  flex-grow:1; 
  background:#eee;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 0 1px rgba(0,0,0, .75);
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
#content {
  padding-top: .5rem;
}

.sticky + #content {
  padding-top: 60px;
}

_affects_dashboard_a_span_#content span { color: grey; }

#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;  }

#debug { position:absolute; right:5px; top:90;  background-color:#DEF; color:gray; font-size: .7em; width: 300px; padding:10px; z-index:999;}


div#flags {
  display: inline-block;
  margin: 0 20px;
  padding: 3px 6px;
  color: #8a6d3b;
  font-weight: 600; 
  background: rgba(255,255,180,0.1);
  border: 1px #8a6d3b solid;
  border-radius: 3px;
}
div#flags #flagmsg::before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f11e";
  padding-right: 4px;
}



label {
  margin-top: 5px;
  margin-bottom: 0px;
  font-size:.9em;
}

span.edittable { color: #337ab7; color: #007bff; }
span#countryspan { color: #337ab7; color: #007bff; }

th { font-size: 0.9em; color: #337ab7; color: #007bff; text-align: left; font-weight: bold; padding: 2px; height:25px }


p{color:#333;padding:0;margin:0;text-align: left;}
table p {text-align:center; background:#1892c07a; background:#007bffaa;}
img { border: 0;}
td.label, span.label { width: 80%;/* font-size: 0.8em;*/ font-weight: bold }
input, select { color: black; font-size: 0.85em; font-weight: bold }
select { padding: 1px; }
i { color:#333;font-size:9px;}
img {border: 0 none;}


/* Start Menu CSS */

#menu {
  clear: both; 
  width: 100%; 
  height:auto;
  margin:0 auto; 
  background-color:#333;
  z-index:999;
  font:12px Tahoma, Sans-serif;
  min-height: 28px;
}

#menu a  { 
  color: #FFF; 
  text-decoration:none; 
  white-space:nowrap;
  border-bottom: 2px solid transparent;
  background-color:#333;
}

#menu  a:hover {
  color: #FFF;
  background: #0E53A0; 
  text-decoration:none; 
  white-space:nowrap;
  border-bottom: 2px solid #f70;
}

#menu ul { padding:0; margin:0; height: 28px; }
#menu ul ul {height: auto; }

#menu li { position:relative; float:left; list-style-type:none; width: auto; xheight: 28px;}

#menu ul:after { content:"."; display:block; xheight:0; clear:both; visibility:hidden; }

#menu li a { display:block; padding:6px 25px; text-decoration:none; border-right:1px solid #999;}

#menu li a.last{ border-right: 0px gray solid;}

#menu li a:focus { 
  outline:none;
  color: #FFF;
  background: #0E53A0;
}

#menu li:first-child a { border-left:none; }
#menu li.last a { border-right:none; }
#menu a span { display: inline-block; margin-left:5px; -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }

#menu ul ul { 
  display:none; 
  position:absolute; 
  left:0; 
  z-index: 999;
}
#menu ul ul li { float:none;}
#menu ul ul a { padding:6px 10px; 
  margin: 0 auto; 
  border-left:none; 
  border-right:none; 
  background-color: #444;
}

#menu .active {
  background-color: #4CAF50;
  color: white;
}



@media screen and (min-width: 1246px) { #menu li a {  padding: 6px 25px; } }
@media screen and (max-width: 1246px) { #menu li a {  padding: 6px 15px; } }
@media screen and (max-width: 1100px)  { #menu li a {  padding: 6px 10px; } .dashboard a {font-size: .8em;} }
@media screen and (max-width: 1000px)  { #menu > div.topnav > ul > li > a > svg { display:none; } }


/* Hide the link that should open and close the topnav hamburger icon on small screens */
.topnav .icon {
  display: none;
  font-size: 1.8em;
  padding: 0 5px;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  #menu .topnav ul li:not(:first-child) {display: none;}
  #menu  .topnav ul {
    height: 0;
  }
  #menu .topnav a.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 650px) {
  #menu  .topnav.responsive {position: relative;}
  #menu  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  #menu  .topnav.responsive ul {
    height: auto;
  }

  #menu  .topnav.responsive ul li {
    float: none;
    display: block;
    text-align: left;
  }
  #menu  .topnav.responsive  ul ul { 
    width: 100%;
  }
  #menu > div > div.menuleft > ul > li > a > svg { display:inherit; }
}






















.results_div  { border-top: solid 0px #AAAAAA;  width: 100%; }
/*
.results_div div.bootstrap-table { width: auto; margin: 0 20px;}
.results_div div.bootstrap-table table { background: white; color: #333;}
.results_div div.bootstrap-table i { color: #333; }
.results_div div.bootstrap-table th { color: #195c88; }

.results_div div.bootstrap-table table>tbody>tr>td {
  border-left: none;
}
*/
/* SE 20190308 New formatting to suite datatables.net table output END */

.nowrap {
  white-space: nowrap;
}

.bootstrap-table {
  margin-bottom:1em; 
}

.bootstrap-table div.fixed-table-toolbar {
  float: right; /* ensure this is aligned with top paginiation bar */
}

.bootstrap-table .table {
  background: white;
}

.bootstrap-table .table-bordered {
  border: none;
}

.bootstrap-table .table tr {
  border-top: 1px solid #DDD;
}


.bootstrap-table .table th {
  padding: .2rem .75rem;
  font-size: 1em;
}

.bootstrap-table .table td {
  padding: .2rem .75rem;
  font-size: .9em;
}


.bootstrap-table .fixed-table-container .table tfoot th .th-inner {
  padding: .4rem 0;
  font-weight:bold;
  font-size: 1em;
}


#menu a span.mi-note {
  color: orange;
  font-size: .6rem;
  transform: rotate(-35deg);
  margin-left: -2px;
}


#output_div { 
  margin: 10px auto; 
  padding: 5px;
  border-radius: 4px;
  xwidth:95%; 
  background-color: rgba(222,222,222,0.1);/* slighly transparent white */
}


#email_details {
  padding: 0 50px;
}
/*  MikeP 20191202 No Longer Needed

#campaign_details {
  padding: 0 50px;
}

#campaign_details input[type="button"] {
  cursor:pointer; 
  padding:5px 25px; 
  background:#35b128; 
  border-radius: 5px;
  box-shadow: none;
  border-width: 1px;
  border-style: solid;
  border-color: #33842a;
  border-image: initial;
  color:#f3f3f3;
  font-size:1.1em;
}

#campaign_details input[type="button"]:hover, .edit_details input[type="button"]:focus{
  background-color :#399630;
  xbox-shadow: 0 0 1px rgba(0,0,0, .75);
  box-shadow: none;
}

#campaign_details input[type="button"].small {
  border-radius: 3px;
  padding:2px 5px;
  font-size:.8em;
  width: 24px;
}

#file_details {
  padding: 0 50px;
}

#file_details input[type="button"] {
  margin-top: 50px;
  cursor:pointer; 
  padding:5px 25px; 
  background:#35b128; 
  border-radius: 5px;
  box-shadow: none;
  border-width: 1px;
  border-style: solid;
  border-color: #33842a;
  border-image: initial;
  color:#f3f3f3;
  font-size:1.1em;
  display:inline-block;
}

#ddcsavebtn {
  display: inline-block;
  margin-right: 20px;
}

#ddcdeletebtn {
  display: inline-block;
}

#ddcsavebtn input[type="button"] {
  cursor:pointer; 
  width: 100px; 
  background:#35b128; 
  border-radius: 5px;
  box-shadow: none;
  border-width: 1px;
  border-style: solid;
  border-color: #33842a;
  border-image: initial;
  color:#f3f3f3;
  font-size:1.1em;
}
  
#ddcdeletebtn input[type="button"]{
  cursor:pointer; 
  width: 100px; 
  background:#ff0000; 
  border-radius: 5px;
  box-shadow: none;
  border-width: 1px;
  border-style: solid;
  border-color: #740000;
  border-image: initial;
  color:#f3f3f3;
  font-size:1.1em;
}  

#ddcsavebtn input[type="button"]:hover, #ddcsavebtn input[type="button"]:focus{
  background-color :#399630;
  xbox-shadow: 0 0 1px rgba(0,0,0, .75);
  box-shadow: none;
}

#ddcdeletebtn input[type="button"]:hover, #ddcdeletebtn input[type="button"]:focus{
  background-color :#bf0000;
  xbox-shadow: 0 0 1px rgba(0,0,0, .75);
  box-shadow: none;
}
*/

input.btn {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

/*
#file_details input[type="button"]:hover, .edit_details input[type="button"]:focus{
  background-color :#399630;
  xbox-shadow: 0 0 1px rgba(0,0,0, .75);
  box-shadow: none;
}
*/
#file_details input[type="button"].small {
  border-radius: 3px;
  padding:2px 5px;
  font-size:.8em;
  width: 24px;
}

.dashboard {
  xbackground: pink;
  padding: 10px;
}
.dashboard .row div {
  xbackground: blue;  
}

.dashboard .row div {
  xbackground: silver;  
  height: 10em;
}

.dashboard a {
  xbackground: brown;
  color: #333;
  color: #337ab7; color: #007bff;
  text-decoration: none;
}

/*
  .dashboard a:focus, .dashboard a:hover  {
    color: #b4052c;
    
  }
  */

.dashboard a span {
  display: block;
  transform: rotate(0deg) scale(1);
}

.dashboard a {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
  transition:         transform .8s ease-in-out;
  display: inline-block;
  
  transition: all .2s ease-in-out;
}


.dashboard a:hover {
  color: #b4052c;
  color: #f70;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg) scale(1.3);
  z-index:999;

}

a:hover {
  color: #f70;
}












.results_table  { 
  padding: 0px;
  border: 1px solid #ccc;
}

/*.results_th { color: #3366BB; text-align: left; font-weight: bold; padding: 2px; width: 10%; height:25px }*/
.results_th { background-color: #1892c07a; background-color: #007bffaa; text-align: left; font-weight: bold; xborder: 1px solid #FFF; font-size: 8pt; height:10px;}
.results_td { border-top: solid 0px white; border-left: solid 0px white; }

.results_cc_th { background-color: #1892c07a; background-color: #007bffaa; color: #ffffff; text-align: left; font-weight: bold; xborder: 1px solid #FFF; font-size: 10pt; height:10px; padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom:3px;}
.results_cc_td { border-top: solid 0px white; border-left: solid 0px white; padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom:3px; }


thead { height:35px; }
/* 
x.results_div h1 { color: #333; width:100%; xtext-align: center; font-size: 3em;}
x.results_div h2 { color: #333; width:100%; xtext-align: center; font-size: 2em;}
x.results_div h3 { color: #333; width:100%; xtext-align: center; font-size: 1.5em;}
*/
/*.results_th:hover{background-color: #0E53A0;} */

.filter_table  { padding: 0px; margin: 0px auto 0px auto; border: 0px solid; }

.filter_th { color: #78B9E3; text-align: right; font-weight: bold; padding: 0 5px;}

.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;
}

.close_button { position:absolute; right:5px; top:5px; }
.print_button { position:absolute; right:85px; top:5px; }

.popup_results_div  { overflow:auto;  border-top: solid 1px #AAAAAA;  width: 100%;  max-height: 625px; }
/*.popup_results_table  { overflow:auto; padding: 0px; }*/
.popup_results_div  { overflow:auto;  border-top: solid 1px #AAAAAA;  width: 100%;  max-height: 625px; }
.popup_results_table  { overflow:auto; padding: 0px; }


table.info_table {	margin:0;	font-size: 8pt;	width: 100%; }
table.info_table th {text-align: right;}
table.info_table td {text-align: left;}


/* tables scrolling */

.table_div {
  overflow: auto;
  max-height: 40em;
    width: fit-content;
    width: -moz-fit-content;
  display:table;
  max-width: 100%;
  margin: 10px auto 0 auto;
  /* moved border only to results_table (radius doesnt work on tables)
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  */
}

/* tables scrolling with fixed thead - forces fixed width columns....
 * https://jsfiddle.net/tsayen/xuvsncr2/28/
 */
 /*
.table_div {
  xresize: vertical;
  xoverflow: auto;
  xmax-height: 400px;
  xwidth: fit-content;
  xmargin: 0 auto;
  height: 20em;
}
.table-container {
    height: 10em;
}
table.tablesorter {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table.tablesorter thead {
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table.tablesorter tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table.tablesorter tbody tr {
    width: 100%;
}
table.tablesorter thead,
table.tablesorter tbody tr {
    display: table;
    table-layout: fixed;
}
*/





/* tables sorting */
table.tablesorter {
  xbackground-color: #78B9E3;
  background-color: #FFF;
  xmargin:10px auto 15px auto;
  margin: 0px auto;
  font-size: .8em;
  text-align: left;
  xwidth: 100%;
  border: 1px solid #ccc;
}


table.tablesorter thead tr th, table.tablesorter tfoot tr th {
   background-color: #e6EEEE;
   background-color: #1892c07a; background-color: #007bffaa;
   border: 1px solid #1892c07a; border: 1px solid #007bffaa;
   font-size: 1.1em;
   padding: 4px 20px 4px 4px;
}
table.tablesorter thead th, .results_th {
  color: #202020;
}
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: #444;
  padding: 4px;
  background: transparent;
  vertical-align: middle;
  font-size: 1em;
}
table.tablesorter.large tbody td {
  font-size: 1.2em;
}

table.tablesorter tbody tr.normal td {  }
table.tablesorter tbody tr.blue td { color: #191de4;}
table.tablesorter tbody tr.magenta td { color: magenta; }
table.tablesorter tbody tr.purple td { color: #bd57bd; }
table.tablesorter tbody tr.red td { color: darkred; }
table.tablesorter tbody tr.green td { color: darkgreen; }
table.tablesorter tbody tr.silver td { color: #888; }


table.tablesorter tbody td pre { overflow: scroll; background: yellow; height: 300px; overflow: auto;}

table.tablesorter  tbody td.results_bg0{ background-color: #DFDFDF; }
table.tablesorter  tbody td.results_bg1{ background-color: #FFFFFF; }


xtable.tablesorter tbody tr.odd td, 
table.tablesorter tbody tr:nth-child(even) {
  background-color:#eff8ff;
}
table.tablesorter tbody tr:hover {
  background: #fffed4;
}

table.tablesorter tbody td a {
  text-decoration: none;
}

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: #1892c07a; background-color: #007bffaa;
  color: #F0F0F0;
}


table.tablesorter tbody tr  {
  background:#FFF;
}
table.tablesorter td  {
  font-size: 1.1em;
  padding: 4px;
  background: transparent;
  vertical-align: middle;
}

table.tablesorter tfoot td { color:#000; }
xtable.tablesorter tfoot tr:last-child  td { background-color:#1892c07a; background-color:#007bffaa; color:#FFF; }
table.tablesorter tfoot tr:nth-child(2) td { background-color:#1892c07a; background-color:#007bffaa; color:#FFF; }

#xoffersdiv {
  overflow: auto;
  margin-bottom: 10px;
  max-height: 440px;
}

table#offers {
  font-size: 1.1em;
  overflow: auto;
  width: 100%;
  margin: 5px auto 5px auto;
  text-align: left;  
}




table#order_summary_table {
  border-collapse: separate;
  margin: 0 0 0 0;
  text-align: left;
  width: 100%;
  overflow: hidden;
}
table#order_summary_table th{
  font-weight: 700;
  text-transform: uppercase;
  color: #666666;
  line-height: 18px;
  padding: 20px;
  background: #f9f9f9;
}
table#order_summary_table td {
  background: #ffffff;
  padding: 0px 20px;
  border-top: 1px solid #efefef;
  padding: 20px;
  vertical-align: middle;
}
table#order_summary_table td svg {
  margin: 0px 5px;
}
table#order_summary_table td span.cart_total_amt {
  font-size: 1.2em;
}

input[type=checkbox].form-control {
  box-shadow: none;
  xwidth: 34px;
  xheight: 34px;
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

div.checkbox-div {
  margin-bottom: 3px;
}

div.checkbox-div label {
  vertical-align: middle;
}

.action_btn {
   background: #222;
   display: inline-block;
   padding: 4px 10px 3px;
   color: #fff;
   text-decoration: none;
   font-weight: bold;
   line-height: 1;

   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   
   -moz-box-shadow: 0 1px 3px #999;
   -webkit-box-shadow: 0 1px 3px #999;
   text-shadow: 0 -1px 1px #222;
   
   border-bottom: 1px solid #222;
   position: relative;
   cursor: pointer;

   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

   border: 0px;   
   border-bottom: 1px solid rgba(0,0,0,0.25);  
   margin:-2px auto;   
}


/* Sizes ---------- */
.small.action_btn {
   font-size: 8px;
}
.medium.action_btn {
   font-size: 13px;
}
.large.action_btn {
   font-size: 14px;
   padding: 8px 14px 9px;
}

/* Colors ---------- */
.red {
  color: #e33100;
}
.blue {
  color: #337ab7; color: #007bff;
}
.green {
  color: darkgreen;
}

.blue.action_btn {
  background-color: #2daebf;
}
.red.action_btn {
  background-color: #e33100;
}
.magenta.action_btn {
  background-color: #a9014b;
}
.orange.action_btn {
  background-color: #ff5c00;
}
.yellow.action_btn {
  background-color: #ffb515;
}

.action_btn:hover {
   background: #111111;
   color: #ffffff;
}


.orange.action_btn:hover {
   background: #872300;
   color: #ffffff;
}


/*-------------------------
    Dropbox Element
--------------------------*/
#dropbox {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 300px;
  border: 2px solid #DDD;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background-color: #FEFFEC;
  text-align: center;
  color: #BBB;
  font-size: 1em;
  font-family: Arial, sans-serif;
}

#progressbar {
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  top: 75%;
}

#droplabel {
  position: relative;
  top: 40%;
}

#import_results {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  min-height: 200px;
  border: 2px solid #DDD;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background-color: #FEFFEC;
  text-align: left;
  color: #333;
  font-size: .8em;
  font-family: Arial, sans-serif;
}

#txtpreview {
  height: 1000px;
}
#txtcsv {
  height: 1000px;
}



#form_inputs_div {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  min-width: 550px;
}

#form_inputs_div  div{
  width: 550px;
  display:inline-block;
}

#form_inputs_div input[type="text"], #form_inputs_div input[type="email"], #form_inputs_div .html_code_textarea {
  background: white;
  height: 100%;
  margin: 2px 0 16px 0;
  font-size: 1em;
  border: 1px solid #DADADA;
  color: #666;
  height: 30px;
  outline: 0 none;
  padding: 3px;
  width: 390px;
  line-height:15px;
  box-shadow: inset 0px 1px 4px #ECECEC;
  -moz-box-shadow: inset 0px 1px 4px #ECECEC;
  -webkit-box-shadow: inset 0px 1px 4px #ECECEC;  
  border-radius: 3px;
}

#form_inputs_div input[type="text"][readonly] {
  color:#399630;
}


#form_inputs_div div span{
  display:inline-block;
  color: #DDD;
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 7px 3px 3px 5px;
}


#form_inputs_div div label{
  display:inline-block;
  float:left;
  width: 125px;
  font-size: none;
  margin: 0;
  font-size: 1em;
  padding-right: 10px;
  margin-top: 10px;
}

#email_details input[type="button"] {
  cursor:pointer; 
  padding:5px 25px; 
  background:#35b128; 
  border-radius: 5px;
  box-shadow: none;
  border-width: 1px;
  border-style: solid;
  border-color: #33842a;
  border-image: initial;
  color:#f3f3f3;
  font-size:1.1em;
}

#email_details input[type="button"]:hover, .edit_details input[type="button"]:focus{
  background-color :#399630;
  xbox-shadow: 0 0 1px rgba(0,0,0, .75);
  box-shadow: none;
}

#email_details input[type="button"].small {
  border-radius: 3px;
  padding:2px 5px;
  font-size:.8em;
  width: 24px;
}

#font_size_div {
  position: relative;
  float: right;
  margin-top: -25px;
}

.html_code_textarea {
  color: #333;
  background-color: white;
  margin:10px auto 15px auto;
  font-size: 1em;
  line-height: 1.1em;
  width: 100%;
  padding: 10px;
  text-align: left;
  overflow: auto;
  height: 300px;
  border: 1px solid #DADADA;
  border-radius: 3px;
}

.html_code_div {
  background-color: #78B9E3;
  margin:10px auto 15px auto;
  font-size: 8pt;
  width: 100%;
  text-align: left;
  resize: both;
  overflow: hidden;
  height: 300px;
  border: 1px solid #DADADA;
  border-radius: 3px;
}

#html_code_iframe {
  width:100%;
  height: 100%;
  overflow:hidden;
  border: none;
}

/* .edit_details input[type="text"]:invalid, .edit_details input[type="text"]:-moz-submit-invalid, .edit_details input[type="text"]:-moz-ui-invalid { */ 
/*.edit_details input:invalid, .edit_details input:-moz-submit-invalid, .edit_details input:-moz-ui-invalid { */
#form_inputs_div input:invalid, .edit_details input:invalid {
  color: red;
  -webkit-box-shadow: 0px 0px 2px 2px rgba(232,0,0,1);
  -moz-box-shadow: 0px 0px 4px 2px rgba(232,0,0,1);
  box-shadow: 0px 0px 4px 2px rgba(232,0,0,1);
}

.filter_div { text-align: center; }

input.ui-button { margin: 0 .5rem }

a.fa { color: grey; text-decoration:none; }
a.fa.green { color: green; }
a.fa.red { color: red; }

input[type="button"] .fa { color: grey; text-decoration:none; }
input[type="button"] .fa.green { color: green; }
input[type="button"] .fa.red { color: red; }

input[type="text"].red { color: red; }
input[type="text"].green { color: darkgreen; }

tbody > tr > td.results_td > input[type="text"]  { 
  width: 95%;
  height: 100%;
  padding: 5px 0px 5px 5px;
  border: 1px #BBB solid;
  background: white;
}

.view_acct_transactions {
  cursor: pointer;
}

section {
  display: grid;
}

.negBlock h3 {
  display: inline-block;
  margin-top: .8em;
}
.negBlock .btn.right {
  margin: 5px;
}

.formBlock  {
  background-color: #FFF;
  padding: 10px 10px 0 10px;
  border: 1px solid #DDD;
  border-radius: 5px;
  padding-bottom: 10px;
}

.hwnsformBlock  {
  background-color: #ffdebb;
  padding: 10px 10px 0 10px;
  border: 1px solid #DDD;
  border-radius: 5px;
  padding-bottom: 10px;
}

.actionBlock  {
  background-color: transparent;
  padding: 10px;
}

.DDCBtn {
  background-image: -webkit-linear-gradient(top, #c6edfd, #0392CD, #025070);  
  background-image: -moz-linear-gradient(top, #c6edfd, #0392CD, #025070);  
  background-image: -ms-linear-gradient(top, #c6edfd, #0392CD, #025070);  
  background-image: -o-linear-gradient(top, #c6edfd, #0392CD, #025070);  
  background-image: linear-gradient(to bottom, #c6edfd, #0392CD, #025070); 
  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6 px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;  
  font-weight: 700;
  font-size: 0.9em;
}

.DDCBtn:hover {
  text-shadow: 2px 1px 3px #c6edfd;  -webkit-box-shadow: 2px 1px 3px #c6edfd;  -moz-box-shadow: 2px 1px 3px #c6edfd;  box-shadow: 2px 1px 3px #c6edfd;*/
}

.DDCScreenBtn {
  color: #0392CD;
}

.DDCScreenBtn:hover {
  color: #ff8400;
}

#static_rpt_options_div {
  display:flex; 
  color:#0392CD; 
  float: right;
  margin-right: 30px;
}

#DDCProgressBar {
  width: 230px;
  height:6px;
  position:absolute;
  margin-top: 27px;
  margin-left:45px;
  border: none;
  opacity: 0.2;
}

#DDCProgressBar > .ui-progressbar-value {
  background: #0392CD !important;
}

#DDCLoader {
  margin:auto;
  margin-top:10%;
  height: 200px; 
  width: 200px;
}

#DDCTitle {
  margin-left: 45px  !important;
  padding-left: 0px !important;
  text-align:left;
  color: #0392CD;
}

#ctc_details_div {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  min-width: 550px;
}

#ctc_details_div  div{
  width: 550px;
  display:inline;
  text-align: center;
}

#ctc_details_div input[type="text"], #ctc_details_div input[type="email"], #ctc_details_div .ctc_terms_textarea {
  background: white;
  height: 100%;
  margin: 2px 20px 16px 20px;
  text-align: center;
  font-size: 1em;
  border: 1px solid #DADADA;
  color: #666;
  height: 30px;
  outline: 0 none;
  padding: 3px;
  width: 390px;
  line-height:15px;
  box-shadow: inset 0px 1px 4px #ECECEC;
  -moz-box-shadow: inset 0px 1px 4px #ECECEC;
  -webkit-box-shadow: inset 0px 1px 4px #ECECEC;  
  border-radius: 3px;
}

#ctc_details_div input[type="text"][readonly] {
  color:#399630;
}


#ctc_details_div div span{
  display:inline-block;
  color: #DDD;
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 7px 3px 3px 5px;
}


#ctc_details_div div label{
  display:inline-block;
  float:left;
  width: 125px;
  font-size: none;
  margin: 0;
  font-size: 1em;
  padding-right: 10px;
  margin-top: 10px;
}

.ctc_terms_textarea {
  color: #333;
  background-color: white;
  margin:10px auto 15px auto;
  font-size: 1em;
  line-height: 1.1em;
  width: 100%;
  padding: 10px;
  text-align: left;
  overflow: auto;
  height: 300px;
  border: 1px solid #DADADA;
  border-radius: 3px;
}

.ctc_terms_div {
  background-color: #78B9E3;
  margin:10px auto 15px auto;
  font-size: 8pt;
  width: 100%;
  text-align: left;
  resize: both;
  overflow: hidden;
  height: 300px;
  border: 1px solid #DADADA;
  border-radius: 3px;
}

#codr_terms_and_conditions input[type="button"] {
  cursor:pointer; 
  padding:5px 25px; 
  background:#35b128; 
  border-radius: 5px;
  box-shadow: none;
  border-width: 1px;
  border-style: solid;
  border-color: #33842a;
  border-image: initial;
  color:#f3f3f3;
  font-size:1.1em;
}

#codr_terms_and_conditions input[type="button"]:hover, .edit_details input[type="button"]:focus{
  background-color :#399630;
  xbox-shadow: 0 0 1px rgba(0,0,0, .75);
  box-shadow: none;
}

#codr_terms_and_conditions input[type="button"].small {
  border-radius: 3px;
  padding:2px 5px;
  font-size:.8em;
  width: 24px;
}


/*
.form-group {
  display: flex;
}
*/

/* page_body no longer used
#page_body {
  position: relative;
  xmargin-top: 80px;
  xmargin-top: 0;
  xmargin-left: 200px;
  padding: 22px 30px 30px 30px;
  -webkit-transition: margin 0.2s cubic-bezier(0.2, 0.59, 0.355, 0.985);
  -moz-transition: margin 0.2s cubic-bezier(0.2, 0.59, 0.355, 0.985);
  transition: margin 0.2s cubic-bezier(0.2, 0.59, 0.355, 0.985);
}
#page_body #content {
  padding: 10px;
}
*/


.btn_blue {
  background-color: #1892c0; background-color: #007bff;
}

.btn_normal {
  height: 42px;
  padding: 0 25px;
  font-size: 16px;
  xmargin-top: 28px;
}
.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;
}
.low {
  margin-top:20px;
}

/*
.btn-group-lg>.btn, .btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
  bottom: 0;
  margin: 10px;
}
*/

.page_body h2 {
  display: inline-block;
}
.page_body #page_actions {
  float: right;
}


/* ===================================================== DIALOG ==*/

.dialog {
  xdisplay: table;
  
  xdisplay: flex;
  xjustify-content: center;
  
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9998; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  xoverflow: auto; /* Enable scroll if needed - SE disbaled to allow for sticky dialog */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
 
}
.dialog .dialog-wrapper {
  display: block;
  xbackground:blue;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.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: 40px auto 0 auto; 
  max-height: 90%;
  overflow: auto;
  
  z-index: 9;
  
  display: block;
  position: fixed;
  
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
}
.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;
  font-size:1em;
  Xcursor: move;
  z-index: 10;
}
.dialog .dialog-wrapper .dialog-contents .dialog-header h1{
  color: #333;
  display: inline-block;
  font-size: 36px;
}
.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;
  Xcursor: 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: 400px; }

div#dialog_offers {
  min-width: 600px;
  font-size: .9em;
}

div#dialog_offers table.tablesorter td {
  font-size: .9em;
}
div#dialog_offers table.tablesorter td:nth-child(4) {
  font-size: .8em;
}
div#dialog_offers table.tablesorter tr:nth-child(odd) {
  background-color:#fffdc1;
}
div#dialog_offers #offersdiv {
    padding-right: 0;
    padding-left: 0;
}

xdiv#custDetailsDiv { max-width: 800px; margin: 0 auto; }
xdiv.sale_info { max-width: 900px; margin: 0 auto; }








.switch-field {
  overflow: hidden;
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  color: #333;
  background-color: buttonface;
  width: unset;
}
.xswitch-field label {
  display: inline-block;
  width: 60px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition:    all 0.1s ease-in-out;
  -ms-transition:     all 0.1s ease-in-out;
  -o-transition:      all 0.1s ease-in-out;
  transition:         all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #A5DC86;
  background-color: #337ab7; background-color: #007bff;
  border-color: #2e6da4;  
  color: #fff;
  -webkit-box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 6px 0 0 6px;
}

.switch-field label:last-of-type {
  border-radius: 0 6px 6px 0;
}



/* SE 20190308 New formatting to suite datatables.net table output START */
.result_div {
  display: inline-block;
  margin: 0 2em;
}
.center {
  text-align: center;
}

table.dataTable tbody td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dataTables_wrapper  {
  overflow: auto;
}
.dataTables_wrapper #output_div {
  width: fit-content;
  max-width: 100%;
  
}
.dataTables_wrapper .formBlock {
  width: fit-content;
  margin: 0 auto;
}

.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
  zheight: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

table.dataTable tfoot th {
  padding: 8px 10px;
  color: #333;
}


table.dataTable tbody tr.odd {
  background-color: #fafafa;
}

table.dataTable tbody tr:hover{
  background-color: #ffc;
}

@media screen and (max-width: 1200px) {

  xbody {font-size: .8em;}
  #output_div {width: 100%;padding: 0;}    
  table.tablesorter {width: 100%;}    
  
  .dashboard svg {
    font-size: 3em;
  }  
}

div.inline {
  display:inline-block;
  vertical-align: top;
}

div#output_div td {
  font-size: 1.2em;
  padding: .2em .8em;
}
div#output_div h3 {
  margin: .5em 0 .2em 0;
}