:root {
	--bs-font-sans-serif: "Open Sans", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

	--color-section-blue: #217092;
	--color-section-blue-light: #77a7bc;
	
	--color-section-red: #dd6760;

	--color-section-turquoise: #13a1a1;
	--color-section-turquoise-light: #18cfcf;
	--color-section-yellow: #f5cb57;
	--color-section-orange: #d35400;
	--color-section-gray: #95afc0;
	--color-section-cyan: #36b9cc;
	
	
	
	--color-ppm-blue: #0652DD;
	--color-ppm-red: #e74c3c;
	--color-ppm-turquoise: #00d5d5;
	--color-ppm-yellow: #f39c12;
	--color-ppm-orange: #d35400;
	
	/*
	--color-section-turquoise: #13a1a1;
	--color-section-turquoise-light: #18cfcf;
	--color-section-yellow: #f5cb57;
	--color-section-orange: #d35400;
	--color-section-gray: #95afc0;
	
	--color-ppm-blue: #0652DD;
	--color-ppm-red: #e74c3c;
	--color-ppm-turquoise: #00d5d5;
	--color-ppm-yellow: #f39c12;
	--color-ppm-orange: #d35400;
	*/
	
	--color-ppm-black-light: #353b48;
	--color-ppm-error: #d63031;
	
	--color-shadow: #fbfbfb;
	/*--color-shadow: red;*/
}

body {
	background: #fff;
	padding-top: 2.5em !important;
	padding-bottom:	4em;
}

#main {margin-top: 2em;}
/*
#main {margin-top: 1em;}
body[data-page=uzivatel-zmena-hesla] #main, 
body[data-page=reporty] #main, 
body[data-page^=audit] #main,
body[data-page^=hostesky] #main,
body[data-page=prehled-akci] #main, 
body[data-page=vyuctovani-detail] #main {
	margin-top: 2em;
}
*/

.navbar-brand img {
	transition: all 500ms;
}

.navbar-brand:hover img {
	transform: scale(1.05);
	transition: all 500ms;
}

/** LOGIN **/

body[data-page^=login] {
	background: url('/layout/pmi/img/login-background.jpg');
	background-size: cover;
    background-repeat:no-repeat;
	background-attachment: fixed;
	background-position: center; 
	margin-top: 5vh;	
}

body[data-page^=login] img.logo {
	margin: 2em;
	width: 150px;
}

@media (max-width: 575px) {
	.container.login {width: 400px !important}
	body[data-page^=login] {
		padding: 0 !important;
	}
}

@media (min-width: 576px) {
	.container.login {width: 500px !important}
	body[data-page^=login] {
	}
	
}

.input-group.login-input {
	background: #fff;
	margin: 1em;
	padding: 0.8em;
	width: auto !important;
}

.login fieldset {
    background: rgba(255,255,255,0.5);
    padding: 1em;
}

.input-group.login-input .input-group-text, .input-group.login-input .form-control {
	border: 0px;
	background-color: transparent;
	color: var(--color-ppm-black-light);
	font-size: 1.2em;
}

.input-group.login-input .input-group-text {font-size: 1.5em;}

.btn.btn-outline-login {
	font-size: 1.2em;
	border: 2px solid #fff;
	background: rgba(255,255,255,0.5);
	color: var(--color-ppm-black-light);
	border-radius: 0;
	padding: 0.5em 2em;	
	transition: all 200ms;
}

.btn.btn-outline-login:hover {
	background: rgba(255,255,255,0.7);
	color: var(--color-ppm-black-light);
	transition: all 200ms;
}

.input-group.login-input .form-control::placeholder, .input-group.login-input .form-control::-webkit-input-placeholder{
	color: var(--color-ppm-black-light) !important;
	opacity: 1;
}

.input-group.login-input .form-control:focus {
	outline: none !important;
	box-shadow: none !important;
	border:0px !important;
}



/* navbar */
nav.navbar {
	background: white !important;
	box-shadow: 0 0 5px 1px #ccc;
}

nav .navbar-brand img {
	width: 75%;
	padding: 0.2em;
}

.navbar-collapse {flex-grow: 0; !important}


@media (max-width: 767px) {
	.navbar-collapse .navbar-right {flex-direction: row}
}


nav.navbar .container-fluid {width: 98% !important;}

.nav-item.caret {
	padding-right: 1em;
	position: relative;
}
.nav-item.caret .nav-link.dropdown-toggle::after{
	font-family: "Font Awesome 5 Free";
	content: "\f078" !important;
	font-weight: 900 !important;
	border: 0 !important;
	position: absolute;
}

.nav-link.logout {
	padding: 0.5em 1.5em !important;
	border: 1px solid rgba(0,0,0,.55);
	padding-left: 2.5em !important;
	position: relative !important;	
	margin-left: 1em;
}

.nav-link.logout .icon {
	font-size: 1.4em;
	position: absolute;
	left: 0.8em;
}

/** page head **/
.page-content{
	margin-top: 3em;
}


.page-head {
	color: white;
	font-size: 1.3em;
	height: 3em;
	padding-top: 0.75em;
}

.page-head a {
	font-size: .8em !important;
	color: white;
	text-decoration: none;
	transition: all 200ms;
}

.page-head a:hover {
	margin-right: 0.5em;
	transition: all 200ms;
}

.page-subhead {
	color: white;
	font-size: 1em;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	font-weight: bold;
}

.page-subhead input, .page-subhead input::placeholder, .page-subhead input:focus, .page-subhead select {
	color: var(--color-section-turquoise);
}

.btn-outline-filter {
	border-color: #fff;
	color: #fff;
}

.btn-outline-filter:hover {
	background: #fff;
	color: var(--color-section-turquoise);
}

.btn-check:active + .btn-outline-filter, .btn-check:checked + .btn-outline-filter, .btn-outline-filter.active, .btn-outline-filter.dropdown-toggle.show, .btn-outline-filter:active {
	background: #fff;
	border-color: #fff;
	color: var(--color-section-turquoise);
}



.section-blue {background: var(--color-section-blue)}
.section-blue-light {background: var(--color-section-blue-light)}
.section-red {background: var(--color-section-red)}
.section-turquoise {background: var(--color-section-turquoise)}
.section-turquoise-light {background: var(--color-section-turquoise-light)}
.section-user {background: var(--color-section-gray)}
.section-orange {background: var(--color-section-orange)}



/** hostess form **/
.hostess-input-form fieldset {
	margin-bottom: 2em;
}

.hostess-input-form fieldset legend {
	background-color: var(--color-ppm-turquoise);
	color: white;
	margin-bottom: 0 !important;
	padding: 0.25em 0.25em;
	transition: all 200ms;
}

.hostess-input-form fieldset[data-right=false] legend {
	background-color: var(--color-ppm-error);
	transition: all 200ms;
}

.hostess-input-form fieldset legend .description-mini{
	float: right !important;
	font-size: 0.7em !important;
	padding-top: 0.3em;
	font-weight: bold;
}

.hostess-input-form .subgroup {
	margin-bottom: 1em;
}
	
.hostess-input-form .subgroup-title {
	background-color: #99eeee;
	font-size: 1em;
	padding: 0.5em;
}

.hostess-input-form .bg-odd {
	background-color: #ececec;
}

.hostess-input-form .row {
	margin-bottom: 0.5em;
	padding: 0.5em;
}


/** home **/
body[data-page=home] {
	margin-top: 3em;
}

body[data-page=home] .background {
	position: relative;
}

body[data-page=home] .background img.background-image {
	margin-left: -15em;
	opacity: 0;
	animation-name: home-background;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	box-shadow: -2em 2em var(--color-shadow);
}

body[data-page=home] .background-container {
	text-align: center;
	margin-top: 6em;
}


body[data-page=home] ul.menu {
	list-style: none;	
	margin: 0;
	padding-left: 0;
	position: absolute;
	top: -10em;
	right: -13em;
}


@media (max-width: 767px) {
	body[data-page=home] {
		margin-top: 0em;
	}
	
	body[data-page=home] ul.menu {
		left: 0;
		margin-top: -10em;
		position: relative;
		top: 0;
	}

	body[data-page=home] .background img.background-image {
		margin-left: 0 !important;
	}
	
}


@keyframes home-menu {
  0%   {margin-left: 2em; opacity: 0;}
  100% {margin-left: 0em; opacity: 0.9;}
}

@keyframes home-background {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}

body[data-page=home] ul.menu a {
	opacity: 0;
	
	display: block;
	font-size: 1.1em;
	margin-bottom: 0.75em;
	margin-left: 2em;
	opacity: 0;
	padding: 0.9em 4em;
	padding-left: 4em;
	position: relative;
	text-decoration: none;
	text-align: left;
	transition: all 200ms;
	text-transform: uppercase;

	animation-name: home-menu;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

body[data-page=home] ul.menu a img {
	width: 1.1em;
	margin-left: -0.2em;
}

body[data-page=home] ul.menu li:nth-child(1) img {width: 1.6em; margin-left: -0.4em}


body[data-page=home] ul.menu li:nth-child(1) a{animation-delay: 0.5s}
body[data-page=home] ul.menu li:nth-child(2) a{animation-delay: 0.75s}
body[data-page=home] ul.menu li:nth-child(3) a{animation-delay: 1s}
body[data-page=home] ul.menu li:nth-child(4) a{animation-delay: 1.25s}
body[data-page=home] ul.menu li:nth-child(5) a{animation-delay: 1.5s}


body[data-page=home] ul.menu a:hover {
	opacity: 1 !important;
	transition: all 200ms;
}






body[data-page=home] ul.menu a.ppm-blue {background-color: var(--color-section-blue); color: #fff;}
body[data-page=home] ul.menu a.ppm-red {background-color: var(--color-section-red); color: #fff;}
body[data-page=home] ul.menu a.ppm-turquoise {background-color: var(--color-section-turquoise); color: #fff;}
body[data-page=home] ul.menu a.ppm-yellow {background-color: var(--color-section-yellow); color: #fff;}
body[data-page=home] ul.menu a.ppm-orange {background-color: var(--color-ppm-orange); color: #fff;}
body[data-page=home] ul.menu a.ppm-cyan {background-color: var(--color-section-cyan); color: #fff;}

body[data-page=home] ul.menu a * {
	font-size: 1.5em;
	position: absolute;
	left: 1em;
}

ul.pagination {
	justify-content:center;	
	margin-top: 4em;
	margin-bottom: 2em;
}

ul.pagination a {
	text-decoration: none;
	color: #333;	
	font-size: 1.2em;
	padding: 0.5em;
}

ul.pagination li {
	transition: all 200ms;
}

ul.pagination li.active a {
	font-weight: bold;
}

ul.pagination li:hover{
	margin-top: -0.3em;
	transition: all 200ms;
}



/** katalog hostesek **/
body[data-page=katalog-hostesek] .item {
	position: relative;
	overflow: hidden;
}

body[data-page=katalog-hostesek] .item a {
	display: block;
	transition: all 300ms;
}

body[data-page=katalog-hostesek] .item a:hover {
	 transform: scale(1.1);
	 transition: all 500ms;
}

body[data-page=katalog-hostesek] .item img {
	height: auto;
	width: 100%;
}


/** detail hostesky **/
body[data-page=katalog-hostesek] .page-content.detail table.info td:nth-child(2){
	font-weight: bold;
}

body[data-page=katalog-hostesek] .page-content.detail .photo-list {
	margin-bottom: 2em;
	/* shadow */
	box-shadow: -2em 2em var(--color-shadow);
	background-image: linear-gradient(#fff 2em, var(--color-shadow) 2em);
}

body[data-page=katalog-hostesek] .page-content.detail h2 {
	color: var(--color-section-turquoise);
	text-transform: uppercase;
}

body[data-page=katalog-hostesek] .page-content.detail > .info {
	background: var(--color-shadow);
	margin-top: 4em;
	margin-left: -2em;
	margin-right: 2em;
	padding: 1em 2em;
}





body[data-page=katalog-hostesek] .item .name{
	background-image: linear-gradient(transparent, black);
	bottom: 0;
	color: white;
	padding: 1em 1em;
	position: absolute;
	width: 100%;
}


body[data-page=katalog-hostesek] .item .name .first{
	font-weight: bold;
}


/* daterange */
	.daterangepicker_start_input, .daterangepicker_end_input {padding: 0.25em 0 !important}
	.daterangepicker .ranges .range_inputs > div:nth-child(2) {padding: 0 !important}
	.daterangepicker_end_input {margin-bottom: 0.5em}
	.calendar-date th, .calendar-date td {padding: 0.2em}

	body[data-page=aktivity] .daterangepicker .ranges li {color: #333 !important}
		body[data-page=aktivity] .daterangepicker td.active, body[data-page=aktivity] .daterangepicker td.active:hover, body[data-page=aktivity] .daterangepicker .applyBtn {
			background: var(--color-section-blue) !important;
			border: 0 !important;
		}
		body[data-page=aktivity] .daterangepicker .ranges li.active, body[data-page=aktivity] .daterangepicker .ranges li:hover {
			background: var(--color-section-blue) !important;
			border: 1px solid var(--color-section-blue) !important;
			color: #fff !important;
		}
		
	body[data-page=audit] .daterangepicker .ranges li {color: #333 !important}
		body[data-page=audit] .daterangepicker td.active, body[data-page=audit] .daterangepicker td.active:hover, body[data-page=audit] .daterangepicker .applyBtn {
			background: var(--color-section-red) !important;
			border: 0 !important;
		}
		body[data-page=audit] .daterangepicker .ranges li.active, body[data-page=audit] .daterangepicker .ranges li:hover {
			background: var(--color-section-red) !important;
			border: 1px solid var(--color-section-red) !important;
			color: #fff !important;
		}

.audit-header td {
	padding-top: 2em;
}

body[data-page^=hostesky] .pozice-list .card.nesplnene .card-header {
	background: var(--color-ppm-yellow);
	color: white;
}

body[data-page^=hostesky] .pozice-list .card.splnene .card-header {
	background: var(--color-section-blue-light);
	color: white;
}

body[data-page^=hostesky] .pozice-list .card.schvalene .card-header {
	background: var(--color-section-turquoise);
	color: white;
}

/*
.navbar-nav {
	flex-direction: row;
}
*/

.navbar-nav .nav-item {
	padding-right: 1em;
}

/* calendar */
.day {padding: 0.1em 0.2em !important; border-radius: 5px}
div.zabuto_calendar .badge-today, div.zabuto_calendar div.legend span.badge-today { font-size: 1em;}
.calendar-obsazeno {background: lightgreen !important}
.calendar-skoleni-ppm {background: lightcyan !important}
.calendar-skoleni-hq {background: mediumturquoise !important}
.calendar-zakaz {background: #34495e !important}
.calendar-osobni {background: indianred !important}



.dropdown-menu {padding: 0;}

.dropdown-header-parent {
	background: #dfe6e9;
}