/*
 * Copyright (C) 2017 Hewlett Packard Enterprise Development LP
 * All Rights Reserved.
 *
 * The contents of this software are proprietary and confidential
 * to the Hewlett Packard Enterprise Development LP.  No part of this
 * program may be photocopied, reproduced, or translated into another
 * programming language without prior written consent of the
 * Hewlett Packard Enterprise Development LP.
 */

html, body, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: Roboto, sans-serif;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* We do this here so that the slide-out backgrounds are colored as well */
body { background-color: #eaeaea; }

/* Gets rid of the auto fill yellow background color.*/
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 100;*/
    /*src: url(fonts/Roboto/Roboto-Thin.ttf);*/
/*}*/

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 100;*/
    /*font-style: italic;*/
    /*src: url(fonts/Roboto/Roboto-ThinItalic.ttf);*/
/*}*/

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 300;*/
    /*src: url(fonts/Roboto/Roboto-Light.ttf);*/
/*}*/

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 300;*/
    /*font-style: italic;*/
    /*src: url(fonts/Roboto/Roboto-LightItalic.ttf);*/
/*}*/

@font-face {
    font-family: Roboto;
    font-weight: 400;
    src: url(fonts/Roboto/Roboto-Regular.ttf);
}

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 400;*/
    /*font-style: italic;*/
    /*src: url(fonts/Roboto/Roboto-Italic.ttf);*/
/*}*/

@font-face {
    font-family: Roboto;
    font-weight: 500;
    src: url(fonts/Roboto/Roboto-Medium.ttf);
}

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 500;*/
    /*font-style: italic;*/
    /*src: url(fonts/Roboto/Roboto-MediumItalic.ttf);*/
/*}*/

@font-face {
    font-family: Roboto;
    font-weight: 700;
    src: url(fonts/Roboto/Roboto-Bold.ttf);
}

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 700;*/
    /*font-style: italic;*/
    /*src: url(fonts/Roboto/Roboto-BoldItalic.ttf);*/
/*}*/

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 900;*/
    /*src: url(fonts/Roboto/Roboto-Black.ttf);*/
/*}*/

/*@font-face {*/
    /*font-family: Roboto;*/
    /*font-weight: 900;*/
    /*font-style: italic;*/
    /*src: url(fonts/Roboto/Roboto-BlackItalic.ttf);*/
/*}*/

@font-face {
    font-family: arubaUI;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/arubaUI.woff);
}

.arubaUI-icons {
    font-family: arubaUI, serif; /* provide generic default for warning */
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/*
Changes react-grid-layouts drag-n-drop panel from red to a grey diagonal line
pattern.
*/
.react-grid-item.react-grid-placeholder {
    background: url(
        data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAOklEQVQYV43MSwoAMAgD0eT+h7ZYaOlHo7N+DNHL2HAGgBWcyGcKbqTghTL4oQiG6IUpOqFEC5bI4QD8PAoKjIiEFQAAAABJRU5ErkJggg==
    ) repeat !important;
}

/*
Changes react-grid-layouts grid items to have curved edges and a shadow.
*/
.react-grid-item {
    box-shadow: 0 0 0 3px #cccccc;
}

/*
 Used to hide the react grid layout resize handle. Instead of setting each
 grid item to static, we hide the resize handle and disabled the grid items
 from being movable. This allowed us to work around the issue where each time
 we unlocked the grid layout, a remount was occurring on each grid item.
*/
#layout.page-locked .react-resizable-handle {
    visibility: hidden;
}
/*
 Give more highlight to grid items when in "unlocked" mode.
*/
#layout:not(.page-locked) .react-resizable-handle {
    background: url(
    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAOklEQVQoU43KSQ4AIAgDQPn/tf/V1ETjAoU5j7UCAN2yx8Qj40oynimMb3Kjl74YpSuqtGOWZqwkxgHi1RtZ24n8LQAAAABJRU5ErkJggg==
    ) no-repeat !important;
}
#layout:not(.page-locked) .react-grid-item {
    box-shadow: none !important;
    box-sizing: border-box;
    border: dashed 2px gray;
    cursor: move;
}

/*
There was a fix pending to allow styling of the auto-generated right icon
button. However, there is no progress. We set the class in layout.jsx for the
List component to "navigation" and override the SVG style here.
*/
.navigation button svg path { stroke: grey; fill: grey; }

/* Overrides row selection color for the react-data-grid */
#app .react-grid-Row .row-selected,
#app .react-grid-Row.row-selected {
    background-color: #FFE6CD;
}

/* Overrides filter header row for the react-data-grid */
#app .react-grid-Header .react-grid-HeaderRow:nth-child(2) .react-grid-HeaderCell {
    /* More transparent SECONDARY_BLUE from theme. */
    background-color: rgba(0, 72, 118, 0.1);
}

/*
 Used to perform rotation animations
 */
@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
@-webkit-keyframes rotation {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@-moz-keyframes rotation {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(359deg); }
}
@-o-keyframes rotation {
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(359deg); }
}
.fastRotate {
    animation: rotation 500ms infinite linear;
    -moz-animation: rotation 500ms infinite linear;
    -webkit-animation: rotation 500ms infinite linear;
    -o-animation: rotation 500ms infinite linear;
}
.normRotate {
    animation: rotation 2s infinite linear;
    -moz-animation: rotation 2s infinite linear;
    -webkit-animation: rotation 2s infinite linear;
    -o-animation: rotation 2s infinite linear;
}
.slowRotate {
    animation: rotation 4s infinite linear;
    -moz-animation: rotation 4s infinite linear;
    -webkit-animation: rotation 4s infinite linear;
    -o-animation: rotation 4s infinite linear;
}

/*
Overwriting the style of the react date-time picker component
used in MP Charts and Log Page.
*/

.form-control {
    width: 120px;
    text-align: center;
    cursor: pointer;
}

/*
CSS progress spinner, used instead of MUI spinner as a pure CSS spinner.
Prevents the spinner from freezing when REST calls flood the UI.
*/

.loader-container {
    z-index: 2000;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.loader {
    display: block;
    margin: 0px auto 8px auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #004876;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}