/* CSS Document */

body {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1em;
  padding: 0;
  margin: 0;
}

.p5 { padding: 0.2em; }
.p10 { padding: 0.4em; }
.pp10 { padding: 0.6em 0.4em 0.6em 0.4em; }

.m5 { margin: 0.2em; }
.m10 { margin: 0.4em; }
.m10t { margin: 0.6em 0.4em 0.9em 0.4em; }
.mm10 { margin: 0.6em 0.4em 0.6em 0.4em; }

.w30 { 
    max-width: 100%;
    width: 30%;
}
.w50 { 
    max-width: 100%;
    width: 50%;
}
.w90 { 
    width: 95%;
    min-width: 300px !important;
}
.lh16 {
  line-height: 1.6em !important;
  font-size: 1em;
}

.bit-bolder {
  font-weight: 700;
}

.pad-image {
  vertical-align: middle;
  padding-left: 0.2em;
}

.competition-done {
  font-style: italic;
}

.rounded {
    border: 1px solid #c5c5c5;
    border-radius: 5px;
}

a.dm-button {
    display: block;
    min-width: 400px;
    height: auto;
    text-align: center;
    text-decoration: none;
    color: #454545;
    background: #f6f6f6;
    line-height: normal;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: rgba(0, 0, 0, 0.14) 3px 3px 3px;
}

a.dm-button:hover {
  background: #E02020;
  border: solid 1px #c5c5c5;
  color: white;
  transition: 0.2s;
  box-shadow: rgba(0, 0, 0, 0.24) 5px 5px 5px;
}

a.dm-button:active {            /* When clicked */
  background: #801010;
}

div.content {           /* Top main div */
  width: auto;
  height: 100vh;        /* Full height */
  margin: 0;
  border: 0;
  padding: 0 0 2em 0;
}

div.full-width {        /* Used for headers */
  width: auto;
  padding: 0.3em 0.5em 0.3em 0.5em;
  margin: 0;
  border: solid 1px #c5c5c5;
  background: #f2f2f2;
}

div.buttons {           /* Place for the buttons */
  width: auto;
  height: calc( 100vh - 80px );     /* O 80 bodu mene nez vyska stranky */
  margin: 0;
  overflow-y: auto;
}

div.info-panel {                /* Panel pro kata nebo kumite */
    min-width: 400px;
    height: auto;
    text-decoration: none;
    color: #454545;
    background: #f6f6f6;
    line-height: 1.8;
    vertical-align: middle;
    box-shadow: rgba(0, 0, 0, 0.14) 3px 3px 3px;
}

div.info-panel a {
    height: auto;
    text-align: center;
    text-decoration: none;
    color: #454545;
    background: #fcfcfc;
    line-height: 2.2em; /* Vetsi radkovani, at se tlacitka neprekryvaji na mobilu */
    cursor: pointer;
    vertical-align: middle;
    border: solid 1px #c5c5c5;
    box-shadow: rgba(0, 0, 0, 0.14) 3px 3px 3px;
}

div.info-panel a:hover {
  background: #E02020;
  border: solid 1px #c5c5c5;
  color: white;
  transition: 0.2s;
  box-shadow: rgba(0, 0, 0, 0.24) 5px 5px 5px;
}

div.info-panel a:active {            /* When clicked */
  background: #801010;
}


h1, h2 {
    height: auto;
    text-decoration: none;
    color: #151515;
    line-height: normal;
    vertical-align: middle;
    margin: 0;
    width: auto;
}

.warning {
    height: auto;
    text-decoration: none;
    color: #E01010;
    line-height: normal;
    vertical-align: middle;
    margin: 0.8em 0.5em;
    font-size: 0.8em;
    width: auto;
}

p.info {
    height: auto;
    text-decoration: none;
    line-height: normal;
    vertical-align: middle;
    margin: 0.8em 0.5em;
    font-size: 0.8em;
    width: auto;
}

.copyright-NOT-USED {
    position: absolute;
    color: #151545;
    vertical-align: middle;
    bottom: 0em;
    right: 1.0em; 
    z-index: -100;
    background-color: #ffffff;
    font-size: 0.65em;
    padding: 0.3em;
}

.copyright-right-bottom
{
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    z-index: 200;
    text-align: right;
}
.copyright-right-bottom div
{
    margin: 0 2em 0 1em;
    background-color: white;
    float: right;
    font-size: 0.65em;
    padding: 0.3em;
}



div.full-width h1 {
    font-size: 1.4em;
}

div.full-width h2 {
    font-size: 1.2em;
    margin-top: 0.2em;
}

div.info-panel h1 {
    font-size: 1.1em;
    margin-bottom: 0.6em !important;
}


.hide-sm, .adopt-date {
      font-style: normal;
   }
   
.adopt-date {
  font-size: 0.9em;
}   

br.adopt-page-break {
  display: none;
}
   

   
/* Tabs */
.dm-tabs {
  /* width: 600px; */
  /* background-color: white; */
  width: auto;
  padding: 0;
  margin: 0;
  border: 0;
}

.dm-tabs br {
  line-height: 0.01em;
  height: 0px;
}

ul#tabs-nav {
  display: block;
  height: 2.5em;
  list-style: none;
  /* padding: 5px; */
  /* overflow: auto; */
  background-color: #f2f2f2;
  padding: 0.3em 0.5em 0.3em 0.5em;
  margin: 0;
}
ul#tabs-nav li {
  display: block;
  float: left;
  font-weight: bold;
  margin-right: 0.4em;
  padding: 0.5em 0.6em;
 /* border-radius: 5px 5px 5px 5px; */
  border: 1px solid #d5d5de;
  /* border-bottom: none;*/
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.14) 2px 2px 2px;
}
ul#tabs-nav li a
 {
  text-decoration: none;
  color: #454545;
}

ul#tabs-nav li.active,
ul#tabs-nav li.active a {
  background-color: #E02020;
  color: #FFFFFF !important;
}

ul#tabs-nav li:hover,
ul#tabs-nav li:hover a {
  background-color: #E02020;
  color: #FFFFFF !important;
}

.tab-content {
  /* padding: 10px; */
  /* border: 5px solid #09F; */
  display: block;
  height: calc( 100vh - 100px );     /* O 80 bodu mene nez vyska stranky */
  overflow-y: auto;
}

@media (max-width: 1400px) {    /* Mensi obrazovka */              
   .hide-sm {
      display: none;
   }
}
@media (max-width: 1000px) {    /* Mensi obrazovka */              
  .w50 { 
     width: 80%; 
   }
  
}
   
@media (max-width: 480px) {
   .adopt-date {
      font-size: 0.8em;
   }
   
   br.adopt-page-break {
     display: inline;
   }
   
   .w30, .w50 { 
     width: 90% !important; 
     min-width: 200px !important;
   }
   
  div.buttons {           /* Place for the buttons */
    height: calc( 100vh - 100px );     /* O 100 bodu mene nez vyska stranky (na mobilu se zalamuji texty v hlavicce */
  }

  .tab-content {
    height: calc( 100vh - 140px );     /* O 140 bodu mene nez vyska stranky */
  }  
  
  .lh16 {
    font-size: 0.9em;
  }  
}

img.maly-pohar {
  height: 0.9em;
  margin: 0 0.6em 0 0.6em;
}

/* Tabulka Semifinale / Finale */

.info-panel table {
  width: 100%;
}
.info-panel th {
  font-size: 1em;
  text-align: left;
  font-weight: 600; 
}

.info-panel td.right {
  text-align: right;
}

.info-panel td.center, .info-panel th.center {
  text-align: center;
}



/* Pavouk */

div.spider {
  width: auto;
  height: calc( 100vh - 100px );     /* 100vh - 80px */
  margin: 0;
  overflow-y: auto;
  position: relative;
} 

.verticalLine {
  border-left: 1px solid #1e1e1e;
  width: 0.1em;
  position: absolute;
}

.horizontalLine {
  border-top: 1px solid #1e1e1e;
  height: 0.1em;
  position: absolute;
}

.spiderCell {
  color: #1e1e1e;
  font-size: 0.8em;
  position: absolute;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .spiderCell {
    font-size: 0.6em;
  }
  
}   

.highligtedName {
  font-weight: bold;
}

th.teamWidth {
  width: 40%;
}


div.flags {
  position: relative;
  float: right;
  margin-top: 4px;
}

div.flags img {
  margin: 2px;
}

/* 31.7.2025, tlacitko pro instalaci aplikace */
.installButton {
    min-width: 200px;
    text-align: center;
    text-decoration: none;
    color: #454545;
    background: #f6e6cf;
    line-height: normal;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: rgba(0, 0, 0, 0.14) 3px 3px 3px;
    padding: 8px;
    margin: 10px;
    font-weight: 600;
    border: 1px solid #050505;
    border-radius: 5px;    
}

/* 31.7.2025, added back button */
.backButton img, .full-width h1 a img {
  width: 16px;
  margin-right: 10px;
  padding-top: 10px;
}
