@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@700&display=swap');
body 			{ font-family: 'Roboto Slab', serif; margin: 5px 5px 5px 5px;}
.logo_header 		{  transition: 0.4s;  position: fixed;  top: 0px;  z-index: 99;  left: 0px;   right: 0px;  border-radius: 5px;  background-color: #f2f2f2;  margin: 5px 5px 10px 5px;  height:80px;  padding: 15px;  overflow:hidden;}
.logo_nadpis 		{  float:left;  left:0px;  height:100px;  width: 50%;  font-size: 10px;  text-align:center;}
.logo_nadpis h1 	{  border-radius: 5px;  padding:2px 2px 2px 2px;  margin: 1px 1px 3px 1px;  color:white;background:#333;}
.logo_nadpis h2 	{  border-radius: 5px;  padding:2px 2px 2px 2px;  margin: 1px 1px 3px 1px;  color:white;background:#777;}
.logo_nadpis h3 	{  border-radius: 5px;  font-size:140%;  padding:2px 2px 2px 2px;  margin: 1px 1px 3px 1px;  color:red;background:#DDD;}
.logo_logo 		{  float:right; height:100px; right:0px; width: 50%; top: 15px; font-size: 10px; text-align:center;}
.logo_kulate 		{  position: relative;  height:90px;  font-size: 10px;}

label 			{  padding: 12px 12px 12px 0;  display: inline-block;}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=tel],select,textarea {  
                           width: 100%;  padding: 12px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;
                           resize: vertical;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input[type=submit] 	{  background-color: #4CAF50;  color: white;  padding: 12px 20px;  border: none;  border-radius: 4px;  cursor: pointer;  
                           float: right;  width: 50%;-webkit-appearance: none;-moz-appearance: none;appearance: none;font-size:110%;}
.krokzpet               {  padding: 12px 20px;  border: none;  border-radius: 4px;  cursor: pointer;  float: right;  width: 50%;
			   background:pink;color:#777;-webkit-appearance: none; -moz-appearance: none; appearance: none;font-size:110%;}
.container 		{  border-radius: 5px;background-color: #f2f2f2;  padding: 20px;  padding-bottom: 40px;  margin-top: 120px;  margin-bottom: 20px;}
.row                    {  border-radius: 5px;margin:3px 0px 3px 0px;}
.col-25 		{  border-radius: 5px;float: left;  width: 25%;  margin-top: 6px; background:#e5e5e5;}
.col-25 i		{  padding:10px 10px 2px 10px;color:#4CAF50;border:1px solid white;border-radius: 10px;}
.col-75 		{  border-radius: 5px;float: left;  width: 75%;  margin-top: 6px;}
.col-75 .col75val	{  margin: 6px 6px 6px 6px; padding: 6px 6px 6px 6px;  display: inline-block; background:white; border-radius: 10px;}
.col-25r 		{  float: left;  width: 30%;  margin-top: 0px; color:#999;font-style:italic;}
.col-75r 		{  float: left;  width: 70%;  margin-top: 0px; font-weight:bold;}
.rowbig			{  padding-bottom:10px;  }
.rowgroup		{  color: #315c7a; padding: 5px 0px 0px 0px; margin-bottom: -5px; text-align: center; border-radius: 5px; background: #97d5df;}
.row h4			{  padding-top:5px; }
.rowlabel		{  position:absolute;color:#888;font-family:'Jura';font-style:italic;font-size:80%;margin:-10px 0px 0px -10px; }
/* .hrlabel		{  position:absolute;margin:-10px 10px 0px -10px;border-top:1px solid #bbb;color:#bbb; } */
.row:after 		{  content: "";  display: table;  clear: both;}
.rowbig:after 		{  content: "";  display: table;  clear: both;}
.formnote		{  font-style:italic;font-size:90%; }
label sup, .row sup 	{  vertical-align:super; font-size:60%;color:red;}
@media screen and (max-width: 600px) {  .col-25, .col-75, input[type=submit], .krokzpet {    width: 100%;    margin-top: 5px;  }}
@media screen and (max-width: 600px) {  .col-25r, .col-75r {    width: 100%;    margin-top: 0px;  }}
@media screen and (max-width: 600px) {  .rowbig {    width: 100%;    margin-top: 10px;  }}

.vyber			{  font-family:'Jura'; border-collapse:collapse;min-width:50%; }
.vyber th		{  background:#666;color:#ddd; }
.vyber th, td 		{  padding:7px; }

/* Create a custom checkbox */
.lcheckbox 		{  display: block;  position: relative;  padding-left: 35px;  margin-bottom: 12px;  cursor: pointer;  font-size: 22px;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
.lcheckbox input[type=checkbox]{  position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0;}
.checkmark 					{  position: absolute;  top: 0;  left: 0;  height: 25px;  width: 25px; background:white;  border: 1px solid #ccc;  border-radius: 4px; }
.checkmark:after 				{  content: "";  position: absolute;  display: none;}
.lcheckbox:hover input ~ .checkmark 		{  background-color: #eee;}
.lcheckbox input:checked ~ .checkmark 		{  background-color: #fab500;}
.lcheckbox input:checked ~ .checkmark:after 	{  display: block;}
.lcheckbox .checkmark:after 			{  left: 9px;  top: 5px;  width: 5px;  height: 10px;  border: solid white;  border-width: 0 3px 3px 0;  -webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg);  transform: rotate(45deg);}

#contentFooter   {position: fixed; width:99%;border-radius: 5px; bottom:0px;background-color: #444; border: 1px solid #333; color: #aaa;font-size:70%;text-align:center;height:32px;opacity: 0.8; filter:alpha (opacity=80);}
.contentFooterA  {margin-top:2px;}
.contentFooterB  {}
#contentFooter a {font-size:115%;text-decoration:none;background:black;color:lightblue;border:1px solid;padding:1px;}
#contentFooter a:hover {color:black;background:yellow;}

.payment_revolut_background {
                font-size:120%;
                font-family: 'Roboto Slab', serif;
		border-radius: 5px; border:1px solid red; 
		background-color: #f2f2f2;  
		padding: 10px; margin: 20px;}
.payment_upozorneni   	{clear:both;}
.logo_revolut		{margin-top:20px;float:left;max-width:100px;max-height:100px;}
.logo_revolut img 	{max-width:150px;width:150px;}
.logo_revolut_globe	{margin-top:20px;float:right;width:300px;max-height:100px;}

/*LOADING DURING AJAX*/
/* shared.js obsahuje na začátku úpravu ajaxStart a ajaxStop
   css       obsahuje níže uvedený odstavec týkající se .modal a body.loading
   footer.php obsahuje na konci před </body>  toto:  <div class='modal'><!-- Loading --></div>
   Pozadavek:  graphics/loading.gif
*/
.modal {
    display:    none;   position:   fixed;  z-index:    1000;
    top:        0;      left:       0;
    height:     100%;   width:      100%;
    background: transparent url('graphics/loading.gif') 50% 50% no-repeat;/*rgba( 255, 255, 255, .8 )*/
}
/* When the body has the loading class, we turn the scrollbar off with overflow:hidden */
body.loading .modal {  overflow: hidden; }
/* Anytime the body has the loading class, our modal element will be visible */
body.loading .modal {  display: block;   }



.info, .success, .warning, .error, .validation {
	width:calc(100% - 66px); margin: 5px auto; padding: 15px 10px 15px 50px;
	text-align:center;
	border-radius: 5px;background-repeat: no-repeat; background-position: 10px center;
}
.info 	 {  color: #00529B; background-color: #BDE5F8; border: 1px solid #389fdf; background-image: url('graphics/messageicons/info.png'); }
.success {  color: #4F8A10; background-color: #DFF2BF; border: 1px solid #7ebd3a; background-image: url('graphics/messageicons/success.png'); }
.warning {  color: #9F6000; background-color: #FEEFB3; border: 1px solid #daa22d; background-image: url('graphics/messageicons/warning.png'); }
.error   {  color: #900008; background-color: #FF8787; border: 1px solid #ef3131; background-image: url('graphics/messageicons/error.png'); }
.validation{color: #D63301; background-color: #FFCCBA; border: 1px solid #f8b1b1; background-image: url('graphics/messageicons/error.png'); }