@metersImageSize: 60px;
@borderColor: #bdbec0;
.meterRead {
    &__top {
        display: inline-block;
    }
    &__fields {
        padding-top: 20px;
    }
    &__economy7 {
        padding-top: 0;
    }
}

.meterTop {
    display: inline-block;
    &__icon {
        float: left;
        .cls-1{
          fill: @brand-primary;
        }
        height: @metersImageSize;
    }
    &__title {
        float: left;
        margin-left: 10px;
        padding-top: @metersImageSize/4;
        h4 {
            color: @brand-primary;
            margin-bottom: 0;
            margin-top: 0;
        }
    }
}

.meterFields {
    &__date {
        vertical-align: top;
        display: inline-block;
        padding-right: 20px;
        width: 40%;
        icon {
            color: @brand-primary;
        }
    }
    &__reading {
        display: inline-block;
        width: 60%;
    }
}

.economy7Field {
    input {
        padding-left: 42px;
    }
}

.economy7FieldAddOn {
    padding: 0;
    &__icon {
        font-size: 14px;
        padding-left: 12px;
        padding-right: 6px;
        padding-top: 15px;
        float: left;
    }
    &__divider {
        display: inline-block;
        color: @borderColor;
    }
}

.howToRead {
     .round-borders(3px);
        border: 1px solid #bdbec0;
        background-color: #fafafa;
        padding: 15px;
    margin-bottom: 20px;

    &__button {
        color: @brand-primary;
        text-align: center;
        cursor: pointer;
    }
    &__arrow{
        display:inline-block;
        .transition(all cubic-bezier(0.62, 0.23, 0.29, 1.54) 0.5s);
        .rotate(0deg);
        &--opened {
            .rotate(180deg);
        }
    }
    &__contents {
        overflow: hidden;
        max-height: 800px;
        &.ng-hide-add,
        &.ng-hide-remove {
              .transition(all linear 0.5s);
        }
        &.ng-hide {
            max-height: 0;
        }
    }
}

.meterInstruction {

    padding-top:15px;
    padding-bottom: 10px;
    border-bottom:1px solid #cccccc;


    &:last-child{
        border-bottom: none;
        padding-bottom:0;
    }

    &__title {
        width:95%;
        cursor:pointer;
        color: #666666;
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0px;
    }
    &__openButton {
        cursor:pointer;
        color: #666666;
        float: right;
        overflow: hidden;

        .transition(all cubic-bezier(0.62, 0.23, 0.29, 1.54) 0.5s);
        .rotate(0deg);
        &--opened {
            .rotate(180deg);
        }
    }
    &__content {
        overflow: hidden;
        max-height: 800px;
        &.ng-hide-add,
        &.ng-hide-remove {
            .transition(all linear 0.5s);
        }
        &.ng-hide {
            max-height: 0;
        }
    }
    &__imageContainer{
        display:inline-block;
        width:225px;
        margin-top:15px;
        margin-right: 15px;
        img {
            max-width: 100%;
            height: auto;
        }
        h6{
            font-weight: 400;
            margin-top:5px;
            margin-bottom: 5px;
        }
        strong{
            color:#2F2F2F;
            font-weight: 400;
        }
        &--dial{
            width: 100%;
        }
    }

    p {
        margin-top: 10px;
    }
    &__numbers {
        margin-right: 10px;
        float: left;
        display: inline-block;
        padding-bottom: 10px;
    }
    &__subtitle {
        color: @brand-primary;
        clear: both;
        margin-bottom: 0;
    }
}