/* =========================================================
   THÈME SMAM / APIVIA — Espace conseiller courtage
   Les tokens sont dans token-smam.css.
   ========================================================= */

/* =========================================================
   LAYOUT SIDEBAR + CONTENT
   ========================================================= */

aside#sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20%;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    border-right: 1px solid var(--color-border-muted);
    background-color: var(--color-white);
    overflow-y: auto;
    overflow-x: hidden;
}

aside#sidebar header {
    min-height: 180px;
}

section#content {
    position: absolute;
    top: 0;
    left: 20%;
    width: 80%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
}

/* =========================================================
   BASE
   ========================================================= */

body {
    background-color: var(--color-gray-1);
    color: var(--color-text-heading);
    font-family: var(--font-family-primary);
}

main {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
}

a {
    color: var(--color-text-heading);
}

a:hover,
a:focus {
    color: var(--color-text-heading);
    opacity: 0.8;
    text-decoration: underline;
}

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */

h1, .h1,
h2, .h2 {
    font-family: var(--font-family-primary);
    color: var(--color-text-heading);
}

h2 small, .h2 small {
    display: block;
    font-size: var(--font-size-3);
    color: var(--color-gray-4);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-8);
}

h2.infoEconomie, h2 strong,
.h2.infoEconomie, .h2 strong {
    color: var(--color-green);
}

h3, .h3 {
    font-family: var(--font-family-primary);
    color: var(--color-text-heading);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-regular);
}

.h3.badge {
    background-color: var(--color-green);
    font-weight: bold;
    color: var(--color-text-heading);
    border: none;
    border-radius: var(--panelTarif-radius);
    margin: 0;
}

.numPalier .btn-supprime.btn-supprimePalier {
    background: none;
    border: none;
    color: var(--color-text-heading);
    padding: 0;
    margin-left: var(--space-8);
    opacity: 0.6;
    border-radius: 0;
}

.numPalier .btn-supprime.btn-supprimePalier i::before {
    content: "\f057";
    font-weight: 400;
}

.numPalier .btn-supprime.btn-supprimePalier:hover {
    opacity: 1;
    background: none;
}

h4, .h4 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-2);
    color: var(--color-text-heading);
    font-weight: var(--font-weight-bold);
}

h4::after {
    background-color: var(--color-green);
    border-radius: var(--space-4);
    display: block;
    content: "";
    width: 40px;
    height: 3px;
    margin: 5px 0 0;
}

/* =========================================================
   HEADER
   ========================================================= */

header img#logoDistributeur {
    max-height: 100px;
    padding: var(--space-16);
}

/* =========================================================
   BOUTONS
   ========================================================= */

.btn {
    padding: var(--space-16) var(--space-24);
    justify-content: center;
    border: none;
    background: none;
}

.btn-primary,
.btn-primary.btn-disabled {
    color: var(--color-text-heading);
    background-color: var(--color-green);
}

.btn-primary:hover {
    color: var(--color-text-heading);
    background-color: var(--color-green-hover);
}

.btn-success {
    background-color: var(--color-text-heading);
    color: var(--color-white);
}

.btn-success:active,
.btn-success:focus,
.btn-success:hover {
    background-color: var(--color-text-heading);
    opacity: 0.8;
    color: var(--color-white);
}

.btn.btn-secondary,
.btn.btn-secondary.btn-disabled {
    color: var(--color-text-heading);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-muted);
}

.btn.btn-secondary:hover {
    background-color: var(--color-text-heading);
    color: var(--color-white);
}

.btn-supprime {
    background-color: var(--color-red);
    border: 1px solid var(--color-red);
    color: var(--color-white);
}

.btn-supprime:hover {
    background-color: var(--color-red-hover);
    border-color: var(--color-red-hover);
}

.btn-danger {
    background-color: var(--color-red);
    border: 1px solid var(--color-red);
    color: var(--color-white);
}

.btn-danger:hover {
    background-color: var(--color-red-hover);
    border-color: var(--color-red-hover);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-text-heading);
    padding: 0;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-xs {
    padding: var(--space-8) var(--space-16);
    font-size: var(--font-size-4);
}

aside a.btn-primary {
    margin: auto var(--space-16) var(--space-48);
}

/* =========================================================
   BREADCRUMB DEMANDE — TIMELINE VERTICALE
   ========================================================= */

#breadCrumbDemande {
    display: block;
    margin-bottom: var(--space-24);
}

#breadCrumbDemande .btn-group {
    position: relative;
    height: 127px;
}

#breadCrumbDemande .btn-group:last-of-type {
    height: auto;
}

#breadCrumbDemande .btn-group a.btn {
    padding: 0;
    padding-left: 80px;
    color: var(--color-text-heading);
    font-weight: var(--font-weight-regular);
    white-space: normal;
    display: inline-flex;
    justify-content: flex-start;
    height: var(--space-48);
}

#breadCrumbDemande .btn-group::before {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--space-48);
    line-height: var(--space-48);
    height: auto;
    text-align: center;
    background-color: var(--color-gray-1);
    border: 1px solid var(--color-border-muted);
    color: var(--color-text-heading);
    transform: none;
}

#breadCrumbDemande .btn-group::after {
    content: "";
    background-color: var(--color-gray-1);
    position: absolute;
    left: 22px;
    top: 0;
    height: 127px;
    width: var(--space-4);
}

#breadCrumbDemande .btn-group:last-of-type::after {
    display: none;
}

#breadCrumbDemande .btn-group.success::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Pro";
    background-color: var(--color-text-heading);
    border-color: var(--color-text-heading);
    color: var(--color-white);
}

#breadCrumbDemande .btn-group.success::after {
    background-color: var(--color-text-heading);
}

#breadCrumbDemande .btn-group:last-of-type::before {
    background-color: var(--color-green);
    border-color: var(--color-green);
}

#breadCrumbDemande .btn-group.active::before,
#breadCrumbDemande .btn-group.success::before {
    color: var(--color-white);
    background-color: var(--color-text-heading);
}

/* =========================================================
   PANELS
   ========================================================= */

section .panel {
    border: none;
    background: none;
    box-shadow: none;
}

.panel-default {
    border: none;
}

.panel-footer {
    background-image: none;
    background-color: transparent;
    border: none;
}

.panel-default > .panel-heading {
    color: var(--color-text-heading);
    background-image: none;
    background-color: var(--color-white);
}

.panel-default > .panel-body {
    background-color: var(--color-gray-1);
}

.panel.panel-detail {
    background-color: var(--color-white);
    padding: var(--space-32);
    border: var(--border-muted);
    border-radius: var(--panelTarif-radius);
    margin-bottom: var(--space-32);
}

.col-bodered {
    border-left: 1px solid var(--border-success-muted);
}

form .panel-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-56) var(--space-24);
}

form .panel-footer .small {
    flex: 0 0 100%;
}

.panel-footer .btn {
    margin-bottom: var(--space-16);
}

/* =========================================================
   FORMULAIRE
   ========================================================= */

#demande_form_prets,
#demande_form_quotite,
#demande_form_qmessageContextuelItt {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-32);
}

#demande_form_prets > .row,
#demande_form_quotite > .row,
#demande_form_qmessageContextuelItt > .row {
    flex: 1 0 50%;
    box-sizing: border-box;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
.form-control,
.input-group-addon,
.bootstrap-select .dropdown-toggle {
    color: var(--color-text-heading);
    padding: 0 var(--space-16);
}

.form-control.duree,
.form-control.taux {
    padding-right: 0;
}

.input-group input:focus + .input-group-addon {
    border: 1px solid var(--color-text-heading);
    min-width: auto;
    padding-right: 10px;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
.form-control:focus,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:active,
.bootstrap-select.open .dropdown-toggle {
    border-color: var(--color-text-heading);
    background-color: var(--color-white);
}

label, .label,
input[type="radio"] + label {
    color: var(--color-text-heading);
    font-size: var(--font-size-base);
}

/* =========================================================
   RADIOS
   ========================================================= */

input[type="radio"] + label,
.radio-boolean input[type="radio"] + label {
    position: relative;
    height: var(--input-height);
    line-height: normal;
    font-weight: var(--font-weight-regular);
    padding-left: var(--space-64);
    padding-right: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
}

.radio-boolean {
    border: 1px solid var(--color-border-muted);
    border-radius: var(--border-radius);
}

.radio-boolean input[type="radio"] + label {
    border: none;
}

.radio-inline input[type="radio"] + label {
    margin: 0;
}

.radio-image input[type="radio"] + label {
    width: 100%;
}

input[type="radio"] + label::before {
    content: "";
    font-family: "Font Awesome 7 Pro";
    width: var(--space-24);
    height: var(--space-24);
    text-align: center;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--space-4);
    line-height: normal;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--space-24);
    padding: var(--space-4) 2px;
    background-color: var(--color-white);
}

input[type="radio"]:checked + label::before {
    content: "\f00c";
    border: none;
    color: var(--color-text-heading);
    background-color: var(--color-green);
}

input[type="radio"]:checked + label {
    border-color: var(--color-text-heading);
}

.radio-inline {
    flex-direction: row;
}

.radio-inline input[type="radio"] + label {
    width: auto;
}

/* =========================================================
   ALERTES
   ========================================================= */

.alert {
    padding: var(--space-12);
    padding-left: var(--space-64);
}

.alert::before {
    left: var(--space-24);
    font-size: var(--font-size-2);
    height: var(--space-24);
    line-height: var(--space-24);
}

/* =========================================================
   TARIFICATION SMAM
   ========================================================= */

.panel .ligneTarif,
.pane .ligneTarif {
    border-radius: var(--border-radius);
}

.panel.ligneTarif,
.pane.ligneTarif {
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-muted);
    background-color: var(--color-white);
}

.panel.ligneTarif.ligneTarifBanque {
    border: 5px solid var(--color-text-heading);
    background-color: var(--color-text-heading-muted);
}

.panel.ligneTarif > .panel-body,
.pane.ligneTarif > .panel-body {
    border-radius: var(--border-radius);
    position: relative;
    padding: var(--space-16);
    transition: box-shadow 0.2s ease-in-out;
}

.panel.ligneTarif:hover > .panel-body,
.pane.ligneTarif:hover > .panel-body {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.08);
}

._coreTarification > .panel.ligneTarif,
._coreTarification > .pane.ligneTarif {
    border-radius: var(--panelTarif-radius);
}

._coreTarification > .ligneTarif > .panel-body {
    border-radius: var(--panelTarif-radius);
}

.ligneTarif .panel-default {
    border: 1px solid var(--color-border-muted) !important;
    margin-bottom: var(--space-16);
}

.ligneTarif .btn[data-toggle="collapse"] {
    color: var(--color-text-heading);
    border: 1px solid var(--color-gray-3);
    border-radius: var(--space-16);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: var(--space-16);
}

.imgAssureur img {
    max-height: 60px;
}

.tab-pane .panel.ligneTarif,
.tab-pane .pane.ligneTarif {
    margin-bottom: var(--space-40);
}

/* Tables SMAM */

.table-striped > tbody > tr > td,
.table-striped > tbody > tr:nth-of-type(2n+1) > td,
.table > tbody > tr > th,
.table > thead > tr > th,
.table > tbody > tr > td {
    background-color: transparent;
    color: var(--color-text-heading);
}

.table > tbody > tr.active,
.table.table-hover > tbody > tr:hover {
    background-color: var(--color-green-light);
}

/* Skeleton SMAM */

.sk-line {
    margin: 0;
}

.sk-img {
    height: 60px;
}

/* =========================================================
   FOOTER
   ========================================================= */

section footer {
    border-top: 1px solid var(--color-border-muted);
    line-height: 4em;
    color: var(--color-gray-4);
}

.infobulle a {
    color: var(--color-green);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 1400px) {
    #demande_form_prets > .row,
    #demande_form_quotite > .row,
    #demande_form_qmessageContextuelItt > .row {
        flex: 1 0 100%;
    }
}

@media screen and (max-width: 1199px) {
    aside#sidebar {
        display: none;
    }

    section#content {
        left: 0;
        width: 100%;
        padding-left: var(--space-12);
        padding-right: var(--space-12);
    }

    .form-horizontal .form-group,
    .row {
        margin-right: calc(var(--space-12) * -1);
        margin-left: calc(var(--space-12) * -1);
    }

    [class^="col-"],
    .container,
    .container-fluid {
        padding-right: var(--space-12);
        padding-left: var(--space-12);
    }

    section#content > .panel > .panel-body {
        padding: var(--space-12) 0;
    }

    ._coreTarification form > .panel,
    .panel.ligneTarif {
        margin-bottom: var(--space-24);
    }

    input[type="radio"] + label,
    .radio-boolean input[type="radio"] + label {
        padding-left: var(--space-40);
    }

    input[type="radio"] + label::before {
        left: var(--space-8);
    }
}