src/app/pages/grid-measure-detail/grid-measure-detail.component.css

/*
******************************************************************************
* Copyright © 2018 PTA GmbH.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* 
*     http://www.eclipse.org/legal/epl-v10.html
* 
******************************************************************************
*/

#gridMeasureHeaderPanel {
    position: fixed;
    z-index: 800;
    margin-top: 60px;
    width: 100%;
    border-bottom: solid 4px #0080c0;
}

@media (max-width: 768px) {
    #gridMeasureHeaderPanel {
        position: relative;
        z-index: 0;
        margin-top: 140px;
    }
}

#gridMeasureMainPanel {
    margin-top: 350px;
    transition: margin-top 0.3s;
}
.mainPanelCollapsed{
    margin-top: 125px !important;
    transition: margin-top  0.8s;
}
@media (max-width: 768px) {
    #gridMeasureMainPanel {
        margin-top: 20px;
    }
}

#gridMeasureEmailPanel {
    margin-top: 20px;
}

#gridMeasureStatusChangePanel {
    margin-top: 20px;
}

.alert {
    margin: 5px;
}

div.panel-default {
    margin: 1px 1px;
}

.ng-valid[required],
.ng-valid.required {
    border-left: 5px solid #42A948;
    /* green */
}

.ng-invalid:not(form) {
    border-left: 5px solid #a94442;
    /* red */
}

.error {
    border-left: 5px solid #a94442;
}

.row {
    margin-top: 4px;
}

.dateRangePickerIcon:hover {
    cursor: pointer;
}

@media (min-width: 992px) {
    .col-md-6,
    .col-md-12 {
        display: inline-flex;
    }
}

@media (min-width: 992px) {
    .form-field-label {
        width: 100%;
        margin-right: 15px;
    }
}

@media (min-width: 992px) {
    .input-group .form-control {
        width: 100%;
    }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .input-group .form-control {
        width: 98.3%;
    }
}

@media (min-width: 992px) {
    textarea.form-control {
        width: 100%;
    }
}

@supports (-moz-appearance:none) {
    .input-group .form-control {
        width: 98.3%;
    }
}

.input-group input {
    z-index: 0;
}

#newSingleGridMeasureBtn {
    background-color: #f5f8fc;
    line-height: 275%;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

#newSingleGridMeasureBtn:hover {
    background-color: white;
}

#newSingleGridMeasureBtn:focus {
    outline: 0 !important;
}

#newSingleGridMeasureBtn:disabled {
    cursor: default;
    text-decoration: none;
    color: lightgrey;
    background-color: white;
}

.grid-measure-tabs {
    margin: 15px 0 0 -2px;
}

.grid-measure-tabs li a {
    color: black;
    background-color: #f5f8fc;
}

.grid-measure-tabs li.active a {
    background-color: white;
}

.grid-measure-tabs li a:hover {
    background-color: white;
    border-top-color: #ddd;
    border-right-color: #ddd;
}

.grid-measure-tabs .invalid-tab {
    border-left: 5px solid #a94442;
}

.grid-measure-tabs .valid-tab {
    border-left: 5px solid #42A948;
}