html,
body {
    height: 100%;
}


.custom-background {
    background: linear-gradient(17deg, rgb(84, 200, 227), rgb(37, 106, 202)) !important;
    /* background: linear-gradient(17deg, #2bb32b, rgb(0 0 0)) !important; */

}

.custom-background-dark {
    background: linear-gradient(17deg, rgb(0 0 0), rgb(52 52 52)) !important
}

.custom-background-panel {
    background: linear-gradient(17deg, rgb(0 0 0), rgb(0 92 135)) !important
}

.custom-background-success {
    background: linear-gradient(17deg, rgb(0 0 0), rgb(0, 187, 16)) !important
}

.custom-background-panel-offline {
    background: linear-gradient(17deg, rgb(34 34 34), rgb(80 0 0)) !important
}

input[type=number] {
    -moz-appearance: textfield !important;

}

.boogaloo  {
  font-family: "Boogaloo", sans-serif;
  font-weight: 400;
  font-style: normal;
}



input {
    text-align: center;
}
.custom-badge-medium {
    font-size: 9pt;
    padding: 13px;
    margin:2px;
}

.custom-badge-large {
    font-size: 11pt;
    padding: 15px;
    margin:2px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


ul.app-nav::before {
    border-bottom: 0px;
}

.uk-tab .uk-active>a {
    color: white !important;
    border-color: rgb(15, 160, 205) !important;
}

#app-body {
    min-height: 250px;
    /*
        background: url('image/app-bg.jpg') no-repeat;
        background-size: cover;
        background-position: bottom center;
    */
}

.custom-switch {
    margin-top: 15px;
    border-radius: 100%;
    background: linear-gradient(17deg, rgb(0 0 0), rgb(0 97 36)) !important;
    background: linear-gradient(17deg, rgb(171 171 171), rgb(172 255 203)) !important;
    width: 50px;
    height: 50px;
    box-shadow: inset -1px 9px 15px rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, .5);
    text-align: center;
    font-size: 12px;
}

.custom-switch>i {
    text-shadow: 2px black;
}

.custom-switch-hold {
    border-radius: 0%;
}

.pointerdown {
    border: 3px solid #2bb32b;
}


@keyframes switch {
    0% {
        opacity: 1;
        background: linear-gradient(17deg, rgb(43 179 43), rgb(0 0 0));
    }


    50% {
        background: linear-gradient(17deg, rgb(43 179 43), rgb(0 0 0));
        rotate: 360deg;
        opacity: 0;
        border-radius: 0% !important;
        scale: 15;
    }

    100% {
        background: linear-gradient(0deg, rgb(84, 200, 227), rgb(37, 106, 202));
        rotate: 0deg;
        opacity: 1;
        scale: 1;


    }
}

.custom-switch.pending {
    animation-name: switch;
    animation-duration: 5s;
}

[data-message] [uk-icon]:first-of-type {
    padding-left: 0px;
}

[data-message] [uk-icon] {
    padding: 5px;
}

[data-name] {
    color: white;

}

@keyframes wifistable {
    0% {
        opacity: .1;
    }

    25% {
        opacity: .1;
    }

    50% {
        opacity: .1;
    }

    80% {
        opacity: .4;
    }

    90% {
        opacity: .8;
    }

    95% {
        opacity: .4;
    }

    100% {
        opacity: 0;
    }
}

.wifi-stable {
    animation-name: wifistable;
    animation-timing-function: linear;
    opacity: .1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    float: left;
}