body{
    display:flex;
    text-align: center;
    justify-content: center;
    font-family: calibri;
    }


/* Tabelle zentrieren */
table {
    border-collapse: collapse;
    width: 100%; /* Automatische Anpassung an den Inhalt */
    margin: 0 auto;
}

/* Tabellenrahmen und Zellenabstand */
tr{
    border: 1px solid #000;
    padding: 10px;
    text-align: left;
    border-left: none;
    border-right: none;
    border-top: none;
}

/* Hebt alle Tabellenzeilen (tr) hervor, wenn der Benutzer mit der Maus darüber fährt */
table tr:hover {
    background-color: #e3eaf0; /* Helle graue Hintergrundfarbe bei Hover */
    /*cursor: pointer; /* Zeigt einen Zeiger-Cursor an */
}


.list th {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* Platz für die Pfeile */
    font-family: Arial, sans-serif; /* Web-sicherer Font */
}

.list th:after {
    content: ''; /* Initial leer */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none; /* Verhindert, dass das Pseudoelement klickbar ist */
}

.list th.ascending:after {
    content: '▲'; /* Pfeil für aufsteigende Sortierung */
}

.list th.descending:after {
    content: '▼'; /* Pfeil für absteigende Sortierung */
}

/* Automatische Standardbreite für nicht definierte Tabellen 
th:nth-child(1), td:nth-child(1),
th:nth-child(2), td:nth-child(2),
th:nth-child(3), td:nth-child(3), 
th:nth-child(4), td:nth-child(4),
th:nth-child(5), td:nth-child(5),
th:nth-child(6), td:nth-child(6) {

}*/

/* Buttons und Inputs in den Zellen */
input[type="submit"] {

    cursor: pointer;
    border-radius:3px;
}


.wrapper{
    margin:0 10% 0 10%;
    
    width: 80%;
    border-style: solid;
    border-color: #8698a8;
    border-radius: 10px;
}
.head{
    
    font-size: 1em;
    display:flex;
    justify-content: space-between;
    padding:2%;
    
    color:#072e65;
    /*border-style: solid;
    border-color: #000;
    border-radius: 10px;
    */
}

.head h1{
    color:#072e65;
}
.head h2{
    color:#072e65;
    font-style:italic;
}

.head_logo{
    width:100%;
    display:flex;
    justify-content: center;
}

.head_logo img {
    max-width: 50%; /* Das Bild wird maximal so breit wie sein Container */
    height: auto;    /* Die Höhe wird automatisch proportional zur Breite angepasst */
    display: block;  /* Verhindert unnötige Leerzeichen um das Bild */
    margin: 2% auto;  /* Zentriert das Bild, wenn der Container größer ist */
}



.head tr{
    border-bottom:none;

}

.head th:nth-child(1), .head td:nth-child(1){

    padding-right: 5%;
    width:50%;
}
.head th:nth-child(2), .head td:nth-child(2){
    padding-left: 5%;
    width:50%;

}
.head_information{
    margin-left:3%;
    width: 50%;
}

.head_information h1{
    text-align: left;
    margin-bottom:0;

}
.head_information h2{
    text-align: left;
    margin-top:0;
}

.input_line{
    display:flex;
}

.head_steering {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3%;
    align-items: stretch; /* Elemente füllen die volle Breite */
    width: auto;
    min-width:20%;
    margin-right:3%;
}
.head_information2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3%;
    align-items: stretch; /* Elemente füllen die volle Breite */
    width: auto;
    min-width:40%;

}


.head_steering form {
    width: 100%; /* Sicherstellen, dass die Formulare die volle Breite haben */
}

.head_steering input[type="submit"] {
    width: 100%; /* Volle Breite innerhalb des Formulars */
    box-sizing: border-box; /* Padding und Border werden einbezogen */
    padding: 1.5em; /* Optional für bessere Optik */
    display: block; /* Block-Layout erzwingen */

}

.head_steering button {
    width: 100%; /* Volle Breite innerhalb des Formulars */
    box-sizing: border-box; /* Padding und Border werden einbezogen */
    padding: 1.5em; /* Optional für bessere Optik */
    display: block; /* Block-Layout erzwingen */

}



/* Zentriert die Tabelle innerhalb des Containers */
.list {
    display: flex;
    justify-content: space-evenly;
    padding: 5%;
    width:auto;
    /*border-style: solid;
    border-color: #000;
    border-radius: 10px;
    */
}

.list th{
    font-size:1.2em;
}

.info{
    width:100%;
    display:flex;
    justify-content: space-evenly;
    background-color:#e3eaf0;
    height:1.2em;
    padding: 0
}

.info p{
    margin:0;
    color:#154a79;
}

.line_buttons{
    display:flex;
    justify-content: right;
}

.line_buttons input[type="submit"]{
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;  /* Einheitliche Höhe */
    width: 2em;   /* Einheitliche Breite */
    margin: 2px;  /* Leichter Abstand um die Buttons */
    padding: 0;
}



.head_button{
    background-color: #072e65;
    color: white;
    margin: 3px;
    border-style:none;
}
.head_button_back{
    background-color: white;
    border: 3px solid #072e65;
    color: #072e65;
    margin: 3px;
}

#startlist_single tr{
    height:2em;
}

#startlist_single th:nth-child(1), #startlist_single td:nth-child(1) {
    width: 10%;

}

#startlist_single th:nth-child(2), #startlist_single td:nth-child(2) {
    white-space: nowrap;
    min-width: 50%;
}

#startlist_single th:nth-child(3), #startlist_single td:nth-child(3) {
    width: 15%;
    text-align:center;
}

#startlist_single th:nth-child(4), #startlist_single td:nth-child(4) {
    width: 15%;
    text-align:center;
}
#startlist_single th:nth-child(5), #startlist_single td:nth-child(5) {
    width: 5%;
    text-align:center;
}
#startlist_single th:nth-child(6), #startlist_single td:nth-child(6) {
    width: 5%;
    text-align:center;
}

#startlist_team tr{
    height:2em;
}

#startlist_team th:nth-child(1), #startlist_team td:nth-child(1) {
    width: 10%;

}

#startlist_team th:nth-child(2), #startlist_team td:nth-child(2) {
    white-space: nowrap;
    min-width: 50%;
}

#startlist_team th:nth-child(3), #startlist_team td:nth-child(3) {
    width: 15%;
    text-align:center;
}
#startlist_team th:nth-child(4), #startlist_team td:nth-child(4) {
    width: 5%;
    text-align:center;
}
#startlist_team th:nth-child(5), #startlist_team td:nth-child(5) {
    width: 5%;
}

#list_add_starter{
    display:flex;
    justify-content: space-evenly;
}

#list_atheletes th:nth-child(4), #list_athletes td:nth-child(4) {
    width: 3%;
    text-align:right;
}

#list_disciplines th:nth-child(1), #list_disciplines td:nth-child(1) {
    width: 5%;
}
#list_disciplines th:nth-child(2), #list_disciplines td:nth-child(2) {
    width: 80%;
}
#list_disciplines th:nth-child(3), #list_disciplines td:nth-child(3) {
    width: 2%;
    text-align:right;
}

#list_competitions th:nth-child(1), #list_competitions td:nth-child(1) {
    width: auto;
    min-width: 40%;
}

#list_competitions th:nth-child(2), #list_competitions td:nth-child(2) {
    width: 20%;
}

#list_competitions th:nth-child(3), #list_competitions td:nth-child(3) {
    width: auto;
    padding-right: 0;
    text-align: right;
    padding: 3px 0 
}

.show_buttons {
    display: flex;
    justify-content: flex-end; /* Buttons am rechten Ende ausrichten */
    gap: 3px; /* Abstand von 3px zwischen den Buttons */
}

.show_buttons form {
    margin: 0; /* Entfernt unnötige Abstände um die Formulare */
}

.show_buttons input[type='submit'] {
    width: auto;
    padding: 0 1em;
    height: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Entfernt den negativen Margin */
    aspect-ratio: unset; /* Stellt sicher, dass das Seitenverhältnis nicht erzwungen wird */
}


.left_list, .right_list {
    width:45%;
}
.left_list th:nth-child(4), .left_list td:nth-child(4),
.right_list th:nth-child(4), .right_list td:nth-child(4) {
    width: 5%;
    text-align:right;
}

.button_pen{
    background-color: #072e65;
    color: white;
}

.button_clock{
    background-color: green;
    color: white;
}

.button_cross{
    background-color: red;
    color:white;    
}

.button_save{
    background-color: green;
    font-weight: 900;
    font-size: 1.2em;
    color:white;
    border:none
}

.button_cancel{
    background-color: darkred;
    font-weight: 500;
    font-size: 1em;
    color:white;
    padding:0px;
    border:none
}
.button_show{
    background-color: #072e65;
    font-weight: 500;
    font-size: 1em;
    color:white;
    padding:0px;
    border:none

}

#cancel_edit{
    padding:0.5em;
}
    

#button_edit{
    background-color:#072e65;
    color:white;
    
}


#edit_table th:nth-child(1), #edit_table td:nth-child(1) {
    white-space: nowrap;
}



#edit input{
    width:100%;
}

.edit_head{
    float:right;
}