:root {
    --breto-azure-rgb: 114, 194, 215; /* #72C2D7 */ /** replacement for bootstrap 'primary' **/
    --breto-cool-gray-rgb: 121, 124, 128; /** replacement for bootstrap 'secondary' **/
    --breto-accent-rgb: 214, 114, 149;
    --util-green-rgb: 27, 131, 47;  /** replacement for bootstrap 'success' **/
    --util-red-rgb: 196, 30, 58; /** replacement for boostrap 'danger' **/
    --util-blue-rgb: 96, 160, 255; /** replacement for boostrap 'info' **/
    --util-yellow-rgb: 253, 219, 51; /** replacement for boostrap 'warning' **/
    --util-gray-rgb: 221, 221, 221; /** replacement for boostrap 'light' **/
    --util-black-rgb: 39, 39, 39; /** replacement for boostrap 'dark' **/


    --breto-azure: rgb(var(--breto-azure-rgb));
    --breto-cool-gray: rgb(var(--breto-cool-gray-rgb));
    --breto-accent: rgb(var(--breto-accent-rgb));

    --util-green: rgb(var(--util-green-rgb));
    --util-red: rgb(var(--util-red-rgb));
    --util-blue: rgba(var(--util-blue-rgb));
    --util-yellow: rgb(var(--util-yellow-rgb));
    --util-gray: rgb(var(--util-gray-rgb));
    --util-black: rgb(var(--util-black-rgb));

    --color-primary-rgb: var(--breto-azure-rgb);
    --color-secondary-rgb: var(--breto-cool-gray-rgb);
    --color-success-rgb: var(--util-green-rgb);
    --color-danger-rgb: var(--util-red-rgb);
    --color-info-rgb: var(--util-blue-rgb);
    --color-warning-rgb: var(--util-yellow-rgb);
    --color-light-rgb: var(--util-gray-rgb);
    --color-dark-rgb: var(--util-black-rgb);

    --color-primary: rgb(var(--color-primary-rgb));
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-success: rgb(var(--color-success-rgb));
    --color-danger: rgb(var(--color-danger-rgb));
    --color-info: rgb(var(--color-info-rgb));
    --color-warning: rgb(var(--color-warning-rgb));
    --color-light: rgb(var(--color-light-rgb));
    --color-dark: rgb(var(--color-dark-rgb));

    /** unused **/
    --util-purple-rgb: 127, 106, 232; /** replacement for boostrap 'info' **/
    --util-purple: rgb(var(--util-purple-rgb));
}

html {
    height: 100vh;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-size: 16px;
}

@media only screen and (max-width: 768px) {
    body {
        font-size: 10px;
    }

    /*input {*/
    /*    font-size: 10px !important; !** @todo fix *!*/
    /*}*/
}

body {
    color:var(--util-black-rgb);
    font-family: "Noto Sans", sans-serif;
    height: 100%;
    font-size: 1rem;
}

/**
 * Utilities
 */

.u-text-bold {
    font-weight: bold;
}

/**
 * Form components
 */

/** Bootstrap overrides */
.c-input {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--util-gray);
    height: 50px;
    transition: background-color .3s linear;
    background: transparent;
    padding: 5px;
    box-shadow: none;
}


.c-input:focus {
    background: #fff;
    border-bottom: 1px solid var(--breto-azure) !important;
    box-shadow: none;
    outline: 0;
}

h1 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--util-black);
}
h2  {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--util-black);
}
h3  {
    font-size: 1.17rem;
    font-weight: bold;
    color: var(--util-black);
}
h4 {
    font-size: 1rem;
    font-weight: bold;
    color: var(--util-black);
}
h5 {
    font-size: 1rem;
    font-weight: bold;
    color: var(--util-black);
}
h6 {
    font-size: 1rem;
    font-weight: bold;
    color: var(--util-black);
}

p {
    font-size: 1.17rem;
}
/** End bootstrap overrides */

/**
 * Styling generic for generated symfony forms to avoid having to add custom classes.
 */
input[readonly], textarea[readonly] {
    background-color: #f0f0f0; /* Light grey background */
    color: #666;               /* Slightly faded text color */
    border: 1px solid #ccc;    /* Subtle border */
    cursor: not-allowed;       /* Change cursor to indicate non-editable */
}

input[readonly]:focus, textarea[readonly]:focus {
    background-color: #f0f0f0; /* Light grey background */
    color: #666;               /* Slightly faded text color */
    border: 1px solid #ccc;    /* Subtle border */
    cursor: not-allowed;       /* Change cursor to indicate non-editable */
}


/* quick and dirty fix to hide menu; organise */
@media only print {
    .navbar {
        display: none !important;
    }

    .c-footer {
        display: none !important;
    }

    .c-mobile-menu-wrapper {
        display: none !important;
    }
}