:root{
    
	--white: #fff;
	--black: #000;
	--darkgray: #333;

	--primary-color: rgb(3, 32, 70);
	--primary-light-color: rgb(28, 67, 119);
	--primary-superlight-color: rgb(234, 243, 255);
	
	--lighter-gray: #f4f4f4;
	--light-gray: #f1f1f1;
	--light-text: #fff;
	--dark-text: #000;
	--input-background-color: #fff;
	--input-text-color: #000;

	--primary-link-color: var(--primary-light-color);

	--primary-font: "Afacad Flux", sans-serif;

    --scrollbar-track: rgba(0,0,0,.03);
    --scrollbar-thumb: rgba(0,0,0,.15);
    --scrollbar-thumb-hover: rgba(0,0,0,.3);

	/* Header */
	--header-background-color: rgb(3, 32, 70);
    --header-text-color: #fff;
	
	/* Primary Nav */

	--primary-nav-background-color: #fff;
	--primary-nav-text-color: #000;
	--primary-nav-image-filter: invert(0);
	
	--primary-nav-hover-background-color: #f1f1f1;
	--primary-nav-hover-text-color: rgb(28, 67, 119);
	--primary-nav-hover-image-filter: invert(0);
	
	--primary-nav-on-background-color: rgb(28, 67, 119);
	--primary-nav-on-text-color: #fff;
	--primary-nav-on-image-filter: invert(100%);
	
	--primary-nav-on-hover-background-color: rgb(3, 32, 70);
	--primary-nav-on-hover-text-color: #fff;

    /* Buttons */
    --button-standard-background-color: rgba(0,0,0,0);
    --button-standard-border-color: rgb(3, 32, 70);
    --button-standard-text-color: rgb(3, 32, 70);

    --button-standard-background-color-hover: rgb(3, 32, 70);
    --button-standard-border-color-hover: rgb(3, 32, 70);
    --button-standard-text-color-hover: rgb(255, 255, 255);

	--button-on-standard-background-color:rgb(3, 32, 70);
	--button-on-standard-border-color: rgb(3, 32, 70);
	--button-on-standard-text-color: #fff;
	--button-on-standard-text-color-hover: #fff;

	--button-red-border-color: #a10000;
	--button-red-border-color-hover: #a10000;
	--button-red-text-hover: #fff;

	/* Nav Buttons */
	--navbutton-standard-background-color: #fff;
	--navbutton-standard-text-color: rgb(3, 32, 70);
	--navbutton-standard-background-color-hover: #f1f1f1;
	--navbutton-standard-text-color-hover: rgb(0, 0, 0);
	--navbutton-standard-background-color-on: rgb(28, 67, 119);
	--navbutton-standard-text-color-on: rgb(255, 255, 255);
    --navbutton-standard-background-color-on-hover: rgb(3, 32, 70);
    --navbutton-standard-text-color-on-hover:rgb(255, 255, 255);

	/* Tidrapport-listor */
	--tablelist-head-line: #f1f1f1;
	--tablelist-body-line: #f4f4f4;
	--tablelist-checkedin-background-color: #dbebd1;

	/* Loading Progress */
	--loading-background-color: rgba(255,255,255,0.8);

	/* Standard */
	--standard-icon-theme: invert(0);

	/* Texts */
	--article-text-color: rgb(13, 68, 139);

	/* Dropdown-search-lists */
	--dropdownsearch-background-color: #fff;
	--dropdownsearch-item-text-color: #000;
	--dropdownsearch-item-background-color-hover: rgb(3, 32, 70);
	--dropdownsearch-item-text-color-hover: #fff;
	--dropdownsearch-item-background-color-inactive: #f1f1f1;
	--dropdownsearch-item-text-color-inactive: gray;
	--dropdownsearch-item-border-color: #d6d6d6;

    /* inputs */
    --input-textbox-border-color: #b1b1b1;
	
}

.dark-mode{

	--white: #000;
	--black: #fff;
	--darkgray: #d6d6d6;

	--primary-color: rgb(0, 102, 236);
	--primary-light-color: rgb(0, 55, 128);
	--primary-superlight-color: rgb(0, 25, 58);
	
	--lighter-gray: #1f1f1f;
	--light-gray: #3b3b3b;
	--light-text: #000000;
	--dark-text: #ffffff;
	--input-background-color: #000000;
	--input-text-color: #ffffff;

	--primary-link-color: rgb(48, 115, 202);

    --scrollbar-track: rgb(0, 95, 219,.1);
    --scrollbar-thumb: rgb(0, 95, 219,.4);
    --scrollbar-thumb-hover: rgb(0, 95, 219,.55);

	/* Header */
	--header-background-color: rgb(0, 41, 94);
    --header-text-color: #fff;

	/* Primary Nav */

	--primary-nav-background-color: #000;
	--primary-nav-text-color: #fff;
	--primary-nav-image-filter: invert(100%);
	
	--primary-nav-hover-background-color: rgb(4, 23, 48);
	--primary-nav-hover-text-color: #fff;
	--primary-nav-hover-image-filter: invert(100%);
	
	--primary-nav-on-background-color: rgb(13, 68, 139);
	--primary-nav-on-text-color: #fff;
	
	--primary-nav-on-hover-background-color: rgb(3, 32, 70);
	--primary-nav-on-hover-text-color: #fff;

    /* Buttons */
    --button-standard-background-color: rgba(0,0,0,0);
    --button-standard-border-color: rgb(0, 102, 236);
    --button-standard-text-color: rgb(0, 102, 236);

    --button-standard-background-color-hover: rgb(0, 102, 236);
    --button-standard-border-color-hover: rgb(0, 102, 236);
    --button-standard-text-color-hover: rgb(0, 0, 0);

	--button-on-standard-background-color:rgb(0, 102, 236);
	--button-on-standard-border-color: rgb(0, 102, 236);
	--button-on-standard-text-color: #fff;
	--button-on-standard-text-color-hover: #fff;
	
	--button-red-border-color: #a10000;
	--button-red-border-color-hover: #a10000;
	--button-red-text-hover: #fff;

	/* Nav Buttons */
	--navbutton-standard-background-color: #000000;
	--navbutton-standard-text-color: rgb(255, 255, 255);
	--navbutton-standard-background-color-hover: rgb(4, 23, 48);
	--navbutton-standard-text-color-hover: rgb(255, 255, 255);
	--navbutton-standard-background-color-on: rgb(13, 68, 139);
	--navbutton-standard-text-color-on: rgb(255, 255, 255);
    --navbutton-standard-background-color-on-hover: rgb(4, 23, 48);
    --navbutton-standard-text-color-on-hover:rgb(255, 255, 255);
    
	/* Tidrapport-listor */
	--tablelist-head-line: #3c3c3c;
	--tablelist-body-line: #272727;
	--tablelist-checkedin-background-color: #132e00;
	
	/* Loading Progress */
	--loading-background-color: rgba(0,0,0,0.8);

	/* Standard */
	--standard-icon-theme: invert(1);

	/* Texts */
	--article-text-color: rgb(0, 102, 236);

	/* Dropdown-search-lists */
	--dropdownsearch-background-color: #000;
	--dropdownsearch-item-text-color: #fff;
	--dropdownsearch-item-background-color-hover: rgb(3, 32, 70);
	--dropdownsearch-item-text-color-hover: #fff;
	--dropdownsearch-item-background-color-inactive: #3b3b3b;
	--dropdownsearch-item-text-color-inactive: gray;
	--dropdownsearch-item-border-color: #4e4e4e;

    /* inputs */
    --input-textbox-border-color: #505050;
	
}

.dark-mode .icon {
    filter: invert(1);
}
.dark-mode .icon:hover {
    filter: invert(0);
}