:root {

    /* ========================= */
    /* === COLORI BRAND LOGO === */
    /* ========================= */

    --ev-red: #EA3F64;
    /* Rosso/Fucsia logo */
    --ev-blue: #77C2F0;
    /* Blu chiaro logo */
    --ev-blue-dark: #0093DD;
    /* Blu primario */
    --ev-green: #1FAF8F;
    /* Verde petrolio brand */


    /* ========================= */
    /* === COLORI SEMANTICI === */
    /* ========================= */

    --ev-primary: var(--ev-blue-dark);
    /* PRIMARY */
    --ev-secondary: var(--ev-red);
    /* SECONDARY */
    --ev-positive: var(--ev-green);
    /* SUCCESS */
    --ev-negative: var(--ev-red);
    /* ERROR */
    --ev-info: var(--ev-blue);
    /* INFO */
    --ev-warning: #F2C037;
    /* WARNING */


    /* ========================= */
    /* === NEUTRI UI === */
    /* ========================= */

    --ev-text: #444444;
    --ev-text-light: #777777;

    --ev-border: #E0E0E0;

    --ev-bg: #FFFFFF;
    --ev-bg-alt: #F7F9FB;

    --ev-black: #111111;
    --ev-grey: #BDBDBD;
    --ev-grey-dark: #757575;
    --ev-grey-light: #EEEEEE;


    /* ========================= */
    /* === VARIANTI TECNICHE === */
    /* ========================= */

    --ev-green-dark: #138A6F;
    --ev-blue-darker: #007EC1;
    --ev-red-dark: #D93658;

}


/* ============================= */
/* === SEMANTIC UI OVERRIDE === */
/* ============================= */

/* BODY */
body {
    background-color: var(--ev-bg);
    color: var(--ev-text);
}

/* BUTTONS */
.ui .primary .button {
    background-color: var(--ev-primary) !important;
    color: #fff !important;
}

.ui .green .button {
    background-color: var(--ev-primary) !important;
    color: #fff !important;
}

.ui.secondary.button {
    background-color: var(--ev-secondary) !important;
    color: #fff !important;
}

.ui.positive.button {
    background-color: var(--ev-positive) !important;
    color: #fff !important;
}

.ui.negative.button {
    background-color: var(--ev-negative) !important;
    color: #fff !important;
}

/* LABELS */
.ui.primary.label {
    background-color: var(--ev-primary) !important;
}

.ui.red.label {
    background-color: var(--ev-secondary) !important;
}

.ui.green.label {
    background-color: var(--ev-positive) !important;
}

/* MENU */
.ui.menu {
    border-color: var(--ev-border) !important;
}

.ui.menu .active.item {
    color: var(--ev-primary) !important;
    border-bottom: 2px solid var(--ev-primary) !important;
}

/* MESSAGES */
.ui.info.message {
    background-color: #EAF6FD !important;
    color: var(--ev-primary) !important;
}

.ui.positive.message {
    background-color: #E8F7F2 !important;
    color: var(--ev-positive) !important;
}

.ui.negative.message {
    background-color: #FDECEF !important;
    color: var(--ev-negative) !important;
}

/* LINKS */
a {
    color: var(--ev-primary);
}

a:hover {
    color: var(--ev-secondary);
}

/* TABLE */
.ui.table thead th {
    background-color: var(--ev-bg-alt) !important;
}

/* INPUT FOCUS */
.ui.input input:focus {
    border-color: var(--ev-primary) !important;
}

/* ================================ */
/* === FORCE SEMANTIC COLORS EV === */
/* ================================ */

/* GREEN -> Brand Verde */
.ui.green.button,
.ui.green.buttons .button {
    background-color: var(--ev-positive) !important;
    color: #fff !important;
}

.ui.green.button:hover {
    background-color: #17967A !important;
}

/* BLUE -> Brand Blue Primario */
.ui.blue.button,
.ui.blue.buttons .button {
    background-color: var(--ev-primary) !important;
    color: #fff !important;
}

.ui.blue.button:hover {
    background-color: #007EC1 !important;
}

/* ORANGE -> Converted to Brand Secondary */
.ui.orange.button,
.ui.orange.buttons .button {
    background-color: var(--ev-secondary) !important;
    color: #fff !important;
}

.ui.orange.button:hover {
    background-color: #D93658 !important;
}

/* ===================================================== */
/* === SEMANTIC UI COLOR SYSTEM -> ESPLORA VIAGGI === */
/* ===================================================== */

/* === RED -> Brand Red === */
.ui.red.button,
.ui.red.buttons .button,
.ui.red.label,
.ui.red.message {
    background-color: var(--ev-secondary) !important;
    color: #fff !important;
}

/* === BLUE -> Brand Primary === */
.ui.blue.button,
.ui.blue.buttons .button,
.ui.blue.label,
.ui.blue.message {
    background-color: var(--ev-primary) !important;
    color: #fff !important;
}

/* === GREEN -> Brand Green === */
.ui.green.button,
.ui.green.buttons .button,
.ui.green.label,
.ui.green.message {
    background-color: var(--ev-positive) !important;
    color: #fff !important;
}

/* === ORANGE -> Brand Secondary (Red) === */
.ui.orange.button,
.ui.orange.buttons .button,
.ui.orange.label,
.ui.orange.message {
    background-color: var(--ev-secondary) !important;
    color: #fff !important;
}

/* === YELLOW -> Warning === */
.ui.yellow.button,
.ui.yellow.buttons .button,
.ui.yellow.label,
.ui.yellow.message {
    background-color: var(--ev-warning) !important;
    color: #000 !important;
}

/* === TEAL -> Verde Acqua (Brand Green Soft) === */
.ui.teal.button,
.ui.teal.buttons .button,
.ui.teal.label,
.ui.teal.message {
    background-color: var(--ev-green) !important;
    color: #fff !important;
}

/* === OLIVE -> Variante Verde Scura === */
.ui.olive.button,
.ui.olive.buttons .button,
.ui.olive.label,
.ui.olive.message {
    background-color: #138A6F !important;
    color: #fff !important;
}

/* === VIOLET -> Blu Secondario === */
.ui.violet.button,
.ui.violet.buttons .button,
.ui.violet.label,
.ui.violet.message {
    background-color: var(--ev-blue) !important;
    color: #fff !important;
}

/* === PURPLE -> Secondario Soft === */
.ui.purple.button,
.ui.purple.buttons .button,
.ui.purple.label,
.ui.purple.message {
    background-color: #9B59B6 !important;
    color: #fff !important;
}

/* === PINK -> Brand Red Chiaro === */
.ui.pink.button,
.ui.pink.buttons .button,
.ui.pink.label,
.ui.pink.message {
    background-color: #F06292 !important;
    color: #fff !important;
}

/* === BROWN -> Neutro Scuro === */
.ui.brown.button,
.ui.brown.buttons .button,
.ui.brown.label,
.ui.brown.message {
    background-color: #8D6E63 !important;
    color: #fff !important;
}

/* === BLACK -> Testo Scuro Brand === */
.ui.black.button,
.ui.black.buttons .button,
.ui.black.label,
.ui.black.message {
    background-color: #222 !important;
    color: #fff !important;
}

/* === GREY / GRAY -> Neutri UI === */
.ui.grey.button,
.ui.grey.buttons .button,
.ui.grey.label,
.ui.grey.message,
.ui.gray.button,
.ui.gray.buttons .button,
.ui.gray.label,
.ui.gray.message {
    background-color: #BDBDBD !important;
    color: #222 !important;
}

/* === BASIC BUTTON (DEFAULT) === */
.ui.basic.button {
    background: transparent !important;
    color: var(--ev-primary) !important;
    border: 1px solid var(--ev-border) !important;
}