@import "colors.less";

@font-face {
	font-family: Montserrat;
	src: url("../fonts/Montserrat-VariableFont_wght.ttf");
}



body {
	margin: 0px;
	background: @light_color;
	font-family: 'Montserrat', 'sans-serif';
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	/* color: @neutral_color; YEN: To fixed contrast errors */

	a {
		font-weight: normal;
		color: @neutral_color; 
	}

	a:hover {
		color: @main_color; /* Changed by Kate */
	}
}

h1 {
	font-size: 36px;
	font-family: 'Montserrat';
    margin-top: 10px;

	span.headerTag {
		font-family: 'Montserrat', 'sans-serif';
		font-size: 10px;
		background: @warning_color;
		color: @light_color;
		padding: 3px 5px;
		border-radius: 8px;
		position: relative;
		top: -4px;
		text-transform: uppercase;
	}
}

a {
	text-decoration: none;
	font-weight: bold;
	color: @main_color;
}

a.button {
	background: @main_color;
	color: @light_color;
	border-radius: 8px;
	padding: 5px 8px;
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
		color: @main_color; /* Changed by Kate */
}

span.toggle {
	border: 2px solid @main_color;
	color: @main_color;
	padding: 3px 5px;
	cursor: pointer;
	text-align: center;
	border-left-width: 1px;
	border-right-width: 1px;
	border-radius: 0px;
}

span.toggle:nth-child(1) {
	border-left-width: 2px;
	border-right-width: 1px;
	border-radius: 8px 0px 0px 8px;
}

span.toggle:last-child {
	border-left-width: 1px;
	border-right-width: 2px;
	border-radius: 0px 8px 8px 0px;
}

span.toggleOn {
	background: @main_color;
	color: @light_color;
}

span.bullet {
	color: @neutral_color; /* changed by jiwon */
}

span.answerYes {
	color: @main_color;
	font-weight: bold;

	&:before {
		content: "🗸";
		margin-right: 0.5rem;
	}
}

span.answerNo {
	color: @warning_color;
	font-weight: bold;
}

.field {
  margin-bottom: 1rem;
}

input,select,textarea {
	font-family: 'Montserrat', 'sans-serif';
	font-size: 16px;
}

input[type=text],input[type=email],input[type=password],textarea,select {
	border-radius: 0.34em;
	padding: 0.25em 0.5em;
	margin-right: 0.5em;
	border: 2px solid @neutral_color;
	background: @light_color;
}

input[type=submit],input.button,a.button,button {
	font-family: 'Montserrat', 'sans-serif';
	font-size: 16px;
	font-weight: bold;
	background: @main_color;
	color: @light_color;
	border-radius: 0.68em;
	padding: 0.34em 0.5em;
	margin: 0px;
	border: 0px;
	min-width: 5em;
	width: fit-content;
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
	cursor: pointer;

	&.cancel, &[disabled] {
		background: @neutral_color;
		&:hover {
			color: @main_color;
		}
	}

	&.delete {
		background: @warning_color;
	}

	&:hover {
		text-decoration: underline;
	}
}

hr {
	border: 0px;
	border-top: 2px solid @neutral_color;
	clear: both;
}

div.clear {
	clear: both;
}

div.header {
	background: @neutral_color;

	div.headerInner {
		max-width: 1024px;
		margin: 0px auto;
	}

	figure {
		font-family: 'Montserrat';
		font-weight: normal;
		margin: 0px 0px 0px 25px;
		font-size: 36px;
		float: left;
		height: 70px;
		line-height: 70px;
        overflow: visible;
        
        img {
            position: relative;
            left: -25px;
            top: -5px;
        }

		a {
			color: @light_color;
			font-weight: normal;
		}
	}

	ul {
		float: right;
		margin: 0px 25px 0px 0px;
		height: 70px;
		line-height: 70px;
		white-space: nowrap;

		li {
			display: inline;
			background: @light_color;
			border-radius: 8px;
			padding: 5px 8px;
			margin: 0px;
		}
		li#toggle_guest {
			background: transparent;
			a { font-weight: normal; }
		}

		li.guestSignIn {
			background: @neutral_color; /* Changed by Kate */
			padding: 5px 0px 5px 5px;

			form { display: inline-block; }

			input[type=text],input[type=password] {
				border: 0px;
			}
            
            button {
                background-color: @main_color; /* changed by jiwon */
								color: @light_color;
            }
		}
	}
}

div.submenu {
	background: @neutral_color;
	padding: 10px 0px;

	div.submenuInner {
		max-width: 900px;
		margin: 0px auto;
        padding-left: 124px;
	}

	ul {
		margin: 0px 0px 0px 50px;
		padding: 0px;
		float: left;


		li {
			display: inline;
			margin: 0px;

			a {
				background: @light_color;
				border-radius: 8px;
				padding: 5px 8px;
			}

			a:hover {
				background: @main_color; /* changed by jiwon */
                color: @light_color; /* changed by jiwon */
			}

			a.attend {
				background: @neutral_color;
				color: @warning_color;
			}

			a.attend:hover {
				background: @accent_color;
			}

			a.active {
				background: @accent_color;
				color: @dark_color;
				border: solid 1px @dark_color;
				box-shadow: 1px 2px 0 @dark_color;
			}
		}
	}

	ul.rightMenu {
		float: right;
		margin: 0px 50px 0px 0px;
	}
}

div.notification {
	background: @neutral_color;
	padding: 10px 0px;

	div.notificationInner {
		max-width: 1024px;
		margin: 0px auto;

		p {
			text-align: center;
			margin: 5px 100px;
		}
	}
}

.content {
	max-width: 924px;
	margin: 0px auto;
	padding: 60px 50px;

	div.bigAlert {
		border: 2px solid @neutral_color; /* Changed by Kate */
		border-radius: 30px;
		text-align: center;
		padding: 5px 30px;
        margin-top: 20px;

		p.applyButton a {
			background: @accent_color;
			color: @light_color;
			border-radius: 20px;
			font-size: 16px;
			padding: 5px 12px;
		}
	}

	div.campEnded {
		background: @neutral_color;
		border-radius: 4px;
		text-align: center;
		padding: 5px 10px;
		margin-bottom: 10px;

		p {
			margin: 0px;
		}
	}

	.leftContent {
		float: left;
		width: 650px;
		margin-bottom: 100px;

		h1 {
			font-size: 30px;
			font-family: 'Montserrat', 'sans-serif';
		}

		p.averageRating {
			font-size: 18px;

			span.rating {
				font-size: 36px;
			}
		}

		span.rating {
			color: @warning_color;
			font-weight: bold;
		}

		p.searchBar {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			margin-top: 0px;

			input {
				width: 630px;
			}

			input.calendar {
				width: 510px;
			}

			.listGridToggle {
				display: flex;
			}
		}

		div.sessionInfo {
			background: @neutral_color;
			padding: 5px 10px;
			margin-bottom: 30px;
			font-size: 13px;

			p {
				margin: 0px;
			}

			p.sessionLeaders {
				span.delete {
					display: inline-block;
					text-align: center;
					vertical-align: center;
					position: relative;
					width: 15px;
					height: 15px;
					font-weight: bold;
					color: @warning_color;
					background: @light_color;
					border-radius: 10px;
					line-height: 15px;
					cursor: pointer;
					margin-left: 2px;
				}

				span.delete:hover {
					color: @light_color;
					background: @warning_color;
				}
			}

			hr {
				border-top: 1px solid @light_color;
				margin: 5px -10px;
			}
		}

		div.blogPost {
			margin-bottom: 50px;

			h2 {
				margin-bottom: 2px;
			}

			p.blogPostInfo {
				margin-top: 0px;
				font-size: 13px;
			}

			p.blogComments {
				font-size: 12px;
			}
		}

		div.feedbackItem {
			border: 2px solid @accent_color;
			padding: 5px 8px;
			border-radius: 12px;
			margin-bottom: 10px;

			p {
				margin: 0px;
			}

			p.rating {
				font-size: 16px;
				font-weight: bold;
				color: @warning_color;
			}

			p.feedback {
				font-size: 16px;

				a {
					font-weight: normal;
					color: @dark_color;
				}

				a:hover {
					color: @main_color;
				}
			}

			p.info {
				font-size: 12px;
			}

			p.feedbackComments {
				margin: 8px 0px;
				font-size: 12px;
			}
		}

		div.expandableHints {
			border: 2px solid @neutral_color; /* Changed by Kate */
			border-radius: 16px;
			padding: 0px 15px;
			margin-bottom: 10px;
			font-size: 12px;

			h2 {
				margin: 5px 0px 0px 0px;
			}

			div.expandableContent {
				display: none;
			}
		}

		img.aboutProfileImage {
			float: right;
			border: 2px solid @neutral_color;
			border-radius: 8px;
			margin: 0px 0px 10px 10px;
		}

		img.sessionImage {
			float: right;
			border: 2px solid @neutral_color;
			border-radius: 8px;
			margin: 0px 0px 10px 10px;
		}

		img.projectImage {
			float: right;
			border: 2px solid @neutral_color;
			border-radius: 8px;
			margin: 0px 0px 10px 10px;
		}

		div.rateSession {
			border: 2px solid @warning_color;
			border-radius: 16px;
			padding: 8px 15px 0px 15px;
			margin-bottom: 10px;
			font-size: 12px;

		}
	}

	.rightSidebar {
		float: right;
		width: 250px;
		font-size: 13px;

		div.sidebarBlock {
			border: 2px solid @neutral_color; /* Changed by Kate */
			border-radius: 16px;
			padding: 0px 15px;
			margin-bottom: 10px;

			h2 {
				font-size: 16px;
				font-weight: bold;

				a {
					font-weight: bold;
					color: @main_color;
				}
			}

			li {
				margin-bottom: 10px;
			}

			p.notes {
				font-size: 10px;
				color: @neutral_color;
			}

			p {
				input {
					width: 196px;
				}
			}

			form {
				p {
					input {
						width: 216px;
					}
				}
			}

			img {
				max-width: 216px;
			}
		}

		div.locationMapBlock {
			border: 0px;
			padding: 0px;
			height: 240px;
			border-radius: 0px;

			p {
				margin: 0px;

				img {
					border-radius: 16px;
					border: 5px solid @neutral_color; /* Changed by Kate */
				}
			}
		}

		div.sidebarUserProfile {
			padding: 3px;
			margin-bottom: 5px;

			p {
				margin: 0px;
				line-height: 25px;
			}

			img {
				vertical-align: middle;
				margin-right: 5px;
				border-radius: 8px;
			}

			span.delete {
				display: inline-block;
				text-align: center;
				vertical-align: center;
				position: relative;
				width: 15px;
				height: 15px;
				font-weight: bold;
				color: @warning_color;
				background: @light_color;
				border-radius: 10px;
				line-height: 15px;
				cursor: pointer;
				margin-left: 2px;
			}

			span.delete:hover {
				color: @light_color;
				background: @warning_color;
			}
		}

		p.sidebarHeader {
			font-size: 22px;
			font-family: 'Montserrat';
			margin: 20px 0px 3px 0px;
			text-align: center;
		}

		p.button {
			text-align: center;
			margin: 0px 0px 10px 0px;

			a {
				background-color: @main_color;
				border-radius: 16px;
				padding: 10px 15px;
				display: block;
				font-size: 20px;
				color: @light_color;
			}
		}

		div.buttonWithoutAnchor {
			text-align: center;
			margin: 0px 0px 10px 0px;
			background-color: @main_color;
			border-radius: 16px;
			padding: 10px 15px;
			display: block;
			font-size: 20px;
			color: @light_color;
			cursor: pointer;
			font-weight: bold;

			p.small {
				font-size: 12px;
				margin: 0px;
			}

			a {
				color: @light_color;
			}
		}

		div.disabledButtonWithoutAnchor {
			text-align: center;
			margin: 0px 0px 10px 0px;
			background-color: @neutral_color;
			border-radius: 16px;
			padding: 10px 15px;
			display: block;
			font-size: 20px;
			color: @light_color;
			cursor: pointer;
			font-weight: bold;

			p.small {
				font-size: 12px;
				margin: 0px;
			}
		}

		div#cancelRSVP {
			background: @warning_color;
		}

		div#cancelRSVPWaitlist, div#cancelFollow {
			background: @main_color; /* Changed by Kate */
		}
	}
}



div.sessionInfoBlock {
	border-radius: 16px;
	margin-bottom: 10px;
	border: 5px solid @neutral_color; /* Changed by Kate */
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;

	p {
		margin: 2px 0px;
	}

	p.sessionDay {
		font-weight: bold;
		font-size: 18px;
	}

	p.sessionTime {
		font-size: 16px;
	}

	p.sessionLocation {
		font-size: 16px;
	}

	p.sessionRSVPs {
		font-size: 11px;
	}
}



div.contentTabs {
	border-bottom: 2px solid @main_color;

	div.tab {
		display: inline-block;
		border: 2px solid @main_color;
		border-bottom-width: 0px;
		color: @main_color;
		border-radius: 8px 8px 0px 0px;
		font-size: 12px;
		font-weight: bold;
		padding: 3px 7px;
		cursor: pointer;
	}

	div.activeTab {
		background: @main_color;
		color: @light_color;
	}
}



div.sessionList {
	h2 {
		font-size: 22px;
		font-family: 'Montserrat';
		color: @main_color;
		margin-bottom: 2px;
	}

	p.note {
		margin-top: 50px;
		font-size: 11px;
		opacity: 0.35;
	}
}

div.sessionListItem {
	border: 2px solid @accent_color;
	border-radius: 16px;
	padding: 3px 10px 5px 10px;
	margin-bottom: 10px;
	overflow-x: hidden;

	div.sessionVoteButton {
		float: left;
		width: 50px;
		background: @warning_color;
		border-radius: 10px;
		color: @light_color;
		cursor: pointer;
		text-align: center;
		margin-right: 5px;
		margin-top: 2px;
		margin-left: -3px;
		font-size: 11px;
		font-weight: bold;
		position: relative;
		vertical-align: middle;
		padding-top: 14px;
		height: 30px;
	}

	div.votedFor {
		background: @main_color;
	}

	div.sessionLeftColumn {
		float: left;
		width: 405px;
	}

	div.sessionVoteLeftColumn {
		float: left;
		width: 350px;
	}

	div.sessionRightColumn {
		float: right;
		width: 220px;
		margin-top: 3px;

		p {
			text-align: right;
		}
	}

	h3 {
		margin: 0px;

		a {
			color: @main_color;
		}

		span.sessionTime {
			color: black;
			font-size: 13px;
		}
	}

	p {
		margin: 0px;
		font-size: 12px;
	}

	p.sessionTime {
		font-weight: bold;
	}

	p.sessionLeaders {
	}

	p.sessionInfo {
		.overlapping {
			color: @warning_color;
			font-weight: bold;
		}
	}

	p.sessionTags {
	}

	p.sessionRSVPs {
	}

	p.sessionVotes {
		color: @warning_color;
		font-size: 15px;
	}

	p.rateSession {
		padding: 10px 0px;
	}
}

div.sessionListItemNew {
	border: 2px solid @accent_color; /* Changed by Kate */
}

div.sessionListItemRsvp {
	border: 2px solid @main_color; /* Changed by Kate */
}

div.sessionListItemWaitlist {
	border: 2px solid @accent_color; /* Changed by Kate */
}

div.sessionListItemDraft {
	background-color: @neutral_color; /* Changed by Daniel */
	border: 2px solid transparent;

	h3 a {
		font-style: italic;
		color: black;
	}
}


div.projectListItem {
	border: 2px solid @accent_color;
	border-radius: 12px;
	padding: 3px 4px 5px 9px;
	margin-bottom: 5px;

	h3 {
		margin: 0px;

		a {
			color: @main_color;
		}
	}

	p {
		margin: 0px;
		font-size: 11px;
	}
}

div.userListItem {
	border: 2px solid @accent_color;
	border-radius: 12px;
	padding: 5px 4px 3px 4px;
	margin-bottom: 5px;
	background-color: @light_color;
	z-index: -100;

	p.profileImage {
		margin: 0px;
		float: left;
	}

	p.profileInfo {
		margin: 0px 0px 0px 5px;
		line-height: 100%;
		position: relative;
		top: 2px;

		span.shortAbout {
			color: @neutral_color;
			font-size: 11px;
		}
	}

	img {
		border-radius: 8px;
		position: relative;
		top: -1px;
		vertical-align: middle;
		margin-right: 5px;
	}

	a.button {
		font-size: 11px;
		padding: 2px 5px;
		display: inline-block;
		margin: 3px 0px;
	}
}

div.comments {

	div.addCommentWrapper {
		min-height: 40px;
	}

	a.button {
		background: @main_color;
		border-radius: 8px;

		color: @light_color;
		padding: 3px 5px;
		font-size: 12px;
		cursor: pointer;
	}

	a.cancelButton {
		background: @neutral_color;
		border-radius: 8px;
		color: @light_color;
		padding: 3px 5px;
		font-size: 12px;
		cursor: pointer;
	}

	p.addComment {
	}

	div.commentForm {
		display: none;

		p {
			margin: 0px;
		}

		textarea {
			width: 630px;
			font-size: 14px;
			height: 100px;
		}
	}

	div.commentListItem {
		margin-top: 30px;
		margin-bottom: 30px;

		a.atReply {
			font-weight: normal;
			font-size: 12px;
			text-transform: uppercase;
		}

		p {
			margin: 0px;
			font-size: 14px;
		}

		p.commentInfo {
			font-size: 12px;
			margin-bottom: 2px;
			color: @neutral_color; /* changed by jiwon */
		}

		div.commentForm {
			margin-top: 10px;
		}

		p.addComment {
			margin-top: 5px;
		}
	}
}

a#showHidePreviousSessions,
a#showHideDraftSessions {
	display: inline-block;
	text-align: center;
	font-size: 11px;
	color: @main_color;
	background: @neutral_color;
}

table.calendar {
    border-spacing: 1px;
    border-collapse: separate;
    font-size: 12px;

	td {
		width: 92px;
		padding: 0px;
		border-radius: 4px;
		border: 1px solid @dark_color; /* Changed by Kate */
		vertical-align: top;
		height: 60px;

		p.date {
			margin: 0px;
			background: @dark_color; /* Changed by Kate */
			color: @light_color;
			font-size: 10px;
			text-transform: uppercase;
			text-align: center;
			padding: 3px 0px;
		}

		div.sessionGridItem {
			position: relative;
			font-size: 10px;
			max-height: 64px;
			margin: 2px;
			overflow: hidden;

			div.sessionGridItemInner {
				border-radius: 4px;
				border: 2px solid @accent_color; /* Changed by jiwon */
				padding: 2px 4px;
				background: @light_color;
				max-height: 56px;
				max-width: 76px;
				overflow-x: hidden;

				.overlapping {
					color: @warning_color;
					font-weight: bold;
				}

				a.sessionGridLocation{
					color: @neutral_color; /* Changed by Kate */
					font-weight: normal;
				}

				.session-title {
					display: block;
					margin-top: 0.25rem;
				}
			}
		}

		div.sessionGridItemNew {
			div.sessionGridItemInner {
				border: @accent_color /* changed by jiwon */
			}
		}

		div.sessionGridItemDraft { /* changed by Daniel */
			div.sessionGridItemInner {
				background-color: @neutral_color;
				border-color: transparent;
			}
		}

		div.sessionGridItemRsvp {
			div.sessionGridItemInner {
				border: 2px solid @main_color; /* Changed by Kate */
			}
		}

		div.sessionGridItemWaitlist {
			div.sessionGridItemInner {
				border: 2px solid @accent_color; /* Changed by Kate */
			}
		}

		div.sessionGridItem:hover {
			z-index: 100;
			overflow: visible;

			div.sessionGridItemInner:hover {
				max-height: 1000px;
			}
		}
	}

	td.grayDay {
		border: 1px solid @light_color;

		p.date {
			background: @light_color;
		}
	}

	tr.dayOfWeek {
		td {
			border: 1px solid @main_color; /* changed by jiwon */
			background: transparent; /* changed by jiwon */
			color: @main_color; /* Changed by Kate */
			text-align: center;
			padding: 3px 0px;
			height: auto;
		}

		td.currentDay {
			background: @accent_color; /* Changed by Kate */
			color: @light_color; /* Changed by Kate */
		}
	}
}

div.noneFound {
	display: none;
}

div.deletedObject {
	color: @light_color;
	background: @warning_color;
	border-radius: 4px;
	padding: 3px 5px;
	margin-bottom: 10px;

	p {
		margin: 0px;
	}
}

form {

	label, .label {
		font-weight: bold;
		margin-bottom: 3px;

		.required {
			margin-left: 0.25rem;
			color: @warning_color;
			font-size: small;
			font-style: italic;

			&::before { content: "(" }
			&::after  { content: ")" }
		}
	}

	p.formElement {
		margin: 1px 0px;

		input {
			width: 630px;
		}

		input.datePicker {
			width: 300px;
			margin-right: 10px;
			display: inline-block;
		}

		input.timePicker {
			width: 300px;
			display: inline-block;
		}

		textarea {
			margin: 0px;
			width: 630px;
			height: 200px;
			font-size: 16px;
		}

		select {

		}
	}

	p.formElementDateTimeDate {
		display: inline-block;
	}

	p.formElementDateTimeTime {
		display: inline-block;
	}

	p.note {
		font-size: 12px;
		/* color: @neutral_color; Yen: to fix contrast*/
		margin-top: 1px;
	}

	p.submit {

		a.cancel {
			margin-left: 20px;
		}
		small {
			font-size: 10px;
			color: @neutral_color;
		}
	}
}



div.noPermission {
	margin-top: 100px;
	margin-bottom: 250px;
	text-align: center;

	h1 {
		color: @warning_color;
		font-size: 150px;
		margin: 0px;
	}

	p {
		margin: -30px 0px 0px 0px;
	}
}

div.notFound {
	margin-top: 100px;
	margin-bottom: 250px;
	text-align: center;

	h1 {
		color: @warning_color;
		font-size: 150px;
		margin: 0px;
	}

	p {
		margin: -30px 0px 0px 0px;
	}
}

p.userDidDoThings {
	font-size: 10px;
}

span.userDidPay, span.userDidDoThing {
	background: @main_color;
	color: @light_color;
	border-radius: 8px;
	padding: 2px 5px;
	font-size: 10px;
	font-weight: bold;
}

span.userDidNotPay, span.userDidNotDoThing {
	background: @warning_color;
	color: @light_color;
	border-radius: 8px;
	padding: 2px 5px;
	font-size: 10px;
	font-weight: bold;
}



span.sessionTag {
	color: @light_color;
	border-radius: 8px;
	padding: 3px 4px;
	font-size: 10px;
	font-weight: bold;
	position: relative;
	top: -2px;
	font-family: 'Montserrat', 'sans-serif';
}

span.sessionNew {
	background: @accent_color;
	color: @dark_color;
}

span.sessionRSVPed {
	background: @main_color; /* Changed by Kate */
}

span.sessionWaitlisted {
	background: @accent_color; /* Changed by Kate */
}



span.userTag {
	color: @light_color;
	border-radius: 8px;
	padding: 3px 4px;
	font-size: 10px;
	font-weight: bold;
	position: relative;
	top: -2px;
	font-family: 'Montserrat', 'sans-serif';
	white-space: nowrap;
}

span.userCamper {
	background: @accent_color; /* Changed by Kate */
}

span.userLeader {
	background: @accent_color; /* Changed by Kate */
}

span.userCounselor {
	background: @main_color; /* Changed by Kate */
}

span.userStaff {
	background: @dark_color; /* Changed by Kate */
}

span.userInstigator {
	background: @warning_color; /* Changed by Kate */
}



hr.footer {
	margin-top: 100px;
	border-top: 2px solid @neutral_color;
}

div.footer {
	p {
		text-align: center;
		/* color: #999999; YEN: To fixed contrast errors*/
	}
}

div.footerFeedback {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 100px;

	div.footerFeedbackInner {
		display: none;
		text-align: left;
		background: @neutral_color;
		border-radius: 12px;
		max-width: 700px;
		padding: 20px 40px 20px 40px;
		margin: 0px auto;

		textarea {
			width: 680px;
			height: 100px;
		}

		p.note {
			font-size: 12px;
		}
	}
}

div.stats {
	background-color: @neutral_color;
	max-width: 924px;
	margin: 0px auto;
	padding: 20px 50px;
}



ul.applications {
	li {
		margin-bottom: 20px;

		small {
			color: #888888;
			font-size: 10px;
			padding-left: 20px;
		}
	}
    
    span.instigator {
        font-size: 10px;
        font-weight: bold;
        color: @accent_color; /* Changed by Kate */
    }
}

table.applications {
  td { padding: 0.5rem; vertical-align: top; }
}

span.applicationStatusButton {
	background: black; /* Changed by Kate */
	color: rgba(255, 255, 255, 0.75);
	border-radius: 12px;
	font-size: 13px;
	font-weight: bold;
	padding: 5px 8px;
	cursor: pointer;
	display: block;
	text-align: center;
	margin-bottom: 10px;
}

span.applicationStatusButtonActive {
	background: @accent_color; /* Changed by Kate */
	color: @main_color; /* Changed by Daniel */
}

span.paymentModeButton {
	background: @warning_color;
	color: rgba(255, 255, 255, 0.75);
	border-radius: 12px;
	font-size: 13px;
	font-weight: bold;
	padding: 5px 8px;
	cursor: pointer;
	display: block;
	text-align: center;
	margin-bottom: 10px;
}

span.paymentModeButtonActive {
	background: @accent_color; /* Changed by Kate */
	color: @main_color; /* Changed by Daniel */
}

.responsive-flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 2rem;

	>main, .leftContent {
		float: none;
		width: auto;
		flex: 2;
	}

	>aside, .rightSidebar {
		float: none;
		width: auto;
		flex: 1;
	}
}

.invisible {
	visibility: hidden;
}

.helper-text {
	font-style: italic;
}

.is-danger .error_message {
	color: @warning_color;
}

.admin-tools {
	background-color: @neutral_color;
	border: 3px solid @warning_color;
	padding: 1em;
}

.admin-tools .callout-info {
	background-color: @accent_color;
	padding: 1em;
}

textarea {
	min-height: calc(1.5em + .75rem + 2px);
	display: block;
	width: 100%;
	background-clip: padding-box;
}

.blogPost.disabled {
	background-color: @neutral_color;
}

#quill-container-preview {
	background-color: @neutral_color;
	padding: 0.25em 1em;
}

.ql-container {  
	min-height: 5rem;
}

#formItem___expect_to_learn .ql-container {
height: 15rem;
}

#formItem___skills .ql-container {
height: 15rem;
}

#show-hidden {
	cursor: pointer;
}
.hidden-data {
	visibility: hidden;
}
.hidden-data:before {
	content: "Hidden";
	visibility: visible;
	font-style: italic;
}