@font-face {
    font-family: "Jagger";
    src: url(./font/F37-Jagger/f37jagger-regular-webfont.ttf);/*url("./font/F37-Jagger-Thin/f37jagger-thin-webfont.ttf")/**/
}

html{background-color: #181818;
    
    font-size: 1.73vh;
    overflow:hidden;
    
    }
    
body{
    display:flex;
    margin:0%;
    padding:0%;
}


comp {
    position: relative;
    display:block;
    height: 94vh;
    align-self: center;
    text-align: center;
    background-color: rgba(0, 33, 71,0);
    border-style: inset;
    border-radius: 20px;
    border-color: rgba(60, 58, 225,0);
    box-shadow: 5px 10px rgba(60, 58, 225,0);
    width:auto;
    top:1vh;
    overflow: hidden;
    min-width: max-content;
    margin-left:1.6%;
    margin-right: 0%;
    
    
}

oldtpanel {
    position: relative;
    height: 88vh;
    text-align: center;
    background-color: #E2E2E2;
    border-style: inset;
    border-radius: 1.5%;
    border-color: rgb(50, 50, 50);;
    box-shadow: 5px 10px;
    top:1vh;
    overflow-wrap:break-word;
    color:black;
    padding: 2vh;
    padding-top: 2vh;
    padding-left: 1%;
    text-align: left;
    left:1%;
    display: inline-block;
    width:40%;
    float:left;
    font-family: 'Jagger', sans-serif;
    margin:0%;
}

tpanel {
    position: relative;
    height: 50%;
    text-align: center;
    background-color: #E2E2E2;
    border-style: inset;
    border-radius: 0.2vh;
    border-color: rgb(230, 230, 230);
    border-style: outset;
    
    top:1vh;
    overflow-wrap:break-word;
    color:black;
    padding: 2vh;
    padding-top: 2vh;
    padding-left: 3%;
    text-align: left;
    left:1%;
    display: inline-block;
    width:98%;
    font-family: 'Jagger', sans-serif;
    font-size: 1.3rem;
    margin:0vh;
    
    
}

.fcolumn{
    display:inline-flex;
    margin-right:0;
}

#infocontent{
    overflow-y: auto;
    height: 100%;
}


subpanel{
    position: relative;
    height: 36%;
    text-align: center;
    background-color: #202020;
    border-style:groove;
    border-radius: 1.5vh;
    border-color: rgb(207, 207, 207);
    top:1vh;
    overflow-wrap:break-word;
    color:white;
    padding: 2vh;
    padding-top: 2vh;
    padding-left: 1%;
    text-align: left;
    left:1%;
    display: inline-block;
    width:100%;
    font-family: 'Jagger', sans-serif;
    margin:0%;
    margin-top: 2vh;
    overflow-y: scroll;
}

statpanel{
    background-color:#20202000;
    margin-top: 0.5em;
    display: block;
    height:25%;
    font-size: 2.5rem;
    padding: 1vh;
    border-style: outset;
    border-color: rgba(197, 197, 197, 0);
    border-radius: 0vh;
    border-width: 0.5vh;
}

scorepanel{
    background-color:#eeeeeec9;
    color: black;
    position: fixed;
    width:16%;
    bottom: 14vh;
    right: 5.5%;
    z-index: 100;
    border-radius: 1vh;
    display: inline-block;
    height: 80vh;
    text-align: center;
    font-family: "Jagger", sans-serif;
    padding: 2vh;
    font-size: 2em;
    transition: right 0s;
    display: none;
}



text{
    user-select: none;
}

bigpbox{
    margin: 1%;
    padding: 3%;
    display: block;
    background-color: hsl(0, 82%, 19%);
    color:white;
    display: inherit;
    min-width:51%;
    max-width: max-content;
    font-size: 1.4rem;
    padding-right: 5%;
    text-align: left;
}

pbox{
    margin: 1%;
    padding: 3%;
    display: block;
    background-color: hsl(0, 82%, 19%);
    color:white;
    display: inherit;
    min-width:51%;
    max-width: max-content;
    height:0.8em;
    overflow: hidden;
    font-size: 1.4rem;
    padding-right: 5%;
    text-align: left;
}

ul{
    font-weight: bold;
}

#phasep{
    float:none;
}

inDisplay{
    position:absolute;
    align-self: center;
    display: flex;
    left:4%;

    top:88%;
    color:white;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7em;
}

screen{
    padding-top: 1%;
    height:max-content; 
    width: 38vh;
    position:absolute; top:22%; left:48.2%; 
    transform: translate(-50.3%,-44%);
    font-size: 2.6vh;
    line-height: 1.8rem;
}

.shighlight{
    font-weight: bold;
}

bscreen{
    padding-top: 1%;
    height:34vh; 
    width: 20%;
    position:absolute; top:25%;left:20%; 
    transform: translate(0,-46%);
    background-color: rgba(200, 200, 200, 0.1);
    font-size: 145%;
    display: block;
}

fplan{
    background-color:white;
    color: #090b0c;
    font-family: 'Courier New', Courier, monospace;
    display:inline-block;
    width: 90%;
    padding: 2%;
    font-size: 0.8em;
    padding-left:3em;
    padding-right: 3em;
}

loadsheet{
    background-color:rgba(255, 255, 255, 0);
    color: #090b0c;
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    width: 95%;
    padding: 2%;
    font-size: 0.9em;
}

#fTitle{
    width: 100%;
    text-align: center;
    background-color: rgba(172, 36, 36, 0);
    font-weight: bold;
    font-size: 1.2em;
    line-height: 2em;
    padding-bottom: 1em;
}
#fTop{
    background-color: rgba(65, 140, 55, 0);
    padding: 1%;
}
#fWeights{
    padding:1%;
    line-height: 3em;
    
}

#infocontent{
    overflow: auto;
}

#highscoreID{
    height: max-content;
    max-height: 28%;
    font-size: 0.8em;
}

stext{
    position: relative;
    color:white;
    display: block;
    margin-top: 0.1%;
    font-size: 0.7em;
    font-family: 'Courier New', Courier, monospace;
    padding:0%;
    margin:0%;
    line-height: 120%;
    white-space: pre;
}

ltext{
    white-space: pre;
    position: relative;
    color:white;
    display: block;
    font-size: 0.5em;
    font-family: 'Courier New', Courier, monospace;
    padding:0%;
    margin:0%;
    line-height: 165%;
    transform: translate(0,-65%);
}

waypointlist{
    display:inherit;
    line-height: 0.5em;
    margin-left:5%;
}

fwaypoint{
    white-space:pre;
    margin-left:3em;
    line-height: 1.1em;;
}

.locked{
    color: rgb(0, 255, 0);
}
.modifiable{
    color: cyan;
}
.danger{
    color:orange
}

.limit{
    color:magenta;
}

.temp{
    color:yellow;
}


.cButton{
    background-color: blue;
    border-style: outset;
    border-width: 10px;
}

.contphase{
    display: inherit;
    height:max-content
}

.subphase{
    display: none;
}

.titleelems{
    height: 5vh;
    top:5.7vh;
    font-size: 1rem
}

.trainhighlight{
    paint-order: fill markers stroke;
    stroke:unset;
    stroke: rgb(255, 255, 255);
    stroke-width: 0.2em;
    position: absolute;
    transition: all 1s;
    z-index: 60;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes pulse{
    0%{stroke-width: 0.3em;}
    50%{stroke-width: 0.05em;}
    100%{stroke-width: 0.3em;}
}

#alsonotscorecount {
    font-size: 4em;
}

#oldnottimer{
    font-size: 2.5em;
}

#contents{
    width:17%;
    float:right;
    margin: 1vh;
    margin-right: 4vh;
    background-color: rgba(22, 49, 37,0);
    padding: 0.5vh;
    left:0%;
    top:3vh;
    text-align: center;
    height: 80vh;
    width: max-content;
}

#titleTxt{
    color:white;
    font-size: 0.9em;
    top:2%;
    position: absolute; 
    display:flex;
    left:19vh;
    text-align: center;
    transform: translate(-50%,0);
    font-family: 'Courier New', Courier, monospace;
}

#logo{
    width:10%;
    display:inline-block;
    position: fixed;
    bottom: 2vh;
    right:3%;
}

#phaseout{
    margin: 0.2%;
    overflow-y: auto;
    height:58vh;
}

.doctab{
    position:fixed;
    left:-2%;
    transform:translate(-54px,0);
    stroke-dasharray: 440;
    z-index: 20;
    display: none;
    
}



.pagebutton{
    background-color: rgb(31, 91, 54);
  border: none;
  color: white;
  padding: 1% 3%;
  text-align: center;
  text-decoration: bevel;
  display: inline-block;
  font-size: 1em;
  border-radius: 0.5em;
  margin: 1%;
  font-family: 'Raleway';
  border-style: outset;
  border-color: rgb(31, 91, 54);
}

.disablepagebutton{
    background-color: rgb(122, 1, 1);
}

.notpagebutton:active{
    border-style: inset;
    margin-top: 1.6%;
    margin-bottom: 0.4%;
    border-color: #E2E2E2;
}
.pagebutton:active{
    border-style: inset;
    transform: translate(0,3px);
    border-color: #E2E2E2;
}

.cButton :hover{
    background-color: red;
    
    color: pink;
}

.cButton :hover > .rect{
    fill: red;
    background-color: red;
}

.cButton:active{
    border-style: inset;
    transform: translate(0,1px);
    fill: blue; 
}

.tButton{
     
    user-select: none;
}

.tButton:hover{
    fill: white;
}

.buttonTxt{
    user-select: none;
}

.columndiv{
    position: relative;
    height: 95vh;
    text-align: center;
    top:1vh;
    overflow-wrap:break-word;
    color:black;
    padding: 3vh;
    padding-top: 2vh;
    padding-left: 1%;
    text-align: left;
    left:1%;
    display: inline-block;
    width:40%;
    float:left;
    font-family: 'Jagger', sans-serif;
    margin:0%;
}

.phasesuccess{
    background-color: #197b00;
    overflow-y: hidden;
    height: 0.8em;
}

.phasesuccess:active{
    
    height:max-content;
}

.phasecurrent{
    border-width: 0.1vh;
    border-color: yellow;
    border-style: solid;
    height:max-content;

}

.phasedisable{
    background-color: #b1b1b1;
    overflow-y: hidden;
    height: 0.9em;
}
.phasecurrent:where(.phasedisable){
    border-style: none;
}

.tpanf{
display: none;
}

.subf{
display: inherit;
}

.tpanl{
    display: none;
}

.subl{
    display: inherit;
}

#labelText{
    user-select: none;
    position: absolute;
}



#keyFrame{
    padding: 0%; margin: 0%; display: flex;position:absolute;  left: -20px; top:0; right:0; height:100%; margin-left: auto; 
        margin-right: auto; 
}


@media (orientation: portrait)
{
    html{
        background-color:"pink";
    }
    comp{
        color:"red";

    }

    tpanel{
        width:80vw;
        position: absolute;
        z-index: 30;
        
    }

    .phasedisable{
        height: 1.3em;
    }

    body{
        background-color:"none";
    }
    

    @keyframes slidein {
        from {
          top:90vh;
        }
        
        to{
            top:10vh;
        }
    }
}

@media only screen and (max-width: 1301px) {
    html{
        background-color:"yellow";
    }
    #contents{display:normal;}
}

@media only screen and (max-width: 1200px) and (orientation: landscape) {
    .columndiv{
        padding: 0%;
        margin-right: -1%;
        width: 30%;
    }
    comp{
        top:-1vh;
        left:2.7%;
    }
    statpanel{
        font-size: 1.9em;
    }
    tpanel{
        font-size: 1.05em;
        overflow-y: scroll;
        scroll-behavior: smooth;
        width: 100%;
        padding: 1vh;
    }
    pbox{
        font-size: 1.3rem;

    }

    ul{
        padding-left: 20%;
    }

    #info{
        font-size: 1.2em;
    }

    .pagebutton{
        font-size: 1em;
    }

    
}

@media only screen and (max-width: 1200px) and (orientation: portrait) {
    
    #logo
    {
        width:20%;
        bottom: 2%;
    }

    #infocontent{
        overflow-y: auto;
        height: 100%;
    }

    #info{
    top:8vh;
    transform:translate(-50px,0);
        padding-left: 3%;
    }
    
    #info.open{
        transition: left 0.5s;
        left:23%;
    }
    #info:not(.open){
        transition: left 0.4s;
        left:104%;
    }

    .doctab{
        display:unset;
        overflow: visible;
        position: absolute;
    }

    .contphase{
        display: none;
    }
    
    .subphase{
        display: inherit;
        height:90vh;
    }

    .displayscore{
        right: 30%;
    }

    
    .tpanf{
        display: inherit;
    }
    
    .subf{
        display: none;
    }

    .tpanl{
        display: inherit;
        width: 80%;
    }
    
    .subl{
        display: none;
    }

    fplan{
        font-size: 0.5em;
    }

    loadsheet{
        transform: scale(1.2) translate(8%,4vh);
    }

    tpanel{
        height: 77vh;
        left:104%;
        top:12vh;
        padding-left: 5%;
        border-style: solid;
        border-color: black;
    }
    
    html{
        
        width:100vw;
        height:100vh;
        background-color:black;
        overflow:hidden;
    }
    body {
      background-color: none;
        overflow:hidden;
        display: block;
        position:absolute;
        width:100%;
        height:100%;
    }
    compreal {
        width:145mm;
        height:224.8mm;
        display: block;
        left:20%;
    }

    comp {
        display: block;
        position:relative;
        height: 84vh;
        width:max-content;
        left:-2%;
        
        top:10vh;
        float:left;
        box-shadow:none;
        background-color:rgba(0,0,0,0);
        border-color:rgba(1,1,1,0);
        border-radius:0vh;
    }

    
    scorepanel{
        width:53%;
        bottom: 2vh;
        right:99%;
        z-index: 20;
        border-radius: 2vh;
        height: 85vh;
        transition: right 2s;
        display: block;
    }



    #contents{
        background-color: #202020;
        border-style:groove;
        border-color: rgb(207, 207, 207);
        overflow-wrap:break-word;
        padding: 1vh;
        padding-left: 1%;
        text-align: left;
        font-family: 'Jagger', sans-serif;
        margin:0%;
        margin-top: 2vh;
        margin-right: 2%;
        position:relative;
        right:1%;
        height:80vh;
        border-radius: 1vh;
        overflow-y:auto;
        max-width: 20%;
        z-index: 5;
        position: sticky;
        bottom: 10vh;
    }

    #phaseout{
        width:fit-content;
        height:fit-content;
        max-height: 90%;
    }

    subpanel{
        
        overflow-wrap:break-word;
        color:white;
        font-family: 'Jagger', sans-serif;
        margin:0%;
        margin-top: 0.5vh;
        overflow-y: scroll;
        top:0.5vh;
        height:7vh;
        width:70%;
        padding:1%;
        padding-left:1%;
        left:1%;
        font-size:0.7rem;
        display:inline-flex;
        z-index:10;
        box-shadow:none;
        background-color:#090b0c;
        border-color: rgb(0, 0, 0);
        border-radius: 0%;
        position: fixed;
    
    }
    bigpbox{
        display:block;
        width:auto;
        height:auto;
        float:right;
        padding:1%;
        padding-bottom:0%;
        padding-right:3%;
        font-weight:bold;
        font-size: .9rem;
    }

    pbox{
        display:block;
        width:auto;
        float:right;
        height:1.4em;
        padding:1%;
        padding-bottom:0%;
        padding-right:3%;
        font-weight:bold;
        font-size: .9rem;
    }
    ul{
        padding-top: 0%;
        padding-bottom: 0%;
        margin-top: 1%;
    }
    
    #notscorecount{
        position:fixed;
        display:flex;
        width:max-content;
    } 
    #nottimer{
        position:fixed;
        display:flex;
        width:max-content;
        float:left;
        color:"red";
        top:9vh;
    }

    screenreal{
        height:34%; 
        width: 87mm;
        position:absolute; top:24%; left:47%; 
        transform: translate(-44mm,-48%);
        line-height: 1.25em;
        font-size: 2.25em;
        font-family: 'Courier New', Courier, monospace;
    }

    screen{
        height:max-content; 
        width:57%;
        position:absolute; top:24vh; left:47%; 
        transform: translate(-16.8vh,-18vh);
        font-size: 1.4rem;
        font-family: 'Courier New', Courier, monospace;
        line-height: 1.6rem;
    }

    

    statpanel{
        display: inline-block;
        height: 87%;
        width:50%;
        text-align: center;
        font-size: 2rem;
        margin-top: 0;
        padding: 0.4vh;
    }

    inDisplay{
        top:90%;
    }

    #keyFramereal{
        left:-3mm;
        width:160mm;
    }
    #keyFrame{
    }

    .pagebutton{
        font-size: 1.2em;
    }

    .titleelems{
        height: max-content;
        top:21vh;
    }

    .columndiv{
        position:absolute;
        width:100%;
        height:100%;
        left:-5%;
    }

    .phasesuccess{
        background-color: #197b00;
        overflow-y: hidden;
        height: 1.1rem;
    }
    
  }


@media only screen and (max-width: 600px) {
    body {
      background-color: lightblue;
    }
    comp {
        width:100vmin;
    }
  }