/***** Override Browser Defaults*****/

h1 {
	font-family: Lato;
}

h4 {
	font-family: 'Libre Franklin';
}



/***** Override Bootstrap Defaults *****/

.body-text,
.card-text {
	font-family: Palanquin;
}

/* This is necessary in order for the background gradients to appear in the right spot */
.container,
.container-fluid {
	position: relative;
}

.navbar-brand img {
	max-height: 2rem;
	filter: brightness(0) invert(1); /* Temp way to make image white */
}

.navbar-dark .navbar-nav .nav-link {
	color: #fff;
}

.navbar-dark .navbar-nav a.nav-link:hover {
	color: white;
	text-decoration: underline;
}

.navbar .navbar-nav li {
	padding: .25rem .25rem;
}

/* Restrict height of icons in nav */
.navbar .navbar-nav .nav-link > img {
	max-height: 20px; 
}




/***** eeds Public Shared Styles *****/

.Card_Icon {
	max-height: 4em;
	padding-bottom: .75em;
}

.Feature_Icon {
	max-height: 4rem;
	padding-bottom: .75rem;
}

.Feature_Link {
	color: #292b2c; /* Basically black; matches standard text color */
}

/* Add drop shadow when hovering over feature */
.Feature_Link:hover .Feature_Icon {
	/*transform: translateY(-1px);*/
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)); /* Light gray */
}

.Footer_Text {
	font-family: Lato;
	font-size: 1rem;
	color: rgba(255,255,255,.9);
}

.Img_Header {
	max-height: 5rem; 
	padding-bottom: .25rem;
	margin-left: -10px; /* Compensates for whitespace in image to being edge inline with nav text */
}

.navbar-toggler span {
	color: rgba(255,255,255,.9); /* Slighly muted white */
}

.Drop_Shadow {
	box-shadow: 0 2px 4px rgba(0,0,0,.18); /* Light gray */
}

.Subtle_Shadow {
	box-shadow: 0 0 30px rgba(0,0,0,.1); /* Lighter gray */
}

.Text_Light {
	color: rgba(255,255,255,.9) !important; /* Slightly muted white */
}

.Top_Container {
	background-color: white;
	transition: all 0.4s ease; /* Ease in shadow. JS applies Drop_Shadow class after user scrolls 300px from top */
}

.Extra_Padding {
	padding-top: 5rem;
	padding-bottom: 5rem;
}




/***** eeds Education Provider Styles *****/

.EP_Btn_Primary {
	background-color: #7629ef !important;
	border-color: #7629ef !important;
}

.EP_Cards_Container:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1) 70%); /* Transparent to white */
}

.EP_Cards_Container a.btn-primary {
    background-color: #e17380;
    border-color: #e17380;
}

.EP_Customer_Logo {
	width: 200px;
	filter: grayscale(100%);
}

/* Used in conjunction with EP_Display_Container to display a heading with purple underline
beneath text and a gray line that extends the length of the container */
.EP_Display {
	display: inline-block;
	margin-bottom: -2px;
	padding: 0.25rem;
	font-size: 2.25rem;
	font-weight: 300;
	line-height: 1.1;
	border-bottom: 2px solid #7629ef;
}

.EP_Display_Container {
	border-bottom: 1px dotted #7629ef;
	margin-bottom: 1rem;
}

.EP_Features {
	background-color: #e6e6fa; /* Very light purple */
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Fade out background pattern lines */
.EP_Features:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 70%); /* Transparent to white */
}

.EP_Footer {
	/*background: url(/Static/Public/v1/images/map.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center; */
	background-color: #f5f7f9;
	border-top: 2px solid #ccc;
	font-size: .9rem;
}

.EP_Footer img {
	max-height: 3rem;
	/* filter: brightness(0) invert(1); Temp way to make image white */
	filter: grayscale(100%);
}

.EP_Footer a {
	color: #b7b7c0; /* Grayish */
}

.EP_Hero {
	color: rgba(255,255,255,.9) !important; /* Slightly muted white */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	min-height: 400px;
}

.EP_Hero p {
	font-size: 1.1rem;
	line-height: 1.7rem;
}

.EP_Hero .card {
	background-color: transparent;
}

.EP_Navbar {
    background-color: #7629ef; /* Saturated purple */
    border-bottom: 4px solid #A370DE;
}

/* Background color of active nav item */
.navbar .EP_Nav_Items li.active {
    background-color: #A370DE;
    font-weight: bold;
}

.EP_Pattern {
	background-color: #e6e6fa; /* Very light purple */
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

#EP_Tab {
	cursor: pointer;
	font-size: 1.33rem; 
    font-weight: 300;
}

.EP_Tab_Active {
	/* TODO: Defined padding here rather than with Bootstrap utility classes. This allows the active
	tab to be taller than the inactive tab. If this isn't desired, just add the BS utility class
	'py-3' back to each tab. */
	padding: 1rem 0rem;
	color: #fff;
	background: linear-gradient(to top, rgb(118, 41, 239), rgb(156, 41, 239)); /* Saturated purple up to less saturated purple */
}

.EP_Tab_Active a {
	color: #fff;
	font-weight: bold;
}

.EP_Tab_Inactive {
	/* TODO: Defined padding here rather than with Bootstrap utility classes. This allows the active
	tab to be taller than the inactive tab. If this isn't desired, just add the BS utility class
	'py-3' back to each tab. */
	padding: .5rem 0rem;
	background-color: #e6e6e6;
}

.EP_Video_Background:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(320deg, rgb(118, 41, 239), rgb(156, 41, 239)); /* Saturated purple up to less saturated purple */
}

.Skew_Up {
	transform: skew(0deg,-5deg);
}

.Skew_Up_Level {
	transform: skew(0deg,5deg);
}

.Skew_Down {
	transform: skew(0deg,5deg);
}

.Skew_Down_Level {
	transform: skew(0deg,-5deg);
}

/* On the EP Features page, every other description gets a purple background and the text and icons are white */
.EP_Feature_Alternate {
	color: white;
	padding: 6rem 3rem;
    background: linear-gradient(320deg, rgb(118, 41, 239), rgb(156, 41, 239)); /* Saturated purple up to less saturated purple */
    /*transform: skew(0deg,-5deg);*/
}

.EP_Feature_Alternate .EP_Display {
	display: inline-block;
	margin-bottom: -2px;
	padding: 0.25rem;
	font-size: 2.25rem;
	font-weight: 300;
	line-height: 1.1;
	border-bottom: 2px solid #fff;
}

.EP_Feature_Alternate .EP_Display_Container {
	border-bottom: 1px dotted #fff;
	margin-bottom: 1rem;
}

.EP_Feature_Alternate img {
	filter: brightness(0) invert(1);
}




/***** eeds Healthcare Professionals Styles *****/

.HP_Cards_Container {
	background-color: #e6f0ff;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234991fd' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.HP_Cards_Container:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1) 70%); /* Transparent to white */
}

.HP_Cards_Container a.btn-primary {
    /*background-color: #0be5a3;
    border-color: #0be5a3;*/
    background-color: #0EB9DB;
    border-color: #0EB9DB;
}

.HP_Navbar {
    background-color: #1c79e4;
    border-bottom: 4px solid #0EB9DB;
}

/* Background color of active nav item */
.navbar .HP_Nav_Items li.active {
    background-color: #0EB9DB;
    font-weight: bold;
}

.HP_Hero {
	color: rgba(255,255,255,.9) !important; /* Slightly muted white */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	min-height: 400px;
}

.HP_Hero p {
	font-size: 1.1rem;
	line-height: 1.7rem;
}

.HP_Features {
    background-color: #dbeaff;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 70%), url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234991fd' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

#HP_Tab {
	cursor: pointer;
    font-size: 1.33rem; /* Increased from 1.25 */
    font-weight: 300;
}

.HP_Tab_Active {
	/* TODO: Defined padding here rather than with Bootstrap utility classes. This allows the active
	tab to be taller than the inactive tab. If this isn't desired, just add the BS utility class
	'py-3' back to each tab. */
	padding: 1rem 0rem;
	color: #fff;
	background: linear-gradient(to top, rgb(28, 121, 228), rgb(109, 169, 235));
}

.HP_Tab_Active a {
	color: #fff;
	font-weight: bold;
}

.HP_Tab_Inactive {
	/* TODO: Defined padding here rather than with Bootstrap utility classes. This allows the active
	tab to be taller than the inactive tab. If this isn't desired, just add the BS utility class
	'py-3' back to each tab. */
	padding: .5rem 0rem;
	background-color: #e6e6e6;
}

.HP_Video_Container {
    background: linear-gradient(160deg, rgb(109, 169, 235), rgb(28, 121, 228)); /* Saturated purple up to less saturated purple */
    /*background: linear-gradient(160deg, rgb(187, 215, 246), rgb(28, 121, 228));*/
}

.HP_Video_Container hr {
	background-color: rgba(255,255,255,.9);
}


/**********************************************************************/
/****************** Return to mobile menu styling *********************/
/**********************************************************************/

.Return_to_Main_Menu_Header {
    background: linear-gradient(90deg, rgb(28,121,228), rgb(14,184,218));
    border-bottom: 1px solid #eee;
    color:#fff;
}
.Return_to_Main_Menu_Header img {
    filter: brightness(0) invert(1);
}



/*---------------------------------------------*/
/*----------- DARK MODE STYLING ---------------*/
/*---------------------------------------------*/
@media (prefers-color-scheme: dark) {
	.HP_Features {
		background-color: #242424 !important;
		color: #dcdcdc !important;
		background-image: none;
	}

    .card_dark_text {
        color: #6c757d !important;
    }

    .card {
        background-color: #242424;
        border: 1px solid #ccc;
    }

    .card-header {
        border: 1px solid #ccc;
    }

	.card-body {
		color: #dcdcdc !important;
	}

	.table {
		color: #dcdcdc !important;
	}

	hr {
		border-top: 1px solid #dcdcdc !important;
	}

	body {
		background-color: #242424;
		color: #dcdcdc;
	}

    label {
        color: #dcdcdc !important;
    }

    .text_question_choice {
        color: #dcdcdc !important;
    }

    input {
        background-color: #949393 !important;
        color: #dcdcdc !important;
    }

    textarea {
        background-color: #949393 !important;
        color: #dcdcdc !important;
    }

    select {
        background-color: #949393 !important;
        color: #dcdcdc !important;
    }

    .EP_Features {
        background-color: #242424;
        background-image: none
    }

    .EP_Features:before {

        content:none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 70%); /* Transparent to white */
    }

	.form-control-plaintext {
		color: #dcdcdc !important;
	}
}