/*!
 * Componente Nombre: dextdbkg  | citroen
 * Autor: DEX360
 * Copyright: DEX360
 */ 
 
/*  
    0.  :root
    1.  dextdbkg
    2.  dextdbkg--steps-line
    3.  dextdbkg--button
    4.  dextdbkg--form
        4.2. amelia plugin
    
*/

/* 0. :root
--------------------------------------------------------------*/
:root {
    --colorPrimary: #e21017;
    --colorHover: #e05315;
}

/* 1. dextdbkg
--------------------------------------------------------------*/
.dextdbkg .dtdt--title span {
    color: var(--colorPrimary);
}
.dextdbkg .dextdbkg--button {
    background-color: var(--colorPrimary);
}

/* 2. dextdbkg--steps-line 
--------------------------------------------------------------*/
.dextdbkg--steps-line .step-active {
    background: var(--colorPrimary);
}

/* 3. dextdbkg--button
--------------------------------------------------------------*/
.dextdbkg--button {
    align-items: center;
    background-color: var(--colorPrimary);
    border: 0;
    border-radius: 20px;
    color: white;
    display: inline-flex;
    font-size: 0.8em;
    font-weight: 500;
    justify-content: center;
    overflow: hidden;
    padding: 1em 1.3em;
    position: relative;
    text-align: center;
    z-index: 10;
}
.dextdbkg--button:before {
    content: "";
    background: var(--colorHover);
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    transform-origin: bottom;
    z-index: -1;
    transform: scaleX(0);
    opacity: 0;
    transition: 0.4s transform, 0.4s opacity;
}
.dextdbkg--button:hover {
    text-decoration: none;
    color: white;
}
.dextdbkg--button:hover:before {
    opacity: 1;
    transform: scaleX(1);
}

/*  4. dextdbkg--form > 4.2. amelia plugin
--------------------------------------------------------------*/
.dextdbkg .amelia-v2-booking #amelia-container .am-button.am-button--micro.is-icon-only.am-heading-prev {
    background-color: var(--colorPrimary);
}

/*  5.  dextdbkg--header
--------------------------------------------------------------*/
#wp-test-drive, #wp-test-drive:hover {
    align-items: center;
    background-color: #ffffff;
    border:1px solid  var(--colorPrimary);
    border-radius: 20px;
    color: var(--colorPrimary) !important;
    display: inline-flex;
    font-size: 0.8em;
    font-weight: 500;
    justify-content: center;
    opacity: 1;
    padding: .5em .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}