@font-face {
    font-family: "Orloj-Clock";
    src: url("Orloj-Ea9eW.woff2");
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



html, body {
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
    top: 0;
    bottom: 0;
    position: absolute;
    font-family:  Arial, Helvetica, sans-serif;
    overscroll-behavior-y: none;
}
body {
    position: relative;
    /*height: 100%;*/
    /*overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
    -webkit-user-select: none;*/
}
#main_wrapper {
    /*height: 100%;
    overflow: scroll;
    padding-left: 10px;*/
    margin: auto;
    width: 100%;
    /*-webkit-touch-callout: none;
    -webkit-user-select: none;*/
}
.main_logo_right {
    height: 66px;
    width: 66px;
    margin: 2px;
    float: right;
}
h1 {
    padding: 15px;
    float: left;
}
h2 {
    padding: 5px;
    text-align: center;
}
.full {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    text-align: center;
}
.nav_button {
    display: inline-block;
    min-width: 200px;
    width: 90%;
    padding: 5px 20px;
    margin: 10px;
    font-size: 24px;
    line-height: 1.5em;
    text-align: center;
    text-decoration: none;
    /*border: 1px dotted gray;*/
    border-radius: 12px;
    background-color: #5CB85C;
    color: white;
}
#button_nav_tab table {
    display: inline-block;
    flex-wrap: wrap;
    margin: 0 auto;
    /*width: 80%;
    display: inline-block;
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    empty-cells: show;*/
}
#button_nav_tab td {
    /*border: 1px solid lightgray;*/
    padding: 5px;
    width: 90px;
    height: 90px;
    min-width: 90px;
    min-height: 90px;
    max-width: 90px;
    max-height: 90px;
    /*-webkit-user-drag: none;*/
}
#button_nav_tab td a {
    display: inline-block;
    width: 100%;
    /*width: 60px;
    height: 60px;
    max-height: 60px;*/
    padding: 10px;
    cursor: pointer;
    text-align: center;
    border-radius: 12px;
    vertical-align: middle;
    /*border: 1px solid gray;*/
    background-color: #5CB85C;
}
.arrow {
    padding: 17px;
}
.nav_shape {
    fill: white;
}
div.col {
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    outline: 1px #efefef dotted;
    margin: 0;
    padding: 0;
}

#lowerbar {
    position: fixed;
    /*height: 120px;*/
    /*overflow: hidden;*/        /* Hiding overflow interferes with popup nav menu. */
    bottom: 0;
    width: 100%;
    z-index: 20;    /* Navbar should be in front of compass, distance markers, etc. */
}
.navbar {
    /*display: flex;
    justify-content: space-evenly;*/
    position: fixed;
    bottom: 0;
    background-color: #333;
    /*border: 1px solid #ccc;*/
    height: 48px;
    width: 100%;
}
.navpapa_btn, .navmama_btn {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 10px;
    border-right: 1px dotted white;
    text-decoration: none;
    font-size: 17px;
    cursor: pointer;
    /*transition: 0.3s;*/
}
.navpapa_btn {
    width: 25%;
}
.navmama_btn {
    width: 20%;
}
.navbar .active {
    background-color: #5CB85C;
    color: white;
}
.navbaby_btn {
    float: right;
    display: block;
    width: 70px;
    height: 100%;
    color: white;
    text-align: center;
    padding: 14px 5px;
    border-left: 1px dotted white;
    text-decoration: none;
    font-size: 17px;
}
#battery_icon {
    /* Position absolute makes it appear in iOS. */
    position: absolute;
    max-height: 45px;
    padding: 5px 0;
}
#navpopup {        /* navpopup is needed to position the content above the button */
    position: relative;
    /*display: inline-block;*/
}
#navPopBtn {
    font-size: 24px;
    padding: 7px 10px 10px 10px;
    cursor: pointer;
}
#subnav {            /* Subnav content is hidden by default. */
    /* boxtrigger class will handle display none and block */
    position: absolute;
    bottom: 10px;
    right: 0;
    background-color: #333;
    /*border: 1px dotted white;
    overflow: hidden;*/
    width: 30%;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 22;        /* Subnav should be in front of navbar. */
}
.subnav_btns {
    display: block;
    color: #f2f2f2;
    text-align: right;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-top: 1px dotted white;
    cursor: pointer;
}
.nav_tabcontent {
    display: none;
    overflow-y: auto;
    padding-bottom: 80px;
}
.control_tab, .control_btns {
    width: 300px;
}
.control_btns {
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    bottom: 0;
    background-color: #f0f0f0;
}
.control_btns button.active {
    background-color: Silver;
}
.control_tab {
    min-height: 420px;
    float: left;
    border: 1px solid #ccc;
    /*margin: 10px;*/
    text-align: center;
    position: relative;
}
.control_btns button {
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    background-color: #eaeaea;
}
.free_text {
    padding: 0 18px 18px 18px;
    float: left;
}
#joystick_nav_tab {
    display: none;
}
#live_compass_tab {
    display: none;
}
.nav_sublinks1 {
    display: block;
}
.nav_sublinks2 {
    display: none;
    max-width: 30%;
}
.nav_sublinks3 {
    display: none;
    max-width: 20%;
}
.nav_sublinks1:hover, .nav_sublinks2:hover, .nav_sublinks3:hover {
    background-color: LemonChiffon;
}
#messages {
    display: inline-block;
    color: red;
    padding: 0.5em;
    min-height: 36px;
    max-width: 50%;
}
#manual_controls_tab {
    max-width: 100%;
}


#progress_bar_body {
    margin: auto;
    margin-top: 60px;
    width: 50%;
    background-color: Gainsboro;
}
#progress_bar_meter {
    width: 1%;
    height: 30px;
    background-color: #5CB85C;
    text-align: center; /* To center text horizontally (if you want) */
    line-height: 30px; /* To center text vertically */
    color: white;
}

.faint_bkg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.6;
    border-top: 1px dotted black;
    z-index: -1;
}
#control_buttons {
    position: fixed;
    bottom: 48px;
}
#control_buttons a {
    display: inline-block;
    text-align: center;
}
#headlight_fill {
    fill: white;
}
.motor_graph {
    display: inline-block;
    width: 20px;
    height: 66px;
    /*margin: 2px;*/
    border: 1px solid gray;
    background-color: white;
    color: black;
    position: relative;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}
.motor_graph .value {
    width: 100%;
    height: 1%;
}
.motor_graph .upper {
    background-color: Tomato;  /* 5CB85C = green */
    position: absolute;
    bottom: 50%;
}
.motor_graph .lower {
    background-color: DodgerBlue;
    position: absolute;
    top: 50%;
}
#motor_speed {
    display: inline-block;
    /*width: 20px;
    height: 66px;*/
    color: black;
    position: relative;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    font: 30px "Orloj-Clock", "Lucida Console", "Courier New", monospace;
    /*font-weight: bold;*/
}

.square_icon_button, .square_text_button, .square_parts_button, .square_gear_shifter, .square_text1_button, .square_text2_button, .square_bigicon_button {
    display: inline-block;
    cursor: pointer;
    background-color: white;
    color: black;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}
.square_icon_button, .square_text_button, .square_parts_button, .square_gear_shifter {
    border-radius: 15px;
    border: 1px solid gray;
}
.square_text1_button, .square_text2_button {
    border-radius: 15px;
    background-color: transparent;
}
.square_text1_button {
    border-bottom: 1px solid gray;
}
.square_icon_button, .square_bigicon_button, .square_text_button, .square_parts_button, .square_gear_shifter {
    width: 66px;
    height: 66px;
    margin: 2px;
}
#stop_sign_border:hover {
    fill: yellow;
}
#stop_sign_color.active {
    fill: blue;
}
.square_text1_button {
    width: 64px;
    height: 44px;
    padding: 5px 0 0 0;
    font-size: 13px;
}
.square_text2_button {
    width: 64px;
    height: 20px;
    padding: 4px 0 0 0;
    font-size: 9px;
}
.square_icon_button {
    padding: 14px;
}
.square_text_button {
    padding: 16px 0 0 0;
    font-size: 13px;
}
.square_icon_button:hover, .square_text_button:hover, .square_gear_shifter:hover, .square_text1_button:hover, .square_text2_button:hover {
    background-color: LemonChiffon;
}
.square_gear_shifter {
    padding: 14px;
    font-size: 30px;
}
.square_gear_shifter.active, .square_text_button.active {
    background-color: orange;
}

.soft_text {
    color: darkgray;
    height: 3em;
    padding: 1em 0;
    text-align: center;
}



/*************** MAP NAVIGATION ******************/


#home_map_tab {
    display: block;
}
#home_map_grid {
    display: block;
    margin: 0 auto;
    position: relative;
    border: 2px black solid;
}

#home_map_grid::after {
    content: "";
    background-size: cover;
    opacity: 0.3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

#map_grid {
    width: 100%;
    height: 100%;
    border-spacing: 0;
    font-size: 0;
}

.node {
    display: block;
    float: left;
    /* 12x12 for home 12x12 squares,
    15' 3" (183" or 465cm) wide Newport West livingroom 
    465cm / 16 map squares = 12" */
    /* 20x20 for apt 8x8 squares */
    /* 15x15 for apt 12x12 squares */
    border: 1px dotted lightgray;
    font-size: 10px;
}
.node.start {
    background-color: #FF703F;
    border: 1px solid #FF703F;
}
.node.active {
    background-color: #FF703F;
    border: 1px solid #FF703F;
}
.node.goal, .node.finish {
    background-color: limegreen;
    border: 1px solid limegreen;
}
.node.path {
    background-color: greenyellow;
    border: 1px solid greenyellow;
}
.node.complete {
    background-color: deepskyblue;
    border: 1px solid deepskyblue;
}

.obstacle {
    /*background-color: yellow;
    opacity: 0.4;*/        /* yellow background for apt */
    border: none;
}



/************ DASHBOARD *************/


#dashboard_tab {
    display: none;
    position: relative;
}
#dashboard_helper {
    display: flex;
    position: relative;
    height: 360px;
    align-items: center;
    justify-content: center;
}
#fnToggleHilights {
    position: absolute;
    bottom: 50px;
    left: 0;
}
.red {
    fill: red;
}
.orange {
    fill: orange;
}
.yellow {
    fill: yellow;
}
.gray {
    fill: gray;
}


/************ SONAR *************/


#distance_map_tab {
    display: block;
    position: relative;
}
#dist_map_tab {
    position: relative;
}
#distance_helper {
    display: flex;
    position: relative;
    height: 360px;
    align-items: center;
    justify-content: center;
}

#car_overview {
    /* Position absolute makes it appear in iOS. */
    position: absolute;
    max-height: 100px;
    /*top: 35%;
    left: 128px;*/
}
.distValue, .wallValue {
    position: absolute;
}
.distTop { top: 0; }
.distBottom { bottom: 0; }
.distRight, .wallRight { right: 0; }
.distLeft, .wallLeft { left: 0; }
.distSide { top: 170px; }
.distMiddle {
    width: 100%;
    text-align: center;
}
.barrier {
    /*position: relative;
    left: 130px;*/
    width: 100px;
    height: 5px;
    border: 1px solid black;
    background-color: lightgray;
    /*border: 1px solid gray;
    background-color: lightgray;
    z-index: -1;*/
    transition: transform 0.3s;
}
.barrier_side {
    /*position: relative;
    left: 130px;*/
    width: 5px;
    height: 100px;
    border: 1px solid black;
    background-color: lightgray;
    /*border: 1px solid gray;
    background-color: lightgray;
    z-index: -1;*/
    transition: transform 0.3s;
}
.vl53_barrier {
    width: 100px;
    height: 5px;
    border: 1px solid black;
    background-color: yellow;
    transition: transform 0.3s;
}

.left { float: left; }
.wallTop { top: 35px; }
.wallBottom { bottom: 35px; }
/*.wallMiddle { left: 98px; }*/
.wallNegAngle { transform: rotate(-45deg); }    /* front left & back right */
.wallAngle { transform: rotate(45deg); }    /* front right & back left */
.wallSide { top: 120px; }


/********* VIDEO CAMERA & COMPASS ************/


#video_stream {
    display: flex;
    /*padding: 10px;*/
    height: 180px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
#video_stream img {
    /*max-height: 240px;
    max-width: 320px;*/
    max-height: 170px;
    max-width: 300px;
    /*width; 100%;*/
}
.compass-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
#mini_compass_nav {
    float: left;
    margin: 2px;
    width: 66px;
    height: 66px;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    border: 1px solid gray;
}
#mini_compass_nav table {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}
#mini_compass_nav td {
    border: 1px dotted lightgray;
    width: 33%;
}
.mini_compass:hover {
    background-color: LemonChiffon;
}

#compass-pin {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}

#vector-pin, #to-wall-vector-pin, #along-wall-vector-pin {
    position: absolute;
    top: 50px;
    right: 50px;
    bottom: 50px;
    left: 50px;
    transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}
#state-vector {
    position: absolute;
    bottom: 0;
    left: 30px;
    font-size: 22px;
    color: Plum;
}


/************ IMAGES *************/

#toggle_compass {
    /* Compass face. */
    display: inline-block;
    border-radius: 50%;
    background-size: 88%;
    width: 16em;
    height: 16em;
    position: relative;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 504 504"><path id="background_1_" fill="%230091E1" stroke="%23000000" stroke-width="0.7349" d="M468.3,251.9c0,119.4-97.4,216.3-217.6,216.3S33.1,371.3,33.1,251.9S130.5,35.6,250.7,35.6S468.3,132.5,468.3,251.9z" /><path fill="%23E5E5E5" stroke="%23000000" stroke-width="0.6752" stroke-opacity="0.4652" d="M251.9,6.6C116.5,6.6,6.6,116.5,6.6,252S116.5,497.4,252,497.4S497.4,387.5,497.4,252S387.4,6.6,251.9,6.6z M251.5,475.1 c-123.6,0-223.7-99.5-223.7-222.2S128,30.7,251.5,30.7s223.7,99.4,223.8,222.2C475.3,375.6,375.1,475.1,251.5,475.1z" /><path id="inner_ring" fill="none" stroke="%23CCCCCC" stroke-width="10.9715" d="M475.3,252.9 c0,122.7-100.2,222.2-223.8,222.2S27.8,375.6,27.8,252.9S128,30.7,251.5,30.7S475.2,130.1,475.3,252.9 C475.3,252.8,475.3,252.9,475.3,252.9z" /><path id="star" fill="%2328FFFF" fill-opacity="8.695649e-02" stroke="%23FFFFFF" stroke-width="1.955" stroke-opacity="0.4609" d="M252.6,99.6l-21.3,102l-54.5-24.5l24.6,54.7l-102,20.5l102,21.3l-24.5,54.5l54.7-24.6l20.5,102l21.3-101.9l54.5,24.5l-24.7-54.7 l102-20.5l-102-21.3l24.5-54.5L273,201.7L252.6,99.6L252.6,99.6z M251.9,210.7c22.6,0,41,18.3,41,41c0,22.6-18.3,41-41,41 s-41-18.3-41-41S229.3,210.7,251.9,210.7z" /><g id="NW" transform="matrix(0.781983,0,0,0.781983,395.67899,-51.234295)"> <path id="path1057" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.281" stroke-miterlimit="1.1696" d="M-377,191.8l27.7,27.3l0,0l0,0" /> <polygon fill="%23FFFFFF" points="-358.2,234.2 -355.5,231.2 -344.5,233.5 -352.1,227.5 -349.8,225 -338.7,233.7 -341.4,236.7 -352.4,234.4 -344.8,240.4 -347.1,242.9 " /> <polygon fill="%23FFFFFF" points="-348.2,223.3 -345.9,220.7 -336.2,225.3 -342.6,217.2 -340.3,214.7 -330.6,219.2 -337,211.1 -334.7,208.6 -325.8,219.7 -328.6,222.8 -338.8,218 -332,226.5 -334.9,229.5 " /> <path id="NW_arrow" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.3168" stroke-miterlimit="2.446" d="M-365.5,203l-17.5-4.9l13-12.8L-365.5,203z" /></g><g id="West" transform="matrix(0.781983,0,0,0.781983,-139.56411,-47.793995)"> <path id="path1042" fill="%230081F6" stroke="%23FFFFFF" stroke-width="0.4206" stroke-miterlimit="1.4957" stroke-opacity="0.7216" d="M289,383.1c0,16.8-13.6,30.4-30.4,30.4s-30.4-13.6-30.4-30.4s13.6-30.4,30.4-30.4C275.3,352.6,289,366.3,289,383.1z" /> <polygon fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.4206" stroke-miterlimit="1.4957" points="239.8,371 246.3,371 250.8,388.6 255.3,371 261.8,371 266.3,388.6 270.9,371 277.3,371 271.1,395.2 263.3,395.2 258.5,376.8 253.8,395.2 246,395.2" /></g><g id="SW" transform="matrix(0.781983,0,0,0.781983,37.998569,-13.727065)"> <path id="path1059" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.281" stroke-miterlimit="1.1696" d="M79.4,534.2l26.6-28.3l0,0l0,0" /> <path fill="%23FFFFFF" d="M114,508.8l2.2-2c0.3,0.8,0.7,1.4,1.1,2.1c0.4,0.6,0.9,1.1,1.3,1.6c0.6,0.6,1.2,0.9,1.7,1.1 c0.5,0.1,0.9,0,1.3-0.3c0.3-0.3,0.4-0.5,0.3-0.9c-0.1-0.3-0.3-0.8-0.7-1.4l-0.9-1.3c-0.9-1.3-1.4-2.3-1.4-3.2s0.4-1.7,1.3-2.5 c1.1-1.1,2.3-1.5,3.5-1.4s2.5,0.8,3.9,2.1c0.7,0.6,1.3,1.3,1.8,2s1,1.5,1.4,2.3l-2.2,2.1c-0.3-0.9-0.7-1.8-1.1-2.5 s-0.9-1.4-1.5-1.9s-1.1-0.9-1.6-1s-0.9,0-1.3,0.3c-0.3,0.3-0.5,0.6-0.4,1c0,0.4,0.3,0.9,0.8,1.6l0.8,1.2c0.8,1.2,1.2,2.2,1.2,3.1 s-0.4,1.7-1.2,2.5c-1,1-2.1,1.4-3.4,1.3c-1.2-0.1-2.4-0.7-3.7-1.9c-0.6-0.5-1.1-1.1-1.6-1.7C114.9,510.2,114.4,509.5,114,508.8z" /> <polygon fill="%23FFFFFF" points="111.5,507.1 108.9,504.8 114.6,496.2 105.4,501.5 102.8,499.1 108.5,490.6 99.3,495.9 96.7,493.5 109.4,486.2 112.5,489 106.6,498 116.3,492.5 119.3,495.3 " /> <path id="SW_arrow" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.3168" stroke-miterlimit="2.446" d="M85.8,540.1l-13-12.8l17.5-4.9L85.8,540.1z" /></g><g id="South" transform="matrix(0.781983,0,0,0.781983,-139.56411,-47.793995)"> <path id="path1044" fill="%230081F6" stroke="%23FFFFFF" stroke-width="0.4206" stroke-miterlimit="1.4957" stroke-opacity="0.7216" d="M532.7,625.2c0,16.8-13.6,30.4-30.4,30.4c-16.8,0-30.4-13.6-30.4-30.4c0-16.8,13.6-30.4,30.4-30.4 C519,594.8,532.7,608.4,532.7,625.2z" /> <path fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.4206" stroke-miterlimit="1.4957" d="M509.9,615.1v4.6 c-1.3-0.5-2.5-0.9-3.8-1.2c-1.2-0.3-2.4-0.4-3.5-0.4c-1.4,0-2.5,0.2-3.2,0.5c-0.7,0.4-1,0.9-1,1.7c0,0.6,0.2,1,0.7,1.3 s1.3,0.6,2.5,0.8l2.6,0.5c2.6,0.5,4.4,1.2,5.5,2.2s1.6,2.4,1.6,4.2c0,2.4-0.8,4.1-2.3,5.3s-3.9,1.7-7,1.7c-1.5,0-3-0.1-4.5-0.4 c-1.5-0.3-3-0.6-4.5-1.2V630c1.5,0.7,2.9,1.3,4.3,1.7s2.7,0.6,4,0.6s2.3-0.2,3-0.6c0.7-0.4,1-1,1-1.7s-0.2-1.2-0.7-1.6 s-1.4-0.7-2.8-1l-2.3-0.5c-2.3-0.5-4-1.2-5.1-2.2s-1.6-2.4-1.6-4.1c0-2.1,0.8-3.8,2.3-4.9c1.5-1.2,3.7-1.7,6.5-1.7 c1.3,0,2.6,0.1,4,0.3C507.1,614.5,508.5,614.7,509.9,615.1z" /></g><g id="SE" transform="matrix(0.781983,0,0,0.781983,37.998569,-13.727065)"> <path id="path1058" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.281" stroke-miterlimit="1.1696" d="M440.5,506.6l27.7,27.3l0,0l0,0" /> <path fill="%23FFFFFF" d="M441,500.9l-2.1-2.1c0.8-0.3,1.6-0.6,2.3-1c0.7-0.4,1.3-0.8,1.7-1.2c0.6-0.6,1-1.1,1.2-1.5 c0.1-0.4,0-0.8-0.3-1.2c-0.3-0.3-0.6-0.4-0.9-0.3c-0.4,0-0.9,0.3-1.5,0.6L440,495c-1.4,0.8-2.6,1.2-3.5,1.2c-1,0-1.9-0.4-2.7-1.2 c-1.1-1.1-1.6-2.2-1.5-3.3s0.9-2.3,2.3-3.6c0.7-0.6,1.4-1.1,2.2-1.6c0.8-0.5,1.6-0.9,2.6-1.3l2.2,2.1c-1,0.3-1.9,0.6-2.7,1 c-0.8,0.4-1.5,0.8-2.1,1.4c-0.6,0.5-0.9,1-1.1,1.5c-0.1,0.5,0,0.9,0.3,1.2s0.7,0.4,1.1,0.4s1-0.3,1.7-0.7l1.3-0.7 c1.3-0.7,2.4-1.1,3.3-1.1c1,0,1.8,0.4,2.6,1.2c1,1,1.4,2,1.3,3.1s-0.8,2.2-2.1,3.4c-0.6,0.5-1.2,1-1.9,1.5 C442.6,500,441.8,500.5,441,500.9z" /> <polygon fill="%23FFFFFF" points="438.2,503.9 430.9,510.4 429,508.5 433.6,504.4 431.7,502.6 427.3,506.5 425.4,504.6 429.7,500.7 427.4,498.5 422.6,502.7 420.7,500.8 428.1,494.2 " /> <path id="SE_arrow" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.3168" stroke-miterlimit="2.446" d="M474.4,527.1l-12.8,13l-4.9-17.5L474.4,527.1z" /></g><g id="East" transform="matrix(0.781983,0,0,0.781983,-139.56411,-47.793995)"> <path id="path1043" fill="%230081F6" stroke="%23FFFFFF" stroke-width="0.4206" stroke-miterlimit="1.4957" stroke-opacity="0.7216" d="M772.3,384.2c0,16.8-13.6,30.4-30.4,30.4s-30.4-13.6-30.4-30.4s13.6-30.4,30.4-30.4S772.3,367.4,772.3,384.2z" /> <polygon fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.4206" stroke-miterlimit="1.4957" points="733.5,373.5 749.8,373.5 749.8,377.7 739.6,377.7 739.6,381.7 749.2,381.7 749.2,385.9 739.6,385.9 739.6,390.8 750.1,390.8 750.1,395 733.5,395 " /></g><g id="NE" transform="matrix(0.781983,0,0,0.781983,394.13379,-51.325195)"> <path id="path1060" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.281" stroke-miterlimit="1.1696" d="M-15.1,220.7l27.4-27.6l0,0l0,0" /> <polygon fill="%23FFFFFF" points="-26.1,215.9 -23.2,218.6 -26.4,228.6 -19.4,222.1 -16.9,224.4 -27.1,233.9 -30.1,231.2 -26.8,221.2 -33.9,227.8 -36.4,225.4 " /> <polygon fill="%23FFFFFF" points="-14.3,226.8 -7.1,233.4 -9.1,235.2 -13.6,231.1 -15.5,232.9 -11.2,236.8 -13.3,238.6 -17.5,234.7 -19.9,236.9 -15.2,241.2 -17.2,243.1 -24.5,236.3 " /> <path id="NE_arrow" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.3168" stroke-miterlimit="2.446" d="M18.6,199.9L1,204.5l4.9-17.6L18.6,199.9z" /></g><g id="North" transform="matrix(0.781983,0,0,0.781983,-139.56411,-47.793995)"> <path id="path1802" fill="%230081F6" stroke="%23FFFFFF" stroke-width="0.4206" stroke-miterlimit="1.4957" stroke-opacity="0.7217" d="M532.7,141.9c0,16.8-13.6,30.4-30.4,30.4c-16.8,0-30.4-13.6-30.4-30.4s13.6-30.4,30.4-30.4C519,111.5,532.7,125.1,532.7,141.9z" /> <polygon fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="0.4206" stroke-miterlimit="1.4957" points="491.8,131.1 498.5,131.1 507,145.9 507,131.1 512.7,131.1 512.7,152.7 506,152.7 497.5,137.9 497.5,152.7 491.8,152.7" /></g></svg>') no-repeat center;
}

#orange-pin {
    background-size: 88%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    z-index: 8;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 504 504"><path id="path2335" fill="%23D50000" stroke="%23000000" stroke-width="0.15" stroke-opacity="0.4565" d="M251.4,67.1v184h13.8 L251.4,67.1" /><path id="path2336" fill="%23FF8700" stroke="%23000000" stroke-width="0.15" stroke-opacity="0.4565" d="M251.4,67.1v184h-13.9 L251.4,67.1" /><path id="path2341" fill="%23AEAEAE" stroke="%23000000" stroke-width="0.15" stroke-opacity="0.4549" d="M251.3,435.4l0.1-184.3h13.8 L251.3,435.4" /><path id="path2342" fill="%236E6E6E" stroke="%23000000" stroke-width="0.15" stroke-opacity="0.4549" d="M251.3,435.4l0.1-184.3h-13.9 L251.3,435.4" /><path id="path2345" fill="%23BABABA" stroke="%232D2D2D" stroke-width="0.36" d="M264.6,251.1c0,7.3-6,13.2-13.3,13.2s-13.2-6-13.2-13.3 l0,0c0-7.3,6-13.2,13.3-13.2C258.7,237.9,264.6,243.8,264.6,251.1L264.6,251.1z" /><path id="path2348" fill="%23FFFFFF" d="M254.5,251.1c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1l0,0c0-1.7,1.4-3.1,3.1-3.1 C253.1,247.9,254.6,249.3,254.5,251.1L254.5,251.1z" /></svg>') no-repeat center;
}
#green-pin {
    background-size: 88%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    z-index: -1;
    background: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve"><polygon fill="%235CB85C" stroke="%23000000" stroke-width="0.15" stroke-opacity="0.4565" points="199.4,15.1 185.5,199.1 199.4,199.1 213.2,199.1 "/><path id="path2345" fill="%23BABABA" stroke="%232D2D2D" stroke-width="0.36" d="M212.6,199.1c0,7.3-6,13.2-13.3,13.2s-13.2-6-13.2-13.3l0,0c0-7.3,6-13.2,13.3-13.2C206.7,185.9,212.6,191.8,212.6,199.1L212.6,199.1z"/><path id="path2348" fill="%23FFFFFF" d="M202.5,199.1c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1l0,0c0-1.7,1.4-3.1,3.1-3.1C201.1,195.9,202.6,197.3,202.5,199.1L202.5,199.1z"/></svg>') no-repeat center;
}
#black-arrow {
    background-size: 88%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0;
    transform-origin: 50% 100%;
    z-index: -1;
    background: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve"><line fill="none" stroke="%23000000" stroke-width="2" x1="199.4" y1="199.1" x2="199.4" y2="103.2"/><path id="path2345" fill="%23BABABA" stroke="%232D2D2D" stroke-width="0.36" d="M212.6,199.1c0,7.3-6,13.2-13.3,13.2s-13.2-6-13.2-13.3l0,0c0-7.3,6-13.2,13.3-13.2C206.7,185.9,212.6,191.8,212.6,199.1L212.6,199.1z"/><path id="path2348" fill="%23FFFFFF" d="M202.5,199.1c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1l0,0c0-1.7,1.4-3.1,3.1-3.1C201.1,195.9,202.6,197.3,202.5,199.1L202.5,199.1z"/><g><polygon points="207.5,109.8 206.1,111.2 199.4,104 192.6,111.2 191.2,109.8 199.4,101 "/></g></svg>') no-repeat center;
}
#blue-arrow {
    background-size: 88%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    z-index: -1;
    background: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve"><path id="path2345" fill="%23BABABA" stroke="%232D2D2D" stroke-width="0.36" d="M212.6,199.1c0,7.3-6,13.2-13.3,13.2s-13.2-6-13.2-13.3l0,0c0-7.3,6-13.2,13.3-13.2C206.7,185.9,212.6,191.8,212.6,199.1L212.6,199.1z"/><path id="path2348" fill="%23FFFFFF" d="M202.5,199.1c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1l0,0c0-1.7,1.4-3.1,3.1-3.1C201.1,195.9,202.6,197.3,202.5,199.1L202.5,199.1z"/><line fill="none" stroke="%230700D0" stroke-width="2" x1="199.4" y1="103.2" x2="295.2" y2="103.2"/><g><polygon fill="%230700D0" points="288.6,111.4 287.2,110 294.5,103.2 287.2,96.5 288.6,95 297.5,103.2 "/></g></svg>') no-repeat center;
}




/************ NAV & CAM JOYSTICKS *************/


#camcontainer {
    display: block;
    /*min-height: 300px;*/
    touch-action: none;
    overflow: hidden;
    /*-webkit-user-drag: none;*/
}
#camservos {
    height: 180px;
    width: 180px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    background: url('data:image/svg+xml,<svg version="1.1" fill="purple" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 228.9 228.9" enable-background="new 0 0 228.9 228.9" xml:space="preserve"><path d="M178.2,225.2c-42.5,3.8-84.9,3.8-127.4,0c-22.9-2.3-44.7-24.1-47-47C0,135.7,0,93.3,3.8,50.8c2.3-22.9,24.1-44.7,47-47C93.3,0,135.7,0,178.2,3.8c22.9,2.3,44.7,24.1,47,47c3.8,42.5,3.8,84.9,0,127.4C223,201,201.1,222.9,178.2,225.2z" /></svg>') no-repeat center;
}

#camservo_dot {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    background-color: pink;
    cursor: pointer;
    /*touch-action: none;
    user-select: none;*/
}

#navcontainer {
    display: block;
    min-height: 300px;
    touch-action: none;
    overflow: hidden;
    /*-webkit-user-drag: none;*/
}
#navjoystick {
    /*position: absolute;
    display: block;*/
    height: 300px;
    width: 300px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    background: url('data:image/svg+xml,<svg version="1.1" fill="limegreen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 228.9 228.9" enable-background="new 0 0 228.9 228.9" xml:space="preserve"><path d="M178.2,225.2c-42.5,3.8-84.9,3.8-127.4,0c-22.9-2.3-44.7-24.1-47-47C0,135.7,0,93.3,3.8,50.8c2.3-22.9,24.1-44.7,47-47C93.3,0,135.7,0,178.2,3.8c22.9,2.3,44.7,24.1,47,47c3.8,42.5,3.8,84.9,0,127.4C223,201,201.1,222.9,178.2,225.2z" /></svg>') no-repeat center;
}
#joystick_dot {
    /*top: 130px;   /* container height (300) / 2 - dot height (40) / 2 /
    left: 130px;
    z-index: 10;*/
    height: 40px;
    width: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    background: white;
    cursor: pointer;
    /*user-select: none;*/
}


/************** MORE INFO **************/


code {
    /* Setting code to display block allows padding to apply to more than just the first line of text. */
    /*display: block;
    padding-left: 1em;*/
    padding-right: 2em;
    font: 16px "Courier New", monospace;
}

#more_info_tab, #serial_console_tab {
    width: 100%;
}

.invisible {
    display: none;
}

label.info_accordion {
    display: block;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: 1px solid gray;
    outline: none;
    font-size: 17px;
    transition: ease 0.5s;
}
label.info_accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}
label.info_accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}
div.info_accordion {
    padding: 0 18px;
    background-color: white;
    border: 1px solid gray;
    transition: max-height 0.2s ease-out;
}
input + div.boxtrigger {
    display: none;
}
input:checked + div.boxtrigger {
    display: block;
}
.info_accordion table, #serial_console_tab table {
    border-collapse: collapse;
    empty-cells: show;
    margin: 10px;
}
.info_accordion td {
    vertical-align: top;
}
.info_accordion pre {
    width: 100%;
    word-wrap: normal;
    white-space: pre-wrap;
}
#console_main_col {
    display: flex;
    flex-wrap: wrap;
    float: left;
    max-width: calc(100% - 260px)
}
#serial_console_tab table {
    min-width: 200px;
    /*max-height: 30px;*/
}
#console_right_col {
    float: right;
    width: 250px;
    max-width: 250px;
}
#offset_values, #ib_command {
    padding: 5px 10px;
}
#offset_values input {
    padding: 5px 10px;
    margin-right: 12px;
}
#save_offsets, #send_ib_cmd, #refresh_log {
    border: none;
    color: black;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
#rpi_table {
    max-width: 250px;
}
#message_table {
    max-width: 400px;
}
#web_log {
    width: 100%;
    max-width: 800px;
}
#console_input {
    display: flex;
}
.info_accordion table th, #serial_console_tab table th {
    border: 1px solid lightgray;
    padding: 0.5em;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    background-color: Gainsboro;
    height: 30px;
    /*max-height: 30px;*/
}
.info_accordion table td {
    border: 1px solid lightgray;
    padding: 0.5em;
    font-size: 13px;
    text-align: left;
}
#serial_console_tab table {
    background-color: white;
}
#serial_console_tab table td {
    min-width: 40px;
    height: 30px;
    border: 1px solid lightgray;
    padding: 0.5em;
    font-size: 13px;
    /*word-break: break-word;*/
}
#ib_table td, #mm_table td {
    text-align: right;
}
#pi_table td {
    text-align: left;
}
#status_table td {
    text-transform: capitalize;
}
.nostyle {
    font-weight: normal;
    text-decoration: none;
}
.bordered_box {
    margin: 20px;
    padding: 20px;
    border: 1px solid lightgray;
}
/* Dropdown Button */
.info_dropbtn {
    background-size: 88%;
    margin: 2px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    border: none;
    background: url('data:image/svg+xml,<svg version="1.1" id="info_button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve"><path class="info_bubble" fill="darkgray" d="M365.2,304.8c-0.6-2.2-0.4-4.2,1.4-7.1c16.8-28.7,26.5-62,26.5-97.7C393.1,93.4,306.6,6.9,200,6.9S6.9,93.4,6.9,200S93.4,393.1,200,393.1c36.5,0,70.7-10.1,99.8-27.7c2.9-1,5.7-1.2,9.2-0.2l75.9,20.4c1.5,0.5,2-0.3,1.4-2.1L365.2,304.8z"/><polygon fill="%23FDFDFD" class="info_i" points="224.7,157.6 224.7,266.2 242.6,266.2 242.6,302.4 158.4,302.4 158.4,266.4 176.2,266.4 176.2,193.8 158.4,193.8 158.4,157.6 "/><path fill="%23FDFDFD" class="info_i" d="M224.7,120.8c0.1,13.2-10.6,24.2-24,24.4c-13,0.2-24.2-10.8-24.3-24.1c-0.1-13.3,10.6-24.2,24-24.4C213.4,96.5,224.6,107.6,224.7,120.8z"/></svg>') no-repeat center;
}
/* The container <div> - needed to position the dropdown content */
.info_dropdown {
    position: relative;
    display: inline-block;
    /*padding: 5px 20px;*/
    margin: 4px 2px;
    top: -5px;
    font-size: 16px;
}
/* Dropdown Content (Hidden by Default) */
.info_content {
    display: none;
    position: absolute;
    background-color: PapayaWhip;
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 30px;
}
/* Show the dropdown menu (use JS to add this class to the .info-content container when the user clicks on the dropdown button) */
.show { display:block; }


/************** CLOSING CSS *******************/



@media screen and (max-width: 610px) {
    .control_tab, .control_btns {
        width: 100%;        /* iPod Touch width is 320px. */
    }
    .nav_sublinks1, .nav_sublinks2 {
        display: none;
    }
    .nav_sublinks3 {
        display: block;
    }
    #toggle_hilights {
        bottom: 44px;
    }
}


@media screen and (min-width: 611px) and (max-width: 910px) {
    .nav_sublinks1, .nav_sublinks3 {
        display: none;
    }
    .nav_sublinks2 {
        display: block;
    }
    #toggle_hilights {
        bottom: 44px;
    }
}

@media screen and (max-width: 800px) {
    #console_main_col {
        display: block;
        float: none;
        max-width: 100%;
    }
    #console_right_col {
        display: flex;
        float: none;
    }
}