/* 
    Theme Name: Finance Conseil
*/
* { box-sizing: border-box; }
html { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
a { color: #473aa5; }
a:hover { color: #6b5dcf; }
a:active { color: #cf5d5d; }
input, textarea, select, button { max-width: 100%; border-radius: 4px; border: 1px solid #818181; padding: 8px; font-size: 1rem; }
textarea { min-height: 100px; }
button, input[type="submit"] { cursor: pointer; background: #473aa5; border-color: #3e30a3; color: #fff; }
button:hover, input[type="submit"]:hover { background: #6b5dcf; }
button[disabled] { opacity: 0.5; }
details { background: #fff; padding: 20px; border-radius: 4px; border: 1px solid #c6c6c6;}
details[open] > summary { padding-bottom: 20px; }
details > summary { cursor: pointer; }
table, th, td { border: 1px solid #000; border-collapse: collapse; }
table { width: 100%; }
th, td { padding: 10px; text-align: left; }

/* Layout */
.flex { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.flex > div { flex: 1; padding: 0 10px; }
/* -- Layout */

/* Utils */
.button-close { background: #cf5d5d; color: #fff; border-color: #9d2f2f; }
.button-close:hover { background: #ee7777; }
/* -- Utils */

header { padding: 20px; background: #f2f2f2; }

#sidebar { position: fixed; height: 100%; width: 300px; background: #ededed; padding: 20px; overflow: auto;}
#sidebar input, #sidebar select, #sidebar textarea { width: 100%; }

#content { margin-left: 300px; padding: 20px; }
#content h2 { border-bottom: 1px solid #939393; padding-bottom: 10px; }

#broker { background: #ededed; display: flex; border-radius: 20px; margin-bottom: 20px; padding: 20px; align-items: center; }
#broker-coordonnees { margin-left: 20px; }
#broker-coordonnees span { display: inline-block; background: #f9f9f9; padding: 8px; border-radius: 4px; }
#logo-finance-conseil { flex: 1; text-align: right; margin: 0 40px; }
#logo-finance-conseil img { height: 50px; width: auto; }
#logout { text-align: right; }

#share-link { display: flex; }
#share-link-copy { cursor: pointer; display: flex; align-items: center; margin-left: 10px; }
#share-link-url { background: #f2f2f2; padding: 8px; border-radius: 4px; }
#share-link-copy span { background: #473aa5; color: #fff; font-size: 0.7rem; line-height: 1rem; padding: 0 0.25rem; margin-left: 4px; border-radius: 4px; }

.offers { display: flex; margin: 0 -20px; }
.offer { flex: 1; padding: 20px; margin: 0 20px 20px 20px; background: #ededed; border-radius: 20px;}

#popin-lead-form-overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,0.8); }
#popin-lead-form-overlay .button-close { display: block; margin-left: auto; }
#popin-lead-form-wrap { width: 600px; max-width: 90%; position: absolute; top: 50%; left: 50%; padding: 20px; border-radius: 20px; background: #ededed; transform: translate(-50%, -50%); }
#popin-lead-form-wrap input, #popin-lead-form-wrap select, #popin-lead-form-wrap textarea { width: 100%; }
.popin-close { display: none; }

footer { text-align: center; }

@media (max-width: 900px){
    /* Layout */
    .flex { flex-direction: column; }
    /* -- Layout */
    #sidebar { position: relative; width: auto; }
    #content { margin-left: 0; }
    #broker { flex-direction: column; }
    #broker-coordonnees { margin-left: 0; background: #f9f9f9; padding: 8px; border-radius: 4px; }
    #broker-coordonnees span { padding: 8px 0; display: block; border-radius: 0; }
    .offers { flex-direction: column; margin: 0; }
    .offer { margin: 0 0 20px 0; }
}