/* Helper Clases */

.wrapper {
    display: flex;
    flex: auto;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}
.wrapper iframe {
    border: none;
}
.hidden {
    display: none;
}

/* App Icons */

.apps-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    background: var(--primary);
    border-right: 1px solid var(--primary-border-color);
}
.top-apps {
    flex: auto;
    overflow: auto;
    display:flex;
    flex-direction: column;
    gap: var(--spacing);
    padding: var(--spacing);
}
.bottom-apps {
    border-top: 1px solid var(--primary-lighter);
    padding: var(--spacing);
    display: flex;
    flex-direction: column;
}
.apps-wrap button {
    width: 35px;
    height: 35px;
    min-height: 35px;
    min-width: 35px;
    padding: 0;
    border-radius: 5px;
    background: #eee;
    color: #000;
    border-radius: 100px;
}
.apps-wrap button i {
    font-size: 2em;
    margin-left: -2px;
}
.apps-wrap button .label {
    position: absolute;
    margin: 3px 0 0 -300px;
    background: var(--accent-primary);
    color: var(--accent-primary-contrast);
    opacity: 0;
    padding: 5px 20px 5px 10px;
    transition: visibility 0s, opacity 0.15s linear;
    transition-delay: .25s;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.apps-wrap button.active {
background: #fff;
    color: #000;
    border-radius: 3px;
    border: 1px solid var(--color);
}



.top-apps button:hover .label {
    visibility: visible;
    opacity: 1;
    margin: 3px 0 0 40px;
}

.note {
    border-top: 1px solid var(--primary-lighter);
    padding: 15px 0;
    margin: 15px 0;
}
.box {
    border: 1px solid var(--primary-lightest);
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    box-shadow: var(--box-shadow);
    background: var(--background);
    color: var(--color);
}
.errorreporting {
    background: var(--accent-primary);
    color: var(--accent-primary-contrast);
    padding: 20px;
    margin: 0 0 15px;
    border-radius: var(--border-radius);
}
.errorreporting a:hover {
    color: var(--accent-primary-contrast);
}
.errorreporting h3 {
    margin: 0 0 15px;
}
.splashwrapper {
    padding: 30px;
    background: var(--primary-lighter);
    color: var(--primary-contrast);
}
.splashwrapper ul {
    margin: 0;
}
.splashwrapper li {
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .apps-wrap {
        flex-direction: row;
        width: auto;
    }
    .top-apps,
    .bottom-apps {
        text-align: left;
        flex-direction: row;
    }
    .wrapper {
        flex-direction: column;
    }
    .apps-wrap {
        border-right: none;
    }
    .row {
        flex-direction: column;
    }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1050;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  color: black;
}

.btn-ref {
  font-weight: bold;
}

.row {
    display: flex;
    gap: var(--spacing);
    align-items: center;
}
.row section {
    flex: 1;
    margin-bottom: 20px;
}

.theme-preview {
    border: 1px solid var(--secondary-lighter);
    padding: 3px;
    border-radius: 3px;
    font-size: var(--font-size);
    font-family: var(--font-family);
    background: var(--background);
    display: flex;
}
.theme-preview .col-1 .col-1,
.theme-preview .col-2 .col-1  {
    padding: 2px 4px;
    font-size: .5em;
}
.theme-preview .row {
    gap: 1px;
}
.theme-preview .row:first-child {
    margin-bottom: 1px;
}
.primary1 {
    background: var(--primary);
    color: transparent;
}
.primary2 {
    background: var(--primary-lighter);
    color: transparent;
}
.primary3 {
    background: var(--primary-lightest);
    color: transparent;
}
.secondary1 {
    background-color: var(--secondary);
    color: transparent;
}
.secondary2 {
    background: var(--secondary-lighter);
    color: transparent;
}
.secondary3 {
    background-color: var(--secondary-lightest);
    color: transparent;
}
.accent1 {
    background-color: var(--accent-primary);
    color: transparent;
}
.accent2 {
    background-color: var(--accent-secondary);
    color: transparent;
}
.background {
    background-color: var(--background);
    color: transparent;
}
.table-group-head h3 {
    margin: 5px 0;
}
@media (max-width: 768px) {
  .theme-preview {
    display: none;
  }
}