@font-face {
    font-family: OpenDyslexic;
    src: url("../fonts/OpenDyslexic-Regular.woff") format("woff"), url("../fonts/OpenDyslexic-Regular.otf") format("otf");
    font-style: normal;
}

:root {
    --bleu-fluo: #000080;
    --bleu-ctr: #395c6f;
    --bleu-std : #4a7b91;
    --jaune-fluo: #FFFF00;
    --jaune-focus: #FFC90E;
}

.modal-header .close {
    width: 29px;
    height: 29px;
    opacity: unset;
}

.modal-header .close:focus {
    border: 2px solid var(--jaune-focus);

}

body .btn-default.btnFocussable:focus {
    border-color: var(--jaune-focus);
    color: #000 !important;
}

input[type=radio]:focus {
    outline: 5px auto var(--jaune-focus);
    outline-offset: 2px;
}

/*************** Partie Police d'écriture adapter *************/
body.dyslexic,
body.dyslexic h1,
body.dyslexic h2,
body.dyslexic h3,
body.dyslexic h4,
body.dyslexic h5,
body.dyslexic h6,
body.dyslexic .container,
body.dyslexic code,
body.dyslexic pre,
body.dyslexic #j_processoutputdata{
    font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
}

/*************** Partie Bouton oeil *************/
#accessibility{
    position: fixed;
    top: 10px;
    right:10px;
    z-index: 9999999;
}

#accessibility button i{
    font-size: 20px;
}

/*************** Partie Justification supprimer *************/
body.justifSuppr,
body.justifSuppr .container {
    text-align: left !important;
}

/*************** Partie Interligne Augmenter *************/

body.interligneSup,
body.interligneSup .container,
body.interligneSup .table>tbody>tr>th,
body.interligneSup .table>tbody>tr>td,
body.interligneSup .CodeMirror-code{
    line-height: 1.5 !important;
    letter-spacing: 0.4px;
    word-spacing: 0.5px;
}

/*************** Partie Contraste renforcer *************/
body.highContrast code{
    color: #9d1d3e;
}

body.highContrast .modal-header .close:focus {
    border: 2px solid var(--jaune-focus);
}

body.highContrast .txtColor-svt{
    color: #415026 !important;
}

body.highContrast .txtColor-phys{
    color: #385461 !important;
}

body.highContrast .txtColor-blueCyan{
    color:#105a65 !important;
}

body.highContrast .delimitMenu{
    background-color: var(--bleu-ctr) !important;
}

body.highContrast .CodeMirror-activeline-background {
    background: #253540;
}

body.highContrast .CodeMirror {
    background: #0F192A;
    color: #D1EDFF;
}

body.highContrast div.CodeMirror-selected {
    background: #314D67;
}

body.highContrast .CodeMirror-line::selection, body.highContrast .CodeMirror-line > span::selection, body.highContrast .CodeMirror-line > span > span::selection {
    background: rgba(49, 77, 103, .99);
}

body.highContrast .CodeMirror-line::-moz-selection, body.highContrast .CodeMirror-line > span::-moz-selection, body.highContrast .CodeMirror-line > span > span::-moz-selection {
    background: rgba(49, 77, 103, .99);
}

body.highContrast .CodeMirror-gutters {
    background: #0F192A;
    border-right: 1px solid;
}

body.highContrast .CodeMirror-guttermarker {
    color: white;
}

body.highContrast .CodeMirror-guttermarker-subtle {
    color: #d0d0d0;
}

body.highContrast .CodeMirror-linenumber {
    color: #D0D0D0;
}

body.highContrast .CodeMirror-cursor {
    border-left: 1px solid #F8F8F0;
}

body.highContrast span.cm-comment {
    color: #8ac0ff;
}

body.highContrast span.cm-atom {
    color: #AE81FF;
}

body.highContrast span.cm-number {
    color: #D1EDFF;
}

body.highContrast span.cm-property, body.highContrast span.cm-attribute {
    color: #A6E22E;
}

body.highContrast span.cm-keyword {
    color: #E83737;
}

body.highContrast span.cm-string {
    color: #1DC116;
}

body.highContrast span.cm-variable {
    color: #FFAA3E;
}

body.highContrast span.cm-variable-2 {
    color: #FFAA3E;
}

body.highContrast span.cm-def {
    color: #4DD;
}

body.highContrast span.cm-bracket {
    color: #D1EDFF;
}
body.highContrast span.cm-builtin {
    color: #bb9eff;
}

body.highContrast span.cm-tag {
    color: #449;
}

body.highContrast span.cm-link {
    color: #AE81FF;
}

body.highContrast span.cm-error {
    background: #F92672;
    color: #F8F8F0;
}

body.highContrast span.cm-operator {
    background: #0F192A;
    color: #FFFFFF;
}

body.highContrast .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
}


body.highContrast .btnmenu,
body.highContrast #j_menu,
body.highContrast #j_splitter,
body.highContrast #j_container{
    background-color: #1b5d64;
}

body.highContrast .btnmenu:hover,
body.highContrast .btnmenu:active{
    background-color: #34495E !important;
    color:#ffffff !important;
}

body.highContrast .bgColor-college{
    background-color: #8d4511 !important;
}

body.highContrast .bgColor-lycee{
    background-color: #a22e2a !important;
}

body.highContrast .modal-header .close{
    opacity: .7;
}

body.highContrast .modal-header .close:hover,
body.highContrast .modal-header .close:focus{
    opacity: 1;
}

body.highContrast .btn-default.btnFocussable:focus {
    border-color: var(--jaune-focus);
    color: #000 !important;
}

body.highContrast .infoGranule2Disabled.biologieVegetale{
    background-color:#445e27;
}
body.highContrast .infoGranule2Disabled.biologieAnimale{
    background-color:#275f6e;
}
body.highContrast .infoGranule2Disabled.geologie{
    background-color:#774f27;
}
body.highContrast .infoGranule2Disabled.microbiologie{
    background-color:#604a7b;
}

body.highContrast #noMatch span{
    color:#9a2c31 !important;
}

body.highContrast .btn.btn-blue {
    background: #0e606c !important;
    border-color: #0e606c !important;
}

body.highContrast .btn.btn-blue:hover, .btn.btn-blue:active{
    background: #0b515d !important;
    border-color: #0b515d!important;
}

body.highContrast .exao-dialogBox div.dialog-button.button-granny {
    color: #fff;
    text-shadow: 0 -1px 0 #55830c;
    border-color: #62a60a #62a60a #4d9200;

    background: #396006;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9ad717), to(#396006));
    background-image: -webkit-linear-gradient(top, #9ad717, #396006);
    background-image: -o-linear-gradient(top, #9ad717, #396006);
    background-image: linear-gradient(to bottom, #9ad717, #396006);
    background-image: -moz-linear-gradient(top, #9ad717, #396006);
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#9ad717', endColorstr='#396006');
}

body.highContrast #preview-slider-polar.vertical-slider div.polar-selected {
    background-color: rgba(255, 255, 255, 1.0);
    border: 2px solid #006600;
    color: #006600;
}

body.highContrast div.header-menu table.table-menu td.active-menu {
    background-color: #f5f5f5;
    color: #325768 !important;
}

body.highContrast .idol.badgered{
    background-color:#a42424;
}
body.highContrast .idol.badgeorange{
    background-color:#8d4109;
}
body.highContrast .idol.badgegreen{
    background-color:#006600;
}

/*************** Partie Contraste inverser *************/

/* Fond bleu - Texte jaune - Bord jaune x4 */
body.invertContrast,
body.invertContrast .modal-content,
body.invertContrast .modal-footer,
body.invertContrast .modal-header,
body.invertContrast .container,
body.invertContrast #button-GranuleTitle,
body.invertContrast .bgColor-lycee,
body.invertContrast .bgColor-college,
body.invertContrast input,
body.invertContrast .table>tbody>tr>th,
body.invertContrast .table>tbody>tr>td,
body.invertContrast .logo,
body.invertContrast .sidebar,
body.invertContrast #j_menu,
body.invertContrast .btnmenu,
body.invertContrast #j_container_aide,
body.invertContrast #j_footer_text,
body.invertContrast #j_footer,
body.invertContrast #j_select_exemple,
body.invertContrast #j_container,
body.invertContrast #j_dlgfileattached_cont,
body.invertContrast #j_dlgfileattached_area,
body.invertContrast #j_dlgfile_cont,
body.invertContrast #j_dlginputuser_cont,
body.invertContrast #j_dlgtext_cont,
body.invertContrast .content,
body.invertContrast select{
    background-color: var(--bleu-fluo) !important;
    color: var(--jaune-fluo) !important;
    border-color: var(--jaune-fluo) !important;
}

/* Border bottom jaune uniquement */
body.invertContrast .navbar-nav > .language-menu > .dropdown-menu:after,
body.invertContrast .navbar-nav > .user-menu > .dropdown-menu:after,
body.invertContrast .navbar-nav > .schoolLevel-menu > .dropdown-menu:after{
    border-bottom-color: var(--jaune-fluo) !important;
}

body.invertContrast .navbar{
    border-bottom: 0 solid;
    background-color: var(--bleu-fluo) !important;
    color: var(--jaune-fluo) !important;
    border-color: var(--jaune-fluo) !important;
}

/* Texte jaune */
body.invertContrast a,
body.invertContrast .txtColor-phys,
body.invertContrast .modal-header .close,
body.invertContrast .btnLess{
    color: var(--jaune-fluo) !important;
    opacity: 1;
}

/* Fond jaune - Texte bleu */
body.invertContrast #j_splitter,
body.invertContrast .txtColor-phys:hover,
body.invertContrast .txtColor-phys:focus,
body.invertContrast a:hover,
body.invertContrast a:focus,
body.invertContrast .delimitMenu,
body.invertContrast a:hover > span.txtColor-phys,
body.invertContrast a:focus > span.txtColor-phys,
body.invertContrast a:hover > span.txtColor-svt,
body.invertContrast a:focus > span.txtColor-svt,
body.invertContrast .btnmenu:hover,
body.invertContrast .btnmenu:focus,
body.invertContrast .btnmenuDown,
body.invertContrast .sidebar .sidebar-menu > li > a:hover > .fa,
body.invertContrast .navbar-nav > .language-menu > .dropdown-menu > form > li.dropdown-item > span > div,
body.invertContrast .navbar-nav > .schoolLevel-menu > .dropdown-menu > form > li.dropdown-item > span > i,
body.invertContrast .txtColor-college,
body.invertContrast .btnDlg,
body.invertContrast .btnLess:focus,
body.invertContrast #j_select_exemple:focus,
body.invertContrast .btnLess:hover,
body.invertContrast #tuto1{
    background-color: var(--jaune-fluo) !important;
    color: var(--bleu-fluo) !important;
}

.labelHidden{
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    display: none;
    left: -1000vw;
    position: absolute;
    white-space: nowrap;
}

/* Fond jaune - Texte bleu - Ajout Bord bleu x4 */
body.invertContrast code,
body.invertContrast .btn.btn-default,
body.invertContrast .dropdown-menu,
body.invertContrast .btn-danger,
body.invertContrast .btn-default,
body.invertContrast .modal-header .close:focus,
body.invertContrast #j_dlgfileattached_area:focus,
body.invertContrast input[type=text]:focus,
body.invertContrast .btnEditor,
body.invertContrast select:focus
{
    background-color: var(--jaune-fluo) !important;
    color: var(--bleu-fluo) !important;
    border: 1px solid var(--bleu-fluo) !important;
}

body.invertContrast .btn-default.btnFocussable:focus,
body.invertContrast .btnEditor:focus,
body.invertContrast .btnDlg:focus,
body.invertContrast .btn.btn-default:focus{
    border: 3px solid var(--jaune-fluo) !important;
    color: var(--jaune-fluo) !important;
    background-color: var(--bleu-fluo) !important;
}


/* Fond bleu - Border jaune bottom */
body.invertContrast header{
    background-color: var(--bleu-fluo) !important;
    border-bottom: 1px solid var(--jaune-fluo) !important;
}

/* Ajout Bord jaune x4 */
body.invertContrast .left-side{
    border: 1px solid var(--jaune-fluo) !important;
}

body.invertContrast .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p{
    color: var(--jaune-fluo) !important;
}

body.invertContrast .navbar-nav > .user-menu > .dropdown-menu > li.user-footer,
body.invertContrast .navbar-nav > .user-menu > .dropdown-menu > li.user-header{
    background: var(--bleu-fluo) !important;
    border:1px solid var(--jaune-fluo) !important;
}

body.invertContrast .CodeMirror-activeline-background {
    background: var(--bleu-fluo) !important;
    border: 1px solid var(--jaune-fluo) !important;
}

body.invertContrast .sidebar .sidebar-menu > li > a > .fa,
body.invertContrast .txtColor-phys,
body.invertContrast .txtColor-svt
{
    color: var(--jaune-fluo) !important;
}

body.invertContrast .CodeMirror,
body.invertContrast #j_container_resultat{
    background: var(--bleu-fluo) !important;
    color: var(--jaune-fluo) !important;
    border: 1px solid var(--jaune-fluo) !important;
}

body.invertContrast #editorCode:focus ,
body.invertContrast #j_container_resultat:focus,
body.invertContrast #j_container_resultat:focus #j_processoutput{
    color: var(--bleu-fluo) !important;
    background: var(--jaune-fluo) !important;
}

body.invertContrast #editorCode:focus span.cm-comment,
body.invertContrast #editorCode:focus span.cm-atom,
body.invertContrast #editorCode:focus span.cm-number,
body.invertContrast #editorCode:focus span.cm-property,
body.invertContrast #editorCode:focus span.cm-attribute,
body.invertContrast #editorCode:focus span.cm-keyword,
body.invertContrast #editorCode:focus span.cm-string,
body.invertContrast #editorCode:focus span.cm-variable,
body.invertContrast #editorCode:focus span.cm-variable-2,
body.invertContrast #editorCode:focus span.cm-def,
body.invertContrast #editorCode:focus span.cm-bracket,
body.invertContrast #editorCode:focus span.cm-builtin,
body.invertContrast #editorCode:focus span.cm-tag,
body.invertContrast #editorCode:focus span.cm-link,
body.invertContrast #editorCode:focus span.cm-operator,
body.invertContrast #editorCode:focus .CodeMirror-line {
    color: var(--bleu-fluo) !important;
}

body.invertContrast #j_processoutput,
body.invertContrast .sidebar > .sidebar-menu > li > .treeview-menu,
body.invertContrast .sidebar > .sidebar-menu > li,
body.invertContrast .sidebar > .sidebar-menu > li.active > a{
    background: var(--bleu-fluo) !important;
    color: var(--jaune-fluo) !important;
}

body.invertContrast .CodeMirror-gutters{
    background: var(--jaune-fluo) !important;
    color: var(--bleu-fluo) !important;
}

body.invertContrast .CodeMirror-linenumber,
body.invertContrast #j_splitter i{
    color: var(--bleu-fluo) !important;
}

    body.invertContrast span.cm-comment,
    body.invertContrast span.cm-atom,
    body.invertContrast span.cm-number,
    body.invertContrast span.cm-property,
    body.invertContrast span.cm-attribute,
    body.invertContrast span.cm-keyword,
    body.invertContrast span.cm-string,
    body.invertContrast span.cm-variable,
    body.invertContrast span.cm-variable-2,
    body.invertContrast span.cm-def,
    body.invertContrast span.cm-bracket,
    body.invertContrast span.cm-builtin,
    body.invertContrast span.cm-tag,
    body.invertContrast span.cm-link,
    body.invertContrast span.cm-operator {
        color: var(--jaune-fluo) !important;
    }


body.invertContrast span.cm-error{
    background: red !important;
    color:#FFFFFF !important;
}