whmcsCrosterTemplates/assets/less/whmcs/custom-whmcs-style.less

@import "../whmcs/whmcs.less";

@bg-color: @gray-lighter;
@light-text-color: lighten(@gray, 20%);

@input-border: @default-border-color;
@input-bg: @white;
@input-color: @baseFontcolor;

@input-focus-border: @themeColor;
@input-focus-bg: @white;
@input-focus-color: @gray-lighter;

/**
 * -------------------------
 * Botstrap overdrive
 * -------------------------
 */

h3, h4, h5, h6 {
	margin-top: 15px;
	margin-bottom: 15px;
}

#order-standard_cart, #registration {
	form {
		.TM-card {
			padding-bottom: 0;
		}
	}
} 

.cpanel-usage-stats {
	input[readonly] {
		background-color: transparent!important;
	}
}

//inputs//


.user-avatar {
	img, [class*="fa-"] {
		width: 72px;
		height: 72px;
		border-radius: 56px;
		border: 2px solid @default-border-color;
	}
	[class*="fa-"] {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.30rem;
	}
	&.avatar-small {
		img, [class*="fa-"] {
			width: 36px;
			height: 36px;
		}
	}
	&.avatar-navbar {
		img, [class*="fa-"] {
			width: 36px;
			height: 36px;
		}
		[class*="fa-"] {
			font-size: 100%;
		}
		
		@media (min-width: 634px) {
			img, [class*="fa-"] {
				width: 40px;
				height: 40px;
			}
			[class*="fa-"] {
				font-size: 120%;
			}		
		}
	}
	
	&.avatar-mid {
		img, [class*="fa-"] {
			width: 46px;
			height: 46px;
		}
	}
}

/**
 * -------------------------
 * WHMCS style overdrive
 * -------------------------
 */
  
.carousel-item.item {
  float: none;
}

.carousel-inner .carousel-item.item {
  float: left;
}


section#main-body {
	flex: 1 0 auto;
	padding: 60px 0 60px;
	min-height: 70vh;
	margin: 0;
}
.main-container-nosidebar {
    width: 100%;
    max-width: 928px;
    margin: 0 auto;
}

.@{brand}-navbar {
	&.navbar {
		.navbar-nav {
			.home-item {
				@media (min-width: 992px) {
					span {
						display: none;
					}
				}
				@media (max-width: 991px) {
					a {
						span {
							display: block;
						}
					}
					.fa, .fas, .fal, .far{
						display: none;
					}
				}
				
			}
		}
	}
}
.desc {
	margin-bottom: 30px;
}

.header-banner-styled {
	.page-title {
		text-align: left;
		padding: 32px 0;
		@media (min-width: 768px) {
			padding: 52px 0;
		}
	}	
	.header-lined {
		margin-bottom: 0;
		h1, h2 {
			font-size: 26px;
			line-height: 1.2;
			@media (min-width: 768px){
				font-size: 36px;
			}
		}
	}
	
	&.bg-primary, &.inverse, &.dark {
		h1, h2 {
			color: @white;
		}
		.breadcrumb {
			li {
				a {
					color: @white;
				}
						
				&.active {
					color: rgba(255,255,255, 0.7);
				}
			}
		}
		span {
			color: @white;
		}	
	}
}

.header-lined {
	margin-bottom: 40px;
	div {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	
	h1 {
		font-size: 34px;
		line-height: 40px;
		padding: 0; margin: 0;
	}
	
	p { margin: 10px 0 0; }
		
	.breadcrumb {
		background: transparent!important;
		padding: 6px 0 0;
		margin: 0;
		font-size: @baseFontSize - 1;
		border-radius: 0;
			
		li {
			a {
				color: #888;
			}
				
			&.active {
				color: @gray;
			}
			
		}
	}
	span, p {
		font-size: @baseFontSize - 1;
		color: @gray-light;
	}
	.search-group {
		position: relative;
		input {
			padding-left: 36px;
		}
		&:before {
			content: "\f002";
			font-family: "Font Awesome 5 Pro";
			font-weight: 400;
			position: absolute;
			height: 100%;
			width: 36px;
			color: @light-text-color;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: @baseFontSize + 2;
			z-index: 10;			
		}
	}
	@media (max-width: 767px) {
		.search-group {
			margin-top: 15px;
			width: 100%;
		}
	}
}

section#home-banner {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	background-color: darken(@brand-primary, 30%);
	min-height: 400px;
    padding: 96px 0;
	
	h2 {
		font-weight: 300;
		@media (min-width: 768px) {
			font-size: 37px;
			margin-bottom: 15px;
		}
	}
	
	.serach-form {
		display: flex;
		align-items: center;
		position: relative;
		background: @white;
		width: 100%;
		max-width: 606px;
		padding: 6px;
		margin: 0 auto;
		border-radius: 4px;
		
		.input-group-icon {
			margin: 0 0 0 8px;
			font-size: 18px;
			color: @gray-light;
		}

		.input-group-btn {
			display: flex;
			width: auto;
			
			.btn {
				font-weight: normal;
				
				&.search {
					background-color: @brand-primary;
				}
				
				&.transfer {
					background-color: @gray;
				}
			}
		}
		


		
		@media (max-width: 586px) {
			display: block;
			background: 0 0;
			
			.input-group-icon {
				display: none;
			}
			.form-control {
				margin-bottom: 7.5px;
			}
			
			.input-group-btn {
				width: 100%;
				
				.btn {
					flex: 1;
				}
			}
		}
	}
}

/**
 * -------------------------
 * some form input butto fix
 * -------------------------
 */ 

.form-actions {
	display: block;
    padding: 15px 10px;
	border-top: 1px solid @default-border-color;
	margin: 45px 0 15px;
}

.checkbox label, .radio label {
    cursor: pointer;
}


/**
 * -------------------------
 * custom styles
 * -------------------------
 */
 
.section {
	.panel {
		border-color: @default-border-color;
		box-shadow: none;
		border-radius: 4px;
		.cpanel-feature-row {
			a {
				display: flex;
				align-items: center;
				padding: 0.5rem 0;
				text-decoration: none;
				[class*="fa-"] {
					margin-right: 4px;
				}
			}
		}
		&.panel-tabs {
			.panel-nav {
				background-color: @white;
				border-bottom: 1px solid @default-border-color;
			}
			.tab-content {
				.tab-pane {
					font-size: @baseFontSize + 2;
					
					.text-heading {
						font-size: @baseFontSize;
						color: @light-text-color;
					}
					.cpanel-domain-overview {
						padding: 30px;
						
						.btn {
							margin-bottom: 10px;
						}
						@media (min-width: 768px) {
							text-align: center;
							
							.btn {
								margin-bottom: 0;
							}
						}
					}
					
					#cPanelBillingOverviewPanel {
						[class*=col-]>.row {
							margin-bottom: 15px;
						}
						.billingInfo {
							[class*=col-]>.row {
								margin-bottom: 15px;
							}
						}
					}
				}
			}
		}
		
		&.panel-affiliate-referral-link {
			border: 1px solid @default-border-color;
			box-shadow: none;
			
			.panel-body {
				.input-group {
					display: flex;
					
					@media (max-width:767px) {
						flex-direction: column;
						
						.input-group-addon {
							border-bottom: 0 none!important;
							&:first-child {
								border-right: 1px solid @default-border-color;
							}
						}
						.input-group-addon, .form-control, .input-group-text {
							border-radius: 0!important;
							width: 100%;
						}
						.input-group-text {
							width: 100%;
							margin-bottom: 0.50rem;
						}
					}
					.input-group-addon {
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
						width: auto;
					}
					.form-control {
						background-color: @white;
					}
				}
			}
		}
		
		.panel-footer {
			background-color: @white;
		}
	}
	+.section {
		margin-top: 60px;
	}
	
	>:last-child {
		margin-bottom: 0;
	}
}


.section, .TM-card {
	.panel {
		&.panel-switch {
			position: relative;
			background-color: @white;
			border: 1px solid @default-border-color;
			outline:0 none !important;
			box-shadow: none;
			border-radius: 4px;
			max-width: 290px;
			cursor: pointer;
				
			.panel-body {
				display: flex;
				align-items: center;
				padding: 20px 15px;
					
				.switch {
					margin: 0 0 0 auto;
				}
				.switch-label {
					padding-right: 10px;
				}
			}
				
			&.checked {
				border-color: @brand-primary;
			}
				
			.loader-panel {
				visibility:hidden;
				opacity: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background: @white;
				border-radius: 4px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
					
				&.loading {
					visibility:visible;
					opacity: 1;
				}
			}
		
		}
	}
}

/**
 * -------------------------
 * spanner
 * -------------------------
 */
 
.spanner {
    position: absolute;
    width: 64px;
	height: 12px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  
	div, span {
	  position: absolute;
	  top: 0;
	  width: 11px;
	  height: 11px;
	  border-radius: 50%;
	  background: @brand-primary;
	  animation-timing-function: cubic-bezier(0, 1, 1, 0);
	  
	  &:nth-child(1) {
		left: 6px;
		animation: spanner1 0.6s infinite;
	  }
	  
	  &:nth-child(2) {
		left: 6px;
		animation: spanner2 0.6s infinite;
	  }
	  
	  &:nth-child(3) {
		 left: 26px;
		 animation: spanner2 0.6s infinite;
	  }
	  
	  &:nth-child(4) {
		 left: 45px;
		 animation: spanner3 0.6s infinite;	  
	  }
	}
	
	@keyframes spanner1 {
	  0% {
		transform: scale(0);
	  }
	  100% {
		transform: scale(1);
	  }
	}
	@keyframes spanner3 {
	  0% {
		transform: scale(1);
	  }
	  100% {
		transform: scale(0);
	  }
	}
	@keyframes spanner2 {
	  0% {
		transform: translate(0, 0);
	  }
	  100% {
		transform: translate(19px, 0);
	  }
	}
} 

/**
 * -------------------------
 * alert large
 * -------------------------
 */
 
.alert-lg {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid @default-border-color;
    border-radius: 4px;
	margin-bottom: 20px;
	
	&.no-data {
		padding: 32px;
		min-height: 320px;
		justify-content: center;
	}
	
	&.no-border {
		border: 0 none;
		box-shadow: none!important;
	}
	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
			.fas, .fal, .far, .fad {
				font-size: @baseFontSize + 35;
				color: @brand-primary;
			}
	}
	.text {
		text-align: center;
		margin-top: 16px;
		margin-bottom: 20px;
		font-weight: normal;	
	}
	
	&:last-child {
		margin-bottom: 0;
	}
}


/**
 * -------------------------
 * custom card
 * -------------------------
 */

.TM-card {
	padding: 15px;
	border: 1px solid @default-border-color;
	margin-bottom: 20px;
	border-radius: 4px;
	
	.progress {
		height: 4px;
	}
	
	&.pricing-tables {
		background-color: @white;
		display: flex;
		flex-direction: column;
		padding: 30px;		
		p {
			font-size: @baseFontSize + 2;
			margin-bottom: 20px;
			color: @light-text-color;
		}
		.icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;		
		}
		.product-name {
			margin: 0;
		}
		
		.product-content {
			flex: 1 0 auto;
			.product-features {
				position: relative;
				margin-top: 15px;
				
				 li {
					padding: 7.5px 0;
					color: @light-text-color;
				 }
			}
		}
		.product-footer {
			padding-top: 20px;
		}
		
		&.small-padding {
			padding: 15px;
		}
	}
	
	&.search-card {
		padding: 2rem;
		
		.input-group {
			max-width: 686px;
			margin: auto;
			&:before {
				content: "\f002";
				font-family: 'Font Awesome 5 Pro';
				position: absolute;
				height: 100%;
				width: 44px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				color: @gray-light;
				z-index: 10;			
			}
			
			.form-control {
				padding-left: 44px;
			}
		}
		
		@media (max-width: 633px) {
			.form-control {
				width: 100%;
			}
			.input-group {
				&.kb-search {
					display: block;
				}
				&:before {
					height: auto;
					width: auto;
					display: block;
					top: 12px;
					left: 14px;				
				}
			}
			
			.input-group-btn, .input-group-append {
				.btn {
					margin-top: 7.5px;
					width: 100%;
					border-radius: 0;
				}
			}
		}
	}
	
	&.social {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		background-color: @white;
		border-width: 1px 0 0;
		
		@media (min-width: 587px) {
			align-items: center;
		}
		
		@media (max-width: 586px) {
			flex-direction: column;
		}
	}
	
	&.annoucements {
		background-color: @white;
		padding: 0;
		border: 0 none;
			
		.annuncement-item {
			cursor: pointer;
			display: block;
			padding: 15px;
			border: 1px solid transparent;
			
			.annuncement-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				visibility: hidden;
				
				.btn-link {
					background-color: @white!important;
				}
				.announcement-details {
					display: flex;
					margin-left: auto;
					
					@media (max-width: 450px) {
						.fb-like {
							display: none;
						}
					}
					
					.announcement-date {
						color: @gray-light;
						font-size: 85%;
						margin-left: 10px;
					}
				}
			}

			
			&:hover, &:focus {
				background-color: @bg-color;
				
				.annuncement-footer {
					visibility: visible;
				}
			}
			
			&:not(:last-of-type) {
				border-bottom: 1px solid @default-border-color;			
				
			}
			
			&.last {
				background-color: @bg-color;
				
				h1, h2, h3 {
					font-weight: bold;
				}
			}
			
			&.latest {
				padding: 30px 15px;
				border-bottom: 1px solid transparent;
				border: 1px dotted transparent;
				border-radius: 4px;
				
				@media (min-width: 768px) {
					min-height: 350px;
					margin-bottom: 30px;
				}
				
				&:hover, &:focus {
					border: 1px dotted @brand-primary;
				}
				
			}
		}
		
		&.homepage {
			border: 1px solid @default-border-color;
			border-radius: 4px;
			
			.annuncement-item {
				.annuncement-footer {
					visibility: visible!important;
				}
			}
		}
		
		.row {
			margin: 0;
		}
		
		.pagination {
			display: flex;
			padding: 1rem 1rem 0.50rem;
			margin: 0;
			border-top: 1px solid @default-border-color;
			
			.page-link {
				[class*="fa-"] {
					font-weight: 300;
				}
			}
			
			.disabled {
				span {
					color: @gray-light;
				}
			}
		}
	}
	
	.user-list {
		display: flex;
		align-items: center;
		.user-list-item {
			display: flex;
			align-items: center;
			.user-list-item-avatar {
				margin-right: 0.5rem;
				width: 48px;
				padding: 0;
				margin: 0 8px;
				border-radius: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				border: 2px solid @default-border-color;
				img {
					max-width: 100%;
				}
			}
			.user-list-item-profile {
				margin-left: 0.5rem;
				span {
					display: block;
				}
				.user-list-item-profile-lastlogin {
					font-size: 80%;
				}
			}
		}
		
		&.user-switch {
			.user-list-item {
				width: 100%;
				.user-avatar {
					margin-right: 0.5rem; 
				}
				.user-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					
					.user-profile {
						.user-list-name, .user-list-email {
							display: block;
						}
					}
				}
			}
		}
		
	}
}

.select-account a {
	&:hover, &:focus {
		border-color: @themeColor!important;
	}
}


/**
 * -------------------------
 * Promotional Content Formatting
 * -------------------------
 */

.promo-banner {
	@media (max-width: 767px) {
		.content {
			text-align: center;
			
			small {
			 display: block;
			}
		}
	}
}

.store-promoted-product {
	border: 1px solid @default-border-color;
	border-radius: 4px;
}

.store-order-container {
	width: 100%;
    max-width: 928px;
    margin: 0 auto;
	padding: 80px 0 0;
	
	.payment-term {
		float: none!important;
	}
	.nav-tabs, .nav-pills {
		margin-bottom: 0;
	}
}

.store-order-container {
	h2 {
		margin-top: 0;
	}
	.store-domain-tabs {
		margin-top: 20px;
		li {
			a {
				background-color: @gray-lighter;
				border: 1px solid @default-border-color;
				color: @baseFontcolor;			
			}
			
			&.active {
				a, a:hover, a:focus {
					background-color: @white;
					border-color: @default-border-color;
					border-bottom: 1px solid transparent;					
				}
			}
		}
	}
	.store-domain-tab-content {
		margin-bottom: 20px;
		padding: 20px;
		border: 1px solid @default-border-color;;
		border-top: 0;
		a {
			text-decoration: underline;
			&:hover, &:focus {
				text-decoration: none;
			}
		}
	}
	.payment-term {
		h4 {
			margin-top: 25px;
		}
	}
	.domain-validation {
		display: block;
		padding-top: 5px;
		font-size: 1.2em;
		font-weight: 300;
		color: #888;
		
		&.ok {
			color: @brand-success;
		}
	}
}
 
@media (min-width: 768px) {
    .store-order-container {
		.payment-term {
			float: right;
			h4 {
				margin-top: 0;
			}
		}
    }
}

.store-promoted-product {
    margin: 50px 0;
    padding: 30px 30px 50px 30px;
	
	.icon {
		height: 200px;
		line-height: 200px;
		text-align: center;
		overflow: hidden;
		img {
			max-width: 100%;
			max-height: 100%;
		}		
	}
	ul {
		&.features {
			margin: 20px 0;
			padding: 0;
			list-style: none;
			font-size: 1.1em;
			font-weight: 300;
			li {
				float: left;
				width: 50%;
				margin-bottom: 5px;	
				.fa:not(.fa-spinner) {
					font-size: 1.2em;
					color: #91c590;
					margin-left: 20px;
					margin-right: 10px;
				}				
			}
		}
	}
	.btn {
		margin-top: 10px;
	}
} 


/**
 * -------------------------
 * Custom Sidebar Panels
 * -------------------------
 */

.sidebar {
	&.default {
		.panel-sidebar {
			padding: 15px;
			border: 1px solid @default-border-color;
			
			.panel-heading {
				padding: 0 0 10px;
				
				.panel-title {
					i {
						width: auto;
						overflow: initial;
						margin: 0;
						line-height: 1;
					}
					.panel-minimise  {
						display: none;
					}
				}
			}
			.list-group {
				a {
					padding: 5px 15px 5px 0;
				}
			}
			
			&.panel-ticket-info {
				padding: 0;
				border: 0 none;
				box-shadow: none;
				
				.panel-heading {
					padding: 0 15px 10px;
				}
			}
			
			&.panel-client-details .panel-footer .btn,
			&.panel-client-contacts .panel-footer .btn {
				width: 100%;
				display: block;
			}
		}
		
		&.no-icon {
			.panel-sidebar {
				.list-group {
					a {
						[class*="fa-"], [class^="fa-"] {
							display: none;
						}
					}
				}
			}			
		}
		
		
	}
	
	.card-sidebar {
		.card-title {
			font-size: 1.125rem;
			.btn-sm ,.btn-group-sm > .btn {
				padding: 1px 5px;
				font-size: 12px;
				line-height: 1.5;
				border-radius: 3px;
			}
			
			[class*="fa-"], [class^="fa-"] {
				opacity: 0.70;
			}
		}
		
		.card-collapsable {
			.card-header {
				cursor: pointer;
			}
			.card-body-collapsed {
				display: none;
			}
		}
		.title {
			font-weight: 500;
		}
		
		.list-group {
			font-size: 0.9em;
			.list-group-item {
			  padding: 7px 15px;
				.badge {
				  padding: 5px 2px;
				  width: 28px;
				  text-align: center;
				}
				
				&.active, &.active:hover, &.active:focus, &:hover, &:focus {
				  background-color: @gray-lighter;
				  color: @baseFontcolor;
				  border-color: @default-border-color;
					.badge {
					  background-color: @white!important;
					  color: @baseFontcolor!important;
					}
				}
				
				i.far.fa-circle {
					opacity: 70;
				}
			}
		}
		.card-minimise {
		  cursor: pointer;
		  transition: transform 200ms ease;

			&.minimised {
				transform: rotate(180deg);
			}
		}
		
		&.panel-support-hours {
			.list-group {
				padding: 0.50rem;
				border-bottom: 1px solid @default-border-color;
				.list-group-item {
					border: 0 none;
					background-color: transparent;
					span  {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						font-weight: 500;
						font-size: 1.125rem;
					}
					small {
						opacity: 0.70;
					}
				}
			}
			.card-footer {
				background-color: transparent;
				border-top: 0 none;
			}
		}
		&.panel-client-details {
			@media (max-width: 991px) {
				display: none;
			}
			.user-profile {			
				.user-avatar {
					display: flex;
					flex-direction: column;
					padding: 0 1rem;
					img {
						border: 2px solid @default-border-color;
						margin-bottom: 0.5rem;
					}
					
				}
			}
		}
		&.panel-ticket-info {
			.card-footer {
				.btn {
					[class*="fa-"] {
						display: none;
					}
				}		
			}
		}
	}
}

body.c-depth {
	.sidebar {
		&.default {
			.panel-sidebar {
				&.panel-default {
					box-shadow: @box-shadow!important;
				}
			}
		}
	}
}

.panel-sidebar {
	border: 0 none;
	font-size: @baseFontSize;
	box-shadow: none;
	background-color: transparent;
	
	.panel-heading {
		padding: 0 0 10px 0;
		border-bottom: 1px dotted @default-border-color;
		
		.panel-title {
			font-weight: 500;
			
			i {
				width: 0;
				overflow: hidden;
				margin-left: -9px;
				display: inline-block;
				line-height: 0;			
			}
		}
	}
	.panel-heading, .panel-footer {
		background-color: transparent;
	}
	.panel-footer {
		border: 0 none;
		padding: 10px 0;
	}
	
	&.panel-default {
		box-shadow: none!important;
		background-color: transparent;
			
		.panel-heading {
			background-color: transparent;
		}
	}
		
	&.panel-client-details, &.panel-client-contacts {
		.panel-footer {
			.btn {
				display: inline-flex;
				width: auto;
				
				i {
					display: none;
				}
			}
		}		
	}
	
	.panel-body {
		padding: 15px 0;
		
		strong {
			display: block;
			margin-bottom: -15px;
		}
	}
	.list-group {
		overflow: hidden!important;
		padding: 0;
		
		.list-group-item {
			position: relative;
			display: block;
			padding: 5px 15px;
			text-align: left;
			border: 0 none!important;
			background-color: transparent;
			border-radius: 0;
			margin: 0;
			
			i:not(.fa-circle):not(.fa-dot-circle) {
				float: left;
			}
			
			&.list-group-item-action {
				width: auto;
			}
		}
		a.list-group-item {			
			@media (max-width: 767px) and (min-width: 481px) {
				flex-basis: calc(50%);
			}
			@media (max-width: 480px) {
				flex-basis: calc(100%);
			}
			@media (max-width: 991px) {
				.list-group-item {
					margin-right: 16px;
				}
			}
			
			border: 0 none;
			@media (min-width: 992px) {
				.transition(~"all 0.1s");
				
				&:hover, &:focus {
					margin-left: 8px;
				}
			}
			
			&.active , &.active:hover, &.active&:focus {
				background-color: transparent;
				color: @link-color;
				
				.fa, .fas, .far, .fal {
					color: @link-color;
				}
			}
			
			&.disabled {
				background-color: transparent;
				
				&:hover, &:focus {
					margin-left: 0;
				}
			}
		}
		
		@media (max-width: 991px) {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
		}
		
		form {
			display: inline-block;
		}
		

	}
	
	&.panel-support-hours {
		.list-group {
			padding: 0.50rem;
			border-bottom: 1px solid @default-border-color;
			.list-group-item {
				span  {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					font-weight: 500;
					font-size: 1.125rem;
				}
				small {
					opacity: 0.70;
				}
			}
		}
	}
	&.panel-ticket-info {
		box-shadow: none!important;
		.panel-heading {
			border: 0 none;
		}
		.list-group {
			overflow: visible !important;
			border: 1px solid @default-border-color;
			border-width: 1px 1px 0;
			display: block!important;
			 border-radius: 4px;
			 
			.list-group-item {
				padding: 10px 15px!important;
				&:not(list-of-type) {
					border-bottom: 1px solid @default-border-color!important;
				}
				
				.truncate {
					margin-bottom: 5px;
				}
				
				&:hover, &:focus {
					margin-left: 0;
				}
			}
		}
		
		.panel-footer {
			.row {
				margin: 0;
			}
			.btn {				
				[class*="fa-"] {
					display: none;
				}
			}		
		}
	}
	
	&.panel-invoice-info, &.panel-info {
		background-color: @bg-color;
		border: 1px solid @default-border-color;
		padding: 0!important;
		.panel-heading {
			display: none;
		}
		.panel-body {
			padding: 15px;
			
			.select-inline {
				width: 100%;
			}
			
			.payment-form {
				table {
					border-spacing: 0!important;
					td {
						display: block;
					}
				}
				.btn, table {width: 100%;}
				form {
					&:last-child {
						.btn {
							margin-top: 5px;
						}
					}
				}
			}
			
			.total {
				display: flex;
				flex-direction: column;
				margin-bottom: 20px;
				[class*="fa-"] {
					font-size: 0.875rem;
				}
				.total-price {
					font-size: 27px;
					font-weight: 500;
					display: flex;
					justify-content: space-between;
					align-items: center;					
				}
			}
			label {
				font-weight: 500;
			}
		}
		 .panel-footer {
			background-color: transparent;
			padding: 10px 15px;
			display: flex;
			.btn {
				display: block;
				width: 100%;
				padding: 7.5px 18px;
			}
		}
		
		&.panel-funds {
			.list-info {
				margin-top: 1.50rem;
				padding-top: 1rem;
				border-top: 1px solid @default-border-color;
				
				.list-heading {
					padding-right: 1rem;
					flex: 1;
				}
			}
		}
		
		&.panel-support-hours {
			.panel-heading {
				display: block;
				padding: @panel-heading-padding;
			}
		}
	}
	&.panel-client-details {
		@media (max-width: 991px) {
			display: none;
		}
		.user-profile {			
			.user-avatar {
				display: flex;
				flex-direction: column;
				padding: 0 1rem;
				img {
					border: 2px solid @default-border-color;
					margin-bottom: 0.5rem;
				}
			}
			
		}
	}
	
	&.panel-client-contacts {
		.list-group-item {
			&:before {
				font-family: "Font Awesome 5 Pro";
				content: "\f007";
				margin-right: 4px;
				font-weight: 900;
				color: #ccc;				
			}
		}
	}
	
	&.panel-primary {
		background-color: @bg-color;
		padding: 15px;
		border: 1px solid @default-border-color;
		.panel-heading {
			border: 0 none;
			padding: 0;
		}
		.list-group {
			padding: 7.5px 0;
			.list-group-item {
				padding: 7.5px 0;
			}
		}
		
		.panel-footer {
			.btn-block {
				display: block;
				width:100%;
				padding: 7.5px 18px;
			}
		}
	}
}


/**
 * -------------------------
 * Custom Client Homepage Tiles
 * -------------------------
 */

.tiles {
	margin-bottom: 30px;
	.tile {
		position: relative;
		.stats, .no-link {
			position: relative;
			border: 1px solid @default-border-color;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			justify-content: space-between;
			padding: 1rem;
			text-decoration: none;
			margin-bottom: 2rem;
			overflow: hidden;
			border-radius: 4px;
			.icon {
				position: absolute;
				top: -60px;
				right: -20px;
				color: @baseFontcolor;
				.transform(rotate(-20deg));
				font-size: 110px;
				opacity: 0.1;
				
			}
			.stat {
				font-size: 4rem;
				font-weight: 500;
				line-height: 1;
				margin-bottom: 1rem;
			}
			.title {
				width: 100%;
				text-transform: uppercase;
				font-weight: 500;
				color: @gray-light;
			}
			
			.decs {
				display: block;
				border-top: 1px solid @default-border-color;
				text-transform: none;
				font-weight: 400;
				font-size: 80%;				
			}
			
			@media (min-width: 768px) {
				margin-bottom: 1rem;
				min-height: 170px;
				justify-content: center;
				flex-direction: column;
				.title {
					margin-top: 0.5rem;
					text-align: center;
				}
				.stat {
					margin-bottom: 0;
				}
			}
		}
		.action {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 0.25rem 0.25rem;
			border: 0 none;
		}
	}
}

.home-kb-search {
	.form-control {
		background-color: @gray-lighter;
		font-weight: normal;
		border-color: @default-border-color;
	}
}

.mc-panel-promo {
	border: 1px solid @default-border-color;
	border-radius: 4px;
	padding: 10px;
    font-size: 0.95em;
	a {
		color: @baseFontcolor;
		text-decoration: none!important;
		
		span {
			font-weight: normal!important;
		}
	}
}




/**
 * -------------------------
 * Client Homepage
 * -------------------------
 */

.text-domain {
    font-size: 12px;
    color: @link-color;
}

.client-home-panels {
	.panel {
		box-shadow: none;
		&.panel-default {
			border-color: @default-border-color;
			.panel-heading {
				background-color: @white;
				border-color: @default-border-color;				
			}		
			.panel-footer {
				background-color: transparent;		
			}
		}
		
		.panel-body {
			max-height: 323px;
			overflow: auto;
			
				.panel-mc-sso {
					.row>.col-sm-6 {
						flex: 0 0 100%;
						max-width: 100%;
						width: 100%;
						
						&:first-of-type {
							display: none;
						}
						
						.btn-service-sso {
							display: block;
							width: 100%;
						}
						small {
							margin-top: 0.5rem;
						}
					}
				}
		}
		.panel-heading {
			padding: 18px 15px;
			
			.panel-title {
				font-weight: 500;
				
				a, .fa, .fas, .fal, .far  {
					color: @light-text-color;
				}
			}
		}
		
		.list-group {
			max-height: 323px;
			overflow: auto;
			
			.list-group-item {
				border-color: @default-border-color;
				margin-top: -1px;
				
				.label, .badge {
					font-weight: bold;
					font-size: 75%;
				}
				
				.text-last-updated {
					display: block;
					font-size: 80%;
				}
			}
			
			&:last-child {
				border-bottom: 0;
			}
		}
		
		.panel-footer {
			border: 0 none;
		}
		
		&.panel-domain-register {
			position: relative;
			overflow: hidden;
			background-color: @bg-color;
			.panel-heading {
				background: transparent;
				border: 0 none;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 0;
			}
			.panel-body {
				padding: 15px;
				max-height: none;
				overflow: hidden;
				.input-group {
					display: flex;
					flex-wrap: wrap;
					margin: 0 0 15px;
					
					input[type="text"] {
						height: 46px;
						padding: 10px 16px;
						line-height: 1.3333333;
					}
					
					.input-group-btn {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: row-reverse;
						width: 100%;
						margin-top: 15px;
						
						.btn {
							flex: 1;
							border-radius: 0 !important;
							&:first-child {
								margin-left: 8px;
							}
							&:last-child {
								color: @white;
								background-color: @gray;
								
								&:hover, &:focus {
									background-color: darken(@gray, 3%);
								}
							}
						}
					}
				}
				
				p {
					font-size: 80%;
					color: @gray-light;
					text-align: center;
					margin-bottom: 0;
				}
			}
			
			.fa, .fal, .fas, .far {
				position: absolute;
				top: -65px;
				right: -35px;
				font-size: 17.5em;
				color: @gray-light;
				opacity: .1;
			}
		}
		
		&.panel-services {
			.list-group {
				.list-group-item:first-child {
					border-top-width: 1px;
				}
			}
		}
	}
}


.div-service-item {
    display: flex;
	flex-direction: column;
    cursor: pointer;
	@media (max-width: 767px) {
		padding-right: 100px;
		justify-content: flex-start;	
	}
	@media (min-width: 768px) {
		flex-direction: row;
		align-items: center;
	}
}
.div-service-status {
	@media (max-width: 768px) {
		position: absolute;
		top: 1rem;
		right: 2rem;
	}
}
.div-service-status .label-placeholder {
    position: absolute;
    visibility: hidden;
}
.div-service-status .label:not(.label-placeholder) {
    width: 3rem;
}
.div-service-name {
    display: flex;
    flex-direction: column;
    margin-right: auto;
}
.div-service-name > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.div-service-buttons .disabled {
    cursor: default;
}
.div-service-buttons .btn {
	min-width: 106px;
}
.div-service-item .dropdown-menu {
	min-width: 200px;
}
.div-service-item .dropdown-menu li {
	display: flex;
	align-items: center;
    white-space: nowrap;
}
.dropdown-menu li.disabled,
.dropdown-menu li.disabled:hover,
.dropdown-menu li.disabled:focus {
    color: #777777;
    cursor: default;
    background-color: transparent;
}
@media (min-width: 768px) {
    .div-service-status .label {
        width: initial !important;
    }
}

div[menuitemname="Active Products/Services"] .list-group {
  overflow: initial !important;
  max-height: initial !important;
  border-bottom: 0px !important;
}

div[menuitemname="Active Products/Services"] .list-group .list-group-item:nth-child(n+5) {
  display: none;
}

div[menuitemname="Active Products/Services"] .card-footer, div[menuitemname="Active Products/Services"] .panel-footer {
  border-top: 1px;
  padding: 1rem;
  text-align: center;
  .btn-view-more {
	 &:extend(.btn);
	 &:extend(.btn-primary);
	font-size: 12px;
    padding: 4px 10px;
	text-decoration: none;	
  }
}

div[menuitemname="Active Products/Services"] .btn-view-more.disabled {
  cursor: default;
  opacity: 0.65;
}


/**
 * -------------------------
 * @Support tickets
 * -------------------------
 */
 
.ticket-departments {
	margin: 30px 0;
	a {
		display: block;
		padding: 1rem;
		text-decoration: none;
		border: 1px solid @default-border-color;
		border-radius: 4px;
		margin-bottom: 1.75rem;
		
		.name {
			font-size: 18px;
			font-weight: 400;
			margin: 0;
		}
		.desc {
			display: block;
			color: @baseFontcolor;
			margin-top: 0.50rem;
			margin-bottom: 0;
		}
		
		&:hover, &:focus {
			background-color: @bg-color;
		}
	}
	
	&.list {
		border: 1px solid @default-border-color;
		border-radius: 4px;
		a {
			border: 0 none;
			border-radius: 0;
			margin-bottom: 0;
			box-shadow: none!important;
			&:not(:last-of-type) {
				border-bottom: 1px solid @default-border-color;
			}
		}
	}
}
 
.view-ticket {
	.ticket-reply {
		&.staff {
			.posted-by {
				background-color: @gray-lighter;
			}
			.message, .attachments {
				background-color: lighten(@gray-lighter, 3%);
			}
		}
	}
	.posted-by {
		border-bottom: 1px solid @default-border-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.user {
			display: flex;
			align-items: center;
			margin-right: auto;	
			.name {
				display: flex;
				flex-direction: column;
				.posted-by-name {
					font-size: 1rem;
				}
			}
			.user-avatar {
				img, [class*="fa-"] {
					border: 2px solid @default-border-color;
				}
			}
		}
		.posted-on {
			align-self: flex-end;
			text-align: right;
		}
	}
	.attachments  {
		border-color: @default-border-color; 
		.attachment-list {
			li span {
				border-color: @default-border-color; 
				figure {
					background-color: @gray-lighter;
				}
			}
		}
	}
}

/**
 * -------------------------
 * @Mass Payment
 * -------------------------
 */

.table-masspay {
	margin-top: 20px;
	tr {
		th {
			font-weight: 500;
		}
		td {
			h5 {
				font-size: @baseFontSize + 1;
				i {
					margin-right: 4px;
				}
			}
			a {
				text-decoration: none;
			}
		}
	}
	.item-description {
		td {
			border: 0 none!important;
		}
	}
	.masspay-total {
		td {
			font-size: @baseFontSize + 1;
			font-weight: 500;
			background-color: transparent;
			padding: 15px 0;
			
			&.text-right {
				padding-right: 4px;
			}
		}
	}
}


/**
 * -------------------------
 * @Tables
 * -------------------------
 */

.table-container {
	background-color: @white;
	border: 1px solid @default-border-color;
	padding: 0;
	margin-bottom: 20px;
	border-radius: 4px;
	
	.listtable {		
		.table {
			margin-bottom: 0;
			thead {
				th {
					font-weight: normal;
					font-size: 80%;
					border-bottom: 2px solid @default-border-color;
					
					&[class*=sorting_] {
						background-color: @white;
						border-bottom: 2px solid @brand-primary;
					}	
				}
			}
			tbody {
				.col-small {
					width: 45px; min-width: 45px;
					
					&.center {
						text-align: center;
					}
				}
				tr {
					cursor: pointer;
					
					&.row-detail {
						ul {
							padding: 0;
							
							li {
								list-style-type: none;
							}
						}
					}
					td {
						outline: none!important;
						a {
							text-decoration: none;
						}
						.text-small {
							display: inline-block;
							font-size: 85%;
						}
						.ssl-info {
							display: inline-block;
							img {
								height: 12px;
								width: 12px;
								max-width: 12px;
							}
						}
						.btn-link {
							color: @brand-primary;
							background-color: transparent!important;
							text-decoration: none;
						}
						
						@media (min-width:1041px) {
							.cycle-text {
								display: block;	
							}
						}
					}
				}
			}
			thead, tbody, tfoot {
				tr {
					th, td {
						position: relative;
						vertical-align: middle;
					}
				}
			}
			&.datatable {
				&.has-columns-hidden {
					tbody {
						tr {
							td {
								a {
									word-break: break-all;
								}
								span.responsiveExpander {
									top: 0!important;
									left: 0;
									bottom: 0;
									border: 0;
									border-radius: 0;
									height: 100%;
									width: 44px;
									display: -webkit-box;
									display: flex;
									-webkit-box-pack: center;
									justify-content: center;
									-webkit-box-align: center;
									align-items: center;
									position: absolute;
									text-align: center;
									text-indent: 0!important;
									outline: 0;
									background-color: @gray-lighter;	

									&:before {
										font-weight: 500;
									}									
								}
								
								&:first-child {
									padding-left: 60px;
								}
							}
						}
					}
				}
			}
		}
	}
	
	.dataTables_filter, .dataTables_info {
		display: none;
	}

	.table-header {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		border-bottom: 1px solid @default-border-color;
		
		label {
			font-weight: normal;
			margin: 0;
			margin-right: 10px;
		}
		
		.btn {
			background-color: @white!important;
			border: 1px solid @default-border-color!important;
			padding: 3px 6px;
		}
	}
	.dataTables_paginate {
		margin: 0;
		white-space: nowrap;
		display: flex;
		align-items: center;
		padding: 10px 15px;
		border-top: 1px solid @default-border-color;
		justify-content: center;
		
		.pagination {
			margin: 0;
		}
	}
	
	.dataTables_length {
		border-top: 1px solid @default-border-color;
		label {
			display: flex;
			align-items: center;
			text-align: left;
			white-space: nowrap;
			justify-content: center;
			padding: 10px 15px;
			margin: 0;
		}
		
		&:after {
			display: block;
			content: "";
			clear: both;		
		}
	}
	
	@media (min-width: 576px) {
		.dataTables_paginate {
			float: right;
			text-align: right;
			justify-content: flex-end;
			border-top: 0 none;
		}
		.dataTables_length {
			label {
				justify-content: flex-start;
			}
		}
	}
	
	&.domain-pricing-table {
		box-shadow: none!important;
		border: 0 none;
		
		table {
			box-shadow: @box-shadow;
			border: 1px solid @default-border-color;
		}
		.dataTables_filter {
			display: block;
		}
	}
}

/**
 * -------------------------
 * @Network Status
 * -------------------------
 */
 
.network-status {
	.network-status-top {
		display: flex;
		align-items: center;
		
		label {
			font-weight: normal;
			margin: 0;
			margin-right: 10px;
		}
			
		.btn {
			background-color: @white!important;
			border: 1px solid @default-border-color!important;
			padding: 3px 6px;
		}
	}
	&.panel {
		.panel-body {
			border-bottom: 1px solid @default-border-color;			
			.status-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 1rem;		
				h4 {
					margin: 0;
				}
			}
		}
		.panel-footer {
			background-color: transparent;
			border-top: 0 none;
			.network-status-pagination {
				display: flex;
				align-items: center;
				justify-content: right;
				
				.pagination {
					margin-bottom: 0;
				}
			}
		}
	}
}


/**
 * -------------------------
 * Markdown Editor
 * -------------------------
 */

.md-editor {
	.md-header {
		.btn {
			[class*="fa-"], [class*="glyphicon-"] {
				display: inline-block;
				margin-right: 0;
			}
		}
		.btn-sm {
			padding: 5px 10px;
			border: 1px solid @default-border-color!important;
		}
		.btn-default {
			background-color: @white;
			color: @baseFontcolor;
			
			&:hover, &:focus {
				background-color: @bg-color;
			}
		}
	}
	
	.markdown-editor-status {
		text-align: left;
	}
}

/**
 * -------------------------
 * kbsuggestions
 * -------------------------
 */

.kbsuggestions, .kbarticles, .kbcat {
	border: 1px solid @default-border-color;
	padding: 0;
	a, .kb-article {
		display: block;
		padding: 15px;
		font-size: @baseFontSize + 2;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
		
		.glyphicon, .far, .fal, .fas {
			color: @link-color;
		}
		p {
			font-size: @baseFontSize;
			font-weight: normal;
			color: @baseFontcolor;
			margin-bottom: 0;
		}

		&:not(:last-of-type) {
			border-bottom: 1px solid @default-border-color;
		}
		
		&:hover, &focus {
			background-color: @bg-color;
		}
		.admin-edit-link {
			float: right;
			a {
				display: inline-block;
				padding: 0;
				background-color: transparent;
				font-size: @baseFontSize;
				font-weight: normal;
				
				&:hover, &focus {
					background-color: transparent;
				}
				
			}
		}
		

	}
}

.kbarticles, .kbsuggestions {
	border-radius: 4px;
}

.kbcat {
	border: 0 none;
	.kb-article {
		border: 1px solid @default-border-color;
		border-radius: 4px;
		margin-bottom: 20px;
		
	}
}



/**
 * -------------------------
 * annuncements
 * -------------------------
 */


.article {
	.article-content {
		margin-bottom: 2rem;
		color: @light-text-color;
	}
	.kb-article-details {
		display: flex;
		align-items: center;
		font-size: @baseFontSize;
		li {
			&:not(:first-child) {
				padding-left: 1rem;
			}
		}
		@media (max-width: 767px) {
			flex-direction: column;
			align-items: flex-start;
			li {
				margin-bottom: 7.5px;
				&:not(:first-child) {
					padding-left: 0;
				}
			
				&:last-child {
					margin-bottom: 0;
				}
			}
			
		}
	}
	.article-tools {
		display: flex;
		align-items: center;
		
		.btn-icon {
			margin-left: auto;
		}
	}
	.rate-article {
		margin: 15px 0 30px;
	}
}


/**
 * -------------------------
 * products & domain details
 * -------------------------
 */

 
.product-details {
	margin: 0 0 30px 0!important; 
	.product-holder {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		min-height: 364px;
		background-color: @bg-color;
		border: 1px solid @default-border-color;
		border-radius: 4px;
			
		.product-content {
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: center;
			align-items: center;
			padding: 30px;
			
			a {
				text-decoration: none;
				color: @baseFontcolor;
			}

			.product-image {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 60px;
				line-height: 1em;
				margin-bottom: 1rem;
				
				.fa-circle {
					border: 3px solid @white;
					border-radius: 25px;
					transform: rotate(-20deg);
				}
	
				.fa-circle	{
					color: @brand-primary;
				}
			}				
		}
		
		.product-footer {
			width: 100%;
			padding: 7.5px 30px;
			text-align: center;
			border-top: 1px solid @default-border-color;
			font-size: 12px;
			
			.list-inline {
				margin: 0;
				
				li {
					padding-left: 0;
					padding-right: 3px;
					img {
						vertical-align: top;
					}
					&:last-child {
						padding-right: 0;
					}
				}
			}
			a {
				color: @baseFontcolor;
				text-decoration: none;
				
				&.btn {
					color: @white;
				}
			}			
		}
		
		.status-sticker-wrapper {
			position: absolute;
			top: 25px;
			left: -10px;

			.status-sticker {
				display: block;
				font-size: @baseFontSize;
				color: @white;
				font-weight: 500;
				text-align: center;
				position: relative;
				left: 0;
				top: 0;
				white-space: nowrap;
				padding: 7.5px 15px;
				border-radius: 4px;
				
				&.active, &.product-status-completed {
					background-color: #46a546;
				}
				
				&.product-status-pending, &.product-status-pendingregistration, &.product-status-redemption, &.product-status-grace {
						background-color: #F89406;
				}
				&.product-status-expired, &.product-status-transferredaway, &.product-status-pendingtransfer {
						background-color: #666;
				}
			}
		}
		
		@media only screen and (max-width: 767px) {
			margin-bottom: 20px;
		}

	}
	
	.product-info {
		display: flex;
		padding: 20px 15px;
		min-height: 364px;
		background-color: @white;
		border-radius: 4px;
		border: 1px solid @default-border-color;
		
		&.cpanel-usage-stats {
			display: block;
			
			div[class*=col-] {
				display: block;
			}
			
			.usage-stats {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-top: 25px;
				span:first-of-type {
					font-size: @baseFontSize;
					margin-bottom: 15px;
				}
				span:last-of-type {
					margin-top: 15px;
					font-size: @baseFontSize - 1;
				}
			}
			
			.cPanelExtrasPurchasePanel {
				margin: 20px -15px -20px;
				border-top: 1px solid @default-border-color;
				padding: 0 30px;
				background-color: @bg-color;
				border-radius: 0 0 4px 4px;
				
				h3, h4, h5 {
					margin: 10px 0;
				}
				
				.btn, .form-group {
					margin-bottom: 10px;
				}
			}
		}
	}
	.row {
		&.row-eq-height {
			flex-wrap: nowrap;
		}
	}
}

/**
 * -------------------------
 * list-info
 * -------------------------
 */
 
.list-info {
	margin: 0; padding: 0;
			
	li {
		display: flex;
		
		.list-heading {
			color: @light-text-color;
		}
	}
	
	&.list-info-bordered {
		li {
			margin: 0!important;
			padding: 0.625rem 0.9375rem;
			
			&:not(:last-of-type) {
				border-bottom: 1px solid @default-border-color;
			}
		}
	}
			
	&.list-v {
		li {
			flex-direction: column;
			.list-text {
				font-size: @baseFontSize + 2;
			}		
			&:not(:last-of-type) {
				margin-bottom: 15px;
			}
		}
	}
			
	&.list-info-50 {
		li {
			flex-direction: column;
			
			@media (min-width: 768px) {
				flex-direction: row;
				.list-heading, .list-text {
					flex-basis: 50%;
					word-break: break-word;
				}
			}
			
			&:not(:last-of-type) {
				margin-bottom: 15px;
			}
		}
	}
}


/**
 * -------------------------
 * row eq height
 * -------------------------
 */


.row {
	&.row-eq-height {
		display: flex;
		flex-wrap: wrap;
		
		div[class*=col-] {
			display: flex;
		}
		
		div[class*=col-]>* {
			width: 100%;
		}
		
		@media (max-width: 767px) {
			&.row-eq-height-sm {
				flex-direction: column;
			}
		}
	}
}
 

/**
 * -------------------------
 * custom switch
 * -------------------------
 */ 

.switch {
	position: relative;
	height: 24px;
	width: 40px;
	cursor: pointer;
}
.switch--text {
	width: 50px;
}
.switch__checkbox {
	position: absolute;
	opacity: 0;
}
.switch__container {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: @brand-primary;
}

.switch__handle {
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 2;
	display: block;
	height: 20px;
	width: 20px;
	background-color: @white;
}

.switch__container, .switch__handle {
	border-radius: 12px;
	transition: .24s ease;
}

.switch--text {
	.switch__checkbox+.switch__container {
		&:after {
			position: absolute;
			top: 1px;
			bottom: 0;
			display: flex;
			right: 6px;
			z-index: 1;
			align-items: center;
			content: "off";
			color: @white;
			font-size: 11px;
			font-weight: 400;
			text-transform: uppercase;		
		}
	}
			
	.switch__checkbox:checked+.switch__container {
		&:after {
			position: absolute;
			top: 1px;
			bottom: 0;
			display: -webkit-box;
			display: flex;
			left: 8px;
			z-index: 1;
			-webkit-box-align: center;
			align-items: center;
			content: "on";
			color: #fff;
			font-size: 11px;
			font-weight: 400;
			text-transform: uppercase;
		}
	}
	.switch__checkbox+.switch__container {
		.switch__handle {
			right: 28px;
		}
	}
	.switch__checkbox:checked+.switch__container {
		.switch__handle {
			right: 2px;
		}	
	}
}


.social-signin-btns {
	margin-top: 20px;
}


/**
 * -------------------------
 * View Invoices
 * -------------------------
 */ 

.TM-card {
	&.invoice, &.quote {
		position: relative;
		overflow: hidden;
		
		.company-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			img {
				height: 40px;
				max-height: 40px;
			}
			h2 {
				margin: 0;
				font-weight: 900;
			}
		}
		
		h4 {
			border-bottom: 1px solid @brand-primary;
			display: inline-block;
		}
		.invoice-info, .quote-info {
			display: flex;
			flex-direction: column;
			padding: 15px 0;
			border-top: 2px dotted #ddd;
			border-bottom: 2px dotted #ddd;
			
			@media (min-width: 768px) {
				justify-content: space-between;
				flex-direction: row;
				align-items: center;
			}
			.title {
				display: flex;
				font-size: 27px;
				font-weight: 500;
				align-items: center;
				
				.label {
					align-self: center;
					margin-left: 10px;
					margin-bottom: 0;
					
					display: inline-flex;
					padding: 6px;
					font-size: @baseFontSize;
					vertical-align: center;
					text-transform: uppercase;
					font-weight: normal;
				}
			}
		}
		
		table {
			tr {
				&.active {
					border-top: 2px solid darken(#ddd, 10%);
					td {
						background-color: #ddd;
					}
				}
			}
		}
	}
}


/**
 * -------------------------
 * @section Domain Checker
 * -------------------------
 */

div.domainresults div:not(.btn-group) {
    margin: 0;
    padding: 10px 25px;
    background-color: #ddd;
    color: #666;
    font-size: 1.0em;
    border-radius: 6px 6px 0 0;
}

div.domainresults div:not(.btn-group) span {
    padding-left: 20px;
    font-size: 14px;
    color: #888;
}

div.domainresults table tr td {
    padding: 5px 30px;
    line-height: 40px;
}

.@{brand}-domain-checker-container {
	background: url(../../images/domain-hero.jpg) center center no-repeat;
	color: @white; text-align: center;
	background-size: cover;
	  -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover; 
	z-index: 1;
	position: relative;
	border-radius: 10px;
	padding: 42px 0;
	  
	&:before {
		background: #000;
		border-radius: 10px;
		content: "";
		z-index: -1;
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		right: 0;
		opacity:0.70;
		top: 0;
	}
	
	.input-group-box {
		margin: 0 auto;
		padding: 10px;
		width: 100%;
		background-color: @white;
		border-radius: 10px;
		
		.btn {
			font-size: 1rem;
		}
	}
	.domain-bulk-options-box {
		position: absolute;
		top: 18px;
		right: 134px;
		z-index:100;
	}
}





@media (max-width: 767px) {
    .@{brand}-domain-checker-container {
		.input-group-box {
			.form-control {
				border-radius: 0 !important;				
			}
			.input-group-btn {
				display: block;
				width: 100%;
				
				.btn {
					width: 100%;
					border-radius: 0;				
				}
			}
		}
    }
}

.domain-check-availability {
    width: 100px;
}

.domain-step-options {
    min-height: 300px;
}

.domain-checker-result-headline {
    margin: 1rem;
    text-align: center;
}
.domain-checker-available {
	font-size: 1.5rem;
    color: #5cb85c;
}

.domain-checker-unavailable,
.domain-checker-invalid {
    color: #d9534f;
}

div.domainresults div.domain-checkout-area {
    display: none;
    float: right;
    padding: 8px 40px 0;
}

.domain-lookup-result {
	.domain-price {
		.price {
			font-weight: 900;
			font-size: 1.5rem;
		}
	}
}

.domain-disclaimer-area {
    margin: 0 0 25px 0;
    font-size: 12px;
}

.domain-bulk-domain-well {
    width: 60%;
}

.domain-tld-pricing-table-responsive {
    border: 0;
    margin-bottom: 0;
}

a.domain-tld-pricing-category {
    display: block;
    text-align: center;
}

.featured-tlds-container {
    margin: 35px 0;
	
	.featured-tld {
		margin: 0 0 20px;
		overflow: hidden;
		border: 1px solid @default-border-color;
		background-color: @white;
		.img-container {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			position: relative;
			
			
			@media (min-width: 768px) {
				padding: 40px;
			}
		}
		.price {
			border-top: 1px solid @default-border-color;
			display: flex;
			justify-content: center;
			align-items: center;		
		}
	}
}

.featured-tld {
    margin: 0 0 20px 0;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.featured-tld .img-container {
    padding: 20px 0;
    height: 115px;
    line-height: 75px;
    overflow: hidden;
    text-align: center;
}
@media (max-width: 767px) {
    .featured-tld .img-container {
        height: 80px;
        line-height: 40px;
    }
}
.featured-tld .img-container img {
    max-width: 70%;
    max-height: 100%;
}
.featured-tld .price {
    padding: 10px 5px;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
    border-radius: 0 0 4px 4px;
}

.tld-filters {
    margin: 0 0 25px 0;
}
.tld-filters a {
    display: inline-block;
    margin-bottom: 4px;
    padding: 5px 6px;
    font-size: 90%;
    font-weight: normal;
    border-radius: 2px;
}

.@{brand}-domain-page, .onepage_cart .ajaxcart_cont {
	.suggested-domains {
		margin-top: 1rem;
		.panel-heading {
			border-color: @themeColor;
			font-weight: 500;
		}
		.list-group + .panel-footer {
			border: 1px solid @default-border-color;
			border-top-width: 0;
			
		}
		.list-group-item {
			border: 1px solid @default-border-color;
			
			.added {
				[class*="fa-"] {
					margin-right: 4px;
				}
			}
		}
		.list-group-item + .list-group-item {
			border-top-width: 0;
		}
	}

	.domain-pricing {
		font-size: 14px;
		.table-header {
			flex-direction: column;
			justify-content: space-between;
			align-items: normal;
			
			@media (min-width: 768px) {
				flex-direction: row;
				align-items: center;
			}
			
			.category-filter {
				width:100%;
				.tld-filters {
					display: flex;
					flex-wrap: wrap;
					@media (min-width: 768px) {
						max-width: 70%;
					}
					
					a {
						&:not(:last-child) {
							margin-right: 4px;
						}
					}
				}
			}
		}		
		.table-tlds {
			&.table>thead>tr>th {
				font-size: 100%;
			}
			.tld-name {
				font-size: 120%;
				font-weight: 500;
				span {
					color: @themeColor;
				}
			}
			.tld-label {
				display: block;
			}
		}
		
		@media (min-width: 768px) {
			.table-tlds {
				.tld-label {
					display: none;
				}
			}
		}
			
		@media (max-width: 767.98px) {
			.table-tlds {
				&.table>tbody>tr {
					display: flex;
					flex-wrap: wrap;
					&:not(:last-child) {
						border-bottom: 1px solid @default-border-color;
					}
				}
				&.table>tbody>tr td {
					flex: 1;
					display: block;
					border: none;
					min-width: 80px;
					padding: 0.5rem 1rem;
					
					&:first-child {
						padding-bottom: 0;
						width: 100%;
						flex: 100%;
					}
				}
				&.table>thead {
					display: none;
				}
			}
		}
			
		@media (max-width: 767px) {
			.tld-pricing-header {
				display: none;
			}
		}
	}
}

.tld-sale-group {
    padding: 1px 3px;
    text-transform: uppercase;
	color: #000;
	font-weight: 700;
}
.tld-sale-group-hot {
    background-color: #f9615a;
	color: @white;
}
.tld-sale-group-sale {
    background-color: #f7d458;
}
.tld-sale-group-new {
    background-color: #2ad588;
}

.action-icon-btns {
	a {
		position: relative;
		margin: 0 0 10px 0;
		padding: 10px 0 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		transition: all 0.3s ease;
		text-decoration: none;
		.ico-container {
			margin: 10px auto;
			font-size: 2.6em;
			line-height: 60px;
			transition: all 0.3s ease;
			i {
				color: @themeColor;
			}
		}
		span {
			color: @baseFontcolor;
		}
		&:hover, &:focus {
			.ico-container {
				font-size: 3.4em;
			}
		}		
	}
}

.home-domain-search {
	.tld-logos {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 1.4em;
		font-weight: 300;
		li {
		  float: left;
		  background-color: @white;
		  color: @baseFontcolor;
		}
		img {
			width: 60px;
		}
	}
}

//order form fix
.ajaxcart_cont {
	.input-group-text {
		margin-right: -0.25rem;
	}
}

#order-standard_cart {
	blockquote, .blockquote {
		margin: 1rem 0;
		font-size: 13px;
		font-weight: normal;
	}
	&.modern {
		.domains-section {
			padding: 3rem 0 7rem;
			.h1 {
				font-size: 26px;
				@media (min-width: 768px) {
					font-size: 43px;
				}
			}
			
			.default-captcha {
				p {
					color: @baseFontcolor;
				}
			}
			.search-query {
				border: 0 none!important;
			}
		}
		
		.@{brand}-domain-page {
			margin: -6rem auto 6rem;
			padding: 0 1rem;
		}
		.table-container {
			margin-top: 1rem;
		}
		#DomainSearchResults {
			padding: 1rem;
			background-color: @white;
			border-radius: 10px 10px 0 0;
		}
		
		@media (min-width: 768px) {
			.domains-section {
				padding: 4rem 0 10rem;
				.h1 {
					font-size: 43px;
				}
			}
			.@{brand}-domain-page {
				margin: -6rem auto 6rem;
				padding: 0 1rem;
			}			
		}
	}
	
	.addon-promo-container {
		h4 {
			margin-top: 0;
		}
		.description {
			margin: 0 0 1rem!important;
			br {
				display: none;
			}
			a {
				margin-left: 2px;
			}
		}
		div.pull-right {
			display: flex;
			justify-content: space-between;
			float: none!important;
			text-align: right;
			margin-bottom: 0.50rem;
			font-size: 14px;
			
			strong {
				font-weight: 500!important;
			}
		}
		
		div.pull-right:before {
			content: "Choose Package";
			opacity: 0.80;
		}
		
		.logo {
			.logo-icon {
				width: 80px;
				padding: 0.5rem;
				background-color: @white;
			}
		}
	}
}

.invoice-summary-card {
	.invoice-summary {
		.summary-content {
			position: relative;
			overflow: auto;
			max-height: 500px;
			font-size: 80%;
			.summary-list {
				margin: 0;
				padding: 4px;
				list-style: none;
				
				.list-item {
					display: flex;
					justify-content: space-between;
					padding: 0.5rem 0;
					
					.item-name {
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.item-value {
						text-align: right;
						padding-left: 0.05rem;
					}
				}
				
				&:first-child {
					padding: 0;
				}
				
				&:last-child {
					padding-bottom: 0;
				}
			}
		}
	}
	
	.price {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		.price-total {
			display: flex;
			align-items: center;
			font-size: 80%;			
		}
		.price-amount {
			font-size: 40px;
			font-weight: 900;
		}
	}
}

#frmPayment .paymethod-info {
	display: flex;
	align-items: center;
	
	label {
		margin-bottom: 0;
		
		.fab {
			font-size: 1.5rem;
		}
	}
}

.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
	word-wrap: normal;
}