/*
    Locally stored roboto font family
*/
@font-face {
    font-family: 'RobotoFlex-Regular';
    src: url('/fonts/RobotoFlex-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    font-family: RobotoFlex-Regular, sans-serif;
    --var-nav-footer-height: 7rem;
    --clr-txt: #adadad;
    --clr-txt-bright: #ffffff;
    --clr-primary: #7FA3FF;
    --clr-secondary: rgba(127, 163, 255, 0.3);
    --clr-info-primary: #055160;
    --clr-info-secondary: #a3d5e0;
    --clr-info-bg: #cff4fc;
    --clr-danger-primary: #842029;
    --clr-danger-secondary: #e0b2b7;
    --clr-danger-bg: #f8d7da;
    --clr-danger-contrast: #dd0000;
    --clr-warning-primary: #664d03;
    --clr-warning-secondary: #e6d6a3;
    --clr-warning-bg: #fff3cd;
    --clr-warning-contrast: #d7d75b;
    --clr-success-primary: #0f5132;
    --clr-success-secondary: #aeccbe;
    --clr-success-bg: #d1e7dd;
    --clr-success-contrast: #009900;
    --clr-dark: rgb(63, 63, 63);
    --clr-darkest: #121212;
    --clr-ticket-bg: #323232;
    --clr-cookie: #d9833e;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: inherit;
}

*:not(input){
    user-select: none;
}

html,body {
    background: linear-gradient(45deg, #130732, #000000);
    color: var(--clr-txt);
    fill: var(--clr-txt);
    font-size: 12pt;
    scrollbar-color: var(--clr-primary) var(--clr-dark);
    min-height: 100%;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: inherit;
}

nav{
    min-height: 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

nav > div{
    display: flex;
    flex-grow: 1;
    flex-wrap: nowrap;
    align-items: center;
}

.burger-wrapper{
    width: 100%;
    padding-right: 1rem;
    display: none;
    justify-content: end;
}

.burger-wrapper > svg{
    aspect-ratio: 1/1;
    width: 2.25rem;
    cursor: pointer;
}

nav .nav-element{
    display: flex;
    max-height: 100%;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem;
    padding: 0.5rem;
    border-radius: 0.4rem;
    background-color: rgba(127, 163, 255, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: 250ms ease-in-out;
}

nav .nav-element:hover,
nav .nav-element:focus-within{
    cursor: pointer;
    color: var(--clr-txt-bright);
    fill: var(--clr-txt-bright);
    background-color: var(--clr-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: scale(1.05);
}

.nav-element > img{
    aspect-ratio: 1/1;
    height: 2.5rem;
}

.nav-element > svg{
    aspect-ratio: 1/1;
    height: 1.25rem;
    fill: inherit;
}

nav > ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: center;
    list-style: none;
    flex-grow: 1;
}

nav h2{
    max-width: 12rem;
    overflow: hidden;
}

footer{
    min-height: 3rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

footer > ol {
    display: flex;
    align-items: center;
    justify-content: start;
    list-style: none;
    flex-wrap: wrap;
    gap: 1rem;
}

footer > ol > li{
    margin: 0.25rem 0.5rem;
}

.footer-element{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: nowrap;
    transition: 200ms ease-in-out;
}

.footer-element:hover,
.footer-element:focus-within{
    transform: scale(1.1);
    color: var(--clr-primary);
    fill: var(--clr-primary);
}

.footer-element > svg{
    aspect-ratio: 1/1;
    width: 1rem;
}

button{
    border: 0;
    color: inherit;
    background-color: inherit;
    font-weight: inherit;
    font-size: inherit;
    cursor: pointer;
}

main {
    min-height: calc(100lvh - var(--var-nav-footer-height));
    padding: 0 5rem;
}

.height-main {
    min-height: calc(100lvh - var(--var-nav-footer-height));
}

.max-height-main{
    max-height: calc(100lvh - var(--var-nav-footer-height));
    overflow-y: scroll;
    overflow-x: hidden;
}

.underline {
    text-decoration: underline;
}

.flex{
    display: flex;
}

.inline-center {
    display: inline-flex;
    align-items: center;
}

.grow{
    flex-grow: 1;
}

.wrap{
    flex-wrap: wrap;
}

.gap07{
    gap: 0.7rem;
}

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

.min-w2{
    min-width: 2rem;
}

.min-w7{
    min-width: 8rem;
}

.min-w13{
    min-width: 13rem;
}

.min-w16{
    min-width: 16rem;
}

.min-h1{
    min-height: 1.7rem;
}

.min-icon{
    min-width: calc(1.3rem * 2.0);
    display: flex;
    align-items: center;
}

.h-center{
    justify-content: center;
}

.v-center{
    align-items: center;
}

.outline{
    outline: 1px dashed orange !important;
    background-color: red !important;
}

.outline-dotted{
    outline: 0.13rem dotted var(--clr-dark);
}

section{
    padding: 0.5rem;
}

.icon-xxs{
     aspect-ratio: 1/1;
     width: 0.7rem;
     min-width: 0.7rem;
}

.icon-xs{
    aspect-ratio: 1/1;
    width: 1rem;
    min-width: 1rem;
}

.icon-sm, .icon-md, .icon-lg, .icon-vlg, .icon-xl{
    aspect-ratio: 1/1;
    margin: 0.25rem;
}

.icon-sm{
    width: 1.5rem;
    min-width: 1.5rem;
}

.icon-md {
    width: 3rem;
    min-width: 3rem;
}

.icon-lg{
    width: 5rem;
    min-width: 5rem;
}

.icon-vlg{
    width: 9rem;
    min-width: 9rem;
}

.icon-xl{
    width: 12rem;
    min-width: 12rem;
}

.icon-overlay > .icon-md{
    position: relative;
    left: 1rem;
    top: 0rem;
}

.icon-overlay > .icon-sm{
    position: relative;
    top: 1rem;
    left: -0.5rem;
    z-index:100;
}

.icon-highlight {
    fill: var(--clr-warning-primary) !important;
    animation: highlight-scale 1s infinite;
}

@keyframes highlight-scale {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.9);
    }
}

.container{
    border-radius: 0.7rem;
    outline: 0.13rem solid var(--clr-dark);
    padding: 0.5rem;
    margin: 0.5rem;
    display: flex;
    align-items: center;
    width: fit-content;
}

.container > svg{
    aspect-ratio: 1/1;
    width: 2rem;
    margin: 0.25rem;
    margin-right: 1rem;
}

.container-outline{
    border-radius: 0.7rem;
    padding: 0.7rem;
    outline: 0.13rem solid var(--clr-dark);
    width: fit-content;
}

.container-bg{
    background-color: var(--clr-darkest);
}

.container-sm {
    border-radius: calc(3 * 0.13rem);
    outline: 0.13rem solid var(--clr-dark);
    padding: calc(1.5 * 0.13rem);
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 0.7rem;
}

.txt-center{
    text-align: center;
}

.txt-justify{
    text-align: justify;
}

.txt-sm{
    font-size: 0.8rem;
}

.txt-lg{
    font-size: 2rem;
}

.txt-xl{
    font-size: 4rem;
}

.horizontal-scroll-container {
    display: flex;
    width: fit-content;
    max-width: 100%;
    position: relative;
    overflow-x: scroll;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    box-sizing: border-box;
    gap: 0.25rem;
    mask: linear-gradient(90deg, #0000, #000 2% 98%, #0000);
    -webkit-mask: linear-gradient(90deg, #0000, #000 2% 98%, #0000);
}

.status-message {
    opacity: 0;
    width: fit-content;
    max-width: 50%;
    position: absolute;
    top: 5rem;
    left: 50%;
    z-index: 10000;
    font-size: 1.25rem;
    user-select: text;
    transform: translateX(-50%);
    animation: status-msg-ani 8s ease-in-out forwards;
}

.content-center-grow {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 8.5rem;
}

.content-center-left{
    width: 13rem;
}

.content-center-right{
    width: calc(100% - 13rem);
}

.content-center-grow > div {
    padding: 0.5rem;
}

.center-col{
    margin: 0 auto;
    padding: 1rem;
    width: 100%;
    max-width: 50rem;
}

.greetings-wrapper{
    font-size: 1.5rem;
    padding: 2rem;
    text-align: center;
    animation: move-in-ani 2s forwards;
}

.mobile-only, 
.mobile-vert-only {
    display: none;
}

.mobile-force-wrap{
    display: flex;
    align-items: center;
}

.mar-tb05{
    margin: 0.5rem 0rem;
}

.mar-h1{
    margin: auto 1rem;
}

.mar-0a{
    margin: 0 auto;
}

.padd-025{
    padding: calc(2 * 0.13rem);
}

.padd-05tb {
    padding-top: calc(3 * 0.13rem);
    padding-bottom: calc(3 * 0.13rem);
}

.padd-tb01{
    padding-top: 0.13rem;
    padding-bottom: 0.13rem;
}

.padd-tb1{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.padd-h01 {
    padding-left: calc(2 * 0.13rem);
    padding-right: calc(2 * 0.13rem);
}

.padd-h4{
    padding-left: 4rem;
    padding-right: 4rem;
}

.padd{
    padding: 0.7rem;
}

.padd-desktop{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.change-password-container{
    display: flex;
    justify-content: center;
}

.console{
    font-family: monospace;
}

.h100{
    height: 100%;
}

.w100{
    width: 100%;
}

.w50{
    width: 50%;
    min-width: fit-content;
}

.w42{
    width: 42%;
    min-width: fit-content;
}

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

.annotation{
    font-size: 10pt;
    fill: var(--clr-dark);
    color: var(--clr-txt);
    gap: 0.7rem;
}

@keyframes move-in-ani{
    0% {
        opacity: 0;
        transform: translateY(-25%);
    }

   100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes status-msg-ani {
    0% {
        opacity: 0;
        transform: translate(-50%, -25%);
    }

    5% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    15% {
        opacity: 1;
    }

    95% {
        opacity: 0.65;
        transform: translate(-50%, 0);
    }

    100% {
        transform: translate(-50%, 25%);
        opacity: 0;
        display: none;
    }
}

summary{
    display: flex;
    align-items: center;
    list-style: none;
}

details > summary > svg{
    transition: 200ms ease-in-out;
    cursor:pointer;
}

details > summary > svg:hover {
    fill: var(--clr-primary);
}

details[open] > summary > svg {
    transform: rotate(90deg);
}

.fadeout {
    animation: fadeout 500ms ease-in-out forwards;
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadein{
    opacity: 0;
    animation: fadein 500ms forwards ease-in-out;
}

@keyframes fadein {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.ani-delay-6{
    animation-delay: 6s;
}

.rel{
    position: relative;
}

.break-any{
    white-space: break-spaces;
    line-break: anywhere;
}

/*
    WELCOME PAGE ANIMATIONS
*/

.fadein-moveup{
    opacity: 0;
    animation: fade-move-up 3s 1s forwards;
}

@keyframes fade-move-up{
    0%{
        transform: scale(1.5);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: scale(1.5);
    }
    60% {
        opacity: 1;
        transform:  scale(1.5);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

.enlarge-text{
    width: 0;
    word-wrap: anywhere;
    word-break: break-all;
    overflow: hidden;
    height: 2.5rem;
    text-align: center;
    animation: 2s 4s enlarge-text forwards linear;
}

@keyframes enlarge-text{
    0%{
        width: 0;

    }
    100%{
        width: 100%;
    }
}

.enlarge-bar{
    width: 0;
    opacity: 0;
    animation: enlarge-bar 1s 6s forwards linear;
}

@keyframes enlarge-bar{
    0%{
        width: 0;
        opacity: 0;
    }
    100%{
        width: 100%;
        opacity: 1;
    }
}

.allow-select{
    user-select: text;
}

.blur {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.b-rad {
    border-radius: 0.7rem;
    overflow: hidden;
}


.test {
    background-image: linear-gradient(rgba(13, 13, 13, 0.7), rgba(13, 13, 13, 0.7)), url('/img/xmas.jpg');
}

.bg-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.h-smooth {
    mask-image: linear-gradient(90deg, #0000, #000 10% 90%, #0000);
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 10% 90%, #0000);
}

/*
    PAGE NAVIGATION
*/

/* TO BE MOVED HERE ! */

/*
    SUB PAGE SIDE NAVIGATION
*/

.sub-nav{
    list-style: none;
}

.sub-nav .sub-nav-element{
    display: flex;
    align-items: center;
    padding: 0.5rem;
    padding-right: 1rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    transition: 200ms ease-in-out;
}

.sub-nav-element:hover {
    cursor: pointer;
    color: var(--clr-txt-bright);
    fill: var(--clr-txt-bright);
    background-color: var(--clr-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sub-nav .sub-nav-element > svg{
    margin-right: 0.5rem;
}

.sub-nav .sub-nav-element.active{
    background-color: var(--clr-primary);
    color: var(--clr-darkest);
    fill: var(--clr-darkest);
}

.sub-nav-arrow-back{
    margin-right: 1rem;
    transition: 200ms ease-in-out;
}

.sub-nav-arrow-back:hover,
.sub-nav-arrow-back:focus-within{
    transform: scale(1.2);
}

/*
    ELEMENT COLORING
*/

.warning{
    color: var(--clr-warning-primary);
    fill: var(--clr-warning-primary);
    background-color: var(--clr-warning-bg);
    outline-color: var(--clr-warning-secondary);
}

.clr-warning{
    color: var(--clr-warning-primary);
    fill: var(--clr-warning-primary);
}

.info {
    color: var(--clr-info-primary);
    fill: var(--clr-info-primary);
    background-color: var(--clr-info-bg);
    outline-color: var(--clr-info-secondary);
}

.clr-info {
    color: var(--clr-info-primary);
    fill: var(--clr-info-primary);
}

.success {
    color: var(--clr-success-primary);
    fill: var(--clr-success-primary);
    background-color: var(--clr-success-bg);
    outline-color: var(--clr-success-secondary);
}

.clr-success {
    color: var(--clr-success-primary);
    fill: var(--clr-success-primary);
}

.danger {
    color: var(--clr-danger-primary);
    fill: var(--clr-danger-primary);
    background-color: var(--clr-danger-bg);
    outline-color: var(--clr-danger-secondary);
}

.clr-danger {
    color: var(--clr-danger-primary);
    fill: var(--clr-danger-primary);
}

.disabled {
    color: var(--clr-dark);
    fill: var(--clr-dark);
    background-color: transparent;
    outline-color: var(--clr-dark);
    cursor: not-allowed;
}

.clr-disabled {
    color: var(--clr-dark);
    fill: var(--clr-dark);
}

.primary {
    color: var(--clr-primary);
    fill: var(--clr-primary);
    background-color: transparent;
    outline-color: var(--clr-primary);
}

.clr-primary {
    color: var(--clr-primary);
    fill: var(--clr-primary);
}

.clr-danger-contrast {
    color: var(--clr-danger-contrast);
    fill: var(--clr-danger-contrast);
}

.clr-warning-contrast {
    color: var(--clr-warning-contrast);
    fill: var(--clr-warning-contrast);
}

.clr-success-contrast {
    color: var(--clr-success-contrast);
    fill: var(--clr-success-contrast);
}

.flash-danger{
    animation: flash-danger 1s linear forwards !important;
}

@keyframes flash-danger {
    0%{
        color: var(--clr-danger-contrast);
    }
    100%{
        color: inherit;
    }
}

.clr-cookie{
    color: var(--clr-cookie);
    fill: var(--clr-cookie);
}

/*
    SECTION BRACKETS
*/

.brackets {
    border-left: 0.2rem solid transparent;
    border-right: 0.2rem solid transparent;
    border-radius: 0.5rem;
    transition: 200ms ease-in-out;
}

.brackets:hover{
    border-left: 0.2rem solid var(--clr-dark);
    border-right: 0.2rem solid var(--clr-dark);
    border-radius: 0.5rem;
    background-color: rgba(127, 163, 255, 0.025);
}

/*
    EVENT TICKETS
*/

.ticket {
    height: 16rem;
    display: flex;
    flex-wrap: nowrap;
    border-radius: 0.5rem;
    margin-right: 0.5rem;
    transition: 200ms ease-in-out;
}

.ticket:hover,
.ticket:focus-within{
    transform: scale(1.025);
}

.ticket-left {
    border-radius: 0.75rem;
    overflow: hidden;
    border-top: 0.15rem solid var(--clr-dark);
    border-left: 0.15rem solid var(--clr-dark);
    border-bottom: 0.15rem solid var(--clr-dark);
    border-right: 0.5rem dotted black;
    background-color: var(--clr-ticket-bg);
    width: 32rem;
}
/*
.profile-element .ticket-left {
    width: 11rem;
}
*/
.ticket-left img,
.ticket-replace-img{
    aspect-ratio: 2/3;
    max-height: 16rem;
    display: block;
}

.ticket-replace-img {
    height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-replace-img > svg{
    width: 8rem;
    aspect-ratio: 1/1;
    fill: var(--clr-primary);
}

.ticket-right {
    min-width: 10rem;
    border-radius: 0.75rem;
    border-top: 0.15rem solid var(--clr-dark);
    border-right: 0.15rem solid var(--clr-dark);
    border-bottom: 0.15rem solid var(--clr-dark);
    background-color: var(--clr-ticket-bg);
    overflow: hidden;
}

.ticket-top {
    padding: 0.5rem;
    color: var(--clr-txt-bright);
    line-height: 2.2rem;
    overflow: hidden;
    line-height: 1.25rem;
    line-break: auto;
    height: 4rem;
    max-height: 4rem;
    min-height: 4rem;
    display: flex;
    align-items: center;
}

.ticket-top:not(.ticket-active){
    background-color: var(--clr-primary);
}

.ticket-active{
    background-color: var(--clr-warning-secondary);
    color: var(--clr-dark);
}

.ticket-timer{
    font-family: monospace;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
}

.ticket-split{
    width: 70%;
    margin: 0 auto;
}

.ticket-split-sm{
    width: 40%;
    margin: 0.25rem auto;
}

.ticket-date{
    text-align: center;
    padding: 0.25rem;
}

.ticket-time{
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-width: 5rem;
    text-align: center;
}

.ticket-time:not(.ticket-time-active){
    outline: 0.13rem solid var(--clr-primary);
}

.ticket-time-active{
    outline: 0.13rem solid var(--clr-warning-secondary);
}

.ticket-time > hr{
    margin: 0.5rem auto;
}

.ticket-btn-wrapper{
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ticket-info-down{
    position: absolute;
    transform: translate(-3rem, 2rem);
    overflow: hidden;
    height: 0;
    width: 16rem;
    opacity: 0;
    transition: 200ms ease-in-out;
}

.ticket-info-trigger:hover .ticket-info-down,
.ticket-info-trigger:focus-within .ticket-info-down{
    height: 4rem;
    opacity: 1;
    transform: translate(-3rem, 4rem);
}

.ticket-info-up {
    position: absolute;
    transform: translate(-3rem, -1rem);
    overflow: hidden;
    height: 0;
    width: 16rem;
    opacity: 0;
    transition: 200ms ease-in-out;
}

.ticket-info-trigger:hover .ticket-info-up,
.ticket-info-trigger:focus-within .ticket-info-up {
    height: 4rem;
    opacity: 1;
    transform: translate(-3rem, -4rem);
}

.ticket-detail{
    padding: 0.5rem 0.25rem;
}

.ticket-detail > span{
    font-size: 0.75rem;
}

.ticket-tags{
    padding: 0.25rem;
    max-height: 3rem;
    overflow: hidden;
}

.ticket-actors{
    font-size: 0.75rem;
    max-height: 9.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.ticket-actors > p {
    padding: 0.2rem;
}

.ticket-replace-content{
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.profile-element{
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
    outline: 0.15rem solid var(--clr-dark);
    border-radius: 0.5rem;
}
/*
.profile-element .ticket-content {
    display: none;
}
    */

/*
    BUTTON DESIGN
*/

.btn {
    border-radius: 0.25rem;
    outline-width: 0.15rem;
    outline-style: solid;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-wrap: nowrap;
    transition: 200ms ease-in-out;
}

.btn-sm{
    outline-width: 0.13rem;
    outline-color: inherit;
    outline-style: solid;
    padding: calc(2 * 0.13rem);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-wrap: nowrap;
    gap: calc(3 * 0.13rem);
    transition: 200ms ease-in-out;
}

.btn-sm:not(.input-inline){
    border-radius: 0.13rem;
}

.btn > *{
    margin: 0.5rem 0.5rem;
}

.btn:hover:not(.disabled),
.btn-sm:hover:not(.disabled){
    background-color: var(--clr-secondary);
    color: var(--clr-txt-bright);
    fill: var(--clr-txt-bright);
    outline-color: var(--clr-secondary);
} 

.btn > svg:not(.icon-xs, .icon-sm, .icon-md, .icon-lg, .icon-xl){
    aspect-ratio: 1/1;
    height: 1.5rem;
    margin: 0.25rem;
} 

.btn-primary{
    background-color: var(--clr-primary);
    color: var(--clr-darkest);
    fill: var(--clr-darkest);
} 

.btn-mar{
    margin: 1rem;
}

/*
    INPUT DESIGN
*/

input, select{
    padding-left: 0.25rem;
    padding-right: 0.25rem;
} 

.input-inline-container{
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    outline: 0.2rem solid transparent;
    transition: 200ms ease-in-out;
    color: var(--clr-txt);
    fill: var(--clr-dark);
} 

.input-inline-container:hover, 
.input-inline-container:focus-within{
    outline: 0.2rem solid var(--clr-primary);
    color: var(--clr-txt-bright);
} 

.input-inline{
    margin: 0;
    border: 0;
    border-top: 0.1rem solid var(--clr-dark);
    border-bottom: 0.1rem solid var(--clr-dark);
    background-color: var(--clr-darkest);
    color: inherit;
    font-size: 1rem;
    line-height: 1.25rem;
    height: 2rem;
    fill: inherit;
} 

.input-inline-left{
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    border-left: 0.1rem solid var(--clr-dark);
} 

.input-inline-right{
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-right: 0.1rem solid var(--clr-dark);
} 

.input-inline-num{
    width: 5rem;
} 

label.input-inline svg{
    aspect-ratio: 1/1;
    width: 1.5rem;
    margin: 0 0.5rem;
    fill: inherit;
    cursor: pointer;
} 

svg.input-inline{
    aspect-ratio: 1/1;
    width: 2.6rem;
    fill: inherit;
} 

button.input-inline{
    display: flex;
    align-items: center;
    padding: 0.5rem;
    transition: inherit;
} 

button.input-inline > svg{
    aspect-ratio: 1/1;
    width: 1.5rem;
    transition: inherit;
} 

svg.input-inline:hover, 
button.input-inline:hover > svg{
    transition: inherit;
    fill: var(--clr-primary);
} 

input:focus{
    outline: 0;
} 

.input-minw{
    min-width: 10rem;
} 

.input-minw20{
    min-width: 20rem;
} 

label, select{
    cursor: pointer;
}

/*
    NOTIFICATION CONTAINER DESIGN
*/

.notification{
    min-width: 42%;
    display: flex;
    justify-content: center;
    opacity: 0;
    outline-width: 0.1rem;
    animation: notify-fade 300ms 1s linear forwards;
} 

.notify {
    opacity: 0;
    animation: notify-fade 400ms 1307ms linear forwards;
} 

@keyframes notify-fade{
    0%{
        opacity: 0;
        transform: scale(0.8);
    }
    70%{
        opacity: 1;
        transform: scale(1.1);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
} 

.continous-scale-ani {
    animation: continous-scale 1307ms infinite;
} 

@keyframes continous-scale {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.1);
    }

    40% {
        transform: scale(1);
    }
}

/*
    EVENT INVITATION PAGE
*/

.invitation{
    font-size: 2rem;
} 

.invitation h1{
    color: var(--clr-primary);
} 

.invitation h5 span{
    padding: 1rem;
} 

.scale-in-ani {
    animation: scale-in 500ms forwards;
} 

@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    75% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
} 

.invitation .btn svg{
    height: 2rem;
}

/*
    MOVIE CARD DESIGN
*/

.card-lg{
    outline: 0.13rem dotted var(--clr-dark);
    border-radius: 0.7rem;
    overflow: hidden;
    aspect-ratio: 2/3;
    height: 16rem;
    margin: 0 2rem;
    transition: 500ms ease-in-out;
} 

.card-lg > img,
.card-lg > div{
    width: 100%;
    height: 100%;
    display: flex;
}

.movie-selected{
    transform: translate(-1rem, -1rem) scale(1.05);
    box-shadow: 10px 10px #000;
    outline: 0.13rem solid var(--clr-darkest);
}

.card{
    outline: 0.1rem solid var(--clr-dark);
    border-radius: 0.5rem;
    overflow: hidden;
    height: 15rem;
    min-width: 10rem;
    width: 10rem;
} 

.card-new {
    position: absolute;
    padding: 0.25rem;
    color: var(--clr-primary);
    background-color: var(--clr-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    animation: fade 5s infinite forwards;
} 

@keyframes fade{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
} 

.card-img{
    aspect-ratio: 2/3;
    width: 10rem;
    height: 15rem;
} 

.card-img > img{
    width: 100%;
    height: max-content;
    display: block;
    aspect-ratio: 2/3;
} 

.card-details-container{
    display: flex;
    overflow: hidden;
} 

.card-details{
    width: 0;
    display: flex;
    opacity: 0;
    padding: 0 0.25rem;
} 

.card-title{
    opacity: 0;
    height: 0;
    width: 0;
    padding: 0.5rem;
    text-align: center;
    overflow: hidden;
    display: flex;
    justify-content:center;
    align-items: center;
    background-color: transparent;
} 

.card:hover, 
.card:focus-within{
    width: 20rem;
    min-width: 20rem;
} 

.card:hover .card-details, 
.card:focus-within .card-details{
    width: 12rem;
    opacity: 1;
} 

.card:hover .card-img, 
.card:focus-within .card-img {
    width: 8rem;
    aspect-ratio: 2/3;
    height: 12rem;
} 

.card:hover .card-title, 
.card:focus-within .card-title {
    height: 3rem;
    width: 20rem;
    opacity: 1;
    background-color: var(--clr-primary);
    color: var(--clr-darkest);
} 

.card-details{
    height: 12rem;
} 

.card-details > div{
    width: 50%;
    padding: 0.15rem;
    text-align: left;
} 

.card-details > div > div {
    padding: 0.15rem 0;
} 

.card-sub{
    opacity: 0.7;
    font-size: 0.6rem;
} 

.card-dimension {
} 

.card-dimension2 {
    color: var(--clr-primary);
} 

.card-dimension3 {
    color: var(--clr-danger-primary);
    text-shadow: 0.25rem 0.25rem rgb(44, 44, 44);
} 

.card-link{
    border-radius: 0.3rem;
    padding: 0.13rem;
    display: flex;
    align-items: center;
    outline: 0.12rem solid transparent;
    gap: 0.13rem;
} 

.card-link svg{
    aspect-ratio: 1/1;
    width: 0.7rem;
} 

.card-link:hover, 
.card-link:focus-within {
    outline-color: var(--clr-primary);
    color: var(--clr-primary);
    fill: var(--clr-primary);
} 

.card-actors > div{
    font-size: 0.7rem;
    line-height: 0.7rem;
    padding: 0.15rem 0;
}

/*
    FOCUS DIALOG DESIGN
*/

.focus-dialog{
    max-width: 32rem;
    border-radius: 0.5rem;
    outline: 0.15rem solid var(--clr-dark);
    overflow: hidden;
    height: fit-content;
} 

.focus-dialog-info, 
.focus-dialog-info-sm{
    border-radius: 0.5rem;
    outline: 0.15rem solid inherit;
    height: 0;
    opacity: 0;
    padding: 0;
    font-size: 0.85rem;
    margin: 0 auto;
    transition: 250ms ease-in-out;
    width: 0;
    visibility: hidden;
} 

.focus-dialog section{
    margin-bottom: 0.25rem;
} 
.focus-dialog section:first-child{
    margin-top: 0.25rem;
}

.focus-dialog section:focus .focus-dialog-info, 
.focus-dialog section:focus-within .focus-dialog-info { 
    padding: 0.5rem 1.25rem;
    opacity: 1;
    height: 6.5rem;
    margin: 0.5rem auto;
    width: 100%;
    visibility: visible;
} 

.focus-dialog section:focus .focus-dialog-info-sm, 
.focus-dialog section:focus-within .focus-dialog-info-sm {
    padding: 0.5rem 1.25rem;
    opacity: 1;
    height: 3rem;
    margin: 0.5rem auto;
    width: 100%;
    visibility: visible;
} 

.focus-dialog h1{
    width: 100%;
    text-align: center;
} 

.focus-dialog-content{
    padding: 0 2rem;
} 

.validated {
    fill: var(--clr-success-primary) !important;
    border-color: var(--clr-success-primary) !important;
    background-color: var(--clr-success-bg) !important;
    color: var(--clr-success-primary) !important;
} 

.invalid {
    fill: var(--clr-danger-primary) !important;
    border-color: var(--clr-danger-primary) !important;
    background-color: var(--clr-danger-bg) !important;
    color: var(--clr-danger-primary) !important;
}

/*
    SETTINGS CONTAINER AND ELEMENT DESIGN
*/

.settings-container{
    border-radius: 0.7rem;
    outline: 0.13rem solid var(--clr-dark);
    padding: 0.7rem;
    margin: 0.13rem 0;
    overflow: hidden;
} 

.settings-container hr{
    color: var(--clr-dark);
    margin: 0.7rem 0;
} 

.settings-element{
    border-radius: 0.7rem;
    overflow: hidden;
    padding: calc(0.5* 0.7rem);
    transition: 200ms ease-in-out;
} 

.settings-element:hover, 
.settings-element:focus-within {
    background-color: rgba(63, 63, 63, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.settings-element summary{
    gap: 0.7rem;
}

.thumbnail-small{
    aspect-ratio: 2/3;
    height:fit-content;
    width: 6rem;
    min-width: 6rem;
    border-radius: 0.13rem;
    overflow: hidden;
} 

.thumbnail-small > img{
    width: 100%;
    height: 100%;
}

/*
    TABLE DESIGN
*/

.grid-container-5 {
    display: grid;
    grid-template-columns: 2fr 2fr 0.5fr 1fr 0.5fr;
    grid-auto-rows: auto;
    gap: 0.13rem;
}

.grid-container-5 hr{
    grid-column: span 5;
}

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

/*
    COOKIE BANNER
*/

.cookie-wrapper {
    box-sizing: border-box;
    width: 100lvw;
    height: 100lvh;
    backdrop-filter: blur(8px);
    left: 0;
    top: 0;
    position: fixed;
    z-index: 7000;
}

.cookie-banner {
    position: fixed;
    max-height: 80vh;
    overflow-y: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 7001;
    width: 40rem;
    outline: 0.13rem solid var(--clr-dark);
    border-radius: 0.7rem;
    background-color: var(--clr-darkest);
    font-size:0.8rem;
}

.cookie-banner ul,
ul.no-style{
    list-style: none;
}

.upper-bar {
    height: 4rem;
    width: 100%;
    background-color: var(--clr-primary);
}

.cookie-design-title {
    width: 100%;
    height: 3.17rem;
}

.cookie-design-title > svg {
    width: calc(1.5 * 3.14rem);
    height: calc(1.5 * 3.14rem);
    fill: var(--clr-cookie);
    margin: 0 auto;
    transform: translateY(-50%);
}

.cookie-padd {
    padding: 0.7rem;
}

.cookie-title {
    padding: 1rem;
    padding-top: 0;
    color: var(--clr-txt-bright);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.cookie-fadeout {
    animation: cookie-fadeout-ani 750ms ease-in-out forwards;
}

.cookie-flyout {
    animation: cookie-flyout-ani 750ms ease-in-out forwards;
}

.cookie-scalein {
    animation: cookie-scalein-ani 500ms ease-in-out forwards !important;
}

@keyframes cookie-scalein-ani {
    0% {
        transform: translate(-50%,-20%);
        opacity: 0;
    }

    80% {
        transform: translate(-50%,-55%);
        opacity: 1;
    }

    100% {
        transform: translate(-50%,-50%);
        opacity: 1;
    }
}

@keyframes cookie-fadeout-ani {
    0% {
        opacity: 1;
        backdrop-filter: blur(8px);
        display: block;
    }

    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
        display: none;
    }
}

@keyframes cookie-flyout-ani {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    30% {
        transform: translate(-50%, -20%);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -80%);
        opacity: 0;
    }
}

@media (width < 64rem) {
    .cookie-banner {
        max-width: 60%;
        width: 60%;
    }
}

@media (width < 42rem) {
    .cookie-banner {
        max-width: 90%;
        width: 90%;
    }
}

/*
    RESPONSIVE BEHAVIOUR FOR TABLET AND MOBILE
*/

@media(width < 1307px){
    .content-center-grow {
        padding: 0 2rem;
    }
} 

@media(width < 960px){
    .change-password-container{
        display: block;
    }

    .change-password-container > div{
        display: flex;
        justify-content: center;
    }

    .change-password-container #password-change-arrow{
        transform: rotate(90deg);
    }
} 

@media(width < 900px){
    main{
        padding: 0;
    }

    nav > div{
        display: flex;
        flex-wrap: nowrap;
        align-items: start;
        max-height: 3rem;
    }

    .burger-wrapper{
        display: flex;
        padding: 0.5rem;
        justify-content: center;
        width: 3rem;
        aspect-ratio: 1/1;
    }

    .burger-wrapper > svg{
        position: absolute;
        transition: 200ms ease-in-out;
    }

    .burger-wrapper > svg.expand{
        opacity: 0;
    }

    .burger-padding{
        width: 3rem;
        aspect-ratio: 1/1;
        display: block;
    }

    .nav-icon-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.8rem;
        flex-grow: 1;
        max-width: calc(100% - 6rem);
        overflow: hidden;
    }

    .nav-icon-wrapper .nav-element{
        margin: 0;
    }

    .nav-element > img{
        width: 2rem;
        height: 2rem;
        aspect-ratio: 1/1;
    }

    nav > ol {
        display: block;
        width: 0;
        position: absolute;
        top: 3.5rem;
        left: 0;
        z-index: 0;
        flex-grow: unset;
        font-size: 1.5rem;
        opacity: 0;
        border-radius: 0.5rem;
        overflow-x: hidden;
        max-height: calc(100lvh - 6rem);
        transition: 500ms ease-in-out;
    }

    nav > ol.expand{
        width: 85lvw;
        left: 3lvw;
        z-index: 100;
        opacity: 1;
        background-color: rgba(63, 63, 63, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    nav > ol .nav-element{
        flex-wrap: nowrap;
        transform: translateX(-8rem);
    }

    nav > ol.expand .nav-element{
         transform: translateX(0)
    }

    nav .nav-element:hover,
    nav .nav-element:focus-within {
        cursor: pointer;
        color: var(--clr-txt-bright);
        fill: var(--clr-txt-bright);
        background-color: var(--clr-secondary);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: scale(1);
    }

    nav ol.sub-nav {
        outline: 0.1rem solid var(--clr-dark);
        padding: 0.5rem;
        margin: 0.5rem;
        border-radius: 0.5rem;
        background-color: rgba(63, 63, 63, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    footer > ol{
        justify-content: center;
    }

    .splitter{
        display: none;
    }

    .ticket-left{
        width: 11rem;
    }

    .ticket-content{
        display: none;
    }

    .search-bar,
    .input-minw{
        flex-grow: 1;
    }

    .invitation{
        font-size: 1.5rem;
    }

    .invitation h5 span{
        padding: 0 0.25rem;
    }

    .notification{
        font-size: 0.8rem;
    }
    
    .mobile-only{
        display: block;
    }

    .mobile-hide{
        display: none;
    }

    .content-center-grow {
        padding: 0 0.5rem;
        display: block;
    }

    .content-center-left,
    .content-center-right {
        width: 100%;
    }

    .mobile-force-wrap{
        display: block;
    }

    .padd-desktop{
        padding: 0;
        display: none;
    }

    .icon.txt-xl{
        width: 9rem;
        min-width: 9rem;
    }

}

@media(width < 640px){
    main {
        min-height: calc(100lvh - 9rem);
    }

    .height-main{
        min-height: calc(100lvh - 9rem);
    }

    footer{
        min-height: 5.5rem;
    }

    .focus-dialog{
        width: 90%
    }

    .focus-dialog input.input-inline{
        flex-grow: 1;
    }

    .input-minw20{
        min-width: 0;
        flex-grow: 1;
    }

    .focus-dialog section:focus .focus-dialog-info,
    .focus-dialog section:focus-within .focus-dialog-info {
        padding: 0.5rem 1.25rem;
        opacity: 1;
        height: 7.5rem;
        margin: 0.5rem auto;
        width: 100%;
        visibility: visible;
    }

    .focus-dialog section:focus .focus-dialog-info-sm,
    .focus-dialog section:focus-within .focus-dialog-info-sm {
        padding: 0.5rem 1.25rem;
        opacity: 1;
        height: 4rem;
        margin: 0.5rem auto;
        width: 100%;
        visibility: visible;
    }

    .status-message {
        max-width: 90%;
        width: 90%;
    }

    .mobile-wrap {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mobile-vert-only{
        display: block;
    }

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

    .cookie-banner {
        max-height: 95lvh;
        overflow-x: hidden;
        min-width: 90%;
        max-width: 90%;
    }
}