@mixin clearfix() {
	&:before, &:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}

//Link & Button colors
$linkColor: #EB003A;
$linkHover: #FF278C;
$defaultButton: #EB003A;
$defaultButtonHover: #FF278C;


//$redAlert:#eb0c3b ;
$redAlert:#e1133e; 
$greenAlert: #41b535;
$focusAlert: #6bc0ff;
$blueAlert:  #6bc0ff;

.custicon-MusicIDBiconPunchout:before {
	content: '\0041';
}

.custicon-MusicIDBicon:before {
	content: '\0042';
}

.mega-collapsable {
	&.collapsed {
		display: none;
	}

}

.mega-collapsable-toggle {
	cursor: pointer;

	i {
		font-size: 14px;
		margin: auto 5px;
		line-height: 16px;
	}

}

.megacal-settings-page {
	
	position: relative;

	.green {
		color: $greenAlert;
	}

	.red {
		color: $redAlert;
	}

	input, select {
		&.valid {
			border-color: $greenAlert !important;
		}

		&.invalid {
			border-color: $redAlert !important;
		}

	}

	div:focus {
		outline: 1px solid $focusAlert !important;
	}

	.select2-container {
		&.valid {
			.select2-selection {
				border-color: $greenAlert !important;
			}

		}

		&.invalid {
			.select2-selection {
				border-color: #eb0c3b !important;
			}

		}

	}

	.short-margin {
		margin-bottom: 5px;
	}

	.small {
		color: #686868;
		font-style: italic;
		font-size: 14px;
		line-height: 17px;
		font-weight: normal;
		margin: 4px 0px 0;
	}

	.docs-link {
		margin-top: 0;
		font-size: 12px;
		line-height: 16px;

		a {
			text-decoration: none;
		}

		i {
			margin-right: 5px;
		}
	}

	input::placeholder {
		font-style: italic;
	}

	button.button-delete {
		color: #fff;
		background: rgb(255, 68, 68);
		border-color: rgb(255, 68, 68);

		&:hover {
			background: $redAlert;
			border-color: $redAlert;
			color: #fff;
		}

	}

	.preloader {
		display: block;
		margin: 0 auto;
		position: fixed;
	    z-index: 99;
	    left: 50%;
	    top: 330px;
		&.hidden {
			display: none;
		}

	}

	.select2-container {
		min-width: 200px;
	}

	.select2-selection {
		min-height: 32px;
	}

	.notice-wrap {
		margin-bottom: 20px;

		.notice-container {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			background: #fff;
			border: 1px solid #cfcfcf;
			border-radius: 5px;
			padding: 7px 18px 3px;
			margin: 0 40px 5px;
			box-shadow: 0px 4px 3px -4px #bababa;

			@media(min-width:1215px) {
				flex-direction: row;
			}

			&#alert-notice {
				flex-wrap: nowrap;
				flex-direction: row !important;

				.alert-notice-inner {
					width: 98%;
				}

				.alert-notice-close {
					background: none;
					border: none;
					border-left: 1px solid #ccc;
					padding-left: 20px;
					cursor: pointer;
				}
			}

			&.hidden {
				display: none;
			}

			&.error-notice {}
			&.success-notice {}

			.notice-text {
				margin-bottom: 10px;
				
				h3{
					margin:0 0 5px;
				}

				@media(min-width:1215px) {
					width: calc(75% - 20px);
					margin-right: 20px;
					margin-bottom: 0;
				}

				p, ol, ul {
					margin: 0;
				}

			}

			.notice-buttons {
				margin-bottom:7px;
				display:flex;
				&:last-child{
					margin-bottom:4px;
				}
				@media(min-width:1215px) {
					//width: 25%;
				}
			}
		}

		#megacal-approval-list {
			.notice-container {
				justify-content: right;
				flex-wrap: nowrap;
				margin-right: 70px;
				.noticeFlexChild{
					width:50%;
					align-self: center;
					h4{
						margin: 7px 10px 6px 0;
					}
					button{
						margin-right:7px;
						&.button-delete{
							background: none;
    						color: $redAlert;
    						&.lessSevere{    							
    							border: none;
    						}
						}
					}
				}
				.rightArea{
					width:50%;
				}
			}
		}
	}

	.megacal-account-details {
		// position: absolute;
		// top: 125px;
		// right: 25px;
		// padding: 10px 15px;
		h3{
			margin-top:0;
		}
		p{
			margin-top:0;
		}

	}

	.megacal-horizontal-form {
		display: flex;
		flex-direction: column;
		justify-content: space-between;    
		align-items: center;
		padding-bottom: 15px;
		margin-bottom: 15px;
		border-bottom: 1px solid #ddd;
		
		@media(min-width:1000px) {
			flex-direction: row;
			flex-wrap: wrap;
		}

		@media(min-width:1260px) {	
			//width: 75%;
		}

		&:last-child {
			border: none;
			padding: 0;
			margin-bottom: 0;
		}

		.megacal-form-field-group {
			padding-bottom: 10px;
			input[type=text]{
				min-width:270px;
			}
			textarea{
				min-width:320px;
				height:55px;
			}
			@media(min-width:1000px) {
				padding: 0;
			}

			label {
				display: block;
				font-weight: bold;
			}
		}

	}

	.admin-tab {
		background: #fff;
		//padding: 10px 330px 10px 20px;
		padding:10px 20px;
		border: #d8d8d8 1px solid;
		
		th label {
			display:block;
			text-align:right;
		}
		.addressFields{
			th, td{
				padding-top:10px;
				padding-bottom:10px;
			}
		}

		&.current {
			display: block;
		}

	}

}
.borderBottomGray{
	border-bottom:1px solid #ddd;
}
.datepicker-orient-bottom {
	margin-top: 30px;
}
.wideTextInput input{
	width:95%;
}
.megacal-admin-tabs {
	@include clearfix();
	margin: 0;

	li {
		position: relative;
		top: 1px;    
		z-index: 1;
		display: block;
		float: left;
		margin: 0;

		a {
			display: block;
			background: #ddd;
			color: #545454;
			padding: 10px 15px;
			border-left: #d8d8d8 1px solid;
			border-top: #d8d8d8 1px solid;
			font-size: 15px;
			line-height: 19px;
			text-decoration: none;

			&:hover {
				background: #ccc;
			}

			&:focus {
				box-shadow: none;
			}

			&.current {
				background: #fff;
			}

		}

		&:last-child a {
			border-right: #d8d8d8 1px solid;
		}

	}

}
.megaNotebox{
	max-width:600px;
	padding:12px 15px;
	border:1px solid #ddd;
	background:#fff;
}
#megacal-events-settings {
	

	a {
		outline: none !important;
		box-shadow: none !important;

		&:focus {
			outline: 1px solid $blueAlert !important;
		}
	}

	#megacal-events-settings-general {
		.connected, .not-connected {
			font-weight: bold;
		}

	}

	.MusicIDBlogo {
		float: right;
		margin: 0;
		position: relative;
		top: 7px;

		img {
			height: auto;
			width: 200px;
		}

	}

	#megacal-events-settings-colors-tab {

		.megacal-color-input {
			display: inline-block;
			vertical-align: middle;
			margin-right: 10px;

			&.megacal-color-text-input {
				width: 100px;
				margin-right: 10px;
			}

			&-reset {
				vertical-align: middle;
			}
		}

		.megacal-opacity-slider-container {
			display: inline-flex;
			vertical-align: middle;
			flex-direction: column;
			justify-content: center;
			margin-right: 10px;
		}

	}

}

#megacal-events-settings-sc {
	ul.optionList {
		> li {
			@include clearfix();
			display: flex;
			align-items: center;
			margin-bottom: 20px;

			> label {
				text-align: right;
				width: 240px;
				margin-right: 30px;
				float: left;

				span.small {
					display: block;
					font-size: 11px;
				}
			}

			.displayCategoryList {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
			}
		}
	}
	

	div#idSelect, div#selected-venue {
		float: left;

		ul.selectedEntities {
			> li {
				input {
					margin-right: 10px;
				}

			}

		}

	}

	input.shortcode {
		width: 60%;
	}

}

.megaFlexSection {
	display:flex;
	width: 100%;
	box-sizing: border-box;		
	.leftArea{
		width:65%;
	}
	.rightArea{
		padding:20px;
		width:35%;
		img.listExamplesPic{
			max-width:100%;
			height:auto;				
		}
	}
}

#TB_window{
	#TB_ajaxContent{
		height:auto;
	}
	#megacal-events-settings.wrap{
		margin:0;    
		box-sizing: border-box;
		.megacal-admin-tabs{
			display:none;
		}
		#megacal-events-settings-sc.admin-tab{
			padding:15px 15px;
			border: none;
			box-sizing: border-box;
			#megacal-events-settings-calendar.admin-tab{
				padding:0;
				border: none;
				box-sizing: border-box;
			}
		}
	}
}
#megacal-upgrade-options {
	.megacal-upgrade-wrap {
		@include clearfix();

		.postbox-container {
			box-sizing: border-box;
			width: 49.5%;
			padding: 0 10px;
		}

		.card {
			max-width: none;
			border: 1px solid #dadada;
			padding: 0;

			.card-header {
				background: #ededed;
				padding: 2px 20px;
			}

			&.card-upgrade {
				.card-header {
					background: $defaultButton;

					h3 {
						color: #fff;
					}

				}

				.megacal-button-upgrade {
					background: $defaultButton;
					border: none;
					box-shadow: none;

					&:focus, &:hover, &:active {
						background: $defaultButtonHover;
						border: none;
						outline: none;
						box-shadow: none;
					}

				}

			}

			.card-body {
				padding: 20px 20px 20px;
				font-size: 15px;
				line-height: 18px;
				box-sizing: border-box;

				ul.features {
					list-style: disc;
					margin: 0 0 25px 25px;

					li {
						// font-size: 15px;
						// line-height: 18px;
						margin-bottom: 5px;
					}

				}

			}

		}

	}
}
.publishOption{
	margin-bottom:12px;
	i{
		float:right;
		position: relative;
    	right: 4px;
	}
	p.small{
		margin-top:2px;
    	padding-left: 12px;
	}
}

#megacal-manage-events {
	margin: 10px 0 20px;
	max-width: 100%;
	box-sizing: border-box;
	h1 .button {
		margin-left: 20px;
	}
	#side-sortables {
		h2{
			margin:0 0 12px;		
			border-bottom: 1px solid #e3e3e3;	    
		}
		h4{
			margin:0 0 7px;
		}
	}	
	#eventManageMask{
		position: absolute;
		background:rgba(54, 54, 54, 0.05);
		width: calc(100% - 20px);
		height: 100%;
		z-index: $z-index-modal;
		pointer-events:none;
		display: block;

		&.hidden {
			display: none;
		}
	}
	#save-event-wrap {
		display: none;
		position: absolute;
		background: #f0f0f1;
		z-index: $z-index-modal;
		width: 100%;
		box-sizing: border-box;
		padding: 0 15px 0 0;

		.megaCancel {
			right: 15px;
			top: 10px;
			float: right;
			position: relative;
		}

		button.megacal-button-delete-event {
			&:hover, &:active, &:focus {
				background-color: $redAlert;
				border-color: $redAlert;
				color: #fff;
			}

		}

		.megacal-custom-recurrence-details {
			display: none;

			.megacal-custom-recurrence-section {
				margin-bottom: 10px;
			}

		}

	}

	#megacal-calendar-outer {
		display: flex;
		padding: 0px 20px 20px 0;
		background: none;
		border: none;

		#megacal-manage-filters {
			//width: 13%;
			position: absolute;
			padding: 0 0 0 12px;
			box-sizing: border-box;
			right: 3%;
			right: 40px;
			top: 15px;
			width: 220px;
			z-index: 998;

			h3 {
				margin: 7px 0 10px 0;
			}

			.megacal-filter-section {
				padding: 0 15px 15px;
				min-width: 0;
			}

			.megacal-filter-cat {
				display: block;
				margin-bottom: 10px;
				font-size: 16px;
				line-height: 18px;
			}

		}

		#megacal-manage-calendar {
			width: 100%;
			padding: 8px 10px;

			.megaEvent {
				text-align: left;
				padding: 0;
				margin: 0;
				font-weight: normal;
				font-style: normal;
				margin: 0 2px 2px 2px;

				.mega-unpublished-event{
					opacity: 0.7;
				}
				.megaEventText{
					&.mega-shared-event {
						cursor: default !important;
						//opacity: 0.7;
						background: #919191;
	    				border-left: 3px solid #666666;
	    				&:hover, &:focus, &:active {
							background: #919191 !important;
		    				border-left: 3px solid #666666 !important;
		    				cursor: default !important;
						}
					}					
				}
			}
		}

	}

	#megacal-change-type-modal {
		display: none;
		position: fixed;
		background: #fff;
		width: 25%;
		height: fit-content;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		box-sizing: border-box;
		padding: 40px 40px;
		z-index: 999;

		#megacal-change-type-options, #megacal-delete-type-options {
			display: none;
		}

	}

	#megacal-admin-mask {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 998;
	}

	.megacal-warning {
		color: #ccbe00;
		font-weight: bold;
	}

}

#megacal-insert-shortcode {
	.wp-media-buttons-icon {
		padding-bottom: 3px;
		padding-right: 3px;

		img {
			padding: 0;
		}

	}

}

.megacal-manage-relationships-page {
	.postbox {
		padding: 15px 15px;
	}
}

.megaMetaBoxTitle {
	margin-bottom: 7px;
}

.megaMetaBox {
	.labelColumn {
		label {
			text-align: right;
			display: block;
		}

	}

	input[type=text], input[type=text].mediumLength {
		width: 400px;
		min-width: 40%;
		max-width: 100%;
	}

	input[type=text].shortLength {
		min-width: 40%;
		width: 200px;
	}

	input[type=text].longLength {
		min-width: 40%;
		width: 90%;
	}

}
.megaCalendarWrap {
	background: #fff;

	.mega-content {
		.mega-loading-animation {
			top: -60px;
			left: unset;
			right: 0;
			width: fit-content;
		
			img {
				margin: 0;
				width: 28px;
			}
		}
	}
}

// Admin Menu
#adminmenu .awaiting-mod.mega-awaiting-mod,
#wpadminbar .awaiting-mod.mega-awaiting-mod {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	margin: 0 0 -1px 2px;
	padding: 0 3px;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: $redAlert;
	background-color: #d63638;
	color: #fff;
	font-size: 10px;
	line-height: 1.9;
	text-align: start;
	z-index: 26;
}

#wpadminbar .awaiting-mod.mega-awaiting-mod {
	margin-top: 7px;
}