:root {
    /* Font/text values */
    --unnamed-font-family-leelawadee-ui: Leelawadee UI;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-18: 18px;
    --unnamed-font-size-15: 15px;
    --unnamed-font-size-11: 11px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-33: 33px;
    --unnamed-line-spacing-28: 28px;
    --unnamed-line-spacing-20: 20px;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.red-input {
    color: #B70B19;
    opacity: 0.8;
}

    .red-input:focus {
        color: #B70B19;
        opacity: 0.8;
    }

.summaryModel > ul {
    list-style: none;
}

    .summaryModel > ul > li {
        font-weight: bold;
        font-size: 1rem;
    }

@media (min-width: 0px) {
    * {
        font-size: var(--unnamed-font-size-11);
        line-height: var(--unnamed-line-spacing-20);
    }
}

@media (min-width: 470px) {
    * {
        font-size: var(--unnamed-font-size-15);
        line-height: var(--unnamed-line-spacing-28);
    }
}

@media (min-width: 993px) {
    * {
        font-size: var(--unnamed-font-size-18);
        line-height: var(--unnamed-line-spacing-33);
    }
}

* {
    font-family: var(--unnamed-font-family-leelawadee-ui);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* REMOVE ARROW ON INPUT TYPE NUMBERS */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

/* NAVBAR */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.bg-navbar {
    background-color: #7CD166 !important;
}
/* END NAVBAR */

/* TOOLTIP */
.tooltip-accueil {
    background-color: #D2FFBF !important;
    color: #00664C !important;
    border: 1px solid #00664C !important;
    min-width: 280px !important;
}

.img-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -19px;
}

/* END TOOLTIP*/

/* OVERRIDE & IMPLEMENT BT RESPONSIVE */

/* -md- bootstrap breakpoint*/
@media (min-width: 768px) {
    .md-justify-content-center {
        justify-content: center !important;
    }

    .md-ms-0 {
        margin-left: 0rem !important;
    }

    .md-mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .md-mb-3 {
        margin-bottom: 1rem !important;
    }
}

/* -lg- bootstrap breakpoint*/
@media (min-width: 992px) {
    .lg-justify-content-center {
        justify-content: center !important;
    }

    .lg-mb-0 {
        margin-bottom: 0rem !important;
    }

    .lg-mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .lg-mb-3 {
        margin-bottom: 1rem !important;
    }
}

/* -xl- bootstrap breakpoint*/
@media (min-width: 1200px) {
    .xl-justify-content-center {
        justify-content: center !important;
    }

    .xl-mb-0 {
        margin-bottom: 0rem !important;
    }

    .xl-mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .xl-mb-3 {
        margin-bottom: 1rem !important;
    }

    .xl-me-3 {
        margin-right: 1rem !important;
    }
}

/* -xxl- bootstrap breakpoint*/
@media (min-width: 1400px) {
    .xxl-justify-content-between {
        justify-content: space-between !important;
    }

    .xxl-mb-0 {
        margin-bottom: 0rem !important;
    }

    .xxl-me-0 {
        margin-right: 0rem !important;
    }
}

/* END OVERRIDE & IMPLEMENT BT RESPONSIVE */

/* IMAGE RESPONSIVE */
.img-resp-20 {
    width: 100%;
    max-width: 20px;
    height: auto;
}

.img-resp-30 {
    width: 100%;
    max-width: 30px;
    height: auto;
}

.img-resp-40 {
    width: 100%;
    max-width: 40px;
    height: auto;
}

.img-resp-50 {
    width: 100%;
    max-width: 50px;
    height: auto;
}

.img-resp-60 {
    width: 100%;
    max-width: 60px;
    height: auto;
}

.img-resp-100 {
    width: 100%;
    max-width: 92px;
    height: auto;
}

@media (max-width: 577px) {
    .img-resp-sm-13 {
        width: 100%;
        max-width: 13px;
        height: auto;
    }

    .img-resp-sm-15 {
        width: 100%;
        max-width: 15px;
        height: auto;
    }

    .img-resp-sm-20 {
        width: 100%;
        max-width: 20px;
        height: auto;
    }

    .img-resp-sm-40 {
        width: 100%;
        max-width: 40px;
        height: auto;
    }

    .img-resp-sm-50 {
        width: 100%;
        max-width: 50px;
        height: auto;
    }

    .img-resp-sm-85 {
        width: 100%;
        max-width: 85px;
        height: auto;
    }
}

/* END IMAGE RESPONSIVE */

/* GENERAL */
.color-greenDSP {
    color: #00664C !important;
}

.bg-greenDSP {
    background-color: #00664C !important;
    color: white !important;
}

.bg-alertGreen {
    background-color: #DFF0D8 !important;
    color: #3C763D !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.text-small {
    font-size: 85% !important;
}

@media (max-width: 577px) {
    .fs-sm-14 {
        font-size: 14px !important;
    }
}

.w-75 {
    width: 75% !important;
}

.w-90 {
    width: 90% !important;
}

.min-vh-85 {
    min-height: 85vh;
}

.w-px-60 {
    width: 60px;
}

.opacity-1 {
    opacity: 1 !important;
}

.text-ellipsis {
    text-overflow: ellipsis;
}

.w-max-content {
    width: max-content;
}

.h-max-content {
    height: max-content;
}
/* END GENERAL */

/* PADDING */
.py-110 {
    padding-top: 110px;
    padding-bottom: 110px;
}
/* END PADDING */

/* LOGIN PAGE */
.bg-login {
    background: url('../Pictures/fond_CTI_1920x1280.png') no-repeat center center fixed;
    background-size: cover;
}
/* END LOGIN PAGE */

/* PAGINATION STYLE */
.page {
    padding: 3px 10px 3px 10px;
    background-color: #7CD166;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 30px;
}

    .page:hover {
        color: #7CD166;
        background-color: #FFFFFF;
    }
/* END PAGINATION STYLE */


/* CUSTOM FORM VALIDATION */

/* OVERRIDE CSS OF AUTOCOMPLETE */
input:-webkit-autofill{
    -webkit-box-shadow: inset 0 0 0 1000px white !important;
}

    input:-webkit-autofill:focus {
        border-color: #86B7FE !important;
        -webkit-box-shadow: inset 0 0 0 1000px white, 0 0 0 0.25rem rgb(13 110 253 / 25%) !important;
    }

form.needs-validation input.valid:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='currentColor' style='color: 198754; z-index:1;' class='bi bi-check-circle' viewBox='0 0 16 16'> <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/> <path d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/> </svg>") !important;
    border-color: #198754;
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}

form.needs-validation input.input-validation-error:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='currentColor' style='color: DC3545; z-index:1' class='bi bi-exclamation-circle' viewBox='0 0 16 16'> <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/> <path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/> </svg>") !important;
    border-color: #DC3545;
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}

.input-validation-error ~ .invalid-feedback {
    display: block;
}
/* END CUSTOM FORM VALIDATION */