whmcsCrosterTemplates/assets/less/others.less

/* scrollbar */
.slimScrollBar  { .border-radius(0) !important; background-color: @themeColor!important; }
.slimScrollRail { .border-radius(0) !important; }


/* Select2 custom styles */
.select2-container-multi {
	.select2-choices {
		.select2-search-choice {
			border: 1px solid @default-border-color;
			background-color: @white;
		}
	}
}


// Profile Card style
.@{brand}-team-member { 
	 margin-bottom:15px;
	 box-shadow: @box-shadow;
	 cursor: pointer;
	 
	.profile-card {
	  width:100%;
	  position:relative;
	  overflow:hidden;
	  color: @white;
	  text-align:center;
	  border-radius: 4px;
	  
	  .animate {
		.transition(all 0.3s ease-in-out);
		}
		
	  > img {
		background: rgba(0, 0, 0, 0.50);
		opacity: 0.90;
	  }
	  .profile-card-details {
		width:100%;
		height:100%;
		position:absolute;
		bottom:-100%;
		left:0;
		padding:0 15px;
		color: @white;
		.profile-card-header {
		  width:100%;
		  height:100%;
		  height:auto;
		  position:absolute;
		  bottom:-100%;
		  bottom:100%;
		  left:0;
		  padding:10px 5px;
		  background: rgba(0, 0, 0, 0.70);
		  h4, .h4, span {
			margin:0;
			padding:0;
			color: @white;
		  }
		}
		.profile-card-detail .social {
		  list-style:none;
		  padding:0px;
		  margin-top:25px;
		  
		  li {
			padding: 0px;
			display: inline-block;
			margin-right: 5px;
			a {
				color: @brand-secondary;
				.fab {
					font-size: 27px;
				}
				&:hover, &:focus {
					color: lighten(@brand-secondary, 5%);
				}
			}
			
			&:last-child {
				margin: 0;
			}
		  }

		}
	  }
	  
	  .profile-card-details::-webkit-scrollbar {
		width:8px;
	  }
	  .profile-card-details::-webkit-scrollbar-button {
		width:8px;
		height:0px;
	  }
	  .profile-card-details::-webkit-scrollbar-track {
		background:transparent;
	  }
	  .profile-card-details::-webkit-scrollbar-thumb {
		background:none;
	  }
	  .profile-card-details::-webkit-scrollbar-thumb:hover {
		background:none;
	  }
	  

	}
	
	&:hover {
		.profile-card-details {
			bottom:0px;
			overflow:auto;
			padding-bottom:15px;
			background: rgba(0, 0, 0, 0.70);
		
			.profile-card-header {
				position:relative;
				bottom:0px;
				padding-top:45px;
				padding-bottom:25px;
				background: none;
				border-bottom: 1px solid @white;
			}
		}
	 }
	
	.profile-discription {
		padding: 15px;
		cursor: pointer;
		display: none;
	}

}





.@{brand}-box {
	margin-bottom: 20px;
	a, &:hover, &:active, &:focus {
		text-decoration: none!important;
	}
	.media {
		padding: 10px 0; 
		
		.pull-left {
			margin-right: 0;
		}
	}
	.border-right, &.border-right {
		border-right: 1px dotted @default-border-color!important;
	}
	
	@media (max-width:991px) {
		.border-right, &.border-right {
			border-right: 1px dotted transparent!important;
		}
	}
	.media-body {
		padding-right: 10px;
		padding-left: 10px;
		
		.media-heading {
			font-weight: 500;
		}
	}
	.icon-box {	
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.50rem;
		width: 50px; height: 50px;
		border: 2px solid @default-border-color;
		.border-radius(100%);
	}
	
	.feature-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		img {
			max-width: 100px;
		}
	}
	
	&.s2 {
		position: relative;
		padding: 30px 15px;
		text-align: center;
		margin: 15px 0;
		box-shadow: @box-shadow;
		transition: all 0.3s ease-in-out;
	
		[class*="fa-"] {
			font-size: 5em;
		}
		p {
			margin-bottom: 0;
		}
	
		&:hover, &:focus, &.active {
			transform: translateY(-5px);

		}	
	}
	
	&.s3 {
		text-align: center;
		padding: 15px;
		[class*="fa-"], [class*="glyphicon-"] {
			font-size: 5em;
		}
	
	}
	
	&.s4 {
		position: relative;
		display: block;
		text-decoration: none;
		padding: 30px;
		box-shadow: @box-shadow;
		transition: all 0.3s ease-in-out;
		border-radius: 4px;
		overflow: hidden;
		
		h1, h2, h3, h4, .h1, .h2, .h3, .h4 { 
			
		}
		&:hover, &:focus {
			transform: translateY(-5px);
		}
		
		&.static {
			&:hover, &:focus {
				transform: translateY(0);
				&:before {
					display: none;
				}
			}
		}
	}
}

.partners-slider {
	.owl-item {
		img {
			opacity:0.5;
			
			&:hover, &:focus {
				opacity:1;
			}
		}
	}
}

mark {
    background-color: @sticker-bg;
    .text-color(@sticker-bg);
    display: inline-block;
    padding: .08em .2em;
    margin: -.08em 0;
    position: relative;
    line-height: 1.42857143;
	font-weight: 700;
	
	a {
		.text-color(@sticker-bg)!important;
		text-decoration: underline;
	}
	
	&:after {
		content: "";
		background-color: @sticker-bg;
		position: absolute;
		top: 0;
		right: -.1em;
		width: .2em;
		height: 1.535em;
		.transform( skew(-7deg,0));
	}
}

.@{brand}-latest-promo {
	background-color: #fedc45;
	color: #000;
	padding: 15px;
	display: block;
	text-decoration: none!important;
	
	.promo-container {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		text-align: center;
		@media (min-width: 636px) {
			font-size: 18px;
		}
		
		@media (min-width: 992px) {
			flex-direction: row;
		}
		
		.counter {		
			ul {
				list-style: none;
				margin: 0; padding: 0;
				display: flex;
				align-items: center;
				flex-direction: row;
				justify-content: space-between;
				li {
					margin-right: 5px;
					font-size: 90%;
					&:last-child {
						margin-right: 0;
					}
					#offer-Days, #offer-Hours, #offer-Minutes, #offer-Seconds {
						font-size: 110%;
						font-weight: 500;
					}
				}
			}
		}
	}
	
	&:hover, &:focus {
		color: #000;
	}
}

@media (min-width: 991px) {
	.vertical-align {
	  display: flex;
	  flex-direction: row;
	}

	.vertical-align {
		[class^="col-"],[class*=" col-"] {
			&:last-child {
				display: flex;
				align-items: center;
			}
		}
	}

}




@media (min-width: 992px) {
	.zig-zag-row {
		table-layout: fixed;
		display: table;
		width: 100%;
		
		[class^="col-"],[class*=" col-"] {
			&.data-blocks-g {
				display: table-cell;
				vertical-align: middle;
				float: none;
			}
		}
	}
}

.checklist {
	&.list-inline {
		li {
			padding: 0 7.5px;
			border-right: 1px dotted @default-border-color;
			
			&:first-child {
				padding-left: 0;
			}
			&:last-child {
				border-right: 0 none;
			}
		}
	}
	li {
		position: relative;
		list-style: none;
		padding: 5px 0 0 20px;
		
		&:before {
			position: absolute;
			content: "\f00c";
			margin-right: 4px;
			font-family: "Font Awesome 5 Pro";
			color: @themeColor;
			font-size: @baseFontSize + 2;
			left: 0;
		}
	}
}




/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:@gray-darker; opacity: 0.9;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px;}
    #cboxTopRight{width:21px; height:21px;}
    #cboxBottomLeft{width:21px; height:21px;}
    #cboxBottomRight{width:21px; height:21px;}
    #cboxMiddleLeft{width:21px;}
    #cboxMiddleRight{width:21px;}
    #cboxTopCenter{height:21px;}
    #cboxBottomCenter{height:21px;}
    #cboxContent{overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(../../images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../../images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../../images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../../images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../../images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/* colorbox custom style */
#colorbox:focus , #colorbox:active {
 outline:none;
}
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
#cboxMiddleLeft, #cboxMiddleRight,
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight
{
  background:none !important;
  opacity:0;
}
#cboxContent {
  border:12px solid @gray-darker;
  background-color:@white;
  padding:7px;
}

#cboxCurrent {
  left:64px;
  margin-bottom:4px;
  font-size: 14px;
}
#cboxTitle {
  margin-bottom:4px;
  font-size: 14px;
  color:@gray;
}


#cboxNext , #cboxPrevious , #cboxClose {
 background:none;
 text-indent:0;
 width:26px; height:26px; line-height:22px;
 padding:0 4px;
 text-align:center;
 outline: none!important;
 border:2px solid @gray-lighter;
 border-radius:16px;
 
 color:#666;
 font-size:12px;

 margin-left:5px;
 margin-bottom:5px;
}
#cboxNext:hover , #cboxPrevious:hover {
 color:@gray;
 border-color:@default-border-color;
}
#cboxContent {
 overflow:visible;
}
#cboxClose {
    background-color: @white;
	    
	border: 2px solid @white;
    border-radius: 32px;
    
    color: @white;
	font-size: 21px;
	
    height: 28px;
	width: 28px;
	
	padding-bottom: 2px;
	margin-left: 0;
	
	right: -14px;
    top: -14px;
}


#cboxLoadingOverlay {
  background:none !important;
}
#cboxLoadingGraphic {
  background:@white none !important;
  text-align:center;
  
  > [class*="fa-"] {
	 display:inline-block;
	 background-color:@white;
	 border-radius:8px;

	 width:32px; height:32px;
	 position:relative; top:48%;


	 text-align:center;
	 vertical-align:middle;
	 
	 
	 font-size:24px;
	 color:@brand-warning;
 }

}


.@{brand}-bg-shapes-right {
	position: absolute;
	height: 100%;
	width: 100%;
	right: 0;
	top: 0;
	overflow:hidden;
	&:before {
		content: "";
		width: 300px;
	    height: 150px;
	    background: rgba(256, 256, 256, 0.1);
	    position: absolute;
	    right: -60px;
	    top: 0;
	    border-radius: 4px;
		transform: skew(25deg, -10deg);
        transform-origin: top left;
	}
	
	&:after {
		content: "";
		width: 150px;
	    height: 600px;
	    background: rgba(256, 256, 256, 0.15);
	    position: absolute;
	    right: 0px;
	    top: 30px;
	    border-radius: 6px;
		transform: skew(25deg, 10deg);
        transform-origin: top left;
	}
	
	&.lighter {
		&:before {
			background: rgba(0, 0, 0, 0.1);
		}
		
		&:after {
			background: rgba(0, 0, 0, 0.15);
		}	
	}
}

.@{brand}-bg-shapes-left {
	position: absolute;
	height: 100%;
	width: 100%;
	right: 0;
	top: 0;
	overflow:hidden;
	&:before {
		content: "";
		width: 300px;
	    height: 150px;
	    background: rgba(256, 256, 256, 0.1);
	    position: absolute;
	    left: -90px;
	    top: 0;
	    border-radius: 6px;
		transform: skew(25deg, -12deg);
        transform-origin: top left;
	}
	
	&:after {
		content: "";
		width: 150px;
	    height: 600px;
	    background: rgba(256, 256, 256, 0.15);
	    position: absolute;
	    left: 0px;
	    top: 30px;
	    border-radius: 4px;
		transform: skew(-25deg, 10deg);
        transform-origin: top left;
	}
	
	&.lighter {
		&:before {
			background: rgba(0, 0, 0, 0.1);
		}
		
		&:after {
			background: rgba(0, 0, 0, 0.15);
		}	
	}
}

//WHMCS 21

.modal-localisation {
	.modal-content {
		background-color: @dmb;
	}
	.modal-body {
		background: url(../../img/worldmap.png);
		background-size: cover;
		padding: 30px;
		
		.close {
			font-size: 27px;
			outline:0 none !important;
			color: @white;
			
			&:hover, &:focus {
				color: @white;
			}
		}
		h5, .h5, h4, .h4 {
			font-size: @baseFontSize + 3;
			color: @white;
		}
		
		.fa-times {
			color: @white;
		}
	}
	.item-selector {
		.item {
			display: flex;
			align-items: center;
			margin: 2px 0;
			padding: 0 7.5px;
			border: 1px solid rgba(255,255,255,0.30);
			border-radius: 0;
			color: @white;
			text-decoration: none;
			height: 35px; min-height: 35px;
			.iti-flag {			
				margin-right: 5px;
			}
			&.active, &:hover, &:focus {
				background-color: @gray-lighter;
				color: @baseFontcolor;
			}
		}
		
		&.currency {
			.item {
				justify-content: center;
			}
		}
	}
	
	.modal-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0 none;
	}
}