:root {
    --mds-orange: #ec6707;
    --mds-gray: #7b7b81;
    --mds-light-gray: #bdbdc2;
    --mds-green: #77bb00;
    --mds-blue: #1398f8;
    --mds-yellow: #dcd00c;
    --mds-dark-transparent: rgba(0, 0, 0, 0.3);
    --mds-bright-transparent: rgba(255, 255, 255, 0.3);
    --mds-white-transparent: rgba(255, 255, 255, 0.65);
    --mds-orange-transparent: rgba(236,103,7,0.2);
    --mds-gray-transparent: rgba(123,123,129, 0.3);
    --mds-yellow-transparent: rgba(220,208,12,0.2);
    --mds-light-gray-transparent: rgba(189,189,194,0.3);
    --mds-green-transparent: rgba(119,187,0,0.2);
    --mds-hover-transition-out: .15s;
    --mds-hover-transition-in: 0s;
    --mds-current-context-color: red;
}

.mds-gray {
    background-color: var(--mds-gray);
    color: white;
}

.mds-light-gray {
    background-color: var(--mds-light-gray);
    color: #000;
}

.w3-ripple.mds-gray:active {
    background-color: var(--mds-light-gray);
    opacity: 1;
}

.mds-text-hover-dark:hover {
    color: #000;
}

.mds-text-hover-orange:hover {
    color: var(--mds-orange);
}

.mds-text-hover-bright:hover {
    color: var(--mediumTransparent);
}

.mds-text-gray.mds-text-hover-bright:hover,
.mds-text-light-gray.mds-text-hover-bright:hover {
    color: #fff;
}

.mds-text-hover-bright,
.mds-text-hover-dark{
    transition: color var(--mds-hover-transition-out);
}

.mds-text-black.mds-text-hover-bright:hover,
.mds-text-black.mds-text-hover-bright.hover,
.mds-text-light-gray.mds-text-hover-dark:hover,
.mds-text-light-gray.mds-text-hover-dark.hover {
    color: var(--mds-gray);
    transition-duration: var(--mds-hover-transition-in);
}


.mds-text-gray.mds-text-hover-dark:hover {
    color: #000;
}

.mds-text-black.mds-text-hover-dark:hover {
    color: var(--mds-orange);
}

.mds-text-orange {
    color: var(--mds-orange);
}

.mds-text-gray {
    color: var(--mds-gray);
}

.mds-text-light-gray {
    color: var(--mds-light-gray);
}

.mds-text-black {
    color: #000;
}

.mds-border-light-gray {
    border-color: var(--mds-light-gray);
}

.mds-border-gray {
    border-color: var(--mds-gray);
}

.mds-border.mds-gray {
    border: 1px solid #000;
}

.mds-border.mds-light-gray {
    border: 1px solid var(--mds-gray);
}

.mds-border-orange {
    border-color: var(--mds-orange) !important;
}

.mds-bg-orange {
    background-color: var(--mds-orange-transparent);
}

.mds-bg-yellow {
    background-color: var(--mds-yellow-transparent);
}

.mds-mandatory {
    border: 1px solid #ce3535 !important;
}

.mds-mandatory-text {
    color: var(--warning) !important;
}

.mds-bg-green {
    background-color: var(--mds-green-transparent);
}

.mds-bg-white {
    background-color: var(--mds-bright-transparent);
}

.mds-bg-gray {
    background-color: var(--mds-gray-transparent);
}

    .mds-bg-gray.mds-hover-bright:hover, .mds-bg-gray.mds-hover-bright.hover {
        box-shadow: inset 0 0 0 500px var(--mds-bright-transparent);
        background-color: var(--mds-gray-transparent);
    }

    .mds-bg-gray.mds-hover-dark:hover, .mds-bg-gray.mds-hover-dark.hover {
        box-shadow: inset 0 0 0 500px var(--mds-dark-transparent);
        background-color: var(--mds-gray-transparent);
    }

.mds-bg.mds-hover-dark:hover, .mds-bg.mds-hover-dark.hover {
    box-shadow: inset 0 0 0 500px var(--mds-gray-transparent);
}


.mds-hover-bright, .mds-hover-dark, .mds-text-hover-bright, .mds-text-hover-dark, .mds-text-hover-orange {
    cursor: pointer;
}

.mds-bg-light-gray, .sp-wikilink {
    background-color: var(--mds-light-gray-transparent);
}

    .mds-bg-light-gray.mds-hover-bright:hover, .mds-bg-light-gray.mds-hover-bright.hover {
        box-shadow: inset 0 0 0 500px var(--mds-bright-transparent);
        background-color: var(--mds-light-gray-transparent);
    }

    .mds-bg-light-gray.mds-hover-dark:hover, .mds-bg-light-gray.mds-hover-dark.hover {
        box-shadow: inset 0 0 0 500px var(--mds-gray-transparent);
        background-color: var(--mds-light-gray-transparent);
    }

.mds-gray.mds-hover-bright:hover, .mds-gray.mds-hover-bright.hover {
    box-shadow: inset 0 0 0 500px var(--mds-light-gray);
    background-color: var(--mds-gray);
    color: black;
}

.mds-light-gray.mds-hover-bright:hover, .mds-light-gray.mds-hover-bright.hover {
    box-shadow: inset 0 0 0 500px var(--mds-bright-transparent);
    background-color: var(--mds-light-gray);
    color: black;
}

select.mds-hover-bright:hover, select.mds-hover-bright.hover {
}

.mds-hover-bright:hover, .mds-hover-bright.hover {
    transition: var(--mds-hover-transition-in);
    box-shadow: inset 0 0 0 500px var(--brightTransparent);
    cursor: pointer;
}

.mds-hover-dark:hover, .mds-hover-dark.hover {
    transition: var(--mds-hover-transition-in);
    box-shadow: inset 0 0 0 500px var(--darkTransparent);
    cursor: pointer;
}

.mds-gray.mds-hover-dark:hover, .mds-gray.mds-hover-dark.hover {
    transition: var(--mds-hover-transition-in);
    background-color: var(--mds-gray);
    color: white;
}


.mds-hover-dark, .mds-hover-bright, .mds-hover-orange, .mds-hover-blue {
    transition: var(--mds-hover-transition-out);
}



.mds-yellow.mds-hover-bright:hover {
}

.mds-orange.mds-hover-bright:hover, .mds-blue.mds-hover-bright:hover,
.mds-orange.mds-hover-bright.hover, .mds-blue.mds-hover-bright.hover {
    box-shadow: inset 0 0 0 500px var(--mds-bright-transparent);
    background-color: var(--mds-current-context-color);
}



.mds-hover-border:hover, .mds-hover-border-light-gray:hover {
    cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--mds-light-gray);
    transition: var(--mds-hover-transition-in);
}

.mds-hover-border-gray:hover {
    cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--mds-gray);
    transition: var(--mds-hover-transition-in);
}

.mds-hover-border-orange:hover {
    cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--mds-orange);
    transition: var(--mds-hover-transition-in);
}

.mds-green {
    background-color: var(--mds-green);
    --mds-current-context-color: var(--mds-green);
}

.mds-text-green {
    color: var(--mds-green);
}

.mds-text-blue {
    color: var(--mds-blue);
}

.mds-orange {
    color: #fff;
    background-color: var(--mds-orange);
    --mds-current-context-color: var(--mds-orange);
}

.mds-hover-orange:hover, .mds-hover-orange.hover {
    color: #fff;
    cursor: pointer;
    background-color: var(--mds-orange);
    transition: var(--mds-hover-transition-in);
    --mds-current-context-color: var(--mds-orange);
}

.mds-blue {
    color: #fff;
    background-color: var(--mds-blue);
    --mds-current-context-color: var(--mds-blue);
}

.mds-hover-blue:hover, .mds-hover-blue.hover {
    color: #fff;
    cursor: pointer;
    background-color: var(--mds-blue);
    transition: var(--mds-hover-transition-in);
    --mds-current-context-color: var(--mds-blue);
}

.mds-yellow {
    background-color: var(--mds-yellow);
    color: #000;
    --mds-current-context-color: var(--mds-yellow);
}