:root {
    --ThemeColor: #0A2B52;
    --ThemeColorEdge: #0046DF;
    --ThemeColorHover: #135DFF;
    --ThemeColorBright: #1961FF;
    --ThemeColorLink: #004EF9;
    --ThemeRingRgb: 70, 128, 255;
    --ThemeChatAccent: var(--ThemeColor);
}

.DarkMode {
    --ThemeChatAccent: var(--ThemeColorBright);
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/Poppins-300-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/Poppins-300-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Poppins-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Poppins-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Poppins-800-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Poppins-800-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.shadow {
    -webkit-box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1) !important;
}
.text-uppercase {
    letter-spacing: 0.2em;
}
.text-lg {
    font-size: 1.4rem !important;
}
.text-base {
    font-size: 0.9rem !important;
}
.text-sm {
    font-size: 0.7875rem !important;
}
.roundy {
    border-radius: 50px;
}
.border {
    border: 1px solid #eee;
}
.rounded {
    border-radius: 0.5rem !important;
}
.push {
    margin-left: 6rem;
}
.headings-font-family {
    font-family: "Poppins", sans-serif !important;
}
.text-gray {
    color: #adb5bd;
}
.dot {
    max-width: 10px;
    min-width: 10px;
    max-height: 10px;
    min-height: 10px;
    border-radius: 50%;
}
.dot-sm {
    max-width: 0.5rem;
    min-width: 0.5rem;
    max-height: 0.5rem;
    min-height: 0.5rem;
    border-radius: 50%;
}
a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.page-holder {
    overflow-x: hidden;
    min-height: calc(100vh - 72px);
}
.icon {
    min-width: 2.2rem;
    max-width: 2.2rem;
    min-height: 2.2rem;
    max-height: 2.2rem;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.icon-lg {
    min-width: 3rem;
    max-width: 3rem;
    min-height: 3rem;
    max-height: 3rem;
}
.icon-sm {
    min-width: 1.7rem;
    max-width: 1.7rem;
    min-height: 1.7rem;
    max-height: 1.7rem;
    font-size: 0.7rem;
}
button {
    cursor: pointer;
    outline: none !important;
}
.smaller {
    font-size: 0.7rem;
}
.no-anchor-style {
    color: inherit !important;
    text-decoration: none !important;
}
.line {
    height: 1px;
    border-bottom: 1px dashed #eee;
    margin: 2rem 0;
}
.btn:not([class*='outline']) {
    color: #fff;
}
.btn:not([class*='outline']):hover,
.btn:not([class*='outline']):focus {
    color: #fff !important;
}
.border-thick {
    border-width: 4px !important;
}
.no-shadow {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.input-group-text {
    border-radius: 2rem;
}
.bg-hover-gradient-primary {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-primary:hover {
    color: #fff !important;
}
.bg-hover-gradient-primary:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-primary:hover::before {
    opacity: 1;
}
.bg-hover-gradient-primary::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(var(--ThemeColor)), to(var(--ThemeColorEdge))) !important;
    background: linear-gradient(to left, var(--ThemeColor), var(--ThemeColorEdge)) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-primary {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-primary:hover {
    background: var(--ThemeColor) !important;
    color: #fff !important;
}
.bg-hover-primary:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-primary {
    background: -webkit-gradient(linear, right top, left top, from(var(--ThemeColor)), to(var(--ThemeColorEdge))) !important;
    background: linear-gradient(to left, var(--ThemeColor), var(--ThemeColorEdge)) !important;
}
.bg-hover-gradient-secondary {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-secondary:hover {
    color: #fff !important;
}
.bg-hover-gradient-secondary:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-secondary:hover::before {
    opacity: 1;
}
.bg-hover-gradient-secondary::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#6c757d), to(#3d4246)) !important;
    background: linear-gradient(to left, #6c757d, #3d4246) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-secondary {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-secondary:hover {
    background: #6c757d !important;
    color: #fff !important;
}
.bg-hover-secondary:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-secondary {
    background: -webkit-gradient(linear, right top, left top, from(#6c757d), to(#3d4246)) !important;
    background: linear-gradient(to left, #6c757d, #3d4246) !important;
}
.bg-hover-gradient-success {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-success:hover {
    color: #fff !important;
}
.bg-hover-gradient-success:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-success:hover::before {
    opacity: 1;
}
.bg-hover-gradient-success::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#28a745), to(#145523)) !important;
    background: linear-gradient(to left, #28a745, #145523) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-success {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-success:hover {
    background: #28a745 !important;
    color: #fff !important;
}
.bg-hover-success:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-success {
    background: -webkit-gradient(linear, right top, left top, from(#28a745), to(#145523)) !important;
    background: linear-gradient(to left, #28a745, #145523) !important;
}
.bg-hover-gradient-info {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-info:hover {
    color: #fff !important;
}
.bg-hover-gradient-info:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-info:hover::before {
    opacity: 1;
}
.bg-hover-gradient-info::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#17a2b8), to(#0c525d)) !important;
    background: linear-gradient(to left, #17a2b8, #0c525d) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-info {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-info:hover {
    background: #17a2b8 !important;
    color: #fff !important;
}
.bg-hover-info:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-info {
    background: -webkit-gradient(linear, right top, left top, from(#17a2b8), to(#0c525d)) !important;
    background: linear-gradient(to left, #17a2b8, #0c525d) !important;
}
.bg-hover-gradient-warning {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-warning:hover {
    color: #fff !important;
}
.bg-hover-gradient-warning:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-warning:hover::before {
    opacity: 1;
}
.bg-hover-gradient-warning::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#ffc107), to(#a07800)) !important;
    background: linear-gradient(to left, #ffc107, #a07800) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-warning {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-warning:hover {
    background: #ffc107 !important;
    color: #fff !important;
}
.bg-hover-warning:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-warning {
    background: -webkit-gradient(linear, right top, left top, from(#ffc107), to(#a07800)) !important;
    background: linear-gradient(to left, #ffc107, #a07800) !important;
}
.bg-hover-gradient-danger {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-danger:hover {
    color: #fff !important;
}
.bg-hover-gradient-danger:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-danger:hover::before {
    opacity: 1;
}
.bg-hover-gradient-danger::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#dc3545), to(#921925)) !important;
    background: linear-gradient(to left, #dc3545, #921925) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-danger {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-danger:hover {
    background: #dc3545 !important;
    color: #fff !important;
}
.bg-hover-danger:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-danger {
    background: -webkit-gradient(linear, right top, left top, from(#dc3545), to(#921925)) !important;
    background: linear-gradient(to left, #dc3545, #921925) !important;
}
.bg-hover-gradient-light {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-light:hover {
    color: #fff !important;
}
.bg-hover-gradient-light:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-light:hover::before {
    opacity: 1;
}
.bg-hover-gradient-light::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#f8f9fa), to(#bdc6d0)) !important;
    background: linear-gradient(to left, #f8f9fa, #bdc6d0) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-light {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-light:hover {
    background: #f8f9fa !important;
    color: #fff !important;
}
.bg-hover-light:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-light {
    background: -webkit-gradient(linear, right top, left top, from(#f8f9fa), to(#bdc6d0)) !important;
    background: linear-gradient(to left, #f8f9fa, #bdc6d0) !important;
}
.bg-hover-gradient-violet {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-violet:hover {
    color: #fff !important;
}
.bg-hover-gradient-violet:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-violet:hover::before {
    opacity: 1;
}
.bg-hover-gradient-violet::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#DF99CA), to(#c74ba2)) !important;
    background: linear-gradient(to left, #DF99CA, #c74ba2) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-violet {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-violet:hover {
    background: #DF99CA !important;
    color: #fff !important;
}
.bg-hover-violet:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-violet {
    background: -webkit-gradient(linear, right top, left top, from(#DF99CA), to(#c74ba2)) !important;
    background: linear-gradient(to left, #DF99CA, #c74ba2) !important;
}
.bg-hover-gradient-blue {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-blue:hover {
    color: #fff !important;
}
.bg-hover-gradient-blue:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-blue:hover::before {
    opacity: 1;
}
.bg-hover-gradient-blue::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#4C84FF), to(#0048e5)) !important;
    background: linear-gradient(to left, #4C84FF, #0048e5) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-blue {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-blue:hover {
    background: #4C84FF !important;
    color: #fff !important;
}
.bg-hover-blue:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-blue {
    background: -webkit-gradient(linear, right top, left top, from(#4C84FF), to(#0048e5)) !important;
    background: linear-gradient(to left, #4C84FF, #0048e5) !important;
}
.bg-hover-gradient-green {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-green:hover {
    color: #fff !important;
}
.bg-hover-gradient-green:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-green:hover::before {
    opacity: 1;
}
.bg-hover-gradient-green::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#7CF29C), to(#1fe956)) !important;
    background: linear-gradient(to left, #7CF29C, #1fe956) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-green {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-green:hover {
    background: #7CF29C !important;
    color: #fff !important;
}
.bg-hover-green:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-green {
    background: -webkit-gradient(linear, right top, left top, from(#7CF29C), to(#1fe956)) !important;
    background: linear-gradient(to left, #7CF29C, #1fe956) !important;
}
.bg-hover-gradient-red {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-red:hover {
    color: #fff !important;
}
.bg-hover-gradient-red:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-red:hover::before {
    opacity: 1;
}
.bg-hover-gradient-red::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#F0404C), to(#bb0f1a)) !important;
    background: linear-gradient(to left, #F0404C, #bb0f1a) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-red {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-red:hover {
    background: #F0404C !important;
    color: #fff !important;
}
.bg-hover-red:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-red {
    background: -webkit-gradient(linear, right top, left top, from(#F0404C), to(#bb0f1a)) !important;
    background: linear-gradient(to left, #F0404C, #bb0f1a) !important;
}
.bg-hover-gradient-gray-100 {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-gray-100:hover {
    color: #fff !important;
}
.bg-hover-gradient-gray-100:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-gray-100:hover::before {
    opacity: 1;
}
.bg-hover-gradient-gray-100::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#f8f9fa), to(#bdc6d0)) !important;
    background: linear-gradient(to left, #f8f9fa, #bdc6d0) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-gray-100 {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-gray-100:hover {
    background: #f8f9fa !important;
    color: #fff !important;
}
.bg-hover-gray-100:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-gray-100 {
    background: -webkit-gradient(linear, right top, left top, from(#f8f9fa), to(#bdc6d0)) !important;
    background: linear-gradient(to left, #f8f9fa, #bdc6d0) !important;
}
.bg-hover-gradient-gray-200 {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-gray-200:hover {
    color: #fff !important;
}
.bg-hover-gradient-gray-200:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-gray-200:hover::before {
    opacity: 1;
}
.bg-hover-gradient-gray-200::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#e9ecef), to(#aeb9c4)) !important;
    background: linear-gradient(to left, #e9ecef, #aeb9c4) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-gray-200 {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-gray-200:hover {
    background: #e9ecef !important;
    color: #fff !important;
}
.bg-hover-gray-200:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-gray-200 {
    background: -webkit-gradient(linear, right top, left top, from(#e9ecef), to(#aeb9c4)) !important;
    background: linear-gradient(to left, #e9ecef, #aeb9c4) !important;
}
.bg-hover-gradient-gray-300 {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-gray-300:hover {
    color: #fff !important;
}
.bg-hover-gradient-gray-300:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-gray-300:hover::before {
    opacity: 1;
}
.bg-hover-gradient-gray-300::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#dee2e6), to(#a4afba)) !important;
    background: linear-gradient(to left, #dee2e6, #a4afba) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-gray-300 {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-gray-300:hover {
    background: #dee2e6 !important;
    color: #fff !important;
}
.bg-hover-gray-300:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-gray-300 {
    background: -webkit-gradient(linear, right top, left top, from(#dee2e6), to(#a4afba)) !important;
    background: linear-gradient(to left, #dee2e6, #a4afba) !important;
}
.bg-hover-gradient-gray-400 {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-gray-400:hover {
    color: #fff !important;
}
.bg-hover-gradient-gray-400:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-gray-400:hover::before {
    opacity: 1;
}
.bg-hover-gradient-gray-400::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#ced4da), to(#94a1ae)) !important;
    background: linear-gradient(to left, #ced4da, #94a1ae) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-gray-400 {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-gray-400:hover {
    background: #ced4da !important;
    color: #fff !important;
}
.bg-hover-gray-400:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-gray-400 {
    background: -webkit-gradient(linear, right top, left top, from(#ced4da), to(#94a1ae)) !important;
    background: linear-gradient(to left, #ced4da, #94a1ae) !important;
}
.bg-hover-gradient-gray-500 {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-gray-500:hover {
    color: #fff !important;
}
.bg-hover-gradient-gray-500:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-gray-500:hover::before {
    opacity: 1;
}
.bg-hover-gradient-gray-500::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#adb5bd), to(#748290)) !important;
    background: linear-gradient(to left, #adb5bd, #748290) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-gray-500 {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-gray-500:hover {
    background: #adb5bd !important;
    color: #fff !important;
}
.bg-hover-gray-500:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-gray-500 {
    background: -webkit-gradient(linear, right top, left top, from(#adb5bd), to(#748290)) !important;
    background: linear-gradient(to left, #adb5bd, #748290) !important;
}
.bg-hover-gradient-dark {
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.bg-hover-gradient-dark:hover {
    color: #fff !important;
}
.bg-hover-gradient-dark:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.bg-hover-gradient-dark:hover::before {
    opacity: 1;
}
.bg-hover-gradient-dark::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: -webkit-gradient(linear, right top, left top, from(#343a40), to(#060708)) !important;
    background: linear-gradient(to left, #343a40, #060708) !important;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.bg-hover-dark {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.bg-hover-dark:hover {
    background: #343a40 !important;
    color: #fff !important;
}
.bg-hover-dark:hover [class*='text-']:not(.exclode) {
    color: #fff !important;
}
.gradient-dark {
    background: -webkit-gradient(linear, right top, left top, from(#343a40), to(#060708)) !important;
    background: linear-gradient(to left, #343a40, #060708) !important;
}
.bg-primary .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-primary .checkbox-template::after {
    background: #fff !important;
}
.bg-secondary .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-secondary .checkbox-template::after {
    background: #fff !important;
}
.bg-success .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-success .checkbox-template::after {
    background: #fff !important;
}
.bg-info .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-info .checkbox-template::after {
    background: #fff !important;
}
.bg-warning .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-warning .checkbox-template::after {
    background: #fff !important;
}
.bg-danger .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-danger .checkbox-template::after {
    background: #fff !important;
}
.bg-light .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-light .checkbox-template::after {
    background: #fff !important;
}
.bg-violet .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-violet .checkbox-template::after {
    background: #fff !important;
}
.bg-blue .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-blue .checkbox-template::after {
    background: #fff !important;
}
.bg-green .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-green .checkbox-template::after {
    background: #fff !important;
}
.bg-red .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-red .checkbox-template::after {
    background: #fff !important;
}
.bg-gray-100 .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-gray-100 .checkbox-template::after {
    background: #fff !important;
}
.bg-gray-200 .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-gray-200 .checkbox-template::after {
    background: #fff !important;
}
.bg-gray-300 .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-gray-300 .checkbox-template::after {
    background: #fff !important;
}
.bg-gray-400 .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-gray-400 .checkbox-template::after {
    background: #fff !important;
}
.bg-gray-500 .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-gray-500 .checkbox-template::after {
    background: #fff !important;
}
.bg-dark .checkbox-template::before {
    border: 1px solid #ddd !important;
}
.bg-dark .checkbox-template::after {
    background: #fff !important;
}
.credit-card {
    padding-top: 66%;
    height: 0;
    position: relative;
}
.credit-card .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.navbar .dropdown-toggle::after {
    display: none;
}
.navbar .dropdown-menu:not(.LangMenu):not(.UserMenu) {
    left: auto;
    top: 101%;
    right: 0;
    border: none;
}
.navbar .LangMenu,
.navbar .UserMenu {
    left: auto;
    top: 101%;
    right: 0;
}
.navbar .navbar-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media (max-width: 991.98px) {
    .navbar .navbar-brand {
        position: static;
        -webkit-transform: none;
        transform: none;
    }
}
.notification-icon {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ThemeColor);
    position: absolute;
    top: 0.4rem;
    right: 0;
}
.sidebar {
    width: 16rem;
    background: #fff;
    -webkit-box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.sidebar.shrink {
    width: 8rem;
    text-align: center;
}
.sidebar.shrink .sidebar-link {
    display: block;
}
.sidebar.shrink .sidebar-link span {
    display: block;
    font-size: 0.75rem;
}
.sidebar.shrink .sidebar-link i {
    margin: 0 !important;
}
.sidebar.shrink .collapse .sidebar-link,
.sidebar.shrink .collapsing .sidebar-link {
    -webkit-transition: none;
    transition: none;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
}

/* The signed-in name heads the menu. It takes the same side padding as a
   sidebar link so the initials line up with the link icons, and the name
   itself is capped at two lines - a long one wraps once and then clips,
   with the full text on the element's title. */
.SideUser {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    padding: 0 1.5rem 0.875rem;
    margin-bottom: 0.625rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.SideUserAvatar {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--ThemeColorEdge);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}
.SideUserName {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    /* the given name and the family name take a line each, so the block is the
       same height for every name and the menu below never shifts */
    min-height: 2.5em;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: #2A3142;
}
.SideUserFirst,
.SideUserLast {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.SideUserLast:empty {
    display: none;
}
/* Narrow rail: the initials sit above the name, both centred. */
.sidebar.shrink .SideUser {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.sidebar.shrink .SideUserAvatar {
    margin-right: 0;
    margin-bottom: 6px;
}
.sidebar.shrink .SideUserName {
    width: 100%;
    font-size: 0.75rem;
    text-align: center;
}
@media (max-width: 1199.98px) {
    .sidebar {
        width: 6rem;
        text-align: center;
        margin-left: -6rem;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }
    .sidebar .sidebar-link {
        display: block;
    }
    .sidebar .sidebar-link span {
        display: block;
        font-size: 0.75rem;
    }
    .sidebar .sidebar-link i {
        margin: 0 !important;
    }
}
.sidebar.show {
    margin-left: 0;
}
.sidebar-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    padding: 0.5rem 1.5rem;
}
.sidebar-link[data-toggle="collapse"] {
    position: relative;
}
.sidebar-link[data-toggle="collapse"]::before {
    display: block;
    position: absolute;
    top: 50%;
    right: 1rem;
    color: #aaa;
    font-family: 'Font Awesome 5 Free';
    content: '\f104';
    font-weight: 900;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.sidebar-link[data-toggle="collapse"][aria-expanded='true']::before {
    content: '\f107';
}
.sidebar-link:hover {
    text-decoration: none;
    background: #f5f5f5;
}
.sidebar-link.active,
.sidebar-link:focus {
    background: var(--ThemeColor);
    color: #fff !important;
    text-decoration: none;
}
.sidebar-link.active::before,
.sidebar-link:focus::before {
    color: #fff;
}
.sidebar-link.active i,
.sidebar-link:focus i {
    color: #fff !important;
}
.sidebar-link i {
    font-size: 1.5rem;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.sidebar-link span {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: inline-block;
}
.overflow-hidden {
    overflow: hidden !important;
}
.form-control-label {
    font-size: .9rem;
    color: #6c757d;
}
#style-switch-button {
    position: fixed;
    top: 150px;
    right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 2;
}
#style-switch {
    width: 300px;
    padding: 20px;
    position: fixed;
    top: 200px;
    right: 0;
    background: #fff;
    border: solid 1px #e9ecef;
    z-index: 2000;
}
#style-switch h4 {
    color: #495057;
}
.navbar {
    padding: 0.5rem 1rem;
}
.navbar-brand {
    display: inline-block;
    padding-top: 0.33125rem;
    padding-bottom: 0.33125rem;
    margin-right: 1rem;
    font-size: 1.125rem;
}
.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.125rem;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 2rem;
}
.navbar-light .navbar-brand {
    color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
    color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.5);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0, 0, 0, 0.7);
}
.navbar-light .navbar-nav .nav-link.disabled {
    color: rgba(0, 0, 0, 0.3);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
    color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-light .navbar-text {
    color: rgba(0, 0, 0, 0.5);
}
.navbar-dark .navbar-brand {
    color: #fff;
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
}
.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-dark .navbar-text {
    color: rgba(255, 255, 255, 0.5);
}
.btn {
    font-weight: 400;
    border: 1px solid transparent;
    padding: 0.4rem 1.8rem;
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: 2rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
    .btn {
        -webkit-transition: none;
        transition: none;
    }
}
.btn:focus,
.btn.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.25);
    box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.25);
}
.btn.disabled,
.btn:disabled {
    opacity: 0.65;
}
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
    background-image: none;
}
.btn-link {
    font-weight: 400;
    color: var(--ThemeColor);
}
.btn-link:hover {
    color: var(--ThemeColorLink);
    text-decoration: underline;
}
.btn-link:focus,
.btn-link.focus {
    text-decoration: underline;
}
.btn-link:disabled,
.btn-link.disabled {
    color: #6c757d;
}
.btn-primary {
    color: #fff;
    background-color: var(--ThemeColor);
    border-color: var(--ThemeColor);
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--ThemeColor);
    border-color: var(--ThemeColorHover);
}
.btn-primary:focus,
.btn-primary.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.5);
}
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--ThemeColor);
    border-color: var(--ThemeColor);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--ThemeColor);
    border-color: var(--ThemeColor);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.5);
}
.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}
.btn-secondary:focus,
.btn-secondary.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-secondary.disabled,
.btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b;
}
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}
.btn-success:focus,
.btn-success.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
.btn-success.disabled,
.btn-success:disabled {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430;
}
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}
.btn-info:focus,
.btn-info.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
.btn-info.disabled,
.btn-info:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: #117a8b;
    border-color: #10707f;
}
.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}
.btn-warning:focus,
.btn-warning.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
.btn-warning.disabled,
.btn-warning:disabled {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
    color: #212529;
    background-color: #d39e00;
    border-color: #c69500;
}
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}
.btn-danger:focus,
.btn-danger.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
.btn-danger.disabled,
.btn-danger:disabled {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #bd2130;
    border-color: #b21f2d;
}
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}
.btn-light:focus,
.btn-light.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-light.disabled,
.btn-light:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
    color: #212529;
    background-color: #dae0e5;
    border-color: #d3d9df;
}
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-violet {
    color: #212529;
    background-color: #DF99CA;
    border-color: #DF99CA;
}
.btn-violet:hover {
    color: #212529;
    background-color: #d67cbb;
    border-color: #d372b6;
}
.btn-violet:focus,
.btn-violet.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(223, 153, 202, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(223, 153, 202, 0.5);
}
.btn-violet.disabled,
.btn-violet:disabled {
    color: #212529;
    background-color: #DF99CA;
    border-color: #DF99CA;
}
.btn-violet:not(:disabled):not(.disabled):active,
.btn-violet:not(:disabled):not(.disabled).active,
.show > .btn-violet.dropdown-toggle {
    color: #212529;
    background-color: #d372b6;
    border-color: #d068b1;
}
.btn-violet:not(:disabled):not(.disabled):active:focus,
.btn-violet:not(:disabled):not(.disabled).active:focus,
.show > .btn-violet.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(223, 153, 202, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(223, 153, 202, 0.5);
}
.btn-blue {
    color: #fff;
    background-color: #4C84FF;
    border-color: #4C84FF;
}
.btn-blue:hover {
    color: #fff;
    background-color: #266aff;
    border-color: var(--ThemeColorBright);
}
.btn-blue:focus,
.btn-blue.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 132, 255, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(76, 132, 255, 0.5);
}
.btn-blue.disabled,
.btn-blue:disabled {
    color: #fff;
    background-color: #4C84FF;
    border-color: #4C84FF;
}
.btn-blue:not(:disabled):not(.disabled):active,
.btn-blue:not(:disabled):not(.disabled).active,
.show > .btn-blue.dropdown-toggle {
    color: #fff;
    background-color: var(--ThemeColorBright);
    border-color: #0c58ff;
}
.btn-blue:not(:disabled):not(.disabled):active:focus,
.btn-blue:not(:disabled):not(.disabled).active:focus,
.show > .btn-blue.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 132, 255, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(76, 132, 255, 0.5);
}
.btn-green {
    color: #212529;
    background-color: #7CF29C;
    border-color: #7CF29C;
}
.btn-green:hover {
    color: #212529;
    background-color: #59ef82;
    border-color: #4eed79;
}
.btn-green:focus,
.btn-green.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(124, 242, 156, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(124, 242, 156, 0.5);
}
.btn-green.disabled,
.btn-green:disabled {
    color: #212529;
    background-color: #7CF29C;
    border-color: #7CF29C;
}
.btn-green:not(:disabled):not(.disabled):active,
.btn-green:not(:disabled):not(.disabled).active,
.show > .btn-green.dropdown-toggle {
    color: #212529;
    background-color: #4eed79;
    border-color: #42ec70;
}
.btn-green:not(:disabled):not(.disabled):active:focus,
.btn-green:not(:disabled):not(.disabled).active:focus,
.show > .btn-green.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(124, 242, 156, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(124, 242, 156, 0.5);
}
.btn-red {
    color: #fff;
    background-color: #F0404C;
    border-color: #F0404C;
}
.btn-red:hover {
    color: #fff;
    background-color: #ed1d2b;
    border-color: #eb1221;
}
.btn-red:focus,
.btn-red.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(240, 64, 76, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(240, 64, 76, 0.5);
}
.btn-red.disabled,
.btn-red:disabled {
    color: #fff;
    background-color: #F0404C;
    border-color: #F0404C;
}
.btn-red:not(:disabled):not(.disabled):active,
.btn-red:not(:disabled):not(.disabled).active,
.show > .btn-red.dropdown-toggle {
    color: #fff;
    background-color: #eb1221;
    border-color: #df111f;
}
.btn-red:not(:disabled):not(.disabled):active:focus,
.btn-red:not(:disabled):not(.disabled).active:focus,
.show > .btn-red.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(240, 64, 76, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(240, 64, 76, 0.5);
}
.btn-gray-100 {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-gray-100:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}
.btn-gray-100:focus,
.btn-gray-100.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-gray-100.disabled,
.btn-gray-100:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-gray-100:not(:disabled):not(.disabled):active,
.btn-gray-100:not(:disabled):not(.disabled).active,
.show > .btn-gray-100.dropdown-toggle {
    color: #212529;
    background-color: #dae0e5;
    border-color: #d3d9df;
}
.btn-gray-100:not(:disabled):not(.disabled):active:focus,
.btn-gray-100:not(:disabled):not(.disabled).active:focus,
.show > .btn-gray-100.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-gray-200 {
    color: #212529;
    background-color: #e9ecef;
    border-color: #e9ecef;
}
.btn-gray-200:hover {
    color: #212529;
    background-color: #d3d9df;
    border-color: #cbd3da;
}
.btn-gray-200:focus,
.btn-gray-200.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
}
.btn-gray-200.disabled,
.btn-gray-200:disabled {
    color: #212529;
    background-color: #e9ecef;
    border-color: #e9ecef;
}
.btn-gray-200:not(:disabled):not(.disabled):active,
.btn-gray-200:not(:disabled):not(.disabled).active,
.show > .btn-gray-200.dropdown-toggle {
    color: #212529;
    background-color: #cbd3da;
    border-color: #c4ccd4;
}
.btn-gray-200:not(:disabled):not(.disabled):active:focus,
.btn-gray-200:not(:disabled):not(.disabled).active:focus,
.show > .btn-gray-200.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
}
.btn-gray-300 {
    color: #212529;
    background-color: #dee2e6;
    border-color: #dee2e6;
}
.btn-gray-300:hover {
    color: #212529;
    background-color: #c8cfd6;
    border-color: #c1c9d0;
}
.btn-gray-300:focus,
.btn-gray-300.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
}
.btn-gray-300.disabled,
.btn-gray-300:disabled {
    color: #212529;
    background-color: #dee2e6;
    border-color: #dee2e6;
}
.btn-gray-300:not(:disabled):not(.disabled):active,
.btn-gray-300:not(:disabled):not(.disabled).active,
.show > .btn-gray-300.dropdown-toggle {
    color: #212529;
    background-color: #c1c9d0;
    border-color: #bac2cb;
}
.btn-gray-300:not(:disabled):not(.disabled):active:focus,
.btn-gray-300:not(:disabled):not(.disabled).active:focus,
.show > .btn-gray-300.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
}
.btn-gray-400 {
    color: #212529;
    background-color: #ced4da;
    border-color: #ced4da;
}
.btn-gray-400:hover {
    color: #212529;
    background-color: #b8c1ca;
    border-color: #b1bbc4;
}
.btn-gray-400:focus,
.btn-gray-400.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5);
}
.btn-gray-400.disabled,
.btn-gray-400:disabled {
    color: #212529;
    background-color: #ced4da;
    border-color: #ced4da;
}
.btn-gray-400:not(:disabled):not(.disabled):active,
.btn-gray-400:not(:disabled):not(.disabled).active,
.show > .btn-gray-400.dropdown-toggle {
    color: #212529;
    background-color: #b1bbc4;
    border-color: #aab4bf;
}
.btn-gray-400:not(:disabled):not(.disabled):active:focus,
.btn-gray-400:not(:disabled):not(.disabled).active:focus,
.show > .btn-gray-400.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5);
}
.btn-gray-500 {
    color: #212529;
    background-color: #adb5bd;
    border-color: #adb5bd;
}
.btn-gray-500:hover {
    color: #212529;
    background-color: #98a2ac;
    border-color: #919ca6;
}
.btn-gray-500:focus,
.btn-gray-500.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
}
.btn-gray-500.disabled,
.btn-gray-500:disabled {
    color: #212529;
    background-color: #adb5bd;
    border-color: #adb5bd;
}
.btn-gray-500:not(:disabled):not(.disabled):active,
.btn-gray-500:not(:disabled):not(.disabled).active,
.show > .btn-gray-500.dropdown-toggle {
    color: #212529;
    background-color: #919ca6;
    border-color: #8a95a1;
}
.btn-gray-500:not(:disabled):not(.disabled):active:focus,
.btn-gray-500:not(:disabled):not(.disabled).active:focus,
.show > .btn-gray-500.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
}
.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
}
.btn-dark:focus,
.btn-dark.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
.btn-dark.disabled,
.btn-dark:disabled {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #1d2124;
    border-color: #171a1d;
}
.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
.btn-outline-primary {
    color: var(--ThemeColor);
    background-color: transparent;
    background-image: none;
    border-color: var(--ThemeColor);
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--ThemeColor);
    border-color: var(--ThemeColor);
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.5);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--ThemeColor);
    background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--ThemeColor);
    border-color: var(--ThemeColor);
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.5);
}
.btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    background-image: none;
    border-color: #6c757d;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: #6c757d;
    background-color: transparent;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-outline-success {
    color: #28a745;
    background-color: transparent;
    background-image: none;
    border-color: #28a745;
}
.btn-outline-success:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-outline-success:focus,
.btn-outline-success.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
.btn-outline-success.disabled,
.btn-outline-success:disabled {
    color: #28a745;
    background-color: transparent;
}
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
.btn-outline-info {
    color: #17a2b8;
    background-color: transparent;
    background-image: none;
    border-color: #17a2b8;
}
.btn-outline-info:hover {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-outline-info:focus,
.btn-outline-info.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
.btn-outline-info.disabled,
.btn-outline-info:disabled {
    color: #17a2b8;
    background-color: transparent;
}
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
.btn-outline-warning {
    color: #ffc107;
    background-color: transparent;
    background-image: none;
    border-color: #ffc107;
}
.btn-outline-warning:hover {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-outline-warning:focus,
.btn-outline-warning.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
    color: #ffc107;
    background-color: transparent;
}
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
.btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    background-image: none;
    border-color: #dc3545;
}
.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-outline-danger:focus,
.btn-outline-danger.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
    color: #dc3545;
    background-color: transparent;
}
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
.btn-outline-light {
    color: #f8f9fa;
    background-color: transparent;
    background-image: none;
    border-color: #f8f9fa;
}
.btn-outline-light:hover {
    color: #fff;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-outline-light:focus,
.btn-outline-light.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-outline-light.disabled,
.btn-outline-light:disabled {
    color: #f8f9fa;
    background-color: transparent;
}
.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-outline-violet {
    color: #DF99CA;
    background-color: transparent;
    background-image: none;
    border-color: #DF99CA;
}
.btn-outline-violet:hover {
    color: #fff;
    background-color: #DF99CA;
    border-color: #DF99CA;
}
.btn-outline-violet:focus,
.btn-outline-violet.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(223, 153, 202, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(223, 153, 202, 0.5);
}
.btn-outline-violet.disabled,
.btn-outline-violet:disabled {
    color: #DF99CA;
    background-color: transparent;
}
.btn-outline-violet:not(:disabled):not(.disabled):active,
.btn-outline-violet:not(:disabled):not(.disabled).active,
.show > .btn-outline-violet.dropdown-toggle {
    color: #212529;
    background-color: #DF99CA;
    border-color: #DF99CA;
}
.btn-outline-violet:not(:disabled):not(.disabled):active:focus,
.btn-outline-violet:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-violet.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(223, 153, 202, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(223, 153, 202, 0.5);
}
.btn-outline-blue {
    color: #4C84FF;
    background-color: transparent;
    background-image: none;
    border-color: #4C84FF;
}
.btn-outline-blue:hover {
    color: #fff;
    background-color: #4C84FF;
    border-color: #4C84FF;
}
.btn-outline-blue:focus,
.btn-outline-blue.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 132, 255, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(76, 132, 255, 0.5);
}
.btn-outline-blue.disabled,
.btn-outline-blue:disabled {
    color: #4C84FF;
    background-color: transparent;
}
.btn-outline-blue:not(:disabled):not(.disabled):active,
.btn-outline-blue:not(:disabled):not(.disabled).active,
.show > .btn-outline-blue.dropdown-toggle {
    color: #fff;
    background-color: #4C84FF;
    border-color: #4C84FF;
}
.btn-outline-blue:not(:disabled):not(.disabled):active:focus,
.btn-outline-blue:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-blue.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 132, 255, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(76, 132, 255, 0.5);
}
.btn-outline-green {
    color: #7CF29C;
    background-color: transparent;
    background-image: none;
    border-color: #7CF29C;
}
.btn-outline-green:hover {
    color: #fff;
    background-color: #7CF29C;
    border-color: #7CF29C;
}
.btn-outline-green:focus,
.btn-outline-green.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(124, 242, 156, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(124, 242, 156, 0.5);
}
.btn-outline-green.disabled,
.btn-outline-green:disabled {
    color: #7CF29C;
    background-color: transparent;
}
.btn-outline-green:not(:disabled):not(.disabled):active,
.btn-outline-green:not(:disabled):not(.disabled).active,
.show > .btn-outline-green.dropdown-toggle {
    color: #212529;
    background-color: #7CF29C;
    border-color: #7CF29C;
}
.btn-outline-green:not(:disabled):not(.disabled):active:focus,
.btn-outline-green:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-green.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(124, 242, 156, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(124, 242, 156, 0.5);
}
.btn-outline-red {
    color: #F0404C;
    background-color: transparent;
    background-image: none;
    border-color: #F0404C;
}
.btn-outline-red:hover {
    color: #fff;
    background-color: #F0404C;
    border-color: #F0404C;
}
.btn-outline-red:focus,
.btn-outline-red.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(240, 64, 76, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(240, 64, 76, 0.5);
}
.btn-outline-red.disabled,
.btn-outline-red:disabled {
    color: #F0404C;
    background-color: transparent;
}
.btn-outline-red:not(:disabled):not(.disabled):active,
.btn-outline-red:not(:disabled):not(.disabled).active,
.show > .btn-outline-red.dropdown-toggle {
    color: #fff;
    background-color: #F0404C;
    border-color: #F0404C;
}
.btn-outline-red:not(:disabled):not(.disabled):active:focus,
.btn-outline-red:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-red.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(240, 64, 76, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(240, 64, 76, 0.5);
}
.btn-outline-gray-100 {
    color: #f8f9fa;
    background-color: transparent;
    background-image: none;
    border-color: #f8f9fa;
}
.btn-outline-gray-100:hover {
    color: #fff;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-outline-gray-100:focus,
.btn-outline-gray-100.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-outline-gray-100.disabled,
.btn-outline-gray-100:disabled {
    color: #f8f9fa;
    background-color: transparent;
}
.btn-outline-gray-100:not(:disabled):not(.disabled):active,
.btn-outline-gray-100:not(:disabled):not(.disabled).active,
.show > .btn-outline-gray-100.dropdown-toggle {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-outline-gray-100:not(:disabled):not(.disabled):active:focus,
.btn-outline-gray-100:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-gray-100.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-outline-gray-200 {
    color: #e9ecef;
    background-color: transparent;
    background-image: none;
    border-color: #e9ecef;
}
.btn-outline-gray-200:hover {
    color: #fff;
    background-color: #e9ecef;
    border-color: #e9ecef;
}
.btn-outline-gray-200:focus,
.btn-outline-gray-200.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
}
.btn-outline-gray-200.disabled,
.btn-outline-gray-200:disabled {
    color: #e9ecef;
    background-color: transparent;
}
.btn-outline-gray-200:not(:disabled):not(.disabled):active,
.btn-outline-gray-200:not(:disabled):not(.disabled).active,
.show > .btn-outline-gray-200.dropdown-toggle {
    color: #212529;
    background-color: #e9ecef;
    border-color: #e9ecef;
}
.btn-outline-gray-200:not(:disabled):not(.disabled):active:focus,
.btn-outline-gray-200:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-gray-200.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
}
.btn-outline-gray-300 {
    color: #dee2e6;
    background-color: transparent;
    background-image: none;
    border-color: #dee2e6;
}
.btn-outline-gray-300:hover {
    color: #fff;
    background-color: #dee2e6;
    border-color: #dee2e6;
}
.btn-outline-gray-300:focus,
.btn-outline-gray-300.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
}
.btn-outline-gray-300.disabled,
.btn-outline-gray-300:disabled {
    color: #dee2e6;
    background-color: transparent;
}
.btn-outline-gray-300:not(:disabled):not(.disabled):active,
.btn-outline-gray-300:not(:disabled):not(.disabled).active,
.show > .btn-outline-gray-300.dropdown-toggle {
    color: #212529;
    background-color: #dee2e6;
    border-color: #dee2e6;
}
.btn-outline-gray-300:not(:disabled):not(.disabled):active:focus,
.btn-outline-gray-300:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-gray-300.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
}
.btn-outline-gray-400 {
    color: #ced4da;
    background-color: transparent;
    background-image: none;
    border-color: #ced4da;
}
.btn-outline-gray-400:hover {
    color: #fff;
    background-color: #ced4da;
    border-color: #ced4da;
}
.btn-outline-gray-400:focus,
.btn-outline-gray-400.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5);
}
.btn-outline-gray-400.disabled,
.btn-outline-gray-400:disabled {
    color: #ced4da;
    background-color: transparent;
}
.btn-outline-gray-400:not(:disabled):not(.disabled):active,
.btn-outline-gray-400:not(:disabled):not(.disabled).active,
.show > .btn-outline-gray-400.dropdown-toggle {
    color: #212529;
    background-color: #ced4da;
    border-color: #ced4da;
}
.btn-outline-gray-400:not(:disabled):not(.disabled):active:focus,
.btn-outline-gray-400:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-gray-400.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5);
}
.btn-outline-gray-500 {
    color: #adb5bd;
    background-color: transparent;
    background-image: none;
    border-color: #adb5bd;
}
.btn-outline-gray-500:hover {
    color: #fff;
    background-color: #adb5bd;
    border-color: #adb5bd;
}
.btn-outline-gray-500:focus,
.btn-outline-gray-500.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
}
.btn-outline-gray-500.disabled,
.btn-outline-gray-500:disabled {
    color: #adb5bd;
    background-color: transparent;
}
.btn-outline-gray-500:not(:disabled):not(.disabled):active,
.btn-outline-gray-500:not(:disabled):not(.disabled).active,
.show > .btn-outline-gray-500.dropdown-toggle {
    color: #212529;
    background-color: #adb5bd;
    border-color: #adb5bd;
}
.btn-outline-gray-500:not(:disabled):not(.disabled):active:focus,
.btn-outline-gray-500:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-gray-500.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
}
.btn-outline-dark {
    color: #343a40;
    background-color: transparent;
    background-image: none;
    border-color: #343a40;
}
.btn-outline-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.btn-outline-dark:focus,
.btn-outline-dark.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
    color: #343a40;
    background-color: transparent;
}
.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
.btn-lg {
    padding: 0.5rem 2.2rem;
    font-size: 1.125rem;
    line-height: 1.5;
    border-radius: 2rem;
}
.btn-sm {
    padding: 0.25rem 1.8rem;
    font-size: 0.7875rem;
    line-height: 1.5;
    border-radius: 2rem;
}
body:where(body:not(.LoginBody)) {
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #130303;
    background-color: #F8F9FB;
}
:where(body:not(.LoginBody)) a {
    color: var(--ThemeColor);
    text-decoration: none;
}
:where(body:not(.LoginBody)) a:hover,
:where(body:not(.LoginBody)) a:focus {
    color: var(--ThemeColorLink);
    text-decoration: underline;
}
:where(body:not(.LoginBody)) h1,
:where(body:not(.LoginBody)) h2,
:where(body:not(.LoginBody)) h3,
:where(body:not(.LoginBody)) h4,
:where(body:not(.LoginBody)) h5,
:where(body:not(.LoginBody)) h6,
:where(body:not(.LoginBody)) .h1,
:where(body:not(.LoginBody)) .h2,
:where(body:not(.LoginBody)) .h3,
:where(body:not(.LoginBody)) .h4,
:where(body:not(.LoginBody)) .h5,
:where(body:not(.LoginBody)) .h6 {
    margin-bottom: 0.5rem;
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
}
:where(body:not(.LoginBody)) h1,
:where(body:not(.LoginBody)) .h1 {
    font-size: 2.25rem;
}
:where(body:not(.LoginBody)) h2,
:where(body:not(.LoginBody)) .h2 {
    font-size: 1.8rem;
}
:where(body:not(.LoginBody)) h3,
:where(body:not(.LoginBody)) .h3 {
    font-size: 1.575rem;
}
:where(body:not(.LoginBody)) h4,
:where(body:not(.LoginBody)) .h4 {
    font-size: 1.35rem;
}
:where(body:not(.LoginBody)) h5,
:where(body:not(.LoginBody)) .h5 {
    font-size: 1.125rem;
}
:where(body:not(.LoginBody)) h6,
:where(body:not(.LoginBody)) .h6 {
    font-size: 1.2rem;
}
.lead {
    font-size: 1.125rem;
    font-weight: 300;
}
.display-1 {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}
hr {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
small,
.small {
    font-size: 80%;
    font-weight: 400;
}
mark,
.mark {
    padding: 0.2em;
    background-color: #fcf8e3;
}
.blockquote {
    padding: 0.5rem 1rem;
    margin-bottom: 2rem;
    font-size: 1.125rem;
    border-left: 5px solid var(--ThemeColor);
}
.blockquote-footer {
    color: #6c757d;
}
.blockquote-footer::before {
    content: "\2014 \00A0";
}
.text-primary {
    color: var(--ThemeColor) !important;
}
a.text-primary:hover,
a.text-primary:focus {
    color: var(--ThemeColorHover) !important;
}
.page-item:first-child .page-link {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}
.page-item:last-child .page-link {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
.page-item.active .page-link {
    color: #fff;
    background-color: var(--ThemeColor);
    border-color: var(--ThemeColor);
}
.page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
}
.page-link {
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
    color: var(--ThemeColor);
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.page-link:hover,
.page-link:focus {
    color: var(--ThemeColorLink);
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.pagination-lg .page-link {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
}
.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}
.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.7875rem;
    line-height: 1.5;
}
.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}
.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
.bg-primary {
    background-color: var(--ThemeColor) !important;
}
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--ThemeColorHover) !important;
}
.bg-secondary {
    background-color: #6c757d !important;
}
a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: #545b62 !important;
}
.bg-success {
    background-color: #28a745 !important;
}
a.bg-success:hover,
a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
    background-color: #1e7e34 !important;
}
.bg-info {
    background-color: #17a2b8 !important;
}
a.bg-info:hover,
a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
    background-color: #117a8b !important;
}
.bg-warning {
    background-color: #ffc107 !important;
}
a.bg-warning:hover,
a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
    background-color: #d39e00 !important;
}
.bg-danger {
    background-color: #dc3545 !important;
}
a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
    background-color: #bd2130 !important;
}
.bg-light {
    background-color: #f8f9fa !important;
}
a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
    background-color: #dae0e5 !important;
}
.bg-violet {
    background-color: var(--ThemeColor) !important;
}
a.bg-violet:hover,
a.bg-violet:focus,
button.bg-violet:hover,
button.bg-violet:focus {
    background-color: #d372b6 !important;
}
.bg-blue {
    background-color: var(--ThemeColor) !important;
}
a.bg-blue:hover,
a.bg-blue:focus,
button.bg-blue:hover,
button.bg-blue:focus {
    background-color: var(--ThemeColorBright) !important;
}
.bg-green {
    background-color: var(--ThemeColor) !important;
}
a.bg-green:hover,
a.bg-green:focus,
button.bg-green:hover,
button.bg-green:focus {
    background-color: #4eed79 !important;
}
.bg-red {
    background-color: var(--ThemeColor) !important;
}
a.bg-red:hover,
a.bg-red:focus,
button.bg-red:hover,
button.bg-red:focus {
    background-color: #eb1221 !important;
}
.bg-gray-100 {
    background-color: #f8f9fa !important;
}
a.bg-gray-100:hover,
a.bg-gray-100:focus,
button.bg-gray-100:hover,
button.bg-gray-100:focus {
    background-color: #dae0e5 !important;
}
.bg-gray-200 {
    background-color: #e9ecef !important;
}
a.bg-gray-200:hover,
a.bg-gray-200:focus,
button.bg-gray-200:hover,
button.bg-gray-200:focus {
    background-color: #cbd3da !important;
}
.bg-gray-300 {
    background-color: #dee2e6 !important;
}
a.bg-gray-300:hover,
a.bg-gray-300:focus,
button.bg-gray-300:hover,
button.bg-gray-300:focus {
    background-color: #c1c9d0 !important;
}
.bg-gray-400 {
    background-color: #ced4da !important;
}
a.bg-gray-400:hover,
a.bg-gray-400:focus,
button.bg-gray-400:hover,
button.bg-gray-400:focus {
    background-color: #b1bbc4 !important;
}
.bg-gray-500 {
    background-color: #adb5bd !important;
}
a.bg-gray-500:hover,
a.bg-gray-500:focus,
button.bg-gray-500:hover,
button.bg-gray-500:focus {
    background-color: #919ca6 !important;
}
.bg-dark {
    background-color: #343a40 !important;
}
a.bg-dark:hover,
a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
    background-color: #1d2124 !important;
}
.border-primary {
    border-color: var(--ThemeColor) !important;
}
.border-secondary {
    border-color: #6c757d !important;
}
.border-success {
    border-color: #28a745 !important;
}
.border-info {
    border-color: #17a2b8 !important;
}
.border-warning {
    border-color: #ffc107 !important;
}
.border-danger {
    border-color: #dc3545 !important;
}
.border-light {
    border-color: #f8f9fa !important;
}
.border-violet {
    border-color: #DF99CA !important;
}
.border-blue {
    border-color: #4C84FF !important;
}
.border-green {
    border-color: #7CF29C !important;
}
.border-red {
    border-color: #F0404C !important;
}
.border-gray-100 {
    border-color: #f8f9fa !important;
}
.border-gray-200 {
    border-color: #e9ecef !important;
}
.border-gray-300 {
    border-color: #dee2e6 !important;
}
.border-gray-400 {
    border-color: #ced4da !important;
}
.border-gray-500 {
    border-color: #adb5bd !important;
}
.border-dark {
    border-color: #343a40 !important;
}
.text-primary {
    color: var(--ThemeColor) !important;
}
a.text-primary:hover,
a.text-primary:focus {
    color: var(--ThemeColorHover) !important;
}
.text-secondary {
    color: #6c757d !important;
}
a.text-secondary:hover,
a.text-secondary:focus {
    color: #545b62 !important;
}
.text-success {
    color: #28a745 !important;
}
a.text-success:hover,
a.text-success:focus {
    color: #1e7e34 !important;
}
.text-info {
    color: #17a2b8 !important;
}
a.text-info:hover,
a.text-info:focus {
    color: #117a8b !important;
}
.text-warning {
    color: #ffc107 !important;
}
a.text-warning:hover,
a.text-warning:focus {
    color: #d39e00 !important;
}
.text-danger {
    color: #dc3545 !important;
}
a.text-danger:hover,
a.text-danger:focus {
    color: #bd2130 !important;
}
.text-light {
    color: #f8f9fa !important;
}
a.text-light:hover,
a.text-light:focus {
    color: #dae0e5 !important;
}
.text-violet {
    color: #DF99CA !important;
}
a.text-violet:hover,
a.text-violet:focus {
    color: #d372b6 !important;
}
.text-blue {
    color: #4C84FF !important;
}
a.text-blue:hover,
a.text-blue:focus {
    color: var(--ThemeColorBright) !important;
}
.text-green {
    color: #7CF29C !important;
}
a.text-green:hover,
a.text-green:focus {
    color: #4eed79 !important;
}
.text-red {
    color: #F0404C !important;
}
a.text-red:hover,
a.text-red:focus {
    color: #eb1221 !important;
}
.text-gray-100 {
    color: #f8f9fa !important;
}
a.text-gray-100:hover,
a.text-gray-100:focus {
    color: #dae0e5 !important;
}
.text-gray-200 {
    color: #e9ecef !important;
}
a.text-gray-200:hover,
a.text-gray-200:focus {
    color: #cbd3da !important;
}
.text-gray-300 {
    color: #dee2e6 !important;
}
a.text-gray-300:hover,
a.text-gray-300:focus {
    color: #c1c9d0 !important;
}
.text-gray-400 {
    color: #ced4da !important;
}
a.text-gray-400:hover,
a.text-gray-400:focus {
    color: #b1bbc4 !important;
}
.text-gray-500 {
    color: #adb5bd !important;
}
a.text-gray-500:hover,
a.text-gray-500:focus {
    color: #919ca6 !important;
}
.text-dark {
    color: #343a40 !important;
}
a.text-dark:hover,
a.text-dark:focus {
    color: #1d2124 !important;
}
.badge-primary {
    color: #fff;
    background-color: var(--ThemeColor);
}
.badge-primary[href]:hover,
.badge-primary[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: var(--ThemeColorHover);
}
.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}
.badge-secondary[href]:hover,
.badge-secondary[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #545b62;
}
.badge-success {
    color: #fff;
    background-color: #28a745;
}
.badge-success[href]:hover,
.badge-success[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #1e7e34;
}
.badge-info {
    color: #fff;
    background-color: #17a2b8;
}
.badge-info[href]:hover,
.badge-info[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #117a8b;
}
.badge-warning {
    color: #212529;
    background-color: #ffc107;
}
.badge-warning[href]:hover,
.badge-warning[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #d39e00;
}
.badge-danger {
    color: #fff;
    background-color: #dc3545;
}
.badge-danger[href]:hover,
.badge-danger[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #bd2130;
}
.badge-light {
    color: #212529;
    background-color: #f8f9fa;
}
.badge-light[href]:hover,
.badge-light[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #dae0e5;
}
.badge-violet {
    color: #212529;
    background-color: #DF99CA;
}
.badge-violet[href]:hover,
.badge-violet[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #d372b6;
}
.badge-blue {
    color: #fff;
    background-color: #4C84FF;
}
.badge-blue[href]:hover,
.badge-blue[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: var(--ThemeColorBright);
}
.badge-green {
    color: #212529;
    background-color: #7CF29C;
}
.badge-green[href]:hover,
.badge-green[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #4eed79;
}
.badge-red {
    color: #fff;
    background-color: #F0404C;
}
.badge-red[href]:hover,
.badge-red[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #eb1221;
}
.badge-gray-100 {
    color: #212529;
    background-color: #f8f9fa;
}
.badge-gray-100[href]:hover,
.badge-gray-100[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #dae0e5;
}
.badge-gray-200 {
    color: #212529;
    background-color: #e9ecef;
}
.badge-gray-200[href]:hover,
.badge-gray-200[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #cbd3da;
}
.badge-gray-300 {
    color: #212529;
    background-color: #dee2e6;
}
.badge-gray-300[href]:hover,
.badge-gray-300[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #c1c9d0;
}
.badge-gray-400 {
    color: #212529;
    background-color: #ced4da;
}
.badge-gray-400[href]:hover,
.badge-gray-400[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #b1bbc4;
}
.badge-gray-500 {
    color: #212529;
    background-color: #adb5bd;
}
.badge-gray-500[href]:hover,
.badge-gray-500[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #919ca6;
}
.badge-dark {
    color: #fff;
    background-color: #343a40;
}
.badge-dark[href]:hover,
.badge-dark[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #1d2124;
}
:where(body:not(.LoginBody)) .form-control {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 2rem;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
    .form-control {
        -webkit-transition: none;
        transition: none;
    }
}
:where(body:not(.LoginBody)) .form-control::-ms-expand {
    background-color: transparent;
    border: 0;
}
:where(body:not(.LoginBody)) .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #c6d8ff;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.25);
    box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.25);
}
:where(body:not(.LoginBody)) .form-control::-webkit-input-placeholder {
    color: #6c757d;
}
:where(body:not(.LoginBody)) .form-control:-ms-input-placeholder {
    color: #6c757d;
}
:where(body:not(.LoginBody)) .form-control::-ms-input-placeholder {
    color: #6c757d;
}
:where(body:not(.LoginBody)) .form-control::placeholder {
    color: #6c757d;
}
:where(body:not(.LoginBody)) .form-control:disabled,
:where(body:not(.LoginBody)) .form-control[readonly] {
    background-color: #e9ecef;
}
:where(body:not(.LoginBody)) .form-control::-moz-placeholder {
    color: #999;
    font-weight: 300;
}
:where(body:not(.LoginBody)) .form-control::-webkit-input-placeholder {
    color: #999;
    font-weight: 300;
}
:where(body:not(.LoginBody)) .form-control:-ms-input-placeholder {
    color: #999;
    font-weight: 300;
}
select.form-control:not([size]):not([multiple]) {
    height: calc(2.15rem + 2px);
}
select.form-control:focus::-ms-value {
    color: #495057;
    background-color: #fff;
}
.form-control-sm {
    padding: 0.25rem 0.8rem;
    font-size: 0.7875rem;
    line-height: 1.5;
    border-radius: 2rem;
}
select.form-control-sm:not([size]):not([multiple]) {
    height: calc(1.68125rem + 2px);
}
.form-control-lg {
    padding: 0.5rem 1.2rem;
    font-size: 1.125rem;
    line-height: 1.5;
    border-radius: 2rem;
}
select.form-control-lg:not([size]):not([multiple]) {
    height: calc(2.6875rem + 2px);
}
.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #28a745;
}
.valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    line-height: 1;
    color: #fff;
    background-color: rgba(40, 167, 69, 0.8);
    border-radius: .2rem;
}
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.custom-select.is-valid {
    border-color: #28a745;
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
    border-color: #28a745;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip,
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip,
.was-validated .custom-select:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-tooltip,
.custom-select.is-valid ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip {
    display: block;
}
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
    color: #28a745;
}
.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip,
.form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
    display: block;
}
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label {
    color: #28a745;
}
.was-validated .custom-control-input:valid ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before {
    background-color: #71dd8a;
}
.was-validated .custom-control-input:valid ~ .valid-feedback,
.was-validated .custom-control-input:valid ~ .valid-tooltip,
.custom-control-input.is-valid ~ .valid-feedback,
.custom-control-input.is-valid ~ .valid-tooltip {
    display: block;
}
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before,
.custom-control-input.is-valid:checked ~ .custom-control-label::before {
    background-color: #34ce57;
}
.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before,
.custom-control-input.is-valid:focus ~ .custom-control-label::before {
    -webkit-box-shadow: 0 0 0 1px #F8F9FB, 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    box-shadow: 0 0 0 1px #F8F9FB, 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.was-validated .custom-file-input:valid ~ .custom-file-label,
.custom-file-input.is-valid ~ .custom-file-label {
    border-color: #28a745;
}
.was-validated .custom-file-input:valid ~ .custom-file-label::before,
.custom-file-input.is-valid ~ .custom-file-label::before {
    border-color: inherit;
}
.was-validated .custom-file-input:valid ~ .valid-feedback,
.was-validated .custom-file-input:valid ~ .valid-tooltip,
.custom-file-input.is-valid ~ .valid-feedback,
.custom-file-input.is-valid ~ .valid-tooltip {
    display: block;
}
.was-validated .custom-file-input:valid:focus ~ .custom-file-label,
.custom-file-input.is-valid:focus ~ .custom-file-label {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}
.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    line-height: 1;
    color: #fff;
    background-color: rgba(220, 53, 69, 0.8);
    border-radius: .2rem;
}
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.custom-select.is-invalid {
    border-color: #dc3545;
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
    border-color: #dc3545;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip,
.was-validated .custom-select:invalid ~ .invalid-feedback,
.was-validated .custom-select:invalid ~ .invalid-tooltip,
.custom-select.is-invalid ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip {
    display: block;
}
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545;
}
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip,
.form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
    display: block;
}
.was-validated .custom-control-input:invalid ~ .custom-control-label,
.custom-control-input.is-invalid ~ .custom-control-label {
    color: #dc3545;
}
.was-validated .custom-control-input:invalid ~ .custom-control-label::before,
.custom-control-input.is-invalid ~ .custom-control-label::before {
    background-color: #efa2a9;
}
.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip,
.custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
    display: block;
}
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before,
.custom-control-input.is-invalid:checked ~ .custom-control-label::before {
    background-color: #e4606d;
}
.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus ~ .custom-control-label::before {
    -webkit-box-shadow: 0 0 0 1px #F8F9FB, 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    box-shadow: 0 0 0 1px #F8F9FB, 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.was-validated .custom-file-input:invalid ~ .custom-file-label,
.custom-file-input.is-invalid ~ .custom-file-label {
    border-color: #dc3545;
}
.was-validated .custom-file-input:invalid ~ .custom-file-label::before,
.custom-file-input.is-invalid ~ .custom-file-label::before {
    border-color: inherit;
}
.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip,
.custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip {
    display: block;
}
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label,
.custom-file-input.is-invalid:focus ~ .custom-file-label {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: var(--ThemeColor);
}
.custom-control-input:focus ~ .custom-control-label::before {
    -webkit-box-shadow: 0 0 0 1px #F8F9FB, 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.25);
    box-shadow: 0 0 0 1px #F8F9FB, 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.25);
}
.custom-control-input:active ~ .custom-control-label::before {
    color: #fff;
    background-color: #f9fbff;
}
.custom-control-input:disabled ~ .custom-control-label {
    color: #6c757d;
}
.custom-control-input:disabled ~ .custom-control-label::before {
    background-color: #e9ecef;
}
.custom-checkbox .custom-control-label::before {
    top: .1rem;
    border-radius: 0.3rem;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ThemeColor);
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    top: .1rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--ThemeColor);
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E");
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(var(--ThemeRingRgb), 0.5);
}
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
    background-color: rgba(var(--ThemeRingRgb), 0.5);
}
.custom-radio .custom-control-label::before {
    top: .1rem;
    border-radius: 50%;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ThemeColor);
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    top: .1rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(var(--ThemeRingRgb), 0.5);
}
code {
    font-size: 87.5%;
    color: #e83e8c;
}
.nav-link {
    padding: 0.5rem 1rem;
}
.nav-link.disabled {
    color: #6c757d;
}
.nav-tabs .nav-item {
    margin-bottom: -1px;
}
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs .nav-link.disabled {
    color: #6c757d;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #495057;
    background-color: #F8F9FB;
}
.nav-tabs .dropdown-menu {
    margin-top: -1px;
}
.nav-pills .nav-link {
    border-radius: 2rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--ThemeColor);
}
.card {
    background-color: #fff;
    border: none;
    -webkit-box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    overflow: auto;
}
.card > .list-group:first-child .list-group-item:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.card > .list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
.card-body {
    padding: 2rem;
}
.card-title {
    margin-bottom: 1.5rem;
}
.card-subtitle {
    margin-top: -0.75rem;
}
.card-link + .card-link {
    margin-left: 2rem;
}
.card-header {
    padding: 1.5rem 2rem;
    background-color: white;
    border-bottom: none;
    -webkit-box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
}
.card-header:first-child {
    border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
}
.card-header-transparent {
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom: none;
}
.card-footer {
    padding: 1.5rem 2rem;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
}
.card-footer:last-child {
    border-radius: 0 0 calc(1rem - 1px) calc(1rem - 1px);
}
.card-header-tabs {
    margin-right: -1rem;
    margin-bottom: -1.5rem;
    margin-left: -1rem;
    border-bottom: 0;
}
.card-header-pills {
    margin-right: -1rem;
    margin-left: -1rem;
}
.card-img-overlay {
    padding: 1.25rem;
}
.card-img-overlay-opacity {
    background: rgba(0, 0, 0, 0.2);
}
.card-img {
    border-radius: calc(1rem - 1px);
}
.card-img-top {
    border-top-left-radius: calc(1rem - 1px);
    border-top-right-radius: calc(1rem - 1px);
}
.card-img-bottom {
    border-bottom-right-radius: calc(1rem - 1px);
    border-bottom-left-radius: calc(1rem - 1px);
}
.card-deck .card {
    margin-bottom: 15px;
}
@media (min-width: 576px) {
    .card-deck {
        margin-right: -15px;
        margin-left: -15px;
    }
    .card-deck .card {
        margin-right: 15px;
        margin-left: 15px;
    }
}
:where(body:not(.LoginBody)) .dropdown-menu {
    min-width: 5rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 0.9rem;
    color: #212529;
    background-color: #fff;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
    border-radius: 0.3rem;
}
.dropdown-item {
    padding: 0.8rem 1.5rem;
    font-weight: 400;
    color: #212529;
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: #16181b;
    background-color: #f8f9fa;
}
.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: var(--ThemeColor);
}
.dropdown-item.disabled,
.dropdown-item:disabled {
    color: #6c757d;
}
*:has(> .PwToggle),
*:has(> .FieldIcon) {
    position: relative;
}
.FieldIcon {
    position: absolute;
    top: 50%;
    left: 0;
    /* the icon owns the whole 42px gutter and centres its glyph in it */
    width: 42px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.55;
    font-size: 15px;
    z-index: 2;
}
.PwToggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 4px 6px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    z-index: 6;
}
.PwToggle:hover,
.PwToggle:focus {
    opacity: 1;
    outline: none;
}
*:has(> .FieldIcon) > .form-control,
*:has(> .FieldIcon) > input {
    padding-left: 42px !important;
}
*:has(> .PwToggle) > .form-control,
*:has(> .PwToggle) > input {
    padding-right: 42px !important;
}
.input-group.input-group-outline:has(> .FieldIcon) > .form-control {
    padding-left: 42px !important;
}
.input-group.input-group-outline:has(> .PwToggle) > .form-control {
    padding-right: 42px !important;
}
.page-holder a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(:has(> .roundy)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a) {
    text-decoration: none;
    transition: filter 0.2s ease;
}
.page-holder a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(:has(> .roundy)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a):hover,
.page-holder a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(:has(> .roundy)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a):focus-visible {
    text-decoration: underline;
    filter: brightness(1.15);
}
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(20, 30, 45, 0.28) rgba(20, 30, 45, 0.05);
    }
    .DarkMode {
        scrollbar-color: #333c48 #171d24;
    }
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: rgba(20, 30, 45, 0.05);
}
::-webkit-scrollbar-thumb {
    background: rgba(20, 30, 45, 0.28);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 30, 45, 0.42);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background: rgba(20, 30, 45, 0.55);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.DarkMode::-webkit-scrollbar-track,
.DarkMode ::-webkit-scrollbar-track,
.DarkMode::-webkit-scrollbar-corner,
.DarkMode ::-webkit-scrollbar-corner {
    background: #171d24;
}
.DarkMode::-webkit-scrollbar-thumb,
.DarkMode ::-webkit-scrollbar-thumb {
    background: #333c48;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.DarkMode::-webkit-scrollbar-thumb:hover,
.DarkMode ::-webkit-scrollbar-thumb:hover {
    background: #3d4756;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.DarkMode::-webkit-scrollbar-thumb:active,
.DarkMode ::-webkit-scrollbar-thumb:active {
    background: #4a5563;
    border: 2px solid transparent;
    background-clip: padding-box;
}
img[src*="flags/"] {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
}
.dropdown-menu img[src*="flags/"],
a.language img[src*="flags/"] {
    width: 24px;
    height: 18px;
}
img[src*="payments/"] {
    max-width: 54px;
    max-height: 54px;
    object-fit: contain;
}
@media (max-width: 1024px) {
    img[src*="payments/"] {
        max-width: 44px;
        max-height: 44px;
    }
}
.ColCenter {
    float: none;
    margin: 0 auto;
}
.BodyNarrow {
    margin: auto;
    width: 80%;
}
.BtnNavy {
    background-color: var(--ThemeColor);
}
.BtnHalfIndent {
    margin-left: 50%;
}
.InlineField {
    display: inline-block;
}
.PagePadTop {
    padding-top: 5%;
}
.FieldHalf {
    width: 50%;
    margin-right: 10px;
}
.LabelSpacer {
    display: block;
}
.Star {
    color: palegreen;
}
.StarNavy {
    color: darkblue;
}
.StarAlert {
    color: red;
}
.InfoIcon {
    width: 18px;
    height: 18px;
}
.submitfile,
.FileClear {
    border-radius: 1px;
    height: 100%;
}
.FieldTall {
    height: 42px;
}
.ColPadTop {
    padding-top: 25px;
}
.TextAlert {
    color: red;
}
.SectionPadTop {
    padding-top: 7px;
}
.SwalForm {
    text-align: initial;
}
.TradeFrame {
    width: 100%;
    height: 100%;
}
.NavBarTall {
    height: 6rem;
}
:where(body:not(.LoginBody)) .LogoImage {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}
/* the account pages give the logo less room than the header does: it sits
   above the first field, where a tall or wide one crowds the card */
:where(.LoginBody) .LogoImage {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 66px;
    object-fit: contain;
}
/* a brand may supply one logo for each mode: LogoURLLight and LogoURLDark
   arrive as these two variables, and the image follows the mode. Without them
   the element keeps whatever its src holds. */
.LogoImage {
    content: var(--LogoLight, normal);
}
html.DarkMode .LogoImage {
    content: var(--LogoDark, normal);
}
.AvatarSmall {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    -webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
}
.vmi-wrap {
    background-color: #ffffff;
    font-size: 12px;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}
.PayMark {
    /* the marks set the height of the footer, so they are what to keep small */
    width: 64px;
    height: 34px;
    object-fit: contain;
    margin-left: 10px;
    margin-right: 10px;
}
html:has(.PaymentFrame),
body:has(.PaymentFrame) {
    margin: 0;
    padding: 0;
    height: 100%;
}
body:has(.PaymentFrame) {
    background-color: #fff0 !important;
}
html:has(.PaymentFrameScroll),
body:has(.PaymentFrameScroll) {
    overflow: scroll;
}
html:has(.PaymentFrameFixed),
body:has(.PaymentFrameFixed) {
    overflow: hidden;
}
.PaymentFrame {
    min-width: 100%;
}
.PaymentFrame iframe {
    border-width: 0;
}
.PaymentFrameScroll iframe {
    padding-top: 100px;
}
.Hidden {
    display: none;
}
@font-face {
    font-family: "Poppins-Regular";
    src: url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.woff") format("woff");
}
@font-face {
    font-family: "Poppins-SemiBold";
    src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"), url("../fonts/Poppins-SemiBold.woff") format("woff");
}
:where(.LoginBody) * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body:where(.LoginBody) {
    font-family: "Poppins-Regular";
    color: #184452;
    font-size: 13px;
    margin: 0;
}
:where(.LoginBody) input,
:where(.LoginBody) textarea,
:where(.LoginBody) select,
:where(.LoginBody) button,
:where(.LoginBody) .BtnLink {
    font-family: "Poppins-Regular";
    color: #184452;
    font-size: 13px;
}
:where(.LoginBody) p,
:where(.LoginBody) h1,
:where(.LoginBody) h2,
:where(.LoginBody) h3,
:where(.LoginBody) h4,
:where(.LoginBody) h5,
:where(.LoginBody) h6,
:where(.LoginBody) ul {
    margin: 0;
}
:where(.LoginBody) img {
    max-width: 100%;
}
:where(.LoginBody) ul {
    padding-left: 0;
    margin-bottom: 0;
}
:where(.LoginBody) a:hover {
    text-decoration: none;
    color: #184452;
}
:where(.LoginBody) :focus {
    outline: none;
}
.img {
    padding-top: 70px;
}
.img1 {
    padding-top: 20px;
}
/* The account pages used to sit on a photograph. They sit on the theme's own
   name instead now: a wall of ones and zeroes, tiled from one small svg, with a
   glow behind the card so the code never fights the form. The two tiles carry
   the same pattern and differ only in their ink, so day and night read alike. */
.wrapper {
    /* the card keeps clear of the window edges, which matters most on Register,
       where the form is tall enough to fill the screen */
    padding: 20px;
    min-height: 100vh;
    background-color: #e9eff8;
    /* --AuthImage puts a picture over the drawn background, and --AuthImageTint
       darkens it so the card stays readable; with neither set the two top
       layers are inert and the code wall below shows as before. */
    background-image:
        linear-gradient(rgba(6, 12, 24, var(--AuthImageTint, 0)), rgba(6, 12, 24, var(--AuthImageTint, 0))),
        var(--AuthImage, none),
        radial-gradient(46% 44% at 50% 45%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%),
        url("../img/code-wall-light.svg"),
        linear-gradient(180deg, #eef3fb 0%, #dde6f4 100%);
    background-size: auto, cover, auto, 280px 240px, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
    background-position: center, center, center, top left, center;
    display: flex;
    align-items: center;
}
.inner {
    padding: 10px;
    /* the translucency lives in the colour rather than in opacity, so the edge
       and the shadow below are not faded along with it */
    background: rgba(255, 255, 255, 0.92);
    max-width: 850px;
    margin: auto;
    display: flex;
    border: 1px solid rgba(10, 43, 82, 0.10);
    border-radius: 15px;
    box-shadow: 0 24px 60px rgba(13, 30, 60, 0.18);
}
.inner {
    width: 30%;
    min-width: min(380px, 100%);
    border-radius: 15px;
}
.inner form {
    width: 100%;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 23px;
    padding-right: 23px;
}
.inner h3 {
    text-transform: uppercase;
    font-size: 25px;
    font-family: "Poppins-SemiBold";
    text-align: center;
    margin-bottom: 28px;
    color: #184452;
}
:where(.LoginBody) .form-group {
    display: flex;
    gap: 25px;
}
/* the two name fields each sit in a wrapper now, like every other field, so the
   halves are the wrappers rather than the bare inputs */
:where(.LoginBody) .form-group > .form-wrapper,
.inner form .form-group > .form-wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    min-width: 0;
    /* the row carries the gap to the next field, so the halves inside it do not
       add a second one */
    margin-bottom: 0;
}
:where(.LoginBody) .form-group input {
    width: 100%;
}
.form-wrapper {
    position: relative;
    margin-bottom: 25px;
}
:where(.LoginBody) .form-wrapper > .form-control,
.inner form .form-wrapper > .form-control {
    margin-bottom: 0;
}
/* The icon owns a 42px gutter at the leading edge and centres its glyph in it */
.form-wrapper > i {
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 42px;
    height: 100%;
    pointer-events: none;
    opacity: 0.55;
    font-size: 15px;
    z-index: 2;
}
.form-wrapper > .form-control,
.form-wrapper > input {
    padding-left: 42px;
}
:where(.LoginBody) .form-control {
    border: 1px solid #333;
    border-top: none;
    border-right: none;
    border-left: none;
    display: block;
    width: 100%;
    height: 30px;
    padding: 0;
    margin-bottom: 25px;
}
:where(.LoginBody) .form-control:focus {
    border-bottom-color: #333;
    box-shadow: none;
    outline: none;
}
:where(.LoginBody) .form-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    /* the line is the bottom and sides of a short box, so it curves up at both
       ends instead of stopping square; the colour only arrives on focus, or the
       collapsed box would leave a stub of its side borders mid-field */
    height: 4px;
    border: 2px solid transparent;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    pointer-events: none;
    z-index: 3;
    transition: left 0.25s ease, right 0.25s ease;
}
:where(.LoginBody) .form-wrapper:focus-within::after {
    left: 0;
    right: 0;
    border-color: var(--ThemeColorBright);
}
:where(.LoginBody) .form-control::-webkit-input-placeholder {
    font-size: 13px;
    color: #184452;
    font-family: "Poppins-Regular";
}
:where(.LoginBody) .form-control::-moz-placeholder {
    font-size: 13px;
    color: #184452;
    font-family: "Poppins-Regular";
}
:where(.LoginBody) .form-control:-ms-input-placeholder {
    font-size: 13px;
    color: #184452;
    font-family: "Poppins-Regular";
}
:where(.LoginBody) .form-control:-moz-placeholder {
    font-size: 13px;
    color: #184452;
    font-family: "Poppins-Regular";
}
:where(.LoginBody) select {
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-left: 20px;
}
:where(.LoginBody) select option[value=""][disabled] {
    display: none;
}
:where(.LoginBody) button,
:where(.LoginBody) .BtnLink {
    border: none;
    border-radius: 15px;
    text-decoration: none;
    width: 164px;
    height: 51px;
    margin: auto;
    margin-top: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #08244a;
    font-size: 15px;
    color: #fff;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
:where(.LoginBody) button i,
:where(.LoginBody) .BtnLink i {
    margin-left: 10px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
:where(.LoginBody) button:hover i,
:where(.LoginBody) button:focus i,
:where(.LoginBody) button:active i,
:where(.LoginBody) .BtnLink:hover i,
:where(.LoginBody) .BtnLink:focus i,
:where(.LoginBody) .BtnLink:active i {
    -webkit-animation-name: hvr-icon-wobble-horizontal;
    animation-name: hvr-icon-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
@-webkit-keyframes hvr-icon-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    33.3% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes hvr-icon-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    33.3% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@media (max-width: 1199px) {
    .wrapper {
        background-position: center, center, center, right center, center;
    }
}
@media (max-width: 991px) {
    .inner form {
        padding-top: 10px;
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (max-width: 767px) {
    .inner {
        display: block;
        width: 100%;
    }
    .inner .image-holder {
        width: 100%;
    }
    .inner form {
        width: 100%;
        padding: 20px 0;
    }
    :where(.LoginBody) button,
    :where(.LoginBody) .BtnLink {
        margin-top: 60px;
    }
}
.inner form .form-control {
    margin-bottom: 16px;
}
.inner form .form-wrapper {
    margin-bottom: 16px;
}
.inner form button[type="submit"] {
    margin-top: 0;
}
.inner form .controls {
    margin-top: 14px;
    text-align: center;
}
.inner form .OrSplit {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 60%;
    margin: 0 auto 14px;
    font-size: 12px;
    opacity: 0.65;
}
.inner form .OrSplit::before,
.inner form .OrSplit::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}
.inner form .controls br {
    display: none;
}
.inner form .controls p {
    margin: 0;
}
.inner form .controls p + p {
    margin-top: 12px;
}
.inner a:not(.btn):not(.BtnLink):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(:has(> .roundy)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a) {
    text-decoration: none;
    transition: filter 0.2s ease;
}
.inner a:not(.btn):not(.BtnLink):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(:has(> .roundy)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a):hover,
.inner a:not(.btn):not(.BtnLink):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(:has(> .roundy)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a):focus-visible {
    text-decoration: underline;
    filter: brightness(1.15);
}
/* It sits in the header's own flex row now, so taking it out of flow only threw it under the */
.fixed-plugin {
    position: relative;
    z-index: 100;
}
.LoginBody .fixed-plugin {
    position: absolute;
    top: 20px;
    right: 15%;
}
.CaretIcon {
    font-size: 17px;
}
.LangGlobe {
    font-size: 16px;
    vertical-align: middle;
}
.ErrorArt .white_page {
    fill: #fff;
}
.ErrorArt .dark_gray_page {
    fill: #a9a9a9;
}
.ErrorArt .medium_gray {
    fill: #ccc;
}
.ErrorArt .light_orange {
    fill: #fca671;
}
.ErrorArt .orange {
    fill: #e96019;
}
.ErrorArt .top-martini {
    fill: #fdd2b8;
}
.ErrorArt .dark_navy {
    fill: #1b2c3d;
}
.ErrorArt .green {
    fill: #a48801;
}
.ErrorArt .med-blue {
    fill: #395d6d;
}
.ErrorArt .light-blue {
    fill: #e8eaec;
}
.ErrorArt .extra-light-o {
    fill: #fce7dc;
}
.ErrorArt .extra2-light-o {
    fill: #fff2ea;
}
.ErrorArt .navy-light {
    fill: #495664;
}
.ErrorArt .light-green {
    fill: #bfac4d;
}
.ErrorArt .light-bubbles {
    fill: #e1e7e9;
}
.PwToggle {
    width: auto;
    height: auto;
    /* the auth pages dress every button as the big submit one, and its 40px
       top margin pushed the eye out of the field and below it */
    margin: 0;
}
.PwToggle i {
    position: static;
    bottom: auto;
    right: auto;
    margin-left: 0;
    /* the auth pages wobble the icon inside a button on hover, which is meant
       for the arrow on the submit button - the eye holds still */
    animation: none;
}
.PwToggle:hover i,
.PwToggle:focus i,
.PwToggle:active i {
    -webkit-animation: none;
    animation: none;
}
.LoginBody select.form-control:not([size]):not([multiple]) {
    height: auto;
    min-height: 34px;
    line-height: normal;
}
.form-group {
    margin-bottom: 1rem;
}
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #212529;
}
:root {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-padding-x: 1rem;
}
:root {
    --bs-emphasis-color: #212529;
    --bs-secondary-color: #6c757d;
    --bs-border-radius: 0.25rem;
}
body:not(.LoginBody) {
    --bs-body-color: #130303;
}
.navbar {
    --bs-navbar-brand-color: var(--ThemeColor);
    --bs-nav-link-color: var(--ThemeColor);
}
.table {
    color: var(--bs-table-color);
}

.DlgOverlay {
    --Dlg-backdrop: rgba(0, 0, 0, 0.45);
    --Dlg-bg: #ffffff;
    --Dlg-fg: #130303;
    --Dlg-muted: #6c757d;
    --Dlg-radius: 8px;
    --Dlg-width: 420px;
    --Dlg-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    --Dlg-line: rgba(0, 0, 0, 0.12);
    --Dlg-success: #2eb85c;
    --Dlg-error: #e04343;
    --Dlg-warning: #f0ad4e;
    --Dlg-info: #3aa0dd;
    --Dlg-question: #9aa0a6;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    padding: 24px;
    background: var(--Dlg-backdrop);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.modal,
.modal-backdrop {
    --Dlg-backdrop: rgba(0, 0, 0, 0.45);
    --Dlg-bg: #ffffff;
    --Dlg-fg: #130303;
    --Dlg-muted: #6c757d;
    --Dlg-radius: 8px;
    --Dlg-width: 420px;
    --Dlg-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    --Dlg-line: rgba(0, 0, 0, 0.12);
    --Dlg-success: #2eb85c;
    --Dlg-error: #e04343;
    --Dlg-warning: #f0ad4e;
    --Dlg-info: #3aa0dd;
    --Dlg-question: #9aa0a6;
}
.DlgOverlay.is-open {
    opacity: 1;
}
.DlgPos--center {
    align-items: center;
    justify-content: center;
}
.DlgPos--top {
    align-items: flex-start;
    justify-content: center;
}
.DlgPos--top-start {
    align-items: flex-start;
    justify-content: flex-start;
}
.DlgPos--top-end {
    align-items: flex-start;
    justify-content: flex-end;
}
.DlgPos--bottom {
    align-items: flex-end;
    justify-content: center;
}
.DlgPos--bottom-start {
    align-items: flex-end;
    justify-content: flex-start;
}
.DlgPos--bottom-end {
    align-items: flex-end;
    justify-content: flex-end;
}
.DlgBox {
    width: 100%;
    max-width: var(--Dlg-width);
    padding: 28px 24px 22px;
    background: var(--Dlg-bg);
    color: var(--Dlg-fg);
    border: solid var(--Dlg-line) 1px;
    border-radius: var(--Dlg-radius);
    box-shadow: var(--Dlg-shadow);
    text-align: center;
    transform: translateY(-10px) scale(0.97);
    transition: transform 0.16s ease;
}
.DlgOverlay.is-open .DlgBox {
    transform: none;
}
.DlgIcon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
}
.DlgIcon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.DlgIcon svg circle:first-child {
    opacity: 0.3;
}
.DlgIcon--success svg {
    stroke: var(--Dlg-success);
}
.DlgIcon--error svg {
    stroke: var(--Dlg-error);
}
.DlgIcon--warning svg {
    stroke: var(--Dlg-warning);
}
.DlgIcon--info svg {
    stroke: var(--Dlg-info);
}
.DlgIcon--question svg {
    stroke: var(--Dlg-question);
}
.DlgImage {
    display: block;
    max-width: 100%;
    margin: 0 auto 16px;
}
.DlgTitle {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}
.DlgText {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--Dlg-muted);
}
.DlgActions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}
.DlgActions--spread {
    justify-content: space-between;
}
.DlgBtn {
    min-width: 96px;
    cursor: pointer;
}
@media (max-width: 575.98px) {
    .DlgBox {
        padding: 22px 18px 18px;
    }
    .DlgTitle {
        font-size: 19px;
    }
    .DlgIcon {
        width: 60px;
        height: 60px;
    }
}

/* Bootstrap gives .input-group > :not(:first-child) a -1px margin so borders collapse between */
.input-group > .FieldIcon,
.input-group > .PwToggle {
    /* Bootstrap's own rule is a long :not() chain, so plain specificity loses to it here */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Dropdowns rendered with no marker at all: the theme clears the native appearance on select but */
select.form-control,
select.reg_select {
    --SelectArrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23495057' fill-opacity='0.55' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 34px;
    background-image: var(--SelectArrow);
    background-repeat: no-repeat;
    background-position: right 12.8px center;
    background-size: 12px 8px;
}
.LoginBody select.form-control {
    --SelectArrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23184452' fill-opacity='0.55' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-position: right 20px center;
    padding-right: 42px;
}
select.form-control:disabled,
select.form-control[readonly] {
    --SelectArrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23495057' fill-opacity='0.3' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    cursor: not-allowed;
}

/* Deposits has seven columns and Withdraws eight */
@media (min-width: 1025px) {
    .HistoryTable {
        table-layout: fixed;
    }
    .HistoryTable th:nth-child(1),
    .HistoryTable td:nth-child(1) {
        width: 5%;
    }
    .HistoryTable th:nth-child(2),
    .HistoryTable td:nth-child(2) {
        width: 12%;
    }
    .HistoryTable th:nth-child(3),
    .HistoryTable td:nth-child(3) {
        width: 16%;
    }
    .HistoryTable th:nth-child(4),
    .HistoryTable td:nth-child(4) {
        width: 12%;
    }
    .HistoryTable th:nth-child(5),
    .HistoryTable td:nth-child(5) {
        width: 10.5%;
    }
    .HistoryTable th:nth-child(6),
    .HistoryTable td:nth-child(6) {
        width: 13.5%;
    }
    .HistoryTable th:nth-child(8),
    .HistoryTable td:nth-child(8) {
        width: 14%;
    }
    .HistoryTable th,
    .HistoryTable td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

label.form-control-label {
    display: block;
    margin-bottom: 0;
    color: #6c757d;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* Handheld sidebar: every other theme slides a full-width drawer over the page here. */
@media (max-width: 1199.98px) {
    .sidebar,
    .sidebar.shrink {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: 16rem;
        margin-left: -16rem;
        text-align: left;
        overflow-y: auto;
    }
    .sidebar.show,
    .sidebar.shrink.show {
        margin-left: 0;
    }
    .sidebar .sidebar-link,
    .sidebar.shrink .sidebar-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .sidebar .sidebar-link span,
    .sidebar.shrink .sidebar-link span {
        display: inline;
        font-size: 1rem;
    }
    .sidebar .sidebar-link i,
    .sidebar.shrink .sidebar-link i {
        margin-right: 12px !important;
    }
    .sidebar.shrink .collapse .sidebar-link,
    .sidebar.shrink .collapsing .sidebar-link {
        padding-left: 1.5rem !important;
        padding-right: 1rem !important;
    }
    .sidebar .SideUser,
    .sidebar.shrink .SideUser {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sidebar .SideUserAvatar,
    .sidebar.shrink .SideUserAvatar {
        margin-right: 10px;
        margin-bottom: 0;
    }
    .sidebar .SideUserName,
    .sidebar.shrink .SideUserName {
        font-size: 0.9375rem;
        text-align: left;
    }
}

@media (max-width: 1024.98px) {
    .form-control,
    .form-control-2,
    .reg_select,
    .form-select,
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="search"] {
        font-size: 16px;
    }
}

table tbody {
    counter-reset: tableRow;
}
table tbody tr {
    counter-increment: tableRow;
}
table tbody .counterCell::before {
    content: counter(tableRow);
}

.DocStatus,
.DocRow .FileInput {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    /* the same pill the fields are drawn as, so a document row reads as one of
       them; the text starts past the curve, where the labels start */
    padding: 0 6px 0 16px;
    background: #F7F8FA;
    border: solid rgba(19, 24, 44, 0.12) 1px;
    border-radius: 2rem;
}
.DocName {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.DocBadge {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.DocBadgeOk {
    color: #1B7F4B;
    background: rgba(27, 127, 75, 0.12);
}
.DocBadgeWait {
    color: #8A6100;
    background: rgba(224, 168, 0, 0.18);
}
.DocRow .FileInput .form-control {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.DocRow .FileInput .btn {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    line-height: 30px;
}
.DocRow .FileInput .btn.submitfile,
.DocRow .FileInput .btn.FileClear {
    /* the same round shape and colour as the Submit it sits beside */
    width: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--ThemeColor);
    border: 0;
    color: #fff;
}
.DocRow .FileInput .btn.submitfile:hover,
.DocRow .FileInput .btn.FileClear:hover,
.DocRow .FileInput .btn.submitfile:focus,
.DocRow .FileInput .btn.FileClear:focus {
    background: var(--ThemeColor);
    border: solid var(--ThemeColorHover) 1px;
    color: #fff;
}

/* Every form closes with its action on the right. */
.page-holder .form-group:not(.formParent):not(:has(.form-control)):has(> button[type="submit"]),
.page-holder .form-group:not(.formParent):not(:has(.form-control)):has(> .btn[type="submit"]),
.page-holder .form-group:not(.formParent):not(:has(.form-control)):has(> input.btn),
.page-holder .form-group:not(.formParent):not(:has(.form-control)):has(> button.btn),
.page-holder .form-group:not(.formParent):not(:has(.form-control)):has(> a.btn) {
    text-align: right;
}

.HeadBtn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(19, 24, 44, 0.04);
    border: solid rgba(19, 24, 44, 0.1) 1px;
    border-radius: 100%;
    color: var(--ThemeColor);
    font-size: 16px;
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.HeadBtn:hover,
.HeadBtn:focus-visible {
    background: rgba(19, 24, 44, 0.09);
    border-color: rgba(var(--ThemeRingRgb), 0.5);
    color: var(--ThemeColorLink);
    text-decoration: none;
    outline: none;
}
.HeadBtn .LangFlagNow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.LangBtn:hover .LangFlagNow,
.LangBtn:focus-visible .LangFlagNow,
.show > .LangBtn .LangFlagNow {
    opacity: 1;
}
.LangBtn:hover > i,
.LangBtn:focus-visible > i,
.show > .LangBtn > i {
    opacity: 0;
}
.LangMenu,
.UserMenu {
    min-width: 232px;
    margin-top: 10px;
    padding: 8px;
    background: #FFFFFF;
    border: solid rgba(19, 24, 44, 0.1) 1px;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(19, 24, 44, 0.16);
}
.LangMenu {
    max-height: min(420px, 60vh);
    overflow-y: auto;
}
.LangMenu li {
    list-style: none;
}
.LangMenu .language,
.UserMenu .dropdown-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    color: #131828;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.LangMenu .language:hover,
.LangMenu .language:focus-visible,
.UserMenu .dropdown-item:hover,
.UserMenu .dropdown-item:focus-visible {
    background: rgba(var(--ThemeRingRgb), 0.12);
    color: var(--ThemeColorLink);
    outline: none;
}
.LangMenu .language.Current {
    background: rgba(var(--ThemeRingRgb), 0.16);
    color: var(--ThemeColorLink);
}
.LangMenu .Flag {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    overflow: hidden;
}
/* the round flag fills its disc - the generic flags/ rules further up size a
   loose flag as a small rectangle, and their attribute selector outranks a
   plain descendant one, so this match has to carry the attribute too */
.LangMenu .Flag img[src*="flags/"] {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}
.UserMenu .dropdown-item i {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    color: rgba(19, 24, 44, 0.45);
}
.UserMenu .dropdown-item:hover i {
    color: inherit;
}
.UserMenu .dropdown-divider {
    margin: 6px 4px;
    border-top-color: rgba(19, 24, 44, 0.1);
}
.UserMenu .UserMenuOut:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #C1121F;
}
.UserMenu .UserMenuOut:hover i {
    color: #C1121F;
}

html.DarkMode {
    --MxGround: #10141B;
    --MxSurface: #171D26;
    --MxCard: #1B2230;
    --MxLine: rgba(255, 255, 255, 0.1);
    --MxInk: #E6E9EF;
    --MxInkSoft: rgba(230, 233, 239, 0.62);
    --MxInkFaint: rgba(230, 233, 239, 0.38);
    color-scheme: dark;
}
html.DarkMode body:where(body:not(.LoginBody)) {
    background-color: var(--MxGround);
    color: var(--MxInk);
}
html.DarkMode body:not(.LoginBody) {
    --bs-body-color: var(--MxInk);
    --bs-emphasis-color: var(--MxInk);
    --bs-secondary-color: var(--MxInkSoft);
}

/* chrome */
html.DarkMode .navbar,
html.DarkMode .bg-white,
html.DarkMode .sidebar,
html.DarkMode .footer {
    background: var(--MxSurface) !important;
    color: var(--MxInk);
}
html.DarkMode .navbar,
html.DarkMode .footer {
    box-shadow: 0 1px 0 var(--MxLine);
}
html.DarkMode .sidebar {
    box-shadow: 1px 0 0 var(--MxLine);
}
html.DarkMode .sidebar-link,
html.DarkMode .sidebar-link i,
html.DarkMode .text-muted,
html.DarkMode .text-gray {
    color: var(--MxInkSoft) !important;
}
html.DarkMode .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--MxInk) !important;
}
html.DarkMode .sidebar-link.active {
    background: var(--ThemeColor);
    color: #FFFFFF !important;
}
html.DarkMode .sidebar-link.active i {
    color: #FFFFFF !important;
}
html.DarkMode .sidebar-toggler {
    color: var(--MxInkSoft) !important;
}
html.DarkMode .SideUser {
    border-bottom-color: var(--MxLine);
}
html.DarkMode .SideUserName {
    color: var(--MxInk);
}
html.DarkMode .page-holder a:has(> .roundy):hover > .roundy,
html.DarkMode .page-holder a:has(> .roundy):focus > .roundy {
    background-color: #20262E !important;
}
html.DarkMode .page-holder a:has(> .roundy):hover h6,
html.DarkMode .page-holder a:has(> .roundy):focus h6 {
    color: var(--ThemeColorBright);
}

html.DarkMode .card {
    background-color: var(--MxCard);
    color: var(--MxInk);
}
html.DarkMode .card-header {
    background-color: transparent;
    border-bottom: solid var(--MxLine) 1px;
    color: var(--MxInk);
}
html.DarkMode .table {
    --bs-table-color: var(--MxInk);
    --bs-table-striped-color: var(--MxInk);
    --bs-table-hover-color: var(--MxInk);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.07);
    --bs-table-border-color: var(--MxLine);
    color: var(--MxInk);
}
html.DarkMode .table thead th {
    color: var(--MxInk);
    border-bottom-color: var(--MxLine);
}

html.DarkMode .form-control,
html.DarkMode select.form-control,
html.DarkMode textarea.form-control,
html.DarkMode .form-select {
    background-color: #272F3F;
    border-color: var(--MxLine);
    color: var(--MxInk);
}
html.DarkMode .form-control::placeholder {
    color: var(--MxInkFaint);
}
html.DarkMode .form-control:focus {
    background-color: #272F3F;
    border-color: rgba(var(--ThemeRingRgb), 0.7);
    box-shadow: 0 0 0 0.2rem rgba(var(--ThemeRingRgb), 0.25);
    color: var(--MxInk);
}
html.DarkMode .form-control:disabled,
html.DarkMode .form-control[readonly] {
    background-color: #121824;
    color: var(--MxInkSoft);
}
html.DarkMode .form-control-label,
html.DarkMode label {
    color: var(--MxInkSoft);
}
html.DarkMode .form-wrapper > i,
html.DarkMode .FieldIcon,
html.DarkMode .PwToggle {
    color: var(--MxInkSoft);
}

html.DarkMode .HeadBtn {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--MxLine);
    color: var(--MxInk);
}
html.DarkMode .HeadBtn:hover,
html.DarkMode .HeadBtn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(var(--ThemeRingRgb), 0.55);
    color: #FFFFFF;
}
html.DarkMode .LangMenu,
html.DarkMode .UserMenu,
html.DarkMode .dropdown-menu {
    background: var(--MxCard);
    border-color: var(--MxLine);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
html.DarkMode .LangMenu .language,
html.DarkMode .UserMenu .dropdown-item,
html.DarkMode .dropdown-item {
    color: var(--MxInk);
}
html.DarkMode .LangMenu .language:hover,
html.DarkMode .UserMenu .dropdown-item:hover,
html.DarkMode .dropdown-item:hover {
    background: rgba(var(--ThemeRingRgb), 0.2);
    color: #FFFFFF;
}
html.DarkMode .UserMenu .UserMenuOut:hover {
    background: rgba(220, 53, 69, 0.22);
    color: #FF8A8A;
}
html.DarkMode .UserMenu .UserMenuOut:hover i {
    color: #FF8A8A;
}
html.DarkMode .UserMenu .dropdown-item i {
    color: var(--MxInkFaint);
}
html.DarkMode .UserMenu .dropdown-divider,
html.DarkMode .dropdown-divider {
    border-top-color: var(--MxLine);
}

html.DarkMode .DocStatus {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--MxLine);
}
html.DarkMode .DocRow .FileInput {
    background: #272F3F;
    border-color: var(--MxLine);
}
html.DarkMode .DocRow .FileInput .btn.submitfile,
html.DarkMode .DocRow .FileInput .btn.FileClear {
    background: var(--ThemeColorEdge);
    color: #fff;
}
html.DarkMode .DocRow .FileInput .btn.submitfile:hover,
html.DarkMode .DocRow .FileInput .btn.FileClear:hover,
html.DarkMode .DocRow .FileInput .btn.submitfile:focus,
html.DarkMode .DocRow .FileInput .btn.FileClear:focus {
    background: var(--ThemeColorHover);
    border-color: var(--ThemeColorHover);
}
html.DarkMode .DocBadgeOk {
    color: #62D39B;
    background: rgba(40, 167, 69, 0.18);
}
html.DarkMode .DocBadgeWait {
    color: #F0C05A;
    background: rgba(224, 168, 0, 0.2);
}
html.DarkMode .vmi-wrap {
    background-color: transparent;
}
html.DarkMode .PayMark {
    filter: brightness(0.92);
}

html.DarkMode body.LoginBody,
html.DarkMode .LoginBody .wrapper {
    background-color: var(--MxGround);
    color: var(--MxInk);
}
html.DarkMode .LoginBody .wrapper {
    background-color: #060c18;
    background-image:
        linear-gradient(rgba(6, 12, 24, var(--AuthImageTint, 0)), rgba(6, 12, 24, var(--AuthImageTint, 0))),
        var(--AuthImage, none),
        radial-gradient(46% 44% at 50% 45%, rgba(0, 70, 223, .26) 0%, rgba(0, 70, 223, 0) 70%),
        url("../img/code-wall.svg"),
        linear-gradient(180deg, #070e1c 0%, #03060e 100%);
}
html.DarkMode .LoginBody .inner {
    background: var(--MxCard);
    color: var(--MxInk);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}
html.DarkMode :where(.LoginBody) .form-control,
html.DarkMode :where(.LoginBody) .form-control:focus,
html.DarkMode :where(.LoginBody) select.form-control,
html.DarkMode :where(.LoginBody) textarea.form-control {
    background-color: #272F3F;
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--MxInk);
}
html.DarkMode :where(.LoginBody) .form-control:focus {
    box-shadow: none;
}

/* On an account page there is no header row to sit in */
.LoginBody .ModeToggle {
    position: absolute;
    top: 20px;
    right: calc(15% + 52px);
    z-index: 100;
}

/* The dashboard shortcut chips all take the theme colour */
html.DarkMode .bg-violet,
html.DarkMode .bg-blue,
html.DarkMode .bg-green,
html.DarkMode .bg-red {
    background-color: var(--ThemeColorEdge) !important;
}

html.DarkMode .btn-primary,
html.DarkMode .btn-primary:disabled,
html.DarkMode .btn-primary.disabled {
    background-color: var(--ThemeColorEdge);
    border-color: var(--ThemeColorEdge);
    color: #FFFFFF;
}
html.DarkMode .btn-primary:hover,
html.DarkMode .btn-primary:focus,
html.DarkMode .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ThemeColorHover);
    border-color: var(--ThemeColorHover);
    color: #FFFFFF;
}
html.DarkMode .sidebar-link.active {
    background: var(--ThemeColorEdge);
}

/* The menu closes but the toggle keeps the focus the browser put on it, and a
   plain a:focus would leave it coloured and underlined: a pointer press gets
   the resting look back, a keyboard one keeps its ring. */
.show > .HeadBtn:not(:hover):not(:focus-visible),
.HeadBtn:focus:not(:focus-visible) {
    background: rgba(19, 24, 44, 0.04);
    border-color: rgba(19, 24, 44, 0.1);
    color: var(--ThemeColor);
    text-decoration: none;
}
html.DarkMode .show > .HeadBtn:not(:hover):not(:focus-visible),
html.DarkMode .HeadBtn:focus:not(:focus-visible) {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--MxLine);
    color: var(--MxInk);
}

.sidebar-link i {
    -ms-flex: 0 0 28px;
    flex: 0 0 28px;
    width: 28px;
    text-align: center;
    color: var(--ThemeColor);
    opacity: 0.75;
}
.sidebar-link:hover i {
    opacity: 1;
}
.sidebar-link.active i,
.sidebar-link:focus i {
    opacity: 1;
}
.sidebar.shrink .sidebar-link i {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
}
@media (max-width: 1199.98px) {
    .sidebar .sidebar-link i,
    .sidebar.shrink .sidebar-link i {
        -ms-flex: 0 0 24px;
        flex: 0 0 24px;
        width: 24px;
        font-size: 18px;
        line-height: 1;
        text-align: center;
    }
}
.sidebar .sidebar-link i {
    -ms-flex: 0 0 22px;
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

.btn:hover,
.btn:focus,
.btn:focus-visible {
    text-decoration: none;
}

/* Page padding, halved: the pages wrap their content in .container-fluid.px-xl-5 with a */
/* .px-xl-5 is a Bootstrap utility, so it carries !important */
.page-holder .container-fluid.px-xl-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.page-holder .container-fluid > section.py-5,
.page-holder section.py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* ...and the gaps between the cards match it. */
.page-holder [class*="col-"].mb-5 {
    margin-bottom: 1.5rem !important;
}
.page-holder [class*="col-"].mb-4 {
    margin-bottom: 1.5rem !important;
}
.page-holder .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}
.page-holder .card + .card {
    margin-top: 1.5rem;
}

.page-holder .container-fluid > section > [class*="col-"],
.page-holder .container-fluid > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Two things were wrong with the page height. */
.page-holder {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    min-height: calc(100vh - 6rem);
}
.page-holder > .footer {
    margin-top: auto;
}

:where(body:not(.LoginBody)) h1,
:where(body:not(.LoginBody)) .h1 {
    font-size: 1.6rem;
}
:where(body:not(.LoginBody)) h2,
:where(body:not(.LoginBody)) .h2 {
    font-size: 1.4rem;
}
:where(body:not(.LoginBody)) h3,
:where(body:not(.LoginBody)) .h3 {
    font-size: 1.2rem;
}
:where(body:not(.LoginBody)) h4,
:where(body:not(.LoginBody)) .h4 {
    font-size: 1.1rem;
}
:where(body:not(.LoginBody)) h5,
:where(body:not(.LoginBody)) .h5 {
    font-size: 1rem;
}
:where(body:not(.LoginBody)) h6,
:where(body:not(.LoginBody)) .h6 {
    font-size: 0.95rem;
}

.page-holder .card-header .card-title,
.page-holder .card-header h4,
.page-holder .card-header h5,
.page-holder .card-header h6 {
    margin-bottom: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.page-holder .card-header .card-category {
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(19, 24, 44, 0.6);
}
html.DarkMode .page-holder .card-header .card-category {
    color: var(--MxInkSoft);
}

.ProviderList {
    max-width: 420px;
    margin: 0 auto;
    padding: 4px 0 14px;
}
.ProviderList .form-group {
    margin-bottom: 0;
    padding: 14px 0;
    text-align: center;
}
.ProviderList a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #13182C;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}
.ProviderList a:hover,
.ProviderList a:focus-visible {
    color: var(--ThemeColorLink);
}
.ProviderList a span {
    text-align: left;
}
.ProviderList img,
.ProviderList img[src*="payments/"] {
    max-width: none;
    max-height: 34px;
    width: auto;
}
.ProviderList img.ProviderIcon {
    opacity: 0.75;
}
.ProviderList hr {
    margin: 0;
    border: 0;
    border-top: solid rgba(19, 24, 44, 0.14) 1px;
    opacity: 1;
}
.ProviderList hr:last-child {
    display: none;
}
.ProviderList h3 {
    margin: 0;
    padding: 18px 0;
    color: rgba(19, 24, 44, 0.6);
    font-size: 1.05rem;
    text-align: center;
}
html.DarkMode .ProviderList a {
    color: var(--MxInk);
}
html.DarkMode .ProviderList a:hover,
html.DarkMode .ProviderList a:focus-visible {
    color: var(--ThemeColorBright);
}
html.DarkMode .ProviderList img.ProviderIcon {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
html.DarkMode .ProviderList hr {
    border-top-color: var(--MxLine);
}
html.DarkMode .ProviderList h3 {
    color: var(--MxInkSoft);
}
@media (max-width: 1024px) {
    .ProviderList .form-group {
        padding: 12px 0;
    }
    .ProviderList a {
        gap: 10px;
        font-size: 1rem;
    }
    .ProviderList img,
    .ProviderList img[src*="payments/"] {
        max-height: 28px;
    }
}

/* A table card holds three rows whether or not it has three to show:
   the 38px head and three 43px rows. */
.table-responsive:has(> .table) {
    min-height: 167px;
}

.DlgOverlay {
    --Dlg-bg: #FFFFFF;
    --Dlg-fg: #13182C;
    --Dlg-muted: #13182C;
    --Dlg-radius: 6px;
    --Dlg-backdrop: rgba(19, 24, 44, 0.42);
    --Dlg-shadow: 0 20px 48px rgba(19, 24, 44, 0.2);
}
.modal,
.modal-backdrop {
    --Dlg-bg: #FFFFFF;
    --Dlg-fg: #13182C;
    --Dlg-muted: #13182C;
    --Dlg-radius: 6px;
    --Dlg-backdrop: rgba(19, 24, 44, 0.42);
    --Dlg-shadow: 0 20px 48px rgba(19, 24, 44, 0.2);
}
html.DarkMode .DlgOverlay {
    --Dlg-bg: var(--MxCard);
    --Dlg-fg: var(--MxInk);
    --Dlg-muted: var(--MxInk);
    --Dlg-backdrop: rgba(5, 8, 12, 0.62);
    --Dlg-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
html.DarkMode .modal,
html.DarkMode .modal-backdrop {
    --Dlg-bg: var(--MxCard);
    --Dlg-fg: var(--MxInk);
    --Dlg-muted: var(--MxInk);
    --Dlg-backdrop: rgba(5, 8, 12, 0.62);
    --Dlg-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.DlgText {
    opacity: 0.72;
}
@media (max-width: 767.98px) {
    .DlgOverlay {
        padding: 16px;
    }
    .DlgBox {
        max-width: 100%;
    }
    .DlgActions {
        flex-direction: column;
        gap: 8px;
        margin-top: 18px;
    }
    .DlgBtn {
        width: 100%;
    }
}

.DlgOverlay {
    --Dlg-line: rgba(19, 24, 44, 0.12);
}
.modal,
.modal-backdrop {
    --Dlg-line: rgba(19, 24, 44, 0.12);
}
html.DarkMode .DlgOverlay {
    --Dlg-line: var(--MxLine);
}
html.DarkMode .modal,
html.DarkMode .modal-backdrop {
    --Dlg-line: var(--MxLine);
}

/* The consent rows sit in a half-width column, so the message this theme pins
   to the row's right edge landed mid-card, over the label. Full width, the way
   Capacitor's rows already are. */
.col-md-6.ColPadTop:has(.i-checks input[type="checkbox"]) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    /* the field above already leaves the gap; this column's own top padding
       would make the consent rows sit lower than the rest of the form */
    padding-top: 0;
}

/* the nested .row adds Bootstrap's negative gutter, which pushed the message
   past the edge of the card once the column was full width */
.col-md-6.ColPadTop:has(.i-checks input[type="checkbox"]) .i-checks.row {
    margin-left: 0;
    margin-right: 0;
}

.col-md-6.ColPadTop:has(.i-checks input[type="checkbox"]) .i-checks.row > .form-group {
    padding-left: 0;
    padding-right: 0;
}

/* The calendar this theme draws itself, so the date field can read yyyy-mm-dd
   on every machine instead of the browser's own locale format. */
.ThemeDatePicker {
    position: fixed;
    z-index: 1200;
    display: none;
    width: 292px;
    padding: 12px;
    background: var(--PickerSurface);
    border: 1px solid var(--PickerLine);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    color: var(--PickerText);
    font-size: 13px;
    line-height: 20px;
    user-select: none;
}
.ThemeDatePicker.open {
    display: block;
}
.ThemeDatePickerHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ThemeDatePickerTitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.ThemeDatePickerMonth,
.ThemeDatePickerYear {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 120px;
    height: 28px;
    padding: 0 18px 0 8px;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23808080' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 9px 6px;
    border: 1px solid var(--PickerLine);
    border-radius: 8px;
    color: var(--PickerText);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}
.ThemeDatePickerYear {
    max-width: 78px;
}
.ThemeDatePickerMonth:hover,
.ThemeDatePickerYear:hover,
.ThemeDatePickerMonth:focus,
.ThemeDatePickerYear:focus {
    background-color: var(--PickerHover);
    outline: none;
}
.ThemeDatePickerMonth option,
.ThemeDatePickerYear option {
    background: var(--PickerSurface);
    color: var(--PickerText);
}
.ThemeDatePickerStep {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--PickerLine);
    border-radius: 8px;
    color: var(--PickerText);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
/* the month arrows are icons, not the < and > characters: those sit on the
   font's maths axis, which rides above the middle of the button */
.ThemeDatePickerStep i {
    font-size: 12px;
    line-height: 1;
}
.ThemeDatePickerStep:hover {
    background: var(--PickerHover);
}
.ThemeDatePickerDays,
.ThemeDatePickerGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.ThemeDatePickerDays span {
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.55;
}
.ThemeDatePickerDay {
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
}
.ThemeDatePickerDay:hover:not(:disabled) {
    background: var(--PickerHover);
}
.ThemeDatePickerDay.outside {
    opacity: 0.35;
}
.ThemeDatePickerDay.today:not(.chosen) {
    box-shadow: inset 0 0 0 1px var(--PickerLine);
}
.ThemeDatePickerDay.chosen {
    background: var(--PickerAccent);
    color: var(--PickerOnAccent);
    font-weight: 600;
}
.ThemeDatePickerDay:disabled {
    opacity: 0.25;
    cursor: default;
}
.ThemeDatePickerFoot {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--PickerLine);
}
.ThemeDatePickerFoot button {
    padding: 4px 10px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--PickerAccent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ThemeDatePickerFoot button:hover {
    background: var(--PickerHover);
}
:root {
    --PickerSurface: #ffffff;
    --PickerLine: rgba(20, 30, 45, 0.14);
    --PickerText: #1b2129;
    --PickerHover: rgba(20, 30, 45, 0.07);
    --PickerAccent: var(--ThemeColor);
    --PickerOnAccent: #ffffff;
}
.DarkMode {
    --PickerSurface: #171d25;
    --PickerLine: rgba(255, 255, 255, 0.14);
    --PickerText: #eef2f6;
    --PickerHover: rgba(255, 255, 255, 0.08);
    /* the theme's navy all but disappears against the night panel, so the
       accent takes the bright end of the same colour, as the links do */
    --PickerAccent: var(--ThemeColorBright);
}

/* The consent rows carry an empty label between the box and its text, and as a
   block it pushed the text onto a line of its own. The row is a line now, and
   the message sits at its right rather than underneath - the way Capacitor
   lays the same two rows out. */
.i-checks .form-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.i-checks .form-group > .form-control-label:empty {
    display: none;
}
/* the policy links are the theme's navy, which all but disappears against the
   night card - by night they take the bright end of the same colour */
.DarkMode .i-checks .form-group span a {
    color: var(--ThemeColorBright);
}
.DarkMode .i-checks .form-group span a:hover,
.DarkMode .i-checks .form-group span a:focus-visible {
    color: var(--ThemeColorHover);
}
.i-checks .form-group .FieldError {
    top: -3px;
    bottom: auto;
    left: auto;
    right: 0;
    transform: none;
}
.i-checks .form-group .FieldError::before {
    /* halfway down the message, whatever its height: the notch meets the middle
       of the edge rather than a fixed distance from the top */
    top: 50%;
    bottom: auto;
    left: -5px;
    right: auto;
    margin-top: -4px;
    /* the arrow is the shared stylesheet's rotated square: the two edges that
       face out have to carry the colour, not just the width */
    border-left: 1px solid #e04343;
    border-bottom: 1px solid #e04343;
    border-top: 0;
    border-right: 0;
}

/* The shared stylesheet draws the message dark, which is this theme's night
   mode only - by day it takes the light palette instead. */
html:not(.DarkMode) .FieldError {
    background-color: #fdecec;
    border-color: #d93636;
    color: #a3201f;
    box-shadow: 0 8px 22px rgba(20, 30, 45, 0.16);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d93636'%3E%3Cpath d='M8 1.5 15 14H1L8 1.5zm0 4.2a.8.8 0 0 0-.8.85l.2 3.1a.6.6 0 0 0 1.2 0l.2-3.1A.8.8 0 0 0 8 5.7zm0 5.2a.85.85 0 1 0 0 1.7.85.85 0 0 0 0-1.7z'/%3E%3C/svg%3E");
}
html:not(.DarkMode) .FieldError::before {
    background: #fdecec;
    border-color: #d93636;
}

/* By night the dashboard's primary button is the bright edge of the theme
   colour, while the auth pages kept their own navy - the submit button follows
   the dashboard now. The password eye is a button too, so it is left out. */
html.DarkMode :where(.LoginBody) button:not(.PwToggle),
html.DarkMode :where(.LoginBody) .BtnLink {
    background: var(--ThemeColorEdge);
}
html.DarkMode :where(.LoginBody) button:not(.PwToggle):hover,
html.DarkMode :where(.LoginBody) button:not(.PwToggle):focus-visible,
html.DarkMode :where(.LoginBody) button:not(.PwToggle):active,
html.DarkMode :where(.LoginBody) .BtnLink:hover,
html.DarkMode :where(.LoginBody) .BtnLink:focus-visible,
html.DarkMode :where(.LoginBody) .BtnLink:active {
    background: var(--ThemeColorHover);
}


/* An empty table hands its three-row height to the message instead, which
   centres in it. The colour is the card's own, dimmed, so it follows the
   light and dark palettes without a value of its own. */
.card-body > .table-responsive:has(~ .Nohistoryyet) {
    min-height: 0;
}
.card-body > .Nohistoryyet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    min-height: 117px;
    padding: 0;
    text-align: center;
    font-size: 17px;
    line-height: 26px;
    opacity: 0.6;
}


/* The confirmation pages say one thing and send the reader back. The notice
   takes the place a field would hold, and the link is the submit button. */
/* the theme tints links on hover - the back link is a button, so it keeps the
   button's own white label */
:where(.LoginBody) .BtnLink:hover,
:where(.LoginBody) .BtnLink:focus,
:where(.LoginBody) .BtnLink:active {
    color: #fff;
}
:where(.LoginBody) .inner > .ConfirmBox {
    width: 100%;
    padding: 18px 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
:where(.LoginBody) .FormNotice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(24, 68, 82, 0.18);
    border-radius: 10px;
    background: rgba(24, 68, 82, 0.03);
    text-align: left;
}
:where(.LoginBody) .FormNotice i {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 18px;
    opacity: 0.55;
}
:where(.LoginBody) .FormNotice p {
    font-size: 13px;
    line-height: 20px;
}
html.DarkMode :where(.LoginBody) .FormNotice {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}


/* Register's consent rows: the box, its label and the text on one line, with
   room between the rows and before the button. */
:where(.LoginBody) .i-checks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0;
}
:where(.LoginBody) .i-checks .form-group {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 10px;
    line-height: 20px;
    /* the column's own gap spaces the rows - the form-group margin would add a
       second one on top of it */
    margin-bottom: 0;
}
:where(.LoginBody) .i-checks .form-group input[type="checkbox"] {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
:where(.LoginBody) .i-checks .form-group span {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}


/* The dropdown marker is drawn as an SVG, so it does not inherit the icon
   colour - by night it needs its own light copy, and the native option list
   takes the card's colours instead of the browser's white. */
html.DarkMode select.form-control,
html.DarkMode .form-select,
html.DarkMode .LoginBody select.form-control {
    --SelectArrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E6E9EF' fill-opacity='0.55' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}
html.DarkMode select.form-control option,
html.DarkMode .form-select option {
    background-color: var(--MxCard);
    color: var(--MxInk);
}


/* The message belongs above the field on every page: below it, it lands on the
   next row. Checkbox rows keep the side placement they already have, so they
   are left out here. */
/* measured up from the field rather than down from the group: the group also
   holds the label, whose height varies, and the arrow has to meet the field's
   top border wherever that falls */
.page-holder .FieldErrorHost:not(:has(input[type="checkbox"])) {
    --FieldBoxH: 36px;
}
.page-holder .FieldErrorHost:not(:has(input[type="checkbox"])):has(.FileInput) {
    --FieldBoxH: 48px;
}
.page-holder .FieldErrorHost:not(:has(input[type="checkbox"])) .FieldError {
    top: auto;
    /* the arrow is an 8px square on its corner and so reaches 5.66px: 6px puts
       its tip on the field's border rather than just inside it */
    bottom: calc(var(--FieldBoxH) + 6px);
    left: auto;
    right: 0;
    z-index: 40;
    -webkit-transform: none;
    transform: none;
}
.page-holder .FieldErrorHost:not(:has(input[type="checkbox"])) .FieldError::before {
    top: auto;
    bottom: -5px;
    left: auto;
    right: 14px;
    margin-top: 0;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #e04343;
    border-bottom: 1px solid #e04343;
}
/* on the account pages the field has no label above it, so the message clears
   the field completely rather than sitting over its top edge */
:where(.LoginBody) .FieldErrorHost:not(:has(input[type="checkbox"])) .FieldError {
    top: auto;
    /* 6px, like the dashboard: the arrow reaches 5.66px, so its tip lands on
       the field's border */
    bottom: calc(100% + 6px);
    left: auto;
    right: 0;
    z-index: 40;
    -webkit-transform: none;
    transform: none;
}
/* the host is one field, so a message longer than it reaches back over its
   neighbour rather than being squeezed inside the field's own width */
:where(.LoginBody) .FieldErrorHost .FieldError {
    max-width: none;
}
:where(.LoginBody) .FieldErrorHost:not(:has(input[type="checkbox"])) .FieldError::before {
    top: auto;
    bottom: -5px;
    left: auto;
    right: 14px;
    margin-top: 0;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #e04343;
    border-bottom: 1px solid #e04343;
}

/* A button inside a table row borrows the row's line height rather than setting
   it: the full-size button is 1.5rem of padding taller than the text beside it. */
.page-holder .table .btn {
    padding: 0.2rem 1rem;
    font-size: 0.8rem;
    line-height: 1.4;
    min-width: 72px;
}

/* ---------- tick boxes ----------------------------------------------------
   Drawn rather than left to the browser, so they match the rest of the theme
   and read the same on both the account pages and the dashboard. */
.page-holder input[type="checkbox"],
.LoginBody input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    /* nudged down so the box sits on the first line's optical centre */
    margin: 1px 8px 0 0;
    vertical-align: top;
    --CheckEdge: rgba(19, 24, 44, 0.45);
    border: 1px solid var(--CheckEdge);
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.page-holder input[type="checkbox"]:hover:not(:checked):not(:disabled),
.LoginBody input[type="checkbox"]:hover:not(:checked):not(:disabled) {
    --CheckEdge: rgba(19, 24, 44, 0.75);
}
.page-holder input[type="checkbox"]:checked,
.LoginBody input[type="checkbox"]:checked {
    background-color: var(--ThemeColor);
    border-color: var(--ThemeColor);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.7 9.5 3.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}
.page-holder input[type="checkbox"]:focus-visible,
.LoginBody input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ThemeColor);
    outline-offset: 2px;
}
.page-holder input[type="checkbox"]:disabled,
.LoginBody input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: default;
}
html.DarkMode .page-holder input[type="checkbox"],
html.DarkMode .LoginBody input[type="checkbox"] {
    --CheckEdge: rgba(255, 255, 255, 0.4);
}
html.DarkMode .page-holder input[type="checkbox"]:not(:checked),
html.DarkMode .LoginBody input[type="checkbox"]:not(:checked) {
    background-color: transparent;
}
/* by night the primary button is the bright end of the theme colour, and a
   ticked box is the same kind of mark, so it follows the button */
html.DarkMode .page-holder input[type="checkbox"]:checked,
html.DarkMode .LoginBody input[type="checkbox"]:checked {
    background-color: var(--ThemeColorEdge);
    border-color: var(--ThemeColorEdge);
}
html.DarkMode .page-holder input[type="checkbox"]:hover:not(:checked):not(:disabled),
html.DarkMode .LoginBody input[type="checkbox"]:hover:not(:checked):not(:disabled) {
    --CheckEdge: rgba(255, 255, 255, 0.7);
}
/* the row itself: box and wording on one line, the wording free to wrap */
.page-holder .i-checks .form-group,
.LoginBody .i-checks .form-group {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.page-holder .i-checks .form-group > label.form-control-label,
.LoginBody .i-checks .form-group > label.form-control-label {
    display: none;
}

/* The card's gutter matches the page's, so the two edges line up. */
.page-holder .card-body {
    padding: 1.5rem;
}
.page-holder .card-header {
    padding: 1.5rem 1.5rem;
}

/* The page has one gutter, the same on all four sides. The section sets it at
   the top and the sides; at the bottom the columns' own margins were adding to
   it, so the page ended with twice the gap it began with. The space between one
   card and the next is the row's gutter now, which does not reach the edge. */
.page-holder section > .row {
    --bs-gutter-y: 1.5rem;
}
.page-holder section > .row:last-child > [class*="col-"],
.page-holder section > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
}

/* The fields are pills, so their text starts past the curve. The label starts
   there too, rather than at the card's edge where it would hang to the left of
   everything under it. 18px is the corner itself: half of the field's height. */
.page-holder label.form-control-label {
    padding-left: 16px;
}

/* A form's action sits at the right, whatever column it was written into. */
.page-holder form [class*="col-"]:has(> button[type="submit"]),
.page-holder form [class*="col-"]:has(> .btn[type="submit"]) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: right;
}

/* Withdraw keeps a line for its result message; empty, it was holding a band of
   space between the consent rows and the action. It takes room when it has
   something to say. The action then follows at the form's own 16px rhythm
   rather than the extra 25px its column carries. */
.page-holder .TextAlert:has(> h5:empty) {
    display: none;
}
.page-holder form [class*="col-"].ColPadTop:has(> button[type="submit"]) {
    /* the row above already leaves the form's 16px gap */
    padding-top: 0;
}

/* One field height everywhere. The dashboard's padding works out to 36px, and
   saying so outright keeps a select, a date, a file name field or the login
   page's own fields from coming out a few pixels short or tall. */
.page-holder .form-control:not(textarea),
.LoginBody .form-control:not(textarea),
.page-holder select.form-control:not([size]):not([multiple]),
.LoginBody select.form-control:not([size]):not([multiple]) {
    height: 36px;
    min-height: 36px;
}

/* Every table keeps the same row, whether or not the row carries a button: the
   cell sets the height rather than whatever happens to sit in it. */
.page-holder .table > tbody > tr > td {
    height: 43px;
    vertical-align: middle;
}

/* Cancelling a withdrawal is an undoing, not a warning, so the button is drawn
   the way the error messages are: an outline by default, and the same pale red
   fill under the pointer. */
.page-holder .table .btn.cancelWD {
    background: transparent;
    border: 1px solid #d93636;
    color: #a3201f;
}
.page-holder .table .btn.cancelWD:hover,
.page-holder .table .btn.cancelWD:focus,
.page-holder .table .btn.cancelWD:focus-visible,
.page-holder .table .btn.cancelWD:not(:disabled):not(.disabled):active {
    background: #fdecec;
    border-color: #d93636;
    color: #a3201f;
}
html.DarkMode .page-holder .table .btn.cancelWD {
    border-color: #e04343;
    color: #ff9a9a;
}
html.DarkMode .page-holder .table .btn.cancelWD:hover,
html.DarkMode .page-holder .table .btn.cancelWD:focus,
html.DarkMode .page-holder .table .btn.cancelWD:focus-visible,
html.DarkMode .page-holder .table .btn.cancelWD:not(:disabled):not(.disabled):active {
    background: #2a1519;
    border-color: #e04343;
    color: #ffb3b3;
}

/* A field that cannot be typed in says so under the pointer, the way the
   disabled dropdown already does. */
.page-holder .form-control:disabled,
.page-holder .form-control[readonly],
.LoginBody .form-control:disabled,
.LoginBody .form-control[readonly],
.page-holder .position-relative:has(> .form-control:disabled) .FieldIcon,
.page-holder .position-relative:has(> .form-control[readonly]) .FieldIcon {
    cursor: not-allowed;
}

/* One line, centred in the field. The login fields and the document rows carry
   no vertical padding of their own, so their text had nothing holding it in the
   middle of the 36px box; the line is the box's height instead. */
.LoginBody .form-control:not(textarea),
.DocRow .FileInput .form-control {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 34px;
}

/* ---------- small screens -------------------------------------------------
   The same handling Capacitor and Transmitter give a phone or a tablet:
   a table stops being a table, the page's gutters close up, and an action
   takes the width it is given. */

/* A nine column table cannot be read on a tablet, so each row becomes a card
   and every cell says which column it came from. The names are on the cells
   themselves, so nothing here depends on the order they are written in. */
@media (max-width: 1024px) {
    .page-holder .table-responsive {
        overflow-x: visible;
    }
    .page-holder .table thead {
        display: none;
    }
    .page-holder .table,
    .page-holder .table tbody,
    .page-holder .table tbody tr,
    .page-holder .table tbody tr > td,
    .page-holder .table tbody tr > th {
        display: block;
        width: 100%;
    }
    .page-holder .table tbody tr {
        margin-bottom: 10px;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(19, 24, 44, 0.12);
        border-radius: 12px;
    }
    .page-holder .table tbody tr:last-child {
        margin-bottom: 0;
    }
    .page-holder .table tbody tr > td,
    .page-holder .table tbody tr > th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        height: auto;
        min-height: 38px;
        /* the cell carries the row's gutter, so its background runs the whole
           width of the row rather than stopping short of the corners */
        padding: 5px 14px;
        border: 0;
        font-size: 16px;
        line-height: 1.3;
        text-align: right;
    }
    .page-holder .table tbody tr > td + td,
    .page-holder .table tbody tr > th + td {
        border-top: 1px solid rgba(19, 24, 44, 0.08);
    }
    .page-holder .table tbody tr > td::before,
    .page-holder .table tbody tr > th::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: rgba(19, 24, 44, 0.6);
        font-size: 14px;
        text-align: left;
    }
    /* the row number is the card's own, and a card needs no number */
    .page-holder .table tbody tr > [data-label="#"] {
        display: none;
    }
    .page-holder .table tbody tr > td .btn {
        margin: 0;
    }
    html.DarkMode .page-holder .table tbody tr {
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
    }
    html.DarkMode .page-holder .table tbody tr > td + td,
    html.DarkMode .page-holder .table tbody tr > th + td {
        border-top-color: rgba(255, 255, 255, 0.07);
    }
    html.DarkMode .page-holder .table tbody tr > td::before,
    html.DarkMode .page-holder .table tbody tr > th::before {
        color: var(--MxInkSoft);
    }
}

/* On a phone the page keeps a narrower gutter, and so does the card, so the
   fields are not squeezed into the middle of the screen. */
@media (max-width: 767.98px) {
    .page-holder .container-fluid,
    .page-holder .container-fluid.px-xl-5 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .page-holder .card-body,
    .page-holder .card-header {
        padding: 16px;
    }
    /* an action has the width of the form it closes; the ones that sit beside
       something - in a table row, or next to a field - keep their own size */
    .page-holder form .btn,
    .page-holder .card-body > .btn {
        width: 100%;
    }
    .page-holder .table .btn,
    .page-holder .DocRow .FileInput .btn,
    .page-holder .PwToggle {
        width: auto;
    }
    /* a button in a stacked column takes the width of the field above it */
    .page-holder .row > [class*="col-"]:has(> .btn) {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .page-holder .row > [class*="col-"]:has(> .btn) > .btn {
        width: 100%;
    }
    .page-holder .DocRow .FileInput .btn.submitfile,
    .page-holder .DocRow .FileInput .btn.FileClear {
        width: 32px;
    }
}

/* The header on a small screen: one row, with the burger at the left, the
   brand in the middle and the three controls at the right. Left alone, the
   navbar wraps below its own breakpoint and the controls land on top of the
   page, and the logo keeps its full desktop height. */
@media (max-width: 991.98px) {
    .navbar.NavBarTall {
        height: auto;
        min-height: 64px;
        flex-wrap: nowrap;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .navbar .sidebar-toggler {
        margin-right: 12px !important;
        flex: 0 0 auto;
    }
    /* the brand is not in the header here: it stands on the page below it */
    .navbar .navbar-brand {
        display: none;
    }
    :where(body:not(.LoginBody)) .LogoImage {
        max-height: 48px;
        max-width: 220px;
    }
    .navbar > ul.ms-auto {
        flex: 0 0 auto;
        margin-left: 12px !important;
    }
    .navbar > ul.ms-auto > .nav-item {
        margin-right: 8px !important;
    }
    .navbar > ul.ms-auto > .nav-item:last-child {
        margin-right: 0 !important;
    }
}
@media (max-width: 575.98px) {
    :where(body:not(.LoginBody)) .LogoImage {
        max-height: 40px;
        max-width: 190px;
    }
    .navbar .HeadBtn {
        width: 34px;
        height: 34px;
    }
    .navbar > ul.ms-auto > .nav-item {
        margin-right: 6px !important;
    }
}

/* A field column takes the whole width from a tablet down: half of a tablet is
   narrower than the form was drawn for. The columns holding an action keep
   their own width, so the button still sits beside what it belongs to. */
@media (max-width: 1024px) {
    .page-holder .row:not(.align-items-end) > [class*="col-md-"]:not([class*="col-md-auto"]),
    .page-holder .row:not(.align-items-end) > [class*="col-sm-"]:not([class*="col-sm-auto"]),
    .page-holder [class*="col-lg-"]:not([class*="col-lg-auto"]),
    .page-holder [class*="col-xl-"]:not([class*="col-xl-auto"]) {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

}

/* The dashboard's last section carries no padding of its own, so its card sat
   against the footer. Whatever a page ends with, it ends with the page's own
   gutter below it. */
.page-holder .container-fluid > section:last-of-type {
    padding-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
    .page-holder .container-fluid > section:last-of-type {
        padding-bottom: 16px;
    }
}

/* A button pressed with the pointer keeps no ring once it is released; the ring
   is for keyboard focus, which needs to be seen. */
.page-holder .btn:focus:not(:focus-visible),
.LoginBody .btn:focus:not(:focus-visible),
.page-holder .HeadBtn:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

/* With the drawer open the page behind it goes soft and dark, so the menu is
   clearly the thing in hand - and the dimmed page is the way back out of it. */
@media (max-width: 1199.98px) {
    /* the page itself goes soft, rather than a pane over it sampling what is
       behind: a backdrop filter has to guess at that and can double the image */
    body:has(.sidebar.show) header.header,
    body:has(.sidebar.show) .page-holder {
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }
    body:has(.sidebar.show)::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background: rgba(10, 16, 28, 0.38);
    }
    body:has(.sidebar.show) {
        overflow: hidden;
    }
}

/* Where the rows are read as cards, the card's own title is centred over them
   rather than hugging the left edge of a narrow screen. */
@media (max-width: 1024px) {
    .page-holder .card > .card-header {
        text-align: center;
    }
    .page-holder .card > .card-header > h6 {
        width: 100%;
    }
}

/* The three shortcuts at the top of the dashboard: a line of text and an icon,
   so they do not need the room a full card takes. */
.page-holder .roundy:has(.dot) {
    padding: 0.85rem 1.1rem !important;
}
.page-holder .roundy:has(.dot) .icon {
    min-width: 1.9rem;
    max-width: 1.9rem;
    min-height: 1.9rem;
    max-height: 1.9rem;
    font-size: 0.85rem;
}
.page-holder .roundy:has(.dot) h6 {
    font-size: 0.85rem;
}

/* The brand between the header and the page's own content, on small screens
   only: on a wide one it stays in the header where it has always been. */
.BrandBar {
    display: none;
}
@media (max-width: 991.98px) {
    .BrandBar {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 22px 16px 6px;
    }
    .BrandBarLink {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
    }
}

/* A menu item held down took Bootstrap's solid navy while keeping its own dark
   ink, which left the wording unreadable. Pressed reads like hovered. */
.LangMenu .language:active,
.UserMenu .dropdown-item:active,
.UserMenu .dropdown-item.active {
    background: rgba(var(--ThemeRingRgb), 0.18);
    color: var(--ThemeColorLink);
}
html.DarkMode .LangMenu .language:active,
html.DarkMode .UserMenu .dropdown-item:active,
html.DarkMode .UserMenu .dropdown-item.active {
    background: rgba(var(--ThemeRingRgb), 0.26);
    color: #FFFFFF;
}

/* A short page left the footer partway up the screen with the page's own
   background showing below it. The content column is at least as tall as what
   is left of the window under the header, and the footer sits at its foot, so
   the footer is either below the content or at the bottom of the screen -
   never in between. */
.page-holder {
    min-height: calc(100vh - 6rem);
}
@media (max-width: 991.98px) {
    .page-holder {
        min-height: calc(100vh - 64px);
    }
}

/* The account pages hang their two controls in the window's top right. On a
   wide screen that is clear of the card, but as the screen narrows the card
   grows under them and the logo ends up behind the buttons. Here they take a
   row of their own at the top of the page and the card begins below it. */
@media (max-width: 991.98px) {
    .LoginBody .ModeToggle {
        top: 14px;
        right: 68px;
    }
    .LoginBody .fixed-plugin {
        top: 14px;
        right: 16px;
    }
    .LoginBody .wrapper {
        padding-top: 68px;
    }
}

/* Register holds twice the fields Login does - two of them side by side - so
   its card has a wider floor than the others. The consent rows are what tell
   the two apart. */
.LoginBody .inner:has(.i-checks) {
    min-width: min(460px, 100%);
}

/* A row in a card keeps the form's own 16px between its lines. As a gap rather
   than a margin it appears only where the columns actually wrap onto a new
   line: nothing is added when they sit side by side, and nothing is left
   hanging under the last line. */
.page-holder .card-body .row {
    row-gap: 16px;
}

/* the chat panel's wording at this theme's own weight */
.chatbox .chatbox-title h5,
.chatbox .start-conversation,
.chatbox .btn {
    font-weight: 500;
}

/* one gap between consent rows, the same as between two fields */
.page-holder .i-checks.row > .form-group,
.LoginBody .i-checks.row > .form-group {
    margin-bottom: 0;
}

/* an empty validation summary takes no room: it was starting the Change
   Password card a line lower than Edit Profile beside it */
.page-holder .validation-summary-valid,
.LoginBody .validation-summary-valid {
    display: none;
}

/* a card that is a link still reads as a card - never underlined, and on
   hover it takes the same grey wash a sidebar item does, with the label
   turning to the theme colour. */
.page-holder a:has(> .roundy),
.page-holder a:has(> .roundy):hover,
.page-holder a:has(> .roundy):focus {
    color: inherit;
    text-decoration: none;
}
.page-holder a:has(> .roundy) h6,
.page-holder a:has(> .roundy):hover h6,
.page-holder a:has(> .roundy):focus h6 {
    text-decoration: none;
}
.page-holder a:has(> .roundy) > .roundy {
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}
.page-holder a:has(> .roundy) h6 {
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.page-holder a:has(> .roundy):hover > .roundy,
.page-holder a:has(> .roundy):focus > .roundy {
    background-color: #f5f5f5 !important;
}
.page-holder a:has(> .roundy):hover h6,
.page-holder a:has(> .roundy):focus h6 {
    color: var(--ThemeColorEdge);
}

/* nothing adds to the card's own padding at the foot */
.page-holder .card-body > :last-child,
.page-holder .card-body > :last-child > :last-child,
.page-holder .card-body > :last-child > :last-child > :last-child,
.page-holder .card-body > :last-child > :last-child > :last-child > :last-child {
    margin-bottom: 0;
}

/* In a grid the row's own gap is what separates the lines, so the cells drop
   the margin they carry when they stand alone in a form. It also stopped the
   closing line from growing the card's foot: zeroing the last cell alone left
   the one beside it still pushing down. */
.page-holder .card-body .row > .form-group {
    margin-bottom: 0;
}

/* The chain above counts elements from the card's floor up, so a stray input or
   a comment at the end of a form puts it off by one. A form's closing group is
   its last block whatever trails it, and it owes the card no margin. */
.page-holder .card-body form > .form-group:last-of-type,
.page-holder .card-body form > .form-group:last-of-type > .btn,
.page-holder .card-body form > .form-group:last-child,
.page-holder .card-body form > .form-group:last-child > .btn {
    margin-bottom: 0;
}


/* A field that opens a calendar says so on its right, the way a select says it
   opens a list. The date can still be typed - yyyy-mm-dd is checked on blur. */
.form-control[data-date="iso"],
input[data-date="iso"] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23808080' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1.9' y='3.1' width='12.2' height='11' rx='2'/%3E%3Cpath d='M1.9 6.6h12.2M5.3 1.6v2.6M10.7 1.6v2.6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    padding-right: 38px !important;
}

.ThemeDatePickerStep:disabled {
    opacity: 0.35;
    cursor: default;
}
.ThemeDatePickerStep:disabled:hover {
    background: transparent;
}
.ThemeDatePickerMonth option:disabled,
.ThemeDatePickerYear option:disabled {
    opacity: 0.45;
}

.ThemeDatePickerToday:disabled,
.ThemeDatePickerClear:disabled {
    opacity: 0.35;
    cursor: default;
    text-decoration: none;
}

/* ============================================================
   MODAL
   the pop-up forms dressed as this theme's dialog
   ============================================================ */

/* Create Account, Change Leverage and Redeem open as Bootstrap modals, which
   came up in Bootstrap's own white whatever the theme or mode. They take the
   dialog's colours instead - the --Dlg-* values are given to .modal and
   .modal-backdrop beside each rule that gives them to the dialog, light and
   dark alike - and its shape: radius, shadow, padding, no rules between
   header, body and footer. The views close them with either Bootstrap's old
   .close or its newer .btn-close; both become the same quiet cross. The box
   is named through .modal because some views also give it a theme class
   that paints its own background. */
.modal .modal-content {
    background: var(--Dlg-bg);
    color: var(--Dlg-fg);
    border: solid var(--Dlg-line) 1px;
    border-radius: var(--Dlg-radius);
    box-shadow: var(--Dlg-shadow);
}
/* a dialog that asks for details - the Paybox missing-details step - lays
   its fields out as the theme's forms do, not centred like its message */
.DlgForm {
    margin-top: 8px;
    text-align: left;
}
.DlgForm .form-group {
    margin-bottom: 14px;
}
.DlgForm .form-group:last-child {
    margin-bottom: 0;
}
/* centred on the screen, as the dialog is */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin, 1.75rem) * 2);
}
.modal-header,
.modal-footer {
    border: 0;
}
.modal-header {
    padding: 22px 24px 6px;
}
.modal-body {
    padding: 10px 24px;
}
.modal-footer {
    padding: 6px 24px 22px;
}
.modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}
.modal-header .close,
.modal-header .btn-close {
    width: auto;
    height: auto;
    margin: 0 0 0 auto;
    padding: 0 4px;
    background: none;
    border: 0;
    box-shadow: none;
    filter: none;
    color: inherit;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
}
.modal-header .btn-close::before {
    content: "\00d7";
}
.modal-header .close:hover,
.modal-header .close:focus-visible,
.modal-header .btn-close:hover,
.modal-header .btn-close:focus-visible {
    opacity: 1;
}
.modal-backdrop {
    background-color: var(--Dlg-backdrop);
}
.modal-backdrop.show {
    opacity: 1;
}
/* the required-field star is navy in the views, lost on a dark dialog */
.modal-body .StarNavy {
    color: var(--Dlg-error);
}

/* ============================================================
   BUSY BUTTONS
   the spinner a button shows while the server answers
   ============================================================ */

/* Set by the BUSY BUTTONS script: a pressed button the server has to answer
   carries .is-busy and a .BtnSpinner on the left of its label, drawn in the
   label's own colour. The script also switches it off, so it takes this
   theme's own disabled look; an element that cannot be switched off - a
   <div> used as a button - is dimmed and made deaf to the pointer here. */
.BtnSpinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: BtnSpin 0.7s linear infinite;
}
@keyframes BtnSpin {
    to {
        transform: rotate(360deg);
    }
}
.is-busy,
.is-busy:disabled {
    cursor: progress;
}
.is-busy:not(button):not(input) {
    opacity: 0.65;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .BtnSpinner {
        animation-duration: 1.6s;
    }
}