@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                    { padding: 0px 0px 5px 0px; font-size: 1.2em; color: #444; }
h5                    { padding: 0px 0px 5px 0px; font-size: 1em; 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 4px #aaa; font-family: inherit; font-size: inherit; color: #222; }
input[disabled], textarea[disabled], select[disabled] { background: #ddd; color: #aaa; }
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: #d2e1f0; border-radius: 2px; border: none; box-shadow: 2px 2px 2px #ccc; text-align: center; text-transform: uppercase; font-size: 14px; font-weight: bold; color: #222; cursor: pointer; }
button.img            { padding: 8px 15px; }
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-1                { height: 1px; }
.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; }
.red                  { font-weight: bold; color: #f00; }
.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: #0b0; }
.fll                  { float: left; }
.flr                  { float: right; }
.hidden               { display: none !important; }
.console              { padding: 10px; background: #444; font-family: Courier New; font-size: 13px; color: #fff; }

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


/* BASIC */
body                  { min-width: 1320px; padding: 0px 20px; background: #fff; font-family: verdana,arial; font-size: 13px; color: #404040; }
body.develop #page    { border-top: 3px solid red; }
#page                 { position: relative; max-width: 1880px; min-width: 400px; margin: 0px auto; }

div.box               { float: left; margin: 0px 30px 0px 0px; padding: 30px 20px; border: 1px solid #aaa; }
div.filters table td  { vertical-align: middle; }


table.main            { width: 100%; border-collapse: collapse; }
table.main.inp        { width: auto; }
table.main td, table.main th { padding: 3px 15px; border: 2px solid #cfd8e5; }
table.main td.spec    { padding: 3px 3px; }
table.main th         { padding-top: 12px; padding-bottom: 12px; background: #009ad5; color: #fff; }
table.main button     { margin: 2px 0px; padding: 8px 8px; font-size: 12px; }

tr.deleted td         { background: #bebebe; }

table.sub             { width: 100%; border-collapse: collapse; }
table.sub th          { padding: 3px 15px; background: #ddd !important; border: 2px solid #cfd8e5; color: #000; }
table.sub td          { padding: 8px 15px; border: none; border-bottom: 2px solid #cfd8e5; }
table.sub th          { background: #e3edf7; }

table.sub th.hdr      { width: 85px; padding-left: 5px; padding-right: 5px; }
table.sub th.hdr div  { width: 85px; word-wrap: break-word; }
table.sub td.txt      { width: 800px; }
table.sub td.txt div  { max-width: 800px; word-wrap: break-word; }


.tbl-msg              { display: inline-block; padding: 10px 0px; }
.tbl-msg.act          { padding: 15px 20px; background: #2a2; color: #fff; }


/* SWITCHING PLANE */
table.rsh             {  }
table.rsh th          { padding: 3px 15px; background: #cfd8e5 !important; border: 2px solid #cfd8e5; color: #000; text-align: right; }
table.rsh td          { padding: 8px 15px; border: none; border-bottom: 2px solid #cfd8e5; text-align: right; }

table.rsh table.in th { padding: 4px 15px; background: #ddd !important; border: 1px solid #cfd8e5; color: #000; }
table.rsh table.in td { padding: 1px 15px; border: none; border-bottom: 1px solid #cfd8e5; }

.wrap                 { width: 800px; }
.osipVisual           { position: relative; width: 100%; height: 100px; border: 1px solid #ccc; background: #ddd; }
.osipVisual div.lineLow, .osipVisual div.lineHigh { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100px; font-size: 0px; }
.osipVisual div.lineHigh { bottom: 1px; }
.osipVisual div.wrap  { position: relative; display: inline-block; height: 100%; }
.osipVisual div.lineLow div.wrap div { position: absolute; left: 0px; bottom: 0px; width: 100%; box-sizing: border-box; border-bottom: 1px solid rgba( 124, 152, 133, 1.0 ); background: rgba( 124, 152, 133, 1.0 ); }
.osipVisual div.lineHigh div.wrap div { position: absolute; left: 0px; bottom: 0px; width: 100%; box-sizing: border-box; border-bottom: 1px solid rgba( 6, 214, 160, 1.0 ); background: rgba( 6, 214, 160, 1.0 ); }
.osipVisual div.grid  { position: absolute; left: 1px; bottom: 0px; width: 100%; height: 100%; }
.osipVisual div.grid div.pipe { display: inline-block; box-sizing: border-box; width: 4.166%; height: 100%; border-right: 1px dotted #fff; }
.osipVisual div.marks { position: absolute; left: 1px; bottom: -20px; width: 100%; height: 20px; }
.osipVisual div.marks div.mark { display: inline-block; width: 8.33%; text-align: center; color: #aaa; }

div.acu               { position: relative; width: 1px; height: 1px; margin-right: 30px; }
div.acu div.inn       { position: absolute; top: 0px; right: 0px; width: 400px; }
div.acu .osipVisual div.restr { position: absolute; right: 0px; top: 0px; bottom: 0px; width: 25%; background: rgba( 255, 0, 0, 0.3 ) }
div.acu .osipVisual div.grid div.pipe { width: 10%; }
div.acu .osipVisual div.marks { box-sizing: border-box; padding: 0px 5%; }
div.acu .osipVisual div.marks div.mark { width: 11.11%; }


#cfg_download         { max-width: 900px; }
#cfg_upload           { max-width: 600px; }

#osipCtrl             { width: 600px; }
#osipCtrl input[type=range] { box-sizing: border-box; width: 100%; height: 24px; padding: 0px; cursor: pointer; }
#osipCtrl span.val    { float: right; font-weight: bold; }
#osipCtrl table td    { padding: 0px; vertical-align: middle; font-weight: bold; }
#osipCtrl table td span.val { float: none; }






ul.menu li            { display: inline-block; padding: 5px 10px; background: none; }
ul.menu li a          { display: inline-block; padding: 10px 20px; background: #eee; text-transform: uppercase; text-decoration: none; }
ul.menu li a:hover    { background: #ccc; text-decoration: none; }
ul.menu li a._act, ul.menu li a._act_l { background: #333; text-decoration: none; color: #fff; }

a.img-btn, a.img-btn:hover { display: inline-block; margin: 6px 5px 0px 10px; padding: 3px 10px; background: #000; text-decoration: none; color: #fff; }


/* 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; }
*/

/* USER ROLES */
  /*
  HARDCODED ROLES:
  1 - Admin   [M] = nejvyšší úroveň oprávnění, může všechno
  2 - Service [S] = provozní úroveň oprávnění, nemůže měnit hlavní systémovou konfiguraci
  3 - Viewer  [U] = návštěvník stránek, nemůže nic měnit, může pouze číst
  0 - Anonym  [A] = nepřihlášený návštěvník
  */

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


#cfgUsers table.usersTbl tr:nth-child(2n) td { background: #fafafa; }
#cfgUsers table.usersTbl th { padding: 6px 20px; background: #009ad5; color: #fff; }
#cfgUsers table.usersTbl td { padding: 3px 20px; background: #f4f4f4; vertical-align: middle; }
#cfgUsers table.usersTbl td.passwd input { width: 60px; padding: 3px 5px; }
#cfgUsers table.usersTbl tr.disable td.name { text-decoration: line-through; }
#cfgUsers table.usersTbl td.cust select { padding: 5px 10px; }
#cfgUsers table.usersTbl td.role select { padding: 5px 10px; }
#cfgUsers table.usersTbl td.id_tool input { width: 155px; padding: 3px 6px; font-size: 13px; }
#cfgUsers table.usersTbl td.buttons { font-size: 0px; }
#cfgUsers table.usersTbl td button { padding: 0px; text-transform: none; }

#cfgUsers table.passwdTbl th { padding: 6px 20px; background: #009ad5; color: #fff; }
#cfgUsers table.passwdTbl td { padding: 6px 20px; vertical-align: middle; }

button.btnIco         { width: 36px; height: 36px; background-color: transparent; background-position: center center; background-repeat: no-repeat; border-radius: none; box-shadow: none; }
button.btnIco.save    { background-image: url("/layout/ico/save.png"); }
button.btnIco.del     { background-image: url("/layout/ico/del.png"); }
button.btnIco.pwd     { background-image: url("/layout/ico/pwd.png"); }
button.btnIco.enable  { background-image: url("/layout/ico/enable.png"); }
button.btnIco.disable { background-image: url("/layout/ico/disable.png"); }
button.btnIco.down    { background-image: url("/layout/ico/down.png"); }
button.btnIco.use     { background-image: url("/layout/ico/use.png"); }


/* FILTERS */
div.filters .dPicker  { width: 220px; background: #f8f8f8; cursor: pointer; }


/* PAGING */
div.paging            { position: relative; min-height: 32px; padding: 20px 70px 10px 70px; text-align: center; font-size: 0px; }
div.paging.err        { font-size: 11px; color: #f00; }
div.paging a, div.paging a:hover { display: inline-block; margin: 0px 6px 6px 0px; padding: 4px 10px; background: #e3edf7; text-decoration: none; font-size: 13px; }
div.paging a.act, div.paging a.act:hover { background: #666; color: #fff; cursor: default; }
div.paging div.space, div.paging div.arrow { display: inline-block; margin: 0px 5px 5px 0px; padding: 2px 6px; background: #ddd; font-size: 13px; }
div.paging div.itms   { position: absolute; top: 15px; right: 0px; }
div.paging div.itms select { font-size: 12px; }
div.paging div.itms option { direction: rtl; }


/* NAV TOP */
#lang                 { position: absolute; top: 6px; right: 12px; padding: 2px 5px; background: rgba( 0,0,0, 0.3 ); }
#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: #d2e1f0; }
/* NO DISPLAY: */
#xlang                 { display: none; }


/* 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: 80px; top: 30px; font-size: 13px; color: #444; }
#login-name .role     { font-size: 0.9em; font-weight: bold; }


/* 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: #d2e1f0; }
#elt_dialog .cross    { position: absolute; right: 0px; top: 0px; width: 30px; height: 30px; margin: 10px; background: url("/layout/_cross.png") no-repeat; cursor: pointer; }