body {
    background: #E5E6E7;
}

body, input, button, select, textarea { 
    font-family: 'Titillium Web', sans-serif;
}

h1 { font-size: 40px; } 
h2 { font-size: 32px; } 
h3 { font-size: 24px; } 
h4 { font-size: 18px; } 
h5 { font-size: 15px; }

a {
    color: #002D55;
}

td {
    color: #8888AA;
}

td.report-total {
    background: #E5E6E7;
    color: #003D77;
}

th, th > a, th > span > a { 
    color: #F18A2D;
    background: #FFFFFF;    
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    z-index: 2;
}

thead > tr {
    background: #FFFFFF;
}

tbody > tr > td.popover-data, tbody > tr > td.cell-link {
  transition: background .5s ease, color .5s ease;
  -o-transition: background .5s ease, color .5s ease;
  -moz-transition: background .5s ease, color .5s ease;
  -webkit-transition: background .5s ease, color .5s ease;
}

table.table-striped > tbody > tr.highlightRow > td {
    /*background: #DFEFFF;*/
    background: #FA9933AA;
    color: #003355;
}

table.table td {
    vertical-align: middle;
}

form .row-fluid, .main_container > div > .row-fluid  { 
    margin-bottom: 25px; 
}

input[type="file"] {
    height: 33px;
    line-height: 15px;
    padding-top: 2px;
}

select:focus {
    outline: 0;
    border-color: rgba(82, 168, 236, 0.8)
}

input:focus, select:focus, textarea:focus {
    background: #DEFFFF;
}

textarea[readonly], input[type="text"][readonly] {
    background: #EEEEEE;
    border-color: #CCCCCC;
    box-shadow: none;
    outline-width: 0;
}

input.rounded {
    border-radius: 1em 0 0 1em; /* CSS3 */
    -moz-border-radius: 1em 0 0 1em; /* Firefox */
    -webkit-border-radius: 1em 0 0 1em; /* Safari, Chrome */
    text-align: center;
}

a [class^="icon-"] {text-decoration: none;}

.table .cell-limiting { max-width: 1px; }

.table .cell-ellipses {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rg-blu-bg  { background: #002D55; }
.rg-blu-txt { color: #002D55; }
.rg-org-bg  { background: #F18A2D; } 
.rg-org-txt { color: #F18A2D; }

.rg-fnt-200 { font-weight: 200; } /* x-light */
.rg-fnt-300 { font-weight: 300; } /* light */
.rg-fnt-400 { font-weight: 400; } /* regular */
.rg-fnt-600 { font-weight: 600; } /* normal */
.rg-fnt-700 { font-weight: 700; } /* bold */
.rg-fnt-900 { font-weight: 900; } /* black */

.gray-line  { border: 1px solid #CCCCCC; }

.txtRgt     { text-align: right; }
.txtCtr     { text-align: center; }

.tblAlt     { border-collapse: collapse; }

.tblRgt     { text-align: right; }
.tblLft     { text-align: left; }
.tblCtr     { text-align: center; }

.dateCol    { width: 14%; min-width: 100px; }

.tblPagHead th.no-wrap { white-space: nowrap; }

.tblPagHead th.wrapped { white-space: normal; }

.table-striped tbody > tr:nth-child(even) > td {
    background: #FCFDFE;
}
.table-striped tbody > tr:nth-child(odd) > td {  
    background: #F1F2F3;
}

.table-striped tbody > tr > td.popover-data:hover,
.table-striped tbody > tr > td.cell-link:hover {
    background: #F19933;
    color: #003355;
    cursor: pointer;
}

.main_container {
    background: #E5E6E7;
 }

.user_side {
   padding: 30px 15px; 
   background: #FFFFFF;
}

#footer-info {
  line-height: 25px;
  font-size: 13px; 
  font-weight: 300; 
  color: #FFF;
  text-align: right;
}

#footer-info a {
  color: white;
}

#footer-info ul li a {
  color: white;
  font-size: 16px;
}

.footer-wrap {
  max-height: 100px;
  z-index: 1111;
  position: fixed; 
  bottom: 0; 
  right: 0; 
  width: 100%; 
  background: #002b55; 
  border-top: 3px solid #103B5D;
}

.footer-logo img {
  margin: 10px;
  width: 100%;
  min-width: 50px;
  max-width:75px;
}

.disclaimer {
  margin: 10px 20px;
  color:white;
  font-size: 11px;
}

@media only screen and (max-width: 999px) {
  .footer-wrap {
    max-height: 100px;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
  }
  .footer-wrap > .footer-logo {
    display: none;
  }
  #footer-info {
    text-align: center;
  }
  .disclaimer {
    margin: 3px;
    max-width: 95% !important;
    min-width: 95% !important;
  }
  [class*="span"] {
      min-width: 100%;
      clear: left;

  }
}

@media only screen and (max-width: 799px) {
  #cookie_consent_popup {
    width: 100%;
    min-width: 100%;
  }
  #ok_cookie_box {
    text-align: center;
  }
}

@media only screen and (max-width: 499px) {
  #cookie_consent_popup {
    width: 100%;
    min-width: 100%;
  }
  #ok_cookie_box {
    position: relative !important;
    text-align: center;
  }
}

.navbar .btn.btn-navbar {
    background: #F18A2D;
    margin: 7px;
}

.form-horizontal .control-group, .form-horizontal .control-group2 {
    margin-bottom: 10px;
}

.btn-small {
    margin: 3px;
    padding: 3px 15px;
}

.btn.btn-primary { 
    background: #002C55; 
}

.widget-header > i {
    color: #FFFFFF;
}

.widget-header, .widget-header a {
    color: #FFFFFF;    
    background: #F18A2D;
}

.widget-header > h5, .widget-header > a > h5, .widget-header ul.nav-tabs a {
    color: #FFFFFF;
    font-weight: 300;
 }

.widget-header .nav-tabs > li.active a {
    font-weight: 600;
}

.widget-header a:hover, .widget-header .nav.nav-tabs li > a:hover {
    color: #FFFFFF;
    background: #f79955;
}

.widget-buttons.button-animate a {
  background: transparent;
  border: 2px solid transparent;
  color: #FFF;
  font-size: 15px;
  padding: 5px;

  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.widget-buttons.button-animate a:hover {
  background: #1E4168;
  border: 2px solid #00264B;
  border-radius: 5px;
  letter-spacing: 1.2px;
}


.filter-check {
    padding-top: 4px;
}

input[type="checkbox"] {
    margin: 0px 0 0;
}

.filter-check > input[type="checkbox"] {
    margin-top: 0;
    margin-right: 5px;
    margin-bottom: 3px;
}

.nav-tabs>li>a>span {
    font-size: 13px;
}

.cmt-head { max-width: calc(99% - 88px); }

.comment-bubble {
    margin: 20px;
}

.comment-bubble .subject, .comment-bubble .message {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}

.comment-bubble .subject {
    color: #62687E;
    font-weight: 700;
    font-size: 14px;
}

.emptySetMsg { text-align: center; }

.popover     { text-align: center; font-weight: bold; z-index: 1000; }

.popoverData:hover { cursor: pointer; }

.starting-sort { border-bottom: 3px solid #F18A2D; }

.sorted-column { border-bottom: 2px solid #F18A2D; }

.alertify-logs { top: 35px; right: 0; height: 75px; }

.alertify-button-ok { 
    background: #002C55; 
    color: #FFFFFF;
    text-align: center;
    width: 70px; 
}

.alertify-button-ok:hover { background: #285078; color: #FABC88; }

.alertify-button:hover { text-decoration: none; }

.alertify-hidden {
    display: block;
    visibility: hidden; /* <-- fixes blocking */
    height: 0;
}

.large-icon   { font-size: 20px; }
.upload-grp   { max-width: calc(100% - 50px); }
.upload-msg   { padding: 10px 15px; }
.notSpecified { color: #BBB; }

.totalHL { font-size: 18px; font-weight: 700; }

.parameter-isDefault {
  margin:2px 2px;
  padding:1px 8px;
  float:left;
  background:#f7fff7;
  color:#8a8;
}
.parameter-isDefault:hover {
  background:#e7ffe7;
  color:#595;
  cursor:pointer;
}
.parameter-changed {
  margin:2px 2px;
  padding:1px 8px;
  float:left;
  background:#FFF3F3;
  color:#ff0000;
}
.parameter-changed:hover {
  background:#f9c5c5;
  color:#bc1010;
  cursor:pointer;
}
.parameter-normal {
  margin:2px 2px;
  padding:1px 8px;
  float:left;
  background:#f7f7f7;
  color:#aaa;
}
.parameter-hover {
  background:#BBB;
  color:#000;
  cursor:pointer;
}
.param_bg {
  background:#666;
  cursor:pointer;
  color:#fff;
}
.param_selected {
  background:#7CB5EC;
}
.fieldParams {
  float:left;
  margin:3px;
  width:210px;
  border-radius: 2px;
  border: 1px solid #999;
}
.fieldParams > label {
  margin:0px;
  height:35px;
  line-height:33px;
}
.wsb_fields,  .wsb_fields,
.rgs1_fields, .rgs2_fields,
.rgs1_params, .rgs2_params,
.rgs1_config, .rgs2_config {
  padding:3px 20px;
  background:rgba(200,200,200,.25);
  cursor:pointer;
}
.wsbFieldArray,
.wsbParamsList,
.rgsFieldArray,
.rgsParamsList,
.rgsConfigList {
  top:0;left:0px;
  display:none;
  position:absolute;
  background: rgba(200,200,200,.88);
  z-index:100;
  padding:20px;
  width:100%;
}

.rgsParamsList > div > div.parameter-normal,
.rgsParamsList > div > div.parameter-changed,
.rgsParamsList > div > div.parameter-isDefault,
.wsbParamsList > div > div.parameter-normal {
  text-align: center; width: 240px;
}

.config-wrap {
  margin: 0 auto;
  width: 444px;
}
.configuration {
  float:left;
  width:210px;
  margin:3px 5px;
  padding:3px 7px;
  border:1px solid #AAA;
  border-radius:5px;
  background:#f1f1f1;
  font-weight:600;
  font-size:16px;
  color:#777;
}

.reset-Fields {
  float: left;
  margin: 5px;
  padding-left: 20px;
  width: 210px; height: 30px;
  line-height: 30px;
  background: #AAA;
  border: 1px solid #777;
}
.reset-Fields:hover {
  background:#555;
  color:#FFF;
  cursor:pointer;
}

.menu-icon:hover { cursor: context-menu; }

.popup-menu {
  display: none;
  position: absolute;
  z-index: 101;
  top:7px; right:100px;
  padding: 5px;
  background: rgba(202,202,202,0.75);
  border: 1px solid #DCDCDC;
  border-radius: 5px 0 0 5px;
}
.popup-menu a {
  margin: 1px;
  padding: 0 10px;
  color: #111;
  font-weight: 400;
  background: transparent;
}
.popup-menu a.active { background: #70ACE9; }

.popup-menu {
  display: none;
  position: absolute;
  z-index: 101;
  top:7px; right:100px;
  padding: 5px;
  background: rgba(202,202,202,0.75);
  border: 1px solid #DCDCDC;
  border-radius: 5px 0 0 5px;
}
.popup-menu a {
  margin: 1px;
  padding: 0 10px;
  color: #111;
  font-weight: 400;
  background: transparent;
}
.popup-menu a.active { background: #70ACE9; }
.popup-menu a:hover {  background: #777; color:#EEE; }

.cell-link { color: #003355; }
.cell-link a { display: block; padding: 4px; margin: -4px;  }
.cell-link a:hover { text-decoration: none; }

.status-marker {
  position: relative; top: 2px;
  height: 15px; width: 15px;
  background-color: #999999;
  border-radius: 50%;
  border: 2px solid #5A5A5A;
  display: inline-block;
}
.status-marker.status-ok {
  background-color: #77BB77;
}
.status-marker.status-alarm {
  background-color: #EE3333;
}
.status-marker:hover { cursor: pointer; }

/* addin 12-12-18 */
.row-fluid .training-lft-custom-span,
.row-fluid .training-rgt-custom-span {
  display: block;
  min-height: 30px;
  box-sizing: border-box;
  float: left;
  margin: 0;
}

.row-fluid .training-lft-custom-span { width: 23.077%; }
.row-fluid .training-rgt-custom-span { width: 76.923%; }

.training-full-list .training-box-wrap {
  float: left;
  width: 30%;
  margin-left: 3.333%;
}

.training-single .training-box-wrap {
  float: right;
  width: 50%;
}

.limit-ctr-row {
  max-width: 1500px;
  margin: 25px auto;
}

.training-main-head {
  color: #00253D;
  font-size: 20px;
  font-weight: 700;
}

.training-main-box:hover, 
.training-back-btn:hover {
  cursor: pointer;
}

.training-main-box {
  background: #F1882E;
  margin: 20px 0 40px;
}

.training-main-img {
  width: 50%; 
  margin: 25%;
}

.training-collapse-head > div {
  margin: 10px 0;
  padding-top: 10px;
  height: 40px;
}

.training-collapse-head:hover,
.training-sidebar-collapse:hover {
  text-decoration: none;
}

.training-collapse-btn {
  float: right;
  padding-left: 15px;
  color: #F1882E;
  font-size: 18px;
}

.training-collapsible a, 
.training-top-3 a {
  color: #889099;
}

.training-top-3 {
  margin-top: 30px;
  color: #889099;
}

.training-link-item {
  display: inline-block;
  margin-top: 2px;
  width: calc(100% - 16px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.training-link-icon {
  float: right;
  margin-top: 5px;
  width: 15px; height: 15px;
  background-image: url(/assets/img/rgt-arrow-icon.png);
  background-size: cover;
}

.training-form {
  color: #889099;
}

.training-form input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  float: right;
  border: 1px solid transparent;
}

.training-form input[type='radio']:after {
  margin-top: 2px;
  width: 5px;
  height: 5px;
  content: '';
  display: inline-block;
  visibility: visible;
  border-radius: 10px;
  border: 5px solid #FFFFFF;
  background-color: #FFFFFF;
}

.training-form input[type='radio']:checked:after {
  background-color: #00253D;
}

.training-form input[type='radio']:focus {
  outline: 0;
  background: transparent;
}

.training-form label {
  margin-bottom: 0;
  margin-top: 3px;
  width: calc(100% - 18px);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.training-link:hover {
  text-decoration: none;
}

.training-hr-1 {
  margin: 5px 0;
  border-top: 1px solid #959CA1;
  border-bottom: 1px solid transparent;
}

.training-hr-2 {
  margin: 0;
  border: 1px solid #959CA1;
}

.training-box-wrap, .training-sidebar-wrap {
  max-width: 350px;
  margin: 0 auto 4.4%;
}

.training-box-wrap a:hover {
  text-decoration: none;
}

.training-sidebar-head {
  font-size: 20px;
  font-weight: 700;
  color: #00253D;
  margin: 20px 0;
}

.training-content-head {
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  color: #FFF;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #F1882E;
}

.training-pdf-desc {
  height: 200px;
  background: #FFF;
  color: #889099;
  text-align: center;
  font-size: 15px;
  border-bottom: 1px solid #CCC;
  padding: 5%;
}

.training-pdf-icon {
  max-width: 200px;
  max-height: 164px;
}

.training-pdf-overview {
  width: 100%;
  max-width: 250px;
}

.training-content-img {
  width: 100%;
  max-width: 500px;
}

.training-box-button {
  padding: 10px;
  background: #F3F3F3;
  color: #00253D;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.training-box-button:hover {
  background: #00253D;
  color: #FFF;
}

.training-btn {
  width: 100%;
  float: left;
  border-right: 1px solid #CCC;
}

.training-btn-lft {
  width: 50%;
  float: left;
  border-right: 1px solid #CCC;
}

.training-btn-rgt {
  width: 50%;
  float: right;
  border-left: 1px solid #CCC;
}

.training-btn-pair:after {
 content: '';
 display: table;
 clear: both;
}

/* end of 12-12 addin */

#loadStatus, #saveStatus, #videoOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 1111;
}

#loadStatus, #saveStatus {
  font-size: 35px;
  font-weight: 700;
  text-align: center;
  color: #FFF;
}

#addItem-desc, .xs-desc { color: #00264B; font-size: 16px; }

#admin-wrap {
  background: #234;
  color: #FFF;
  border-bottom: 2px groove #012;
}

#admin-container {
  float: right;
  width: 100%;
  max-width: 500px;
  padding-top: 7px;
  padding-bottom: 8px;
}

#customerAjax { width: 100%; }



#menu-art {
    margin-top: 25px; 
    height: 225px; width: 150px; 
    background-image: url("/assets/img/menu-art.png"); /*!important;*/
    background-repeat: no-repeat;    
    background-size: contain; 
}

#uploadMsg  { color: red; margin: 10px 3px; }
#uploadFile { border: 1px solid #CCC; }

#uploadInfo {
    width: 84%;
    border: 2px groove #ABC;
    border-radius: 5px;
    margin: 15px 0; padding: 10px;
    color: #555; font-size:11px;
}

#filter-display>div { 
    padding: 5px;
    margin: 0 auto;
    width: 360px; /*260px*/
}

#filter-display>div>label {
    float: left;
    width: 80px;
    padding-top: 5px;
    margin-right: 10px;
    text-align: right;
}

#toTop-bar {
    z-index: 100001;
    padding: 0 10px;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 35px;
    color: #FFF;
    text-align: center;
    line-height: 30px;
    background: rgba(0, 44, 88, 0.88);
    display: none;
}

.input-append .add-on:last-child { border-radius: 5px; }

.modalClose { position: relative; z-index: 1; }

/*============ scroll overlay 04-20-20 ============*/
.table-wrap {
  min-height: 250px;
  max-height: 525px;
  max-height: calc(88vh - 150px);
  padding-bottom: 15px;
  overflow: auto;
  border: 1px solid #CCC;
  border-radius: 4px;
}

.report-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #FFF;
  border: 1px solid #CCC;
}

.report-table .starting-sort, .report-table .sorted-column {
  border-bottom: 2px solid #F18A2D;
}

.u-scroll-overlay, .d-scroll-overlay {
  display: none;
  width: calc(100% - 30px);
  height: 25px;
  margin: 0 15px;
  text-align: center;
  font-size: 15px;
  line-height: 1.75;
  color: #555;
  cursor: pointer
}

.u-scroll-overlay {
  z-index: 1;
  position: absolute;
  top: 64px; left: 0;
  border-radius: 0 0 7px 7px;
  background: -moz-linear-gradient(top, rgba(99,99,99,0), rgba(255,255,255,1));
  background: -webkit-linear-gradient(top, rgba(99,99,99,1), rgba(255,255,255,0));
}

.d-scroll-overlay {
  z-index: 1;
  position: absolute;
  bottom: 15px; left: 0;
  border-radius: 7px 7px 0 0;
  background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(99,99,99,1));
  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(99,99,99,1));
}

.staging-indicator {
  width: 100%; 
  height: 33px; 
  background: rgb(235,137,55); 
}

.staging-message {
  margin-left: 265px;
  font-size: 20px;
  line-height: 1.35;
  text-align: center;
}

#myProdLogWrap { width: 600px; }

/*=====  MEDIA QUERIES - max widths  =====*/
@media (max-width: 1250px) {
  .row-fluid .training-lft-custom-span {
    width: 31%;
  }
  .row-fluid .training-rgt-custom-span {
    width: 69%;
  }
  .training-full-list .training-box-wrap {
    width: 45%;
    margin-left: 5%;
  }
}

@media (max-width: 999px) {
    #admin-container, #footer-info {
	padding: 5px 25px;
    }

  .staging-message {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .row-fluid .training-lft-custom-span,
  .row-fluid .training-rgt-custom-span,
  .training-single .training-box-wrap,
  .training-full-list .training-box-wrap {
    float: none;
    width: 100%;
    margin: 0 auto 25px;;
  }

  #myProdLogWrap { 
    width: 450px; 
  }

  /*======= addin on 04-2020 =======*/
  .table-wrap {
     max-height: 380px;
  } 

  .u-scroll-overlay, .d-scroll-overlay {
    height: 30px;
    line-height: 2;
    width: calc(100% - 10px);
    margin: 0 5px;
  }

  .u-scroll-overlay {
    top: 54px;
  }

  .d-scroll-overlay {
    bottom: 5px;
  }
}

@media (max-width: 680px) {
    .alertify {
        left: 50px;
	width: calc(100% - 100px);
    }
}

@media (max-width: 525px) {
    .nav-tabs, .nav-pills {
	width: 98%;
	border: 1px solid red;
	text-align: center;
    }

    .nav-tabs > li, .nav-pills > li {
	float: left;  /*none for fullscreen*/
    }

    .nav-tabs > li > a > span { 
	display: none;  /*hide the tab text*/
    }

    /* nav-tab pointer */
    .widget-header .nav-tabs > .active > a:after { 
	display: block;
	margin: 0 -8px;
    }

    .table tr > td {
	padding: 5px !important;
	font-size: 13px;
    } 
}

@media (max-width: 480px) {
    #admin-container, #footer-info {
        padding: 5px 10px;
    }

    #myProdLogWrap { 
      width: 300px;
    }
}

@media (max-width: 400px) {
    #filter-display>div {
	width: 300px;
	height: auto;
    }
    #filter-display>div>label {
	float: none;
	text-align: left;
    }
}

/*=====  MEDIA QUERIES - min widths  =====*/
@media (min-width: 768px) {
    .pull-rgt-sm { 
	float: right;
    }

    #rg-side-menu.nav-collapse.collapse {
	left: -265px;
    }
}

@media (min-width: 1000px) {
    #admin-container, #footer-info {
	padding: 5px 25px;
    }

    .form_container {
        margin-left: 15px!important;
	padding-left: 50px;
	padding-right: 50px;
    }
}

@media (min-width: 1200px) {
    #admin-container, #footer-info {
	padding: 5px 75px 5px 25px;
    }
}


@media (hover:hover) {
  .table-striped tbody > tr > td.popover-data:hover, 
  .table-striped tbody > tr > td.cell-link:hover {
    background: #F19933;
    color: #003355;
    cursor: pointer;
  }

  /*======= addin on 04-20-20 =======*/  
  .u-scroll-overlay:hover, .d-scroll-overlay:hover {
    color: #FFF;
    background: rgba( 99, 99, 99, 0.73 );
    border: 1px solid #555;
  }
}