HTML, BODY {height: 100%; margin: 0px;}
BODY {font-family: 'Arial'; font-size: 14px; margin: 0px; padding: 0px; color: #474749;}
A {color: inherit; text-decoration: none;}
UL {list-style: none; margin: 0px; padding: 0px;}
INPUT:FOCUS {border-color: #ac131b !important;}
INPUT:REQUIRED:FOCUS {border-color: #e95847 !important;}
H1, H2, H3, H4, H5, H6 {margin: 0px;}

.box {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.flex {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.flex.space-around {justify-content: space-around;}
.flex.space-between {justify-content: space-between;}
.flex.flex-start {align-items: flex-start;}
.flex.direction-row {flex-direction: row;}
.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.hidden {display: none;}
.half {width: 50%; float: left; padding: 0px 10px 0px 0px;}
.half.right {padding: 0px 0px 0px 10px;}

/* LOADER */
#mainpage-loader {}
#mainpage-loader .overlay {width: 100%; height: 100%; background-color: #000; opacity: 0.5; position: fixed; z-index: 9998;}
#mainpage-loader .content {width: 100%; height: 100%; position: fixed; z-index: 9999; display: flex; justify-content: space-around; align-items: center; color: #FFF;}
#mainpage-loader .content I {margin: 0px 0px 10px 0px; }

/* LOADER ONPAGE */
.loaderOnpage {width: 100%; float: left; padding: 30px 0px; display: flex; justify-content: space-around; align-items: center; color: #E0E0E0;} /* dříve byl ID né CLASS */

/* login */
#loginCont {width: 100%; height: 100%; float: left; position: relative;}
#loginCont .loginFrame {width: 400px; height: auto; padding: 0px 0px 0px 0px; float: left; position: absolute; left: calc(50% - 200px); top: calc(20%); z-index: 100; box-shadow: 0px 0px 20px 5px #555; overflow: hidden;}
#loginCont .loginFrame H1 {width: 100%; float: left; margin: 0px 0px 0px 0px; font-weight: 600; text-align: center; color: #515151;}
#loginCont .loginFrame .appName {width: 100%; float: left; font-size: 14px; margin: 0px; padding: 15px 20px 15px 20px; line-height: 12px; border-bottom: 1px #826e59 solid; background-color: #b39b82; color: #FFF;}
#loginCont .loginFrame .appName .version {font-weight: 200; font-size: 11px;}
#loginCont .loginFrame IMG {width: auto; float: left; max-width: 60%;}
#loginCont .loginFrame .inner {width: 100%; float: left; padding: 10px 20px 20px 20px; background-color: #f7f7f7;}
#loginCont .loginFrame .inner INPUT[type=text], #loginCont .loginFrame .inner INPUT[type=password] {width: 100%; float: left; padding: 8px 10px; margin: 5px 0px; border: 1px #ddd solid;}
#loginCont .loginFrame .inner INPUT[type=submit] {width: 100%; float: left; padding: 8px 10px; margin: 5px 0px; border: 1px #826e59 solid; background-color: #b39b82; color: #FFF; cursor: pointer; }
#loginCont .loginFrame .inner INPUT[type=submit]:HOVER {background-color: #826e59;}
#loginCont .loginFrame .inner SELECT {width: 100%; float: left; padding: 8px 10px; margin: 5px 0px; border: 1px #ddd solid;}
#loginCont .loginFrame .avatarFrameLogin {width: 100%; float: left; padding: 30px 0px; background-color: #FFF; border-bottom: 1px #ededed solid; display: flex; justify-content: space-around;}

/* main left panel */
#mainLeftFrame {width: 260px; height: 100%; float: left; padding: 0px 0px 0px 0px;}
#mainLeftFrame .menuFrame I {margin-left: 5px;}

/* main right panel */                                                                         
#mainRightFrame {width: auto; height: 100%; margin: 0px 0px 0px 280px;}
#mainRightFrame .inner {width: 100%; float: left; padding: 5px 20px;} 
#mainRightFrame .inner.noPadding {padding: 0;}

/* main full panel */                                                                         
#mainFullFrame {width: 100%; height: 100%; margin: 0px 0px 0px 0px;} 

#ajax-content-orders .infoPanel {margin: 10px; width: calc(100% - 20px);}

/* hlavní rámeček */
.frame1 {width: 100%; float: left; border: 1px #ececec solid; margin: 0px 0px 20px 0px;}
.frame1.noMarginBottom {margin-bottom: 0;}
.frame1 .header {width: 100%; min-height: 35px; float: left; margin: 0px; font-size: 16px; color: #c5242c; font-weight: normal; background-image: url('../images/top-menu-bg.jpg'); background-size: 100% 100%; background-repeat: repeat-x;}
.frame1 .header.flex {display: flex; justify-content: space-between; align-items: baseline;}
.frame1 .header SELECT {float: right; background-color: transparent; border: 0px; margin: 8px 10px 0px 0px; padding-right: 10px; color: #474749; font-size: 14px; text-align: right;}
.frame1 .header .inputSearch {width: 200px; height: auto; float: right; padding: 4px 10px; margin: 5px 5px 0px 0px; border: 1px #ddd dashed; font-size: 12px; text-align: left;}
.frame1 .header .options {width: auto; float: right; color: #474749; font-size: 14px; margin: 8px 10px 0px 0px;}
.frame1 .header .options A:HOVER {text-decoration: underline;}
.frame1 .header .centered {display: flex; align-items: center; justify-content: center; color: #383738; font-weight: bold;}
.frame1 H2 {width: auto; float: left; margin: 0px; font-size: 16px; color: #c5242c; font-weight: normal; margin: 7px 15px 0px 15px;}
.frame1 .link {width: 100%; min-height: 35px; float: left; display: block; margin: 0px; font-size: 14px; font-weight: bold; padding: 8px 10px 0px 15px; border-bottom: 1px #ececec solid;}
.frame1 .link:HOVER {color: #c5242c;}
.frame1 .link:last-child {border-bottom: 0px;}
.frame1 .link I {float: right; font-size: 20px;}
.frame1 .link_cat {width: 100%; min-height: 31px; float: left; display: block; margin: 0px; font-size: 12px; font-weight: bold; padding: 7px 10px 0px 30px; border-bottom: 1px #ececec solid;}
.frame1 .link_zak {width: 100%; min-height: 31px; float: left; display: block; margin: 0px; font-size: 12px; font-weight: bold; padding: 7px 10px 0px 40px; border-bottom: 1px #ececec solid;}
.frame1 .red {color: #c5242c;}
.frame1 .gray {color: #666;}
.frame1 .sort {float: right; color: #474749; font-weight: normal; font-size: 14px; margin: 1px 0px 0px 0px;}
.frame1 .sort I {margin: 0px 0px 0px 3px; float: right;}
.frame1 .link I.green {color: #7bcb25;}
.frame1 .link I.red {color: #c5242c;}
.frame1 .inner {width: 100%; float: left; padding: 10px 15px;}

/* main top panel */
#mainTopFrame {width: 100%; height: 50px; padding: 10px; float: left; position: relative; position: fixed; z-index: 80; background-image: url('../images/top-menu-bg.jpg');}
#mainTopFrame .mainLogo {height: 30px; float: left; padding: 0px 9px 0px 0px; border-right: 1px #cecece solid;}
#mainTopFrame .menuFrame {width: auto; float: left; font-size: 20px; margin: 2px 0px 0px 10px; padding-right: 10px; border-right: 1px #cecece solid;}
#mainTopFrame .menuFrame A {position: relative; width: auto; float: left; margin: 0px 10px;}
#mainTopFrame .menuFrame A:HOVER {color: #b39b82;}
#mainTopFrame .menuFrame A span {position: absolute; right: -12px; top: -6px; display: block; width: 14px; height: 14px; font-size: 11px; text-align: center; background-color: red; border-radius: 50%; color: #fff;}
#mainTopFrame .menuFrame I.fa-home {font-size: 24px;}
#mainTopFrame .menuFrame I.fa-clock-o {font-size: 22px;}
#mainTopFrame .menuFrameText {width: auto; float: left; margin: 1px 0px 0px 20px; padding: 6px 0px;}
#mainTopFrame .menuFrameText A:HOVER {text-decoration: underline;}
#mainTopFrame .userFrame {width: auto; float: right; margin: 0px 0px 0px 0px; padding: 6px 0px;}
#mainTopFrame .userFrame A {float: left;}
#mainTopFrame .userFrame A:HOVER {text-decoration: underline;}
#mainTopFrame .userFrame .text {margin: 1px 0px 0px 0px; float: left;}
#mainTopFrame .userFrame I {font-size: 20px; margin: 0px 0px 0px 10px; float: right;}
#mainTopFrame .userFrame .gray {color: #b4b4b4; font-size: 11px;}
#mainTopFrame .userFrame .password {padding: 0px 0px 0px 20px; border-left: 1px #ccc dotted; margin: 0px 0px 0px 20px;}
#mainTopFrame .userFrame .password .text {padding: 1px 0px 0px 0px;}

/* main content frame */
#mainContentFrame {width: 100%; float: left; padding: 30px 20px 15px 20px; margin: 50px 0px 0px 0px;}

/* home ikony */
.homeIcons {width: 100%; float: left;}
.homeIcons .homeIcon {width: calc(33.33% - 40px); float: left; text-align: center; text-decoration: none; color: #b39b82; padding: 50px 50px 30px 50px; margin: 30px 60px 30px 0px; border-radius: 10px; border: 1px #ddd solid; background-color: #f7f7f7; background-image: url('../images/top-menu-bg.jpg'); background-size: 100%;}
.homeIcons .homeIcon:nth-child(3n+3) {margin-right: 0px;}
.homeIcons .homeIcon:HOVER {background-color: #b39b82; color: #FFF; background-image: none; border: 1px #826e59 solid;}
.homeIcons .homeIcon I {font-size: 100px;}

/* zobrazení VZ - základní info - fixní */
#orderInfoFrame {width: 100%; height: 70px; padding: 10px 20px 0px 20px; float: left; position: fixed; background-color: #FFF; z-index: 120; left: 0px; border-bottom: 1px solid #f6f6f6;}
#orderInfoFrame H2 {width: atuo; float: left;}
#orderInfoFrame .ordersFrame {width: 210px; margin: 10px 0px 0px 0px; float: right; position: relative;}
#orderInfoFrame .replanButton {float: right; margin: 10px 0px 0px 10px;}
#orderInfoFrame .planDateFrame .button-2 {margin-top: 10px;}
#orderInfoFrame .planDateFrame .sepr {margin-top: 10px;}

/* Log na obrazovce */
.logScreen {position: fixed; bottom: 0px; right: 0px; z-index: 10000; padding: 10px 20px; background-color: yellow; border: 1px yellow solid;}
.logScreen P {margin: 2px 0px;}
.logScreen:HOVER {display: none;}

/* formátování textu */
.textFrame P {line-height: 1.4;}
.textFrame UL {list-style-type: square; list-style-position: inside;}
.textFrame UL LI {padding-left: 20px; line-height: 1.4;}

.catalogListFrame {width: 100%; float: left; display: flex; flex-wrap: wrap;}
.catalogListFrame .catalogFrame {width: calc(16.63% - 16px); float: left; background-color: #f7f7f7; margin: 0px 20px 20px 0px; font-size: 20px; color: #888;}
.catalogListFrame .catalogFrame IMG {width: 100%; height: auto;}
.catalogListFrame .catalogFrame .nophoto {width: 100%; height: auto; padding: 20px; font-size: 14px; text-align: center;}
.catalogListFrame .catalogFrame .desc {width: 100%; float: left; padding: 14px 20px 20px 20px; color: #39393a;} 
.catalogListFrame .catalogFrame .name {width: 100%; float: left; margin: 0px 0px 0px 0px;}
.catalogListFrame .catalogFrame .type {width: 100%; float: left; margin: 0px 0px 15px 0px; color: #9c9c9c; font-size: 14px;}
.catalogListFrame .catalogFrame .download {width: auto; float: left; margin: 0px 0px; color: #39393a; font-size: 14px; text-decoration: none; margin: 0px 10px 0px 0px;}
.catalogListFrame .catalogFrame .download .text {text-decoration: underline;}
.catalogListFrame .catalogFrame .download:last-child {margin-right: 0px;}
.catalogListFrame .catalogFrame:nth-child(6n+6) {margin-right: 0px;}
.catalogListFrame .catalogFrame .optionsFrame {width: 100%; float: left; display: flex; justify-content: space-between;}