/**
 * Color classes and default styling are in /assets/main.css, focus your efforts there
 * @import external fonts at top of this page before default.css
 * remove comment for dark-mode.css if you want to enable that -- will not be 100%, you will need to fix minor things
 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("./assets/default-settings.css");
/** @import url("assets/dark-mode.css"); */

.restrict-images .card > img { max-width: 50px; margin: 10px auto 0; }
.hidden { display: none; }

/** header */
.navbar-brand { padding: 35px 0; }
#mainMenuNav { flex-direction: column; }
#mainMenuNav a.nav-link { font-weight: 600; border-radius: var(--bs-border-radius); }
#mainMenuNav a.nav-link.active, #mainMenuNav a.nav-link:hover { background: rgb(var(--bs-secondary-rgb)); color: var(--bs-white); --bs-navbar-active-color: var(--bs-white); padding-left: 8px; padding-right: 8px; }
#mainMenuNav .bg-primary { margin-top: .5rem; }
#mainMenuNav .bg-primary a.nav-link { color: var(--bs-white); border: 1px solid rgb(var(--bs-primary-rgb)); padding-left: 8px; padding-right: 8px; }
#mainMenuNav .bg-primary:hover, #mainMenuNav .bg-primary:hover a.nav-link { background: var(--bs-white); color: rgb(var(--bs-primary-rgb)); border-radius: 0; }
#mainMenuNav .bg-primary a::after { content: "LEARN MORE \25B6"; display: block; text-align: right; margin-top: 4px; font-family: sans-serif; font-weight: 100; font-size: .8rem; }

/** footer */
.home .hidden-home, .home > header, .home .menu-footer-menu-container .menu { display: none; }
.menu-footer-menu-container .menu { text-align: center; padding: 0; margin: 0; list-style: none; }
.menu-footer-menu-container .menu li { display: inline; }
.menu-footer-menu-container .menu li + li:before { content: "|"; margin: 0 10px; }


/** media queries */
/** Small devices (landscape phones, 576px and up) [-sm] */
@media only screen and (min-width : 576px) {
  .float-image img { max-width: 275px; }
}

/** Medium devices (tablets, 768px and up) [-md] */
@media only screen and (min-width : 768px) {
  .float-image img { max-width: 350px; }
}

/** Large devices (desktops, 992px and up) [-lg] */
@media only screen and (min-width : 992px) {
}

/** X-Large devices (large desktops, 1200px and up) [-xl] */
@media only screen and (min-width : 1200px) {
}

/** larger desktops, 1400px and up [-xxl] */
@media only screen and (min-width : 1400px) {
}