h3 {margin-bottom:5px;}
#input-screen h1 {margin:0;margin-top:30px;margin-left:20px;}
#input-screen p {margin:0; margin-top:10px; margin-left:20px;}
#about-page {margin:0; margin-top:10px; margin-left:20px; font-size:15px; padding:0;border:0;background-color:white;color:#349eeb;font-weight: bold;text-decoration: underline;}
#about-page:hover {color:#246695;cursor:pointer;}
#about-header {margin-top:10px;}
#about-popup p {margin-left:0;line-height:1.4;}
#about-popup li {margin-bottom:5px;}
#input-screen-container {margin-top:20px;display:flex;justify-content:center;align-items:center;text-align:center;}
#input-pitcher-headshot {width: 150px;}
#dropdowns-section {width:350px;text-align:center;}
#dropdowns-section h2 {margin-bottom:20px;color:#333;}
#dropdowns-section label {font-weight: bold; margin-bottom: 5px;}
#loading-overlay-output button {background-color:#349eeb;color:white;border:none;padding: '10px 20px';text-align: center;font-size: 16px;border-radius: 5px;}
#input-batter-headshot {width: 150px;}
#output-screen {display:none;flex-direction:row;width:100%;height:100%;}
#left-output-screen {width:50%;justify-content:center;text-align:center;padding-top:20px;}
#matchup-id-section	{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;gap:20px;margin-bottom: 10px;padding-bottom: 10px;}
#pitcher-headshot-container {flex:0 0 auto;}
#matchup-text {display: flex;flex-direction: column;justify-content: center;text-align: center;}
#batter-headshot-container {flex:0 0 auto;}	
#summary-output {display: flex;justify-content: center;align-items: center;width: 100%;}
#right-output-screen {width:50%;justify-content: center;align-items:center;text-align:center;}
#summary-table {display:flex; justify-content: center; align-items: center;width:100%;margin-top:50px;}
#pitch-plots {display:flex; flex-direction:row;justify-content:center;align-items:center;}
#scatter-plot {height: 350px;border: 1px solid black;margin-top: 5px;margin-left: 5px;}
#pitch-break-plot {height: 345px;border: 1px solid black;padding-left: 5px;padding-bottom: 5px;margin-top: 5px;margin-right: 5px;}
#pitcher-dropdown {margin-bottom: 15px;}
#batter-dropdown {margin-bottom: 15px;}
#run-model {background-color: #349eeb; color: white; border: none; padding: 10px 20px; text-align: center; font-size: 16px; border-radius: 5px; cursor: pointer;}
#open-popup {position: fixed;top: 20px;right: 20px;z-index: 1000;padding: 10px 18px;background-color: rgb(230, 230, 230);color: black;border: none;border-radius: 8px;font-size: 12px;font-weight: 500;cursor: pointer;}
#filters-header {margin-bottom:20px; border-bottom: 2px solid #ccc; padding-bottom: 8px;}
#pitcher-headshot {height:150px;border:1px solid black;border-radius:4px}
#batter-headshot {height:150px;border:1px solid black;border-radius:4px}
#pitcher-dropdown-headshot {height:150px;border:1px solid black;border-radius:4px}
#batter-dropdown-headshot {height:150px;border:1px solid black;border-radius:4px}

#input-screen.visible-page {display:block}
#input-screen.hidden-page {display:none}

#output-screen.visible-page {display:flex}
#output-screen.hidden-page {display:none}

#pitch-table {width:89%;}

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

    #matchup-id-section {margin-top:40px;}
#left-output-screen {
   width: 100%;
}
#summary-table div {
   width: 100% !important;
}
#right-output-screen {
   width: 100%;
}
#output-screen.visible-page {display:block !important;}

#result-tables {width:100%;}
#pitch-table {width:89%;}

#scatter-plot {width: 280px;}

#summary-table {margin-top:0px;}

#pitcher-headshot {height:130px;}
#batter-headshot {height:130px;}

#pitcher-dropdown-headshot {height:100px;margin-top:35px;}
#batter-dropdown-headshot {height:100px;margin-top:35px;}

}

@media only screen and (max-width: 800px) {
#pitch-plots {flex-direction:column;}
}