@import url(../lib.less);
@import url(../bootstrap/variables.less);
@import url(../bootstrap/mixins.less);
@import url(../bootstrap/utilities.less);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,800,700);

@color_inactive: #EEEEEE;
// @color1: #6C9D31;

@color1: #333; // dark gray
@color2: #2A97FE; // light blue
@color3: #2A97FE; // light blue

@buttonCornerRadius: 10px;
@fancyFont: 'Open Sans', sans-serif;

/* Generic color classes for the main accent color of each theme */
.accent-color-1 {
	color: @color1;
}
.accent-bkgd-color-1 {
	background-color: @color1;
}
.accent-border-color-1 {
	border-color: @color1;
}

.access-code-tt {
	border-left-color: @color2;
}

body {
	// background: #ccc url('https://res.cloudinary.com/eventservice/image/upload/saas/base/background_radialGradientLightGray.jpg') no-repeat center top;
	background: #fefefe;
}

// General stuff
h1 {
	color: #111;
	font-family: @fancyFont;
	a{
		color: #111;
		&:hover {
			color: #000;
		}
	}
}

#header {
	border-top-color: #333;
	background-color: white;
	border-bottom-color: #bbb;
	a.menu {
		color: #777;
		border-left-color: #eee;
	}
}
.contentArea {
	background-color: white;
	// .border-radius(@cornerRadius);
	// .box-shadow();
	// .gradient(@origin: bottom, @start: #ddd, @stop: #fff);
	.content {
		border: 1px solid #ccc;
	}
	.contentTitle {
		// .border-radius-custom(@cornerRadius, @cornerRadius, 0, 0);
		// .gradient(@origin: bottom, @start: #00304A, @stop: #004164);
		font-size: 14px;
		font-family: @fancyFont;
		padding: 10px 14px;
		background-color: @color2;
		color: white;
	}
}
.btn {
	// .border-radius(@buttonCornerRadius);
	&.btn-main {
		background-color: black;
		color: white;
		&:hover {
			background-color: #333;
		}
	}
	&.btn-sub {
		background-color: #333;
		color: white;
		&:hover {
			background-color: darken(@color2, 5%);
		}
	}
	&.btn-neutral {
		background-color: #555;
		color: white;
		&:hover {
			background-color: #333;
		}
	}
}
// Add This Custom
.addthisevent-drop {
	.border-radius(@buttonCornerRadius);
	background-color: @color1;
}

.heading {
	&.alt {
		color: @color1;
	}
	&.alt2 {
		color: @color2;
	}
}
.subLabel {
	color: @color2;
}
.revLabel {
	color: @color2;
}

//Notifications
.alert-danger {
	color: white;
	background-color: #FF3300;
	.border-radius(@cornerRadius);
}
.error-message {
	color: white;
	background-color: #FF3300;
	.border-radius-custom(0, 0, @cornerRadius, @cornerRadius);
}

#receiptArea {
	.orderId {
		color: #555;
	}
}
.form-control.form-error {
	border-left-color: #ff3300;
}
.ajax_loader_sm {
	height: 11px;
	width: 43px;
	background-image: url('https://res.cloudinary.com/eventservice/image/upload/saas/base/ajax_loader_sm.gif');
}

#process_bar{
	.ticket_tab{
		background-color: @color_inactive;
		color:#cccccc;
		.border-radius(@cornerRadius);
	}
	.timer_tab{
		// background-color: @color1;
		color:#ffffff;
		.border-radius(@cornerRadius);
	}
	.active{
		background-color: @color1;
		color:#ffffff;

	}
	.ended{
		background-color: #800000;
	}
}
.timer_tab{
		// background-color: @color1;
		// color:#ffffff;
		color: #111;
		.border-radius(@cornerRadius);
	}

#notice {
	background-color: @color1;
	color: white;
}
div.galleryPhoto {
	.box-shadow();
	border: 5px solid white;
}
.videoModule .thumb.at a img {
	border-color: #DF1F40;
}
input:required:not([type="checkbox"]):not([type="radio"]), select:required {
  border-left-color: #DF1F40;
}
.question_required, .question_required_text {
	.question-text::after {
		content: " *Required";
		color: #DF1F40;
	}
}
.checkbox-required {
	border-left: 6px solid #DF1F40;
	padding-left: 10px;
	label::after {
		content: " *Required";
		color: #DF1F40;
	}
}
.questionnaire .question .required-checkboxes,
.questionnaire .question .required-radio-buttons,
.questionnaire .question textarea[required] {
	border-left: 5px solid #DF1F40;
}
.payment-element-classic {
	border-left: 6px solid #DF1F40;
	padding: 8px 12px;
}
#orderTotalReview .amount {
	color: #DF1F40;
}
/* adding for gratuities */
.gratuity-selected{
	color: @color2;
	border-color: @color2;
	background-color: @color2;
	color: #ffffff!important;
}
.gratuity-option:hover{
	box-shadow: 0 2px 3px 0 rgb(0 0 0 / 15%);
	background-color: lighten(@color2,10%);
}
.gratuity-selected:hover{
	color: @color2;
	border-color: @color2;
	background-color: @color2;
	color: #ffffff;
}