* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    background-color:#FFF;
    background-image:linear-gradient(top, #FFF 0%, #DDD 80%, #FFF 100%);
    background-image:-webkit-linear-gradient(top, #FFF 0%, #DDD 80%, #FFF 100%);
    background-image:-ms-linear-gradient(top, #FFF 0%, #DDD 80%, #FFF 100%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #FFF ),
        color-stop(0.8, #CCC )
        color-stop(1, #FFF )
        );
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
}

.shadow-primary {
    text-shadow: 0 0 5px #007bff;
}

.shadow-secondary {
    text-shadow: 0 0 5px #6c757d;
}

.shadow-success {
    text-shadow: 0 0 5px #28a745;
}

.shadow-warning {
    text-shadow: 0 0 5px #ffc107;
}

.shadow-danger {
    text-shadow: 0 0 5px #dc3545;
}

.shadow-info {
    text-shadow: 0 0 5px #17a2b8;
}

.shadow-dark {
    text-shadow: 0 0 5px #343a40;
}

.shadow-light {
    text-shadow: 0 0 5px #f8f9fa;
}

.table-small td {
    font-size: 10px;
    padding: .25rem;
}

/* Portrait layout (default) */
.hiddenDiv {
    display:none;
}

#content {
    position:absolute;
    left:0%;
    top:0%;
    height:100%;
    width:100%;
    padding:0px;
    margin:0px;
}

.panel, .panel-body {
    padding:0px!important;
    margin:0px!important;
}

.splash {
    position:absolute;
    left:0%;
    top:0%;
    height:100%;
    width:100%;
    padding:0px!important;
    margin:0px!important;
    background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-shadow: 0 0 2px #666;
}

.splash img {
    width:100%;
}

h1 {
    position:relative;             /* position in the center of the screen */
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    float: left;	
}

h1 span {
    font-size:small;
}

#radiodisplay h4, #radiodisplay h6 {
    color: #fff;
    text-shadow: 0 0 3px #000;
}

#main {
    position: relative;
    align-items: flex-start;
    height:100%;
    max-height:100%;
    overflow:auto;
    overflow-x: hidden;
    -ms-overflow-x: hidden;
}

#main strong {
    color: #369;
    font-weight: normal;
}

#radiobuttons i {
    border: 1px solid #BCE;
    padding: 8px;
    margin-bottom: -10px;
    border-radius: 20px;
    color: #EFF;
}

#smenu {
    z-index: 1;
    top:0;
}

#radiodisplay1, #radiodisplay2 {
    z-index: 2000;
}


.marquee {
    overflow: hidden;
    position: relative;
    height: 3rem;
}
.marquee span {
    white-space: nowrap;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);	
    transform:translateX(100%);
    /* Apply animation to this element */	
    -moz-animation: marquee 10s linear infinite;
    -webkit-animation: marquee 10s linear infinite;
    animation: marquee 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes marquee {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes marquee {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-200%); }
}
@keyframes marquee {
    0%   { 
        -moz-transform: translateX(100%); /* Firefox bug fix */
        -webkit-transform: translateX(100%); /* Firefox bug fix */
        transform: translateX(100%); 		
    }
    100% { 
        -moz-transform: translateX(-200%); /* Firefox bug fix */
        -webkit-transform: translateX(-200%); /* Firefox bug fix */
        transform: translateX(-200%); 
    }
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
        /* offset horizontal: half of image width and text area width */
    }
}

.z-500 {
    z-index: 500;
}

.z-1000 {
    z-index: 1000;
}
.z-1500 {
    z-index: 1500;
}

.z-2000 {
    z-index: 2000;
}
.z-2500 {
    z-index: 2500;
}

.z-3000 {
    z-index: 3000;
}
.z-3500 {
    z-index: 3500;
}

.z-4000 {
    z-index: 4000;
}
.z-4500 {
    z-index: 4500;
}

.z-5000 {
    z-index: 5000;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

.embed-responsive-phone {
    padding-bottom: 155%!important;
}
@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

.gly-spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(359deg);
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
    }
}
@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}


.meters .fa-heartbeat { color:#F00 }
.meters .fa-utensils { color:#BCD }
.meters .fa-beer { color:#FC0 }
.meters .fa-bed { color:#FFF }
.meters .fa-tachometer-alt { color:#68C }
.meters .fa-flask { color:#430 }
.meters .fa-cogs { color:#BCC }
.meters .fa-puzzle-piece { color:#A6C }
.meters .fa-battery-empty { color:#C68 }
.meters .fa-battery-quarter { color:#CA6 }
.meters .fa-battery-half { color:#6CA }
.meters .fa-battery-three-quarters { color:#6CA }
.meters .fa-battery-full { color:#6CA }
.meters .fa-boxes { color:#BA7 }
.meters .fa-money-bill-alt { color:#8B6 }
.meters .fa-gem { color:#DAE }
.meters .fa-map { color:#FFF }
.meters .fa-cloud { color:#BCD }
.meters .fa-wifi { color:#68C }
.panel-top { position: absolute; top: 0; width: 100% }
.panel-top .col-xs-2 { padding: 0 10px}
.panel-top .col-xs-4, .panel-top .col-xs-8 { padding: 0}
.panel-bottom { position: absolute; bottom: 0; width: 100%; margin-bottom: 0 }
.panel-bottom .col-xs-3 { padding: 0}
.panel-main { position: absolute; bottom: 55px; top: 115px; overflow:auto; width: 100%; margin: 0 5px } 
.login { width:80%; margin: 10%!important; padding: 10px!important;}
#loginform .btn-lg { padding:0 }
.embed-responsive-4by3 {
    padding-bottom: 75%!important;
}

.w900 strong { font-weight: 900!important}

.bga0 {
    background-color: transparent;
}

.bga50-primary {
    background-color: rgba(0, 123, 255, 0.5);
}
.bga50-secondary {
    background-color: rgba(108, 117, 125, 0.5);
}
.bga50-success {
    background-color: rgba(40, 167, 69, 0.5);
}
.bga50-danger {
    background-color: rgba(220, 53, 69, 0.5);
}
.bga50-warning {
    background-color: rgba(255, 193, 7, 0.5);
}
.bga50-info {
    background-color: rgba(23, 162, 184, 0.5);
}
.bga50-light {
    background-color: rgba(248, 249, 250, 0.5);
}
.bga50-dark {
    background-color: rgba(52, 58, 64, 0.5);
}

input[type="checkbox"] {
    opacity: 0;
    display: none;
}

input[type="checkbox"]+label::before{
    content: "\f0c8";
    font-family: "Font Awesome 5 Free";
    font-size: 14pt;
    float: left;
    margin-right: 5px;
}

input[type="checkbox"]:checked+label::before{
    content: "\f14a";
    font-family: "Font Awesome 5 Free";    
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bold {
    font-weight: bold;
}