html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 95%; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #343434; margin: 1rem 0; }
a { color: #33658a; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; justify-content: space-between; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-flow: column;}
.content label { font-weight: lighter; margin-bottom: 0.5em; }
.content ainput, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; display: inline;}

.footer {
    background-color: lightgrey;
    text-justify: center;
    text-align: center;
    padding: 1rem;
}

.layout-container {display: flex; justify-content: center;}

.tournament-buttons{
    display: flex;
    column-gap: 1rem;
    align-items: center;
    
}


.bracket-line-up{
    width: 30%;
    height: 100%;
    flex-shrink: 0
}

.bracket-line-down{
    background: red;
    width: 30%;
    height: 100%;
    flex-shrink: 0;
}

.match-container {
    display: flex;
    align-items: center;
    flex-flow: column;
}

.register-separator {
    border-style: solid;
    border-width: 1px;
    height: 35%;
}

.register-seprator-container {
    width: 2%;
    align-content: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.register-block {
    display: flex;
    width: 49%;
    justify-content: center;
    align-items: center;
}

.register-block-container{
    display: flex;
}

.register-titles{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-around;
}

.layout-bottom-buttons {display: flex; width: 75%; justify-content: space-evenly; margin-left: 12.5%; margin-right: 12.5%;}

.ktm-button{width: 50%; display: flex; justify-content: center;}

.update-match{
    background-color: lightgreen;
    text-align: center;
    border-radius: 6px;
    align-self: center;
    border-style: inset;
    border-color: gray;
    padding: 1rem;
}

.return-button{
    background-color: lightgray;
    text-align: center;
    border-radius: 6px;
    align-self: center;
    border-style: inset;
    border-color: gray;
    padding: 1rem;
}

.return-button:hover {
  background-color: rgb(230, 230, 230);
}

.return-button:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}


.match-separator-container{background: linear-gradient(#ee5547 50%, #eee 50%);}





.competitor-form {
    display: flex;
    width: 50%;

}

.area{
    width:100%;

}

.competitor-field {
    align-content: flex-end;
    text-align: right;
    width: 100%;
}

.competitor-field label{
    width: 30%;
}

.competitor-field input{
    width: 70%;
}

.competitor-photo-area {
    padding: 1rem;
    align-self: center;
    display: flex;
    flex-flow: column;
    width: 50%;
}

.competitor-photo {
    width: 100%;
    object-fit: contain;
}

.update-competitor-container {
    display: flex;
    flex-flow: column;
}

.update-competitor-column {
    display: flex;
    flex-flow: row  ;
    width: 100%;
    justify-content: center;
}

.update-competitor-header {
    background-color: #45628A; 
    display: flex;
    
}

.update-competitor-row-odd {
    background-color: #DDC3A9;
    display: flex;
}

.update-competitor-row-even {
    background-color: #9FAABA;
    display: flex;
}

.register-form {
    height: 100%;
    justify-content: space-around;
}

.search-filters {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
}

.form-control {
    text-align: center;
}

.KTM-logo {
    height: 5rem;
}

.KTM-logo > img {
    height: 95%;
    height: 80%;
    margin: 5%;
}

.labels-fields {
    display: flex;
    padding: 0.5rem;
}

.labels {
    width: 25rem;
    padding: 0 1rem;
    text-align: right;
    color: grey;
}

.fields {
    max-width: 35rem;
    flex: 2
}

.submit-button {
    padding: 0 25rem;
}