/*!
 * Componente Nombre:  dexctzusd    | default
 * Base: Bootstrap v4.1.0
 * Autor: DEX360
 * Copyright: DEX360

    0.  :root   
    1.  dexctzusd_general
        1.1. dexctzusd_generic_title
        1.2. dexctzusd_generic_button
        1.3. dexctzusd_icon_x
        1.4. wpcf7-form
        1.5. Form :valid :invalid :disabled
    2.  dexctzusd_section               [section.css]
        2.1. dexctzusd_buy_used
        2.2. dexctzusd_quote_vehicle
        2.3. dexctzusd_steps_sell
    3.  dexctzusd_vehicle               [vehicle.css]
        3.1. dexctzusd_vehicle_accordion
        3.2. dexctzusd_add_option_input
        3.3. dexctzusd_add_option_button
    4.  dexctzusd_message               [message.css]
    5.  dexctzusd_peronal_data          [peronal-data.css]    
    6.  dexctzusd_estimate              [estimate.css]    
    7.  dexctzusd_error                 [error.css]

    10. Responsive
*/


/* 0. :root */
:root {
    --dexctzusdColorPrimary: #265CF2;
}

/* 1. dexctzusd_general 
--------------------------------------------------------------*/
.dexctzusd_general {
    text-align: center;
}

/* 1.1. dexctzusd_general_title */
.dexctzusd_general_title {
    padding: 20px 0px 35px;
}
.dexctzusd_general_title h3 {
    font-size: 1.6em;
}
.dexctzusd_general_title span {
    color: var(--dexctzusdColorPrimary);
}
.dexctzusd_general_title h4 {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0px;
}

/* 1.2. dexctzusd_generic_button */
.dexctzusd_generic_button,
.dexctzusd_generic_button_secundary {
    -webkit-appearance: none;
    -moz-appearance: none;
    align-items: center;
    appearance: none;
    background-color: var(--dexctzusdColorPrimary);
    border-radius: 0px !important;
    border:none;
    display: inline-flex;
    border-radius: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    justify-content: center;
    overflow: hidden;
    padding: 15px 25px;
    text-transform: uppercase;    
}
.dexctzusd_generic_button:hover,
.dexctzusd_generic_button:active,
.dexctzusd_generic_button:focus,
.dexctzusd_generic_button_secundary:hover,
.dexctzusd_generic_button_secundary:active,
.dexctzusd_generic_button_secundary:focus {
    background-color: #333;
    color: #fff;
    text-decoration: none;
}
.dexctzusd_generic_button_secundary {
    background-color: #fff ;
    border-radius: 0px;
    color: var(--dexctzusdColorPrimary);
    font-size: 13px;
    padding: 6px 15px;
    text-transform: none;       
}

/* 1.3. dexctzusd_steps_error_skin-icon */
.dexctzusd_icon_x {
    align-items:center;
    background-color: #ff0000;
    border-radius:50px;
    color: white;
    display:flex;
    justify-content:center;
    height:30px;
    left:0px;
    position: absolute;
    top:-2px;
    width:30px;
}
.dexctzusd_icon_x:before {
    background-color: #000;
    background-color: currentColor;
    content: '';
    height: 2px;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 15px;
}
.dexctzusd_icon_x:after {
    background-color: #000;
    background-color: currentColor;
    content: '';
    height: 2px;
    position: absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 15px;
}

/* 1.4. wpcf7-form - dexctzusd_form_control */
.dexctzusd_general .dexctzusd_form_control,
.dexctzusd_general .wpcf7-form select,
.dexctzusd_general .wpcf7-form input.wpcf7-form-control,
.dexctzusd_general .wpcf7-form .wpcf7-textarea {
    border: 1px solid #999;
    display: inline-block;
    font-size: 14px;
    margin-bottom:10px;
    min-height: 40px;
    max-height: 80px;
    padding-left: 10px;
    transition: box-shadow .3s,border-color .3s;
    width: 100% !important;
}
.dexctzusd_general .wpcf7-form .dexctzusd_form_data_acept_term p {
    font-size:.9em;
    margin-bottom:25px;
}
.dexctzusd_general .wpcf7-form p {
    margin-bottom: 0px;
    text-align: left;
}
.dexctzusd_general .dexctzusd_form_button_container button,
.dexctzusd_general .dexctzusd_form_button_container input[type=button], 
.dexctzusd_general .dexctzusd_form_button_container input[type=reset], 
.dexctzusd_general .dexctzusd_form_button_container input[type=submit] {
    background-color: var(--dexctzusdColorPrimary);
    border: 0px;
    color: white;
    margin:0px !important;
    width:auto !important;
}
.dexctzusd_general .dexctzusd_form_button_container button,
.dexctzusd_generic_button,
.dexctzusd_general .wpcf7-form input[type=button], 
.dexctzusd_general .wpcf7-form input[type=reset], 
.dexctzusd_general .wpcf7-form input[type=submit] {
    padding: 14px 40px;
    position: relative;    
}
.dexctzusd_generic_button:hover,
.dexctzusd_generic_button:active,
.dexctzusd_generic_button:focus {
    background-color: #000000;
}
.dexctzusd_general .dexctzusd_form_button_container, 
.dexctzusd_general .dexctzusd_form_button_container p {
    text-align: right;
}
.dexctzusd_general .dexctzusd_form_button_container {
    margin-top:2em;
}
.dexctzusd_general .dexctzusd_form_button_container p span {
    display:block;
}
.dexctzusd_form_error_message {
    color:#dc3232;
    font-size: .9em;
    display:none;
    text-align: left;
}


/* 1.5. Form :valid :invalid :disabled */
input:required:focus:invalid {
    border: 2px solid red !important;
}
input:required:focus:valid {
    border: 2px solid green !important;
}
input:disabled {
    background-color: #f0f0f0; 
    color: #a0a0a0; 
    border: 1px solid #ccc; 
    cursor: not-allowed;
    opacity: 0.6;
}


/* 10. Responsive */
@media (max-width:600px) {
    .dexctzusd_general_title h3 {
        font-size: 1.3em;
    }    
    /* dexctzusd_generic_button */
    .dexctzusd_generic_button {
        display: flex;
        font-size: 1.2em;
        margin-bottom: 20px;
        width: 100%;
    }
    /* dexctzusd_steps_error_skin-icon */
    .dexctzusd_icon_x {
        justify-content: center;
        left: inherit;
        position: relative;
        top: inherit;
        margin: 0px auto 10px;
    }
    /* wpcf7-form */
    .dexctzusd_general .dexctzusd_form_button_container button,
    .dexctzusd_general .dexctzusd_form_button_container input[type=button], 
    .dexctzusd_general .dexctzusd_form_button_container input[type=reset], 
    .dexctzusd_general .dexctzusd_form_button_container input[type=submit] {
        width:100% !important;
    }
    .dexctzusd_buy_used article {
        background-size: cover;
    }
}