/* -----------------
 * DATA
 * ----------------- */

.data-css {background:#bdffe7;width:500px;}
.data-element {background:#deffee;width:500px;}
.data-form {background:#e9e1ff;width:500px;}
.data-vrstva {background:#e1f4ff;width:500px;}
.data-kategorie {background:#111;color:#FFF;width:500px;}
.data-kategorie a {color:#FFF;}
.cerny-obrys {border:1px solid #000;padding:5px;}

/* -----------------
 * MODAL
 * ----------------- */

.vrstva {
	position:fixed;
	width:100%;
	height:100%;
	z-index:2200;
	right:0px;
	box-sizing:border-box;
	flex-direction:column;
	
	overflow-x:hidden;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	display:flex;
	background-color: #2727275e;
	transition: background-color 0.2s;
	
}

.vrstva-zavrit {
	background-color: #00000000;
	

}

.vrstva-zavrit-slide {
	
	right:-100%;
}

.vrstva::-webkit-scrollbar {
  display: none;
}

@keyframes opacity {
  0%   {opacity:0;}
  100% {opacity:1;}
}

@keyframes k-pridat {
  0%   {background:#FFFFFF2e}
  100% {background:#0000002e}
}

@keyframes k-smazat {
  0%   {background:#0000002e;}
  100% {background:#FFFFFF2e;}
}

@keyframes vrstva-vpravo-otevrit {
  0%   {right:-500px;opacity:1;}
  100% {right:00px;opacity:1;}
}

@keyframes vrstva-vpravo-zavrit {
  0%   {right:0px;opacity:1;}
  100% {right:-500px;opacity:1;}
}

@keyframes t-pridat {
  0%   {height:0%;}
  100% {height:100%;}
}

@keyframes t-smazat {
  0%   {height:100%;}
  100% {height:0%;}
}

.modal-stred-nahore {
	opacity:1;
	width:800px;
	height:200px;
	margin:0px auto;
	top:40px;
}

.vrstva-vpravo {
	display:flex;
	position:fixed;
	width:500px;
	top:0px;
	right:0px;
	height:100%;
	background:#FFF;
	transition: right 0.2s;
	transition-timing-function: ease-in-out;
	overflow-y:scroll;
	

}

@media only screen and (max-width: 600px) {
	.vrstva-vpravo {
		width:100%;
	
	}
}

.vrstva-k {

}

.k-smazat {
	animation-name: k-smazat;
	animation-duration: 250ms;
	background:#0000002e
}

.vpravo-zavrit {
	right:-100%;
}

.vrstva-vse {
	opacity:1;
	width:100%;
	top:0px;
	right:0px;
	height:100%;
}

.tlacitko {
	opacity:1;
	width:15px;
	top:0px;
	right:0px;
	height:100%;
	display:flex;
	animation-name: t-pridat;
	animation-duration: 200ms;
}

.t-smazat {
	animation-name: t-smazat;
	animation-duration: 200ms;
}


.cervena {background:#fd5656;}



.zavrit-modal {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

/* -----------------
 * CONTAINER
 * ----------------- */
 
 #obsah::-webkit-scrollbar-track
{
	background-color: none;
}

#obsah::-webkit-scrollbar
{
	width: 10px;
}

#obsah::-webkit-scrollbar-thumb
{
	background-color: #000000;
}


#novavrstva {display:none;height:0vh;}
#slider {display:none;height:0vh;background:#FFF;}
.vrstvaZobrazit {display:flex !important;width:100vw;background:#FFF;height:100vh !important;position:fixed;animation-name: opacity;animation-duration: 0.2s;}
.sliderZobrazit {display:flex !important;width:400x !important;background:#FFF;right:0px;height:100vh !important;position:fixed;animation-name: opacity;animation-duration: 0.2s;}
.tugl {display:none;}
.zobrazit {display:inline-block !important;animation-name: opacity;animation-duration: 0.2s;}


#kontejner {display:flex;flex-direction:row;}
#vrstvakontejner {width:100%;max-width:800px;margin:0 auto;}
#sliderkontejner {width:100%;padding:60px;box-sizing:border-box;margin:0 auto;}
#barvy {position:fixed;display:flex;width:15px;height:100%;flex-direction:column;right:0px;background:#FFC300;z-index:1000;}