/* PLEASE MAKE BEST ATTEMPT TO PLACE NEW DEFINITIONS IN APPROPRIATE SECTION */

@media print {

    /* fixes printing issue where Bootstrap's print reset removes all background colors for all elements */
    .btn-default.active,
    .btn-default:active {
        background-color: #e6e6e6 !important;
        font-weight: bold;
        border-color: #000;
    }
}

/* ----- Table of Contents ---- */
/* 
    HTML / Body
    Navigation
    Bootstrap Stuff
    Flexbox Bootstrap Columns
    Text Utilities
    Background Utilities
    Spacing Utilities
    Alignment Utilities
    Error Validation
    Specific Components
        - Notes
        - Self Registration
        - Patient/Trainer Dashboard
        - Radio Question Control
        - Trialed Tests
        - Scoring Legend
*/


/* -- HTML / Body / Block elements -- */
html {
    font-size: 87.5%; /* 14px if default browser font size is 16px */
}

body {
    font-size: 0.95rem;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p, ul, ol, figure, address, .address, blockquote {
    margin-bottom: 1rem;
}

ul.spaced > li {
    margin-bottom: 1rem;
}

/* --- Navigation -- */
    .navbar-header-container {
        display: flex;
        align-items: center;
    }
    .navbar-header-container > .pull-right {
        margin-left: auto;
        float: none;
    }

    .navbar-primary {
        background-color: #fff;
        border-color: #E7E7E7;
        border-bottom: none;
        margin-bottom: 0;
        z-index: 1001;
    }
    .navbar-primary .navbar-brand {
        float: none;
    }

    .navbar-secondary {
        background-color: #0e6db9;
        color: #fff;
        border-radius: 0;
        z-index: 1000;
    }

    .navbar-secondary .navbar-nav > li > a {
        color: #fff;
    }

    .navbar-secondary .navbar-nav > li > a:hover {
        background-color: #E7E7E7;
    }

    .navbar-custom .navbar-nav > .active > a,
    .navbar-nav > .active > a:hover,
    .navbar-nav > .active > a:focus {
        color: #fff;
        background-color: transparent;
    }

    .navbar-secondary .navbar-brand {
        color: #eeeeee;
    }
    .navbar-secondary .container > .navbar-collapse {
        margin-left: -15px;
        margin-right: -15px;
    }

    .navbar-secondary .navbar-nav > li > a.hide-glyph > .glyphicon {
        display: none;
    }

    .navbar-user-options,
    .navbar-primary .user-options {
        margin-top: 30px;
        z-index: 1001;
    }

/* -- Bootstrap Stuff -- */
    @media (min-width: 1400px) {
        .container {
            width: 1320px;
        }
    }

    /* Alerts */
    .alert-large-notice {
        font-size: 20px;
        color: #ff0000;
    }

    /* - Bootstrap Form, Input Elements - */
    .form-group {
        margin-bottom: 18px;
    }

    .input-group .input-group-addon .glyphicon {
        line-height: 0.9; /* fixes extra 1px height when glyphicon is used within input-group-lg > input-group-addon */
    }

    .checkbox-inline label,
    .radio-inline label {
        font-weight: 400;
        cursor: pointer;
    }

    .datepicker[readonly]:not([disabled]) {
        background-color: #fff;
    }

    .form-control.error {
        border-color: #ff0000;
    }
    .form-control.error + label.error {
        font-weight: normal;
        color: #ff0000;
        font-size: 0.875rem;
    }

    .control-label + .radio,
    .control-label + .checkbox,
    .control-label + .help-block {
        margin-top: 0;
    }

    
    .btn-form {
        text-transform: uppercase;
        padding-left: 30px;
        padding-right: 30px;
    }

    .input-small {
        width: 46px;
    }

    /* -- Bootstrap Panels -- */
    .panel-heading {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .panel-main {
        border-color: #DDDDDD;
        -moz-box-shadow: 0 0 3px #cccccc;
        -webkit-box-shadow: 0 0 3px #cccccc;
        box-shadow: 0 0 3px #cccccc;
    }

    .panel-main > .panel-heading {
        background-color: #fff;
        background: #2673cf;
        background: url('../images/common/panel-heading-bg.png') 0 0 repeat-x;
        background: -webkit-linear-gradient(#3ea9e1, #2673cf);
        background: -moz-linear-gradient(#3ea9e1, #2673cf);
        background: -ms-linear-gradient(#3ea9e1, #2673cf);
        background: -o-linear-gradient(#3ea9e1, #2673cf);
        background: linear-gradient(#3ea9e1, #2673cf);
    }

    .panel-main > .panel-body {
        background-color: #fff;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        -moz-border-bottom-left-radius: 4px;
        -moz-border-bottom-right-radius: 4px;
    }

    .panel-main > .panel-heading > h3.panel-title {
        font-size: 1.6rem;
        color: #fff;
    }

    .panel-fieldset {
        border-color: #e4ecee;
    }

    .panel-fieldset > .panel-heading {
        background-color: #fff;
        border-color: #e4ecee
    }

    .panel-fieldset > .panel-heading > h2,
    .panel-fieldset > .panel-heading > h3,
    .panel-fieldset > .panel-heading > h4 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .panel-fieldset > .panel-body {
        background-color: #eef6f8;
    }

    .panel-fieldset .scoring-summary .table {
        background-color: #fff;
    }

    .panel-fieldset .scoring-summary .table > thead > tr > td,
    .panel-fieldset .scoring-summary .table > thead > tr > th {
        background-color: #aaaaaa;
        color: #fff;
    }

    .panel-plain {
        border-color: #e4ecee;
    }

    .panel-plain > .panel-heading {
        background-color: #fff;
        border-color: #e4ecee
    }

    .panel-plain > .panel-body {
        background-color: #fff;
    }


/* - Bootstrap Tables and Datatables - */

    .table.table-striped {
        border-bottom: 1px solid #DDDDDD;
    }

    .table.table-striped caption + thead tr:first-child th,
    .table.table-striped colgroup + thead tr:first-child th,
    .table.table-striped thead:first-child tr:first-child th,
    .table.table-striped caption + thead tr:first-child td,
    .table.table-striped colgroup + thead tr:first-child td,
    .table.table-striped thead:first-child tr:first-child td {
        background-color: #F5F5F5;
        border-top: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD
    }

    .table-striped tbody tr.highlight:nth-child(odd) td {
        background-color: #fffedf !important;
    }

    .table tr.row-template {
        display: none;
    }

    .table .action-buttons {
        text-align: right;
    }

    .table .action-buttons ul {
        text-align: left;
    }

    table.dataTable thead th {
        padding: 5px !important;
    }
    table.dataTable thead tr.search-row th,
    table.dataTable thead tr.search-row td {
        background-color: #f1f1f1 !important;
        text-align: left;
        padding: 10px;
        border-top: 1px solid #ccc !important;
    }
    table.dataTable thead tr.search-row th:first-child,
    table.dataTable thead tr.search-row td:first-child {
        border-left: 1px solid #ccc;
    }
    table.dataTable thead tr.search-row th:last-child,
    table.dataTable thead tr.search-row td:last-child {
        border-right: 1px solid #ccc;
    }


    table.dataTable tr.search-row .form-control {
        width: 100%;
        display: block;
    }

    .custom-data-table-search-container .search-label {
        text-align: left;
    }

    /*.dt-wrapper {
        min-height: 300px;
    }*/

    .glyphicon-dt-data {
        font-size: 1.15rem;
        color: #337ab7;
    }
    .glyphicon-dt-data.glyphicon-ok {
        color: green;
    }
    .glyphicon-dt-data.glyphicon-remove {
        color: red;
    }

    .dataTables_wrapper .dt-buttons {
        margin-bottom: 6px;
    }

    .dt-wrapper {
        min-height: unset;
    }
    table.table-inside-borders-none tr td {
        padding: 4px 8px;
    }
    table.table-inside-borders-none tr th.col-data,
    table.table-inside-borders-none tr td.col-data {
        width: 115px;
        text-align: center;
    }
    table.table-inside-borders-none tr:not(:last-child) td {
        border-top-color: transparent;
        border-bottom-color: transparent;
    }
    table.table-inside-borders-none tr.heading-row td {
        padding-top: 1rem;
    }

    table.trials-table thead tr th {
        background-color:#c0c0c0;
        text-align: center;
    }

/* -- Flexbox Bootstrap Columns -- */
    .row-flex {
        display: -webkit-flex; /* Safari */
        -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
        display: flex;
        flex-flow: row wrap;
    }

    .row-flex:after,
    .row-flex:before {
        display: none;
    }

    .row-flex [class^="col-"][class$="-12"] {
        width: 100%;
    }
    .row-flex .col {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px
    }

    .col-flex {
        display: -webkit-flex;
        display: flex;
        flex-flow: column wrap;
    }

    .flex {
        display: -webkit-flex;
        display: flex;
    }
    .flex-row {
        -webkit-flex-direction: row;
        flex-direction: row;
        flex-flow: row wrap;
    }
    .flex-column {
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .flex-align-end {
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    .flex-align-center {
        -webkit-align-items: center;
        align-items: center;
    }

    .flex-justify-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    .flex-justify-center {
        -webkit-justify-content: center;
        justify-content: center;
    }
    .flex-justify-space-between {
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .flex-grow-1 {
        flex-grow: 1;
    }

/* -- Text Utilities -- */
    .required-field:after {
        content: '\00a0*';
        color: #ff0000;
        font-weight: normal;
        font-size: 0.9em;
        white-space: nowrap;
    }

    .grey-bold {
        font-weight: bold;
        color: #333333;
    }

    .text-grey {
        color: #aaa;
    }

    .copyright {
        color: #aaa;
        padding: 10px 0px 5px 0px;
        font-size: 0.7rem;
    }

    .repeater-item:not(:first-child) .repeater-label {
        display: none;
    }

    @media print {
        .repeater-form-contents .repeater-item:last-child {
            display: none;
        }
    }

    .strong {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .text-primary {
        color: blue;
    }
    .text-alert {
        color: red;
    }

    .text-to-be-read {
        color: royalblue;
        font-style: italic;
    }

/* -- Background Utilities -- */
    .bg-light-blue {
        background-color: #eef6f8;
    }

    .highlight,
    .bg-highlight {
        background-color: #fffedf !important;
    }

/* -- Spacing Utilities -- */
    .w-100 {
        width: 100%;
    }
    @media (max-width: 767.98px) {
        .w-xs-100 {
            width: 100%;
        }
    }

    @media (min-width: 768px) {
        .w-sm-100 {
            width: 100%;
        }
    }
    @media (min-width: 992px) {
        .w-md-100 {
            width: 100%;
        }
    }
    @media (min-width: 1200px) {
        .w-lg-100 {
            width: 100%;
        }
    }

    .d-block {
        display: block;
    }

    .rom-margin {
        margin-top: 55px;
    }

    .user-info td {
        padding-right: 5px;
    }

    .mt-0 { margin-top: 0 !important; }
    .mt-1 { margin-top: 0.5rem !important; }
    .mt-2 { margin-top: 0.75rem !important; }
    .mt-3 { margin-top: 1rem !important; }
    .mt-4 { margin-top: 1.5rem !important; }
    .mt-5 { margin-top: 2rem !important; }

    .mb-0 { margin-bottom: 0 !important; }
    .mb-1 { margin-bottom: 0.5rem !important; }
    .mb-2 { margin-bottom: 0.75rem !important; }
    .mb-3 { margin-bottom: 1rem !important; }
    .mb-4 { margin-bottom: 1.5rem !important; }
    .mb-5 { margin-bottom: 2rem !important; }

/* -- Alignment Utilities -- */
    .input-centered {
        margin-left: auto;
        margin-right: auto;
    }

    .valign-top {
        vertical-align: top;
    }
    .valign-middle {
        vertical-align: middle;
    }
    .valign-bottom {
        vertical-align: bottom;
    }

/* -- Error Validation -- */
    .has-error .help-text,
    .has-error.help-text {
        color: #b94a48;
    }

    .has-error .ng-validate-error {
        display: block;
    }

    .ng-validate-error {
        display: none;
    }

/* -- Specific Components -- */
    /* - Notes - */
    #notes .panel-heading {
        padding: 5px 15px;
    }

    #notes .note-maker {
        float: left;
        color: #000;
        font-size: 12px;
        padding-bottom: 5px;
        
    }
    #notes .note-maker::before {
        display: inline;
        content: 'by ';
    }

    #notes .note-date {
        float: right;
        color: #999;
        font-size: 12px;
        padding-bottom: 5px;
    }

    #notes .note-title {
        height: 17px;
    }

    #note-template {
        display: none;
    }


/* - Self Registration - */
    .at-self-reg .panel-group .panel {
        margin-bottom: 18px;
    }

    .at-self-reg .panel-group > .panel {
        margin-bottom: 0;
    }

    .at-self-reg .panel-heading > .panel-title > a {
        display: block;
    }

/* - Patient/Trainer Dashboards - */
    .info-block {
        text-align: center;
    }

    .info-block p {
        text-transform: uppercase;
        color: #737373;
    }

    .info-block h1 {
        font-weight: 700;
        color: #428BCA;
    }

    .info-block.loading > h1::before {
        content: url('/images/css/loader-16x16.gif');
        position: relative;
    }

    .table .patient-num-current-injuries,
    .table .patient-num-draft-forms,
    .table .patient-num-overdue-forms {
        text-align: center;
    }

    /* Radio Question Control */
    .ctrl-radio-group .help-text {
        font-size: 11px;
    }

    /* Trialed Tests */
    .table-trialed-tests > thead > tr > th {
        background-color: #c0c0c0;
    }

    /* Scoring Legend */
    .table-scoring-legend {
        margin-bottom: 20px;
    }
    .table-scoring-legend > tbody > tr > td {
        text-align: center;
        vertical-align: middle;
    }
    .table-scoring-legend > tbody > tr > td > h4 {
        margin: 0;
    }

    /* form-feedback-note */
    .form-feedback-note-container .form-feedback-note-badge {
        transition: height 0s, font-size 0s;
        height: 0;
        font-size: 0rem;
        transition-delay: 2s;
        width: 2rem;
        background-color: black;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        position: absolute;
        z-index: 1000;
        margin-left: -1rem;
    }

    .form-feedback-note-container .form-feedback-note-badge.has-notes {
        background-color: #337ab7;
        height: 2rem;
        font-size: 1rem;
        transition-delay: 0s;
    }
  
    .form-feedback-note-badge > * {
        font-size: inherit;
    }
    /* Show the tooltip text when you mouse over the tooltip container */
    label.btn.btn-default:hover .form-feedback-note-container .form-feedback-note-badge,
    .form-feedback-note-container:hover .form-feedback-note-badge {
        height: 2rem;
        font-size: 1rem;
        transition-delay: 0s;
    }

    label.btn.btn-default:hover .form-feedback-note-container.academic-student .form-feedback-note-badge:not(.has-notes),
    .form-feedback-note-container.academic-student:hover .form-feedback-note-badge:not(.has-notes) {
        height: 0;
        font-size: 0rem;
        transition-delay: 0s;
    }

    .form-feedback-side-note {
        position: fixed;
        border-color: #DDDDDD;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;  
        box-shadow: 0 0 3px #cccccc;
        padding: 1rem;
        opacity: 1;
        font-weight: normal;
        text-align: start;
        background-color: #fff;
        z-index: 1000;
    }

    .form-feedback-side-note.active {
        border-color: #337ab7;
        border-style: solid;
        z-index: 10000;
        box-shadow: rgb(0 0 0 / 69%) -2px 2px 14px 12px;
    }

    .note-container {
        display: flex;
        align-items: center;
        padding: 1rem;
        margin-top: 1rem;
        border-color: #e4ecee;
        border: 1px solid transparent;
        border-radius: 4px; 
        box-shadow: 0 0 3px #cccccc;
        white-space: normal;
    }

    .note-createdby {
        flex: 0 0 auto;
        text-align: center;
        width: 15%;
        overflow: hidden;
    }

    .note-content-container {
        flex: 1 1 100%;
        padding-left: 1rem;
    }

    .note-content {
        font-size: large;
    }

    .note-time {
        color: gray;
    }

    .note-action {
        flex: 1 1 auto;
        text-align: center;
        margin-left: 5%;
    }

    .note-input-container {
        display: flex;
        align-items: center;
    }

    .note-input-input {
        flex: 1 1 100%;
    }

    .submit-note-button {
        float: none !important;
        flex: 0 0 auto;
    }

    .delete-note-button {
        margin-top: 0.2rem;
    }

    .form-feedback-note-container>.btn input[type=radio] {
        position: absolute;
        clip: rect(0,0,0,0);
        pointer-events: none;
    }

    .btn-group-justified>.form-feedback-note-container, .btn-group-justified>.form-feedback-note-container>.btn {
        display: table-cell;
        float: none;
        width: 1%;
    }

    .close-note-button-container {
        display: none;
        margin-bottom: 0.5rem;
    }

    @media (max-width: 1700px) {
        .form-feedback-side-note {
            display: none;
        }

        .close-note-button-container {
            display: flex;
        }
    }

/** logo */
    .logo-img {
        width: 284px;
    }
    .header-logo {
        width: auto;
        height: 56px;
    }

/* -- Loading Spinner -- */
.loading {
    display: block;
    text-align: center;
    margin: 1rem 0;
}
.loading__message {
    display: block;
    text-align: center;
}
.loading__ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.loading__ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #0e6db9;
  border-radius: 50%;
  animation: loadingAnimation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #0e6db9 transparent transparent transparent;
}
.loading__ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.loading__ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.loading__ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes loadingAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}