/*
	Author: The Architect Guru
	Location: Livingstone, Zambia
	Project: Caineware X
	Period: January 2015 - February 2016

	#We are offically going for 
	#009393 / rgb(0, 147, 147) a blue and 
	an #f46f00 / (244, 111, 0) Orange Shade
*/

	:root{
		--primary-color: #da0a0a;
		--secondary-color: rgb(4, 4, 4);
		--btn-hover-bg: #f1f2f3;
		--text-color: #565454;
		--dashboard-bg: #ecdcdc;
		--border-color: #f1f1f1;
		--shadow-color: #f1f1f1;
		--dark-bg-color: rgba(0,0,0,.8);
	}

	
	*{
		margin: 0; 
		padding: 0; 
		box-sizing: border-box; 
		color: #565454;
	}

	html, body{
		font-size: 16px;
		min-height: 100vh;
		width: 100%;
	}

	/* Target the main scrollbar */
	::-webkit-scrollbar {
		width: 12px; /* Width of the scrollbar */
	}

	/* Track (the area on which the thumb rests) */
	::-webkit-scrollbar-track {
		background: var(--border-color); /* Color of the track */
	}

	/* Handle (the draggable part of the scrollbar) */
	::-webkit-scrollbar-thumb {
		background: #888; /* Color of the thumb */
		border-radius: 6px; /* Roundness of the thumb */
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #555; /* Color of the thumb on hover */
	}

	/* Target the main scrollbar */
	/* Note: Mozilla Firefox only */
	/* You can use ::-moz-scrollbar for Firefox */
	/* But it's experimental and may not work in all versions */
	* {
		scrollbar-width: thin;
		scrollbar-color: #888 #fff;
	}

	.no-scroll{
		overflow-y: hidden;
	}




	#bread-crumb-wrap{
		/* height: 2em; */
		background: var(--border-color);
	}

	#bread-crumb, #bread-crumb nav, .breadcrumb{
		height: 100%;
	}

	#bread-crumb .breadcrumb{
		margin: 0;
	}
	
	.full-width{
			min-width: 100%;
	}

	.img{
		border-radius: .3em;
		overflow: hidden;
		padding: 0 !important;
	}

	.img img,
	.img .avatar{
		width: 100%;
		height: 100%;
		transition: transform 1s ease-in-out;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.view-error{
		height: 70vh;
	}

	/* Overridden Bootstrap */
	.btn,
	.form-control{
		font-size: 1em !important;
	}

	.btn.btn-light{
		border: none !important;
	}

	.btn-light:hover{
		background-color: var(--border-color) !important;
		border: none !important;
	}

	.form-check-label{
		font-weight: 400 !important;
	}

	/*Dashboard*/
	#dashboard{
		background-color: var(--dashboard-bg);
	}

	/* Style Main Logo and Banner */
	#dashboard #main-site-label{
		margin-bottom: 1em;
	}

	#dashboard #manage-screen{
		padding: 0 !important;
		margin-top: .8rem;
		/* height: calc(100vh - 50px); 
    	overflow-y: auto; */
	}

	#company-logo, 
	#company-name{
		padding: 0;
		height: 100%;
		display: flex;
		justify-content: start;
		align-items: center;
	}

	#company-logo{
		width: 100%;
		justify-content: center;
	}
	
	#company-logo img{
		width: 40px;
		height: 40px;
	}

	#company-name .blue{
		/* color: #009393; */
		font-weight: 600;
	}

	#company-name .orange{
		/* color: #f46f00; */
		font-weight: 400;
	}

	/* Style Main Profile and Menu */

	#dashboard #active-menu{
		height: 50px;
		min-width: 100%;
		/* border: 1px solid #000; */
		justify-content: end;
	}
	
	#active-menu li{
		min-height: 100%;
	}

	#active-menu .btn{
		transition: all .7s ease-in-out;
	}

	#active-menu .btn,
	#active-menu .btn:hover,
	#active-menu .btn:focus{
		outline: 0;
    	box-shadow: none;
	}

	#active-menu .btn.active{
		box-shadow: 0px 0px 9px 3px #f00;
		background-color: #fff;
	}

	#active-menu .btn.active i{
		color: #000 !important;
	}

	#dashboard-links{
		min-width: 100%;
	}

	#dashboard-links ul{
		min-width: inherit;
		list-style: none;
	}


	#dashboard-links > ul > li{
		justify-content: flex-start;
	}

	#dashboard-links > ul li a{
		margin: 1em 0;
		border-radius: .3em;
		background-color: white;
		border: 1px solid var(--border-color);
		min-width: 100%;
	}
	
	#dashboard-links .title{
		border-bottom: 1px solid var(--border-color);
	}
	
	#dashboard-links .title > i {
		margin-right: .3em;
	}
	
	.dashboard-link .count{
		font-weight: 600;
		margin-right: .3em;
	}
	.dashboard-link:hover{
		border: none;
		box-shadow: 1px 2px 5px rgba(0, 0, 0, .05);
	}

	.dashboard-link ul {
		min-width: inherit;
		list-style: none;
	}
	
	.dashboard-link ul li {
		display: flex;
		justify-content: flex-start;
		padding: .3em;
	}

	.view-profile,
	.view-profile:hover{
		text-decoration: none;
		border: none;
	}

	/* Options Buttons */
	.btn-wrap{
		padding: 0;
		display: flex;
		justify-content: end;
		align-items: center;
	}

	.btn-options{
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 0 !important;
		width: 30px !important;
		height: 30px !important;
		transition: background-color .3s ease-in-out;
		border-radius: 50% !important;
		background-color: #f3f3f3 !important;
		border: none;
	}

	.btn-options i{
		margin: 0;
		color: #000 !important;
		font-size: 1rem !important;
	}

	.btn-options:hover{
		background-color: var(--border-color) !important;
	}

	.btn-block{
		min-width: 100%;
	}
	
	
	/*FORM SPECIFIC STYLES*/
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus { 
		border-color: var(--border-color); 
		box-shadow: none; 
		outline: none;
	}
	
	input[type="button"] {
		font-weight: 400;
	}
	
	
	.btn .btn-detail {
		position:absolute; 
		top: 2.5rem; 
		font-size: .7rem; 
		display: none; 
		min-width: 120px; 
		width:auto; 
		background: rgba(0,0,0,1); 
		color: #fff; 
		padding: 0; 
		text-align: center; 
		border-radius: 0; 
		margin: 0; 
		opacity: .8; 
		transition: 0.6s opacity ease-in-out;
	}
	
	.btn .btn-detail a{
		display: block; 
		width: 100%; 
		cursor: pointer; 
		background-color: var(--bg-color); 
		color: #fff; 
		border: none; 
		border-radius: 0; 
		margin: .1em 0; 
		font-size: .8rem; 
		padding: 1em;
	}
	
	.btn .btn-detail a:hover{
		background-color: #fff;
	}
	
	.btn:link,
	.btn:visited,
	.btn:hover,
	.btn:active{
		text-decoration: none; 
	}
	
	.btn .btn-detail:before{
		content:''; 
		width: 10px; 
		height: 10px; 
		position: absolute; 
		top: -5px; 
		background: #000; 
		z-index: -1; 
		left: 10%; 
		transform: translateX(-50%) rotate(45deg);
	}

	button i{
		color: inherit;
		font-size: 1.2em;
    	line-height: 1;
	}

	.delete{
		background-color: red;
	}

	fieldset{ 
		color: #333; 
		border: 1px solid var(--border-color); 
		padding: 10px; 
		margin: 5px;
	}
	
	legend{ 
		box-shadow: 1px 1px 5px #888; 
		padding: 5px; 
		margin: 2px; 
		color: #009393; 
		font-size: 1rem; 
		font-weight: 500;
	}
	
	select { 
		border: solid 1px var(--border-color);
	}
	
	option {
		padding: 5px; 
		border: solid 1px var(--border-color);
	}
	
	option:hover{ 
		/* background-color: #009393;  */
		padding-left: 3px;
	}
	
	a:link{
		outline: none;
		color: blue;
		text-decoration: none;
	}

	a:visited{
		color: blue;
	}

	a:hover{
		color: blue;
		border-bottom: 1px solid blue;
	}

	a:focus{
		color: purple;
	}

	a:active{
		color: red;
	}

	video {
		display: block; 
		height: 100%; 
		width: 100%;
	}
    
	audio {
		width: 100%;
	}

	.table td {
		border: none !important;
	}

	.table tr {
		border-top: 1px solid var(--border-color);
	}

	.card{
		width: 100%;
		padding: 1em;
		margin-bottom: 1.5rem;
	}

	.card-shadow{
		/* box-shadow: 0 0 0px 4px #00000008; */
		background-color: #f9f9f975 !important;
		border: 1px solid var(--border-color);
	}
	
	
	/*Admin Dashboard*/
	#admin-dashboard{
		display: flex !important;
	}

	#admin-dashboard table{
		min-width: 100%;
	}

	#admin-menu{

		font-size: 1rem;

	}

	#admin-menu a:link{
		
		padding: .3em;
		display: flex;
		justify-content: left;
		align-items: center;
		color: rgba(0,0,0,.8);
		margin: .3em;
		height: 3em;
		background-color: rgba(0,0,0,.1);
		/* transition: border-bottom 0.3s ease; */
	
	}

	#admin-menu a:visited{
		color: rgba(0,0,0,.8);
		border: 1px solid aliceblue;	
	}

	#admin-menu a.active{
		color: #fff;
		background: #009393;
	}

	#admin-menu a:hover{
		text-decoration: none;
		border-bottom: 3px solid #009393;
		/* height: calc(3em - 3px); */
	}

	/*Global Classes*/
	
	.header-offset{
		margin-top: 1em;
	}

	.white{
		color: #fff;
	}

	.white > i{
		color: #fff;
	}	

	.border-radius{
		border-radius: .3em;
	}

	/*Trends*/
	.trend-tab{
		border: 1px solid var(--border-color);
		box-shadow: 5px 2px 3px #000;
		padding: .3em;
		border-radius: .3em;
	}


	/*Form Styling*/
	.form {
		background-color: #fff; 
		font-size: .8rem; 
		width: 100%;
	}
	
	.form header {
		background-color: #f9f9f9;
	}
	
	.form-group > label{
		display: inline-flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center; 
		position: relative; 
		font-weight: 500;
	}

	.form-group label i{
		display: none;  
		font-size: 1.2em; 
		color: rgba(0,0,0,.65); 
		margin-left: .5em;
		cursor: help;
	}

	.form-group label .show{
		display: inline-block;  
	}

	.form-group label > .form-hint{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
		position: absolute;
		top: 2em;
		left: 1em;
		z-index: 3;
		border: 1px solid var(--border-color);
		border-radius: .3em;
		padding: .3em;
		width: 12rem;
		background-color: var(--bg-color);
		line-height: 2;
	}

	.form-group label > .show {
		display: flex;
	}

	.form-group label > .hide {
		display: none;
	}

	span > label{
		display: inline-flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center; 
		font-size: .9em;
		font-weight: 400;
		margin-bottom: 0;
	}

	.hint{
	    padding: .3em;
	    border: 1px solid var(--border-color);
	    color: #fff;
	    position: absolute;
	    background: var(--bg-color);
	    border-radius: .3em;
	}

	.form-group .hint{
		top: 3em;
	}

	.form-hint > .title{
		font-size: 1em;
		font-weight: 600;
		color: #fff;
	}

	.form-hint > .body{
		font-size: .8em;
		font-weight: 400;
		color: #fff;
	}

	.form-group .prime-label{
		position: absolute;
		padding: .3em .5em;
		background-color: #fff;
		left: 1em;
		top: .4em;

	}
	
	.form-group .form-control{
		border-radius: .3em;
	}	
		
	.form-group .form-text{
		display: inline-block; 
		font-size: .6rem; 
		padding: .1em .6em;
	} 
		
	.form-group .form-control:focus, 
	.form-group .form-control:active {
		box-shadow: none; 
		outline: 0; 
		background-color: #fff;
		/* border: 1px solid #009393;  */
		outline-width: 0;
	}
	
	.form-group .form-control:active + .form-group i{
		color: #f00;
	}

	.btn-default{
		border: 1px solid var(--border-color);
		background-color: var(--bg-color);
		padding: .9em .3em;
	}

	.form-buttons .btn-default{
		padding: .9em .3em;
	}

	.form-buttons .btn-primary{
		background-color: #009393;
		color: #fff;
		font-size: 1em;
		font-weight: 600;
		border: none;
		line-height: 2;
	}

	#div-new .form-buttons{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}
	
	#div-new .form-buttons > .close{
		width: 60%;
		padding: .3em;
		font-weight: 400;
	}
	
	.form-buttons .btn-primary:disabled{
		background-color: rgba(0,0,0,.7);
	}

	.form-buttons .btn-primary > i{
		color: #fff;
	}

	.ellipsis-wrap{
		padding: 0 .3em;
		position: relative;
	}

	.ellipsis-wrap .menu-btn {
		cursor: pointer;
	}

	.ellipsis-wrap > .show {
		display: block;
	}

	.ellipsis-wrap > .hide {
		display: none;
	}

	.ellipsis-menu{
		display: none;
		position: absolute;
		right: 0;
	    border: 1px solid var(--border-color);
	    background-color: var(--bg-color);
	    cursor: pointer;
	    overflow: hidden;
	    width: auto;
	    z-index: 99;
	}

	.ellipsis-menu span{
		display: block;
		width: 100%;
		white-space: nowrap;
		padding: .3em .5em;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}
	
	.ellipsis-menu span:hover{
		color: #fff;
		background-color: #ff8f00;
		text-decoration: none;
	}

	.ellipsis-menu span > i{
		color: #fff;
		margin-right: .3em;
	}

	.space-between{
		justify-content: space-between;
	}

	.form-extra{
		margin: 1em 0;
	}

	.top-down-margin{
		margin: 1em 0;
	}

	.top-down-padding{
		padding: 1em 0;
	}

	.padding{
		padding: .3em;
	}

	.bold{
		font-weight: 500;
	}

	.center{
		justify-content: center;
		align-items: center;
	}

	.btn-delete{
		background: transparent;
		border: 1px solid #da0a0a;
		color: #da0a0a;
		transition: all 1s ease-in-out;
	}

	.btn-delete:hover{
		background-color: #da0a0a;
		color: #fff !important;
	}
	
	.left-btn{
		border-left: 3px solid #009393;
	}

	.left-btn:hover{
		background-color: rgba(0,0,0,.3);
	}
	
	.text-muted{ 
		color: #f00;
	}
	
	.radio-checkbox-label{
		display: inline-block;
		padding-bottom: 1em; 
		margin-right: 1em; 
		line-height: .8; 
		height: 2em;
		box-sizing: border-box; 
		top: -.25em; 
		position: relative;
	}
	
	.textbox{ 
		padding-left: 2.5em;
	}
	
	/* .select-location{
		font-size: .8rem;
		display: inline-block; 
		height: 2em !important; 
		font-size: .8em;
		line-height: 1;
		padding: .3em;
		border: 1px solid #aaa;
		-moz-appearance: none; 
		-webkit-appearance: none; 
		appearance: none;
		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); 
		background-repeat: no-repeat, repeat; 
		background-position: right .7em top 50%, 0 0; 
		background-size: .65em auto, 100%;
	} */

	/* .select-location { 
		width: 30%; 
		max-width: 33%; 
		margin: 0.3em 0.1em; 
	} */

	select:active,
	select:focus{
		outline: none !important;
		box-shadow: 0 0 1px 1px #e9e9e9 !important;
	}

	option{
		padding: .1em;
	}
	
	.select-css::-ms-expand { 
		display: none;
	}
	
	.select-css:hover {	
		border-color: var(--border-color);
	}
	
	.select-css option {
		padding: 1em .1em;	
		height: 1em; 
		font-weight: normal;
	}
	
	
	/*Forms Styling*/
	.fieldset1{
		width: 600px; 
		float: left; 
		margin: 10px; 
		display: block; 
		overflow: hidden;
	}/*All fieldsets in manage*/
	
	.fieldset-help1{
		width: 500px; 
		float: left; 
		margin: 20px; 
		font-size: 1.2rem; 
		color: #535354;
	}
	
	.fieldset-help1 ul{
		text-indent: 20px; 
		list-style: none;
	}
	
	.input-text, 
	.input-select, 
	.input-textarea, 
	.input-file {
		width: 500px; 
		font-size: 1.15rem; 
		height: 40px;
	}
	
	.input-textarea {
		height: 100px;
	}
	
	.input-file {
		height: 50px; 
		display: inline-block; 
		overflow: hidden;
	}
	
	.input-text-short, 
	.input-select-short, 
	.input-textarea-short {
		width: 300px; 
		font-size: 1.15rem; 
		height:40px;
	}
	
	.input-select-shorter{
		width: 98px; 
		font-size: 1.15rem; 
		height:40px;
	}
	
	.input-radio-short{ 
		height: 20px; 
		vertical-align: -4px; 
		line-height: 25px; 
		width: 20px; 
		padding: 5px; 
		margin: 2px 10px;
	}
	
	.input-text{
		height:40px;
	}
	
	.manage-form-tips{
		width: 400px; 
		padding: 10px; 
		line-height: 1; 
		margin: 22px auto; 
		border-radius: 10px; 
		background-color: #fff; 
		box-shadow: 1px 2px 3px #000; 
		opacity: .7;
	}
		
	.radio-label{
		font-size: 1.15rem; 
		padding: 2px 10px;
	}
	
	.input-label{
		font-size: 1.2rem; 
		font-weight: 500; 
		color: #333; 
		margin: 10px 0;
	}
	
	.short-menu-image{
		height: 40px; 
		width: 40px; 
		float: left; 
		position: absolute; 
		top: 5px; 
		right: 20px;
		display: none;
	}/*Check this element*/
	
	.short-menu-image img{
		height: 100%; 
		width: 100%;
	}/*Check this element*/
	
	.deactivation-code{
		background: #f00; 
		padding: 5px; 
		color: #fff; 
		text-align: center; 
		font-weight: 500; 
		font-size: 2rem; 
		overflow:hidden; 
		display:block; 
		height: 50px; 
		line-height: 50px; 
		width:300px; 
		margin: 0 auto;
	}
	
	.send-message-button{
		margin-left:11px; 
		width:200px;
	}
	
	
	.clear{
		clear:both;
	}
	
	.center{
		position: absolute; 
		top: 0; 
		right: 0; 
		bottom: 0; 
		left: 0; 
		margin: auto; 
		overflow: auto;
	}
	
	.black-overlay-screen {
		background-color: rgba(0,0,0,.7); 
		position: absolute; 
		top: 0; 
		bottom: 0; 
		right: 0; 
		left: 0;
	}
	
	.tip-link{
		margin-left: 5px; 
		color: #009393; 
		text-decoration: none;
	}
	
	.tip-link:hover{
		text-decoration: underline;
	}
	
	.required {
		display: inline-block; 
		color: #f00; 
		font-size: 1.2rem; 
		font-weight: 500; 
		margin: 2px;
	}
	
	
	.item-tab .form{
		padding: .1em;
	}

	.clickable{
		cursor: pointer;
	}

	#service-list{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
		padding: 1em;
	}

	#service-list > .service{
		display: flex;
	    flex-flow: row nowrap;
	    justify-content: space-between;
	    align-items: center;
	}
	
	#service-list > .service > .form-group{
		width: 90%;
	}

	#service-list > .service > .form-buttons{
		width: 10%;
	}

	#div-services .list{
		margin: 0 0 1em 0 !important;
		border-bottom: 1px solid var(--border-color);
	}

	#div-services .list:last-child{
		border: none !important;
	}

	.service-rate{
		color: #a0a0a0;
	}

	.service-rate .amount{
		color: #000;
		font-weight: 500;
	}

	.service-rate-info,
	.service-rate{
		font-size: .8rem;
	}

	/*Form Validation & Processing Feedback*/
	#silent-alert{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		bottom: 1em;
		left: .3em;
		background: rgba(0,0,0,.8);
		padding: 1em;
		border-radius: .3em;
		color: #fff;
		box-shadow: 3px 3px 3px var(--bg-color);
		border: 1px solid var(--border-color);
	}

	#silent-alert i{
		margin-right: .3em;
		font-size: 1.2em;
		position: relative;
		top: -.05em;
		color: #fff;
	}

	.alert{
	    border-radius: 0;
		margin: .5em auto 1em;
		padding: .5em;
		box-shadow: 0 8px 16px 0px rgb(10 14 29 / 4%), 0px 8px 64px 0px rgb(10 14 29 / 8%);
		overflow: hidden;
		font-size: 1em;
		width: 100%;
		background-color: #fff !important;
		color: var(--text-color);
		border-radius: .3em;
	}

	.success{
		border: 1px solid #259425;
		border-left: .3em solid #259425;
		/* color: #259425; */
	}

	.promo{
		border: 1px solid #ed6953;
		border-left: .3em solid #ed6953;
		/* color: #ed6953; */
	}

	.info{
		border: 1px solid #6c7074;
		border-left: .3em solid #6c7074;
		/* color: #6c7074; */
	}

	.warning{
		border: 1px solid #fca426;
		border-left: .3em solid #fca426;
		/* color: #fca426; */
	}

	.error{
		border: 1px solid #c01323;
		border-left: .3em solid #c01323;
		/* color: #c01323; */
	}

	.is-invalid{
		border: 1px solid #c01323 !important;
	}

	.is-invalid-bg{
		background-color: #c01323;
	}

	.invalid-feedback{
		color: #c01323 !important;
	}

	.valid-feedback{
		color: #259425 !important;
	}

	
/*Backgrounds*/

	#backdrop{
		background-color: rgba(0,0,0,.65); 
		z-index: 900;
		position: fixed; 
		top: 0; 
		left: 0; 
		right: 0; 
		bottom: 0; 
	}

	#backdrop.show{
		display: flex;
	}
	
	#modal{
		position: relative;
		font-size: 1rem;
		z-index: 995;
		background: #fff;
		overflow-y: auto;
	}


	#modal main {
		background-color: #fdfdfd;
		height: auto;
		/* max-height: 100vh; /*From 70vh*/
        /* overflow-y: auto;
        overflow-x: hidden; */ 
        scrollbar-width: thin;
		transition: all 1s ease-in-out;
	}

	#modal .detail{
		/* padding: 0 1em; */
		font-size: .8em;
	}

	#modal .stars i{
		font-size: 3em;
	}

	header .title{
		font-size: 1.2em;
		font-weight: 500;
	}

	header .buttons{
		display: flex;
		justify-content: end;
		align-items: center;
	}

	header .buttons > button{
		/* display: flex;
		justify-content: end;
		align-items: center; */
		margin: 0 !important;
	}

	header .buttons > button .icon{
		display: none;
	}

	header .title,
	header .buttons{
		margin: 0 !important;
		padding: 0 !important;
	}

	.header-count{
		position: relative;
		top: -.1em;
		font-size: .8em;
		color: rgba(0,0,0,.3);
		margin-left: .3em;
	}

	#modal header .close-btn{
		cursor: pointer;
     	padding: .3em;
     	font-size: .8em; 
	    font-weight: 600;
	    line-height: 1;
	    color: #000;
	    text-shadow: 0 1px 0 #fff;
	    opacity: .5;
	    position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		height: 3em;
	    width: 3em;
	    display: flex;
	    justify-content: center;
	    align-items: center;
		background-color: transparent;
		transition: background-color 1s ease-in-out;
	}

	#modal header .close-btn i{
		margin: 0;
	}

	#modal header .close-btn:hover {
		background-color: #dfdfdf;
	}

	#modal .login-form{
		width: 100%;
	}
	
	#modal .tab{
		display: flex;
		flex-flow: row nowrap;
		border-radius: .3em;
		overflow: hidden;
		margin: .3em;
	}

	#modal .img-wrap,
	#modal .banner-wrap{
	    border: 1px solid var(--border-color);
	    text-align: center;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    overflow: hidden;
	}

	#modal .img-wrap img,
	#modal .banner-wrap img{
		width: 100%;
	}

	#modal .img-wrap{
		border-radius: 50%;
	    width: 5em;
	    height: 5em;
	    padding: .3em;
	}

	#modal .banner-wrap{
		width: 100%;
	    height: 12em;
	    border-radius: .3em; 
	}

	
	#modal header{
		position: relative; 
		overflow: hidden; 
		text-align: center;
		height: 3rem;
		background-color: #f2f2f2;
	}
	
	#modal header .title{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: .3em;
		margin: 0;
		width: 100%;
		font-size: 1.2rem;
		height: 100%;
		font-weight: 600;
	}

	#modal header .caption{
		padding: .3em;
		margin: 0;
	}
	
		
	#modal .body i{
		margin-right: 1em;
	}
	
	#modal .body textarea{
		border: none;
	}

	#modal .body p{
		font-size: .85em;
		margin: 0 1em;
	}
	
	#modal .img{
		display: flex;
        flex-flow: column nowrap;
    	justify-content: center;
    	align-items: center;
    	overflow: hidden;
		flex-shrink: 0;
		margin-right: .3em;
	}

	#modal .img i{
		color: rgba(0,0,0,.3);
		font-size: 3em;
	}

	#modal .img-wrap{
		width: 5em;
		height: 5em;
	}

	#modal .img-wrap img{
		width: 100%;
		height: 100%;
	}
	
	#modal .body{
		position: relative;
		width: 100%;
		display: flex;
		flex-flow: column nowrap;
	}

	#modal .body > .title,
	#modal .body > div{
		padding: .3em 0;
	}

	#modal .body > .posted-on{
		font-size: .8em;
		line-height: 1;
	}

	#modal .body > .detail{
		font-size: .9em;
	}

	#modal .body > .title{
		/*padding: 0 .3em;*/
		font-size: 1em;
	}

	#modal .body > .sub-title{
		padding: .3em 1em;
		font-size: 1em;
	}

	#modal .body .flex-forms{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}

	#modal .body .flex-forms .form-group{
		width: 80%;
		margin-bottom: 0;
	}

	#modal .body .flex-forms .form-buttons{
		font-size: .65em;
		margin-bottom: 0;
	}
	
	#modal .form-buttons{
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		padding: .3em 0 0;
    	margin-top: 1.5em;
	}

	#modal .form-buttons > input{
		font-size: .8em;
	}

	#modal form{
		padding: 1em;
	}

	form > .row{
		margin: 0;
		padding: 0;
		margin-bottom: 1rem !important;
	}

	form .buttons{
		display: flex;
	}

	#modal .gallery-wrap{
	    display: flex;
	    flex-flow: row wrap;
	    justify-content: flex-start;
	    align-items: center;
	}	

	#modal .gallery-wrap form{
		position: relative;
		margin: 0;
		padding: 0;
	}

	#modal .gallery-wrap form .media-hook{
		width: 1em;
	}

	#modal .gallery-wrap .tab{
		position: relative;
		width: 5em;
		height: 5em;
		margin: .3em;
		overflow: hidden;
		border-radius: .3em;
		border: 1px solid var(--border-color);
	}

	/* Login Page */
	#login-page{
		/* background: linear-gradient(45deg, #da0a0a, transparent); */
		background: #da0a0a;
		min-height: 100vh;
		height: 100%;
	}

	#login-page #login-form{
		padding: 1em;
    	border-radius: 1em;
		background-color: #fff;
	}

	#login-page #login-form .logo img{
		height: 100px;
		width: 100px;
	}

	/* Register Page */
	#register-page{
		background: linear-gradient(45deg, #da0a0a, transparent);
		min-height: 100vh;
		height: 100%;
	}

	#register-page #register-form{
		padding: 1em;
    	border-radius: 1em;
		background-color: #fff;
	}

	.gallery-wrap .tab img{
		width: 100%;
		height: 100%;
	}

	.gallery-wrap .tab input{
		position: absolute;
		top: .3em;
		left: .3em;
	}


	#modal .body .recipient{
		padding: 0 .7em;
	}
	
	#modal .caption{
		font-size: 1em;
		margin: .3em 0;
		text-align: center;
		font-weight: 400;
	}
	
	/*Drawers*/
	#drawer{
		display: block;
		overflow-y: scroll;
		z-index: 99999;
		background-color: #fff;
		height: 100%;
		width: 100%;
		padding: 1rem;
	}

	#drawer #login-form,
	#drawer #recovery-form,
	#drawer #reset-form{
		width: 100%;
		/* padding: 1em; */
	}

	#drawer .logo{
		height: 150px;
		width: 150px;
		margin: auto;
	}

	#drawer label{
		font-weight: 600;
	}

	#login-form button{
		line-height: 1.5;
		padding: 1em;
	}

	#login-form button[type=submit]{
		color: #fff;
	}

	#login-form .title{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: .5em;
	}


	.forgot-password{
		font-size: smaller;
	}

	#drawer #register-form{
		width: 100%;
		padding: 1em;
	}
	
	.chatboard{
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		font-size: .8em;
		width: 20em;
		min-height: 30em;
		max-height: 30em;
		bottom: 1em;
		right: 3em;
		padding: .3em;
		border: 1px solid var(--border-color);
		box-shadow: -1px 1px 3px var(--shadow-color);
		border-radius: .3em;
		margin: 0 1em;
		background: rgba(0,0,0,.8);
	}
	.chatboard *{
		color: #fff !important;
	}

	.chatboard textarea{
		color: #47403a !important;
	}

	.chatboard > div{
		width: 100%;
	}

	
	.chatboard .form-group,
	.chatboard .form-buttons,
	.chatboard .btn-primary{
		margin: 0;
	}

	
	.chatboard header{
		position: relative; 
		border-bottom: 1px solid var(--border-color); 
		overflow: hidden; 
		text-align: center;
	}
	
	.chatboard > header > .title{
		padding: .3em;
		margin: 0;
	}

	.chatboard > header > .caption{
		padding: .3em;
		margin: 0;
	}
	
	.chatboard #main{
		overflow-y: scroll;
	}

	/**/
	.three-columns{
		display: flex;
	    flex-flow: row nowrap;
	    justify-content: space-between;
	    align-items: flex-start;
	    margin: 1em 0;
	}

	.three-columns > div{
		border: 1px solid var(--border-color);
		padding: .3em 1em;
	}

	.three-columns > #shortcuts{
		width: 25%;
	}

	.three-columns > #main{
		width: 40%;
		padding: 0;
	}

	.three-columns > #main > .form-wrap{
		border-bottom: 1px solid var(--border-color);
		padding: .3em;
	}

	.three-columns > #ads{
		width: 30%;
	}

	/*Style Homepage Slider Area*/
	.register-header{
		font-size: 1rem;
		height: 100vh;
	}

	.search{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		position: relative;
		align-items: center;
		font-size: .6rem;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	.more-btn{
		font-size: .8em;
		font-weight: 600;
	}

	.more-btn i{
		display: inline-block;
		font-size: 1em;
		margin-left: .3em;
	}
	
	.xmarket-header{
		background: url("../uploads/cover_img/cup-of-coffee.jpg") no-repeat center center fixed;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.xproperty-header{
		background: url("../uploads/cover_img/cup-of-coffee.jpg") no-repeat center center fixed;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.xmanager-header{
		background: url("../uploads/cover_img/cup-of-coffee.jpg") no-repeat center center fixed;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.xregister-header{
		background: url("../uploads/cover_img/cup-of-coffee.jpg") no-repeat center center fixed;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	/*MAIN CONTAINER SECTIONS*/	

	#header-wrap{
		font-size: 1rem;
		z-index: 999; 
		min-width:360px; 
		width: 100vw;
	}
	

	#header-wrap header{
		
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: .3em;
		margin: 0 auto; 
		z-index: 999; 
		position: fixed; 
		left: 0; 
		right: 0; 
		min-height: 3rem;
		max-height: 3rem; 
	}

	.search-wrap,
	.search-wrap-mini{
		font-size: .8rem;
		height: 50px;
		/* padding: .3em 0; */
	}

	.search-wrap .auto-suggest-box{
		top: 2rem;
	}

	.search-wrap-mini .auto-suggest-box{
		top: 2.5rem;
	}

	.search-wrap{
		background: var(--dark-bg-color);
	}

	.search-wrap-mini{
		margin-top: 3rem !important;
	}

	.search-wrap-mini .search-box{
		border: 1px solid var(--border-color);
		height: 50px;
	}

	#search-wrap.hide{
		min-height: 0;
		height: 0;
		overflow: hidden;
		display: none;
	}


	.search-wrap #company-name *{
		color: #fff;
	}

	.search-wrap #company-name > *{
		width: -moz-fit-content;
		width: fit-content;
	}
	

	.search-wrap header,
	.search-wrap header > .row,
	#main-site-label,
	#main-site-buttons{
		height: 100%;
	}

	.search-wrap button{
		display: flex;
    	justify-content: center;
    	align-items: center;
	}

	.search-wrap .login-register button{
		background: transparent;
		color: #fff;
		border-radius: 1em;
	}

	.search-wrap .login-register #login-btn{
		background: transparent;
		color: #fff;
	}
	.search-wrap .login-register #login-btn:hover,
	.search-wrap .login-register #login-btn:focus,
	.search-wrap .login-register #register-btn:hover,
	.search-wrap .login-register #register-btn:focus{
		border: none;
		color: inherit;
		outline: none !important;
	}

	.search-wrap .login-register #login-btn:hover,
	.search-wrap .login-register #login-btn:focus{
		background: rgba(255,255,255, 1);
	}

	.search-wrap .login-register #register-btn:hover,
	.search-wrap .login-register #register-btn:focus{
		background: rgb(45 57 221);
    	color: #fff !important;
	}

	.get-started-btn{
		transition: all .3s ease-in-out;
		font-size: .9rem !important;
		border: 0 !important;
	}

	.get-started-btn:hover{
		padding-left: 3em !important;
		padding-right: 3em !important;
	}

	#main-site-label{
		min-width: 100%;
    	max-height: 50px;
		padding: .5em 0;
	}
	
	#main-site-label a{
		min-height: 100%;
		min-width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.2em; 
		font-weight: 500; 
		line-height: 1.7; 
		color: #fff; 
		cursor: pointer;
	}

	#main-site-label a:hover{
		text-decoration: none;
		border: none;
	}
	
	#main-site-tagline{ 
		font-size: 1.5em; 
		float: right; 
		margin: -.5em 0 0 .5em; 
		display: block; 
		font-weight: 500;
	}
	
	#home-slider span{
		display: inline-block;
		position: relative;
		padding: 1em 0 4em;
		color: #fff;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
		background-color: rgba(0,0,0,.3);
		height: auto;
		text-transform: uppercase;
		text-align: center;
	}
	
	#home-slider span h1{
		color: #fff;
		font-size: 3rem;
		font-weight: 600;
	}
	
	#home-slider span a{
		display: inline-block;
		color: #fff;
		font-size: 1rem;
		padding: .3em 1em;
		text-decoration: none;
		border-radius: .1em;
		margin: 0 .3em;
		transition: background-color .5s ease-in-out;
	}
	
	#home-slider span #load-search-btn:hover{
		background-color: #006565;
	}
	
	#home-slider span #load-register-btn:hover{
		background-color: #A94D00;
	}
	
	#home-slider span i{
		margin-right: .3em;
		font-size: 1.1rem;
	}
	
	#home-services{
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 5em;
	}

	#home-services > div{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		width: 80%;
		margin: 0 auto;
	}
	
	#home-services span{
		background-color: #fff;
		font-size: .8rem;
		border-radius: .3em;
		padding: 1em;
		margin: 1em .3em;
		text-align: center;
		width: 20%;
		border: 1px solid var(--border-color);
		transition: all .5s ease-in-out;
	}
	
	#home-services span:hover{
		color: #fff;
		background-color: #f46f00;
		transform: scale(1.1);
	}
	
	#home-services span:hover > h5{
		color: #fff;
	}
	
	#home-contacts{
		margin: 0 auto;
		position: relative;
		background-color: var(--bg-color);
		top: -6.2em;
		color: #fff;
		padding: 1em;
		text-align: center;
		width: 40%;
		text-transform: uppercase;
		border: 1px solid var(--border-color);
	}
	
	#home-contacts > div{
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
	}
	
	#home-contacts span{
		margin: 0 1em;
		text-align: center;
		text-transform: uppercase;
	}
	
	#home-contacts span h5{
		color: #fff;
	}
	
	#home-contacts span i{
		font-size: 2rem;
		color: #5905fb;
	}

	/* Start Hero Animation */
	.hero-section {
		position: relative;
		width: 110%;
		height: 82%;
		overflow: hidden;
	}
	
	.pulsating-circle-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 310px; /* Adjust the container size as needed */
		height: 310px; /* Adjust the container size as needed */
	}
	
	.pulsating-circle {
		position: absolute;
		border-radius: 50%;
		background-color: #da0a0a;
		animation: pulse 2s infinite alternate;
	}
	
	.primary {
		width: 100%;
		height: 100%;
		top: 0;
	}
	
	.secondary {
		width: 80%;
		height: 80%;
		animation-delay: 1s;
		left: -10%;
	}
	
	.tertiary {
		width: 60%;
		height: 60%;
		animation-delay: 2s;
		right: -10%;
	}
	
	.image-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 320px; /* Adjust the image container size as needed */
		height: 320px; /* Adjust the image container size as needed */
		overflow: hidden;
		border-radius: 50%;
		background-color: #fff;
	}

	.image-container .img{
		margin: 3em;
	}
	
	
	
	@keyframes pulse {
		to {
			transform: scale(1.2);
			opacity: 0.3;
		}
	}
	/* End Hero Animation */
	
	#div-main-area {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	#no-js{
		display: none;
		margin: 5px auto;
	    width: 500px;
	    border: 3px solid red;
	    padding: 1em;
	    border-radius: 1em;
	    background-color: rgba(0,0,0,.03);
	}

	#results-container{
		display: none;
		flex-flow: column wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		font-size: 1rem;
	}

	#results-container.show{
		display: flex;
	}

	.feature-wrap{
		margin-top: .3em;
    	border: none !important;
	}
	
	.feature-pill{
		text-align:center;
		/* border: 1px solid var(--border-color) */
		border-radius: 1rem;
		padding: .3em .5em;
		margin: 0 .3em .3em 0;
		min-width: -moz-fit-content !important;
		min-width: -webkit-fill-available !important;
		width: -moz-fit-content !important;
		min-width: fit-content !important;
		width: fit-content !important;
		font-size: .85rem;
    	background: linear-gradient(45deg, #aec3fb69, #dfceff36);
	}
	
	/*MAIN MENU STYLES*/
	
	#active-menu{
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin: 0;
		font-size: .8em;
		line-height: 1.5;
		height: 100%;
	}
	
	#notification-bell{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		padding: .3em;
		margin: 0 .3em;
	}

	#notification-bell i{
		font-size: 1.3em;
		color: #fff;
	}

	#notification-bell .active{
		color: #ff8f00;
	}

	
	#notification-counter{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		color: #f00;
		padding: 5px;
		border-radius: 50%;
		height: 1.5em;
		width: auto;
		font-weight: 600;
		top: -.3em;
		right: -.5em;
		font-size: 1em;
	}

/* Main Site Menu	*/
	
	#menu-btn{
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		height: 100%;
	}

	#menu-btn button,
	#user-accounts button{
		outline: none;
		border: none;
		background: transparent;
		color: #fff;
		transition: all 1s ease-in-out;
	}

	#menu-btn button:hover,
	#user-accounts button:hover{
		background: #ededed;
		color: #222222;
	}

	#menu-btn img{
		width: 1.8em;
		height: 1.8em;
		border-radius: 50%;
		margin-right: .3em;
	}
	
	#menu-btn i{
		font-size: 1.5em;
	}

	#menu-btn #header-dp{
		height: 1.2em;
		width: 1.2em;
		padding: .3em;
		border: 1px solid #fff;
		border-radius: 50%;
	}

	#menu-btn #header-dp i{
		font-size: 1.2em;
		color: #fff;
	}

	/*	Define Switch Accounts UI*/
	#user-accounts{
		background: transparent;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		max-width: 12em;
		border-radius: .3em;
	}

	#user-accounts #active-profile{
		width: auto !important;
	}
	
	#user-accounts #active-profile .avatar i{
		color: #fff !important;
	}

	#user-accounts #active-profile .user-name{
		font-size: .7rem;
		padding: 0 .3em;
		text-align: start;
		color: inherit;
	}

	#user-accounts button{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: start;
		outline: 0;
		/* padding: .1rem !important; */
		border: none;
		border-radius: 3em;
		width: 100%;
		background: #4e4e4e;
	}

	#user-accounts button img::before{
		content: "";
		border: 3px solid #000;
	}

	#user-accounts button img{
		height: 30px;
		width: 30px;
		border-radius: 50%;
	}

	#active-profile {
		padding: 0 !important;
	}

	#active-profile .img {
		
	}

	#active-profile .img img{
		height: 33px;
    	width: 33px;
	}

	#user-accounts #active-profile button i{
		font-size: 1.2em;
		margin-left: 0.5em;
	}

	#profiles .show{
		display: block;
		width: 200px;
		/*
		z-index: 10;
		width: 12em;
		border: 1px solid #c9c9c9;
	 */
	}

	#bell-btn,
	#menu-btn{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		padding: 0;
	}

	#bell-btn,
	#menu-btn,
	#user-accounts{
		margin: 0 .3em;
	}

	#bell-btn > button,
	#menu-btn > button,
	#active-profile .avatar,
	#active-profile .img{
		width: 35px;
		height: 35px;
		padding: 0;
		background-color: #636363;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	#menu-btn > button:hover,
	#bell-btn > button:hover{
		color: #000 !important;
		background-color: #9b9b9b;
	}

	#menu-btn i,
	#bell-btn i,
	#active-profile .img i{
		color: #fff !important;
		margin: 0;
		padding: 0;
	}

	#active-profile .img i {
		font-size: 1.75em !important;
	}
	
	#profiles::before,
	#main-menu::before,
	#bell-menu::before{
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid rgba(0,0,0,.8);
		top: -11px;
		right: 15px;
	}

	#main-menu::before,
	#bell-menu::before,
	#profiles::before{
		top: -11px;
		right: 15px;
	}

	/* Add Subtle Border Bottom to all child li */
	#main-menu li,
	#bell-menu li,
	#profiles li{
		font-size: 1rem;
		height: 40px;
		/* border-bottom: 1px solid rgba(255,255,255,.3); */
	}

	/* Remove the Border Bottom from the last Child */
	#main-menu li:last-child,
	#bell-menu li:last-child,
	#profiles li:last-child{
		border: none;
	}

	.switch-profile{
		min-width: 100%;
		padding: .3em 0 !important;
		cursor: pointer;
	}

	.switch-profile .img,
	.switch-profile .name{
		padding: 0;
	}

	.switch-profile .img{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.switch-profile .img img,
	.switch-profile .img .avatar{
		width: 30px !important;
		height: 30px !important;
		border-radius: 50% !important;
	}

	.switch-profile .img .avatar{
		display: flex;
		justify-content: center !important;
		align-items: center !important;
		padding: 0 !important;
		border: 1px solid var(--border-color);
	}

	.switch-profile .img .avatar i,
	#main-menu .icon i{
		font-size: 1rem !important;
		margin: 0 !important;
	}

	.switch-profile .name{
		display: flex;
		justify-content: start;
		align-items: center;
	}

	#profiles .switch-profile,
	#main-menu > li a, 
	#bell-menu > li a{
		height: 100%;
		background: transparent;
		border-radius: 0;
		padding: 0;
	}

	#profiles .switch-profile .name,
	#main-menu > li a, 
	#bell-menu > li a{
		color: #fff;
		font-size: inherit;
	}

	#profiles .switch-profile:last-child,
	#main-menu > li > a:last-child, 
	#bell-menu > li > a:last-child {
		border-bottom: none;
	}
	
	#main-menu.show,
	#bell-menu.show,
	#profiles.show{
		display: block;
	}


	#main-menu,
	#bell-menu,
	#profiles
	{
		position: absolute;
		top: 120%;
		right: 0;
		height: auto;
		border-radius: .3em;
		text-align: center;
		background-color: rgba(0,0,0,.8);
		z-index: 999; 
		display: none;
		margin: 0;
		padding: 0;
		list-style-type: none;
		overflow: hidden;
	}

	#main-menu .icon,
	#main-menu .content{
		display: flex;
		align-items: center;
		padding: 0;
		margin: 0;
		color: #fff !important;
		height: 100% !important;
	}

	#main-menu .icon{
		justify-content: center;
	}
	#main-menu .content{
		justify-content: start;
	}

	/* Set Menu Widths */
	#main-menu{
		width: 180px;
	}

	#bell-menu{
		width: 350px;
	}

	#bell-menu > li{
		padding: .3em;
		height: -moz-fit-content !important;
		height: fit-content !important;
	}

	#bell-menu > li.not-viewed{
		background-color: rgb(87, 87, 87);
	}

	#bell-menu > li.not-viewed:hover{
		background-color: rgb(80, 80, 80) !important;
	}

	#bell-menu > li a:hover{
		background-color: inherit !important;
	}

	#profiles{
		width: 300px;
	}


	#main-menu > li > a,
	#bell-menu > li > a{
		display: flex;
		justify-content: left;
		align-items: center;
		background-color: transparent;
		text-decoration: none;
		box-sizing: border-box;		
		line-height: 1;
		text-align: left;
		padding: 0 !important;
	}

	#main-menu > li a:hover,
	#bell-menu > li a:hover,
	#profiles .switch-profile:hover{
		text-decoration: none;
		background-color: #1e1e1e;
	}

	#bell-menu i{
		margin-right: .5em;
		color: #fff;
	}

	#bell-menu .img{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}

	#bell-menu .img img{
		width: 30px !important;
		height: 30px !important;
		border-radius: 50%;	
	}

	#bell-menu #notification-wrap{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	#notification-wrap .narration{
		font-size: .8em;
		padding: 0;
		color: #fff;
	}

	#notification-wrap .posted{
		font-size: .7em;
		font-weight: 400;
		margin-top: .3em;
		color: #959595;
	}
		
	#page-id, 
	#page-type, 
	#page-state{
		display: none;
	}
	
	#menu-nav{
		display: flex;
		flex-flow: row wrap;
		width: 18.5em;
	}
	
	#menu-nav .nav-card {
		box-sizing: border-box;  
		height: 4rem; 
		width: 4rem; 
		font-weight: 500; 
		text-align: center; 
		margin: .3em; 
		float:left;  
		border-radius: .3rem;
	}
	
	#menu-nav .nav-card i{
		font-size: 1.5rem;
		padding: .3em;
		color: #fff;
	}
	
	#menu-nav .nav-card a:link{
		text-decoration: none;  
		color: rgba(0,0,0,.5);
	}
	
	#menu-nav .nav-card a:visited{
		color: rgba(0,0,0,.5);
	}
	
	#menu-nav .nav-card a:hover{
		text-decoration: none;  
		color: rgba(0,0,0,.5);
	}
	
	#menu-nav .nav-card a:active{ 
		color: #fff;
	}
	
	#menu-nav .nav-card:hover, 
	#offline-menu .nav-link:hover{
		background: #009393; 
		color: #fff;
	}
	
	#menu-nav .nav-card img {
		width: 60%; 
		margin: 3px; 
		padding: 3px; 
		vertical-align: middle; 
		border-style: none;
	}
	
	#menu-nav .nav-card .card-body {
		box-sizing: border-box; 
		font-size: .7rem; 
		padding: .3em 0;
	}
	
	#menu-nav .nav-card:hover a{
		color: #fff;}
	
	.flex-wrapper{
		display: flex;
		flex-flow: row wrap;
	}
	
	.card {
		position: relative;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		flex-direction: column;
		word-wrap: break-word;
		background-color: #fff;
		background-clip: border-box;
		border: 1px solid rgba(0,0,0,.125);
		border-radius: .25rem;
		/* width: 10em; */
		margin: .3em .65em;
	}
	
	.card .card-body {
		text-align: center;
		padding: .3em;
	}
	
	.card-img, .card-img-top {
		border-top-left-radius: calc(.25rem - 1px);
		border-top-right-radius: calc(.25rem - 1px);
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 100%;
		height: 8em;
	}
	
	.card-img img {
		height: 8rem;
	}

	/*Service Page*/
	.service-wrap{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 1em;
	}

	.service-wrap > .title{
		padding: .3em;
		width: 100%;
		background: linear-gradient(90deg, rgba(244, 111, 0, .8) .8%, #fff);
	}

	.service-wrap .wrap{
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: stretch;
		margin-bottom: 1em;
		width: 100%;
	}

	.service-wrap .wrap .tab{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 1em 0;
		border-radius: .3em;
		width: 100%;
		font-size: .8rem;
		background: linear-gradient(135deg, rgba(244, 111, 0, .01) 10%, rgba(0, 147, 147, .8));
	}

	.service-wrap .wrap .tab > .title{
		font-weight: 600;
		padding: .3em;
	}

	.service-wrap .wrap .tab > div{
		padding: .3em;
	}

	.service-wrap .wrap .tab > .detail{
		border-top: 1px solid var(--border-color);
	}

	.service-wrap .wrap .tab > .price{
		font-weight: 600;
		border-top: 1px solid var(--border-color);
	}

	.service-wrap .wrap .tab > .validity{
		border-top: 1px solid var(--border-color);
	}

	.service-wrap ul,
	.service-wrap ol{
		margin-left: 2em;
	}


	/* Custom Slider */
	#slider{
		position: relative;
		min-width: 100%;
    	height: 25rem;
	}

	#indicators{
		position: absolute;
		z-index: 12;
		bottom: 5%;
		min-width: 100%;
		height: 6em;
		padding: .3em 0;
	}

	.carousel-control-prev,
	.carousel-control-next{
		z-index: 15;
		position: absolute;
		top: 0;
	}

	.carousel-control-prev{
		left: 0;
	}

	.carousel-control-next{
		right: 0;
	}

	#indicators ol{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#indicators ol li img{
		width: 100px !important;
    	height: 100px !important;
	}

	/* REGISTER/ LOGIN SCREENS*/

	.login-wrap{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		padding-top: 3em;
        min-height: 100vh;
		height: auto;
		min-width: 520px;
		width: 100%;
		overflow: hidden;
	}

	.register-wrap{
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
		align-items: center;
		padding-top: 3em;
        padding-bottom: 3em;
		overflow: hidden;
	}


	.register-wrap form #register-btn.prohibited{
		cursor: not-allowed;
	}

	#register-btn.pointer{
		cursor: pointer;
	}

	
	.terms-wrap{
		margin: 1em 0;	
	}

	.form-wrap{
		display: flex;
		flex-flow: column nowrap;
		width: auto;
		padding: 1em;
	    justify-content: flex-start;
	    align-items: flex-start;
	    border: 1px solid var(--border-color);
	    margin: 1em;
	    background-color: rgba(255,255,255,.8);
	    border-radius: 1em;
	}	

	.column-wrap{
		display: flex;
		flex-flow: column-reverse nowrap;
		justify-content: center;
		align-items: center;
		top: 3em;
		width: 80%;
		position: relative;
		margin: 0 auto;
	}

	.about-column, 
	.account-column{
		display: flex;
		flex-flow: column nowrap;
		width: 100%;
		justify-content: center;
		align-items: center;
		border: 1px solid var(--border-color);
		background-color: var(--bg-color);
		border-radius: 1em;
	}

	.about-us, .account-description{
		width: 100%;
		padding: 1em;
	}

	.account-description a:link,
	.account-description a:hover,
	.account-description a:visited,
	.account-description a:active{
		text-decoration: none;
		color: #fff;
	}

	.about-us{
		padding: 1em;
	}

	.personal-account, 
	.business-account{
		display: flex;
		flex-flow: row nowrap;
		border-radius: 1em;
		margin: 1em 0;
		color: rgba(0,0,0,.8);
		background-color: var(--bg-color);
		padding: 1em;
		cursor: pointer;
	}

	.personal-account:hover, 
	.business-account:hover{
		background-color: rgba(0,0,0,.3);
	}

	.fa-img{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: .3em;
		margin-right: 1em;
		width: 5em;
	    height: 5em;
	    background-color: #fff;
	    border: 1px solid var(--border-color);
	    border-radius: 50%;
	}

	.fa-img i{
		font-size: 3em;
		color: rgba(0,0,0,.1);
	}	

	.personal-account:hover .fa-img i, 
	.business-account:hover .fa-img i{
		color: rgba(0,0,0,.3);
	}

	.personal-account .title, 
	.business-account .title{
		color:  rgba(0,0,0,.8);
	}

	#carousel-wrap{
		height: 350px;
	}

	#carousel-wrap img{
		height: 80% !important;
	}


	/* CONTAINER SECTIONS*/

	#search-wrap{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	#search-wrap .title{
		display: none;
	}

	#search-wrap .title,
	#search-wrap .caption{
		color: #fff !important;
	}

	#search-wrap #service-list li{
		width: 100%;
		text-transform: capitalize;
	}

	#search-wrap #service-list li > *{
		font-weight: 400;
	}

	#search-wrap .hero{
		height: 500px !important;
	}

	#search-wrap .hero .logo{
		margin-top: 3rem;
		width: 120px !important;
		height: 120px !important;
		padding: 0 !important;
	}

	#search-wrap .hero section > *{
		width: 100%;
	}
	
	.caineware-services{
		margin: 5px 10px; 
		padding: 5px; 
		width: 320px; 
		border: 1px solid #0f0; 
		float:left;
	}
	
	.search-box {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		min-width: 60%;
		padding: 0; 
		font-size:1rem; 
		height: 100%; 
		position: relative; 
		background: #fff;
		border-radius: 3em;
	}

	.search-box .body,
	.search-box .buttons{
		min-height: 100%;
		padding: 0;
	}

	.search-box .body{
		height: 100%;
	}

	.search-box .buttons{
		position: relative;
		background-color: #fff;
		border-top-right-radius: 3em;
    	border-bottom-right-radius: 3em;
		transition: border-radius .3s ease-in-out;
	}
	
	.txt-search{
		padding: .2em 1em; 
		min-height: 100%; 
		min-width: 100%; 
		line-height: 1; 
		font-size: .9rem; 
		top: 0; 
		left: 0;
		border: none; 
		display: inline-block; 
		margin: 0;
		border-top-left-radius: 3em;
    	border-bottom-left-radius: 3em;
		background-color: #fff;
		transition: border-radius .3s ease-in-out;
	}
	
	
	.txt-search:focus, 
	.txt-search:active {
		border: none; 
		border-color: inherit; 
		outline: 0;
	}

	.search-box .txt-clear,
	.search-box .btn-search{
		padding: 0;
		margin: 0;
	}

	.search-box .txt-clear{
		position: absolute;
		top: 0;
		right: 0;
		background-color: transparent;
		height: 100%;
		width: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		outline: none;
		border: none;
	}

	.search-box .txt-clear i{
		margin: 0 !important;
		border-radius: .1em;
		transition: background-color .3s ease-in-out;
	}

	.search-box .txt-clear:hover i{
		background-color: #e1e1e1;
	}
	
	.btn-search{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		border: none;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: medium;
		margin: 0;
		padding: 0;
		cursor: pointer;
		width: 100% !important;
		height: 100% !important;
		background-color: transparent;		
	}

	.btn-search.wait{
		cursor: wait;
	}

	.btn-search:focus, 
	.btn-search:active{
		outline: 0;
	}

	.btn-search > i{
		font-size: 1.2em;
		/* color: #009393; */
	}
	
	#div-filters{
		display: flex;
	    flex-flow: row nowrap;
	    justify-content: flex-start;
	    align-items: center;
		width: 100%; 
		line-height: 1.5; 
		text-align: center; 
		position: relative; 
		font-size: .7rem;
		text-transform: uppercase;
	}
	
	#div-filters > .filter{
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		padding: 0.3em 0.5em;
		text-decoration: none;
		filter: none;
		color: #3d3b49 !important;
		margin-right: 0.3em;
		border-radius: 0.3em;
		background: transparent;
	}
	
	#div-filters > .filter i{
		display: none;
		font-size: 1.2em;
		margin-right: .3em;
	}

	#div-filters .label{
		color: inherit !important;
	}

	#div-filters .filter.active,
	#div-filters .filter.active:hover{
		font-weight: 500; 
		background: #000 !important;
		border: none !important;
		box-shadow: none !important;
	}

	#div-filters .filter.active .label{
		color: #fff !important;
	}
	
	#div-filters .filter:hover{
		background: #fafafa;
	}

	#div-filters .filter:active,
	#div-filters .filter:focus{
		background: #f9f9f9;
	}
	
	
	#location-filters{
		display: none;
		padding: 0 2rem 0 0 !important;
	}

	#location-filters.show{
		display: block;
	}

	#div-filters > .filter,
	#location-filters .form-control,
	#budget{
		font-size: .85rem !important;
		height: calc(1.5em + 0.75rem + 2px) !important;
		line-height: 1.2 !important;
		border: 1px solid #e7e7e7 !important;
	}

	#div-filters > .filter:active,
	#div-filters > .filter:focus,
	#location-filters .form-control:active,
	#location-filters .form-control:focus,
	#budget:active,	
	#budget:focus{
		outline: none !important;
    	box-shadow: 0 0 1px 1px #e9e9e9 !important;
	}

	#location-filters > div{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 .3em;
	}
	
	/*Style Auto Suggestion Box inputs*/
	.auto-suggest-box { 
		height: auto; 
		position: absolute; 
		padding: 0;
		color: rgba(0,0,0,.5); 				
        /* top: 2.5rem;  */
		left: 0; 
		right: 0; 
		margin: 0 auto; 
		box-shadow: 0px 2px 1px 1px var(--border-color);
		border: none;
		background: #fff; 
		z-index: 8; 
		border-radius: 5px; 
		display: none;
		overflow: hidden;
	}

	.auto-suggest-box.top{
		top: 110%;;
	}


/* Style the search box when the auto suggest shows */
	.search-box.auto-suggest{
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		border: 1px solid var(--border-color) !important;
		border-bottom: none !important;
	}

	.auto-suggest-box.auto-suggest{
		border-top-right-radius: 0;
		border-top-left-radius: 0;
		border-top: 0;
		border-top-color: transparent;
		display: block;
	}

	.auto-suggest-links{
		font-size: .85rem; 
		display: block; 
		padding: .1em .5em; 
		cursor: pointer; 
		text-decoration: none;
		border-bottom:  rgba(0,0,0,1);
	}
	
	.auto-suggest-links .fas, .auto-suggest-links .fab{
		font-size: .85rem;
		margin-right: .5em;
		padding: .3em;
	}	
	
	.auto-suggest-links:hover, .auto-suggest-links:hover *{
		background-color: #e9e9e9;
	}

	/*Spinner*/
	.lds-ripple {
		display: inline-block;
	    position: relative;
	    width: 80px;
	    height: 80px;
    	margin: 0 auto;
	}

	.lds-ripple div {
		position: absolute;
		border: 4px solid #000;
		opacity: 1;
		border-radius: 50%;
		animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
	}
	
	.lds-ripple div:nth-child(2) {
		animation-delay: -0.5s;
	}

	@keyframes lds-ripple {
	  0% {
	    top: 36px;
	    left: 36px;
	    width: 0;
	    height: 0;
	    opacity: 1;
	  }
	  100% {
	    top: 0px;
	    left: 0px;
	    width: 72px;
	    height: 72px;
	    opacity: 0;
	  }
	}
	
	/*Main Homeslider*/
	#div-homeslider{
		display: none; 
		min-height: 30vh; 
		width: 100%; 
		overflow: hidden; 
		border-radius: 1em; 
		position: relative;
	}

	/* Slider Container*/

	.slider-container{
		width: 100%;
		margin: 10px auto;
	}

	.carousel{
		position: relative;
		border-radius: .3em;
		/* border-radius: 1em; */
		overflow: hidden;
		border: 1px solid var(--border-color);
		box-shadow: 0px 0px 3px var(--border-color);
	}

	.slider{
		height: 100%;
		display: flex;
		width: 400%;
		transition: all 1s;
	}

	.slider section {
		flex-basis: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		border-radius: .3em;
		position: relative;
	}

	.slider section img{
		width: 100%;
		height: 120%;
	}

	.slider section .caption{
		position: absolute;
		background-color: rgba(0,0,0,.3);
		z-index: 3;
    	width: 100%;
    	display: flex;
    	flex-flow: column;
    	align-items: center;
    	top: 2.5em;
    	padding: 1em;
    	color: #fff;
	}

	.slider section .caption > .title{
		color: #fff;
	}

	.slider section .caption > .detail{
		color: #fff;
	}
	
	.controls .arrow{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
	}

	.controls .arrow i{
		font-size: 1.5em;
	}

	.arrow.left{
		left: 10px;
	}

	.arrow.right{
		right: 10px;
	}

	.controls ul{
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translate(-50%);
		list-style: none;
		display: flex;
		padding: 0;
		margin: 0;
	}

	.controls ul li{
		width: .5em;
		height: .5em;
		border: 1px solid #333;
		background-color: #333;
		border-radius: 1em;
		margin: .3em;
		cursor: pointer;
	}

	.controls ul li.selected{
		background: transparent;
	}

	/* */

	#get-started{
		display: inline-block;
		color: #000; 
		position: absolute;
		margin: 0 auto; 
		bottom: 20em;
		background: #007bff; 
		padding: 3em; 
		font-size: 1.5rem;
		border-radius: 2px; 
		border: 2px solid #007bff;
		z-index: 99; 
		width: 5em; 
		height: 2em;
	}

	/*Style Refine Filters Inputs*/
	#results-column, 
	#adverts-column {
		display: none;
		padding: 0;
	}

	#results-column.show{
		display: block;
	}

	#adverts-column.show{
		display: none;
	}
	
	#div-refine-filters {
		min-height: 1em; 
		width: 100%; 
		display: none;
	}

	#div-refine-filters.show{
		display: block;
	}
	
	#div-refine-filters .title{
		font-size: .8em; 
		margin: 0; 
		padding: 0.5em .1em; 
		color: rgba(0,0,0,.5);
	}

	#div-refine-filters .title > i{
		margin-right: .3em;
		color: rgba(0,0,0,.5);;
	}
	
	#location-filter {
		position: relative; 
		overflow: hidden; 
		margin: 0 auto; 
		color: #000; 
		font-size: 1.8em; 
		height: 2.6em; 
		line-height: 0.8em; 
	}
	
	#location-filter > div{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	} 
	
	#budget-filter {
		position: relative; 
		overflow: hidden; 
		padding: 0 !important;
		display:none; 
	}

	#budget-filter.show {
		display: block;
	}
	
	#budget-feedback{
		font-size: .8em; 
		line-height: 1em; 
		display: inline-block;
	}
	
	#budget-slider{
		overflow: hidden;
	}
	
	#budget{
		display: inline-block; 
		padding: .3em; 
		width: 30%;	
		max-width: 33%; 
		margin: 0;
		border: 1px solid #aaa; 
		border-radius: .3em;
	}
	
	/*Style Results Area*/
	#div-results {
		display: none;  
		font-size: 1rem; 
		width: 100%;
		padding: 0;
		margin-top: 3em;
	}
	
	#load-spin{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		font-size: 1em;
		margin: 3em 0;
	}

	#load-spin i{
		font-size: 3em;
		color: rgba(0,0,0,.3);
	}

	#load-spin .caption{
		font-size: 1em;
		padding: 1em;
		margin: 1em;
		color: inherit;	
	}


	#result-header {
		overflow: hidden; 
		width: 100%; 
		font-size: .85em;
		padding: .3em 0;
		margin: 1em 0;	
	}
	
	#result-header span{
		color: rgba(0,0,0,.7); 
		padding: 5px 0; 
		line-height: 1.5;
	}
	
	.inline-billboard, 
	.inline-advert, 
	.inline-feed {
		display: none;
	}

	#service-list li {
		display: none;
	}

	#service-list li.active {
	display: block;
	}

	#div-results > .row {
		margin-bottom: 1rem !important;
	}
	
	#div-results > li, 
	#div-results > li .ads {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		box-sizing: border-box; 
		font-size: 1rem;
		width: 100%; 
		line-height: 1.2; 
		margin: 0 0 1.5rem 0;
		padding: .3rem;
		border: 1px solid var(--border-color);
		border-radius: 0.5rem;	
		background-color: #fff;
		overflow: hidden;
		min-height: 10em;
	}
	
	#div-results > li .div-ads{
		margin-bottom: 0 !important;
	}

	.gallery-pop{
		position: absolute;
		top: 30%;
		left: 30%;
		width: 60%;
		height: 80%;
		border-radius: .3em;
		overflow: hidden;
		z-index: 3;
		border: 1px solid rgba(0,0,0,.1);
	}
	
	#div-results .result {
		margin-bottom: 1rem;
		border: 1px solid var(--border-color);
		padding: .3em;
		border-radius: .3rem;
	}

	#div-results .result .avatar i{
		font-size: 3rem;
	}

	#div-results .result .buttons{
		display: flex;
		justify-content: start;
		align-items: center;
	}

	#div-results .result .buttons .get-btn{
		margin-right: 1em;
		font-size: .8em;
		cursor: pointer;
		font-weight: 600;
    	color: #635a5a;
	}

	#div-results .ads{ 
		border-radius: 0;
	}
	
	#div-results .names {
		font-size: .9em;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;  
		color: #0404A2 !important;
	}

	#div-results .names a{
		display: inline-block; 
		font-size: inherit; 
		color: #0404A2 !important;
		margin-right: .3em;
	}

	#div-results .names .follow-btn{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		border-radius: 1rem;
		width: auto;
		padding: 0 .7em;
		font-size: .85em;
		border: none;
		color: #000;
		background: rgb(229 224 224);
		line-height: 1.5;
		font-weight: 600;
		transition: all .3s ease-in-out;
	}

	/* #div-results .names .follow-btn:hover{
		color: #fff;
		border: 1px solid #92b3ff;
		background: linear-gradient(45deg, #004eff, #8fc0f5);
	} */

	#div-results .names .follow-btn i{
		display: inline-block;
		margin-right: 1em; 
		padding: .1em 0; 
		font-size: .3em; 
	}


	#div-results .names a:hover {
		border: none;
		color: #0404A2 !important;
		text-decoration: none;
	}

	#div-results .word-hits{
		font-weight: 600; 
		color: inherit;
	}

	#div-results .detail{
		font-size: .85em; 
		color: inherit;
	}

	.avatar{
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#div-results .img,
	#div-results .avatar {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		/* flex: 25%; */
		text-align: center;
		min-height: 100%;
	}

	#div-results .img{
		/* font-size: 2.5rem; */
		/* padding: .3rem !important; */
	}
	
	.img button{
		display: flex;
		justify-content: center;
		align-items: center;
		outline: none;
		border: none;
		background-color: transparent;
	}

	#div-results .img button i{
		color: rgba(0,0,0,.05);
		
	}
	
	#div-results .img img,
	#div-results .img .avatar{
        border-radius: .3rem;
		height: 100px;
    	width: 100%;
	}

	#div-results .img img{
		/* border: 1px solid var(--border-color); */
		object-fit: cover;
	}
	
	#div-results .img .avatar{
		align-items: center !important;
		background-color: #f9f9f9;
	}
	
	#div-results .img .avatar i{
		color: #a7a7a7 !important;
	}

	#div-results .body {
		font-size: 1em;
		max-width: 100%;
		/* flex: 100%; */
		/* float: left;  */
		padding: 0 .3rem !important; 
		margin: 0;
	}

	#div-results .body li{
		line-height: 1.2;
		/* padding: .3em 0; */
		margin-bottom: .3em !important;
	}

	#div-results .location {
		font-size: .8em;
	}

	#div-results .location i{
		margin-right: .3em;
	}

	#div-results .body .inventory{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		font-size: .8em;
	}

	#div-results .body .state,
	#div-results .body .in-stock{
		font-size: inherit;
		margin-right: 1em;
		padding: .3em .5em;
		color: #fff;
		font-weight: 500;
		border-radius: 1em;
	}

	#div-results .body .state{
		background: #a70101;
	}

	#div-results .body .in-stock{
		background: #005f97;
	}

	.engage-btns{
		display: flex;
		justify-content: end;
		align-items: center;
	}

	.engage-btns button{
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		outline: none;
		padding: .3em;
		margin: 0 .3em;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background-color: var(--border-color);
		transition: all .3s ease-in-out;
	}

	.engage-btns button:hover{
		border: 1px solid rgba(0,0,0,.8);
		box-shadow: 0 0 1px 1px #0000003b !important;
	}

	.engage-btns button i{
		font-size: .8rem;
		color: #000 !important;
		display: block;
		width: 25px;
		height: 25px;
		line-height: 25px;
	}


	/* Reviews Tabs */
	#reviews,
	.review{
		list-style: none;
		padding-left: 0;
	}

	.review{
		padding: 1em;
	}

	.review .search-rating{
		padding: .3em 0 !important;
	}

	#reviews > li{
		border-bottom: 1px solid var(--border-color);
		margin-bottom: 1em;
	}

	#reviews .img{
		border-radius: 50%;
		width: 30px;
		height: 30px;
		margin: 0;
	}

	#reviews .img img{
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	.total-reviews-count{
		font-size: .8em;
		padding: 0 .3em;
		margin: 0 1em;
	}

	.urlhit a{
		color: #359595 !important;
		padding: .1em 0;
		font-size: inherit;
		text-decoration: none;
	}
	
	.industry, .occupation{
		font-size: .85em;
	}

	.industry{
		color: #ff8f00;
	}

	.actions .occupation{
		text-align: center;
	}

	.occupation{
		color: #ff8f00;
		
	}
	
	.open,
	.closed{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: .8em;
		padding: .1em .5em;
	}

	.open, 
	.open > i{
		color: #009393;
	}

	.closed,
	.closed > i{
		color: #f40202;
	}

	.open > i,
	.closed > i{
		margin-right: .3em;
	}
	
	.map {
		height: 5em;
		margin: .5em 0 0;
		border: 1px solid #e8e8e8;
		border-radius: .3em;
		overflow: hidden;
	}
	
	#div-results > li .body .detail {
		font-size: .8em; 
		color: rgba(0,0,0,.8); 
	}

	#div-results > li .body .availability {
		font-size: .8rem; 
		color: rgba(0,0,0,.8); 
	}

	.posted-on {
		font-size: .8rem; 
		color: rgba(0,0,0,.5); 
	}
	
	.posted-on i{
		margin-right: .3em; 	
	}
	
	.posted-on a {
		text-decoration: none; 
		color: rgba(0,0,0,.5);
	}
	
	.contact-email, 
	.contact-mobile, 
	.contact-landline,
	.contact-primary,
	.urlhit,
	.location {
		font-size: .8em;
		color: rgba(123, 123, 123, 0.8);
		padding: .3em 0 !important;
	}	

	.contact-primary{
		margin-left: 1rem;
    	padding: 0 !important;
	}
	
	#div-results .body .buttons{
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: .3em 0;
	}

	#div-results .icon{
		width: 1.2em !important;
		padding: 0 !important;
		/* display: flex; */
		display: none;
		justify-content: start;
		align-items: center;
	}

	#div-results .icon i{
		font-size: .8em;
    	display: block;
	}

	.urlhit i{
		font-size: .65em;
	}

	#div-results .row > .detail{
		font-size: 1em !important;
		display: flex;
		justify-content: flex-start;
		align-items: center !important;
		padding: 0 .3em !important;
		line-height: 1;
	}

	#div-results > li .body .buttons li{
		font-size: .85rem;
		height: 25px;
		padding: .5em;
		margin-right: .3em;
		border: 1px solid #dee2e6 !important;
		border-radius: 50rem;
		line-height: 1;
		width: -moz-fit-content;
		width: fit-content;
		margin-bottom: 0 !important;
	}

	#div-results > li .body .buttons li:hover{
		background-color: var(--border-color);
	}

	#div-results > li .body .flex{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-start;
	}

	#div-results > li .body .flex > div{
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: flex-start;
		border-right: 1px solid rgba(0,0,0,.3);
		margin-right: .3em;
		padding-right: .3em;
		min-height: 100%;
	}

	#div-results > li .body .flex > div:last-child{
		border:  none;	
	}


	#div-results > li .body .buttons #search-info{
		font-size: .8rem;
		position: absolute;
		top: -5em;
		right: 1em;
		box-shadow: 3px 3px 3px rgba(0,0,0,.3);
		border-radius: .3em;
		z-index: 100;
		background: #fff;
		padding: .3em;
		min-width: 20em;
		width: auto;
	} 

	#div-results > li > .actions {
		display: flex;
		flex-flow:  column nowrap;
		justify-content: center;
		align-items: center;
		flex: 50%;
		border-left: 1px solid rgba(0,0,0,.03);
		/* max-width: 12em; */
		padding: 0;
	}

	#div-results .property-type {
	    font-size: .8em;
	    color: #ff8f00;
	    padding: .3em 0;
	}
	
	#div-results .price{
		font-weight: 500;
		font-size: .8em;
	}

	.list-group > .list{
		margin: .3em 0;
		font-size: inherit;
	}

	.list-group > .list > .detail{
		min-width: 80%;
		max-width: 80%;
		font-size: inherit;
		padding: .3em;
	}

	.list-group i{
		margin-right: .3em;
		color: #009393;
	}

	#div-results > li .body .buttons > button,
	.buttons > button{
		font-size: .8em;
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
		margin: 0 1em 0 0;
		padding: .3em .5em;
		color: #000;
		outline: 0;
		border: none;
		border-radius: 1em;
		line-height: 1;
	}

	#div-results > li .body .button > button i,
	.button > button i{
		margin-right: .3em;
	}

	#div-results > li .body button:hover,
	.actions button:hover{
		box-shadow: 1px 1px 3px 1px rgba(0,0,0,.03);
		/* color: #fff; */
		/* border: 1px solid #009393; */
	}



/*In Page Notifications*/
#in-page-notification{
    padding: 0 !important;
    margin: 3rem 0;
}

#in-page-notification.hide{
	display: none !important;
}

#in-page-notification .message{
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
}

#in-page-notification .close-btn{
	position: absolute;
	top: -3px;
	right: 7px;
	height: 100%;
	width: 50px;
}

#in-page-notification .close-btn:hover{
	cursor: pointer;
}

#in-page-notification .close-btn i{
	font-size: 28px;
}

	.search-rating .count{
		display: inline-block;
		top: -.018em;
		position: relative;
		padding: .3em;
		color : rgba(0,0,0,.3);
	}
	
	.search-rating i {
		color : rgba(0,0,0,.1);
		font-size: 1em;
	}

	.search-rating .gold,
	#star-rating .gold,
	#bold-rating .gold,
	.contact-rating .gold {
		color : #FFD700;
	}

	.search-rating > .gray,
	#star-rating > .gray {
		color : rgba(0,0,0,.3);
	}

	.search-rating img{
		position: absolute;
		top: .45em;
		left: .3em;
		height: .8em;
		display: inline-block;
		width: 3em;
	}

	
	.no-results {
		font-weight: 500; 
		font-size: 1rem; 
		color: #f00;
	}
	
	.headers{
		background-color: #b0b0b0; 
		font-weight: 500; 
		height: 30px;
	}
	
	.social{
		height: 25px; 
		width: 25px; 
		padding: 2px;
	}
	
	.like-us{
		height: 20px; 
		width: 80px; 
		display: block;
	}
	
	.like-social{
		height: 20px; 
		width: 100px;
	}
	
	.vocation{
		color: #999;
	}
	
	
	.icon span{
		position:absolute; 
		top: -2rem; 
		z-index: 100;
		font-size: .7rem; 
		display: none; 
		min-width: 120px; 
		width:auto; 
		background: #000; 
		color: #fff; 
		padding: .5em 0; 
		text-align: center; 
		border-radius: .5em; 
		margin: 0 auto; 
		opacity: 0; 
		transition: 0.6s opacity;
	}
	
	.icon span:after{
		content:''; 
		width: 10px; 
		height: 10px; 
		position: absolute; 
		bottom: -5px; 
		background: #000; 
		z-index: -1; 
		left: 10%; 
		transform: translateX(-50%) rotate(45deg);
	}
	
	.icon:hover > span{
		display: block; 
		opacity: .8;
	}
	
	.like-btn, 
	.report-btn, 
	.basket-btn{
		cursor: pointer;
		position: relative; 
		font-weight: 600; 
	}

	.like-btn.liked{
		background: linear-gradient(80deg, rgb(15, 120, 248), #d7c4c4);;


	}

	.like-btn.liked i{
		color: #fff !important;
	}
	
	/*
	.like-btn{
		fill: #5905fb;
	}
	
	.like-btn:hover{
		color: #fff; 
		background-color: #5905fb;
	}
	.message-btn:hover{
		color: #fff; 
		background-color:#009393;
	}
	.cart-btn:hover{
		color: #fff; 
		background-color:#ffde00;
	}
	*/


	/*Style Homepage Feedback Items*/
	#div-nothing-found{
		font-size: .9rem; 
		width: 100%; 
		line-height: 2; 
		padding: 1rem;
	}
	
	#div-nothing-found li {
		font-size: .9rem; 
		list-style: none; 
		text-indent: 0;
	}
	
	#div-nothing-found h3{
		font-size: 1.2rem; 
		color: #a94d00;
	}

	/* The prospect suggestion box shows each time a search result returns null */
		#prospect-suggestion{
			font-size: 1rem;
			border: 1px solid rgba(0,0,0,.1);
			border-radius: .7em;
			box-shadow: 1px 1px 2px rgba(0,0,0,.1);
			text-align: left;
			color: #535354;
			max-height: 15em;
			width: 100%;
		}

		#prospect-suggestion img {
			height: 100%;
			width: 12em;
		}

		
	/* End Prospect Suggestion Styles */

	/*Management Screens*/
	#manage-wrap{
		display: flex;
	    flex-flow: column nowrap;
	    justify-content: center;
	    align-items: flex-start;
	    width: 100%;
	    padding: 1em 0;
	}

	#manage-wrap > div{
		width: 48%;
	}

	#manage-new{
		display: flex;
	    flex-flow: column nowrap;
	    justify-content: center;
	    align-items: flex-start;
	    border: 1px solid rgba(0,0,0,.1);
		padding: 1em;
		border-radius: 1em;
	}

	#manage-new .title:after{
		content:'';
		border-bottom: 1px solid #000;
	}

	#manage-list{
		font-size: 1rem;
		/* padding: .3em; */
    	list-style: none;
		/* height: calc(100vh - 250px); */
		overflow-y: auto;
		/* background: #fff; */
		border-radius: .3em;
	}

	#manage-list .col-3,
	#manage-list .col-9{
		padding: 0;
		margin: 0;
	}

	#manage-list .item-meta{}

	#manage-list .mobile,
	#manage-list .email{
		font-size: .85em;
	}

	.item-meta span{
		font-size: .75em;
		padding: .15em .3em;
		margin-right: .3em;
		border-radius: .3em;
		color: #fff;
		text-transform: capitalize;
		cursor: pointer;
	}

	/* Harmonized color palette for better visual appeal */
	.item-meta .availability {
		background-color: #6A1B9A; /* Deep Purple */
	}

	.item-meta .services {
		background-color: #195189; /* Bright Blue */
	}

	.item-meta .vacancy {
		background-color: #1976D2; /* Bright Blue */
	}

	.item-meta .logs {
		background-color: #1976D2; /* Bright Blue */
	}

	.item-meta .logins {
		background-color: #3a763b; /* Bright Blue */
	}

	.item-meta .searches {
		background-color: #2b3e50; /* Bright Blue */
	}

	.item-meta .published {
		background-color: #388E3C; /* Green */
	}

	.item-meta .status {
		background-color: #FBC02D; /* Bright Yellow */
	}
	  
	/* Optional: Hover effect for slight color change */
	.item-meta span:hover {
		background-color: rgba(0, 0, 0, 0.1); /* Add a slight transparent black overlay on hover */
		color: #000;
	} 

	#manage-list .btn-options-wrap{
		display: flex;
		justify-content: end;
		align-items: center;
		padding: 0;
	}

	#manage-list .title{
		padding: 0 !important;
		font-weight: 500 !important;
		font-size: .9rem;
		margin: 0 !important;
	}

	#manage-list .body{
		/* border-left: 1px solid var(--border-color); */
		padding: .3em !important;
	}

	#manage-list > div{
		 
	}

	#manage-list > div{
		/* border-bottom: 1px solid var(--border-color); */
		margin-bottom: 1rem !important;
		background-color: #fff;
		margin-bottom: 1rem !important;
		border: 1px solid var(--border-color);
    	border-radius: 0.3em !important; 
		padding: .3em !important;
		min-width: 100%;
		transition: all 1s ease-in-out;
	}

	#manage-list > div:first-child{
		border: 1px solid var(--border-color) !important;
	}

	#manage-list > div:last-child{
		border-bottom: none;
	}

	#manage-list .img{
		display: flex;
		justify-content: center;
    	align-items: start;
		overflow: hidden;
		flex-shrink: 0;
		padding: 0;
	}

	#manage-list .img img{
		/* margin: .3em; */
		border-radius: .3em;	
	}

	#manage-list .log-list{
		display: none;
	}

	#manage-list .log-list.show{
		display: block;
	}

	/* Near Me Lists */

	#near-me-list{
		font-size: .85rem;
		/* padding: 1rem .3rem; */
		padding: 0;
	}

	.listing-near-me,
	.featured-listing,
	.new-listing,
	.most-popular,
	.featured-listing{
		font-size: .85rem;
		margin-bottom: 1rem;
	}

	.listing-near-me .avatar,
	.featured-listing .avatar,
	.new-listing .avatar,
	.most-popular .avatar,
	.featured-listing .avatar,
	#near-me-list .avatar{
		min-height: 100%;
	}

	.listing-near-me .avatar i,
	.featured-listing .avatar i,
	.new-listing .avatar i,
	.most-popular .avatar i,
	.featured-listing .avatar i,
	#near-me-list .avatar i{
		font-size: 3em;
	}

	#near-me-list .avatar i{
		color: var(--border-color);
	}

	#near-me-list > section{
		min-width: 100%;
		margin: 0 0 1rem 0 !important;
	}

	.new-listing,
	.most-popular,
	.featured-listing,
	#near-me-list .row{
		min-width: 100%;
		flex-wrap: nowrap;
		margin: 1em 0;
		border-radius: .3em;
		/* background-color: rgba(255,255,255); */
	}

	.listing-near-me .img,
	.featured-listing .img,
	.new-listing .img,
	.most-popular .img,
	.featured-listing .img,
	#near-me-list .img{
		display: flex;
		justify-content: center;
    	align-items: center;
		overflow: hidden;
		flex-shrink: 0;
		padding: 0;
		/* width: 100px; */
		max-height: 120px;
	}
	

	.listing-near-me .img img,
	.featured-listing .img img,
	.new-listing .img img,
	.most-popular .img img,
	.featured-listing .img img,
	#near-me-list .img img{
		margin: 0;
		border-radius: .3em;	
		height: 100%;
		width: 100%;
	}

	#near-me-list .img i{
		font-size: 3em;
    	color: #d5d5d5;			
	}

	#near-me-list .list-unstyled{
		margin: 0;
		padding: 0;
		padding-left: 1em;
	}

	#near-me-list .body{
		position: relative;
		padding: 0 .3em !important;
	
	}

	#near-me-list .body > div{
		width: 100%;
		padding: .3em;
	}

	#near-me-list .img i{
		font-size: 3em;
    	color: #d5d5d5;			
	}

	#near-me-list .body > .title,
	#near-me-list .body > div{
		width: 100%;
		padding: .15em;
	}

	#near-me-list .body > .title {
	    font-size: 1em;
	    font-weight: 600;
		margin-bottom: 0;
		position: relative;
	}

	#near-me-list .count-wrap{
		margin: 0;
    	padding: 0;
	}

	#near-me-list .detail{
		font-size: .8em;
		line-height: 1.5;
		padding: 0 .3em;
	}

	#near-me-list .body > .posted-on{
		font-size: .8em;
		line-height: 1;
	}

	#manage-list .img,
	#manage-list .avatar{
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}

	#manage-list .person .img,
	#manage-list .person .avatar
	#manage-list .business .img,
	#manage-list .business .avatar{
		border-radius: 50% !important;
	}

	#manage-list .img img{
		border-radius: 0 !important;
		width: 100%;
		height: 100%;
	}

	#manage-list .avatar{
		border: 1px solid var(--border-color);
		
	}
	#manage-list .avatar i{
		font-size: 1.5rem !important;			
	}

	#manage-list .img i{
		font-size: 3em;
    	color: #d5d5d5;			
	}

	.display-5.title{
		font-size: 1.5rem;
		font-weight: 400;
	}

	.display-6.title{
		font-size: 1.5rem;
		font-weight: 300 !important;
	}

	.body > .title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.title .col-2{
		display: flex;
		justify-content: end;
		align-items: center;
	}

	.body .title{
		padding: 0 !important;
		margin: 0 !important;
	}

	.body .title a{
		height: 100%;
		width: -moz-fit-content;
		width: fit-content;
		display: flex;
		justify-content: start;
		align-items: center;
	}

	.title .btn-options{
		height: 100%;
		display: flex;
		outline: none;
		border: none;
		background: transparent;
		justify-content: center;
		align-items: center;
		color: inherit !important;
	}

	.title .btn-options i{
		font-size: 1.5em;
	}

	#manage-list .body > .posted-on{
		font-size: .7em;
		line-height: 1;
	}

	#manage-list .count-wrap{
		font-size: 1rem;
		padding: 0 !important;
		margin: 0;
		height: 1.5em;
	}

	#manage-list .count-wrap span,
	#manage-list .count-wrap i{
		color: rgba(0,0,0,.5);
	}

	#manage-list .body > .detail{
		font-size: .8em;
		line-height: 1.5;
		padding: 0 .3em;
	}

	.list .btn-options-wrap{
		/* display: none !important; */
	}

	.btn-options-wrap{
		padding: .3em 0;
		display: flex;
		justify-content: end;
		align-items: center;
		position: relative;
	}

	.btn-options-wrap.show{
		display: flex;
	}

	.btn-options-wrap .buttons{
		position: absolute;
		top: 110%;
		right: 0;
		font-size: .9em;
		display: none;
		flex-flow: column;
		justify-content: center;
    	align-items: center;
		padding: 2px;
		margin: 0;
		z-index: 100;
		background: #fff;
		border: 1px solid var(--border-color);
		list-style-type: none;
	}

	.buttons.show{
		display: block !important;
		min-width: -webkit-fill-available !important;
		min-width: -moz-fit-content !important;
		width: -moz-fit-content !important;
		min-width: fit-content !important;
		width: fit-content !important;
	}

	.buttons li{
		display: flex;
		align-items: center;
		justify-content: start;
		width: 100%;
		height: 25px;
		cursor: pointer;
		padding: .1em 1em;
		border-bottom: 1px solid var(--border-color);
	}

	.buttons li .icon,
	.buttons li .detail{
		display: flex;
		align-items: center;
		font-size: .85rem;
	}

	.buttons li .icon{
		justify-content: center;
		width: 25px;
		height: 25px;
	}

	.buttons li .detail{
		justify-content: start;
		font-weight: 400;
		white-space: nowrap;
	}

	.buttons li .icon i{
		font-size: .7rem;
		top: 2px;
		left: 3px;
	}

	.buttons li:first-child{
		margin-top: 0;
	}

	.buttons li:last-child{
		margin-bottom: 0;
		border-bottom: none;
	}

	.buttons li:hover{
		background-color: rgba(0,0,0,.01);
	}

	.buttons li > i{
		font-size: 1em;
		display: inline-block;
		width: 15px;
		margin-right: .5em
	}

	#manage-list > .img{
		width: 10em;
		height: 10em;
		overflow: hidden;
		flex-shrink: 0;
	}
	
	#manage-list >.img img{
		width: 100%;
		height: 100%;
	}

	#manage-list > .body,
	#manage-list > .quantity{
		position: relative;
		width: 100%;
		display: flex;
		flex-flow: column nowrap;
	}
	
	#manage-list > .body > div,
	#manage-list > .quantity > div{
		width: 100%;
		padding: 0 .3em;
	}

	#edit-wrap{
		display: flex;
	    flex-flow: column;
	    justify-content: center;
	    align-items: center;
	    width: 100%;
	}

	#edit-wrap form{
		width: 90%;
	}
	
	form .caption{
		text-align: center;
		color: #8a8a8a;
	}

	/* Dash fancies */
	.watermark-icon{
		position: absolute;
		left: 1rem;
		font-size: 3rem;
		top: 1.5rem;
		color: #fff;
		opacity: 0.1;
	}

	.watermark-icon.darker{
		color: #8d8d8d !important;
	}

	.bg-1{
		background: linear-gradient(45deg, #eb99a1, #b34cdb, #6c75cd, #57c6d1);
	}

	.bg-2{
		background: linear-gradient(45deg, #5fd1c1, #358cd7, #5e76dd, #264fe5);
	}

	.bg-3{
		background: linear-gradient(45deg, #5f9cd1, #5f9cd1, #5f6ad1, #8095e1);
	}

	.bg-1 *,
	.bg-2 *,
	.bg-3 *{
		color: #fff !important;
	}
	
	/* Posted By Tab */
	.posted-by{
		border-top: 1px solid var(--border-color);
	}

	.posted-by .img img{
		height: 3em !important;
		width: 3em !important;
		border-radius: 50% !important;
	}

	
	.title{
		font-weight: 600;
		position: relative;
	}

	.add-comment{
		border-radius: .3em;
	    width: 100%;
	   	overflow: hidden;
	}

	.add-comment > .inline-flex{
		width: 100%;
	}

	.add-comment > #star-rating{
		font-size: 1rem;
		padding: .3em 0;

	}

	.add-comment > .inline-flex > .wrap{
		width: 95%;
	}

	.add-comment > .inline-flex > .btns{
		width: 20px;
	}

	.add-comment > div,
	.add-comment textarea,
	.add-comment > div button{
		margin: 0;
		padding: 0;
		border: none;
		min-width: 100%;
	}

	.add-comment button {
		font-size: 1.2em;
		background-color: transparent;
	}

	.add-comment > .wrap{
		min-width: 85%;
	}

	.add-comment .wrap textarea{
		min-height: 3em !important;
		min-width: 100%;
		font-size: 1em !important;	
	}

	.add-comment button:hover {
		background-color: transparent;
	}

	#comment-btn{
		cursor: pointer;
	}

		
	.wrap > .dp{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 3em;
		padding: .3em;
	}
	
	.wrap > .dp i{
		font-size: 1.5em;
		color: rgba(0,0,0,.1);
	}

	.wrap > .dp img{
		height: 100%;
		width: 100%;
		margin: .3em;
		border-radius: 50%;
	}

	
	#reviews-section,
	#comments-section{
		position: relative;
		border: 0;
		min-width: 100%;
		overflow-y: auto;
		scrollbar-width: thin;
		/* display: none; */
	}

	#reviews-section .reviews,
	#comments-section .comments{
		border: 0;
		min-width: 100%;
		overflow-y: auto;
		scrollbar-width: thin;
		/* display: none; */
	}

	#reviews-section .add-review,
	#comments-section .add-comment{
		position: absolute;
	}


	#modal #comments-section,
	#modal #likes-section,
	#modal #views-section,
	#modal #followers-section,
	#modal #reviews-section{
		padding: 0;
	}

	#modal #likes-section,
	#modal #views-section,
	#modal #followers-section{
		width: 100%;
		margin: auto;
	}

	#reviews-section.show,
	#comments-section.show{
		display: block;
	}

	.comment{
		border-radius: .3em;
		border: 1px solid var(--border-color);
    	padding: .3em;
		transition: height 1s ease-in-out;
	}

	.comment,
	.view,
	.like,
	.follower,
	.review{
		margin: 0 0 1em 0;
	}
	
	.comment .body{
		/* border-top: 1px solid rgba(0,0,0,.1);
		border-bottom: 1px solid rgba(0,0,0,.1); */
		font-size: .8em;
		padding: .3em;
		margin: .3em 0;
	}

	.comment .btns{
		display: flex;
		flex-flow: row nowrap;
		padding: .3em;
		font-size: .9em;
		padding: .3em;
	}

	.comment .btns span{
		font-size: .8em;
		margin-right: 1em;
	}

	.comment .btns .reply{
		cursor: pointer;
	}

	.comment > .replies{
		display: none;
	}

	.comment > .replies.show{
		display: block;
	}

	.comment > .reply{
		display: flex;
		flex-flow: column nowrap;
		background-color: rgba(244, 111, 0, .03);
    	margin: .3em 0 0 0;
		border-top: 1px solid rgba(0,0,0,.1);
		border-bottom: 1px solid rgba(0,0,0,.1);
	}

	.comment .wrap .person{
		min-height: 100% !important;
		flex: 1 0 auto;
		align-self: stretch;
		padding: 0 .3em;
	}


	.comment .wrap .person .detail{
		font-size: .9em;
	}

	.comment .wrap .person .occupation{
		font-size: .7em;
	}

	.comment-btns{
		 background: rgba(0,0,0,.03);
	}

	.comment-btns button{
		font-size: .8rem !important;
		padding: .1em .3em;
		border-radius: .3em;
		background: #f8f8f8;
		margin-right: 1em;
		width: 5em;
		transition: all 1s;
	}

	.comment-btns button:hover{
		background: #e7e7e7;
	}

	.comment .hide{
		display: none !important;
	}

	.staff-container{
		display: flex;
		flex-flow: row wrap;
	    justify-content: flex-start;
	    align-items: center;
	    padding: 0;
	}	

	.staff-container .tab{
		display: flex;
		flex-flow: column nowrap;
		overflow: hidden;
		justify-content: flex-start;
		align-items: center;
		height: 12em;
		width: 9em;
		margin: 0 1em 1em 0;
		border-radius: .3em;
	}

	.staff-container .tab .img{
		height: 9em;
		width: 100%;
		position: relative;
		border-radius: .3em;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.staff-container .tab .img i{
	    color: rgba(0,0,0, .1);
		font-size: 3em;
	}

	.staff-container .tab .img > img{
		height: 100%;
		width: 100%;	
	}

	.staff-container .tab .title > a:link{
		color: rgba(0,0,0,.8);
		font-size: .8em;
   		padding: .3em;
   		text-decoration: none;
	}

	.staff-container .tab .title > a:hover{
		color: rgba(0,0,0,.8);
	}

	.staff-container .tab .title > a:visited{
		color: rgba(0,0,0,.8);
	}

	.staff-container .tab .title > a:active{
		color: rgba(0,0,0,.8);
	}

	.staff-container .tab .body {
		width: 100%;
		height: 100%;
	}

	.staff-position{
		font-size: .7em;
   		padding: .3em;
	}

	.count-wrap{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		color: rgba(0,0,0,.5);
		font-size: .8rem;
		margin: 0;
		padding: 0;
	}

	.count-wrap > .row{
		flex-wrap: nowrap;
    	overflow-x: scroll;
		scrollbar-width: none;
	}

	.count-wrap .col-auto{
		padding: 0 !important;
		margin-left: .3em;
	}

	.count-wrap .col-auto:first-child{
		margin: 0 !important;
	}

	.count-wrap .count{
		font-weight: 600;
		margin-right: .3rem;
		color: rgb(0,0,0);
	    position: relative;
	}

	.count-wrap button{
		border: none;
		outline: none;
		background: transparent;
		margin: 0;
		cursor: pointer;
		line-height: 1;
		border-radius: .3em;
		padding: .3em;
	}

	.count-wrap button:hover{
		background-color: rgba(236, 236, 236, 0.7);;
	}


	.count-wrap > span{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin-right: 1em;
		font-weight: 400;
	}

	.count-wrap > span i{
		display: inline-block;
		margin-right: .3em;
	}

	.like-count{
		font-size: 1em !important;
		margin-right: .3em !important;
	}
	

	.like-btn{
		cursor: pointer;
	}
	
	.signin-btn{
	    padding: .3em 1em;
	    margin: 1em 0;
	    border-radius: .3em;
	    color: #fff;
	    cursor: pointer;
	}

	.signin-btn i{
		color: #fff;
		margin-right: .3em;
	}

	.cs-btn,
	.x-btn{	
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		border: 1px solid rgba(0,0,0,.1);
		padding: 0 .3em;
		border-radius: .3em;
		margin-right: 1em;
		cursor: pointer;
		line-height: .5;
		height: 1.7em;
		background-color: rgba(0,147,147,.1);
		color: rgba(0,0,0,.6);
		font-size: .8em;
		text-decoration: none;
	}

	.cs-btn:hover,
	.x-btn:hover{
		text-decoration: none;	
		color: #000;
		background-color: rgba(0,147,147,.3);
	}

	.cs-btn i,
	.x-btn i{
		font-size: .85em;
		display: inline-block;
		margin-right: .5em;
	}

	#inline-feeback.show{
		display: block;
	}

	#dialog-form.show{
		display: block;
	}

	/*Customized Bootstrap*/	
	.btn-primary,
	.btn-primary:focus,
	.btn-primary:active{
		/* background-color: rgba(0, 147, 147, .8) !important; */
		border: none;
	}
	

	/*Dope Slider*/

	/*
	.slider-container{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		overflow: hidden;
	}

	.slider-wrapper{
		width: 600px;
		height: 100%;
		overflow: hidden;
	}

	.inner-wrapper{
		position: relative;
		width: 500%;
		height: 100%;
		left: -100%;
	}

	.inner-wrapper.left{
		left: -100%;
	}

	.slide{
		width: calc(100% / 5);
		height: 100%;
		float: left;
		font-size: 100px;
		color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.slide img{
		height: 100%;
		width: 100%;
	}

	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 20px;
		position: absolute;
		cursor: pointer;
		border-radius: 50%;
		background-color: #fff;
	}

	.prev i, .next i{
		font-size: 1.5em;
	}

	.prev{
		left: 2%;
	}

	.next{
		right: 2%;	
	} */	

	/*Style Ads and Feeds Results Area*/
	#div-billboards{
		position: relative; 
		box-sizing: border-box; 
		display:none; 
		overflow: hidden; 
		width: 100%; 
		max-height: 15rem;
	}

	#div-billboards.show{
		display: block;
	}

	#div-billboards img:first-child {
		margin-top: 0em;
	}
		
	.billboard-link{
		position: absolute;
		left: 0;
		top: 50%;
		font-size: .8em;
		font-weight: 600;
		background-color: #3904a3a6;
		display: inline-block;
		width: 8em;
		overflow: hidden;
		text-align: center;
		padding: 0 .3em;	
	}
	
	.billboard-title a:link,
	.billboard-link a:link{
		display: block; 
		width:100%; 
		height:100%; 
		line-height:2.1; 
		text-decoration: none; 
		color: #fff; 
	}
	
	.billboard-title a:visited,
	.billboard-link a:visited{
		color: #fff;
	}
	
	.billboard-title a:active,
	.billboard-link a:active{
		color: #fff;
	}
	
	.billboard-title{
		position: absolute; 
		font-size: .8em; 
		font-weight: 500; 
		width:100%; 
		left: 0; 
		color:#fff; 
		top: 0; 
		padding: .5em; 
		display: block; 
		background: rgba(0,0,0,.3);
	}
	
	#div-billboards video{
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;	
	}
	.billboard-description{
		display: block; 
		padding: .3em; 
		font-size: .8rem; 
		top: 12px; 
		right: 2px; 
		width: 160px;
		float: left; 
		z-index: 3; 
		margin: 5px; 
		color: #fff;
		text-align: left;
	}
	
	#div-billboards img{
		height: 100%; 
		width: 100%;
	}

	#div-billboards audio{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		margin: 0;
		display: none;
	}


	.carousel, 
	.carousel-inner, 
	.carousel-item {
		height: 100%; 
		width: 100%;
	}
	
	.carousel-indicators, 
	.carousel-caption{
		z-index: 1;
		position: absolute;
		bottom: 1rem;
	}

	.carousel-caption{
		border-top-right-radius: .3em;
		border-bottom-right-radius: .3em;
		background-color: rgba(0,0,0,.8);
		padding: .3em;
		color: #fff;
		height: auto;
	}

	.carousel-indicators li{
		background: #fff;
		height: 10px;
		width: 10px;
		margin: 0 1em;
		border-radius: 50%;
	}
	
	.carousel-caption h5{
		color: #fff;
		margin: .3em;
	}
	
	#div-ad-wrap{
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
	}
	
	#div-links, 
	#div-adverts {
		box-sizing: border-box; 
		width: 100%; 
		overflow:hidden; 
		min-height: 0px; 
		display: none; 
		margin-top: 1em; 
		padding: 0;
		flex: 1 0 auto;
		align-self: stretch;
	}

	#div-links.show, 
	#div-adverts.show{
		display: block;
	}
	
	#div-adverts {
		margin-left: 0;
	}
	
	/* CRUD Forms */
	.js-manage-form .img{
		width: 120px;
		height: 120px;
	}
	
	/*Link Tabs*/
	.div-links{
		overflow: hidden;
		border-radius: .7em;
	    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
		margin-bottom: 1em;
		background: #fff;
	}

	.link-url{
		font-size: .8em;
		font-weight: 600;
		padding: .3em;
	}

	.link-posted-on{
		font-size: .8em;
		color: rgba(0,0,0,.5);
		line-height: 1.2;
		padding: .3em;
	}

	.link-dp{
		height: 1em;
		width: 1em;
		border-radius: 50%;
		margin: .3em;
	}

	.link-img{
		height: 10em;
		overflow: hidden;
	}

	.link-category{
		padding: .3em;
		font-size: smaller;
	}

	.link-img img{
		width: 100%;
		height: 100%;
	}

	.link-detail{
		font-size: .9em;
		padding: .3em;
	}

	.link-lpage{
		font-size: .8em;
		padding: .3em;
	}
	
	/*Market Item Tabs display Related Products*/
	.item-card-wrapper{
		display: flex;
		align-items: stretch;
		flex-flow: row nowrap;
		overflow-x: scroll;
		scrollbar-width: none;
		overflow-y: hidden;
		margin: .3em 0;
		max-height: 235px;
		position: relative;
		justify-content: flex-start;
	}
	
	.related-wrap{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		overflow-y: scroll;
		scrollbar-width: none;
		overflow-y: hidden;
		margin: .3em 0;
		position: relative;
		padding: .1em;
		box-sizing: border-box;
		width: 100%;
	}

	.item-card-wrapper::-webkit-scrollbar{
		width: 0px; 
		display: none;
	}
	
	.item-card-wrapper .item-card, 
	.item-card-wrapper .inline-container{
		flex-shrink: 0; 
		border: 1px solid rgba(0,0,0,.1); 
		background-color: #fff; 
		display: inline-block; 
		height: 100%; 
		font-size: 1rem; 
		margin: 0 5px 0 0; 
		overflow: hidden;
	}
	
	.item-card-wrapper .item-card{
		position: relative;
		width: 8em;
		height: auto;		
		border-radius: 0.5em;
		left: 0;
		transition: left 7s ease-in-out;		
	}

	.related-wrap > div{
		width: 100%;
	}

	.related-wrap .related-card{
		position: relative;
		margin-bottom: 1em;		
	}

	.related-card > .img-wrap{
		height: 10em;
		width: 10em;
		overflow: hidden;
		margin: 0;
		padding: .5em;	
	}
	
	.related-card > .img-wrap > img{
		height: 100%;
		width: 100%;
		border-radius: .3em;
	}

	.related-card > .title{
		font-size: .9em;
	}

	.item-card-wrapper .inline-container{
		width: 18em;
	}
	
	.item-card-wrapper .item-card:hover, 
	.item-card-wrapper .inline-container:hover{
		box-shadow: 1px 2px 3px #f6f6f6;
	}
	
	.item-card-wrapper .item-card a, 
	.item-card-wrapper .inline-container a{
		text-decoration: none;
	}
	
	.item-card-wrapper .item-card span, 
	.item-card-wrapper .inline-container span {
		display: block; padding: 0.1em;
	}
	
	.item-card-wrapper .item-card-img {
		position: relative; 
		width: 15em; 
		height: 10em;
	}
	
	.item-card-wrapper .item-card img, 
	.item-card-wrapper .inline-container img {
		position: relative; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%;
	}
	
	.item-card-wrapper .item-card-img-overlay{
		padding: 5px; 
		background-color: #000; 
		opacity: .9; 
		height: 70%; 
		margin-top: 25%;
	}
	
	.item-card-wrapper .item-card-title{ 
		display: block; 
		font-size: .65rem;
		font-weight: 500;
	}
	
	.item-card-wrapper .item-card-price{
		display: block; 
		font-size: .5rem;
		color: #f46f00;
	}
	
	.item-card-wrapper .saved-amount{
		position: absolute; 
		top: 1em; 
		left: 0; 
		color: #fff; 
		background: rgba(255,0,0,.7); 
		padding: .3em;
	}
	
	#item-related-column .prev-wrap, 
	#item-related-column .next-wrap{
		display: inline-block;
		position: absolute;
		top: 70%;
		transform: translateY(-50%);
		padding: .5em;
		border-radius: 50%;
		width: 2em;
		height: 2em;
		text-align: center;
		color: #fff;
		background-color: rgba(0,0,0,.7);
		line-height: 1.1;
		cursor: pointer;
	}
	
	#item-related-column .prev-wrap{
		left: 0;
	}
	
	#item-related-column .next-wrap{
		right: 0;
	}
	
	.inline-headers-billboards, 
	.inline-headers-links, 
	.inline-headers-ads{
		position: absolute; 
		top: 0; 
		left: 0; 
		z-index: 5; 
		padding: .3em; 
		box-shadow: 1px 2px 3px rgba(0,0,0,.3);
	}
	
	.inline-container .div-ads, 
	.inline-container .div-feeds{
		position: relative; 
		font-size: .7rem; 
		width: 100%; 
		text-align: left; 
		color: #535354; 
		text-decoration: none; 
		overflow: hidden; 
		background-color: #fff;
	}
	
	.item-card .div-img{
		height: 5rem; 
		width: 5rem; 
		position: relative; 
		overflow: hidden; 
		float:left;
	}
	
	.item-card .div-img img{
		height: 100%; 
		width:100%;
	}
	
	.item-card .div-body{
		height: 5rem; 
		width: 11rem; 
		overflow: hidden; 
		float:left; 
		padding: .3rem; 
		position: relative;
	}
	
	.adverts .no-match, 
	.links .no-match{
		font-size: .8rem !important;
		flex-flow: column nowrap !important;
	}

	.no-match img{
		height: 6em !important;
		width: 100%;
		margin: 0;
	}
	
	.adverts .div-ads, 
	.links .div-feeds{
		display: flex;
		flex-flow: column nowrap;
		align-items: stretch;
		position: relative; 
		margin-bottom: 1em; 
		font-size: .8rem; 
		border: 1px solid var(--border-color); 
		border-radius: .7em;
		text-align: left; 
		color: #535354; 
		text-decoration: none; 
		overflow: hidden; 
		background-color: #fff;
		height: auto;
		min-width: 100%;
	}

	.adverts .div-ads.no-match, 
	.links .div-feeds.no-match{
		background: linear-gradient(45deg, #b6e2fd, #75dbdb);
    	padding: .3em;
		border: none !important;
	}

	.adverts .div-ads.no-match .img, 
	.links .div-feeds.no-match .img{
		padding: 0;
	}

	.adverts .div-ads.no-match .body, 
	.links .div-feeds.no-match .body{
		padding: .3em !important;
		border-radius: .3em;
		background: #fff;

	}
	
	.adverts .div-ads .title, 
	.links .div-feeds .title{
		margin-top: 0;
		margin-bottom: .3em;
		padding: .3em;
	}
	
	.adverts .div-ads p, 
	.links .div-feeds p{
		margin-top: 0;
		margin-bottom: .3em;
		padding: .3em;
	}
	
	.adverts .img, 
	.links .img{
		width: 100%;
		height: 100%; 
		position: relative; 
		overflow: hidden; 
		margin: 0;
	}
	
	.adverts .img img, 
	.links .img img{
		height: 100%; 
		width:100%;
	}
	
	.adverts .body, 
	.links .body{
		font-size: .8em;
		height: auto; 
		width: 100%; 
		overflow: hidden; 
		float: left; 
		padding: .5em .3em; 
		position: relative;
	}
	
	.div-ads a, 
	.div-feeds a {
		font-weight: 600;
		text-decoration: none; 
		color: #7575c2;
	}
	
	.div-billb{
		text-align: center; 
		font-size: 1rem;
		text-align: center; 
		color: #535354; 
		text-decoration: none; 
		overflow: hidden;
	}
	
	.classified {
		display: block; 
		font-size: .7rem; 
		margin: 1px; 
		color:#009393;
	}
	
	.sub-category {
		display: block; 
		margin: 1px; 
		font-size: smaller;
	}

	.ad-title {
		display: block; 
		margin: 1px; 
		font-weight: 500;
	}

	.item-bookmark{
		position: absolute;
		top: 0;
		right: 0;
		padding: 0 .3em;
		cursor: pointer;
	}
	.ad-address {
		display: block; 
		margin: 1px;
	}
	.feed-source {
		display: block; 
		text-align: center; 
		background-color:#000; 
		margin: 5px 0 -1px 0; 
		padding: 2px; 
		color: #fff;}
	.feed-url {
		text-decoration: none; 
		color: rgba(0,0,0,.7);
	}
	.feed-title {
		margin-bottom: 2px; 
		display: block; 
		font-weight: 500;
	}
	.feed-detail {
		color: rgba(0,0,0,.7); 
		display: block;
	}

	#signup-feedback{
		color: #f00; 
		display:none; 
		font-weight: 500;
	}

	#signup-feedback.show{
		display: block;
	}

	#feed-subscribe-btn, 
	#ad-subscribe-btn{
		padding: .3em .5em;
		color: #fff;
		cursor: pointer;
		background: rgba(255,0,0,.8);
		font-size: 1rem;
		text-transform: uppercase;
		text-align: center;
		font-weight: 600;
		margin: .7em .3em;
		width: 10em;
	}
	
	#feed-subscribe-btn:hover, 
	#ad-subscribe-btn:hover{
		background-color: rgba(0,0,0,1);
	}
	
	#feed-subscribe-btn i, 
	#ad-subscribe-btn i{
		margin-right: .3em;
	}	

/*Reports Specific Styles */

	.content-label {
		display: inline-block; 
		color: #009393; 
		font-weight: 500; 
		vertical-align: top; 
		margin-right: 15px;
	}
	.review-results {
		border-left: 3px solid #ccc; 
		padding-left: 25px;
	}
	.reviews-label {
		display: inline-block; 
		height: 20px; 
		color: #009393; 
		font-weight: 500;
	}

/*Style About Pages*/
	#about-info{
		width: 80%; 
		margin: 0 auto; 
		padding: 20px;
	}
	
	#packages-info {
		margin: 10px auto; 
		width: 80%;
	}
	
	#about-info li, 
	#packages-info li{
		margin: 3px 3px 3px 20px; 
		text-indent: -10px;
	}
	
	.headers{
		background-color: #b0b0b0; 
		font-weight: 500; 
		height: 30px;
	}
	
	.tbl-desc {
		line-height :150%; 
		/*word-spacing :2px; 
		letter-spacing: 1px */
	}

	.tbl-labels {
		text-align: right; 
		font-weight: 500; 
		color: #535354; 
		width: 100px;
	}
	
	.right-buttons{
		float: right; 
		margin-left: 5px; 
		font-weight: 500; 
		margin-bottom: 5px; 
		padding: 3px; 
		border: 1px solid #009393; 
		border-radius: 2px;
	}
	
	.table-buttons{
		text-align: center; 
		margin: 5px auto; 
		width: 100px; 
		font-weight: 500; 
		padding:5px; 
		background-color: #009393; 
		border-radius:2px;
	}
	
	.hit-posted{ 
		color: #009393; 
		margin-top: 10px; 
		font-style: italic; 
		border: 1px solid #000; 
	}
	
	.hit-profession{ 
		background: rgba(0,0,0,.1); 
		color: #009393; 
		margin-top: 10px; 
		font-style: italic; 
		border: 1px solid #000; 
	}
	
	.hit-green{ 
		color: #009393; 
		margin-top: 10px; 
		font-style: italic; 
		border: 1px solid #000; 
	}
	
	.pics{
		width: 120px; 
		float: left; 
		margin:1px;
	}
	
	.pics img {
		display: inline; 
		width: 100px; 
		height: 100px; 
		margin: 1px;
	}
	
/*Style Games Classes*/
	.caineware-scheme{
		color: #009393; 
		font-weight: 500;
	}
	
	.game-words{
		padding:5px; 
		margin:2px; 
		width:200px; 
		float:left; 
		text-align:center; 
		font-weight: 500; 
		font-size: 1.2rem; 
		color: #888;
	}
	
	.game-correct{
		border:1px solid green;
	}
	
	.game-wrong{
		border:1px solid red;
	}
	
	.game-button-start{
		border-radius: 50px; 
		background-color: green; 
		display: block; 
		width: 50px; 
		height: 25px; 
		color: #fff; 
		float: left; 
		font-weight: 500; 
		text-align: center; 
		font-size: 1rem; 
		text-decoration: none;
	}
	
/*Style Links Classes*/
	.no-decoration{
		text-decoration: none;
	}
	
	.caineware-links {
		font-size: smaller; 
		float: left; 
		display: block; 
		margin: 2px 0; 
		padding: 2px; 
		color: #585b56; 
	}
	
	.caineware-links a {
		text-decoration: none; 
		color: #333333;
	}
	
	.caineware-links  a:hover{ 
		text-decoration: underline; 
		color: #009393;
	}
	
	.review-comments { 
		border-left: 1px solid #ccc; 
		padding-left: 25px; 
		background-color: rgba(0,0,0,.1);
	}
	
	.user-services, 
	.description-wrap {
		float: left; 
		width: 75%; 
		margin: 5px auto; 
		padding: 5px;
	}
	
	.profile-rating img{
		display:block; 
		height: 40px; 
		width: 80%; 
		margin: 0 auto;
	}
	
	.user-icon{ 
		height: 100%; 
		width: 100%; 
		border: 1px solid green;
	}
	
	.feedback-message{ 
		color: #009393; 
		display: none;
	}
	
	.update-feedback-message{ 
		color: #009393; 
		display: none;
	}
	
	.rev-header{
		color: #47403a; 
		padding-top: 5px;
	}
	
	#rev-corolleryx{ 
		color: #333333; 
		display: none;
	}
	
	.tbl-about{
		padding: 5px 10px; 
		border: 1px solid red;
	}
	
	
	/*Pagination Results*/
	#results-nav{
		margin: 1em 0;  
	}
	
	#results-nav .page-link:hover{
		background-color: #f46f00; 
		color: #fff;
	}
	
	.pagination .page-item{
		display: inline-block; 
		height: 2em; 
		width: 2em;  
		margin: .1em;
	}
	
	.page-item .page-link{
		display: inline-block; 
		background-color: #fff; 
		height: 100%; 
		width: 100%; 
		border: 1px solid rgba(0,0,0,.1); 
		text-align: center; 
		padding: .5em; 
		font-weight: 500; 
		line-height: 1; 
		text-decoration:none; 
		color: rgba(0,0,0,.5);
	}
	
	.page-item .page-link:hover{
		background-color: #ffcfcf;
	}
	
	.page-item .active-page-nav{
		background-color: #000; 
		color: #fff;
	}
	
	
	/* ------------------------------------------------------------------------------------------------
									User Dashboard
	--------------------------------------------------------------------------------------------------*/
	
	#dashboard{
		padding: 0 .3rem;
		justify-content: center;
		/* background-color: #e7e7e7; */
		background: linear-gradient(90deg, #fff6f6, #f1f4ff);

	}

	#dashboard > .container{
		min-height: 100vh;
		padding: 0 !important;
	}
	

	#dashboard .nav{
		font-size: .8rem;
		padding: 0 .3 0 0 !important;
		margin: 0 !important;
		background: #fff;
		padding: .3em;
		box-shadow: 3px 3px 9px #f1f1f1;
		border: 1px solid var(--border-color);
		border-radius: .3em;
	}

	#dashboard .nav .nav-link{
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		/* height: 4em; */
		min-width: 100%;
		/* line-height: 1.2; */
		text-decoration: none;
		padding: .3rem;
    	margin-bottom: .3em;
		transition: all .3s ease-in-out;
	}

	#dashboard .nav .nav-link .icon{
		display: flex !important;
		justify-content: center;
		align-items: center;
		height: 25px;
		width: 20px;
	}

	#dashboard .nav .nav-link .label{
		display: none;
		justify-content: start;
		align-items: center;
		width: 100%;
	}

	#dashboard .nav .nav-link .icon i{
		font-size: 1.5rem;
	}

	#dashboard .nav .nav-link .badge{
		display: none;
		position: absolute;
		right: .5em;
		font-weight: 500;
		color: #000 !important;
		width: -moz-fit-content;
		width: fit-content;
		background: #f8f8f8;
		border: 1px solid var(--border-color);
		border-radius: .3em;
		box-shadow: 1px 2px 3px rgba(0,0,0,.1);

	}

	#dashboard .nav .nav-link,
	#dashboard .nav i {
		color: #47403a;
	}

	#dashboard .nav .nav-link:hover {
		background-color: rgba(182, 182, 182, 0.3);
	}

	#dashboard .nav .active:hover {
		/*border-left: 3px solid rgb(244, 111, 0);*/
		background-color: rgba(0, 147, 147, .08);
	}

	#xdashboard .nav .active:hover i{
		color: #fff !important;	
	}

	#dashboard .nav .active {
		background-color: #575757 !important;
		color: #fff !important;
		border-radius: .3em !important;
	}

	#dashboard .nav .active *{
		color: #fff !important;
	}

	#xdashboard .nav .active .icon i,
	#xdashboard .nav .active .label{
		color: #fff !important;	
	}

	#dashboard .dashboard-header{
		background: #fff;
		margin: 0 .3em;
	}

	#dashboard > .tab{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		/*border: 1px solid #ccc;
		border-radius: 1em;
		padding: .3em;
		margin: 1em; */
	}

	#dashboard .tab > .count{
		display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 100%;
	    color: rgba(0,0,0,.7);
	    font-size: 1.5em;
	}

	#dashboard .tab > .title{
		display: flex;
	    justify-content: center;
	    align-items: center;
	    padding: .3em;
	}
	
	
	/* User Registration *************************************************************************/
	#register-nav{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		z-index: 10;
		position: relative;
	    bottom: 0;
	    border: 0;
	    font-size: .8em;
		margin-right: .3em;
	}

	#register-nav{
		justify-content: center;
	}

	#register-nav > button{
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		text-decoration:none;
		text-transform: uppercase;
		font-size: .9em;
    	padding: .5em 1em;
    	outline: none;
    	height: 3em;
    	position: relative;
		width: 12em;
		margin: 0;
		border-radius: 0;
	}

	#register-nav > button{
		background-color: #fff;
	}

		
	#register-nav > button:hover{
		border-bottom: 1px solid rgba(0, 0, 0, .03); 
	}

	#register-nav > .active{
		border-left: 3px solid rgb(244, 111, 0);
		padding-bottom: .4em;
	}
	
	#manage-wrapper{
		position: relative;
	    top: 1em;
	    width: 98%;
	    margin: 2em auto 0;
	    overflow: hidden;
	}
	
	#manage-screen{
		font-size: .9em;
	    /* height: calc(100vh - 50px); */
		/* overflow-y: auto; 
		background: #fff;*/
		border-radius: .3em;
	}

	#manage-screen .row{
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#manage-screen .create-btn{
		margin-left: 1em;
		font-size: .7rem !important;
		padding: .15rem .3rem !important;
		border-radius: 0.5rem !important;
	}

	#manage-dashboards li{
		display: flex;
		justify-content: end;
		align-items: center;
	}
	
	#manage-dashboards .count{
		font-weight: 600;
		margin-right: .3em;
	}

	#manage-screen header{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between !important;
		align-items: center;
		width: 100%;
		position: relative;
		margin-bottom: 1rem !important;
		/* border-radius: .3em; */
		border-bottom: 1px solid var(--border-color);
  		padding-bottom: .3em;
	}

	#manage-screen .form{
		padding: .3em;
		overflow: hidden;
	}

	#manage-screen .manage-tab{
		width: 100%; 
		display: none;
		padding: .3rem !important;	
	}

	#manage-screen .manage-tab section{
		font-size: .85rem;
	}

	#manage-screen .manage-tab.active{
		display: block !important;
	}

	#manage-screen .manage-tab button{
		display: flex;
		align-items: center;
  		justify-content: space-between;
		color: #fff;
		font-size: .7em;
		padding: .3em .5em;
		border-radius: 1em;
		border: none;
		outline: none;
		line-height: 1.5;
	}

	#manage-screen .detail{
		padding: .3em 0 !important;
    	line-height: 1.5;
		font-size: .85em;
	}

	#manage-screen > .active{
		display: block !important;
	}

	#manage-screen .side-menu{
		display: flex;
		justify-content: start;
		align-items: center;
		overflow-y: auto;
		min-width: 100%;
		margin: 0 0 1rem 0 !important;
		background: #fff;
		padding: .3em !important;
		border-radius: .3em;
		scrollbar-width: none;
	}

	#manage-screen .side-menu > li{
		font-size: .85rem;
		white-space: nowrap;
		padding: .3rem;
		margin-right: 1rem;
		border-radius: 0;
		border: none;
		width: -moz-fit-content;
		width: fit-content;
	}

	
	/*Image Viewer*/
	.img-viewer{
		position: relative;
		height: 400px;
		width: 600px;
	}

	.img-viewer img{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	/*Profile Account Settings*/
	#manage-screen > #div-staff{
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	#manage-screen > #div-about > .wrap:first-child{
		margin-top: 1em;
	}

	#manage-screen > #div-about > div .create-btn{
		padding: .3em .5em;
		width: auto;
		font-size: .8em;
	}

	#manage-screen .wrap{
		/* width: 100%; */
		padding: 1em;
		margin-bottom: 1em;
		border: 1px solid #e5e5e5;
    	/* box-shadow: 0 0 1px 1px #f9f9f9; */
	}

	/* #mobile-contacts,
	#fax-contacts{
		margin-right: .3rem;
	}

	#landline-contact,
	#email-contacts{
		margin-left: .3rem;
	} */

	#mobile-contacts .row,
	#landline-contact .row,
	#fax-contacts .row,
	#email-contacts .row{
		margin-bottom: .3em;
	}
	

	#manage-screen .column > .tab{
		width: 100%;
		padding: .3em.5em;
		border: 1px solid rgba(0,0,0,.1);
		margin-bottom: 1em;	
	}
	
	#div-contact-us > div{
		width: 100%;
	}

	#contacts > div,
	#div-business-hours > div,
	#physical-location > div,
	#map-address > div  {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	#map-location{
		height: 10em; 
		min-width: 100%;
		overflow: hidden;
	}

	#div-inquire{
		border: 1px solid #ccc; 
		border-radius: 5px; 
		float:right; 
		width:400px;
	}
	
	.list{
		display: flex;
		flex-flow: row nowrap;
		justify-content: start;
		align-content: center;
		position: relative;
		margin: .7em 0 !important;
	}

	.list > .check-icon{
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background-color: #fff;
		margin-right: .3em;	
	}
	
	.list > .check-icon i{
		color: #009393;
		font-size: .8em;
	}

	.list > .buttons{
		position: absolute;
		right: 0;
	}

	.list > .buttons i{
		margin-right: .3em;
	}
	
	.cart-buttons{
		width: 400px; 
		height:50px; 
		font-size: 1.2rem; 
		font-weight:bold;
	}
	
	.trend-tab{
		display: flex;
		flex-flow: row nowrap;
		border: 1px solid rgba(0,0,0,.125);
	}
	
	.trend-tab .img{
		width: 30em;
		/*height: 10em;*/
	}
	
	.trend-tab .img img{
		width: 100%;
		height: 100%;
	}
	
	.trend-tab .body{
		background-color: #fff;
		padding: .3em;
	}
	

	/*Exam Views Styles*/
	.exam-button{
		width: 30px; 
		height: 30px
	}
	
	.about-pages{
		margin: 10em auto; 
		font-size: 1.2rem;
	}

	/*Profile Account Styles*/
	#profile-wrap{
		font-size: .8em;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		margin: 0 3%;
		padding: 0 0 1em 0;
		/* min-width: 100% !important; */
		/* width: 100% !important; */
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		background: rgba(255, 255, 255, .8);
		border: 1px solid var(--border-color);
		overflow: hidden;
		z-index: 99;
	}

	#profile-wrap::before{
		content: '';
		filter: blur(1px);
		min-width: 100%;
		min-height: 100%;
		position: absolute;
	}

	#profile-wrap .count-wrap{
		justify-content: center;
	}
	
	#user-dp {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		position: relative;
		opacity: 1;
		overflow: hidden;
		width: 122px;
    	height: 122px;
		margin: 1em auto;
		padding: 0;
		text-align: center;
		border-radius: 50%;
		background-color: #fff;
	}

	#user-dp .avatar i{
		font-size: 3rem !important;
	}

	#user-dp button{
		outline: none;
		border: none;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f9f9f9;
	}

	#user-dp button i{
		color: rgba(0,0,0,.5);
		font-size: 3rem;
	}

	
	#user-dp img{
		height: 120px;
		width: 120px;
		border: 3px solid rgba(255,255,255,.8);
		border-radius: 50%;
		box-sizing: border-box
	}
	
	#user-details{
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		align-items: flex-start;
		margin: 0;
		font-size: 1rem;
		padding: 0;
	}

	#user-details #user-name{
		position: relative;
	}

	#user-details #user-name .btn-options-wrap{
		position: absolute;
    	right: .3em;
	}

	#user-details .counters{
		font-size: 1.5rem;
		margin: auto;
	}

	.no-data{
		color: #a7a7a7 !important;
	}

	.no-data-found{
		padding: 0;
		border: none;
	}

	/*Profile*/

	#user-details > *{
		text-align: center;
		margin-bottom: 0.3em;
		line-height: 1.2 !important;
		padding: 0 !important;
	}

	#user-name{
		text-align: left;
		font-size: 1.25em;
		line-height: 1.2;
		margin: .3em 0;
		padding: .3em 0;
	}
	
	#bold-rating{
		text-align: left;	
	}

	#bold-rating .rate-count{
		color: inherit;
	}

	#wallet-balance{
		position: absolute;
		right: .5em;
		bottom: 1em;
		color: #fff;
		border-radius: .3em;
		padding: .3em 1em;
		background-color: rgba(244, 111, 0, 1);
		font-weight: 800;
		box-shadow: .1px .1px 3px #000;
	}
	
	#edit-panel{
		background-color: #0f0; 
		display: none; 
		z-index: 999999;
		box-shadow: 1px 2px 3px #f9f9f9; 
		opacity: 1; 
		position: fixed; 
		top:30%; 
		margin: 0 auto; 
		min-height: 20%; 
		min-width: 50%; 
		padding: 1em;
	}

	#mainwrap.show{
		display: flex;
	}

	#edit-panel.show{
		display: block;
	}
	
	#feedback-panel{
		background-color: #fff; 
		display: none; 
		z-index: 999; 
		box-shadow: 1px 2px 3px #000; 
		opacity: 1; 
		position: fixed; 
		top: 10%; 
		left: 45%; 
		min-height: 5%; 
		min-width: 10%; 
		padding: 1em;
	}
	
	#profile-header-wrap{
		font-size: 1rem;
		position: relative;
		height: 12em;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 0.3em;
    	margin: 1em 0 0 0;
	}

	#social-links li{
		margin: 0 .3em;
	}

	#profile-header-wrap.no-banner{
		background: linear-gradient(45deg, #ff00235c, #4a89bfa8, #b8c6fd)
	}

	#profile-header{
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden; 
		/*background-color: rgba(0,0,0,.3); */
		min-width: 360px; 
		width: 100%; 
		min-height: 100%;
		filter: blur(.3px);
		padding: 0;
	}

	#profile-header img{
		width: 100%;
		height: inherit;
	}

	#profile-shadow{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 1;
		width: 100%;
		min-height: 260px;
		max-height: inherit;		
	}

	#profile-details-wrap{
		display: flex;
	    flex-flow: column nowrap;
	    align-items: center;
	    justify-content: flex-start;
		background-color: rgba(0,0,0,.1);
		margin: 0 auto;
		height: 15em;
		position: relative;
	}

	#manage-nav{
		margin-top: 15rem !important;
		font-size: .9rem;
		padding:  0 0 1em 0;
	}

	#manage-nav i {
	    display: inline-block;
	    margin-right: .3em;
	}

	#manage-nav .btn-link,
	#manage-nav .btn-link:hover {
		text-decoration: none;
	}

	#manage-nav > button{
		font-size: .85em;
		line-height: 1;
		margin: 0 .3em;
		padding: .3em 1em;
		height: 30px;
		border-radius: 3em;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#manage-nav > button,
	#manage-nav > button i{
		background-color: inherit;
		color: inherit;
	}

	#manage-nav > button:focus{
		box-shadow: none;
	}

	#manage-nav > button:hover,
	#manage-nav > .active:hover{
		background-color: var(--border-color) !important;
    	color: #000 !important;
	}

	#manage-nav > .active i,
	#manage-nav > .active .label{
		color: #fff;
	}

	#manage-nav > .active:hover i,
	#manage-nav > .active:hover .label{
		color: #000 !important;
	}

	#manage-nav > .active{
		background-color: #3e3e3e;
		color: #fff;
	}
	
	.contact-handle{
		display: flex;
	    justify-content: center;
	    align-items: center;
		font-weight: 500;
	    text-align: right;
	    padding: .3em;
		margin-right: .3em;
		font-size: .8em;
	}
	
	.staff-tab, 
	.item-tab{
		position: relative; 
		border: 1px solid rgba(0,0,0,.1); 
		background-color: #fff; 
		width: 17.5em; 
		display: inline-block; 
		margin: 0.5em 0.75em 0.5em 0; 
		border-radius: 0.5em; 
		text-align: center;
	}
	
	.staff-tab:hover, 
	.item-tab:hover{
		box-shadow: 1px 2px 3px rgba(0,0,0,.1);
	}
	
	.staff-tab a:link, 
	.item-tab a:link{
		font-weight: 500; 
		text-decoration: none; 
		color: rgba(0,0,0,.5);
	}
	
	.staff-tab a:visited, 
	.item-tab a:visited{
		color: rgba(0,0,0,.5);
	}
	
	.staff-tab a:hover, 
	.item-tab a:hover{
		color: rgba(0,0,0,.5);
	}
	
	.staff-tab a:active, 
	.item-tab a:active{
		color: rgba(0,0,0,.5);
	}
	
	.staff-tab img, 
	.item-tab img, 
	.item-tab video{
		width: 100%; 
		height: 100%; 
		vertical-align: middle; 
		border-style: none; 
		border-top-left-radius: 5px; 
		border-top-right-radius: 5px;
	}
	
	.staff-tab span, 
	.item-tab span{
		display: inline-block; 
		padding: 0.2em; 
		font-size: .75rem;
	}
	
	.dp-wrap {
		overflow: hidden; 
		margin-top: 5px;
	}
	
	
	#div-staff{
		text-align: center;
	}
		
		
   /*The Profile Gallery*/
		
	#image-gallery{
		width: 3000em; 
		height: 100px; 
		padding: 5px; 
		margin: 1px; 
		position: relative; 
		overflow-x: auto;
	}
	
	.xgallery {
		width: 3000em; 
		height: 100px; 
		padding: 5px; 
		margin:1px; 
		position:relative; 
		overflow-x: auto;
	}
	
	.gallery img {
		float:left; 
		margin-right: 1em; 
		width: 100px; 
		height: 100px; 
		border: 1px solid rgba(0,0,0,.1); 
		border-radius: 5px;
	}
	
	.xgallery a{ 
		display: inline-block; 
		padding: 2px; 
		margin:1px; 
		text-decoration: none; 
		line-height: 1;
	}
	
	.xmedia-pictures {
		background-color: #fff; 
		height: 112px; 
		width: 100%;
	}
	
	.ximg-container{
		position: absolute; 
		top:0; 
		left:0;
	}
	
	#img-nav-container{
		height: 15px; 
		position: static; 
		bottom: 2px; 
		left: 0;
	}
	
	.img-nav {
		display: inline-block; 
		height: 10px; 
		width: 10px; 
		border-radius: 50%; 
		margin: -10px 3px 3px 5px; 
		cursor: pointer; 
		background-color: #009393; 
	}
	
	.img-nav:first-child {
		margin-left: -5px;
	}
	
	.img-nav:hover{
		border: 1px solid #009393; 
		background-color: #fff;
	}
	
	.img-container-active{
		z-index: 333;
	}
	
	.img-nav-active{
		background-color: #333; 
		z-index: 333;
	}
	
	.user-services ul{
		list-style-type: square;
	}
	
	.description-wrap {
		border-bottom: 1px solid rgba(0,0,0,.1);
	}
	
	.description-wrap, 
	.user-services{
		margin-left: 10px;
	}
	
	.contact-us-headers{
		background: #000; 
		text-align: center; 
		font-weight: 500; 
		width: 100%; 
		color: #fff; 
		display: block; 
		height: 30px; 
		line-height: 30px;
	}
	
	.inline-label{
		display: inline-block; 
		border-top-left-radius: 5px; 
		border-bottom-left-radius: 5px; 
		font-weight: 500; 
		padding:5px; 
		background-color: #009393; 
		color:#fff; 
		margin-right:5px;
	}
	
	.week-days{
		font-weight: 500; 
		display: inline-block; 
		width:40px; 
		padding:5px;
	}
	
	.forename, 
	.surname, 
	.business-name, 
	.business-occupation{
		width:220px;
	}
	
	.edit-screen-textarea{
		width: 100%; 
		height: 100px;
	}
	
	.left{
		float:left;
	}
	
	.right{
		float:right;
	}
	#ellipsis-wrap{
		position: absolute;
		display: flex;
		flex-flow: column nowrap;
		top: 0;
		right: 0;
		text-align: right;
		transition: display 5s ease-in-out;
		transition: width 10s ease-in-out;
	}
	
	#ellipsis-wrap i{
		margin: 0 .3em
	}
	
	#ellipsis-wrap  > span{
		padding: .3em .5em;
		color: #fff;
		font-size: 1rem;
		font-weight: 100;
		background-color: #009933;
		cursor: pointer;
		margin-bottom: .1em;
	}
	
	#edit-profile-btn, 
	#edit-banner-btn{
		display: none;
		width: 0;
	}
	
	#ellipsis-wrap:hover > #edit-profile-btn, 
	#ellipsis-wrap:hover > #edit-banner-btn{
		display: block;
		width: 100%;
	}
	
	.contact-handle i{
		font-size: 1.5em;
		margin: .1em;
		color: rgba(0,0,0,.5);
	}
	
	.social-link {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.social-link li{
		padding: .3em 0;
		min-width: 100%;
	}

	.social-link a{
		display: flex;
		justify-content: start;
		align-items: center;
		font-size: inherit;
		height: 100%;
		min-width: 100%;
		/* color: #009393; */
		text-decoration: none;
	}

	.social-link a i{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 1em;
		margin-right: .3em;
		font-size: 1.5em;
	}
	
	.social-link a:hover,
	.social-link a:hover i{
		color: #f46f00;
		text-decoration: none;
		border: none;
	}

	
	
	.staff-tab {
		width: 12em; 
		margin: 0.5em 0.75em;
	}
	
	.staff-tab span{
		padding: 1em 0.2em;
	}
	
	.dp-wrap {
		margin-top: 5px;
	}
		
	#vocation {
		font-size: 1em; 
		padding: .3em 0;
	}
    
	#connect{
		font-size: 1rem;
		color: #fff;
	}

	#connect p{
		margin: 5px 0; 
		padding: .3em;
	}
	
	.my-div {
		/* Set the background image URL */
		background-image: url('http://search.io/public/uploads/img/pexels-rodolfo-quirós-2219024.jpg');
		/* Set background size (cover, contain, etc.) */
		background-size: cover;
		/* Set background position (center, top, left, etc.) */
		background-position: center;
		/* Set other styles (width, height, padding, etc.) */
		width: 100%;
		padding: 20px;
		/* Add any other styles you want */
		background: linear-gradient(45deg, #ff00ff2b, #00808017);
	}

	#home-tag-line{
		display: flex;
		margin: 1rem 0; 
		text-align: center;
	}

	#community-services li{
		padding: 3em 1em;
	}

	#community-services li:nth-child(even){
		background-color: #ebebeb82;
	}

	#discover-your-community{
		background-image: url('/uploads/img/community_2.jpg');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		position: relative;
		margin-top: 3rem !important;
		background-color: var(--primary-color);
		background-blend-mode: darken;
	}

	#discover-your-community *{
		color: #fff !important;
	}

	#discover-your-community::before{
		content: '';
		position: absolute;
		top: 0;
    	left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,.6);
		z-index: -1;
	}

	
	#contacts{
		position: relative; 
		z-index: 8;
	}
	
	#div-profile{
		min-height: 30em; 
		padding:1em 0; 
		width: 100%; 
	}

	#div-reviews > div{
		width: 100%;
	}
	
	#div-business-hours table{
		width: 100%;
	}

	#div-business-hours table > tbody > tr:nth-child(odd){
		background-color: rgba(0,0,0,.03);
	}

	#div-business-hours table > tbody > tr:nth-child(even){
		background-color: #fff;
	}

	#div-business-hours .days{
		width: 150px;
	}

	
	#div-services textarea{
		height:50px;
	}
	
	#div-contact { 
		line-height: 20px;
	}
	
	#div-picture, 
	#div-video, 
	#div-audio, 
	#div-file {
		padding: 10px; 
		margin: 10px 0;
		}
	
	#div-audio, 
	#div-file , 
	#div-video {
		width: 333px;
	}

	/*Gallery Page*/
	#my-gallery{
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#my-gallery > .tab{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		width: 12em;
		border-radius: .3em;
		border: 1px solid rgba(0,0,0,.3);
		margin: .3em;
	}

	#my-gallery .img{
		min-height: 10em;
		height: 10em;
		width: 100%;
		margin: 0;
	}

	#my-gallery .img > img{
		width: 100%;
		height: 100%;
	}

	#my-gallery .form-buttons{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		margin: .3em 0;
		width: 100%;
	}

	#my-gallery button{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: .8em;
		max-height: 2em;
		width: 95%;
		margin: .3em;
		font-weight: 400;
	}

	#my-gallery .error-bg{
		background-color: #c01323;
	}

	#my-gallery button > i {
		margin-right: .3em;
	}
	
	/*User Review Styles*/
	#star-rating{
		font-size: 1rem;
	}
	#star-rating i{ 
		display: inline-block;
		cursor: pointer;
		font-size: 1.2em;
	}
	#div-user-rating a{
		text-decoration: none;
	}
	
	#div-user-rating p{
		width: 100%;
	}
	
	#div-user-rating select{ 
		width:100px; 
		height: 30px; 
		margin: 2px 0;
	}
	
	#div-user-rating textarea{ 
		width:350px; 
		height: 200px;
	}
	
	#div-reviews-wrapper{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	#review-wrap{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		font-size: 1rem;
	}

	#review-wrap > div{
		width: 49%;
		padding: 0;
	}
	.review-results{
		min-height: 100px;  
		width: 100%; 
		position: relative; 
		padding: 5px; 
	    background-color: #f9f9f9; 
		overflow: hidden;
	}
	
	.comment-results{
		background-color: #fafafa;  
		min-height: 100px; 
		width:600px; 
		overflow: hidden; 
		margin: 2px 0 2px 85px; 
		border: 1px solid rgba(0,0,0,.1);
	}
	
	.review-results > p, 
	.comment-results > p{
		margin-left: 80px; 
		padding: 5px;
	}
	
	.my-avatar{
		width: 80px; 
		height: 80px; 
		margin-left: 10px; 
		display: block;
	}
	
	.my-avatar > img{
		width: 100%; 
		height: 100%;  
		border-radius: 50%;
	}
	
	.reviewer-label, 
	.reviewer-label{
		border-top: 1px solid rgba(0,0,0,.1); 
		border-bottom: 1px solid rgba(0,0,0,.1);
	}
	
	.review-post-screen, 
	.comment-post-screen{
		display:none; 
		width: 100%; 
		background-color: #fff; 
	}
	
	.review-post-screen form, 
	.comment-post-screen form{
		background-color: #fff; 
		display: none; 
		width: 100%; 
		overflow: hidden;
	}
	
	.review-post-screen textarea, 
	.comment-post-screen textarea{
		display:block; 
		width: 100%; 
		height: 100px;
	}
	
	.confirm-delete-post{
		font-weight: 500; 
		color: #f00;
	}
	
	.edit-comment-textbox{
		width: 565px; 
		min-height: 50px;
	}

	.review-tablet{
		width: 88%; 
		margin-top: -5px; 
		display: inline-block;
	}
	
	.awarded-rating{
		font-weight: inherit;
	}
	
	.comment-on-comment-form{
		display:none;
	}
	
	.comment-on-review-form{
		display:none;
	}
	
	.review-avatar{
		margin: 0 10px; 
		width: 50px; 
		float:left;
	}
	
	.comment-avatar{
		margin: 0 10px; 
		width: 50px; 
		left:2px; 
		float:left;
	}
	
	.review-tablet{
		width:95%; 
		padding: 2px; 
		display: inline-block;
	}
	
	.more-comments-block{
		display:none;
	}
	.comment-tablet{
		width:85%; 
		padding: 2px; 
		display: inline-block;
	}

	/*User Dashboard*/
	/* .side-menu{
		flex-direction: column;
		display: flex;
		justify-content: start;
		align-items: start;
	} */

	.side-menu div{
		cursor:  pointer;
		padding:  1em .3em;
	}

	#my-wallet-balance{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-end;
		align-items: flex-end;
	}


	#my-wallet-balance .title,
	#my-wallet-balance .count{
		display: flex;
		justify-content: flex-end;
		padding: .3em;
	}

	.count #wallet{
		font-size: 1.5em;
		font-weight: 600;
	}

	.col-md-2.side-menu{
		padding: 0;
	}

	.col-md-2.side-menu .manage-btn{
		width: 100%;
		display: flex;
		justify-content: start;
		align-items: center;
	}


	.side-menu .active{
		border-bottom: 3px solid #da0a0a !important;
	}

	.side-menu-screen{
		/*background: #fff;*/
		border-radius: 1em;
		padding: 0;
		min-width: 100%;
		height: 100%;
	}

	.side-menu-screen > header{
		/* padding: 1em 0; */
		margin-bottom: 1em;
		border: none !important;
	}

	.side-menu-screen .title{
		font-size: 1.2rem;
	}

	.side-menu-screen p{
		margin-bottom: 1em;
		padding: 1em 0;
		font-size: 1em;
	}

	.side-menu-screen table{
		width: 100%;
	}

	/*Admin Dashboard*/
	#admin-tasks{
		width: 100%;
	    display: flex;
	    justify-content: space-between;
	}

	#admin-tasks > .tab > .links{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#admin-tasks .links > a{
		display: block;
	    padding: .3em;
	    line-height: 1.2;
	    text-decoration: none;
	    font-size: 1.2em;
	}

	.create-btn{
		font-size: 1em !important;
		padding: .3em 1em !important;
		max-width: 9em;
	}

	.filter-list-wrap{
		border-radius: 3em;
		border: 1px solid var(--border-color);
		height: 35px !important;
	}

	.filter-list{
		position: relative;
		background-color: #fff;
		border-radius: 1em;
		padding: 0;
		overflow: hidden;
		height: 100% !important;
	}

	.filter-list > div{
		height: 100%;
	}

	.filter-list input[type="text"]{
		border: none;
		height: 35px;
		min-width: 100%;
		padding: .3em .5em;
	}

	.filter-list i{
		display: block;
		font-size: 1.2rem;
	}

	.filter-list i::before{
		line-height: 2.25;
	}

	#location-list{
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;
		align-items: flex-start;
		min-width: 100%;
	}

	.category-list{
		margin-bottom: 1em;
		width: 100%;
		padding: 0;
	}

	.sub-list,
	.sub-list .item-list{
		display: none;
		transition: all 1s ease-in-out;
	}

	.sub-list.show,
	.sub-list .item-list.show{
		display: block;
		min-width: 100%;
	}

	.show-sub > .sub-list .title{
		padding-left: 1em;
	}

	.show-sub > .sub-list,
	.show-sub > .item-list{
		display: block !important;
		width: 100%;
	}

	.category-list form{
		padding: 1em 0;
	}

	.category-list form > input{
		padding: .3em;
		margin: 1em 0;
	}
	
	.category-list p{
		padding: .3em;
	}

	.category-list .tab{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	    margin: 0;
	    border-radius: 0;
	}

	.category-list header{
		background-color: rgba(0,0,0,.01);		
	}
	
	.sub-list,
	.item-list > .item{
		width: 100%;
	}

	.sub-list > .tab > .row{
		background-color: #f9f9f9;
	}

	.sub-list > .tab:first-child{
		border: none;
	}
	
	.sub-list > .tab header{
		background-color: rgba(0,0,0,.01);
	}

	#classified-list,
	#subclassified-list,
	#itemclassified-list{
		width: 100%;
	}

	.town-list,	.item-list > .item{
		padding: 1em .3em;	
	}
	
	
	/*Style Chats Screen Functionality*/
	.recent-tablet{
		overflow:hidden; 
		background-color: #585b56; 
		display: block; 
		margin: 2px auto; 
		box-shadow: 1px 1px 2px #888;
	}
	
	.recent-tablet img{
		margin: 5px; 
		width: 70px; 
		background-color: #585b56; 
		height: 70px; 
		float:left;
	}
	
	.recent-tablet p{
		margin: 2px 2px 2px 80px; 
		color: #fff;
	}
	
	.chat-tablet a {
		color: #f00;
	}
	
	.chat-tablet a:hover {
		color: #009393; 
		text-decoration: underline;
	}
	
	.chat-tablet-head{
		overflow: hidden; 
		background-color: #585b56; 
		text-align: left; 
		margin: 2px auto; 
		font-weight:bold; 
		font-size: 1.2rem;
	}
	
	.chat-tablet-head img{
		margin-right: 5px; 
		width: 4rem; 
		height: 4rem; 
		float:left;
	}
	
	.chat-tablet-head p{
		margin-left:80px;
	}
	
	.chat-tablet-head a, 
	.recent-tablet a {
		color: #fff; 
		text-decoration:none;
	}
	
	.chat-message-count{
		opacity: .8; 
		color: #c1c1c1;
	}
	
	.time-difference-meta{
		text-align:right; 
		font-weight: normal; 
		color: rgba(0,0,0,.1); 
	}
	
	.text-mate-occupation{
		color: #fff;  
		font-weight: normal; 
		font-size: smaller;
	}
	
	.text-last-message{
		color: #fff; 
		font-weight: normal; 
		font-style: italic;
	}
	
	.text-mate-name{
		color: #fff; 
		font-weight: 500;
	}
	
	.you-chat, 
	.them-chat {
		border-radius: 2px; 
		width: 80%; 
		padding: 5px; 
		overflow: hidden; 
		margin: 2px; 
		border:1px solid rgba(0,0,0,.1); 
		box-shadow: 1px 1px 2px #888;
	}
	
	.you-chat{
		float:right; 
		background-color: #d9fec6;
	}/*Chats sent by you.*/
	
	.them-chat{
		float:left; 
		background-color: #fff;
	}/*Chats sent by the other party.*/
	
	.who-chat{
		color: #585b56; 
		width: 100%; 
		margin-top: 5px; 
		padding: 5px; 
		font-size: smaller;
	}
	
	/*Connection Tablets*/
	.connect-tablet{
		display: block;
		color: #fff; 
		background-color: rgba(0,0,0,0.125);  
		overflow:hidden; 
		width: 100%;
	}
	
	.user-handle{
		font-weight: 500; 
		font-size: 1.2rem; 
		color: #fff; 
		margin-top:2px;
	}
	
	.connect-tablet a:link, 
	.connect-tablet a:visited, 
	.connect-tablet a:hover, 
	.connect-tablet a:active{
		color: #fff; 
		text-decoration: none;
	}
	
	.connect-tablet img{
		margin-right: 5px; 
		width: 100px; 
		height: 100px; 
		float: left;
	}
	
	.connect-tablet p {
		margin-left: 100px; 
		overflow: hidden;
	}
	
	/*Media Styles*/
	.media-checkbox{
		width: 12px; 
		height: 12px;  
		margin: 2px 0; 
		vertical-align: -2.4px;
	}


	.nav-button-links{
		text-decoration: none;
	}
	
	
	.media-tablets {
		margin:2px; 
		width:200px; 
		height:200px; 
		float:left; 
		overflow:hidden; 
		position: relative;
	}
	
	.media-img {
		margin-top: 0px; 
		width: 200px; 
		height: 200px;
	}
	
	.media-title-caption {
		z-index:9; 
		opacity: .7; 
		text-align: center; 
		color: #fff; 
		background-color: #000; 
		position: absolute; 
		top: 0; 
		width: 100%; 
		height: 60px; 
		overflow: hidden;
	}
		
	.censored-hits{
		background-color: rgba(0,0,0);
		display: inline-block; 
		height: 15px; 
		margin: 1px;
	}
	
	button > img {
		height: 15px; 
		width: 14px; 
		margin-right: 1px;
	}
	
	.left-margin-10px {
		margin-left: 10px;
	}
	
	.action-numbers{
		margin: 0 10px; 
		font-size: .85rem; 
		vertical-align: 2px; 
	}
	
	.display-none{
		display:none;
	}

	/*Style Feedback Classes*/

	#feedback-cover{
		display:none; 
		width:100%; 
		height:100%; 
		top:0; 
		left:0; 
		background-color: rgba(0,0,0,.3); 
		z-index:800; 
		position:fixed; 
		opacity:0.7;
	}
	
	#feedback-screen{
		display:none; 
		background-color:#fff; 
		width:500px; 
		top: 30%; 
		left: 32%; 
		color:#000;  
		position: fixed; 
		z-index:9999; 
		box-shadow: 1px 1px 3px #000;
	}

	#feedback-cover.show,
	#feedback-screen.show{
		display: block;
	}
	
	#feedback-screen h2{
		background-color: #009393; 
		color: #fff; 
		padding: 3px 5px;
	}
	
	#feedback-btn{
		background-color: #009393; 
		font-weight: 500; 
		border-radius: 5px; 
		text-transform: uppercase; 
		float: right; 
		margin: 5px; 
		padding: 10px 15px;
	}
	
	.red-highlight{ 
		color: #742e2e; 
		font-weight: 500; 
		font-size: smaller;
	}
	.green-highlight{ 
		color: #009393; 
		font-weight: 500;  
		font-size: smaller;
	}
	
	/*Style Visual Effect Classes*/
	.em{
		background-color: #ff0; 
		border-top: 1px solid #000; 
		border-bottom: 1px solid #000; 
	} /*Work this out, ideally, it was supposed to change hits' background*/
	
	.class-hr{ 
		width: 90%; 
		color: #fff;
	}
	
	.menu-hr{
		border-bottom: 1px solid rgba(0,0,0,.1);
	}
	
	.menu-numbers{
		float: right; 
		border-radius: 5px; 
		width:20px; 
		height: 20px; 
		text-align: center; 
		margin-top: 2px;  
		line-height: 20px; 
		background: #009393; 
		color: #fff;
	}

	/*Style Signup or User Login Items*/
	#div-signup-wrapper {
		padding: 5px; 
		min-height: 200px; 
		position: relative; 
		width:400px; 
		margin: 50px auto;
	}
	
	#div-signup-wrapper input {
		margin: 3px;
	}/*check for this element*/
	
	#div-signup-wrapper form { 
		width: 100%;
	} /*check for this element*/
	
	#div-login, 
	#div-passwordreset, 
	#div-passwordrequest{
		padding: 1em; 
		width: 70%; 
		border-radius: 5px; 
		margin: 1rem auto; 
		border: 1px solid rgba(0,0,0,.1); 
		background-color: #fff;
		margin-bottom: 5em;
	}
	
	#div-signup-personal input[type=text], 
	#div-signup-user input[type=email],
	#div-signup-personal input[type=password]{
		border: none; 
		border-bottom: 3px solid rgba(0,0,0,.1);
	}
	#div-login h3 {
		display: inline-block; 
		font-size: 1.5rem; 
		border-bottom: 3px solid #009393;
		margin: 0 0 1.5em 0;
		padding: .5em 0;
		color: rgba(0,0,0,.5);
	}
	
	.tab-btn{
		display: inline-block; 
		position: relative; 
		width: 25px; 
		height: 25px; 
		margin: 0 .1em 0 0;
	}
	
	.tab-btn span{
		position: absolute; 
		top: -2rem; 
		font-size: .7rem; 
		display: none; 
		min-width: 120px; 
		width: auto; 
		background: rgba(0,0,0,1); 
		color: #fff; 
		padding: .5em 0; 
		text-align: center; 
		border-radius: .5em; 
		margin: 0 auto; 
		opacity: 0; 
		transition: 0.6s opacity;
	}
	
	.tab-btn span button{
		display: block;
	}
	
	.tab-btn span:after{
		content: ''; 
		width: 10px; 
		height: 10px; 
		position: absolute; 
		bottom: -5px; 
		background: rgba(0,0,0,1); 
		z-index: -1; 
		left: 10%; 
		transform: translateX(-50%) rotate(45deg);
	}
	
	.tab-btn:hover{
		background-color: #f46f00;
	}
	
	.tab-btn:hover > span{
		display: block; 
		opacity: .8;
	}
	
	
	.inline-wrap{
		width: 80%; 
		position: relative; 
		margin: 0 auto; 
		background-color: red;
	}

	.inline-select-wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-flow: row nowrap;
	}
	
	.inline{
		position: absolute;  
		top: 0;
	}
	
	#signup-slider{
		width: 40%; 
		left: 0;
	} 
	
	#div-account-screen {
		position: relative; 
		border-radius: 1em; 
		margin:2% auto 5em auto;
		overflow: hidden;
		height: auto;
	}

	#div-account-screen .black-overlay-screen{
		z-index: -1;
	}
	
	#div-account-screen #manage-nav, 
	#div-account-screen #manage-screen,
	#div-account-screen #manage-screen .manage-tab{
		position: relative; 
		z-index: 10; 
		border: none;
	}
	
	#div-account-nav .active{
		font-weight: 500;
	}
	
	#div-account-screen #manage-screen .manage-tab .nav-link a:link ,
	#div-account-screen #manage-screen .manage-tab .nav-link a:visited ,
	#div-account-screen #manage-screen .manage-tab .nav-link a:hover{
		color: #fff;
	}
	
	#div-account-screen .select-location{
		line-height: 1; 
		font-size: .8rem; 
		width: 10em; 
		margin: 0 .3em 0 0;
	}
	
	.active-account{
		display: block;
	}
	
	#div-why-signup {
		float: left; 
		font-size: 1rem; 
		min-height: 200px; 
		position: relative; 
		width: 500px; 
		padding: 5px;
	}
	
	#div-why-signup h2{
		text-align:left; 
		font-size: 2.25rem;
	}
	
	#div-why-signup ul{
		margin-left: 10px;
	}
	#div-why-signup li{
		text-indent: 2px; 
		font-size: 1.6rem; 
		margin:2px 2px;
	}

	.about-services{
		margin-right: 5px; 
		height: 100px; 
		width: 100px; 
		float: left; 
		padding: .3em;
	}
	
	.setting-block{
		width: 100%; 
		display: block; 
		overflow: hidden; 
		margin: 2px 0;
	}
	
	/*Style Adverts, Products and Contacts*/
	#div-related{
		font-size: 1rem;
	}

	#div-related .img,
	#div-related .title,
	#div-related .posted,
	#div-related .count-wrap{
		margin: 0;
		padding: 0;
		
	}

	#div-related .img img{
		width: 100%;
		height: 100px;
	}

	#div-related,  
	#div-contact-details{
		position: relative; 
		width: 100%;  
		margin: 1px; 
		overflow: hidden;
	}
	
	#div-contact-details a, 
	#billboard-related-info {
		text-decoration: none; 
		color: rgba(0,0,0,.65);
	}
	
	#div-contact-details a:hover, 
	#billboard-related-info a:hover{
		text-decoration: underline; 
		color: #009393;
	}
	
	#div-related ul, 
	#billboard-related-info ul, 
	#div-contact-details ul {
		list-style: none;
	}

	.user-services li{
		list-style:none; 
		margin-left:10px;
	}
	
	#div-current-adverts{ 
		border: 1px solid green;
	}


	.profile-img{
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		border-radius: 50%;
		background-color: #fff;
	}

	.profile-img img,
	.profile-img .avatar {
		min-width: 60px;
		width: 60px;
		min-height: 60px;
		height: 60px;
		border-radius: 50%;
		/* background-color: #fff; */
		/* border: 3px solid rgb(244, 111, 0); */
	}

	.profile-img .avatar{
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--border-color);
	}

	.profile-img .avatar i{
		color: #999 !important;
		font-size: 1.5rem;
	}
	
	#div-user-menu {
		float: left; 
		height: 40px; 
		line-height: 40px; 
		font-weight: 500; 
		text-align: left;
		width: 400px; 
		padding: 2px;  
		position: absolute; 
		top: 50px; 
		right: 20px;
	}
	
	.menu-item{
		display: inline; 
		font-weight: 500; 
		color: #fff; 
		float: left; 
		margin-left: 15px; 
		margin-right: 15px;
	}
	
	.sub-menu-item{
		display: none;
	}
	
	#div-user-menu a{
		text-decoration: none; 
		font-weight: 500; 
		color: rgba(0,0,0,.3); 
	}
	
	#div-user-menu li:hover{
		color: #009393;
	}
	
	.ad-image {
		border: 1px solid rgba(0,0,0,.3); 
		margin-left: 2px; 
		height: 120px; 
		width: 180px; 
		float: left; 
	}

	/*Style Market, Product, Classifieds and Billboard Screens*/
	#column-wrap{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		margin: 1em auto;
		min-width: 100%;
	}
	
	#column-wrap h5{
		margin: 0;
	}
	
	#item-column, 
	#item-related-column{
		display: flex;
		flex-flow: column nowrap;
		position: relative;
		overflow: hidden;
		overflow: hidden;
		padding: .7em;
	}

	#item-column > div{
		min-width: 100%;
	}

	#item-column > #item-tab,
	#item-column > #comment-section,
	#item-column > #contact-info{
		border-radius: .3em;
		margin: 0 0 1em 0;
		padding: 0;
		overflow: hidden;
	}

	#item-column > #item-tab{
		border: 1px solid rgba(0,0,0,.1);
	}

		
	#item-column > #item-tab > .item-date-posted{
		padding: 0 .3em;
	}

	.related-card > div{
		margin: 0 .3em;
		padding: 0;
	}
	
	.related-card > .title > a:link{
		display: inline-block;
		font-size: 1em;
		font-weight: 600;
		padding: .3em 0;
		text-decoration: none;
		color: #f46f00;
	}

	.related-card > .title > a:visited{
		color: #f46f00;
	}

	.related-card > .title > a:hover{
		color: #f46f00;
		text-decoration: none;
		border: none;
	}


	.related-card > .title > a:active{
		color: #f46f00;
	}
	
	.related-card > .count-wrap{
		margin: .3em;
	}	
	#item-related-column .item-card span{
		position: absolute;
		top: 6em;
		background-color: rgba(0,0,0,.8);
	}

	#item-tab{
		border-top-left-radius: 1em;
		border-top-right-radius: 1em;
		overflow: hidden;
	}

	.item-detail-wrap{
		padding: 0 .3em;
	}
	
	#item-image-column, #item-detail-column{
		width: 100%;
	}	

	#item-image-column{
		/*
		display: flex;
		flex-flow: row nowrap; */
		height: 25em;
		overflow: hidden; 
		background-color: rgba(0, 0, 0, .1);
		position: relative;
	}
	#item-image-column::after{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to right, #0000006e, transparent, transparent, #0000006e);
    	z-index: -1;
	}

	#item-image-column .slider-container{
		margin: 0;
	}
	
	#item-image-column img{
		width: 100%;
		height: 100%;
	}
	
	#item-image-column audio{
		position: absolute;
		left: 0;
		bottom: 0;
	}

	#item-image-column video{
		width: 100%;
		height: 100%;
	}

	#item-image-column #main-img img{
		border: 1px solid rgba(0,0,0,.1); 
		height: 100%; 
		width: 100%;
	}
	#item-image-column .item-card-wrapper{
		height: 4em;
		bottom: 0;
		margin: 0;
		padding: .3em 0;
	}
	#item-image-column .item-card{
		border: none;
		width: 5em;
	}
	
	#item-image-column .item-card:hover{
		border: 1px solid rgba(0,0,0,.3);
		box-shadow: none;
		width: 5em;
	}
	
	.item-img-container{
		position: absolute; 
		top:0; 
		left:0;
	}

	#item-img-nav-container{
		height: 15px; 
		position: absolute; 
		bottom: 2px; 
		left: 0;
	}
	
	.item-img-nav {
		display: inline-block; 
		height: 10px; 
		width: 10px; 
		border-radius: 50%; 
		margin: -10px 3px 3px 5px; 
		cursor: pointer; 
		background-color: #009393; 
	}
	
	.item-img-nav:first-child {
		margin-left: -5px;
	}
	
	.item-img-nav:hover{
		border: 1px solid #009393; 
		background-color: #fff;
	}
	
	.item-img-container-active{
		z-index: 333;
	}
	
	.item-img-nav-active{
		background-color: rgba(0,0,0,.3); 
		z-index: 333;
	}
	
	#item-info{
		line-height:1.5; 
		font-size: .9em;
	}
		
	#item-info > .location{
		border-top: 1px solid rgba(0,0,0,.1);
		border-bottom: 1px solid rgba(0,0,0,.1);
	}
	
	#item-info p{
		font-size: .8rem;
	}
	
	.item-date-posted{
		display: block; 
		color: rgba(0,0,0,.5); 
		font-size: .8rem;
		margin: .3em 0;
		padding: .3em .15em;
	}
	
	.item-date-posted i{
		margin-right: .3em;
	}
	
	.item-specs{
		margin: 1em 0;
	}
	
	.item-specs span{
		display: inline-block; 
		border: 1px solid rgba(0,0,0,.1); 
		margin: 0 .2em 0 0; 
		line-height: 1; 
		font-size: .8rem; 
		padding: .5em; 
		border-radius: 1em; 
		box-shadow: 1px 2px 3px #f9f9f9; 
		background-color: #fff;
	}
	
	.item-price{
		color: #f46f00;
	}
	
	.item-title{
		position: absolute; 
		font-size: 1rem; 
		font-weight: 500; 
		width:100%; 
		left: 0; 
		color:#fff; 
		top: 0; 
		padding: .5em; 
		display: block; 
		background: rgba(0,0,0,.3);
	}
	
	.initial-price{
		text-decoration: line-through; 
		padding: .3em; 
		color: rgba(0,0,0,.5);
	}

	/*Comment Sections*/
	.comment-wrap{
		display: flex;
		flex-flow: column nowrap;
		border: 1px solid rgba(0,0,0,.1);
		margin-bottom: 1em;
	}

	.comment-wrap > div{
		width: 100%;
	}
	
	.user-wrap{
		display: flex;
		flex-flow: row nowrap;
		border: 1px solid rgba(0,0,0,.1);
	}

	.user-dp{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user-info-wrap{
		display: flex;
		flex-flow: column nowrap;
		border: 1px solid rgba(0,0,0,.1);
	}

	.user-info-wrap > div{
		min-width: 100%;
	}

	.comment-btn-wrap{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	/*Contact Info*/
	#contact-info{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
		margin-top: 1em;
		position: relative;
	}

	.wrap{
		position: relative;
	}

	.wrap .row{
		min-width: 100%;
	}

	#contact-info .login,
	.wrap .login{
		position: absolute;
		background-color: #fff;
		box-shadow: 1px 2px 3px rgba(0,0,0,.3);
		padding: .3em;
		top: 50%;
		left: 50%;
		transform: translate(-50%);
	}

	#contact-info .login a:link{
		color: rgba(0,0,0,.8);
		text-decoration: none;
	}

	.contact-info{ 
		font-size: 1rem;
		display: flex;
		flex-flow: row nowrap;
		line-height: 1.3;
		font-size: .8rem;
		position: relative;
		min-width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}

	.filter{
		filter: blur(5px);
		padding: 0 .3em;
	}

	.contact-info .img{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 7rem !important;
		width: 100% !important;
		border-radius: .3em;
		overflow: hidden;
	}
	

	.contact-info .img i{
		font-size: 3em;
		color: rgba(0,0,0,.05);
	}
	
	.contact-info .body{
		position: relative;
		font-size: 0.85rem; 
		width: 19.58em; 
		float: left; 
		padding: 0 0.3em;
		overflow: hidden;
	}
	
	.contact-info .name{
		font-size: 1.1rem; 
		/* font-weight: 600; */
		display: inline-block;
	}
	
	.contact-info .name a:link{
		text-decoration: none; 
		color: rgb(0, 0, 238);
	}
	
	.contact-info .name a:visited{
		color: rgb(0, 0, 238);
	}
	
	.contact-info .name a:hover{
		color: rgb(0, 0, 238);
	}
	
	.contact-info .names a:active{
		color: rgb(0, 0, 238);
	}
	
	.contact-info .rating{
		margin: 0 .1em;
		position: relative;
	}
	
	.contact-info .rating i{
		color: rgba(0,0,0,.1);
	}

	.contact-info .rating img	{
		position: absolute; 
		top: -1.1em; 
		width: 5em; 
		height: 1.5em; 
		display: inline-block; 
		margin: 1em .1em; 
		line-height: 0.7em;
	}
	
	/*Reviews & Comments*/
	#div-product-comments .comment-results{
		background-color: #fafafa; 
		min-height: 100px; 
		width: 100%; 
		overflow: hidden; 
		margin: 0; 
		border: 1px solid rgba(0,0,0,.1);
	}
	
	#div-product-comments .comment-results .my-avatar{
		display: inline-block; 
		width: 80px; 
		height: 80px; 
		margin-left: 10px;
	}
	
	#div-product-comments .comment-results .my-avatar > img{
		width: 100%; 
		height: 100%;  
		border-radius: 50%;
	}
	
	#div-product-comments .comment-results .comment-body{
		display: inline-block; 
		margin: 0 0 0 1em;
	}
	
	#div-product-comments .comment-results .comment-body .time-posted{
		margin: 0 .5em; 
		font-size: .7rem; 
		line-height: 1; 
		color: #666;
	}
	
	#div-product-comments .comment-results .comment-body .comment-label{
		display: inline-block; 
		height: 20px; 
		line-height: 1.2; 
		color: #009393; 
		font-weight: 500;
	}
	
	/*Property, Prospect, Product Comments*/
	

	/*Exam Settings*/
	#candidatename{
		font-weight: 500; 
		font-size: 1.5rem;
	}
	
	#examtimer{
		font-weight: 500; 
		font-size: 1.2rem; 
		margin-left: 62em;
	}
	
	#examcontent{
		margin: 2em; 
		padding: 2em;
	}
	
	#examquestion{
		width: 40em; 
		margin: 0 auto;
	}
	
	#flagquestion img{
		width: 40px; 
		height: 50px; 
		margin-left: -50px;
	}
	
	#examoptions{
		width: 40em; 
		margin: 5em auto;
	}
	
	#examnavbtn{
		text-align: center; 
		width: 40em; 
		margin: 0 auto;
	}
	
	.image-small{
		width:150px; 
		height:100px; 
		float:left; 
		margin-right: 5px;
	}
	
	.image-medium{
		width:364px; 
		height:200px;
	}
	
	#div-billboard-description {
		width: 100%; 
		background-color: #fff;
	}
	
	#div-billboard-description img {
		display: block;
	}
	
	#billboard-item-info{
		float:left; 
		width:550px; 
		margin: 0 2px;
	}
	
	#billboard-item-info > div {
		background: #fff; 
		padding: 5px 10px; 
		margin: 2px 2px 5px 0; 
		overflow:hidden;
	}
	
	#billboard-related-info{
		float:left; 
		width:460px; 
		margin: 0 2px;
	}
	
	#billboard-related-info > div {
		background: #fff; 
		padding: 5px 10px; 
		margin: 2px 0 5px 0; 
		overflow:hidden;
	}

	.contact-info-img{
		float:left; 
		margin: 5px; 
		width:100px; 
		height: 100px;
	}
	
	.font-size-plus-point-two{
		font-size: 1.2rem;
	}

	#div-menu, 
	#div-newsletter { 
		color: rgba(0,0,0,.3); 
		width:300px; 
		float: right; 	
		position:absolute; 
		top: 50px; 
		right: 0; 
		padding: 5px; 
		border-left: 1px solid #eaf1fb;
		border-bottom: 1px solid #eaf1fb;  
		background: rgba(0,0,0,.3); 
		display: none; 
		z-index: 9500;
	}
	
	.form-action-buttons{
		width: 20px; 
		height: 20px; 
		vertical-align:-5px; 
		margin-right:10px;
	}

	#followus img {
		height: 40px; 
		width: 40px;
	}
	
	#followus a {
		float: left; 
		margin: 2px;
	}
	
	#followus li {
		display: inline; 
		margin: 5px;
	}
	
	#div-more-info{
		display: none;
	}

	#div-follow-us {
		display: none; 
		top: 300px; 
		left:0; 
		width: 30px; 
		height: 100px; 
		padding: 4px 2px 2px 2px; 
		margin-left: 2px; 
		-webkit-border-bottom-right-radius: 10px;
		border-bottom-right-radius: 10px;
	   -webkit-border-top-right-radius: 10px; 
		border-top-right-radius: 10px; 
		opacity: 0.7;
	}
	
	#div-follow-us ul {
		margin-top:2px;
	}
	
	#div-about-us {
		width: 190px; 
		height: 130px; 
		float: left; 
		padding: 2px; 
		margin-left: 2px;
	}
	
	#div-follow-us li, 
	#div-follow-us > ul, 
	#div-about-us li, 
	#div-about-us a, 
	#div-about-us > ul {
		list-style: none; 
		text-decoration: none;
	}
	
	#div-about-us li a:link, 
	#div-about-us li a:visited { 
		color: #47403a; 
		display: block; 
		-webkit-border-radius: 3px; 
		border-radius: 3px;
	}
	
	#div-about-us li a:hover { 
		color: rgba(0,0,0,1); 
		background-color: #009393; 
		-webkit-transform: scale(2,2); 
		-ms-transform: scale(2,2); 
		transform: scale(2,2);
	}
	
	#div-follow-us li a:hover { 
		opacity: 1;
	}
	
	#div-follow-us, 
	#div-newsletter, 
	#div-about-us {	
		box-shadow: 1px 1px 3px rgba(0,0,0,1); 
		background-color: #f9f9f9; 
	}
	
	#div-news-sub-feedback{ 
		display: none; 
		font-size: .5rem; 
		height: 12px; 
		width: 225px; 
		padding: 2px; 
		margin: 0px;
	}

	/*Style main search area inputs*/
	.about-article {
		font-size: 1.1rem; 
		width:100%; 
		overflow:hidden; 
		padding:5px;
	}
	
	.faq-answer {
		text-indent: 0;
	}
	.caineware-buttons {
		height: 25px; 
		color: #fff; 
		margin: 1px 3px; 
		display: inline-block; 
		line-height: 20px; 
		background-color: #009393; 
		text-decoration: none; 
		padding: 2px 5px; 
		font-weight: 500; 
		border:1px solid #fff;
	}
	
	.caineware-buttons:hover{
		border:1px solid #009393;
	}
	
	/*Style Footer*/
	#support{
		font-size: .85rem;
		border-top: 1px solid var(--border-color);
		border-bottom: 1px solid var(--border-color);
	}

	#support *,
	#copyright *{
		color: inherit;
	}

	#copyright{
		width: 100%;
		font-size: .7rem;
		line-height: 1.2;
		text-align: center;
		position: relative;
		bottom: 0;
		padding: 1em 0;
		margin-top: 3rem;
	}
	
	#copyright a,
	#support a{
		margin-bottom: .3em;
	}

	#copyright a:link,
	#support a:link{
		text-decoration: none;
	}

	#copyright a:link{
		color: rgba(0,0,0,.5); 
	}
	
	#copyright a:visited{
		color: rgba(0,0,0,.5);
	}
	
	#copyright a:hover,
	#support a:hover{
		border-bottom: 3px solid #da0a0a;
	}

	#copyright a:hover{
		color: rgba(0,0,0,.5);
		
	}
	
	#copyright a:active{
		color: rgba(0,0,0,.5);
	}

	.login-wrap footer,
	.register-wrap footer{
		color: rgba(0,0,0,.5);
	}
	
	.login-wrap footer > a:link,
	.register-wrap footer > a:link{
		color: rgba(0,0,0,.5);
		text-decoration: none;
	}

	.login-wrap footer > a:visited,
	.register-wrap footer > a:visited{
		color: rgba(0,0,0,.5);
		text-decoration: none;
	}
	
	.login-wrap footer > a:hover,
	.register-wrap footer > a:hover{
		color: rgba(0,0,0,.5);
		text-decoration: none;
	}

	.login-wrap footer > a:active,
	.register-wrap footer > a:active{
		color: rgba(0,0,0,.5);
		text-decoration: none;
	}

	

	/**Challenge Section***/
	#challenge-wrap{
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
		position: relative;
		min-height: 90vh;
		width: 70%;
		margin: 0 auto;
		border: 1px solid black;
	}

	#challenge-dashboard{
		position: absolute;
		top: 0;
		padding: 1em;
    	width: 100%;
	}

	#challenge-section{
		display: flex;
	    flex-flow: column nowrap;
	    width: 100%;
	    justify-content: center;
	    align-items: center;
	}

	#question-wrap{
		width: 100%;
	    display: flex;
	    flex-flow: column wrap;
	    justify-content: center;
	    align-items: center;
	}

	#question-wrap > div{
		padding: 1em;
	}

	#question-wrap > .bold{
		font-size: 1em;
		font-weight: 600;
	}

	#question-wrap > .question{
		font-weight: 400;
		font-size: 1.2em;
	}

	#question-wrap > .marks{
		font-weight: 600;
		font-size: .8em;
	}

	#question-buttons{
		position: absolute;
    	bottom: 0;
		width: 100%;
	    display: flex;
	    flex-flow: row nowrap;
	    justify-content: center;
	    align-items: center;
	}

	#question-buttons > a{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 .1em;
	}

	#question-buttons > .page{
		padding: .3em .5em;
	}

/* Small Screen devices (576px and up) */
@media only screen and (min-width: 567px)
{
	

	

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)
{
	
	
	html, body{
		font-size: 18px;
	}

	/*Pop Up Styles*/
	#modal{
		top: 7%;
		height: auto;
		max-height: 80%;
		border: 1px solid var(--border-color);
		border-radius: .3em;
	}

	/*Profile Account Settings*/
	#manage-screen > #div-about > div {
	    width: 100%;
	}

	#manage-list .img, 
	#manage-list .avatar{
		width: 70px !important;
		height: 70px !important;
	}

	#backdrop{
		/* display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center; */
	}

	#drawer.offset{
		width: fit-content;
		width: moz-fit-content;
        float: right;
	}

	#modal #comments-section,
	#modal #likes-section,
	#modal #views-section,
	#modal #followers-section,
	#modal #reviews-section{
		padding: .3rem;
        font-size: .85em;
	}

	#company-name{
		font-size: 1rem;
    	padding: 0 1em;
	}

	#profile-wrap{
		top: 30%;
	}

	/*MAIN CONTAINER SECTIONS*/	
	#manage-nav i{
		display: inline-block;
	}

	#drawer #register-form{
		width: 620px;
	}

	#drawer #login-form,
	#drawer #recovery-form,
	#drawer #reset-form{
		width: 520px;
		padding: 1em;
	}

	#profile-header-wrap{
		margin: 1em 0 !important;
	}

	.login-wrap .about-column, 
	.login-wrap .account-column {
	    min-width: 30%;
	    width: auto;	
        max-width: 50%;
	}

	/** For mobile devices **/	
	.custom-shape-divider-bottom-1699810858 svg {
		width: calc(199% + 1.3px);
		height: 201px;
	}
	


	#search-wrap .title{
		display: block;
	}

	

	#active-menu{
		max-width: 250px;
	}

	#homepage-tabs {
		display:  flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		height: 12em;
	}

	#homepage-tabs.show{
		display: block;
	}

	#homepage-tabs > section{
		/*display: none; */
		width: 30%;
		position: relative;
		height: 100%;
		border-radius: .3em;
		overflow: hidden;
	}
	 
	
	#div-results > .item-card-wrapper,
	#div-results > #div-results > li .ads{
		display: none;
	}
	
	#div-results > li .img.show {
		display: block;
	}

	#adverts-column{
		margin-left: .5em;
	}	

	.adverts .div-ads, 
	.links .div-feeds{
		flex-flow: row nowrap;
	}

	/*User Dashboard*/
	#dashboard-links > ul li{
		justify-content: space-between;
	}

	#dashboard-links ul li a{
		min-width: 30%;
	}

	/*User Dashboard*/
	.side-menu{
		padding-left: 0;
    	list-style: none;
	}
	
	/*Service Indexes*/
	
	.service-wrap .wrap .tab{
		margin: 1em 1em 1em 0;
		width: 15em;
	}
	
	#column-wrap{
		flex-flow: row wrap;
		justify-content: space-between;
		margin: 3em auto;
	}
		
	#item-column,
	#item-related-column{
		padding: 0;
	}

	#dashboard .nav {
		font-size: 1em;
		/* padding: 0 1em !important; */
	}

	#dashboard .nav ul {
		overflow-y: auto;
	}	
	
	/*Management Screens*/
	#manage-wrap{
		display: flex;
	    flex-flow: row nowrap;
	    justify-content: space-between;
	    align-items: flex-start;
	}

	#edit-wrap form{
		width: 70%;
	}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) 
{
	

	html, body{
		font-size: 18px !important;
	}

	#company-logo{
		justify-content: start;
	}

	#company-name{
		padding: 0 .3em;
	}

	#dashboard .nav .nav-link .label{
		display: flex !important;
	}

	#dashboard .nav .nav-link{
		flex-flow: row nowrap;
		justify-content: start;
		align-items: center;
		height: 2em;
		line-height: 2;
		border-radius: .3rem;
	}

	#dashboard .nav .nav-link .icon{
		height: 20px;
		margin-right: .5em;
	}

	#dashboard .nav .nav-link .icon i{
		font-size: 1rem;
	}

	/* Layouts*/
	.p-left{
		padding-left: .3em !important;
	}

	.p-right{
		padding-right: .3em !important;
	}

	/* #mobile-contacts,
	#fax-contacts{
		margin-right: 0;
	}

	#landline-contact,
	#email-contacts{
		margin-left: 0;
	} */

	#profile-wrap{
		top: 70%;
	}

	#profile-wrap .count-wrap{
		justify-content: start;
	}

	#home-tag-line{
		text-align: start;
	}

	#user-details .counters{
		margin: 0;
	}

	#search-wrap{
		min-height: 80vh;
	}

	/*MAIN CONTAINER SECTIONS*/
	#manage-nav{
		/*width: 980px;*/
		margin-top: 9em !important;
	}
	
	#results-container{
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	#adverts-column.show{
		display: block;
	}
	
	
	#results-column{
		margin-right: .5em;
	}

	#div-results > li > .actions{
		display: flex;
	}

	#manage-screen{
		padding: 0 !important;
	}

	#manage-screen .create-btn {
		margin-left: 1em;
		font-size: .8rem !important;
		padding: .3rem .5rem !important;
		border-radius: 1rem !important;
	}

	#manage-screen > #div-about > .row > section:first-child{
		padding-left: 0 !important;
		padding-right: .3em !important;
	}

	#manage-screen > #div-about > .row > section:last-child{
		padding-right: 0 !important;
		padding-left: .3em !important;
	}

	#manage-list .img, 
	#manage-list .avatar{
		height: 100px !important;
		width: 100px !important; 
	}

	#div-results > li,
	#div-results > li .ads {
		flex-flow: row nowrap;
	}

	#div-results > li>.actions {
		min-width: 25%;
		max-width: 25%;
	}

	#item-column{
		padding-left: 0;
	}

	#item-related-column{
		font-size: .8em;
		padding-right: 0;
	}

	/* Dashboard */
	#dashboard .nav .nav-link {
		flex-flow: row nowrap;
		justify-content: flex-start;
		min-width: 100%;
		padding: 0 .5em;
	}

	#dashboard .nav .nav-link .icon i {
		font-size: 1em;
	}

	#dashboard .nav .nav-link .badge{
		display: block;
	}

	#modal #likes-section, #modal #views-section, #modal #followers-section{
		width: 660px;
	}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 
{
	/*MAIN CONTAINER SECTIONS*/

	#manage-list .img, 
	#manage-list .avatar{
		height: 100px !important;
		width: 100px !important; 
	}
	

}