/* style for cookie message */
.js_enabled #cookie-message {
    display: none;
}

/* logo in navbar */
.logo-image {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: -6px;
}

/* ion icon font size */
ion-icon {
  font-size: 64px;
}

/* pieChart, vis Chart */
@media only screen and (max-width: 600px) and (orientation:portrait) {
	#myChart { display: none; }
	#myPieChart { display: none; }
	#vis1 { display: none; }
	#myChart1 { display: none; }
	#myPieChart1 { display: none; }
	#myChart2 { display: none; }
	#myPieChart2 { display: none; }
	#myChart3 { display: none; }
	#myPieChart3 { display: none; }
	#myChart4 { display: none; }
	#myPieChart4 { display: none; }
}

@media only screen and (min-width: 0px) and (max-width:600px) and (orientation:portrait) {
	#myChartWarning { display: block; }
	#myChartWarningA { display: block; }
	#myChartWarning2 { display: block; }
	#myChartWarning3 { display: block; }
	#myChartWarning4 { display: block; }
}

@media only screen and (min-width: 601px) and (max-width: 3000px) {
	#myChartWarning { display: none; }
	#myChartWarningA { display: none; }
	#myChartWarning2 { display: none; }
	#myChartWarning3 { display: none; }
	#myChartWarning4 { display: none; }
}

/* control for display of header text */
@media only screen and (min-width:700px) {
	.page-header h1 { font-size: 600%; }
	.page-header h2 { font-size: 400%; }
}


/* Social Media Icons */
.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}

.with-margins { margin: 10px; }
.no-margins { margin: 0px; }
hr { border-color: #CCCCCC; margin: 0; }

#footer-div a { 
	color:#00838f; 
}

.mini-carousel-caption {
	position: absolute;
	right:15%;
	bottom:30%;
	left:15%;
	z-index: 10;
	padding-top: 20px;
	padding-bottom: 20px;
	color:#FFFFFF;
	text-align: center;
}

.carousel .mini-carousel-caption {
  padding-bottom: 45px;
}

.carousel .mini-carousel-caption .material-icons {
  position: relative;
  top: 5px;
}

.bigger {
	font-size:110%;
}

.white {
	color: #FFF;
}

.pink { color:#e83e8c; }
.orange { color:#d7a287; }
.green { color:#73a371; }
.blue { color:#4280B8; } /* previous: #2196F3*/ 
.brown { color:#3F2A56; }
.red { color:#A83C49; } /* #F44336 */
.turquoise { color:#1abc9c; }
.yellow { color: #CFB500; }
.neanderthal {color: #00B140; }
.darkgreen {color: #304f20; } /*#304f20 */ /*#3b8517 */
.RAG_red { color: #A83C49; }
.RAG_amber { color: #d7a287; }
.RAG_green {color: #73a371; }
.darkteal {color:#25545c; }
.darkviolet {color: #433e78; }
.darkteal2 { color: #265248; }
.darklilac {color: #56518c; }
.purple2 {color: #8D8089; } /* #7a62b3 */
.pink2 {color: #C79A95;}

.traits {
	color: #809DC8;
	}

.healthrisks {
	color: #E3B9BA;
	}

.inheritedconditions {
	color: #80B692;
	}

.drugresponse {
	color: #50454F;
	}

.reproductivehealth {
	color: #E8D6D1;
}

.mentalhealth {
	color: #87CCE2;
}

.diet {
	color: #829C79;
}

.longevity {
	color: #C0CEE8;
}

.resultspic {
    width:auto;
    height:auto;
    padding-top: 5px;
    padding-bottom:5px;
    display: block;
    /*vertical-align: top; */
}

/*.reference a {
	color: #00838f;
} */

.reference a {
	color: #5F6F8E;
	transition: color 0.2s ease-in-out;
}

.reference a:hover {
    color: #8A9DBF; /* A lighter, brighter blue */
}
.reference a:active {
    color: #4A566E; /* A darker blue */
}

.reference2 a {
	color: #5F6F8E;
}

.invite2 {
	font-size: 140%;
}

.health-filter {
	background: rgba(0, 0, 0, 0.3);
}

.attribution {
	text-align: left;
	font-size: 50%; 
	margin-top:15px;
	margin-left:5px;
}

.attribution a {
	color: #1abc9c;
}

a.internal-link:link {text-decoration: none;}
a.interna-link:visited {text-decoration: none;}
a.internal-link:hover { color: #5F6F8E;}

.rect {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.legendMap ul {
    list-style-type: none;
    margin-top: -10px;
}

/* Default style (for larger screens) */
.ah_responsive-img {
    width: 60px;
    height: 60px;
    padding-right: 10px;
}

/* Media query for smaller screens (tablets and mobile phones) */
@media (max-width: 768px) {
    .ah_responsive-img {
        width: 60px;
        height: 60px;
        padding-right: 10px;
    }
}

@media (max-width: 576px) {
    .ah_responsive-img {
        width: 50px;
        height: 50px;
        padding-right: 5px;
    }

    /* Ensure text wraps properly within its parent and does not overflow */
    h3.card-title {
        white-space: normal;  /* Allows the text to wrap */
        word-break: break-word; /* Break long words if necessary */
        overflow-wrap: break-word; /* Ensures long words break within the boundaries */
        max-width: 100%; /* Prevents the text from overflowing out of its parent container */
    }
}

.btn-wrap {
	display: inline-block; /* Behaves like an inline element but allows block-like behavior */
	white-space: normal; /* Allows the text to wrap */
	word-wrap: break-word; /* Ensures long words will break to fit the button */
	max-width: 100%; /* Ensures the button doesn't extend beyond the parent's width */
	text-align: center; /* Center the text inside the button */
	padding: 10px 20px; /* Add some padding to make it more like a button */
	}

@media (max-width: 576px) {
	.btn-wrap {
		width: 100%; /* On small screens, the button will take the full width of its container */
		}
	}

/* mobile padding */
.mobile-padding {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 576px) {
	.mobile-padding {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ancient humans */
.ancient_humans_index {
	font-family:Norse-KaWl;
	font-weight:600;
	font-size: 250%;
	color:#092D5D;
}

.buttonpurple {
	background-color: #C79A95; /* #7a62b3*/
	color: #FFFF; }


	@media (max-width: 576px) {
		.haplo-bmd-label-static {
			top: auto; /* Allow it to auto-position on mobile */
			font-size: 0.8rem; /* Adjust label font size for mobile */
		}
		.haplo-form-control {
			padding-top: 2.5rem; /* Adjusted to create space */
			margin-top: 0;
		}
	}

	/* haplogroup styling */
	/* Style for the vertical timeline */
	.haplo-path {
		list-style: none;
		padding-left: 20px;
		position: relative;
	}
	/* Style for each step in the path */
	.haplo-step {
		border-left: 2px solid #ccc;
		padding-left: 30px;
		position: relative;
		padding-bottom: 15px; /* Reduced bottom padding */
		margin-left: 10px;
		min-height: 50px;
	}
	.haplo-step:last-child {
		border-left: none;
		padding-bottom: 0;
	}
	/* Style for the circle marker */
	.haplo-step::before {
		content: '';
		position: absolute;
		left: -9px;
		top: 5px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background-color: #4280B8;
		border: 2px solid white;
		z-index: 1;
	}
	.highlight-step .haplo-step::before {
		 background-color: #28a745; /* Green for highlighted steps */
	}
	/* --- Text Styling --- */
	.haplo-prefix {
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 0.25rem;
	}

	.last-haplo-prefix {
		font-weight: bold;
		font-size: 150%;
		color: #12955f;
		display: block;
		margin-bottom: 0.25rem;
	}

	.haplo_result_text {
		font-weight: bold;
		font-size: 110%;
		color: #12955f;
		display: block;
	}

	.haplo-mutation {
		font-family: monospace;
		background-color: #e9ecef;
		padding: 3px 6px;
		border-radius: 4px;
		display: inline-block; /* Allows button next to it */
		word-break: break-all;
		font-size: 0.9em;
		margin-bottom: 0.5rem; /* Ensure space below before annotations */
	}

	
	 .haplo-details {
		 font-size: 0.85em;
		 color: #6c757d;
		 display: block;
		 margin-top: 0.25rem;
		 margin-bottom: 0.5rem;
	 }
	 /* --- Annotation Styling --- */
	 .annotations-toggle {
		 font-size: 0.75rem; /* Make button smaller */
		 padding: 0.15rem 0.4rem; /* Adjust padding */
		 margin-left: 10px;
		 vertical-align: middle; /* Align button better */
		 border: 2px solid #C79A95!important;
	 }
	 .annotations-section {
		 margin-top: 8px; /* Space between button and annotations */
		 /* Optional: Add a subtle background */
		 /* background-color: #f8f9fa; */
		 /* padding: 10px; */
		 /* border-radius: 5px; */
	 }
	 .annotations-list {
		 font-size: 0.8em;
		 color: #555;
		 padding-left: 5px; /* Indent list slightly */
		 list-style-position: inside;
		 margin-bottom: 0; /* Remove default list margin */
	 }
	 .annotations-list li {
		margin-bottom: 4px;
		line-height: 1.3;
	 }


	 /* attribution text */
	 .attribution-paragraph {
		font-weight: lighter;
      	font-style: italic;
      	margin: 0.25rem; /* Same as m-1 in Bootstrap */
      	font-size: 80%;
      	line-height: 1.3;
	 }

	 /* mutation tags */
	 .mutation-tag {
            font-size: 0.8em;
            font-weight: bold;
            margin-left: 5px;
            padding: 2px 4px;
            border-radius: 3px;
            color: white;
        }
        .tag-plus .mutation-tag { background-color: #73a371; }
        .tag-minus .mutation-tag { background-color: #A83C49;}
        .tag-bang .mutation-tag { background-color: #d7a287; color: #333;}
        .tag-empty .mutation-tag { background-color: #4280B8; }

	 /* Marker colors based on mutation tag */
	.tag-plus .haplo-step::before { background-color: #73a371; } /* Green for found */
	.tag-minus .haplo-step::before { background-color: #A83C49; } /* Red for not found */
	.tag-bang .haplo-step::before { background-color: #d7a287; } /* Yellow for back-mutation/unstable */
	.tag-empty .haplo-step::before { background-color: #4280B8; } /* Blue for expected/neutral */

	/* extras */
	.extras-section {
            margin-top: 20px;
            font-size: 0.9em;
        }
	.extras-section h5 {
		font-size: 1.1em;
	}
	
	.extras-string {
		font-family: monospace;
		background-color: #f8f9fa;
		padding: 10px;
		border-radius: 4px;
		white-space: pre-wrap; /* Allows wrapping of the long string */
		word-break: break-all;
	}


	.subclade-badge { background: #006266; }

/* new colours */
.reference2 a {
	color: #5F6F8E;
}

.button_1 {
background-color: #C79A95; 
color: #FFFF; }

.button_2 {
	background-color: #5F6F8E;
	color: #FFFF;
}

/* action */
.p_action a {
	color: #C79A95;
}

.p_action1 a {
	color: #C79A95;
}

.p_action2 a {
	color: #5F6F8E;
}

.text_action1 {
	color: #C79A95 !important;
}

.text_action2 {
	color: #5F6F8E !important;
}

.progress .progress-bar.progress-bar-snps_found {
	background: #4280B8;
	}

.progress .progress-bar.progress-bar-snps_analysed {
	background: #73a371 !important;
	}

.btn-green {
	background-color: #73a371;
	color: #FFFF;
}

.btn-red {
	background-color: #A83C49;
	color: #FFFF;
}

.btn-amber {
	background-color: #d7a287;
	color: #FFFF;
}

.badge-offer {
  color: #ffffff;
  background-color: #4280B8;
}

.badge-offer[href]:hover,
.badge-offer[href]:focus {
  color: #ffffff;
  text-decoration: none;
  background-color: #336699;
}

.border-offer {
	border-color: #4280B8 !important;
}

/* pagination */
.my-nav-list {
	border: 2px solid #C79A95;
	border-radius: 50px;
	padding: 5px;
}
.my-nav-link {
	color: #C79A95;
	border-radius: 50% !important; /* Make pills circular */
	margin: 0 2px;
}
.custom-active a {
	background-color: #C79A95 !important;
	color: white !important;
	font-weight: bold;
}

/* aaa_promo */
.aaa_promo a {
	color: #C79A95;
	transition: color 0.3s ease;
}

.aaa_promo a:hover,
.aaa_promo a:focus {
    color: #A97B76; /* A slightly darker shade for contrast */
}

/* account management */
.icon.am_change_email {
	color: #759194;
}

.icon.am_change_username {
	color: #759194;
}

.icon.am_change_password {
	color: #759194;
}

.icon.am_communications {
	color: #759194;
}

.icon.am_unlocked {
	color: #80b692;
}

.icon.am_new_account {
	color: #7e9d73;
}

.icon.am_reset_account {
	color: #D4A585;
}

.icon.am_delete_account {
	color: #8c182b;
}

/* haplo descriptions */
/* Scoped styles for partials with the 'haplo-card' class */
.haplo-card p,
.haplo-card li,
.haplo-card td {
    font-size: 1.1rem !important; /* Or your desired size */
}

/* This specifically resets the attribution paragraph back to its default size */
.haplo-card p.attribution-paragraph {
    font-size: 1rem !important;
}

.ydna_profile a {
	color: #5F6F8E;
	transition: color 0.2s ease-in-out;
}

.ydna_profile a:hover {
    color: #8A9DBF; /* A lighter, brighter blue */
}
.ydna_profile a:active {
    color: #4A566E; /* A darker blue */
}