$main-color : #2c304d;
$gray-color : #ebebee;
$gray-color2 : #f0f0f0;

label {
	&.label-bold {
		// font-size: 15px;
		color          : #000;
		font-weight    : bold !important;
		text-transform : uppercase;
	}
}

span {
	&.label-bold {
		color          : #000;
		font-weight    : bold !important;
	}
}

input.slug[name=slug] {
	// display: none;
	border: 0;
	background-color: $gray-color;
	width: 200px;
	padding: 4px;
}

.linethrough {
	text-decoration : line-through;
}

.switching-checkbox {
	display          : inline-block;
	width            : 45px;
	height           : 22px;
	background-color : #eee;
	border           : 2px solid #ccc;
	border-radius    : 50px;
	position         : relative;
	cursor           : pointer;

	span {
		height           : 18px;
		width            : 18px;
		background-color : #aaa;
		display          : inline-block;
		border-radius    : 50%;
		position         : absolute;
		top              : 50%;
		transform        : translateY(-50%);
		left             : 0px;
		z-index          : 1;
	}

	input[type=checkbox] {
		opacity : 0;
	}

	input[type=checkbox]:checked + span {
		left             : unset;
		right            : 0px;
		background-color : $main-color;
	}
}
.show-text {
	vertical-align: top;
}

.custom-select-container {
	background-color: #fff;
	width: 100%;
	.toggle-option-list {
		width           : 100%;
		display         : block;
		padding         : 8px 10px;
		border          : 0;
		background-color: $gray-color;
		position        : relative;
		&:after {
			content     : '';
			border-top  : 5px solid #000;
			border-left : 5px solid transparent;
			border-right: 5px solid transparent;
			position    : absolute;
			top         : 50%;
			right       : 10px;
			transform   : translateY(-50%);
		}
	}
	.option-list-container {
		box-shadow: 0px 0px 10px 5px rgba(#000, 0.3);
		display   : none;
		.option-search {
			width  : 100%;
			padding: 10px;
			input {
				padding: 8px 8px;
			}
		}
		.option-list {
			max-height: 400px;
			overflow  : auto;
			li.option {
				position: relative;
				input[type=checkbox] {
					opacity: 0;
					visibility: hidden;
					position: absolute;
				}
				.text {
					user-select     : none;
					-moz-user-select: none;
				}
				cursor     : pointer;
				padding    : 8px 20px 8px 20px;
				color      : #000;
				position   : relative;
				&.active {
					background-color: $main-color;
					color: #fff;
					.tick {
						display: inline-block;
					}
				}
				.tick {
					position      : absolute;
					border-bottom : 2px solid #fff;
					border-right  : 2px solid #fff;
					top           : 50%;
					right         : 10px;
					width         : 10px;
					height        : 15px;
					transform     : rotate(40deg) translate(-50%, -50%);
					display       : none;
				}
			}
		}
	}

}