@font-face {
    font-family: "PPNeueMachina-Inktrap";
    src: url("fonts/PPNeueMachina-InktrapRegular.otf") format("opentype");
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: "PPNeueMachina-Inktrap";
    src: url("fonts/PPNeueMachina-InktrapUltrabold.otf") format("opentype");
    font-weight:bold;
    font-style:normal;
}


html, body {
    color:black;
    text-align:center;
    font-family:"PPNeueMachina-Inktrap", serif;
    overflow: hidden;    
    background:#C6C2AD;
    
    /* to allow background graphics fix */
    /* position:relative !important; */
    /* min-height:100% !important; */
    /* overflow:hidden !important; */
}

html:not(.a-fullscreen) {
    position:relative;
    height:100%;
}

html:not(.a-fullscreen) > body {
    position:relative;
    height:100%;
}

div.page.active
{
    z-index: 6;
    animation-name: show;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;  
    left: 0%;
    overflow-y: scroll;
}

div.page.visible
{
    display: block;
}

div.page
{
    z-index: 2;
    display: none;
    position:absolute;
    width:100%;
    /*height:100%;*/
    height: calc(100% - 20vmin); 
    min-height:100%;
    top:0;
    overflow-y: hidden;
    overflow-x: hidden;
    transition:left 0.5s ease;
    padding-bottom:20vmin;
}

div.page.reset {
    transition: none;
}

div.page.left {
    left:-100%;
}

div.page.right {
    left:100%;
}

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


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

div.background {
    position: absolute;
    width:100%;
    min-height:100%;
    /* left:0;
    top:0;
    right:0;
    bottom:0; */
    z-index:-100;
}

h1, h2, h3, p {
    line-height:1.1;
}

h1 {
    font-size:5vmin;
    /* font-family: "PPNeueMachina-Plain"; */
    font-weight:bold;
    text-align:left;
    width:84vmin;
    margin:40vmin 8vmin 8vmin 8vmin;
    text-transform: uppercase;
}

h3 {
    font-size: 7vmin;
    font-weight: bold;
    text-align: left;
    width: 84vmin;
    margin: -5vmin 8vmin 8vmin 8vmin;
    text-transform: uppercase;
}

p {
    font-size:5vmin;
    text-align:left;
    width:84vmin;
    margin:8vmin;
}

button {
    font-size:4vmin;
    line-height: normal;
}

i.fa {
        font-size:4vmin;
    line-height: normal;
    color: #FFFFFF;
}

div.menu {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:15vmin;
    z-index:10;
    display: flex;
}

div.menu > button {
    height:100%;
    flex: 1 1 0px;
    font-weight:bold;
    background:black;
    color:white;
    vertical-align: bottom; /* to align text with icon */
}

div.menu > button.orange {
    background:#B75A3A;
}

div.menu > button.green {
    background:#005E64;
}

div.menu > button.lavender {
    background:#C8B4E8;
    color: black;
}

div.menu > button.wide {
    width:100%;
}

div.menu > button.lightgray {
    width:100%;
    background:#D9D9D9;
    color: black;
}


/* LOADER */

div.page.loader,
div.page.room-loader {
    background-color:#B75A3A;
    padding:0;
    overflow:hidden;
}

div.page.loader > img.logo,
div.page.room-loader > img.logo {
    width: 85vmin;
    margin-top:10vmin;
}

div.page.room-loader > img.stroke.bigImage {
    width: 100vw;
    animation: float 3s ease-in-out infinite;
}

div.page.room-loader > img.stroke {
    width: 85vw;
}

div.page.room-loader > img.stroke.fullsize {
    width: 100vw;
    animation: float 3s ease-in-out infinite;
}
  
@keyframes float {
    0%, 100% {
        margin-top: 10vmin;
    }
    50% {
        margin-top: 12vmin;
    }
}

/* WELCOME */

div.page.welcome {
    background-color:#6DADDF;
}

div.page.welcome > h1 {
    margin-top:8vmin;
}

div.page.welcome p {
    margin-top:6vmin;
}

/* WELCOME UNGE VOKSNE */


div.page.wuv .text_inputs{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6vmin;
    width: 100%;
    font-size: medium;
}

.termsButtonHolder {
    width: 84vmin;
    align-items: start;
    justify-content: left;
    display: flex;
    margin: 4vmin 4vmin 8vmin 8vmin;
}

div.page.wuv button.terms {
    background: none;
    text-decoration: underline;
    color: #000000;
}

.text_inputs input{
    width: 85%;
    height: 12vmin;
    color: black;
    text-align: left;
    padding: 2vmin;
    text-emphasis-style: bold;
    background-color: #D9D9D9;
}

input::placeholder {
    color:black;
    font-weight: bold;
}

/* WRONG ROUTE */

div.page.wrong_route {
    background-color:#6DADDF;
}

div.page.wrong_route > h1 {
    margin-top:8vmin;
}

div.page.wrong_route p {
    margin-top:6vmin;
}


/* STATUS */

div.page.status {
    background-color:#C6C2AD;
}

div.page.status > h1 {
    margin-top:12vmin;
    margin-bottom:5vmin;
    text-align:center;
}

div.page.status > p {
    /* text-transform: uppercase; */
    line-height:1;
    font-size:5vmin;
    margin:5vmin 10vmin 0 10vmin;
    text-shadow:0 0 1vmin rgba(0,0,0,0.25);
}

div.page.status > p > span {
    color: #d84141;
}

div.page.status > div.rooms {
    margin-top:5vmin;
}

div.page.status > div.rooms > div {
    width:100%;
    margin-bottom:4vmin;
    font-size:5vmin;
    padding:6vmin 0 4vmin 0;
    background:#D9D9D9;
}

div.page.status > div.unge_voksne_rooms > div {
    width:100%;
    margin-bottom:4vmin;
    font-size:5vmin;
    padding:6vmin 0 4vmin 0;
    background:#D9D9D9;
}

/* QR */

div.page.qr {
    background-color:#000000;
    height:calc(100% - 15vmin);
    padding:0;
}

div.page.qr > video {
    width:100%;
    height:100%;
    object-fit:cover;
    background-color:black;
}

/* MAP */

div.page.map {
    background-color:#FFFFFF;
    height:calc(100% - 15vmin);
    padding:0;
}

div.page.map > img.map {
    /* width:80vmin; */
}

/* ROOM */

div.page.room-intro {
    background-color:#C6C2AD;
    padding-top:8vmin;
}

div.page.room-intro > h1 {
    margin-top:8vmin;
    font-size:5.5vmin;
}

div.page.room-intro > p {
    margin-top:0;
}

div.page.room-form {
    background-color:#C6C2AD;
}

div.page.room-form > h1 {
    margin-top:15vmin;
    margin-bottom:8vmin;
}

div.page.room-form > div.option,
div.page.room-form > textarea,
div.page.room-form > div.list-group > div.option {
    width:84vmin;
    margin:3vmin 8vmin;
    padding:3vmin;
    background:#D9D9D9;
    font-size:5vmin;
    line-height:1;
}

div.page.room-form > textarea {
    margin-top:0;
    height:24vmin;
    text-align:left;
}

textarea::placeholder {
    color: black;
}

div.page.room-form > textarea.big {
    height:60vmin;
}


div.page.room-form > div.option.selected,
div.page.froom-form > textarea.selected {
    background-color:#C8B4E8;
}

div.page.room-camera {
    background-color:#C8B4E8;
}

div.page.room-camera > img {
    width:100%;
    height:100%;
    object-fit: contain;
}

div.page.room-camera > input {
    display:none;
}

div.page.room-qr {
    background-color:#000000;
    padding:0;
}

div.page.room-qr > video {
    width:100%;
    height:calc(100% - 15vmin);
    object-fit:cover;
    background-color:black;
}

/* HNR */

div.page.hnr {
    background-color:#C8B4E8;
    padding:0;
}

/* FTK */

div.page.room-form.ftk > div.option.selected,
div.page.room-form.ftk > textarea.selected {
    background:#C8B4E8;
}

/* BGF */

div.page.bgf {
    background-color:#C6C2AD;
}

div.page.bgf > h1 {
    margin-top:15vmin;
    margin-bottom:10vmin;
}

div.page.bgf > select {
    width:84vmin;
    margin:3vmin 8vmin;
    padding:3vmin;
    line-height:1;
    background:#D9D9D9;
    font-size:5vmin;
    height:12vmin;
    text-align:left;
}

div.page.bgf > p {
    margin-bottom:0;
  }

/* div.page.bgf > textarea {
    width:84vmin;
    margin:3vmin 8vmin;
    padding:3vmin;
    background:#D9D9D9;
    font-size:5vmin;
    line-height:1;
    height:24vmin;
    text-align:left;
}

div.page.bgf > textarea.selected {
    background:#6DADDF;
} */


/* GTI */

div.page.gti {
    /* height:100vh; */
    padding:0;
}

div.page.gti > video {
    width:100%;
    height:calc(100% - 15vmin);
    object-fit:cover;
    background-color:black;
}

/* TDN */

div.page.tdn {
    background-color:#FFFFFF;
}

div.page.tdn > img {
    width:80vmin;
    height:80vmin;
    margin-top:20vmin;
}

/* ITP */

div.page.itp {
    background-color:#C6C2AD;
}

div.page.itp > h1 {
    margin-top:15vmin;
    margin-bottom:10vmin;
}

div.page.itp > div.option {
    width:84vmin;
    margin:3vmin 8vmin;
    padding:3vmin;
    background:#D9D9D9;
    font-size:5vmin;
    line-height:1;
}

div.page.itp > div.option.selected {
    background:#C8B4E8;
}

/* OKD */

div.page.room-form.okd > div.option.selected,
div.page.froom-form.okd > textarea.selected {
    background:#6DADDF;
}

/* MVY */

div.page.mvy {
    background-color:#C8B4E8;
}

/* RFO */

div.page.rfo {
    background-color:#FFFFFF;
}

div.page.rfo > img {
    width:80vmin;
    margin-top:8vmin;
}

/* HTG */

.list-group {
    counter-reset: option-counter; /* Initialize the counter for the .list-group */
}

.list-group .option {
    position: relative; /* Ensures the pseudo-element is positioned relative to the .option element */
}

.list-group .sortable-ghost {
    opacity: 0;
}

.list-group .option:not(.sortable-drag)::after  {
    content: counter(option-counter); /* Set the content to the current counter value */
    counter-increment: option-counter; /* Increment the counter */
    position: absolute;
    width: 10vmin; /* Adjust size as needed */
    height: 10vmin; /* Adjust size as needed */
    background-color: black; /* Circle color */
    color: #fff; /* Text color */
    border-radius: 50%;
    right: -5vmin;
    top: 0.5vmin;
    text-align: center;
    line-height: 11vmin; /* Match this to the height to center the text vertically */
    font-size: 5vmin; /* Adjust font size as needed */
}

/* AFRUNDING */

.centerbox {
    width: 100vw;
    height: 100%;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    display: flex;
}

.centerbox > h1 {
    text-align: center;
    width: 100%;
    font-size:4.5vmin;
    width:84vmin;
    margin:8vmin 8vmin 8vmin 8vmin;
}