:root {
    --color1: #F5F5F5; /* Define a primary color 1D3557 */
    --color2: #2C2D2E; /* Define a secondary color 457B9D */
    --color3: #b22222; /* Define a secondary color E63946 */
    --color4: #030303; /* Define a secondary color F1FAEE */
    --color5: #D9DDDD; /* Define a secondary color F1FAEE */
}

button, .w3-button, a {
    cursor: pointer;
}

body {
    background-color: var(--color5);
}

.w3-sidebar {
    width: 100%;
}

.nav-theme {color: var(--color1); background-color: var(--color2); text-decoration: none;}
.nav-theme-action {color: var(--color1) !important; background-color: var(--color2) !important; font-weight:bold; text-decoration: none;}
.nav-theme-action:hover {color: var(--color1) !important; background-color: var(--color3) !important; font-weight:bold; text-decoration: none;}

.nav-theme-dropdown {color: var(--color2); background-color: var(--color1); text-decoration: none;}
.nav-theme-dropdown-action {color: var(--color2); background-color: var(--color1); font-weight:bold; text-decoration: none;}
.nav-theme-dropdown-action:hover {color: var(--color4); background-color: var(--color3); font-weight:bold; text-decoration: none;} 

.content-theme {color: var(--color1); background-color: var(--color5);}
.content-theme-action  {color: var(--color4); background-color: var(--color3); font-weight:bold; text-decoration: none;}
.content-theme-action:hover {color: var(--color1); background-color: var(--color2); font-weight:bold; text-decoration: none;}

.content-card-theme {color: var(--color2); background-color: var(--color1);}
.content-card-theme-action {color: var(--color1); background-color: var(--color3); font-weight:bold; text-decoration: none;}
.content-card-theme-action:hover {color:var(--color1); background-color: var(--color2); font-weight:bold; text-decoration: none;}

.content-card-text-theme-action {color: var(--color2); font-weight:bold; text-decoration: none;}
.content-card-text-theme-action:hover {color:var(--color3); font-weight:bold; text-decoration: none;}

.footer-theme {color: var(--color1); background-color: var(--color2);}
.footer-theme-action {color: var(--color1); background-color: var(--color3); font-weight:bold; text-decoration: none;}
.footer-theme-action:hover {color: var(--color3); background-color: var(--color1); font-weight:bold; text-decoration: none;}

.logo-theme {color: var(--color1);}
.logo-theme-action {color: var(--color1); background-color: var(--color3); font-weight:bold; text-decoration: none;}
.logo-theme-action:hover {color: var(--color3); background-color: var(--color1); font-weight:bold; text-decoration: none;}

.logo-link-theme-action {color: var(--color1); font-weight:bold; text-decoration: none;}
.logo-link-theme-action:hover {color: var(--color3); font-weight:bold; text-decoration: none;}

.divider {
    color: var(--color2) !important;
    height: 5px;
    border-top: 2px solid var(--color2) !important;
    border: none;  /* Remove the default border */
    width: 80%;
    margin: 10px auto;
}

.warning {
    color: crimson;
    font-weight: bold;
}

.full-screen {
    overflow: hidden;
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
}
.full-screen .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.firebrick {
    color: #b22222 !important;   
    }

.custom-border-left {border-left:2px solid var(--color3) }
.custom-border {border:2px solid var(--color3)}

/* Styles to be tested */