/* GRAYSCALE */

.stk-grayscale-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale") center / cover no-repeat;
    z-index: 9999999;
    backdrop-filter: saturate(0);
    pointer-events: none;
}

/* HIGH CONTRAST */
body.stk-highcontrast h1,
body.stk-highcontrast h2,
body.stk-highcontrast h3,
body.stk-highcontrast h4,
body.stk-highcontrast h5,
body.stk-highcontrast h6,
body.stk-highcontrast span,
body.stk-highcontrast h1 span,
body.stk-highcontrast h2 span,
body.stk-highcontrast h3 span,
body.stk-highcontrast h4 span,
body.stk-highcontrast h5 span,
body.stk-highcontrast h6 span {
    color: #40C090 !important
}

body.stk-highcontrast a h1,
body.stk-highcontrast a h2,
body.stk-highcontrast a h3,
body.stk-highcontrast a h4,
body.stk-highcontrast a h5,
body.stk-highcontrast a h6,
body.stk-highcontrast a span,
body.stk-highcontrast a h1 span,
body.stk-highcontrast a h2 span,
body.stk-highcontrast a h3 span,
body.stk-highcontrast a h4 span,
body.stk-highcontrast a h5 span,
body.stk-highcontrast a h6 span,
body.stk-highcontrast a * {
    color: #0080FF !important;
}

body.stk-highcontrast * {
    background: black !important;
}

body.stk-highcontrast *::before,
body.stk-highcontrast *::after {
    background-color: black !important;
}

body.stk-highcontrast img {
    background: #808080 !important;
}

body.stk-highcontrast input::placeholder,
body.stk-highcontrast textarea::placeholder {
    color: white !important;
}

body.stk-highcontrast i,
body.stk-highcontrast svg {
    color: #FFFF80 !important;
    fill: #FFFF80 !important;
}

body.stk-highcontrast strong {
    color: yellow !important;
}

body.stk-highcontrast div,
body.stk-highcontrast label,
body.stk-highcontrast input,
body.stk-highcontrast textarea,
body.stk-highcontrast p {
    color: white !important;
}


body.stk-highcontrast a,
body.stk-highcontrast a span,
body.stk-highcontrast p.link {
    color: #0080FF !important;
    border-color: #0080FF !important;
}

body.stk-highcontrast a:hover,
body.stk-highcontrast a:hover span {
    background: #610042 !important;
}

body.stk-highcontrast button {
    background: #610042 !important;
    color: white !important;
    border-color: white !important;
    border: solid 1px white !important;
}

body.stk-highcontrast button span {
    color: white !important;
    border-color: white !important;
}


/* NEGATIVE CONTRAST */
body.stk-negativecontrast * {
    color: yellow !important;
    fill: yellow !important;
    background-color: black !important;
    border: none !important;
}

body.stk-negativecontrast *::before,
body.stk-negativecontrast *::after {
    background-color: black !important;
}

body.stk-negativecontrast p,
body.stk-negativecontrast label {
    color: white !important;
}

body.stk-negativecontrast button {
    color: yellow !important;
    border: solid 1px white !important;
}


body.stk-negativecontrast input,
body.stk-negativecontrast textarea {
    border: solid 1px white !important;
}

body.stk-negativecontrast h1,
body.stk-negativecontrast h2,
body.stk-negativecontrast h3,
body.stk-negativecontrast h4,
body.stk-negativecontrast h5,
body.stk-negativecontrast h6,
body.stk-negativecontrast span,
body.stk-negativecontrast h1 span,
body.stk-negativecontrast h2 span,
body.stk-negativecontrast h3 span,
body.stk-negativecontrast h4 span,
body.stk-negativecontrast h5 span,
body.stk-negativecontrast h6 span {
    color: white !important
}

body.stk-negativecontrast button span,
body.stk-negativecontrast a * {
    color: yellow !important;
}

body.stk-negativecontrast .stk-acc-toggle.stk-acc-element-right img {
    background: red !important;
}

/* CLEAR BACKGROUND */
body.stk-clearbackground * {
    background: white !important;
    color: black !important;
    fill: black !important;
}

body.stk-clearbackground i,
body.stk-clearbackground *::before,
body.stk-clearbackground *::after {
    color: black !important;
}

body.stk-clearbackground div {
    background: white !important;
}

/* UNDERLINE LINKS */
body.stk-underlinelinks a,
body.stk-underlinelinks a span,
body.stk-underlinelinks a *,
body.stk-underlinelinks a i,
body.stk-underlinelinks button,
body.stk-underlinelinks button *,
body.stk-underlinelinks button a,
body.stk-underlinelinks button span {
    text-decoration: underline !important;
}

/* READABLE FONT*/
body.stk-readablefont *:not(i) {
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

/* TEXT ZOOM */
body.stk-zoomUp-1 * {
    font-size: 102% !important;
}

body.stk-zoomUp-2 * {
    font-size: 104% !important;
}

body.stk-zoomUp-3 * {
    font-size: 106% !important;
}

body.stk-zoomUp-4 * {
    font-size: 108% !important;
}

body.stk-zoomUp-5 * {
    font-size: 110% !important;
}

body.stk-zoomUp-6 * {
    font-size: 112% !important;
}

body.stk-zoomUp-7 * {
    font-size: 114% !important;
}

body.stk-zoomUp-8 * {
    font-size: 116% !important;
}


/* GUI STYLES */
.stk-acc-toggle.stk-acc-element-left {
    position: fixed;
    right: 0;
    top: 30vh;
    width: 45px;
    background: red;
    padding: 7px;
    z-index: 99999999;
    left: 0;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.stk-acc-toggle.stk-acc-element-right {
    position: fixed;
    right: 0;
    top: 30vh;
    width: 45px;
    height: 45px;
    background: #000000;
    padding: 7px;
    z-index: 99999999;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
}


.stk-acc-toggle.stk-acc-element-bottom {
    position: fixed;
    bottom: 0;
    left: 30vw;
    width: 45px;
    height: 45px;
    background: #000000;
    padding: 7px;
    z-index: 99999999;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}

.stk-acc-toggle.stk-acc-element-right img {
    filter: invert(1);
    width: 30px !important;
}

.stk-acc-navigation.stk-acc-element-bottom {
    position: fixed;
    box-sizing: border-box;
    left: 0;
    width: 100% !important;
    background: white !important;
    z-index: 999999;
    box-shadow: 0 0 40px #0000005c;
    padding: 20px;
    bottom: -50vh;
    visibility: hidden;
    transition: all .3s;
}

.stk-acc-dashboard-show .stk-acc-navigation.stk-acc-element-bottom {
    bottom: 0;
    visibility: visible;
    transition: all .3s;
}

.stk-acc-navigation.stk-acc-element-top {
    position: fixed;
    box-sizing: border-box;
    left: 0;
    width: 100% !important;
    background: white !important;
    z-index: 999999;
    box-shadow: 0 0 40px #0000005c;
    padding: 20px;
    top: -50vh;
    visibility: hidden;
    transition: all .3s;
}

.stk-acc-dashboard-show .stk-acc-navigation.stk-acc-element-top {
    top: 0;
    visibility: visible;
    transition: all .3s;
}

.stk-acc-toggle > svg{
    width: 30px !important;
    height: 30px !important;
    display: block;
}

.stk-acc-icon-menu > svg {
    width: 35px !important;
    height: 35px !important;
    display: block;
}

.stk-acc-close-dashboard > svg {
    width: 20px !important;
    height: 20px !important;
    display: block;
}

.stk-acc-toggle.stk-acc-element-right {
    transition: all .3s !important;
}

.main-data-dashboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.stk-acc-close-dashboard {
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: red;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 21px;
}

ul.stk-acc-navigation-menu li {
    list-style: none;
}

ul.stk-acc-navigation-menu {
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-wrap: wrap;
    flex-direction: row;
}

li.stk-acc-navigation-menu-element a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 22px;
    border: solid 1px #cbcbcb;
    border-radius: 10px;
    margin: 5px;
}

li.stk-acc-navigation-menu-element {
    position: relative;
}

.title-control {
    display: flex;
    align-items: center;
}

.title-control p {
    margin: 0 !important;
}

.theme-change {
    display: flex;
    width: 55px;
    background: red;
    border-radius: 100px;
    margin-left: 10px;
    position: relative;
    height: 25px;
}



.theme-icon-hidden {
    visibility: hidden;
    right: 26px;
    pointer-events: none;
}

.stk-dark.theme-icon-active {
    left: 0;
}

.theme-change {
    box-shadow: inset 0 0 10px #00000029;
}

.dark-theme-is-active .theme-change {
    background: #40d340;
}

.stk-dark,
.stk-light {
    position: absolute;
    top: 0;
    right: 0;
    background: white;
    width: 30px;
    height: 30px;
    border-radius: 26px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -3px;
    right: -3px;
    cursor: pointer;
    box-shadow: 1px 1px 10px #00000052;
}

.stk-light.theme-icon-active.theme-icon-hidden {
    left: 0;
}

.stk-dark.theme-icon-active.theme-icon-hidden {
    right: 0;
    left: initial;
}

ul.stk-acc-navigation-menu>li:first-child a {
    margin-left: 0;
}

ul.stk-acc-navigation-menu {
    margin-top: 20px;
}

ul.stk-acc-navigation-menu li svg {
    color: red;
    font-size: 31px !important;
}

ul.stk-acc-navigation-menu li a {
    color: black;
}

.stk-item-is-active a:before {
    content: url("../img/checked.svg");
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

/* DARK THEME */
.dark-theme-is-active .stk-acc-navigation {
    background: #27222b !important;
}

.dark-theme-is-active p.stk-acc-info-title {
    color: white;
}

.dark-theme-is-active li.stk-acc-navigation-menu-element a {
    color: white;
}

.dark-theme-is-active li.stk-acc-navigation-menu-element a {
    border-color: #ffffff24;
    box-shadow: inset 0 0 20px #443f49;
}

.dark-theme-is-active li.stk-acc-navigation-menu-element a {
    border-color: #ffffff24;
    box-shadow: inset 0 0 20px #443f49, 0 0 10px black;
}

/* FIXES */
.stk-negativecontrast .stk-acc-navigation {
    background: black !important;
    border-top: solid 1px yellow !important;
}

.stk-negativecontrast .theme-change,
.stk-clearbackground .theme-change {
    display: none !important;
}

.stk-negativecontrast .dark-theme-is-active li.stk-acc-navigation-menu-element a {
    box-shadow: none !important;
    border-color: white !important;
}

.stk-clearbackground .dark-theme-is-active .stk-acc-navigation {
    background: white !important;
}

.stk-clearbackground .dark-theme-is-active li.stk-acc-navigation-menu-element a {
    box-shadow: none !important;
}

ul.stk-acc-navigation-menu li a,
ul.stk-acc-navigation-menu li a>span:nth-child(2) {
    font-size: 18px !important;
}

.title-control p,
.title-control {
    font-size: 18px !important;
}

ul.stk-acc-navigation-menu li.stk-acc-navigation-menu-element a {
    min-height: 140px;
    height: 100%;
}

.stk-highcontrast .stk-acc-navigation {
    background: black !important;
}

.stk-highcontrast .theme-change {
    display: none !important;
}

body.stk-highcontrast i,
body.stk-highcontrast svg,
body.stk-highcontrast svg g,
body.stk-highcontrast svg path {
    color: #FFFF80 !important;
    fill: #FFFF80 !important;
}

body.stk-highcontrast .special-icon svg path {
    fill: #ffffff00 !important;
    stroke: #FFFF80 !important;
}

body.stk-negativecontrast .special-icon svg path {
    fill: #ffffff00 !important;
    stroke: yellow !important;
}

body.stk-clearbackground .special-icon svg path {
    fill: white !important;
    stroke: black !important;
}

.stk-grayscale .dark-theme-is-active svg,
.stk-grayscale .dark-theme-is-active svg g,
.stk-grayscale .dark-theme-is-active svg path {
    fill: white;
}

.stk-grayscale .special-icon svg path {
    fill: transparent !important;
    stroke: white !important;
}

div#stk-acc-wrapper ul.stk-acc-navigation-menu li:hover a {
    background: red;
    color: white;
}

div#stk-acc-wrapper ul.stk-acc-navigation-menu li:hover a svg,
div#stk-acc-wrapper ul.stk-acc-navigation-menu li:hover a svg g,
div#stk-acc-wrapper ul.stk-acc-navigation-menu li:hover a svg path {
    fill: white;
}

div#stk-acc-wrapper ul.stk-acc-navigation-menu li.special-icon:hover a svg {
    fill: white !important;
    stroke: transparent !important;
}

.stk-grayscale .stk-dark.theme-icon-active svg path {
    fill: black !important;
}

ul.stk-acc-navigation-menu li.special-icon:hover a svg path {
    fill: transparent !important;
    stroke: white;
}

@media only screen and (max-width: 1700px) {

    .stk-acc-navigation ul.stk-acc-navigation-menu li {
        flex: 0 0 20%;
    }

    .stk-acc-navigation ul.stk-acc-navigation-menu li:last-child {
        flex: 0 0 40%;
    }

    ul.stk-acc-navigation-menu li.stk-acc-navigation-menu-element a {
        min-height: 100px;
        height: 100%;
    }

}

@media only screen and (max-width: 1138px) {

    .stk-acc-navigation ul.stk-acc-navigation-menu li {
        width: 25%;
    }

    ul.stk-acc-navigation-menu li.stk-acc-navigation-menu-element a {
        min-height: 138px;
        height: 100%;
    }

    .stk-acc-navigation ul.stk-acc-navigation-menu li:last-child {
        flex: 0 0 100%;
    }

}

@media only screen and (max-width: 500px) {


    .stk-acc-navigation ul.stk-acc-navigation-menu li {
        flex: 0 0 25%;
    }

    .stk-acc-navigation ul.stk-acc-navigation-menu li.stk-acc-navigation-menu-element a span {
        text-align: center;
    }

    ul.stk-acc-navigation-menu li a, ul.stk-acc-navigation-menu li a>span:nth-child(2) {
        font-size: 14px !important;
    }

}