.colorsettings {
	position: fixed;
	top: 50%;
    transform: translateY(-50%);
	right: -325px;
	width: 325px;
	height: max-content;
	display: block;
	background: #ffffff;
	z-index: 1003;
	box-shadow: -1px 1px 20px rgba(69, 65, 78, 0.15);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	transition: all .5s;
}

.colorsettings.open {
	right: 0px;
}

.colorsettings .colorsettings-toggle {
	position: absolute;
	width: 28px;
	height: 45px;
    top: 50%;
	left: -28px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	cursor: pointer;
	color: #ffffff;
}

.colorsettings .colorsettings-toggle i {
	margin-left: 5px;
    font-size: 15px;
}

.colorsettings .title[data-background-color="black"],
.colorsettings .colorsettings-toggle[data-background-color="black"] {
	background: #1C1C1C !important;
	border-bottom: 1px solid #1C1C1C;
}
.colorsettings .title[data-background-color="gray"],
.colorsettings .colorsettings-toggle[data-background-color="gray"] {
	background: #4f4f4f !important;
	border-bottom: 1px solid #4f4f4f;
}
.colorsettings .title[data-background-color="blue"],
.colorsettings .colorsettings-toggle[data-background-color="blue"] {
	background: #0066cc !important;
	border-bottom: 1px solid #0066cc;
}
.colorsettings .title[data-background-color="purple"],
.colorsettings .colorsettings-toggle[data-background-color="purple"] {
	background: #6055aa !important;
	border-bottom: 1px solid #6055aa;
}
.colorsettings .title[data-background-color="green"],
.colorsettings .colorsettings-toggle[data-background-color="green"] {
	background: #196910 !important;
	border-bottom: 1px solid #196910;
}
.colorsettings .title[data-background-color="orange"],
.colorsettings .colorsettings-toggle[data-background-color="orange"] {
	background: #ffa500 !important;
	border-bottom: 1px solid #ffa500;
}
.colorsettings .title[data-background-color="red"],
.colorsettings .colorsettings-toggle[data-background-color="red"] {
	background: #dc2a0d !important;
	border-bottom: 1px solid #dc2a0d;
}
.colorsettings .title[data-background-color="brown"],
.colorsettings .colorsettings-toggle[data-background-color="brown"] {
	background: #8b4513 !important;
	border-bottom: 1px solid #8b4513;
}

.colorsettings .title{
    padding: 15px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    border-top-left-radius: 5px;
    border-bottom: 1px solid #ebedf2;
    background: #5867dd;
}

.colorsettings .custom-content{
	padding: 20px 15px;
	overflow: auto;
}

.colorsettings .switcher {
	padding: 5px 0;
}

.colorsettings .switch-block h4 {
	font-size: 13px;
	font-weight: 600;
	color: #444;
	line-height: 1.3;
	margin-bottom: 0;
	text-transform: uppercase;
}

.colorsettings .btnSwitch {
	margin-top: 20px;
	margin-bottom: 25px;
}

.colorsettings .btnSwitch button {
	height: 20px;
	width: 20px;
	outline: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	border: 2px solid #eee;
	position: relative;
	transition: all .2s;
}

.colorsettings .btnSwitch button:hover{
	border-color: #0bf;
}

.colorsettings .btnSwitch button.selected{
	border-color: #0bf;
}

.colorsettings .img-pick {
	padding: 4px;
	min-height: 100px;
	border-radius: 5px;
	cursor: pointer;
}

.colorsettings .img-pick img {
	height: 100%;
	height: 100px;
	width: 100%;
	border-radius: 5px;
	border: 2px solid transparent;
}

.colorsettings .img-pick:hover img, .colorsettings .img-pick.active img{
	border-color: #177dff;
}

.btnSwitch button[data-color="black"] {
	background-color: #191919;
}
.btnSwitch button[data-color="gray"] {
	background-color: #4f4f4f;
}
.btnSwitch button[data-color="blue"] {
	background-color: #0066cc;
}
.btnSwitch button[data-color="purple"] {
	background-color: #6055aa;
}
.btnSwitch button[data-color="green"] {
	background-color: #196910;
}
.btnSwitch button[data-color="orange"] {
	background-color: #ffa500;
}
.btnSwitch button[data-color="red"] {
	background-color: #dc2a0d;
}
.btnSwitch button[data-color="brown"] {
	background-color: #8b4513;
}

.btnSwitch button[data-color="bg1"] {
	background-color: #eaeaea;
}
.btnSwitch button[data-color="bg2"] {
	background-color: #dddddd;
}
.btnSwitch button[data-color="bg3"] {
	background-color: #c0c0c0;
}
.btnSwitch button[data-color="bg4"] {
	background-color: #b2b2b2;
}

@media screen and (max-width: 576px){
	.colorsettings .custom-content {
		overflow: auto;
	}
}

@media screen and (max-width: 400px) {
	.colorsettings {
		width: 85% !important;
		right: -85%;
	}
}