/* ~~~ footer ~~~ */
.footer-image {
    background-image: url("/user/themes/quark-hdfr/images/camopattern-halfsized.jpg");
    background-color: rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
    background-repeat: repeat;
    background-blend-mode: saturation !important;
}
#footer a {
    color: #ffffff !important;
    text-decoration: none
}
#footer :is(a:hover, a:focus, a:active) {
    color: #f08200 !important;
}
/* ~~~ header ~~~ */
#header {
    background-image: url("/user/themes/quark-hdfr/images/camopattern-halfsized.jpg") !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    background-clip: padding-box !important;
    background-repeat: repeat !important;
    background-blend-mode: saturation !important;
    border-bottom: none;
}
/* ~~~ mobile-menu ~~~ */
.mobile-menu .button_container span {
    background: #fff;
    opacity: .7;
}

/* ~~~ features ~~~ */
.frame-box :is(a:hover, a:focus, a:active) {
    text-decoration: none;
}
/* ~~~ downloads ~~~ */
.file-tile :is(a:hover, a:focus, a:active) {
    text-decoration: none;
}
/* ~~~ hero image ~~~ */
.hero.hero-fullscreen {
    min-height: 80vh;
}
.hero.hero-large {
    min-height: 45vh;
}
/* hide leaflet map, if mobile menu is open */
.mobile-nav-open .leaflet-container {
    visibility: hidden;
}
/* ~~~ trailstatus ~~~*/
.trailstatus .column {
    margin-bottom: 10px;
    margin-top: 10px;
}
.trailstatus .tile {
    height: 100%
}
/* ~~~ page ~~~ */
.page-hero .container {
    padding: 6rem 0 0;
}
.page-hero ~ #start #body-wrapper {
    padding-top: 0;
}
/* ~~~ misc ~~~ */
.inline-radio .radio {
    display: inline-block;
}
.slim-p p {
    margin-bottom: 0;
}
.hero #to-start {
    font-size: 2.5rem;
    color: #fff;
}
.bricklayer .card {
    margin-bottom: 0.8rem !important;
}
.blog-listing .column { 
    padding-bottom: 25px; /* fixed flex of card class */
}
.blog-listing .column .card {
    height: 100%; /* fixed flex of card class */
    margin-bottom: 0; /* fixed flex of card class */
}
.flex-centered-x {
    display: flex;
    justify-content: center;
}

.flex-centered-y {
    display: flex;
    align-items: center;
}

/* ~~~ dark mode ~~~ */
:is(.blog-listing, .popover) .card {
    box-shadow: 0 10px 45px -9px rgba(0,0,0,0.5);
}
.modular-features.offset-box .frame-box {
    box-shadow: 0 0 75px 0 rgba(0,0,0,0.5);
}
.custom-shadow-1 {
    box-shadow: 0 10px 45px -9px rgba(0, 0, 0, 0.5);
    margin-bottom: 25px !important;
    padding: 1rem !important;
}
.pagination {
    color: #fff
}
.pagination li {
	display: inline-block;
	border: none;
}
.dropzone {
    background: #303030 !important;
    border-color: #b0afaf !important;
}
.form-input {
    background-color: #303030 !important;
}

/* ~~~ notices ~~~ */
.notices {
    padding: 1px 1px 1px 30px;
    margin: 15px 0;
}
.notices.yellow {
    border-left: 10px solid #f08200;
    background: rgba(240, 130, 0, 0.08); /*#31220b;*/
    color: #f08200;
}
.notices.red {
    border-left: 10px solid #89211e;
    background: #2e0b0b;
    color: #db5a56;
}
.notices.blue {
    border-left: 10px solid #1b6e86;
    background: #13222a;
    color: #4bb9da;
}
.notices.green {
    border-left: 10px solid #347834;
    background: #192c13;
    color: #7ac57a;
}
/* ~~~ login plugin ~~~ */
#grav-login {
    max-width: 30rem;
    margin: 5rem auto;
    background: #303030;
    box-shadow: 0 0 75px 0 rgba(0,0,0,0.5);
    padding: 1rem 3rem 3rem 3rem;
    text-align: center;
}
#grav-login .form-actions {
    text-align: right;
}
#grav-logout {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.alert.info {
    color: #27ae60;
}
.alert.error {
    color: #e74c3c;
}
#grav-login p {
    font-size: small;
    margin: 1rem 0;
    padding: 0;
    text-align: center;
}
#grav-login .form-actions p {
    margin-bottom: 0;
}
#grav-login .button {
    vertical-align: middle;
}
#grav-login .delimiter {
    display: block;
    font-size: 1.6rem;
    letter-spacing: 1px;
    line-height: 1.6rem;
    position: relative;
    text-transform: uppercase;
    margin: 1rem 0;
}
#grav-login .delimiter:after,
#grav-login .delimiter:before {
    background-color: #777777;
    content: "";
    height: 1px;
    position: absolute;
    top: 0.8rem;
    width: 40%;
}
#grav-login .delimiter:before {
    background-image: -moz-linear-gradient(right center , #777777, #ffffff);
    left: 0;
}
#grav-login .delimiter:after {
    background-image: -moz-linear-gradient(left center , #777777, #ffffff);
    right: 0;
}
#grav-login .rememberme {
    display: inline-block;
    float: left;
    padding: 7px 0;
    vertical-align: middle;
}
#grav-login .rememberme label {
    font-weight: inherit;
    display: inline;
}
.login-status {
    white-space: nowrap;
    vertical-align: middle;
}