/* General site wide rules */
/* ======================= */

@media only screen and (min-width: 768px) {
    .site-content {
        margin: 0 10% 0 10%;
    }

    .mobile-only {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .not-mobile {
        display: none;
    }
}

.cr-beige {
    background-color: #f3f0dd;
}

.cr-bg-dark {
    background: rgba(100, 100, 100, 0.75);
}

input,
select,
.no-radius {
    border-radius: 0px;
}

label:hover {
    cursor: pointer;
}

.cr-txt-light,
.cr-txt-light a,
.cr-txt-light a:visited,
.nav-link {
    color: #fff;
}

.nav-link:hover {
    color: #d81c32;
    background: rgb(213, 209, 193);
}

.cr-submit-button {
    color: #fff;
    background: #d81c32;
}

/* TODO: These should change color when the user hovers over them.*/
.cr-ui-tab-1 {
    color: red;
    background-color: rgb(187, 187, 187);
}

.cr-ui-tab-2 {
    color: #eee;
    background-color: rgba(100, 100, 100, 0.75);
}

.cr-ui-tab-3 {
    color: #111;
    background-color: #f3f0dd;
}

.cr-ui-tab-1 a,
.cr-ui-tab-2 a,
.cr-ui-tab-3 a {
    text-decoration: none;
    color: #111;
}

/*
TODO: If we ever use Bootstrap's 'navbar-toggler-icon' class instead,
then we can get rid of this rule.
 * */
#cr-hamburger-icon {
    max-width: 60px;
}

#cr-hamburger-collapse {
    padding-left: 0 !important;
}

#cr-hamburger-collapse ul {
    z-index: 99;
    position: fixed;
    list-style: none;
    width: 100%;
    margin: 4em 0 0 0;
}

@media only screen and (min-width: 768px) {
    /* This tweak makes the navbar at
     * the top of the site thinner, like on the legacy site.
     * */
    .navbar {
        --bs-navbar-padding-x: none;
    }

    #cr-mobile-nav {
        display: none;
    }
}
/* ======================= */

/* Specific individual elements */
/* ============================ */

.homepage-container {
    margin-top: 3em;
}

.homepage-banner {
    text-align: center;
}

#logo-image {
    max-width: 290px;
}

@media only screen and (min-width: 768px) {
    #logo-image {
        max-width: 341px;
    }
}

#homepage-cover-image {
    background-image: url('/images/header-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 444px;
    width: 1280px;
    padding-top: 20%;
}

#l10n-flags {
    margin-top: 1.5em;
    padding-top: 1.5em;
}

@media only screen and (min-width: 768px) {
    #l10n-flags {
        float: right;
    }
}

#l10n-flags a {
    text-decoration: none;
}

/* Submit buttons that display a triangle.*/
.triangle-submit {
    background: rgba(0, 0, 0, 0) url('/images/pfeil_grau.png') no-repeat scroll center center;
}

@media only screen and (min-width: 768px) {
    #quicksearch form {
        margin-top: 1em;
        padding-top: 1.5em;
        float: right;
    }
}

.cr-reqfield {
    color: red;
    font-size: 150%;
}

/* The quickfilter */
/* --------------- */

.quickfilter-form-elem {
    background: #fff;
}

#quickfilter-submit-button {
    background: rgb(213, 209, 193);
    font-weight: 900;
}

#quickfilter-submit-button:hover {
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    /* TODO: These aren't working, but it would be cool
     * if we could get them to work.*/
    #quickfilter-form {
        padding: 0 !important;
        margin: 0 !important;
    }

    #quickfilter-form,
    #quickfilter-form * {
        width: 100% !important;
    }

    .quickfilter-form-label,
    .quickfilter-form-elem,
    #quickfilter-submit-button {
        padding: 0.5em;
    }
}

@media only screen and (min-width: 768px) {
    #quickfilter-form {
        height: 50px;
    }

    .quickfilter-elem-with-line {
        border-right: 2px rgb(213, 209, 193) solid;
    }

    /*
     * TODO: Might not work on older browsers.
     * */
    .quickfilter-form-label,
    .quickfilter-form-elem,
    #quickfilter-submit-button {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-direction: column;
    }

    #quickfilter-rent {
        text-align: center;
        max-width: 5em;
    }

    #quickfilter-rent,
    #quickfilter-nr-rooms,
    #quickfilter-start-month {
        border: 2px rgb(213, 209, 193) solid;
        height: 2rem;
        background: #fff;
    }
}
/* --------------- */

#top-navbar-row,
#site-header-row,
#bottom-nav-row {
    margin-top: 1em;
}

#bottom-nav-row {
    padding: 1em 0 0 1em;

    /*
     * TODO: This is a temporary workaround to the fact that right now, in the
     * early stages of development, the home page has very little content, so we
     * need to extend the bottom navbar to the bottom of the viewport, without
     * extending it too much...
     * */
    height: 100vh;
    max-height: 250px;
}

/* The offer-filter-form */
/* --------------------- */

#offer-filter-form {
    background: #f8f8f0;
}

#offer-filter-form table {
    width: 100%;
    border-top: 1px solid #eae8d5;
}

#offer-filter-form td {
    padding: 1.5%;
}

/*
 * TODO: See Feature #1246.
 * The following rule is a workaround to the fact that the offer filter form
 * is still written as an HTML table, which is quite suboptimal.
 * Because I don't want the margin rules to apply to .site-content on mobile
 * devices, but that would mess up the HTML table offer filter form, so here
 * we bring the margin rule back in for that specific element.
 *
 * When we rewrite the frontend, we'll get rid of
 * the HTML table and remove the following CSS rule as well,
 * but until then, we need this workaround to make the form appear at least
 * somewhat nicely on mobile devices.
 * */
@media only screen and (max-width: 768px) {
    #offer-filter-form {
        margin: 0 10% 0 10%;
    }
}

@media only screen and (min-width: 768px) {
    #offer-filter-form .border-row {
        border-top: 1px solid #eae8d5;
    }

    .offer-filter-form-wide-elem {
        width: 100px;
    }

    .offer-filter-form-wide-elem-plus {
        width: 120px;
    }
}

#offer-filter-submit,
#offer-filter-number-results {
    float: right;
}
/* --------------------- */

/* List view */
/* --------- */
.offer-list-view-entry {
    background: #F3F0DD;
    margin-top: 1%;
    margin-bottom: 1%;
    text-decoration: none;
    color: rgb(33, 37, 41);
}

.offer-list-view-entry:hover {
    cursor: pointer;
    background: #eae8d5;
}

.offer-list-view-entry-toggle-1 {
    background: #F3F0DD;
}

.offer-list-view-entry-toggle--1 {
    background: #F8F8F0;
}

.pagination > li > a,
.pagination > li > span {
    color: #d81c32;
    background: #fff;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background: #d81c32;
    color: #fff;
}

.list-view-image {
    width: 300px;
    height: 200px;
}
/* --------- */

/* Detail view */
/* ----------- */
.cr-detail-view-heading {
    margin-top: 2em;
    background-color: #f3f0dd;
    font-size: large;
}

/* TODO: Maybe refactor this to make it site wide. */
.cr-detail-view-content {
    margin-top: 2em;
}

.detail-view-image {
    height: 682px;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.room-pics-box {
    border: 0.25px solid black;
    padding: 0.5em;
    margin: 0.25em;
}

.room-pics-box:hover {
    cursor: pointer;
}
/* ----------- */
/* ============================ */