/**
* jquery.material-color-picker.js v1.0.0
* http://www.castorstudio.com
*
* This color picker is part of the Material Plus UI Kit
*
* Color Picker inspired by Google's Material Design
* 
* Copyright (c) 2017 Paulo Mendez,
* http://www.castorstudio.com
*/

.material-color-picker-wrapper {
	--colorpicker-column-count: 5;
	--colorpicker-column-width: calc(100% / var(--colorpicker-column-count));
	--colorpicker-item-size: 48px;
	--colorpicker-width: 350px;
	--colorpicker-height: 360px;
	--colorpicker-top: 0px;
	--colorpicker-left: 0px;
	--colorpicker-zindex: 10;
	--colorpicker-offset: 16px 0;
	--colorpicker-padding-title: 25px 25px 10px 25px;
	--colorpicker-padding-wrapper: 8px 16px;
	--colorpicker-padding-wrapper_notitle: 20px 16px;
	--colorpicker-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
	font-family: Roboto, sans-serif;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	top: var(--colorpicker-top);
	left: var(--colorpicker-left);
	width: var(--colorpicker-width);
	height: 1px;
	z-index: var(--colorpicker-zindex);
	-webkit-transition: all .3s;
	transition: all .3s
}
.material-color-picker-wrapper * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.material-color-picker-wrapper .material-color-picker {
	position: absolute;
	top: var(--colorpicker-pos_top);
	right: var(--colorpicker-pos_right);
	bottom: var(--colorpicker-pos_bottom);
	left: var(--colorpicker-pos_left);
	width: var(--colorpicker-width);
	max-width: var(--colorpicker-width);
	margin: var(--colorpicker-offset);
	border-radius: 15px;
	background-color: #e0e0e0;
	-webkit-box-shadow: var(--colorpicker-shadow);
	box-shadow: var(--colorpicker-shadow);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column;
	flex-flow: column;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-webkit-transition: all .3s cubic-bezier(0, 0, .2, 1);
	transition: all .3s cubic-bezier(0, 0, .2, 1);
	-webkit-animation: opencolorpicker 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards;
	animation: opencolorpicker 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards
}
.material-color-picker-wrapper .material-color-picker .mcp__title+.mcp__collection-wrapper,
.material-color-picker-wrapper .material-color-picker .mcp__title+.mcp__collection-wrapper .mcp-color-item-palette {
	padding: var(--colorpicker-padding-wrapper)
}
.material-color-picker-wrapper .material-color-picker .mcp__title {
	-webkit-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	cursor: default;
	padding: var(--colorpicker-padding-title);
	overflow: hidden;
	opacity: 0;
	-webkit-animation: slideInDownOpacity 350ms cubic-bezier(0, 0, .2, 1) .2s 1 normal forwards;
	animation: slideInDownOpacity 350ms cubic-bezier(0, 0, .2, 1) .2s 1 normal forwards
}
.material-color-picker-wrapper .material-color-picker .mcp__title h3 {
	font-family: "Montserrat";
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 2rem;
	margin: 0;
	padding: 0
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper {
	padding: var(--colorpicker-padding-wrapper_notitle);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: wrap;
	flex-flow: wrap;
	position: relative;
	overflow-y: auto
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item {
	overflow: hidden;
	margin-bottom: 8px;
	-ms-flex-preferred-size: var(--colorpicker-column-width);
	flex-basis: var(--colorpicker-column-width);
	width: var(--colorpicker-column-width);
	min-width: var(--colorpicker-column-width);
	max-width: var(--colorpicker-column-width);
	height: var(--colorpicker-item-size);
	min-height: var(--colorpicker-item-size);
	max-height: var(--colorpicker-item-size);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item .mcp-color-item__swatch {
	position: relative;
	z-index: 2;
	cursor: pointer;
	background-color: #bdbdbd;
	border: solid 3px rgba(0, 0, 0, 0.05);
	border-radius: 50%;
	width: var(--colorpicker-item-size);
	height: var(--colorpicker-item-size);
	min-width: var(--colorpicker-item-size);
	max-width: var(--colorpicker-item-size);
	min-height: var(--colorpicker-item-size);
	max-height: var(--colorpicker-item-size);
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	-webkit-transition: all .3s cubic-bezier(0, 0, .2, 1);
	transition: all .3s cubic-bezier(0, 0, .2, 1);
	pointer-events: initial;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.force-white::after{
	color:#fff !important;
}

.force-black::after{
	color:#000 !important;
}

.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item .mcp-color-item__swatch::after {
	content: "\f117";
	font-family: "Icons", sans-serif;
	font-size: 1.5rem;
	color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--colorpicker-item-size)/ 1.5);
	height: calc(var(--colorpicker-item-size)/ 1.5);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	pointer-events: none;
	-webkit-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	-webkit-transition: all .3s cubic-bezier(0, 0, .2, 1);
	transition: all .3s cubic-bezier(0, 0, .2, 1)
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette {
	padding: var(--colorpicker-padding-wrapper_notitle);
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	display: none;
	-ms-flex-flow: wrap;
	flex-flow: wrap;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	background: #e0e0e0;
	position: absolute;
	top: var(--position-top, 0);
	left: var(--position-left, 0);
	width: var(--colorpicker-item-size);
	height: var(--colorpicker-item-size);
	-webkit-animation: closepalette 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards;
	animation: closepalette 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards;
	z-index: 1
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette .mcp-color-back-to-palette {
	position: relative;
	cursor: pointer
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette .mcp-color-back-to-palette::after {
	content:  "\f131";
	font-family: "Icons", sans-serif;
	font-size: 36px;
	color: #fff;
	background:#333333;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	padding:23px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: all .3s cubic-bezier(0, 0, .2, 1);
	transition: all .3s cubic-bezier(0, 0, .2, 1)
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette>.mcp-color-item>.mcp-color-item__swatch {
	-webkit-transform: scale(0);
	transform: scale(0)
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette_visible {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-animation: openpalette 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards;
	animation: openpalette 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette_visible>.mcp-color-item>.mcp-color-item__swatch {
	-webkit-transform: scale(1);
	transform: scale(1)
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette_closing {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-animation: closepalette 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards;
	animation: closepalette 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper_loaded .mcp-color-item>.mcp-color-item__swatch {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper_loaded .mcp-color-item_selected>.mcp-color-item__swatch::after {
	opacity: 1;
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1)
}
.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper_loaded .mcp-color-item_hidden>.mcp-color-item__swatch {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	pointer-events: none
}
.material-color-picker-wrapper .material-color-picker .mcp__buttonbar-actions {
	-webkit-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 8px;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: space-evenly;
	padding-bottom: 20px;;
}
.material-color-picker-wrapper .material-color-picker .mcp__buttonbar-actions .mcp__action {
	padding: 0 8px
}
.material-color-picker-wrapper .material-color-picker .mcp__button {
	will-change: transform, opacity;
	-webkit-tap-highlight-color: transparent;
	font-family:"Montserrat", sans-serif;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	letter-spacing: .04em;
	color: rgba(0, 0, 0, .87);
	display: inline-block;
	position: relative;
    padding:15px 0 15px 0 !important;
	width:150px;
	border: none;
	border-radius: 1000px;
	font-size: 0.9em;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-appearance: none
}

.material-color-picker-wrapper .material-color-picker .mcp__button:first-child{
	background-color:	#f4ff7f;
}

.material-color-picker-wrapper .material-color-picker .mcp__button:nth-child(2){
	background-color: #333333;
	color:#fff;
}

.material-color-picker-wrapper .material-color-picker .mcp__button:hover{
	opacity:0.8;
}

.material-color-picker-wrapper .material-color-picker_closing {
	-webkit-animation: closecolorpicker 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards;
	animation: closecolorpicker 350ms cubic-bezier(0, 0, .2, 1) 0s 1 normal forwards
}
.material-color-picker-wrapper.mcp--mode_modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999
}
.material-color-picker-wrapper.mcp--mode_modal::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
	content: "";
	opacity: 0;
	opacity: var(--mdc-temporary-drawer-opacity, 0);
	will-change: opacity;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.material-color-picker-wrapper.mcp--mode_modal .material-color-picker {
	position: relative;
	margin: 0 auto;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%
}
.material-color-picker-wrapper.mcp--animating::before {
	-webkit-transition: opacity .3s 0s cubic-bezier(0, 0, .2, 1);
	transition: opacity .3s 0s cubic-bezier(0, 0, .2, 1)
}
.material-color-picker-wrapper.mcp--open {
	pointer-events: auto
}
.material-color-picker-wrapper.mcp--open::before {
	opacity: 1;
	opacity: var(--mdc-temporary-drawer-opacity, 1)
}
@-webkit-keyframes openpalette {
	from {
		z-index: 1;
		opacity: 0;
		border-radius: 500px;
		top: var(--position-top);
		left: var(--position-left);
		width: var(--colorpicker-item-size);
		height: var(--colorpicker-item-size);
		background: rgba(224, 224, 224, 0)
	}
	70% {
		background: rgba(224, 224, 224, .3)
	}
	to {
		z-index: 3;
		opacity: 1;
		border-radius: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		background: #e0e0e0;

	}
}
@keyframes openpalette {
	from {
		z-index: 1;
		opacity: 0;
		border-radius: 500px;
		top: var(--position-top);
		left: var(--position-left);
		width: var(--colorpicker-item-size);
		height: var(--colorpicker-item-size);
		background: rgba(224, 224, 224, 0)
	}
	70% {
		background: rgba(224, 224, 224, .3)
	}
	to {
		z-index: 3;
		opacity: 1;
		border-radius: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		background:  #e0e0e0;
	}
}
@-webkit-keyframes closepalette {
	from {
		z-index: 3;
		opacity: 1;
		border-radius: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		background:  #e0e0e0;
	}
	30% {
		background: rgba(224, 224, 224, .3)
	}
	to {
		z-index: 1;
		opacity: 0;
		border-radius: 500px;
		top: var(--position-top);
		left: var(--position-left);
		width: var(--colorpicker-item-size);
		height: var(--colorpicker-item-size);
		background: rgba(224, 224, 224, 0)
	}
}
@keyframes closepalette {
	from {
		z-index: 3;
		opacity: 1;
		border-radius: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		background:  #e0e0e0;
	}
	30% {
		background: rgba(224, 224, 224, .3)
	}
	to {
		z-index: 1;
		opacity: 0;
		border-radius: 500px;
		top: var(--position-top);
		left: var(--position-left);
		width: var(--colorpicker-item-size);
		height: var(--colorpicker-item-size);
		background: rgba(224, 224, 224, 0)
	}
}
@-webkit-keyframes opencolorpicker {
	from {
		opacity: 0;
		width: 0;
		max-height: 0
	}
	to {
		opacity: 1;
		width: var(--colorpicker-width);
		max-height: var(--colorpicker-height)
	}
}
@keyframes opencolorpicker {
	from {
		opacity: 0;
		width: 0;
		max-height: 0
	}
	to {
		opacity: 1;
		width: var(--colorpicker-width);
		max-height: var(--colorpicker-height)
	}
}
@-webkit-keyframes closecolorpicker {
	to {
		opacity: 0;
		width: 0;
		max-height: 0
	}
	from {
		opacity: 1;
		width: var(--colorpicker-width);
		max-height: var(--colorpicker-height)
	}
}
@keyframes closecolorpicker {
	to {
		opacity: 0;
		width: 0;
		max-height: 0
	}
	from {
		opacity: 1;
		width: var(--colorpicker-width);
		max-height: var(--colorpicker-height)
	}
}
@-webkit-keyframes slideInDownOpacity {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}
@keyframes slideInDownOpacity {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}