:root {
    color-scheme: light dark;
    --nav-bar-height: 55px;
    --darkmode-info-background: #22222;
    --darkmode-info-header-background: #44444;
}

body {
    margin-top: var(--nav-bar-height);
    margin-bottom: var(--nav-bar-height);
    font-size: 1em;
 }

/* safe area for iphone notch in landscape mode) */
@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

.model-header {border-bottom: 0px;}

a { cursor: pointer; }

svg { height: 1rem; }

/* navigation */
#svg-hamburger {  height: 24px; fill:#6c757d; }
.svg-nav { height: 1.4rem; fill: gray; vertical-align:top; }
.svg-active {fill: #007bff; }
.svg-search { height: 1.2rem;}

/* menu icons */
.svg-external-link { height: 0.9rem;}
.svg-cloud-download-alt { fill:darkred !important;}
.svg-sync-alt { fill:green; margin-top: 5px; }

.svg-icon { fill:gray; width: 1rem;}
.svg-link-icon { fill: silver;}
.svg-map-marker-alt { height: 1.2rem; fill: #BF1E2D;}

.svg-social-media {height: 1.3rem;}
.svg-youtube { fill:#FF0000; }
.svg-instagram { fill:dimgray }
.svg-facebook { fill:#1877f2 }
.svg-twitter { fill:#1DA1F2 }

.svg-gift { fill:purple; vertical-align: text-top; height: 1.1rem;}
.svg-favorite { fill:orange; vertical-align: text-top; height: 1.1rem;}

.menu-icon {vertical-align: middle; margin-right:5px;fill:darkslategray }

#img-logo { height:36px }
#icon-loading { width:21px; height: 21px; }

.navbar { height: var(--nav-bar-height); padding:8px;}
.nav-link { padding: 8px; color: #6c757d; }
.nav-hide { top: calc(-1 * var(--nav-bar-height));}
#navbar-top { transition: top 0.3s; }
#navbar-dropdown-hamburger { text-decoration: none; position: relative; display: inline-block; }
#menuitem-hamburger-dropdown { right:0; left:auto; }

#hamburger-notify-badge {
    position: absolute;
    top: -30px;
    left: -1px;
    padding: 0px;
    font-size: 50px;
}

#dropdown-menu-location{
    right: 0px;
    left: auto;
}

#dropdown-dates-menu a {
    line-height: 1.25em;
}

.dropdown-dates-menuitem {
    font-size: 0.75rem;
    color:gray;
    line-height: 0.7;
}

.category-total {
    font-size: 0.75rem;
    color:gray;
}

#table-events {
    width:100%;
    table-layout:fixed;
}

#table-events td {
    vertical-align: top;
}

.td-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.column-time {
    width: 65px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}

#posters {
    background-color: silver;
    --posterHeightDefault: 160px;
    --posterHeight576: 180px;
    --posterHeight768: 200px;
    --posterHeight992: 220px;
    --landscapeRatio: 0.70;
}

#portrait-posters { height: var(--posterHeightDefault); }
#landscape-posters { height: calc(var(--posterHeightDefault)*var(--landscapeRatio)); }

.tooltip { font-size: 0.75rem; }
.tooltip-inner { max-width: 100%; }    

.column-locality { width: 17% !important; }
#td-categories {column-count: 1;}
.row-thead {background-color: rgba(0,0,0,.075)}
.soldout {color:darkred}

@media (prefers-color-scheme: dark) {
    body { background-color: dimgray; color: white; }
    .dropdown-menu {background-color: gray; color:white}
    .dropdown-menu a:hover {color: black; }
    .dropdown-menu a {color: white; }
    .jumbotron { background-color: #222;   }
    .card { background-color: #222;  }
    .card .card-header{ background-color: #444; }
    .dropdown-dates-menuitem { color:silver; }
    .category-total { color:silver; }
    .modal-content { background-color: dimgray; }
    a { color: lightblue; }
    a:hover { color: white; }
    #posters { background-color: rgb(80, 80, 80); } 
    .row-thead {background-color: dimgray}
    .menu-icon {fill:silver }
    .soldout {color:red}
}

/* Small devices */
@media (min-width: 576px) {
    #img-logo {height:42px}
    .nav-hide { top: 0px}
    .navbar { padding-right: 16px;  }
    .svg-nav { height: 1.2rem;  }
    .column-venue { width: 40% !important; ; }
    #portrait-posters { height: var(--posterHeight576);  }
    #landscape-posters { height: calc(var(--posterHeight576)*var(--landscapeRatio));  }

    #dropdown-menu-location {
        right: auto;
        left: 0;
    }
}

/* Medium devices */
@media (min-width: 768px) {
    .column-venue { width: 30% !important; ; }
    #td-categories { column-count: 2; }
    #portrait-posters { height: var(--posterHeight768);  }
    #landscape-posters { height: calc(var(--posterHeight768)*var(--landscapeRatio));  }
}

/* Large devices */
@media (min-width: 992px) {
    #td-categories { column-count: 3; }
    #portrait-posters { height: var(--posterHeight992);  }
    #landscape-posters { height: calc(var(--posterHeight992)*var(--landscapeRatio));  }
}

/* Scrollable menu on short devices */
@media (max-height:750px)
{
    .myScroll {
        height: auto;
        max-height: 450px;
        overflow-x: hidden;
    }
}