body{
    background-color: antiquewhite;
    width: 70%;
    display: block;
    margin: auto;
}
h1{
    text-align: center;
    border: 1px solid crimson;
    background-color: black;
    color: antiquewhite;
    padding: 10px;
}
#Wrapper{
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows:repeat(13,100px) ;
    grid-gap: 5px;

}

.sideBoxL{
    grid-column: 1/2;
    border: 1px solid black;
    background-color: rgba(34, 72, 51, 0.7);
}
.sideBoxR{
    grid-column: 3/4;
    border: 1px solid black;
    background-color: rgba(34, 72, 51, 0.7);
}
.allBox{
    grid-column: 2/3;
    border: black 1px solid;
    background-color: cadetblue;
}
#carrage-A{
    width: 45%;
    height: 90%;
    background-color: #d9dfda;
    border: darkblue;
    display: block;
    margin-left: 53%;
    margin-right: auto;
    margin-top: -10px;
    box-shadow: 3px 3px 5px grey;
    border-top : 1px red solid;
    border-bottom : 1px red solid;
    border-left : 1px red solid;
}
#carrage-B{
     width: 45%;
     height: 90%;
     background-color: #d9dfda;
     border: darkblue;
     display: block;
     margin-left: 2%;
     margin-right: auto;
     margin-top: -10px;
     box-shadow: 3px 3px 5px grey;
    border-top : 1px red solid;
    border-bottom : 1px red solid;
    border-right : 1px red solid;
 }

.deadEnd{
    grid-column: 1/4;
    background-color: black;
    color: azure;
    padding: 10px;
}
#btn10L,#btn09L,#btn09LUp,#btnPush10L,#btnPush09L,
#btnPush08L,#btn08LUp,#btn08L,#btnPush07L,#btn07LUp,#btn07L,
#btnPush06L,#btn06LUp,#btn06L,#btnPush05L,#btn05LUp,#btn05L,
#btnPush04L,#btn04LUp,#btn04L,#btnPush03L,#btn03LUp,#btn03L,
#btnPush02L,#btn02LUp,#btn02L,#btnPush01L,#btn01LUp,#btn01L,
#btnPush00L,#btn00LUp,#btn00L,#btnPush-1L,#btn-1LUp,#btn-1L,#btnPush09R,
#reset {
    width: 35%;
    height: 30%;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 5px #3f3f3f;
    background-color: rgba(145, 165, 248, 0.65);
    color: azure;
}
button:hover  {
    color: red;
}
#reset11{
    width: 35%;
    height: 30%;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 5px #3f3f3f;
    background-color: rgba(145, 165, 248, 0.65);
    color: azure;
}
#emergency{
    width: 45%;
    height: 30%;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 5px #3f3f3f;
    background-color: rgba(226, 16, 38, 0.35);
    color: azure;
    text-align: center;
    font-size: 0.80rem;
}
#emergency11{
    width: 45%;
    height: 30%;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 5px #3f3f3f;
    background-color: rgba(226, 16, 38, 0.35);
    color: azure;
    text-align: center;
    font-size: 0.80rem;
}
/*#btn08L{
    border-radius: 35%;
    width: 3.0rem;
    height: 2.5rem;
}*/

select{
    margin: 10px 10px 10px 5px;
    width: 35%;
    height: 30%;
    background-color: blanchedalmond;
    box-shadow: inset 1px 1px 3px #4c4c4c;
}
#s10L,#s09L,#s08L,#s07L,#s06L,#s05L,#s04L,#s03L,#s02L,#s01L,#s00L,#s-1L{
    padding: 5px;
    color: #afe2af;
}

#i1{
    padding: 5px;
    font-size:1.6em;
    float: right;
}
#i2{
    padding: 5px;
    font-size:1.6em;
    display: inline;
    float: left;
    position: relative;
    top: -93px;
    margin-left: 2px;
}
#gate{
    display: inline-block;
    width: 2%;
    height: 100%;
    //border: 1px solid cornflowerblue;
    background-color: crimson;
    position: absolute;

}



#last, #last11{
    display: inline-block;
    margin: 3%;
    border: black 1px solid;

    width: 75%;
    position: relative;
    top: 0px;
    background-color: #f3efb4;
}
#last11{
    margin-right: 3%;
    margin-left: 20%;
}

#select09left,#select09right{
    margin-left: 10px;
    width: 38%;
}
#gate11{
    display: inline-block;
    width: 2%;
    height: 100%;
    border: 1px solid cornflowerblue;
    background-color: crimson;
    position: absolute;
    margin-right: 2%;
    margin-left: 98%;
}
#btn10R,#btn09R,#btn09RUp,#btnPush10R,#btnPush09R,
#btnPush08R,#btn08RUp,#btn08R,#btnPush07R,#btn07RUp,#btn07R,
#btnPush06R,#btn06RUp,#btn06R,#btnPush05R,#btn05RUp,#btn05R,
#btnPush04R,#btn04RUp,#btn04R,#btnPush03R,#btn03RUp,#btn03R,
#btnPush02R,#btn02RUp,#btn02R,#btnPush01R,#btn01RUp,#btn01R,
#btnPush00R,#btn00RUp,#btn00R,#btnPush-1R,#btn-1RUp,#btn-1R,#btnPush09R,
#reset11{
    width: 35%;
    height: 30%;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 5px #3f3f3f;
    background-color: rgba(145, 165, 248, 0.65);
    color: azure;
}
#s10R,#s09R,#s08R,#s07R,#s06R,#s05R,#s04R,#s03R,#s02R,#s01R,#s00R,#s-1R{
    padding: 5px;
    color: #afe2af;
}
#setMode{
    width: 99%;
    height: auto;
    background-color: #d9dfda;
    padding: 10px;

}
#manual,#auto{
    display: inline;
    margin: 10px;
}
#play{
    width: 10%;
    height: 30px;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
}
#txtBox{
    width: 10%;
    height: 30px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
}
#totalCount{
    margin-left: 5px;
    color: darksalmon;
    margin-right: 5px;
    display: inline;
}
#timeElapsedA,#timeElapsedB{
    width: 5%;
    font-size: 1.2rem;
    display: inline;
    margin-left: 10px;
}
label{
    font-size: 1.0rem;
    color: #dde7eb;
    margin-top: 5px;
}
#lblB,#lblA,#passengerC{
    color: crimson;
    padding: 5px;
}
em{
    color: #4c33aa;
}
#nav2,#nav1{
    margin-top: 2px;
    display: block;
    width: 100%;
    background-color: #d9dfda;
    margin-left: auto;margin-right: auto;
    /*border: 1px solid #294de9;*/
    align-items: center;
   text-align: center;
}
#nav2{
    background-color: #2c2721;
    border: black 1px solid;
    border-radius:15px;
}

@media only screen and (max-width: 320px) {

    body {
        font-size: 0.5em;
    }

}
@media only screen and (max-width: 420px) {

    body {
        font-size: 1em;
    }

}