/* large content elements + tables */
#content{
  background-color: var(--lightGray);  
  overflow: visible;
  padding-top: 1px;
}

#content .emoji {
  font-family: "Noto Color Emoji";
}

.content-stripe{
  max-width: 1050px;
  margin: 0px auto;
  padding-top: 20px;
  padding-bottom: 220px;
  min-width: 300px;
}

/* max widths of content-stripe */
.mw-1100 {max-width: 1100px;}
.mw-1010 {max-width: 1010px;}
.mw-950 {max-width: 950px;}
.mw-900 {max-width: 900px;}
.mw-650 {max-width: 650px;}
.mw-550 {max-width: 550px;}

/* illustrations above footer */
.illustration-bg-mascot-1 {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-mascot-ice.svg') right 30px bottom -15px / 220px no-repeat;}
.illustration-bg-mascot-2 {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-mascot-book.svg') right 30px bottom 10px / 175px no-repeat;}
.illustration-bg-mascot-3 {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-mascot-plane.svg') right 30px bottom -10px / 230px no-repeat;}
.illustration-bg-mascot-4 {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-mascot-telescope.svg') right 30px bottom -10px / 140px no-repeat;}
.illustration-bg-book {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-book.svg') right 30px bottom -8px / 220px no-repeat; padding-bottom: 170px;}
.illustration-bg-book-edit {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-book-edit.svg') right 30px bottom -8px / 220px no-repeat; padding-bottom: 170px;}
.illustration-bg-pencils {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-pencils.svg') right 30px bottom 0px / 240px no-repeat;}

.illustration-bg-biology {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-biology.svg') right 30px bottom 0px / 200px no-repeat;}
.illustration-bg-charts {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-charts.svg') right 30px bottom 0px / 230px no-repeat;}
.illustration-bg-map {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-map.svg') right 30px bottom 0px / 240px no-repeat;}
.illustration-bg-maths {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-maths.svg') right 30px bottom 0px / 235px no-repeat;}
.illustration-bg-science {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-science.svg') right 30px bottom 0px / 260px no-repeat;}
.illustration-bg-sigil {background: url('https://www.umimeto.org/asset/global/img/footer-images/footer-sigil.svg') right 30px bottom 0px / 145px no-repeat;}

.bg-bottom-center {background-position: bottom center;}

.content-box{
  min-width: 300px;
  padding-top: 20px;
  padding-left:30px;
  padding-right:30px;
  padding-bottom: 20px;
  margin:0px 5px;
  margin-bottom: 20px;
  background-color: white;
  font-weight: 400;  
  text-align: left;
  border: 1px solid var(--lightGrayHover);
  border-radius: 8px;    
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.1);
  position: relative;
}

.content-box.wide30{
  width: 28%;
  min-width: 300px;
  padding-bottom: 20px;
}

.content-box.wide50{
  width: 50%;
  min-width: 350px;
  padding-bottom: 40px;
}

.content-box.wide60{
  width: 60%;
  min-width: 350px;
  padding-bottom: 40px;
}

.content-box.wide70{
  width: 70%;
  min-width: 350px;
  padding-bottom: 40px;
}


.content-box.narrow {
	max-width: 600px; 
	margin-left: auto; 
	margin-right: auto;	
}

.normalize-width {max-width: 1000px; width: 100%; align-self: center; justify-self: center; margin-left: auto; margin-right: auto;}

/* to remove */
.space{
  height: 60px;
  display: block;
}

#content .flash-messages {
  max-width: 1050px;
  margin: 0 auto;
  padding-top: 20px;
  min-width: 300px;
}

#content .flash-messages .message {
  margin-bottom: var(--unit);
}

/* flash messages render above the stripe, so mirror the stripe's max width onto them */
#content:has(.content-stripe.mw-1100) .flash-messages {max-width: 1100px;}
#content:has(.content-stripe.mw-1010) .flash-messages {max-width: 1010px;}
#content:has(.content-stripe.mw-950) .flash-messages {max-width: 950px;}
#content:has(.content-stripe.mw-900) .flash-messages {max-width: 900px;}
#content:has(.content-stripe.mw-650) .flash-messages {max-width: 650px;}
#content:has(.content-stripe.mw-550) .flash-messages {max-width: 550px;}


/********************* CONTENT BOX TITLE SMALL ********************************/
#content .content-box-title-small{
  margin-top: -10px;
  margin-left:-30px; 
  margin-right:-30px; 
  margin-bottom: 20px;
  margin-bottom: 10px;
  border-top-left-radius: 6px; 
  border-top-right-radius: 6px;   
  border-bottom: 1px solid var(--lightGray);  
  padding:10px 30px;
}

#content .content-box-title-small h2, #content .content-box-title-small h3{
  margin:0px;
}

/* mobile content */
@media screen and (max-width: 550px) {
  .content-box{
    padding-top:10px;
    padding-left:15px;
    padding-right:15px;
    padding-bottom:10px;  
    margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; border-radius: 0; 
  }

  #content .content-box-title{
    margin-top: -10px;
    margin-left: -10px; 
    margin-right:-10px; 
    padding:10px 10px;
  }

  #content .content-box-title-small{  
    margin-left: -20px; 
    margin-right: 0px; 
  }

  .content-color-box{
    padding: 10px;
    margin: 10px 0px;
  }
  	
  #content .dropdown-content.right {  	
    left: -60px;    
  }
}


/********************************** PATICKA ***********************************/

footer{
  width: 100%;
  border-top: 1px solid #DFDFE1;
  padding-bottom: 50px;
  font-size: 16px;
}

.footer-content{
  margin:0px auto;
  max-width: 1200px;
  color:#34495e;
  color:var(--black);
  
  display: flex;  
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;  
}

.footer-box{
  margin:20px 10px;    
  padding: 10px;
  width:250px;          
}

.footer-box a{
  margin: 13px 0px;
  display: block;
}

.footer-box h3{
  font-size: 18px;  
}

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

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

  .footer-box{
    width:160px;         
  }

}





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

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

table.wide{
  width: 100%;
}

td,th{
  line-height: 1.2em;
  /* margin-top: 5px; */
  /* not applicable in display: table */
  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{
  background-color: var(--faintGray);
}

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;
}

/* mobile flex table */

@media (max-width: 550px) {
  .table-mobile-flex thead {
    display: none;
  }

  .table-mobile-flex tbody tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--gray);
    padding-bottom: var(--unit);
    margin-bottom: var(--unit);
    justify-content: stretch;
  }

  .table-mobile-flex tbody tr:hover {
    background: var(--faintGray);
  }

  .table-mobile-flex tbody tr td {
    border: none;
    margin-top: 0;
    padding-inline: var(--unit);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
}

/********************* DIVIDER ********************************/
#content .divider{
  display: block;
  height: 0px;  
  margin:15px 0px;
  border-bottom: 1px solid #eeeeee;  
}

#content .space{
  margin:20px 0px;
}

/********************************** IMAGE SIZES: DEPRECATED -- use gap or generalized height/margin classes ************************************/

#content img.height20{ height: 20px; }
#content img.height30{ height: 30px; }
#content img.height40{ height: 40px; }
#content img.height50{ height: 50px; }
#content img.height70{ height: 70px; }
#content img.height150{ height: 150px; }

#content img.shadow{
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#content img.margin10{ margin: 10px; }
#content img.rmargin10{ margin-right: 10px; }
#content img.lmargin10{ margin-left: 10px; }
#content img.rmargin20{ margin-right: 20px; }
#content img.rmargin40{ margin-right: 40px; }

#content img.round20{ border-radius: 20px; }
#content img.round{ border-radius: 150px; }