body {
    margin: 0;
    height: 100vh;
    width: 100vw;
}

.gridContainer {
    height: 100vb;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas: 
        "header"
        "main";

    margin: 0;
}

.header {
    background-color: #fff;
    grid-area: header;

    display: grid;
    grid-template-columns: 1fr 80px;
    grid-template-rows: 1fr;
    grid-template-areas: "input refreshButton";
    width: 100%;
    overflow-x: hidden;
    padding-left: 75px;
    padding-right: 15px;
    gap: 10px;
    transition: padding-left 0.3s ease-in-out;
    position: relative;
}

/*
.header.active {
    padding-left: 280px;
}
*/

#inputScorerId {
    position: absolute;
    width: 98%;
    height: 70%;
    grid-area: input;
    margin: 0;
    font-size: 25px;
    top: 50%;
    transform: translate(0%, -50%);
}

#refresh {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    grid-area: refreshButton;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sidebarbutton {
    width: 60px;
    background-color: #26A69A;
    grid-area: button;
    height: 60px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebarMenuContainer {
    height: 100%;
    width: 100%;
    overflow: auto;

    grid-area: menu;
}
.sidebarMenu {
    width: 100%;
    min-height: 100%;
    background-color: #26A69A;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
}

#applyButton {
    width: 100%;
    grid-area: applyButton;
}

.avgSlider {
    transform: translate(0%, 50%);
}

.headlineContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    
    grid-area: headlineArea;
    background-color: #26A69A;

    display: flex;
    align-items: center;
    justify-content: center;
}
.borderContainer {
    width: 90%;
    height: 100%;
    border-bottom: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.headline {
    font-size: 20px;
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

h2 {
    width: 90%;
    font-size: 12px !important;
    margin: 10px 0px 0px 0px !important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

.modal {
    overflow-x: visible !important;
    color: rgba(0,0,0,0.87);
}

.myPicker {
    border-bottom: 1px solid #26A69A !important;
    color: #26A69A;
    height: 2rem !important;
    text-align: center;
}
.datepicker {
    grid-area: date;
}

.timepicker {
    grid-area: time;
}

#inputDisziplin {
    width: 80%;
    background-color: white;
    padding: 0px 8px 0px 8px;
    border-radius: 4px;
    margin: 0 0 8px 0;
}

.withButtonContainer {
    margin: 0;
    margin-bottom: 8px;
    min-height: 100px;
    max-height: 350px;
    padding: 0px 8px 0px 8px !important;
}
#toggleAllButton {
    width: 100%;
    margin-bottom: 8px;
}
.tagContainer {
    width: 90%;
    position: relative;
    transform: translate(-50%, 0%);
    left: 50%;
    background-color: white;
    border-radius: 4px;
    padding: 0px 8px 0px 16px;
    min-height: 50px;
}

#tagContainer {
    max-height: 300px;
    overflow: auto;
}

.myColor {
    color: #26A69A !important;
}

.pickerContainer {
    width: 90%;
    position: relative;
    transform: translate(-50%, 0%);
    left: 50%;
    display: grid;
    grid-template-columns: 7fr 3fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "date time btn";
    background-color: white;
    padding: 0px 4px 0px 8px !important;
    gap: 8px;
    border-radius: 4px;
}

.redoButtonTime {
    grid-area: btn;
    height: 80% !important;
    width: 100%;
    margin: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translate(0%, -50%);
    top: 50%;
    border-radius: 4px !important;
}

.sliderContainer {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    min-height: 100px;
}

#sliderContainer {
    min-height: 180px;
}

.redoButtonContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding-left: 8px;
    padding-right: 8px;
    
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "minInput refreshBtn maxInput";
    gap: 8px;

}
.redoButton {
    width: 100%;
    height: 100%;
    grid-area: refreshBtn;
}
.inputRange {
    width: 100%;
    margin: 0;
}
#inputMax {
    grid-area: maxInput;
}
#inputMin {
    grid-area: minInput;
}
#shotSlider {
    height: 10px;
    width: 80%;
    transform: translate(0%, 150%);
    margin-bottom: 40px;
    margin-top: 50px;
}
#shotSlider .noUi-connect {
    background: #26A69A;
}
#shotSlider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    border-radius: 9px;
    background-color: #26A69A !important;
    box-shadow: none !important;
    border: none !important;
}
.noUi-tooltip {
    height: 40px !important;
    width: 40px !important;
    border-radius: 20px 20px 20px 0 !important;
    top: -27px !important;
    padding-top: 10px !important;
}

#avgCalcSlider {
    height: 10px;
    width: 80%;
    transform: translate(0%, 150%);
    margin-bottom: 40px;
    margin-top: 50px;
}
#avgCalcSlider .noUi-connect {
    background: #26A69A;
}
#avgCalcSlider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    border-radius: 9px;
    background-color: #26A69A !important;
    box-shadow: none !important;
    border: none !important;
}
.noUi-connects {
    background-color: #26A69A !important;
}

.main {
    overflow: hidden;
    background-color: #c3c5ca;
    grid-area: main;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 100px 1fr;
    gap: 5px;
    padding: 5px;
    grid-template-areas: 
        "graph statistics"
        "graph shots"
        "table shots";
}

.myCards {
    background-color: #f6f7f9;
    border-radius: 10px;
    margin: 0;
}

.mySubCards {
    background-color: #26A69A;
    border-radius: 10px;
    margin: 0;
    color: white;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#scoreTable {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    grid-area: table;
}

.tableRow.highlighted {
    background-color: #26A69A !important;
    
}

.sumRow {
    border: 5px solid #26A69A;
    font-weight: bold;
}

#scoreStatistics {
    grid-area: statistics;
    width: 100%;
    height: 100%;
    overflow-x: auto;
}

.statisticsContainer {
    min-width: 600px;
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
    padding: 10px;
    grid-template-areas: 
        "sumGanz sumZehntel avg bestTeiler luckFactor numberOf";
}

#scoreGraph {
    grid-area: graph;
}

#shots {
    grid-area: shots;
}

#sumZehntel {
    grid-area: sumZehntel;
}
#sumGanz {
    grid-area: sumGanz;
}
#avg {
    grid-area: avg;
}
#numberOf {
    grid-area: numberOf;
}
#luckFactor {
    grid-area: luckFactor;
}
#bestTeiler {
    grid-area: bestTeiler;
}

.cardValue {
    font-size: 25px;
    margin: 0;
}

.sidebarContainer {
    position: absolute;
    width: 310px;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    transition: transform 0.3s ease-in-out; /* Übergangseffekt für das Ein- und Ausblenden */
    transform: translateX(-250px); /* Initial versteckte Position */
    overflow-x: visible;

    display: grid;
    grid-template-columns: 1fr 60px;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas: 
        "headlineArea button"
        "menu button"
        "applyButton button";
}

.sidebarContainer.active {
    transform: translateX(0); /* Anzeige der Seitenleiste */
  }

.shotTable {
    width: 100%;
}

th {
    position: sticky;
    top: 0;
    background-color: white;
}

@media only screen and (max-width: 800px) and (orientation: portrait) {
    body {
        height: 80vh;
        width: 100vw;
    }
    
    .main {
        grid-template-columns: 1fr;
        grid-template-rows: 100px 200px 300px 80vh;
        grid-template-areas: 
            "statistics"
            "graph"
            "shots"
            "table";
        overflow: auto;
    }
    
}

@media only screen and (orientation: landscape) and (max-width: 1000px) {
    body {
        height: 60vh;
        width: 100vw;
    }
    .main {
        grid-template-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100px 100px 1fr;
        grid-template-areas: 
        "graph statistics"
        "table shots"
        "table shots";
        overflow: auto;
    }
}

.avgChart {
    width: 100%;
    height: 100%;
}

.collapsible {
    margin: 0 !important;
    border: 0 !important;
}

.collapsible-li {
    width: 100%;
    height: 100%;
    margin: 0;

    display: flex;
    align-items: center;
    flex-direction: column;
}

.collapsible-header {
    width: 100%;
    background-color: #26A69A !important;
    border: 0 !important;
    margin: 0;
}

.collapsible-body {
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
}