<style>
	.setting_top ul li{
		position: relative;
	}
	.newTags{
		position: absolute;
		top: 5px;
		color: red;
		transform: rotate(
			45deg
			);
		right: -1px;
		font-size: 10px;
		font-weight: bold;
	}
	/*   settings
================================================== */

.setting_op_icon {
    position: fixed;
    height: 50px;
    width: 50px;
    text-align: center;
    right: 19px;
    top: 50%;
    transform: translateY(-50%);
    background: #29c7ac;
    color: #fff;
    line-height: 49px;
    font-size: 25px;
    z-index: 999999;
}

.setting_op_details {
  position: fixed;
  top: 50%;
  right: 10px;
  min-height: 385px;
  min-width: 300px;
  z-index: 9;
  transform: translateY(-50%);
}
.setting_op_icon a {
  color: #fff;
  display: block;
}
.setting_op_details {
  background: #fff;
  min-height: 200px;
  position: fixed;
  right: -100%;
  top: 50%;
  width: 273px;
  transform: translateY(-50%);
  border: 1px solid #ddd;
  transition: .5s;
  opacity: 0;
  visibility: hidden;
}

element.style {
}
.setting_op_details.active {
    right: 69px;
    transition: .5s;
    opacity: 1;
    visibility: visible;
}

.setting_op_details ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 5px;
}
.setting_op_details ul a {
  border: 1px solid #ddd;
  height: 41px;
  width: 41px;
  display: block;
  text-align: center;
  color: ;
  color: #000;
  line-height: 37px;
  font-size: 22px;
  margin: 2px;
}

.setting_top {
  margin-top: 12px;
  padding: 0 7px;
}
.setting_option h5{
  color: #000!important;
}
.setting_op_details ul.colors_bg  a{
  color: #fff!important;
}
.setting_top ul li.active a {
  border: 2px solid aqua;
}
.bg_c1{
  background: #49bcf7;
}

.bg_c2{
  background: #29c7ac;
}
.bg_c3{
  background: #037fff;
}
.bg_c4{
  background: #00818a;
}
.bg_c5{
  background: #e14594;
}
.bg_c6{
  background: #ea0599;
}
.bg_c7{
  background: #5f85db;
}
.bg_c8{
  background: #a7d129;
}
.bg_c9{
  background: #9a0f98;
}

.bg_style_2{
  background: linear-gradient(to right top, #1ccaee, #00bbff, #00a4ff, #8c7bff, #ea13f4) !important
}
.bg_style_3{
  background: #f3f5fa;!important;
}

.bg_style_4{
  background: linear-gradient(to right top, #191d2b, #1d2131, #202538, #242a3e, #282e45, #2a2e44, #2b2f43, #2d2f42, #2b2c3a, #292831, #26252a, #222222)!important
}

.bg_style_5{
  background: #f2f2f2!important;
}

.bg_style_6{
  background: #29c7ac;
}

.bg_style_7{
  background: #393e46;
}

.bg_style_8{
  background: #707070;
}
</style>
<?php if(isset($page) && $page=="Profile"): ?>
	<div class="setting_option">
			<div class="setting_op_icon">
				<a href="javascript:;" class="settings_cog"><i class="fa fa-cogs"></i></a>
			</div>
			<div class="setting_op_details">
				<?php  $u_info = get_user_info_by_slug($slug); ?>
				<div class="setting_top">
					<h5>Themes</h5>
					<ul>
						<li class="<?= $u_info['layouts']==1?"active":"";?>"><a href="<?= base_url('test/set_setting/1/'.$slug);?>"> 1</a></li>
						<li class="<?= $u_info['layouts']==2?"active":"";?>"><a href="<?= base_url('test/set_setting/2/'.$slug);?>">2</a></li>
						<li class="<?= $u_info['layouts']==3?"active":"";?>"><a href="<?= base_url('test/set_setting/3/'.$slug);?>">3</a></li>
						<li class="<?= $u_info['layouts']==4?"active":"";?>"><a href="<?= base_url('test/set_setting/4/'.$slug);?>">4</a></li>
						<li class="<?= $u_info['layouts']==5?"active":"";?>"><a href="<?= base_url('test/set_setting/5/'.$slug);?>">5</a></li>
						<li class="<?= $u_info['layouts']==6?"active":"";?>"><a href="<?= base_url('test/set_setting/6/'.$slug);?>">6</a></li>
						<li class="<?= $u_info['layouts']==7?"active":"";?>" ><a href="<?= base_url('test/set_setting/7/'.$slug);?>">7</a> <span class="newTags">New</span></li>
					</ul>
				</div>

				<div class="setting_top">
					<h5>Background Color</h5>
					<ul class="colors_bg">
						<li class="<?= $u_info['themes']==0?"active":"";?>"><a href="<?= base_url('test/set_themes/0/'.$slug);?>" class="" style="color:#000!important;"> 1</a></li>
						<li class="<?= $u_info['themes']==1?"active":"";?>"><a href="<?= base_url('test/set_themes/1/'.$slug);?>" class="" style="background: #000;"> 1</a></li>
						<li class="<?= $u_info['themes']==2?"active":"";?>"><a href="<?= base_url('test/set_themes/2/'.$slug);?>" class="bg_style_2" >2</a></li>
						<li class="<?= $u_info['themes']==3?"active":"";?>"><a href="<?= base_url('test/set_themes/3/'.$slug);?>" class="bg_style_3" style="color:#000!important;">3</a></li>
						<li class="<?= $u_info['themes']==4?"active":"";?>"><a href="<?= base_url('test/set_themes/4/'.$slug);?>" class="bg_style_4">4</a></li>
						<li class="<?= $u_info['themes']==5?"active":"";?>"><a href="<?= base_url('test/set_themes/5/'.$slug);?>" class="bg_style_5" style="color:#000!important;">5</a></li>
						<li class="<?= $u_info['themes']==6?"active":"";?>"><a href="<?= base_url('test/set_themes/6/'.$slug);?>" class="bg_style_6">6</a></li>
						<li class="<?= $u_info['themes']==7?"active":"";?>"><a href="<?= base_url('test/set_themes/7/'.$slug);?>" class="bg_style_7">7</a></li>
						<li class="<?= $u_info['themes']==8?"active":"";?>"><a href="<?= base_url('test/set_themes/8/'.$slug);?>" class="bg_style_8">8</a></li>
						
					</ul>
				</div>

				<div class="setting_top">
					<h5>Colors</h5>
					<ul class="colors_bg">
						<li class="<?= $u_info['colors']=="49bcf7"?"active":"";?>"><a href="<?= base_url('test/set_color/49bcf7/'.$slug);?>" class="bg_c1"> 1</a></li>

						<li class="<?= $u_info['colors']=="29c7ac"?"active":"";?>"><a href="<?= base_url('test/set_color/29c7ac/'.$slug);?>" class="bg_c2">2</a></li>

						<li class="<?= $u_info['colors']=="037fff"?"active":"";?>"><a href="<?= base_url('test/set_color/037fff/'.$slug);?>" class="bg_c3">3</a></li>

						<li class="<?= $u_info['colors']=="00818a"?"active":"";?>"><a href="<?= base_url('test/set_color/00818a/'.$slug);?>" class="bg_c4">4</a></li>

						<li class="<?= $u_info['colors']=="e14594"?"active":"";?>"><a href="<?= base_url('test/set_color/e14594/'.$slug);?>" class="bg_c5">5</a></li>

						<li class="<?= $u_info['colors']=="ea0599"?"active":"";?>"><a href="<?= base_url('test/set_color/ea0599/'.$slug);?>" class="bg_c6">6</a></li>

						<li class="<?= $u_info['colors']=="5f85db"?"active":"";?>"><a href="<?= base_url('test/set_color/5f85db/'.$slug);?>" class="bg_c7">7</a></li>
						<li class="<?= $u_info['colors']=="9a0f98"?"active":"";?>"><a href="<?= base_url('test/set_color/9a0f98/'.$slug);?>" class="bg_c9">8</a></li>
					</ul>
				</div>
				<p style="    font-size: 14px; color: red;padding: 5px;">* Layouts & Button can change form user dashboard.</p>
			</div>
		</div>
	<?php endif; ?>

<script>
	$(document).on('click','.settings_cog', function(){
		$('.setting_op_details').toggleClass('active');
	})
</script>