#app{
    height:100%;
}

@media (orientation: landscape) {
    html, body {
        font-size: calc(1vw + 4.5px);
    }
}

@media (orientation: portrait) {
    html, body {
        font-size: calc(1vh + 4.5px);
    }
}

html, body {
    height: 100%;
    min-width: 10cm;
    min-height: 40rem;
    font-family: century-gothic, sans-serif !important;
    font-size: calc(1vh + 4.5px);
    margin: 0;
}

/*Color*/
:root {
    /*Couleur eiffage*/
    --color-primary: #F00;/*Rouge*/
    --color-secondary: #000;/*Noire*/
    --color-tertiary: #FFF;/*Blanc*/
    --color-eiffage-bleu: #0088CE;
    --color-eiffage-jaune: #FED100;
    --color-eiffage-vert: #34B233;
    --color-eiffage-gris: #6D6F72;

    /*Color table*/
    --font-default-color: black;
    --font-th-color: white;
    --tr-primary-color: white;
    --tr-secondary-color: #E8E8E8;

    /*Chargement*/
    --loading-backgroud: var(--color-tertiary);
    --loading-primary: var(--color-tertiary);
    --loading-secondary: var(--color-primary);
    --loading-text-color: var(--color-eiffage-jaune);

    /*couleur bouton lib modal*/
    --btn-color-validate: var(--color-eiffage-vert);
    --btn-color-cancel: #FF0000;
    --btn-color-confirm-info:var(--color-eiffage-bleu);
    --btn-color-confirm-error: #FF0000;

    /*Input*/
    --input-background-color: #efefef;
    --input-color: #000;
}

.color-black {
    color: #212529;
}

.color-red {
    color: var(--color-primary);
}

.color-green {
    color: var(--color-eiffage-vert);
}

.white-icon,
.color-white {
    color: #FFFFFF;
}




/*Chargement/mise à jours de l'application*/
.loading-page-main-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: var(--loading-backgroud);
    gap: 2rem;
}

.loading-page-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-page-text {
    color: var( --loading-text-color);
    font-weight: bold;
    font-size: 2rem;
}

.loading-page-icon {
    max-height: 20rem;
    max-width: 20rem;
    animation: 1.5s loading-logo 3s infinite alternate;
}

.loading-page-circles {
    display: flex;
    gap: 1rem;
}

.loading-page-circle {
    font-size: 1.5rem;
    color: var(--loading-backgroud);
    animation: loading-dots 1s infinite alternate;
    animation-delay: calc(var(--dotNumber) * 450ms);
}

@keyframes loading-dots {
    from {
        color: var(--loading-primary);
    }

    to {
        color: var(--loading-secondary);
    }
}

@keyframes loading-logo {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}
/*/////////////////////////////////////////*/

.edit-form-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-input {
    height: 2rem;
    width: 100%;
    background-color: var(--input-background-color);
    color: var(--input-color);
    border: 0px solid #ccc !important;
    border-radius: 4px;
    padding-left: 0.8rem;
    font-size: 1rem;
}

.bottom-bar-icon-line {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    width: 100%;
    justify-items: flex-start
}

.bottom-bar-icon {
    width: 2.5rem;
    max-width: 2.5rem;
    min-width: 2.5rem;
    font-size: 2.5rem !important;
}

.bottom-bar-icon-enabled {
    cursor: pointer;
    color: var( --color-eiffage-jaune);
}
    /*little boostrap*/
    *, ::after, ::before {
        box-sizing: border-box
    }

hr {
    margin: 1rem 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25
}

    hr:not([size]) {
        height: 1px
    }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.2
}

.h1, h1 {
    font-size: 2rem;
}


.h2, h2 {
    font-size: 1.75rem;
}


.h3, h3 {
    font-size: 1.5rem;
}

.h4, h4 {
    font-size: 1.25em;
}


.h5, h5 {
    font-size: 1.12rem;
}

.h6, h6 {
    font-size: 1rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

abbr[data-bs-original-title], abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol, ul {
    padding-left: 2rem
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem
}

    ol ol, ol ul, ul ol, ul ul {
        margin-bottom: 0
    }

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

b, strong {
    font-weight: bolder
}

.small, small {
    font-size: .875em
}

.mark, mark {
    padding: .2em;
    background-color: #fcf8e3
}

sub, sup {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a {
    color: #0d6efd;
    text-decoration: underline
}

    a:hover {
        color: #0a58ca
    }

    a:not([href]):not([class]), a:not([href]):not([class]):hover {
        color: inherit;
        text-decoration: none
    }

code, kbd, pre, samp {
    font-family: var(--bs-font-monospace);
    font-size: 1em;
    direction: ltr;
    unicode-bidi: bidi-override
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: .875em
}

    pre code {
        font-size: inherit;
        color: inherit;
        word-break: normal
    }

code {
    font-size: .875em;
    color: #d63384;
    word-wrap: break-word
}

a > code {
    color: inherit
}

kbd {
    padding: .2rem .4rem;
    font-size: .875em;
    color: #fff;
    background-color: #212529;
    border-radius: .2rem
}

    kbd kbd {
        padding: 0;
        font-size: 1em;
        font-weight: 700
    }

figure {
    margin: 0 0 1rem
}

img, svg {
    vertical-align: middle
}

table {
    caption-side: bottom;
    border-collapse: collapse
}

caption {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: #6c757d;
    text-align: left
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0
}

label {
    display: inline-block
}

button {
    border-radius: 0
}

    button:focus:not(:focus-visible) {
        outline: 0
    }

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button, select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

    select:disabled {
        opacity: 1
    }

[list]::-webkit-calendar-picker-indicator {
    display: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
        cursor: pointer
    }

::-moz-focus-inner {
    padding: 0;
    border-style: none
}

textarea {
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.275rem;
    line-height: inherit
}


    legend + * {
        clear: left
    }

::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-year-field {
    padding: 0
}

::-webkit-inner-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: textfield
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-color-swatch-wrapper {
    padding: 0
}

::file-selector-button {
    font: inherit
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

iframe {
    border: 0
}

summary {
    display: list-item;
    cursor: pointer
}

progress {
    vertical-align: baseline
}

[hidden] {
    display: none !important
}

/*Désactivation des deux flèches dans les inputs number*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*-------------------------------------------------------*/
.container-reinit-filter {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 1rem 0;
}

.btn-reinit-filter {
    font-size: 1.1rem;
    background-color: var(--color-eiffage-bleu);
}

.filter-input {
    border-radius: 0.5rem;
    width: 100%;
    background: var(--input-background-color);
    background-color: var(--input-background-color);
    color: var(--input-color);
}

.filter-input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem 0 1rem;
}

    .filter-input-container .filter-input,
    .filter-input-container .filter-input:focus,
    .filter-input-container .filter-input:active {
        border: none;
        outline: none;
    }


.template-datagrid-container {
    padding: 0.5rem;
    box-shadow: inset 0px 0px 10px 0px #818181;
}