:root {
    --margin-small:1rem;
    --margin-medium:1.5rem;
    --margin-large:2rem;

    --app-color-background:var(--color-background-light-neutral-ground);

    --app-color-stroke-default:var(--color-stroke-default);

    --app-color-content-alert-error-normal:var(--color-content-alert-error-normal);

    --app-tiles-background-color:rgba(0,0,0,0.25);
    /*--app-tiles-background-color:rgba(255,255,255,0.4);*/


    --app-main-footer-color:var(--color-content-neutral-secondary);

    /* HOME PAGE */
    --hp-app-background:url(../images/backgrounds/hp-bg-01.png) lightgray 0px 0px / 100% 100% no-repeat;
    --hp-persona-card-bgcolor:var(--color-background-light-neutral-underground-1);
    --hp-persona-card-bordercolor:var(--color-content-primary-accent-light);
    --hp-footer-bordercolor:var(--app-color-stroke-default);

    /* POPUP MENU */
    --popupmenu-bgcolor:var(--color-background-light-neutral-underground-1);
    --popupmenu-bordercolor:var(--color-stroke-default);

    /* DETAILS PANE */
    --detailspane-bgcolor:var(--color-background-light-neutral-underground-1);
    --detailspane-bordercolor:var(--color-stroke-default);

    --detailspane-card-container-bgcolor:var(--color-background-light-neutral-underground-2);
    --detailspane-card-container-bordercolor:var(--color-content-primary-accent-light);

    /* TAGS */
    --tag-positive-color:var(--color-alert-positive-normal);
    --tag-positive-bgcolor:var(--color-alert-positive-light);
    --tag-positive-bordercolor:var(--color-alert-positive-dark);
    --tag-informative-color:var(--color-alert-informative-normal);
    --tag-informative-bgcolor:var(--color-alert-informative-light);
    --tag-informative-bordercolor:var(--color-alert-informative-dark);
    --tag-warning-color:var(--color-alert-warning-normal);
    --tag-warning-bgcolor:var(--color-alert-warning-light);
    --tag-warning-bordercolor:var(--color-alert-warning-dark);
    --tag-error-color:var(--color-alert-error-normal);
    --tag-error-bgcolor:var(--color-alert-error-light);
    --tag-error-bordercolor:var(--color-alert-error-dark);
}

html.colortheme-light {
    --app-color:var(--color-content-neutral-primary);
    --app-bgcolor:var(--color-background-light-neutral-ground);
    --app-tiles-bgcolor:rgba(255,255,255,0.4);

    --dashboard-container-bgcolor:var(--color-background-light-neutral-underground-1);
    --dashboard-container-bordercolor:var(--color-content-primary-accent-light);

    --card-container-bgcolor:var(--color-background-light-neutral-underground-2);
    --card-container-bordercolor:var(--color-stroke-default);

    /* BASICS */
    --separator-bordercolor:rgba(15, 25, 72, 0.35);

    /* DEFAULT MODE */
    --default-app-background:var(--color-background-light-neutral-ground);
    --default-nav-boxshadow:0px -1px 0px 0px var(--color-background-light-neutral-underground-3) inset;
    --default-separator-bordercolor:var(--color-background-light-neutral-underground-3);

    /* GAME MODE */
    --game-app-background:url(../images/backgrounds/bg-light-01.png) lightgray 0px 0px / 100% 100% no-repeat;
    --game-app-main-background:url(../images/backgrounds/map-points-02.png) 50% / cover no-repeat;
    --game-nav-boxshadow:0px -1px 0px 0px rgba(15, 25, 72, 0.35) inset;

    /* NAVIGATION */
    --nav-select-color:var(--button-primary-bgcolor);
    --nav-select-bordercolor:var(--button-primary-bgcolor);

    /* POPUP MENU */
    --popup-username-color:var(--color-content-neutral-primary);
    --popup-button-color:var(--color-content-neutral-primary);

    /* FORM BUTTONS */
    --button-primary-color:var(--color-content-neutral-primary-reversed);
    --button-primary-bgcolor:var(--color-content-primary-accent-normal);

    --button-secondary-color:var(--color-content-primary-accent-normal);
    --button-secondary-bordercolor:var(--color-content-primary-accent-normal);

    --button-primary-warning-color:var(--color-content-neutral-primary-reversed);
    --button-primary-warning-bgcolor:var(--color-alert-error-normal);
    --button-secondary-warning-color:var(--color-alert-error-normal);
    --button-primary-warning-bordercolor:var(--color-alert-error-normal);

    --button-hover-color:var(--color-content-primary-accent-normal);
    --button-hover-bgcolor:var(--color-content-primary-accent-light);

    --button-focus-shadowcolor:var(--color-content-primary-accent-light);

    --button-disabled-color:var(--color-content-neutral-secondary);
    --button-disabled-bgcolor:var(--color-background-light-neutral-transparent);
    --button-disabled-bordercolor:var(--color-stroke-default);

    --button-navigation-back-bordercolor:var(--color-content-neutral-primary);

    --button-switch-slider-bgcolor:var(--color-content-primary-accent-normal);
    --button-switch-circle-bgcolor:var(--color-content-neutral-primary-reversed);
    --button-switch-label-active:var(--color-content-primary-accent-normal);
    --button-switch-label-inactive:var(--color-content-neutral-secondary);

    /* FORM CHECKBOXES AND RADIOBUTTONS */
    --form-input-checkbox-bgcolor:var(--color-content-primary-accent-normal);
    --form-input-checkbox-color:var(--color-content-neutral-primary-reversed);

    /* FORM INPUTS AND SELECT */
    --form-input-color:var(--color-content-neutral-primary);
    --form-input-bgcolor:var(--color-content-neutral-primary-reversed);
    --form-input-bordercolor:var(--color-stroke-default);

    /* FORM FILE */
    --form-file-bgcolor:var(--color-background-light-neutral-ground);
    --form-file-bordercolor:var(--color-content-primary-accent-light);

    /* PROGRESS BAR */
    --progressbar-bgcolor:var(--color-background-light-neutral-underground-1);
    --progressbar-bordercolor:var(--color-content-primary-accent-normal);
    --progressbar-progress-bgcolor:var(--color-content-primary-accent-normal);

    /* DRAWER */
    --drawer-color:var(--color-content-neutral-primary);
    --drawer-bgcolor:var(--color-background-light-neutral-underground-2);
    --drawer-bordercolor:var(--color-content-primary-accent-light);

    /* OVERLAY */
    --overlay-bgcolor:var(--color-overlay-default);
    --overlay-content-color:var(--color-content-neutral-primary);
    --overlay-content-bgcolor:var(--color-background-light-neutral-underground-1);
    --overlay-content-bordercolor:var(--color-content-primary-accent-light);

    /* DETAILS TABLE */
    --dp-head-color:var(--color-content-neutral-primary);
    --dp-head-bgcolor:var(--color-background-light-neutral-underground-3);
    --dp-body-bordercolor:var(--color-background-light-neutral-underground-3);

    /* GAME ANSWER ITEMS */
    --game-answer-item-color:var(--color-content-neutral-primary);
    --game-answer-item-bgcolor:var(--color-background-light-neutral-ground);
    --game-answer-item-hover-color:var(--color-content-neutral-primary);
    --game-answer-item-hover-bgcolor:var(--color-content-primary-accent-light);
    --game-answer-item-selected-color:var(--color-content-neutral-primary-reversed);
    --game-answer-item-selected-bgcolor:var(--color-content-primary-accent-normal);

    --game-answer-sub-question-block-bordercolor:var(--color-content-primary-accent-light);

    /* GAME TABLE SAMPLE */
    --game-table-sample-bgcolor:var(--color-background-light-neutral-underground-1);
    --game-table-sample-you-bgcolor:var(--color-content-primary-light);

    /* GAME PLAYER HIGHLIGHT */
    --game-player-highlight-color:var(--color-content-neutral-primary-reversed);
    --game-player-highlight-bgcolor:var(--color-content-primary-accent-normal);

    /* QUESTION TABLE */
    --table-question-bgcolor:var(--color-background-light-neutral-underground-2);
    --table-question-drawer-bgcolor:var(--color-background-light-neutral-underground-1);

    /* ICONES */
    --icon-chevron:url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="24" width="25"><path d="M10.0389 6L8.62891 7.41L13.2089 12L8.62891 16.59L10.0389 18L16.0389 12L10.0389 6Z" fill="%230F1948" /></svg>');
    /*--icon-download:url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="24" width="24"><path d="M18 15V18H6V15H4V18C4 19.1 4.9 20 6 20H18C19.1 20 20 19.1 20 18V15H18ZM17 11L15.59 9.59L13 12.17V4H11V12.17L8.41 9.59L7 11L12 16L17 11Z" fill="%23FFFFFF" /></svg>');*/
    --icon-plus-sign:url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="40" width="40"><path d="M22.1668 11.6663H18.8335V18.333H12.1668V21.6663H18.8335V28.333H22.1668V21.6663H28.8335V18.333H22.1668V11.6663ZM20.5002 3.33301C11.3002 3.33301 3.8335 10.7997 3.8335 19.9997C3.8335 29.1997 11.3002 36.6663 20.5002 36.6663C29.7002 36.6663 37.1668 29.1997 37.1668 19.9997C37.1668 10.7997 29.7002 3.33301 20.5002 3.33301ZM20.5002 33.333C13.1502 33.333 7.16683 27.3497 7.16683 19.9997C7.16683 12.6497 13.1502 6.66634 20.5002 6.66634C27.8502 6.66634 33.8335 12.6497 33.8335 19.9997C33.8335 27.3497 27.8502 33.333 20.5002 33.333Z" fill="white" /></svg>');
}

html.colortheme-dark {
    --app-color:var(--color-content-neutral-primary-reversed);
    --app-bgcolor:var(--color-background-dark-blue-underground-1);
    --app-tiles-bgcolor:var(--color-background-dark-blue-ground);

    --dashboard-container-bgcolor:var(--color-background-dark-blue-underground-1);
    --dashboard-container-bordercolor:var(--color-content-primary-accent-dark);

    --card-container-bgcolor:var(--color-background-dark-blue-underground-2);
    --card-container-bordercolor:var(--color-stroke-default);

    /* BASICS */
    --separator-bordercolor:rgba(15, 25, 72, 0.35);

    /* DEFAULT MODE */
    --default-app-background:var(--color-background-dark-blue-ground);
    --default-nav-boxshadow:0px -1px 0px 0px var(--color-content-primary-accent-dark) inset;
    --default-separator-bordercolor:var(--color-content-primary-accent-dark);

    /* GAME MODE */
    --game-app-background:url(../images/backgrounds/bg-dark-01.png) lightgray 0px 0px / 100% 100% no-repeat;
    --game-app-main-background:url(../images/backgrounds/map-points-02.png) 50% / cover no-repeat;
    --game-nav-boxshadow:0px -1px 0px 0px rgba(15, 25, 72, 0.35) inset;

    /* NAVIGATION */
    --nav-select-color:var(--button-primary-bgcolor);
    --nav-select-bordercolor:var(--button-primary-bgcolor);

    /* POPUP MENU */
    --popup-username-color:var(--color-content-neutral-primary-reversed);
    --popup-button-color:var(--color-content-neutral-primary-reversed);
    --popupmenu-bgcolor:var(--color-background-dark-blue-underground-1);
    --popupmenu-bordercolor:var(--color-stroke-default);
    
    
    /* DETAILS PANE */
    --detailspane-bgcolor:var(--color-background-dark-blue-underground-1); 
    --detailspane-bordercolor:var(--color-content-primary-accent-dark);

    --detailspane-card-container-bgcolor:var(--color-background-dark-blue-underground-1);
    --detailspane-card-container-bordercolor:var(--color-content-primary-accent-dark);
    

    /* FORM BUTTONS */
    --button-primary-color:var(--color-content-neutral-primary-reversed);
    --button-primary-bgcolor:var(--color-content-primary-accent-normal);

    --button-secondary-color:var(--color-content-primary-accent-light);
    --button-secondary-bordercolor:var(--color-content-primary-accent-light);

    --button-primary-warning-color:var(--color-content-neutral-primary-reversed);
    --button-primary-warning-bgcolor:var(--color-alert-error-normal);

    --button-hover-color:var(--color-content-primary-accent-normal);
    --button-hover-bgcolor:var(--color-content-primary-accent-light);

    --button-focus-shadowcolor:var(--color-content-primary-accent-light);

    --button-disabled-color:var(--color-content-neutral-secondary);
    --button-disabled-bgcolor:var(--color-background-light-neutral-transparent);
    --button-disabled-bordercolor:var(--color-stroke-default);

    --button-navigation-back-bordercolor:var(--color-content-neutral-primary);

    --button-switch-slider-bgcolor:var(--color-content-neutral-primary-reversed);
    --button-switch-circle-bgcolor:var(--color-content-primary-accent-dark);
    --button-switch-label-active:var(--color-content-neutral-primary-reversed);
    --button-switch-label-inactive:var(--color-content-neutral-secondary);

    /* FORM CHECKBOXES AND RADIOBUTTONS */
    --form-input-checkbox-bgcolor:var(--color-content-primary-accent-normal);
    --form-input-checkbox-color:var(--color-content-neutral-primary-reversed);

    /* FORM INPUTS AND SELECT */
    --form-input-color:var(--color-content-neutral-primary);
    --form-input-bgcolor:var(--color-content-neutral-primary-reversed);
    --form-input-bordercolor:var(--color-stroke-default);

    /* FORM FILE */
    --form-file-bgcolor:var(--color-background-light-neutral-ground);
    --form-file-bordercolor:var(--color-content-primary-accent-light);

    /* PROGRESS BAR */
    --progressbar-bgcolor:var(--color-background-light-neutral-underground-1);
    --progressbar-bordercolor:var(--color-content-primary-accent-normal);
    --progressbar-progress-bgcolor:var(--color-content-primary-accent-normal);

    /* DRAWER */
    --drawer-color:var(--color-content-neutral-primary-reversed);
    --drawer-bgcolor:var(--color-background-dark-blue-underground-1);
    --drawer-bordercolor:var(--color-content-primary-accent-light);

    /* OVERLAY */
    --overlay-bgcolor:var(--color-overlay-default);
    --overlay-content-color:var(--color-content-neutral-primary);
    --overlay-content-bgcolor:var(--color-background-light-neutral-underground-1);
    --overlay-content-bordercolor:var(--color-content-primary-accent-light);

    /* DETAILS TABLE */
    --dp-head-color:var(--color-content-neutral-primary);
    --dp-head-bgcolor:var(--color-background-light-neutral-underground-3);
    --dp-body-bordercolor:var(--color-background-light-neutral-underground-3);

    /* GAME ANSWER ITEMS */
    --game-answer-item-color:var(--color-content-neutral-primary-reversed);
    --game-answer-item-bgcolor:var(--color-background-dark-blue-underground-1);
    --game-answer-item-hover-color:var(--color-content-neutral-primary);
    --game-answer-item-hover-bgcolor:var(--color-content-primary-accent-light);
    --game-answer-item-selected-color:var(--color-content-neutral-primary-reversed);
    --game-answer-item-selected-bgcolor:var(--color-content-primary-accent-normal);

    --game-answer-sub-question-block-bordercolor:var(--color-content-primary-accent-dark);

    /* GAME TABLE SAMPLE */
    --game-table-sample-bgcolor:var(--color-background-dark-blue-underground-1);
    --game-table-sample-you-bgcolor:var(--color-content-primary-accent-dark);

    /* GAME PLAYER HIGHLIGHT */
    --game-player-highlight-color:var(--color-content-neutral-primary-reversed);
    --game-player-highlight-bgcolor:var(--color-content-primary-accent-normal);

    /* QUESTION TABLE */
    --table-question-bgcolor:var(--color-background-dark-blue-underground-1);
    --table-question-drawer-bgcolor:var(--color-background-dark-blue-underground-2);
}