/* -------------------------------------- FONTS -------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;500;600&display=swap');

/* ---------------------------------- GLOBAL STYLES ---------------------------------- */
body { padding-top: 4.5rem; background-image: url("../assets/bkgd-texture.png"); }
.goals-container { margin-top: 1.5em; }
.col { margin-bottom: 1.5em; }
span.form-required { color: red; }
footer p { text-align: center; font-size: 0.75em; color: #6c757d; }

h1, h2, h3, h4 { font-family: Raleway, sans-serif; font-weight: 300; }
h1 { text-transform: uppercase; font-weight: 300; font-size: 2rem; }

#please-sign-in { text-align: center; }

/* ---------------------------------- NAVBAR STYLES ---------------------------------- */
.navbar { background-color: #1C2A48!important; }
.navbar .container-fluid { justify-content: center; position: relative; }
.navbar button.navbar-toggler { position: absolute; left: 0.4em; top: 0; font-size: 1.5rem; color: white; border: none; padding: 0.1rem; }
.navbar-brand { font-size: 1.1rem; position: relative; top: 0.1em; margin-right: 0; padding: 0; }
.navbar-brand img.logo { height: 1.5em; width: 10em; position: relative; bottom: 0.1em; }
.navbar .nav-link { color: white!important; padding: 0.25rem 0; font-size: 1.25em; }
.navbar .nav-link:focus, .navbar .nav-link:hover { color: #33b5e5!important; }
.navbar .nav-link:active { color: #2bbbad!important; }
.navbar .nav-link.active { color: #1C2A48!important; background-color: white; border-radius: 8px; display: inline-block; padding: 0.2em 0.4em; margin: 0.2em 0;}
.navbar button.signin { color: white; background-color: #0099cc; border-color: #0099cc; position: absolute; right: 0.75rem; top: -0.15em; }
.navbar button.signin:focus, .navbar button.signin:hover { background-color: #33b5e5; border-color: #33b5e5; }
.navbar button.signin:active { background-color: #2bbbad; border-color: #2bbbad; }
.navbar .dropdown { display: none; }
.navbar .dropdown .dropdown-toggle { position: fixed; right: 0.75rem; top: 0.3rem; padding: 0.25rem 0.5rem; }
.navbar .dropdown ul { position: fixed; right: 0.75rem; top: 40px; }
.navbar .dropdown .dropdown-toggle i { margin-right: 0.25em; }
.navbar .dropdown .dropdown-toggle #profileUserNavbar { display: none; }
.navbar .dropdown .dropdown-menu { border-top: 1px solid lightgray; }

/* -------------------------------- COMPONENT STYLES --------------------------------- */
#cookie-banner { position: fixed; bottom: 0; left: .75rem; width: 100%; z-index: 999; border-radius: 0; display: none; padding: 0.5em; font-size: 0.9em; align-items: center; }

#welcome { text-align: center; }
#welcome .screenshot-container { max-height: 45vh; }
#welcome img { width: 100%; max-width: 550px; height: auto; }
#welcome .feature-grid { padding: 2rem 2rem 0 2rem; }
#welcome .feature-grid .feature-text { text-align: left; }
#welcome .feature-grid .feature-text h3 { font-size: 1.25rem; margin-bottom: 0.25em; font-weight: bold; }
#welcome .feature-grid .feature-text p { font-weight: 300; }
#welcome .feature-grid i { font-size: 1.75rem; margin-right: 0.8rem; color: slategray; position: relative; top: -0.25em; }

#signout-button { float: right; }

button.progress-edit { float: right; background-color: #004d40; border-color: #004d40; margin-left: 0.5em; }
button.progress-edit:first-of-type { margin-right: -0.6em; }
button.progress-edit:focus, button.progress-edit:hover { background-color: #00715E; border-color: #00715E; }
button.progress-edit:active { background-color: #006ABE; border-color: #006ABE; }
button.progress-edit a { color: white; }
button.add-button { float: right; position: relative; bottom: 0.4em; background-color: #01579b; border-color: #01579b; }
button.add-button:focus, button.add-button:hover { background-color: #0277bd; border-color: #0277bd; }
button.add-button:active { background-color: #00838f; border-color: #00838f; }
button.add-button i.bi { margin-right: 0.5em; }

.progress-bar { background-color: darkgreen; }
.progress-bar.progress-time { background-color: darkblue; }

.race-card { border: 1px solid #A1A1A1; }
.race-name { background-color: #D1D1D1; border-bottom: 1px solid #A1A1A1; }
.race-name h3 { font-size: 1.25em; margin-bottom: 0; margin-top: 0.2em; }
h4.race-company {font-size: 1.15em; margin-bottom: 0; }
p.race-period { float: right; vertical-align: baseline; margin-bottom: 0; font-size: 0.85em; color: #67788a; }
.race-progress { margin: 0.75em 0; }
.race-progress .progress, .milestone-progress .progress { margin: 0; border: 1px #D8DDE1 solid; }
.progress-header { text-align: right; }
.progress-header, .progress-display { align-self: center; }
.per-day { font-size: 0.85em; color: #67788a; text-align: center; margin-bottom: 1em; }
.race-details { margin-bottom: 1em; }
.race-details p { margin-bottom: 0; }
.milestone-progress p { margin-bottom: 0; }
.milestone-progress .progress-display { width: 100%; }
.milestone-progress .show-hide { float: right; position: relative; bottom: 0.3em; font-size: 0.75rem; }
.milestone-progress .table-responsive { clear: both; }
.milestone-table tr { font-size: 0.85em; }
.milestone-table td { vertical-align: bottom; }
.milestone-table td:first-of-type { margin-right: 0.5em; }

.form-check { height: 100%; display: inline-block; padding: 0.5em 1em 0.5em 1.5em; }

#collapse-milestones { position: relative; }
button.milestones-add-button { position: absolute; right: 0; top: -3em; }
#milestones-container button { padding: 0; }
td.milestone-start { text-align: right; padding-left: 1em; }

.sort-radio { display: block; padding: 0 0 0 1.5em; }

button.signin { display: none; }

#profile-img { text-align: center; margin-top: 2em; }
#profile-img img { border-radius: 10%; max-width: 150px; height: auto; margin-bottom: 1em; }
#profile-img .default-profile-img { font-size: 8em; color: lightgray; margin-bottom: 1em; }
#user-name { text-align: center; font-size: 1.6rem; font-weight: 500; }
#user-details, #user-stats, #user-settings { padding-top: 1.5em; margin-top: 1.5em; border-top: 1px solid lightgray; }
#user-details h4, #user-stats h4, #user-settings h4 { text-align: center; }
#user-details .row:first-of-type, #user-stats .row:first-of-type { margin-top: 1em; }
#user-details .col-6:first-of-type, #user-stats .col-6:first-of-type { text-align: right; border-right: 1px solid lightgray; }
img.provider-icon { width: 30px; height: auto; }
button.btn-edit { position: absolute; }

#deleteDiv { text-align: center; margin-bottom: 3em; }
#deleteDiv hr { margin: 2em 0; }

.toast-container { top: 3em; right: 0; }

.team-bio img { border-radius: 10%; max-width: 100px; height: auto; }
.team-bio .bio-photo, .team-bio h3 { text-align: center; }

#alsoAdd .form-check { padding: 0 calc(var(--bs-gutter-x) * .5); }
#alsoAdd .form-check-input { margin-left: 0; margin-right: 0.75em; }
#alsoAdd #selectAll { text-align: right; font-size: 0.8em; }
#alsoAdd #selectAll .form-check-input { float: right; margin-left: 0.75em; margin-right: 0; }

/* ---------------------------------- MEDIA QUERIES ---------------------------------- */
@media (max-width: 400px) {
	h2 { font-size: calc(1.2rem + .9vw); }
	h3 { font-size: 1.1em; }
	.progress-header { font-size: 0.85em; }
	button.add-button { bottom: 0.6em; }
}
@media (min-width: 576px) {
	.navbar#primary-nav>.container-fluid { max-width: 540px; }
	.team-bio h3 { text-align: left; }
	#welcome .feature-grid { padding: 2rem 0 0 0; }
	.navbar .dropdown .dropdown-toggle, .navbar .dropdown ul { right: calc(((100vw - 540px) / 2) + 0.75rem); }
}
@media (min-width: 768px) {
	.navbar#primary-nav>.container-fluid { max-width: 720px; }
	#welcome .container.px-5 { max-width: 450px; }
	.navbar .dropdown .dropdown-toggle, .navbar .dropdown ul { right: calc(((100vw - 720px) / 2) + 0.75rem); }
}
@media (min-width: 992px) {
	.navbar#primary-nav>.container-fluid { max-width: 960px; }
	.navbar button.signin { position: inherit; }
	.navbar .nav-link { font-size: 1em; }
	.navbar .nav-link.active { display: block; padding: 0.25rem 0.5rem; margin: 0; }
	.team-bio .bio-photo { text-align: right; }
	#welcome .container.px-5 { max-width: inherit; }
	.navbar .dropdown .dropdown-toggle { position: static; }
	.navbar .dropdown ul { position: absolute; right: 0; }
	.navbar .dropdown .dropdown-toggle i { margin-right: 0.75em; }
	.navbar .dropdown .dropdown-toggle #profileUserNavbar { display: inline; }
}
@media (min-width: 1200px) {
	.navbar#primary-nav>.container-fluid { max-width: 1140px; }
}
@media (min-width: 1400px) {
	.navbar#primary-nav>.container-fluid { max-width: 1320px; }
	#welcome .screenshot-container { max-height: 30vh; }
}