html, body {
    background-color: #4D97FF;
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 150%;
}

a:active, a:hover, a:link, a:visited {
    color: currentColor;
}

a:active, a:hover {
    filter: brightness(0.9);
}

.licenseBox {
    margin: 3rem;
    position: absolute;
}

.aboutFooter {
    font-size: small;
}

.tabList {
    height: 32px;
    width: 250px; /* Match width of the toolbox */
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 0.80rem;

    /* Overrides for react-tabs styling */
    margin: 0 !important;
    border-bottom: 0 !important;
}

.tab {
    flex-grow: 1;
    height: 80%;
    margin-bottom: 0;

    border-radius: 0.5rem 0.5rem 0 0;
    border: 1px solid hsla(0, 0%, 0%, 0.15);

    padding: 0.125rem 1.25rem 0;
    font-size: 0.75rem;

    background-color: rgb(219, 219, 219);
    color: #575e75;

    display: flex;
    justify-content: center;
    align-items: center;

    user-select: none;
    white-space: nowrap;
}

.tab {
    margin-left: -0.5rem;
}

.tab:nth-of-type(1) {
    margin-left: 0;
}

/* Use z-indices to force left-on-top for tabs */
.tab:nth-of-type(1) {
    z-index: 3;
}
.tab:nth-of-type(2) {
    z-index: 2;
}
.tab:nth-of-type(3) {
    z-index: 1;
}

.tab:hover {
    background-color: rgb(235, 235, 235);
}

.tab.isSelected {
    height: 90%;
    background-color: white;
    color: #4D97FF;
    border-bottom: none;
    z-index: 4;
}

.tab.active {
    background-color: hsla(215, 100%, 65%, 0.15);
}

.tabs {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #D9D9D9;
    border-top: none;
}

.tabPanel {
    position: relative;
    flex-grow: 1;
    display: none;
    background-color: white;
    color: #575e75;
    padding: 2rem 3rem;
}

.tabPanel h4{
    margin: 0.2rem 0;
}

.tabPanel.isSelected {
    display: flex;
    flex-direction: column;
}

.logo {
    height: 80px;
    margin: 3rem auto 3rem;
}

.logo:hover {
    cursor: pointer;
}