/*
    custom.css
    Any site-specific CSS customization should be added to this file.
    This file overrides the defaults in illiad.css, which should not be altered.
*/

/**
* COLOR VARS
**/
:root {

	/* Neutral Brand Colors */
	--color-white: #fff;
	--color-black: #000;
	--color-cool-gray: #d9d9d9;
	--color-warm-gray: #d7d2cb;

	/* Primary Brand Color */
	--color-red: #ba0c2f;

	/* Secondary Brand Color */
	--color-green: #215732;

	/* Accent Brand Colors */
	--color-teal: #007d8a;
	--color-mint: #b5e3d8;
	--color-gold: #f1b434;
	--color-coral: #ff6d6a;
	--color-dark-green: #13322b;
	--color-dark-red: #971b2f;

	/* Additional Named Colors http://chir.ag/projects/name-that-color/ */
	--color-alabaster: #f8f8f8;
    --color-oatmeal: #faf7ef;
	--color-mine-shaft: #3d3d3d;
	--color-gallery: #ececec;
	--color-silver: #ccc;
	--color-boulder: #767676;

	/* Fonts */
	--body-font: "ivystyle-sans", sans-serif;
	--heading-font: "ivypresto-headline", serif;
}

body {
    font-family: var(--body-font);
    margin: 0;
}

/**
* TYPOGRAPHY STYLES
**/
body,
p {
	color: var(--color-black);
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 400;
    line-height: calc(26 / 18); /* 1.444 */
	padding: 0;
}

h1,
h2,
h3 {
    color: var(--color-red);
    font-family: var(--heading-font);
    font-weight: 400;
    line-height: calc(26 / 18); /* 1.444 */
}

h1 {
    font-size: 40px;
}

h2,
h2.page-header {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

@media (min-width: 768px) {

    h1 {
        font-size: 44px;
    }

    h2 {
        font-size: 38px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 26px;
    }

    h5 {
        font-size: 22px;
    }
}

a {
    color: var(--color-dark-red);
    text-decoration: underline;
    transition: all .3s ease;

    &:visited {
        color: var(--color-dark-red);
        text-decoration: underline;
    }

    &:hover {
        color: var(--color-teal);
        text-decoration: underline;
    }
}
/* end typography styles */

/*
* FORM STYLES
*/
.form-group {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
.custom-select,
textarea,
textarea.form-control {
    border-color: var(--color-mine-shaft);
    border-radius: 0;
    color: var(--color-black);
	flex-grow: 1;
	width: auto;
}

.btn,
button,
input[type="button"],
input[type="submit"] {
    background-color: var(--color-red);
    border-color: var(--color-red);
	border-width: 2px !important;
    color: var(--color-white);
    border-radius: 0;
}

button.btn:disabled,
input.btn:disabled,
a.btn.disabled,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
button.btn:disabled:hover,
input.btn:disabled:hover,
a.btn.disabled:hover,
button:disabled:hover,
input[type="button"]:disabled:hover,
input[type="submit"]:disabled:hover {
    background-color: var(--color-boulder);
    border-color: var(--color-boulder);
    color: var(--color-white);
    cursor: not-allowed;
    text-decoration: none;
}

input[type="checkbox"] {
    accent-color: var(--color-teal);
    height: 16px;
    width: 16px;
}

a.btn.disabled .fas,
input.btn:disabled .fas,
button.btn:disabled .fas {
	color: var(--color-white) !important;
}

a.btn-light:not(.disabled),
input.btn-light:not(:disabled),
button.btn-light:not(:disabled) {
	background-color: var(--color-white);
	border-color: var(--color-red);
	color: var(--color-red);
}

a.btn-light:not(.disabled) .fas,
input.btn-light:not(:disabled) .fas,
button.btn-light:not(:disabled) .fas {
	color: var(--color-red) !important;
}

a.btn-light:not(.disabled):active,
a.btn-light:not(.disabled):hover,
button.btn-light:not(:disabled):active,
button.btn-light:not(:disabled):hover,
input.btn-light:not(:disabled):active,
input.btn-light:not(:disabled):hover {
	background-color: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
}

a.btn-light:not(.disabled):active .fas,
a.btn-light:not(.disabled):hover .fas,
button.btn-light:not(:disabled):active .fas,
button.btn-light:not(:disabled):hover .fas,
input.btn-light:not(:disabled):active .fas,
input.btn-light:not(:disabled):hover .fas {
	color: var(--color-white) !important;
}

button.btn-primary:not(:disabled),
input.btn-primary:not(:disabled),
a.btn-primary:not(.disabled) {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white);
    margin: 10px 5px 10px 0;
}

button.btn-primary:not(:disabled):active,
button.btn-primary:not(:disabled):hover,
input.btn-primary:not(:disabled):active,
input.btn-primary:not(:disabled):hover,
a.btn-primary:not(.disabled):active,
a.btn-primary:not(.disabled):hover {
    background-color: var(--color-white) !important;
    border-color: var(--color-red) !important;
    color: var(--color-red) !important;
    text-decoration: none;
}

button.btn-secondary:not(:disabled),
input.btn-secondary:not(:disabled),
a.btn-secondary:not(.disabled) {
    background-color: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
    margin: 10px 5px 10px 0;
}

button.btn-secondary:not(:disabled):active,
button.btn-secondary:not(:disabled):hover,
input.btn-secondary:not(:disabled):active,
input.btn-secondary:not(:disabled):hover,
a.btn-secondary:not(.disabled):active,
a.btn-secondary:not(.disabled):hover {
    background-color: var(--color-white) !important;
    border-color: var(--color-teal) !important;
    color: var(--color-teal) !important;
    text-decoration: none;
}

.btn-group {
	column-gap: 0.75rem;
}

.btn-group-vertical {
	row-gap: 0.75rem;
}

.btn.c-doi {
	margin: 0 !important;
}

.form-group .note {
	width: 100%;
}

.form-control:disabled,
.form-control[readonly] {
	background-color: var(--color-cool-gray);
	cursor: not-allowed;
}
/* end form styles */

/*
* MAIN NAV STYLES
*/
.main-navbar {
    background-color: var(--color-dark-red);
    color: var(--color-white);
    padding: 5px;
}

nav li {
    margin: 0px 0px 0px 12px;
}

nav li a {
    font-size: 18px;
    font-weight: bolder;
    text-decoration: none;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--color-white);
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--color-white);
}

.navbar-dark .navbar-nav .nav-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.dropdown-item:focus,
.dropdown-item:not(.disabled):hover {
	background-color: var(--color-teal);
	color: var(--color-white);
}

.navbar-dark .navbar-toggler {
    color: var(--color-white);
    border-color: var(--color-white);
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* end main nav styles */

/**
* HEADER STYLES
**/
.site-header__branding {
	align-items: flex-start;
	background-color: var(--color-red);
	color: var(--color-white);
	display: flex;
	justify-content: space-between;
	padding: 16px 10px 16px 20px;

	@media (min-width: 1280px) {
		align-items: center;
		padding: 16px 60px;
	}
}

.site-header__logo {
	align-items: center;
	display: flex;
	height: 30px;

	& a {
		align-items: center;
		display: flex;
		height: 100%;
		text-decoration: none;
	}

	& img {
		border-right: 1px solid var(--color-white);
		height: 30px;
		padding-right: 16px;
	}

	@media (min-width: 1280px) {
		height: 34px;

		& img {
			height: 34px;
		}
	}

	& a:hover {
		text-decoration: none;
	}
	
	& a:focus {
		outline: 1px solid var(--color-white);
	}

	& a:focus:hover {
		outline: 0;
	}
}

.site-header__tag {
	color: var(--color-white);
	font-family: var(--body-font);
    font-size: 18px;
    font-weight: 400;
	line-height: 1;
	margin-bottom: -2.3px;
	margin-left: 16px;

	@media (min-width: 1280px) {
		font-size: 28px;
	}
}

.site-header__title {
    font-family: var(--body-font);
	font-size: 18px;
  	line-height: 34px;
    margin-bottom: 0;
	text-decoration: none;

	@media (min-width: 1280px) {
		font-size: 28px;
	}
}

.site-header__title a {
    color: var(--color-white);

    &:hover {
		color: var(--color-white);
		text-decoration: underline;
	}
}

/* end header styles */

/**
* FOOTER STYLES
**/
.help_contact {
    text-align: center;
    margin-top: 3rem;
}

.site-footer {
	background-color: var(--color-black);
	border-top: 10px solid var(--color-mint);
	color: var(--color-white);
	margin-top: auto;
	padding: 0 0 28px;

	@media (min-width: 1280px) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 52px 60px;
	}
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
    font-size: 14px;
    font-style: normal;
	margin: 0 0 28px;
	padding: 0 24px;
	text-align: center;

	@media (min-width: 1280px) {
		border-bottom: 1px solid var(--color-white);
		flex-basis: 50%;
		font-size: 18px;
		margin: 0;
		order: 1;
		padding: 0 0 48px;
		text-align: left;
	}

	& a {
		color: var(--color-white);
		font-weight: 400;
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}
	}
}

.site-footer__contact-line {
	display: block;
    margin-bottom: 9px;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.site-footer__contact-line--name {
	font-weight: 900;
	margin-bottom: 12px;

	@media (min-width: 1280px) {
		font-size: 20px;
		margin-bottom: 16px;
	}
}

.site-footer__contact-line--address {
    color: var(--color-white);
	line-height: 1.5;
	margin: 0;
}

.site-footer__copyright {
	border-top: 1px solid var(--color-white);
	font-size: 14px;
	padding: 24px 24px 0;
	text-align: center;

	@media (min-width: 1280px) {
		align-items: flex-end;
		border: none;
		display: flex;
		flex-basis: 50%;
		margin-top: 16px;
		min-height: 24px;
		order: 3;
		padding: 0;
		text-align: left;
	}
}

.footer-utilities {
	border-bottom: 1px solid var(--color-white);
	display: flex;
	margin: 0 0 28px;
	padding: 28px 0;

	@media (min-width: 1280px) {
		flex-basis: 50%;
		justify-content: flex-end;
		margin: 0;
		order: 2;
		padding: 0 0 48px;
	}

	& > * {
		flex-basis: 50%;

		@media (min-width: 1280px) {
			flex: 0 1 auto;
		}
	}
}

.footer-utilities__menu {
	font-weight: 700;
	list-style: none;
	margin: 0;
	padding: 0 24px;

	@media (min-width: 1280px) {
		padding: 0 8px;
	}

	& .menu-item {
		margin-left: 0;
		padding-left: 0;

		&:not(:last-child) {
			margin-bottom: 23px;
		}

		@media (min-width: 1280px) {
			white-space: nowrap;
		}
	}

	& a {
		color: var(--color-white);
		font-size: 18px;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.footer-utilities__menu--col-1 {
	font-weight: 700;

	@media (min-width: 1280px) {
		margin-right: 48px;
	}
}

.footer-social {

	@media (min-width: 1280px) {
		align-items: center;
		display: flex;
		flex-basis: 50%;
		margin-top: 16px;
		min-height: 24px;
		order: 4;
	}
}

.footer-social__menu {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 0 0 28px;
	padding: 0 24px;

	@media (min-width: 1280px) {
		margin: 0 0 0 auto;
		padding: 0;
	}

	& .menu-item {
		padding: 0;

		&:not(:last-child) {
			margin-right: 16px;

			@media (min-width: 1280px) {
				margin-right: 24px;
			}
		}
	}

	& .menu-item a {
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		color: var(--color-white);
		display: block;
		height: 20px;
		overflow: hidden;
		padding: 0;
		text-indent: 101%;
		transition: transform .2s;
		white-space: nowrap;
		width: 20px;

		@media (min-width: 1280px) {
			height: 28px;
			width: 28px;
		}

		/* The default social icons are the svg version, but there are pngs of each in the assets folder if you can't use svg. */
		&[href*="facebook.com"] {
			background-image: url("images/facebook.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="instagram.com"] {
			background-image: url("images/instagram.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="twitter.com"] {
			background-image: url("images/twitter.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="vimeo.com"] {
			background-image: url("images/vimeo.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="youtube.com"] {
			background-image: url("images/youtube.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="signup.e2ma.net"] {
			background-image: url("images/email.svg"); /* change this url to reflect where the image exists in your project */
		}

		&:hover {
			color: var(--color-white);
			text-decoration: none;
			transform: scale(1.2);
		}
	}
}
/* End footer styles */

/*
* COOKIE BANNER STYLE OVERRIDES
*/
.theme_atlas {
    --cc-bg: var(--color-mine-shaft);
    --cc-btn-primary-bg: var(--color-red);
    --cc-btn-primary-hover-bg: var(--color-teal);

    font-family: var(--body-font);
}

.cc_div .c-bn {
    border-radius: 0 !important;
}

.cc_div *,
.cc_div *:hover,
.cc_div :before,
.cc_div :after {
    font-family: var(--body-font) !important;
}

.theme_atlas .c-bn {
    border-color: var(--color-red);
}

.theme_atlas .c-bn:hover,
.theme_atlas .c-bn:active {
    border-color: var(--color-teal);
}

/*
* ALERTS
*/
.alert:not(.alert-secondary) {
	border: 2px solid var(--color-red);
	border-radius: 0;
}

.alert-danger {
	background-color: #FAD1D9;
	color: var(--color-red);
}

.container .alert {
	margin-left: 15px;
	margin-right: 15px;
	width: calc(100% - 30px);
	padding: 2px 4px 0;
}

.alert-secondary {
	background-color: var(--color-cool-gray);
	border-color: var(--color-cool-gray);
	border-radius: 0;
	color: inherit;
}

.has-red-color {
	color: var(--color-red);
}

/*
* LOG ON SCREENS
*/
.logon-directions {
	background-color: var(--color-oatmeal);
	border-bottom: none;
	font-size: inherit;
	margin: 2rem 0 1rem;
	padding: 1rem;
}

.logon-directions p:last-of-type {
	margin-bottom: 0;
}

/*
* COLOR OVERRIDES
*/
.text-muted {
	color: var(--color-boulder);
}

.text-danger {
	color: var(--color-red) !important;
}

.small-notes {
	color: var(--color-mine-shaft);
}

form section  {
	background-color: var(--color-oatmeal);
	padding-top: 2rem;
}

.req,
.card-title {
	color: var(--color-red);
}

ul,
.common-note {
	color: var(--color-black);
}

.selectOptions,
.badge-primary {
	background-color: var(--color-teal);
}

.form-control,
.form-control:focus,
.custom-select,
.custom-select:focus,
.custom-control .custom-control-label::before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before,
.custom-switch .custom-control-label::after {
	border-color: var(--color-mine-shaft);
}

/*
* MISCELLANEOUS
*/
.card {
	border-top: none;
	border-color: var(--color-cool-gray);
	border-radius: 0;
}

.card:first-of-type {
	border-top: 1px solid var(--color-cool-gray);
}

.row {
	margin-left: 0;
	margin-right: 0;
	align-items: flex-end;
}

.list-group-item:first-child {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.list-group-item:last-child {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

#no-results-message {
	color: var(--color-mine-shaft);
	font-size: 18px;
}

/*
* TOOLTIP
*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  opacity: unset;
  z-index: unset;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: var(--color-green);
  color: var(--color-white);
  text-align: center;
  border-radius: 6px;
  padding: 5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}