FORM
{
     background: inherit;
     color: inherit;
     border-color: inherit;
}

FORM *
{
     font-size: inherit;
     color: inherit;
     border-color: inherit;
}

:focus
{
     outline: none;
}

/* obecná nastavení (font) */
LABEL,
INPUT,
OPTION,
TEXTAREA,
.F-OPTION,
.F-SELECT,
SELECT,
BUTTON,
A.BUT
{
     font-family: inherit;
     font-size: inherit;
     border: 0;
}

LABEL
{
     font-size: var(--fs-xs);
     white-space: nowrap;
     max-width: calc(100% - 30px);
     overflow: hidden;
     font-weight: bold;
     transition: .3s;
}

LABEL:after
{
     content: ':';
}

INPUT[type=date],
INPUT[type=email],
INPUT[type=number],
INPUT[type=password],
INPUT[type=text],
INPUT[type=time],
INPUT[type=url],
SELECT,
.F-SELECT,
.F-OPTION,
TEXTAREA
{
     color: inherit;
     max-width: 100%;
}

INPUT[type=submit],
INPUT[type=reset],
INPUT[type=button],
BUTTON,
A.BUT
{
     border-radius: 15px;
     background-color: var(--basic-bg);
     color: var(--basic-fg);
     transition: .1s;
     padding: 15px;
     box-shadow: 5px 5px 5px 1px var(--basic-fg);
     left: -3px;
     top: -3px;
     position: relative;
}

A.BUT
{
     text-decoration: none;
     text-align: center;
}

INPUT[type=submit]:hover,
INPUT[type=reset]:hover,
INPUT[type=button]:hover,
BUTTON:hover,
A.BUT:hover
{
     left: 0;
     top: 0;
     box-shadow: 0 2px 5px 2px var(--basic-fg);
     background-color: var(--basic-bg-hover);
}

INPUT[type=submit] I,
INPUT[type=reset] I,
INPUT[type=button] I,
BUTTON I,
A.BUT I
{
     margin-right: 15px;
}

@media (min-width: 1000px) {

     INPUT[type=submit],
     INPUT[type=reset],
     INPUT[type=button],
     BUTTON,
     A.BUT
     {
          width: auto;
          display: inline-block;
          margin: 15px 15px 35px 0;
     }

}

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

     INPUT[type=submit],
     INPUT[type=reset],
     INPUT[type=button],
     BUTTON,
     A.BUT
     {
          width: auto;
          display: inline-block;
          margin: 15px 15px 35px 0;
     }

     .OBSAH-5 INPUT[type=submit],
     .OBSAH-5 INPUT[type=reset],
     .OBSAH-5 INPUT[type=button],
     .OBSAH-5 BUTTON,
     .OBSAH-5 A.BUT
     {
          width: calc(100% - 50px);
          display: block;
          margin: 25px;
     }

}

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

     INPUT[type=submit],
     INPUT[type=reset],
     INPUT[type=button],
     BUTTON,
     A.BUT
     {
          width: auto;
          display: inline-block;
          margin: 15px 15px 35px 0;
     }

}

@media (max-width: 500px) {

     INPUT[type=submit],
     INPUT[type=reset],
     INPUT[type=button],
     BUTTON,
     A.BUT
     {
          width: calc(100% - 30px);
          display: block;
          margin: 15px 15px 35px 15px;
     }

}



.FD-RADEK,
.FD-OPTION,
.FD-TEXTAREA,
.FD-GROUP,
.FD-CHECKBOXES
{
     position: relative;
     background-color: inherit;
     padding: 0 15px 60px 15px;
     color: inherit;
     border-color: inherit;
}

.FD-GROUP,
.FD-CHECKBOXES
{
     border-width: 0 0 0 10px;
     border-style: dotted;
}

.FD-GROUP H3,
.FD-CHECKBOXES H3
{
     padding: 25px 0;
     box-shadow: inset 0px -8px 0px var(--basic-fg);
     color: var(--basic-fg);
     margin: 0 0 25px 0;
}

.FD-GROUP > P,
.FD-CHECKBOXES > P
{
     margin: 25px 0;
     display: inline-block;
     width: auto;
}

.FD-RADEK .F-INPUT,
.FD-OPTION .F-OPTION,
.FD-RADEK .F-SELECT,
.FD-TEXTAREA .F-TEXTAREA,
.FD-GROUP .F-INPUT
{
     width: 100%;
     display: block;
     position: relative;
     color: inherit;
     border-color: inherit;
     border-radius: 5px;
     border-style: solid;
     border-width: 3px;
     background-color: inherit;
}

.FD-RADEK .F-INPUT,
.FD-RADEK .F-SELECT,
.FD-GROUP .F-INPUT
{
     height: 66px;
}

.FD-GROUP .F-INPUT
{
     margin: 0 0 20px 0;
}

.FD-TEXTAREA .F-TEXTAREA
{
     height: 326px;
}

.FD-RADEK B,
.FD-TEXTAREA B
{
     position: absolute;
     left: 23px;
     max-width: 0;
     overflow: hidden;
     height: auto;
     transition: .3s;
     background-color: var(--basic-bg-hover);
     clip-path: polygon(0% 20%, 10% 20%, 15% 0, 20% 20%, 100% 20%, 100% 100%, 0% 100%);
     padding: 0;
     z-index: 1000;
     white-space: nowrap;
}

.FD-RADEK B
{
     top: 59px;
}

.FD-GROUP B
{
     display: block;
     margin: 0 0 25px 0;
}

.FD-TEXTAREA B
{
     top: 319px;
}

.FD-RADEK B.NAPOVEDA,
.FD-TEXTAREA B.NAPOVEDA
{
     max-width: 100%;
     padding: 20px 10px 10px 10px;
     overflow: visible;
     white-space: normal;
}

.FD-RADEK .F-INPUT SELECT
{
     appearance: none;
     max-width: calc(100% - 16px);
     width: calc(100% - 16px);
}

.FD-RADEK .F-INPUT INPUT,
.FD-GROUP .F-INPUT INPUT,
.FD-RADEK .F-INPUT SELECT
{
     height: 40px;

     position: absolute;
     left: 8px;
     top: 15px;
     
     max-width: calc(100% - 20px);

     padding: 0 10px; /* hodnota nula důležitá pro select */
     background-color: inherit;
}

.FD-RADEK .F-INPUT INPUT:not([type=password])
{
     width: calc(100% - 40px);
}

.FD-RADEK .F-INPUT INPUT[type=password]
{
     width: calc(100% - 80px);
}

.FD-GROUP .F-INPUT INPUT
{
     width: calc(100% - 40px);
}

.FD-RADEK .F-INPUT INPUT:focus,
.FD-GROUP .F-INPUT INPUT:focus
{
     background-color: transparent;
}

.FD-TEXTAREA .F-TEXTAREA TEXTAREA
{
     width: calc(100% - 16px);
     height: 300px;

     position: absolute;
     left: 8px;
     top: 15px;

     padding: 10px;
     background-color: inherit;

     resize: none;
}



.FD-RADEK .F-INPUT I,
.FD-GROUP .F-INPUT I,
.FD-RADEK .F-INPUT U,
.FD-GROUP .F-INPUT U
{
     position: absolute;

     font-style: normal;
     text-decoration: none;

     /* filter: alpha(opacity=0);
     opacity: 0; */

     top: 20px;
     overflow: hidden;
     z-index: 5;

     transition: .3s;
}

.FD-RADEK .F-INPUT INPUT:focus ~ I,
.FD-GROUP .F-INPUT INPUT:focus ~ I,
.FD-RADEK .F-INPUT INPUT:focus ~ U,
.FD-GROUP .F-INPUT INPUT:focus ~ U
{
     filter: alpha(opacity=100);
     opacity: 1;
}

.FD-RADEK .F-INPUT I,
.FD-RADEK .F-INPUT U
{
     right: 8px;
}

.FD-GROUP .F-INPUT I,
.FD-GROUP .F-INPUT U
{
     right: 43px;
}

/*
.FD-RADEK .F-INPUT I,
.FD-GROUP .F-INPUT I
{
     color: var(--result-check);
}

.FD-RADEK .F-INPUT U,
.FD-GROUP .F-INPUT U
{
     color: var(--result-fault);
}
*/

.FD-RADEK .F-INPUT INPUT:disabled ~ I,
.FD-GROUP .F-INPUT INPUT:disabled ~ I,
.FD-RADEK .F-INPUT INPUT:disabled ~ U,
.FD-RADEK .F-INPUT INPUT:disabled ~ U
{
     filter: alpha(opacity=0) !important;
     opacity: 0 !important;
}

.FD-RADEK .F-INPUT INPUT:valid ~ I,
.FD-GROUP .F-INPUT INPUT:valid ~ I
{
     filter: alpha(opacity=100);
     opacity: 1;
}

.FD-RADEK .F-INPUT INPUT:invalid ~ I,
.FD-GROUP .F-INPUT INPUT:invalid ~ I
{
     filter: alpha(opacity=0);
     opacity: 0;
}

.FD-RADEK .F-INPUT INPUT:valid ~ U,
.FD-GROUP .F-INPUT INPUT:valid ~ U
{
     filter: alpha(opacity=0);
     opacity: 0;
}

.FD-RADEK .F-INPUT INPUT:invalid ~ U,
.FD-GROUP .F-INPUT INPUT:invalid ~ U
{
     filter: alpha(opacity=100);
     opacity: 1;
}



.FD-RADEK .F-INPUT LABEL,
.FD-GROUP .F-INPUT LABEL,
.FD-TEXTAREA .F-TEXTAREA LABEL
{
     display: block;
     width: auto;
     height: auto;
     padding: 0 15px;

     background-color: inherit;

     position: absolute;
     left: 15px;
     top: -12px;
     z-index: 100;
}

.FD-RADEK .F-INPUT INPUT:placeholder-shown ~ LABEL,
.FD-GROUP .F-INPUT INPUT:placeholder-shown ~ LABEL,
.FD-TEXTAREA .F-TEXTAREA TEXTAREA:placeholder-shown ~ LABEL
{
     top: 15px;
     font-size: var(--fs-s);
}

.FD-RADEK .F-INPUT INPUT:focus ~ LABEL,
.FD-GROUP .F-INPUT INPUT:focus ~ LABEL,
.FD-TEXTAREA .F-TEXTAREA TEXTAREA:focus ~ LABEL
{
     top: -12px;
     font-size: var(--fs-xs);
}

.FD-GROUP .F-INPUT SMALL
{
     position: absolute;

     right: 8px;
     top: 15px;

     color: var(--basic-fg);

     text-align: center;
     padding: 6px;
}

.FD-GROUP .F-INPUT:first-of-type SMALL
{
     display: none;
}




.FD-OPTION .F-OPTION
{
     width: auto;
     padding: 15px 25px 10px 25px;
     min-height: 86px;
}

.FD-OPTION .F-OPTION I
{
     width: auto;
     font-style: normal;
     display: inline-block;
     background-color: inherit;
     border-width: 3px;
     border-style: solid;
     border-color: inherit;
     border-radius: 15px;
     padding: 10px 25px;
     margin: 0 10px 10px 0;
     transition: .3s;
     cursor: pointer;
     position: relative;
     top: 10px;
}

.FD-OPTION .F-OPTION I.FO-SEL
{
     background-color: var(--basic-bg-hover);
}



.FD-OPTION .F-OPTION LABEL
{
     display: block;
     width: auto;

     background-color: inherit;
     padding: 0 15px;

     position: absolute;
     left: 15px;
     top: -12px;
     z-index: 100;
}

.FD-OPTION .F-OPTION B
{
     display: block;
     font-size: var(--fs-s);
     margin: 15px 15px 0 15px;
     white-space: normal;
}




.FD-CHECKBOXES .F-CHECKBOX
{
     display: inline-block;
     width: 40%;
     min-width: 300px;
}




:root .TGL-INPUT,
.js .TGL-INPUT
{
     display: none;
}

:root .TGL-LABEL,
.js .TGL-LABEL
{

}

.TGL-INPUT + .TGL-LABEL:after
{
     display: none;
}

.TGL-INPUT + .TGL-LABEL I:nth-of-type(2)
{
     display: inline-block;
}

.TGL-INPUT + .TGL-LABEL I:nth-of-type(1)
{
     display: none;
}

.TGL-INPUT:checked + .TGL-LABEL I:nth-of-type(2)
{
     display: none;
}

.TGL-INPUT:checked + .TGL-LABEL I:nth-of-type(1)
{
     display: inline-block;
}