body
{
    font-size: 17px;
    background-color: #d4e4e9;
    font-family : system-ui;
}

:focus
{
    outline : none;
    box-shadow: 0 0 8px #6ba3c6;
}

header,
.TagButtons,
.dates
{
    display: flex;
    align-items: center;
}

.TagButtons
{
    padding-top : 0.5em;
}

.dates input
{
    width : 43%;
    margin : 0.25em auto;
}

.dates
{
    padding-bottom : 1em;
}

.window div.list
{
    max-height: 700px;
    overflow: auto;
}

.window div.facture-to-open
{
    display: flex;
    align-content: center;
    align-items: center;
    border-bottom: 1px solid #187b9a;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    cursor: pointer;
}

.window div.facture-to-open div.name
{
    margin-left : 0;
    margin-right : auto;
}

.window div.facture-to-open button
{
    width : auto;
    margin : auto;
    margin-right: 1em;
    margin-left: auto;
}

.window div.facture-to-open button.remove
{
    background-color: #ad0000;
}

.window div.open-facture input
{
    padding: 0.5em;
    text-align: left;
    padding-left: 1.5em;
    margin: 1em auto;
    box-shadow: none;
}

.window div.export-facture footer
{
    margin-top: 1em;
    display: flex;
    align-content: center;
    align-items: center;
}

.window div.export-facture div.export-elmt
{
    padding-top : 0.3em;
    padding-bottom : 0.3em;
    display : flex;
    align-items: center;
    border-bottom: 1px solid #187b9a;
    cursor : pointer;
}

.window div.export-facture div.export-elmt button
{
    margin: auto;
    margin-right: 1em;
    width: 29px;
    padding: 0.3em;
    line-height: 0;
}

.window div.export-facture div.export-elmt div
{
    margin-left : 1em;
    text-align : left;
}

.window div.export-facture div.export-elmt button img
{
    width : 100%;
}

.window div.export-facture footer button
{
    margin : auto 1em;
}

.window div.export-facture footer button.new
{
    background-color: #00804d;
}

.window div.export-facture footer button.replace
{
    background-color: #770d0d;
}

div.flux
{
    display: flex;
    align-items: center;
    border-bottom: solid 1px;
    padding: 0.5em 0;
    cursor : pointer;
}

div.flux div.name
{
    margin: auto;
    margin-left: 0.5em;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1.3em;
    cursor : text;
}

div.flux.in .ttc,
div.flux.in .ht,
div.bilan input.in
{
    background-color: #177e41;
    color: white;
}

div.flux.out .ttc,
div.flux.out .ht,
div.bilan input.out
{
    background-color: #790101;
    color: white;
}

div.flux.select,
.window div.facture-to-open.selected,
.window div.export-facture div.export-elmt.selected
{
    background-color: #8bc7d2;
}

.histogram.graphic
{
    text-align: left;
    overflow: auto;
    max-height: 44em;
}

div.histogram.column
{
    height: 50px;
    margin: 0.6em;
    display: flex;
    align-items: center;
}

div.flux *
{
    margin : 0 0.5em;
    width : 15%;
}

div.bilan button.stats img.icon,
div.flux img.icon
{
    width : 80%;
    margin : 0;
}

div.flux button.see,
div.bilan button.stats
{
    background-color: white;
    width: 44px;
    padding: 0;
    line-height: 0;
    cursor : pointer;
}

header button
{
    width: 45%;
}

.TagButtons button
{
    width: 30%;
    margin : 0.5em auto;
}

header button.active,
.TagButtons button.active
{
    color : #187b9a;
    background-color : white;
}

input, select
{
    width: 95%;
    margin: 1em auto;
    border: none;
    box-shadow: 0 0 4px #0000004a;
    padding: 0.5em 2.5%;
    border-radius: 0.1em;
    text-align: center;
    font-size: 0.9em;
    display : block;
    background-color: white;
    transition-duration : 0.2s;
}

select.sign
{
    font-weight: bold;
    color: white;
    background-color: #840000;
}

select.sign.gain
{
    background-color: #008418;
}

div.line
{
    width: 100%;
    height: 2px;
    background-color: #598f9f;
}

button 
{
    display: block;
    border: none;
    background-color: #187b9a;
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0.7em 2.5%;
    border-radius: 0.2em;
    width: 95%;
    margin: 1em auto;
    transition-duration : 0.2s;
}

button:disabled,
button.valid:disabled
{
    background-color: #afafaf;
    color: #909090;
    cursor: not-allowed;
}

button.valid
{
    background-color: #189a59;
}

h3
{
    font-family: sans-serif;
    font-size : 1em; 
    margin : 0.5em auto; 
    padding : 0.5em 2.5%; 
    width : 95%; 
    font-weight : bold; 
    border-bottom: 1px solid #367b9a;
    color: #24546a;
    text-align : center;
}

div.file-infos
{
    background-color: white;
    border-radius: 0.2em;
    padding: 0.7em 2.5%;
    width: 90%;
    text-align: center;
    margin: auto;
    margin-bottom: 0.5em;
    font-family: sans-serif;
}

div.file-infos.name
{
    font-weight: bold;
    margin-bottom: 0.6em;
}

img.justificatif, object.justificatif
{
    width: 95%;
    border-radius: 0.3em;
    margin: 1em auto;
    display: block;
}

object.justificatif
{
    height : 26em;
}

div.fluxs
{
    overflow : auto;
}

div.bilan
{
    padding : 0.5em 0;
    display: flex;
}

div.window div.bilan
{
    flex-direction: column;
    text-align : left;
}

div.label-container
{
    display : flex;
    padding : 0.5em 0;
}

div.window .spec label
{
    display : flex;
}

div.window .spec label input[type="checkbox"]
{
    box-shadow: none;
    width: auto;
    margin-right: 1.6em;
    margin-left: auto;
}

div.label-container label:first-child
{
    margin-left : 1em;
    margin-right : auto;
}

div.label-container label:last-child
{
    margin-right : 1em;
    margin-left : auto;
}

div.bilan input,
div.bilan button
{
    margin : 0 0.5em;
}

div.bilan button.stats
{
    width: 160px;
}

input.cmd
{
    position: fixed;
    bottom: 0em;
    width: 250px;
    right: 1em;
    z-index: 10;
    text-align: left;
    font-size: 1em;
    padding: 1em 1.5em;
}

div.menus.contexts
{
    position: fixed;
    box-shadow: 0 0 12px 0 #00000045;
    padding: 0.3em;
    border-radius: 0.2em;
    background: white;
}

div.menus button
{
    margin: auto;
    display: block;
    min-width: 100%;
    border: none;
    padding: 0.4em;
    margin-bottom: 1px;
    transition-duration: 0.05s;
    font-size: 0.9em;
    text-align: left;
    padding-left: 0.7em;
    padding-right: 1em;
    cursor: pointer;
    transition: background-color 0.1s;
}

div.menus button i
{
    text-align: right;
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 2em;
}

div.menus button:hover
{
    color: #187b9a;
    background-color: white;
}

div.menus button:last-child
{
    margin-bottom : 0;
}

div.menus button:hover
{
    background-color: #f9f9f9;
}

div.window div.facture
{
    overflow : auto;
}

div.facture div.facture-infos
{
    display: flex;
    align-content: baseline;
}

div.facture header
{
    flex-direction: column;
    width: calc(100% - 3em);
    margin: auto;
}

div.facture header input
{
    border-bottom : none;
}

div.facture div.tasks
{
    padding: 1em;
    margin: 1em auto;
    width: calc(100% - 3em);
    box-shadow: 0 0 11px #00000029;
}

div.facture div.tasks div.task
{
    display: flex;
    align-items: center;
    cursor : pointer;
}

div.facture div.tasks div.task *
{
    width : calc(20% - 2.5em);
    margin : auto;
    padding : 0.5em;
    border-bottom : none;
}

div.facture div.tasks div.task input:first-child
{
    text-align : left;
}
div.facture div.tasks div.task input:first-child:focus
{
    width : 91%;
    margin-right : 1em;
}

div.facture div.tasks div.task.selected
{
    background-color: #8bc7d2;
}

div.facture div.facture-infos div.acheteur,
div.facture div.facture-infos div.vendeur
{
    width: calc(50% - 2em);
    margin : auto;
    margin-top : 0;
    text-align : left;
}

div.facture div.facture-infos input
{
    padding: 0.5em;
    text-align: left;
    padding-left: 1em;
    box-shadow: none;
    font-size: 0.9em;
}

div.facture div.modalites textarea
{
    display: block;
    border: none;
    width: calc(100% - 3em);
    margin: auto;
    padding: 1em;
    min-height: 250px;
    margin-top: 1em;
}

div.facture div.modalites label,
div.facture footer label
{
    align-items: center;
    display: flex;
    text-align: left;
}

div.facture div.modalites label span,
div.facture footer label span
{
    padding : 1em;
}

div.facture div.modalites label input
{
    padding: 0.5em;
    margin-right: 1em;
    margin-left: auto;
    width: fit-content;
}

input[type="checkbox"]
{
    box-shadow : none;
}

div.clients 
{
    padding: 1em;
    background: #c3d8df;
    border-radius: 0.1em;
    overflow : auto;
}

div.clients div.client
{
    text-align: left;
    display: flex;
    align-items: center;
    background: #f6fdff;
    margin: 0.3em 0;
    padding: 0.8em;
    font-size: 0.9em;
}

div.clients div.client.blocked
{
    filter : contrast(0.3);
}

div.clients div.client div
{
}

div.clients div.client .email
{
    margin-left: 0;
    margin-right: auto;
    overflow: hidden;
    width: 50%;
}

div.clients div.client .formation
{
    margin : auto;
    color: green;
}

div.clients div.client .date
{
    margin-right: 0;
    margin-left: auto;
    font-style: italic;
    color: #505050;
}
menu
{
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 1em;
    background: #ffffff;
    box-shadow: #00000057 0px 0px 20px;
    border-radius: 0.2em;
    position: fixed;
    top: 35%;
    left: 50%;
    width: calc(95% - 2em);
    transform: translate(-50%);
}

#version
{
    width: initial;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-left: 2px;
    font-size: 0.8em;
    opacity: 0.7;
    pointer-events: none;
    z-index: 100;
}

@media (max-width:700px)
{
    header
    {
        flex-direction: column;
    }

    header button
    {
        width: 95%;
        margin: 0.2em auto;
    }
}