html, body
{
    width: 100%;
    height: 100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

body, div, header, footer
{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.package-dependent
{
    display: none;
}
body.package-aac .package-dependent.package-aac,
body.package-b .package-dependent.package-b,
body.package-moto .package-dependent.package-moto
{
    display: revert;
}

.row
{
    flex-flow: row nowrap;
}
.column
{
    flex-flow: column nowrap;
}
.grow
{
    flex-grow: 1;
}

body
{
    align-items: center;
    justify-content: center;
}

header, .header
{
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 1px solid black;
}
header .logo,
.header .logo
{
    height :4em;
}


.li-bold > li
{
    font-weight: bold;
}
.li-italic > li
{
   font-style: italic;
}

.submit-button
{
    background-color: lightskyblue;
    cursor: pointer;
}
body.invalid .submit-button,
body:not(.changed) .submit-button
{
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
}


.login-form
{
    flex-flow: column nowrap;
    border: 1px solid gray;
    box-shadow: 0px 0px 1em gray;
    border-radius: 1em;
    padding: 1em;
    background-color: white;
}


body.connected .login-form,
body:not(.connected) .main
{
    display: none;
}

body.connecting *
{
    pointer-events: none;
}

body.connecting .login-form > *
{
    visibility: hidden;
}
body.connecting .login-form::after
{
    content: "Connexion...";
    position: absolute;
    text-align: center;
    left: 0px;
    top: 1em;
    right: 0px;
}

body:not(.existing-contract) .existing-contract,
body:not(.new-contract) .new-contract
{
    display: none !important;
}


.main
{
    flex-flow: column nowrap;
    flex: 0 1 auto;
    align-items: stretch;
    align-self: flex-start;
}


.contract-edition,
.package-edition
{
    flex-flow: column nowrap;
    border: 1px solid black;
    align-items: stretch;
    border-radius: 1em;
    padding: 1em;
}
.contract-edition
{
    border-top-left-radius: 0px;
}

.contract-edition > *
{
    margin-bottom: 0.25em;
}

.contract-edition > .row
{
    justify-content: space-between;
}

.contract-edition label
{
    min-width: 5em;
}
.contract-edition label::after
{
    content: "\a0:\a0";
}


.contract-field.required.empty
{
    border-color: lightcoral; 
}
.package-items
{
    flex-flow: column nowrap;
    align-items: stretch;
}
.package-item
{
    align-items: stretch;
    flex-flow: row nowrap;
}
.package-item.not-found
{
    background-color: lightcoral;
}
.package-item.template
{
    display: none !important;
}
.package-item .cell
{
    --border-width: 0.15em;
    display: block;
    border: 0px solid black;
    border-top-width: var(--border-width);
    border-left-width: var(--border-width);
    flex: 1 1 auto;
    overflow: hidden;
    align-items: center;
}
.package-item .cell > *
{
    border: 0px;
    max-width: 100%;
    background-color: transparent;
}
.package-item .cell:last-of-type
{
    border-right-width: var(--border-width);
}
.package-item:last-of-type .cell
{
    border-bottom-width: var(--border-width);
}
.package-item:not(.first-of-group) .cell.group-by
{
    border-top-width: 0px;
}
.package-item:not(.first-of-group) .cell.group-by > *
{
    visibility: hidden;
}

.package-item .cell.category-cell
{
    flex: 0 0 auto;
    width: 20%;
}
.package-item .cell.price-cell
{
    flex: 0 0 auto;
    width: 10%;
    background-color: #BBB;
    text-align: center;
}
.package-item .cell.quantity-cell
{
    flex: 0 0 auto;
    width: 10%;
    background-color: #DDD;
    text-align: center;
}
.package-item .cell.cost-cell
{
    flex: 0 0 auto;
    width: 10%;
    background-color: #DDD;
    text-align: center;
}

.package-item-field.description-field:not(.empty)::before
{
    content: " (";
}
.package-item-field.description-field:not(.empty)::after
{
    content: ")";
}



.contract-document
{
    display: block;
}
body.package-none .contract-document,
body.package-none .print-panel
{
    display: none !important;
}




.print-panel
{
    background-color: white;
    border: 1px solid black;
    border-radius: 1em;
    padding: 1em;
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 1;
}

body.changed .print-button
{
    opacity: 0.5;
    pointer-events: none;
}


.print-panel .print-part-toggle
{
    cursor: pointer;
}

.print-panel .print-part-toggle::before
{
    content: "\2714";
    border: 1px solid gray;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3em;
    margin-right: 0.3em;
}
body.skip-part-1 .print-panel .print-part-1::before,
body.skip-part-2 .print-panel .print-part-2::before,
body.skip-part-3 .print-panel .print-part-3::before,
body.skip-part-4 .print-panel .print-part-4::before,
body.skip-part-5 .print-panel .print-part-5::before
{
    content: "";
}

.print-panel label
{
    flex-grow: 1;
    margin: 0.1em 0.5em;
}

.contract-document > tbody img
{
    max-width: 100%;
}
.contract-document > tbody > tr > td > ol > li::marker
{
    font-weight: bold;
}



ul.check-list
{
    list-style-type: circle;
}
ul.check-list > li.checked
{
    list-style-type: disc;
}


@media screen {
    body, .main
    {
        background-color: lightcyan;
    }
    .main
    {
        padding-top: 1em;
        min-width: 21cm;
    }
    .contract-edition
    {
        background-color: white;
    }
    .contract-document
    {
        background-color: transparent;
        margin-top: 2em;
        width: 21cm;
        align-self: flex-start;
    }

    body.skip-part-1  .contract-document > tbody > tr:nth-of-type(1),
    body.skip-part-2  .contract-document > tbody > tr:nth-of-type(2),
    body.skip-part-3  .contract-document > tbody > tr:nth-of-type(3),
    body.skip-part-4  .contract-document > tbody > tr:nth-of-type(4),
    body.skip-part-5  .contract-document > tbody > tr:nth-of-type(5)
    {
        opacity: 0.5;
        background-color: lightgray;
    }

    .contract-document > tbody > tr > td
    {
        background-color: white;
        box-shadow: 0.5em 0.5em 0.5em lightgrey;
        border-top: 1px dotted gray;
        margin-top: 1em;
        display: block;
        padding: 1em;
        min-height: 29.7cm;
    }

    .contract-document > tbody > tr:first-of-type > td
    {
        border-top: 0px;
        margin-top: 0px;
    }

    .contract-document table
    {
        border-spacing: 0px;
        border: 1px solid black;
    }
    
    .contract-document table td
    {
        border: 1px solid black;
    }

    header, footer
    {
        display: none !important;
    }
}

@media print {
    *
    {
        background-color: transparent;
    }
    .do-not-print,
    body.skip-part-1  .contract-document > tbody > tr:nth-of-type(1),
    body.skip-part-2  .contract-document > tbody > tr:nth-of-type(2),
    body.skip-part-3  .contract-document > tbody > tr:nth-of-type(3),
    body.skip-part-4  .contract-document > tbody > tr:nth-of-type(4),
    body.skip-part-5  .contract-document > tbody > tr:nth-of-type(5)
    {
        display: none !important;
    }
    .main, .contract-document, .contract-document > tbody > tr > td
    {
        width: 100%;
    }

    .package-items {
        page-break-inside: avoid;
    }
    h4
    {
        page-break-after: avoid;
    }

    .contract-document > tbody > tr
    {
        display: block;
        page-break-before: always;
        padding: 1em;
    }
        
    .avoid-page-break
    {
        page-break-inside: avoid;
    }
    

    .contract-document p.first
    {
        page-break-before: avoid;
    }

    header, footer
    {
        position: fixed;
        width: 100%;
        
    }
    header, thead, thead td { 
        height: 6em;
        padding: 1em;
        box-sizing: border-box;
        overflow: hidden;
    }
    footer, tfoot, tfoot td { height: 2em; }
    header { top : 0px; }
    footer { bottom: 0px; }
    


    @page { 
        margin: 0px 0px 1cm;
    }


}