@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

@font-face {font-family: myFirstFont;

            src: url('../Includes/specialisation/Specialisation.ttf') format('truetype');}

@font-face {font-family: mySecondFont;

            src: url('../Includes/droidSansMono/DroidSansMono.ttf') format('truetype');}

            @font-face {font-family: myThirdFont;

                src: url('../Includes/open-sans/OpenSans-Bold.ttf') format('truetype');}



* {

    box-sizing: border-box;

    margin:0;

    padding:0;

    font-family: "Montserrat", sans-serif;

}



/*variables*/





body {

    /*background-color:#e9e8e8;*/

    background-image: url(../template/images/pozadi2.jpg);

    background-repeat: no-repeat;

    min-height: 100vh; 

    

}



.obal {

    width: 100%;

    max-width: 420px;

    margin: 8px auto;

    padding-top: 4px;

}



@media (min-width: 720px) or (orientation:landscape) {

    

    .obal {max-width: 600px;}}



@media (orientation:landscape) {

    .tableWrap {height: 234px;}

    .vysledky tr .poradi {padding-bottom: 0px;}

    nav ul {display: none;}

    nav {display: none;}



}



thead tr th {

    position: sticky;

    top: 0px;

    height: 42px;

    border-bottom: 1.5px solid white;

    background-color:#a349a4;

    color:#fff;

}



table {

    border-collapse: collapse;

}



.centr {

    text-align: right;

    

}



.centr li a {

   font-size: 1rem;

}



.container {

    display: grid;

    width: 100%;

    margin: 0px auto;

}





 /*   

    grid-template-columns: 1fr 1fr 1fr 1fr;

    grid-template-rows: 60px 1fr 30px;



    grid-template-areas:

    "header header header header"

    "main main main main"

    "footer footer footer footer";

}





.container2 {

    width: 100%;

    height: 60px;

    display: block;

    margin: 0 auto;

    background-color: rgb(185, 179, 179);

    position: fixed;

}

*/



.vlevo {

    float: left;

    margin-left: 10px;

    width: 150px;

}



.vlevo li{

    margin-top: 15px;

    display:flex;

}



.vpravo {

    float: right;

    margin-right: 10px;

    margin-top: 6px;

    display: flex;

}



.vpravo a {

    color: #fff;

}



/*.header {

    position: fixed;

    height: 120px;

    margin: 0 auto;

    width: 100%;

    background-color: #c9cd8c;

    margin-bottom: 10px;

}



.header2 {

    grid-area: header;

    position: fixed;

    width: 100%;

    height: 60px;

    margin: 20px auto;

    background-color: #a349a4;

    display: block;

    margin-bottom: 10px;

}



.img {

    background-image: url(../Includes/bg_home.jpg);

    width: 40%;

    height: 95vh;

}



main {

    grid-area: main;

}*/



footer {

    background: inherit;

    position: fixed;

    color: #fff;

    text-align: right;

    font-size: 0.6rem;

    width: 100%;

    height: 70px;

    bottom:0;

    padding-top: 10px;

    padding-right:8px;

    

}



nav {

    width: 100%;

    background-color: #535d74;

    height: 60px;

    position: sticky;

    top: 0;

        

}



.zahlavi {

    width: 100%;

    background-color: #535d74;

    height: 60px;

    position: sticky;

    top: 0;

    

        

}





/*nav p {

    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

    color:#fff;

    font-size: 1rem;

    line-height: 40px;

    display: block;

    text-align: left;

    width: 100%;

    background-color: #fff;

    font-weight: 700;

}*/



nav ul {

    display: block;

    margin: 0 auto;

    width: 100%;

    height: 60px;

}



nav p:first-child {

    background-color:#535d74;

}



nav ul li {

    list-style: none;

    position: relative;

    text-align: center;

    display: inline-block;

}



nav ul li a {

    display: block;

    color:#fff;

    font-size: 0.6rem;

    padding: 14px 8px;

    text-decoration: none;

}



nav ul li ul {

    display: none;

    position: absolute;

    background-color: #535d74;

    padding: 0px;

    border-radius: 4px 4px 4px 4px;

    width: 120px;

    height: 130px;

}



nav ul li ul li a {

    padding: 8px 2px;

    border-radius: 4px;

    color: #fff;

}



/*nav ul li ul li a:hover {

    background-color: #f3f3f3;



}*/



nav ul li ul li {

    width: 100px;

    text-align:left;

}



nav ul li:hover ul {

    display: block;

}



a:hover {

    color: #ff322b; 

}



.odhlaseni {

    float: right;

}



/* registrační, přihlašovací formulář */



.wrapper {

    max-width:420px;

    width: 90%;

    background: rgb(240,236,236);

    margin: 20px auto;

    padding: 30px;

    box-shadow: 1px 1px 2px rgba(126, 124, 124, 0.125);

    border-radius: 10px;

    background-image: 0;

}



.wrapper1 {

    max-width:1080px;

    width: 90%;

    background: rgb(240,236,236);

    margin: 20px 10px;

    padding: 30px;

    box-shadow: 1px 1px 2px rgba(126, 124, 124, 0.125);

    border-radius: 10px;

    background-image: 0;

    position: relative;

    

}







.wrapper .title {

    font-size: 0.8em;

    font-weight: 600;

    margin-bottom: 25px;

    text-align: center;

    color: #242323;

}



.wrapper .form {

    width: 100%;

    

}



.wrapper .form .input_field {

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    

}



.wrapper .form .input_field label {

    width: 200px;

    font-weight: 600;

    color: #242323;

    margin-right: 10px;

    font-size: 0.6em;

}



.wrapper .form .input_field .input {

    width: 100%;

    outline: none;

    border: 1px solid #d5dbd9;

    font-size: 0.6em;

    padding: 8px 10px;

    border-radius: 3px;

    transition: all 0.3s ease;

}



.wrapper .form .input_field .custom_select {

    -webkit-appearance: none;

    appearance: none;

    position: relative;

    width: 100%;

    height: 30px;

    font-size: 0.6em;

}



.wrapper .form .input_field .custom_select select {

    border: 1px solid #d5dbd9;

    width: 100%;

    height: 100%;

    padding: 8px 10px;

    border-radius: 3px;

    outline: none;

    font-size: 1em;

}



/*šipka v rozbalovacím menu, už tam je, i když v černé barvě*/

/*.wrapper .form .input_field .custom_select:before {

    content: "";

    position: absolute;

    top: 12px;

    right: 10px;

    border: 8px solid;

    border-color: #d5dbd9 transparent transparent transparent;

    pointer-events: none;



} */



.wrapper .form .input_field .input:focus,

.wrapper .form .input_field select:focus {

    border: none;

}



.wrapper .form .input_field .btn {

    width: fit-content;

    margin:16px auto 5px auto;

    padding: 8px 10px;

    font-size: 0.7em;

    border: 0;

    background: #0088a9;

    color: #fff;

    cursor: pointer;

    border-radius: 10px;

    outline: none;

    text-align: center;

    align-items: center;

}



.wrapper .form .input_field:last-child{

    margin-bottom:0;

}



.wrapper .form .input_field .btn:hover{

    background: rgba(0,136,169,0.8);

}



.ermsg {

    text-align: center;

    font-size: 0.7em;

    font-weight: 700;

    color: red;

}



@media (max-width: 420px) {



    .wrapper {

        margin: 5px auto;

    }



    .wrapper1 {

        margin: 5px auto;

    }



    .wrapper .form .input_field{

        flex-direction: column;

        align-items: flex-start;

    }



    .wrapper .form .input_field label{

        margin-bottom: 5px;

    }



    .tracklist {

        max-width: 420px;

        font-size: 0.4em;

        flex-direction: column;

    }



    .tabtitle1 {

        font-size: 1em;

    }



   /* .detail_t tbody {width: 98%; min-width: 600px;}*/

}



/* Tabulka v sekci přidat trať */



.tracklist {

    border-collapse: collapse;

    margin: 0px auto;

    font-size: 0.6em;

    width: 100%;

}



.tabtitle1 {

    margin: 10px;

    text-align: center;

}



.tracklist thead tr {

    background-color: #fff;

    color: #242423;

    text-align: left;

    line-height: 50px;

    padding: 0px;

    font-weight: bold;

}



.tracklist th, .tracklist td {

    padding: 3px 5px;

}



.tracklist tbody tr {

    border-bottom: 1px solid #dddddd;

    color: #242423;

    background-color:#fff;

}



.cislo {

    text-align: right;

}



.tracklist tbody tr:nth-of-type(even) {

    background-color: #c8dcfa;

}



.rank, .nazev {

    font-weight: bold;

}



.rank a {

    text-decoration: none;

}



.trackSelect {

    -webkit-appearance: none;

    appearance: none;

    position: relative;

    display: block;

    font-size: 1.2em;

    text-align: left;

}



.tabulka tr .trackSelect {

    width: 120px;

}



#list {

    font-size: 1em;

    width: 120px;

    border:none;

    font-weight: 700;

    color:rgb(169, 25, 25)

}



.vpravo {

    text-align: right;

}



/*detail trati*/



.detail_t tbody{

    width: 100%;

    display: grid;

    font-size: 11px;

    padding-bottom: 20px;  

}



.nazev-t{

    color: #242423;

    font-weight: 700;

    font-size: 0.82rem;

    text-align: center;

    background-color: #fff;

    border: 0;

    border-radius: 6px;

    outline: none;

    margin: 0 5px;

    padding: 5px 0;

}



.detail_t tbody tr{

    padding: 10px 0 0 10px;

    max-width: 638px;

}



.detail_t tbody tr td{

    min-width: 150px;

}



.btn {

        margin-top: 10px;

        margin-bottom: 20px;

        border: 0;

        background: #0088a9;

        color: #fff;

        cursor: pointer;

        border-radius: 5px;

        outline: none;

        text-align: center;

        align-items: center;

        font-size: 60%;

        width: 100px;

        padding: 5px 5px;

}



/*Tabulka Seznam tratí v Moje tratě*/



.tabulka {

    border-collapse: collapse;

    margin: 0px auto;

    width: 100%;

    max-width: 420px;

    background-color: #fff;

    table-layout: fixed;

    font-weight: 700;

    color:#242323;

}



.tabulka tr th {

    margin: 0px;

    font-size: 0.6rem;

    background-color: #fff;

    padding: 10px 0px 10px 5px;

    color: grey;

    border-bottom: 3px solid #c8dcfa;

}



.tabulka tr .tracknum {

    width: 5%;

}



.tabulka tr .trackname {

    width: 30%;

}



.tabulka tr .trackm {

    width: 12%;

    text-align: right;

}



.tabulka tr .tracksel {

    width: 38%;   

}



.tabulka tr {

    margin: 10px;

    font-size: 0.6rem;

    text-align: left;

}



.tabulka tr td {

    padding: 10px 0px 10px 5px;

    font-size: 0.6rem;

    border-bottom: 1px solid #c8dcfa;

}



.tabulka tr:nth-of-type(odd) {

    background-color: #fff;

}



.btn-nahled, .btn-vysledky {

    border-style: none;

    border-radius: 5px;

    padding: 5px 5px;

    font-size: 0.6rem;

}



.btn-nahled a, .btn-vysledky a {

    text-decoration: none;

    color: #fff;

    font-size: 0.8em;

}



.btn-nahled {

    background-color:#f87c74;

}



.btn-vysledky {

    background-color:#0088a9;

}



.last {

    padding: 30px;

    text-align: center;

}



.lastbut {

    text-align: right;

}



.vysledky .verybroad {

    width: 21%;

   

}



.vysledky .broad {

    width: 21%;

    font-weight: bold;

    text-align: right;

    padding-right: 5px;    

}



.vysledky .semibroad {

    width: 18%;

    

}



.vysledky .ultranarrow {

    width: 4%;



}



/*tabulka dosažených časů*/





/*.vysledky tr:nth-of-type(1) {

    background-color: rgb(249, 235, 155);

    top: 0px;

    position: sticky;

       

}*/



.vysledky tbody .zaznam-denik:nth-of-type(1) {

    background-color: rgb(249, 235, 155);

    top: 42px;

    position: sticky;

    

        

}





.tableWrap {

    width: 98%;

    max-height: 456px;

    overflow: auto;

    margin: 8px 4px;

    

}



.tableWrap1 {

    max-height: 580px;

    overflow: auto;

    margin: 8px 4px;

    width: 100%;

    

}



.okno {

    max-height: 580px;

    overflow: auto;

    margin: 8px 4px;

    width: 100%;

    

}



.vysledky {

    border-collapse: collapse;

    margin: 0 auto;

    width: 100%;

    max-width: 600px;

    background-color: rgb(237, 241, 241);

    table-layout: fixed;

    max-height: 484px;

}



.vysledky tr td {

    padding: 8px 5px 8px 2px;

    width: fit-content;

    text-align: right;

    font-size: 0.7rem;

    

      

}



.vysledky tr th {

    margin: 0px;

    font-size: 0.6rem;

    background: #a349a4;

    padding: 10px 2px 10px 2px;

    color: #fff;

    position: sticky;

    top: 0px;

    height: 44px;        

       

}



.vysledky tr {

    font-size: 0.7rem;

    

}





.vysledky tr:nth-of-type(even) {

    background-color: #fff;

}



.vysledky tr .poradi {

    padding-bottom: 17px;

}



.vysledky tr .rank {

    padding-bottom: 20px;

}



.vysledky tr .prezdivka {

    padding: 10px 0px 10px 5px;

    width: 32%;

    font-weight: 600;

    font-size: 0.6rem;

    text-align: left;

    

}



.vysledky tr .cas {

    font-weight: 500;

    font-family: myThirdFont;

    color: #242323;

           

}



.vysledky tr .datum {

    font-family: myThirdFont;

    text-align: right;

    font-size: 0.55rem;

    color:#242323;

    

}



.vysledky tr .highlight-datum {

    font-family: myThirdFont;

    text-align: right;

    font-size: 0.55rem;

    font-weight: 100;

    color:rgb(25, 25, 216, 0.8);

}





/* Formulář zadání času */



.form_time {

    max-width: 320px;

    width: 100%;

    margin: auto auto;

    padding: 30px;

    margin-top: 20px;

    box-shadow: 2px 2px 2px 2px rgba(126, 124, 124, 0.5);

    border-radius: 10px;

    background-image: 0;

    color:#242323;

    background-color:#e9e8e8;

    

}



.form_time .title {

    font-size: 1.0 rem;

    font-weight: 500;

    margin-bottom: 25px;

    text-align: center;

    color: #242323;}



.form_time .form {

    width: 100%;

    font-size: 0.8rem;

    margin-top: 10px;    

}



.form_time .form .input_field {

    margin-top: 10px;

    margin-bottom: 10px;

    display: inline-block;

    align-items: center;

    width: 100%;

}





.form_time .form .input_field label {

    width: 50px;

    color: #242323;

    margin-right: 10px;

    font-size: 0.8rem;

}





.input_cas {

    width: 35px;

    outline: none;

    border: 1px solid #d5dbd9;

    font-size: 0.7rem;

    padding: 8px 0px;

    border-radius: 3px;

    transition: all 0.3s ease;

    margin-top: 5px;

    text-align: center;

    display: inline-block;

}



.input_cas::-webkit-outer-spin-button,

.input_cas::-webkit-inner-spin-button {

    -webkit-appearance: none;

}



.form_time .form .input_field .input_date {

    

    color: #242323;

    outline: none;

    border: 1px solid #d5dbd9;

    font-size: 0.8rem;

    padding: 8px 10px;

    border-radius: 3px;

    margin-top: 5px;

}



.form_time .form .input_field .input_data {

    

    color: #242323;

    outline: none;

    border: 1px solid #d5dbd9;

    font-size: 0.8rem;

    padding: 8px 10px;

    border-radius: 3px;

    margin-top: 5px;

    max-width: 240px;

}



.btn-btn {

    width: 98%;

    position: relative;

    margin-left: 4px;

    margin-top: 7px;

    padding: 8px 10px;

    font-size: 0.7rem;

    border: 0;

    background: #0088a9;

    cursor: pointer;

    border-radius: 5px;

    outline: none;

    text-align: center;

    align-items: center;

    color: #fff;        

}



.btn-btn a {

    text-decoration: none;

    color:#fff;

}





/*Formulář filtrování výsledků*/





.checkboxes {

    width: 100%;

    clear: none;

    margin-top: 5px;

}





.filtr_select select {

    width: 100%;

    margin-top: 5px;

    margin-bottom: 10px;

    color: #242323;

    font-size: 0.6rem;

    border-radius: 3px;

    border-color:rgba(126, 124, 124, 0.5);

    padding: 2px;

}



fieldset {

    overflow: hidden;

    border: none;

    display: block;

    

}



fieldset label {

    

    clear: none;

    display: inline;

    margin: 2px 0px 5px 0px;

}



fieldset input label {

    color:aquamarine;

}



fieldset p {

    font-size: 0.7rem;

    margin-bottom: 5px;

   }



fieldset input {

    font-size: 0.5rem;

}



input[type=radio],

input.radio {

    /*float: left;*/

    clear: none;

    margin: 5px 0px 0px 1px;

    padding-top: 4px;

}



.timegap {

    width: 100%;

    height: 20px;

    margin-top: 10px;

}



/*label[id="a"] {

    color: red;

}*/



/*Zvýraznění přihlášeného uživatele ve výsledcích*/



.highlight {

    color: rgb(169, 25, 25, 0.8);

}



.highlight_bold {

    color:  rgb(25, 25, 216, 0.8);

    font-weight: 700;

}



.vysledky tr .highlight_prezdivka {

    color:  rgb(25, 25, 216);

    font-weight: 700;

    text-align: left;

    width: 32%;

    padding: 10px 0px 10px 5px;

    font-size: 0.6rem;

    

    

}



.vysledky tr .highlight_cas {

    color: rgb(25, 25, 216, 0.8);

    font-weight: 500;

    text-align: right;

    font-variant-numeric: tabular-nums;

    font-size: 0.7rem;

    font-family: myThirdFont;

    

}



.vysledky tr .highlight_cas .setin {

    color: rgb(25, 25, 216, 0.8);

    font-weight: 300;

    text-align: right;

    font-variant-numeric: tabular-nums;

    font-size: 80%;

    font-family: myThirdFont;

}



.vysledky tr .cas {

    font-weight: 500;

    text-align: right;

    font-variant-numeric: tabular-nums;

    font-size: 0.7rem;

}



.smazat {

    font-size: 80%;

    background-color: #ff322b;

    border: none;

    padding: 1px 2px;

    border-radius: 2px;

}



.smazat a {

    text-decoration: none;

    color:white;

}



#logo{

    color: #fff;

    font-size: 1.5rem;

    display: flex;

    font-weight: 500;

}



#logoS{

    font-family: "myFirstFont";

    color: #00aeff;

    font-size: 2.4rem;

    font-weight: 700;

    margin-top: 5px;

    

}



.centrlog{

    text-align: left;

    margin-top: 15px;

    color: #00aeff;

}



@media (min-width: 550px) {

    .container {width: 80%;};

    .okno {width: 1600px;}

    

    

    

        

}



@media (min-width: 380px) {

    .container {width: 90%;};

    

}



.bezpozadi {

   background-color: #ddd;    

}



.textpole {

    width: 60%;

    text-align: left;

    margin: 0px auto;

    padding-top: 20px;

    padding-bottom: 110px;

    padding-left: 20px;

    padding-right: 20px;

    background-color: #fff;



}



.bezpozadi-intro {

   background-color: #ddd;

   height: 712px;    

}



.textpole-intro {

    width: 60%;

    height: 712px;

    text-align: left;

    margin: 0px auto;

    padding-top: 20px;

    padding-bottom: 110px;

    padding-left: 20px;

    padding-right: 20px;

    background-color: #fff;



}



@media only screen and (max-width: 600px){



.textpole {

    width: 100%;

    padding: 30px 10px;

}



.textpole-intro {

    width: 100%;

    padding: 30px 10px;

    max-height: 100vh;

}

}





.vysledky tr .jmeno {

    font-family: myThirdFont;

    text-align: left;

    padding-left: 3px;

}



.vysledky tr .time-vysl {

    padding-right: 8px;

}





.vysledky tr .por {

    font-family: myThirdFont;

    text-align: right;

    padding-right: 3px;

}





.vysledky tr .klub {

    font-family: myThirdFont;

    text-align: left;

    padding-left: 10px;

    align-self: center;

    font-size:78%;

    color: blue;

}