/* SPDX-License-Identifier: Apache-2.0 */

/* 
 * main.css
 *
 * This file is part of US population distribution treemap
 * https://codeberg.org/christopherphan/US_population_distribution
 *
 * Christopher Phan
 * https://chrisphan.com/
 * 2023-W26
 *
 ***********************************************
 * The following applies to THIS FILE ONLY:
 *
 * Copyright 2023 Christopher Phan
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

body {
  color: white;
  background: #303030;
  font-family: sans-serif;
}

#main_div {
  width: 1280px;
  margin: 1em;
  display: grid;
  grid-gap: 0.25em;
  grid-template-rows: 1fr 30fr 20fr 2fr 2fr;
  grid-template-columns: 1fr 1fr;
}

.button,
.button-active {
  padding: 2px;
  border: solid 1px white;
}

a,
span.button {
  color: cyan;
  text-decoration: none;
  cursor: pointer;
}

a:hover,
span.button-active {
  color: #00ff00;
  background-color: darkred;
  cursor: pointer;
}

#title {
  grid-area: 1/1/2/3;
  padding-left: 1em;
  text-align: left;
  font-weight: bold;
}

.overlayBoxTitle {
  text-align: center;
  color: orange;
  padding-bottom: 0.5em;
}

.overlayBoxTitle-key {
  text-align: center;
  color: darkred;
  padding-bottom: 0.5em;
}

#main_svg {
  background-color: white;
  padding: 1em;
  grid-area: 2/1/4/3;
}

#info_box {
  background-color: slategray;
  color: white;
  padding: 0.5em;
  grid-area: 4/1/6/2;
  min-height: 2em;
}

#source_div {
  background-color: #003300;
  padding: 0.5em;
  grid-area: 5/2/6/3;
}

#copyright {
  grid-area: 4/2/5/3;
  color: darkgrey;
}

#data_source_info {
  background-color: #003300;
  grid-area: 2/1/4/2;
  padding: 1em;
}

#key_info {
  background-color: white;
  color: black;
  grid-area: 2/2/4/3;
  padding: 0.5em;
  border-color: brown;
  border-width: 0.5em;
  border-style: solid;
}

.key_close_button,
.key_close_button-active {
  padding: 2px;
  border: solid 1px black;
}

span.key_close_button,
a.key_close_link {
  color: darkblue;
}

span.key_close_button-active,
a.key_close_link:hover {
  background-color: #dddddd;
  color: darkgreen;
  cursor: pointer;
}

div.hideable_hidden {
  visibility: hidden;
}

div.hideable_visible {
  visibility: visible;
}

ul {
  list-style: square inside;
}

li {
  display: list-item;
  padding-top: 4px;
  text-indent: 1em hanging;
  padding-bottom: 0.5em;
}

li p {
  padding-left: 1em;
}

tt,
code {
  background-color: #333333;
  font-family: "monospace", monospace;
  font-size: 85%;
}
d .overlay_close {
  text-align: right;
}

.defined_word {
  font-weight: bold;
  color: #cc3333;
}

#key_box {
  height: 30vh;
}
table {
  border-collapse: collapse;
}

table,
td,
th {
  border: none;
  padding-right: 12px;
  padding-left: 2px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  vertical-align: middle;
}

th {
  font-weight: bold;
}

.svg_in_key {
  background-color: white;
}