@font-face {
    font-family: "Ubuntu Medium";
    src: url('police/Ubuntu-Medium.ttf');
}

@font-face {
    font-family: "Ubuntu Light";
    src: url('police/Ubuntu-Light.ttf');
}

@font-face {
    font-family: "Ubuntu Bold";
    src: url('police/Ubuntu-Bold.ttf');
}

* {
    font-family: 'Ubuntu Light ', sans-serif;
    font-size: 16px;
}

h1, h2, h3, h4, h5 {
    font-family: 'Ubuntu Medium', sans-serif;
}

body {
    font-family: 'Ubuntu Light', sans-serif;
    background-color: white;
}

.textCM1 {
    color: #A9B30D;
}

a.textCM1:focus,
a.textCM1:hover {
    color: #949f0b;
    outline: none;
}

.textCM2 {
    color: #8E6538;
}

a.textCM2:focus,
a.textCM2:hover {
    color: #7a5630;
    outline: none;
}

.btn.btnCM1 {
    color: #fff !important;
    background-color: #A9B30D !important;
    border-color: #A9B30D !important;
}

.btn.btnCM1:hover, .btn.btnCM1:focus {
    background-color: #949f0b !important;
    border-color: #949f0b !important;
    color: #fff !important;
}

.btn.btnCM2 {
    color: #fff !important;
    background-color: #8E6538 !important;
    border-color: #8E6538 !important;
}

.btn.btnCM2:hover, .btn.btnCM2:focus {
    background-color: #7a5630 !important;
    border-color: #7a5630 !important;
    color: #fff !important;
}

.btn-toggleCM1 {
    color: #A9B30D;
    border: 1px solid #A9B30D;
    background-color: transparent;
}

.btn-toggleCM1.active,
.btn-toggleCM1:focus,
.btn-toggleCM1:hover {
    background-color: #A9B30D !important;
    color: #fff !important;
    border-color: #A9B30D !important;
}

.btn-toggleCM2 {
    color: #8E6538;
    border: 1px solid #8E6538;
    background-color: transparent;
}

.btn-toggleCM2.active,
.btn-toggleCM2:focus,
.btn-toggleCM2:hover {
    background-color: #8E6538 !important;
    color: #fff !important;
    border-color: #8E6538 !important;
}

.btn-icon-xs {
    padding: 2px 6px;
    font-size: 20px;
    line-height: 1;
}

.place-autocomplete {
    width: 100% !important; /* prend toute la largeur de la col */
    box-sizing: border-box; /* garde une taille cohérente avec padding/border */
}

#errmsg {
    color: red;
}

.ag-cell a {
    color: black;
    font-weight: bold;
}

.steps {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}

.step {
    flex: 1;
    text-align: center;
    position: relative;
}

.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    right: -50%;
    width: 100%;
    height: 4px;
    background-color: #dee2e6;
    z-index: 0;
}

.step.done:not(:last-child)::after {
    background-color: #28a745;
}

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 auto 5px;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
    background-color: #dee2e6;
    z-index: 1;
    position: relative;
}

.step.done .step-circle {
    background-color: #28a745; /* vert */
}

.step.current .step-circle {
    background-color: #007bff; /* bleu pour l’étape en cours */
}

.step-label {
    font-size: 12px;
    margin-top: 5px;
}


.h-600{
    height: 600px
}

.table-loader{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.navbar {
    background-color: white;
}

.titleSpan {
    font-weight: bold;
    font-size: 1rem;
}

.container .img {
    text-align: center;
}

.container .details {
    border-left: 3px solid #ded4da;
}

.container .details p {
    font-size: 15px;
    font-weight: bold;
}

.imgUser {
    max-width: 80%;
    height: auto;
}

.scrollClass {
    height: 600px;
    overflow-y: scroll;
}

.withoutDecoration:link {
    text-decoration: none;
}

.modal {
    text-align: center;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

label.required:after {
    content: " *";
    color: red;
    font-weight: bold;
}

.hugeModal {
    max-width: 70% !important;
    width: 70% !important;
}

.hugeHugeModal {
    max-width: 90% !important;
    width: 90% !important;
}

.btn-purple {
    color: #fff;
    background-color: darkviolet;
    border-color: darkviolet;
}

.btn-purple:hover {
    color: #fff;
    background-color: darkviolet;
    border-color: darkviolet;
}

.btn-purple:focus, .btn-purple.focus {
    color: #fff;
    background-color: darkviolet;
    border-color: darkviolet;
    box-shadow: 0 0 0 0.2rem darkviolet;
}

.btn-purple.disabled, .btn-purple:disabled {
    color: #fff;
    background-color: darkviolet;
    border-color: darkviolet;
}

.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active,
.show > .btn-purple.dropdown-toggle {
    color: #fff;
    background-color: darkviolet;
    border-color: darkviolet;
}

.btn-purple:not(:disabled):not(.disabled):active:focus, .btn-purple:not(:disabled):not(.disabled).active:focus,
.show > .btn-purple.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem darkviolet;
}

.btn-orange {
    color: #fff;
    background-color: darkorange;
    border-color: darkorange;
}

.btn-orange:hover {
    color: #fff;
    background-color: darkorange;
    border-color: darkorange;
}

.btn-orange:focus, .btn-orange.focus {
    color: #fff;
    background-color: darkorange;
    border-color: darkorange;
    box-shadow: 0 0 0 0.2rem darkorange;
}

.btn-orange.disabled, .btn-orange:disabled {
    color: #fff;
    background-color: darkorange;
    border-color: darkorange;
}

.btn-orange:not(:disabled):not(.disabled):active, .btn-orange:not(:disabled):not(.disabled).active,
.show > .btn-orange.dropdown-toggle {
    color: #fff;
    background-color: darkorange;
    border-color: darkorange;
}

.btn-orange:not(:disabled):not(.disabled):active:focus, .btn-orange:not(:disabled):not(.disabled).active:focus,
.show > .btn-orange.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem darkorange;
}

.color-sample {
    width: 30px;
    height: 30px;
    border-radius: 20px;
}


.ag-theme-quartz {
    --ag-selected-row-background-color: #008cff;
}

.icon {
    width: 8%;
    margin-right: 3%;
}

li {
    list-style: none;
}

/* Rotation */
.rotate img {
    border-radius: 50%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}

.rotate:hover img {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.centerForm {
    min-width: 500px;
    position: absolute;
    text-align: center;
    top: 20%;
    bottom: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.withoutArrow .dropdown-toggle::after {
    content: none;
}

.important {
    font-weight: bold;
    color: red;
}

.content-lighten {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

.hoverBlue:hover {
    background-color: #33FFCA !important;
}

.submitRight {
    margin-right: 0;
    margin-left: auto;
    display: block;
}

.dashboardContainer {
    width: 50%;
}

.large-table-container-1 {
    max-width: 200px;
    overflow-x: scroll;
    overflow-y: auto;
}

.colDashboard {
    width: 50%;
}

/* DOUBLE SCROLL */
.wrapper1, .wrapper2 {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

.hidden{
    display: none
}

.disabled {
    pointer-events: none;
    cursor: default;
}

#scroll{
    position: fixed;
    right: 10px;
    bottom: 10px;
    height: 40px;
    width: 40px;
    background-color: #32B8EB;
    color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

#scroll span{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    border: 8px;
    border-bottom-color: white;
}

#scroll:hover{
    background-color: lightgray;
    opacity: 1;
    filter:"alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
}

.iconMenu{
    /*color:#A9B30D;*/
    color:#8E6538;
    width: 5px;
    margin-right: 20px !important;
}


.iconColor{
    /*color:#A9B30D;*/
    color:#8E6538;
}

.fieldsetType{
    border: 2px solid #17A2B8;
    padding: 10px;
    margin-bottom: 10px;
}

@media (max-width: 500px) {
    .centerForm {
        min-width: 90%;
    }
}
@media screen and (min-width: 768px) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

@media screen and (max-width: 767px) {
    .select2 {
        width: 100% !important;
    }
}

@media screen and (max-width: 1080px) {
    .colDashboard {
        width: 100%;
    }
}