/******************* GRID MEDAL BASED TREE ********************************/
.grid-container {  
  display: grid;
  grid-gap: 0px;  
  padding: 0px;
  grid-template-columns: auto repeat(3, 130px);
  grid-auto-rows: minmax(35px, auto)
}

.grid-item {
  border-bottom: 1px dotted var(--lightGrayHover);
  padding: 3px;
}

.grid-item.wide{
  grid-column: 1 / span 4;
  display: flex;
  align-items: center;
}

.grid-item.gray{
  background-color: #f7f7f7;
}

.grid-item.item0 {
  grid-column: 1 / span 1;  
  display: inline-flex;  
  align-items: center;
}
.grid-item.whiteSpace {
  display: none;
}    
.grid-item.item1 {
  grid-column: 2 / span 1; display: flex; justify-content: center;
}
.grid-item.item2 {
  grid-column: 3 / span 1; display: flex; justify-content: center;
}
.grid-item.item3 {
  grid-column: 4 / span 1; display: flex; justify-content: center;
}

.grid-item.whiteSpace{
  display: none;
}

.grid-item.level-grid-span {grid-column: span 3; align-items: center; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 5px;}

@media (width > 700px){
  .grid-item.level0{ padding-left: 5px;} 
  .grid-item.level1{ padding-left: 40px;} 
  .grid-item.level2{ padding-left: 80px;} 
  .grid-item.level3{ padding-left: 120px;} 
  .grid-item.level4{ padding-left: 160px;}
  }

@media (width < 700px){
  .grid-item.level2{ padding-left: 20px;} 
  .grid-item.level3{ padding-left: 40px;} 
  .grid-item.level4{ padding-left: 60px;}
  }

@media screen and (max-width: 550px) {
  .grid-item.item1, .grid-item.item2, .grid-item.item3 {display: flex; border: none;}
  
  .grid-container {  
    grid-template-columns: 0 repeat(3, 1fr);
  }
  .grid-item.wide {
    grid-column: 1 / span 4;
    border-top: 1px solid var(--lightGray);
    border-bottom: none;
    
  }  
  .grid-item.item0 {
    grid-column: 1 / span 4;  
    /* border-top: 1px solid var(--lightGray); */
    border-bottom: none;
    padding-bottom: calc(var(--unit) * 0.75);  
    
  }
  .grid-item.whiteSpace {    
    grid-column: 1;
    padding: 10px 5px;    
    display: inline-block;
    border-bottom: 1px solid white;
  }
  .grid-item.item1 {    
    grid-column: 2;
    /*border-bottom: 1px dotted #dfdfe1;*/
    padding: 10px 5px;
    padding-top:0px;        
    padding-bottom:10px; /* nove, driv 20 px */
    justify-content: flex-end;
  }
  .grid-item.item2 {    
    grid-column: 3;
    /*border-bottom: 1px dotted #dfdfe1;*/
    padding: 10px 5px;
    padding-top:0px;
    padding-bottom:10px; /* nove, driv 20 px */
    
  }
  .grid-item.item3 {  
    grid-column: 4;
    /*border-bottom: 1px dotted #dfdfe1;*/
    padding: 10px 5px;
    padding-top:0px;
    padding-bottom:10px; /* nove, driv 20 px */
    justify-content: flex-start;
  }

  .grid-item.level-grid-span {grid-column: span 4; justify-content: center;}
}

/******************* DROPDOWNS ********************************/

#content .tlacitko .tick{
  display: inline-block;  
  width:10px;  
}

/******************* OBAL NA MEDAILE ********************************/

#content medal.large img{
  width: 30px;  
  height: auto;
}

/* dash-topic */
/********************** TOPIC RESPONSIVE LAYOUT -- TREE *******************/

:root {--tree-line-2: 15px; --anchor-line-2: 20px;}
.topic-tree-2 li, .topic-tree-2 ul {list-style-type: none; padding: 0; margin: 0;}
.topic-tree-2, .topic-tree-2 ul {display: flex; flex-direction: column; gap: 2px; position: relative;}
.topic-tree-2 li {display: flex; position: relative; flex-direction: row; justify-content: flex-start; gap: 4px;}
/* segment stromu */
.topic-tree-2 ul {padding-left: var(--tree-line-2); margin-left: 12px;}
/* linie vlevo, vespod, zaoblení */
.topic-tree-2 ul:before {display: block; content: ''; border-left: 2px solid var(--gray); border-bottom: 2px solid var(--gray); border-bottom-left-radius: var(--unit); position: absolute; top: calc(var(--anchor-line-2) * -0.75 - 2px); left: 0; width: var(--tree-line-2); height: 100%; margin-bottom: 25px;}

/* odkazy a čáry před */
.topic-tree-2 a, .topic-tree-2 span {min-height: calc(var(--anchor-line-2) * 1.5); display: inline-flex; align-items: center; position: relative; padding: 3px 6px; background: white; border-radius: var(--unit);}
.topic-tree-2 a:last-child, .topic-tree-2 > a:first-child {margin-right: auto;}
.topic-tree-2 a:hover, a.pill-anchor:hover {text-decoration: none; background-color: var(--faintBlue);}

.topic-tree-2 li:not(:last-child) > a:first-child:before,
.topic-tree-2 li:not(:last-child) > span:first-of-type:before {content:''; display: block; width: var(--tree-line-2); height: 2px; background: var(--gray); position: absolute; left: calc(var(--tree-line-2) * -1);}

/* na mobilu skryju siblings listu */
@media (max-width: 550px) {
  .topic-tree-2 li.desktop-only {display: none;}
  /* pokud je li poslední viditelný (žádný následující sourozenec není bez .desktop-only), skryju vodorovnou čáru */
  .topic-tree-2 li:not(.desktop-only):not(:has(~ li:not(.desktop-only))) > a:first-child:before,
  .topic-tree-2 li:not(.desktop-only):not(:has(~ li:not(.desktop-only))) > span:first-of-type:before {display: none;}
}

.topic-tree-2 li span {font-weight: 600; background: var(--lightGray);}

.topic-tree-2 ul.no-line:before {top: calc(var(--anchor-line-2) * -0.75 + 1px); height: calc(var(--anchor-line-2) * 1.5);}
.topic-tree-2 ul.no-line > li > a.above:before, .topic-tree-2 > ul.no-line > li > span:first-child:before {display: none;}

/* před prvním linkem není vodorovná čára */
.topic-tree-2 > a:first-child:before {display: none;}
.topic-tree-2 .above {z-index: 8;} /* z-index pak vypisovat natvrdo při výpisu stromu */

.topic-tree-2 a.inactive {color: var(--gray);}
.topic-tree-2 a.inactive:hover {background: var(--lightGray);}

.topic-tree-2 > *:first-child > a:before {display: none !important}

/********************** TOPIC RESPONSIVE LAYOUT -- LAYOUT *******************/

#kotva-cviceni {display: flex; flex-direction: column; gap: 18px; container-type: inline-size;}
.rl-notices {max-width: 1300px; margin-left: auto; margin-right: auto; margin-top: calc(var(--unit) * 3);}
.rl-notices:empty {display: none;}

.rl-main {max-width: 1300px; padding-bottom: 150px; padding-left: 5px; padding-right: 5px; margin-top: 22px; margin-left: auto; margin-right: auto;}

.kc-grid {display: grid; grid-template-columns: 365px auto; grid-template-rows: repeat(auto-fill, minmax(0, auto)); column-gap: 18px;}

.rl-main > div:not(.exercises), .single-exercise {padding: 30px; border: 1px solid var(--lightGrayHover); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1); background: white;}
@media (max-width: 550px) {.rl-main > div:not(.exercises), .single-exercise {padding: calc(var(--unit) * 2);} .rl-main > .content {overflow-x: hidden;}}

.rl-main > .heading:has(.quick-exercise-btn):has(+ .content .rule-box) {
  padding-bottom: 15px;
}

.rl-main .heading > div:first-child {flex-wrap: nowrap; align-items: flex-start}
@media (max-width: 550px) {
  .rl-main {margin-top: calc(var(--unit) * 2);}
  .rl-main .heading > div {flex-wrap: wrap;}
}

.single-exercise .preview-box-png {margin-bottom: 5px;}

.content-box-title-a p {margin-bottom: 0;}
.content-box-title-a {margin-bottom: var(--unit);}
.rl-main .single-exercise {border-radius: var(--unit);}
.rl-main .single-exercise > h2:nth-of-type(1) {margin-top: calc(var(--unit) * 0.2);}
.rl-main .single-exercise > h2 {margin-bottom: calc(var(--unit) * 0.75);}
.rl-main .heading {order: 4; border-top-left-radius: var(--unit); border-top-right-radius: var(--unit);}
.tlacitko-smaller-padding {padding: 3px 6px !important;}

/* .rl-main .toggle-summary.hidden-summary {display: none;} */
.rl-main > .content {position: relative; order: 5; border-bottom-left-radius: var(--unit); border-bottom-right-radius: var(--unit);}
.rl-main > .sidebar {order: 1; grid-row: 1 / span 3; border-radius: var(--unit); display: flex; flex-direction: column; justify-content: flex-start; gap: calc(var(--unit) * 3);
  padding-left: calc(var(--unit)*3);
  padding-right: calc(var(--unit)*3);}

/* pak odstraň sidebar! */
.heading-light-gray, .filter-by-grade h3, .sidebar h3 {text-transform: uppercase; font-weight: 300; color: var(--grayHover);}
.rl-main .exercises {order: 6; border-radius: var(--unit); margin-top: 18px;}

/* skrytí summary */
.rl-main > .heading.hidden-summary {border-radius: var(--unit);}
.rl-main > .content.hidden-summary {display: none;}
.toggled-content-message {display: none;}

@media (min-width: 950px) {
.rl-main > .content:after {content: ''; position: absolute; top: -15px; left: 0; width: 100%; height: 15px; background: white;}
.rl-main > div.content {padding-top: 0;}
.tlacitko.show-only-lg {display: flex;}
.tlacitko.show-only-sm {display: none;}
}

@media (max-width: 950px) {
.tlacitko.show-only-lg {display: none;}
.tlacitko.show-only-sm {display: flex;}
.rl-main {display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, auto-fit);}
.rl-main .heading {order: 1;}
.rl-main .single-exercise {padding-left: calc(var(--unit) * 2); padding-right: calc(var(--unit) * 2);}
.rl-main div.sidebar {position: relative; order: 2;  grid-row: auto; padding-top: 0;}
.rl-main .sidebar:after {content: ''; position: absolute; top: -15px; left: 0; width: 100%; height: 15px; background: white;}
.rl-main div.content {order: 3; margin-top: 15px;}
.rl-main .toggled-content-message.hidden-summary {order: 6; margin-top: 15px; display: flex;}
.rl-main .toggled-content-message.no-summary {display: none;}
.rl-main .exercises {order: 7; margin-top: 15px;}

.rl-main {padding-left: 0px; padding-right: 0px;}
.rl-main > div, .single-exercise {border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important;}
}

@media (max-width: 550px) {
.narrow-hidden {display: none !important;}
}


/********************* EXERCISE ITEM BASED MAP for dash-exercise ********************************/

.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
}

.exercise-item{    
  width: 100%;
  height:100%;
  border-radius: 6px;
  gap:5px;
  display: inline-flex;
  flex-direction:row;  
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;  
  cursor:pointer;  
  padding: 5px 10px;  
  border: 1px solid #dfdfe1;
  font-size: 16px;
}

.exercise-item p{
  margin:0px;
}

.exercise-item.not-attempted{    
  color:var(--black);
  background-color: var(--lightGray);
}
.exercise-item.not-attempted:hover{
  color: var(--black);
  background-color: var(--lightGray);  
  text-decoration: none;
}

.exercise-item.attempted{    
  color: var(--black);  
  background-color: var(--lightGray);
}
.exercise-item.attempted:hover{
  color: var(--black);
  background-color: var(--lightGray);  
  text-decoration: none;
}


.exercise-item.solved{    
  color:white;        
  background-color: var(--black);
  border: var(--blackHover);
}
.exercise-item.solved:hover{  
  color:white;  
  background-color: var(--blackHover);  
  text-decoration: none;
}

.exercise-item span{
  background-color: transparent;      
}
.exercise-item span img{
  display:inline-block;
  height: 27px;  
}

.exercise-item.solved img{
  filter: drop-shadow(0px 0px 5px #3498db);
}

.exercise-item.solved.yellow-crystal img {
  filter: drop-shadow(0px 0px 5px #f1c40f);
}

/* module overview on dash-class */
.modules-class-overview td {padding: 4px;}
.modules-class-overview tr > td:first-child {padding-right: calc(var(--unit) * 2);}

.module-main-grade {
  background-color: var(--faintGray);
}
.module-main-grade td {
  font-weight: bold;
}
.module-not-main-grade td {
  font-weight: 300;
}


/* actionable preview box */
.actionable-previews {
  container-type: inline-size;
}

.qstart-remaining-800, .qstart-remaining-510 {display: none;}
@container (max-width: 800px) {
  .actionable-previews .flex-horizontal > span:nth-child(3) {display: none;}
  .qstart-remaining-full {display: none;}
  .qstart-remaining-800 {display: inline;}
  .qstart-remaining-510 {display: none;}
}
@container (max-width: 510px) {
  .actionable-previews .flex-horizontal > span:nth-child(2),
  .actionable-previews .flex-horizontal > span:nth-child(3) {display: none;}
  .qstart-remaining-800 {display: none;}
  .qstart-remaining-510 {display: inline;}
}


.preview-box-png-actionable {
  display: block;
  width: 250px;
  height: 150px;
  border-radius: var(--unit);
  border: 1px solid var(--lightGrayHover);
  overflow: hidden;
  background: white;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
  font-size: 15px;
}
.preview-box-png-actionable:hover {
  border: 1px solid var(--gray);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
}

.preview-box-png-actionable > img {
  width: 100%;
  object-fit: cover;
}

.preview-box-png-actionable > .upper-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  border-bottom: 1px solid var(--lightGrayHover);
  background: var(--faintGray);
}

.preview-box-png-actionable > .upper-bar img:first-of-type {
  width: 28px; height: auto;
}

.preview-box-png-actionable > .upper-bar > span {
  gap: 5px;
}
.preview-box-png-actionable > .upper-bar > span > span {
  padding-top: 3px; padding-bottom: 3px;
}

.preview-box-png-actionable, .preview-box-png-actionable:hover {
  color: var(--black);
  text-decoration: none;
}

.preview-box-png-actionable > .upper-bar medal {
  align-items: center;
  display: flex;
}