@mixin selected-preset() {
	&:after {
	    content: "\f058";
	    font: normal normal normal 14px/1 FontAwesome;
	    width: 22px;
	    position: absolute;
	    top: -9px;
	    right: -9px;
	    color: #f95b26;
	    background-color: white;
	    border-radius: 50%;
	    background-size: 22px 27px;
	    height: 21px;
	    text-align: center;
	    font-size: 20px;
    }
}

@mixin panel-button( ) {
	background-color: white;
	text-decoration: none;
	padding: 7px 15px;
	border-radius: 30px;
	margin: 0 4px;
	transition: background-color .25s, color .25s;
	
	&:focus {
		box-shadow: none;
	}
	&:hover {
		background-color: lighten( $hover-color, 15% );
		color: white;
	}
	&.selected {
		background-color: $hover-color;
		color: white;
	}
	&:active{
		box-shadow: 0px 0px 49px -12px black inset;
	}
}
@mixin slider( ) {
    height: 3px;
    border-radius: 0;
    width: 75px;
    border-color: #cecece;
    margin: 16px;
    margin-top: 10px;
    display: inline-block;
    float: right;
    cursor: pointer;
    
    .ui-slider-handle {
	    left: 0%;
	    margin-top: -5px;
	    border: 3px;
	    height: 1em;
	    width: 1em;
	    border-radius: 0px;
	    background: $hover-color;
	    top: -1px;
	    cursor: pointer;
	    border-radius: 50%;
	}
}

.color-panel,
.editor-panel {
	display: none;
	position: fixed;
    top: 200px;
    right: 45px;
    z-index: 100101;
	width: 310px;
    border: none;
    background-color: white;
    border-radius: 5px;
	box-shadow: 0 0 18px 0 rgba(22, 45, 61, 0.27);
    border: 1px solid #b1b1b1;
    
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	.panel-title {
	    cursor: move;
		background-color: $panel-color;
		color: white;
		padding: 15px 22px;
		font-weight: 300;
		margin: 0;
		font-size: 16px;
	}
    
    .panel-title .close-icon {
	    position: absolute;
	    right: 25px;
	    border-radius: 50%;
	    background-color: white;
	    color: $panel-color;
	    padding: 1px;
	    top: 14px;
	    cursor: pointer;
        transition: box-shadow .3s;
	}
	
	.panel-title .close-icon:hover {
        box-shadow: 0px 0px 3px 1px #969696 inset;
		color: $hover-color;
	}
	
	.panel-title {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		margin-bottom: 10px;
	}
	
	.panel-selection {
	    width: 70px;
	    height: 70px;
	    margin: 3px;
	    display: inline-block;
	    text-align: center;
	    border-radius: 5px;
	    cursor: pointer;
	    background-color: $panel-selection-color;
	    transition: background-color .3s;
		white-space: nowrap;
	    text-overflow: ellipsis;
	    padding: 0px 9px;
	    overflow: hidden;
	}

	.panel-selection:hover {
	    background-color: white;
	}
	
	.panel-selection.selected {
	    background-color: $hover-color;
	    color: white;
	}
	
	.panel-button {
		@include panel-button();
		font-size: 15px;
		background-color: $hover-color;
		padding: 7px 20px;
		color: white;
		
		&:hover {
			background-color: lighten( $hover-color, 8% );
		}
	}
	
	.panel-footer {
		display: none;
		position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: rgba(255,255,255,.8);
	    height: 20px;
	    padding: 20px;
	    text-align: center;
	    border-radius: 0 0 5px 5px;
	    
	    
	    .add-media {
	       display: none;
	    }
	}
	
	.supports-customization {
		padding-bottom: 40px;
	}
	
	.panel-body .customize {
		display: none;
	}
	
	.back {
	    padding: 10px 0;
    	margin-bottom: 20px;
	
		.panel-button {
			background-color: $heading-text-color;
			padding: 4px 12px;
			font-size: 12px;
			
			&:hover {
				background-color: lighten( $hover-color, 8% );
			}
		}
		
		.fa {
			font-size: 8px;
    		position: relative;
    		top: -1px;
			left: -1px;
		}
	}
	
	.ui-slider-horizontal {
		@include slider();
	}
	
	.inline-color-controls {
	   h4,
	   .theme-colors-wrap .boldgrid-tooltip-wrap,
	   [data-tooltip-id="color-saved"] {
	       display: none;
	   }
	}

	.section {
		border-bottom: 2px solid $title-border-color;
		padding: 18px 21px;
		color: $heading-text-color;
		position: relative;
		
		&:last-of-type {
	    	border-color: transparent;
	    }
	
		h4 {
			font-size: 14px;
    		font-weight: normal;
    		color: $heading-text-color;
    		margin-bottom: 12px;
        	margin-top: 0;
		}
		
		    
	    &.color-controls {
	    	text-align: center;
	    	
	    	h4 {
	    		font-size: 15px;
	    		margin-bottom: 5px;
	    		margin-top: 0;
	    	}
	    }
	    
		p {
    		margin-bottom: 4px;
    		color: $heading-text-color;
    		font-weight: lighter;
    	}
    
		&.family .ui-icon {
			border-radius: 50%;
	    	border: 1px solid #8c8a8c;
	    	
	    	&:before {
	    		content: ' ';
	    	}
		}
		.ui-slider-horizontal {
	        float: none;
	        margin-left: 0;
	        width: 70%;
	        margin-bottom: 8px;
	    }
	    
	     .slider ~ .value {
	        font-size: 19px;
		    position: relative;
		    top: -14px;
		    left: 5px;
		    padding: 5px;
            border-radius: 5px;
            background-color: #f1f1f1;
	    }
	    
	    label {
	    	display: table;
    		margin: 10px 0;
	    }
	    
	    input[type="radio"]:checked:before {
		    background-color: $hover-color;
		}
	}
	
	.title {
	    padding-bottom: 0;
	    border-bottom: 1px solid #32373c;
	    font-size: 15px;
	    margin: 0 15px 17px;
	    color: $heading-text-color;
	    border-color: $title-border-color;
	    
	    h4 {
		   font-size: 16px;
	       font-weight: normal;
	       margin: 10px 0;
	    }
    }
    
}

/*************** Panel Body ********************/

.panel-body {
	overflow-y: scroll;
    padding: 0 10px;
	background-color: white;
}
.panel-body ul {
	text-align: center;
	margin-top: 0;
}
/*************** Icon Panel ********************/
.editor-panel[data-type="icon"] {
	width: 335px;
	
	&.customize-open {
		width: 275px !important;
	}
	
	.back {
		margin-bottom: 0;
	}

	.panel-selection {
	    width: 123px;
	    height: 42px;
	    text-align: left;
    }
    
    .panel-body .presets .fa {
		font-size: 26px;
	    position: relative;
	    top: 50%;
	    transform: translateY(-50%);
	    color: #525252;
	}
	.panel-selection .name {
	    margin-left: 6px;
	    vertical-align: middle;
	}
	
	.panel-selection.selected .fa {
	    color: white;
	}
	.ui-slider-horizontal {
	    width: 65%;
	}
}
/*************** Background Panel ********************/
.editor-panel[data-type="box"] {
	&.editor-panel,
	.panel-body {
		background-color: #ececec;
	}
    .bg-box {
	    width: 45px;
	    height: 45px;
	    margin: 12px 8px;
		padding: 0;
		cursor: pointer;
		box-sizing: border-box;
	}
	
	.bg-box.box-long {
	    height: 114px;
	}
	.bg-box.box-wide {
	    width: 106px;
	}
	.panel-body,
	.box-design {
	   height:100%;
	   width: 100%;
	}
	
	.back {
		margin-bottom: 0;
	}
	       
    .presets {
	    margin: 0 10px;
	    padding-bottom: 45px;
	    font-size: 7px;
	     
	    &.my-designs {
	        padding-bottom: 15px;
	    }
    }
    
    .presets .selected {
       @include selected-preset();
    }
    
    .color-controls .title {
    	margin-left: 10px;
    	margin-right: 10px;
    }
    
    .box-design .customize {
    	display: none;
    }
}
/*************** Background Panel ********************/
.editor-panel[data-type="background"] {
	
	img {
		max-width: 100%;
	}

	.panel-title {
		margin-bottom: 0px;
	}

	.panel-body {
		padding: 0;
		overflow: hidden;
		border-radius: 0 0 5px 5px;
	}
	
	.panel-footer {
    	bottom: -59px; 
	}
	
	.current-selection {
		position: relative;
		height: 180px;
		background-size: cover;
        background-position: 50%;
        
        &[data-type="pattern"] {
            background-size: initial;
            background-repeat: repeat;
        }
        
        &[data-type="color"] .settings{
        	display: none !important;
        }
        
        &[data-type] .settings {
            display: block;
        }
        
        .settings {
            display: none;
            text-align: center;
            position: relative;
            top: 59px;
            
            .panel-button {
                background-color: rgba(0, 0, 0, 0.6);
                border: 2px solid white;
                color: white;
                padding: 5px 11px 6px;
                
                &:hover {
                    color: $hover-color;
                    border-color: $hover-color;
                }
            }
        }
	}
	
	.filters {
	    background-color: rgba(0, 0, 0, 0.4);
	    padding: 10px;
	    position: absolute;
	    bottom: 0;
	    right: 0;
	    left: 0;
	}
	
	.filter {
		@include panel-button();
		color: #222;
		
		&:hover {
			background-color: lighten( $panel-color, 10% );
		}
		&.selected {
			background-color: $panel-color;
		}
		
	}
	
	.current-selection img,
	.presets img {
        position: relative;
	}
	
	.customize .section:not(.back) {
	   display: none;
	}
	
	.preset-wrapper[data-type="color"] ~ .customize .background-color {
	   display: block;
	}
	.preset-wrapper[data-type="gradients"] ~ .customize .direction,
	.preset-wrapper[data-type="gradients"] ~ .customize .gradient-color-2,
	.preset-wrapper[data-type="gradients"] ~ .customize .gradient-color-1 {
	   display: block;
	}
	
	.preset-wrapper[data-type="pattern"] ~ .customize {
		.scroll-effects,
		.background-color {
		   display: block;
		}
	}
	.preset-wrapper[data-type="image"] ~ .customize {
		.overlay-color,
		.scroll-effects,
		.vertical-position,
		.size {
		   display: block;
		}
	}
	
	.add-image-controls {
		padding: 0;
		background-color: $panel-color;
		color: #fff;
		
		&:hover {
			background-color: lighten( $panel-color, 15% );
		}
		
		a {
		    text-decoration: none;
		    position: relative;
		    top: 17px;
		    color: #fff;
		    font-size: 15px;
		}
	}
	
	.presets {
		padding: 0 20px;
		
		ul > li {
    		margin: 15px 0;
    		height: 53px;
    		border: 1px solid #bdbcbc;
    		cursor: pointer; 
		}
		
		[data-type="image"] {
		    background-size: cover;
            background-position: 50%;
		}
		
		[data-type="pattern"] {
		    background-color: #d6d6d6;
		}
		
		.title {
			margin-bottom: 17px;
    		margin-left: 0;
    		margin-right: 0;
		}
		
		.add-image-controls {
			display: none;
		}
		
		&[data-filter="image"] .add-image-controls {
			display: block;
		}
		
		h4 {
			font-weight: normal;
			margin: 13px 0 6px;
		}
		
		.background-color {
			text-align: left;
			padding: 0;
			padding-bottom: 7px;
			
			label {
				position: absolute;
				top: -6px;
				right: 0;
				margin-top: 0;
				
				&:before {
					top: 5px;
					left: -25px;
				}
			}
			
			h4 {
				font-size: 18px;
				margin-top: 20px;
			}
		}
	}
	
	.selection {
	   position: relative;
	}
	
	.presets .selected {
	   @include selected-preset();
	}
	
	.background-design .customize {
		display: none;
		
		.back {
			margin-bottom: 0px;
		}
		
		.overlay-color {
		    padding-top: 8px;
            padding-bottom: 8px;
		}
	}
	
	.panel-footer {
	   .customize-design {
	       display: none;
	   }
	}
}

/*************** Change Image Border Panel ********************/
.editor-panel[data-type="image"] {
    .panel-selection {
	    width: calc(50% - 2px);
	    height: auto;
	    background-color: white;
	    padding: 9px 0px;
	    margin: 0;
    }
    
    .presets {
    	font-size: 7px;
    }
    
    img {
        max-width: 100px;
        max-height: 100px;
    }
    
    .presets .selected {
    	position:relative;
    	
       @include selected-preset();
       
       &:after {
       		top: 5px;
    		right: 5px;
       }
    }
}

/*************** Button Panel ********************/
.editor-panel[data-type="button"] {
	background-color: #eee;

    .panel-body {
		background-color: #eee;
    	padding: 0;
    	
    	.theme-designs {
    	    background-color: transparent !important;
    	    padding-left: 2px;
            padding-right: 12px;
    	}
    }

    .presets .panel-selection {
	    width: 48%;
	    height: auto;
	    background-color: #eee;
	    padding: 10px 0;
	    margin: 0;
    }
    
    .presets .selected {
       position:relative;

       @include selected-preset();
        
       &:after {
            top: 2px;
            right: 0px;
       }
    }
    
    .back {
        padding: 10px 10px 0;
    }
     
    .boldgrid-button {
        text-transform: uppercase;
    }
    
    .presets {
        padding-left: 15px;
        padding-right: 15px;
    }
    	    
    .section.class-control {
		padding-top: 0;
		padding-bottom: 8px;
    }
    
    [data-preset*="btn-block"] {
        width: 100% !important;
    }
}

/*************** Text Settings Panel ********************/
.editor-panel[data-type="font"] {
	.panel-title {
	   margin-bottom: 0px;
	}
    .panel-body {
	    padding: 0;
    }
    
    select.google-fonts {
        width: 185px;
    }
    
    .color-preview {
	    position: absolute;
	    top: 23px;
	    right: 20px;
    }
    
    .section.effects .panel-selection {
	    height: 35px;
	    width: 35px;
	    padding: 8px;
	    color: #868686;
	    font-size: 37px;
	    line-height: 33px;
	    margin: 1px;
    }
    .section.effects .panel-selection.selected {
        color: white;
    }
    .section.effects .fa-ban {
        color: #b50000;
    }
    .section.effects .panel-selection.selected .fa-ban {
        color: white;
    }
}

/*************** Image Panel ********************/
.editor-panel[data-type="image-filter"] {
	width: 400px;

	.panel-selection {
		background: none;
	    width: auto;
	    height: auto;
	    padding: 0;
	    
	    &:hover {
	    	color : $panel-color;
	    	
	    	canvas,
		    img {
		    	border-color: $panel-color;
		    }
	    }
	    
	    canvas,
		img {
		    width: 100%;
		    height: auto;
		    max-height: 100px;
		    max-width: 100px;
		    border-radius: 7px;
		    border: 2px solid transparent;
	    }
    }
    
	.panel-selection.selected {
	   color: $hover-color;
    }
	.panel-selection.selected canvas,
	.panel-selection.selected img {
	   border-color: $hover-color;
    }
    .customize {
        display: none;
    }
    
    .customizing .customize {
        display: block;
    }
    .customizing .presets {
        display: none;
    }
    
    .panel-body {
    	position: relative;
    	
    	.activate-customize {
    		margin-top: 10px;
    	}
    	
    	.remote-image-error {
    	    display: none;
    	    padding: 100px;
    	    font-size: 18px;
    	    
    	    p {
                font-size: 1.1em;
    	    }
    	}
    	
    	.remote-image-error.error-active {
    	   display: block;
    	   
    	   &~ .choices,
    	   &~ .preview {
                display: none;
    	   }
    	}
    	
    	.presets {
    		padding-right: 2px;
    		padding-top: 2px;
    	}
    	
    	.preview {
		    text-align: center;
		    margin-top: 4px;
		    height: 95%;
		    position: absolute;
		    top: 50%;
		    transform: translateY(-50%);
		    
		    img,
		    canvas {
			    max-width: 85%;
			    max-height: 85%;
			    text-align: center;
			    border-radius: 5px;
		    }
	    
            .panel-button {
                display: inline-block;
                margin: 15px auto;
                cursor: pointer;
            }
		    
		    .loading {
		    	display: none;
		    	position: absolute;
			    top: 0;
			    bottom: 0;
			    left: 0;
			    right: 0;
			    background-color: rgba(255,255,255,0.8);
			    text-align: center;
		    }
		    
		    .spinner {
		    	position: relative;
			    margin-top: 50%;
			    transform: translateY(-50%);
			    float: none;
		    }
	    }

    }
    
	&.rendering .panel-body .preview .loading {
    	display: block;
    }
    
    .panel-body .choices,
    .panel-body .preview {
		display: inline-block;
	    text-align: center;
	}
	.panel-body .choices {
		width: 50%;
		margin-left: 20px;
	} 
	
    .panel-body .preview {
		width: calc( 50% - 20px );
	}
    .panel-body .choices {
		border-radius: 5px;
    	padding-bottom: 11px;
	    background-color: #f1f1f1;
	    box-shadow: 0px 0px 4px 0px #b5b5b5;
	    margin-bottom: 8px;
		margin-top: 3px;
	}
	
    .panel-body ul {
	    overflow-y: scroll;
	    height: 400px;
	    margin: 10px;
	}
	
	.panel-body {
	    overflow: hidden;
	}
}

.theme-designs .button-overrides,
.theme-designs .button-overrides {
   background-color: transparent;
   text-shadow: none;
   border: none;
   box-shadow: none;
   
   &:hover,
   &:active,
   &:focus {
      border: none;
	  background-color: transparent;
      box-shadow: none;
   }
}
 
.editor-panel .control  {
	display: block;
    height: 36px;
    width: 216px;
    width: 50%;
    float: left;
}
.editor-panel .control .name {
    position: relative;
    top: 4px;
    float: left;
}
