#menu .pure-menu-heading {
    font-size: 100%;
    padding: .5em .5em;
}
.header h2 {
    font-size: 1em;
}
.panel  {
    display: none;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    font-size: 80%;
    color: #999;
}
#menu .footer a {
    text-decoration: none;
    padding: 0px;
}
.content {
    margin: 0px;
}
.page {
    margin-top: 40px;
}
.pure-button {
    color: white;
    padding: 8px 8px;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.main-buttons {
    margin: 50px auto;
    text-align: center;
}
.main-buttons button {
    width: 100px;
    margin: 5px auto;
}
.button-update-password,
.button-update {
    background: #1f8dd6;
}
.button-reset,
.button-reconnect,
.button-ha-del,
.button-rfb-forget {
    background: rgb(202, 60, 60);
}
.button-upgrade {
    background: rgb(202, 60, 60);
    margin-left: 5px;
}
.button-upgrade-browse,
.button-ha-add,
.button-apikey {
    background: rgb(0, 202, 0);
    margin-left: 5px;
}
.button-add-network,
.button-rfb-learn {
    background: rgb(28, 184, 65);
}
.button-del-network {
    background: rgb(202, 60, 60);
}
.button-more-network,
.button-rfb-send {
    background: rgb(223, 117, 20);
}
.button-settings-backup,
.button-settings-restore {
    background: rgb(0, 202, 0);
}
.pure-g {
    margin-bottom: 20px;
}
legend {
    font-weight: bold;
}
.l-box {
    padding-right: 1px;
}
.pure-form input[type=text][disabled] {
    color: #777777;
}
div.hint {
    font-size: 80%;
    color: #ccc;
}
.break {
    margin-top: 5px;
}
#networks .pure-g {
    padding-bottom: 10px;
    margin-bottom: 5px;
    border-bottom: 2px dashed #e5e5e5;
}
#networks div.more {
    display: none;
}
.module {
    display: none;
}
.template {
    display: none;
}
input[name=upgrade] {
    display: none;
}
#upgrade-progress {
    display: none;
    width: 100%;
    height: 20px;
    margin-top: 10px;
}
.pure-form .center {
    margin: .5em 0 .2em;
}
.webmode {
    display: none;
}
#credentials {
    font-size: 200%;
    text-align: center;
    height: 100px;
    width: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -200px;
}

div.state {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding-top: 30px;
}

.state div {
    font-size: 80%;
}

.state span {
    font-size: 80%;
    font-weight: bold;
}

.right {
    text-align: right;
}

.slider {
    margin-top: 10px;
}
.slider .noUi-target {
    background: #D2D2D2;
}
.slider .noUi-connect {
	background: #FFFFFF;
}
.slider .noUi-tooltip {
    font-size: 10px;
    border: 0px;
    padding: 0px;
    margin-bottom: -4px;
}
#panel-rfb fieldset {
    margin: 10px 2px;
    padding: 20px;
}

#panel-rfb input {
    margin-right: 5px;
}

#panel-rfb label {
    padding-top: 5px;
}

#panel-rfb input {
    text-align: center;
}
