* {
 font-family: Arial;
 font-style:normal;
}
.ui-widget {
 font-family: Arial;
}

body {
 margin: auto;
 padding: 0;
 width:100%;
 height:100%;
 font-size: 0.9em;
 color: #1a4a77;
 background-color: #1a4a77;
 /*background: url('../images/bginit.jpg') no-repeat center center fixed;*/
 background-size:100%;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

img       {vertical-align:middle; border:0px; outline:0; }
a:link    {text-decoration: none; border:0px; outline:0; color: #1a4a77}
a:visited {text-decoration: none; border:0px; outline:0; color: #1a4a77}
a:hover   {text-decoration: none; border:0px; outline:0; color: red;}
a:active  {text-decoration: none; border:0px; outline:0; color: #1a4a77}

#page { 
 margin:0px auto;
 border-top:none;
 border-bottom:none;
 border-collapse:collapse;
 background-color:white; 
 width:100%; /* 99% for ext blue space on both sides */
 overflow-x:auto; /* imp: avoid table drawn out of the white div */
 overflow-y:hidden; /* avoid double vertical scroll though only one active */
}

#header { 
 margin:0;
 padding:0;
 width:100%;
 border:none;
 border-bottom:0px solid #aaa;
}

.extcont {
 display:table;
 width:100%; 
 margin:0px auto;
 margin-top:2px; 
 padding:0;
}
.maincell {
 display:table-cell;
 vertical-align:top;
}
.tcell {
  display:table-cell;
}

#sidebar {
 border:none;
 border-right:0px solid #aaa;
 margin:0;
 padding:0;
 height:100%;
 width:210px; 
 resize:horizontal;
 overflow:hidden;
 overflow-x:auto; /* resize sidebar */
}

#content {
 padding:0px;
 margin: 0px;
 margin-top:4px; 
 margin-left:4px; /* along with toolbar div */
 text-align:left;
 width:100%; /* 100% IMP */ 
 min-height:840px; /* For no data or few data */
}

#videofront {
 position: fixed;
 top: 0;
 left: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -999;
}

.tabletitle {
 width:100%; 
}
.tablecont {
 width:99%; /* less than 100% for the scroll bar to appear */ 
}

/* DataTable General */
#datatable {
 margin: 0px;
 padding:0px;
 text-align:left;
}
#datatable td, th {
 white-space:nowrap;
}
#datatable input:focus { /* editing online fields */
 border:1px solid red;
}
table.dataTable td.dataTables_empty, table.dataTable td.dataTables_loading, table.dataTable td.dataTables_processing {
 text-align: left; 
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th, /* invent footer */
table.dataTable tfoot td  /* profit footer */
{ 
 font-weight: normal;
 font-size:0.9em;
 background: #eee; 
 border-top:1px solid #ccc;
 border-bottom:1px solid #ccc;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 /*padding:4px 12px !important;*/ /* att: breaks the order controls positioning */
}
table.dataTable tfoot th, /* invent footer */
table.dataTable tfoot td  /* profit footer */
{
 border-top:0; 
}
table.dataTable td {
 font-size: 0.9em;
 border-bottom:1px solid #ccc;
}
.machtitle {
 vertical-align:middle;
}
.machtitle img {
 height:12px;
} 
.toprow {
 border-bottom:0 !important;
}

/* Search at top table */
#datatable_filter {
 margin:10px 2px 0 2px;
 font-size:1.0em;
}
#datatable_filter input:focus { 
 font-size:1.0em;
 border:1px solid red;
}
/* Show registers */
#datatable_length { 
 width:99%;
 background-color:#eee;
 font-size:0.9em;
 padding:5px 7px;
 border:1px solid #ccc;
 border-top:0;
}
#datatable_length select {
 color:#1a4a77;
 /*-moz-appearance: none;*/
}
#datatable_length select option {
 background-color:whitesmoke;
 color:#1a4a77;
}
#datatable_info  { 
 font-size:0.9em;
 padding:6px;
}
/* Pagination */
#datatable_paginate { 
  font-size:0.9em;
}

/* Horizontal scrollbar - viewsset */
.toolbardiv{
 width: 99%; /* imp for the scroolbar to appear */  
 padding:0px; 
 margin:2px 0px;
 margin-left:4px; /* along with #content */ 
 text-align:left;
}
.toolbardiv .ui-buttonset .ui-button {
 font-size:0.9em;
 font-weight:normal;
 width:120px;
 height:70px;
 padding:0;
 padding-bottom:1px;
 background:whitesmoke;
 -webkit-border-radius:8px;
 border-radius:8px;
 border:1px solid #ddd;
}
.toolbardiv .ui-buttonset .ui-button a { 
 color:#1a4a77; 
}
.toolbardiv .ui-buttonset .ui-button.ui-state-hover { 
 background:white; 
}
.toolbardiv .ui-buttonset .ui-button.ui-state-hover a {
 color:red;
}
.buttext {
 max-width:124px;
 overflow:hidden;
 padding-top:2px;
}
.toolbarminis {
 width:14px;
 cursor:pointer;
}

/* Buttons on top table */
.exportbut {
  margin-top:10px;
  font-size:1.0em !important;
  color:#1a4a77 !important;
  line-height:0.8em !important;
 } 
.custombut {
 margin-top:16px;
 font-size:1.0em !important;
 color:olive !important;
 line-height:0.8em !important;
}
.custombut {
 background:whitesmoke !important;
}
.custombut:hover {
 background:#eee !important;
}
.singlebut {
 padding:8px 14px;
 margin-right:4px;
 border:1px solid #ccc;
 outline:0 !important; 
}
.singlebut::-moz-focus-inner { border: 0; }


/* Apps screen Nubestore */
.nubestorediv {
 background-color: white;
 height:98%;
 padding-right:2px;
 padding-top:9px;
 border:0px solid green;
 overflow:auto;
 min-height:750px; /* with .content; for no data or few data */
}
.nubestorediv .ui-buttonset .ui-button {
 font-size:0.9em;
 font-weight:normal;
 border:0; 
 background:transparent;
 text-align:center;
 width:120px; /* att: bigger and label centering */
}
.nubestorediv .ui-buttonset .ui-button a { 
 color: #1a4a77;
}
.nubestorediv .ui-buttonset .ui-button.ui-state-hover a { 
 color:red; 
}
.nubestorebar {
 visibility:visible;
 font-size:0.9em;
 padding:6px 8px;
 margin:9px 0px;
 width:170px;
 color:#1a4a77;
 background:#eee;
 /* -webkit-border-radius:4px; 
 border-radius:4px; */ 
}


/* General */
.clearblock {
 clear:both;
 display:block;
}
.ui-datepicker {
 font-size:0.8em;
 background-color:white;
}
.hidden {
 display:none;
}
.novisible {
 visibility: hidden;
}
.guide {
 text-align:justify; 
 margin:20px 20px 0 10px;
}
.hint {
 color:olive;
 font-size:0.9em;
}
input:focus {
 border:1px solid red;
}
.ui-button:focus { 
 color:#1a4a77; 
}
.sext {
 margin:0 auto;
 padding:0;
}
.poweredimgside {
 margin:20px 0;
}
.icon {
 width:  12px;
 margin: 0px 1px;
}
.iconb {
 margin: 1px 2px 1px 6px;
 width: 24px;
}
.iconc {
 margin:0px 2px;
 width: 16px;
}
.iconm {
 margin-right:3px;
 width:14px;
 height:14px;
 border:none;
}

.iconoff {
 width:16px;
}
.statusicon {
 width: 18px;
 height: 18px;
}
.printerslist {
        padding: 0px;
        margin:  0px;
        width:   100%;
}
.cell {
        margin: 0;
        padding:2px 4px;
        text-align:center;
        font-size:0.8em;
}
.doccell {
        padding: 2px 4px;
        text-align:left;
        font-size:0.9em;
}
.alertscell {
        padding:0px;
        text-align:left;
        font-size:0.9em;
}
.nowrap {
 white-space:nowrap;
}

.colarrow {
 font-size:1.0em;
 font-weight:bold;
}
.even {
 background-color:#dadaff;
}
.odd {
 background-color:#eee;
}
.highlight {
 background-color:#fff4ae; 
 cursor:pointer;
}
.offline {
 color: red;
}
.erange {
 color: orange;
}
.red {
 color: red;
}
.olive {
 color: olive;
}
.ninst {
 color: #848296;
}
.disabled {
 color: #848296;
}
td.editable {
 color:green;
 cursor:pointer;
}
.datum {
 background-color:#efefef;
 padding:6px;
}
.button {
 color: #1a4a77;
 padding:4pt;
}
.title {
 font-size:1.0em; 
 padding-left:4px;
 color:#aaa;
 background: #065ab8;
}
.titleb {
 padding:2px 10px;
 margin:8px 0px;
}
.alttitle {
 display:inline-block;
 overflow:hidden;
 width:88px;
}
#downrep {
 font-size:1.1em;
 color:orange;
}
.wrap {
 white-space:normal;
}
.minor {
 font-size: 0.9em;
}
.extraminor {
 font-size: 0.8em;
}
.mayor {
 font-size: 1.1em;
}
.extramayor {
 font-size: 1.2em;
}
.fontxl {
 font-size:1.5em;	
}
.doublesize {
 font-size: 2.4em;
}
.bold {
 font-weight:bold;
}
.vspacer {
 margin:4px 1px 6px 1px;
}
.hspacer {
 margin:1px 4px;
}
.rspacer {
 margin-right:12px;
}
.rpad {
 padding-right:30px;
}
.dblrpad {
 padding-right:90px;
}
.vpad {
 padding-top:8px;
 padding-bottom:6px;
}
.hpad {
 padding:10px 12px;
}
.center {
 text-align:center;
}
.right {
 text-align:right;
}
.mauto {
 margin:auto;
}
.D0 {
 margin:0;
 padding:0;
}
.D1 {
 margin-left:38px;
}
.D2 {
 margin-left:29px;
}
.emptylist{
 margin:30px 20px;
}
.cellborder {
 border:1px dotted #aaa;
}
.cellborderbottom {
 border-bottom:1px solid #aaa;
}
.list {
 list-style-type: none; 
 font-size:0.9em;
 margin:0;
 padding-left:10px;
 white-space:nowrap;
}
.recent {
 list-style-type: square;
 color: #333;
 font-size:0.9em;
 text-align:left;
 margin:0;
 padding:0;
 padding-left:22px;
 white-space:nowrap;
}
.dropdown {
 height:22px;
 font-size:0.8em;
 color: #1a4a77;
}
.selpro {
 border:1px solid red;
}
.selopt {
 font-weight: bolder;
}
.databox{
 background:#fff;
 color:#1a4a77;
 vertical-align:middle;
}
.databoxinv{
 background:#fff;
 color:#1a4a77;
 vertical-align:middle;
}
.sample {
 color:red;
 font-weight:bold;
 font-size:1.2em;
}
.link {
 cursor:pointer;
 color:#065ab8;
}
.tableinit {
  margin:0;
  padding:0;
  display:table;
}
.trow {
  display:table-row;
}


/* Sidebar */
.projlist{
 margin:0;
 padding:0;
 padding-left:3px;
 max-height:600px;
}
.underline{
 text-decoration: underline;
}
#actsearch {
 cursor:pointer
}
.searchline {
 background-color:white;
 text-align:center;
 padding:1px 1px 2px 1px; 
 margin:0;
}
.searchbut {
  vertical-align:middle;
  padding:3px; 
  cursor:pointer;
  /* -webkit-border-radius:2px;
  border-radius:2px; */ 
  margin:auto;
  margin-bottom:2px;
  width:25px;
  background-color:#efefef;
}
.searchbox {
  height:14pt;
  width:167px;
  border:1px solid #aaa;
  font-size:0.9em;
  color:#1a4a77;
  padding:2px 4px;
  margin:0px auto;
  margin-top:0px; 
  background:#fff;
}
input.searchbox:focus, textarea { 
 outline: none !important; 
}
.wider {
 width:94px;
}
.smaller {
 width:26px;
}
.longer {
 width:130px;
}
.whiter {
 background-color:white;
}
.non {
 display:none;
}
.sidebut { 
 font-size:1.0em;
 width:176px;
}
.sidebut3div {	
 margin:3px 0px 0px 10px;
 max-width:176px;
 text-align:center;
 white-space:nowrap;
}
.iconsidebut { 
 width:23px; 
}
.sidebut3div .ui-button {
 -webkit-border-radius:5px;
 border-radius:5px;
 margin:0 2px;
 padding-top:4px;
 padding-bottom:4px;
 max-width:52px;
}
.qab3div {
 padding-bottom:4.5px !important;
}
.qab30pad {
 padding-left:30px;
 padding-right:30px;
 margin-right:4px; 
}
.qab60pad {
 padding-left:60px;
 padding-right:60px;
}
input.sidebut:focus, textarea { 
 outline: none !important; 
}
.allproline {
 display:inline-block;
 width:90%;
 padding:6px 0; 
 padding-left:6px;
 vertical-align:middle;
 overflow-x:hidden;
}
.sidebut, .allproline {
 color:#1a4a77;
 font-weight:normal;
 background-color: #fff; 
}
.sidebut:hover {
 font-weight:bold;
}
.allproline:hover {
 background:#fff; 
 font-weight:bold;
 color:#1a4a77;
}
.idselected { /* allpro selected */
 font-weight:bold;
 border:0;
 text-decoration:underline;
}
#qab {
 margin-top:2px; 
 margin-left:6px; /* resize sidebar */
 padding:12px;
 font-size:1.4em;
 border:0px outset #ccc;
}
#curview {
 width:172px;
 max-width:172px;
 margin:auto;
 margin-top:8px; 
 margin-bottom:16px;
 padding:2px;
 color:olive; 
 border:0px ridge #ddd;
 font-size:0.9em;
 vertical-align:middle;
 text-align:center;
}
#crepro { 
 margin-top:2px;
 margin-bottom:6px;
 margin-left:6px; /* resize sidebar */
 padding:8px;
}
#qab, #crepro {
 background: whitesmoke;
 color: #1a4a77;
 -webkit-border-radius:0px;
 border-radius:0px; 
}
.recenttitle {
 clear:both;
 width:100%;
 background-color:#fff;
 color:black;
 font-weight:bold;
 font-size:0.9em;
 margin-left:3px; 
 padding:6px 0;
 padding-left:3px;  
 border:0 solid #aaa;
}
.newproitem {
 background:none;
 background-color:#fff;
 font-size:0.9em;
 color:#1a4a77;
}
.colsbox .ui-widget-header {
 border: 1px solid #aaa;
 background: #eee;
 color: #1a4a77;
}
.resizeblock {
  border-bottom:1px solid #ccc;
  overflow-x:hidden;
  overflow-y:auto;
}
.sideprojsblock {
  margin:auto;
  margin-top:4px;
}
.siderecentblock {
  margin:10px 0px 40px 0px;
  padding:0 0 20px 3px;
  width:100%;
  height:86px;
  max-height:100px;
}
.sideviewsblock{
 margin:auto;
 margin-top:18px;
}
.sideviewstable{
 padding:0;
 width:99%;
 margin:auto;
 text-align:left;
}
.projdiv {
 display:block;
 background-color:#fff;
 font-size:0.9em;
 border:0px solid #aaa;
 border-left:none;
 border-right:none;
 width:184px; /* with searchbox */
 margin:4px 0 0 3px;
 cursor:pointer;
}
.searchctrl {
 float:right;
 margin-right:4px;
}
.searchdiv {
 clear:both;
 margin-left:10px; /* resize sidebar  */
 background:#fff;
}
.combosearchbox {
 margin:auto;
 text-align:center;
 display:none;
}

/* Header */
#tableheader {
 width:100%;
}
.logoutcell {
 width:8%;
 font-size:0.9em;
}
.logouttable{
 border-spacing:0px;
 padding:0px 10px;
 font-size:0.8em;
}

.pagescontrols{
 padding-top: 20px;
 font-size:1.2em;
 clear:both;
}
.logocell{
 text-align:left;
 overflow:hidden;
}
.logospace{
 padding-left:16px; 
}
.mainheader{
 background: #676487;
 color:white;
 margin: 0px;
}
.mainheadercell {
 text-align:left;
}
.headerdatatable{
 border-collapse:collapse;
}
.headerline{
 border:1px solid white;
 font-weight:bolder;
}
.headercell{
 padding-right:40px;
}
.headerdcell{
 padding:4px;
 padding-right:6px;
}
.bannerlogo {
 max-width:500px;
 max-height:80px;
}
.companylogo {
 max-width:260px;
 max-height:80px;
}
.partnerlogo {
 max-width:260px;
 max-height:80px;
}
.partnerlogocell {
 text-align:left;
 overflow:hidden;
}
.userstatus {
 float:right;
 width:200px;
 max-width:200px;
 max-height:80px;
 border:1px ridge #ddd;
 background:linear-gradient(#FFF,#EEE);
 margin:8px 10px;
 font-size:0.9em;
 overflow:hidden 
}
.userchgwrap{
 width:90%;
 padding:6px;
}
.userchgform { 
 vertical-align:middle;
 border:1px solid #aaa;
 padding:20px;
 background:linear-gradient(#FFF,#DDD);
 }
.usertablewrapper {
 border-spacing:0px;
 padding:0;
 width:100%
}
.usertable { 
 border:1px ridge #aaa;
 padding:0;
 margin:0;
 margin-bottom:10px;
 width:100%;
}
.usercellwrap {
 padding-right:0px;
 width:50%;
}
.usercell {
 padding:6px;
 background:linear-gradient(#FFF,#EEE);
 width:50%;
}
.usertit {
 color:white;
 background-color:#1a4a77;
}
.usertmid {
 border-bottom:1px dotted #ddd;
}
.userdat {
 font-weight:bold;
 border-bottom:1px dotted #ddd;
}

/* Charts */
.chartsdivext {
 border-top:1px solid #1a4a77;
 border-left:1px solid #1a4a77;
 border-right:1px solid #1a4a77;
 margin-top:4px;
}
.chartstableext{
 margin:0px;
 padding:0px;
 background-color:white;
 width:100%; 
}
.chartsimgcell {
 border:0;	
 border-bottom:1px solid #1a4a77;
 /* -border-radius:5px;
 -webkit-border-radius:5px; */
}
.charttitle {
 color:#1a4a77;
 font-size:1.2em;
 padding:10px 0 0 10px;
 text-align:center; 
}
.piechartdiv {
 padding:10px 8px; 
 overflow:hidden;
}
.piefootnote {
 font-size:0.7em;
 margin:0px;
 text-align:center;
 width:200px;
 overflow:hidden;
}
div.piecharttable {
 width: 100%;
 height:300px; /* no less than 200 with few data */
 overflow:hidden; /* auto */ 
}
.pieslider {
 font-size:0.7em;
 text-align:left;
 padding-left:4px;
}
#conschart_div,#pageschart_div{ 
 width:900px; /* default size, recalc at .js */
}
.nochartsmsg { 
 padding:10px; 
}
.verticalmiddle {
 vertical-align:middle;
}

/* Settings/ZeroContract style */ 
.settingsbox { 
 width:99%;
 margin:0;
 padding:0;
 padding-right:30px;
 margin-top:6px;
 margin-bottom:30px;
 border:1px solid #aaa;
 background-color:white;
 overflow-x:auto;
}
.settingsblock {
 display:table;
 width:100%;
 padding-left:20px;
 border-bottom:1px solid #aaa;
}
.settingsblockleft {
 display:table-cell;
 width:90%;
}
.settingsbuttondiv {
 display:table-cell;
 text-align:center;
 vertical-align:middle;
}
.settingsbut { 
 font-size:1.0em;
 width:180px;
 height:40px;
 font-variant:none; 
}
.cellpicto
{
 overflow:auto;
 margin: 0;
 padding: 0;
}
.pictodiv {
 margin:0;
 padding:10px;
}
.pictoimg {
 height:380px;
 width:540px;
 vertical-align:top;
}
.vendorsel {
 text-align:left;
 height:60px;
 width:320px;
 overflow-y:auto;
}
.zemail {
 border-width:1px;
 margin:2px 0px;
 padding:4px;
 width:720px;
}
.pronamesinput {
 border-width:1px;
 margin:2px 0px;
 padding:8px;
 background-color:#fff;
}
.selectedlist {
 list-style-type:none;
 padding-left:0px;
}
.settingscustomer {
 width:660px; /* input box from .js */	
 padding:10px;
 padding-right:2px;
 overflow-x: auto;
}
.settingscheck {
 height:20px;
 width:18px;
 margin-left:0;
 padding-left:18;
}


/* New project */ 
.newprobox { 
 margin:0;
 margin-top:4px;
 padding:20px 2px 20px 40px;
 background-color:white;
 overflow:hidden;
 vertical-align:middle;
}
.newproboxst { 
 background-color:white;
 overflow-x:scroll;
 vertical-align:middle;
 width:55%;
 padding:20px 10px 24px 10px;
 margin-top:4px;
 margin-bottom:20px;
 margin-left:0;
 border:0px #aaa solid;
}
.protitle {
 font-weight:bold;
 font-size:1.4em;
 margin-bottom:26px;
}
.prosubtitle {
 text-align:justify;
}
.proinput {
 font-size:1.1em;
 background:whitesmoke;
 border:1px solid #aaa;
 -webkit-border-radius:5px;
 border-radius:5px;
 padding:1px 4px;
}
.nprocellA {
 width:26%;
 text-align:left;
 font-size:1.1em;
 padding-left:6px;
}
.nprocellB {
 text-align:left;
 width:30%;
}
.nprocellC {
 text-align:left;
 padding:0 6px;
}
.newprocell{
 padding-left:60px;
}
.newproright {
 padding-right:16px;
 width:40%;
}
.resdiv {
 font-weight:bolder;
 margin:20px auto;
 padding:10px;
}
.probutton {
 margin:20px 0 30px 0;
 font-variant:none;
 background:whitesmoke;
}
.probutton:hover {
 font-weight:bold;
 background:white;
}
.bigpad {
 padding:30px;
}
.allw {
 width:100%;
}
.allh {
 height:100%;
}
#createprobut, #newproinit {
 padding:16px;
 -webkit-border-radius:5px;
 border-radius:5px;
}
.disabled {
 opacity:0.5;
}
.platformpro {
 width:140px;
}
.platformicon {
 height:30px;
}
.platformlist {
 padding-right:20px;
}
.platbut {
 vertical-align:middle;
 -webkit-border-radius:5px;
 border-radius:5px;
 margin:8px auto;
 padding:6px;
 width:160px;
 background-color:#fff;
}
.pben {
 cursor:pointer;
 border:1px solid #666;
}
.plic {
 vertical-align:middle;
 padding:6px;
 width:140px;
 background-color:#333;
 border:1px solid #333;
 color:white;
}
.pbdis {
 border:1px solid #aaa;
 opacity:0.5;
}

.nprodiv .ui-buttonset {
 padding-top:10px 0; 
 margin-top:24px 0;
 text-align:left;
 overflow:auto;
}
.nprodiv .ui-buttonset .ui-button {
 font-weight:normal;
 width:160px;
 background:transparent;
 border:0;
}
.nprodiv .ui-buttonset .ui-button.ui-state-active {
 font-weight:bold;
 color:#aaa;
 border:1px solid #aaa;
}

#newpobgcont {
  padding:0;
} 
#newpobg {
  position:absolute;
  opacity:0.2;
  min-width:89%;
  max-width:89%;
  min-height:85%;
  min-height:85%;
  z-index:1;
}
.newpotable {
  padding:50px;
  margin:30px 20px;
  border:1px double;
 -border-radius:5px;
 -webkit-border-radius:5px;
 box-shadow: 4px 4px 2px #aaa;
}
.newpoform {
 position:absolute;
 display:inline-block;
 z-index:10;
}
.opaque {
 opacity:1.0;
}
.line {
  border:1px solid #ccc;
}
.newpocketcell {
 margin:auto;
 width:100%;
 height:40px;
 color:white;
 background-color:#1a4a77;
 border:1px solid #1a4a77;
 -border-radius:5px;
 -webkit-border-radius:5px;
 text-align:center;
}
select.gplist { 
 background:white;
 font-size:1.0em;
 padding:2px;
 margin-top:8px;
 -webkit-border-radius:5px;
 border-radius:5px;
}
.gplist option {
 font-size:1.0em;
 font-weight:bold;
 padding:4px 12px;
}
.gplist option:disabled {
 font-weight:normal;
 color:#ccc;
}

/* Index page */
.poweredcont {
 text-align:center;
 margin:54px 0 4px 0;
}
.poweredtext {
 font-size:0.8em;
}
.poweredcolor{
 color:#7b99d7;
}
.poweredimg img {
 width:80px;
}
.loginlogo {
 margin:0px auto;
 text-align:center;
 vertical-align:middle;
 width:60%
}
.loginlogo img {
 max-width:330px;
} 
.loginwrapper {
 width:760px;
 margin:auto;
 margin-top:130px;
 border:1px double #1a4a77;
 vertical-align:middle;
 padding:36px 40px;
 -border-radius:22px;
 -webkit-border-radius:22px;
 background-color:white;
}
.lwvert {
 width:180px;
 margin-top:100px;
}
.spacervert {
 padding:10px 1px;
}
select.llvert {
 width:30em;
}
.loginwait {
 width:90%;
 height:70px;
 margin:auto;
}
.loginbuttonvert {
  outline:0;
  background:#e2e2e2;
  width:100%;
  border:0;
  padding:15px;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.loginbutton {
 color:#1a4a77;
 height:50px;
 width:128px;
 vertical-align:middle;
 font-size:1.0em;
 background:whitesmoke;
 border:2px outset #1a4a77;
 -webkit-border-radius:4px;
 border-radius:4px;
}
.lheight {
 height:24px; /* Thai optimun */
 vertical-align:middle;
}
.lwidth {
 width:230px;
 vertical-align:middle;
}
.separator {
 margin:0px;
 border-width:0;
 color:#1a4a77;
 background-color:#1a4a77;
 height:1px;
}
.loginbox {
 vertical-align:middle;
 width:40%;
}
.logintextboxvert {
  outline:0;
  background:#f2f2f2;
  width:100%;
  border:0;
  margin:0 0 15px;
  padding:15px;
  box-sizing:border-box;
  font-size:14px;
}
.logintextbox {
 color:#1a4a77;
 border:1px solid #1a4a77; 
 -webkit-border-radius:4px;
 border-radius:4px;
 padding-left:4px;
 width:98%;
}
.logintext {
 color:#1a4a77;
}
#loginerr {
 width:99%;
}
.logintable {
 margin:0;
 padding:0;
 width:100%;
 color: #1a4a77;
 font-size: 1.0em;
}
select.loginlang { 
 background:white;
 color:#1a4a77;
 font-size:0.9em; 
 height:30px; /* 33 */
 text-align:left;
 border:1px solid #1a4a77;
 /*-moz-appearance:none;*//* to delete down arrow in FF*/
}
select.loginlang select { 
 border:1px solid #1a4a77;
}
select.loginlangvert { 
 background:#f2f2f2;
 padding:15px;
 box-sizing:border-box;
 font-size:14px;
 text-align:left;
 border:1px solid #bbb;
 /*-moz-appearance:none;*//* to delete down arrow in FF*/
}



.loading {
 position:absolute;
 top:200px;
 left:400px;
 z-index:10;  
}
.periodstable{
 width:100%;
 text-align:center;
 padding-right:44px;
}
#datefilter {
 width:100px;
}
.viewsicon {
 width:22px;
 margin:1px 4px;
}
.viewsiconbig {
 width:40px;
}
.viewsiconhuge {
 width:46px;
}
.viewsiconsmall {
 width:26px;
}

/* Menutree: overrides theme css */
.jstree ul {
 background: #fff;
}
.jstree li a {
 font-size:0.9em;
 color:#1a4a77;
 width:100%;
}
.jstree a.jstree-clicked { 
 border:0;
 background-color:#fff;
 font-weight:bold;
 text-decoration:underline; 
 padding:0px; 
 width:100%; 
}
.jstree a.jstree-hovered { 
 background:#fff; 
 border:1px solid #fff; 
 font-weight:bold; 
 margin-left:12px;
 color:#1a4a77; 
} 
/*.jstree a.jstree-search { color:red; }*/
/* a is all node/child line; ins is the icon */
/* leaf is for children nodes; open/closed are for root nodes */
.jstree .jstree-closed > a > ins, .jstree .jstree-open > a > ins, .jstree .jstree-leaf > a > ins { 
 background:none; 
 width:1px; 
 margin:0; 
 padding:0;
}


/* Snapshot */
#snaps-ext {
 margin:0 1px;
 padding:0;
 overflow:hidden;
}
.snapsec {
 border-top:1px solid #aaa;
 border-bottom:1px solid #aaa;
 padding:6px 8px;
 margin-top:10px; 
 background:linear-gradient(#BBB,#FFF);
 color:#333;
 border:1px outset #333;
 -webkit-border-radius:4px;
 border-radius:4px;
 box-shadow: 3px 3px 1px #aaa;
 font-size:1.0em;
 display:none;
}
.chartsdatatable{
 width:  100%;
 height: 100%;
 padding:6px 0px;
 text-align:left;
}
.chartsdataleft { 
 padding:0;
}
.chartsdataright { 
 width:100px;
 text-align:right;
 padding:0 4px 0 4px;
 border:0px solid red;
 white-space:nowrap;
 color:#333; 
}
.snapsdataright { 
 width:150px;
 text-align:right;
 padding:0 34px 0 14px;
 border:0px solid red;
 white-space:nowrap;
 color:#333; 
}
.longdata {
 width:200px;
 overflow:auto;
}
.subcell {
 font-size:0.9em;
 font-weight:normal;
}
.inner{
 padding-left:40px;
}
.softinner {
 padding-left:24px;
}
.cdticon {
 height: 22px;
 margin: 1px 5px;
}
.cdticonmini {
 height: 20px;
 margin: 0 3px;
}

/* Scorecard */
.scorestableext{
 margin:0px;
 padding:0px;
 background-color:white;
 width:99%;
}
.scorescol {
 width:47%;
}
.scoresext { 
 background-color: transparent;
 padding:0px;
 padding:20px;
}
.ratesbox {
 width:  100%;
 padding:6px 1px 0px 1px;
 text-align:left;
}
.scoresratioscell {
 font-size:0.9em; 
}
.statusbar {
 width: 120px; 
 margin:0 auto;
}
.titleband {
 border-top:1px solid #888;
 border-bottom:1px solid #888;
 padding:6px 8px;
 margin-top:0px; 
 background-color:#666;
 color:#efefef;
 border:1px outset #333;
 -webkit-border-radius:4px;
 border-radius:4px;
 box-shadow: 3px 3px 1px #666;
}
.indicbox {
 text-align:center;
 margin:auto;
 width:120px;
}
.gaugebox {
 width:60px; /*drawgauge at .js*/ 
 padding:0px;
 margin:auto;
 text-align:center;
}
.practimg {
 width:50px;
}
.miniblank {
 font-size:3px
}
.replaceusage {
}
.replacetech {
}
.scoresblockext {
 padding-left:16px;
 border-left:1px solid #888;
}
.bolive {
 background-color:olive;
}
.bbottom {
 border-bottom:1px solid #aaa;
}
.vbottom {
 vertical-align:bottom;
}
.leftblock {
 float:left;
 width:48%;
}
.rightblock {
 float:right;
 width:48%;
}

/* PrintersProfit */
.profitfooter {
 padding:10px 0;
 color: #1a4a77;
}
.gradblack {
 background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));      
}
.gradother {
 background: linear-gradient(rgba(0, 0, 0, 0), rgba(100, 100, 100, 0.2));      
}
.gradcyan {
 background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 255, 255, 0.2));    
}
.gradmagenta {
 background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 0, 255, 0.2));    
}
.gradyellow {
 background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 0, 0.2));      
}

/* Dates filter */
.datessel {
 width:99%;
 padding:10px;
 font-size:1.0em;
}

/* jquery dialog with themeroller */
.helpbox {
 border:1px solid #666 !important;
 top:0;
}
.helpbox .ui-widget-header {
 border:1px solid #aaa;
 background: #ddd;
 color:#1a4a77;
 font-variant:normal;
}
.helpbox .ui-widget-content {
 background:#fff !important;
 color:#1a4a77;
 font-size:0.9em;
}
.helpbox .ui-widget-content a:link    {text-decoration: underline; border:0px; outline:0; color: #1a4a77}
.helpbox .ui-widget-content a:visited {text-decoration: underline; border:0px; outline:0; color: #1a4a77}
.helpbox .ui-widget-content a:hover   {text-decoration: underline; border:0px; outline:0; color: red;}
.helpbox .ui-widget-content a:active  {text-decoration: underline; border:0px; outline:0; color: #1a4a77}

/* dialog for show/hide columns, toolbar settings, ... */
.colsbox .ui-widget-header {
 border:1px solid #aaa;
 background: #eee;
 color:#1a4a77;
}
.colsbox .ui-widget-content {
 background:#fff !important;
 color:#1a4a77;
 font-size:0.9em;
}
.colsbox { 
  background:#fff; 
  border:2px solid #1a4a77;
}
.colsbox .showhidediv  { width:100% }
.colsbox .showhidecell { width:25%; padding:0 4px; border-right:0.1em solid #aaa; }
.colsbox .shcelllast   { width:25%; padding:0 4px; }
.colsbox .toolbarbox   { width:100%; overflow:scroll; }
.colsbox .toolbarcell  { width:25%; padding:0 4px; border-right:0.1em solid #aaa; }
.colsbox .toolbarinput { vertical-align:middle; margin-top:6px }


/* Other */
tfoot input[type=text] {
  width: 80%;
  padding: 1px;
  box-sizing: border-box;
  color: #1a4a77;
}

.setbut {
  vertical-align:middle;
  cursor:pointer;
  -webkit-border-radius:5px;
  border-radius:5px;
  margin:auto;
  width:35px;
  background-color:#efefef;
}
.firebasebut {
  vertical-align:middle;
  cursor:pointer;
  -webkit-border-radius:5px;
  border-radius:5px;
  margin:auto;
  width:35px;
  background-color:#efefef;
}
#sendoffermessage:focus {
 outline: 1px dotted red;
 cursor: pointer;
}
.statuscontainer {
 border:1px dotted black;
 padding:2px 1px;
 overflow:hidden;
 text-align:left;
 width:150px;
}
.statuscolbars {
 margin:0;
}
.statusmonobar {
 margin:1;
}
.tabletitleicon {
 height: 14px;
}

/* Dialogs */
.dialdiv { 
 border:0px dotted red;
 padding:5px 10px;
 background:#fff !important;
 color:#1a4a77;
 font-size:1.0em;
}
.dialdiv select { 
 border:1px solid navy;
 margin-left:20px;
 background:white;
 color:#1a4a77;
 width:70px;
 height:1.2em;
 font-size:2.4em;
}
.daysformfield option { 
 font-size:14px;
}
.globaldaysformfield option { 
 font-size:14px;
}
select.consformfield {
 margin-bottom:5px;
 height:1.3em;
 background:white;
 color:#1a4a77;
 font-size:1.1em;
}
.dialicon {
 width:12%;
 padding:15px 5px 5px 10px;
 border:0px solid red;
}
.dialfooter {
 color:#1a4a77;
 margin-top: 10px;
 padding:5px;
 border:0px solid red;
}
.dialsubmsg {
 margin-top:10px;
 font-size: 1.0em;
}
.dialmainmsg {
 padding:12px 18px 30px 18px;
 border:1px dotted navy;
}
a.diallink {
 color:green;
 text-decoration: underline; 
 font-size:1.0em;
}
.dialcenter {
 margin:auto;
 width:60%;
 padding:5px;
 color:#1a4a77;
 text-align:center;
 border:0px dotted navy;
}
.dialvspace {
 margin-top:10px;
}
input.dialinnerbut {
 margin:auto;
 width:60px;
 color:#1a4a77;
 background:white;
 font-size:1.2em;
 padding:2px; 
 border:1px solid navy;
}

/* GroupShipping */ 
select.gslist { /* dropdown in table column */
 border:1px dotted #1a4a77;
 background:white;
 color:#1a4a77;
 font-size:0.9em;
 padding:2px;
}
.gslist option {
 font-size:1.2em;
 font-weight:bold;
}
.gslist option:disabled {
 font-weight:normal;
 color:#ccc;
}

.setday select,
.setmethod select {
 border:1px solid navy;
 margin-left:20px;
 padding:2px;
 background:white;
 color:#1a4a77;
 height:1.4em;
 font-size:1.8em; 
}
.setdayfield option {
 font-size:1.1em;
}
.setmethodfield option { 
 font-size:0.9em;
}

/* WinTarget Firebase */
#oksent {
 width:100%;
 margin:12px auto;
 text-align:center;
}
#oksent img {
 width:200px;
}
.instructions  {
 border:1px solid #eee;
 -webkit-border-radius:20px;
 border-radius:20px;
 background: #eee;
 padding:10px 26px;
 margin:auto;
 margin-top:10px;
 margin-bottom:30px;
}
.wtinfo {
 width:98%;
 margin:auto;
}


/* consumablesusage */
.ubarcont {
 display:block;
 width:250px;
 height:8px;
}
.ubarpart {
 float:left;
 height:8px;
}
.ubarlab {
 font-size:0.8em;
 margin-top:9px;
 text-align:center;
}

/* cpms config */
.cpmdiv { 
 border:0px dotted blue;
 padding:5px 10px;
 background:#fff !important;
 color:#1a4a77;
 font-size:1.0em;
}
.cpmdiv select { 
 border:1px solid navy;
 margin-left:20px;
 background:white;
 color:#1a4a77;
 font-size:1.0em;
}

/* ---------------- */
/* CPM configurator */
/* ---------------- */
#cpmconfigpage select, input, tr {
 color:#1a4a77;
}
#cpmconfigpage {
 margin:auto;
 width:1100px;
 height:1900px;
 background-color:#fff;
 padding:0 8px;
}
#cpmconfigheader {
 width:100%;
 padding:1px 4px;
}
#cpmtabs {
 padding:0;
 overflow:hidden;
}
.tabdiv {
 clear:both;
 overflow:hidden;
 width:100%;
 margin-top:0;
 padding:0px;
 background-color:#fff;
 border:2px solid #aaa;
 border-radius:10x;
 -moz-border-radius:10x;
 -webkit-border-radius:10px;
}
.configbut {
 font-size:1.2em;
 padding:10pt;
 margin:0 11pt;
 background:linear-gradient(#FFF,#DDD);
 color:#3ba9cd; 
 font-weight:bold;
}
.ui-tabs .ui-tabs-panel {
 background-color: #fff;
 border: 3px solid #999;
 border-top:0;
}
.ui-tabs .ui-widget-header {
 background: #999; 
 border: #999;
}
.sectiontitle {
 color: #1a4a77; /*2462c0;*/
 font-size:1.12em;
 font-weight:bold;
}
.sectiontable {
 width:100%;
}
.cpmtable  { background-color:#eee; }
.svcstable { padding:16px; }
.scantable { background-color:#fff; padding:16px; }
.commtable { background-color:#fff; padding:16px; } 

/* CPM tab */
.cpmcell {
 background-color:#fff;
 padding:10px 16px;
 color: #1a4a77;
 font-size:1.0em;
 vertical-align:middle;
}
.cpmlogocell {
 width:42%;
 text-align:center;
 background-color:#fff;
 border:0px solid #aaa;
 border-radius:10px 0 0 0;
 -moz-border-radius:10px 0 0 0;
 -webkit-border-radius:10px 0 0 0;
 padding:0;
}
.cpmconfiglogo {
 max-width:300px;
}
.cpmtitle {
 padding-right:30px;
}
.cpmdata {
 float:right;
 font-weight:bold;
}
.cpmselect {
 width:40px;
}

/* Services tab */
.svccell {
 background-color:#fff;
 padding:10px;
 color: #1a4a77;
 font-size:1.0em;
 height:26px;
 vertical-align:middle;
}
.snmp2c3 {
 width:70%;
 overflow:hidden;
 background-color:#fff;
 border:0px dotted black;
}
.subinner {
 padding-top:16px;
 padding-left:36px; 
}
.hright {
 float:right;
 margin:2px 20px 0 2px;
}

/* Scan tab */
.modescell {
 padding:10px;
 color:#1a4a77
}
.rmip {
 display: inline-block;
}
.rmrange {
 display: inline-block;
}
input.cpmmode {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    border:1px solid darkgray;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    outline:none;
    box-shadow:5px green inset;
}
input.cpmmode:hover {
    box-shadow:5px red inset;
}
input.cpmmode:before {
    content:'';
    display:block;
    width:60%;
    height:60%;
    margin: 20% auto;    
    border-radius:50%;    
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
} 
input.cpmmode:checked:before {
    background:green;
}

.addbuttonext {
 float:right;
 margin:14px 4px 1px 1px;
 text-align:right;
}
.importcont {
 float:right;
 margin:0;
 padding:0;
 text-align:right;
 overflow:hidden;
}
.addipext {
 float:right;
 margin:4px 4px 1px 1px;
 text-align:right;
}
.addipcont {
 float:right;
 margin:0;
 padding:0;
 text-align:right;
}

.ranges-table td {
 padding:8px;
 text-align:center;
 border:0px dotted yellow;
}
.ips-table td {
 text-align:left;
 padding:2px 12px;
}
.ips-block td {
 text-align:left;
 padding:2px 12px;
}
.newipbox {
 font-size:10px;
 margin-left:3.3em; /* 2.6em FF and 3.2 CHR when font 10px */
}
.errip {
 color:red;
 border-color:red;
}

.lbutton {
 display:inline-block;
 background:linear-gradient(#eee,#bbb);
 cursor:pointer;
 text-decoration:none;
 padding:4px; /*10px 10px 10px 6px;*/
 width:120px;
 text-align:center;
}
.extraimport {
 position:relative;
 overflow:hidden;
 margin:0;
}
.importbutton {
  position:absolute;top:0;right:0;
  margin:0;
  padding:8px 0;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
  width:100px;
  text-align:center;
}

/* Buttons / Save */
.apply-table {
 width:90%;
 background-color:#fff;
 padding:4px;
 margin:auto;
}
.applyheader {
 clear:both;
 margin:20px 0;
}
.applyleft {
 width:150px;
 height:100px;
}
.applyright {
 vertical-align:middle;
 padding:0 4px;
}
.applyresult {
 display:block;
 margin:20pt auto;
}

.pbutton {
 background:linear-gradient(#eee,#bbb);
 border:1px solid #bbb;
 border-radius:5px;
 padding:8px 10px;
 cursor:pointer;
}
.plbutton {
 background:linear-gradient(#eee,#bbb);
 border:1px solid #bbb;
 border-radius:5px;
 padding:16px 10px;
 cursor:pointer;
}
.pbutton:-moz-focus-inner { border: 0; }
.pbutton label { 
 color:#333;
 cursor:pointer;
}
.plbutton label { 
 color:#333;
 margin:0 8px;
 cursor:pointer;
}
.saveimg {
 width:24px;
}

/* TABS index */
.hbutton {
 background:linear-gradient(#fff,#ccc);
 border:1px solid #ccc;
 border-radius:5px;
 text-decoration:none;
 font-weight:bold;
 color:#1c94c4;
 padding:6px 14px;
 cursor:pointer;
}
.hbutton:active  {text-decoration: none; border:0px; outline:0; color:red; }
.hbutton::-moz-focus-inner { border: 0; }
.hlink {
 cursor:pointer;
 margin:0 2px;
}
#cfghelpicon {
 border:1px solid #fff;
 border-radius:5px;
 height:28px;
 vertical-align:middle;
}

/* Calendar */
.calwrapper {
 width:98%;
 margin:auto;
 padding:26px;
 padding-left:0;
}
.calbox {
 width:98%;
 font-size:1.35em;
 margin:1.2em 0;
 overflow:auto;
}
.evdatebox {
 width:70%;
 font-size:1.0em;
 overflow:auto;
}
.evdatesel {
 text-align:center;
 width:90px;
 font-size:1.0em;
 border:0;
 background-color:white;
}
.evlistbox {
 width:70%;
 overflow:auto;
}
.evlist {
 padding:1em 0.8em;
 font-size:1.0em;
 width:97%
}
.consalert a {
    background-color: #5FBA7D !important;
    color: green !important;
}
.manyalerts a {
    background-color: #5FBA7D !important;
    color: darkorange !important;
    font-size:1.2em;
}
.technicianalerts a {
    background-color: #5FBA7D !important;
    color: red !important;
    font-size:1.2em;
}
#datecalendar .ui-datepicker-current-day a {
 color: black !important; 
}
.eventstable {
 width:94%;
 min-width:60%;
 padding:0;
 margin-bottom:8px;
 border:1px solid #aaa; 
 background-color: #eee;
 overflow:auto;
} 
.eventstable th {
 width:50%;
 padding:4px;
 background-color: #aaa;
 border-collapse:collapse;
}
.eventstable td {
 padding:2px 15px;
 background-color:#eee;
}
.evsn {
 font-size:1.0em;
 color:white;
}
#datecalendar .ui-datepicker-prev, #datecalendar .ui-datepicker-next 
{
 display:none;
}
/* For specific themes
#datecalendar .ui-datepicker-header {
 background: #888;
 border-color: #666;
}*/


/* ---------------- */
/* GLOBAL PANEL     */
/* ---------------- */
/*
$base-font-size: 1em;
$base-line-height: 1.5;
$base-margin: 0 4%;

#globalcenter {
  font-size: $base-font-size;
  line-height: $base-line-height;
}
*/
.globalcenter {
 box-sizing:border-box;
 background-color:#000;
 color:white;
 width:100%;
 padding:.6em .4em;
 padding-bottom:.75em;
 margin:0 auto;
 text-align:center;
}
.singlebox {
 width:99%;
 margin:.9em auto;
}
.globpablock  {
 width:100%;
 margin:.9em auto; 
 text-align:center;
}
.globpabox  {
 background:linear-gradient(#000,#222);
 border:.14em solid deepskyblue;
 -webkit-border-radius:.4em;
 border-radius:.4em;
 padding:.4em;
 text-align:left;
 overflow:hidden;
}
.globpabox li, .globpabox div
{
 color:white;
 font-size:1.3em;
 list-style-type: circle;
}
.globpabox li span {
 color: deepskyblue;
}
.globpabox table {
 width:100%;
 padding:.2em;
} 
.globpa_calerts, .globpa_talerts, .globpa_machines, 
.globpa_projects, .globpa_users 
{
 color: deepskyblue;
 font-size:1.3em;
}
.globpaboxtitle {
 border-bottom:0.05em dotted deepskyblue;
 padding:0.3em;
 padding-bottom:0.5em;
}
.globpaboxtitle span {
 color:white;
 font-size:1.6em;
}
.titleval {
 float:right;
 color: deepskyblue;
}
.globpachart {
 margin:auto;
 height:238px;/* RESPONSIVE */
 overflow:hidden; /* RESPONSIVE */
 background-color:#000;
}
.inline {
 display:inline-block;
}
.onethree {
 width:32%;
 /*min-height of around XXpx in media queries */ /* RESPONSIVE */
 min-height:200px; /* For empty boxes and also to be homogeneous boxes */
 max-height:200px; /* For same size in same line */ /* Need same height as charts or delete globpabox from chart boxes! */
 margin:0 0.2em; 
}
.gcicon {
}
.gcclock {
 padding:0.4em 0;
}
#gcdatetime {
 width:60%;
 margin:auto;
 padding:.2em 0;
 text-align:center;
 font-size:2.6em;
 color:#fff;
}


/* ---------------- */
/* LLM Chatbot	    */
/* ---------------- */
.llmwrapper {
 width:98%;
 margin:auto;
 padding:6px 6px 6px 0;
 background-color:#333 !important; /* NBP Nubai dark theme */
}

/* NBP Nubai dark theme */
.llmwrapper a {
 color:#42c3f7;
}
.llmwrapper a:hover {
 color:yellow;
}

#llmloadingmsg {
 position:absolute;
 top:500px;
 left:600px;
 z-index:10;  
}
.nubaibg {
 /*background-color: #b0d4f3; */
 background-color: #333;
}
.nubaiwrapper {
        width:90%;
	margin:auto;
	border-radius: 10px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	/*background-color: #f8f8f8;*/
	background-color: #444 !important;
	overflow: hidden;
}
.nubailoading {
	position:absolute;
	top:40px !important;
	left:100px !important;
}
.row.padded_row,
.row.padded_row > div {
	padding-top: 20px;
	padding-bottom: 20px;
}
.chat_window {
        width:90%;
	border-radius: 10px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	/*background-color: #f8f8f8;*/
	background-color: #777;
	overflow: hidden; 
}
.top_menu {
	/*background-color: #fff;*/
	background-color: #111;
	padding: 4px 0px; 
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
	text-align: center;
	/*color: #337ab7;*/
	color: #8ca1b3;
	font-size: 24px;
}
#nubaititle {
	height:40px;
	padding-top:10px;
	padding-bottom:5px;
	font-weight:bold;
	font-size:1.2em;
	color:#42c3f7; /* NBP Nubai dark theme */
}
#nubaititlewaiting > img {
	height:40px;
	padding-top:10px;
	padding-bottom:5px;
}
.nubaicon {
 width:24px;
}
.dlicon {
 width:34px;
}
.ntable {
 display:table;
 width:100%;
 text-align:center;
}
.nrow {
 display:table-row;
}
.ncleft {
 width: 16%;
}
.ncmid {
 width: 68%;
}
.ncright {
 width:16%;
}
.nbext {
 overflow:hidden;
}
.llmwaitingmsg {
 color:#aaa !important;
 font-size:.8em;
 font-style:italic;
}
.llmdisclosure {
 color:#ccc !important; /* NBP Nubai dark theme */
 /*font-size:.9em;*/
 font-size:1.0em;
 font-style:italic;
}
.nubaimg{
 height:350px;
 max-height:350px;
}


/* messages inside the chatbox */
.messages {
	position: relative;
	list-style: none;
	padding: 20px 10px 0 10px;
	margin: 0;
	height: 550px;
	overflow: auto; /* NBP */
	border:0px dotted pink;
}
.messages .message {
	clear: both;
	overflow: hidden;
	margin-bottom: 20px;
	transition: all 0.5s linear;
	opacity: 0;
}
.messages .message .avatar { 
	height: 40px;
	width: 40px;
	background-size: cover !important;
	border-radius: 50%;
	display: inline-block;
}
.messages .message .timestamp {
	font-size: 10px;
	font-weight: 300;
	text-align: right;
	margin-top: 7px;
}
.messages .message.appeared {
	opacity: 1;
}
.messages .message .text_wrapper {
	display: inline-block;
	padding: 20px;
	border-radius: 6px;
	min-width: 150px;
	position: relative;
}
.messages .message .text_wrapper::after,
.messages .message .text_wrapper:before {
	top: 18px;
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.messages .message .text_wrapper::after {
	border-width: 13px;
	margin-top: 0px;
}
.messages .message .text_wrapper::before {
	border-width: 15px;
	margin-top: -2px;
}

/* bot message */
.messages .message.left {
	white-space:nowrap;
}
.messages .message.left .avatar {
	float: left;
	background: url('../images/llmwaiting.gif'); 
}
.messages .message.left .text_wrapper { 
	/*background-color: #f3eeca;*/
	background-color: #1f1f1f;
	margin: 2px 30px;
	color: #42c3f7; /* NBP Nubai dark theme */
	white-space: normal;
}
.messages .message.left .text_wrapper::after,
.messages .message.left .text_wrapper::before {
	right: 100%;
	/*border-right-color: #f3eeca;*/
	border-right-color: #1f1f1f;
}
.messages .message.left .timestamp {
	/*color: #b0742f;*/
	color: #c7c7c7;
	margin: 4px 8px;
}
.messages .message.left .ratingicon {
  width:14px;
}


.scroller {
    --scrollbar-color-thumb: #42c3f7;
    --scrollbar-color-track: #777;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}



.downloadElement {
  overflow-x:auto;
  padding-top:30px;
  margin-bottom:5px;
}
.xlsTable {
 white-space:nowrap;
 width:95%;
 border:0px solid #777;
 margin:6px 1px;
}
.th-row {
 white-space:nowrap;
 text-align:center;
 background-color:#444;
 color:#eee;
 padding:6px;
 border-bottom:1px solid #333;
}
.td-row {
 white-space:nowrap;
 text-align: left; 
 background-color:#333;
 color:#ccc;
 padding:2px 6px;
}

/* user message */
.messages .message.right .avatar {
	float: right;
	background: url('../images/llm_question.png');
}
.messages .message.right .text_wrapper {
	/*background-color: #b0d4f3;*/
	background-color: #333;
	margin-right: 20px;
	float: right;
        color: #42c3f7; /* NBP Nubai dark theme */
	max-width:600px;

}
.messages .message.right .text_wrapper::after,
.messages .message.right .text_wrapper::before {
	left: 100%;
	/*border-left-color: #b0d4f3;*/
	border-left-color: #333;
}
.messages .message.right .timestamp {
	/*color: #1a5770;*/
	color: #c7c7c7;
}


/* text input from user */
.bottom_wrapper {
	/*background-color: #fff;*/
	background-color: #111 !important;
	padding: 20px;
	bottom: 0;
	display: flex;
}
.bottom_wrapper #question {
	flex-grow: 1;
	outline-width: 0;
	padding: 12px;
	border: 1px solid #bcbdc0;
	border-radius: 50px;
	margin-right: 15px;
	background-color:#333; /* NBP Nubai dark theme */
	color:#42c3f7; /* NBP Nubai dark theme */
}
.app_button_1 {
	width: 140px;
	/*background-color: #b0d4f3;*/ /* #a3d063; */
	background-color: #333;
	border-radius: 50px;
	cursor: pointer;
	padding: 12px;
	/*color: #1a5770;*/
	color: #42c3f7;
	font-size: 18px;
	font-weight: 300;
	text-align: center;
}

/* example bubbles */
.bubble {
  --r: 25px; /* the radius */
  --t: 30px; /* the size of the tail */
  
  max-width: 300px;
  padding: calc(2*var(--r)/3);
  -webkit-mask: 
    radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
      var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
      calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
    radial-gradient(50% 50%,#000 98%,#0000 101%) 
      0 0/var(--r) var(--r) space padding-box;
  background: linear-gradient(135deg,#74af96,#1384C5) border-box; 
  color: #fff;
  margin:34px auto;
}
.bubble_left {
  --_d: 0%;
  border-left: var(--t) solid #0000;
  margin-right: var(--t);
  place-self: start;
}
.bubble_right {
  --_d: 100%;
  border-right: var(--t) solid #0000;
  margin-left: var(--t);
  place-self: end;
}


/***************************/
/*     Media Queries       */
/***************************/

/* TABLET / IPAD / G.PIXEL PORTRAIT / Small Desktop */
@media screen and (max-width: 990px) {  

  .globalcenter {
    background-color:#000;
  }
  .globpa_calerts, .globpa_talerts, .globpa_machines, 
  .globpa_projects, .globpa_users {
    color: deepskyblue;
    font-size:1em;
  }
  .globpaboxtitle span {
    font-size:1.2em;
  }
  .globpabox li, .globpabox div {
    font-size:1.2em;
  }
  #gcdatetime {
   font-size:2.4em;
  }
  .gcicon {
   height:70%;  
  }

  /* Nubai */
  .nbspacer { display: none; }
  .nblogo { width:100%; padding:60px; }
  .ncleft { display:none; }
  .ncright { display:none; }
  .ncmid { width: 100%; }
  .app_button_1 { 
     font-size: 2.4em; 
  }
  .nubaiwrapper .messages { 
    height: 1200px; 
    padding-bottom: 40px; 
    font-size: 2.4em;
  }
  .nubaiwrapper #question { font-size:2.4em; } 
  .llmdisclosure { font-size: 1.0em; color:#ddd; } /* NBP Nubai dark theme */
  #nubaititle { font-size: 1.8em; }  
  #ncdown { 
    display: none; 
    padding-bottom:140px; 
  }

}


/* Small Smart phone / Very Small Desktop */
@media screen and (max-width: 767px) {
  .globalcenter {
    background-color:#000;
  }
  .globpa_calerts, .globpa_talerts, .globpa_machines, 
  .globpa_projects, .globpa_users {
    color: deepskyblue;
    font-size:0.9em;
  }
  .globpaboxtitle span {
    font-size:1em;
  }
  .globpabox li, .globpabox div {
    font-size:1.1em;
  }
  #gcdatetime {
   font-size:2.2em;
  }
 .gcicon {
   height:40%;  
  }

 /* Nubai */
 .nbspacer { display: none; }
 .nblogo { width:100%; padding:60px; }
 .ncleft { display:none; }
 .ncright { display:none; }
 .ncmid { width: 100%; }
 .app_button_1 { 
     font-size: 1.4em; 
  }
 .nubaiwrapper .messages { 
   height: 1000px; 
   padding-bottom: 40px; 
   font-size: 2.0em;
 }
 .llmdisclosure { font-size: 0.9em; }
 #nubaititle { font-size: 1.2em; color:olive; } 
 #ncdown { 
    display: none; 
    padding-bottom:140px; 
 }

}


/* Smart phone portrait */
@media screen and (max-width: 499px) { 

  #globalcenter {
    background-color:#000;
  }
  .globpa_calerts, .globpa_talerts, .globpa_machines, 
  .globpa_projects, .globpa_users {
    color: deepskyblue;
    font-size:0.8em;
  }
  .globpaboxtitle span {
    font-size:0.9em;
  }
  .globpabox li, .globpabox div {
    font-size:0.8em;
  }
  #gcdatetime {
   font-size:1.9em;
  }
  .gcicon img {
    display:none;
  }

  /* Nubai */
  .nbspacer { display: none; }
  .nblogo { width:100%; padding:60px; }
  .ncleft { display:none; }
  .ncright { display:none; }
  .ncmid { width: 100%; }
  .app_button_1 { 
     font-size: 1.4em; 
  }
  .nubaiwrapper .messages { 
    height: 1000px; 
    padding-bottom: 40px; 
    font-size: 2.0em;
  }
  .llmdisclosure { font-size: 0.9em; }
  #nubaititle { font-size: 1.4em; color:black; }  
  #ncdown { 
    display: none; 
    padding-bottom:140px; 
  }

}