@supports((--css: 0)) {
    :root {
        /* change these to set the theme */
        /* start */
        --action-color: #00abdf;
        --nav-color: var(--bg-dark,#5e6e6d);
        --sections-and-buttons-color: var(--green,--dark-blue,#00abdf);
        --headline-color: #333;
        --boring-color: var(--gray);
        /* end */
        --bg-dark: rgba(72,94,92,1);
        --item-open-bg: var(--gray-light);
        --border-color: #aaa;
        --border-color-weak: #ccc;
        --img-overlay-text: #fff;
        --img-overlay-bg: rgba(0,0,0,0.5);
        --selected-img-overlay-bg: var(--img-overlay-bg);
        --delete: red;
        /* color scheme */
        --lime: hsl(182,34%,60%);
        --greenish-gray: #AFBA9D;
        --dark-blue: #3E5F6D;
        --orange: #e77a30;
        --green: #aed4a8;
        --white: #fff;
        --gray: #ccc;
        --gray-dark: #aaa;
        --gray-light: #eee;
        --dark-gradient: linear-gradient(to bottom, rgba(72,94,92,1) 0%,rgba(27,51,54,1) 100%);
        --pagewidth: 1080px;
        /* font */
        --font-family: lexia,arial,Helvetica,serif;
        --font-size: 13px;
        --font-color: #333;
        --font-color-weak: #ccc;
        --font-color-strong: #000;
        --border-radius: 0px;
        --link-color: var(--sections-and-buttons-color);
        --heading-font-family: rubbersmyril,lexia,arial;
        --heading-size: 2em;
        --subheadline-color: var(--headline-color);
        --heading-bg: var(--breaker-block-bg,--headline-color);
        --heading-text: var(--headline-color);
        --heading-weight: normal;
        /*--subheading-text:var(--orange);*/
        --item-heading-color: var(--headline-color);
        --item-subheading-color: var(--item-heading-color);
        --font-color-main: var(--font-color);
        --link-color-main: var(--link-color);
        --highlight-text: var(--action-color);
        --highlight-bg: var(--action-color);
        --pricetag-text: var(--action-color);
        --hover-bg: var(--action-color);
        --hover-text: var(--white);
        --validation-valid: var(--border-color-weak);
        --validation-empty: var(--border-color-weak);
        --validation-dirty: var(--delete);
        --disabled-bg: var(--boring-color);
        --valid-bg: var(--action-color);
        --locked-text: var(--highlight-color);
        --selected-bg: none;
        --selected-text: var(--action-color);
        --forward-bg: var(--action-color);
        --forward-text: var(--white);
        --back-bg: var(--boring-color);
        --btn-close-bg: var(--boring-color);
        --btn-bg: var(--nav-color);
        --btn-select-bg: var(--action-color);
        --btn-select-text: var(--white);
        --btn-close-text: var(--font-color);
        --btn-primary-hover: var(--action-color);
        --footer-bg: var(--sections-and-buttons-color);
        /* background - image */
        --background-image-url: url('/Content/images/bakgrundsmynd-sloerad.jpg');
        --background-image-repeat: no-repeat;
        --background-image-size: cover;
        --background-image-position: 0 0;
        --panel-heading-bg: var(--nav-color);
        --panel-heading-text: var(--white);
        --breaker-block-bg: var(--panel-heading-bg);
        --breaker-block-text: var(--white);
        --overlay-transparent-dark: rgba(0,0,0,.25);
        --overlay-transparent-shade: rgba(0,0,0,0.1);
        --overlay-transparent-light: rgba(255,255,255,.25);
        --list-group-item-bg: var(--boring-color);
        --navbar-listitem-heading-edit-text: var(--action-color);
        --navbar-listitem-h2-text: var(--action-color);
        --navbar-listitem-active-bg: var(--nav-color);
        --navbar-listitem-disabled-bg: none;
        --navbar-listitem-disabled-text: var(--font-color-weak);
        --tab-bg: var(--sections-and-buttons-color);
        --tab-active-bg: var(--white);
        --tab-active-text: var(--font-color);
        --tab-disabled-bg: none;
        --tab-disabled-text: var(--white,#fff);
        --input-group-addon-bg: none;
        --input-group-addon-text: var(--font-color);
        /* calendar */
        --calendar-date-selected-bg: var(--action-color);
        --calendar-date-selected-text: #fff;
        --calendar-date-selected-icon: none;
        --calendar-date-default-bg: var(--headline-color);
        --calendar-date-available-bg: var(--headline-color);
        --calendar-date-available-text: var(--white);
        --list-group-item-bg: #fff;
        --footer-text: var(--font-color-weak);
        --panel-body-bg: #fff;
        --icon-img: var(--white);
        --icon-text: var(--font-color,);
        --link-text: var(--link-color);
        --link-hover-text: var(--action-color);
        --say-yes-bg: var(--action-color);
        --say-yes-text: #fff;
        --say-no-bg: var(--boring-color);
        --say-no-text: #fff;
        --input-placeholder-text: var(--headline-color);
    }

    html[office*="INF"], html[office*="INI"],html[class*="fo-FO"],html[class*="is-IS"]{
        /* set fo theme */
        --action-color: var(--orange);
        --nav-color: var(--lime);
        --sections-and-buttons-color: var(--dark-blue);
        --headline-color: var(--greenish-gray);
        --boring-color: var(--gray);
        --font-family: titi,lexia,arial;
        --heading-font-family: titi,lexia,arial;
        --font-size: 15px;
        --background-image-url: url(/Content/images/Danland_0.jpg);
    }
}