//public classes
.center-both-flex{
	align-items: center;
	display: flex;
	justify-content: center;
}

.space-between {

	display: flex;
	justify-content: space-between;

}

.space-around {

	display: flex;
	justify-content: space-around;

}

.karma-remove-list-margin,
.karma-remove-list-margin li{
	margin: 0;
}

@keyframes scaleUP {
  0%{ transform : scale( 0 ) }
  100%{ transform : scale( 1 ) }
}
/* Classes to extend for fonts */

.karma-builder-title-1 {
	font-size: 20px;
	line-height: 32px;
}

.karma-builder-title-2 {
	font-size: 16px;
	line-height: 28px;
}

.karma-builder-title-3 {
	font-size: 14px;
	line-height: 16px;
}

.karma-builder-title-4 {
	font-size: 12px;
	line-height: 22px;
}

.karma-builder-title-5 {
	font-size: 10px;
	line-height: 20px;
}

.karma-paragraph{
	font-size: 14px;
	line-height: 24px;
}

.karma-coming-soon-typo{
	color 		: $builder-main-color;
	font-family : $builder-medium-font ;
	font-size 	: 12px;
	line-height : 15px;
	margin 		: 38px 38px 35px ;
}

.karma-colorpicker-style-border-radius{
	border-radius: 23px;
}

.karma-colorpicker-style-border-radius-box{
	border-radius: 5px;
}

.karma-button-padding{
	padding: 0 20px;
}

.karma-hide{
	display: none;
}

.karma-builder-shadow-box-1{
	box-shadow: 0 2px 4px 0 rgba($builder-main-color, 0.20);
}

.karma-builder-shadow-box-2{
	box-shadow: 0 2px 12px 0 rgba($builder-main-color, 0.20);
}

.karma-builder-shadow-box-3{
	box-shadow: 0 4px 15px 4px rgba($builder-main-color, 0.20);
}


.karma-dropdown-option{

	align-items: center;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	padding: 10px;
	transition: background-color .2s;

	.karma-dropdown-option-title {
		transition: color .2s;
	}

	&.karma-selected-dropdown-option{

		background-color: $builder-accent-color-4;

		.karma-dropdown-option-title{
			color: $builder-accent-color;
			font-family: $builder-medium-font;
		}

	}

	&:not(.karma-selected-dropdown-option):hover{

		.karma-dropdown-option-title {
			color: $builder-accent-color;
		}

	}

	.karma-dropdown-option-icon{
		margin-right: 15px;

	}

}

.dot-gizmo{
	@include box(8px, 8px);
	background-color: #fff;
	border:1px solid $builder-accent-color;
	border-radius: 100%;
	box-sizing: border-box;
	position: absolute;
	z-index: $level-15;

	&:after {
		@include box(22px, 22px);
		content: "";
	}
}

.karma-typography-box-style{
	@include flexbox( center, center, space-between );
	@extend .karma-builder-title-3;
	color: $builder-accent-color;
	flex-basis: 35%;
	font-family: $builder-medium-font;
}