﻿
body{ overflow-x: hidden;}

/* Heights */
        form{display:grid; grid-template-rows: auto 1fr auto; grid-template-areas:
                 'header'
                 'main'
                 'footer';
        }
        header{grid-area:header; height:auto; position:unset !important;}
        main{grid-area:main; padding:0;}
        footer{grid-area:footer;}



/* Alert Banner */
    @keyframes gradient {
	    0% {
		    background-position: 0% 50%;
	    }
	    50% {
		    background-position: 100% 50%;
	    }
	    100% {
		    background-position: 0% 50%;
	    }
    }

    .obm-TopBannerAlerts{background: linear-gradient(to right, rgba(119,0,0,1) 0%, rgba(153,0,0,1) 35%, rgba(255,0,0,1) 50%, rgba(153,0,0,1) 65%, rgba(119,0,0,1) 100%);
	background-size: 150% 100%;
	animation: gradient 10s ease infinite;}
    .obm-TopBannerAlerts a{color:#fff; text-shadow:0 0 5px #000;}
    .obm-TopBannerAlerts a:not([target=_blank]){cursor:default;}
    .obm-TopBannerAlerts a[target=_blank]::after{content:" \f0c1"; font-family: "Font Awesome 6 Pro";}
    .obm-TopBannerAlerts:not(:empty){height:auto;position:unset !important; padding:10px;}

/* Master Media Queries  ======================== */

        /* Web Resources December 2020 release - overrides */

            @media screen and (max-width: 1280px){
	            main {
	                grid-template-areas: "left right right" !important;;
                    grid-template-rows: unset !important;
	                margin-left: 0;
	                margin-right: 0;
	            }
	            .obm-mainright{
		            overflow-x: auto;
	            }

                header {
                        border-top: none;
                }

	            .obm-header-officialohiogov {
	                display: block;
	            }

	            .obm-header-Iologo {
	                text-align: right !important;
	            }
            }
            @media screen and (min-width: 1025px) and (max-width: 1280px){
                header .obm-nav-toggler {
	                display: none !important;
	            }
            }

        /* Wide Desktop */
        @media only screen and (min-width: 1400px) {
            header{ /*height: 115px;*/}
            .obm-mainleft { width: 275px !important; }/*350*/
            Section#landingPageLinks { max-width: 90%; }
            
            #menuExpandCollapse.show{top: 115px; left: 275px;}/*350*/
            #menuExpandCollapse.hide{top: 115px; left: 0;}

            #obm-footer-grayBar > div { grid-template-columns: 1fr 2fr 1fr; max-width:100%;}
            #obm-footer-grayBar{padding:0 5vw; }
            #obm-footer-blueBar{ grid-template-columns: 2fr 3fr 2fr !important; padding:20px 5vw; font-size:14px;}
            #checkbook_footer_agencies img{ margin: 0 5px;}
        }
        /* Narrow Destop */
        @media only screen and (max-width: 1399px) and (min-width: 1025px) {
            header{ /*height: 115px;*/}
            .obm-mainleft { width: 275px !important; }/*300*/
            Section#landingPageLinks { max-width: 910px; }

            #menuExpandCollapse.show{top: 115px; left: 275px;}/*300*/
            #menuExpandCollapse.hide{top: 115px; left: 0;}

            #obm-footer-grayBar > div { grid-template-columns: 1fr 2fr 1fr; }
            #obm-footer-blueBar{ grid-template-columns: 2fr 3fr 2fr !important;}
            #checkbook_footer_agencies img{ margin: 0 5px;}
        }
        /* Mobile */
        @media only screen and (max-width: 1024px) {
            .obm-mainleft { display: none; }
            .obm-header-officialohiogov{ display: none; }

            header { border-top: none; /*height: 90px;*/ }
            .obm-header-env{ display: none;}
            .obm-header-Iologo{ display: none;}
            .obm-header-logo { padding: 4px 0 4px 0; }

            .obm-nav-toggler { margin-bottom: 0 !important;}
            .form-invalid .obm-nav-toggle-label{ margin: 12px !important;}
            .form-valid .obm-nav-toggle-label{ margin: 25px 12px 12px 12px !important;}

            Section#landingPageLinks { width: 90%; }
            .visualgroup_3column{width: 90vw;}

            #menuExpandCollapse{ display: none;}

            footer{/*min-height: 100px !important;*/}
            #obm-footer-grayBar > div { grid-template-columns: 1fr }  
            #obm-footer-grayBar > div > div:first-child, #obm-footer-grayBar > div > div:last-child{ display: none;}
            #obm-footer-blueBar{position: unset !important;}
            #obm-footer-blueBar section{ text-align: center !important; margin-bottom: 25px; }
            #obm-footer-blueBar section div{ margin: 0 auto; justify-content: center !important; text-align: center !important;}
        }

        @media only screen and (max-width: 1024px) and (min-width: 700px)  {
            footer{}
            #obm-footer-blueBar{ color: #fff;  min-height: 80px; grid-template-columns: 1fr 1fr;  display: grid; 
                grid-template-areas:
                                   'footeragency footeragency'
                                   'footerlink footermedia'
            }

            #checkbook_footer_links { grid-area: footerlink; }
            #checkbook_footer_agencies {text-align: center; grid-area: footeragency; }
            #checkbook_footer_socialmedia {grid-area: footermedia; }
            #checkbook_footer_agencies img{ margin: 0 5px;}
        }

        @media only screen and (max-width: 699px) {
            #obm-footer-blueBar{ color: #fff;  min-height: 80px; grid-template-columns: 1fr;  display: grid; }
            #checkbook_footer_links {}

        }

        @media only screen and (min-width: 550px) {
            #mobileLogo{ display: none;}
            .obm-header-logo { width: 450px; }
        }

        @media only screen and (max-width: 549px) {
            .obm-header-logo { width: 100%; text-align: center;  }
            #desktopLogo{ display: none;}
        }



/* All Pages  ======================== */

    /* Red Bar = 10px ; Gray Footer = 80height + 25margin + 25margin; Blue Footer = 80px; TOTAL = 220px; */

    #loginInfo{ display: none;}
    
    /* Header */
        header{ border-bottom: 10px solid #e00; background-color: #26456e;background-image: url(../Images/Graphics/headerBG.svg); background-size: cover; /*position: absolute;*/ max-width: 100%;}
        .obm-header-officialohiogov{ padding: 3px 30px; background-color: rgba(255,255,255,0.03); color: #ddd;}
        .obm-header-wrapper { margin: 3px 15px; }

        .obm-header-logo {margin: 0; display: block; }
        .obm-header-logo #desktopLogo { width: 450px; border: none; height: auto;}
        .obm-header-logo #mobileLogo { width: 250px; border: none; margin: 7px 0 0 10px; height: auto; }

        .EnvTitle{ color: #fff; font-style: italic;}
        .InnovateOhioLogo{ max-width: 200px; }

        .obm-header-Iologo { text-align: right }
        .obm-header-Iologo img{ margin-top: 20px; }
        .obm-nav-wrapper{ display: none;}

   /* Content */
        
        main {/*padding: 110px 0 0 0;min-height: calc(100vh - 220px);*/ grid-template-rows: 0 max-content;}
        p{ text-align: unset;}
        #contentwrapper{display: flex; }
        .obm-fullwidth{ max-width: 1200px; margin: 0 auto 150px auto; display: block !important; }
        .obm-fullwidth > section{padding: 25px 50px; box-sizing: border-box;}

        .obm-mainleft{ background-color: #fff; padding: 15px; box-sizing: border-box; background-image: url('../Images/Graphics/leftmenu_background.png'); background-position: right; background-position-y: top;     background-position-x: center; background-repeat: no-repeat; background-color: #f4f4f4; border-right: 1px solid #ddd; margin: 0; white-space: normal;}
        .obm-mainright{padding: 15px 15px 150px 15px; margin: 0;}

    /* Mobile Menu */
        
        #menuHeader{ display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 25px 0 !important;}
        #menuHeader li { text-align: center;}

        .obm-nav-wrapper > ul > li > div > a, .obm-nav-wrapper > ul > li > ul > li > div > a { display: inline-block;}
        .obm-nav-wrapper > ul > li > div, .obm-nav-wrapper > ul > li > ul > li > div{ border-bottom: 1px solid #fff;}

        .mobileShowUl{ margin-left: 25px; color: #777; float:right;}


        .obm-nav-toggle-label:before, .obm-nav-toggle-label:after{border-top: 4px solid #fff !important; background-color: #fff !important;}
        .obm-nav-toggle-label span { border-top: 4px solid #fff !important; }

        .obm-nav-wrapper{ background-color: #eee !important; border-top: 10px solid #26456e !important; border-bottom: 10px solid #26456e !important; padding: 15px 0;}
        .obm-nav-wrapper ul{ grid-gap: 0 !important; list-style: none; margin: 0 1.5rem 1rem 1.5rem !important;}
        .obm-nav-wrapper ul li ul li{ border-left: 2px solid #052035; padding-left: 0.5rem}
        .obm-nav-wrapper a{ display: block; padding: 5px; text-decoration: none;}
        .obm-nav-wrapper a:hover{ color: #fff; background-color: #09f;}

        .obm-nav-wrapper .active{ background-color: #26456e; color: #fff; border-right: 20px solid #eee;}
        .obm-nav-wrapper .active::before{ content: "\f0da"; font-family: "Font Awesome 5 Pro"; font-weight: bold; padding-right: 5px;}


    /* Footer */
        footer{ border-top: 10px solid #e00; /*min-height: 200px;*/ background-color: #052035;}
        #obm-footer-grayBar{color: #052035;}
        #obm-footer-grayBar > div {line-height: 20px !important; padding: 0; min-height: 80px}
        #obm-footer-grayBar > div > div:first-child{}
        #obm-footer-grayBar > div > div:not(:first-child):not(:last-child){text-align: center;}
        #obm-footer-grayBar > div > div:last-child{text-align: right;}
        #obm-footer-grayBar a {display: inline-block; padding: unset; }
        #obm-footer-grayBar > div > div > a, .obm-footer-graybar> div > div > a{ font-weight: normal; text-transform:unset !important; font-size: 1.2rem; line-height: 3rem;}

        .footer_url{ text-transform: uppercase; font-size: 22px; font-weight: normal !important; padding-bottom: 10px; display: inline-block;}

        #obm-footer-blueBar{ color: #fff;  min-height: 80px;}

        #checkbook_footer_links {display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;}
        #checkbook_footer_links a{white-space:nowrap;}
        #checkbook_footer_agencies {text-align: center; }
        #checkbook_footer_socialmedia { }

        .ObmLogo {max-width: 180px;}
        .TosLogo{max-width: 180px;}


        #loadingGraphic {
            position: fixed;
            top: 40%;
            left: 50%;
            font-size: 75px;
            width: 500px;
            margin-left: -250px;
            border: 1px solid #09f;
            border-radius: 20px;
            padding: 25px;
            text-align: center;
            justify-content: center;
            align-self: center;
            box-shadow: 0 0 25px #000;
            background-color: #fff;
        }
        #loadingGraphic img{ width: 100px; height: 100px;}


/* Multiple Pages  ======================== */

    /* General */
        h1{white-space:normal; overflow:unset; font-size:1.8rem;}
        #pagetitle{ color: #26456e; text-align: center; font-size: 35px; margin: 5px 25px 50px 25px; }

        #pagetitleimg{ width: 80%; margin: 25px auto; display: block; }

        .hideInProduction{ display: none;}
        .hiddenbydefault{display: none;}
        .spacer{ content: ''; height: 35px;}

        .errorMsg{font-weight:bold; color:#990000;}
        .smallBtn{ padding: 12px 7px;}

        #generaLoadingIcon{ text-align: center; font-size: 20px;}
        #generaLoadingIcon img{ height: 25px;}

        input[type="radio"] {
            cursor: pointer;
        }
        input[type="radio"]:checked::after {
            position: absolute;
            top: 5px;
            width: 16px;
            height: 16px;
            background: #26456e;
            border-radius: 50%;
            content: "\f00c";/*"\f058";*/
            left: 5px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding-top: 2px;
            font-family: "Font Awesome 5 Pro";
        }

        input[type="radio"]:hover {
            background: #09f;
        }

    /* Email */

        #contactFormData{ display: none;}

        #vizBtn_onLoad, #emailMessage{ margin-bottom: 25px;}

        #emailSending{ display: none; text-align: center; font-size: 20px;}
        #emailSending img{ height: 25px;}
        
        .emailSuccessMsg{font-weight:bold; background-color:#009900; color: #fff; padding: 10px; display: none;font-size: 20px; text-align: center;}
        .emailErrorMsg{font-weight:bold; background-color:#990000; color: #fff; padding: 10px; display: none;font-size: 20px; text-align: center;}

        .emailPageSuccessMsg{font-weight:bold; background-color:#009900; color: #fff; padding: 10px; font-size: 20px; text-align: center;}
        .emailPageErrorMsg{font-weight:bold; background-color:#990000; color: #fff; padding: 10px; font-size: 20px; text-align: center;}
        .disclaimer p{ font-size: 12px; color: #777; line-height: 14px;}
      

    /* Indent Text undet Sub Header */
        article.indent{margin-bottom: 25px;}
        article.indent h4{}
        article.indent p{margin-left: 35px;}


    /* Tableau Visuals */
        #pageTitle{ text-transform: capitalize;}

        .tableauVizContainer{ text-align: center;width: 90%;margin: 35px auto; }

        .placeholder{ padding: 15px; width: 100%; text-align: center;font-size: 50px;color: #fff; background-color: #ccc; cursor: wait;}
        .placeholder img { width: 50px; margin-bottom: -5px; }
        #downloadVisual{}
        #downloadVisual_popupDialog section{ text-align: center; margin: 35px;}

        #OnVizSuccess{ display: none;}
        #OnVizClickLog{ display: none;}
        #urlParamTest{ display: none;}

        #downloadErrorMsg{ text-align: center; color: #900; font-weight: bold;}


    /* Buttons in left side menu */
        /* Squares */
            #checkbook_leftMenuSquares{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5px; }
            #checkbook_leftMenuSquares a, #checkbook_leftMenuSquares a:active, #checkbook_leftMenuSquares a:visited, #checkbook_leftMenuSquares a:link{background: none; box-shadow: none; text-transform: uppercase; background-color: #aaa; border: none; border-radius: 0; padding: 5px; text-decoration: none; text-align: center; color: #fff;}
            #checkbook_leftMenuSquares a:hover{ background-color: #09f;}
            #checkbook_leftMenuSquares a.active{ background-color: #26456e !important;}

            #checkbook_leftMenuCovid{ margin-top: 5px;}
            #checkbook_leftMenuCovid a img{ width: 100%;}

    /* 100% Wide Link Bars */
            .checkbook_leftMenuBtn a, .checkbook_leftMenuBtn a:link, .checkbook_leftMenuBtn a:active, .checkbook_leftMenuBtn a:visited{background-color: #26456e;background-image: none;box-shadow: none;color: #fff;border: none;text-shadow: none;display: block; text-decoration: none; margin: 5px 0; padding: 0.5rem}
            .checkbook_leftMenuBtn a:hover { background-color: #09f;}
            .checkbook_leftMenuBtn a.active {background-color: #26456e; color: #fff}

    /* Text in left side menu */
        .obm-mainleft p{ line-height: normal; font-size: 12px; color: #111;}
        .obm-mainleft .svgicon{ width: 90%; max-width: 150px; display: block; margin: 15px auto 0 auto;}

    /* Landing Page Links */
        Section#landingPageLinks {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 5px; margin: 50px auto;}
        Section#landingPageLinks a{background-color: #ccc; padding: 25px; text-decoration: none; color: #26456e; text-align: center;}
        Section#landingPageLinks a:hover { background-color: #09f;  color: #fff;}

        Section#landingPageLinks .svgicon{ width: 90%; max-width: 150px; display: block; margin: 15px auto 0 auto;}


    /* Left Menu HIde Show */
        #menuExpandCollapse{position: absolute; color: #ccc; cursor: pointer; padding: 10px;  }
        #menuExpandCollapse:hover{background-color:#09f; color: #fff !important; } 

        #menuExpandCollapse.show{transform: rotate(-90deg);   }
        #menuExpandCollapse.hide{transform: rotate(90deg); color: #26456e;   }

        @keyframes rotating {
            90% {
                transform: rotate(90deg);
            }
            100% {
                transform: rotate(-270deg);
            }
        }
        .hide {
            transform: rotate(-90deg);
            animation: rotating 5s linear infinite;
        }

    /* Popular Search Page Links */
        #popularLinks{display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 5px; margin: 50px auto; max-width: 920px;}
        #popularLinks a{background-color: #ccc; padding: 25px; text-decoration: none; color: #26456e; text-align: center;}
        #popularLinks a:hover { background-color: #09f; color: #fff;}
        #popularLinks .svgicon{ width: 90%; max-width: 150px; display: block; margin: 15px auto 0 auto;}

    /* Menu - Search */


    /* Left Menu - Back Button Blue Bar */
        .menuWithBackButton{ display: grid; grid-template-columns: 50px 1fr; margin: -15px; height: calc(100% + 30px );}
        .menuWithBackButton_resetPadding{ padding: 15px;}
        .backBar{ color: #fff; background-color: #26456e; font-size: 24px; cursor: pointer; }
        .backBar:hover{ background-color: #09f;}
        .rotateText { transform: rotate(-90deg);height: 30px;width: 400px;position:relative;left: -175px;top: 200px;text-align: right;}
        .obm-mainleft hr{ margin: 20px 0; width: calc(100%); border: 1px solid #777;}


    /* Left Menu - Taleau Parameters */
        .tableauParam_Select{ display: grid; grid-template-columns: 1fr 1fr; vertical-align: middle; margin-bottom: 15px;}
        .tableauParam_Select label{ background-color: #26456e; color: #fff; padding: 8px;}
        .tableauParam_Select select{ text-align-last: center;}



/* State Of Ohio Left Side Menu  ======================== */

    /* Menu - Bars */
        .menuGroup_BtnBar section{margin: 10px 0}

    /* Menu - Bars - Simple Buttons */
        .menuGroup_BtnBar section:not(.obm-nav-dropdown){background: none; box-shadow: none; display: block; width: 100%; background-color: #9fb5cb; border: none; border-radius: 0;}
        .menuGroup_BtnBar section:not(.obm-nav-dropdown):hover{ background-color: #09f;}
        .menuGroup_BtnBar section:not(.obm-nav-dropdown) .active{ background-color: #26456e !important;}

        .menuGroup_BtnBar section:not(.obm-nav-dropdown) a, .menuGroup_BtnBar section:not(.obm-nav-dropdown) a:active, .menuGroup_BtnBar section:not(.obm-nav-dropdown) a:link, .menuGroup_BtnBar section:not(.obm-nav-dropdown) a:visited{ color: #fff; text-decoration: none; display: block; padding: 8px;}

    /* Menu - Bars - Dropdowns */
        .left-nav-checkbox, .left-nav-checkbox-label {display: none;}
        .left-nav-checkbox-label {display: block;padding: 0.5rem;width: 100%; background-color: #9fb5cb; color: #fff;}
        .left-nav-checkbox-label:hover {background-color: #09f;}
        .left-nav-checkbox-label:after {content: "\25BE";float: right;margin-top: -15px; font-size: 40px;}
        .left-nav-checkbox-label.active{ background-color: #26456e !important;}

        .obm-nav-dropdown-ul {position: absolute;width:calc(300px - 15px - 15px);background: #fff;display: none;z-index: 100; list-style-type: none; border: 1px solid #aaa;}
        .left-nav-checkbox:checked ~ .obm-nav-dropdown-ul {display: block;}
        .left-nav-checkbox:checked ~ .left-nav-checkbox-label{background-color: #09f !important;}
        .left-nav-checkbox:checked ~ .left-nav-checkbox-label:after {content: '\25B4'; }

        .obm-nav-dropdown-ul {padding: 10px;margin: 0;}
        .obm-nav-dropdown-ul a {display: block;text-decoration: none;color: inherit;}
        .obm-nav-dropdown-ul > li > a {padding: 0.5rem;}
        .obm-nav-dropdown-ul > li > a:hover {background-color: #09f; Color: #fff;}




/* Home Page Styles  ======================== */

        #OnVizClickLog_clear{ display: none;}

        .visualgroup_3column{display: grid; grid-template-columns: repeat(auto-fit , minmax(300px, 1fr)); grid-gap: 10px; margin: 25px auto; max-width: 1200px;}
        .visualgroup_3column .tableauVizContainer{ height: 435px; text-align: center; width: 100%; margin: 0 auto 25px auto;}
        .visualgroup_3column .tableauVizContainer .smallviz{ height: 375px; text-align: center; overflow: hidden; background-color: #f3f3f3; max-width: 300px; margin: 0 auto;}
        .visualgroup_3column iframe{ margin: 0 auto;}

        .vizLinks{ text-align: center; height: 30px; font-size: 14px; font-weight: bold;}
        .vizTitle{ text-transform: uppercase; margin-bottom: -1px; font-size: 16px;}
        .vizLinks a:link, .vizLinks a:active,  .vizLinks a:visited{ text-align: center; display: block; padding: 7px 3px ; color: #26456e; text-decoration: none; background-color: #f3f3f3; max-width: 300px; margin: 0 auto;}
        .vizLinks a:hover{ text-align: center; color: #fff; background-color: #09f; }

        .smallviz .errorMsg{display: flex;justify-content: center;align-items: center;height: 96%;text-align: center; margin: 10px; background-color: rgba(255,255,255,0.6); margin: 2%;}

        #additionalLinks{max-width: 1200px;margin: 15px auto 50px auto; }
        #StatePopSearch{display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 5px; }
        #StatePopSearch a{background-color: #ccc; padding: 25px; text-decoration: none; color: #26456e; text-align: center;}
        #StatePopSearch a:hover { background-color: #09f; color: #fff;}
        #StatePopSearch .svgicon{ width: 90%; max-width: 100px; display: block; margin: 15px auto 0 auto;}

/* LOCAL GOV Landing Page ======================== */

        .searchEntitiesBeforeVizLoad{ width: 450px !important; margin: 75px auto;}

        #listMunicipalities  div{ margin-bottom: 15px;}
        #MunicipalityListWrapper{width: max-content; margin: 150px auto;}

        #searchMunicipalities label{display: block !important;}/* remove display grid from web resources */
        .MunicipalitySearch{ text-align: center;}


        #local_alpha{ width: max-content; margin: 50px auto;}
        #local_alpha ul{ list-style: none; word-wrap: revert; font-size: 0; padding: 0;}
        #local_alpha ul li{ padding: 5px 10px; text-transform: uppercase; color:#26456e; font-weight: bold; display: inline-block;font-size: 16px; cursor: pointer;}
        #local_alpha ul li:not(:last-child){ border-right: 1px solid #26456e; }
        #local_alpha ul li.active{ background-color: #26456e; color: #fff;}
        #local_alpha ul li:hover{ background-color: #09f; color: #fff;}

        #local_alphaList div:not(:first-child){ display: none;}

        #MunicipalityList{ margin-top: 25px; line-height: 20px;}

        #MunicipalityList a, #MunicipalityList a:link, #MunicipalityList a:active, #MunicipalityList a:visited{ padding: 3px 20px 3px 5px; display: inline-block;}
        #MunicipalityList a:hover{ text-decoration: none; background-color: #09f; color: #fff; }
        #MunicipalityList.MunicipalityGrid { }

        
        #local_alpha ul li{ display: none;}
        #MunicipalityList div:not(:first-child){ display: none;}

/* Sitemap ============================== */
        #sitemap .topLevelPages{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; margin-top: 25px;}
        #sitemap .topLevelPages div{ border-radius: 5px; text-align: center; background-color: #900;}
        #sitemap .topLevelPages div:hover{ border-radius: 5px; text-align: center; background-color: #ccc;}
        #sitemap .topLevelPages a, #sitemap .topLevelPages a:active, #sitemap .topLevelPages a:visited, #sitemap .topLevelPages a:link{ display: block; color: #fff; text-decoration: none; padding: 10px; }
        #sitemap .topLevelPages a:hover{ text-decoration: underline; color: #000;}


/* covid-19============================== */
        #covid19link{ display: none;}
        #checkbook_leftMenuCovid{ display: none;}