@mixin spinner() {
	@keyframes spinner {
		to {transform: rotate(360deg);}
	}

	.spinner {
		position: fixed; /* Sit on top of the page content */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 22334; /* Specify a stack order in case you're using a different order for other elements */
		cursor: pointer; /* Add a pointer on hover */
		opacity: .6;

		&::after {
			content: '';
			box-sizing: border-box;
			position: fixed;
			top: 50%;
			left: 50%;
			width: 45px;
			height: 45px;
			margin-top: -10px;
			margin-left: -10px;
			border-radius: 50%;
			border: 8px solid #ccc;
			border-top-color: #333;
			animation: spinner .6s linear infinite;
		}
	}
}

@mixin checkbox() {
	font-family: "Verdana", sans-serif;
	padding: 0px 15px;
	font-size: 22px;
	float:left;
	line-height:1;
	div {
		margin-bottom: 1em;
	}
	input[type="checkbox"], input[type="radio"] {
		display: none;
	}
	label {
		cursor:pointer;
		color: #555;
	}
	input[type="checkbox"]:checked + label {
		color: $highlight-color;
	}
	input[type="checkbox"] + label span {
		display: inline-block;
		vertical-align: middle;
		width: 20px;
		height: 20px;
		border: 1px solid $clGreyTint;
		border-radius: 2px;
	}
	input[type="checkbox"] + label span::before {
		content: "";
		display: block;
	}

	input[type="checkbox"]:checked + label span::before {
		content: "✓";
		color: $highlight-color;
		text-align: center;
		font-size: 18px;
	}
}

@mixin switchButton($transition-time : 1s, $backColorBtnActive : #468dcb, $backColorBtnInactive :#7aabd6, $widthBtn:100, $marginLeftBtn: 67) {
	input.checkbox-toggle {
		position: absolute;
		left: -9999px;
		opacity: 0;
	}

	.checkbox-toggle + label {
		display: block;
		position: relative;
		cursor: pointer;
		outline: none;
		user-select: none;
		font-family: 'helvetica';
		font-size: 13px;
		margin: 0;
	}

	input.checkbox-toggle:checked + label:before {
		text-align: center;
		content: attr(data-on);
		padding: 3px 30px 0px 0;
	}

	input.checkbox-toggle:not(:checked) + label:before {
		text-align: center;
		content: attr(data-off);
		padding: 3px 0 0px 30px;
	}

	input.checkbox-toggle-round + label {
		padding: 2px;
		width: $widthBtn;
		height: 25px;
		background-color: #dddddd;
		border-radius: 5px;
	}

	input.checkbox-toggle-round + label:before,
	input.checkbox-toggle-round + label:after {
		display: block;
		position: absolute;
		top: 1px;
		left: 1px;
		bottom: 1px;
		content: '';
	}

	input.checkbox-toggle-round + label:before {
		right: 1px;
		border-radius: 5px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round + label:after {
		width: 30px;
		background-color: #fff;
		border-radius: 10%;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		transition: margin $transition-time;
	}

	input.checkbox-toggle-round:checked + label:after {
		margin-left: $marginLeftBtn;
	}

	input.checkbox-toggle-round:checked + label:before {
		background-color: #7aabd6;
		color: white;
	}

	input.checkbox-toggle-round:not(:checked) + label:before {
		background-color: #468dcb;
		color: white;
	}

	input.checkbox-toggle-round-flat + label {
		padding: 2px;
		width: 100px;
		height: 25px;
		background-color: #dddddd;
		border-radius: 35px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round-flat + label:before,
	input.checkbox-toggle-round-flat + label:after {
		display: block;
		position: absolute;
		content: "";
	}

	input.checkbox-toggle-round-flat + label:before {
		top: 2px;
		left: 2px;
		bottom: 2px;
		right: 2px;
		background-color: #fff;
		border-radius: 25px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round-flat + label:after {
		top: 4px;
		left: 4px;
		bottom: 4px;
		width: 27px;
		background-color: #bbb;
		border-radius: 35px;
		transition: margin $transition-time, background $transition-time;
	}

	input.checkbox-toggle-round-flat:checked + label {
		background-color: #7aabd6;
	}

	input.checkbox-toggle-round-flat:checked + label:after {
		margin-left: 42px;
		background-color: #7aabd6;
	}
}

@mixin chartBase() {
	.ms_toggle_btn {
		@include switchButton();
	}

	.ms__custom-tooltip {
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 8px;
		box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, .8);
		color: #f3f3f3;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		min-width: 280px;
		padding: 1rem 3rem;
		text-transform: capitalize;

		p {
			.rightAlign {
				float: right;
			}
		}
	}
}

@mixin lineChartBase() {
	.axis path,	.axis line { /* overridden d3 class */
		fill: none;
		stroke: #e3e3e3;
		shape-rendering: crispEdges;
	}

	.x.axis path { /* overridden d3 class */
		display: none;
	}

	h4 {
		text-align: center;
	}

	@include chartBase();
}

@mixin ellipses($widthSubst : '50px') {
	display: inline-block;
	max-width: calc(100% - #{$widthSubst});
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}