/**
 * Vars
 * @todo devrait peut-être être replacées dans public.css ?
 */
* {
        --primary-color:#00B0F0; 
        --primary-color-light:#EEF9FF; 
        --primary-color-light-border:#BFE9FF;   /* bordure d'un bloc avec background "primary-color-light" */
        --primary-color-text:#0389BA;
        --primary-color-dark:#029dd5;
        --warning-color:#FFF5EE;
        --warning-color-border:#FFE2BF;
        --warning-color-text:#BC6A00;
        --success-color:#D6E9C6;
        /* --success-color-border:#468847; */
        --success-color-border:#c4cfc5;
        --success-color-text:#468847;
        --panel-border-radius:10px;
        --panel-background:#fff;
        --panel-padding:20px 30px;
        --panel-gap:25px;
        --text-font-family: Open Sans;
}
/* 
 * @todo devrait peut-être être replacé dans public.css ?
 */
@media screen and (min-width:1600px)
{
        .container {
                max-width:1400px;
        }
}

/**
 * Styles génériques
 */
 
html, body {
        /* empêche le pull-to-refresh sur mobile */
        overscroll-behavior: none;
}
.btn.btn-primary {
        background:var(--primary-color);
        border-color:var(--primary-color);
}
.btn.btn-primary:hover {
        background:var(--primary-color-dark);
        border-color:var(--primary-color-text);
}
.alert.alert-primary {
        background:var(--primary-color);
        border-color:var(--primary-color-border);
        color:var(--primary-color-text);
}
.alert.alert-success {
        background:var(--success-color);
        border-color:var(--success-color-border);
        color:var(--success-color-text);
}
.alert.alert-warning {
        background:var(--warning-color);
        border-color:var(--warning-color-border);
        color:var(--warning-color-text);
}
.form-horizontal .control-label {
        padding-top:0;
}

/**
 * Panels
 */
.panel {
        background: var(--panel-background);
        border-radius: var(--panel-border-radius);
        padding: var(--panel-padding);
        box-shadow:none;
}
.panel .panel-heading {
        background:none;
        color:inherit;
        font-size:16px;
        padding:0;
        margin-bottom:16px;
        display: flex;
}
.panel .panel-heading .panel-heading-label {
        flex-grow:1;
}
.panel .panel-heading svg {
        width:20px;
        margin-right:3px;
        vertical-align: sub;
}
.panel .panel-heading .btn {
        font-family:var(--text-font-family);
        text-transform: none;
}
.panel .panel-body {
        padding:0;
}
.panel .panel-body a:not(.btn) {
        color:var(--primary-color-text);
}
.panel h3 {
        font-weight: bold;
}

.modal .panel {
        border:solid 1px #ddd;
        padding:0;
}
.modal .panel .panel-heading {
        padding:10px 15px;
        margin-bottom:0;
        display:block;
}
.modal .panel .panel-heading.error {
        color:#b94a48;
}
.modal .panel .panel-heading[data-toggle="collapse"] {
        cursor:pointer;
}
.modal .panel .panel-body {
        padding:15px;
}

/**
 * Form menu
 */
.form-menu {
        margin-top:10px;
        margin-bottom: var(--panel-gap);
        display:flex;
}
.form-menu .form-menu-items {
        list-style: none;
        margin:0;
        padding:0;
        flex-grow:1;
}
.form-menu .form-menu-items li a {
        display: inline-flex;
        padding: 8px 12px 8px 12px;
        align-items: center;
        gap: 5px;
        border-radius: 4px;
        border: 1px solid #C2C2C2;
        background: #FFF;
        color:inherit;
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
}
.form-menu .form-menu-items li a:hover {
        text-decoration: none;
        background:var(--primary-color);
        border-color: var(--primary-color);
}
.form-menu .user-info a {
        border-radius: 4px;
        border: 1px solid #C2C2C2;
        background: #FFF;
        padding: 8px 12px 8px 12px;
        color:inherit;
        display:block;
}

/**
 * Form header
 */
.form-header {
        display:flex;
        flex-wrap: wrap;
        gap:20px;
        margin-top: var(--panel-gap);
        margin-bottom: var(--panel-gap);
}
.form-header .form-logo {
        max-width:140px;
}
.form-header .form-title {
        font-size: 36px;
        font-weight: 700;
        text-transform: uppercase;
}
.form-header .user-account {
        position: absolute;
        top: 20px;
        right: 0px;
        padding: 10px 10px 10px 15px;
        align-items: center;
        border-radius: 5px;
        background: #FFF;
        overflow:hidden;
        transition:.2s;
}
.form-header .user-account .glyphicon{
        top:0;
}
.form-header .user-account:not(.dropdown-visible):hover {
        background:var(--primary-color-light);
}
.form-header .user-account .user-account-btn {
        display: flex;
        cursor:pointer;
        align-items: center;
}
.form-header .user-account .user-account-btn .user-account-btn-label {
        margin-left:10px;
        margin-right:20px;
}
.form-header .user-account .user-account-btn .user-account-btn-label .user-mail {
        font-weight: bold;
}
.form-header .user-account .user-account-btn .user-account-btn-label .sub-label {
        font-size:12px;
}
.form-header .user-account .user-menu {
        display:none;
        flex-basis:100%;
        flex-direction: column;
        font-size: 14px;
        padding-top: 5px;
        gap: 3px;
        text-align: center;
}
.form-header .user-account.dropdown-visible .user-menu {
        display:flex;
}
.form-header .user-account.dropdown-visible .user-menu {
        display:flex;
}
.form-header .user-account-btn .glyphicon-menu-down {
        transition:.2s;
}
.form-header .user-account.dropdown-visible .glyphicon-menu-down {
        transform:rotate(-180deg);
}


/**
 * Inputs
 */
.input.required label:after {
        content:' *';
}
.input.document.required label:after {
        content:none;
}

/**
 * Steps
 */
.nav-steps {
        margin-bottom: var(--panel-gap);
}
.nav-steps ul {
        background: var(--panel-background);
        border-radius: var(--panel-border-radius);
        padding: var(--panel-padding);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
        list-style: none;
        margin:0;
}
.nav-steps .step {
        flex-shrink: 0;
}
.nav-steps .step .step-name {
        display: flex;
        align-items: center;
        gap: 10px;
        color: inherit;
        font-size: 16px;
}
.nav-steps .step .step-name:focus {
        outline:none;
}
.nav-steps .step.active .step-name {
        color: var(--primary-color-text);
        font-weight: 700;
}
.nav-steps .step.disabled .step-name {
        color: #9C9C9C;
}
.nav-steps .step a.step-name:hover,
.nav-steps .step a.step-name:focus {
        text-decoration: none;
}
.nav-steps .step a.step-name:hover .step-name-text {
        text-decoration: underline;
}
.nav-steps .step .step-name .step-num {
        flex-shrink:0;
        display: flex;
        width: 32px;
        height: 32px;
        line-height: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 50%;
        border: solid 1px #C2C2C2;
        color:#9C9C9C;
        background: #fff;
        font-weight:normal;
        position:relative;
}
.nav-steps .step.active .step-name .step-num {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color:#fff;
}
.nav-steps .step.passed .step-name .step-num {
        border-color: var(--primary-color);
        color:var(--primary-color);
}
.nav-steps .step.passed .step-name .step-num {
        font-size:0;
}
.nav-steps .step.passed .step-name:hover .step-num {
        text-decoration:none;
}

.nav-steps .step.passed .step-name .step-num:after {
        content:'';
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width:70%;
        height:70%;
        background-color: var(--primary-color);
        mask:url(../img/glyphicons/print.php?icon=739-check);
        background-size:contain;
        background-repeat: no-repeat;
}
.nav-steps .step.after-current.passed .step-name .step-num {
        font-size: inherit;
}
.nav-steps .step.after-current.passed .step-name .step-num:after {
        content:none;
}

/**
 * Form content layout (avec ou sans form-wrapper : si form-content a un form pour enfant, c'est sur lui qu'on applique le layout)
 */
.form-content:not(.form-wrapper),
.form-content.form-wrapper > form {
        display:flex;
        gap:25px;
}
/* .form-content .form-step-content,
.form-content .form-step-content-after .form-resume {
        background:var(--panel-background);
        border-radius:var(--panel-border-radius);
        padding: var(--panel-padding);
} */
.form-content .form-step-content {
        flex: 1;
        display: flex;
        flex-direction: column;
}
.form-content .form-step-content-after {
        flex-basis:390px;
}
.form-content .form-step-content-after .form-resume {
        margin-bottom:var(--panel-gap);
        max-width: 390px;
}
.form-content .form-step-content-after .form-resume .form-resume-item:not(:last-child) {
        margin-bottom:30px;
}
.form-content .form-step-content-after .form-resume .card {
        flex-basis:100%;
}
.form-content .form-step-content-after .form-resume .documents-list a {
        color:inherit;
}
.form-content .form-step-content-after .form-resume .order-amount {
        display:flex;
        margin-bottom:5px;
}
.form-content .form-step-content-after .form-resume .order-amount .price-label {
        flex:1;
}
.form-content .form-step-content-after .submit button {
        display: block;
        width: 100%;
        text-align: left;
}
.form-content .form-step-content-after .submit button.disabled {
        opacity: .3;
}
.form-content .form-step-content-after .submit button .glyphicon {
        margin-right:5px;
}
.form-content .form-step-actions {
        display: none;
}

/**
 * Form footer
 */
.form-footer {
        background:var(--panel-background);
        border-radius:var(--panel-border-radius);
        padding: var(--panel-padding);
        margin-top:25px;
        margin-bottom:25px;
}

/*
 * Documents
*/
.step-documents .status-alert {
        margin-top:-10px;
        margin-bottom:15px !important;
        font-weight:bold;
}
.step-documents .document-description {
        margin-top:-15px;
        margin-bottom:20px;
        font-style:italic;
        font-size:11px;
}
.step-documents .status-alert + .document-description {
        margin-top:-10px;
}
.document .message-status {
        display: inline-block;
        padding: 1px 10px;
        float: right;
        font-size:12px;
}
.document .message-status .glyphicon {
        font-size:12px;
}
.document .document-info {
        width:18px;
        height:18px;
        background:url('../img/glyphicons/print.php?icon=635-circle-question&color=aaaaaa');
        position:absolute;
        right:0;
        top:2px;
}
.dropzone-container {
        position:relative;
}


/* 
 * Small screens
 */
@media screen and (max-width:1200px)
{
        .nav-steps ul {
                gap:20px;
        }
        .step-paiement #price-variation-select {
                margin-bottom:10px;
        }
}

/* 
 * Tablets
 */
@media screen and (max-width:991px)
{
        .form .form-header {
                padding-bottom: 0;
                align-items: center;
        }
}

/* 
 * Smartphones
 */
@media screen and (max-width:991px)
{
        * {
                --panel-gap:15px;
        }
        
        #content {
                padding:15px;
                overflow:hidden;
        }
        .panel {
                padding:15px 20px;
                margin-bottom:15px;
        }
        .form-menu {
                margin-top:0;
        }
        .form-header {
                gap: 12px;
        }
        .form-header .form-logo {
                max-width: 100px;
        }
        .form-wrapper .form-header .form-logo {
                display:none; /* tunnel inscription */
        }
        .form-header .form-title {
                font-size: 20px;
                margin: 0;
        }        
        .form-header .user-account {
                position: static;
                flex-basis:100%;
                order: -1;
                font-size:12px;
                right: 15px;
                padding: 8px 12px 8px 12px;
                border: 1px solid #C2C2C2;
        }
        .form-header .user-account .user-account-btn .user-account-btn-label {
                flex: 1;
        }
        .form-header .user-account .btn {
                font-size:14px;
                margin-top:5px;
                padding:5px;
        }
        .form-footer {
                display: none;
        }
        
        .nav-steps ul {
                display:flex;
                flex-direction:column;
                align-items:start;
                gap:10px;
                padding:15px 20px;
        }
        .nav-steps .step {
                padding-bottom: 7px;
                border-bottom: solid 1px #ddd;
                width: 100%;
        }
        .nav-steps .step.active {
                border-bottom: 0;
                padding-bottom: 0;
        }
        .nav-steps .step.after-current {
                display:none;
        }
        .nav-steps .step .step-name {
                
        }
        .form-content {
                padding-bottom: 100px;
        }
        .form-content .form-step-content-after {
                position:fixed;
                bottom:0;
                left:0;
                right:0;
                background: #fff;
                padding: 20px;
                z-index: 2;
                box-shadow: 0px 2px 7px 3px rgba(0, 0, 0, .2);
        }
        .form-content .form-step-content-after .form-resume {
                padding:0;
                height:0;
                margin:0;
                overflow:hidden;
        }
        .form-content .form-step-content-after .form-resume.visible {
                height:auto;
        }
        .form.step-paiement #gateway-forms .gateway-form {
                padding-top:0;
        }
}