// --- Change these variables to modify the look
@tenant-color: rgb(19,98,155);
@content-text: black;
@section-header-text: #333;
@primary-bg: #f5f5f5;
@secondary-bg: #dcdcdc;

// --- Do not touch below this point unless you really know what you're doing
.header {
    color: @tenant-color;
    background-color: @primary-bg;
    border-color: @tenant-color;
}

.footer {
    background-color: @primary-bg;
    color: @tenant-color;
}

.section {
    background-color: transparent;
    color: @content-text;
}

.main {
    background-color: @secondary-bg;
}

.content-text {
    color: @content-text;
}

.tenant-text {
    color: @tenant-color;
}

.primary-text {
    color: @primary-bg;
}

.secondary-text {
    color: @secondary-bg;
}

.secondary-border {
    border-color: @secondary-bg;
}

.primary-border {
    border-color: @primary-bg;
}

.tenant-border {
    border-color: @tenant-color;
}

.primary-bg {
    background-color: @primary-bg;
}

.secondary-bg {
    background-color: @secondary-bg;
}

.tenant-bg {
    background-color: @tenant-color;
}

// --- Scrollbar

::-webkit-scrollbar-track {
    background-color: @primary-bg;
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
}

@media screen and (max-width: 499px) {
    ::-webkit-scrollbar-thumb {
        background-color: @tenant-color;
    }
}


*:hover::-webkit-scrollbar-thumb {
    background-color: @tenant-color;
    transition: background-color 1000ms ease-in;
}

.btn-tenant {
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid currentColor;

    &:hover {
        opacity: 0.7;
        transition-duration: .35s;
    }
}