@font-face {
  font-family: Sansation;
  src:  url('./../vendor/CDN/sansation/fonts/Sansation_Regular.ttf'),
        url('./../vendor/CDN/sansation/fonts/Sansation_Bold.ttf'),
        url('./../vendor/CDN/sansation/fonts/Sansation_Italic.ttf'),
        url('./../vendor/CDN/sansation/fonts/Sansation_Bold_Italic.ttf'),
        url('./../vendor/CDN/sansation/fonts/Sansation_Light.ttf'),
        url('./../vendor/CDN/sansation/fonts/Sansation_Light_Italic.ttf');
}

* {
  font-family: Sansation;
}

/*Guidelines colours*/

:root {
  --blue-6: #0F0F49;
  --blue-5: #141464;
  --orange-6: #BF7800;
  --orange-5: #FFA000;
  --grey-6: #333333;
  --grey-5: #595959;
}

/* Hack to remove dotted ring around select boxes on firefox */

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

/* for angular */

.ng-hide {
  display: none !important;
}

/*
  Allow angular.js to be loaded in body, hiding cloaked elements until
  templates compile.  The !important is important given that there may be
  other selectors that are more specific or come later and might alter display.
 */

[ng\:cloak],
[ng-cloak],
.ng-cloak {
  display: none !important;
}

html {
  position: relative;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}

/* Top header is fixed position so pad past them*/

body {
  padding-top: 100px;
  color: #141464;
  background: #ffffff;
  margin-bottom: 150px;
  /* for footer */
  /*
  font-feature-settings: "liga", "kern";
  text-rendering: optimizelegibility;
  */
}

.navbar-fixed-top a.logo {
  display: flex;
}



.constrained-logo {
  max-width: 150px;
  max-height: 100px;
  min-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.navbar-fixed-top {
  background-color: var(--blue-6);
}

/* login info line */

.login-info {
  /* position: absolute;	*/
  top: 83px;
  right: 15px;
  padding-right: 10px;
  /*
  background: #ffffff;
  color: rgba(144, 168, 187, 0.6);
  text-shadow: 1px 4px 6px #fff,0 0 0 #445c6e, 1px 4px 6px #fff;
  font-family: "Black Ops One",Helvetica,sans-serif;
  font-size: 13px;
*/
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 4px;
  text-align: left;
  color: #141464;
  letter-spacing: 1px;
  word-spacing: 3px;
  float: right;
}

@media (max-width: 500px) {
  .login-info {
    font-size: 12px;
  }
}

.view-container {
  position: relative;
}

body,
.view-container,
.view-content,
.page {
  height: 100%;
  min-height: 100%;
}

.page::after {
  clear: both;
}

/*footer arrow at bottom */

.page::after {
  content: ' ';
  display: block;
  height: 45px;
}

/* footer styling */

footer#dynamic {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  z-index: 2000;
  overflow-y: hidden;
}

#footer-container {
  background: transparent;
  position: relative;
  width: 100%;
  z-index: 1000;
  overflow-y: hidden;
}

.footer-content {
  background-color: #ededed;
  color: rgb(20, 20, 100);
  padding: 15px 20px 10px;
  line-height: 1.33337;
  letter-spacing: -0.01em;
  font-size: 15px;
  width: 100%;
  height: 100%;
}

/* footer open/close arrow */

#footer-action {
  color: #141464;
  opacity: 0.75;
  line-height: 1.0em;
  font-size: 36px;
  z-index: 2015;
  height: 40px;
}

#footer-action .glyphicon:hover,
#footer-action .glyphicon.ng-animate {
  color: #FFA000;
}

#footer-action .glyphicon {
  cursor: pointer;
}

/* footer animation */

#footer-action .glyphicon {
  -webkit-transition: all ease 3.0s;
  transition: all ease 3.0s;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}

#footer-action .glyphicon.opened {
  -webkit-transition: all ease 3.0s;
  transition: all ease 3.0s;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

#footer-container.show-footer {
  -webkit-transition: all 1.0s ease 0s;
  transition: all 1.0s ease 0s;
}

#footer-container.hide-footer {
  -webkit-transition: all 1.0s ease 0s;
  transition: all 1.0s ease 0s;
}

#footer-container.show-footer {
  -webkit-transform: translateY(100%) translateY(-100%);
      -ms-transform: translateY(100%) translateY(-100%);
          transform: translateY(100%) translateY(-100%);
}

#footer-container.hide-footer {
  -webkit-transform: translateY(100%) translateY(-40px);
      -ms-transform: translateY(100%) translateY(-40px);
          transform: translateY(100%) translateY(-40px);
}

/* Footer Content */

.prescription-mark {
  font-size: 22px;
  font-weight: 100;
  text-rendering: optimizelegibility;
}

.footer-terms a {
  border-right: 1px solid #d2d2d7;
  margin-right: 7px;
  margin-bottom: 5px;
  padding-right: 10px;
  display: inline-block;
  white-space: nowrap;
}

.footer-terms a:last-child {
  border: none;
}

.footer-notes {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d2d2d7;
  line-height: 16px;
  color: rgb(68, 92, 110);
}

.footer-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

.footer-info div:first-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/* translation animation */

.animate-translate {
  -webkit-transition: all 3s;
  transition: all 3s;
}

.animate-translate.ng-enter {
  opacity: 0;
}

.animate-translate.ng-enter-active {
  opacity: 1;
}

.translate-cloak {
  opacity: 0;
}

/* general animation keyframes */

/* TODO fix name.  bootstrap has a fade that I don't want */

.fade2.ng-enter {
  -webkit-transition: 0.3s linear all;
  transition: 0.3s linear all;
  opacity: 0;
}

.fade2.ng-enter.ng-enter-active {
  opacity: 1;
}

.fade2.ng-leave {
  -webkit-transition: 1.0s linear all;
  transition: 1.0s linear all;
  opacity: 1;
}

.fade2.ng-leave.ng-leave-active {
  opacity: 0;
}

/* VIEW LAYOUT */

.view-content {
  position: relative;
  /*overflow: hidden;*/
  min-height: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin-bottom: 100px;
}

/* VARIOUS PAGE SETTINGS */

.profile-page form,
.settings-page form {
  margin-bottom: 20px;
  max-width: 450px;
}

/* SI links */

a,
a:link,
a:visited,
a:active {
  color: #62829a;
  text-decoration: none;
  outline: 0;
}

a.list-group-item {
  color: #ffffff;
}

a.white-link {
  color: #ffffff;
}

a.green-link {
  color: #00ff00;
}

a:hover,
a.white-link:hover {
  color: #FFA000;
  text-decoration: none;
}

.pointer {
  cursor: pointer;
}

/* agreement modal */

.agreement-modal {
  padding: 10px 20px;
  overflow: auto;
  max-height: 500px;
}

.agreement-modal .agreement-input p {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 0px;
  margin-right: 0px;
  text-indent: 0px;
  direction: ltr;
  line-height: 16px;
}

/* add credit modal */

.adjust-credit-modal .form-button-container {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

.adjust-credit-form label {
  font-size: 16px;
  margin-right: 10px;
}

.adjust-credit-form input[type=number] {
  width: 6em;
  outline: none;
}

.adjust-credit-form .action-selection .radio-inline {
  min-width: 200px;
  text-align: center;
  padding: 20px;
  padding-left: 40px;
  border-radius: 4px;
  border: 6px solid transparent;
}

.adjust-credit-form .action-selection .radio-inline.action-add {
  background: rgba(50, 200, 50, 0.3);
}

.adjust-credit-form .action-selection .radio-inline.action-add.is-checked {
  border-color: rgba(50, 200, 50, 0.3);
}

.adjust-credit-form .action-selection .radio-inline.action-subtract {
  background: rgba(200, 50, 50, 0.3);
}

.adjust-credit-form .action-selection .radio-inline.action-subtract.is-checked {
  border-color: rgba(200, 50, 50, 0.3);
}

.adjust-credit-form label .action-add,
.adjust-credit-modal button.action-add .action-label {
  color: rgb(50, 200, 50);
}

.adjust-credit-form label .action-subtract,
.adjust-credit-modal button.action-subtract .action-label {
  color: rgb(200, 50, 50);
}

.adjust-credit-modal .form-question {
  font-size: 20px;
}

/* forms */

form .error-input,
form .error-required {
  color: #850000;
  background: rgba(254, 186, 186, 0.5);
  border: 1px solid #850000;
}

form .error-text {
  position: relative;
  color: red;
  font-size: 11px;
  font-weight: 600;
  display: block;
  margin-left: 5px;
}

form button.push-down {
  margin-top: 10px;
}

form .radio-group {
  padding-top: 0px;
}

form .form-control.required {
  /* border: 1px solid #141464;
  background: rgba(255, 154, 53, 0.1); */
  border: 1px solid #671616;
  background: rgba(255, 100, 53, 0.2);
}

form .form-group.no-margin {
  margin-left: 0;
  margin-right: 0;
}

form .form-group label.label-sm {
  font-size: 12px;
}

/* forms in modal */

.modal-body form .input-group,
form .input-group {
  margin-bottom: 8px;
}

.modal-body form .input-group.no-space,
form .input-group.no-space {
  margin-bottom: 0px;
}

/* extra large modal */

@media (min-width: 1000px) {
  .modal-xxl .modal-lg {
    width: 90%;
  }
}

@media (max-width: 767px) {
  .narrow {
     margin-bottom: 20px;
  }
}

/* tables */

.si-table-data {
  height: auto
}

.si-table {
  height: calc(65vh);
  min-height: 350px;
}

.si-study-list-table {
  height: calc(65vh);
  min-height: 100px;
}

.si-table-menu {
  margin-top: 10px;
}

.si-table-menu .menu-button {
  padding-left: 0;
  padding-right: 0;
}

.si-table-menu .glyphicon {
  margin-right: 12px;
  font-size: 22px;
  cursor: pointer;
}

.si-table-menu .glyphicon:hover {
  color: #FFA000;
}

.si-table-control .glyphicon {
  margin-right: 12px;
}

.si-table-error {
  color: red;
  font-size: 12px;
}

/* table field-action column */

.si-table .ag-row .field-action {
  padding: 4px;
}

.si-table .ag-row .width-auto {
  width: auto;
}

/* tables for info */

.table.table-borderless>tbody>tr>td,
.table.table-borderless>tbody>tr>th {
  border-top: none;
  border: none;
}

.table-condensed-info>tbody>tr>td,
.table-condensed-info>tbody>tr>th,
.table-condensed-info>tfoot>tr>td,
.table-condensed-info>tfoot>tr>th,
.table-condensed-info>thead>tr>td,
.table-condensed-info>thead>tr>th {
  padding: 2px;
}

.boxComponent,
.box-component {
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #141464;
  border-radius: 5px;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}

h2.component-action {
  font-size: 22px;
  margin-top: 8px;
  text-align: right;
}

.boxComponent .title,
h2.componentTitle,
.box-component .title,
h2.component-title {
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 4px;
  text-align: left;
  color: #141464;
  margin-top: 5px;
}

.boxComponent .title,
h2.componentTitle span,
.box-component .title,
h2.component-title span {
  letter-spacing: 1px;
  font-weight: 400;
}

.boxComponent .content,
.box-component .content {
  padding: 0 8px;
}

.boxComponent.sqiGraph,
.boxComponent.notification,
.box-component.sqiGraph,
.box-component.notification {
  min-height: 200px;
}

/* text components */

.text-description,
.text-instruction {
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: justify;
}

.patient-name-tag {
  font-size: 16px;
  font-weight: 300;
}

.patient-data,
.credit-data,
.info-data,
.refresh-info {
  color: #FFA000;
}

.patient-data {
  font-weight: 300;
}

.credit-data,
.info-data {
  font-weight: bold;
}

.refresh-info {
  font-size: 12px;
}

/* various components */

.small-note {
  font-size: 75%;
  font-style: italic;
}

.loader-text {
  color: #FFA000;
  font-size: 22px;
  font-weight: bold;
}

.bold-text {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.no-wrap {
  white-space: nowrap;
}

/* left-side navigation pills (bootstrap override for SI configuration */

.si-sys-config .nav-pills>li.active>a,
.si-sys-config .nav-pills>li.active>a:focus,
.si-sys-config .nav-pills>li.active>a:hover {
  color: #FFA000;
  background-color: #ffffff;
  font-size: 20px;
}

/* SI configuration navigation pills item content */

.si-config-pill-item .notification {
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 2000;
  background: rgba(214, 214, 214, 0.5);
}

/* SI configuration of study csv cols and customer settings */

.si-config-pill-item-info {
  font-size: 12px;
}

.si-config-pill-item .btn-action-row {
  margin-bottom: 10px;
}

.si-config-list-group .list-group-item {
  background-color: #ffffff;
  height: 95px;
  overflow: auto;
}

.customer-settings .si-config-list-group .list-group-item {
  height: auto;
}

.si-config-list-group .list-group-item .study-col-label::before {
  content: "Label: ";
}

.si-config-list-group .list-group-item .study-col-label::before,
.study-col-label-tag {
  font-weight: 700;
}

.si-config-list-group .list-group-item .study-col-label {
  font-size: 12px;
  font-weight: 400;
}

.si-config-list-group .list-group-item-name {
  font-size: 16px;
  font-weight: 600;
}

/* card-like listing (ie: patient list, study list in user trends */

ul.card-listing {
  margin-top: 10px;
}

ul.card-listing li.list-group-item {
  background-color: transparent;
  margin-bottom: 5px;
}

ul.card-listing .list-group-item-heading {
  font-size: 17px;
  color: #141464;
}

/* bootstrap date and time picker */

.si-timepicker-popup .form-control,
.uib-datepicker-popup .btn-default:not(.ui-select-toggle),
.uib-datepicker-popup .btn-info {
  background-color: rgba(20, 20, 100, 0.8);
  color: #ffffff;
  border-color: rgba(20, 20, 100, 1);

  /* light version
    background-color: white;
    color: rgb(68, 92, 110);
    border-color: rgba(68, 92, 110, 0.3);
    */
}

/* The calendar day buttons to override calendar buttons */

.uib-datepicker-popup .uib-day .btn-default {
  background-color: white;
  color: rgb(68, 92, 110);
  border-color: rgba(20, 20, 100, 0.2);
}

.uib-datepicker-popup.dropdown-menu {
  padding: 10px;
}

.uib-datepicker-popup .btn-default:hover,
.uib-datepicker-popup .btn-default:focus,
.uib-datepicker-popup .btn-default:active,
.uib-datepicker-popup .btn-default.active,
.uib-datepicker-popup .open>.dropdown-toggle.btn-default {
  background-color: #FFA000;
  color: #ffffff;
}

.si-timepicker-popup {
  background: #ffffff;
  display: block;
  left: 15px;
  padding: 5px;
}

/* help files */

.help-files {
  padding-top: 10px;
}

.help-files a {
  font-size: 18px;
}

.help-files a:hover {
  font-size: 20px;
}

.help-files a+p,
.help-files a+p+a {
  margin-left: 20px;
  margin-bottom: 0px;
  font-size: 14px;
}

/* add spacing between items in list */

.help-files>div~div {
  margin-top: 10px;
}

.help-contact {
  padding-top: 40px;
}

/* white images on steel blue background - image cards */

.img-container {
  height: auto;
}

img.white-img {
  background: #141464;
  border-radius: 10px;
  padding: 10px;
}

/* from public website */

h1 {
  color: #141464;
  font-size: 36px;
}

hr.orange-hr {
  border-color: #FFA000;
  height: 1px;
  margin: 50px 0;
  width: 100%;
}

/* My Cardio color - used through out the site*/

.si-orange {
  color: #FFA000;
}

/* common styles */

.hide {
  display: none;
}

.push-down {
  margin-top: 20px;
}

/* apply this class to row to remove padding on sides */

.no-gutter>[class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

/* google places drop-down */

.pac-container {
  z-index: 3000 !important;
}

/* CSS solution for a SELECT required option */

select:required:invalid {
  color: gray;
}

option[value=""][disabled] {
  display: none;
}

option {
  color: black;
}

/* animation of view */

.view-content.ng-enter,
.view-content.ng-leave {
  position: absolute;
  /*top:30px;*/
  left: 0;
  right: 0;
  height: auto;
  overflow: hidden;
}

.view-content.ng-enter {
  -webkit-transition: all 650ms ease-out;
  transition: all 650ms ease-out;
}

.view-content.ng-leave {
  -webkit-transition: all 650ms ease-out;
  transition: all 650ms ease-out;
}

/*
.view-content.ng-enter {
  left: 100%;
  z-index: 101;
}
.view-content.ng-enter-active {
  left: 0;
}
.view-content.ng-leave {
  left: 0;
  z-index: 101;
}
.view-content.ng-leave-active {
  left: -1000px;
  z-index: 0;
}
*/

.view-content.ng-enter {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  z-index: 101;
}

.view-content.ng-enter-active {
  -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
          transform: translateX(10px);
}

.view-content.ng-leave {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  z-index: 101;
}

.view-content.ng-leave-active {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  z-index: 0;
}

/*
.view-content.ng-enter,
.view-content.ng-leave {
  position: absolute;
  top:100px;
  left:0;
  right:0;
  height: auto;
  overflow: hidden;
}
.view-content.ng-enter {
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.view-content.ng-leave {
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.view-content.ng-enter {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  z-index: 101;
}
.view-content.ng-enter-active {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}
.view-content.ng-leave {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  z-index: 100;
}
.view-content.ng-leave-active {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
*/

/* watermark used on demo sites */

.si-watermark {
  position: absolute;
  z-index: -5;
  background: white;
  display: block;
  min-height: 10%;
  min-width: 10%;
  color: yellow;
}

.si-watermark p {
  color: lightgrey;
  font-size: 100px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0.2;
}

/* cursor pointer */

.waiting {
  cursor: progress
}

/* button in the menu above the table */

.menu-button,
.menu-button:hover,
.menu-button:focus,
.menu-button:active,
.menu-button.active,
.menu-button:visited {
  border: 0 none;
  background-color: white;
  outline: 0 none;
}

/* to enable and disable span */

.enable-click {
  pointer-events: auto
}

.disable-click {
  pointer-events: none
}

/* to truncate text */

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

/* subscript and superscript */

.superscript {
  position: absolute;
  top: -7px;
  right: -9px;
  padding: 3px 3px 3px 3px;
  color: black;
  background-color: white;
  font-weight: bold;
  font-size: 10px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 1px silver;
          box-shadow: 1px 1px 1px silver
}

.subscript {
  position: absolute;
  top: 10px;
  right: -10px;
  padding: 3px -5px 3px 3px;
  color: black;
  background-color: white;
  font-weight: bold;
  font-size: 10px;
  border-radius: 4px;
}

/* dygraph annotation */

.annotation {
  cursor: pointer !important;
  font-size: 12px !important;
  width: 35px !important;
  position: absolute !important;
  display: inline-block !important;
  z-index: 45 !important;
}

.dygraph-legend {
  width: 300px;
}

.dygraph-annotation {
  position: absolute;
  display: inline-block;
  z-index: 45;
}

span.patient-data {
  color: var(--orange-6);
}

.modal-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-tab button {
  margin: 5px;
}

.newline > * {
    display: block;
}

.newline > input,
.newline > input + span {
    display: inline-block;
    
}

.modal-body {
    position: relative;
    padding: 5px 15px 15px 15px;
  }

.modal-footer-flex {
  display: flex
}

.flex-spacer {
  flex: 1
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.left {
  left: 0;
}

.form-instuctions-list {
  padding-left: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.radio-inline-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.radio-inline {
  cursor: pointer;
}

.loading-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.overlay-content {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  font-size: x-large;
  justify-content: center;
  align-items: center;
  border-radius: .5rem;
  background: rgba(255, 255, 255);
}

.overlay-visible {
  opacity: 1;
  visibility: visible;
}