:root {
    --main-light: var(--accent1);
    --main-dark: #006443;
    --main-dark-light: #36a07d;
    --main-header-background: #a8a8a8;
    --main-background: #f8f8f8;

    --sub-1: #00B901;
    --sub-1-hover: #b95900;
    
    --header-text: #FFFFFF;
    --header-text-active: var(--accent1);

    --main-focus: #bdd23344;
    --deactivated-bg: #ffdad2;

	--main-header-height: 6vw;
	--main-header-height-min: 70px;
  
	--header-height-min: 30px;
	--header-height-max: 70px;
	--header-height: 4vw;
}


/**
 * Loading overlay styling
 **/
 #overlay {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 2; 
    pointer-events: none;
  }
  
.loading {
    top: 50%;
    left: 50%;
    width: 50px;
    position: absolute;
    height: 50px;
    border: 3px solid var(--main-light);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}