/**********************************
 * HTML tags
 **********************************/
html { font-size: 62.5%; }

@media screen and (max-width: 1200px) {
    html { font-size: 0.83vw; }
}
body {
    background-color: #FFFFFF;
    color: black;
    font-size: 1.8rem;
    line-height: 1.8;
    font-family: Arial, Verdana;
}
h1, h2, h3, h4, h5 { color: #1365AD; margin: 0 0 1em 0; font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.titre-bleu { background-color: #1365AD; color: #FFFFFF; text-align:center; }
h1 { font-size: 3rem; font-weight: normal; margin: 0.5em 0 0.5em 0; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2.8rem; }
a { color: #1365AD; cursor: pointer; }
.link { cursor: pointer; }
a:hover, .link:hover { text-decoration: underline; }
p { text-align: justify; }
hr { margin: 2px auto; background-color: #1365AD; }
img { border: none; max-width: 100%; }
sub, sup { font-size: 1.3rem; line-height: 1.3rem; font-style: italic; }

ul > li:not(.nav), ul > li:not(.nav):before,
ul > li:not(.nav) > .form-control > label:first-child,
ul > li:not(.nav) > .form-control > label:first-child + span { line-height: 2.2rem; }

dl { display: block; line-height: 1.5; margin-bottom: 0.5rem; }
dt { display: block; width: 10em; text-align: right; margin-right: 1em; font-weight: bold; float: left; }
dd { display: block; margin-left: 11em; min-height: 1em; }

.left > dl > dt { text-align: left; }

.rows > .row { padding: 0 2rem; position: relative; }
.rows > .row.row-first { padding: 0 1rem 0 0; }
.rows > .row.row-last { padding: 0 0 0 1rem; }
.row .graph > svg { max-height: 40rem; margin-top: 1rem; }

/**********************************
 * Templates
 **********************************/
#header {
    display: block;
    background: #1365AD;
    border-bottom: solid 1px #1365AD;
    height: 6rem;
    line-height: 6rem;
    text-align: center;
    z-index: 10;
    color: #FFFFFF;
}
#header .logo, #header .logo > * { display: inline-block; max-height: 4.5rem; line-height: 4.5rem; }
#header .logo { margin-top: 0.5rem; }
#header > .wrapper > .nav.nav-main { float: left; }
#header > .wrapper > .nav.nav-session { float: right; }
.select-lang { height: 4.2rem; line-height: 4.2rem; margin-top: 0.9rem; z-index: 99; }
#header .select-lang a.select-btn { background-color: #1365AD; border: none; }
#main {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 12rem;
    bottom: 0;
    overflow: auto;
    z-index: 1;
}
#header + #main { top: 6rem; }

.wrapper .wrapper { max-width: 140rem; margin: auto; padding: 1rem 2rem 0 2rem; }
.wrapper .wrapper-full { margin: auto; padding: 0 2rem; }

#footer {
    background-color: #f4f4f4;
    margin-top: 20rem;
    padding: 2rem 5rem;
}
#footer a { color: #000000; }
#footer a:hover { color: #1365AD; text-decoration: underline; }
#footer > .rows > .row > *:first-child { display: inline-block; margin: auto;  }

/**********************************
 * Autres
 **********************************/
.text-success { color: #3c763d; }
.text-primary { color: #1365AD; }
.text-warning { color: orange; }
.text-danger { color: #DA3A3A; }

.modal {
    transition: opacity 0.4s linear, visibility 0.4s linear;
    overflow: auto;
}
.modal:target, .modal.active {
    transition: opacity 0.4s linear;
}
.modal > .modal-window {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    text-align: left;
    margin-top: 4.2rem;
    margin-bottom: 2rem;
    min-width: 25%;
    max-width: 118rem;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.modal > .modal-window > .modal-header > a.btn.btn-icon.btn-close,
.modal > .modal-window > a.btn.btn-icon.btn-close {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 2rem;
}
.modal > .modal-window > .modal-content {
    max-height: none;
}
.modal.modal-confirm > .modal-window { margin-top: 4.2rem; }
.modal > .modal-window > .modal-footer > .nav-toolbar > li { float: right; }

.box {
    display: block;
    position: relative;
    border: none;
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 2rem;
    background-color: #FFFFFF;
    box-shadow: 0.2rem 0.2rem 1rem #AAAAAA;
}
.box.box-gray { background-color: #E2E2E2; }
.anoter {
    background-color: #1365AD;
    color: #FFFFFF;
    border-radius: 0.4rem;
    padding: 2rem;
    text-align: center;
}

.signin-form { display: block; margin: 2rem auto; padding: 3rem; text-align:center; max-width: 110rem; }
.signin-form .box > * { margin-bottom: 2.5rem; text-align: center; }
.signin-form .box { height: 50rem; }
.signin-form .nav-toolbar > li { display: block; margin: 0; width: 100%; }
.signin-form input[type=text], .signin-form input[type=password] { width: 100% !important; }
.signin-form input[type=submit] { text-align: center; }

.commande_rapide {
    overflow: visible;
    background-color: #e3e3e3;
    color: #215ba6;
    margin: 2rem 0 0.5rem 0;
    padding: 1rem 2rem 1rem 10rem;
    font-size: 2.2rem;
    z-index: 99;
}
#commande_rapide {
    display: inline-block;
    position: relative;
    overflow: visible;
    z-index: 99;
}
#commande_rapide > input[type=text] {
    background-color: #e3e3e3;
    color: #535353;
    text-align: center;
    border: solid 1px #FFFFFF;
    font-size: 2rem;
    line-height: 4.6rem;
    width: 30rem;
    margin-left: 2rem;
}
#commande_rapide  #commande_rapide_result {
    display: none;
    position: absolute;
    left: 0;
    top: 102%;
    max-width: 120rem;
    min-width: 90rem;
    padding: 0;
    margin: 0;
}
#commande_rapide:hover  #commande_rapide_result,
#commande_rapide > input:focus + #commande_rapide_result,
#commande_rapide  #commande_rapide_result:target,
#commande_rapide  #commande_rapide_result:hover,
#commande_rapide.active #commande_rapide_result {
    display: block;
}
.table.table-commande-rapide { box-shadow: 2px 2px 4px #000; border: solid 1px #CCC; background-color: #FFF; }

.resume > div:after { content: ""; display: block; clear: both; }
.resume > div > label { float: left; }
.resume > div > label + span { float: right; text-align: right; }

.nav.nav-tabs.nav-ouverture-compte { margin: 0 2rem; }
.nav.nav-tabs.nav-ouverture-compte > .tab > .tab-tab { width: 50%; }
.nav.nav-tabs.nav-ouverture-compte > .tab:nth-child(2) > .tab-tab { left: 50%; }

/**********************************
 * Fin
 **********************************/