// -----------------------------------------------------------------------------
// Inhaltsbereich

body {
    line-height: 1.5rem;
}

.page-main {
    padding: ($spacer * 2);
}

.vr {
    width: 1px;
    margin-left: -1px;
    background-color: #dfdfdf;
    display: inline-block;
}

h1 {
    font-size: 2.25rem;
    line-height: 2.425rem;
}

h2 {
    font-size: 2rem;
    line-height: 2.2rem;
}

h3 {
    font-size: 1.75rem;
    line-height: 1.925rem;
}

h4 {
    font-size: 1.5rem;
    line-height: 1.65rem;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.375rem;
}

// -----------------------------------------------------------------------------
// Inhaltsbereich: Header

.main-header {
    margin-bottom: 2rem;
    &__breadcrumbs {
        margin-bottom: 1rem;
        .breadcrumb {
            margin: 0;
            padding: 0;
            background: none;
        }
    }
    &__title {
        h1 {
            font-size: 2rem;
            margin: 0;
        }
    }
}

// -----------------------------------------------------------------------------
// Inhaltsbereich: Main

.main-content {
    clear: both;
}

// -----------------------------------------------------------------------------
// Cards

.card {
    h5 {
        margin: 0;
    }
    &-loader {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        background-color: transparentize($card-bg, 0.45);
        z-index: 2;
        .card.loading > & {
            display: flex;
        }
    }
    &-link {
        text-decoration: none !important;
    }
    &-body {
        overflow: auto;
        .time-period {
            &.end-date {
                text-align: right;
            }
        }
        & > .table,
        & .table-full > .table {
            margin-left: -$card-spacer-x;
            width: calc(100% + (#{$card-spacer-x} * 2));
            max-width: calc(100% + (#{$card-spacer-x} * 2));
            &-responsive {
                margin-left: -$card-spacer-x;
                width: calc(100% + (#{$card-spacer-x} * 2));
                max-width: calc(100% + (#{$card-spacer-x} * 2));
                & > .table {
                    margin-left: 0;
                    width: 100%;
                    max-width: 100%;
                }
            }
            &, &-responsive .table {
                tr td,
                tr th {
                    &:first-child {
                        padding-left: $card-spacer-x;
                    }
                    &:last-child {
                        padding-right: $card-spacer-x;
                    }
                }
            }
        }
    }
    &-header {
        border-bottom: 1px solid $gray-300;
    }
    .card-img-top {
        height: 10em;
        background-color: $primary;
        background-position: top center;
        background-size: cover;
    }
    .img--contact-person {
        height: 15em;
        background-position: center center;
        background-size: cover;
    }
}

// -----------------------------------------------------------------------------

.bocc-messages {
    &--overview, &--message {
        height: calc(100vh - #{$header-height} - (#{$spacer} * 9));
        overflow-y: auto;
        .card {
            box-shadow: none;
        }
    }
    &--overview {
        border-right: 1px solid darken(#F3F3F3, 10%);
        .card {
            cursor: pointer;
            &-header {
                background-color: darken(#F3F3F3, 10%);
            }
            border-bottom: 1px solid darken(#F3F3F3, 10%);
        }
    }
    &--message {
        padding-top: 4.5rem;
        .card {
            &-header {
                &__title {
                    font-size: $h3-font-size;
                }
            }
        }
        &.empty {
            padding-top: 0rem;
            i {
                transform-origin: top center;
                transform: scale(30) translateY(-.35em);
                color: $body-background;
            }
        }
    }
}

// -----------------------------------------------------------------------------
// Iframes

iframe {
    &.iframe--fullpage {
        width: 100%;
        height: calc(100vh - #{$header-height} - (#{$spacer} * 14));
    }
}

// -----------------------------------------------------------------------------
// Search

#search {
    position: fixed;
    bottom: 100vh;
    left: 0;
    width: 100vw;
    z-index: 9999;
    background-color: $body-bg;
    transition: bottom ease 0.5s;
    > .row {
        height: 100vh;
        > div:nth-child(2) {
            margin-top: -16.6666vh;
            input {
                border: 0;
                border-radius: 0;
                border-bottom: 1px solid;
                & + button {
                    font-size: 2em;
                    border: 0;
                    cursor: pointer;
                    background-color: transparent;
                }
            }
        }
    }
    &.active {
        bottom: 0vh;
    }
    .search--close {
        background-color: transparent;
        position: absolute;
        top: 1rem;
        right: 1.5rem;
    }
}

// -----------------------------------------------------------------------------
// Forms

form {
    label {
        font-size: 0.875rem;
        &.required:after {
            content: '*';
            display: inline-block;
        }
    }
}

.bocc-notifications {
    &:before {
        display: block;
        content: ' ';
        width: 0.35rem;
        background-color: $primary;
        height: 100%;
        position: absolute;
        left: 7.25rem;
        z-index: 0;
    }
    & > h3 {
        z-index: 1;
        position: relative;
        width: 13rem;
    }
    .notification {
        border-bottom: 1px solid $input-border-color;
        &:last-child {
            border-bottom: 0;
        }
        &.read {
            i {
                opacity: 0.5;
            }
        }
    }
}

// -----------------------------------------------------------------------------
// Tables

.table thead th {
    border-top: $th-border-top;
}

// -----------------------------------------------------------------------------
// Alert

.alert {
    border: 0;
    border-radius: 0;
    &--title {
        font-size: 2em;
    }
}

// -----------------------------------------------------------------------------
// Placeholder BG

.bg {
    &-placeholder {
        &__company {
            &--new {
                background-image: url('/assets/img/placeholder/company-new.png');
                background-size: cover;
            }
        }
    }
}

.service-cards {
    .card {
        .card-body {
            font-size: 0.875em;
        }
        .btn {
            font-size: 0.875rem;
        }
    }
}

.add-item {
    position: fixed;
    bottom: 3.5em;
    right: 2.25em;
    width: 3.75em;
    height: 3.75em;
    z-index: 2147483000!important;
    a {
        font-size: 4.5em;
    }
}

.plus-item {
    #intercom-container iframe {
        &.intercom-launcher-frame,
        &.intercom-launcher-discovery-frame {
            right: 6em!important;
        }
    }
}

.service-cards {
    .card {
        &--helpcenter {
            .card-img-top {
                background-image: url('/assets/img/service/card-top_helpcenter.svg');
            }
        }
        &--inbox {
            .card-img-top {
                background-image: url('/assets/img/service/card-top_inbox.svg');
            }
        }
        &--service {
            .card-img-top {
                background-image: url('/assets/img/service/card-top_service.svg');
            }
        }
        &--news {
            .card-img-top {
                background-image: url('/assets/img/service/card-top_news.svg');
            }
        }
        &--helpcenter,
        &--inbox,
        &--service,
        &--news {
            .card-img-top {
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center;
            }
        }
    }
}

.card-new {

    &__meter,
    &__consumption-point,
    &__location,
    &__metering-point,
    &__company,
    &__user,
    &__report,
    &__alarm,
    &__kpi,
    &__contract {
        .card-img-top {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }
    }
    &__company {
        .card-img-top {
            background-image: url('/assets/img/company/card-top_new.svg');
        }
    }
    &__location {
        .card-img-top {
            background-image: url('/assets/img/location/card-top_new.svg');
        }
    }
    &__consumption-point {
        .card-img-top {
            background-image: url('/assets/img/consumption_point/card-top_new.svg');
        }
    }
    &__meter {
        .card-img-top {
            background-position: center bottom;
            background-image: url('/assets/img/meter/card-top_new.svg');
        }
    }
    &__metering-point {
        .card-img-top {
            background-position: center bottom;
            background-image: url('/assets/img/metering_point/card-top_new.svg');
        }
    }
    &__user {
        .card-img-top {
            background-image: url('/assets/img/user/card-top_new.svg');
        }
    }
    &__report {
        .card-img-top {
            background-image: url('/assets/img/report/card-top_new.svg');
        }
    }
    &__alarm {
        .card-img-top {
            background-image: url('/assets/img/alarm/card-top_new.svg');
        }
    }
    &__kpi {
        .card-img-top {
            background-image: url('/assets/img/kpi/card-top_new.svg');
        }
    }
    &__contract {
        .card-img-top {
            background-image: url('/assets/img/contract/card-top_new.svg');
        }
    }
}

.sr-only {
    left: 0;
}

// -----------------------------------------------------------------------------
// Nav

.nav {
    &-active-line {
        li {
            a{
                padding-bottom: 0.5em;
                color:#575757;
                display: block;
            }
            &.active {
                border-bottom: 3px solid $primary;
                a.active {
                    font-weight: 700;
                    color: $primary;
                }
            }
        }
    }
}


// -----------------------------------------------------------------------------
// Responsive

@media only screen and (max-width: $media-maxW-xs) {
    .page-main {
        padding: 1rem;
    }
    .card {
        font-size: 0.85em !important;
        &-header, &-body, &-footer {
            padding: 1em;
        }
    }
    .justify-content-end {
        a, button {
            font-size: 1.2em;
        }
    }
}

.masonry {
    .mas-col {
        padding-bottom: #{$card-spacer-y * 2};
    }
}

.object-control {
    max-height: 380px;
    overflow-y: auto;

    input[type="checkbox"] {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        + label button {
            .checked {
                display: none;
            }
        }
        &:checked {
            + label button {
                background-color: $primary;
                color: #FFF;
                .checked {
                    display: inline-block;
                }
                .unchecked {
                    display: none;
                }
            }
        }
    }
}

.card--load-profiles {
    .load-profile__form--clone {
        width: 22.5em;
    }
}
