whmcsCrosterTemplates/assets/less/utility.less

.space() {
	max-height:1px;
	min-height:1px;
	overflow:hidden;
}
.space { .space(); margin:12px 0; }

.spaceX (@index) when (@index > 0) {
	.space-@{index} { .space(); margin:unit(@index,px) 0 unit(@index - 1,px); }
	.spaceX(@index - 2);
}
.spaceX(64);//produce spaces

.hr {
 display:block;
 height:0px; overflow:hidden; font-size:0;
 border-top:1px solid @default-border-color;
 margin:12px 0;
}
.hr-double {
 height:3px;
 border-top:1px solid @default-border-color;
 border-bottom:1px solid @default-border-color;
}
.hr.dotted , .hr-dotted{ border-top-style:dotted;}
.hr-double.dotted { border-bottom-style:dotted;}


.hrX (@index) when (@index > 0) {
	.hr-@{index}, .hr@{index} { margin:unit(@index,px) 0; }
	.hrX(@index - 2);
}
.hrX(32);

hr {
    &.separator {
        clear: both;
        margin-top: 10px;
        margin-bottom: 13px;
        border: 0;
        height: 1px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0));
    }
}

.biggerX (@index) when (@index < 310) {
	.bigger-@{index} { font-size: unit(@index,~"%"); }
	.biggerX(@index + 10);
}
.biggerX(110);
.bigger-125 { font-size:125%;}
.bigger-175 { font-size:175%; }
.bigger-225 { font-size:225%; }
.bigger-275 { font-size:275%; }

.bigger-500 { font-size:50px; line-height: 50px; }

.smallerX (@index) when (@index > 10) {
	.smaller-@{index} { font-size: unit(@index,~"%"); }
	.smallerX(@index - 10);
}
.smallerX(90);
.smaller-75 { font-size:75%;}



.action-buttons a {
  margin:0 3px;
  display:inline-block;
  opacity:0.85;
   .transition(~"all 0.1s");
  
  &:hover {
	text-decoration:none;
	.transform(~"scale(1.2)");
	opacity:1;
  }
}

.lighter { font-weight: 300!important; }
.bolder { font-weight: bolder!important; }
.text-underline { text-decoration: underline; }
.heading { padding: 0; margin: 0; height: 25px; line-height: 25px; }

// borders
.no-padding { padding: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }
.no-padding-top { padding-top: 0 !important; }
.no-padding-left { padding-left: 0 !important; }
.no-padding-right { padding-right: 0 !important; }
.no-margin { margin: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }
.no-margin-top { margin-top: 0 !important; }
.no-margin-left { margin-left: 0 !important; }
.no-margin-right { margin-right: 0 !important; }
.no-border { border:none!important; }
.no-border-bottom { border-bottom:none!important; }
.no-border-top { border-top:none!important; }
.no-border-left { border-left:none!important; }
.no-border-right { border-right:none!important; }
.no-shadow { box-shadow:none!important; }
.bg-transparent { background: transparent!important; }

.border-top-bottom { border-top: 1px solid @default-border-color; border-bottom: 1px solid @default-border-color;}
.bordered {
	border-bottom: 3px solid @brand-secondary;
	display: inline-block;
}

.inline { display: inline-block !important; }
.block { display: block !important; }

.middle { vertical-align: middle; }
.align-middle { vertical-align: middle !important; }
.align-top { vertical-align: top !important; }
.align-bottom { vertical-align: bottom !important; }
.fw-900 { font-weight: 900!important; }
.fw-700 { font-weight: 700!important; }
.fw-500 { font-weight: 500!important; }
.fw-400 { font-weight: 400!important; }
.fw-300 { font-weight: 300!important; }
.fw-100 { font-weight: 100!important; }
.img-responsive { max-width: 100%; height: auto;}
.pull-left { float: left !important;}
.pull-right { float: right !important;}
.d-none-280 {
	@media (max-width: 280px) {
		display: none !important;
	}
}

.h-rounded {
	border-radius: .25rem .25rem 0 0;
}

.space-2x {
	.tile-button, .portlet, .well, .panel, .note, .notice, .progress, .alert, .pricing-table-1, .pricing-table-2, .pricing-table-3, .pricing-table-4, .@{brand}-tabsbar, .@{brand}-tabs, dl {
		margin-bottom: 20px;
	}
	.well, .portlet .portlet-body {
		padding: 25px;
		
		.well {
			padding: 15px;
		}
	}
}

.padding-25 {
	padding: 25px;	
}
.padding-4x {
	padding: 60px;	
}

.padding-2x {
	padding: 30px;	
}

.padding-all {
	padding: 15px;	
}


.row {
	&.no-gutter {
		margin:0 auto;
		
		[class*='col-']:not(:first-child), [class*='col-']:not(:last-child) {
			padding-left: 0; padding-right: 0;
		}
	}
	&.full-width {
		margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 0; max-width: 100%; width: 100%;
	}
}
.center-block { margin: 0 auto; }

// for toggle 
.toggle {
	cursor : pointer;
}

// Flex
.space-between {justify-content: space-between !important;}
.mw-1288{ width: 100%; max-width: 1288px;}
.mw-928{ width: 100%; max-width: 928px;}
.mw-768{ width: 100%; max-width: 768px;}
.mx-auto{margin: 0 auto;}
.mw-928-strictly{ width: 100%; max-width: 928px!important;}
.mw-768-strictly{ width: 100%; max-width: 768px!important;}
.mw-500{ width: 100%; max-width: 500px;}
.mx-auto-strictly{margin: 0 auto!important;}

.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-warning, .gray, .dark, .inverse, .bg-gray, .bg-secondary {
	color: @white!important;
	&.note, &.alert {
		.close {
			opacity:1;
			color: @white;
		}
	}
	p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
		color: @white;
	}
}

.bg-primary, &.primary {
	.white {
		background-color: var(--primary);
	}
	.border {
		border-color: darken(@themeColor, 20%)!important;
	}
}

.dark, &.inverse {
	.white {
		background-color: @gray-darker;
	}
	.border {
		border-color: lighten(@gray-darker, 20%)!important;
	}
}

.bg-gradient {
	background: linear-gradient(90deg,darken(@themeColor, 25%),@themeColor);
}

.bg-secondary {
	background-color: @brand-secondary!important;
	border-color: @brand-secondary!important;	
}

.bg-light {
	background-color: @gray-lighter!important;
}

.text-light {
	color: @gray-lighter!important;
}

.text-dark {
	color: @gray-darker!important;
}

.bg-dark {
	background-color: @gray-darker!important;
}

.text-secondary {
	color: @brand-secondary!important;
}

.dark, .inverse {
	background-color: @gray-darker!important;
	border-color: @gray-darker!important;
}
.text-gray {
	color: @gray-light!important;
}
.bg-gray {
	background-color: @gray!important;
}

.white {
	background-color: @white;
}
.text-white {
	color: @white;
}

.text-base {
	color: @baseFontcolor;
}

.light {
	background-color: @gray-lighter;
	border-color: @default-border-color;
	color: @baseFontcolor;
}

.mr-auto {margin-right: auto!important;}
.ml-auto {margin-left: auto!important;}



.bg-checkered {
    background-repeat: no-repeat,repeat,repeat;
    background-image: -o-radial-gradient(transparent,transparent 50%,#fff),-o-linear-gradient(left,transparent,transparent 32px,#EDF0F5 32px,#EDF0F5),-o-linear-gradient(top,transparent,transparent 32px,#EDF0F5 32px,#EDF0F5);
    background-image: radial-gradient(transparent,transparent 50%,#fff),linear-gradient(to right,transparent,transparent 32px,#EDF0F5 32px,#EDF0F5),linear-gradient(to bottom,transparent,transparent 32px,#EDF0F5 32px,#EDF0F5);
    background-size: 100% 100%,calc(32px + 1px) calc(32px + 1px),calc(32px + 1px) calc(32px + 1px);
	background-color: @white;
}

// loader
#overlay {
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}


.btn_loader {
	&.btn_loading {
		position: relative;
		.btn_text {
			visibility: hidden;
		}
		.btn_loading_icon {
			.spanner {
				height: 9px;
				div, span {
					width: 8px;
					height: 8px;
					background: rgba(255, 255, 255, 0.7);
				}
			}
		}
		
		&.btn-default {
			.btn_loading_icon {
				.spanner {
					div, span {
						background: rgba(0, 0, 0, 0.7);
					}
				}
			}		
		}
	}
}

.section-overlap {
	&.site-banner-domain,
	&.mass-head .hero-bg-wrap,
	&.cros-Slider .slides .hero-outer,
	&.site-banner .banner_body {
		padding-bottom: 200px!important;
	}
}

.sec {
	&.products, &.features, &.gallery {
		&.margin-up {
			.sec-description {
				display: none;
			}
		}
	}
}

.sec {
	&.features, &.gallery {
		&.margin-up {
			overflow: visible;
			.banner-content-container {
				.feature-item {
					&.has-slider {
						margin-top: 0;
					}
				}
				.banner_content {
					margin-top: -110px;
					@media (min-width: 992px) {
						margin-top: -170px;
					}
				}
			}
		}
	}
}

.has-link {
	cursor: pointer;
}