Polar Flow ( flow.polar.com ) Dark Theme

Dark theme for Polar Flow website

/* ==UserStyle==

@name           Polar Flow ( flow.polar.com ) Dark Theme
@namespace      B@rm@le1ko
@version        1.68
@description    Dark theme for Polar Flow website
@author         🄯 B@rm@le1ko
@license        MIT

==/UserStyle== */
@-moz-document url-prefix("https://flow.polar.com/") {

    body {
        height: 100%;
        font-family: Helvetica, Arial, sans-serif;
        line-height: 1.42857143;
        color: #aaaaaa;
        background-color: #222222 !important;
    }

    .wrapper {
        min-height: 100%;
        padding-top: 80px;
        background: #222222 !important;
        padding-bottom: 3.15rem;
        color: #aaaaaa;
        position: relative;
        z-index: 3;
        box-shadow: -5px -5px 5px rgba(0, 0, 0, .3);
        transition: transform .2s ease-in-out;
        -webkit-transition: -webkit-transform .2s ease-in-out;
        -moz-transition: -moz-transform .2s ease-in-out;
        -ms-transition: -ms-transform .2s ease-in-out;
    }

    .history-list__row {
        border-bottom: 1px dashed #666666;
        padding-top: 0;
        padding-bottom: 4px;
        background-color: #333333;
        min-height: 40px;
        margin-left: -5px;
        margin-right: 1px;
        line-height: 1.05;
    }

    table.calendar-month tbody td .bday,
    table.calendar-week tbody td .bday {
        transition: all 200ms;
        transition-delay: .1s;
        position: relative;
        background: #333333;
        color: #aaaaaa;
    }

    table.calendar-month tbody td .bday .holder,
    table.calendar-week tbody td .bday .holder {
        padding: 5px;
        color: #aaaaaa;
    }

    table.calendar-month .bday__header {
        margin-bottom: 2px;
        color: #aaaaaa;
    }

    table.calendar-month div.active .number {
        color: #aaaaaa;
    }

    table.calendar-month thead th .long,
    table.calendar-month thead th.summary-title {
        font-size: 1em;
        color: #aaaaaa;
    }

    table.calendar-month .bday .training {
        height: 66px;
        color: #aaaaaa;
    }

    .small-icons-wrapper {
        color: #aaaaaa;
    }

    .day-content-list .bday__footer,
    table.calendar-month tbody td .bday .bday__footer,
    table.calendar-week tbody td .bday .bday__footer {
        position: relative;
        display: block;
        color: #aaaaaa;
    }

    .primary-heading-chapter {
        background-color: transparent;
        border-bottom: none !important;
        position: relative;
        padding-top: 20px;
        padding-bottom: 15px;
    }

    table.calendar-month tr td:last-child {
        color: #CCCCCC;
    }


    table.calendar .event a,
    table.calendar-week .event a {
        display: block;
        color: #aaaaaa;
    }

    table.calendar .event-week.exercise .details,
    table.calendar-week .event-week.exercise .details,
    table.calendar .event-month.exercise .details,
    table.calendar-week .event-month.exercise .details,
    table.calendar .event-week.rrTest .details,
    table.calendar-week .event-week.rrTest .details,
    table.calendar .event-month.rrTest .details,
    table.calendar-week .event-month.rrTest .details {
        color: #aaaaaa !important;
    }

    table.calendar .event .target-title,
    table.calendar-week .event .target-title,
    table.calendar .event .target-value,
    table.calendar-week .event .target-value {
        color: #aaaaaa !important;
    }

    table.calendar .event .details > span:first-child,
    table.calendar-week .event .details > span:first-child {
        color: #aaaaaa !important;
    }

    .calendar-month .items-container.bday:not(.active) .holder {
        background: #262626;
    }

    .calendar-grid-summary .grid-summary__value-container {
        position: absolute;
        background: #141414;
        z-index: 2;
        right: 0;
        top: 0;
        padding-left: 5px;
        font-size: .875em;
        color: #CCCCCC;
    }

    .calendar-grid-summary .icon {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 16px;
        color: #CCCCCC;
        background: #141414;
        z-index: 2;
        padding-right: 5px;
    }

    td.summary {
        background: #141414;
    }

    .btn-basic {
        color: #ccc;
        background-color: #555555;
        border-color: transparent;
        border-width: 1px;
        -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
        box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
    }

    .nav-pills > li > a {
        border-radius: 0;
        background: #555555;
        margin-left: -2px;
        color: #aaaaaa;
    }

    table {
        display: table;
        border-collapse: separate;
        box-sizing: border-box;
        text-indent: initial;
        border-spacing: 2px;
        border-color: #555555;
    }

    table.calendar-month tr td:first-child {
        border-color: #555555;
    }


    table.calendar-month tr td:last-child .items-container::before {
        display: block;
        height: 2px;
        background: #555555;
        position: absolute;
        top: -2px;
        left: 0;
        right: 0;
        content: '';
        margin-left: auto;
        margin-right: auto;
    }

    table.calendar-month tr.last-row td:last-child .items-container::after {
        display: block;
        height: 2px;
        background: #555555;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        content: '';
        margin-left: auto;
        margin-right: auto;
    }

    [role=footer] {
        width: 100%;
        border-top: 1px solid #555555;
        padding: 5px;
        z-index: 10;
        position: absolute;
        bottom: 0;
        background: #141414;
    }

    .mouse-tooltip {
        z-index: 1030;
        background: #444444;
        border: 1px solid #666666;
        padding: 5px;
        position: absolute;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 1rem;
        white-space: nowrap;
        margin-left: 0;
        margin-top: 0;
        -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
        box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
        color: #cacaca !important;
    }

    .mouse-tooltip .custom-tooltip__value {
        text-align: right;
        color: #cccccc;
    }

    [role=footer] aside:first-of-type a {
        border-right: 1px solid #555555;
    }

    .main-nav {
        width: 100%;
        -webkit-box-shadow: 0 3px 6px 2px rgba(0, 0, 0, .12);
        box-shadow: 0 3px 6px 2px rgba(0, 0, 0, .12);
        background: #141414;
    }

    .main-nav__username {
        color: #aaaaaa;
    }

    .main-nav__menu .active > a {
        color: #718bd3;
    }

    .main-nav__menu a:hover {
        color: #8aa4ea;
    }

    .brand img {
        filter: invert(35%) !important;
    }


    .day-content-list:hover .holder,
    table.calendar-month tbody td .bday:hover .holder,
    table.calendar-week tbody td .bday:hover .holder,
    .day-content-list.is-open .holder,
    table.calendar-month tbody td .bday.is-open .holder,
    table.calendar-week tbody td .bday.is-open .holder {
        padding: 5px 5px 0 5px;
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        min-width: 100%!important;
        max-width: 149px;
        max-height: 800px!important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
        z-index: 19;
        background: #555;
    }

    .flow-popover .popover__menu {
        width: 150px;
        list-style-type: none;
        margin: 0;
        padding: 5px;
        text-align: center;
        background: #222222;
        color: #aaaaaa;
        border: 2px solid #444 !important;
        border-spacing: 0 !important;
    }

    .flow-popover .popover__menu-link {
        display: block;
        padding: 5px 0;
        color: #aaaaaa;
    }

    .tab-panels .tab-panel {
        background-color: #333333;
        overflow: hidden;
    }
    ul.summary-tabs li.active a {
        background-color: #333333;
        color: #aaaaaa;
    }

    ul.summary-tabs li a {
        font-size: .875em;
        display: block;
        background-color: #555555;
        padding: 5px 10px;
        color: #aaaaaa;
        -webkit-transition: background-color .3s;
        -moz-transition: background-color .3s;
        transition: background-color .3s;
        float: left;
    }


    ul.summary-tabs li a:hover {
        text-decoration: none;
        background-color: #444444;
        cursor: pointer;
    }

    .global-nav__list li.active a {
        background: #444444;
        color: #cccccc;
    }

    .bottom-summary-24 span.value-huge {
        color: #cccccc;
    }

    table.activityLevelTable tr.activityLevelColumns td div.activityIntensitiesColumnRest {
        background-color: #666666;
        border: 1px solid #444444;
    }

    table.activityLevelTable td {
        vertical-align: bottom;
        width: 20%;
        padding: 0;
        border-left: 2px solid #444444;
    }

    div.activityLevelContainer.scale {
        min-height: 200px;
        max-height: 200px;
        border-bottom: 2px solid #555555;
        border-left: 2px solid #555555;
    }

    table.activityLevelTable tr.activityLevelColumns td div.activityIntensitiesColumnSedentary {
        background-color: #888888;
    }

    table.activityLevelTable tr.activityClassSummary td {
        background-color: #333333;
        text-align: center;
        color: #aaaaaa;
        width: 20%;
        font-size: .875em;
        vertical-align: middle;
        padding: 0.5em 0;
        border-left: 2px solid #333333
    }

    div.fancy-select div.trigger {
        background: #555555;
        border: 1px solid #444444;
        color: #cccccc;
    }
    ul.fancy-select.options {
        background: #555555;
        border: 1px solid #444444;
        border-top: 0 solid #444444;
        color: #cccccc;
    }

    .multi-select.fancy-select ul.options.open {
        color: #cccccc !important;
    }
    .multi-select.fancy-select a {
        color: #cccccc !important;
    }

    .multi-select.fancy-select ul.options li.parent.selected-value > a {
        background: #333333;
    }

    .multi-select.fancy-select ul.options li a:hover {
        background: #666666;
    }

    .uneditable-input,
    input[type=color],
    input[type=date],
    input[type=datetime-local],
    input[type=datetime],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    textarea {
        background-color: #262626;
        border: 1px dotted #555;
        box-shadow: inset 1px 2px 2px rgba(0, 0, 0, .2);
        color: #cccccc;
    }

    ul.fancy-select.options li {
        background: #333333;
        color: #aaaaaa;
    }

    .btn-icon {
        background-color: #444444;
        border-color: #444444;
        color: #cccccc;
    }

    .select-component .select-component__control {
        background: #555555;
        border: 1px solid #444444;
        color: #cccccc;
    }

    .css-1uccc91-singleValue {
        color: #cccccc;
    }

    .group-summary-row {
        color: #d5d5d5;
    }

    div#totalLoad div.timestamplabel {
        color: #ccc;
    }

    div#totalLoad .totalload-tooltip {
        background: #444;
        color: #cccccc;
    }

    div#totalLoad .totalload-tooltip .exercise,
    div#totalLoad .totalload-tooltip .activity {
        background-color: #444;
        color: #cccccc;
    }

    div#totalLoad .totalload-tooltip .exercise .details span,
    div#totalLoad .totalload-tooltip .activity .details span {
        color: #cccccc;
    }

    div#totalLoad .totalload-tooltip:hover {
        background: #666;
        color: #fff !important;
    }

    div#totalLoad .totalload-tooltip .exercise:hover,
    div#totalLoad .totalload-tooltip .activity:hover {
        background-color: #666;
        color: #fff !important;
    }

    div#totalLoad .totalload-tooltip .exercise .details:hover span,
    div#totalLoad .totalload-tooltip .activity .details:hover span {
        color: #fff !important;
    }

    div#totalLoad div.lastSyncLabel {
        color: #cccccc;
        border: 1px solid #444444;
        background-color: #555555;
    }
    div#totalLoad div.recoveryLevel {
        background-color: #999;
        border: 1px solid #444;
        color: #222;
    }

    .highcharts-plot-bands-0 path[fill="rgba(255, 255, 255, 0.7)"] {
        fill: rgba(255, 255, 255, 0.2) !important;
    }

    .test-hub__summary-table-cell,
    .test-hub__result-table-cell {
        background: #333333 !important;
        border-left: 1px solid #555555;
    }

    .comparison-table__cell {
        border: 1px solid #555555;
    }

    .basic-table__table-data {
        background: #333333 !important;
        border-left: 1px solid #555555;
    }

    .comparison-table__first-row {
        background-color: #333333;
        border-bottom: 1px solid #555555;
    }

    .basic-table__table-row:nth-child(odd) {
        background-color: #333333;
    }

    .basic-table__table-body {
        border: 1px solid #555555;
    }

    .card-holder .inner-content,
    .card-holder .card__panel {
        background: #333333 !important;
    }

    .summary-panel__item {
        background-color: #333;
    }
    /*
    .highcharts-background {
        fill: #222;
    }
*/
    .activity-graph__xaxis-label {
        color: #aaaaaa;
    }

    .sleep-edit-promotion {
        background: #333333;
    }
    /*
    .sleep-edit-promotion .sleep-edit-promotion__image img {
        filter: invert(100%) !important;
    }
*/
    .sleep-mini-graph-label-x,
    .sleep-mini-graph-label-y {
        color: #aaaaaa;
    }

    svg.highcharts-root image#highcharts-bg-gray-image {
        opacity: 0.6;
    }

    span.sleep-plotband-type-label {
        color: #ffffff !important;
    }


    span.highcharts-plot-band-label {
        color: #262626 !important;
    }

    #highcharts-bg-gray-image {
        background: #000000 !important;
    }

    .detail-data-panel {
        background: #333333;
    }
    .detail-data-panel__item .label-dark {
        color: #cccccc;
    }

    .nav.nav-pills > li > a {
        background: #333333;
        color: #aaaaaa;
    }
    .nav.nav-pills > li > a:hover {
        background: #555555;
        color: #cccccc;
    }



    .nav.nav-pills--flat > li.active > a {
        background: #333333;
        color: #aaaaaa;
        box-shadow: 0 3px 0 grey;
    }


    .nav.nav-pills--flat > li > a.active {
        background: #F70F42 !important;
        color: #FFFFFF !important;
        box-shadow: 0 3px 0 #d10027;
    }

    .nav.nav-pills--flat > li.active > a:focus {
        background: #F70F42;
        color: #FFFFFF;
        box-shadow: 0 3px 0 grey;
    }

    .nav.nav-pills--flat > li.active > a:hover {
        background: #F70F42 !important;
        color: #FFFFFF !important;
        box-shadow: 0 3px 0 #d10027;
    }

    .nav.nav-pills--flat > li:hover > a:hover {
        background: #555555 !important;
        color: #cccccc !important;
        box-shadow: 0 3px 0 #d10027;
    }

    .nav.nav-pills > li.disabled > a {
        background-color: #333333;
        border-color: #444444;
        color: #666666;
    }

    .nav.nav-pills > li > a:before {
        border-left: 1px solid #555;
    }

    path[fill="#F2F2F2"] {
        fill: #222222 !important;
    }

    .layout-padding {
        padding: 10px;
        background: #333333;
    }

    #highcharts-d12pj6a-267 path.highcharts-axis-line {
        stroke: #666;
    }

    #highcharts-d12pj6a-267 path.highcharts-plot-line {
        stroke: #666;
    }

    #highcharts-d12pj6a-267 path.highcharts-grid-line {
        stroke: #666;
    }

    .activity-score__graph--bottom-labels-table td {
        background-color: #222222;
        text-align: center;
        color: #cccccc;
        border-left: 2px solid #444444;
    }


    rect.highcharts-point {
        fill: rgb(0, 155, 224);
        stroke: #444444 !important;
        stroke-width: 1;
    }

    #sleep-segment-tabs .nav-tabs li > a {
        color: #aaaaaa;
        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
    }

    #sleep-segment-tabs .nav-tabs li:last-child a {
        border-right: 1px solid #666666;
    }

    #sleep-segment-tabs .nav-tabs li > a:after {
        background: #666666;
    }


    .basic-data-panel__header {
        background-color: #333333;
    }

    .basic-data-panel__label--black {
        color: #cccccc;
    }

    .main-nav__usermenu > li > a,
    .main-nav__iconmenu > li > a,
    .new-notifications > li > a {
        color: #aaaaaa;
    }

    .graph-settings {
        background-color: #333333;
    }

    .summary-container {
        background: #333333;
    }

    .activityBenefit {
        background-color: #333333;
    }

    .bottom-summary-24 {
        color: #cccccc !important
    }

    .sleep-report__summary-table-cell--primary,
    .sleep-report__summary-table-cell--black,
    .sleep-report__summary-table-cell--turquoise,
    .sleep-report__summary-table-cell--navy,
    .sleep-report__summary-table-cell--purple,
    .sleep-report__summary-table-cell--green,
    .sleep-report__summary-table-cell--orange {
        background: #333333;
    }

    sleep-report__summary-table-cell {
        background: #333333;
    }


    .sleep-report__summary-table-cell--primary .sleep-report__summary-table-cell-left:before,
    .sleep-report__summary-table-cell--turquoise .sleep-report__summary-table-cell-left:before {
        background: #666;
        border-bottom: 1px solid #444444;
    }


    .sleep-report__summary-table-cell--black .sleep-report__summary-table-cell-left:before {
        background: #262626;
        border-bottom-color: #444444;
    }

    .sleep-report__summary-table-cell--purple .sleep-report__summary-table-cell-left:before {
        background: #5a25a0;
        border-bottom-color: #444444;
    }

    .sleep-report__summary-table-cell--navy .sleep-report__summary-table-cell-left:before {
        background: #05f;
        border-bottom-color: #444444;
    }

    .timeline-calendar__cell {
        background: #333;
        border: 1px dotted #444444;
        border-right-color: #444444;
    }

    .program-weekly-heading {
        background: #333333;
    }

    .detail-data-panel__item:after {
        border-left: 1px solid #666666;
    }

    .program-slider__week-content {
        background-color: #333333;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, .05);
    }

    .program-slider__week.current .program-slider__week-content {
        background-color: #666666;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, .05);
    }

    .program-slider__week.past .program-slider__week-content {
        background-color: #333333;
    }

    .spacer {
        background: #333333;
    }

    .weekly-training-item__icon--has-target {
        box-shadow: -2px -2px 0 rgba(208, 208, 208, .5);
    }

    .training-zones-full__unit-label-value {
        color: #ccc;
    }

    .season-landing-hero .create-season-container {
        background-color: #333333;
    }


    rect#sleep-report__timing-chart-y-axis-avg-band {
        fill: #222 !important;
    }

    .target-explorer .spacer {
        background: #333333;
    }

    table.calendar-week td {
        border: 2px solid #555555;
        background-color: #333333;
    }
    table.calendar-week tbody td {
        border-bottom: 2px solid #555555 !important;
    }
    table.calendar-week tbody tr td:first-child {
        background: #222222;
    }

    table.calendar-week tfoot .summary-cell {
        background-color: #141414 !important;
    }

    table.calendar-week tfoot td {
        background: #222222;
    }
    table.calendar-week tfoot .summary-cell::before {
        background: #555;
    }

    table.calendar-week tfoot .summary-cell:last-child::after {
        background: #555;
    }

    .fc-summary,
    .summary-cell {
        background-color: #333333!important;
        color: #aaaaaa;
    }

    .daily-feeling-container {
        background: #333333;
    }

    ul.daily-feeling-list li a,
    ul.daily-feeling-list li a.active,
    ul.daily-feeling-list li a.selectedFeeling {
        background-color: #555555;
        color: #CCCCCC;
        border-radius: 0!important;
    }

    .pager li > a,
    .pager li > span {
        display: inline-block;
        padding: 5px 10px;
        background-color: #555555;
        border-radius: 4px;
        color: #cccccc;
    }
    table.calendar-month tbody td .bday.selected {
        background-color: #222222;
        font-weight: bold;
    }

    table.reachGoal {
        background-color: #222222;
    }
    .day-items-list-container .day-content-list {
        background-color: #333333;
        border-left: 1px solid #555555;
    }

    .override .day-items-list-container .hour-divider {
        background-color: #222222;
        border-bottom: 1px solid #555555;
    }

    .day-content-list .event-day .details {
        color: #cccccc;
    }

    .day-items-list-container {
        border: 1px solid #555555;
    }

    .datepicker-dropdown-title-element a h1 {
        color: #aaaaaa;
    }

    table.calendar-week thead th {
        color: #cccccc;
    }

    .day-content-list .event-day.trainingTarget {
        background-color: #666;
    }
    .day-content-list .event-day.trainingTarget .target-title,
    .day-content-list .event-day.trainingTarget .target-value {
        color: #ccc!important;
    }
    .history-list:hover {
        background-color: #555;
        color: #cccccc;
    }

    .checkbox-group input[type=checkbox] + span {
        background-color: #202020;
    }

    .nav.nav-pills > li > a:focus {
        background: #F70F42;
        color: #FFFFFF;
    }

    .bootstrap-datetimepicker-widget {
        background: #333;
    }

    .bootstrap-datetimepicker-widget .datepicker .table-condensed td {
        border-right: 1px solid #444444;
        padding: 5px;
    }

    .bootstrap-datetimepicker-widget .table-condensed td:last-child {
        border-right: 1px solid #555555 !important;
    }
    .bootstrap-datetimepicker-widget .datepicker thead tr:first-child th {
        background: #222222;
    }
    .select-component .select-component__control .select-component__indicators .select-component__indicator:after {
        color: #ccc;
    }
    .mini-graph-panel__axis-label,
    .mini-graph-panel__yaxis-label {
        color: #cccccc;
    }

    .timeline-calendar__day-name {
        background: #333333;
    }

    .highcharts-grid path[stroke="#D8D8D8"] {
        stroke: #333;
    }

    .mini-graph-panel__graph-container rect.highcharts-background,
    .highcharts-root rect[fill="#f2f2f2"] {
        fill: #333;
    }

    g.highcharts-grid path[stroke="#e6e6e6"] {
        stroke: #555;
    }

    g.highcharts-axis path[stroke="#D8D8D8"] {
        stroke: #555;
    }

    .emptychart__overlay-content {
        background-color: #222222;
        border: 4px solid #444444;
    }

    g.highcharts-legend-item text {
        color: #aaaaaa !important;
        fill: #aaaaaa !important;
    }

    g.highcharts-axis-labels text {
        color: #aaaaaa !important;
        fill: #aaaaaa !important;
    }

    .multi-select__trigger {
        background: #333 none repeat scroll 0 0;
        border: 1px solid #555;
        box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
        color: #aaaaaa;
    }

    .multi-select__trigger.disabled:hover:after {
        border-top: 6px solid #555555;
    }

    .multi-select__trigger.disabled:hover {
        background-color: #333;
        border: 1px solid #555;
    }

    #sleep-report__sleep-timing-chart span.sleep-report__xaxis-label {
        color: #aaaaaa;
    }

    .highcharts-container span {
        color: #aaa !important;
    }

    .alert-message {
        background: #333;
    }

    .arrow-control i.icon-arrow-left,
    .arrow-control i.icon-arrow-right {
        color: #aaa !important;
    }

    div.sleep-column-chart-summary,
    p.sleep-column-chart-title span {
        color: #aaa !important;
        fill: #aaa !important;
    }

    rect.highcharts-point highcharts-color-1 {
        fill: rgb(249, 168, 26) !important;
        stroke: rgb(255, 255, 255);
    }

    .activityGoal .activity-goal__value {
        color: #fff !important;
        font-weight: bold;
    }

    span.sleep-plotband-type-label.hidden-xs {
        color: #fff !important;
    }

    #progressChart rect[stroke="#cccccc"],
    #progressChart path[stroke="#C0D0E0"] {
        stroke: #555555;
    }

    .report-label {
        color: #ccc !important;
    }

    .report-label {
        color: #ccc !important;
    }

    div.highcharts-label span.activity-graph__icon-background-corner--right,
    div.highcharts-label span.activity-graph__icon-background-corner--left {
        color: #fff !important;
    }

    div.highcharts-label span.activity-graph__icon-background-corner--right span,
    div.highcharts-label span.activity-graph__icon-background-corner--left span {
        color: #fff !important;
    }

    div.highcharts-label span {
        color: #262626 !important;
        padding-top: 0px;
    }

    @media (max-width: 991px) {
        span.icon-bar,
        span.icon-bar:after,
        span.icon-bar:before {
            display: inline-block;
            width: 1.5625em;
            height: 3px;
            background: #aaaaaa;
        }
    }

    table.calendar-month td div.today div.number {
        color: #d93131;
        font-weight: 1000;
    }

    .calendar .bday.items-container.active.today.bday--future.events.targets {
        border: 2px solid #d10027 !important;
    }

    .training-lap-container {
        border-color: #333333 !important;
    }

    div.lap-cell.static-cell.static-header {
        color: #cccccc !important;
        border-color: #444444 !important;
    }

    div.lap-cell {
        color: #aaaaaa !important;
        border-color: #444444 !important;
    }

    .lap-cell {
        background: #333333 !important;
        border-color: #444444 !important;
        color: #cccccc !important;
    }

    .lap-th {
        border-bottom: none !important;
    }

    .lap-row .static-cell,
    .lap-th .static-cell {
        background: #262626 !important;
        border-color: #444444 !important;
        color: #aaaaaa !important;
    }

    .feedbackModalBoxBtn {
        color: #aaaaaa;
    }

    #trainingDetailsContainerBox {
        background-color: #333333;
    }

    .supergraph-marker__number {
        background: #cccccc;
        color: #262626;
    }

    .supergraph-fullscreen {
        background-color: #222222;
    }

    .mapFullscreenHeader,
    .graphFullscreenHeader {
        background-color: #333333;
    }

    .zoneSummary .zone-distribution {
        color: #aaaaaa;
    }

    .donut-list__text {
        color: #aaaaaa;
    }

    #flow_overlay h1 {
        background: #444444;
        color: #cccccc;
        border-bottom: 1px solid #555555;
    }

    #flow_overlay .modal-body {
        background: #222222;
    }

    .notification-panel {
        background: #333333;
        border: 2px solid #555555;
        box-shadow: 0 0 0 5px #666;
        color: #cccccc;
    }

    .modal-header {
        background: #444444;
    }

    .modal-content {
        position: relative;
        background-color: #222222;
    }

    .health-benefit-panel__description {
        background: #222222;
    }

    .health-benefit-panel__description:before {
        border-color: transparent #222222;
    }

    .activity-timeline__info-modal .activity-timeline__info-modal-titles-container {
        background-color: #333333;
    }

    .activity-timeline__info-modal .activity-timeline__info-modal-info-container .icon.activity-timeline__info-modal-button {
        color: #aaaaaa;
    }

    .page-indicator .active {
        color: #555555;
    }

    .summary-panel__column .carousel-indicators .active {
        background-color: #555555;
    }

    .consent-modal-content {
        background-color: #222222;
    }

    .consent-modal .consents-information {
        background-color: #333333;
    }

    .consent-modal .modal-header {
        background: #333;
    }

    .modal-title {
        background: #333;
        color: #aaa;
    }

    .consent-modal .consent-container:before {
        content: " ";
        display: block;
        border-top: 2px solid #555;
    }

    .modal-title {
        background: #333;
        color: #aaa;
        border-bottom: 1px solid #555;
    }

    .consent-check input[type=checkbox] + span {
        background-color: #333;
    }

    .date-picker-title :hover {
        background: #444444;
        color: #cccccc;
    }

    .week-training-sheet td {
        background-color: #333333;
        border: 1px solid #444444;
    }
    .week-training-sheet .theme-row td.sheet-theme-cell {
        color: #555555;
    }
    .week-training-sheet .timeline-month-row td.timeline-month-cell .month-wrap .timeline-month {
        position: absolute;
        overflow: hidden;
        text-align: center;
        font-weight: 700;
        border: solid #444444;
        border-width: 1px 1px 0;
        background-color: #555555;
    }

    .week-training-sheet tr.theme-header td {
        background-color: #222222;
    }

    .week-training-sheet tr.theme-header td .theme-header-wrap .theme-title-input-wrap .theme-title-input {
        color: #cccccc;
    }


    .week-training-sheet .theme-row td.sheet-theme-cell.cursor-color-no-paint {
        background: #333333;
    }
    .week-training-sheet .theme-row tr.theme-cell-wrap:hover {
        background: #111111 !important;
    }

    .season-tips {
        background: #222;
    }

    #season-tips div img {
        filter: invert(89%) !important;
    }

    .week-training-sheet tr.week-numbers td.week-number {
        -webkit-user-select: none;
        user-select: none;
        transition: all .5s;
        color: #aaa;
        border-color: #666 #444;
    }

    .week-training-sheet .theme-row td.sheet-theme-cell.end-of-period {
        border-right-color: #666666;
    }

    .week-training-sheet tr.week-numbers td.week-number.current-week {
        color: #f94667;
        font-weight: bold;
    }

    .os-theme-polar-planner-editor > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
        background: #666666;
    }

    .week-training-sheet tr.periods-row td.empty,
    .week-training-sheet tr.periods-row td.period-cell {
        height: 42px;
        border: 1px solid #444444;
        border-bottom-color: #666666;
    }

    .week-training-sheet td.period-cell .period-control-wrap .stretch-layer .stretch-handle-left .handle-bar:after,
    .week-training-sheet td.period-cell .period-control-wrap .stretch-layer .stretch-handle-right .handle-bar:after {
        background: none;
    }

    .week-training-sheet td.period-cell .period-control-wrap .button-layer .delete-button {
        background: #333333;
    }

    .color-picker .color-picker-wrap .pop-over {
        background-color: #333333;
        border: 1px solid #555555;
    }

    .registeredProducts_Ebdci .product-container .product {
        background-color: #333;
    }
    .registeredProducts_Ebdci .product-container .registered_product_right {
        background-color: #333;
    }

    .registeredProducts_Ebdci .product-container .registered_product_middle {
        background-color: #333;
    }
    .registeredProducts_Ebdci .product-container .polar_product_picture {
        background-color: #333;
    }
    .settingsContainer_1bi3Q .header-container {
        background-color: #444;
    }

    .settingsContainer_1bi3Q .collapsible .content-container {
        background-color: #333333;
    }

    .download-card {
        background-color: #333;
    }

    .btn-basic.btn--highlighted:focus,
    .btn-basic.btn--highlighted:hover {
        border-color: #f70f42;
        color: #fff;
    }
    .btn-basic.btn--highlighted {
        border-color: #555;
        color: #0face7;
    }


    .download-card .type-icon img {
        filter: invert(75%) !important;
    }

    .download-card .links-container .btn img {
        filter: invert(75%) !important;
    }


    .banner-container .banner.left {
        background-color: #333;
    }

    .banner-container .banner.right {
        background-image: linear-gradient(90deg, #333, #000);
    }
    .btn-basic.btn--highlighted {
        border-color: #555;
        color: #cccccc;
    }

    .scrollerItem.card__item.card__item--fixed-width,
    .card__item header,
    .card__item header,
    .card__item-row .card__column:last-child,
    .scrollerItem.card__item .card__item-icon,
    .card__item .card__panel {
        background-color: #333;
    }

    div.js-distribution-container div div div {
        background-color: #333 !important;
    }

    div.js-distribution-container .nav.nav-pills > li > a {
        background: #555555;
        color: #cccccc;
    }

    div.js-distribution-container .nav.nav-pills > li > a:hover {
        background: #f70f42;
        color: #ffffff;
    }
    div.js-distribution-container .nav.nav-pills > li.active > a {
        background: #d10027;
        color: #ffffff;
    }

    .reports-tooltip {
        padding: 10px;
        border: 1px solid #555555;
        box-shadow: 4px 4px 8px #333333;
        background-color: #282828;
        font-family: Helvetica, Arial, sans-serif;
        z-index: 1030;
        font-size: 1rem
    }

    .reports-tooltip__title {
        font-size: 1em;
        color: #bbbbbb;
    }

    .reports-tooltip__item-value-container--default {
        color: #bbbbbb;
    }

    .reports-tooltip:after {
        border-color: rgba(0, 0, 0, 0);
        border-top-color: #282828;
    }

    .range-statistics-wrapper .basic-data-panel {
        background-color: #333333;
    }

    .btn-icon.btn--highlighted {
        border-color: #555;
    }

    .test-hub__info-modal .testhub__info-modal-titles-container {
        background-color: #333333;
    }

    .graph-settings .checkbox-group input[type=checkbox] + span,
    .graph-settings .radio-group input[type=radio] + span {
        background-color: #777777;
    }

    .program-update-panel__content {
        background: #333;
    }

    .sport-picker .sport-picker__control {
        border: 1px solid #555;
        background: #444;
        color: #ccc;
    }
    .sport-picker .sport-picker__control .sport-picker__indicators .sport-picker__indicator:after {
        color: #aaa;
    }

    .target-type-header .target-type-header-content {
        background: #333;
        color: #ccc;
    }

    .target-type-header .target-type-header-content p {
        background: #333;
        color: #ccc;
    }

    .target-type-header .target-type-header-content span {
        background: #333;
        color: #ccc;
    }

    .phase-header {

        background-color: #333 !important;
    }

    .phase-container .phase-content {
        background-color: #444;
    }

    .flow-tooltip__view-content--overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        background-color: #333;
        background-color: rgba(55, 55, 55, .9);
    }

    .flow-tooltip__title {
        background-color: #333;
        color: #ccc;
    }

    .popover__content--add-favorite-target .flow-tooltip__view-wrapper {
        background-color: #444;
        color: #ccc;
    }


    .calendar-favorites__item {
        background-color: #444;
    }

    .calendar-favorites__item:hover {
        background-color: #666;
    }


    .calendar-favorites__item-title {
        color: #ccc;
    }

    #target-type-container .target-type-content {
        background-color: #333;
    }

    .text-left {
        color: #aaa;
    }

    #duration-target-type .target-type-input-container .duration-input-group .colon-separator {
        color: #aaa;
    }

    .placeholder-phase {
        border: 2px dotted #555;
        color: #aaa;
        background-color: #333;
    }

    .zones .zone {
        background: #3e3e3e;
        font-size: 12.5px;
        font-weight: bold;
    }

    .zones .zone.active.heart-rate-zones.zone-1,
    .zones .zone.active.heart-rate-zones.zone-2,
    .zones .zone.active.heart-rate-zones.zone-3,
    .zones .zone.active.heart-rate-zones.zone-4,
    .zones .zone.active.heart-rate-zones.zone-5 {
        color: #222;
    }

    .info-box {
        background-color: #333;
    }

    div.reachGoalAlt div.intensity div.or {
        border: 1px solid #555;
        color: #aaa;
        background-color: #333;
    }
    div.reachGoalAlt div.intensity {
        border-top: 1px solid #555;
    }

    .device-panel {
        background: #333;
    }

    .device-panel .device-content-wrap .device-favorites {
        background-color: #444;
        padding: 12px;
    }

    .favorite-component,
    .favorite-component * {
        background-color: #444;
        color: #ccc;
    }

    .favorite-list-component .list-header {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        margin-bottom: 2px;
        border-bottom: 2px solid #555;
    }
    .favorite-select-toggle-button,
    .favorite-select-toggle-button * {
        background-color: #444;
    }

    .favorite-tray-component .favorite-list-component .device-assignment-wrapper {
        background-color: #444;
    }

    .selected.favorite-select-toggle-button .button-border {
        background-color: #555;
    }

    .draggable-favorite-container .draggable-favorite .reorder-handle {
        background-color: #444;
        color: #ccc;
    }

    .favorite-component .sport-icon {
        background-color: #666;
    }
    .device-assignment-wrapper.white-background {
        background-color: #666;
    }

    .phase-settings .phase-goal input,
    .phase-settings .phase-name input {
        border: 1px solid #555;
    }

    .highcharts-series.highcharts-tracker rect[fill="#d8d8d8"] {
        fill: #444 !important;
    }

    .highcharts-grid path[stroke="#ccc"] {
        stroke: #444 !important;
    }

    .highcharts-grid path[stroke="#666"] {
        stroke: #444;
    }

    hr {
        border-top: 1px solid #555 !important;
    }

    .highcharts-container [stroke="#262626"] {
        stroke: #aaa;
        opacity: 0.6;
        stroke-width: 3 !important;
    }

    .highcharts-container [stroke="#ccc"] {
        stroke: #444 !important;
    }

    .highcharts-container [fill="#262626"] {
        fill: #aaa !important;
        opacity: 0.6;
    }

    div.totalLoadLegend ul li .dot.load {
        background-color: #444;
        border: 1px solid #555;
    }

    div#totalLoad div.timestamplabel.today span {
        color: #d10027 !important;
    }

    div#totalLoad div.timestamplabel.today span:hover {
        color: #fff !important;
    }

    div#totalLoad div.timestamplabel:hover span,
    div#totalLoad div.timestamplabel:hover {
        color: #fff !important;
    }

    div#totalLoad div.timestamplabel:hover span {
        color: #fff !important;
    }

    div.event.event-month.exercise a:hover div.details span {
        color: #222 !important;
    }

    div.event.event-month.trainingTarget a:hover div.details span {
        color: #777 !important;
    }

    .calendar .bday.items-container.active.today.bday--future.events.targets {
        border: 2px solid rgba(217, 49, 49, 9) !important;
        background-color: rgba(209, 0, 39, .1) !important;
        color: #ccc !important;
    }
    .calendar .bday.items-container.active.today.bday--future.events.targets:hover {
        border: none !important;
    }

    div.holder.tooltip-trigger:hover {
        background-color: #222 !important;
        border: 2px solid rgba(209, 0, 39, 9) !important;
    }

    div.favorite-library-preview-modal .modal-header h4.modal-title,
    .favorite-library-preview-modal.modal-dialog .modal-header {
        background-color: #444 !important;
        border-bottom: none !important;
    }

    .favorite-library-preview-modal .preview-row .preview-value .preview-textarea,
    .favorite-library-preview-modal .preview-row .preview-value .preview-textfield {
        border: 1px solid #555 !important;
    }

    .training-zones-full__data-container {
        border-right: 1px dotted #555;
    }
    .training-zones-full__zone {
        border-top: 1px dotted #555;
        border-right: 1px dotted #555;
    }
    .training-zones-full__zone:last-child {
        border-bottom: 1px dotted #555;
    }

    .popover__content--add-favorite-target {
        width: 250px !important;
        border: 1px solid #555;
    }

    .border-left-lg-before:before {
        border-left: 1px solid #555;
    }

    .table .table__header {
        background: #333;
        border: 0;
        color: #adadae;
        padding: 3px;
    }

    .table .table__header-cell {
        border-right: 1px solid #555;
    }

    .community-classes-table-concise .table__header .table__cell:nth-child(2),
    .community-classes-table .table__header .table__cell:nth-child(2) {
        width: 36%;
    }

    .community-classes-table-concise .table__header .table__cell:nth-child(3),
    .community-classes-table .table__header .table__cell:nth-child(3) {
        width: 18%;
    }

    .community-classes-table-concise .table__header .table__cell:nth-child(4),
    .community-classes-table .table__header .table__cell:nth-child(4) {
        width: 23%;
    }

    .table .table__session-row {
        background: #333;
        border-top: 1px dotted #555;
    }

    .table .table__session-row:hover {
        background: #555;
        cursor: pointer;
    }

    .flow-modal__heading {
        background: #555;
        padding: 1.25em;
    }
    .modal-wrap {
        background: #333;
        max-width: 500px;
        border: 1px solid #555;
    }

    .mfp-close-btn-in .mfp-close {
        color: #ccc;
    }


    table.calendar-month td {
        border: 2px solid #555555;
        border-left: 0;
        border-bottom: 0;
    }

    table.calendar-month tr {
        border-bottom: 2px solid #555555;
        border-left: 0;
    }

    .calendar-month .items-container.bday:not(.active) {
        border-left: none;
        border-top: none;
    }

    table.calendar-month tr.last-row .bday.items-container:not(.active) {
        border-width: 0;
        border-bottom: none;
        border-right: none;
    }
    table.calendar-month tr.last-row > td {
        border-bottom: none !important;
        border-color: #555555;
    }

    .main-nav__menu a span {
        border-right: 1px solid #555;
    }

    .bootstrap-datetimepicker-widget .datepicker .datepicker-days td.cw {
        background-color: #555;
        color: #ddd !important;
    }

    .card__item-row {
        border-top: 1px solid #555;
    }

    .dropdown-menu {
        background-color: #333;
        border: 1px solid #555;
    }

    .datepicker .table-condensed td {
        text-align: center;
        border-right: 1px solid #555;
        padding: 5px 0;
    }

    .datepicker .table-condensed td:hover[colspan="7"] {
        background: 0 0;
        color: #ccc;
    }

    .date-picker-title.open {
        background: #555;
        border-radius: 0 5px 5px 0;
        border: 1px solid #433e46;
    }

    .dropdown-menu > li > a {
        color: #aaa;
    }

    .program-slider__break-content:before {
        border-left: none;
    }

    div#totalLoad div.lastSyncLabel .pointer {
        filter: invert(67%) !important;
    }

    .day-content-list .event-day a:hover {
        background: #333;
    }

    .feedbackModalBoxBtn {
        background: #333;
        border-color: #444 !important;
        margin: 10px 0px;
    }

    .feedbackModalBoxBtn:hover {
        background: #222;
        border-color: #444 !important;
        color: #ccc;
    }

    .notification-listing {
        background: #222;
        border: 1px solid #444;
    }

    .notification-listing .item.new {
        background: #333 !important;
    }

    .notification-listing .item .content p {
        color: #aaa !important;
    }

    .notification-listing .item {
        border-bottom: 1px solid #444;
        color: #aaa !important;
    }

    .open .notification-wrapper:after {
        border-left: 12px solid #000 !important;
        border-right: 12px solid #000 !important;
        border-bottom: 10px solid #222 !important
    }

    .notification-listing .item:hover {
        background: #333 !important;
        color: #ccc !important;
    }

    .main-nav__menu .active div {
        background: #000;
    }

    .repeat .repeat-content.empty {
        background: #333 !important;
    }

    *::-webkit-scrollbar {
        width: 12px !important;
    }

    *::-webkit-scrollbar-track {
        background: #111 !important;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #666 !important;
        border-radius: 20px !important;
        border: 3px solid #444 !important;
    }

    .view--has-submenu .wrapper {
        background: #222 !important;
    }

    .container-summary .col-md-4 {
        border-right: 1px solid #555 !important;
    }

    .dropdown-menu > li > a,
    .dropdown-menu li > .dropdown-menu-item {
        color: #aaa !important;
    }
}