:root {
    /* Generic */
    --color-danger: #bb1010;
    --color-success: #007755;
    --color-lightsuccess: #81dac0;

    /* ?? */
    --header-color: #ffffff;
    --header-background-color: #0A7759;
    --content-background-color: #FFFFFF;
    --footer-background-color: #FFFFFF;
    --primary-background-color: #1e90ff;
    --card-margin: 1em;
    --input-heigth: 2.5em;
    --font-size: 12px;
    --font-family: 'Montserrat', Helvetica,  Verdana, Geneva, Tahoma, Arial, Lucida, sans-serif;

    /* Buttons */
    --button-color-primary: #007755; 
    --button-color-primary-hover: color-mix(in xyz, var(--button-color-primary), #000000 25%); /* #1978d8; */
    --button-color-secondary: var(--button-color-primary);
    --button-color-secondary-hover: var(--button-color-primary-hover);
    --button-color-danger: #bb1010;
    --button-color-danger-hover: color-mix(in xyz, var(--button-color-danger), #000000 25%);
}

* {
    margin: 0;
    padding: 0;
    margin-block: 0;
}

html, body {
    font-size: var(--font-size);
    font-family: var(--font-family);
}

.center {
    text-align: center;
}


.flex {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-3 {
    display:flex;
    align-items: center;
    justify-content: space-between;
    /*margin: auto;*/
    flex-direction: row;
}

.flexbox {
    display:flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-rows {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    gap: 1em;
}

.flex-cols {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    gap: 1em;
}

.flex-cols>*,
.flex-rows>* {
    flex-grow: 1;
    flex-shrink: 1;
    box-sizing: border-box;
    width: 25%;
    text-align: left;
}

.badge {
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    
}

.badge>* {
    max-width: 100%;
    max-height: 100%;
}

.hide {
    display: none !important;
}