:root {
    color-scheme: light;
    --bg: #f2f1ef;
    --bg-module: #ecebe8;
    --bg-inner: #ffffff;
    --border: #d3d0d1;
    --text: #151922;
    --muted: #667085;
    --brand: #e53934;
    --brand-strong: #9b1c18;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-module);
    color: var(--text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
}

.main {
    padding: calc(var(--top-height, 65px) + 25px) 50px 0px calc(var(--left-width, 70px) + 50px);
    width: 100%;
}

h1 {
    margin: 0;
    font-family: Space Grotesk;
    font-size: 22pt;
    font-weight: 500;
}

button,
input,
select,
textarea {
    font: inherit;
}

button.loading {
    color: transparent;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

button.loading::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 3px solid #ffffff;
    border-top-color: transparent;
    border-radius: 100px;
    z-index: 1000;
    animation: loading 1s infinite;
}

.buttons {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: .5rem;
}

.buttons button.fill-white {
    min-height: 44px;
    padding: 0 20px 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    line-height: 150%;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    color: #292825;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    border: 1px solid var(--border);
    transition: all 400ms;
}

.buttons button.fill-primary {
    min-height: 44px;
    padding: 0 20px 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    border: 0;
    border-radius: 8px;
    background: #ef3333;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 16px rgba(229, 57, 53, 0.22);
    transition: all 400ms;
}

.buttons button svg {
    width: 18px;
    stroke-width: 2px;
    color: currentColor;
}

.buttons button.fill-primary:hover {
    background: #d92929;
}

@keyframes loading {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@media (max-width: 760px) {
    .main {
        padding: 24px 0;
    }
}