:root {
    --primary-blue: #1a5f7a;
    --secondary-blue: #2a87b1;
    --accent-yellow: #ffc107;
    --light-blue: #e3f2fd;
    --dark-blue: #0a4275;
    --danger-red: #dc3545;
    --success-green: #28a745;
    --body-bg-color: #f4f7f9;
    --body-font-color: #333;
    --font-color-white: #fff;
    --glass-bg: rgba(255, 255, 255, 0.11);
    --glass-bg-hover: rgba(255, 255, 255, 0.8);
    --glass-shadow-color: rgba(0, 0, 0, 0.2);
    --alert-border-color: #ff4d4f;
    --glass-black-bg: rgb(0 0 0 / 68%);
    --glass-bg-light: rgb(255 255 255 / 39%);
    --glass-shadow-light: rgb(255 255 255 / 20%)
}

@keyframes blink1 {
    0% {
        color: #fff
    }

    75% {
        color: #ff0
    }

    100% {
        color: #ff0
    }
}

@keyframes blink2 {
    0% {
        background: #0782BB
    }

    25% {
        background: red
    }

    100% {
        background: #0782BB
    }
}

@keyframes blink3 {
    0% {
        background: #2a87b1
    }

    25% {
        background: #1a5f7a
    }

    100% {
        background: #2a87b1
    }
}

body {
    font-family: 'Roboto',sans-serif;
    color: var(--body-font-color);
    line-height: 1.6;
    background-color: var(--body-bg-color)
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Poppins',sans-serif;
    font-weight: 600
}

.top-header {
    background-color: var(--dark-blue);
    color: var(--font-color-white);
    padding: 8px 0;
    font-size: .85rem
}

.main-header {
    background: linear-gradient(to bottom,var(--primary-blue),var(--secondary-blue));
    color: var(--font-color-white);
    padding: 15px 0
}

.logo-container {
    display: flex;
    align-items: center
}



  .marquee-div {
    overflow: hidden;
    white-space: nowrap;
    /* background: #111; */
    /* color: #fff; */
    /* padding: 10px 0; */
    position: relative;
  }

  .marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: scroll_marquee 30s linear infinite;
  }
#NewsScroll:hover .marquee-content ,
.marquee-div:hover .marquee-content {
  animation-play-state: paused;
}
  @keyframes scroll_marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

.marquee-div {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee-div p {
  display: inline-block;
  margin: 0;
}

.logo {
    height: 70px;
    margin-right: 15px
}

.logo-text h1 {
    font-size: 1.8rem;
    margin-bottom: 5px
}

.logo-text p {
    font-size: .9rem;
    opacity: .9;
    margin: 0
}

.navbar-toggler {
    padding: 10px;
    margin: 10px 0
}

.search-box {
    max-width: 400px
}

.navbar-custom {
    background-color: var(--primary-blue);
    padding: 0
}

.navbar-custom .navbar-nav .nav-link {
    font-weight: 500;
    transition: all 0.3s;
    color: var(--font-color-white);
    font-size: 1rem;
    text-transform: uppercase;
    padding: 5px 12px
}

.navbar-custom .navbar-nav .nav-link:hover,.navbar-custom .navbar-nav .nav-link.active {
    background-color: var(--secondary-blue);
    color: var(--font-color-white)
}

.dropdown-menu {
    background-color: #257a9f;
    border: none;
    border-radius: 0
}

.navbar-nav .dropdown-menu {
    padding: 0;
    margin: 0;
    box-shadow: 6px 5px 8px 7px #00000069;
    border-radius: 0 0 5px 5px
}

.dropdown-item {
    color: var(--font-color-white);
    padding: 5px 20px;
    border: 1px solid #000;
    margin-top: -1px
}

ul li:last-child .dropdown-item {
    border-radius: 0 0 5px 5px
}

.dropdown-item:hover {
    background-color: var(--secondary-blue);
    color: var(--font-color-white)
}

.hero-section {
    background: linear-gradient(rgb(0 82 105 / 88%),rgb(41 134 161 / 82%)),url(https://images.unsplash.com/photo-1592210454359-9043f067919b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);
    background: linear-gradient(to right,var(--primary-blue),#34a1e8);
    background-size: cover;
    background: #e4e4e4;
    background-position: center;
    color: var(--font-color-white);
    padding: 80px 0;
    margin-bottom: 30px
}

.hero-content {
    text-align: center
}

.hero-content .btn {
    font-size: 1rem;
    display: flex
}

.btn-default {
    border: 1px solid #00000047;
    background: #fff;
    color: #000;
    vertical-align: middle
}

.btn-default:hover {
    border: 1px solid #000000f0
}

.hero-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px
}

.weather-search-card {
    background-color: var(--glass-shadow-color);
    border-radius: 10px;
    padding: 20px 25px 10px;
    color: #000;
    box-shadow: 0 10px 30px var(--glass-shadow-color);
    min-height: 400px;
    padding-bottom: 0
}

.current-weather {
    background: linear-gradient(to right,#2a87b1eb,#1a5f7ac2);
    background-color: var(--glass-bg);
    color: var(--font-color-white);
    border-radius: 10px;
    padding: 20px;
    font-size: .8rem;
    box-shadow: 0 5px 15px var(--glass-shadow-color)
}

.temp-display {
    font-weight: 700;
    line-height: 1;
    font-size: 1.3rem
}

.temp-display .max_temp {
    color: #FF9800;
    text-align: center
}

.temp-display .min_temp {
    color: #99f3ff;
    text-align: center
}

.top_menu_box {
    display: inline-flex
}

.weather-icon {
    font-size: 3rem;
    color: var(--accent-yellow)
}

.sunrise_sunset span.btn {
    display: inline-block;
    background: linear-gradient(to right,#2a87b1eb,#1a5f7ac2);
    color: #fff;
    border: 0;
    cursor: default
}

.sunrise_sunset span.btn:hover {
    background: linear-gradient(to right,#2a87b1eb,#1a5f7ac2);
    color: #fff;
    border: 0
}

.sunrise_sunset span.btn span {
    line-height: 18px;
    text-align: right;
    align-content: center
}

.alert-box {
    border-left: 5px solid var(--danger-red);
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 5px;
    border: 1px solid #000
}

a.feature-card,.feature-card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s,box-shadow 0.3s;
    display: block;
    text-decoration: none;
    box-shadow: 0 5px 15px var(--glass-shadow-color);
    cursor: pointer
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px var(--glass-shadow-color)
}

.feature-card .card-header {
    background-color: #fff;
    color: var(--font-color-white);
    padding: 15px;
    border: none;
    font-weight: 600
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--secondary-blue);
    margin-bottom: 15px
}

.forecast-day {
    text-align: center;
    padding: 1px;
    border-radius: 8px;
    background-color: #ddd;
    transition: all 0.3s
}

.forecast-day:hover {
    background-color: #d4e8f9
}

.forecast-day.active {
    background-color: var(--secondary-blue);
    color: var(--font-color-white)
}

.main-footer {
    background-color: var(--dark-blue);
    color: var(--font-color-white);
    padding: 60px 0 30px;
    margin-top: 50px;
    padding-bottom: 0
}

.footer-links h5 {
    border-bottom: 2px solid var(--secondary-blue);
    padding-bottom: 10px;
    margin-bottom: 20px
}

.footer-links ul {
    list-style: none;
    padding: 0
}

.footer-links ul li {
    margin-bottom: 8px
}

.footer-links ul li a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s
}

.footer-links ul li a:hover {
    color: var(--font-color-white);
    padding-left: 5px
}

.copyright {
    background-color: var(--glass-shadow-color);
    padding: 15px 0;
    margin-top: 10px;
    font-size: .9rem;
    color: #ccc
}

.resource-card {
    background: var(--font-color-white);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--glass-shadow-color);
    transition: transform 0.3s ease;
    height: 100%;
    overflow: hidden;
    border-top: 4px solid var(--secondary-blue)
}

.resource-card:hover {
    transform: translateY(-5px)
}

.card-category-title {
    background: var(--light-blue);
    padding: 12px 15px;
    font-weight: 700;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    font-size: 1.1rem
}

.card-category-title i {
    margin-right: 10px;
    font-size: 1.2rem
}

.resource-card ul,.link-list {
    list-style: none!important;
    padding: 15px;
    margin: 0
}

h1#page_head {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin-top: 30px;
    font-weight: 700;
    font-size: 1.5rem;
    color: #000
}

h1#page_head::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--accent-yellow)
}

#the_main_page ul,.link-list ul {
    list-style: none;
    padding-left: 5px
}

#the_main_page ul li,.resource-card ul li,.link-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 18px
}

#the_main_page ul li::before,.resource-card ul li::before,.link-list li::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--secondary-blue)
}

#the_main_page ul li a,.resource-card ul li a,.link-list a {
    text-decoration: none;
    color: #555;
    font-size: .9rem;
    transition: 0.2s;
    display: block;
    padding: 0 5px
}

#the_main_page ul li a:hover,.resource-card ul li a:hover,.link-list a:hover {
    color: #1a5f7a;
    background: #f1f1f1
}

#the_main_page ul li h2 {
    display: block
}

#the_main_page ul li h2 a {
    display: block;
    font-size: 1.5rem;
    padding: 0 5px;
    color: #000;
    font-weight: 500
}

#the_main_page ul li a:hover,.resource-card ul li a:hover,.link-list a:hover {
    color: var(--primary-blue);
    font-weight: 500
}

.sub-link-group {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.badge-sub {
    font-size: .75rem;
    background: #f0f2f5;
    color: #666;
    padding: 2px 8px;
    border-radius: 4px;
    text-decoration: none
}

.badge-sub:hover {
    background: var(--secondary-blue);
    color: var(--font-color-white)
}

.section-heading {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-weight: 700
}

.section-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--accent-yellow)
}

#scroll_bar_wrapper {
    position: absolute;
    left: 0;
    right: 0
}

#NewsScroll marquee p,#NewsScroll marquee div,#NewsScroll marquee * {
    display: inline-block
}

.item_of_honor_images {
    max-width: 100%;
    border: 5px solid var(--font-color-white);
    height: 82px
}

.box_of_honor_images {
    text-align: center;
    display: block;
    background: #bbb;
    padding-top: 5px;
    padding-bottom: 5px
}

.label_of_honor_images {
    display: block;
    text-align: center;
    color: #fff;
    background: #2b87b1;
    border-bottom: 1px solid #00000038
}

.label_of_honor_images a {
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: 150px;
    font-size: 12px;
    padding: 5px 5px;
    line-height: 15px
}

.hero-section #mapwrap {
    position: relative;
    height: 510px
}

.hero-section #map {
    position: relative;
    margin-left: -25px;
    transform: scale(.8);
    margin-top: -50px
}

.hero-section #mapimage {
    position: absolute;
    width: 100%;
    height: 500px;
    z-index: 1
}

.hero-section #mapimage img {
    width: 370px!important;
    border-radius: 10px
}

.hero-section #mapicon {
    position: absolute;
    z-index: 9
}

.hero-section #mapicon img {
    height: 60px
}

.hero-section #mapicon span {
    position: absolute;
    cursor: pointer
}

.hero-section .alert-box {
    background: rgb(0 0 0 / 23%);
    color: #000;
    border: none;
    min-height: 110px;
    align-content: center
}

.current-weather-box-home {
    position: relative;
    z-index: 9
}

.current-weather {
    position: relative;
    overflow: hidden
}

.current-weather::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    z-index: 0
}

.current-weather::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right,#2a87b1eb,#1a5f7ac2);
    background-size: 100% 100%;
    z-index: 1;
    opacity: 1
}

.current-weather h3 {
    font-size: 1.5rem;
    font-weight: 400
}

#NewsScroll {
    display: flex;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    border: 1px solid #4444442e
}

#headbg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #00000059;
    z-index: 3
}

#headbg::after {
    content: ""
}

#headbg {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    bottom: -15px;
    overflow: hidden;
    z-index: 0
}

#headbg img {
    position: absolute;
    min-height: 100%;
    width: 100%;
    transition: opacity 0.5s;
}

#logo-container {
    z-index: 2;
    position: relative;
    min-height: 130px
}

#home_products_box .card-img {
    background-color: var(--primary-blue);
    padding: 5px;
    border: none;
    height: 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

#home_products_box .card-header {
    min-height: 68px;
    align-content: center;
    text-align: center
}

#home_products_box img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 5px
}

table {
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    border-collapse: collapse;
    width: 100%
}

table td,table th {
    border: 1px solid #ddd;
    padding: 8px
}

table tr:nth-child(even) {
    background-color: #f2f2f2
}

table tr:hover {
    background-color: #ddd
}

table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #0a4275;
    color: #fff;
    text-shadow: none
}

#page_textArea {
    max-height: unset!important
}

#select_forecast_location_home {
    font-size: 1.5rem
}

#select_forecast_location_home option {
    font-size: 1rem
}

#iframe {
    position: fixed;
    display: none;
    width: 100%;
    background: rgb(255 255 255 / .6);
    top: 0;
    left: 0;
    padding: 20px 0;
    text-align: center;
    height: 100%;
    z-index: 9999
}

#iframe iframe {
    width: 90%;
    background: #fff;
    border: 0;
    height: 90%;
    position: fixed;
    z-index: 999;
    max-height: 360px;
    left: 5%;
    top: 5%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px
}

#iframe div.close {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / .7);
    top: 0;
    z-index: 1
}

#iframe span.close {
    position: fixed;
    right: 5%;
    top: 5%;
    background: #fff;
    z-index: 9999999;
    height: 15px;
    width: 15px;
    color: #333;
    padding: 10px;
    margin: -15px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border: 4px solid red;
    cursor: pointer
}

#iframe span.close:hover {
    border: 4px solid red;
    color: red;
    background: #fff
}

.myIframe {
    padding-top: 50px;
    display: block;
    z-index: 99999
}

.myIframe[view="active"] {
    background: #fff;
    position: fixed!important;
    left: 0;
    top: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    z-index: 999999!important
}

.zoom {
    background: #1a5f7a;
    color: #fff;
    padding: 5px 12px;
    border-radius: 0;
    -moz-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
    float: left;
    clear: both
}

.fwrap table {
    border: none!important
}

.boxframe {
    border: 0;
    height: 300px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden
}

#doc_changer {
    background: #1a5f7a!important;
    color: #fff;
    border-radius: 0!important
}

#docFrame[view=""] iframe {
    height: 1200px!important
}

.fwrap img {
    max-width: 100%
}

.list-eng img {
    width: 80px!important;
    height: auto!important;
    border: 1px solid #e9e9e97a
}

.list-eng tr td:nth-child(2) {
    min-width: 80px;
    text-align: center
}

.list-eng tr td:nth-child(3) p,.list-eng tr td:nth-child(3) {
    text-align: center
}

.list-eng tr td:nth-child(4) p,.list-eng tr td:nth-child(4) {
    text-align: center
}

table.list-eng,.list-eng,table.list-eng tr td,table.list-eng tr td *,table.list-eng tr td p {
    font-family: Arial!important;
    font-size: 12px!important;
    text-align: left;
    background: #fff!important
}

.framezoom {
    position: absolute;
    margin-left: 188px;
    margin-top: 11px;
    background: #E8E8E8;
    font-weight: 400;
    border-radius: 4px 4px 0 0;
    line-height: 26px;
    height: 26px;
    text-align: center;
    padding: 0;
    width: 72px;
    font-size: 12px;
    color: #272727;
    border: 1px solid #A8A8A8
}

#map_home {
    height: 400px;
    background: none;
    position: relative;
    border: 1px solid #b4c5ce59;
    border-radius: 10px
}

#map_home:focus {
    border: 1px solid #b4c5ce59;
    -webkit-tap-highlight-color: #59697159;
    outline: #59697159
}

.current-weather .weather-icon img {
    height: 60px
}

.home_station_marker img {
    width: 50px!important
}

.framezoom:hover {
    background: #FFF;
    border-bottom-color: #fff
}

.leaflet-control-attribution {
    display: none
}

#home_products_box .card-title {
    color: #000;
    font-size: 1rem
}

#home_current_weather_main {
    margin-bottom: 30px
}

#forecast_box_home .current-weather::after {
    background: #1a5f7a
}

#earthquake-page h2 {
    font-size: 1.5rem;
    margin-bottom: 30px
}

#earthquake-page h2 {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 30px;
    font-weight: 700;
    font-size: 1.5rem;
    color: #000
}

#earthquake-page h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--accent-yellow)
}

#loader {
    position: fixed;
    z-index: 999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 1368px) and (min-width:992px) {
    .hero-section #map {
        transform:scale(.65,.65);
        margin-left: -55px
    }

    .weather_icon_temp {
        display: flex;
        flex-direction: column
    }

    .hero-content .btn {
        margin: 5px
    }

    .temp-display {
        font-size: 1rem
    }

    #home_current_weather_main {
        margin-bottom: 10px
    }

    .temp-display {
        font-size: 1rem
    }
}

@media (max-width: 992px) and (min-width:768px) {
    #weather_box_home {
        margin-bottom:30px
    }

    #home_current_weather_main {
        margin-bottom: 30px
    }

    .temp-display {
        font-size: 1.2rem
    }
}

#mypageLimit h2 {
    margin-left: 0!important;
    font-size: 1.2rem
}

#satelite-page a {
    text-decoration: none
}

#satelite-page h1.center,h1.center {
    font-size: 1.5rem;
    color: #0782BB;
    text-align: center
}

#mypageLimit ul {
    list-style: disc;
    padding-left: 20px
}

#mypageLimit ul li {
    padding-left: 25px
}

#mypageLimit ul li a {
    text-decoration: none;
    color: #000;
    display: block
}

#mypageLimit ul li a:hover {
    text-decoration: none;
    color: #000;
    background: #ddd
}

.meteogram {
    padding: 0;
    list-style: none;
    display: block
}

.meteogram li {
    display: inline-block
}

.meteogram li.have-dropdown a {
    padding: 0 8px;
    display: block;
    background: #FFF;
    color: #0782C9;
    border: 1px solid #409EFF;
    text-decoration: none;
    font-size: 1rem;
    padding: 2px 15px
}

.meteogram .dropdown {
    position: absolute;
    display: none;
    padding: 0;
    border: 2px solid #42A0D6;
    position: absolute
}

.meteogram li.have-dropdown:hover .dropdown {
    display: block
}

.meteogram .dropdown li {
    display: block
}

.meteogram .dropdown li a {
    font-size: 13px;
    border: 0;
    border-top: 1px solid #409EFF;
    color: #484848;
    text-decoration: none;
    font-size: 1rem
}

.meteogram .dropdown li a:hover {
    color: #FFF;
    background: #42A0D6
}

.meteogram li.active a {
    background: #444;
    color: #fff
}

.meteogram .dropdown li.active a {
    color: #fff;
    border-bottom: 1px solid #88A4FF;
    border-right: 1px solid #88A4FF;
    line-height: 30px;
    height: 30px;
    font-weight: 700
}

.fwrap {
    display: block;
    clear: both
}

iframe.fwrap {
    width: 100%
}

.center {
    text-align: center
}

img.fwrap {
    display: inline-block
}

#radar .btn {
    padding: 5px 7px;
    border: 1px solid #000;
    border-radius: 0;
    background: #78baf7;
    color: #000;
    padding: 5px 15px;
    align-items: center;
    display: inline-flex
}

#radar .btn.active,#radar .btn.active:hover {
    background: #0a4275;
    color: #fff
}

#earthquake-page td.comonbtn button {
    display: block;
    border: 0!important;
    background: #ffffff!important;
    font-size: 1.2rem!important;
    padding: 10px;
    height: auto!important
}

#earthquake-page td.comonbtn {
    background: none!important;
    padding: 0
}

.container .btn-wrap .btn {
    align-items: center;
    display: flex!important
}

.container .btn-wrap {
    background: #E5F2FF;
    color: #FAFEFF;
    padding: 10px 5px 6px 5px;
    border: 1px solid #BDDDFF;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    justify-content: center;
    float: none!important
}

#nwp-page h2 {
    font-size: 1.2rem;
    margin-bottom: 20px
}

#nwp-page table {
    border-collapse: collapse;
    border-spacing: 0
}

#nwp-page td {
    background: #fff;
    padding: 2px 0
}

#nwp-page td a {
    text-decoration: none;
    display: block;
    padding: 5px
}

#nwp-page td:hover a,#nwp-page td.active a {
    background: #3DA1FF
}

#nwp-page td:hover a,#nwp-page td.active a {
    color: #fff
}

.blink1 {
    -o-animation: blink1 1s;
    -moz-animation: blink1 1s;
    -ms-animation: blink1 1s;
    -webkit-animation: blink1 1s;
    animation: blink1 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite
}

.blink2 {
    -webkit-animation: blink2 2s;
    -moz-animation: blink2 2s;
    -ms-animation: blink2 2s;
    -o-animation: blink2 2s;
    animation: blink2 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite
}

.blink3 {
    -webkit-animation: blink3 2s;
    -moz-animation: blink3 2s;
    -ms-animation: blink3 2s;
    -o-animation: blink3 2s;
    animation: blink3 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
    position: absolute
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block
}

.font-weight-100 {
    font-weight: 100;
    font-size: 1.3rem
}

.language-button {
    cursor: pointer;
    background: none;
    border: none
}

#satelite_tool_boxBottom,
#aws_tool_boxBottom ,
#qpe_tool_boxBottom {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: auto;
    padding: 10px 0;
    text-align: center;
    background: #ffffff;
    font-weight: bold;
    color: #000;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#satelite_tool_boxBottom .btn,
#aws_tool_boxBottom .btn,
#qpe_tool_boxBottom .btn {
    margin: 0 2px;
}

#satelite_tool_boxBottom input,
#qpe_tool_boxBottom input {
    display: block;
    /* position: absolute; */
    left: 30px;
    right: 10px;
    width: -webkit-fill-available;
}

#map_satellite_new{
    position: relative;
    display: block;
    height: 450px;
    width: 100%;
}
.map_satellite_new_img {
    position: absolute; 
    opacity: 0;
}

.map_satellite_new_img:last-child {
    position: relative;
}

.leaflet-container .leaflet-control-attribution {
    opacity: 0.2;
    position: relative;
}

.leaflet-container .leaflet-control-attribution::after {
    content:"";
}
.leaflet-container .leaflet-control-attribution::before {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
}
@media (max-width: 768px) {
    #select_forecast_location_home {
        font-size:1rem
    }

    #headbg {
        display: none
    }

    #logo-container {
        min-height: auto
    }

    .logo-text h1 {
        font-size: 1.4rem
    }

    .hero-content h2 {
        font-size: 1.8rem
    }

    .hero-section #map {
        transform: scale(1);
        margin-left: 0;
        display: flex;
        min-height: 540px;
        align-items: center;
        justify-content: center;
        margin-top: 0;
        margin: 20px 0
    }

    #mapwrap {
        height: 510px;
        width: 370px
    }

    .label_of_honor_images a {
        width: auto;
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #honor_persons_box {
        margin-bottom: 20px
    }

    .hero-section {
        padding: 20px 0
    }

    .weather-search-card {
        min-height: 50px;
        padding-bottom: 20px
    }

    #weather_box_home {
        margin-bottom: 20px
    }

    #home_current_weather_main {
        margin-bottom: 20px
    }

    .temp-display {
        font-size: 1.3rem
    }
}