.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 32%; 
  grid-template-rows: 33% 33% 33%;
  height:90vh;
  grid-gap:10px;
  padding:10px;
}
guixx-window {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
guixx-window:last-child {
  grid-column: 3;
  grid-row: 3;
}
guixx-base-login { 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#error-text {
    color: white;
    background-color: red;
    border-radius: 0.5em;
    justify-content: center;
    font-size: 3vh;
    padding: 1em;
    visibility:hidden;
}

guixx-base-form {
  align-items: center;
    text-align: center;
    display: flex;
    height: 70vh;
    flex-direction: column;
    justify-content: center;
}

guixx-base-input {
  font-size: 3vh;
}

#login-btn {
  font-size: 3vh;
}


#report-container {
  overflow: scroll;
  height: 100%;
}
guixx-base-report {
  display: block;
  background-color: var(--guixx-theme-dark);
  border-radius: 1em;
  margin: 25px;
  padding:1em;
  color: white;
}

guixx-table-row {
  border-top: 1px dotted black;
  display: flex;
  width: 100%;
}
guixx-table-row .selected {
  font-weight: bold;
  background-color: lightblue;
}
guixx-table-cell {
  width: -webkit-fill-available;
  padding:10px;
  overflow: hidden;
  justify-content: space-around;
  white-space: nowrap;
  text-overflow: ellipsis;
}
guixx-table-cell.collapseheader {
    display: flex;
}

.tcollapsible {
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.3s ease;
  width: 0;
  opacity: 0;
  padding: 0px;
}

.tcollapsible.open {
  width: -webkit-fill-available; /* not directly animatable */
  opacity: 1;
  padding:10px;
}
.collapseheader::after {
    content: ">";
    float: inline-end
}
.collapseheader.open::after {
    content: "<";
}

.grid-container {
    display: grid;
    grid-template-columns: 33% 33% 32%; 
    grid-template-rows: 33% 33% 30%;
    height:90vh;
    grid-gap:10px;
    padding:10px;
}
#map-window {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}
#collection-map-window {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
}
.download-reports {
    height: 30vh;
}
.monthly-audit {
    height: 30vh;
}
#current-breakdown, #offsite-col-activity, #activity-report {
    grid-row: 3;
    grid-column: 1 / span 2;
}
#activity-report.input-report {
    grid-column: 1/span 3;
}
#inaccessible-finder {
    grid-row: 1 /span 3;
    grid-column: 1/span 3;
}
.col-three {
    grid-column: 3;
}

.row-one {
    grid-row: 1;
}
.row-two {
    grid-row: 2;
}
.row-three {
    grid-row: 3;
}
.horizontal-stretch, .fill-screen {
    grid-column: 1 / span 3;
}
.vertical-stretch, .fill-screen, #leg-window {
    grid-row: 1 / span 3;
}
#leg-window {
    grid-column: 1 / span 2;
}

.control-tool {
    width: 30%;
}
.control-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}
#date-select {
    width: 30%;
    height: 2rem;
}
#bay-selection-container { 
    background-color: white;
    width: 29%;
}
#bay-selection-container.active {
    width: fit-content;
    min-width: 29%;
}
.control-container > div, .control-container > input {
    height: 2rem;
    width: 30%;
}
div.collapsible-header {
    padding:0;
}
.select-wrapper > .select-dropdown.dropdown-trigger {
    height: 100%;
}
#header-label {
    color: black;
    font-size: inherit;
    white-space: nowrap;
    overflow: hidden;
}
div > label {
    color: black;
    font-size: inherit;
}