/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 30px;
    line-height: 30px; /* Vertically center the text there */
    background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
    padding: 56px 0px 0;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

code {
    font-size: 80%;
}


.tab-content>.tab-pane
{
    padding:15px;
}

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

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.nav-link.active
{
    background-color: lightblue !important;
}

#sortable,#sortable2 { list-style-type: none; margin: 0; padding: 0; }
#sortable li,#sortable2 li { margin: 0 3px 3px 3px; padding: 0.4em; font-size: 1.4em; }
#sortable li span,#sortable2 li span { position: absolute; margin-left: -1.3em; }

#log td {
    padding: 0px !important;
}
.table-responsive {
    display: table;
}

.wifi.connected{
    background-image: url(../img/wifi_green.png);
}
.wifi{
    background-image: url(../img/wifi_red.png);
    height: 40px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.bluetooth.connected{
    background-image: url(../img/bluetooth_green.png);
}
.bluetooth{
    background-image: url(../img/bluetooth_red.png);
    height: 40px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.active > .config{
    background-image: url(../img/config_white.png);
}
.config{
    background-image: url(../img/config_blue.png);
    height: 40px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.active>.drive{
    background-image: url(../img/car_white.png);   
}
.drive{
    background-image: url(../img/car_blue.png);
    height: 40px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.active>.logtab{
    background-image: url(../img/log_white.png);
}
.logtab{
    background-image: url(../img/log_blue.png);
    height: 40px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.fa-chevron-circle-left{
    background-image: url(../img/left_black.png);
    height: 40px;
    width:40px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.fa-chevron-circle-right{
    background-image: url(../img/right_black.png);
    height: 40px;
    width:40px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.fa-chevron-circle-up{
    background-image: url(../img/up_black.png);
    height: 40px;
    width:40px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.fa-chevron-circle-down{
    background-image: url(../img/down_black.png);
    height: 40px;
    width:40px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.fa-stop-circle{
    background-image: url(../img/stop.png);
    height: 40px;
    width:40px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}