/*** * Component: Health Data Subscription * Function: Styling for embeded health data subcription form * Date Created: Mar 6 2020 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Mar 6 2020 by Richard Bakos (richard.bakos@doh.nm.gov) */ .bmform_outer1127556 {width: 100% !important; display: inline-block;} .bmform_frmtext1127556, .bmform_frm1127556, .bmform_frm1127556:nth-last-child(1), #tblFormData1127556 select {width: 100% !important; margin: 10px 10px 0 0;} #tblRequiredField1127556 {display: none;} #subscribeInfo {display: block; float: left; width: 50%; padding-right: 10px;} /*** * Component: Drop-Down * Function: Customized drop-down stylings. * Date Created: Apr 21 2020 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Apr 21 2020 by Richard Bakos (richard.bakos@doh.nm.gov) */ .pageDropDowns {border: 2px solid #e5e5e5;} /*** * Component: Staff Side-Notes * Function: Staff notes for contact section of side-bars. * Date Created: Apr 29 2020 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Apr 29 2020 by Richard Bakos (richard.bakos@doh.nm.gov) */ .staffSideNote-1 {display: block; position: relative; bottom: 9em; bottom: 9rem;} /*** * Component: Status Notes * Function: Color coded status notes. * Date Created: Apr 29 2020 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Apr 29 2020 by Richard Bakos (richard.bakos@doh.nm.gov) */ div#content span.new, div#content span.complete {color: #2aa85a;} div#content span.pending {color: #4753a3;} div#content span.alert {color: #ff0000;} /*** * Component: SLD: Labware Portal * Function: Alerts to notify users if the labware portal is off/online. * Date Created: May 19 2021 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Mar 1 2022 by Richard Bakos (richard.bakos@doh.nm.gov) */ div.labwareNotice {text-align: center; text-transform:uppercase; padding: 20px; width: 100%; margin-bottom: 20px;} div.labwareOffline {background-color: #ff0000;} div.labwareOnline {background-color: #2aa85a; } /*** * Component: Vaccine Calendar * Function: Iframe display for vaccine calendar. * Date Created: Aug 8 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Aug 8 2022 by Richard Bakos (richard.bakos@doh.nm.gov) */ iframe.vaccine-calendar {width: 100%; min-height: 700px; max-height: 700px;} /*** * Component: Cutomized info-graphics * Function: Customized styling for displaying info-graphic publications. * Date Created: Aug 8 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Dec 19 2023 by Nick Smith (nicholas.smith@doh.nm.gov) */ div.info-graphics div.publication {display: inline-block; width: 49%; padding: 0 20px 0 0; height: auto;} div.info-graphics div.publication strong a {font-size: 1.3em;} div.info-graphics div.publication em {line-height: 24px; font-size: 15px;} div.info-graphics div.publication p {font-size: 1.2em;} /** Single Column display for mobile phones */ @media only screen and (max-width: 1300px) { div.info-graphics div.publication {display: inline-block; width: 98%; padding: 0 20px 0 0; height: auto;} } /** * Component: Content Toggle * Function: Show and hide content based on user interaction (click). * Date Created: Aug 11 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Mar 05 2025 by Nicholas Smith (nicholas.smith@doh.nm.gov) * Last change: Add BW color option via class ".toggle-title-bw" */ .toggled-on .toggle-content {display: block; padding: 0 20px; text-align:left} .toggled-on .toggle-content p, .toggle-content ul, .toggle-content ol, .toggled-on .toggle-content h4 {font-size: 16px;} .toggled-on .fa-angle-down {display: none;} /* .toggle-title {width: 100%; cursor: pointer; position: relative; margin: 20px 0; border-radius: 5px; background-color: #d6e5ff;} .toggle-title.one-line {padding: 1px 20px 10px 55px;} .toggle-title.two-line {padding: 1px 20px 20px 55px;} .toggle-title h2 {color: #000 !important; text-align:left} .toggle-title h3 {color: #000 !important; text-align:left} .toggle-title i {position: absolute; left: 10px; top: 20px; color: #000; font-size: 2.5em;} */ .toggled-off .toggle-content {display: none;} .toggled-off .fa-angle-up {display: none;} .toggle-title {width: 100%; cursor: pointer; position: relative; margin: 20px 0; border-radius: 5px; background-color: #d6e5ff;} .toggle-title.one-line {padding: 1px 20px 10px 55px;} .toggle-title.two-line {padding: 1px 20px 20px 55px;} .toggle-title h2 {color: #000 !important; text-align:left} .toggle-title h3 {color: #000 !important; text-align:left} .toggle-title i {position: absolute; left: 10px; top: 20px; color: #000; font-size: 2.5em;} /*** * Component: Button Menu * Function: A button menu in the main header for various alerts. * Date Created: Aug 02 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: May 05 2025 by Nicholas Smith (nicholas.smith@doh.nm.gov) */ div.alert-buttons {top: -50px;} div.alert-buttons nav ul li a.menu-button {padding: 10px 15px;} div.alert-buttons nav ul li a.report-ane {margin-right: 1.0em; background: #963AB2; color: #ffffff !important; font-weight: bold;} div.alert-buttons nav ul li a.report-ane span {border: none; width: auto; height: unset; padding-top: 0; color: #ffffff;} div.alert-buttons nav ul li a.report-ane:hover {background: #9e59b3;} div.alert-buttons nav ul li a.monkeypox-updates {margin-right: 1.0em; background: #963AB2; color: #ffffff !important; font-weight: bold;} div.alert-buttons nav ul li a.monkeypox-updates span {border: none; width: auto; height: unset; padding-top: 0; color: #ffffff;} div.alert-buttons nav ul li a.monkeypox-updates:hover {background: #9e59b3;} div.alert-buttons nav ul li a.covid-updates {margin-right: 1.0em; background: #963AB2; font-weight: bold;} div.alert-buttons nav ul li a.covid-updates span {border: none; width: auto; height: auto; padding-top: 0; color: #ffffff;} div.alert-buttons nav ul li a.covid-updates:hover {background: #9e59b3;} div.alert-buttons nav ul li a.nm988 {background: #963AB2; color: #ffffff !important; font-weight: bold;} div.alert-buttons nav ul li a.nm988 span {border: none; width: auto; height: auto; padding-top: 0; color: #ffffff;} div.alert-buttons nav ul li a.nm988:hover {background: #9e59b3;} div.alert-buttons nav ul li a.enews-signup {margin-right: 1.0em; background: #963AB2; color: #ffffff !important; font-weight: bold;} div.alert-buttons nav ul li a.enews-signup span {border: none; width: auto; height: unset; padding-top: 0; color: #ffffff;} div.alert-buttons nav ul li a.enews-signup:hover {background: #9e59b3;} div.alert-buttons nav ul li a.reproductive-health {background: #963AB2; color: #ffffff !important; font-weight: bold;} div.alert-buttons nav ul li a.reproductive-health span {border: none; width: auto; height: unset; padding-top: 0; color: #ffffff;} div.alert-buttons nav ul li a.reproductive-health:hover {background: #9e59b3;} div.alert-buttons nav ul li a.get-vaxed {margin-right: 1.0em; background: #963AB2; color: #ffffff !important; font-weight: bold;} div.alert-buttons nav ul li a.get-vaxed span {border: none; width: auto; height: unset; padding-top: 0; color: #ffffff;} div.alert-buttons nav ul li a.get-vaxed:hover {background: #9e59b3;} div.alert-buttons nav ul li a.vaxview {margin-right: 1.0em; background: #963AB2; color: #ffffff !important; font-weight: bold;} div.alert-buttons nav ul li a.vaxview span {border: none; width: auto; height: unset; padding-top: 0; color: #ffffff;} div.alert-buttons nav ul li a.vaxview:hover {background: #9e59b3;} @media only screen and (max-width: 1300px) { div.alert-buttons {top: -36px;} div.alert-buttons nav ul li a.menu-button {padding: 6px 12px;} } @media only screen and (max-width: 960px) { div.alert-buttons {display: none;} } /*** * Component: Page Buttons * Function: A collection of buttons for use on individual content pages (divisions/bureaus/programs/sections/pages). * Date Created: Aug 11 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Jul 15 2024 by Richard Bakos (richard.bakos@doh.nm.gov) */ a.callout-button {display: block; width: 100%; background: #4753a3; color: #fff; font-weight: bold; text-align: center; text-transform: uppercase; text-decoration: none; padding: 20px; margin: 20px 0; border-radius: 5px; border: 2px solid #000; cursor: pointer;} a.callout-button-auto {display: block; width: fit-content; background: #4753a3; color: #fff; font-weight: bold; text-align: center; text-transform: uppercase; text-decoration: none; padding: 20px; margin: 20px auto; border-radius: 5px; border: 2px solid #000; cursor: pointer;} a.callout-button:hover, a.callout-button-auto:hover {background: #5d66a0;} /*** * Component: Mobile Call-Out Banners * Function: Basic styling for mobile banner call-outs. * Date Created: Oct 25 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Oct 25 2022 by Richard Bakos (richard.bakos@doh.nm.gov) */ .mobile-call-out {display: none; padding: 10px; text-align: center; position: relative; width: 100%; font-size: .8em; font-weight: bold; text-transform: uppercase; text-decoration: none;} @media only screen and (max-width: 960px) { a.mobile-call-out {display: block; top:61px; z-index:9;} } /*** * Component: Covid-19: Alert Banner (Mobile Only) * Function: A mobile call-out banner for covid-19 awareness. * Date Created: Feb 27 2020 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Oct 25 2022 by Richard Bakos (richard.bakos@doh.nm.gov) */ a.covid-mobile {background: #8300e9; color: #fff;} /*** * Component: Report Abuse and Neglect: Alert Banner (Mobile Only) * Function: A mobile call-out banner for reporting abuse and neglect. * Date Created: Oct 03 2023 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Oct 03 2023 by Richard Bakos (richard.bakos@doh.nm.gov) */ a.reportane-mobile {background: #525FFF; color: #FFF;} a.reportane-mobile span {color: #6decaf;} /*** * Component: Monkeypox: Get the Facts Banner (Mobile Only) * Function: A mobile call-out banner for monkeypox awareness. * Date Created: Jul 12 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Oct 25 2022 by Richard Bakos (richard.bakos@doh.nm.gov) */ a.monkeypox-mobile {background: #2e318b; color: #2fa6de;} a.monkeypox-mobile span {color: #6decaf;} /*** * Component: 988NM: Suicide Prevention Banner (Mobile Only) * Function: A mobile call-out banner for suicide prevention program. * Date Created: Oct 25 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Oct 25 2022 by Richard Bakos (richard.bakos@doh.nm.gov) */ a.nm988-mobile {background: #FFA748; color: #FFFFFF;} a.nm988-mobile span {color: #50b1a4;} /*** * Component: NMHealth Helpline Banner (Mobile Only) * Function: A mobile call-out banner for NMHealth Helpline. * Date Created: Dec 18 2024 by Nicholas Smith (nicholas.smith@doh.nm.gov) * Last Edited: Dec 18 2024 by Nicholas Smith (nicholas.smith@doh.nm.gov) */ a.helpline-mobile {background: #00A8A3; color: #FFFFFF;} a.helpline-mobile span {color: #50b1a4;} /*** * Component: Enews: Enews Signup (Mobile Only) * Function: A mobile call-out banner for suicide prevention program. * Date Created: Dec 13 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Jan 28 2025 by Nicholas Smith (nicholas.smith@doh.nm.gov) */ a.enews-mobile {background: #F4684D; color: #FFFFFF;} a.enews-mobile span {color: #FFFFFF;} /*** * Component: Abortion & Reproductive Health: Alert Banner (Mobile Only) * Function: A mobile call-out banner for the new Abortion & Reproductive Health section. * Date Created: Jun 22 2023 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Jun 22 2023 by Richard Bakos (richard.bakos@doh.nm.gov) */ a.arh-mobile {background: #6C4FC6; color: #FFF;} /*** * Component: Get Vaxed: Alert Banner (Mobile Only) * Function: A mobile call-out banner for vaccine site and app. * Date Created: Oct 03 2023 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Oct 04 2023 by Nicholas Smith (nicholas.smith@doh.nm.gov) */ a.getvaxed-mobile {background: #5D2A68; color: #FFFFFF;} /*** * Component: Tables * Function: Table views on desktop * Date Created: Nov 08 2023 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Nov 08 2023 by Richard Bakos (richard.bakos@doh.nm.gov) */ div.table-header-container {width: 100%; margin-top: 20px;} div.table-cell-container {width: 100%;} div.table-col-3 {display: inline-block; width: 33%;} div.table-header {font-size: 18px !important; font-weight: bold; color: #347879;} div.table-cell {font-size: 16px !important;} /*** * Component: Icons * Function: Various contextual icons (phone, email, search, etc) * Date Created: Dec 13 2022 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Dec 06 2023 by Richard Bakos (richard.bakos@doh.nm.gov) */ /* Override RTS icon styling in main header when using Font Awesome */ span.icon-fa {padding-top: 5px !important;} /*** * Component: Vaccination Map * Function: Embed for the vaccine provider map. * Date Created: Dec 06 2023 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Dec 06 2023 by Richard Bakos (richard.bakos@doh.nm.gov) */ div#map-container {padding-top: 10px;} div#map-container div#map {display: block;} /*** * Component: Top Sub-Menu * Function: A new thin menu strip for important resources/contacts * Date Created: Dec 20 2023 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: May 22 2025 by Nicholas Smith (nicholas.smith@doh.nm.gov) */ #top-menu {position: sticky; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); z-index: 999999999;} .top-menu {height: 30px; background: #2E318B; padding: 2px 100px;} .top-menu #top-menu-right {float: right;} .top-menu ul li a {padding: 6px 10px; font-weight: bold; font-size: 12px;} .top-menu ul li a:hover {text-decoration: underline;} @media only screen and (max-width: 960px) { nav.top-menu {display: none;} } /*** * Component: School Vaccination Rates Dashboard * Function: An ArcGIS map of school vaccination rates * Date Created: Jan 23 2024 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Jan 23 2024 by Richard Bakos (richard.bakos@doh.nm.gov) */ .school-vac-rates {width: 100%; height: 100vh;} /*** * Component: Migration annoucement * Function: Announcement that DDSD/DHI has migrated to the Health Care Authority (HCA) orgnization * Date Created: Jul 02 2024 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Jul 02 2024 by Richard Bakos (richard.bakos@doh.nm.gov) */ .migration-banner {position: relative; background: #E2233E; color: #FFF; text-align: center; width: 100%; padding: 1rem 1rem; margin: 1rem 0 1rem 0; border-radius: .25rem;} .migration-banner span {text-transform: uppercase; font-weight: bold;} .migration-banner a {color: #fcee26;} /*** * Component: Mobile Stack * Function: Screen override for certain mobile situations. * Date Created: Jul 05 2024 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Jul 05 2024 by Richard Bakos (richard.bakos@doh.nm.gov) */ @media only screen and (max-width: 576px) { div.mobile-stack div.left {width: 100%;} div.mobile-stack div.right {width: 100%;} } /*** * Component: Anchor Target * Function: Prevent navbar from covering elements when clicking links to content within a page. * Usage: Create a div.anchor-container. Place title of section within div e.g.

, then place an tag as . * Continue with section content. Use one Anchor Container per Anchor Tag. See page\body\about\asd\hr\wdp\intp\index.htm for example implementation. * Date Created: Jul 05 2024 by Nick Smith (nicholas.smith@doh.nm.gov) * Last Edited: Jul 05 2024 by Nick Smith (nicholas.smith@doh.nm.gov) */ .anchor-container {position: relative;} .anchor-target {position: absolute; top: -75px; left: 0px;} /*** * Component: MCP Colors * Function: Contains the Medical Cannabis Program branding colors. * Date Created: Jul 09 2024 by Richard Bakos (richard.bakos@doh.nm.gov) * Last Edited: Jul 09 2024 by Richard Bakos (richard.bakos@doh.nm.gov) */ .mcp-green {background: #65A05F !important;} a.mcp-green:hover,a.mcp-green:active {background: #9fc29c !important;} .mcp-blue {background: #1B545F !important;} a.mcp-blue:hover,a.mcp-blue:active {background: #80a9b1 !important;} /*** * Component: PowerBI Dashboards * Function: Uniform sizing for PowerBI Dashboards * Date Created: Feb 28 2025 by Nick Smith (nicholas.smith@doh.nm.gov) * Last Edited: May 29 2025 by Nick Smith (nicholas.smith@doh.nm.gov) */ .bi-dashboard {width:100%; aspect-ratio: 1.75 / 1; border: 0;} /*** * Component: Measles Dashboard * Function: Sizing for Measles Rshiny Dashboards * Date Created: Apr 23 2025 by Nick Smith (nicholas.smith@doh.nm.gov) * Last Edited: Apr 23 2025 by Nick Smith (nicholas.smith@doh.nm.gov) * To do: Add Media query with separate AR for mobile viewers */ .measles-dashboard {width:100%; max-width: 1600px; aspect-ratio: 1 / 1; border: 0;}