/* ----------- Gestion de la completion d'un champ de saisie avec propostions de valeurs ----------- */

.Completion {
    /*position: fixed;*/
    position:absolute;
    background-color: white;
    padding-left: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 2px;
    /*border: solid 1px #666;*/
    box-shadow: 0 0 2px #aaaaaa;
    border-radius:4px;
    border-top: none;
    overflow-y: scroll;
    /*font-family: Arial;*/
    font-size: 13px;
    max-height:200px;
    visibility:hidden;
    z-index:10;
}

.Completion p {
    margin: 0px;
    padding: 0px;
    height:50px;
    padding-top: 5px;
    padding-bottom: 3px;
    padding-left: 3px;
    /*border-bottom: solid 1px #A4A4A4;*/
    text-align:left;
    padding: 14px 16px;
    font-size:16px;
}

.Completion p:hover {
    background-color: #F5F5F5;
    color: #D7000F;
    cursor: pointer;
}

.zone-completion {
    position: relative;
    width: 100%;
    margin-top: -6px;
}
.error-message
{
    display: none;
    color: #d7000f;
}
.loader-svg
{
    stroke: #d7000f;
    animation: circle-anim 1.4s ease-in infinite both;
    display: none;
    fill: transparent;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 190;
    stroke-width: 8px;
    transform-origin: 50% 50%;
    transition: stroke .6s ease-in;
    height: 24px;
    position: absolute;
    right: 25px;
    top: 10px;
}
.zone-completion.waiting
{
    cursor: wait;
}
.zone-completion.waiting .loader-svg
{
    display: block;
}
.zone-completion.waiting input[type="text"]
{
    pointer-events: none;
}
/* Début animation */

    .loader-svg circle
    {
        animation: circle-anim 1.4s ease-in infinite both;
        display: block;
        fill: transparent;
        stroke-linecap: round;
        stroke-dasharray: 283;
        stroke-dashoffset: 190;
        stroke-width: 8px;
        transform-origin: 50% 50%;
        transition: stroke .6s ease-in
    }

@keyframes circle-anim
{
    0%
    {
        stroke-dashoffset: 280;
        transform: rotate(0)
    }

    50%
    {
        stroke-dashoffset: 75;
        transform: rotate(45deg)
    }

    to
    {
        stroke-dashoffset: 280;
        transform: rotate(360deg)
    }
}

/* Fin animation*/
.zone-completion .bt-erase
{
    position: absolute;
    /*right: 5px;*/
    right: -24px; /* Forcing pour Firefox*/
    top: 8px;
    border: none;
    background-color: transparent;
}
.zone-completion .bt-erase svg
{
       width: 14px;
}
.zone-completion .bt-erase:hover
{
    background-color: white
}
/*
.div-compare svg
{
    width: 14px;
    margin-right: 10px;
}

*/