f-node-form {
    h3 {
        margin-top: 10px;
    }

    .main-error {
        @extend .alert, .alert-danger;
    }

    .node-data, .contact-data, .node-position, .monitoring-data {
        @extend .well;
    }

    .hostname, .key, .mac, .nickname, .email, .coords, .monitoring {
        @extend .form-group;

        .feedback {
            @extend .help-block;
            color: $state-danger-text;
        }
    }

    .hostname, .mac, .nickname, .email {
        label::after {
            content: '*';
            font-size: $font-size-small;
            vertical-align: 0.2em;
        }
    }

    .monitoring {
        display: table;

        label {
            display: table-cell;
        }

        input {
            display: table-cell;

            width: 18px;
            height: 18px;

            margin: {
                top: 0;
                right: 10px;
            }
        }
    }

    .monitoring-icon {
        @extend .fa, .fa-heartbeat, .pull-left;

        font-size: 36px;
        color: $brand-primary;
    }

    .monitoring-active-info {
        @extend .alert-success;
    }

    .monitoring-confirmation-info {
        @extend .alert-info;
    }

    .monitoring-confirmation-pending-info {
        @extend .alert-warning;
    }

    .monitoring-active-info,
    .monitoring-confirmation-info,
    .monitoring-confirmation-pending-info {
        @extend .alert;

        display: table;

        .icon, .message {
            display: table-cell;
        }

        .icon {
            @extend .fa;

            font-size: 24px;
            padding-right: 15px;
        }
    }

    .monitoring-active-info {
        .icon {
            @extend .fa-heartbeat;
        }
    }

    .monitoring-confirmation-info,
    .monitoring-confirmation-pending-info {
        .icon {
            @extend .fa-exclamation-triangle;
        }
    }

    .coords input.has-coords {
        padding-right: 25px;
    }

    .reset-coords {
        @extend .fa, .fa-times;

        position: relative;
        float: right;

        top: -25px;
        right: 8px;

        cursor: pointer;
        color: $gray;
    }

    .map {
        width: 100%;
        height: 0;
        padding-bottom: 66%;
        margin-top: 5px;
        margin-bottom: 20px;

        &.map-hide-layers-control .leaflet-control-layers.leaflet-control {
            display: none;
        }

        // reset styling from bootstrap as it breaks the layer control
        .leaflet-control-layers {
            input {
                display: initial;
                border: initial;
                box-shadow: initial;
                width: initial;
                height: initial;
            }

            input, label {
                margin: initial;
                padding: initial;
            }
        }
    }

    .buttons {
        @extend .form-group, .clearfix;

        button {
            @extend .pull-right;
        }
    }

    .save {
        @extend .btn;

        margin-left: 5px;
    }

    &.new-node .save {
        @extend .btn-info;
    }

    &.update-node .save {
        @extend .btn-primary;
    }
}