/* CSS */
body a.button-87, body button.button-87 {
    margin: 10px 0;
    padding: 8px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 0;
    display: inline-block;
    border: 0;
    font-weight: 500;
    font-size: 15px;
    box-shadow: 0 0 14px -7px #f09819;
    /*background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);*/
    /*background-image: linear-gradient(45deg, #EFAC42 0%, #FBA81A 51%, #EFAC42 100%);*/
    background: #5FAE45;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    text-decoration: none;
}

body a.button-87.btn-danger, body button.button-87.btn-danger{
    /*background-image: linear-gradient(45deg, #EA3344 0%, #CB444A 51%, #EFAC42 100%);*/
    /*background-image: linear-gradient(45deg, #1A7EB9 0%, #1A7EB9 51%, #1A7EB9 100%);*/
    background-image: linear-gradient(45deg, #5FAE45 0%, #5FAE45 51%, #5FAE45 100%);
}
body a.button-87.btn-primary, body button.button-87.btn-primary{
    background-image: linear-gradient(45deg, #5FAE45 0%, #5FAE45 51%, #5FAE45 100%);
}
body a.button-87.btn-secondary, body button.button-87.btn-secondary{
    background-image: linear-gradient(45deg, #1A7EB9 0%, #1A7EB9 51%, #1A7EB9 100%);
}

.hap-actions .button-87{width:100%; padding: 8px 10px;    border-width: 0 0 0 0;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.22);}

body a.button-87:hover, body button.button-87:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
    opacity : 0.85;
}

body a.button-87:active, body button.button-87:active {
    transform: scale(0.95);
}

.form-container{ max-width: 900px; margin: auto; }

.form-container label{font-weight:600;font-size:15px;}
.form-container #energy_rates label{line-height: 1.5em;font-weight: 500}
.tml-register-link{display: none;}

/* The alert message box */
.energy-alert {
    padding: 15px 20px;
    background-color: #f44336;
    color: white;
    margin-bottom: 10px;
    margin-top: 20px;
    border-radius: 10px;
    font-weight: 500;
}

.energy-alert.success {
    background-color: #04AA6D;
}

img.loading-gif {
    max-width: 40px;
    height: 100%;
    margin-left: 10px;
    display:none;;
}

.form-container button:disabled{opacity: 0.6;}
button:disabled + img.loading-gif, button[disabled] + img.loading-gif {display:block;}
.additional-details em{font-weight:500;}

body a.button-87.add-service{
    background: #5FAE45;
    border-style: solid;
    border-width: 0 0 0 0;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.22);
}

@media (max-width: 767px) {
    body table a.button-87,
    body table button.button-87{
        margin: 8px 0;
        padding: 8px 15px;
    }
}