html {font-family: 'Open Sans', sans-serif; font-size: 16px; }
body {line-height: 1.6; margin: 0; padding: 0 0 60px 0;}

*, *::after, *::before {box-sizing: border-box;}

INPUT, SELECT {font-family: 'Open Sans', sans-serif; font-size: 16px;}
A {color: inherit; text-decoration: none;}
UL {list-style: none; margin: 0px; padding: 0px;}

.box {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

.star {color: #e41d1b; font-weight: bold; font-size: 20px; line-height: 10px;}

.button {float: left; margin: 0; line-height: 16px; padding: 6px 10px; background-color: #176f9f; color: #fff; border: 0; border-radius: 3px; cursor: pointer;}
.button:HOVER {background-color: #15648F;}
.button I {font-size: 18px;}
.buttonBack {background-color: #999;}
.buttonBack:HOVER {background-color: #666;}
.buttonSave {font-family: FontAwesome, 'Open Sans', sans-serif; background-color: #176f9f; font-size: 24px; padding: 12px 18px;}
.buttonSave::after {content: 'Uložit'; font-family: 'Open Sans', sans-serif;}


.button2 {float: right; width: auto; line-height: 16px; font-size: 16px; background-color: #176f9f; color: #fff; border: 0; padding: 6px 10px;}
.button2:HOVER {background-color: #15648F;}
.button2 I {font-size: 18px;}

.button3 {width: auto; line-height: 14px; font-size: 14px; background-color: #aa272a; color: #fff; border: 1px solid #7a1c1e; padding: 0px 4px; border-radius: 3px;}
.button3:HOVER {background-color: #7a1c1e;}
.button3 I {font-size: 14px;}

.buttonInForm {float: none; display: inline-block; width: auto; line-height: 16px; font-size: 16px; background-color: #176f9f; color: #fff !important; border: 0; border-radius: 3px; padding: 3px 5px; margin: 0 2px; position: relative;}
.buttonInForm:HOVER {background-color: #15648F;}
.buttonInForm .iconOver {position: absolute; font-size: 11px; left: 2px; top: 2px;}

.corner3 {border-radius: 3px;}

.line {width: 100%; float: left;}
.line.flex {display: flex; align-items: center;}


.flex {display: flex;}
.flex.flexItemC {align-items: center;}

.fillTableCell {position: absolute; top: 0; left: 0; width: calc(100% - 1px); height: calc(100% - 1px); background-color: #fff; display: flex; align-items: center; justify-content: center;}

/*
zelena: 009a3e
fialova: 4a2583
*/

/* Kalendář akcí */
#calendar {max-width: 900px; margin: 0 auto; padding: 0 0 50px 0;}

/* Overlay */
#loaderOverlay {width: 100%; height: 100%; float: left; background-color: rgba(0,0,0,0.3); position: fixed; top: 0px; left: 0px; display: none; z-index: 1000;}
#loaderOverlay .inner {width: 100%; height: 100%; float: left; display: flex; justify-content: space-around; align-items: center;}
#loaderOverlay P {color: #FFF; font-size: 18px !important; font-weight: 500;}

/* loading */
.loading-1 {width: 100%; float: left; font-size: 22px; text-align: center;}
.loading-1 I {font-size: 60px; margin: 30px 0px 10px 0px;}
.loading-2 {width: auto; max-width: 700px; float: left; font-size: 22px; text-align: center;}
.loading-2 I {font-size: 24px;}
.loading-3 {width: auto; text-align: center;}
.loading-3 I {font-size: 14px;}

#loading {display: none; position: fixed; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; background-color: rgba(192, 192, 192, 0.5); align-items: center; justify-content: center; flex-wrap: wrap; align-content: center;}
#loading P {width: 100%; text-align: center;}

/* colors */
.color02 {color: #db4105;} /* orange */
.color03 {color: #cccc9f;} /* bezova */

.bgColor01 {background-color: #9fb4cc; color: #ffffff;} /* modra */
.bgColor02 {background-color: #d46623; color: #ffffff;} /* bezova */
.bgColor03 {background-color: #db4105; color: #ffffff;} /* orange */

.btnInCell {border: 1px solid #5aa5a8; padding: 0px 4px; background-color: #5aa5a8; color: #fff; border-radius: 3px; font-size: 14px;}
.btnInCell2 {border: 1px solid #cccc9f; padding: 0px 4px; background-color: #cccc9f; color: #000; border-radius: 3px; font-size: 14px;}

.trans {-o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}

/* login page */
#loginCont {width: 100%; height: 100%; float: left; /*position: relative;*/}
#loginCont .loginFrame {width: 400px; height: auto; background-color: #151C39; padding: 20px; float: left; position: absolute; left: calc(50% - 200px); top: calc(28%); z-index: 100; box-shadow: 0px 0px 20px 5px #555; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center;}
#loginCont .loginFrame H1 {width: 100%; float: left; margin: 0px 0px 0px 0px; padding: 15px 0px 15px 0px; font-weight: 400; text-align: center; border-bottom: 4px #c71921 solid; background-color: #fff; color: #003354;}
#loginCont .loginFrame IMG {max-width: 100%; float: left;}
#loginCont .loginFrame .inner {width: 100%; float: left; padding: 20px 10px 10px 10px;}
#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=text]:FOCUS, #loginCont .loginFrame .inner INPUT[type=password]:FOCUS {border-color: #003354;}
#loginCont .loginFrame .inner INPUT[type=submit] {width: 100%; float: left; padding: 8px 10px; margin: 5px 0px; border: 0px #009a3e solid; background-color: #5781be; color: #fff; cursor: pointer; }
#loginCont .loginFrame .inner INPUT[type=submit]:HOVER {background-color: #c71921; border-color: #c71921; color: #fff;}
#loginCont .loginFrame .inner A {width: 100%; float: left; padding: 8px 10px; margin: 5px 0px; border: 1px #cccc9f solid; background-color: #cccc9f; color: #FFF; cursor: pointer; text-align: center;}
#loginCont .loginFrame .inner A:HOVER {background-color: #666;}

/* search */
.searchFrame {float: right; width: auto; margin: 20px 0;}
.searchFrame .borderFrame {border: 1px solid #ccc; float: left; margin: 0 15px 0 0; width: auto;}
.searchFrame .borderFrame .addon {background-color: #eee; border-right: 1px solid #ccc; float: left; height: 33px; line-height: 33px; padding: 0 5px; width: auto;}
.searchFrame INPUT[type="text"] {border: 0 !important; color: #555; float: left; height: 33px; padding: 8px 15px; margin: 0 !important; text-align: left; width: 150px;}
.searchFrame BUTTON.text {width: auto;}
.searchFrame BUTTON {background-color: #fff; border: 0 none; color: #ababab; cursor: pointer; display: block; float: left; height: 33px; width: 33px;}

.infoPanel {display: inline-flex; flex-wrap: wrap; padding: 10px; border: 2px dashed #c71921; background-color: #eaeaea;}
.infoPanel .col1 {width: 30%;}
.infoPanel .col2 {width: 70%; font-weight: bold;}

#errorPanel {display: none;}

H1 {font-family: 'Open Sans', sans-serif; width: 100%; float: left; font-weight: 400; background-color: #fff; color: #8E110F; font-size: 68px; margin: 0; padding: 0 0 0 10px;}
H2 {width: auto; float: left; font-size: 32px; margin: 26px 0 20px; padding: 0; line-height: 32px;}
H2 SPAN {color: #c71921; font-style: italic;}
H3 {width: 100%; float: left;}

HEADER {width: 100%; height: 120px; float: left; padding: 10px; background-color: #151C39; display: flex; justify-content: space-between; align-items: center;}
HEADER .logo {max-height: 85px; display: block;}
HEADER H1 {font-family: 'Open Sans', sans-serif; width: auto; float: left; position: relative; padding: 0 0 0 10px; margin-right: auto; line-height: 1; font-weight: 400; background-color: #fff; color: #213744; font-size: 68px;}
HEADER H1:after {content: 'Databáze klientů a servisů'; position: absolute; right: 0; bottom: -16px; font-size: 20px; color: #009a3e; font-weight: 500; text-transform: uppercase;}
HEADER .loggedUser {display: flex; align-items: center; color: #999;}
HEADER .icon {padding: 0 0 0 30px; margin-left: auto; display: flex; align-items: center; font-size: 70px; color: #999;}
HEADER .icon:HOVER {color: #333;}
HEADER .icon.signout {font-size: 80px; margin-left: 0;}

HEADER .title {}
HEADER .right {text-align: right;}
HEADER .right .userInfo {text-align: right; color: #aa272a; padding: 5px 10px 0 0;}
HEADER .right .addFailure {text-align: right;}

/* #c7dadc,#c71921 */


#mainMenuFrame {font-family: 'Open Sans', sans-serif; float: left; width: 100%; margin-bottom: 0px; background-color: #5781be;}
#mainMenuFrame.fixed {box-shadow: 0 4px 15px -5px #555555; position: fixed !important; top: 0px !important; margin: 0px auto !important; z-index: 20000; width: 100% !important;}
#mainMenuFrame UL {float: left; height: auto; list-style-type: none; margin: 0; padding: 0;}
#mainMenuFrame UL LI {float: left; margin: 0 0 0 0; padding: 0 0px 0 0; border-right: 2px solid #151C39; position: relative;}
#mainMenuFrame UL LI A {float: left; position: relative; background-color: ; padding: 26px 25px 3px 25px; color: #ffffff; font-size: 26px; font-weight: 300; line-height: 1.2;}
#mainMenuFrame UL LI A:after {font-family: FontAwesome; width: 100%; height: 100%; position: absolute; top: 3px; left: 0; text-align: center; font-size: 22px;}
#mainMenuFrame UL LI A.dashboard:after {content: "\f140";}
#mainMenuFrame UL LI A.user:after {content: "\f0c0";}
#mainMenuFrame UL LI A.customer:after {content: "\f2ba";}
#mainMenuFrame UL LI A.codebook:after {content: "\f069";}
#mainMenuFrame UL LI A.service:after {content: "\f0ad";}
#mainMenuFrame UL LI A.machine:after {content: "\f1ad";}
 

#mainMenuFrame UL LI A:HOVER, #mainMenuFrame UL LI A.active {background-color: #151C39;}
#mainMenuFrame UL LI .submenu {display: none; position: absolute; width: 250px; float: left; top: 100%; left: -2px; z-index: 20000; border: 0;}
#mainMenuFrame UL LI .submenu LI {width: 100%; float: left; border: 0;}
#mainMenuFrame UL LI .submenu LI A {width: 100%; float: left; padding: 10px 10px 10px 30px; background-color: #5781be; color:#fff; border: 0; font-size: 18px; border-bottom: 2px solid #fff;}
#mainMenuFrame UL LI .submenu LI:last-child {border: 0;}
#mainMenuFrame UL LI .submenu LI A:HOVER {color: #efefef;}
#mainMenuFrame UL LI .submenu LI A:after {content: "\f105"; font-family: FontAwesome; width: 100%; height: 100%; padding-left: 10px; position: absolute; left: 0; top: 0; display: flex; align-items: center; text-align: left; font-size: 28px;}


#mainMenuFrame .controlsDhtml {width: 200px; float: left; position: absolute; top: 55px; left: 0; display: none; background-color: f5f5f5; color: #ffffff; border: 1px solid #aaaaaa; z-index: 100;}
#mainMenuFrame .controlsDhtml A {width: 200px; height: 36px; float: left; line-height: 36px; border-left: 0; padding: 0 10px; margin: 0px; background-color: f5f5f5;}
#mainMenuFrame .controlsDhtml A:HOVER {background-color: #c3ae67;}

#subMenuFrame {float: left; width: 100%; margin-bottom: 0px; background-color: unset;}
#subMenuFrame I {}
#subMenuFrame UL {width: 400px; float: left; list-style-type: none; margin: 0; padding: 0;}
#subMenuFrame UL LI {width: 400px; float: left; margin: 0 0 10px 0; padding: 0 0px 0 0;}
#subMenuFrame UL LI A {float: left; background-color: #CCCC9F; padding: 3px 10px; color: #ffffff; font-size: 18px;}

#mainContentFrame {float: left; width: 100%; padding: 0 5px 45px 5px;}


/* fotogalerie */
.photoGallery {width: 100%; float: left; margin-top: 20px; padding: 20px 0 0 0; border-top: 2px dashed #666;}
.photoGallery .photo {width: 200px; float: left; margin: 0 1% 1% 0; padding: 5px; border: 1px dotted #ccc;}
.photoGallery .photo:HOVER {border-style: solid;}
.photoGallery .photo IMG {width: 100%; float: left; cursor: move;}
.photoGallery .deleteLine {width: 100%; float: left; padding: 5px 0; display: flex; justify-content: end;}
.photoGallery .deleteLine A {margin-left: 5px}


#actuality {float: left; width: 100%;}
#actuality .item {float: left; width: 100%; padding: 10px 0; border-bottom: 2px dashed #ccc;}
#actuality .item .name {float: left; width: 100%; font-size: 20px; font-style: italic; font-weight: bold; color: #F23D24;}
#actuality .item .text {float: left; width: 100%;}


/* Nahrané soubory */
.files {width: 700px; height: auto; float: left; margin-left: 300px; display: flex; flex-wrap: wrap; font-size: 13px;}
.files a:hover {text-decoration: underline;}
.files .file {width: 100%; padding: 0px 0px 0px 0px; margin: 5px 0px 0px 0px; display: flex; align-items: center;}
.files .file .name {display: flex; align-items: center; flex-grow: 1; flex-shrink: 0;}
.files .file .size {width: 170px; flex-grow: 0; flex-shrink: 0;}
.files .file .date {width: 100px; flex-grow: 0; flex-shrink: 0;}
.files .file .delete {width: 150px; display: flex; align-items: center; flex-grow: 0; flex-shrink: 0; justify-content: flex-end;}
.files .file .filename {font-weight: 600;}
.files .file .formLine {margin: 0px;}
.files .file .checkboxLabel {}
.files .file .checkboxLabel p {margin: 0;}
.files.onlyIcons {align-items: center;}
.files.onlyIcons a {margin-right: 2px; font-size: 12px;}


#historyChanges {width: 100%; margin: 0; float: left;}
#historyChanges .service {width: 30%; float: left; flex-wrap: wrap;}
#historyChanges .service .row .name {width: 30%;}
#historyChanges .right {width: 65%; float: left; margin-left: 5%; flex-wrap: wrap; font-size: 14px;}

#historyChanges .row {width: 100%; float: left; padding: 2px 10px; border-bottom: 1px solid #eaeaea;}
#historyChanges .row:hover {background-color: #f7f7f7;}
#historyChanges .row.header {background-color: #f7f7f7; font-weight: bold; font-size: 17px;}
#historyChanges .row .name {width: 20%; float: left; font-weight: bold;}
#historyChanges .row .old {width: 20%; float: left;}
#historyChanges .row .sep {width: 5%; float: left;}
#historyChanges .row .new {width: 20%; float: left;}
#historyChanges .row .kdy {width: 15%; float: left;}
#historyChanges .row .kdo {width: 20%; float: left;}

#historyChanges .row.title {margin-top: 20px; background-color: #c7dadc;}

#historyChanges {width: 100%; float: left; margin-top: 40px;}


.uploadFile.delete {color: #ccc;}
.uploadFile.delete:HOVER {color: #000;}

#footer {position: fixed; z-index: 10000; bottom: 0; width: 100%; height: 36px; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; background-color: #1A2C38; color: #ffffff; text-align: right; font-size: 14px;}
#footer A {color: #ffffff;}
#footer A:HOVER {color: #F2F2F2;}
#footer .left {}
#footer .right { text-align: right;}