.hidden { display: none; }
.ui-right { text-align: right; }
.ui-center { text-align: center; }

pre { margin-top: 5px; }

input:-ms-input-placeholder, input:-webkit-input-placeholder, input:-moz-input-placeholder { color: silver; }
input[type="text"]:disabled, input[type="password"]:disabled, select:disabled { background-color: #F0F0F0; cursor: not-allowed; color: silver; }
input:invalid { box-shadow: none; }

.ui-textbox-container * { box-sizing: border-box; }
.ui-textbox { height: 32px; border: 1px solid #E0E0E0; border-radius: 2px; position: relative; width: 100%; background-color: white; display: table; }
.ui-textbox-input { display: table-cell; padding: 8px 2px 0 5px; }
.ui-textbox-input input { font: normal 14px Arial; border: 0; outline: 0; color: black; width: 100%; background-color: white; margin: 0; padding: 0; appearance: none; border-radius: 0; vertical-align: top; }
.ui-textbox-control { position: relative; vertical-align: middle; display: table-cell; text-align: center; white-space: nowrap; text-overflow: clip; border-left: 1px solid #E0E0E0; width: 32px; color: #00A8E3; }
.ui-textbox .fa-times { color: red; cursor: pointer; }
.ui-textbox-label { margin-bottom: 5px; font-size: 12px; text-align: left; }
.ui-textbox-label .fa { margin-right: 5px; }
.ui-textbox-label-required { font-weight: bold; }
.ui-textbox-label-required:before { color: red; content: '***'; margin-right: 5px; }
.ui-textbox-invalid { border-color: #E1A1A1 !important; background-color: #FFF3F3 !important; }
.ui-textbox-invalid input { background-color: #FFF3F3 !important; }
.ui-textbox-invalid .ui-textbox-control { border-color: #E1A1A1 !important; }
.ui-textbox .fa-caret-up, .ui-textbox .fa-caret-down { display: block; line-height: 9px; cursor: pointer; }
.ui-textbox .fa-calendar { cursor: pointer; }
.ui-textbox-helper { margin-top: 8px; font-size: 11px; color: red; text-align: left; display: none; }
.ui-textbox-helper-show { display: block; }
.ui-textbox-container.ui-disabled .ui-textbox { background-color: #F0F0F0; cursor: not-allowed; }
.ui-textbox-container.ui-disabled .ui-textbox input { background-color: #F0F0F0; }

.ui-clock * { box-sizing: border-box; font-size: 12px; }
.ui-clock { font-size: 12px; position: absolute; background-color: #FFF; max-width: 250px; width: 100%; border: 1px solid #E0E0E0; left: 100px; top: 100px; border-radius: 2px; z-index: 100; color: gray; box-shadow: 0 5px 25px rgba(0,0,0,0.1); opacity: 0; filter: alpha(opacity=0); transform: scale(0.6); -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; }
.ui-clock-visible { transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
.ui-clock-header { height: 40px; font-weight: bold; border-bottom: 1px solid #E0E0E0; text-align: center; font-size: 16pt; padding: 5px 10px 0; }
.ui-clock-header a { cursor: pointer; font-size: 16pt; color: gray; }
a.ui-clock-active { color: #0095DD; }
.ui-clock-body { background-color: #f9f9f9; width: 250px; height: 220px; }
.ui-clock-holder { position: absolute; left: 20px; border: 1px solid #ccc; background-color: #fff; border-radius: 50%; width: 200px; height: 200px; margin-top: 10px; }
.ui-clock-dial { width: 200px; height: 200px; position: absolute; left: -1px; top: -1px; }
.ui-clock-minutes { visibility: hidden; }
.ui-clock-tick { border-radius: 50%; color: #666; line-height: 26px; text-align: center; width: 26px; height: 26px; position: absolute; cursor: pointer; }
.ui-clock-tick-selected { background-color: RGBA(0,149,221,0.2); }
.ui-clock-swap { left: 85px; top: 87px; font-size: 16pt; position: absolute; cursor: pointer; }
.ui-clock-footer { border-top: 1px solid #E0E0E0; background-color: #F0F0F0; padding: 8px 10px; }

.ui-error { margin: 0 0 15px; padding: 0; list-style-type: none; border: 2px solid #BE3A48; border-left-width: 0; border-right-width: 0; padding: 10px 0; color: #BE3A48; font-family: Arial; font-size: 14px }
.ui-error .fa { width: 16px; }

.ui-calendar * { box-sizing: border-box; font-size:12px; }
.ui-calendar { font-size: 12px; position: absolute; background-color: white; max-width: 280px; width: 100%; border: 1px solid #E0E0E0; left: 100px; top: 100px; border-radius: 2px; z-index: 100; color: gray; box-shadow: 0 5px 25px rgba(0,0,0,0.1); opacity: 0; transform: scale(0.6); transition: all 0.2s; }
.ui-calendar-visible { transform: scale(1); opacity: 1; }
.ui-calendar-table { padding: 10px; }
.ui-calendar table { width: 100%; margin: 0; table-layout: fixed; }
.ui-calendar table td { text-align: center; vertical-align: middle; font-size: 11px; color: #505050; }
.ui-calendar table td div { margin: 2px; padding: 5px 0; border-radius: 4px; }
.ui-calendar table th { padding: 8px 0 5px; text-align: center; width: 14%; vertical-align: middle; font-weight: bold; font-size: 12px; color: black; }
.ui-calendar-disabled { color: silver !important; cursor: pointer; }
.ui-calendar-day {}
.ui-calendar-day-today div { background-color: #F0F0F0; font-weight: bold; }
.ui-calendar-selected div { background-color: RGBA(0,149,221,0.2);; font-weight: bold; }
.ui-calendar-day:hover div { background-color: RGBA(0,149,221,0.2); cursor: pointer; }
.ui-calendar button { background-color: white; border: 0; outline: 0; border: 1px solid #D0D0D0; border-radius: 3px; width: 24px; height: 21px; font-size: 11px; line-height: 0; text-align: center; padding: 0; vertical-align: middle; cursor: pointer; }
.ui-calendar button:hover { background-color: RGBA(0,149,221,0.2); }
.ui-calendar-header { height: 40px; border-bottom: 1px solid #E0E0E0; padding: 0 10px 0; }
.ui-calendar-header-info { text-align: center; width: 188px; float: left; font-size: 14px; margin: 8px 0 0 7px; font-weight: bold; color: black; }
.ui-calendar-header-prev { float: left; margin-top: 9px; }
.ui-calendar-header-next { float: right; margin-top: 9px; }
.ui-calendar-today { padding: 8px 10px; border-top: 1px solid #E0E0E0; background-color: #F0F0F0; }
.ui-calendar-today .fa { margin-right: 6px; }
.ui-calendar-header select { background-color: white; border: 1px solid #E0E0E0; height: 23px; outline: 0; cursor: pointer; appearance: none; padding: 0 10px; border-radius: 3px; }
.ui-calendar-today a:first-child { float: right; color: #B7292E; font-weight: bold; }

.linkbutton100 { background-color: #439DE3; color: white!important; display: block; border: 1px solid #00A8E3; padding: 5px 0; text-align: center; border-radius: 50px;  font-family: Arial; font-size: 20px;  text-decoration: none; }
.linkbutton100:hover { color: white; text-decoration: none; background-color: #439DE3; }
.linkbutton100:focus { color: white; text-decoration: none; background-color: #439DE3; }
.linkbutton100:active{ color: white; text-decoration: none; background-color: #439DE3; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);  }
.linkbutton100_disabled { color: white; text-decoration: none; background-color: silver!important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); border: 1px solid silver; }

.linkbutton { background-color: #439DE3; color: white!important; display: block; border: 1px solid #00A8E3; padding: 2px 0; text-align: center; border-radius: 50px;  font-family: Arial; font-size: 14px;  text-decoration: none; }
.linkbutton:hover { color: white; text-decoration: none; background-color: #439DE3; }
.linkbutton:focus { color: white; text-decoration: none; background-color: #439DE3; }
.linkbutton:active{ color: white; text-decoration: none; background-color: #439DE3; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);  }

.linkbuttonSmall { background-color: #01A7E3; color: white!important; border: 1px solid #00A8E3; padding: 3px 6px; text-align: center; border-radius: 50px;  font-family: Arial; font-size: 14px;  text-decoration: none; }
.linkbuttonSmall:hover { color: white; text-decoration: none; background-color: #01A7E3; }
.linkbuttonSmall:focus { color: white; text-decoration: none; background-color: #01A7E3; }
.linkbuttonSmall:active{ color: white; text-decoration: none; background-color: #01A7E3; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);  }

.linkbutton2 { margin-top:10px;  display: block; padding: 2px 0; text-align: center; border-radius: 50px;  font-family: Arial; font-size: 14px;  text-decoration: none; }
.linkbutton2:hover { text-decoration: none;  }
.linkbutton2:focus { text-decoration: none;  }
.linkbutton2:active{  text-decoration: none;  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);  }

.header .item { padding-left: 1px!important; padding-right: 1px!important}

.header .barleft { background-color: silver; color: black!important; border: 1px solid silver; padding: 3px 6px; text-align: center; border-top-left-radius: 50px; border-bottom-left-radius: 50px;  font-family: Arial; font-size: 12px;  text-decoration: none; } 
.header .barmiddle { background-color: silver; color: black!important; border: 1px solid silver; padding: 3px 6px; text-align: center; font-family: Arial; font-size: 12px;  text-decoration: none; } 
.header .barright { background-color: silver; color: black!important; border: 1px solid silver; padding: 3px 6px; text-align: center; border-top-right-radius: 50px; border-bottom-right-radius: 50px;  font-family: Arial; font-size: 12px;  text-decoration: none; } 


.ui-loading { position: fixed; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); left: 0; top: 0; z-index: 1000; }
.ui-loading div { animation: loading 333ms alternate infinite cubic-bezier(0.2,0,0.5,1); width: 50px; height: 50px; background-color: black; position: absolute; left: 50%; top: 50%; border-radius: 100px; margin: -25px 0 0 -25px; }

@keyframes loading {
  to {
    transform: scale(0.4);
    background-color: silver;
  }
}

.ui-dropdown-container * { box-sizing: border-box; font-size: 14px; }
.ui-dropdown-values { position: relative; display: block; height: 32px; text-align: left; }
.ui-dropdown { border: 1px solid #E0E0E0; padding: 0 5px 0 10px; border-radius: 2px; outline: 0; height: 32px; overflow: hidden; float: left; width: 100%; background-color: white; position: relative; }
.ui-dropdown:after { border-left: 1px solid #E0E0E0; width: 1px; position: absolute; height: 30px; content: ' '; margin-left: -23px; }
.ui-dropdown select { width: 100%; outline: 0; border: 0; height: 24px; background: white url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNDA4IDEwODhxMCAyNi0xOSA0NWwtNDQ4IDQ0OHEtMTkgMTktNDUgMTl0LTQ1LTE5bC00NDgtNDQ4cS0xOS0xOS0xOS00NXQxOS00NSA0NS0xOWg4OTZxMjYgMCA0NSAxOXQxOSA0NXptMC0zODRxMCAyNi0xOSA0NXQtNDUgMTloLTg5NnEtMjYgMC00NS0xOXQtMTktNDUgMTktNDVsNDQ4LTQ0OHExOS0xOSA0NS0xOXQ0NSAxOWw0NDggNDQ4cTE5IDE5IDE5IDQ1eiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==) no-repeat 100% 50%; background-size: 14px; font-size: 14px; float: left; cursor: pointer; padding: 0; margin: 3px 0 0 -4px; color: black; -webkit-appearance: none; }
.ui-dropdown-label { margin-bottom: 5px; font-size: 12px; }
.ui-dropdown-label .fa { width: 14px; }
.ui-dropdown-label-required { font-weight: bold; }
.ui-dropdown-label-required:before { color: red; content: '***'; margin-right: 5px; }
.ui-dropdown-invalid { border-color: #E1A1A1 !important; background-color: #FFF3F3 !important; }
.ui-dropdown-invalid select { background-color: #FFF3F3 !important; }
.ui-dropdown-invalid:after { border-left-color: #E1A1A1 !important; }
.ui-disabled select { background-color: #F0F0F0; cursor: not-allowed; color: #A0A0A0; }
.ui-disabled .ui-dropdown { background-color: #F0F0F0; cursor: not-allowed; }
.ui-disabled .ui-dropdown .fa { color: #A0A0A0; }

.ui-checkbox * { box-sizing: border-box; }
.ui-checkbox { margin-bottom: 5px; line-height: 10px; font-size: 12px; }
.ui-checkbox span { cursor: pointer; vertical-align: middle; }
.ui-checkbox div { position: relative; display: inline-block; width: 16px; height: 16px; border: 2px solid #E0E0E0; margin-right: 6px; vertical-align: middle; cursor: pointer; color: white; font-size: 11px; text-align: center; padding: 1px 0 0 1px; background-color: white; border-radius: 3px; }
.ui-checkbox .fa { display: none; }
.ui-checkbox-checked div { background-color: #017CCA; border-color: #017CCA; }
.ui-checkbox-checked .fa { display: block !important; }
.ui-checkbox.ui-disabled div { background-color: #F0F0F0 !important; border-color: #E0E0E0 !important; color: gray !important; }