@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Regular.eot');
  src: url('/fonts/OpenSans-Regular.woff2') format('woff2'),
       url('/fonts/OpenSans-Regular.woff') format('woff'),
       url('/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg'),
       url('/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Bold.eot');
  src: url('/fonts/OpenSans-Bold.woff2') format('woff2'),
       url('/fonts/OpenSans-Bold.woff') format('woff'),
       url('/fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg'),
       url('/fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Italic.eot');
  src: url('/fonts/OpenSans-Italic.woff2') format('woff2'),
       url('/fonts/OpenSans-Italic.woff') format('woff'),
       url('/fonts/OpenSans-Italic.svg#OpenSans-Italic') format('svg'),
       url('/fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: italic;
}



/* COMMON */
*                     { margin: 0px; padding: 0px; }
*                     { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }   /* prevent text resizing / mobile browsers */

h1                    { padding: 0px 0px 15px 0px; font-size: 1.6em; color: #444; }
h2, h3                { padding: 0px 0px 10px 0px; font-size: 1.4em; color: #444; }
h4, h5                { padding: 0px 0px 5px 0px; font-size: 1.2em; color: #444; }

p                     { padding: 0px 0px 10px 0px; color: #666; }

img                   { vertical-align: bottom; border: none; }

a                     { text-decoration: underline; outline: 0; font-size: 1em; color: #000; font-weight: bold; }
a:hover               { text-decoration: none; outline: 0; color: #000; font-weight: bold; }

fieldset              { padding: 10px; border: 1px solid #ccc; }
legend                { padding: 0px 1em; font-family: inherit; font-size: inherit; font-weight: bold; color: #888; }
input, textarea, select { padding: 8px 12px; vertical-align: bottom; background: #fff; border: none; box-shadow: 1px 1px 3px #ccc; font-family: inherit; font-size: inherit; color: #222; }
input[type=checkbox], input[type=radio] { border: none !important; cursor: pointer; }
input[type=file]      { margin: 10px 0px 15px 0px; padding: 5px 15px; }
input::-moz-focus-inner { border: 0; padding: 0; }  /* overrides extra padding in Firefox */

select                { font-size: 1em; }
button                { display: inline-block; margin-right: 10px; padding: 10px 28px; overflow: visible; background: #cae5d5; border-radius: 2px; border: none; box-shadow: 2px 2px 2px #ccc; text-align: center; text-transform: uppercase; font-size: 14px; font-weight: normal; color: #222; cursor: pointer; }
button span           { display: block; font-weight: bold; font-size: 1.1em; color: #000; }
button::-moz-focus-inner { border: none; padding: 0; }  /* overrides extra padding in Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) { button span { margin-top: -1px; } }  /* Safari and Google Chrome only - fix margins */

ul                    { margin: 3px 0px 3px 10px; padding: 2px 0px 2px 10px; }
ul li                 { margin: 0px; padding: 2px 0px 2px 17px; list-style-type: none; background: url("/layout/_point.gif") left 5px no-repeat; }
ol                    { margin: 3px 0px 3px 10px; padding: 2px 0px 2px 20px; }
ol>li                 { margin: 0px; padding: 3px 0px 5px 0px; }

dd                    { margin: 0px; padding: 0px 0px 0px 20px; }

th                    { vertical-align: top; font-size: 1em; padding: 4px; text-align: left; }
td                    { vertical-align: top; font-size: 1em; padding: 4px; text-align: left; }

.ent, .ent-5, .ent-10, .ent-15, .ent-20, .ent-30 { clear: both; display: block; line-height: 0px; font-size: 0px; }
.ent                  { height: 0px; }
.ent-5                { height: 5px; }
.ent-10               { height: 10px; }
.ent-15               { height: 15px; }
.ent-20               { height: 20px; }
.ent-30               { height: 30px; }

.big                  { font-size: 1.2em; }
.mark                 { font-size: 0.8em; color: #808080; }
.ta-l                 { text-align: left !important; }
.ta-c                 { text-align: center !important; }
.ta-r                 { text-align: right !important; }
.va-t                 { vertical-align: top !important; }
.va-c                 { vertical-align: middle !important; }
.va-b                 { vertical-align: bottom !important; }
.nw                   { white-space: nowrap; }
.up                   { text-transform: uppercase; }
.info                 { font-weight: bold; color: #08f; }
.fll                  { float: left; }
.flr                  { float: right; }
.hidden               { display: none !important; }

.red                  { color: #f44; }

.err                  { font-weight: bold; color: #f22; }
a.err                 { text-decoration: underline; font-weight: bold; color: #f00; }
a.err:hover           { text-decoration: none; color: #f00; }


/* COLOR DEF
green: #008633
act btn + bground: #cae5d5
wait btn: #bbcad1
text: #404040
*/

/* BASIC */
body                  { background: #fff; font-family: OpenSans,verdana,arial; font-size: 14px; color: #404040; }
body.develop #page    { border-top: 3px solid red; }
#page                 { position: relative; max-width: 1200px; min-width: 1200px; margin: 0px auto; background: url("/layout/bg.jpg") 49px top repeat-y; overflow: hidden; }
#content_wrap         { position: relative; float: none; width: auto; background: rgba(233,245,238,0.9); background: rgba(255,255,255,0.92); box-shadow: inset 14px 1px 12px -12px #bcc0bf; overflow: hidden; }
#content              { float: left; width: 100%; box-sizing: border-box; padding: 75px 0px 0px 0px; }
#content_bg           { float: left; position: relative; left: 0px; width: 100%; background: #fff; }
#content_bg_in        { float: left; position: relative; left: 0px; width: 100%; }
#content_in           { position: relative; float: none; width: auto; min-height: 400px; box-sizing: border-box; padding: 50px 0px 50px 50px; overflow: hidden; }
#status               { display: none; float: left; width: 300px; box-sizing: border-box; margin-top: -50px; padding: 0px 0px 30px 20px; font-weight: normal; color: #666; }
#status div           { position: relative; }
#status span.wrap     { display: block; position: absolute; right: 25px; top: 0px; }
#status #data_err     { display: inline-block; width: 100%; height: 16px; }
#status #data_err span { display: none; padding: 1px 10px; background: #f00; font-size: 10px; color: #fff; }
#status.data_err #data_err span { display: inline-block; }

#status div.stat_err  { display: none; margin: 0px auto; height: 30px; }
#status div.stat_err.err_1 { display: block; }
#status div.stat_err span { display: inline-block; height: 30px; line-height: 30px; vertical-align: middle; padding-left: 15px; font-size: 12px; color: #444; }
#status div.stat_err a, #status div.stat_err a:hover { text-decoration: none; font-size: 12px; color: #444; }

#logo                 { position: absolute; left: 0px; top: 0px; height: 70px; background: url("/layout/LOGO.png") 1px 10px no-repeat; }
#logo a               { display: block; text-decoration: none; padding: 8px 15px 8px 50px; font-size: 36px; font-weight: normal; color: #fff; }
#logo a:hover         { text-decoration: none; font-weight: normal; color: #fff; }


#footer               { }
#footer div.develNfo  { padding: 20px; background: #eee; }


/* HOME */
div.homeNfo           { }
div.homeNfo div       { position: relative; }
div.homeNfo span.wrap { display: block; position: absolute; right: 20px; top: 0px; }
div.homeNfo div.tblHdr { display: none; }
div.homeNfo div.tbl   { display: none; }
div.homeNfo div.spec  { display: none; }



/* HIDDING ROLES */
body.loading #loading { display: block; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; height: 100%; background-color: rgba(255,255,255,0.8); background-image: url("/layout/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; z-index: 80; }
body.loading .xloading { display: none; }

#page.A .xroleA       { display: none !important; }
#page.U .xroleU       { display: none !important; }
#page.M .xroleM       { display: none !important; }
#page.S .xroleS       { display: none !important; }


/* NAV LEFT */
#nav_l                { float: left; width: 49px; padding-top: 130px; }
#nav_l div.ico        { display: none; box-sizing: border-box; width: 100%; height: 60px; margin: 5px 0px; cursor: pointer; }
#nav_l div.ico>a      { display: block; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; }
#nav_l #info>a        { background-image: url("/layout/ico/I.png"); }
#nav_l #auto>a        { background-image: url("/layout/ico/AUTO.png"); }
#nav_l #config>a      { background-image: url("/layout/ico/CFG.png"); }
#nav_l #hand>a        { background-image: url("/layout/ico/HAND.png"); }
#nav_l #reboot>a      { background-image: url("/layout/ico/REBOOT.png"); }
#nav_l #login>a       { background-image: url("/layout/ico/LOGIN.png"); }
#nav_l #logout>a      { background-image: url("/layout/ico/LOGOUT.png"); }
#nav_l div.ico>a._act, #nav_l div.ico>a._act_a, #nav_l div.ico>a._act_l, #nav_l div.ico>a:hover { background-color: #cae5d5; }
#nav_l div.ico.wait   { background-color: #bbcad1; }

/* NAV TOP */
#nav_t                { width: 100%; height: 70px; background: url("/layout/bg.jpg") 0px top no-repeat; }
#nav_t div.wrap       { margin-left: 300px; padding-top: 85px; border-bottom: 1px solid #aaa; }
#nav_t div.wrap ul    { margin: 0px; padding: 0px; font-size: 0px; }
#nav_t div.wrap li    { display: inline-block; margin: 0px; padding: 0px 0px 0px 0px; list-style-type: none; background: none; }
#nav_t div.wrap a     { display: block; text-decoration: none; padding: 0px 16px 13px 16px; font-size: 15px; font-weight: normal; color: #888; }
#nav_t div.wrap a._act, #nav_t div.wrap a._act_l, #nav_t div.wrap a:hover { text-decoration: none; padding-bottom: 10px; border-bottom: 3px solid #008633; font-weight: normal; color: #888; }


#lang                 { position: absolute; top: 12px; right: 12px; }
#lang ul              { margin: 0px; padding: 0px; }
#lang li              { margin: 0px; padding: 0px 0px 2px 0px; list-style-type: none; background: none; }
#lang a               { text-decoration: none; font-weight: bold; color: #fff; }
#lang a:hover, #lang a._act { text-decoration: none; color: #cae5d5; }
/* NO DISPLAY: */
#xlang                 { display: none; }

div.status            { padding: 10px 40px; background: #f8f8f8; border: 1px solid #ccc; font-family: courier; }

#error_list tr.hl1 td { font-weight: bold; color: #f00; }
#error_list tr.even_true td { background: #ddd; }


/* LOGIN PAGE */
#login #nav_t div.wrap { border-bottom: none; }
#login #content_bg    { left: 0px; background: none; }
#login #content_bg_in { left: 0px; width: 100%; }
#login #login-pnl     { margin: 0px auto; padding: 35px 50px; width: 400px; border-radius: 2px; background: rgba( 255, 255, 255, 0.6); }

#login-name           { position: absolute; right: 15px; top: 90px; font-size: 13px; color: #444; }
#login-name .role     { font-size: 0.9em; font-weight: bold; }



/* OSIP */
#osipControlBox       { float: right; width: 450px; padding-right: 100px; }
#osipControlBox input { width: 100%; height: 25px; background: #d3d3d3; }
#osipControlBox div.thin input { float: left; width: 250px !important; }
#osipControlBox button { display: inline-block; padding: 4px 10px; min-width: 50px; }
#osipControlBox div.thin strong { display: inline-block; width: 205px;  }
#osipControlBox div.btnsOnly strong { display: inline-block; width: 150px; }
#osipControlBox div.thin button { margin: 10px 0px 0px 15px; }
#osipControlBox span  { float: right; font-weight: bold; }
#osipControlBox div.thin span { float: none; display: inline-block; width: 50px; text-align: right; }
#osipControlBox button.act { font-weight: bold; cursor: auto; }

#osipInfoBox          { height: 20px; font-size: 12px; color: #f00; }

#osipLightBox         { float: left; width: 340px; }
#osipLedBar           { position: relative; width: 300px; height: 20px; background: #fff; border: 2px solid #ddd; }
#osipLedBar div       { width: 0px; height: 100%; background: #ffd737; }
#osipLedBar span      { display: inline-block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; font-size: 13px; }
div.osipLedLight      { float: left; position: relative; width: 135px; height: 135px; margin-right: 30px; background: #fff; border-radius: 50%; border: 2px solid #ddd; }
div.osipLedLight div  { width: 100%; height: 100%; border-radius: 50%; opacity: 0; }
#osipLedLight1 div    { background-image: radial-gradient(circle at center, #fef7e7, #fae4b2); }
#osipLedLight2 div    { background-image: radial-gradient(circle at center, #e8eff4, #c4d4df); }
div.osipLedLight span { display: inline-block; position: absolute; left: 0px; top: 0px; width: 137px; height: 137px; line-height: 135px; text-align: center; vertical-align: middle; font-size: 13px; }

#osipLightStatTbl     { border-collapse: separate; background: #ddd; }
#osipLightStatTbl th, #osipLightStatTbl td { min-width: 50px; padding: 2px 4px; background: #fff; }

#osipCtrlTbl          { border-collapse: separate; background: #ddd; }
#osipCtrlTbl th, #osipCtrlTbl td { padding: 4px 4px; background: #fff; text-align: center; }

#osipRshVisual        { position: relative; box-sizing: border-box; border: 2px solid #444; background: #444; }
#osipRshVisual div.line { width: 100%; height: 1px; font-size: 0px; }
#osipRshVisual div.line.act { border-top: 1px solid #0d0; border-bottom: 1px solid #0d0; }
#osipRshVisual div.line div { display: inline-block; height: 1px; }
#osipRshVisual div.line div.on { background: #f44; }
#osipRshVisual div.line div.off { background: #444; }



/* THIN VIEW */
.onlyThin             { display: none !important; }
body.thin .onlyThin   { display: block !important; }
body.thin .xThin      { display: none !important; }


/* ELT_DIALOG */
#elt_dialog           { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: table; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0.4); z-index: 100; }
#elt_dialog.oversize  { display: block; }
#elt_dialog_wrap      { display: table-cell; vertical-align: middle; }
#elt_dialog.oversize #elt_dialog_wrap { display: block; height: 100%; overflow-y: auto; }
#elt_dialog_msg       { position: relative; width: 30%; max-width: 600px; min-width: 280px; margin: 0px auto; box-sizing: border-box; padding: 50px 50px 0px 50px;
                        background: rgba( 255, 255, 255, 1); border-radius: 2px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); overflow: hidden; }
#elt_dialog_msg div.btns { clear: both; width: 100%; padding-top: 30px; text-align: right; }
#elt_dialog_msg button { position: relative; display: inline-block; min-width: 100px; margin: 0px !important; padding: 20px; background: none; border: none; box-shadow: none;
                        font-size: 14px; font-weight: normal; color: #008633; cursor: pointer; }
#elt_dialog_msg button:hover { background: #cae5d5; }
#elt_dialog .cross    { position: absolute; right: 0px; top: 0px; width: 30px; height: 30px; margin: 10px; background: url("/layout/_cross.png") no-repeat; cursor: pointer; }


/* RESPONSIVE */
@media only screen and (max-width: 1400px) {
  #elt_dialog_msg       { width: 40%; }
}

@media only screen and (max-width: 1100px) {
  #elt_dialog_msg       { width: 50%; }
}

@media only screen and (max-width: 800px) {
  #elt_dialog_msg       { width: 60%; }
}