:root {
    --highlight: #F2E500;
}

body, html {
    background: #e0e0e0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
    padding: 0px;
}

body {
    margin: 8px;
    overflow: hidden;
}

.debug {
    /* uncomment to make debug view invisible */
    /* display: none; */
} 

.hidden {
    display: none;
}

#game-container {
    position: relative;
    width:1920px;
    height:817px;
}

#main-container{
   
    top: 0px;
    left:0px;
    width:1920px;
    height:817px;
    border: 1px solid red;
    background-repeat: no-repeat;
    background-size: cover;
    /* overflow: scroll; */
}

#main-container.office{
    
    background: url('/Images/assets_2024_04_22/Office__Room_bl.png');
}

#main-container.bookshelf{
    
    background: url('/Images/Bookshelf__Screen_bl.png');
}


#GameStates {
   
    position: absolute;
    width: 300px; 
    height: 300px;
    left: 20px; 
    top: 22px;
    background: url('/Images/UI__Informationen_bl.png');
    background-repeat: no-repeat;

}
#GameStates img {
    object-fit: cover;
}

#GameStates .action-points {
    position: relative;
    left: 0px;
    top: 190px;
    font-size: 2.5em;
    text-align: center;
}

#GameStates {
    
    position: absolute;
    width: 300px; 
    height: 300px;
    /* left: 20px; 
    top: 22px; */
    left: 13px;
    top: 15px;
    background: url('/Images/UI__Informationen_bl.png');
    background-repeat: no-repeat;

}


#bookshelf {
    position: absolute;
    width: 370px;
    height: 830px;
    left: 1px;
    top: 0px;
    background: url('/Images/assets_2024_04_22/Office__Bookshelf_bl.png');
    background-repeat: no-repeat;
}

#bookshelf:hover, #bookshelf:focus, #bookshelf.marked {
    background: url('/Images/assets_2024_04_22/Office__Bookshelf_Outline_bl.png');
    outline: none;
}

#bubble {
    position: absolute;
    width: 940px;
    height: 700px;
    left: 640px;
    top: 5px;
    background: url(/Images/Office__Speechbubble_bl.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#bubble .bubble-content {
    padding: 27px 44px 30px 73px;
    font-size: 1.1em;
    line-height: 1.3;
}

#bubble-townhall {
    position: absolute;
    width: 940px;
    height: 700px;
    left: 640px;
    top: 5px;
    background: url(/Images/Office__Speechbubble_bl.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: none;
}


#annika {
    position: absolute;
    width: 600px;
    height: 570px;
    left: 290px;
    top: 254px;
    background: url('/Images/assets_2024_04_22/Annika_bl.png');
    background-repeat: no-repeat;
    background-size: 95%;
}

#desk {
    position: absolute;
    width: 992px;
    height: 240px;
    left: 928px;
    top: 576px;
    background: url('/Images/assets_2024_04_22/Office__Desk_bl.png');
    background-repeat: no-repeat;
}

#door {
    position: absolute;
    width: 158px;
    height: 470px;
    left: 1580px;
    top: 237px;
    background: url('/Images/assets_2024_04_22/Office__Door_bl.png');
    background-repeat: no-repeat;
}

#door:hover, #door.marked {
    background: url('/Images//assets_2024_04_22/Office__Door_Outline_bl.png');
}

#window {
    position: absolute;
    width: 503px;
    height: 180px;
    left: 780px;
    top: 246px;
    background: url('/Images/assets_2024_04_22/Office__Window_bl.png');
    background-repeat: no-repeat;
}

#window.noon {
    background: url('/Images/assets_2024_04_22/Office__Window_bl.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

#window.morning {
    background: url('/Images/assets_2024_04_22/Office__Window_bl.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

#window.evening {
    background: url('/Images/assets_2024_04_22/Office__Window_bl.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

#table {
    position: absolute;
    width: 473px;
    height: 280px;
    left: 800px;
    top: 394px;
    background: url('/Images/assets_2024_04_22/Office__Conferencetable_bl.png');
    background-repeat: no-repeat;
}

#table:hover {
    /* background: url('/Images/Office__Conferencetable_Outline_bl.png'); */
}

#calendar {
    position: absolute;
    width: 90px;
    height: 150px;
    left: 1280px;
    top: 331px;
    background: url('/Images/assets_2024_04_22/Office__Calender_bl.png');
    background-repeat: no-repeat;
}

#calendar:hover, #calendar.marked  {
    background: url('/Images/assets_2024_04_22/Office__Calender_Outline_bl.png');
    
}

#game-menu {

    position: absolute;
    top: 30px;
    left: 1780px;
    border: 6px solid #666666;
    font-size: 2em;
    padding: 5px 10px;
    background: #92C4C7;    
}

#game-menu:hover {
    border-color: var(--highlight);
}

#mini-planer {
    background: url(/Images/MiniPlaner_bl.png);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 296px;
    left: 20px;
    border: 6px solid #666666;
    font-size: 2em;
    padding: 5px 10px;
    width: 90px;
    height: 60px;
    cursor: pointer;
    /* background: #92C4C7;   */
    /* background: url(/Images/MiniPlaner_bl.png);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 706px;
    left: 1770px;
    border: 6px solid #666666;
    font-size: 2em;
    padding: 5px 10px;
    width: 90px;
    height: 60px; */
}

#mini-planer:hover {
    border-color: var(--highlight);
}

#speech-stack {
    position: absolute;
    width: 121px;
    height: 140px;
    left: 1101px;
    top: 670px;
    background: url('/Images/Office__Desk_Speech_bl.png');
    background-repeat: no-repeat;
}

#speech-stack:hover, #speech-stack.marked {
    background: url('/Images/Office__Desk_Speech_Outline_bl.png');
}

#stack-1-stack {
    position: absolute;
    width: 125px;
    height: 140px;
    left: 1330px;
    top: 670px;
    background: url('/Images/Office__Desk_Stack1_bl.png');
    background-repeat: no-repeat;
}

#stack-1-stack:hover, #stack-1-stack.marked {
    background: url('/Images/Office__Desk_Stack1_Outline_bl.png');
}

#stack-2-stack {
    position: absolute;
    width: 125px;
    height: 140px;
    left: 1480px;
    top: 670px;
    background: url('/Images/Office__Desk_Stack2_bl.png');
    background-repeat: no-repeat;
}

#stack-2-stack:hover, #stack-2-stack.marked {
    background: url('/Images/Office__Desk_Stack2_Outline_bl.png');
}

#stack-3-stack {
    position: absolute;
    width: 125px;
    height: 140px;
    left: 1630px;
    top: 670px;
    background: url('/Images/Office__Desk_Stack3_bl.png');
    background-repeat: no-repeat;
}

#stack-3-stack:hover, #stack-3-stack.marked {
    background: url('/Images/Office__Desk_Stack3_Outline_bl.png');
}


dialog[open] {
    animation: toggle-modal .3s ease-in-out;
  }
  
  @keyframes toggle-modal {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  dialog {
    border: 6px solid #666666;
    font-size: 2em;
    background: #92C4C7;
    padding-top: 60px;
    margin-top: 50px;

  }

  dialog .close-modal {
    position: absolute;
    right: 5px;
    top: 5px;
    background: none;
    font-size: 1.5em;
    border: none;
    cursor: pointer;
  }


.z-top {
    z-index: 1000;
}

.z-10 {
    z-index: 10;
}

.z-15 {
    z-index: 15;
}

.z-20 {
    z-index: 20;
}

.z-25 {
    z-index: 25;
}

z-bottom {
    z-index: 1;
}

/* elements below 19 are not clickable when a dialog is open. 
All above is clickable */
.z-overlay {
    z-index: 19;
}


#overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    
}

#overlay.not-active {
    display: none;
}

/* BUBBLE */

  .bubble-content a{
    display: block;
    margin-top: 10px;
  }
  
  .tab-wrapper {
    text-align: center;
    display: block;
    margin: auto;
    max-width: 500px;
  }
  
  .tabs {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }
  
  .tab-bubble {
    margin: 0 1%;
    list-style: none;
    padding: 10px 40px;
    color: #000;
    cursor: pointer;
    font-weight: 700;
    transition: all ease 0.5s;
    letter-spacing: 1px;
  }
  
  .tab-bubble:hover {
    color: #fff;
    background: #000;
    border-color: #000;
  }
  
  .tab-bubble.active {
    color: #333;
    border-color: #333;
  }
  
  
  .content-wrapper {
    padding: 40px 80px;
  }
  
  .tab-content {
    display: none;
    text-align: center;
    /* font-weight: 300;
    font-size: 15px; */
    opacity: 0;
    transform: translateY(15px);
    animation: fadeIn 0.5s ease 1 forwards;
  }
  
  .tab-content.active {
    display: block;
  }
  
  @keyframes fadeIn {
    100% {
      opacity: 1;
      transform: none;
    }
  }