/* Some Better Spacing in Content */
.astroid-element > .head > div {
   padding: 14px 15px;
}
#astroid-wrapper #astroid-sidebar-wrapper .sidebar-nav>li.has-child>a.active:after {
   content: "\f106";
}
.ace_editor{
   width: 100%;
   max-width: 300px;
   min-height: 200px;
}
.astroidsocialprofiles .select-icon{
   width: 30px;
   height: 30px;
   font-size: 20px;
   line-height: 30px;
   display: inline-block !important;
   text-align: center;
   color: #dededf;
   cursor: pointer;
}
.astroidsocialprofiles .select-icon:hover{
   color: #b2b3b4;
}
.astroidsocialprofiles .select-icon.active{
   color: #212529 !important;
}
.astroidsocialprofiles label > p{
   font-size: 18px;
}
.slider.slider-horizontal {
   height: 24px;
}
.slider-track {
   background-color: #ddd;
   background-image: -webkit-gradient(linear,0 0,0 100%,from(#ddd),to(#eee));
   background-image: -webkit-linear-gradient(top,#ddd,#eee);
   background-image: -o-linear-gradient(top,#ddd,#eee);
   background-image: -webkit-gradient(linear,left top, left bottom,from(#ddd),to(#eee));
   background-image: linear-gradient(to bottom,#ddd,#eee);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd',endColorstr='#eee',GradientType=0);
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   border-radius: 6px;
   position: absolute;
   cursor: pointer;
}
.slider.slider-horizontal .slider-track {
   height: 10px;
}
.slider-track-low, 
.slider-track-high {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   position: absolute;
   background: transparent;
}
.slider.slider-horizontal .slider-selection, 
.slider.slider-horizontal .slider-track-low, 
.slider.slider-horizontal .slider-track-high {
   height: 100%;
   top: 0;
   bottom: 0;
}
.slider-handle {
   background-color: #f2f2f2;
   background-image: -moz-linear-gradient(top,#f8f8f8,#ebebeb);
   background-image: -webkit-gradient(linear,0 0,0 100%,from(#f8f8f8),to(#ebebeb));
   background-image: -webkit-linear-gradient(top,#f8f8f8,#ebebeb);
   background-image: -o-linear-gradient(top,#f8f8f8,#ebebeb);
   background-image: linear-gradient(to bottom,#f8f8f8,#ebebeb);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8',endColorstr='#ebebeb',GradientType=0);
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
   -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
   position: absolute;
   top: 50%;
   cursor: pointer;
   width: 20px;
   height: 20px;
   background-color: #f8f8f8;
   border: 1px solid #fff;
   border-radius: 14px;
   box-shadow: 0 0 4px #000;
   -moz-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}
.slider-handle.round {
   -webkit-border-radius: 14px;
   -moz-border-radius: 14px;
   border-radius: 14px;
}
.slider.slider-horizontal .slider-tick, 
.slider.slider-horizontal .slider-handle {
   margin-left: -7px;
}
/* Notification Message */
.notifyjs-bootstrap-base{
   background: #fff !important;
   border: 1px solid  #ddd !important;
   border-radius: 0px 0 0px 5px !important;
   -webkit-border-radius: 0px 0 0px 5px !important;
   color: #000 !important;
   font-size: 12px !important;
   padding: 15px 25px !important;
}
.notifyjs-bootstrap-base:after{
   content: "";
   display: block;
   height: 5px;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   width: 100%;
}
.notifyjs-bootstrap-success:after{
   background: rgba(0, 0, 0, 0) linear-gradient(to right, #6ae34b, #4bdce3) repeat scroll 0 0 !important;
}
.notifyjs-bootstrap-error:after{
   background: rgba(0, 0, 0, 0) linear-gradient(to right, #c4183c, #c4183c) repeat scroll 0 0 !important;
}
.form-group.form-group-heading + .form-group{
   border-top:none;
}
.dropdown.optgroup .divider {
   border-top: none !important;
   height: 1em !important;
   font-weight: bold !important;
   padding: 0px 15px !important;
}
.form-group.form-group-heading {
   border-bottom: 1px solid #eaeaea;
}

.slider .tooltip.top{
   display: none !important;
}

.slider-horizontal{
   width: 100% !important;
   max-width: 270px;
}

.unit-picker{
   color: #a0a0a0;
   font-size: 16px;
}

.unit-picker li{
   cursor: pointer;
   line-height: 30px;
}

.unit-picker li label{
   cursor: pointer;
   line-height: 30px;
}

.unit-picker li label input[type="radio"]{
   opacity: 0;
   width: 0;
   height: 0;
}

.unit-picker li label input[type="radio"]:checked ~ span{
   color: #000;
   font-weight: bold;
   border-bottom: 1px dashed;
}

.unit-picker li.active{
   color: #000;
   font-weight: bold;
   border-bottom: 1px dashed;
}

.margin-left-50px{
   margin-left: 55px;
}
.margin-left-75px{
   margin-left: 75px;
}

/* For Firefox */
input[type='number'] {
   -moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.astroid-typography-preview-container .astroid-typography-preview{
   overflow: scroll;
}

.gradient-toolbar .sp-replacer{ width: 30px; height: 30px; }
.gradient-preview-container{
   width: 200px;
   height: 200px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
   border: 1px solid #dededf;
   border-radius: 5px;
   margin-bottom: 10px;
   overflow: hidden;
}
.gradient-preview{
   width: 200px;
   height: 200px;
}
.gradient-toolbar{
   width: 200px;
}
.gradient-type{
   display: inline-block;
}
.gradient-type input[type=radio]{
   display: none;
}
.gradient-type img{
   width: 30px;
   opacity: 0.5;
}
.gradient-type label{
   width: 30px;
   height: 30px;
   display: inline-block;
   cursor: pointer;
   border-radius: 3px;
   overflow: hidden;
}
.gradient-type input[type=radio]:checked ~ img{
   opacity: 1;
}
.gradient-colors > div{
   display: inline-block;
}
.gradient-colors{
   display: inline-block;
   float: right;
}