#tower-container-1,#tower-container-2,#tower-container-3{
	display: inline-block;
	background-color: rgb(226, 127, 47);
	width:30%;
	position: relative;
    height: 30vh; /* Adjust based on your layout */
	background-image: linear-gradient(green, black);
}

/* Eye button inside the input box */
.login-content {
    background: #fff;
    padding: 20px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 80%;
	margin: 0 auto;
  }

  .text-container {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
  }

  .input-container {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Input field */
.input-container input{
    width: 100%;
    padding: 10px 40px 10px 10px; /* space for eye icon */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
  }

  .input-container input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.3);
  }

  /* Eye button inside the input box */
  .toggle-eye {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #555;
  }

  .toggle-eye svg {
    width: 20px;
    height: 20px;
  }

  .toggle-eye:hover svg {
    color: #007bff;
  }

body {
  background: linear-gradient(to right, #eef4f5, #eef4f5);
}


#preview-resize{
 display: none; /* hidden by default, shown via JS */
  width: 98%;
  height:250px;
  border: 2px solid #514f55;
  padding: 10px;
  background: #fff;
  margin:1%;
}

#resizedImage {
  max-width: 100%;
  height: 130px;
  display: block;
  margin: 0 auto;
  border: 4px solid #658d6e;
}

#downloadLink{
	padding: 5px;
	display: block;
	background-color: #425e48;
	color:#fff;
	text-align: center;
}

#resize-new-image{
 padding: 5px;
	display: block;
	background-color: #2f1f35;
	color:#fff;
	margin:2px;
	text-align: center;
}

#form-content{
	margin:10px;
	border: 4px solid #7f65a1;
	padding: 5px;
}

#deleteImage
{
	background-color: #8b691f;
	margin:2px;
	color:#fff;
	padding:5px;
	cursor: pointer;
}
#tower-main{
	width:90%;
	margin:0 auto;
}

.disk{
	border-radius: 8px;
}


.main-puzzle-1{
	height:300px;
	margin-top:20px;
	position: relative;
}

.main-puzzle-2 {
	position: relative; /* Establish a relative position for all child elements */
	width: 100%; /* Ensure sufficient width */
	height: 500px; /* Adjust height dynamically */
  }

  .main-puzzle-3{
	height:400px;
	margin-top:20px;
	position: relative;
}

.main-puzzle-4{
	height:200px;
	margin-top:20px;
	position: relative;
}


.sequence-content{
	font-size:18px;
	font-weight: bold;
	color: #114915;
	margin:5px;
}

.data-container{
	margin:20px 10px;
}
.symbol-container{
	margin:0 auto;
	width: 100%;
	height: 60px;
   }

   .symbol-grid{
	width:40px;
	height:40px;
	background-color: #54c458;
	color:#fff;
	margin: 0 auto;
	text-align: center; 
	font-size:14px;
	font-weight: bold;
    border-radius: 20px; /* Adjust the value for more or less rounding */
    line-height: 40px;
   }

   .symbol-text{
	color:#383737;
	text-align: center; 
	font-size:14px;
	font-weight: bold;
   }

.highlight-header{
	color: #a86a19;
}

.error-msg{
	color:#EE4B2B;
	font-weight: bold;
}

.clear-data{
	font-weight: bold;
	font-size: 14px;
	color: red;
	cursor: pointer;
	border: 1px solid #000;
    background-color: #fff; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
	width:100px;
	height:20px;
	border-radius: 5px;
	padding:5px;
	display: none;
	margin:5px;
}

.highlight-text{
	font-size:14px;
	color:#3e6283;
	font-weight:bold;
}

.grid-container-1{
	padding: 10px; /* Adjust the value as needed */
	background-color: #fff;
	border: 1px solid #000;
	display: inline-block;
	color: #000;
	font-size:14px;
	border-radius: 5px;
	font-weight: bold;
}

.grid-container-check{
	padding: 11px; /* Adjust the value as needed */
	background-color: #fff;
	border: 1px solid #000;
	display: inline-block;
	color: #000;
	font-size:14px;
	border-radius: 5px;
	font-weight: bold;
}

.grid-container-2{
	padding: 10px; /* Adjust the value as needed */
	background-color: #392caa;
	border: 1px solid #000;
	display: inline-block;
	color: #fff;
	font-size:14px;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
}

.grid-container-3{
	padding: 10px; /* Adjust the value as needed */
	background-color: #392caa;
	border: 1px solid #000;
	display: inline-block;
	color: #fff;
	font-size:14px;
	border-radius: 5px;
	font-weight: bold;
}



.grid-container-11{
	padding: 10px; /* Adjust the value as needed */
	background-color: #fff;
	border: 1px solid #000;
	display: inline-block;
	color: #000;
	font-size:14px;
	border-radius: 5px;
	font-weight: bold;
}

.grid-container-12{
	padding: 10px; /* Adjust the value as needed */
	background-color: #fff;
	border: 1px solid #000;
	display: inline-block;
	color: #000;
	font-size:14px;
	border-radius: 5px;
	font-weight: bold;
}

.grid-container-5{
	padding: 10px; /* Adjust the value as needed */
	background-color: #0a99b3;
	border: 1px solid #000;
	display: inline-block;
	color: #fff;
	font-size:14px;
	border-radius: 5px;
	font-weight: bold;
	position: relative;
}


.grid-container-no-border{
	padding:12px; /* Adjust the value as needed */
	background-color: #fff;
	display: inline-block;
	border-radius: 5px;
	box-sizing: border-box;
	font-size:16px;
	font-weight: bold;
	color:#9e940d;
}

.row-2{
	margin-top:5%;
}

.row-4{
	margin-top:1%;
	height:40px;
	width:100%;
    position: relative;
}

.puzzle-div{
	padding: 6px; /* Adjust the value as needed */
    background-color: #fff; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:5px;
	border-radius: 5px;
}

.pattern{
	padding: 2px; /* Adjust the value as needed */
    background-color: #671cdf; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:1px;
}

.pattern-error{
	padding: 2px; /* Adjust the value as needed */
    background-color: #cf1818; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:1px;
}
.coin{
	padding: 5px; /* Adjust the value as needed */
    background-color: #d3c337; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:5px;
	cursor: pointer;
}

.my-coin{
	padding: 10px; /* Adjust the value as needed */
    background-color: #968a25; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:5px;
}

.computer-coin{
	padding: 10px; /* Adjust the value as needed */
    background-color: #968a25; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:5px;
}
#my-data, #computer-data {
	display: inline-block;
    width: 35%; /* Adjust width as needed */
    vertical-align: top;
    text-align: center; /* Center-align content */
    border: 1px solid #ccc; /* Add a border for separation */
    margin: 10px; /* Add spacing between the two containers */
    padding: 10px; /* Add some padding inside the containers */
    background-color: #f9f9f9; /* Add a subtle background color */
}

#target-score{
	text-align: center; /* Center-align content */
    border: 1px solid #ccc; /* Add a border for separation */
    margin: 10px; /* Add spacing between the two containers */
    padding: 10px; /* Add some padding inside the containers */
}

#total-coins{
	text-align: center; /* Center-align content */
    border: 1px solid #ccc; /* Add a border for separation */
    margin: 10px; /* Add spacing between the two containers */
    padding: 10px; /* Add some padding inside the containers */
}

#computer-score,#computer-coins{
	display: inline-block;
    vertical-align: top;
    text-align: center; /* Center-align content */
    border: 1px solid #ccc; /* Add a border for separation */
    margin: 10px; /* Add spacing between the two containers */
    padding: 10px; /* Add some padding inside the containers */
    background-color: #f9f9f9; /* Add a subtle background color */
}

#my-score,#my-coins{
	display: inline-block;
    vertical-align: top;
    text-align: center; /* Center-align content */
    border: 1px solid #ccc; /* Add a border for separation */
    margin: 10px; /* Add spacing between the two containers */
    padding: 10px; /* Add some padding inside the containers */
    background-color: #f9f9f9; /* Add a subtle background color */
}

.pattern-decode{
	padding: 2px; /* Adjust the value as needed */
    background-color: #df1c8e; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:2px;
}

.decode{
	cursor: pointer;
	font-size: 18px;
}
.puzzle-div-highlight{
	padding: 6px; /* Adjust the value as needed */
    background-color: #31502b; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:5px;
	border-radius: 5px;
}

.puzzle-div-level{
	padding: 6px; /* Adjust the value as needed */
    background-color: #fff; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:5px;
    border-radius: 5px;
}

.active-puzzle{
	padding: 6px; /* Adjust the value as needed */
    background-color: #f5e8cf; /* Optional: to make the padding visually clearer */
    display: inline-block; /* Ensures padding applies only around text */
    border: 1px solid #000;
	color:#fff;
	margin:5px;

}

.instructions-div{
	background-color:#41848d;
	padding:10px;
	color:#fff;
	margin:1px;
	border-radius: 4px;
	box-shadow: 2px 2px 2px 2px #a5c9e5;
	-moz-box-shadow: 2px 2px 2px 2px #a5c9e5;
    -webkit-box-shadow: 2px 2px 2px 2px #a5c9e5;
}
  
  .modal-content {
	margin: 5% auto;
	width: 500px;
	max-width: 90%;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.175);
	border-radius: .3rem;
	outline: 0;
	z-index: 9999;
  }
  .modal-header {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: start;
	  -ms-flex-align: start;
	  align-items: flex-start;
	  -webkit-box-pack: justify;
	  -ms-flex-pack: justify;
	  justify-content: space-between;
	  padding: 1rem;
	  border-bottom: 1px solid #e9ecef;
	  border-top-left-radius: .3rem;
	  border-top-right-radius: .3rem;
	  z-index: 9999;
  }
  .modal-title {
	  margin-bottom: 0;
	  line-height: 1.5;
	  margin-top: 0;
	  font-size: 15px;
	  color: #007bff;
  }
  .modal-header .close {
	  float: right;
	  font-size: 15px;
	  font-weight: 10;
	  line-height: 1;
	  color: #000;
	  text-shadow: 0 1px 0 #fff;
	  opacity: .5;
	  padding: 1rem;
	  margin: -1rem -1rem -1rem auto;
	  background-color: transparent;
	  border: 0;
  }
  .close:not(:disabled):not(.disabled) {
	  cursor: pointer;
  }
  
  .modal-body {
	  flex: 1 1 auto;
	  padding: 1rem;
  }
  .modal-body p {
	  margin-top: 0;
	  margin-bottom: 1rem;
	  font-size: 15px;
	  z-index: 9999;
  }
  .modal-footer {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: center;
	  -ms-flex-align: center;
	  align-items: center;
	  -webkit-box-pack: end;
	  -ms-flex-pack: end;
	  justify-content: flex-end;
	  padding: 1rem;
	  border-top: 1px solid #e9ecef;
  }
  .modal-footer>*{
	  margin: 5px;
  }
  
  
@media (max-width: 768px) { /* Styles for mobile devices */ 
	
	body {
		font-family: 'Nunito', Verdana, Geneva, Tahoma, sans-serif;
		font-size: 14px; 
		Line-height: 160%;
		padding: 0px;
	 /*   background-color: red;*/
		margin: 0px 0px 0px 0px;
		height: 100%; /* 100% of the viewport height */
		background-color: #81bdf8;
   }

   .main-puzzle-5{
	height:330px;
	margin-top:20px;
	position: relative;
}

.main-puzzle-6{
	height:720px;
	margin-top:20px;
	position: relative;
}
.main-puzzle-7{
	height:300px;
	margin-top:20px;
	position: relative;
}
   .main{
    width:100%;
	height:500px;
    margin-left:10%;
	margin-top: 5%;
	position: auto;
}

.main-2{
    width:100%;
	height:800px;
    margin-left:1%;
	margin-top: 5%;
}


.main-3{
    width:100%;
	height:700px;
    margin-left:4%;
	margin-top: 5%;
}

   .modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.275);
	margin-top:40%;
  }

   .container-grid {
    display: grid;
    grid-template-columns: 25% 25% 25%;
    grid-template-rows: 60% 60% 60% 60%;
    font-size: 2em;
}

.container-grid div{
    background-color: #8cc994;
	color:#8cc994;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}

.container-grid-2 {
    display: grid;
    grid-template-columns: 25% 25% 25%;
    grid-template-rows: 60% 60% 60% 60% 60% 60%;
    font-size: 2em;
}

.container-grid-2 div{
    background-color: #8cc994;
	color:#f3f8f4;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}

#contact-info,#social-media-div{
	display: inline;
}

#partner-website-div{
	width:100%;
	margin:2px;
	color:#daecd6;
}

#partner-website-div a{
	text-decoration: underline;
}

.shulte-grid{
	display: grid;
    grid-template-columns: 15% 15% 15% 15% 15%;
    grid-template-rows: 40% 40% 40% 40% 40%;
    font-size: 2em;
}
.shulte-grid div{
    background-color: #8cc994;
	color:#343534;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}


.shulte-grid-2{
	display: grid;
    grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%;
    grid-template-rows: 30% 30% 30% 30% 30% 30% 30% 30%;
    font-size: 2em;
}

.shulte-grid-2 div{
    background-color: #8cc994;
	color:#343534;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}

.shulte-grid-3{
	display: grid;
    grid-template-columns: 9% 9% 9% 9% 9% 9% 9% 9% 9% 9%;
    grid-template-rows: 30% 30% 30% 30% 30% 30% 30% 30% 30% 30%;
    font-size: 1.2em;
}

.shulte-grid-3 div{
    background-color: #8cc994;
	color:#343534;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}

 .logo{
	width:40%;
	height:65px;
	margin-left: auto;
	margin-top:5px;
	position:relative;
	border:4px solid #7c8581;
   }
   
   .main-content{
	   height: 100%;
   }
   
   #comp {
		position: absolute;
		width:100%;
		background-color:#f9fafa;
	   /*background-image:url(Images/square2.png);*/
		left: 0px;
		top:0px;
		margin:0 auto;
		border: 0px solid #000;
		box-shadow: 3px 3px 3px 3px #c8c8c8;
	   -moz-box-shadow: 3px 3px 3px 3px #c8c8c8;
	   -webkit-box-shadow: 3px 3px 3px 3px #c8c8c8;
   }
   
   #header-content{
	   width:100%;
	   height:140px;
	   margin-left:0%;
	   /*background-image: 
    linear-gradient(to right, hsl(0, 5%, 81%) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(0, 5%, 81%) 1px, transparent 1px);
    background-size: 50px 50px; */
	background-image: repeating-linear-gradient(
    25deg,             
    #c3cfb6,              
    #cae6b1 2px,         
    transparent 1px, 
    transparent 5px   
    );
	border-top:6px solid #fff;
	border-bottom:5px solid #071930;
	background-color: #caf1f0;
   }
   #header_bg
   {
   /*background-image:url(Images/square2.png);*/
   height:120px;
   }
   #header_block
   {
		width:100%;    
		padding: 0px;
		height:0px;
		margin:0 auto;
		background-color:#ecffe0;
   
   }
   #Logo {
		position: relative;
		width:94%;
		margin:0 auto;
		height:0px;
   }
   
   #wrap {
		
	   /* height:1524px;*/
		width:980px; 
		height:100%;
		padding: 5px;
		margin:0 auto;
		border: 0px solid #000;
		background-color:#ffffff;
		box-shadow: 3px 3px 3px 3px #c8c8c8;
	   -moz-box-shadow: 3px 3px 3px 3px #c8c8c8;
	   -webkit-box-shadow: 3px 3px 3px 3px #c8c8c8;
		
   }
   
   #content-area {
	   width:95%;
	   /*height:420px;*/
	   margin:0 auto;
	   margin-top:152px;
	   border: 1px solid #f5fbfd;
	   background-color:#fff;
	   padding: 5px;
	   font-family: verdana, Helvetica, serif;
	   font-size: 13px;
	   box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
   }
   
   #content-area-post-ads{
	   width:95%;
	   /*height:1650px;*/
	   margin:0 auto;
	   margin-top:150px;
	   border: 1px solid #d3f0d2;
	   background-color:#fff;
	   padding: 5px;
	   font-family: verdana, Helvetica, serif;
	   font-size: 13px;
	   box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
   }
   #content-area-register {
	   width:95%;
	   margin:0 auto;
	   margin-top:150px;
	   border: 1px solid #f5fbfd;
	   background-color:#fff;
	   padding: 5px;
	   font-family: verdana, Helvetica, serif;
	   font-size: 13px;
	   box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
   }
   
   #content-area-blog{
	   width:95%;
	   margin:0 auto;
	   margin-top:150px;
	   border: 1px solid #f5fbfd;
	   background-color:#fff;
	   padding: 5px;
	   font-family: verdana, Helvetica, serif;
	   font-size: 13px;
	   box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
   }
   
   #content-area-posted-ads{
	   width:95%;
	   /*height:1480px;*/
	   margin:0 auto;
	   margin-top:150px;
	   border: 1px solid #f5fbfd;
	   background-color:#fff;
	   padding: 0px;
	   font-family: verdana, Helvetica, serif;
	   font-size: 13px;
	   box-shadow: 3px 3px 3px 3px #508d55;
	   -moz-box-shadow: 3px 3px 3px 3px #508d55;
	   -webkit-box-shadow: 3px 3px 3px 3px #508d55;
   }
   
   #content-area-terms{
	   width:95%;
	   /*height:1420px;*/
	   margin:0 auto;
	   margin-top:162px;
	   border: 1px solid #f5fbfd;
	   background-color:#fff;
	   font-family: verdana, Helvetica, serif;
	   font-size: 13px;
	   box-shadow: 3px 3px 3px 3px #508d55;
	   -moz-box-shadow: 3px 3px 3px 3px #508d55;
	   -webkit-box-shadow: 3px 3px 3px 3px #508d55;
   }
   
   #content-area-settings{
	   width:95%;
	   height:580px;
	   margin:0 auto;
	   margin-top:150px;
	   border: 1px solid #d3f0d2;
	   background-color:#fff;
	   padding: 5px;
	   font-family: verdana, Helvetica, serif;
	   font-size: 13px;
	   box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
   }
   
   #content a
   {
   color:#FFFFFF;
   }
   
   #sidebar{
	   height: 1214px;
	   position: absolute;
	   margin-left:0px;
	   top:20px;
	   width: 197px;
	   /*border: 1px solid #000;
	   background-color: #FFFFCC;*/
	   font-family: 'Trebuchet MS', 'Lucida Grande',
		 Verdana, Lucida, Geneva, Helvetica, 
		 Arial, sans-serif;
		 font-size:16px;
	   padding: 5px;         
   }
   /* CSS for heading tags on mobile devices */
h1 {
    font-size: 1.1em; /* Smaller than the default to fit mobile screens better */
}

h2 {
    font-size: 1em;
}

h3 {
    font-size: 0.9em;
}

h4 {
    font-size: 0.8em;
}

h5 {
    font-size: 0.7em;
}

h6 {
    font-size: 0.6em;
}
   /*Navigation*/
   html, body, div, span, applet, object, iframe, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td,
   article, aside, canvas, details, embed, 
   figure, figcaption, header, hgroup, 
   menu, nav, output, ruby, section, summary,
   time, mark, audio, video {
	   margin: 0;
	   padding: 0;
	   border: 0;
	   font-size: 100%;
	   font: inherit;
	   vertical-align: top;
	   font-family: 'Trebuchet MS', 'Lucida Grande',
		 Verdana, Lucida, Geneva, Helvetica, 
		 Arial, sans-serif;
   }
   
   /* HTML5 display-role reset for older browsers */
   ol, ul {
	   list-style: none;
   }
   ul.listTerms{
	   list-style-type: square;
	   padding:10px;
	   margin-left:10px;
	   font-size:15px;
   }

   ul.guidance{
	list-style-type: square;
	padding:10px;
	margin-left:10px;
	font-size:12px;
	color:#114915;
   }
   blockquote, q {
	   quotes: none;
   }
   blockquote:before, blockquote:after,
   q:before, q:after {
	   content: '';
	   content: none;
   }
   /* ---------- FONTAWESOME ---------- */
   
   [class*="entypo-"]:before {
	 font-family: 'entypo', sans-serif;
   }
   
   /* ---------- GENERAL ---------- */
   a { text-decoration: none; color:#202e23}
   
   .clearfix { *zoom: 1; font-size:11px;} /* For IE 6/7 */
   .clearfix:before, .clearfix:after {
	   display: table;
	   content: "";
   }
   .clearfix:after { clear: both; }
   
   /* ---------- side_navigation ---------- */
   
   #side_navigation {
	   border-radius: 5px;
	   -moz-border-radius: 5px;
	   -webkit-border-radius: 5px;
	   width: 49%;
   }

   #side_navigation .text-heading
   {
	font-size: 13px;
	font-weight: bold;
   }
   
   #side_navigation header {
	   background-color: #4f4245;
	   border-radius: 5px 5px 0 0;
	   -moz-border-radius: 5px 5px 0 0;
	   -webkit-border-radius: 5px 5px 0 0;
	   color: #ecf0f1;
	   font-weight: bold;
	   height: 50px;
	   line-height: 50px;
	   text-align: center;
   }
   
   #side_navigation ul {
	   background-color: #ecf0f1;
   }
   
   #side_navigation ul li {
	   border-bottom: 1px solid #a6a8a9;
	   color: #776b6c;
	   height: 40px;
	   line-height: 40px;
	   padding: 0 5px;
   }
   
   #side_navigation ul li:hover {
	   background-color: #56a3c7;
	   color: #ecf0f1;
   }
   
   #side_navigation ul li:hover a {
	   color: #ecf0f1;
   }
   
   
   #side_navigation ul li a {
	   color: #3e4146;
	   font-size: 9px;
   }
   
   #side_navigation ul li.active{
	background-color:#97c981;
  }

  #side_navigation ul li.heading{
	background-color:#577052;
	color: #fff;
  }

#side_navigation ul li.active{
color:#fff;
}

   /*start qustions and answers styling*/
   .qa-container { 
	   width: 98%; margin: auto; 
   } 
   .qa-item { 
	   border-bottom: 1px solid #ddd; 
	   padding:1px;
   } 
   .question {
		padding: 15px; cursor: pointer; background-color: #1b2c23; transition: background-color 0.3s; color: #fff; 
   } 
   .question:hover { 
	   background-color: rgb(20, 75, 56); color: #fff; 
   } 
   .answer-div { 
	   display: none; 
	   padding: 15px; 
	   background-color: #fafafa;
   }
   /* End of Questions and answers styling*/
   .textHeader{
	   font-size: 12px;
	   text-align: left;
	   margin:0px;
	   font-weight: bold;
   }

   .header-strong{
	font-size: 14px;
	text-align: left;
	margin:0px;
	font-weight: bold;
    color:#370a8a;
   }
   
   .bold-small{
	   font-size: 12px;
	   font-weight: bold;
   }
   
   .textSubHeader{
	   font-size: 12px;
	   text-align: left;
	   margin:0px;
	   font-weight: bold;
	   color:#797272;
   }
   
   .linkHeader{
	   color: #d84907;
	   font-size: 12px;
   }
   
   .textHeaderBig{
	   font-size: 20px;
	   font-weight: bold;
	   font-family: Tahoma, sans-serif;
   }
   
   .textNormal{
	   font-size: 13px;
	   font-family: Tahoma, sans-serif;
   }
   
   .textMedium{
	   font-size: 13px;
	   font-family: Tahoma, sans-serif;
   }
   
   .textBold{
	   font-size: 13px;
	   font-family: Tahoma, sans-serif;
	   font-weight: bold;
	   color:#8d45ec;
   }
   
   .description{
	   padding:2px;
   }
   
   .post-info{
	   padding:5px;
	   border:1px solid #000;
	   margin-top:10px;
	   background-color: #83a0ee;
	   color:#fff;
	   font-weight: bold;
   }
   
   .chat-option,.post-reply{
	   width: 120px;
	   background-color: #fff;
	   padding:5px;
	   margin-top:10px;
	   border: 1px solid #000;
	   cursor: pointer;
   }
   
   .phone-option{
	   width:80%;
	   padding:5px;
	   border:1px solid #000;
	   margin-top:10px;
	   cursor: pointer;
	   font-size:11px;
   }
   
   .phone-details{
	   color:#0b99eb;
	   font-weight:bold;
	   font-size:14px;
   }
   
   .bread-crumb{
	 background-color: #b4c5b2;
	 padding:1px 6px;
	 border:1px solid #fff;
	 width:95%;
	 color:#640257;
	 margin:1px;
   }
   
   .no-posts{
	   padding:5px;
	   border:1px solid #000;
	   background-color: #fff;
	   margin-top:10px;
	   width:72%;
   }
   
   span.textContent{
	   font-size: 13px;
	   text-align: left;
	   margin:0px;
	   font-weight: bold;
   }
   
   
   .mainContent{
	   color: #131212;
	   font-family: Tahoma, sans-serif;
   }
   
   .subContent{
	   color: #5f5e61;
	   font-family:Arial, sans-serif;
	   padding:5px;
   }
   
   .content-Div{
	   width:99%;
	   height: 100%;
   }
   
   #banner-area-1 {
	   text-align: center; /* Center the contents */
	   background-color: #abdbad; /* Light grey background */
	   width:100%; /* Padding around the content */
	   height:256px;
   }
   
   .banner-image{
	width:100%;
	height:100%;
   }
   
   
   #advertise-area-1 {
	   text-align: center; /* Center the contents */
	   background-color: #eeebeb; /* Light grey background */
	   width:90%; /* Padding around the content */
	   height:256px;
	   border: 1px solid #ddd; /* Light grey border */
	   border-radius: 5px; /* Rounded corners */
	   margin-left:5%; /* Vertical spacing */
   }
   
   #advertise-area-4 {
	   text-align: center; /* Center the contents */
	   background-color: #f0f0f0; /* Light grey background */
	   width:80%; /* Padding around the content */
	   height:100px;
	   border: 1px solid #ddd; /* Light grey border */
	   border-radius: 5px; /* Rounded corners */
	   margin-left:10%; /* Vertical spacing */
   }
   
   #search-bar {
	   text-align: center; /* Center the child elements */
	   margin: 20px 0;
	   padding: 10px;
	   background-color: #f8f8f8;
	   border: 1px solid #ddd;
	   border-radius: 5px;
   }
   
   #search-bar form {
	   display: inline-block; /* Makes the form act like an inline element */
	   text-align: left; /* Aligns contents to the left */
	   max-width: 600px; /* Limits width for the search form */
   }
   
   .content-main-ad-descrition{
	   display: inline-block;
	   vertical-align: top;
	   width: 100%;
	   background-color: #faf9f9;
	   padding:0px;
   }

   .content-category-1,.side_navigation{
	display: inline-block;
	 margin-bottom: 10px; /* Adjust spacing between divs */
	 box-sizing: border-box;
}
   
   .image-content-ad-description{
	   width:100%;
	   height:300px;
	   background-color: #0e0202;
   }
   
   #super-container {
	   display: inline-block;
	   width: 100%; /* Adjust as needed */
	   vertical-align: top;
   }
   
   
   .content-category,.advertise-area{
	   display: inline-block;
		width: 100%;
		margin-bottom: 10px; /* Adjust spacing between divs */
		box-sizing: border-box;
   }

   .ad-image{
	width:96%;
	height:140px;
	padding: 2px;
   }
   /* content-main used for vertical -alignement */
   .content-main {
	   display: inline-block;
	   vertical-align: top;
	   width:47%; /* Adjust as needed for spacing */
	   margin:2px;
   }
   
   .content-main-category {
	   display: inline-block;
	   vertical-align: top;
	   width:100%; /* Adjust as needed for spacing */
	   padding: 2px;
   }

   .container-main-1{
    display: inline-block;	
	width: 100%;
	border: 1px solid #e0b9a7;
	padding: 0px;
	margin: 2px;
   }
   
   .container-main{
	   display: inline-block;	
	   width: 100%;
	   border: 1px solid #e0b9a7;
	   padding: 0px;
	   margin: 1px;
   }

   .container-main-home {
	display: inline-block;	
	width: 100%;
	border: 1px solid #e0b9a7;
	padding: 0px;
	margin: 1px;
}
   
   .container-main-search-bar {
	   display: inline-block;
	   width: 100%;
	   padding: 1px;
	   margin: 1px;
   }
   
   .container-main-ad-description{
	   width: 100%;
	   padding: 0px;
	   margin: 0px;
   }
   
   .container {
	   display: inline-block;
	   width: 100%;
	   margin: 1px;
   }
   
   .image-content, .ad-content {
	   display: inline-block;
	   vertical-align: top;
	   width: 98%; /* Adjust as needed for spacing */
	   padding: 1px;
   }
   
   .advertise-area{
	   margin-left:5%;
	   margin-top:5%;
   }
   
   
   #advertise-area-2,#advertise-area-3{
	   display: inline-block;
	   vertical-align: top;
	   width:256px;
	   height:256px;
	   background-color: #ccc;
	   margin-left:10%;
	   margin-top:10px;
   }
   
   .ad-inner-content {
	   display: inline-block;
	   width: 100%;
	   white-space: nowrap; /* Prevent line breaks */
	   font-family: Arial, sans-serif;
	   font-size:12px;
	   padding:0px;
   }
   
   .ad-ai-content {
	   display: inline-block;
	   width:100%;
	   white-space: nowrap; /* Prevent line breaks */
	   font-family: Arial, sans-serif;
	   font-size:12px;
	   padding:2px;
   }
   .ad-category, .ad-location {
	   display: inline-block;
	   vertical-align: top; /* Align items to the top */
	   margin-right: 10px; /* Adjust spacing as needed */
	   white-space: normal; /* Allow text to wrap inside the boxes */
   }
   
   #ai-header, #ai-suggestions {
	   display: inline-block;
	   vertical-align: top; /* Align items to the top */
	   margin-right: 10px; /* Adjust spacing as needed */
	   white-space: normal; /* Allow text to wrap inside the boxes */
   }
   
   #ai-suggestions {
	   align-items: left;
   }
   .ad-location{
	   float:right;
   }
   
   .fontSmall{
	   font-size: 11px;
   }
   
   .ad-main-content{
	   width:50%;
	   padding:5px;
	   background-color: #fff;
   }
   
   .ad-suboptions{
	   width:45%;
	   background-color: #fff;
   }
   
   .ad-main-content,.ad-suboptions{
	   display: inline-block;
	   vertical-align: top; /* Align items to the top */
	   margin: 2px; /* Adjust spacing as needed */
	   white-space: normal; /* Allow text to wrap inside the boxes */
	   width:50%;
	   padding:5px;
   }
   
   .ad-option-content-1{
	   font-size:14px;
	   font-weight: bold;
   }
   
   .ad-option-content-1,.ad-option-content-2{
	   display: inline-block;
	   vertical-align: top; /* Align items to the top */
	   margin: 2px; /* Adjust spacing as needed */
	   white-space: normal; /* Allow text to wrap inside the boxes */
   }
   
   .text-container, .input-container {
	   display: inline-block;
	   vertical-align: top; /* Align items to the top */
	   margin-right: 5px; /* Adjust spacing as needed */
	   white-space: normal; /* Allow text to wrap inside the boxes */
	   text-align: left;
	   font-weight: bold;
   }
   .text-container{
	width:40%;
   }
   
   .input-container{
	width:50%;
   }
   .text-container-table, .input-container-table {
	   display: inline-block;
	   vertical-align: top; /* Align items to the top */
	   margin-right: 1px; /* Adjust spacing as needed */
	   white-space: normal; /* Allow text to wrap inside the boxes */
	   text-align: left;
	   font-weight: bold;
   }
   
   .text-container-table{
	width:40%;
	font-size:9px;
   }
   
   .input-container-table {
	width:60%;
   }

   #submitPhoneNumber{
	width:80%;
   }

   #submitPassword{
	width:80%;
   }
   
   .input-container{
	   margin-top: 0;
	   width:200px;
	   padding:1px;
   }
   
   .input-container-1{
	   margin-top: 0;
	   width:240px;
	   padding:1px;
	   font-size:10px;
   }
   
   .text-container{
	   padding:1px;
	   font-size:10px;
   }

   
   .post-Ad-Div {
	   font-size: 15px;
	   background: #c9eaf5;
	   position:absolute;
	   top:170px;
	   width:99%;
	   left:5px;
	   font-family: Arial, Helvetica, sans-serif;
	   color: #FFFFFF;
	   border-left: 1px;
	   border-right: 1px;
	   border-top:1px;
	   border-bottom:1px;
	   border-color:#CC3333;
	   font-weight: bold;
	   height:674px;
	   
		   
   }
   
   .userInfo{
	   margin:5px;
   }
   
   .error-Div{
	   background-color: #EE4B2B;
	   color:#fff;
	   padding:2px;
	   font-size: 14px;
	   display: none;
   }
   
   .success-Div{
	   background-color: #2b59ee;
	   color:#fff;
	   padding:2px;
	   font-size: 14px;
	   display: none;
   }
   
   #ai-suggestions-header,#ai-suggestions-header{
	   display:inline-block;
	   vertical-align: top;
   }
   
   input.form{
	   width:80%;
	   height:30px;
	   font-size: 16px; 
   }
   
   input.feebackform{
	   width:50%;
	   height:30px;
	   font-size: 16px; 
   }
   
   select.form{
	   width:100%;
	   height:30px;
	   font-size: 16px; 
   }
   
   textarea{
	   width:100%;
	   height:100px;
	   font-size: 16px; 
   }
   
   input[type=checkbox]{
	   width:20px;
	   height:20px;
   }
   
   #preview{
	   width:100px;
	   height:100px;
	   border:1px solid transparent;
   }
   
   .spinner-container,.spinner-container-1{
	 display: none;
   }
   
   .spinner-container-sub{
	   display: none;
	 }
   #spinner-sub{
	   width: 20px;
	   height: 20px;
	   border: 5px solid #f3f3f3;
	   border-top: 5px solid #3498db;
	   border-radius: 50%;
	   animation: spin 1s linear infinite;
   }
   #spinner {
	   width: 20px;
	   height: 20px;
	   border: 5px solid #f3f3f3;
	   border-top: 5px solid #3498db;
	   border-radius: 50%;
	   animation: spin 1s linear infinite;
   }
   .spinner-text { 
	   font-size: 16px; color: #333;
	   
	}
	#spinner,.spinner-text { 
	   display:inline-block;
	}
   
   @keyframes spin {
	   0% { transform: rotate(0deg); }
	   100% { transform: rotate(360deg); }
   }
   
   .ad-Div{
	   background-color: #99a799;
	   margin-left:10%;
	   padding:8px;
	   color:#000;
	   margin-top:1%;
	   width:80%;
   }
   
   .adInfo{
	   margin:0px;
	   padding:2px;
	   display: inline-block;
   }
   
   .content-Holder{
	   font-size: 14px;
	   text-align: left;
	   width:200px;
	   margin:0px;
	   display: inline-block;
	   vertical-align: top;
   }
   
   .input-Holder{
	   width:250px;	
	   display: inline-block;
	   vertical-align: top;
   }
   
   .content-Holder, .input-Holder {
	   display: inline-block;
	   vertical-align: top; /* Align items to the top */
	   margin-right: 1px; /* Adjust spacing as needed */
	   white-space: normal; /* Allow text to wrap inside the boxes */
	   text-align: center;
	   font-weight: bold;
   }
   
   
   button[type=submit]{
	   width: 150px; 
	   height: 40px; 
	   display: inline-block; 
	   box-sizing: border-box; 
	   padding: 5px; 
	   border: 1px solid #ccc; 
	   background-color: #114915; 
	   color: white; 
	   font-size: 16px; 
	   cursor: pointer; 
   }
   .post-content{
	   font-size: 12px;
	   /*background: #cce4fc;
	   position:absolute;*/
	   margin-top:0px;
	   width:95%;
	   height:80px;
	   margin-left:0px;
	   font-family: alike, actor, Arial, Helvetica, sans-serif;	
	   color: #353530;
	   z-index:2;	
   }
   
   .post-content-blog{
	   font-size: 12px;
	   width:98%;
	   margin-left:10px;
	   font-family: alike, actor, Arial, Helvetica, sans-serif;	
	   color: #353530;
   }
   .normal-text{
   font-size:12px;
   }
   
   .align-right{
	   font-size:12px;
	   float:right;
   }
   .post-description{
	   height:100%;
	   /*position: absolute;*/
	   border:1px;
	   padding:1px;
	   width:95%;
	   margin:0 auto;
   }
   
   .register-Div{
	   /*height:330px;*/
	   background-color:#d4d2e4;
	   /*position: absolute;*/
	   border:1px;
	   border-color: #585656;
	   padding:20px;
	   width:90%;
	   margin:0 auto;
	   margin-top:5%;
   }
   
   .feedback-Div{
	   width:48%;
	   padding:25px;
   }
   
   .blog-Div{
	   width:95%;
	   padding:10px;
   }
   
   .feedback-content{
	   width:48%;
	   padding:25px;
   }
   
   #message-blog{
	   width:400px;
	   height:225px;
   }
   
   #reply-blog{
	   width:280px;
	   height:180px;
   }
   
   #posts-content-main,#side_navigation{
	   display: inline-block;
	   vertical-align: top;
   }
   
   #posts-content-main{
	   border:1px;
	   border-color: #585656;
	   padding:0px;
	   width:49%;
   }
   
   #posts-content,#side_navigation{
	   display: inline-block;
	   vertical-align: top;
   }
   
   #posts-content{
	   /*height:260px;*/
	   /*background-color:#fff;
	   position: absolute;*/
	   border:1px;
	   border-color: #585656;
	   padding:0px;
	   width:48%;
   }
   
   #settings-content{
	   /*height:180px;
	   background-color:#fff;
	   position: absolute;*/
	   border:1px;
	   border-color: #585656;
	   padding:1px;
	   width:48%;
   }
   
   #change-settings-content{
	   /*height:160px;*/
	   background-color:#fff;
	   /*position: absolute;*/
	   border:1px;
	   border-color: #585656;
	   padding:20px;
	   width:45%;
   }
   
   #settings-content,#side_navigation{
	   display: inline-block;
	   vertical-align: top;
   }
   
   #change-settings-content,#side_navigation{
	   display: inline-block;
	   vertical-align: top;
   }
   
   #posts-content-main,#side_navigation{
	   display: inline-block;
	   vertical-align: top;
   }
   
   #posts-content-home{
	   /*height:260px;
	   position: absolute;*/
	   border:1px;
	   border-color: #585656;
	   padding:10px;
	   width:95%;
	   margin:0px;
   }
   
   #terms-content{
	   height:100%;
	   /*position: absolute;*/
	   border:1px;
	   border-color: #585656;
	   padding:20px;
	   width:96%;
	   margin:0px;
   }
   
   .terms-div{
	   padding:5px;
	   font-size:15px;
   }
   
   .terms-bold{
	   padding:5px;
	   font-weight: bold;
   }
   
   .ad-data{
	   margin-left:5%; 
	   width:220px;
	   color:#00a1e6;
	   font-weight:bold;
	   font-family: Arial, Helvetica, sans-serif;
   }
   
   #posts-content-ad-description{
	   /*height:260px;
	   position: absolute;*/
	   border:1px;
	   border-color: #a10a0a;
	   padding:1px;
	   width:98%;
	   font-size: 9px;
   }

   #footer-div-left,#footer-div-right{
	display: inline;
}
#footer-div-left{
	width:100%;
}

#footer-div-right{
	width:100%;
}
   
   #footer {
	   width: 100%;
	   background-color: #362f2f; /* Optional: Background color for the footer */
	   text-align: center; /* Center align the text */
	   position: relative;
	   bottom: 0;
	   padding: 1px;
	   /*background: url(Images/footer.gif);*/
	   font-family: Verdana, Arial, Helvetica, sans-serif;
	   left: 0;
	   right: 0;
	   margin-top:0px;
	   height: 185px;
   }

   
   #apDiv2 a {
	   color: #b2abb4; /* Link color */
	   font-size: 15px;
	   text-decoration: none;
	   margin: 0 10px; /* Horizontal margin */
   }
   
   #apDiv2 a:hover {
	   text-decoration: underline;
   }
   
   #social-media-div{
	   width:100%;
	   margin:0 auto;
	   color: #fff;
	   margin:5px;
	   float: right;
   }
   
   .social-media-links{
	   color:#fff;
   }


   #divsearch {
	   border:0px solid black;
	   padding:0px;
	   width:30em;
	   margin-top:10px;
	   margin-left:135px;
   }
   
   table A:link 
   {
	   text-decoration: none;	
	   
   }
   table A:visited 
   {text-decoration: none;
   color: #206425;
   }
   table A:active 
   {text-decoration: none;
   color: #66ffff;
   }
   table A:hover 
   {
   color: #ff6699;}
   
   #postAd{
	   /*margin-left:66%;*/
	   padding:2px;
	   background-color: #f3a052;
	   position: absolute;
	   right:1%;
       margin-top:-4px;
	   border: 2px solid #fff;
   }
   
   #postFeedBack{
	   padding:8px;
	   background-color: #bd7838;
	   width:92px;
	   height:15px;
	   color:#fff;
	   margin-left:10px;
   }
   
   #postFeedBack a{
	   font-family: Arial, Helvetica, sans-serif;
	   color:#fff;
	   font-weight: bold;
   }
   
   #blog{
	   padding:5px;
	   background-color: #88b3db;
	   width:60px;
	   height:15px;
	   color:#fff;
	   margin-left:10px;
	   margin-top:5px;
   }
   
   #blog a{
	   font-family: Arial, Helvetica, sans-serif;
	   color:#fff;
	   font-weight: bold;
   }
   
   #postAd a{
	   font-family: Arial, Helvetica, sans-serif;
	   color: #fff;
	   font-weight: bold;
	   font-size:15px;
   }

   .menu-text {
	display: block;
  }

   .arrow{
	width:20px;
	height:18px;
   }
   
   .blog-title {
	   font-size: 14px; 
	   font-family: alike, actor, Arial, Helvetica, sans-serif;		
	   font-weight:bold;
	   text-decoration:none;
	   padding:5px;
	   background-color:#a0c9aa;
	   
   }
   
   .blog-title a{
	   color: #fff;
   }
   
   .blog-title a:hover,a:visited{
	   color: #206425;
   }
   .logout-container{
	   background-color:#d4d2e4;
	   border:1px;
	   border-color: #585656;
	   padding:1px;
	   margin:10%;
   }
   
   .capcha-text{
	   font-size:16px;
   }
   .login-container{
	   /*height:260px;*/
	   background-color:#d4d2e4;
	   /*position: absolute;*/
	   border:1px;
	   border-color: #585656;
	   padding:10px;
	   width:80%;
	   margin:20% 10%;
   }
   
   .reset-container{
	   /*height:150px;*/
	   background-color:#d4d2e4;
	   /*position: absolute;*/
	   border:1px;
	   border-color: #585656;
	   padding:10px;
	   width:80%;
	   margin-left:5%;
	   margin-bottom: 10%;
   }
   
   #message-container{
	   display: inline-block;
	   vertical-align:top;
	   height:300px;
	   background-color:#d4d2e4;
	   position: absolute;
	   border:1px;
	   border-color: #585656;
	   padding:5px;
	   width:90%;
	   margin-left:1%;
	   margin-top:5%;
   }
   .receiver-details,.chatbox{
	   display: inline-block;
   }
   
   .receiver-details{
	   padding:5px;
	   background-color: #fff;
	   width:30%;
	   margin-top:50px;
   }
   
   #login-user-content{
	   margin-left:45%;
	   top:0px;
	   position: absolute;
	   padding:2px;
	   background-color: #b4cedb;
	   color:#242222;
	   font-size: 11px;
   }
   
   #login-Div{
	   padding:12px;
	   background-color: #fff;
	   width:50px;
	   height:15px;
	   position: absolute;
	   top:0px;
	   padding:10px;
	   right:1%;
   }
   
   #navigation-elements{
	   position:absolute;
	   margin-left:10%;
	   background-color: red;
   }
   
   #dashboard-Div{
	   margin-left:14%;
	   background-color: #084061;
	   width:75px;
	   height:20px;
	   padding:5px;
	   position: absolute;
	   margin-top:-24px;
	   border: 2px solid #fff;
   }
   
   #dashboard-Div a{
	   color:#fff;
   }
   
   #login-Div a{
	   font-family: Arial, Helvetica, sans-serif;
	   color:#000;
	   font-weight: bold;
   }
   
   /*start search-container css*/
   .search-container { position: relative; 
	   display: inline-block;
	  float:left; 
	  width:90%;
	  margin:2px;
	} 
   #searchBox { width: 80%; 
	   padding: 10px; padding-left: 40px; 
	   /* Ensure space for the icon */ 
	   font-size: 16px;
		border: 1px solid #ccc;
		 border-radius: 5px; } 
   
		 /* end of search-container /*
   
	 /*start of styling for chatbox */
	 .chatbox {
	   /*position: absolute;*/
	   bottom: 0px;
	   right: 20px;
	   width: 60%;
	   border: 1px solid #ccc;
	   border-radius: 5px;
	   background-color: #fff;
	   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   }
   
   .chatbox-header {
	   padding: 10px;
	   background-color: #007bff;
	   color: #fff;
	   display: flex;
	   justify-content: space-between;
	   align-items: center;
   }
   
   .chatbox-body {
	   padding: 10px;
	   height: 150px;
	   overflow-y: auto;
	   font-size:14px;
	   font-family: Arial, Helvetica, sans-serif;
   }
   
   #close-btn {
	   background: none;
	   border: none;
	   color: #fff;
	   font-size: 20px;
	   cursor: pointer;
   }
   
   #message {
	   display: inline-block;
	   width: calc(90% - 60px); /* Adjust width based on button width */
	   padding: 5px;
	   border: 1px solid #ccc;
	   border-radius: 5px;
	   margin-right: 5px;
	   font-size: 16px;
	   box-sizing: border-box; /* Ensure padding is included in the element's width */
	   vertical-align: middle;
   }
   
   #send-btn {
	   padding: 10px 10px;
	   border: none;
	   background-color: #007bff;
	   color: #fff;
	   cursor: pointer;
	   border-radius: 5px;
	   font-size: 16px;
   }
   /* end of styling forchatbox */
   /* The switch - the box around the slider */
   .switch {
	   position: relative;
	   display: inline-block;
	   width: 60px;
	   height: 34px;
   }
   
   /* Hide default HTML checkbox */
   .switch input {
	   opacity: 0;
	   width: 0;
	   height: 0;
   }

   .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    -webkit-transition: .4s; /* Safari */
    -moz-transition: .4s; /* Older Firefox */
    -ms-transition: .4s; /* Older IE */
    -o-transition: .4s; /* Older Opera */
}

input:checked + .slider {
    background-color: #2196F3;
    -webkit-transition: .4s; /* Safari */
    -moz-transition: .4s; /* Older Firefox */
    -ms-transition: .4s; /* Older IE */
    -o-transition: .4s; /* Older Opera */
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px); /* Safari */
    -moz-transform: translateX(26px); /* Older Firefox */
    -ms-transform: translateX(26px); /* Older IE */
    -o-transform: translateX(26px); /* Older Opera */
    transform: translateX(26px);
}
   
   #contact-info{
	width:80%;
	margin:0 auto;
	height: 30px;
	text-align: left;
	color:#fff;
   }
   
   .footer-links{
	   font-family:Calibri, 'Book Antiqua', Arial;
	   font-size:16px;
	   color:#b2abb4;
	   font-weight:normal;
	   vertical-align: middle;
   }
   
   .footer-links-left{
	   font-family:Calibri, 'Book Antiqua', Arial;
	   font-size:16px;
	   color:#fff;
	   font-weight:normal;
	   float: left;
   }
   
   /* Basic styling for tabs */ 
   .tabs { display: flex; cursor: pointer; } 
   .tab { 
	   padding: 10px 20px; 
	   background: #fff;
		border: 1px solid #ccc; 
		margin-right: 5px; 
	   } 
   .tab.active 
   { 
	   background: #415f43; 
	   color:#fff;
   } 
   .tab-content 
   { 
	   display: none; padding: 20px; border: 1px solid #ccc; margin-top: -1px; 
   } 
   .tab-content.active
	{
		display: block;
   }

   #subscribe-blog{
	width:90%;
	border:1px solid #000;
	background-color: #a8a2fd;
	margin-left:5%;
	color:#fff;
	padding:5px;
}

#subscribe-email{
	width:90%;
	margin:1%;
}

#subscribe-button{
	width:90%;
	margin-left:1%;
}
}
@media (min-width: 769px) {
	
body {
     font-family: 'Nunito', Verdana, Geneva, Tahoma, sans-serif;
     font-size: 12px; 
     Line-height: 160%;
     padding: 0px;
  /*   background-color: red;*/
	 margin: 0px 0px 0px 0px;
	 height: 100%; /* 100% of the viewport height */
	 background-color: #fff;
}

.main-puzzle-5{
	height:280px;
	margin-top:20px;
	position: relative;
}

.main-puzzle-6{
	height:720px;
	margin-top:20px;
	position: relative;
}

.main-puzzle-7{
	height:300px;
	margin-top:20px;
	position: relative;
}
.main{
    width:100%;
	height:500px;
    margin-left:10%;
	margin-top: 5%;
	position: auto;
}

.main-2{
    width:100%;
	height:500px;
    margin-left:1%;
	margin-top: 5%;
}

.main-3{
    width:100%;
	height:500px;
    margin-left:5%;
	margin-top: 5%;
}

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.275);
  }

.shulte-grid{
	display: grid;
    grid-template-columns: 15% 15% 15% 15% 15%;
    grid-template-rows: 40% 40% 40% 40% 40%;
    font-size: 2em;
}
.shulte-grid div{
    background-color: #8cc994;
	color:#343534;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}

.shulte-grid-2{
	display: grid;
    grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%;
    grid-template-rows: 20% 20% 20% 20% 20% 20% 20% 20%;
    font-size: 2em;
}

.shulte-grid-2 div{
    background-color: #8cc994;
	color:#343534;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}


.shulte-grid-3{
	display: grid;
    grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
    grid-template-rows: 15% 15% 15% 15% 15% 15% 15% 15% 15% 15%;
    font-size: 1.5em;
}

.shulte-grid-3 div{
    background-color: #8cc994;
	color:#343534;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}

.container-grid {
    display: grid;
    grid-template-columns: 20% 20% 20%;
    grid-template-rows: 60% 60% 60% 60%;
    font-size: 2em;
}

.container-grid div{
    background-color: #8cc994;
	color:#8cc994;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}

.container-grid-2 {
    display: grid;
    grid-template-columns: 20% 20% 20%;
	grid-template-rows: 50% 50% 50% 50% 50%;
    font-size: 2em;
}

.container-grid-2 div{
    background-color: #8cc994;
	color:#f3f8f4;
    margin:1%;
	text-align: center;
    padding: 0;
    box-sizing: border-box;
}

/* CSS for heading tags */
h1 {
    font-size: 1.17em; /* Default: 2em */
}

h2 {
    font-size: 1em; /* Default: 1.5em */
}

h3 {
    font-size: .9em; /* Default: 1.17em */
}

h4 {
    font-size: .8em; /* Default: 1em */
}

h5 {
    font-size: 0.7em; /* Default: 0.83em */
}

h6 {
    font-size: 0.6em; /* Default: 0.67em */
}

.logo{
	width:24%;
	height:65px;
	margin-top:20px;
	position:absolute;
	border:4px solid #7c8581;
}
.main-content{
	height: 100%;
}

#comp {
     position: absolute;
     width:100%;
	 background-color:#f9fafa;
	/*background-image:url(Images/square2.png);*/
     left: 0px;
     top:0px;
	 margin:0 auto;
     border: 0px solid #000;
	 box-shadow: 3px 3px 3px 3px #c8c8c8;
	-moz-box-shadow: 3px 3px 3px 3px #c8c8c8;
    -webkit-box-shadow: 3px 3px 3px 3px #c8c8c8;
}

#header-content{
	width:100%;
	height:140px;
	margin-left:0%;
	/*background-image: 
    linear-gradient(to right, hsl(0, 5%, 81%) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(0, 5%, 81%) 1px, transparent 1px); 
	background-size: 50px 50px; */
	background-image: repeating-linear-gradient(
    25deg,             
    #c3cfb6,             
    #cae6b1 2px,         
    transparent 1px, 
    transparent 5px   
    );
    
	border-top:6px solid #fff;
	border-bottom:6px solid #071930;
	background-color: #caf1f0;
}
#header_bg
{
/*background-image:url(Images/square2.png);*/
height:120px;
}
#header_block
{
	 width:71%;    
     padding: 0px;
	 height:0px;
	 margin:0 auto;
	 background-color:#ecffe0;

}
#Logo {
     position: relative;
     width:72%;
	 margin:0 auto;
	 height:0px;
}

#wrap {
     
    /* height:1524px;*/
     width:980px; 
	 height:100%;
     padding: 5px;
	 margin:0 auto;
     border: 0px solid #000;
	 background-color:#ffffff;
	 box-shadow: 3px 3px 3px 3px #c8c8c8;
	-moz-box-shadow: 3px 3px 3px 3px #c8c8c8;
    -webkit-box-shadow: 3px 3px 3px 3px #c8c8c8;
	 
}

#content-area {
	width:71%;
	/*height:420px;*/
    margin:0 auto;
	margin-top:152px;
	border: 1px solid #d3f0d2;
	background-color:#fff;
	padding: 0px;
	font-family: verdana, Helvetica, serif;
	font-size: 13px;
	box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
}

#content-area-post-ads{
	width:71%;
	/*height:1650px;*/
    margin:0 auto;
	margin-top:152px;
	border: 1px solid #d3f0d2;
	background-color:#fff;
	padding: 5px;
	font-family: verdana, Helvetica, serif;
	font-size: 13px;
	box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
}
#content-area-register {
	width:70%;
    margin:0 auto;
	margin-top:161px;
	border: 1px solid #d3f0d2;
	background-color:#fff;
	padding: 5px;
	font-family: verdana, Helvetica, serif;
	font-size: 13px;
	box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
}

#content-area-blog{
	width:71%;
	margin:0 auto;
	margin-top:152px;
	border: 1px solid #d3f0d2;
	background-color:#fff;
	padding: 0px;
	font-family: verdana, Helvetica, serif;
	font-size: 13px;
	box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
}

#content-area-posted-ads{
	width:71%;
	/*height:1480px;*/
    margin:0 auto;
	margin-top:152px;
	border: 1px solid #d3f0d2;
	background-color:#fff;
	padding: 0px;
	font-family: verdana, Helvetica, serif;
	font-size: 13px;
	box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
}

#content-area-terms{
	width:71%;
	/*height:1420px;*/
    margin:0 auto;
	margin-top:152px;
	border: 1px solid #d3f0d2;
	background-color:#fff;
	font-family: verdana, Helvetica, serif;
	font-size: 13px;
	box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
}

#content-area-settings{
	width:71%;
	height:580px;
    margin:0 auto;
	margin-top:152px;
	border: 1px solid #d3f0d2;
	background-color:#fff;
	padding: 0px;
	font-family: verdana, Helvetica, serif;
	font-size: 13px;
	box-shadow: 3px 3px 3px 3px #508d55;
	-moz-box-shadow: 3px 3px 3px 3px #508d55;
	-webkit-box-shadow: 3px 3px 3px 3px #508d55;
}

#content a
{
color:#FFFFFF;
}

#sidebar{
	height: 1214px;
	position: absolute;
	margin-left:0px;
	top:20px;
	width: 197px;
	/*border: 1px solid #000;
	background-color: #FFFFCC;*/
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	  font-size:16px;
	padding: 5px;         
}
/*Navigation*/
html, body, div, span, applet, object, iframe, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, header, hgroup, 
menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: top;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
}

/* HTML5 display-role reset for older browsers */
ol, ul {
	list-style: none;
}
ul.listTerms{
	list-style-type: square;
	padding:10px;
	margin-left:10px;
	font-size:15px;
}

ul.guidance{
	list-style-type: square;
	padding:10px;
	margin-left:10px;
	font-size:12px;
	color:#114915;
   }
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* ---------- FONTAWESOME ---------- */

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* ---------- GENERAL ---------- */
a { text-decoration: none; color:#202e23}

.clearfix { *zoom: 1; } /* For IE 6/7 */
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
}
.clearfix:after { clear: both; }

/* ---------- side_navigation ---------- */

#side_navigation {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	width: 28%;
	font-size:11px;
}

#side_navigation .text-heading
   {
	 font-size: 13px;
	 font-weight: bold;
   }
   

#side_navigation header {
	background-color: #4f4245;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	color: #ecf0f1;
	font-weight: bold;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

#side_navigation ul {
	background-color: #ecf0f1;
}

#side_navigation ul li {
	border-bottom: 1px solid #a6a8a9;
	color: #776b6c;
	height: 40px;
	line-height: 40px;
	padding: 0 14px;
}

#side_navigation ul li:hover {
	background-color: #56a3c7;
	color: #ecf0f1;
}

#side_navigation ul li:hover a {
	color: #ecf0f1;
}

#side_navigation ul li a {
	color: #3e4146;
}

#side_navigation ul li.active{
	background-color:#97c981;
	
}

#side_navigation ul li.heading{
	background-color:#577052;
	color: #fff;
}

#side_navigation ul li.active{
color:#fff;
}


/*start qustions and answers styling*/
.qa-container { 
	width: 90%; margin: auto; 
} 
.qa-item { 
	border-bottom: 1px solid #ddd; 
	padding:1px;
} 
.question {
	padding: 15px; cursor: pointer; background-color: #1b2c23; transition: background-color 0.3s;color: #fff; 
} 
.question:hover { 
   background-color: rgb(20, 75, 56); color: #fff; 
} 
.answer-div { 
	display: none; 
	padding: 15px; 
	background-color: #fafafa;
}
/* End of Questions and answers styling*/
 
/* Base styles */ 
.textHeader{
    font-size: 14px;
    text-align: left;
    margin:0px;
	font-weight: bold;
}

.header-strong{
	font-size: 14px;
	text-align: left;
	margin:0px;
	font-weight: bold;
    color:#370a8a;
   }

.bold-small{
	font-size: 12px;
	font-weight: bold;
}

.textSubHeader{
    font-size: 14px;
    text-align: left;
    margin:0px;
	font-weight: bold;
	color:#797272;
}

.linkHeader{
	color: #d84907;
	font-size: 12px;
}

.textHeaderBig{
	font-size: 20px;
	font-weight: bold;
	font-family: Tahoma, sans-serif;
}

.textNormal{
	font-size: 13px;
	font-family: Tahoma, sans-serif;
}

.textMedium{
	font-size: 13px;
	font-family: Tahoma, sans-serif;
}

.textBold{
	font-size: 13px;
	font-family: Tahoma, sans-serif;
	font-weight: bold;
	color:#8d45ec;
}

.description{
	padding:2px;
}

.post-info{
	padding:5px;
	border:1px solid #000;
	margin-top:10px;
	background-color: #83a0ee;
	color:#fff;
	font-weight: bold;
}

.chat-option,.post-reply{
	width: 120px;
	background-color: #fff;
	padding:5px;
	margin-top:10px;
	border: 1px solid #000;
	cursor: pointer;
}

.phone-option{
	width:160px;
	padding:5px;
	border:1px solid #000;
	margin-top:10px;
	cursor: pointer;
}

.phone-details{
	color:#0b99eb;
	font-weight:bold;
	font-size:14px;
}

.bread-crumb{
  background-color: #b4c5b2;
  padding:1px 6px;
  border:1px solid #fff;
  width:99%;
  color:#640257;
  margin:1px;
}

.no-posts{
	padding:5px;
	border:1px solid #000;
	background-color: #fff;
	margin-top:10px;
	width:72%;
}

span.textContent{
    font-size: 13px;
    text-align: left;
    margin:0px;
	font-weight: bold;
}


.mainContent{
	color: #131212;
	font-family: Tahoma, sans-serif;
}

.subContent{
	color: #5f5e61;
	font-family:Arial, sans-serif;
	padding:5px;
}

.content-Div{
	width:95%;
	height: 100%;
}

#banner-area-1 {
    text-align: center; /* Center the contents */
    background-color: #abdbad; /* Light grey background */
    width:100%; /* Padding around the content */
	height:256px;
}

.banner-image{
	width:92%;
	height:92%;
	margin:2%;
}


#advertise-area-1 {
    text-align: center; /* Center the contents */
    background-color: #eeebeb; /* Light grey background */
    width:90%; /* Padding around the content */
	height:256px;
    border: 1px solid #ddd; /* Light grey border */
    border-radius: 5px; /* Rounded corners */
    margin-left:5%; /* Vertical spacing */
}

#advertise-area-4 {
    text-align: center; /* Center the contents */
    background-color: #f0f0f0; /* Light grey background */
    width:80%; /* Padding around the content */
	height:100px;
    border: 1px solid #ddd; /* Light grey border */
    border-radius: 5px; /* Rounded corners */
    margin-left:10%; /* Vertical spacing */
}

#search-bar {
    text-align: center; /* Center the child elements */
    margin: 20px 0;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#search-bar form {
    display: inline-block; /* Makes the form act like an inline element */
    text-align: left; /* Aligns contents to the left */
    max-width: 600px; /* Limits width for the search form */
}

.content-main-ad-descrition{
	display: inline-block;
    vertical-align: top;
    width: 100%;
	background-color: #faf9f9;
	padding:0px;
}

.image-content-ad-description{
	width:100%;
	height:300px;
	background-color: #0e0202;
}

#super-container {
	display: inline-block;
	width: 100%; /* Adjust as needed */
	vertical-align: top;
}


.content-category,.advertise-area{
	display: inline-block;
	 width: 100%;
	 margin-bottom: 10px; /* Adjust spacing between divs */
	 box-sizing: border-box;
}

.content-category-1,.side_navigation{
	display: inline-block;
	 margin-bottom: 10px; /* Adjust spacing between divs */
	 box-sizing: border-box;
}

.ad-image{
	width:96%;
	height:140px;
	padding: 5px;
   }

/* content-main used for vertical -alignement */
.content-main {
    display: inline-block;
    vertical-align: top;
    width:24%; /* Adjust as needed for spacing */
	margin:2px;
	padding:0px;
}

.container-main-1{
    display: inline-block;	
	width: 100%;
	border: 1px solid #e0b9a7;
	padding: 0px;
	margin: 2px;
}

.content-main-category {
    display: inline-block;
    vertical-align: top;
    width:32%; /* Adjust as needed for spacing */
	padding: 2px;
}

.container-main{
	   display: inline-block;	
	   width: 100%;
	   border: 1px solid #e0b9a7;
	   padding: 0px;
	   margin: 1px;
   }

.container-main-home {
	display: inline-block;	
	width: 100%;
	border: 1px solid #e0b9a7;
	padding: 0px;
	margin: 0px;
}
.container-main-search-bar {
    display: inline-block;
    width: 100%;
    padding: 1px;
    margin: 1px;
}

.container-main-ad-description{
    display: inline-block;
    width: 100%;
    padding: 1px;
    margin: 1px;
}

.container {
    display: inline-block;
    width: 100%;
    margin: 1px;
}

.image-content, .ad-content {
    display: inline-block;
    vertical-align: top;
    width: 98%; /* Adjust as needed for spacing */
    padding: 1px;
}

.advertise-area{
	margin-left:5%;
	margin-top:5%;
}


#advertise-area-2,#advertise-area-3{
	display: inline-block;
    vertical-align: top;
	width:256px;
	height:256px;
	background-color: #ccc;
	margin-left:10%;
	margin-top:10px;
}

.ad-inner-content {
    display: inline-block;
    width: 100%;
    white-space: nowrap; /* Prevent line breaks */
	font-family: Arial, sans-serif;
	font-size:12px;
	padding:0px;
}

.ad-ai-content {
    display: inline-block;
    width:100%;
    white-space: nowrap; /* Prevent line breaks */
	font-family: Arial, sans-serif;
	font-size:12px;
	padding:2px;
}
.ad-category, .ad-location {
    display: inline-block;
    vertical-align: top; /* Align items to the top */
    margin-right: 10px; /* Adjust spacing as needed */
    white-space: normal; /* Allow text to wrap inside the boxes */
}

#ai-header, #ai-suggestions {
    display: inline-block;
    vertical-align: top; /* Align items to the top */
    margin-right: 10px; /* Adjust spacing as needed */
    white-space: normal; /* Allow text to wrap inside the boxes */
}

#ai-suggestions {
	align-items: left;
}
.ad-location{
	float:right;
}

.fontSmall{
	font-size: 11px;
}

.ad-main-content{
	width:50%;
	padding:5px;
	background-color: #fff;
}

.ad-suboptions{
	width:45%;
	background-color: #fff;
}

.ad-main-content,.ad-suboptions{
	display: inline-block;
    vertical-align: top; /* Align items to the top */
    margin: 2px; /* Adjust spacing as needed */
    white-space: normal; /* Allow text to wrap inside the boxes */
	padding:5px;
}

.ad-option-content-1{
	font-size:14px;
	font-weight: bold;
}

.ad-option-content-1,.ad-option-content-2{
	display: inline-block;
    vertical-align: top; /* Align items to the top */
    margin: 2px; /* Adjust spacing as needed */
    white-space: normal; /* Allow text to wrap inside the boxes */
}


.text-container, .input-container {
    display: inline-block;
    vertical-align: top; /* Align items to the top */
    margin-right: 10px; /* Adjust spacing as needed */
    white-space: normal; /* Allow text to wrap inside the boxes */
	width:140px;
	text-align: center;
	font-weight: bold;
}

.text-container-table, .input-container-table {
    display: inline-block;
    vertical-align: top; /* Align items to the top */
    margin-right: 1px; /* Adjust spacing as needed */
    white-space: normal; 
	/* Allow text to wrap inside the boxes */
	width:140px;
	text-align: center;
	font-weight: bold;
}

.input-container{
	margin-top: 0;
	width:200px;
	padding:1px;
}

.input-container-1{
	margin-top: 0;
	width:240px;
	padding:10px;
}

.text-container{
	padding:10px;
}


.post-Ad-Div {
	font-size: 15px;
	background: #c9eaf5;
	position:absolute;
	top:170px;
	width:99%;
	left:5px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	border-left: 1px;
	border-right: 1px;
	border-top:1px;
	border-bottom:1px;
	border-color:#CC3333;
	font-weight: bold;
	height:674px;
	
		
}

.userInfo{
	margin:5px;
}

.error-Div{
    background-color: #EE4B2B;
    color:#fff;
    padding:2px;
    font-size: 14px;
    display: none;
}

.success-Div{
    background-color: #2b59ee;
    color:#fff;
    padding:2px;
    font-size: 14px;
    display: none;
}

#ai-suggestions-header,#ai-suggestions-header{
	display:inline-block;
	vertical-align: top;
}

input.form{
    width:100%;
    height:30px;
    font-size: 16px; 
}

input.feebackform{
    width:400px;
    height:30px;
    font-size: 16px; 
}

select.form{
    width:100%;
    height:30px;
    font-size: 16px; 
}

textarea{
    width:100%;
    height:100px;
    font-size: 16px; 
}

input[type=checkbox]{
    width:20px;
    height:20px;
}

#preview{
	width:100px;
	height:100px;
	border:1px solid transparent;
}

.spinner-container,.spinner-container-1{
  display: none;
}

.spinner-container-sub{
	display: none;
  }
#spinner-sub{
	width: 20px;
	height: 20px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}
#spinner {
	width: 20px;
	height: 20px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}
.spinner-text { 
	font-size: 16px; color: #333;
	
 }
 #spinner,.spinner-text { 
	display:inline-block;
 }

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.ad-Div{
	background-color: #99a799;
	margin-left:10%;
	padding:8px;
	color:#000;
	margin-top:1%;
	width:80%;
}

.adInfo{
	margin:0px;
	padding:2px;
	display: inline-block;
}

.content-Holder{
    font-size: 14px;
    text-align: left;
	width:200px;
    margin:0px;
	display: inline-block;
	vertical-align: top;
}

.input-Holder{
	width:250px;	
	display: inline-block;
	vertical-align: top;
}

.content-Holder, .input-Holder {
    display: inline-block;
    vertical-align: top; /* Align items to the top */
    margin-right: 1px; /* Adjust spacing as needed */
    white-space: normal; /* Allow text to wrap inside the boxes */
	text-align: center;
	font-weight: bold;
}


button[type=submit]{
    width: 150px; 
    height: 40px; 
    display: inline-block; 
    box-sizing: border-box; 
    padding: 5px; 
    border: 1px solid #ccc; 
    background-color: #114915; 
    color: white; 
    font-size: 16px; 
    cursor: pointer; 
}
.post-content{
	font-size: 12px;
	/*background: #cce4fc;
	position:absolute;*/
	margin-top:0px;
	width:100%;
	height:80px;
	margin-left:10px;
	font-family: alike, actor, Arial, Helvetica, sans-serif;	
	color: #353530;
	z-index:2;	
}

.post-content-blog{
	font-size: 12px;
	width:99%;
	margin-left:10px;
	font-family: alike, actor, Arial, Helvetica, sans-serif;	
	color: #353530;
}
.normal-text{
font-size:12px;
}

.align-right{
	font-size:12px;
	float:right;
}
.post-description{
	height:100%;
    /*position: absolute;*/
    border:1px;
	padding:20px;
	width:95%;
	margin-left:0 auto;
}

.register-Div{
	/*height:330px;*/
    background-color:#d4d2e4;
    /*position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:20px;
	width:80%;
	margin:0 auto;
	margin-top:2%;
}

.feedback-Div{
	width:48%;
	padding:25px;
}

.blog-Div{
	width:95%;
	padding:10px;
}

.feedback-content{
	width:48%;
	padding:25px;
}

#message-blog{
	width:400px;
	height:225px;
}

#reply-blog{
	width:280px;
	height:180px;
}

#posts-content-main,#side_navigation{
	display: inline-block;
    vertical-align: top;
}

#posts-content-main{
    border:1px;
    border-color: #585656;
	padding:10px;
	width:68%;
}

#posts-content,#side_navigation{
	display: inline-block;
    vertical-align: top;
}

#posts-content{
	/*height:260px;*/
    /*background-color:#fff;
    position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:5px;
	width:65%;
}

#settings-content{
	/*height:180px;
    background-color:#fff;
    position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:20px;
	width:51%;
}

#change-settings-content{
	/*height:160px;*/
    background-color:#fff;
    /*position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:20px;
	width:45%;
}

#settings-content,#side_navigation{
	display: inline-block;
    vertical-align: top;
}

#change-settings-content,#side_navigation{
	display: inline-block;
    vertical-align: top;
}

#posts-content-main,#side_navigation{
	display: inline-block;
    vertical-align: top;
}

#posts-content-home{
	/*height:260px;
    position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:10px;
	width:95%;
	margin:0px;
}

#terms-content{
	height:100%;
    /*position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:20px;
	width:96%;
	margin:0px;
}

.terms-div{
	padding:5px;
	font-size:15px;
}

.terms-bold{
	padding:5px;
	font-weight: bold;
}

.ad-data{
	margin-left:5%; 
	width:220px;
	color:#00a1e6;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
}

#posts-content-ad-description{
	/*height:260px;
    position: absolute;*/
    border:1px;
    border-color: #a10a0a;
	padding:20px;
	width:98%;
}

.content-Header{
	/*width:98%;
	height:25px;*/
	background-color:#131212;
	color:#fff;
	margin:10px;
	padding:5px;
}


#footer {
    width: 100%;
    background-color: #362f2f; /* Optional: Background color for the footer */
    text-align: center; /* Center align the text */
	padding:1px;
    bottom: 0;
	/*background: url(Images/footer.gif);*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
    left: 0;
    right: 0;
	margin-top:0px;
	height: 120px;
}

#apDiv2{
	margin:20px;
}
#apDiv2 a {
    color: #b2abb4; /* Link color */
    font-size: 16px;
    text-decoration: none;
    margin: 0 10px; /* Horizontal margin */
}

#apDiv2 a:hover {
    text-decoration: underline;
}

#social-media-div{
	width:50%;
	margin:0 auto;
	color: #fff;
	float:left;
	margin:5px;
}


#divsearch {
	border:0px solid black;
	padding:0px;
	width:30em;
	margin-top:10px;
	margin-left:135px;
}

table A:link 
{
	text-decoration: none;	
	
}
table A:visited 
{text-decoration: none;
color: #206425;
}
table A:active 
{text-decoration: none;
color: #66ffff;
}
table A:hover 
{
color: #ff6699;}

#postAd{
	margin-left:76%;
	padding:2px;
	background-color: #f3a052;
	height:20px;
	position: absolute;
	margin-top:-20px;
	border: 2px solid #fff;
}

#postFeedBack{
	padding:8px;
	background-color: #bd7838;
	width:92px;
	height:15px;
	color:#fff;
	margin-left:10px;
}

#postFeedBack a{
	font-family: Arial, Helvetica, sans-serif;
	color:#fff;
	font-weight: bold;
}

#blog{
	padding:5px;
	background-color: #88b3db;
	width:60px;
	height:15px;
	color:#fff;
	margin-left:10px;
	margin-top:5px;
}

#blog a{
	font-family: Arial, Helvetica, sans-serif;
	color:#fff;
	font-weight: bold;
}

#postAd a{
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight: bold;
	font-size:15px;
}

.menu-text {
    display: none;
    margin-left: 8px;
    font-size: 16px;
  }

.arrow{
	width:20px;
	height:18px;
}

.blog-title {
	font-size: 14px; 
	font-family: alike, actor, Arial, Helvetica, sans-serif;		
	font-weight:bold;
	text-decoration:none;
	padding:5px;
	background-color:#a0c9aa;
	
}

.blog-title a{
	color: #fff;
}

.blog-title a:hover,a:visited{
	color: #206425;
}
.logout-container{
    background-color:#d4d2e4;
    border:1px;
    border-color: #585656;
	padding:10px;
	margin:10%;
}

.capcha-text{
	font-size:16px;
}
.login-container{
    /*height:260px;*/
    background-color:#d4d2e4;
    /*position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:10px;
	width:80%;
	margin:6%;
}

.reset-container{
    /*height:150px;*/
    background-color:#d4d2e4;
    /*position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:10px;
	width:48%;
	margin-left:10%;
	margin-top:5%;
	margin-bottom: 10%;
}

#message-container{
	display: inline-block;
	vertical-align:top;
    height:300px;
    background-color:#d4d2e4;
    /*position: absolute;*/
    border:1px;
    border-color: #585656;
	padding:10px;
	width:90%;
	margin-left:5%;
	margin-top:5%;
}
.receiver-details,.chatbox{
	display: inline-block;
}

.receiver-details{
	padding:5px;
	background-color: #fff;
	width:30%;
	margin-top:50px;
}

#login-user-content{
	margin-left:62%;
	top:0px;
	position: absolute;
	padding:2px;
	background-color: #b8d0dd;
	color:#242222;
}

#login-Div{
	margin-left:80%;
	padding:12px;
	background-color: #fff;
	width:50px;
	height:15px;
	position: absolute;
	top:0px;
	padding:10px;
}

#navigation-elements{
	position:absolute;
	margin-left:10%;
	background-color: red;
}

#dashboard-Div{
	margin-left:14.5%;
	background-color: #084061;
	width:75px;
	height:20px;
	padding:5px;
	position: absolute;
	margin-top:-24px;
	border: 2px solid #fff;
}

#dashboard-Div a{
	color:#fff;
}

#login-Div a{
	font-family: Arial, Helvetica, sans-serif;
	color:#000;
	font-weight: bold;
}

/*start search-container css*/
.search-container { position: relative; 
	display: inline-block;
   float:right;width:100%;left:20%} 
#searchBox { width: 80%; 
	padding: 10px; padding-left: 40px; 
	/* Ensure space for the icon */ 
	font-size: 16px;
	 border: 1px solid #ccc;
	  border-radius: 5px; } 
.ai-icon { 
	position: absolute; 
	left: 10px; 
	top: 50%; 
	transform: translateY(-50%); 
	font-size: 20px; 
	color: #9f23c5;
	pointer-events: none; /* Ensures the icon does not interfere with input */
 }

 .ai-icon-small { 
	position: absolute; 
	left: 5px;
	top: 30%; 
	transform: translateY(-50%); 
	font-size: 12px; /* Smaller size for the small star */
    color: #b312e4; /* Gold color for small star */ 
	pointer-events: none; /* Ensures the icon does not interfere with input */
 }
  /* end of search-container /*

  /*start of styling for chatbox */
  .chatbox {
    /*position: absolute;*/
    bottom: 0px;
    right: 10px;
    width: 60%;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chatbox-header {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chatbox-body {
    padding: 10px;
    height: 150px;
    overflow-y: auto;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
}

#close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

#message {
    display: inline-block;
    width: calc(90% - 60px); /* Adjust width based on button width */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 16px;
    box-sizing: border-box; /* Ensure padding is included in the element's width */
    vertical-align: middle;
}

#send-btn {
    padding: 20px 20px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}
/* end of styling forchatbox */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    -webkit-transition: .4s; /* Safari */
    -moz-transition: .4s; /* Older Firefox */
    -ms-transition: .4s; /* Older IE */
    -o-transition: .4s; /* Older Opera */
}

input:checked + .slider {
    background-color: #2196F3;
    -webkit-transition: .4s; /* Safari */
    -moz-transition: .4s; /* Older Firefox */
    -ms-transition: .4s; /* Older IE */
    -o-transition: .4s; /* Older Opera */
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px); /* Safari */
    -moz-transform: translateX(26px); /* Older Firefox */
    -ms-transform: translateX(26px); /* Older IE */
    -o-transform: translateX(26px); /* Older Opera */
    transform: translateX(26px);
}

#footer-div{
	width:72%;
	margin:0 auto;
	height: 30px;
}

#contact-info{
	width:45%;
	margin:0 auto;
	color:#fff;
	float: right;
}

#partner-website-div{
	width:80%;
	position: absolute;
	margin-top: 50px;
	color:#daecd6;
}

#partner-website-div a{
	text-decoration: underline;
}
   

.footer-links{
	font-family:Calibri, 'Book Antiqua', Arial;
	font-size:16px;
	color:#b2abb4;
	font-weight:normal;
	float:right;
}

.footer-links-left{
	font-family:Calibri, 'Book Antiqua', Arial;
	font-size:16px;
	color:#fff;
	font-weight:normal;
	float: left;
}

/* Basic styling for tabs */ 
.tabs { display: flex; cursor: pointer; } 
.tab { 
	padding: 10px 20px; 
	background: #fff;
	 border: 1px solid #ccc; 
	 margin-right: 5px; 
	} 
.tab.active 
{ 
	background: #415f43; 
	color:#fff;
} 
.tab-content 
{ 
	display: none; padding: 20px; border: 1px solid #ccc; margin-top: -1px; 
} 
.tab-content.active
 {
	 display: block;
}
#subscribe-email{
	width:50%;
	margin:1%;
}

#subscribe-button{
	width:40%;
	margin-left:1%;
}
#subscribe-blog{
	width:50%;
	border:1px solid #000;
	background-color: #a8a2fd;
	margin-left:25%;
	color:#fff;
	padding:5px;
}


.socialmedia-links,socialmedia-images{
	display: inline-block;
}


#footer-div-left,#footer-div-right{
	display: inline-block;
}

#support-content{
	width:80%;
	margin: 0 auto;
	height:20px;
}

#contact-info,#social-media-div{
	display: inline-block;
}



}