body {
    height: 100%;
}

.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-content {
    flex: 1;
}

.border-grey {
    border-color: #ced4da;
    color: #60676e;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 18px;
}

text-fblack {
    color: #0f0f16;
}

.flex-1 {
    flex: 1;
}

.btn-title-page {

    padding-right: 7px;
    /*padding-left: 10px;*/
    font-size: medium;
}

.btn-title-page:hover {
    opacity: 0.7;
    cursor: pointer;
    padding-right: 7px;
}

.btn-title-page:focus {
    outline: none;
    box-shadow: none;
}

button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 9999999
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1462px;
    }
}

.modal-custom {
    min-width: 80vw;
    max-width: 80vw !important;
}

.modal-open .modal {
    background: RGBA(112, 128, 144, 0.59);
    justify-items: center !important;

}

.leaflet-popup-content {
    margin: -10px -25px !important;
    border: solid rgb(0 0 0 / 20%) 0px !important;
    text-align: center !important;
    background: white !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: transparent !important;
    box-shadow: none !important;
}

.cp {
    cursor: pointer !important;
}

.has-float-label .form-control:placeholder-shown:not(:focus) + *,
.has-float-label .form-control:placeholder-shown:not(:focus) + * + label {
    font-size: 100%;
    opacity: 0;
    top: 0.5em !important;
    width: auto;
    z-index: -1 !important;
}

input::placeholder {
    transition: .4s;
}

input:focus::placeholder {
    color: transparent !important;
}

.has-float-label label,
.has-float-label > span {
    position: absolute;
    cursor: text;
    font-size: 100%;
    opacity: 1;
    -webkit-transition: all .2s;
    transition: all .2s;
    top: -0.5em;
    left: 0.75rem;
    z-index: 3;
    line-height: 1;
    padding: 0 1px;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    color: #495057;
    background-image: linear-gradient(to bottom, #fff, #fff);
    background-size: 100% 5px;
    background-repeat: no-repeat;
    background-position: center;
}

input:focus + label,
input:focus + * + label,
textarea:focus + label {
    color: #007bff !important;
}

textarea::placeholder {
    transition: .4s;
}

textarea:focus::placeholder {
    color: transparent !important;
}


.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
    outline: none !important;
    box-shadow: none !important;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important
}

.bootstrap-select.form-control-lg .dropdown-toggle {
    outline: none !important;
    border: 1px solid #ced4da !important;
    background: white;
}

.bootstrap-select.form-control-md .dropdown-toggle {
    outline: none !important;
    border: 1px solid #ced4da !important;
    background: white;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: #6C757D;
    background: white;
}

.bootstrap-select.show > .dropdown-toggle {
    border: 1px solid #80bdff !important;
}

.bootstrap-select > .dropdown-toggle {
    background-color: white;
}

.modal.modal-full {
    padding: 0 !important;
    overflow-y: hidden;
}

.modal-dialog.modal-full {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
    margin: 0;
}

.modal-content.content-full {
    /* margin-top: 55px; */
    height: 100%;
    border: 0;
    border-radius: 0;
}

.badge-purple {
    background: #6f42c1;
}

.text-purple {
    color: #6f42c1 !important;
}

.selectpicker-float {
    position: relative;
}

.selectpicker-label {
    position: absolute;
    cursor: text;
    font-size: 100%;
    color: #495057;
    opacity: 0;
    -webkit-transition: all .2s;
    transition: all .2s;
    top: 1em;
    left: 0.5rem;
    z-index: -1;
    line-height: 1;
    padding: 0 1px;
    background-image: linear-gradient(to bottom, #fff, #fff);
    background-size: 100% 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.selectpicker.fade {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bootstrap-select .dropdown-menu li a {
    margin: 0px;
}

.float {
    color: #007bff;
    opacity: 1;
    font-size: 100%;
    top: -0.5em;
    z-index: 99999 !important;
    max-width: 80% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;;
}

.float-2 {
    z-index: 3;
    color: #495057;
    opacity: 1;
    font-size: 100%;
    top: -0.5em;
    max-width: 80% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.float-3 {
    opacity: 1;
    font-size: 100%;
    top: -0.5em;
    z-index: 3;
    max-width: 80% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.float-4 {
    z-index: 3;
    color: #007bff;
    opacity: 1;
    font-size: 100%;
    top: 82px;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    left: 25px;
}

.float-5 {
    position: absolute;
    cursor: text;
    font-size: 100%;
    opacity: 1;
    -webkit-transition: all .2s;
    transition: all .2s;
    top: -0.5em;
    left: 0.3rem;
    z-index: 3;
    line-height: 1;
    padding: 0 1px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    color: #747b82;
    background-image: linear-gradient(to bottom, #fff, #fff);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: center;
}


.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    color: #60676e;
}

.typeahead {
    width: 100%;
}

.z-index9 {
    z-index: 999 !important;
}

.leaflet-routing-alt {
    display: none !important;
}

.dropdown-menu {
    border: 1px solid #80bdff;
}

.popover {
    z-index: 999999999 !important; /* A value higher than 1010 that solves the problem */
}

.jconfirm .jconfirm-box.jconfirm-type-info {
    border-top: solid 7px #17a2b8;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, 0) scale(.5);
    transform: translate(0, 0) scale(.5);
}

.modal.show .modal-dialog {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
}

.modal-header-custom {
    height: 7px;
}

.blink_ban {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

table-bordered thead td, .table-bordered thead th {
    border-bottom-width: 0px;
}

#user_history_rides th {
    /*max-width: 100px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blink {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

@keyframes color-animation {
    0% {
        color: #343a40;
    }

    25% {
        color: #6c757d;
    }


    50% {
        color: #28a745;
    }

    75% {
        color: #f8f9fa;
    }

    100% {
        color: #f8f9fa;
    }
}

.srtdef {
    animation: color-animation 2s infinite;
}

input:read-only + label {
    color: #747b82;
}

input:read-only {
    border: 1px solid #ced4da !important;
}

.bootstrap-select.disabled, .bootstrap-select > .disabled {
    background: #e9ecef !important;
    color: #6c757d !important;
}

/*#layout_ride_form {
    width: 65%;
    height: 81vh !important;
    max-height: 81vh !important;
    overflow: auto;
    float: left;
}

#layout_ride_map {
    width: 35%;
    height: 60vh !important;
    min-height: 60vh !important;
    max-height: 60vh;
    float: left;
}

#layout_ride_zones {
    width: 100%;
    !*height: calc(100vh - 525px);*!
    !*max-height: 38vh !important;*!
    !*min-height: 40vh !important;*!
    overflow: hidden;
    z-index: -999999 !important;
    float: left;
}

#layout_ride_validation {
    width: 65%;
    float: left;
    padding-top: 10px;
}*/

.shadow-custom {
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;

}

/*.shadow-custom {*/
/*    box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03), 0 .9375rem 1.40625rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03)*/
/*}*/

.context-menu-item.context-menu-hover {
    background-color: #0a72dc !important;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c {
    color: rgb(64, 68, 72);
    font-weight: 200;
    margin-bottom: 0px;
}

.bg-danger-header + .dx-cell-focus-disabled {
    background: #dc3545 !important;
}

.leaflet-control-attribution a {
    display: none;
}

.jconfirm .jconfirm-box div.jconfirm-title-c {
    text-align: center !important;
}

/*.leaflet-touch .leaflet-bar a:last-child:after {*/
/*    content: '\26F6' !important;*/
/*    color: black;*/
/*    font-size: 20px;*/
/*    background: white !important;*/
/*}*/


.fullscreen-icon:after {
    content: '\26F6' !important;
    color: black !important;
    font-size: 20px;
    background: white !important;
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: rgba(253, 126, 20, 0.9);
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --brown: #795548;
}

.text-lg {
    font-size: 10px;
}

.btn-blue {
    background-color: var(--blue);
    color: var(--white);
}

.btn-indigo {
    background-color: var(--indigo);
    color: var(--white);
}

.border-indigo {
    border-color: #6610f2 !important;
}

.btn-purple {
    background-color: var(--purple);
    color: var(--white);
}

.btn-pink {
    background-color: var(--pink);
    color: var(--white);
}

.btn-pink:hover {
    background-color: #CC0B63FF !important;
    color: white !important;
}


.btn-red {
    background-color: var(--red);
    color: var(--white);
}

.btn-orange {
    background-color: var(--orange);
    color: var(--white);

}

.btn-orange:hover {
    background-color: #ff7300;
    color: var(--white);
}

.btn-yellow {
    background-color: var(--yellow);
    color: var(--white);
}

.btn-green {
    background-color: var(--green);
    color: var(--white);
}

.btn-teal {
    background-color: var(--teal);
    color: var(--white);
}

.btn-cyan {
    background-color: var(--cyan);
    color: var(--white);
}

.btn-brown {
    background-color: var(--brown);
    color: var(--white);
}

.bg-blue {
    background-color: var(--blue);
    color: var(--white);
}

.bg-indigo {
    background-color: var(--indigo);
    color: var(--white);
}

.bg-purple {
    background-color: var(--purple);
    color: var(--white);
}

.bg-pink {
    background-color: var(--pink);
    color: var(--white);
}

.text-pink {
    color: var(--pink) !important;
}


.bg-red {
    background-color: var(--red);
    color: var(--white);
}

.bg-orange {
    background-color: var(--orange);
    color: var(--white);
}

.text-orange {
    color: var(--orange);
}


.bg-yellow {
    background-color: var(--yellow);
    color: var(--white);
}

.bg-green {
    background-color: var(--green);
    color: var(--white);
}

.bg-teal {
    background-color: var(--teal);
    color: var(--white);
}

.bg-cyan {
    background-color: var(--cyan);
    color: var(--white);
}

.bg-white {
    background-color: var(--white);
    color: var(--dark);
}

.bg-gray {
    background-color: var(--gray);
    color: var(--white);
}

.bg-gray-dark {
    background-color: var(--gray-dark);
    color: var(--white);
}

.bg-danger {
    background-color: var(--red);
    color: var(--white);
}

.bg-warning {
    background-color: var(--yellow);
    color: var(--white);
}

.bg-success {
    background-color: var(--green);
    color: var(--white);
}

.bg-info {
    background-color: var(--cyan);
    color: var(--white);
}

.bg-brown {
    background-color: var(--brown);
    color: var(--white);
}

.bg-zone {
    background-color: #3f6791;
    color: var(--white);
}

.bg-zone:hover {
    background-color: #164f7c;
    color: var(--white);
}

.bg-rank {
    background-color: #e06b28;
    color: var(--white);
}

.bg-rank:hover {
    background-color: #e15805;
    color: var(--white);
}


.bg-secondary-dark {
    background-color: #545b62;
    box-shadow: 0 0 0 .2rem rgba(130, 138, 145, .5) !important;
}

.badge-blue {
    background-color: var(--blue);
    color: var(--white);
}

.badge-indigo {
    background-color: var(--indigo);
    color: var(--white);
}

.badge-purple {
    background-color: var(--purple);
    color: var(--white);
}

.badge-pink {
    background-color: var(--pink);
    color: var(--white);
}

.badge-red {
    background-color: var(--red);
    color: var(--white);
}

.badge-orange {
    background-color: var(--orange);
    color: var(--white);
}

.badge-yellow {
    background-color: var(--yellow);
    color: var(--white);
}

.badge-green {
    background-color: var(--green);
    color: var(--white);
}

.badge-teal {
    background-color: var(--teal);
    color: var(--white);
}

.badge-cyan {
    background-color: var(--cyan);
    color: var(--white);
}

.badge-danger {
    background-color: var(--red);
    color: var(--white);
}

.badge-warning {
    background-color: var(--yellow);
    color: var(--white);
}

.badge-success {
    background-color: var(--green);
    color: var(--white);
}

.badge-info {
    background-color: var(--cyan);
    color: var(--white);
}

.badge-brown {
    background-color: var(--brown);
    color: var(--white);
}

.badge-zone {
    background-color: #3f6791;
    color: var(--white);
}


.badge-rank {
    background-color: #e06b28;
    color: var(--white);
}


.btn-xs {
    padding: 0;
    font-size: 14px;
}

.vw-5 {
    min-width: 5vw;
    width: 5vw;
}


.context-menu-icon {
    min-height: 18px;
    background-repeat: no-repeat;
    background-position: 4px 2px;
}

.context-menu-icon-locate:before {
    content: "\f3c5";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

.context-menu-icon-info:before {
    content: "\f05a";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

.context-menu-icon-free:before {
    content: "\f058";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

.context-menu-icon-recover:before {
    content: "\f1b8";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

.context-menu-icon-recover_suspend:before {
    content: "\f04c";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

.context-menu-icon-cancel:before {
    content: "\f05e";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

.context-menu-icon-disconnect:before {
    content: "\f2f5";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

.context-menu-icon:before {
    color: #333333;

}

::-webkit-scrollbar {
    width: 7px;
}

:hover::-webkit-scrollbar {
    background: transparent !important;
    height: 7px !important;
    width: 7px !important;
}

::-webkit-scrollbar-thumb {
    background: transparent;
}

:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 7px !important;
}


.gradest {
    background-image: linear-gradient(45deg, transparent, rgba(0, 123, 255, 0.48), transparent) !important;
}

.gradest-primary {
    background: var(--dark);

    background-image: linear-gradient(45deg, transparent, rgba(0, 123, 255, 0.48), transparent) !important;
}

.gradest-warning {
    background: var(--yellow);
    background-image: linear-gradient(45deg, transparent, rgba(208, 58, 17, 0.42), transparent) !important;

}

.gradest-info {
    background-color: var(--cyan);

    background-image: linear-gradient(45deg, transparent, rgba(0, 0, 0, .2), transparent) !important;

}

.gradest-danger {
    background-color: var(--red);
    background-image: linear-gradient(45deg, transparent, rgba(208, 58, 17, 0.42), transparent) !important;

}

.gradestyellow {
    background-color: var(--yellow);

    background-image: linear-gradient(45deg, transparent, rgba(208, 58, 17, 0.42), transparent) !important;

}


:focus-visible {
    outline: 0px solid white !important;
}

h7 {
    display: block;
}


.col-2_5 {
    width: 20.83% !important;
}


/* START RADIUS DESIGN NONE */
.card {
    border: 0 !important;
    border-radius: 2px !important;
}

.form-control {
    border-radius: 2px !important;
}

.form-control-lg {
    border-radius: 2px !important;
}

.btn {
    border-radius: 2px !important;
}

.badge {
    border-radius: 2px !important;
}

/* END RADIUS DESIGN NONE */


.caption-icon {
    font-family: "Font Awesome";
}

.rounded-right-none {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.rounded-left-none {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #ced4da;
    /*padding-right: calc(1.5em + .75rem);*/
    padding-right: 10px;
    background-image: none !important;
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.custom-control-input.is-valid ~ .custom-control-label, .was-validated .custom-control-input:valid ~ .custom-control-label {
    color: #747b82;
}

.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
    border-color: #007bff;
    background-color: #007bff;
    box-shadow: none;
}


.custom-control-input.is-valid ~ .custom-control-label::before, .was-validated .custom-control-input:valid ~ .custom-control-label::before {
    border-color: #747b82;
}

.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: #007bff;
    box-shadow: none;
}

/*.bootstrap-select.is-invalid .dropdown-toggle, .error .bootstrap-select .dropdown-toggle, .has-error .bootstrap-select .dropdown-toggle, .was-validated .bootstrap-select select:invalid + .dropdown-toggle {
    border-color: transparent;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.7); !* Rouge Bootstrap Danger *!

}*/


.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.7) !important;

}

.form-control.is-invalid, .was-validated .form-control:invalid + label {
    color: #dc3545 !important;

}

.bootstrap-select.is-invalid .dropdown-toggle, .error .bootstrap-select .dropdown-toggle, .has-error .bootstrap-select .dropdown-toggle, .was-validated .bootstrap-select select:invalid + .dropdown-toggle {
    border-color: #ffd7d7 !important;

}


/* Quand le select est invalide, on cible son label */
.bootstrap-select.is-invalid + .selectpicker-label,
.selectpicker-float .bootstrap-select.is-invalid ~ .selectpicker-label {
    color: #dc3545 !important; /* rouge Bootstrap = danger */
}

/*.bootstrap-select.is-valid .dropdown-toggle, .was-validated .bootstrap-select select:valid+.dropdown-toggle {
    border: 1px solid rgb(206, 212, 218) !important;
}*/


.modal-xxl {
    max-width: 95%; /* Définit la largeur à 90% de l'écran */
}

.pointer-none {
    pointer-events: none;
}