Added dashed borders to layer options elements while dragging to visually clarify the correct drop locations.

//
// Copyright 2014 Next Century Corporation
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

* {
    outline: 0 none !important;
}

a {
    color: @accent-bright;

    .glyphicon {
        color: @mid-text-color;
    }
}

a:focus, a:hover {
    color: @accent-bright;
}

html {
    color: @main-text-color;
    width: 100vw;
    overflow-x:hidden;

    body{
        background-color: @main-background;
        font-family: "Open Sans", Helvetica, arial, sans-serif;
    }

    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6 {
        font-family: "Open Sans", Helvetica, arial, sans-serif;
        color: @main-text-color;

    }
}

.bold {
    font-weight: bold;
}

.btn {
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    padding: 6px 16px;
    text-transform: uppercase;
    color: @button-color;
    background-color: @button-background-color;
    border: @button-border;
    border-radius: @border-radius;

    &:hover, &:focus, &:active, &.active {
        background-color: @button-hover-background-color;
        color: @button-hover-color;
        border: @button-hover-border;
    }

    &.active {
        background-color: @button-active-background-color;
        color: @button-active-color;
        border: @button-active-border;
    }

    &.disabled, &[disabled] {
        background-color: @button-background-color;
        border: @button-border;
        border-radius: @border-radius;
    }

    .btn-danger{
        background-color: @error-color;
        border-color: @error-dark-color;

        &:hover, &:focus, &:active, &.active {
            background-color: @error-dark-color;
            border-color: @error-dark-color;
        }
    }

    &.btn-default {
        background-color: @button-background-color;
        border: @button-border;
        border-radius: @border-radius;

        &.active {
            background-color: @button-active-background-color;
            color: @button-active-color;
            border: @button-active-border;
        }

        &:hover, &:focus, &:active, &.active {
            background-color: @button-hover-background-color;
            color: @button-hover-color;
            border: @button-hover-border;
        }

        &.disabled, &[disabled] {
            background-color: @button-background-color;
            border: @button-border;
            border-radius: @border-radius;
        }
    }

    .glyphicon {
       font-size: 14px;
       top: 2px;
    }
}

.btn-group {
    .btn{
        padding: 6px 12px;
        color: @button-color;
    }
}

.centered {
    text-align: center;
}

.options-menu {
    > a {
        background-color: transparent;
        border: none;
        font-size: 16px;
        padding: 0;

        .text, .glyphicon, .caret {
            color: @accent-bright;
        }

        &.collapsed {
            .text, .glyphicon, .caret {
                color: @main-text-color;
            }
        }

        &.active, &:active, &:focus, &:hover {
            background: transparent;
            border: none;
            box-shadow: none;

            .text, .glyphicon, .caret {
                color: @accent-bright;
            }
        }

        .text {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .glyphicon {
            margin-left: 5px;
        }
    }

    .btn-group{
        display: block;
    }

    .collapsing{
        position: absolute;
        display: block;
    }

    .glyphicon {
        font-size: inherit;
    }

    .popover{
        left: auto;
        right: -10px;
        top: 25px;
        margin-top: 0;
        /* Set the width so that the timeline date granularity buttons fit on one row. */
        min-width: 320px;

        background: none;
        padding: 10px;
        border: 0;
        border-radius: 2px;
        box-shadow: none;

        > .arrow {
            left: auto;
            right: 20px;
            top: 0;
        }

        .popover-content {
            background-color: @visualization-box-background;
            overflow: auto;
            padding: 15px 15px 0;
            border: @shadow-border;
            border-radius: @border-radius;
            box-shadow: 0 5px 10px @shadow;

            label {
                color: @main-text-color;
            }

            .btn-group, .input-group-btn {
                label {
                    color: @button-color;
                }
            }

            .form-control[disabled] {
                background-color: @light-background;
            }

            .glyphicon {
                top: 1.5px;
            }
        }
    }
}

.container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.disabled {
    cursor: default;
    opacity: .65;

    &:hover, &:focus {
        cursor: default;
    }
}

.gridster {
    margin-top: 5px;
    margin-bottom: 5px;

    .gridster-item-resizable-handler {
        z-index: 1060;

        &.handle-e {
            width: 5px;
        }

        &.handle-w {
            width: 5px;
        }

        &.handle-s {
            height: 5px;
        }
    }
}

.text-container {
    min-height: 20px;
    margin-bottom: 5px;

    &.shrink {
        height: 0px;
        min-height: 0px;
    }

    h4 {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .header {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .text {
        color: @main-text-color;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.33;
        text-transform: uppercase;
    }
}

.headers-container {
    min-height: 35px;

    .filter-reset {
        border: @main-border;
        line-height: 18px;
        margin-left: 5px;
        padding: 5px;

        .filter-label {
            color: @main-text-color;
            display: inline-block;
            max-width: 100px;
            overflow: hidden;
            position: relative;
            text-overflow: ellipsis;
            top: 2px;
            white-space: nowrap;
        }

        .glyphicon {
            color: @mid-text-color;
            font-size: 16px;

            &:hover {
                cursor: pointer;
            }
        }
    }

    /* Overwrite default legend styling. */
    .dropdown-legend {
        background-color: @visualization-box-background;
        border: @main-border;
        border-radius: 4px;
        position: absolute;

        &.open {
            min-width: 175px;
        }

        .divider {
            height: 1px;
            margin: 0 0 9px 0;
            overflow: hidden;
            background-color: @border-color;
        }

        .legend-toggle {
            padding: 5px;
        }

        .legend-details {
            overflow: auto;

            .legend-layer {
                margin-bottom: 10px;

                .legend-title {
                    cursor: pointer;
                    position: relative;
                    padding: 5px;

                    .text {
                        margin-right: 25px;
                        font-size: 14px;
                    }

                    .glyphicon {
                        color: @main-text-color;
                        position: absolute;
                        right: 5px;
                        top: 50%;
                        transform: translate(0, -50%);
                    }
                }

                .node-title {
                    color: @main-text-color;
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 1.33;
                    text-transform: uppercase;
                    margin-left: 20px;
                }

                .legend-item {
                    border: @main-border;
                    border-radius: 5px;
                    cursor: pointer;
                    display: block;
                    font-size: 12px;
                    margin-left: 20px;
                    margin-right: 5px;
                    margin-top: 0px;
                    opacity: .8;
                    padding: 3px;

                    &.legend-hidden{
                        color: @main-text-color;

                        .legend-icon{
                            background: #e1e1e1 !important;
                        }
                    }
                }
            }
        }

        .text {
            cursor: pointer;

            .glyphicon {
                line-height: normal;
            }
        }
    }
}

.highlight {
    background-color: @callout;
}

.highlight-red {
    background-color: rgba(255, 0, 0, 0.5);
}

.modal-backdrop{
    background: none;
    z-index: auto;
}

.neon-well {
    border: @main-border;
    border-radius: 4px;
    margin: 0px 0px 15px;
    padding: 4px;
    background-color: @visualization-box-background;

    &.neon-well-dark {
        background-color: @main-background;
    }

    .inner-group {
        margin-left: 20px;
    }

    .toggled-group {
        margin-top: 15px;
    }
}

.no-margin {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.visualization-well{
    background-color: @visualization-box-background;
    box-shadow: 0 1px 4px @shadow;
    border: @visualization-border;
    border-radius: @visualization-border-radius;
    margin: 0px;
    padding: 20px;
    position: relative;

    > h1, > h2, > h3, > h4{
        margin-top: 0;
        margin-bottom: 30px;
    }
}

.input-group-none {
    font-style: italic;
    color: @main-text-color;
    opacity: .65;
}

.neon-datetimepicker {
    .dropdown-menu {
        overflow: auto;
        padding: 10px;

        .table-responsive {
            display: inline-block;
            font-size: 12px;
            padding: 4px 5px;
            /* Reduce the datetimepicker width because of the reduced font size. */
            width: 250px;
            /* Set the datetimepicker height because the year and month views are shorter by default and cause unwanted empty space. */
            height: 250px;

            .table {
                th {
                    padding: 6px;
                    width: 34px;
                    height: 30px;

                    &.left, &.right, &.switch {
                        background-color: transparent;

                        &:hover {
                            background-color: transparent;
                            color: @accent-bright;
                        }
                    }
                }

                td {
                    padding: 6px;
                    width: 34px;
                    height: 30px;

                    &.day {
                        &.active {
                            color: @light-text-color;
                            background: @accent-bright;

                            &:hover {
                                color: @light-text-color;
                                background: @accent-bright;
                            }
                        }

                        &:hover {
                            color: @accent-bright;
                            background-color: transparent;
                        }
                    }

                    .month, .year {
                        border-radius: @border-radius;
                        background-color: transparent;

                        &:hover {
                            background-color: transparent;
                            color: @accent-bright;
                        }

                        &.active {
                            background-color: @button-active-background-color;
                            color: @button-active-color;
                            border: @button-active-border;
                            background-image: none;

                            &:hover {
                                background-color: @button-hover-background-color;
                                color: @button-hover-color;
                                border: @button-hover-border;
                                background-image: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

.error-label {
    color: @error-text-color;
    margin: 10px 0px 0px;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu {
    background-color: @visualization-box-background;
    color: @main-text-color;
    border: @shadow-border;
    border-radius: @border-radius;

    li {
        a {
            color: @main-text-color;

            &:hover {
                background-color: @mid-background;
                color: @main-text-color;
            }
        }

        button {
            margin: 5px 20px;
        }
    }

    .active {
        a {
            background-color: @accent-bright;
            color: @light-text-color;

            &:hover, &:focus {
                background-color: @accent-bright;
            }
        }
    }

    .unselectable {
        color: @main-text-color;
        cursor: default;

        &:hover {
            background-color: @visualization-box-background;
            color: @main-text-color;
        }
    }
}

.legend {
    .legend-item {
        display: inline-block;
        margin-top: 5px;
        padding-right: 5px;

        .legend-icon {
            border-radius: 2px;
            display: inline-block;
            height: 1em;
            vertical-align: middle;
            width: 1em;
        }

        .legend-text {
            display: inline-block;
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            color: @main-text-color;
        }
    }
}

.navbar {
    margin-bottom: 0;

    .navbar-default{
        background-color: @visualization-box-background;
        border: 0;
        box-shadow: 0 1px 2px @shadow;
        z-index: auto;
        top: 0;
        width: 100%;
        z-index: 1040;
        //Disable transform used in Bootstrap 3.2.0 Affix plugin.  This hides any modals that are defined
        // inside the nav and breaks the database-overlay .
        transform: none;
        -webkit-transform: none;

        .navbar-indented {
            margin: 5px 40px;
            width: auto;
        }

        .navbar-nav {
            float: left;
            margin: 0;

            > li {
                float: left;

                > a{
                    margin-right: 40px;
                    color: @accent-bright;
                    border-bottom: 2px solid @accent-bright;
                    padding: 15px 0 13px;

                    @media (max-width: 767px) {
                        margin-right: 30px;
                    }

                    &.collapsed, &.collapsed:focus{
                        background: none;
                        color: @main-text-color;
                        border: 0;
                        padding-bottom: 15px;
                    }

                    &:focus, &:hover, &.collapsed:hover{
                        color: @accent-bright;
                    }
                }
            }

            > .dropdown {
                > .primary{
                    border: 0;
                    background-color: @accent-bright;
                    color: @light-text-color;
                    padding: 15px 30px;
                    font-weight: bold;

                    &:hover, &:focus{
                        background-color: @accent-dark;
                        color: @light-text-color;
                    }
                }
            }

            .open {
                .dropdown-menu {
                    @media (max-width: 767px) {
                        position: absolute;
                        float: left;
                        width: auto;
                        margin: 2px 0 0;
                        background-color: @light-background;
                        border: @main-border;
                        border: @shadow-border;
                        -webkit-box-shadow: 0 6px 12px @shadow;
                        box-shadow: 0 6px 12px @shadow;
                    }
                }
            }
        }
    }

    .navbar-option-menu {
        .options-menu {
            .popover {
                min-width: 200px;
            }
        }
    }

    .navbar-title-text {
        margin-top: 15px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .navbar-text{
        margin: 8px;
        font-weight: 300;
        color: @main-text-color;

        @media (max-width: 767px) {
            display: none;
        }

        &.options {
            &:hover {
                color: @accent-bright;
            }
        }

        img{
            margin-left: 5px;
            margin-right: 5px;
        }

        .caret {
            margin-left: 5px;
            margin-right: 5px;
        }

        &:hover {
            cursor: pointer;
        }
    }

    .options-dropdown {
        right: 0px;
        left: auto;
        top: 40px;
        background-color: @visualization-box-background;
        border: @main-border;
        border-radius: @border-radius;
        color: @main-text-color;

        .arrow {
            left: auto;
            right: 25px;
        }

        .options-container {
            width: 250px;

            .row {
                .export-options {
                    .btn-group {
                        padding: 5px 25px;
                    }
                }

                .format {
                    padding: 3px 20px;
                }

                .theme-label {
                    padding: 10px 20px 3px 20px;
                }
            }

            .theme-options {
                .btn {
                    display: inline-block;
                }
            }
        }
    }

    .open {
        .navbar-text {
            &.options {
                color: @accent-bright;
            }
        }
    }
}

.options {
    .options-gear {
        vertical-align: middle;
        font-size: 22px;
        padding-top: 4px;
    }

    .options-text {
        vertical-align: middle;
    }
}

.overlay-above {
    .start-here {
        background-color: @visualization-box-background;
        color: @main-text-color;
        border: @shadow-border;
        border-radius: @border-radius;

        .popover-title {
            background-color: @visualization-box-background;
        }
    }
}

/* Style for the loading mask. */
.loader {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

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

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

.overlay-container .loader {
    text-shadow: 0 1px 0 rgba(240, 240, 240, 0.9);
    background-color: rgba(240, 240, 240, 0.6);
    position: fixed;
    left: 49%;
    top: 40%;
    display: inline-block;
    line-height: 0;
    z-index: 9999999;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(40, 255, 25, 0.9);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

#tooltip-container {
    display: none;
    position: absolute;
    padding: 12px 15px;
    color: @tooltip-text-color;
    font-size: 12px;
    background-color: @tooltip-background;
    border: @shadow-border;
    border-radius: @border-radius;
    pointer-events: none;
    z-index: 10000;

    span{
        font-weight: bold;
        color: @accent-bright;
        display: block;
        text-shadow: @text-shadow;
    }

    .tooltip-date {
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 5px;
        font-size: 12px;
        color: @mid-text-color;
    }

    &:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        top: 50%;
        transform: translateY(-50%);
    }

    &:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        top: 49%;
        transform: translateY(-49%);
    }

    &.east {

        &:before {
            border-right: 8px solid @shadow;
            left:-8px;
            opacity: .5;
        }

        &:after {
            border-right: 7px solid @tooltip-background;
            left: -6px;
        }
    }

    &.west {

        &:before {
            border-left:8px solid @shadow;
            left: 100%;
        }

        &:after {
            border-left: 7px solid @tooltip-background;
            left: 100%;
        }
    }
}

.ag-row {
    &:hover {
        cursor: pointer;
    }
}

.ag-dark {
    .ag-header-container {
        background-color: @main-background;
    }
}

.layer-options-container {
    /* Make the width match the width of the layer-options-well element plus its border. */
    width: 580px;
    border-color: @visualization-box-background;
    border-style: dashed;
    border-width: 5px;

    &.drag-enter {
        border-color: @accent-dark;
    }

    .dragging {
        /* Display the dragged element above the other elements in its list, even if the other elements are defined after the dragged element in the DOM. */
        position: relative;
    }

    > label {
        font-size: 14px;
    }

    .layer-options-well {
        cursor: move;
        margin-bottom: 0px;
        /* Make the width match the width of four columns + the columns' margins + this element's padding + this element's borders. */
        width: 570px;

        .layer-options-row {
            height: 75px;

            &.row-large {
                height: auto;
                display: flex;
            }

            .layer-options-col {
                float: left;
                width: 130px;
                margin-left: 5px;
                margin-right: 5px;

                &.layer-options-col-wide {
                    width: 270px;

                    .col-half {
                        width: 50%;
                    }
                }

                &.btn-group {
                    /* Make the layer options buttons vertically align with the dropdowns. */
                    margin-top: 25px;

                    .btn {
                        /* Make the combined width of the four layer options buttons match the width of the column. */
                        padding: 3px 24px 3px 23px;

                        &.btn-default {
                            &.active, &.active&:hover, &.active&:focus {
                                color: #FFFFFF;
                                background-color: @accent-dark;
                                border-color: @accent-dark;
                            }
                        }

                        &.active {
                            z-index: auto;
                        }
                    }

                    .glyphicon {
                        font-size: 18px;
                        top: 3px;
                    }
                }
            }
        }

        .layer-options-error {
            color: @error-text-color;
            font-weight: bold;
            padding: 0 5px;
        }

        .layer-options-message {
            color: @main-text-color;
            font-weight: bold;
            padding: 0 5px;
        }
    }
}

/* Styling for sprites of images in app/img generated by the grunt-spritesmith task. */
.neon-sprite {
    display: inline-block;
    vertical-align: middle;
}

//
// Copyright 2014 Next Century Corporation
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

* {
    outline: 0 none !important;
}

a {
    color: @accent-bright;

    .glyphicon {
        color: @mid-text-color;
    }
}

a:focus, a:hover {
    color: @accent-bright;
}

html {
    color: @main-text-color;
    width: 100vw;
    overflow-x:hidden;

    body{
        background-color: @main-background;
        font-family: "Open Sans", Helvetica, arial, sans-serif;
    }

    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6 {
        font-family: "Open Sans", Helvetica, arial, sans-serif;
        color: @main-text-color;

    }
}

.bold {
    font-weight: bold;
}

.btn {
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    padding: 6px 16px;
    text-transform: uppercase;
    color: @button-color;
    background-color: @button-background-color;
    border: @button-border;
    border-radius: @border-radius;

    &:hover, &:focus, &:active, &.active {
        background-color: @button-hover-background-color;
        color: @button-hover-color;
        border: @button-hover-border;
    }

    &.active {
        background-color: @button-active-background-color;
        color: @button-active-color;
        border: @button-active-border;
    }

    &.disabled, &[disabled] {
        background-color: @button-background-color;
        border: @button-border;
        border-radius: @border-radius;
    }

    .btn-danger{
        background-color: @error-color;
        border-color: @error-dark-color;

        &:hover, &:focus, &:active, &.active {
            background-color: @error-dark-color;
            border-color: @error-dark-color;
        }
    }

    &.btn-default {
        background-color: @button-background-color;
        border: @button-border;
        border-radius: @border-radius;

        &.active {
            background-color: @button-active-background-color;
            color: @button-active-color;
            border: @button-active-border;
        }

        &:hover, &:focus, &:active, &.active {
            background-color: @button-hover-background-color;
            color: @button-hover-color;
            border: @button-hover-border;
        }

        &.disabled, &[disabled] {
            background-color: @button-background-color;
            border: @button-border;
            border-radius: @border-radius;
        }
    }

    .glyphicon {
       font-size: 14px;
       top: 2px;
    }
}

.btn-group {
    .btn{
        padding: 6px 12px;
        color: @button-color;
    }
}

.centered {
    text-align: center;
}

.options-menu {
    > a {
        background-color: transparent;
        border: none;
        font-size: 16px;
        padding: 0;

        .text, .glyphicon, .caret {
            color: @accent-bright;
        }

        &.collapsed {
            .text, .glyphicon, .caret {
                color: @main-text-color;
            }
        }

        &.active, &:active, &:focus, &:hover {
            background: transparent;
            border: none;
            box-shadow: none;

            .text, .glyphicon, .caret {
                color: @accent-bright;
            }
        }

        .text {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .glyphicon {
            margin-left: 5px;
        }
    }

    .btn-group{
        display: block;
    }

    .collapsing{
        position: absolute;
        display: block;
    }

    .glyphicon {
        font-size: inherit;
    }

    .popover{
        left: auto;
        right: -10px;
        top: 25px;
        margin-top: 0;
        /* Set the width so that the timeline date granularity buttons fit on one row. */
        min-width: 320px;

        background: none;
        padding: 10px;
        border: 0;
        border-radius: 2px;
        box-shadow: none;

        > .arrow {
            left: auto;
            right: 20px;
            top: 0;
        }

        .popover-content {
            background-color: @visualization-box-background;
            overflow: auto;
            padding: 15px 15px 0;
            border: @shadow-border;
            border-radius: @border-radius;
            box-shadow: 0 5px 10px @shadow;

            label {
                color: @main-text-color;
            }

            .btn-group, .input-group-btn {
                label {
                    color: @button-color;
                }
            }

            .form-control[disabled] {
                background-color: @light-background;
            }

            .glyphicon {
                top: 1.5px;
            }
        }
    }
}

.container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.disabled {
    cursor: default;
    opacity: .65;

    &:hover, &:focus {
        cursor: default;
    }
}

.gridster {
    margin-top: 5px;
    margin-bottom: 5px;

    .gridster-item-resizable-handler {
        z-index: 1060;

        &.handle-e {
            width: 5px;
        }

        &.handle-w {
            width: 5px;
        }

        &.handle-s {
            height: 5px;
        }
    }
}

.text-container {
    min-height: 20px;
    margin-bottom: 5px;

    &.shrink {
        height: 0px;
        min-height: 0px;
    }

    h4 {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .header {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .text {
        color: @main-text-color;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.33;
        text-transform: uppercase;
    }
}

.headers-container {
    min-height: 35px;

    .filter-reset {
        border: @main-border;
        line-height: 18px;
        margin-left: 5px;
        padding: 5px;

        .filter-label {
            color: @main-text-color;
            display: inline-block;
            max-width: 100px;
            overflow: hidden;
            position: relative;
            text-overflow: ellipsis;
            top: 2px;
            white-space: nowrap;
        }

        .glyphicon {
            color: @mid-text-color;
            font-size: 16px;

            &:hover {
                cursor: pointer;
            }
        }
    }

    /* Overwrite default legend styling. */
    .dropdown-legend {
        background-color: @visualization-box-background;
        border: @main-border;
        border-radius: 4px;
        position: absolute;

        &.open {
            min-width: 175px;
        }

        .divider {
            height: 1px;
            margin: 0 0 9px 0;
            overflow: hidden;
            background-color: @border-color;
        }

        .legend-toggle {
            padding: 5px;
        }

        .legend-details {
            overflow: auto;

            .legend-layer {
                margin-bottom: 10px;

                .legend-title {
                    cursor: pointer;
                    position: relative;
                    padding: 5px;

                    .text {
                        margin-right: 25px;
                        font-size: 14px;
                    }

                    .glyphicon {
                        color: @main-text-color;
                        position: absolute;
                        right: 5px;
                        top: 50%;
                        transform: translate(0, -50%);
                    }
                }

                .node-title {
                    color: @main-text-color;
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 1.33;
                    text-transform: uppercase;
                    margin-left: 20px;
                }

                .legend-item {
                    border: @main-border;
                    border-radius: 5px;
                    cursor: pointer;
                    display: block;
                    font-size: 12px;
                    margin-left: 20px;
                    margin-right: 5px;
                    margin-top: 0px;
                    opacity: .8;
                    padding: 3px;

                    &.legend-hidden{
                        color: @main-text-color;

                        .legend-icon{
                            background: #e1e1e1 !important;
                        }
                    }
                }
            }
        }

        .text {
            cursor: pointer;

            .glyphicon {
                line-height: normal;
            }
        }
    }
}

.highlight {
    background-color: @callout;
}

.highlight-red {
    background-color: rgba(255, 0, 0, 0.5);
}

.modal-backdrop{
    background: none;
    z-index: auto;
}

.neon-well {
    border: @main-border;
    border-radius: 4px;
    margin: 0px 0px 15px;
    padding: 4px;
    background-color: @visualization-box-background;

    &.neon-well-dark {
        background-color: @main-background;
    }

    .inner-group {
        margin-left: 20px;
    }

    .toggled-group {
        margin-top: 15px;
    }
}

.no-margin {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.visualization-well{
    background-color: @visualization-box-background;
    box-shadow: 0 1px 4px @shadow;
    border: @visualization-border;
    border-radius: @visualization-border-radius;
    margin: 0px;
    padding: 20px;
    position: relative;

    > h1, > h2, > h3, > h4{
        margin-top: 0;
        margin-bottom: 30px;
    }
}

.input-group-none {
    font-style: italic;
    color: @main-text-color;
    opacity: .65;
}

.neon-datetimepicker {
    .dropdown-menu {
        overflow: auto;
        padding: 10px;

        .table-responsive {
            display: inline-block;
            font-size: 12px;
            padding: 4px 5px;
            /* Reduce the datetimepicker width because of the reduced font size. */
            width: 250px;
            /* Set the datetimepicker height because the year and month views are shorter by default and cause unwanted empty space. */
            height: 250px;

            .table {
                th {
                    padding: 6px;
                    width: 34px;
                    height: 30px;

                    &.left, &.right, &.switch {
                        background-color: transparent;

                        &:hover {
                            background-color: transparent;
                            color: @accent-bright;
                        }
                    }
                }

                td {
                    padding: 6px;
                    width: 34px;
                    height: 30px;

                    &.day {
                        &.active {
                            color: @light-text-color;
                            background: @accent-bright;

                            &:hover {
                                color: @light-text-color;
                                background: @accent-bright;
                            }
                        }

                        &:hover {
                            color: @accent-bright;
                            background-color: transparent;
                        }
                    }

                    .month, .year {
                        border-radius: @border-radius;
                        background-color: transparent;

                        &:hover {
                            background-color: transparent;
                            color: @accent-bright;
                        }

                        &.active {
                            background-color: @button-active-background-color;
                            color: @button-active-color;
                            border: @button-active-border;
                            background-image: none;

                            &:hover {
                                background-color: @button-hover-background-color;
                                color: @button-hover-color;
                                border: @button-hover-border;
                                background-image: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

.error-label {
    color: @error-text-color;
    margin: 10px 0px 0px;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu {
    background-color: @visualization-box-background;
    color: @main-text-color;
    border: @shadow-border;
    border-radius: @border-radius;

    li {
        a {
            color: @main-text-color;

            &:hover {
                background-color: @mid-background;
                color: @main-text-color;
            }
        }

        button {
            margin: 5px 20px;
        }
    }

    .active {
        a {
            background-color: @accent-bright;
            color: @light-text-color;

            &:hover, &:focus {
                background-color: @accent-bright;
            }
        }
    }

    .unselectable {
        color: @main-text-color;
        cursor: default;

        &:hover {
            background-color: @visualization-box-background;
            color: @main-text-color;
        }
    }
}

.legend {
    .legend-item {
        display: inline-block;
        margin-top: 5px;
        padding-right: 5px;

        .legend-icon {
            border-radius: 2px;
            display: inline-block;
            height: 1em;
            vertical-align: middle;
            width: 1em;
        }

        .legend-text {
            display: inline-block;
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            color: @main-text-color;
        }
    }
}

.navbar {
    margin-bottom: 0;

    .navbar-default{
        background-color: @visualization-box-background;
        border: 0;
        box-shadow: 0 1px 2px @shadow;
        z-index: auto;
        top: 0;
        width: 100%;
        z-index: 1040;
        //Disable transform used in Bootstrap 3.2.0 Affix plugin.  This hides any modals that are defined
        // inside the nav and breaks the database-overlay .
        transform: none;
        -webkit-transform: none;

        .navbar-indented {
            margin: 5px 40px;
            width: auto;
        }

        .navbar-nav {
            float: left;
            margin: 0;

            > li {
                float: left;

                > a{
                    margin-right: 40px;
                    color: @accent-bright;
                    border-bottom: 2px solid @accent-bright;
                    padding: 15px 0 13px;

                    @media (max-width: 767px) {
                        margin-right: 30px;
                    }

                    &.collapsed, &.collapsed:focus{
                        background: none;
                        color: @main-text-color;
                        border: 0;
                        padding-bottom: 15px;
                    }

                    &:focus, &:hover, &.collapsed:hover{
                        color: @accent-bright;
                    }
                }
            }

            > .dropdown {
                > .primary{
                    border: 0;
                    background-color: @accent-bright;
                    color: @light-text-color;
                    padding: 15px 30px;
                    font-weight: bold;

                    &:hover, &:focus{
                        background-color: @accent-dark;
                        color: @light-text-color;
                    }
                }
            }

            .open {
                .dropdown-menu {
                    @media (max-width: 767px) {
                        position: absolute;
                        float: left;
                        width: auto;
                        margin: 2px 0 0;
                        background-color: @light-background;
                        border: @main-border;
                        border: @shadow-border;
                        -webkit-box-shadow: 0 6px 12px @shadow;
                        box-shadow: 0 6px 12px @shadow;
                    }
                }
            }
        }
    }

    .navbar-option-menu {
        .options-menu {
            .popover {
                min-width: 200px;
            }
        }
    }

    .navbar-title-text {
        margin-top: 15px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .navbar-text{
        margin: 8px;
        font-weight: 300;
        color: @main-text-color;

        @media (max-width: 767px) {
            display: none;
        }

        &.options {
            &:hover {
                color: @accent-bright;
            }
        }

        img{
            margin-left: 5px;
            margin-right: 5px;
        }

        .caret {
            margin-left: 5px;
            margin-right: 5px;
        }

        &:hover {
            cursor: pointer;
        }
    }

    .options-dropdown {
        right: 0px;
        left: auto;
        top: 40px;
        background-color: @visualization-box-background;
        border: @main-border;
        border-radius: @border-radius;
        color: @main-text-color;

        .arrow {
            left: auto;
            right: 25px;
        }

        .options-container {
            width: 250px;

            .row {
                .export-options {
                    .btn-group {
                        padding: 5px 25px;
                    }
                }

                .format {
                    padding: 3px 20px;
                }

                .theme-label {
                    padding: 10px 20px 3px 20px;
                }
            }

            .theme-options {
                .btn {
                    display: inline-block;
                }
            }
        }
    }

    .open {
        .navbar-text {
            &.options {
                color: @accent-bright;
            }
        }
    }
}

.options {
    .options-gear {
        vertical-align: middle;
        font-size: 22px;
        padding-top: 4px;
    }

    .options-text {
        vertical-align: middle;
    }
}

.overlay-above {
    .start-here {
        background-color: @visualization-box-background;
        color: @main-text-color;
        border: @shadow-border;
        border-radius: @border-radius;

        .popover-title {
            background-color: @visualization-box-background;
        }
    }
}

/* Style for the loading mask. */
.loader {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

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

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

.overlay-container .loader {
    text-shadow: 0 1px 0 rgba(240, 240, 240, 0.9);
    background-color: rgba(240, 240, 240, 0.6);
    position: fixed;
    left: 49%;
    top: 40%;
    display: inline-block;
    line-height: 0;
    z-index: 9999999;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(40, 255, 25, 0.9);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

#tooltip-container {
    display: none;
    position: absolute;
    padding: 12px 15px;
    color: @tooltip-text-color;
    font-size: 12px;
    background-color: @tooltip-background;
    border: @shadow-border;
    border-radius: @border-radius;
    pointer-events: none;
    z-index: 10000;

    span{
        font-weight: bold;
        color: @accent-bright;
        display: block;
        text-shadow: @text-shadow;
    }

    .tooltip-date {
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 5px;
        font-size: 12px;
        color: @mid-text-color;
    }

    &:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        top: 50%;
        transform: translateY(-50%);
    }

    &:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        top: 49%;
        transform: translateY(-49%);
    }

    &.east {

        &:before {
            border-right: 8px solid @shadow;
            left:-8px;
            opacity: .5;
        }

        &:after {
            border-right: 7px solid @tooltip-background;
            left: -6px;
        }
    }

    &.west {

        &:before {
            border-left:8px solid @shadow;
            left: 100%;
        }

        &:after {
            border-left: 7px solid @tooltip-background;
            left: 100%;
        }
    }
}

.ag-row {
    &:hover {
        cursor: pointer;
    }
}

.ag-dark {
    .ag-header-container {
        background-color: @main-background;
    }
}

.layer-options-container {
    /* Make the width match the width of the layer-options-well element plus a 20px right margin for the scrollbar. */
    width: 590px;

    &.drag-enter {
        border-color: @accent-dark;
    }

    .dragging {
        /* Display the dragged element above the other elements in its list, even if the other elements are defined after the dragged element in the DOM. */
        position: relative;
    }

    > label {
        font-size: 14px;
    }

    .layer-options-well {
        cursor: move;
        /* Make the width match the width of four columns + the columns' margins + this element's padding + this element's borders. */
        width: 570px;

        .layer-options-row {
            height: 75px;

            &.row-large {
                height: auto;
                display: flex;
            }

            .layer-options-col {
                float: left;
                width: 130px;
                margin-left: 5px;
                margin-right: 5px;

                &.layer-options-col-wide {
                    width: 270px;

                    .col-half {
                        width: 50%;
                    }
                }

                &.btn-group {
                    /* Make the layer options buttons vertically align with the dropdowns. */
                    margin-top: 25px;

                    .btn {
                        /* Make the combined width of the four layer options buttons match the width of the column. */
                        padding: 3px 24px 3px 23px;

                        &.btn-default {
                            &.active, &.active&:hover, &.active&:focus {
                                color: #FFFFFF;
                                background-color: @accent-dark;
                                border-color: @accent-dark;
                            }
                        }

                        &.active {
                            z-index: auto;
                        }
                    }

                    .glyphicon {
                        font-size: 18px;
                        top: 3px;
                    }
                }
            }
        }

        .layer-options-error {
            color: @error-text-color;
            font-weight: bold;
            padding: 0 5px;
        }

        .layer-options-message {
            color: @main-text-color;
            font-weight: bold;
            padding: 0 5px;
        }
    }
}

/* Styling for sprites of images in app/img generated by the grunt-spritesmith task. */
.neon-sprite {
    display: inline-block;
    vertical-align: middle;
}


no message

no message

@import "../../config.less";

* {
	box-sizing: border-box;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	font-size: inherit;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	line-height: inherit;
	outline: none;
	z-index: 0;
	color: inherit;
	text-decoration: inherit;
	font-family: inherit;
	visibility: inherit;
	touch-action: manipulation;
}

html {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	font-family: @defaultFont;
	font-size: 16px;
	line-height: 1;
}

body {
	height: 100%;
	margin: 0;
}

#activities {
	height: 100%;

	&.mask {
		filter: @loadingMaskFilter;
	}

	&.hidePageHeader>#page>.header,
	&.clean>#page>.header {
		display: none;
	}

	&.hideNavMenu,
	&.clean {
		>#page>.navMenu {
			display: none;
		}

		>#hint {
			bottom: 20px;
		}
	}

	&.hidePopupHeader>#popup>.header {
		display: none;
	}

	&.hidePopupClose>#popup>.header>.close {
		display: none;
	}
}

#page>.header>.back,
#page>.header>.leftMenuBtn,
#page>.header>.rightMenuBtn,
#popup>.header>.back,
#popup>.header>.close {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 16px;
	font-size: 16px;
	line-height: 1;
	margin: auto 0;
	color: @headerText;
	overflow: visible;

	>svg {
		vertical-align: top;
		height: 100%;
		fill: @headerText;
	}
}

#page,
#popup {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: @appBackground;

	>.header {
		flex: 0 0 @headerHeight;
		position: relative;
		color: @headerText;
		background-color: @headerBackground;
		margin-bottom: @headerMargin;
		box-shadow: @headerShadow;

		>.back {
			left: 0;
		}

		>.title {
			font-weight: bold;
			font-size: 16px;
			line-height: @headerHeight;
			text-align: center;
			white-space: nowrap;
		}
	}

	>.content {
		flex: 1 1 auto;
		position: relative;

		>div {
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			visibility: hidden;
			color: @appText;
			-webkit-animation-duration: 400ms;
			-webkit-animation-timing-function: ease-in-out;
			-webkit-animation-iteration-count: 1;
			animation-duration: 400ms;
			animation-timing-function: ease-in-out;
			animation-iteration-count: 1;
		}
	}
}

#page {
	position: relative;
	width: 100%;

	>.header {
		>.leftMenuBtn {
			left: 0;
		}

		>.rightMenuBtn {
			right: 0;
		}
	}

	>.navMenu {
		display: flex;
		flex: 0 0 @footerHeight;
		background-color: @footerBackground;
		position: relative;
		margin-top: @footerMargin;
		box-shadow: @footerShadow;

		>a {
			flex: 1 1 0;
			text-align: center;
			color: @footerFrontground;
			font-size: 12px;

			>svg {
				display: block;
				height: @footerIconSize;
				margin: 6px auto;
				fill: @footerFrontground;
			}

			&.selected {
				color: @footerFrontgroundHighlight;

				>svg {
					fill: @footerFrontgroundHighlight;
				}
			}
		}
	}
}

#popup {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	visibility: hidden;

	>.header>.close {
		right: 10px;
	}
}

#panel {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	>.backdrop {
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 200ms ease-in-out;
	}

	>.content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		transform: translateX(-100%);
		transition: transform 200ms ease-in-out;
		background-color: @appBackground;
		color: @appText;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

		>div {
			position: absolute;
			top: 0;
			right: 100%;
			height: 100%;
		}
	}
}

#dialog,
#loading,
#photoView,
#sliderView {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	visibility: hidden;
}

#dialog,
#photoView,
#sliderView {
	background-color: @maskFilterColor;
}

#dialog>div {
	position: absolute;
	margin: auto;
	border-radius: 10px;
	right: 10px;
	left: 10px;
	bottom: 10px;
	top: 10px;
	min-width: 240px;
	background-color: @dialogBackground;
	box-shadow: 0 0 4px @dialogShadow;
	color: @appText;

	>.btns {
		overflow: visible;
		text-align: center;
		margin-bottom: 20px;
		display: none;

		>a {
			display: inline-block;
			border-radius: 4px;
			line-height: 30px;
			min-width: 80px;
			padding: 0 10px;
			margin: 0 15px;
			vertical-align: top;
			font-size: 14px;
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

			&.yes {
				color: @primaryBtnText;
				background-color: @primaryBtnBackground;

				&:active {
					color: @primaryBtnActiveText;
					background-color: @primaryBtnActiveBackground;
				}
			}

			&.no {
				color: @secondryBtnText;
				background-color: @secondryBtnBackground;

				&:active {
					color: @secondryBtnActiveText;
					background-color: @secondryBtnActiveBackground;
				}
			}
		}
	}

	>.close {
		position: absolute;
		right: 10px;
		top: 10px;
		width: 16px;
		height: 16px;

		>svg {
			display: block;
			fill: @headerText;
		}
	}

	&.alert,
	&.confirm {
		>.content {
			font-size: 14px;
			margin: 16px 20px;
			line-height: 22px;
			white-space: pre-wrap;
			text-align: justify;
		}

		>.btns {
			display: block;
		}

		>.close {
			display: none;
		}
	}

	&.alert>.btns>.no {
		display: none;
	}
}

#loading>div {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	font-size: 14px;
	white-space: nowrap;
	text-align: center;
	width: @loadingWidth;
	height: @loadingHeight;
	border-radius: @loadingRadius;
	background-color: @loadingBackground;
	box-shadow: 0 0 4px @loadingShadow;
	color: @loadingText;

	>.ico {
		position: relative;
		margin: 15px auto 16px auto;
		border: 2px solid transparent;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		-webkit-animation: loadingAni 800ms infinite linear;
		animation: loadingAni 800ms infinite linear;
		border-top-color: @loadingColor1;

		&:before {
			content: '';
			position: absolute;
			top: 2px;
			left: 2px;
			right: 2px;
			bottom: 2px;
			border: 2px solid transparent;
			border-radius: 50%;
			-webkit-animation: loadingAni 8s infinite linear;
			animation: loadingAni 8s infinite linear;
			border-top-color: @loadingColor2;
		}

		&:after {
			content: '';
			position: absolute;
			top: 6px;
			left: 6px;
			right: 6px;
			bottom: 6px;
			border: 2px solid transparent;
			border-radius: 50%;
			-webkit-animation: loadingAni 4s infinite linear;
			animation: loadingAni 4s infinite linear;
			border-top-color: @loadingColor3;
		}

		@-webkit-keyframes loadingAni {
			0% {
				transform: rotate(0deg);
			}

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

			100% {
				transform: rotate(360deg);
			}
		}
	}
}

#popup.in,
#readable.in {
	bottom: 0;
	visibility: inherit;
	-webkit-animation: popupin 400ms 1 ease-in-out;
	animation: popupin 400ms 1 ease-in-out;
	@-webkit-keyframes popupin {
		from {
			bottom: -100%;
		}

		to {
			bottom: 0;
		}
	}

	@keyframes popupin {
		from {
			bottom: -100%;
		}

		to {
			bottom: 0;
		}
	}
}

#popup.out,
#readable.out {
	visibility: inherit;
	-webkit-animation: popupout 400ms 1 ease-in-out;
	animation: popupout 400ms 1 ease-in-out;

	@-webkit-keyframes popupout {
		from {
			bottom: 0;
		}

		to {
			bottom: -100%;
		}
	}

	@keyframes popupout {
		from {
			bottom: 0;
		}

		to {
			bottom: -100%;
		}
	}
}

#sliderView {
	>.content {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	>.nav {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10px;
		text-align: center;
		pointer-events: none;
		color: @photoNavColor;
		font-family: Serif;
		font-size: 18px;
		text-shadow: 0 0 1px @photoNavShadow;
	}

	&.photos>.content>div>div {
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
	}
}

#photoView {
	>img {
		position: absolute;
	}

	>.actions {
		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		text-align: center;
		overflow: visible;

		>a {
			display: inline-block;
			vertical-align: top;
			margin: 0 5px;
			font-size: 14px;
			line-height: 30px;
			padding: 0 10px;
			min-width: 60px;
			border-radius: 4px;
			color: @photoViewBtnText;
			background-color: @photoViewBtnBackground;
			box-shadow: 0 0 2px @photoViewBtnShadow;

			&:active {
				color: @photoViewBtnActiveText;
				background-color: @photoViewBtnActiveBackground;
				box-shadow: 0 0 2px @photoViewBtnActiveShadow;
			}
		}
	}
}

#photoView,
#readable,
#sliderView {
	>.close {
		position: absolute;
		right: 4px;
		top: 4px;
		border-radius: 16px;
		display: block;
		background-color: @roundCloseBackground;
		box-shadow: 0 0 4px @roundCloseShadow inset;

		>svg {
			display: block;
			width: 16px;
			height: 16px;
			margin: 8px;
			fill: @roundCloseFrontground;
		}
	}
}

#readable {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 100%;
	visibility: hidden;
	overflow-y: auto;
	background-color: @readableBackground;

	>.content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;

		&.foreign {
			overflow: hidden;

			&.iosScrollFix {
				overflow: auto;

				>iframe {
					height: calc(100% + 2px);
				}
			}

			>iframe {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
}

#hint {
	position: absolute;
	bottom: 70px;
	left: 20px;
	right: 20px;
	pointer-events: none;
	text-align: center;
	opacity: 0;
	font-size: 14px;
	overflow: visible;
	transition: opacity 400ms ease-in-out;

	>.text {
		display: inline-block;
		vertical-align: top;
		max-width: 100%;
		color: @hintText;
		line-height: 20px;
		padding: 5px 12px;
		background-color: @hintBackground;
		border-radius: 4px;
		line-height: 20px;
		padding: 5px 12px;
		box-shadow: 0 0 2px @hintShadow;
		white-space: pre-wrap;
		vertical-align: top;
	}
}

#helper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;

	>div {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		>div {
			display: flex;

			>div {
				height: 100%;
			}

			>div:first-child,
			>div:last-child,
			&:first-child,
			&:last-child {
				background-color: @helperBackground;
			}
		}
	}

	>img {
		position: absolute;
	}
}

.iosScrollFix {
	padding-top: 1px;
	padding-bottom: 1px;
}

.iosScrollFix:after {
	content: '';
	position: absolute;
	bottom: -2px;
	right: 0;
	left: 0;
	height: 1px;
	pointer-events: none;
}

div.reloadHint {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	opacity: 0;
	background-color: @reloadHintBackground;
	padding: 8px;
	box-shadow: 0 0 4px @reloadHintShadow;
	border-radius: 20px;

	>svg {
		display: block;
		height: 100%;
		fill: @reloadHintStartColor;
		transition: fill 200ms ease-in-out;
	}

	&.pin>svg {
		fill: @reloadHintFinishColor;
	}
}

@-webkit-keyframes viewTransL1 {
	from {
		left: 0;
	}

	to {
		left: -100%;
	}
}

@-webkit-keyframes viewTransR1 {
	from {
		left: 0;
	}

	to {
		left: 100%;
	}
}

@-webkit-keyframes viewTransL2 {
	from {
		left: 100%;
	}

	to {
		left: 0;
	}
}

@-webkit-keyframes viewTransR2 {
	from {
		left: -100%;
	}

	to {
		left: 0;
	}
}

@keyframes viewTransL1 {
	from {
		left: 0;
	}

	to {
		left: -100%;
	}
}

@keyframes viewTransR1 {
	from {
		left: 0;
	}

	to {
		left: 100%;
	}
}

@keyframes viewTransL2 {
	from {
		left: 100%;
	}

	to {
		left: 0;
	}
}

@keyframes viewTransR2 {
	from {
		left: -100%;
	}

	to {
		left: 0;
	}
}

@import "../../config.less";

* {
	box-sizing: border-box;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	font-size: inherit;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	line-height: inherit;
	outline: none;
	z-index: 0;
	color: inherit;
	text-decoration: inherit;
	font-family: inherit;
	visibility: inherit;
	touch-action: manipulation;
}

html {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	font-family: @defaultFont;
	font-size: 16px;
	line-height: 1;
}

body {
	height: 100%;
	margin: 0;
}

#activities {
	height: 100%;

	&.mask {
		filter: @loadingMaskFilter;
	}

	&.hidePageHeader>#page>.header,
	&.clean>#page>.header {
		display: none;
	}

	&.hideNavMenu,
	&.clean {
		>#page>.navMenu {
			display: none;
		}

		>#hint {
			bottom: 20px;
		}
	}

	&.hidePopupHeader>#popup>.header {
		display: none;
	}

	&.hidePopupClose>#popup>.header>.close {
		display: none;
	}
}

#page>.header>.back,
#page>.header>.leftMenuBtn,
#page>.header>.rightMenuBtn,
#popup>.header>.back,
#popup>.header>.close {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 16px;
	font-size: 16px;
	line-height: 1;
	margin: auto 0;
	color: @headerText;
	overflow: visible;

	>svg {
		vertical-align: top;
		height: 100%;
		fill: @headerText;
	}
}

#page,
#popup {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: @appBackground;

	>.header {
		flex: 0 0 @headerHeight;
		position: relative;
		color: @headerText;
		background-color: @headerBackground;
		margin-bottom: @headerMargin;
		box-shadow: @headerShadow;

		>.back {
			left: 0;
		}

		>.title {
			font-weight: bold;
			font-size: 16px;
			line-height: @headerHeight;
			text-align: center;
			white-space: nowrap;
		}
	}

	>.content {
		flex: 1 1 auto;
		position: relative;

		>div {
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			visibility: hidden;
			color: @appText;
			-webkit-animation-duration: 400ms;
			-webkit-animation-timing-function: ease-in-out;
			-webkit-animation-iteration-count: 1;
			animation-duration: 400ms;
			animation-timing-function: ease-in-out;
			animation-iteration-count: 1;
		}
	}
}

#page {
	position: relative;
	width: 100%;

	>.header {
		>.leftMenuBtn {
			left: 0;
		}

		>.rightMenuBtn {
			right: 0;
		}
	}

	>.navMenu {
		display: flex;
		flex: 0 0 @footerHeight;
		background-color: @footerBackground;
		position: relative;
		margin-top: @footerMargin;
		box-shadow: @footerShadow;

		>a {
			flex: 1 1 0;
			text-align: center;
			color: @footerFrontground;
			font-size: 12px;

			>svg {
				display: block;
				height: @footerIconSize;
				margin: 6px auto;
				fill: @footerFrontground;
			}

			&.selected {
				color: @footerFrontgroundHighlight;

				>svg {
					fill: @footerFrontgroundHighlight;
				}
			}
		}
	}
}

#popup {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	visibility: hidden;

	>.header>.close {
		right: 10px;
	}
}

#panel {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	>.backdrop {
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 200ms ease-in-out;
	}

	>.content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		transform: translateX(-100%);
		transition: transform 200ms ease-in-out;
		background-color: @appBackground;
		color: @appText;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

		>div {
			position: absolute;
			top: 0;
			right: 100%;
			height: 100%;
		}
	}
}

#dialog,
#loading,
#photoView,
#sliderView {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	visibility: hidden;
}

#dialog,
#photoView,
#sliderView {
	background-color: @maskFilterColor;
}

#dialog>div {
	position: absolute;
	margin: auto;
	border-radius: 10px;
	right: 10px;
	left: 10px;
	bottom: 10px;
	top: 10px;
	min-width: 240px;
	background-color: @dialogBackground;
	box-shadow: 0 0 4px @dialogShadow;
	color: @appText;

	>.btns {
		overflow: visible;
		text-align: center;
		margin-bottom: 20px;
		display: none;

		>a {
			display: inline-block;
			border-radius: 4px;
			line-height: 30px;
			min-width: 80px;
			padding: 0 10px;
			margin: 0 15px;
			vertical-align: top;
			font-size: 14px;
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

			&.yes {
				color: @primaryBtnText;
				background-color: @primaryBtnBackground;

				&:active {
					color: @primaryBtnActiveText;
					background-color: @primaryBtnActiveBackground;
				}
			}

			&.no {
				color: @secondryBtnText;
				background-color: @secondryBtnBackground;

				&:active {
					color: @secondryBtnActiveText;
					background-color: @secondryBtnActiveBackground;
				}
			}
		}
	}

	>.close {
		position: absolute;
		right: 10px;
		top: 10px;
		width: 16px;
		height: 16px;

		>svg {
			display: block;
			fill: @headerText;
		}
	}

	&.alert,
	&.confirm {
		>.content {
			font-size: 14px;
			margin: 16px 20px;
			line-height: 22px;
			white-space: pre-wrap;
			text-align: justify;
		}

		>.btns {
			display: block;
		}

		>.close {
			display: none;
		}
	}

	&.alert>.btns>.no {
		display: none;
	}
}

#loading>div {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	font-size: 14px;
	white-space: nowrap;
	text-align: center;
	width: @loadingWidth;
	height: @loadingHeight;
	border-radius: @loadingRadius;
	background-color: @loadingBackground;
	box-shadow: 0 0 4px @loadingShadow;
	color: @loadingText;

	>.ico {
		position: relative;
		margin: 15px auto 16px auto;
		border: 2px solid transparent;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		-webkit-animation: loadingAni 800ms infinite linear;
		animation: loadingAni 800ms infinite linear;
		border-top-color: @loadingColor1;

		&:before {
			content: '';
			position: absolute;
			top: 2px;
			left: 2px;
			right: 2px;
			bottom: 2px;
			border: 2px solid transparent;
			border-radius: 50%;
			-webkit-animation: loadingAni 8s infinite linear;
			animation: loadingAni 8s infinite linear;
			border-top-color: @loadingColor2;
		}

		&:after {
			content: '';
			position: absolute;
			top: 6px;
			left: 6px;
			right: 6px;
			bottom: 6px;
			border: 2px solid transparent;
			border-radius: 50%;
			-webkit-animation: loadingAni 4s infinite linear;
			animation: loadingAni 4s infinite linear;
			border-top-color: @loadingColor3;
		}

		@-webkit-keyframes loadingAni {
			0% {
				transform: rotate(0deg);
			}

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

			100% {
				transform: rotate(360deg);
			}
		}
	}
}

#popup.in,
#readable.in {
	bottom: 0;
	visibility: inherit;
	-webkit-animation: popupin 400ms 1 ease-in-out;
	animation: popupin 400ms 1 ease-in-out;
	@-webkit-keyframes popupin {
		from {
			bottom: -100%;
		}

		to {
			bottom: 0;
		}
	}

	@keyframes popupin {
		from {
			bottom: -100%;
		}

		to {
			bottom: 0;
		}
	}
}

#popup.out,
#readable.out {
	visibility: inherit;
	-webkit-animation: popupout 400ms 1 ease-in-out;
	animation: popupout 400ms 1 ease-in-out;

	@-webkit-keyframes popupout {
		from {
			bottom: 0;
		}

		to {
			bottom: -100%;
		}
	}

	@keyframes popupout {
		from {
			bottom: 0;
		}

		to {
			bottom: -100%;
		}
	}
}

#sliderView {
	>.content {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	>.nav {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10px;
		text-align: center;
		pointer-events: none;
		color: @photoNavColor;
		font-family: Serif;
		font-size: 18px;
		text-shadow: 0 0 1px @photoNavShadow;
	}

	&.photos>.content>div>div {
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
	}
}

#photoView {
	>img {
		position: absolute;
	}

	>.actions {
		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		text-align: center;
		overflow: visible;

		>a {
			display: inline-block;
			vertical-align: top;
			margin: 0 5px;
			font-size: 14px;
			line-height: 30px;
			padding: 0 10px;
			min-width: 60px;
			border-radius: 4px;
			color: @photoViewBtnText;
			background-color: @photoViewBtnBackground;
			box-shadow: 0 0 2px @photoViewBtnShadow;

			&:active {
				color: @photoViewBtnActiveText;
				background-color: @photoViewBtnActiveBackground;
				box-shadow: 0 0 2px @photoViewBtnActiveShadow;
			}
		}
	}
}

#photoView,
#readable,
#sliderView {
	>.close {
		position: absolute;
		right: 4px;
		top: 4px;
		border-radius: 16px;
		display: block;
		background-color: @roundCloseBackground;
		box-shadow: 0 0 4px @roundCloseShadow inset;

		>svg {
			display: block;
			width: 16px;
			height: 16px;
			margin: 8px;
			fill: @roundCloseFrontground;
		}
	}
}

#readable {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 100%;
	visibility: hidden;
	overflow-y: auto;
	background-color: @readableBackground;

	>.content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;

		&.foreign {
			overflow: hidden;

			&.iosScrollFix {
				overflow: auto;

				>iframe {
					height: calc(100% + 2px);
				}
			}

			>iframe {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
}

#hint {
	position: absolute;
	bottom: 70px;
	left: 20px;
	right: 20px;
	pointer-events: none;
	text-align: center;
	opacity: 0;
	font-size: 14px;
	overflow: visible;
	transition: opacity 400ms ease-in-out;

	>.text {
		display: inline-block;
		vertical-align: top;
		max-width: 100%;
		color: @hintText;
		line-height: 20px;
		padding: 5px 12px;
		background-color: @hintBackground;
		border-radius: 4px;
		line-height: 20px;
		padding: 5px 12px;
		box-shadow: 0 0 2px @hintShadow;
		white-space: pre-wrap;
		vertical-align: top;
	}
}

#helper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;

	>div {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		>div {
			display: flex;

			>div {
				height: 100%;
			}

			>div:first-child,
			>div:last-child,
			&:first-child,
			&:last-child {
				background-color: @helperBackground;
			}
		}
	}

	>img {
		position: absolute;
	}
}

.iosScrollFix {
	padding-top: 1px;
	padding-bottom: 1px;
}

.iosScrollFix:before {
	content: '';
	position: absolute;
	bottom: -2px;
	right: 0;
	left: 0;
	height: 1px;
	pointer-events: none;
}

div.reloadHint {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	opacity: 0;
	background-color: @reloadHintBackground;
	padding: 8px;
	box-shadow: 0 0 4px @reloadHintShadow;
	border-radius: 20px;

	>svg {
		display: block;
		height: 100%;
		fill: @reloadHintStartColor;
		transition: fill 200ms ease-in-out;
	}

	&.pin>svg {
		fill: @reloadHintFinishColor;
	}
}

@-webkit-keyframes viewTransL1 {
	from {
		left: 0;
	}

	to {
		left: -100%;
	}
}

@-webkit-keyframes viewTransR1 {
	from {
		left: 0;
	}

	to {
		left: 100%;
	}
}

@-webkit-keyframes viewTransL2 {
	from {
		left: 100%;
	}

	to {
		left: 0;
	}
}

@-webkit-keyframes viewTransR2 {
	from {
		left: -100%;
	}

	to {
		left: 0;
	}
}

@keyframes viewTransL1 {
	from {
		left: 0;
	}

	to {
		left: -100%;
	}
}

@keyframes viewTransR1 {
	from {
		left: 0;
	}

	to {
		left: 100%;
	}
}

@keyframes viewTransL2 {
	from {
		left: 100%;
	}

	to {
		left: 0;
	}
}

@keyframes viewTransR2 {
	from {
		left: -100%;
	}

	to {
		left: 0;
	}
}


Added missing property.

Added missing property.

@theme-color: #4F8DB3; //Blue Color Scheme
//@theme-color: #7f8c8d; //Grey Color Scheme
//@theme-color: #e74c3c; //Red Color Scheme
//@theme-color: #16a085; //Green Color Scheme
//@theme-color: #e67e22; //Orange Color Scheme

// Font color
@font-color: #535b60;

// Headings color
@heading-color: #53555c;

// Page background
// -------------------------
@body-background: ~"url(../img/page-background.png)";

// Typography
// -------------------------
@sansFontFamily: 'Open Sans', sans-serif;

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}