/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 30, 2021, 12:34:21 AM
    Author     : mira
*/

html { color: #002855; -webkit-text-stroke: 1px rgba(0,0,0,0); overflow-y: scroll; }
body { font-family: Rubik, sans-serif; font-size: 130%; font-weight: 300; background: #dde2e8 url('/img/bg.jpg') no-repeat top center; color: #002855; margin: 45px auto; padding: 0 .5em; max-width: 1200px; min-width: 320px; }

a { color: #002855; padding: 3px 1px; font-weight: bold; text-decoration: underline;}
a:hover, a:active, a:focus {  }
a:hover { text-decoration: none; color: #002855;}
strong {font-weight: bold; }

#mapa {width: 90%; height: auto; text-align: center;}
/*#mapa img.podklad {width: 100%; margin: auto;}
#mapa img.maska {width: 100%; margin: auto; position: absolute;}
*/
#mapa img {width: 100%; margin: auto; background-size: cover;}
@media (max-width: 600px) {
        h1 { background: none; font-size: 40px; }
}
@media (min-width: 768px) {
    #content table td { padding: 0 4em; }
}

#content { background: white; border-radius: 12px; padding: 10px 4% 80px; overflow: hidden; font-size: 95%; }

h2 { font: inherit; padding: 1.2em 0; margin: 0; }

h3 { text-align: center; font-weight: 300; padding: 1.2em 0;}
h3.vidle { background: url('/img/vidle.png') no-repeat bottom center; background-size: contain; padding: 2em 0; }
h4{ text-align: center; font-size: 15pt; padding: 0.5em 0 1.2em; font-weight: 600;}

.header .wrapper, .wrapper img { max-width: 50%; margin-bottom: 1rem;}
.header .wrapper h1 {  line-height: 1; font-weight: bold; }
.header .wrapper { padding: 10px 0;}
.homepage-extremy .header .wrapper { padding: 0;}
.header .left { border-right: 1px solid #002855}
.header .wrapper-form {padding: 25px;}
.header {padding-bottom: 35px;}
.header a:hover { background: none;}
form table {width: 100% }
input, select, a.button {    border: none;
    padding: 0.9rem;
    margin: 4px 0;
    border-radius: 5px;
    width: 100%;
    color: #002855;
    font-weight: 500
}
input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

input[type=submit]:hover { text-decoration: none; }

form .bottom td { padding-top: 25px; }
form .bottom th { padding-top: 38px; }
form tr th:first-of-type { width: 50%; }
label {font-weight: 400; padding-right: 1em;}
.container {
  display: block;
  position: relative;
  padding: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /*user-select: none;*/
}
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  height: 25px;
  width: 25px;
  border-radius: 5px;
  background-color: #fff;
  margin-left: 25px;
}

.container input:checked ~ .checkmark {
  background: #fff url('/img/ikona_check.svg') no-repeat center center;
  background-size: 70% 70%;
}
#content table { width: 100%; padding: 2em; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
#content table b { font-weight: 500; }
#content table th, #content table td { font-weight: 300; padding: 0.2em 0;}
#content table td:last-child {
    padding-right: 0;
    border-left: 1px solid #ddd;
    padding-right: 4em;
    padding-left: 2em !important;
}
#content table.extremes td { padding: 0 0.2em; }

#content table td:last-child { padding-right: 0; border-left: 1px solid #ddd;}
#content table.extremes td:nth-last-child(2) { padding-right: 0; border-left: 1px solid #ddd;}
#content table tr:first-child th, #content table tr:first-child td {padding-top: 2em;}
#content table tr:last-child th, #content table tr:last-child td {padding-bottom: 2em;}
#content table.extremes tr:nth-last-child(2) th, #content table tr:last-child td {padding-bottom: 2em;}

table.success input, table.success select, table.success .checkmark,
.container input:checked ~ .checkmark {
    background-color: rgba(255, 255, 255, 0.5);
}
table.success input[type=submit] { color: #000; }
input[type=submit], a.button {
    background-color: #002855;
    color: #fff;
    border-radius: 5px;
    text-decoration: underline;
    width: 80%;
}

#content.extremes {
    padding: 10px 0 80px;
}

table.extremes thead {
  background: #002855;   /* barva přes celý div */
  color: white;
  text-align: center;
}


.mapa-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.podklad {
  display: block;
  width: 100%;
  height: auto;
}

.maska {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
}

table.extremes {
    text-align: center;
}

table.extremes .spacing {
    width: 2em;
    padding: 0 !important;
}
table.extremes tr:not(:first-child) .spacing {
    border: none;
}
table.extremes thead tr th {
    padding: 2em 0 !important;
}

#content table.extremes tbody td {
    font-weight: bold !important;
    color: #002855;
    padding: 1.2em 0;
    vertical-align: middle;
}

#content table.extremes tr:first-child td {
    padding-top: 2em;
}
a.button:hover {
    text-decoration: none;
    background: #002855;
}
a.button {
    display: inline-block;
    text-align: center;
}
p.help-wrapper {
    position: absolute;
    bottom: 0;
    margin: 0;
}