/*---------------------------------------------------------------------
     City of Minneapolis Applications Stylesheet 
----------------------------------------------------------------------*/

/* Font Family */
@import url('https://fonts.googleapis.com/css?family=Hind:400,600&display=swap');

/* Application Header */
.application-header {
 background-color: #206ead;
 padding: 25px 28px;
 overflow: auto;
}

.application-brand {
 display: inline-block;
 vertical-align: middle;
 line-height: 48px;
}

.application-brand .logo {
 display: inline-block;
 vertical-align: middle;
 /*width: 200px;*/
 width: 13.125rem;
 height: 4.375rem;
}

.application-brand .divider {
 display: inline-block;
 vertical-align: middle;
 width: 2px;
 height: 40px;
 background-color: #ffffff;
 margin: 0 12px;
}

.application-brand .headline {
 display: inline-block;
 vertical-align: middle;
 /*font-family: "Hind", sans-serif;*/
 font-size: 20px;
 font-weight: 600;
 color: #ffffff;
}

.application-header-navigation {
 display: inline-block;
 vertical-align: middle;
 line-height: 48px;
 float: right;
}

.application-header-navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: right;
 font-family: "Hind", sans-serif;
 font-weight: 600;
 line-height: 48px;
}

.application-header-navigation ul li {
 display: inline-block;
 margin-left: 24px;
}

.application-header-navigation ul li:first-child {
 margin-left: 0;
}

.application-header-navigation ul li a {
 text-decoration: none;
 color: #ffffff;
}

.application-header-navigation ul li a:hover {
 text-decoration: underline;
 pointer: cursor;
}

/* Application Header Mobile Styles */
@media screen and (max-width: 600px) {
 .application-header {
  padding: 0px;
  line-height: 32px;
 }
 .application-brand {
  display: block;
  padding: 12px;
  margin: 0 auto;
  text-align: left;
 }
 .application-brand .logo {
  width: 136px;
 }
 .application-brand .headline {
  font-size: 17px;
 }
 .application-header-navigation {
  display: block;
  width: 100%;
  background-color: #ffffff;
 }
 .application-header-navigation ul {
  text-align: center;
  line-height: 32px;
  overflow: auto;
  white-space: nowrap;
 }
 .application-header-navigation ul li {
  margin: 0px;
 }
 .application-header-navigation ul li a {
  display: block;
  padding: 12px;
  color: #206ead;
 }
}

/* Application Main */
.application-main {
 min-height: 300px;
}

.application-main .container {
 max-width: 1200px;
 margin: 32px auto;
 padding: 0 24px;
}

/* Application Footer */
.application-footer {
    clear: both;
    background-color: #474747;
    padding: 24px;
    /*overflow: auto;*/
    /*margin-top: 25px;*/
    position: relative;
    height: 160px;
    margin-top: -160px;
    /*border: solid 2px yellowgreen;*/
}

.application-footer-navigation {
 text-align: center;
}

.application-footer-navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
 /*font-family: "Hind", sans-serif;*/
 font-weight: 600;
 line-height: 35px;
 font-size: 90%;
}

.application-footer-navigation ul li {
 display: inline-block;
 margin-left: 24px;
}

.application-footer-navigation ul li:first-child {
 margin-left: 0;
}

.application-footer-navigation ul li a {
 text-decoration: none;
 color: #ffffff;
}

.application-footer-navigation ul li a:hover {
 text-decoration: underline;
 pointer: cursor;
}

.application-copyright {
 text-align: center;
 margin: 16px 0px;
}

.application-copyright small {
 font-family: "Hind", sans-serif;
 font-size: 14px;
 color: #ffffff;
}

/* Application Footer Mobile Styles */
@media screen and (max-width: 600px) {
    .application-footer {
    padding: 12px;
    height: 200px;
    margin-top: -200px;
 }
 .application-footer-navigation {
  display: block;
  width: 100%;
 }
 .application-footer-navigation ul {
  text-align: center;
 }
 .application-footer-navigation ul li {
  width: 100%;
  margin: 0;
 }
 .application-footer-navigation ul li a {
  display: block;
 }
 .application-copyright {
  margin-top: 12px;
 }
    .float-right {
        float: right;       
    }
    .float-left {
        float: left;        
    }

}

/* Accessibility */
.show-on-focus {
 z-index: 1000;
 position: absolute;
 top: -9999px;
 left: -9999px;
 padding: 8px 12px;
 background-color: #474747;
 color: #ffffff;
}

.show-on-focus:focus {
 position: absolute;
 top: 8px;
 left: 8px;
}

.float-clear {
    clear: both;    
}
.alert p {
    font-size: .9em;
}
.alert p a {
    text-decoration: underline;
    color: blue;
}
.alert h3, p {
    color: #000000;
}
.tab-container {
    overflow: auto;
    width: 99%;   
}