@navBar: #2b3e51;
@navBarReadableText: contrast(@navBar);

@brand: #369dd0;
@brandReadableText: contrast(@brand);

@darkBlue: 		#2b3e51;

/* ==================================================================================================================== */
/* ! PAGE STYLES
/* ==================================================================================================================== */

md-progress-circular path {
	stroke: @brand !important;
}

button,
a {
	&.brandButton {
		color: @brandReadableText !important;
		background: @brand;
		&:hover {
			background: @brand !important;
			opacity: 0.8;
		}
		&:focus {
			background: @brand !important;
			opacity: 0.8;
		}
		&[disabled] {
			background: #bcbcbc !important;
			&:hover {
				background: #bcbcbc !important;
			}
		}
	}
}
.md-button {
	&.brandButton {
		color: @brandReadableText !important;
		background: @brand;
	}
	&.noMargin {
		margin: 0;
	}
	&.greyButton {
		&.active {
			color: @brandReadableText !important;
			background: @brand;
		}
	}
	&.whiteButton {
		&:hover {
			color: @brand;
		}
		&.active {
			color: @brandReadableText !important;
			background: @brand;
		}
	}
}
md-list-item {
	&.overviewSection {
		&.active {
			border-left: 3px solid @brand;
		}
	}
}
.md-button.md-accent:not([disabled]) md-icon {
	color: @navBarReadableText !important;
}
md-checkbox.md-checked .md-icon,
md-checkbox.md-default-theme.md-checked .md-icon,
md-checkbox.md-checked .md-icon,
md-checkbox.md-checked .md-ink-ripple {
	color: @brand;
}
.svg-icon>svg {
	height: 64px;
}

/* ==================================================================================================================== */
/* ! NOTIFICATIONS PANEL
/* ==================================================================================================================== */

.notificationsPanelHold {
	a {
		&.notificationRow {
			.circleHold {
				&.iconVersion {
					i {
						background: @brand;
						color: @brandReadableText !important;
					}
				}
			}
		}
	}
}


/* ==================================================================================================================== */
/* ! INTRO WIZARD - ACCOUNT SETUP
/* ==================================================================================================================== */

.introBanner {
	background: @navBar;
	color: @navBarReadableText !important;
}

/* ==================================================================================================================== */
/* ! HEADER
/* ==================================================================================================================== */

header.mainHeader {
	background: @navBar;
	// color: @navBarReadableText !important;
}
.subHeaderHold {
	// background: @navBar;
	// color: @navBarReadableText !important;
}
.subHeader {
	// background: @navBar;
	// color: @navBarReadableText !important;
	.md-subheader {
		// background: @navBar;
		// color: @navBarReadableText !important;
		span {
			// color: contrast(@navBar) !important;
		}
	}
}

md-tabs.md-default-theme md-ink-bar,
md-tabs md-ink-bar {
	color: @brand;
	background: @brand;
}

.navTabs {
	md-tabs.md-default-theme md-ink-bar,
	md-tabs md-ink-bar {
		background: @brand;
		// color: @navBarReadableText !important;
	}
}
.navTabs .md-tab.md-active when (luminance(@brand) < 95%) {
	color: @brand !important;
}

.measurementTabs {
	md-tabs.md-default-theme md-ink-bar,
	md-tabs md-ink-bar {
		background: @brand;
	}
	.md-tab.md-active {
		color: @brand !important;
	}
	md-tabs.md-default-theme md-ink-bar,
	md-tabs md-ink-bar {
		background: @brand;
		color: @brand;
	}
}

a {
	.unReadMessage {
		.unreadBubble {
			border: 2px solid @navBar;
		}
	}
}

header {
	&.mainHeaderTwo {
		background: @navBar;
		color: @navBarReadableText !important;
		ul {
			&.menuNav {

				li {

					a {
						color: @navBarReadableText !important;
						&.active {
							border-left: 3px solid @navBarReadableText !important;
							color: @navBarReadableText !important;
						}
					}
				}
				.divider {
					background: @navBarReadableText !important;
					opacity: 0.3;
				}
			}
		}
	}
}

/* ==================================================================================================================== */
/* ! LOGIN PAGE
/* ==================================================================================================================== */

.loginNavBar {
  background: @navBar;
}

.loginHold {
	.logoHeader {
		background: @navBar;
		border-left: 1px solid @navBar;
		border-right: 1px solid @navBar;
		border-top: 1px solid @navBar;
		color: @navBarReadableText !important;
	}
}

.loginOptionsHold {
  .loginOptionsRow {
    .col {
      a {
        span {
          &.icon {
            background: @brand;
            i {
              color: @brandReadableText;
            }
          }
        }
      }
    }
  }
}

/* ==================================================================================================================== */
/* ! BROWSE PACKAGES PAGE
/* ==================================================================================================================== */

.buyPackagesRow {
  .logoHeader {
    background: @navBar;
    border-left: 1px solid @navBar;
    border-right: 1px solid @navBar;
    border-top: 1px solid @navBar;
    color: @navBarReadableText !important;
    > h2, > h2 > a {
      color: @navBarReadableText !important;
    }
  }

  .logoContainer {
    margin-top:105px;
    background: @navBar;
    width:100%;
  }

  div.stretchy-wrapper {
    width: 100%;
    /*padding-bottom: 56.25%; /* 16:9 */
    padding-bottom: 63.93%;
    position: relative;
  }

  div.stretchy-wrapper > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    text-align: center;
    padding-top:7%;
    > img {
      max-height: 85%;
    }
  }
}

/* ==================================================================================================================== */
/* ! NAVIGATION BAR
/* ==================================================================================================================== */

md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
	background: @navBar;
	color: @navBarReadableText !important;
}
md-toolbar:not(.md-menu-toolbar) .md-button:not(.md-raised).active {
	color: @navBarReadableText !important;
}
md-toolbar.loginToolbar {
	background: #eee;
	color: #2b3e51;
}

md-menu-item>.md-button.dropDownButton {
	&:hover {
		color: @brand;
	}
}

/* ==================================================================================================================== */
/* ! BREADCRUMB STYLES
/* ==================================================================================================================== */

.breadCrumbHold when (luminance(@brand) < 95%) {
	ul {
		li {
			span {
				&.text {
					color: @brand;
				}

			}
		}
	}
}

/* ==================================================================================================================== */
/* ! TOUR RIGHT PANEL STYLES
/* ==================================================================================================================== */

.rightTourPanel when (luminance(@brand) < 95%) {
	.bodyPanel {
		.innerBody {
			p {
				a {
					color: @brand;
				}
			}
		}
	}
}

/* ==================================================================================================================== */
/* ! THE HUB
/* ==================================================================================================================== */


.md-button.md-fab {
	background: @brand !important;
	color: @brandReadableText !important;
	md-icon {
		color: @brandReadableText !important;
	}
}
a.md-button.md-default-theme.md-fab:not([disabled]):hover,
a.md-button.md-fab:not([disabled]):hover,
.md-button.md-default-theme.md-fab:not([disabled]):hover,
.md-button.md-fab:not([disabled]):hover,
.md-button.md-fab:not([focused]) {
	background-color: @brand !important;
	color: @brandReadableText !important;
}
.md-fab-action-item {
	// a.md-fab {
	// 	md-icon {
	// 		color: #fff !important;
	// 		&:hover {
	// 			background: @darkBlue !important;
	// 			color: #fff;
	// 		}
	// 	}
	// }
	.md-button.md-fab {
		background: @darkBlue !important;
		color: #fff !important;
		&:hover {
			background: @darkBlue !important;
			color: #fff !important;
		}
		md-icon {
			color: #fff !important;
			&:hover {
				color: #fff !important;
			}
		}
	}
}
md-card {
	&.hubProfileCard {
		a {
			&.profileCard when (luminance(@brand) < 95%) {
				&:hover {
					span {
						color: @brand;
					}
				}
			}
		}
		.nextSession {
			span {
				&.nextSessionTitle {
					span {
						&.number {
							background: @brand;
							color: @brandReadableText !important;
						}
					}
				}
			}
			.pillHold {
				.pill {
					span {
						&.numberLogged {
                          background: @brand;
							color: @brandReadableText !important;
						}
					}
				}
			}
		}
	}
}

.clientHubButtons {
	.md-button {
		.topIcon {
            span {
                &.backgroundCircle {
                    background: @brand;
                }
            }
            i {
                color: @brand;
            }
        }
	}
}

/* EDIT MENU */
md-menu {
	&.editMenuHold {
		.md-button {
			&:hover {
				i {
					color: @brand;
				}
			}
		}
	}
}
md-list {
	&.trainerProfileActions {
    	a {
    		&:hover {
    			color: @brand;
    			i {
    				color: @brand;
    			}
    		}
    	}
	}
}

/* ==================================================================================================================== */
/* ! TIMELINE STYLES
/* ==================================================================================================================== */

section when (luminance(@brand) < 95%) {
    .comment {
		.text {
			p {
				a {
					color: @brand;
				}
			}
		}
		.attribution {
		    a {
		    	color: @brand;
		    }
		}
	}
}

/* ==================================================================================================================== */
/* ! CLIENT HUB STYLES
/* ==================================================================================================================== */




.scheduleTodayClientHubWrap {
	.innerHold {
		.bottomSection {
    		.md-button {
    			i {
    				color: @brandReadableText !important;
    			}
    			span {
    				&.buttonText {
    					color: @brandReadableText !important;
    				}
    			}
    		}
		}
	}
}

/* ==================================================================================================================== */
/* ! SCHEDULE TEMPLATES STYLES
/* ==================================================================================================================== */

.currentScheduleTopWrap {
	.currentCol {
		.topIconArea {
			i {
				color: @brand;
			}
		}
	}
}

/* ==================================================================================================================== */
/* ! FORMS
/* ==================================================================================================================== */

md-switch.md-checked .md-thumb {
	background-color: @brand;
	color: @brandReadableText !important;
}
md-switch.md-checked .md-bar {
	background-color: @brand;
	color: @brandReadableText !important;
	opacity: 0.6;
}
md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator {
	background: @brand;
	color: @brandReadableText !important;
}
.md-input-focused label {
	color: @brand !important;
}
.md-input-focused .md-input,
.md-input-focused .md-select-value {
	border-color: @brand !important;
}
md-radio-group:not([disabled]) .md-primary.md-checked .md-off,
md-radio-button:not([disabled]).md-primary.md-checked .md-off {
	border-color: @brand !important;
}
md-radio-group .md-checked:not([disabled]).md-primary .md-ink-ripple {
	color: @brand !important;
}
md-radio-group:not([disabled]) .md-primary .md-on,
md-radio-button:not([disabled]).md-primary .md-on {
	background-color: @brand !important;
}
md-checkbox:not([disabled]).md-primary.md-checked .md-icon {
	background-color: @brand !important;
}

/* ==================================================================================================================== */
/* ! PACKAGES AREA
/* ==================================================================================================================== */

md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-ink-bar {
	color: @brand !important;
	background: @brand !important;
}

.packagesAnalyticsTopRow when (luminance(@brand) < 95%) {
	.topCol {
		span {
			&.topNumber {
				color: @brand;
			}
		}
	}
}
.navTabs when (luminance(@brand) < 95%) {
	md-tabs.md-default-theme md-ink-bar,
	md-tabs md-ink-bar {
		background: @brand;
		color: @brand;
	}
	&.packagesTabs {
		.md-tab.md-active {
			color: @brand !important;
		}
	}
}
.measurementTabs .md-tab.md-active {
	color: @brand;
}
.clientInfo {
	ul {
		li {
			a {
			    color: @brand;
			}
		}
	}
}
.multipleChoiceComponent {
	&.opinionComponent {
		a {
			&.rangeNumberHold {
				&.active {
					border-left: 2px solid @brand;
				}
			}
		}
	}
}

/* ==================================================================================================================== */
/* ! PANEL LIST
/* ==================================================================================================================== */

.panelList {
	.panelHeading when (luminance(@brand) < 95%) {
		h3 {
			span {
				&.rightText {
					color: @brand;
				}
			}
			&.lessPadding {
				a {
					color: @brand !important;
				}
			}
		}
		a {
			&.add {
				&:hover, &.active {
					color: @brand;
				}
				i {
					color: @brand;
				}
				&.withText {
					i {
						color: @brand;
					}
					span {
						&.buttonText {
							color: @brand;
						}
					}
				}
			}

		}
	}
	.panelBottom {
		a {
			color: @brand;
		}
		.foodSearchHold {
			.searchResultsPanel {
				.topRow {
					a {
						color: @brand;
					}
				}
			}
		}
	}
	md-list {
		md-list-item {
			a {
				&:hover {
					color: @brand;
				}
			}
			span {
				&.newItem {
					background: @brand;
					color: @brandReadableText !important;
				}
			}
		}
	}
	&.overviewPage {
		md-list {
			md-list-item {
				&.active {
					border-left: 3px solid @brand;
					a {
						span {
							color: @brand;
						}
					}
				}
			}
		}
	}
}
md-list-item {
	&.active {
		border-left: 3px solid @brand;
		a {
			span {
				color: @brand;
			}
		}
	}
}

.editClientVideoForm,
.videoTabRow {
	.md-button {
		&.active {
			border-bottom: 2px solid @brand;
		}
	}
}

.dailyCalories {
	span {
		color: @brand;
	}
}

/* ==================================================================================================================== */
/* ! CLIENTS PROFILE
/* ==================================================================================================================== */

md-chips {
	.md-chips {
		&.md-focused {
			box-shadow: 0 2px @brand;
		}
	}
}

/* ==================================================================================================================== */
/* ! MEASUREMENT STYLES
/* ==================================================================================================================== */


.measurementTabs {
	.md-tab {
		&.md-active {
			color: @brand;
		}
	}
}

/* ==================================================================================================================== */
/* ! CALENDAR STYLES
/* ==================================================================================================================== */

.fc-event {
	background-color: @brand;
	border: 1px solid @brand;
	color: @brandReadableText !important;
}
.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active {
	background: @brand !important;
	color: @brandReadableText !important;
}
.btn-group {
	.md-button {
		&.active {
			background: @brand;
			color: @brandReadableText !important;
		}
	}
}
mwl-calendar .cal-month-box .cal-day-today span[data-cal-date] {
	background: @brand;
	color: @brandReadableText !important;
}


/* ==================================================================================================================== */
/* ! MESSAGES STYLES
/* ==================================================================================================================== */


.unRead {
	border-left: 4px solid @brand;
	i {
		color: @brand;
	}
}

/* ==================================================================================================================== */
/* ! WORKOUT LOGGER STYLES
/* ==================================================================================================================== */


.exerciseLoghold {
    .logRow {
        .col {
            a {
                &.iconButton {
                    i {
                    	color: @brand;
                    }
                }
            }
        }
    }
}

/* ==================================================================================================================== */
/* ! RESULTS TRACKER STYLES
/* ==================================================================================================================== */

a {
	&.resultsBoxLink {
		&.active {
			md-card {
				&.resultsTrackerBox {
					.topIconHold {
						md-icon {
							color: @brand;
						}
					}
					md-card-title {
						span {
							&.md-headline {
								color: @brand;
							}
						}
					}
				}
			}
		}
	}
}

.customExerciseSearchHold {
	md-tabs.md-default-theme md-ink-bar,
	md-tabs md-ink-bar {
		color: @brand;
		background: @brand;
	}
}
.exerciseTabs {
	.md-tab.md-active {
		color: @brand;
	}
	md-tabs .md-tab .md-ripple-container {
		color: @brand;
	}
}
md-tabs.md-accent > md-tabs-wrapper {
	background: transparent;
	color: @brand;
}
md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]),
md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active {
	color: @brand;
}


/* ==================================================================================================================== */
/* ! WORKOUT BUILDER STYLES
/* ==================================================================================================================== */

.noWorkouts,
.noEvents {
	.topSection {
		i {
			background: @navBar;
			opacity: 0.8;
			color: @navBarReadableText !important;
		}
	}
	.bottomSection {
		.md-button {
			i {
				color: @brand;
			}
		}
	}
}

/* ==================================================================================================================== */
/* ! UPGRADE
/* ==================================================================================================================== */


.additionalTrainers {
	button,
	a {
		background: @brand;
		color: @brandReadableText !important;
		&:hover {
			background: @brand !important;
			color: @brandReadableText !important;
			opacity: 0.8 !important;
		}
	}
}

/* ==================================================================================================================== */
/* ! DIALOGS
/* ==================================================================================================================== */
md-dialog {
	md-toolbar.md-default-theme:not(.md-menu-toolbar) md-icon, md-toolbar:not(.md-menu-toolbar) md-icon {
		color: @navBarReadableText !important;
	}
}

/* ==================================================================================================================== */
/* ! CUSTOM APP SETTINGS STYLES
/* ==================================================================================================================== */

.customAppWrapper {
	p {
		a {
			color: @brand;
		}
	}
}

.panelHeading {
	md-progress-linear {
		.md-container {
			background: lighten(@brand, 35%) !important;
		}
		.md-bar {
			background: @brand;
		}
	}
}