* { outline: none;}

body, html { font-size:11px; font-family: Lucida Grande, Geneva, Verdana, Arial, Helvetica, sans-serif; margin:4em; color:#444;}

html{ padding:0; margin:auto; height:100%; }
body{ margin:0; padding:0; background:#fff url('../images/logo.svg') no-repeat center center; background-size: 60%; }
body.auth {background:#fff;}

*::placeholder { font-size:.8em; color:rgba(0,0,0,0.5); }




header { margin:1em; text-align:right;}

header a { text-decoration:none; display:inline-block; padding:.5em 1em; border-radius: 2px; border: 1px solid #dcdcdc; background-color: #f5f5f5; background: linear-gradient(to bottom,#f5f5f5,#f1f1f1); color: #444; vertical-align: bottom; box-sizing: border-box;}

header a:hover { border: 1px solid #c6c6c6; color: #333; text-decoration: none; transition: all 0.0s; background-color: #f8f8f8; background: linear-gradient(to top, #f8f8f8, #f1f1f1); box-shadow: 0 1px 1px rgba(0,0,0,0.1);}

pre { background-color: rgba(252, 246, 219, 0.5); border: 1px solid #e5e0c6; font-family: "Anonymous Pro", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace; margin: 1em; border-radius: 3px;}
code { white-space: pre-wrap; display: block; width: 90%; margin: 0 auto; padding: 1em; overflow: auto;}


body > div {padding: 2em; min-height: 32vw;}
body > div:nth-child(odd){background-color: #f4f4f4;}


section { width: 90%; margin:0 auto; clear:both; overflow: auto; max-width: 1200px;}
section > svg { width:32%; vertical-align: top; margin: 2em 2em 2em 1em; float:left; min-width:28vw;}

section h2 {display: inline-block;}
section p { font-size:1.4em;}

footer {text-align:center; color:#ccc; margin:1em 0;} 
footer a { margin: 0 .5em; text-decoration:none; display:inline-block; color:#444;}
footer::before { content: "zdroje: "; }
footer span::before { content: " | "; }

ul {padding:0; text-align:center; margin: 3em 0 6em 0;}
li { list-style-type: none; padding:0 58px 0 0; margin:1em 0; }

li a { width:50px; height:50px; box-sizing:content-box; border-radius:50%; background-color:#ff6961; border:0; cursor:pointer; display:inline-block; text-align:center; vertical-align:middle; overflow:hidden; border:1px solid transparent;}
li input { font-size: 2em; vertical-align: middle; border: 1px solid #ddd; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-width: 0 0 1px 0; background-color: transparent;  padding: .2em; margin:0 1em; width:50% }
li input:focus { background-color:  white; }
li a:hover { border: 1px solid rgba(156,8,0,.3); box-shadow: 0px 0px 2px rgba(156, 8, 0,.5); /*transition: all 0.25s ease;*/ }
li a.registrovat:hover { border: 1px solid rgba(68,68,68,.3); box-shadow: 0px 0px 2px rgba(68,68,68,.5); /*transition: all 0.25s ease;*/ }

li:first-child{ padding:0 0 0 58px;}



.smazat{background:#ff6961 url('../images/trash.svg') no-repeat center center; background-size: 60%;}
.registrovat{background:#30bf30 url('../images/plus.svg') no-repeat center center; background-size: 60%;}











.opona { background-color: rgba(0,0,0,.4) !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding:0; }


.opona div { width: 320px; height: 400px; background-color: #f4f4f4; border-radius: 3px; background-color: #f7f7f7; background-image: url(../images/shield.svg); background-repeat: no-repeat; background-position: top 25% center; 
background-size: 50%; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -60%); margin: 0; width: 320px; height: 400px; padding: 32px; border-radius: 3px; border: 1px solid #e5e5e5; box-shadow: 0 7px 6px -6px #999; z-index: 100;
}

.opona h2 {margin-top: 100%;}
.opona .error {color:#ff6961;}









*, *::before, *::after {
  box-sizing: inherit;
}


div.t{ display: -webkit-box; display: flex; float: right; margin: -0.5em 0 0 1em;}

.switch-wrap { cursor: pointer; background:linear-gradient(to bottom,#f5f5f5,#f1f1f1); padding: 2px; width: 40px; height: 20px; border-radius: 4px; border: 1px solid #dadada;} 
.switch-wrap:hover{background:linear-gradient(to top, #f8f8f8, #f1f1f1);} 
.switch-wrap input { position: absolute; opacity: 0; width: 0; height: 0;} 
.switch { cursor: pointer; height: 100%; display: grid; grid-template-columns: 0fr 1fr 1fr; -webkit-transition: .2s; transition: .2s;}
.switch::after { content: ''; border-radius: 3px; background: #bbb; grid-column: 2; -webkit-transition: background .2s; transition: background .2s;}

input:checked + .switch { grid-template-columns: 1fr 1fr 0fr;}
input:checked + .switch::after { background-color: #666;}

section > label {display: block; clear: both; text-align: right; cursor: pointer;}


@media (orientation:portrait){
}

@media screen and (max-width:800px){ 
	section > svg {min-width:50vw; float:none; margin: 1em auto 4em auto; display: block;}
	li {padding:0; margin:2em auto; clear:both;}
	li:first-child{ padding:0;}
	li input {width:75%; margin:0;}
	li a {float:left; width:36px; height:36px;}
}


@media screen and (max-width:600px){
	.opona div { transform: none; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; background-position: top 15% center; }
}

@media (orientation:landscape){
	@media screen and (max-height:400px){
		.opona div { top: 0; left: 0; transform: none; width: 100%; background-position:left 10% top 25%; background-size:32%; height:100%; box-shadow: none; border-radius: 0; box-sizing: border-box; padding-left:45%}
		.opona h2 {margin:1em 0;}
	}
}





@media (prefers-color-scheme: dark){
  body {
    background-color: black;
    color: #ccc;
  }
}