/* Variables */
:root {
    --primary-color: #93848c;   
    --primary-color-negative: 255,255,255;
    --secondary-color: #535848;
    --secondary-color-negative: 255,255,255;
}

/* General */

/* Font */

* {
    font-family: "Roboto Light", sans-serif;
    font-size: 20px;
    font-weight: normal;
    /* color: var(--primary-color); */
    color: var(--secondary-color);
}

/* Font-Color */
*, .color-dark-grey {
    color: var(--secondary-color);
    /* color: var(--primary-color); */
}

body {
    line-height: 1.3;
}

/* Size of Logo */
.logo img {
    width: 250px;
    height: auto;
}

/* Buttons next and previous and formular buttons */
.btn {
    background-color: var(--primary-color) !important;
    padding-top: 0.3rem;
}


.btn.btn-outline-light-grey {
    background-color: white !important;
    border-color: var(--secondary-color);
}

.btn.btn-outline-light-grey:hover {
    color: var(--secondary-color);
}


button .btn.bg-light-grey.text-white 

.btn:hover {
    color: rgba(var(--primary-color-negative),.8);
}

.btn svg path {
    stroke: rgba(var(--primary-color-negative),1);
}

.save-state {
    color: rgba(var(--primary-color-negative),1);
}

.save-state.bm-small-btn {
    color: var(--secondary-color);
}

.border {
    border: 0px solid !important;
}

.rounded-0 {
    border-radius: 2px !important;
}

/* Select-Buttons */
.bm-btn.active {
    background-color: var(--secondary-color);
    color: white;
}

.bm-btn {
    border: 1px solid var(--secondary-color);
}

.bm-small-btn {
    color: var(--secondary-color);
    /* color: var(--primary-color); */
}

.icon.svg-icon path + path {
    fill: var(--secondary-color);
}


/* Progressive Disclosure */
.main-container .apartment-nav .apartment-nav-graph .apartment-nav-graph-link.current-route .apartment-nav-graph-link-point:before {
    border: 3px solid var(--primary-color); 
}

.main-container .apartment-nav .apartment-nav-graph .apartment-nav-graph-link.active .apartment-nav-graph-link-point {
    background-color: var(--primary-color);
}

.main-container .apartment-nav .apartment-nav-graph .apartment-nav-graph-link.active:before {
    border-color: var(--primary-color);
}


/* Selected material thumbnail */
.bm-btn-with-image.active img {
    border: 3px solid var(--primary-color);
}


/* Footer */
.main-container footer {
    background-color: var(--primary-color);
    /* background-color: var(--secondary-color); */
}


/* MOBILE */

/* Gesamtübersicht fixes */
.functions-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-box h2 {
    margin-top: 0.3rem;
}

a.save-state {
    margin-right: 0;
}