@charset "UTF-8";
/* CSS Document */

body {
  font-family: Arial, sans-serif;
  color: #000;
}

#main {
  font-size: 14px;
  font-style: normal;
}

#header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline;
}

#header li {
  display: inline;
  border: solid;
  border-width: 1px 1px 0 1px;
  margin: 0 0.5em 0 0;
}

#header li a {
  padding: 0 1em;
  color: #ffffff;
}

#header #selected {
  padding-bottom: 1px;
  background: white;
  position: relative;
  top: 1px;
}

#header li {
  float: left;
  border: 1px solid;
  border-bottom-width: 0;
  margin: 0 0.5em 0 0;
}

#content {
  border: 1px solid;
  clear: both;
}

h1 {
  margin: 0;
  padding: 0 0 1em 0;
}

.loginDropDown {
  background-color: gray;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 3px;
  text-align: left;
}

.formSubmit {
  background-color: gray;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 98px;
}

.formSubmitLarge {
  background-color: gray;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 128px;
}

.formSubmitXLarge {
  background-color: gray;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 156px;
}

.formSubmitXXLarge {
  background-color: gray;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 225px;
}

.formSubmitXXXLarge {
  background-color: gray;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 300px;
}

.formSubmitXXLargeBlue {
  background-color: blue;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 225px;
}

.formSubmitXLargeDanger {
  background-color: yellow;
  border: 2px solid #000000;
  color: red;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
  width: 265px;
}

.formSubmit_danger {
  background-color: red;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 2px;
  text-align: center;
  text-transform: uppercase;
  width: 98px;
}

.formSubmit_blue {
  background-color: blue;
  border: 2px solid #000000;
  color: #ffffff;
  font: bolder 12px Arial, Helvetica, sans-serif;
  height: 30px;
  padding: 2px;
  text-align: center;
  text-transform: uppercase;
  width: 98px;
}

.op_name {
  float: right;
  border: none;
}

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: absolute;
  z-index: 0;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/*#header ul li a.selected {
    background-color: #fff;
    border: 2px solid #444;
    color: #005bff;
    text-decoration: none;
}*/
/*nav#mainnav ul li a.selected:hover {
    color: #005bff;
}
*/
.menu_bar {
  background: rgb(64, 63, 63);
  height: 34px;
}

.menu_tab {
  color: white;
  border-color: #5c5858 !important;
  text-align: center;
  font-size: 16px;
  margin-right: 2px !important;
  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background: #75787b;
  height: 29px;
  width: 110px;
}

.menu_tab_small {
  color: white;
  border-color: #5c5858 !important;
  text-align: center;
  font-size: 16px;
  margin-right: 2px !important;
  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background: #75787b;
  height: 29px;
  width: 75px;
}

.menu_tab_medium {
  color: white;
  border-color: #5c5858 !important;
  text-align: center;
  font-size: 16px;
  margin-right: 2px !important;
  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background: #75787b;
  height: 29px;
  width: 100px;
}


#header ul a li:hover {
  color: #000;
}

#header ul li:hover {
  background-color: white;
  color: #000;
}
.active {
  background-color: white;
  color: #000;
}
#header ul li:visited a {
  color: #000;
}

.active .menu_tab {
  background-color: white;
  color: #000000 !important;
}
/*.menu_tab a:hover { 
    background-color: white;
	color: #000;
	
}*/
.list_name {
  text-decoration: none;
  font-size: 15px;
  /*padding-left: 5px !important;*/
  line-height: 1.8;
  float: left;
}

.outer_border {
  border-width: 5px;
  border-collapse: collapse;
  border-color: black;
}
.user_profile {
  display: flex;
  float: right;
  border: none;
  /*padding-top: 5px;*/
  margin-bottom: 0px;
  margin-top: 0px;
  color: white;
}

#setting_popup {
  padding-right: 10px;
  padding-top: 3px;
}
.record {
  width: 160px;
  height: 28px;
  border-radius: 3px;
  border-color: rgba(128, 128, 128, 0.3);
}

.field_font {
  font-size: 16px;
}

.field_font_grayed {
  font-size: 16px;
  background: #dedede;
}

@media (min-width: 670px) {
  .menu_tab {
    width: 165px !important;
  }
}

/****popup*********/
.popup_img {
  height: 21px;
  /*padding-left: 70px;*/
  /*padding-top: 3px;*/
}
.close_popup {
  float: right;
  margin-right: -14px;
  margin-top: -16px;
  background-image: url(images/control.png);
}
.ip_msg {
  background: #fff;
  color: #000;
  width: 500px;
  padding: 10px;
  border: solid;
}
.email_confirmation_success_popup_class {
  width: 100%;
  padding: 5px;
}
.close_enquiry_success_popup {
  float: right;
  margin-right: -14px;
  margin-top: -16px;
  background-image: url(images/control.png);
}
.email_confirmation_popup_text {
  font-size: 17px;
}

.forgot_pass {
  padding: 0px;
  background: none !important;
  color: blue;
  border: none;
  text-decoration: underline;
}
.version {
  position: absolute;
  bottom: 4px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

u {
  text-decoration: underline;
}

.green-dot {
  height: 10px;
  width: 10px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}

.red-dot {
  height: 10px;
  width: 10px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

.row {
    display: flex;
}

.column {
    flex: 50%;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}

.hide {
  display: none;
}