* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* --white: #ffffff; */
    --color-header-text: #ffffff;
    --color-navbar-text: #ffffff;
    --color-footer-text: #ffffff;
    --color-dashboard-main-background: #ffffff;
    --color-dashboard-table-background: #ffffff;
    --color-dashboard-table-header-text: #ffffff;
    --color-dashboard-modal-background: #ffffff;
    --color-dashboard-modal-button-text: #ffffff;
    
    --color-dashboard-text: #ffffff;

     /* --dirty-white: #f5f5f5; */
    --color-dashboard-body-background: #f5f5f5;
    

    --color-dashboard-table-row-hover: #e8eeff;
    --color-dashboard-table-row-even: #f9f9f9;

    --color-dashboard-table-border: #d0d0d0;
    --color-dashboard-input-border: #d0d0d0;

    --color-dashboard-table-text: #303030;

     /* --button-green: #28a745; */
    --color-index-button: #28a745;
    --color-dashboard-button: #28a745;
    
     /* --button-green-hover: #28a745; */
    --color-index-button-hover: #218838;
     --color-dashboard-button-hover: #218838;
    
    --color-dashboard-modal-container-background: #f5f5f5;

    /* --blue: #007bff; */
    --color-dashboard-header-background: #007bff;
    --color-dashboard-footer-background: #007bff;
    --color-dashboard-table-header-background: #007bff;
    --color-dashboard-table-link: #007bff;

    /* --dark-blue: #0b5caf; */
    --color-index-header-background: #0b5caf;

    /* black: #000000; */
    --color-options-button-text: #000000;

    /* transparent: #00000000; */
    --color-transparent: #00000000;

    --color-modal-background: #00000070;

}

html {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--color-dashboard-body-background);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

footer {
    flex-shrink: 0;
    background: var(--color-dashboard-footer-background);
    color: var(--color-footer-text);
    padding: 10px;
    text-align: center;
}