body {
    font-family: IBMPlexSansThaiLooped-Regular, sans-serif;
    font-size: .8em;
}

.bg-hover-opacity:hover {
    opacity: 0.7 !important;
}

.bg-opacity-dark {
    filter: brightness(50%);
}

.mahidol-gold {
    background-color: #a5802e !important;
}

.fg-mahidol-gold {
    color: #FEB60E !important;
}

.bg-mahidol-gold {
    background-color: #FEB60E !important;
}

.fg-mahidol-gold-light {
    color: #FEB60E !important;
}

.fg-corn-silk {
    color: #FFF8DC !important;
}

.bg-corn-silk {
    background-color: #FFF8DC !important;
}

.bg-cream {
    background-color: #FBF9EF !important;
}

.fg-ivory {
    color: #FFFFF0 !important;
}

.bg-ivory {
    background-color: #FFFFF0 !important;
}

.bg-black {
    background-color: #000000 !important;
}

.bg-white {
    background-color: #ffffff !important;
}

.bg-lime {
    background-color: #a4c400 !important;
}

.bg-green {
    background-color: #60a917 !important;
}

.bg-emerald {
    background-color: #008a00 !important;
}

.bg-teal {
    background-color: #00aba9 !important;
}

.bg-cyan {
    background-color: #1ba1e2 !important;
}

.bg-cobalt {
    background-color: #0050ef !important;
}

.bg-indigo {
    background-color: #6a00ff !important;
}

.bg-violet {
    background-color: #aa00ff !important;
}

.bg-pink {
    background-color: #dc4fad !important;
}

.bg-magenta {
    background-color: #d80073 !important;
}

.bg-crimson {
    background-color: #a20025 !important;
}

.bg-red {
    background-color: #e51400 !important;
}

.bg-orange {
    background-color: #fa6800 !important;
}

.bg-amber {
    background-color: #f0a30a !important;
}

.bg-yellow {
    background-color: #ffdd57 !important;
}

.bg-brown {
    background-color: #825a2c !important;
}

.bg-olive {
    background-color: #6d8764 !important;
}

.bg-steel {
    background-color: #647687 !important;
}

.bg-mauve {
    background-color: #76608a !important;
}

.bg-taupe {
    background-color: #87794e !important;
}

.bg-gray {
    background-color: #555555 !important;
}

.bg-dark {
    background-color: #333333 !important;
}

.bg-darker {
    background-color: #222222 !important;
}

.bg-transparent {
    background-color: transparent !important;
}

.bg-darkBrown {
    background-color: #63362f !important;
}

.bg-darkCrimson {
    background-color: #640024 !important;
}

.bg-darkMagenta {
    background-color: #81003c !important;
}

.bg-darkIndigo {
    background-color: #4b0096 !important;
}

.bg-darkCyan {
    background-color: #1b6eae !important;
}

.bg-darkCobalt {
    background-color: #00356a !important;
}

.bg-darkTeal {
    background-color: #004050 !important;
}

.bg-darkEmerald {
    background-color: #003e00 !important;
}

.bg-darkGreen {
    background-color: #128023 !important;
}

.bg-darkOrange {
    background-color: #bf5a15 !important;
}

.bg-darkRed {
    background-color: #9a1616 !important;
}

.bg-darkPink {
    background-color: #9a165a !important;
}

.bg-darkViolet {
    background-color: #57169a !important;
}

.bg-darkBlue {
    background-color: #16499a !important;
}

.bg-lightBlue {
    background-color: #4390df !important;
}

.bg-lightRed {
    background-color: #ff2d19 !important;
}

.bg-lightGreen {
    background-color: #7ad61d !important;
}

.bg-lighterBlue {
    background-color: #00ccff !important;
}

.bg-lightTeal {
    background-color: #45fffd !important;
}

.bg-lightOlive {
    background-color: #78aa1c !important;
}

.bg-lightOrange {
    background-color: #c29008 !important;
}

.bg-lightPink {
    background-color: #f472d0 !important;
}

.bg-grayDark {
    background-color: #333333 !important;
}

.bg-grayDarker {
    background-color: #222222 !important;
}

.bg-grayLight {
    background-color: #999999 !important;
}

.bg-grayLighter {
    background-color: #eeeeee !important;
}

.bg-grayLighte {
    background-color: #e8e8e8 !important;
}

.bg-grayLighterx {
    background-color: #eeefef !important;
}

.bg-blue {
    background-color: #00aff0 !important;
}

.fg-black {
    color: #000000 !important;
}

.fg-white {
    color: #ffffff !important;
}

.fg-lime {
    color: #a4c400 !important;
}

.fg-green {
    color: #60a917 !important;
}

.fg-emerald {
    color: #008a00 !important;
}

.fg-teal {
    color: #00aba9 !important;
}

.fg-cyan {
    color: #1ba1e2 !important;
}

.fg-cobalt {
    color: #0050ef !important;
}

.fg-indigo {
    color: #6a00ff !important;
}

.fg-violet {
    color: #aa00ff !important;
}

.fg-pink {
    color: #dc4fad !important;
}

.fg-magenta {
    color: #d80073 !important;
}

.fg-crimson {
    color: #a20025 !important;
}

.fg-red {
    color: #e51400 !important;
}

.fg-orange {
    color: #fa6800 !important;
}

.fg-amber {
    color: #f0a30a !important;
}

.fg-yellow {
    color: #ffdd57 !important;
}

.fg-brown {
    color: #825a2c !important;
}

.fg-olive {
    color: #6d8764 !important;
}

.fg-steel {
    color: #647687 !important;
}

.fg-mauve {
    color: #76608a !important;
}

.fg-taupe {
    color: #87794e !important;
}

.fg-gray {
    color: #555555 !important;
}

.fg-dark {
    color: #333333 !important;
}

.fg-darker {
    color: #222222 !important;
}

.fg-transparent {
    color: transparent !important;
}

.fg-darkBrown {
    color: #63362f !important;
}

.fg-darkCrimson {
    color: #640024 !important;
}

.fg-darkMagenta {
    color: #81003c !important;
}

.fg-darkIndigo {
    color: #4b0096 !important;
}

.fg-darkCyan {
    color: #1b6eae !important;
}

.fg-darkCobalt {
    color: #00356a !important;
}

.fg-darkTeal {
    color: #004050 !important;
}

.fg-darkEmerald {
    color: #003e00 !important;
}

.fg-darkGreen {
    color: #128023 !important;
}

.fg-darkOrange {
    color: #bf5a15 !important;
}

.fg-darkRed {
    color: #9a1616 !important;
}

.fg-darkPink {
    color: #9a165a !important;
}

.fg-darkViolet {
    color: #57169a !important;
}

.fg-darkBlue {
    color: #16499a !important;
}

.fg-lightBlue {
    color: #4390df !important;
}

.fg-lighterBlue {
    color: #00ccff !important;
}

.fg-lightTeal {
    color: #45fffd !important;
}

.fg-lightOlive {
    color: #78aa1c !important;
}

.fg-lightOrange {
    color: #c29008 !important;
}

.fg-lightPink {
    color: #f472d0 !important;
}

.fg-lightRed {
    color: #ff2d19 !important;
}

.fg-lightGreen {
    color: #7ad61d !important;
}

.fg-grayDark {
    color: #333333 !important;
}

.fg-grayDarker {
    color: #222222 !important;
}

.fg-grayLight {
    color: #999999 !important;
}

.fg-grayLighter {
    color: #eeeeee !important;
}

.fg-blue {
    color: #00aff0 !important;
}

.bg-hover-black:hover {
    background-color: #000000 !important;
}

.bg-hover-white:hover {
    background-color: #ffffff !important;
}

.bg-hover-lime:hover {
    background-color: #a4c400 !important;
}

.bg-hover-green:hover {
    background-color: #60a917 !important;
}

.bg-hover-emerald:hover {
    background-color: #008a00 !important;
}

.bg-hover-teal:hover {
    background-color: #00aba9 !important;
}

.bg-hover-cyan:hover {
    background-color: #1ba1e2 !important;
}

.bg-hover-cobalt:hover {
    background-color: #0050ef !important;
}

.bg-hover-indigo:hover {
    background-color: #6a00ff !important;
}

.bg-hover-violet:hover {
    background-color: #aa00ff !important;
}

.bg-hover-pink:hover {
    background-color: #dc4fad !important;
}

.bg-hover-magenta:hover {
    background-color: #d80073 !important;
}

.bg-hover-crimson:hover {
    background-color: #a20025 !important;
}

.bg-hover-red:hover {
    background-color: #e51400 !important;
}

.bg-hover-orange:hover {
    background-color: #fa6800 !important;
}

.bg-hover-amber:hover {
    background-color: #f0a30a !important;
}

.bg-hover-yellow:hover {
    background-color: #e3c800 !important;
}

.bg-hover-brown:hover {
    background-color: #825a2c !important;
}

.bg-hover-olive:hover {
    background-color: #6d8764 !important;
}

.bg-hover-steel:hover {
    background-color: #647687 !important;
}

.bg-hover-mauve:hover {
    background-color: #76608a !important;
}

.bg-hover-taupe:hover {
    background-color: #87794e !important;
}

.bg-hover-gray:hover {
    background-color: #555555 !important;
}

.bg-hover-dark:hover {
    background-color: #333333 !important;
}

.bg-hover-darker:hover {
    background-color: #222222 !important;
}

.bg-hover-transparent:hover {
    background-color: transparent !important;
}

.bg-hover-darkBrown:hover {
    background-color: #63362f !important;
}

.bg-hover-darkCrimson:hover {
    background-color: #640024 !important;
}

.bg-hover-darkMagenta:hover {
    background-color: #81003c !important;
}

.bg-hover-darkIndigo:hover {
    background-color: #4b0096 !important;
}

.bg-hover-darkCyan:hover {
    background-color: #1b6eae !important;
}

.bg-hover-darkCobalt:hover {
    background-color: #00356a !important;
}

.bg-hover-darkTeal:hover {
    background-color: #004050 !important;
}

.bg-hover-darkEmerald:hover {
    background-color: #003e00 !important;
}

.bg-hover-darkGreen:hover {
    background-color: #128023 !important;
}

.bg-hover-darkOrange:hover {
    background-color: #bf5a15 !important;
}

.bg-hover-darkRed:hover {
    background-color: #9a1616 !important;
}

.bg-hover-darkPink:hover {
    background-color: #9a165a !important;
}

.bg-hover-darkViolet:hover {
    background-color: #57169a !important;
}

.bg-hover-darkBlue:hover {
    background-color: #16499a !important;
}

.bg-hover-lightBlue:hover {
    background-color: #4390df !important;
}

.bg-hover-lightTeal:hover {
    background-color: #45fffd !important;
}

.bg-hover-lightOlive:hover {
    background-color: #78aa1c !important;
}

.bg-hover-lightOrange:hover {
    background-color: #c29008 !important;
}

.bg-hover-lightPink:hover {
    background-color: #f472d0 !important;
}

.bg-hover-lightRed:hover {
    background-color: #ff2d19 !important;
}

.bg-hover-lightGreen:hover {
    background-color: #7ad61d !important;
}

.bg-hover-grayDark:hover {
    background-color: #333333 !important;
}

.bg-hover-grayDarker:hover {
    background-color: #222222 !important;
}

.bg-hover-grayLight:hover {
    background-color: #999999 !important;
}

.bg-hover-grayLighter:hover {
    background-color: #eeeeee !important;
}

.bg-hover-blue:hover {
    background-color: #00aff0 !important;
}

.fg-hover-black:hover {
    color: #000000 !important;
}

.fg-hover-white:hover {
    color: #ffffff !important;
}

.fg-hover-lime:hover {
    color: #a4c400 !important;
}

.fg-hover-green:hover {
    color: #60a917 !important;
}

.fg-hover-emerald:hover {
    color: #008a00 !important;
}

.fg-hover-teal:hover {
    color: #00aba9 !important;
}

.fg-hover-cyan:hover {
    color: #1ba1e2 !important;
}

.fg-hover-cobalt:hover {
    color: #0050ef !important;
}

.fg-hover-indigo:hover {
    color: #6a00ff !important;
}

.fg-hover-violet:hover {
    color: #aa00ff !important;
}

.fg-hover-pink:hover {
    color: #dc4fad !important;
}

.fg-hover-magenta:hover {
    color: #d80073 !important;
}

.fg-hover-crimson:hover {
    color: #a20025 !important;
}

.fg-hover-red:hover {
    color: #e51400 !important;
}

.fg-hover-orange:hover {
    color: #fa6800 !important;
}

.fg-hover-amber:hover {
    color: #f0a30a !important;
}

.fg-hover-yellow:hover {
    color: #e3c800 !important;
}

.fg-hover-brown:hover {
    color: #825a2c !important;
}

.fg-hover-olive:hover {
    color: #6d8764 !important;
}

.fg-hover-steel:hover {
    color: #647687 !important;
}

.fg-hover-mauve:hover {
    color: #76608a !important;
}

.fg-hover-taupe:hover {
    color: #87794e !important;
}

.fg-hover-gray:hover {
    color: #555555 !important;
}

.fg-hover-dark:hover {
    color: #333333 !important;
}

.fg-hover-darker:hover {
    color: #222222 !important;
}

.fg-hover-transparent:hover {
    color: transparent !important;
}

.fg-hover-darkBrown:hover {
    color: #63362f !important;
}

.fg-hover-darkCrimson:hover {
    color: #640024 !important;
}

.fg-hover-darkMagenta:hover {
    color: #81003c !important;
}

.fg-hover-darkIndigo:hover {
    color: #4b0096 !important;
}

.fg-hover-darkCyan:hover {
    color: #1b6eae !important;
}

.fg-hover-darkCobalt:hover {
    color: #00356a !important;
}

.fg-hover-darkTeal:hover {
    color: #004050 !important;
}

.fg-hover-darkEmerald:hover {
    color: #003e00 !important;
}

.fg-hover-darkGreen:hover {
    color: #128023 !important;
}

.fg-hover-darkOrange:hover {
    color: #bf5a15 !important;
}

.fg-hover-darkRed:hover {
    color: #9a1616 !important;
}

.fg-hover-darkPink:hover {
    color: #9a165a !important;
}

.fg-hover-darkViolet:hover {
    color: #57169a !important;
}

.fg-hover-darkBlue:hover {
    color: #16499a !important;
}

.fg-hover-lightBlue:hover {
    color: #4390df !important;
}

.fg-hover-lightTeal:hover {
    color: #45fffd !important;
}

.fg-hover-lightOlive:hover {
    color: #78aa1c !important;
}

.fg-hover-lightOrange:hover {
    color: #c29008 !important;
}

.fg-hover-lightPink:hover {
    color: #f472d0 !important;
}

.fg-hover-lightRed:hover {
    color: #ff2d19 !important;
}

.fg-hover-lightGreen:hover {
    color: #7ad61d !important;
}

.fg-hover-grayDark:hover {
    color: #333333 !important;
}

.fg-hover-grayDarker:hover {
    color: #222222 !important;
}

.fg-hover-grayLight:hover {
    color: #999999 !important;
}

.fg-hover-grayLighter:hover {
    color: #eeeeee !important;
}

.fg-hover-blue:hover {
    color: #00aff0 !important;
}

.bg-active-black:active {
    background-color: #000000 !important;
}

.bg-active-white:active {
    background-color: #ffffff !important;
}

.bg-active-lime:active {
    background-color: #a4c400 !important;
}

.bg-active-green:active {
    background-color: #60a917 !important;
}

.bg-active-emerald:active {
    background-color: #008a00 !important;
}

.bg-active-teal:active {
    background-color: #00aba9 !important;
}

.bg-active-cyan:active {
    background-color: #1ba1e2 !important;
}

.bg-active-cobalt:active {
    background-color: #0050ef !important;
}

.bg-active-indigo:active {
    background-color: #6a00ff !important;
}

.bg-active-violet:active {
    background-color: #aa00ff !important;
}

.bg-active-pink:active {
    background-color: #dc4fad !important;
}

.bg-active-magenta:active {
    background-color: #d80073 !important;
}

.bg-active-crimson:active {
    background-color: #a20025 !important;
}

.bg-active-red:active {
    background-color: #e51400 !important;
}

.bg-active-orange:active {
    background-color: #fa6800 !important;
}

.bg-active-amber:active {
    background-color: #f0a30a !important;
}

.bg-active-yellow:active {
    background-color: #e3c800 !important;
}

.bg-active-brown:active {
    background-color: #825a2c !important;
}

.bg-active-olive:active {
    background-color: #6d8764 !important;
}

.bg-active-steel:active {
    background-color: #647687 !important;
}

.bg-active-mauve:active {
    background-color: #76608a !important;
}

.bg-active-taupe:active {
    background-color: #87794e !important;
}

.bg-active-gray:active {
    background-color: #555555 !important;
}

.bg-active-dark:active {
    background-color: #333333 !important;
}

.bg-active-darker:active {
    background-color: #222222 !important;
}

.bg-active-transparent:active {
    background-color: transparent !important;
}

.bg-active-darkBrown:active {
    background-color: #63362f !important;
}

.bg-active-darkCrimson:active {
    background-color: #640024 !important;
}

.bg-active-darkMagenta:active {
    background-color: #81003c !important;
}

.bg-active-darkIndigo:active {
    background-color: #4b0096 !important;
}

.bg-active-darkCyan:active {
    background-color: #1b6eae !important;
}

.bg-active-darkCobalt:active {
    background-color: #00356a !important;
}

.bg-active-darkTeal:active {
    background-color: #004050 !important;
}

.bg-active-darkEmerald:active {
    background-color: #003e00 !important;
}

.bg-active-darkGreen:active {
    background-color: #128023 !important;
}

.bg-active-darkOrange:active {
    background-color: #bf5a15 !important;
}

.bg-active-darkRed:active {
    background-color: #9a1616 !important;
}

.bg-active-darkPink:active {
    background-color: #9a165a !important;
}

.bg-active-darkViolet:active {
    background-color: #57169a !important;
}

.bg-active-darkBlue:active {
    background-color: #16499a !important;
}

.bg-active-lightBlue:active {
    background-color: #4390df !important;
}

.bg-active-lightTeal:active {
    background-color: #45fffd !important;
}

.bg-active-lightOlive:active {
    background-color: #78aa1c !important;
}

.bg-active-lightOrange:active {
    background-color: #c29008 !important;
}

.bg-active-lightPink:active {
    background-color: #f472d0 !important;
}

.bg-active-lightRed:active {
    background-color: #ff2d19 !important;
}

.bg-active-lightGreen:active {
    background-color: #7ad61d !important;
}

.bg-active-grayDark:active {
    background-color: #333333 !important;
}

.bg-active-grayDarker:active {
    background-color: #222222 !important;
}

.bg-active-grayLight:active {
    background-color: #999999 !important;
}

.bg-active-grayLighter:active {
    background-color: #eeeeee !important;
}

.bg-active-blue:active {
    background-color: #00aff0 !important;
}

.fg-active-black:active {
    color: #000000 !important;
}

.fg-active-white:active {
    color: #ffffff !important;
}

.fg-active-lime:active {
    color: #a4c400 !important;
}

.fg-active-green:active {
    color: #60a917 !important;
}

.fg-active-emerald:active {
    color: #008a00 !important;
}

.fg-active-teal:active {
    color: #00aba9 !important;
}

.fg-active-cyan:active {
    color: #1ba1e2 !important;
}

.fg-active-cobalt:active {
    color: #0050ef !important;
}

.fg-active-indigo:active {
    color: #6a00ff !important;
}

.fg-active-violet:active {
    color: #aa00ff !important;
}

.fg-active-pink:active {
    color: #dc4fad !important;
}

.fg-active-magenta:active {
    color: #d80073 !important;
}

.fg-active-crimson:active {
    color: #a20025 !important;
}

.fg-active-red:active {
    color: #e51400 !important;
}

.fg-active-orange:active {
    color: #fa6800 !important;
}

.fg-active-amber:active {
    color: #f0a30a !important;
}

.fg-active-yellow:active {
    color: #e3c800 !important;
}

.fg-active-brown:active {
    color: #825a2c !important;
}

.fg-active-olive:active {
    color: #6d8764 !important;
}

.fg-active-steel:active {
    color: #647687 !important;
}

.fg-active-mauve:active {
    color: #76608a !important;
}

.fg-active-taupe:active {
    color: #87794e !important;
}

.fg-active-gray:active {
    color: #555555 !important;
}

.fg-active-dark:active {
    color: #333333 !important;
}

.fg-active-darker:active {
    color: #222222 !important;
}

.fg-active-transparent:active {
    color: transparent !important;
}

.fg-active-darkBrown:active {
    color: #63362f !important;
}

.fg-active-darkCrimson:active {
    color: #640024 !important;
}

.fg-active-darkMagenta:active {
    color: #81003c !important;
}

.fg-active-darkIndigo:active {
    color: #4b0096 !important;
}

.fg-active-darkCyan:active {
    color: #1b6eae !important;
}

.fg-active-darkCobalt:active {
    color: #00356a !important;
}

.fg-active-darkTeal:active {
    color: #004050 !important;
}

.fg-active-darkEmerald:active {
    color: #003e00 !important;
}

.fg-active-darkGreen:active {
    color: #128023 !important;
}

.fg-active-darkOrange:active {
    color: #bf5a15 !important;
}

.fg-active-darkRed:active {
    color: #9a1616 !important;
}

.fg-active-darkPink:active {
    color: #9a165a !important;
}

.fg-active-darkViolet:active {
    color: #57169a !important;
}

.fg-active-darkBlue:active {
    color: #16499a !important;
}

.fg-active-lightBlue:active {
    color: #4390df !important;
}

.fg-active-lightTeal:active {
    color: #45fffd !important;
}

.fg-active-lightOlive:active {
    color: #78aa1c !important;
}

.fg-active-lightOrange:active {
    color: #c29008 !important;
}

.fg-active-lightPink:active {
    color: #f472d0 !important;
}

.fg-active-lightRed:active {
    color: #ff2d19 !important;
}

.fg-active-lightGreen:active {
    color: #7ad61d !important;
}

.fg-active-grayDark:active {
    color: #333333 !important;
}

.fg-active-grayDarker:active {
    color: #222222 !important;
}

.fg-active-grayLight:active {
    color: #999999 !important;
}

.fg-active-grayLighter:active {
    color: #eeeeee !important;
}

.fg-active-blue:active {
    color: #00aff0 !important;
}

.bg-focus-black:focus {
    background-color: #000000 !important;
}

.bg-focus-white:focus {
    background-color: #ffffff !important;
}

.bg-focus-lime:focus {
    background-color: #a4c400 !important;
}

.bg-focus-green:focus {
    background-color: #60a917 !important;
}

.bg-focus-emerald:focus {
    background-color: #008a00 !important;
}

.bg-focus-teal:focus {
    background-color: #00aba9 !important;
}

.bg-focus-cyan:focus {
    background-color: #1ba1e2 !important;
}

.bg-focus-cobalt:focus {
    background-color: #0050ef !important;
}

.bg-focus-indigo:focus {
    background-color: #6a00ff !important;
}

.bg-focus-violet:focus {
    background-color: #aa00ff !important;
}

.bg-focus-pink:focus {
    background-color: #dc4fad !important;
}

.bg-focus-magenta:focus {
    background-color: #d80073 !important;
}

.bg-focus-crimson:focus {
    background-color: #a20025 !important;
}

.bg-focus-red:focus {
    background-color: #e51400 !important;
}

.bg-focus-orange:focus {
    background-color: #fa6800 !important;
}

.bg-focus-amber:focus {
    background-color: #f0a30a !important;
}

.bg-focus-yellow:focus {
    background-color: #e3c800 !important;
}

.bg-focus-brown:focus {
    background-color: #825a2c !important;
}

.bg-focus-olive:focus {
    background-color: #6d8764 !important;
}

.bg-focus-steel:focus {
    background-color: #647687 !important;
}

.bg-focus-mauve:focus {
    background-color: #76608a !important;
}

.bg-focus-taupe:focus {
    background-color: #87794e !important;
}

.bg-focus-gray:focus {
    background-color: #555555 !important;
}

.bg-focus-dark:focus {
    background-color: #333333 !important;
}

.bg-focus-darker:focus {
    background-color: #222222 !important;
}

.bg-focus-transparent:focus {
    background-color: transparent !important;
}

.bg-focus-darkBrown:focus {
    background-color: #63362f !important;
}

.bg-focus-darkCrimson:focus {
    background-color: #640024 !important;
}

.bg-focus-darkMagenta:focus {
    background-color: #81003c !important;
}

.bg-focus-darkIndigo:focus {
    background-color: #4b0096 !important;
}

.bg-focus-darkCyan:focus {
    background-color: #1b6eae !important;
}

.bg-focus-darkCobalt:focus {
    background-color: #00356a !important;
}

.bg-focus-darkTeal:focus {
    background-color: #004050 !important;
}

.bg-focus-darkEmerald:focus {
    background-color: #003e00 !important;
}

.bg-focus-darkGreen:focus {
    background-color: #128023 !important;
}

.bg-focus-darkOrange:focus {
    background-color: #bf5a15 !important;
}

.bg-focus-darkRed:focus {
    background-color: #9a1616 !important;
}

.bg-focus-darkPink:focus {
    background-color: #9a165a !important;
}

.bg-focus-darkViolet:focus {
    background-color: #57169a !important;
}

.bg-focus-darkBlue:focus {
    background-color: #16499a !important;
}

.bg-focus-lightBlue:focus {
    background-color: #4390df !important;
}

.bg-focus-lightTeal:focus {
    background-color: #45fffd !important;
}

.bg-focus-lightOlive:focus {
    background-color: #78aa1c !important;
}

.bg-focus-lightOrange:focus {
    background-color: #c29008 !important;
}

.bg-focus-lightPink:focus {
    background-color: #f472d0 !important;
}

.bg-focus-lightRed:focus {
    background-color: #ff2d19 !important;
}

.bg-focus-lightGreen:focus {
    background-color: #7ad61d !important;
}

.bg-focus-grayDark:focus {
    background-color: #333333 !important;
}

.bg-focus-grayDarker:focus {
    background-color: #222222 !important;
}

.bg-focus-grayLight:focus {
    background-color: #999999 !important;
}

.bg-focus-grayLighter:focus {
    background-color: #eeeeee !important;
}

.bg-focus-blue:focus {
    background-color: #00aff0 !important;
}

.fg-focus-black:focus {
    color: #000000 !important;
}

.fg-focus-white:focus {
    color: #ffffff !important;
}

.fg-focus-lime:focus {
    color: #a4c400 !important;
}

.fg-focus-green:focus {
    color: #60a917 !important;
}

.fg-focus-emerald:focus {
    color: #008a00 !important;
}

.fg-focus-teal:focus {
    color: #00aba9 !important;
}

.fg-focus-cyan:focus {
    color: #1ba1e2 !important;
}

.fg-focus-cobalt:focus {
    color: #0050ef !important;
}

.fg-focus-indigo:focus {
    color: #6a00ff !important;
}

.fg-focus-violet:focus {
    color: #aa00ff !important;
}

.fg-focus-pink:focus {
    color: #dc4fad !important;
}

.fg-focus-magenta:focus {
    color: #d80073 !important;
}

.fg-focus-crimson:focus {
    color: #a20025 !important;
}

.fg-focus-red:focus {
    color: #e51400 !important;
}

.fg-focus-orange:focus {
    color: #fa6800 !important;
}

.fg-focus-amber:focus {
    color: #f0a30a !important;
}

.fg-focus-yellow:focus {
    color: #e3c800 !important;
}

.fg-focus-brown:focus {
    color: #825a2c !important;
}

.fg-focus-olive:focus {
    color: #6d8764 !important;
}

.fg-focus-steel:focus {
    color: #647687 !important;
}

.fg-focus-mauve:focus {
    color: #76608a !important;
}

.fg-focus-taupe:focus {
    color: #87794e !important;
}

.fg-focus-gray:focus {
    color: #555555 !important;
}

.fg-focus-dark:focus {
    color: #333333 !important;
}

.fg-focus-darker:focus {
    color: #222222 !important;
}

.fg-focus-transparent:focus {
    color: transparent !important;
}

.fg-focus-darkBrown:focus {
    color: #63362f !important;
}

.fg-focus-darkCrimson:focus {
    color: #640024 !important;
}

.fg-focus-darkMagenta:focus {
    color: #81003c !important;
}

.fg-focus-darkIndigo:focus {
    color: #4b0096 !important;
}

.fg-focus-darkCyan:focus {
    color: #1b6eae !important;
}

.fg-focus-darkCobalt:focus {
    color: #00356a !important;
}

.fg-focus-darkTeal:focus {
    color: #004050 !important;
}

.fg-focus-darkEmerald:focus {
    color: #003e00 !important;
}

.fg-focus-darkGreen:focus {
    color: #128023 !important;
}

.fg-focus-darkOrange:focus {
    color: #bf5a15 !important;
}

.fg-focus-darkRed:focus {
    color: #9a1616 !important;
}

.fg-focus-darkPink:focus {
    color: #9a165a !important;
}

.fg-focus-darkViolet:focus {
    color: #57169a !important;
}

.fg-focus-darkBlue:focus {
    color: #16499a !important;
}

.fg-focus-lightBlue:focus {
    color: #4390df !important;
}

.fg-focus-lightTeal:focus {
    color: #45fffd !important;
}

.fg-focus-lightOlive:focus {
    color: #78aa1c !important;
}

.fg-focus-lightOrange:focus {
    color: #c29008 !important;
}

.fg-focus-lightPink:focus {
    color: #f472d0 !important;
}

.fg-focus-lightRed:focus {
    color: #ff2d19 !important;
}

.fg-focus-lightGreen:focus {
    color: #7ad61d !important;
}

.fg-focus-grayDark:focus {
    color: #333333 !important;
}

.fg-focus-grayDarker:focus {
    color: #222222 !important;
}

.fg-focus-grayLight:focus {
    color: #999999 !important;
}

.fg-focus-grayLighter:focus {
    color: #eeeeee !important;
}

.fg-focus-blue:focus {
    color: #00aff0 !important;
}

.hide {
    display: none !important;
}

.padding1 {
    padding: .5px;
}

.padding1x {
    padding: 1px;
}

.padding2 {
    padding: 2px;
}

.padding5 {
    padding: 5px;
}

.on-left {
    margin-right: 5px;
}

.on-right {
    margin-left: 5px;
}

.on-left-more {
    margin-right: 10px;
}

.on-right-more {
    margin-left: 10px;
}

.bg-khaki-light {
    background-color: #fffae9 !important;
}

.bg-khaki {
    background-color: khaki !important;
}

.gray-scaler {
    -webkit-filter: grayscale(60%);
    -moz-filter: grayscale(60%);
    -ms-filter: grayscale(60%);
    -o-filter: grayscale(60%);
    filter: grayscale(60%);
    filter: gray; /* IE 6-9 */
}

.blur-effect {
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

.loadings {
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
}

@-moz-keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.line {
    border-bottom: 1px dotted black;
}

.unline {
    border-bottom: none;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 50% 0%;
    }
}

.fader {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 8s ease infinite;
    -o-animation: rainbow 8s ease infinite;
    animation: rainbow 8s ease infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-moz-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-o-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

.text-border {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.text-gray-border {
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
}

.text-lightGray-border {
    text-shadow: -1px 0 rgba(211,211,211, 0.5), 0 1px rgba(211,211,211, 0.5), 1px 0 rgba(211,211,211, 0.5), 0 -1px rgba(211,211,211, 0.5);
}


.text-white-border {
    text-shadow: -1px 0 rgba(255,255,255, 0.7), 0 1px rgba(255,255,255, 0.7), 1px 0 rgba(255,255,255, 0.7), 0 -1px rgba(255,255,255, 0.7);
}

.text-dark-border {
    text-shadow: -1px 0 rgba(0,0,0, 0.7), 0 1px rgba(0,0,0, 0.7), 1px 0 rgba(0,0,0, 0.7), 0 -1px rgba(0,0,0, 0.7);
}

.blink {
    animation: blink-animation 1s steps(20, start) infinite;
    -webkit-animation: blink-animation 1s steps(20, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

.modal-backdrop {
    /*background: rgba(200, 200, 200, 0.65);*/
    background-color: #9c9c9c;
    background-color: rgba(0, 0, 0, .6)
}

.white-alpha {
    background: rgba(255, 255, 255, 0.65);
}

.sepia-filter {
    -webkit-filter: opacity(50%);
    filter: opacity(40%);
}

.dark-filter {
    filter: brightness(50%)
}

.dark-hover-filter:hover {
    filter: opacity(80%) !important;
}

.cutscense {
    animation: fade 3s linear;
}

@keyframes fade {
    0%,100% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

.dataTables_filter input {
    color: black;
    background-color: gainsboro;
    border: 1px solid lightgray;
    font-size: 14px;
}

.dataTables_wrapper .dataTables_length select {
    background-color: gainsboro;
    border: 1px solid lightgray;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
}

    /* To show the lines on right
and left sides of the text */
    .divider::after,
    .divider::before {
        content: "";
        border: .5px solid gainsboro;
        flex: 1;
    }

    /* Space on left and right sides of text */
    .divider:not(:empty)::before {
        margin-right: 0.25em;
    }

    .divider:not(:empty)::after {
        margin-left: 0.25em;
    }

.pdf-loader {
    background: #7E7E7E;
    text-align: center;
    display: none;
    padding: 5px;
    overflow: auto
}

    .pdf-loader::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    .pdf-loader::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 8px;
    }

    .pdf-loader::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #B5B5B5;
        border: 1px solid #5E5E5E; /* creates padding around scroll thumb */
    }

select.widthHeight::-webkit-scrollbar {
    width: 9px;
    height: 14px;
}

select.style::-webkit-scrollbar-track {
    border: rgb(180, 180, 180);
    background-color: #ffffff;
}

select.style::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: grey;
    border: 1px solid rgb(193, 193, 193);
}

.hover-table tbody tr {
    cursor: pointer;
}

    .hover-table tbody tr:hover {
        background-color: #eeeeee !important;
    }

.fullwidthx {
    width: 100%
}

.hover {
    cursor: pointer;
}

@media print {
    .printnow {
        display: none;
    }

    @page {
        margin-top: 0;
        margin-bottom: 0;
    }

    body {
        padding-top: 42px;
        padding-bottom: 42px;
    }
}

.modal-loader {
    background-color: rgba(0,0,0,0.15) !important;
    opacity: 0.2 !important;
}

    .modal-loader::after {
        content: '';
        display: block;
        position: absolute;
        left: 47%;
        top: 50%;
        width: 40px;
        height: 40px;
        border-style: solid;
        border: 3px solid black;
        border-top-color: #828282;
        border-width: 3px;
        border-radius: 80%;
        -webkit-animation: spinner-border .8s linear infinite;
        /* Lets make it go round */
        animation: spinner-border .8s linear infinite;
    }

.scroller::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    background-color: #D0D0D0;
}

.scroller::-webkit-scrollbar {
    width: 4px;
    background-color: #D0D0D0;
}

.scroller::-webkit-scrollbar-thumb {
    background-color: #959090;
    border-radius: 2px;
}

/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blink-image {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

span.msg,
span.choose {
    color: #555;
    padding: 5px 0 10px;
    display: inherit
}

.dropdown-scroll {
    max-height: 555px;
    overflow-y: scroll;
}

.dropdown-scroll-mobile {
    max-width: 100px;
    max-height: 230px;
    overflow-y: scroll;
}

.image-container {
    position: relative;
    display: inline-block;
}

    .image-container img {
        display: block;
        width: 100%;
        height: auto;
    }

.overlay-text {
    position: absolute;
    top: 5%;
    left: 5%;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    color: black;
    padding: 0px 2px;
    font-size: 14px;
    text-align: left;
}

.rainbow {
    text-decoration: none !important;
    animation: colorRotate 2.5s linear 0s infinite !important;
}

@keyframes colorRotate {
    from {
        color: #6666ff;
    }

    10% {
        color: #0099ff;
    }

    50% {
        color: #00ff00;
    }

    75% {
        color: #ff3399;
    }

    100% {
        color: #6666ff;
    }
}

.text-rainbow {
    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite !important;
    background-size: 400% 100% !important;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

/* customizable snowflake styling */
.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@-webkit-keyframes snowflakes-shake {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }

    50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
}

@keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@keyframes snowflakes-shake {
    0% {
        transform: translateX(0px)
    }

    50% {
        transform: translateX(80px)
    }

    100% {
        transform: translateX(0px)
    }
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 9999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration: 10s,3s;
    -webkit-animation-timing-function: linear,ease-in-out;
    -webkit-animation-iteration-count: infinite,infinite;
    -webkit-animation-play-state: running,running;
    animation-name: snowflakes-fall,snowflakes-shake;
    animation-duration: 10s,3s;
    animation-timing-function: linear,ease-in-out;
    animation-iteration-count: infinite,infinite;
    animation-play-state: running,running
}

    .snowflake:nth-of-type(0) {
        left: 1%;
        -webkit-animation-delay: 0s,0s;
        animation-delay: 0s,0s
    }

    .snowflake:nth-of-type(1) {
        left: 10%;
        -webkit-animation-delay: 1s,1s;
        animation-delay: 1s,1s
    }

    .snowflake:nth-of-type(2) {
        left: 20%;
        -webkit-animation-delay: 6s,.5s;
        animation-delay: 6s,.5s
    }

    .snowflake:nth-of-type(3) {
        left: 30%;
        -webkit-animation-delay: 4s,2s;
        animation-delay: 4s,2s
    }

    .snowflake:nth-of-type(4) {
        left: 40%;
        -webkit-animation-delay: 2s,2s;
        animation-delay: 2s,2s
    }

    .snowflake:nth-of-type(5) {
        left: 50%;
        -webkit-animation-delay: 8s,3s;
        animation-delay: 8s,3s
    }

    .snowflake:nth-of-type(6) {
        left: 60%;
        -webkit-animation-delay: 6s,2s;
        animation-delay: 6s,2s
    }

    .snowflake:nth-of-type(7) {
        left: 70%;
        -webkit-animation-delay: 2.5s,1s;
        animation-delay: 2.5s,1s
    }

    .snowflake:nth-of-type(8) {
        left: 80%;
        -webkit-animation-delay: 1s,0s;
        animation-delay: 1s,0s
    }

    .snowflake:nth-of-type(9) {
        left: 90%;
        -webkit-animation-delay: 3s,1.5s;
        animation-delay: 3s,1.5s
    }

.border-gradient {
    --borderWidth: 3px;
    background: #1D1F20;
    position: relative;
    border-radius: var(--borderWidth);
}

    .border-gradient:after {
        content: '';
        position: absolute;
        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
        border-radius: calc(2 * var(--borderWidth));
        z-index: -1;
        animation: animatedgradient 3s ease alternate infinite;
        background-size: 300% 300%;
    }
@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.text-green-g {
    background: linear-gradient(90deg, rgba(255,223,110,1) 0%, rgba(236,178,90,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.scroller-fade {
    /* -webkit-mask-image: linear-gradient(white, transparent);
    mask-image: linear-gradient(white 75%, transparent); */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 12%);
    mask-image: linear-gradient(to top, transparent 0%, black 12%);
}

.bg-grid {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
    background-size: 25px 25px;
    -webkit-animation: scrolling 5s linear infinite;
    -moz-animation: scrolling 5s linear infinite;
    -o-animation: scrolling 5s linear infinite;
    animation: scrolling 5s linear infinite;
}

@-webkit-keyframes scrolling {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 100%;
    }
}

.animate-charcter {
    background-image: linear-gradient( -225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100% );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

.icon-over-img {
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: 0;
    margin-top: 0;
    transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
}
.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: lightgray;
    border-radius: 2px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.v-align {
    vertical-align: middle;
}

.text-slider {
    background-image: linear-gradient( -225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100% );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}