#screen_greyout {
    /* Full screen blank element that is translucent, and greys out the main screen when a popup is showing */
    position: fixed;
    top: 0px;
    left: 0px;
    
    height: 100%;
    width: 100%;
    
    background-color: #999;
    opacity: 0.7;
    
    display: none; /* Changes to visible as required */
}

#overlay_menu_screen {
    /* Full screen element that contains the popups. Click it (outside a popup) to dismiss. */
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* ------------- THE POPUP BOXES --------------------- */

/* The structure of a popup box is
 * div.popup_box
 *      h1
 *      div.popup_text
 *      div.popup_menu_button.has_tooltip (repeat as many as buttons needed)
 */

#overlay_menu_screen .main_segment {
    /* NOT SURE OF THE USE/MEANING OF THIS - EVERY POPUP BOX IS ALSO A "MAIN SEGMENT"
       More generally, every large part of a page is a "main segment". It gives it a border, and some flex values in app.cs
    */
    display: none;
}

.popup_box {
    /* A popup box */
    background-color: darkorange;
    max-height: 75%;
    overflow-y: auto;
    overflow-x: visible;
}

.popup_box h1 {
    /* Main heading in a popup box */
    width: 100%;
    text-align: center;
    font-size: 2em;
}

.popup_box .popup_text {
    font-size: 1.5em;
    text-align: center;
}

/* -------------------- POPUP MENU BUTTONS -------------------- */
.popup_menu_button {
    cursor: pointer;
    font-size: 2em;
    font-family: sans-serif;
    text-align: center;
    margin: 5px 20px 5px 20px;
    background-color: orange;
    padding: 5px;
}

.popup_menu_button.large {
    /* Used for "CANCEL" buttons when you don't want to accidentally do a process (for example) */
    padding-top: 1em;
    padding-bottom: 1em;
}

.popup_menu_button:hover {
    background-color: #fdd;
}

.popup_menu_button:hover .tooltip {
    visibility: visible;
}

/* -------------------- LISTS OF TOGGLE ITEMS -------------------- */

.selector_row {
  display: flex;
  justify-content: space-between; /* Pushes children apart */
  align-items: center; /* Vertically centers items (optional) */
  border: 1px solid gray;
  padding: 0.5em 0.2em 0.5em 0.2em;
}

.selector_name {
  margin-right: auto; /* Keeps the first child on the left */
  font-size: 1.5em;
  font-weight: bold;
}

.selector_toggle {
  margin-right: 1em; /* Adds spacing between the right-side items */
}

.toggle_off {
  color: gray;
}


/* -------------------- SPECIFIC POPUP TYPES -------------------- */
.option_list {
    /* Not sure?? Only used for the box showing stats for a round */
    background-color: #f88;
    margin: 20px;
    display: none;
    opacity: 1;
}



/* -------------------- MISC -------------------- */
.tooltip {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  font-size: 0.5em;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}



/* -------------- LIST OF CLUBS ------------------ */
#bag_club_count {
  width: 100%;
  text-align: center;
}

#bag_club_count.excess {
  color: red;
}