:root {
    --brand-blue: #4682b4;
    /* blue background: rgba(70, 130, 180, 0.5);*/
    --brand-pink: hotpink;
    --brand-gray: #E3EAFF;
    /*rgba(227, 234, 255)*/
    /*    --brand-gray: #E4E9F7;
*/ --brand-yellow: #ffef9f;
}


html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}


/*.sidenav {
    width: 130px;
    top: 60px;
    position: fixed;
    z-index: 1;
    bottom: 70px;
    left: 10px;
    background: var(--brand-gray);
    overflow-x: hidden;
    padding: 8px 0;
    border-radius: 10px;
}
*/

.sidenav {
    width: 100%;
    top: 0px;
    position: fixed;
    z-index: 1;
    bottom: 90%;
    left: 0px;
   /* margin-right: 21px;
   */ /* background: #eee; */
    background: var(--brand-gray);
    overflow-y: hidden;
    padding: 8px 0;
    border-radius: 10px;
    display: inline-flex;
}



    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 15px;
        font-weight: 400;
        color: var(--brand-blue);
        display: block;
    }

        .sidenav a:hover {
            color: floralwhite;
            background-color: white;           
        }


.sidenavDetails {
    width: 60px;
    top: 60px;
    position: fixed;
    z-index: 1;
    bottom: 70px;
    left: 0px;
    /* background: #eee; */
    background: var(--brand-gray);
    overflow-x: hidden;
    padding: 8px 0;
    border-radius: 10px;
}



    .sidenavDetails a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 15px;
        font-weight: 400;
        color: var(--brand-blue);
        display: block;
    }

        .sidenavDetails a:hover {
            color: floralwhite;
            background-color: white;
        }



button[buttondesign="blue"] {
    background-color: var(--brand-blue);
    display: inline-block;
    color: #fff;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

button[buttondesign="gray"] {
    background-color: var(--brand-gray);
    display: inline-block;
    color: var(--brand-pink);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

button[buttondesign="pink"] {
    background-color: var(--brand-pink);
    display: inline-block;
    color: #fff;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}





a[adesign="pink"] {
    background-color: var(--brand-pink);
    display: inline-block;
    color: #fff;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

a[adesign="gray"] {
    background-color: var(--brand-gray);
    display: inline-block;
    color: var(--brand-pink);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
/*    border-radius: 0.25rem;
*/    border-radius: 0.25rem;
}

a[adesign="blue"] {
    background-color: var(--brand-blue);
    display: inline-block;
    color: #fff;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

h4[division="blue"] {
    background-color: var(--brand-blue);
    color: #fff;
    font-weight: 600;
    line-height: 1.5;
    padding-left: 10px;
}

h4[division="pink"] {
    background-color: var(--brand-pink);
    color: #fff;
    font-weight: 600;
    line-height: 1.5;
}

h4[division="gray"] {
    background-color: var(--brand-gray);
    color: var(--brand-blue);
    font-weight: 600;
    line-height: 1.5;
}



/*https://www.youtube.com/watch?v=2PlpX9HKDMc*/
/*https://www.youtube.com/watch?v=mm_7-6-GxYQ*/


.accordion-button {
    background: var(--brand-blue);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    background-image: #fff;
}

    .accordion-button:focus {
        background: var(--brand-blue);
        color: #fff;
    }

    .accordion-button:not(.collapsed) {
        background: var(--brand-blue);
        color: #fff;
    }

        .accordion-button:not(.collapsed)::after {
            background-image: none;
        }

    .accordion-button::after {
        background-image: none;
        content: ">";
        width: auto;
        height: auto;
    }