:root {
    --aow-body: #4D4D4F; /* schwarz */
    --aow-body-rgb: 77, 77, 79; /* schwarz */
    --aow-primary: #005DA3; /* blau */
    --aow-primary-rgb: 0, 93, 163; /* blau */
    --aow-secondary: #DA190B; /* rot */
    --aow-secondary-rgb: 218, 25, 11; /* rot */
    --aow-success: #59BB57; /* grün */
    --aow-success-rgb: 89, 187, 87; /* grün */
    --aow-light: #f4f4f4; /* grau hell 30% */
    --aow-light-rgb: 244, 244, 244; /* grau hell 30% */
    --aow-main-bg-color: #fff; /* weiss */
    --aow-font-size-big: 1.5rem;
    --aow-font-size-main: 1.1rem;
    --aow-danger: #dc3545; /* rot */
    --aow-danger-rgb: 220, 53, 69; /* rot */
}

body {
    /* Bootstrap 
     * see https://getbootstrap.com/docs/5.1/customize/css-variables/
     */
    --bs-body-color: var(--aow-body);
    --bs-body-color-rgb: var(--aow-body-rgb);
    --bs-primary: var(--aow-primary);
    --bs-primary-rgb: var(--aow-primary-rgb);
    --bs-secondary: var(--aow-secondary);
    --bs-secondary-rgb: var(--aow-secondary-rgb);
    --bs-success: var(--aow-success);
    --bs-success-rgb: var(--aow-success-rgb);
    --bs-light: var(--aow-light);
    --bs-light-rgb: var(--aow-light-rgb);
    --bs-danger: var(--aow-danger);
    --bs-danger-rgb: var(--aow-danger-rgb);
    --bs-gray: var(--aow-secondary);
    --bs-font-sans-serif: "Fira Sans", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* Bootstrap 5.1 issue with css vars  */

.btn-primary {
    background-color: var(--aow-primary);
    border-color: var(--aow-primary);
}

    .btn-primary:hover {
        background-color: rgba(var(--aow-primary-rgb), 0.5);
        border-color: rgba(var(--aow-primary-rgb), 0.9);
    }

    .btn-primary:focus {
        background-color: var(--aow-primary);
        border-color: var(--aow-primary);
    }

.btn-secondary {
    background-color: var(--aow-secondary);
    border-color: var(--aow-secondary);
}

    .btn-secondary:hover {
        background-color: rgba(var(--aow-secondary-rgb), 0.5);
        border-color: rgba(var(--aow-secondary-rgb), 0.9);
    }

    .btn-secondary:focus {
        background-color: var(--aow-secondary);
        border-color: var(--aow-secondary);
    }

.btn-success {
    background-color: var(--aow-success);
    border-color: var(--aow-success);
}

    .btn-success:hover {
        background-color: rgba(var(--aow-success-rgb), 0.5);
        border-color: rgba(var(--aow-success-rgb), 0.9);
    }

    .btn-success:focus {
        background-color: var(--aow-success);
        border-color: var(--aow-success);
    }

/* overwrites */

.aow-home-menu .aow-item-container .btn {
    background-color: rgba(var(--aow-primary-rgb), 0.1);
    border-color: rgba(var(--aow-primary-rgb), 0.3);
}

.aow-home-menu .aow-item-container .btn:hover {
    color: white;
    background-color: rgba(var(--aow-primary-rgb), 0.8);
    border-color: rgba(var(--aow-primary-rgb), 0.5);
}

.aow-home-menu .aow-item-container {
    width: 200px;
    height: 200px;
}

.aot-nav-left .nav-item .nav-link {
    color: var(--aow-body);
    background-color: var(--aow-light);
    border-bottom: white solid 1px;
}

.aot-nav-left .nav-item .nav-link.active {
    color: white;
    background-color: var(--aow-primary);
}

.aot-nav-left .nav-item .nav-link:hover:not(.active) {
    color: var(--aow-body);
    /*background-color: var(--aow-light);*/
    background-color: rgba(var(--aow-primary-rgb), 0.1);
    border-bottom: white solid 1px;
}