/******************* VARIABLES, COLORS ********************************/
:root {
  --yellow: #f1c40f; /* sunflower (flat UI) */
  --yellowHover: #f39c12; /* orange (flat UI) */
  --blue: #00a8ff;
  --blueHover: #0097e6;
  --blue: #3498db; /* peter river (flat UI) */
  --blueHover: #2980b9; /* belize hole (flat UI) */
  --darkBlue: #0d7dba;
  --darkBlueHover: #2980b9;
  --green: #00ca65;
  --greenHover: #00AB55;
  --green: #2ecc71; /* emerald (flat UI) */
  --greenHover: #27ae60; /* nephritis (flat UI) */
  --orange: #f39c12; /* orange (flat UI) */
  --orangeHover: #e67e22; /* carrot (flat UI) */
  --red: #e55043; 
  --red: #e74c3c; /* alizarin (flat UI) */
  --redHover: #c0392b; /* pomegranate (flat UI) */
  --violet: #9b59b6; /* amethyst (flat UI) */
  --violetHover: #8e44ad; /* wisteria (flat UI) */
  --lightGray: #ecf0f1;  /* clouds (flat UI) */
  --lightGray: #eff0f2;    /* TEPLEJSI */
  --lightGrayHover: #dfdfe1;
  --gray: #bdc3c7; /* silver (flat UI) */
  --grayHover: #95a5a6; /* concrete (flat UI) */
  --black: #34495e; /* wet asphalt (flat UI) */
  --blackHover: #2c3e50; /* midnight blue (flat UI) */

  --faintGray: #f3f6f9; /* f8f8f8 teplejsi */
  --faintGreen: #c8f8df;
  --faintBlue: #e3faff;
  --faintRed: #F7B7C0;
  --faintYellow: #f8efbc;  
  --faintOrange: #FEDEB4;
  --white: white;

  --overlay-background: rgba(44, 62, 80, 0.6);
  --wrong: #ec7063;
  --correct: #2ecc71;
}

/* backgrounds */
.bg-yellow {background: var(--yellow)}
.bg-white {background: var(--white)}
.bg-yellowHover {background: var(--yellowHover)}
.bg-blue {background: var(--blue)}
.bg-red {background: var(--red)}
.bg-violet {background: var(--violet)}
.bg-black {background: var(--black)}
.bg-green {background: var(--green)}
.bg-greenHover {background: var(--greenHover)}
.bg-lightGray {background: var(--lightGray)}
.bg-gray {background: var(--gray)}
.bg-grayHover {background: var(--grayHover)}
.text-white {color: var(--white)}
.text-black {color: var(--black)}  
/******************* STRED PAS SPECIALITY ********************************/

.space{
  height: 60px;  
  display: block;
}

/******************* STRED PAS HTML ********************************/

h1,h2, h3{        
  line-height: 1.3em;
  font-weight: bold;
  display: block;
}

h1{ 
  font-size: 32px;   
  margin-top: 30px;
  margin-bottom: 30px;
}

h2{ 
  font-size: 22px;   
  margin-top: 30px;
  margin-bottom: 20px;
}

h3{ 
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 10px;
}

p{     
  font-size: 16px;
  line-height: 1.6em; /* driv bylo 1.4em, ale kvuli processing fluency zmeneno */   
  margin-bottom: 25px;   /* driv bylo 5px, ale kvuli processing fluency zmeneno */
  font-weight: 400;
}

i{     
  font-size: 16px;
  line-height: 1.6em; /* driv bylo 1.4em, ale kvuli processing fluency zmeneno */   
  margin-bottom: 25px;   /* driv bylo 5px, ale kvuli processing fluency zmeneno */
  font-weight: 400;
  font-style: italic;
}

.text-italic {font-style: italic;}
.text-bold {font-weight: bold;}
.text-center {text-align: center;}

p.nomargin,h1.nomargin,h2.nomargin,h3.nomargin{
  margin-top: 0px;
  margin-bottom: 0px;
}

p.margin5,h1.margin5,h2.margin5,h3.margin5{
  margin-top: 5px;
  margin-bottom: 5px;
}

p.margin520,
h1.margin520,
h2.margin520,
h3.margin520 {
  margin-top: 5px;
  margin-bottom: 20px;
}

a{  
  /*font-size: 16px;*/
  color: var(--blue); 
  text-decoration:none;  
  /* font-weight: 400; experiment 13.5.2020 */
}

a:hover{
  color: var(--blueHover); 
  text-decoration: underline;
}

a.green{ color: var(--green); }
a.green:hover{ color: var(--greenHover); }
a.blue{ color: var(--blue); }
a.blue:hover{ color: var(--blueHover); }
a.red{ color: var(--red); }
a.red:hover{ color: var(--redHover); }
a.gray{ color: var(--gray); }
a.gray:hover{ color: var(--grayHover); }


ul{
  list-style-type:disc;
  margin-left:10px;  
  padding: 5px;
  padding-left: 10px;
  font-size: 16px;
}

ol{
  margin-left:10px;  
  padding: 5px;
  padding-left: 10px;
  font-size: 16px;
}

li{
  font-size: 16px;
  line-height: 1.2em;    
  line-height: 1.6em; /* driv bylo 1.4em, ale kvuli processing fluency zmeneno */   
  margin-top: 5px;  
  font-weight: 400;
}

button{ /* at nedela stiny */
  border:0px;
}

/******************* COLORS ********************************/

p.blue,h1.blue,h2.blue,h3.blue{ color: var(--blue); }
p.darkblue,h1.darkblue,h2.darkblue,h3.darkblue{ color: var(--darkBlue); }
p.green,h1.green,h2.green,h3.green{ color: var(--green); }
p.red,h1.red,h2.red,h3.red{ color: var(--red); }
p.violet,h1.violet,h2.violet,h3.violet{ color: var(--violet); }
p.gray,h1.gray,h2.gray,h3.gray{ color: var(--gray); }

/******************* TABLES ********************************/

table{          
  border-spacing: 0px;
  border-collapse: separate;    
  margin: 20px 0px;
}

table.wide{
  width: 100%;  
}

td,th{
  font-size: 16px;
  line-height: 1.2em;    
  margin-top: 5px;  
  font-weight: 400;    
  padding:5px;
  padding-left:1px;
  border-bottom:1px solid var(--lightGrayHover);
}

th{
  font-weight: 600;
}

td.wide,th.wide{
  width: 100%;
}

td.padding10{    
  padding:10px;
}

td small,th small{
  display: block;
  font-size: 14px;
  padding-top:8px;
}
td small a{
  font-size: 14px;
}

.table.nomargin{  
  margin:0px;
}

table.hoverable tr:hover td{  
  background-color:var(--lightGray);
}

table.noborder td, table.noborder th{
  border:0px;
}

table.big td, table.big th{  
  padding:10px;
  font-size: 18px;
  text-align: left;  
}

table.medium td, table.medium th{  
  padding:5px;  
}

table.small td, table.small th{
  padding:2px;
  font-size: 14px;  
  text-align: left;  
  line-height: 22px;
}

table.small td img{
  display: inline-block;
  vertical-align: bottom;
  height: 26px;
  width: auto;
}

table.small tr.heading td{
  font-weight: bold;
  font-size: 16px;  
  line-height: 36px;
}

table.zebra tr:nth-child(even) {
  background-color: #f2f2f2;
}

/******************* TLACITKA SYSTEM ********************************/

.tlacitko{  
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  color: white;
  cursor: pointer;
  border-radius: 6px;  
  border-radius: 3px;  /* 13.5.2020 */
  font-family: inherit;
  line-height: inherit;
}

a.tlacitko{ color:white; }

.tlacitko:hover{    
  color:white;    
  /*transition: all 0.15s ease-in-out 0s; */
  text-decoration: none;
}

.tlacitko.giga{
  display: flex;  
  align-items: center;    
  justify-content: flex-start;  

  padding:0px 20px;
  font-size: 18px;  
  font-weight: 400;
  width: auto;
  margin:5px;
  margin-bottom: 20px;
}

.tlacitko.large{
  padding:10px 30px;
  font-size: 18px;  
  font-weight: 400;
}

.tlacitko.medium{
  padding: 6px 12px;  
  font-size: 16px;  
}

.tlacitko.small{
  padding: 2px 8px;
  line-height: 20px;
  font-size: 14px;  
}

.tlacitko.margin5{ margin: 5px; }
.tlacitko.margin10{ margin: 10px; }
.tlacitko.margin20{ margin: 20px; }
.tlacitko.tmargin20{ margin-top: 20px; }
.tlacitko.tmargin50{ margin-top: 50px; }
.tlacitko.rmargin10{ margin-right: 10px; }
.tlacitko.lmargin10{ margin-left: 10px; }
.tlacitko.marginLeft10{ margin-left: 10px; }

.tlacitko.nomargin{  
  margin:0px;
}

.tlacitko.wide{
  padding:10px 14px;  
  font-size: 16px;  
  display: inline-block;
  width: 100%;
  text-align: center;
}

/* STARA MODRA */
.tlacitko.blue{ background-color: #0AB9F3; border-bottom:1px solid #007ebc; }
.tlacitko.blue:hover{ background-color: #089DCE; color:white; }

.tlacitko.blue{ background-color: var(--blue); border-bottom:1px solid var(--blueHover); }
.tlacitko.blue:hover{ background-color: var(--blueHover); color:white; }
.tlacitko.darkBlue{ background-color: var(--darkBlue); border-bottom:1px solid var(--darkBlueHover); }
.tlacitko.darkBlue:hover{ background-color: var(--darkBlueHover); color:white; }
.tlacitko.green{ background-color:var(--green); border-bottom:1px solid var(--greenHover); }
.tlacitko.green:hover{ background-color: var(--greenHover); color:white; }
.tlacitko.orange{ background-color: var(--orange); border-bottom:1px solid var(--orangeHover); }
.tlacitko.orange:hover{ background-color: var(--orangeHover); color:white; }
.tlacitko.red{ background-color: var(--red); border-bottom:1px solid var(--redHover); }
.tlacitko.red:hover{ background-color: var(--redHover); color:white; }
.tlacitko.violet{ background-color:var(--violet); border-bottom:1px solid var(--violetHover); }
.tlacitko.violet:hover{ background-color: var(--violetHover); color:white; }
.tlacitko.gray{ background-color: var(--gray); border-bottom:1px solid var(--grayHover); }
.tlacitko.gray:hover{ background-color: var(--grayHover); color:white; }
.tlacitko.yellow{ background-color: var(--yellow); border-bottom:1px solid var(--yellowHover); }
.tlacitko.yellow:hover{ background-color: var(--yellowHover); color:white; }

.tlacitko.gray-green,.tlacitko.gray-blue,.tlacitko.gray-orange,.tlacitko.gray-red,.tlacitko.gray-violet,.tlacitko.gray-black{ background-color: var(--lightGrayHover); } /* #dfe6e9; */
.tlacitko.gray-green:hover,.tlacitko.gray-blue:hover,.tlacitko.gray-orange:hover,.tlacitko.gray-red:hover,.tlacitko.gray-violet:hover,.tlacitko.gray-black:hover{ background-color: #ced6e0; }
.tlacitko.gray-green{ color: var(--green); }
.tlacitko.gray-blue{ color: var(--blue); }
.tlacitko.gray-orange{ color: var(--orange); }
.tlacitko.gray-red{ color: var(--red); }
.tlacitko.gray-violet{ color: var(--violet); }
.tlacitko.gray-black{ color: var(--black); }

/* .tlacitko.primary{ background-color: var(--blue); border-bottom:0px solid var(--blueHover); }
.tlacitko.primary:hover{ background-color: var(--blueHover); color:white; }
.tlacitko.secondary{ color: var(--blue); background-color: var(--lightGrayHover);  }
.tlacitko.secondary:hover{ background-color: var(--grayHover); color:white; } */

.tlacitko.primary, .tlacitko.primary2 {
  background-color: var(--blue);
  border: 1px solid var(--blueHover);
  /* box-shadow: 0px 1.5px 4px 0px rgba(52, 152, 219, 0.4); */
}

.tlacitko.primary:hover, .tlacitko.primary2:hover {
  background-color: var(--blueHover);
  border-color: #236e9f;
  color: white;
}

.tlacitko.secondary, .tlacitko.secondary2, .tlacitko.navigation, .tlacitko.danger, .tlacitko.disabled, .tlacitko.disabled:hover, .badge-button {
  color: var(--darkBlue);
  border: 1px solid var(--lightGrayHover);
  background-color: var(--lightGray);
}

.tlacitko.secondary:hover, .tlacitko.secondary2:hover, .tlacitko.navigation:hover, .tlacitko.danger:hover, .badge-button:hover, .button-help:focus {
  background: var(--lightGrayHover);
  border-color: var(--gray);
}

#exercise .tlacitko.secondary:not(.secondary-box .tlacitko.secondary), #exercise .tlacitko.navigation:not(.secondary-box .tlacitko.navigation), #exercise .tlacitko.danger:not(.secondary-box .tlacitko.danger) {
  /*color: var(--darkBlue);*/
  background-color: white; border: 1px solid var(--gray)
}

#exercise .tlacitko.disabled:not(.secondary-box .tlacitko.disabled), #exercise .tlacitko.disabled:hover:not(.secondary-box .tlacitko.disabled:hover) {background-color: #f7f8fa;}

#exercise .tlacitko.secondary:hover:not(.secondary-box .tlacitko.secondary:hover), #exercise .tlacitko.navigation:hover:not(.secondary-box .tlacitko.navigation:hover), #exercise .tlacitko.danger:hover:not(.secondary-box .tlacitko.danger:hover) {
  background-color: #f7f8fa;
}

.tlacitko.navigation, .tlacitko.navigation:hover, #exercise .tlacitko.navigation {color: var(--black);}
.tlacitko.danger, .tlacitko.danger:hover, #exercise .tlacitko.danger {color: var(--red);}
.tlacitko.bigDanger{ color: white; background-color: var(--red); border: 1px solid var(--redHover);}
.tlacitko.bigDanger:hover{background-color:var(--redHover); border: 1px solid #a73125; color:white; }
.tlacitko.disabled, .tlacitko.disabled:hover {color: var(--gray); cursor: default;}

.tlacitko.secondary.selected, .tlacitko.secondary.selected:hover {background-color: var(--black) !important; border-color: var(--black); color: var(--white);}

/* .tlacitko.navigation {
  color: var(--black);
  background-color: var(--lightGrayHover);
}

.tlacitko.navigation:hover {
  background-color: var(--grayHover);
  color: white;
}

.tlacitko.danger {
  color: var(--red);
  background-color: var(--lightGrayHover);
}

.tlacitko.danger:hover {
  background-color: var(--grayHover);
  color: white;
} */

/* TK 2023-10-29 – zakomentováno dle návrhu v design manuálu */
/* .tlacitko.secondary.whiteScreen{ background-color: white; border: 1px solid var(--gray); }
.tlacitko.secondary.whiteScreen:hover{ background-color: var(--lightGrayHover); color:var(--black); }
.tlacitko.navigation.whiteScreen{ background-color: white; border: 1px solid var(--gray); }
.tlacitko.navigation.whiteScreen:hover{ background-color: var(--lightGrayHover); color:var(--black); }
.tlacitko.danger.whiteScreen{ background-color: white; border: 1px solid var(--gray); color:var(--red); }
.tlacitko.danger.whiteScreen:hover{ background-color: var(--lightGrayHover); color:var(--red); } */

/******************* obrázek v tlačítku ********************************/

/* .button-image {display: block; width: 23px; height: 23px; background-position: center; background-size: contain; background-repeat: no-repeat;} */

.button-image {
  display: block;
  width: 23px;
  height: 23px;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background-size: contain;
}

.tlacitko.primary .button-image, .tlacitko.active .button-image {background-color: var(--white) !important;}
.tlacitko.secondary .button-image {background-color: var(--blueHover)}
.tlacitko.secondary:disabled .button-image, .tlacitko.secondary:disabled:hover .button-image {background-color: var(--gray)}
.tlacitko.danger .button-image {background-color: var(--redHover)}
.tlacitko.secondary:hover .button-image, .button-help:hover .icon-help, .button-help:focus .icon-help {background-color: var(--blueHover)}

.tlacitko.navigation .button-image {background-color: var(--black)}

.button-help {
  border-radius: 50%;
  padding: 2px;
}

.button-help .icon-help {
  width: 21px;
  height: 21px;
  background: var(--blueHover);
  -webkit-mask-image: url('https://www.umimeto.org/asset/global/img/icons-umime/icon-help.svg');
  mask-image: url('https://www.umimeto.org/asset/global/img/icons-umime/icon-help.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

/******************* LABELY -- deprecated (TK 2023-10-29) ********************************/

/* .label{ 
  display:inline-block;
  color: var(--gray);
  border-radius:6px;
}
*/

.label.big{  
  margin:5px;
  font-size: 18px;
  padding: 7px 20px;
}

.label.medium{
  padding: 0 0px;
  line-height: 26px;
  font-size: 16px;
  margin:0px;
}

.label.small{
  padding: 0 0px;
  line-height: 20px;
  font-size: 14px;
  margin:0px;
}

.label.black{ color: var(--black); }
.label.green{ color: var(--green); }
.label.blue{ color: var(--blue); }
.label.red{ color: var(--red); }
.label.violet{ color:var(--violet); }
.label.orange{ color: var(--orange); }
.label.yellow{ color: var(--yellow); }
.label.gray{ color: var(--gray); }


.label.info{ color: var(--blue); }
.label.warning{ color: var(--orange); }
.label.success{ color: var(--green); }
.label.danger{ color: var(--red); }

.label.fill{
	color: white; 
  /* padding: 0 10px;	 */
}

.label.info.fill{ background-color: var(--blue); }
.label.warning.fill{ background-color: var(--orange); }
.label.success.fill{ background-color: var(--green);  }
.label.danger.fill{ background-color: var(--red);  } 

/********************************** BANNER **********************************/
.banner{    
  display: none;
  background-color: var(--red);
  color:white;
  font-size: 16px;
  text-align: center;
  line-height: 2.0em;  
  width: 100%; 
}

.banner.blue{
  background-color: var(--blue);  
}

.banner.orange{
  background-color: var(--orange);  
}

.banner a{
  color: white;  
  text-decoration: underline;
}

.banner a:hover{
  color: #C0392B;
  text-decoration: underline;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                not supported by any browser */
}


/********************** MOBILNI VERZE *****************************/

@media screen and (max-width: 550px) {

  h1{ 
    font-size: 26px;   
    margin-top: 20px;
    margin-bottom: 20px;
  }

  h2{ 
    margin-top: 20px;    
  }

  h3{     
    margin-top: 20px;    
  }

}