/**
https://www.1001fonts.com/closeness-font.html     
font-family: Closeness;
https://www.1001fonts.com/caveat-font.html
**/
/** @font-face { font-family: Closeness; src: url('/fonts/Closeness.ttf'); } 
@font-face { font-family: Caveat-Regular; src: url('/fonts/Caveat-Regular.ttf'); } **/ 
@font-face { font-family: boca; src: url('/fonts/Caveat-Bold.ttf'); }

html {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif; 
  }
}

body {
  background-color: black;
  color: white;
  margin: 0;
}

/* unvisited link */
a:link {
  color: #16b676;
}

/* visited link */
a:visited {
  color: #b3b3b3;
}

/* mouse over link */
a:hover {
  color: #16b676;
}

/* selected link */
a:active {
  color: #118858;
} 

/* ???
.active {
  background-color: transparent; 
} */

h1 { 
  display: block;
 /* text-align: center;  */
  font-weight: bold;
  font-size: 24px;
}

h3 { 
  color: #e6e6e6;
  font-size: 1.32em;
}

p {  
    text-indent: 8px;
}

/** styl logo a nadpisu **/

div.logoAnadpisVtopnav {
  position: relative;
  width: 180px;
  height: 53px;
} 

div.absoluteLogoTopnav {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 50px;
  height: 33px;
}

div.absoluteNadpisTopnav {
  position: absolute;
  top: 23px;
  left: 52px;
  width: 182px;
  height: 33px;
  font-size: 17px;
    font-family: boca, serif;
  color: #16b676;
  transform: rotate(-2deg);
}

/*fullcalendar style override start*/
.fc th{
    background-color: white;
}

.fc .fc-multimonth-header{
    background-color: white;
}

.fc .fc-toolbar-title{
    color: white;
}
/*fullcalendar style override end*/

    /* menu navigacia zaciatok */
    /* Style the navigation menu */
    .topnav {
        overflow: hidden;
        background-color: #333;
        position: relative;
        z-index: 10;
    }

    /* Hide the links inside the navigation menu (except for logo/home) */
    .topnav #myLinks {
        display: none;
    }

    /* Style navigation menu links */
    .topnav a {
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }

    /* Style the hamburger menu */
    .topnav a.icon {
        background: black;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    /* Add a grey background color on mouse-over */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }    
    
    /** styl je kvoli hamburgeru **/
    .headerHamb .menu {
        width: 1.625rem;
        cursor: pointer;
    }

    .headerHamb .menu > span {
        display: block;
        width: 100%;
        height: 0.125rem;
        background: white; /** orig #2d314d **/
        transform-origin: 0.1875rem 0.0625rem;
        transition: transform 0.3s ease-in-out;
    }

    .headerHamb .menu > span:not(:last-child) {
        margin-bottom: 0.3125rem;
    }

    .headerHamb .menu.open > span:first-child {
        transform: rotate(45deg);
    }

    .headerHamb .menu.open > span:nth-child(2) {
        transform: scaleX(0);
    }

    .headerHamb .menu.open > span:last-child {
        transform: rotate(-45deg);
    }    

    /* Style the active link (or home/logo) */
    .active {
        background-color: #505050;
        color: white;
    } 

    @font-face {
        font-family: 'FontAwesome';
        src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
        src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0//fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .fa {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .fa-navicon:before,
    .fa-reorder:before,
    .fa-bars:before {
        content: "\f0c9";
    }

    /* menu navigacia koniec */
    
div.podTopnav {
  position: relative;
  width: 100%;
  height: 15px;
  background-color: #262626;
} 

div.podTopnavBodyVpravo {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 14px;
  font-size: 12px;
}    

div.podTopnavBodyVlavo {
  position: absolute;
  top: 0;
  left: 15px;
  width: 60px;
  height: 14px;
  font-size: 12px;
} 
   
     /* novy_trening/zapis_cvik */   
     
    span.datumtreningu {
        font-size: 90%;

    }

    span.partievtreningu {
        font-size: 90%;
        text-transform: lowercase;
    }
    

    table.univerzaldennik { /** premenuj z trening na univerzaldennik **/
        color: white;
        border-collapse: collapse;
        width: 100%;
        border-spacing: 0;
    }
 
    table.univerzaldennik td, table.univerzaldennik th {
        /*border: 0.5px solid #252525;*/
        text-align: left;
        padding: 8px;
    }  

    table.univerzaldennik td.nazovcviku {
        min-width: 180px;
        font-size: 15px;
    }

@media (max-width: 800px) {
    table.univerzaldennik td.nazovcviku {
        font-size: 12px; 
    }    
}    
/*   ????????? co toto tu je zduplikovane ????
.nazovcviku

@media (max-width: 800px) {
    table.univerzaldennik td.nazovcviku {
        font-size: 12px; 
    }    
}  
*/
    /*
        table.univerzaldennik tr {
            background-color: #1d1d1d;
        }
    */

    table.univerzaldennik tr.odd {
        background-color: #1d1d1d;
    }

    /*
        table.univerzaldennik tr:nth-child(even) {
            background-color: #252525;
        }
    */

    table.univerzaldennik tr.even {
        background-color: #333333;  /** povodne #252525 zmena 19.4.2024 **/
    }

    table.univerzaldennik tr.other {
        background-color: #3C3D1E;
    }

    table.univerzaldennik tr.othereven {
        background-color: #8b2704;
    }

    table.univerzaldennik tr.otherodd {
        background-color: #5d1b07;
    }

    table.univerzaldennik tr.supereven {
        background-color: #07636b;
    }

    table.univerzaldennik tr.superodd {
        background-color: #0c3e43;
    }

    table.univerzaldennik .seriaBtn, .treningBtnAlone {
        background-color: transparent;
        border: none;
    }

    table.univerzaldennik .seriaBtn:hover,
    table.univerzaldennik .seriaBtn:focus {
        /*background-color: transparent;*/
        border: none;
        cursor: pointer;
        background-color: #ddd;
    }

    table.univerzaldennik .btnSeriaImg, .treningBtnAloneImg, table.vypistreningov .btnSeriaImg, .treningBtnAloneImg {
        width: 16px;
        height: 16px;
    }

    table.univerzaldennik .btnSeriaImg:hover,
    table.univerzaldennik .btnSeriaImg:focus,
    .treningBtnAloneImg:hover,
    .treningBtnAloneImg:focus {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
    
    tbody.labels {
        display: contents;
    }

    tbody.labels td {
        color: black;
        background-color: #e1e1e1;
        text-transform: uppercase;
        font-weight: bold;
    }

    table.univerzaldennik tr {
        background-color: #1d1d1d;
    }

.datumpismotabulka {
  font-size: 100%;
  width: 125px;  /* bolo 115px */
}

/* Use a media query to add a break point at 600px: poznámka orig bolo na 800px.... */
@media screen and (max-width: 600px) {
 .datumpismotabulka {
     /* The width is 100%, when the viewport is 600px or smaller */
  font-size: 70%;
  width: 82px;  /* bolo 70px */
  }
}

.dropdownMenuRiadok {
  text-align: left;
  font-size: 15px;
}

img.iconDropdownMenuRiadok {
  vertical-align: sub;
}

    /*table.univerzaldennik tr:nth-child(even) {*/
    /*    background-color: #252525;*/
    /*}*/

    button.labelsButton {
        float: right;
        background-color: transparent;
        border: none;
    }

    button.labelsButton:hover,
    button.labelsButton:focus {
        float: right;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

    [data-toggle="toggle"] {
        display: none;
    }    
    
    .dropbtn {
        background-color: transparent;
        color: white;
        padding: 5px; /*16px;*/
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 180px;
        overflow: auto;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        z-index: 100;
        right: 0;
        border-radius: 0.3125rem;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {
        background-color: #ddd;
    }

    .dropdown-content button {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        background-color: #e6e6e6;
        display: block;
        width: 100%;
        border: none;
    }

    .dropdown button:hover {
        background-color: #ccc;
    }

    .show {
        display: block;
    }

    /* Tooltip container */
    .tooltip {
        position: absolute;
        display: inline-block;
        border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;

        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }    
    
table.vypistreningov {
  color: white;  
  border-collapse: collapse;
  width: 100%;
  border-spacing: 0;
}

table.vypistreningov td, table.vypistreningov th {
  /*border: 1px solid #252525;*/
  text-align: left;
  padding: 8px;
}

table.vypistreningov tr {
  background-color: #1d1d1d;
}

table.vypistreningov tr:nth-child(even) {
  background-color: #333333;
}

table.vypistreningov .treningBtn {
  background-color: transparent;
  border: none;
}

table.vypistreningov .btnImg  {
  width: 16px; 
  height: 16px;
}


table.vzorPosledneRekordy { 
        width: 95%; 
        margin-left: auto; 
        margin-right: auto;
    }
    
table.vzorPosledneRekordy th { 
        border-bottom: 1px solid #e6e6e6;
    }

table.vzorPosledneRekordy tr.odd {
        background-color: #1d1d1d;
    } 
    
table.vzorPosledneRekordy tr.even {
        background-color: #333333;  
    }    
 /**   table.vzorPosledneRekordy td, table.vzorPosledneRekordy th {  

    } **/  
    
.thtdvlavo {  
        text-align: left;
        padding-left: 7px;
    } 
    
.thtdvstrede {  
        text-align: center;
    }   
    
.tbodyvstrede {  
        text-align: center;
    }

.casVdatume {  
        font-size: 70%;
    } 

.hlavickaTabulkyPosledneRekordy { 
        border-bottom: 1px solid #e6e6e6;
        font-weight: bold;
    }
      
.thtdvelkepismo { 
        text-transform: uppercase;
    }   
    
.thtdvelkepismoMensifont { 
        text-transform: uppercase;
        font-size: 80%;       
    }     

.page-navigation a {
    margin: 0 2px;
    display: inline-block;
    padding: 3px 5px;
    color: #ffffff;
    background-color: #70b7ec;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.page-navigation a[data-selected] {
    background-color: #3d9be0;
}

.wrapButton {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttonStyle {
    /*width: 140px;*/
    height: 45px;
    /*font-family: 'Roboto', sans-serif;*/
    font-size: 13px;
    /*text-transform: uppercase; */
    letter-spacing: 2.5px;
    font-weight: 700;
   /* color: #000;*/
    color: white;
    /*background-color: #fff;*/
   /*  background-color: #2EE59D;*/
    background-color: #16b676;
    padding: 10px;
    border: none;
    border-radius: 45px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
}

.buttonStyle:hover {
    /*
    background-color: #2EE59D;
    box-shadow: 0 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
    */
}

.buttonStyle22 {
    border-radius: 45px; 
    font-size: 15px; 
    font-weight: bold;     
    margin: 3px;
    padding: 7px 12px!important   /* padding: 6px 11px!important */
}
   
  /* stylovanie nahlad treningu - hlavicka */
.divCelyTrening {
  padding: 1px;
}

.datumVhlavicke {
  padding: 6px;
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline; 
  text-transform: uppercase;
}

.datumVhlavickeEdit {
  padding: 6px;
  font-size: 17px;
  font-weight: normal;
  border-bottom: dashed 1px #0088cc; 
  text-transform: uppercase;
}

.divNadpisPartie {
  padding: 6px;
}

.spanPrvyNadpis {
  font-size: 27px;
  font-weight: bold;
  color: #f2f2f2;
}

.spanDruhyNadpis {
  font-style: italic;
  font-size: 10px;
  color: #d9d9d9;
}

.spanDruhyNadpis2 {
  font-style: italic;
  font-size: 15px;
  color: #d9d9d9;
}

@media (max-width: 800px) {
    .spanDruhyNadpis2 {
        font-size: 10px;
    }    
}

.divPoznamkyKtreningu {
  padding: 6px;
}

.spanPoznamkyKtreningu {
  font-style: italic;
  font-size: 12px;
}

/* detail cviku */
/*  hlavicka */

.divHlavickaCvik {
  padding: 15px;
}

.divPartiaCviku {
  text-align: center;
  padding: 10px;
  color: #f2f2f2;
}

.divJednotkyCviku {
  text-align: center;
  padding: 10px;
  font-style: italic;
}

/* https://codepen.io/Cheesetoast/pen/kONLOM */

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px; 
	padding: 5px;
 /*	padding: 1px; */
}

.column {
	flex: 1;
    margin: 2px;
	padding: 8px;
    background-color: #262626;
    color: white;
    border: medium solid #737373;
    border-radius: 8px;
}
.column:first-child {
    margin-left: 0;
}
.column:last-child {
    margin-right: 0;
}

@media screen and (max-width: 980px) {
  .columns .column {
	margin-bottom: 5px; 
    flex-basis: 40%;
  }
    .columns .column:nth-last-child(2) {
        margin-right: 0;
    }
    .columns .column:last-child {
        flex-basis: 100%;
        margin: 0;
    }
	}

@media screen and (max-width: 680px) {
	.columns .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
	}
}

/* navazny styl mimo column */

.chlievikAkoColumnMimoColumns {
        margin: 10px;
        border: medium solid #737373;
        border-radius: 8px;
        background-color: #262626;
    }  

/* legenda */

.legenda {
  padding-left: 10px;
  font-size: 11px;
  font-style: oblique;
}

/* vo formularoch */

.legendnadpisform {
  font-size: 26px;
  font-weight: bold;
  padding: 17px;
}

.textformular {
  font-size: 18px;
  font-weight: bold;
}

.inputformular {
  width: 75%;
  padding: 9px;
  margin: 4px 0 10px 0;
  font-size: 18px;
  border-radius: 8px;
}

/** -- css seria -- **/

div.bunkaserie {
  position: relative;
  height: 100%;
  border-right: 1px solid white;
  font-size: 98%;
  text-align: center;
  padding-left: 1px;
  padding-right: 4px;
  color:white;
  min-width: 32px;
}

div.rozcvicovaciaseria {
  background: rgba(255, 77, 166, 0.4); /** #ff4da6 **/
  padding: 3px;
/**  background-image: url("/icons/grid_rozcvicka.jpg");  **/
}

div.bunkaserieblack {
  position: relative;
  height: 100%;
  border-right: 1px solid black;
  font-size: 80%;
  text-align: center;
  padding-left: 1px;
  padding-right: 4px;
  color:black;
  min-width: 32px;
}

.buttonseria {
  background-color: transparent;
  border: none;
  border-bottom: dashed 1px #0088cc; 
}

.buttonseria:hover, .buttonseria:focus {
  /*background-color: transparent;*/
  border: none;
  border-bottom: dashed 1px #0088cc;
  cursor: pointer;
  background-color: #ddd;
}

/** -- spodn� navigacia -- **/

.spodnanavigacia {
  overflow: hidden;
  background-color: rgb(51, 51, 51); /** povodna #333 **/
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

.spodnanavigacia a {
 /** float: left; **/
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.spodnanavigaciaVnutMenu {
    overflow: hidden;
    background-color: rgb(26, 26, 26);
    position: fixed;
    bottom: 65px;
    width: 100%;
    z-index: 2;
    padding: 5px 15px 5px 15px;
}

.tabulkaspodnanavigacia {
  text-align: center;
  border-style: none;
}

div.vnutriTdVspodnomNav {
  position: relative;
  width: 100%;
  height: 65px;
  /** border: 1px solid #73AD21; **/ /** pre kontrolu pozicie **/
}

div.ikonkaVspodnomNav {
  position: absolute;
  top: 10px;
  left: 25%;
  width: 50%;
  height: 50px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.6;
  /** border: 1px solid #73AD21; **/ /** pre kontrolu poz�cie **/
}

/* Use a media query to add a breakpoint at 400px: */
@media screen and (max-width: 400px) {
  div.ikonkaVspodnomNav {
    font-size: 9.5px;
  }
}

.riadokTabulkyVnutorneSpodneMenu {
  vertical-align: text-top; 
  line-height: 1.7;
}

.mikroTextTabulkyVnutorneSpodneMenu {
  line-height: 0.9; 
  padding: 5px;
}

.mikroTextTabulkyVnutorneSpodneMenuSpan {
  font-size: 11px;
  color: #d9d9d9;
  font-style: italic;
}

/** tučné písmo **/
.tucne {
font-weight: bold;
}

/** navigačné buttony **/
.pravyhornyrohbutton {
position: absolute;
top: 30px;
right: 13px;
border-radius: 100px;
border: 1px solid #118858;
width: 85px;
height: 85px;
padding: 5px;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
color: white;
background-color: rgba(22, 182, 176, 0.9);
box-shadow: 1px 2px 2px rgba(128, 128, 128, 0.7); 
}

.pravyhornyrohbutton:hover {
    color: #fff!important;
    background-color: rgb(22, 182, 176)!important
}

.pravyhornyrohbuttonzeleny {
position: absolute;
top: 16px;
right: 12px;
border-radius: 100px;
border: 1px solid #118858;
width: 92px;
height: 92px;
padding: 5px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 2px;
color: white;
background-color: rgba(22, 182, 118, 0.95);
box-shadow: 1px 2px 2px rgba(128, 128, 128, 0.7);
}

.pravyhornyrohbuttonzeleny:hover {
    color: #fff!important;
    background-color: #19cc85
}

.pravyhornyrohbutton2 {
position: absolute;
top: -33px;
right: 91px;
border-radius: 100px;
border: 1px solid #118858;
width: 85px;
height: 85px;
padding: 5px;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
color: white;
background-color: rgba(245, 57, 57, 0.9);
box-shadow: 1px 2px 2px rgba(128, 128, 128, 0.7); 
}

.pravyhornyrohbutton2:hover {
    color: #fff!important;
    background-color: rgb(245, 57, 57)!important
}

.pravydolnyrohbutton {
  position: fixed;
  bottom: 57px;
  right: 25px;
  border-radius: 100px;
  width: 120px;
  height: 120px;
  z-index: 100;
  font-size: 18px;  
  box-shadow: 2px 4px 3px rgba(128, 128, 128, 0.7); 
}

.pravydolnyrohbutton:hover {
    color: #fff!important;
    background-color: rgba(5, 124, 77, 0.9)!important
}

.superscrPoradieCviku {
    font-size: 9px;
    color: #cccccc;
}

.pismoPreTypSerieVmodaly { 
  color: #595959; 
  font-style: italic; 
} 

/** vysvetlivky v tooltipe **/
   .tooltipVysvetlenie {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }

    .tooltipVysvetlenie .tooltipVysvetlenieText {
        visibility: hidden;
        width: 200px;
        background-color: #595959;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -100px;
    }

    .tooltipVysvetlenie .tooltipVysvetlenieText::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #595959 transparent transparent transparent;
    }

    .tooltipVysvetlenie:hover .tooltipVysvetlenieText {
        visibility: visible;
    }
    
/** vysvetlivky v tooltipe zobák v ľavo **/
   .tooltipVysvetlenieVlavo {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }

    .tooltipVysvetlenieVlavo .tooltipVysvetlenieVlavoText {
        visibility: hidden;
        width: 200px;
        background-color: #595959;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -20px;
    }

    .tooltipVysvetlenieVlavo .tooltipVysvetlenieVlavoText::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 10%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #595959 transparent transparent transparent;
    }

    .tooltipVysvetlenieVlavo:hover .tooltipVysvetlenieVlavoText {
        visibility: visible;
    }    
    
/** vysvetlivky v tooltipe siroka bublina **/
   .tooltipVysvetlenieSiroky {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }

    .tooltipVysvetlenieSiroky .tooltipVysvetlenieSirokyText {
        visibility: hidden;
        width: 340px;
        background-color: #404040;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -170px;
    }

    .tooltipVysvetlenieSiroky .tooltipVysvetlenieSirokyText::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #404040 transparent transparent transparent;
    }

    .tooltipVysvetlenieSiroky:hover .tooltipVysvetlenieSirokyText {
        visibility: visible;
    }
    
/** vysvetlivky v tooltipe siroka bublina **/
   .tooltipVysvetlenieSirokyDolava {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }

    .tooltipVysvetlenieSirokyDolava .tooltipVysvetlenieSirokyTextDolava {
        visibility: hidden;
        width: 340px;
        background-color: #404040;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: -440%;
        margin-left: -170px;
    }

    .tooltipVysvetlenieSirokyDolava .tooltipVysvetlenieSirokyTextDolava::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 87%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #404040 transparent transparent transparent;
    }

    .tooltipVysvetlenieSirokyDolava:hover .tooltipVysvetlenieSirokyTextDolava {
        visibility: visible;
    }    

/** vysvetlivky v tooltipe **/
   .tooltipVysvetlenieZobakZlava {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }
    .tooltipVysvetlenieZobakZlava .tooltipVysvetlenieZobakZlavaText {
        visibility: hidden;
        width: 280px;
        background-color: #595959;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        bottom: -260%;
        left: 660%;
        margin-left: -100px;
    }

    .tooltipVysvetlenieZobakZlava .tooltipVysvetlenieZobakZlavaText::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        margin-left: -10px;
        border-width: 5px;
        rotate: 90deg;
        border-style: solid;
        border-color: #595959 transparent transparent transparent;
    }

    .tooltipVysvetlenieZobakZlava:hover .tooltipVysvetlenieZobakZlavaText {
        visibility: visible;
    }    
    
 /** -- **/
   .tooltipVysvetlenieZobakZlavaDetailCviku {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }
    .tooltipVysvetlenieZobakZlavaDetailCviku .tooltipVysvetlenieZobakZlavaDetailCvikuText {
        visibility: hidden;
        width: 320px;
        height: 780px;
        background-color: #595959;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        top: -30px;        

        left: 680%;
        margin-left: -100px;
    }

    .tooltipVysvetlenieZobakZlavaDetailCviku .tooltipVysvetlenieZobakZlavaDetailCvikuText::after {
        content: "";
        position: absolute;
        top: 4%;
        left: 0;
        margin-left: -10px;
        border-width: 5px;
        rotate: 90deg;
        border-style: solid;
        border-color: #595959 transparent transparent transparent;
    }

    .tooltipVysvetlenieZobakZlavaDetailCviku:hover .tooltipVysvetlenieZobakZlavaDetailCvikuText {
        visibility: visible;
    }    
    
 /** -- **/
 
   .tooltipVysvetlenieZobakZlavaSiroky {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }
    .tooltipVysvetlenieZobakZlavaSiroky .tooltipVysvetlenieZobakZlavaSirokyText {
        font-size: 91%;
        visibility: hidden;
        width: 322px;
        background-color: #595959;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        bottom: -150%;
        left: 510%;
        margin-left: -100px;
    }

    .tooltipVysvetlenieZobakZlavaSiroky .tooltipVysvetlenieZobakZlavaSirokyText::after {
        content: "";
        position: absolute;
        top: 62%;
        left: 0;
        margin-left: -10px;
        border-width: 5px;
        rotate: 90deg;
        border-style: solid;
        border-color: #595959 transparent transparent transparent;
    }

    .tooltipVysvetlenieZobakZlavaSiroky:hover .tooltipVysvetlenieZobakZlavaSirokyText {
        visibility: visible;
    }    

 /** -- **/
   .tooltipVysvetlenieZobakZprava {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }
    .tooltipVysvetlenieZobakZprava .tooltipVysvetlenieZobakZpravaText {
        visibility: hidden;
        width: 280px;
        height: 200px;
        background-color: #595959;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        bottom: -710%;
        left: -1000%;
        margin-left: -100px;
    }

    .tooltipVysvetlenieZobakZprava .tooltipVysvetlenieZobakZpravaText::after {
        content: "";
        position: absolute;
        top: 25%;
        left: 0;
        margin-left: 280px;
        border-width: 5px;
        rotate: -90deg;
        border-style: solid;
        border-color: #595959 transparent transparent transparent;
    }

    .tooltipVysvetlenieZobakZprava:hover .tooltipVysvetlenieZobakZpravaText {
        visibility: visible;
    }
    
 /** -- **/
   .tooltipVysvetlenieZobakZpravaOpakZataz {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }
    .tooltipVysvetlenieZobakZpravaOpakZataz .tooltipVysvetlenieZobakZpravaOpakZatazText {
        visibility: hidden;
        width: 320px;
        height: 670px;
        background-color: #595959;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        top: -145px;
        right: 28px;
   /**     margin-left: -100px; **/
    }

    .tooltipVysvetlenieZobakZpravaOpakZataz .tooltipVysvetlenieZobakZpravaOpakZatazText::after {
        content: "";
        position: absolute;
        top: 22%;
        right: -11px;
        margin-left: 280px;
        border-width: 5px;
        rotate: -90deg;
        border-style: solid;
        border-color: #595959 transparent transparent transparent;
    }

    .tooltipVysvetlenieZobakZpravaOpakZataz:hover .tooltipVysvetlenieZobakZpravaOpakZatazText {
        visibility: visible;
    } 

 /** -- **/
   .tooltipVysvetlenieZobakHore {
        position: relative;
        display: inline-block;
        /** border-bottom: 1px dotted gray; **/
    }
    .tooltipVysvetlenieZobakHore .tooltipVysvetlenieZobakHoreText {
        visibility: hidden;
        width: 280px;
        background-color: #404040;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
      /**  bottom: -146px; bottom vzdy nastavit podla vysky textu v style konkretny subor
                              -  nakolko je tooltip dmrom nadol
           bottom: -1060%;  povodne bolo v percentach **/       
        left: 260%;
        margin-left: -185px;
    }

    .tooltipVysvetlenieZobakHore .tooltipVysvetlenieZobakHoreText::after {
        content: "";
        position: absolute;
        top: -10px;
         /**  top: -8%;  povodne bolo v percentach **/        
        left: 0;
        margin-left: 140px;
        border-width: 5px;
        rotate: 180deg;
        border-style: solid;
        border-color: #404040 transparent transparent transparent;
    }

    .tooltipVysvetlenieZobakHore:hover .tooltipVysvetlenieZobakHoreText {
        visibility: visible;
    }        
    
/** priehladnost ikonky vysvetlivky **/
.priehladnostVysvetlivkaIkonka {
  opacity: 0.7;
}    

/** chlievik pre rozne funkcie v modaly serie **/
.inlineRiadokCheckboxModal {
  display: inline; 
  width: 100px;
  height: 100px;
  line-height: 35px; 
  padding: 5px;
  border: 0.5px solid #4d4d4d;  
  border-radius: 8px;
  background-color: rgba(230, 230, 230, 0.8); 
  font-size: 14px;
 /** font-style: italic; -- test pozastavene sikme pismo **/
}

/** bunka v tabulke na vypis cviku pre pole poradie v treningu a na portiu **/
.poradieVtreninguApartiuTabulka {
        min-width: 145px;
        font-size: 13px;
    }
    
/* Use a media query to add a break point at 600px: poznámka orig bolo na 800px.... */
@media screen and (max-width: 600px) {
 .poradieVtreninguApartiuTabulka {
     /* The width is 100%, when the viewport is 600px or smaller */
  font-size: 70%;
  }
}    
    
/** vyhladavac povodny, prvy **/
.vyhladavacPrvy {
        border: medium solid #737373; 
        border-radius: 8px;
        padding-left: 4px; 
        margin-top: 8px; 
        margin-bottom: 2px; 
        line-height: 35px; 
        width: 63%; 
        text-align: center;
    }    
    
.vyhladavacPrvy2 {
        border: medium solid #737373; 
        border-radius: 8px;
        padding-left: 8px; 
        margin-top: 8px; 
        margin-bottom: 2px; 
        line-height: 35px; 
        width: 84%; 
        text-align: center;
    }   
    
/** stylovanie ako prve bolo v nastaveniach, vypinac, select **/
    
.switchVypinac {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switchVypinac input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.sliderVypinac {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderVypinac:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderVypinac {
  background-color: #2EE59D;
}

input:focus + .sliderVypinac {
  box-shadow: 0 0 1px #2EE59D;
}

input:checked + .sliderVypinac:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.sliderVypinac.roundVypinac {
  border-radius: 34px;
}

.sliderVypinac.roundVypinac:before {
  border-radius: 50%;
}

/* select a input styl */

select {
  height: 30px;
  min-width: 55px;
  font-size: 15px;
  border: medium solid #737373;
  border-radius: 8px;
}     

.selectStyl1 {
  height: 30px;
  min-width: 55px;
  font-size: 15px;
  border: medium solid red;
  border-radius: 8px;
}  

.inputStyl1 {
  height: 30px;
  /** min-width: 55px; **/ 
  font-size: 15px;
  border: medium solid #737373;
  border-radius: 8px;
}  

.inputStyl2 {
  height: 33px;
  /** min-width: 55px; **/ 
  font-size: 25px;
  font-weight: bold;
  border: medium solid #737373;
  border-radius: 8px;
} 

@media (max-width: 600px) {
    .inputStyl2 {
       height: 30px;
       font-size: 23px;
       width: 240px;
    }    
}

.inputStyl3 {
  height: 25px;
  /** min-width: 55px; **/ 
  width: 600px;
  font-size: 19px;
  font-weight: bold;
  border: medium solid #737373;
  border-radius: 8px;
} 

@media (max-width: 600px) {
    .inputStyl3 {
       height: 22px;
       font-size: 18px;
       width: 95%;
    }    
}

.vyberFarbyInput {
  width: 80px; 
  height: 80px; 
  border-radius: 8px;
}

  /** editacie popis cviku **/  
    
.editaciaNadpisCviku {
  border-bottom: dashed 1px #0088cc;
  font-size: 26px;
  font-weight: bold;
  color: #f2f2f2;
}

.editaciaNazovPartie {
  border-bottom: dashed 1px #0088cc;
  font-size: 21px;
  font-weight: bold;  
}

.editaciaJednotky {
  border-bottom: dashed 1px #0088cc;
  font-size: 18px;  
}    


   /* styl uvodna strana - neprihlaseny  */

.columnsUvod {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px; 
	padding: 5px;
 /*	padding: 1px; */
}

.columnUvod {
	flex: 1;
    margin: 2px;
	padding: 8px;
  /**  background-color: #262626;
    color: white;
    border: medium solid #737373;
    border-radius: 8px; **/
       /*  border: medium solid #737373; zapnut pri pozicovani  */
}
.columnUvod:first-child {
    margin-left: 0;
}
.columnUvod:last-child {
    margin-right: 0;
}

@media screen and (max-width: 980px) {
  .columnsUvod .columnUvod {
	margin-bottom: 5px; 
    flex-basis: 40%;
  }
    .columnsUvod .columnUvod:nth-last-child(2) {
        margin-right: 0;
    }
    .columnsUvod .columnUvod:last-child {
        flex-basis: 100%;
        margin: 0;
    }
	}

@media screen and (max-width: 680px) {
	.columnsUvod .columnUvod {
		flex-basis: 100%;
		margin: 0 0 5px 0;
	}
}

.uvodnaStranaLogo {
    width: 240px;
    margin-top: 5%;
}

.uvodnaStranaNadpis {
    font-family: boca, serif;
    font-size: 50px; 
    color: #16b676;
    transform: rotate(-2deg);
    text-align: left;
    } 

@media (max-width: 768px) {
    .uvodnaStranaLogo {
        width: 200px;
    } 
}

@media (max-width: 600px) {
    .uvodnaStranaLogo {
        width: 150px;
    }
    .uvodnaStranaNadpis {
        font-family: boca, serif;
    font-size: 45px; 
    color: #16b676;
    transform: rotate(-2deg);
    }     
}

.uvodSubheadline {
    font-size: 16px;
}

.uvodBullet {
    font-size: 14px; 
    color: #e6e6e6; 
    margin-top: 22px;
}

.uvodBullet2 {
    font-size: 14px; 
    color: #d9d9d9; 
    font-style: italic;
}

.uvodRegistry {
    color: #a6a6a6; 
    font-size: 12px;
    margin-top: -8px;
}

/** vytvorenie planu cas - v planoch **/
.subscrVytvoreniePlanu {
    font-size: 12px;
    font-weight: lighter;
    font-style: italic;   
    text-transform: lowercase;
    color: #333333;
}   
    
/** slider k fotkam - napr. v faq **/    
    
/** * {box-sizing: border-box} **/

.slideFotky {display: none}
/** img {vertical-align: middle;} **/

/* Slideshow container */
.slideFotkyShow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prevKslidu, .nextKslidu {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.nextKslidu {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prevKslidu:hover, .nextKslidu:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.textKfotkeVSlide {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.cislovanieText {
  color: black;
  background-color: #f43325;
  font-size: 14px;
  font-weight: bold;  
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dotKslidu {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #16b676;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dotKslidu:hover {
  background-color: #19cc85;  
}

/* Fading animation */
.fadeKfoto {
  animation-name: fade;
  animation-duration: 1.2s;
}

@keyframes fadeKfoto {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prevKslidu, .nextKslidu, .textKfotkeVSlide {font-size: 11px}
}    

/* Detail cvik styl - hlavicka */
.nadpisDetailCvik {
margin: 16px;
}

.poznamkaDetailCvik {
color: grey;
margin: 16px;
}

.skupinaDetailCvik {
margin: 16px;
font-size: 22px;
}

.jednotkaZatazeDetailCvik {
  padding: 0 0 16px 16px;
  float: left;
  font-size: 22px;
  width: 50%;
}

.jednotkaCasuDetailCvik {
  padding: 0 0 16px 16px;
  float: left;
  font-size: 22px;
  width: 50%; 
}

@media screen and (max-width: 600px) {
  .jednotkaZatazeDetailCvik, .jednotkaCasuDetailCvik {
    width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
  }
}

/* Detail cvik graf canvasjs */
.grafCanvasJs1 {
    height: 310px;
        width: 100%;
}

@media (max-width: 600px) {
    .grafCanvasJs1 {
        height: 160px;
        width: 100%;
    }
}

.grafCanvasJs2 {
    height: 345px; 
        width: 100%;
}

.colorbox {
    float: left;
    height: 20px;
    width: 20px;
    margin-bottom: 15px;
    border: 1px solid black;
    clear: both;
}

 /** farebna zalozka - obdobie: vzor: https://codepen.io/wesleycole/pen/nrKywJ **/
.ribbon2-wrapper {
  width: 37px;
  height: 37px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  .ribbon2 {
    /**font-size: 6px;
    color: #333;
    text-align: center; **/
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    -ms-transform:     rotate(-45deg);
    -o-transform:      rotate(-45deg);
    position: relative;
    padding: 4px 0;
    top: 2px;
    left: -25px;
    width: 70px;
  }
}
    
/** centrovanie na stred pc-mobil **/    
   
.responsiveStredText {
  padding: 10px;
  margin-left: 5%;
  margin-right: 5%; 
  /* float: left; */
  width: 89%; 
}

.responsiveStredText h1 {
  font-size: 29px; 
}

.responsiveStredText h2 {
  font-size: 27px; 
  text-align: center; 
}

.responsiveStredText h3 {
  font-size: 24px; 
}

.responsiveStredText h4 {
  font-size: 19px; 
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .responsiveStredText {
  margin-left: 0;
  margin-right: 0;  
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}    
    
.responsiveStred {
  margin-left: 5%;
  margin-right: 5%; 
  /* float: left; */
  width: 89%; 
}
    
@media screen and (max-width: 1000px) {  /* ine jednotky? */
  .responsiveStred {
  margin-left: 0;
  margin-right: 0;  
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}      

.vysvetlenieKnadpisomVmodaloch {
  font-size: 80%; 
  font-style: italic; 
  color: #f2f2f2;
}
    
  /* pouzivane classy najma vo vysvetlivkach v tooltipoch kvoli formatu yaml na preklady json */  
.farba-bfbfbf {
    color: #bfbfbf;
}

.vahafontu-bold {
    font-weight: bold;
}    

.styl-tdcervena-bold {
    font-weight: bold; 
    color: #f5493d;
} 

.poziciaZalozkyDetail {
  position: absolute;
  top: -6px; 
  right: 1%;
  
} 

@media screen and (max-width: 800px) {
  .poziciaZalozkyDetail {
    right: 4%;
  }
}

.cervenykruzokVnotify {
  position: absolute;
  top: -5px;
  left: 42%;
  width: 15px;
  height: 15px;
   border-radius: 100px;
  background-color: #f43325;
}

/* Use a media query to add a breakpoint at 400px:*/
@media screen and (max-width: 400px) {
  .cervenykruzokVnotify {
    left: 15%;
  }
}

.cervenykruzokVnotifyPismo {
  text-align: center;
  font-size: 12px;
}

.noveOznamenie {
    width: 100%;
    height: 80px;
    background: #16b676;
    animation: mymove 8s normal;
}

@keyframes mymove {
    from {background-color: #16b676;}
    to {background-color: transparent;}
}
/** nastylovanie velkosti pisma v modaly detailu cviku v zapis_cvik **/

.marTopMin10 {
  margin-top: -10px;
}

.fonSiz80perBold {
  font-weight: bold; 
  font-size: 80%;
}

.premennaPlanovaneSerieOpak {
  font-size: 150%; 
  font-weight: bold;
}

.podnadpisKreportomCviku {
  font-size: 120%; 
  font-style: italic; 
  color: #f2f2f2;
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .podnadpisKreportomCviku {
    font-size: 80%;
  }
}

.onlyTransform {
    text-transform: uppercase;
}


/** v nastavenie_plan styl **/
    tbody.labels22 {
        display: contents;
    }

    tbody.labels22 td {
        color: white;
     padding: 1em;
    font-size: 1.1em;
  border-radius: 0.5em 0.5em 0 0;
        background: #4d4d4d;  /** orig.bolo: #171717 **/
        text-transform: uppercase;
        font-weight: bold;
        border-bottom: 2px solid #118858;
            transition: 300ms;
    }


tbody.labels22 td:hover {
  background: #404040; /** orig.bolo: #202020 **/
}

.subscrVytvoreniePlanu22 {
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    text-transform: lowercase;
    color: #333;
}

/* responzivny nadpis v oknach kolumnov - detail_cvik */
@media screen and (max-width: 800px) {
  .h2nadpisResponsiveVoknach {
  padding: 0 9px 0 9px;
  }
}

/* button pridaj cvik v detaile treningu a planu padding */
.buttonPridajCvikPadding {
  padding: 0 15px 0 15px;
}

/* responsiv 3 kolum noviny v about a download td app */
.novinovyStylAbout {
  column-width: 400px;
  padding: 30px;
  column-gap: 30px;
}

/* pouzite v nadpisoch tem vo faq */
.nadpisyTemVoFaq {
  font-size: 19px;
}

@media screen and (max-width: 800px) {
  .nadpisyTemVoFaq {
    font-size: 14px; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

.detailCvikuPopisKjednotkam {
  font-size: 12px; 
  font-style: italic; 
  color: #e6e6e6;
}

.last_actual_documents {
  font-size: 80%; 
  font-style: italic; 
  color: #ccc;
}


.onBoardingHint {
    background-color: white;
    color: black;
    padding: 13px;
    line-height: 1.4;
    border-radius: 40px;
    font-style: italic;
    font-weight: bold; 
    margin-left: 250px;
    margin-right: 250px; 
}


@media screen and (max-width: 1000px) {
  .onBoardingHint {
    padding: 12px;  
    margin-left: 80px;
    margin-right: 80px;
  }
}


@media screen and (max-width: 750px) {
  .onBoardingHint {
    padding: 11px;  
    margin-left: 35px;
    margin-right: 35px;
  }
}

.buttonUkonciTrening {
    position: fixed;
    bottom: 155px;
    right: 0;
    border-radius: 100px 0 0 100px;
    border: none;
    width: 120px;
    height: 60px;
    z-index: 20;
    box-shadow: -3px -4px 3px  rgba(191, 191, 191, 0.7);
    display: block; 
    background-color: rgba(22, 182, 118, 1);
    font-size: 12px;
    font-weight: bold;
    color: white;
    padding: 10px;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
}

.buttonUkonciTrening:hover {
    background-color: rgba(46, 229, 157, 0.8)!important
}

.poziciaZalozkyStatistiky {
  position: absolute;
  top: -40px;
  right: 25px;
}

.poziciaNadpisStatistiky {
  text-align: center; 
  margin: 35px 0 35px 0;
  font-size: 27px;
}

.poziciaBodyStatistiky {
  font-size: 18px; 
  text-align: center; 
  margin: -10px 0 20px 0;
}

.akoXyzVTreninguPopisVTabulkeModalCvik {
    font-size: 9px;
    color: #ccc;
}