@import url("/includes/css/responsive-tables.css");

.textcolor-verifiedblue {
	color:#0866ff;	
}

.jh-align-top {
	align-items: flex-start !important;
}

.jh-align-top input[type="checkbox"].form-check-input {
	margin-top: 5px !important;
}

.testimonial.testimonial-style-2 .testimonial-author img {
max-width: 120px;
max-height: 120px;
}

ul.breadcrumb li a {
	color: var(--primary--200);
}

.footer-copyright nav#sub-menu ul li a {
	color: var(--primary--200) !important;
}

.recipe thead th {text-wrap: nowrap;}

.nav-pills .nav-link {
  background-color: #eeeeee !important;
  margin-right: 0.25em !important;
  margin-bottom: 0.25em !important;
}
.nav-pills .nav-link:hover {
  background-color: #dddddd !important;
}
.nav-pills .nav-link.active {
  background-color: var(--primary) !important;
  color: #fff !important;
}

.tab-pills-content {
	background-color: var(--grey-100) !important;
	padding: 1rem !important;
	margin-top: 0px !important;
	border: var(--bs-border-color) 1px solid!important;
	border-radius: 0rem 0rem 15px 15px !important;
}

@media (min-width: 992px) {
	#header .header-nav-main {
		overflow:scroll !important;
	}
}

@media (max-width: 768px) {
  html, body, p {
	font-size: 16px;
	line-height: 28px;
  }
  .form-control, .form_select {
	font-size: clamp(16px, 1rem, 9999px) !important;
  }
}

.nav-tabs.nav-tabs-sm li .nav-link {
	padding: 6px 10px; /* Adjust these values as needed */
}

.google-map {margin:0px;width:auto;height:auto;background: none}

.badge {white-space:normal;}

.equal {
  display: flex;
  flex-wrap: wrap;
}
.equal > div[class*='col-'] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.equal .featured-box {
  height: 100%;
}

.badge-textcount {
	border-radius: 5px !important;
	bottom: 5px; right: 5px;
	background-color:#666666;
	color:#FFFFFF;
	opacity: 0.5;
}

/* ----------------------------------------------------------------------- */
/* Responsive flex list for insertTableOfContents in functions.inc.php */
/* ----------------------------------------------------------------------- */
.responsive-flex-list {
	display: flex; /* Enables flexbox */
	flex-direction: column; /* Stacks items vertically by default */
	flex-wrap: wrap; /* Allows items to wrap onto new lines/columns */
	max-height: 2000px; /* Adjust this based on your content size to control when items wrap */
}

@media (min-width: 992px) { /* Adjust for lg screens and up */
	.responsive-flex-list {
		flex-direction: row; /* Aligns items in a row that wraps */
	}
	.responsive-flex-list li {
		width: 50%; /* Sets each item to take up half of the container width */
	}
}
/* ----------------------------------------------------------------------- */


/* ----------------------------------------------------------------------- */
/* Special GPX Waypoints List */
/* ----------------------------------------------------------------------- */
.gpx_waypoints_list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 800px) {
  .gpx_waypoints_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
  }

  .gpx_waypoints_list li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
  }

  .gpx_waypoints_list li strong {
	margin-bottom: 5px;
	text-align: left;
  }

  .gpx_waypoints_list li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
  }

  .gpx_waypoints_list li .fa-crosshairs {
	margin-right: 5px;
  }
}
/* ----------------------------------------------------------------------- */

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.form-with-icons .input-group-with-icons .position-relative {
	padding:0px !important;
	border:0;
}

.social-icons li:hover.social-icons-snapchat a {
	background: #FFFC00 !important;
}

.social-icons li:hover.social-icons-snapchat a i {
	color: #666666 !important;
}

.dropdown-input-tags {
	max-height:50vh;
	overflow-y:scroll;
}

input[type='color'] {
	height:36px;
	width:72px;
	border-radius: 4px;
	padding: 4px;
}

.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small,
.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small:hover,
.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small:focus  {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small p {
	font-size:0.85rem;
	font-weight: 500;
}

.badge-nice {
	padding: 0.5rem 1rem !important;
	font-size: 100% !important;
}
.pagination-results-badge {
	margin-right: 20px;
	margin-left: -20px;
	padding: 0px 10px;
	border: 1px solid #CCCCCC;
	font-size: small;
	border-left: none;
	border-radius: 8px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}


.text-yellow-star {color:#ffc107!important;}
.text-empty-star {color:#c6c6c6!important;}

.form-with-icons .datepicker .position-relative {width:100% !important;}

.input-group-with-icons .position-relative input {
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}
.input-group-with-icons span.input-group-text:last-child {
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}

/* Extend Bootstrap's form-switch for both inline and block displays */
.form-switch {
	margin-right:12px;
	margin-bottom: 0.25rem;
	padding-left:0;
	display: flex;
}
.form-switch .form-check-input {
	width: 4rem;
	min-width: 4rem;
	height: 2rem;
	margin-top: 0;
	margin-left:0;
}

.form-switch:not(.form-switch-inline) .form-check-label {
	flex: 0 1 auto; /* Allow the label to grow and shrink but prefer not wrapping */
	/* Introduce a max-width for the label if you want to control when it wraps */
	max-width: 100%; /* Adjust this value based on your layout needs */
}

.form-switch .form-check-label {
	margin-left: 0.5rem;
	margin-top: 0.25rem;
	flex: 1;
}

/* Additional CSS for inline display */
.form-switch-inline {
	display: inline-flex;
	align-items: center; /* Align items vertically */
}

.form-switch-inline .form-check-label {
	margin-left: 0.5rem; /* Adjust based on visual preference */
}

div.bootstrap-tagsinput {width:auto;}
.bootstrap-tagsinput .badge {
  margin: 2px 2px;
  padding:5px 8px;
}

msgavoidspam::after {content: attr(data-domain);}
msgavoidspam::before {content: attr(data-user);}
  
@media print {
	body > .body {
	  	margin: 0px !important;
  	}
 }
 
.form-with-icons .form-control {
	padding-left:12px !important;
}

.form-with-icons .position-relative .form-control {
	padding-left:41px !important;
}

.form-with-icons .position-relative .form-select {
	padding-left:41px !important;
}

.form-with-icons .position-relative .form-control.ps-without-icon {
	padding-left: 12px !important;
}

.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small,
.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small:hover,
.tabs.tabs-simple .nav-tabs > li .nav-link.nav-link-small:focus  {
	  padding: 6px 15px;;
  }
  
  
.featured-boxes-style-5 .featured-box .icon-featured.icon-featured-small,
.featured-boxes-style-6 .featured-box .icon-featured.icon-featured-small,
.featured-boxes-style-7 .featured-box .icon-featured.icon-featured-small,
.featured-boxes-style-9 .featured-box .icon-featured.icon-featured-small {
	display: inline-block;
	font-size: 1em;
	height: 36px;
	padding: 0;
	width: 36px;
	margin-top: 0;
	margin-bottom: 4px;
	background-color: #FFF;
	border: 1px solid #dfdfdf;
	color: #777;
	line-height: 35px;
}
  
@media (max-width: 991px) {
	html.sticky-header-active #header .header-body {
		position: relative !important;
	}
	#header {
		height: auto !important;		
	}
	#header .header-nav-main nav {
		max-height: none !important;
	}
}

@media (max-width: 767px) {
	#header .header-nav-features .header-nav-features-user .header-nav-features-dropdown {
	    max-height: 80vh;
	    overflow-y: scroll;
	}
	.left_border_not_mobile {border-left:0px none !important;}
}

.drag_handle {
	display: flex;
	align-content: center;
	text-align:center;
	flex-direction: column;
	justify-content: center;
	cursor: grab;
}

.tabs.tabs-sm .nav-tabs > li .nav-link,
.tabs.tabs-simple .nav-tabs > li .nav-link:hover,
.tabs.tabs-simple .nav-tabs > li .nav-link:focus {
	padding:8px;
	font-size:14px;
}

ul.simple-post-list .post-meta{margin-left:25px;}
.input-group-nobackground {border:0px none;background:transparent;padding-left:0px;}
.input-group select.form-control  {height:calc(1.5em + .75rem + 2px);}
.checkbox-inline {margin-left:8px;margin-right:8px;}
.checkbox-inline input[type="checkbox"] {margin-right:4px;}

.social-icons li:hover.social-icons-meetup a {
	background: #ff6969 !important;
}

.bg-darkgrey {
	background-color:#DDDDDD;
	color:#666666;
	font-weight: normal;
}

/* Add here all your CSS customizations */
.masonry .masonry-item { width: 50% !important; }
@media screen and (min-width: 600px) {
	.masonry .masonry-item { width: 33% !important; }
}
@media screen and (min-width: 1024px) {
	.masonry .masonry-item { width: 25% !important; }
}

.list.list-icons.list-icons-sm li {padding-left:20px;}
.slick-prev:before, .slick-next:before {color:#62AC6E;}
.slick-dots {bottom:auto;}

.red {color:#ff0000;}

.tinycol {width:1px;white-space:nowrap;}

.note {font-size:smaller;color:#AAAAAA;font-style: italic}

.text-left {text-align:left !important;}

@media (max-width: 575px) {
	body, body p  {
		font-size: 16px;
		line-height:28px;
	}
}

/* VALID STATES */
input[type=text].valid,
input[type=password].valid,
input[type=email].valid,
input[type=tel].valid,
input[type=number].valid,
textarea.valid,
select.valid {
  border: 1px solid #70A41B;
}

/* ERROR STATES */
input[type=text].error,
input[type=password].error,
input[type=email].error,
input[type=tel].error,
input[type=number].error,
textarea.error,
select.error {
  border: 1px solid #990000;
}

div.checkbox.valid {
	border: 1px solid #9AA600;
	border-radius: 5px;
	padding: 5px;
	margin:2px;
}
div.checkbox.error {
	border: 1px solid #DF653E;
	border-radius: 5px;
	padding: 5px;
	margin:2px;
}

.gallery-album-title {
	text-align:left;
	font-size: 1.3em !important;
	border-top-right-radius: 2em;
	border-bottom-right-radius: 2em;
	position:absolute;
	bottom:0px;
	max-width:90%;
	color:#ffffff;
	background:rgba(0,0,0,0.70);
	letter-spacing:-0.05em;
	line-height:1.1em;
	bottom:12px;
	padding:6px 20px 6px 10px;
}

.thumb-info.thumb-info-bottom-info .thumb-info-title.gallery-item-title {
	width:100%;
	left:0px;
	max-width:100%;
	color:#ffffff;
	transition:transform .2s ease-out, opacity .2s ease-out;
	top:auto;
	bottom:0px;
	text-align:left;
	font-size: 1.4em !important;
	background-color:rgba(0,0,0,0.70);
	padding:10px;
	line-height:1.2em;
}