@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

@font-face {
    font-family: "Roxborough CF Bold";
    src: url(../fonts/FontsFree-Net-roxborough-cf-bold.ttf);
    font-family: "Radley Regular";
    src: url(../fonts/radley.regular.ttf);
    font-family: "HK Grotesk";
    src: url(../fonts/hk-grotesk.regular.ttf);

    font-display: swap;
}

/* html {
    scroll-behavior: smooth;
} */

a {
    color: black;
}

textarea {
    white-space: pre-wrap;
}

dialog {
    z-index: 9999;
}

.mobile-only {
    display: none;
}

.grid-container {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
        'header header header'
        'content content content'
        'content content content'
        'content content content'
        'footer footer footer'
    ;
}

.grid-start-container {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
        'header header header'
        'content content content'
        'wavy-container wavy-container wavy-container'
        'footer footer footer';
}

body {
    font-family: 'Source Sans Pro';
    background-color: whitesmoke;
    overflow-x: hidden;

    margin: 0rem;

    overflow-wrap: break-word;
}

header {
    grid-area: header;
    background-color: #0a0b19;

    /* font-size: clamp(1rem, 5vw, 2rem); */
    padding: 1rem;
}

#header-name {
    grid-area: header-name;
}


/* Handles different versions for mobile and desktop */
.desktop {
    display: block;
}

.mobile {
    display: none;
}

@media screen and (max-width: 50rem) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }
}

/* Sticky Class Designed to provide Sticky Property to the Navbar using JavaScript */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;

    box-sizing: border-box;

    z-index: 9999;
}

/* .nav-grid {
    display: grid;
    grid-template-columns: max-content auto auto;
    grid-template-areas: 'header-name nav log-in';

    align-items: center;
    column-gap: 2rem;
} */

nav {
    grid-area: nav;
}

.div-nav {
    font-size: clamp(1rem, 2vw, 1.5rem);
}

.log-in {
    grid-area: log-in;
    text-align: right;
}

aside {
    grid-area: aside;
    background-color: lightgrey;
    padding: 1rem;
}

.content {
    max-width: 100%;

    grid-area: content;
    background-color: whitesmoke;
    padding: 1rem;
}

.fill-screen {
    min-height: 92.5vh;
}


footer {
    grid-area: footer;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: #f8bc41;
}

.grid-gap-1rem {
    gap: 1rem;
}

.table-spacing-1rem {
    border-collapse: separate;
    border-spacing: 1rem;
}

.width-80 {
    width: 80%;
}

.width-90 {
    width: 90%;
}

.width-100 {
    width: 100%;
}

.start-page-container {
    grid-area: wavy-container;
    display: grid;

    max-width: 100%;
}

#gallery {
    max-width: 100%;
}

.wavy-item-container {
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-center {
    place-self: center;
}

.align-end {
    align-self: end;
}

.align-content-start {
    align-content: flex-start;
}

.wavy {
    /* Mask created with css-generators-com/wavy-shapes/ */
    /* background:
        linear-gradient(
            to right,
            #00f260,
            #0575e6
        ); */
    background: #0a0b19;
    --mask:
        radial-gradient(46.11px at 50% 63.75px, #000 99%, #0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
        radial-gradient(46.11px at 50% -38.75px, #0000 99%, #000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
        radial-gradient(46.11px at 50% calc(100% - 63.75px), #000 99%, #0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
        radial-gradient(46.11px at 50% calc(100% + 38.75px), #0000 99%, #000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);

}

.wavy-top {
    background: #0a0b19;
    --mask:
        radial-gradient(36.25px at 50% 51.25px, #000 99%, #0000 101%) calc(50% - 50px) 0/100px 100%,
        radial-gradient(36.25px at 50% -26.25px, #0000 99%, #000 101%) 50% 25px/100px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.wavy-bottom {
    background: #0a0b19;
    --mask:
        radial-gradient(36.25px at 50% calc(100% - 51.25px), #000 99%, #0000 101%) calc(50% - 50px) 0/100px 100%,
        radial-gradient(36.25px at 50% calc(100% + 26.25px), #0000 99%, #000 101%) 50% calc(100% - 25px)/100px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.diagonal {
    --skew-angle: -5deg;
    position: relative;
    isolation: isolate;
}

.diagonal::after {
    content: '';
    background-image:
        linear-gradient(45deg,
            #12c2e9,
            #c471ed,
            #f64f59);
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(var(--skew-angle));
}

.happy-divider {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(/bilder/legacy/happy.avif);
    background-position: bottom;
    background-size: cover;

    height: 80vh;
    /* opacity: 50%; */
}

.bg_kontakt {
    background-image: url(/bilder/legacy/teamet/anton_träd.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg_whitesmoke {
    background-color: whitesmoke;
}

.margin-2rem {
    margin: 2rem;
}

.margin-left-1rem {
    margin-left: 1rem;
}

.wrapper {
    max-width: 60rem;
    margin-inline: auto;
    padding-inline: 2rem;
}

.wrapper-small {
    max-width: 40rem;
    padding-inline: 2rem;
}

.wrap {
    max-width: 55rem;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.margin-1rem {
    margin: 1rem;
}

.margin-block-1rem {
    margin-block: 1rem;
}

.padding-1rem {
    padding: 1rem;
}

.padding-3rem {
    padding: 3rem;
}

.padding-bottom-2rem {
    padding-bottom: 2rem;
}

.padding-bottom-3rem {
    padding-bottom: 3rem;
}

.padding-top-1rem {
    padding-top: 1rem;
}

.padding-top-2rem {
    padding-top: 2rem;
}

.padding-top-4rem {
    padding-top: 4rem;
}

.padding-bottom-4rem {
    padding-bottom: 4rem;
}

.padding-bottom-5rem {
    padding-bottom: 5rem;
}

input {
    display: block;
    border: solid 1px gray;
    border-radius: 2px;
    font-size: larger;
    /* min-width: 10rem; */
    min-height: 2.8125rem;
    margin: 1rem;
    padding-left: 0.5rem;
}

input::placeholder {
    color: lightgray;
    font-weight: lighter;
}

input[type=checkbox] {
    aspect-ratio: 1/1;
    width: 1rem;
    min-height: auto;
}

.wrapper .form-group {
    width: 80%;
    margin-inline: auto;
}

.wrapper input {
    /* border: none; */
    border: 1px lightgray solid;


    width: 100%;
    margin-left: 1rem;
    padding-left: 0.5rem;
}

.wrapper input[type="checkbox"] {
    width: 2rem;
    margin-block: 0px;
    margin-inline: 1rem 1rem;
}

.wrapper select {
    margin: 1rem;

    display: block;
    font-size: larger;
    min-height: 2.8125rem;
}

.wrapper label {
    font-size: 1.4rem;
}

.wrapper .btn-primary4 {
    float: right;
    margin-block: 1rem;
    margin-left: auto;
}

.wrapper svg {
    width: clamp(8rem, 5vw, 10rem);
}

.wrapper textarea {
    width: 100%;
    margin-inline: auto;
    resize: none;
    margin-left: 1rem;

    border: none;
}

fieldset {
    border: #0a0b19 solid 2px;
    border-radius: 5px;
}

label {
    margin: 1rem;
}

.error {
    color: red;
}

.form-group {
    font-size: large;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.width-fit-content {
    width: fit-content;
}

.width-min-content {
    width: min-content;
}

.max-width-fit-content {
    max-width: fit-content;
}

.btn-nav {
    text-decoration: none;
    color: whitesmoke;

    outline: transparent;
}

.btn-primary {
    background-color: #0a0b19;
    color: whitesmoke;
    font-size: x-large;
    font-weight: lighter;
    padding: 0.625rem;
    border-radius: 1rem;
    border: 2px solid #0a0b19;
    margin: 1rem;

    outline: transparent;
    transition: 150ms ease-in-out;
}

.btn-primary:hover {
    background-color: white;
    color: #0a0b19;
}

.btn-keep {
    background-color: green;
    color: whitesmoke;
    font-size: x-large;
    font-weight: lighter;
    padding: 0.625rem;
    border: 1px solid black;
    border-radius: 2px;
    margin: 1rem;

    outline: transparent;
    width: max-content;

    transition: 150ms ease-in-out;
}

.btn-keep:hover {
    background-color: white;
    color: green;

    transition: ease 300ms;
}

.btn-remove {
    background-color: red;
    color: whitesmoke;
    font-size: x-large;
    font-weight: lighter;
    padding: 0.625rem;
    border: 1px solid black;
    border-radius: 2px;
    margin: 1rem;

    outline: transparent;

    width: max-content;

    transition: 150ms ease-in-out;
}

.btn-remove:hover {
    background-color: white;
    color: red;

    transition: ease 300ms;
}

.btn-remove:focus {
    background-color: white;
    color: red;

    transition: ease 300ms;
    border: 1px solid black;
}

.btn-primary2 {
    background-color: #0a0b19;
    color: white;

    font-size: xx-large;
    border: 2px solid #0a0b19;
    border-radius: 1rem;

    padding: 0.5rem;
    padding-inline: 1rem;
    margin-right: 1rem;

    outline: transparent;
    transition: 250ms ease-in-out;
}

.btn-primary2:hover {
    background-color: white;
    color: #0a0b19;

}

.btn-primary3 {
    background-color: white;
    color: #0a0b19;
    border: 2px solid #0a0b19;
    border-radius: 1rem;
    font-size: xx-large;

    padding-block: 0.5rem;
    padding-inline: 1rem;

    outline: transparent;
    transition: 250ms ease-in-out;
}

.btn-primary3-inverted {
    color: white;
    background-color: #0a0b19;
    border: 2px solid #0a0b19;
    border-radius: 1rem;
    font-size: xx-large;

    padding-block: 0.5rem;
    padding-inline: 1rem;

    outline: transparent;
    transition: 250ms ease-in-out;
}

.btn-primary3-inverted:hover {
    color: #0a0b19;
    background-color: white;
}

.btn-primary3:hover {
    background-color: #0a0b19;
    color: white;
}

.btn-primary4 {
    background-color: #0a0b19;
    color: white;
    border: 2px solid #0a0b19;
    border-radius: 8px;
    font-size: 2rem;
    padding: 1rem;

    cursor: pointer;
    outline: transparent;

    transition: 150ms cubic-bezier(0.215, 0.610, 0.355, 1)
}

.btn-primary4:hover {
    color: #0a0b19;
    background-color: white;
}

.btn-primary5 {
    position: absolute;
    bottom: 1rem;

    background-color: transparent;
    color: white;

    border: 1px solid transparent;
    border-radius: 5px;

    cursor: pointer;
    outline: transparent;

    font-size: 2rem;
    padding: 1rem;

    transition: 300ms ease;

    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;

}

.btn-primary5:hover {
    border: 1px solid white;
    background-color: rgba(48, 51, 63, 0.8);
    transform: translateY(5%);
}

.btn-primary5:hover .bi-arrow-down {
    transform: translateY(10%);
}




.btn-round {
    border-radius: 0.5rem;
    border: solid 2px white;

    padding-block: 0.5rem;
    padding-inline: 0.8rem;
    font-family: 'Lato';

    color: white;
    transition: ease-in-out 250ms;

    font-size: clamp(0.8rem, 5vw, 1.2rem);
    background-color: #0a0b19;
}

.btn-round:hover {
    background-color: #3c404e;
    /* color: #0a0b19; */
}



.btn-round-inverted {
    border-radius: 0.5rem;
    border: solid 2px white;

    padding-block: 0.5rem;
    padding-inline: 0.8rem;
    font-family: 'Lato';

    color: #0a0b19;
    transition: ease-in-out 250ms;

    font-size: clamp(0.8rem, 5vw, 1.2rem);
    background-color: white;
}

.btn-round-inverted:hover {
    background-color: #ebeaea;
    border-color: #ebeaea;
}




.btn-submit {
    background-color: #0a0b19;
    color: white;
    padding-block: 1rem;
    width: 90%;
    font-size: larger;
    border: 2px solid #0a0b19;
    border-radius: 0.5rem;
    margin-top: 1rem;
    transition: ease-in-out 150ms;
    cursor: pointer;
    margin-inline: auto;
}

.btn-submit:hover {
    background-color: white;
    color: #0a0b19;
}

.cv-remove-btn {
    float: right;
    margin-top: 1rem;
}

.btn-settings {
    background-color: white;
    color: #0a0b19;

    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 400;
    padding: 0.5rem;
    margin-block: 1rem;
    width: 90%;

    border: solid grey 2px;
    border-radius: 5px;

    aspect-ratio: 3;
    outline: transparent;

    transition: 150ms ease;
}

.btn-settings:hover {
    background-color: #0a0b19;
    color: white;
    transition: 300ms ease;
}

#current.btn-settings {
    background-color: #0a0b19;
    border-color: #0a0b19;
    color: white;
}

.btn-opening-admin {
    background-color: white;
    color: #0a0b19;
    transition: 300ms ease;

    border: 2px solid #0a0b19;
    border-radius: 5px;

    font-size: clamp(1rem, 5vw, 1.5rem);

    margin-top: 1rem;
    padding: 0.5rem;

    text-align: center;
    display: inline-block;
}

.btn-opening-admin:hover {
    background-color: #0a0b19;
    color: white;
}

.btn-opening-admin-remove {
    background-color: red;
    color: white;
    transition: 300ms ease;

    border: 2px solid red;
    border-radius: 5px;
    padding: 1rem;

    font-size: clamp(1rem, 5vw, 2rem);

    margin-top: 0px;
    margin-left: 1rem;
}

.btn-opening-admin-remove:hover {
    background-color: white;
    color: red;
}

.btn-confirm-remove {
    width: 100%;
    padding: 0.5rem;
    font-size: 1.5rem;

    background-color: red;
    color: white;

    border-radius: 5px;
    border: 2px solid red;
}

.btn-confirm-remove:hover {
    background-color: white;
    color: red;
}

.btn-opening-admin-edit {
    background-color: white;
    color: #0a0b19;
    transition: 300ms ease;

    border: 2px solid #0a0b19;
    border-radius: 5px;
    padding: 1rem;

    font-size: clamp(1rem, 5vw, 2rem);

    margin-top: 0px;
}

.btn-opening-admin-edit:hover {
    background-color: #0a0b19;
    color: white;
}

.no-button {
    background: transparent;
    border: none;
}

.understand-button {
    border: 1px solid black;
    border-radius: 5px;

    padding: 0.5rem;
    width: 100%;

    background-color: black;
    color: white;
    font-size: 1.1rem;
}

.understand-button:hover {
    background-color: white;
    color: black;
    transition: cubic-bezier(0, .79, .18, .93) 350ms;
}

.cookie-popup {
    border: solid 1px black;
    border-radius: 5px;

    padding: 1rem;
    max-width: 40rem;

    display: none;

    z-index: 9999;

    position: fixed;
    bottom: 1rem;
    right: 1rem;

    background-color: whitesmoke;
}

.info-popup {
    background-color: whitesmoke;
    text-align: center;
    font-size: clamp(0.5rem, 5vw, 1.5rem);

    padding: 1rem;

    z-index: 99999;
    position: fixed;
    display: none;

    min-width: 15rem;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    word-wrap: normal;
}

@media screen and (min-width: 35rem) {
    .btn-opening-admin-edit {
        position: absolute;
        right: 12rem;
    }

    .btn-opening-admin-remove {
        position: absolute;
        right: 2rem;
    }
}

#banner-remove-btn:hover {
    cursor: pointer;
}

.gold {
    color: #f8bc41;
}

.white {
    color: white;
}

.whitesmoke {
    color: whitesmoke;
}

.bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.h2 {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

.smallerh2 {
    font-size: clamp(0.8rem, 5vw, 2rem);
}

.biggerh1 {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
}

.biggesth1 {
    font-size: clamp(1.5rem, 5vw, 10rem);
}

.text-3rem {
    font-size: 3rem;
}

.large {
    font-size: large;
}

.larger {
    font-size: larger;
}

.x-large {
    font-size: x-large;
}

.xx-large {
    font-size: xx-large;
}

.small {
    font-size: small;
}

.padding {
    padding: 1rem;
}

.no-padding {
    padding: 0rem;
}

.no-margin {
    margin: 0rem;
}

.no-margin-block {
    margin-block: 0rem;
}

.no-margin-inline {
    margin-inline: 0rem;
}

.no-margin-bottom {
    margin-bottom: 0rem;
}

.no-margin-top {
    margin-top: 0;
}

.no-decoration {
    text-decoration: none;
}

.overflow-auto {
    overflow: auto;
}

.center-inline {
    display: inline;
    margin: auto;
}

.inline-button {
    display: inline;
}

.hidden {
    display: none;
}

.center-ads {
    width: 80%;
    min-height: fit-content;
    padding: 10%;
    border: solid #f8bc41 2px;
}

.slide {
    display: none;
}

.box-completed {
    width: 25%;
    aspect-ratio: 1;

    width: 14rem;
    height: 14rem;
    background-color: gainsboro;
    border-radius: 2.5%;
    margin: auto;

    position: relative;
    transition: 150ms ease-in-out;
}

.box-completed:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.box-completed:focus {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.box-completed h3 {
    border: 2px black solid;
    background-color: whitesmoke;

    border-radius: 5px;
    padding: 0.2rem;
    margin-inline: 1rem;
}

.completion-icon {
    margin-top: 1rem;
}

.box h3 {
    border: 2px black solid;
    background-color: whitesmoke;

    border-radius: 5px;
    padding: 0.2rem;
    margin-inline: 1rem;
}

#current {
    color: #f8bc41;
}

.completion-container {
    display: flex;
    gap: 1em;
    height: 17rem;
    text-align: center;
    overflow: auto;
}

.stats-container {
    display: flex;
    text-align: center;
    gap: clamp(1em, 5vw, 3em);
    overflow: auto;
}

.box {
    width: 25%;
    aspect-ratio: 1/1;

    width: 14rem;
    height: 14rem;
    background-color: white;
    border-radius: 2.5%;
    margin: auto;

    position: relative;
    transition: 150ms ease-in-out;
}

.box:hover {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.box:focus {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.box h2 {
    font-size: 1.8rem;
}

.box .biggerh1 {
    font-size: 3rem;
}

.banner {
    display: block;
    position: sticky;

    background-color: whitesmoke;
    padding: 0.5rem;

    font-size: 1.5rem;

    margin: 0.5rem;
}

#banner-remove-btn {
    position: absolute;
    background: transparent;
    border: none;

    text-align: center;
    padding: 0px;

    margin: auto;
    right: 1rem;
}

.red {
    color: red;
}

.orange {
    color: orange;
}

.green {
    color: green;
}

.light-green {
    color: #46e246;
}

.udf-blue {
    color: #0a0b19;
}

.black {
    color: black;
}

.bg_red {
    background-color: red;
}

.pay-pro {
    border: 0.15rem solid #00F3FF;
    border-radius: 0.2rem;
    padding: 0.2rem;
    width: max-content;
}

/* Styling for openings */
.opening-container {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-areas:
        'opening info';
    gap: 2rem;
    padding: 2rem;
}

.opening-list {
    grid-area: opening;
}

.opening-area {
    cursor: pointer;
}

.opening-area.opening.current {
    border-color: #0a0b19;
}

.opening-area.opening {
    border-color: gray;
}

.opening {
    padding: 1rem;
    border: 2px solid #0a0b19;
    border-radius: 0.5rem;

    height: fit-content;
    margin-top: 1rem;
    background-color: white;

    color: black;
}

.opening-title {
    display: block;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-family: 'Source Sans Pro';
}

.opening-comp {
    font-size: 1.2rem;
    font-family: 'Source Sans Pro';
    font-weight: bold;
}

.opening-info-container {
    grid-area: info;
}

.opening-info {
    display: none;
    position: sticky;

    top: 5rem;
    right: 1rem;
}

.opening-area:hover .opening-title {
    text-decoration: underline;
}

.opening-info-list {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 2rem;
    text-align: left;
}

.opening-info-title {
    font-size: 1.5rem;
    font-weight: 500;

    margin-left: none;
}

.opening-info-desc {
    margin-block: 1rem;
    margin-left: none;

    max-height: 40vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.opening-info-boxes {
    background-color: #0a0b19;
    color: white;
    border-radius: 5px;
    padding: 0.5rem;
}

.front-openings {
    margin: auto;
    /* max-width: 30rem; */
    text-align: center;

    max-width: min(30rem, 100%);
}

.opening-admin-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        'opening-admin-info opening-admin-button'
    ;
}

.opening-admin-info {
    grid-area: opening-admin-info;
}

.opening-admin-button {
    grid-area: opening-admin-button;
    place-self: center;
}

/* Styling for the opening editor */
.opening-editor-container {
    display: grid;
    grid-template-columns: auto;
}

.opening-editor-container input {
    border: none;
    background-color: whitesmoke;
}

.opening-editor-container textarea {
    background-color: whitesmoke;
    border: none;
    resize: none;
}

#input-form textarea {
    resize: none;
    width: 80%;
}

textarea {
    font-family: Arial, Helvetica, sans-serif;
}

.btn-apply {
    display: block;
    min-width: 90%;
    max-width: 90%;

    background-color: white;
    color: #0a0b19;

    font-size: clamp(1rem, 2vw, 2rem);
    border: 0.3rem solid #0a0b19;
    padding: 0.5rem;
    margin-inline: auto;
    border-radius: 0.2rem;
    font-family: 'Source Sans Pro';
    font-weight: 600;

    transition: ease-in-out 150ms;

    /* aspect-ratio: 10; */
}

.btn-apply:hover {
    background-color: #0a0b19;
    color: white;
}

.greyed {
    color: grey;
    background-color: white;
    border: 0.3rem solid grey;
}

.greyed:hover {
    background-color: lightgray;
    color: white;
}

.applied {
    display: block;
    width: 90%;
    background-color: #0a0b19;
    color: white;
    font-size: clamp(1rem, 5vw, 2rem);
    border: 0.3rem solid #0a0b19;
    padding: 0.5rem;
    margin-inline: auto;
    border-radius: 0.2rem;
    font-family: 'Source Sans Pro';
    font-weight: 600;

    transition: ease-in-out 150ms;

    /* aspect-ratio: 10; */
}

.applied:hover {
    background-color: white;
    color: #0a0b19;
}

.vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styles for the admin panel */
.admin-container {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-areas:
        'admin-sidebar-active admin-area'
        'admin-sidebar-completed admin-area'
    ;
}

.admin-sidebar-active {
    grid-area: admin-sidebar-active;

    background-color: white;
    border: solid 2px #f8bc41;
    border-radius: 5px;

    padding: 1rem;
    margin-block: 1rem;

    overflow: auto;
    height: fit-content;
}

.admin-sidebar-active h2 {
    margin-top: 0rem;
}

.admin-sidebar-completed {
    grid-area: admin-sidebar-completed;

    background-color: white;
    border: solid 2px #f8bc41;
    border-radius: 5px;

    padding: 1rem;
    margin-block: 1rem;

    overflow: auto;
    height: fit-content;
}

.admin-sidebar-completed h2 {
    margin-top: 0rem;
}

.admin-area {
    grid-area: admin-area;

    background-color: white;
    border: solid 2px #f8bc41;
    border-radius: 5px;

    padding: 1rem;
    margin: 1rem 0 1rem 1rem;

    height: min-content;
    position: relative;

    overflow: auto;
}

/* Styles for the settings page */
.settings-container {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-areas:
        'settings-sidebar settings-area';
}

.settings-sidebar {
    grid-area: settings-sidebar;
}

.settings-area {
    grid-area: settings-area;

    background-color: white;
    color: #20222f;
    border: solid 2px grey;
    border-radius: 5px;

    padding: 1rem;
    margin: 1rem 0rem;

    overflow: auto;
}

/* Styles for the myprofile page */
.my-profile-container {
    grid-area: profile;

    display: flex;
    justify-content: space-evenly;

    border: 0.25rem black solid;
    border-radius: 1rem;
    padding: 1rem;

    gap: 1rem;
}

.my-profile-container .profile-picture {
    max-width: 10rem;
}

.profile-picture-div {
    position: relative;

    display: flex;
    justify-content: center;

    margin: 0px;
}

.change-profile-picture-link {
    position: absolute;
    margin-top: 0rem;
    margin-left: 90%;
}

.change-profile-picture-link img {
    width: 2rem;
}

.margin-auto {
    margin: auto;
}

.my-candidate-container {
    margin: auto;

    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
        'profile'
        'cv'
        'decide'
    ;

    border: 0.25rem black solid;
    border-radius: 1rem;
    padding: 1rem;

    max-width: 50rem;
    gap: 1rem;

    background-color: white;
}

.my-candidate-container .my-profile-container {
    border: none;
}

.my-candidate-cv {
    grid-area: cv;
    padding: 1rem;
}

.my-candidate-decide {
    grid-area: decide;
}

/* Styles the footer */
.footer {
    padding-top: 1.5rem;
    color: white;
    background-color: #0a0b19;
}

.footer-text {
    display: flex;
    justify-content: space-evenly;
}

.footer-socials {
    width: 70%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
}

.footer-copyright {
    text-align: center;
    font-size: 1.2rem;
    padding-top: 2rem;
}

.footer-name {
    text-align: center;
    padding: 1.8rem;

    font-family: 'Roxborough CF Bold';
    font-size: 3rem;
}

.hero-div {
    width: 100%;
    /* height: fit-content; */
    padding: 0rem;
    border: none;
    min-height: 78vh;
    overflow: hidden;
    text-align: center;
    background-size: cover;
    background-position-x: center;
}

.radley {
    font-family: Radley;
}

.lato {
    font-family: 'Lato', sans-serif;
}

.source-sans-pro {
    font-family: 'Source Sans Pro';
}

/* Background image classes */
.background-stonks {
    background-image: url(/bilder/legacy/stonks.png);
    min-height: 92.5vh;
}

.background-anton-ch {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)),
        url(/bilder/legacy/teamet/anton_ch_träd.webp);
    background-position: center;
    min-height: 92.5vh;

    background-size: cover;
}

.background-people-gold {
    background-image: url(/bilder/legacy/peoplegold.webp);
}

.background-people-gold-dark {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)),
        url(/bilder/legacy/peoplegold.webp);


    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    background-color: #0a0b19;
}

.background-skyline-dark {
    background:
        linear-gradient(rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.2)),
        /* url(/bilder/legacy/skyline.webp); */
        url(/bilder/legacy/teamet/anton_och_ch_liten.webp);


    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    background-color: #0a0b19;
    height: 92.5vh;
}

.background-mall {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)),
        url(/bilder/legacy/mall.webp);


    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    background-color: #0a0b19;
}

.bg_kontakt {
    background-image: url(/bilder/legacy/teamet/anton_träd.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    width: 100%;
    height: 100%;
}

.backdrop {
    backdrop-filter: blur(0.05rem);

}

.background-dark {
    background-color: #0a0b19;
    color: white;
}


.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-place-center {
    place-items: center;
}

.hero-img {
    position: sticky;
    margin-top: 0rem;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

.hero-text {
    position: relative;
    z-index: 3;
    font-size: 5rem;
    font-family: 'Lato';
    font-weight: 200;
    margin-top: 20vh;
}

.hero-desc {
    color: white;
    font-weight: 500;

    font-size: clamp(1rem, 5vw, 1.5rem);
    padding: 0.5rem;

    z-index: 3;
}

#send-mail {
    display: block;
}

/* Darkens the whole screen */
.darken {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: transparent;
    background: hsl(0 0% 0% / 0.4);
    display: none;
}

/* Messages */
.message {
    z-index: 1000;
    position: fixed;
    bottom: 2rem;
    left: 2rem;

    padding: 0.5rem;
    background-color: white;
    border: solid 1px #f8bc41;
    border-radius: 0.5rem;

    font-size: xx-large;
}

.message::after {
    transition: ease 150ms;
}

/* loginform */
#login-form {
    z-index: 10000;
    width: 50%;
    position: fixed;
    display: none;
    top: 25%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em;
    border: #f8bc41 solid 1px;
    background-color: white;
}

#login-form input {
    width: 80%;
}

/* Register form */
#register-form {
    z-index: 10000;
    width: 50%;
    position: absolute;
    display: none;
    top: 10%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em;
    border: #f8bc41 solid 1px;
    background-color: white;
}

#register-form input {
    width: 80%;
}

.reg-btn-padding {
    padding-left: 2.5rem;
}

/* Openings form */
#input-form {
    z-index: 10000;
    width: 50%;
    position: absolute;
    display: none;
    top: 10%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em;
    border: #f8bc41 solid 1px;
    background-color: white;
}

#input-form input {
    width: 80%;
}

#cand-info {
    z-index: 10000;
    width: 50%;
    position: absolute;
    display: none;
    top: 10%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em;
    border: #f8bc41 solid 1px;
    background-color: white;
}

#invisible-div {
    background-color: transparent;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;

    display: none;
    position: absolute;
}

/* CSS animations here */
@keyframes shake {
    0% {
        transform: translate(0px);
    }

    50% {
        transform: translate(3px);
    }

    100% {
        transform: translate(-3px);
    }
}

@keyframes bounce {
    to {
        transform: translateY(15px);
    }
}

/* Animation specific classes */
.bounce {
    animation: bounce 1s ease-in-out infinite alternate;
}

/* Style for navbar */
.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;
}

.flex {
    display: flex;
    gap: var(--gap, 2rem);
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.primary-header {
    align-items: left;
    justify-content: space-between;
}

.mobile-nav-toggle {
    display: none;
}

.primary-navigation {
    list-style: none;
    padding: 0;
    margin: 0;
}

.primary-navigation a {
    text-decoration: none;
}

@media (max-width: 55rem) {
    .nav-grid {
        display: flex;
        justify-content: space-between;
        /* grid-template-columns: auto auto auto;
          grid-template-areas: 'nav header-name log-in'; */
    }

    .div-nav {
        font-size: 1.5rem;
    }

    #header-name {
        text-align: center;
    }

    .log-in {
        box-sizing: border-box;
        /* text-align: left; */
    }

    .primary-navigation {
        --gap: 3em;

        position: fixed;
        z-index: 1000;
        inset: 0 0 0 30%;

        flex-direction: column;
        padding: min(30vh, 5rem) 2rem;

        transform: translateX(100%);
        transition: transform 350ms ease-in;

        /* background: hsl(0 0% 0% / 0.75); */
        background-color: #0a0b19;
        backdrop-filter: blur(2rem);
    }

    @supports (backdrop-filter: blur(1rem)) {
        .primary-navigation {
            background: hsl(0 0% 0% / 0.1);
            backdrop-filter: blur(1rem);
            border-radius: 5px;
        }
    }

    .primary-navigation[data-visible="true"] {
        transform: translateX(0%)
    }

    .mobile-nav-toggle {
        display: block;
        position: relative;
        z-index: 9999;
        background-color: transparent;
        background-image: url("/bilder/legacy/icon-hamburger.svg");
        background-repeat: no-repeat;
        width: 2rem;
        border: 0;
        aspect-ratio: 1;
        margin-top: 1rem;

    }

    .mobile-nav-toggle[aria-expanded="true"] {
        background-image: url("/bilder/legacy/icon-close.svg");
    }
}

@media (min-width: 45rem) {
    .primary-navigation {
        --gap: clamp(0.5rem, 5vw, 2rem);
    }

    .btn-nav:hover {
        color: #f8bc41;
    }
}

/* För skärmar mindre än 53rem */
@media screen and (max-width: 53rem) {
    .mobile-only {
        display: block;
    }

    .cookie-popup {
        margin: auto;
        left: 1rem;
    }

    .two-column-grid {
        grid-template-columns: auto;
    }

    .grid-container {
        width: 100%;
        margin: auto;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas:
            'header header'
            'nav log-in'
            'content content'
            'footer footer'
        ;
    }

    .wavy-item-container {
        display: block;
    }

    .input {
        width: 80%;
    }

    #login-form {
        width: 80%;
    }

    #register-form {
        width: 80%;
    }

    .reg-btn-padding {
        padding-left: 0rem;
    }

    #input-form {
        width: 80%;
    }

    .wrapper label {
        margin-left: 0rem;
    }

    .wrapper select {
        width: 100%;
        margin-left: 0rem;
    }

    .wrapper input {
        margin-left: 0rem;
        padding-left: 0rem;
    }

    .wrapper .form-group {
        margin-left: 0rem;
        width: 100%;
    }

    .wrapper textarea {
        margin: 0rem;
        margin-inline: auto;
    }

    header {
        font-size: clamp(1.2rem, 5vw, 3rem);
    }

    .btn-mobile-hide {
        display: none;
    }

    .btn-primary5 {
        position: relative;
        margin-top: 10%;
        margin-bottom: 1rem;
    }

    .background-skyline-dark {
        height: fit-content;
    }

    /* Styling for the opening editor */
    .opening-editor-grid-container {
        display: grid;
        grid-template-columns: auto;
    }

    /* Styles for the settings page */
    .settings-container {
        grid-template-columns: 100%;
        grid-template-areas:
            'settings-sidebar'
            'settings-area';
    }

    /* .settings-sidebar {
        display: none;
    } */

    /* .settings-area {
        padding: 0;
        margin: 0;
    } */


    .admin-container {
        grid-template-columns: 100%;
        grid-template-areas:
            'admin-area'
            'admin-sidebar-active'
            'admin-sidebar-completed'
        ;
    }

    .admin-area {
        margin-inline: 0;
    }

    .my-profile-container {
        flex-wrap: wrap;
        flex-direction: column;

        align-items: center;
        text-align: center;
        border: none;
    }

    .btn-nav:hover {
        padding: none;
        color: #f8bc41;
        background-color: none;
        border: none;
        border-radius: none;
    }

    .btn-primary {
        font-size: clamp(1rem, 5vw, 2rem);
        width: max-content;
    }

    .btn-primary2 {
        font-size: clamp(1.2rem, 5vw, 2.5rem);
        padding: 0.5rem;
    }

    .btn-primary3 {
        font-size: clamp(1.2rem, 5vw, 2.5rem);
        padding: 0.5rem;

    }

    .btn-opening-admin {
        padding: 1rem;
        display: inline-block;
        text-align: center;
    }

    .btn-apply {
        /* margin-inline: auto; */
        /* min-width: 100%; */
        max-width: 100%;
    }

    .applied {
        min-height: 2rem;
        text-align: center;
    }

    .btn-settings {
        margin-inline: auto;
        width: 100%;
    }

    .opening-container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
            'opening';

        padding: 0.5rem;
    }

    .opening-info-container {
        display: none;
    }

    .opening-info-list {
        display: block;
    }

    .front-openings .opening-info-list {
        display: grid;
        box-sizing: border-box;
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
        gap: 2rem;
        text-align: left;
    }

    .hero-text {
        font-size: clamp(2rem, 5vw, 6rem);
        line-height: normal;
    }

    .stats-container {
        flex-direction: column;
        gap: clamp(1em, 5vw, 3em);
        overflow: auto;
    }

    .footer-text {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        gap: 1rem;

        flex-wrap: wrap;
        text-align: center;
    }

    .footer-socials {
        width: 90%;
    }

    .footer-name {
        font-size: clamp(1.5rem, 5vw, 3rem);
    }
}

@media screen and (max-width: 445px) {
    .opening ul {
        padding-left: 10px;
    }
}

@media screen and (max-width: 390px) {
    .opening-info-list {
        display: block !important;
    }

    .opening ul {
        padding-left: 40px;
    }
}