/* Global style */

*{
  font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: black;
}

/* Makes it the 98 aesthtics*/
body {
    background-color: #008080;
    overflow-x: hidden;
}

h3, h4, p {
    margin: 0 !important;
}
h4{
    font-size: 1.2rem !important;
}
p {
    font-size: 1.2rem !important;
}


/*Better cursor*/
button{
    cursor: pointer;
}.title-bar{
    cursor: grab;
}



/* ------------- */
/* Start Blocker */
/* ------------- */

#StartBlocker {
    height: 100vh;
    width: 100vw;
    background-color: black;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}


#StartBlocker h1{
    text-align: center;
    font-size: 11rem;
    color: white;
}
.StartBlockerInfo{
    padding: 0.25em;
    outline: 5px dotted white;
    color: white;
}
.StartBlockerButtons{
    padding-top: 7.5vh;
    width: 153px;
    margin: auto;
}
#StartBlocker div p{
    text-align: center;
    font-size: 2em !important;
    color: white;
}


/* ------------- */
/* Windows and pop ups */
/* ------------- */
/* Make sure the popup is centre or where I want it*/
#Form,#InfoBox, #TutorialWindow, #IntroForm,#Overview{
    position: absolute !important;
    top: 0;
    left:0;
    color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#Overview{
    transform: translate(50%, -150%);
}

/* Scary colour*/
#FormWarning{
    color:red;
}

/*Used for the transition to OS*/
#StartBlockerTransitionBlocker{
    background-color: #00000000;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

@keyframes FadeToBlack {
    from {
        background-color: #00000000;
    }
    to{
        background-color: black;
    }
}


/* ------ */
/* OS */
/* ------ */


/*OS*/
#OS{
    top:0;
    left:0;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    color:white;
    z-index: 10;
}
#OSimg{
    margin-top: 17.5vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20vw;
}
#OS h1, #SimulationBlocker h1{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1ch;
}
.OSSpinner{
    height: 1em;
    vertical-align: middle;
    animation: Spin 1.2s steps(6) infinite;
}
#SimulationBlocker{
    position:absolute;
    top:-100vh;
    left:0;
    width:100vw;
    height:100vh;
    background-color:#c3c3c3;
    animation: Reveal 1s ease-in forwards;
}
#SimulationProgressBars{
    margin-top: 15vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80vw;
}

@keyframes Spin {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes Hide {
    from{
        transform: translate(0);
    }
    to{
        transform: translate(0,-100vh);
    }
}

@keyframes Reveal{
    from{
        transform: translateY(0);
    }
    to{
        transform: translateY(100vh);
    }
}

/*For the Main UI*/
#Taskbar{
    width: 100vw;
    position:fixed;
    bottom:0;
    left:0;
}

/*Icons postions are alligned to the grid*/
.desktop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
width: 100px;
padding-bottom: 2rem;
}

.desktop-grid-div{
grid-area: auto;
width: 8vw;
text-align: center;
}
.desktop-grid-div p{
margin-top: 0%;
}

/*Mobile UI positions*/
@media (max-width: 770px) {
  .desktop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    width: 100px;
  }

  .desktop-grid-div {
    grid-area: auto;
    width:auto;
  }
  #TaskbarPopulation, #TaskbarCurrentFunds{
    display: none;
  }
}

/*For some reason this just does not like to work if you group them underone statement and share the backgroundposition, and I just don't know why*/
#icon1 {
    margin-right:calc(4vw-32px);
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -0px -0px;
}
#icon2 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -64px -0px;
}
#icon3 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -128px -0px;
}
#icon4 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -192px -0px;
}
#icon5 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -0px -64px;
}
#icon6 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -64px -64px;
}
#icon7 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -128px -64px;
}
#icon8 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -192px -64px;
}
#icon9 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -0px -128px;
}
#icon10 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -64px -128px;
}

#icon11 {
    background: url(Assets/Sprite_Sheet.png);
    display: inline-block;
    height: 64px;
    width: 64px;
    background-position: -128px -128px;
}

#icon12 {
    background: url(Assets/Simulate.png);
    display: inline-block;
    height: 64px;
    width: 64px;
}

#icon13 {
    background: url(Assets/Financial.png);
    display: inline-block;
    height: 64px;
    width: 64px;
}

/*Policy Purchase UI*/
#PolicyPurchaseInterface img{
    border: 1px solid black;
}

/*PP stands for policy pack cause I do not want to type the entire thing 6 times...*/
#PP1,#PP2,#PP3,#PP4,#PP5,#PP6{
    max-width: 120px;
    height: 128px;
    overflow-y: auto;
    padding:0.3em;
    border: 1px solid black;
    cursor: pointer;
}
#PolicyPurchaseFlex{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
#PolicyPurchaseFlex div{
    flex-grow: 1;
}

/*Pop up hides the background elements partially*/
#PolicyPurchaseConfirmation{
    position:absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    z-index: 5;
}

#Confirmation{
    position:absolute;
    transform: translate(calc(50vw - 175px), calc(50vh - 300px));
}

.tree-view{
    overflow-y: scroll;
}

li{
    font-size: 1rem;
}

.financeList :nth-child(1){
    color:red
}
.financeList :nth-child(2){
    color: limegreen;
}