/*
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 : 17.11.2017, 5:57:13
    Author     : Pegas
*/

/*img { pozdeji povolit pro lepsi responzivitu
  max-width: 90%;
  height: auto;
  box-sizing: border-box
}*/

*, 
*:after, 
*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


#header>ul>li {
        float: left;
       
        margin: 0 5px;
        font-size: 15px;
        
     list-style-type: none;
     
}

#header>ul>li:hover {
        background-color: orchid;
     
}

#header>ul>li, .leve_menu>ul>li{
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .5em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
} 

nav ul{
      
}

.leve_menu>ul>li {
    
    display:inherit;
        float: none;
        padding: 0px 25px;
        margin-left: -35px;
        font-size: 12px;
        height: 25px;
        line-height: 1.3rem;
        list-style-type: none;
     
}
.leve_menu {
    
    display:inherit;
    float: left;
       
     
}


h1, h2 {
        text-align: center;
      
}

article section {
       
        /*margin-left: 125px;*/
        background: white;
        
       
        
}

article header {
    
        
}

footer {
        width: 1200px;
        margin-top: 30px; 
        
}

.cistic {
        clear: both;
}






#p_nahled {
      width: 50%;
        float: left;
       margin: 0px auto; 
       position: relative; 
       width:600px;
       text-align: center;
}


#p_cena {
       width: 35%;
        float: left;
       position: relative; 
}
#p_prejit {
        width: 35%;
        float: left;
       margin-left: 75px;
       position: relative; 
}
#p_prejit a {
    
    float: left;
    
    position: relative;
    text-align: center;
    display: block;
}

#p_popis {
        width: 40%;
        float: left;
       margin: 0px auto; position: relative;
       
}
#obalovaci {
    margin: 0px auto; position: relative; width:1100px;
/*display: flex;
    max-width: 1280px;
    margin: auto;*/
}

#p_popis p {
      
      /* margin-left: 150px;*/
       
}

#p_box{
    
    position: relative; 
   /*flex-wrap: wrap;
    display: flex;*/
    text-align: center;
     border: 1px solid;
      margin: 25px;
      
      width: 25%;
      min-width: 280px;
      height: 460px;
      float: left;
      padding: 5px 2px 10px 2px;
       max-height: 460px;
min-height: 460px;
}






#p_box_podobne{
    text-align: center;
     border: 1px solid;
      margin-left: 35px;
      margin-top: 35px;
      width: 230px;
      height: 450px;
      float: left;
      
       
}

#p_box_nazev
{
      
     display: block;
padding: .03em 1em;
float: left;
text-decoration: none;
color: black;
min-height: 25%;
text-align: center;
       
}

#p_box_nazev a:link, a:visited
{
      
    
    /*padding: .03em 1em;*/

      min-height: 75px;
      text-decoration: none;
      color: black;
      
      text-align: center;
       
}

#p_box_nazev_podobne
{
      
     display: block;
padding: .03em 1em;
float: left;
text-decoration: none;
color: black;
min-height: 15%;
text-align: center;
       
}

#p_box_nazev_podobne a:link, a:visited
{
      
    
    /*padding: .03em 1em;*/

      min-height: 75px;
      text-decoration: none;
      color: black;
      
      text-align: center;
       
}


#p_box_cena{
      
      margin-left: 15px;
      margin-top: 5px;
        float: left;
       
}

#p_box_varianty_pocet{
      
      margin-left: 15px;
      margin-top: 15px;
        float: left;
       
}

#p_box_cena_podobne{
      
      margin-left: 15px;
     /* margin-top: 20px;*/
        float: left;
       
}

#p_box_image{
    
      display: block;
        
      margin: 0 auto;
     
}

#p_box_image img{
      
   max-width: 100%;
max-height: 200px;
width: auto;
height: auto;

      
}

.pobobne_img_nahled{
   
/*display: inline-block;*/

float: left;

max-width: 100%;
max-height: 200px;
width: auto;
height: auto;

}

.pobobne_img_nahled img{
   
 max-width: 100%;
max-height: 200px;
width: auto;
height: auto;
min-height: 200px;
}

#p_box_dostupnost{
      margin-top: 15px;
      margin-left: 15px;
      
        float: left;
       
}
#p_box_dostupnost_podobne{
     /* margin-top: 10px;*/
      margin-left: 15px;
      
        float: left;
       
}

.p_box_detail_but{
       display: inline-block;
    padding: .3em 1em;
     margin-left: 85px;
      margin-top: 5px;
        float: left;
       text-align: center;
}

.p_box_detail_but_podobne{
       display: inline-block;
    padding: .3em 1em;
     margin-left: 55px;
     /* margin-top: 15px;*/
        float: left;
       text-align: center;
}

a.p_box_detail_but, a.p_box_detail_but_podobne{
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .5em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
} 
a.p_box_detail_but:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.p_box_detail_but:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }
/*
 Paginace
*/

ul.paginace>li {
display: inline-block;
padding: 4px 10px;
border: 1px solid #DDDDDD;
margin-top: 15px;
text-align: center;
height: 35px;
line-height: 2.3rem;
    
}

ul.paginace>li:hover {
    background: #fAfAfA;
}

ul.paginace>li.neaktivni {
    color: #DDDDDD;
}

ul.paginace>li.aktivni {
    color: white;
    background: #3b94e0;
}

ul.paginace>a {
        text-decoration: none;
}

/*
 Ostatní
*/

.centrovany {
        text-align: center;
}





/*    Generated by http://www.cssportal.com    */



body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#333
}

p {
    padding: 10px;
}

#wrapper {
    /*flex-direction: row;*/
    margin: 0 auto;
    width: 100%;
    max-width:1280px; 
}

#header {
    float: none;
    display: block;
    height: 75px;
    width: 100%;
    background: whitesmoke;
    max-width:1280px;   
    margin:auto;
}

#top-menu ul {
  text-align: center;
  margin-top: 0px; visibility: visible; background-color: orange; margin: 0; padding: 0; list-style-type: none; margin: 0px auto;
}
#top-menu li { padding: 2px 2px 0 2px; white-space: nowrap; display:inline-block; }

#top-menu a {
    display: inline-block; 
    padding: .3em 1em; 
    text-decoration: none;    
    font-weight: bold;
    font-size: 120%;
    color: #fff;
}

#top-menu ul a:hover {color: #4f4f4f; background-color: rgb(233,233,233);}

#navigation {
    float: none;
    display: block;
    height: 40px;
    width: 100%;
    background: whitesmoke;
     max-width:1280px;   
    margin:auto;
    

}

#content {
    display: block;
    background: #FFFFFF;
    width: 85%;
    float: left;
    padding-bottom: 20px;
}

#content-boxes
{
    display: blok;
  
}

#top-menu
{
   
    float: left;
    display: block;
    width: 100%;
    max-width:1280px;   
    margin:auto;
     
}



#leftcolumn {
    background: whitesmoke;
    width: 15%;
    float: left;
    display: block;
   
 
   
}

#footer {
    float: none;
    display: block;
   /* height: 40px;*/
    width: 100%;
   /* background: whitesmoke;*/
    max-width:1280px;   
    margin:auto;
    clear: both;
    
}

.menu {text-align: center; color: #000000; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; background-color: orange; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; width: 200px; white-space: nowrap;}
.menu a {padding: 3px; text-align: left; padding-left: 15px; color: #fff; background-color: orange; display: block; text-decoration: none; font-weight: bold; margin-left: 40px;}
.menu ul a:link {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: #4f4f4f; background-color: rgb(233,233,233);}
.menu li:hover ul, ul.menu li.hover ul { visibility: visible;}
.menu li li {float: none; border: none; padding: 0; margin: 0; display: inline;}


#top-menu-admin {
  text-align: center;
  margin-top: 0px; visibility: visible; background-color: lightskyblue; margin: 0; padding: 0; list-style-type: none; margin: 0px auto;
}

#top-menu-admin ul {
  text-align: center;
 
}

#top-menu-admin li { padding: 2px 2px 0 2px; white-space: nowrap; display:inline-block; }

#top-menu-admin a {
    display: inline-block; 
    padding: .3em 1em; 
    text-decoration: none;    
    font-weight: bold;
    font-size: 120%;
    color: #fff;
}

#top-menu-admin ul a:hover {color: rgb(62,167,230); background-color: rgb(233,233,233);}

.zpravazlutainfo {
        border: 1px solid #9DC2F8;
        background: #fbfae2;
        padding: 3px;
        width: 75%;
        margin-left: auto; 
        /*margin-right: auto;*/
        margin-top: 2px;
}

.zpravacervenainfo {
        border: 1px solid #9DC2F8;
        background: #ffb7b7;
        padding: 3px;
        width: 75%;
        margin-left: auto; 
        /*margin-right: auto;*/
        margin-top: 2px;
}

.zpravamodrainfo{
        border: 1px solid #9DC2F8;
        background: #e6fbfe;
        padding: 3px;
        width: 75%;
        margin-left: auto; 
        /*margin-right: auto;*/
        margin-top: 2px;
}

.zpravazluta {
        border: 1px solid #9DC2F8;
        background: #fbfae2;
        padding: 3px;
        width: 75%;
        margin-left: auto; 
        margin-right: auto;
        margin-top: 2px;
}

.zpravacervena {
        border: 1px solid #9DC2F8;
        background: #ffb7b7;
        padding: 3px;
        width: 75%;
        margin-left: auto; 
        margin-right: auto;
        margin-top: 2px;
}

.zpravazelena {
        border: 1px solid #9DC2F8;
        background: #DDFBDF;
        padding: 3px;
        width: 65%;
        margin-left: auto; margin-right: auto;
        margin-top: 2px;
}

.zpravamodra {
        border: 1px solid #9DC2F8;
        background: #e6fbfe;
        padding: 3px;
        width: 65%;
        margin-left: auto; margin-right: auto;
        margin-top: 2px;
}

.system-message-close:before {
    content: '\00d7';
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -10px;
    margin-left: -9px;
    font-size: 18px;
    line-height: 1;
}

.system-message-close {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #e42c2c;
    color: #fff !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
    transition: background-color 300ms ease-out;
    margin-top: -2px;
}
.system-message-close:hover {
 cursor: pointer
}

.system-message-buttons {

    float:right;
}


#top-menu-data-procesor{
   
    text-align: center;
    
}

#top-menu-admin-produkt>ul, #top-menu-data-procesor>ul {
    position: relative;
    height: 37px;
    padding: 3px 0 0 0; 
    margin: 0;
    overflow: visible;
    list-style: none;
     width: 780px; 
    display: inline-block;
    text-align: center;
   
    
}

#top-menu-admin-produkt>ul>li>a, #top-menu-data-procesor>ul>li>a {
    display: block;
    font-size: .75rem;
    border: 1px solid #b7b7b7;
   
    text-decoration: none;
    color: #484848;
    background-color: #f7f7f7;
    white-space: nowrap;
    height: 33px;
    padding: 8px 18px 0 18px;
    float:left;
}

#top-menu-admin-produkt>ul>li:not(.active):not(.ui-tabs-active)>a:hover , #top-menu-data-procesor>ul>li:not(.active):not(.ui-tabs-active)>a:hover {
    background-color: #14b1ef;
    color: #fff;
}

#top-menu-admin-produkt>ul>li.active>a, #top-menu-data-procesor>ul>li.active>a {
    height: 34px;
    background-color: #fff;
}

.aktivni{
    height: 34px;
    background-color: #8CB1FF;
}

#top-menu-data-procesor>ul>li.aktivnidp>a{
     
  background: white;
  font-weight: bold; 
}

aktivnidp
{
    
    left: 0;
    top: -3px;
    height: 4px;
    width: 20%;
    background: #84b73b;
    content: "";
}




#tabulka 
{
    border-collapse: collapse;
    margin-left: auto; 
    margin-right: auto;
    
    border-collapse: collapse;
    border: 1px solid lightgrey;
    width: 85%;
}


.zvyrazneni-radku tr:hover td {
      background: yellow;
    }

#tabulkadod
{
    border-collapse: collapse;
    margin-left: auto; 
    margin-right: auto;
    
    border-collapse: collapse;
    border: 1px solid lightgrey;
  
}

#tabulka td, #tabulka th, #tabulkadod td, #tabulkadod th
{
   border: 1px solid lightgrey;
   border-spacing:1px;
   padding: 5px;
}

#tabulka_filtry, #tabulka_but, #oznacit_vse
{
  
    margin-left: auto; 
    margin-right: auto;
    
 text-align: center;
}

#tabulka-filtr 
{
    border-collapse: collapse;
    margin-left: auto; 
    margin-right: auto;
    
    border-collapse: collapse;
   
}


input, textarea, select, checkbox {margin: 3px; padding : 3px; border-radius: 3px;

                                   -webkit-border-radius: 3px;
-moz-border-radius: 3px; 

}

input:hover, textarea:hover, select:hover{ 
    background: #eee; 
}

input, textarea,select, checkbox {
 

 
/* -- CSS3 Shadow - create a shadow around each input element -- */ 
-webkit-box-shadow: 0px 0px 4px #aaa;
-moz-box-shadow: 0px 0px 4px #aaa; 
box-shadow: 0px 0px 4px #aaa;
 
/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */		
-webkit-transition: background 0.3s linear;					
}

input.submit{
 

 
/* -- CSS3 Transition - define which property to animate (i.e. the shadow)  -- */
-webkit-transition: -webkit-box-shadow 0.3s linear;
 
/* -- CSS3 Shadow - create a shadow around each input element -- */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); 
background:  -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc); 
 
/* -- CSS3 - Rounded Corners -- */
-webkit-border-radius: 4px;
-moz-border-radius: 4px; 
border-radius: 4px;

}

input.submit:hover { 		
    -webkit-box-shadow: 0px 0px 20px #555;
    -moz-box-shadow: 0px 0px 20px #aaa; 
    box-shadow: 0px 0px 20px #555;		
    cursor:  pointer; 
}

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    margin-bottom: 10px;
    display: inline-block;
    font-size: 14px;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0px; top: 0px;
    width: 25px; height: 25px;
    border: 1px solid #cccccc;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
    content: '✔';
    position: absolute;
    top: 0px; left: 5px;
    font-size: 21px;
    line-height: 1.2;
    color: #09ad7e;
    transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}
[type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #999999;
    background-color: #dddddd;
}
[type="checkbox"]:disabled:checked + label:after {
    color: #999999;
}
[type="checkbox"]:disabled + label {
    color: #aaaaaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
    border: 2px dotted #8F8F99;
}
/* hover style just for information */
label:hover:before {
    border: 2px solid #4778d9!important;
    background: #ffffff
}
        
        /* tlačítko zelene*/
        .submit-button {
   border: 1px solid #447314;
   background: #6aa436;
   background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436));
   background: -webkit-linear-gradient(top, #8dc059, #6aa436);
   background: -moz-linear-gradient(top, #8dc059, #6aa436);
   background: -ms-linear-gradient(top, #8dc059, #6aa436);
   background: -o-linear-gradient(top, #8dc059, #6aa436);
   background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #addc7e 0 1px 0;
   color: #fff;
   font-family: helvetica, serif;
   padding: 5.5px 10px;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   }
.submit-button:hover {
   border: 1px solid #447314;
   text-shadow: #31540c 0 1px 0;
   background: #6aa436;
   background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436));
   background: -webkit-linear-gradient(top, #8dc059, #6aa436);
   background: -moz-linear-gradient(top, #8dc059, #6aa436);
   background: -ms-linear-gradient(top, #8dc059, #6aa436);
   background: -o-linear-gradient(top, #8dc059, #6aa436);
   background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%);
   color: #fff;
   box-shadow: 0px 0px 2px rgba(66,66,66,.75);
   }
.submit-button:active {
   text-shadow: #31540c 0 1px 0;
   border: 1px solid #447314;
   background: #8dc059;
   background: -webkit-gradient(linear, left top, left bottom, from(#6aa436), to(#6aa436));
   background: -webkit-linear-gradient(top, #6aa436, #8dc059);
   background: -moz-linear-gradient(top, #6aa436, #8dc059);
   background: -ms-linear-gradient(top, #6aa436, #8dc059);
   background: -o-linear-gradient(top, #6aa436, #8dc059);
   background-image: -ms-linear-gradient(top, #6aa436 0%, #8dc059 100%);
   color: #fff;
   }
   
   
    /* tlačítko zelene*/
   .submit-button-modry {
   border: 1px solid #152073;
   background: #6454d1;
   background: -webkit-gradient(linear, left top, left bottom, from(#7c84eb), to(#6454d1));
   background: -webkit-linear-gradient(top, #7c84eb, #6454d1);
   background: -moz-linear-gradient(top, #7c84eb, #6454d1);
   background: -ms-linear-gradient(top, #7c84eb, #6454d1);
   background: -o-linear-gradient(top, #7c84eb, #6454d1);
   background-image: -ms-linear-gradient(top, #7c84eb 0%, #6454d1 100%);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7f8adb 0 1px 0;
   color: #fff;
   font-family: helvetica, serif;
   padding: 5.5px 10px;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   }
.submit-button-modry:hover {
   border: 1px solid #152073;
   text-shadow: #7f8adb 0 1px 0;
   background: #6454d1;
   background: -webkit-gradient(linear, left top, left bottom, from(#7c84eb), to(#6454d1));
   background: -webkit-linear-gradient(top, #7c84eb, #6454d1);
   background: -moz-linear-gradient(top, #7c84eb, #6454d1);
   background: -ms-linear-gradient(top, #7c84eb, #6454d1);
   background: -o-linear-gradient(top, #7c84eb, #6454d1);
   background-image: -ms-linear-gradient(top, #7c84eb 0%, #6454d1 100%);
   color: #fff;
   box-shadow: 0px 0px 2px rgba(66,66,66,.75);
   }
.submit-button-modry:active {
   text-shadow: #31540c 0 1px 0;
   border: 1px solid #152073;
   background: #6454d1;
   background: -webkit-gradient(linear, left top, left bottom, from(#7c84eb), to(#6454d1));
   background: -webkit-linear-gradient(top, #7c84eb, #6454d1);
   background: -moz-linear-gradient(top, #7c84eb, #6454d1);
   background: -ms-linear-gradient(top, #7c84eb, #6454d1);
   background: -o-linear-gradient(top, #7c84eb, #6454d1);
   background-image: -ms-linear-gradient(top, #7c84eb 0%, #6454d1 100%);
   color: #fff;
   }
   
   /* tlačítko cervene*/
   .submit-button-cerveny {
   border: 1px solid #731629;
   background: #cf5555;
   background: -webkit-gradient(linear, left top, left bottom, from(#d11f4f), to(#cf5555));
   background: -webkit-linear-gradient(top, #d11f4f, #cf5555);
   background: -moz-linear-gradient(top, #d11f4f, #cf5555);
   background: -ms-linear-gradient(top, #d11f4f, #cf5555);
   background: -o-linear-gradient(top, #d11f4f, #cf5555);
   background-image: -ms-linear-gradient(top, #d11f4f 0%, #cf5555 100%);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #d97e9e 0 1px 0;
   color: #fff;
   font-family: helvetica, serif;
   padding: 5.5px 10px;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   }
.submit-button-cerveny:hover {
   border: 1px solid #731629;
   text-shadow: #d97e9e 0 1px 0;
   background: #cf5555;
   background: -webkit-gradient(linear, left top, left bottom, from(#d11f4f), to(#cf5555));
   background: -webkit-linear-gradient(top, #d11f4f, #cf5555);
   background: -moz-linear-gradient(top, #d11f4f, #cf5555);
   background: -ms-linear-gradient(top, #d11f4f, #cf5555);
   background: -o-linear-gradient(top, #d11f4f, #cf5555);
   background-image: -ms-linear-gradient(top, #d11f4f 0%, #cf5555 100%);
   color: #fff;
   box-shadow: 0px 0px 2px rgba(66,66,66,.75);
   }
.submit-button-cerveny:active {
   text-shadow: #d97e9e 0 1px 0;
   border: 1px solid #731629;
   background: #cf5555;
   background: -webkit-gradient(linear, left top, left bottom, from(#d11f4f), to(#cf5555));
   background: -webkit-linear-gradient(top, #d11f4f, #cf5555);
   background: -moz-linear-gradient(top, #d11f4f, #cf5555);
   background: -ms-linear-gradient(top, #d11f4f, #cf5555);
   background: -o-linear-gradient(top, #d11f4f, #cf5555);
   background-image: -ms-linear-gradient(top, #d11f4f 0%, #cf5555 100%);
   color: #fff;
   }
   
    /* editbox*/
   input, textarea {
     padding: 4px;
     font-size: 14px;
     border-width: 1px;
     border-color: #CCCCCC;
     background-color: #FFFFFF;
     color: #000000;
     border-style: solid;
     border-radius: 2px;
     box-shadow: 0px 0px 2px rgba(66,66,66,.75);
     text-shadow: undefined 0px 0px 2px px rgba(66,66,66,.75);
}
 .css-input:focus {
     outline:none;
}

/* Slider - cenik */
.slidecontainer {
    width: 100%; /* Width of the outside container */
    text-align: center;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 90%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

/* Styl radio buttonu*/
.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 50px;
    margin-bottom: 5px;
    padding-top: 3px;
    cursor: pointer;
    font-size: 16px;
}
    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
.control_indicator {
    position: absolute;
    top: 2px;
    left: 100px;
    height: 24px;
    width: 24px;
    background: #e6e6e6;
    border: 0px solid #000000;
}
.control-radio .control_indicator {
    border-radius: 100%;
}

.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #cccccc;
}

.control input:checked ~ .control_indicator {
    background: green;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-radio .control_indicator:after {
    left: 4px;
    top: 4px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ffffff;
}
.control-radio input:disabled ~ .control_indicator:after {
    background: #7b7b7b;
}

          
/* Loading  */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: transparent;
    margin: auto;
    padding: 20px;
    
    width: 80%;
    text-align: center;
}
/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}


.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#wrapperp {
    //flex-direction: row;
    margin: 0 auto;
    width: 100%;
    max-width:1000px; 
}