.floating-action-button {
    position: fixed;
    top: 100px;
    right: 30px;
    z-index: 999;
}

.floating-action-button .action-items {
    display: none;
    text-align: right;
    margin-top: 10px;
}

.floating-action-button .btn-floating {
    display: block;
}

.custom-focus-danger:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.5);
}

.custom-focus-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.5);
}

.custom-focus-info:focus {
    box-shadow: 0 0 0 0.25rem rgba(23, 162, 184, 0.5);
}

.custom-focus-warning:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.accordion-button:focus {
    border-color: #00FFFF;
    background: #FFFFFF;
}

.accordion-button:not(.collapsed) {
    background: #FFFFFF;
}

.custom-left-panel {
    max-width: 48px; /* Largeur du bouton + marges/padding si nécessaire */
}

.header-brand {
    order: 1;
}

.header-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
    width: 100%;',
}

.header-menu {
    order: 2;
}

ul.pagination li {
    margin-right: 5px;
}

ul.pagination li a {
    text-decoration: none;
}

.card-body .site-login {
    margin-top: 0;
    padding-top: 0;
}

.card-body h3 {
    margin-top: 0;
}

.card{
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
}

.app-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    background-color: #000060;
    padding: 10px;
}

.app-header img {
    max-height: 100px;
    margin-right: 10px;
}

.border-green {
    border: 2px solid green;
}

.border-orange {
    border: 2px solid orange;
}

.app-header h2 {
    color: white;
    margin: 0;
}
.border-right {
    border-right: 2px solid #ddd !important;
}

.priority-urgent {
    color: red;
}

.priority-very-high {
    color: darkorange;
}

.priority-high {
    color: orange;
}

.priority-medium {
    color: gold;
}

.priority-low {
    color: green;
}

.priority-none {
    color: gray;
}

.criticity-low {
    color: green;
}

.criticity-medium {
    color: orange;
}

.criticity-high {
    color: red;
}
.criticity-critical {
    color: red;
}

.criticity-strong {
    color: darkorange;
}

.criticity-medium {
    color: orange;
}

.criticity-low {
    color: gold;
}

.criticity-none {
    color: green;
}

.criticity-blocking {
    color: darkred;
}

/*.table-responsive {
    overflow-x: auto;
    height: auto;
}
 */
.table-responsive {
    overflow: auto;
    height: auto;
}

/*.card .table-responsive{*/
/*    height: 22rem;*/
/*}*/

.table-responsive .table {
    width: 100%;
    margin-bottom: 0;
}

.table-responsive .table thead th,
.table-responsive .table tbody td {
    white-space: nowrap;
}

.table-responsive .table .input-group {
    flex-wrap: nowrap;
}

main > .container {
    padding: 5rem 15px 20px;

}

.content-wrapper img {
    max-width: 100%;
    height: auto;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* height: 75vh; */
    max-height: 75vh;
    overflow-y: auto;
}

.demo{
    outline: 2px solid #FFA500;
    outline-offset: 0px;
}

.logout-group{
    display: flex;
}

.custom-main {
    width: 100%;
    padding: 3.2rem 5px 10px;
}

.footer {
    background-color: #000060;
    font-size: .9em;
    height: 60px;

    color: #FFFFFF;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
    color: #FFFFFF;
}

.myClockDisplay{
    margin-right: 5px;
    margin-left: 5px;
}
.clock {
    letter-spacing: 2px;
    border: 2px solid #ffffff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #000060;
    color: #ffffff;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 80%;
}

.select-timezone {
    border: 2px solid #ffffff;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #000060;
    color: #ffffff;
    font-size: 80%;
    width: 100%; /* This will make them take up the full width of the parent container */
}

.select-timezone .caret {
    color: #ffffff;
}
.not-set {
    color: #c55;
    font-style: italic;
}
.container-fluid {
    padding: 5px;
    background-color: #e0e0e0;
}

body{
    background-color: #e0e0e0;
}

.custom-cards-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.chat-cards-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* height: 80vh; /* Hauteur maximale de l'écran */
    max-height: 55vh; /* Hauteur maximale de l'écran */
    overflow-y: auto; /* Permettre le défilement vertical */
}

.chat-card-reply {
    max-height: 20vh; /* Hauteur maximale de l'écran */
    overflow-y: auto;
}

.linked-file-card {
    max-height: 10vh; /* Hauteur maximale de l'écran */
    overflow-y: auto;
}

.dash-card {
    padding-bottom: 5px;
    width: 20rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin: 10px;
    height: 22rem;
}

.dash-card-double {
    width: 40rem;
}

.dash-card-quad {
    width: 40rem;
    heigth: 40rem;
}

.dash-card-body {
    padding: 0px 0px 0px 0px;
}

canvas{
    width:400px ;
    height: 300px;
}

.rounded-top{
    background-color: #000060;
    color: #FFFFFF;
}

.carousel-control-prev {
    left: 0;
    transform: translateX(-45%);
}

.carousel-control-next {
    right: 0;
    /* transform: translateX(40%); */
    width: 2%;
    /* outline: 5px solid #A40000; */
    /* outline-offset: 0px; */
}

.carousel-indicators {
    bottom: 0;
    transform: translateY(100%);
}

.table-bordered {
    border: 1px solid #000000;
}

.responsive-expanded-card {
    width: 120vh;
    height: 80vh;
}

a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.link-suppression {
    margin-left: 2%;
}

th.has-star:after {
    content: "*";
    margin-left: 3px;
    font-weight: normal;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: tomato;
}

th.has-star-blue:after {
    content: "*";
    margin-left: 3px;
    font-weight: normal;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: darkblue;
}

.glossy-hover {
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.glossy-hover:hover {
    box-shadow: 1px 1px 15px 5px rgba(0, 0, 96, 0.25);
}

.glossy-hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(0, 0, 96, 0.25),
            transparent
    );
}

.glossy-hover:hover:before {
    left: 100%;
    transition: all 650ms ease-in;
}

.offcanvas-size-xl {
    --bs-offcanvas-width: min(95vw, 600px) !important;
}

.offcanvas-size-xxl {
    --bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
    --bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
    --bs-offcanvas-width: min(95vw, 250px) !important;
}

#pjax-gridview-container tr.editing-row {
    border: 3px dashed #0a58ca;
    background: rgba(183,181,181,0.32);
}

.dropdown-list{
    margin: 1%;
}


.card-shadow{
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) !important;
}

.card-border{
    border: 5px solid white;
}

.btn-ticket-incidence{
    bottom: 0px;
    margin:3%;
    position: absolute;
}

.form-check{
    margin: 1% !important;
}

.bi-1-circle-fill::after{
    content: "";
    display: block;
    border-top: 0.25rem dotted #3b82f6;
    width: 3.8125rem;
    position: absolute;
    right: 7.5rem;
    top: 0.3125rem;
}

.primary-color{
    background-color: #000060 !important;
    color : #0d6efd !important;
}
.secondary-color{
    background-color: #000060 !important;
    color : #0d6efd !important;
}

.bubble {
    --r: 25px; /* the radius */
    --t: 30px; /* the size of the tail */

    max-width: 300px;
    padding: calc(2*var(--r)/3);
    -webkit-mask:
            radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%)
            var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
            conic-gradient(at var(--r) var(--r),#000 75%,#0000 0)
            calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
            radial-gradient(50% 50%,#000 98%,#0000 101%)
            0 0/var(--r) var(--r) space padding-box;
    background: linear-gradient(135deg,#212529,#1384C5) border-box;
    color: #fff;
}

.app-checkbox{
    width:15px;
}

.container-date{
    border:0 !important;
}

.left {
    --_d: 0%;
    border-left: var(--t) solid #0000;
    margin-right: var(--t);
    place-self: start;
}

.right {
    --_d: 100%;
    border-right: var(--t) solid #0000;
    margin-left: var(--t);
    place-self: baseline;
}
.text-letter{
    bottom: -40px;
    left: 70px;
    z-index: 10000;
    color: white;
    font-size: 20px;
    opacity:0.8;
}

.letter-image {
    width: 200px;
    height: 200px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
    background: transparent;
    border:none;
}

.animated-mail {
    position: absolute;
    height: 150px;
    width: 200px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;

    .body {
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 100px 200px;
        border-color: transparent transparent #000060 transparent;
        z-index: 2;
    }

    .top-fold {
        position: absolute;
        top: 50px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 100px 0 100px;
        -webkit-transform-origin: 50% 0%;
        -webkit-transition: transform .4s .4s, z-index .2s .4s;
        -moz-transform-origin: 50% 0%;
        -moz-transition: transform .4s .4s, z-index .2s .4s;
        transform-origin: 50% 0%;
        transition: transform .4s .4s, z-index .2s .4s;
        border-color: #000060 transparent transparent transparent;
        z-index: 2;
    }

    .back-fold {
        position: absolute;
        bottom: 0;
        width: 200px;
        height: 100px;
        background: #000060;
        z-index: 0;
    }

    .left-fold {
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 0 50px 100px;
        border-color: transparent transparent transparent #000060;
        z-index: 2;
    }

    .letter {
        left: 20px;
        bottom: 0px;
        position: absolute;
        width: 160px;
        height: 60px;
        background: white;
        z-index: 1;
        overflow: hidden;
        -webkit-transition: .4s .2s;
        -moz-transition: .4s .2s;
        transition: .4s .2s;

        .letter-border {
            height: 10px;
            width: 100%;
            background: repeating-linear-gradient(
                    -45deg,
                    #000060,
                    #000060 8px,
                    transparent 8px,
                    transparent 18px
            );
        }

        .letter-title {
            margin-top: 10px;
            margin-left: 5px;
            height: 10px;
            width: 40%;
            background: #000060;
        }
        .letter-context {
            margin-top: 10px;
            margin-left: 5px;
            height: 10px;
            width: 20%;
            background: #000060;
        }

        .letter-stamp {
            margin-top: 30px;
            margin-left: 120px;
            border-radius: 100%;
            height: 30px;
            width: 30px;
            background: #000060;
            opacity: 0.3;
        }
    }
}

.shadow-enveloppe {
    position: absolute;
    top: 200px;
    left: 50%;
    width: 400px;
    height: 30px;
    transition: .4s;
    transform: translateX(-50%);
    -webkit-transition: .4s;
    -webkit-transform: translateX(-50%);
    -moz-transition: .4s;
    -moz-transform: translateX(-50%);

    border-radius: 100%;
    background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
}

.letter-image:hover {
    .animated-mail {
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
    }

    .animated-mail .top-fold {
        transition: transform .4s, z-index .2s;
        transform: rotateX(180deg);
        -webkit-transition: transform .4s, z-index .2s;
        -webkit-transform: rotateX(180deg);
        -moz-transition: transform .4s, z-index .2s;
        -moz-transform: rotateX(180deg);
        z-index: 0;
    }

    .animated-mail .letter {
        height: 180px;
    }

    .shadow {
        width: 250px;
    }
}

.nav-link{
    color: #FFFFFF;
}

.custom-tabs .nav-link {
    color: #333333; /* Couleur du texte spécifique pour cette page */
    background-color: #f8f9fa; /* Couleur de fond spécifique pour cette page */
    border-radius: 0.25rem; /* Coins arrondis spécifiques */
    padding: 0.5rem 1rem; /* Espacement interne spécifique */
    margin-right: 0.5rem; /* Espacement entre les onglets */
}

.custom-tabs .nav-link.active {
    color: #ffffff; /* Couleur du texte pour l'onglet actif spécifique */
    background-color: #007bff; /* Couleur de fond pour l'onglet actif spécifique */
}

.custom-tabs .nav-link:hover {
    color: #0056b3; /* Couleur du texte au survol spécifique */
    background-color: #e9ecef; /* Couleur de fond au survol spécifique */
}

.navbar{
    outline: 2px solid #FFFFFF;
    outline-offset: 0px;
}

@media (max-width: 767px) {
    .navbar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .navbar-collapse {
        width: 100%;
    }

    .header-brand {
        display: none;
    }

    .header-container {
        flex-direction: column;
    }
    .header-brand, .navbar-toggler {
        order: -1; /* Placez le logo et le bouton en haut */
        width: 30%;
        text-align: center;
    }
    .offcanvas-custom {
        --bs-offcanvas-height: 55% !important; /* Prend toute la largeur de l'écran */
    }
}

@media(max-width:767px) {
    .logout-group {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    .logout-group > div, .logout-group a, .logout-group form {
        width: 100%;
        text-align: center;
    }
    .offcanvas-custom {
        --bs-offcanvas-height: 100% !important; /* Prend toute la largeur de l'écran */
    }
}