:root
{
     --cr: #000;
     --bi: #FFF;

     /* pro explicitní záležitost: repertoár - autoři */
     --domaci: conic-gradient(from 180deg, #fff 0deg, #039 180deg, #f30 225deg);
     --zahranicni: conic-gradient(from 270deg, #039 0deg, #f90 360deg);

     --fs-normal: 25px;
     --fs-xs: 1.5ch;
     --fs-s: 2ch;
     --fs-m: 2.5ch;
     --fs-l: 3ch;
     --fs-xl: 3.5ch;
     --fs-xxl: 4ch;
     --fs-xxxl: 5ch;

     /*
     Styl se zaměřuje takto: první barva je barva textu kontrastní k dalším 5 barvám pozadí, které by měly být odstínem podobné.
     Vytvořeno pomocí základní barvy v basic-bg a odstíny odebírány z nástroje w3schools.com/w3css/w3css_color_generator.asp
     */

     --result-fault: #d6ae50;
     --result-check: #fdfcf8;

}

.material-icons
{
     vertical-align: middle;
}

@media (max-width: 450px) {

     :root
     {
          --fs-normal: 20px;
          --fs-xs: 1.5ch;
          --fs-s: 2ch;
          --fs-m: 2.5ch;
          --fs-l: 3ch;
          --fs-xl: 3.5ch;
          --fs-xxl: 4ch;
          --fs-xxxl: 5ch;
     }
     
}

HTML
{

}

BODY
{
     color: var(--basic-fg);
     background-color: var(--basic-bg);
     font-family: 'Barlow Condensed', 'Times New Roman', Arial, Helvetica, sans-serif;
     font-style: normal;
     margin: 0;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;

     font-size: var(--fs-normal);
}


.BODY-BLOCKED
{
     overflow: hidden;
}

*,
*:after,
*:before
{
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
     margin: 0;
     background-color: inherit;
}

.ZRUSENO
{
     text-decoration: line-through;
}



IMG
{
     max-width: 100%;
}



#LOGO-DPS
{
     position: absolute;
     left: 25px;
     top: 89px;
}

#LOGO-DPS IMG
{
     width: 100%;
     max-width: 100%;
}







.TABULKA
{
     margin: 25px auto 75px auto;
}

.TABULKA .T-LEGENDA,
.TABULKA .T-RADEK
{
     border-radius: 5px;
     overflow: hidden;
}

.TABULKA DIV SPAN
{
     display: inline-block;
     padding: 25px;
     vertical-align: top;
     height: 100%;
}

.TABULKA .T-LEGENDA
{
     margin: 0 0 15px 0;
     box-shadow: 0 3px 3px 3px var(--basic-fg);
}

.TABULKA .T-RADEK
{
     transition: .3s;
}

.TABULKA .T-RADEK:hover
{
     box-shadow: 0 6px 6px 6px var(--basic-fg) !important;
     background-color: var(--diff-bg-hover) !important;
}

.TABULKA .XTR-ZOBRAZENY
{
     max-height: 350px;
     margin: 0 0 15px 0;
     box-shadow: 0 6px 6px 1px var(--basic-fg);
}

.TABULKA .XTR-SKRYTY
{
     max-height: 0;
     margin: 0;
}




.TABULKA-TISK
{
     min-width: 100%;
     border-width: 1px;
     border-style: solid;
     border-color: var(--cr);
}

.TABULKA-TISK TD,
.TABULKA-TISK TH
{
     border-width: 1px;
     border-style: solid;
     border-color: var(--cr);
}







.DLAZDICE-BG
{
     vertical-align: top;
}

@media (min-width: 1300px) {

     .DLAZDICE-BG
     {
          width: 25%;
          display: inline-block;
     }

}

@media (min-width: 1000px) and (max-width: 1300px) {

     .DLAZDICE-BG
     {
          width: 33.3%;
          display: inline-block;
     }

}

@media (min-width: 700px) and (max-width: 1000px){

     .DLAZDICE-BG
     {
          width: 50%;
          display: inline-block;
     }

}

.DBG-SKRYTA
{
     max-width: 0;
     max-height: 0;
     filter: alpha(opacity=0);
     opacity: 0;
     transition: .5s;
     padding: 0;
     overflow: hidden;
}

.DBG-ZOBRAZENA
{
     max-width: 2000px;
     max-height: 2000px;
     filter: alpha(opacity=100);
     opacity: 1;
     transition: .5s;
     padding: 25px;
     overflow: auto;
}

.DLAZDICE
{
     position: relative;
     display: block;
     transition: .3s;
     box-shadow: 10px 10px 10px 0 var(--basic-fg);
     left: -7px;
     top: -7px;
}

.DLAZDICE:hover
{
     box-shadow: 3px 3px 3px 0 var(--basic-fg);
     left: 0;
     top: 0;
}






A
{
     color: inherit;
     text-decoration: none;
}

P A
{
     box-shadow: inset 0 -3px 0;
     padding: 0 0 5px 0;
     transition-delay: .3s;
     transition: .3s;
}

P A:hover
{
     box-shadow: none;
}

UL
{
     margin: 0;
}



MAIN
{
     margin: 0 0 25px 0;
     padding: 50px;
     text-align: center;
     background-color: var(--diff1-bg);
     color: inherit;
     box-shadow: 0 5px 5px 5px var(--basic-fg);
}

MAIN H1
{
     margin: 0;
     padding: 25px 50px;
     text-align: center;
     font-size: var(--fs-xxl);
}

MAIN P
{
     margin: 0;
     padding: 0 50px 25px 50px;
     text-align: center;
     font-size: var(--fs-l);
}






SECTION
{
     padding: 0;
     margin: 0 0 25px 0;
}

SECTION H2
{
     margin: 0;
     padding: 2vh 0;
     text-align: center;
     font-size: var(--fs-xxxl);
}

SECTION ARTICLE P
{
     text-align: justify;
     padding: 12px 25px;
     line-height: 150%;
}

SECTION ARTICLE .P-PODPIS
{
     text-align: right;
     padding: 2vh 0;
     font-size: var(--fs-s);
}

SECTION ARTICLE
{
     padding: 25px;
     vertical-align: top;
}

@media (min-width: 800px) {

     ARTICLE.OBSAH-5
     {
          display: inline-block;
          width: 50%;
     }

     ARTICLE.OBSAH-3
     {
          display: inline-block;
          width: 33.3%;
     }

     ARTICLE.OBSAH-6
     {
          display: inline-block;
          width: 66.6%;
     }

     ARTICLE.OBSAH-25
     {
          display: inline-block;
          width: 25%;
     }

}

@media (min-width: 1200px) {

     ARTICLE.OBSAH-25
     {
          display: inline-block;
          width: 50%;
     }

}



/* má se za DL */
DIV.ROW-DEF
{
     display: block;
     white-space: normal;
     padding: 5px 20px 5px 0;
}

DIV.ROW-DEF DIV
{
     display: inline-block;
     vertical-align: top;
     border-width: 0 0 5px 5px;
     border-style: solid;
     border-color: var(--basic-fg);
     border-radius: 5px;
     margin: 5px;
}

DIV.ROW-DEF DIV DIV
{
     margin: 0;
     border: 0;
}

DIV.ROW-DEF DIV DIV:nth-child(1)
{
     padding: 5px 5px 5px 10px;
     white-space: nowrap;
}

DIV.ROW-DEF DIV DIV:nth-child(1) SPAN:nth-child(1)
{
     padding: 0 10px 0 0;
}

DIV.ROW-DEF DIV DIV:nth-child(1) SPAN:nth-child(2)
{
     font-weight: bold;
}

DIV.ROW-DEF DIV DIV:nth-child(1) SPAN:nth-child(2):after
{
     content: ":";
}

DIV.ROW-DEF DIV DIV:nth-child(2)
{
     white-space: normal;
     overflow: hidden;
}

@media (min-width: 800px) {

     DIV.ROW-DEF DIV
     {
          display: inline-block;
          width: auto;
     }

     DIV.ROW-DEF DIV DIV
     {
          display: inline-block;
     }

     DIV.ROW-DEF DIV DIV:nth-child(2)
     {
          padding: 5px 15px 5px 5px;
     }

}

@media (min-width: 600px) and (max-width: 800px) {

     DIV.ROW-DEF DIV
     {
          display: inline-block;
     }

     DIV.ROW-DEF DIV DIV
     {
          display: inline-block;
     }

     DIV.ROW-DEF DIV DIV:nth-child(1) SPAN:nth-child(2)
     {
          display: none;
     }

     DIV.ROW-DEF DIV DIV:nth-child(2)
     {
          padding: 5px 15px 5px 5px;
     }

}

@media (min-width: 400px) and (max-width: 600px) {

     DIV.ROW-DEF DIV
     {
          display: block;
     }

     DIV.ROW-DEF DIV DIV
     {
          display: inline-block;
     }

     DIV.ROW-DEF DIV DIV:nth-child(2)
     {
          padding: 5px 15px 5px 5px;
     }

}

@media (max-width: 400px) {

     DIV.ROW-DEF DIV
     {
          display: block;
     }

     DIV.ROW-DEF DIV DIV
     {
          display: inline-block;
     }

     DIV.ROW-DEF DIV DIV:nth-child(1) SPAN:nth-child(2)
     {
          display: none;
     }

     DIV.ROW-DEF DIV DIV:nth-child(2)
     {
          padding: 5px 15px 5px 5px;
     }

}



#FORM-RESULT
{
     position: fixed;
     z-index: 8000;
     background: transparent;
}

#FORM-RESULT .F-RESULT
{
     overflow: hidden;
     box-shadow: 6px 6px 6px 0 var(--basic-fg);
     font-size: var(--fs-s);
     padding: 10px;
     border-color: var(--basic-fg);
     border-style: solid;
}

@media (max-width: 600px) {

     #FORM-RESULT
     {
          left: 0;
          bottom: 0;
          width: 100%;
     }

     #FORM-RESULT .F-RESULT
     {
          position: absolute;
          width: calc(100% - 20px);
          height: 110px;
          margin: 5px 10px 20px 10px;
          left: 0;
          bottom: 0;
          border-width: 2px;
     }

}

@media (min-width: 600px) {

     #FORM-RESULT
     {
          width: 400px;
          right: 100px;
          bottom: 50px;
     }

     #FORM-RESULT .F-RESULT
     {
          position: relative;
          width: 370px;
          height: 165px;
          margin: 10px;
          border-width: 2px;
          border-radius: 5px;
     }

}

.FR-GOOD
{
     background-color: var(--result-check);
}

.FR-BAD
{
     background-color: var(--result-fault);
}

#FORM-RESULT .F-RESULT DIV
{
     padding: 5px;
     display: inline-block;
     vertical-align: top;
}

#FORM-RESULT .F-RESULT DIV:nth-of-type(1)
{
     width: 30px;
}

#FORM-RESULT .F-RESULT DIV:nth-of-type(2)
{
     width: calc(100% - 60px);
}

#FORM-RESULT .F-RESULT DIV:nth-of-type(3)
{
     width: 30px;
}







.WRN
{
     margin: 25px 0;
     box-shadow: 3px 3px 3px 1px var(--basic-fg);
     border-width: 1px;
     border-style: solid;
     border-color: var(--basic-fg);
     border-radius: 5px;
     overflow: hidden;
     background-color: var(--diff-bg-hover);
}

.WRN DIV
{
     display: inline-block;
     margin: 0;
     padding: 15px;
     vertical-align: top;
}

.WRN DIV I
{
     font-size: 60px;
}

.WRN DIV:nth-of-type(1)
{
     width: 90px;
     text-align: center;
}

.WRN DIV:nth-of-type(2)
{
     width: calc(100% - 90px);
     text-align: justify;
}





/* AA-last-logins.php */
DIV#LAST-LOGINS
{
     width: 100%;
     padding: 25px;
     box-shadow: 0 -6px 6px 1px var(--basic-fg);
     text-align: center;
     background-color: var(--diff1-bg);
}

@media (max-width: 2100px) {

     DIV#LAST-LOGINS
     {
          text-align: center;
     }
}

@media (min-width: 2101px) {

     DIV#LAST-LOGINS
     {
          text-align: left;
     }
}

DIV#LAST-LOGINS P
{
     text-align: justify;
     padding: 0;

}

DIV#LAST-LOGINS P > A
{
     color: inherit;
}

DIV#LAST-LOGINS P > A:hover
{
     text-decoration: none;
}

DIV#LAST-LOGINS H2
{
     padding: 0;
     text-align: left;
     margin: 0;
}

DIV#LAST-LOGINS DIV
{
     display: inline-block;
     width: 200px;
     padding: 10px;
     vertical-align: top;
     text-align: right;
}

DIV#LAST-LOGINS DIV SPAN
{
     display: block;
}







/* AA-endings.php */
DIV#BOTTOM-CONTENT
{
     background-color: var(--diff1-bg);
     width: 100%;
     white-space: normal;
     display: block;
     font-size: var(--fs-s);
}

DIV#BOTTOM-CONTENT DIV.BC
{
     vertical-align: top;
     padding: 25px 25px 100px 25px;
     white-space: normal;
}

@media (max-width: 560px) {

     DIV#BOTTOM-CONTENT DIV.BC
     {
          width: 100%;
          display: block;
     }
}

@media (min-width: 560px) and (max-width: 1000px) {

     DIV#BOTTOM-CONTENT DIV.BC
     {
          width: calc(100% / 2);
          display: inline-block;
     }
}

@media (min-width: 1000px) {

     DIV#BOTTOM-CONTENT DIV.BC
     {
          width: calc(100% / 4);
          display: inline-block;
     }
}

DIV#BOTTOM-CONTENT DIV.BC H2
{
     box-shadow: inset 0px -5px 0px var(--basic-fg);
     width: auto;
     padding: 10px 0px;
     display: inline-block;
     margin: 0 0 15px 0;
}

DIV#BOTTOM-CONTENT DIV.BC A
{
     display: block;
     width: auto;
     padding: 10px 0px;
     color: inherit;
     text-decoration: none;
     box-shadow: none;
     transition: box-shadow 0.3s;
}

DIV#BOTTOM-CONTENT DIV.BC A:hover
{
     box-shadow: inset 0 -5px 0 var(--basic-fg);
}

DIV#BOTTOM-CONTENT DIV.BC A.LINK
{
     box-shadow: inset 0px -5px 0px var(--basic-fg);
     transition: box-shadow 0.3s;
}

DIV#BOTTOM-CONTENT DIV.BC A.LINK:last-child
{
     margin: 47px 0 0 0;
}

DIV#BOTTOM-CONTENT DIV.BC A.LINK:hover
{
     box-shadow: none;
     color: inherit;
}

DIV#BOTTOM-CONTENT DT
{
     padding: 15px 0 0 0;
     font-size: var(--fs-l);
}

DIV#BOTTOM-CONTENT DT:after
{
     content: ':';
}

DIV#BOTTOM-CONTENT DD
{
     padding: 0 0 15px 0;
}