/* SciTE coding: utf-8 */

* {box-sizing: border-box}

html body {
	background-color: white; 
	margin: 0px;
	font-size: .75em;
	line-height: 1.33;
	background: #eee;
}

#header, #menu, #content {background-color: white;}

body, p, th, td, ol, dl, li, input, button, textarea, select, option {
	font-family: Arial, Helvetica, sans-serif;
	color: #2f2f2f;
}

p {margin: 1em 0em; line-height: 1.425em;}

table {font-size: 1em;}

hr {color: #ccc; background: #ccc; border: 0px; height: 1px;}

pre {font-size: 1.2em;}

#header #title {font-weight: bold; margin: 1em 0em;}

h1, h2, #header #title {font-weight: bold; margin: 1.2em 0 .6em;}
h1 {font-size: 1.6em; color: #2970c9;}
h2 {font-size: 1.3em;}
h2.filterTitle {margin-bottom: 1.5em}
h2.tblTitle {margin: 0.5em 0 0;}
span.grayout {color: #666; font-size: 0.85em;}
div.attend {font-style: italic; margin-top: 0.3em; font-size: 0.9em;}

h1.deny, h2.deny {color: #c92970;}

ul {margin: .5em 0em; padding: 0em;}
ul li {margin: .2em 3em; padding: 0em;}

a img {border: 0em;}
a {color: red; text-decoration: underline;}
a.blue {color: #2970c9;}
a:hover {text-decoration: none;}
a.littlelink {padding: 0em 0.5em; display: inline-block;}
a.littlelink:hover {background-color: #2970c9; color: white;}
a.rem-row {text-decoration: none; font-size: 1.2em; background-color: red; color: white; padding: 0 4px;}
a.rem-row:hover {color: red; background-color: white;}
a.link-remove {text-decoration: none; font-size: 1.2em; background-color: red; color: white; padding: 0 4px;}
a.link-remove:hover {color: red; background-color: white;}

/* stars before projects */
a.bmark_on, a.bmark_off {display: block; width: 16px; height: 16px; margin: 0 auto; 
    font-family: FontAwesome; font-size: 15px; text-decoration: none;
    position: relative; top: 1px;
}
a.bmark_on:before {content: "\f005"; color: #FFDE7B; color: rgba(253, 190, 0, 0.9); text-shadow: 1px 1px 0px #fff, 0 0 0 #000;}
a.bmark_on:hover:before {color: rgba(253, 190, 0, 0.7);}
a.bmark_off:before {content: "\f006"; color: #B0B0B0;}
a.bmark_off:hover:before {color: #666;}

div.clear {clear: both; font-size: 0; line-height: 0; height: 0;}

form {padding: 0px; margin: 0em;}
form fieldset {border: none; padding: 0px; margin: 0px;}

button,input,select {
    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

input.text, input.password, textarea {border: 1px solid #ccc; padding: 3px;}
input.text:focus, input.password:focus, textarea:focus {border: 1px solid #2970c9;}
select {border: 1px solid #ccc; padding: 2px;}

input[type=text]:read-only {cursor: default; background-color: rgba(239, 239, 239, 0.3);}

input[type=checkbox], input[type=radio] {position: relative; /*vertical-align: middle; bottom: 1px;*/ top: 2px; margin-top: 0;}
input[type=radio] {/*bottom: 2px;*/}

.grosse-bitch {font-size: 1.5em;}
input.grosse-bitch {font-size: 1.5em; padding: 0.2em 0.1em;}

textarea {width: 600px; height: 100px; font-size: 1em;}
textarea.few-lines {height: 50px;}

/* selectbox with projects */
select option.a-item {background-color: #efe;}
select option.t-active {background-color: #dff1ff;}
select option.t-prepared {background-color: #fff3df;}

::-webkit-input-placeholder, ::placeholder {font-family: Arial, Helvetica, sans-serif; color: #999; /*font-size: .875em*/}


/********************************************/
#mother {background-color: white;}

/* Hlavicka v2*/
#pattern {background: #555; height: 1.2em; text-align: right; padding: .5em 1em; color: white;}
#header {box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); position: relative; z-index:100}
#header #bg {padding: .5em 0em;}
#header #bg #logo {float: left; width: 190px; margin: 7px 0; margin-left: 3em; 
    padding-right: 1em; border-right: 1px solid #ccc;}

#header #bg #info {float: left; width: 350px; margin-left: 2em;}
#header #bg #info #title {font-size: 1.8em; color: #2970c9; margin: .2em 0;}
#header #bg #info #title a {color: #2970c9; padding-right: 20px;}
#header #bg #info #title a:hover:after {
    content: "\f08e"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 14px; margin-left: .5em;
    text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0);
}
#header #bg #info #system {text-transform: uppercase; font-weight: bold;}
#header #bg #info #login {float: left; width: 350px; margin-left: 2em;}

#header #bg #user {float: right; width: 220px; margin: .5em 1em 0em; text-align: right; line-height: 1.5em;}
#header #bg #user em {font-style: italic;}
#header #bg #user a.logout {background: url('../images/logout_icon.gif') right center no-repeat; padding-right: 19px;}
#header #bg #user a.logout:hover {background: url('../images/logout_icon_hover.gif') right center no-repeat;}

/* Menu altos */
#menu {padding: 0em 1em; padding-top: .5em; border-bottom: .9em solid #223f5d}
#menu .altos {position: relative; top: .9em}
#menu .altos a {display: block; float: left; white-space: nowrap;
	color: black; text-decoration: none; text-transform: uppercase; font-weight: bold; 
	margin: 0 .1em; padding: .6em .6em .8em;}

#menu .altos a.act, #menu .altos a:active {background: #2970c9; color: white; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1)}
#menu .altos a:hover {background: linear-gradient(180deg, rgba(41, 144, 255, 0.8), #2990ff); color: white; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);}
#menu .altos a:active, #menu .altos a:focus {background: #2970c9;}
#menu .altos a:focus {color: white}

/* Menu common items */
#menu a.logoff {float: right; color: white; background-color: #ffafaf;}
#menu a.logoff:hover, #menu a.logoff:active {background-color: #ff7f7f;}

/* Module actions v2 */
div#actions {margin: 1em 0em;}
div#actions a {color: black; margin-right: .2em; padding: .1em .2em; border-top: .3em solid #aaa; border-bottom: .1em solid #aaa; text-decoration: none;}
div#actions a:hover {background-color: white; text-decoration: underline;}
div#actions a.active {border-color: #2970c9; color: black;}

/* Content Block */
#content {padding: .1em 1.2em 1.2em;}
#content #leftside {float: left; width: 170px; margin-top: 1.8em;}
#content #leftside a.action {display: inline-block; width: 100%; padding: 6px 4px 3px; margin: 3px 0; 
    text-decoration: none; color: black; border-bottom: 1px solid #ccc}
#content #leftside a.action:hover {color: white; background-color: #2990ff; border-bottom: 1px solid #2990ff;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2)}
#content #leftside a.active {color: white; background-color: #2970c9; border-bottom: 1px solid #2970c9;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1)}
#content #rightside {margin-left: 185px; /* width of leftside + margin right of leftside */ border-left: 2px solid #ccc; 
    padding-left: 1em; padding-bottom: 1em; margin-top: 2em}
#content #rightside div.shorten_horizont {width: 70%;}

div#searchbox {margin: 2em 0;}
div#searchbox div.title {border-bottom: 1px solid #777;}
div#searchbox div.title span {background-color: #777; color: white; padding: .1em .3em;}
div#searchbox form {margin: .5em 0;}
div#searchbox form fieldset {border: 0;}
div#searchbox form fieldset input.typefield {width: 140px;}
div#searchbox form fieldset input.iconimage {vertical-align: bottom;}

span.searchterm {color: #d00;}
span.success {color: #00a900}
span.error {color: #d00}
a.remfilter {font-size: .7em; text-decoration: none; background-color: #f35; color: white; 
    padding: .1em .2em; margin-left: 1em;}
a.remfilter:hover {background-color: #fff; color: #f35;}

span.md_nadlimit {color: #00a900}
span.md_nadlimit.flag-1 {color: #f00}

table.userinfo {border-collapse: collapse; border: 0;}
table.userinfo tr th, table.userinfo tr td {border-bottom: 1px solid #ccc;}
table.userinfo tr th {text-align: left; padding: 1px 1em 1px 1px;}

/* Item actions eg. on page detail */
div.itemActions {margin: 1.5em 0 .5em;}
div.itemActions a {background-color: #2970c9; color: white; padding: 7px 6px 6px; text-decoration: none; margin-right: .5em;
    display: inline-block;
}
div.itemActions a.go {background: #2970c9 url('../images/icn_go.png') no-repeat right center; padding-right: 19px;}
div.itemActions a.go2 {background: #2970c9 url('../images/icn_go2.png') no-repeat left center; padding-left: 19px;}
div.itemActions a.hand {background: #2970c9 url('../images/icn_hand.png') no-repeat right center; padding-right: 25px;}
div.itemActions a:hover {background-color: #2990ff;}
div.itemActions a i.fa {font-size: 13px;}

div.itemActBigger {font-size: 1.2em; margin-bottom: 1.4em; line-height: 1em}
div.itemActionsTbl {margin: 1.5em 0 1.5em;}

/* Foot */
#foot {background-color: #999; padding: .4em 1.2em; font-size: .9em; color: white;}
#foot a {color: white;}

/* Tabs */
/* Base code from: https://codepen.io/markcaron/pen/MvGRYV */
.tabset {margin: 1em 0;}
.tabset > input[type="radio"] { display: none; } /* input radio uplne schovat */
.tabset .tab-panel { display: none; } /* vsechny panely nejdriv skryjeme */

/* aktivni panel zobrazime */
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}

/* zalozky spolecne styly */
.tabset > label {
    position: relative;
    display: inline-block;
    padding: 1em;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: bold;
}

.tabset > label:first-of-type {margin-left: 1em;}

/* hover efekty tabs */
.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
    color: #06c;
}

/* aktivni tab / borders */
.tabset > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

/* obsah */
.tab-panel {
    padding: 1em 0;
    border-top: 1px solid #ccc;
}

/* Design of MySQL manager table v2 */
table.thin {border-collapse: collapse; border: 0; margin: 1em 0; font-size: 1em;}
table.thin tr {background-color: #fff;}
table.thin tr th, table.thin tr td {padding: .4em .3em; line-height: 1.4em;}
table.thin tr th {background-color: #e3e3e3; border: 0; border-left: 1px solid #fff; /*border-bottom: 1px solid #ccc;*/
	text-align: center; vertical-align: bottom;}
table.thin tr td {vertical-align: top; border: 0; /*border-left: 1px solid #eee; border-bottom: 1px solid #ccc;*/}
table.thin tr:last-child:not(.even) td {border-bottom: 1px solid #ddd;}
table.thin tr th:first-child, table.thin tr td:first-child {border-left: 0;}
table.thin tr td a {color: #2970c9;}
table.thin tr td a:hover {text-decoration: none;}
/*table.thin tr td.inner {background-color: #eee;}*/
table.thin tr.even td {background-color: #f6f6f6; border-color: #fff; border-bottom-color: #ccc;}
table.thin tr:hover td {background-color: #ffffcc;} /*must be at last position to work properly*/
/* multiple select form on mysql data table */
table.thin input {margin: 0em;}
form table.thin td {background-color: inherit;}
form table.thin td:first-child {font-weight: normal;}
table.thin tr td i.fa {vertical-align: middle; font-size: 14px;}
span[title] > i.fa, a[title] > i.fa, p[title] > i.fa, div[title] > i.fa, i.fa[title] {/*cursor: help;*/}
table.thin tr.hotovy {border-top: 2px solid black}
table.thin tr.hotovy ~ tr.hotovy, table.thin tr.hotovy:nth-of-type(2) {border-top: 0} /*1) every other .hotovy 2) first .hotovy after table header*/

/* mysqlDrawTable styles 2 */
table.thindetail {border-collapse: collapse; border: none; border-top: .9em solid #ccc; border-bottom: 1px solid #ddd; margin: 1em 0; font-size: 1em;}
table.thindetail tr {background-color: #fff;}
table.thindetail tr th, table.thindetail tr td {padding: .3em 1em .3em .3em; border-top: 1px solid #cecece; vertical-align: top; text-align: left;}
table.thindetail tr th {background-color: #eee;}

table.thin td.fix-w {min-width: 250px;}

/* Legend under the MySQL data table v2 */
div.legend {margin: 1em 0em;}
div.inline ul {list-style: none;}
div.inline ul li {display: inline; margin: 0px; padding-left: .5em; padding-right: .5em; border-left: 1px solid #666;}
div.inline ul li:first-child {padding-left: 0em; border-left: 0px;}

/* Insert button v2 */
div.insert {padding: 0px 1px; margin: 1em 0em .5em;}

/* Inside table formatting v2 */
.abbr, .acronym, span.quest {border-bottom: 1px dashed #666; cursor: help;}

/* Design LA system data edit form v2 */
form.LAForm {margin: 0; margin-bottom: 1em;}
form.LAForm table {border-collapse: collapse; border: none; border-top: 5px solid #bfdcff;}
form.LAForm fieldset {padding: 0; border:0;}
form.LAForm fieldset:has(legend) {padding: 1em 0em; border-top: 1px solid #ccc;}
form.LAForm fieldset legend {color: black; padding: 0.3em 0.5em 0.2em; font-size: 1.2em; background: #e6e6e6; font-weight: bold;}
form.LAForm table tr td, form.LAForm table tr th {padding: .15em 1em; border-bottom: 1px solid #fff; height: 26px;}
form.LAForm table tr th {background-color: #e5f1ff; text-align: left; vertical-align: top; padding: 5px 1em;}
form.LAForm table tr td.label {background-color: #eee; text-align: left; vertical-align: top; padding-top: 5px;}
form.LAForm table tr td.input {background-color: #eee; text-align: left; vertical-align: middle;}
form.LAForm table tr td.input div.error {color: red; margin: .3em 0em; font-size: .9em;}
form.LAForm table tr td.input div.filltags {font-size: 1.2em; margin: .5em 0; max-width: 80%;}
form.LAForm table tr td.input div.filltags a {padding: .1em .2em; white-space: nowrap;}
form.LAForm table tr td.input div.filltags a:hover {background-color: #fff;}
form.LAForm table tr td.input span.note {font-size: 11px;}
form.LAForm table tr td.input div.note {font-size: 11px; margin: .3em 0;}
span.notification, div.notification {color: blue}
div.alert {background-color: #fdd; padding: 8px 8px 6px; margin: 10px 0; border-radius: 3px;}
span.warning, div.warning {color: red}
form.LAForm table tr td.tbl_line {height: 3px; background-color: #777; padding: 0; font-size: 0; line-height: 0;}
form.LAForm table tr td.tbl_label {font-weight: bold; background-color: #ddd; padding: 6px 1em 4px;}
form.LAForm table tr td.tbl_label.show-hide {background-color: #eee; padding: 0;}
form.LAForm table tr td.tbl_label.show-hide a {display: block; background-color: hsl(45, 85%, 87%); padding: 6px 1em 4px; text-decoration: none; color: inherit;}
form.LAForm table tr td.tbl_label.show-hide a:hover {background-color: hsl(45, 100%, 87%);}
form.LAForm table tr td.tbl_label.show-hide.hidden a,
form.LAForm table tr td.tbl_label.show-hide.shown a {position: relative; padding-left: 2.5em;}
form.LAForm table tr td.tbl_label.show-hide.hidden a:before {content: "\f067";
    font: normal normal normal 14px/1 FontAwesome; font-size: 14px; text-rendering: auto; -webkit-font-smoothing: antialiased;
    display: inline-block; position: absolute; left: 0; padding: 0 10px;}
form.LAForm table tr td.tbl_label.show-hide.shown a:before {content: "\f068";
    font: normal normal normal 14px/1 FontAwesome; font-size: 14px; text-rendering: auto; -webkit-font-smoothing: antialiased;
    display: inline-block; position: absolute; left: 0; padding: 0 10px;}
form.LAForm table tr td input.image {vertical-align: middle;}
form.LAForm table tr td input.submit, form.LAForm table tr td input.button {
    cursor:pointer; border:outset 1px #ccc; padding: 4px 6px; margin-right: .5em; font-weight:bold; color:#555; 
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
form.LAForm table tr td input.submit:hover, form.LAForm table tr td input.button:hover {color: #2970c9}
form.LAForm table tr td span.mobile-label {display: none; font-weight: bold;}
form.LAForm table tr td input.sidebut {margin: 0; margin-left: .5em;}
form.LAForm table tr td input.green {background: green; color: white; border: outset 1px green; }
form.LAForm table tr td input.green:hover {color: #adff99}

/* Table in table / eg. checkboxes in multicolumn lazout */
form.LAForm table.simple {border: none; margin: .25em 0; padding: 0;}
form.LAForm table.simple td {border: none; margin: 0; padding: 0; padding-right: 1em; vertical-align: top; height: auto;}

/* Ask Box */
form.LAConfirm {padding-bottom: 1em;}
form.LAConfirm p {margin: 0 0 1.5em; font-size: 1.2em;}
form.LAConfirm a {background-color: #3a70c8; border-radius: 4px; box-shadow: 0 2px 6px hsl(0deg 0% 0% / 30%); 
    padding: 0.6em 1em 0.5em; color: white; margin-right: 1em; text-decoration: none;
}
form.LAConfirm a.destructive {background-color: #d00;}

/* Page lister */
div.lister {background-color: #eee; padding: 6px 8px 4px;}
div.lister a {text-decoration: none; font-weight: bold; color: #2970c9; padding: 6px 8px; border-radius: 3px;}
div.lister a.jump {font-weight: normal;}
div.lister a:hover, div.lister a.active {color: white; background-color: #2970c9; text-decoration: none; box-shadow: 0 0 2px rgba(0,0,0,0.3)}
div.list-tickets {margin: 0.85em 0;} /*Special lister for ticket table*/

div.unicard {width: 600px;}
div.unicard div.itemActions {float: right; width: 100px; text-align: right; margin: 0; padding: 0;}
div.unicard div.itemActions a {margin: 0;}
div.unicard h2 {width: 500px;}
div.unicard h2 span.card {color: #777;}
div.unicard div.ucont {border-top: .5em solid #aaa;}

div.unicard p.info {line-height: 1.425em;}
div.unicard p.state {font-style: italic;}
div.unicard p.state span {color: #f33;}
div.unicard table {border-collapse: collapse; border-bottom: 1px solid black;}
div.unicard table tr td {border-top: 1px solid black; padding: .4em 0em;}
div.unicard table tr td.equal {width: 150px;}

div.utickets {width: 870px;}

span.state-1, span.state-2, span.state-3 {padding: 0em .2em;}
span.state-1 {background-color: lightblue; color: black;}
span.state-2 {background-color: yellow; color: black;}
span.state-3 {background-color: #ffafaf; color: black;}

span.prio-1, span.prio-2, span.prio-3, span.prio-4, span.prio-5 {padding: 0em 1.5em;}
span.prio-1 {background-color: #eee; color: black;}
span.prio-2 {background-color: lightblue; color: black;}
span.prio-3 {background-color: lightgreen; color: black;}
span.prio-4 {background-color: yellow; color: black;}
span.prio-5 {background-color: red; color: white;}

/* Statistiky vykazu prace */
div.wstat {max-width: 600px; margin-top: 1em; border-top: 1px solid #ddd; border-bottom: 1px solid #ccc; padding: 0.8em 0 0.5em;}
div.total {font-size: 1.3em;}

span.wsumtime {color: #d00}

/* WH barvicky */
span.tojeono, span.master, span.cizi {padding: 0px 2px}
span.tojeono {background: #e6e6e6; color: #ED1B23; font-style: italic}
span.master {background: #8fd9e8; color: #0D114C; font-weight: bold}
span.vashosting {background: #a8ffbb; color: #333; font-style: italic}
span.cizi {background: #bbb; color: #fff}

/* invoices */
span.fa-black {background-color: #333; color: white; padding: 0px 2px}
span.fa-storno {background-color: #f66; color: white; padding: 0px 2px}
span.fa-sent {background-color: #8c3; color: white; padding: 0px 2px}
span.fa-grey {background-color: #999; color: white; padding: 0px 2px}
span.fa-po {background-color: #f66; color: white; padding: 0px 5px; font-weight: bold;}
span.warranty {background-color: #96f; color: white; padding: 0px 2px}
span.tp {background-color: #ffda98; color: white; padding: 0px 2px}
span.ti {background-color: #9cc7ff; color: white; padding: 0px 4px}
span.tm {background-color: #ffc8c8; color: white; padding: 0px 2px}

/*NDA SLA*/
span.flag_nda, span.flag_sla {color:white; padding: 1px 2px; font-size: smaller; position: relative;}
span.flag_nda.bigger, span.flag_sla.bigger {padding: .15em .3em; font-size: 15px; font-weight: bold;}
span.flag_nda {background-color: #ff2a2a}
span.flag_sla {background-color: #2a98ff}

.td--dashed {text-decoration: underline black dashed;}

input.month {width: 25px}
input.year {width: 40px}

div.inv-sum {font-size: 1.2em; clear: both; margin-top: 10px}
div.inv-sum span.curr {display: block; float: left; width: 50px; background-color: #FFE1BF; text-align: center; padding: 1px 0;}

span.merge {margin-left: 4px; font-size: 11px; font-size: 11px; color: #666; background-color: rgba(255, 255, 0, 0.5); padding: 1px 2px;}
span.here-place-rem {}

span.proj-actual {background-color: #dbf5bd; color: black;}
span.proj-finished {background-color: #ffd8d8; color: black;}
span.vs {color: #E86D03}

a.label-blue {color: #fff !important; text-decoration: none; padding: 0px 2px; background-color: rgb(0, 125, 161);}
a.label-blue:hover {background-color: rgb(197, 0, 157);}
a.label-blue i.fa {font-size: 13px;}

a.table__toggle {position: relative;}
a.table__toggle.this__state__expanded::after, a.table__toggle.this__state__collapsed::after {
    content: ''; position: absolute; width: 0; height: 0; top: calc(50% - 3px); margin-left: .4em;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
}
a.table__toggle.this__state__expanded::after {border-bottom: 5px solid #f00;}
a.table__toggle.this__state__collapsed::after {border-top: 5px solid #f00;}

table.table__toggle.this__state__collapsed,
form.table__toggle.this__state__collapsed,
div.table__toggle.this__state__collapsed {display: none;}

a.table__toggle.button {background-color: #2970c9; color: white; text-align: center; text-decoration: none;
    border-radius: 3px; box-shadow: 0 3px 6px rgba(0, 0, 0, .20); 
    padding: .5em .75em; padding-right: 2em; margin-right: .5em;
}
a.table__toggle i.fa {font-size: 14px}
a.table__toggle.button::after {border-bottom-color: inherit; border-top-color: inherit;}
a.table__toggle.button.shadow-blue {background-color: #fff; color: #333; border: 1px solid #2970c9;}
a.table__toggle.button.shadow-white {background-color: #fff; color: #333; border: 1px solid #333;}
a.table__toggle.button.flat {background-color: #c3dcff; color: #333; box-shadow: none; border: 0;}
a.table__toggle.button.this__state__expanded.flat {background-color: #eee; color: #333;}
a.table__toggle.button.width-full {width: 100%;}

a.table__toggle.visible__mobileonly {display: none;}
a.table__toggle.filter__active {padding-left: 20px;}
a.table__toggle.filter__active::before {content: ''; position: absolute; width: 8px; height: 8px; top: calc(50% - 4px); 
    margin-left: -10px; border-radius: 50%; background-color: #00a900;}

/* twitter typehead plugin*/ 
.tt-hint {color: #999}
.tt-dropdown-menu {
    width: 300px; margin-top: 5px; padding: 4px 0; background-color: #fff; border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    /*max-height: 150px; overflow-y: auto;*/ /* scrollable dropdown menu */ 
}
.tt-suggestion {padding: 3px 5px 1px;}
.tt-suggestion.tt-cursor {color: #fff; background-color: #0097cf;}
.tt-suggestion.tt-cursor p {color: #fff;}
.tt-suggestion.tt-cursor strong.tt-highlight {background-color: inherit}
.tt-suggestion p {margin: 0;}
.tt-suggestion strong.tt-highlight {background-color: #ffffc0; background-color: rgba(255,255,0,0.2);}
.tt-suggestion span.suggestion {display: block; float: left; width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.tt-suggestion span.proj_finished {float: right; font-style: italic; color: #999;}
.tt-suggestion span.domain {color: blue;}
.tt-suggestion.tt-cursor span.proj_finished {color: white}
.tt-dropdown-menu .empty-message {padding: 3px 5px 1px; text-align: left; font-style: italic;}

div.tooltip-box {border: 0; background: #555; background: rgba(0,0,0,0.7); color: white; border-radius: 2px; font-size: 11px; padding: 3px 5px;
    font-family: Arial, sans-serif;
}

p.bg-success {padding: 10px 10px 8px; background-color: #dff0d8; margin: 0 0 10px;}

a.badge {background-color: brown; color: white; border-radius: 3px; display: inline-block; margin-right: 3px; padding: 3px 6px; 
    text-decoration: none;}
a.badge:hover {background-color: #e86767;}
a.badge span {background-color: #fff; color: black; font-weight: bold; display: inline-block; border-radius: 3px;
    text-align: center; padding: 1px 5px 0px; margin-right: 2px}

a.brick {display: inline-block; width: 20px; margin: 0 2px; padding: 1px 0 0; font-weight: bold; text-decoration: none; 
    border: 1px solid black; border-radius: 2px; text-align: center;}
a.brick.w-auto {width: auto; padding-left: 3px; padding-right: 3px;}
a.brick.red:hover {background-color: red;}
a.brick.orange:hover {background-color: orange;}
a.brick:hover span {color: white;}
a.brick.red {color: red; border-color: red;}
a.brick.orange {color: orange; border-color: orange;}
span.namespan {display: inline-block; width: 110px;}
p.userline {margin: 4px 0}

/* SELECT 2 */
.select2-results__option { margin: 0px; }
.select2-container--default .select2-selection--single { border-radius: 0px !important; border: 1px solid #ccc !important; height: 23px !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 23px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 23px !important;}
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa !important; height: 23px !important;}
.select2-results__option {padding: 3px !important; }


/*************************************************************/
/*************************************************************/
/* THESE MEDIA QUERIES STACK & EXTEND */
/* DESKTOP FIRST !!! */
/*************************************************************/
/*************************************************************/
/* Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {}

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
    #pattern {display: none;}
    #header #bg {padding: 1em 0}
    #header #bg #logo {display: none;}
    #header #bg #logo a img {max-width: 120px; height: auto;}
    #header #bg #info {float: none; margin-left: 1em; display: inline;}
    #header #bg #info #title {font-size: 1.4em; display: inline;}

    #header #bg #info #system {display: none;}
    #header #bg #user {width: auto; text-align: left; margin-top: .3em; float: none;}
    #header #bg #user em {display: none;}
    #header #bg #user > br {display: none;}
    #content #leftside {float: none; width: auto; padding-bottom: .5em; margin-top: .5em}
    #content #leftside a.action {width: auto; display: inline-block; margin: 3px 0; margin-right: .5em}
    #content #rightside {margin-left: 0; border: 0; padding-left: 0; }
    #menu {background: none; padding: .5em; border-bottom: 5px solid #888}
    #menu .altos a {float: none; display: inline-block; padding: .7em .6em .6em}
    #menu a.logoff {float: none; position: absolute; top: -6em; right: 1em; z-index: 110; background-color: #d00;}
    div#searchbox {margin: 1em 0 .5em}
    form.LAForm table tr td.input {line-height: 2.2em;}
    
    form#massWork table {width: 100%;}
    form#massWork table thead {display: none;}
    form#massWork table tr {display: block; border-bottom: 3px solid #fff; position: relative;}
    form#massWork table td.input {line-height: 1.8em; white-space: nowrap; padding: .4em; display: block; height: auto;}
    form#massWork table td.input input {padding: .4em;}
    form#massWork table td.input span.twitter-typeahead {display: block !important;}
    form#massWork table td.input input.typeahead.tt-hint.text,
    form#massWork table td.input input.typeahead.tt-input.text {width: 100% !important;}
    form#massWork table td.input input[name^="wk-popis-"] {width: 100%;}
    form#massWork table td.input input[name^="wk-datum-"] {width: 80px;}
    form#massWork table td.input input[name^="wk-prace-"] {width: 50px;}
    form#massWork table td.input span.mobile-label {display: inline;}
    form#massWork table tr:not(:last-of-type) td.input:last-of-type {padding: 0;} /*zmensi bunku s rem-row*/
    form#massWork table tr:last-of-type {border-bottom: 0;}
    form#massWork table tr:last-of-type td.input:first-child {display: none;} /*zmizi td v radku s buttony*/
    form#massWork table td.input a.rem-row {position: absolute; display: inline-block; right: 5px; top: 5px; 
        line-height: 1.2; padding: 4px 9px; border-radius: 3px;}
    
    table.thin.mobile-ready {width: 100%;}
    table.thin.mobile-ready tr:first-of-type {display: none;}
    table.thin.mobile-ready tr {display: block; border-bottom: 1px solid #dfdfdf; padding-bottom: .3em; margin-bottom: .6em;}
    table.thin.mobile-ready tr td {display: inline-block; line-height: 1.3; padding: .3em .2em .1em;}
    table.thin.mobile-ready tr:nth-of-type(odd) td {background-color: #fff;}
    table.thin.mobile-ready tr td:nth-of-type(1) {display: none;}
    table.thin.mobile-ready tr td:nth-of-type(2) {color: #00a900; border: 1px solid #00a900 !important; border-radius: 3px;}
    table.thin.mobile-ready tr td:nth-of-type(4) {display: inline-block; max-width: calc(100% - 50px);}
    table.thin.mobile-ready tr td:nth-of-type(5) {display: block; padding: .5em .2em .1em;}
    table.thin.mobile-ready tr:last-child:not(.even) td {border-bottom: none;}

    /* toggle for mobile */
    a.table__toggle.visible__mobileonly {display: inline-block;}
}

/* Extra Small devices (bigger mobile phones, 530px and up) */
@media (max-width: 530px) {}

/* Extra Extra Small devices (mobile phones, 420px and up) */
@media (max-width: 420px) {}


/*************************************************************/
/*************************************************************/
/* THESE MEDIA QUERIES DOES EXACTS */
/*************************************************************/
/*************************************************************/

/* Extra Small devices (small mobile phones) - EXACT */
@media (max-width:364px) {}

/* Extra Small devices (small mobile phones) - EXACT */
@media (min-width:365px) and (max-width:529px) {}

/* Extra Small devices (mobile phones) - EXACT */
@media (min-width:530px) and (max-width:767px) {}

/* Small devices (tablets) - EXACT */
@media (min-width:768px) and (max-width:991px) {}

/* Medium devices (desktops) - EXACT */
@media (min-width:992px) and (max-width:1199px) {}

/* end css */