/* Our layer on top of the panel's stylesheets: only what the captured CSS doesn't cover. */
.rules-modal .rules-modal-body { display: flex; min-height: 60vh; }
.rules-modal .rules-left-sidebar { width: 220px; flex: 0 0 220px; max-height: 70vh; overflow-y: auto; border-right: 1px solid #dee2e6; }
.rules-modal .rules-left-sidebar .nav-pills { flex-direction: column; }
.rules-modal .rules-left-sidebar .nav-link { border-radius: 0; padding: 8px 12px; }
.rules-modal .rules-content { flex: 1; max-height: 70vh; overflow-y: auto; padding: 0 12px; }
.rules-modal .rules-content .tab-pane { display: none; }
.rules-modal .rules-content .tab-pane.active { display: block; opacity: 1; }
.rules-modal .rules-content-title { font-weight: 700; padding: 8px 0 4px; text-transform: capitalize; }
.mx-datepicker-popup { background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.mx-range-wrapper { display: flex; }
.vertical-menu li[data-level] > span { cursor: pointer; }
.gd-bet-lock-row td { vertical-align: middle; }
/* loader fallback (only when the theme stylesheet doesn't draw #loader-full) */
#loader-full.wl-loader { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .35); }
#loader-full.wl-loader::after { content: ''; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 4px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: wl-spin .75s linear infinite; }
@keyframes wl-spin { to { transform: rotate(360deg); } }

/* Account List: the balance arrow */
#user-balance { cursor: pointer; }

/* vue-js-switch (Change Status, Multi Login …): the layout of the pill, knob and on / off text, kept here too (last
   stylesheet) so no theme rule can undo it — colours stay the theme's */
.vue-js-switch { display: inline-block !important; position: relative !important; vertical-align: middle; user-select: none; font-size: 10px; cursor: pointer; }
.vue-js-switch .v-switch-input { opacity: 0 !important; position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }
.vue-js-switch .v-switch-core { display: block !important; position: relative !important; box-sizing: border-box; margin: 0 !important; transition: border-color .3s, background-color .3s; }
.vue-js-switch .v-switch-core .v-switch-button { display: block !important; position: absolute !important; overflow: hidden; top: 0 !important; left: 0 !important; border-radius: 100% !important; z-index: 2; }
.vue-js-switch .v-switch-label { position: absolute !important; top: 0 !important; font-weight: 600; z-index: 1; margin: 0 !important; }
.vue-js-switch .v-switch-label.v-left { left: 10px !important; right: auto !important; }
.vue-js-switch .v-switch-label.v-right { right: 10px !important; left: auto !important; }

/* header "All Client" search (vue-multiselect look of the reference panel): white box, the list right under it,
   "List is empty." / "No elements found" rows, the highlighted client in the panel blue */
.site-searchbox { position: relative; }
.site-searchbox .multiselect { position: relative; display: block; min-height: 40px; width: 100%; text-align: left; color: #495057; box-sizing: content-box; cursor: pointer; }
.site-searchbox .multiselect__tags { min-height: 40px; display: block; padding: 8px 40px 0 12px; border-radius: 5px; border: 1px solid #fff; background: #fff; font-size: 14px; box-sizing: border-box; }
.site-searchbox .multiselect--active .multiselect__tags { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: #ced4da; }
.site-searchbox .multiselect__input, .site-searchbox .multiselect__single, .site-searchbox .multiselect__placeholder { display: inline-block; min-height: 20px; line-height: 20px; border: none; border-radius: 5px; background: #fff; padding: 0; margin-bottom: 8px; font-size: 14px; color: #495057; vertical-align: top; width: 100%; box-sizing: border-box; outline: none; }
.site-searchbox .multiselect__placeholder { color: #74788d; }
.site-searchbox .multiselect__select { position: absolute; width: 40px; height: 38px; right: 1px; top: 1px; }
.site-searchbox .multiselect__content-wrapper { position: absolute; display: block; left: 0; right: 0; top: 100%; background: #fff; width: 100%; max-height: 300px; overflow: auto; border: 1px solid #ced4da; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; z-index: 1050; -webkit-overflow-scrolling: touch; }
.site-searchbox .multiselect__content { list-style: none; display: inline-block; padding: 0; margin: 0; min-width: 100%; vertical-align: top; }
.site-searchbox .multiselect__option { display: block; padding: 12px; min-height: 40px; line-height: 16px; font-size: 14px; color: #495057; text-decoration: none; white-space: nowrap; cursor: pointer; }
.site-searchbox .multiselect__option--highlight { background: #556ee6; color: #fff; outline: none; }
.site-searchbox .multiselect__option--selected { font-weight: 600; }
.site-searchbox .multiselect__option--selected.multiselect__option--highlight { background: #556ee6; color: #fff; }

/* Account List: the balance arrow — the row keeps its size; an invisible area around the arrow takes the click too,
   and the arrow turns smoothly */
.master-balance > .text-center[data-act="mb"] { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.master-balance #user-balance { position: relative; transition: transform .3s ease; }
.master-balance #user-balance::after { content: ''; position: absolute; top: -12px; bottom: -12px; left: -28px; right: -28px; }
.master-balance.mb-open #user-balance { transform: rotate(180deg); }
/* the login page's loader: the same loader on a white overlay (only the colour behind it changes) */
#loader-full.wl-white { background-color: #fff !important; }
#loader-full.wl-loader.wl-white::after { border-color: rgba(0, 0, 0, .12); border-top-color: #556ee6; }
#loader-full.wl-spin::after { content: ''; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 4px solid rgba(0, 0, 0, .12); border-top-color: #556ee6; border-radius: 50%; animation: wl-spin .75s linear infinite; }