/* external important */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Carme&family=Fredoka+One&display=swap');

body {
    font-family: 'Carme';
}

/* single page animation */
.show-page {
    transform: translateY(0%);
    transition: 2s;

}

.hide-page {
    transform: translateY(-100%);
    transition: 2s;
}

#all-pages {
    position: relative;

}

#landing-page {
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(images/landing-page/merlion.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#main-page {
    position: absolute;
    height: 100vh;
    width: 100%;
}

#contact-page {
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: 1000;
    background-color: white;
}

/* landing page styling  */
.view-layer {
    position: absolute;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    top: 300px;
    width: 60vw;
    padding: 20px;
}

.btn-image {
    height: 20px;
}

/* navbar styling */
.navbar-brand {
    font-family: 'Fredoka One';
    letter-spacing: 1px;
}

.nav-buttons .form-control{
    border: 1px solid #C0392B;
    font-family: 'Cantarell'
}

/* map and elements styling */
#map-container {
    position: relative;
}

#map {
    height: 91.5vh;
}

/* return to search button styling */
#search-side {
    display: none;
    width: 200px;
    position: absolute;
    z-index: 800;
    bottom: 50px;
    right: 20px;
    background-color: #C0392B;
    color: white
}

/* weather button styling */
#weatherBtn {
    position: absolute;
    z-index: 800;
    top: 10px;
    right: 60px;
    background-color: #C0392B;
    color: white;
}

#weatherBtn:hover,
#search-side:hover {
    background-color: white;
    color: #C0392B;
    border-color: #C0392B
}

/* marker cluster styling */
.marker-cluster-small {
    background-color: #c03a2ba3;
}

.marker-cluster-small div {
    background-color: #C0392B;
}

.marker-cluster-medium {
    background-color: rgba(134, 151, 203, 0.795);
}

.marker-cluster-medium div {
    background-color: rgba(134, 151, 203);
}

.marker-cluster-large {
    background-color: rgba(47, 167, 204, 0.595);
}

.marker-cluster-large div {
    background-color: rgba(47, 167, 204, 0.933);
}

/* leaflet controller styling */
.leaflet-control {
    border-color: #C0392B !important;
    background-color: #F8F9FA;
    font-family: 'Carme'
}

.leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: black;
    background-color: F8F9FA;
    border-color: #C0392B !important;
}

.leaflet-bar a {
    border-bottom: 1px solid #C0392B;
}

.leaflet-right .leaflet-control-layers:nth-child(1) .leaflet-control-layers-toggle {
    width: 36px;
    height: 36px;
}

/* leaflet popup styling */
.custom-popup .leaflet-popup-content-wrapper {
    color: black;
    font-size: 15px;
    line-height: 24px;
    border: 2px solid #C0392B !important;
    border-radius: 0.25rem;
    font-family: 'Carme';
}

.custom-popup .leaflet-popup-tip {
    background: #C0392B;
}

.popup-border {
    border: #C0392B 2px solid;
}

/* .popup-interior {
    margin-top: 0px;
    margin-bottom: 5px;
} */
.entry-border{
    background-color:#c03a2b48;
    font-size: 0.9rem;
}

.popup-interior p {
    margin-top: 0px;
    margin-bottom: 5px;
}

.pop-up-text{
    font-size: .95rem;
}

.image-border{
    border: 2px solid #C0392B;
}

/* leaflet buttons styling */
.custom-popup .leaflet-popup-content-wrapper button {
    background-color: #C0392B;
    color: white;
    border-color: #C0392B;
    border-width: 1px;
    border-style: solid;
    border-image: initial;
    border-radius: 0.25rem;
}

.custom-popup .leaflet-popup-content-wrapper button:hover {
    background-color: white;
    color: #C0392B;
    border-width: 1px;
    border-style: solid;
    border-image: initial;
    border-radius: 0.25rem;
}

.custom-popup .leaflet-popup-content-wrapper a {
    background-color: #C0392B;
    color: white;
    border-color: #C0392B;
    border-width: 1px;
    border-style: solid;
    border-image: initial;
    border-radius: 0.25rem;
    text-decoration: none;
}

.custom-popup .leaflet-popup-content-wrapper a:hover {
    background-color: white;
    color: #C0392B;
    border-width: 1px;
    border-style: solid;
    border-image: initial;
    border-radius: 0.25rem;
    text-decoration: none;
}


/* leaflet routing icon styling */
.leaflet-routing-container-hide .leaflet-routing-collapse-btn{
    width: 20px;
    height: 20px;
    background-image: url(images/overlay-control/routing.png);
    background-size: cover;
    background-position: center;
}

.leaflet-control-container .leaflet-routing-container-hide {
    width: 36px;
    height: 36px;
}

/* side offcanvas styling */
.offcanvas-title{
    font-family: 'Cantarell'
}

.nav-tabs .nav-link {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-color: #C0392B;
    background-color: #C0392B;
    color: white
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-color: #C0392B #C0392B white;
    color: #C0392B;

}

.nav-tabs {
    border-bottom: 1px solid white;
}

/* cards styling */
.card {
    border: #C0392B 2px solid;
}

.card>img {
    border-bottom: #C0392B 2px solid;
}

.header-image {
    height: 30px;
}

.card-title {
    font-weight: 900;
    text-align: center;
    letter-spacing: 2px;
}

.card-text {
    /* text-align: center; */
}

/* search canvas styling */
#search {
    border-color: #C0392B
}

#loader {
    display: none;
}

#results {
    overflow-y: scroll;
}

.search-result {
    margin: 10px;
    cursor: pointer;
}

/* form validation styling */
.form-check-input:checked {
    background-color: #C0392B;
    border-color: #C0392B
}

.invalid {
    color: darkred;
    display: none;
}

/* general buttons styling */
.btn-general {
    background-color: #C0392B;
    color: white;
    border-color: #C0392B;
    border-radius: 0.25rem;
}

.btn-general:hover {
    background-color: white;
    color: #C0392B;
}

.btn-general-straight {
    background-color: #C0392B;
    color: white;
    border-color: #C0392B;
    border-radius: 0px !important;
}

.btn-general-straight:hover {
    background-color: white;
    color: #C0392B;
}

/* media query for device responsiveness */
@media screen and (max-width: 414px){
    #map{
        height: 87vh;
    }
    .custom-popup .leaflet-popup-content-wrapper {
    font-size: 1em;
    }
    .pop-up-text{
        font-size: 1em;
    }
    h5.card-title.my-3{
        font-size: 1.3em;
    }
}

@media screen and (max-width: 768px) {
    .nav-buttons .form-control {
        font-size: 13px;
    }

    #contact-us-button {
        font-size: 13px;
    }

    #landing-page {
        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(images/landing-page/mbs.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .view-layer {
        justify-content: center;
        top: 350px;
        width: 80vw;
    }

    .animate-buttons {
        display: flex;
        flex-direction: column !important;
    }

    .animate-btn {
        margin-top: 2px;
        margin-bottom: 2px;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    .view-layer {
        justify-content: center;
        top: 350px;
        width: 80vw;
    }
  
}

@media screen and(min-width: 993px){
    .view-layer {
        width: 80vw;
        top: 900px;
    }
}