/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */


/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    left: 0;
}

 .gm-style-iw button:focus {
     outline: 0;
 }
.container-full {
    margin: 0 auto;
    width: 100%;
    position: fixed;
}

.box{
    width: 100%;
    height: 90%;
    position: fixed;
    opacity: 0.8;  /* for demo purpose  */
}
.h-90{

    height: 90%;
}
.h-10{

    height: 10%;
}

.big-checkbox

{

    width: 20px;
    height: 20px;}

.info-box{

    background: #EBEBEB;
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #888888;
    opacity: 0.8;  /* for demo purpose  */
    position: fixed;
}
.full-width-div {
    position: fixed;
    width: 100%;
    left: 0;
}

.menu-box{
    display: inline-block;
    align-content: center;
    position: fixed;
    background:#EBEBEB;
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #888888;
    opacity: 0.8;  /* for demo purpose  */
}
@media all and (max-width: 480px) {
    /* put your css styles in here */

.narrow{

    width:6%; !important;

    margin-left: 5px;
}
}

@media all and (min-width: 481px) {
    /* put your css styles in here */

    .narrow{

        width:6%; !important;


    }
}
#control_panel{

    background-color: rgba(1, 1, 24, 0.25);

}
.top-menu {

    top: calc(1%);
  left: calc(40%);


}
.bottom-menu {

    bottom: calc(1%);
    left: calc(5%);


}
.hidden{ display: none; }

.red{

    color:blue;
}
.float-col{

    float:right;
    align-content: flex-end;
}
.col-3{
    align-content: flex-start;
    text-align: left;

}
.spinner-box{

    position:absolute;
    top: calc(50% - 100px);
    left: calc(50% - 150px);


    width: 300px;
    height: 300px;
}
.padding-top-25{

    padding-top:25px;
}
.padding-left-0{

    padding-left:0px !important;
}
.padding-left-5{

    padding-left:5px !important;
}
.stack-top{
    position: fixed;
    z-index: 9;

}
.chart-row {

}
.align{
    display: inherit;
    margin: 0;
    padding: 0px;
    vertical-align: center;
    horiz-align:left;

}
.align-mid{
    display: inherit;
    margin: 0;
    padding-left: 35%;
    vertical-align: center !important;
    horiz-align:center !important;

}
.align-left-mid{

    padding-top: 0px !important;
    padding-left:8px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    vertical-align: center;


}
.chart-align-left{

    display: inherit;

    margin-left: 2px;
    padding: 0px;
    align-content: start;
    horiz-align: left;
    font-size: 10px;
}
.font-size{

    font-size: 18px;
}
.chart-align{

    display: inherit;

    margin-left: 15px;
    padding: 0px;
    align-content: center;
    horiz-align: center;
    font-size: 10px;
}
#spinner {
    display: none;
}
#trackplot {

}
#spinnervid{

    z-index: 20;
}

#iframe_stream1{
    left:0%;
    top:0%;



    position: absolute;
    z-index: 10;
    z-index: 10;
}
#stream1 {
    left:0%;
    top:0%;



    position: absolute;
    z-index: 10;

    text-align: center;


    align-content: center;


}

#stream2 {
    left:50%;
    top:0%;

    position: absolute;
    z-index: 10;

    text-align: center;


    align-content: center;


}

#player {
    left:70%;
    top:50%;
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    z-index: 10;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #2196F3;

    align-content: center;


}
#dashboard {

    bottom: calc(5%);
    left: calc(5%);
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    z-index: 10;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #2196F3;

    align-content: center;


}

#video1{

    z-index: 11;
}
#videoplayer{

    left:65%;
    top:50%;
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    z-index: 11;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #2196F3;

    align-content: center;

}

#dashboardheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}
#aft {
    height: 100%;
    width: 100%;
}
#rpm
{height: 100%;
    width: 100%;}
#speed{
    height: 10%;
    width: 10%;
}
.progress-frame{

    border: 1px solid #d3d3d3;
    width: 100%;
    margin-left: 5px;
    padding-left: 0px;
    vertical-align: center;
}
.progess {

    width: 0%;
    height: 20px;
    padding-top: 5px;
    padding-left: 0px;
    vertical-align: middle;
    background-color: #04AA6D;
    text-align: center;
    vert-align: middle;
    font-size:10px;
    color: white;
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #04AA6D;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #04AA6D;
    cursor: pointer;
}

video, input {
    display: block;
}

input {
    width: 100%;
}

.info {
    background-color: aqua;
}

.error {
    background-color: red;
    color: white;
}