body{
  background-color: var(--bg-color);
	font: 14px normal verdana, sans-serif;
	color: var(--primary);
}

.cGreen{
  color: var(--brema-green);
}

.cRed{
  color: var(--brema-red);
}

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


.fw-b{
  font-weight: bold;
}

/* Left menu */
aside{
	position: fixed;
  display: flex;
  flex-direction: column;
	width: 249px;
	height: calc(100vh - 20px);
	left: 0px;
	top: 0px;
	border-right: 1px solid var(--silver-light);
	margin: 10px 0px;
	padding: 0px 10px;
	transition: width 0.3s;
}

aside.small{
	width: 72px;
}

aside nav{
	display: flex;
	/* flex: 1 1 100%;
	height: 60px; */
	margin-bottom: 10px;
}

aside .logo{
	display: flex;
	flex: 1 0 auto;
	height: 60px;
}

aside .logo a{
	display: block;
	width: 100%;
	height: 100%;
}

aside.small .logo a img.logo-full,
aside .logo a img.logo-empty,
aside.small .menu-btn i.fa-bars,
aside .menu-btn i.fa-bars-staggered{
	display: none;
}

aside .logo a img.logo-full,
aside.small .logo a img.logo-empty,
aside .menu-btn i.fa-bars,
aside.small .menu-btn i.fa-bars-staggered{
	display: block;
}

aside .menu-btn{
	display: flex;
	flex: 0 1 60px;
	height: 60px;
	align-items: center;
  text-align: right;
	cursor: pointer;
	transition: color 0.3s;
}

aside.small .menu-btn{
  position: absolute;
  right: 20px;
}

aside .menu-btn:hover{
	color: var(--black);
}

aside .menu-btn i{
	display: flex;
	flex: 100%;
	font-size: 22px;
	justify-content: flex-end;
}

aside .logo a img{
	height: 100%;
}

aside ul{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	list-style-type: none;
	overflow-x: hidden;
	overflow-y: auto;
	/* height: calc(calc(var(--vh) * 100) - 91px); */
}

aside ul li{
	display: flex;
	flex: 0 0 auto;
	height: 46px;
	margin-bottom: 5px;
	border-radius: 4px;
	padding-left: 10px;
	transition: background 0.3s;
  cursor: pointer;
}

aside ul li:hover{
	background-color: var(--bg-color-hover);
}

aside ul li.active{
	font-weight: bold;
	background-color: var(--bg-color-active);
}

aside ul li a{
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	/* color: var(--brema-dark-blue); */
	color: var(--nav-blue);
}

aside.small ul li{
	padding-left: 0px;
}

aside.small ul li a{
	width: 100%;
	text-align: center;
	line-height: 50px;
	display: block;
}

aside ul li i{
	width: 36px;
	text-align: center;
	font-size: 20px;
	padding: 4px;
	transition: width 0.3s;
}

aside.small ul li i{
	width: auto;
}

aside ul li .item{
	font-size: 16px;
  padding: 0px 0px 0px 10px;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s 0.4s;
}

aside.small ul li a .item{
  opacity: 0;
  visibility: hidden;
}

aside .verze{
  display: flex;
  font-style: italic;
  color: var(--brema-silver);
}
/* Left menu end */

/* Content */
section{
	width: calc(100% - 249px);
	float: right;
	transition: width 0.3s;
}

section.small{
	width: calc(100% - 72px);
}

section nav{
	position: fixed;
  margin-left: 10px;
	width: calc(100% - 269px);
	display: flex;
	min-height: 60px;
	border-bottom: 1px solid var(--silver-light);
  transition: width 0.3s;
  z-index: 1000;
}

section.small nav{
	width: calc(100% - 92px);
}

section .container{
	margin-top: 61px;
  padding: 0px 5px;
  overflow: auto;
  height: calc(calc(var(--vh) * 100) - 71px);
}

/* GRID */
.row{
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap;
  /* margin: 0 -5px; */
}

.row [class*="col-"]{
  padding: 0 5px;
  margin-bottom: 10px;
}

.row.r .row [class*="col-"]{
  padding: 0;
}

.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,
.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,
.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{
  width: 100%;
  position: relative;
}

.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%
}

.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
}

.col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
}

.col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
}

.col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
}

.col-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}
/* GRID end */

section nav div.icon{
	position: relative;
	display: flex;
	height: 60px;
	flex: 0 0 60px;
	align-items: center;
	text-align: center;
	cursor: pointer;
	transition: color 0.3s;
}

section nav div.icon:hover{
	color: var(--black);
}

section nav div span.badge{
	position: absolute;
	text-align: center;
	top: 12px;
	right: 10px;
	background: linear-gradient(0deg, rgb(202 63 63) 0%, rgb(226 113 113) 100%);
	color: var(--white);
	border: 1px solid #900715;
	box-shadow: 0px 0px 4px -2px rgba(var(--box-shadow-color), 0.5);
	text-shadow: 1px 1px 1px rgba(var(--black-rgb), 0.5);
	border-radius: 50%;
	line-height: 13px;
	width: 15px;
	height: 15px;
	font-size: 8px;
}

section nav div.icon i{
	width: 100%;
	font-size: 22px;
}

section nav .nadpis{
	flex: auto;
}

section nav .nadpis h1{
	padding: 5px 5px 0px 0px;
	font-size: 26px;
	text-align: left;
}

section nav .nadpis .breadcrumb{
	font-style: italic;
	/* color: var(--brema-dark-blue); */
	color: var(--nav-blue);
}

section nav .nadpis .breadcrumb i.sipka{
	font-size: 12px;
	color: var(--brema-silver);
}

section nav .nadpis .breadcrumb a{
	font-style: italic;
	color: var(--brema-orange);
	font-weight: bold;
}

section nav .nadpis .breadcrumb a:hover{
	text-decoration: underline;
}

section nav .search{
	display: flex;
	height: 60px;
	width: 300px;
	align-items: center;
}

section nav .search input{
	height: 36px;
}

section nav div.icon.user-c{
  position: relative;
	padding: 10px;
}

section nav .user{
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	border: 1px solid var(--primary);
	border-radius: 50%;
}

section nav div.icon.user-c:hover .user{
	background-color: rgba(113, 203, 244, 0.18);
	box-shadow: 0px 0px 1px 6px rgb(113 203 244 / 18%);
	border-color: var(--black);
}

section nav div.icon.user-c .user.active{
	background-color: rgba(113, 203, 244, 0.18);
	box-shadow: 0px 0px 1px 6px rgb(113 203 244 / 18%);
	border-color: var(--black);
	color: var(--black);
}

section nav div.icon.user-c ul.user-menu{
  position: absolute;
  border: 1px solid var(--silver-light);
  border-radius: 4px;
  background-color: var(--bg-box-color);
  top: 59px;
  right: 0px;
  list-style-type: none;
	display: none;
  box-shadow: 0px 0px 0px 0px rgba(var(--box-shadow-color), 0.25);
  z-index: 100;
}

section nav div.icon.user-c:hover > ul.user-menu{
	display: block;
}

section nav div.icon.user-c ul.user-menu li{
  display: flex;
	color: var(--brema-dark-blue);
  font-weight: normal;
  align-items: center;
  justify-content: center;
}

ul.user-menu .icon-hide{
	display: none !important;
}

section nav div.icon.user-c ul.user-menu li:hover{
  background-color: var(--bg-color-hover);
}

section nav div.icon.user-c ul.user-menu li.active{
  background-color: var(--bg-color-active);
}

section nav div.icon.user-c ul.user-menu li a{
	display: block;
  /* color: var(--brema-dark-blue); */
	color: var(--nav-blue);
	width: 100%;
	height: 100%;
	padding: 5px 10px;
}

section nav div.icon.user-c ul.user-menu li.active a{
  font-weight: bold;
}

section h1 span{
  cursor: default;
}
/* Content end */

/* Table */
table{
	position: relative;
	width: 100%;
	border-collapse: collapse;
}

table thead tr,
table tbody tr{
	width: 100%;
	height: 40px;
	background-color: var(--bg-box-color);
}

table tr.dnesek{
  color: var(--brema-tyrkys) !important;
  font-weight: bold;
  box-shadow: inset 4px 0px 0px 0px var(--brema-tyrkys);
}

table tr th{
	position: sticky;
	top: 0px;
	background-color: var(--bg-header-table-color);
	color: var(--brema-dark-blue);
	z-index: 1;
}

i#qr-code-zarizeni{
  position: absolute;
  left: 10px;
  font-size: 18px;
  cursor: pointer;
}

i#uloz-qr-kod-zarizeni{
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

i#qr-code-zarizeni:hover,
i#uloz-qr-kod-zarizeni:hover{
  color: var(--brema-dark-blue);
}

table.vertical tr th{
  position: relative;
}

table a[data-page]{
	font-style: italic;
	color: var(--brema-orange);
	font-weight: bold;
}

table a[data-page]:hover{
	text-decoration: underline;
}


table.detail.cinnosti thead th.cinnost{
	width: 100px;
}

table.detail.cinnosti thead th.vlozil{
	width: 100px;
}

table.detail.cinnosti thead th.stav{
	width: 100px;
}

table.detail.cinnosti thead th.datum{
	width: 100px;
}

table.detail.cinnosti thead th.hlasil{
	width: 100px;
}

table.detail.cinnosti thead th.zavada{
	width: auto;
}

table thead th.akce{
	width: 50px;
}


table.list.detail tbody tr{
  /* cursor: pointer; */
  transition: background-color 0.3s;
}

table.list.detail tbody tr[data-page],
table.list.detail tbody tr td[data-page]{
  cursor: pointer;
}


table.list.detail tbody tr:nth-child(even){
  background-color: var(--bg-color-hover);
}

table tbody tr.work{
  color: var(--brema-green);
	font-weight: bold;
}

table.list tbody tr:not(.open, .data-z):hover{
  background-color: var(--bg-color-active);
}

table tr th:first-child{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

table tr th:last-child{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

table.vertical tr:first-child th{
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

table.vertical th:first-child{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom: 1px solid var(--silver-light);
}

table.vertical th{
	width: 150px;
	min-width: 124px;
}

table.vertical tr:last-child th{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	border-bottom: 0px;
}

table tr td{
	text-align: center;
  border-bottom: 1px solid var(--silver-light);
}

table.prihlasovaci-zpravy tr td:not(.empty){
	text-align: left;
  padding: 0px 10px;
}

table.prihlasovaci-zpravy tr th.prihlasovaci-zprava-th-text{
	width: calc(100% - 100px);
}

table.prihlasovaci-zpravy tr th.prihlasovaci-zprava-th-akce{
	width: 100px;
}

table.prihlasovaci-zpravy tr td.prihlasovaci-zprava{
  word-break: break-all;
}

table.prihlasovaci-zpravy tr td.prihlasovaci-zprava-akce{
  text-align: right;
}

table.prihlasovaci-zpravy tr td.prihlasovaci-zprava-akce .btn{
  margin-left: 5px;
}

table.zaznamy td.code[data-page]{
  cursor: pointer;
  color: var(--brema-blue);
}


table.zaznamy td.code[data-page]:hover{
  text-decoration: underline;
}

table tr td p{
	padding: 5px;
}

table tr td .zavada{
	display: -webkit-box;
	padding-right: 5px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.vertical tr:is(.data-padding, #material, #pozadovany-material, #povoleno, #zakazano) td{
	padding: 5px 0px 5px 5px;
}

table tr table tr{
  background: transparent;
}

table tr:last-child td{
  border-bottom: 0;
}

table tr:last-child td table tr td{
  border-bottom: 1px solid var(--silver-light);
  word-break: break-word;
}

table tr:last-child td table:last-child tr td{
  border-bottom: 0;
}

table tr:last-child td table:only-child tr td{
  border-bottom: 1px solid var(--silver-light);
}

table.prehled-pozadavku-materialu tbody tr{
  cursor: default !important;
}

table.prehled-pozadavku-materialu tbody tr:not([data-ml-id="Add"]) td.c-p,
table.prehled-pozadavku-materialu tbody tr:not([data-ml-id="Add"]) td i.fa-eye{
  cursor: pointer;
  color: var(--brema-dark-blue);
}

table.prehled-pozadavku-materialu tbody tr:not([data-ml-id="Add"]) td.c-p:hover{
  text-decoration: underline;
}




.data-technik-hover{
  /* background-color: var(--brema-tyrkys); */
  background-color: var(--bg-color-active);
  transition: all 0.3s;
}



table.vertical.inner tr th,
table.vertical.inner tr td{
  border-bottom: 1px solid var(--silver-light);
}

table.vertical.inner tr:last-child th,
table.vertical.inner tr:last-child td:last-child{
  border-bottom: 0;
}

table.vertical.zarizeni td,
table.vertical.detail-cinnosti td{
	padding: 0px 5px 0px 5px;
}

table.vertical.zarizeni tr#poloha td{
	padding-top: 5px;
}




table.mixed thead tr th:first-child{
  border-bottom-left-radius: 0px;
}

table.mixed thead tr th:last-child{
  border-bottom-right-radius: 0px;
}

table.mixed tbody tr th{
  border-radius: 0px;
}

table.mixed tbody tr:last-child th{
  border-bottom-left-radius: 3px;
}

table.mixed tbody tr td{
  position: relative;
}

table.mixed tbody tr:last-child td::before{
  content: '';
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 1px;
  background-color: var(--bg-header-table-color);
}

table.mixed tbody tr td:last-child::after{
  content: '';
  position: absolute;
  right: 0px;
  top: 0px;
  width: 1px;
  height: 100%;
  background-color: var(--bg-header-table-color);
}

table td[data-null="true"]{
  color: var(--brema-silver);
  font-style: italic;
}




.ppu-container{
  
}

.ppu-container .ppu-row{
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

.ppu-container .ppu-row .ppu-col{
  padding: 5px;
  width: 100%;
}

.ppu-container .ppu-row .ppu-col.th{
  font-weight: bold;
  color: var(--brema-dark-blue);
  background-color: var(--bg-header-table-color);
}




.box.technici-v-praci table tr{
  cursor: pointer;
}

.box.technici-v-praci table tr:hover{
  background-color: var(--bg-color-active);
}

.box.technici-v-praci table tr.active{
  background-color: var(--bg-color-active);
  font-weight: bold;
}


.podpisy-techniku{
  display: flex;
}

.podpisy-techniku .header-title{
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.podpisy-techniku .header-technici{
  width: calc(70% - 5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#podpisy-techniku{
  width: 100%;
}

#podpisy-techniku .dropDown{
  position: absolute !important;
}


.cas{
	display: flex;
	align-items: baseline;
	justify-content: center;
}

sub{
  font-size: 12px;
}

table{
  font-size: 14px;
}

table.calendar{
	user-select: none;
	position: relative;
	table-layout: fixed;
}

table.calendar caption{
	position: relative;
	padding: 0px 0px 6px 0px;
	font-weight: bold;
}

table.calendar caption i{
	width: 15px;
	font-size: 16px;
}

table.calendar caption i.fa-angle-left{
	float: left;
}

table.calendar caption i.fa-angle-right{
	float: right;
}

table.calendar thead tr{
	height: 26px;
}

table.calendar tbody tr{
	/* height: 51px; */
  height: 101px;
}

table.calendar thead tr th:first-child{
	border-bottom-left-radius: 0px;
}

table.calendar thead tr th:last-child {
	border-bottom-right-radius: 0px;
}

table.calendar tbody tr th:first-child {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

table.calendar tbody tr th:first-child {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

table.calendar tbody tr:last-child th:first-child {
	border-bottom-left-radius: 3px;
}

table.calendar tbody tr:last-child td:last-child {
	border-bottom-right-radius: 3px;
}

table.calendar thead tr th{
	width: calc(100% / 7);
}

table.calendar tr th.week-num{
	font-weight: normal;
	font-size: 12px;
	width: 22px;
}

table.calendar tbody td{
	max-width: 40px;
	vertical-align: sub;
	padding: 3px 0px 0px 0px;
	font-size: 12px;
	height: 54px;
	text-align: center;
	border: 1px solid var(--bg-header-table-color);
	cursor: pointer;
	transition: background-color 0.1s;
}

table.calendar tbody tr:last-child td{
  border-bottom: 0px;
  box-shadow: inset 0px -1px 0px 0px var(--bg-header-table-color);
}

table.calendar tbody td:not(.ignore):hover{
	background-color: var(--bg-color-hover);
}

table.calendar tbody td:not(.ignore):active{
	background-color: var(--bg-color-active);
}

table.calendar tbody td span{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px auto;
	width: 16px;
	height: 16px;
}

table.calendar tbody td.current-day span{
	background-color: var(--brema-silver);
	border-radius: 50%;
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
	box-shadow: 0px 0px 0px 1px rgba(var(--box-shadow-color), 0.5);
}

table.calendar tbody td.ignore{
	color: var(--silver-light);
	cursor: default;
}

table.calendar tbody td .events{
	height: calc(100% - 16px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

table.calendar tbody td .event{
	width: 100%;
	height: 11px;
	font-size: 9px;
  margin-top: 1px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

table.calendar tbody td .event:hover{
	filter: brightness(0.9);
}

table.calendar tbody td .event:active{
	filter: brightness(0.8);
}

table.calendar tbody td .event.orange{
	background-color: var(--brema-orange);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.orange.d-stav-0{
	opacity: 0.4;
}

table.calendar tbody td .event.orange.d-stav-2{
	background: linear-gradient(to left top, var(--brema-orange) 47.75%, var(--brema-red) 49.5%, var(--brema-red) 50.5%, var(--brema-orange) 52.25%);
	border: 1px solid var(--brema-red);
}

table.calendar tbody td .event.silver{
	background-color: var(--brema-silver);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.green{
	background-color: var(--brema-green);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.blue{
	background-color: var(--brema-blue);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.yellow{
	background-color: var(--brema-yellow);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.tyrkys{
	background-color: var(--brema-tyrkys);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.red{
	background-color: var(--brema-red);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.violet{
	background-color: var(--brema-violet);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.purple{
	background-color: var(--brema-purple);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

table.calendar tbody td .event.mediumaquamarine{
	background-color: var(--brema-mediumaquamarine);
	color: var(--white);
	text-shadow: 1px 1px 3px rgba(var(--black-rgb), 0.5);
}

/* table tr td.akce{
	width: 60px;
} */



/* Vložená */
/* table.cinnosti tr[data-stav="1"]{
	color: var(--brema-blue);
} */
/* Odeslaná */
table tr[data-stav="2"]{
	color: var(--brema-green);
}
/* Zrušená */
table:not(.montazni-listy, .montazni-list) tr[data-stav="3"]{
	color: var(--brema-silver);
	font-style: italic;
}
table:not(.montazni-listy, .montazni-list) tr[data-stav="3"] td{
	position: relative;
}
table:not(.montazni-listy, .montazni-list) tr[data-stav="3"] td:not(.akce):before{
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  border-bottom: 1px solid var(--brema-silver);
  width: 100%;
}
table:not(.montazni-listy, .montazni-list) tr[data-stav="3"] td:not(.akce):first-child:before{
	left: 8px;
	width: calc(100% - 8px);
}

/* table tr[data-stav="3"] td:not(.akce):nth-last-of-type(2):before{
	right: 8px;
	width: calc(100% - 8px);
} */

table:not(.montazni-listy, .montazni-list) tr[data-stav="3"] td:not(.akce):nth-last-of-type(1):before{
	right: 8px;
	width: calc(100% - 8px);
}
/* Aktivní */
table tr[data-stav="4"]{
	color: var(--brema-blue);
	font-weight: bold;
}
/* V řešení */
table tr[data-stav="5"],
table tr[data-stav="6"]{
	color: var(--brema-orange);
}
/* Montážní list */
table tr[data-stav="7"]{
	color: var(--brema-tyrkys);
}
/* Montážní list */
table tr[data-stav="8"]{
	color: var(--brema-red);
}


table.dovolene tr[data-stav="1"]{
	color: var(--brema-green);
}

table.dovolene tr[data-stav="2"]{
	color: var(--brema-red);
}


/* Nový */
/* table.montazni-listy tr[data-stav="1"],
table.oprava tr[data-stav="1"]{
	color: var(--brema-blue);
} */

/* Odeslaný */
table.montazni-listy tr[data-stav="2"],
table.oprava tr[data-stav="2"]{
	color: var(--brema-blue);
}

/* Ukončený */
table.montazni-listy tr[data-stav="3"],
table.oprava tr[data-stav="3"]{
	color: var(--brema-green);
}

/* Zrušený */
table.montazni-listy tr[data-stav="4"],
table.oprava tr[data-stav="4"]{
	color: var(--brema-silver);
	font-style: italic;
}
table.montazni-listy tr[data-stav="4"] td,
table.oprava tr[data-stav="4"] td{
	position: relative;
}
table.montazni-listy tr[data-stav="4"] td:not(.akce):before,
table.oprava tr[data-stav="4"] td:not(.akce):before{
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  border-bottom: 1px solid var(--brema-silver);
  width: 100%;
}

table.montazni-listy tr[data-stav="4"] td:not(.akce):first-child:before,
table.oprava tr[data-stav="4"] td:not(.akce):first-child:before{
	left: 8px;
	width: calc(100% - 8px);
}

table.montazni-listy tr[data-stav="4"] td:not(.akce):last-child:before,
table.oprava tr[data-stav="4"] td:not(.akce):last-child:before{
	right: 8px;
	width: calc(100% - 8px);
}

/* Table end */

/* Mapa */
/* .leaflet-control-attribution{
  display: none;
} */

.mapa{
	position: relative;
	width: 100%;
	height: 300px;

	/* pro seznam, pro google maps iframe */
	border: 1px solid var(--silver-light);
	border-radius: 3px;
}

.mapa-techniku{
	border: 1px solid var(--silver-light);
	border-radius: 3px;
}

.mapa iframe{
	width: 100%;
	height: calc(100% - 3px);
	border: 1px solid var(--silver-light);
	border-radius: 3px;
}

.stari-dat{
	position: relative;
  min-width: 50px;
	display: inline-flex;
	flex-direction: column;
	font-size: 11px;
	font-weight: normal;
	align-items: center;
	top: -7px;
}
/* Mapa end */

/* DropDown menu */
.drop-down{
	position: absolute;
	min-width: 120px;
	min-height: 120px;
	top: 10px;
	right: 35px;
	font-size: 14px;
	background-color: var(--bg-header-footer-color);
	border-radius: 8px;
	box-shadow: 0px 0px 8px 0px rgb(var(--box-shadow-color), 0.4);
	z-index: 20;
	animation: animation-show 0.15s alternate ease-in-out;
	cursor: pointer;
}

.drop-down ul{
	list-style: none;
}

.drop-down ul li{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 40px;
	margin: 0px 5px;
	padding: 5px;
	color: var(--primary);
	border-bottom: 1px solid rgb(var(--box-shadow-color), 0.2);
}

.drop-down ul li:last-child{
	border-bottom: none;
}

.drop-down ul li:hover{
	color: var(--brema-blue);
}
/* DropDown menu end */

/* Box */
.box{
	/* min-height: 100px; */
	border: 1px solid var(--silver-light);
	background-color: var(--bg-box-color);
	padding: 8px;
	margin-top: 10px;
	border-radius: 3px;
	box-shadow: 0px 0px 10px -5px rgba(var(--box-shadow-color), 0.25);
}

.box.login {
	width: 25%;
	margin: 40vh auto 10px auto;
	float: none;
	word-break: break-all;
	transform: translateY(-50%);
}

.box .header{
	width: 100%;
	height: 35px;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--silver-light);
}

.box.login h1{
	padding: 10px 10px 7px 10px;
	text-align: center;
}

.box.login input{
	margin: 3px 0px 10px 0px;
}

.box.login .btn{
	margin-top: 10px;
}

.box .footer{
  width: 100%;
  height: 35px;
  margin-top: 5px;
  padding: 10px 0px 0px 0px;
  border-top: 1px solid var(--silver-light);
}

.box .body{
	position: relative;
  width: calc(100% + 8px);
	overflow-x: auto;
	overflow-y: scroll;
  max-height: calc(calc(var(--vh) * 100) - 150px);
	transition: max-height 0.3s ease-in-out;
}

.box.no-footer .body{
  max-height: calc(calc(var(--vh) * 100) - 138px);
}

.box .body.bxvh{
  max-height: calc(calc(calc(var(--vh) * 100) - 150px) - var(--bxvh));
}

.box.small .body{
	max-height: 0px;
}

.box .body > *:not(.timeline, img){
	width: calc(100% - 4px) !important;
}

.box .body img.leaflet-control{
  cursor: pointer;
  filter: grayscale(1);
}

.box .body img.leaflet-control:hover{
  filter: grayscale(0);
}

.box .header i.switch{
	width: 26px;
	height: 26px;
	text-align: center;
	vertical-align: middle;
	line-height: 26px;
	cursor: pointer;
	transition: transform 0.3s;
}

.box.small .header i.switch {
	transform: rotate(180deg);
}

.box .header i.switch :hover{
	color: var(--black);
}

.box .header h3{
	padding: 5px;
	text-align: left;
	display: inline-block;
	color: var(--primary);
}

.box .header .action{
  float: right;
	height: calc(100% - 10px);
	display: flex;
	column-gap: 6px;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.image-box .box .header .action{
  padding-right: 15px;
}

.box .header .action a{
	color: var(--brema-dark-blue);
}

.box .header .action a:hover{
	color: var(--brema-blue);
}

.box .header .action a.edit{
	color: var(--brema-red);
}

.box .header .action button{
	width: auto;
}

.box .row{
  margin: 0px;
}

.box label{
  display: block;
  margin: 0px 0px 3px 2px;
}

.box input,
.box select{
	background-color: var(--bg-color) !important;
}

:root{
	--wvar: 16%;

}

.box.wvar{
  width: var(--wvar) !important;
}

.box.w16{
  width: 16% !important;
}

.disabled{
	color: var(--disabled);
}

.danger{
	color: var(--brema-orange);
}

.alert{
	color: var(--brema-red);
}


select option.option-group{
	background-color: var(--brema-green);
	color: #fff;
	text-shadow: 1px 1px 2px rgb(38, 38, 38, 0.25);
	font-weight: bold;
	font-style: italic;
}

select option.option-child{
  padding-left: 15px;
}


.box .pridat-technika{
	padding-top: 6px;
}
/* Box end */

/**/
.box label.checkbox{
  position: relative;
  width: 100%;
}

label.checkbox.text{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.box label.checkbox-inline .checkbox-switch{
  position: absolute;
  right: 2px;
  bottom: 2px;
}
/**/

/* Docházka */
/* .dochazka tr{
  cursor: pointer;
} */

.dochazka tr.zmena{
  color: var(--brema-orange);
}

.dochazka tr.obed{
  font-style: italic;
  color: var(--disabled);
}

.dochazka tr.pridany{
  color: var(--brema-violet);
}

.dochazka tr.den{
  font-style: italic;
  font-weight: bold;
  color: var(--brema-silver);
  background-color: var(--bg-color-hover);
}

.dochazka tr.kalendar{
  color: var(--brema-dark-blue);
}

.dochazka tr.kalendar[data-typ-id="1"]{
  background-color: rgba(var(--brema-orange-rgb), 0.25);
}

.dochazka tr.kalendar[data-typ-id="2"]{
  background-color: rgba(var(--brema-silver-rgb), 0.25);
}

.dochazka tr.kalendar[data-typ-id="3"]{
  background-color: rgba(var(--brema-green-rgb), 0.25);
}

.dochazka tr.kalendar[data-typ-id="4"]{
  background-color: rgba(var(--brema-blue-rgb), 0.25);
}

.dochazka tr.kalendar[data-typ-id="5"]{
  background-color: rgba(var(--brema-yellow-rgb), 0.25);
}

.dochazka tr.kalendar[data-typ-id="6"]{
  background-color: rgba(var(--brema-tyrkys-rgb), 0.25);
}

.dochazka tr.kalendar[data-typ-id="7"]{
  background-color: rgba(var(--brema-violet-rgb), 0.25);
}

.dochazka tr.kalendar[data-typ-id="8"]{
  background-color: rgba(var(--brema-purple-rgb), 0.25);
}

.dochazka tr.kalendar[data-typ-id="9"]{
  background-color: rgba(var(--brema-red-rgb), 0.25);
}

.dochazka tr.svatek{
  background-color: rgba(var(--brema-mediumaquamarine-rgb), 0.25);
}

.dochazka tr.data-small.empty{
  /* color: var(--disabled); */
  opacity: 0.5;
}

.dochazka tr.data-small.empty i.switch,
.dochazka tr.data-small.empty .dropDownBtn{
  display: none;
}

.dochazka tr.open{
  border: 1px solid var(--silver-light);
  border-bottom: 0px;
}

.dochazka tr.data-z > td{
  border: 1px solid var(--silver-light);
  border-top: 0px;
}

.dochazka tr.open td{
  border-bottom: none;
  color: #1a3e70;
  font-weight: 600;
}

.dochazka tr.open[data-stav="2"] td{
  color: var(--brema-green);
}

.dochazka tr.open[data-stav="8"] td{
  color: var(--brema-red);
}

.dochazka td.datum{
  position: relative;
}

.dochazka .datum i{
  position: absolute;
  left: 5px;
  top: 8px;
  width: 26px;
  height: 26px;
  text-align: center;
  vertical-align: middle;
  line-height: 26px;
  transition: transform 0.3s;
}

.dochazka tr:not(.empty) .datum i,
.dochazka tr:not(.empty) .dropDownBtn{
  cursor: pointer;
}

.dochazka tr:not(.empty) .dropDownBtn.disabled{
  cursor: not-allowed;
}

.dochazka tr.open .datum i{
	transform: rotate(-180deg);
}

.dochazka .table.zaznamy{
  width: calc(100% - 40px);
  margin: 5px 20px;
  animation: animation-show 0.15s alternate ease-in-out;
}

.dochazka .table.zaznamy caption{
  caption-side: bottom;
  padding: 12px 0px 6px 4px;
  text-align: left;
  color: var(--primary);
}
/* Docházka end */

/* Seznam zařízení */
/* .seznam-zarizeni tr[data-stav="0"] td{
  color: var(--brema-green);
} */

table.seznam-zarizeni tr[data-stav="0"]{
	color: var(--brema-silver);
	font-style: italic;
}
table.seznam-zarizeni tr[data-stav="0"] td{
	position: relative;
}
table.seznam-zarizeni tr[data-stav="0"] td:not(.akce):before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  border-bottom: 1px solid var(--brema-silver);
  width: 100%;
}

table.seznam-zarizeni tr[data-stav="0"] td:not(.akce):first-child:before{
	left: 8px;
	width: calc(100% - 8px);
}

table.seznam-zarizeni tr[data-stav="0"] td:not(.akce):last-child:before{
	right: 8px;
	width: calc(100% - 8px);
}


/* Seznam zařízení end */




/* Notification */
.notification{
	position: absolute;
	/* top: 70px; */
  top: 36px;
	right: 10px;
	width: calc(100% - 269px);
	min-height: 38px;
	padding: 0px 5px 0px 15px;
	border: 1px solid;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 16px;
	font-weight: bold;
	transition: width 0.3s;
	animation: animation-show 0.3s alternate ease-in-out;
	z-index: 6000;
}

.notification.small{
	width: calc(100% - 92px);
}

.notification.w75p{
	width: 75%;
	left: 50%;
	transform: translateX(-50%);
}
/* Notification end */

/*  */
.material-ml-container,
.povolene-zakazane-stranky-container{
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.material-ml,
.povolene-zakazane-stranky{
	position: relative;
	width: 150px;
  height: 30px;
	display: flex;
	padding: 5px;
	border-radius: 3px;
	background-color: var(--bg-header-table-color);
	align-items: center;
	justify-content: center;
}

.ml-foto{
  width: 150px;
  height: 150px;
  padding: 5px 5px 22px 5px;
  background-color: var(--bg-header-table-color);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}

.ml-foto:hover{
  /* background-color: var(--silver-light); */
  box-shadow: inset 0px 0px 20px 10px var(--silver-light);
}

.ml-foto .image-gallery{
  width: 100%;
  height: 100%;
}

.ml-foto img{
  width: 100%;
  height: 100%;
  /* border-radius: 3px; */
  object-fit: contain;
}

.ml-foto span{
  display: block;
  width: 100%;
  font-size: 12px;
  text-align: center;
  color: var(--brema-dark-blue);
}

.povolene-zakazane-stranky{
	cursor: default;
}

.povolene-zakazane-stranky-close{
	position: absolute;
	top: -4px;
	right: -4px;
	width: 18px;
	height: 18px;
	background-color: var(--brema-red);
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 5000;
}

.povolene-zakazane-stranky:hover > .povolene-zakazane-stranky-close{
	opacity: 1;
	cursor: pointer;
}

.material-ml-center{
	width: 100%;
	text-align: center;
}

.material-ml .ikona-materialu{
  font-size: 12px;
  padding-right: 3px;
  border-right: 1px solid silver;
}

.material-ml[data-material="ulice"]  .ikona-materialu{
  color: var(--primary);
  transition: color 0.15s;
  cursor: pointer;
}

.material-ml[data-material="ulice"]  .ikona-materialu:hover{
  color: var(--brema-orange);
}

.material-ml .nazev-materialu{
	width: calc(100% - 55px);
  padding: 0px 3px;
	border-right: 1px solid silver;
}

.material-ml[data-material="ulice"] .nazev-materialu{
	width: calc(100% - 42px);
}

.material-ml .nazev-materialu div.code{
	font-size: 9px;
	font-style: italic;
	color: var(--brema-silver);
}

.material-ml[data-material="ulice"] .nazev-materialu div.code{
	display: none;
}

.material-ml .nazev-materialu div.name{
	display: -webkit-box;
  font-size: 11px;
  color: var(--brema-dark-blue);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.material-ml[data-material="ulice"] .nazev-materialu div.name{
  -webkit-line-clamp: 2;
}

.material-ml .pocet-materialu{
	/* text-align: right; */
	width: 50px;
  font-size: 14px;
}
/*  */

/* Time line */
.timeline{
	display: flex;
	flex-direction: column;
  width: 90%;
  height: auto;
  /* max-width: 800px; */
  margin: 50px auto 0 auto;
  position: relative;
}

.timeline ul{
  list-style: none;
	width: calc(100% - 50px);
	margin-left: 50px;
}

.timeline ul li{
	position: relative;
  padding: 15px;
	background-color: var(--bg-header-table-color);
	color: var(--brema-dark-blue);
  border-radius: 6px;
  margin-bottom: 40px;
	transition: all 0.3s;
}

.timeline-content h2{
	font-size: 16px;
  margin-bottom: 10px;
}

.timeline-content p{
  font-size: 14px;
}

.timeline-content .date{
	position: absolute;
	top: -20px;
  font-size: 12px;
}


.timeline:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-50%);
	width: 2px;
	height: calc(100% - 113px);
	background-color: var(--silver-light);
}

.timeline ul li::before{
	content: "";
	position: absolute;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: var(--brema-silver);
	top: -10px;
	left: -60px;
	transition: all 0.3s;
	box-shadow: 0 0 0 4px var(--bg-header-table-color);
	/* box-shadow: 0 0 0 4px var(--bg-header-table-color), inset 0 2px 0 rgba(0,0,0,.08), 0 3px 0 4px rgba(0,0,0,.05); */
}

/* start práce */
.timeline ul li[data-typ="1"]::before{
	background-color: var(--brema-blue);
}

/* konec práce */
.timeline ul li[data-typ="2"]::before{
	background-color: var(--brema-green);
}

/* pauza práce */
.timeline ul li[data-typ="3"]::before{
	background-color: var(--brema-orange);
}

/* změna správce */
.timeline ul li[data-typ="20"]::before{
	background-color: var(--brema-yellow);
}
	
.timeline ul li:not([data-typ="null"]):hover,
.timeline ul li:not([data-typ="null"]):hover::before,
.timeline ul li.data-technik-hover,
.timeline ul li.data-technik-hover::before{
	background-color: var(--brema-tyrkys);
}

@media only screen and (min-width: 991px){
  .timeline ul li::after{
    content: "";
    position: absolute;
    top: 0px;
    right: -12px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 12px 12px 0px;
    border-color: transparent transparent var(--bg-header-table-color) transparent;
    transform: rotate(90deg);
    transition: all 0.3s;
  }


  .timeline ul li:not([data-typ="null"]):hover::after{
    border-color: transparent transparent var(--brema-tyrkys) transparent;
  }

	.timeline:before{
		left: 50%;
		height: calc(100% - 123px);
	}

	.timeline ul{
		width: auto;
		margin-left: 0px;
	}

  .timeline ul li{
    width: 50%;
    margin-bottom: 50px;
  }

	.timeline ul li::before{
		top: 0;
		left: auto;
	}

  .timeline ul li:nth-child(odd){
    clear: right;
    transform: translateX(-30px);
    border-radius: 6px 0px 6px 6px;
  }

  .timeline ul li:nth-child(even){
    float: right;
    clear: left;
    transform: translateX(30px);
    border-radius: 0px 6px 6px 6px;
  }

	.timeline ul li:nth-child(odd)::before{
		transform: translate(50%, -50%);
		right: -30px;
	}
	
	.timeline ul li:nth-child(even)::before{
		transform: translate(-50%, -50%);
		left: -30px;
	}

  .timeline ul li:nth-child(even)::after{
    left: -12px;
    transform: rotate(180deg);
  }
}
/* Time line end */

/* Responsive */
@media all and (max-width: 1200px){
	.confirm-box .box,
	.val-box .box,
  .box.login{
		width: 40%;
	}

	.box.full{
		width: 40%;
	}

}

@media all and (max-width: 991px){


  aside{
    width: 72px;
  }

	aside ul li i{
		text-align: left;
	}
  
  section{
    width: calc(100% - 72px);
  }
  
  section nav{
    width: calc(100% - 92px);
  }
  
  aside .menu-btn{
    position: absolute;
    right: 20px;
  }

  aside .logo a img.logo-full,
  /* aside .logo a img.logo-empty, */
  aside .menu-btn i.fa-bars
  /* aside .menu-btn i.fa-bars-staggered */{
    display: none;
  }
  
  /* aside .logo a img.logo-full, */
  aside .logo a img.logo-empty,
  /* aside .menu-btn i.fa-bars, */
  aside .menu-btn i.fa-bars-staggered{
    display: block;
  }

  aside ul li a .item{
    opacity: 0;
    visibility: hidden;
  }

	.confirm-box .box,
	.val-box .box,
  .box.login{
		width: 44%;
	}

	.box.full{
		width: 50%;
	}

}

@media all and (max-width: 767px){
	.confirm-box .box,
	.val-box .box,
  .box.login{
		width: 54%;
	}

	.box.full{
		width: 60%;
	}

	section nav{
		min-height: 76px;
	}
	
	section .container{
		margin-top: 76px;
    height: calc(calc(var(--vh) * 100) - 86px);
	}

	section nav .nadpis h1{
		padding-top: 18px;
    font-size: 20px;
	}

	section nav .nadpis .breadcrumb{
		position: absolute;
    top: 54px;
	}

}

@media all and (max-width: 575px){
	.confirm-box .box,
	.val-box .box,
  .box.login{
		width: 68%;
	}

	.box.full{
		width: 70%;
	}

	section nav .zpravy,
	section nav .notifi{
		display: none !important;
	}

	ul.user-menu .icon-hide{
		display: flex !important;
	}
}

@media all and (max-width: 508px){
	.confirm-box .box,
	.val-box .box,
  .box.login{
		width: calc(100% - 20px);
	}

	.box.full{
		width: calc(100% - 20px);
	}

	.notification.w75p{
    width: calc(100% - 20px);
	}

}
/* GRID */


@media(min-width: 576px){

  .col-sm-auto {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
      max-width: 100%
  }

  .col-sm-1 {
      -ms-flex: 0 0 8.333333%;
      flex: 0 0 8.333333%;
      max-width: 8.333333%
  }

  .col-sm-2 {
      -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
      max-width: 16.666667%
  }

  .col-sm-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%
  }

  .col-sm-4 {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%
  }

  .col-sm-5 {
      -ms-flex: 0 0 41.666667%;
      flex: 0 0 41.666667%;
      max-width: 41.666667%
  }

  .col-sm-6 {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%
  }

  .col-sm-7 {
      -ms-flex: 0 0 58.333333%;
      flex: 0 0 58.333333%;
      max-width: 58.333333%
  }

  .col-sm-8 {
      -ms-flex: 0 0 66.666667%;
      flex: 0 0 66.666667%;
      max-width: 66.666667%
  }

  .col-sm-9 {
      -ms-flex: 0 0 75%;
      flex: 0 0 75%;
      max-width: 75%
  }

  .col-sm-10 {
      -ms-flex: 0 0 83.333333%;
      flex: 0 0 83.333333%;
      max-width: 83.333333%
  }

  .col-sm-11 {
      -ms-flex: 0 0 91.666667%;
      flex: 0 0 91.666667%;
      max-width: 91.666667%
  }

  .col-sm-12 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%
  }
}

@media(min-width: 768px){

  .col-md-auto {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
      max-width: 100%
  }

  .col-md-1 {
      -ms-flex: 0 0 8.333333%;
      flex: 0 0 8.333333%;
      max-width: 8.333333%
  }

  .col-md-2 {
      -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
      max-width: 16.666667%
  }

  .col-md-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%
  }

  .col-md-4 {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%
  }

  .col-md-5 {
      -ms-flex: 0 0 41.666667%;
      flex: 0 0 41.666667%;
      max-width: 41.666667%
  }

  .col-md-6 {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%
  }

  .col-md-7 {
      -ms-flex: 0 0 58.333333%;
      flex: 0 0 58.333333%;
      max-width: 58.333333%
  }

  .col-md-8 {
      -ms-flex: 0 0 66.666667%;
      flex: 0 0 66.666667%;
      max-width: 66.666667%
  }

  .col-md-9 {
      -ms-flex: 0 0 75%;
      flex: 0 0 75%;
      max-width: 75%
  }

  .col-md-10 {
      -ms-flex: 0 0 83.333333%;
      flex: 0 0 83.333333%;
      max-width: 83.333333%
  }

  .col-md-11 {
      -ms-flex: 0 0 91.666667%;
      flex: 0 0 91.666667%;
      max-width: 91.666667%
  }

  .col-md-12 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%
  }
}

@media(min-width: 992px){

  .col-lg-auto {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
      max-width: 100%
  }

  .col-lg-1 {
      -ms-flex: 0 0 8.333333%;
      flex: 0 0 8.333333%;
      max-width: 8.333333%
  }

  .col-lg-2 {
      -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
      max-width: 16.666667%
  }

  .col-lg-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%
  }

  .col-lg-4 {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%
  }

  .col-lg-5 {
      -ms-flex: 0 0 41.666667%;
      flex: 0 0 41.666667%;
      max-width: 41.666667%
  }

  .col-lg-6 {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%
  }

  .col-lg-7 {
      -ms-flex: 0 0 58.333333%;
      flex: 0 0 58.333333%;
      max-width: 58.333333%
  }

  .col-lg-8 {
      -ms-flex: 0 0 66.666667%;
      flex: 0 0 66.666667%;
      max-width: 66.666667%
  }

  .col-lg-9 {
      -ms-flex: 0 0 75%;
      flex: 0 0 75%;
      max-width: 75%
  }

  .col-lg-10 {
      -ms-flex: 0 0 83.333333%;
      flex: 0 0 83.333333%;
      max-width: 83.333333%
  }

  .col-lg-11 {
      -ms-flex: 0 0 91.666667%;
      flex: 0 0 91.666667%;
      max-width: 91.666667%
  }

  .col-lg-12 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%
  }
}

@media(min-width: 1200px){

  .col-xl-auto {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
      max-width: 100%
  }

  .col-xl-1 {
      -ms-flex: 0 0 8.333333%;
      flex: 0 0 8.333333%;
      max-width: 8.333333%
  }

  .col-xl-2 {
      -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
      max-width: 16.666667%
  }

  .col-xl-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%
  }

  .col-xl-4 {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%
  }

  .col-xl-5 {
      -ms-flex: 0 0 41.666667%;
      flex: 0 0 41.666667%;
      max-width: 41.666667%
  }

  .col-xl-6 {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%
  }

  .col-xl-7 {
      -ms-flex: 0 0 58.333333%;
      flex: 0 0 58.333333%;
      max-width: 58.333333%
  }

  .col-xl-8 {
      -ms-flex: 0 0 66.666667%;
      flex: 0 0 66.666667%;
      max-width: 66.666667%
  }

  .col-xl-9 {
      -ms-flex: 0 0 75%;
      flex: 0 0 75%;
      max-width: 75%
  }

  .col-xl-10 {
      -ms-flex: 0 0 83.333333%;
      flex: 0 0 83.333333%;
      max-width: 83.333333%
  }

  .col-xl-11 {
      -ms-flex: 0 0 91.666667%;
      flex: 0 0 91.666667%;
      max-width: 91.666667%
  }

  .col-xl-12 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%
  }
}
/* GRID end */
/* Responsive end */