/**
 * css/custom/common.css
 * Stili custom common
 * 
 * @package ItticiSurgelati
 * @version 0.0.2
 */
:root {

    --odoo-text-primary     : #182931;
    --odoo-text-secondary   : #4b5b63;

    --odoo-brand-accent     : #ff5f1f;

    --odoo-border-color     : #dcdfe6;

    --odoo-container-back   : #f7eeeb;

    --odoo-input-back       : #f2f2f2;
    --odoo-input-border     : #404040;  
    --odoo-input-focus      : #ff5f1f;
   
    --odoo-gray-100         : #f0f0f0;
    --odoo-gray-200         : #e0e0e0;
    --odoo-gray-300         : #dee2e6;
    --odoo-gray-400         : #ced4da;
    --odoo-gray-500         : #adb5bd;

}


/* ============================================
   FORM PAGE TITLE
   ============================================ */
.heading {
    font-size       : 45px !important;
    font-weight     : 500 !important;
    color           : var(--odoo-text-primary) !important;
    margin-bottom   : 8px !important;
    padding-bottom  : 0px !important;
    border-bottom   : 3px solid var(--odoo-brand-accent) !important;
    display         : inline-block !important;
    letter-spacing  : -0.3px !important;
}

/* ============================================
   FORM CONTAINER
   ============================================ */

/** TOP DEL FORM CONTAINER */ 
.form-container {
    margin-top : 20px !important;
}

/** ALTEZZA TRA LE RIGHE */
.form-container .row.mb-3 {
    margin-bottom: -15px !important;
}


.form-persona-giuridica {
    margin          : -2px;
    border          : 1px solid var(--odoo-brand-accent) !important;
    border-radius   : 20px !important;
    margin-bottom   : -20px !important;

    background      : var(--odoo-container-back) !important;  


}

.form-persona-giuridica .row.mb-3 {
    margin-left     : 0px;
    margin-right    : 0px;
    margin-bottom   : 20px !important;
}




/* ============================================
   FORM FIELDS 
   ============================================ */

/** FIELDSET */
.fieldset {
    margin-bottom   : 0px !important;
}

/** FORM LABEL */
.form-label {
    display         : block !important;
    font-size       : 16px !important;
    font-weight     : 600 !important;
    color           : var(--odoo-text-secondary) !important;
    margin-bottom   : 0px !important;
    text-transform  : uppercase !important;
    letter-spacing  : 0.5px !important;
}

/* FORM INPUT FIELD  */
.form-control {
    width           : 100% !important;
    padding         : 0px 0 !important;
    font-size       : 24px !important;
    font-weight     : 400 !important;

    color           : var(--odoo-text-primary) !important;

    background      : var(--odoo-input-back) !important;  

    border          : none !important;
    /** border-bottom   : 1px solid var(--odoo-border-focus) !important; */ 
    border-bottom   : 1px solid var(--odoo-input-border) !important;

    border-radius   : 0 !important;
    transition      : border-color 0.2s ease !important;
    box-shadow      : none !important;
}

/** FORM INPUT FOCUS */
.form-control:focus {
    outline         : none !important;
    border-bottom   : 1px solid var(--odoo-input-focus) !important;
    box-shadow      : none !important;
}

/** PASSWORD WRAPPER */
.password-wrapper {
    position        : relative !important;
}

/** TOGGLE PASSWORD WRAPPER */
.toggle-pass {
    position    : absolute !important;
    margin-top  : 5px !important; 
    right       : 3 !important;
    cursor      : pointer !important;
    font-size   : 20px !important;
    color       : var(--odoo-text-secondary) !important;
}


/* ============================================
   BOTTONE
   ============================================ */
.tf-btn.animate-btn {
    display         : inline-block !important;
    width           : 100% !important;
    padding         : 12px 20px !important;
    background      : var(--odoo-brand-accent) !important;
    color           : #fff !important;
    text-align      : center !important;
    text-decoration : none !important;
    font-size       : 20px !important;
    font-weight     : 600 !important;
    border-radius   : 28px !important;
    border          : none !important;
    cursor          : pointer !important;
    transition      : all 0.2s ease !important;
    margin-top      : 16px !important;
}

.tf-btn.animate-btn:hover {
    background: #e04e0e !important;
}

/* BOTTONE SECONDARIO ?? */
.tf-btn.style-line {
    background  : transparent !important;
    border      : 1px solid var(--odoo-brand-accent) !important;
    color       : var(--odoo-brand-accent) !important;
}

.tf-btn.style-line:hover {
    background  : var(--odoo-brand-accent) !important;
    color       : #fff !important;
}