/**************************************************************************************************
    General // Main color : #255586 - Second color : #E02734 
 **************************************************************************************************/
@media (min-width: 768px) {
    html {
        font-size: 14px;
        position: relative;
        /*min-height: 100%;*/
        margin: 0px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
    background: #eeeeee;
    min-height: 0px;
}

.app-header {
    flex: 0 0 auto;
}

.app-main {
    flex: 1 1 auto;
    min-height: 0; /* 🔑 CRITICAL */
    display: flex;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb),var(--bs-bg-opacity)) !important;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    padding: 1%;
}

h1, h2, h3 {
    color: #255586;
    font-size: 2em;
}

.title {
    margin: 10px 0;
}

.app-footer {
    flex: 0 0 auto;
    padding: 4px 0px 0px 12px;
    font-size: 14px;
    line-height: 4; 
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

/* 🔑 LOGO FIX */
.footer-logo {
    height: 90px; /* controls footer height */
    width: auto;
    /*max-height: 100%;*/
    object-fit: contain;
}


/**************************************************************************************************
    LAYOUT : HEADER
 **************************************************************************************************/
.nav-logo {
    width: 4%;
}

.nav-logo img {
    min-width: 40px;
    width: 50%;
    display: block;
    margin: auto;
}

.login-img {
    width: 10rem;
}

.nav-item a {
    padding: 15px;
}

.nav-item .item-out {
    display: flex;
    align-items: center;
}

.nav-item .item-out a {
    padding: 10px;
}

.nav-item .item-out i {
    font-size: 21px;
    -webkit-text-stroke: 1px;
}


.navbar {
    background-color: #222;
    z-index: 2;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    margin-bottom: 0 !important;
    font-weight: 500;
}

.navbar-nav > li > .dropdown-menu {
    border-radius: 6px;
}

.navbar-collapse .navbar-nav > li a:hover {
    color: #255586 !important;
    background-color: rgba(23, 130, 230,0.2);
    border-radius: 5px;
}

.navbar-collapse .navbar-nav > .active > a, .navbar-collapse .navbar-nav > .active > a:focus, .navbar-collapse .navbar-nav .nav-item > .active > li > a:hover {
    color: #fff;
}

.dropdown-menu > li > a {
    color: #000;
}

/**************************************************************************************************
    DATATABLE
 **************************************************************************************************/

.dt-row {
    margin: 30px 0;
}

/****************************************************
    DAMAGES
*****************************************************/
#vehicle-pattern {
    position: relative;
    width: 600px;
    height: 453px;
}

#vehicle-pattern span {
    position: absolute;
    border: 3px dashed #6c757d;
    cursor: pointer;
}

#vehicle-pattern span:hover {
    background-color: dimgray;
    opacity: 0.5;
}

#vehicle-pattern span.hidden {
    display: none;
}

#vehicle-pattern span.ui-state-active {
    background: #fff;
}

#vehicle-pattern span.ui-state-hover {
    background: #fff;
}

/* Classe appliqu�e � l'image (le patron du v�hicule) */
.vehicle-patron {
    width: 80%;
}

/* Liste des �l�ments cliquables sur le patron du v�hicule */
#vehicle-pattern span.ew-dl-rightfrontwheel {
    top: 2px;
    left: 65px;
    width: 70px;
    height: 70px;
    border-radius: 48px / 48px;
}

#vehicle-pattern span.ew-dl-rightrearwheel {
    top: 2px;
    right: 206px;
    width: 70px;
    height: 70px;
    border-radius: 48px / 48px;
}

#vehicle-pattern span.ew-dl-rightunderbody {
    top: 40px;
    left: 137px;
    width: 185px;
    height: 28px;
}

#vehicle-pattern span.ew-dl-rightfrontlight {
    top: 70px;
    left: 15px;
    width: 25px;
    height: 50px;
    border-radius: 40px 0 0 / 90px 0 0;
}

#vehicle-pattern span.ew-dl-frontbumper {
    top: 120px;
    left: 15px;
    width: 25px;
    height: 120px;
}

#vehicle-pattern span.ew-dl-leftfrontlight {
    top: 240px;
    left: 15px;
    width: 25px;
    height: 50px;
    border-radius: 0px 0 0 40px / 0px 0 0 90px;
}

#vehicle-pattern span.ew-dl-rightfrontwing {
    top: 70px;
    left: 40px;
    width: 105px;
    height: 55px;
}

#vehicle-pattern span.ew-dl-rightmirror {
    top: 70px;
    left: 145px;
    width: 33px;
    height: 55px;
}

#vehicle-pattern span.ew-dl-rightfrontdoor {
    top: 70px;
    left: 178px;
    width: 60px;
    height: 70px;
    border-bottom-left-radius: 40px;
}

#vehicle-pattern span.ew-dl-rightdoorbands {
    top: 70px;
    left: 238px;
    width: 25px;
    height: 70px;
}

#vehicle-pattern span.ew-dl-rightreardoor {
    top: 70px;
    left: 263px;
    width: 70px;
    height: 70px;
    border-bottom-right-radius: 30px;
}

#vehicle-pattern span.ew-dl-rightrearwing {
    top: 70px;
    left: 330px;
    width: 105px;
    height: 50px;
}

#vehicle-pattern span.ew-dl-rightrearlight {
    top: 70px;
    left: 435px;
    width: 25px;
    height: 50px;
    border-radius: 0 50px 0 0 / 0 75px 0 0;
}

#vehicle-pattern span.ew-dl-hood {
    top: 125px;
    left: 40px;
    width: 105px;
    height: 115px;
}

#vehicle-pattern span.ew-dl-frontwindshield {
    top: 125px;
    left: 145px;
    width: 45px;
    height: 115px;
}

#vehicle-pattern span.ew-dl-roof {
    top: 140px;
    left: 190px;
    width: 135px;
    height: 83px;
}

#vehicle-pattern span.ew-dl-rearwindshield {
    top: 120px;
    left: 323px;
    width: 38px;
    height: 120px;
}

#vehicle-pattern span.ew-dl-chest {
    top: 120px;
    left: 360px;
    width: 75px;
    height: 120px;
}

#vehicle-pattern span.ew-dl-rearbumper {
    top: 120px;
    left: 432px;
    width: 30px;
    height: 120px;
    border-radius: 0 5px 5px 0 / 0 8px 8px 0;
}

#vehicle-pattern span.ew-dl-spoiler {
    top: 120px;
    left: 465px;
    width: 25px;
    height: 120px;
}

#vehicle-pattern span.ew-dl-leftfrontwing {
    top: 240px;
    left: 40px;
    width: 105px;
    height: 50px;
}

#vehicle-pattern span.ew-dl-leftmirror {
    top: 240px;
    left: 145px;
    width: 33px;
    height: 50px;
}

#vehicle-pattern span.ew-dl-leftfrontdoor {
    top: 225px;
    left: 180px;
    width: 60px;
    height: 65px;
    border-top-left-radius: 40px;
}

#vehicle-pattern span.ew-dl-leftdoorbands {
    top: 225px;
    left: 240px;
    width: 25px;
    height: 65px;
}

#vehicle-pattern span.ew-dl-leftreardoor {
    top: 225px;
    left: 265px;
    width: 60px;
    height: 65px;
    border-top-right-radius: 30px;
}

#vehicle-pattern span.ew-dl-leftrearwing {
    top: 240px;
    left: 325px;
    width: 110px;
    height: 50px;
}

#vehicle-pattern span.ew-dl-leftrearlight {
    top: 240px;
    left: 435px;
    width: 25px;
    height: 50px;
    border-radius: 0 0 50px 0 / 0 0 75px 0;
}

#vehicle-pattern span.ew-dl-leftfrontwheel {
    top: 286px;
    left: 65px;
    width: 70px;
    height: 70px;
    border-radius: 48px / 48px;
}

#vehicle-pattern span.ew-dl-leftunderbody {
    top: 290px;
    left: 138px;
    width: 185px;
    height: 28px;
}

#vehicle-pattern span.ew-dl-leftrearwheel {
    top: 286px;
    left: 325px;
    width: 70px;
    height: 70px;
    border-radius: 48px / 48px;
}

@media screen and (min-width: 1281px) {
    .vehicle-patron {
        width: 100%;
    }

    /* Roue avant droite */
    #vehicle-pattern span.ew-dl-rightfrontwheel {
        top: -2px;
        left: 77px;
        width: 96px;
        height: 96px;
        border-radius: 48px / 48px;
    }

    /* Roue arri�re droite */
    #vehicle-pattern span.ew-dl-rightrearwheel {
        top: -2px;
        right: 102px;
        width: 96px;
        height: 96px;
        border-radius: 48px / 48px;
    }

    /* bas de caisse droit */
    #vehicle-pattern span.ew-dl-rightunderbody {
        top: 46px;
        left: 178px;
        width: 222px;
        height: 39px;
    }

    /* Feu avant droit */
    #vehicle-pattern span.ew-dl-rightfrontlight {
        top: 90px;
        left: 20px;
        width: 30px;
        height: 58px;
        border-radius: 40px 0 0 / 90px 0 0;
    }

    /* Pare-choc avant */
    #vehicle-pattern span.ew-dl-frontbumper {
        top: 150px;
        left: 20px;
        width: 26px;
        height: 148px;
    }

    /* Feu avant gauche */
    #vehicle-pattern span.ew-dl-leftfrontlight {
        top: 300px;
        left: 20px;
        width: 30px;
        height: 58px;
        border-radius: 0px 0 0 40px / 0px 0 0 90px;
    }

    /* Aile avant droite */
    #vehicle-pattern span.ew-dl-rightfrontwing {
        top: 90px;
        left: 50px;
        width: 128px;
        height: 58px;
    }

    /* R�troviseur droit */
    #vehicle-pattern span.ew-dl-rightmirror {
        top: 90px;
        left: 178px;
        width: 40px;
        height: 58px;
    }

    /* Porte avant droite */
    #vehicle-pattern span.ew-dl-rightfrontdoor {
        top: 102px;
        left: 220px;
        width: 74px;
        height: 74px;
    }

    /* Baguettes portes droite */
    #vehicle-pattern span.ew-dl-rightdoorbands {
        top: 102px;
        left: 291px;
        width: 38px;
        height: 74px;
    }

    /* Porte arri�re droite */
    #vehicle-pattern span.ew-dl-rightreardoor {
        top: 102px;
        left: 326px;
        width: 82px;
        height: 74px;
    }

    /* Aile arri�re droite */
    #vehicle-pattern span.ew-dl-rightrearwing {
        top: 90px;
        left: 410px;
        width: 126px;
        height: 58px;
    }

    /* Feu arri�re droite */
    #vehicle-pattern span.ew-dl-rightrearlight {
        top: 90px;
        left: 537px;
        width: 40px;
        height: 58px;
        border-radius: 0 50px 0 0 / 0 75px 0 0;
    }

    /* Capot */
    #vehicle-pattern span.ew-dl-hood {
        top: 150px;
        left: 50px;
        width: 140px;
        height: 146px;
    }

    /* Parebrise avant */
    #vehicle-pattern span.ew-dl-frontwindshield {
        top: 150px;
        left: 190px;
        width: 39px;
        height: 148px;
    }

    /* Toit */
    #vehicle-pattern span.ew-dl-roof {
        top: 179px;
        left: 238px;
        width: 170px;
        height: 95px;
    }

    /* Parebrise arri�re */
    #vehicle-pattern span.ew-dl-rearwindshield {
        top: 150px;
        left: 410px;
        width: 38px;
        height: 150px;
    }

    /* Coffre */
    #vehicle-pattern span.ew-dl-chest {
        top: 150px;
        left: 450px;
        width: 86px;
        height: 148px;
    }

    /* Pare-choc arri�re */
    #vehicle-pattern span.ew-dl-rearbumper {
        top: 150px;
        left: 537px;
        width: 38px;
        height: 148px;
        border-radius: 0 5px 5px 0 / 0 8px 8px 0;
    }

    /* Spoiler */
    #vehicle-pattern span.ew-dl-spoiler {
        top: 150px;
        left: 582px;
        width: 25px;
        height: 148px;
    }

    /* Aile avant gauche */
    #vehicle-pattern span.ew-dl-leftfrontwing {
        top: 300px;
        left: 50px;
        width: 128px;
        height: 58px;
    }

    /* R�troviseur gauche */
    #vehicle-pattern span.ew-dl-leftmirror {
        top: 300px;
        left: 178px;
        width: 40px;
        height: 58px;
    }

    /* Porte avant gauche */
    #vehicle-pattern span.ew-dl-leftfrontdoor {
        top: 284px;
        left: 220px;
        width: 74px;
        height: 74px;
    }

    /* Baguette portes gauche */
    #vehicle-pattern span.ew-dl-leftdoorbands {
        top: 284px;
        left: 291px;
        width: 38px;
        height: 74px;
    }

    /* Porte arri�re gauche */
    #vehicle-pattern span.ew-dl-leftreardoor {
        top: 284px;
        left: 326px;
        width: 82px;
        height: 74px;
    }

    /* Aile arri�re gauche */
    #vehicle-pattern span.ew-dl-leftrearwing {
        top: 300px;
        left: 414px;
        width: 122px;
        height: 58px;
    }

    /* Feu arri�re gauche */
    #vehicle-pattern span.ew-dl-leftrearlight {
        top: 300px;
        left: 537px;
        width: 40px;
        height: 58px;
        border-radius: 0 0 50px 0 / 0 0 75px 0;
    }

    /* Roue avant gauche */
    #vehicle-pattern span.ew-dl-leftfrontwheel {
        top: 353px;
        left: 77px;
        width: 96px;
        height: 96px;
        border-radius: 48px / 48px;
    }

    /* Bas de caisse gauche */
    #vehicle-pattern span.ew-dl-leftunderbody {
        top: 362px;
        left: 178px;
        width: 220px;
        height: 39px;
    }

    /* Roue arri�re gauche */
    #vehicle-pattern span.ew-dl-leftrearwheel {
        top: 353px;
        left: 402px;
        width: 96px;
        height: 96px;
        border-radius: 48px / 48px;
    }
}

/***************************************
            Jauge d'essence
***************************************/

/*.fuel-gauge-img {
    height: 140px;
}*/

/* Aiguille jauge d'essence */
/*.needle {
    position: absolute;
    top: 50%;
    left: 52%;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(22deg);
    width: 3px;*/ /* Largeur de la base */
    /*height: 80px;*/ /* Hauteur totale de l'aiguille */
    /*background: linear-gradient(to bottom, transparent 20%, red 20%, red 100%);
}

.needle-popup {
    position: absolute;
    top: 52%;
    left: 53%;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(22deg);
    width: 3px;
    height: 80px;
    background: linear-gradient(to bottom, transparent 20%, red 20%, red 100%);
}

@media screen and (min-width: 1281px) {
    .fuel-gauge-img {
        width: 200px;
        height: auto;
        position: absolute;
        left: -35px;
    }

    .needle {
        top: 59%;
        left: 30%;
        width: 4px;
        height: 85px;
    }

    .needle-popup {
        top: 59%;
        left: 30%;
        width: 4px;
        height: 85px;
    }
}

@media screen and (min-width: 1501px) {
    .needle {
        top: 60%;
        left: 26%;
    }
}

@media screen and (min-width: 1701px) {
    .needle {
        top: 60%;
        left: 23%;
    }
}

@media screen and (min-width: 1901px) {
    .fuel-gauge-img {
        width: auto;
        height: 300px;
        left: -50%;
        position: relative;
    }

    .needle {
        top: 53%;
        left: 21%;
        width: 6px;
        height: 175px;
    }

    .fuel-gauge-img-popup {
        left: -95%;
    }

    .needle-popup {
        top: 52%;
        left: 18%;
        width: 6px;
        height: 175px;
    }
}*/

/***************************************
        Signature Pad Contracts
***************************************/
.signature-pad {
    width: 100%;
    height: 220px;
    display: block;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    touch-action: none;
    cursor: crosshair;
}

.signature-placeholder {
    height: 120px;
}