@font-face {
    font-family: icons;
    src: url('https://anmalan.multiteket.se/css/iconfont/font/nilla.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
}

:root {
    --page-background: #ffece2ff;
    --font-main: "Roboto", sans-serif;

    --color-text: #181818;

    --color-brown: #8c3a27;
    --color-brown-light: #923e2b;

    --color-red: #ff4660ff;
    --color-white: #fefefeff;

    --color-blue: rgb(0, 124, 161);

    --input-border-color: var(--color-red);
    --focus-color: var(--color-red);
    --select-arrow-color: var(--input-border-color);

    --color-yellow: hsl(51, 100%, 40%);
    --color-yellow-hover: hsl(51, 100%, 50%);
}

body,
html {
    margin: 0;
    font-family: var(--font-main);
    justify-content: center;
    font-size: 16px;
}

body {
    background-color: var(--page-background);
    background-image: url('https://anmalan.multiteket.se/images/rainbow_forest.webp');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hidden {
    display: none;
    visibility: hidden;
}

.wrapper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    box-sizing: border-box;
    overflow: auto;
}

.button-wrapper {
    display: grid;
    grid-template-columns: 1fr 0fr;
    align-items: center;

}

.main {
    background-color: #fafafaff;
    border: 1px solid #eef1f034;
    margin-top: 25px;
    margin-bottom: 50px;
    max-width: 500px;
    min-width: 500px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 8px;
    color: white;
    padding: 25px;
    border-radius: 3px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    margin-top: 10px;
    flex: 0;

    img {
        width: 300px;
        height: 67.6px;
    }
}

.content {
    background-color: var(--page-background);
    box-shadow: rgba(0, 0, 0, 0.418) 0px 2px 6px;
    padding: 8px;
    margin-top: 0px;
    margin-bottom: 25px;
    border-radius: 8px;
    color: var(--color-text);

    .inner {
        border: 2px dashed var(--color-red);
        border-radius: 6px;
        padding: 25px;
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: white;
    }
}

/* .main {
    background-color: var(--page-background);
    border: 1px solid #eef1f034;
    margin-top: 25px;
    margin-bottom: 50px;
    max-width: 500px;
    min-width: 500px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 8px;
    color: white;
    padding: 25px;
    border-radius: 16px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.content {

    margin-top: 0px;
    margin-bottom: 25px;
    border-radius: 8px;
    color: var(--color-text);

    .inner {
        border: 2px dashed var(--color-red);
        border-radius: 6px;
        padding: 25px;
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: white;
    }
} */

p {
    font-size: 1rem;
    color: var(--color-text);

    &.info {
        margin-left: 1rem;
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 0;
        margin-top: 0;

        &+&:not(.emph) {
            text-indent: 1rem;
        }
    }

    &.emph{
        font-size: 1rem;
        font-weight: bold;
        margin-top: 0.5rem;
        margin-bottom: 0;

        &+&{
            margin-top: 0.2rem;
        }
    }
}

a {
    color: var(--color-blue);
}

.ohno {
    color: white;
    background-color: var(--color-yellow-hover);
    padding: 1rem 1.5rem;
    border-radius: 24px;
    font-size: 1rem;
    margin-bottom: 15px;
    display: none;

    & p:first-child {
        font-size: 1.2rem;
        text-align: center;
        margin: 0;
        font-weight: bold;
    }
}

.ohno.show {
    display: block;
}

.ohno a {
    color: white;
}

.ohno a:hover {
    color: var(--color-purple-light);
}

h1 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 0.2rem;
    font-weight: bold;
    color: var(--color-red);
}

h1.green {
    color: #00945e;
}

h2 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-weight: bold;
    color: var(--color-red);
}

h3 {
    font-size: 1.1rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    font-weight: bold;
    color: var(--color-red);
}

h3+p {
    margin-top: 0rem;

}

ul.policy-list {

    /* padding-left: 0; */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

    li {
        font-size: 1rem;
        color: var(--color-text);
    }
}

section {
    box-sizing: border-box;
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: -25px;
    margin-right: -25px;
    padding: 0.5rem 1.5rem 0.5rem;
    border: 0;

    h2 {
        margin: 0;
        text-align: center;
        z-index: 2;
    }

    .s-checkbox {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        user-select: none;

        input[type=checkbox] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        input[type=checkbox]:focus~span.checkmark {
            border: 2px solid var(--input-border-color);
            outline: 1px solid var(--color-red);
            outline-offset: 1px;
        }

        span.checkmark {
            box-sizing: border-box;
            font-family: icons;
            position: relative;
            height: 1.5rem;
            width: 2.5rem;
            /* background-color: var(--color-red); */
            border-radius: 8px;
            border: 2px solid var(--color-red);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;

            &:after {
                content: '\e828';
                font-size: 1rem;
                position: absolute;
                display: none;
            }
        }

        input[type=checkbox]:checked~span.checkmark {
            background-color: var(--color-blue);
            color: var(--color-white);

            &:after {
                display: block;
            }
        }

        .label {
            margin-left: 0.5rem;
        }
    }
}


div.selector {
    display: grid;
    align-items: center;
    padding: 0;
    border-radius: 2rem;
    margin-bottom: 0.5rem;
    grid-template-areas: "area59";

    &::after {
        content: "";
        width: 1em;
        height: 0.8em;
        margin-right: 1.3em;
        background-color: var(--select-arrow-color);
        /* background-color: #000;; */
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
        grid-area: area59;
        justify-self: end;
        pointer-events: none;
    }

    &:has(select:disabled) {
        &::after {
            background-color: #cfcfcf;
        }
    }
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: none;
    padding: 0.7rem 1rem;
    border-radius: 2rem;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    grid-area: area59;
    align-items: center;
    border: 2px solid var(--input-border-color);

    /* &[name="op1"] {
        background-color: #5accc2ff;
        color:#fff;
    }

    &[name="op2"] {
        background-color: #00b9f2ff;
        color:#fff;
    }

    &[name="op3"] {
        background-color: #ffe34fff;
    } */


    &:focus {
        outline: 1px solid var(--color-red);
        outline-offset: 1px;
    }

    &:disabled {
        background-color: var(--page-background);
        color: #cfcfcf;
        cursor: not-allowed;
        border: 2px dashed #cfcfcf;
    }
}


input[type=text],
input[type=password],
input[type=email],
input[type=tel] {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid var(--input-border-color);
    padding: 0.7rem 1rem;
    border-radius: 2rem;
    font-family: var(--font-main);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

input[type=email]:invalid:not(:focus) {
    border: 1px solid #e61111;
    color: #e61111;
}


form {
    margin-top: 30px;

    label {
        padding-left: 20px;
        font-size: 0.8rem;
        font-weight: bold;
        text-transform: uppercase;
    }
}

input[type="submit"],
button {
    min-width: 100px;
    font-weight: 800;
    font-size: 16px;
    height: 3em;
    background-color: var(--color-red);
    border: 0px;
    color: var(--color-white);
    cursor: pointer;
    border-radius: 2em;
    white-space: nowrap;
    justify-self: flex-end;
    grid-column-start: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 28px;
    padding-right: 28px;

    & i {
        margin-right: 8px;
        margin-left: -8px;
        font-size: 1.2rem;
    }

    &.busy {
        background-color: var(--color-yellow);
        color: var(--color-text);
        cursor: not-allowed;
        user-select: none;
        pointer-events: none;
    }
}

input[type="submit"]:hover,
button:hover {
    background-color: var(--color-brown-light);
}

input[type="submit"]:active,
button:active {
    background-color: #007c4f;
}

input:focus {
    outline: 1px solid var(--color-red);
    outline-offset: 1px;
}

.glow {
    background-color: #555555;
    animation: changeColor ease;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    border: 2px solid #b06e0d
}

@keyframes changeColor {
    0% {
        background-color: #f09c22;
    }

    50% {
        background-color: #f9bd68;
    }

    100% {
        background-color: #f09c22;
    }
}

.animate-spin {
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-o-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-ms-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@media only screen and (max-width: 500px) {


    .main {

        border: 0;
        border-radius: 0;
        margin: 0;
        background-color: transparent;
        /* background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 19%, rgba(255, 255, 255, 0.15868354177608546) 28%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 69%, rgba(255, 255, 255, 0.18669474625787819) 79%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%);
        backdrop-filter: blur(25px); */
        padding-top: 5px;
        margin-bottom: 200px;
        min-width: unset;
    }


    .content {
        box-sizing: border-box;
        position: relative;
        background-color: var(--page-background);
        box-shadow: rgba(0, 0, 0, 0.418) 0px 2px 6px;
        /* padding: 25px; */
        margin: 25px 0 50px;
        overflow: hidden;
        text-wrap: break-word;
        min-width: none;
        /* color: #777777;
        flex: 1; */
    }

    form {
        position: relative;
        width: 100%;
    }

    .logo-wrapper {
        flex: 1;
        margin-bottom: 0px;
    }

    .logo-wrapper img {
        height: 64px;
    }

}

@supports (backdrop-filter: blur(25px)) {

    .main {
        background: rgb(255, 255, 255);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 19%, rgba(255, 255, 255, 0.15868354177608546) 28%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 69%, rgba(255, 255, 255, 0.18669474625787819) 79%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%);
        backdrop-filter: blur(25px);
    }
}