.game_container{
    display: flex;
    height: max-content;
    width: 100%;
    position: relative;
    padding: 0 9vw 0 9vw;
}

.game_sidebar{
    flex: 2;
    width: 20vw;
    padding: 1.5vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: 80vh;
}
.sidebar_option{
    height: 5vh;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #c4d8ee;
    padding-right: 20px;

}

.game_data_container{
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
}

.single_title {
    background-color: #fa8b34;
    color: white;
    width: max-content;
    height: 5vh;
    padding:10px;
    display: flex;
}

.game_navbar{
    display: flex;
    flex-direction: column;
    height: 13vh;
    width: 100%;
}

.game_navbar_header{
    background-color: #2f78c3;
    border-radius: 8px 0 8px 0;
    box-shadow: 0px -5px 0px #0003 inset;
    color :white;
    padding: 5px 1vw 5px 5px;
    margin: 1vh 0 3vh 0;
}

.game_navbar_options,.game_navbar_filter{
    display: flex;
    justify-content: flex-end;
}
.game_navbar_options{
    gap: 2vw;
}

.game_navbar_filter div {
    display: flex;
    width: 15%;
}

.game_navbar_filter div input {
    height: 1.5vh;
    width: 20%;
}

.game_data,.table_data{
    display: flex;
    flex-direction: column;
    gap: 2vh;
    width: 100%;
}
.game_tr{
    width: 100%;
    padding: 7px;
    border-radius: 5px;
    border: #68b153 4px solid;
    border-right: #68b153 16px solid;
    background-color: white;
    display: flex;
    padding-right: 20px;
    gap: 10%;
    cursor: pointer;
}


.game_tr:hover {
    border: rgba(104, 177, 83, 0.8) 4px solid;
    border-right: rgba(104, 177, 83, 0.8) 16px solid;
}

.game_tr div,.table_header div {
    width: 20%;
}
.game_tr button{
    width: 20%;
    all: unset;
}
.table_header{
    width: 100%;
    padding: 9px 26px 9px 9px;
    border-radius: 10px;
    background-color: #f1f1f1;
    border-bottom: #e8e8e8 4px solid;
    display: flex;
    gap: 10%;
    margin-top: 2vh;
}

.tr_name {
    margin-right: 3%;
    margin-left: 3%;
}

.table_name {
    margin-right: 3%;
    margin-left: 3%;
}

/*accordion*/

.accordion {
    height: 5vh;
    margin-bottom: 4px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #c4d8ee;
    padding-right: 20px;
    border: none;
}

.accordion:hover {
    background-color: rgba(196, 216, 238, 0.9);
}

.accordion_body_container {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    width: 100%;
    display: flex;
    gap: 4px;
    margin-bottom: 2px;
    flex-direction: column;
    align-items: center;
    border: none;
}

.accordion_body {
    height: 5vh;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d6e5f3!important;
    padding-right: 20px;
    border: none;
}

.accordion_body div{
    height :100%;
    width: 100%;
}

/*game table accordion*/

.game_accordion {
    height: 5vh;
    margin-bottom: 4px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-right: 20px;
    border: none;
}

.game_accordion_body_container {
    overflow: hidden;
    position: relative;
    top: -4.5px;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    width: 100%;
    display: flex;
    gap: 4px;
    margin-bottom: 2px;
    flex-direction: column;
    align-items: center;
    border: #68b153 4px solid;
    opacity: 0;
}

.game_accordion_body {
    height: max-content;
    width: 100%;
    display: flex;
    align-items: center;
    border: none;
}

.game_accordion_body div{
    height :100%;
    width: 100%;
}

/*table*/
table{
width: 100%;
border-collapse: collapse;
margin-top: 2vh;
}
th{
color: grey;
}
td, th {
    text-align: center;
    padding: 8px;
}
tr {
    background-color: #f7fbf6;
}
tr:nth-child(even) {
    background-color: #e8f3e5;
}

.graph_button button{
    cursor: pointer;
}