:root 
{
    --mars-dirt: var(--color-o);
    --mars-terrain1: #ec7606;
    --mars-terrain2: #ffffff00;
    --mars-crash2: #e78300;
    --select-: #00af0f;

    --color-o: #e67307;
    --color-y: #fffb00;
    --color-g: #5e9249;
    --color-t: #47d1d6;
    --color-b: #182426;

}
  
*{
    font-family: monospace;
}

html
{
    background-color: black;
    width: 100vw;
    height: 100vh;

}
body{background-color: var(--mars-dirt)}

.js-rotate-45{

    transform: rotate(45deg);
}

#sl{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3vw;
    z-index: 999;
}
#sr{
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3vw;
    z-index: 999;
}
#st{
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    height: 4vh;
    z-index: 999;
}
#sb{
    position: fixed;
    right: 0;
    left: 0;;
    bottom: 0;
    height: 4vh;
    z-index: 999;
}

.badge-energy{

    color: rgb(0, 0, 0);
    background-color: var(--color-y);
}
.badge-resource
{
 color: black;
 background-color: var(--color-o);
}
.badge-time
{
 color: black;
 background-color: var(--color-t);
}

#DragTutorial
{
    position: absolute;
    height: 30px;
    color: red;
    left: 100px;
    font-weight: bold;
}
#DragTutorial > svg
{
    z-index: 1200;
    top: -30px;
    left: -70px;
    position: absolute;
    height: 100px;
    color: red;
    pointer-events: none;
}
#CMD_store svg:hover path{

    fill: var(--select-) !important;
}

#CMD_store svg + div{

    display: none;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    margin-left: -75px;
    border: 2px solid var(--color-t);
}
#CMD_store svg + div{

    display: none;
}
#CMD_store svg:hover + div{

    display: inline-block;
}
#CMD_store svg:active + div{

    display: none;
}
#CMDUndo
{
    position: absolute;
    color: red;
    background-color: transparent;
    border: transparent;
    z-index: 1100;
    right: 5vw;
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }


#Intro
{
    position: fixed;
    top: 0;
    left: 0;
}
#SkipIntro
{  
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10vh;
    text-align: center;
    color: white;

}


#fullscreen 
{
    position: fixed;
    bottom: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: black;
}

#parent_earth
{
    position: fixed;
    font-size: 480px;
    top: 26vh;
    left: 40vw;
    z-index: -1;
    line-height: 0;
}
#parent_mars
{
    position: fixed;
    font-size: 40px;
    z-index: -1;
    top: 26vh;
    left: 200vw;
    color: var(--mars-dirt);
    line-height: 0;
}


#parent_shuttle
{
    color: white;
    position: fixed;
    font-size: 2px;
    top: 50vh;
    left: 50vw;
    line-height: 0;
}
#shuttle
{
    filter: drop-shadow(0px 10px 1px black);
}

#TitleText
{
    top: 30vh;
    left: 10vw;
    font-size: 22vw;
    position: absolute;
    color: black;

}
.toggle-tab
{
    
    border-radius: 15px 15px 0 0;
    background-color: black;
    font-weight: bold;
    z-index: 950;
    margin: 10px;
    margin-bottom: 0;
}
.toggle-tab > button{color:var(--color-t);}
#open-tab-row
{
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 2000;
}

#close-tab-row
{
    z-index: 800;
    display: flex;
}
.toggle-tab-close
{ 
    visibility: hidden;
}
.toggle-tab-open{
    margin-left: 15px;
    margin-right: 15px;
}
#ToggleWindow{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: fit-content;
    width: fit-content;
    z-index: 1000;
}

#openROV{display: none;}

.toggle-window
{
    border-top: ridge thick var(--color-t); 
    display: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    position: relative;
    width: 100vw;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(55,55,55,1) 100%);
    z-index: 1000;
    padding: 10px;
}
#DayNight
{
    pointer-events: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 500;
    background-color: rgba(0, 0, 0, 0);
}
#DayNightIcon
{
    pointer-events: none;
    position: fixed;
    width: 40px;
    padding: 7px;
    left: 0;
    top:0;
    height: 40px;
    z-index: 1000;
    background-color: rgb(0, 0, 0);
    border-radius: 0 0 25px 0;
    box-shadow: 0px 0px 4px black;
}
#DayNightIcon > svg{color: var(--color-y);}
#fa-moon{display: none;}
.mMidbg
{
    background-color: black;
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5000;
}
.mMid
{
    background: linear-gradient(0deg, rgb(132, 67, 0) 0%,rgb(217, 90, 0) 20%, rgb(255, 153, 0) 100%);
    border: 3px outset var(--color-o);
    border-radius: 15px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    margin-left: 20vw;
    margin-right: 20vw;
    margin-top: 20vh;
    margin-bottom: 20vh;
    z-index: 5100;

}
.mROW 
{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-evenly;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    border: none;
}
.mROW > h1{
    text-shadow: 0 0 3px var(--mars-dirt);
    user-select: none;
}
.mROW > h1 > i{
    font-size: smaller;
}   
#GameMapTable{

    background-color: var(--mars-dirt);
}
#GameMapTable > .row
{
    flex-wrap: nowrap;
}

[draggable]{

    cursor: grab;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
[draggable]:hover
{
    color: var(--select-);
}


section {
    display: table;
    width: 100%;
}
  
section > * {
    display: table-row;
}
  
section .col {
    display: table-cell;
}

.col{
    flex: 1;
    padding: 0;
    margin-left: -2px;
    margin-right: -2px;
    max-width: fit-content;
}
  .row{
    margin-right: 0;
    margin-left: 0;
}

.col > .none{
    color: transparent;
}

.col > .none:hover{
    outline: 3px solid black;
}
.col > .ds{
    filter: drop-shadow(0px -3px 1px black ); 
    width: 50px;
    height: 50px;
}

.grad{
   background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(55,55,55,1) 100%);
}
.grad:hover{
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgb(80, 80, 80) 100%);
}

#Rover{
    width: 32px;
    position: absolute;
    left: 88px;
    top: 100px;
    transform: translateX(8px);
}
#Rover > svg{
    position: absolute;
    width: inherit;
    height: inherit;
}
#UFOs{position: absolute;}
#AirDs{position: absolute;}
.AirD{
    display: none;
    opacity: 0;
    width: 32px;
    position: absolute;
    z-index: 700;
    color: red;
    filter: drop-shadow(0px 25px 1px black);
}   
.UFO{
    display: none;
    opacity: 0;
    width: 32px;
    position: absolute;
    transform: translateX(8px) translateY(-25px);
    z-index: 700;
    color: purple;
    filter: drop-shadow(0px 25px 1px black);
}
.UFO > svg{
    position: absolute;
    width: inherit;
    height: inherit;
    
}
.UFO.crash
{
    transform: translateX(15px) translateY(30px) rotate(140deg);
    filter: none;
    color: black;
}


#ProgressBars
{
    position: fixed;
    right: 15px;
    top: 0;
    width: 20px;
    height: 100vh;
    z-index: 1000;
    right: 15px;

}
#EnergyBar
{
    background: linear-gradient(0deg, rgb(255, 0, 0) 0%,rgb(255, 125, 33) 20%, rgb(239, 255, 0) 100%);
}

#StorageBar
{
    background: linear-gradient(0deg, rgb(132, 67, 0) 0%,rgb(217, 90, 0) 20%, rgb(255, 153, 0) 100%);
}
.progressbar_parent
{
    position: relative;
    width: 20px;
    height: 200px;
    box-shadow: 0px 0px 4px black;
    border-radius: 10px;
    z-index: 1000;
}
.progressbar_child
{
    border-radius: 10px 10px 0 0;
    z-index: 1001; 
    height: 95%;
    background-color: black;
}
.bar_icon
{
    text-align-last: center;
    margin-top: 20px;
    position: relative;
    color: black;
}
#RoverWindow
{
    height: 50vh;
}
    #rover-window
    {
        width: 90vw ;
        height: 40vh;
        margin: 10px;
        background-color: var(--mars-dirt);
        display: flex;
        border: 2px solid black;
    }
        #component-info
        {
            height: inherit;
            width: 50vw;
            position: absolute;
            border-right: 2px solid black;
            background: rgb(0,0,0);
            background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(55,55,55,1) 100%);
            
        }
        

        #Componenent-Upgrades
        {
            color: var(--color-t);
        }
        #Componenent-Upgrades p
        {
            margin-bottom: 0.5rem;
        }
        #Componenent-Upgrades button
        {
            padding: 2px ;
            color: var(--color-t);
            margin: 2px;
            width: 98%;
            text-align: left;

        }
        #Manage-Componenent
        {
            padding: 5px;
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: black;
            color: var(--color-t);
        }
        #Hover-info
        {
            position:absolute;
            left: 50vw;
            bottom: 100%;
            width: 39.5vw;
            padding: 5px;
            color: var(--color-t);
            text-align: center;
        }
        #rover-view-left
        {
            height: inherit;
            width: 20vw;
        }
        #rover-view
        {
            width: 60vw;
            height: 100%;
        }
            #rover-view > svg
            {
                position: absolute;
                width: 100%;
                height: 40vh;
                pointer-events: none;
            }

            #rover-view > svg path{

                pointer-events:all;
            }
            #rover-view > svg path:hover{

                fill: var(--select-) !important;
            }

.objective-UI-Icon
{
    background-color: black;
    color: white;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
}