html, body {
    color: #333;
    font-size: 14px;
    font-family: 'Noto Sans', sans-serif;
    background-color: var(--bg-body);
    overflow-x: hidden;
}

h6 {
    color: var(--primary-color) !important;
    font-weight: 700;
}

.navbar-brand {
    color: #434343 !important;
    font-weight: normal;
    font-size: 14pt;
    font-family: "Segoe UI", sans-serif;

    display: inline-flex;
    gap: 1rem;
    align-items: center;

}

.rounded {
    border-radius: var(--border-radius) !important;
}

.bg-background{
    background-color: #F8F9FA;
}

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

.bg-grey {
    background-color: #EDEDED;
}

.bg-primary, .bg-one {
    background-color: var(--primary-color);
}

.bg-blue{
    background-color: var(--page-light-blue-color);
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-black {
    color: #000 !important;
}

.graph-header {
    font-family: "Source Sans Pro", sans-serif;
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}

.button-primary {
    color: var(--primary-color);
    cursor: pointer;
}

.border-purple {
    border: 1px solid #fcf7fb;
}

.border-primary, .border-one {
    border: 1px solid #fcf7fb;
}

.border-radius-none {
    border-radius: 0 !important;
}

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

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


.font-weight-bold {
    font-weight: bolder;
}

div {
    font-size: 16px;
}

.clickable {
    cursor: pointer;
}

nav {
    min-height: 80px;
    background-color: #fff;
}

.hover-item {
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

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

.nav-link {
    /* color: #fff; */
    color: var(--page-primary-color) !important;
    font-size: 12pt;
    margin-right: 1rem;
}

.navbar-brand, .navbar-brand:hover{
    color: var(--page-primary-color) !important;
    font-weight: normal;
    font-size: 14pt;
}


.font-weight-semibold{
    font-weight: 600 !important;
}

.bank-logo .partner-logo{
    min-height: 30px;
    width: 120px;
    margin: 0;
    padding: 0;
}

.bank-logo.result .partner-logo{
    min-height: 100px;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;

}

.partner-logo {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 150px;
    transform: translateY(-5px);
    max-height: 40px;
}

.logo {
    /* position: absolute; */
    /* left: 20%; */
    width: 220px;
}

#bank_email{
    width: auto;
    display: contents;
    color: var(--primary-color)
}

.background-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 40vh;
}

a {
    color: inherit;
    display: block;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

.divider {
    height: 1px;
    background-color: #333;
    width: 100%;
    margin: 20px 0;
}

.bg-yellow {
    background-color: #ffe395;
}

.bg-yellow > div:nth-of-type(even) {
    border-bottom: 2px solid #333;
}

.color-yellow {
    color: var(--primary-color);
}

.sub-label {
    font-size: 12px;
    color: #8f8f8f;
}

.text-gray {
    color: #808080;
}

@media only screen and (max-width: 768px) {
    footer {
        padding: 1rem;
    }
}

.white-text {
    color: #fff;
}

.wizard .nav-tabs {
    position: relative;
    margin-bottom: 0;
    border-bottom-color: transparent;
}

.wizard > div.wizard-inner {
    position: relative;
    margin-bottom: 25px;
    text-align: center;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: pointer;
    border: 0;
    border-bottom-color: transparent;
}

span.round-tab {
    width: 30px;
    height: 30px;
    display: inline-flex;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    font-size: 16px;
    color: grey;
    font-weight: 500;
    border: 1px solid #ddd;
    margin-right: 5px;
    justify-content: center;
    align-content: center;
    padding-top: 2px;
}

span.round-tab i {
    color: #555555;
}

.wizard li.active span.round-tab {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.wizard .nav-tabs > li.active > a {
    color: var(--primary-color);
}

.wizard .nav-tabs > li {
    width: 25%;
    text-align: center;
}

.wizard li:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0;
    border: 5px solid transparent;
    border-bottom-color: red;
    transition: 0.1s ease-in-out;
}

.wizard .nav-tabs > li a {
    cursor: pointer;
    margin: 0 auto;
    padding: 0;
    background-color: transparent;
    position: relative;
    top: 0;
    text-align: center;
}

.wizard .nav-tabs > li a:focus {
    border: none;
    outline: none;
}

.wizard .nav-tabs > li a i {
    font-style: normal;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    color: grey;
}

.wizard .nav-tabs > li a:hover {
    background: transparent;
}

.wizard .tab-pane {
    position: relative;
    padding-top: 20px;
}

.wizard h3 {
    margin-top: 0;
}

.step-head {
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 20px;
}

.term-check {
    font-size: 14px;
    font-weight: 400;
}

.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 40px;
    margin-bottom: 0;
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 40px;
    margin: 0;
    opacity: 0;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 40px;
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 2;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: 38px;
    padding: 0.375rem 0.75rem;
    line-height: 2;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0;
}

.footer-link {
    margin-top: 30px;
}

.list-content {
    margin-bottom: 10px;
}

.list-content a {
    padding: 10px 15px;
    width: 100%;
    display: inline-block;
    background-color: #f5f5f5;
    position: relative;
    color: #565656;
    font-weight: 400;
    border-radius: 4px;
}

.list-content a[aria-expanded=true] i {
    transform: rotate(180deg);
}

.list-content a i {
    text-align: right;
    position: absolute;
    top: 15px;
    right: 10px;
    transition: 0.5s;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #fdfdfd;
}

.list-box {
    padding: 10px;
}

.signup-logo-header .logo_area {
    width: 200px;
}

.signup-logo-header .nav > li {
    padding: 0;
}

.signup-logo-header .header-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-inline li {
    display: inline-block;
}

.pull-right {
    float: right;
}

/*-----------custom-checkbox-----------*/
/*----------Custom-Checkbox---------*/
input[type=checkbox] {
    position: relative;
    display: inline-block;
    margin-right: 5px;
}

input[type=checkbox]::before,
input[type=checkbox]::after {
    position: absolute;
    content: "";
    display: inline-block;
}

input[type=checkbox]::before {
    height: 16px;
    width: 16px;
    border: 1px solid #999;
    left: 0;
    top: 0;
    background-color: #fff;
    border-radius: 2px;
}

input[type=checkbox]::after {
    height: 5px;
    width: 9px;
    left: 4px;
    top: 4px;
}

input[type=checkbox]:checked::after {
    content: "";
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(-45deg);
}

input[type=checkbox]:checked::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

@media (min-width: 1680px) {
    .container-fluid.main-container {
        max-width: 1680px;
    }
}

@media (max-width: 600px) {
    .wizard .nav-tabs > li {
        width: 18%;
    }
}

@media (max-width: 992px) {
    .sign-content h3 {
        font-size: 40px;
    }

    .wizard .nav-tabs > li a i {
        display: none;
    }

    .signup-logo-header .navbar-toggle {
        margin: 0;
        margin-top: 8px;
    }

    .signup-logo-header .logo_area {
        margin-top: 0;
    }

    .signup-logo-header .header-flex {
        display: block;
    }
}

.wizard-container {
    background-color: #fff;
    border-radius: 5px;

}


.wizard-container h5 {
    font-weight: bold !important;
    color: var(--primary-color);
}

.input-group {
    margin-bottom: 1.2rem;
}

.input-group-text {
    background-color: #fff;
}

label {
    color: black;
}

.overview_checker {
    color: #333;
}

.card-header {
    background-color: #fff;
    padding: 0.5rem;
    font-size: 16px;
}

.accordion label {
    color: #000;
    font-size: 14px;
    display: none;
}

.accordion h2 button {
    font-weight: bold !important;
    font-size: 16px;
}

.accordion .input-group {
    margin: 1rem 0;
}

#step4 {
    background-color: transparent;
}

/*#step3 div {*/
/*    margin-top: 2rem;*/
/*}*/

/*#step3 h3, #step3 h2 {*/
/*    font-weight: bolder;*/
/*}*/

/*#step3 h2, #step3 h3, #step3 h5, #step3 label, #step3 span {*/
/*    color: #fff;*/
/*}*/

/*#step3 .next-step, #step3 .prev-step {*/
/*    background-color: #1e1538;*/
/*    color: #fff;*/
/*}*/

.middle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.middle div, .middle span {
    height: auto;
}

.page-not-found-container {
    margin: 12vh 0;
}

.content-wrapper h5 {
    font-weight: bold;
}

.border-none {
    border: none;
}

.result-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-color);
}

.filter-icon {
    color: var(--primary-color);
    position: absolute;
    right: 3%;
    top: 3%;
    z-index: 1000;
}

.wish-icon {
    color: var(--primary-color);
    cursor: pointer;
    position: absolute;
    right: 20px;
}

.graph-container {
    display: inline-block;
    position: relative;
    width: 100%;
}

#combograph, #barline {
    background-color: #fff;
}

#doughnut, #doughnut-belegbaar {
    max-height: 300px;
}

.next, .prev {
    cursor: pointer;
}

#purchase-block h3, .wizard-container h3, .wizard-container h4 {
    color: var(--primary-color);
    font-weight: bold;
}

#accordionExample h2 button {
    font-size: 14px !important;
}

.border-white {
    border: 1px solid #fff;
}

.btn-orange {
    background-color: var(--primary-color);
    color: #FFFFFF;
}

#legend-asset-income ul, #legend-investable ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#legend-asset-income ul li, #legend-investable ul li {
    font-size: 14px !important;
}

#legend-asset-income li span, #legend-investable li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 25px;
    border-radius: 5px;
    color: #000;
    font-size: 14px !important;
    font-weight: normal;
    border: 2px solid #fff;
    padding: 1rem 2rem;
}

.refresh {
    color: var(--primary-color);
    cursor: pointer;
}

.highcharts-legend-item.color-1 .bubble-label {
    background-color: #eed705;
}

.highcharts-legend-item.color-2 .bubble-label {
    background-color: var(--primary-color);
}

.highcharts-legend-item.color-3 .bubble-label {
    background-color: #89ac2c;
}

.highcharts-legend-item.color-4 .bubble-label {
    background-color: #309a59;
}

.highcharts-legend-item.color-5 .bubble-label {
    background-color: #0092a6;
}

.highcharts-legend-item.color-6 .bubble-label {
    background-color: #004f5a;
}

.highcharts-legend-item.color-7 .bubble-label {
    background-color: #af7ad7;
}

.highcharts-legend-item.color-8 .bubble-label {
    background-color: #7030a0;
}

.highcharts-legend-item.color-9 .bubble-label {
    background-color: #F23636;
}

.dropbtn {
    background-color: var(--primary-color);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: var(--primary-color);
}

.dropdown {
    position: relative;
    display: inline-block;
    z-index: 1000;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 250px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 0;
}

.dropdown-content td {
    padding: 1rem;
}

.slick-next.slick-arrow::before, .slick-prev.slick-arrow::before {
    color: #000;
}

.setting-table {
    font-size: 14px;
}

.setting-table td {
    cursor: pointer;
}

.max-h {
    height: 100vh !important;
}

.wizard-container label {
    font-size: 15px;
}

.wizard-container label img {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 15%;
    z-index: 4;
    padding: 5px;
    margin-top: -5px;
}

#toggle-edit-interest-risk {
    cursor: pointer;
    color: var(--primary-color);
}

.nav-button {
    width: auto;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    padding: 10px;
    display: inline-block;
}

.highcharts-legend-item .legend-css {
    padding: 5px 10px !important;
    color: #fff;
    margin-bottom: 15px;
    border-radius: 5px;
    font-weight: normal;
    font-size: 14px;
}

.partner-image {
    min-height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}



.slick-slide {
}

.partner-list {
    min-height: auto;
}


@media only screen and (max-width: 1500px) {
    .fa-2x {
        font-size: 1.5em;
    }
}

.switch {
    display: inline-block;
    position: relative;
    width: 45px;
    height: 20px;
    border-radius: 20px;
    background: #dfd9ea;
    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    cursor: pointer;
    margin: 0 .5rem;
}

.switch::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 17px;
    height: 17px;
    background: #fafafa;
    border-radius: 50%;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch:active::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(128, 128, 128, 0.1);
}

input:checked + .switch {
    background: var(--primary-color);
}

input:checked + .switch::before {
    left: 27px;
    background: #fff;
}

input:checked + .switch:active::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(0, 150, 136, 0.2);
}

.bubble-label {
    font-size: 14px;
    padding: .25rem;
    margin: .5rem;
    font-weight: normal;
    color: #fff;
}



.hidden {
    display: none !important;
}

#purchases {
    display: flex;
    flex-direction: column;
}

.risk_wrapper {
    overflow: hidden;
    padding-top: 2px;
    margin-bottom: 3px;
    transition: max-height .5s linear;
    max-height: 0;
}

.risk_wrapper.active {
    max-height: 200px;
}

.custom-purchase-title-wrapper {
    overflow: hidden;
    transition: max-height 0.5s linear;
    max-height: 0;
}

.custom-purchase-title-wrapper.active {
    max-height: 200px;
}


.cost-label {
    display: none;
    justify-content: center;
    align-items: center;
    height: calc(2.25rem + 2px);
    padding-left: 10px;
    background-color: #ffffff;
}

.cost-label.active {
    display: flex;
}


@media print {
    .pagebreak {
        page-break-after: always;
        clear: both;
    }

    /* page-break-after works, as well */
    .col-4, .col-5, .col-6, .col-7, .col-8 {
        float: left;
    }

    p {
        font-size: 10pt;
    }


    .clear {
        clear: both;
    }
}

.overview-header-right {
    min-height: 130px;
}

.teaser {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}

.income-block > .income:first-child > .delete-income {
    /*display: none;*/
    /*pointer-events: none;*/
}

#insight-income-chart-total,
#insight-income-chart-debt {
    font-size: 20px;
}

.income-wrapper {
    padding-bottom: 15px;
}

.income-wrapper .add-new-income {
    position: absolute;
    right: 20px;
    top: 2px;
    font-size: 18px;
}

.income-wrapper .delete-income {
    position: absolute;
    right: -25px;
    font-size: 15px;
    margin-top: .5rem;
    color: #808080;
    border-radius: 8px;
}

#yearly-payments .fa-solid.fa-trash, #single-payments .fa-solid.fa-trash {
    right: -10px !important;
}

.euro-wrapper {
    position: relative;
}

.euro-wrapper input {
    padding-left: 20px;
}

.euro:before {
    content: "€";
    position: absolute;
    left: 10px;
    top: 47%;
    transform: translateY(-50%);
    font-size: 14px;
    z-index: 5;
}

.euro .asset-input,
.euro .income-asset {
    padding-left: 20px;
}

.group {
    overflow: hidden;
    max-height: 100px;
    transition: all .4s linear;
}

.input-group-text {
    font-size: 12px;
}

.group input, .group .input-group-text {
    border-color: #CED4DA;
}

.group.hide-group {
    max-height: 0;
    background-color: transparent;
}

.group.hide-group input, .group.hide-group .input-group-text {
    border-color: transparent;
}

.group-middle.first-child .group.hide-group {
    /*padding-top: 0;*/
    /*margin-top: 0;*/
}

.group-last .group {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.group-middle.first-child .group {
    padding-top: 10px;
    margin-top: 5px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.group-total {
    padding-left: 3px;
    font-size: 14px;
}

.popover-trigger {
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    z-index: 5;
}

input[type='number'] {
    -moz-appearance: textfield;
}

input.cost[type='number'] {
    -moz-appearance: unset;
    padding-right: 0;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.popover-body a {
    text-decoration: underline;
    text-align: end;
}

.popover-body ul {
    padding-left: 15px;
}

.group-layout {
    cursor: pointer;
    margin-bottom: 15px;
}

.group-last {
    margin-bottom: 10px;
}

.group-last .input-group {
    margin-bottom: 10px;
}

.input-col {
    padding-left: 3px;
    font-size: 14px;
    border: 1px solid rgb(206, 212, 218);
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: start;
    border-radius: 4px;
}

.overview-data {
    left: 0;
    transition: left .4s linear;
}

.overview-data.slideout {
    left: -60%;
    overflow: hidden;
}

.can-fold,
.partner-field {
    opacity: 1;
    max-height: 100%;
    transition: max-height .4s linear, padding .4s linear, opacity .4s linear;
}

.can-fold.folded,
.partner-field.folded {
    opacity: 0;
    max-height: 0;
    padding: 0 15px;
}


.card {
    perspective: 600px;
    position: relative;
}

.card.is-switched .card__wrapper {
    -webkit-animation: rotate 0.5s linear both;
    animation: rotate 0.5s linear both;
}

.card__wrapper {
    transform-style: preserve-3d;
    -webkit-animation: rotate-inverse 0.5s linear both;
    animation: rotate-inverse 0.5s linear both;
}

.card__side {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.card__side.is-active {
    position: static;
}

.card__side--back {
    transform: rotateY(180deg);
}

@-webkit-keyframes rotate {
    0% {
        transform: rotateY(0);
    }
    70% {
        transform: rotateY(200deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }
    70% {
        transform: rotateY(200deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

@-webkit-keyframes rotate-inverse {
    0% {
        transform: rotateY(180deg);
    }
    70% {
        transform: rotateY(-20deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes rotate-inverse {
    0% {
        transform: rotateY(180deg);
    }
    70% {
        transform: rotateY(-20deg);
    }
    100% {
        transform: rotateY(0);
    }
}

* {
    box-sizing: border-box;
}

.card {
    border: none;
    margin: 0;
}

.card__side {

}

.card__side--back {
    background-color: white;
}

.btn:active {
    transform: translate(0px, 5px);
}

.flipcard {
    display: inline-block;
    cursor: pointer;
}

.lds-dual-ring {
    display: inline-block;
    width: 128px;
    height: 128px;
    margin-bottom: 2rem;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 128px;
    height: 128px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid lightgrey;
    border-color: lightgrey transparent lightgrey transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 100%;
    position: absolute; /* Stay in place */
    z-index: 19; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0); /* Black fallback color */
    background-color: rgba(255, 255, 255, 1); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


@media print {
    @page {
        size: landscape
    }
}

.extra-small-text {
    font-size: 7pt;
}

.extra-extra-small-text td {
    font-size: 6pt;
    padding: 5px 2px !important;
    text-align: center;
}

.small-text {
    font-size: 9pt;
}

.small-text span {
    font-size: 9pt;
}

.medium-text h3 {
    font-weight: bold;
}

.medium-text h5 {
    font-weight: bold;
    font-size: 12pt;
}

.medium-text p, .medium-text li, .medium-text {
    font-size: 10pt;
}

.report-text {
    font-size: 10pt !important;
}

/*.modal-lg {*/
/*    overflow-y: scroll;*/
/*    max-height: 85vh;*/
/*    background-color: #fff;*/
/*    margin: auto;*/
/*    top: 7%;*/
/*    position: relative;*/
/*}*/

/*.modal-content {*/
/*    !*height: 80vh !important;*!*/
/*    !*padding: 10px;*!*/
/*}*/

.modal-body a {
    text-decoration: underline;
}
.modal-body a:hover {
    color: var(--primary-color);
}

.modal-body ul {
    padding-left: 15px;
}

@media only screen and (min-width: 1300px) {
    .col-12.col-md-6.col-lg-4.col-xl-3.my-2 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

@media only screen and (min-width: 1500px) {
    .col-12.col-md-6.col-lg-4.my-2 {
        flex: 0 0 16.66666667% !important;
        max-width: 16.66666667% !important;
    }
}

.platform-body {
    cursor: pointer;
    height: 50px;
}

.smaller-text{
    font-size: 14px;
}

.selected {
    background-color: lightgrey;
}

.hide {
    visibility: hidden
}

.start-btn {
    transform: translateY(10px);
    position: relative;
    z-index: 10000;

}

.potential-development-i {
    position: absolute;
    left: 65px;
    bottom: 25px;
}

.my-investable-capital-i {
    position: absolute;
    right: 40px;
    top: 60px;
}

/*.nav-steps {*/
/*    position: absolute;*/
/*    top: 25px;*/
/*    z-index: 12;*/
/*}*/

/*.nav-steps.next-step {*/
/*    right: 30px;*/
/*}*/

/*.nav-steps.prev-step {*/
/*    left: 30px;*/
/*}*/

@media (max-width: 1199px) {
    .group-button.float-right {
        float: unset !important;
        margin: 0 auto;
    }
}

.popover-goal {
    position: absolute;
    right: 15px;
    top: 0;
}

.popover-gauge {
    position: absolute;
    right: 25px;
    top: 15px;
}


.lettered-list {
    list-style: lower-latin;
    padding-left: 15px;
}

.debt-wrapper {
    max-height: 200px;
    overflow: hidden;
    transition: all 5s linear;
}

.debt-wrapper.hidden {
    max-height: 0;
}

.yellow_row {
    background-color: #fcf7e5;
}

table.small-table {
    width: 90%; /* Adjust the width of the table */
    border-collapse: collapse; /* Merge cell borders */
}

/* Apply these styles to table header cells (th) inside the table with the class "small-table" */
table.small-table th {
    padding: 5px 1px; /* Adjust the padding of header cells */
    background-color: #f2f2f2; /* Light gray background color for header cells */
    text-align: left; /* Align header cell text to the left */
    font-size: 8px; /* Adjust the font size of header cells */
    text-align: center;
}

/* Apply these styles to table data cells (td) inside the table with the class "small-table" */
table.small-table td {
    padding: 2px; /* Adjust the padding of data cells */
    border: 1px solid #ddd; /* Add a thin border to data cells */
    text-align: left; /* Align data cell text to the left */
    font-size: 11px; /* Adjust the font size of data cells */
}

#assets-in-numbers-table td {
    font-size: 6pt;
    padding: 7px 5px !important;
    border: 1px solid #fff;
}

.blue-table th, .blue-table td {
    border: 1px solid #fff;
    background-color: #d6dce5 !important;
}


.pointer {
    /*width: 100%;*/
    height: 40px;
    position: relative;
    background: #d6dce5;
}

.pointer p {
    position: relative;
    left: 5%;
    font-size: 6pt !important;
    top: 50%;
    transform: translateY(-50%);
}

.pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
}

.pointer:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid #d6dce5;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

.text-link {
    color: #0074D9;
}

.machine {
    width: 15vmin;
    fill: var(--primary-color);
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
}

.small-shadow, .medium-shadow, .large-shadow {
    fill: rgba(0, 0, 0, 0.05);
}

.small {
    -webkit-animation: counter-rotation 2.5s infinite linear;
    -moz-animation: counter-rotation 2.5s infinite linear;
    -o-animation: counter-rotation 2.5s infinite linear;
    animation: counter-rotation 2.5s infinite linear;
    -webkit-transform-origin: 100.136px 225.345px;
    -ms-transform-origin: 100.136px 225.345px;
    transform-origin: 100.136px 225.345px;
}

.small-shadow {
    -webkit-animation: counter-rotation 2.5s infinite linear;
    -moz-animation: counter-rotation 2.5s infinite linear;
    -o-animation: counter-rotation 2.5s infinite linear;
    animation: counter-rotation 2.5s infinite linear;
    -webkit-transform-origin: 110.136px 235.345px;
    -ms-transform-origin: 110.136px 235.345px;
    transform-origin: 110.136px 235.345px;
}

.medium {
    -webkit-animation: rotation 3.75s infinite linear;
    -moz-animation: rotation 3.75s infinite linear;
    -o-animation: rotation 3.75s infinite linear;
    animation: rotation 3.75s infinite linear;
    -webkit-transform-origin: 254.675px 379.447px;
    -ms-transform-origin: 254.675px 379.447px;
    transform-origin: 254.675px 379.447px;
}

.medium-shadow {
    -webkit-animation: rotation 3.75s infinite linear;
    -moz-animation: rotation 3.75s infinite linear;
    -o-animation: rotation 3.75s infinite linear;
    animation: rotation 3.75s infinite linear;
    -webkit-transform-origin: 264.675px 389.447px;
    -ms-transform-origin: 264.675px 389.447px;
    transform-origin: 264.675px 389.447px;
}

.large {
    -webkit-animation: counter-rotation 5s infinite linear;
    -moz-animation: counter-rotation 5s infinite linear;
    -o-animation: counter-rotation 5s infinite linear;
    animation: counter-rotation 5s infinite linear;
    -webkit-transform-origin: 461.37px 173.694px;
    -ms-transform-origin: 461.37px 173.694px;
    transform-origin: 461.37px 173.694px;
}

.large-shadow {
    -webkit-animation: counter-rotation 5s infinite linear;
    -moz-animation: counter-rotation 5s infinite linear;
    -o-animation: counter-rotation 5s infinite linear;
    animation: counter-rotation 5s infinite linear;
    -webkit-transform-origin: 471.37px 183.694px;
    -ms-transform-origin: 471.37px 183.694px;
    transform-origin: 471.37px 183.694px;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@-webkit-keyframes counter-rotation {
    from {
        -webkit-transform: rotate(359deg);
    }
    to {
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes counter-rotation {
    from {
        -moz-transform: rotate(359deg);
    }
    to {
        -moz-transform: rotate(0deg);
    }
}

@-o-keyframes counter-rotation {
    from {
        -o-transform: rotate(359deg);
    }
    to {
        -o-transform: rotate(0deg);
    }
}

@keyframes counter-rotation {
    from {
        transform: rotate(359deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.loading-text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    color: #000;
    font-weight: bold;
}

span.auto {
    display: none;
    width: 100px;
    font-size: 56px;
    position: absolute;
    transition: transform 3.4s ease-in-out 1s, opacity 1s 3.4s;
    transform: translate(25vw, 6vh);
    opacity: 1;
}

.auto.move {
    transform: translate(0px, 6vh);

    opacity: 0;
}

span.mail-icon {
    display: none;
    font-size: 25px;
    font-weight: bold;
    position: absolute;
    transform: rotate(180deg);
    transition: transform 1s linear, opacity .05s .6s;
    transform: translate(27vw, 3vh);

    opacity: 1;
}

.mail-icon.move {
    transform: translate(27vw, 8vh);

    opacity: 0;
}

.goal-input input, .goal-input:before {
    font-size: 14pt;
}

.goal-input input {
    text-align: right;
}

#flex-container {
    display: flex;
    flex-direction: column;
}

.goal-text {
    font-size: 14px
}

@media (min-width: 1200px) {
    #flex-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #flex-container > div:nth-child(2) {
        order: 1; /* Default order */
    }
}

@media (max-width: 1200px) {
    #flex-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #flex-container > div:nth-child(3) {
        order: 1; /* Default order */
    }
}

#debug-import,
#reset-confirm,
#custom-confirm {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 10;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-align: center;
    padding: 50px 0;
    border-radius: .3rem;
    /* Small box shadow on all sides*/
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: all .2s linear;
    display: none !important;
}

#debug-import.active,
#reset-confirm.active,
#custom-confirm.active {
    display: flex !important;
    opacity: 1;
}


.inheritance_wrapper {
    cursor: pointer;
}

.inheritance_wrapper.hidden {
    display: none;
}

input + .icon {
    display: none;
}

input.calculated {
    pointer-events: none;
    background-color: rgba(240, 236, 236, 0.36);
}

input.calculated + .icon {
    /*cursor: help;*/
    display: block;
    height: 1em;
    width: 1em;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateX(50%) translateY(-50%);
}

input.calculated + .icon i {
    display: block;
    text-align: center;
}

.footer a{
    display: inline
}

.footer-container .footer{
    padding: 3rem;
}

@media only screen and (max-width: 992px) {
    .footer{
        margin-bottom: 0 !important;
    }
    .footer-container, .footer-container div{
        background-color: #F2F8FD;
    }

    .footer-container .footer{
        padding: 0rem;
    }

    .footer a, .copyright{
        text-align: center;
        font-size: 13px;
    }
}

@media only screen and (max-width: 600px) {
    .navbar-brand.transform-btn{
        width: 70%;
    }

    .navbar-brand.transform-btn span, .navbar-brand.transform-btn .partner-logo{
        float: left;
    }

    .navbar-brand.transform-btn .partner-logo{
        width: 100px;
    }
}

@media only screen and (max-width: 454px) {
    .navbar-brand.transform-btn .partner-logo{
        padding: .25rem 0;
    }
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #353A62;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 15px;
    z-index: 10000;
}

.sidebar a {
    padding: 1rem 3rem;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    color: #f1f1f1;
}

.open-btn {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 5px;
}

.open-btn img {
    width: 40px;
    height: 40px;
}

.sidebar span{
    font-size: 16px;
}

@media screen and (max-width: 450px) {
    .sidebar a {padding: 1rem 1.5rem;font-size: 14px;}

    .sidebar span{
        margin-bottom: 2rem;
    }
}

@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

canvas{
    max-height: 44vh !important;
}

#future-development-chart{
    height: 600px !important;
    max-height: 600px !important;
}

#feasibility-chart{
    height: 500px !important;
}

@media screen and (min-width: 767px) {
    #optimized-text {
        display: none;
    }
}

#insight-income-chart{
    min-height: 500px !important
}

table.medium-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}

#bank-result{
    position: relative;
    z-index: 11;
}

.cfper-result-card {
    display: block;
    margin-bottom: 0.75rem;
    cursor: pointer;
    border: 1px solid #dee2e6 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cfper-result-card:hover {
    border-color: var(--primary-color);
}

.cfper-result-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.cfper-result-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cfper-result-card .card-body {
    padding: 0.75rem 1rem;
}

.cfper-result-card-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cfper-result-card-content {
    flex: 1;
    min-width: 0;
}

.cfper-result-photo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #EDEDED;
}

.cfper-result-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 1.1rem;
}

.cfper-result-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cfper-result-name {
    color: #333;
}

.cfper-result-distance {
    background-color: var(--primary-color);
    color: #fff;
    padding: 0.25rem 0.6rem;
    white-space: nowrap;
}

.cfper-result-company {
    color: #333;
    font-size: 0.875rem;
}

.cfper-result-address {
    color: #6c757d;
    font-size: 0.875rem;
}

.cfper-result-link {
    font-size: 0.875rem;
}