#MODAL-BACKGROUND
{
     position: fixed;
     left: 0;
     top: 0;
}

.MBG-SKRYTE
{
     background: rgb(0, 0, 0);
     background: rgba(0, 0, 0, 0);
     overflow: hidden;
     width: 0;
     height: 0;
     z-index: 0;
     border: 0;
     left: 50%;
     top: 50%;
}

.MBG-VIDITELNE
{
     background: rgb(0, 0, 0) !important;
     background: rgba(0, 0, 0, 0.6) !important;
     overflow: auto !important;
     width: 100vw !important;
     height: 100vh !important;
     z-index: 20000 !important;
     /* border: var(--scrollbar-width) solid transparent; */
}

.MODAL
{
     opacity: 1;
     filter: alpha(opacity=100);
     background-color: var(--basic-bg);
     color: var(--basic-fg);
     overflow: hidden;
}

@media (min-width: 601px) {

     .MODAL
     {
          width: 90vw;
          height: calc(100vh - 10vw);
          top: 5vw;
          left: 5vw;
          margin: 5vw auto;
          border-width: 5px;
          border-color: var(--basic-bg);
          border-style: solid;
     }

}

@media (max-width: 600px) {

     .MODAL
     {
          width: 100vw;
          height: 100vh;
          top: 0;
          left: 0;
          margin: 0;
          border: 0;
     }

}

.MD-MENU
{

}

.MD-MENU BIG,
.MD-MENU SMALL,
.MD-MENU STRONG
{
     padding: 10px;
     border-width: 0 0 5px 0;
     border-color: var(--basic-fg);
     border-style: solid;
     transition: 0.3s;
     font-size: inherit;
}

.MD-MENU BIG:hover,
.MD-MENU SMALL:hover,
.MD-MENU STRONG:hover
{
     background-color: var(--basic-fg);
     color: var(--basic-bg);
}

@media (min-width: 801px) {

     .MD-MENU SUP
     {
          display: inline;
          vertical-align: middle;
          font-size: inherit;
     }

}

@media (max-width: 800px) {

     .MD-MENU SUP
     {
          display: none;
     }

     .MD-MENU SUP:hover
     {
          display: inline;
     }

}

.MODAL > H2
{
     background-color: var(--basic-bg-hover);
     white-space: nowrap;
}

.MODAL > H2 I
{
     vertical-align: middle;
}

.MD-OBSAH
{
     position: absolute;
     background-color: inherit;
}

.MDO-SKRYTY
{
     transition: .3s;
     max-height: 0;
     overflow: hidden;
     padding: 0 25px;
}

.MDO-VIDITELNY
{
     transition: .3s;
     transition-delay: .6s;
     max-height: 1500px;
     overflow: auto;
     padding: 25px;
}

@media (min-width: 1000px) {

     .MD-MENU,
     .MDO-VIDITELNY
     {
          height: calc(100vh - 10vw - 86px);
     }

     .MDO-VIDITELNY
     {
          float: left;
     }

     .MD-MENU
     {
          width: 20vw;
          position: relative;
          float: right;
          overflow: auto;
     }

     .MODAL > H2,
     .WARNING > H2
     {
          padding: 15px 25px;
          font-size: var(--fs-xl);
     }

     .MODAL > H2 I
     {
          font-size: var(--fs-s);
     }

     .MD-MENU BIG,
     .MD-MENU SMALL,
     .MD-MENU STRONG
     {
          width: 100%;
          display: block;
     }

     .MD-OBSAH
     {
          width: calc(70vw - 10px);
     }

}

@media (min-width: 601px) and (max-width: 999px) {

     .MD-MENU
     {
          width: 100%;
          padding: 5px 25px 5px 25px;
          text-align: right;
          white-space: nowrap;
          overflow: auto;
     }

     .MODAL > H2,
     .WARNING > H2
     {
          padding: 15px 15px;
          font-size: var(--fs-xl);
     }

     .MODAL > H2 I
     {
          font-size: var(--fs-s);
     }

     .MD-MENU BIG,
     .MD-MENU SMALL,
     .MD-MENU STRONG
     {
          display: inline-block;
          width: auto;
     }

     .MD-OBSAH
     {
          width: calc(90vw - 10px);
     }

     .MDO-VIDITELNY
     {
          height: calc(100vh - 10vw - 157px);
          overflow: auto;
     }

}

@media (max-width: 600px) {

     .MD-MENU
     {
          width: 100%;
          padding: 5px 25px 5px 25px;
          text-align: right;
     }

     .MODAL > H2,
     .WARNING > H2
     {
          padding: 25px 25px;
          font-size: var(--fs-xl);
     }

     .MODAL > H2 I
     {
          font-size: var(--fs-s);
     }

     .MD-MENU BIG,
     .MD-MENU SMALL,
     .MD-MENU STRONG
     {
          display: inline-block;
          width: auto;
     }

     .MD-BANNER
     {

     }

     .MD-OBSAH
     {
          width: 100%;
     }

     .MDO-VIDITELNY
     {
          height: calc(100vh - 10vw - 145px);
          overflow: auto;
     }

}

.MD-OBSAH .MD-COMMENT
{
     padding: 25px;
     margin: 0 0 15px 0;
}

.MD-OBSAH H3
{
     padding: 25px 0;
     box-shadow: inset 0px -8px 0px var(--basic-fg);
     color: var(--basic-fg);
     margin: 0 0 25px 0;
}

.MD-OBSAH P,
.WARNING P
{
     padding: 15px 0;
     line-height: 150%;
}

.MD-OBSAH > P
{
     padding: 15px;
}

.MD-OBSAH .MD-ZRUSENO
{
     background-color: var(--diff-bg-hover);
     color: var(--bi);
}

.MD-OBSAH .MD-VTEXT,
.MD-OBSAH .MD-NTEXT
{
     background-color: var(--diff1-bg);
     color: var(--basic-fg);
}

.MD-OBSAH .MD-SVZKAZY
{
     background-color: var(--diff2-bg);
     color: var(--basic-fg);
     border-radius: 10px;
}

.MD-OBSAH .MD-AKCE-POPIS
{

}

.MD-OBSAH .MD-AKCE-POPIS SPAN
{
     display: inline-block;
     padding: 5px 20px 5px 0;
}

.MD-OBSAH .MD-AKCE-POPIS SPAN I
{
     padding: 0 5px 0 0;
}

.MD-OBSAH .MD-AKCE-POPIS SPAN B
{
     padding: 0 10px;
}

.MD-OBSAH .MD-AKCE-POPIS SPAN B:after
{
     content: ':';
}





.MD-RADEK
{
     display: inline-block;
     vertical-align: top;
     background-color: inherit;
}

.MD-10
{
     width: 100%;
}

@media (min-width: 1000px) {

     .MD-3
     {
          width: 33.3%;
     }

     .MD-5
     {
          width: 50%;
     }

}

@media (min-width: 601px) and (max-width: 999px) {

     .MD-3
     {
          width: 50%;
     }

     .MD-5
     {
          width: 50%;
     }

}

@media (max-width: 600px) {

     .MD-3
     {
          width: 100%;
     }

     .MD-5
     {
          width: 100%;
     }

}
















#WARNING-BACKGROUND
{
     position: fixed;
     overflow: hidden;
     z-index: 21000;
     left: 0;
     top: 0;
     width: 100%;
     min-height: 100vh;
     background-color: transparent;
}

.WARNING-BLOK
{
     left: calc(100% / 2);
     top: calc(100vh / 2);
     width: 0;
     height: 0;
     position: fixed;
     overflow: hidden;
     
     animation: a-warning-show;
     animation-duration: 1.5s;
     animation-fill-mode: forwards;
     animation-direction: normal;

     -webkit-animation: a-warning-show;
     -webkit-animation-duration: 1.5s;
     -webkit-animation-fill-mode: forwards;
     -webkit-animation-direction: normal;

     -moz-animation: a-warning-show;
     -moz-animation-duration: 1.5s;
     -moz-animation-fill-mode: forwards;
     -moz-animation-direction: normal;

     -o-animation: a-warning-show;
     -o-animation-duration: 1.5s;
     -o-animation-fill-mode: forwards;
     -o-animation-direction: normal;
}

@keyframes a-warning-show {
     0% {
          left: calc(100% / 2);
          top: calc(100vh / 2);
          background: rgb(0, 0, 0);
          background: rgba(0, 0, 0, 0);
          width: 0;
          height: 0;
          border-radius: 0px;
     }
     40% {
          left: calc((100% / 2) - 50px);
          top: calc((100vh / 2) - 100px);
          width: 100px;
          height: 200px;
          border-radius: 20px;
     }
     80% {
          left: 0;
          top: 0;
          background: rgb(0, 0, 0);
          background: rgba(0, 0, 0, 0.9);
          width: 100%;
          height: 100vh;
          border-radius: 50%;
     }
     100% {
          left: 0;
          top: 0;
          background: rgb(0, 0, 0);
          background: rgba(0, 0, 0, 0.7);
          width: 100%;
          height: 100vh;
          border-radius: 0;
     }
}

@keyframes a-warning-content
{
     0%
     {
          width: 0;
          height: 0;
          left: 50%;
          top: -100vw;
     }
     
     100%
     {
          left: calc(50% - 180px);
          width: 350px;
          height: auto;
          top: 10vw;
     }
}

.WARNING
{
     position: absolute;
     overflow: hidden;
     width: 0;
     height: 0;
     left: 50%;
     top: -100vw;
     border-width: 5px;
     border-color: var(--basic-fg);
     border-style: solid;
     border-radius: 5px;
     text-align: center;

     animation: a-warning-content;
     animation-delay: 1.5s;
     animation-duration: .5s;
     animation-fill-mode: forwards;
     animation-direction: normal;

     -webkit-animation: a-warning-content;
     -webkit-animation-delay: 1.5s;
     -webkit-animation-duration: .5s;
     -webkit-animation-fill-mode: forwards;
     -webkit-animation-direction: normal;

     -moz-animation: a-warning-content;
     -moz-animation-delay: 1.5s;
     -moz-animation-duration: .5s;
     -moz-animation-fill-mode: forwards;
     -moz-animation-direction: normal;

     -o-animation: a-warning-content;
     -o-animation-delay: 1.5s;
     -o-animation-duration: .5s;
     -o-animation-fill-mode: forwards;
     -o-animation-direction: normal;
}

.WARNING H2
{
     background-color: var(--basic-bg-hover);
     padding: 15px;
     font-size: var(--fs-m);
     white-space: nowrap;
}

.WARNING DIV
{
     background-color: var(--basic-bg);
     padding: 15px;
}