:root {
    /* MLB Logo Colors */
  --mlb-blue: rgba(0, 45, 114, 1);
  --mlb-red: rgba(200, 16, 46, 1);
  --mlb-white: rgba(255, 255, 255, 1);

  --mlb-blue-light: rgba(0, 45, 114, 0.5);
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f3f3f3; /* Light background for contrast */
}

.content {
    height: 90%;            /* Set height of the content to 70% (100% - 10% footer) */
    display: flex;         /* Use flexbox for layout */
    justify-content: space-between; /* Add space between panels */
    padding: 20px;         /* Padding around the content */
    box-sizing: border-box; /* Include padding in height calculations */
}

.panel {
    padding: 20px;         /* Padding around panels */
    box-sizing: border-box; /* Include padding in height calculations */
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 8px;    /* Slightly rounded corners */
    background-color: white; /* White background */
    margin: 10px;          /* Margin around each panel */
    display: flex;         /* Use flexbox for vertical layout */
    flex-direction: column; /* Align sections vertically */
    height: calc(100% - 20px); /* Full height minus margins */
}

.left {
    width: 80%;
}

.right {
    width: 20%;
}

.section {
    width: 100%;           /* Full width for each section */
    padding: 10px;         /* Padding */
    box-sizing: border-box; /* Include padding in height calculations */
}

.top {
    text-align: center;
    height: 10%;           /* Top section takes 10% of the height */
}

.middle {
    text-align: center;
    flex-grow: 1;          /* Middle section uses the remaining space */
}

.bottom {
    text-align: center;
    height: 10%;           /* Bottom section takes 10% of the height */
}

/* Right panel section heights */
.right .section.top {
    height: 20%;           /* Top section takes 20% of the height */
}

.right .section.middle {
    flex-grow: 1;          /* Middle section uses the remaining space */
}

.right .section.bottom {
    height: 40%;           /* Bottom section takes 40% of the height */
}

.form-group {
    display: flex;         /* Use flexbox for horizontal alignment */
    justify-content: space-between; /* Space between label and select */
    align-items: center;   /* Vertically align items */
    margin-bottom: 15px;   /* Space between form groups */
}

.form-group label {
    width: 40%;            /* Adjust label width */
}

.form-group select {
    width: 50%;            /* Adjust select width */
    padding: 5px;         /* Padding for select */
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 4px;   /* Slightly rounded corners */
    background-color: #fff; /* White background */
    transition: border-color 0.3s; /* Smooth transition for border color */
}

.form-group select:focus {
    border-color: #888;   /* Darker border color on focus */
}

footer {
    position: fixed;       /* Keep the footer at the bottom */
    left: 0;
    bottom: 0;
    width: 100%;          /* Full width */
    height: 10%;          /* Set footer height to 10% */
    background-color: #fff; /* White background */
    text-align: center;   /* Center the text */
    padding: 10px;        /* Padding */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    border-top: 1px solid #ddd; /* Light gray border at the top */
}

#scatter-plot {
    width: 100%; 
    height: 100%; 
    flex-grow: 1;
}

.special-point {
    fill: var(--mlb-red);
}

.regular-point {
    fill: var(--mlb-blue-light);
}

.tooltip {
    position: absolute;
    text-align: center;
    padding: 5px;
    background: var(--mlb-white);
    border: 1px solid var(--mlb-red);
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
}

.loading-indicator {
    position: relative;         /* Absolute positioning within the panel */
    top: 50%;                  /* Center vertically */
    left: 50%;                 /* Center horizontally */
    transform: translate(-50%, -50%); /* Centering adjustment */
    display: flex;             /* Flexbox for centering */
    align-items: center;       /* Center vertically */
    justify-content: center;    /* Center horizontally */
    font-size: 20px;           /* Font size for loading text */
    color: #888;               /* Color of loading text */
}

.spinner {
    width: 30px;               /* Width of the spinner */
    height: 30px;              /* Height of the spinner */
    border: 4px solid #ddd;    /* Light gray border */
    border-top: 4px solid #3498db; /* Blue color for the top part */
    border-radius: 50%;        /* Make it circular */
    animation: spin 0.8s linear infinite; /* Spin animation */
    margin-right: 10px;        /* Space between spinner and text */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}