:root {
    /* Laclasse palette */
    --lc-color-neutral-000: #FFFFFF;
    --lc-color-neutral-100: #F9FAFC;
    --lc-color-neutral-200: #f0f2f4;
    --lc-color-neutral-300: #e8e9ed;
    --lc-color-neutral-400: #d4d8de;
    --lc-color-neutral-500: #b6c2d3;
    --lc-color-neutral-600: #93a8c2;
    --lc-color-neutral-700: #6c819d;
    --lc-color-neutral-800: #425d85;
    --lc-color-neutral-850: #304055;
    --lc-color-neutral-900: #202d41;
    --lc-color-neutral-950: #050F1E;

    --lc-color-sand-100: #FAF7F2;
    --lc-color-sand-200: #F5EEE9;
    --lc-color-sand-300: #EEDFD7;

    --lc-color-blue-200: #daf5fb;
    --lc-color-blue-300: #b8f1ff;
    --lc-color-blue-400: #98e5f6;
    --lc-color-blue-500: #57d2ff;
    --lc-color-blue-600: #42b3f5;
    --lc-color-blue-700: #1982cc;
    --lc-color-blue-800: #0461A5;
    --lc-color-blue-850: #03416d;
    --lc-color-blue-900: #02355a;

    --lc-color-green-200: #d8f8e4;
    --lc-color-green-300: #C4F1D6;
    --lc-color-green-400: #b5e3c7;
    --lc-color-green-500: #3adf7c;
    --lc-color-green-600: #4bbe79;
    --lc-color-green-700: #438968;
    --lc-color-green-800: #146641;
    --lc-color-green-850: #0e482e;
    --lc-color-green-900: #0b3723;

    --lc-color-yellow-200: #FFF0DB;
    --lc-color-yellow-300: #ffe4bd;
    --lc-color-yellow-400: #fdd3a1;
    --lc-color-yellow-500: #ffc14d;
    --lc-color-yellow-600: #ea9a39;
    --lc-color-yellow-700: #b46e18;
    --lc-color-yellow-800: #78521c;
    --lc-color-yellow-850: #573b14;
    --lc-color-yellow-900: #3e2a0f;

    --lc-color-red-200: #ffebef;
    --lc-color-red-300: #FFE0E0;
    --lc-color-red-400: #ffc7c7;
    --lc-color-red-500: #ffaba8;
    --lc-color-red-600: #ff7a75;
    --lc-color-red-700: #d74742;
    --lc-color-red-800: #b41e18;
    --lc-color-red-850: #7e1511;
    --lc-color-red-900: #63100d;

    --lc-color-purple-200: #f1ebff;
    --lc-color-purple-300: #EBE4FF;
    --lc-color-purple-400: #dfd4ff;
    --lc-color-purple-500: #cebdff;
    --lc-color-purple-600: #B49DF5;
    --lc-color-purple-700: #8567e0;
    --lc-color-purple-800: #6637c3;
    --lc-color-purple-850: #4d2a93;
    --lc-color-purple-900: #3a1f6f;

    --lc-flatbar-background: rgba(0,0,0,0.03);

    --lc-appel-unjustified-absence: var(--lc-color-red-800);
    --lc-appel-justified-absence: var(--lc-color-yellow-800);
    --lc-appel-retard: var(--lc-color-blue-800);

    --lc-card-shadow: none;
    --lc-card-background: var(--lc-color-neutral-000);
    --lc-card-radius: 6px;
    --lc-card-header-background: rgba(0,0,0,0.05);
    --lc-card-transition: border-color 0.25s, box-shadow 0.25s;
    --lc-card-border: solid 1px rgba(0,0,0,0.1);
    --lc-card-over-shadow: 0 0 4px rgba(0,0,0,0.1);

    --lc-news-important-color: var(--lc-color-purple-500);
    --lc-news-important-foreground: var(--lc-color-purple-850);

    --lc-news-target-iconsize: 36px;

    --lc-form-toolbar-background: var(--lc-color-purple-800);

    --era-dialog-title-background: rgba(0,0,0,0.03);

    --era-paned-cursor-background: none;

    --lc-main-background: var(--lc-color-neutral-000);
    --lc-main-radius: 6px;
    --lc-main-border: solid 1px rgba(0,0,0,0.1);
    --lc-main-margin: 16px;
    --lc-main-min-width: 200px;

    --lc-current-radius: 6px;

    --lc-item-size: 200px;
    --lc-item-font-size: 18px;
    --lc-item-icon-size: 70px;

    --lc-portail-spacing: 16px;

    --era-contextbar-margin: 2px;
    --era-contextbar-radius: 6px;

    --era-textbuttonfield-button-padding: 4px;

    --era-button-radius: 5px;
    --era-textfield-radius: 4px;
    --era-dialog-padding: 16px;

    --era-listview-row-min-height: 44px;
    --era-listviewheadersbar-min-height: 38px;
}

@media (max-width: 600px), (max-height: 450px) {
    :root {
        --lc-item-size: 170px;
        --lc-item-font-size: 16px;
        --lc-item-icon-size: 60px;
        --lc-portail-spacing: 8px;
        --lc-main-margin: 8px;
        --lc-portail-toolbar-padding: 0px;
    }
}

@media (max-width: 400px) {
    :root {
        --lc-main-min-width: 100vw;
    }
}

html {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: Mulish, sans-serif;
}

*[light] {
    --era-background: var(--lc-color-sand-100);
    --era-foreground: var(--lc-color-neutral-900);
    --era-primary: var(--lc-color-blue-700);
    --era-negative: var(--lc-color-red-800);
    --era-positive: var(--lc-color-green-800);

    --era-textfield-background: var(--lc-color-neutral-000);
    --era-textfield-border-color: var(--lc-color-neutral-800);
    --era-textfield-shadow: none;

    --era-dialog-background: var(--lc-color-neutral-000);

    --era-popup-background: var(--lc-color-neutral-000);

    --era-checkbox-color: var(--lc-color-neutral-900);
    --era-radiobox-color: var(--lc-color-neutral-900);

    --era-progressbar-color: var(--lc-color-blue-700);

    --era-default-button-background: var(--lc-color-neutral-850);
    --era-default-button-border: solid 1px var(--lc-color-neutral-850);
    --era-default-button-over-background: var(--lc-color-neutral-800);

    --era-button-border: solid 1px var(--lc-color-neutral-900);
    --era-button-background: var(--lc-color-neutral-100);
    --era-button-active-color: var(--lc-color-blue-300);
    --era-button-badge-background: var(--lc-color-blue-800);
    --era-button-badge-color: var(--lc-color-neutral-000);

    --era-contextbar-background: var(--lc-color-blue-200);
    --era-contextbar-border: solid 2px var(--lc-color-neutral-800);

    --era-listview-row-checkbox-color: var(--lc-color-neutral-800);
    --era-listview-row-radiobox-color: var(--lc-color-neutral-800);
    --era-listview-row-background: var(--lc-main-background);
    --era-listview-row-over-background: var(--lc-color-neutral-200);
    --era-listview-row-select-background: var(--lc-color-blue-200);
    --era-listview-row-select-over-background: var(--lc-color-blue-200);
    --era-listview-row-select-over-background: color-mix(in srgb, var(--lc-color-neutral-700) 10%, var(--lc-color-blue-200) 90%);

    --era-toast-background: var(--lc-color-neutral-900);

    --era-scrollbar-color: var(--lc-color-neutral-900);
    --era-scrollbar-color: color-mix(in srgb, var(--lc-color-neutral-900), transparent 30%);

    --lc-red: var(--lc-color-red-800);
    --lc-metropole-lyon-color: #ff0032;
    --lc-link-color: var(--lc-color-blue-800);

    --lc-current-background: var(--lc-color-blue-300);

    --lc-pager-background: rgba(0,0,0,0.03);

    --lc-avatar-background: var(--lc-color-neutral-850);

    --lc-item-color: var(--lc-color-neutral-900);
    --lc-item-background: var(--lc-color-sand-200);

    --lc-app-menu-title-background: var(--lc-color-sand-200);

    --lc-webmail-toitem-invalid-background: var(--lc-color-red-400);

    --lc-classworklog-task-description-color: var(--lc-color-neutral-100);

    --lc-chip-green-background: var(--lc-color-green-200);
    --lc-chip-green-color: var(--lc-color-green-800);
    --lc-chip-blue-background: var(--lc-color-blue-200);
    --lc-chip-blue-color: var(--lc-color-blue-800);
    --lc-chip-yellow-background: var(--lc-color-yellow-200);
    --lc-chip-yellow-color: var(--lc-color-yellow-800);
    --lc-chip-red-background: var(--lc-color-red-200);
    --lc-chip-red-color: var(--lc-color-red-800);
    --lc-chip-violet-background: var(--lc-color-purple-200);
    --lc-chip-violet-color: var(--lc-color-purple-800);
    --lc-chip-grey-background: var(--lc-color-neutral-200);
    --lc-chip-grey-color: var(--lc-color-neutral-800);
    --lc-chip-border-grey-border: var(--lc-color-neutral-400);
    --lc-chip-border-grey-color: var(--lc-color-neutral-800);

    --lc-card-border: solid 1px var(--lc-color-neutral-400);
    --lc-card-over-border: solid 1px var(--lc-color-neutral-500);
    --lc-card-over-shadow: 0 0 4px rgba(0,0,0,0.1);

    --lc-board-card-background: var(--lc-main-background);

    --lc-classworklog-card-background: var(--lc-card-background);
    --lc-classworklog-card-border: var(--lc-card-border);

    --lc-graph-color: var(--lc-color-blue-500);
    --lc-graph-border-color: var(--lc-color-blue-600);

    --lc-graph-red-color: var(--lc-color-red-500);
    --lc-graph-red-border-color: var(--lc-color-red-600);
    --lc-graph-green-color: var(--lc-color-green-500);
    --lc-graph-green-border-color: var(--lc-color-green-600);
    --lc-graph-blue-color: var(--lc-color-blue-500);
    --lc-graph-blue-border-color: var(--lc-color-blue-600);
    --lc-graph-yellow-color: var(--lc-color-yellow-500);
    --lc-graph-yellow-border-color: var(--lc-color-yellow-600);
    --lc-graph-purple-color: var(--lc-color-purple-500);
    --lc-graph-purple-border-color: var(--lc-color-purple-600);

    --lc-catalog-resource-card-border: var(--lc-color-neutral-400);
    --lc-catalog-resource-card-border-hover: var(--lc-color-neutral-500);
    --lc-catalog-resource-card-box-shadow-hover: 0px 0px 17px 0px #00000012;
    --lc-catalog-resource-card-tag-background: var(--lc-color-neutral-200);
    --lc-catalog-resource-card-install-background: var(--lc-main-background);
    --lc-catalog-warning-text: var(--lc-color-blue-800);
    --lc-catalog-warning-background: var(--lc-color-blue-200);
    --lc-catalog-warning-border: var(--lc-color-blue-600);

    --lc-errormessage-background: var(--lc-color-red-200);
	--lc-errormessage-color: var(--lc-color-red-800);
	--lc-errormessage-bordercolor: var(--lc-color-red-600);

	--lc-warningmessage-background: var(--lc-color-yellow-200);
	--lc-warningmessage-color: var(--lc-color-yellow-800);
	--lc-warningmessage-bordercolor: var(--lc-color-yellow-600);

    --lc-infomessage-background: var(--lc-color-blue-200);
	--lc-infomessage-color: var(--lc-color-blue-800);
    --lc-infomessage-bordercolor: var(--lc-color-blue-600);

    --lc-useritem-warning-background: var(--lc-color-yellow-200);
    --lc-useritem-warning-color: var(--lc-color-yellow-800);

    --lc-forms-formitemgraphic-activeborder: var(--lc-color-blue-700);
    --lc-form-correct-answer-background: var(--lc-color-green-200);
    --lc-form-comment-background: var(--lc-color-neutral-100);
    --lc-form-wrong-answer-background: var(--lc-color-red-200);
    --lc-form-multiple-choice-grid-background: var(--lc-color-neutral-000);
    --lc-form-multiple-choice-grid-row-background: #f8f9fa;
    --lc-form-points-label-background: var(--lc-chip-violet-background);
    --lc-form-points-label-color: var(--lc-chip-violet-color);
    --lc-form-to-correct-label-background: var(--lc-chip-blue-background);
    --lc-form-corrected-label-background: var(--lc-chip-green-background);
    --lc-form-to-correct-label-color: var(--lc-chip-blue-color);
    --lc-form-corrected-label-color: var(--lc-chip-green-color);
    --lc-form-info-message-background: var(--lc-infomessage-background);
    --lc-form-info-message-color: var(--lc-infomessage-color);
    --lc-form-info-message-border: var(--lc-infomessage-bordercolor);
    --lc-forms-formitemgraphic-background: var(--lc-color-neutral-000);

    --lc-apptable-background: none;
    --lc-apptable-menu: var(--lc-color-neutral-000);
    --lc-apptable-active-background: var(--lc-color-blue-200);
    --lc-apptable-platitem-background: var(--lc-color-sand-100);
    --lc-apptable-separator-color: var(--lc-color-sand-300);
    --lc-apptable-header-separator-color: var(--lc-color-neutral-950);

    --era-contextbarchip-background: var(--era-background);
    --era-contextbarchip-color: var(--era-foreground);

    --lc-docs-accessitem-background: var(--lc-color-neutral-100);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--lc-color-neutral-850);
    }
}

*[dark] {
    --era-background: var(--lc-color-neutral-850);
    --era-foreground: var(--lc-color-neutral-000);
    --era-primary: var(--lc-color-blue-600);
    --era-focus-color: var(--lc-color-blue-600);
    --era-negative: var(--lc-color-red-500);
    --era-positive: var(--lc-color-green-500);

    --era-progressbar-color: var(--lc-color-blue-600);

    --lc-red: #ff9494;
    --lc-metropole-lyon-color: #ffffff;
    --lc-link-color: var(--lc-color-blue-500);

    --lc-item-color: var(--lc-color-neutral-000);
    --lc-item-background: var(--lc-color-neutral-900);

    --lc-current-background: var(--lc-color-blue-800);

    --lc-avatar-background: var(--lc-color-neutral-950);

    --lc-board-card-background: var(--lc-main-background);
    --lc-pager-background: var(--lc-color-neutral-850);
    --lc-forms-formitemgraphic-background: var(--lc-card-background);
    --lc-card-background: var(--lc-color-neutral-900);

    --lc-classworklog-card-background: var(--lc-card-background);
    --lc-classworklog-card-border: var(--lc-card-border);
    --lc-classworklog-task-description-color: var(--lc-color-neutral-850);
    --lc-classworklog-add-button-background: #ffffff;
    --lc-classworklog-add-button-foreground: #444444;
    --lc-classworklog-pin-button-active: rgba(33, 33, 33, 0.66);

    --era-dialog-background: var(--lc-color-neutral-850);
    --era-dialog-box-shadow: 0 0 2px var(--lc-color-neutral-000);

    --era-popup-background: var(--lc-color-neutral-850);
    --era-popup-box-shadow-color: var(--lc-color-neutral-000);

    --era-button-active-color: var(--lc-color-blue-800);
    --era-button-background: var(--lc-color-neutral-850);
    --era-button-border: solid 1px var(--lc-color-neutral-000);
    --era-button-badge-background: var(--lc-color-blue-300);
    --era-button-badge-color: var(--lc-color-neutral-900);

    --era-default-button-background: var(--lc-color-neutral-200);
    --era-default-button-border: solid 1px var(--lc-color-neutral-200);
    --era-default-button-color: var(--lc-color-neutral-900);
    --era-default-button-over-background: var(--lc-color-neutral-400);

    --era-popup-shadow: rgba(0,0,0,0.4);

    --era-separator-fill: rgba(255, 255, 255, 0.2);

    --era-textfield-background: var(--lc-color-neutral-900);
    --era-textfield-border-color: var(--lc-color-neutral-400);
    --era-textfield-shadow: none;

    --era-listview-row-checkbox-color: var(--lc-color-neutral-400);
    --era-listview-row-radiobox-color: var(--lc-color-neutral-400);
    --era-listview-row-background: var(--lc-main-background);
    --era-listview-row-over-background: var(--lc-color-neutral-850);
    --era-listview-row-select-background: var(--lc-color-blue-800);
    --era-listview-row-select-over-background: var(--lc-color-blue-800);
    --era-listview-row-select-over-background: color-mix(in srgb, var(--lc-color-neutral-200) 10%, var(--lc-color-blue-800) 90%);

    --era-toast-background: var(--lc-color-neutral-850);
    --era-toast-error-background: var(--lc-color-red-800);

    --lc-appel-unjustified-absence: var(--lc-color-red-500);
    --lc-appel-justified-absence: var(--lc-color-yellow-500);
    --lc-appel-retard: var(--lc-color-blue-500);

    --lc-news-important-color: var(--lc-color-purple-700);
    --lc-news-important-foreground: var(--lc-color-neutral-000);

    --lc-main-background: var(--lc-color-neutral-900);
    --lc-main-border: 1px solid rgba(255,255,255,0.2);
    --lc-app-menu-title-background: var(--lc-color-neutral-900);

    --era-contextbar-background: var(--lc-color-neutral-900);
    --era-contextbar-border: solid 2px var(--lc-color-neutral-400);

    --lc-webmail-toitem-invalid-background: #8f0000;

    --lc-chip-green-background: var(--lc-color-green-200);
    --lc-chip-green-color: var(--lc-color-green-800);
    --lc-chip-blue-background: var(--lc-color-blue-200);
    --lc-chip-blue-color: var(--lc-color-blue-800);
    --lc-chip-yellow-background: var(--lc-color-yellow-200);
    --lc-chip-yellow-color: var(--lc-color-yellow-800);
    --lc-chip-red-background: var(--lc-color-red-200);
    --lc-chip-red-color: var(--lc-color-red-800);
    --lc-chip-violet-background: var(--lc-color-purple-200);
    --lc-chip-violet-color: var(--lc-color-purple-800);
    --lc-chip-grey-background: var(--lc-color-neutral-200);
    --lc-chip-grey-color: var(--lc-color-neutral-800);
    --lc-chip-border-grey-border: var(--lc-color-neutral-500);
    --lc-chip-border-grey-color: var(--lc-color-neutral-200);

    --lc-card-border: solid 1px rgba(255,255,255,0.2);
    --lc-card-over-border: solid 1px #868686;
    --lc-card-over-shadow: 0 0 4px rgba(255,255,255,0.2);

    --lc-graph-color: var(--lc-color-blue-600);
    --lc-graph-border-color: var(--lc-color-blue-400);

    --lc-graph-red-color: var(--lc-color-red-600);
    --lc-graph-red-border-color: var(--lc-color-red-400);
    --lc-graph-green-color: var(--lc-color-green-600);
    --lc-graph-green-border-color: var(--lc-color-green-400);
    --lc-graph-blue-color: var(--lc-color-blue-600);
    --lc-graph-blue-border-color: var(--lc-color-blue-400);
    --lc-graph-yellow-color: var(--lc-color-yellow-600);
    --lc-graph-yellow-border-color: var(--lc-color-yellow-400);
    --lc-graph-purple-color: var(--lc-color-purple-600);
    --lc-graph-purple-border-color: var(--lc-color-purple-400);

    --lc-publi-progresswizard-unset: #777;

    --lc-catalog-resource-card-border: #ebecf07e;
    --lc-catalog-resource-card-border-hover: #ced5df;
    --lc-catalog-resource-card-box-shadow-hover: 5px 5px 17px 5px #ffffff12;
    --lc-catalog-resource-card-tag-background: #f4f5f723;
    --lc-catalog-resource-card-install-background: #f4f5f723;
    --lc-catalog-warning-text: var(--lc-infomessage-color);
    --lc-catalog-warning-background: var(--lc-infomessage-background);
    --lc-catalog-warning-border: var(--lc-infomessage-bordercolor);

    --lc-errormessage-background: var(--lc-color-red-900);
	--lc-errormessage-color: var(--lc-color-red-400);
	--lc-errormessage-bordercolor: var(--lc-color-red-700);

	--lc-warningmessage-background: var(--lc-color-yellow-900);
	--lc-warningmessage-color: var(--lc-color-yellow-400);
	--lc-warningmessage-bordercolor: var(--lc-color-yellow-700);

    --lc-infomessage-background: var(--lc-color-blue-900);
    --lc-infomessage-color: var(--lc-color-blue-400);
	--lc-infomessage-bordercolor: var(--lc-color-blue-700);

    --lc-useritem-warning-background: #332700;
    --lc-useritem-warning-color: #e2a936;

    --lc-forms-formitemgraphic-activeborder: var(--lc-color-blue-700);
    --lc-form-correct-answer-background: var(--lc-color-green-900);
    --lc-form-comment-background: var(--lc-color-neutral-800);
    --lc-form-wrong-answer-background: var(--lc-color-red-900);
    --lc-form-multiple-choice-grid-background: #555555;
    --lc-form-multiple-choice-grid-row-background: #474747;
    --lc-form-points-label-color: var(--lc-chip-violet-color);
    --lc-form-points-label-background: var(--lc-chip-violet-background);
    --lc-form-to-correct-label-background: var(--lc-chip-blue-background);
    --lc-form-corrected-label-background: var(--lc-chip-green-background);
    --lc-form-to-correct-label-color: var(--lc-chip-blue-color);
    --lc-form-corrected-label-color: var(--lc-chip-green-color);
    --lc-form-info-message-background: var(--lc-infomessage-background);
    --lc-form-info-message-color: var(--lc-infomessage-color);
    --lc-form-info-message-border: var(--lc-infomessage-bordercolor);

    --lc-apptable-background: none;
    --lc-apptable-menu: var(--lc-color-neutral-950);
    --lc-apptable-active-background: var(--lc-color-blue-900);
    --lc-apptable-platitem-background: var(--lc-color-neutral-850);
    --lc-apptable-separator-color: var(--lc-color-neutral-500);
    --lc-apptable-header-separator-color: var(--lc-color-neutral-000);

    --era-contextbarchip-background: var(--era-background);
    --era-contextbarchip-color: var(--era-foreground);

    --lc-docs-accessitem-background: var(--lc-color-neutral-900);
}

lc-portail-toolbar {
    --era-button-background: transparent;
    --era-button-border: solid 1px transparent;
}

lc-portail-homebutton {
    --era-button-icon-size: 36px;
    --era-button-icon-margin: 0px;
}

lc-portail-homelocatormenu {
    --era-button-icon-size: 36px;
    --era-button-icon-margin: 0px;
}

lc-pager {
    --era-button-background: transparent;
    --era-button-border: solid 1px transparent;
    margin: 8px;
    border-radius: 6px;
}

lc-portail-connectbutton {
    --era-button-background: #ff0032;
    --era-button-color: var(--lc-color-neutral-000);
    font-weight: bold;
}

lc-docs-previewdialog[dark] {
    --era-dialog-background: rgba(0,0,0,0.7);
}

lc-directory-avatarimage {
    border-radius: 6px;
    overflow: hidden;
}

a {
    color: var(--lc-link-color);
}

@scope (lc-webmail-htmleditor) {
    p, h1, h2, h3 {
        margin-block-start: 8px;
        margin-block-end: 8px;
    }
    h1 {
        font-size: 1.35em;
    }
    h2 {
        font-size: 1.25em;
    }
    h3 {
        font-size: 1.1em;
    }
}