/*
	Theme Name: CleanPixel
	Author: KBRmedia
	Author URI: http://gempixel.com  
	Version: 2.9
	Date: 2020-09-15
	Copyright: This theme is designed to be used only with a valid license of Premium URL Shortener and cannot be resold or reused in any other applications without prior consent from the author. You are however free to customize this theme for your own purpose. Please contact the author, if needed, to clarify.

	This file and formating is used to identify each theme and provide information about the author and version. Keep the formating as clean as possible.
*/

// Colors
@blue: #0067F4;
@secondary: #2148b1;
@green: #82e26f;
@red: #fd0035 ;
@black: #293441;
@yellow: #FFB400;
@violet: #9C27B0;
@body_color: #fff;
@header_color: @black;
@calltoaction: #e8e8e8;

@dark: #030D1E;

@body: #e9ebef;

@header: #fff;
@hero: @blue;
@mainForm: #fff;
@content_bg: #fff;

@facebook_button: #3B5998;
@twitter_button: #409DD5;
@google_button: #D34836;

@sidebar: #030D1E;

// Body
body{
	background-color: @body;
	color: #6F7580;
	font-size: 14px;
	min-height: 100%; 
	iframe[src="about:blank"]{
		display:none;
	}
	a{
		color: @black;
		text-decoration: none;
		&:hover{
			color: lighten(@blue, 10%);
			text-decoration: none;
		}
		&:active, &:focus{
			text-decoration: none;
		}
		&#back-to-top {
		  display: none;
		  position: fixed;
		  z-index: 9999;
		  bottom: 10px;
		  right: 10px;
		  background: @black;
		  color: #fff;
		  font-weight: 700;
		  padding: 2px 8px;
		  font-size: 12px;
		  text-decoration: none;
			box-shadow: 0 0px 15px rgba(0,0,0,0.3);		  
			.border-radius();
		}	
	}
	p{
		&.featureP{
			max-width: 650px;
			margin: 0 auto;
			font-size: 18px;
			line-height: 30px;
			color: lighten(@black, 35%);
		}
	}
	.label{
		padding: 2px 8px;
		.border-radius(3px);
		.label-success{
			background: @green;
			color: #fff;
		}
	}
	img{
		&.round{
			border-radius: 50px;
		}
	}
	pre{
		margin: 30px 0;
		background: #fafafa;
		span{
			display: block;
			line-height: 25px;
			&.m-x-3{
				line-height: 30px;
				color: @black;
			}
			&.m-x-4{
				margin-left: 15px;
				color: @black;
			}
			&.m-x-5{
				margin-left: 35px;
				color: @black;
			}
			&.m-x-6{
				margin-left: 50px;
				font-weight: 700;
				color: @black;
			}							
		}
	}
	textarea.form-control{
		border-color: #e0e0e0;
		&:focus{
			box-shadow: none;
		}
	}
	input.form-control{
		padding: 10px;
		border-color: #e0e0e0;
		height: auto;
		.border-radius(5px);
	}
	.input-group-addon{
		border-color: #e0e0e0;
		.border-radius(5px 0 0 5px);
	}
	.nav > li > a:hover, .nav > li >a:focus {
		background: transparent;
		outline: none;
	}
	.form-group{
		label{
			margin-bottom: 10px;
		}
		&.has-danger{
			color: @red;
			label{
				color: @red;
			}
			input{
				border-color: @red;
			}
		}
	}
	.panel{
		border: 0;
		.border-radius(3px);
    box-shadow: 0 3px 0 rgba(59, 56, 66, 0.1);
		.panel-heading {
			& > i{
				font-size: 18px;
				margin-right: 10px;
				vertical-align: bottom;
			}
		}
		&.panel-default {
			& >.panel-heading {
				color: #50667f;
		    background-color: #ffffff;
		    border-color: #e9ebef;		
		    .border-radius(3px 3px 0 0);
			}
		}
	}
	.social-share{
		margin-top: 50px;
		a{
			margin-right: 5px;
			color: #fff;
		}
		span{
			padding: 8px;
			display: inline-block;
			.border-radius(3px);
		}
		.fa-facebook{
			background: @facebook_button;
		}
		.fa-google{
			background: @google_button;
		}
		.fa-twitter{
			background: @twitter_button;
		}
		.fa-reddit{
			background: #DFE8F2;
			color: @blue;
		}
		.fa-digg{
			background: #EFEFEF;
			color: @black;
		}
		.fa-linkedin{
			background: #4875B4;
		}
		.fa-stumbleupon{
			background: #EB4923;
			color: #fff;
		}
		.fa-share-alt{
			background: @black;
			color: #fff;
		}	
	}
	.chart{
		height: 400px;
	}		
	input,button{
		outline: none !important;
		box-shadow:none !important; 
		-webkit-appearance:none;
	}
	.label-block{
		width: 100%;		
	}
	.form-horizontal{
		margin-top: 30px;
		label.control-label{
			text-align: left;
			color: @black;
		}
		.chosen-container-single .chosen-single{
	    height: 42px;
	    padding: 8px 12px;			
		}
		.chosen-container-multi .chosen-choices {
		  padding: 6px 0;
		  border: 1px solid #e0e0e0;
		  .border-radius(0 5px 5px 0);
		}
		.chosen-container-active .chosen-choices {
		  box-shadow: none;
		}
		.chosen-container-multi .chosen-choices li.search-choice {
		  padding: 5px 25px 5px 8px;
		  .border-radius(5px);
		}		
	}
	.rand {
		position: relative;
		min-height: 300px;
		& > div{
			// position: absolute;
			text-align: center;
			width: 32%;
			display: inline-block;
			i {
		    color: #fff;
				background-color: @blue;
				background-image: -moz-linear-gradient(45deg, @violet 0%, @blue 100%);
		    background-image: -webkit-linear-gradient(45deg, @violet 0%, @blue 100%);
		    background-image: -ms-linear-gradient(45deg, @violet 0%, @blue 100%);			    
		    margin-bottom: 30px;
		    padding: 20px;
		    border-radius: 100px;
		    -moz-border-radius: 100px;
		    -webkit-border-radius: 100px;
		    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
		    font-size: 3.5em;
		  }
		}
		.rand1 {
		  // top: 10%;
		  // left: 40%;
		  i{
				background-color: @red;
				background-image: -moz-linear-gradient(45deg, @violet 0%, @red 100%);
		    background-image: -webkit-linear-gradient(45deg, @violet 0%, @red 100%);
		    background-image: -ms-linear-gradient(45deg, @violet 0%, @red 100%);				  	
		  }
		}
		.rand2 {
		  // top: 60%;
		  i{
				background-color: @yellow;
				background-image: -moz-linear-gradient(45deg, @red 0%, @yellow 100%);
		    background-image: -webkit-linear-gradient(45deg, @red 0%, @yellow 100%);
		    background-image: -ms-linear-gradient(45deg, @red 0%, @yellow 100%);				  	
		  }		  
		}
		.rand3 {
		  // left: 70%;
		  // top: 5%;
		}		
		.rand5{
			margin-top: 40px;
		}
		.rand4 {
	    // top: 69%;
	    // left: 30%;
	    margin-top: 40px;
		  i{
				background-color: @green;
				background-image: -moz-linear-gradient(45deg, @blue 0%, @green 100%);
		    background-image: -webkit-linear-gradient(45deg, @blue 0%, @green 100%);
		    background-image: -ms-linear-gradient(45deg, @blue 0%, @green 100%);				  	
		  }		  
		}		
		.rand6 {
		  // top: 62%;
		  // left: 68%;
		  margin-top: 40px;
		  i{
				background-color: @green;
				background-image: -moz-linear-gradient(45deg, @yellow 0%, @green 100%);
		    background-image: -webkit-linear-gradient(45deg, @yellow 0%, @green 100%);
		    background-image: -ms-linear-gradient(45deg, @yellow 0%, @green 100%);				  	
		  }			  
		}		
	}	
	.tools-status{
		font-size: 13px;
		i{
			color: @green;
			margin-right: 5px !important;
			vertical-align: middle !important;
		}
	}
	.ads{
		margin: 10px auto;
		.text{
			padding: 5px;
	    overflow: hidden;
		}
		small{
			margin:5px;
			display: block;
		}
		&.ad_469{
			max-width: 468px;
		}
		&.ad_729{
			max-width: 728px;
		}
		&.ad_301{
			max-width: 300px;
		}
		img{
			width: 100% !important;
		}	
	}	
	.alert{
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
		.border-radius(5px);

		&.no-round{
			.border-radius(3px);
		}
		&.alert-info{
			color: #fff !important;
		}
		&.alert-success{
			background: @green;
			border-color: darken(@green, 5%);			
		}		
		&.alert-danger{
			background: @red;
			border-color: darken(@red, 5%);			
		}
		&.alert-warning{
			background: @yellow;
			border-color: darken(@yellow, 5%);
		}
	}
	.label{
		&.label-secondary{
			background:lighten(@black,70%);
			color: lighten(@black,80%);
		}
	}
	.panel{
		h4,h5{
			margin-bottom: 15px;
		}
	}
	.panel-dark{
		background: @black;
		border-color: transparent;
		color: #fff !important;
    box-shadow: 0 3px 0 darken(@black,5%);		
		h3,p,li{
			color: #fff !important;
		}		
		.panel-heading{
			background: lighten(@black, 5%);
			color: #fff !important;
			border-bottom-color:transparent;
			a{
				color: #fff !important;
				padding: 2px 8px;
				background: @blue;
				font-size: 12px;
				font-weight: 700;
				.border-radius;				
			}
		}
	}	
	.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
	    background: #f8f9fb;
	}
	.icon-green{
		color: @green !important;
	}
	.icon-red{
		color: @red !important;
	}
	.inline-copy {
		position: relative;
		background: #008aff;
		color: #fff !important;
		text-decoration: none;
		font-size: 11px;
		top: -2px;
		margin-left: 2px;
		padding: 0 3px 1px;
		border: 1px solid #0078de;
		.border-radius;
		&:before {
			right: 100%;
			top: 50%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(0, 120, 222, 0);
			border-right-color: #0078de;
			border-width: 4px;
			margin-top: -4px;	
		}	
	}
	.alert{
		span{
			display: block;
		}
	}
	#device{
		.row, p{
			margin-top: 5px;
		}
	}
	#tooltip {
	  display: block;
	  background: @black;
	  color: #fff;
	  padding: 5px 10px;
	  max-width: 300px;
	  z-index: 100;
	  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
	  border-radius: 2px;
	  -moz-border-radius: 2px;
	  -webkit-border-radius: 2px;
	}
	.slideup{
		display:none;
	}
	.pace .pace-progress {
	  background: @blue;
	  position: fixed;
	  z-index: 2000;
	  top: 0;
	  left: 0;
	  height: 2px;
  	box-shadow: 0 0 1px darken(@blue, 5%);
	  -webkit-transition: width 1s;
	  -moz-transition: width 1s;
	  -o-transition: width 1s;
	  transition: width 1s;
	}

	.pace-inactive {
	  display: none;
	}	

	select.filter{
		dispaly: none;
	}
	&.light{
		background-color: #fff;
		section{
			padding: 100px 0;
		}
	}	

	.stripe-button-el{
		background-color: @blue;
		background-image: -moz-linear-gradient(45deg, @violet 0%, @blue 100%);
    background-image: -webkit-linear-gradient(45deg, @violet 0%, @blue 100%);
    background-image: -ms-linear-gradient(45deg, @violet 0%, @blue 100%);				
    border: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
		.border-radius(100px);
		&:hover{
			opacity: 0.9;
		}
		&:active,&:focus{
			background: darken(@violet, 15%) !important;
			box-shadow: 0;
		}
		span{
			box-shadow: none;
			text-shadow: none;
			border: 0;
			background: transparent !important;
		}
	}
}

// Headings
h3{
	&.featureH{
		color: @black;
		font-size: 35px;
		margin: 40px 0;
		font-weight: 700;
	}
}

.header-top {
	background: @blue;
	color: #fff;
	padding: 10px;	
	font-size: 1.2em;
	a{
		margin-left: 15px;
	}
}

// Header
header{
	background: @header;
	min-height: 85px;
	border: 0;
	.navbar{
		margin-bottom: 0;
		.navbar-toggle{
			background-color: @black;
			color: @black;
		}
		.navbar-header{
			.glyphicon{
				color: #fff;
			}
			margin-top: 15px;
			.navbar-brand{			
				font-size: 1.8em;
				font-weight: 700;
				color: @black;
			}
			img{
				max-height: 60px;
				margin-top: -17px;
			}			
		}
		.nav{
			margin-top: 25px;
			li{
				margin-left: 50px;				
				a{
					font-weight: 700;
					color: @black;
					font-size: 15px;
					padding: 8px 15px;
					&:hover{
						background-color: @black;			
						.border-radius(100px);
						color: #fff;
					}
					&.active{
						color: #fff;
						border: 0;
						background-color: @red;
						background-image: -moz-linear-gradient(45deg, @red 0%, @violet 100%);
				    background-image: -webkit-linear-gradient(45deg, @red 0%, @violet 100%);
				    background-image: -ms-linear-gradient(45deg, @red 0%, @violet 100%);									
						.border-radius(100px);
						box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
						&:hover{
							box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
						}	
						&:focus, &:active{
							box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
						}
					}
				}
				&.dropdown{
					position: relative;
					margin-top: -10px;
					display: block;
					a{
						&:hover{
							border: 0 !important;
							background: transparent;
						}
					}
					img{
						width: 40px;
						border: 1px solid #eee;
						.border-radius(30px);
					}
					ul{
						position: absolute;
						right: 0;
						width: 200px;
						background: #fff;
						border-radius: 3px;
						box-shadow: 0 15px 20px rgba(0,0,0,0.12);
						z-index: 2;
						display: none;
						padding: 10px;
						list-style: none;
						li{
							margin: 8px 0;
							span{
								margin-right: 8px;
								color: lighten(@black, 38%);
							}
							a{
								color: lighten(@black, 10%);
								font-size: 13px;
								&:hover{
									color: @blue;
								}
							}
						}
					}
					&:hover{
						border: 0;
						ul{
							display: block;
						}
					}					
				}
			}
		}
	}
	&.app{
		min-height: 65px;
		background: #fff;
		border-bottom: 1px solid #d4d7df;
		.navbar{
			.navbar-header{
				margin-top: 5px;
				.navbar-brand{			
					font-size: 1.2em;
					color: @black;
					img{
						max-height: 45px;
						margin-top: -10px;
					}						
				}	
			}
			.nav{
				margin-top: 15px;
				li{
					margin-right: 10px;				
					a{
						padding: 5px 15px;
						color: @black;	
						&:hover{
							background-color: @black;			
							color: #fff;
							border: 0;
						}		
						&.active{
							background-color: @blue;
							color: #fff;
							border: 0;
							.border-radius(100px);
							&:hover{
								color: #fff;
							}	
						}																
					}
					&.dropdown{
						position: relative;
						margin-top: -10px;
						display: block;
						a{
							&:hover{
								border: 0 !important;
								background: transparent;
							}
						}			
					}							
				}
			}
		}
	}	
}

.home {
	position: relative;
	overflow-x: hidden;
	header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    background: transparent;		
		.navbar{
			margin-bottom: 0;
			.navbar-toggle{
				background-color: @black;
				color: #fff;
			}
			.navbar-header{
				margin-top: 15px;
				.navbar-brand{			
					font-size: 1.8em;
					font-weight: 700;
					color: @black;
				}
				img{
					max-height: 60px;
					margin-top: -17px;
				}			
			}
			.nav{
				margin-top: 25px;
				li{
					margin-left: 50px;
					a{
						font-weight: 700;
						color: @black;
						padding: 8px 15px;
						&:hover{
							background-color: @black;			
							color: #fff;
							border: 0;
						}
						&.active{
							background: #fff;
							color: @black;
							border: 0;
							.border-radius(100px);
							&:hover{
								color: @black;
							}	
						}
					}
				}
			}
		}    
  }
  section.hero{
    padding: 150px 0 0;  	
		background-color: @body;
    // background-image: -moz-linear-gradient(0deg, #0854a9 0%, #4f37ac 100%);
    // background-image: -webkit-linear-gradient(0deg, #0854a9 0%, #4f37ac 100%);
    // background-image: -ms-linear-gradient(0deg, #0854a9 0%, #4f37ac 100%);  	
    position: relative;
    //background-image: url(assets/images/wave.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;    
    .container{
    	position: relative;
    	z-index: 99;
    }
		svg#wave {
		    position: absolute;
		    bottom: 0;
		    z-index: 0;
		}    
		.analytics-blocks{
			position: absolute;
			right: 0;
			max-width: 33%;
			width: 100%;
			.analytics-block{
				background: #fff;
				display: inline-block;
				.border-radius(5px);
				height: 250px;
				width: 200px;
			}			
		}
		.main-image {
			position: relative;
			&:after{
				content: ' ';
		    width: 100%;
		    height: 710px;
		    position: absolute;
		    z-index: 99999;
		    top: 0;
			}			
			img, svg{
			position: absolute;
	    margin-left: 35px;
			max-width: 560px;
			//box-shadow: 0 5px 5px rgba(0,0,0,0.05); 
			}			
		}
		.svg{
			svg{
				width: 100%;
		    position: relative;
		    margin-top: -100px;
			}
		}		
  }
  section.alt-hero{
		margin-top: -50px;
    position: relative;
    background: #dee2e8;  	
  }
  #main-form{
		box-shadow: 0 5px 5px rgba(0,0,0,0.05);
		.border-radius(5px);
		.main-button{
			background-color: #261d56 !important;
		}
  }
}	

// Section
section{
	&.rounded{
		.border-radius(10px);
	}
	&.wshadow{
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	}
	&.urls-holder{
		padding: 50px 0 100px;
		.url-list{
			padding: 15px !important;
			min-height: 93px;
			border-bottom: 0;
			margin-bottom: 20px;
			clear: both;
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
			.border-radius(5px);	
		}				
	}

	&.hero{
		background: @body;
		border: 0;
		padding: 100px 0;
		position: relative;
		.moreto{
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: -10px;
			i{
				background: @hero;
				padding: 10px;
				color: lighten(@hero, 35%);
				font-size: 25px;
				.border-radius(100px);				
			}
		}		
	}
	&.calltoaction{
		background: darken(@secondary, 38%);
		padding: 0 0 50px 0 !important;
		position: relative;
		.actionbar{
			width: 100%;
			max-width: 600px;
			margin: auto;
			background: #fff;
			padding: 20px 10px;
			box-shadow: 8px 5px 20px rgba(0,0,0,0.15);
	    position: relative;
	    top: -4rem;			
			text-align: center;
			.border-radius(5px);
			h2{
				font-size: 18px;
				font-weight: 700;
				margin-bottom: 20px;
				line-height: 30px;
			}
		}
	}
	.feature{
		margin: 100px 0;	
		color: @black;
		.image{
			padding: 0 30px;
		}
		h2{
			font-weight: 700;
			color: @black;
			font-size: 22px;
			i{
				background: #fff;
				color: @secondary;
				margin-bottom: 30px;				
				padding: 20px;
				.border-radius(100px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
			}
			span{
		    color: @green;
	  		border-bottom: 4px solid #293441;				
			}
			small{
				display: block;
				font-size: 15px;
				color: #95A2A8;
				margin-bottom: 15px;				
				font-weight: 700;				
			}
		}
		img{
			.border-radius(2px 2px 0 0);
			max-width: 655px;
			width: 100%;
		}
		.info{
			padding-bottom: 10px;
		}
		p{
			margin: 15px 0;
			font-size: 15px;
			line-height: 25px;
			color: #333333;
		}
	}

	.featurette{
		padding: 30px 0 150px;
		& > div{
			text-align: center;
			color: @black;			
			.glyphicon{
				background: transparent;
				color: lighten(@secondary, 20%);
				font-size: 3.5em;
				padding: 20px 20px 20px 22px;
				.border-radius(3px);
				.transition;
			}
			h3{
				margin-top: 15px;
				margin-bottom: 20px;
				color: @black;
				font-size: 18px;
				position: relative;
				&:after{
					display: block;
					margin: 10px auto 0;
					content: " ";
					width: 20px;
					height: 3px;
					background: lighten(@secondary, 30%);
					.border-radius(100px);
				}
			}
		}
	}

	.panelette{
		background: #fff;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
		padding: 25px;
		margin: 0 20px;
		.border-radius(5px);
		h3{
			color: @black;
			font-size: 16px;
			i{
				padding: 10px;
				margin-right: 5px;
				color: @blue;
				background: rgba(0, 0, 0, 0.08);
				font-size: 25px;
				vertical-align: middle;
				.border-radius(100px);
			}
		}
		p{
			color: lighten(@black, 20%);
		}
		&.panelette-grad{
			.gradient(@blue,@secondary, 45deg);
			h3{
				color: #fff;
				i{
					color: #fff;
				}
			}
			p{
				color: #fff;
			}
		}
	}

	.stats{
		padding: 30px 0;
		text-align: center;
		h2{
			color: #fff;
			font-size: 2em;
			margin-bottom: 50px;
		}
		h3{
			font-size: 3em;
			color: #fff;			
			span{
				font-size: 0.5em;
			}
		}
		strong{
			font-size: 1.1em;
			color: #fff;
			margin-bottom: 20px;
			display: block;
		}
	}
	.promo{
		margin: 50px 0 100px;
		color: #261d56;		
		max-width: 600px;
		h1{
			text-align: left;
			font-weight: 700;
			font-size: 50px;
			.description{
				color: #b0adc2;
				margin-top: 20px;
				display: block;
				font-size: 18px;				
			}
		}
		.description{
			color: #747089;
			margin-top: 20px;
			display: block;
			font-size: 18px;
			line-height: 30px;
		}		
	}
	.call-to-action{
		text-align: center;
		margin: 40px 0;
		span{
			color: #788991;
			display: block;
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 15px;
		}
		.btn{
			width: 30%;
		}
	}
	.public_list{
		h2{
			font-size: 20px;
			color: #788991;
			margin-bottom: 20px;
		}
	}
	&.dark{
		min-height: 30px;
		background-color: @black;
		color: #fff;
		&.styled{
			position: relative;
			&:before{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url("assets/images/topo.png");
				opacity: 0.05;
				z-index: 0;
			}

		}
		h2,h3{
			color: #fff !important;
		}
		.feature{	
			color: #fff;
			h2{
				color: #fff;
				small{
					display: block;
					color: lighten(@black, 30%);
				}
			}
		}	
		.breadcrumb{
			background: transparent;	
			padding-top: 30px;
			li{
				font-size: 25px;
				color: #fff;
				a{
					color: #fff;
				}
			}
		}				
	}	
	&.light{
		min-height: 30px;
		background-color: @body;
		color: @black;	
		img{
			margin-top: 30px;
			.border-radius(5px);
			box-shadow: 0 20px 20px rgba(0, 0, 0, 0.05); 
		}				
	}
	&.red{
		min-height: 30px;
		background-color: @red;
		background-image: -moz-linear-gradient(45deg, @red 0%, @violet 100%);
    background-image: -webkit-linear-gradient(45deg, @red 0%, @violet 100%);
    background-image: -ms-linear-gradient(45deg, @red 0%, @violet 100%);				
		.feature{
			h2{
				color: #fff;
				small{
					color: #fff;
				}
			}
			p{
				color: #fff;
				opacity: 0.8;
			}
			img{
				margin-top: 30px;
				.border-radius(5px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
			}
		}
		.promo{	
			h1{
				color: #fff;
				.description{
					color: lighten(@blue, 60%);
				}
			}
		}			
	}
	&.blue{
		min-height: 30px;
		background-color: @blue;
		background-image: -moz-linear-gradient(45deg, @violet 0%, @blue 100%);
    background-image: -webkit-linear-gradient(45deg, @violet 0%, @blue 100%);
    background-image: -ms-linear-gradient(45deg, @violet 0%, @blue 100%);				
		color: #fff;
		.feature{
			h2{
				color: #fff;
				small{
					color: #fff;
				}
			}
			p{
				color: #fff;
				opacity: 0.8;
			}
			img{
				margin-top: 30px;
				.border-radius(5px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
			}
		}
		.promo{	
			h1{
				color: #fff;
				.description{
					color: lighten(@blue, 60%);
				}
			}
		}			
	}	
	&.yellow{
		min-height: 30px;
		background-color: @yellow;
		color: #fff;
		.promo{	
			h1{
				color: #fff;
				.description{
					color: lighten(@yellow, 60%);
				}
			}
		}			
	}	
	&.green{
		min-height: 30px;
		background-color: @green;
		color: #fff;
		.promo{	
			h1{
				color: #fff;
				.description{
					color: lighten(@green, 60%);
				}
			}
		}			
	}
	&.break{
		border-bottom: 1px solid #eee;
	}
	&.bg{
		min-height: 30px;
		background-color: transparent;
		background-size:100% 100% !important;	
		background-repeat: no-repeat;		
		color: #fff;
		h1{
			text-shadow: 1px 1px 1px @black;
			.description{
				color: #fff !important;
				opacity: 0.8;
			}
		}
	}
	// Sidebar
	.sidebar{
		padding-top: 30px;
		padding-bottom: 30px;
		min-height: 900px;	
		background: @sidebar;
		border-right: 1px solid lighten(@sidebar, 80%);
		height: calc(100vh);
		font-size: 13px;
		.navbar-brand{
			color: @black;
		}
		.nav-sidebar{
			li{
				margin-bottom: 5px;
				&.locked {
					display: none;
					a{
						color: lighten(@black, 30%);
						&:hover{
							background: lighten(@black, 50%);
							box-shadow: none;
						}
					}
				}
			}
			a{
				color: lighten(@black, 50%);
				span{
					margin-right: 8px;
				}
				&:hover,&.active{
					color: @black;
					font-weight: 700;
					background: #fff;
					box-shadow: 0 5px 10px darken(@blue, 42%);
					.border-radius(100px);
				}				
			}
		}		
		h3{						
			color: lighten(@black, 30%);
			font-size: 14px;
			font-weight: 700;
			margin-top: 20px;
			margin-left: 15px;			
			margin-bottom: 15px;
		}
		.side-stats{
			text-align: left;
			margin-top: 5px;
			margin-left: 15px;	
			color: lighten(@black, 45%);
			span{
				color: lighten(@black, 58%);
				font-weight: 700;
			}
		}	
		.progress{
			height: 10px;
			.border-radius()
		}			
	}
	// Content
	.content{
		// User Content
		#user-content{			
			.alert{
				margin-top: 30px !important;
				.border-radius(3px);
			}
		}
		.main-content{
			margin-top: 30px;
			// Toolbox
			.toolbox{
				color: @black;
				background: #fff;
				border-bottom: 1px solid darken(@body_color, 10%);
				padding: 15px;
				margin-bottom: 10px;
				.border-radius(2px 2px 0 0);
				// Search
				#search{
					input{
						border-left-width: 0;
						padding-left: 0;
						height: 34px;
					}

				}			
			}
			#data-container{
				&>.btn-group{
					padding: 5px 15px 15px;
				}
				.pagination{
					padding: 15px;
				}			
			}
		}	
		// URL List
		.url-list{
			padding:10px 5px;
			min-height: 93px;
			border-bottom: 1px solid darken(@content_bg,10%);
			background: #fff;
			clear: both;
			&:last-child{
				border-bottom: 0;
			}
			.description{
				padding-left: 15px;
				color: #666;
			}
			ul.toggle{
				padding-left: 15px;
				li{
					list-style: none;
					display: inline-block;
					&>div{
						margin-top: -2px;
					}
					a,span{
						margin: 0;
						font-size: 12px;
						font-weight: 700;
						padding: 8px 8px;
						color: #828892;
					}
					.dropdown{
						text-align: left;										
						position: absolute;
						z-index: 999;
						background: @blue;
						min-width: 140px;
						display: none;
						margin-left: 0px;
						padding: 8px;
				    box-shadow: 0 10px 15px rgba(0,0,0,0.15);						
						.border-radius(3px 0 3px 3px);
						a{
							display: block;
							color: #fff;
							font-weight: 700;
							padding: 5px;
							.transition(padding,0.1s);
							&:hover{
								padding-left: 8px;									
							}
						}
					}
					&:hover{
						&>a{
							color: @blue;
						}
						&>a.drop{
							background: @blue;
							color: #fff;
							.border-radius(2px 2px 0 0)
						}										
						.dropdown{
							display: block;
						}
					}
				}
			}							
			.url-info{
				.title{
					padding-left: 15px;
					margin-bottom: 10px;
					font-size: 1.2em;
					white-space: -moz-pre-wrap !important;
					white-space: -pre-wrap;
					white-space: -o-pre-wrap;
					white-space: pre-wrap;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal;								
					img{
						margin-right: 5px;
						vertical-align: top;
					}
				}
				.short-url{		
					color: darken(@content_bg,50%);
					font-size: 12px;
					padding-left: 15px;		
					margin: 8px 0;					
					a{
						color: darken(@content_bg,50%);
					}
				}
				.info{
					color: darken(@content_bg,50%);
					font-size: 12px;
					padding-left: 25px;
					span{
						margin-right: 10px;
					}
					.qr{
						padding: 5px 5px 2px 5px;
						img{
							width: 16px;
						}
					}
				}
			}
			.url-stats{
				text-align: center;
				strong{
					font-size: 25px;
					display: block;
					color: @black;
				}										
			}
			&.fix{
				padding-left: 0;
				padding-right: 0;
				.description{
					padding-left: 0;
				}
				.url-info{
					.title{
						padding-left: 0;							
					}
					.short-url{		
						padding-left: 0;		
					}
				}				
			}			
		}				
		// Bundles
		&.bundles{
			&.list-group{
				a.active{
					color: @blue;
				}
				.list-group-item{
					padding-left: 0;
					padding-right: 0;
				}
				p{
					color: #999;
					font-weight: 700;
					font-size: 12px;
					a{
						color: #555;
					}
				}
				h4{
					margin-bottom: 8px;
				}
			}
		}		
		// Widgets
		#widgets{
			padding-top: 30px;
			ul{
				margin-top: 15px;
				padding:0;
				li{
					color: #555;
					border-bottom: 1px solid #eee;
					padding-bottom: 10px;
					margin-top: 10px;
					font-size: 12px;
					list-style: none;
					&.new_item{
						background: #eee;
						padding: 5px 5px 12px;
						.border-radius;
					}
					img{
						margin-right: 5px;
					}
					a{
						font-weight: 700;
						color: @blue;
					}
					span{
						color: #999;
						margin-left: 5px;
					}
				}
			}			
		}
		// Ajax
		.return-ajax{
			position: relative;
			.clear-search{
				position: absolute;
				top: -45px;
				right: 10px;
			}
			.cta,.alert{
				overflow: hidden;
				margin:5px 15px;				
			}		
		}
		.panel{
			p{
				margin: 10px 0;
			}
			h3{
				font-size: 15px;
				margin-top: 0;
				color: lighten(@black, 20%);
				font-weight: 700;
				margin-bottom: 20px;
				i{
					font-size: 18px;
					margin-right: 10px;
					vertical-align: bottom;
				}
				a{
					margin-top: -2px;
				}
			}
			.nav{
				li.active, li:hover{
					a{
						background: @blue;						
						color: #fff;
					}
				}
			}
		}
		p{
			color: #828892;
			em{
				font-size: 1.3em;
				font-style: normal;
				font-weight: 700;
			}
			&.center{
				text-align: center;
				font-weight: 700;
			}		
		}
		.avatar-holder{
			text-align: left !important;
			padding: 0 15px;
			.avatar{
				max-width: 48px;
				.border-radius;
			}
			strong{
				padding-top: 2px;
				margin-left: 15px;
				display: block;
				font-size: 1.2em;
			}
			span{
				margin-left: 15px;
			}
		}
	}
	// Centered Content
	.centered{
		margin: 100px auto 30px;
		.site_logo{
			margin-top: 50px;
			margin-bottom: 50px;
			text-align: center;
			background: transparent;
			a{
				color: @black;
				font-size: 30px;
			}
			img{
				max-height: 80px;				
				background: transparent;
				.border-radius;
			}
		}		
		&.form{
			max-width: 450px;
			width: 100%;
			h2{
				
			}
			form.live_form{				
				padding: 30px 20px;
				background: @mainForm;
				.border-radius(5px);
				box-shadow: 0 10px 20px rgba(59, 56, 66, 0.1);		
			}
			.input-group,.form-group{
				margin-bottom: 25px;
			}
			#forgot{
				margin-top: 8px;
				font-size: 13px;
			}
			span.check-box{
				margin-left: 5px;
				font-weight: 400;
				font-size: 15px;
				a{
					font-size: 1em;
					font-weight: 700;
				}
			}		
			label{
				width: 100%;
				a{
					font-size: 11px;
				}
			}
		}
		form.passform{			
			width: 100%;
			padding: 20px;			
		}		
		&.poll{
			max-width: 550px;
			width: 100%;
		}
	}	
	#forgot_form{
		display: none;
	}	
	h3{
		font-size: 16px;
		font-weight: 700;
		color: #4A6C83;
		margin-top: 0;
		margin-bottom: 20px;
	}	
	// Social
	.social{
		margin-bottom: 30px;
		padding-bottom: 20px;
		border-bottom: 1px solid #e0e0e0;
	}
	.btn-inline{
		.border-radius(3px);
		border: 1px solid #eee;
		padding: 5px 35px;
		margin-right: 5px;
		&.btn-success{
			background: transparent;
			border-color: @dark;
			color: @dark;
			font-weight: 700;
			i{
				color: @green;
				padding-top: 2px;
				margin-right: 10px;
			}
		}
	}
	// Social Buttons
	.btn-facebook{
		color: @facebook_button;
		.transition;
		&:hover{
			color: lighten(@facebook_button, 10%);
			border-color: lighten(@facebook_button, 10%)
		}
	}
	.btn-twitter{
		color: @twitter_button;
		.transition;
		&:hover{
			color: lighten(@twitter_button, 10%);
			border-color: lighten(@twitter_button, 10%);
		}		
	}
	.btn-google{
		color: @google_button;
		.transition;
		&:hover{
			color: lighten(@google_button, 10%);
			border-color: lighten(@google_button, 10%);
		}		
	}
	// 404 Page
	.is404{
		text-align: center;
		.border-radius;
		h1 {
			font-size: 250px!important;
			line-height: 250px!important;
			color: #fff;
		}
		h2 {
			text-transform: uppercase;
			font-size: 68px;
			color: #fff;
		}
		h3{
			text-transform: uppercase;
			font-size: 34px;	
			color: #fff;			
		}
	}	
	// Splash Page
	.splash{
		margin-top: 30px;
		.thumb{
			img{
				width: 100%;
				border: 1px solid #eee;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
				.border-radius(5px);
			}
		}
		h2{
			color: #555;
			font-size: 22px;
		}
		p.description{
			color: #666;
		}
		p.disclaimer{
			margin-top: 20px;
			color: #aaa;
			font-size: 12px;
		}
	}
	// Media Page
	.media{
		padding-top: 30px;
		.embed iframe:not(.vine-embed),embed,object {
		  width: 100% !important;
		  height: 450px !important;
		}
		.embed iframe.vine-embed {
		  margin: 0 auto;
		}
		.info{
			border-bottom: 1px solid #e0e0e0;
			margin-bottom: 5px;
			padding-bottom: 5px;
			padding-top: 15px;
			h3{
				font-size: 16px;
				color: @black;
			}
			.text-right{
				font-size: 13px;
				span{
					display: block;
					padding-right: 10px;
					font-size: 22px;
					font-weight: 700;
				}
			}
		}
	}
	// Stats Page
	.stats-page{
		margin-top: 30px;
		.thumb{
			img{
				width: 100%;
				border: 1px solid #ccc;
				.border-radius;
			}
		}
		.url-info{
			h2{
				color: lighten(@black, 30%);
				font-size: 20px;
				span{
					margin-top: 10px;
					display: block;
					font-size: 13px;
				}
			}
		}
		.url-stats{
			max-height: 80px;
			padding-top: 20px;
			text-align: center;
			font-size: 26px;
			font-weight: 700;
			span{
				font-size: 13px;
				display: block;
			}
		}
	}
}

// Plan
section#plan{
	padding: 160px 0 190px;	
	h1{
		font-weight: 700;
		font-size: 3em;
	}

	.subtitle {
	  color: @black;
	  margin-top: 20px;
	}

	.toggle-container {
	  margin-bottom: 70px;
	}

	.toggle-container .switch-toggles {
	  position: relative;
	  width: 262px;
	  height: 50px;
	  border: 1px solid rgba(38, 39, 45, 0.2);
	  border-radius: 30px;
	  -moz-border-radius: 30px;
	  -webkit-border-radius: 30px;
	  margin: 25px auto;
	}

	.toggle-container .switch-toggles .monthly, .toggle-container .switch-toggles .yearly {
	  position: relative;
	  width: 130px;
	  float: left;
	  padding: 13px 10px;
	  text-align: center;
	  z-index: 2;
	  cursor: pointer;
	  font-size: 16px;
	  color: #8c8f94;
	  transition: color 0.7s cubic-bezier(0.545, 0, 0.05, 1);
	}

	.toggle-container .switch-toggles .monthly.active,
	.toggle-container .switch-toggles .yearly.active {
	  color: #26272d;
	  font-weight: 700;
	}

	.toggle-container .switch-toggles:after {
	  position: absolute;
	  content: "";
	  width: 122px;
	  height: 42px;
	  background: #ffffff;
	  left: 3px;
	  top: 3px;
	  border-radius: 30px;
	  -moz-border-radius: 30px;
	  -webkit-border-radius: 30px;
	  box-shadow: 2.5px 4.33px 20px 0px rgba(61, 61, 62, 0.059);
	  -moz-box-shadow: 2.5px 4.33px 20px 0px rgba(61, 61, 62, 0.059);
	  -webkitbox-shadow: 2.5px 4.33px 20px 0px rgba(61, 61, 62, 0.059);
	  transition: all 0.7s cubic-bezier(0.545, 0, 0.05, 1);
	}

	.toggle-container .switch-toggles.active:after {
	  left: 135px;
	  top: 3px;
	}
	.corner-ribbon {
	    width: 200px;
			background-color: @blue;
			background-image: -moz-linear-gradient(180deg, @violet 0%, @blue 100%);
	    background-image: -webkit-linear-gradient(180deg, @violet 0%, @blue 100%);
	    background-image: -ms-linear-gradient(180deg, @violet 0%, @blue 100%);				    
	    top: 25px;
	    left: -50px;
	    text-align: center;
	    line-height: 50px;
	    letter-spacing: 1px;
	    color: #f0f0f0;
	    position: absolute;
	    box-shadow: 0 0 3px rgba(0,0,0,.3);
	    top: 25px;
	    right: -50px;
	    bottom: auto;
	    left: auto;
	    transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	}
	.price-table {
	  position: relative;
	  width: 33%;
	  max-width: 50%;
	  float: left;
	  padding: 20px 0;
	  overflow: hidden;
	  .btn{
	  	padding-left: 25px;
	  	padding-right: 25px;
	  }
	}

	.price-table .table-inner {
	  background-color: #020512;
	  padding: 40px 15px 50px;
	  
	}
	.price-table:first-child .table-inner, .price-table:nth-child(2) .table-inner{
		border-left: 0;
		.border-radius(5px 0 0 5px);
	}
	.price-table:last-child .table-inner{
		.border-radius(0 5px 5px 5px);
	}
	.price-table .table-inner h3 {
	  margin: 0 auto 28px;
	  color: #fff;
	}
	.price-table.highlighted .table-inner h3 {
	  color: #6F7580;
	}

	.price-table .table-inner .price {
	  font-size: 14px;
	  font-weight: 700;
	  text-transform: uppercase;
	  letter-spacing: 0.1em;
	  color: #fff;
	  padding: 9px 18px;
	  border: 1px solid rgba(38, 39, 45, 0.2);
	  display: inline-block;
	  margin-bottom: 40px;
	  border-radius: 30px;
	  -moz-border-radius: 30px;
	  -webkit-border-radius: 30px;
	}

	.price-table.highlighted .table-inner .price{
		color: #26272d;
	}

	.price-table .table-inner .billed {
	  font-size: 9px;
	  opacity: 0.8;
	  display: block;
	}

	.price-table .table-inner .phrase {
	  font-size: 14px;
	  line-height: 28px;
	  margin-bottom: 38px;
	  opacity: 0.6;
	  color: #fff;
	}
	.price-table.highlighted .table-inner .phrase{
	  color: #6F7580;
	}
	.price-table .table-inner .feature-list{
		margin: 0;
		padding: 0 20px;
	}

	.price-table .table-inner .feature-list li {
	  font-size: 15px;
	  line-height: 24px;
	  color: #fff;
	  margin-bottom: 12px;
	  list-style: none;
	  text-align: left;
	  &:before{
	  	content: "\e084";
	  	font-family: 'Glyphicons Halflings';
	  	margin-right: 10px;
	  	vertical-align: middle;
	  }
	}

	.price-table.highlighted .table-inner .feature-list li{
		color: @black;
		&:before{
			color: @green;
		}
	}

	.price-table .table-inner .feature-list li i {
	  color: #6fc754;
	}

	.price-table .table-inner .feature-list li:last-child {
	  margin-bottom: 34px;
	}

	.price-table:not(.highlighted) .table-inner .btn {
	  width: 210px;
	  max-width: 100%;
		box-shadow: 0 4px 10px #000;
	}

	.price-table .table-inner .btn-blue {
	  background-color: transparent;
	  border: 1px solid #267df4;
	  color: #267df4;
	}

	.price-table.highlighted {
	  z-index: 2;
	  padding: 0;	  
	  box-shadow: 5px 5px 5px rgba(92, 95, 101, 0.05);;
	  -moz-box-shadow: 5px 5px 5px rgba(92, 95, 101, 0.05);;
	  -webkit-box-shadow: 5px 5px 5px rgba(92, 95, 101, 0.05);;
	}

	.price-table.highlighted .table-inner {
	  background-color: #ffffff;
	  padding: 60px 15px 70px;
	  border-left: 1px solid #eee;
	}

	.price-table.highlighted .btn-blue {
	  background-color: #267df4;
	  color: #ffffff;
	}

	#price_tables .monthly, #price_tables .yearly {
	  position: relative;
	  width: 100%;
	  opacity: 0;
	  -webkit-transform: scale(0.95);
	          transform: scale(0.95);
	  transition: opacity 0.97s, -webkit-transform 0.97s;
	  transition: opacity 0.97s, transform 0.97s;
	  transition: opacity 0.97s, transform 0.97s, -webkit-transform 0.97s;
	  transition-timing-function: cubic-bezier(0.545, 0, 0.05, 1);
	}

	#price_tables .monthly .price-table, #price_tables .yearly .price-table {
	  display: none;
	}

	#price_tables .monthly.active, #price_tables .yearly.active {
	  opacity: 1;
	  -webkit-transform: scale(1);
	          transform: scale(1);
	}

	#price_tables .monthly.active .price-table, #price_tables .yearly.active .price-table {
	  display: block;
	}	
}
section#faq{
	padding: 50px 10px;
	h1{
		margin-bottom: 25px;
		font-size: 28px;
	}
	.panel-body{
		padding: 30px;
	}
	.faq-list {
		margin-bottom: 20px;
		h2{
			font-size: 15px;	
			font-weight: 700;		
		}
		p{
		  margin-top: 24px;
		  color: lighten(@black, 40%);
		}
		i{
			color: lighten(@secondary, 25%);
			margin-right: 10px;
		}
	}
}
// Checkout
section#checkout{
	margin: 30px 0;
	ul{
		list-style: none;
		padding: 10px 0;
		li{
			margin-bottom: 10px;
			&.total{
				border-top: 1px solid lighten(@black, 40%);
				padding-top: 5px;
			}
		}
	}
	.info{
		color: lighten(@black, 45%);
	}
	.StripeElement {
	  background-color: white;
	  height: 40px;
	  padding: 10px 12px;
	  .border-radius(5px);
	  border: 1px solid #c0c0c0;
	  box-shadow: 0;
	  -webkit-transition: box-shadow 150ms ease;
	  transition: box-shadow 150ms ease;
	}

	.StripeElement--focus {
	  box-shadow: 0;
	}

	.StripeElement--invalid {
	  border-color: #fa755a;
	}

	.StripeElement--webkit-autofill {
	  background-color: #fefde5 !important;
	}	
}
// Buttons
.btn{
	border:0;	
	&.btn-round{
		.border-radius(20px);
	}
	&.btn-lg{
		padding-left: 30px !important;
		padding-right: 30px !important;
		.border-radius(3px);		
	}
	&.btn-primary{
		background: @black;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;		
		.border-radius(3px);	
		&:hover{
			background: darken(@black, 10%);
		}
	}
	&.btn-default{
		background: @body;
		color: darken(@body, 50%);
		&:hover{
			background: lighten(@body, 3%);
		}
	}
	&.btn-secondary{
		background: @secondary;
		background-image: -moz-linear-gradient(45deg, @violet 0%, @secondary 100%);
    background-image: -webkit-linear-gradient(45deg, @violet 0%, @secondary 100%);
    background-image: -ms-linear-gradient(45deg, @violet 0%, @secondary 100%);					
		color: #fff;
		font-weight: 500;
		box-shadow: 0 4px 10px lighten(@secondary, 40%); 
		&:hover{
			background: darken(@secondary, 10%);
		}		
		&:focus, &:active{
			box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
		}			
	}
	&.btn-light{
		background: #fff;
		color: @black;
	}
	&.btn-danger{
		.border-radius(3px);	
	}
	&.btn-success{
		.border-radius(3px);	
	}
	&.btn-round{
		.border-radius(50px);
	}
}

.addmargin{
	margin-top: 30px;
}
.analytics{
	padding: 30px 0;
	#country-list{
		margin: 0;
		padding: 0 20px;
		li{
			margin-bottom: 10px;
		}
	}
	#referrer{
		margin: 0;
		padding: 0px;
		li{
			list-style: none;
			margin-bottom: 10px;
		}			
	}
}	
#splash{
	margin: 100px 0;
}
.custom-splash{
	margin-top: 30px;
	overflow: hidden;
	.banner{
		img{
			width: 100%;
		}
	}
	.custom-message .c-avatar {
	  float: left;
	  width: 100px;
	  margin: 10px 10px 10px 20px;
	  .border-radius(2px);
	}
	.custom-message .c-message {
	  padding: 10px;
	  float: left;
	  height: 100px;
	  line-height: 25px;
	  border-radius: 2px;
	  -moz-border-radius: 2px;
	  -webkit-border-radius: 2px;
	}
	.custom-message .c-message h2 {
		margin-top: 2px;
	  margin-bottom: 5px;
	  font-size: 18px;
	}
	.custom-message .c-countdown {
	  float: right;
	  font-size: 12px;
	  text-align: center;
	  padding: 25px;
	}
	.custom-message .c-countdown span {
	  font-size: 30px;
	  display: block;
	}
}
.sp-replacer {
    border: solid 1px #e0e0e0;
    background: #fff;
    border-radius: 3px;
}
.sp-container{
	background: @dark;
	border: 1px solid #000;
	box-shadow: 5px 10px 5px rgba(0,0,0,0.2);
	.border-radius(5px);
	color: #fff;
	.sp-input-container{
		margin-bottom: 10px;
	}
	.sp-input{
		color: #fff;
		border: 1px solid lighten(@dark, 30%);
		box-shadow: none;
	}
	button, button:active, button:focus{
		background: @blue;
		color: #fff;
		text-shadow: none;
		font-size: 12px;
		border: 0;
		padding: 5px 8px;
	}
}
.contact-box{
	padding: 15px;
	margin: 10px;	
	background: #fff;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	.border-radius(5px);
	.contact-label{
		font-size: 22px;
		font-weight: 700;
		color: #000;
	}
	.contact-description{
		color: #000;
		opacity: 0.9;
		margin: 15px 0 !important;
	}
	.form-group{
		margin-top: 20px;
		.control-label{
			color: #000;
		}
		textarea{
			color: #000;
			border-color: rgba(0,0,0,0.2);
			box-shadow: none;
			.border-radius(3px);
		}
		input{
			color: #000;
			border-color: rgba(0,0,0,0.2);
			padding: 5px 8px;
			.border-radius(3px);
		}
	}
	button{
		background: #000;
		color: #fff;
		border: 0;
		padding: 5px 15px;
		.border-radius(3px);

	}
}
.poll-box{
	padding: 15px;
	margin: 10px;	
	background: #fff;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	.border-radius(5px);	
	.poll-question{
		font-size: 18px;
		font-weight: 700;
		color: #000;
	}
	ol.poll-answers{
		padding: 0;
		margin: 10px 0;
		& > li{
			list-style: none;
			border: 0 !important;
			color: #000;
			opacity: 0.95;
			padding: 10px 0;
			font-size: 1.1em;
			font-weight: 700;
			& div{
				margin-right: 5px;
			}
		}
	}
	button{
		background: #000;
		color: #fff;
		border: 0;
		padding: 5px 15px;
		.border-radius(3px);

	}
}
.custom-overlay{
	overflow: hidden;	
	.custom-message{
		position: relative;
		margin: 10px;
		background-color: @blue;
		color: #fff;
		padding: 15px 35px 15px 15px;	
		max-width: 320px;
		overflow: hidden;
		box-shadow: 0 5px 10px rgba(0,0,0,0.1);
		.border-radius(5px);
		.custom-label{
			position: absolute;
			background-color: #fff;
			top: 13px;
			right: -20px;
			color: #000;
			padding: 0 20px;
			font-size: 11px;
			font-weight: 700;
			width: 75px;
			height: 15px;
	    -ms-transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
		}
		p{
			margin: 0 !important;
		}
		.custom-img{
			float: left;
			margin-right: 10px;
			img{
				max-height: 50px;
				max-width: 50px;	
				.border-radius(3px);
			}
		}
		.custom-text{
			display: block;
			color: #fff;
		}
		.btn{
			background-color: #fff;
			font-weight: 700;		
			margin-top: 5px;	
			&:hover{
				color: #000;
			}
		}
	}
}
.overlay-type{
	border: 1px solid #e0e0e0;
	text-align: center;
	display: block;
	padding: 10px;	
	margin-bottom: 30px;
	.border-radius(5px);
	&:hover{
		background: @body;
	}
	i{
		font-size: 35px;
		margin: 10px 0;
		color: #506680;
	}
	.title{
		display: block;
		font-size: 15px;
		font-weight: 700;
		margin: 5px 0;
		color: #506680;
	}
	.description{
		color: #828892;
	}
}
#main-overlay{
	position: relative;
	#site{
		position: absolute;
		z-index: 0;
	}
	.clickable{
		cursor: pointer;
	}
	.custom-message{
		z-index: 99999;
		bottom: -500px;
		position: absolute;
		margin: 10px;
		background-color: @blue;
		color: #fff;
		padding: 15px 35px 15px 15px;	
		max-width: 320px;
		width: 100%;
		overflow: hidden;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);	
		.border-radius(5px);		
		&.tl{
			top: 0;
			left: 0;
			bottom: auto;
			transform: translatey(10px);
	    animation: showdown 1s ease-in;			
		}	
		&.tr{
			top: 0;
			right: 0;
			bottom: auto;
			transform: translatey(10px);
	    animation: showdown 1s ease-in;				
		}		
		&.br{
			bottom: 0;
			right: 0;
			transform: translatey(-10px);
	    animation: showup 1s ease-in;			
		}	
		&.bl{
			bottom: 0;
			left: 0;
			transform: translatey(-10px);
	    animation: showup 1s ease-in;			
		}							
		.custom-label{
			position: absolute;
			background-color: #fff;
			top: 13px;
			right: -20px;
			color: #000;
			padding: 0 20px;
			font-size: 11px;
			font-weight: 700;
			width: 75px;
			height: 15px;
	    -ms-transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
		}
		a.remove{
			color: #fff;
			position: absolute;
			bottom: 0;
			right: 3px
		}
		p{
			margin: 0 !important;
		}
		.custom-img{
			float: left;
			margin-right: 10px;
			img{
				max-height: 50px;
				max-width: 50px;	
				.border-radius(3px);
			}
		}
		.custom-text{
			display: block;
			color: #fff;
		}
		.btn{
			background-color: #fff;
			font-weight: 700;		
			margin-top: 5px;	
			&:hover{
				color: #000;
			}
		}
	}	
	.contact-overlay{
		position: fixed;		
		z-index: 9999;
		&.br{
			bottom: 10px;
			right: 15px;
			transform: translatey(-10px);
	    animation: showup 1s ease-in;			
		}	
		&.bl{
			bottom: 10px;
			left: 10px;
			transform: translatey(-10px);
	    animation: showup 1s ease-in;			
		}			
		.contact-event{
			background: #fff;
			color: #000;
			padding: 8px;
			display: block;
			box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);	
			.border-radius(5px);
			font-weight: 700;
			i{
				&.success{
					background: @green !important;
				}
				background: #000;
				color: #fff;
				padding: 5px 6px;
				border-radius: 20px;
				margin-right: 5px;
			}
		}	
		.contact-box{
			display: none;
			width: 320px;			
			position: relative;
			a.contact-close {
			    position: absolute;
			    right: 6px;
			    top: 6px;
			    color: #000;
			    opacity: 0.4;
			    &:hover{
			    	opacity: 0.6;
			    }
			}			
		}
	}
	.poll-overlay{
		position: fixed;		
		z-index: 9999;
		&.br{
			bottom: 10px;
			right: 15px;
			transform: translatey(-10px);
	    animation: showup 1s ease-in;			
		}	
		&.bl{
			bottom: 10px;
			left: 10px;
			transform: translatey(-10px);
	    animation: showup 1s ease-in;			
		}			
		.poll-box{
			width: 320px;			
			position: relative;				
		}
	}	
}
// Footer
footer{
	padding: 20px 0 20px;
	color: darken(@body_color, 45%);
	.languages{
		position: relative;
		clear: both;
		display: inline-block;
		text-align: left;
		.langs{
			width: 310px;
			display: none;
			padding: 5px;
			background: lighten(@black, 5%);
			position: absolute;
			bottom: 15px;
			right: 0;
			.border-radius(2px 2px 0 2px);
			a{
				width: 90px;
				color: #fff !important;
				display: block;
				float: left;
			}
		}		
	}	
	a{
		margin-left: 5px;
		padding: 2px 5px;
		&:hover,&.active{
			background-color: @black;
			color: #fff;
			.border-radius;
		}
	}	
}
// URL Shortener Form
#main-form{
	background: @mainForm;
	border: 1px solid darken(@mainForm, 10%);
	.border-radius(3px);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
	select{
		color: #000;
		width: 100%;
		margin-top: 10px;
	}		
	input.form-control{
		border-color: #e0e0e0;
		height: 34px;
		padding: 5px;
	}	
	.main-form{
		padding: 20px;
		border-bottom: 1px solid darken(@mainForm, 10%);	
		.input-group-addon{
			border-color: #e0e0e0;
			font-size: 2.0em;
			color: @black;
			border-width: 0;
			padding: 0 10px;
			.border-radius(5px 0 0 5px);
		}
		.main-input{
			padding: 0 10px;
			border-width: 0;
			font-size: 2.3em;
			background: #fff;
			height: 43px;
			color: @black;
			.border-radius(0 3px 3px 0);
			.transition(0.2s);
			&.error,&.error:focus{
				color: @red;
			}
			&:focus{
				color: @black;
			}
			&:hover{
				color: @blue;
			}
		}
		.main-textarea{
			background-color: darken(@mainForm, 5%);
			color: @black;
			font-weight: 700;
			font-size: 1.3em;
			padding: 10px;
			box-shadow: none;
			border: 0;
			.border-radius(3px);
		}
		.main-button{
			padding: 5px 15px;
			font-size: 15px;
			height: 43px;
			background-color: @blue;
			border: 0;
			.border-radius(100px);
			box-shadow: 0 5px 5px rgba(0,103,244,0.1) !important;			
			&#copyurl{
				margin-top: 0 !important;
				background-color: @green;
				display: none;
			}			
			&:focus, &:active{
				box-shadow: inset 0 5px 10px rgba(0,0,0,0.15) !important;			
			}
		}
	}
	.advanced{
		font-size: 12px;
		float: left;
	}	
	.main-options{
		padding: 10px 20px;
		.chosen-container{
			margin-left: 10px;
			max-width: 150px;
			float: right;
			.chosen-single{
				background: #fff;
				border: 1px solid #e0e0e0;
				color: @black;
			}
			.chosen-drop{
				border-color: #e0e0e0;				
			}
		}
	}
	.main-advanced{
		padding: 20px;	
		background: @mainForm;
		color: @black;
		& > div > div{
			margin-bottom: 20px;
		}
		.btn-xs{
			padding: 2px 10px;			
			.border-radius(100px);
		}
		h3{
			font-size: 1.1em;
			font-weight: 700;
			color: @black;
			margin-top: 0;
			margin-bottom: 20px;
		}
		p{
			font-size: 0.9em;
			color: lighten(@black, 55%); 
			margin-bottom: 15px;
		}
		input{
			color: lighten(@black, 5%);
		}
		#geo, #device, #parameters{
			padding-top: 35px;
			select{
				max-width: 200px;
			}
			.chosen-single{
				.border-radius(0 5px 5px 0);
			}
			.geo-input .row, .device-input .row, .parameter-input .row{
				margin-bottom: 10px;
			}
		}
		.chosen-container-multi .chosen-choices{
	    padding: 6px 0;
	    border: 1px solid #e0e0e0;
	    .border-radius(0 5px 5px 0);
		}
		.chosen-container-active .chosen-choices{
			box-shadow: none;
		}
		.chosen-container-multi .chosen-choices li.search-choice{
			padding: 5px 25px 5px 8px;
			margin: 0px 0 0px 5px;
		}
	}
}
// Share
.share-this{
	margin-top: 30px;
	overflow: hidden;	
	.qr{
		float: right;
		img{
			max-width: 80px
		}
	}
}
// Custom toggles
ul.form_opt{
	list-style: none;
	padding: 0;
	clear:both;
	overflow: hidden;
	margin-bottom: 25px;
	min-height: 60px;
	li{
		float: right;
		margin-top: 15px;
		&.text-label{
			width: 60%;
			float: left;
			color: @black;
			font-weight: 700;
			text-align: left;			
			margin-top: 0;
			font-size: 13px;			
			small{
				display: block;
				margin-top: 5px;
				color: #777; 
				font-weight: 400;
			}		
		}
		a{
			background: lighten(@black, 70%);
			color: lighten(@black, 50%);
			padding: 5px 10px;
			font-weight: 700;
			border: 0;
			.transition;
			&.round{
				.border-radius;
			}
			&.first{
				.border-radius(2px 0 0 2px);
			}
			&.last{
				.border-radius(0 2px 2px 0);
			}
			&:hover{
				color: #fff;
				background: lighten(@blue,10%);
			}
			&.current{
				color: #fff;
				background: @blue;
			}
		}
	}
}
// Modal
#modal-shadow{
  background: lighten(@black,5%);
  background: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 200;
  display: none;
  clear: both;   
}
#modal-alert{
    width: 90%;
    max-width: 500px;
    min-height: 150px;
    position: fixed;
    z-index: 999;
    display: none;
    background: #fff;
    text-align: left;
    padding: 10px;
    clear: both; 
    color:#222;
    .border-radius;
    form{
    	overflow: visible !important;
    }
    .title{
    	margin:-10px -10px 10px -10px;
    	padding: 10px;
    	display: block;
    	background: @black;
    	color: #fff;
    	font-weight: 700;
    	.border-radius(2px 2px 0 0);
    }
    &>p{
    	margin: 10px 0;
    	line-height: 25px;
    }    
}
.flat .plan {
  .border-radius();
  list-style: none;
  padding: 0 0 20px;
  margin: 50px 0 15px;
  border: 0;
  background: @blue;
  text-align: center;
  .transition;
	&:hover{
	  background: lighten(@blue, 10%)
	}  		  
	li {
	  padding: 10px 15px;
	  color: #fff;
	  font-weight: 700;
		.transition;
	}
	li.plan-price {
	  border-top: 0;
	}
	li.plan-name {
	  .border-radius(2px 2px 0 0);
	  padding: 15px;
	  font-size: 18px;
	  line-height: 18px;
	  color: #fff;
		background: darken(@black, 10%);
	  margin-bottom: 30px;
	  border-top: 0;
	}
	li > strong {
	  color: darken(@black, 10%);
	}
	li.plan-action {
	  margin-top: 10px;
	  border-top: 0;
	}
	&.featured li.plan-name {
	  background: darken(@black, 25%);
	}
	&.featured:hover li.plan-name {
	  background: darken(@black, 5%);
	}
	&.featured li.plan-price{
		font-size: 20px;
		padding: 15px 0; 
		background: @black;		
		margin: 0 10% 20px 10%;	
		.border-radius;
		strong{
			font-size: 35px;
			color: #fff;
			display: block;
		}
	}
}
#captcha{
	padding: 15px;
}
#recaptcha_widget_div{
	background: #fff;
	margin-bottom: 10px;
	.border-radius;
	.recaptchatable {
		border: 0px solid transparent !important;
		.recaptcha_image_cell {
			background: transparent;
			center img {
		  	width: 250px;
		  	height: 54px;
			}
		}
		#recaptcha_response_field{
			background: @black;
			color: #fff;
			padding: 5px 8px;
		}
	}	
}
#recaptcha_logo,#recaptcha_privacy{
	display: none;
}
@media screen and (max-width:990px){
	.home section.hero{
		background-position: 550px 0;
	}	
  #main-form .main-form .col-sm-10{
    margin-bottom: 10px;
  }	
  section .sidebar{
		min-height: 150px !important;  	
  	height: auto;
  }	
  body .is404 h1 {
    font-size: 12em !important;
    line-height: 1em!important;
  }		
	body .is404 h2 {
    font-size: 35px !important;
    line-height: 1em!important;
  }		  
	ul.form_opt{
		li{
			float: left;
			&.text-label{
				display: block;
				float: none;
				width: 100%;
				small{
					display: none;
				}
			}
			a{
				&.first{
					.border-radius(0 2px 2px 0);
				}
				&.last{
					.border-radius(2px 0 0 2px);
				}				
			}
		}
	}
  .main-advanced .col-sm-4{
		padding-bottom: 10px;
  }
	body .rand div > i{
		font-size: 2.5em;
	}  
} // End Tablet
@media screen and (max-width:450px){
	.home section.hero{
		background-position: 200px 0;
	}
	.home header .navbar .nav{
		background: #fff;
		padding: 10px;
		margin: 0;
		.border-radius(5px);
		li{
			margin-left: 0;
			margin-bottom: 5px;
			a.active{
				color: #fff;
				background: #000;
			}
		}
	}
	header{
		.navbar-brand{
			font-size: 1.2em !important;
		}
	}
	header .navbar .nav li{
		margin: 0;
	}
	header .navbar .nav li.dropdown img{
		display: none;
	}	
	header .navbar .nav li.dropdown ul {
	  position: initial;
	  width: 100%;
	  float: right;
	  background: transparent;
	  border: 0;
	  box-shadow: none;
	  z-index: 2;
	  display: block;
	  padding: 0;
	  list-style: none;
	}	
	header .navbar .nav li.dropdown ul li{
		display: block;
	}
  body .is404 h1 {
    font-size: 12em !important;
    line-height: 1em!important;
  }		
	body .is404 h2 {
    font-size: 20px !important;
    line-height: 1em!important;
  }		  
  section .sidebar{
  	height: auto;
  	display: none;
  }
	#main-form{
		.col-sm-10{
			border-bottom: 1px solid #eee;
		}
		.main-form {
			.main-input{
				font-size: 1.5em;

			}
			.input-group-addon{
				font-size: 1.5em;
			}
			.main-button {
				margin-top: 10px;
				font-size: 13px;
				width: auto;
				padding: 8px 15px;
				height: auto;
			}
		}
	}	
	footer{
		.text-right{
			text-align: left !important;
			margin-top: 10px;
			a{
				&:first-child{
					margin-left: 0;
				}
			}
		}
	}
	#recaptcha_table > tbody > tr:nth-child(1) > td:nth-child(2) {
		display: none;
	}	
	.recaptcha_input_area{
		width: 77% !important;
		input{
			width: 100% !important;
		}
	}
	#recaptcha_image{
		width: 104% !important;
		img{
			width: 100% !important;
		}
	}
	section .panelette{
		margin-bottom: 15px;
	}
	body .rand{
		margin-bottom: 100px;
	}
	body .rand div > i{
		font-size: 2.5em;
	}
	body .rand .rand1{
		top: -10%;
	}
	body .rand .rand2, body .rand .rand5{
		left: 5%;
	}
	body .rand .rand4{
		top: 50%;
	}
	body .rand .rand6{
		left: 75%;
	}
	section .stats h3 span{
		display: block;
	}
  section#plan .price-table {
    width: 100% !important;
    max-width: 100% !important;
  }
  section#plan #price-tables .price-table {
    width: 100% !important;
    max-width: 100% !important;
  }  
} // End Mobile
	.float-away {
	  position: relative;
	}
	.float-away:after {
	  content: attr(href);
	  position: absolute;
	  left: 0;
	  top: 0;
	  display: block;
	}
	.float-away:after {
	  -webkit-animation-duration: 2s;
	  animation-duration: 2s;
	  -webkit-animation-name: float-away;
	  animation-name: float-away;
	  -webkit-animation-timing-function: ease-out;
	  animation-timing-function: ease-out;
	}	
	@keyframes float-away {
    from {
    	opacity: 1;
    	top: 0;
    }
    to {
    	top: -30px;
    	opacity: 0.1;
    }
	}
 ul.doughnut-legend {
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  margin-top: 30px;
}
ul.doughnut-legend li {
  display: inline-block;
  margin-right: 10px;
}
ul.doughnut-legend li span {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 2px;
}	

#detect-app {
  background: #fff;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
		h3 {
	    max-width: 430px;
	    width:  100%;
	    margin: 100px auto;
	    text-align: center;
	    font-size: 35px;	    
	  }
		span {
	    display:  block;
	    font-size: 20px;
	    margin-top: 15px;
		}	  
}
.btn-group{
	&.addmargin{
		margin-top: 32px;
	}
}

body.dark-mode{
	background: #1e1e1e;
	color: #fff;

	a{
		color: #fff;
		&:hover{
			color: @blue;
		}
	}
	.btn{
		&:hover{
			color: #fff;
			opacity: 0.8;
		}
		&.btn-primary{
			background: #008aff;
		}
		&.btn-default{
			background: #1E1E1E;
		  color: #646464;
		}
	}
	.custom-overlay .custom-message{
		box-shadow: 0 0 20px rgba(0,0,0,0.2);
	}
	.sp-input {
		color: #fff;
		background: #121212;
		border-color: #121212;
	}
	.sp-replacer{
		background: #1e1e1e;
		border-color: #1e1e1e;
	}
	.sp-container{
		background: #1e1e1e;
		border-color: #1e1e1e;
	}
	.sp-palette-container,.sp-picker-container{
		border-color: transparent;
	}
	.datepicker-dropdown{
		box-shadow: 0 3px 6px #000;
		color: #000;
	}
	.autocomplete-suggestions{
		color: #aaa;
	}
	.panel-default{
		background: #121212;
		border-color: #101010;
		color: #fff;
		.panel-heading{
			background: #000000;
			color: #fff;
			border-color: #121212;
		}
	}
	.nav>li>a{
		color: #999;
	}
	.dropdown{
		ul{
			background: #121212 !important;
			border: 1px solid #000  !important;
			box-shadow: 0 10px 10px rgba(0,0,0,0.1)  !important;
			li{
				span{
					color: #fff  !important;
				}
				a{
					&:hover{
						color: @blue  !important;
					}
				}
			}
		}			
	}
	.panel-dark{
		background: #121212;
		border-color: #101010;
		color: #fff;
	}

	.btn-secondary{
		box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	}

	.form-control{
		background: #1e1e1e;
		border-color: #1e1e1e;
		color: #fff;		
	}
	.input-group-addon{
		background: #1e1e1e;
		border-color: #1e1e1e;
		color: #fff;			
		font-size: 0.95em;
	}
	.chosen-single{
		background: #1e1e1e;
		border-color: #1e1e1e;
		color: #fff;
		.border-radius(0 2px 2px 0);
	}	
	.chosen-drop{
		background: #1e1e1e;
		color: #fff;
		border-color: #1e1e1e;					
	}		
	.chosen-container-multi .chosen-choices{
		background: #1e1e1e;
		color: #fff;
		border-color: #1e1e1e;	
	}	
	.form-horizontal label.control-label {
		color: #fff;
	}
	.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th{
		background: #1e1e1e;
	}	
	.table-striped td{
		border: 0;
	}
	.table thead th, .table tbody td{
		border-color: #000 !important;
	}
	code{
		background: #1e1e1e;
	}
	pre{
		background: #1e1e1e;
		color: #c7254e;
		border: 0;
		span.m-x-3{
			color: #c7254e;
		}
		span.m-x-4{
			color: #4DCAF8;
		}		
		span.m-x-5{
			color: #C782FB;
		}
		span.m-x-6{
			color: #fff;
		}
	}
	ul.form_opt {
		li{
			a{
				background: #1c1c1c;
				color: #5e5e5e;
			}
			a.current{
				background: @blue;
				color: #fff;
			}
		}
		li.text-label {
			color: #fff;
		}
	}

	hr{
		border-color: #1e1e1e;
	}

	.list-group-item{
		background: transparent;
		border-color: transparent;
	}

	#main-form{
		background: #121212;
		border: 1px solid darken(#121212, 2%);
		.border-radius(2px);
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
		.main-form{
			padding: 20px;
			border-bottom: 1px solid darken(#121212, 2%);	
			.input-group-addon{
				border-color: darken(#121212, 10%);
				background: #1e1e1e;
				color: #fff;
			}
			.main-input{
				background: #1e1e1e;
				color: #fff;
			}
			.main-textarea{
				background: #1e1e1e;
				color: #fff;
			}
		}
		.main-options{
			.chosen-single{
				background: #1e1e1e;
				border-color: #1e1e1e;
				color: #fff;
				.border-radius(0 2px 2px 0);
			}	
			.chosen-drop{
				background: #1e1e1e;
				color: #fff;
				border-color: #1e1e1e;					
			}							
		}
		.main-advanced{
			background: #121212;
			color: #fff;
			h3{
				color: lighten(@black, 20%);
			}
			p{
				color: lighten(@black, 55%); 
			}
			input{
				background: #1e1e1e;
				color: #fff;
				border-color: #1e1e1e;
			}
			.input-group-addon{
				background: #1e1e1e;
				color: #fff;
				border-color: #1e1e1e;				
			}
			#geo, #device{
				.chosen-single{
					background: #1e1e1e;
					border-color: #1e1e1e;
					color: #fff;
				}
			}
			.chosen-drop{
				background: #1e1e1e;
				color: #fff;
				border-color: #1e1e1e;					
			}			
			.chosen-container-multi .chosen-choices{
				background: #1e1e1e;
				color: #fff;
				border-color: #1e1e1e;	
			}
		}
	}

	header.app{
		background: #161616;
		border: 0;
		color: #fff;
		.navbar {
			.navbar-header {
				.navbar-brand {
					color: #fff;
				}
			}
			.nav {
				li {
					a {
						color: #fff;
						&:hover{
							border: 0;
						}
					}
					&:hover{
						background: #292929;
						.border-radius(20px);
					}
				}
			}
		}
	}

	.sidebar{
		background: #121212;
		border: 0;
		color: #fff;
		.nav-sidebar{
			li{
				&.locked {
					a{
						color: lighten(@black, 5%);
						&:hover{
							background: darken(@black, 5%);
						}
						.label{
							color: #000;
						}
					}
				}
			}
			a{
				color: #666;
				&:hover,&.active{
					color: #fff;
					background: #191919;
					box-shadow: none;
				}				
			}
		}		
		h3{						
			color: #aaa;
		}
		.side-stats{
			text-align: left;
			margin-top: 5px;
			margin-left: 15px;	
			color: #666;
			span{
				color: #666;
				font-weight: 700;
			}
		}	
	}

	.content {
		.main-content{
			.toolbox{
				background: #121212;
				border: 1px solid darken(#121212, 2%);
				.input-group-addon{
					background: #1e1e1e;
					border-color: #1e1e1e;					
				}
				.chosen-single{
					background: #1e1e1e;
					border-color: #1e1e1e;
					color: #fff;
					.border-radius(0 2px 2px 0);
				}	
				.chosen-drop{
					background: #1e1e1e;
					color: #fff;
					border-color: #1e1e1e;					
				}					
			}
		}
		#widgets ul li{
			border-color: darken(#121212, 2%);
			color: #aaa;
		}
		.url-list{
			border-bottom-color: darken(#121212, 2%);
			.title a{
				color: #aaa;
			}

			.icheckbox_flat{
				opacity: 0.5;
			}
			ul.toggle li {
				.dropdown {
					opacity: 0.9;
					a{
						color: #fff;
					}
				}
				a{
					color: #666;
					&:hover{
						color: #fff;
					}
				}
			}
		}		
	}
	#modal-alert{
		background: #121212;
		color: #fff;
		.title{
			background: #121212;
			color: #fff;
		}
		a{
			color: #fff;
		}
	}

	footer{
		a{
			&:hover, &.active{
				background: #000;
				color: #fff;
			}
		}
	}
}
.data-holder{
	position: relative;
	.data-modal{
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
		background: rgba(255,255,255,0.5);
		top: 0;
		img{
			position: absolute;
			top: 30%;
		}
	}		
}
.widgets ul{
	margin: 0;
	padding: 5px 0;
	list-style: none;
}
.widgets ul li{
	padding: 10px 0;
	list-style: none;
}
.blog-image{
	width: 100%;
	display: block;
	margin-bottom: 30px;	
}
.blog-image img{
	width: 100%;
	.border-radius(3px);
}
.integrations{
	margin-top: 75px;
	margin-bottom: 30px;
	h3{
		color: #655F84;
		font-size: 20px;
	}
	p{
		font-size: 14px;
		margin-bottom: 30px;
	}
	ul{
		list-style: none;
		margin: 0;
		padding: 0;
		li{
			display: inline-block;
			margin-right: 20px;
			margin-bottom: 10px;
			background: #fff;
			.border-radius(5px);
			padding: 10px;
			text-align: center;
			box-shadow: 0 5px 10px rgba(0,0,0,0.1);
			h3{
				display: none;
			}
			&:last-child{
				margin-right: 0;
			}
			img{
				width: 100px;
			}
		}
	}
}
a.c2a {
    text-transform: uppercase;
    color: #673AB7;
    font-weight: 700;
    position: relative;
    font-size: 15px;
    &:hover{
    	color: #673AB7;
    	&:before{    	
		    width: 50px;
			}
    }
    &:before{
	    content: " ";
	    border-bottom: 2px solid #673AB7;
	    width: 30px;
	    display: inline-block;
	    position: relative;
	    margin-right: 10px;
	    vertical-align: middle;
	    transition: all 0.2s ease-in;
    }
}
ul.themes-style {
  list-style: none;
  padding: 0;
	li {
  	display: inline-block;
		a {
		  text-indent: -9999px;
		  display: inline-block;
		  width: 40px;
		  height: 40px;
		  margin-right: 5px;
		  background: #eeeeee;
		  border-radius: 2px;
		  -moz-border-radius: 2px;
		  -webkit-border-radius: 2px;
		  border: 1px solid #000;
			&.current {
  			box-shadow: 0 0 0 2px #000;
  		}
  	}
	}
}
.member-stats{
	text-align: left;
	margin-top: 5px;
	span{
		font-weight: 700;
	}
}	
@keyframes showdown{
	0% {
	  transform: translatey(-300px);
	}
	100% {
	  transform: translatey(10px);
	}
}
@keyframes showup{
	0% {
	  transform: translatey(300px);
	}
	100% {
	  transform: translatey(-10px);
	}
}
// Custom Functions
.border-radius(@radius: 2px){
  	border-radius: @radius;
  	-moz-border-radius: @radius;
  	-webkit-border-radius: @radius;
}
.transition(@time:0.5s,@animation:linear,@property:all){
	transition:@property @time @animation;
	-webkit-transition:@property @time @animation;
	-o-transition:@property @time @animation;
	-ms-transition:@property @time @animation;
	-moz-transition:@property @time @animation;
}
.gradient(@start,@stop, @deg: 270deg){
	background: -moz-linear-gradient(@deg, @start 0%, @stop 100%);
	background: -webkit-linear-gradient(@deg, @start 0%,@stop 100%);
	background: linear-gradient(@deg, @start 0%,@stop 100%);
}