.activity-page {
    margin: 10px;
}

.activity-head {
    background-color: hsl(208deg 100% 97%);
    position: sticky;
    top: 0;

    & th {
        border-bottom: 1px solid hsl(0deg 0% 87%);
    }
}

.activity-foot {
    background-color: hsl(208deg 100% 97%);
    font-weight: 700;
    position: sticky;
    bottom: 0;
}

.table-striped {
    & tr.recently_active {
        & td {
            background-color: hsl(120deg 97% 83%);
        }

        &:nth-child(odd) td {
            background-color: hsl(120deg 70% 76%);
        }
    }
}

.summary-table,
.analytics-table {
    border: 1px solid hsl(0deg 0% 87%);
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0;
    margin: 0 10px;

    & th,
    td {
        border-left: 1px solid hsl(0deg 0% 87%);
        text-align: left;

        &.number {
            text-align: right;
        }
    }

    th {
        vertical-align: bottom;
        padding: 8px;
        max-width: fit-content;
    }

    td {
        border-top: 1px solid hsl(0deg 0% 87%);
        white-space: nowrap;
        padding: 2px 8px;
    }

    tbody > tr:nth-child(odd) > td {
        background-color: hsl(0deg 0% 98%);
    }

    tbody tr:first-child td {
        border-top: 0;
    }

    thead tr:first-child > th:first-child {
        border-top-left-radius: 4px;
    }

    thead tr:first-child > th:last-child {
        border-top-right-radius: 4px;
    }

    tbody tr:last-child > td:first-child {
        border-bottom-left-radius: 4px;
    }

    tbody tr:last-child > td:last-child {
        border-bottom-right-radius: 4px;
    }

    thead tr:first-child th {
        border-top: 0;
    }
}

tr.admin td:first-child {
    font-weight: bold;
    color: hsl(240deg 100% 50%);
    font-size: 110%;
}

.good {
    font-weight: bold;
    color: hsl(120deg 100% 33%);
}

.current-plan-data-missing,
.bad {
    font-weight: bold;
    color: hsl(0deg 100% 39%);
}

.support-query-result {
    background-color: hsl(210deg 100% 97%);
    padding-left: 15px;
    padding-top: 14px;
    border-radius: 7px;
    box-shadow: 0 10px 7px -6px hsl(0deg 2% 45%);
    margin-bottom: 10px;

    & select {
        height: 30px;
        width: 220px;
        padding: 0 6px;
        font-size: 14px;
        color: hsl(0deg 0% 33%);
        border-radius: 4px;
        border: 1px solid hsl(0deg 0% 80%);
        margin-bottom: 10px;
        cursor: pointer;
        background-color: hsl(0deg 0% 100%);
        vertical-align: middle;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

        &:focus {
            outline: 1px dotted hsl(0deg 0% 20%);
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }
    }

    & input {
        width: 206px;
        padding: 4px 6px;
        border-radius: 4px;
        border: 1px solid hsl(0deg 0% 80%);
        color: hsl(0deg 0% 33%);
        margin-bottom: 10px;
        transition:
            border linear 0.2s,
            box-shadow linear 0.2s;
        box-shadow: inset 0 1px 1px hsla(0deg 0% 0% / 7.5%);

        &:focus {
            border-color: hsl(206deg 80% 62% / 80%);
            outline: 0;
            box-shadow:
                inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
                0 0 8px hsl(206.494deg 80% 62% / 60%);
        }
    }

    .label {
        padding: 2px 4px;
        font-size: 11.844px;
        font-weight: bold;
        line-height: 14px;
        color: hsl(0deg 0% 100%);
        text-shadow: 0 -1px 0 hsla(0deg 0% 0% / 25%);
        background-color: hsl(0deg 0% 60%);
        border-radius: 3px;
    }
}

.approve-sponsorship-button,
.support-search-button,
.support-submit-button,
.delete-user-button,
.scrub-realm-button {
    padding: 6px 12px;
    display: inline-block;
    margin-bottom: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4286;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;

    &:hover,
    &:focus {
        text-decoration: none;
    }

    &:focus {
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    &:active {
        background-image: none;
        outline: 0;
    }

    &[disabled] {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.65;
    }
}

.approve-sponsorship-button,
.support-search-button,
.support-submit-button {
    color: hsl(0deg 0% 20%);
    background-color: hsl(0deg 0% 100%);
    border: 1px solid hsl(0deg 0% 83%);
    border-radius: 2px;

    &:hover,
    &:focus,
    &:active {
        color: hsl(0deg 0% 20%);
        background-color: hsl(0deg 0% 92%);
        border: 1px solid hsl(0deg 0% 68%);
    }
}

.delete-user-button,
.scrub-realm-button {
    color: hsl(0deg 0% 100%);
    background-color: hsl(2deg 64% 58%);
    border: 1px solid hsl(2deg 64% 53%);
    border-radius: 2px;

    &:hover,
    &:focus,
    &:active {
        color: hsl(0deg 0% 100%);
        background-color: hsl(2deg 65% 50%);
        border: 1px solid hsl(2deg 65% 41%);
    }
}

.installation-activity-header {
    text-align: center;
}

.remote-server-information,
.remote-realm-information {
    padding-bottom: 15px;
}

.remote-form {
    margin-bottom: 10px;
}

.support-realm-icon {
    max-width: 25px;
    position: relative;
    top: -2px;
}

.support-realm-status-form {
    position: relative;
    top: 20px;
}

.support-discount-form {
    position: relative;
    top: -50px;
}

.support-plan-type-form {
    position: relative;
    top: -10px;
}

.sponsorship-pending-form {
    position: relative;
    top: -25px;
}

.current-plan-details {
    position: relative;
    top: -45px;
}

.approve-sponsorship-form {
    position: relative;
    top: -40px;
}

.billing-modality-form {
    position: relative;
    top: -30px;
}

.downgrade-plan-form {
    position: relative;
    top: -75px;
}

.modify-plan-method-select {
    width: auto;
}

.scrub-realm-form {
    position: relative;
    top: -70px;
}

.support-submit-button {
    position: relative;
    top: -3px;
}

.search-query.input-xxlarge {
    width: 530px;
    padding: 4px 14px;
    margin-bottom: 0;
    border-radius: 15px;
    border: 1px solid hsl(0deg 0% 80%);
    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
    transition:
        border linear 0.2s,
        box-shadow linear 0.2s;
    color: hsl(0deg 0% 33%);

    &:focus {
        border-color: hsl(206deg 80% 62% / 80%);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
            0 0 8px hsl(206.494deg 80% 62% / 60%);
    }
}

@media (width <= 767px) {
    .search-query.input-xxlarge {
        width: 100%;
    }
}