:root {
    --primary-color: #CC0000;
    --secondary-color: white;
    --accent-color: #bb261a;
    --danger-color: #858585 !important;
    --warning-color:rgb(0,51,72) !important;
    --warning-light-color:  !important;
    --cancel-button-color: #858585 !important;
    --logo-light: url("https://d2hv17r7cev2hj.cloudfront.net/gothemes/vivify/assets/vivify@3x.png") !important;
    --gradient-light-color: #ffffff !important;
    --gradient-dark-color: #ffffff !important;
    --panel-text-color: #000000 !important;
    --product-logo: url("https://d2hv17r7cev2hj.cloudfront.net/gothemes/vivify/assets/product-logo.png") !important;
    --gradient-box-icon-color: rgb(209, 204, 204) !important;
    --text-color: #000000 !important;
    --glucose-image: url("../assets/contour-next-one.png") !important;
    --bloodpressure-image: url("../assets/welch-allyn-bp.png") !important;
    --glucose-bt-on: url("../assets/glucose-bt-on.png") !important;
    --glucose-bt-animation: url("../assets/glucose-bt-animation.gif") !important;
    --gradientBoxBackground: rgba(0, 0, 0, .26) !important;
    --hero-default-primary: rgb(0, 125, 179) !important;
    --hero-default-secondary: rgb(1, 69, 97) !important;
    --hero-warning-primary: rgb(255, 210, 22) !important;
    --hero-warning-secondary: rgb(186, 114, 2) !important;
    --hero-positive-primary: rgb(49, 165, 151) !important;
    --hero-positive-secondary: rgb(49, 165, 151) !important;
    --hero-negative-primary: rgb(213, 6, 6) !important;
    --hero-negative-secondary: rgb(132, 4, 4) !important;
    --valueBarBg:  rgb(233, 233, 233) !important;
    --active-home-card-background-color: rgb(0, 51, 72) !important;
    --active-home-card-icon-color:  #B8E3EB !important;
    --active-home-card-text-color: white !important;
    --inactive-home-card-text-color: black !important;
    --inactive-home-card-background-color: rgb(233, 233, 233) !important;
    --inactive-home-card-icon-color: var(--secondary-color) !important;
    --gradientBoxBackground: rgb(233,233,233) !important;
    --color-negative: #861C1C !important;
    --color-warning: #FBB903 !important;
    --color-positive: #185102 !important;
    --color-info: #F9D899 !important;
    --color-text: #FFFFFF !important;
    --brand-background-color: #ffffff !important;
    --brand-background-image: url("https://d2hv17r7cev2hj.cloudfront.net/gothemes/vivify/assets/backgroundMain@2x.png") !important;
    --brand-footer-background: #ffffff !important;
    --brand-border-color: rgb(209,204,204) !important;
    --card-label-bg: rgb(0,51,72) !important;
    --success-icon: rgb(0,51,72) !important;
    --pairing-text-color: #ffffff !important;
}

body {
    background-color: var(--brand-background-color) !important;
    color: var(--secondary-color) !important;
}

body a {
        color: var(--color-info) !important;
}

body a:hover {
    color: var(--color-text) !important;
}

input {
    color: var(--panel-text-color) !important;
}

ion-app .scroll-content {
    color: var(--text-color) !important;
}

ion-content {
    /* TO DO: Back ground image will need to return when client approves brand changes */
    /*background: var(--brand-background-color) var(--brand-background-image) no-repeat left top !important;*/
    background: var(--brand-background-color) !important;
}

ion-content.has-refresher .scroll-content {
    background: transparent;
  }

ion-header {
    border-bottom: 0px solid rgb(234, 235, 234) !important;
}

vh-header .nav-toolbar-container {
    background: rgb(246, 246, 246) !important;
}

vh-header .nav-toolbar .tab-icon-container.active .tab-icon {
    background-color: var(--primary-color) !important;
    fill: #fff !important;
}

vh-header .nav-toolbar .tab-icon-container.active .tab-icon .icon {
    fill: #fff !important;
}

vh-header .nav-toolbar .tab-icon {
    color: var(--primary-color) !important;
}

vh-header .nav-toolbar .tab-icon icon {
    fill: var(--primary-color) !important;
}

ion-navbar {
    border-bottom: 0 solid rgb(234, 235, 234) !important;
    background:white;
}

ion-footer {
    background-color: var(--brand-footer-background) !important;
    border-top: 1px solid var(--brand-border-color) !important;
}

ion-footer .toolbar-background-ios, .toolbar-background-md {
    background: white !important;
    border-color: rgb(209, 204, 204) !important;
}

.loading-ios .spinner-crescent circle {
    stroke: var(--primary-color) !important;
}

.refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line, .refresher-refreshing .spinner-crescent circle {
    stroke: var(--text-color) !important;
}

.refresher-pulling-icon, .refresher-refreshing-icon {
    color: var(--text-color) !important;
}

.main-btn {
    background-color: var(--accent-color) !important;
    color: #FFFFFF !important;
}
.main-btn-cancel {
  background: var(--cancel-button-color) !important;
}

.main-btn-warning {
    background: var(--warning-color) !important;
}

ion-navbar .navbar-brand {
    background-image:var(--logo-light) !important;
}

.gradient-background {
    background-image: linear-gradient( 160deg, var(--gradient-light-color), var(--gradient-dark-color) 50%) !important;
    color: var(--panel-text-color) !important;
}

.theme-logo {
    background-image: var(--product-logo) !important;
}

.app-root {
    color: var(--inactive-home-card-text-color) !important;
}

.toast-error .toast-wrapper {
    background: red !important;
    color: white !important;  
}

.toast-update .toast-wrapper {
    background: rgb(56, 113, 208) !important;
    color: white !important; 
}

.icon {
    fill: var(--gradient-box-icon-color) !important;
}

/* the date/time picker style */

.picker-toolbar {
    background-color: #000000 !important;
}

.picker-columns {
    background-color: #000000 !important;
}

.picker-opt.picker-opt-selected {
    background-color: #000000 !important;
    color: #c6c6c6 !important;
}

/* week day selector */

.alert-ios [aria-checked=true] .alert-radio-label,
.alert-ios .alert-button,
.alert-md .alert-button,
.alert-md [aria-checked=true] .alert-radio-label,
{
    color: #838385 !important;
}

.help-text-bottom {
    color: var(--text-color) !important;
}

button .warning {
    background-color: var(--warning-light) !important;
}

button .secondary {
    background-image: radial-gradient(50% 107%, var(--accent-color) 0%, var(--accent-color) 100%) !important;
}

[dismiss-button],
.back-button,
.back-button-ios {
    color: #666 !important;
}

.footer-buttons-arrow {
    background: none !important;
    color: white !important;
}

.pad-container {
    background: #273141 !important;
    border: 1px solid #ccc !important;
}

.pad-container .grid button {
    background: transparent !important;
    color: white !important;
}

/* Panel UI */

ion-modal .panel-ui .bluetoothStatusContainer {
            color: var(--text-color) !important;
            border: 1px solid  var(--inactive-home-card-background-color) !important;
}

ion-modal .panel-ui .bluetoothStatusContainer .animation-container .pairing .circle:after {
  background: rgb(55,186,171) !important;
}


biometric-entry .units {
    color: var(--text-color) !important;
}

biometric-entry .help {
    color: var(--text-color) !important;
}

biometric-entry .confirmation {
    color: var(--text-color) !important;
}

biometric-entry .bluetoothStatus {
    color: var(--panel-text-color) !important;
    background-color: #ffffff !important;
    border: 1px solid  var(--inactive-home-card-background-color) !important;
}
    
  /* Placeholder for if clients need to replace device images */
  /* biometric-entry .bluetoothStatus .image.glucoseDevice {
  background-image: var(--glucose-image) !important;
  }
  
  biometric-entry .bluetoothStatus .image.glucoseDevice.bloodPressureDevice {
    background-image: var(--bloodpressure-image) !important;
  } */

biometric-entry .bluetoothStatus .image.glucoseDevice.success {
    border: 4px solid rgba(55, 186, 171, 1) !important;
}

biometric-entry .pulse {
    animation: pulsate 1.3s ease-out !important;
    box-shadow: 0 0 10px rgba(55, 186, 171, 1) !important;
}

@keyframes pulsate {
    0% {
        box-shadow: 0 0 8px rgba(55, 186, 171, 1) !important;
    }

    50% {
        box-shadow: 0 0 16px rgba(55, 186, 171, 1) !important;
    }

    100% {
        box-shadow: 0 0 8px rgba(55, 186, 171, 1) !important;
    }
}

biometric-entry .blueButton {
    border: 1px solid var(--text-color) !important;
    background: transparent !important;
    color: var(--text-color) !important;
}

/* Overlay Forms Styles */

.shipping-container .overlay-container {
    background: transparent !important;
}

.overlay-container {
    background: #ffffff99 !important;
}

.overlay-message-wrapper {
    background: rgb(233, 233, 233) !important;
}

.overlay-form ion-item .item-inner .input-wrapper {
    background: rgba(233, 233, 233, 0.7) !important;
}

.overlay-form ion-item .item-inner .input-wrapper ion-label {
    color: rgba(0, 0, 0, 0.5) !important;
}

.overlay-form ion-item .item-inner .input-wrapper ion-input input {
    color: black !important;
}

.overlay-form ion-item.item-input-has-focus .label-md[floating],
.overlay-form ion-item.item-input-has-focus .label-ios[floating] {
    transform: translate3d(0, 16px, -5px) scale(0.8) !important;
    color: black !important;
}

.overlay-form ion-item.item-input-has-value .label-md[floating],
.overlay-form ion-item.item-input-has-value .label-ios[floating]  {
    color: black !important;
}


/* Gradient Box Overlay */
.gradient-box-container {
    background: var(--gradientBoxBackground) !important;
    color: var(--panel-text-color) !important;
}


/* Hero Card Styles */

.hero-card-title {
    color: white !important;
}

.hero-card-subtitle {
    color: white !important;
  }

  .hero-card-value {
    color: white !important;
  }

  .hero-card-units {
    color: white !important;
  }

  .hero-card-information {
    color: white !important;
  }

  .default-card {
    background-image: linear-gradient( to bottom, var(--hero-default-primary), var(--hero-default-secondary) 50%) !important;
  }
  
  .warning-card {
    background-image: linear-gradient( to bottom, var(--hero-warning-primary), var(--hero-warning-secondary) 50%) !important;
  }
  
  .positive-card {
    background-image: linear-gradient( to bottom, var(--hero-positive-primary), var(--hero-positive-secondary) 50%) !important;
  }
  
  .negative-card {
    background-image: linear-gradient( to bottom, var(--hero-negative-primary), var(--hero-negative-secondary) 50%) !important;
  }

  /* question options */

  question-options .option-button {
        border: 1px solid var(--text-color) !important;
        background: transparent !important;
        color: var(--text-color) !important;
  }

  question-options .option-button.selected {
    color: var(--accent-color) !important;
    background-color: white !important;
}

/* value bar */
.value {
    color: var(--panel-text-color) !important;
    background-color: var(--valueBarBg) !important;
}

/* yes-no buttons */

yes-no-buttons .yes-no-container button {
    border: 1px solid var(--text-color) !important;
    color: var(--text-color) !important;
    background: transparent !important;
}

yes-no-buttons .yes-no-container button.selected {
    color: var(--accent-color) !important;
    background-color: white !important;
}

page-device-tab ion-list ion-item ion-item,
page-device-tab .list-md ion-item,
page-device-tab .list-ios ion-item {
    border-bottom: 0.5px solid rgba(255,255,255,0.20) !important;
}

page-device-tab ion-list ion-item ion-item.item-block:last-child,
page-device-tab .list-md ion-item.item-block:last-child,
page-device-tab .list-ios ion-item.item-block:last-child {
    border-bottom: 0.5px solid rgba(255,255,255,0.20) !important;
}

page-device-tab ion-list ion-item ion-item ion-label h2,
page-device-tab .list-md ion-item ion-label h2,
page-device-tab .list-ios ion-item ion-label h2 {
    color: var(--inactive-home-card-text-color) !important;
}

page-device-tab ion-list p,
page-device-tab .list-md p,
page-device-tab .list-ios p {
    color: var(--inactive-home-card-text-color) !important;
}

page-device-tab ion-list .program-header,
page-device-tab .list-md .program-header,
page-device-tab .list-ios .program-header  {
    background-color: var(--inactive-home-card-background-color) !important;
}

page-device-tab ion-list .program-header .icon,
page-device-tab .list-md .program-header .icon,
page-device-tab .list-ios .program-header .icon  {
    fill: var(--inactive-home-card-icon-color) !important;
}

page-device-tab ion-list .program-header.device-list,
page-device-tab .list-md .program-header.device-list,
page-device-tab .list-ios .program-header.device-list  {
    border: 3px solid #eaebea !important;
}

page-device-tab ion-list .program-header.device-list .input-wrapper .img-card,
page-device-tab .list-md .program-header.device-list .input-wrapper .img-card,
page-device-tab .list-ios .program-header.device-list .input-wrapper .img-card  {
    background-color: white !important;
}

page-device-tab ion-list .program-header.device-list .input-wrapper .img-card .deviceImg.contour,
page-device-tab .list-md .program-header.device-list .input-wrapper .img-card .deviceImg.contour,
page-device-tab .list-ios .program-header.device-list .input-wrapper .img-card .deviceImg.contour  {
    /*background-image: var(--glucose-image) !important;*/
    background-color: transparent !important;
}

page-device-tab ion-list .program-header.device-list .input-wrapper .img-card .deviceImg.bpmonitor,
page-device-tab .list-md .program-header.device-list .input-wrapper .img-card .deviceImg.bpmonitor,
page-device-tab .list-ios .program-header.device-list .input-wrapper .img-card .deviceImg.bpmonitor  {
    /*background-image: var(--bloodpressure-image) !important;*/
    background-color: transparent !important;
}

page-device-tab ion-list .program-header.device-list .input-wrapper .img-card .device-icon svg,
page-device-tab .list-md .program-header.device-list .input-wrapper .img-card .device-icon svg,
page-device-tab .list-ios .program-header.device-list .input-wrapper .img-card .device-icon svg  {
    fill: rgb(55,186,171) !important;
}

page-device-tab ion-list .due-now-card,
page-device-tab .list-md .due-now-card,
page-device-tab .list-ios .due-now-card  {
    background: var(--card-label-bg) !important;
}

page-device-tab ion-list .due-now-card .icon,
page-device-tab .list-md .due-now-card .icon,
page-device-tab .list-ios .due-now-card .icon  {
    fill: var(--active-home-card-icon-color) !important;
}

page-device-tab ion-list .due-now-card h2,
page-device-tab .list-md .due-now-card h2,
page-device-tab .list-ios .due-now-card h2  {
    color: var(--pairing-text-color) !important;
}

page-device-tab ion-list .due-now-card p,
page-device-tab .list-md .due-now-card p,
page-device-tab .list-ios .due-now-card p  {
    color: var(--pairing-text-color) !important;
}

page-device-tab .card-header-ios + .card-content-ios {
    color: #000000 !important;
}

page-home ion-list ion-item,
page-home .list-md ion-item,
page-home .list-ios ion-item {
    border-bottom: 0.5px solid rgba(255,255,255,0.20) !important;
}

page-home ion-list ion-item.item-block:last-child,
page-home .list-md ion-item.item-block:last-child,
page-home .list-ios ion-item.item-block:last-child {
    border-bottom: 0.5px solid rgba(255,255,255,0.20) !important;
}

page-home ion-list ion-label h2,
page-home .list-md ion-label h2,
page-home .list-ios ion-label h2 {
    color: var(--inactive-home-card-text-color) !important;
}

page-home ion-list p,
page-home .list-md p,
page-home .list-ios p {
    color: var(--inactive-home-card-text-color) !important;
}

page-home ion-list .program-header,
page-home .list-md .program-header,
page-home .list-ios .program-header {
    background-color: var(--inactive-home-card-background-color) !important;
}

page-home ion-list .program-header .icon,
page-home .list-md .program-header .icon,
page-home .list-ios .program-header .icon {
    fill: var(--inactive-home-card-icon-color) !important;
}

page-home ion-list .program-header success-icon .icon,
page-home .list-md .program-header success-icon .icon,
page-home .list-ios .program-header success-icon .icon {
    fill: var(--success-icon) !important;
}

page-home ion-list .program-header.due-now-card,
page-home .list-md .program-header.due-now-card,
page-home .list-ios .program-header.due-now-card {
    background: var(--active-home-card-background-color) !important;
}

page-home ion-list .program-header.due-now-card .icon,
page-home .list-md .program-header.due-now-card .icon,
page-home .list-ios .program-header.due-now-card .icon {
    fill: var(--active-home-card-icon-color) !important;
}

page-home ion-list .program-header.due-now-card h2,
page-home .list-md .program-header.due-now-card h2,
page-home .list-ios .program-header.due-now-card h2 {
    color: var(--active-home-card-text-color) !important;
}

page-home ion-list .program-header.due-now-card p,
page-home .list-md .program-header.due-now-card p,
page-home .list-ios .program-header.due-now-card p {
    color: var(--active-home-card-text-color) !important;
}

page-home ion-list .program-header .play-bubble,
page-home .list-md .program-header .play-bubble,
page-home .list-ios .program-header .play-bubble {
    background-color: var(--accent-color) !important;
}

page-welcome .vg-player-wrapper  {
   background: rgba(0, 0, 0, .26) !important;
}
page-welcome .link { 
    color: var(--warning-color) !important;
}

page-welcome .flat-button {
    border: 1px solid var(--text-color) !important;
}

page-welcome .help-text-bottom {
    color: var(--text-color) !important;
}