:root {
    --mouse-x: 0px;
    --mouse-y: 0px;
    --loginpage-background-image: '';
    --loginpage-background-transparency: 0.0;
}

html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.loading-image {
    width: 32% !important;
    height: 100% !important;
    position: relative;
    top: -8px;
}

.loading-caption {
    font-family: "Poppins"
}

.underline {
    text-decoration: underline;
}

#logon-template-component {
    background-image: var(--loginpage-background-image);
    background-size: cover;
    background-position: center;
}

#logon-template-component::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, var(--loginpage-background-transparency));
}

.xaf-alert-message {
    white-space: pre-line !important;
}

/*.header-logo {
    background-color: currentColor;
}*/

.residuum-header-logo {
    background-color: currentColor;
    -webkit-mask: url('../images/residuum_logo.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask: url('../images/residuum_logo.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    width: 180px;
    height: 24px;
}

.jcdecaux-header-logo {
    flex-shrink: 0;
    background-image: url('../images/logo_colourful.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 160px;
    height: 100px;
}

.jcdecaux-header-logo-darkmode {
    background-color: currentColor;
    -webkit-mask: url('../images/logo_colourless.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    margin: 16px;
    mask: url('../images/logo_colourless.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    width: 160px;
    height: 70px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

[tooltip]:hover::after {
    -webkit-animation: hidetooltip 0s 10s forwards;
    animation: hidetooltip 0s 10s forwards;
    background-color: antiquewhite;
    border-radius: 16px;
    /*border: 2px solid #2664c9;*/
    content: attr(tooltip);
    left: var(--mouse-x);
    padding: 16px;
    position: absolute;
    top: var(--mouse-y);
    z-index: 10;
}

/*[tooltip]:focus-within::after {
    content: url('../images/Logo.svg');
    position: absolute;
    background-color: antiquewhite;
    right: 0px;
    top: 100%;
    padding: 0px 5px;
    z-index: 10;
    width: 100%;
}*/

#components-reconnect-modal {
    position: fixed;
}

.components-reconnect-hide > div,
.components-reconnect-show > div,
.components-reconnect-attempt > div,
.components-reconnect-failed > div,
.components-reconnect-rejected > div {
    display: none;
}

.components-reconnect-show-custom,
.components-reconnect-attempt-custom,
.components-reconnect-failed-custom,
.components-reconnect-rejected-custom {
    inset: 0;
    opacity: 0.9;
    position: fixed;
    text-align: center;
}

.components-reconnect-show > .components-reconnect-show-custom,
.components-reconnect-attempt > .components-reconnect-attempt-custom,
.components-reconnect-failed > .components-reconnect-failed-custom,
.components-reconnect-rejected > .components-reconnect-rejected-custom {
    display: block;
}

.components-reconnect-show-custom > h5,
.components-reconnect-attempt-custom > h5,
.components-reconnect-failed-custom > h5,
.components-reconnect-rejected-custom > h5 {
    margin-top: 24px;
}

.components-reconnect-failed-custom > button {
    margin: 16px auto;
    display: block
}

.components-reconnect-rejected-custom > .components-reconnect-rejected-causes {
    margin: 16px 160px;
    text-align: left;
}

.process-progress-indicator {
    animation: loading 1s ease infinite;
    border-color: rgb(52, 152, 219) rgb(243, 243, 243) rgb(243, 243, 243);
    border-image: initial;
    border-style: solid;
    border-radius: 50%;
    border-width: 0.3em;
    display: inline-block;
    height: 2em;
    width: 2em;
}

@keyframes loading {
    from{
        transform: rotate(0turn);
    }
    to{
        transform: rotate(1turn);
    }
}

@-webkit-keyframes loading {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

@-webkit-keyframes hidetooltip {
    to {
        visibility: hidden;
    }
}

@keyframes hidetooltip {
    to {
        visibility: hidden;
    }
}