body {
    background-color: var(--bg-color);
}

.loginPanel {
    position: absolute;
    top: 0px;
    background-color: rgba(255,255,255,0.95);
}

.loginPanel > .headerForm {
  height: 18.5%;
  padding-top: 6.25%;
}

.loginPanel > .headerForm #logomax {
    content: var(--logomax);
    object-fit: contain;
    -webkit-filter: drop-shadow(0 0 5px white);
    filter: drop-shadow(0 0 5px white);
    max-width: 100%;
    max-height: 100%;
}

.loginPanel > .headerForm .logoContainer {
    height: 82%;
    padding: 2% 5%;
}

.dbVersion {
    color: #70309F; 
}

.loginPanel > .form {
    border-radius: 0 10px 10px 0;
    padding: 2% 5%;
}

.loginPanel > .form form {
    margin-block: 1vh;
}

.loginPanel > .form .passwordForgot {
    margin-bottom: 2vh;
    text-align: end !important;
}

.loginPanel .smartPortal > span {
    padding-right: 2%;
}

.border-colored-input-left {
    border: solid 2px var(--primary-color) !important;
    border-radius: .25rem !important;
    border-right: none !important;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    color: var(--font-color);
}

.border-colored-input-right {
    border: solid 2px var(--primary-color) !important;
    border-radius: .25rem !important;
    border-left: none !important;
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    color: var(--font-color);
}

.border-colored-input, .border-colored-input :focus {
    border: solid 2px var(--primary-color) !important;
    border-radius: .25rem !important;
}

/* Lien */
a {
    color: var(--primary-color) !important;
}

a:hover:not(.sendButton) {
    text-decoration: none !important;
    color: var(--secondary-color) !important;
}

.sendButton {
    background-color: var(--primary-color);
    color: var(--white-color) !important;
    height: 50px;
}

.sendButton:not([disabled]):hover {
    background-color: var(--secondary-color) !important;
}


/* Image de fond */
.backgroundImage {
    background-repeat: no-repeat;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: var(--bg-fixe-account-url);
    display: var(--bg-fixe-account-display);
    background-size: cover;
    background-position: center;
}

.footerForm {
    padding: 2% 5%;
    height: 18.5%;
}

.footerForm > .powered-by-isitecc > a {
    height: 35px;
    color: #70309F !important;
}

.footerForm > .powered-by-isitecc > a > p > span {
    font-weight: 500;
    font-size: large;
    font-style: italic;
    font-family: 'Segoe UI Semibold';
}

/* https://wweb.dev/resources/animated-css-background-generator/ */
/*************************************/
/*            Fond animé               */
/*************************************/
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    /*background: var(--background);*/
    overflow: hidden;
    list-style: none;
    display: var(--bg-dynamic-account-display);
}

.background li {
    width: 19vmin;
    height: 19vmin;
    border-radius: 19vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 45;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.background li:nth-child(0) {
    color: var(--primary-color);
    top: 64%;
    left: 99%;
    animation-duration: 16s;
    animation-delay: -39s;
    transform-origin: -5vw 21vh;
    box-shadow: 38vmin 0 5.216215962247308vmin currentColor;
}

.background li:nth-child(1) {
    color: var(--secondary-color);
    top: 55%;
    left: 54%;
    animation-duration: 32s;
    animation-delay: -21s;
    transform-origin: 22vw -7vh;
    box-shadow: 38vmin 0 5.294169811823865vmin currentColor;
}

.background li:nth-child(2) {
    color: var(--secondary-color);
    top: 75%;
    left: 56%;
    animation-duration: 14s;
    animation-delay: -32s;
    transform-origin: -8vw -6vh;
    box-shadow: -38vmin 0 5.099171915428944vmin currentColor;
}

.background li:nth-child(3) {
    color: var(--primary-color);
    top: 3%;
    left: 87%;
    animation-duration: 37s;
    animation-delay: -30s;
    transform-origin: -5vw -6vh;
    box-shadow: -38vmin 0 5.507106634106412vmin currentColor;
}

.background li:nth-child(4) {
    color: var(--primary-color);
    top: 40%;
    left: 41%;
    animation-duration: 11s;
    animation-delay: -14s;
    transform-origin: -23vw 24vh;
    box-shadow: -38vmin 0 5.397628469360088vmin currentColor;
}

.background li:nth-child(5) {
    color: var(--secondary-color);
    top: 43%;
    left: 1%;
    animation-duration: 45s;
    animation-delay: -46s;
    transform-origin: 8vw 6vh;
    box-shadow: -38vmin 0 5.718854161255431vmin currentColor;
}

.background li:nth-child(6) {
    color: var(--primary-color);
    top: 75%;
    left: 8%;
    animation-duration: 25s;
    animation-delay: -6s;
    transform-origin: 12vw 7vh;
    box-shadow: -38vmin 0 5.031733910614919vmin currentColor;
}

.background li:nth-child(7) {
    color: var(--secondary-color);
    top: 15%;
    left: 45%;
    animation-duration: 44s;
    animation-delay: -3s;
    transform-origin: 3vw -9vh;
    box-shadow: 38vmin 0 5.749423173466551vmin currentColor;
}

.background li:nth-child(8) {
    color: var(--primary-color);
    top: 87%;
    left: 3%;
    animation-duration: 17s;
    animation-delay: -36s;
    transform-origin: 17vw -15vh;
    box-shadow: 38vmin 0 5.593237305697707vmin currentColor;
}

.background li:nth-child(9) {
    color: var(--secondary-color);
    top: 52%;
    left: 45%;
    animation-duration: 36s;
    animation-delay: -27s;
    transform-origin: -4vw 14vh;
    box-shadow: 38vmin 0 5.301307373329508vmin currentColor;
}

.background li:nth-child(10) {
    color: var(--secondary-color);
    top: 59%;
    left: 68%;
    animation-duration: 13s;
    animation-delay: -11s;
    transform-origin: 20vw 3vh;
    box-shadow: 38vmin 0 5.32092726024729vmin currentColor;
}

.background li:nth-child(11) {
    color: var(--primary-color);
    top: 42%;
    left: 14%;
    animation-duration: 42s;
    animation-delay: -3s;
    transform-origin: -19vw -20vh;
    box-shadow: 38vmin 0 5.021663105156328vmin currentColor;
}

.background li:nth-child(12) {
    color: var(--primary-color);
    top: 15%;
    left: 48%;
    animation-duration: 10s;
    animation-delay: -46s;
    transform-origin: 17vw 19vh;
    box-shadow: 38vmin 0 5.446667520368762vmin currentColor;
}

.background li:nth-child(13) {
    color: var(--secondary-color);
    top: 93%;
    left: 88%;
    animation-duration: 15s;
    animation-delay: -16s;
    transform-origin: 23vw 6vh;
    box-shadow: 38vmin 0 4.869412832219102vmin currentColor;
}

.background li:nth-child(14) {
    color: var(--primary-color);
    top: 10%;
    left: 75%;
    animation-duration: 34s;
    animation-delay: -18s;
    transform-origin: 16vw 7vh;
    box-shadow: -38vmin 0 5.401306007586186vmin currentColor;
}

.background li:nth-child(15) {
    color: var(--secondary-color);
    top: 35%;
    left: 43%;
    animation-duration: 13s;
    animation-delay: -17s;
    transform-origin: 0vw 24vh;
    box-shadow: 38vmin 0 4.832234808937355vmin currentColor;
}

.background li:nth-child(16) {
    color: var(--secondary-color);
    top: 73%;
    left: 17%;
    animation-duration: 43s;
    animation-delay: -29s;
    transform-origin: 8vw -9vh;
    box-shadow: 38vmin 0 5.358924760057799vmin currentColor;
}

.background li:nth-child(17) {
    color: var(--primary-color);
    top: 74%;
    left: 83%;
    animation-duration: 6s;
    animation-delay: -25s;
    transform-origin: 15vw -11vh;
    box-shadow: -38vmin 0 5.02809665210929vmin currentColor;
}

.background li:nth-child(18) {
    color: var(--secondary-color);
    top: 32%;
    left: 27%;
    animation-duration: 30s;
    animation-delay: -47s;
    transform-origin: 23vw 24vh;
    box-shadow: -38vmin 0 5.620872357455969vmin currentColor;
}

.background li:nth-child(19) {
    color: var(--primary-color);
    top: 62%;
    left: 4%;
    animation-duration: 22s;
    animation-delay: -6s;
    transform-origin: 17vw -6vh;
    box-shadow: -38vmin 0 5.636637141385483vmin currentColor;
}

/* Styles pour les mobiles (petits écrans, jusqu'à 767px de largeur) */
@media (max-width: 767px) {
    .loginPanel {
        left: 0;
        width: 100%;
        min-width: 0;
    }
}

/* Styles pour les tablettes (entre 768px et 1024px de largeur) */
@media (min-width: 768px) and (max-width: 1024px) {
    .loginPanel{
        left: 25%;
        width: 50%;
    }
}

/* Styles pour les grands écrans (à partir de 1025px de largeur) */
@media (min-width: 1025px) {
    .loginPanel {
        left: 15%;
        width: 25%;
        min-width: 400px;
    }
}

.inp {
    position: relative;
    margin: auto;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
}

.inp .label {
    position: absolute;
    top: 0px;
    left: 5px;
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}

.inp .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: scaleX(0);
    /*transform-origin: none;*/
}

.inp input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 16px 12px 0 12px;
    height: 56px;
    font-size: 16px;
    font-weight: 400;
    box-shadow: inset 0 -1px 0 var(--primary-color);
    color: #000;
    transition: all 0.15s ease;
    background-color: rgba(0,0,0,0);
}

.inp input:hover {
    box-shadow: inset 0 -1px 0 var(--primary-color);
}


/* Placeholder spécifique aux navigateurs */
.inp input:not(:-moz-placeholder-shown) + .label {
    color: var(--primary-color);
    /*transform: translate3d(0, -12px, 0) scale(0.75);*/
}

.inp input:not(:-ms-input-placeholder) + .label {
    color: var(--primary-color);
    /*transform: translate3d(0, -12px, 0) scale(0.75);*/
}

.inp input:not(:placeholder-shown) + .label {
    color: var(--primary-color);
    /*transform: translate3d(0, -12px, 0) scale(0.75);*/
}

.inp input:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 var(--primary-color);
}

.inp input:focus + .label {
    color: var(--primary-color);
    /*transform: translate3d(0, -12px, 0) scale(0.75);*/
}

/*.inp input:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0s ease;
}*/

.show-password {
    position: relative;
    top: -35px;
    left: calc(100% - 35px);
}

.show-password:hover {
    cursor: pointer;
}

::-ms-reveal {
    display: none;
}