/*
* Vita Style Switcher CSS
* Version: 1.0
* Author: @vitatemplates
*/

/*-- Style Switcher --*/
.style-switcher-heading, .style-switcher-body * {
	direction: ltr !important;
	font-family: 'Open Sans', sans-serif;
	text-align: left !important;
}
i.style-switcher-btn {
	right: 100%;
	top: 100px;
	font-size: 18px;
	cursor: pointer;
	z-index: 555555;
	position: absolute;
	padding: 9px 10px;
	border-radius: 3px 0 0 3px !important;
	width: 36px;
	height: 36px;
	background: #fff;
	-webkit-box-shadow: -2px 3px 8px 0 rgba(132, 132, 132, .3);
	box-shadow: -2px 3px 8px 0 rgba(132, 132, 132, .3);
}
i.style-switcher-btn.fa-times {
	color: #e74c3c;
	text-align: center !important;
}
.style-switcher {
	right: -305px;
	top: 0;
	color: #000;
	width: 305px;
	z-index: 555555;
	position: fixed;
	background: #fff;
	-webkit-box-shadow: -2px 0 8px 0 rgba(132, 132, 132, .3);
	box-shadow: -2px 0 8px 0 rgba(132, 132, 132, .3);
	background-color: #fff;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.style-switcher-open {
	right: 0;
}
.style-switcher .style-switcher-heading {
	color: #000;
	font-size: 15px;
	font-weight: 200;
	margin-bottom: 10px;
	margin-top: 10px;
}
.style-switcher-body hr {
	margin: 10px 0;
	border-color: #ccc;
}
.style-switcher .style-switcher-body {
	padding: 15px 10px 15px 13px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
}
/*-- Theme Colors --*/
.style-switcher li {
	width: 36px;
	height: 36px;
	cursor: pointer;
	background: #c00;
	margin: 0 3px;
	display: inline-block;
	border-radius: 50% !important;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.style-switcher .color-panel li:hover::after, .style-switcher .color-panel li.theme-active::after {
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-size: 32px;
	top: -6px;
	position: relative;
	color: rgba(255,255,255,.3);
	font-weight:900;
}
.style-switcher li.theme-green {
	background: #72c02c;
}
.style-switcher li.theme-blue {
	background: #3498db;
}
.style-switcher li.theme-orange {
	background: #e67e22;
}
.style-switcher li.theme-red {
	background: #e74c3c;
}
.style-switcher li.theme-light {
	background: #95a5a6;
}
.style-switcher li.theme-purple {
	background: #9b6bcc;
}
.style-switcher li.theme-aqua {
	background: #27d7e7;
}
.style-switcher li.theme-brown {
	background: #9c8061;
}
.style-switcher li.theme-dark-blue {
	background: #4765a0;
}
.style-switcher li.theme-light-green {
	background: #79d5b3;
}
.style-switcher li.theme-dark-red {
	background: #a10f2b;
}
.style-switcher li.theme-teal {
	background: #18ba9b;
}
/* -- Theme Font -- */
.style-switcher-body .font-section select {
	width: 100%;
	padding: 5px;
	outline: 0;
	border-radius: 3px;
	margin-bottom: 5px;
	border-width: 1px;
	border-style: solid;
}
/* -- Theme Wide/Boxed -- */
.style-switcher .wide-layout-btn, .style-switcher .boxed-layout-btn {
	display: block;
	border-radius: 3px;
	padding: 2px 0;
	cursor: pointer;
	text-align: center !important;
	border-style: solid;
	color: #fff;
	border-width: 1px;
}
.style-switcher .layout-style span:not(.layout-active) {
	background-color: #fff;
	color: #000;
}
.style-switcher .boxed-background {
	height: 0;
	overflow: hidden;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.style-switcher .boxed-background-open {
	height: 110px !important;
}
/* -- Theme Background -- */
.style-switcher .theme-bg-panel li {
	width: 40px;
	height: 30px;
	cursor: pointer;
	margin: 0px 6px 6px 6px;
	display: inline-block;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	position: relative;
}
.style-switcher .theme-bg-panel li img {
	width: 100%;
	height: 100%;
	border-radius: 3px !important;
	border: 1px solid #ccc;
}
.style-switcher .theme-bg-panel li:hover::after, .style-switcher .theme-bg-panel li.theme-bg-active::after {
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-size: 29px;
	top: -7px;
	position: absolute;
	left: 5px;
	font-weight:900;
}
/* -- Theme Direction -- */
.style-switcher .style-switcher-direction span {
	display: block;
	border-radius: 3px;
	padding: 2px 0;
	cursor: pointer;
	text-align: center !important;
	border-style: solid;
	color: #fff;
	border-width: 1px;
}
.style-switcher .style-switcher-direction span:not(.version-active) {
	background-color: #fff;
	color: #000;
}
/* -- Save Theme -- */
.style-switcher .save-theme {
	margin-top: 15px;
}
.style-switcher .save-theme span {
	display: block;
	border-radius: 3px;
	padding: 2px 0;
	cursor: pointer;
	text-align: center !important;
	border-style: solid;
	color: #fff;
	border-width: 1px;
}
.style-switcher .save-theme span:hover {
	opacity: .8;
}
.style-switcher .save-theme span i {
	font-family: 'Font Awesome 5 Free' !important;
	margin-right: 8px;
}
.style-switcher .save-theme #reset-theme {
	background-color: #e74c3c;
	border-color: #e74c3c;
}
.style-switcher .custom-control {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.style-switcher .custom-control-label {
	position: relative !important;
	font-size: .9rem;
	padding-top: 2px;
}
.style-switcher .custom-control-label::before, .style-switcher .custom-control-label::after {
	right: auto !important;
	left: -1.5rem !important;
}