@import "fontawesome.min.css";
@import "all.min.css";
@import "brands.min.css";
@import "regular.min.css";
@import "solid.min.css";

/* zákaz pull to refresh */
body{
	overscroll-behavior-y: contain;
}

.c-orange{
  color: var(--brema-orange);
}

.c-silver{
  color: var(--brema-silver);
}

.c-green{
  color: var(--brema-green);
}

.c-blue{
  color: var(--brema-blue);
}

.c-yellow{
  color: var(--brema-yellow);
}

.c-tyrkys{
  color: var(--brema-tyrkys);
}

.c-red{
  color: var(--brema-red);
}

a.logout,
span.logout{
	font-size: 14px;
	font-weight: bold;
	color: var(--brema-blue);
	line-height: 26px;
	margin-right: 4px;
}

span.logout{
	color: var(--brema-silver);
}

img.chyba{
	display: block;
	max-width: 100%;
	margin: 0px auto 10px auto;
}

p.chyba{
	text-align: center;
}

/* menu a fotky v mont.listu*/
.menu .menu-items,
.photo-m-l-container,
.photo-p-m-container{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	grid-template-rows: repeat(auto, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	justify-items: stretch;
	align-items: stretch;
	padding-top: 15px;
}

.photo-p-m-container{
  padding-top: 5px;
}

.menu .menu-items .item,
.photo-m-l-container .photo-m-l,
.photo-m-l-container .photo-m-l img,
.photo-p-m-container .photo-m-l,
.photo-p-m-container .photo-m-l img{
	display: flex;
	height: 80px;
	border: 1px solid var(--silver-light);
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.photo-m-l-container .photo-m-l,
.photo-p-m-container .photo-m-l{
  position: relative;
  border-radius: 3px;
  background-color: var(--bg-color);
}

.photo-m-l-container .photo-m-l img,
.photo-p-m-container .photo-m-l img{
  max-width: 100%;
}

.photo-m-l-container .photo-m-l .close,
.photo-p-m-container .photo-m-l .close{
  position: absolute;
  display: flex;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  background-color: var(--brema-red);
  color: var(--white);
  border-radius: 50%;
  cursor: default;
}

.menu .menu-items .item i{
	display: flex;
	height: calc(100% - 25px);
	align-items: center;
	font-size: 36px;
	color: var(--silver);
}

.menu .menu-items .item span{
	display: flex;
	height: 25px;
	align-items: center;
  text-align: center;
	color: var(--primary);
	font-weight: bold;
}

.menu .menu-items .item.two-line i{
  height: calc(100% - 40px);
  font-size: 27px;
}

.menu .menu-items .item.two-line span{
  height: 40px;
  word-break: break-word;
}
/* menu end */

/* table */

table{
	table-layout: fixed;
	font-size: 14px;
}

table.autosklad thead tr th.foto{
	width: 40px;
}

table.autosklad tbody tr td.foto img{
	height: 36px;
	margin: 0px;
}

table.autosklad thead tr th.nazev{
	width: auto;
}

table.autosklad thead tr th.cislo{
width: 80px;
}

table.autosklad thead tr th.pocet{
	width: 60px;
}

fieldset{
  border: 1px solid var(--bg-header-table-color);
  border-radius: 3px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  margin-bottom: 10px;
}

div.div-txt-arr fieldset{
  border-color: var(--silver-light);
}

fieldset legend{
  padding: 3px 6px;
  border: 1px solid var(--silver-light);
  background-color: var(--bg-header-table-color);
}

div.div-txt-arr fieldset legend{
  border-color: var(--silver-light);
  background-color: var(--silver-light);
}

fieldset .zavada{
  display: flex;
  column-gap: 4px;
}

fieldset .zavada .cislo-zavady::first-letter{
  text-transform: capitalize;
}

td.zavada{
  padding: 0px;
  text-align: left;
}

td.zavada .th{
  width: 100%;
  background-color: var(--bg-header-table-color);
  color: var(--primary);
  font-weight: bold;
  text-align: center;
  padding: 10px 0px;
}

td.zavada .td{
  padding: 10px;
}

/* fieldset .cislo-zavady{

}

fieldset .popis-zavady{

} */

/* table.cinnosti{
	box-shadow: none;
}

table.cinnosti tbody{
	box-shadow: 0px 0px 4px 0px rgb(var(--box-shadow-color), 0.4);
} */

/* table end */

.confirm-box#info_all p{
  max-height: calc(100vh - 77px);
  overflow-y: auto;
  padding-bottom: 2px;
}

.confirm-box#info_all .zpravy-info-technikovi fieldset{
  margin-bottom: 15px;
}

.confirm-box#info_all .zpravy-info-technikovi fieldset:last-child{
  margin-bottom: 0px;
}

td:not(.pozastaveny) strong.spravce{
  color: var(--brema-blue);
}

/* čas události */
.progress{
  position: fixed;
  top: 49px;
  left: 0px;
	width: 0%;
	height: 2px;
	background-color: var(--brema-blue);
	transition: width 0.3s;
  z-index: 1000;
}

.progress[data-pauza="1"]{
  -webkit-animation: pulse 2s ease-in infinite;
	animation: pulse 2s ease-in infinite;
  background-color: var(--brema-orange);
}

.cas-container{
	position: relative;
}

/* .cas-container .progress{
	width: 0%;
	height: 2px;
	background-color: var(--brema-blue);
	transition: width 0.3s;
} */

.cas-container .cas{
	display: flex;
	font-size: 60px;
	align-items: baseline;
	justify-content: center;
	padding: 30px 0px 20px 0px;
	opacity: 1;
}

/* .cas-container[data-stav-cinnosti="6"] .cas{ */
.cas-container[data-pauza="1"] .cas{
	-webkit-animation: pulse 2s ease-in infinite;
	animation: pulse 2s ease-in infinite;
  color: var(--brema-orange);
}

sub{
  font-size: 30px;
}
/* čas end události */

/* montážníh list */
.box .body.zavada p{
	padding: 3px 5px;
}

.montazni-list textarea{
	height: 150px;
}

.material-m-l,
.pozadovany-material-m-l{
	display: flex;
	column-gap: 5px;
  margin-bottom: 7px;
}

.material-m-l i,
.pozadovany-material-m-l i{
  display: flex;
  width: 26px;
  align-items: center;
}

.material-m-l input,
.pozadovany-material-m-l input{
  margin: 3px 0px;
}

.material-m-l.next,
.pozadovany-material-m-l.next{
  border: 1px solid var(--brema-silver);
  border-top: 0px;
  padding: 4px 4px 0px 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 10px;
}

.material-m-l select,
.pozadovany-material-m-l select{
	width: calc(80% - 30px);
}

.material-m-l input.pocet-materialu,
.pozadovany-material-m-l input.pocet-materialu{
	width: 33%;
}

.material-m-l.next select,
.material-m-l.next input.pocet-materialu,
.pozadovany-material-m-l.next select,
.pozadovany-material-m-l.next input.pocet-materialu{
	margin-bottom: 4px;
}

.material-m-l .btn.zrusit,
.pozadovany-material-m-l .btn.zrusit{
	width: 30px;
	margin-top: 3px;
}


.rekap-zavada.z-t{
  width: 100%;
}

.rekap-zavada.z-t .zavada-technik{
  display: flex;
  width: 100%;
}

.rekap-zavada.z-t input[name="zavada-technik"]{
  margin: 0px;
  border-color: var(--brema-red);
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rekap-zavada.z-t button.uloz-zavada-technik{
  margin-top: 0px;
  border-color: var(--brema-red);
  border-radius: 0px;
}

.rekap-zavada.z-t button.vymaz-zavada-technik{
  margin-top: 0px;
  border-color: var(--brema-red);
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px; 
}



canvas{
	width: 100%;
	min-height: 200px;
	background-color: var(--bg-color);
	border: 1px solid var(--bg-header-table-color);
	border-radius: 3px;
	touch-action: none;
}

canvas.disabled{
  opacity: 0.5;
  pointer-events: none;
}

.podpis-tab{
	position: relative;
	margin-bottom: -1px;
	z-index: 1;
}

.podpis-tab button {
	background-color: inherit;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border: 1px solid var(--bg-header-table-color);
	border-bottom: 0px;
	outline: none;
	cursor: pointer;
	padding: 10px 8px;
	transition: 0.3s;
}
.podpis-tab button.active {
	background-color: var(--bg-color);
}

.podpis-tabcontent {
	display: none;
}

.body.odeslat-montazni-list p:not(:first-child){
	margin-top: 10px;
}
/* montážní list end */

.body.vymazat-soubory button.btn{
  margin-top: 0px;
}

/* docházka */
.box.datum-dochazky h3{
  display: block;
}

.box.datum-dochazky h3 i.fas{
  width: 24px;
  font-size: 24px;
}

.box.datum-dochazky h3 i.fa-angle-left{
  float: left;
}

.box.datum-dochazky h3 i.fa-angle-right{
  float: right;
  text-align: right;
}

.box.datum-dochazky span{
  width: calc(100% - 48px);
  display: inline-block;
  text-align: center;
}
/* docházka end */

/* autosklad */
.box.autosklad .search-box{
  position: sticky;
  top: -1px;
  background-color: var(--bg-box-color);
  padding: 5px 0px 10px 0px;
  z-index: 1;
}
.box.autosklad .search-box input.search{
  width: 100% !important;
  margin: 5px 0px 10px 0px !important;
}

table.autosklad{
  margin-top: 0px;
}

table.autosklad tr th{
  top: 73px;
}
/* autosklad end */

.body.rekapitulace-zavad label.checkbox{
  display: flex;
  width: auto;
  margin-bottom: 5px;
  align-items: flex-end;
  column-gap: 3px;
}




/* .c-loader {
	display: inline-block;
	position: relative
}

.c-loader--small .c-loader__content {
	height: var(--heightContentSmallLoader);
	width: var(--widthContentSmallLoader)
}

.c-loader--small .c-loader__sonar1,.c-loader--small .c-loader__sonar2,.c-loader--small .c-loader__sonar3 {
	-webkit-animation-name: sonarSmall;
	animation-name: sonarSmall
}

.c-loader__content {
	align-items: center;
	background: var(--backgroundContentLoader);
	border-radius: 50%;
	box-shadow: var(--boxShadowXXSmall);
	color: var(--fontColorContentLoader);
	display: inline-flex;
	font-size: var(--fontSizeContentLoader);
	font-weight: var(--fontWeightBold);
	height: var(--heightContentLoader);
	justify-content: center;
	position: relative;
	width: var(--widthContentLoader);
	z-index: 1
}

.c-loader__content--pulse {
	-webkit-animation: pulseContent 3s ease-in infinite;
	animation: pulseContent 3s ease-in infinite;
	-webkit-transform: scale(1);
	transform: scale(1)
}

.c-loader__image {
	-webkit-animation: pulseImage 3s ease-in infinite;
	animation: pulseImage 3s ease-in infinite;
	opacity: 1;
	width: 50%
}

.c-loader__sonar1,.c-loader__sonar2,.c-loader__sonar3 {
	-webkit-animation: sonar 3s infinite;
	animation: sonar 3s infinite;
	background: var(--backgroundAnimationLoader);
	border-radius: 50%;
	display: block;
	left: 50%;
	opacity: .2;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%)
}

.c-loader__sonar2 {
	-webkit-animation-delay: .3s;
	animation-delay: .3s
}

.c-loader__sonar3 {
	-webkit-animation-delay: .6s;
	animation-delay: .6s
}

@-webkit-keyframes sonar {
	0% {
			height: var(--heightContentLoader);
			opacity: .2;
			width: var(--widthContentLoader)
	}

	90% {
			height: calc(var(--heightContentLoader) + var(--sizeAnimationLoader));
			opacity: 0;
			width: calc(var(--widthContentLoader) + var(--sizeAnimationLoader))
	}

	to {
			height: var(--heightContentLoader);
			opacity: 0;
			width: var(--widthContentLoader)
	}
}

@keyframes sonar {
	0% {
			height: var(--heightContentLoader);
			opacity: .2;
			width: var(--widthContentLoader)
	}

	90% {
			height: calc(var(--heightContentLoader) + var(--sizeAnimationLoader));
			opacity: 0;
			width: calc(var(--widthContentLoader) + var(--sizeAnimationLoader))
	}

	to {
			height: var(--heightContentLoader);
			opacity: 0;
			width: var(--widthContentLoader)
	}
}

@-webkit-keyframes sonarSmall {
	0% {
			height: var(--heightContentSmallLoader);
			opacity: .2;
			width: var(--widthContentSmallLoader)
	}

	90% {
			height: calc(var(--heightContentSmallLoader) + var(--sizeAnimationLoader));
			opacity: 0;
			width: calc(var(--widthContentSmallLoader) + var(--sizeAnimationLoader))
	}

	to {
			height: var(--heightContentSmallLoader);
			opacity: 0;
			width: var(--widthContentSmallLoader)
	}
}

@keyframes sonarSmall {
	0% {
			height: var(--heightContentSmallLoader);
			opacity: .2;
			width: var(--widthContentSmallLoader)
	}

	90% {
			height: calc(var(--heightContentSmallLoader) + var(--sizeAnimationLoader));
			opacity: 0;
			width: calc(var(--widthContentSmallLoader) + var(--sizeAnimationLoader))
	}

	to {
			height: var(--heightContentSmallLoader);
			opacity: 0;
			width: var(--widthContentSmallLoader)
	}
}

@-webkit-keyframes pulseContent {
	0% {
			-webkit-transform: scale(1);
			transform: scale(1)
	}

	90% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2)
	}

	to {
			-webkit-transform: scale(1);
			transform: scale(1)
	}
}

@keyframes pulseContent {
	0% {
			-webkit-transform: scale(1);
			transform: scale(1)
	}

	90% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2)
	}

	to {
			-webkit-transform: scale(1);
			transform: scale(1)
	}
}

@-webkit-keyframes pulseImage {
	0% {
			opacity: 1
	}

	50% {
			opacity: .75
	}

	to {
			opacity: 1
	}
}

@keyframes pulseImage {
	0% {
			opacity: 1
	}

	50% {
			opacity: .75
	}

	to {
			opacity: 1
	}
}
*/

@-webkit-keyframes pulse {
	0% {
			opacity: 1
	}

	50% {
			opacity: .3
	}

	to {
			opacity: 1
	}
}

@keyframes pulse {
	0% {
			opacity: 1
	}

	50% {
			opacity: .3
	}

	to {
			opacity: 1
	}
}

