a,
abbr,
acronym,
address,
b,
big,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
u,
ul,
var {
    margin: 0;
    padding: 0;
    border: 0
}

html {
    height: 100%;
    scroll-behavior: smooth
}

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
    margin: 0;
    padding: 0;
    border: 0
}

svg.svg-library {
    display: none
}

body {
    height: 100%;
    font: 100%/1 var(--stack);
    color: var(--body-text);
    background-color: var(--body-bg)
}

h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

dd,
dt,
h5,
li,
p,
td,
th {
    font-size: .9em
}

li dd,
li dt,
li li,
li p {
    font-size: 100%
}

h3 {
    font: normal 1.2em/1.45 var(--stack-b);
    color: var(--main-dark);
    margin-bottom: 1em
}

a {
    text-decoration: none;
    color: var(--main-dark);
    transition: all .5s
}

strong {
    font-family: var(--stack-b);
    font-weight: 400
}

em {
    font-family: var(--stack-i);
    font-style: none
}

img {
    max-width: 100%;
    border: none
}

button {
    font: 100%/1 var(--stack-m);
    color: var(--text-inv);
    background-color: var(--main-color);
    padding: 1em 1.5em;
    border: none;
    border-radius: var(--radius);
    cursor: pointer
}

button svg {
    vertical-align: bottom
}

button:hover {
    background-color: var(--main-dark)
}

button.icon-only {
    width: 40px;
    height: 36px;
    padding: 5px
}

button.suptil {
    background-color: transparent
}

button.suptil svg .icon-bts {
    fill: var(--main-color)
}

button[disabled] {
    filter: grayscale(100%) opacity(40%);
    cursor: initial
}

:focus-visible {
    outline: 3px dotted var(--focus-color);
    outline-offset: 2px
}

@keyframes slideRight {
    0% {
        transform: translateX(-500px)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-500px)
    }
}

@keyframes toHide {
    0% {
        transform: scale(.8) rotate3d(1, 2, 3, 10deg);
        opacity: 1
    }

    100% {
        transform: scale(.1) rotate(180deg);
        opacity: 0
    }
}

@keyframes toShow {
    0% {
        transform: scale(.1) rotate3d(1, 2, 3, 10deg);
        opacity: 0
    }

    100% {
        transform: scale(.8) rotate(180deg);
        opacity: 1
    }
}

@keyframes showOut {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(2)
    }

    100% {
        transform: scale(1)
    }
}

.show-out {
    animation-delay: 0;
    animation-duration: 1s;
    animation-name: showOut
}

#page-body {
    margin: 2vmax 1rem;
    transition: all .3s
}

form {
    background-color: var(--n-light);
    padding: 1.5rem 1rem
}

div.input-group {
    margin-bottom: 1.5rem
}

legend {
    font: .9em var(--stack-b);
    margin-bottom: 1em
}

label {
    display: block;
    font-family: var(--stack-b);
    margin-bottom: .5em
}

label.required,
legend.required {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.15 11.98'%3E%3Cpath d='M10.24,1.16,7,5.44v.07l5.16-.68V7.15L7,6.54v.07l3.28,4.1L8.11,12l-2-4.8H6L3.77,12l-2-1.23L5.07,6.57V6.5L0,7.15V4.83l5,.65V5.41L1.81,1.23,3.91,0,6,4.79H6.1L8.18,0Z' style='fill: %239D345C'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: .8em;
    background-position: center left;
    padding-left: 1.5em
}

p.mandatory {
    font-size: .75em;
    text-align: right;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.15 11.98'%3E%3Cpath d='M10.24,1.16,7,5.44v.07l5.16-.68V7.15L7,6.54v.07l3.28,4.1L8.11,12l-2-4.8H6L3.77,12l-2-1.23L5.07,6.57V6.5L0,7.15V4.83l5,.65V5.41L1.81,1.23,3.91,0,6,4.79H6.1L8.18,0Z' style='fill: %239D345C'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: .8em;
    background-position: center right;
    padding-right: 1.5em;
    margin-bottom: 2rem
}

.buttons-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem
}

input:not([type=reset]),
input:not([type=submit]),
select {
    font: 100%/1 var(--stack);
    padding: .8em 1em;
    border: 1px solid var(--n-medium);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom: 1px solid var(--main-dark);
    transition: all .3s
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    line-height: 1.2;
    color: var(--body-text);
    background-color: var(--n-light);
    background-image: var(--select-img);
    background-repeat: no-repeat;
    background-position: right .5em top 50%;
    background-size: 1em auto;
    padding: .8em 2em .8em .8em
}

select.discrete {
    padding: .25em 2em .25em .25em
}

input:not([type=reset]):focus-visible,
input:not([type=submit]):focus-visible,
select:focus-visible {
    outline: 0;
    border-color: var(--high-medium)
}

button.as-reset,
button.as-submit,
button[type=reset],
button[type=submit],
input[type=reset],
input[type=submit] {
    font: 120%/1 var(--stack-b);
    color: var(--text-inv);
    background-color: var(--hot-color);
    padding: .7em 1.5em .65em;
    margin-bottom: .5rem;
    border: 2px solid var(--hot-color);
    border-radius: .3em;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    cursor: pointer
}

button.as-reset,
button[type=reset],
input[type=reset] {
    color: var(--main-dark);
    background-color: var(--body-bg);
    border-color: var(--main-dark)
}

.as-submit.optional,
button[type=submit].optional,
input[type=submit].optional {
    color: var(--text-inv);
    background-color: var(--main-color);
    border-color: var(--main-color)
}

.as-reset:not([disabled]):hover,
.as-submit.optional:not([disabled]):hover,
.as-submit:not([disabled]):hover,
button[type=reset]:not([disabled]):hover,
button[type=submit].optional:not([disabled]):hover,
button[type=submit]:not([disabled]):hover,
input[type=reset]:not([disabled]):hover,
input[type=submit].optional:not([disabled]):hover,
input[type=submit]:not([disabled]):hover {
    color: var(--text-inv);
    background-color: var(--main-dark);
    border-color: var(--main-dark);
    box-shadow: none
}

.as-reset[disabled],
.as-submit[disabled],
button[type=reset][disabled],
button[type=submit][disabled],
input[type=reset][disabled],
input[type=submit][disabled] {
    opacity: .7;
    box-shadow: none;
    cursor: initial
}

textarea {
    width: 85%;
    max-width: 25rem;
    font: 100%/1 var(--stack);
    padding: .5em;
    border: 1px solid var(--n-medium);
    border-left-color: var(--main-dark);
    border-radius: var(--radius)
}

textarea:focus {
    border-color: var(--high-medium);
    outline: 0
}

input[readonly] {
    background-color: var(--n-light);
    border-top: none;
    border-right: none;
    border-left: none
}

input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
    color: var(--alert-color);
    border-color: var(--alert-color)
}

.comment {
    display: block;
    font-size: 90%;
    padding: .5em
}

table.datatable {
    width: 100%;
    margin-bottom: 2rem;
}

table.datatable tr {
    position: relative
}

table.datatable th {
    position: relative;
    font: normal .8em var(--stack-b);
    text-align: left;
    color: var(--main-dark);
    background-color: var(--main-light);
    padding: 0 .5em 0 .75em
}

table.datatable td {
    font-size: .8em;
    padding: .25em .5em .25em .75em;
    border-bottom: 1px solid var(--n-medium)
}

table.datatable td:not(:first-of-type) {
    border-left: 1px solid var(--n-medium)
}

table.datatable td div.dropdown button.control {
    transform: scale(.7)
}

table.datatable td.short,
table.datatable th.short {
    text-align: center
}

table.datatable td.spaced,
table.datatable th.spaced {
    text-align: center;
    padding: 1em;
}

table.datatable td>a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0
}

table.datatable td>a:hover::after {
    background-color: var(--high-light);
    opacity: .3
}

table.datatable .icon-button {
    position: relative;
    z-index: 1
}

td>svg {
    vertical-align: bottom
}

button.sort {
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    color: var(--body-text);
    background-color: var(--main-light);
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E");
    background-position: right .5em center;
    padding: .75em 1.5em .75em .75em;
    border-radius: 0
}

button.sort.up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 8l6 6H6z'/%3E%3C/svg%3E")
}

button.sort:hover {
    background-color: var(--high-light)
}

@media screen and (max-width:1000px) {
    table.datatable {
        display: block;
        margin-top: 1rem
    }

    table.datatable tr:first-of-type {
        display: none
    }

    table.datatable tr {
        display: block;
        width: 100%;
        padding-top: 1rem;
        border-bottom: 1px solid var(--n-medium)
    }

    table.datatable td {
        display: block;
        line-height: 1.45;
        padding: 0;
        border: none
    }

    table.datatable td:not(:first-of-type) {
        padding: .5em 0 .5em 45px;
        border: none
    }

    table.datatable td:first-of-type {
        position: absolute;
        width: 44px;
        top: 1.25rem;
        left: 0
    }

    table.datatable td.short {
        text-align: left
    }

    table.datatable td div.dropdown {
        position: absolute;
        top: 1rem;
        right: 0
    }

    table.datatable td::before {
        content: attr(data-header);
        display: block;
        font: 88% var(--stack-b);
        margin: 0 0 .25em
    }

    table.datatable td>a {
        font-size: 120%
    }

    table.datatable td>a::after {
        content: none
    }
}

@media screen and (min-width:750px) and (max-width:1000px) {
    table.datatable {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 2rem
    }
}

div.actions-bar {
    --focus-color: var(--text-inv);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: calc(1rem + 1vw)
}

div.actions-bar nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
    list-style-type: none
}

div.actions-bar nav li {
    font: normal .9em/1 var(--stack-b)
}

div.actions-bar nav li:not(:last-of-type) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z' style='fill: %23595959' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: calc(24px + .5em)
}

div.actions-bar h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem
}

div.actions-bar nav a,
div.actions-bar nav a:visited {
    text-decoration: none
}

div.actions-bar nav a:hover {
    text-decoration: underline
}

ul.actions-list {
    display: flex;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    list-style-type: none
}

dl.notes dd,
dl.notes dt {
    font-size: .8em;
    line-height: 1.45
}

div.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    border-top: 1px dotted var(--main-color);
    border-bottom: 1px dotted var(--main-color);
    padding: .5rem 1rem
}

div.pagination h3 {
    font-size: .9em;
    margin: 0
}

div.pagination p {
    font-size: .8em
}

p.page-nums {
    display: flex;
    flex-wrap: wrap;
    gap: 1em
}

p.page-nums a {
    padding: .25em
}

dl.compare-data {
    line-height: 1.45
}

dl.compare-data dt {
    font-family: var(--stack-b);
    margin-bottom: .5em
}

dl.compare-data dd {
    padding: .25em .5em;
    margin-left: 2rem
}

dl.compare-data div {
    position: relative;
    max-width: 35em
}

dl.compare-data div+div {
    margin-top: 1rem
}

dl.compare-data div dd:first-of-type {
    position: relative;
    background-color: var(--n-light)
}

dl.compare-data div dd:last-of-type {
    color: var(--n-dark);
    background-color: var(--high-u-light);
    margin-top: .5em
}

dl.compare-data div dd:first-of-type::before {
    content: "";
    display: block;
    position: absolute;
    width: 1rem;
    height: calc(100% + .5em);
    left: -1.25rem;
    top: .75em;
    border: 1px solid var(--high-medium);
    border-right: none
}

dl.compare-data div dd:first-of-type::after {
    content: "";
    display: block;
    position: absolute;
    width: 11px;
    height: 11px;
    left: calc(-1.25rem - 5px);
    top: calc(100% + .5em + 6px);
    background-color: var(--high-light);
    border-radius: 11px
}

div.renewal-list {
    background-color: var(--body-bg);
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
    margin-bottom: calc(1rem + 1vw)
}

div.renewal-list h3 {
    font-size: 1em;
    margin-bottom: .5em
}

div.renewal-list ul {
    position: relative;
    list-style-type: none
}

div.renewal-list ul::before {
    content: "";
    display: block;
    position: absolute;
    width: .5rem;
    height: calc(100% - 2.5em);
    top: 1em;
    left: -.5rem;
    border: 1px solid var(--high-medium);
    border-right: none
}

div.renewal-list li {
    padding: .5em 0
}

div.renewal-list li.active {
    background-color: var(--high-u-light)
}

div.renewal-list li::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg id='Calque_1' data-name='Calque 1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H24V24H0Z' style='fill:none'/%3E%3Cpath d='M17,15.24v6.88a.5.5,0,0,1-.5.5.59.59,0,0,1-.26-.07L12,20,7.76,22.55a.51.51,0,0,1-.69-.18A.43.43,0,0,1,7,22.12V15.25A8,8,0,1,1,18.24,14,7.72,7.72,0,0,1,17,15.25ZM12,15A6,6,0,1,0,6,9,6,6,0,0,0,12,15Z' style='fill: %2383E2CF'/%3E%3Cpolygon points='12 4.37 13.33 7.07 16.31 7.5 14.16 9.6 14.67 12.57 12 11.17 9.33 12.57 9.84 9.6 7.69 7.5 10.67 7.07 12 4.37' style='fill: %2383E2CF' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position-x: .5em;
    vertical-align: middle;
    padding: 0 .25em 0 .5em
}

.editorial {
    max-width: 48em;
    line-height: 1.5
}

.editorial>*+* {
    margin-top: .8em
}

.editorial dd+dt {
    margin-top: 1.5em
}

.editorial ul {
    list-style-type: disc;
    margin: 1em
}

.editorial li+li {
    margin-top: .8em
}

.editorial ul.icons li+li {
    margin-top: 0
}

div.intro {
    font-size: 90%;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--high-light);
    margin-bottom: calc(2rem + .5vw)
}

.sr-only {
    position: absolute;
    overflow: hidden;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px
}

.skip-link {
    font-size: .85em;
    text-align: center
}

.skip-link a {
    display: block;
    position: absolute;
    overflow: hidden;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px
}

.skip-link a:focus {
    position: static;
    width: auto;
    height: auto
}

ol.toc {
    background-color: var(--main-light);
    padding: 1rem;
    margin-bottom: 2rem
}

ol.toc li {
    margin: 0 1rem 1rem
}

ol.toc a {
    text-decoration: none;
    color: var(--body-text);
    background-color: var(--main-light)
}

ol.toc a:hover {
    text-decoration: underline
}

header app-radios.switch input:checked+label {
    color: var(--main-dark) !important;
    background-color: var(--high-light) !important
}

span.tooltip {
    position: absolute;
    max-width: 10rem;
    width: auto;
    height: auto;
    top: 2.5rem;
    left: 0;
    overflow-wrap: break-word;
    font: .7rem/1.2 var(--stack);
    letter-spacing: normal;
    text-align: left;
    color: var(--text-inv);
    background: var(--main-dark);
    padding: .7em 1em;
    border: 1px solid var(--main-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    opacity: 1;
    z-index: 200
}

span.tooltip::before {
    position: absolute;
    top: -5px;
    left: 15px;
    display: block;
    width: 10px;
    height: 10px;
    content: '';
    background: var(--main-dark);
    margin-left: -5px;
    border-top: 1px solid var(--main-dark);
    border-left: 1px solid var(--main-dark);
    transform: rotate(45deg)
}

span.tooltip.to-left {
    left: auto;
    right: 0
}

span.tooltip.to-left::before {
    left: auto;
    right: 15px
}

input[disabled],
select[disabled],
textarea[disabled] {
    background-color: var(--n-medium);
    color: #404040
}

.hidden {
    display: none
}


label.renewdays {
    color: red;
}

.multiselect-option-title {
    font-weight: bold;
}

.multiselect__option--highlight {
    background-color: var(--high-medium) !important;
}

.multiselect__element {
    border-bottom: 1px solid var(--high-medium);
}

.multiselect .multiselect__tags {
    border-bottom: 1px solid var(--main-dark);
}

input.multiselect__input {
    border: none;
    margin-bottom: 0px;
    padding: 0 0 0 0;
    transition: none;
}


.multiselect--disabled {
    .multiselect__tags, 
    .multiselect__tags .multiselect__single {
        color: #404040;
        background-color: var(--n-medium);
    }
}


.multiselect--active .multiselect__tags {
    border: 1px solid var(--high-medium);
}

.stats-table > * > td {
    text-align: center;
}

table tr .multi-row {
    padding: 0;
}

tr .multi-row tr:last-child td {
    border-bottom: 0;
}

tr .multi-row tr {
    display: inline-table;
}

tr .multi-row tr td {
    font-size: 1em;
    width: 50%;
}