/** Mobile First **/
body {
    padding-top: 10px !important;
}

.modal-content {
    width: 580px;
    padding: 10px;
    border-radius: 10px !important;
}

.modal-header {
    display:  block !important;
    padding-bottom: 5px;
}

.modal-body {
    padding: 13px !important;
}

#btnSubmit.disabled {
    border-color: transparent !important;
}

.typo-body-primary {
    margin-top: 70px;
}

.main-header .logo-cell img  {
    width: 87px !important;
    height: 30px !important;
}

.main-header {
    height: 55px !important;
}

.container .inner-container h1 {
    line-height: 48px;
    padding: 1px;
    padding-bottom: 10px;
}

.paragraph-text {
    font-size: 14px !important;
    line-height: 1.8em !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-bottom: 10px !important;
}

.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.hero-arrow-down {
    display: none;
}

#mobile-menu-btn {
    display: none !important;
}

.footer-menu-block .container .foot-menu-row .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.bg-blue {
    background-color: #006DAD;
}

.natCatCards {
    display: none;
}

.banner-text {
    font-size: 20px !important;
    line-height: 34px !important;
    margin: 10px 10px 15px !important;
}

.blueFloodBanner {
    max-height: 415px;
}

.blueFloodBanner .inner-container {
    height: 460px !important;
}

.ui-autocomplete { 
    position: absolute; 
    cursor: default; 
    border-top: 1px solid hsla(210,2%,60%,.25);
    box-shadow: 0 10px 30px 0 rgba(0,0,0,.1);
    border-radius: 6px 6px 6px 6px;
}   

/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
    padding: 0 4px;
}
.ui-menu-item-wrapper {
    font-size: 15px;
    font-weight: 500 !important;
    line-height: 50px;
    color: rgba(83,86,90,.75);
    transition: color .3s;
    display: inline-block !important;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu-item:hover {
    background-color: hsla(60,4%,85%,.25);
}
.ui-state-active {
    background: transparent !important;
    background-color: transparent !important;
    color: #000 !important;
    border: none !important;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
.pac-icon {
    margin-right: 8px !important;
    margin-left: 8px !important;
    margin-top: 14px !important;
    background-size: 35px !important;
}

.symbol.diamond {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-image: url(/media/jozimugx/dimamond.svg) !important;
}

.info-box.natcat-report .symbol.diamond {
    width: 80px;
    height: 80px;
    line-height: 80px;
}

.symbol {
    position: relative;
    display: inline-block;
}

.disclaimer {
    margin-top: -100px;
}


/* Graph styles */

.graph-bar {
    height: 16px;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    background-color: #e5e6e4;
    border-radius: 6px;
    overflow: hidden;
}

.footer-bottom-block .foot-bottom .disclaimer {
    font-size:13px;
    line-height:20px;
    margin:0;
}

.section-generic.disclaimer-section {
    padding-top: 0px;
    margin-top: -50px;
}
#searchCities::placeholder, #searchCitiesSticky::placeholder, #searchCitiesStickyBottom::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(83,86,90,.75);
    opacity: 1; /* Firefox */
}

#searchCities:-ms-input-placeholder, #searchCitiesSticky:-ms-input-placeholder, #searchCitiesStickyBottom:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(83,86,90,.75);
}

#searchCities::-ms-input-placeholder, #searchCitiesSticky::-ms-input-placeholder, #searchCitiesStickyBottom::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(83,86,90,.75);
}



.graph-bar{height:16px;display:-ms-flexbox;display:flex;width:100%;background-color:#e5e6e4;border-radius:6px;overflow:hidden}
.graph-bar.bar-4>span{width:25%}
.graph-bar.bar-4>span:not(:first-child){border-left:1px solid #fff}
.graph-bar.bar-4.grade-low>span:first-child{background-color:#f0dbbf}
.graph-bar.bar-4.grade-moderate>span:first-child,.graph-bar.bar-4.grade-moderate>span:nth-child(2){background-color:#e5a566}
.graph-bar.bar-4.grade-high>span:first-child,.graph-bar.bar-4.grade-high>span:nth-child(2),.graph-bar.bar-4.grade-high>span:nth-child(3){background-color:#dc4405}
.graph-bar.bar-4.grade-very-high>span:first-child,.graph-bar.bar-4.grade-very-high>span:nth-child(2),.graph-bar.bar-4.grade-very-high>span:nth-child(3),.graph-bar.bar-4.grade-very-high>span:nth-child(4){background-color:#c05131}

.graph-bar.bar-10>span{width:10%}
.graph-bar.bar-10>span:not(:first-child){border-left:1px solid #fff}

.graph-bar.bar-10.grade-5>span:nth-child(-n+1){background:#002C66}
.graph-bar.bar-10.grade-10>span:nth-child(-n+2){background:#002C66}
.graph-bar.bar-10.grade-20>span:nth-child(-n+3){background:#002C66}
.graph-bar.bar-10.grade-30>span:nth-child(-n+4){background:#002C66}
.graph-bar.bar-10.grade-50>span:nth-child(-n+5){background:#004299}
.graph-bar.bar-10.grade-100>span:nth-child(-n+6){background:#0070FF}
.graph-bar.bar-10.grade-200>span:nth-child(-n+7){background:#66A8FF}
.graph-bar.bar-10.grade-250>span:nth-child(-n+8){background:#66A8FF}
.graph-bar.bar-10.grade-500>span:nth-child(-n+9){background:#ADD3FF}
.graph-bar.bar-10.grade-500-plus>span{background:#F2F3F4}

.grade-legend .risk-grades>li.grade-5:before{background-color:#002C66}
.grade-legend .risk-grades>li.grade-10:before{background-color:#002C66}
.grade-legend .risk-grades>li.grade-20:before{background-color:#002C66}
.grade-legend .risk-grades>li.grade-30:before{background-color:#002C66}
.grade-legend .risk-grades>li.grade-50:before{background-color:#004299}
.grade-legend .risk-grades>li.grade-100:before{background-color:#0070FF}
.grade-legend .risk-grades>li.grade-200:before{background-color:#66A8FF}
.grade-legend .risk-grades>li.grade-250:before{background-color:#66A8FF}
.grade-legend .risk-grades>li.grade-500:before{background-color:#ADD3FF}
.grade-legend .risk-grades>li.grade-500-plus:before{background-color:#F2F3F4}
.grade-legend .risk-grades>li.grade-no-data:before{background-color:transparent}

.natcat-river-flood-graph:after {
    background-size: 9.0909% 100%;
  }
  .natcat-river-flood-graph-legend > li.risk-1:before,
  .natcat-river-flood-graph.risk-1:before {
    width: 9.0909%;
    background-color: #fff;
  }
  .natcat-river-flood-graph-legend > li.risk-2:before,
  .natcat-river-flood-graph.risk-2:before {
    width: 18.18181%;
    background-color: #f2f3f4;
  }
  .natcat-river-flood-graph-legend > li.risk-3:before,
  .natcat-river-flood-graph.risk-3:before {
    width: 27.27272%;
    background-color: #add3ff;
  }
  .natcat-river-flood-graph-legend > li.risk-4:before,
  .natcat-river-flood-graph.risk-4:before {
    width: 36.36363%;
    background-color: #66a8ff;
  }
  .natcat-river-flood-graph-legend > li.risk-5:before,
  .natcat-river-flood-graph.risk-5:before {
    width: 45.45454%;
    background-color: #66a8ff;
  }
  .natcat-river-flood-graph-legend > li.risk-6:before,
  .natcat-river-flood-graph.risk-6:before {
    width: 54.54545%;
    background-color: #0070ff;
  }
  .natcat-river-flood-graph-legend > li.risk-7:before,
  .natcat-river-flood-graph.risk-7:before {
    width: 63.63636%;
    background-color: #004299;
  }
  .natcat-river-flood-graph-legend > li.risk-8:before,
  .natcat-river-flood-graph.risk-8:before {
    width: 72.72727%;
    background-color: #002c66;
  }
  .natcat-river-flood-graph-legend > li.risk-9:before,
  .natcat-river-flood-graph.risk-9:before {
    width: 81.81818%;
    background-color: #002c66;
  }
  .natcat-river-flood-graph-legend > li.risk-10:before,
  .natcat-river-flood-graph.risk-10:before {
    width: 90.90909%;
    background-color: #002c66;
  }
  .natcat-river-flood-graph-legend > li.risk-10:before,
  .natcat-river-flood-graph.risk-10:before {
    width: 100%;
    background-color: #002c66;
  }

.natcat-storm-surge-graph:after {
    background-size: 16.66667% 100%;
  }
  .natcat-storm-surge-graph-legend > li.risk-1:before,
  .natcat-storm-surge-graph.risk-1:before {
    width: 16.66667%;
    background-color: #fff;
  }
  .natcat-storm-surge-graph-legend > li.risk-2:before,
  .natcat-storm-surge-graph.risk-2:before {
    width: 33.33333%;
    background-color: #9ca9d6;
  }
  .natcat-storm-surge-graph-legend > li.risk-3:before,
  .natcat-storm-surge-graph.risk-3:before {
    width: 50%;
    background-color: #6868bd;
  }
  .natcat-storm-surge-graph-legend > li.risk-4:before,
  .natcat-storm-surge-graph.risk-4:before {
    width: 66.66667%;
    background-color: #533ca3;
  }
  .natcat-storm-surge-graph-legend > li.risk-5:before,
  .natcat-storm-surge-graph.risk-5:before {
    width: 83.33333%;
    background-color: #4a1a8a;
  }
  .natcat-storm-surge-graph-legend > li.risk-6:before,
  .natcat-storm-surge-graph.risk-6:before {
    width: 100%;
    background-color: #4d0073;
  }

.p-natcat-storm-surge-graph-legend > li.p-risk-1:before,
.p-natcat-storm-surge-graph.p-risk-1:before {
  width: 16.66667%;
  background-color: #fff;
}
.p-natcat-storm-surge-graph-legend > li.p-risk-2:before,
.p-natcat-storm-surge-graph.p-risk-2:before {
  width: 33.33333%;
  background-color: #9ca9d6;
}
.p-natcat-storm-surge-graph-legend > li.p-risk-3:before,
.p-natcat-storm-surge-graph.p-risk-3:before {
  width: 50%;
  background-color: #6868bd;
}
.p-natcat-storm-surge-graph-legend > li.p-risk-4:before,
.p-natcat-storm-surge-graph.p-risk-4:before {
  width: 66.66667%;
  background-color: #533ca3;
}
.p-natcat-storm-surge-graph-legend > li.p-risk-5:before,
.p-natcat-storm-surge-graph.p-risk-5:before {
  width: 83.33333%;
  background-color: #4a1a8a;
}
.p-natcat-storm-surge-graph-legend > li.p-risk-6:before,
.p-natcat-storm-surge-graph.p-risk-6:before {
  width: 100%;
  background-color: #4d0073;
}

.natcat-river-flood-graph,
.natcat-storm-surge-graph {
  height: 16px;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  border: 1px solid #d9d9d6;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background-color: #d9d9d6;
}

.natcat-river-flood-graph:after,
.natcat-river-flood-graph:before,
.natcat-storm-surge-graph:after,
.natcat-storm-surge-graph:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.natcat-river-flood-graph:before,
.natcat-storm-surge-graph:before {
  z-index: 4;
  transition: width 0.2s;
  left: 0;
  width: 0;
}

.natcat-river-flood-graph:after,
.natcat-storm-surge-graph:after {
  left: -1px;
  right: -1px;
  background-image: linear-gradient(90deg, #fff 1px, transparent 0);
  z-index: 5;
}
/**For Desktop**/
@media only screen and (min-width: 760px) {

    .disclaimer {
        max-height: 465px;
        margin-top: -150px !important;
    }

    .container .inner-container h1 {
        margin-top: -50px !important;
    }

    .banner-text-h3 {
        padding-right: 120px !important;
        padding-left: 120px !important;
        margin-top: -15px;
    };

    .blueFloodBanner h1 {
        font-size: 44px !important;
    }

    .main-header .header-container .button-cell {
        float: right;
        margin-top: 30px;
    }

    .main-header .header-container .menu-cell {
        margin-left: auto;
        margin-right: auto;
        margin-top: 46px;
        display: inline-block;
        float: none;
    }

    .module-hero .container {
        max-width: 1040px;
    }

    .main-header .logo-cell img {
        height: 68px !important;
        width: 197px !important;
    }

    .main-header {
        height: 100px !important;
    }

    .main-header .header-container {
        padding: 0 30px;
        text-align: center;
    }

    .btn-default {
        font-weight: 400 !important;
    }

    .container .inner-container h1 {
        margin-top: -40px;
        line-height: 70px;
    }

    .paragraph-text {
        font-size: 20px !important;
        line-height: 34px !important;
        margin: 10px 110px 15px !important;
    }

    .hero-arrow-down {
        display: inline;
    }
    

    li, ol, ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .logo-block div:nth-child(2) {
        padding: 10px !important;
    }

    .foot-bottom {
        font-size: 16px !important;
        color: #000000;
    }

    .natcat-search {
        max-width: 640px;
        margin-left: 190px;
    }
}