@view-transition {
    navigation: auto;
}

@keyframes slide-out {
    0% {
        transform: translateX(0%);
    }

    100% {
        opacity: 0;
        transform: translateX(calc(50% * var(--direction, 1)));
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(calc(-50% * var(--direction, 1)));
    }

    100% {
        transform: translateX(0%);
    }
}


html {
    font-size: 14px;
}

body {
    background-color: var(--bs-gray-500);
    min-height: var(100dvh);
}

header {
    background-color: var(--bs-primary);
    max-height: 55px;
    height: 55px;
}
header #title-assercar {
    font-size: 1.5rem;
}
header #header-actions {
    align-items: center;
}
header .vr {
    opacity: 1;
    height: 1.5rem;
    align-self: center;
}
header #universal-search:placeholder-shown + #search-reset {
    display: none;
}

[onclick] {
    cursor: pointer;
}
.c-pointer {
    cursor: pointer;
}

body .hide{
    display: none;
}

/* section Tuile */
#title-assercar span {
    color: var(--bs-secondary);
}

#header-actions i{
    font-size: 1.4rem;
}

/* section Tuile */
.tuile {
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0,0,0,0.15) 0px 2px 3px;
}
.tuile .tuileTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-size: var(--bs-body-font-size);
    padding: 5px 10px;
}
.tuile .tuileTitle > *,
.tuile .tuileTitle > * > * {
    color: #fff;
}
.tuile .tuileTitle > i {
    position: absolute;
    cursor: pointer;
}
.tuile .tuileTitle > .iconLeft {
    left: 10px;
}
.tuile .tuileTitle > .iconRight {
    right: 10px;
}
.tuile .tuileTitle:hover {
    background-color: var(--bs-primary);
    color: #fff;
}
.tuile > .row {
    padding: 10px;
}

.asserGrid {
    display: grid;
    margin: 0.5rem !important;
    padding: 0 !important;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(auto-fill, 83px);
    grid-template-rows: repeat(auto-fill, 45px);
    grid-auto-rows: 45px;
    justify-content: center;
    gap: var(--gap-size);
    /*--num-columns: 12;*/
    --gap-size: 10px;
}
.asserGrid > * {
    position: relative;
    /*overflow: hidden;*/
    opacity: 0;
    animation: fadeInUp 0.3s ease-out forwards;
    animation-delay: calc(0.05s * (var(--i)));
}

.grid-item > .tuile {
    height: 100%;
}
.grid-item > .tuile .tuileContent {
    height: inherit;
    overflow: auto;
}

.asserGrid > *:nth-child(1) { --i: 1; }
.asserGrid > *:nth-child(2) { --i: 2; }
.asserGrid > *:nth-child(3) { --i: 3; }
.asserGrid > *:nth-child(4) { --i: 4; }
.asserGrid > *:nth-child(5) { --i: 5; }
.asserGrid > *:nth-child(6) { --i: 6; }
.asserGrid > *:nth-child(7) { --i: 7; }
.asserGrid > *:nth-child(8) { --i: 8; }
.asserGrid > *:nth-child(9) { --i: 9; }
.asserGrid > *:nth-child(10) { --i: 10; }
.asserGrid > *:nth-child(11) { --i: 11; }
.asserGrid > *:nth-child(12) { --i: 12; }
.asserGrid > *:nth-child(13) { --i: 13; }
.asserGrid > *:nth-child(14) { --i: 14; }
.asserGrid > *:nth-child(15) { --i: 15; }
.asserGrid > *:nth-child(16) { --i: 16; }
.asserGrid > *:nth-child(17) { --i: 17; }
.asserGrid > *:nth-child(18) { --i: 18; }
.asserGrid > *:nth-child(19) { --i: 19; }
.asserGrid > *:nth-child(20) { --i: 20; }
.asserGrid > *:nth-child(21) { --i: 21; }
.asserGrid > *:nth-child(22) { --i: 22; }
.asserGrid > *:nth-child(23) { --i: 23; }
.asserGrid > *:nth-child(24) { --i: 24; }
.asserGrid > *:nth-child(25) { --i: 25; }
.asserGrid > *:nth-child(26) { --i: 26; }
.asserGrid > *:nth-child(27) { --i: 27; }
.asserGrid > *:nth-child(28) { --i: 28; }
.asserGrid > *:nth-child(29) { --i: 29; }
.asserGrid > *:nth-child(30) { --i: 30; }
.asserGrid > *:nth-child(31) { --i: 31; }
.asserGrid > *:nth-child(32) { --i: 32; }
.asserGrid > *:nth-child(33) { --i: 33; }
.asserGrid > *:nth-child(34) { --i: 34; }
.asserGrid > *:nth-child(35) { --i: 35; }
.asserGrid > *:nth-child(36) { --i: 36; }
.asserGrid > *:nth-child(37) { --i: 37; }
.asserGrid > *:nth-child(38) { --i: 38; }
.asserGrid > *:nth-child(39) { --i: 39; }
.asserGrid > *:nth-child(40) { --i: 40; }
.asserGrid > *:nth-child(41) { --i: 41; }
.asserGrid > *:nth-child(42) { --i: 42; }
.asserGrid > *:nth-child(43) { --i: 43; }
.asserGrid > *:nth-child(44) { --i: 44; }
.asserGrid > *:nth-child(45) { --i: 45; }
.asserGrid > *:nth-child(46) { --i: 46; }
.asserGrid > *:nth-child(47) { --i: 47; }
.asserGrid > *:nth-child(48) { --i: 48; }
.asserGrid > *:nth-child(49) { --i: 49; }
.asserGrid > *:nth-child(50) { --i: 50; }

@keyframes fadeInUp {
    to {
        opacity: 1;
    }
}

/* Animation pour boutons */
.btn-animated:not(:disabled) {
    transition: transform 0.15s ease-out;
}

.btn-animated:not(:disabled):active {
    transform: scale(0.97);
}


/* section Tuile-Custom */
.tuile-custom {
    border: 1px solid #ddd;
    /*background-color: var(--bs-steven);*/
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: rgba(0,0,0,0.15) 0px 2px 3px;
}

.tuile-custom .icon-custom-action {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    color: var(--bs-primary);
    cursor: pointer;
}

.tuile-custom-header {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

.tuile-custom-content {
    padding: 0 1rem ;
    height: inherit;
    overflow-y: auto;
}

.tuile-custom-header i.fa-solid {
    color: var(--bs-primary);
    font-size: 2rem;
    align-items: center;
}

.tuile-custom-title {
    text-transform: uppercase;
}

.tuile-custom table, .modal-body table {
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-color: var(--bs-body-color);
}

.optgroup .optgroup-header {
    background-color: var(--bs-info) !important;
    color: var(--bs-white) !important;
}

[data-bs-toggle="tooltip"] {
    cursor: pointer;
    text-decoration: underline dotted;
}

.copy-board {
    cursor: pointer;
}

.copy-board i.fa-clone {
    font-size: 0.7rem;
    color: #a5a5a5 !important;
}

#launcher-frame {
    min-width: 100px !important;
    max-width: 100px !important;
}

aside #pageActions {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    display: flex;
    align-items: center;
    gap: 1rem;
}

aside #pageActions .alert {
    margin-bottom: 0;
}

aside .container-aside {
    background-color: var(--bs-steven);
    width: fit-content;
    padding: 0.4rem 1rem;
    border-radius: 10px;
    border: 1px dashed #ddd;
}

aside .container-aside span {
    font-size: 0.8rem;
}

.table > thead {
    font-weight: 700;
    border-color: var(--bs-pierrick);
}
.table-ssm > :not(caption) > * > * {
    padding: 0;
    line-height: 1.35;
}

#pageIcon > i {
    cursor: pointer;
    transition: transform 0.3s ease;
}
#pageIcon > i:hover {
    transform: scale(1.1);
}

.btn-loader-spinner {
    display: none;
}
.btn-loader:disabled > .btn-loader-spinner {
    display: inline-block;
}

/* Scrollbar */
* {
    scrollbar-color: var(--bs-primary) transparent;
    scrollbar-width: thin;
}
@-moz-document url-prefix() {
    * {
        scrollbar-color: var(--bs-primary) transparent;
        scrollbar-width: auto;
    }
}

/*
@media (min-width: 1825px) and (max-width: 1825px) {
    nav {
        width: 175px !important;
    }
    .asserGrid {
        margin: 0.5rem !important;
        grid-template-columns: repeat(auto-fill, 80px);
    }
}*/

html[data-nav-type="sidebar"] nav {
    width: 175px !important;
}
html[data-nav-type="sidebar"] .asserGrid {
    margin: 0.5rem !important;
    grid-template-columns: repeat(auto-fill, 80px);
}

/* ----------------------------------------------
 * Generated by Animista on 2025-9-24 14:48:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */

.jello-horizontal {
    -webkit-animation: jello-horizontal 0.9s both;
    animation: jello-horizontal 0.9s both;
}

@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.wobble-hor-bottom {
    -webkit-animation: wobble-hor-bottom 0.8s both;
    animation: wobble-hor-bottom 0.8s both;
}

@-webkit-keyframes wobble-hor-bottom {
    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg);
    }
    30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg);
    }
    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg);
    }
    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg);
    }
    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg);
    }
}
@keyframes wobble-hor-bottom {
    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg);
    }
    30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg);
    }
    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg);
    }
    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg);
    }
    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg);
    }
}

.shake-horizontal {
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}
@keyframes shake-horizontal {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}