/* Styles Specific to PrEP Selection */

/* Some colors defined here */
:root {
	/* Maybe add color definitions here at some point */
}

.choice-columns {margin-top: 20px;}
.choice-columns h5 {text-transform: none !important;}

/* Limit choice buttons to half width */
.compare-buttons {margin-bottom: 20px;}

.compare-buttons > div, .prep-choices-block {
	-webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

/* The section which contains the various PrEP detailed blocks */
.prep-choices-block {}

/* 4e358f */
.choice-button-active {background-color: #d90368 !important;}
/* .choice-button-active {background-color: #d9ff68 !important;} */

/* Class to initially hide all Selections */
.choice-hidden {
	display: none !important; 
}

/* Columne width for desktop */
.choice-columns > div {max-width: 33%;}

/* Draw vertical line to separate column choices */
/* .choice-columns > div:not(:last-child) {border-right: 1px solid #ccc;} */

.choice-columns a {text-decoration: underline;}

.prep-mobile-only {display: none;}
.prep-desktop-only {display: block;}


@media screen and (max-width: 799px)  {
	/* Columne width for mobile */
	.choice-columns > div {max-width: 49.5%;}
	.choice-columns > div:not(:last-child) {border-right: none;}
	
	/* Show mobile-only and hide desktop-only classes */
	.prep-mobile-only {display: block;}
	.prep-desktop-only {display: none;}
}

.title-sticky {position: sticky; position: --webkit-sticky; top: 0; background-color: #fff5fa; padding-bottom: 15px;}
.stickydiv {position: sticky; position: --webkit-sticky; top: 70px;}

/* notes

choice-daily-truvada
choice-on-demand-truvada
choice-daily-descovy
choice-injectable-apretude

prep-choices-block -> daily-truvada choice-hidden

*/