/* Web Intensity of Erosion and Outflow - WIntErO (by Aleksandar Sosic) */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900');

body {
    overflow-x: hidden;
    font-family: 'Noto Sans KR', sans-serif;
    color: #A3AAAE;
}
.offset::before {
    display:block;
    content: "";
    height: 4rem;
    margin-top: -4rem;
}

/* Header section */

/* Top header */

.topheader {
    width: 100%;
    height: 1.45rem;
    background-color: #0077B5;
    margin: 0 auto;
    border: inherit !important;
    border-color: white !important;
    box-shadow: 0 0 20px 12px white;
}
.smallheader {
    font-size: .9rem;
    font-weight: 300;
    color: white;
    padding: .1rem;
    padding-right: 2rem;
    margin: 0 auto;
}
.smallheadericon {
    font-size: .9rem;
    font-weight: 300;
    color: white;
    padding: .1rem;
    padding-left: 1rem;
    margin: 0 auto;
}
.smallheadericon:hover {
   color: silver;
}    

/* End Top header */

/* Navigation */

.navbar {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background-color: #0077B5 !important;
    margin-top: 1.5rem;
}
.navbar-brand img {
    height: 3.5rem;
}
.navbar-nav li {
    padding-right: .4rem;
}
.navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-top: .7rem;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: silver;
}
 
/* End Navigation */

/* End Header section */

/* Map with tags - Front */

.headerfront {
    width: 100%;
    margin: 0 auto;
    margin-top: 3.5rem;
 
}

.mapwidthfront {
    background-size: 100% 100%;
}

.mapfront {
    width: 100%;
    height: 900px;
}

@media (min-width: 576px) {
     
}

@media (min-width: 768px) {
     
}
@media (min-width: 992px) {
     
}
@media (min-width: 1200px) {
     
}
  

.caption {
    width: 100%;
    max-width: 100%;
    position: absolute;
    top: 38%;
    z-index: 1;
    color: #0077B5;
}
.caption h1 {
    font-size: 3rem !important;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .11rem .11rem .6rem white;
    padding-bottom: 1rem;
}
.caption h3 {
    font-size: 1.2rem;
    text-shadow: .06rem .06rem .18rem white;
    padding-bottom: 1.5rem;
}
.btn-lg {
    border-width: medium;
    border-radius: 0.5;
    padding: .5rem 1.5rem;
    font-size: .9rem;
    color: #0077B5;
    border-color: #0077B5;
}
.btn-lg:hover {
    color: white;
    background-color: #0077B5;
    border-color: #0077B5;

}

@media screen and (max-width: 1280px) and (max-height: 800px) {
    .caption h1 {
        font-size: 2.5rem;
        font-weight: 500;
        letter-spacing: .3rem;
        text-shadow: .11rem .11rem .6rem white;
        padding-bottom: .5rem;
    }

    .caption h3 {
        font-size: .8rem;
        text-shadow: .06rem .06rem .18rem white;
        padding-bottom: 1rem;
    }

    /* Crazy CSS overrides here */
}

/* End Map with tags - Front */

/* About */

.narrow {
    width: 75%;
    margin: 1.5rem auto;
    padding-top: 3rem;
}
.narrow h1 {
    font-size: 2.5rem;
    color: #0077B5;
    margin-bottom: 1rem;
} /* for every section */
.lead {
    padding: 1.5rem 1.5rem;
    font-size: 1rem;
    color:#0077B5 ;
}
.heading-underline {
    width: 25rem;
    height: .2rem;
    background-color: white;
    margin: 0 auto;
    box-shadow: 0 0 25px #0077B5;
}/* for every section */
.btn-secondary {
    border-width: medium;
    border-radius: 0.5;
    padding: .5rem 1.5rem;
    font-size: .9rem;
    margin: 1rem;
    margin-bottom: 2rem;
    background-color: white;
    color: #0077B5;
    border-color: #0077B5;
}
.btn-secondary:hover {
    color: white;
    background-color: #0077B5;
    border-color: #0077B5;
}

/* End About */

/* Administration section */

.jumbotron {
    margin-bottom: 0;
    padding: 2rem 0 3.5rem;
    border-radius: 0;
}
h3.heading {
    font-size: 1.5rem;
    font-weight: 500;
    color: #0077B5;
    text-transform: uppercase;
    margin: 2rem 2rem;
}
.heading-underline-second {
    width: 25rem;
    height: .2rem;
    background-color: #0077B5;
    margin: 0 auto;
    box-shadow: 0 0 25px white;
} /* only for accounts */
.fa-sign-in {
    color: #0077B5;
    font-size: 3.3rem !important;
}
.fa-user-plus {
    color: #0077B5;
    font-size: 3.3rem !important;
}
.btn-third {
    border-width: medium;
    border-radius: 0.5;
    padding: .5rem 1.5rem;
    font-size: .9rem;
    margin: 1rem;
    margin-bottom: 2rem;
    background-color: none;
    color: #0077B5;
    border-color: #0077B5;
}
.btn-third:hover {
    color: white;
    background-color: #0077B5;
    border-color: #0077B5;
}
.feature p {
    width: 70%;
    margin: 0 auto;
    color: #0077B5;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* End Administration section */

/* Mobile applications*/

.feature img {
    margin: 0 auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 7rem;
}
h3.headingapps {
    font-size: 1rem;
    font-weight: 400;
    color: #0077B5;
    margin: .5rem .5rem;
    white-space: nowrap;
}

/* End Mobile applications */

/* Newsletter */

.newsletter {
    padding: 1rem 0;
    background-color: #e9ecef;
}
.newsletter .content {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.newsletter .content h1 {
    font-size: 1.5rem;
    color: #0077B5;
    margin-bottom: 1rem;
}        
.newsletter .content .form-control {
    height: 3rem;
    font-size: 0.9rem;
    border-color: #0077B5;
    border-radius: 0.5;
    border-width: medium;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    color: #0077B5;
}
.form-control:focus {    
    box-shadow: inset 0 1px 1px #0077B5, 0 0 8px #0077B5;
}
.form-control::-webkit-input-placeholder {
    color: #0077B5;
}
/* WebKit, Blink, Edge */
.form-control:-moz-placeholder {
    color: #0077B5;
}
/* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder {
    color: #0077B5;
}
/* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder {
    color: #0077B5;
}
/* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder {
    color: #0077B5;
}
/* Microsoft Edge */

.newsletter .content .btn {
    min-height: 3rem;
    border-radius: 0.5;
    border-color: #0077B5;
    background: none;
    color: #0077B5;
    border-width: medium;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.newsletter .content .btn:hover {
    color: white;
    background-color: #0077B5;
    border-color: #0077B5;
}

/* End Newsletter */

/* Footer */

.searchwidth {
    width: 250px;

    margin: 0 auto;
   

 
    font-size: .75rem;
}

    .searchwidth::placeholder {
        color:red;
    }

.form-controls {
    height: 2rem;
    font-size: 0.9rem;
       border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    color: #0077B5;
}

.footer-copyright {
    background-color: #0077B5;
    color: #e9ecef;
    font-size: 0.7rem;
}
.footer-copyright .copyright {
    color: #e9ecef !important;
}
.page-footer {
    background-color: #0077B5;
    padding-bottom: .1rem;
    color: white;
    margin-top: .2rem;
}
.col-lg-3 {
    margin-top: -2rem;
}

.fooa {
    color: white;
    font-size: 0.8rem;
    margin: .1rem;
}
.fooa:hover {
    color: white;
}
.page-footer .narrow {
    width: 90%;
     margin: 0rem auto;
 }
.heading-underline-footer {
    width: 100%;
    height: .2rem;
    background-color: #0077B5;
    margin: 0 auto;
    box-shadow: 0 0 25px white;
}
.heading-f {
    color: white;
    font-size: .8rem;
    text-transform: uppercase;
    padding-bottom: .4rem;
}
.fa-search {
    color: #0077B5;
}

.addressf {
    font-size: .8rem;
    margin: .1rem;
}


/* End Footer */
@media (max-width: 767px) {
    .heading-underline-second {
        width: 5rem;
        height: .2rem;
        background-color: #0077B5;
        margin: 0 auto;
        box-shadow: 0 0 25px white;
    }

    .narrow {
        width: 95%;
        margin: 1.5rem auto;
        padding-top: 3rem;
    }

    .newsletter .content .form-control {
        height: 3rem;
        font-size: .7rem;
        border-color: #0077B5;
        border-radius: 0.5;
        border-width: medium;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;
        color: #0077B5;
    }

    

}

/***************************************/
/***************************************/
/***************************************/

.basins {
    background-color: #0077B5;
    color: white;
    padding-top: 1rem;
    
     
}
.basinslead {
    padding: 1rem;
}

.headertables {
    color: white;
    background-color: #0077B5;
    border-width: .5rem;
}
.headertables:hover {
    background-color: #0077B5 !important;         
}

td {
    font-size: .95rem;
    color: #0077B5;
    /*width: 50%;
    padding-top: .4rem !important;
    padding-bottom: .2rem !important;*/
}

 
tr:hover {
    background-color: white !important;
    color: none !important;
}
 
 
 
.bodytables:hover {
    background-color: white !important;
    color: #0077B5 !important;
}

.tablelink {
    color: #0077B5;
}
    .tablelink:hover {
        background-color: #87CEFA !important;
        color: white !important;
    }
.bodytables {
    color: #0077B5;
}
.tablelinka:hover {
    color: white;
    text-decoration-line: none;
}
.tablelinka {
    color: #0077B5;
    font-size: .95rem;
}

.headerh1 {
    font-size: 2.5rem !important;
}
.headerh5 {
    font-size: 1.3rem !important;
    color: #0077B5 !important;
}
.headerh6 {
    font-size: 1rem !important;
    color: #0077B5 !important;
}