/* CSS stylesheet for the Mobility Clinic UI */

/* Printing styles */
@page {
    size: auto;
    margin: 1in 0.5in;
}

@media print {

    .visible_print_container {
        width: 100%;
        height: 99%
        position: absolute;
        top: 0;
        left: 0;
    }

    .print_report_container {
        width: 8.5in;
        font-size: 10pt;
        margin-left: 0.5in;
        margin-top: 0.5in;
        margin-bottom: 0.5in;
    }

    .print-report-table {
        width: 900px;
        margin: 0 auto;
    }

    .print-report-vis {
        margin: 0 auto;
        width: 900px;
    }

    .print-report-trial-notes {
        padding: 0;
        margin: 0;
        width: 900px;
    }

    .-ml-no-print {
        display: none;
    }
}

@media screen {
    /* Styles for print preview classes  */
    .print-buttons {
        margin-left: 0.5in;
    }

    .print_report_container {
        font-size: 10pt;
        width: 8.5in;
        margin-left: 0.5in;
    }

    .print-report-vis {
        width: 700px;
        margin-left: auto;
        margin-right: 0;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .print-report-table {
        width: 900px;
        margin: 0 auto;
    }

    .print-report-trial-notes {
        padding: 0;
        margin: 0;
        width: 900px;
    }

    /* Larger modal dialog for trial reports */
    .es-popup.-es-open.-es-modal .es-popup-content.modal-trial-report {
        max-width: 1000px;
    }

    .es-popup.-es-open .es-popup-header h2.ml-report-title-header {
        display: block;
    }
    .ml-report-title {
        float: right;
        margin-right: 15px;
    }

    .report_vis_div {
        margin-top: 15px;
        margin-left: auto;
        margin-bottom: 10px;
        margin-right: auto;
    }

    .trial-log-button {
        cursor: pointer;
        padding: 5px;
    }
}

@media screen, print {
    .vis_error_msg {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Gait cycle chart styles */
    .gait-chart-div {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .gait_chart_svg {
        margin: 0 auto;
    }

    .swing_l, .swing_r, .stance_l, .stance_r, .dbl_support {
        stroke-width: 1px;
        stroke: #8c8c8c;
    }

    .swing_l, .swing_r {
        fill: #ffd000;
        opacity: 0.7;
    }

    .stance_l, .stance_r {
        fill: #009fbf;
        opacity: 0.5;
    }

    .dbl_support {
        fill: #009fbf;
    }

    .padded-btn {
        margin: 10px;
    }

    .right-button-container {
        margin-top: 20px;
    }

    ul {
        list-style-type: none;
    }

    .trial_day_cell {
        background-color: #eeeeee;
        margin: 20px 10px 20px 10px;
        padding: 10px 10px 10px 15px;
        font-weight: 500;
    }

    .ml-trial-day-cell-date {
        color: #000;
        font-size: 1.2em;
        font-weight: bold;
    }

    .trial-day-cell-sequence-list {
        padding-left: 1em;
    }

    .sequence-expand-btn {
        padding-left: 5px;
    }

    .sequence-incomplete-btn {
        padding-left: 5px;
        color: #ff5500;
    }

    .nav-pills,
    .nav-tabs {
        font-size: 1.4em;
        font-weight: bold;
    }
    /*
       a {
       color: #4ac4d4;
       }

       a:hover, a:focus {
       color: #009fbf;
       } */

    .nav-pills > li > a,
    .nav-tabs > li > a {
        color: #939597;
    }

    .nav-pills > li.active > a,
    .nav-pills > li.active > a:hover,
    .nav-pills > li.active > a:focus,
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: #000;
    }

    .nav-pills > li > a {
        border-style: solid;
        border-width: 1px;
        border-color: #adadad;
        margin: 0 10px;
    }

    .nav-pills > li.active > a,
    .nav-pills > li.active > a:hover {
        background-color: #eeeeee;
    }

    .scrollable-menu {
        height: auto;
        max-height: 500px;
        overflow-x: hidden;
    }

    .user-name {
        color: #4ac4d4;
        padding: 20px 5px;
    }

    /* Bootstrap button overrides */
    .popover {
        width: 380px;
        max-width: none;
    }

    /* Table overrides */
    .metric-table tbody tr.selected-row td {
        background-color: rgba(255, 208, 0, 0.4);
    }

    .selectable-row-cell {
        cursor: pointer;
    }

    /* Slider */
    .ml-slider-label {
        padding-left: 1.5rem;
        padding-top: 0.5rem;
        font-weight: bold;
        font-size: 16px;
    }

    /* Borders */
    .right-border {
        border-right: 1px solid #e5e5e5;
    }

    /* Configuration Page */
    .sensor-entry {
        width: 5em;
    }

    .has-feedback .form-control {
        padding-right: 10px;
    }

    /* Options page  */
    .ml-inline-header {
        display: inline-block;
        padding: 0.5rem;
    }

    .es-form-field.-es-aligned .es-textbox.ml-test-selection-label {
        float: none;
        padding-left: 0.5rem;
        width: auto;
    }

    .ml-test-selection-label {
        padding-left: 0.5rem;
    }

    .test-completion-label {
        font-size: 1.2em;
        margin-left: 1em;
        margin-top: 10px;
    }

    .test-selection-custom-top-header {
        margin-top: 10px;
        margin-bottom: 12px;
    }

    .test-selection-admin-top-header {
        margin-top: 5px;
        margin-bottom: 12px;
    }

    .test-selection-admin-sub-header {
        margin-top: 28px;
        margin-bottom: 10px;
    }

    .test-entry {
        margin-bottom: 10px;
    }

    .test-series-sequence-trial {
        display: block;
        margin-left: 52px;
        margin-bottom: 5px;
    }

    /* Styling for the next-prev arrows in the modal report */
    .next-prev-container {
        color: #3b3f40;
        padding-top: 155px;
    }

    .next-prev-container:hover {
        color: #4ac4d4;
    }

    .next-prev-container.right {
        float: right;
    }

    .next-prev-container.left {
        float: left;
    }

    .next-prev-container.info {
        left: 48px;
        top: 34px;
        bottom: 0;
    }

    .ml-next-prev-btn {
        font-size: 3em;
    }

    /* Report buttons */
    .vis-switch-btn {
        position: relative;
        top: 8px;
        left: 844px;
        cursor: pointer;
    }

    .metric-info-btn {
        display: inline;
        position: relative;
        top: 4px;
        cursor: pointer;
    }

    .lower-table-buttons {
        margin-bottom: -40px;
    }

    .table-button-container {
        display: inline-block;
    }

    /* Metric info popover */
    .metric-info-popover {
        width: 340px;
        margin: 10px auto;
        padding-top: 10px;
        border-top: 1px solid #e5e5e5;
    }

    /* Multi-test overview tables */
    .multi-test-overview-table {
        display: inline-block;
        width: 47%;
    }

    .test-table {
        margin-left: 6%;
    }

    /* Metric results table classes */
    .table-sub-header {
        text-align: center;
    }

    .metric-table > tbody > tr > td {
        text-align: center;
    }

    .metric-table > thead > tr > th {
        text-align: center;
    }

    .svg-table-header-rect {
        fill: #009FBF;
    }

    .svg-table-header-text {
        font-weight: bold;
        fill: #ffffff;
    }

    .svg-table-row-rect {
        fill: #fff;
        pointer-events: all;
        cursor: pointer;
    }

    .svg-table-row-rect:hover {
        fill: #F5F5F5;
    }

    .svg-table-selected-row {
        fill: #ffd000;
        opacity: 0.4;
    }

    .svg-table-row-line {
        stroke-width: 1px;
        stroke: #ddd;
    }

    .svg-table-text {
        pointer-events: none;
        text-anchor: start;
        font-weight: lighter;
    }

    /* Metric Overview view styles */
    .overview-header-g {
        font-size: 27px;
    }

    .overview-header-g > text > tspan {
        fill: #777;
        font-size: smaller;
    }

    .overview-subheader {
        font-size: 18px;
    }

    .metric-group-g .axis {
        stroke-opacity: 0;
        pointer-events: none;
        font-size: 14px;
    }

    .overview-entry > line,
    .overview-vertical-grid > line {
        stroke: #bcbec0;
        stroke-width: 1px;
        pointer-events: none;
    }

    .overview-vertical-grid > text {
        stroke: #bcbec0;
        fill: #bcbec0;
        text-anchor: middle;
    }

    .overview-entry > circle {
        fill: #bcbec0;
        stroke: #bcbec0;
        pointer-events: none;
    }

    .overview-key-circle-empty {
        fill: none;
        stroke: #bcbec0;
    }

    .overview-key-circle-full {
        stroke: #bcbec0;
        stroke-width: 2px;
        fill: #bcbec0;
    }

    .overview-value-text {
        pointer-events: none;
    }

    .overview-norm-range-rect {
        fill: #000;
        opacity: 0.18;
        pointer-events: none;
    }

    .overview-entry-select-rect {
        fill: #f5f5f5;
        opacity: 0;
    }

    .overview-entry-select-rect-selected,
    .overview-entry-select-rect:hover {
        fill: #f5f5f5;
        opacity: 1;
    }

    .overview-table-column-header {
        text-anchor: middle;
    }

    .overview-table-cell {
        text-anchor: middle;
        pointer-events: none;
    }

    .overview-bilateral-circle {
        opacity: 0.7;
    }

    /* Links that we need pointer on */
    .link {
        cursor: pointer;
    }

    .link-disabled {
        color: #929292;
    }

    .ten-point-margin {
        margin: 10px;
    }

    /***************************************************************************
     * Plot styles
     **************************************************************************/

    /* Export icon on ApdmPlot instances */
    .apdm-plot-icon {
        fill: gray;
        stroke: gray;
    }
    .apdm-plot-icon:hover {
        fill: black;
        stroke: black;
    }

    /* Justified text for SVG */
    .svg-text-right {
        text-anchor: end;
    }

    .svg-text-left {
        text-anchor: start;
    }

    /* Rotation and position helpers */
    .rotate-ninety {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
    }

    /* Visualization div on report */
    .ml-center {
        text-align: center;
    }

    .vis_label {
        font-weight: bold;
    }

    /* Longitudinal Plot styles */
    .longitudinal-plot-div {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    #longitudinal-plot {
        background-color:white;
        margin:20px;
        border:2px solid;
        border-color:#4c4b4d;
        border-radius:12px;
    }

    .bold {
        font-weight:bold;
    }

    .axis path,.axis line {
        fill: none;
        stroke: #000;
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }

    .grid .tick {
        stroke: lightgrey;
        opacity: 0.5;
    }

    .grid path {
        stroke-width: 1px;
    }

    .point {
        fill: #4ac4d4;
        stroke: #3b3f40;
        stroke-opacity: 0.4;
    }

    .secondary-point {
        fill: #252869;
        fill-opacity: 0.60;
        stroke: #3b3f40;
        stroke-opacity: 0.4;
    }

    .norm_line {
        stroke: #4c4b4d;
        stroke-width: 2px;
    }

    .norm_range_rect {
        fill: #d1d2d4;
    }

    .trend_line {
        stroke: #4ac4d4;
        stroke-width: 2px;
        pointer-events: none;
        fill: none;
    }

    .secondary-trend-line {
        stroke: #252869;
        stroke-width: 2px;
        pointer-events: none;
        opacity: 0.4;
        fill: none;
    }

    .left-text {
        color: #009fbf;
    }

    .right-text {
        color: #ff5500;
    }

    .longitudinal_tooltip {
        position: absolute;
        text-align: center;
        padding: 5px;
        background:#f5f5f5;
        border: 0;
        border-radius: 8px;
        pointer-events: none;
        visibility:hidden;
        z-index:1000;
    }

    .pointer_mask {
        fill: white;
        opacity: 0.1;
        pointer-events: none;
    }

    /* Bar graph */
    .bar-plot-div {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .bar {
        opacity: 0.6;
    }

    .bar-selected {
        opacity: 1;
        stroke-width: 2px;
        stroke: #0e0f0f;
    }

    .bar:hover {
        opacity: 1;
        stroke-width: 1px;
        stroke: #3b3f40;
    }

    .bar-plot-x-axis-button {
        fill: none;
        opacity: 0.6;
        stroke: #3b3f40;
        stroke-width: 2px;
    }

    .bar-plot-x-axis-button:hover {
        fill: white;
        opacity: 1;
    }

    .bar-plot-selected-x-axis-button {
        fill: #4ac4d4;
        opacity: 1;
        stroke: #3b3f40;
        stroke-width: 2px;
    }

    .bar-plot-baseline-label {
        text-anchor: end;
    }

    .bar-plot-tooltip-text {
        font-weight: bold;
        font-size: 12px;
        text-anchor: start;
    }

    .key_container path {
        fill: none;
        stroke: none;
    }

    .Sit-to-Stand {
        fill: #00a38b;
        opacity: 0.7;
    }

    .Stand-to-Sit {
        fill: #479a44;
        opacity: 0.7;
    }

    .Turns {
        fill: #5e6fb4;
        opacity: 0.7;
    }

    .start-end-delay {
        fill: #3b3f40;
        opacity: 0.2;
    }

    /* Results table longitudinal plot tooltip */
    .plot_tooltip {
        background-color:white;
        border: 0;
        border-radius: 8px;
        pointer-events: none;
        visibility:hidden;
        font-size:x-small;
        position: absolute;
        text-align: center;
        z-index: 1000;
    }

    /* Stabilogram styles */
    .stabilogram-container {
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    .stabilogram_plot_svg {
        position: absolute;
        top: 0;
        left: 0;
    }

    .stabilogram-canvas {
        position: absolute;
    }

    .stabilogram_line {
        stroke-width: 1px;
        stroke: #000;
        fill: none;
    }

    .stabilogram-current-point {
        fill: #e8c640
    }

    .stabilogram_normal_ellipse {
        fill: #d1d2d4;
    }

    .stabilogram-conf-ellipse {
        fill: none;
        stroke: #265dab;
        stroke-width: 3px;
        opacity: 1;
    }

    /* Comparision stabilogram */
    .stabilogram-compare-ellipse {
        fill: none;
        stroke-width: 3px;
    }

    .stabilogram-compare-key-text {
        font-weight: bold;
        cursor: pointer;
    }

    /* Raw data plot */
    .checkbox-label {
        font-size: 14px;
        margin-top: 7px;
    }

    /* Metric visualization styles */
    .metric-vis-norm-range {
        fill: #d1d2d4;
    }

    .metric-vis-subject-range {
        fill: #0d668f;
    }

    .metric-vis-subject-range-circle {
        fill: #3b3f40;
    }

    .metric-vis-subject-range-line {
        stroke: #3b3f40;
        stroke-width: 3px;
    }

    .metric-vis-dashed-line {
        stroke-width: 3px;
        stroke-dasharray: 5, 5;
        stroke: #000;
    }

    .metric-vis-mean-line {
        stroke-width: 3px;
        stroke: #58595b;
    }

    .metric-vis-circle-label {
        text-anchor: middle;
        font-size: 14px;
        font-weight: bold;
    }

    .metric-vis-subject-text {
        font-size: 32px;
        font-weight: bold;
        fill: #0d668f;
        text-anchor: middle;
    }

    .metric-vis-unilateral-subject-text {
        font-size: 65px;
        font-weight: bold;
        fill: #0d668f;
        text-anchor: middle;
    }

    .metric-vis-norm-text {
        font-size: 18px;
        font-weight: bold;
        fill:#494a4b;
        text-anchor: middle;
    }

    .metric-vis-label-text {
        font-size: 12px;
        font-weight: bold;
        text-anchor: middle;
    }

    .metric-vis-units {
        font-size: 12px;
        font-weight: bold;
        fill: #3b3f40;
        text-anchor: start;
    }

    .metric-vis-max-range-text {
        text-anchor: middle;
        font-size: 12px;
        font-weight: bold;
    }

    .axis path,.axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    /* Grid lines */
    .grid .tick {
        stroke: lightgrey;
        opacity: 0.5;
    }
    .grid path {
        stroke-width: 1;
    }

    .x_axis_line {
        stroke-width: 1px;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .zero_x_tick_mask {
        fill: white;
    }

    .zero_x_tick {
        font-size: 100%;
    }

    .primary_lines {
        stroke-width: 1.0px;
        shape-rendering: auto;
    }

    .secondary_lines {
        stroke-width: 3.0px;
        shape-rendering: auto;
        opacity: 0.3;
    }

    .line_x {
        fill: none;
        stroke: red;
    }

    .line_y {
        fill: none;
        stroke: green;
    }

    .line_z {
        fill: none;
        stroke: blue;
    }

    .line_scalar {
        fill: none;
        stroke: purple;
    }

    .brush .extent {
        stroke: #929292;
        stroke-width: 1px;
        fill-opacity: .125;
        shape-rendering: crispEdges;
    }

    .resize-handle {
        fill: #4bc4d4;
        fill-opacity: 0.7;
        stroke: #929292;
        stroke-width: 1px;
    }

    .brush-ticks > .domain {
        stroke-width: 0;
    }

    .zoom {
        pointer-events: all;
        opacity: 0;
        cursor: row-resize;
    }

    .focus-line {
        stroke: black;
        opacity: 0.7;
        stroke-width: 1px;
    }

    .focus-text {
        font-size: 12px;
    }

    .focus-text-rect {
        fill: #fff;
        opacity: 0.7;
    }

    .focus-text.x-value {
        fill: red;
    }

    .focus-text.y-value {
        fill: green;
    }

    .focus-text.z-value {
        fill: blue;
    }

    .focus-text.scalar-value {
        fill: purple;
    }

    .focus-text.time-value {
        fill: black;
    }

    .test-btn {
        margin-right: 10px;
    }

    /* Run test */
    .ml-disabled-breadcrumb {
        visibility: hidden;
        pointer-events: none;
        color: inherit;
    }

    .run-test-header {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .test-dialog-header-name {
        font-weight: normal;
    }

    .completed-test-condition {
        margin-top: 10px;
    }

    .test-instructions {
        font-size: 1.2em;
    }

    .test-instructions li {
        padding: 4px;
    }

    .test-instructions ul {
        list-style-type: disc;
    }

    .ml-test-timer {
        margin-top: 50px;
        margin-bottom: 25px;
        font-size: 42px;
    }

    .test-timer-digits {
        font-size: 100px;
    }

    .test-completed-header h3 {
        display: inline;
    }

    .test-completed-log-msg {
        font-size: 18px;
    }

    /* Trial to logged recording page styles */
    .logged-recording-time-container {
        margin-bottom: 2em;
        margin-left: 2em;
        margin-top: 1em;
    }
}

/* Run test hardware placement dialog */
@keyframes sensor-circles {
    0%       {opacity: 1}
    50%      {opacity: 0.2}
    100%     {opacity: 1}
}
.
/* Admin instructions page styling */
.sensor_image {
    fill: red;
}

/* Text colors from ERT style */
/* FIXME: Pull this in from ERT .sass files when we switch this over to using SASS */
.ml-text-danger {
    color:  #e6474d;
}

.ml-text-warning {
    color: #f5d90a;
}

.ml-text-success {
    color: #46a758;
}

.es-panel-group >.es-grid.es-panel {
    padding: 0;
}

.es-panel-group >.es-grid.es-panel > .es-grid-body {
    padding: 5px;
}

/* For iconic icons in side menu */
.es-nav-item .iconic+label {
    margin-left: 1rem;
}

.ml-header-tooltip {
    text-align: center;
}

/* Warning icons in global header bars */
.ml-header-warning {
    font-size: 2em;
}

/* Don't let dropdown menu go off page */
.-es-open.es-dropdown ul.ml-header-dropdown {
    right: 0;
    left: auto;
}

/* Colors for test condition bars in bar plots and color picker*/
.ml-color-button {
    padding: 1.25em;
}

.ml-color-button:hover {

}

.ml-color-color1, .ml-color-color1:hover {
    color: #4ac4d4;
    background: #4ac4d4;
}

.ml-color-color2, .ml-color-color2:hover {
    color: #ff9e4a;
    background:#ff9e4a;
}

.ml-color-color3, .ml-color-color3:hover {
    color: #cdcc5d;
    background: #cdcc5d;
}

.ml-color-color4, .ml-color-color4:hover {
    color: #9467bd;
    background: #9467bd;
}

.ml-color-color5, .ml-color-color5:hover {
    color: #ed97ca;
    background: #ed97ca;
}

.ml-color-color6, .ml-color-color6:hover {
    color: #a8786e;
    background: #a8786e;
}

.ml-color-color7, .ml-color-color7:hover {
    color: #ad8bc9;
    background: #ad8bc9;
}

.ml-color-color8, .ml-color-color8:hover {
    color: #499894;
    background: #499894;
}

.ml-color-color9, .ml-color-color9hover {
    color: #729ece;
    background: #729ece;
}

.ml-color-color10, .ml-color-color10:hover {
    color: #ffbe7d;
    background: #ffbe7d;
}

/* Bell icon inside notification */
.ml-notification-bell {
    display: inline-block;
    font-family: ert-icons;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    font-size: 1em;
    line-height: 1em;
}

.ml-notification-bell:before {
    content: "\e08a";
}

/* Progress bar - taken from Bootstrap 3 */
.ml-progress {
    height: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #fff;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ml-progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #148f80;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

/* Grid to display CTSIB stabilograms */
.stabilogram-grid {
    display: grid;
    grid-template-columns: 1fr 1fr
}