:root {
    --background-color: #fbfffb;
    --border-shadow: #c4c4c4;
    --darker-green: #85c988;
    --lighter-red: #F44336;
    --lighter-orange: #FFB266;
}
/* přidat root do zvláštního souboru, který budu všude importovat */

#menu {
    position:relative;
}

#menu-header {
    height:20px;
    text-align:center;
}

#settings {
    position:relative;
    width:20px;
}

#settings-block {
    position:absolute;
    right:-8px;
    top:-6px;
}

#settings:hover {
    width:22px;
    right:-1px;
    top:-1px;
    animation-name: rotator;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-timing-function: linear
}

@keyframes rotator {
  from {transform: rotate(0deg);}
  to {transform: rotate(45deg);}
}

body {
    background-color:white;
    font-family: 'Lato';
}

.menu-image {
    padding-bottom:20px;
}

.menu-image img {
    display:block;
    width:30px;
}

.menu-image-description {
    padding-top: 5px;
}

.menu-image:hover {
    opacity:1;
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(70deg);
}

.menu-image:hover::after {
    opacity:1;
    filter: inherit;
}

.menu-image a {
    display: grid;
    grid-template-columns: 35px auto;
    align-items: center;
    gap: 15px;
    position:relative;
}

.menu-image a:visited, .menu-image a {
    color: black;
    text-decoration: none;
}

#searchBox {
    width:45px;
    border: 1px solid #E8F5E9;
    box-shadow: 0px 0px 10px #E8F5E9;
    border-radius: 8px;
    position:relative;
    margin-left:250px;
    height:36px;
}

#searchIcon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translate(0, -50%);
}

#searchText {
    position:absolute;
}

#searchText input:focus {
    width:100px;
}

.page {
    display: grid;
    grid-template-columns: 150px auto;
    max-width: 1400px;
    margin:auto;
    align-items: start;
}

.content {
    margin-bottom:30px;
}

.modal {
    margin: auto;
}

.inner-menu {
    padding-right:15px;
}

.grid {
    display:grid;
}

.left-menu {
    position: sticky;
    align-self: start;
    top: 20px;
    margin-top: 50px;
}

body {
    background: var(--background-color);
}

* {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

*::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(179, 178, 178); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #888; 
}

.dogname {
    text-align: center;
    margin: auto;
    padding-top: 20px;
    font-size: 45px;
}

.selector {
    text-align: center;
    margin: auto;
}

.select {
    text-transform: uppercase;
    margin-right: 20px;
    color:black !important;
    content: attr(data-title);
    cursor: pointer;
    position: relative;
    height: 20px;
    display: inline-block;
}

.selected {
    font-weight: 700;
}

.select:hover::before, .select.selected::before {
    content: '';
    width: 100%;
    height: 3px;
    background-color: var(--tooltip-color);
    position: absolute;
    bottom: 0;
    opacity: 0.2;
}

.select:last-child {
    margin-right: 0px;
}

h2 {
    text-align: center;
    margin: auto;
    padding: 30px;
    font-size: 30px;
}

.basic-table {
    border-spacing: 0;
    width: 85%;
    margin: auto;
    table-layout: fixed;
    border-collapse: separate;
    min-width: 315px;
}

.basic-table th {
    padding-top: 9px;
    padding-bottom: 9px;
    text-align: center;
    color: white;
    border: 1px;
    background-color: #4fb854;
}

.basic-table tr:first-child th:first-child {
    border-top-left-radius: 6px;
}

.basic-table tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

.basic-table tr:last-child td:first-child {
      border-bottom-left-radius: 6px;
}

.basic-table tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

.basic-table td {
  border: 1px solid #ddd;
  padding: 7px;
  text-align: right;
}

.basic-table:not(:first-child) {
    padding-top: 20px;
}

#map {
    display:block;
}

#svgmap {
    position: relative;
    width: 95%;
    max-width: 800px;
    height: 100%;
    display: block;
    margin:auto;
}

.map_container {
    height: fit-content;
}

.dn {
    display: none !important;
}

.competition_overview_container {
    padding: 5px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
}

.competition_overview_container div {
    margin: auto;
}

.competition_overview_container_parent {
    width: 80%;
    margin:auto;
    outline: 1px solid black;
    margin-bottom: 15px;
}

@media only screen and (max-width: 550px) {
    .competition_overview_container_parent {
        width: 100%;
    }
}

.competition_overview_container_parent td {
    padding: 3px;
}

.resultsTable {
    /* width:max-content; */
    /* max-width: 900px; */
    margin:auto;
    border-spacing: 0px;
    padding-bottom: 40px;
    min-width:max-content;
    width: 100%;
}

.runBlock {
    /* overflow: auto; */
    max-width:100vw;
}

.resultsTable tr:nth-child(even) {
    background-color:rgb(231, 231, 231);
}

.resultsTable tr:nth-child(odd) {
    background-color:rgb(251, 251, 251);
}

.isClickedDog:not(.thisDog):not(.colorByCompetitor) {
    background-color: turquoise !important;
}

.colorByCompetitor:not(.thisDog) {
    background-color: orange !important;
}

.thisDog {
    background-color: rgb(172, 231, 175) !important;
}

.clickableHeart {
    height: 20px;
    position: relative;
    top: 2px;
}

.overviewRunTitle {
    margin: auto;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
    position: sticky;
    z-index: 5001;
    top:0px;
    background-color: var(--background-color) !important;
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 2px solid #f1f0f0;
}

.tables_table .resultsTable:last-child {
    padding-bottom: 20px;
}

.mapCircle {
    opacity: 0.6;
    fill: green;
}

.success {
    background-color: #d4f5d6;
}

.error {
    background-color: rgb(255, 98, 98);
}

.a3ch > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.a3ch > div div:nth-child(1) {
    text-align: right;
}
.a3ch > div div:nth-child(2) {
    text-align: left;
}

.x-shape-parent, .v-shape-parent {
    display: inline-block;
    width:20px;
    padding-left: 5px;
    padding-right: 25px;
}

.v-shape {
    width: 5px;
    height: 15px;
    display: inline-block;
    background-color: green;
    position: relative;
    transform: rotate(40deg);
    border-radius: 5px;
    transform-origin: center bottom;
    left: 5px;
}

.v-shape::after {
    content: '';
    width: 8px;
    height: 5px;
    display: block;
    background-color: green;
    transform: translateX(-5px) translateY(10px);
    border-radius: 5px;
}

.x-shape {
    width: 5px;
    height: 15px;
    display: inline-block;
    background-color: red;
    position: relative;
    transform: rotate(45deg);
    border-radius: 2px;
    transform-origin: center bottom;
    left: 2px;
}

.x-shape::before {
    content: '';
    width:15px;
    height: 5px;
    display: block;
    background-color: red;
    transform: translateX(-5px) translateY(5px);
    border-radius: 2px;
}

@media only screen and (max-width: 800px) {
    .mapOverview {
        grid-template-columns: 1fr;
    }
}

#runs_details {
    min-height: 300px;
    width: 85%;
    margin: auto;
}

#runs_details tr > td:nth-child(2) {
    padding-left: 15px;
}

.mapButtons {
    display: flex;
    border-radius: 10px;
    width: fit-content;
    cursor: pointer;
    padding: 5px;
    background-color: var(--darker-green);
    margin: auto;
    margin-bottom: 40px;
}

.mapButtons div {
    padding: 10px 15px 10px 15px;
    border-radius: 10px;
}

.buttonChangeMapSelected {
    background-color: var(--background-color);
}


.vyvojGraph {
    width: 100%;
}

.vyvojGrid div select:focus {
    box-shadow: 0px 0px 5px rgba(0, 128, 0, 0.5);
}

.vyvojGrid div label {
    display: inline-block;
    text-align: right;
    padding: 5px;
    text-align: right;
}

.vyvojGrid div select {
    width: 240px;
    padding: 5px;
    background-color: white;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
}

.vyvojGrid > div {
    max-width: fit-content;
    margin-left: auto;
    text-align: right;
}

.vyvojGrid {
    width: fit-content;
    text-align: right;
    margin: auto;
}

.vyvojGrid > div > div {
    text-align: right;
    max-width: 340px;
    margin: auto;
}

@media only screen and (max-width: 1617px) {
    .graphContentContainer {
        grid-template-columns: 1fr;
    }
    .vyvojGrid > div {
        position: initial;
    }
}

@media only screen and (max-width: 650px) {
    .vyvojGrid div label {
        text-align:center;
    }
    .vyvojGraph svg {
        width: 100%;
    }
    .vyvojGrid {
        transform: translate(0px);
        font-size: 14px;
    }

    .vyvojGrid > div > div {
        padding-top: 5px;
    }
}

.all_competitions_window {
    display:grid;
    grid-template-columns: 650px 1fr;
}

.competition_overview {
    display: block;
    padding-top: 5px;
}

.competition_overview_container_new {
    padding-left:15px;
    padding-right:15px;
    padding-bottom:15px;
    max-width: 710px;
    margin: auto;
}


.competition_overview_container_new > div {
    margin: auto;
    display: flex;
    border: 1px solid lightgrey;
    border-radius: 45px;
    padding:5px;
    cursor:pointer;
    display: grid;
    grid-template-columns: auto minmax(100px, 250px);
}

.competition_overview_container_new > div > div:first-child {
    text-align:center;
    padding: 15px 15px 15px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.competition_overview_container_new > div:hover {
    box-shadow: 0px 0px 5px #85c988
}

.competition_overview_map {
    display: grid;
    justify-content: center;
    align-content: center;
}

.competition_overview_map_canvas {
    width:100%;
}

.competitionDetails {
    padding-bottom:60px;
    width: min(900px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.scroll_up_button {
    display: none;
}

@media only screen and (max-width: 1350px) {
    .scroll_up_button {
        display: block;
    }

    .all_competitions_window {
        grid-template-columns: 1fr;
    }

    .competitionDetails {
        max-height: initial;
        overflow-x: initial;
        overflow-y: initial;
        font-size: 14px;
    }

    .competition_overview {
        height: initial;
        max-height: initial;
        font-size: 14px;
    }

    .miniMap {
        display: grid;
        align-content: center;
    }

    .page {
        position: relative;
        display:block;
    }

    .menu-outer {
        position: absolute;
        background-color: var(--background-color);
        left: -135px;
    }

    .basic-table {
        table-layout: initial;
        font-size: 14px;
    }

    
    .pageContent {
        max-width: initial !important;
    }

    .menu-mobile-display {
        left: 0px;
        width:150px;
    }

    .menu-mobile-display .menu-image {
        width: fit-content;
        margin: auto;
    }

    .competition_overview_container_new > div {
        grid-template-columns: auto 150px;
    }
}

.resultsTable tr td {
    padding: 0px 10px 0px 10px;
}

@media only screen and (max-width: 400px) {
    /* .resultsTable td:nth-child(8), .resultsTable th:nth-child(8) {
        display: none;
    } */

    .resultsTable tr td:nth-child(3), .resultsTable tr th:nth-child(3) {
        /* position: sticky;
        left: 0;
        background-color: inherit;
        max-width: 50vw; */
    }

    .competition_overview_container_new > div {
        grid-template-columns: auto 100px;
    }
}

.pageContent {
    max-width: 1100px;
}

.shuffleButtonContainer {
    display: flex;
    border-radius: 15px;
    width: fit-content;
    cursor: pointer;
    margin-left: 50px;
    padding: 5px;
    background-color: var(--darker-green);
    margin:auto;
    margin-bottom:30px;
    text-align: center;
}

.shuffleButtonContainer .shuffleButton {
    padding: 2px 10px 2px 10px;
    border-radius: 10px;
}

.shuffleButtonActive {
    background-color: var(--background-color);
}

.active {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(70deg);
}

.menu-image.active a::after {
    background-color: black;
}

.plusButton, .minusButton {
    width: 18px;
    height: 18px;
    border: 1px solid #FFB300;
    position: relative;
    cursor: pointer;
}

.plusButton div:first-child, .minusButton div:first-child {
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: #FFB300;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.plusButton div:nth-child(2) {
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: #FFB300;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

.vyberRozhodci {
    display: flex;
    gap: 10px;
    margin:auto;
    justify-content: center;
    align-items: center;
    user-select: none;
}

#judgesCountLimiter {
    font-size:23px;
}


.competitionsLimiterButton {
    font-weight: bold;
    border-radius:3px;
    border:none;
    color:white;
    text-align:center;
    padding: 15px 15px;
    background-color:#60db85;
    text-decoration:none;
    margin-top:20px;
}

.checkbox.run {
    border-bottom: 1px solid #F3F3F3;
    display: grid;
    grid-template-columns: 30px auto;
    line-height:26px;
}

.checkbox.run label {
    display: grid;
    grid-template-columns: 100px auto;
}

.checkbox.run label div:first-child {
    padding-left:15px;
}

.newYear:not(:first-child) {
    border-top: 1px solid #CCC;
}

hr {
    width: 70%;
    margin: auto;
    min-width: 260px;
}

.basicTrialsWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    box-shadow: 0px 0px 7px 0px lightgray;
}

.basicTrialsWrapper > div {
    min-width: 300px;
}

.basicTrialsWrapper > div:nth-child(2) {
    justify-self: left;
}

.basicTrialsWrapper > div:nth-child(1) {
    justify-self: right;
}

@media only screen and (max-width: 1050px) {
    .basicTrialsWrapper {
        grid-template-columns: auto;
        gap: 0px;
    }

    .basicTrialsWrapper > div:nth-child(2) {
        justify-self: unset;
    }

    .basicTrialsWrapper > div:nth-child(1) {
        justify-self: unset;
    }

    .basicTrialsWrapper > div {
        min-width: auto;
    }

    .trials .insideContent > div {
        width: unset !important;
    }
}

.a3ch.grid > div > div:nth-child(2) {
    display: flex;
}

.a3ch-run {
    margin:auto;
    text-align:center;
    padding: 10px;
    font-weight: 100;
}

.a3ch-run-name {
    font-size: 1.2em;
}

.a3ch-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.a3ch-wrapper > div {
    flex: 1 1 0;
    width: 0;
    box-shadow: 0px 0px 7px 0px lightgray;
    padding-top: 30px;
    min-width: 260px;
}

.a3ch.grid {
    padding-bottom: 40px;
    font-size: 20px;
    line-height: 35px;
    padding-bottom: 80px;
}

.a3ch-period {
    text-align:center;
    font-size:30px;
}

.trialsOverview h2 {
    font-size: 45px;
}

.trialsAllTrials {
    margin: auto;
    max-width: 80%;
    width: 100%;
}

.trialsAllTrials table {
    width: 100%;
}

.trialsAllTrials table td:nth-child(3) {
    width: 100px;
} 

.trialsAllTrials table td:nth-child(4) {
    width: 65px;
}

.trialsAllTrials table td:nth-child(5) {
    width: 25px;
}

.trialsAllTrials thead th {
    font-size: 30px;
    border-bottom:2px solid black;
    text-align:left;
    padding-top: 60px;
}

@media only screen and (max-width: 1050px) {
    .trialsAllTrials tbody {
        font-size: 13px;
    }

    .trialsAllTrials {
        max-width: 100%;
    }

    .trialsOverview h2 {
        font-size: 35px;
    }

    .a3ch.grid {
        font-size: 18px;
        padding-bottom: 0px;
    }

    .basicTrialsWrapper {
        padding-bottom: 40px;
    }
    
}

.trialsAllTrialsRed {
    background-color: var(--lighter-red);
}

.trialsAllTrialsGreen {
    background-color: var(--darker-green);
}

.trialsAllTrials a {
    color: black !important;
    text-decoration: underline !important;
}

.mainHeart {
    height: 53px;
    margin: auto;
    text-align: center;
    /* width: 100%; */
    display: block;
    padding: 10px;
    padding-bottom: 10px;
    padding-bottom: 15px;
}

.circle {
    filter: none;
    transition: 0.2s
}

.circle.dis:hover {
    filter:url(#f1)
}

.circle.clean:hover, .circle.tb:hover {
    filter:url(#f2)
}

.circle.clean {
    stroke: #00C361;
}

.circle.tb {
    stroke: #FFB266;
}

.circle.dis {
    stroke: #ff6161;
}

.circle-container {
    width: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}

g:hover circle {
    opacity: 0.7;
}

circle:hover {
    opacity: 1 !important;
}

.circle-text {
    text-anchor: middle;
}

.circle-text-upper {
    font-size: 33px;
    font-weight: 600;
}

.circle-text-lower {
    font-size: 14px;
    text-transform: uppercase;
    transform: translateY(22px);
}

.tb.circle-text, .dis.circle-text {
    display:none;
}

.circle.tb:hover ~ .tb.circle-text {
    display: block;
}

.circle.dis:hover ~ .dis.circle-text {
    display: block;
}

.circle.dis:hover ~ .clean.circle-text {
    display: none;
}

.circle.tb:hover ~ .clean.circle-text {
    display: none;
}

.overview-container {
    display: flex;
    text-align: center;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 30px;
}

.overview-container .header {
    font-size: 28px;
    font-weight: 700;
}

.bottom-box {
    width: 85%;
    margin: auto;
}

.bottom-box svg {
    width: 100%;
}

.bottom-box rect:nth-child(1), .box-description-1 line {
    fill:#3F51B5;
    stroke:#3F51B5;
}

.bottom-box rect:nth-child(2), .box-description-2 line {
    fill:#039BE5;
    stroke:#039BE5;
}

.bottom-box rect:nth-child(3), .box-description-3 line {
    fill:#4CAF50;
    stroke:#4CAF50;
}

.bottom-box rect:nth-child(4), .box-description-4 line {
    fill:#FFCA28;
    stroke:#FFCA28;
}

.bottom-box rect:nth-child(5), .box-description-5 line {
    fill:#ef5350;
    stroke:#ef5350;
}

.bottom-box g:hover rect {
    opacity: 0.5;
}

.bottom-box rect:hover {
    opacity: 1 !important;
}

.box-description {
    display:none;
}

.bottom-box-rect-1:hover ~ .box-description-1 {
    display:block;
}

.bottom-box-rect-2:hover ~ .box-description-2 {
    display:block;
}

.bottom-box-rect-3:hover ~ .box-description-3 {
    display:block;
}

.bottom-box-rect-4:hover ~ .box-description-4 {
    display:block;
}

.bottom-box-rect-5:hover ~ .box-description-5 {
    display:block;
}

.bottom-box text {
    text-anchor: middle;
}

g.box-description text {
    text-anchor: start;
}

.frst {
    stroke:#3F51B5;
}

.scnd {
    stroke:#039BE5;
}

.thrd {
    stroke:#4CAF50;
}

.menu-image a::after {
    position: absolute;
    height: 100%;
    width: 3px;
    content:'';
    background-color: transparent;
    right: -9px;
    opacity: 0.8;
    border: 1px solid #F1F1F1;
    display: none;
}

.menu-image:hover a::after {
    border: 1px solid #F1F1F1;
}

.closeButton {
    position: absolute;
    right: 20px;
    top: 20px;
}

@media only screen and (min-width: 1050px) {

    g.box-description {
        display:none;
    }

    text.box-description {
        display:none !important;
    }
}

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

    g.box-description {
        display:none !important;
    }

    text.box-description {
        display:none;
    }

    .menu-image a::after {
        display: block;
    }

    .closeButton {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .basic-table {
        width: 90%;
    }
}

.overview-table {
    display:grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 2px;
}

.overview-table div:nth-child(2n + 1) {
    text-align: right;
}

.overview-table div:nth-child(2n) {
    text-align: left;
}

@media only screen and (max-width: 700px) {
    .circle-container {
        margin: auto;
    }

    .overview-container {
        flex-flow: column;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .overview-container .circle-container:nth-child(1) {
        order: 2;
        padding-bottom:20px;
    }

    .overview-container .circle-container:nth-child(2) {
        order: 1;
    }

    .overview-container .circle-container:nth-child(3) {
        order: 3;
    }
}

.circle-container:nth-child(2) {
    flex-grow: 0.4;
}

.basic-table-container:not(:last-child) {
    padding-bottom: 20px;
}

#finishes th {
    background-color: #e22525;
}

#speed th {
    background-color: #2572e2;
}

#other th {
    background-color: #FFB300;
}

.basic-table-container:nth-child(2) thead tr {
    opacity: 0.8;
}

.basic-table-container:nth-child(3) thead tr {
    opacity: 0.65;
}

.basic-table-container:nth-child(4) thead tr {
    opacity: 0.5;
}

.active[data-switch="speed"], [data-switch="speed"]:hover {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(190deg);
}

.active[data-switch="finishes"], [data-switch="finishes"]:hover {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(310deg);
}

.active[data-switch="other"], [data-switch="other"]:hover {
    filter: invert(.7) sepia(1) saturate(5) hue-rotate(0);
}

.active[data-switch="graph"], [data-switch="graph"]:hover {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(220deg);
}

.active[data-switch="overview"], [data-switch="overview"]:hover {
    filter: invert(50%) sepia(18%) saturate(1410%) hue-rotate(110deg);
}

tbody tr:hover {
    background-color: #F3F3F3;
}

.finish-DIS {
    background-color: var(--lighter-red);
}

.finish-CLEAN {
    background-color: #00C361;
}

.finish-TB {
    background-color: var(--lighter-orange);
}

.finishesDisplay {
    height: 40px;
    display: flex;
    gap: 0px;
    width: 100%;
    margin: auto;
    margin-bottom:20px;
    justify-content: center;
}


.finishesDisplay > div {
    flex: 1 1 auto;
    border-right: 1px solid white;
    max-width: 10px;
}

.finishesContainer:hover > .finishesDisplay > div {
    opacity: 0.6;
}

.finishesDisplay > div:hover {
    opacity: 1 !important;
}

.finishesDisplay > div:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.finishesDisplay > div:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: initial;
}

.displayDesktop {
    display: flex;
}

.displayMobile {
    display: none;
}



.run-info {
    position: absolute;
    opacity: 1;
    z-index: 123456;
    display:flex;
    width: 100%;
    justify-content:center;
    left: 0;
}

.run-info-inner {
    background-color: white;
    position: absolute;
    opacity: 1;
    z-index: 123456;
    text-align:center;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid grey;
    min-width: 500px;
}

.run-info-inner > div {
    padding: 2px;
}

.finishesOuterContainer {
    width: 85%;
    margin: auto;
}

.showOnDesktop {
    display: block !important;
}

.displayPlacementInFinishes {
    padding-bottom: 5px;
}

.displayAllRuns:hover {
    cursor: pointer;
    opacity: 0.4;
}

.innerModal {
    padding: 80px;
}

.comp-picker-years-wrapper, .comp-picker-handlers-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top:20px;
    flex-wrap: wrap;
}

.checkbox.run > label > div:nth-child(1) {
    text-align: center;
}

.checkbox.run > label > div:nth-child(2) {
    text-align: left;
}

@media only screen and (max-width: 700px) {
    .displayDesktop {
        display: none;
    }

    .showOnMobile {
        display: block !important;
    }
    
    .displayMobile {
        display: flex;
    }

    .finishesOuterContainer {
        width: 90%;
    }

    .a3chShuffle {
        flex-flow: column;
    }

    #runs_details {
        font-size: 14px;
    }

    .run-info-inner {
        min-width: initial;
    }

    .innerModal {
        padding: 10px;
        font-size: 0.9em;
    }

    .comp-picker-years-wrapper, .comp-picker-handlers-wrapper {
        gap: 10px;
    }

    .checkbox.run label {
        grid-template-columns: 60px auto;
        gap: 10px;
    }

    .checkbox.run label div:first-child {
        padding-left: 0px;
    }
}

.finishesContainerOuter {
    position: relative;
}

.finishesContainer {
    height: 60px;
    overflow: hidden;
}

.finishesContainer {
    display: grid;
    grid-template-rows: 60px;
}

.finish-placement {
    width: 100%;
    height: 2px;
    background-color: white;
    position: relative;
}

.checkboxFinishesContainer {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    display:flex;
    justify-content: end;
}

.displayAllRuns {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    text-transform: uppercase;
    text-align: center;
    margin: auto;
    width: fit-content;
    padding: 8px 16px 8px 16px;
    position: relative;
    top: -10px;
    border-radius: 5px;
    background-color: #e22525;
    color: white;
    opacity: 0.8;
    font-size:13px;
    width: 160px;
}

.comp-picker-header {
    margin: auto;
    text-align: center;
}

.run-header {
    font-size: 1.2em;
    font-weight: 600;
    padding-top: 10px;
    text-align: center;
}

.titleJudgeName {
    font-size:12px;
}

.competition-inputs {
    width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: right;
    gap: 5px;
    margin: auto;
    padding-bottom: 10px;
}

.competition-inputs-filter {
    font-size: 1.4em;
}

.competition_overview > details > summary {
    padding-bottom: 10px;
    margin: auto;
    width: fit-content;
}

.checkbox.run label::before {
    top: 6px;
    left: -26px;
}

.checkbox.run label::after {
    top: 9px;
    left: -23px;
}

.runTitleWrapper {
    position: sticky;
    max-width: 100vw;
    left: 0;
}

.overviewRunTableContainer {
    overflow: auto;
    width: 100vw;
    max-width: 100%;
}

@media only screen and (min-width: 1350px) {
    .overviewRunTableContainer {
        width: initial;
        max-width: initial;
    }

    .resultsTable {
        min-width: initial;
    }
}