/* BELOW IS FOR INDEX.HTML */

:root {
    --white: #ECF4EE;
    --selected: #EB5517;
    --cta: #F69D3B;
    --green: #C0B187;
    --gray: #393644;
    --blue: #7D778C;
    
    font-family: Inter, sans-serif;
  }

html{
    box-sizing: border-box;
}

body{
    padding-top: 6vh;
    justify-content: center;
    background-color: var(--blue);
    margin: 0;
    
}

#stickyHeader{
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: var(--blue);
    display: flex;
    justify-content:space-around;
    width: 100%;
    height: 40px;
    flex-wrap: wrap;
   
    
}

#header1{
    font-size: medium;
    font-weight: normal;
    width: 252px;
}

#stickyHeader button{
    font-size: .77rem;
}

#main-wrapper{
    margin-top: .5vh;
    background-color: var(--blue);
    display: flex;
    flex-direction: column;
    align-items: start;
    
}

#header{
    background-color: var(--blue);
    display: flex;
    flex-wrap: nowrap;
}



.batter_name{

    flex: 1;
    
}


.inning{
    background-color: var(--white);
    border-style: solid;
    border-color: var(--blue);
    text-align: center;
    width: 121px;
    border-width: 3px;
}


#row-wrapper{
    display: flex;
    flex-wrap: nowrap;
    
}

#row-wrapper svg{
    padding: 5px;
    width: 117px;
    height: auto;
    
}

.detail-view{
    padding: 5px;
    max-width: 40%;
    min-width: 30%;
    height: auto;
    
}

.row-header{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    
    font-size: x-small;
    color: var(--white);
    margin: 3px;
    
    
}

.field{
    max-width: 127px;
}

#infield{
    transition: all 2.5s ease;
    fill: green;
}

#First{
    transition: all 2.5s ease;
    fill: white;
}

#Second{
    transition: all 4.5s ease;
    fill: white;
}

#Third{
    transition: all 5s ease;
    fill: white;
}

svg line {
    transition: all 1s ease;
    fill: white;

}
#FirstTo2nd {
    transition: all 3s ease;
    fill: white;

}

#SecondTo3rd {
    transition: all 4s ease;
    fill: white;

}


.small-button, .runner_button, .runner_button2, .rbi_number, .small-button3{
    height: 10vh;
    flex: 1;
    margin: 5px;
    border-radius: 5px;
    touch-action: manipulation;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    
    
}

.small-button2, .small-button3{
    height: 10vh;
    flex: 1;
    margin: 5px;
    touch-action: manipulation;
    
}

.large-button, #swingingStrike, #calledStrike {
    height: 8vh;
    flex: 1;
    margin: 5px;
    font-size: large;
    border-radius: 5px;
    touch-action: manipulation;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

}

button{
    font-size: large;
    color: black;
    font-weight: 600;
}

.headerButton{
    font-size: medium;
    margin: 5px;
    flex: 1;
}





/* BELOW IS FOR MAIN.HTML */

#wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 97vh;
}

.hidden{
    display: none;
}

#ui_wrapper_main{
    width: 90vw;
    background-color: var(--blue);
    margin-top: 1vh;
    order: 99;
    touch-action: manipulation;
    margin-bottom: 31vh;
    
}

.row-main{
    display: flex;
}

#single_btn{
    background-color: #FFF6E5;
}
#double_btn{
    background-color: #FFDC9F;
}
#triple_btn{
    background-color: #FFC259;
}
#homer_btn{
    background-color: #FFA812;
}

#f_btn, #e_btn, #fc_btn, #dp_btn, #gb_btn, #l_btn{
    background-color: #55d6df;
    border-radius: 5px;

}

#strike_btn{
    background-color: rgb(241, 134, 134);
}

#ball_btn{
    background-color: rgb(164, 224, 144);
}

.small-button2{
    background-color: rgb(104, 180, 147);
    border-radius: 5px;
}

#undo{
    background-color: #f89898;
}

#grid{
    background-color: rgb(219, 165, 48);
}

#fc_btn{
    background-color: rgb(119, 119, 196);
}

#l_btn{
    background-color: #44c28b;
}

#f_btn{
    background-color: #37a274;
}


#gb_btn{
    background-color: #2b7957;

}

#foul_btn{
    background-color: #5bd2da;
}

#out_btn{
    background-color: rgb(217, 59, 90);
}

#error_btn{
    background-color: rgb(225, 66, 66);
}

#hbp_btn{
    background-color: rgb(225, 175, 66);
}

#hit_btn{
    background-color: rgb(66, 225, 167);
}

#prompt_wrapper{
    order: 98;
    font-size: 1rem;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    max-width: 90%;
    color: white;
    height: 30px;
    padding-top: 5px;
    
}

/* BELOW IS NEW STYLING FOR BATTER HEADER */

.batter_header{
    display: flex;
    flex-direction: row;
}

.position_number{
    width: 20px;
    font-size: 11px;
}

.player_number{
    width: 20px;
    font-size: 11px;
}

.inning_number{
    width: 15px;
    font-size: 11px;

}