@import "partials/inputOverrides";
@import "partials/toast";

@extra-large: ~"only screen and (min-width: 1200px)";
@large: ~"only screen and (min-width: 992px) and (max-width:1200px)";
@medium: ~"only screen and (min-width: 768px) and (max-width:991px)";
@small: ~"only screen and (min-width: 577px) and (max-width:767px)";
@mobile-only:~"only screen and (max-width:576px)";

// Colors:
@gray: #c0c0c0;
@black: #000;

@fixed-accent-color:#FF1116;
@form-error-color:#dc3545;
@form-success-color:#28a745;
@community-role-color: @gray; // ex: Moderator/Member

//utils
.required {
	color: red;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strikethrough{
  text-decoration: line-through;
}
.justify-right { justify-content: flex-end };

.padding-x-0 {
  padding-left: 0;
  padding-right: 0;
}

.fa-clock() {
	.fa-clock {
		margin-right: 4px;
	}
}

.form-text-italic {
	font-style: italic;font-size: 12px
}

.new-stamp() {
	.new-stamp {
		align-self: flex-start;
		background-color: @communityFontColor;
		border-radius: 4px;
		color: #fff;
		height: 18px;
		line-height: 1;
		margin-left: auto;
		padding: 4px 3px 4px 12px;
		position: relative;
		text-transform: uppercase;

		&:before {
			content: '';
			background-color: #fff;
			border-radius: 9999px;
			display: inline-block;
			height: 6px;
			left: 3px;
			margin-right: 3px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 6px;
		}
	}
}

.community-user-info() {
	.community-user-info {
		a:not(.nav-link):not(.btn):not(.dropdown-item) {
			color: #000 !important;
			font-weight: 700;
		}
	}
}

.community-user-role() {
	.community-user-role {
		color: @community-role-color;
		margin-left: 10px;
		text-transform: uppercase;
	}
}

.accessibility-theme {
	p.sub-header {
		color: @black !important;
	}

	.user-role {
		color: @black !important;
	}
	
	.comment-user-role {
		color: @black !important;
	}
	
	.community-user-role {
		color: @black !important;
	}
	
	.subtext {
		color: @black !important;
	}
	
	span.label {
		color: @black !important;
	}

	.award-value {
		color: @black !important;
	}

	.points-cost {
		color: @black !important;
	}

	.card-text {
		color: @black !important;
	}

	.post-card-text {
		color: @black !important;
	}

	.post-sort-select {
		color: @black !important;
	}

	.details {
		color: @black !important;
	}

	.switch-button-label {
		color: @black !important;
	}

	.form-check-label {
		color: @black !important;
	}

	.card-detail-container {
		color: @black !important;
	}

	.comment-timestamp {
		color: @black !important;
	}

	.user-content-carousel-writer {
		color: @black !important;
	}

	.md-form label {
		color: @black !important;
	}
}

// Container ie: Search results for Member posts and comments.
.card-text-container() {
	border-radius: unset;
	margin-top: 30px;

	.card-header {
		border-bottom: none;
		font-weight: 400;
		font-size: 13px;

		.activity-title {
			color: #000 !important;
			font-weight: 700;
			text-transform: capitalize;
		}
	}

	.card-body {
		display: flex;

		.thumbnail-container {
			flex-basis: 250px;
			margin-right: 20px;
		}
	}

	.avatar-container {
		display: flex;
		flex-basis: 150px;
		flex-shrink: 0;
		justify-content: center;

		.inline-avatar {
			height: 85px;

			@media @small {
				height: 50px;
				width: 50px;
			}

			@media @mobile-only {
				height: 50px;
				width: 50px;
			}
		}

		img {
			height: 85px;
			width: 85px;

			@media @small {
				height: 50px;
				width: 50px;
			}

			@media @mobile-only {
				height: 50px;
				width: 50px;
			}
		}

		@media @small {
			flex-basis: 50px;
			padding-right: 20px;
		}

		@media @mobile-only {
			flex-basis: 50px;
			padding-right: 20px;
		}
	}

	.fa-clock();

	.details-container {
		flex-grow: 1;
	}

	.summary-copy {
		margin-top: 30px;
	}

	.view-link:not(.nav-link):not(.btn):not(.dropdown-item)  {
		display: inline-block;
		font-weight: 400;
		text-transform: uppercase;
	}
}

.inline-avatar() {
	.inline-avatar {
		display: inline-block;
		border-radius: 9999px;
		box-shadow: -4px 8px 9px -2px rgba(0,0,0,.16);

		img {
			width: 30px;
			height: 30px;
            margin-right: 0px;
		}
	}
}

/**********************************************
 * Material Design Bootstrap Overrides
 **********************************************/
// Inputs
.needs-validation .md-form label {
	left: 0;
}
// Select Drop Downs
ul.dropdown-content{
  max-height: 180px !important;
}
.fc-mdb-select-wrapper {
	display: flex;
	margin-top: 10px;

	.filter-title {
		margin: 15px 10px 0 0;
	}

	.select-wrapper {
		background-color: #fff;
		border-radius: 3px;
		box-shadow: 1px 4px 10px -5px rgba(31, 31, 31, 0.5);
		padding: 0 15px;
		width: 200px;
		display: inline-block;
		margin-bottom: 0;
		margin-top: 7px;
		vertical-align: top;

		span.caret {
			right: 6px;
		}

		input.select-dropdown {
			.ellipsis();
			border: none;
			margin-bottom: 0;
		}

		.select-dropdown {
			font-size: 14px;
		}

		.dropdown-content {
			li {
				a,
				span:hover,
				&.active {
					background-color: @communityButtonBackgroundColor;
				}

				>a,
				>span {
					color: #000;
				}
			}
		}
	}

	@media @mobile-only {
		justify-content: flex-start;
	}
}

// Modals
.fc-mdb-modal {
	// color: black; // @communityFontColor;

	.fc-mdb-modal-header {
		align-items: center;
		background-color: @communityButtonBackgroundColor;
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;

		h2 {
			margin-bottom: 0;
		}
	}
	.fc-mdb-modal-footer {
		flex-wrap: wrap;
		justify-content: space-between;

		> a {
			flex-grow: 1;

			@media @medium {
				flex-basis: 47%;
			}

			@media @small {
				flex-basis: 47%;
			}

			@media @mobile-only {
				flex-basis: 100%;
			}
		}
	}

	.fc-mdb-btn-primary {
		background-color: @communityButtonBackgroundColor !important;
		color: @communityFontColor !important;
	}

	.fc-mdb-close {
		color: @communityFontColor;
		float: unset;
	}
}

// Verify Email Modal
#verify-email-modal {
	p {
		color: #495057;
	}
	.modal-title {
		color: @communityColor;
	}

	.verify-email-modal-cta-btn {
		background-color: @communityButtonBackgroundColor;
		color: @communityFontColor;
	}

	.contact-support-btn {
		text-decoration: underline;
	}
}

// (Search) Navbar/Tabs
#mdb-navbar-override {
	background-color: @communityButtonBackgroundColor !important;
	border-radius: 5px;
	cursor: pointer;

	@media @medium {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	@media @small {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	@media @mobile-only {
		border-radius: unset;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.mdb-navbar-nav-override {
		flex-basis: 100%;
		flex-direction: row;
	}

	.nav-item {
		color: @communityFontColor !important;

		.nav-link {
			color: @communityFontColor !important;
		}

		&.active {
			.nav-link {
				border: 3px solid @communityFontColor;
			}
		}
	}
	#current-page {
		color: @communityFontColor;
		display: none;
		margin: 0;

		@media @medium {
			display: block;
		}

		@media @small {
			display: block;
		}

		@media @mobile-only {
			display: block;
		}
	}

	.fc-mdb-navbar-collapse {
		justify-content: center;
		min-height: 40px;

		.navbar-nav {
			justify-content: space-evenly;
			width: 100%;
		}
	}

	.fc-mdb-nav-link:not(.btn):not(.dropdown-item) {
		color: @communityFontColor !important;
		padding-left: 15px;
		padding-right: 15px;
	}

	.fc-mdb-navbar-toggler {
		box-shadow: none;
	}
}
// Carousel
.carousel {
	.carousel-control-next-icon,
	.carousel-control-prev-icon {
		width: 36px;
		height: 36px;
	}
}
// Toastr
.toast-top-center,
.toast-top-full-width {
	top: 0;
	right: 0;
	width: 100%;
}

// Tables
table {
	&.dataTable {
		thead {
			.sorting:before,
			.sorting_asc:before,
			.sorting_desc:before,
			.sorting_asc_disabled:before,
			.sorting_desc_disabled:before,
			.sorting:after,
			.sorting_asc:after,
			.sorting_desc:after,
			.sorting_asc_disabled:after,
			.sorting_desc_disabled:after {
				font-family: 'Font Awesome 5 Pro';
			}
		}
	}
}
/* *********************************************
 * App
 **********************************************/
body{
	background-position: top;

	&.modal-open{
		overflow: hidden !important;
	}

	@media @mobile-only{
		background: #eee none !important;
	}
}
.main-container{
	overflow: hidden;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
}
i, cite, em, var, address, dfn {
    font-style: italic;
}
strong, b {
    font-weight: bold;
}
button{
	border-radius: 2px;
	text-transform: uppercase;
	font-size: 14px;
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
	border:none;
	background-color: transparent;
	text-shadow:none;
	&.close{
		box-shadow: none !important;
	}
	&.no-shadow{
		box-shadow: none;
	}
}
.accent-button{
	background-color:@communityButtonBackgroundColor;
	color: @communityFontColor;

	&.disabled {
		opacity: 0.5;
	}
}
.card.featured{
	display:none;
}
nav{
	background-color:#fff;
}
a:not(.nav-link):not(.btn):not(.dropdown-item){
	color: @communityColor !important;
	&.disabled{
		pointer-events: none;
	}
}
#navbar-large{
	height: 80px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #dadce0;
	box-shadow: none;
	&.top-nav-collapse{
		padding-top: 5px;
		padding-bottom: 5px;
		height: 70px;
	}
}
.navbar-brand{
	padding:0px;
	height:60px;
	max-width: 60%;
	@media @small{
		height:40px;
	}
	@media @mobile-only{
		height:40px;
	}
	img{
		height:100%;
		object-fit: contain;
	}
	&.fade-out-brand {
	  visibility: hidden;
	  opacity: 0;
	  transition: visibility 0s linear 300ms, opacity 300ms;
	}
	&.fade-in-brand {
	  visibility: visible;
	  opacity: 1;
	  transition: visibility 0s linear 0s, opacity 300ms;
	}
}
.header-second-row {
  width: 100%;
  background-color: #fff;
  height: 50px;
  position: absolute;
  top: 80px;

  #second-navbar-buttons {
    height: 100%;
    margin: 0px;
    padding: 5px 30px;
    font-size: 16px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12), inset 0 -1px 0 0 #dadce0;

    li {
      height: 38px;
      margin-right: 30px;

      .dropdown {
        button {
          color: #5f6368 !important;
          height: 100%;
          box-shadow: none;
          text-transform: inherit;
          font-size: 14px;
          padding: 10px;

          &:hover {
            background-color: @communityButtonBackgroundColor !important;
            color: @communityFontColor !important;
            text-shadow: none !important;
          }
        }

        &.show {
          button {
            background-color: @communityButtonBackgroundColor !important;
            color: @communityFontColor !important;
            text-shadow: none !important;
          }
        }
      }

      a {
        padding: 10px;
        font-size: 14px;
        color: #5f6368 !important;
        font-weight: 400;
        display: block;

        &:active, &:hover {
          background-color: @communityButtonBackgroundColor !important;
          color: @communityFontColor !important;
        }
      }
    }
  }
}
#main-content{
	min-width: 360px;
	margin-top: 130px;
	padding:0 0 40px 0;

	@media @medium{
		margin-top: 83px;
	}
	@media @small{
		margin-top: 63px;
	}
	@media @mobile-only{
		margin-top: 56px;
	}

	.container{
		@media @mobile-only{
			padding: 0;
		}
	}
}

#fuel-cycle-header{
	.nav-link{
		color:#5f6368 !important;
		height:40px;
	}
	nav .container{
		max-width:100%;
		width:100%;
		height: 100%;
	}
}
.navbar .dropdown-menu a{
	color: #5f6368 !important;
}

.navbar-collapse.collapse{
    transition: height 0.5s ;
}

#navbar-mobile{
    height: 100vh;
	.md-form{
		display:inherit;
	}
}
.navbar-dropdown{

	button{
		position: relative;
    	bottom: 7px;
		}
	.dropdown-toggle{
		padding:.5rem;
		box-shadow:none;
		background-color:#fff;
		color:#000 !important;
		margin:0px;
		text-decoration:none;
		font-weight: 300;
		text-transform:none;
		font-size:1rem;
	}
	&.show {
		#user-dropdown{
			background-color:@communityButtonBackgroundColor;
			color:@communityFontColor !important;
		}
	}
}
#navbar-toggle-button{
	color: #5f6368 !important;
}
#navbarToggler,#navbar-mobile {
	.nav-item {
		a {
			color: #5f6368 !important;
			&:active,&:hover{
				background-color:@communityButtonBackgroundColor !important;
				color:@communityFontColor !important;
			}
		}
	}
}
.dropdown-item,.navbar .btn-group .dropdown-menu a{
	color:#5f6368;
	&:active,&:hover{
		background-color:@communityButtonBackgroundColor !important;
		color:@communityFontColor !important;
	}
}

img.avatar{
	height:100%;
}

.nav-icon-container{
	position:relative;
	top:5px;
	margin:0px 10px 0px 0px;
}
.navbar-toggler{
	padding:0px;
}

#nav-icon2{
	width: 30px;
	height: 30px;
	position: relative;
	padding:0px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	box-shadow: none;

	span {
		display: block;
		position: absolute;
		height: 3px;
		width: 50%;
		background: #5f6368;
		opacity: 1;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}
	span:nth-child(even) {
		left: 50%;
		border-radius: 0 9px 9px 0;
	}
	span:nth-child(odd) {
		left:0px;
		border-radius: 9px 0 0 9px;
	}
	span:nth-child(1), span:nth-child(2) {
		top: 0px;
	}
	span:nth-child(3), span:nth-child(4) {
		top: 10px;
	}
	span:nth-child(5), span:nth-child(6) {
		top: 20px;
	}
	&.open span:nth-child(1),&.open span:nth-child(6) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	&.open span:nth-child(2),&.open span:nth-child(5) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	&.open span:nth-child(1) {
		left: 3px;
		top: 7px;
	}
	&.open span:nth-child(2) {
		left: calc(50% - 3px);
		top: 7px;
	}
	&.open span:nth-child(3) {
		left: -50%;
		opacity: 0;
	}
	&.open span:nth-child(4) {
		left: 100%;
		opacity: 0;
	}
	&.open span:nth-child(5) {
		left: 3px;
		top: 16px;
	}
	&.open span:nth-child(6) {
		left: calc(50% - 3px);
		top: 16px;
	}
}

#search-box-submit{
	background-color: transparent;
    border: none;
    box-shadow: none;
	&:focus{
		border:none !important;
		outline:0 !important;
		outline-style: none;
		box-shadow:none;
	}
}

// ie: Search results for Attachments.
.search-attachment-card {
	.media-file-title {
		font-weight: 500;

		@media @medium {
			margin-top: 20px;
		}
		@media @small {
			margin-top: 20px;
		}
		@media @mobile-only {
			margin-top: 20px;
		}
	}

	.summary-copy {
		color: @gray;
	}
}

// ie: Search results for People/Members
.members {
	display: flex;
	flex-wrap: wrap;
}

.card-member-container {
	align-items: center;
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16);
	display: flex;
	flex-basis: 31%;
	margin-top: 30px;
	padding: 20px;

	@media @large {
		flex-basis: 48.5%;
	}

	@media @medium {
		flex-basis: 100%;
	}

	@media @small {
		flex-basis: 100%;
	}

	@media @mobile-only {
		flex-basis: 100%;
	}

	.avatar-container {
		margin-right: 20px;

		.avatar {
			width: 125px;
			height: 125px;
			border-radius: 9999px;
			background-position:50% 50%;
			background-repeat:no-repeat;
			background-size: cover;
		}
	}

	.details-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-around;

		a:not(.nav-link):not(.btn):not(.dropdown-item) {
			color: #000 !important;
			font-weight: 500;
		}
	}

	.community-user-role,
	.community-user-joined {
		font-size: 12px;
	}

	.community-user-role {
		color: @community-role-color;
		text-transform: uppercase;
	}
}

/* Metrics (# of likes, comments, attachments)
 * memberMetrics.jsp
 */
.community-user-metrics {
	display: flex;
	align-items: center;

	.metric {
		margin-right: 10px;
		display: flex;
		align-items: center;

		@media @large {
			margin-right: 15px;
		}

		@media @medium {
			margin-right: 15px;
		}

		@media @small {
			margin-right: 15px;
		}

		@media @mobile-only {
			margin-right: 15px;
		}
	}

	.count {
		font-size: 13px;
		margin-left: 5px;
	}
}

/*
 * Support Page
 */
#support-container {
	&.card-detail-container {
		@media @small {
			padding: 30px 50px !important;
		}

		@media @mobile-only {
			padding: 30px 50px !important;
		}
	}

	p {
		margin-bottom: 0;
	}

	.full-width-banner {
		padding-bottom: 0;
	}

	.support-intro-message {
		border-bottom: 1px solid rgba(0, 0, 0, 0.16);
		padding-bottom: 30px;
	}

	label {
		font-size: 19px;
		font-weight: 500;
		margin-top: 20px;
	}

	.select-wrapper {
		display: block;
	}

	.user-info-container {
		@media @small {
			margin-top: 10px;
			order: 2;
		}

		@media @mobile-only {
			margin-top: 10px;
			order: 2;
		}
	}

	.supportMessage {
		border-bottom: 1px solid rgba(0, 0, 0, 0.16);
		padding: 30px 0;
	}

	.user {
		font-weight: 600;
	}

	.message {
		margin-top: 25px;
	}

	.topic,
	.btn {
		color: @communityFontColor !important;
		background-color: @communityButtonBackgroundColor !important;
	}

	.topic-container {
		@media @small {
			order: 1;
			text-align: left !important;
		}

		@media @mobile-only {
			order: 1;
			text-align: left !important;
		}
	}

	.topic {
		padding: 0 10px;
		border-radius: 5px;
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
		font-weight: 500;
		font-size: 14px;

		@media @small {
			display: inline-block;
		}

		@media @mobile-only {
			display: inline-block;
		}
	}

	// Buttons:
	.form-buttons {
		border-top: unset;
		display: flex;

		@media @small {
			flex-direction: column;
		}

		@media @mobile-only {
			flex-direction: column;
		}
	}

	#default-buttons-box {
		padding: 30px 0 0 0;
	}

	#buttonReplyToIssue,
	#buttonStartNewIssue {
		margin: 10px 0 0 0;
	}

	.new-topic-btn,
	#replyAttachFilesButton,
	#cancelReplyButton,
	#cancelAttachFilesButton {
		color: #000 !important;
		background-color: @gray !important;
	}

	.postReplyButton-col,
	.cancelReplyButton-col {
		@media @small {
			order: 2;
		}

		@media @mobile-only {
			order: 2;
		}
	}

	.postReplyButton-col {
		@media @small {
			margin-top: 30px;
		}

		@media @mobile-only {
			margin-top: 30px;
		}
	}

	#postReplyButton {
	}

	#cancelReplyButton {
		margin-left: 10px;

		@media @small {
			margin-left: 0;
			margin-top: 15px;
		}

		@media @mobile-only {
			margin-left: 0;
			margin-top: 15px;
		}
	}

	.replyAttachFilesButton-col {
		margin-left: auto;

		@media @small {
			margin-left: 0;
			order: 1;
		}

		@media @mobile-only {
			margin-left: 0;
			order: 1;
		}
	}

	#replyAttachFilesButton {
		margin: 0;
		padding: 10px 25px;
	}

	#cancelAttachFilesButton {
		margin-left: 0;
	}
	// END Buttons
}

/*
 * Search Page List
 */
#search-results-section {
	.card-text-container {
		.card-text-container();
	}

	.card-body {
		padding: 15px;
	}

	.community-user-info();

	.community-user-role();

	.inline-avatar();

	.avatar-container .inline-avatar {
		width: 85px;
	}

	.members {
		.community-user-role {
			margin-left: 0;
		}
	}
}

#search-submit-button{
	background-color:@communityButtonBackgroundColor;
	color: @communityFontColor !important;
}

.notification-alert-indicator{
	position:absolute;
	color:@fixed-accent-color;
	font-size: 8px;
	&#user-dropdown-notification-alert-indicator{
		top: 5px;
		left: 25px;
	}
	&#announcement-notification-alert-indicator{
		top: 0px;
		left: 18px;
	}
}

.notification-badge{
	margin-left: 30px;
}

.view-link {
	display: inline-block;
	font-weight: 400;
	text-transform: uppercase;
}

.pagination {
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 35px auto;
	height: 115px;

	&:after {
		content: "";
		display: table;
		clear: both;
	}

	li {
		list-style: none !important;
		padding: 0px !important;
		margin: 0 5px !important;
        background-color: #fff;
        width: 60px;
        height: 30px;
        text-align: center;
	}
}

/*
 * Member Profile
 */
.section-member-profile {
	padding: 25px 0;

	.container {
		background: #fff;
	}

	.member-profile {
		margin: 0;
		display: flex;
		justify-content: space-between;
	}

	.member-profile__dash {
		width: 35%;
		min-height: 445px;
		padding: 55px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.name {
			margin: 20px 0 0 0;
		}

		.subtext {
			font-size: 0.875rem;
			color: #bebebe;
			font-style: italic;
			margin: 0;
		}

		.links {
			margin-top: 30px;
		}
		@media @medium {
			min-height: auto;
		}

		@media @small {
			min-height: auto;
		}

		@media @mobile-only {
			min-height: auto;
		}
	}

	.member-profile__details {
		border-left: 1px solid #eee;
		width: 65%;
		padding: 55px;
		display: flex;
		flex-direction: row;
		height: 100%;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;

		> div {
			width: 100%;
		}

		.detail-item {
			flex: 0 0 50%;

			.label {
				font-size: 0.875rem;
				color: #bebebe;
			}

			p {
				padding: 10px;
			}

		}

		.tabs {
			float: none;
			list-style: none;
			position: relative;
			text-align: left;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;

			li {
				display: block;
				width: 50%;
			}

			input[type="radio"] {
				position: absolute;
				top: -9999px;
				left: -9999px;
			}

			label {
				font-weight: normal;
				line-height: 2.5;
				color: #bebebe;
				border-bottom: 2px solid #eee;
				flex: 1;
				height: auto;
				padding-left: 0;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				width: 100%;
				display: inline-block;
				text-align: center;
				transition: 0.3s;
				cursor: pointer;

				&:before,
				&:after {
					content: none; // Remove MDB radio btn styling
				}

				&:hover {
					border-bottom-color: #bebebe;
				}
			}

			[id^="tab"]:checked {
				+ label,
				+ label:hover {
					top: 0;
					font-weight: 700;
					color: @communityColor;
					border-bottom-color: @communityColor;
				}

				~ [id^="tab-content"] {
					display: block;
				}
			}

			.tab-content {
				z-index: 2;
				display: none;
				overflow: hidden;
				width: 100%;
				font-size: 17px;
				line-height: 25px;
				padding: 25px 25px 0;
				position: absolute;
				left: 0;

				&.show {
					display: block;
				}
			}

		}
	}

	@media (max-width: 979px) {
		.member-profile {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
		}

		.member-profile__dash,
		.member-profile__details {
			width: 100%;
			padding: 15px;
		}

		.member-profile__details {
			border-left: none;
		}
	}
}

/*
 * Footer
 */
footer{
	box-shadow:0 0 5px 0 rgba(0,0,0,.16), 0 0 10px 0 rgba(0,0,0,.12);
}
.data-for-footer-overlay{
	display:none;
}
#search-modal .modal-footer{
	border:none;
}
.footer-first-bar{
	background-color:#ffffff;
	font-weight:400;
	.container{
		max-width:100%;
		width:100%;
		padding:0px 30px;
	}
}
.footer-second-bar{
	background-color:#fff;
	font-weight:400;
	.container{
		max-width:100%;
	}
}
.footer-logo-links-container{
	padding:15px 5px 0px 5px;
	@media @small {
		text-align: center;
	}
	@media @mobile-only {
		text-align: center;
	}
	.footer-logo{
		overflow:hidden;
		@media @small{
			padding-bottom: 15px;
		}
		img{
			height:40px;
			width:auto;
		}
	}
	.footer-links{
		word-break: break-word;
		font-size: 12px;
		a{
			color:#000 !important;
			font-size:12px;
		}
	}
	.footer-links-with-logo{
		font-size: 12px;
		display: block;
		text-align: right;
		@media @small{
			text-align: center;
		}
		@media @mobile-only{
			text-align: center;
		}
	}
}
.footer-bottom{
	font-size: 12px;
	margin: 0px;
	padding: 0px;

	.footer-text-container{
		padding:20px 15px 15px 15px;
		text-align: left;
		@media @small{
			width: 100%;
		}
		@media @mobile-only{
			width: 100%;
		}
	}
	.footer-powered-by-container{
		color:#6d6d6d;
		padding:15px;
		text-align: right;
		img{
			height:17px;
			position:relative;
			bottom:2px;
		}
		@media @small{
			text-align: center;
			width: 100%;
			padding-top: 0px;
		}
		@media @mobile-only{
			text-align: center;
			width: 100%;
			padding-top: 0px;
		}
	}
}

// todo: change colors to community colors?
#redirected-message-modal {
	.modal-content {
		border-radius: 20px;
		font-size: 20px;
		font-weight: 400;
		min-height: 300px;
		padding: 25px;
	}

	.info-icon {
		color: purple;
		//text-align: center;
	}

	.messages {
		color: @gray;
		margin-top: 27px;

		.message {
			margin-bottom: 0;

			&:not(:first-child) {
				margin-top: 2px;
			}
		}
	}

	.cta-btns-container {
		border-top: none;
	}

	.cta-btn {
		background-color: purple;
		border-radius: 9999px;
		box-shadow: none;
		color: #fff;
		margin: 0;
		min-height: 53px;
		min-width: 150px;
		padding: 10px 20px;
	}
}

#internal-footer-page-modal{
	.modal-header{
		background-color: @communityButtonBackgroundColor;
		color: @communityFontColor;
		border-radius: 0px;
		button{
			color: @communityFontColor;
			text-shadow: none;
		}
	}
}
#activate-notification{
	.modal-header{
		background-color: @communityColor !important;
		color: @communityFontColor !important;
		border-radius: 0;
		.modal-title{
			color: @communityFontColor !important;
			font-size: 20px;
		}
		button{
			span{
				color: @communityFontColor !important;
				text-shadow:none;
			}
		}
	}
	.modal-body{
		a{
			color:@communityColor !important;
		}
	}
}

.full-width-banner {
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	display: flex;
	flex-direction: column;
	margin-bottom: 40px;
	padding-bottom: 15px;
	text-align: center;

	.header-copy-container {
		padding: 25px 0;
	}

	.header {
		margin: 0;
		font-weight: 500;
	}

	.sub-header {
		color: @gray;
		font-weight: 400;
		margin-bottom: 0;
		padding-top: 20px;
	}

	.info-bar {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		font-weight: 400;
		justify-content: space-between;
		text-transform: uppercase;
	}

	.results-count {
		margin: 0;
	}

	.dropdownContainer {
		padding-top: 0;
	}

	@media @mobile-only {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.card-deck{
	justify-content: center;
	-webkit-justify-content: center;
	margin: 0px;

	.card{
		min-width:330px;
		max-width:330px;
		height: 368px;
		margin:15px;
		padding: 0px;
		border-radius: 5px;
		cursor:pointer;
		-webkit-flex: 1 1 330px;
		.view{
			border-radius: 5px 5px 0px 0px;
			cursor: pointer;
		}
		@media @mobile-only{
			min-width: calc(100% - 14px);
			box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
			margin:5px 7px 10px 7px;
			min-height: auto;
			height: auto;
			display: block;
			border-radius:12px;
			-webkit-flex:none;
			overflow: hidden;
		}
		.badge{
			position: absolute;
			top: 7px;
			left: 10px;
			z-index: 1;
			font-weight: 500;
			text-transform: uppercase;
			@media @mobile-only {
				top: 20px;
				left: 20px;
			}
			&.right{
				right: 10px;
				left: auto !important;
				@media @mobile-only {
					right: 20px;
				}
			}
			i{
				&.fa-circle{
					font-size: 7px;
					position: relative;
					bottom: 2px;
				}
				&.fa-gift{
					font-size:14px;
				}

			}
			&.normal-color{
				background-color: @communityButtonBackgroundColor;
				color: @communityFontColor !important;
			}
			&.reverse-color{
				background-color: @communityFontColor !important;
				color:@communityButtonBackgroundColor !important;
			}
		}
		.img-fluid{
			height: 188px;
			width: 330px;
			object-fit:cover;
			min-width: 100%;
		}
		.card-body{
			padding: 15px 15px 0px 15px;
			color:#000;
			display: flex;
			flex-direction: column;
			height: 180px;

			.user-content-module-action-row{
				font-size: 16px;
				margin:0px 0px 15px 0px;
				height:25px;
				a{
					color: inherit !important;
				}
				span{
					margin:0px 10px;
				}
			}
			@media @mobile-only{
				margin-top: 20px;
				padding-left:20px;
				padding-bottom: 15px;
				height: auto;
			}
		}
		.card-title{
			height: 60px;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			width: 100%;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-top: 10px;
			color: #202124;
		}
		.card-text{
			height:45px;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			width: 100%;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			color: #5f6368;
		}
		.card-body-without-media{
			border-radius: 4px;

			.card-title{
				color: inherit !important;
			}
			.card-detail-container{
				color: inherit !important;
              background-color: transparent !important;
			}
			.card-text{
				color: inherit !important;
				height:220px;
				-webkit-line-clamp: 11;
				white-space: pre-line;
				margin-bottom: 13px;
				@media @mobile-only{
					height: auto;
				}
			}
		}

		.card-detail-container{
			box-shadow: unset;
			display: flex;
			height:25px;
			font-size: 12px;
			justify-content: space-between;
			color: #5f6368;
			padding: 10px 0 0 0 !important;

			i {
				font-weight:400;
			}
		}
		.card-detail{
			.metric{
				margin: 0px 10px;

				.activity-card-new-notification{
					color: #ff0009;
					font-size: 5px;
					font-weight: 900;
					position: relative;
					bottom: 8px;
					right: 2px;
					width: 0px;
				}
			}
		}
		&:empty{
			height: 0px;
		}
		&.quick-poll-card{
			&:not(.DROP_DOWN){
				overflow: hidden;
			}
			.question-container, .qpm-question-container {
				.title {
					font-weight: 500;
					font-size: 14px;
				}
				.options {
					margin-top: 20px;
					line-height: 30px;

					input[type=checkbox] + label:before, input[type=radio] + label:before {
						border-color: @communityColor;
					}

					input[type=radio]:checked + label:after {
						border-color: @communityColor;
						background-color: @communityColor;
					}

					input[type=checkbox]:checked + label:before {
						border-color: transparent @communityColor @communityColor transparent;
					}
					label{
						font-size: 14px;
					}
					.qp-select {
						input.select-dropdown {
							padding-right: 15px;
							box-sizing: border-box;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						li {
							&:hover {
								background-color: @communityColor;
							}

							span {
								color: #5f6368 !important
							}
						}
					}
				}
			}
			.chart-container{
				width: 300px;
				height: 350px;
				margin: auto;
				display: none;
				.highcharts-title{
					width: 100% !important;
					left: 0px !important;
				}
			}
			.qp-results-message{
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 18px;
				font-weight: 400;
				display: flex;
				justify-items: center;
				justify-content: center;
				align-items: center;
				display: none;
				overflow: auto;
			}
			.actions{
				position: absolute;
				bottom: 0;
				width: 100%;
				left: 0;
				background-color:#fff;
				@media @mobile-only{
					position: relative;
				}
				&.more{
					background-color:transparent;
					height: 100%;
					padding-top: 315px;
					@media @mobile-only{
						padding-top: 0;
					}
				}
				.qp-submit-button{
					display: none;
					margin:10px 0px 20px 20px;
					padding: 5px 15px;
					&:disabled{
						opacity: .5;
					}
					@media @mobile-only{
						display: block !important;
					}
				}
				.qp-more-container{
					display: none;
					@media @mobile-only{
						display: none !important;
					}
					.qp-more-fade{
						height: 30px;
						opacity: .8;
						background-color: #fff;
					}
					.qp-more-button{
						font-size: 14px;
						padding: 5px 15px;
						width: 100%;
						background-color: @communityColor;
						color: #fff;
						text-align: left;
						z-index:1

					}
				}
			}
			.qp-modal{
				.qpm-actions{
					margin: 20px 10px;
					.qp-submit-button{
						padding: 5px 15px;
						&:disabled{
							opacity: .5;
						}
					}
				}
			}
			.title {
				margin-top: 15px;
			}
		}
	}
	.card.category-topic-card{
		height:321px;
		@media @mobile-only{
			height: auto;
		}
		.img-fluid{
			height: 141px;
		}
	}
	.card-background-for-no-media{
		height:420px;
		position: absolute;
	}
}

.notificationsList {
	&:first-child,
	&:last-child {
		margin-top: 0;
	}

	.row {
		margin: 10px auto;
	}

	.notification-item:not(:first-of-type) {
		border-top: 1px solid #eee;
		border-radius: 0;
	}

	.notification-details,
	.notification-details-actions {
		font-size: 0.707rem;
	}

	.notification-details,
	.notification-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		div,
		span {
			margin-right: 15px;
		}
	}

	.notification-details {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		.community-user-name {
			margin-right: 0;
		}

		.created-date {
			margin-bottom: 0;
		}
	}

	.liker-info {
		font-weight: 500;
	}

	.liker-role {
		color: @gray;
	}

	.notification-title {
		font-size: 0.9rem;
		margin: 20px auto 0;

		a {
			&:not(.nav-link):not(.btn):not(.dropdown-item) {
				color: #000 !important;
				text-transform: capitalize;
				font-weight: 900;
			}

			&.member,
			&.topic {
				color: inherit;
			}
		}

		strong {
			text-transform: capitalize;
		}
	}

	.inline-avatar();

	.notification-content {
		background: #f7f7f7;
		border: 1px solid #eee;
		padding: 15px;
		border-radius: 3px;

		*:last-child {
			margin-bottom: 0;
		}

		&.unlocked-reward:after {
			content: "";
			display: table;
			clear: both;

			.thumb {
				float: left;
              margin-right: 10px;
			}

			.details {
				float: left;
				margin-left: 15px;

				> * {
					margin: 15px 0;
					font-size: 0.707rem;
				}
			}

			.expires {
				color: #535353;
			}
		}
	}

	.comment-attachments {
		padding-right: 60px;
		margin-top: 20px;

		.attachments {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.attachment-item {
			width: 175px;
			margin-right: 15px;
			margin-bottom: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&:last-child{
				margin-right: 0;
			}

			img {
				max-width: 175px;
			}

			span.caption {
				font-size: 0.707rem;
				font-weight: 700;
				color: #535353;
			}
		}
	}

	.file-upload,
	.unlocked-reward {
		> img {
			margin-right: 15px;
		}
	}

	.new-stamp();

	.notification-content,
	.notification-details-actions {
		width: 100%;
	}

	.notification-details-actions {
		display: flex;
		flex-direction: row;
		align-items: flex-start;

		a {
			display: inline-block;
			text-transform: uppercase;
		}
	}

	.notification-item {
		padding: 25px 15px;
	}

	.fa-clock();
}
#no-notifications {
	margin-bottom: 0;
}
.community-user-info-container {
	.community-user-name {
		font-weight: 600;
		margin-right: 0;
	}

	.community-user-role {
		color: @community-role-color;
		margin-left: 10px;
		text-transform: uppercase;

		@media @mobile-only {
			display: none;
		}
	}

	.created-date {
		font-size: 13px;
		padding-top: 3px;
		margin-bottom: 15px;
	}
}

#activities-table {
	@rowPaddingY: 10px;

	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
	margin-top: 20px;
	padding: 40px 50px;

	p {
		margin-bottom: 0;
	}

	.activities-table-header,
	.activity-row {
		padding-top: @rowPaddingY;
		padding-bottom: @rowPaddingY;
	}

	.activities-table-header {
		background-color: @gray;
		font-weight: 500;
	}

	.activity-row {
		border-bottom: 1px solid rgba(0,0,0,.16);
	}

	.view-link {
		text-transform: capitalize;
	}

	@media @mobile-only {
		padding-left: 25px;
		padding-right: 25px;
	}
}

.user-content-carousel{
	width:270px;
	margin:0px 10px;
	.carousel-inner{
		background-color: #eeeeee;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
		background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
		background-image:    -moz-linear-gradient(top, #eeeeee, #999999);
		background-image:      -o-linear-gradient(top, #eeeeee, #999999);
		background-image:         linear-gradient(to bottom, #eeeeee, #ffffff);
		height:180px;
		.carousel-indicators{
			bottom:0px;
		}
		.carousel-item{
			padding:15px;
			.user-content-carousel-writer {
				font-size:12px;
				margin-bottom: 10px;
				color: #5f6368;
				a{
					color:#000 !important;
				}
				img{
					width:30px;
					height: 30px;
					margin-right:10px;
				}

			}
			h4{
				font-size:18px;
				margin-bottom: 10px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.user-content-carousel-text{
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				width: 100%;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				font-size: 14px;
			}
		}
		.carousel-indicators li{
			background-color:#ddd;
			&.active{
				background-color: #666;
			}
		}
	}
	.carousel-control-prev-icon{
		position: relative;
		right:35px;
	}
	.carousel-control-next-icon{
		position: relative;
		left:35px;
	}
	@media @mobile-only{
		margin:auto;
	}

}
.user-content-carsousel-single-item{
	width:270px;
	margin:0px 10px;
	padding:15px;
	background-color: #eeeeee;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
	background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
	background-image:    -moz-linear-gradient(top, #eeeeee, #999999);
	background-image:      -o-linear-gradient(top, #eeeeee, #999999);
	background-image:         linear-gradient(to bottom, #eeeeee, #ffffff);
	height:180px;
	h4{
		font-size: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
	.user-content-carousel-writer {
		font-size: 16px;
		margin-bottom: 10px;
		a{
			color:#000 !important;
		}
		img{
			width:30px;
			height: 30px;
			margin-right:10px;
		}
	}
	.user-content-carousel-text{
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		width: 100%;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		font-size: 14px;
	}
	.user-content-carsousel-single-item-link{
		text-align: center;
		font-weight:400;
		padding-top:50px;
		width: 100%;
		height: 100%;
		display: block;
		color:#000;
	}
	@media @mobile-only{
		margin:auto;
	}
}
#home-carousel{
	margin-bottom: 15px;
	border-radius: 5px;
	@media @extra-large{
		height:435px;
	}
	@media @large{
		height:365px;
	}
	@media @medium{
		height:275px;
	}
	@media @small{
		height:616px;
	}
	@media @mobile-only{
		height:560px;
	}
	.carousel-inner{
		height:100%;
		.carousel-item{
			height:100%;
			.row{
				height:100%;
				margin: 0px;
				.home-carousel-text-container{
					padding: 30px 60px 30px 30px;
					display: -ms-flexbox;
					display: flex;
					display:-webkit-flex;
					-webkit-flex-direction:column;
					-webkit-justify-content: center;
					-ms-flex-direction: column;
					flex-direction: column;
					justify-content: center;
					-ms-flex-align: center;
					align-items: flex-start;
					.home-carousel-title{
						color: inherit;
						max-height: 160px;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						width: 100%;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						margin-bottom: 10px;
						font-size:36px;
						@media @extra-large{
							line-height: 42px;
						}
						@media @large{
							font-size: 30px;
							-webkit-line-clamp: 2;
						}
						@media @medium{
							font-size: 20px;
							max-height:90px;
							margin-bottom: 0px;
							-webkit-line-clamp: 2;
						}
						@media @small{
							font-size: 20px;
							max-height:90px;
							margin-bottom:15px;
						}
						@media @mobile-only{
							font-size: 20px;
							max-height:90px;
							margin-bottom:15px;
						}
					}
					.home-carousel-text {
						max-height: 110px;
						color: inherit;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						width: 100%;
						-webkit-line-clamp: 4;
						-webkit-box-orient: vertical;
						margin-bottom: 15px;
						font-size:18px;
						@media @medium{
							font-size: 14px;
							max-height:60px;
							margin-bottom: 10px;
							-webkit-line-clamp: 3;
						}
						@media @small{
							font-size: 14px;
							max-height: 60px;


						}
						@media @mobile-only{
							font-size: 14px;
							max-height: 60px;

						}
					}
					a,button{
						background-color:@communityButtonBackgroundColor;
						color:@communityFontColor !important;
						min-width:80px;
						height:55px;
						cursor: pointer;
						text-shadow: none;
					}
					@media @large{
						padding:10px 40px 10px 10px;
					}
					@media @medium{
						padding:5px 30px 5px 5px;
					}
					@media @small{
						padding:30px;
						min-height: 285px;
					}
					@media @mobile-only{
						padding:10px 30px 60px 30px;
						min-height: 300px;
					}
				}
			}
		}
	}
	.home-carousel-image-container{
		padding:0px;
		height: 100%;
		img{
			height:100%;
			object-fit: cover;
		}
		@media @small{
			height: 50%;
		}
		@media @mobile-only{
			height: 50%;
		}
	}
	.carousel-control-next{
		right:1px;
	}
	.carousel-control-prev-icon{
		position: relative;
		right:35%;
	}
	.carousel-control-next-icon{
		position: relative;
		left:35%;
	}
	.carousel-indicators{
		@media @small{
			bottom:-10px;
		}
	}
}
#home-page-card-container{
	max-width:100%;
	padding-top: 25px;
}
.page-title{
	width:100%;
	height: 160px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	margin:0px 0px 0px 0px;
}
.social-media-card{
	.social-media-header{
		background-color: #333;
		color: #fff;
		font-weight: bold;
		font-size: 10px;
		height: 20px;
		padding: 3px 10px;
	}
	&.instagram-card{
		overflow: hidden;
		background-color: #eee;
		img{
			border-radius: 0px;
			max-width: 100%;
			max-height: 100%;
			object-fit: cover;
			margin: auto;
		}
	}
	&.twitter-card{
		background-color: #eee;
		iframe{
			width: calc(100% - 20px) !important;
			margin: auto !important;

		}
	}
}
#page-title-container{
	margin:0px !important;
	.card-body{
		box-shadow: none;
		margin:0px;
		border-radius:0px;
		flex:none;
		padding:25px 35px;
		color: #000;
		margin-top: 0px;
		background-color: #fff;
		position: relative;
		z-index: 2;
	}
	.card-title{
		width: 100%;
		text-align: center;
		bottom: 100px;
		color: #fff;
		z-index: 2;
		font-size: 48px;

		position: relative;
		height: 72px;
		margin-bottom: -72px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		@media @small{
			font-size: 24px;
			bottom: 60px;
		}
		@media @mobile-only{
			font-size: 24px;
			bottom: 60px;
		}
	}
	.card-title.title-without-image{
		color: #000;
		margin-top: 0px;
		background-color: #fff;
		padding:50px;
		position: relative;
		bottom: 0px;
		height: auto;
		margin-bottom: 0px;
	}
	.view.overlay{
		box-shadow: none;
		border-radius: 0px;
		background-color:#fff;
		width: 100%;
		img{
			width: 100%;
			margin: auto;
			object-fit: cover;
			height: 100%;
		}
	}
}
.category-topic-default-card-media{
	width:100%;
	height:141px;
	background:linear-gradient(-149deg, #2E2E2E 0%, #423737 51%, #4e4e4e 93%);
	color:#fff;
	display:flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	text-align: center;
}
#moderators-message{

	.modal-header{
		background-color: @communityButtonBackgroundColor;
		color: @communityFontColor !important;
		border-radius: 0;
		.heading{
			color: @communityFontColor !important;
			font-size: 20px;
		}
		button{
			span{
				color: @communityFontColor !important;
				text-shadow:none;
			}
		}
	}
	.moderator-message-from{
		margin-bottom: 20px;
		.moderator-message-from-name-container{
			display: inline-block;
			position: relative;
			top: 15px;
			left: 10px;
			margin-bottom: 20px;
		}
	}
	.moderator-message-text{
		h5{
			font-weight: bold;
		}
		a{
			color:@communityColor !important;
		}
	}
}
.no-announcment-available{
	background-color: #f7f7f7;
	display: inline-block;
	padding: 10px;
}
#activity-card-detail-container{
	background-color: #fff;
	margin-top:20px;
	border-radius: 2px;
	padding: 50px !important;

	.pending-approval-container{
		.pending-approval-text-container{
			display: none;
		}
	}
	#descriptionWrapper{
		margin-bottom: 50px;
	}
	&.pending-approval{
		.pending-approval-container{
			border:1px solid @communityColor !important;
			margin: -25px;
			padding: 5px 25px 25px 25px;
			.pending-approval-text-container{
				display: block;
				text-align: center;
				position: relative;
				bottom: 15px;
				span{
					color:@communityFontColor !important;
					background-color: @communityButtonBackgroundColor !important;
					padding:4px 15px;
					border-radius: 3px;
					font-size: 14px;
					box-shadow:  0px 1px 5px rgba(50, 50, 50, 0.75)
				}
			}
			.desktop-new-message-container,.new-comment-text-editor-container{
				margin: 20px -25px !important;
			}
		}

	}
	.title{
		width: 100%;
		font-size: 48px;
		margin-bottom: 20px;
		text-align: center;
		font-weight: 400;
	}
	.author-time{
		font-size: 14px;
		text-align: center;
		margin-bottom: 30px;
		strong{
			font-weight: 700;
		}
		a{
			color: inherit !important;
		}
		.time{
			margin:0px 5px 0px 30px;
			@media @small{
				display: block;
			}
			@media @mobile-only{
				display: block;
			}
		}
	}
	.detail-container{
		margin-bottom: 30px;
	}
}
.card-detail-container {
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	padding: 30px 50px !important;

	.fa-clock();

	@media @mobile-only {
		padding: 15px !important;
	}
}
.timeout-dialog{
	position: fixed !important;
	top: 30% !important;
	z-index: 999;
}
.descriptionBlock{
	margin: 15px 0px 45px 0px;
	.strong{
		margin-left: 6px;
	}
	&.file{
		text-align: center;
		.file-container{
			width: 100%;
			a, img, video, audio, div, iframe{
				margin: auto;
				text-align: center;
				max-width: 100%;
			}
			&.document{
				iframe{
					width: 100%;
					max-width: 100%;
					height: 600px;
				}
				width: 100%;
				height: 600px;
				max-width: 100%;
			}
		}

	}
	&.vidi{
		.vidi-title{
			font-size:18px;
			margin-bottom: 15px;
		}
		.video-idi-unsupported-browsers-message-container{
			display: none;
			margin: 10px 0px;
			font-size: 12px;
		}
		.vidi-confirmed-main-container {
			.vidi-confirmed-container {
				.member-confirmed-for {
					text-transform: uppercase;
					margin-bottom: 5px;
					font-size: 14px;
				}
				.member-session-starts{
					display:none;
					.session-starts-title{
						color: @communityColor;
						text-transform: uppercase;
						margin-bottom: 10px;
						font-weight: 400;
					}
					.session-starts-desc{
						font-size: 14px;
						margin-bottom: 10px;
					}
				}
				.vidi-confirmed {
					background-color: @communityButtonBackgroundColor;
					color: @communityFontColor;
					padding: 10px 10px;
					color: #fff;
					border-radius: 3px;
					display: inline-block;
					.duration {
						font-size: 14px;
						margin-left: 5px;
					}
					.addevent-cancel-container {
						display: inline-block;
						.addeventatc {
							z-index: 0;

							.fa-calendar-alt {
								float: left;
								right: 8px;
								font-size: 18px;
								position: relative;
								bottom: 3px;
							}
						}
						.confirmed-timeslot-cancelButton {
							background-color: transparent;
							color: #fff;
							font-size: 14px;
							border: none;
							font-weight: normal;
							outline: none;
							cursor: pointer;
						}
					}
				}
			}
			.time-to-chat-container{
				display:none;
				.time-to-chat-container-title{
					color: @communityColor;
					text-transform: uppercase;
					margin-bottom: 10px;
					font-weight: 400;
				}
				.time-to-chat-container-desc{
					font-size: 14px;
				}
				.time-to-chat-button-container{
					margin-top: 10px;
					button{
						color: @communityColor;
						background-color: transparent;
						padding:0;
						box-shadow: none;
						margin: 0;
					}
				}
			}

			.session-full-container{
				display:none;
				.session-full-container-title{
					color: @communityColor;
					font-weight: 400;
					text-transform: uppercase;
					margin-bottom: 10px;
				}
			}

			.event-start-session-container{
				.event-start-session-container-title{
					color: @communityColor;
					font-weight: 400;
					text-transform: uppercase;
					margin-bottom: 10px;
				}
				.event-join-the-session-button-container{
					margin-top: 10px;
					.event-join-the-session{
						color:@communityFontColor;
						background-color: @communityButtonBackgroundColor;
						padding:5px 15px;
						margin-right:10px;
						&:disabled{
							opacity:.5;
							cursor: initial;
						}
					}
				}
			}
			.start-session-container{
				display:none;
				.start-session-container-title{
					color: @communityColor;
					font-weight: 400;
					text-transform: uppercase;
					margin-bottom: 10px;
				}
				.join-the-session-button-container{
					margin-top: 10px;
					.join-the-session{
						color:@communityFontColor;
						background-color: @communityButtonBackgroundColor;
						padding:5px 15px;
						margin-right:10px;
						&:disabled{
							opacity:.5;
							cursor: initial;
						}
					}
					.cancel-the-session{
						color: @communityColor;
						background-color: transparent;
						padding:0;
						box-shadow: none;
						margin: 0;
					}
				}
			}
			.session-completed-container{
				display: none;
			}
			.session-user-no-show{
				display: none;
			}
		}
		.vidi-available{
			.vidi-has-confirmed-title{
				cursor: pointer;
				display: none;
				i{
					margin:20px 0px 0px 5px;
				}
			}
			.vidi-no-confirmed-title{
				display: block;
			}
			&.has-confirmed{
				.vidi-has-confirmed-title{
					display: block;
				}
				.vidi-no-confirmed-title{
					display: none;
				}
				.vidi-available-container{
					display: none;
				}
				&.has-confirmed-open{
					.vidi-available-container{
						display: block;
					}
					.vidi-has-confirmed-title {
						i{
							-webkit-transform: rotate(180deg);
							-moz-transform: rotate(180deg);
							-o-transform: rotate(180deg);
							-ms-transform: rotate(180deg);
							transform: rotate(180deg);
						}
					}
				}
			}
			.vidi-available-container{
				margin-top: 10px;
				.time-slot-grouped-by-date{
					width: 600px;
					margin-bottom: 20px;
					@media @small{
						width: 100%;
					}
					@media @mobile-only{
						width: 100%;
					}
					.tsc-title{
						font-weight: 400;
						margin-bottom: 5px;
						font-size: 14px;
					}
					.time-slots-container{
						.time-slot-to-select{
							width: 50%;
							display: inline-block;
							margin-bottom: 10px;
							@media @small{
								width: 100%;
							}
							@media @mobile-only{
								width: 100%;
							}
							.time-slot-time-container{
								background-color: #eee;
								width: 50%;
								padding:10px 15px;
								display: inline-block;
								text-align: center;
								border-radius: 3px;
								height:42px;
								vertical-align: top;
								.time-slot-duration{
									font-size: 14px;
								}
							}
							.time-slot-select{
								display: inline-block;
								background-color: @communityButtonBackgroundColor;
								vertical-align: top;
								color: @communityFontColor;
								height: 40px;
								padding: 5px 15px;
								&:disabled{
									opacity: .5;
									cursor: initial;
								}
							}
						}
					}
				}
			}
		}
		.no-available-spot{
			margin-top: 20px;
		}
	}
	.caption{
		margin-top: 10px;
	}
	.btn{
		text-shadow: none;
		&:focus {
			outline: 2px solid #005fcc !important;
		}
	}

}
#content-id{
	display:none;
}
.detail-container{
	.detail-title{
		font-size:20px;
		margin:10px 0px 30px 0px;
		#content-upload-file-button{
			background-color:@communityButtonBackgroundColor !important;
			color:@communityFontColor !important;
			padding:5px 15px;
			font-size: 12px;
			position: relative;
			bottom: 5px;
			&:focus {
				outline: 2px solid #005fcc !important;
			}
		}
	}
	&.survey-container{
		.detail-survey{
			background-color: #eee;
			width: 240px;
			height: 100px;
			display: inline-block;
			margin: 0px 8px 20px 8px;
			padding:10px;
			text-align: center;
			font-size: 14px;
			vertical-align: top;
			@media @small{
				width: 100%;
			}
			@media @mobile-only{
				width: 100%;
			}
			.survey-name{
				font-weight: bold;
				margin-bottom: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.take-survey{
				background-color:@communityButtonBackgroundColor !important;
				color:@communityFontColor !important;
				padding: 10px 30px;
				margin-bottom: 5px;

				&:focus {
					outline: 2px solid #005fcc !important;
				}
			}
			.survey-completed{
				margin: 5px 0px;
			}
			.retake-survey{
				color:@communityColor !important;
			}
		}

	}
	.activity-file-carousel{
		margin-bottom: 10px;
		li{
			background-color: #eee !important;
			width: 10px !important;
			height: 10px !important;
			&.active{
				background-color: #666 !important;
			}
		}
		.carousel-control-prev{
			width: 50px;
			left: -30px;
			@media @small{
				left: 0px;
			}

		}
		.carousel-control-next{
			width: 50px;
			right: -30px;
			@media @small{
				right: 0px;
			}

		}
	}
	.carousel-item{
		text-align: center;
	}
}
.file-thumbnail-container{
	width: 240px;
	margin: 10px 8px;
	display: inline-flex;
	height: 135px;
	overflow: hidden;
	background: linear-gradient(to right,#eee, #ccc);;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
	.mask{
		background-color: rgba(red(@communityButtonBackgroundColor), green(@communityButtonBackgroundColor), blue(@communityButtonBackgroundColor), .7);
	}
	img{
		margin:auto;
		max-width: 100%;
		max-height: 100%;
	}
	.video-icon{
		position: absolute;
		color: #fff;
		font-size: 80px;
		margin-top: 20px;
		margin-left: 70px;
		z-index: 1;
		@media @large{
			font-size: 70px;
			margin-top: 15px;
			margin-left: 55px;
		}
		@media @medium{
			font-size: 50px;
			margin-top: 5px;
			margin-left: 35px;
		}
		@media @small{
			font-size: 55px;
			margin-top: 10px;
			margin-left: 50px;
		}
		@media @mobile-only{
			font-size: 40px;
			margin-top: 5px;
			margin-left: 30px;
		}
	}
	.embed-icon{
		position: absolute;
		color: #fff;
		font-size: 65px;
		margin-top: 25px;
		margin-left: 80px;
		z-index: 1;
		@media @large{
			font-size: 60px;
			margin-top: 15px;
			margin-left: 65px;
		}
		@media @medium{
			font-size: 50px;
			margin-top: 5px;
			margin-left: 35px;
		}
		@media @small{
			font-size: 45px;
			margin-top: 15px;
			margin-left: 55px;
		}
		@media @mobile-only{
			font-size: 40px;
			margin-top: 5px;
			margin-left: 30px;

		}
	}
	.badge{
		position: absolute;
		top: 10px;
		margin-left: 10px;
		color:@communityFontColor !important;
		background-color: @communityButtonBackgroundColor !important;
		padding:4px 15px;
		border-radius: 3px;
		font-size: 12px;
		box-shadow:  0px 1px 5px rgba(50, 50, 50, 0.75);
		text-shadow: none;
		font-weight: 400;
		z-index: 1;
		display: none;
	}
	&.pending-approval{
		.badge{
			display: block;
		}
		.mask{
			display: none;
		}
	}
	@media @large{
		width: 200px;
		margin: 10px 6px;
		height: 115px;
	}
	@media @medium{
		width: 140px;
		height: 80px;
		margin: 10px 6px;
	}
	@media @small{
		width: 170px;
		height: 95px;
		margin: 10px 6px;
	}
	@media @mobile-only{
		width: 115px;
		height: 70px;
		margin: 10px 6px;
	}
}
#add-file-modal{
	.modal-body{
		min-height: 240px;
		text-align: center;
		#add-files-main{
			.add-file-container{
				width: calc(50% - 2px);
				text-align: center;
				cursor: pointer;
				font-weight: bold;
			}
		}
		#add-file-upload{
			display: none;
			.buttons{
				margin-top: 30px;
				button{
					margin:0px 20px;
					font-size: 12px;
					padding: 10px 20px;
					&:focus {
						outline: 2px solid #005fcc !important;
					}
				}
				button:not(.accent-button){
					background-color:#eee !important;
					color:#333!important;
				}
			}
			#attachmentsDropZone{
				width: auto;
				margin-top: 15px;
				border: 2px solid #CCC;
				text-align: center;
				padding: 20px;
				color: gray;
				min-height: auto;
				font-style: italic;
				.dz-image-preview{
					&.rotation-90{
						.dz-image{
							transform: rotate(270deg);
						}
					}
					&.rotation-180{
						.dz-image{
							transform: rotate(180deg);
						}
					}
					&.rotation-270{
						.dz-image{
							transform: rotate(90deg);
						}
					}
				}
			}
		}
		#add-file-embed{
			display: none;
			.buttons{
				margin-top: 30px;
				button{
					margin:0px 20px;
					font-size: 12px;
					padding: 10px 20px;
					&:focus {
						outline: 2px solid #005fcc !important;
					}
				}
				button:not(.accent-button){
					background-color:#eee !important;
					color:#333!important;
				}
			}
			#attachmentsEmbedFileUrls{
				height: 200px;
				overflow: auto;
                 width: 100%;
			}
		}
		#add-file-description{
			display:none;
			.buttons{
				margin-top: 30px;
				button{
					margin:0px 20px;
					font-size: 12px;
					padding: 10px 20px;
					&:focus {
						outline: 2px solid #005fcc !important;
					}
				}
				button:not(.accent-button){
					background-color:#eee !important;
					color:#333!important;
				}
			}
		}

	}
}
#activity-detail-attachment-show-all{
	text-align: center;
}
#attachment-gallery-show-all{
	cursor: pointer;
	text-transform: uppercase;
	font-size:13px;
}

.actions-bar{
	.like-share-devider{
		margin:0px 15px;
	}
	.activity-like-button{
		cursor: pointer;
	}
	.activity-detail-liked{
		color: @communityButtonBackgroundColor;
	}
	.comment-detail-like{
		color: @communityButtonBackgroundColor;
	}
	.circle-button{
		color:#333;
		margin: 0px 3px;
	}
	.flagged{
		color: @fixed-accent-color;
	}
}
.desktop-new-message-container{
	background-color:#eee;
	padding: 20px 50px;
	margin: 20px -50px;
	.desktop-new-message-button{
		height:50px;
		border-radius: 5px;
		border:1px solid #ccc;
		color:#666;
		background-color: #fff;
		padding: 10px;
		cursor:pointer;
	}
}
.new-comment-text-editor-container{
	background-color:#eee;
	padding: 20px 50px;
	margin: 20px -50px;
	.add-comment{
		.embed-text-wrapper{
			display: none;
			margin:20px 0px;
			height: 180px;
			.upload-wrapper-title{
				height: 25px;
				color:#999;
				font-size: 14px;
			}
			#commentEmbedFileUrls{
				padding:10px;
				border: 1px solid #d1d1d1 !important;
				height: calc(100% - 25px);
				background-color: #fff;
				font-weight: 300;
				resize: none;
                width: 100%;
			}
		}
		.dropzone-wrapper{
			display: none;
			min-height: 180px;
			margin:20px 0px;
			.upload-wrapper-title{
				height: 25px;
				color:#999;
				font-size: 14px;
			}
			#commentDropZone{
				border: 1px solid #d1d1d1 !important;
				.dz-image-preview{
					&.rotation-90{
						.dz-image{
							transform: rotate(270deg);
						}
					}
					&.rotation-180{
						.dz-image{
							transform: rotate(180deg);
						}
					}
					&.rotation-270{
						.dz-image{
							transform: rotate(90deg);
						}
					}
				}
			}
		}
	}
	#cke_addCommentMessage{
		width:100% !important;
		overflow: hidden;
	}
	.buttons-container{
		margin:10px 0px 0px 0px;
		.comment_link{
			&:focus {
				outline: 2px solid #005fcc !important;
			}
		}
		.response-upload-container{
			float: right;
			padding-top: 5px;
			.private-response-container{
				display: inline-block;
				margin-top: 5px;
				.form-inline{
					display:inline-flex;
				}
				a{
					color: #666 !important;
					font-size: 18px;
					margin-left: 10px;
				}

			}
			.upload-container{
				display: inline-block;
				float: right;
				button{
					background-color: #eee !important;
					color: #666 !important;
					padding: 5px 15px;
					font-size: 12px;
					position: relative;
					bottom: 5px;
					margin:5px 0px 0px 20px;

					&:focus {
						outline: 2px solid #005fcc !important;
					}
				}

			}
			@media @small{
				float:left;
				width: 100%;
				margin-bottom:20px;

			}
			@media @mobile-only{
				float:left;
				width: 100%;
				margin-bottom:20px;
			}
		}
	}
}
.checkbox-community-color [type="checkbox"]:checked+label:before {
    border-color: transparent @communityColor @communityColor transparent;
}
.uninfluenced-comments-wrapper {
  .hidden-influences-message {
    display: none;
    width: 100%;
    text-align: center;
    font-weight: 400;
  }

  &.hidden-influences {
    .comments-container {
      display: none;
    }

    .hidden-influences-message {
      display: block;
    }
  }

  .comments-container {
    margin-bottom: 30px;

    .comments-container-top-row {
      height: 75px;
      margin-bottom: 10px;
      @media @small {
        height: 145px;

      }
      @media @mobile-only {
        height: 145px;
      }

      .total-comment {
        float: left;
        padding-top: 20px;
        font-size: 20px;
        margin-bottom: 20px;

        .hidden-for-members {
          visibility: hidden;
          margin-right: -25px;
        }
      }

      .comments-sort {
        float: right;

        .sort-by {
          display: inline-block;
          vertical-align: top;
          padding-top: 20px;
        }

        .comment-sort-select {
          display: inline-block;
          margin-left: 20px;
          color: #666 !important;

          .caret, input {
            color: inherit;
          }

          .dropdown-content li > a, .dropdown-content li > span {
            color: #5f6368;
          }

          .dropdown-content li span:hover {
            color: @communityFontColor !important;
            background-color: @communityButtonBackgroundColor !important;
          }
        }

        @media @small {
          float: left;
          width: 100%;
          margin-bottom: 20px;

        }
        @media @mobile-only {
          float: left;
          width: 100%;
          margin-bottom: 20px;
        }
      }
    }

    #comments-loading-container {
      .comment-chain-container {
        border-bottom: 2px solid #eee;
        margin: 10px 0px;
        font-size: 14px;
        padding-bottom: 5px;

        &.comment-private {
          border: 2px solid @fixed-accent-color;
          padding: 10px;

          .comment-private-container {
            width: 100%;
            text-align: center;
            height: 25px;
            position: relative;
            bottom: 20px;

            span {
              color: #fff;
              background-color: @fixed-accent-color;
              padding: 4px 10px;
              border-radius: 5px;
            }
          }

          .pending-approval {
            display: none;
          }
        }

        .comment-level {
          .comment-avatar {
            display: inline-block;
            width: 60px;
            vertical-align: top;
            margin-right: 15px;
            margin-top: 5px;

			img {
				box-shadow: -4px 8px 9px -2px rgba(0,0,0,.16);
			}

            @media @small {
              width: 40px;
              margin-right: 10px;
            }
            @media @mobile-only {
              width: 40px;
              margin-right: 10px;
            }
          }

          .commentbody-container {
            display: inline-block;
            width: calc(100% - 160px);

            .comment-details {
              .username {
                color: #333;
                font-weight: 500;
                margin-right: 5px;

                a {
                  color: #333 !important;
                }
              }

              .comment-user-role {
                color: #999;
                margin-right: 5px;
              }

              .pending-approval {
                color: @communityFontColor !important;
                background-color: @communityButtonBackgroundColor !important;
                padding: 4px 15px;
                border-radius: 3px;
                font-size: 12px;
                box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75);
                text-shadow: none;
                font-weight: 400;
                display: inline-block;
              }

              .comment-timestamp {
                margin-top: 4px;
                font-size: 10px;
                display: inline-block;
                color: #666;
              }
            }

            .comment-text {
              margin: 15px 0px 10px 0px;
              color: #333;
              word-break: break-word;
            }

            .like-replay-container {
              .comment-reply-button {
                margin-right: 10px;
                color: #333 !important;

                i {
                  color: #333;

                  &.comment-reply-icon-open {
                    color: @communityButtonBackgroundColor;
                  }
                }
              }

              .activity-detail-liked {
                color: @communityButtonBackgroundColor;
              }
            }

            .new-reply-container {
              #cke_addReplyMessage {
                width: 100%;
                overflow: hidden;
              }

              .replyEmbed {
                height: 100px;

                textarea {
                  padding: 10px;
                  border: 1px solid #d1d1d1 !important;
                  height: 100%;
                  background-color: #fff;
                  font-weight: 300;
                  resize: none;
                }
              }

             .replyDropZone {
                margin: 20px 0px;

                .dz-image-preview {
                  &.rotation-90 {
                    .dz-image {
                      transform: rotate(270deg);
                    }
                  }

                  &.rotation-180 {
                    .dz-image {
                      transform: rotate(180deg);
                    }
                  }

                  &.rotation-270 {
                    .dz-image {
                      transform: rotate(90deg);
                    }
                  }
                }
              }

              .buttons {
				  margin-top: 20px;
				  display: flex;
				  align-items: center;
				  flex-wrap: wrap; /* Allows buttons to stack nicely on mobile */

                .cancel_comment_link {
                  margin-left: 20px;
                  background-color: #eee !important;
                  color: #333 !important;
                  @media @small {
                    margin-left: 0px;
                  }
                  @media @mobile-only {
                    margin-left: 0px;
                  }
                }

				.upload_files_link {
				  margin-left: auto;
				  background-color: @communityButtonBackgroundColor !important;
				  color: @communityFontColor !important;
				  @media @small {
					  margin-left: 0px;
				  }
				  @media @mobile-only {
					  margin-left: 0;
				  }
				 }

                .comment_link {
                  margin-bottom: 10px;
                }

                button {
                  padding: 10px 20px;
                  font-size: 12px;
                  @media @small {
                    display: block;
                  }
                  @media @mobile-only {
                    display: block;
                  }

                  &:focus {
                    outline: 2px solid #005fcc !important;
                  }
                }

              }
            }

            @media @small {
              width: calc(100% - 95px);
            }
            @media @mobile-only {
              width: calc(100% - 95px);
            }
          }

          &.level-1 {
            padding: 0px 0px 10px 0px;
          }

          &.level-2 {
            border-left: 2px solid #f6f6f6;
            margin-left: 25px;
            padding: 0px 0px 10px 0px;
            @media @small {
              margin-left: 0px;
            }
            @media @mobile-only {
              margin-left: 0px;
            }

            .comment-level-container {
              padding: 10px 0px 10px 10px;
            }

            .comment-avatar {
              width: 40px;
            }
          }

          &.level-3 {
            border-left: 2px solid #f6f6f6;
            margin-left: 50px;
            padding: 0px 0px 10px 0px;
            @media @small {
              margin-left: 0px;
              padding-left: 10px;
            }
            @media @mobile-only {
              margin-left: 0px;
              padding-left: 10px;
            }

            .comment-level-container {
              padding: 10px 0px 10px 10px;
            }

            .comment-avatar {
              width: 40px;
            }
          }

          &.level-4 {
            border-left: 2px solid #f6f6f6;
            margin-left: 75px;
            padding: 0px 0px 10px 0px;
            @media @small {
              margin-left: 0px;
              padding-left: 20px;
            }
            @media @mobile-only {
              margin-left: 0px;
              padding-left: 20px;
            }

            .comment-level-container {
              padding: 10px 0px 10px 10px;
            }

            .comment-avatar {
              width: 40px;
            }
          }

          &.deep-link-flash {
            -webkit-animation-name: flash-animation;
            -webkit-animation-duration: 8s;
            animation-name: flash-animation;
            animation-duration: 8s;
          }
        }

        .more-option-button-container {
          float: right;

          button {
            box-shadow: none;
            font-size: 30px;

            i {
              color: #757575;
            }

			&:focus {
			  outline: 2px solid #005fcc !important;
			}
          }

          .dropdown-toggle::after {
            display: none;
          }

          .dropdown-menu {
            min-width: 100px;
          }

        }
      }
    }
  }
}

#current-language{
	display: none;
}
#processing-indicator{
	position: fixed;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.8;
    z-index: 999999;
	display:none;
	img{
		width: 200px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -100px 0 0 -100px;
	}
}
#total-attachment{
	display: none;
}
#file-description-container{
	.form-container{
		border-bottom: 1px solid #d5d5d5;
		margin-bottom:20px;
		.uploaded-file-id{
			display:none;
		}
		.add-file-thumbnail-container{
			display: inline-block;
			width: 80px;
			vertical-align: top;
			margin-right: 30px;
		}
		.add-file-inputs{
			display: inline-block;
			width: calc(100% - 160px);
            .form-group{
              input{
                width: 100%;
              }
            }
			.cke{
				max-width: 100%;
				overflow: hidden;
			}
		}
	}
}

#edit-comment-modal{
	.modal-footer{
		display: block;
		.cancel{
			float: right;
			background-color:#eee !important;
			color:#333!important;
		}
	}
	#editCommentId{
		display: none;
	}
	#cke_editCommentMessage{
		max-width: 100%;
	}
}
#suggested-activities-container{
	margin-top: 30px;
	background-color: #fff;
	padding: 20px;
	border-radius: 2px;
	.detail-title{
		text-transform: uppercase;
		font-size: 20px;
		margin: 10px 0px 30px 0px;
		@media @mobile-only{
			padding:10px;
		}
	}
	.card-deck{
		margin: 0px -20px;
		@media @mobile-only{
			margin: 0px;
		}
		.card{
			@media @large{
				&:nth-child(3){
					display: none
				}
			}
		}
	}
}
.activity-unlocked{
	margin: 30px 0px;
	font-size: 20px;
	color: #333;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 18px;
	.unlocked-location{
		font-weight: 500;
	}
}
.geolocation-activity{
	background-color: #eee;
	border: 1px solid #ccc;
	text-align: center;
	color: #333;
	padding: 20px;
	margin: 30px 0px;
	.geolocation-activity-title{
		margin: 0px 0px 20px 0px;
		font-size: 20px;
	}
	.geolocation-activity-text{
		margin-bottom: 30px;
	}
}
.app-download-links{
	text-align: center;
	margin-bottom: 20px;
	.app-download{
		height: 40px;
		width: auto;
		&.app-store{
			margin-right: 10px;
		}
	}
}
#file-description-template{
	display: none;
}
#twitter-social-share{
	z-index: 9999;
	#twitterSocialShareMessage{
	padding: 10px;
	min-height: 100px;
    resize: none;
	}
}

#comment-attachment-modal{
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	.modal-dialog{
		margin: 30px;
		height: calc(100% - 60px);
		width: calc(100% - 60px);
		max-width: 100%;
		max-height: 100%;
		.modal-content{
			height: 100%;
			background-color: transparent;
			.modal-header{
				height: 30px;
				border: none;
				color: #fff;
				.close{
					color: #fff;
				}
			}
			.modal-body{
				padding: 40px;
				height: calc(100% - 30px);
				.comment-attachment-container{
					height: calc(100% - 85px);
					width: 100%;
					.attachment-arrow{
						position: absolute;
						top: calc(50% - 20px);
						height: 40px;
						width: 25px;
						i{
							font-size: 40px;
							color: #fff;
						}
						&.pre{
							left: 0px;
						}
						&.next{
							right: 0px;
						}
					}
					#mediaContainer{
						width: 100%;
						height: 100%;
						display: flex;

						*{
							margin: auto !important;
							max-width: 100%;
							max-height: 100%;
							object-fit: contain;
						}
						&.media-item-document{
							iframe{
								width: 100%;
								height: 100%;
								}
						}
					}
					.media-dots-container{
						position: absolute;
						bottom: 10px;
						width: calc(100% - 80px);
						text-align: center;
						.dot-item{
							width: 20px;
							height: 20px;
							margin: 0px 3px;
							color: rgba(255,255,255,.5);
							&.current{
								color: #fff;
							}
						}
					}
				}


			}
		}
	}
}

#file-attachment-modal{
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	.modal-dialog{
		margin: 30px;
		height: calc(100% - 60px);
		width: calc(100% - 60px);
		max-width: 100%;
		max-height: 100%;
		@media @small{
			margin: 0px;
			height:100%;
			width:100%;
		}
		@media @mobile-only{
			margin: 0px;
			height:100%;
			width:100%;
		}
		.modal-content{
			height: 100%;
			background-color: transparent;
			.modal-header{
				height: 30px;
				border: none;
				color: #fff;
				.close{
					color: #fff;
				}
				@media @small{
					position: absolute;
					right: 0px;
					top: 0px;
					width: 100px;
					height: 50px;
					z-index: 1;
					padding: 10px;
				}
				@media @mobile-only{
					position: absolute;
					right: 0px;
					top: 0px;
					width: 100px;
					height: 50px;
					z-index: 1;
					padding: 10px;
				}
			}
			.modal-body{
				padding: 40px;
				height: calc(100% - 30px);
				@media @small{
					padding: 0px;
					height: 100%;
				}
				@media @mobile-only{
					padding: 0px;
					height: 100%;
				}
				#attachment-order{
					position: absolute;
					color: #fff;
					margin-top: -20px;
					width: calc(100% - 80px);
					text-align: center;
					font-size: 12px;
					@media @small{
						margin-top:0px;
						padding-top: 13px;
						width: 100%;
						background-color: #000;
						height: 40px;
					}
					@media @mobile-only{
						margin-top: 0px;
						padding-top: 13px;
						width: 100%;
						background-color: #000;
						height: 40px;
					}
				}
				#attachment-container{
					height:100% ;
					width: 100%;
					background-color: #000;
					@media @small{
						padding: 40px 0px 75px 0px;
						background-color: #fff;
						overflow: auto;
					}
					@media @mobile-only{
						padding: 40px 0px 75px 0px;
						background-color: #fff;
						overflow: auto;
					}
					.attachment-arrow{
						position: absolute;
						top: calc(50% - 20px);
						height: 40px;
						width: 25px;
						@media @small{
							width: 50px;
							top: 10px;
						}
						@media @mobile-only{
							width: 50px;
							top: 10px;
						}
						i{
							font-size: 40px;
							color: #fff;
							@media @small{
								font-size: 25px;
							}
							@media @mobile-only{
								font-size: 25px;
							}
						}
						&.pre{
							text-align: right;
							left: 0px;
							@media @small{
								left: calc(50% - 80px);
							}
							@media @mobile-only{
								left: calc(50% - 80px);
							}
						}
						&.next{
							right: 0px;
							@media @small{
								right: calc(50% - 80px);
							}
							@media @mobile-only{
								right: calc(50% - 80px);
							}
						}
					}
					#attachment-media{
						width: calc(100% - 405px);
						height: 100%;
						display: inline-block;
						 vertical-align: top;
						#mediaContainer{
							width: 100%;
							height: 100%;
							display: flex;
							*{
								margin: auto !important;
								max-width: 100%;
								max-height: 100%;
								object-fit: contain;
							}
							&.media-item-document{
								iframe{
									width: 100%;
									height: 100%;
									}
							}
							@media @small{
								height: auto;
								margin-bottom: 20px;
								display: block;
								text-align: center;
								padding-top: 10px;
							}
							@media @mobile-only{
								height: auto;
								margin-bottom: 20px;
								display: block;
								text-align: center;
								padding-top: 10px;
							}
						}
						@media @large{
							width: calc(100% - 355px);
						}
						@media @medium{
							width: calc(100% - 305px);
						}
						@media @small{
							width: 100%;
							height: auto;
							background-color: #000;
						}
						@media @mobile-only{
							width: 100%;
							height: auto;
							background-color: #000;
						}
					}
					#attachment-info{
						width: 400px;
						display: inline-block;
						background-color: #fff;
						height: 100%;
						vertical-align: top;
						padding: 20px 22px 20px 20px;
						overflow: hidden;
						#attachment-title{
							font-size: 20px;
							color: #333;
							margin:0px 0px 10px 0px;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
						.attachment-info-container{
							font-size: 14px;
							.attachment-author-container{
								margin-bottom: 20px;
								.attachment-author-avatar{
									display: inline-block;
									width: 40px;
									vertical-align: top;
									margin-right: 10px;

									img {
										box-shadow: -4px 8px 9px -2px rgba(0,0,0,.16);
									}
								}

								.attachment-author-details{
									display: inline-block;
									width: calc(100% - 55px);
									.username{
										font-weight: 400;
										margin-right: 10px;
										a{
											color: #333 !important;
										}
									}
									.comment-user-role{
										text-transform: uppercase;
										color:#999;
										font-size: 12px;
									}
									.comment-timestamp{
										margin-top: 5px;
										font-size: 10px;
									}
								}
							}
							.attachment-data{
								.comment-text{
									color: #666;
									max-height: 200px;
									overflow: auto;
								}
								.actions-bar{
									margin: 10px 0px 30px 0px;
									.like-share-devider{
										margin:0px 10px;
									}
									.activity-like-button{
									cursor: pointer;
									}
									.activity-detail-liked{
										color: @communityButtonBackgroundColor;
									}
									.circle-button{
										color:#333;
										margin: 0px 3px;
									}

								}
							}
						  }
						#attachment-comments{
							.total-attachment-comment{
								text-transform: uppercase;
								color: #333;
								font-size: 16px;
								border-bottom: 2px solid #ddd;
								margin-bottom: 20px;
								padding-bottom: 10px;
								&.not-show{
									display: none;
								}
							}
							#attachment-comments-loop-container{
								overflow: auto;
								padding-top: 2px;
								max-height: calc(100% - 50px);
								@media @small{
									height: auto !important;
									max-height:none;
								}
								@media @mobile-only{
									height: auto !important;
									max-height:none;
								}
								.attachment-comment-container{
								padding-bottom: 10px;
								margin-bottom: 15px;
								border-bottom: 1px solid #ddd;
								font-size: 12px;
								&:last-child{
									border: none;
								}
								.attachment-comment-avatar{
									width: 40px;
									margin-right: 10px;
									display: inline-block;
									vertical-align: top;
								}
								.attachment-comment-detail{
									display: inline-block;
									width: calc(100% - 90px);
									.username{
										font-weight: 400;
										margin-right: 5px;
										a{
											color: #333 !important;
										}
									}
									.comment-timestamp-container{
										margin-top:3px;
										.pending-approval{
										color:@communityFontColor !important;
										background-color: @communityButtonBackgroundColor !important;
										padding:2px 5px;
										border-radius: 3px;
										font-size: 10px;
										box-shadow:  0px 1px 5px rgba(50, 50, 50, 0.75);
										margin-left: 3px;
										}
									}
									.attachment-comment-content{
										margin:5px 0px;
									}
									.attachment-comment-like{
										.comment-detail-liked{
											color:@communityButtonBackgroundColor;
										}
									}
								}
								.more-option-button-container{
										float: right;
										margin-right: 1px;
										button{
											box-shadow: none;
    										font-size: 20px;
											i{
												color: #757575;
											}
										}
									.dropdown-toggle::before{
											display:none;
										}
									.dropdown-toggle:focus {
										outline: 2px solid #005fcc !important;
									}
								}
							}

						  }
                          @media @small{
                            height: auto !important;
                          }
                          @media @mobile-only{
                            height: auto !important;
                          }
						}
						.attachment-new-comment-container{
							position: absolute;
							bottom: 40px;
							height: 75px;
							margin: 0px -20px;
							background-color: #eee;
							width: 400px;
							padding: 15px;
							.user-avatar{
								width: 40px;
								margin-right: 5px;
								display: inline-block;
								vertical-align: top;
							}
							#attachmentCommentMessage{
								width: calc(100% - 50px);
								display: inline-block;
								border-radius: 10px;
								background-color: #fff;
								padding: 10px;
								font-size: 15px;
								color: #666;
								resize: none;
								margin: 0px;
                                height: 100%;
							}
							@media @large{
								width: 350px;
							}
							@media @medium{
								width: 300px;
							}
							@media @small{
								width: 100% ;
								bottom: 0px;
								position: fixed;
							}
							@media @mobile-only{
								width: 100%;
								bottom: 0px;
								position: fixed;
							}
						  }
						@media @large{
							width: 350px;
						}
						@media @medium{
							width: 300px;
						}
						@media @small{
							width: 100%;
							height: auto;
						}
						@media @mobile-only{
							width: 100%;
							height: auto;
						}

						}
					}
				}
				#attachment-actions{
					position: absolute;
					bottom: 15px;
					margin-left: 20px;
					font-size: 12px;
					font-weight: 400;
					@media @small{
						bottom: auto;
						top: 12px;
    					font-size: 12px;
					}
					@media @mobile-only{
						bottom: auto;
						top: 12px;
    					font-size: 12px;
					}
					span{
						color: #fff;
						&#download-and-flag-devider{
							margin:0px 10px;
							@media @small{
								display: none;
							}
							@media @mobile-only{
								display: none;
							}
						}
						&.flagged{
							color: @fixed-accent-color;
						}
						&.attachment-flag{
							@media @small{
								display: block;
							}
							@media @mobile-only{
								display: block;
							}
						}


					}
				}

			}
		}
	}
#forum-detail-container{
	background-color: #fff;
	margin-top:20px;
	border-radius: 2px;
	padding: 50px !important;
	#module-id{
		display: none;
	}
	.title{
		width: 100%;
		font-size: 48px;
		margin-bottom: 20px;
		text-align: center;
		font-weight: 400;
	}
	.detail-description{
		margin-bottom: 30px;
	}
	label{
		&.error{
			color: @fixed-accent-color;
		}
	}
	#submitContent{

		.errors{
			color: @fixed-accent-color;
			display: none;
		}
		.title-container{
			margin-bottom: 30px;
			span{
				font-size: 20px;
			}
		}
		.description-container{
			margin-bottom: 30px;
			#cke_contentDescription{
				width: 100% !important;
				overflow: hidden;
			}
			span{
				font-size: 20px;
			}
		}
		.embed-text-wrapper{
			display: none;
			margin:20px 0px;
			height: 180px;
			.upload-wrapper-title{
				height: 25px;
				color:#999;
				font-size: 14px;
			}
			#commentEmbedFileUrls{
				padding:10px;
				border: 1px solid #d1d1d1 !important;
				height: calc(100% - 25px);
				background-color: #fff;
				font-weight: 300;
				resize: none;
			}
		}
		.dropzone-wrapper{
			display: none;
			min-height: 180px;
			margin:20px 0px;
			.upload-wrapper-title{
				height: 25px;
				color:#999;
				font-size: 14px;
			}
			#commentDropZone{
				border: 1px solid #d1d1d1 !important;
			}
		}
		.member-forum-submit-note{
			margin: 30px 0px;
		}
		.buttons{
			button{
				padding: 10px 20px;
				font-size: 12px;
				margin: 0px;

				&#cancelContentFormNew{
					float: right;
					background-color:#eee !important;
					color:#333!important;

				}
			}
		}
	}
}

#live-chat-detail-container{
	background-color: #fff;
    margin-top: 20px;
    border-radius: 2px;
    padding: 50px !important;
	.title{
		width: 100%;
		font-size: 48px;
		margin-bottom: 20px;
		text-align: center;
		font-weight: 400;
	}
	.livechat-landing-container{
		width: 100%;
		background-color: #eee;
		border: 1px solid #ccc;
		padding: 20px;
	}
	.live-chat-media-container{
		text-align: center;
		margin: 20px 0px;
		.live-chat-media{
			max-width: 100%;
			overflow: hidden;
			*{
				max-width: 100%;
			}
		}
	}
	.live-chat-status-left{
		width: calc(50% - 2px);
		display: inline-block;
		@media @medium{
			width: 100%
		}
		@media @small{
			width: 100%
		}
		@media @mobile-only{
			width: 100%
		}
		.Live-chat-time-status{
			font-weight: 500;
			span{
				text-transform: uppercase;
			}
			#live-now{
				color: @fixed-accent-color;
				margin-left: 10px;
			}
		}
		.attendance-list{
			margin-top: 5px;
			.attendance-stats{
				margin-right: 7px;
				&:first-child{
					font-weight: 400;
					margin-right:2px;
				}
			}
		}
	}
	.live-chat-status-right{
		vertical-align: top;
		width: calc(50% - 2px);
		display: inline-block;
		text-align: right;
		@media @medium{
			width: 100%;
			margin-top: 20px;
			text-align: left;
		}
		@media @small{
			width: 100%;
			margin-top: 20px;
			text-align: left;
		}
		@media @mobile-only{
			width: 100%;
			margin-top: 20px;
			text-align: left;
		}
		#live-chat-to-rsvp{
			.form-inline{
				display: inline-flex;
			}
		}
		#live-chat-rsvp-ed{
			font-weight: 400;
			a{
				color: @communityColor !important;
			}
		}
		#live-chat-not-available-mobile{
			text-align: center;
			color: #333;
			font-weight: 400;
		}
		.hide{
			display: none;
		}
		.btn{
			margin: 5px 10px;
    		background-color: #eee !important;
    		color: #333!important;
			padding: 10px 20px;
			font-size: 12px;
			&.accent-button{
				background-color:@communityButtonBackgroundColor !important;
				color:@communityFontColor !important;
			}
		}
	}

}
a.cke_dialog_tab {
	min-width: 75px !important;
}
#upload-link-add-modal{
	z-index: 99999999999999999999;
}
#privacy-accept-modal{
	.modal-body{
		max-height: 500px;
		overflow: auto;
	}
	.modal-footer{
		justify-content: center;
		#accept-gdpr{
			background-color: @communityColor !important;
			color: #fff !important;
			margin-right: 30px;
			padding: 10px 20px;
			font-size: 12px;
		}
		#skip-gdpr{
			background-color:#eee !important;
			color:#333!important;
			padding: 10px 20px;
			font-size: 12px;
		}
	}
}
#internal-page-content-container{
	background-color: #fff;
	margin-top: 20px;
	border-radius: 2px;
	padding: 50px !important;
	position: relative;
	top: 20px;
}
#member-forum-detail-container{
	background-color: #fff;
	margin-top:20px;
	border-radius: 2px;
	padding: 50px 50px 20px 50px !important;
	#descriptionWrapper{
		margin-bottom: 50px;
	}
	.title{
		width: 100%;
		font-size: 48px;
		margin-bottom: 20px;
		text-align: center;
		font-weight: 400;
	}
	.author-time{
		font-size: 14px;
		text-align: center;
		margin-bottom: 30px;
		strong{
			font-weight: 700;
		}
		a{
			color: inherit !important;
		}
		.time{
			@media @small{
				display: block;
			}
			@media @mobile-only{
				display: block;
			}
		}
	}
	.detail-container{
		margin-bottom: 30px;
	}
	#member-module-add-content{
		border-radius: 2px;
		text-transform: uppercase;
		font-size: 14px;
		box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
		border:none;
		&.close{
			box-shadow: none !important;
		}
		&.no-shadow{
			box-shadow: none;
		}
        &:hover{
          color:  @communityFontColor !important;
        }
	}
	.posts-container {
		margin:30px 0px 0px 0px;
		.posts-container-top-row {
			height: 75px;
			@media @small {
				height: 145px;

			}
			@media @mobile-only {
				height: 145px;
			}
			.total-posts {
				float: left;
				padding-top: 20px;
				font-size: 20px;
				margin-bottom: 20px;
				.hidden-for-members {
					visibility: hidden;
					margin-right: -25px;
				}
			}
			.posts-sort {
				float: right;
				.sort-by {
					display: inline-block;
					vertical-align: top;
					padding-top: 20px;
				}
				.posts-sort-select {
					display: inline-block;
					margin-left: 20px;
					color: #666 !important;
					.caret, input {
						color: inherit;
					}
					.dropdown-content li > a, .dropdown-content li > span {
						color: @communityColor;
					}
                    .dropdown-content li:hover{
                      color:@communityFontColor !important;
                      background-color: @communityButtonBackgroundColor !important;
                      span{
                        color:@communityFontColor !important;
                      }
                    }
				}
				@media @small {
					float: left;
					width: 100%;
					margin-bottom: 20px;

				}
				@media @mobile-only {
					float: left;
					width: 100%;
					margin-bottom: 20px;
				}
			}
		}
	}
}
#member-forum-post-container{
	padding:50px !important;
	@media @small{
		padding:20px 0px !important;
	}
	@media @mobile-only{
		padding:20px 0px !important;
	}
	.member-post-card{
		width: 100%;
		background-color: #fff;
		margin-bottom: 30px;
		padding: 0px;
		box-shadow:0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
		height: 150px;
		position: relative;
		.badge{
			position: absolute;
			top: 7px;
			right: 10px;
			z-index: 1;
			font-weight: 500;
			text-transform: uppercase;
			background-color: @communityButtonBackgroundColor;
			color: @communityFontColor !important;
			i{
				&.fa-circle{
					font-size: 7px;
					position: relative;
					bottom: 2px;
				}

			}
		}
		&:last-child{
			margin-bottom: 0px;
		}
		.pending-approval-container{
			.pending-approval-text-container{
				display: none;
			}
		}
		&.post-needs-approvals{
			.pending-approval-container{
				border:1px solid @communityButtonBackgroundColor !important;
				margin: 0px;
				padding: 0px;
				.pending-approval-text-container{
					display: block;
					text-align: center;
					position: relative;
					bottom: 15px;
					height: 0px;
					span{
						color:@communityFontColor !important;
						background-color: @communityButtonBackgroundColor !important;
						padding:4px 15px;
						border-radius: 3px;
						font-size: 14px;
						box-shadow:  0px 1px 5px rgba(50, 50, 50, 0.75)
					}
				}
				.post-card-content{
					.post-card-info{
						height: 149px;
					}
				}
			}

		}
		.post-card-content{
			display: flex;
			@media @small{
				display: block;
			}
			@media @mobile-only{
				display: block;
			}
			.post-card-info{
				width: 250px;
				background-color: #f5f5f5;
				padding: 20px;
				height: 150px;
				.post-card-user-info{
					margin-bottom: 20px;
					display: flex;
					width: 210px;
					.post-card-info-avatar{
						width: 60px;
						height: 60px;
						margin-right: 20px;
					}
					.post-card-info-content{
						width: 130px;
						overflow: hidden;
						.username{
							margin-bottom: 5px;
							width: 100%;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;

							a:not(.nav-link):not(.btn):not(.dropdown-item) {
								color: #000 !important;
							}
						}
						.user-role{
							color: #999;
							font-size: 12px;
							margin-bottom:5px;

						}
						.date{
							font-size:12px;
							color: #333;
						}
					}
					@media @small{
						display: inline-flex;
						margin-bottom: 0px;
					}
					@media @mobile-only{
						display: inline-flex;
						margin-bottom: 0px;
					}
				}
				.post-card-metrics{
					font-size: 14px;
					text-align: center;
					.metric{
						display: inline-block;
						margin:0px 10px;
						.post-card-new-notification{
							color: @fixed-accent-color;
							font-size: 5px;
							font-weight: 900;
							position: relative;
							bottom: 8px;
							right: 2px;
							width: 0px;
						}
					}
					@media @small{
						float: right;
						margin-top: 50px;
					}
					@media @mobile-only{
						float: none;
						margin-top: 0;
						text-align: left;
					}
				}
				@media @small{
					width: 100%;
					height: 100px;
				}
				@media @mobile-only{
					width: 100%;
					height: 100px;
				}
			}
			.post-card-message-content{
				padding:20px 20px 20px 30px;
				width: 100%;
				height: 100%;
				.post-card-title{
					font-size: 20px;
					font-weight: 400;
					margin-bottom: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.post-card-text{
					color: #666;
					height: 50px;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					width: 100%;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					@media @small{
						height: auto;
						-webkit-line-clamp: 4;
					}
					@media @mobile-only{
						height: auto;
						-webkit-line-clamp: 4;
					}
				}
			}

			.view-link {
				font-size: 14px;

				@media @mobile-only {
					margin-top: 10px;
				}
			}
		}
		@media @small{
			height: auto;
		}
		@media @mobile-only{
          width:calc(100% - 14px);
          margin:0px 7px 20px 7px;
          border-radius: 12px;
          display: block;
          overflow: hidden;
		  height: auto;
		}
	}
}
.points-rewards-page-container{
	padding-top: 30px;

	.community-tabs-container{
		margin-bottom: 30px;

		.dropdown-nav {
			#points-reward-collapse-menu-button {
				width: 100%;
				margin: 0px;
				background-color: @communityButtonBackgroundColor;
				color: @communityFontColor;
				text-shadow: none;
				text-align: left;
				&::after{
					float: right;
					margin-top: 7px;
					font-size:20px;
				}
			}
			#points-reward-collapse-menu{
				width: 100%;
				.dropdown-item.active{
					background-color: @communityButtonBackgroundColor;
					color: @communityFontColor !important;
				}
			}
		}

	}
}
#points-rewards-container{
	.point-rewards-not-activated{
		width:100%;
		background-color: #fff;
		padding:30px;
		.point-rewards-not-activated-content{
			background-color: #eee;
			border: 1px solid #ccc;
			text-align: center;
			color: #333;
			padding: 20px;
		}
	}
	.points-rewards-top{
		display: flex;
		width: 100%;
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #dadce0;
		.point-rewards-available-left{
			width: 400px;
			background-color: #f5f5f5;
			padding: 40px;
			display: block;
			align-items: center;
			text-align: center;
			justify-content: center;
			.available-points-container{
				font-size: 22px;
				#available-points {
					font-size: 26px;
					font-weight: 400;
					margin-bottom: 10px;
				}
			}
			.available-points-left-header {
				font-size:22px;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
			}
			@media @small{
				width: 100%;
			}
			@media @mobile-only{
				width: 100%;
			}
		}
		.points-rewards-available-right{
			padding:40px;
			width: 100%;
			background-color: #fff;
			align-items: center;
			justify-content: center;
			display: flex;
		}
		@media @small{
			display: block;
		}
		@media @mobile-only{
			display: block;
		}
	}
	.points-rewards-bottom{
		width: 100%;
		margin-top: 30px;
		background-color: #fff;
		padding: 40px;
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #dadce0;
		.title{
			font-size:22px;
			margin-bottom: 10px;
		}
		.card-deck{
			margin-top: 20px;
			@media @mobile-only{
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-flow: row wrap;
				flex-flow: row wrap;
			}
			.card{
				min-width: 230px;
				max-width: 230px;
				height: 360px;
				margin: 10px;
				padding: 0px;
				-webkit-flex: 1 1 230px;
				&:empty{
					height: 0px;
				}
				.badge{
					font-size: 20px;
				}
				.overlay{
					height: 230px;
					padding:40px;
					img{
						height: 100%;
						width: 100%;
					}
					@media @small{
						height: 190px;
					}
					@media @mobile-only{
						height: 140px;
					}
				}
				.card-title{
					height: 50px;
				}
				.card-body{
                  .card-detail-container {
                     background-color: #f6f6f6;
                   }
					height: 130px;
					background-color: #f6f6f6;
					.card-detail-container {
						.points-cost {
							font-weight: 500;
							font-size: 14px;
							float: left;
							@media @mobile-only{
								width: 100%;
							}
						}
					}
					.award-value{
						float: right;
						@media @mobile-only{
							float: left;
							width: 100%;
						}
					}
					@media @small{
						padding: 10px;
					}
					@media @mobile-only{
						padding: 10px;
						height: 180px;
						text-align: center;
					}
				}
				@media @small{
					min-width: 190px;
					max-width: 190px;
					height: 320px;
				}
				@media @mobile-only{
					min-width: 140px;
					max-width: 140px;
					height: 320px;
				}
			}
		}
	}
}
#rewards-detail-container{
	width: 100%;
	margin-top: 170px;
	background-color: #fff;
	padding: 40px;
	.title{
		font-size:22px;
		margin-bottom: 30px;
		@media @mobile-only{
			padding: 40px 0px 0px 40px;
			margin-bottom: 0px;
		}
	}
	.content{
		display: flex;
		@media @small{
			display: block;
			position: relative;
			padding-bottom: 30px;
		}
		@media @mobile-only{
			display: block;
			position: relative;
			padding: 40px;
		}
		.reward-detail-media-container{
			width: 230px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.reward-detail-media{
				padding: 40px;
				border:1px solid #ccc;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				border-radius: 2px;
				position: relative;
				overflow: hidden;
				.badge{
					font-size: 20px;
					background-color: @communityButtonBackgroundColor;
					color: @communityFontColor !important;
					position: absolute;
					top: 7px;
					left: 10px;
					z-index: 1;
					font-weight: 500;
					text-transform: uppercase;
				}
				img{
					width: 100%;
					height: auto;
				}
			}
			.reward-detail-go-back{
				@media @small{
					position: absolute;
					bottom: 0px;
				}
				@media @mobile-only{
					position: absolute;
					bottom: 10px;
				}
			}
			@media @small{
				width: 180px;
				margin-bottom: 20px;
			}
			@media @mobile-only{
				width: 180px;
				margin-bottom: 20px;
			}
		}
		.reward-detail-info{
			margin-left: 30px;
			width: 100%;
			@media @small{
				margin: 0px 0px 20px 0px;
			}
			@media @mobile-only{
				margin: 0px 0px 20px 0px;
			}
			.redemption-not-null{
				margin-bottom:20px;
				.badge{
					background-color: @communityButtonBackgroundColor;
					color: @communityFontColor !important;
					font-size: 14px;
					font-weight: normal;
					padding: 10px;
				}
			}
			.reward-name{
				font-size: 18px;
				font-weight: 400;
				margin-bottom: 10px;
			}
			.description{
				margin-bottom: 20px;
			}
			.info{
				margin-bottom: 20px;
				.table{
					tbody{
						tr{
							td{
								border: none;
								padding-left: 0px;
								padding-right: 0px;
								vertical-align: middle;
								&:last-child{
									padding-left: 20px;
									font-weight: 400;
									width: 100%;
								}
								&:first-child{
									white-space: nowrap;
								}
							}
						}
					}
				}
			}
			.redeem-button-container{
				margin-bottom: 20px;
				button{
					background-color: @communityButtonBackgroundColor;
					color: @communityFontColor !important;
					margin:0px;
					text-shadow: none;
				}
				.details{
					color: #999;
					font-size: 12px;
					margin:10px 0px;
				}
			}
			.history{
				background-color: #f6f6f6;
				padding:20px;
				.history-title{
					font-size: 16px;
					margin-bottom: 15px;
				}
				.history-status{
					font-size: 16px;
					margin-bottom: 15px;
					font-weight: 400;
				}
				.history-item{
					margin-bottom: 5px;
				}
			}
		}
	}
}

#reward-detail-verify-mobile-number-modal {
	button:hover {
		color: @communityFontColor !important;
	}
	.modal-content {
		padding-bottom: 15px;
	}

	.modal-body {
		color: #495057;
	}
	.btn {
		background-color: @communityButtonBackgroundColor;
	}
	.modal-title,
	.btn-link {
		color:@communityColor !important;
	}

	a {
		text-decoration: underline;
	}
}

#invalid-reward-modal,#confirm-remove-avatar-modal{
	.modal-header{
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		background-color:@communityButtonBackgroundColor !important;
		color:@communityFontColor !important;
		i,button{
			color:@communityFontColor !important;
		}
	}
	.button-container{
		width: 100%;
		text-align: center;
		margin:20px 0px 10px 0px;
		button{
			margin: 0px;
			padding:10px 50px;
			background-color: @communityButtonBackgroundColor !important;
			color:  @communityFontColor !important;
			text-shadow: none;
		}
	}
}
.points-rewards-history-container{
	.point-history-no-content-container{
		width: 100%;
		background-color: #fff;
		padding: 30px;
		margin-top: 50px;
		.no-content-comment{
			background-color: #eee;
			border: 1px solid #ccc;
			text-align: center;
			color: #333;
			padding: 20px;
		}
	}
	.history-content{
		width: 100%;
		margin-top: 30px;
		background-color: #fff;
		padding: 40px;
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #dadce0;
		@media @small{
			padding: 20px;
		}
		@media @mobile-only{
			padding: 20px;
		}
		.metrics-container{
			display: flex;
			margin-bottom: 30px;
			justify-content: space-between;
			text-align: center;
			padding: 0px 150px;
			@media @large{
				padding:0px 50px;
			}
			@media @medium{
				padding:0px;
			}
			@media @small{
				display: block;
				padding:0px
			}
			@media @mobile-only{
				display: block;
				padding:0px
			}
			.metric-item{
				margin: 0px 10px;
				.value{
					font-size: 30px;
					font-weight: 400;
				}
				.label{
					color: #212529;
					text-transform: uppercase;
					font-size: 14px;
				}
				@media @small{
					margin-bottom: 20px;
				}
				@media @mobile-only{
					margin-bottom: 20px;
				}
			}
		}
		.history-table-container{
          display: none;
			@media @mobile-only{
				margin: auto;
				width: calc(100% - 20px);
			}
			a:not(.resend-link):not(.show-detail){
				color: initial !important;
			}
			thead{
				tr{
					border: none;
					background-color: #f5f5f5;

					th{
						font-family: Roboto;
						border: none;
						vertical-align: middle;
						min-width: 120px;
						padding-right: 1.5rem;
						position: relative;
						i{
							float: right;
							position: absolute;
							right: 10px;
							top: calc(50% - 7px);
						}
						&.sorting{
							.fa-sort{
								display: inline-block;
							}
							.fa-sort-up{
								display: none;
							}
							.fa-sort-down{
								display: none;
							}
						}
						&.sorting_asc{
							.fa-sort{
								display: none;
							}
							.fa-sort-up{
								display: none;
							}
							.fa-sort-down{
								display: inline-block;
							}
						}
						&.sorting_desc{
							.fa-sort{
								display: none;
							}
							.fa-sort-up{
								display: inline-block;
							}
							.fa-sort-down{
								display: none;
							}
						}

					}
				}
			}
			tbody{
				tr{
					padding: 0px 20px;
					&.negative-point{
						color: #999;
					}
					&:first-child{
						td{
							border-top: none;
						}
					}
					td{
						vertical-align: middle;
						.reward-img-name{
							font-weight: 400;
							img{
								width: 30px;
								height: 30px;
								margin-right: 15px;
							}
						}
					}
				}
			}
		}
		.small-reward-history{
			.title{
				height: 45px;
				background-color: #f5f5f5;
				font-weight: 400;
				margin-bottom: 10px;
				padding: 10px 10px;
			}
			.content{
				display: flex;
				padding:0px 10px 10px 10px;
				margin-bottom:20px;
				border-bottom:2px solid #f5f5f5;
				&:last-child{
					margin-bottom:0px;
					border-bottom:none;
				}
				.reward-img{
					width: 50px;
					margin-right: 10px;
					img{
						width: 40px;
						height: 40px;
					}
				}
				.info{
					.reward-img-name{
						color: initial !important;
						font-weight: 400;
						margin-bottom: 20px;
						display: block;
					}
					.small-reward-history-table{
						tbody{
							tr{
								td{
									border: none;
									padding:8px;
									vertical-align: top;
									&:last-child{
										font-weight: 400;
									}
								}
							}
						}
					}
					.resend-link{
						margin-top: 10px;
						display: block;
					}
				}
			}
		}
		#rewards-history-table_wrapper{
			@media @small{
				display: none;
			}
			@media @mobile-only{
				display: none;
			}
		}
	}
}
#point-detail-modal{
  .close{
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 1;
  }
  .message{
     word-break: break-word;
    }
}

#rewards-address-container{
	.address-content,
	.mobile-content {
		width: 100%;
		margin-top: 30px;
		background-color: #fff;
		padding: 40px;
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #dadce0;
		@media @small{
			padding: 20px;
		}
		@media @mobile-only{
			padding: 20px;
		}
		.address-description{
			width: 100%;
			margin-bottom: 30px;
		}
	}
	#user-userContact-stateCode-container{
		display: none;
	}
	.mobile-content {
		.mobile-content-phone-container {
			margin-top: 23px;
		}
	}
}

#test-project-tickets-page {
	border-radius: 8px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

	#issue-tickets-table-jsp-container {
		#project-name-header {
			padding-top: 25px !important;
		}

		.save {
			.btn !important;

			min-width: 146px;
			min-height: 38px;
			cursor: pointer;
			text-shadow: none;
			background-color:@communityButtonBackgroundColor !important;
			color: @communityFontColor !important;
			box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		}

		.jsShowDetailsSidebarBtn {
			color: @communityColor;
		}
	}
}

.form-container{
	.row{
		margin: 0px;
	}
	.md-form{
		padding: 0px;
        margin-bottom: 50px;
		input:-webkit-autofill,
		input:-webkit-autofill:hover,
		input:-webkit-autofill:focus,
		input:-webkit-autofill:active {
			transition: background-color 5000s ease-in-out 0s;
			-webkit-background-size: 5px;
		}
		input[type=password]:focus:not([readonly]),input[type=text]:focus:not([readonly]),input[type=email]:focus:not([readonly]),input[type=tel]:focus:not([readonly]){
			border-bottom: 1px solid @communityColor;
			box-shadow: 0 1px 0 0 @communityColor;
		}
		input[type=checkbox]+label:before,input[type=radio]+label:before{
			border-color:@communityColor;
		}
		input[type=radio]:checked+label:after{
			border-color: @communityColor;
			background-color: @communityColor;
		}
		input[type=checkbox]:checked+label:before{
			border-color: transparent @communityColor @communityColor transparent;
		}
        .show-pass{
          position: absolute;
          right: 10px;
          top: 18px;
          color: #bdbdbd;
          cursor:pointer;
          display: none;
        }
        .hide-pass{
          position: absolute;
          right: 10px;
          top: 30px;
          color: @communityColor;
          cursor:pointer;
          display: none;
        }
		.switch{
			input[type=checkbox]:checked+.lever{
				background: rgba(red(@communityColor), green(@communityColor), blue(@communityColor), .4);
			}
			input[type=checkbox]:checked+.lever:after{
				background-color: @communityColor;
			}
		}
		.form-check{
			padding-left: 0px;
			margin-bottom: 20px;
		}

		.required{
			color: @fixed-accent-color;
		}
		.subtext{
			font-size: 10px;
		}
		.select-dropdown{
			li{
				color:#5f6368 !important;
				span{
					color:#5f6368 !important;
				}
				&.selected{
					background-color:@communityButtonBackgroundColor !important;
					color:@communityFontColor !important;
					span{
						color:@communityFontColor !important;
					}
				}
				&:hover{
					background-color:@communityButtonBackgroundColor !important;
					color:@communityFontColor !important;
					span{
						color:@communityFontColor !important;
					}
				}
			}
		}
        small.form-text{
         &.error{
            color:@form-error-color;
          }
        }
	}
	.form-buttons{
		border-top: 1px solid #ddd;
		margin: 10px 0px;
		padding: 20px 0px;
      &.border-bottom{
        border-top: none;
        margin: 0px 0px 50px 0px;
        border-bottom:1px solid #999 !important;
        padding-bottom: 30px;
      }
		button{
			margin: 0px;
			color: @communityFontColor !important;
			background-color: @communityButtonBackgroundColor !important;
			padding: 10px 25px;
			text-shadow: none;
		}
	}
}
form{
  &.was-validated{
      .radio-check{
        &.invalid{
          .required-question{
            visibility: visible !important;
          }
        }
      }
    .invalid-select{
      border-color: @form-error-color;
    }
    .valid-select{
      border-color: @form-success-color
    }
  	.form-check-input:valid~.form-check-label{
	  color: #757575 !important;
  	}
  }
}
.dataTables_wrapper{
	.select-wrapper{
		li{
			color:@communityColor !important;
			span{
				color:@communityColor !important;
			}
			&.selected,&:hover{
				background-color:@communityButtonBackgroundColor !important;
				color:@communityFontColor !important;
				span{
					color:@communityFontColor !important;
				}
			}
		}
	}
	.md-form{
		input[type=search]:focus:not([readonly]){
			border-bottom: 1px solid @communityColor;
			box-shadow: 0 1px 0 0 @communityColor;
		}
	}
	.pagination{
		.paginate_button:not(.previous):not(.next){
			&.active{
				a {
					background-color: @communityButtonBackgroundColor !important;
                  color:@communityFontColor !important;
				}
			}

		}
	}
}
.account-setting-container{
	padding-top: 30px;
	.community-tabs-container{
		margin-bottom: 30px;
		.nav-tabs{
			margin:0px;
			background-color: @communityButtonBackgroundColor;
			color: @communityFontColor;
			.nav-item{
				color: @communityFontColor !important;
				.nav-link{
					color: @communityFontColor !important;
				}
			}
		}
		.dropdown-nav {
			#account-settings-collapse-menu-button {
				width: 100%;
				margin: 0px;
				background-color: @communityButtonBackgroundColor;
				color: @communityFontColor;
				text-shadow: none;
				text-align: left;
				&::after{
					float: right;
					margin-top: 7px;
					font-size:20px;
				}
			}
			#account-setting-collapse-menu{
				width: 100%;
				.dropdown-item.active{
					background-color: @communityButtonBackgroundColor;
					color: @communityFontColor !important;
				}
			}
		}

	}
	.container{
		background-color: #fff;
		.account-setting-description-container {
			margin: 0px 0px 20px 0px;
			padding: 30px 30px 10px 30px;
			width: 100%;
			.title {
				font-size: 18px;
				text-transform: uppercase;
				border-bottom: 1px solid #d5d5d5;
				padding-bottom: 10px;
				margin-bottom: 20px;
			}
		}
	}
}
#account-question-container {
	.container {
		.page-title{
			font-size: 26px;
			padding:0px 30px;
		}
		.page-description{
			padding:20px 30px;
		}
		.user-avatar-container {
			text-align: center;
			padding: 30px;
			#profileAvatar {
              width: 120px;
              height: 120px;
			}
          #signup-profileAvatar{
            width: 120px;
            height: 120px;
            border-radius: 100px;
            background-color: transparent;
            border: 4px solid #AFAFAF;
            margin: auto;
            i{
              color: #AFAFAF;
              font-size: 60px;
              padding-top: 20px;
            }
          }
			.sign-up-container{
				width: 120px;
				height: 120px;
				position: relative;
				overflow: hidden;
				display: none;
				border-radius: 100px;
				margin: auto;
				#sign-up-preview{
					position: relative;
					object-fit: cover;
					max-width: none;
				}
			}
			.button-container {
				margin: 20px 0px 0px 0px;

				button {
					padding: 10px 20px;
					text-shadow: none;
					&#avatarSelectButton {
						background-color: @communityButtonBackgroundColor !important;
						color: @communityFontColor !important;
					}
					&#avatarRemoveButton {
						background-color: @communityFontColor !important;
						color: @communityButtonBackgroundColor !important;
                        display:none;
					}
				}
			}
		}
        .associated-contact-container{
          padding: 20px;
          font-size: 18px;
          .associated-contact-edit{
            background-color: @communityButtonBackgroundColor;
            color: @communityFontColor;
            padding: 5px 10px;
            margin-left: 20px;
          }
          .associated-item{
            margin: 10px 0px;
            font-size: 14px;
            font-weight: 400;
            .item-title{
              font-weight: 300;
            }
          }
        }
		.edit-profile-form {
			padding: 30px;
			.form-container {
				.md-form {
					margin-right: 8%;
					display: inline-flex;
                    small.form-text{
                      bottom: -5px;
                      position: absolute;
					  width: 100%;
					  left:0;
                    }
					.subtext {
						position: absolute;
						color: @communityColor;
						right: 0;
						top: -15px;
					}
					.birthday-select-container {
						margin-right: 20px;
						&#birthYear-container {
							margin-right: 0px;
						}
						&#birthMonth-container {
							min-width: 100px;
						}
					}
					&.phone-number-container{
						.mobileCountryCode{
							position: relative;
							top: 7px;
							margin-right: 20px;
							min-width: 300px;
						}
						.phone-number{
							width: 100%;
						}
						.verification-button-container{
							position: absolute;
							top: -15px;
							right: 0px;
							#verify-phone-number{
								background-color: @communityButtonBackgroundColor;
								color: @communityFontColor;
								display: none;
							}
							#verified{
								color: green;
								font-weight: bold;
								font-size: 12px;
								display: none;
							}

						}
					}
				}
				#term-and-condition-container {
					display: block;
					.description {
						max-height: 200px;
						overflow: auto;
						margin-bottom: 20px;
						.title {
							font-size: 18px;
							margin-bottom: 20px;
						}
					}
					.description-noscroll {
						max-height: 200px;
						margin-bottom: 20px;
						.title {
							font-size: 18px;
							margin-bottom: 20px;
						}
					}
				}
			}

			.form-buttons {
				border-top: 1px solid #ddd;
				margin: 10px 0px;
				padding: 20px 0px;
				.btn {
					margin: 0px;
					color: @communityFontColor !important;
					background-color: @communityButtonBackgroundColor !important;
					padding: 10px 25px;
					text-shadow: none;
				}
				#systemTerminate {
					float: right;
					color: @communityColor !important;
					border: none;
					-webkit-box-shadow: none;
					-moz-box-shadow: none;
					box-shadow: none;
					margin-top: 10px;
				}
			}
		}
	}
}
#account-profile-container{
	.container{
		#editProfileForm{
			padding: 30px;
			.form-container {
				.md-form {
					margin-bottom: 40px;
                  .radio-check{
                    .required-question{
                      font-size:10px;
                      color: @form-error-color;
                      visibility: hidden;
                      font-weight: 400;
                    }
                  }
					.table-container{
						width: 100%;
						overflow: auto;
						.grid-question{
							thead{
								th{
									padding:10px;
									text-align: center;
									&:last-child{
										padding:10px 20px 10px 10px;
									}
								}
							}
							tbody{
								tr{
									&:nth-child(odd){
										background-color:#efefef;
										td{
											&:first-child{
												border-right: 1px solid #fff;
											}
										}
									}
									td{
										padding:10px;
										&:first-child{
											padding:10px 20px;
											border-right: 1px solid #efefef;
										}
										&:last-child{
											padding:10px 20px 10px 10px;
										}
									}
								}
								.form-check{
									text-align: center;
									label{
										padding-left:20px;
									}
								}
							}
						}
					}
			  		label{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 100%;
					}
				}
			}
			.form-buttons {
				border-top: 1px solid #ddd;
				margin: 10px 0px;
				padding: 20px 0px;
				.btn {
					margin: 0px;
					color: @communityFontColor !important;
					background-color: @communityButtonBackgroundColor !important;
					padding: 10px 25px;
					text-shadow: none;
				}

			}
		}
	}
}
#phone-verification-container {
	.container {
		.page-title{
			font-size: 26px;
			padding:0px 30px;
		}
		.page-description{
			padding:20px 30px;
		}
		.form-container {
			padding:0px 40px 80px 40px;
			.md-form {
				margin-right: 8%;
				display: inline-flex;
				small.form-text{
					bottom: -5px;
					position: absolute;
					width: 100%;
					left:0;
				}

				&.phone-number-container{
					align-items: center;

					.mobileCountryCode{
						position: relative;
						top: 7px;
						margin-right: 20px;
						min-width: 300px;
					}
					.phone-number{
						width: 100%;
					}
					#mobileDigits {
						margin-bottom: 0;
					}
					.verification-button-container{
						position: relative;
						min-width: 130px;
						margin-left:10px;
						#verify-phone-number{
							background-color: @communityButtonBackgroundColor;
							color: @communityFontColor;
							display: none;
						}
						#verified{
							color: green;
							font-weight: bold;
							font-size: 12px;
							display: none;
						}
						#resend-verification-code{
							background-color: transparent;
							color: @communityButtonBackgroundColor;
							display: none;
							box-shadow: none;
							padding:10px 0px;
						}
						@media @small{
							min-width: 0px;
							margin-right: 10px;
						}
						@media @mobile-only{
							min-width: 0px;
							margin-right: 10px;
						}
					}
				}
				@media @medium{
					margin-right: 0px;
				}
				@media @small{
					margin-right: 0px;
				}
				@media @mobile-only{
					margin-right: 0px;
				}
			}
			.verification-code-container{
				display: none;
				.phone-verification-input-container{
					margin-top: 25px;
					margin-bottom: 1.5rem;
				}
				.button-container{
					#submit-phone{
						background-color: @communityButtonBackgroundColor;
						color: @communityFontColor;
						padding:10px 20px;
					}
				}
			}
			.form-buttons {
				border-top: 1px solid #ddd;
				margin: 10px 0px;
				padding: 20px 0px;
				.btn {
					margin: 0px;
					color: @communityFontColor !important;
					background-color: @communityButtonBackgroundColor !important;
					padding: 10px 25px;
					text-shadow: none;
				}

			}
		}
	}
}
#add-new-avatar-modal{
	.modal-header{
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		background-color:@communityButtonBackgroundColor !important;
		color:@communityFontColor !important;
		i,button{
			color:@communityFontColor !important;
		}
	}
	.modal-body{
		text-align: center;
        #avatarPreview{
          position: relative;
          #avatarPreviewImage{
            object-fit: contain;
          }
        }
		#nofile-chosen{
			font-size: 14px;
			margin-bottom: 10px;
		}
		#upload-file{
			background-color:@communityButtonBackgroundColor;
			color:@communityFontColor;
		}
		#remove-file{
			color: @communityColor;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			display: none;
		}
      #avatarFile{
        display: none;
      }
	}
	.button-container{
		width: 100%;
		text-align: center;
		margin:20px 0px 10px 0px;
		button{
			margin: 0px;
			padding:10px 50px;
			background-color: @communityButtonBackgroundColor !important;
			color:  @communityFontColor !important;
			text-shadow: none;
		}
	}
}
#communication-settings-container{
	#subscriptionForm{
		padding:40px;

		.settings-option{
			display: flex;
			margin-bottom: 30px;

			.action{
				min-width: 150px;
				margin-right: 50px;
				text-align: center;

				.select-wrapper {
					.caret {
						pointer-events: none;
					}

					input.select-dropdown{
					  .ellipsis();
					  box-sizing: border-box;
					  padding-right: 17px;
					  position: initial;
					  width: calc(100%);
					}
				}

				.toggleLabel{
					font-size: 12px;
					font-weight: 500;
                  &.enabled{
                    display: none;
                  }
                  &.disabled{
                    display: block;
                  }
				}
				.switch{
					position: relative;
					left: 35px;
					@media @medium{
						left: 15px;
					}
					@media @small{
						left: 0px;
					}
					@media @mobile-only{
						left: 0px;
					}
				}
				@media @medium{
					min-width: 100px;
					margin-right: 50px;
				}
				@media @small{
					min-width: 75px;
					margin-right: 25px;
				}
				@media @mobile-only{
					min-width: 75px;
					margin-right: 25px;
				}
              &.enabled{
                .toggleLabel{
                  &.enabled{
                    display: block;
                  }
                  &.disabled{
                    display: none;
                  }
                }
              }
			}
			.content{
				.title{
					font-size:18px;
					margin-bottom: 10px;
				}
			}
		}
		.settings-radio-container{
			margin-left: 200px;
          &.not-show{
            display: none;
          }
			.settings-radio {
				margin-bottom: 10px;
				.settings-radio-option{
					margin-bottom: 10px;
					.form-check-label{
						font-weight: 400;
					}
				}
				.description {
					margin-left: 35px;
					font-size: 14px;
				}
			}
			@media @medium{
				margin-left: 150px;
			}
			@media @small{
				margin-left: 100px;
			}
			@media @mobile-only{
				margin-left: 100px;
			}
		}
	}
}

#update-account-setting-container{
	#updatePasswordForm{
		padding:0px 40px 40px 40px;
	}
    #updateEmailForm{
      padding:0px 40px 40px 40px;
    }
    #updateMobileForm{
      padding:0px 40px 40px 40px;
        .md-form {
          margin-right: 8%;
          display: inline-flex;
          small.form-text{
            bottom: -5px;
            position: absolute;
            width: 100%;
            left:0;
          }

          &.phone-number-container{
            .mobileCountryCode{
              position: relative;
              top: 7px;
              margin-right: 20px;
              min-width: 300px;
            }
            .phone-number{
              width: 100%;
            }
            .verification-button-container{
              position: relative;
              top: 15px;
              min-width: 130px;
              margin-left:10px;
              #verify-phone-number{
                background-color: @communityButtonBackgroundColor;
                color: @communityFontColor;
                display: none;
              }
              #verified{
                color: green;
                font-weight: bold;
                font-size: 12px;
                display: none;
              }
              #resend-verification-code{
                background-color: transparent;
                color: @communityButtonBackgroundColor;
                display: none;
                box-shadow: none;
                padding:10px 0px;
              }
              @media @small{
                min-width: 0px;
                margin-right: 10px;
              }
              @media @mobile-only{
                min-width: 0px;
                margin-right: 10px;
              }
            }
          }
          @media @medium{
            margin-right: 0px;
          }
          @media @small{
            margin-right: 0px;
          }
          @media @mobile-only{
            margin-right: 0px;
          }
        }
        .verification-code-container{
          display: none;
          .phone-verification-input-container{
            margin-top: 25px;
            margin-bottom: 1.5rem;
          }
          .button-container{
            #submit-phone{
              background-color: @communityButtonBackgroundColor;
              color: @communityFontColor;
              padding:10px 20px;
            }
          }
        }
    }
}
#social-settings-container{
	.social-setting-items-container{
		padding: 0px 40px 20px 40px;
		.socialToggle{
			display: flex;
			height: 100px;
			.icon-container{
				min-width: 100px;
				i{
					font-size: 50px;
					color: #ababab;
				}
			}
			.switch-container{
				.toggleLabel{
					font-size: 12px;
					font-weight: 400;
					margin-left: 14px;
					&.linked{
						display: none;
					}
					&.unlinked{
						display: block;
					}
				}
				.switch{
					position: relative;
				}
			}
			&.linked{
				.icon-container{
					i{
						&.fa-facebook-square{
							color: #3B5998;
						}
						&.fa-twitter-square{
							color: #1da1f2;
						}
						&.fa-google-plus-square{
							color: #dd4b39;
						}
						&.fa-linkedin{
							color: #0077b5;
						}

					}
				}
				.toggleLabel{
					&.linked{
						display: block;
					}
					&.unlinked{
						display: none;
					}
				}
			}
		}
	}
}
.toast-close-button{
  box-shadow: none;
}

/*IMAGE AREA SELECT CSS*/
.imgareaselect-border1 {
  background: url(../../v2/css/jquery/plugin/imgareaselect/border-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
  background: url(../../v2/css/jquery/plugin/imgareaselect/border-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
  background: url(../../v2/css/jquery/plugin/imgareaselect/border-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
  background: url(../../v2/css/jquery/plugin/imgareaselect/border-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
  filter: alpha(opacity=50);
  opacity: 0.5;
}
.imgareaselect-handle {
  background-color: #fff;
  border: solid 1px #000;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.imgareaselect-outer {
  background-color: transparent;
  filter: alpha(opacity=50);
  opacity: 0.5;
  box-sizing: content-box;
}
/*IMAGE AREA SELECT CSS*/
#interview-cancel-modal{
  .modal-header{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color:@communityButtonBackgroundColor !important;
    color:@communityFontColor !important;
    i,button{
      color:@communityFontColor !important;
    }
  }
  .modal-body{
    .this-time{
      font-weight: 400;
      margin-top: 15px;
      text-align: center;
    }
  }
  .button-container{
    width: 100%;
    text-align: center;
    margin:20px 0px 10px 0px;
    button{
      margin: 0px;
      padding:10px 50px;
      background-color: @communityButtonBackgroundColor !important;
      color:  @communityFontColor !important;
      text-shadow: none;
    }
  }
}

/*MOBILE DOWNLOAD APP PROMPT*/
#mobile-app-message-container{
  position: fixed;
  width: 100%;
  bottom: 0;
  margin: 0;
  color: #fff;
  text-align: center;
  padding: 0px;
  display: none;
  z-index: 1;
  .mobile-app-message-background{
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .9;
    position: absolute;
    z-index: 0;
  }
  .mobile-app-message-content{
    padding: 0px 50px;
    color: #fff;
    position: relative;
    z-index: 1;
    margin-top: 20px;
    .close{
      top: -25px;
      &:hover{
        color: #fff;
      }
    }
    .mobile-app-message-logo{
      width: 75px;
      height: 75px;
      background-color: #fff;
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius: 100px;
      padding: 15px;
      margin: 10px auto;
    }
    .mobile-app-message-title{
      font-size: 18px;
      font-weight: 400;
      margin: 10px 0px;
    }
    .mobile-app-message-button-container{
      margin: 20px 0px;
      .mobile-app-message-button{
        background-color:@communityColor !important;
        color:@communityFontColor !important;
        padding: 10px 30px;
        margin-bottom: 5px;
        font-weight: 400;
      }
    }
  }
}

#account-verification-modal{
  #verification-second-view{
    display: none;
  }
  .modal-header{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color:@communityButtonBackgroundColor !important;
    color:@communityFontColor !important;
    i,button{
      color:@communityFontColor !important;
      box-shadow: none;
    }
  }
  .modal-body{
    .md-form{
      padding: 0px;
      margin: 20px 0px 20px 10px;
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type=text]:focus{
        border-bottom: 1px solid @communityColor;
        box-shadow: 0 1px 0 0 @communityColor;
      }
    }
  }
  .button-container{
    width: 100%;
    text-align: left;
    margin:20px 0px 20px 0px;
    padding-left: 20px;
    button, a.back.already-have-code.btn{
      margin: 0px 10px 0px 0px;
      padding:10px 50px;
      background-color: @communityButtonBackgroundColor !important;
      color:  @communityFontColor !important;
      text-shadow: none;
      &.back{
        background-color: transparent !important;
        color:  @communityButtonBackgroundColor !important;
        box-shadow: none;
        float: right;
        padding: 10px 10px 10px 0px;
        font-weight: 400;
        &:focus-visible{
			outline: 2px solid #005fcc !important;;
			outline-offset: 2px;
        }
      }
    }
  }
}
#activity-container {
	#mdb-navbar-override {
		.userway-enabled {
			text-align:left;
			width:100%;
			&::after{
				font-size: 20px;
				float: right;
				margin-top: 4px;
			}

		}
	}
}

@-webkit-keyframes flash-animation {
  from { background: @communityColor }
  to   { background: transparent }
}
@keyframes flash-animation {
  from { background: @communityColor }
  to   { background: transparent }
}
#nav-modal  {
	button:focus  {
		outline: 5px auto -webkit-focus-ring-color !important;
	}
}