:root {
    --font: Arial, Helvetica, sans-serif;
    --header-bg-top-colour: #7f9ed5;
    --header-bg-colour: #a6bfeb;
    --page-bg-colour: #fff;
    --pre-footer-bg-colour: #f5f5f5;
    --footer-bg-colour: #eee;
    --highlight-colour: #6D8DC6;
    --action-bar-colour: #666;
    --content-section-divider-colour: #ccc;
    --breadcrumbs-colour: #333;
    --page-width: 1000px;
    --page-width-popup: 900px;
    --text-colour: black;
    --popup-mask-background-color-1: #ccc;
    --popup-mask-background-color-2: rgba(200,200,200,0.7);
    --link-colour: #203f76;
    --link-hover-focus-colour: #4f7cca;
    --nav-menu-highlight-colour: #444;
}

@media (prefers-color-scheme: dark) {
    :root {
        --header-bg-top-colour: #203f76;
        --header-bg-colour: #112a57;
        --page-bg-colour: #000;
        --pre-footer-bg-colour: #222;
        --footer-bg-colour: #444;
        --highlight-colour: #325591;
        --action-bar-colour: #888;
        --content-section-divider-colour: #444;
        --breadcrumbs-colour: #aaa;
        --text-colour: #fff;
        --popup-mask-background-color-1: #333;
        --popup-mask-background-color-2: rgba(10,10,10,0.7);
        --link-colour: #7f9ed5;
        --link-hover-focus-colour: #4568a6;
        --nav-menu-highlight-colour: #bbb;
    }
}

:root, html, body {
    background-color: var(--footer-bg-colour);
    padding: 0;
    margin: 0;
    font-family: var(--font);
    color-scheme: light dark;
    color: var(--text-colour);
}

a, a:visited {
  color: var(--link-colour);
}
a:hover, a:focus {
  color: var(--link-hover-focus-colour);
}

header {
    margin: 0;
    padding: 10px 0;
    background-color: var(--header-bg-colour);
    background: linear-gradient(var(--header-bg-top-colour), var(--header-bg-colour));
    h1 {
        margin: 0;
        img {
            width: 50px;
            height: 50px;
        }
        a {
            text-decoration: none;
            color: var(--text-colour) !important;
        }
        a:hover, a:focus {
            text-decoration: underline;
            color: var(--text-colour) !important;
        }
    }
    .tagline {
        margin: 5px 0;
        font-weight: bold;
        font-size: 1.1rem;
    }
}

nav {
    margin: 0;
    padding: 10px 0;
    background-color: var(--header-bg-colour);
    border-bottom: var(--highlight--color) 3px solid;
    text-align: right;
    .menu_menu {
        a {
            font-weight: bold;
            font-size: 1.5rem;
            padding: 15px 5px 15px 20px;
            color: var(--text-colour);
        }
        a:hover, a:focus {
            color: var(--nav-menu-highlight-colour);
        }
    }
    ul.menu_items {
        display: none;
        list-style-type: none;
        li.menu_item {
            display: block;
            padding: 10px 0px;
            a {
                text-decoration: none;
                color: var(--text-color);
            }
            a:hover, a:focus {
                text-decoration: underline;
            }
        }
    }
}

#content {
    margin: 0;
    padding: 30px 0;
    background-color: var(--page-bg-colour);
}

.breadcrumbs {
    .breadcrumb {
        font-size: 0.8rem;
        a {
            text-decoration: none;
            color: var(--breadcrumbs-colour);
        }
        a:hover, a:focus {
            text-decoration: underline;
            color: var(--breadcrumbs-colour);
        }
    }
}

.action_bar {
    clear: both;
    margin: 10px 0;
    border-bottom: 1px solid var(--action-bar-colour);
    .actions {
        max-width: var(--page-width);
        margin: 0px auto;
        padding: 0 10px;
        .tab_current, .tab_option {
            margin: 0 0 -1px 0;
            display: inline-block;
            border-top: 1px solid  var(--action-bar-colour);
            border-left: 1px solid  var(--action-bar-colour);
            border-right: 1px solid  var(--action-bar-colour);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            padding: 5px 10px;
        }
        .tab_current {
            border-bottom: 1px solid var(--page-bg-colour);
        }
        .tab_option {
            a {
                text-decoration: none;
                color: var(--text-colour);
            }
            a:hover, a:focus {
                text-decoration: underline;
                color: var(--text-colour);
            }
        }
        .no_tab {
            margin: 0 0 -1px 0;
            display: inline-block;
            padding: 5px 10px;
            float: right;
        }
    }
}

.content_section_divider {
    clear: both;
    margin: 10px 0;
    border-bottom: 1px solid var(--content-section-divider-colour);
}

.button_wrapper {
    padding: 15px 0;
    clear: both;
}
a.button, input.button {
    display: inline-block;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    background-color: var(--header-bg-colour);
    text-decoration: none;
    color: var(--text-colour);
    font-family: arial, sans-serif;
}
a.button:hover, a.button:active, input.button:hover, input.button:active {
    background-color: var(--highlight-colour);
}


.miniCalendar {
    float: left;
    width: 100px;
    position: relative;
    border: 5px solid var(--text-colour);
    border-radius: 5px;
    text-align: center;
    margin: 0 10px 10px 0;
    a {
        text-decoration: none;
    }
    .datePart {
        background-color: var(--text-colour);
        color: var(--page-bg-colour);
        .startDay {
            font-size: 1.1rem;
        }
        .startDate {
            font-size: 1.5rem;
        }
        .startMonthYear {
            font-size: 1.1rem;
        }
    }
    .timePart{
        background-color: var(--page-bg-colour);
        .startTime {
            font-size: 1.1rem;
            color: var(--text-colour)
        }
    }
}

div.group_box, a.group_box {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    border: 3px solid var(--text-colour);
    border-radius: 5px;
    text-align: center;
    margin: 0 10px 10px 0;
    text-decoration: none;
    color: var(--text-colour);
    font-size: 4rem;
}
a.group_box:hover, a.group_box:active {
    text-decoration: underline;
}


ul.info_list {
    list-style-type: none;
    padding: 10px 0;
    margin: 10px 0;
    clear: both;
    li {
        margin: 10px 0;
    }
}

ul.share_links {
    list-style-type: none;
    li {
        display: inline;
        font-size: 3rem;
        a {
            color: var(--text-colour);
            text-decoration: none;
        }
        a:hover, a:focus {
            border-bottom: 3px solid var(--text-colour);
        }
    }
}

ul.contact_links {
    list-style-type: none;
    li {
        i {
            font-size: 2rem;
        }
        margin: 15px 0;
        a {
            color: var(--text-colour);
            text-decoration: none;
        }
        a:hover, a:focus {
            border-bottom: 1px solid var(--text-colour);
        }
    }
}

.list_country_item {
    margin: 10px 0;
}

ul.list_places {
    list-style-type: none;
    line-height: 3;
    li {
        display: inline-block;
        a {
            background-color: var(--header-bg-colour);
            text-decoration: none;
            color: var(--text-colour);
            font-family: arial, sans-serif;
            padding: 10px 20px;
            border-radius: 5px;
        }
        a:hover, a:active {
            background-color: var(--highlight-colour);
        }

    }
}

.listings_filter_show_hide {
    padding: 10px 0;
    display: block;
}

form.listings_filters {
    border: 2px solid var(--header-bg-colour);
    border-radius: 2px;
    padding: 10px;
    .form_field {
        padding: 10px 0;
    }
}

form#update_data_form {
    > div {
        padding: 10px 0;
    }
    label {
        font-weight: bold;
    }
    input[type="text"], input[type="url"], select {
        width: 100%;
    }
}

#raw_data_out {
    width: 100%;
    height: 150px;
}

#pre_footer {
    background-color: var(--pre-footer-bg-colour);
    padding: 30px 0;
    .content {
        text-align: center;
        .title {
            font-weight: bold;
        }
    }
    a.social_media {
        font-size: 2rem;
        color: var(--text-color);
    }
    a.social_media:hover, a.social_media:focus {
        border-bottom: 3px solid var(--text-colour);
    }
}

footer {
    background-color: var(--footer-bg-colour);
    padding: 50px 0;
    font-size: 0.8rem;
    text-align: center;
    ul {
        margin: 0;
        padding: 0;
        li {
            list-style-type: none;
            display: inline-block;
            margin: 5px 5px;
            padding: 0;
        }
    }
    @media screen and (max-width: 800px) {
        ul li {
            display: block;
            margin: 10px 0;
        }
    }
}

.content {
    max-width: var(--page-width);
    margin: 0px auto;
    padding: 0 10px;
}

#popup_mask {
    position: fixed;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--popup-mask-background-color-1);
    background-color: var(--popup-mask-background-color-2);
    z-index: 100000;
}

#popup_box {
    border: 2px solid var(--header-bg-colour);
    border-radius: 2px;
    background: var(--page-bg-colour);
    padding: 0;
    width: 95%;
    max-width: var(--page-width-popup);
    position: fixed;
    top: 25px;
    bottom: 25px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 100001;
    padding: 10px;
    overflow-x: wrap;
    overflow-y: scroll;
    #popup_close {
        text-align: right;
    }
    .export_filters {
        border: 2px solid var(--header-bg-colour);
        border-radius: 2px;
        padding: 10px;
    }
}

@media (prefers-color-scheme: dark) {
    .EasyMDEContainer {
        .editor-toolbar {
            background: black !important;
            color: white !important;
            button.active {
                background: #333 !important;
                border-color: #666 !important;
            }
            button:hover {
                background: #666 !important;
                border-color: #999 !important;
            }
        }
        .CodeMirror {
            background: black !important;
            color: white !important;
        }
        .CodeMirror-cursor {
            border-left:1px solid white !important;
        }
        .editor-preview {
            background: #333 !important;
            color: white !important;
            pre {
                background: #666 !important;
                color: white !important;
            }
        }

    }
}