@charset "UTF-8";
/* Slide-in-left modal */
/* Make it push overlay exactly like Bootstrap */
.sg-left-modal .modal-dialog {
    height: 100vh;
    margin: 0;
    max-width: 600px;
    transform: translateX(-100%);
    transition: transform 0.35s ease-in-out;
}

.sg-left-modal .modal-content {
    height: 100vh;
    border-radius: 0;
}

.sg-left-modal .modal-footer, .sg-left-modal .modal-header {
    border-radius: 0;
}

.sg-left-modal .modal-body {
    overflow-y: auto;
}

.sg-left-modal.show .modal-dialog {
    transform: translateX(0);
}

.sgaccessplugin-btnactive {
    border: 3px solid;
}

.active-check-icon {
    display: none !important;
}

.sgaccessplugin-btnactive .active-check-icon {
    display: block !important;
    position: absolute;
    bottom: 9px;
    right: 9px;
    font-size: 26px;
}

html.greyscalemode {
    filter: grayscale(100%) !important;
}

html.greyscalemode img,
html.greyscalemode video,
html.greyscalemode picture,
html.greyscalemode iframe {
    filter: grayscale(100%) !important;
}

html.highsaturation {
    filter: saturate(200%) !important;
}

html.highsaturation img,
html.highsaturation video,
html.highsaturation picture {
    filter: saturate(200%) !important;
}

html.lowsaturation {
    filter: saturate(40%) !important;
}

html.lowsaturation img,
html.lowsaturation video,
html.lowsaturation picture {
    filter: saturate(40%) !important;
}

/* LIGHT CONTRAST – similar to AWS "light contrast" */
html.lightcontrast h1,
html.lightcontrast h2,
html.lightcontrast h3,
html.lightcontrast h4,
html.lightcontrast h5,
html.lightcontrast h6,
html.lightcontrast img,
html.lightcontrast p,
html.lightcontrast i,
html.lightcontrast svg,
html.lightcontrast a,
html.lightcontrast button:not(.asw-btn),
html.lightcontrast label,
html.lightcontrast li,
html.lightcontrast ol {
    color: #000 !important;
    fill: #000 !important;
    background-color: #FFF !important;
}

/* HIGH CONTRAST – equivalent to AWS filter: contrast(125%) */
html.highcontrast {
    filter: contrast(125%) !important;
}

html.lightcontrast {
    background: #FFF !important;
}

/* DARK CONTRAST – similar to AWS "dark contrast" */
html.darkcontrast h1,
html.darkcontrast h2,
html.darkcontrast h3,
html.darkcontrast h4,
html.darkcontrast h5,
html.darkcontrast h6,
html.darkcontrast img,
html.darkcontrast p,
html.darkcontrast i,
html.darkcontrast svg,
html.darkcontrast a,
html.darkcontrast button:not(.asw-btn),
html.darkcontrast label,
html.darkcontrast li,
html.darkcontrast ol {
    color: #FFF !important;
    fill: #FFF !important;
    background-color: #000 !important;
}

html.darkcontrast {
    background: #000 !important;
}

/* Highlight all headings */
html.highlighttitles h1,
html.highlighttitles h2,
html.highlighttitles h3,
html.highlighttitles h4,
html.highlighttitles h5,
html.highlighttitles h6 {
    outline: 2px solid #0048ff !important;
    outline-offset: 2px !important;
}

/* Highlight all links */
html.highlightlinks a[href] {
    outline: 2px solid #0048ff !important;
    outline-offset: 2px !important;
}

html.letterspacing {
    --sg-letter-spacing: 2px;
    letter-spacing: var(--sg-letter-spacing) !important;
}

html.letterspacing *:not(.material-icons, .fa, .fa-solid, .fa-regular, .fa-brands,
.glyphicon, .icon, .mdi, .ion, .svg-icon, .iconfont, .emoji-icon, .bi,
.octicon, .feather, .heroicon, .bx, .ri) {
    letter-spacing: var(--sg-letter-spacing) !important;
}

html.lineheight {
    --sg-line-height: 3;
    line-height: var(--sg-line-height) !important;
}

html.lineheight *:not(.material-icons, .fa, .fa-solid, .fa-regular, .fa-brands,
.glyphicon, .icon, .mdi, .ion, .svg-icon, .iconfont, .emoji-icon, .bi,
.octicon, .feather, .heroicon, .bx, .ri) {
    line-height: var(--sg-line-height) !important;
}

html.boldfont {
    --sg-font-weight: 700;
    font-weight: var(--sg-font-weight) !important;
}

html.boldfont *:not(.material-icons, .fa, .fa-solid, .fa-regular, .fa-brands,
.glyphicon, .icon, .mdi, .ion, .svg-icon, .iconfont, .emoji-icon, .bi,
.octicon, .feather, .heroicon, .bx, .ri) {
    font-weight: var(--sg-font-weight) !important;
}

/* Big Cursor using FontAwesome */
/* -------------------------------------- */
/*  GLOBAL BIG POINTER (default cursor)   */
/* -------------------------------------- */
html.bigcursor,
html.bigcursor * {
    cursor: url("/wp-content/themes/sg-child/includes/sg_modules/module_sgaccessplugin/inc/images/arrow-pointer-duotone-regular-full.svg") 30 0, auto !important;
}

/* -------------------------------------- */
/*  CLICKABLE ELEMENTS = HAND CURSOR      */
/* -------------------------------------- */
html.bigcursor a,
html.bigcursor button,
html.bigcursor [role="button"],
html.bigcursor input[type="button"],
html.bigcursor input[type="submit"],
html.bigcursor input[type="reset"],
html.bigcursor label[for],
html.bigcursor select,
html.bigcursor .button,
html.bigcursor [onclick],
html.bigcursor [data-clickable="true"] {
    cursor: url("/wp-content/themes/sg-child/includes/sg_modules/module_sgaccessplugin/inc/images/hand-back-point-up-duotone-regular-full.svg") 30 0, pointer !important;
}

/* -------------------------------------- */
/*  DO **NOT** BREA*



/* You’ll need JS to move this circle with the cursor */
html.stopanimations *,
html.stopanimations *::before,
html.stopanimations *::after {
    transition: none !important;
    animation: none !important;
}

html.forceuppercase,
html.forceuppercase *:not(.material-icons,.fa,.fa-solid,.fa-regular,.fa-brands,.glyphicon,.icon,.mdi,.ion,.svg-icon,.iconfont,.emoji-icon,.bi,.octicon,.feather,.heroicon,.bx,.ri) {
    text-transform: uppercase !important;
}

html.forcelowercase,
html.forcelowercase *:not(.material-icons,.fa,.fa-solid,.fa-regular,.fa-brands,.glyphicon,.icon,.mdi,.ion,.svg-icon,.iconfont,.emoji-icon,.bi,.octicon,.feather,.heroicon,.bx,.ri) {
    text-transform: lowercase !important;
}

/* Reading Guide Overlays */
.sg-reading-guide {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.8); /* dark outside line */
    z-index: 999999; /* above everything */
    top:0
}

.sg-reading-guide-container {
    pointer-events: none !important;
}

/* Hide all <img> tags */
html.hideimages img {
    display: none !important;
}

/* Hide all background images */
html.hideimages [style*="background-image"] {
    background-image: none !important;
}

/* Optional: hide SVGs that are inline images */
html.hideimages svg {
    display: none !important;
}

html.hideimages .sg-perfectimg {
    aspect-ratio: unset;
    padding-top: 0;
}

/* OpenDyslexic */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/wp-content/themes/sg-child/includes/sg_modules/module_sgaccessplugin/inc/fonts/OpenDyslexic-Regular.woff2') format('woff2'),
    url('/wp-content/themes/sg-child/includes/sg_modules/module_sgaccessplugin/inc/fonts/OpenDyslexic-Regular.woff') format('woff'),
    url('/wp-content/themes/sg-child/includes/sg_modules/module_sgaccessplugin/inc/fonts/OpenDyslexic-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('/wp-content/themes/sg-child/includes/sg_modules/module_sgaccessplugin/inc/fonts/OpenDyslexic-Bold.woff2') format('woff2'),
    url('/wp-content/themes/sg-child/includes/sg_modules/module_sgaccessplugin/inc/fonts/OpenDyslexic-Bold.woff') format('woff'),
    url('/wp-content/themes/sg-child/includes/sg_modules/module_sgaccessplugin/inc/fonts/OpenDyslexic-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* Atkinson Hyperlegible from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

/* Font Classes — exclude icons */

html.changefont-opendyslexic *:not(i):not(svg):not(.fa):not([class*="fa-"]) {
    font-family: 'OpenDyslexic', sans-serif !important;
}

html.changefont-atkinson *:not(i):not(svg):not(.fa):not([class*="fa-"]) {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

html.changefont-sans-serif *:not(i):not(svg):not(.fa):not([class*="fa-"]) {
    font-family: sans-serif !important;
}

html.changefont-serif *:not(i):not(svg):not(.fa):not([class*="fa-"]) {
    font-family: serif !important;
}

html.changefont-monospace *:not(i):not(svg):not(.fa):not([class*="fa-"]) {
    font-family: monospace !important;
}