/* Colors from:  https://www.canva.com/templates/EADao2XELJw-orange-cycle-diagram/ */

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins';
    background-color: #ede4d5;
    color: #596d7e;
    font-size: 1rem;
}

ul,
li,
ol {
    margin: 0 10px;
    padding: 0;
}

a:link,
a:hover,
a:visited {
    font-weight: bold;
    text-decoration: none;
}

.padding {
    padding-top: 1.5rem;
}

.padding-large {
    padding-top: 2.5rem;
}

.gc-logo {
    width: 100px;
}

.login_status {
    padding: 0 10px;
    text-align: right;
    font-style: italic;
    font-size: small;
}

/* Banners */
.found_number {
    font-family: "Zen Dots";
}

.province-banner {
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.province-banner {
    background-color: #0E518D;
    color: #F7FBF5;
    font-weight: bold;
    text-align: center;
}

.province {
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.province {
    background-color: #0E518D;
    color: #F7FBF5;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.zoom-icon {
    position: relative;
}

.zoom-icon i {
    position: absolute;
    right: 2rem;
    top: .9rem;
    padding: 5px 8px;
}

.townships-in-province {
    display: none;
}

.province-color-0,
.province-color-6,
.province-color-00,
.province-color-06,
.province-color-Groningen,
.province-color-Utrecht {
    background-color: #3AB449;
}

.province-color-7,
.province-color-07,
.province-color-11,
.province-color-Noord-Holland,
.province-color-Limburg {
    background-color: #E41371;
}

.province-color-2,
.province-color-8,
.province-color-02,
.province-color-08,
.province-color-Drenthe,
.province-color-Zuid-Holland {
    background-color: #9932CC;
}

.province-color-3,
.province-color-9,
.province-color-03,
.province-color-09,
.province-color-Overijssel,
.province-color-Zeeland {
    background-color: #F68D1E;
}

.province-color-4,
.province-color-05,
.province-color-10,
.province-color-Flevoland,
.province-color-Noord-Brabant {
    /*background-color: #929292;*/
    background-color: #00A7B7;
}

.province-color-5,
.province-color-1,
.province-color-01,
.province-color-05,
.province-color-Friesland,
.province-color-Gelderland {
    background-color: #FEF010;
    color: #596d7e;
}

.township {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.township {
    background-color: #ede4d5;
}

.township-name {
    padding: 0.5rem 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.township-name {
    background-color: #0E518D;
    color: #F7FBF5;
    font-weight: bold;
    text-align: center;
}

.township-name-details {
    padding: 0.5rem 0;
    border-radius: 10px;
}

.township-name-details {
    background-color: #0E518D;
    color: #F7FBF5;
    font-weight: bold;
    text-align: center;
}

.township-name-sign {
    padding: 0;
    margin: 0;
}

.township-content {
    padding: 0.5rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.township-content {
    background-color: #0E518D;
}

.township-content a:link,
.township-content a:visited {
    text-decoration: none;
    color: #fff;
}

.township-content a:hover {
    text-decoration: none;
    color: #929292;
}

.township-content-new,
.township-content-created_building {
    background-color: #0E518D;
    color: #fff;
}

.township-content-loggable,
.township-content-loggable a:link,
.township-content-loggable a:visited {
    background-color: #fff;
    color: #929292;
}

.township-content-being-built {
    background-color: #F68D1E;
}

.township-content-found {
    background-color: #3AB449;
    color: #fff;
}

.township-content-None,
.township-content-None a:link,
.township-content-None a:visited {
    color: #F68D1E;
}

.township-content {
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}

.township-found-status {
    font-size: 0.8rem;
}

/* Navbar */
.navbar {
    padding: .8rem;
    background-color: #e98963;
}

.dropdown-backdrop {
    position: static;
    z-index: 0;
}

/* Banner images */
.banner-image {
    padding: 10px;
    max-width: 100%;
}

/* Social media */
.social {
    text-align: center;
}

.social a {
    font-size: 4em;
    padding: 0 2.8rem;
}

.fa-facebook {
    color: #3b5998;
}

.fa-instagram {
    color: #517fa8;
}

.fa-facebook:hover,
.fa-instagram:hover {
    color: #d5d5d5;
}

/* Lists */
.list-small-screen {
    display: inline;
    margin-top: 2rem;
}

.list-large-screen {
    display: none;
}

.geocache-icon {
    height: 2rem;
    vertical-align: middle;
}

.geocache-icon img {
    height: 2rem;
    margin-right: 1rem;
}

/* Flash messages */
.flash-box {
    padding: 1rem 0;
}

.flash-box li {
    padding: 1rem;
    margin: 0;
}

footer {
    margin: 1rem 0;
    padding: 1rem 0;
}

footer a:link,
footer a:visited {
    text-decoration: none;
    color: #ede4d5;
}

footer a:hover {
    color: darkgray;
}

.footer-column {
    background-color: #596d7e;
    color: #ede4d5;
    padding: 1rem 0;
    margin: .2rem 0;
}

.form-answer input[type="text"] {
    width: 100%;
    margin-bottom: 1rem;
    margin-right: 15px;
    border-radius: 15px;
    border-color: transparent;
    font-family: monospace;
    padding-left: 1rem;
    padding-right: 1rem;
    resize: none;
}

/* For the page of logging the codeword */
.left-col {
    background-color: #0E518D;
    color: #fff;
    text-align: right;
    padding: 1rem;
}

.right-col {
    padding: 1rem;
}

.answer-col-header {
    background-color: #0E518D;
    color: #fff;
    padding: 1rem;
}

.answer-col {
    background-color: #0E518D;
    color: #fff;
    padding: 1rem;
}

.codeword-answer input[type="text"] {
    width: 100%;
    margin-bottom: 1rem;
    margin-right: 15px;
    border-color: transparent;
    font-family: monospace;
    padding-left: 1rem;
    padding-right: 1rem;
    resize: none;
}

/* Logging screen */
.not-logged-text {
    color: red;
    font-weight: bold;
}

.logged-text {
    color: green;
    font-weight: bold;
}

/* One year event Start */
.event-desktop {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    padding-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.table-mobile {
    display: none;
}

.table-desktop {
    display: grid;
}

.table-desktop table,
.table-desktop tr,
.table-desktop td {
    width: 100%;
}

.event-mobile {
    display: none;
}

/* One year event End */
.search_wrapper ul li {
    list-style-type: none;
    margin-left: 0;
    padding: 5px 0;
}

.pagination {
    width: 100%;
}

.page-item {
    margin: 0;
}

/* Blog posts */
.blog_meta {
    font-size: .7rem;
}

/* Announcements */
.announcement {
    display: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;

}

@media screen and (max-width: 382px) {

    .navbar-brand {
        font-size: 1rem;
    }

    /* For the page of logging the codeword */
    .left-col {
        padding: .3rem;
        text-align: left;
    }

    .right-col {
        padding: .3rem;
        text-align: right;
    }

    #archived-geocaches {
        font-size: .55rem;
    }

    #archived-geocaches h4 {
        font-size: 1rem;
    }


}

@media screen and (max-width: 767px) {

    .table {
        font-size: .8rem;
    }

    /* For the page of logging the codeword */
    .left-col {
        padding: .3rem;
        text-align: left;
    }

    .right-col {
        padding: .3rem;
        text-align: right;
    }

    /* For all tables */
    .table thead {
        display: none;
    }

    .table,
    tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }

    .table tr {
        margin-bottom: 20px;
    }

    .table td {
        text-align: right;
        padding-left: 50%;
        text-align: left;
        position: relative;
    }

    .table td::before {
        content: attr(data-label);
        font-weight: bold;
        position: absolute;
        left: 0;
        width: 50%;
    }

    .table td img {
        height: 1.5rem;
    }

    .first-field {
        border-top: 1px solid black;
    }

    .table-mobile {
        display: grid;
    }

    .table-desktop {
        display: none;
    }

}

@media screen and (min-width: 576px) {
    .list-small-screen {
        display: none;
    }

    .list-large-screen {
        display: inline;
        vertical-align: middle;
    }

}

@media screen and (min-width: 476px) {
    .on-title {
        display: none;
    }

    .on-logo {
        display: block;
    }

}

@media screen and (max-width: 475px) {
    .on-title {
        display: block;
    }

    .on-logo {
        display: none;
    }
}

/* One year event Start */
@media screen and (min-width: 360px) and (max-width: 475px) {
    .event-desktop {
        display: none;
    }

    .event-mobile {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
}

/* One year event End */