html {font-family: 'Roboto', sans-serif; font-size: 14px; color: #1a2c38;}
body {line-height: 1.6; margin: 0; padding: 0 0 0 0;}

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

.onlyMobile {display: none;}

INPUT, SELECT {font-family: 'Roboto', sans-serif; font-size: 16px;}
INPUT[type=checkbox] {-webkit-appearance:checkbox;}
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, 'Roboto', sans-serif; background-color: #176f9f; font-size: 24px; padding: 12px 18px;}
.buttonSave::after {content: 'Uložit'; font-family: 'Roboto', 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;}
.buttonInForm:HOVER {background-color: #15648F;}

.corner3 {border-radius: 3px;}

.line {width: 100%; float: left;}

.flex {display: flex; display:-webkit-flex; display:-webkit-box; display:-moz-flex; display:-moz-box; display:-ms-flexbox; display:flex;}
.flex.flexItemC {align-items: center;}

.orange {color: #fa4632;}

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


#dataList {width: 100%; float: left; margin-top: 20px; display:-webkit-flex; display:-webkit-box; display:-moz-flex; display:-moz-box; display:-ms-flexbox; display:flex;}
#dataList .left {width: 260px;}
#dataList .right {width: calc(100% - 260px); overflow-x: scroll; overflow-y: hidden;}
#dataList .right .inner {width: 100%;}

#dataList .row {height: 42px; display:-webkit-flex; display:-webkit-box; display:-moz-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items: center;}

#dataList .row .cnt {width: 30px; height: 42px; padding-right: 4px; display:-webkit-flex; display:-webkit-box; display:-moz-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items: center; justify-content: flex-end;}
#dataList .row .name {width: 170px; height: 42px; font-weight: bold; display:-webkit-flex; display:-webkit-box; display:-moz-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items: center;}
#dataList .row .sum {width: 60px; height: 42px; background-color: #eaeaea; font-weight: bold; line-height: 1.2; display:-webkit-flex; display:-webkit-box; display:-moz-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items: center; align-content: center;}
#dataList .row .day {flex: 0 0 58px; height: 42px; display:-webkit-flex; display:-webkit-box; display:-moz-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items: center; justify-content: center;}
#dataList .row .day.weekend {flex: 0 0 24px;}
#dataList .row .day.sumRow {background-color: #eaeaea; font-weight: bold;}
#dataList .row .day.sumRowFood {background-color: #eaeaea; font-weight: 300; padding: 0 1px; text-align: center;}
#dataList .row .day .tipCell {}
#dataList .row .day .icon {width: 6px; height: 14px; margin-right: 1px;}
#dataList .row .day .icon.green {background-color: #4F8A10;}
#dataList .row .day .icon.red {background-color: #fa4632;}
#dataList .row .header {background-color: #10a3db; color: #fff;}

#dataList .row.playerNameMobile {display: none;}
#dataList .row .day .dayDateMobile {display: none;}

#dataList .row .weekend {font-weight: bold; background-image: linear-gradient(135deg, #eaeaea 25%, transparent 25%, transparent 50%, #eaeaea 50%, #eaeaea 75%, transparent 75%, transparent); background-size: 5px 5px;}
#dataList .row .header.weekend {color: #333; flex: 0 0 24px;}

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

.svetlaModra {color: #213744;}
.tmavaModra {color: #1a2c38;}

.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; padding: 10px 0 0 0; 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: 300; text-align: center; border-bottom: 2px #cccc9f solid; background-color: #8E110F; color: #FFF;}
#loginCont .loginFrame IMG {max-width: 100%; float: left;}
#loginCont .loginFrame .inner {width: 100%; float: left; padding: 10px 20px 20px 20px; background-color: #FFF;}
#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: #9fb4cc;}
#loginCont .loginFrame .inner INPUT[type=submit] {width: 100%; float: left; padding: 8px 10px; margin: 5px 0px; border: 1px #10a3db solid; background-color: #10a3db; color: #fff; cursor: pointer; }
#loginCont .loginFrame .inner INPUT[type=submit]:HOVER {background-color: #fa4632; border-color: #fa4632;}
#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;}

#errorPanel {display: none;}

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

HEADER {width: 100%; height: 90px; float: left; padding: 10px; display: flex; justify-content: space-between; align-items: center; background-color: #213744;}
HEADER .logoHref {float: left; height: 100%;}
HEADER .logoHref .logo {max-height: 100%;}
HEADER H1 {font-family: 'Roboto', sans-serif; width: auto; float: left; position: relative; padding: 0 0 0 30px; margin-right: auto; line-height: 1; font-weight: 400; color: #fff; font-size: 48px;}
HEADER .loggedUser {display: flex; align-items: center; color: #10a3db; font-size: 14px;}
HEADER .loggedUser .funkce {color: #fa4632;}
HEADER .icon {padding: 0 0 0 30px; display: flex; align-items: center; font-size: 42px; color: #fff;}
HEADER .icon:HOVER {color: #ccc;}
HEADER .icon.signout {font-size: 54px;}

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

#mainMenuFrame {font-family: 'Roboto', sans-serif; float: left; width: 100%; margin-bottom: 0px; background-color: #1a2c38;}
#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 #213744; position: relative;}
#mainMenuFrame UL LI A {float: left; position: relative; background-color: #1A2C38; border-bottom: 4px solid #1A2C38; padding: 12px 20px 9px 20px; color: #ffffff; font-size: 16px; font-weight: 300; line-height: 1.2;}

#hamburger {display: none;}


/*
#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.attendance:after {content: "\f017";}
#mainMenuFrame UL LI A.food:after {content: "\f0f5";}
#mainMenuFrame UL LI A.user:after {content: "\f0c0";}
#mainMenuFrame UL LI A.diary:after {content: "\f0f6";}
#mainMenuFrame UL LI A.staffroom:after {content: "\f0b1";}
#mainMenuFrame UL LI A.file:after {content: "\f0c5";}
#mainMenuFrame UL LI A.absence:after {content: "\f05e";}
#mainMenuFrame UL LI A.failure:after {content: "\f0ad";}
#mainMenuFrame UL LI A.list:after {content: "\f03a";}
#mainMenuFrame UL LI A.holiday:after {content: "\f005";}
#mainMenuFrame UL LI A.actuality:after {content: "\f0e7";}
*/

#mainMenuFrame UL LI A:HOVER, #mainMenuFrame UL LI A.active {background-color: #213744; border-bottom: 4px solid #fa4632;}
#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: #176f9f; 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: none;}
#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 {position: relative; float: left; width: 100%; padding: 0 5px 105px 5px;}
#mainContentFrame .icons {position: absolute; top: 10px; right: 10px;}

#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-weight: bold; color: #F23D24;}
#actuality .item .text {float: left; width: 100%;}

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

#footer {position: relative; width: 100%; height: auto; padding: 20px; justify-content: end; align-items: center; background-color: #fa4632; color: #ffffff; text-align: right;}
#footer.footerBottom {position: fixed; bottom: 0;}
#footer A {color: #ffffff;}
#footer A:HOVER {color: #F2F2F2; text-decoration: underline;}
#footer .left {width: 50%; text-align: left;}
#footer .right {width: 50%; text-align: right;}