.navbar .content-right a i {
	animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.side-nav-switcher {
	width: 235px !important;
	padding: 20px 10px !important;
}

.side-nav-switcher .tabs {
	height: 30px;
	background: transparent;
}

.side-nav-switcher .tabs .tab {
	height: 30px;
	line-height: 27px;
	margin: 0 5px;
	background: #fff;
	border-radius: 5px;
}

.side-nav-switcher .tabs .mode-dark {
	border-radius: 5px;
}

.side-nav-switcher .tabs a {
    background: #fff;
    color: #333 !important;
    width: 100%;
    display: inline-block;
    height: 30px;
    line-height: 27px !important;
    text-align: center;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid #212121;
}

.side-nav-switcher .tabs .mode-dark a {
	background: #212121 !important;
	color: #fff !important;
	border-color: #fff;
}

.side-nav-switcher .tabs .mode-dark a.active {
	border-color: #fff !important;
}

.side-nav-switcher .tabs .indicator {
	display: none;
}

.side-nav-switcher .tabs li:first-child {
	margin-right: 3px;
}

.side-nav-switcher .tabs li:last-child {
	margin-left: 3px;
}

.side-nav-switcher .tabs a:hover {
	background: #fff !important;
}

.side-nav-switcher .tabs .mode-dark a:hover {
	background: #212121 !important;
}

.side-nav-switcher .content-mode .mode-dark a:hover {
	background: #212121 !important;
}

.side-nav-switcher .content-choose a {
    width: 100%;
    height: 30px;
    display: inline-block;
    border-radius: 2px;
}

.side-nav-switcher .content-choose li {
	display: inline-block;
	line-height: 30px;
	margin: 0 2px;
}

.side-nav-switcher li h6 {
	margin-bottom: 10px;
}

.side-nav-switcher .contents-tabs {
	margin-top: 20px;
	padding: 0 10px;
	text-align: center;
}

.bg-blue {
	background: #574cf2;
}

.side-nav-switcher .content-choose li a.bg-blue:hover {
	background: #574cf2;
}


.bg-red {
	background: #ff1744;
}

.side-nav-switcher .content-choose li a.bg-red:hover {
	background: #ff1744;
}


.bg-purple {
	background: #9c27b0;
}

.side-nav-switcher .content-choose li a.bg-purple:hover {
	background: #9c27b0;
}


.bg-green {
	background: #10c58f;
}

.side-nav-switcher .content-choose li a.bg-green:hover {
	background: #10c58f;
}


.bg-orange {
	background: #ff9800;
}

.side-nav-switcher .content-choose li a.bg-orange:hover {
	background: #ff9800;
}


.bg-blue-gradient {
	background: linear-gradient(200deg, #1ad6fd, #574cf2);
}

.side-nav-switcher .content-choose li a.bg-blue-gradient:hover {
	background: linear-gradient(200deg, #1ad6fd, #574cf2);
}


.bg-red-gradient {
	background: linear-gradient(200deg, #ff5e3a, #ff2a68);
}

.side-nav-switcher .content-choose li a.bg-red-gradient:hover {
	background: linear-gradient(200deg, #ff5e3a, #ff2a68);
}


.bg-purple-gradient {
	background: linear-gradient(200deg, #c644fc, #5856d6);
}

.side-nav-switcher .content-choose li a.bg-purple-gradient:hover {
	background: linear-gradient(200deg, #c644fc, #5856d6);
}


.bg-green-gradient {
	background: linear-gradient(200deg, #87fc70, #0bd318);
}

.side-nav-switcher .content-choose li a.bg-green-gradient:hover {
	background: linear-gradient(200deg, #87fc70, #0bd318);
}


.bg-orange-gradient {
	background: linear-gradient(200deg, #ff9500, #ff5e3a);
}

.side-nav-switcher .content-choose li a.bg-orange-gradient:hover {
	background: linear-gradient(200deg, #ff9500, #ff5e3a);
}

.bg-multi-color {
	 background: linear-gradient(450deg, #574cf2  30%, rgba(0,0,0,0) 30%), linear-gradient(90deg, #ff1744 60%, #10c58f 60%);
}

.bg-multi-color-gradient {
	 background: linear-gradient(450deg, #574cf2  20%, rgba(0,0,0,0) 40%), linear-gradient(90deg, #ff1744 50%, #10c58f 90%);
}


/*material color switcher*/
.bg-material-blue {
	background: #574cf2;
}

.bg-material-red {
	background: #ff1744;
}

.bg-material-purple {
	background: #9c27b0;
}

.bg-material-green {
	background: #4caf50;
}

.bg-material-orange {
	background: #ff9800;
}

.bg-material-blue:hover {
	background: #574cf2 !important;
}

.bg-material-red:hover {
	background: #ff1744 !important;
}

.bg-material-purple:hover {
	background: #9c27b0 !important;
}

.bg-material-green:hover {
	background: #4caf50 !important;
}

.bg-material-orange:hover {
	background: #ff9800 !important;
}

/*ios color switcher*/
.bg-ios-blue {
	background: #007aff;
}

.bg-ios-red {
	background: #ff3b30;
}

.bg-ios-purple {
	background: #5856d6;
}

.bg-ios-green {
	background: #4cd964;
}

.bg-ios-orange {
	background: #ff9500;
}

.bg-ios-blue:hover {
	background: #007aff !important;
}

.bg-ios-red:hover {
	background: #ff3b30 !important;
}

.bg-ios-purple:hover {
	background: #5856d6 !important;
}

.bg-ios-green:hover {
	background: #4cd964 !important;
}

.bg-ios-orange:hover {
	background: #ff9500 !important;
}

/*flat color switcher*/
.bg-flat-blue {
	background: #2980b9;
}

.bg-flat-red {
	background: #e74c3c;
}

.bg-flat-purple {
	background: #8e44ad;
}

.bg-flat-green {
	background: #27ae60;
}

.bg-flat-orange {
	background: #f39c12;
}

.bg-flat-blue:hover {
	background: #2980b9 !important;
}

.bg-flat-red:hover {
	background: #e74c3c !important;
}

.bg-flat-purple:hover {
	background: #8e44ad !important;
}

.bg-flat-green:hover {
	background: #27ae60 !important;
}

.bg-flat-orange:hover {
	background: #f39c12 !important;
}

/*classic color switcher*/
.bg-classic-blue {
	background: #b8bda8;
}

.bg-classic-red {
	background: #cbae77;
}

.bg-classic-purple {
	background: #d5cab5;
}

.bg-classic-green {
	background: #cfdedd;
}

.bg-classic-orange {
	background: #d4d0a2;
}

.bg-classic-blue:hover {
	background: #b8bda8 !important;
}

.bg-classic-red:hover {
	background: #cbae77 !important;
}

.bg-classic-purple:hover {
	background: #d5cab5 !important;
}

.bg-classic-green:hover {
	background: #cfdedd !important;
}

.bg-classic-orange:hover {
	background: #d4d0a2 !important;
}