/*
* Palette: #242424 = dark structural + navbar + main background; #ffffff = card background; #242424 = red accent.
* Chart legend dots below are hard-coded (black / grey / red) to match the Chart.js doughnut series (maintenance / amortization / interests);
* on a partner simulator they take #a9a9a9 / #cf182f / #29b6f6, like its doughnuts.
*/

/*
* The v2 charter pins its own primitives to font-family: var(--font-family-base)
* (html/button/input/select/textarea, .rya-field, .rya-radio-group, .rya-check,
* .rya-switch, .select2-container...). Such an explicit declaration always beats
* the Montserrat inherited from body, so retarget the token itself instead of
* patching selectors one by one.
*/
:root {
    --font-family-base: "Montserrat", Sans-serif;
}

html {
    font-size: 100%
}

main, footer {
    padding-left: 0;
}

/* v2: the reset above also wiped the page gutter, which the charter carries as padding on
   main, so the card touched the left edge on mobile while keeping its right gutter.
   Put the charter gutter back; both variables are undefined in v1, where this stays 0. */
main {
    padding-left: calc(var(--layout-left-offset, 0px) + var(--main-gutter-inline, 0px));
}

/* v2: the charter paints buttons, sliders and accents from its own variables, set from the
   workzone colours. A partner simulator carries .hypoadv-partner-theme and its stylesheet fills
   the placeholder below with the partner colours; the website stylesheet leaves it empty. :root
   rather than the page wrapper, so the modals appended outside it follow too. */
:root:has(.hypoadv-partner-theme) {
    
}

/* The charter gives the submit of a modal the success green; on a partner simulator it takes
   the partner colour like the buttons of the page. */
/* The outlined buttons below draw with #242424, which a partner sheet uses as the page
   background: white on white, only the hover border showed them. On a partner simulator they
   take the charter accent (the partner dominant colour), hover and focus included. */
:root:has(.hypoadv-partner-theme) a.btn,
:root:has(.hypoadv-partner-theme) button.btn {
    border-color: var(--main-color);
    color: var(--main-color);
    -webkit-text-fill-color: var(--main-color);
}

:root:has(.hypoadv-partner-theme) .modal .modal-footer .button-valid,
:root:has(.hypoadv-partner-theme) .modal .modal-footer .submitBtn {
    --btn-flat-accent: var(--main-color);
    --btn-flat-fill: color-mix(in srgb, var(--main-color) 85%, #000);
    --btn-flat-on: #fff;
}

body {
    font-size: 0.8rem;
    font-family: "Montserrat", Sans-serif;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.7em;
    color: rgba(0,0,0,0.87);
    background-color: #242424;
}

a {
    color: #242424;
}

.page-footer a{
    color: rgba(255,255,255,0.8);
}

@media only screen and (min-width: 993px){
    .container {
        width: 90%;
    }
}

@media only screen and (max-width : 900px){
    div.top-nav .nav-wrapper {
        margin-left: 12px;
        margin-right: 12px;
    }
}

@media only screen and (min-width : 900px){
    div.top-nav .nav-wrapper {
        margin-left: 5%;
        margin-right: 5%;
    }
}

header {
    background-color: #242424;
    letter-spacing: 0;
}

/* box-shadow: drops the kernel `.navbar` 1px bottom separator, which drew a line
 * between the top bar and the page on the front. */
div.top-nav {
    background-color: #242424;
    line-height: 125px;
    height: 125px;
    box-shadow: none;
}

div.top-nav ul {
    background-color: #242424;
}

/* The front top bar is a .navbar (+ mobile .sidenav drawer) coloured by the core
   theme via var(--nav-bg). Force it to the main colour so navbar and main match.
   The .top-nav / .right-aligned compounds raise specificity above the core
   `.navbar { background: var(--nav-bg) }` so this wins whatever the load order. */
.navbar, .navbar.top-nav, .sidenav, .sidenav.right-aligned {
    background-color: #242424;
}
/* The front is pinned to the light theme (see Ui/Html.php::getOpenHtmlAttributes),
   which resolves --text-primary to a dark value; on the navy brand chrome (top bar,
   drawer, footer) that would make the text unreadable. Force every label/icon on
   those navy fills white -- including the language dropdown, which sits on the same
   navy fill. Coloured accents (footer heading underlines) are borders, so untouched. */
.navbar,
.navbar a,
.navbar .material-symbols-outlined,
.sidenav,
.sidenav a,
.sidenav .material-symbols-outlined,
footer.page-footer,
footer.page-footer a,
footer.page-footer span,
footer.page-footer p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* Active menu item: v2 sets -webkit-text-fill-color (which overrides `color` for
 * the rendered text) to a dark value, so the current page link vanishes on the
 * dark bar. Force white + bold; text-fill-color must be set, not just color. */
.navbar a,
.sidenav a {
    text-transform: uppercase !important;
}
.navbar a.selected,
.sidenav a.selected {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: bold !important;
}

.navbar-fixed {
    height: 125px;
}

/* v2: the kernel sizes the whole top bar on --app-header-height (64px): the bar
   itself, its flex nav-wrapper, the menu list and the logo cap (height - 24px). The
   front bar is 125px tall, so declare it here: the wrapper then fills the bar and its
   align-items: center puts the logo and the menu in the middle, as in V1 - instead of
   both sitting in a 64px strip at the top of the bar. */
div.top-nav {
    --app-header-height: 125px;
}

/* No margin-top: the flex wrapper centres the logo; (125 - 60) / 2 lands where V1's
   33px top margin did. */
div.top-nav .brand-logo {
    max-width: 60%;
    height: 60px;
    margin-top: 0;
    margin-left: 24px;
}

/* V1 menu ends on the wrapper edge; the logo side keeps the kernel 12px padding, which
   stands in for the 12px left padding V1 put on the logo itself. */
div.top-nav .nav-wrapper {
    padding-right: 0;
}

div.top-nav, div.top-nav .nav-wrapper i, div.top-nav a.sidenav-trigger, div.top-nav a.sidenav-trigger i {
    height: 125px;
    line-height: 125px;
}

/* v2: the logo image has no size of its own in the flex top bar (an SVG in a shrink-to-fit
   box collapses to 0 in Chromium); give it the brand-logo height (60px, 50px on small
   screens, as in V1) and derive the width. max-width / max-height lift the kernel caps
   (160px wide, bar height - 24px), which squeezed or shrank it. */
div.top-nav .brand-logo .rya-topbar-brand-img {
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
}

/* v2: the top bar is a flex row, so the float below is ignored and the menu button sat
   right after the logo; an auto margin pushes it to the right edge. No effect on a float. */
div.top-nav a.sidenav-trigger {
    margin-left: auto;
}

img.logo-advisor-homepage {
    width: 60%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

@media only screen and (max-width: 992px) {
    div.top-nav .brand-logo {
        -webkit-transform: none;
        transform: none;
        left: 0;
    }
    div.top-nav {
        --app-header-height: 65px;
        line-height: 65px;
        height: 65px;
    }
    div.top-nav .nav-wrapper {
        padding-right: 12px;
    }
    .navbar-fixed {
        height: 65px;
    }
    div.top-nav, nav .nav-wrapper i, div.top-nav a.sidenav-trigger, div.top-nav a.sidenav-trigger i {
        height: 65px;
        line-height: 65px;
    }
    /* No left margin: the bar already carries the page gutter, so the logo lines up with
       the content below instead of sitting 24px further in. */
    div.top-nav .brand-logo {
        max-width: 60%;
        height: 50px;
        margin-top: 0;
        margin-left: 0;
    }
    img.logo-advisor-homepage {
        height: 50px;
    }
}

div.top-nav ul a {
    text-transform: uppercase;
    font-size: 0.65rem;
}

.sidenav li > a {
    text-transform: uppercase;
}

div.top-nav a {
    color: #f4f5f7;
}

div.top-nav ul li a {
    color: #f4f5f7;
}

div.top-nav ul li a.selected{
    font-weight: 500;
}

div.top-nav ul li {
    transition: .4s;
}

div.top-nav ul li:hover:not(:last-child) {
    -webkit-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
    transition: .4s;
}

div.top-nav ul#LanguagesTopBarContent li:hover {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    transition: .4s;
}



div.top-nav ul a:hover {
    background-color: transparent;
}

div.top-nav ul li a i.md-white {
    color: #242424;
}

.section-0 {
 /*height: 150px;
     background-color: #242424;
     position: -webkit-sticky;
     position: sticky;
     top: 125px;*/
     display:none;
}

h2, h3, h4, h5, h6 {
    color: #242424;
    font-weight: 300;
}

h1 {
    color: #cf182f;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 1rem 0 0 0;
    text-align: left;
}

h2 {
    font-size: 1.4rem;
    text-transform: uppercase;
    line-height: 1.2em;
    margin: 0 0 1rem 0;
    text-align: left;
}

h3 {
    font-size: 1rem;
    text-transform: uppercase;
}

h4 {
    font-size: 0.9rem;
    font-weight: 400;
}

h5 {
    font-size: 0.85rem;
}

h6 {
    font-size: 0.80rem;
}

.card {
    border-radius: 0;
    background-color: #ffffff;
}

.card.main-card{
    /*margin-top: -150px;*/
    margin-top: 12px;
    min-height: 300px;
}

.card .card-content {
    padding: 18px;
    border-radius: 0;
}

a.btn, button.btn {
    background-color: white;
    border: 1px solid #242424;
    color: #242424;
    box-shadow: 0 0 10px 0 transparent;
    -webkit-box-shadow: 0 0 10px 0 transparent;
    font-size: 0.7rem;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 2rem;
    padding-right: 2rem;
}

a.btn-flat.focused-button-simulation, button.btn-flat.focused-button-simulation {
    background-color: white;
    border: 1px solid #242424;
    color: #242424;
    box-shadow: 0 0 10px 0 transparent;
    -webkit-box-shadow: 0 0 10px 0 transparent;
    font-size: 0.7rem;
    padding-left: 2rem;
    padding-right: 2rem;
    width:290px;
    margin-bottom:5px;
}



a.btn:hover, a.btn:focus, button.btn:hover, button.btn:focus {
    background-color: white;
    border: 1px solid #cf182f;
    color: #242424;
    transform: scale(1.1);
    box-shadow: 0 0 10px 0 transparent;
    -webkit-box-shadow: 0 0 10px 0 transparent;
}

a.btn {
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}


footer.page-footer {
    background-color: #242424;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 1px;
}

div.top-footer {
    color:rgba(255,255,255,0.8);
    text-align: left;
    margin-top: 35px;
    letter-spacing: 1px;
}

/* v2: columns have no padding of their own (the grid gap spaces them) and the container is
   full width on mobile, so the footer text touched the screen edge. Same gutter as main;
   undefined in v1, where the column padding already provides it. */
div.top-footer > .container {
    padding-left: var(--main-gutter-inline, 0);
    padding-right: var(--main-gutter-inline, 0);
}

div.top-footer h3 {
    color:rgba(255,255,255,0.8);
    border-bottom: 1px solid #cf182f;
    padding-bottom: 15px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

div.top-footer a {
    margin-top: 0.5rem;
    margin-bottom: 0rem;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255,255,255,0.8);
}

div.top-footer a.btn, div.top-footer button.btn {
   background-color: #242424;
   border: 1px solid rgba(255,255,255,0.8);
   color: rgba(255,255,255,0.8);
}

@media only screen and (min-width : 600px){
    div.help-line {
        float: left;
    }
}

div.help-line {
    text-transform: uppercase;
    padding-top: 2rem;
    display: block;
    margin-right: 1rem;
    margin-top: 6px;
}

div.help-line-2 {
    text-transform: uppercase;
    display: block;
    margin-right: 1rem;
}

div.help-line span {
    font-weight: 300;
    font-size: 0.8rem;
}

div.help-line-2 span {
    font-weight: 300;
    font-size: 0.8rem;
}

.row .col .block-presentation {
    border-left: 1px solid black;
    padding-left: 2rem;
}

.text-presentation {
    text-align: justify;
    text-justify: inter-word;
    padding-right: 12px;
    padding-top: 0;
    padding-bottom: 12px;
}

.card .card-content p.text-presentation {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.card.login-card{
  /*margin-top: -150px;*/
      margin-top: 12px;
    min-height: 200px;
    text-align: center;
    padding-top: 36px;
    padding-right: 36px;
    padding-bottom: 24px;
    padding-left: 36px;
}

.card .card-content p.login-baseline {
    text-transform: uppercase;
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-weight: 500;
    font-size: 1.2rem;
}

.small-link {
    padding-top: 1rem;
    font-size: 0.8rem;
    text-decoration: underline;
    display: block;
    text-align: center;
}

.collapsible {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.collapsible-header {
    border-left: none;
    border-bottom: none;
}


.collapsible .collapsible-header:hover {
    color: #242424;
    border: 0px;
    background-color: white;
}

.collapsible .collapsible-header.selected:hover {
    color: white;
        border: 0px;
    background-color: white;
}

.collapsible .collapsible-header.selected, .collapsible .collapsible-header.selected:hover i, .collapsible .collapsible-header.selected:hover {
    color: #242424;
}

.collapsible .collapsible-header, .collapsible .collapsible-header:hover i, .collapsible .collapsible-header:hover {
    color: #242424;
}

div.top-nav a.sidenav-trigger {
    float: right;
}

.main-card .card-tabs {
   border-bottom: 3px solid #cf182f;
}

.tabs {
    height: 64px;
}

.tabs .tab {
    height: 64px;
    line-height: 24px;
}

.tabs .tab a:hover, .tabs .tab a.active {
    background-color: #242424;
    color: #f4f5f7;
}

.tabs .tab a {
    background-color: #f4f5f7;
    padding-top: 8px;
    color:  #242424;
    font-size: 0.7rem;
}

.tabs .tab a:focus, .tabs .tab a:focus.active {
    background-color: #242424;
    color: white;
    outline: none;
}

.tabs .tab a i {
    padding-top: 8px;
}

[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after, [type="radio"]:checked+span:before, [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border-radius: 0;
}

/* montserrat-regular - vietnamese_latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/Mods/HypoAdv/Front/Ui/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/Mods/HypoAdv/Front/Ui/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-italic - vietnamese_latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('/Mods/HypoAdv/Front/Ui/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/Mods/HypoAdv/Front/Ui/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-500 - vietnamese_latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/Mods/HypoAdv/Front/Ui/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/Mods/HypoAdv/Front/Ui/fonts/montserrat-v15-vietnamese_latin-ext_latin_cyrillic-ext_cyrillic-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.input-radio-label {
    font-size: 0.6rem;
}

[type="radio"]:not(:checked) + span, [type="radio"]:checked + span {
    font-size: 0.8rem;
}

.input-field > label {
    font-size: 0.8rem;
}

.input-field .helper-text {
    font-size: 0.6rem;
}
.helper-text {
    font-size: 0.6rem;
}

.margin-top-1rem {
    margin-top: 1rem;
}

.input-field {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

blockquote {
    border-left: 2px solid #242424;
}

blockquote.md-lightgray {
    border-left: 2px solid lightgray;
}

[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + span::after {
    background-color: #242424;
}

[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + span::before, [type="radio"].with-gap:checked + span::after {
    border: 1px solid #242424;
}

[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) + span::after {
    border: 1px solid #5a5a5a;
}

[type="checkbox"] + span:not(.lever)::before, [type="checkbox"]:not(.filled-in) + span:not(.lever)::after {
    border: 1px solid #5a5a5a;
}

[type="radio"]:checked + span {
    color: #242424;
}

@media only screen and (max-width: 601px) {
    .container {
         margin:0 auto;
         width:100%
    }
}

.input-field {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.btn, .btn-large, .btn-small, .btn-flat {
    border-radius: 0;
}

[type="checkbox"]+span:not(.lever) {
    font-size: 0.8rem;
}

.card-action {
    text-align: left;
}

.card-action .btn-flat {
    color: #cf182f;
    font-size: 0.7rem;
    text-transform: none;
    padding-left: 0;
    border: 0;
}

.btn_simulation_reset.btn.btn-flat {
    color: #cf182f;
    font-size: 0.7rem;
    text-transform: none;
    padding-left: 0;
    border: 0;
}

.btn_simulation_reset i {
    color: #cf182f;
}

.card-action .btn-flat:hover {
    color: #cf182f;
    border: 0;
}

.card-action .btn-flat i {
    color: #cf182f;
    margin-right: 5px;
    font-size: 1.1rem;
}

.card-image.home-img img {
    max-height: 250px;
    object-fit: cover;
    border-bottom: #cf182f solid 2px;
}

.col .row.no-margin {
    margin-left: 0;
    margin-right: 0;
}

img.logo-advisor-homepage {
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

[type="radio"]:checked + span {
    color: #242424;
}

input[type="text"].borderless {
   border: none !important;
   font-size: inherit;
   margin:0;
   height: inherit;
   font-family: "Montserrat", Sans-serif;
}

@media only screen and (max-width: 993px){
    input[type="text"].borderless {
        font-size: 16px;
    }
}

input[type=range].rangeslider {
 position:relative;
 background-color:transparent;
 border:none;
 outline:none;
 width:100%;
 margin:5px 0;
 padding:0
}

input[type=range].rangeslider+.thumb {
 position:absolute;
 top:10px;
 left:0;
 border:none;
 height:0;
 width:0;
 border-radius:50%;
 background-color:#cf182f;
 margin-left:7px;
 -webkit-transform-origin:50% 50%;
 transform-origin:50% 50%;
 -webkit-transform:rotate(-45deg);
 transform:rotate(-45deg)
}
input[type=range].rangeslider+.thumb .value {
 display:block;
 width:30px;
 text-align:center;
 color:#cf182f;
 font-size:0;
 -webkit-transform:rotate(45deg);
 transform:rotate(45deg)
}

input[type=range].rangeslider+.thumb.active .value {
 color:#fff;
 margin-left:-1px;
 margin-top:8px;
 font-size:10px
}

input[type=range].rangeslider::-webkit-slider-runnable-track {
 height:1px;
 background:#c2c0c2;
 border:none
}
input[type=range].rangeslider::-webkit-slider-thumb {
 border:none;
 height:16px;
 width:16px;
 border-radius:50%;
 background:#cf182f;
 -webkit-transition:-webkit-box-shadow .3s;
 transition:-webkit-box-shadow .3s;
 transition:box-shadow .3s;
 transition:box-shadow .3s, -webkit-box-shadow .3s;
 -webkit-appearance:none;
 background-color:#cf182f;
 -webkit-transform-origin:50% 50%;
 transform-origin:50% 50%;
 margin:-8px 0 0 0
}

input[type=range].rangeslider {
 border:1px solid white
}
input[type=range].rangeslider::-moz-range-track {
 height:1px;
 background:#c2c0c2;
 border:none
}

input[type=range].rangeslider::-moz-range-thumb {
 border:none;
 height:14px;
 width:14px;
 border-radius:50%;
 background:#cf182f;
 -webkit-transition:-webkit-box-shadow .3s;
 transition:-webkit-box-shadow .3s;
 transition:box-shadow .3s;
 transition:box-shadow .3s, -webkit-box-shadow .3s;
 margin-top:-5px
}

input[type=range].rangeslider::-ms-track {
 height:1px;
 background:transparent;
 border-color:transparent;
 border-width:6px 0;
 color:transparent
}

input[type=range].rangeslider::-ms-thumb {
 border:none;
 height:14px;
 width:14px;
 border-radius:50%;
 background:#cf182f;
 -webkit-transition:-webkit-box-shadow .3s;
 transition:-webkit-box-shadow .3s;
 transition:box-shadow .3s;
 transition:box-shadow .3s, -webkit-box-shadow .3s
}

/* --- Materialize v2 / runtime-control theme reset for the front --------------
 * Form fields render through the runtime-control system (.rya-control-row) and
 * Materialize v2, which apply the back-office DARK theme (navy wrappers, filled
 * dark inputs, white text). The front is a light design (white cards, dark text),
 * so neutralise that here. Front-only (this file only loads on the front);
 * !important because the core rules win on specificity/order. */
.rya-control-row {
    background-color: transparent !important;
    box-shadow: none !important;
}
.rya-control-row input,
input.rangeinput {
    background-color: transparent !important;
    color: rgba(0, 0, 0, 0.87) !important;
    box-shadow: none !important;
}
/* The reset above only relights <input> inside a .rya-control-row. A TEXTAREA (the
 * comment field) sits in a .rya-control-textarea wrapper the core leaves on the dark
 * theme: navy --card-bg fill, white --text-primary text and a pale, invisible
 * border -- so on a light front with a dark-mode OS the box reads as an empty grey
 * blob. Relight the wrapper + textarea so it matches the boxed inputs. */
.card:not(.hypoadv-simulation) .rya-control-textarea {
    background-color: #ffffff !important;
    border: 1px solid #9e9e9e !important;
    border-radius: 4px !important;
}
.card:not(.hypoadv-simulation) .rya-textarea {
    background-color: transparent !important;
    color: rgba(0, 0, 0, 0.87) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.87) !important;
}
.card:not(.hypoadv-simulation) .rya-textarea::placeholder {
    color: rgba(0, 0, 0, 0.42) !important;
    opacity: 1;
}
/* The value field (right of each slider label) is a text input; Materialize v2
 * gives it a tall filled box. Collapse it to plain text like V1 so the label row
 * stays ~22px instead of ~39px. */
input.rangeinput {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
/* Runtime-control form fields (Requests etc.): v2 paints the labels white and
 * drops the field underline. Restore V1's grey label + grey bottom line on every
 * input (not just the select). Labels can carry -webkit-text-fill-color too. */
/* Non-simulation front forms: outlined boxes. In v2 the field label no longer
 * floats into the field, so a lone bottom line reads as incoherent; a box with a
 * static label above is cleaner. The simulation card (marked .hypoadv-simulation)
 * keeps the underline style (it is mostly sliders + underline selects). */
.card:not(.hypoadv-simulation) .rya-input:not(.borderless) {
    border: 1px solid #9e9e9e !important;
    border-radius: 4px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}
/* Inline amount inputs inside the value tables (marked .borderless: the "Saisir"
 * fields) must stay frameless like the surrounding figures -- never boxed, and no
 * v2 focus frame/height that would deform the table row. Collapse to plain text. */
.card:not(.hypoadv-simulation) .rya-input.borderless,
.card:not(.hypoadv-simulation) .rya-input.borderless:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* The box, the focus frame (.rya-control:focus-within) and the 44px height live on
 * the field WRAPPER (.rya-control / .rya-control-row), not the input. For a
 * borderless amount field, strip the wrapper too so nothing frames it and the row
 * keeps the height of a plain figure. */
.card:not(.hypoadv-simulation) .rya-control:has(.rya-input.borderless),
.card:not(.hypoadv-simulation) .rya-control:has(.rya-input.borderless):focus-within {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}
/* The value cell renders a full v2 field (an EMPTY label + the control + an
 * always-present .errorFields box), which is taller than the plain <span> figures
 * in the other rows and breaks the table rhythm. Collapse the empty scaffolding so
 * a borderless amount sits like a span (errors still show: :empty guards them). */
.card:not(.hypoadv-simulation) .rya-field:has(.rya-input.borderless) {
    margin: 0 !important;
}
.card:not(.hypoadv-simulation) .rya-field:has(.rya-input.borderless) .rya-field-label:empty,
.card:not(.hypoadv-simulation) .rya-field:has(.rya-input.borderless) .errorFields:empty {
    display: none !important;
}
.card.hypoadv-simulation .rya-input {
    border-bottom: 1px solid #9e9e9e !important;
}
/* The simulation card carries overflow-x:auto (kernel); its content overflows by a
   couple of sub-pixels (border/rounding), which is enough to render a full-width
   horizontal scrollbar. Clip that phantom overflow -- the rate columns stack on
   mobile, so there is no real content to scroll to. */
.card.hypoadv-simulation {
    overflow-x: hidden !important;
}
/* v2 gives .rya-control-row a 14px inline padding that insets ONLY the text
 * inputs (selects/labels/radios sit at the row edge), making the boxed inputs
 * narrower and misaligned. Drop it on non-simulation forms so every field shares
 * the same full width. */
.card:not(.hypoadv-simulation) .rya-control-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.card label,
.card .rya-radio,
.card .rya-checkbox {
    color: rgba(0, 0, 0, 0.42) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.42) !important;
}
/* A checkbox whose label is multi-node HTML (text + <br> + links, e.g. the consent
   line) otherwise renders those nodes as separate flex items of the .rya-check
   label and spreads them across the row. The view wraps that label in a
   .rya-consent-label span; make it the single flex item that fills the row and lets
   its content flow inline. */
.rya-consent-label {
    flex: 1 1 auto;
    min-width: 0;
}
/* Field spacing. The kernel spaces form rows with
   `.row:has(> .col .rya-field) { margin-bottom: var(--gap-size) }`, but the front resets
   every card row to 0 (`.card .row`, V1 rhythm), so a field's hint ran straight into
   the next field's label, which then read as belonging to the field above. 6px on the
   field itself restores the separation. A checkbox list or a radio group is a field
   too (.rya-field / .rya-radio-group). Fields inside a table cell keep the row's own
   rhythm: tranche amounts, "not concerned" checkboxes of the deposit space. */
.card .rya-field,
.card .rya-radio-group {
    margin-bottom: 6px;
}
.card td .rya-field,
.card td .rya-radio-group {
    margin-bottom: 0;
}
.card .select2-container .select2-selection,
.select2-container--default .select2-selection,
.select2-selection {
    background-color: transparent !important;
    box-shadow: none !important;
}
/* Simulation: underline-only select (matches its underline inputs). */
.card.hypoadv-simulation .select2-container .select2-selection {
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 !important;
}
/* Other front forms: outlined select to match the boxed inputs. */
.card:not(.hypoadv-simulation) .select2-container .select2-selection {
    border: 1px solid #9e9e9e !important;
    border-radius: 4px !important;
}
/* Tranche table: the Montant column is an InputText (renders as a .rya-field, whose
   control sits 6px below its label per the charter) while the Taux column is an
   InputSelect (renders as a legacy Materialize .input-field, whose box sits flush
   under its label). The paired boxes therefore misalign by 6px. Nudge the select
   down to the same charter gap so Montant and Taux line up on every row. */
.ventilation-table .input-field .select2-container {
    margin-top: 6px !important;
}
/* Login card: the card is centered (unlike the rest of the front), so left-align the
   field labels to match the other forms. Inputs keep the standard boxed charter for
   consistency; only the actions layout is adjusted. */
.card.login-card .rya-field-label {
    text-align: left !important;
}
/* Breathing room between the password field and the sign-in button. */
.card.login-card form > .row:last-child {
    margin-top: 24px !important;
}
/* Bank-extranet variant of the login card: its buttons are direct form children
   (not a form-line row), so give the password row its own bottom margin to keep the
   same breathing room before the action buttons. */
.card.login-card form > .row:has(+ .btn) {
    margin-bottom: 26px !important;
}
.card.login-card .small-link {
    display: block !important;
    text-align: center !important;
    margin-top: 16px !important;
    float: none !important;
}
.select2-selection__rendered,
.select2-selection__placeholder {
    color: rgba(0, 0, 0, 0.6) !important;
}
/* The open select2 panel is appended to <body> (outside .card), so it cannot be
 * scoped; these front-only rules relight it (v2 core themes it navy/white text).
 * V1 look: white panel, dark options, dark highlighted option with white text. */
.select2-dropdown {
    background-color: #ffffff !important;
    color: rgba(0, 0, 0, 0.87) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    /* Lift the v2 core max-width:420px cap. The exact width (= the field width)
     * is set per-open by the select2 width hook in mod-rumya-runtime.js: select2
     * appends the panel to <body> in a full-width wrapper and v2 kills its inline
     * min-width sizing, so the correct width is only knowable at open time. */
    max-width: none !important;
    box-sizing: border-box !important;
}
.select2-results__option {
    background-color: transparent !important;
    color: rgba(0, 0, 0, 0.87) !important;
}
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
    background-color: #242424 !important;
    color: #ffffff !important;
}
.select2-search__field {
    background-color: #ffffff !important;
    color: rgba(0, 0, 0, 0.87) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
/* Light scrollbar for the results list (v2 dark theme paints it dark). */
.select2-results__options {
    scrollbar-color: #c1c1c1 #ffffff !important;
}
.select2-results__options::-webkit-scrollbar {
    width: 12px !important;
    background: #ffffff !important;
}
.select2-results__options::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 6px !important;
}
.card .hypo-front-table,
.card .hypo-front-table td,
.card .hypo-front-table th,
.card .hypo-front-table-resume,
.card .hypo-front-table-resume td {
    color: rgba(0, 0, 0, 0.87) !important;
}
/* Range slider: Materialize v2 renders a thick dark filled track once the slider
 * is touched; restore the thin 1px grey line from V1 (the .thumb keeps the red). */
input[type=range].hyporange {
    background: transparent !important;
}
input[type=range].hyporange::-webkit-slider-runnable-track {
    background: #c2c0c2 !important;
    height: 1px !important;
    border: none !important;
}
input[type=range].hyporange::-moz-range-track {
    background: #c2c0c2 !important;
    height: 1px !important;
    border: none !important;
}
input[type=range].hyporange::-ms-track {
    background: #c2c0c2 !important;
    height: 1px !important;
}
/* V1 rhythm: Materialize v2 adds a .row bottom margin AND a flex row-gap on the
 * columns (both push the sliders apart), turns the recap-table row separators
 * white (invisible on the card), and drops the card-action top border. In V1 the
 * cols were plain block with no gap; restore all of this to the V1 look. */
.card .row {
    margin-bottom: 0 !important;
}
.card .col {
    row-gap: 0 !important;
}
.card .hypo-front-table tr,
.card .hypo-front-table-resume tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.card .card-action {
    border-top: 1px solid rgba(160, 160, 160, 0.2) !important;
}
/* The reset button sits alone in its wrapper, so it is both a:first-child and
 * a:last-child: Materialize v2 gives it a -1.6rem margin on BOTH sides, which
 * yanks it past the card padding, flush against the card's right edge. Align it
 * to the padding edges like V1. */
.card .card-action a.btn_simulation_reset {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

table.hypo-front-table td {
  padding: 10px 0 0 0;
}

table.hypo-front-table th {
    padding-left: 0px;
}

.grey-legend [type="radio"]:disabled:checked + span::after {
    background-color: rgb(130,130,130);
    border-color: rgb(130,130,130);
}

.black-legend [type="radio"]:disabled:checked + span::after {
    background-color: rgb(0,0,0);
    border-color: rgb(0,0,0);
}

.red-legend [type="radio"]:disabled:checked + span::after {
    background-color: rgb(206, 24, 47);
    border-color: rgb(206, 24, 47);
}

.interest-legend [type="radio"]:disabled:checked + span::after {
    background-color: rgb(206, 24, 47);
    border-color: rgb(206, 24, 47);
}

.amortization-legend [type="radio"]:disabled:checked + span::after {
    background-color: rgb(130,130,130);
    border-color: rgb(130,130,130);
}

.fees-legend [type="radio"]:disabled:checked + span::after {
    background-color: rgb(0,0,0);
    border-color: rgb(0,0,0);
}

/* A partner simulator paints its doughnuts with colours 4 / 5 / 6 of the partner sheet
   (maintenance / amortization / interests, see initGraphs): the legend dots follow. */
:root:has(.hypoadv-partner-theme) .fees-legend [type="radio"]:disabled:checked + span::after {
    background-color: #a9a9a9;
    border-color: #a9a9a9;
}

:root:has(.hypoadv-partner-theme) .amortization-legend [type="radio"]:disabled:checked + span::after {
    background-color: #cf182f;
    border-color: #cf182f;
}

:root:has(.hypoadv-partner-theme) .interest-legend [type="radio"]:disabled:checked + span::after {
    background-color: #29b6f6;
    border-color: #29b6f6;
}

.btn-flat.focused-button-simulation.focused{
 background-color: rgb(230,230,230);
}

.disclaimer-simulation{
    text-align:justify;
    position: relative;
    min-height: 18px;
    display: block;
    font-size: 10px;
    color: rgba(0,0,0,0.54);
}

p.range-field + span.helper-text{
    float:right;
}

.confirm-overlay-action-cancel {
  background-color: white;
     border: 1px solid #242424;
     font-size: 0.7rem;
     color: #242424;
  margin-right: 24px;
}

.confirm-overlay-action-valid {
  background-color: white;
     border: 1px solid #242424;
     font-size: 0.7rem;
     color: #242424;
  margin-left: 24px;
}

.confirm-overlay-action-cancel:hover {
 background-color: #242424;
  color: white;
}

.confirm-overlay-action-valid:hover {
  color: white;
  background-color: #cf182f;
}

.select-rate+span{
    text-align:center;
}

input::placeholder{
    font-family: "Montserrat", Sans-serif;
}

.preloader-wrapper.extra-big {
width: 120px;
    height: 120px;
}

.btn-add-type.btn-small{
    background-color: white;
    color:black;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}

.btn-width-350{
    width:350px;
}

.doc-table thead tr {
    border-bottom: none;
}

.doc-table thead tr th {
    padding: 15px 5px;
}

.doc-table td, .doc-table th {
    padding: 3px 5px;
    vertical-align: bottom;
}

.doc-table .input-field .btn {
    background-color: transparent;
    color: rgba(0,0,0,0.87);
    box-shadow: none;
    -webkit-box-shadow: none;
    font-size: 1.5rem;
    min-height: 2rem;
    height: 2rem;
    line-height: 2rem;
}

.doc-table .file-path-wrapper input.file-path {
    /* Iso prod: the charter turns the file-path into a boxed field (border +
       card background, some with !important). Here we only want the filename to
       show next to the "+", with no visible box. Higher specificity + !important
       overrides the charter's !important border/shadow. */
    border: none !important;
    border-bottom: none;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: 2rem;
}

.doc-table .input-field {
    margin-top: 0;
    margin-bottom: 0;
    height: 2rem;
}

/* The charter reserves a top label slot on every .file-field (--field-label-space)
   so file inputs line up with labelled form siblings. In this table the upload
   button sits next to a plain label cell, not labelled siblings, so drop that slot
   to keep the "+" aligned on its row. */
.doc-table .file-field {
    padding-top: 0;
}

#followers{
    color: #cf182f;
    font-size: 3em;
}

@media only screen and (min-width : 993px){
    /* Gutter between the form column and the recap column only. The outer edge
     * belongs to the card-content padding, like the form column's: a right padding
     * here pushed the recap 2.5rem further from the card edge than the form. */
    .padding-left-col-simu{
        padding-left: 2.5rem !important;
    }
}

.btn-flat.confirm-overlay-action-cancel{
width: 130px;
}
.btn-flat.confirm-overlay-action-valid{
width: 130px;
}

@media only screen and (max-width : 900px){
    .card .card-content {
        padding: 12px;
        border-radius: 0;
    }
}

#slide-out {
    width: 100%;
    max-width: none;
}

.sidenav li > a{
    border-bottom: 1px solid #e0e0e0;
    font-size: 10px;
    letter-spacing: 1px;
}

.sidenav li > a.selected {
    color: #9e9e9e;
}

.sidenav .dropdown-content {
    left:0;
    width:100%;
    background-color:rgba(0,0,0,0.05);
}

.fake-footer .btn {
    margin: 12px 24px;
}

@media only screen and (max-width : 900px){
    .fake-footer .btn {
        width:calc(100% - 48px);
    }
}

/* Simulators: the action buttons and the reset bar line up with the form and the
 * recap, on the card-content padding edge (18px, 12px on small screens), instead
 * of 24px further in. */
.card:has(.padding-left-col-simu) .fake-footer .btn {
    margin-left: 0;
    margin-right: 0;
}

.card:has(.padding-left-col-simu) .card-action {
    padding-left: 18px;
    padding-right: 18px;
}

@media only screen and (max-width : 900px){
    .card:has(.padding-left-col-simu) .fake-footer .btn {
        width: 100%;
    }

    .card:has(.padding-left-col-simu) .card-action {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.hypo-front-table-resume{
color:grey;
font-size:0.9em;
}

table.hypo-front-table-resume td {
  padding: 1px 0 0 0;
}

table.ventilation-table td {
  padding: 10px 0 2px;
}

table.ventilation-table a {
  text-transform:inherit;
}

div.product-by {
    text-transform: uppercase;
    color:white;
    padding-top: 2.5rem;
    display: block;
    text-align:center;
    margin-top: 6px;
}

table.hypo-front-table-resume tr {
     border: none;
}

.padding-left-right-50 {
    padding-left:50px !important;
    padding-right:50px !important;
}

.resume-disclaimer {
    color: gray;
    font-size: 0.8em;
}

.amortizationBtn {
    background-color: white;
    border: 1px solid #242424;
    color: #242424;
    box-shadow: 0 0 10px 0 transparent;
    -webkit-box-shadow: 0 0 10px 0 transparent;
    font-size: 0.7rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    margin-bottom:5px;
}

.amortizationBtn.focused{
    background-color: rgb(230,230,230);
}

.no-collapse{
 border-collapse: unset !important;
}

@media only screen and (min-width: 993px){
        div.container-language-select span.select2{
            margin:0 0 40px 0 !important;
        }

        div.container-language-select span.select2-selection{
           border-bottom: 0px !important;
        }

        div.container-language-select span.select2-selection__rendered{
           color:white !important;
        }
}

.dropdown-content li > a {
    font-family: "Montserrat", Sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color:white !important;
}

.dropdown-content li > a:hover {
   color: #707070 !important;
}

.dropdown-content#LanguagesTopBarContent{
    background-color: #242424;
}
.dropdown-content#LanguagesTopBarContent li:hover{
    background-color: #242424;
}

.advisorPane {
    padding-left: 50px;
}

.advisorLastname {
    font-weight: 500;
    font-size:1.3em;
    text-transform: uppercase;
}

.advisorFirstname{
    font-size:1.3em;
    text-transform: uppercase;
}

.advisorRole{
    font-weight: 500;
}

.width-300{
    width:300px;
}

.advisorSmallContent{
    line-height: 1.7em;
    font-size: 0.8rem;
}

.advisorInformations{
    padding-left:45px !important;
}

.image-socials {
    vertical-align: bottom;
    margin-right: 20px;
    margin-bottom: 8px;
    height: 29px;
    opacity: 0.8;
}

.home-pane-image {
    background-image: url("/Mods/HypoAdv/Front/Ui/Home/accueil-app.jpeg");
    background-color: #242424;
    height: 450px;
    background-size: cover;
    padding-top: 100px;
    padding-right: 80px;
    padding-bottom: 80px;
    padding-left: 80px;
}

.home-pane-text h1 {
    font-size: 1.4rem;
    text-transform: uppercase;
    line-height: 1.2em;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
    font-weight: 300;
}

.home-pane-text {
    max-width: 150px;
    max-width: 450px;
    text-align: justify;
    color: rgba(255,255,255,0.8);
}

b, strong, .bold {
    font-weight: 600;
}

.header b, .header strong, .header .bold {
    font-weight: 700;
}

.page-footer .footer-copyright {
    background-color: initial;
    color: white;
}

.red-text{
    color: #cf182f !important;
}

.red-placeholder::placeholder {
    color: #cf182f;
}


@media only screen and (max-width: 993px){
    .table-4-repartition-col1{
        width:50%;
    }
    .table-4-repartition-col2{
        width:15%;
    }
    .table-4-repartition-col3{
        width:35%;
    }
    .table-4-repartition-col4{
        width:0;
    }
    .table-4-repartition-au-col1{
        width:50%;
    }
    .table-4-repartition-au-col2{
        width:15%;
    }
    .table-4-repartition-au-col3{
        width:25%;
    }
    .table-4-repartition-au-col4{
        width:10%;
    }
    .table-4-repartition-2col-col1{
        width:50%;
    }
    .table-4-repartition-2col-col2{
        width:15%;
    }
    .table-4-repartition-2col-col3{
        width:35%;
    }
    .table-4-repartition-2col-col4{
        width:0;
    }
}
@media only screen and (min-width: 993px){
    .table-4-repartition-col1{
        width:65%;
    }
    .table-4-repartition-col2{
        width:10%;
    }
    .table-4-repartition-col3{
        width:15%;
    }
    .table-4-repartition-col4{
        width:10%;
    }
    .table-4-repartition-au-col1{
        width:65%;
    }
    .table-4-repartition-au-col2{
        width:10%;
    }
    .table-4-repartition-au-col3{
        width:15%;
    }
    .table-4-repartition-au-col4{
        width:10%;
    }
    .table-4-repartition-2col-col1{
        width:45%;
    }
    .table-4-repartition-2col-col2{
        width:10%;
    }
    .table-4-repartition-2col-col3{
        width:10%;
    }
    .table-4-repartition-2col-col4{
        width:35%;
    }
}

.fake-card-horizontal-padding {
    margin-bottom: 2rem;
}

@media only screen and (max-width: 600px){
    .block-presentation {
        margin-bottom: 2rem;
    }
}

a.terms-and-condition {
    font-weight:bold;
    color: inherit;
}

button.submitBtn {
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out;
}

.small-text {
  font-size: 0.7rem;
  font-style: italic;
  color: gray;
}

.displayCardBorderOff .card {
    box-shadow: none;
}