/*!
 * IMMOPLANIT COMPONENTS 
 * Copyright (c) 2022 ImmoPlanit
 */
:root {
    --mud-palette-primary: #0C7CFF !important;
    --mud-palette-primary-darken: #02163D !important;
    --mud-palette-secondary: #02163D !important;
    --mud-palette-tertiary: #BDBDBD !important;
    --mud-palette-secondary-hover: #FF7F14 !important;
    --mud-palette-tertiary-hover: #313131 !important;
    --mud-palette-secondary-darken: #FF7F14 !important;
}

.brand-bg {
    background-color: #02163D;
}

.brand-bg--white {
    background-color: #fff;
}

.brand-bg--accent1 {
    background-color: #0C7CFF;
}

.brand-bg--gradient {
    background-color: linear-gradient(90.9deg, #0C7CFF 0%, #0963CD 100%);
}

.brand-highlight {
    color: #0C7CFF;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.ttf");
}

:root {
    --mud-typography-h1-family: "Poppins" !important;
    --mud-typography-h2-family: "Poppins" !important;
    --mud-typography-h3-family: "Poppins" !important;
    --mud-typography-h4-family: "Poppins" !important;
    --mud-typography-h5-family: "Poppins" !important;
    --mud-typography-h6-family: "Poppins" !important;
    --mud-typography-caption-family: "Poppins" !important;
    --mud-typography-h1-size: 26px !important;
    --mud-typography-h1-weight: 700 !important;
    --mud-typography-h2-size: 24px !important;
    --mud-typography-h2-weight: 700 !important;
    --mud-typography-h3-size: 20px !important;
    --mud-typography-h3-weight: bold !important;
    --mud-typography-h4-size: 18px !important;
    --mud-typography-h3-weight: bold !important;
    --mud-typography-h5-size: 16px !important;
    --mud-typography-h5-weight: bold !important;
}

.mud-typography-body1 {
    font-family: "Poppins";
}

body {
    color: #777777;
    font-family: "Poppins";
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: none;
    text-transform: none;
    background-color: none;
}

a {
    color: #0C7CFF;
}

body {
    font-family: "Poppins";
    font-weight: 400;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    font-family: "Poppins";
}

h1,
.h1 {
    color: #02163D;
    font-size: 32px;
    line-height: 48px;
    font-weight: 700;
}

@media screen and (max-width: 600px) {
    h1,
    .h1 {
        font-size: 28px;
        line-height: normal;
    }
}

h2,
.h2 {
    color: #02163D;
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
}

h3,
.h3 {
    color: #02163D;
    font-size: 20px;
}

h4,
.h4 {
    color: #02163D;
    font-size: 18px;
    line-height: 27px;
    font-weight: 500;
}

h5,
.h5 {
    color: #02163D;
}

p {
    color: #777777;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
}

a.c-link {
    color: #0C7CFF;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
}

a.c-link:hover {
    color: #02163D;
}

.c-txt-center {
    text-align: center;
}

small {
    color: #BDBDBD;
    font-size: 12px;
    font-weight: 300;
}

.no-wrap {
    white-space: nowrap;
}

ul.c-checklist {
    position: relative;
    margin-left: 25px;
}

ul.c-checklist li::before {
    content: "";
    position: absolute;
    left: -25px;
    height: 23px;
    width: 20px;
    padding-top: 5px;
    background-image: url("../img/icons/check-blue.svg");
    background-repeat: no-repeat;
    z-index: 10;
    background-position: center center;
}

@media screen and (max-width: 600px) {
    .mud-typography.mud-typography-h1 {
        font-size: 16px;
    }

    .mud-typography.mud-typography-h2 {
        font-size: 16px;
    }
}

@media screen and (max-width: 600px) {
    .mud-typography.mud-typography-h3 {
        font-size: 16px;
    }
}

.c-main--layout {
    display: flex;
    height: 100vh;
}

@media (max-width: 600px) {
    .c-main--layout {
        display: block;
        width: 100%;
        height: auto;
    }
}

.c-error--layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}

@media (max-width: 600px) {
    .c-error--layout {
        grid-template-columns: 1fr;
        height: auto;
        margin-top: 50px;
    }
}

.c-error--layout > div:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.full-height {
    min-height: 100vh;
}

.article-full-height {
    margin-bottom: 0 !important;
    height: 86vh;
    overflow-y: auto;
}

.c-1 {
    width: 50%;
}

@media (max-width: 960px) {
    .c-1 {
        width: 100%;
    }
}

.c1-4 {
    width: 25%;
}

@media (max-width: 960px) {
    .c1-4 {
        width: 100%;
    }
}

.c3-4 {
    width: 75%;
}

@media (max-width: 960px) {
    .c3-4 {
        width: 100%;
    }
}

.c-img-responsive {
    max-width: 100%;
    height: auto;
}

.c-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

hr {
    border-top: 1px solid #DDD;
}

.w-label {
    min-width: 150px;
}

.m-md-open {
    margin-left: 240px;
}

.m-md-close {
    margin-left: 56px;
}

@media (max-width: 600px) {
    .hide-on-mobile {
        display: none;
    }
}

.c-svg--li {
    fill: #0A66C2;
}

.c-svg--fb {
    fill: #1877F2;
}

.c-svg--g1 {
    fill: #FFC107;
}

.c-svg--g2 {
    fill: #FF3D00;
}

.c-svg--g3 {
    fill: #4CAF50;
}

.c-svg--g4 {
    fill: #1976D2;
}

.c-svg--eye {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 15px;
    cursor: pointer;
    background-position: center center;
    background-image: url("../img/icons/eye-closed.svg");
}

.c-svg--eyeOpen {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 15px;
    cursor: pointer;
    background-position: center center;
    background-image: url("../img/icons/eye-open.svg");
}

.c-svg--edit {
    position: absolute;
    z-index: 1;
    right: -5px;
    bottom: 0;
    cursor: pointer;
}

.c-svg--edit svg {
    fill: #0C7CFF;
}

.c-svg--edit svg:hover {
    fill: #02163D;
}

.c-svg-back {
    cursor: pointer;
    fill: #BDBDBD;
}

.c-svg-back:hover {
    fill: #02163D;
}

@media screen and (max-width: 960px) {
    .c-svg-msg {
        width: 30px;
        height: 30px;
        margin-top: 5px;
    }
}

.c-svg-info {
    fill: #0C7CFF;
}

.c-svg-info:hover {
    fill: #02163D;
}

.c-svg-error {
    fill: #f44336;
}

.c-svg-error:hover {
    fill: #c00;
}

.c-svg-add {
    fill: #0C7CFF;
    cursor: pointer;
    margin-left: 10px;
}

.c-svg-add:hover {
    fill: #02163D;
}

.c-svg--grid {
    fill: #0C7CFF;
    cursor: pointer;
}

.c-svg--grid:hover {
    fill: #02163D;
}

.c-box--headerLink a .c-svg--list,
.c-box--headerLink a .c-svg--grid {
    fill: #777777;
    cursor: pointer;
}

.c-box--headerLink a .c-svg--list:hover,
.c-box--headerLink a .c-svg--grid:hover {
    fill: #02163D;
}

.c-box--headerLink a .c-svg--list.active,
.c-box--headerLink a .c-svg--grid.active {
    fill: #0C7CFF;
}

.c-svg--delete {
    cursor: pointer;
    fill: #f44336;
}

.c-svg--delete:hover {
    fill: #02163D;
}

.c-svg--move {
    cursor: pointer;
    fill: #777777;
}

.c-svg--move:hover {
    fill: #02163D;
}

.c-svg--picture {
    fill: #0C7CFF;
}

.c-svg--editLight, .c-svg--show, .c-svg--download, .c-svg--upload {
    fill: #0C7CFF;
}

.c-svg--editLight:hover, .c-svg--show:hover, .c-svg--download:hover, .c-svg--upload:hover {
    fill: #02163D;
}

.c-ico-damage {
    color: #fff;
    background-color: #f44336;
    border-radius: 5px;
    padding: 4px 7px;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    height: 30px;
    min-width: 50px;
    justify-content: center;
}

.c-ico-damage svg {
    fill: #fff;
    padding: 0 2px;
    margin-right: 4px;
}

.c-ico-damage--light {
    position: absolute;
    top: 9px;
    right: 40px;
}

.c-ico-damage--light svg {
    fill: #f44336;
}

.c-ico-cleaning {
    color: #fff;
    background-color: #0C7CFF;
    border-radius: 5px;
    padding: 4px 7px;
    height: 30px;
    min-width: 50px;
    text-align: center;
}

.c-ico-cleaning svg {
    fill: #fff;
}

.c-ico-cleaning--light {
    position: absolute;
    top: 9px;
    right: 60px;
}

.c-ico-cleaning--light svg {
    fill: #0C7CFF;
}

.c-ico-alarm {
    color: #fff;
    border-radius: 5px;
    padding: 4px;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    min-width: 50px;
    justify-content: center;
}

.c-ico-alarm svg {
    fill: #fff;
    padding: 0 4px;
}

.smoke {
    background-color: #FF7F14;
}

.boiler {
    background-color: #D26914;
}

.co {
    background-color: #D9C621;
}

.c-ico-damage--position {
    position: absolute;
    top: 8px;
    right: 0;
}

.c-ico-damage--position.c-ico-damage svg {
    height: 20px;
    padding: 0;
    margin: 0 2px;
}

.c-ico-cleaning--position {
    position: absolute;
    top: 8px;
    right: 35px;
}

.c-svg-rotate {
    transform: rotate(45deg);
}

.c-btn {
    font-family: "Poppins";
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    border-radius: 10px;
    text-align: center;
    padding: 10px 50px;
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
}

@media (max-width: 600px) {
    .c-btn {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
}

.c-btn--strech {
    width: 100%;
    display: block;
}

.c-btn--primary {
    background: linear-gradient(90.9deg, #0C7CFF 0%, #0963CD 100%);
    color: #fff;
}

.c-btn--primary svg {
    fill: #fff;
    margin-right: 7px;
}

.c-btn--primary:hover {
    background: #02163D;
}

.c-btn--secondary {
    background: #fff;
    color: #777777;
    border: 1px solid #777777;
}

.c-btn--secondary .c-svg {
    vertical-align: middle;
    margin-right: 10px;
}

.c-btn--secondary:hover {
    background: #777777;
    color: #fff !important;
    text-decoration: none !important;
}

.c-btn--secondary:hover .c-svg--li, .c-btn--secondary:hover .c-svg--fb, .c-btn--secondary:hover .c-svg--g1, .c-btn--secondary:hover .c-svg--g2, .c-btn--secondary:hover .c-svg--g3, .c-btn--secondary:hover .c-svg--g4 {
    fill: #fff;
}

.c-btn--small {
    padding: 5px 15px;
    font-size: 13px;
    border-radius: 5px;
}

.c-btn--plus {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF7F14;
    color: #fff;
    line-height: 40px;
    font-size: 1.5em;
}

.c-btn--plus:hover {
    background: #02163D;
}

.c-btn--close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F1F1F1;
    color: #02163D;
    line-height: 40px;
    font-size: 1.5em;
    transform: rotate(45deg);
}

.c-btn--close:hover {
    background: #02163D;
    color: #fff;
}

.CTA-center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

.CTA-right {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

@media screen and (max-width: 600px) {
    .CTA-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: center;
    }
}

.pointer {
    cursor: pointer;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
}

.c-login--layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    max-height: 100%;
}

@media (max-width: 960px) {
    .c-login--layout {
        grid-template-columns: 1fr;
    }
}

.c-login--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 30px 0 30px;
    position: absolute;
    width: 50%;
    z-index: 999;
}

@media (max-width: 960px) {
    .c-login--header {
        position: relative;
        width: 100%;
        background: #fff;
    }
}

.c-login--wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

@media (max-width: 600px) {
    .c-login--wrapper {
        height: auto;
    }
}

.c-login {
    width: 70%;
}

@media (max-width: 600px) {
    .c-login {
        margin-top: 30px;
        width: 80%;
    }
}

@media (min-width: 1920px) {
    .c-login {
        width: 400px;
    }
}

.c-login--social {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.c-login--links {
    text-align: center;
}

.c-login--logo {
    display: flex;
    justify-content: center;
    padding-top: 10%;
}

.c-login--drawing {
    position: absolute;
    bottom: 0;
}

.c-login--drawing img {
    vertical-align: bottom;
}

.c-login--usp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 200px);
}

.c-login--usp h2,
.c-login--usp h4,
.c-login--usp p,
.c-login--usp ul {
    color: #fff;
}

.c-login--usp ul,
.c-login--usp li {
    font-size: 15px;
    line-height: 30px;
    font-weight: 400;
    list-style-image: url("../img/icons/check.svg");
    margin-left: 5px;
    padding-left: 10px;
    vertical-align: middle;
}

.relative {
    position: relative;
}

.mb-5 {
    margin-bottom: 20px;
}

.mt-5 {
    margin-top: 20px;
}

.d-none {
    display: none;
}

@media (min-width: 600px) {
    .d-sm-none {
        display: none !important;
    }
}

@media (min-width: 960px) {
    .d-md-block {
        display: block !important;
    }
}

/* FORM ELEMENTS */
select.c-select-lng {
    display: inline-block;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #02163D;
    width: 55px;
    line-height: 37px;
    cursor: pointer;
    background-color: transparent;
    background-image: linear-gradient(45deg, transparent 50%, #02163D 50%), linear-gradient(135deg, #02163D 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: none;
}

select.c-select-lng:focus {
    border-color: #02163D;
    outline: 0;
}

.item-container {
    position: relative;
    margin-bottom: 30px;
}

.item-container label {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 16px;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.item-container input {
    border: 0;
    border-bottom: 2px solid #DDD;
    background: transparent;
    width: 100%;
    padding: 0;
    font-size: 16px;
    height: 60px;
    z-index: 10;
}

.item-container input:focus {
    border: none;
    outline: none;
    border-bottom: 2px solid #0C7CFF;
}

.item-container input:focus ~ label,
.item-container input:valid ~ label {
    top: -12px;
    font-size: 12px;
}

.item-container.item-container-error input {
    border-bottom: 2px solid #f44336;
}

.item-container.item-container-error label {
    color: #f44336;
}

input[required] + label:after {
    content: "*";
}

.c-form input[type=checkbox] {
    margin-right: 7px;
}

.red {
    color: #f44336;
}

select {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

select:focus {
    border-color: gray;
    outline: 0;
}

.c-form input, .c-form select {
    border: 1px solid #BDBDBD;
    border-radius: 5px;
    width: 100%;
    padding-left: 15px;
    height: 43px;
    margin-bottom: 20px;
    height: 43px;
}

.c-form label {
    color: #313131;
}

.c-select {
    border: 1px solid #BDBDBD;
    border-radius: 5px;
    width: auto;
    padding-left: 15px;
    height: 43px;
    margin-bottom: 20px;
    height: 43px;
}

.c-form--group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

input.has-error, select.has-error {
    border: 1px solid #f44336;
    color: #f44336;
}

::-moz-placeholder {
    color: #BDBDBD;
}

::placeholder {
    color: #BDBDBD;
}

input.has-error::-moz-placeholder {
    color: #f44336;
    opacity: 1;
}

input.has-error::placeholder {
    color: #f44336;
    opacity: 1;
}

input.has-error::-ms-input-placeholder {
    color: #f44336;
    opacity: 1;
}

#phone, .iti {
    width: 100%;
    margin-bottom: 20px;
}

select:invalid {
    color: #BDBDBD;
}

option[value=""][disabled] {
    display: none;
}

option {
    color: #777777;
}

input[type=color] {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 40px;
    background: none;
    padding: 0;
    margin: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type=color]::-webkit-color-swatch {
    border: solid 1px #777777;
    border-radius: 40px;
}

input[type=date] {
    padding-right: 10px;
    border: 1px solid #BDBDBD;
    border-radius: 5px;
    width: 100%;
    padding-left: 15px;
    height: 43px;
    margin-bottom: 20px;
    height: 43px;
}

.c-select-lng {
    height: 38px;
    min-width: 50px;
    cursor: pointer;
    background-color: #fff;
    border: none;
}

.c-select-lng--inverted {
    color: #fff;
    background-color: #02163D;
    font-weight: 700;
    height: 38px;
    min-width: 50px;
    margin-left: 7px;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%);
}

.c-select-language {
    margin-top: -10px;
}

.c-select-language .mud-input {
    color: #fff;
}

.c-select-language .mud-input:hover {
    color: #0C7CFF;
}

.c-select-language .mud-icon-root.mud-svg-icon {
    fill: #fff;
}

.c-select-language .mud-input.mud-input-underline:before {
    border-bottom: none !important;
}

.c-select-lng--wrapper {
    position: absolute;
    bottom: 18px;
    right: 15px;
}

/* CUSTOM FILE UPLOAD*/
.c-btn--file {
    color: transparent;
    margin: 10px auto 0 auto;
    width: 260px;
}

.c-btn--file::-webkit-file-upload-button {
    visibility: hidden;
}

.c-btn--file::before {
    content: "Bladeren";
    color: #fff;
    display: inline-block;
    background: #0C7CFF;
    border: 1px solid #0C7CFF;
    border-radius: 10px;
    padding: 10px 50px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 10pt;
}

.c-btn--file:hover::before {
    background: #02163D;
    border: 1px solid #02163D;
}

.c-btn--file:active {
    outline: 0;
}

.c-btn--file:active::before {
    background: #02163D;
    border: 1px solid #02163D;
}

/* DRAG & DROP */
.c-drag-drop {
    border: 1px solid #0C7CFF;
    background: #F1F1F1;
    color: #0C7CFF;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    /*display: flex;*/
    /*align-items: center;*/
    cursor: pointer;
}

/* SWITCH FIELD */
.c-switch-field {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

.c-switch-field input {
    display: none;
}

.c-switch-field label {
    background-color: #fff;
    color: #777777;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 14px 16px;
    margin-right: -1px;
    border: 1px solid #BDBDBD;
    transition: all 0.1s ease-in-out;
    width: 100%;
}

.c-switch-field label:hover {
    cursor: pointer;
}

.c-switch-field input:checked + label {
    background-color: #0C7CFF;
    color: #fff;
    box-shadow: none;
}

.c-switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.c-switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}

.c-new-p-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 50px;
    column-gap: 50px;
}

@media (max-width: 960px) {
    .c-new-p-form {
        grid-template-columns: 1fr;
    }
}

.read-only {
    background-color: #EEE;
    padding-left: 10px;
    padding-right: 10px;
}

.error-red {
    color: #f44336;
    font-weight: bold;
}

.mt-date {
    margin-top: 7px;
}

.c-back--wrapper {
    position: absolute;
    top: 40px;
    left: 30px;
    z-index: 1;
}

@media (max-width: 600px) {
    .c-back--wrapper {
        display: none;
    }
}

.c-box--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
    .c-box--header {
        flex-direction: column;
        gap: 20px;
    }
}

.c-box--headerLink {
    display: flex;
    align-items: center;
}

.c-box--headerLink a svg {
    fill: #0C7CFF;
    padding-right: 7px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.c-box--headerLink a svg:hover {
    fill: #02163D;
}

.c-box--item {
    border-radius: 5px;
    position: relative;
    padding: 15px;
    background: #fff;
    color: #777777;
    border: 1px solid #777777;
    cursor: pointer;
}

.c-box--item svg {
    fill: #777777;
    vertical-align: middle;
}

.c-box--item:hover svg {
    fill: #fff;
}

.c-box--item:hover {
    background: #02163D;
    color: #fff;
}

.c-box--item.active {
    background: #0C7CFF;
    color: #fff;
    border: none;
}

.c-box--item.active svg {
    fill: #fff;
}

.c-box--item.active:hover svg {
    fill: #fff;
}

.c-box--item.active:hover {
    background: #02163D;
}

.c-box--items .active .c-box--item {
    background: #0C7CFF;
    color: #fff;
    border: none;
}

.c-box--items .active .c-box--item svg {
    fill: #fff;
}

.c-box--items .active .c-box--item:hover {
    background: #02163D;
}

.c-box--close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 1;
    cursor: pointer;
}

.c-box--close svg {
    fill: #777777;
}

.active .c-box--close svg {
    fill: #fff;
}

.c-box--description {
    font-weight: 500;
    margin-top: 7px;
}

.c-box--time {
    font-weight: 400;
    font-size: 11px;
    padding-left: 7px;
}

.c-item--adres {
    font-size: 16px;
    font-weight: 600;
    color: #313131;
}

.c-item--adres-small {
    font-size: 12px;
    font-weight: 400;
    color: #777777;
}

.c-box--itemRent {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.c-box--itemRent:hover {
    background: #F8F8F8;
    cursor: pointer;
}

.c-item--image {
    margin-right: 10px;
}

.c-item--status {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
}

.c-item--status.none {
    color: #777777;
}

.c-item--status.waiting {
    color: #FF7F14;
}

.c-item--status.done {
    color: #62CA76;
}

@media screen and (max-width: 600px) {
    .c-box--header {
        border-bottom: 1px solid #DDD;
        padding-bottom: 10px;
    }

    .c-box--headerLink {
        display: none;
    }

    .c-box--header.has-sort .c-box--headerLink {
        display: flex;
    }

    .c-item--status {
        margin: 0;
    }

    .c-box--itemRent {
        flex-direction: column;
        margin-bottom: 20px;
    }

    /* PHASE 1 - without sort */
    /* .c-box--header.has-sort {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
  
        .c-box--headerLink  {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 20px;
  
            .mud-nav-link {
                padding: 0;
            }
            .mud-nav-link .mud-nav-link-text {
                margin-left: 0;
                margin-inline-start: 0;
            } 
         } 
    }*/
}

.c-msg-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 250px;
}

@media screen and (max-width: 600px) {
    .c-msg-wrapper {
        width: 115px;
    }
}

.c-box--wrapper.mud-list-item {
    padding-top: 0;
    padding-bottom: 0;
}

.c-box--wrapper.mud-list-item:hover {
    background-color: transparent;
}

.c-msg {
    max-width: 520px;
}

@media screen and (max-width: 600px) {
    .c-msg {
        width: 250px;
    }
}

.c-msg a:hover {
    text-decoration: none !important;
}

:root {
    --pand-box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.1);
    --pand-img-border-radius: 5px 5px 0 0;
    --pand-border-radius: 0 0 5px 5px;
    --pand-font-size-small: 12px;
    --pand-text-padding: 0 10px 10px 10px;
}

/* PANDEN */
.grid.panden {
    display: block;
    grid-template-columns: 1fr;
}

.grid.panden article {
    margin-bottom: 30px;
}

@media screen and (max-width: 600px) {
    .grid.panden article {
        margin-bottom: 20px;
    }
}

.c-pagetitle--wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
    .c-pagetitle--wrapper {
        flex-direction: column;
    }

    .c-pagetitle--wrapper button {
        width: 100%;
    }
}

.c-page-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.c-page-title .c-svg-back {
    margin-right: 10px;
    margin-top: 7px;
}

/* NEW PAND */
.grid-panden small {
    color: #777777;
    font-size: 13px;
    font-weight: 400;
}

.grid-panden h3 {
    color: #313131;
}

.c-new-pand {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}

@media screen and (max-width: 960px) {
    .c-new-pand {
        grid-template-columns: 1fr;
    }
}

.c-new-pand .c-google--map {
    height: 220px;
    overflow: hidden;
    border: 1px solid #BDBDBD;
    border-radius: 5px;
}

.c-advanced-optios {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

@media screen and (max-width: 960px) {
    .c-advanced-optios {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.c-fotos--wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    grid-gap: 20px;
    align-items: stretch;
}

@media screen and (max-width: 600px) {
    .c-fotos--wrapper {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

.c-foto-item {
    position: relative;
}

.c-foto-item img {
    border-radius: 5px;
    position: relative;
    width: 100%;
}

.c-foto-item .c-ico--delete {
    position: absolute;
    top: 7px;
    right: 10px;
    z-index: 10;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-foto-item .c-ico--delete:hover {
    background: #f44336;
}

.c-foto-item .c-ico--delete:hover .c-svg--delete {
    fill: #fff;
}

.c-address--wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media screen and (max-width: 960px) {
    .c-address--wrapper {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.c-new-pand--cta {
    display: flex;
    justify-content: flex-end;
}

.c-new-pand--cta .mud-button-text.mud-button-text-primary {
    margin-right: 20px;
}

@media screen and (max-width: 600px) {
    .c-new-pand--cta {
        display: block;
        justify-content: center;
    }

    .c-new-pand--cta .mud-button-text.mud-button-text-primary {
        text-align: center;
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

.c-upload--wrapper {
    background: #F1F1F1;
    border-radius: 5px;
    padding: 30px;
    text-align: center;
    margin-top: 30px;
}

@media screen and (max-width: 960px) {
    .c-upload--wrapper {
        padding: 30px 0;
    }
}

.c-upload--wrapper h2 {
    color: #0C7CFF;
    margin: 15px 0;
}

/* DETAIL PAND */
.grid-detail-info {
    display: grid;
    grid-template-columns: "1fr 1fr 1fr 1fr 1fr 1fr";
    grid-template-areas: "one one one one two two" "three three four four five five";
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.grid-detail-info .col1 {
    grid-area: one;
}

.grid-detail-info .col2 {
    grid-area: two;
}

.grid-detail-info .col3 {
    grid-area: three;
}

.grid-detail-info .col4 {
    grid-area: four;
}

.grid-detail-info .col5 {
    grid-area: five;
}

.grid-detail-info article.col2 {
    padding: 0;
}

.grid-detail-info article.col2 iframe {
    display: block;
}

.grid-detail-info article.col2 iframe {
    border-radius: var(--border-radius);
}

@media screen and (max-width: 1280px) {
    .grid-detail-info {
        grid-template-areas: "one one one one one one" "two two two two two two" "three three four four five five";
    }
}

@media screen and (max-width: 960px) {
    .grid-detail-info {
        display: flex;
        flex-direction: column;
    }
}

.grid-detail-info > article {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--box-padding);
}

.c-pand-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media screen and (max-width: 960px) {
    .c-pand-detail {
        grid-template-columns: 1fr;
    }
}

@media (orientation: landscape) {
    .c-pand-detail {
        grid-template-columns: 1fr 1fr;
    }
}

.c-pand-data--wrapper {
    margin-top: 20px;
}

@media screen and (max-width: 1920px) {
    .c-pand-data--wrapper .c-pand-data {
        flex-direction: column;
        align-items: flex-start;
    }
}

.c-pand-data {
    color: #313131;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.c-pand-data label {
    color: #BDBDBD;
}

.c-pand-data label.titel {
    color: #313131;
    font-weight: bold;
}

.c-pand-data .mud-chip {
    min-width: 140px;
    margin-right: 0;
}

.c-pand-detail--cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.c-pand--edit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    gap: 15px;
}

.c-pand--edit > :first-child {
    width: 100%;
}

@media screen and (max-width: 600px) {
    .c-pand--edit {
        width: auto;
    }
}

.c-pand--type {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.c-pand--type select {
    border: 1px solid #BDBDBD;
    border-radius: 5px;
    padding-left: 15px;
    height: 43px;
    height: 43px;
    width: 230px;
    margin-left: 20px;
}

@media screen and (max-width: 600px) {
    .c-pand--type {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .c-pand--type select {
        width: 100%;
        margin-left: 0;
    }
}

.c-pand--item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.c-pand--icons svg {
    margin-left: 15px;
}

/* NEW PAND OWNER */
.c-new-pand--owner {
    /*display: grid;
    grid-template-columns: 2fr;
    gap: 50px;
    border: 1px solid red;*/
}

@media screen and (max-width: 960px) {
    .c-new-pand--owner {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.property-adres {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: start;
}

@media screen and (max-width: 1280px) {
    .property-adres {
        flex-direction: column;
        flex-wrap: wrap;
    }
}

.c-link--wrapper .mud-button-root.mud-icon-button p {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.c-property-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    -moz-column-gap: 20px;
    column-gap: 20px;
}

@media screen and (max-width: 1280px) {
    .c-property-wrapper {
        flex-direction: column;
    }
}

.c-property-structure {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    -moz-column-gap: 50px;
    column-gap: 50px;
    align-items: stretch;
    width: 70%;
}

@media screen and (max-width: 1280px) {
    .c-property-structure {
        width: 100%;
    }
}

.c-add-floor {
    display: flex;
    align-items: center;
}

.c-add-floor .mud-input-label-outlined {
    background-color: #F1F1F1;
}

.pb-img-wrapper {
    display: flex;
    align-items: center;
}

.pb-img-wrapper img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin-right: 10px;
}

.pb-estimated-price-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 15px 0;
}

@media screen and (max-width: 960px) {
    .pb-estimated-price-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 10px;
        gap: 0;
    }
}

.pb-estimated-price-wrapper .mud-alert {
    padding-left: 0;
}

.pb-estimated-price-wrapper .mud-alert-text-info {
    color: #777777;
    background-color: #fff;
}

.pb-estimated-price-wrapper-vertical .mud-alert-text-info {
    color: #777777;
    background-color: #fff;
}

.pb-estimated-price {
    background: #02163D;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding-top: 5px;
}

.pb-data-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media screen and (max-width: 960px) {
    .pb-data-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 20px;
        gap: 0;
    }
}

/* DETAIL PB */
.pb-detail-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 15%;
    grid-template-areas: "one one  two two three three" "four four five five three three";
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.pb-detail-info .col1 {
    grid-area: one;
    order: 1;
}

.pb-detail-info .col2 {
    grid-area: two;
    order: 2;
}

.pb-detail-info .col3 {
    grid-area: three;
    order: 3;
}

.pb-detail-info .col4 {
    grid-area: four;
    order: 4;
}

.pb-detail-info .col5 {
    grid-area: five;
    order: 5;
}

@media screen and (max-width: 960px) {
    .pb-detail-info {
        display: flex;
        flex-direction: column;
    }

    .pb-detail-info .col1 {
        order: 2;
    }

    .pb-detail-info .col2 {
        order: 3;
    }

    .pb-detail-info .col3 {
        order: 1;
    }

    .pb-detail-info .col4 {
        order: 4;
    }

    .pb-detail-info .col5 {
        order: 5;
    }
}

.pb-detail-info > article {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--box-padding);
}

/* DETAIL HUUR*/
.rent-detail-info {
    display: grid;
    grid-template-columns: "1fr 1fr 1fr 1fr 1fr";
    grid-template-areas: "one one  one one two two" "three three four four two two";
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.rent-detail-info .col1 {
    grid-area: one;
}

.rent-detail-info .col2 {
    grid-area: two;
}

.rent-detail-info .col3 {
    grid-area: three;
}

.rent-detail-info .col4 {
    grid-area: four;
}

@media screen and (max-width: 960px) {
    .rent-detail-info {
        display: flex;
        flex-direction: column;
    }
}

.pb-detail-info > article, .rent-detail-info > article {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--box-padding);
}

/* EDIT FLOW */
.col2-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

@media (max-width: 960px) {
    .col2-wrapper {
        flex-direction: column;
    }
}

.col4-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
}

@media (max-width: 960px) {
    .col4-wrapper {
        grid-template-columns: 1fr;
    }
}

.add-wrapper {
    width: 50%;
}

@media screen and (max-width: 1280px) {
    .add-wrapper {
        width: 100%;
    }
}

.pb-edit-view {
    border-radius: var(--border-radius);
    padding: 20px;
    background-color: #F1F1F1;
}

.pb-edit-view .pb-data {
    width: 100%;
}

.pb-edit-view .mud-fab-extended.mud-fab-size-large {
    border-radius: 10px;
    width: 100px;
    height: 100px;
    text-align: center;
}

.pb-edit-view .mud-input-control {
    margin-top: 0;
}

.pb-edit-view .mud-fab-label {
    display: flex;
    flex-direction: column;
    font-size: 9px;
}

.pb-edit-view .mud-fab-extended.mud-fab-size-large .mud-fab-label {
    gap: 0;
}

.pb-edit-view .pb-data-comments .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0;
}

.pb-edit-view .pb-data-comments .mud-input.mud-input-outlined {
    background-color: #fff;
}

.pb-edit-view .pb-data-comments label {
    margin-bottom: 15px;
}

.pb-edit-view .c-fotos--wrapper {
    display: flex;
    flex-direction: row;
}

.pb-edit-view .c-fotos--wrapper img {
    width: 100px;
}

@media screen and (max-width: 600px) {
    .pb-edit-view .c-fotos--wrapper {
        display: grid;
    }

    .pb-edit-view .c-fotos--wrapper img {
        max-width: 100%;
        width: 100%;
    }
}

.pb-data-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

@media (max-width: 600px) {
    .pb-data-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

.pb-data-item .mud-input > input.mud-input-root {
    background-color: #fff;
    text-align: center;
}

.c-signature {
    padding: 20px;
    background: #F1F1F1;
    border: 1px solid #DDD;
    text-align: center;
}

.c-addendum {
    background-color: #F1F1F1;
    padding: 20px;
    border-radius: 10px;
}

.c-pb-status {
    text-align: center;
}

.c-pb-status .mud-icon-root {
    width: 90px;
    height: 90px;
}

.pb-price-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pb-price-line .activity {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

@media (max-width: 960px) {
    .pb-price-line .activity {
        white-space: normal;
    }
}

.pb-price-line .activity .mud-switch {
    margin-right: 0;
    margin-inline-end: 0;
}

@media (max-width: 960px) {
    .pb-price-line .activity .mud-switch {
        width: 100%;
    }
}

.pb-price-line .dash {
    width: 100%;
    border-top: 1px dotted #02163D;
    margin: 0 2px;
    transform: rotate(-0.07deg);
}

.pb-price-line .price {
    white-space: nowrap;
}

@media (max-width: 960px) {
    .pb-price-line {
        white-space: normal;
    }
}

.pb-price-note small {
    color: #777777;
}

.pb-activity-header {
    background-color: #F1F1F1;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.pb-activity-body {
    padding: 0 20px;
}

.pb-cv {
    margin-top: 30px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width: 960px) {
    .pb-cv {
        grid-template-columns: 1fr;
    }
}

.c-boiler-maintenance {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

@media (max-width: 960px) {
    .c-boiler-maintenance {
        flex-direction: column;
        gap: 0;
    }
}

.grid-detail-pb {
    display: grid;
    grid-template-columns: 2fr 1fr;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

@media (max-width: 960px) {
    .grid-detail-pb {
        display: flex;
        flex-direction: column-reverse;
    }
}

.grid-detail-pb > article {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--box-padding);
}

:root {
    --search-width: 500px;
    --search-btn-width: 60px;
    --search-btn-height: 50px;
}

.c-search--wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.c-search--wrapper .mud-input-label-outlined {
    background-color: #F1F1F1;
}

.c-search {
    position: relative;
    width: var(--search-width);
}

@media (max-width: 960px) {
    .c-search-hide-on-mobile {
        display: none;
    }
}

@media (max-width: 960px) {
    .c-search-show-on-mobile {
        display: block;
    }
}

.c-search input[type=search] {
    height: 50px;
    padding-left: 15px;
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
}

.c-search--btn {
    height: var(--search-btn-height);
    width: var(--search-btn-width);
    position: absolute;
    top: 0;
    right: 0;
    background: #0C7CFF;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0 10px 10px 0;
}

.c-search--btn:hover {
    background: #02163D;
}

.c-search .c-svg--search {
    width: 21px;
    height: 21px;
    fill: #fff;
    vertical-align: middle;
}

/* ZERO NAV */
.c-zero-nav--wrapper {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    -moz-column-gap: 12px;
    column-gap: 12px;
    position: relative;
}

.c-menu-item-plus.mud-list-item-clickable:hover {
    background-color: transparent;
}

.c-menu-item-plus .mud-typography-body1 {
    display: flex;
    align-items: center;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

.c-menu-item-plus .mud-typography-body1:hover {
    color: #0C7CFF;
}

.c-menu-item-plus .mud-typography-body1 {
    fill: #FF7F14;
}

.c-menu-item-plus .mud-typography-body1:hover {
    fill: #0C7CFF;
}

.c-msg-nr {
    width: 20px;
    height: 20px;
    background-color: #f44336;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: 3px;
    right: -10px;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 960px) {
    .c-search--btn span {
        display: none;
    }

    .c-search {
        --search-width: 100%;
    }

    .c-search--btn {
        --search-btn-width: 50px;
    }

    .c-search .c-svg--search {
        margin-right: 0;
    }

    .c-search--wrapper {
        margin-bottom: 20px;
    }

    .c-zero-nav--wrapper {
        /*position: absolute;
        top: 15px;
        right: 15px;
        z-index: 20;*/
    }
}

.c-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #777777;
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-icon svg {
    fill: #0C7CFF;
}

.c-icon:hover {
    background: #02163D;
}

.c-icon:hover svg {
    fill: #fff;
}

.c-counter--wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    -moz-column-gap: 40px;
    column-gap: 40px;
    align-items: stretch;
    margin-top: 30px;
}

@media screen and (max-width: 600px) {
    .c-counter--wrapper {
        grid-template-columns: 1fr;
    }
}

.c-counter {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-counter label {
    color: #313131;
    font-size: 17px;
}

.c-counter .input-number {
    vertical-align: top;
    text-align: center;
    outline: none;
    font-size: 100%;
    background: #fff;
    border: 1px solid #BDBDBD;
    width: 65px;
    border-radius: 0;
}

.c-counter .input-number,
.c-counter .input-number-decrement,
.c-counter .input-number-increment {
    height: 43px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.c-counter .input-number-decrement,
.c-counter .input-number-increment {
    font-size: 100%;
    display: inline-block;
    width: 33px;
    background: #777777;
    color: #fff;
    border: none;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

.c-counter .input-number-decrement:hover,
.c-counter .input-number-increment:hover {
    background: #02163D;
}

.c-counter .input-number-decrement:active,
.c-counter .input-number-increment:active {
    background: #0C7CFF;
}

.c-counter .input-number-decrement {
    border-right: none;
    border-radius: 4px 0 0 4px;
    margin-right: -5px;
}

.c-counter .input-number-increment {
    border-left: none;
    border-radius: 0 4px 4px 0;
    margin-left: -5px;
}

.c-counter input:focus {
    outline: none;
}

.c-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    -moz-column-gap: 20px;
    column-gap: 20px;
    margin-bottom: 30px;
    background-color: #F1F1F1;
    width: 100%;
    padding: 0 20px 10px 20px;
    border-radius: 10px;
}

@media (max-width: 960px) {
    .c-filters {
        display: none;
    }

    .c-filters .c-filter--btn {
        display: none;
    }
}

.c-filter--btn {
    width: 35px;
    height: 35px;
    background: #0C7CFF;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    border-radius: 10px;
    margin-top: 20px;
}

.c-filter--btn:hover {
    background: #02163D;
}

.c-filter--btn svg {
    fill: #fff;
}

@media (max-width: 600px) {
    .c-filter--btn {
        width: 100%;
        margin-top: 20px;
    }
}

.mud-button-filled.mud-button-filled-primary.c-filter--btn svg {
    margin-right: 0;
}

.c-filter-btn--wrapper .mud-button-filled.mud-button-filled-primary svg {
    margin-right: 0;
}

@media (min-width: 960px) {
    .c-filter-btn--wrapper {
        display: none;
    }
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.c-accordion.has-border {
    border-top: 1px solid #DDD;
    margin-top: 20px;
}

.c-accordion.has-border details {
    padding-top: 20px;
}

.c-accordion.has-border .summary-chevron {
    top: 25px;
    right: 0;
}

details {
    position: relative;
}

details summary {
    list-style: none;
}

details summary:focus {
    outline: none;
}

details summary:hover {
    cursor: pointer;
}

details .summary-chevron {
    pointer-events: none;
    position: absolute;
    top: 8px;
    right: 10px;
    transition: transform 0.5s;
}

details .summary-chevron svg {
    display: block;
    fill: #02163D;
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] summary .summary-chevron {
    transform: rotate(-180deg);
}

.main-layout .grid.admin {
    display: block;
    grid-template-columns: 1fr;
}

.main-layout .grid.role {
    grid-column: 2fr 1fr;
}

.main-layout .grid.role > article:last-child {
    grid-column: 1/-1;
}

.main-layout .grid.huur {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "one two three" "four five six";
}

.main-layout .grid.huur .col1 {
    grid-area: one;
    order: 1;
}

.main-layout .grid.huur .col2 {
    grid-area: two;
    order: 2;
}

.main-layout .grid.huur .col3 {
    grid-area: three;
    order: 3;
}

.main-layout .grid.huur .col4 {
    grid-area: four;
    order: 4;
}

.main-layout .grid.huur .col5 {
    grid-area: five;
    order: 5;
}

.main-layout .grid.huur .col6 {
    grid-area: six;
    order: 6;
}

@media screen and (max-width: 960px) {
    .main-layout .grid.huur {
        display: flex;
        flex-direction: column;
    }

    .main-layout .grid.huur .col1 {
        order: 2;
    }

    .main-layout .grid.huur .col2 {
        order: 3;
    }

    .main-layout .grid.huur .col3 {
        order: 1;
    }

    .main-layout .grid.huur .col4 {
        order: 4;
    }

    .main-layout .grid.huur .col5 {
        order: 5;
    }

    .main-layout .grid.huur .col6 {
        order: 6;
    }
}

.c-data--hasImage {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 150px auto;
}

@media screen and (max-width: 960px) {
    .c-data--hasImage {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
}

.c-data--hasImage .c-data--image img {
    width: 100px;
}

.main-layout .grid article.c-google-maps {
    padding: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.grid.admin .pb-detail-info {
    row-gap: 30px;
}

.c-externe-logins {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

@media screen and (max-width: 600px) {
    .c-externe-logins {
        flex-direction: column;
        row-gap: 20px;
    }
}

.c-externe-logins > div {
    display: flex;
    align-items: center;
}

.c-avatar {
    display: inline-block;
    position: relative;
}

.c-avatar .mud-avatar.mud-avatar-large {
    width: 150px;
    height: 150px;
}

/*!
 * MUDBLAZOR COMPONENTS THEMA
 * Copyright (c) 2022 ImmoPlanit
 */
.mud-tabs-toolbar {
    margin-bottom: 30px;
    border-radius: 10px;
    /*border:1px solid $brand__bg--gray;*/
}

.mud-tabs {
    border-radius: 10px;
}

.mud-tabs .mud-tabs-scroll-button .mud-icon-button {
    padding: 12px 6px;
}

@media screen and (min-width: 1280px) {
    .mud-tabs .mud-tabs-toolbar-wrapper {
        transform: none !important;
    }
}

.mud-tab {
    padding: 10px 30px;
    text-transform: none;
}

.mud-tab:hover {
    background: #fff;
}

.mud-tab.mud-tab-active {
    color: #fff;
    background: linear-gradient(90.9deg, #0C7CFF 0%, #0963CD 100%);
    border-bottom: none;
}

.mud-tab.mud-tab-active svg {
    fill: #fff;
}

.tabs--scrollable {
    border: 0;
}

.mud-tab.mud-tab-active.mud-ripple.tabs--scrollable {
    border-bottom: 0;
}

.mud-tab-slider {
    display: none;
}

@media screen and (min-width: 960px) {
    .mud-tabs-scroll-button {
        display: none;
    }
}

.grid.pb-fill-in .mud-tab {
    background-color: #F1F1F1;
}

.mud-tabs-toolbar {
    margin-bottom: 30px;
    border-radius: 10px;
}

.mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper {
    justify-content: space-between;
    width: 100%;
}

.mud-carousel .mud-icon-root.mud-svg-icon {
    fill: #fff;
}

.mud-carousel {
    border-radius: 10px;
    position: relative;
}

@media screen and (max-width: 960px) {
    .mud-carousel {
        height: 300px;
    }
}

.c-more-pictures {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 10px;
    z-index: 10;
}

.mud-button {
    font-family: "Poppins";
    border-radius: 10px;
    text-transform: none;
}

.mud-icon-button:hover, .mud-icon-button:focus-visible {
    background-color: transparent !important;
}

.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(90.9deg, #0C7CFF 0%, #0963CD 100%);
}

.mud-button-filled.mud-button-filled-primary svg {
    fill: #fff;
    margin-right: 7px;
}

.mud-button-plus {
    background: #FF7F14;
    border-radius: 50%;
    transform: none;
    transition: all 0.2s;
}

.mud-button-plus .mud-icon-root.mud-svg-icon {
    fill: #fff;
}

.mud-button-plus:hover {
    background: #02163D !important;
}

.mud-button-plus .mud-primary-text {
    color: #0C7CFF;
}

.mud-button-plus.open {
    transform: rotate(45deg);
    transition: all 0.2s;
}

.mud-primary-text {
    color: #0C7CFF !important;
}

.mud-checkbox .mud-icon-button {
    padding-left: 0;
}

.document-edit-mode {
    display: flex;
    align-items: center;
}

.document-edit-mode .mud-button-filled.mud-button-filled-primary {
    height: 40px;
    width: 40px;
}

.document-edit-mode .mud-button-filled.mud-button-filled-primary svg {
    margin-right: 0 !important;
}

.mud-overlay {
    /*z-index: 200;
    margin: 20px;*/
}

.mud-overlay-property {
    background: #fff;
    border-radius: 10px;
}

@media screen and (max-width: 600px) {
    .mud-overlay-property {
        padding: 15px;
    }
}

.mud-overlay-property .mud-table {
    border: 1px solid #DDD;
}

.MudOverlayHeader {
    background: #777777;
    color: #fff;
    border-radius: 4px 4px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px 5px 30px;
}

.MudOverlayHeader h3 {
    color: #fff;
    font-weight: 500;
}

.MudOverlayHeader .mud-icon-root.mud-svg-icon {
    fill: #fff;
}

.MudOverlayBody {
    padding: 30px;
}

@media screen and (max-width: 600px) {
    .MudOverlayBody {
        padding: 15px;
    }
}

@media screen and (max-width: 960px) {
    .mud-overlay .mud-overlay-content {
        margin-left: 70px;
        margin-right: 20px;
    }
}

.overlay-image-editor .mud-overlay-content {
    width: 50%;
}

.mud-tabs-toolbar {
    margin-bottom: 30px;
    border-radius: 10px;
}

.mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper {
    justify-content: space-between;
    width: 100%;
}

.mud-tooltip-root {
    width: 99%;
}

.ico-wrapper {
    vertical-align: middle;
}

.ico-wrapper svg {
    fill: #02163D;
}

.mud-simple-table table * tr > th {
    color: #02163D;
}

.mud-simple-table table * tr > td {
    border-bottom: none;
}

/* DATA GRID TABLE */
.mud-table.mud-table-list.mud-elevation-1 {
    border-radius: 0;
    box-shadow: none;
}

.mud-table-list .mud-table-root .mud-table-head .mud-table-cell {
    font-weight: bold;
}

.mud-table-list .mud-table-cell.data-actions {
    text-align: right;
}

.mud-table-list .mud-table-cell.data-actions .mud-button-filled-error.mud-icon-button:hover,
.mud-table-list .mud-table-cell.data-actions .mud-button-filled-error.mud-icon-button:focus-visible {
    background-color: rgb(242, 28, 13) !important;
}

.mud-table-list .mud-table-cell.data-actions .mud-button-filled.mud-button-filled-primary svg {
    margin-right: 0;
}

.mud-xs-table .mud-table-row .mud-table-cell:last-child {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    margin-bottom: 10px;
}

.mud-xs-table .mud-table-row .mud-table-cell:last-child .mud-chip {
    margin-bottom: 10px;
}

.mud-table-hover .mud-table-row {
    cursor: pointer;
}

/*PANDEN LIST TABLE*/
.mud-xs-table .pand-td.mud-table-cell:before {
    display: none;
}

/* PB TABLE ON MOBILE*/
@media screen and (max-width: 600px) {
    .dashboard .mud-table-pb.mud-xs-table .mud-table-body td:nth-child(2),
    .dashboard .mud-table-pb.mud-xs-table .mud-table-body td:nth-child(3),
    .dashboard .mud-table-pb.mud-xs-table .mud-table-body td:nth-child(4) {
        display: none;
    }

    .dashboard .mud-table-pb.mud-xs-table .mud-table-cell:before {
        display: none;
    }

    .mud-xs-table .mud-table-cell {
        padding: 5px 0;
        text-align: end;
    }

    .hide-labels-mobile td.mud-table-cell:before {
        display: none !important;
    }
}

/* ROLEN */
.c-table-rol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-flow: column;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.c-table-rol .document-edit-mode .mud-button-filled.mud-button-filled-primary {
    height: 20px;
    width: 20px;
}

.c-table-rol .document-edit-mode {
    display: inline-flex;
    margin-left: 20px;
}

.c-table-rol .mud-table-row {
    height: 45px;
}

.c-table-rol .mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 0 16px;
}

@media screen and (max-width: 600px) {
    .c-table-rol .mud-xs-table .mud-table-cell:before {
        display: none;
    }
}

.c-table-permissions {
    background-color: #F1F1F1;
}

.c-table-overflow {
    width: 100%;
    overflow-x: auto;
}

.mud-dialog .mud-dialog-title {
    background: #f44336;
    color: #fff;
    text-align: center;
}

.mud-dialog--text {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.mud-dialog--actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.mud-form-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
}

@media (max-width: 960px) {
    .mud-form-group {
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
}

.form-employee {
    display: flex;
    flex-direction: column;
}

@media (max-width: 1400px) {
    .form-employee {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }
}

.mud-form-cta {
    margin-top: 30px;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
}

@media (max-width: 960px) {
    .mud-form-cta {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0;
        row-gap: 30px;
    }
}

.mud-nr-container {
    width: 140px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.mud-nr-container .button-decrement,
.mud-nr-container .button-increment {
    background-color: #0C7CFF;
    color: #fff;
}

.mud-nr-container .button-decrement:hover,
.mud-nr-container .button-increment:hover {
    background-color: #02163D !important;
}

.mud-nr-container .button-decrement {
    border-radius: 5px 0 0 5px;
}

.mud-nr-container .button-increment {
    border-radius: 0 5px 5px 0;
}

.mud-nr-container .mud-input-control.mud-input-control-margin-dense {
    margin-top: 0;
    margin-bottom: 0;
}

.mud-nr-container .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 0 !important;
}

.mud-nr-container .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-nr-container div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 6px;
    padding-bottom: 6px;
}

.mud-nr-container .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0;
}

.mud-nr-container .mud-input > input.mud-input-root.mud-input-root-margin-dense, .mud-nr-container div.mud-input-slot.mud-input-root.mud-input-root-margin-dense {
    padding-top: 6px;
    height: 30px;
}

.FullWidth {
    width: 100%;
}

.FullWidth .mud-button-root {
    width: 50%;
}

.FullWidth .mud-button-filled .mud-button-label {
    color: #fff;
}

.mudTextLabel {
    color: #313131;
    font-weight: bold;
    margin-bottom: 7px;
}

.mud-form--settings {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 30px;
}

@media (max-width: 960px) {
    .mud-form--settings {
        display: block;
    }
}

.c-choice-wrapper {
    display: flex;
}

.c-choice-wrapper div:first-of-type {
    margin-right: 20px;
}

@media (max-width: 600px) {
    .c-choice-wrapper {
        display: block;
        margin-bottom: 20px;
    }

    .c-choice-wrapper .mud-icon-button {
        padding: 2px;
    }

    .c-choice-wrapper div:first-of-type {
        margin-right: 0;
    }
}

.c-post-code-wrapper {
    width: 30%;
}

@media (max-width: 960px) {
    .c-post-code-wrapper {
        width: 100%;
    }
}

.mud-form--branding {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    margin-top: 50px;
}

@media (max-width: 960px) {
    .mud-form--branding {
        grid-template-columns: 1fr;
        grid-gap: 0;
        row-gap: 20px;
        margin-top: 0;
    }
}

.grid.huur .mud-radio-group .mud-icon-button {
    padding-bottom: 5px;
    padding-top: 5px;
}

.mud-nr-container--wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.mud-nr-container--wrapper label {
    width: 120px;
}

.mud-nr-container--wrapper .mud-nr-container .mud-input > input.mud-input-root.mud-input-root-margin-dense {
    text-align: center;
    border-top: 1px solid #DDD;
}

.mud-drop-container {
    overflow-x: auto;
}

.mud-drop-container .mud-paper {
    background-color: #fff;
    border-right: 1px solid #DDD;
    border-radius: 0;
    padding: 0 20px;
}

.mud-drop-container .mud-paper h6 {
    color: #02163D;
    font-size: 14px;
    white-space: nowrap;
}

.mud-drop-container .mud-paper:first-child {
    padding-left: 0;
}

.mud-drop-container .mud-toolbar {
    flex-direction: row;
    flex-wrap: nowrap;
}

.mud-drop-item {
    margin-bottom: 10px;
    font-size: 14px;
    padding: 5px;
    border: 1px dotted transparent;
}

.mud-drop-item.disabled:hover {
    border: 1px dotted transparent;
}

.mud-drop-item:hover {
    border: 1px dotted #DDD;
}

@media screen and (max-width: 1280px) {
    .mud-overlay.overlay-property-structure .mud-overlay-content {
        width: 80%;
    }
}

.mud-drop-wrapper {
    width: 99%;
    overflow-x: auto;
}

.mud-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    grid-gap: 20px;
    align-items: stretch;
}

.mud-card {
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.mud-card.mud-paper {
    border-right: none;
    border-radius: 5px;
    padding: 0;
}

.mud-card {
    transition: all 0.5s;
}

.mud-card:hover {
    transform: scale(1.05);
}

.mud-card-content {
    padding: 10px;
}

.mud-card-content .mud-typography-h6 {
    font-size: 15px;
    color: #313131;
    font-weight: 600;
}

.mud-card-content .mud-typography-caption {
    color: #777777;
    display: block;
}

.mud-chip.mud-chip-size-small {
    font-size: 10px;
    height: 20px;
    margin-left: 0;
}

.mud-chip-content {
    text-transform: uppercase;
    font-weight: bold;
}

.mud-tabs-toolbar {
    margin-bottom: 30px;
    border-radius: 10px;
}

.mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper {
    justify-content: space-between;
    width: 100%;
}

.mud-popover-rooms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px;
    margin-left: 2px;
}

:root {
    --border-radius: 10px;
    --box-padding: 20px;
    --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
}

.main-layout .grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 30px;
}

@media (max-width: 960px) {
    .main-layout .grid {
        grid-template-columns: 1fr;
        grid-gap: 15px;
    }
}

@media (max-width: 1400px) {
    .main-layout .grid.employee {
        grid-template-columns: 1fr;
        grid-gap: 15px;
    }
}

.main-layout .grid.panden {
    /*display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0;*/
    display: block;
}

.main-layout .grid.pb {
    display: grid;
    grid-template-columns: 1fr;
}

.main-layout .grid.pb-fill-in {
    display: grid;
    grid-template-columns: 1fr 4fr;
}

@media (max-width: 960px) {
    .main-layout .grid.pb-fill-in {
        grid-template-columns: 1fr;
    }
}

.main-layout .grid.pb-preview {
    display: grid;
    grid-template-columns: 1fr;
}

.main-layout .grid > article {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--box-padding);
}

.main-layout .grid.dashboard > article:last-child {
    grid-column: 1/-1;
}

.main-layout .grid.settings {
    grid-template-columns: 1fr;
}

.main-content {
    padding: 30px;
    background-color: #F1F1F1;
    min-height: 100vh;
    height: auto;
}

@media (max-width: 960px) {
    .main-content {
        padding: 20px 15px 0 15px;
        height: auto;
    }
}

@media (max-width: 600px) {
    #meldingen {
        display: none;
    }
}

.main-layout .grid.pdf article:first-child {
    height: 80vh;
}

.main-layout .grid.pdf article:nth-child(2) {
    height: -moz-fit-content;
    height: fit-content;
}

:root {
    --submenu-margin: 80px;
}

.mud-drawer {
    background: #02163D;
    color: #fff;
    overflow: hidden;
}

.mud-drawer svg {
    fill: #fff;
    margin-right: 15px;
}

.mud-drawer svg:hover {
    fill: #0C7CFF;
}

.mud-drawer .mud-icon-root {
    transition: 0ms !important;
}

.mud-drawer .mud-nav-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.mud-drawer .mud-nav-item:hover {
    display: flex;
}

.mud-drawer .mud-nav-item:hover svg {
    fill: #0C7CFF;
}

.mud-drawer .mud-nav-item .mud-nav-link.active:hover {
    color: #fff;
}

.mud-drawer .mud-nav-item .mud-nav-link.active:hover svg {
    fill: #fff;
}

.mud-drawer .mud-nav-link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-left: 0;
    margin-inline-end: unset;
    color: #fff;
    white-space: nowrap;
    align-items: center;
}

.mud-drawer .mud-nav-link:hover {
    color: #0C7CFF;
}

.mud-drawer .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    margin-left: 0;
    margin-inline-start: 0;
}

.mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #fff;
    background: linear-gradient(90.9deg, #0C7CFF 0%, #0963CD 100%);
}

.mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link {
    color: #fff;
}

.mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link:hover {
    color: #0C7CFF;
}

.mud-drawer .ico-back {
    position: absolute;
    top: 30px;
    right: 10px;
}

.mud-drawer .ico-back svg {
    margin-right: 0;
    transform: rotate(-180deg);
    display: flex;
    justify-content: center;
}

.mud-drawer .logo-wrapper {
    margin: 90px auto 30px auto;
    min-height: 75px;
}

.mud-drawer .logo {
    display: none;
}

.mud-drawer .logo-small {
    display: block;
}

.mud-drawer-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    margin-bottom: 30px;
}

.mud-drawer-sideMenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 5px;
    flex-wrap: nowrap;
    white-space: nowrap;
    color: #fff;
}

.mud-drawer-sideMenu:hover {
    color: #0C7CFF !important;
}

.mud-drawer-sideMenu:hover svg {
    fill: #0C7CFF !important;
}

.c-arrow-indicator svg {
    fill: #fff !important;
    margin-left: 10px;
}

.mud-popover-provider .mud-drawer-popover.mud-paper {
    background-color: #02163D !important;
    color: #fff !important;
    margin-left: var(--submenu-margin);
    z-index: 50;
}

.mud-layout.mud-drawer-open-mini-lg-left .logo {
    display: block;
}

.mud-layout.mud-drawer-open-mini-lg-left .logo-small {
    display: none;
}

.mud-layout.mud-drawer-open-mini-lg-left .ico-back svg {
    transform: none;
}

.mud-popover--item {
    display: flex;
    color: #fff;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.mud-popover--item:hover {
    color: #0C7CFF;
}

.mud-popover--item:hover svg {
    fill: #0C7CFF;
}

.mud-popover--item select {
    margin-left: 0;
}

.mud-popover--item svg {
    fill: #fff;
}

.mud-popover--item svg:hover {
    fill: #0C7CFF;
}

.mud-popover--subitem {
    font-family: "Poppins";
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 130px;
    text-wrap: wrap;
    text-align: left;
}

.menuOpen {
    --submenu-margin: 250px;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 600px) {
    .mud-popover-provider .mud-popover {
        z-index: 60 !important;
    }

    .menuOpen {
        --submenu-margin: 55px;
    }
}

.sub-menu-arrow {
    position: absolute;
    left: -8px;
    bottom: 10px;
}

/* SETTINGS WITH SUBMENU */
.mud-drawer .setting-sub-menu svg {
    fill: #fff;
}

.setting-sub-menu .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-left: 45px;
    padding-inline-start: 45px;
}

.mud-drawer .mud-nav-group.setting-sub-menu .mud-nav-link:hover svg {
    fill: #0C7CFF;
}

.mud-drawer .mud-nav-group.setting-sub-menu .mud-nav-link.active:hover svg {
    fill: #fff;
}

.mud-popover--subtitle {
    font-size: 12px;
}

.mud-alert-outlined-error {
    border: none;
    padding: 0;
}

.mud-timeline .mud-card {
    box-shadow: none;
}

.mud-timeline .mud-card:hover {
    transform: none;
}

.mud-timeline.mud-timeline-vertical .avatar {
    position: absolute;
    left: -75px;
    top: 15px;
    z-index: 10;
}

.mud-timeline.mud-timeline-vertical .mud-timeline-item-dot {
    display: none;
}

@media (max-width: 600px) {
    .mud-timeline-horizontal.mud-timeline-position-top .mud-timeline-item-content {
        display: none;
    }
}

.mud-timeline-horizontal .mud-timeline-item .mud-timeline-item-divider {
    min-height: 45px;
}

.mud-timeline-horizontal {
    margin-bottom: 50px;
}

@media (max-width: 600px) {
    .mud-timeline-horizontal {
        margin-bottom: 10px;
    }
}

@media (max-width: 600px) {
    .mud-timeline-horizontal.mud-timeline-position-top::before {
        top: 23px;
        bottom: auto;
    }
}

.FillInMenu {
    min-width: 280px;
}

@media (max-width: 600px) {
    .FillInMenu {
        height: 300px;
        overflow: scroll;
        min-width: auto;
    }
}

.FillInMenu .mud-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.FillInMenu .mud-nav-header .mud-button-root.mud-icon-button p {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.FillInMenu .mud-drop-item {
    margin-bottom: 5px;
    font-size: 14px;
    padding: 5px 0;
    border: 1px dotted transparent;
}

.FillInMenu .mud-nav-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #F1F1F1;
    padding: 15px;
    border-radius: 10px;
    gap: 15px;
    margin-top: 30px;
}

.FillInMenu .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    background-color: transparent;
}

.FillInMenu .mud-nav-link .mud-nav-link-text {
    margin-left: 0;
    margin-inline-start: 0;
}

.FillInMenu .mud-nav-group button {
    display: flex;
    flex-direction: row-reverse;
    padding-left: 0;
}

.FillInMenu .mud-nav-group {
    width: 99%;
    overflow: hidden;
}

.FillInMenu .mud-nav-group .mud-nav-link:hover {
    color: #0C7CFF;
}

.FillInMenu .mud-nav-group .mud-nav-link:hover .mud-icon-root {
    fill: #0C7CFF;
}

.FillInMenu .mud-nav-group .mud-nav-link .mud-nav-link-text {
    font-weight: bold;
    font-size: 17px;
}

.FillInMenu .mud-nav-group .mud-collapse-container .mud-collapse-wrapper .mud-nav-link .mud-nav-link-text {
    font-weight: normal;
}

.FillInMenu .mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-left: 25px;
    padding-inline-start: 25px;
}

.FillInMenu .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: transparent;
}

.FillInMenu .mud-nav-link.mud-ripple.mud-expanded {
    background-color: transparent;
}

.FillInMenu .c-pand--edit .mud-button-plus {
    padding-left: 3px;
}

.FillInMenu .c-pand--edit .mud-button-min {
    padding: 0;
}

.FillInMenu .c-pand--edit .mud-button-add {
    padding: 0;
    margin-right: 5px;
}

.c-menu--item {
    display: flex;
    justify-content: space-between;
}

.c-menu--item .mud-drop-container {
    overflow-x: unset;
}

.c-menu--subitem {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-left: 10px;
}

.c-menu--subitem .c-menu--icons {
    margin-top: 0;
}

.c-menu--subitem label {
    margin-right: 20px;
}

.c-menu--icons {
    display: flex;
    align-items: center;
    margin-top: 10px;
    position: absolute;
    right: 0;
    z-index: 10;
}

.c-menu--icons .c-ico-damage--light {
    position: absolute;
    top: 0px;
    right: 35px;
}

.c-menu--icons .c-ico-cleaning--light {
    position: absolute;
    top: 0px;
    right: 55px;
}

.c-add-new-owner-title {
    margin: 10px 16px 5px 16px;
}

.c-add-new-owner-link.mud-link.mud-link-underline-hover:hover, .c-add-new-owner-link.mud-link.mud-link-underline-hover:focus-visible {
    text-decoration: none;
}

.c-menu--position {
    margin-right: -3px;
    margin-top: 8px;
}

.mud-expand-panel .mud-expand-panel-header {
    background: #F1F1F1;
    border-radius: 10px;
    display: flex;
    flex-direction: row-reverse;
    min-height: 38px;
    padding-top: 5px;
    padding-bottom: 5px;
}

@media (max-width: 600px) {
    .mud-expand-panel .mud-expand-panel-header {
        padding: 0 10px;
    }
}

.mud-expand-panel.mud-panel-expanded .mud-expand-panel-header {
    background: #F1F1F1;
    border-radius: 10px 10px 0 0;
}

.mud-expansion-panels .mud-collapse-container.mud-collapse-entered {
    border: 1px solid #DDD;
    border-radius: 0 0 10px 10px;
}

.mud-expand-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
}

.mud-expand-panel-title p {
    color: var(--mud-palette-text-primary);
}

.mud-expand-panel-title > div {
    align-items: center;
}

.mud-expand-panel .mud-expand-panel-content {
    padding: 20px;
}

@media (max-width: 600px) {
    .mud-expand-panel .mud-expand-panel-content {
        padding: 10px;
    }
}

/* PREVIEW MODE*/
.pb-preview .mud-expand-panel.main .mud-expand-panel-header {
    background-color: #F1F1F1;
}

.pb-preview .mud-expand-panel.main.mud-expand-panel--subitem .mud-expand-panel .mud-expand-panel-header {
    border-radius: 10px;
    background: rgba(175, 203, 235, 0.4);
    padding-top: 0;
    padding-bottom: 0;
    margin: auto;
    width: 97%;
}

@media (max-width: 600px) {
    .pb-preview .mud-expand-panel.main.mud-expand-panel--subitem .mud-expand-panel .mud-expand-panel-header {
        width: 100%;
    }
}

.pb-preview .mud-expand-panel.main.mud-expand-panel--subitem .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header {
    border-radius: 10px 10px 0 0;
    background: rgba(175, 203, 235, 0.4);
    padding-top: 0;
    padding-bottom: 0;
    margin: auto;
    width: 97%;
}

@media (max-width: 600px) {
    .pb-preview .mud-expand-panel.main.mud-expand-panel--subitem .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header {
        width: 100%;
    }
}

.pb-preview .mud-expand-panel-content > h3 {
    font-size: 16px;
    margin-top: 40px;
}

.pb-preview .mud-expand-panel-content > h3:first-child {
    margin-top: 0;
}

.pb-preview .pb-room-title.mb-5 {
    margin-top: 40px;
    margin-bottom: 10px !important;
}

.pb-preview .pb-room-title h3 {
    font-size: 16px;
}

.pb-preview .pb-room-title.mb-5:first-child {
    margin-top: 20px;
}

.pb-preview .mud-expansion-panels .mud-expand-panel:first-child {
    margin-top: 0 !important;
}

.pb-preview .mud-expansion-panels .mud-expand-panel:first-child .mud-expand-panel-content {
    padding-bottom: 30px;
    padding-top: 20px;
}

.pb-preview .mud-expand-panel--subitem .mud-expand-panel .mud-collapse-container {
    margin: auto;
    width: 97%;
}

@media (max-width: 600px) {
    .pb-preview .mud-expand-panel--subitem .mud-expand-panel .mud-collapse-container {
        width: 100%;
    }
}

.pb-preview .mud-expand-panel-title {
    padding-left: 0;
}

.pb-preview .mud-expand-panel-header p {
    color: #313131;
}

@media (max-width: 600px) {
    .pb-preview .mud-button-filled.mud-button-filled-primary {
        width: 100%;
    }
}

.pb-preview h3.mud-typography.mud-typography-h3.mb-5 {
    margin-bottom: 10px !important;
}

.pb-preview .mud-expansion-panels.mb-5 {
    margin-bottom: 10px !important;
}

.mud-expand-panel--property .mud-expand-panel {
    background-color: transparent;
}

.mud-expand-panel--property .mud-expand-panel .mud-expand-panel-header {
    background: #fff;
    min-height: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.mud-expand-panel--property .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header {
    background: #fff;
}

.mud-expand-panel--property .mud-expansion-panels .mud-collapse-container.mud-collapse-entered {
    border: none;
    background: #fff;
}

.mud-expand-panel--property .mud-expansion-panels .mud-collapse-container.mud-collapse-entered .c-property-structure {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 20px;
    align-items: stretch;
}

@media screen and (min-width: 1920px) {
    .mud-expand-panel--property .mud-expansion-panels .mud-collapse-container.mud-collapse-entered .c-property-structure {
        width: 50%;
    }
}

.mud-expand-panel--property .mud-expansion-panels .mud-collapse-container.mud-collapse-entered .c-property-structure label {
    width: 220px;
    color: #313131;
    font-weight: bold;
    font-size: 17px;
}

@media screen and (min-width: 1920px) {
    .mud-expand-panel--property .mud-expansion-panels .mud-collapse-container.mud-collapse-entered .c-pand--edit {
        width: 50%;
    }
}

.mud-expand-panel--property .mud-expansion-panels .mud-collapse-container.mud-collapse-entered .c-pand--edit > :first-child {
    width: auto;
}

@media (max-width: 600px) {
    .mud-expand-panel--property .mud-expansion-panels .mud-collapse-container.mud-collapse-entered .c-pand--edit {
        flex-direction: column;
    }
}

.mud-expand-panel--property .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text {
    color: #313131;
    font-weight: bold;
    font-size: 20px;
    padding-left: 10px;
}

.mud-expand-panel--property .mud-title-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mud-expand-panel--property .mud-title-content .c-title--wrapper {
    display: flex;
    align-items: center;
}

.mud-expand-panel--property .mud-title-content .c-icon--wrapper {
    margin-top: 8px;
    margin-left: 10px;
}

.legend .mud-treeview-item-arrow {
    width: 15px;
}

.legend .mud-treeview-item-content {
    padding: 4px 0px;
}

.legend .mud-treeview-subitem {
    margin-left: -20px;
}

.legend .mud-treeview-item-icon {
    position: absolute;
    right: 0;
}

/*!
 * 3rd Party Libraries
 * Copyright (c) 2022 ImmoPlanit
 */
.fancybox__container {
    z-index: 1110 !important;
}

/*# sourceMappingURL=immoplanit.css.map */