:root {
    font-size: 62.5%;/* Make rems be multiples of 10px (when using default browser settings, scales with settings) */
    --dark-background: hsl(200, 18%, 12%);
    
    --divider-border: 1px solid black;
    
    height: 100%;
    width: 100vw;
    font-family: 'Roboto', sans-serif;
}

* {
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
}

button {
    padding: 0.4em;
}

.delete-button {
    color: white;
    background-color: hsl(0, 100%, 42%);
}

.delete-button:hover {
    background-color: hsl(0, 100%, 50%);
}

.delete-button:disabled {
    background-color: rgba(239, 239, 239, 1);
    color: rgba(16, 16, 16, 0.3);
    border-color: rgba(118, 118, 118, 0.1);
}

::file-selector-button {
    padding: 0.4em;
}

body {
    font-size: 1.6rem;
    margin: 0.25em;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    
    user-select: none;
}

/*Selector*/
#selector {
    display: flex;
    flex-direction: column;
}

/*Download*/
#download {
    padding-top: 0.5em;
}

/*Reload*/
#reload {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

#reload_button {
    font-size: 2.5rem;
    padding: 0.8em;
}

.reload_warning {
    display: inline-block;
    color: white;
    background: hsl(1, 77%, 55%);
    
    padding-left: 0.4em;
    padding-right: 0.4em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    
    margin-left: 0.5em;
    
    border-radius: 5em;
    
    visibility: hidden;
}

.reload_warning.active {
    visibility: visible;
}

/*Robber Spawns and CCTVs*/
#robber_spawns_and_cctvs {
    display: flex;
    flex-direction: row;
    max-width: 97%;
}

#robber_spawns_and_cctvs > * {
    flex-basis: 100%;
}

/*Robber Spawns*/
#robber_spawns_section > h1 {
    display: inline-block;
}

/*CCTVs*/
#cctvs_section > h1 {
    display: inline-block;
}

/*Available Money*/
#available_money_section > h1 {
    display: inline-block;
}

#available_money_bonuses {
    font-size: 1.8rem;
    
    display: flex;
    flex-direction: row;
    gap: 0.4em;
}

.class_bonus_checkbox {
    display: flex;
    flex-direction: row;
    gap: 0.2em;
}

/*Object List Search*/
#object_search {
    min-width: 14em;
}

/*Object List Tools*/
#placed_object_list_tools {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 97%;
    gap: 0.2em;
}

.tool_option_list {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.tool_option_list > *:nth-child(2) {
    flex-grow: 1;
}

.list_tool_list {
    list-style: none;
    
    height: 30rem;
    width: 75rem;
    
    overflow-y: scroll;
    overflow-x: hidden;
}

.list_tool_list li.selected {
    background-color: #64b5f6;
}

.list_tool_list li.filtered {
    display: none;
}



/*Total Money*/
#available_money_section > p {
    margin-left: 1.5em;
}

/*Undo Redo*/
#placed_object_list_undo_redo {
    display: flex;
    flex-direction: row;
    gap: 0.2em;
    margin-bottom: 0.5em;
}

#placed_object_list_undo_redo > button {
    flex-basis: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Object List*/
#placed_object_list {
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;
    border-top: var(--divider-border);
}

.placed_object_list_entry {
    display: flex;
    gap: 0.8em;
    padding: 0.3em;
    border-bottom: var(--divider-border);
    
    cursor: pointer;
}

.placed_object_list_entry.filtered {
    display: none;
}

.placed_object_list_entry.selected {
    display: flex;
    background-color: #64b5f6;
}



/*Popups*/
.popup_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 2.7rem;
    
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    
    user-select: none;
}

.popup {
    color: white;
    
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    
    padding: 5rem;
    
    background-color: var(--dark-background);
}

.popup_prompt {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}

.popup_message {
    font-size: 0.8em;
    text-align: center;
}

.popup_content {
    display: flex;
    flex-direction: column;
    gap: 1em;
}