:root {
    --light: #32A0E8;
    --light2: #C1E2F7;
    --bleu: #005B96;
    --bleu2: #53A3D7;
    --bleu3: #4282ac;
    --bleu4: #86BEE3;
    --hard_blue: #002D4B;
    --dark_blue: #001524;
    --apptheme: #00070c;
    --black_blue: #00070c;
    --rouge: #D62D20;
    --rouge2: #7F0622;
    --vert: #2C8E7E;
    --vert2: #79CC79;
    --font: #252525;
    --light_font: #646464;
    --xlight: #A0B4C0;
    --bleu_f: #003F69;
    --greyLine: #cccccc;
    --grey2: #AEB1B4;
    --brown: #D78753;
    --brown2: #ac6c42;
    --brown3: #965e3a;
    --brown4: #815131;
    --line: #E0E5E9;
    --line2: #EFF2F4;
    --inset : #001524;
    --body : #F5F7FB;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    scrollbar-width: thin;
    box-sizing: border-box;
}

input[type=checkbox] {
    background: white
}

body {
    -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
    -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
    user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
    background: var(--body);
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 12px;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    width: 100%;
    color: var(--hard_blue)
}


.top_inset{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 220;
    width: 100%;
    height: env(safe-area-inset-top, 32px);
    background: var(--inset);

}
#app_content {
    display: block;
    position: relative;
    height: 100vh;
}
#app_content::before{

    display: block;
    position: relative;
    height: 50px;
}
.main {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

/*************** ELECTRON ********************/

#navElectron {
    display: none;
    -webkit-app-region: drag;
}

body[data-device="electron"] #navElectron {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    height: 32px;
    color: var(--font);
    background: white;
    border-bottom: 1px solid var(--line);
    -webkit-app-region: drag;
}

body[data-device="electron"] #navElectron.dark {
    color: white;
    background: var(--apptheme);
    border-bottom: 0
}

#navElectron table {
    width: 100%;
    height: 100%;
}

#navElectron table td {
    position: relative
}

#navElectron table #version {
}

#navElectron table #version img {
    position: absolute;
    height: 16px;
    width: 16px;
    top: 0;
    bottom: 0;
    left: 8px;
    border-radius: 50%;
    margin: auto
}

#navElectron table #version span {
    display: block;
    position: absolute;
    height: max-content;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 30px;
    font-size: 1em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#navElectron table #minimize,
#navElectron table #context,
#navElectron table #exit {
    text-align: center;
    cursor: pointer;
    width: 45px;
    -webkit-app-region: no-drag;
    font-size: 1.2em
}

#navElectron table #exit:hover {
    background: #F3101C;
    color: white
}

#navElectron table #exit:active {
    opacity: .7
}

#navElectron table #context,
#navElectron table #minimize {
    font-size: 1em
}

#navElectron table #context:not(.whide) .fa-window-restore {
    display: none;
}

#navElectron table #context.whide .fa-square-full {
    display: none
}

#navElectron table #context:hover,
#navElectron table #minimize:hover {
    background: var(--bleu)
}

#navElectron table #context:active,
#navElectron table #minimize:active {
    background: var(--xlight)
}

body[data-device="electron"] #app_content {
    padding-top: 32px;
}

body[data-device="electron"] .top_nav {
    top: 32px;
}

body[data-device="electron"] .content {
    padding-top: 32px;
}

body[data-device="electron"] .navigation {
    top: 80px;
}

body[data-device="electron"] menu {
    top: 80px;
}

body[data-device="electron"] #login[data-connex="on"] {
    padding-top: 17em
}

body[data-device="electron"] #login .avatar {
    top: 5.5em
}

body[data-device="electron"] #signup {
    padding-top: 3em;
}

/*** ELEMENTS **/
table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/** REFRESH ICON **/
.ptr--ptr {
    box-shadow: none !important;
    pointer-events: none !important;
    font-size: 0.85em !important;
    font-weight: bold !important;
    top: 2em !important;
    height: 0 !important;
    transition: height 0.3s, min-height 0.3s !important;
    text-align: center !important;
    width: 100% !important;
    overflow: hidden !important;
    align-items: flex-end !important;
    align-content: stretch !important;
    z-index: 2147483647 !important;
    position: fixed !important;
    display: flex !important;
}

.ptr--box {
    padding: 10px !important;
    flex-basis: 100% !important;
}

.ptr--pull {
    transition: none !important;
}

.ptr--text {
    margin-top: .33em !important;
    color: rgba(0, 0, 0, 0.3) !important;
}

.ptr--icon {
    color: rgba(0, 0, 0, 0.3) !important;
    transition: transform .3s !important;
}

/* When at the top of the page, disable vertical overscroll so passive touch listeners can take over. */
.ptr--top {
    touch-action: pan-x pan-down pinch-zoom !important;
}

.ptr--release .ptr--icon {
    transform: rotate(-90deg) !important;
    height: max-content !important;
}

.refresh_icon {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50px !important;
    position: relative !important;
    font-size: 18px !important;
    background: white !important;
    margin: auto !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27) !important;
    color: var(--brown) !important;

}

.refresh_icon i {
    display: block !important;
    width: max-content !important;
    height: max-content !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;

}

/***********************************/
/** LOGIN **/

#login * {
    box-sizing: border-box
}

#login {
    display: block;
    position: fixed;
    top: env(safe-area-inset-top, 32px);
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    background-image: linear-gradient(to bottom, rgba(245, 244, 240, 0.4), #CFCFCE);
    z-index: 150;
    padding: 16em 4.2em 1.5em;
}

#login section {
    max-width: 550px;
    margin: auto;
    display: block;
}

#login .avatar {
    display: block;
    width: 95px;
    height: 95px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    border: 1px solid var(--line);
    top: 4.5em
}

#login .avatar span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 83px;
    height: 83px;
    border-radius: 10px;
    background: #ccc;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    background-position: 50% 50%;
    background-image: url('../img/ico_res/ws_ico_256.png');
}

#login .choices {
    text-align: left;
    margin-bottom: 1.5em;
    color: var(--light_font);
    position: relative;
    width: max-content;
    padding-left: .2em;
    font-size: 13px;
    display: inline-block;
    margin-right: .5em
}

#login .choices h2 {
    height: 1.7em;
    display: inline-block;
    margin-bottom: 4px;
}

#login #loader {
    font-size: 2em;
    position: relative;
    top: 2px;
    color: var(--light);

}

#login .choices h2::after {
    content: "";
    display: block;
    position: absolute;
    height: .1em;
    width: 100%;
    background: var(--bleu);
    bottom: 0;
}

#login input {
    background-color: rgba(255, 255, 255, 0.57);
    border-radius: 7px;
    color: #646464;
    height: 3.8em;
    border: 1px solid #ddd;
    font-size: 1.1em;
    padding: .8em;
    display: block;
    margin-bottom: 18px;
    padding-left: 1.2em;
    width: 100%
}

#login input:focus {
    border: 2px solid var(--bleu);
}

#logo input::placeholder {
    text-transform: uppercase;
}

#login button {
    color: #fff;
    background: linear-gradient(to bottom, var(--brown), var(--brown3));
    font-size: 18px;
    vertical-align: baseline;
    /*margin: 0 2px;*/
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    height: 45px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    -webkit-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
    width: 100%;
}

#login button:active {
    background: linear-gradient(to bottom, var(--brown4), var(--brown));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    position: relative;
    top: 3px;
}

#login #err_msg , #err_msg_2{
    display: block;
    margin-top: 1em;
    font-weight: bold;
    color: red;
    font-size: 1.5em;
    text-align: center
}

#login .processing {
    opacity: .5;
    pointer-events: none
}

#login input.pwd {
    margin-bottom: 0
}

#logAccess fieldset {
    position: relative;
    margin-bottom: 18px;
}

#eye_worder {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    height: max-content;
    margin: auto;
    right: 18px;
    font-size: 1.8em;
    cursor: pointer
}

#backStep {
    width: 18% !important;
    float: left;
    background: var(--grey2) !important;
}

#next_reg_2 {
    width: 78% !important;
    float: right
}

#logAccess .switcher, #signup .switcher {
    margin-top: 15px;
    display: block;
    text-align: center;
    font-size: 1.5em
}

#logAccess .switcher div, #signup .switcher div {
    color: var(--rouge2);
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    width: max-content;
    height: max-content;
    position: relative;
    font-weight: bold
}

#logAccess .switcher div:active, #signup .switcher div:active {
    color: var(--rouge);
    text-decoration: none
}

#logAccess select, #signup select {
    background-color: rgba(255, 255, 255, 0.57);
    border-radius: 7px;
    color: #646464;
    height: 3.4em;
    border: 1px solid #ddd;
    font-size: 1.1em;
    padding: .8em;
    display: block;
    margin-bottom: 12px;
    width: 100%;
    cursor: pointer;
}

#signup select:active, #signup select:focus {
    border: 2px solid var(--hard_blue)
}

#reg_access input {
    height: 3.4em;
    margin-bottom: 12px;
}

#reg_access input[type=checkbox] {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    padding: 5px;
    vertical-align: top;
    background: white
}

#reg_access label {
    font-size: 1.1em;
    cursor: pointer;
    top: -2px;
    position: relative;
    display: inline-block;
    width: 88%;
    margin-bottom: 15px;
}

.reg_stape {
    position: relative;
}

.reg_stape section{position: relative}
.reg_stape span[data-oeilton]{
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    height: max-content;
    margin: auto;
    right: 18px;
    font-size: 1.8em;
    cursor: pointer;
}

group {
    position: absolute;
    right: 0
}

group .step-1,
group .step-2,
group .step-3 {
    display: inline-block;
    cursor: not-allowed;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    background: var(--greyLine)
}

group .step-1 {
    margin-right: 12px
}

group .step-3 {
    margin-left: 12px
}

div[data-step="1"] group .step-1,
div[data-step="2"] group .step-2,
div[data-step="3"] group .step-3 {
    background: var(--rouge2)
}

div[data-step="2"] #signup .switcher {
    margin-top: 60px;
}

pannel {
    display: block;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
    background: #fff;
    border-radius: 5px;
    padding: 30px 40px;
    text-align: center;
    margin-bottom: 15px;
    position: relative
}

pannel i {
    display: block !important;
    margin: auto;
    width: max-content;
    font-size: 3.2em
}

pannel strong, pannel span {
    display: block;
}

pannel strong {
    margin-top: 20px;
    font-size: 1.5em;
    color: var(--rouge2)
}

pannel span {
    margin-top: 15px;
    font-size: 1.2em
}

/** MENU MOBILE**/

menu {
    display: block;
    position: fixed;
    top: 82px;
    bottom: 80px;
    right: 105%;
    width: 100%;
    background: #fff;
    z-index: 15;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 2px 0 0px rgba(0, 0, 0, 0.17);
    transition: right .3s ease;
}

menu .categories {
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
}

menu .correspondances {
    color: black;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 8;
    top: 0;
    background: var(--line2);
    overflow-y: scroll;
}

menu .correspondances div {
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
}

menu .correspondances div::before{
    content: "";
    display: block;
    position: relative;
    height: 8px;
}
menu .correspondances div .titre {
    display: block;
    font-size: 1.3em;
    padding: .8em 1.3em .3em;
    font-weight: bold;
    cursor: pointer;
    color: var(--rouge2);
    padding: 8px 18px;
    background: #fff;
    width: max-content;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.17);
    margin-left: 2.5%;
    margin-bottom: 8px;
}
menu .correspondances div .titre i{
margin-right: 6px;
}

#co_mes_criteres .detail {
    display: block;
    margin-left: 2.5%;
    margin-bottom: 12px;
}

#co_mes_criteres fieldset {
    display: block;
    position: relative;
    height: 5em;
    width: 95%;
    margin: auto;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.17);
    margin-bottom: 1.5em;
    overflow: hidden
}

#co_mes_criteres fieldset i {
    position: absolute;
    z-index: 3;
    height: max-content;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 1em;
    font-size: 1.3em;
    color: var(--hard_blue);
    pointer-events: none
}

#co_mes_criteres fieldset i.fa-angle-right {
    right: 1em;
    left: unset;
    color: var(--grey2);
}

#co_mes_criteres fieldset input {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    padding: .5em 2.3em .5em 3em;
    background: #FFF;
    color: black !important
}

#co_mes_criteres fieldset input:focus + i + i {
    display: none
}

#co_mon_profil .titre {
    margin-bottom: .8em
}

#co_mon_profil fieldset {
    display: block;
    position: relative;
    min-height: 4em;
    width: 95%;
    margin: auto;
    border-radius: 5px;
    margin-bottom: 1em;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.17);
}

#co_mon_profil fieldset.rappel {
    padding: 1em 1.5em;
    background: var(--light2);
    font-size: 1.2em;
    box-shadow: none;
}

#co_mon_profil fieldset.champs {
    background: #fff;
    padding: 1em
}

#co_mon_profil fieldset.champs * {
    background: white
}

#co_mon_profil fieldset.champs strong {
    display: block;
    font-size: 1.4em;
    margin-bottom: .5em;
    line-height: 2em;
    color: var(--rouge2);
}

#co_mon_profil fieldset.champs hr {
    border-top: 1px solid black;
    margin-bottom: .8em
}

#co_mon_profil fieldset.champs td {
    padding: 0 .4em
}

#co_mon_profil fieldset.champs tr {
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent

}

#co_mon_profil fieldset.champs input[type=number] {
    appearance: textfield;
}

#co_mon_profil fieldset.champs input,
#co_mon_profil fieldset.champs select {
    display: block;
    width: 100%;
    margin: auto;
    padding: .8em;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer

}

#co_mon_profil fieldset.champs input:focus {
    border: 2px solid var(--bleu);
    padding: .73em;
}

#co_mon_profil fieldset.champs input.error {
    border: 2px solid red;
}

#co_mon_profil .push_infos {
    display: block;
    width: 95%;
    background: var(--brown);
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
    font-size: 1.2em;
    padding: .7em;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    margin: 0 auto 1.5em
}

#co_mon_profil .push_infos:active {
    background: var(--brown2);
    top: 3px
}

#co_mon_profil fieldset.champs .crop_items {
    display: block;
    position: relative;
    margin-bottom: 1.5em
}

#co_mon_profil fieldset.champs .crop_items:first-of-type {
    margin-top: 1.5em
}

#co_mon_profil fieldset.champs .crop_items i {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    height: max-content;
    margin: auto;
    right: 1em;
    font-size: 1.6em;
    color: var(--brown)

}

#co_mon_profil fieldset.champs label {
    display: block;
    width: 100%;
    font-size: 1.4em
}

#co_mon_profil fieldset.champs label.iban_lab {
    margin-bottom: .5em
}

#co_mon_profil fieldset.champs .iban_num {
    background: var(--line2);
    display: inline-block;
    width: 86%;
    padding: .5em;
}

#co_mon_profil .pump-ground {
    display: block;
    position: relative;
    height: 2em
}

#co_parrainage .gift {
    display: block;
    position: absolute;
    top: 8em;
    bottom: 8em;
    left: 0;
    right: 0;
    margin: auto;
    padding: 3em;
    text-align: center;
    font-size: 1.5em;
    z-index: -2;
}

#co_parrainage .gift i {
    display: block;
    font-size: 2.5em;
    margin: 0 0 .5em;
    color: var(--brown);
}

#co_parrainage .gift .cond {
    display: block;
    position: absolute;
    bottom: 1em;
    left: 3em;
    right: 3em;
    text-align: left;
    font-size: .8em
}

#co_help .helpper {
    height: max-content;
    width: 90%;
    margin: auto;
    text-align: center;
    font-size: 1.3em
}

#co_help .helpper p {
    text-align: center;
    margin: 1em auto;
}

#co_help .helpper button {
    background: var(--brown);
    color: #fff;
    padding: 1em 1.5em;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1em;
}

#co_help .helpper button:active {
    opacity: .3
}

#co_help .helpper .seeHelp {
    display: block;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    margin-bottom: 1em;
    padding: 1em 0;
    cursor: pointer
}

#co_help .helpper .seeHelp:active a {
    opacity: .3
}

#co_help .helpper .seeHelp a {
    text-decoration: underline
}

#co_settings .logInfos {
    display: block;
    width: 90%;
    margin: auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    height: max-content;
    padding: .4em 1em 1em;
    font-size: 1.5em
}

#co_settings .logInfos strong {
    display: block;
    border-bottom: 1px solid black;
    line-height: 2em;
}

#co_settings .logInfos fieldset,
#co_settings .logInfos label,
#co_settings .logInfos input {
    display: block;
    width: 100%;
}

#co_settings .logInfos input {
    background: var(--line2);
    border: 1px solid var(--line);
    margin: .5em 0 1em;
    padding: .5em;
    border-radius: 4px;
    color: var(--bleu4);
}

#co_settings .logInfos input:focus {
    background: #fff
}

#co_settings .logInfos input.inactive {
    cursor: pointer;
    background: var(--line2);
}

#co_settings .logInfos input::placeholder {
    opacity: 1;
    color: var(--bleu4);
}

#co_settings .logInfos label {
    margin-top: .3em;
    font-size: .8em
}

#co_settings span {
    display: block;
    width: 90%;
    margin: 1.7em auto
}

#co_settings #delete_account {
    display: block;
    padding: 1em 1.5em;
    background: var(--rouge2);
    color: #fff;
    border-radius: 4px;
    font-size: 1.2em;
    cursor: pointer
}

#co_settings .logInfos.show #set_inputs_mail,
#co_settings .logInfos.show #set_inputs_mdp,
#co_settings .logInfos.show #set_account_close,
#co_settings .logInfos.show .logs_2,
#co_settings .logInfos.show .logs_3,
#co_settings .logInfos.show .logs_4,
#co_settings .logInfos.show .confirm_set_tools,
#co_settings .logInfos.editMail #set_inputs_infos,
#co_settings .logInfos.editMail #set_inputs_mdp,
#co_settings .logInfos.editMail #set_account_close,
#co_settings .logInfos.editMail .logs_1,
#co_settings .logInfos.editMail .logs_3,
#co_settings .logInfos.editMail .logs_4,
#co_settings .logInfos.editMail .delete_encart,
#co_settings .logInfos.editPass #set_inputs_infos,
#co_settings .logInfos.editPass #set_inputs_mail,
#co_settings .logInfos.editPass #set_account_close,
#co_settings .logInfos.editPass .logs_1,
#co_settings .logInfos.editPass .logs_2,
#co_settings .logInfos.editPass .logs_4,
#co_settings .logInfos.editPass .delete_encart,
#co_settings .logInfos.delete #set_inputs_infos,
#co_settings .logInfos.delete #set_inputs_mail,
#co_settings .logInfos.delete #set_inputs_mdp,
#co_settings .logInfos.delete .logs_1,
#co_settings .logInfos.delete .logs_2,
#co_settings .logInfos.delete .logs_3,
#co_settings .logInfos.delete + .delete_encart {
    display: none;
}

#co_settings td[data-idpass="abort_mdp"] span,
#co_settings td[data-idpass="maj_mdp"] span {
    color: #fff;
    padding: 1em 1.5em;
    display: inline-block;
    text-align: center;
    width: max-content;
    border-radius: 4px;
    font-size: .8em;
    cursor: pointer
}

#co_settings td[data-idpass="abort_mdp"] span:active,
#co_settings td[data-idpass="maj_mdp"] span:active,
#co_settings #delete_account:active {
    opacity: .3
}

#co_settings td[data-idpass="abort_mdp"] span {
    background: var(--bleu);
}

#co_settings td[data-idpass="maj_mdp"] span {
    background: var(--brown);
}

#co_settings .logInfos.delete td[data-idpass="maj_mdp"] span {
    background: var(--rouge2);
}

#co_settings td[data-idpass="abort_mdp"] {
    text-align: leftt
}

#co_settings td[data-idpass="maj_mdp"] {
    text-align: right
}

#co_settings #set_account_close p {
    font-size: .9em;
    margin-top: .5em
}

#co_settings #set_account_close p + p {
    display: block;
    margin-top: 3em;
    font-style: italic
}

menu table .topLine {
    height: 6em;
    position: relative
}

menu .marque {
    display: inline-block;
    height: 6em;
    width: 50%;
    position: relative;
    padding-top: .5em;
}

menu .marque .avatar1 {
    display: inline-block;
    height: 4em;
    width: 4em;
    margin: auto;
    margin-left: 1em;
    background: url(../img/favicon.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    position: absolute;
    top: 0;
    bottom: 0;

}

#userName {
    display: inline-block;
    font-size: 1.2em;
    left: 5em;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: max-content;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#userName span {
    display: block;
    position: relative;
    white-space: nowrap;
}

#userName span:last-of-type {
    color: var(--greyLine)
}

menu table .topLine {
    cursor: pointer
}

menu table .topLine .arrow {
    font-size: 1.5em;
}

menu table .titleGroup {
    color: var(--brown);
    pointer-events: none;
    border-bottom: 10px solid transparent;
    border-top: 15px solid transparent;
    font-weight: bold;
}

menu table #criterium {
    border-top: none
}

menu table .titleGroup hr {
    border-top: 1px solid var(--greyLine);
    display: block;
    /*width: 80%;*/
    margin: 0px auto 0.5em
}

menu table .docs .rubrique {
    height: 2em;
    white-space: nowrap;
    font-size: 1.4em;
    position: relative;
}

menu table .rubrique {
    cursor: pointer;
}

menu table .rubrique span {
    display: inline-block;
}

menu table .rubrique span:first-of-type {
    width: 1.2em;
    margin-right: 18px;
    padding-left: .8em;
}

menu table .arrow {
    right: 1em;
    position: absolute;
    top: 0;
    bottom: 0;
    height: max-content;
    margin: auto;
    color: var(--grey2)
}

menu table .rubrique:active,
menu table .topLine:active {
    opacity: .5
}

menu .version td{
    height: 1em;
    text-align: center;
    color: #9CA0A3;
    background: var(--line);
    opacity: .8
}

menu .switchOff {
    height: 3em;
    text-align: center;
    color: var(--rouge);
    font-size: 1.5em
}

menu .switchOff:active {
    background: var(--line);
    opacity: .2
}

menu .switchOff div {
    line-height: 3em;
    width: max-content;
    display: block;
    cursor: pointer;
    margin: auto;
}

.hideMenu {
    font-weight: bold;
    color: var(--rouge);
}

/** MENU NAVIGATION **/
.navigation {
    position: fixed;
    overflow-y: auto;
    background: var(--hard_blue);
    display: block;
    width: 20em;
    left: -20em;
    top: 82px;
    bottom: 0;
    height: 100%;

}

.navigation span {
    display: block;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    height: 70px;
    color: rgba(255, 255, 255, .9);
    font-size: 1.05em;
    text-transform: uppercase;
    font-weight: bold
}

.navigation span table td{vertical-align: middle}

.navigation span table td:first-of-type {
    width: 50px;
    text-align: center;
    border-left: 6px solid transparent;
}

.navigation span i {
    position: relative;
    top: -.05em;
}

.navigation span:active,
.navigation span:hover,
.navigation span.active {
    background: var(--dark_blue)
}

/** TOP NAV **/
.top_nav {
    display: block;
    position: fixed;
    width: 100%;
    background: #fff;
    height: 82px;
    border-bottom: 1px solid var(--line);
    font-size: 1.7em;
    cursor: pointer;
    font-weight: bold;
    min-height: 50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    z-index: 10
}

.top_nav table {
    width: 100%;
    height: 100%
}

.top_nav .menu_bars {
    display: none
}

.top_nav .menu_bars {
    text-align: center;
    width: 3.5em
}

.top_nav .menu_bars .fa-arrow-right,
body.cropMenu .top_nav .menu_bars .fa-bars {
    display: none;
}

body.cropMenu .top_nav .menu_bars .fa-arrow-right {
    display: block;
}

.top_nav .menu_bars .fa-arrow-right {
    display: none
}

.top_nav .gosearch {
    color: black;
    font-size: .7em;
    padding-left: 1em;
    display: none !important
}

.top_nav .item {
    padding-left: 1em;
    text-align: left;
    color: var(--brown);
}

#onMenu {
    position: relative;
    display: none;
    background: white;
    height: 00%
}

.showMenu #onMenu {
    display: table-cell
}

.showMenu #currentPage {
    display: none
}

/*//// CONTENT ////*/
#missions .display {
    display: block;
    border-radius: 5px;
    background: white;
    position: relative;
    height: max-content;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    overflow: hidden;
    padding: 0 15px 0 50px;

}

#missions .display hr {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
}

#missions .display div {
    display: block;
    line-height: 3.8em;
    font-size: 1.4em;
    position: relative;
    cursor: pointer
}

.docTheme {
    color: var(--rouge2)
}

.docTheme i {
    margin-right: 5px
}

#missions .display div:hover {
    font-weight: bold
}

#missions .display div i {
    position: absolute;
    height: max-content;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;

}

#missions .display div i:first-of-type {
    left: -32px
}

#missions .display div i:last-of-type {
    color: var(--grey2);
    right: .5em
}

/** => USER SPAN **/
.content {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    padding: 1em;
    height: max-content;
    top: 82px;
}

.content .user {
    display: block;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27);
    border-radius: 4px;
    padding: 1em;
    background: white;
    color: var(--bleu_f);

}

.content .user table td:first-of-type {
    width: 7em;
    text-align: center;
}

.content .user .ecusson {
    display: inline-block;
    height: 6em;
    width: 6em;
    background: url('../img/favicon.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.content .user table td:last-of-type {
    padding-left: 1.5em;

}

.content .user table td:last-of-type strong {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 1.5em;
}

.content .user table td:last-of-type strong:last-of-type {
    margin-bottom: 0.1em
}

/** => ACTIONS SPAN **/
.content .actions {
    display: block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27);
    border-radius: 4px;
    overflow: hidden
}

.content .actions .counter {
    position: absolute;
    width: 1.8em;
    height: 1.8em;
    background: #fff;
    border: 1px solid var(--hard_blue);
    border-radius: 50%;
    right: 0;
    top: -.5em;
    font-size: .8em;
    font-weight: bold
}

.content .actions .counter.active {
    color: #fff;
    background: var(--brown);
    border: none
}

.content .actions .counter span {
    display: block;
    width: max-content;
    height: max-content;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

}

.content .actions table td {
    text-align: center;
    padding: 1.4em;
    color: var(--bleu);
    background: #fff;
    position: relative;
    cursor: pointer
}

.content .actions table td:active {
    background: var(--bleu);
    color: #fff;
}

.content .actions table td:active .counter {
    color: var(--bleu);
}

.content .actions table td:active .counter.active {
    color: #fff;
}

.content .actions table td i {
    display: block;
    font-size: 3em;
    margin-bottom: .3em
}

.content .actions table td:not(:last-of-type){
    border-right: 1px solid var(--line);
}

.content .actions group {
    width: max-content;
    display: block;
    margin: auto;
    position: relative;
    min-width: 4em;
}

/** => CONTENT APERCU **/
.content .planner {
    display: block;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27);
    border-radius: 4px;
    overflow: hidden;
}

.content .planner .mission {
    padding: .8em 1.4em;
    border-bottom: 1px solid var(--line)
}

.content .planner .mission table tr td:nth-of-type(2) {
    width: 7em;
    font-size: 1.1em;
    text-align: right;
    padding-right: 1em
}

.content .planner .mission table tr td:last-of-type {
    width: 1.7em;
    font-size: 1.4em;
    text-align: center;
    padding-right: 0 !important
}

.content .planner .mission table tr td:first-of-type span {
    display: block;
    font-size: 1.1em;
    text-align: left
}

.content .planner .mission .date {
    color: var(--brown);
    font-weight: bold
}

.content .planner .mission .lieu {
    white-space: nowrap;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content .planner .mission .day,
.content .planner .mission .typo {
    display: inline-block !important
}

.content .planner .mission .typo {
    color: var(--xlight)
}

.content .planner .mission .day {
    margin-left: .2em
}

.content .planner .mission .fa-sun {
    color: var(--brown)
}

.content .planner .mission i.fa-moon {
    color: var(--bleu2)
}

.info_section {
    font-weight: bold;
    display: block;
    margin: .5em 0;
    color: var(--rouge2);
    font-size: 18px
}

/** CALENDAR ***/
#calendrier section {
    margin-bottom: 1em;
}

#calendrier section .info_section {
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
    display: block;
    margin: .5em 0;
    font-weight: normal;
    color: var(--bleu)

}

#calendrier section .info_section i:first-of-type {
    color: var(--vert2)
}

#calendrier section .info_section i:nth-of-type(2) {
    color: var(--rouge)
}

#calendrier section .legend {
    display: block;
    font-style: italic;
    text-align: center;
    color: var(--bleu)
}

#calendrier section hr {
    border-bottom: 1px solid var(--greyLine);
    height: 12px;
}

#calendrier section .switchDates {
    cursor: pointer;
    padding-top: 15px;
    display: block
}

#calendrier section .switchDates table td {
    text-align: center;
    font-size: 18px
}

#calendrier section #lastMonth,
#nextMonth {
    width: 2em;
    text-align: center
}

#calendrier section #nowMonth {
    text-align: center
}

#calendrier section .switchDates table .off {
    color: var(--grey2);
    opacity: .7;
}

#calendrier section .dispos {
    display: block;
    width: 100%;
    min-height: 250px;
    border: 1px solid var(--greyLine);
    margin-top: 12px;
    border-radius: 5px;
    background: #fff;
    overflow: hidden
}

#calendrier section .dispos td {
    position: relative
}

#calendrier section .dispos td span {
    display: block;
    text-align: center;
    position: relative
}

#calendrier section .dispos td span i {
    font-size: 25px
}

#calendrier section .dispos td .day_title {
    font-size: 1.2em;
    margin: .6em auto 0
}

#calendrier section .dispos td .day_title_2 {
    font-size: 1.2em;
    margin: .5em auto 0
}

#calendrier section .dispos .preRow {
    pointer-events: none !important;
}

#calendrier section .dispos .preRow .day_title,
#calendrier section .dispos .preRow .day_title_2 {
    opacity: 0 !important;
    visibility: hidden;
    color: transparent
}

#calendrier section .dispos .outRange .day_title_2,
#calendrier section .dispos .outRange .morning,
#calendrier section .dispos .outRange .night {
    opacity: 0 !important;
    visibility: hidden;
    color: transparent;
    pointer-events: none !important;
}

#calendrier section .dispos .preRow .night i {
    transform: rotate(-45deg)
}

#calendrier section .dispos td .morning,
#calendrier section .dispos td .night {
    display: block;
    text-align: center;
    position: relative;
    cursor: pointer;
    width: auto;
    height: auto;
    margin: auto;
    margin: 1em auto .5em
}

#calendrier section .dispos td .night {
    margin-bottom: .7em
}

#calendrier section .dispos .fondo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.3em;
    background: #EFEFEF
}

#calendrier section .dispos td .morning.offset,
#calendrier section .dispos td .night.offset {
    color: var(--grey2)
}

#calendrier section .dispos td .morning.closed,
#calendrier section .dispos td .night.closed {
    color: var(--rouge)
}

#calendrier section .dispos td .morning.free,
#calendrier section .dispos td .night.free {
    color: var(--vert2)
}

#calendrier section .dispos table {
    display: none;
}

#calendrier section .dispos table tr td {
    border-top: 1px solid var(--grey2);
}

#calendrier section .dispos table tr:first-of-type td {
    border-top: none;
}

#calendrier section .dispos .browsed {
    display: table;
}

#calendrier .allFree {
    width: 100%;
    background: var(--bleu_f);
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
    font-size: 1.3em;
    padding: .5em;
    text-align: center;
    position: relative;
    display: block
}

#calendrier .allFree:active {
    background: var(--bleu3);
    top: 3px
}

#calendrier #confirm_all_free {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    cursor: pointer;
    z-index: 999
}

#calendrier #confirm_all_free #confirmer {
    display: block;
    position: absolute;
    width: 20em;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 10em;
    background: #fff;
    padding: 1.5em 2em;
    border-radius: 4px;
    font-size: 1.3em;
}

#calendrier #confirm_all_free #confirmer table {
    color: var(--font)
}

#calendrier #confirm_all_free #confirmer table tr:first-of-type {
    text-align: left;
}

#calendrier #confirm_all_free #confirmer table tr:last-of-type {
    height: 25%;
    font-weight: bold;
    color: #398564
}

#calendrier #confirm_all_free #confirmer table tr:last-of-type td:first-of-type {
    text-align: right
}

#calendrier #confirm_all_free #confirmer table tr:last-of-type td:last-of-type {
    text-align: right
}

#calendrier #confirm_all_free {
    display: none;
    pointer-events: none;
}

#calendrier #confirm_all_free.actifree {
    display: block;
    pointer-events: auto;
}

#calendrier #confirm_all_free #recaper {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40em;
    background: #fff
}

#calendrier #confirm_all_free #recaper i {
    color: var(--vert2);
    display: block;
    font-size: 12em;
    width: max-content;
    height: max-content;
    position: relative;
    top: .3em;
    margin: auto;
}

#calendrier #confirm_all_free #recaper p {
    font-size: 1.5em;
    top: 4.3em;
    display: block;
    margin: auto;
    width: max-content;
    height: max-content;
    position: relative
}

#calendrier #confirm_all_free #recaper div {
    font-size: 1.5em;
    top: 5.5em;
    display: block;
    margin: auto;
    width: max-content;
    height: max-content;
    position: relative;
    text-transform: uppercase;
    background: var(--brown);
    color: #fff;
    padding: .6em 2em;
    border-radius: 7px
}

#calendrier .allunFree {
    width: 100%;
    margin-top: 8px;
    background: var(--brown2);
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
    font-size: 1.3em;
    padding: .5em;
    text-align: center;
    position: relative;
    display: block
}

#calendrier .allunFree:active {
    background: var(--brown4);
    top: 3px
}

#calendrier #confirm_all_unfree {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    cursor: pointer;
    z-index: 999
}

#calendrier #confirm_all_unfree #confirmer_2 {
    display: block;
    position: absolute;
    width: 20em;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 10em;
    background: #fff;
    padding: 1.5em 2em;
    border-radius: 4px;
    font-size: 1.3em;
}

#calendrier #confirm_all_unfree #confirmer_2 table {
    color: var(--font)
}

#calendrier #confirm_all_unfree #confirmer_2 table tr:first-of-type {
    text-align: left;
}

#calendrier #confirm_all_unfree #confirmer_2 table tr:last-of-type {
    height: 25%;
    font-weight: bold;
    color: #398564
}

#calendrier #confirm_all_unfree #confirmer_2 table tr:last-of-type td:first-of-type {
    text-align: right
}

#calendrier #confirm_all_unfree #confirmer_2 table tr:last-of-type td:last-of-type {
    text-align: right
}

#calendrier #confirm_all_unfree {
    display: none;
    pointer-events: none;
}

#calendrier #confirm_all_unfree.actifree {
    display: block;
    pointer-events: auto;
}

#calendrier #confirm_all_unfree #recaper_2 {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40em;
    background: #fff
}

#calendrier #confirm_all_unfree #recaper_2 i {
    color: var(--vert2);
    display: block;
    font-size: 12em;
    width: max-content;
    height: max-content;
    position: relative;
    top: .3em;
    margin: auto;
}

#calendrier #confirm_all_unfree #recaper_2 p {
    font-size: 1.5em;
    top: 4.3em;
    display: block;
    margin: auto;
    width: max-content;
    height: max-content;
    position: relative
}

#calendrier #confirm_all_unfree #recaper_2 div {
    font-size: 1.5em;
    top: 5.5em;
    display: block;
    margin: auto;
    width: max-content;
    height: max-content;
    position: relative;
    text-transform: uppercase;
    background: var(--brown);
    color: #fff;
    padding: .6em 2em;
    border-radius: 7px
}

/** BOTTOM NAV **/
.bottom_nav {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    height: 80px;
    border-top: 1px solid var(--line);
    font-size: 2em;
    cursor: pointer;
    min-height: 80px;
    z-index: 99;
}
.bottom_nav::after{
    content: "";
    display: block;
    position: absolute;
    height: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--inset);
}

.bottom_nav table td {
    text-align: center;
    color: var(--xlight);
    vertical-align: top;
    padding-top: 15px;
}

.bottom_nav table td i {
    display: block;
    margin-bottom: 5px;
}

.bottom_nav table td.current {
    color: var(--brown)
}

.bottom_nav table td:active {
    background: var(--hard_blue);
    color: #fff
}

.bottom_nav table td .sticker {
    font-size: .6em;
    display: block;
}

.content .planner .mission:active {
    background: var(--bleu)
}

.content .planner .mission:active * {
    color: #FFF !important
}

.content .planner ._filer {
    display: none;
}

.content .planner.noData, .content #docview.noData {
    box-shadow: none;
    background: none;
    font-weight: bold;
    font-size: 1.4em;
    color: var(--greyLine)
}

.content .planner.noData .mission, .content #docview.noData .mission {
    display: none !important
}

.content .planner.noData ._filer, .content #docview.noData ._filer {
    display: block;
    text-align: center;
    padding-top: 50px
}

.content .planner.noData ._filer.view, .content #docview.noData ._filer.view{
    padding-top: 15px;
}

.content .planner.noData i, .content #docview.noData ._filer i {
    font-size: 4em;
    display: block;
    margin-bottom: 25px
}

#mission_back_btn {
    display: block;
    color: var(--rouge2);
    padding: 8px 18px;
    background: #fff;
    width: max-content;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.17);
    cursor: pointer
}

.docDisplayed{
    display: block;
    position: relative;
    padding: 10px 15px;
    background:white;
    border-radius: 5px;
    margin-bottom: 15px;
    color: var(--light_font);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.17);
}

.docDisplayed::before {
    display: block;
    white-space: pre;         /* respecte les retours à la ligne */
    text-align: left;
    content:
            /*"Fichier : " attr(id) "\A"*/
            /*"Origine : " attr(data-origin) "\A"*/
            "Début : le " attr(data-date_debut) "\A"
            "Durée : " attr(data-duree) "\A"
            "Taux rém : " attr(data-taux_pay) "%\A"
            "Départements : " attr(data-dept) "\A"
            "Spécialité : " attr(data-spec) "\A"
            /*"Urgent : " attr(data-urgt) "\A"*/
            "Réf : " attr(data-ref) "\A"
            /*"Statut : " attr(data-status) "\A"*/
            "Tel : " attr(data-tel) "\A"
            "E-mail : " attr(data-email);
}


.bottom_nav table td:last-of-type .fa-xmark,
body.showMenu .bottom_nav table td:last-of-type .fa-bars {
    display: none;
}
body.showMenu .bottom_nav table td:last-of-type .fa-xmark {
    display: block;
}


/** MENU MOVEMENTS **/
.navigation, .content {
    transition: all .3s ease
}

body.showMenu menu {
    right: 0;
}
body.showMenu .content{display:none}

body.cropMenu .navigation {
    left: -20em
}

body.cropMenu .content {
    left: 0
}

.bottom_push {
    display: block;
    width: 100%;
    height: 10vh;
    position: relative
}

#closeSettings {
    display: none
}



body.showMenu[data-device="mobile"] .top_nav { display:none;}
body[data-device="mobile"] #missions .display div{
    font-size: 1.3em;
}
body[data-device="mobile"] .content .actions table td{font-size:.95em}
body[data-device="mobile"] .content .actions table td i{margin-bottom:0}
body[data-device="mobile"] .content .actions table td group + strong{display:none}


/* ADAPT FOR INSETS APK */
body[data-apk="true"] #missions .display:last-child {
    margin-bottom: 50px;
}
body[data-apk="true"] menu,
body.showMenu[data-apk="true"] menu {
    top: 32px;
    bottom: 130px;
}
body[data-apk="true"] .top_inset {
    height: 32px
}
body[data-apk="true"] #currentPage {
    position: relative;
    top: 16px;
}
body[data-apk="true"] .bottom_nav {
    height: 130px;
    bottom:0
}
body[data-apk="true"] .bottom_nav::after {
    height: 50px
}
body[data-apk="true"] .bottom_push {
    height: 16vh
}
body[data-apk="true"] #login {
    top: 32px
}

body[data-device="tablette"] #app_content::after{
    content: "";
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    opacity: .2;
    background: var(--inset);
}


/* Portrait layout (with min-width) */
@media screen and (max-width: 1080px) {

}

@media screen and (max-width: 780px) {
    #co_settings #delete_account {
        width: 100%
    }

    #login[data-connex="off"] {
        padding: 4em 3.4em 1.5em
    }

    #login[data-connex="off"] .avatar {
        display: none
    }

    #reg_access input, #reg_access select {
        font-size: 1.3em;
        padding-left: 1.2em;
    }
    body.showMenu menu {bottom:80px;top:0}

}

@media screen and (max-width: 480px) {
    #reg_access input, #reg_access select,
    #logAccess select, #signup select {
        height: 2.8em;
        padding-top: .5em;
        padding-bottom: .5em
    }

    .nophone {
        display: none
    }

}

@media screen and (max-width: 280px) {
    body {
        display: none !important
    }
}

/* Landscape layout (with min-width) */
@media screen and (min-width: 780px) {

    .top_nav .menu_bars {
        display: table-cell;
    }

    .bottom_nav, .top_nav .gosearch {
        display: none
    }

    .content {
        /*width :calc(100% - 30em);
        max-width: 780px;*/
        position: absolute;
        left: 20em;
        right: 1em;
    }

    .navigation {
        left: 0;
    }

    menu {
        bottom: 0;
    }

    #closeSettings {
        display: unset;
    }
}
/* Landscape layout (with min-width) */
@media screen and (min-width: 1580px) {
    .navigation span:hover {
        background: var(--black_blue)
    }
}

@media screen and (max-height: 660px){
    menu .version td {display: none;}
    #logOFF{border-top: 1px solid var(--line);}
    menu{font-size:.9em}
}
@media screen and (max-height: 590px){
    menu{font-size:.8em}
    #parrainage, tr[data-titre="parrainage"]{display:none}

}

@keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1.0;
    }
}

.disabled, .hidden {
    display: none !important;
    pointer-events: none !important
}

body.showMenu .top_nav .menu_bars {
    display: none !important
}