/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body, html {
    font-family: "Roboto", sans-serif;
    height: 100%;
    background-color: #FFFFFF;
    font-size: 14px;
}

.container-fluid {
    font-family: "Roboto", sans-serif;
    height: 100%;
}

p {
    /*color: #b3b3b3;*/
}

h3 {
    color: #117ab0;
    font-size:1.5rem;
    font-weight: normal;
}

h4 {
    color: #5aa2ce;
    font-size: 1.3rem;
    font-weight: normal;
}

/* Responsive column classes */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .col-0-5-xs {
        width: 4.16666666%;
    }

    .col-1-5-xs {
        width: 12.49999999%;
    }

    .col-menu-vertical-xs {
        width: 100%;
    }

    .col-dashboard-xs {
        width: 100%;
    }

    .input-group-text {
        min-width: 10rem;
    }

    .vertical-menu {
        width: 4rem;
    }

    .dashboard-content {
        margin-left: 4rem !important;
        padding-top: 5rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .col-0-5-sm {
        width: 4.16666666%;
    }

    .col-1-5-sm {
        width: 12.49999999%;
    }

    .col-menu-vertical-sm {
        width: 100%;
    }

    .col-dashboard-sm {
        width: 100%;
    }

    .w-100-sm {
        width: 100% !important;
    }

    .input-group-text {
        min-width: 10rem;
    }

    .vertical-menu {
        width: 4rem;
    }

    .dashboard-content {
        margin-left: 4rem !important;
        padding-top: 5rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .col-0-5-md {
        width: 4.16666666%;
    }

    .col-1-5-md {
        width: 12.49999999%;
    }

    .col-menu-vertical-md {
        width: 100%;
    }

    .col-dashboard-md {
        width: 100%;
    }

    .w-80-md {
        width: 80%!important;
    }

    .input-group-text {
        min-width: 15rem;
    }

    .vertical-menu {
        width: 4rem;
    }

    .dashboard-content {
        margin-left: 4rem !important;
        padding-top: 5rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .col-0-5-lg {
        width: 4.16666666%;
    }

    .col-1-5-lg {
        width: 12.49999999%;
    }

    .col-menu-vertical-lg {
        width: 16%;
    }

    .col-dashboard-lg {
        width: 84%;
    }

    .w-60-lg {
        width: 60%!important;
    }

    .input-group-text {
        min-width: 15rem;
    }

    .vertical-menu {
        width: 18rem;
    }

    .dashboard-content {
        margin-left: 18rem !important;
        padding-top: 5rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .col-0-5-xl {
        width: 4.16666666%;
    }

    .col-1-5-xl {
        width: 12.49999999%;
    }

    .col-menu-vertical-xl {
        width: 16%;
    }

    .col-dashboard-xl {
        width: 84%;
    }

    .w-60-lg {
        width: 60%!important;
    }

    .input-group-text {
        min-width: 15rem;
    }

    .vertical-menu {
        width: 18rem;
    }

    .dashboard-content {
        margin-left: 18rem !important;
        padding-top: 5rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
}

.dashboard-body {
    height: calc(100vh);
}

.dashboard-container {
    height: calc(100vh - 5rem);
}

.dashboard-content .full-page-container {
    min-height: calc(100vh - 8rem);
}

.contents-page {
    background: radial-gradient(circle at 20% 20%, rgba(197, 228, 240, 0.38), transparent 40%), radial-gradient(circle at 80% 30%, rgba(152, 231, 212, 0.46), transparent 40%), radial-gradient(circle at 50% 80%, rgba(208, 220, 243, 0.49), transparent 40%), linear-gradient(180deg, #f2f8ff, #f2f8ff);
}

.rounded-box {
    border-radius: 2rem;
}

.bg-blue {
    background-color: #212529
}

.bg-light-blue {
    background-color: #77A0E3
}

.bg-grey-light {
    background-color: #fafafa;
}

.spacing-body {
    height: 61px;
}

.hidden {
    display: none;
}

.input-group-text {
    font-weight: 400;
    font-size: 1rem;
}

.box-round-border {
    border-radius: 15px;
}

.box-grey {
    background-color: #f9f9f9;
    border: 1px solid #eee;
}

.bg-primary {
    background-color: rgb(35, 114, 172) !important;
}

.text-bg-primary {
    background-color: rgb(35, 114, 172) !important;
    color: #fff !important;
}

.box-white {
    background-color: #ffffff;
    border: 1px solid #eee;
}

.input-group-color-light-blue {
    color: #fff;
    background-color: #33b5e5 !important;
}

.input-group-color-purple {
    color: #fff;
    background-color: #a6c !important;
}

.input-group-color-green {
    color: #fff;
    background-color: #2bbbad !important;
}

.input-group-color-hard-blue {
    color: #fff;
    background-color: #2e5e86 !important;
}

.input-group-color-primary {
    color: #fff;
    background-color: #0d6efd !important;
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
}

.card {
    background-clip: padding-box;
}

.card-header, .card-footer {
    background-color: inherit !important;
    --bs-card-background: inherit !important;
    --bs-card-bg: inherit !important;
}

.card-header {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.offset-75 {
    margin-left: 62.5%;
}

.w-30 {
    width: 30%;
}

.w-60 {
    width: 60%;
}

.min-h-100 {
    min-height: 100%;
}

.progress {
    --bs-progress-height: 2rem;
    height: 2rem;
}

.progress .bg-critical {
    background-color: #ff4646 !important;
}

.progress .bg-warning {
    background-color: #6b46ff !important;
}

.progress .bg-success {
    background-color: #467FFF !important;
}

.p5-first-color {
    color: #173f78;
}

.p5-second-color {
    color: #77a0e3;
}

.p5-third-color {
    color: #0C2A75;
}

.btn-primary {
    --bs-btn-bg: #173f78;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0C2A75;
    --bs-btn-hover-border-color: #0A2461;
    --bs-btn-border-color: #0A2461;
    --bs-btn-active-bg: #0A2461;
    --bs-btn-active-border-color: #0A2461;
    --bs-btn-disabled-bg: #173f78;
    --bs-btn-disabled-border-color: #173f78;
}

.primary {
    color: #173f78 !important;
}

.bg-primary {
    background-color: #0A2461 !important;
}

.bg-warning {
    background-color: #FF7800 !important
}

.col-0-5 {
    width: 4.16666666%;
}

.col-1-5 {
    width: 12.49999999%;
}

.row-h60 {
    height: 60px;
}

.row-h100-with-60px-shrink {
    height: 100%;
}

.col-menu-vertical {
    width: 16%;
}

.col-dashboard {
    width: 84%;
}

.grey {
    color: #666666;
}

.light-grey {
    color: #AAAAAA;
}

.shadow-box {
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.form-control {
    font-size: 1.0rem
}

.notfound-404 {
    text-align: center;
}

.notfound-404 h1 {
    font-family: montserrat, sans-serif;
    font-size: 200px;
    text-align: center;
    margin: 0;
    font-weight: 900;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
    background: url(../media/photos/2026/istockphoto-2157176253.jpg) no-repeat center;
}

.notfound-404 h2 {
    font-family: montserrat, sans-serif;
    color: #000;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0
}

.login-form {

}

.login-form .btn {
    height: 54px;
    padding-left: 30px;
    padding-right: 30px;
}

.login-form a.btn {
    padding-top: 15px;
    background-color: #333333;
}

.login-form .input-first {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.login-form .input-last {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top: none;
}

.login-form .forgot-password {
    text-align: right;
}

.login-form .forgot-password a {
    color: #b3b3b3;
}

.login-form label {
    color: #838383;
}

.login-image {
    background: url(../media/photos/2026/istockphoto-2163519478-1024x1024.jpg) no-repeat left;
    background-size: cover;
}

.logo-mobile {
    text-align: center;
    max-width: 200px;
    width: 60%;
}

.logo-center {
    text-align: center;
    margin-top: 15%;
    max-width: 600px;
    width: 70%;
}

/* MENU DASHBOARD */

@media screen and (max-width: 1200px) {

    .col-menu-vertical li .text {
        display: none;
    }

    .col-menu-vertical {
        width: 60px;
        background-color: #FFFFFF;
    }

    .col-menu-vertical li .icon {
        background-color: #FFFFFF;
    }

    .col-menu-vertical li.icon-space {
        background-color: #FFFFFF !important;
    }
}

.vertical-menu {
    background-color: #FFFFFF;
    height: 100vh;
    position: fixed;
    z-index: 100;
    left: 0;
    color: #666666;
    /*border-right: 1px solid #d4d4d4;*/
    padding-top: 5rem;
    padding-bottom: 1.5rem;
}

.col-menu-vertical {
    background-color: #FFFFFF;
}

.col-menu-vertical ul, .col-menu-vertical li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vertical-menu ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 0;
    padding-left: 0;
}

.vertical-menu li {
    height: 4rem;
    color: #666666;
    -webkit-border-top-right-radius: 1rem;
    -webkit-border-bottom-right-radius: 1rem;
    -moz-border-radius-topright: 1rem;
    -moz-border-radius-bottomright: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
    margin-bottom: 0.1rem;
}

.vertical-menu ul li:last-child {
    margin-top: auto;
    border: 1px solid #ddd;
}

.vertical-menu .text {
    width: calc(100% - 60px);
    flex: 0 0 auto;
    height: 100%;
    text-align: left;
    align-content: center;
    padding-left: 10px;
}

.vertical-menu li.active .text {
    color: #FFFFFF;
}

.vertical-menu li.active .icon {
    background-color: #77a0e3;
}

.vertical-menu .icon {
    width: 4rem;
    flex: 0 0 auto;
    background-color: #FFFFFF;
}

.vertical-menu li.icon-space {
    width: 100%;
    height: calc(100% - 660px);
    background-color: #FFFFFF;
}

.vertical-menu li.icon-space:hover {
    background-color: #FFFFFF;
    cursor: default;
}

.vertical-menu li .icon {
    height: 4rem;
    padding-top: 1rem;
}

.vertical-menu li:hover {
    background-color: #173f78;
    border: none;
    cursor: pointer;
}

.vertical-menu li:hover .text {
    color: #FFFFFF;
    cursor: pointer;
}

.vertical-menu li:hover .icon {
    background-color: #77a0e3;
}

.vertical-menu li img {
    width: 45%;
    height: auto;
}

.vertical-menu li img.hover-image {
    display: none;
}

.vertical-menu li:hover img {
    display: none;
}

.vertical-menu li:hover img.hover-image {
    display: inline-block;
}

.vertical-menu li.active {
    background-color: #173f78;
}

.vertical-menu li.active:hover img {
    display: inline-block;
}

.vertical-menu .col-menu-icons img {
    width: auto;
    height: 80%;
}

.vertical-menu li.menu-space {
    height: 60px;
    padding: 0;
    padding-top: 10px;
    padding-left: 20px;
    font-size: 2rem;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
}

/* HORIZONTAL MENU */

.horizontal-menu {
    background-color: #173f78;
    height: 4rem;
    max-height: 4rem;
    overflow: hidden;
    width: 100%;
    border-bottom: 1px solid #EEEEEE;
    position: fixed;
    top: 0;
    z-index: 999;
}

.horizontal-menu .no-gutters .row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.horizontal-menu.row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.horizontal-menu .row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.horizontal-menu .col {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.alert-menu-icon {
    border-left: 2px solid #315899;
}

.account-menu-icon {
    height: 100%;
    min-width: 300px;
    border-left: 2px solid #315899;
}

.account-menu-icon .account-image {
    text-align: center;
}

.account-menu-icon .account-info {
    text-transform: uppercase;
    padding: 0.7rem 1rem 0 0;
    font-size: 0.8rem;
}

.account-menu-icon .account-info span {
    white-space: nowrap;
}

.account-menu-icon .account-info span:first-child {
    color: #FFFFFF;
}

.logo-menu-icon {
    font-size: 1.8rem;
    font-family: 'Roboto Light', cursive;
    color: #FFFFFF;
    align-content: center;
    margin-left: 1rem;
}

.logo-menu-icon .title {
    align-self: center;
    padding-left: 1rem;
    display: block;
}

.logout-menu-icon {
    border-left: 2px solid #315899;
}

.logout-menu-icon .icon-logout {
    width: 4rem;
}

.horizontal-menu img {
    height: 2.5rem;
    width: auto;
}

.horizontal-menu .icon-box {
    padding-top: 0.7rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.menu-hover.logout {
    line-height: 19px;
    border-left: 2px solid #EEEEEE;
}

.menu-hover.account {
    line-height: 19px;
    border-left: 2px solid #EEEEEE;
}

.menu-hover.account img {
    margin-right: 15px;
    border-left: 2px solid #EEEEEE;
}


.menu-hover:hover {
    cursor: pointer;
}

.menu-hover .menu-hover-image-hidde {
    display: inline-block;
}

.menu-hover .menu-hover-image-show {
    display: none;
}

.menu-hover:hover .menu-hover-image-show {
    display: inline-block !important;
}

.menu-hover:hover .menu-hover-image-hidde {
    display: none;
}

.horizontal-menu .evenement {
    text-align: center;
    border-left: 2px solid #EEEEEE;
}

/* CONTENTS */

.contents-page {
}

.contents-page .title {
    font-size: 1.8rem;
    padding-left: 1rem;
    color: #3d3d3d;
}

.contents-page .box-number-stats {
    text-align: left;
    background: rgb(1, 189, 205);
    background: linear-gradient(153deg, rgba(1, 189, 205, 1) 32%, rgba(0, 87, 199, 1) 100%);
    border-radius: 15px;
    color: #FFFFFF;
}

.contents-page .box-nb-utilisateurs {
    text-align: left;
    background: rgb(146, 1, 205);
    background: linear-gradient(153deg, rgba(146, 1, 205, 1) 32%, rgba(71, 0, 199, 1) 100%);
    border-radius: 15px;
    color: #FFFFFF;
}

.contents-page .box-nb-attentes {
    text-align: left;
    background: rgb(232, 112, 2);
    background: linear-gradient(153deg, rgba(232, 112, 2, 1) 32%, rgba(215, 48, 0, 1) 100%);
    border-radius: 15px;
    color: #FFFFFF;
}

.contents-page .box-nb-autres {
    text-align: left;
    background: rgb(90, 232, 2);
    background: linear-gradient(153deg, rgba(90, 232, 2, 1) 32%, rgba(0, 215, 27, 1) 100%);
    border-radius: 15px;
    color: #FFFFFF;
}

.contents-page .number {
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    font-size: 3rem;
}

/* Tableau Bootstrap */


.table {
    border-bottom: none;
    margin-bottom: 0;
}

.table th {
    font-weight: 400;
    text-decoration: none;
}

.table .thead-light tr th {
    background-color: #173f78;
}

.table .thead-light tr th:hover {
    background-color: #467FFF;
    cursor: pointer;
}

.table .thead-light th {
    color: #fff !important;
}

.table .thead-light tr th a {
    color: #fff!important;
    text-decoration: none;
}

.table tr:hover {
    cursor: pointer;
    background-color: #f2f7ff;
}

.table > :not(caption) > * > * {
    background-color: unset;
}

.table thead th {
    font-size: .65rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid #e9ecef;
}

.table tr td {
    font-family: Arial;
    font-size: 1rem;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: .75rem;
    padding-bottom: .75rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

.table tr td .dropdown .btn {
    color: #333333;
}

.table .badge {
    font-size: 1rem;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    padding: .35rem .375rem;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
    border-radius: .375rem;
}

.table .badge:empty {
    display: none;
}

.table .btn .badge {
    position: relative;
    top: -1px;
}

/* Avatar */

.avatar {
    font-size: 1rem;
    display: inline-flex;
    width: 48px;
    height: 48px;
    color: #fff;
    border-radius: 50%;
    background-color: #adb5bd;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.avatar img {
    width: 100%;
    border-radius: 50%;
}

.avatar-sm {
    font-size: .875rem;
    width: 36px;
    height: 36px;
}

.avatar-group .avatar {
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
}

.avatar-group .avatar:hover {
    z-index: 3;
}

.avatar-group .avatar + .avatar {
    margin-left: -1rem;
}

/* BOOSTRAP NAV */

#tab-menu a.nav-link{
    color: #333;
}

#tab-menu a.nav-link:hover{
    color: #77a0e3;
}

#tab-menu a.nav-link.active{
    color: #77a0e3;
}

ul.tab-menu-content {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.tab-menu-content li {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.tab-menu-content li a {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    color: #333;
}

ul.tab-menu-content li a:hover {
    color: #77a0e3;
    border-bottom: 2px solid #77a0e3;
}

ul.tab-menu-content li a.active {
    color: #77a0e3;
    border-bottom: 2px solid #77a0e3;
}

/* CARD BOOSTRAP 5 */

.card-header .sub-title {
}

.card-header .left-box {
    width: 50%;
}

.card-header .right-box {
    width: 50%;
}

.card-header .right-box .btn {
    font-family: arial;
    font-size: 1rem;
}

.card-footer {
    border-top: none;
}

.card-footer .pagination {
    display: flex;
}

.card-footer .pagination .active .page-link {
    color: #FFFFFF !important;
    background-color: #333333;
    --bs-pagination-active-bg: #333333;
    --bs-pagination-active-border-color: #333333;
}

.card-footer .pagination .page-item .page-link {
    color: #333333;
    font-size: 1rem;
    display: flex;
    width: 36px;
    height: 36px;
    margin: 0 3px;
    padding: 0;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
}

.card-footer .pagination .page-item .page-link:hover {
    cursor: pointer;
}

/* Chat message */

.chat-app {
    margin-bottom: 10px;
}

.chat-app .boite-message {
    margin-left: 0;
    margin-right: 0;
    max-height: 550px;
    overflow-x: scroll;
}

.chat-app .boite-message .message-group {
    max-width: 50%;
}

.chat-app .boite-message .message {
    border-radius: 15px;
    background-color: #467FFF;
    margin: 10px;
    font-size: 1rem;
}

.chat-app .boite-message .message-left .message {
    background-color: #333333 !important;
}

.chat-app .boite-message .message-left .date-heure {
    text-align: right;
}

.chat-app .boite-message .date-heure {
    font-size: 1rem;
    padding-left: 10px;
    padding-right: 10px;
    color: #888;
}

.chat-app .boite-message .message p {
    padding: 20px 30px;
    margin: 0px;
    color: white;
    font-family: Arial;
}

.chat-app .chat-send-message {
    margin-top: 10px;
}

/* QRCode */

.qrcode svg {
    width: 400px;
    height: 400px;
}

/* alert dropdown */
.dropdown-menu-alert {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* Alert box */
.alert-box {
    position: fixed;
    overflow: scroll;
    top: 61px;
    right: 0px;
    z-index: 999;
    padding-left: 0px;
    height: calc(100vh - 61px);
    width: 24rem;
    background-color: #f9f9f9;
    text-align: left;
}

.alert-object {
    border-bottom: 3px solid #fff;
}

.alert-object:hover {
    border-bottom: 3px solid #ccc;
}

.alert-box a {
    color: black;
    text-decoration: none;
    display: block;
}

.alert-box .alert-object:hover a {
    background-color: #333333;
    min-height: 61px;
}

.alert-box .alert-message {
    font-size: 13px;
    padding: 0px 5px 5px 10px;
    color: #888888;
}

.alert-box .alert-title {
    font-weight: bold;
    padding: 5px 5px 0px 10px;
}

.alert-box .alert-object:hover .alert-title {
    color: white;
}

.alert-box .alert-icon {
    padding: 12px 0 0 0;
    text-align: center;
    background-color: #292929;
    min-height: 61px;
}

.dropdown-menu-alert .alert-box a:hover {
    background-color: #f1f1f1
}

.check-box-color-green:checked {
    background-color: #068e01;
    border-color: #1e5322;
}

.check-box-color-red {
    background-color: #e60000;
    border-color: #b30000;
}

/* Alert form */

.form-alert {
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.form-alert i{
    font-size:1.6rem;
}

.form-alert-success {
    background-color: #ecf6ef;
    border: 2px solid #b5d7bd;
    color: #155724;
}

.alert-box-success h3 {

}

.alert-box-success p {

}

.form-alert-warning {
    background-color: #f0ad4e;
    border: 2px solid #f0ad4e;
    color: #73480e;
}

.form-alert-error {
    background-color: #fee8eb;
    border: 2px solid #ce9097;
    color: #71373f;
}