.title {
    margin: 0;
    font-size: var(--size-subheader);
    font-weight: 400;
}

.resetLink {
    color: var(--color-softred) !important;
}

.serversContainer {
    margin-top: var(--space-default);
}

.servers {
    background-color: var(--background-secondary);
    list-style: none;
    padding: var(--space-quarter) var(--space-half);
    margin: 0;
    word-break: break-word;
}

.servers li .server {
    display: flex;
    width: 100%;
    align-items: center;
    font-weight: 400;
    font-size: var(--size-default);
    min-height: 52px;
}

.serverLabel {
    padding: var(--space-quarter) 0;
    word-break: break-word;
}

.servers li .server > div:last-child {
    margin-left: auto;
}

.servers li .server > div:last-child button {
    border: none;
    border-radius: 2px;
    font-size: var(--size-small);
    padding: var(--space-quarter) var(--space-half);
    word-break: normal;
}

.servers .server > div button[disabled] {
    background-color: var(--color-disabled);
    color: var(--color-secondary);
}

.servers .server > div button:focus {
    outline: none;
}

.servers .server > div button:not(:last-child) {
    margin-right: var(--space-quarter);
}

@media (max-width: 768px) {
    .servers {
        padding: 0 var(--space-quarter);
    }

    .serverLabel {
        padding-right: var(--space-quarter);
    }

    .servers .server > div button {
        margin: var(--space-quarter) 0;
    }

    .servers li .server > div:last-child button {
        display: block;
        padding: var(--space-quarter);
        width: 100%;
    }
}

.primary {
    background-color: var(--color-blue);
    color: var(--color-alt);
    transition: background-color 0.2s ease-in-out;
    will-change: background-color;
}

.primary:hover {
    background-color: var(--color-lightblue);
}

.warning {
    background-color: var(--color-softred);
    color: var(--color-alt);
    transition: background-color 0.2s ease-in-out;
    will-change: background-color;
}

.warning:hover {
    background-color: var(--color-lightred);
}

.textarea {
    width: 100%;
    border-radius: 2px;
    border-color: var(--background-quaternary);
    padding: var(--space-half) var(--space-half);
    margin-bottom: var(--space-quarter);
}

.block {
    margin-bottom: var(--space-half);
}

.addServer {
    margin-top: var(--space-half);
    margin-bottom: var(--space-default);
    background-color: var(--background-secondary);
    padding: var(--space-half);
}

.addServer p {
    font-size: var(--size-default);
    font-weight: 400;
    margin-top: var(--space-half);
    margin-bottom: var(--space-quarter);
}

.addServer > div:first-child p {
    margin-top: var(--spacing-default);
}

@media (max-width: 768px) {
    .addServer {
        padding: var(--space-half) var(--space-quarter);
    }
}

.badge {
    color: var(--color-secondary);
    border-radius: 2px;
    margin-right: var(--space-quarter);
    width: 16px;
    text-align: center;
}

.badge::after {
    content: '.';
}

.miniSpinnerContainer {
    position: relative;
    margin-right: 4px;
    display: inline-block;
}

.miniSpinner {
    color: var(--color-blue);
}

.miniSpinner:after {
    position: relative;
    animation: changeContent .8s linear infinite;
    display: block;
    content: "⠋";
}

@keyframes changeContent {
    10% { content: "⠙"; }
    20% { content: "⠹"; }
    30% { content: "⠸"; }
    40% { content: "⠼"; }
    50% { content: "⠴"; }
    60% { content: "⠦"; }
    70% { content: "⠧"; }
    80% { content: "⠇"; }
    90% { content: "⠏"; }
}
