@import './components//button.css';
@import './components/text.css';
@import './components/label.css';
@import './components/input.css';
@import './components/select.css';
@import './components/checkbox.css';
@import './components/form.css';
@import './components/image.css';
@import './components/dialog.css';

@import './helpers/helpers.css';


/* Riferito a <html> */
:root {
    /* Dichiaro variabili globali*/
    --tab-attivo: #387cbd;
    --blu-bordi: #478ac9;
    --azzurro: #77aad9;
    --background-color: #f2f2f2cc;
    --verde: rgb(130, 214, 22);
    --rosso: rgb(234, 6, 6);
    --arancione: #d77d46;

    /* Spaziatura */
    --spacing-md: 1rem;
    --spacing-sm: 0.5rem;
    
    /* Font Sizes */
    --font-size-xl: 2rem;
    --font-size-lg: 1.50rem;
    --font-size-md: 1.25rem;
    --font-size-nl: 1rem;
    --font-size-sm: 0.85rem;

    /* Border Radius */
    --border-radius-md: 30px;
    --border-radius-nl: 15px;
    --border-radius-sm: 10px;


    /* Ombre standard */
    --ombra-form: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
    

    /* Non Funzionati */
    /* Utilizzati solo per ricordare le dimensioni esatte degli schermi*/
    --breakpoint-xxl: 1399px;
    --breakpoint-xl: 1199px;
    --breakpoint-lg: 991px;
    --breakpoint-md: 768px;
    --breakpoint-sm: 575px;
}

@font-face {
    font-family: 'Open Sans';
    font-weight: normal;
    font-style: normal;
    font-display: swap;

    src: url('/assets/fonts/OpenSans.ttf');
}


html {
    font-size: 16px;
}

body {
    margin: 0px;
}

header {
    background-color: white !important;
}

section {
    background-color: var(--background-color);
}

body, button, label, input {
    font-family: 'Open Sans';
    font-size: var(--font-size-nl);
}

p, h1 {
    margin: 0px;    
    padding: 0px;
}

input {
    border: 1px solid var(--blu-bordi);
    border-radius: var(--border-radius-sm);
}

button {
    cursor: pointer;
}
 
.separator {
    flex-grow: 1;
}


/*-------------------------------------------------------------*/
/*                        Paginazione                          */
/*-------------------------------------------------------------*/
.paginazione__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}


.paginazione__pag_attiva {
    font-weight: bold;
    font-size: 1.75rem !important;
}

.paginazione__bottone {
    margin-right: 25px;
    margin-left: 25px;
}

.paginazione__num_pag {
    font-size: var(--font-size-lg);
    color: var(--azzurro);
}



/*-------------------------------------------------------------*/
/*                        Tabelle                              */
/*-------------------------------------------------------------*/
.tabella__bordo_riga {
    border-style: solid;
    border-color: var(--blu-bordi);
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
}

.u-table-entity {
    width: -webkit-fill-available;
    border-collapse: collapse;
    text-align: left;
    margin-top: 1px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.u-table-entity thead {
    font-weight: 700;
    font-size: var(--font-size-nl);
    background-color: var(--azzurro);
}

.u-table-entity th {
    padding: 10px
}

.u-table-entity td {
    padding: 10px
}

.u-table-alt tr:nth-child(even) {
    color: #111111;
    background-color: #e9f2fa;
}

.u-table-alt-2 tr:nth-child(odd) {
    color: #111111;
    background-color: #e9f2fa;
}


@media (max-width: 575px) {
    .tabella__bordo_riga {
        border-bottom-width: 0px;
    }

    .u-table-entity th {
        display: none;
    }

    .u-table-entity thead {
        display: none;
    }


    .u-table-entity td {
        display: block;
        
        padding: var(--spacing-sm) var(--spacing-md);
    }


    .u-table-entity td::before {
        content: attr(data-cell) ": ";
        color: black;
        font-weight: 700;
        text-transform: capitalize;
        display: flex;
    }



    .u-table-entity td:first-child {
        padding-top: 1.5rem;
        border-style: solid;
        border-color: var(--blu-bordi);
        border-top-width: 0px;
        border-right-width: 0px;
        border-left-width: 0px;
        border-bottom-width: 1px;
    }


    .u-table-entity td:last-child {
        padding-bottom: 1.5rem;
    }
}

.u-clear-input {
    border: none;
    background-color: transparent;
}