whmcsCrosterTemplates/assets/less/main.less

html {
  position:relative;
  min-height:100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}
html, body {
	height: auto;
	letter-spacing: -.01em;
}

svg:not(:root){overflow:hidden;}
svg { vertical-align: middle; border-style: none;}

body {
	color: @baseFontcolor;
	overflow-x: hidden;
	
	&.login {
		min-height: 100%;
	}
	@media only screen and (max-width:992px) {
		margin-top: 57px;
		&.pre-header-enabled {
			margin-top: 97px;
		}	
	}
	&.left-layout {
		margin-top: 57px;
		&.pre-header-enabled {
			margin-top: 97px;
		}
	}
	
	&.spc {
		margin-top: 0;
		
		@media only screen and (max-width:992px) {
			#order-standard_cart {
					padding: 0 0 90px 0;
			}
		}
	}
	
	&.spcnofooter {
		@media only screen and (max-width:992px) {
			#order-standard_cart {
				padding: 0 0 90px 0;
			}
		}
	}
	
	
	&.top-nav-collapse {
		.navbar-side {
			top: 57px;
		}
		&.pre-header-enabled {
			.navbar-side {
				top: 97px;
			}
		}
		&.left-layout {
			&.pre-header-enabled {
				.navbar-side {
					top: 103px;
				}
			}			
		}
	}
	
	&.pre-header-enabled {
		.cros-navbar {
			flex-direction: column;
			@media (min-width: 992px) {
				.user_icon {
					a {
						span {
							display: flex;
							align-items: center;
							justify-content: center;
							&.user-info {
								display: flex;
								align-items: center;
								margin-left: 4px;
								&:after {
									content: "";
									margin-left: 2px;
									vertical-align: middle;
									border-top: 4px dashed;
									border-right: 4px solid transparent;
									border-left: 4px solid transparent;								
								}
							}
						}
					}
				}
			}
		}
	
	}
	@media (max-width:633px) {
		&.pre-header-enabled {
			.cros-navbar {
				.navbar-header {
					flex-direction: row;	
					.top {
						background-color: transparent;
						border: 0 none;
						
						.secondary-menu-mobile.nav li .dropdown-toggle{
							background-color: transparent!important;
						}
					}
				}
				
				&.primary, &.dark  {
					.navbar-header {	
						.top {
							li {
								.dropdown-toggle {
									color: @navbarDarklink;
								}
							}
						}
					}					
				}
			}
		}
	}
	
	&.c-depth {
		.TM-card, .table-container, .panel.panel-default, .panel.panel-warning, .tiles .tile a, .kbcat .kb-article, .ticket-departments a, .ticket-departments.list, #promotions-slider, .alert-lg, .card, .sidebar.default .panel-sidebar, #order-standard_cart .product, #order-standard_cart .domain-selection-options .option-selected, #order-standard_cart .cc-input-container, .landing-page.ssl .validation-levels .item {
			box-shadow: @box-shadow;
		}		
	}
	
	&.h-depth {
		.cros-navbar {
			box-shadow: @box-shadow;
		}	
	}
	
	&.f-depth {
		.block-footer {
			.cros-partners, .payment-icons ul {
				box-shadow: @box-shadow;
			}
		}	
	}
	
	&.card-nobg {
		.TM-card {
			background-color: @white;
		}
	}
	
	&.no-radius {
		.cros-pricing-table, .cros-team-member, .cros-box.s4,
		.cros-team-member .profile-card, .TM-card, .panel, .card, .btn,
		section.testimonials .testimonials-carousel .owl-stage-outer .owl-stage .owl-item .testimonial-item,
		.product-details .product-holder, .product-details .product-info.cpanel-usage-stats .cPanelExtrasPurchasePanel,
		.product-details .product-info.cpanel-usage-stats,
		.TM-card.annoucements .annuncement-item.latest,
		.cros-navbar .navbar-nav li ul.dropdown-menu,
		.table-container, .domains-section .domain-hero .serach-form,
		.landing-page .pricing-item, .landing-page.weebly .weebly-lite-plan,
		.landing-page.ssl .validation-levels .item,
		.landing-page .faq .panel-group .panel,
		.landing-page .faqs .panel-group .panel,
		.landing-page.mail-services .product-options .item,
		.landing-page.sitelock .plans .plan,
		.landing-page.sitelock .emergency .emergency-buy-banner,
		.tiles .tile a, .tiles .tile .no-link, .rounded, .onepage_cart .ajaxcart_cont .coupon_cont .form-group .input-group,
		#order-standard_cart .domain-selection-options .option-selected, .ticket-departments.list,
		.kbcat .kb-article, .kbarticles, .kbsuggestions, .sticker-wrapper.s1 .sticker, .block-footer .payment-icons ul, .alert-lg, .ticket-departments a, .login-box, .login-container .social-or-login :first-child,
		.cros-checkbox[type=checkbox] + span.pcb, .cros-checkbox[type=radio] + span.pcb, .signups[type=radio] + span.pcb, .no-radio[type=radio] + span.pcb, .nocheck[type=checkbox] + span.pcb
		{
			border-radius: 0;
		}
	}
	&.dark-mode {
		.SwicthtoLight {
			display: none;
		}
		.SwicthtoDark {
			display: inline-block;
		}
		.logo-light {
			display: none;
		}
		.logo-dark {
			display: block;
		}

	}
	
	.SwicthtoLight {
		display: inline-block;
	}
	.SwicthtoDark {
		display: none;
	}
	.logo-light {
		display: block;
	}
	.logo-dark {
		display: none;
	}
	
}


@media (max-width:991px) {
	.container {
		width: 100%!important;
		max-width: 100%!important;
	}
}

@media (min-width:1320px) {
\%responsive-container, .container, .container-sm, .container-md, .container-lg, .container-xl {
		max-width: 1288px;
	}
}


#page-wrapper, .body-container {
    display: flex;
    flex-direction: column;
	min-height: 100vh;
}

@media (min-width:992px) {
  #page-wrapper {
	margin: 0 0 0 @navSideWidth;
	&.collapsed {		
		margin: 50px 0 0 @sidebar-min;
	}
	&.no-sidebar {
		margin: 50px 0 0 0;
	}
	&.fixed {
		&.collapsed {
			margin: 0 0 0 @sidebar-min;
		}
		&.no-sidebar {
			margin: 0;
		}
	}

	.container {
		max-width: 100%;
	}
  }
}

@media (min-width:768px) {
	#page-wrapper {
		.container {
			padding-left: 40px;
			padding-right: 40px;
		}
	}
}

@media (min-width: 1200px) {
	#page-wrapper {
		.container {
			max-width: 1350px;
			width: 100%!important;
		}
	}
}

@media (max-width: 1199px) {
	#page-wrapper {
		.panel-sidebar, .card-sidebar {
			&.panel-client-details, &.panel-client-details, &.panel-by-month {
				display: none!important;
			}
			&.panel-actions {
				.list-group {
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
				}
			}
		}
	}
}

.fa, .fab, .fad, .fal, .far, .fas {
 &:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block; 
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; 
 }
}

a {
	color: @link-color;
}

a:hover, a:active, a:focus {
	color: @link-hover-color;
}

a, a:focus, a:active, a:hover {
	outline:0 none !important;
}
::-moz-focus-inner {
	border:0 none;
	-moz-outline-style: none;
}


h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	color: @baseHeadingcolor;
}

h4, .h4 {
	font-size: 1.25rem;
}

h5, .h5 {
	font-size: 1rem;
}

.page-header {
	margin: 30px 0 15px;
	border-bottom: 1px solid @default-border-color;
	h1 {
		margin: 0;
		font-size: 26px;
		
		:before {
			content: "\f101";
			margin-right: 4px;
			font-family: FontAwesome;
			color: @themeColor;
		}
	}	
	.sub-title {
		font-size: 60%;
		text-transform: none;
		color: @gray-light;
	}

	&.title {
		margin: 0 -15px 25px;
		border-bottom: 1px solid @default-border-color;
		color: @gray-dark;
		padding: 15px;
		background-color: @white;
		
		@media (max-width: 639px) {
			h1 {
				font-size: 21px;
			}
		}
	}	
}

.owl-carousel, .swiper-container .swiper-slide, .swiper .swiper-slide, .swiper [class*=" col-"], .plans_slider__nav .btn__text {
   box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

// Bootstrap Overrides
// -------------------------

// Blockquotes
blockquote, .blockquote {
	padding: 0.625rem 1.25rem;
	margin-bottom: @spacer;
	#font-size(@blockquote-font-size);
	border-left: 5px solid @themeColor;
	font-weight: 300;
}
blockquote.text-right, .blockquote.text-right {
	border-left: 0 none;
	border-right: 5px solid @themeColor;
}

blockquote.text-center, .blockquote.text-center {
	border: 0 none;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .modal, .accordion-toggle:focus, .btn:focus {
	outline: none;
}

[class*=" fa-"], [class^="fa-"] {
	text-align: center;
}

[role=button] {
	cursor: pointer;
}

.popover {
	width: auto;
	border-radius:0;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
	background-color: @themeColor;
	color: @white;
}
.nav-tabs, .nav-pills {
	.open > a, .open > a:hover, .open > a:focus {
		border-color: @themeColor;
	}
}

.nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-pills > li > a:hover, .nav-pills > li > a:focus, .nav-tabs .open > a, .nav-tabs .open > a:hover, .nav-tabs .open > a:focus, .nav-pills .open > a, .nav-pills .open > a:hover, .nav-pills .open > a:focus, .nav-tabs ul.dropdown-menu > li > a:hover, .nav-tabs ul.dropdown-menu > li > a:focus, .nav-pills ul.dropdown-menu > li > a:hover, .nav-pills ul.dropdown-menu > li > a:focus {
	background-color: @gray-lighter;
}


button.close, .close {
	outline: none!important;
}

.modal-content {
	.modal-header {
		background-color: @gray-lighter;
		border-radius: 6px 6px 0 0;
		.modal-title {
			margin: 0;
			font-size: 1.25rem;
		}
		.close {
			font-size: 27px;
			outline:0 none !important;
		}
	}
	.modal-footer {
		justify-content: flex-start;
		text-align: left;
		border-top-color: @default-border-color;
	}
}


.dropdown-toggle::after {
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}


.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {
    border-top: 0;
}

.nav-pills {
	.nav-link {
		&:hover {
			background-color: transparent;
		}
		
		&.active {
			&:hover {
				background-color: @themeColor;
			}		
		}
	}
}

// WHMCS Overrides
// -------------------------

.adminreturndiv {
    display: none !important;
}

.TM-card {
	background-color: @gray-lighter;
}

.TM-card {
	&.annoucements {
		box-shadow: none !important;
	}
}

.panel {
	&.panel-default {
		.panel-heading {
			background-color: @white;
			border-color: @default-border-color;
		}
		&.cart-item {
			.panel-body {
				.row {
					margin-left: 0;
					margin-right: 0;
					align-items: center;
				}
			}
			.item-group, .addon-item-group {
				font-size: 90%;
				color: #999999;
			}
			.item-configoption {
				margin-top: 8px;
			}			
			.item-addons {
				margin: 0.5rem 0;
				font-size: 80%;
				.prod-addons-container {
					border-left: 2px solid rgba(0,0,0,.1);
					&.configuration {
						padding-left: 15px;
					}
				}
			}
			.item-domain {
				font-size: 85%;
				color: @themeColor!important;
				padding-bottom: 4px;
			}
			.panel-body {
				border-bottom: 1px solid @default-border-color;
				span:not(.caret):not(.renewal-price) {
					display: block;
				}
			}
			.panel-footer {
				margin-top: -1px;
			}
			.item-price, .addon-item-price {
				strong, .strong {
					font-weight: 500;
				}
				small, .small {
					font-size: 80%;
				}
				.cycle {				
					&.renewal {
						.renewal-price {
							font-size: 85%;
						}
					}
				}
			}
			.item-actions {
				display: flex;
				justify-content: flex-end;
				flex-wrap: nowrap;
			}
			
			.item-qty, .addon-item-qty {
				margin: 4px 0;
				.form-control {
					height: 28px!important;
					margin-bottom: 4px;
					padding: 0.375rem 0;
					max-width: 100px;
				}
				@media (min-width: 576px) {
					text-align: center;
					margin-top: 0;
				}
			}
			
			@media (max-width: 991px) {
				border: 0 none;
				box-shadow: none!important;
				.panel-heading {
					display: none;
				}
				.panel-footer {
					border: 1px solid @default-border-color;
					border-radius: 4px;
				}
				.panel-body {
					padding: 0;
					box-shadow: @box-shadow;
					border: 1px solid @default-border-color;
					margin-bottom: 1rem;
					border-radius: 4px;
					
					.row {
						position: relative;
						margin-left: 0;
						margin-right: 0;					
					}
				}
				.items {
					order: 1;
					min-width: 70%;
					flex-basis: 70%;
					width: 70%;				
				}
				
				.item-title {
					padding: 1rem 0;
				}
				.item-actions {
					order: 2;
					min-width: 30%;
					flex-basis: 30%;
					width: 30%;
					padding: 1rem;					
				}
				.item-price, .item-qty {
					position: relative;
					min-width: 100%;
					flex-basis: 100%;
					width: 100%;
					min-height: 56px;	
					padding: 1rem;
					&:after {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						display: block;
						content: "";
						height: 1px;
						background-color: @default-border-color;
					}					
				}
				.item-addons {
					order: 2;
				}
				.item-qty {
					order: 3;
				}
				.item-price {
					order: 4;
				}
				
				.prod-qty-empty, .addon-qty-empty {
					display: none;
				}
			
			}
			
			@media (min-width: 992px) {
				.pricing-heading, .item-heading {
					display: none!important;
				}
			}
			
		}
	}
}

.md-editor .md-footer, .md-editor>.md-header {
	background-color: @gray-lighter!important;
}

.landing-page {
	.panel {
		&.panel-default {
			box-shadow: none!important;
		}
	}
}


.landing-page {	
	&.mail-services {
		.content-block {
			.item {
				p {
					font-size: @baseFontSize - 1!important;
				}
			}
		}
		.benefits {
			font-size: @baseFontSize!important;
		}
	
	}
}

.landing-page.mail-services .product-options .item {
	box-shadow: @box-shadow;
}

#registration .field, #registration .form-control, #registration .prepend-icon .field-icon {
	height: 43px!important;
}

#registration .prepend-icon .field-icon {
	line-height: 43px!important;
}


.table-container {
	.listtable {
		.table {			
			&.table-hover {
				tbody {
					tr {
						&:hover, &:focus {
							background-color: @gray-lighter;
						}
					}
				}
			}
		}
	}
}

.header-lined .search-group {
    min-width: 260px;
}


.iradio_square-blue, .icheckbox_square-blue {
	background: none!important;
	width:auto!important; height:auto!important;
	&:before {
		display: inline-block;
		z-index: 2;
		font-family: "Font Awesome 5 Pro";
		font-size: 21px;
		font-weight: 300;
		color: @themeColor;
	}			
	&.checked {
		&:before {
			font-weight: 900;
		}
		
		&.hover {
			&:before {
				font-weight: 900;
			}
		}
	}	
	&.hover {
		&:before {
			font-weight: 400;
		}
	}
}

.iradio_square-blue {
	&:before {
		content: "\f111";
	}		
	&.checked {
		&:before {
			content: "\f192";
		}
	}
}

.icheckbox_square-blue {
	&:before {
		content: "\f0c8";
	}		
	&.checked {
		&:before {
			content: "\f14a";
		}
	}
}	


.card {
	border-color: @default-border-color;
	.card-header, .card-footer {
		background-color: @gray-lighter;
		border-color: @default-border-color;
	}
}

.modal-backdrop.show {
	opacity: 0.9;
}