html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-weight: 400;
    --sb-width: 59px;
}

body.sb-expanded {
    --sb-width: 290px;
}

main {
    margin-left: 5rem;
    transition: margin-left 0.5s ease-in-out;
    width: 100%;
    overflow-y: scroll;
}

strong {
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-text-primary);
}

p {
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--text-text-tertiary);
}

h1 {
    font-size: 30px;
    font-weight: 600;
    margin: 10px 0;
}

h2 {
    margin-bottom: 10px;
    font-weight: 600;
}

h3 {
    font-weight: 600;
    margin-bottom: 10px;
}

h4 {
    font-weight: 600;
}

hr {
    width: 100%;
    border: none;
    border-top: 1px solid var(--surface-surface-tertiary);
    margin: 10px 0;
}

form {
    width: 100%;
    display: grid;
    gap: 10px;
}

.select-language {
    color: var(--grey-600);
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    clear: both;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.language-buttons {
    margin: auto;
    text-align: center;
}

#mobile-menu {
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--surface-surface-primary);
    color: var(--text-text-primary);
    border-radius: 100%;
    font-size: var(--font-l);
    position: fixed;
    right: 10px;
    top: 10px;
    display: none;
    z-index: 9999;
}

#steps:before {
    content: "";
    height: 2px;
    width: 20%;
    position: absolute;
    top: calc(50% - 2px);
    background: var(--surface-brand-surface-brand-primary);
    z-index: 2;
    transition: width 0.2s ease;
}

#steps:after {
    content: "";
    height: 2px;
    width: 100%;
    position: absolute;
    top: calc(50% - 2px);
    background: var(--grey-300);
    z-index: 1;
}

.pagination-item {
    width: 32px;
    height: 32px;
}

.pagination-inner {
    width: 24px;
    height: 24px;
}

.pagination-dot {
    width: 8px;
    height: 8px;
}

.tooltip.warning:before {
    content: "\e90d";
}

.tooltip.ssl:before {
    content: "\ebb7";
}

.tooltip.delete:before {
    content: "\edaa";
}

.tooltip.edit:before {
    content: "\eaa8";
}

.tooltip.edit:before {
    content: "\eaa8";
}

.tooltip.login:before {
    content: "\ebc0";
}

.tooltip.history:before {
    content: "\e9ff";
}

.tooltip.mail_spamfilter:before {
    content: "\ecba";
}

.tooltip.mail_is_active:before {
    content: "\ecd1";
}

.tooltip.mail_sender_alias:before {
    content: "\ec60";
}

.tooltip.mail_copy_address:before {
    content: "\e953";
}

.tooltip.mail_responder:before {
    content: "\ea46";
}

.tooltip.mail_catchall:before {
    content: "\e90d";
}

.tooltip.restore:before {
    content: "\e9fe";
}

.tooltip.restore_options:before {
    content: "\e9fe";
}

.tooltip.email:before {
    content: "\ebcd";
}

.tooltip.check:before {
    content: "\e9da";
}

.tooltip.x:before {
    content: "\ed89";
}

.tooltip.delete,
.tooltip.edit,
.tooltip.login,
.tooltip.history,
.tooltip.restore,
.tooltip.restore_options,
.tooltip.email,
.tooltip.check,
.tooltip.x {
    cursor: pointer;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@media (min-width: 722px) {
    main { margin-left: var(--sb-width); }
}

@media (max-width: 821px) {
    main { margin: 0; }
    body.sb-expanded aside { margin-left: 0; }
    aside { margin-left: -85px; }
    #mobile-menu { display: flex; }
    .collapse { display: none; }
}