﻿button, button:focus {
	outline: none;
	bottom: 0;
	background: #0E9AEF;
	border: none;
	color: white;
}

	button:hover {
		background: #4490BF;
	}

.buttonDefault {
	padding: 10px;
	border-radius: 5px;
	cursor: pointer;
}

	.buttonDefault.buttonCancel {
		background: #EF3030;
	}

	.buttonDefault.disabled,
	.buttonDefault[disabled="true"] {
		background: gray;
		cursor: default;
	}

.backButton {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 60px;
	min-height: 60px;
	border-radius: 50%;
	background: white;
	cursor: pointer;
	outline: none;
}

	.backButton svg {
		width: 25px;
	}

.iconButton {
	background: #0E9AEF;
	height: 50px;
	width: 50px;
	cursor: pointer;
	border-radius: 5px;
	user-select: none;
	position: relative;
	outline: none;
}

	.iconButton.disabled,
	.iconButton[disabled="true"] {
		background: gray;
		cursor: default;
	}

	.iconButton svg {
		width: 100%;
		height: 100%;
		padding: 15% 0;
		fill: white;
	}

	.iconButton polygon {
		fill: white;
	}

	.iconButton .toolTipText {
		visibility: hidden;
		background-color: #08090A;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		border-radius: 6px;
		padding: 5px 12px;
		position: absolute;
		z-index: 1;
		bottom: 120%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 11px;
		font-weight: normal;
		width: auto;
	}

	.iconButton:hover .toolTipText {
		visibility: visible;
	}

	.iconButton .toolTipText::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #08090A transparent transparent transparent;
	}

.labelButton {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

	.labelButton.disabled {
		cursor: default;
	}

	.labelButton .iconButton {
		height: 30px;
		width: 30px;
		margin-right: 10px;
	}

.switchHolder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.toggleSwitch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	margin: auto;
}

	.toggleSwitch input {
		display: none;
	}

	.toggleSwitch .toolTipText {
		visibility: hidden;
		background-color: #08090A;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		border-radius: 6px;
		padding: 5px 12px;
		position: absolute;
		z-index: 1;
		bottom: 120%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 11px;
		font-weight: normal;
		width: auto;
	}

	.toggleSwitch:hover .toolTipText {
		visibility: visible;
	}

	.toggleSwitch .toolTipText::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #08090A transparent transparent transparent;
	}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(70,70,70,0.3);
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 50%;
	}

input:checked + .slider {
	background-color: #0E9AEF;
}

input:focus + .slider {
	box-shadow: 0 0 1px #0E9AEF;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

#editButton.iconButton {
	background: white;
	border: 1px solid black;
}