/********************************** legacy MESSAGES, use web component! ************************************/

.message{
  border-radius: var(--unit);      
  padding: 0;
  font-size: 16px;
  display: flex;  
  align-items: stretch;    
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  background: white;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: calc(var(--unit) * 3);
}
.content-box .message, .secondary-box .message, .exercises .message {margin-left: 0; margin-right: 0;}
.message span {font-weight: 500;}
.message > div:first-of-type {padding: 11px 13px; align-items: center; display: flex;}
.message > div:nth-of-type(2) {padding: calc(var(--unit) * 2); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; flex-grow: 1;}
.message img {width: 30px; height: 30px;}

/* closing button */
.message .message-dismiss {
  align-self: flex-start;
  padding: 10px 14px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
}
.message .message-dismiss:hover {opacity: 1;}

/* kompaktní message */
.message.compact > div:first-of-type {padding: 5px 6px;}
.message.compact > div:nth-of-type(2) {padding: calc(var(--unit)*1.5) var(--unit);}
.message.compact img {width: 25px; height: 25px;}

@container (width < 400px){
  .message > div:first-of-type {padding: var(--unit);}
  .message > div:nth-of-type(2) {padding: var(--unit);}
}

.message.success{
  border: 1px solid var(--green);
  color: #1c8046ff;
}
.message.success div:first-of-type {
  background-color: var(--green);
}

.message.error{
  border: 1px solid var(--red);
  color: #992d22ff;  
}
.message.error > div:first-of-type {
  background-color: var(--red);
}

.message.warning, .message.bulb{
  border: 1px solid var(--orange);  
  color: #8c4c12;   
}
.message.warning > div:first-of-type, .message.bulb > div:first-of-type {
  background-color: var(--orange);
}

.message.info{
  border: 1px solid var(--blue);
  color: #1a4866;
}
.message.info > div:first-of-type {background-color: var(--blue);}

.message.help{
  border: 1px solid var(--yellow);  
  background-color: var(--faintYellow);    
  /* opacity: 0.9;   */
}

.message.green{
  border: 1px solid var(--green);
  background-color: var(--faintGreen);
  color: #46AD78;
}

.message.red{
  border: 1px solid var(--red);
  background-color: var(--faintRed);
  color: #C03F54;
  color: var(--redHover);
}

.message.orange{
  border: 1px solid var(--orange);  
  background-color: var(--faintOrange);  
  color: #b8651b; 
  justify-content: flex-start;  
}

.message.blue{
  border: 1px solid var(--blue);  
  background-color: #d4f3f5;
  color: var(--darkBlue);  
  justify-content: flex-start;  
}


/* ZAROVKA */
.message.blue img,.message.orange img{
  padding-bottom:5px;
  opacity:0.9; 
  height:30px; 
  width: auto;
  margin:0px;
  margin-right:20px;    
}

/******************* TABLE FORM ********************************/
/* use grid */

#content table.form td.left-column{  
  width:40%;
  padding:2px;
  padding-right: 15px;
  text-align: right;
}

/******************* STEPS ********************************/

#content .step{  
  color: var(--black);
  font-size: 18px;
  line-height: 1.6em; 
  margin: 0px; 
  font-weight: 400;  
}

#content .sipka{
  font-size: 20px;
  margin-right: 10px;
  color: var(--lightGrayHover);
  display: inline-block;
  vertical-align: middle;  
}

#content .step.selected{
  font-weight: bold;  
}

#content .step.faded{  
  color: var(--grayHover);
}

/******************* CLOSE CONTENT BUTTON ********************************/
.close-button {width: 30px; height: 30px; float: right; display: block; background: url("https://www.umimeto.org/asset/global/img/icons/x-cropped.svg") no-repeat center center; cursor: pointer; background-size: 70%; border-radius: calc(var(--unit) / 2);}
.close-button:hover {background-color: var(--lightGray);}


/******************* SEGMENT CONTROL ********************************/
.segment-vertical-layout {display: grid; grid-template-columns: 2fr 1fr; min-width: 305px; gap: var(--unit); align-items: center;}
select.select-segment {flex-grow: 1; padding: 4px 10px;}

@media (max-width: 550px) {select.select-segment {padding: 6px 16px; } .filter-by-grade {width: min-content; justify-content: flex-start !important;} .sm-jc-center {justify-content: center !important;}}

#content .segmentWrapper{
  display: flex;
  flex-direction: row;
  gap: calc(var(--unit) * 0.5);
  align-items: center;
}

#content .segmentWrapper > span {display: flex; gap: 2px;}

#content .segment-classes .segmentWrapper{
  align-items: stretch;
  gap: 2px;
}

#content .segmentWrapper .segment{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--black);
  background-color: var(--lightGray);
  border: 1px solid var(--lightGrayHover);
  gap: 4px;
}

#content .segment.passive{  
  color: var(--gray);
}

#content .segment.selected, #content .segment.selected:hover {  
  background-color: var(--black);  
  font-weight: 600;
  color: white; 
  border: 1px solid var(--blackHover);
}

#content .segment:hover{
  background-color: var(--lightGrayHover);  
  color: var(--black);
  border-color: var(--gray);
  text-decoration: none;
}

#content .segmentWrapper .dropdown-content{
  min-width: auto;
  border-radius: 6px;
  overflow: hidden;
  border:1px solid var(--lightGrayHover);
}

#content .segment-control{
  display: inline-flex;   
  align-items: center;  
  justify-content: center;
  flex-wrap:wrap;

  color:#2c3e50;
  font-size: 16px;
  line-height: 1.6em; 
  margin: 20px 0px;
}

#content .segment-button{  
  display: inline-block;
  color: var(--blue);
  color: var(--grayHover);
  background-color: var(--lightGray);
  padding: 2px 10px;
  border-bottom:1px solid var(--lightGray);
}
#content .segment-button:hover{
  color:white;
  background-color: var(--blue);
}
#content .segment-button.borderLeft{
  border-left:1px solid var(--lightGray);
}
#content .segment-button.selected{
  color:white;
  background-color: var(--blue);
}

/********************* EXERCISE BUTTON ********************************/

#content .exercise-button{    
  display: inline-flex;                 
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  font-size: 16px;
  margin-right: 45px;
  margin-bottom: 30px;  
  text-align: center;
  width: 95px;
  color: var(--black);
}

#content .exercise-button img{  
  height: 65px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;  
  margin-bottom: 15px;
  padding:5px;
  background-color: white;
}

#content .exercise-button:hover img{ 
  opacity: 0.8;  
}

#content .exercise-button.small{    
  margin-right: 10px;  
  margin-bottom: 5px;  
}

#content .exercise-button.small img{
  height: 60px;
  margin-bottom: 10px;
}

/********************* USER BUTTON ********************************/

#content .user-button{      
  display: flex;                 
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex: 1;
  font-size: 14px;  
  margin-bottom: 0px;
  padding-bottom: 5px;    
  text-align: center;
  color: var(--black);
  flex-shrink: 0;
  flex-grow: 0;
}

#content .user-button:hover {text-decoration: none;}

#content .user-button img{  
  height: 50px;
  margin-bottom: 5px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
  border-radius: 10px;  
}

#content .user-button:hover img{ 
  opacity: 0.8;  
}

/********************* LEARNING ITEM MAP ********************************/
/* obsolete */

img.badge{
  height: 24px;  
  margin:2px 5px;
}

/********************* THERMO METERS ********************************/

#content .meter{
  background-color: var(--lightGray);
  height: 15px;
  border-radius: 10px;  
  overflow: hidden;
  text-align: left;
  width: 100%;
}

#content .meter.big{  
  width: 100%;
}

#content .meter.small
{
  width: 160px;
  border-radius: 3px;  
}

.meter-small-with-overflow {
  background-color: var(--lightGray);
  height: 15px;
  width: 160px;
  border-radius: 3px;
  overflow: hidden;
  text-align: left;
}

#content .meter-fill{
  height: 100%; 
  display: inline-block;
}

#content .meter-fill.red{
  background-color: var(--red);
}
#content .meter-fill.blue{
  background-color: var(--blue);
}
#content .meter-fill.green{
  background-color: var(--green);
}
#content .meter-fill.yellow{
  background-color: var(--yellow);
}

#content .meter-fill.blue2{ background-color: #1296e3; }
#content .meter-fill.blue3{ background-color: #df56fb; }
#content .meter-fill.blue4{ background-color: #a29afb; }

/********************* BAR PLOT ********************************/

#content .bar-plot{
  display: flex;
  justify-content: flex-start;
  align-content:center;
  height: 200px;
  gap: 4px;  
}

#content .bar-plot.small{
  height: 100px;
}

#content .bar-heading{
  text-align: center;
  padding:5px 0px;
}

#content .bar-legend{
  display: flex;
  justify-content: space-between;
  align-content:center;
  padding:5px 0px;
}

#content .bar-heading p, #content .bar-legend p{
  margin:0px;
}
  
#content .bar{  
  display: inline-flex;
  justify-content: flex-start;
  align-items:flex-end;
  width:21px;
  height:100%;
  border-radius: 3px;  
  overflow: hidden;  
}
#content .bar.thin{  
  width:8px;     
}
#content .bar.fat{  
  width:200px;     
}
#content .bar.fat h1{  
  margin:0px;
  color: white;
  text-align: center;
}
#content .bar.gray{  
  background-color: #ecf0f1;  
  background-color: var(--lightGray);
}
#content .bar-fill{  
  border-radius: 3px;  
  width:100%;
  height: 0px;
}

#content .bar-fill.blue{
  background-color: var(--blue);
}
#content .bar-fill.green{
  background-color: var(--green);
}
#content .bar-fill.red{
  background-color: var(--red);
}
#content .bar-fill.yellow{
  background-color: var(--yellow);
}
#content .bar-fill.lightblue{
  background-color: var(--blue);
}

/* ODSTINY MODRE + FIALOVE */
#content .bar-fill.blue1{ background-color: #16a6fc; }
#content .bar-fill.blue2{ background-color: #1296e3; }
#content .bar-fill.blue3{ background-color: #df56fb; }
#content .bar-fill.blue4{ background-color: #a29afb; }

/******************* DOTS ********************************/
#content .dot{
  border-radius:20px; 
  display:inline-block; 
  margin:0px 5px;
  vertical-align:middle; 
}
#content .dot.small{
  width:5px; 
  height:5px;   
}
#content .dot.medium{
  width:10px; 
  height:10px; 
}
#content .dot.large{
  width:15px; 
  height:15px;   
}
#content .dot.mega{
  width:20px; 
  height:20px; 
}
#content .dot.white{
  background-color: white;
}
#content .dot.green{
  background-color: var(--green);
}
#content .dot.orange{
  background-color: var(--orange);
}
#content .dot.red{
  background-color: var(--red);
}
#content .dot.blue{
  background-color: var(--blue);
}
#content .dot.gray{
  background-color: #bcc3c7;
  background-color: var(--gray);
}
#content .dot.selected{
  border:2px solid var(--grayHover);
}


/******************* SQUARES ********************************/
#content .square{  
  color:white;
  border-radius:3px;   
  margin:0px 1px;  
  vertical-align:middle;
  display: inline-flex;                 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
}
#content .square.tiny{
  font-size: 16px;
  width:15px; 
  height:15px;
}
#content .square.small{
  font-size: 16px;
  width:20px; 
  height:20px;
}
#content .square.medium{
  font-size: 16px;
  width:25px; 
  height:25px; 
}
#content .square.large{
  font-size: 20px;
  width:40px; 
  height:35px; 
}
#content .square.medium.wide{ 
  width:auto;
  height:25px; 
  padding:0px 5px;
}
#content .square.large.wide{ 
  width:auto;
  font-size: 20px;  
  padding:0px 5px;
}
#content .square.lightGray{  
  background-color: var(--lightGray);
}
#content .square.gray{  
  background-color: var(--gray);
}
#content .square.green{
  background-color: var(--green);
}
#content .square.orange{
  background-color: var(--orange);
}
#content .square.yellow{
  background-color: var(--yellow);
}
#content .square.red{
  background-color: var(--red);
}
#content .square.blue{
  background-color: var(--blue);
}
#content .square.violet{
  background-color: var(--violet);
}

/******************* CIRCLE ********************************/

#content .circle{    
  color:white; 
  text-align:center;     
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.0); 
}  

#content .circle.large{    
  width:52px; 
  height:52px; 
  font-size:30px; 
  line-height:50px;   
  border-radius:50px;   
}

#content .circle.green{    
  border-bottom:1px solid #00b861;
  background-color:#00d872; 
  margin-right:20px;
}

#content .circle.red{    
  border-bottom:1px solid var(--redHover);
  background-color: var(--red); 
  margin-right:20px;
}





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


@media screen and (max-width: 550px) {
  #content .exercise-button{
    margin-right: 15px;
    margin-bottom: 15px;
    width: 80px;
  }

  #content .exercise-button img{  
    height: 70px;
  }

  #content .segment-button{
    padding: 5px 5px;    
  }

  #content .bar.thin{
    width:3px;
  }

  #content .meter.small,
  .meter-small-with-overflow {
    max-width: 130px;    
  }

  .exercise-item{  
    width: 100%;
    height:100%;
    border-radius: 6px;
  }
}

/* TABS -- replace by switch-button */
/********************* TABS ********************************/
#content .tabs{            
  display:inline-flex;
  justify-content: flex-start;
  align-items: center; 
  flex-wrap: wrap;
  gap: 7px; 
}

#content .tabs input {appearance: none; display: none;}

#content .tabs a, #content .tabs input+label {
  display: inline-block;    
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
  color: var(--black); 
  background-color: var(--lightGray);
  border: 1px solid var(--lightGrayHover);
  white-space: nowrap;
  border-radius: 5px;
  cursor: pointer;
}

#content .tabs.narrower a {
  padding: 7px;
}

#content .tabs.small a, #content .tabs.small input+label {    
  padding: 2px 8px;
  line-height: 20px;
  /* font-size: 14px; */
}

#content .tabs a:hover, #content .tabs input:hover+label {  
  background: var(--lightGrayHover);
  border-color: var(--gray);
}

#content .tabs.nowrap {
  flex-wrap: nowrap;
}

#content .tabs a.selected, #content .tabs input:checked+label{  
  color: white;
  background: var(--black);
  border: 1px solid var(--blackHover);
  font-weight: 700;
}

/******************* RECS BOX (NEW 2022) ********************************/
/* replace with pngPreview (without preview)  */
#content .recs-box{    
  background-color: #f5f6f7;     
  border:1px solid var(--lightGrayHover);    
  border-radius:6px;    
  width: 260px;  
  padding:3px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;  

  display: inline-flex;  
  justify-content: flex-start; 
  align-items: flex-start;  
  align-items: center;      
}

#content .recs-box:hover{
  text-decoration: none;   
  border:1px solid var(--blue);
}

#content .recs-box img{
  height: 35px;  
  margin:5px 5px;  
  border-radius: 10px;
}

#content .recs-box > span{
  font-weight: normal;  
  font-size: 14px;
  color:var(--black);
  text-align:left; 
  flex-grow:1;  
  padding-left: 5px;
}
#content .recs-box gray{
  font-size: 13px;
  color:var(--grayHover);
}
#content .recs-box strong{
  font-size: 15px;
  line-height: 1.3em;
  display: block;
}

#content .recs-box p{
  font-size: 14px;
  margin:0px;  
  color:var(--black);
}