.fa-stop:before {
  content: "\f04d";
}

.fa-volume-high:before,
.fa-volume-up:before {
  content: "\f028";
}

button.cpick.border.btn {
  border-radius: 5px !important;
  box-shadow: inset 1px 1px 1px 0 #9494946b, 0 0 2px #9494949e;
  border: none !important;
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-sign-in:before {
  content: "\f090";
}

#coomentes .popover.top {
  margin-top: -4px;
  height: 200px;
}

.borderg.nackname {
  background-color: #f0f8ff;
  padding: 2px;
  margin-bottom: 5px;
  border: 1px solid #000;
  word-break: break-word;
  box-shadow: 0 0 2px 1px;
}

.value-kshf {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  margin-bottom: 4px;
  padding: 3px 4px;
  background: rgba(255, 255, 255, .72);
  border-radius: 4px;
}

span.reveal_names__item__key {
  background-color: #464646;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  width: 92px;
  text-align: center;
  display: inline-block;
  margin-right: 5px;
}

.value-kshf .tech-value {
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.55;
  overflow-wrap: anywhere;
  user-select: text;
}

@font-face {
  font-family: "FontAwesome";
  src: url(../fonts/fontawesome-webfont3295.eot?v=4.5.0);
  src: url(../fonts/fontawesome-webfontd41d.eot?#iefix&v=4.5.0) format("embedded-opentype"), url(../fonts/fontawesome-webfont3295.woff2?v=4.5.0) format("woff2"), url(../fonts/fontawesome-webfont3295.woff?v=4.5.0) format("woff"), url(../fonts/fontawesome-webfont3295.ttf?v=4.5.0) format("truetype"), url(../fonts/fontawesome-webfont3295.svg?v=4.5.0#fontawesomeregular) format("svg");
  font-weight: 400;
  font-style: normal;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-phone:before {
  content: "\f095";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-area-chart:before {
  content: "\f1fe";
}

.fa-key:before {
  content: "\f084";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-search::before {
  content: "";
}

.fa-envelope-o::before {
  content: "";
}

.fa-heart::before {
  content: "";
}

.fa-star::before {
  content: "";
}

.fa-star-o::before {
  content: "";
}

.fa-user::before {
  content: "";
}

.fa-check::before {
  content: "";
}

.fa-remove::before,
.fa-close::before,
.fa-times::before {
  content: "";
}

.fa-search-plus::before {
  content: "";
}

.fa-search-minus::before {
  content: "";
}

.fa-gear::before,
.fa-cog::before {
  content: "";
}

.fa-home::before {
  content: "";
}

.fa-refresh::before {
  content: "";
}

.fa-volume-up::before {
  content: "";
}

.fa-photo::before,
.fa-image::before,
.fa-picture-o::before {
  content: "";
}

.fa-edit::before,
.fa-pencil-square-o::before {
  content: "";
}

.fa-check-square-o::before {
  content: "";
}

.fa-plus-circle::before {
  content: "";
}

.fa-minus-circle::before {
  content: "";
}

.fa-times-circle::before {
  content: "";
}

.fa-check-circle::before {
  content: "";
}

.fa-info-circle::before {
  content: "";
}

.fa-times-circle-o::before {
  content: "";
}

.fa-check-circle-o::before {
  content: "";
}

.fa-ban::before {
  content: "";
}

.fa-arrow-left::before {
  content: "";
}

.fa-arrow-right::before {
  content: "";
}

.fa-arrow-up::before {
  content: "";
}

.fa-expand::before {
  content: "";
}

.fa-compress::before {
  content: "";
}

.fa-plus::before {
  content: "";
}

.fa-minus::before {
  content: "";
}

.fa-warning::before,
.fa-exclamation-triangle::before {
  content: "";
}

.fa-comment::before {
  content: "";
}

.fa-gears::before,
.fa-cogs::before {
  content: "";
}

.fa-comments::before {
  content: "";
}

.fa-star-half::before {
  content: "";
}

.fa-heart-o::before {
  content: "";
}

.fa-sign-out::before {
  content: "";
}

.fa-group::before,
.fa-users::before {
  content: "";
}

.fa-save::before,
.fa-floppy-o::before {
  content: "";
}

.fa-comment-o::before {
  content: "";
}

.fa-comments-o::before {
  content: "";
}

.fa-user-md::before {
  content: "";
}

.fa-plus-square::before {
  content: "";
}

.fa-star-half-empty::before,
.fa-star-half-full::before,
.fa-star-half-o::before {
  content: "";
}

.fa-info::before {
  content: "";
}

.fa-microphone::before {
  content: "";
}

.fa-microphone-slash::before {
  content: "";
}

.fa-minus-square::before {
  content: "";
}

.fa-minus-square-o::before {
  content: "";
}

.fa-check-square::before {
  content: "";
}

.fa-plus-square-o::before {
  content: "";
}

.fa-institution::before,
.fa-bank::before,
.fa-university::before {
  content: "";
}

.fa-send::before,
.fa-paper-plane::before {
  content: "";
}

.fa-send-o::before,
.fa-paper-plane-o::before {
  content: "";
}

.fa-share-alt::before {
  content: "";
}

.fa-share-alt-square::before {
  content: "";
}

.fa-diamond::before {
  content: "";
}

.fa-user-secret::before {
  content: "";
}

.fa-heartbeat::before {
  content: "";
}

.fa-user-plus::before {
  content: "";
}

.fa-user-times::before {
  content: "";
}

.fa-commenting::before {
  content: "";
}

.fa-commenting-o::before {
  content: "";
}

.fa-youtube-play:before {
  content: "\f16a";
}

*,
::after,
::before {
  box-sizing: border-box;
  outline: none !important;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[data-original-title],
abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

code,
kbd,
pre,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
  margin: 0 0 1rem;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

caption {
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

button {
  border-radius: 0;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

select {
  word-wrap: normal;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}

.h1,
h1 {
  font-size: 2.5rem;
}

.h2,
h2 {
  font-size: 2rem;
}

.h3,
h3 {
  font-size: 1.75rem;
}

.h4,
h4 {
  font-size: 1.5rem;
}

.h5,
h5 {
  font-size: 1.25rem;
}

.h6,
h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  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 {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.small,
small {
  font-size: 80%;
  font-weight: 400;
}

.mark,
mark {
  padding: .2em;
  background-color: #fcf8e3;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-sm>.table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-md>.table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-lg>.table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-xl>.table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive>.table-bordered {
  border: 0;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-bg-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-bg-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: .875rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding-top: .375rem;
  padding-bottom: .375rem;
  margin-bottom: 0;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-lg,
.form-control-plaintext.form-control-sm {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: .3rem;
}

select.form-control[multiple],
select.form-control[size] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: .25rem;
}

.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row>.col,
.form-row>[class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: .3rem;
  margin-left: -1.25rem;
}

.form-check-input:disabled~.form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
  margin-right: .75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: .3125rem;
  margin-left: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: .25rem;
  font-size: 80%;
  color: #28a745;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: .25rem .5rem;
  margin-top: .1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
  border-radius: .25rem;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #28a745;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, 0.25);
}

.form-control.is-valid~.valid-feedback,
.form-control.is-valid~.valid-tooltip,
.was-validated .form-control:valid~.valid-feedback,
.was-validated .form-control:valid~.valid-tooltip {
  display: block;
}

.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.custom-select.is-valid,
.was-validated .custom-select:valid {
  border-color: #28a745;
  padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.custom-select.is-valid:focus,
.was-validated .custom-select:valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, 0.25);
}

.custom-select.is-valid~.valid-feedback,
.custom-select.is-valid~.valid-tooltip,
.was-validated .custom-select:valid~.valid-feedback,
.was-validated .custom-select:valid~.valid-tooltip {
  display: block;
}

.form-control-file.is-valid~.valid-feedback,
.form-control-file.is-valid~.valid-tooltip,
.was-validated .form-control-file:valid~.valid-feedback,
.was-validated .form-control-file:valid~.valid-tooltip {
  display: block;
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
  color: #28a745;
}

.form-check-input.is-valid~.valid-feedback,
.form-check-input.is-valid~.valid-tooltip,
.was-validated .form-check-input:valid~.valid-feedback,
.was-validated .form-check-input:valid~.valid-tooltip {
  display: block;
}

.custom-control-input.is-valid~.custom-control-label,
.was-validated .custom-control-input:valid~.custom-control-label {
  color: #28a745;
}

.custom-control-input.is-valid~.custom-control-label::before,
.was-validated .custom-control-input:valid~.custom-control-label::before {
  border-color: #28a745;
}

.custom-control-input.is-valid~.valid-feedback,
.custom-control-input.is-valid~.valid-tooltip,
.was-validated .custom-control-input:valid~.valid-feedback,
.was-validated .custom-control-input:valid~.valid-tooltip {
  display: block;
}

.custom-control-input.is-valid:checked~.custom-control-label::before,
.was-validated .custom-control-input:valid:checked~.custom-control-label::before {
  border-color: #34ce57;
  background-color: #34ce57;
}

.custom-control-input.is-valid:focus~.custom-control-label::before,
.was-validated .custom-control-input:valid:focus~.custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, 0.25);
}

.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label::before,
.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label::before {
  border-color: #28a745;
}

.custom-file-input.is-valid~.custom-file-label,
.was-validated .custom-file-input:valid~.custom-file-label {
  border-color: #28a745;
}

.custom-file-input.is-valid~.valid-feedback,
.custom-file-input.is-valid~.valid-tooltip,
.was-validated .custom-file-input:valid~.valid-feedback,
.was-validated .custom-file-input:valid~.valid-tooltip {
  display: block;
}

.custom-file-input.is-valid:focus~.custom-file-label,
.was-validated .custom-file-input:valid:focus~.custom-file-label {
  border-color: #28a745;
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: .25rem;
  font-size: 80%;
  color: #dc3545;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: .25rem .5rem;
  margin-top: .1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: .25rem;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-invalid~.invalid-feedback,
.form-control.is-invalid~.invalid-tooltip,
.was-validated .form-control:invalid~.invalid-feedback,
.was-validated .form-control:invalid~.invalid-tooltip {
  display: block;
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.custom-select.is-invalid,
.was-validated .custom-select:invalid {
  border-color: #dc3545;
  padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.custom-select.is-invalid:focus,
.was-validated .custom-select:invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.25);
}

.custom-select.is-invalid~.invalid-feedback,
.custom-select.is-invalid~.invalid-tooltip,
.was-validated .custom-select:invalid~.invalid-feedback,
.was-validated .custom-select:invalid~.invalid-tooltip {
  display: block;
}

.form-control-file.is-invalid~.invalid-feedback,
.form-control-file.is-invalid~.invalid-tooltip,
.was-validated .form-control-file:invalid~.invalid-feedback,
.was-validated .form-control-file:invalid~.invalid-tooltip {
  display: block;
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
  color: #dc3545;
}

.form-check-input.is-invalid~.invalid-feedback,
.form-check-input.is-invalid~.invalid-tooltip,
.was-validated .form-check-input:invalid~.invalid-feedback,
.was-validated .form-check-input:invalid~.invalid-tooltip {
  display: block;
}

.custom-control-input.is-invalid~.custom-control-label,
.was-validated .custom-control-input:invalid~.custom-control-label {
  color: #dc3545;
}

.custom-control-input.is-invalid~.custom-control-label::before,
.was-validated .custom-control-input:invalid~.custom-control-label::before {
  border-color: #dc3545;
}

.custom-control-input.is-invalid~.invalid-feedback,
.custom-control-input.is-invalid~.invalid-tooltip,
.was-validated .custom-control-input:invalid~.invalid-feedback,
.was-validated .custom-control-input:invalid~.invalid-tooltip {
  display: block;
}

.custom-control-input.is-invalid:checked~.custom-control-label::before,
.was-validated .custom-control-input:invalid:checked~.custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}

.custom-control-input.is-invalid:focus~.custom-control-label::before,
.was-validated .custom-control-input:invalid:focus~.custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.25);
}

.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label::before,
.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label::before {
  border-color: #dc3545;
}

.custom-file-input.is-invalid~.custom-file-label,
.was-validated .custom-file-input:invalid~.custom-file-label {
  border-color: #dc3545;
}

.custom-file-input.is-invalid~.invalid-feedback,
.custom-file-input.is-invalid~.invalid-tooltip,
.was-validated .custom-file-input:invalid~.invalid-feedback,
.was-validated .custom-file-input:invalid~.invalid-tooltip {
  display: block;
}

.custom-file-input.is-invalid:focus~.custom-file-label,
.was-validated .custom-file-input:invalid:focus~.custom-file-label {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.25);
}

.form-inline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-inline .form-control-plaintext {
    display: inline-block;
  }

  .form-inline .custom-select,
  .form-inline .input-group {
    width: auto;
  }

  .form-inline .form-check {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }

  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: .25rem;
    margin-left: 0;
  }

  .form-inline .custom-control {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn.focus,
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.btn.disabled,
.btn:disabled {
  opacity: .65;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.borderg {
  border: 1px solid #f4f4f4;
}

.uzr {
  margin-left: 2px !important;
  border-radius: 5px;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary.focus,
.btn-primary:focus {
  box-shadow: 0 0 0 .2rem rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem rgba(38, 143, 255, 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 {
  box-shadow: 0 0 0 .2rem rgba(130, 138, 145, 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 {
  box-shadow: 0 0 0 .2rem rgba(130, 138, 145, 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 {
  box-shadow: 0 0 0 .2rem rgba(72, 180, 97, 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 {
  box-shadow: 0 0 0 .2rem rgba(72, 180, 97, 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 {
  box-shadow: 0 0 0 .2rem rgba(58, 176, 195, 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 {
  box-shadow: 0 0 0 .2rem rgba(58, 176, 195, 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 {
  box-shadow: 0 0 0 .2rem rgba(222, 170, 12, 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 {
  box-shadow: 0 0 0 .2rem rgba(222, 170, 12, 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 {
  box-shadow: 0 0 0 .2rem rgba(225, 83, 97, 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 {
  box-shadow: 0 0 0 .2rem rgba(225, 83, 97, 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 {
  box-shadow: 0 0 0 .2rem rgba(216, 217, 219, 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 {
  box-shadow: 0 0 0 .2rem rgba(216, 217, 219, 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 {
  box-shadow: 0 0 0 .2rem rgba(82, 88, 93, 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 {
  box-shadow: 0 0 0 .2rem rgba(82, 88, 93, 0.5);
}

.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary.focus,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #007bff;
  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: #007bff;
  border-color: #007bff;
}

.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 {
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary.focus,
.btn-outline-secondary:focus {
  box-shadow: 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 {
  box-shadow: 0 0 0 .2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success.focus,
.btn-outline-success:focus {
  box-shadow: 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 {
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info.focus,
.btn-outline-info:focus {
  box-shadow: 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 {
  box-shadow: 0 0 0 .2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning.focus,
.btn-outline-warning:focus {
  box-shadow: 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 {
  box-shadow: 0 0 0 .2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger.focus,
.btn-outline-danger:focus {
  box-shadow: 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 {
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light.focus,
.btn-outline-light:focus {
  box-shadow: 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 {
  box-shadow: 0 0 0 .2rem rgba(248, 249, 250, 0.5);
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark.focus,
.btn-outline-dark:focus {
  box-shadow: 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 {
  box-shadow: 0 0 0 .2rem rgba(52, 58, 64, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.btn-link.focus,
.btn-link:focus {
  text-decoration: underline;
  box-shadow: none;
}

.btn-link.disabled,
.btn-link:disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-group-lg>.btn,
.btn-lg {
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: .3rem;
}

.btn-group-sm>.btn,
.btn-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block+.btn-block {
  margin-top: .5rem;
}

input[type="button"].btn-block,
input[type="reset"].btn-block,
input[type="submit"].btn-block {
  width: 100%;
}

.fade {
  transition: opacity .15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.dropdown,
.dropleft,
.dropright,
.dropup {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: .25rem;
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: .125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: 0;
  border-right: .3em solid transparent;
  border-bottom: .3em solid;
  border-left: .3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: .125rem;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: 0;
  content: "";
  border-top: .3em solid transparent;
  border-right: 0;
  border-bottom: .3em solid transparent;
  border-left: .3em solid;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: .125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  display: none;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: .255em;
  vertical-align: 0;
  content: "";
  border-top: .3em solid transparent;
  border-right: .3em solid;
  border-bottom: .3em solid transparent;
}

.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="top"] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: .5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: .5rem 1.5rem;
  margin-bottom: 0;
  font-size: .875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: .25rem 1.5rem;
  color: #212529;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group-vertical>.btn,
.btn-group>.btn {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.btn-group-vertical>.btn:hover,
.btn-group>.btn:hover {
  z-index: 1;
}

.btn-group-vertical>.btn.active,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn:focus,
.btn-group>.btn.active,
.btn-group>.btn:active,
.btn-group>.btn:focus {
  z-index: 1;
}

.btn-toolbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group>.btn-group:not(:first-child),
.btn-group>.btn:not(:first-child) {
  margin-left: -1px;
}

.btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: .5625rem;
  padding-left: .5625rem;
}

.dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-group-sm>.btn+.dropdown-toggle-split,
.btn-sm+.dropdown-toggle-split {
  padding-right: .375rem;
  padding-left: .375rem;
}

.btn-group-lg>.btn+.dropdown-toggle-split,
.btn-lg+.dropdown-toggle-split {
  padding-right: .75rem;
  padding-left: .75rem;
}

.btn-group-vertical {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group {
  width: 100%;
}

.btn-group-vertical>.btn-group:not(:first-child),
.btn-group-vertical>.btn:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical>.btn-group:not(:last-child)>.btn,
.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical>.btn-group:not(:first-child)>.btn,
.btn-group-vertical>.btn:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle>.btn,
.btn-group-toggle>.btn-group>.btn {
  margin-bottom: 0;
}

.btn-group-toggle>.btn input[type="checkbox"],
.btn-group-toggle>.btn input[type="radio"],
.btn-group-toggle>.btn-group>.btn input[type="checkbox"],
.btn-group-toggle>.btn-group>.btn input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group>.custom-file,
.input-group>.custom-select,
.input-group>.form-control,
.input-group>.form-control-plaintext {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-group>.custom-file+.custom-file,
.input-group>.custom-file+.custom-select,
.input-group>.custom-file+.form-control,
.input-group>.custom-select+.custom-file,
.input-group>.custom-select+.custom-select,
.input-group>.custom-select+.form-control,
.input-group>.form-control+.custom-file,
.input-group>.form-control+.custom-select,
.input-group>.form-control+.form-control,
.input-group>.form-control-plaintext+.custom-file,
.input-group>.form-control-plaintext+.custom-select,
.input-group>.form-control-plaintext+.form-control {
  margin-left: -1px;
}

.input-group>.custom-file .custom-file-input:focus~.custom-file-label,
.input-group>.custom-select:focus,
.input-group>.form-control:focus {
  z-index: 3;
}

.input-group>.custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group>.custom-select:not(:last-child),
.input-group>.form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.custom-select:not(:first-child),
.input-group>.form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group>.custom-file {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.input-group>.custom-file:not(:last-child) .custom-file-label,
.input-group>.custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-append,
.input-group-prepend {
  display: -ms-flexbox;
  display: flex;
}

.input-group-append .btn,
.input-group-prepend .btn {
  position: relative;
  z-index: 2;
}

.input-group-append .btn:focus,
.input-group-prepend .btn:focus {
  z-index: 3;
}

.input-group-append .btn+.btn,
.input-group-append .btn+.input-group-text,
.input-group-append .input-group-text+.btn,
.input-group-append .input-group-text+.input-group-text,
.input-group-prepend .btn+.btn,
.input-group-prepend .btn+.input-group-text,
.input-group-prepend .input-group-text+.btn,
.input-group-prepend .input-group-text+.input-group-text {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: .375rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

.input-group-text input[type="checkbox"],
.input-group-text input[type="radio"] {
  margin-top: 0;
}

.input-group-lg>.custom-select,
.input-group-lg>.form-control:not(textarea) {
  height: calc(1.5em + 1rem + 2px);
}

.input-group-lg>.custom-select,
.input-group-lg>.form-control,
.input-group-lg>.input-group-append>.btn,
.input-group-lg>.input-group-append>.input-group-text,
.input-group-lg>.input-group-prepend>.btn,
.input-group-lg>.input-group-prepend>.input-group-text {
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: .3rem;
}

.input-group-sm>.custom-select,
.input-group-sm>.form-control:not(textarea) {
  height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm>.custom-select,
.input-group-sm>.form-control,
.input-group-sm>.input-group-append>.btn,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-prepend>.input-group-text {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

.input-group-lg>.custom-select,
.input-group-sm>.custom-select {
  padding-right: 1.75rem;
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.input-group-append>.btn,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn:not(:first-child),
.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),
.input-group>.input-group-prepend:not(:first-child)>.btn,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: #80bdff;
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

.custom-control-input:disabled~.custom-control-label {
  color: #6c757d;
}

.custom-control-input:disabled~.custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: .25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.custom-control-label::after {
  position: absolute;
  top: .25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50%/50% 50%;
}

.custom-checkbox .custom-control-label::before {
  border-radius: .25rem;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%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 {
  border-color: #007bff;
  background-color: #007bff;
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%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(0, 123, 255, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%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(0, 123, 255, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: .5rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: .5rem;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-transform .15s ease-in-out;
  transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-transform .15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: .375rem 1.75rem .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: .75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

.custom-select::-ms-expand {
  display: none;
}

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: .5rem;
  font-size: .875rem;
}

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  opacity: 0;
}

.custom-file-input:focus~.custom-file-label {
  border-color: #80bdff;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.custom-file-input:disabled~.custom-file-label {
  background-color: #e9ecef;
}

.custom-file-input:lang(en)~.custom-file-label::after {
  content: "Browse";
}

.custom-file-input~.custom-file-label[data-browse]::after {
  content: attr(data-browse);
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: .375rem .75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 0.75rem);
  padding: .375rem .75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: inherit;
  border-radius: 0 .25rem .25rem 0;
}

.custom-range {
  width: 100%;
  height: calc(1rem + 0.4rem);
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-range:focus {
  outline: 0;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.custom-range::-moz-focus-outer {
  border: 0;
}

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -.25rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    transition: none;
  }
}

.custom-range::-webkit-slider-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: .5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    transition: none;
  }
}

.custom-range::-moz-range-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-moz-range-track {
  width: 100%;
  height: .5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: .2rem;
  margin-left: .2rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    transition: none;
  }
}

.custom-range::-ms-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-ms-track {
  width: 100%;
  height: .5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: .5rem;
}

.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}

.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-moz-range-track {
  cursor: default;
}

.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}

.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: .5rem 1rem;
}

.nav-link:focus,
.nav-link:hover {
  text-decoration: none;
}

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  border-radius: .25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #007bff;
}

.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.tab-content>.tab-pane {
  display: none;
}

.tab-content>.active {
  display: block;
}

.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: .5rem 1rem;
}

.navbar>.container,
.navbar>.container-fluid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:focus,
.navbar-brand:hover {
  text-decoration: none;
}

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
}

.navbar-toggler:focus,
.navbar-toggler:hover {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {
  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-sm .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-md .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-xl .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-xl .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.navbar-expand .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: .5rem;
  padding-left: .5rem;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid {
  padding-right: 0;
  padding-left: 0;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.navbar-expand .navbar-collapse {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
  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:focus,
.navbar-light .navbar-nav .nav-link:hover {
  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 .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
  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,%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-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-text a:focus,
.navbar-light .navbar-text a:hover {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  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 .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
  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,%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);
}

.navbar-dark .navbar-text a {
  color: #fff;
}

.navbar-dark .navbar-text a:focus,
.navbar-dark .navbar-text a:hover {
  color: #fff;
}

.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, 0.125);
  border-radius: .25rem;
}

.card>hr {
  margin-right: 0;
  margin-left: 0;
}

.card>.list-group:first-child .list-group-item:first-child {
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.card>.list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: .75rem;
}

.card-subtitle {
  margin-top: -.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link+.card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-header+.list-group .list-group-item:first-child {
  border-top: 0;
}

.card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -.625rem;
  margin-bottom: -.75rem;
  margin-left: -.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -.625rem;
  margin-left: -.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img {
  width: 100%;
  border-radius: calc(0.25rem - 1px);
}

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  .card-deck .card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-group>.card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }

  .card-group>.card {
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    margin-bottom: 0;
  }

  .card-group>.card+.card {
    margin-left: 0;
    border-left: 0;
  }

  .card-group>.card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-group>.card:not(:last-child) .card-header,
  .card-group>.card:not(:last-child) .card-img-top {
    border-top-right-radius: 0;
  }

  .card-group>.card:not(:last-child) .card-footer,
  .card-group>.card:not(:last-child) .card-img-bottom {
    border-bottom-right-radius: 0;
  }

  .card-group>.card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-group>.card:not(:first-child) .card-header,
  .card-group>.card:not(:first-child) .card-img-top {
    border-top-left-radius: 0;
  }

  .card-group>.card:not(:first-child) .card-footer,
  .card-group>.card:not(:first-child) .card-img-bottom {
    border-bottom-left-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: .75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion>.card {
  overflow: hidden;
}

.accordion>.card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}

.accordion>.card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}

.accordion>.card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion>.card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion>.card .card-header {
  margin-bottom: -1px;
}

.breadcrumb {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: .25rem;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: .5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: .5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: underline;
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.pagination {
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: .25rem;
}

.page-link {
  position: relative;
  display: block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  z-index: 2;
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

.pagination-lg .page-link {
  padding: .75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: .3rem;
  border-bottom-left-radius: .3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: .3rem;
  border-bottom-right-radius: .3rem;
}

.pagination-sm .page-link {
  padding: .25rem .5rem;
  font-size: .875rem;
  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;
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}

a.badge:focus,
a.badge:hover {
  text-decoration: none;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: #007bff;
}

a.badge-primary:focus,
a.badge-primary:hover {
  color: #fff;
  background-color: #0062cc;
}

a.badge-primary.focus,
a.badge-primary:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.5);
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

a.badge-secondary:focus,
a.badge-secondary:hover {
  color: #fff;
  background-color: #545b62;
}

a.badge-secondary.focus,
a.badge-secondary:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(108, 117, 125, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}

a.badge-success:focus,
a.badge-success:hover {
  color: #fff;
  background-color: #1e7e34;
}

a.badge-success.focus,
a.badge-success:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, 0.5);
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

a.badge-info:focus,
a.badge-info:hover {
  color: #fff;
  background-color: #117a8b;
}

a.badge-info.focus,
a.badge-info:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(23, 162, 184, 0.5);
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

a.badge-warning:focus,
a.badge-warning:hover {
  color: #212529;
  background-color: #d39e00;
}

a.badge-warning.focus,
a.badge-warning:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(255, 193, 7, 0.5);
}

.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

a.badge-danger:focus,
a.badge-danger:hover {
  color: #fff;
  background-color: #bd2130;
}

a.badge-danger.focus,
a.badge-danger:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.5);
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

a.badge-light:focus,
a.badge-light:hover {
  color: #212529;
  background-color: #dae0e5;
}

a.badge-light.focus,
a.badge-light:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(248, 249, 250, 0.5);
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

a.badge-dark:focus,
a.badge-dark:hover {
  color: #fff;
  background-color: #1d2124;
}

a.badge-dark.focus,
a.badge-dark:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(52, 58, 64, 0.5);
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: .75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-primary hr {
  border-top-color: #9fcdff;
}

.alert-primary .alert-link {
  color: #002752;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-secondary hr {
  border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
  color: #202326;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success hr {
  border-top-color: #b1dfbb;
}

.alert-success .alert-link {
  color: #0b2e13;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning hr {
  border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
  color: #533f03;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-danger hr {
  border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
  color: #491217;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light hr {
  border-top-color: #ececf6;
}

.alert-light .alert-link {
  color: #686868;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

.alert-dark hr {
  border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
  color: #040505;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

.progress {
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: .75rem;
  background-color: #e9ecef;
  border-radius: .25rem;
}

.progress-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}

.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}

.media-body {
  -ms-flex: 1;
  flex: 1;
}

.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}

.list-group-item-action:focus,
.list-group-item-action:hover {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

.list-group-item {
  position: relative;
  display: block;
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item:first-child {
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.list-group-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}

.list-group-horizontal .list-group-item {
  margin-right: -1px;
  margin-bottom: 0;
}

.list-group-horizontal .list-group-item:first-child {
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
  border-top-right-radius: 0;
}

.list-group-horizontal .list-group-item:last-child {
  margin-right: 0;
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: 0;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-group-horizontal-sm .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }

  .list-group-horizontal-sm .list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-sm .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 768px) {
  .list-group-horizontal-md {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-group-horizontal-md .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }

  .list-group-horizontal-md .list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-md .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-group-horizontal-lg .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }

  .list-group-horizontal-lg .list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-lg .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-group-horizontal-xl .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }

  .list-group-horizontal-xl .list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-xl .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: 0;
  }
}

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}

.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}

.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.list-group-item-primary {
  color: #004085;
  background-color: #b8daff;
}

.list-group-item-primary.list-group-item-action:focus,
.list-group-item-primary.list-group-item-action:hover {
  color: #004085;
  background-color: #9fcdff;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #004085;
  border-color: #004085;
}

.list-group-item-secondary {
  color: #383d41;
  background-color: #d6d8db;
}

.list-group-item-secondary.list-group-item-action:focus,
.list-group-item-secondary.list-group-item-action:hover {
  color: #383d41;
  background-color: #c8cbcf;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #383d41;
  border-color: #383d41;
}

.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}

.list-group-item-success.list-group-item-action:focus,
.list-group-item-success.list-group-item-action:hover {
  color: #155724;
  background-color: #b1dfbb;
}

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}

.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}

.list-group-item-info.list-group-item-action:focus,
.list-group-item-info.list-group-item-action:hover {
  color: #0c5460;
  background-color: #abdde5;
}

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}

.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}

.list-group-item-warning.list-group-item-action:focus,
.list-group-item-warning.list-group-item-action:hover {
  color: #856404;
  background-color: #ffe8a1;
}

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}

.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}

.list-group-item-danger.list-group-item-action:focus,
.list-group-item-danger.list-group-item-action:hover {
  color: #721c24;
  background-color: #f1b0b7;
}

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}

.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}

.list-group-item-light.list-group-item-action:focus,
.list-group-item-light.list-group-item-action:hover {
  color: #818182;
  background-color: #ececf6;
}

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}

.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}

.list-group-item-dark.list-group-item-action:focus,
.list-group-item-dark.list-group-item-action:hover {
  color: #1b1e21;
  background-color: #b9bbbe;
}

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.close:hover {
  color: #000;
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
  opacity: .75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

a.close.disabled {
  pointer-events: none;
}

.toast {
  max-width: 350px;
  overflow: hidden;
  font-size: .875rem;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  border-radius: .25rem;
}

.toast:not(:last-child) {
  margin-bottom: .75rem;
}

.toast.showing {
  opacity: 1;
}

.toast.show {
  display: block;
  opacity: 1;
}

.toast.hide {
  display: none;
}

.toast-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: .25rem .75rem;
  color: #6c757d;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.toast-body {
  padding: .75rem;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 900000 !important;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: .5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}

.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-footer,
.modal-dialog-scrollable .modal-header {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: .3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: .4;
  /* z-index: 9000*/
}

.modal-header .close {
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: .3rem;
  border-bottom-left-radius: .3rem;
}

.modal-footer> :not(:first-child) {
  margin-left: .25rem;
}

.modal-footer> :not(:last-child) {
  margin-right: .25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }

  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
  }

  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: .875rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: .9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: .8rem;
  height: .4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-auto[x-placement^="top"],
.bs-tooltip-top {
  padding: .4rem 0;
}

.bs-tooltip-auto[x-placement^="top"] .arrow,
.bs-tooltip-top .arrow {
  bottom: 0;
}

.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.bs-tooltip-top .arrow::before {
  top: 0;
  border-width: .4rem .4rem 0;
  border-top-color: #000;
}

.bs-tooltip-auto[x-placement^="right"],
.bs-tooltip-right {
  padding: 0 .4rem;
}

.bs-tooltip-auto[x-placement^="right"] .arrow,
.bs-tooltip-right .arrow {
  left: 0;
  width: .4rem;
  height: .8rem;
}

.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.bs-tooltip-right .arrow::before {
  right: 0;
  border-width: .4rem .4rem .4rem 0;
  border-right-color: #000;
}

.bs-tooltip-auto[x-placement^="bottom"],
.bs-tooltip-bottom {
  padding: .4rem 0;
}

.bs-tooltip-auto[x-placement^="bottom"] .arrow,
.bs-tooltip-bottom .arrow {
  top: 0;
}

.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  bottom: 0;
  border-width: 0 .4rem .4rem;
  border-bottom-color: #000;
}

.bs-tooltip-auto[x-placement^="left"],
.bs-tooltip-left {
  padding: 0 .4rem;
}

.bs-tooltip-auto[x-placement^="left"] .arrow,
.bs-tooltip-left .arrow {
  right: 0;
  width: .4rem;
  height: .8rem;
}

.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.bs-tooltip-left .arrow::before {
  left: 0;
  border-width: .4rem 0 .4rem .4rem;
  border-left-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: .25rem .5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: .25rem;
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: .5rem;
  margin: 0 .3rem;
}

.popover .arrow::after,
.popover .arrow::before {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-auto[x-placement^="top"],
.bs-popover-top {
  margin-bottom: .5rem;
}

.bs-popover-auto[x-placement^="top"]>.arrow,
.bs-popover-top>.arrow {
  bottom: calc((0.5rem + 1px) * -1);
}

.bs-popover-auto[x-placement^="top"]>.arrow::before,
.bs-popover-top>.arrow::before {
  bottom: 0;
  border-width: .5rem .5rem 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="top"]>.arrow::after,
.bs-popover-top>.arrow::after {
  bottom: 1px;
  border-width: .5rem .5rem 0;
  border-top-color: #fff;
}

.bs-popover-auto[x-placement^="right"],
.bs-popover-right {
  margin-left: .5rem;
}

.bs-popover-auto[x-placement^="right"]>.arrow,
.bs-popover-right>.arrow {
  left: calc((0.5rem + 1px) * -1);
  width: .5rem;
  height: 1rem;
  margin: .3rem 0;
}

.bs-popover-auto[x-placement^="right"]>.arrow::before,
.bs-popover-right>.arrow::before {
  left: 0;
  border-width: .5rem .5rem .5rem 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="right"]>.arrow::after,
.bs-popover-right>.arrow::after {
  left: 1px;
  border-width: .5rem .5rem .5rem 0;
  border-right-color: #fff;
}

.bs-popover-auto[x-placement^="bottom"],
.bs-popover-bottom {
  margin-top: .5rem;
}

.bs-popover-auto[x-placement^="bottom"]>.arrow,
.bs-popover-bottom>.arrow {
  top: calc((0.5rem + 1px) * -1);
}

.bs-popover-auto[x-placement^="bottom"]>.arrow::before,
.bs-popover-bottom>.arrow::before {
  top: 0;
  border-width: 0 .5rem .5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="bottom"]>.arrow::after,
.bs-popover-bottom>.arrow::after {
  top: 1px;
  border-width: 0 .5rem .5rem;
  border-bottom-color: #fff;
}

.bs-popover-auto[x-placement^="bottom"] .popover-header::before,
.bs-popover-bottom .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -.5rem;
  content: "";
  border-bottom: 1px solid #f7f7f7;
}

.bs-popover-auto[x-placement^="left"],
.bs-popover-left {
  margin-right: .5rem;
}

.bs-popover-auto[x-placement^="left"]>.arrow,
.bs-popover-left>.arrow {
  right: calc((0.5rem + 1px) * -1);
  width: .5rem;
  height: 1rem;
  margin: .3rem 0;
}

.bs-popover-auto[x-placement^="left"]>.arrow::before,
.bs-popover-left>.arrow::before {
  right: 0;
  border-width: .5rem 0 .5rem .5rem;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="left"]>.arrow::after,
.bs-popover-left>.arrow::after {
  right: 1px;
  border-width: .5rem 0 .5rem .5rem;
  border-left-color: #fff;
}

.popover-header {
  padding: .5rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: .5rem .75rem;
  color: #212529;
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out;
  transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
  display: block;
}

.active.carousel-item-right,
.carousel-item-next:not(.carousel-item-left) {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.active.carousel-item-left,
.carousel-item-prev:not(.carousel-item-right) {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}

.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: 0 .6s opacity;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}

.carousel-control-next,
.carousel-control-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: .5;
  transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-control-next,
  .carousel-control-prev {
    transition: none;
  }
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: .9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50%/100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: .25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border .75s linear infinite;
  animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: .2em;
}

@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    opacity: 1;
  }
}

@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    opacity: 1;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: spinner-grow .75s linear infinite;
  animation: spinner-grow .75s linear infinite;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.bg-primary {
  background-color: #007bff !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

a.bg-secondary:focus,
a.bg-secondary:hover,
button.bg-secondary:focus,
button.bg-secondary:hover {
  background-color: #545b62 !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:focus,
a.bg-success:hover,
button.bg-success:focus,
button.bg-success:hover {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:focus,
a.bg-warning:hover,
button.bg-warning:focus,
button.bg-warning:hover {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:focus,
a.bg-danger:hover,
button.bg-danger:focus,
button.bg-danger:hover {
  background-color: #bd2130 !important;
}

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

a.bg-light:focus,
a.bg-light:hover,
button.bg-light:focus,
button.bg-light:hover {
  background-color: #dae0e5 !important;
}

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

a.bg-dark:focus,
a.bg-dark:hover,
button.bg-dark:focus,
button.bg-dark:hover {
  background-color: #1d2124 !important;
}

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

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

.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-right {
  border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-left {
  border-left: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: #007bff !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-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded-sm {
  border-radius: .2rem !important;
}

.rounded {
  border-radius: .25rem !important;
}

.rounded-top {
  border-top-left-radius: .25rem !important;
  border-top-right-radius: .25rem !important;
}

.rounded-right {
  border-top-right-radius: .25rem !important;
  border-bottom-right-radius: .25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: .25rem !important;
  border-bottom-left-radius: .25rem !important;
}

.rounded-left {
  border-top-left-radius: .25rem !important;
  border-bottom-left-radius: .25rem !important;
}

.rounded-lg {
  border-radius: .3rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }

  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-print-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-sm-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .flex-sm-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-sm-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .justify-content-sm-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-sm-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .align-items-sm-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-sm-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-sm-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-md-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .flex-md-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-md-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .justify-content-md-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-md-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .align-items-md-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-md-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-md-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-md-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-md-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-md-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-md-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-md-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-md-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-md-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-lg-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .flex-lg-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-lg-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .justify-content-lg-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-lg-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .align-items-lg-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-lg-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-lg-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-xl-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .flex-xl-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-xl-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .justify-content-xl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-xl-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .align-items-xl-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-xl-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-xl-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }

  .float-sm-right {
    float: right !important;
  }

  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }

  .float-md-right {
    float: right !important;
  }

  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }

  .float-lg-right {
    float: right !important;
  }

  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }

  .float-xl-right {
    float: right !important;
  }

  .float-xl-none {
    float: none !important;
  }
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: .25rem !important;
}

.mt-1,
.my-1 {
  margin-top: .25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: .25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: .25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: .25rem !important;
}

.m-2 {
  margin: .5rem !important;
}

.mt-2,
.my-2 {
  margin-top: .5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: .5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: .5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: .5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: .25rem !important;
}

.pt-1,
.py-1 {
  padding-top: .25rem !important;
}

.pr-1,
.px-1 {
  padding-right: .25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: .25rem !important;
}

.pl-1,
.px-1 {
  padding-left: .25rem !important;
}

.p-2 {
  padding: .5rem !important;
}

.pt-2,
.py-2 {
  padding-top: .5rem !important;
}

.pr-2,
.px-2 {
  padding-right: .5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: .5rem !important;
}

.pl-2,
.px-2 {
  padding-left: .5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-n1 {
  margin: -.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -.25rem !important;
}

.m-n2 {
  margin: -.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }

  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }

  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .m-sm-1 {
    margin: .25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: .25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-right: .25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: .25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-left: .25rem !important;
  }

  .m-sm-2 {
    margin: .5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: .5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-right: .5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: .5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-left: .5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .p-sm-1 {
    padding: .25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: .25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-right: .25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: .25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-left: .25rem !important;
  }

  .p-sm-2 {
    padding: .5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: .5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-right: .5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: .5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-left: .5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }

  .m-sm-n1 {
    margin: -.25rem !important;
  }

  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -.25rem !important;
  }

  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -.25rem !important;
  }

  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -.25rem !important;
  }

  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -.25rem !important;
  }

  .m-sm-n2 {
    margin: -.5rem !important;
  }

  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -.5rem !important;
  }

  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -.5rem !important;
  }

  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -.5rem !important;
  }

  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -.5rem !important;
  }

  .m-sm-n3 {
    margin: -1rem !important;
  }

  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }

  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }

  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }

  .m-sm-n4 {
    margin: -1.5rem !important;
  }

  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }

  .m-sm-n5 {
    margin: -3rem !important;
  }

  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }

  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }

  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }

  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }

  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .m-md-1 {
    margin: .25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: .25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-right: .25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: .25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-left: .25rem !important;
  }

  .m-md-2 {
    margin: .5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: .5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: .5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: .5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-left: .5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .p-md-1 {
    padding: .25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: .25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-right: .25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: .25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-left: .25rem !important;
  }

  .p-md-2 {
    padding: .5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: .5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-right: .5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: .5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-left: .5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }

  .m-md-n1 {
    margin: -.25rem !important;
  }

  .mt-md-n1,
  .my-md-n1 {
    margin-top: -.25rem !important;
  }

  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -.25rem !important;
  }

  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -.25rem !important;
  }

  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -.25rem !important;
  }

  .m-md-n2 {
    margin: -.5rem !important;
  }

  .mt-md-n2,
  .my-md-n2 {
    margin-top: -.5rem !important;
  }

  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -.5rem !important;
  }

  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -.5rem !important;
  }

  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -.5rem !important;
  }

  .m-md-n3 {
    margin: -1rem !important;
  }

  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }

  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }

  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }

  .m-md-n4 {
    margin: -1.5rem !important;
  }

  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }

  .m-md-n5 {
    margin: -3rem !important;
  }

  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }

  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }

  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }

  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }

  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .m-lg-1 {
    margin: .25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: .25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-right: .25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: .25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-left: .25rem !important;
  }

  .m-lg-2 {
    margin: .5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: .5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-right: .5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: .5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-left: .5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .p-lg-1 {
    padding: .25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: .25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-right: .25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: .25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-left: .25rem !important;
  }

  .p-lg-2 {
    padding: .5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: .5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-right: .5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: .5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-left: .5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }

  .m-lg-n1 {
    margin: -.25rem !important;
  }

  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -.25rem !important;
  }

  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -.25rem !important;
  }

  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -.25rem !important;
  }

  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -.25rem !important;
  }

  .m-lg-n2 {
    margin: -.5rem !important;
  }

  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -.5rem !important;
  }

  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -.5rem !important;
  }

  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -.5rem !important;
  }

  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -.5rem !important;
  }

  .m-lg-n3 {
    margin: -1rem !important;
  }

  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }

  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }

  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }

  .m-lg-n4 {
    margin: -1.5rem !important;
  }

  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }

  .m-lg-n5 {
    margin: -3rem !important;
  }

  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }

  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }

  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }

  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }

  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .m-xl-1 {
    margin: .25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: .25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-right: .25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: .25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-left: .25rem !important;
  }

  .m-xl-2 {
    margin: .5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: .5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-right: .5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: .5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-left: .5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .p-xl-1 {
    padding: .25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: .25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-right: .25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: .25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-left: .25rem !important;
  }

  .p-xl-2 {
    padding: .5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: .5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-right: .5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: .5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-left: .5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }

  .m-xl-n1 {
    margin: -.25rem !important;
  }

  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -.25rem !important;
  }

  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -.25rem !important;
  }

  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -.25rem !important;
  }

  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -.25rem !important;
  }

  .m-xl-n2 {
    margin: -.5rem !important;
  }

  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -.5rem !important;
  }

  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -.5rem !important;
  }

  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -.5rem !important;
  }

  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -.5rem !important;
  }

  .m-xl-n3 {
    margin: -1rem !important;
  }

  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }

  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }

  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }

  .m-xl-n4 {
    margin: -1.5rem !important;
  }

  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }

  .m-xl-n5 {
    margin: -3rem !important;
  }

  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }

  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }

  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }

  .text-sm-right {
    text-align: right !important;
  }

  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }

  .text-md-right {
    text-align: right !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }

  .text-lg-right {
    text-align: right !important;
  }

  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }

  .text-xl-right {
    text-align: right !important;
  }

  .text-xl-center {
    text-align: center !important;
  }
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #007bff !important;
}

a.text-primary:focus,
a.text-primary:hover {
  color: #0056b3 !important;
}

.text-secondary {
  color: #6c757d !important;
}

a.text-secondary:focus,
a.text-secondary:hover {
  color: #494f54 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:focus,
a.text-success:hover {
  color: #19692c !important;
}

.text-info {
  color: #17a2b8 !important;
}

a.text-info:focus,
a.text-info:hover {
  color: #0f6674 !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:focus,
a.text-warning:hover {
  color: #ba8b00 !important;
}

.text-danger {
  color: #dc3545 !important;
}

a.text-danger:focus,
a.text-danger:hover {
  color: #a71d2a !important;
}

.text-light {
  color: #f8f9fa !important;
}

a.text-light:focus,
a.text-light:hover {
  color: #cbd3da !important;
}

.text-dark {
  color: #343a40 !important;
}

a.text-dark:focus,
a.text-dark:hover {
  color: #121416 !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

@media print {
  *,
  ::after,
  ::before {
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  a:not(.btn) {
    text-decoration: underline;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  blockquote,
  pre {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  img,
  tr {
    page-break-inside: avoid;
  }

  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

@page {
    size: a3;
}

  body {
    min-width: 992px !important;
  }

  .container {
    min-width: 992px !important;
  }

  .navbar {
    display: none;
  }

  .badge {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;
  }

  .table td,
  .table th {
    background-color: #fff !important;
  }

  .table-bordered td,
  .table-bordered th {
    border: 1px solid #dee2e6 !important;
  }

  .table-dark {
    color: inherit;
  }

  .table-dark tbody+tbody,
  .table-dark td,
  .table-dark th,
  .table-dark thead th {
    border-color: #dee2e6;
  }

  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

.notification {
  min-width: 180px;
  max-width: 260px;
  border: 1px solid #000;
  z-index: 2000;
  background-color: #efefef;
  position: relative;
  padding: 5px;
  border-radius: 5px;
  margin: .7rem auto 0;
  border-bottom: 4px solid #000 !important;
}

.notification__sender__avatar {
  border-radius: 5px;
  margin-right: .1em;
}

.notification__sender__name {
  margin: .2em 0;
  font-size: .6rem;
  font-weight: 700;
  padding: .15em 0 0;
  max-width: 80%;
  color: #000;
  display: inline-block;
}

.notification p {
  margin-bottom: .4em;
}

.notification__message {
  font-size: .6rem;
  font-weight: 700;
  margin-top: .2em;
  width: 100%;
  padding: 0 .2em;
  word-break: break-word;
}

.notification__time {
  position: absolute;
  top: .2rem;
  right: .2rem;
  font-size: .5rem;
}

.notification__title {
  font-size: .6rem;
  text-align: center;
  margin: -14px auto 0;
  width: 50%;
  border: 1px solid #000;
  border-radius: 5px;
  line-height: 1.6;
}

/* Empty notification screen */

#notf.notificationPanelIOS {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  color: #291524;
  background: radial-gradient(circle at 100% 0%, rgba(255, 223, 235, .42), transparent 37%), linear-gradient(180deg, #fffafd 0%, #fff 100%) !important;
  box-sizing: border-box;
}

#notf .notificationPanelToolbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 5px 9px;
  direction: ltr;
  box-sizing: border-box;
}

#notf .notificationBackButton {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto !important;
  min-width: 55px;
  height: 31px;
  margin: 0 !important;
  padding: 5px 9px !important;
  color: #1683e5 !important;
  border: 1px solid #dfe6ef !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(36, 63, 90, .08);
}

#notf .notificationClearButton {
  display: none;
  width: auto !important;
  height: 31px;
  margin: 0 !important;
  padding: 5px 9px !important;
  color: #fff !important;
  border: 1px solid #df3c58 !important;
  border-radius: 15px !important;
  background: #e43d5b !important;
  font-size: 10px !important;
}

#notf.has-notifications .notificationClearButton {
  display: inline-flex;
}

#notf .notificationEmptyState {
  position: absolute;
  z-index: 1;
  inset: 42px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px 125px;
  direction: ltr;
  text-align: center;
  box-sizing: border-box;
}

#notf.has-notifications .notificationEmptyState {
  display: none !important;
}

#notf .notificationEmptyIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-bottom: 19px;
  color: #ff9700;
  border: 1px solid rgba(255, 166, 56, .28);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff3df, #fdebed);
}

#notf .notificationEmptyIcon i {
  color: #ff9700;
  font-size: 17px !important;
}

#notf .notificationEmptyState strong {
  display: block;
  margin-bottom: 7px;
  color: #26121f;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#notf .notificationEmptyState>span {
  display: block;
  color: #8b7890;
  font-size: 11px !important;
  font-weight: 600 !important;
}

#notf .notificationItems {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
  padding: 1px 7px 15px;
  box-sizing: border-box;
}

.ui-icon-adjust:after {
  background-image: url("<url removed for brevity>");
  background-repeat: no-repeat;
  background-position: 4px 3px;
  float: left;
}

[data-role="icon"]:after {
  background-image: url("<url removed for brevity>");
  background-repeat: no-repeat;
  background-position: 4px 3px;
  float: left;
}

.u-ico {
  padding-right: 2px;
  margin-top: 2px;
  max-height: 16px;
}

.ui-tabs-nav {
  padding: 0;
}

.ui-tabs-panel {
  padding: 0;
}

.darker {
  background-color: #33333a;
}

.unread {
  background-color: #ffc89d !important;
}

.b {
  border: 1px solid grey;
}

.bb {
  border: 2px solid grey;
}

table,
th,
td {
  border: 0;
}

th,
td {
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.ui-popup-container {
  margin: 0;
  padding: 0;
}

.animating {
  animation: animate 1s cubic-bezier(0, 1, 1, 0);
}

.mini {
  font-size: 90% !important;
}

.corner {
  border-radius: 5px;
}

.minix {
  font-size: 80% !important;
}

@keyframes bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-4px);
  }
}

.hand {
  cursor: hand;
}

.break {
  overflow: auto;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.pmsgc {
  background-color: rgba(0, 77, 255, 0.08) !important;
}

.ppmsgc {
  background-color: #f1f1ff !important;
}

.hmsg {
  background-color: #faf0e6 !important;
}

.heart {
  position: absolute;
  top: -50%;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -m-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.heart:before {
  position: absolute;
  top: -50%;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 100%;
}

.heart:after {
  position: absolute;
  top: 0;
  right: -50%;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 100%;
}

@-webkit-keyframes love {
  0% {
    top: 110%;
  }
}

@-moz-keyframes love {
  0% {
    top: 110%;
  }
}

@-ms-keyframes love {
  0% {
    top: 110%;
  }
}

@keyframes love {
  0% {
    top: 110%;
  }
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.hidden {
  display: none !important;
}

.affix {
  position: fixed;
}

/* Profile songs */

.profile-song-settings {
  clear: both;
  width: 100%;
  direction: rtl;
}

.profile-song-editor-toggle {
  width: 100%;
  height: 38px;
  margin: 2px 0 0;
  padding: 9px;
  color: #fff !important;
  text-align: center;
  font-size: 14px !important;
  font-weight: 900 !important;
  border: 1px solid #fff !important;
  border-radius: 3px !important;
  background: linear-gradient(135deg, #6a3fc5, #d93f82) !important;
  box-shadow: 0 3px 10px rgba(77, 42, 135, .24);
}

.profile-song-editor {
  margin: 3px 0 5px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid #d9ccef;
  border-radius: 7px;
  background: linear-gradient(145deg, #fff, #f7f2ff);
  box-shadow: 0 4px 14px rgba(53, 37, 82, .12);
  animation: profileSongReveal .22s ease-out;
}

.profile-song-editor-title {
  margin-bottom: 7px;
  color: #53358b;
  font-weight: 700;
  text-align: right;
}

.profile-song-editor audio {
  display: none !important;
}

.profile-song-link-row {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.profile-song-link-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 5px 8px;
  direction: ltr;
  border: 1px solid #cfc3e6;
  border-radius: 4px;
  color: #333;
  background: #fff;
}

.profile-song-link-row .btn {
  min-width: 82px;
  font-size: 11px !important;
}

.profile-song-editor-actions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.profile-song-editor-actions .btn {
  flex: 1;
  min-height: 34px;
  font-size: 12px !important;
}

.profile-song-volume-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin: 7px 0 0;
  color: #4e3a73;
}

.profile-song-volume-row span {
  flex: 1;
  text-align: right;
  font-size: 11px !important;
}

.profile-song-volume-row b {
  font-size: 11px !important;
}

.profile-song-volume-input {
  width: 100%;
  accent-color: #7948ca;
}

.profile-songs-mute-toggle {
  width: 100%;
  margin-top: 6px;
  color: #fff;
  background: #48536b;
}

.profile-songs-mute-toggle.is-muted {
  background: #b43645;
}

.profile-song-upload-status {
  margin-top: 7px;
  color: #777;
  font-size: 11px !important;
  text-align: center;
}

.profile-song-upload-status.is-error {
  color: #b52c2c;
}

.profile-song-upload-status.is-success {
  color: #168445;
}

#upro .profile-cover-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

#upro .profile-cover-wrap>.aftar {
  display: block;
}

#upro .notadmin {
  position: relative;
}

#upro .profile-avatar-wrap {
  position: relative;
  z-index: 20;
  width: 51%;
  height: 170px;
  margin: -75px auto 6px;
}

#upro .th-upro-verification {
  position: absolute;
  left: 50%;
  bottom: 5px;
  top: auto;
  transform: translateX(-50%);
  z-index: 22;
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  background-color: white;
  pointer-events: none;
}

#upro .profile-activity-summary {
  direction: ltr;
  display: block;
  width: 100%;
  padding: 5px 7px 2px;
  margin: 1px 0 4px;
  color: #505050;
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
}

#upro .profile-rank-badges {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  min-height: 48px;
  gap: 2px;
}

#upro .profile-rank-badges img {
  display: block;
  width: 46px;
  max-width: 100%;
  height: 46px;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12));
  transition: transform .18s ease, filter .18s ease;
}

#upro .profile-rank-badges img.is-earned {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22));
}

#upro .profile-rank-badges img:hover {
  transform: translateY(-2px) scale(1.06);
}

#upro .profile-activity-metrics {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 33px;
  margin-top: 3px;
  padding: 3px 8px 1px;
  border-top: 1px solid #d8d8d8;
}

#upro .profile-activity-stat {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 58px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

#upro .profile-view-stat > i {
  color: #3156ca;
}

#upro .profile-achievement-stat > i {
  color: #ffb400;
}

#upro .profile-activity-stars {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 104px;
  color: #d2d2d2;
  font-size: 18px;
  line-height: 1;
}

#upro .profile-activity-stars i {
  color: #d2d2d2;
  text-shadow: 0 1px 0 #fff;
}

#upro .profile-activity-stars i.is-active {
  color: #ffb400;
  text-shadow: 0 1px 1px rgba(135, 85, 0, .2);
}

#upro .gifts_picker {
  position: relative;
  z-index: 5;
}

.profile-action-dialog {
  z-index: 2147483647 !important;
}

.profile-action-dialog .modal-dialog {
  width: 94%;
  max-width: 410px;
  margin: 12vh auto 0;
}

.profile-action-dialog .modal-content {
  overflow: hidden;
  border: 1px solid rgba(35, 48, 78, .28);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .38);
}

.profile-action-dialog .modal-header {
  min-height: 54px;
  padding: 14px 16px;
  color: #fff;
  border: 0;
}

.profile-action-dialog .profile-action-title {
  display: block;
  padding-top: 3px;
  font-size: 15px;
  text-align: right;
}

.profile-action-dialog .profile-action-close {
  float: left;
  width: 31px;
  height: 31px;
  color: #fff;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

.profile-action-dialog .modal-body {
  padding: 18px;
  background: #fff;
}

.profile-action-dialog .profile-action-question {
  margin-bottom: 10px;
  color: #26344d;
  font-weight: 700;
  text-align: right;
}

.profile-action-dialog .profile-action-input {
  width: 100%;
  min-height: 92px;
  padding: 11px;
  resize: vertical;
  color: #172033;
  border: 1px solid #bcc8dc;
  border-radius: 9px;
  outline: 0;
  direction: rtl;
}

.profile-action-dialog .profile-action-input:focus {
  border-color: #2b7bc0;
  box-shadow: 0 0 0 3px rgba(43, 123, 192, .15);
}

.profile-action-dialog .profile-action-input.is-invalid {
  border-color: #df3f4d;
}

.profile-action-dialog .profile-action-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 9px;
  margin-top: 14px;
}

.profile-action-dialog .profile-action-buttons .btn {
  min-width: 92px;
  min-height: 38px;
  border-radius: 8px;
}

.profile-action-dialog .profile-action-cancel {
  color: #334155;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}

#upro #profileSongAudio {
  display: none !important;
}

#upro .profile-song-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  right: auto;
  float: none;
  margin: 0;
  z-index: 6;
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: visible;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  outline: 0;
  background: linear-gradient(145deg, #783fd1, #e23d86);
  box-shadow: 0 4px 15px rgba(22, 15, 37, .4);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#upro .profile-song-icon:hover,
#upro .profile-song-icon:focus {
  transform: scale(1.08);
  box-shadow: 0 5px 18px rgba(74, 35, 131, .55);
}

#upro .profile-song-icon i {
  line-height: 36px;
  font-size: 17px !important;
  pointer-events: none;
}

#upro .profile-song-icon.is-playing {
  background: linear-gradient(145deg, #16a26c, #2ec8a0);
  animation: profileSongPulse 1.35s ease-in-out infinite;
}

#upro .profile-song-icon.needs-tap {
  animation: profileSongAttention 1.1s ease-in-out infinite;
}

@keyframes profileSongReveal {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes profileSongPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(18, 128, 91, .38), 0 0 0 0 rgba(46, 200, 160, .38);
  }

  50% {
    box-shadow: 0 5px 18px rgba(18, 128, 91, .5), 0 0 0 8px rgba(46, 200, 160, 0);
  }
}

@keyframes profileSongAttention {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* Microphone dock: aligned to the top-left corner with one management menu. */

body .broadcasters:empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .broadcasters .prod {
  position: relative !important;
  order: 2;
  float: none !important;
  flex: 0 0 54px;
  width: 54px !important;
  height: 52px !important;
  margin: 0 1px !important;
  overflow: visible !important;
  border: 1px solid rgb(0 0 0 / 92%) !important;
  border-radius: 2px !important;
  background-color: rgb(0 0 0 / 0%) !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

body .broadcasters .prod:hover {
  z-index: 10;
  transform: none;
  border-color: rgba(43, 12, 12, .92) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
  filter: brightness(1.08);
}

body .broadcasters .prod>img#imgmic {
  position: absolute;
  inset: 1px;
  width: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  object-fit: contain;
  opacity: 1;
  filter: none;
}

body .broadcasters .prod>.evant {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4;
  width: 100%;
  height: 100% !important;
  border-radius: 2px;
}

body .broadcasters .prod #name {
  position: absolute !important;
  right: 1px !important;
  bottom: 0 !important;
  top: auto !important;
  display: block !important;
  width: calc(100% - 2px);
  padding: 0 2px;
  overflow: hidden;
  color: #fff !important;
  border-radius: 0;
  background: rgba(8, 15, 31, .78) !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 8px !important;
  line-height: 13px !important;
}

body .broadcasters .prod #showpf {
  top: 48px !important;
  right: -19px !important;
  left: auto !important;
  z-index: 60 !important;
  width: 94px;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid rgba(28, 46, 76, .55);
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .28);
}

body .broadcasters .prod #showpf i {
  width: 82px !important;
  margin: 1px 0;
  color: #fff !important;
  border: 0 !important;
  border-radius: 5px !important;
}

body .broadcasters .prod>.ismute {
  z-index: 6;
  top: 21px;
  left: 1px;
  width: 43px;
  margin: 0;
  background: #e44251;
  border-radius: 3px;
}

body .broadcasters .prod.is_speaking {
  border-color: #40e391 !important;
  animation: micSpeakingGlow .8s ease-in-out infinite !important;
}

body .broadcasters .prod.mic-slot-locked {
  cursor: not-allowed !important;
  border-color: rgba(43, 12, 12, .92) !important;
  background: rgba(112, 34, 34, .28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
  transform: none !important;
}

body .broadcasters .prod.mic-slot-locked>img#imgmic,
body .broadcasters .prod.mic-slot-locked>.evant,
body .broadcasters .prod.mic-slot-locked>.ismute,
body .broadcasters .prod.mic-slot-locked>audio {
  display: none !important;
}

body .broadcasters .prod .mic-slot-lock {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ffd46a;
  border-radius: 2px;
  background: transparent;
}

body .broadcasters .prod .mic-slot-lock img {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  image-rendering: auto;
}

body #muteall.mic-listen-toggle {
  position: relative !important;
  inset: auto !important;
  order: 1;
  float: none !important;
  flex: 0 0 55px;
  width: 55px !important;
  height: 52px !important;
  margin: 0 1px 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #09251b !important;
  border: 1px solid rgba(18, 45, 31, .95) !important;
  border-radius: 2px !important;
  background: #18bd70 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13) !important;
  cursor: pointer;
}

body #muteall.mic-listen-toggle>span {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 50px !important;
}

body #muteall.mic-listen-toggle.is-muted {
  color: #fff !important;
  background: linear-gradient(145deg, #d94a58, #a92333) !important;
}

.mic-room-tools {
  position: relative !important;
  z-index: 0;
  width: 45px;
  height: 45px;
}

.mic-menu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0 !important;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 0px !important;
  background: linear-gradient(145deg, #367bb5, #214b84);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transition: transform .16s ease, filter .16s ease;
  margin-top: -3px;
  margin-right: -4px;
}

.mic-menu-toggle:hover,
.mic-menu-toggle:focus {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.mic-menu-toggle>i:first-child {
  font-size: 18px !important;
}

.mic-menu-toggle>span {
  display: none;
}

.mic-menu-caret {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 9px !important;
}

.mic-menu-toggle.has-waiting {
  background: linear-gradient(145deg, #9f6222, #d9952d);
}

.mic-menu-toggle.hand-raised {
  background: linear-gradient(145deg, #8e671a, #f0b738);
  animation: micHandPulse 1.2s infinite;
}

.mic-queue-count {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #e73558;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  font-size: 9px !important;
  line-height: 14px !important;
}

.mic-control-menu {
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 100;
  display: none;
  width: 280px;
  max-width: calc(100vw - 12px);
  overflow: hidden;
  color: #202b3c;
  border: 1px solid #39537b;
  border-radius: 12px;
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .36);
  transform-origin: top right;
}

.mic-control-menu.open {
  display: block;
  animation: micMenuOpen .2s cubic-bezier(.2, .85, .3, 1.15);
}

.mic-control-menu-head {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 39px;
  padding: 7px 9px;
  color: #fff;
  background: linear-gradient(120deg, #1e3e70, #2886a4);
}

.mic-control-menu-head span {
  flex: 1;
  text-align: right;
  font-size: 12px !important;
}

.mic-control-menu-head b {
  min-width: 24px;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  text-align: center;
  font-size: 10px !important;
}

.mic-control-menu>button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 12px);
  min-height: 38px;
  margin: 6px;
  padding: 7px 9px !important;
  color: #21334d;
  border: 1px solid #cad6e5;
  border-radius: 8px !important;
  background: linear-gradient(100deg, #f5f9ff, #eaf3fc);
  text-align: right;
}

.mic-control-menu>button i {
  width: 25px;
  height: 25px;
  color: #fff;
  border-radius: 50%;
  background: #3478ad;
  text-align: center;
  line-height: 25px !important;
}

.mic-control-menu>button span {
  flex: 1;
  font-size: 11px !important;
}

.mic-control-menu>button.active {
  color: #5a3900;
  border-color: #e5b348;
  background: #fff4d7;
}

.mic-control-menu>button.active i {
  background: #d79a22;
}

.mic-control-menu>.mic-mute-room {
  color: #8f1e2b;
  border-color: #efc3c9;
  background: #fff1f3;
}

.mic-control-menu>.mic-mute-room i {
  background: #ca3445;
}

.mic-queue-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  color: #29486b;
  border-top: 1px solid #dde5ee;
  border-bottom: 1px solid #e8edf3;
  background: #f5f8fc;
}

.mic-queue-title span {
  font-size: 11px !important;
}

.mic-queue-title small {
  flex: 1;
  color: #8390a1;
  text-align: left;
  font-size: 8px !important;
}

.mic-queue-panel {
  position: static;
  width: auto;
  max-height: 210px;
  overflow-y: auto;
  padding: 4px;
  color: #222;
  background: #fff;
}

.mic-queue-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 4px 5px;
  border-bottom: 1px solid #edf0f4;
  border-radius: 7px;
}

.mic-queue-item:hover {
  background: #f1f7fd;
}

.mic-queue-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #86a6c7;
}

.mic-queue-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #26384e;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  font-size: 11px !important;
}

.mic-queue-accept {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 58px;
  height: 29px;
  padding: 3px 7px;
  color: #fff;
  border: 0;
  border-radius: 6px;
  background: #1e9d65;
}

.mic-queue-accept i,
.mic-queue-accept span {
  font-size: 9px !important;
}

.mic-queue-empty {
  padding: 18px 8px;
  color: #7f8a99;
  text-align: center;
  font-size: 10px !important;
}

.mic-quality {
  position: absolute;
  z-index: 8;
  right: -4px;
  bottom: -3px;
  padding: 0 4px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 8px;
  font-size: 7px !important;
  line-height: 12px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.mic-quality.quality-good {
  background: #15985d;
}

.mic-quality.quality-medium {
  background: #e59a18;
}

.mic-quality.quality-weak {
  background: #c93342;
}

.mic-approved-slot {
  animation: micApproved 1s ease-in-out infinite;
}

@keyframes micSpeakingGlow {
  50% {
    box-shadow: 0 0 0 5px rgba(64, 227, 145, .25), 0 4px 12px rgba(0, 0, 0, .32);
  }
}

@keyframes micHandPulse {
  50% {
    transform: scale(1.06);
  }
}

@keyframes micApproved {
  50% {
    box-shadow: 0 0 0 6px rgba(63, 190, 116, .36);
  }
}

@keyframes micMenuOpen {
  from {
    opacity: 0;
    transform: translateY(-7px) scale(.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  body .broadcasters {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  body .broadcasters .prod {
    flex-basis: 42px;
    width: 42px !important;
    height: 42px !important;
    margin: 0 1px !important;
  }

  body .broadcasters .prod>img#imgmic {
    inset: 4px;
    width: 30px !important;
    height: 30px !important;
  }

  body #muteall.mic-listen-toggle {
    flex-basis: 39px;
    width: 39px !important;
    height: 39px !important;
    margin: 0 2px 0 1px !important;
  }

  body #muteall.mic-listen-toggle>span {
    font-size: 21px !important;
    line-height: 35px !important;
  }

  .mic-room-tools,
  .mic-menu-toggle {
    width: 40px;
    height: 40px;
  }

  .mic-control-menu {
    right: 0;
    width: 270px;
  }
}

/* Group conversation window: exact private-chat shell, proportions and controls. */

#groupChatOverlay.group-chat-overlay {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 1px !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  direction: ltr !important;
}

#groupChatPanel.group-chat-panel.private-chat-like {
  position: relative !important;
  top: 0 !important;
  right: auto !important;
  left: 0 !important;
  width: 97% !important;
  max-width: 500px !important;
  min-height: 180px !important;
  height: 50% !important;
  max-height: 500px !important;
  margin: 0 !important;
  padding: 0 0 25px !important;
  overflow: hidden !important;
  border: 1px solid #000 !important;
  border-radius: 0 0 1em 0 !important;
  color: #111 !important;
  background: #fff !important;
  box-shadow: none !important;
  direction: rtl !important;
}

#groupChatPanel.group-chat-panel.private-chat-like.is-expanded {
  height: 86% !important;
  max-height: 86% !important;
}

#groupChatPanel .group-chat-head {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 !important;
  direction: ltr !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#groupChatPanel .group-chat-head > button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  order: initial !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 1px 0 !important;
  padding: 6px !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

#groupChatPanel .group-chat-new,
#groupChatPanel .group-chat-manage,
#groupChatPanel .group-chat-back {
  width: 38px !important;
  flex: 0 0 38px !important;
  justify-content: center !important;
  background: transparent !important;
  font-size: 13px !important;
}

#groupChatPanel .group-chat-head > .group-chat-head-copy {
  width: auto !important;
  min-width: 0 !important;
  height: 28px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  padding: 1px 2px !important;
  overflow: hidden !important;
  border: 0 !important;
  text-align: left !important;
  background: transparent !important;
}

#groupChatPanel .group-chat-head-avatar {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #fff !important;
  color: #111 !important;
  background: #fff !important;
  font-size: 14px !important;
}

#groupChatPanel .group-chat-head-copy > span:last-child {
  min-width: 0 !important;
  max-width: 72% !important;
  display: block !important;
  padding: 1px 7px !important;
  overflow: hidden !important;
  border-radius: 2px !important;
  color: #111 !important;
  background: #fff !important;
  text-align: right !important;
}

#groupChatPanel .group-chat-title {
  display: block !important;
  overflow: hidden !important;
  color: #111 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#groupChatPanel .group-chat-subtitle {
  display: none !important;
}

#groupChatPanel .group-chat-resize {
  width: 38px !important;
  flex: 0 0 38px !important;
  background: #17a2b8 !important;
  font-size: 12px !important;
}

#groupChatPanel .group-chat-close {
  width: 32px !important;
  flex: 0 0 32px !important;
  background: #dc3545 !important;
  font-size: 12px !important;
}

#groupChatPanel .group-chat-main {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #fff !important;
}

#groupChatPanel .group-chat-room-view {
  position: relative !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #fff !important;
}

#groupChatPanel .group-chat-room-meta {
  display: none !important;
}

#groupChatPanel .group-chat-messages {
  width: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 2px 2px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff !important;
  background-image: none !important;
}

#groupChatPanel .group-chat-message,
#groupChatPanel .group-chat-message.mine,
#groupChatPanel .group-chat-message.other {
  position: relative !important;
  width: 99.5% !important;
  min-height: 53px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin: 0 0 -2px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid #f4f4f4 !important;
  border-radius: 5px !important;
  direction: ltr !important;
  background: #fff !important;
  box-shadow: none !important;
}

#groupChatPanel .group-chat-message > .group-chat-message-pic {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin: 1px 1px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  box-shadow: none !important;
}

#groupChatPanel .group-chat-message-time {
  position: absolute !important;
  top: auto !important;
  bottom: 2px !important;
  right: 3px !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 2px !important;
  direction: ltr !important;
  color: grey !important;
  font-size: 9px !important;
  line-height: 13px !important;
}

#groupChatPanel .group-chat-bubble,
#groupChatPanel .group-chat-message.mine .group-chat-bubble,
#groupChatPanel .group-chat-message.other .group-chat-bubble {
  width: 70% !important;
  min-width: 0 !important;
  max-width: 70% !important;
  display: block !important;
  flex: 0 1 70% !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  direction: ltr !important;
  background: transparent !important;
  box-shadow: none !important;
}

#groupChatPanel .group-chat-message-top {
  width: 100% !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 80px 0 0 !important;
  direction: ltr !important;
}

#groupChatPanel .group-chat-message-top > .u-topic {
  max-width: calc(100% - 4px) !important;
  display: block !important;
  padding: 0 2px !important;
  overflow: hidden !important;
  color: #111 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#groupChatPanel .group-chat-message-body {
  width: 100% !important;
  min-height: 20px !important;
  padding: 0 !important;
  overflow-wrap: anywhere !important;
  color: #111 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  direction: rtl !important;
  text-align: left !important;
}

#groupChatPanel .group-chat-message-actions {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 4 !important;
  display: flex !important;
  gap: 1px !important;
  margin: 0 !important;
  opacity: 1 !important;
  direction: ltr !important;
}

#groupChatPanel .group-chat-message-actions > button {
  width: 25px !important;
  min-width: 25px !important;
  height: 25px !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 10px !important;
}

#groupChatPanel .group-chat-message-actions > .btn-info {
  background-color: #17a2b8 !important;
}

#groupChatPanel .group-chat-bubble footer {
  min-height: 0 !important;
  margin: 0 !important;
}

#groupChatPanel .group-chat-typing {
  position: absolute !important;
  z-index: 30 !important;
  right: 4px !important;
  bottom: 42px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 3px 7px !important;
  color: #111 !important;
  background: #fff !important;
}

#groupChatPanel .group-chat-typing:empty {
  display: none !important;
}

#groupChatPanel .group-chat-compose-context {
  flex: 0 0 auto !important;
}

#groupChatPanel .group-chat-compose {
  position: relative !important;
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 4px !important;
  border: 0 !important;
  border-top: 1px solid #ddd !important;
  direction: ltr !important;
  background: #fff !important;
}

#groupChatPanel .group-chat-compose > button {
  width: 38px !important;
  min-width: 38px !important;
  height: 34px !important;
  flex: 0 0 38px !important;
  margin: 0 2px 0 0 !important;
  padding: 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

#groupChatPanel .group-chat-compose > .group-chat-call,
#groupChatPanel .group-chat-compose > .group-chat-mic {
  background: #28a745 !important;
}

#groupChatPanel .group-chat-compose > .group-chat-mic.is-muted {
  background: #dc3545 !important;
}

#groupChatPanel .group-chat-emoji {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  padding: 5px !important;
  object-fit: contain !important;
}

#groupChatPanel .group-chat-compose > textarea {
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  max-height: 32px !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  resize: none !important;
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: #111 !important;
  background: #fff !important;
  direction: rtl !important;
  font-size: 12px !important;
  line-height: 20px !important;
  box-shadow: none !important;
}

#groupChatPanel .group-chat-media-menu,
#groupChatPanel .group-chat-upload-status {
  position: absolute !important;
  z-index: 40 !important;
  right: 0 !important;
  bottom: 42px !important;
  width: 100% !important;
}

@media (max-width: 520px) {
  #groupChatPanel.group-chat-panel.private-chat-like {
    width: 97% !important;
    height: 50% !important;
    max-height: 500px !important;
  }

  #groupChatPanel.group-chat-panel.private-chat-like.is-expanded {
    height: 86% !important;
    max-height: 86% !important;
  }

  #groupChatPanel .group-chat-compose > button {
    width: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }
}

.group-voice-invite {
  position: fixed;
  z-index: 1000007;
  top: 50%;
  left: 50%;
  width: min(330px, calc(100vw - 20px));
  overflow: hidden;
  border: 1px solid #a8b7d0;
  border-radius: 14px;
  color: #17233f;
  background: #fff;
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
  transform: translate(-50%, -50%);
}

.group-voice-invite header {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  color: #fff;
  background: #315b9a;
}

.group-voice-invite header > i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #22ad4e;
}

.group-voice-invite header div,
.group-voice-invite-caller span {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.group-voice-invite b {
  font-size: 12px !important;
}

.group-voice-invite small {
  color: inherit !important;
  font-size: 9px !important;
  opacity: .82;
}

.group-voice-invite-caller {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
}

.group-voice-invite-caller img {
  width: 48px !important;
  height: 48px !important;
  border: 2px solid #315b9a;
  border-radius: 50%;
  object-fit: cover;
}

.group-voice-invite footer {
  display: flex;
  gap: 6px;
  padding: 0 10px 10px;
}

.group-voice-invite footer button {
  height: 38px;
  flex: 1;
  border: 0;
  border-radius: 6px !important;
  color: #fff;
  font-size: 10px !important;
}

.group-voice-invite footer .join {
  background: #22ad4e;
}

.group-voice-invite footer .dismiss {
  background: #e63348;
}

/* Five-room-microphone selector in the room editor. */

.room-mic-limit {
  clear: both;
  width: 100%;
  padding: 7px 3px 4px;
  direction: ltr;
  text-align: left;
}

.room-mic-limit-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  direction: ltr;
}

.room-mic-limit-buttons button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  color: #161616;
  border: 1px solid #b7b7b7;
  border-radius: 6px !important;
  outline: 0;
  background: linear-gradient(#fff, #f0f0f0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.room-mic-limit-buttons button:hover {
  transform: translateY(-1px);
  background: #fff;
}

.room-mic-limit-buttons button i {
  font-size: 15px !important;
}

.room-mic-limit-buttons .room-mic-lock-image {
  display: none;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.room-mic-limit-buttons button.is-locked {
  color: #d93636;
  border-color: #d7aaaa;
  background: linear-gradient(#fff8f8, #f5e5e5);
}

.room-mic-limit-buttons button.is-locked i {
  display: none;
}

.room-mic-limit-buttons button.is-locked .room-mic-lock-image {
  display: block;
}

.room-mic-limit-count {
  margin-top: 4px;
  color: #222;
  font-size: 11px !important;
  line-height: 18px;
}

.room-mic-limit-count strong {
  color: #a71926;
  font-size: 12px !important;
}

/* iOS-style additions and features menu */

#more.thMoreIOS {
  clear: both;
  float: none;
  height: 100%;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px 10px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0;
  background: radial-gradient(circle at 100% 0%, rgba(167, 139, 250, .28) 0%, transparent 42%), radial-gradient(circle at 0% 100%, rgba(236, 72, 153, .20) 0%, transparent 44%), radial-gradient(circle at 50% 0%, rgba(96, 165, 250, .18) 0%, transparent 40%), linear-gradient(165deg, #37156f 0%, #42106f 48%, #1e3a8a 100%) !important;
  color: #334155;
  font-family: Cairo, 'El Messiri', system-ui, sans-serif;
  -webkit-overflow-scrolling: touch;
}

.th-settings-more-btn {
  position: relative;
  display: block;
  clear: both;
  float: none;
  width: 98%;
  min-height: 42px;
  margin: 4px;
  padding: 9px 12px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  border-radius: 7px !important;
  background: linear-gradient(110deg, #3d176e, #7d2bc2 54%, #2255a6) !important;
  box-shadow: 0 4px 12px rgba(50, 20, 100, .28), inset 0 1px rgba(255, 255, 255, .18);
  text-align: center;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.th-settings-more-btn:active {
  transform: scale(.985);
}

.th-settings-more-icon {
  width: 27px;
  height: 25px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .16);
  line-height: 25px !important;
}

#more .thMoreGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

#more .thMoreRow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 7px 11px;
  overflow: hidden;
  direction: ltr;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  outline: 0;
  box-shadow: 0 8px 18px rgba(20, 7, 66, .18), inset 0 1px rgba(255, 255, 255, .12);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .24);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

#more .thMoreRow:active {
  transform: scale(.985);
  filter: brightness(.96);
}

#more .thMoreRow:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .42), 0 8px 18px rgba(20, 7, 66, .2);
}

#more .thMoreRowDesign {
  background: linear-gradient(105deg, #d14dc6, #a83de2) !important;
}

#more .thMoreRowSong {
  background: linear-gradient(105deg, #ef397d, #9c39d8) !important;
}

#more .thMoreRowNotifications {
  background: linear-gradient(105deg, #ed247d, #c847c9) !important;
}

#more .thMoreRowStories {
  background: linear-gradient(105deg, #149dce, #5345c7) !important;
}

#more .thMoreRowSound {
  background: linear-gradient(105deg, #13cbe3, #128bd5) !important;
}

#more .thMoreRowWall {
  background: linear-gradient(105deg, #31bd37, #179d82) !important;
}

#more .thMoreRowProfileSongs {
  background: linear-gradient(105deg, #8c54dd, #5740ba) !important;
}

#more .thMoreRowWallCreator {
  background: linear-gradient(105deg, #178fc5 0%, #3f76d8 55%, #5748ca 100%) !important;
}

#more .thMoreIcoWallCreator {
  color: #fff;
  background: linear-gradient(145deg, #9d78f4, #684ed8);
}

#more .thMoreNum,
#more .thMoreSubNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  font-size: 12px !important;
  font-weight: 800;
}

#more .thMoreIco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28);
}

#more .thMoreIco i {
  font-size: 17px !important;
}

#more .thMoreIcoPink {
  background: linear-gradient(145deg, #f78ce7, #a949e0);
}

#more .thMoreIcoSong {
  background: linear-gradient(145deg, #ff719b, #7f48dc);
}

#more .thMoreIcoOrange {
  color: #765018;
  background: #ffc451;
}

#more .thMoreIcoPurple {
  background: linear-gradient(145deg, #9f77f6, #654bd2);
}

#more .thMoreIcoViolet {
  background: linear-gradient(145deg, #d893ff, #8457e6);
}

#more .thMoreIcoTeal {
  background: linear-gradient(145deg, #61ddd0, #20afae);
}

#more .thMoreIcoMusic {
  background: linear-gradient(145deg, #e58dfa, #8458de);
}

#more .thMoreTxt {
  flex: 1;
  min-width: 0;
  direction: rtl;
  color: #fff;
  text-align: right;
  white-space: normal;
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1.35 !important;
}

#more .thMoreCh {
  flex: 0 0 12px;
  color: rgba(255, 255, 255, .82);
  font-size: 22px !important;
  font-family: Arial, sans-serif;
  line-height: 1 !important;
}

#more .thMoreDivider {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23px;
}

#more .thMoreDivider:before {
  content: '•  •  •';
  color: rgba(255, 255, 255, .94);
  font-size: 10px;
  letter-spacing: 1px;
}

#more .thMoreSub {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: -2px 4px 7px;
  direction: ltr;
  color: rgba(255, 255, 255, .92);
  font-size: 12px !important;
  font-weight: 700;
}

#more .thMoreSubNum {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
  color: #4a247f;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

#more .thMoreToggleFlag {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#more .thMoreSwitchUI {
  position: relative;
  flex: 0 0 49px;
  width: 49px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 16px;
  background: rgba(255, 255, 255, .91);
  box-shadow: inset 0 1px 4px rgba(21, 24, 45, .18);
}

#more .thMoreSwitchUI:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d7dbe4;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  transition: transform .2s ease, background .2s ease;
}

#more .thMoreSwitchUI.is-on:after {
  transform: translateX(21px);
  background: #fff;
}

#more .thMoreToggle.notification-setting-disabled {
  color: #fff !important;
  filter: saturate(.72) brightness(.94);
}

#more .listHome,
#more .profile-song-settings {
  width: 100%;
  margin: 0;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 7px 18px rgba(19, 7, 57, .2);
}

#more .profile-song-editor {
  margin: 0;
}

#more .profile-song-settings {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 420px) {
  #more.thMoreIOS {
    min-height: 0;
    padding: 12px 8px 18px;
  }

  #more .thMoreRow {
    min-height: 53px;
    padding: 6px 9px;
  }

  #more .thMoreIco {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
  }

  #more .thMoreTxt {
    font-size: 13px !important;
  }
}

/* Membership design gallery */

#profileDesignPanel::-webkit-scrollbar {
  width: 8px;
}

#profileDesignPanel::-webkit-scrollbar-track {
  background: transparent;
}

#profileDesignPanel::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #888;
}

.profileDesignToolbar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-height: 37px;
  padding: 1px 3px 5px;
  direction: rtl;
}

.profileDesignBack {
  min-width: 56px;
  height: 31px;
  padding: 5px 9px !important;
  color: #1683e5;
  border: 1px solid #dfe6ef;
  border-radius: 15px !important;
  background: #fff;
  box-shadow: 0 2px 7px rgba(36, 63, 90, .08);
  font-size: 11px !important;
}

.profileDesignStatus {
  display: none;
  width: calc(100% - 10px);
  margin: 0 5px 7px;
  padding: 7px 9px;
  direction: rtl;
  color: #31526f;
  border: 1px solid #cfe0ef;
  border-radius: 9px;
  background: #eff8ff;
  text-align: center;
  font-size: 10px !important;
}

.profileDesignStatus.is-success {
  color: #157445;
  border-color: #a8dfc2;
  background: #edfff5;
}

.profileDesignStatus.is-error {
  color: #a42943;
  border-color: #efb7c4;
  background: #fff0f4;
}

.profileDesignStatus.is-loading {
  color: #6b4590;
  border-color: #ddc3ed;
  background: #faf1ff;
}

.profileDesignSection {
  width: 100%;
  margin: 3px 0 14px;
  padding: 0 5px;
  box-sizing: border-box;
}

.profileDesignSection h3 {
  width: 100%;
  min-height: 40px;
  margin: 0 0 8px;
  padding: 9px 8px;
  color: #b41457;
  border: 1px solid #f5dce7;
  border-radius: 14px;
  background: rgba(255, 250, 253, .94);
  box-shadow: inset 0 1px rgba(255, 255, 255, .8);
  text-align: center;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.profileDesignGrid {
  display: grid;
  width: 100%;
  gap: 3px;
  direction: rtl;
}

.profileDesignFramesGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profileDesignBackgroundGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 9px;
}

.profileDesignTile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 3px !important;
  overflow: hidden;
  color: #4b5663;
  border: 1px solid #f2d8e4 !important;
  border-radius: 13px !important;
  outline: 0;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 2px 7px rgba(157, 61, 103, .06);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.profileDesignTile:active {
  transform: scale(.975);
}

.profileDesignTile:focus-visible,
.profileDesignTile:hover {
  border-color: #ec7aaa !important;
  box-shadow: 0 4px 12px rgba(176, 42, 100, .15);
}

.profileDesignFramesGrid>.profileDesignTile {
  aspect-ratio: 1/1;
}

.profileDesignFrameTile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profileDesignBackgroundTile {
  min-height: 59px;
  aspect-ratio: 2.16/1;
}

.profileDesignBackgroundPreview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 52px;
  border-radius: 9px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profileDesignUploadTile {
  flex-direction: column;
  gap: 2px;
  color: #5e6a78;
  background: linear-gradient(145deg, #fff, #fff9fc);
}

.profileDesignUploadArt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 48px;
  color: #55616d;
  border: 4px solid #606b75;
  border-radius: 7px;
}

.profileDesignUploadArt>i {
  font-size: 25px !important;
}

.profileDesignUploadArt>b {
  position: absolute;
  top: -10px;
  right: -11px;
  width: 27px;
  height: 27px;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #25cdaa;
  line-height: 21px !important;
  text-align: center;
}

.profileDesignTileLabel {
  color: #5e6a78;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

.profileDesignBackgroundUpload {
  grid-column: 1/-1;
  flex-direction: row;
  min-height: 72px;
  aspect-ratio: auto !important;
  gap: 13px;
}

.profileDesignBackgroundUpload .profileDesignTileLabel {
  font-size: 15px !important;
}

.profileDesignResetTile:before {
  content: '';
  position: absolute;
  width: 55px;
  height: 55px;
  border: 2px dotted #333;
  border-radius: 50%;
}

.profileDesignResetTile>span {
  position: relative;
  z-index: 1;
  color: #333;
  font-size: 25px !important;
}

.profileDesignBackgroundGrid .profileDesignResetTile {
  min-height: 59px;
  aspect-ratio: 2.16/1;
}

.profileDesignBackgroundGrid .profileDesignResetTile:before {
  width: 62px;
  height: 38px;
  border-radius: 50%;
}

.profileDesignOwnedTile {
  border-color: #7cdac6 !important;
}

.profileDesignOwnedTile>small {
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 3;
  padding: 0 4px;
  color: #fff;
  border-radius: 5px;
  background: rgba(24, 155, 127, .88);
  font-size: 7px !important;
  line-height: 15px !important;
}

.profileDesignDelete {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 5;
  width: 25px;
  height: 25px;
  padding: 0 !important;
  color: #fff;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #d83b58;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .23);
  line-height: 21px !important;
}

@media (max-width: 350px) {
  #profileDesignPanel.profileDesignIOS {
    padding-right: 5px;
    padding-left: 5px;
  }

  .profileDesignGrid {
    gap: 2px;
  }

  .profileDesignBackgroundGrid {
    gap: 6px;
  }

  .profileDesignUploadArt {
    width: 50px;
    height: 43px;
  }
}

/* Profile visitors */

#more .thMoreRowVisitors {
  background: linear-gradient(105deg, #178fc5 0%, #4270d2 58%, #5947c8 100%) !important;
}

#profileVisitorsPanel::-webkit-scrollbar {
  width: 5px;
}

#profileVisitorsPanel::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(255, 255, 255, .55);
}

#profileVisitorsPanel .profileVisitorsPeriods button:active {
  transform: scale(.97);
}

@media (max-width: 350px) {
  #profileVisitorsPanel.profileVisitorsIOS {
    padding-right: 3px;
    padding-left: 3px;
  }

  #profileVisitorsPanel .profileVisitorsPodium {
    gap: 2px;
  }

  #profileVisitorsPanel .profileVisitorsPeriods {
    gap: 5px;
    padding-right: 4px;
    padding-left: 4px;
  }
}

/* Mic stars: real daily, weekly and monthly microphone duration ranking */

#micStarsPanel::-webkit-scrollbar {
  width: 5px;
}

#micStarsPanel::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(255, 255, 255, .58);
}

#micStarsPanel .micStarsPeriods button:active {
  transform: scale(.97);
}

@media (max-width:350px) {
  #micStarsPanel.micStarsIOS {
    padding-right: 3px;
    padding-left: 3px;
  }

  #micStarsPanel .micStarsPodium {
    gap: 2px;
  }

  #micStarsPanel .micStarsPeriods {
    gap: 5px;
    padding-right: 4px;
    padding-left: 4px;
  }
}

/* Competition bot management */

#contestBotPanel .contestBotMascot>span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 22px;
  height: 22px;
  color: #6c2bd1;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  line-height: 18px !important;
  text-align: center;
  font-size: 14px !important;
}

#contestBotPanel .contestBotIntroText span {
  color: #5a5f70;
  font-size: 11px !important;
  line-height: 1.7 !important;
}

#contestBotPanel .contestBotField select:focus,
#contestBotPanel .contestBotField input:focus {
  border-color: #a13bf0;
  box-shadow: 0 0 0 3px rgba(161, 59, 240, .11);
}

#contestBotPanel .contestBotField select:disabled,
#contestBotPanel .contestBotField input:disabled {
  color: #7b7184;
  background: #f2edf4;
  opacity: .78;
}

@keyframes contestDedicationPulse {
  50% {
    transform: scale(1.18);
    opacity: .72;
  }
}

#contestBotPanel .contestBotStatus strong {
  color: #33384b;
  font-size: 12px !important;
}

#contestBotPanel .contestBotStatus small {
  overflow: hidden;
  color: #82879a;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px !important;
}

#contestBotPanel .contestBotQuestion {
  width: 100%;
  margin: 0 0 10px;
  padding: 11px 12px;
  color: #5e217f;
  border: 1px solid #e1c6f3;
  border-radius: 14px;
  background: linear-gradient(110deg, #fbf0ff, #fff5fb);
  text-align: center;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-sizing: border-box;
}

#contestBotPanel .contestBotScoresSection {
  width: 100%;
  margin: 0 0 11px;
  padding: 9px;
  border: 1px solid #e5dff1;
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
}

#contestBotPanel .contestBotScoresSection h3 {
  margin: 0 0 7px;
  padding: 0 2px 7px;
  color: #7132a0;
  border-bottom: 1px solid #eee7f5;
  background: transparent;
  text-align: right;
  font-size: 11px !important;
}

#contestBotPanel .contestBotScores {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#contestBotPanel .contestBotScoreValue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 7px;
  color: #792db1;
  border: 1px solid #e3caf3;
  border-radius: 13px;
  background: #fff;
  font-size: 10px !important;
}

#contestBotPanel .contestBotActions button:disabled {
  cursor: not-allowed;
  filter: grayscale(.55);
  opacity: .58;
  box-shadow: none;
}

.contestBotBubble {
  display: block;
  width: 100%;
  padding: 5px 7px;
  color: #40205f;
  border-right: 3px solid #9b32dc;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(247, 235, 255, .82), rgba(255, 248, 252, .9));
  box-sizing: border-box;
  line-height: 1.75 !important;
}

@media (max-width:350px) {
  #contestBotPanel.contestBotIOS {
    padding-right: 6px;
    padding-left: 6px;
  }

  #contestBotPanel .contestBotMascot {
    flex-basis: 70px;
    width: 70px;
    height: 74px;
  }
}

/* Member social link and embedded viewer */

#more .thMoreRowSocial {
  background: linear-gradient(105deg, #05070b, #171923 50%, #07130f) !important;
}

#more .thMoreIcoSocial {
  gap: 3px;
  flex-basis: 76px;
  width: 76px;
  padding: 0 5px;
  border-color: #49e3bb;
  background: #07090d;
}

#more .thMoreIcoSocial i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 24px;
  font-size: 15px !important;
}

#more .thMoreIcoSocial .fa-youtube-play {
  color: #ff1f2f;
}

#more .thMoreIcoSocial .fa-instagram {
  color: #f94fbd;
}

#more .thMoreIcoSocial .fa-music {
  color: #36e0d2;
  text-shadow: 1px 1px #ee2b65;
}

.social-link-overlay,
.social-link-viewer {
  position: fixed;
  z-index: 3200000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(8, 14, 25, .7);
  backdrop-filter: blur(3px);
  box-sizing: border-box;
  direction: rtl;
}

.social-link-dialog {
  width: 520px;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  animation: socialLinkPop .2s ease-out;
}

.social-link-dialog-head {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 8px 13px;
  color: #fff;
  background: linear-gradient(105deg, #743433, #a74a4c);
  box-sizing: border-box;
}

.social-link-dialog-head strong {
  flex: 1;
  text-align: right;
  font-size: 14px !important;
}

.social-link-dialog-head strong i {
  margin-left: 5px;
}

.social-link-close,
.social-link-viewer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ed001c !important;
  box-shadow: 0 3px 9px rgba(104, 0, 10, .25);
}

.social-link-dialog-body {
  padding: 15px 16px 7px;
  color: #263347;
  text-align: right;
}

.social-link-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -2px 0 12px;
  direction: ltr;
}

.social-link-platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  color: #fff;
  border-radius: 17px;
  box-shadow: 0 4px 10px rgba(20, 28, 42, .15);
  font-size: 10px !important;
}

.social-link-platform i {
  font-size: 16px !important;
}

.social-link-platform b {
  font-size: 9px !important;
}

.social-link-platform.youtube {
  background: #e51524;
}

.social-link-platform.instagram {
  background: linear-gradient(110deg, #6c2cc9, #e2318f, #f09b2b);
}

.social-link-platform.tiktok {
  background: #101218;
  box-shadow: 2px 1px #28e0d1, -2px -1px #f33569;
}

.social-link-dialog-body p {
  margin: 0 0 11px;
  color: #48566a;
  line-height: 1.8 !important;
  font-size: 11px !important;
}

.social-link-dialog-body>label {
  display: block;
  margin: 0 1px 5px;
  color: #344056;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#socialLinkInput {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 12px;
  color: #172033;
  border: 2px solid #c9d5e3;
  border-radius: 9px;
  background: #fff;
  outline: 0;
  box-sizing: border-box;
  direction: ltr;
  text-align: left;
  font-size: 12px !important;
}

#socialLinkInput:focus {
  border-color: #2f8fac;
  box-shadow: 0 0 0 3px rgba(47, 143, 172, .14);
}

.social-link-status {
  min-height: 25px;
  padding: 5px 2px 0;
  color: #536176;
  font-size: 10px !important;
}

.social-link-status.is-error {
  color: #d3263e;
}

.social-link-status.is-success {
  color: #168a55;
}

.social-link-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 15px;
  direction: ltr;
}

.social-link-dialog-actions button {
  min-width: 78px;
  height: 40px;
  margin: 0;
  padding: 7px 13px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.social-link-cancel {
  color: #ba1d2e !important;
  border: 1px solid #ee3348 !important;
  background: #fff !important;
}

.social-link-delete {
  color: #fff !important;
  border: 0 !important;
  background: #e5354b !important;
}

.social-link-save {
  margin-left: auto !important;
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(110deg, #8a3f3e, #a64b4d) !important;
}

.social-link-dialog-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

.user-social-platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: right;
  width: 21px;
  margin-top: 0px !important;
  height: 21px;
  margin: -2px 1px 0;
  padding: 0 !important;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 5px !important;
  outline: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  line-height: 19px !important;
  cursor: pointer;
  vertical-align: middle;
}

.user-social-platform-badge i {
  font-size: 13px !important;
  line-height: 18px !important;
}

.user-social-platform-badge.social-platform-youtube {
  background: #ed0c1f !important;
}

.user-social-platform-badge.social-platform-instagram {
  background: linear-gradient(135deg, #7133c8, #e4328d, #ef9a2d) !important;
}

.user-social-platform-badge.social-platform-tiktok {
  background: #111 !important;
  box-shadow: 1px 1px #20daca, -1px -1px #ed315f;
}

.social-link-viewer-dialog {
  width: 800px;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  border: 1px solid #2f3540;
  border-radius: 16px;
  background: #050608;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .65);
  animation: socialLinkPop .2s ease-out;
}

.social-link-viewer-head {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 8px 11px 8px 16px;
  color: #fff;
  background: linear-gradient(180deg, #15171a, #08090b);
  direction: ltr;
  box-sizing: border-box;
}

.social-link-viewer-head>div {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  direction: rtl;
  text-align: right;
}

.social-link-viewer-platform {
  color: #fff;
  font-size: 14px !important;
}

.social-link-viewer-owner {
  overflow: hidden;
  color: #d9dde4;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px !important;
}

.social-link-viewer-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 250px;
  background: radial-gradient(circle at center, #24262c, #050608 68%);
}

.social-link-viewer-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.social-link-viewer-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 320px;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  background: radial-gradient(circle at 50% 35%, #313643, #090b0f 62%);
}

.social-link-viewer-fallback i {
  font-size: 70px !important;
}

.social-link-viewer-fallback strong {
  font-size: 19px !important;
}

.social-link-viewer-fallback span {
  color: #b9c0cb;
  font-size: 11px !important;
}

.social-link-viewer-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 43px;
  color: #fff !important;
  background: #171a20;
  text-decoration: none !important;
  font-size: 11px !important;
}

.social-link-viewer-open:before {
  margin-left: 6px;
}

@keyframes socialLinkPop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width:520px) {
  .social-link-overlay,
  .social-link-viewer {
    padding: 5px;
  }

  .social-link-dialog,
  .social-link-viewer-dialog {
    max-width: calc(100vw - 10px);
    border-radius: 12px;
  }

  .social-link-dialog-body {
    padding-right: 11px;
    padding-left: 11px;
  }

  .social-link-platform {
    padding: 0 7px;
  }

  .social-link-platform b {
    display: none;
  }

  .social-link-dialog-actions {
    padding-right: 11px;
    padding-left: 11px;
  }

  .social-link-dialog-actions button {
    min-width: 67px;
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  .social-link-viewer-media {
    min-height: 190px;
  }

  .social-link-viewer-fallback {
    min-height: 240px;
  }
}

/* Room-only live broadcast */

body .broadcasters .room-live-button {
  position: relative !important;
  order: 3;
  display: none;
  flex: 0 0 51px;
  width: 50px !important;
  height: 50px !important;
  margin: 0 1px !important;
  padding: 0 !important;
  overflow: hidden;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .92) !important;
  background: linear-gradient(145deg, #f22b45, #aa1029) !important;
  box-shadow: none;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}

body .broadcasters .room-live-button:hover,
body .broadcasters .room-live-button:focus {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

body .broadcasters .room-live-button>i {
  position: absolute;
  right: 16px;
  bottom: 3px;
  color: #fff;
  font-size: 12px !important;
}

body .broadcasters .room-live-badge {
  position: absolute;
  top: 5px;
  right: 3px;
  left: 3px;
  color: #fff;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
  letter-spacing: -.4px;
  text-align: center;
}

body .broadcasters .room-live-button.is-live {
  background: linear-gradient(145deg, #ff1e3c, #ca0026) !important;
  animation: roomLiveButtonPulse 1.25s ease-in-out infinite;
}

body .broadcasters .room-live-button.is-mine {
  border-color: #55f3a6 !important;
  background: linear-gradient(145deg, #0da968, #08784e) !important;
}

body .broadcasters .room-live-button.is-live.has-live-pic {
  background-color: #fff !important;
  background-image: var(--room-live-pic) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body .broadcasters .room-live-button.is-live.has-live-pic .room-live-badge,
body .broadcasters .room-live-button.is-live.has-live-pic>i {
  display: none;
}

body .broadcasters .room-live-button.is-live.has-live-pic .room-live-viewer-count {
  left: 2px;
  bottom: 2px;
  min-width: 18px;
  padding: 0 3px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .74);
}

body .broadcasters .room-live-viewer-count {
  position: absolute;
  left: 4px;
  bottom: 3px;
  min-width: 17px;
  color: #fff;
  font-size: 8px !important;
  line-height: 12px !important;
  text-align: center;
}

@keyframes roomLiveButtonPulse {
  50% {
    box-shadow: 0 0 0 5px rgba(255, 38, 70, .2), 0 3px 10px rgba(0, 0, 0, .35);
  }
}

.room-live-overlay {
  position: fixed;
  z-index: 2147483600;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(5, 12, 23, .66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-sizing: border-box;
  direction: rtl;
}

.room-live-choice-card {
  position: relative;
  width: 390px;
  max-width: calc(100vw - 24px);
  padding: 24px 22px 20px;
  color: #283247;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 19px;
  background: linear-gradient(165deg, #fff, #f7f9fd);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42);
  text-align: center;
  animation: roomLiveDialogIn .22s cubic-bezier(.2, .85, .3, 1.12);
  box-sizing: border-box;
}

.room-live-choice-close {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #e93743 !important;
}

.room-live-choice-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 11px;
  color: #fff;
  border: 6px solid #eef4ff;
  border-radius: 24px;
  background: linear-gradient(145deg, #2e63ca, #7d3fd8);
  box-shadow: 0 9px 22px rgba(67, 61, 177, .22);
}

.room-live-choice-icon i {
  font-size: 30px !important;
}

.room-live-choice-card>strong {
  display: block;
  color: #283247;
  font-size: 15px !important;
}

.room-live-choice-card>small {
  display: block;
  margin: 6px 0 15px;
  color: #778196;
  font-size: 10px !important;
}

.room-live-camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  direction: rtl;
}

.room-live-camera-actions button {
  flex: 1;
  height: 48px;
  padding: 8px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  box-shadow: 0 6px 14px rgba(30, 55, 90, .18);
}

.room-live-front-camera {
  background: linear-gradient(105deg, #4a5ac7, #3146a6) !important;
}

.room-live-back-camera {
  background: linear-gradient(105deg, #12aa8d, #087e70) !important;
}

.room-live-screen-share {
  flex: 0 0 100% !important;
  width: 100%;
  background: linear-gradient(105deg, #7655dc, #4d35b7) !important;
}

.room-live-camera-actions i {
  margin-left: 5px;
}

.room-live-choice-cancel {
  min-width: 100px;
  height: 39px;
  margin-top: 14px;
  padding: 7px 14px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #e63a3a !important;
  font-size: 10px !important;
}

@keyframes roomLiveDialogIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.room-live-player {
  position: fixed;
  z-index: 2147483000;
  top: 61px;
  right: 8px;
  display: none;
  width: 356px;
  max-width: calc(100vw - 16px);
  overflow: visible;
  color: #fff;
  border: 2px solid #2ea251;
  border-radius: 5px;
  background: #0a0d12;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .47);
  direction: rtl;
  resize: none;
}

.room-live-player.is-live-compact {
  width: 280px;
}

.room-live-player.is-live-large {
  width: min(720px, calc(100vw - 16px));
}

.room-live-player.is-live-fullscreen,
.room-live-player:fullscreen,
.room-live-player:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000;
  display: flex !important;
  flex-direction: column;
}

.room-live-player.is-live-fullscreen .room-live-video-wrap,
.room-live-player:fullscreen .room-live-video-wrap,
.room-live-player:-webkit-full-screen .room-live-video-wrap {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

.room-live-player-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 4px 5px;
  color: #fff;
  background: linear-gradient(100deg, #171d28, #252c39);
  box-sizing: border-box;
}

.room-live-player-head>div {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  text-align: right;
}

.room-live-player-topic {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px !important;
}

.room-live-player-head small {
  color: #bec8d8;
  font-size: 8px !important;
}

.room-live-player-head button {
  display: grid !important;
  place-items: center;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  margin: 0;
  padding: 0 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .09) !important;
}

.room-live-player-label {
  padding: 2px 5px;
  color: #fff;
  border-radius: 4px;
  background: #ef1837;
  font-family: Arial, sans-serif !important;
  font-size: 8px !important;
  line-height: 15px !important;
}

.room-live-player-hide {
  background: #d91d36 !important;
}

.room-live-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #07090c;
}

.room-live-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050608;
}

.room-live-player.is-closing {
  visibility: hidden !important;
  pointer-events: none !important;
}

.room-live-size-toolbar {
  position: absolute;
  z-index: 6;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  direction: ltr;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  background: rgba(8, 13, 22, .72);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .32);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.room-live-size-toolbar button {
  display: grid !important;
  place-items: center;
  width: 29px;
  height: 29px;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  cursor: pointer;
}

.room-live-size-toolbar button:hover,
.room-live-size-toolbar button:focus {
  background: #386bd1 !important;
  outline: 0;
}

.room-live-player.is-enhanced video {
  filter: contrast(1.08) saturate(1.12) brightness(1.05);
}

.room-live-player.is-contain video {
  object-fit: contain;
}

.room-live-player.is-screen-share video {
  object-fit: contain;
}

.room-live-video-wait {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: #dbe4ef;
  background: radial-gradient(circle, #252d3a, #080b10 72%);
}

.room-live-video-wait i {
  font-size: 25px !important;
}

.room-live-video-wait span {
  font-size: 9px !important;
}

.room-live-unmute {
  position: absolute;
  right: 50%;
  bottom: 9px;
  transform: translateX(50%);
  display: none;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 4px 11px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 17px !important;
  background: rgba(5, 8, 13, .75) !important;
  font-size: 9px !important;
}

.room-live-unmute i,
.room-live-unmute span {
  font-size: 9px !important;
}

.room-live-controls {
  position: absolute;
  z-index: 10;
  top: 46px;
  right: 5px;
  width: 205px;
  padding: 7px;
  max-height: calc(100vh - 70px);
  max-height: calc(100dvh - 70px);
  overflow-x: hidden;
  overflow-y: auto;
  color: #263249;
  border: 1px solid #bcc9da;
  border-radius: 11px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
  box-sizing: border-box;
}

.room-live-controls button {
  display: flex !important;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 34px;
  margin: 2px 0;
  padding: 4px 8px !important;
  color: #263249 !important;
  border: 1px solid #e0e5ed !important;
  border-radius: 7px !important;
  background: #f6f8fc !important;
  text-align: right;
}

.room-live-controls button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.room-live-controls button i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  border-radius: 50%;
  background: #3c70b4;
  font-size: 10px !important;
}

.room-live-controls button span {
  flex: 1;
  font-size: 9px !important;
}

.room-live-controls button.live-danger {
  color: #b21e32 !important;
  background: #fff1f3 !important;
  border-color: #f0c4cb !important;
}

.room-live-controls button.live-danger i {
  background: #d82d43;
}

.room-live-controls label {
  display: block;
  margin: 5px 2px 1px;
  color: #58657a;
  font-size: 8px !important;
}

.room-live-controls input[type=range] {
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: #3d69d4;
}

@media (max-width:520px) {
  body .broadcasters .room-live-button {
    flex-basis: 43px;
    width: 43px !important;
    height: 40px !important;
    margin: 0 1px !important;
  }

  .room-live-player {
    top: 57px;
    right: 4px;
    max-width: calc(100vw - 8px);
    width: 330px;
  }

  .room-live-player.is-live-compact {
    width: 245px;
  }

  .room-live-player.is-live-large {
    top: 4px;
    right: 4px;
    width: calc(100vw - 8px);
  }

  .room-live-camera-actions {
    flex-direction: column;
  }

  .room-live-camera-actions button {
    flex: none;
    width: 100%;
  }

  .room-live-size-toolbar {
    top: 5px;
    left: 5px;
    gap: 2px;
    padding: 3px;
  }

  .room-live-size-toolbar button {
    width: 27px;
    height: 27px;
  }
}

body>.callnot {
  position: fixed !important;
  z-index: 2147483500 !important;
  top: 50% !important;
  left: 50% !important;
  width: min(380px, calc(100vw - 24px)) !important;
  margin: 0 !important;
  padding: 0 12px 12px !important;
  transform: translate(-50%, -50%);
  overflow: hidden;
  color: #1d2939;
  border: 1px solid rgba(55, 78, 128, .4) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 24px 70px rgba(2, 8, 23, .46) !important;
  box-sizing: border-box;
  direction: rtl;
  text-align: center;
}

body>.callnot.is-minimized {
  display: none !important;
}

body>.callnot .private-call-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 53px;
  margin: 0 -12px 11px;
  padding: 7px 9px;
  color: #fff;
  background: linear-gradient(120deg, #193769, #315d9f 58%, #5f4bc2);
}

body>.callnot .private-call-head-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 11px;
  background: rgba(255, 255, 255, .15);
  font-size: 15px !important;
}

body>.callnot .private-call-head>div {
  flex: 1;
  min-width: 0;
  text-align: right;
}

body>.callnot .private-call-head strong,
body>.callnot .private-call-head small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body>.callnot .private-call-head strong {
  font-size: 13px !important;
}

body>.callnot .private-call-head small {
  margin-top: 2px;
  color: #dce8ff;
  font-size: 9px !important;
}

body>.callnot .private-call-minimize {
  display: grid !important;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 10px !important;
  background: rgba(5, 14, 34, .25) !important;
}

body>.callnot .private-call-peer {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 78px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  background: linear-gradient(120deg, #f9fbff, #edf4fc);
  box-shadow: inset 0 1px 0 #fff;
  box-sizing: border-box;
}

body>.callnot .private-call-peer-pic {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #eef2f7;
  box-shadow: 0 3px 12px rgba(20, 50, 90, .24);
}

body>.callnot .private-call-peer-copy {
  flex: 1;
  min-width: 0;
  text-align: right;
}

body>.callnot .private-call-peer-topic,
body>.callnot .private-call-peer-direction {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body>.callnot .private-call-peer-topic {
  color: #172b4d;
  font-size: 14px !important;
  font-weight: 900;
}

body>.callnot .private-call-peer-direction {
  margin-top: 5px;
  color: #66758d;
  font-size: 10px !important;
}

body>.callnot .private-call-wave {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #315d9f;
  background: #dfeaff;
}

body>.callnot .private-call-wave i {
  display: block;
  width: 3px;
  height: 10px;
  border-radius: 5px;
  background: currentColor;
  animation: privateCallWave 1s ease-in-out infinite;
}

body>.callnot .private-call-wave i:nth-child(2) {
  animation-delay: .12s;
}

body>.callnot .private-call-wave i:nth-child(3) {
  animation-delay: .24s;
}

body>.callnot .private-call-wave i:nth-child(4) {
  animation-delay: .36s;
}

@keyframes privateCallWave {
  0%, 100% {
    height: 8px;
    opacity: .55;
  }

  50% {
    height: 25px;
    opacity: 1;
  }
}

body>.callnot #audiocall {
  margin: 8px 0 6px;
}

body>.callnot .callstat {
  width: 100%;
  margin: 0;
  min-height: 32px;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  border: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-sizing: border-box;
}

body>.callnot .private-call-audio-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 9px;
  color: #7a5b06;
  border: 1px solid #f3d27a;
  border-radius: 10px;
  background: #fff9e8;
  box-sizing: border-box;
  font-size: 10px !important;
  font-weight: 700;
}

body>.callnot .private-call-audio-state.is-active {
  color: #087443;
  border-color: #a6dfc3;
  background: #eafaf2;
}

body>.callnot .private-call-audio-state.is-muted {
  color: #9a4e00;
  border-color: #f5c48f;
  background: #fff3e6;
}

body>.callnot .private-call-audio-state.is-error {
  color: #a91f31;
  border-color: #efb2bb;
  background: #fff0f2;
}

body>.callnot .private-call-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

body>.callnot .private-call-actions>.btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  margin: 0 !important;
  padding: 7px 8px !important;
  border-radius: 11px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-sizing: border-box;
}

body>.callnot:not(.is-incoming) .private-call-actions>.calldeny {
  grid-column: 1 / -1;
}

body>.callnot .private-call-actions>.btn>i {
  font-size: 14px !important;
}

body>.callnot .private-call-actions>.meutee,
body>.callnot .private-call-actions>.vulomeup {
  color: #304766 !important;
  border: 1px solid #d5dfeb !important;
  background: #f2f6fb !important;
}

body>.callnot .private-call-actions>.is-muted {
  color: #a32135 !important;
  border-color: #efb2bb !important;
  background: #fff0f2 !important;
}

body>.callnot .private-call-actions>.btn:disabled {
  cursor: wait;
  opacity: .58;
}

body>.callnot .private-call-volume {
  width: 100%;
  margin-top: 9px;
  padding: 8px 10px 9px;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  background: #f7f9fc;
  box-sizing: border-box;
}

body>.callnot .private-call-volume label {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-bottom: 6px;
  color: #304766;
  font-size: 10px !important;
  font-weight: 800;
}

body>.callnot .private-call-volume label>i {
  color: #315d9f;
  font-size: 14px !important;
}

body>.callnot .private-call-volume label>span {
  flex: 1;
  text-align: right;
}

body>.callnot .private-call-volume output {
  min-width: 42px;
  padding: 2px 6px;
  color: #fff;
  border-radius: 10px;
  background: #315d9f;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 9px !important;
}

body>.callnot .private-call-volume input[type="range"] {
  display: block;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: #315d9f;
}

@media (max-width: 430px) {
  body>.callnot {
    width: calc(100vw - 16px) !important;
    max-width: 380px !important;
    padding: 0 9px 10px !important;
  }

  body>.callnot .private-call-head {
    margin-right: -9px;
    margin-left: -9px;
  }

  body>.callnot .private-call-peer-pic {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  body>.callnot .private-call-actions>.btn {
    min-height: 40px;
    font-size: 10px !important;
  }
}

.private-call-dock {
  position: relative;
  order: 5 !important;
  display: grid !important;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  margin: 0 1px !important;
  padding: 0 !important;
  color: #fff !important;
  border: 1px solid #103c2c !important;
  border-radius: 3px !important;
  background: linear-gradient(145deg, #19b96f, #087b55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
  animation: privateCallDockPulse 1.3s ease-in-out infinite;
}

.private-call-dock>i {
  font-size: 20px !important;
}

.private-call-dock>span {
  display: none;
}

.private-call-dock>b {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 8px !important;
}

body>.callnot.is-video-call {
  width: min(520px, calc(100vw - 16px)) !important;
}

body>.callnot .private-call-head,
.room-live-player .room-live-player-head,
#groupChatPanel .group-chat-head {
  cursor: move;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

body>.callnot.is-window-moving .private-call-head,
.room-live-player.is-window-moving .room-live-player-head,
#groupChatPanel.is-window-moving .group-chat-head {
  cursor: grabbing;
}

body>.callnot .private-call-video-stage {
  position: relative;
  width: 100%;
  margin-top: 8px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #bdcbe0;
  border-radius: 13px;
  background: #06090f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

body>.callnot .private-call-remote-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #06090f;
}

body>.callnot .private-call-local-video {
  position: absolute;
  z-index: 3;
  left: 8px;
  bottom: 8px;
  width: 28%;
  max-width: 125px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 11px;
  background: #162033;
  box-shadow: 0 5px 18px rgba(0,0,0,.45);
  transform: scaleX(-1);
}

body>.callnot .private-call-video-wait {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #dce8f7;
  background: radial-gradient(circle, #24324a, #070b12 74%);
  font-size: 10px !important;
}

body>.callnot .private-call-actions>.private-call-camera {
  color: #304766 !important;
  border: 1px solid #d5dfeb !important;
  background: #f2f6fb !important;
}

body>.callnot .private-call-actions>.private-call-camera.is-muted {
  color: #a32135 !important;
  border-color: #efb2bb !important;
  background: #fff0f2 !important;
}

#groupChatPanel .group-chat-video-head {
  position: relative;
  width: 35px !important;
  height: 35px !important;
  padding: 5px !important;
  border: 1px solid #162756 !important;
  color: #fff !important;
  background: #2876a9 !important;
}

#groupChatPanel .group-chat-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 28px;
  margin: 1px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12);
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
}

#groupChatPanel.is-window-moving .group-chat-drag-handle {
  cursor: grabbing;
}

#groupChatPanel .group-chat-video-head.is-active,
#groupChatPanel .group-chat-video-call.is-active {
  background: #20ad54 !important;
}

#groupChatPanel .group-chat-compose .group-chat-video-call {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  padding: 5px !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: #2876a9 !important;
  box-shadow: none !important;
}

#groupChatPanel .group-chat-video-card.is-local video {
  transform: scaleX(-1);
}

#groupChatPanel .group-chat-voice-camera {
  background: #2876a9 !important;
}

#groupChatPanel .group-chat-voice-camera.is-muted {
  background: #e49b14 !important;
}

@media (max-width: 520px) {
  body>.callnot.is-video-call {
    width: calc(100vw - 10px) !important;
    max-height: calc(100dvh - 10px);
    overflow-y: auto;
  }

  #groupChatPanel .group-chat-compose > button,
  #groupChatPanel .group-chat-compose .group-chat-video-call {
    width: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
  }

  #groupChatPanel .group-chat-compose {
    gap: 2px !important;
    padding-right: 3px !important;
    padding-left: 3px !important;
  }

  #groupChatPanel .group-chat-video-grid {
    max-height: 190px;
  }

  .removechat .footer .call,
  .removechat .footer .video-call,
  .removechat .footer .microphone,
  .removechat .footer .sndfile,
  .removechat .footer .sndpm {
    width: 31px !important;
    min-width: 31px !important;
    padding-right: 3px !important;
    padding-left: 3px !important;
  }
}

@keyframes privateCallDockPulse {
  50% {
    filter: brightness(1.18);
    box-shadow: 0 0 0 4px rgba(25, 185, 111, .2) !important;
  }
}

body .broadcasters>div {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  direction: ltr !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 52px !important;
  margin: 0 !important;
  overflow: visible !important;
}

body .broadcasters>div>#muteall.mic-listen-toggle {
  order: 1 !important;
  border-radius: 2px !important;
}

body .broadcasters>div>.prod {
  order: 2 !important;
  aspect-ratio: 1 / 1;
  border-radius: 2px !important;
}

body .broadcasters>div>.prod>.evant,
body .broadcasters>div>.prod .mic-slot-lock {
  border-radius: 2px !important;
}

/* Room music: isolated from microphone, live-stream and profile-song players. */

.room-music-panel {
  position: fixed;
  z-index: 999998;
  top: 61px;
  left: 5px;
  width: 330px;
  max-width: calc(100vw - 10px);
  padding: 8px 9px 7px;
  direction: rtl;
  color: #fff;
  border: 1px solid rgba(80, 21, 26, .9);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(150deg, #7d3438, #963f42);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
  box-sizing: border-box;
}

.room-music-topline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.room-music-topline button,
.room-music-actions button {
  min-width: 0;
  padding: 6px 9px;
  color: #fff;
  border: 0;
  border-radius: 8px;
  outline: 0;
  font-size: 9px !important;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
}

.room-music-topline button:disabled,
.room-music-actions button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.room-music-choose {
  background: #2868d2;
}

.room-music-hide {
  color: #3b3b3b !important;
  background: #fff;
}

.room-music-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  font-size: 11px !important;
}

.room-music-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
}

.room-music-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  padding-right: 5px;
  padding-left: 5px;
}

.room-music-actions button i,
.room-music-actions button span {
  font-size: 8px !important;
}

.room-music-play {
  background: #1ca45a;
}

.room-music-pause {
  background: #ee9c0b;
}

.room-music-local-mute {
  background: #ef4751;
}

.room-music-local-mute.is-muted {
  background: #238f62;
}

.room-music-remove {
  background: #68717b;
}

.room-music-progress-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  direction: ltr;
}

.room-music-progress-row span {
  flex: 0 0 32px;
  color: #f6e5e6;
  text-align: center;
  font-size: 8px !important;
}

.room-music-seek {
  flex: 1;
  min-width: 0;
  height: 5px;
  margin: 0;
  accent-color: #7458ff;
  cursor: pointer;
}

.room-music-volume-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 5px 7px;
  direction: ltr;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(47, 16, 19, .2);
}

.room-music-volume-row>i {
  width: 14px;
  color: #fff;
  text-align: center;
  font-size: 12px !important;
}

.room-music-volume {
  flex: 1;
  min-width: 0;
  height: 5px;
  margin: 0;
  accent-color: #58d48d;
  cursor: pointer;
}

.room-music-volume:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.room-music-volume-value {
  flex: 0 0 34px;
  color: #eafff1;
  text-align: center;
  font-size: 8px !important;
}

.room-music-status {
  min-height: 14px;
  padding-top: 4px;
  color: #f3e7e8;
  text-align: center;
  font-size: 8px !important;
  line-height: 12px;
}

.room-music-status.is-success {
  color: #b9ffd8;
}

.room-music-status.is-error {
  color: #ffe09a;
}

.room-music-status.is-loading {
  color: #cfe3ff;
}

.room-music-unlock-notice {
  position: fixed;
  z-index: 999997;
  top: 64px;
  right: 8px;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 16px);
  padding: 9px 13px;
  direction: rtl;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 18px;
  outline: 0;
  background: linear-gradient(135deg, #1769c7, #7d3bd5);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
  cursor: pointer;
  animation: roomMusicUnlockPulse 1.25s ease-in-out infinite;
}

.room-music-unlock-notice i,
.room-music-unlock-notice span {
  font-size: 10px !important;
  font-weight: 700;
}

@keyframes roomMusicUnlockPulse {
  50% {
    transform: translateY(1px);
    box-shadow: 0 6px 21px rgba(70, 71, 224, .5);
  }
}

body .broadcasters .prod #showpf .roommusic {
  margin-top: 2px;
  margin-bottom: 2px;
  color: #fff !important;
  background: linear-gradient(135deg, #a140d2, #d447b8) !important;
}

@media (max-width: 520px) {
  .room-music-panel {
    top: 51px;
    left: 3px;
    width: min(330px, calc(100vw - 6px));
    padding: 7px;
  }

  .room-music-unlock-notice {
    top: 53px;
    right: 4px;
  }

  .room-music-topline button,
  .room-music-actions button {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

body .broadcasters>div>.room-live-button {
  order: 3 !important;
  border-radius: 2px !important;
}

body .broadcasters>div>.mic-room-tools {
  order: 4 !important;
}

button.label.tc.border.btn.bb4.label-primary.th-settings-more-btn {
  margin: 4px;
  width: 98%;
  background: linear-gradient(90deg, #1B84F2, #00C9A7, #FF6FD8, #6C63FF);
  background-size: 300% 300%;
  animation: gradientMove 6s ease infinite;
  color: #ffffff;
  padding: 6px !important;
  border: 0 !important;
  margin-bottom: 1px !important;
}

#dpnl.profileDesignPanelOpen {
  width: 340px !important;
  max-width: calc(100vw - 2px) !important;
}

#profileDesignPanel.profileDesignIOS {
  height: 100% !important;
  width: 100% !important;
  padding: 7px 8px 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  color: #4b2438 !important;
  border: 0 !important;
  background: linear-gradient(180deg, #fffafd 0%, #fff5fa 48%, #fff 100%) !important;
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
  -webkit-overflow-scrolling: touch;
  display: none;
  min-width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

#profileDesignPanel.profileDesignIOS.active {
  display: block !important;
}

#profileDesignPanel .profileDesignToolbar {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-height: 37px !important;
  padding: 1px 3px 5px !important;
  direction: rtl !important;
  box-sizing: border-box !important;
}

#profileDesignPanel .profileDesignBack {
  display: inline-block !important;
  float: none !important;
  min-width: 56px !important;
  width: auto !important;
  height: 31px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  color: #1683e5 !important;
  border: 1px solid #dfe6ef !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(36, 63, 90, .08) !important;
  font-size: 11px !important;
}

#profileDesignPanel .listHome {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  height: auto !important;
  overflow: visible !important;
}

#profileDesignPanel .profileDesignSection {
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 3px 0 14px !important;
  padding: 0 5px !important;
  box-sizing: border-box !important;
}

#profileDesignPanel .profileDesignSection h3 {
  display: block !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 0 8px !important;
  padding: 9px 8px !important;
  color: #b41457 !important;
  border: 1px solid #f5dce7 !important;
  border-radius: 14px !important;
  background: rgba(255, 250, 253, .94) !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-sizing: border-box !important;
}

#profileDesignPanel .profileDesignGrid {
  display: grid !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 3px !important;
  direction: rtl !important;
  box-sizing: border-box !important;
}

#profileDesignPanel #atar.profileDesignFramesGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#profileDesignPanel #back.profileDesignBackgroundGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 9px !important;
}

#profileDesignPanel .profileDesignTile {
  position: relative !important;
  display: flex !important;
  float: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid #f2d8e4 !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-sizing: border-box !important;
}

#profileDesignPanel #atar.profileDesignFramesGrid>.profileDesignTile {
  aspect-ratio: 1/1 !important;
}

#profileDesignPanel .profileDesignFrameTile img {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
}

#profileDesignPanel #back.profileDesignBackgroundGrid>.profileDesignTile {
  min-height: 59px !important;
  aspect-ratio: 2.16/1 !important;
}

#profileDesignPanel .profileDesignBackgroundPreview {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

#profileDesignPanel .profileDesignUploadTile {
  flex-direction: column !important;
  gap: 2px !important;
  background: linear-gradient(145deg, #fff, #fff9fc) !important;
}

#profileDesignPanel .profileDesignUploadArt {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 48px !important;
  color: #55616d !important;
  border: 4px solid #606b75 !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
}

#profileDesignPanel .profileDesignUploadArt>b {
  position: absolute !important;
  top: -10px !important;
  right: -11px !important;
  width: 27px !important;
  height: 27px !important;
  color: #fff !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: #25cdaa !important;
  line-height: 21px !important;
  text-align: center !important;
}

#profileDesignPanel .profileDesignBackgroundUpload {
  grid-column: 1/-1 !important;
  flex-direction: row !important;
  min-height: 72px !important;
  aspect-ratio: auto !important;
  gap: 13px !important;
}

#profileDesignPanel .profileDesignResetTile:before {
  content: '' !important;
  position: absolute !important;
  width: 55px !important;
  height: 55px !important;
  border: 2px dotted #333 !important;
  border-radius: 50% !important;
}

#profileDesignPanel .profileDesignResetTile>span {
  position: relative !important;
  z-index: 1 !important;
  color: #333 !important;
  font-size: 25px !important;
}

#profileDesignPanel .profileDesignDelete {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  z-index: 5 !important;
  width: 25px !important;
  height: 25px !important;
  padding: 0 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #d83b58 !important;
  line-height: 21px !important;
}

.desginliste img:hover,
.desginlist img:hover {
  border: 2px solid #00BCD4 !important;
}

#users .fitimg.fl.imgbaqer {
  position: relative !important;
}

.desginlist img {
  border: 2px solid #000;
  width: 100px;
  height: 100px;
  margin-left: 5px;
}

.desginliste img {
  border: 2px solid #000;
  width: 100%;
  height: 79px;
  margin-left: 5px;
}

.desginlist {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  margin: auto;
  margin-top: -14px;
  margin-bottom: 0px !IMPORTANT;
}

#emojiHtmlPicker {
  display: none;
  position: fixed;
  width: 274px;
  max-width: calc(100vw - 6px);
  height: 250px;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
  box-shadow: 0 2px 6px #777;
  z-index: 2147483647;
  direction: rtl;
}

.emoji-html-tabs {
  display: flex;
  width: 100%;
  height: 39px;
  gap: 4px;
  padding: 4px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  box-sizing: border-box;
}

.emoji-html-tab {
  display: block;
  flex: 1;
  height: 30px;
  padding: 3px !important;
  border: 1px solid #bbb;
  border-radius: 3px !important;
  background: #f8f8f8;
  color: #222;
  text-align: center;
}

.emoji-html-tab.active {
  color: #1769d2;
  border-color: #78aef5;
  background: #eaf3ff;
}

.emoji-html-pane {
  display: none;
  height: 210px;
  overflow-y: auto;
  padding: 4px;
  box-sizing: border-box;
}

.emoji-html-pane.active {
  display: block;
}

#emojiHtmlSmiles {
  direction: ltr;
  text-align: left;
}

.emoji-html-stickers {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  direction: rtl;
}

.emoji-html-stickers:not(.active) {
  display: none !important;
}

.emoji-picker-sticker {
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin: auto;
  padding: 3px;
  border: 1px solid #eee;
  background: #fff;
}

.emoji-picker-empty {
  display: block;
  grid-column: 1/-1;
  text-align: center;
  color: #777;
  padding: 25px 5px;
}

img.sticker {
  display: inline-block;
  max-width: 180px;
  max-height: 140px;
  object-fit: contain;
  vertical-align: middle;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #050505;
  border: 71px none #fff;
  border-radius: 31px;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) !important;
}

::-webkit-scrollbar-track {
  background: #f8f9fa;
  border: 65px none #fff;
  border-radius: 34px;
}

.desginliste {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  margin: -2px -36px;
  padding: 2px 0px 0 32px;
  width: 112%;
  height: 90px;
}

@keyframes show_message_box {
  0% {
    transform: translateX(-100%);
  }

  40% {
    transform: translateX(10%);
  }

  80%, to {
    transform: translateX(0.8333333333rem);
  }
}

@keyframes hide_message_box {
  0% {
    transform: translateX(0.8333333333rem);
  }

  40% {
    transform: translateX(10%);
  }

  80%, to {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
  }
}

.message-box {
  animation: show_message_box 2s ease forwards;
  left: .8333333333rem;
  position: absolute;
  top: .8333333333rem;
  z-index: 10000000;
}

.message-box .box.green {
  border-color: #2ecc71;
}

.message-box .box {
  height: 33px;
  align-items: center;
  background: #fff;
  border-left: 5px solid #2ecc71;
  border-radius: .4166666667rem;
  box-shadow: .0416666667rem .2916666667rem .5833333333rem -.2083333333rem rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: space-between;
  padding: .4rem .6rem .4rem .4rem;
  width: auto;
}

.message-box .box .content,
.message-box .content .icon {
  align-items: center;
  display: flex;
}

.message-box .box.green .content .icon {
  background: #2ecc71;
}

.message-box .content .icon {
  padding: 12px !important;
  background: #2ecc71;
  border-radius: 50%;
  color: #fff;
  font-size: 1.0416666667rem;
  height: 1rem;
  justify-content: center;
  line-height: 1rem;
  text-align: center;
  width: 1rem;
}

.message-box .content .icon .fa {
  font-size: .6rem;
  margin-top: .1rem;
}

.message-box .content .details {
  direction: rtl;
  margin-left: .3rem;
  margin-top: 13px;
}

.message-box.hiden {
  animation: hide_message_box 2s ease forwards;
}

.box.orange .icon {
  background: #df7a22;
}

.box.red {
  border-color: #d44646;
}

.box.red .icon {
  background: #d44646;
  color: #fff;
}

.box.red .icon:before {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  left: 23px;
  width: 2px;
  height: 23px;
  background: #c70e0e;
  transform: rotate(45deg);
}

.box.orange {
  border-color: #df7a22;
}

.emoi {
  max-width: 240px;
  max-height: 20px;
  width: 20px;
  height: 20px;
  margin: 3px;
  box-shadow: 2px 1px 3px #8c8c8c;
  cursor: pointer;
}

img.smile {
  max-width: 240px;
  max-height: 20px;
}

.str {
  display: inline-block;
}

.fa-volume-off:before {
  content: "\f026";
}

.story {
  background-color: #264969;
  color: #fff;
  margin: 4px;
  padding: 8px;
  width: 45%;
  border: 1px solid #000 !important;
  text-align: center;
}

img {
  vertical-align: middle;
  border-style: none;
  user-select: none !important;
  -webkit-user-drag: none;
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-history:before {
  content: "\f1da";
}

a {
  color: #007bff;
  text-decoration: none !important;
  background-color: transparent;
}

.fa::before {
  font-size: 92%;
}

.u-msg {
  line-height: 1.5 !important;
}

.ae {
  border: 1px solid #000 !important;
  border-radius: 2px !important;
  float: left;
  text-align: center;
  width: 20%;
  max-width: 80px;
  padding: 4px 0;
  margin: 1px;
  margin-bottom: 2px;
}

.label,
.btn {
  border-radius: 1px !important;
}

button.btn {
  padding: 5px !important;
}

.bgf {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.is_speaking {
  -webkit-animation: ripple .7s linear infinite;
  animation: ripple .7s linear infinite;
}

@-webkit-keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 transparent, 0 0 0 1px rgba(0, 200, 45, 0.3), 0 0 0 2px rgba(0, 200, 45, 0.3), 0 0 0 3px rgba(0, 200, 45, 0.3);
  }

  to {
    box-shadow: 0 0 0 1px rgba(0, 200, 45, 0.3), 0 0 0 4px rgba(0, 200, 45, 0.3), 0 0 0 5px rgba(0, 200, 45, 0.3), 0 0 0 6px transparent;
  }
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 transparent, 0 0 0 1px rgba(0, 200, 45, 0.3), 0 0 0 2px rgba(0, 200, 45, 0.3), 0 0 0 3px rgba(0, 200, 45, 0.3);
  }

  to {
    box-shadow: 0 0 0 1px rgba(0, 200, 45, 0.3), 0 0 0 4px rgba(0, 200, 45, 0.3), 0 0 0 5px rgba(0, 200, 45, 0.3), 0 0 0 6px transparent;
  }
}

.msg {
  background-color: #f0f0f5;
  border: 1px solid grey;
  margin-top: -1px;
  padding: 2px;
  margin-right: 3px;
  margin-left: 3px;
}

.bord {
  border-inline: 4px solid #1e90ff !important;
}

.nobreak {
  display: inline;
  white-space: nowrap;
  word-wrap: nowrap;
  word-break: keep-all;
}

.emoii {
  width: 22px;
  max-width: 22px;
  height: 22px;
  margin: 0;
  padding: 5px;
}

.hid {
  display: none;
}

.noflow {
  overflow: hidden;
}

div {
  line-height: 20px;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5.0E+19;
  display: block;
  max-width: 276px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: pre-wrap;
  line-break: auto;
  font-size: .875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: .3rem;
  height: 250px;
  overflow-y: auto;
}

.item3 {
  font-size: 16px !important;
  color: #000;
}

.item5 {
  color: gray;
}

.grid-container {
  background: #f0f8ff;
  text-align: right;
  margin-left: 50px;
  padding: 8px;
  border-left: 6px solid #6495ed;
}

.loginItms {
  position: absolute;
  display: none;
  border: 2px solid #af020b;
  background-color: #f93634;
  border-radius: 25px 0 0 25px;
  background-image: url(imgs/banner.png);
  background-repeat: no-repeat;
  background-size: contain;
  right: 0;
  top: 30px;
  width: 250px;
}

.loginImg {
  float: right;
  width: 36px;
  height: 36px;
  border: 1px solid #ed5555;
  margin: 1px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.loginLogo {
  float: right;
  margin: 1px;
  margin-top: -20px;
}

.loginIco {
  float: right;
  margin: 0 1px 1px;
  max-height: 18px;
  background-color: #fff;
  padding: 1px;
  border-radius: 2px;
}

.loginFlog {
  float: left;
  margin: 2px 0 5px 5px;
  max-height: 15px;
}

.loginUserName {
  font-size: 15px !important;
  float: right;
  font-family: arial;
  font-weight: 9000;
  max-width: 170px;
  min-width: 100px;
  text-align: right;
  text-shadow: -1px 1px 2px #fff;
  color: #842c2a;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.d2 {
  padding-bottom: 2px;
}

.gifts_picker__contianer {
  border: 1px solid;
  width: 100%;
  display: inline-block;
  height: 90px;
  overflow: auto;
}

.fitimg {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.nosel,
.u-ico,
.u-pic,
.tago {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.ui-dialog-contain {
  width: 92.5%;
  max-width: 500px;
  margin: 0 auto 15px;
  padding: 0;
  position: relative;
  top: 2px;
}

.center {
  margin: 0 auto;
}

.dots {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  max-width: 100%;
}

img.private_message__check {
  display: block;
  width: 15px;
  position: relative;
  left: 60px;
  top: 35px;
  margin: -10px;
}

div#d2 img.private_message__check {
  display: none;
}

div#d2bc img.private_message__check {
  display: none;
}

p#isfil {
  text-align: center;
  margin: -15px auto;
  width: 50%;
  border: 1px solid #000;
  border-radius: 5px;
  line-height: 1.6;
  display: block;
}

* {
  font-family: serif;
  font-weight: 700;
  text-shadow: none !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

div#blockuser .hand.nosel {
  width: 305px !important;
  padding: 20px 0 0;
  height: 125px;
  background-color: #fff !important;
  text-align: center !important;
  border: 3px solid;
  position: relative;
  right: 2px;
  top: 8px;
  box-shadow: inset 0 1px 20px;
  border-top: 3px solid !important;
}

div#userblock img.fl.ustat {
  display: none !important;
}

.notification .break.fl {
  padding: 0 .2em;
  min-height: 32px !important;
  height: auto;
  border: 3px solid #fefffc;
  padding: 28px;
  border-radius: 0 15px 15px 15px;
  box-shadow: 7px 7px 10px #000;
  background-color: #818181;
  background-image: linear-gradient(305deg, #818181 0%, #898989 74%) !important;
  color: #ffff;
}

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

.pophead {
  background-color: slategrey;
}

.bg-primary,
.btn-primary {
  background-color: #000;
}

.chat_pane__user_item__name,
.chat_pane__user_item__status {
  max-height: 30px;
  font-size: .55rem;
  font-weight: 700;
  padding: 0 .2em 0 2.9em;
  margin: .1rem 0 0;
}

.chat_pane__user_item {
  position: relative;
  background: #fff;
  border: 1px solid #e6e6fa;
  padding: 0 .05rem;
  cursor: pointer;
  margin: 0 .05rem -1px;
}

.chat_pane__user_item__avatar img {
  border-width: 1px !important;
  margin-right: 5px;
  width: 36px;
  height: 36px;
  margin-left: 1px;
  background-size: cover;
  border-radius: 3px !important;
  padding: 0;
  margin-top: -1px !important;
}

.chat_pane__user_item__avatar {
  float: left;
  margin: .07rem 0 0;
}

.username__icon {
  margin: 1px 2px 0 0;
}

.username__wrapper {
  margin-top: .01em;
  padding: 0 .6em;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  max-width: 99%;
  margin-left: 3px;
  direction: initial;
  font-size: .625rem;
  margin-bottom: 2px;
  border-radius: .125rem;
}

.chat_pane__user_item__status {
  font-size: .583rem;
  color: #888;
  width: 100%;
  margin-top: .15rem;
}

.chat_pane__user_item__flag {
  position: absolute;
  top: .05em;
  right: .05em;
  height: 14px;
  margin-top: 1px;
}

i#SeoHostshowmsg {
  display: block;
  margin-top: -15px;
}

.u-topic.dots {
  white-space: nowrap;
  max-width: 130%;
}

.tbox {
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid #d3d3d3;
  padding: 6px;
  max-height: 32px;
  min-height: 32px;
  height: 32px;
  font-weight: 700;
  resize: none;
}

.modal-header {
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 5px;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
  direction: rtl;
}

.badge {
  display: inline-block;
  padding: 0 3px;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.style {
  background: #5cb85c;
  color: #fff;
  border: 1px solid;
}

.message-compose-context {
  display: none !important;
  clear: both;
  width: 100%;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
}

.message-compose-context.message-compose-context-active {
  display: block !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 4px 38px 4px 8px !important;
  position: relative;
  background: #eef6ff;
  border-right: 4px solid #4b91e2 !important;
  color: #222;
}

.message-compose-context .message-context-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 100%;
  padding: 11px 8px !important;
  border: 0;
  border-radius: 0 !important;
}

.message-compose-context .message-context-title {
  display: block;
  color: #1769d2;
  font-size: 12px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-compose-context .message-context-text {
  display: block;
  color: #555;
  font-size: 12px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-controls {
  display: flex;
  gap: 2px;
  align-items: center;
  margin: 2px;
}

.message-controls .btn {
  min-width: 25px;
  height: 25px;
  padding: 4px !important;
}

.message-reply-preview {
  display: none;
  width: 100%;
  margin: 1px 0 3px;
  padding: 3px 6px;
  background: #f2f7fc;
  border-right: 4px solid #6495ed;
  overflow: hidden;
}

.message-reply-preview .reply-topic {
  display: block;
  color: #1769d2;
  font-size: 11px !important;
}

.message-reply-preview .reply-text {
  display: block;
  color: #555;
  font-size: 11px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-edited-label {
  display: none;
}

.message-edited .message-controls .message-edited-label {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 2px 5px;
  margin: 0;
  color: #111;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 2px;
  direction: rtl;
  white-space: nowrap;
  font-size: 10px !important;
  font-weight: normal !important;
}

.room-typing-indicator,
.typ {
  display: none;
  position: absolute;
  z-index: 30;
  max-width: calc(100% - 8px);
  padding: 3px 7px;
  background: #fff;
  border: 1px solid #6c9bd2;
  border-radius: 3px;
  color: #1769d2;
  direction: rtl;
  white-space: normal;
  overflow: auto;
  font-size: 11px !important;
}

.room-typing-indicator {
  right: 4px;
  bottom: 42px;
  max-height: 48px;
}

.room-media-menu {
  position: relative;
  float: left;
}

.room-media-dropdown {
  display: none;
  position: absolute;
  bottom: 40px;
  left: -77px;
  z-index: 2147483646;
  width: 164px;
  padding: 6px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #6e87a8;
  border-radius: 9px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .28);
}

.room-media-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
  gap: 5px;
}

.room-media-dropdown button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  width: 46px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 5px !important;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, .18) !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3);
  transition: transform .15s ease, filter .15s ease;
}

.room-media-dropdown button:hover,
.room-media-dropdown button:focus {
  transform: translateY(-2px);
  filter: brightness(1.08);
  outline: none;
}

.room-media-dropdown button:nth-child(1) {
  background: #258bd2;
}

.room-media-dropdown button:nth-child(2) {
  background: #e05252;
}

.room-media-dropdown button:nth-child(3) {
  background: #8154c7;
}

.room-editor {
  position: relative;
  direction: ltr;
  min-height: 350px;
}

.room-editor-fields {
  width: 200px;
}

.room-editor-fields input {
  display: block;
  width: 200px;
  height: 27px;
  margin-bottom: 1px;
  padding: 3px;
  direction: rtl;
}

.room-editor-image {
  position: absolute;
  right: 5px;
  top: 0;
  width: 80px;
  text-align: center;
}

.room-editor-image .picroom {
  display: block;
  width: 75px;
  height: 75px;
  object-fit: cover;
  background: #eee;
  border-radius: 0;
  cursor: pointer;
}

.room-editor-image button {
  width: 80px;
  height: 25px;
  padding: 2px !important;
  margin-top: 4px;
}

.room-color-options {
  width: 240px;
  margin-top: 8px;
  /*direction:rtl*/
}

.room-color-row {
  display: flex;
  align-items: center;
  margin: 3px 0;
  gap: 4px;
}

.room-color-row label {
  width: 100px;
  margin: 0;
  padding: 4px;
  background: #292d52;
  color: #fff;
  text-align: center;
}

.room-color-row .cpick {
  width: 72px;
  height: 27px;
  padding: 0 !important;
  border: 1px solid #aaa !important;
  border-radius: 5px !important;
}

.room-editor-checks {
  direction: rtl;
  margin: 7px 0;
}

.room-card-no-border .u-pic {
  border: none !important;
}

.notification-setting-disabled {
  background: #ececec !important;
  color: #777 !important;
}

.room-welcome-plus-box {
  display: flex;
  align-items: center;
  direction: rtl;
  margin: 8px auto;
  padding: 10px 14px;
  max-width: 92%;
  background: linear-gradient(135deg, #fff8e6, #f3fbff);
  border: 1px solid #d3b36b;
  border-radius: 12px;
  color: #333;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
  transition: opacity .6s ease, transform .6s ease;
  opacity: 0;
  transform: scale(.8);
}

.room-welcome-plus-box img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 15px;
  border: 2px solid #4d6782;
  object-fit: cover;
}

.room-welcome-plus-name {
  color: #4d6782;
}

.room-banner-active .userbnr {
  background-color: rgba(57, 57, 57, .37) !important;
}

#d2bc .wall-message-controls {
  float: left !important;
  direction: ltr;
  margin: 2px 0 2px 2px;
}

.mention-compose-host {
  position: relative !important;
  overflow: visible !important;
}

.mention-picker {
  display: none;
  position: absolute;
  right: 4px;
  left: 4px;
  bottom: calc(100% + 7px);
  z-index: 2147483647;
  direction: rtl;
  overflow: hidden;
  background: rgba(250, 252, 255, .98);
  border: 1px solid rgba(49, 75, 112, .55);
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(8, 25, 52, .35), 0 2px 8px rgba(8, 25, 52, .2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform-origin: bottom center;
}

.mention-picker.open {
  display: block;
  animation: mentionPickerIn .24s cubic-bezier(.2, .85, .3, 1.25);
}

@keyframes mentionPickerIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mention-picker-head {
  height: 36px;
  padding: 7px 10px;
  color: #fff;
  background: linear-gradient(120deg, #203a67, #2677a7 55%, #33a6b8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mention-picker-head span {
  font-size: 12px !important;
}

.mention-picker-head small {
  padding: 1px 7px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  background: rgba(255, 255, 255, .15);
  font-size: 9px !important;
}

.mention-picker-list {
  max-height: 238px;
  overflow-y: auto;
  padding: 5px;
}

.mention-picker-item {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin: 2px 0;
  padding: 5px 7px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: #223;
  background: transparent;
  text-align: right;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.mention-picker-item:hover,
.mention-picker-item.active {
  color: #123;
  background: linear-gradient(100deg, #e8f6ff, #f6fbff);
  border-color: #72b7df !important;
  box-shadow: 0 3px 10px rgba(42, 113, 156, .15);
  transform: translateX(-2px);
}

.mention-avatar-wrap {
  position: relative;
  flex: 0 0 39px;
  height: 39px;
  margin-left: 8px;
}

.mention-avatar {
  width: 39px;
  height: 39px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #70aaca;
}

.mention-avatar-wrap i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #32c96b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.mention-member-info {
  display: block;
  flex: 1;
  min-width: 0;
}

.mention-member-info strong,
.mention-member-info small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-member-info strong {
  color: #172f52;
  font-size: 12px !important;
}

.mention-member-info small {
  max-width: 210px;
  color: #778396;
  font-size: 9px !important;
  font-weight: normal !important;
}

.mention-at {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-right: 6px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #3f73b8, #25a4b4);
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
}

.mention-picker-empty {
  display: none;
  padding: 20px 8px;
  text-align: center;
  color: #758195;
  font-size: 11px !important;
}

.mention-picker-hint {
  padding: 4px 8px;
  text-align: center;
  color: #718096;
  background: #f3f7fb;
  border-top: 1px solid #e2e9f1;
  font-size: 9px !important;
  font-weight: normal !important;
}

/* Stories carousel and immersive viewer */

#storyes {
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.story-carousel {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  padding: 8px 7px 7px;
  overflow-x: auto;
  overflow-y: hidden;
  direction: rtl;
  background: linear-gradient(180deg, #fff, #f9fbff);
  border-bottom: 1px solid #d8e0ec;
}

.storiesWrapper {
  display: flex !important;
  align-items: flex-start;
  gap: 7px;
  direction: rtl;
  min-width: max-content;
  width: auto !important;
}

.story-card {
  position: relative;
  flex: 0 0 66px;
  width: 66px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #27364c;
  text-align: center;
  cursor: pointer;
  outline: 0;
}

.story-avatar-ring {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 3px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a00, #ff0069 42%, #b400d8 72%, #265dff);
  box-shadow: 0 4px 12px rgba(33, 52, 90, .2);
  transition: transform .18s ease, box-shadow .18s ease;
}

.story-card:hover .story-avatar-ring,
.story-card:focus .story-avatar-ring {
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 7px 17px rgba(33, 52, 90, .3);
}

.story-avatar {
  display: block;
  width: 56px;
  height: 56px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #eef1f6;
}

.story-card-name {
  display: block;
  width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #26364d;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 9px !important;
  line-height: 15px !important;
}

.story-add .story-avatar-ring {
  background: linear-gradient(145deg, #16b4c4, #296ed5);
}

.story-add-plus {
  position: absolute;
  left: 1px;
  top: 41px;
  z-index: 2;
  display: grid !important;
  place-items: center;
  width: 21px;
  height: 21px;
  color: #fff !important;
  background: #e8324f;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  font-size: 12px !important;
}

.story-add-plus:before {
  font-size: 12px !important;
}

.story-add-label {
  color: #1375a6;
}

#StoryPanel.story-viewer {
  position: fixed !important;
  display: none;
  width: 100vw !important;
  height: 100vh !important;
  inset: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: #030506 !important;
  z-index: 2147483647 !important;
  color: #fff;
  direction: rtl;
}

.story-viewer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(51, 66, 84, .28), transparent 45%), #020303;
  pointer-events: none;
}

#StoryProgress {
  width: 100% !important;
  background-color: #ddd;
  height: 4px !important;
  margin: 0 !important;
  background: transparent !important;
}

#BarStory {
  width: 0;
  height: 100% !important;
  background-color: #6495ed;
  margin-bottom: 15px;
  margin: 0 !important;
  border-radius: 999px;
  background: #fff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, .6);
}

.story-viewer-header {
  position: absolute;
  z-index: 25;
  top: 22px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 5px 7px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .12));
  direction: rtl;
}

.story-viewer-user {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: auto;
}

.story-viewer .st_pic {
  float: none !important;
  width: 43px !important;
  height: 43px !important;
  flex: 0 0 43px;
  object-fit: cover;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .45);
}

.story-user-meta {
  min-width: 0;
  margin-right: 9px;
  text-align: right;
}

.story-user-meta .st_topic {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
}

.story-user-meta .st_time {
  display: block;
  position: static !important;
  color: #cbd1d8 !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

.story-viewer-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 10px;
}

.story-tool {
  display: grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: rgba(10, 14, 19, .55) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 50% !important;
  cursor: pointer;
}

.story-tool:hover {
  background: rgba(65, 94, 130, .72) !important;
  transform: scale(1.06);
}

.story-tool:before {
  font-size: 14px !important;
}

.story-tool.supstory {
  background: rgba(202, 46, 67, .78) !important;
}

.story-stage {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 74px 62px 14px;
}

.story-media-frame {
  position: relative;
  width: min(100%, 780px);
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #070a0d;
  border-inline: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 0 50px rgba(0, 0, 0, .65);
}

.story-viewer .st_v,
.story-viewer .st_p {
  position: absolute !important;
  display: none;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  background-color: #070a0d;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  object-fit: contain;
}

.story-viewer .st_v {
  background: #000;
}

.story-nav {
  position: absolute;
  z-index: 24;
  top: 50%;
  transform: translateY(-50%);
  display: grid !important;
  place-items: center;
  width: 44px;
  height: 70px;
  padding: 0 !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .32) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 12px !important;
  cursor: pointer;
}

.story-nav-prev {
  right: 9px;
}

.story-nav-next {
  left: 9px;
}

.story-side-actions {
  position: absolute;
  z-index: 26;
  left: 14px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.story-side-button {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 42px;
  min-height: 42px;
  padding: 6px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .4) !important;
  border: 1px solid rgba(255, 255, 255, .17) !important;
  border-radius: 14px !important;
}

.story-side-button:before {
  font-size: 18px !important;
}

.story-side-button span,
.story-viewer .st_view {
  position: static !important;
  color: #fff !important;
  font-size: 9px !important;
}

.story-side-button.saved {
  color: #ffd34e !important;
}

.story-viewer .loadstory {
  z-index: 18 !important;
  color: #fff !important;
  font-size: 38px !important;
}

.story-viewer-hint {
  position: absolute;
  z-index: 20;
  right: 50%;
  bottom: 14px;
  transform: translateX(50%);
  padding: 5px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  background: rgba(0, 0, 0, .32);
  font-size: 9px !important;
  font-weight: 400 !important;
  pointer-events: none;
}

@media (max-width:600px) {
  .story-stage {
    padding: 70px 0 0;
  }

  .story-media-frame {
    width: 100%;
    border: 0;
  }

  .story-viewer-header {
    top: 18px;
    left: 6px;
    right: 6px;
  }

  .story-nav {
    width: 34px;
    height: 60px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .story-nav-prev {
    right: 0;
  }

  .story-nav-next {
    left: 0;
  }

  .story-side-actions {
    left: 7px;
    bottom: 45px;
  }

  .story-viewer-hint {
    display: none;
  }

  .story-user-meta .st_topic {
    max-width: 130px;
  }

  .story-tool {
    width: 31px;
    height: 31px;
  }
}

.story-like.active {
  color: #ff4f6d !important;
}

.story-comments-panel {
  position: absolute;
  z-index: 35;
  left: 66px;
  bottom: 18px;
  display: none;
  width: min(340px, calc(100vw - 85px));
  max-height: 54vh;
  overflow: hidden;
  color: #172033;
  background: rgba(248, 251, 255, .97);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 17px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  direction: rtl;
}

.story-comments-panel.open {
  display: flex;
  flex-direction: column;
  animation: storyCommentsIn .18s ease;
}

@keyframes storyCommentsIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.story-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 42px;
  padding: 8px 12px;
  color: #fff;
  background: linear-gradient(120deg, #273f68, #5564ad);
}

.story-comments-head span {
  font-size: 12px !important;
}

.story-comments-head button {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50% !important;
}

.story-comments-list {
  flex: 1;
  min-height: 70px;
  max-height: 290px;
  padding: 7px;
  overflow-y: auto;
}

.story-comment-item {
  display: flex;
  gap: 7px;
  margin-bottom: 6px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e2e7ef;
  border-radius: 11px;
  text-align: right;
}

.story-comment-item img {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
}

.story-comment-copy {
  min-width: 0;
  flex: 1;
}

.story-comment-copy strong,
.story-comment-copy span {
  display: block;
}

.story-comment-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #233b62;
  font-size: 10px !important;
}

.story-comment-copy span {
  color: #354054;
  font-size: 10px !important;
  font-weight: 400 !important;
  overflow-wrap: anywhere;
}

.story-comments-empty {
  padding: 25px 7px;
  text-align: center;
  color: #768399;
  font-size: 10px !important;
}

.story-comment-compose {
  display: flex;
  gap: 5px;
  flex: 0 0 47px;
  padding: 6px;
  border-top: 1px solid #dce3ed;
  background: #f7f9fc;
}

.story-comment-input {
  flex: 1;
  min-width: 0;
  height: 34px !important;
  padding: 5px 9px !important;
  color: #202a3b !important;
  background: #fff !important;
  border: 1px solid #bdcadb !important;
  border-radius: 10px !important;
  font-size: 10px !important;
}

.story-comment-compose button {
  flex: 0 0 36px;
  width: 36px;
  height: 34px;
  padding: 0 !important;
  color: #fff;
  background: #365f9c;
  border: 0;
  border-radius: 10px !important;
}

@media (max-width:600px) {
  .story-comments-panel {
    left: 4px;
    right: 4px;
    bottom: 4px;
    width: auto;
    max-height: 50vh;
  }

  .story-side-actions {
    max-height: 70vh;
    overflow-y: auto;
  }
}

.story-count-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  color: #fff;
  background: #193f76;
  border: 2px solid #fff;
  border-radius: 999px;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 8px !important;
  line-height: 15px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

.story-add.has-stories .story-avatar-ring {
  background: linear-gradient(135deg, #ff7a00, #ff0069 42%, #b400d8 72%, #265dff);
}

.story-progress-wrap {
  position: absolute;
  z-index: 30;
  top: 9px;
  left: 8px;
  right: 8px;
  height: 4px;
  overflow: visible !important;
  border-radius: 999px;
  background: transparent !important;
}

.story-progress-wrap #StoryProgress {
  display: flex !important;
  align-items: center;
  gap: 3px;
  width: 100% !important;
  height: 4px !important;
}

.story-progress-segment {
  display: block;
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
}

.story-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 0 7px rgba(255, 255, 255, .55);
}

#BarStory.story-progress-fill {
  height: 100% !important;
  margin: 0 !important;
}

#dpnl.profileVisitorsPanelOpen {
  width: 340px !important;
  max-width: calc(100vw - 2px) !important;
}

#profileVisitorsPanel.profileVisitorsIOS {
  position: relative !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 5px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(180deg, #9a35b7 0%, #d01e68 29%, #513bcc 65%, #0995a0 100%) !important;
  box-sizing: border-box !important;
  direction: ltr !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .55) transparent;
  float: none !important;
  min-width: 100% !important;
  margin: 0 !important;
}

#profileVisitorsPanel.profileVisitorsIOS.active {
  display: block !important;
}

#profileVisitorsPanel .profileVisitorsToolbar {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 4px 5px 3px !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  float: none !important;
}

#profileVisitorsPanel .profileVisitorsBack {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 55px !important;
  height: 31px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  color: #1683e5 !important;
  border: 1px solid #dfe6ef !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(36, 63, 90, .08) !important;
  font-size: 11px !important;
  float: none !important;
}

#profileVisitorsPanel h3 {
  width: 100% !important;
  margin: 0 !important;
  padding: 3px 0 7px !important;
  color: #fff !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  display: block !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

#profileVisitorsPanel .profileVisitorsTopSection,
#profileVisitorsPanel .profileVisitorsRestSection,
#profileVisitorsPanel .profileVisitorsRecentSection {
  width: 100% !important;
  box-sizing: border-box !important;
  direction: rtl !important;
  float: none !important;
  height: auto !important;
}

#profileVisitorsPanel .profileVisitorsTopSection {
  display: block !important;
}

#profileVisitorsPanel .profileVisitorsPeriods {
  display: flex !important;
  width: 100% !important;
  gap: 8px !important;
  margin-bottom: 10px;
  padding: 0 8px !important;
  direction: rtl !important;
  box-sizing: border-box !important;
  float: none !important;
  margin: 0 0 10px !important;
}

#profileVisitorsPanel .profileVisitorsPeriods button {
  flex: 1 1 0 !important;
  height: 37px !important;
  margin: 0 !important;
  padding: 5px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .27) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .13) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .11) !important;
  font-size: 12px !important;
  transition: background .18s ease, transform .18s ease;
  display: block !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: center !important;
}

#profileVisitorsPanel .profileVisitorsPeriods button.active {
  color: #5d173c !important;
  background: #ec73b0 !important;
  border-color: rgba(255, 255, 255, .45) !important;
}

#profileVisitorsPanel .profileVisitorsPodium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 143px !important;
  direction: ltr !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#profileVisitorsPanel .profileVisitorsPodiumCard {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 135px !important;
  margin: 0 !important;
  padding: 5px 3px !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
  direction: rtl !important;
  box-sizing: border-box !important;
  float: none !important;
  max-width: none !important;
}

#profileVisitorsPanel .profileVisitorsPodiumCard.rank-1 {
  height: 151px !important;
  background: rgba(255, 255, 255, .18) !important;
}

#profileVisitorsPanel .profileVisitorsPodiumCard.is-placeholder {
  visibility: hidden !important;
}

#profileVisitorsPanel .profileVisitorsRankTitle {
  display: block !important;
  width: 100% !important;
  min-height: 23px !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 11px !important;
  color: #fff !important;
}

#profileVisitorsPanel .profileVisitorsPodiumPic {
  display: block !important;
  width: 47px !important;
  height: 47px !important;
  margin: 1px auto 3px !important;
  object-fit: cover !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: #eee !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22) !important;
  float: none !important;
  min-width: 47px !important;
  max-width: 47px !important;
  min-height: 47px !important;
  max-height: 47px !important;
  padding: 0 !important;
}

#profileVisitorsPanel .rank-1 .profileVisitorsPodiumPic {
  width: 55px !important;
  height: 55px !important;
  min-width: 55px !important;
  max-width: 55px !important;
  min-height: 55px !important;
  max-height: 55px !important;
}

#profileVisitorsPanel .profileVisitorsName {
  display: block !important;
  width: 100% !important;
  min-height: 22px !important;
  overflow: hidden !important;
  color: #fff !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  font-size: 12px !important;
}

#profileVisitorsPanel .profileVisitorsCount,
#profileVisitorsPanel .profileVisitorsRowCount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 39px !important;
  height: 25px !important;
  padding: 0 8px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .12) !important;
  font-size: 11px !important;
  box-sizing: border-box !important;
  float: none !important;
  width: auto !important;
}

#profileVisitorsPanel .profileVisitorsTopEmpty {
  display: none;
  margin: 6px 8px 12px !important;
  padding: 17px 8px !important;
  color: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .1) !important;
  text-align: center !important;
  font-size: 11px !important;
}

#profileVisitorsPanel .profileVisitorsRestSection,
#profileVisitorsPanel .profileVisitorsRecentSection {
  margin-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, .13) !important;
}

#profileVisitorsPanel .profileVisitorsRestSection h3,
#profileVisitorsPanel .profileVisitorsRecentSection h3 {
  padding: 9px 0 8px !important;
}

#profileVisitorsPanel .profileVisitorsRest,
#profileVisitorsPanel .profileVisitorsRecent {
  display: flex;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#profileVisitorsPanel .profileVisitorsRow {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 29px !important;
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07) !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  float: none !important;
}

#profileVisitorsPanel .profileVisitorsRowRank {
  display: inline-flex !important;
  flex: 0 0 34px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #ae65ff, #e43cb4) !important;
  font-size: 11px !important;
  float: none !important;
  min-width: 34px !important;
  margin: 0 !important;
}

#profileVisitorsPanel .profileVisitorsRow:nth-child(3n+2) .profileVisitorsRowRank {
  background: linear-gradient(145deg, #43d6dc, #1592ce) !important;
}

#profileVisitorsPanel .profileVisitorsRowPic {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin-left: 9px;
  object-fit: cover !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #eee !important;
  display: block !important;
  float: none !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 0 0 9px !important;
  padding: 0 !important;
}

#profileVisitorsPanel .profileVisitorsRowName {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  direction: rtl !important;
  font-size: 11px !important;
  display: block !important;
  float: none !important;
}

#profileVisitorsPanel .profileVisitorsRowCount,
#profileVisitorsPanel .profileVisitorsRowTime {
  flex: 0 0 auto !important;
  margin-left: 6px !important;
}

#profileVisitorsPanel .profileVisitorsRowTime {
  min-width: 53px !important;
  color: #fff !important;
  opacity: .9 !important;
  text-align: center !important;
  font-size: 9px !important;
}

#profileVisitorsPanel .profileVisitorsRecentRow {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 70px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  overflow: hidden !important;
  color: #4b185f !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 35px !important;
  background: linear-gradient(100deg, #fff 0%, #fff7ff 100%) !important;
  box-shadow: 0 3px 10px rgba(63, 24, 102, .12) !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  float: none !important;
}

#profileVisitorsPanel .profileVisitorsRecentPic {
  flex: 0 0 47px !important;
  width: 47px !important;
  height: 47px !important;
  margin-right: 10px;
  object-fit: cover !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #eee !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2) !important;
  display: block !important;
  float: none !important;
  min-width: 47px !important;
  max-width: 47px !important;
  min-height: 47px !important;
  max-height: 47px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
}

#profileVisitorsPanel .profileVisitorsRecentBody {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  direction: rtl !important;
  float: none !important;
}

#profileVisitorsPanel .profileVisitorsRecentHead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 5px !important;
  float: none !important;
}

#profileVisitorsPanel .profileVisitorsRecentName {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #36143d !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  display: block !important;
}

#profileVisitorsPanel .profileVisitorsRecentTime {
  flex: 0 0 auto !important;
  color: #864eb2 !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  display: block !important;
}

#profileVisitorsPanel .profileVisitorsRecentText {
  width: 100% !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #7e3bad !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-decoration: underline !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  display: block !important;
}

#profileVisitorsPanel .profileVisitorsRecentBadge {
  display: inline-flex !important;
  flex: 0 0 45px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 45px !important;
  height: 38px !important;
  margin-left: 8px !important;
  color: #7629bf !important;
  border: 1px solid #dabdff !important;
  border-radius: 20px !important;
  background: #fff7ff !important;
  font-size: 10px !important;
  float: none !important;
}

#profileVisitorsPanel .profileVisitorsRecentSection {
  min-height: 360px !important;
}

#profileVisitorsPanel .profileVisitorsEmpty {
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 205px !important;
  margin-top: 310px;
  padding: 22px 15px !important;
  color: #7637c5 !important;
  border: 1px solid rgba(205, 157, 255, .55) !important;
  border-top: 3px solid #b888ff !important;
  border-radius: 22px !important;
  background: linear-gradient(150deg, rgba(255, 255, 255, .97), rgba(244, 239, 255, .94)) !important;
  box-shadow: 0 7px 18px rgba(29, 26, 89, .12) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  float: none !important;
  margin: 310px 0 0 !important;
}

#profileVisitorsPanel .profileVisitorsEmptyIcon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 88px !important;
  height: 88px !important;
  margin-bottom: 17px;
  color: #783bff !important;
  border: 2px solid #d7bfff !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #f7f1ff, #f3e9ff) !important;
  box-shadow: 0 0 16px rgba(139, 83, 255, .12) !important;
  float: none !important;
  margin: 0 0 17px !important;
}

#profileVisitorsPanel .profileVisitorsEmptyIcon i {
  font-size: 16px !important;
  color: #783bff !important;
}

#profileVisitorsPanel .profileVisitorsEmpty strong {
  margin-bottom: 7px !important;
  color: #7637c5 !important;
  font-size: 12px !important;
  display: block !important;
}

#profileVisitorsPanel .profileVisitorsEmpty span {
  color: #945acb !important;
  font-size: 10px !important;
  display: block !important;
}

#profileVisitorsPanel .profileVisitorsLoading {
  position: absolute !important;
  z-index: 8 !important;
  inset: 40px 0 0 !important;
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #fff !important;
  background: rgba(73, 33, 147, .38) !important;
  backdrop-filter: blur(2px);
  float: none !important;
}

#profileVisitorsPanel .profileVisitorsLoading i {
  font-size: 25px !important;
}

#profileVisitorsPanel .profileVisitorsLoading span {
  font-size: 11px !important;
  color: #fff !important;
}

#dpnl.micStarsPanelOpen {
  width: 340px !important;
  max-width: calc(100vw - 2px) !important;
}

#more .thMoreRowMicStars {
  background: linear-gradient(105deg, #8e4fbb 0%, #7743b6 58%, #6240b3 100%) !important;
}

#more .thMoreIcoMic {
  color: #6a4300 !important;
  background: #ffc653 !important;
}

#micStarsPanel.micStarsIOS {
  position: relative !important;
  display: none !important;
  float: none !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 5px 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(180deg, #128dcc 0%, #2861c5 22%, #34339b 51%, #116e87 100%) !important;
  box-sizing: border-box !important;
  direction: ltr !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .6) transparent;
}

#micStarsPanel.micStarsIOS.active {
  display: block !important;
}

#micStarsPanel .micStarsToolbar {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 4px 5px 2px !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  float: none !important;
}

#micStarsPanel .micStarsBack {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 55px !important;
  height: 31px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  color: #1683e5 !important;
  border: 1px solid #dfe6ef !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(36, 63, 90, .08) !important;
  font-size: 11px !important;
  float: none !important;
}

#micStarsPanel .micStarsTopSection,
#micStarsPanel .micStarsRestSection {
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  direction: rtl !important;
  float: none !important;
}

#micStarsPanel h3 {
  width: 100% !important;
  margin: 0 !important;
  padding: 3px 0 8px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  display: block !important;
  float: none !important;
}

#micStarsPanel .micStarsPeriods {
  display: flex !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  padding: 0 8px !important;
  direction: rtl !important;
  box-sizing: border-box !important;
  float: none !important;
}

#micStarsPanel .micStarsPeriods button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 37px !important;
  margin: 0 !important;
  padding: 5px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .13) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12) !important;
  font-size: 12px !important;
  text-align: center !important;
  transition: transform .16s ease, background .16s ease;
  display: block !important;
  float: none !important;
}

#micStarsPanel .micStarsPeriods button.active {
  color: #fff !important;
  background: #2ebde9 !important;
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow: 0 3px 10px rgba(0, 46, 112, .16), inset 0 1px rgba(255, 255, 255, .2);
}

#micStarsPanel .micStarsPodium {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 171px !important;
  margin: 0 !important;
  padding: 0 !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  float: none !important;
}

#micStarsPanel .micStarsPodiumCard {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 139px !important;
  margin: 0 !important;
  padding: 5px 3px !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .13) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1) !important;
  direction: rtl !important;
  box-sizing: border-box !important;
  float: none !important;
}

#micStarsPanel .micStarsPodiumCard.rank-1 {
  height: 171px !important;
  background: rgba(255, 255, 255, .17) !important;
}

#micStarsPanel .micStarsPodiumCard.is-placeholder {
  visibility: hidden !important;
}

#micStarsPanel .micStarsRankTitle {
  display: block !important;
  width: 100% !important;
  min-height: 24px !important;
  color: #fff !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 11px !important;
}

#micStarsPanel .micStarsPodiumPic {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  margin: 1px auto 3px !important;
  padding: 0 !important;
  object-fit: cover !important;
  border: 3px solid #d8ecff !important;
  border-radius: 50% !important;
  background: #eee !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important;
  float: none !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}

#micStarsPanel .rank-1 .micStarsPodiumPic {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
}

#micStarsPanel .micStarsName {
  display: block !important;
  width: 100% !important;
  min-height: 23px !important;
  overflow: hidden !important;
  color: #fff !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  font-size: 12px !important;
  font-style: italic !important;
}

#micStarsPanel .micStarsDuration,
#micStarsPanel .micStarsRowDuration {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 39px !important;
  height: 25px !important;
  padding: 0 8px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .12) !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  box-sizing: border-box !important;
  float: none !important;
}

#micStarsPanel .micStarsTopEmpty {
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 210px !important;
  margin: 10px 6px !important;
  padding: 20px 12px !important;
  color: #eaf8ff !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  border-radius: 19px !important;
  background: rgba(255, 255, 255, .1) !important;
  text-align: center !important;
  float: none !important;
}

#micStarsPanel .micStarsTopEmpty i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 70px !important;
  height: 70px !important;
  margin-bottom: 7px !important;
  border: 2px solid rgba(255, 255, 255, .3) !important;
  border-radius: 50% !important;
  font-size: 22px !important;
}

#micStarsPanel .micStarsTopEmpty strong,
#micStarsPanel .micStarsTopEmpty span {
  display: block !important;
  color: #fff !important;
  font-size: 11px !important;
}

#micStarsPanel .micStarsRestSection {
  margin-top: 7px !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
}

#micStarsPanel .micStarsRest {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#micStarsPanel .micStarsRow {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 59px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .27) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  float: none !important;
}

#micStarsPanel .micStarsRowRank {
  display: inline-flex !important;
  flex: 0 0 36px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #ffd22f, #f0a300) !important;
  font-size: 11px !important;
  float: none !important;
}

#micStarsPanel .micStarsRow:nth-child(3n+2) .micStarsRowRank {
  background: linear-gradient(145deg, #43d6dc, #1592ce) !important;
}

#micStarsPanel .micStarsRow:nth-child(3n+3) .micStarsRowRank {
  background: linear-gradient(145deg, #b773ff, #754ae0) !important;
}

#micStarsPanel .micStarsRowPic {
  display: block !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin-left: 9px !important;
  padding: 0 !important;
  object-fit: cover !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #eee !important;
  float: none !important;
}

#micStarsPanel .micStarsRowName {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  direction: rtl !important;
  font-size: 11px !important;
  float: none !important;
}

#micStarsPanel .micStarsRowDuration {
  flex: 0 0 auto !important;
  margin-left: 6px !important;
}

#micStarsPanel .micStarsLoading {
  position: absolute !important;
  z-index: 8 !important;
  inset: 40px 0 0 !important;
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #fff !important;
  background: rgba(25, 51, 145, .42) !important;
  backdrop-filter: blur(2px);
  float: none !important;
}

#micStarsPanel .micStarsLoading i {
  font-size: 25px !important;
}

#micStarsPanel .micStarsLoading span {
  font-size: 11px !important;
  color: #fff !important;
}

#more .thMoreRowContest {
  background: linear-gradient(105deg, #ff8a1f, #9d27d9) !important;
}

#more .thMoreIcoContest {
  color: #724000 !important;
  background: linear-gradient(145deg, #ffe064, #ff9e32) !important;
}

#dpnl.contestBotPanelOpen {
  width: 340px !important;
  max-width: calc(100vw - 2px) !important;
}

#contestBotPanel.contestBotIOS {
  position: relative !important;
  display: none !important;
  float: none !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 10px 24px !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  color: #273047 !important;
  border: 0 !important;
  background: linear-gradient(180deg, #fff, #fff8fd 48%, #f3f0ff) !important;
  box-sizing: border-box !important;
  direction: rtl !important;
  scrollbar-width: thin;
  scrollbar-color: #d2c6e4 transparent;
}

#contestBotPanel.contestBotIOS.active {
  display: block !important;
}

#contestBotPanel .contestBotToolbar {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100%;
  min-height: 42px !important;
  padding: 5px 0 3px !important;
  direction: ltr !important;
  box-sizing: border-box;
}

#contestBotPanel .contestBotBack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto !important;
  min-width: 57px;
  height: 31px !important;
  margin: 0;
  padding: 5px 9px !important;
  color: #1683e5 !important;
  border: 1px solid #dfe6ef !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(36, 63, 90, .08);
  font-size: 11px !important;
}

#contestBotPanel .contestBotCard {
  width: 100% !important;
  padding: 12px !important;
  margin: 0 0 12px !important;
  border: 1px solid #ebe7f0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(85, 36, 119, .08);
  box-sizing: border-box !important;
}

#contestBotPanel .contestBotIntro {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  margin-bottom: 12px !important;
  direction: ltr !important;
}

#contestBotPanel .contestBotMascot {
  position: relative !important;
  display: flex !important;
  flex: 0 0 82px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 82px !important;
  height: 82px !important;
  color: #fff !important;
  border: 1px solid #efe8fb;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #ff9a20, #ff4f8b 55%, #8d2bf2) !important;
  box-shadow: 0 8px 18px rgba(174, 53, 190, .24);
}

#contestBotPanel .contestBotMascot>i {
  font-size: 36px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}

#contestBotPanel .contestBotIntroText {
  display: flex !important;
  flex: 1 !important;
  min-width: 0;
  flex-direction: column !important;
  gap: 7px !important;
  direction: rtl !important;
  text-align: right;
}

#contestBotPanel .contestBotIntroText strong {
  display: block;
  padding: 8px 10px !important;
  color: #fff !important;
  border-radius: 10px !important;
  background: linear-gradient(100deg, #8c2cff, #e70091) !important;
  text-align: center !important;
  font-size: 13px !important;
}

#contestBotPanel .contestBotField {
  display: block !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  color: #45495a;
  text-align: right !important;
  font-weight: 700 !important;
}

#contestBotPanel .contestBotField>span {
  display: block !important;
  margin: 0 5px 4px !important;
  font-size: 11px !important;
}

#contestBotPanel .contestBotField select,
#contestBotPanel .contestBotField input {
  display: block !important;
  width: 100% !important;
  height: 43px !important;
  margin: 0;
  padding: 0 12px !important;
  color: #25283a;
  border: 1px solid #dedde6 !important;
  border-radius: 14px !important;
  background: #fff !important;
  outline: 0;
  box-shadow: inset 0 1px 2px rgba(27, 30, 50, .03);
  font-size: 12px !important;
  box-sizing: border-box !important;
}

#contestBotPanel .contestBotGameHint {
  display: block !important;
  width: 100% !important;
  margin: 7px 0 1px !important;
  padding: 7px 9px !important;
  color: #7b3c91 !important;
  border-right: 3px solid #cf4cc0 !important;
  border-radius: 8px !important;
  background: #fff5fc !important;
  line-height: 1.7 !important;
  font-size: 10px !important;
  box-sizing: border-box !important;
}

#contestBotPanel .contestBotStatus {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 61px !important;
  margin: 0 0 10px !important;
  padding: 9px 12px !important;
  color: #51566d;
  border: 1px solid #e3deee !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  direction: ltr !important;
}

#contestBotPanel .contestBotStatusDot {
  flex: 0 0 13px !important;
  width: 13px !important;
  height: 13px !important;
  border: 3px solid #eee !important;
  border-radius: 50% !important;
  background: #aeb4c1 !important;
}

#contestBotPanel .contestBotStatus.is-running .contestBotStatusDot {
  border-color: #b8f2d5 !important;
  background: #18bd68 !important;
  box-shadow: 0 0 0 4px rgba(24, 189, 104, .12);
}

#contestBotPanel .contestBotStatus.is-awaiting {
  border-color: #ffd89a !important;
  background: #fffaf1 !important;
}

#contestBotPanel .contestBotStatus.is-awaiting .contestBotStatusDot {
  border-color: #ffe4af !important;
  background: #ff9d18 !important;
  box-shadow: 0 0 0 4px rgba(255, 157, 24, .12);
  animation: contestDedicationPulse 1.2s ease-in-out infinite;
}

#contestBotPanel .contestBotStatus>div {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 3px;
  direction: rtl !important;
  text-align: right !important;
}

#contestBotPanel .contestBotQuestion,
#contestBotPanel .contestBotScoresSection {
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 10px !important;
  border: 1px solid #e1c6f3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

#contestBotPanel .contestBotScoreRow {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 37px !important;
  padding: 4px 7px !important;
  border-radius: 12px !important;
  background: linear-gradient(100deg, #faf2ff, #f5f8ff) !important;
  direction: ltr !important;
  margin: 5px 0 !important;
}

#contestBotPanel .contestBotScoreRank {
  display: inline-flex !important;
  flex: 0 0 27px;
  align-items: center !important;
  justify-content: center !important;
  width: 27px !important;
  height: 27px !important;
  color: #fff !important;
  border-radius: 50% !important;
  background: #f39c12 !important;
  font-size: 10px !important;
}

#contestBotPanel .contestBotScorePic {
  flex: 0 0 29px;
  width: 29px !important;
  height: 29px !important;
  object-fit: cover !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

#contestBotPanel .contestBotScoreName {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #42465a;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  direction: rtl !important;
  text-align: right !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

#contestBotPanel .contestBotActions {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  width: 100% !important;
}

#contestBotPanel .contestBotActions button {
  width: 100% !important;
  height: 47px !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 7px 15px rgba(62, 34, 102, .12);
}

#contestBotPanel .contestBotStart {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(100deg, #8e2bff, #e50091) !important;
}

#contestBotPanel .contestBotReset {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(100deg, #14a8d7, #6555dc) !important;
}

#contestBotPanel .contestBotStop {
  color: #e53945 !important;
  border: 1px solid #f0e7eb !important;
  background: #fff !important;
}

.contestBotBrbWord {
  display: block !important;
  width: 100% !important;
  padding: 9px 5px !important;
  color: #fff !important;
  border-radius: 10px !important;
  background: linear-gradient(100deg, #8128f5, #e00091) !important;
  box-shadow: 0 4px 12px rgba(115, 37, 180, .2);
  text-align: center !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
}

.contestBotBrbHint {
  display: block !important;
  margin-top: 4px !important;
  color: #7b3a8f !important;
  text-align: center !important;
  font-size: 10px !important;
}

/* Responsive microphone dock: keep all room controls on one phone row. */

@media (max-width: 520px) {
  html body .broadcasters {
    --mobile-mic-item: clamp(32px, calc(12.5vw - 3px), 42px);
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 2px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body .broadcasters > div {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    direction: ltr !important;
    box-sizing: border-box !important;
  }

  html body .broadcasters > div > .prod,
  html body .broadcasters > div > #muteall.mic-listen-toggle,
  html body .broadcasters > div > .room-live-button,
  html body .broadcasters > div > .mic-room-tools,
  html body .broadcasters > div > .mic-room-tools > .mic-menu-toggle,
  html body .broadcasters > div > .private-call-dock {
    flex: 0 0 var(--mobile-mic-item) !important;
    width: var(--mobile-mic-item) !important;
    min-width: var(--mobile-mic-item) !important;
    max-width: var(--mobile-mic-item) !important;
    height: var(--mobile-mic-item) !important;
    min-height: var(--mobile-mic-item) !important;
    max-height: var(--mobile-mic-item) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html body .broadcasters > div > .prod > img#imgmic {
    inset: 2px !important;
    width: calc(var(--mobile-mic-item) - 4px) !important;
    height: calc(var(--mobile-mic-item) - 4px) !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  html body .broadcasters > div > .prod > .evant,
  html body .broadcasters > div > .prod .mic-slot-lock {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  html body .broadcasters > div > .prod .mic-slot-lock img {
    width: clamp(16px, 5.2vw, 20px) !important;
    height: clamp(16px, 5.2vw, 20px) !important;
  }

  html body .broadcasters > div > .prod #name {
    right: 1px !important;
    bottom: 1px !important;
    width: calc(100% - 2px) !important;
    font-size: 7px !important;
    line-height: 10px !important;
  }

  html body .broadcasters > div > .prod > .ismute {
    top: 50% !important;
    left: 5% !important;
    width: 90% !important;
    margin: -1px 0 0 !important;
  }

  html body .broadcasters > div > #muteall.mic-listen-toggle > span {
    margin: 0 !important;
    font-size: clamp(19px, 6vw, 23px) !important;
    line-height: var(--mobile-mic-item) !important;
  }

  html body .broadcasters > div > .room-live-button {
    padding: 0 !important;
    border-width: 1px !important;
  }

  html body .broadcasters > div > .room-live-button .room-live-badge {
    top: 4px !important;
    right: 2px !important;
    left: 2px !important;
    font-size: 9px !important;
    line-height: 13px !important;
  }

  html body .broadcasters > div > .room-live-button > i {
    right: 4px !important;
    bottom: 3px !important;
    font-size: 9px !important;
  }

  html body .broadcasters > div > .mic-room-tools {
    position: relative !important;
    z-index: 70 !important;
  }

  html body .broadcasters > div > .mic-room-tools > .mic-menu-toggle {
    padding: 0 !important;
    border-width: 1px !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  html body .broadcasters > div > .mic-room-tools > .mic-menu-toggle > i:first-child {
    font-size: clamp(15px, 5vw, 18px) !important;
  }

  html body .broadcasters .mic-control-menu {
    top: calc(var(--mobile-mic-item) + 3px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(280px, calc(100vw - 10px)) !important;
    max-width: calc(100vw - 10px) !important;
  }
}

/* Group conversations — option 9 in Add-ons & Features */

.thMoreIcoGroups {
  color: #fff !important;
  background: linear-gradient(145deg, #14b8a6, #2563eb) !important;
  box-shadow: 0 7px 18px rgba(37, 99, 235, .28);
}

.thMoreRowGroups {
  position: relative;
  background: linear-gradient(105deg, rgba(20, 184, 166, .86), rgba(37, 99, 235, .86)) !important;
}

.thMoreRowGroups.has-unread {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .72), 0 8px 22px rgba(20, 184, 166, .35) !important;
}

.group-chat-menu-badge {
  direction: ltr;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  background: #f43f5e;
  color: #fff;
  font: 800 11px/1 Arial, sans-serif;
  box-shadow: 0 4px 12px rgba(244, 63, 94, .35);
}

.group-chat-overlay,
.group-chat-overlay * {
  box-sizing: border-box;
}

.group-chat-panel {
  position: relative;
  width: min(410px, 100%);
  height: min(760px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 22px;
  background: #f5f8ff;
  color: #17233f;
  box-shadow: 0 28px 80px rgba(1, 10, 31, .48), 0 0 0 1px rgba(15, 23, 42, .1);
  animation: groupChatPanelIn .24s cubic-bezier(.2, .8, .2, 1);
}

@keyframes groupChatPanelIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.group-chat-head button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .24);
}

.group-chat-head .group-chat-back {
  order: 4;
}

.group-chat-head .group-chat-new {
  order: 4;
}

.group-chat-view {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.group-chat-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 12px 8px;
  padding: 12px;
  border: 1px solid #dbe7f4;
  border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 7px 22px rgba(41, 72, 120, .07);
}

.group-chat-list-toolbar > div {
  display: flex;
  flex-direction: column;
}

.group-chat-list-toolbar b {
  color: #14213d;
  font-size: 14px;
}

.group-chat-list-toolbar small {
  color: #718096;
  font-size: 10px;
}

.group-chat-create-cta {
  min-height: 35px;
  padding: 0 11px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #0ea5a6);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(16, 185, 129, .22);
}

.group-chat-invites-section {
  margin: 3px 12px 7px;
}

.group-chat-invites-section h4,
.group-chat-manage-card > h4 {
  margin: 7px 2px;
  color: #52627d;
  font-size: 11px;
  font-weight: 900;
}

.group-chat-invites-section h4 i {
  color: #f59e0b;
}

.group-chat-invites {
  display: grid;
  gap: 6px;
}

.group-chat-invite-card,
.group-chat-list-row {
  width: calc(100% - 24px);
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 7px;
  padding: 8px 9px;
  border: 1px solid #dce7f5;
  border-radius: 15px;
  text-align: right;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 16px rgba(28, 62, 110, .06);
}

.group-chat-invite-card {
  width: 100%;
  margin: 0;
  border-color: #fde2a8;
  background: linear-gradient(100deg, #fffaf0, #fff);
}

.group-chat-list-row {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.group-chat-list-row:hover {
  transform: translateY(-1px);
  border-color: #8ddfd7;
  box-shadow: 0 8px 19px rgba(15, 118, 110, .11);
}

.group-chat-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 3px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: #9ec7d7 transparent;
}

.group-chat-list-avatar {
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #14b8a6, #2563eb);
  font-size: 19px;
  box-shadow: 0 5px 13px rgba(37, 99, 235, .22);
}

.group-chat-list-avatar.invite {
  background: linear-gradient(145deg, #fbbf24, #f97316);
}

.group-chat-list-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.group-chat-list-copy b {
  overflow: hidden;
  color: #17233f;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-list-copy small {
  overflow: hidden;
  color: #7a879c;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-list-side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  color: #94a3b8;
}

.group-chat-list-side time {
  direction: ltr;
  font: 10px Arial, sans-serif;
}

.group-chat-list-side em {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 99px;
  color: #fff;
  background: #10b981;
  font: 800 10px Arial, sans-serif;
  font-style: normal;
}

.group-chat-invite-actions {
  display: flex;
  gap: 5px;
}

.group-chat-invite-actions button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}

.group-chat-invite-actions .accept {
  background: #10b981;
}

.group-chat-invite-actions .reject {
  background: #f43f5e;
}

.group-chat-empty,
.group-chat-room-empty,
.group-chat-loading,
.group-chat-no-candidates {
  min-height: 260px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: #77849a;
}

.group-chat-empty > span,
.group-chat-room-empty > span {
  width: 86px;
  height: 86px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bde9e4;
  border-radius: 50%;
  color: #0ea5a6;
  background: linear-gradient(145deg, #ecfffd, #e8f0ff);
  font-size: 32px;
  box-shadow: 0 12px 34px rgba(14, 165, 166, .14);
}

.group-chat-empty b,
.group-chat-room-empty b {
  color: #243550;
  font-size: 14px;
}

.group-chat-empty small,
.group-chat-room-empty small {
  max-width: 250px;
  font-size: 10px;
  line-height: 1.8;
}

.group-chat-empty button {
  margin-top: 5px;
  padding: 9px 18px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5a6, #2563eb);
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.group-chat-room-meta > div:nth-child(2) {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.group-chat-manage {
  width: 38px;
  height: 38px;
  border: 1px solid #d9e5f1;
  border-radius: 12px;
  color: #2563eb;
  background: #f8fbff;
  cursor: pointer;
}

.group-chat-message {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0 0 9px;
}

.group-chat-message.mine {
  flex-direction: row-reverse;
}

.group-chat-message > img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(21, 43, 80, .14);
}

.group-chat-bubble {
  max-width: calc(82% - 36px);
  min-width: 105px;
  padding: 8px 10px 6px;
  border: 1px solid #dce6f2;
  border-radius: 15px 15px 15px 4px;
  background: #fff;
  box-shadow: 0 4px 13px rgba(31, 63, 105, .07);
}

.group-chat-message.mine .group-chat-bubble {
  border-color: #9ee0d8;
  border-radius: 15px 15px 4px 15px;
  background: linear-gradient(140deg, #dcfdf7, #e5f3ff);
}

.group-chat-message.deleted .group-chat-bubble {
  color: #8793a6;
  border-style: dashed;
  background: #f3f5f8;
}

.group-chat-message:hover .group-chat-message-actions {
  opacity: 1;
}

.group-chat-reply-quote b {
  color: #087f79;
  font-size: 9px;
}

.group-chat-reply-quote span {
  overflow: hidden;
  color: #697890;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-bubble footer time {
  direction: ltr;
  font-family: Arial, sans-serif;
}

.group-chat-compose-context > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.group-chat-compose-context b {
  color: #0f766e;
  font-size: 10px;
}

.group-chat-compose-context span {
  overflow: hidden;
  color: #76849a;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-compose-context button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  color: #64748b;
  background: #fff;
  cursor: pointer;
}

.group-chat-compose textarea:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .1);
}

.group-chat-send {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #10b981, #0ea5a6);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 7px 15px rgba(16, 185, 129, .25);
}

.group-chat-loading {
  color: #0ea5a6;
}

.group-chat-form-view,
.group-chat-manage-view {
  overflow-y: auto;
  padding: 14px;
}

.group-chat-form-card,
.group-chat-manage-card {
  width: 100%;
  margin: auto;
  padding: 15px;
  border: 1px solid #dbe7f3;
  border-radius: 19px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 35px rgba(29, 64, 111, .09);
}

.group-chat-form-icon {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #14b8a6, #2563eb);
  font-size: 25px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

.group-chat-form-card h3 {
  margin: 6px 0;
  text-align: center;
  color: #17233f;
  font-size: 15px;
}

.group-chat-form-help {
  margin: 0 auto 13px;
  max-width: 290px;
  text-align: center;
  color: #74839a;
  font-size: 10px;
  line-height: 1.7;
}

.group-chat-name-label {
  color: #41516c;
  font-size: 10px;
  font-weight: 900;
}

.group-chat-name-input {
  width: 100%;
  height: 43px;
  margin-top: 5px;
  padding: 0 12px;
  border: 1px solid #ccd9e8;
  border-radius: 12px;
  outline: 0;
  color: #17233f;
  background: #f8fbff;
  font-family: inherit;
  font-size: 12px;
}

.group-chat-name-input:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .1);
}

.group-chat-member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 13px 1px 7px;
  color: #41516c;
  font-size: 11px;
}

.group-chat-member-head small {
  padding: 3px 8px;
  border-radius: 99px;
  color: #0f766e;
  background: #dcfdf7;
  font-size: 9px;
}

.group-chat-candidates {
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 2px;
}

.group-chat-candidate {
  min-width: 0;
  height: 53px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid #dce6f2;
  border-radius: 13px;
  background: #f8fbff;
  cursor: pointer;
}

.group-chat-candidate:has(input:checked) {
  border-color: #14b8a6;
  background: #ebfffc;
}

.group-chat-candidate input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.group-chat-candidate img,
.group-chat-member-row img {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(31, 62, 104, .14);
}

.group-chat-candidate > span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #263550;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-candidate > i {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccd8e6;
  border-radius: 7px;
  color: transparent;
  background: #fff;
  font-size: 9px;
}

.group-chat-candidate input:checked ~ i {
  border-color: #10b981;
  color: #fff;
  background: #10b981;
}

.group-chat-no-candidates {
  grid-column: 1 / -1;
  min-height: 130px;
}

.group-chat-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}

.group-chat-form-actions button {
  height: 42px;
  flex: 1;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.group-chat-form-cancel {
  color: #52627d;
  background: #e9eef5;
}

.group-chat-form-submit {
  color: #fff;
  background: linear-gradient(135deg, #10b981, #0ea5a6);
  box-shadow: 0 7px 15px rgba(16, 185, 129, .2);
}

.group-chat-form-submit:disabled {
  opacity: .55;
}

.group-chat-manage-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  padding: 13px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(125deg, #0f766e, #2563eb);
}

.group-chat-manage-summary > span {
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  background: rgba(255, 255, 255, .13);
  font-size: 19px;
}

.group-chat-manage-summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.group-chat-manage-summary b {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-manage-summary small {
  color: rgba(255, 255, 255, .76);
  font-size: 9px;
}

.group-chat-setting-row {
  width: 100%;
  min-height: 57px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  padding: 8px 9px;
  border: 1px solid #dbe6f2;
  border-radius: 14px;
  color: #25344f;
  text-align: right;
  background: #f8fbff;
  font-family: inherit;
  cursor: pointer;
}

.group-chat-setting-row > span {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #14b8a6, #2563eb);
}

.group-chat-setting-row > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.group-chat-setting-row b {
  font-size: 11px;
}

.group-chat-setting-row small {
  color: #7a879b;
  font-size: 8px;
}

.group-chat-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  border-radius: 99px;
  background: #c8d3df;
}

.group-chat-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .22);
  transition: transform .2s ease;
}

.group-chat-mute.is-on .group-chat-switch {
  background: #10b981;
}

.group-chat-mute.is-on .group-chat-switch::after {
  transform: translateX(-18px);
}

.group-chat-members-list {
  display: grid;
  gap: 6px;
}

.group-chat-member-row {
  min-height: 55px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #e0e8f2;
  border-radius: 13px;
  background: #fbfdff;
}

.group-chat-member-row > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.group-chat-member-row b {
  overflow: hidden;
  color: #24334e;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-member-row small {
  color: #8190a5;
  font-size: 8px;
}

.group-chat-member-row button {
  width: 33px;
  height: 33px;
  border: 0;
  border-radius: 10px;
  color: #e11d48;
  background: #ffe8ee;
  cursor: pointer;
}

.group-chat-role {
  padding: 4px 8px;
  border-radius: 99px;
  color: #0f766e;
  background: #dcfdf7;
  font-size: 8px;
}

.group-chat-danger-actions {
  display: flex;
  gap: 7px;
  margin-top: 13px;
}

.group-chat-danger-actions button {
  min-height: 40px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #ffd0db;
  border-radius: 12px;
  color: #be123c;
  background: #fff1f4;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.group-chat-toast {
  position: fixed;
  z-index: 1000005;
  top: 18px;
  left: 50%;
  min-width: 230px;
  max-width: calc(100vw - 28px);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 14px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  box-shadow: 0 14px 35px rgba(3, 17, 44, .35);
  font-family: Cairo, Tahoma, Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translate(-50%, -18px);
  transition: opacity .22s ease, transform .22s ease;
}

.group-chat-toast.error {
  background: linear-gradient(135deg, #be123c, #ef4444);
}

.group-chat-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 520px) {
  .group-chat-overlay {
    align-items: stretch;
    padding: 0;
    background: rgba(3, 11, 28, .78);
  }

  .group-chat-panel {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .group-chat-head {
    height: 61px;
    padding: 8px;
  }

  .group-chat-main {
    height: calc(100% - 61px);
  }

  .group-chat-list-toolbar {
    margin: 9px 8px 7px;
  }

  .group-chat-invites-section {
    margin-right: 8px;
    margin-left: 8px;
  }

  .group-chat-invite-card,
  .group-chat-list-row {
    width: calc(100% - 16px);
    margin-right: 8px;
    margin-left: 8px;
  }

  .group-chat-invite-card {
    width: 100%;
    margin: 0;
  }

  .group-chat-candidates {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 370px);
  }

  .group-chat-form-view,
  .group-chat-manage-view {
    padding: 9px;
  }

  .group-chat-form-card,
  .group-chat-manage-card {
    padding: 12px;
    border-radius: 17px;
  }

  .group-chat-bubble {
    max-width: calc(88% - 34px);
  }

  .group-chat-message-actions {
    opacity: .76;
  }
}

/* Group chat media composer and players */

@keyframes groupMediaMenuIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.group-chat-media-menu button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.group-chat-media-menu button[data-media-type="image"] {
  background: linear-gradient(135deg, #10b981, #0ea5a6);
}

.group-chat-media-menu button[data-media-type="video"] {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.group-chat-media-menu button[data-media-type="audio"] {
  background: linear-gradient(135deg, #f43f5e, #ec4899);
}

.group-chat-media-toggle {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 1px solid #cbd9e8;
  border-radius: 14px;
  color: #2563eb;
  background: #eff5ff;
  font-size: 16px;
  cursor: pointer;
}

.group-chat-upload-status {
  position: relative;
  min-height: 54px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 7px 47px 7px 12px;
  border-top: 1px solid #cde7e4;
  background: #effcf9;
}

.group-chat-upload-status > div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0f766e;
  font-size: 9px;
}

.group-chat-upload-status > div span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-upload-status > div b {
  direction: ltr;
  font: 800 9px Arial, sans-serif;
}

.group-chat-upload-status progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: #cce8e4;
  accent-color: #10b981;
}

.group-chat-upload-status progress::-webkit-progress-bar {
  border-radius: 99px;
  background: #cce8e4;
}

.group-chat-upload-status progress::-webkit-progress-value {
  border-radius: 99px;
  background: linear-gradient(90deg, #10b981, #0ea5a6);
}

.group-chat-upload-status > button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 10px;
  color: #e11d48;
  background: #ffe7ed;
  cursor: pointer;
}

.group-chat-message.has-media .group-chat-bubble {
  width: min(278px, calc(100vw - 105px));
  max-width: calc(88% - 36px);
}

.group-chat-media {
  width: 100%;
  overflow: hidden;
  margin: 3px 0 6px;
  border: 1px solid rgba(112, 132, 163, .22);
  border-radius: 12px;
  background: #f5f8fc;
}

.group-chat-media figure,
.group-chat-media img,
.group-chat-media video,
.group-chat-media audio {
  max-width: 100%;
}

.group-chat-media figcaption {
  overflow: hidden;
  padding: 6px 8px;
  color: #617089;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-media figcaption i {
  margin-left: 5px;
  color: #0ea5a6;
}

.group-chat-media-image > button {
  position: relative;
  width: 100%;
  min-height: 90px;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #e7edf5;
  cursor: zoom-in;
}

.group-chat-media-image img {
  width: 100%;
  max-height: 255px;
  display: block;
  object-fit: contain;
  background: #e7edf5;
}

.group-chat-media-image button > span {
  position: absolute;
  left: 7px;
  bottom: 7px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 9px;
  color: #fff;
  background: rgba(15, 23, 42, .62);
  font-size: 10px;
}

.group-chat-media-video video {
  width: 100%;
  max-height: 260px;
  display: block;
  background: #101827;
}

.group-chat-media-audio {
  padding: 9px;
  background: linear-gradient(135deg, #fff0f5, #f2efff);
}

.group-chat-audio-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.group-chat-audio-title > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #f43f5e, #8b5cf6);
  box-shadow: 0 5px 12px rgba(244, 63, 94, .2);
}

.group-chat-audio-title > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.group-chat-audio-title b {
  color: #54215e;
  font-size: 10px;
}

.group-chat-audio-title small {
  overflow: hidden;
  color: #8b6a92;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-media-audio audio {
  width: 100%;
  height: 35px;
  display: block;
}

.group-chat-media-viewer {
  position: fixed;
  z-index: 1000008;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(1, 7, 20, .9);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: groupChatPanelIn .2s ease;
}

.group-chat-media-viewer > img {
  max-width: min(1100px, 96vw);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .5);
}

.group-chat-media-viewer > button {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: #fff;
  background: #e11d48;
  cursor: pointer;
}

@media (max-width: 520px) {
  .group-chat-media-menu {
    gap: 6px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .group-chat-media-menu button {
    min-width: 0;
    flex: 1;
  }

  .group-chat-compose {
    gap: 5px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .group-chat-media-toggle,
  .group-chat-send {
    width: 41px;
    height: 41px;
    flex-basis: 41px;
  }

  .group-chat-message.has-media .group-chat-bubble {
    width: min(276px, calc(100vw - 82px));
    max-width: calc(94% - 31px);
  }

  .group-chat-media-viewer {
    padding: 8px;
  }
}

/* Wall trend — Add-ons option 6 */

.thMoreIcoWallTrend {
  color: #fff !important;
  background: linear-gradient(145deg, #2dd4bf, #14b8a6) !important;
  box-shadow: 0 7px 18px rgba(20, 184, 166, .3);
}

.thMoreRowWallTrend {
  background: linear-gradient(105deg, rgba(123, 63, 169, .88), rgba(88, 66, 178, .88)) !important;
}

#wallTrendPanel,
#wallTrendPanel * {
  box-sizing: border-box;
}

#dpnl.wallTrendPanelOpen {
  width: 340px !important;
  max-width: calc(100vw - 2px) !important;
}

#wallTrendPanel.wallTrendIOS {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  clear: both !important;
  float: none !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #20334d;
  background: #fff !important;
  font-family: Cairo, Tahoma, Arial, sans-serif;
}

#wallTrendPanel.wallTrendIOS.active {
  display: block !important;
}

.wall-trend-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  color: #20334d;
  background: #fff;
}

.wall-trend-toolbar {
  position: relative;
  min-height: 59px;
  flex: 0 0 59px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9px 8px 3px;
  background: radial-gradient(circle at 92% 12%, rgba(255, 212, 74, .16), transparent 30%),
        #fff;
}

.wall-trend-back {
  position: absolute;
  top: 7px;
  left: 8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid #e1e8f0;
  border-radius: 11px;
  color: #1682ee;
  background: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(40, 73, 112, .05);
}

.wall-trend-period-title {
  align-self: flex-end;
  padding-bottom: 2px;
  color: #25415d;
  font-size: 10px;
  font-weight: 800;
}

.wall-trend-tabs {
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 19px 10px;
  border-bottom: 1px solid #e5ebf2;
  background: linear-gradient(180deg, #fffef9, #f8fbff);
}

.wall-trend-tabs button {
  height: 38px;
  flex: 1;
  border: 1px solid #dbe5ef;
  border-radius: 21px;
  color: #4c6179;
  background: rgba(250, 252, 255, .96);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(35, 64, 101, .04);
  transition: border-color .17s ease, color .17s ease, background .17s ease, transform .17s ease;
}

.wall-trend-tabs button:hover {
  transform: translateY(-1px);
}

.wall-trend-tabs button.active {
  border-color: #ffc946;
  color: #8a4b00;
  background: linear-gradient(135deg, #fff8cc, #ffe59d);
  box-shadow: 0 6px 15px rgba(245, 176, 45, .16);
}

.wall-trend-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 12px 20px;
  background: radial-gradient(circle at 100% 0, rgba(255, 221, 115, .08), transparent 28%),
        linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  scrollbar-width: thin;
  scrollbar-color: #8b8f95 #f2f4f6;
}

.wall-trend-content::-webkit-scrollbar {
  width: 7px;
}

.wall-trend-content::-webkit-scrollbar-track {
  background: #f2f4f6;
}

.wall-trend-content::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: #8b8f95;
}

.wall-trend-section {
  overflow: hidden;
  margin: 0 0 9px;
  padding: 0 9px 9px;
  border: 1px solid;
  border-radius: 0 0 16px 16px;
  background: #fff;
}

.wall-trend-section > header {
  min-height: 49px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(75, 92, 119, .1);
}

.wall-trend-section > header h3 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
}

.wall-trend-section > header > span {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 14px;
  box-shadow: 0 5px 12px rgba(30, 54, 91, .1);
}

.wall-trend-posts {
  border-color: #ffe293;
  background: linear-gradient(180deg, #fffdf7, #fffaf0);
}

.wall-trend-posts > header h3 {
  color: #8d5800;
}

.wall-trend-posts > header > span {
  color: #822800;
  background: #ffd757;
}

.wall-trend-chats {
  border-color: #b8f0f5;
  background: linear-gradient(180deg, #f6feff, #edfcfe);
}

.wall-trend-chats > header h3 {
  color: #007b94;
}

.wall-trend-chats > header > span {
  color: #08546c;
  background: #63e4ef;
}

.wall-trend-likes {
  border-color: #ffcbd6;
  background: linear-gradient(180deg, #fff9fa, #fff1f4);
}

.wall-trend-likes > header h3 {
  color: #d21445;
}

.wall-trend-likes > header > span {
  color: #8f0025;
  background: #ff9fb3;
}

.wall-trend-comments {
  border-color: #ddd1ff;
  background: linear-gradient(180deg, #fcfaff, #f5f1ff);
}

.wall-trend-comments > header h3 {
  color: #7047e8;
}

.wall-trend-comments > header > span {
  color: #251c58;
  background: #c3b1ff;
}

.wall-trend-rows {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.wall-trend-row {
  width: 100%;
  min-height: 56px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(98, 116, 146, .18);
  border-radius: 12px;
  color: #263851;
  text-align: right;
  background: rgba(255, 255, 255, .82);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(31, 58, 95, .035);
  transition: transform .15s ease, box-shadow .15s ease;
}

.wall-trend-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 15px rgba(31, 58, 95, .09);
}

.wall-trend-row > img {
  width: 41px;
  height: 41px;
  flex: 0 0 41px;
  padding: 2px;
  border: 2px solid;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.wall-trend-row > b {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #43536c;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wall-trend-row > em {
  min-width: 61px;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border: 1px solid;
  border-radius: 99px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.wall-trend-medal {
  width: 23px;
  flex: 0 0 23px;
  color: #3b2a12;
  font: 18px/1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  text-align: center;
}

.wall-trend-posts .wall-trend-row > img {
  border-color: #ffcf42;
}

.wall-trend-posts .wall-trend-row > em {
  border-color: #ffe39a;
  color: #ba7300;
  background: #fff8d9;
}

.wall-trend-chats .wall-trend-row > img {
  border-color: #43d9e8;
}

.wall-trend-chats .wall-trend-row > em {
  border-color: #a6edf4;
  color: #008fac;
  background: #dffbfe;
}

.wall-trend-likes .wall-trend-row > img {
  border-color: #ff8da6;
}

.wall-trend-likes .wall-trend-row > em {
  border-color: #ffc2cf;
  color: #e51f51;
  background: #ffe8ed;
}

.wall-trend-comments .wall-trend-row > img {
  border-color: #ad92ff;
}

.wall-trend-comments .wall-trend-row > em {
  border-color: #d8cbff;
  color: #7651e9;
  background: #eee9ff;
}

.wall-trend-empty {
  min-height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #98a5b8;
  text-align: center;
  font-size: 10px;
}

.wall-trend-empty i {
  font-size: 19px;
  opacity: .48;
}

.wall-trend-loading,
.wall-trend-error {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #3f7189;
  text-align: center;
  font-size: 11px;
}

.wall-trend-loading i,
.wall-trend-error > i {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cce9ed;
  border-radius: 50%;
  color: #14aebb;
  background: #f0fdff;
  font-size: 24px;
}

.wall-trend-error button {
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #315f78;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

@media (max-width: 520px) {
  #dpnl.wallTrendPanelOpen {
    width: min(340px, calc(100vw - 2px)) !important;
  }

  .wall-trend-content {
    padding-right: 9px;
    padding-left: 17px;
  }

  .wall-trend-tabs {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* Wall posts / quick chat split */

#wall {
  overflow: hidden !important;
  background: #fff !important;
}

#wall .wall-split-shell,
#wall .wall-split-shell * {
  box-sizing: border-box;
}

#wall .wall-split-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

#wall .story-carousel {
  flex: 0 0 auto;
  min-height: 80px;
  padding-top: 5px;
  padding-bottom: 4px;
}

.wall-mode-tabs {
  width: 100%;
  height: 29px;
  flex: 0 0 29px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 1px 2px 2px;
  direction: ltr;
  border-bottom: 1px solid #d7dbe2;
  background: #fff;
}

.wall-mode-tab {
  position: relative;
  min-width: 0;
  flex: 1;
  margin: 0 !important;
  padding: 2px 5px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: #8c8c8c !important;
  background: #f4f3f3 !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.wall-mode-tab.active {
  color: #fff !important;
  border-color: #6d2628 !important;
  background: linear-gradient(180deg, #a54b4d, #803234) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.quick-wall-unread {
  position: absolute;
  top: -5px;
  left: 6px;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  background: #e3344d;
  font-size: 8px !important;
  line-height: 14px;
}

.wall-mode-section {
  width: 100%;
  min-height: 0;
  flex: 1;
  display: none;
  overflow: hidden;
  background: #fff;
}

.wall-mode-section.active {
  display: flex;
  flex-direction: column;
}

.wall-posts-section > .ae,
.wall-posts-section > .youtubeSearch,
.wall-posts-section > .message-compose-context,
.wall-posts-section > .tablebox {
  flex: 0 0 auto;
}

.wall-posts-section > #d2bc {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto;
  float: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.wall-posts-section > .tablebox {
  width: 100% !important;
  float: none !important;
}

.quick-wall-section {
  position: relative;
  direction: rtl;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.quick-wall-messages {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 1px 8px;
  direction: rtl;
  scrollbar-width: thin;
  scrollbar-color: #8b8b8b #f1f1f1;
}

.quick-wall-messages::-webkit-scrollbar {
  width: 6px;
}

.quick-wall-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.quick-wall-messages::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #8b8b8b;
}

.quick-wall-message {
  position: relative;
  width: 99.5%;
  min-height: 72px;
  display: block;
  clear: both;
  float: left;
  margin: 0 0 -2px;
  padding: 0;
  overflow: visible;
  direction: ltr;
  border: 1px solid lavender;
  border-radius: 5px;
  color: #28354b;
  background: #fff;
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.quick-wall-message::after {
  display: table;
  clear: both;
  content: "";
}

.quick-wall-message.mine {
  background: #fffdfd;
}

.quick-wall-message.highlight {
  border-color: #f0b44a;
  background: #fff8df;
  box-shadow: 0 0 0 2px rgba(240, 180, 74, .22);
}

.quick-wall-avatar {
  display: block;
  float: left;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 1px 0 0 1px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f2f3f5;
  object-fit: cover;
  cursor: pointer;
}

.quick-wall-message-main {
  display: block;
  float: left;
  min-width: 0;
  width: 78%;
  padding: 2px 4px;
  direction: ltr;
  text-align: left;
}

.quick-wall-message-main > header {
  width: 100%;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  direction: ltr;
  text-align: left;
  overflow: hidden;
}

.quick-wall-message-main > header .u-topic {
  min-width: 0;
  max-width: 82%;
  display: block;
  margin-top: 2px;
  padding: 0 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quick-wall-time {
  display: block;
  float: right;
  min-width: 26px;
  margin: 2px 4px 0 -20px;
  padding: 0 2px;
  color: #797979;
  direction: rtl;
  text-align: left;
  white-space: nowrap;
}

.quick-wall-text {
  min-height: 17px;
  width: 100%;
  padding: 0;
  overflow-wrap: anywhere;
  direction: rtl;
  text-align: left;
}

.quick-wall-reply-preview {
  display: block;
  cursor: pointer;
}

.quick-wall-message-actions {
  clear: both;
  float: left !important;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin: 2px 0 2px 2px !important;
  direction: ltr;
}

.quick-wall-image {
  display: block;
  width: auto;
  max-width: 240px;
  margin: 3px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8dce3;
  border-radius: 5px;
  background: #f3f4f6;
  cursor: pointer;
}

.quick-wall-image img {
  display: block;
  width: auto;
  max-width: 240px;
  max-height: 200px;
  object-fit: contain;
}

.quick-wall-video,
.quick-wall-audio {
  display: block;
  width: min(240px, 100%);
  max-height: 200px;
  margin: 3px 0;
}

.quick-wall-typing {
  min-height: 0;
  flex: 0 0 auto;
  padding: 0 7px;
  overflow: hidden;
  color: #8d3b3d;
  background: #fff;
  font-size: 8px !important;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quick-wall-compose-context {
  width: 100%;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-top: 1px solid #e2d4d5;
  border-right: 3px solid #8d3b3d;
  color: #4d4d55;
  background: #fff8f8;
}

.quick-wall-compose-context > div {
  min-width: 0;
  flex: 1;
}

.quick-wall-compose-context b,
.quick-wall-compose-context span {
  display: block;
  overflow: hidden;
  font-size: 8px !important;
  line-height: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quick-wall-compose-context b {
  color: #8d3b3d;
}

.quick-wall-compose-context > button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #d74b50;
}

.quick-wall-compose {
  position: relative;
  width: 100%;
  min-height: 42px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  direction: ltr;
  border-top: 1px solid #b9bec8;
  background: #fff;
}

.quick-wall-compose > button {
  height: 33px;
  flex: 0 0 34px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.quick-wall-compose > .quick-wall-emoji {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  margin: 0;
  padding: 5px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  cursor: pointer;
}

.quick-wall-compose > .quick-wall-send {
  min-width: 60px;
  flex-basis: 60px;
}

.quick-wall-input {
  min-width: 0;
  height: 32px;
  max-height: 84px;
  flex: 1;
  margin: 0;
  padding: 6px;
  resize: none;
  overflow-y: auto;
  direction: rtl;
  border: 1px solid #d6d9df !important;
  border-radius: 2px !important;
  color: #333;
  background: #fff !important;
}

.quick-wall-media-menu {
  position: absolute;
  z-index: 50;
  bottom: 44px;
  left: 3px;
  width: 126px;
  align-items: stretch;
  gap: 3px;
  padding: 4px;
  border: 1px solid #b1b7c1;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 31, 52, .24);
}

.quick-wall-media-menu button {
  min-width: 0;
  height: 42px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #8d3b3d;
  font-size: 13px !important;
}

.quick-wall-media-menu button:nth-child(2) {
  background: #d34249;
}

.quick-wall-media-menu button:nth-child(3) {
  background: #2d8793;
}

.quick-wall-media-menu button span {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 7px !important;
}

.quick-wall-upload-status {
  position: relative;
  grid-template-columns: 1fr auto 24px;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-top: 1px solid #d9dde5;
  color: #4d5665;
  background: #f7f9fc;
  font-size: 8px !important;
}

.quick-wall-upload-status progress {
  width: 100%;
  height: 4px;
  grid-column: 1 / -1;
}

.quick-wall-upload-status button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #d74b50;
}

.quick-wall-empty {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #a0a7b3;
  text-align: center;
}

.quick-wall-empty i {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid #e0d5d6;
  border-radius: 50%;
  color: #8d3b3d;
  background: #fff7f7;
  font-size: 24px !important;
}

.quick-wall-empty strong {
  color: #606875;
  font-size: 11px !important;
}

.quick-wall-empty span {
  font-size: 9px !important;
}

@media (max-width: 350px) {
  .quick-wall-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .quick-wall-compose {
    gap: 2px;
    padding-right: 2px;
    padding-left: 2px;
  }

  .quick-wall-compose > button {
    flex-basis: 30px;
    width: 30px;
  }

  .quick-wall-compose > .quick-wall-send {
    min-width: 52px;
    flex-basis: 52px;
  }
}

/* أدوات مالك الموقع لإضافة الإحصاءات إلى العضو المحدد. */

#upro .ownerstatsbox {
  padding: 0 !important;
  background: transparent;
  border: 0 !important;
  direction: rtl;
}

#upro .owner-stat-row {
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 42px;
  margin-top: 2px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #888;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

#upro .owner-stat-row > label {
  float: none !important;
  display: flex;
  direction: rtl;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 34%;
  width: 46%;
  min-width: 112px;
  height: 32px;
  margin: 0;
  padding: 8px 6px;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  box-sizing: border-box;
  font-size: 15px !important;
}

#upro .owner-stat-row > label small {
  display: none;
}

#upro .owner-stat-value {
  float: none !important;
  flex: 1 1 auto;
  width: auto;
  min-width: 45px;
  height: 32px;
  padding: 4px;
  text-align: center;
  border-radius: 3px;
  box-sizing: border-box;
}

#upro .owner-stat-save {
  float: none !important;
  flex: 0 0 44px;
  width: 44px;
  height: 32px;
  margin: 0 0 0 2px !important;
  padding: 6px 2px;
  white-space: nowrap;
  text-align: center;
  border-radius: 0;
  box-sizing: border-box;
  font-size: 11px !important;
}

#upro .owner-stat-save:disabled {
  opacity: .55;
  cursor: wait;
}

/* Group chat uses the same floating-window proportions and message layout as private chat. */

body.group-chat-open {
  overflow: auto !important;
}

.group-chat-overlay {
  position: fixed;
  z-index: 1000002;
  inset: 0;
  display: flex;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 1px !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-family: Cairo, Tahoma, Arial, sans-serif;
  pointer-events: none;
}

.group-chat-panel.private-chat-like {
  position: relative !important;
  width: 97% !important;
  max-width: 500px !important;
  min-height: 180px !important;
  height: 50dvh !important;
  max-height: 500px !important;
  border: 1px solid #777 !important;
  border-radius: 0 0 1em 1em !important;
  color: #111 !important;
  background: #eee !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important;
  pointer-events: auto;
  animation: none !important;
}

.group-chat-panel.private-chat-like.is-expanded {
  height: 86dvh !important;
  max-height: 86dvh !important;
}

.group-chat-panel.private-chat-like.is-minimized {
  width: min(320px, 97%) !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 0 0 5px 5px !important;
}

.group-chat-panel.is-minimized .group-chat-main {
  display: none !important;
}

.group-chat-head {
  height: 30px !important;
  display: flex;
  align-items: center;
  gap: 2px !important;
  padding: 1px 2px !important;
  color: #fff;
  background: linear-gradient(125deg, #0f766e 0%, #0ea5a6 43%, #2563eb 100%);
  box-shadow: none !important;
  width: 100% !important;
  min-height: 30px !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.group-chat-head button {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  border-radius: 1px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .12) !important;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
  padding: 5px !important;
  box-shadow: none !important;
}

.group-chat-head .group-chat-close {
  order: 1;
  color: #fff;
  background: #e63348 !important;
}

.group-chat-head-copy {
  min-width: 0;
  flex: 1;
  order: 2;
  display: flex;
  flex-direction: column;
  text-align: right;
  height: 28px;
  justify-content: center;
  padding: 0 4px;
}

.group-chat-title {
  overflow: hidden;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 15px !important;
}

.group-chat-subtitle {
  overflow: hidden;
  margin-top: 2px;
  color: rgba(255,255,255,.84) !important;
  font-size: 8px !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 10px !important;
}

.group-chat-main {
  height: calc(100% - 30px) !important;
  overflow: hidden;
  background: #eee !important;
}

.group-chat-room-meta {
  min-height: 45px !important;
  display: flex;
  align-items: center;
  gap: 5px !important;
  padding: 3px 5px !important;
  border-bottom: 1px solid #bbb !important;
  background: #fff !important;
  height: 45px !important;
}

.group-chat-avatar {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px !important;
  color: #fff;
  background: #263568 !important;
  flex-basis: 36px !important;
}

.group-chat-room-meta b {
  overflow: hidden;
  font-size: 12px !important;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-room-meta small {
  color: #666 !important;
  font-size: 9px !important;
}

.group-chat-manage,
.group-chat-call-head {
  position: relative;
  width: 35px !important;
  height: 35px !important;
  padding: 5px !important;
  border: 1px solid #172653 !important;
  border-radius: 1px !important;
  color: #fff !important;
  background: #17326d !important;
}

.group-chat-call-head.is-active,
.group-chat-call.is-active {
  background: #20ad54 !important;
}

.group-chat-call-head em {
  position: absolute;
  top: -5px;
  left: -5px;
  min-width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1px solid #fff;
  border-radius: 99px;
  color: #fff;
  background: #e63348;
  font: 700 8px/14px Arial !important;
}

.group-chat-messages {
  min-height: 0 !important;
  flex: 1;
  overflow-y: auto;
  padding: 0 2px 3px !important;
  background: #eee !important;
  background-size: auto, 22px 22px;
  scrollbar-width: thin;
}

.group-chat-message,
.group-chat-message.mine {
  position: relative;
  width: 99.5% !important;
  min-height: 49px;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin: 0 0 -2px !important;
  padding: 0 !important;
  overflow: visible;
  border: 1px solid #ddd !important;
  border-radius: 5px !important;
  direction: ltr;
  background: #fff !important;
  box-shadow: none !important;
}

.group-chat-message > img,
.group-chat-message > .group-chat-message-pic {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin: 1px 1px 0 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  box-shadow: none !important;
}

.group-chat-message-time {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 2;
  direction: ltr;
  color: #777 !important;
  font: 700 8px/1.2 Arial !important;
}

.group-chat-bubble,
.group-chat-message.mine .group-chat-bubble,
.group-chat-message.has-media .group-chat-bubble {
  width: calc(100% - 48px) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 2px 4px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  direction: rtl;
  background: transparent !important;
  box-shadow: none !important;
}

.group-chat-message.deleted {
  opacity: .72;
}

.group-chat-message-top {
  display: flex;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
  min-height: 20px;
  padding-left: 34px;
  margin: 0 !important;
}

.group-chat-message-top > b {
  overflow: hidden;
  color: #111 !important;
  font-size: 11px !important;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 18px !important;
}

.group-chat-message-body {
  color: #111 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
  min-height: 19px;
  padding: 0 !important;
}

.group-chat-message-actions {
  display: flex;
  gap: 1px !important;
  opacity: 1 !important;
  transition: opacity .15s ease;
  position: absolute;
  left: 48px;
  bottom: 2px;
  z-index: 3;
}

.group-chat-message-actions button {
  width: 25px !important;
  height: 25px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px !important;
  border: 1px solid #fff !important;
  border-radius: 1px !important;
  color: #fff !important;
  background: rgba(224, 232, 244, .82);
  font-size: 10px !important;
  cursor: pointer;
}

.group-chat-bubble footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 3px;
  color: #8693a8;
  font-size: 8px;
  min-height: 2px;
  margin: 0 !important;
}

.group-chat-bubble footer span {
  padding: 1px 4px;
  border: 1px solid rgba(50, 63, 85, .22);
  border-radius: 5px;
  color: #222 !important;
  margin-right: auto;
  border-color: #777 !important;
  font-size: 8px !important;
}

.group-chat-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 1px 0 3px !important;
  padding: 3px 5px !important;
  border-right: 3px solid #0ea5a6;
  border-radius: 1px !important;
  background: rgba(14, 165, 166, .08);
}

.group-chat-reply-quote b,
.group-chat-reply-quote span {
  font-size: 9px !important;
}

.group-chat-typing {
  min-height: 17px !important;
  padding: 1px 5px !important;
  color: #087f79 !important;
  background: #fff !important;
  font-size: 9px !important;
  font-weight: 700;
  height: 17px !important;
}

.group-chat-compose-context {
  min-height: 36px !important;
  align-items: center;
  gap: 8px;
  padding: 3px 6px !important;
  border-top: 1px solid #dce6f2;
  border-right: 4px solid #14b8a6;
  background: #eefaf8;
  border-radius: 0 !important;
}

.group-chat-compose-context b,
.group-chat-compose-context span {
  font-size: 9px !important;
}

.group-chat-compose {
  min-height: 42px !important;
  display: flex;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px !important;
  border-top: 1px solid #aaa !important;
  background: #fff !important;
  width: 100% !important;
  height: 42px !important;
}

.group-chat-compose textarea {
  min-width: 0 !important;
  min-height: 32px !important;
  max-height: 32px !important;
  flex: 1;
  resize: none;
  padding: 5px 7px !important;
  border: 1px solid #ccc !important;
  border-radius: 1px !important;
  outline: 0;
  color: #111 !important;
  background: #fff !important;
  font-family: inherit;
  font-size: 11px !important;
  line-height: 20px !important;
  height: 32px !important;
  box-shadow: none !important;
}

.group-chat-compose .group-chat-call,
.group-chat-compose .group-chat-media-toggle,
.group-chat-compose .group-chat-send,
.group-chat-compose .group-chat-mic {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid #111 !important;
  border-radius: 1px !important;
  color: #fff !important;
  box-shadow: none !important;
}

.group-chat-compose .group-chat-call,
.group-chat-compose .group-chat-mic {
  background: #22ad4e !important;
}

.group-chat-emoji {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;
  padding: 5px !important;
  cursor: pointer;
}

.group-chat-media-menu {
  min-height: 47px !important;
  align-items: center;
  justify-content: center;
  gap: 3px !important;
  padding: 3px !important;
  border-top: 1px solid #dce6f2;
  background: linear-gradient(90deg, #eefbf9, #eef4ff);
  animation: groupMediaMenuIn .18s ease;
}

.group-chat-media-menu button {
  min-width: 0 !important;
  height: 38px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 2px !important;
  color: #fff;
  font-family: inherit;
  font-size: 9px !important;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(31, 63, 105, .13);
  transition: transform .15s ease, filter .15s ease;
  flex: 1;
}

.group-chat-media figcaption,
.group-chat-audio-title b,
.group-chat-audio-title small {
  font-size: 8px !important;
}

.group-chat-voice {
  position: relative;
  flex: 0 0 auto;
  border-bottom: 1px solid #a8b6c9;
  background: #f7f9fd;
}

.group-chat-voice-top {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px;
  color: #fff;
  background: #315b9a;
}

.group-chat-voice-top > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.group-chat-voice-top > div > i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #22ad4e;
}

.group-chat-voice-top span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.group-chat-voice-top b {
  font-size: 10px !important;
}

.group-chat-voice-top small {
  color: #e8efff !important;
  font-size: 8px !important;
}

.group-chat-voice-collapse {
  width: 27px !important;
  height: 27px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  color: #fff !important;
  background: transparent !important;
}

.group-chat-voice-body {
  padding: 5px;
}

.group-chat-voice.is-collapsed .group-chat-voice-body {
  display: none;
}

.group-chat-voice-participants {
  min-height: 45px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 1px 0 4px;
}

.group-chat-voice-person {
  min-width: 48px;
  max-width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.group-chat-voice-person img {
  width: 34px !important;
  height: 34px !important;
  border: 2px solid #5b83c6;
  border-radius: 50%;
  object-fit: cover;
}

.group-chat-voice-person.is-me img {
  border-color: #22ad4e;
}

.group-chat-voice-person b,
.group-chat-voice-person i {
  max-width: 60px;
  overflow: hidden;
  color: #1b2a44;
  font-size: 8px !important;
  line-height: 11px !important;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-chat-voice-person i {
  position: absolute;
  top: 25px;
  padding: 0 3px;
  border-radius: 5px;
  color: #fff;
  background: #22ad4e;
  font-size: 6px !important;
}

.group-chat-voice-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.group-chat-voice-controls > button {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px;
  padding: 5px !important;
  border: 0 !important;
  border-radius: 2px !important;
  color: #fff !important;
  background: #315b9a !important;
}

.group-chat-voice-controls > button.is-muted {
  background: #e49b14 !important;
}

.group-chat-voice-controls > .group-chat-voice-end {
  transform: rotate(135deg);
  background: #e63348 !important;
}

.group-chat-voice-controls label {
  min-width: 0;
  height: 32px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  border: 1px solid #ccd5e3;
  background: #fff;
}

.group-chat-voice-controls input {
  min-width: 45px;
  flex: 1;
}

.group-chat-voice-controls output {
  min-width: 29px;
  direction: ltr;
  color: #44536b;
  font: 700 8px/1 Arial !important;
}

.group-chat-voice-audios,
.group-chat-remote-audio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.group-voice-dock {
  position: fixed;
  z-index: 1000004;
  top: 64px;
  right: 6px;
  width: min(220px, calc(100vw - 12px));
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
  text-align: right;
  background: #315b9a;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

.group-voice-dock > i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #22ad4e;
}

.group-voice-dock > span {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.group-voice-dock b,
.group-voice-dock small,
.group-voice-dock em {
  overflow: hidden;
  color: #fff !important;
  font-size: 9px !important;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-voice-dock em {
  min-width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  text-align: center;
  background: #e63348;
}

@media (max-width: 520px) {
  .group-chat-overlay {
    align-items: flex-start !important;
    padding: 1px !important;
    background: transparent !important;
  }

  .group-chat-panel.private-chat-like {
    width: 97% !important;
    height: 50dvh !important;
    min-height: 180px !important;
    max-height: 500px !important;
    border: 1px solid #777 !important;
    border-radius: 0 0 1em 1em !important;
  }

  .group-chat-panel.private-chat-like.is-expanded {
    height: 86dvh !important;
    max-height: 86dvh !important;
  }

  .group-chat-head {
    height: 30px !important;
    min-height: 30px !important;
    padding: 1px 2px !important;
  }

  .group-chat-main {
    height: calc(100% - 30px) !important;
  }

  .group-chat-message-actions {
    opacity: 1 !important;
  }

  .group-chat-form-view,
  .group-chat-manage-view {
    padding: 5px !important;
  }

  .group-chat-candidates {
    max-height: 230px !important;
  }

  .group-chat-compose .group-chat-call,
  .group-chat-compose .group-chat-media-toggle,
  .group-chat-compose .group-chat-send,
  .group-chat-emoji {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
}

#dpnl #chats {
  position: relative;
}

#dpnl #chats > #seo {
  position: relative;
  min-height: 100%;
}

#dpnl #chats.has-private-chats > #seo {
  min-height: calc(100% - 35px);
}

#privateChatsEmptyState.private-chats-empty-state {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 16px 80px;
  direction: rtl;
  text-align: center;
  color: #111827;
  background: #f4f4f5;
  pointer-events: none;
}

#privateChatsEmptyState .private-chats-empty-visual {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #e2e2e4;
}

#privateChatsEmptyState .private-chats-empty-symbol {
  width: 118px;
  height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 25px;
  background: #8f3e40;
  box-shadow: 0 16px 28px rgba(79, 30, 33, .16);
}

#privateChatsEmptyState .private-chats-empty-symbol i {
  width: 64px;
  height: 7px;
  display: block;
  border-radius: 10px;
  background: #d69a9c;
}

#privateChatsEmptyState .private-chats-empty-symbol i:first-child {
  width: 50px;
}

#privateChatsEmptyState > strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
}

#privateChatsEmptyState > span:last-child {
  font-size: 13px;
  color: #8a8b91;
  line-height: 1.7;
}

@media (max-height: 620px) {
  #privateChatsEmptyState.private-chats-empty-state {
    min-height: 400px;
    padding-bottom: 35px;
  }

  #privateChatsEmptyState .private-chats-empty-visual {
    width: 170px;
    height: 170px;
  }

  #privateChatsEmptyState .private-chats-empty-symbol {
    width: 94px;
    height: 94px;
  }
}

/* Stable group-video tiles and selectable call audio output. */

body>.callnot .private-call-actions>.private-call-output {
  color: #304766 !important;
  border: 1px solid #d5dfeb !important;
  background: #f2f6fb !important;
}

#groupChatPanel .group-chat-voice-output {
  color: #fff !important;
  background: #6b4bc3 !important;
}

#groupChatPanel .group-chat-video-stage {
  width: 100%;
  margin-bottom: 5px;
  padding: 5px !important;
  border: 1px solid #263c62 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #0b1424, #111d32) !important;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

#groupChatPanel .group-chat-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  max-height: 320px !important;
  overflow-y: auto;
  grid-auto-flow: row dense;
  overflow: auto;
}

#groupChatPanel .group-chat-video-grid.is-count-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}

#groupChatPanel .group-chat-video-grid.is-count-3 .group-chat-video-card:first-child {
  grid-column: 1 / -1;
}

#groupChatPanel .group-chat-video-card {
  position: relative;
  min-height: 118px !important;
  overflow: hidden;
  border-radius: 9px !important;
  background: #020817 !important;
  min-width: 0;
  border: 1px solid rgba(129,166,220,.35);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

#groupChatPanel .group-chat-video-card video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 118px !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  background: #020617;
}

#groupChatPanel .group-chat-video-grid.is-count-1 .group-chat-video-card video,
#groupChatPanel .group-chat-video-grid.is-count-3 .group-chat-video-card:first-child video {
  aspect-ratio: 16 / 9 !important;
}

#groupChatPanel .group-chat-video-card span {
  position: absolute;
  z-index: 2;
  right: 7px !important;
  bottom: 7px !important;
  max-width: calc(100% - 10px);
  padding: 3px 8px !important;
  overflow: hidden;
  color: #fff;
  border-radius: 10px !important;
  background: rgba(2,8,23,.76) !important;
  font-size: 9px !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
}

.call-audio-output-picker {
  position: fixed;
  z-index: 9999999999999;
  top: 50%;
  left: 50%;
  width: min(92vw, 390px);
  max-height: min(78vh, 520px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid #cfd8e6;
  border-radius: 15px;
  color: #17243a;
  background: #f7f9fc;
  box-shadow: 0 22px 65px rgba(0,0,0,.38);
}

.call-audio-output-picker header {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  color: #fff;
  background: linear-gradient(135deg, #243f78, #526ad1);
}

.call-audio-output-picker header>i {
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 39px;
  border-radius: 12px;
  background: rgba(255,255,255,.18);
  font-size: 19px !important;
}

.call-audio-output-picker header>div {
  min-width: 0;
  flex: 1;
}

.call-audio-output-picker header b,
.call-audio-output-picker header small {
  display: block;
  line-height: 1.55;
}

.call-audio-output-picker header b {
  font-size: 13px !important;
}

.call-audio-output-picker header small {
  opacity: .83;
  font-size: 9px !important;
}

.call-audio-output-picker header button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(226,50,72,.94);
}

.call-audio-output-list {
  max-height: 390px;
  overflow-y: auto;
  padding: 10px;
}

.call-audio-output-option {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding: 7px 9px;
  border: 1px solid #d9e1ee;
  border-radius: 12px;
  color: #263650;
  text-align: right;
  background: #fff;
}

.call-audio-output-option>i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border-radius: 11px;
  color: #fff;
  background: #5270ca;
}

.call-audio-output-option>span {
  min-width: 0;
  flex: 1;
}

.call-audio-output-option b,
.call-audio-output-option small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.call-audio-output-option small {
  margin-top: 3px;
  color: #77849a;
  font-size: 9px !important;
}

.call-audio-output-option>em {
  visibility: hidden;
  color: #20a85d;
}

.call-audio-output-option.is-active {
  border-color: #4bc182;
  background: #effbf5;
}

.call-audio-output-option.is-active>em {
  visibility: visible;
}

@media (max-width: 520px) {
  #groupChatPanel .group-chat-video-grid {
    max-height: 275px !important;
  }

  #groupChatPanel .group-chat-video-card,
  #groupChatPanel .group-chat-video-card video {
    min-height: 96px !important;
  }

  #groupChatPanel .group-chat-voice-controls {
    flex-wrap: wrap;
  }

  #groupChatPanel .group-chat-voice-controls label {
    min-width: 120px;
  }
}

/* ===== Multiplayer room games ===== */

#moreRoomGamesRow {
  background: linear-gradient(105deg, #0f766e, #2563eb) !important;
}

.thMoreIcoGames {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .7) !important;
  background: linear-gradient(145deg, #22c55e, #0ea5e9) !important;
}

.room-games-live-badge {
  margin-inline-start: auto;
  padding: 2px 7px;
  color: #14532d;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  background: #dcfce7;
  font-size: 10px;
}

#roomGamesPanel.roomGamesIOS {
  clear: both;
  float: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px 10px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  direction: rtl;
  color: #172554;
  background: radial-gradient(circle at 100% 0, rgba(14, 165, 233, .14), transparent 35%),
        radial-gradient(circle at 0 100%, rgba(168, 85, 247, .13), transparent 38%),
        #f8fafc !important;
  font-family: Tahoma, Arial, sans-serif;
}

.room-games-toolbar,
.room-game-session-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 7px 22px rgba(15, 23, 42, .07);
}

.room-games-toolbar > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.room-games-toolbar strong {
  color: #1e3a8a;
  font-size: 15px;
}

.room-games-toolbar small {
  color: #64748b;
  font-size: 10px;
}

.room-games-back,
.room-game-exit {
  flex: 0 0 auto;
  min-width: 60px;
  height: 36px;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  font-size: 12px;
  font-weight: bold;
}

.room-games-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 1px 8px;
  padding: 11px;
  text-align: right;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
}

.room-games-intro b {
  color: #1e3a8a;
  font-size: 14px;
}

.room-games-intro span {
  color: #64748b;
  font-size: 10px;
  line-height: 1.7;
}

.room-games-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.room-game-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 112px;
  padding: 13px 14px;
  overflow: hidden;
  text-align: right;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 17px;
  box-shadow: 0 8px 19px rgba(15, 23, 42, .12);
}

.room-game-card::after {
  position: absolute;
  top: -38px;
  left: -30px;
  width: 105px;
  height: 105px;
  content: "";
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}

.room-game-card.is-xo {
  color: #fff;
  background: linear-gradient(135deg, #db2777, #9333ea);
}

.room-game-card.is-ludo {
  color: #fff;
  background: linear-gradient(135deg, #f97316, #eab308);
}

.room-game-card-icon,
.room-game-session-icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 15px;
  background: rgba(255, 255, 255, .2);
  font-size: 25px;
}

.room-game-card-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.room-game-card-copy b {
  font-size: 15px;
}

.room-game-card-copy small {
  min-height: 28px;
  opacity: .94;
  font-size: 11px;
  line-height: 1.65;
}

.room-game-card-copy em {
  font-size: 10px;
  font-style: normal;
  opacity: .95;
}

.room-game-card-go {
  position: relative;
  z-index: 1;
  font-size: 13px;
  opacity: .8;
}

.room-game-top-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin-top: 13px;
}

.room-game-top-links > button {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  direction: rtl;
  text-align: right;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 14px;
  box-shadow: 0 7px 17px rgba(15, 23, 42, .12);
}

.room-game-top-links > button.is-xo {
  background: linear-gradient(110deg, #7c3aed, #db2777);
}

.room-game-top-links > button.is-ludo {
  background: linear-gradient(110deg, #0891b2, #16a34a);
}

.room-game-top-links > button > i {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 12px;
  background: rgba(255, 255, 255, .18);
  font-size: 20px;
}

.room-game-top-links > button > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.room-game-top-links > button b {
  font-size: 13px;
}

.room-game-top-links > button small {
  opacity: .9;
  font-size: 9px;
}

.room-game-top-links > button em {
  font-size: 18px;
  font-style: normal;
  opacity: .9;
}

.room-game-ranking {
  min-height: calc(100% - 4px);
  padding: 10px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(165deg, #9d2ead 0%, #ca1f70 34%, #4847d7 68%, #0797a5 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .18);
}

.room-game-ranking > header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.room-game-ranking > header > span {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
}

.room-game-ranking > header > span > i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  background: rgba(255, 255, 255, .18);
  font-size: 18px;
}

.room-game-ranking > header > span > b,
.room-game-ranking > header > span > small {
  display: block;
}

.room-game-ranking > header > span > b {
  font-size: 14px;
}

.room-game-ranking > header > span > small {
  margin-right: auto;
  opacity: .85;
  font-size: 8px;
}

.room-game-ranking-back {
  min-width: 58px;
  height: 34px;
  color: #2563eb;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
  font-size: 10px;
  font-weight: bold;
}

.room-game-ranking-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  margin: 6px 0 13px;
}

.room-game-ranking-podium > article {
  display: flex;
  min-width: 0;
  min-height: 135px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  background: rgba(255, 255, 255, .15);
}

.room-game-ranking-podium > article.is-gold {
  min-height: 156px;
  border-color: rgba(255, 223, 82, .8);
  background: rgba(255, 214, 76, .22);
}

.room-game-ranking-podium article > em {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #f59e0b, #facc15);
  font-size: 11px;
  font-style: normal;
  font-weight: bold;
}

.room-game-ranking-podium article.is-silver > em {
  background: linear-gradient(145deg, #94a3b8, #e2e8f0);
}

.room-game-ranking-podium article.is-bronze > em {
  background: linear-gradient(145deg, #b45309, #fb923c);
}

.room-game-ranking-podium img {
  width: 58px;
  height: 58px;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  object-fit: cover;
}

.room-game-ranking-podium b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.room-game-ranking-podium strong {
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 10px;
}

.room-game-ranking-podium small {
  opacity: .8;
  font-size: 8px;
}

.room-game-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.room-game-ranking-list > article {
  display: grid;
  min-height: 57px;
  grid-template-columns: 34px 44px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

.room-game-ranking-list article > em {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #8b5cf6, #ec4899);
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
}

.room-game-ranking-list img {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}

.room-game-ranking-list article > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.room-game-ranking-list article > span {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.room-game-ranking-list article > span strong {
  font-size: 11px;
}

.room-game-ranking-list article > span small {
  font-size: 7px;
}

.room-game-ranking-empty,
.room-game-ranking-loading {
  display: flex;
  min-height: 420px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  text-align: center;
}

.room-game-ranking-empty > i,
.room-game-ranking-loading > i {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  font-size: 32px;
}

.room-game-ranking-empty b,
.room-game-ranking-loading b {
  font-size: 13px;
}

.room-game-ranking-empty small {
  opacity: .82;
  font-size: 9px;
}

.room-games-empty,
.room-game-lobby {
  display: flex;
  min-height: 330px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  text-align: center;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: rgba(255, 255, 255, .75);
}

.room-games-empty i,
.room-game-lobby > i {
  display: grid;
  width: 90px;
  height: 90px;
  place-items: center;
  color: #2563eb;
  border-radius: 50%;
  background: #dbeafe;
  font-size: 34px;
}

.room-games-empty b,
.room-game-lobby b {
  color: #1e293b;
  font-size: 14px;
}

.room-games-empty span,
.room-game-lobby span {
  max-width: 270px;
  font-size: 11px;
  line-height: 1.7;
}

.room-game-stage {
  padding-top: 9px;
}

.room-game-session-head {
  position: sticky;
  z-index: 3;
  top: -10px;
  border-color: #c7d2fe;
  border-radius: 14px 14px 8px 8px;
}

.room-game-session-head > div:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.room-game-session-head > div:nth-child(2) > b {
  color: #172554;
  font-size: 14px;
}

.room-game-session-head > div:nth-child(2) > small {
  color: #64748b;
  font-size: 9px;
}

.room-game-session-icon {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
}

.room-game-exit {
  min-width: 38px;
  width: 38px;
}

.room-game-sound-toggle {
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #047857;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);
  box-shadow: 0 3px 9px rgba(5, 150, 105, .13);
  font-size: 15px;
}

.room-game-sound-toggle.is-muted {
  color: #b91c1c;
  border-color: #fecaca;
  background: linear-gradient(145deg, #fff1f2, #fee2e2);
}

.room-game-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 2px;
}

.room-game-btn {
  min-height: 37px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}

.room-game-btn.is-join,
.room-game-btn.is-start,
.room-game-btn.is-roll {
  background: linear-gradient(135deg, #16a34a, #0d9488);
}

.room-game-btn.is-leave {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.room-game-btn.is-close {
  background: linear-gradient(135deg, #ef4444, #be123c);
}

.room-game-btn:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.room-game-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.room-game-player {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
}

.room-game-player.is-turn {
  border-color: #38bdf8;
  box-shadow: inset 0 0 0 1px #38bdf8;
}

.room-game-player.is-winner {
  border-color: #f59e0b;
  background: #fffbeb;
}

.room-game-player img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #cbd5e1;
}

.room-game-player > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.room-game-player b {
  overflow: hidden;
  color: #1e293b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-game-player small {
  color: #94a3b8;
  font-size: 8px;
}

.room-game-player em {
  min-width: 24px;
  padding: 2px 5px;
  color: #fff;
  text-align: center;
  border-radius: 999px;
  background: #6366f1;
  font-size: 9px;
  font-style: normal;
}

.room-game-player > i {
  color: #ef4444;
}

.room-game-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  padding: 9px;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 12px;
  background: #fffbeb;
}

.room-game-result > i {
  font-size: 22px;
}

.room-game-result > span {
  display: flex;
  flex-direction: column;
}

.room-game-result b {
  font-size: 11px;
}

.room-game-result small {
  font-size: 9px;
  opacity: .8;
}

.room-game-turn {
  min-height: 28px;
  padding: 7px 5px 3px;
  color: #1d4ed8;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
}

.room-game-xo-board {
  display: grid;
  width: min(270px, 92%);
  margin: 6px auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.room-game-xo-board button {
  aspect-ratio: 1;
  color: #334155;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #eef2ff);
  box-shadow: 0 5px 14px rgba(30, 64, 175, .1);
  font-size: 37px;
  font-weight: 900;
}

.room-game-xo-board button.has-x {
  color: #e11d48;
}

.room-game-xo-board button.has-o {
  color: #2563eb;
}

.room-game-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  color: #475569;
  font-size: 9px;
}

.room-game-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.room-game-legend i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #fff;
  border-radius: 6px;
  font-style: normal;
  font-weight: bold;
}

.room-game-legend i.is-x {
  background: #e11d48;
}

.room-game-legend i.is-o {
  background: #2563eb;
}

.room-game-connect-wrap {
  max-width: 330px;
  margin: 2px auto;
  padding: 6px;
  border-radius: 15px;
  background: #1d4ed8;
  box-shadow: 0 9px 20px rgba(29, 78, 216, .25);
}

.room-game-connect-drop,
.room-game-connect-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.room-game-connect-drop button {
  height: 24px;
  color: #dbeafe;
  border: 0;
  background: transparent;
}

.room-game-connect-drop button:disabled {
  opacity: .28;
}

.room-game-connect-board span {
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: #eff6ff;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, .25);
}

.room-game-connect-board span.is-red {
  background: #ef4444;
}

.room-game-connect-board span.is-yellow {
  background: #facc15;
}

/* Original Arabic Connect Four experience. */

.room-game-btn.is-surrender {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
}

.connect4-arena {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  padding: 10px;
  direction: rtl;
  border: 1px solid #c7d2fe;
  border-radius: 18px;
  background: radial-gradient(circle at 100% 0, rgba(45, 212, 191, .14), transparent 32%),
        radial-gradient(circle at 0 100%, rgba(244, 63, 94, .11), transparent 35%),
        linear-gradient(155deg, #f8fbff, #eef2ff);
  box-shadow: 0 10px 28px rgba(30, 64, 175, .1);
  font-family: Tahoma, Arial, sans-serif;
}

.connect4-scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.connect4-player {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 52px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid #dbe4f2;
  border-radius: 13px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.connect4-player.is-turn {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .16), 0 6px 15px rgba(14, 165, 233, .13);
  transform: translateY(-1px);
}

.connect4-player.is-winner {
  border-color: #f59e0b;
  background: linear-gradient(145deg, #fff, #fffbeb);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .15);
}

.connect4-player-avatar {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #94a3b8;
  border-radius: 50%;
  background: #e2e8f0;
}

.connect4-player-avatar img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #cbd5e1;
}

.connect4-player-avatar > i:not(.fa) {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.connect4-player.is-red .connect4-player-avatar > i {
  background: #f43f5e;
}

.connect4-player.is-yellow .connect4-player-avatar > i {
  background: #fbbf24;
}

.connect4-player-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.connect4-player-copy b {
  overflow: hidden;
  color: #172554;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect4-player-copy small {
  overflow: hidden;
  margin-top: 2px;
  color: #64748b;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect4-player > em {
  display: flex;
  min-width: 25px;
  flex-direction: column;
  align-items: center;
  padding: 3px;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
  font-style: normal;
}

.connect4-player > em b {
  font-size: 11px;
  line-height: 1;
}

.connect4-player > em small {
  margin-top: 2px;
  font-size: 6px;
}

.connect4-player.is-empty {
  grid-template-columns: 38px minmax(0, 1fr);
  opacity: .72;
}

.connect4-player.is-empty .connect4-player-avatar {
  border: 1px dashed #94a3b8;
  background: #f8fafc;
}

.connect4-round {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #475569;
}

.connect4-round small {
  font-size: 7px;
}

.connect4-round b {
  display: grid;
  width: 30px;
  height: 30px;
  margin: 2px 0;
  place-items: center;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #4f46e5, #2563eb);
  box-shadow: 0 5px 12px rgba(67, 56, 202, .2);
  font-size: 13px;
}

.connect4-round span {
  font-size: 6px;
  white-space: nowrap;
}

.connect4-status {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  gap: 7px;
  margin: 8px 0 6px;
  padding: 6px 9px 9px;
  color: #334155;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
}

.connect4-status.is-mine {
  color: #075985;
  border-color: #7dd3fc;
  background: #f0f9ff;
}

.connect4-status.is-urgent {
  color: #991b1b;
  border-color: #fca5a5;
  background: #fff1f2;
}

.connect4-status-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.connect4-status-copy > i {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: #fff;
  border-radius: 9px;
  background: linear-gradient(145deg, #06b6d4, #2563eb);
}

.connect4-status-copy > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.connect4-status-copy b {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect4-status-copy small {
  margin-top: 2px;
  color: #64748b;
  font-size: 7px;
}

.connect4-clock {
  display: flex;
  min-width: 38px;
  align-items: baseline;
  justify-content: center;
  direction: ltr;
}

.connect4-clock b {
  color: #1d4ed8;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.connect4-status.is-urgent .connect4-clock b {
  color: #dc2626;
  animation: connect4Urgent .65s ease infinite alternate;
}

.connect4-clock small {
  margin-left: 2px;
  color: #64748b;
  font-size: 7px;
}

.connect4-no-clock {
  color: #4f46e5;
  font-size: 22px;
  font-weight: bold;
}

.connect4-clock-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  background: #dbeafe;
}

.connect4-clock-bar i {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #06b6d4, #2563eb);
  transition: width .25s linear;
}

.connect4-status.is-urgent .connect4-clock-bar i {
  background: linear-gradient(90deg, #f97316, #ef4444);
}

.connect4-arena .room-game-connect-wrap {
  position: relative;
  max-width: 360px;
  margin: 0 auto 9px;
  padding: 7px 7px 0;
  direction: ltr;
  border: 1px solid #1e3a8a;
  border-radius: 16px 16px 10px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), transparent 15%),
        linear-gradient(150deg, #2563eb, #3730a3);
  box-shadow: 0 10px 22px rgba(30, 64, 175, .28), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.connect4-column-guides,
.connect4-arena .room-game-connect-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(2px, 1vw, 5px);
}

.connect4-column-guides {
  margin: 0 1px 5px;
}

.connect4-column-guides button {
  position: relative;
  display: grid;
  min-width: 0;
  height: 25px;
  place-items: center;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: rgba(15, 23, 42, .2);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.connect4-column-guides button i {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .24);
}

.connect4-column-guides button:nth-child(even) i {
  background: #fbbf24;
}

.connect4-column-guides button span {
  display: none;
}

.connect4-column-guides button:not(:disabled):hover,
.connect4-column-guides button:not(:disabled):focus {
  background: rgba(255, 255, 255, .2);
  transform: translateY(2px);
  outline: none;
}

.connect4-column-guides button:disabled {
  cursor: default;
  opacity: .32;
}

.connect4-column-guides button.is-full i {
  background: #64748b;
}

.connect4-arena .room-game-connect-board {
  padding: 5px;
  border-radius: 10px 10px 5px 5px;
  background: rgba(15, 23, 42, .13);
  box-shadow: inset 0 3px 8px rgba(15, 23, 42, .18);
}

.connect4-cell {
  position: relative;
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .36);
  box-shadow: inset 0 3px 6px rgba(2, 6, 23, .34), 0 1px 0 rgba(255, 255, 255, .22);
  cursor: pointer;
}

.connect4-cell > i {
  display: block;
  width: 82%;
  height: 82%;
  border: 2px solid rgba(255, 255, 255, .76);
  border-radius: 50%;
  background: linear-gradient(145deg, #f8fafc, #dbe4f0);
  box-shadow: inset 0 -3px 5px rgba(100, 116, 139, .2), 0 2px 4px rgba(15, 23, 42, .2);
}

.connect4-cell.is-red > i {
  border-color: #fecdd3;
  background: radial-gradient(circle at 34% 28%, #fb7185 0 16%, #f43f5e 18% 62%, #be123c 100%);
}

.connect4-cell.is-yellow > i {
  border-color: #fef3c7;
  background: radial-gradient(circle at 34% 28%, #fde047 0 16%, #fbbf24 18% 62%, #d97706 100%);
}

.connect4-cell.is-last > i {
  animation: connect4Drop .32s cubic-bezier(.22, 1.15, .48, 1);
}

.connect4-cell.is-last::after {
  position: absolute;
  width: 25%;
  height: 25%;
  content: "";
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .24);
}

.connect4-cell.is-winning {
  z-index: 1;
}

.connect4-cell.is-winning > i {
  border-color: #fff;
  box-shadow: 0 0 0 3px #22c55e, 0 0 14px 5px rgba(34, 197, 94, .75);
  animation: connect4Win .72s ease infinite alternate;
}

.connect4-cell:disabled {
  cursor: default;
  opacity: 1;
}

.connect4-board-base {
  display: flex;
  height: 10px;
  justify-content: space-between;
  padding: 0 11%;
}

.connect4-board-base span {
  display: block;
  width: 16%;
  height: 10px;
  border-radius: 0 0 7px 7px;
  background: #1e3a8a;
  box-shadow: 0 4px 5px rgba(15, 23, 42, .25);
}

.connect4-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 0 3px;
  color: #64748b;
  font-size: 7px;
  line-height: 1.65;
}

.connect4-hint i {
  margin-top: 1px;
  color: #f59e0b;
  font-size: 11px;
}

.connect4-lobby {
  padding: 13px 10px;
}

.connect4-brand {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.connect4-brand > span {
  display: flex;
  margin-bottom: 7px;
  direction: ltr;
  gap: 3px;
}

.connect4-brand > span i {
  color: #f43f5e;
  font-size: 17px;
  filter: drop-shadow(0 2px 2px rgba(190, 24, 93, .18));
}

.connect4-brand > span i:nth-child(even) {
  color: #fbbf24;
}

.connect4-brand > b {
  color: #172554;
  font-size: 15px;
}

.connect4-brand > small {
  margin-top: 4px;
  color: #64748b;
  font-size: 8px;
}

.connect4-lobby-players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 31px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  margin: 13px 0 10px;
}

.connect4-lobby-players > strong {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #334155;
  font-size: 8px;
}

.connect4-lobby-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.connect4-lobby-rules > span {
  display: flex;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 6px 3px;
  text-align: center;
  border: 1px solid #dbe4f2;
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
}

.connect4-lobby-rules i {
  margin-bottom: 5px;
  color: #4f46e5;
  font-size: 16px;
}

.connect4-lobby-rules b {
  color: #334155;
  font-size: 8px;
}

.connect4-lobby-rules small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 6px;
  line-height: 1.5;
}

.connect4-lobby > p {
  margin: 9px 1px 0;
  padding: 7px;
  color: #475569;
  border-radius: 9px;
  background: rgba(219, 234, 254, .65);
  font-size: 7px;
  line-height: 1.6;
}

.connect4-lobby > p i {
  margin-left: 3px;
  color: #2563eb;
}

.connect4-setup-dialog {
  width: min(94vw, 410px);
  gap: 7px;
  background: radial-gradient(circle at 100% 0, rgba(251, 191, 36, .17), transparent 32%),
        radial-gradient(circle at 0 0, rgba(244, 63, 94, .12), transparent 32%),
        linear-gradient(160deg, #fff, #eef2ff);
}

.connect4-setup-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  gap: 4px;
  width: 92px;
  height: 51px;
  border-radius: 16px;
  background: linear-gradient(145deg, #2563eb, #3730a3);
  box-shadow: 0 10px 24px rgba(30, 64, 175, .25);
}

.connect4-setup-mark i {
  width: 17px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: inset 0 -2px 3px rgba(136, 19, 55, .3);
}

.connect4-setup-mark i:nth-child(even) {
  background: #fbbf24;
}

.connect4-setup-section {
  width: 100%;
  padding: 9px;
  border: 1px solid #dbe4f2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
}

.connect4-setup-section > span {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  margin-bottom: 7px;
}

.connect4-setup-section > span > i {
  display: grid;
  width: 26px;
  height: 26px;
  grid-row: 1 / span 2;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(145deg, #4f46e5, #2563eb);
}

.connect4-setup-section > span b {
  color: #172554;
  font-size: 10px;
}

.connect4-setup-section > span small {
  color: #64748b;
  font-size: 7px;
}

.connect4-setup-options {
  display: grid;
  gap: 5px;
}

.connect4-setup-options.is-timer {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  direction: rtl;
}

.connect4-setup-options.is-first {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.connect4-setup-options button {
  min-width: 0;
  min-height: 34px;
  padding: 4px 2px;
  color: #475569;
  border: 1px solid #dbe4f2;
  border-radius: 9px;
  background: #f8fafc;
  font-size: 8px;
  font-weight: bold;
}

.connect4-setup-options button.active {
  color: #fff;
  border-color: #2563eb;
  background: linear-gradient(145deg, #06b6d4, #4f46e5);
  box-shadow: 0 5px 12px rgba(37, 99, 235, .18);
}

.connect4-setup-options button i {
  margin-left: 2px;
}

.connect4-setup-rules {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.connect4-setup-rules span {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 11px;
  color: #475569;
  background: rgba(224, 231, 255, .62);
}

.connect4-setup-rules i {
  margin-bottom: 3px;
  color: #4f46e5;
  font-size: 14px;
}

.connect4-setup-rules b {
  font-size: 9px;
}

.connect4-setup-rules small {
  margin-top: 2px;
  color: #64748b;
  font-size: 6px;
}

@keyframes connect4Drop {
  from {
    opacity: .25;
    transform: translateY(-45px) scale(.82);
  }

  70% {
    transform: translateY(3px) scale(1.04);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes connect4Win {
  from {
    transform: scale(.9);
    filter: brightness(1);
  }

  to {
    transform: scale(1.05);
    filter: brightness(1.18);
  }
}

@keyframes connect4Urgent {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.13);
  }
}

@media (max-width: 380px) {
  .connect4-arena {
    padding: 7px;
    border-radius: 14px;
  }

  .connect4-scoreboard {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    gap: 3px;
  }

  .connect4-player {
    min-height: 47px;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
  }

  .connect4-player-avatar,
  .connect4-player-avatar img {
    width: 30px;
    height: 30px;
  }

  .connect4-player > em {
    position: absolute;
    top: -4px;
    left: -3px;
    min-width: 20px;
    padding: 2px;
    border-radius: 7px;
  }

  .connect4-player > em b {
    font-size: 9px;
  }

  .connect4-player > em small {
    display: none;
  }

  .connect4-player-copy b {
    font-size: 8px;
  }

  .connect4-player-copy small {
    font-size: 6px;
  }

  .connect4-round b {
    width: 25px;
    height: 25px;
  }

  .connect4-arena .room-game-connect-wrap {
    padding: 5px 5px 0;
  }

  .connect4-column-guides,
  .connect4-arena .room-game-connect-board {
    gap: 2px;
  }

  .connect4-arena .room-game-connect-board {
    padding: 4px;
  }

  .connect4-cell > i {
    border-width: 1px;
  }

  .connect4-lobby-rules > span {
    min-height: 61px;
  }

  .connect4-setup-options.is-timer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .connect4-setup-options.is-first {
    grid-template-columns: 1fr;
  }
}

.room-game-ludo-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #fed7aa;
  border-radius: 13px;
  background: #fff7ed;
}

.room-game-ludo-controls > span {
  flex: 1;
  color: #9a3412;
  font-size: 10px;
  font-weight: bold;
}

.room-game-dice {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #9a3412;
  border: 1px solid #fdba74;
  border-radius: 12px;
  background: #fff;
}

.room-game-dice i {
  font-size: 12px;
}

.room-game-dice b {
  font-size: 18px;
}

.room-game-ludo-controls .is-roll {
  padding: 0 12px;
}

.room-game-ludo-track {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 2px;
  padding: 5px;
  direction: ltr;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #e2e8f0;
}

.room-game-ludo-track > span {
  position: relative;
  display: flex;
  min-width: 0;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  border-radius: 5px;
  background: #fff;
  font-size: 6px;
}

.room-game-ludo-track > span > i {
  position: absolute;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 6px;
  font-style: normal;
}

.room-game-ludo-track i.is-red {
  background: #ef4444;
}

.room-game-ludo-track i.is-yellow {
  color: #713f12;
  background: #facc15;
}

.room-game-ludo-track i.is-green {
  background: #22c55e;
}

.room-game-ludo-track i.is-blue {
  background: #3b82f6;
}

.room-game-ludo-tokens {
  margin-top: 7px;
  padding: 7px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.room-game-ludo-tokens > b {
  display: block;
  margin-bottom: 5px;
  color: #334155;
  font-size: 10px;
}

.room-game-ludo-tokens > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.room-game-ludo-tokens button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
}

.room-game-ludo-tokens button:not(:disabled) {
  border-color: #22c55e;
  background: #dcfce7;
}

.room-game-ludo-tokens button i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #f97316;
  font-style: normal;
}

.room-game-ludo-tokens button span {
  color: #475569;
  font-size: 8px;
}

.room-game-spy-role,
.room-game-spy-help {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 12px;
  border-radius: 14px;
}

.room-game-spy-role {
  color: #fff;
  background: linear-gradient(135deg, #334155, #0f172a);
}

.room-game-spy-role.is-team {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}

.room-game-spy-role > i {
  font-size: 30px;
}

.room-game-spy-role span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.room-game-spy-role b {
  font-size: 14px;
}

.room-game-spy-role small {
  font-size: 9px;
  opacity: .9;
}

.room-game-spy-help {
  align-items: flex-start;
  color: #854d0e;
  border: 1px solid #fde68a;
  background: #fefce8;
  font-size: 9px;
  line-height: 1.7;
}

.room-game-spy-help i {
  font-size: 18px;
}

.room-game-spy-votes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.room-game-spy-votes > b {
  grid-column: 1 / -1;
  padding: 4px;
  color: #334155;
  font-size: 10px;
}

.room-game-spy-votes button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.room-game-spy-votes img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}

.room-game-spy-votes span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #334155;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.room-game-spy-votes em {
  min-width: 22px;
  padding: 2px;
  color: #fff;
  border-radius: 999px;
  background: #7c3aed;
  font-size: 8px;
  font-style: normal;
}

.room-game-spy-guess,
.room-game-draw-guess {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}

.room-game-spy-guess input,
.room-game-draw-guess input {
  min-width: 0;
  height: 37px;
  flex: 1;
  padding: 7px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
}

.room-game-spy-guess button,
.room-game-draw-guess button {
  min-width: 70px;
  color: #fff;
  border: 0;
  border-radius: 9px;
  background: #7c3aed;
  font-weight: bold;
}

.room-game-draw-status {
  display: grid;
  margin: 7px 0;
  padding: 8px;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}

.room-game-draw-status span,
.room-game-draw-status small {
  font-size: 9px;
}

.room-game-draw-status b {
  font-size: 12px;
}

.room-game-draw-status em {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  padding: 4px 7px;
  color: #fff;
  border-radius: 8px;
  background: #2563eb;
  font-size: 12px;
  font-style: normal;
}

.room-game-draw-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.room-game-colors {
  display: flex;
  flex: 1;
  gap: 3px;
}

.room-game-colors button {
  width: 21px;
  height: 21px;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
}

.room-game-colors button.active {
  border-color: #0f172a;
  transform: scale(1.12);
}

.room-game-draw-tools input {
  width: 65px;
}

.room-game-draw-tools > button {
  height: 28px;
  color: #fff;
  border: 0;
  border-radius: 7px;
  background: #ef4444;
  font-size: 9px;
}

#roomGameCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  touch-action: none;
  cursor: crosshair;
  border: 2px solid #cbd5e1;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.room-game-draw-feed {
  display: flex;
  max-height: 105px;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  overflow-y: auto;
}

.room-game-draw-feed > div {
  display: flex;
  gap: 6px;
  padding: 4px 6px;
  color: #475569;
  border-radius: 7px;
  background: #f1f5f9;
  font-size: 8px;
}

.room-game-draw-feed > div.is-correct {
  color: #166534;
  background: #dcfce7;
}

.room-game-inline-notice {
  margin-bottom: 6px;
  padding: 7px;
  color: #fff;
  border-radius: 9px;
  background: #334155;
  font-size: 10px;
}

@media (max-width: 410px) {
  .room-games-grid,
  .room-game-players {
    grid-template-columns: 1fr;
  }

  .room-game-card {
    min-height: 82px;
  }

  .room-game-card-icon {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
  }

  .room-game-ludo-track {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .room-game-spy-votes {
    grid-template-columns: 1fr;
  }
}

/* Traditional Ludo board: four homes, 52-cell track and coloured finish lanes. */

.room-game-ludo-arena {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  margin: 8px auto;
}

.room-game-ludo-board {
  position: relative;
  display: grid;
  width: min(100%, 430px);
  aspect-ratio: 1;
  align-self: center;
  grid-template-rows: repeat(15, minmax(0, 1fr));
  grid-template-columns: repeat(15, minmax(0, 1fr));
  overflow: hidden;
  direction: ltr;
  border: 3px solid #163d74;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 61, 116, .24);
}

.ludo-home {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 9%;
  border: 1px solid rgba(15, 23, 42, .38);
}

.ludo-home.is-red {
  background: #ef2f2f;
}

.ludo-home.is-blue {
  background: #287fc0;
}

.ludo-home.is-yellow {
  background: #ffc516;
}

.ludo-home.is-green {
  background: #11833d;
}

.ludo-home-yard {
  display: grid;
  width: 82%;
  aspect-ratio: 1;
  padding: 14%;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 11%;
  border: 2px solid rgba(15, 23, 42, .55);
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.ludo-home-yard > span {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  border-radius: 50%;
  background: rgba(148, 163, 184, .38);
}

.ludo-home-dot {
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(100, 116, 139, .3);
}

.ludo-home > small {
  position: absolute;
  right: 5px;
  bottom: 3px;
  left: 5px;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  font-weight: bold;
}

.ludo-home > small img {
  width: 17px;
  height: 17px;
  object-fit: cover;
  border: 1px solid #fff;
  border-radius: 50%;
}

.ludo-track-cell,
.ludo-lane-cell {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  color: #94a3b8;
  border: solid #64748b;
  border-width: 0 1px 1px 0;
  background: #fff;
}

.ludo-track-cell.is-safe > b {
  color: #fff;
  text-shadow: 0 0 2px #475569;
  font-size: clamp(7px, 2.8vw, 15px);
}

.ludo-track-cell.is-safe:not(.is-start) {
  background: #cbd5e1;
}

.ludo-track-cell.is-start.is-red,
.ludo-lane-cell.is-red {
  background: #ef2f2f;
}

.ludo-track-cell.is-start.is-blue,
.ludo-lane-cell.is-blue {
  background: #287fc0;
}

.ludo-track-cell.is-start.is-yellow,
.ludo-lane-cell.is-yellow {
  background: #ffc516;
}

.ludo-track-cell.is-start.is-green,
.ludo-lane-cell.is-green {
  background: #11833d;
}

.ludo-track-cell.is-start::after {
  content: "➜";
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  font-size: clamp(8px, 3vw, 17px);
  font-weight: bold;
}

.ludo-center {
  position: relative;
  z-index: 3;
  grid-row: 7 / span 3;
  grid-column: 7 / span 3;
  border: 1px solid #334155;
  background: conic-gradient(from 45deg, #ffc516 0 25%, #11833d 0 50%, #ef2f2f 0 75%, #287fc0 0);
}

.ludo-center::after {
  position: absolute;
  inset: 37%;
  content: "";
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .25);
}

.ludo-center > i {
  display: none;
}

.ludo-piece {
  position: absolute;
  z-index: 5;
  display: grid;
  width: 66%;
  max-width: 18px;
  aspect-ratio: .78;
  place-items: end center;
  padding-bottom: 1px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 48% 48% 38% 38%;
  box-shadow: 0 2px 3px rgba(15, 23, 42, .55);
  text-shadow: 0 1px 1px #000;
  font-size: 6px;
  font-style: normal;
  font-weight: bold;
}

.ludo-piece::before {
  position: absolute;
  top: -15%;
  left: 25%;
  width: 50%;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .4);
}

.ludo-piece.is-red {
  background: linear-gradient(90deg, #991b1b, #ef4444 52%, #7f1d1d);
}

.ludo-piece.is-blue {
  background: linear-gradient(90deg, #1e3a8a, #3b82f6 52%, #172554);
}

.ludo-piece.is-yellow {
  color: #713f12;
  text-shadow: none;
  background: linear-gradient(90deg, #ca8a04, #fde047 52%, #a16207);
}

.ludo-piece.is-green {
  background: linear-gradient(90deg, #166534, #22c55e 52%, #14532d);
}

.ludo-track-cell .ludo-piece:nth-of-type(2),
.ludo-lane-cell .ludo-piece:nth-of-type(2) {
  transform: translate(34%, 22%);
}

.ludo-track-cell .ludo-piece:nth-of-type(3),
.ludo-lane-cell .ludo-piece:nth-of-type(3) {
  transform: translate(-34%, 22%);
}

.ludo-track-cell .ludo-piece:nth-of-type(4),
.ludo-lane-cell .ludo-piece:nth-of-type(4) {
  transform: translate(0, -20%);
}

.ludo-home-yard .ludo-piece {
  width: 78%;
  max-width: 24px;
}

.room-game-ludo-side {
  display: grid;
  align-items: center;
  gap: 6px;
  padding: 7px;
  grid-template-columns: minmax(0, 1fr) 52px 86px;
  border: 1px solid #bfdbfe;
  border-radius: 13px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.ludo-current-player {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.ludo-current-player > img,
.ludo-current-player > i {
  display: grid;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  place-items: center;
  object-fit: cover;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #6366f1;
  box-shadow: 0 0 0 1px #60a5fa;
}

.ludo-current-player > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ludo-current-player small {
  color: #64748b;
  font-size: 7px;
}

.ludo-current-player b {
  overflow: hidden;
  color: #1e3a8a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.ludo-die {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #172554;
  border: 2px solid #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #dbeafe);
  box-shadow: 0 5px 10px rgba(30, 64, 175, .2);
  font-family: Arial, sans-serif;
  font-size: 34px;
  line-height: 1;
}

.room-game-ludo-side .is-roll {
  min-width: 0;
  padding: 5px;
  font-size: 9px;
}

.ludo-move-message {
  margin: 5px 0;
  padding: 6px;
  color: #92400e;
  text-align: center;
  border-radius: 8px;
  background: #fef3c7;
  font-size: 9px;
  font-weight: bold;
}

.room-game-ludo-tokens button.is-red:not(:disabled) {
  border-color: #ef4444;
  background: #fee2e2;
}

.room-game-ludo-tokens button.is-blue:not(:disabled) {
  border-color: #3b82f6;
  background: #dbeafe;
}

.room-game-ludo-tokens button.is-yellow:not(:disabled) {
  border-color: #eab308;
  background: #fef9c3;
}

.room-game-ludo-tokens button.is-green:not(:disabled) {
  border-color: #22c55e;
  background: #dcfce7;
}

.room-game-ludo-tokens button.is-red i {
  background: #ef4444;
}

.room-game-ludo-tokens button.is-blue i {
  background: #3b82f6;
}

.room-game-ludo-tokens button.is-yellow i {
  color: #713f12;
  background: #facc15;
}

.room-game-ludo-tokens button.is-green i {
  background: #22c55e;
}

@media (max-width: 340px) {
  .ludo-home {
    padding: 6%;
  }

  .ludo-home > small {
    display: none;
  }

  .room-game-ludo-side {
    grid-template-columns: minmax(0, 1fr) 46px 75px;
  }

  .ludo-die {
    width: 42px;
    height: 42px;
    font-size: 30px;
  }
}

/* Royal Ludo 3D — multiplayer adaptation of the reference experience. */

#dpnl.roomGamesPanelOpen > .pnhead {
  display: none !important;
}

#dpnl.roomGamesLudoMode > .bg-danger {
  position: relative;
  z-index: 12;
}

#dpnl.roomGamesLudoMode #roomGamesPanel.roomGamesIOS {
  height: calc(100vh - 20px);
  min-height: 0;
  padding: 0;
  color: #fff;
  background: #0f0f1a !important;
}

#dpnl.roomGamesLudoMode .room-games-toolbar {
  display: none;
}

#dpnl.roomGamesLudoMode .room-game-session-head {
  position: absolute;
  z-index: 10;
  top: 7px;
  right: 50%;
  width: min(440px, 44vw);
  min-height: 42px;
  transform: translateX(50%);
  border-color: rgba(240, 192, 64, .25);
  color: #fff;
  background: rgba(26, 26, 46, .88);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
}

#dpnl.roomGamesLudoMode .room-game-session-head > div:nth-child(2) > b {
  color: #f0c040;
  letter-spacing: 1px;
}

#dpnl.roomGamesLudoMode .room-game-session-head > div:nth-child(2) > small {
  color: rgba(255, 255, 255, .65);
}

#dpnl.roomGamesLudoMode .room-game-session-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  color: #1a1000;
  border-color: rgba(240, 192, 64, .65);
  border-radius: 10px;
  background: linear-gradient(145deg, #f0c040, #d4a017);
  font-size: 18px;
}

#dpnl.roomGamesLudoMode .room-game-exit {
  color: #fff;
  border-color: rgba(240, 192, 64, .35);
  background: rgba(255, 255, 255, .06);
}

#dpnl.roomGamesLudoMode .room-game-sound-toggle {
  color: #f0c040;
  border-color: rgba(240, 192, 64, .38);
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

#dpnl.roomGamesLudoMode .room-game-sound-toggle.is-muted {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, .42);
  background: rgba(127, 29, 29, .25);
}

#dpnl.roomGamesLudoMode .room-game-result {
  position: absolute;
  z-index: 11;
  top: 58px;
  right: 50%;
  width: min(430px, 90vw);
  transform: translateX(50%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.royal-ludo-stars,
.royal-ludo-stars::before,
.royal-ludo-stars::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .52;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(240, 192, 64, .9) 0 1px, transparent 1.6px);
  background-position: 0 0, 38px 27px;
  background-size: 74px 74px, 103px 103px;
}

.royal-ludo-stars::before {
  transform: translate(19px, 11px) scale(.72);
  opacity: .38;
}

.royal-ludo-stars::after {
  transform: translate(-31px, 26px) scale(.46);
  opacity: .25;
}

.royal-ludo-shell.is-lobby {
  display: grid;
  place-items: center;
  padding-top: 45px;
}

.royal-ludo-mode {
  position: relative;
  z-index: 3;
  width: min(94vw, 660px);
  padding: 26px;
  border: 1px solid rgba(240, 192, 64, .25);
  border-radius: 22px;
  background: rgba(15, 15, 28, .78);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .52);
  backdrop-filter: blur(9px);
}

.royal-ludo-mode > h3 {
  margin: 18px 0 10px;
  color: #f0c040;
  text-align: center;
  letter-spacing: 2px;
  font-size: 9px;
}

.royal-ludo-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  direction: rtl;
}

.royal-ludo-mode-options.is-single {
  max-width: 310px;
  margin: auto;
  grid-template-columns: 1fr;
}

.royal-ludo-mode-options > div {
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  text-align: center;
  border: 1px solid rgba(240, 192, 64, .22);
  border-radius: 16px;
  background: linear-gradient(145deg, #1e2040, #161628);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .05);
}

.royal-ludo-mode-options > div.is-selected {
  border-color: #f0c040;
  box-shadow: 0 0 0 2px rgba(240, 192, 64, .24), 0 12px 32px rgba(0, 0, 0, .48);
}

.royal-ludo-mode-options i {
  font-size: 29px;
  font-style: normal;
}

.royal-ludo-mode-options b {
  color: #fff;
  font-size: 12px;
}

.royal-ludo-mode-options small {
  color: rgba(255, 255, 255, .48);
  font-size: 8px;
}

.royal-ludo-lobby-players {
  max-width: 430px;
  margin: 18px auto 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}

.royal-ludo-lobby-players > h4 {
  margin: 0 0 8px;
  color: #f0c040;
  text-align: center;
  font-size: 9px;
}

.royal-ludo-lobby-players .royal-ludo-player-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.royal-ludo-layout {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: 1240px;
  align-items: center;
  margin: auto;
  grid-template-columns: 230px minmax(410px, 720px);
  grid-template-areas: "left board";
  justify-content: center;
  gap: 22px;
  direction: ltr;
}

.royal-ludo-panel {
  display: flex;
  min-width: 0;
  align-self: center;
  flex-direction: column;
  gap: 14px;
  direction: rtl;
}

.royal-ludo-panel.is-left {
  grid-area: left;
}

.royal-ludo-card {
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(240, 192, 64, .22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30, 32, 64, .97), rgba(22, 22, 40, .97));
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.royal-ludo-card h4 {
  margin: 0 0 11px;
  color: #f0c040;
  letter-spacing: 2px;
  font-family: "Arial Black", Tahoma, sans-serif;
  font-size: 9px;
}

.royal-ludo-player-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.royal-ludo-player {
  --player-color: #94a3b8;
  position: relative;
  display: flex;
  min-height: 62px;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
        rgba(8, 12, 30, .5);
  box-shadow: inset -4px 0 var(--player-color), 0 5px 14px rgba(0, 0, 0, .18);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.royal-ludo-player.is-current {
  border-color: rgba(240, 192, 64, .82);
  background: linear-gradient(100deg, rgba(240, 192, 64, .16), rgba(255, 255, 255, .025)),
        rgba(8, 12, 30, .72);
  box-shadow: inset -4px 0 var(--player-color), 0 0 0 1px rgba(240, 192, 64, .18), 0 8px 22px rgba(0, 0, 0, .32);
}

.royal-ludo-player.is-red {
  --player-color: var(--rl-red);
}

.royal-ludo-player.is-green {
  --player-color: var(--rl-green);
}

.royal-ludo-player.is-yellow {
  --player-color: var(--rl-yellow);
}

.royal-ludo-player.is-blue {
  --player-color: var(--rl-blue);
}

.royal-ludo-player-avatar {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
}

.royal-ludo-player-avatar img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--player-color), 0 5px 12px rgba(0, 0, 0, .4);
}

.royal-ludo-player-avatar > i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid #17182e;
  border-radius: 50%;
  background: var(--player-color);
  box-shadow: 0 0 9px var(--player-color);
}

.royal-ludo-player-info {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.royal-ludo-player-info > b {
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
}

.royal-ludo-player-info > small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, .53);
  font-size: 8px;
}

.royal-ludo-player-info > small i {
  color: var(--player-color);
  font-size: 8px;
}

.royal-ludo-player-progress {
  display: flex;
  min-width: 68px;
  align-items: flex-end;
  flex-direction: column;
  gap: 4px;
}

.royal-ludo-player-progress > em {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #f0c040;
  font-style: normal;
}

.royal-ludo-player-progress > em strong {
  font-size: 15px;
  line-height: 1;
}

.royal-ludo-player-progress > em small {
  color: rgba(255, 255, 255, .52);
  font-size: 7px;
}

.royal-ludo-player-progress > span {
  display: flex;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, .42);
  font-size: 7px;
  white-space: nowrap;
}

.royal-ludo-player-progress > span > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(148, 163, 184, .7);
}

.royal-ludo-player-progress > span.is-active {
  color: #ffe493;
  font-weight: bold;
}

.royal-ludo-player-progress > span.is-ready {
  color: #86efac;
}

.royal-ludo-player-progress > span.is-ready > i {
  background: #22c55e;
  box-shadow: 0 0 7px rgba(34, 197, 94, .8);
}

.royal-ludo-player-progress > span.is-active > i {
  background: #f0c040;
  box-shadow: 0 0 8px #f0c040;
  animation: royalLudoTurnPulse .85s ease-in-out infinite alternate;
}

@keyframes royalLudoTurnPulse {
  from {
    opacity: .48;
    transform: scale(.8);
  }

  to {
    opacity: 1;
    transform: scale(1.2);
  }
}

.royal-ludo-players-card {
  background: radial-gradient(circle at 100% 0, rgba(240, 192, 64, .11), transparent 38%),
        linear-gradient(145deg, rgba(30, 32, 64, .98), rgba(16, 17, 35, .98));
}

.royal-ludo-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.royal-ludo-card-title h4 {
  margin: 0;
}

.royal-ludo-card-title > span {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  color: #fff1b8;
  border: 1px solid rgba(240, 192, 64, .28);
  border-radius: 999px;
  background: rgba(240, 192, 64, .1);
  font-size: 8px;
  font-weight: bold;
}

.royal-ludo-dice-card {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.royal-ludo-dice-card h4 {
  width: 100%;
}

.royal-ludo-dice-scene {
  width: 64px;
  height: 64px;
  margin: 12px auto 19px;
  perspective: 500px;
}

.royal-ludo-dice-cube {
  position: relative;
  width: 64px;
  height: 64px;
  transform: rotateX(-15deg) rotateY(25deg);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.34, 1.2, .64, 1);
}

.royal-ludo-dice-cube.is-rolled {
  animation: royalLudoDiceRoll .85s cubic-bezier(.34, 1.2, .64, 1);
}

.royal-ludo-dice-cube.show-2 {
  transform: rotateY(-90deg);
}

.royal-ludo-dice-cube.show-3 {
  transform: rotateX(-90deg);
}

.royal-ludo-dice-cube.show-4 {
  transform: rotateX(90deg);
}

.royal-ludo-dice-cube.show-5 {
  transform: rotateY(90deg);
}

.royal-ludo-dice-cube.show-6 {
  transform: rotateY(180deg);
}

@keyframes royalLudoDiceRoll {
  0% {
    transform: rotateX(0) rotateY(0) scale(1);
  }

  35% {
    transform: rotateX(380deg) rotateY(260deg) scale(.94);
  }

  70% {
    transform: rotateX(700deg) rotateY(580deg) scale(1.08);
  }
}

.rl-dface {
  position: absolute;
  display: grid;
  width: 64px;
  height: 64px;
  padding: 9px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  background: linear-gradient(150deg, #fff, #f0f0f0 55%, #d8d8d8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), inset 0 -6px 10px rgba(0, 0, 0, .08);
  backface-visibility: hidden;
}

.rl-dface > i {
  display: block;
  width: 9px;
  height: 9px;
  place-self: center;
  border-radius: 50%;
}

.rl-dface > i.is-pip {
  background: radial-gradient(circle at 35% 30%, #6a1018, #b3192a 55%, #7a1019);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .3);
}

.rl-dface.is-front {
  transform: translateZ(32px);
}

.rl-dface.is-back {
  transform: rotateY(180deg) translateZ(32px);
}

.rl-dface.is-right {
  transform: rotateY(90deg) translateZ(32px);
}

.rl-dface.is-left {
  transform: rotateY(-90deg) translateZ(32px);
}

.rl-dface.is-top {
  transform: rotateX(90deg) translateZ(32px);
}

.rl-dface.is-bottom {
  transform: rotateX(-90deg) translateZ(32px);
}

.royal-ludo-roll {
  min-width: 116px;
  min-height: 38px;
  padding: 8px 14px;
  color: #1a1000;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, #f0c040, #d4a017);
  box-shadow: 0 4px 0 #8b6914, 0 6px 12px rgba(0, 0, 0, .4);
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: bold;
}

.royal-ludo-roll:disabled {
  cursor: not-allowed;
  filter: grayscale(.45);
  opacity: .45;
}

.royal-ludo-dice-card p {
  min-height: 31px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .6);
  text-align: center;
  font-size: 8px;
  line-height: 1.55;
}

.royal-ludo-shell .room-game-ludo-arena {
  width: 100%;
  min-width: 0;
  margin: 0;
  grid-area: board;
}

.royal-ludo-shell .room-game-ludo-board {
  width: min(100%, 720px);
  max-height: calc(100vh - 145px);
  border: 2px solid rgba(240, 192, 64, .42);
  border-radius: 18px;
  background: linear-gradient(135deg, #f5f0e8, #e8e0d0);
  box-shadow: 0 0 0 2px rgba(240, 192, 64, .16), 0 20px 60px rgba(0, 0, 0, .52);
}

.royal-ludo-shell .ludo-home {
  padding: 8%;
  border-color: rgba(0, 0, 0, .34);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .18);
}

.royal-ludo-shell .ludo-home.is-red {
  background: linear-gradient(145deg, #ff6677, #e03040);
}

.royal-ludo-shell .ludo-home.is-green {
  background: linear-gradient(145deg, #4ade80, #22c55e);
}

.royal-ludo-shell .ludo-home.is-yellow {
  background: linear-gradient(145deg, #fcd34d, #f59e0b);
}

.royal-ludo-shell .ludo-home.is-blue {
  background: linear-gradient(145deg, #60a5fa, #3b82f6);
}

.royal-ludo-shell .ludo-home-yard {
  width: 88%;
  padding: 13%;
  border: 2px solid rgba(0, 0, 0, .34);
  border-radius: 15px;
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 0 20px rgba(15, 23, 42, .1), 0 6px 14px rgba(0, 0, 0, .22);
}

.royal-ludo-shell .ludo-home-yard > span {
  background: rgba(15, 23, 42, .13);
}

.royal-ludo-shell .ludo-track-cell,
.royal-ludo-shell .ludo-lane-cell {
  border-color: rgba(61, 51, 40, .47);
  background: linear-gradient(145deg, #fffdf8, #e9e2d6);
  box-shadow: inset 0 1px rgba(255, 255, 255, .7);
}

.royal-ludo-shell .ludo-track-cell.is-safe:not(.is-start) {
  background: linear-gradient(145deg, #fff2b7, #f0c040);
}

.royal-ludo-shell .ludo-track-cell.is-start.is-red,
.royal-ludo-shell .ludo-lane-cell.is-red {
  background: linear-gradient(145deg, #ff6677, #e03040);
}

.royal-ludo-shell .ludo-track-cell.is-start.is-green,
.royal-ludo-shell .ludo-lane-cell.is-green {
  background: linear-gradient(145deg, #4ade80, #22c55e);
}

.royal-ludo-shell .ludo-track-cell.is-start.is-yellow,
.royal-ludo-shell .ludo-lane-cell.is-yellow {
  background: linear-gradient(145deg, #fcd34d, #f59e0b);
}

.royal-ludo-shell .ludo-track-cell.is-start.is-blue,
.royal-ludo-shell .ludo-lane-cell.is-blue {
  background: linear-gradient(145deg, #60a5fa, #3b82f6);
}

.royal-ludo-shell .ludo-center {
  overflow: hidden;
  border-color: rgba(0, 0, 0, .45);
  background: #1a1a28;
}

.royal-ludo-shell .ludo-center > i {
  position: absolute;
  inset: 0;
  display: block;
}

.royal-ludo-shell .ludo-center > i.is-red {
  background: #e03040;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}

.royal-ludo-shell .ludo-center > i.is-green {
  background: #22c55e;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

.royal-ludo-shell .ludo-center > i.is-yellow {
  background: #f59e0b;
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}

.royal-ludo-shell .ludo-center > i.is-blue {
  background: #3b82f6;
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}

.royal-ludo-shell .ludo-center::after {
  z-index: 2;
  inset: 34%;
  content: "★";
  display: grid;
  place-items: center;
  color: #8b6914;
  background: radial-gradient(circle at 35% 25%, #fff8dc, #f0c040);
  font-size: clamp(8px, 1.6vw, 20px);
}

.royal-ludo-shell .ludo-piece {
  width: 73%;
  max-width: 25px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, .5);
  font-size: clamp(5px, .65vw, 9px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.royal-ludo-shell .ludo-piece::before {
  top: 8%;
  left: 15%;
  width: 40%;
  border: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .8), transparent 68%);
  box-shadow: none;
}

.royal-ludo-shell .ludo-piece.is-touchable {
  z-index: 9;
  cursor: pointer;
  outline: 2px solid #fff;
  outline-offset: 2px;
  pointer-events: auto;
  touch-action: manipulation;
  animation: royalLudoTouchablePiece 1s ease-in-out infinite alternate;
}

.royal-ludo-shell .ludo-piece.is-touchable::after {
  position: absolute;
  inset: -42%;
  content: "";
  border: 0;
  border-radius: 50%;
  background: transparent;
}

@keyframes royalLudoTouchablePiece {
  from {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .65), 0 0 7px #f0c040, 2px 3px 4px rgba(0, 0, 0, .5);
  }

  to {
    box-shadow: 0 0 0 4px rgba(240, 192, 64, .6), 0 0 17px #f0c040, 2px 3px 4px rgba(0, 0, 0, .5);
  }
}

.royal-ludo-shell .ludo-piece.is-red {
  background: radial-gradient(circle at 32% 25%, #ff9ba6, #e03040 58%, #991b2b);
}

.royal-ludo-shell .ludo-piece.is-green {
  background: radial-gradient(circle at 32% 25%, #8ef0aa, #22c55e 58%, #15803d);
}

.royal-ludo-shell .ludo-piece.is-yellow {
  background: radial-gradient(circle at 32% 25%, #ffe594, #f59e0b 58%, #b45309);
}

.royal-ludo-shell .ludo-piece.is-blue {
  background: radial-gradient(circle at 32% 25%, #9bc9ff, #3b82f6 58%, #1d4ed8);
}

.royal-ludo-shell .ludo-home > small {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

.royal-ludo-win {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  background: rgba(0, 0, 0, .7);
}

.royal-ludo-win > div {
  display: flex;
  width: min(92vw, 420px);
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 38px;
  text-align: center;
  border: 2px solid rgba(240, 192, 64, .55);
  border-radius: 24px;
  background: linear-gradient(145deg, #1e2040, #161628);
  box-shadow: 0 0 60px rgba(240, 192, 64, .22);
  animation: royalLudoWinPop .48s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: auto;
}

.royal-ludo-win i {
  font-size: 65px;
  font-style: normal;
}

.royal-ludo-win b {
  color: transparent;
  background: linear-gradient(135deg, #f0c040, #fff, #f0c040);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 26px;
}

.royal-ludo-win small {
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
}

.royal-ludo-win button {
  min-width: 150px;
  min-height: 42px;
  margin-top: 8px;
  color: #1a1000;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(145deg, #f0c040, #d4a017);
  box-shadow: 0 4px 0 #8b6914;
  font-size: 11px;
  font-weight: bold;
}

@keyframes royalLudoWinPop {
  from {
    transform: scale(.55);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.royal-ludo-shell .room-game-ludo-tokens {
  margin: 8px 0 0;
  border-color: rgba(240, 192, 64, .26);
  background: rgba(26, 26, 46, .94);
}

.royal-ludo-shell .room-game-ludo-tokens > b {
  color: #f0c040;
}

.royal-ludo-shell .room-game-ludo-tokens button {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
}

.royal-ludo-shell .room-game-ludo-tokens button span {
  color: rgba(255, 255, 255, .72);
}

.royal-ludo-mobile-roll {
  display: none;
}

#dpnl.roomGamesLudoMode .room-game-actions {
  position: relative;
  z-index: 4;
  max-width: 500px;
  margin: 10px auto 20px;
}

@media (max-width: 1000px) {
  .royal-ludo-shell {
    padding-inline: 10px;
  }

  .royal-ludo-layout {
    max-width: 720px;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "board"
            "left";
    gap: 12px;
  }

  .royal-ludo-shell .room-game-ludo-board {
    max-height: none;
  }

  .royal-ludo-panel {
    display: grid;
    align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .royal-ludo-dice-card {
    min-height: 100%;
  }
}

@media (max-width: 560px), (hover: none) and (pointer: coarse) {
  #dpnl.roomGamesLudoMode .room-game-session-head {
    top: 5px;
    width: calc(100vw - 82px);
  }

  .royal-ludo-shell {
    padding: 59px 7px 16px;
  }

  .royal-ludo-mode {
    padding: 13px 10px;
  }

  .royal-ludo-mode-options {
    gap: 7px;
  }

  .royal-ludo-mode-options > div {
    min-height: 91px;
    padding: 8px;
  }

  .royal-ludo-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "board"
            "left"
            "right";
    gap: 9px;
  }

  .royal-ludo-mobile-roll {
    position: sticky;
    z-index: 15;
    top: 0;
    display: grid;
    width: 100%;
    min-height: 54px;
    align-items: center;
    margin: 0 0 9px;
    padding: 7px 12px;
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    gap: 8px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 13px;
    background: linear-gradient(135deg, #3746a7, #243187);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .42);
    font-family: Tahoma, Arial, sans-serif;
    opacity: 1;
    touch-action: manipulation;
  }

  .royal-ludo-mobile-roll > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #1a1000;
    border-radius: 10px;
    background: linear-gradient(145deg, #fff8dc, #f0c040);
    box-shadow: 0 3px 0 #8b6914;
    font-size: 18px;
  }

  .royal-ludo-mobile-roll > b {
    font-size: 11px;
  }

  .royal-ludo-mobile-roll > em {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #172554;
    border-radius: 9px;
    background: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
  }

  .royal-ludo-mobile-roll.is-ready {
    color: #1a1000;
    border-color: #ffe58a;
    background: linear-gradient(145deg, #f9d65c, #e8ad19);
    box-shadow: 0 5px 0 #8b6914, 0 9px 25px rgba(240, 192, 64, .28);
  }

  .royal-ludo-mobile-roll.is-select {
    border-color: rgba(52, 211, 153, .8);
    background: linear-gradient(135deg, #059669, #047857);
  }

  .royal-ludo-mobile-roll:disabled {
    cursor: default;
    opacity: 1;
  }

  .royal-ludo-panel.is-left .royal-ludo-dice-card {
    display: none;
  }

  .royal-ludo-panel {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .royal-ludo-panel > .royal-ludo-card {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }

  .royal-ludo-shell .room-game-ludo-board {
    overflow: hidden;
    contain: layout paint;
  }

  .royal-ludo-card {
    padding: 9px;
    border-radius: 12px;
  }

  .royal-ludo-card h4 {
    margin-bottom: 7px;
    font-size: 8px;
  }

  .royal-ludo-player {
    min-height: 66px;
    padding: 8px 10px;
  }

  .royal-ludo-player-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .royal-ludo-player-avatar img {
    width: 40px;
    height: 40px;
  }

  .royal-ludo-player-info > b {
    font-size: 13px;
  }

  .royal-ludo-player-info > small {
    font-size: 9px;
  }

  .royal-ludo-player-progress {
    min-width: 72px;
  }

  .royal-ludo-player-progress > em strong {
    font-size: 17px;
  }

  .royal-ludo-player-progress > span {
    font-size: 8px;
  }

  .royal-ludo-dice-scene {
    margin: 9px auto 16px;
    transform: scale(.82);
  }

  .royal-ludo-shell .ludo-home > small {
    display: none;
  }
}

/* Profile game challenges and synchronized invitation dialog. */

.profile-game-challenges {
  display: flex;
  width: 100%;
  clear: both;
  gap: 4px;
  padding: 2px;
  direction: rtl;
}

.profile-game-challenges > button {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  padding: 5px 8px;
  color: #171717;
  border: 1px solid #d6d6d6;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff, #f7f7f7);
  box-shadow: 0 2px 7px rgba(15, 23, 42, .06);
  font-family: Tahoma, Arial, sans-serif;
  cursor: pointer;
}

.profile-game-challenges > button:hover,
.profile-game-challenges > button:focus {
  border-color: #81c8ed;
  background: #f4fbff;
  outline: 0;
  transform: translateY(-1px);
}

.profile-game-challenges > button b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.profile-game-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: #fff;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  font-size: 15px;
}

.profile-game-icon.is-ludo {
  background: linear-gradient(145deg, #ffb02e, #16c7bf);
}

.profile-game-icon.is-xo {
  background: linear-gradient(145deg, #38bdf8, #2563eb);
}

.room-game-invite-overlay {
  position: fixed;
  z-index: 100000001;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  direction: rtl;
  background: rgba(7, 13, 28, .72);
  backdrop-filter: blur(7px);
}

.room-game-invite-dialog {
  display: flex;
  width: min(92vw, 390px);
  align-items: center;
  flex-direction: column;
  gap: 9px;
  padding: 25px 20px 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 22px;
  color: #172554;
  background: linear-gradient(155deg, #fff, #eef6ff);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .38);
  animation: roomGameInviteIn .28s cubic-bezier(.2, 1.4, .5, 1);
}

@keyframes roomGameInviteIn {
  from {
    transform: translateY(18px) scale(.9);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.room-game-invite-icon {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  color: #fff;
  border-radius: 21px;
  background: linear-gradient(145deg, #06b6d4, #4f46e5);
  box-shadow: 0 13px 30px rgba(79, 70, 229, .3);
  font-size: 30px;
}

.room-game-invite-dialog h3 {
  margin: 5px 0 0;
  color: #172554;
  font-size: 18px;
}

.room-game-invite-dialog p {
  margin: 0 0 7px;
  color: #64748b;
  font-size: 12px;
}

.room-game-invite-actions {
  display: flex;
  width: 100%;
  gap: 9px;
}

.room-game-invite-actions button {
  min-height: 44px;
  flex: 1;
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-weight: bold;
}

.room-game-invite-actions .is-accept {
  background: linear-gradient(135deg, #10b981, #059669);
}

.room-game-invite-actions .is-reject {
  background: linear-gradient(135deg, #f43f5e, #dc2626);
}

/* Ludo party setup, incoming challenge and synchronized waiting room. */

.room-game-setup-overlay,
.room-game-wait-overlay {
  position: fixed;
  z-index: 100000001;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  direction: rtl;
  background: rgba(5, 9, 23, .77);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.room-game-setup-dialog {
  position: relative;
  display: flex;
  width: min(94vw, 430px);
  max-height: min(88vh, 680px);
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 22px;
  color: #172554;
  background: radial-gradient(circle at 100% 0, rgba(56, 189, 248, .2), transparent 35%),
        linear-gradient(160deg, #fff, #eef5ff);
  box-shadow: 0 30px 85px rgba(0, 0, 0, .45);
  animation: roomGameInviteIn .28s cubic-bezier(.2, 1.4, .5, 1);
  font-family: Tahoma, Arial, sans-serif;
}

.room-game-setup-close {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 11px;
  width: 34px;
  height: 34px;
  color: #fff;
  border: 0;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 6px 15px rgba(239, 68, 68, .25);
}

.room-game-setup-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(145deg, #06b6d4, #4338ca);
  box-shadow: 0 12px 28px rgba(67, 56, 202, .28);
  font-size: 25px;
}

.room-game-setup-dialog h3 {
  margin: 1px 0 0;
  color: #172554;
  font-size: 18px;
}

.room-game-setup-dialog > p {
  max-width: 340px;
  margin: 0 0 3px;
  color: #64748b;
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
}

.room-game-player-counts {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.room-game-player-counts button {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #475569;
  border: 1px solid #d8e2f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .84);
  transition: .18s ease;
}

.room-game-player-counts button b {
  color: #1e3a8a;
  font-size: 19px;
  line-height: 1;
}

.room-game-player-counts button span {
  margin-top: 4px;
  font-size: 9px;
}

.room-game-player-counts button.active {
  color: #fff;
  border-color: #4338ca;
  background: linear-gradient(145deg, #2563eb, #4338ca);
  box-shadow: 0 9px 22px rgba(67, 56, 202, .22);
  transform: translateY(-2px);
}

.room-game-player-counts button.active b {
  color: #fff;
}

.room-game-player-counts button:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.room-game-setup-sub {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  color: #172554;
}

.room-game-setup-sub b {
  font-size: 11px;
}

.room-game-setup-sub span {
  color: #64748b;
  font-size: 8px;
}

.room-game-member-picker {
  display: grid;
  width: calc(100% + 4px);
  max-height: 280px;
  overflow: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 2px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.room-game-member-picker > button {
  display: grid;
  min-width: 0;
  min-height: 56px;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  text-align: right;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
}

.room-game-member-picker > button img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #cbd5e1;
}

.room-game-member-picker > button span {
  min-width: 0;
}

.room-game-member-picker > button b,
.room-game-member-picker > button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-game-member-picker > button b {
  color: #172554;
  font-size: 10px;
}

.room-game-member-picker > button small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 7px;
}

.room-game-member-picker > button > i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #64748b;
  border-radius: 50%;
  background: #edf2f7;
}

.room-game-member-picker > button.selected {
  border-color: #22c55e;
  background: #f0fdf4;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .12);
}

.room-game-member-picker > button.selected > i {
  color: #fff;
  background: #22c55e;
}

.room-game-member-picker > button.locked {
  cursor: default;
}

.room-game-setup-confirm {
  width: 100%;
  min-height: 45px;
  color: #fff;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #2563eb, #4338ca);
  box-shadow: 0 9px 20px rgba(37, 99, 235, .2);
  font-size: 11px;
  font-weight: bold;
}

.room-game-setup-confirm:disabled {
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(.7);
  opacity: .5;
}

.room-game-request-dialog,
.room-game-wait-dialog {
  position: relative;
  display: flex;
  width: min(92vw, 340px);
  max-height: min(88vh, 610px);
  overflow: auto;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px 17px;
  text-align: center;
  border: 1px solid rgba(96, 165, 250, .72);
  border-radius: 16px;
  color: #fff;
  background: radial-gradient(circle at 50% -10%, rgba(59, 130, 246, .45), transparent 42%),
        linear-gradient(160deg, #27379f, #26358c 55%, #1e2a70);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
  animation: roomGameInviteIn .28s cubic-bezier(.2, 1.4, .5, 1);
  font-family: Tahoma, Arial, sans-serif;
}

.room-game-request-dialog {
  width: min(92vw, 320px);
}

.room-game-request-dialog .room-game-request-ribbon,
.room-game-wait-dialog .room-game-request-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #10b981, #38bdf8, #f59e0b, #ef4444);
}

.room-game-request-dialog h3,
.room-game-wait-dialog h3 {
  margin: 0;
  color: #fff;
  font-size: 14px;
}

.room-game-request-dialog p,
.room-game-wait-dialog p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 10px;
}

.room-game-request-count {
  align-self: center;
  padding: 5px 11px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-size: 9px;
}

.room-game-request-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: rgba(255, 255, 255, .8);
  font-size: 8px;
}

.room-game-request-timer i {
  color: #fbbf24;
}

.room-game-request-timer b {
  color: #fff;
  font-size: 15px;
}

.room-game-request-roster {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.room-game-request-roster > div {
  display: grid;
  min-height: 32px;
  grid-template-columns: minmax(0, 1fr) 1px auto;
  align-items: center;
  gap: 8px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 9px;
}

.room-game-request-roster > div > span {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-game-request-roster > div > b {
  height: 14px;
  background: rgba(255, 255, 255, .12);
}

.room-game-request-roster em {
  min-width: 63px;
  padding: 3px 6px;
  text-align: center;
  border-radius: 7px;
  font-style: normal;
  font-size: 7px;
}

.room-game-request-roster em.is-ready {
  color: #bbf7d0;
  background: rgba(34, 197, 94, .18);
}

.room-game-request-roster em.is-waiting {
  color: #fef3c7;
  background: rgba(245, 158, 11, .18);
}

.room-game-request-roster em.is-rejected {
  color: #fecaca;
  background: rgba(239, 68, 68, .18);
}

.room-game-request-roster .is-empty {
  color: rgba(255, 255, 255, .48);
}

.room-game-request-roster .is-empty em {
  background: rgba(255, 255, 255, .06);
}

.room-game-request-dialog .room-game-invite-actions {
  margin-top: 3px;
}

.room-game-request-dialog .room-game-invite-actions button,
.room-game-wait-actions button {
  min-height: 40px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  font-size: 9px;
  font-weight: bold;
}

.room-game-wait-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
}

.room-game-wait-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #38bdf8);
  transition: width .25s ease;
}

.room-game-wait-dialog > small {
  color: rgba(255, 255, 255, .72);
  font-size: 8px;
}

.room-game-wait-actions {
  display: flex;
  gap: 7px;
}

.room-game-wait-actions button {
  flex: 1;
  padding: 6px;
}

.room-game-wait-actions .is-enter {
  background: #16a34a;
}

.room-game-wait-actions .is-more {
  background: #0ea5e9;
}

.room-game-wait-actions .is-cancel {
  background: rgba(255, 255, 255, .12);
}

.room-game-pending-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  color: #1e3a8a;
  background: linear-gradient(135deg, #eff6ff, #ecfeff);
}

.room-game-pending-session > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
}

.room-game-pending-session > span > i {
  grid-row: 1 / span 2;
  color: #0891b2;
  font-size: 20px;
}

.room-game-pending-session b {
  font-size: 11px;
}

.room-game-pending-session small {
  color: #64748b;
  font-size: 8px;
}

.room-game-pending-session button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 7px 12px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  font-size: 9px;
  font-weight: bold;
}

/* Royal Ludo viewport fit: desktop, tablets, phone notches and landscape phones. */

@supports (height: 100dvh) {
  #dpnl.roomGamesLudoMode {
    height: 100dvh !important;
  }

  #dpnl.roomGamesLudoMode #roomGamesPanel.roomGamesIOS {
    height: calc(100dvh - 20px);
  }

  .royal-ludo-shell {
    min-height: calc(100dvh - 20px);
  }

  .royal-ludo-shell .room-game-ludo-board {
    width: min(100%, 720px, calc(100dvh - 145px));
    max-height: none;
  }
}

#dpnl.roomGamesLudoMode {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999998 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  padding: 20px 0 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #0f0f1a !important;
  padding-top: max(20px, env(safe-area-inset-top)) !important;
}

#dpnl.roomGamesLudoMode .room-game-stage {
  min-height: 100%;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.royal-ludo-shell {
  --rl-red: #e03040;
  --rl-green: #22c55e;
  --rl-yellow: #f59e0b;
  --rl-blue: #3b82f6;
  --rl-gold: #f0c040;
  position: relative;
  min-height: calc(100vh - 20px);
  overflow: auto;
  padding: 66px 16px 18px;
  direction: rtl;
  color: #fff;
  background: radial-gradient(circle at 20% 12%, rgba(59, 130, 246, .16), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(224, 48, 64, .12), transparent 32%),
        radial-gradient(ellipse at center, #16213e 0%, #0a0a16 72%);
  font-family: Tahoma, Arial, sans-serif;
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  overscroll-behavior: contain;
}

@media (pointer: coarse) {
  .royal-ludo-roll,
  .room-game-btn,
  .room-game-exit,
  .room-game-sound-toggle {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .room-game-setup-dialog {
    width: min(96vw, 410px);
    max-height: min(92vh, 720px);
    padding: 18px 11px 12px;
    border-radius: 18px;
  }

  .room-game-setup-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 21px;
  }

  .room-game-member-picker {
    max-height: min(40vh, 280px);
    grid-template-columns: 1fr;
  }

  .room-game-member-picker > button {
    min-height: 50px;
  }

  .room-game-request-dialog,
  .room-game-wait-dialog {
    max-height: 90vh;
  }

  .room-game-pending-session {
    align-items: stretch;
    flex-direction: column;
  }

  .room-game-pending-session button {
    width: 100%;
  }

@supports (height: 100dvh) {
    .royal-ludo-shell .room-game-ludo-board {
      width: min(100%, calc(100dvh - 92px));
    }
}
}

@media (max-width: 360px) {
  .profile-game-challenges {
    gap: 2px;
    padding-inline: 1px;
  }

  .profile-game-challenges > button {
    gap: 4px;
    padding-inline: 4px;
  }

  .profile-game-challenges > button b {
    font-size: 9px;
  }

  .profile-game-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .royal-ludo-mode-options {
    grid-template-columns: 1fr;
  }

  .royal-ludo-lobby-players .royal-ludo-player-list {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (min-width: 561px) {
  .room-game-setup-dialog {
    width: min(86vw, 680px);
    max-height: 92vh;
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.4fr);
    grid-template-areas: "icon members"
            "title members"
            "text members"
            "counts members"
            "confirm members";
    align-items: center;
    column-gap: 14px;
  }

  .room-game-setup-icon {
    grid-area: icon;
    justify-self: center;
  }

  .room-game-setup-dialog h3 {
    grid-area: title;
    text-align: center;
  }

  .room-game-setup-dialog > p {
    grid-area: text;
  }

  .room-game-player-counts {
    grid-area: counts;
  }

  .room-game-setup-sub {
    display: none;
  }

  .room-game-member-picker {
    grid-area: members;
    max-height: 78vh;
    grid-template-columns: 1fr;
  }

  .room-game-setup-confirm {
    grid-area: confirm;
  }

  .royal-ludo-shell {
    padding-top: 52px;
    padding-bottom: 8px;
  }

  .royal-ludo-layout {
    max-width: 100%;
    align-items: center;
    grid-template-columns: minmax(150px, 210px) minmax(280px, calc(100dvh - 76px));
    grid-template-areas: "left board";
    gap: 9px;
  }

  .royal-ludo-panel {
    display: flex;
    max-height: calc(100dvh - 78px);
    overflow: auto;
    flex-direction: column;
    gap: 7px;
  }

  .royal-ludo-card {
    padding: 8px;
    border-radius: 10px;
  }

  .royal-ludo-card h4 {
    margin-bottom: 5px;
  }

  .royal-ludo-player {
    padding: 3px;
  }

  .royal-ludo-dice-scene {
    margin: 0 auto 7px;
    transform: scale(.7);
  }

  .royal-ludo-dice-card p {
    display: none;
  }

@supports (height: 100dvh) {
    .royal-ludo-shell .room-game-ludo-board {
      width: min(100%, calc(100dvh - 76px));
    }
}
}

/* الهاتف المرسوم: لعبة كتابة ورسم جماعية أصلية داخل نظام ألعاب الغرفة */

.room-game-card.is-phone {
  color: #fff;
  background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.25) 0 2px, transparent 3px),
        linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #f97316 100%);
}

.room-game-card.is-phone .room-game-card-icon {
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 9px 20px rgba(88,28,135,.25);
}

.drawing-phone-setup-dialog {
  width: min(92vw, 470px);
  overflow: hidden;
  border: 1px solid rgba(124,58,237,.18);
  background: linear-gradient(180deg, #fff 0%, #faf7ff 100%);
}

.drawing-phone-setup-icon {
  width: 78px;
  height: 78px;
  margin: 2px auto 9px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 26px;
  color: #fff;
  font-size: 34px;
  background: linear-gradient(145deg, #7c3aed, #db2777);
  box-shadow: 0 15px 35px rgba(124,58,237,.28);
}

.drawing-phone-setup-icon span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  position: absolute;
  left: -8px;
  bottom: -6px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #7c3aed;
  background: #facc15;
  font-size: 13px;
}

.drawing-phone-setup-dialog h3,
.drawing-phone-setup-dialog > p {
  text-align: center;
}

.drawing-phone-setup-flow {
  margin: 14px 0;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  border-radius: 16px;
  background: #f3e8ff;
}

.drawing-phone-setup-flow span {
  min-width: 54px;
  display: grid;
  gap: 4px;
  justify-items: center;
  color: #581c87;
}

.drawing-phone-setup-flow span i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.drawing-phone-setup-flow span b {
  font-size: 12px;
}

.drawing-phone-setup-flow em {
  color: #c084fc;
  font-style: normal;
}

.drawing-phone-speed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  direction: rtl;
}

.drawing-phone-speed > b {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  color: #4c1d95;
}

.drawing-phone-speed button {
  min-height: 66px;
  padding: 8px 5px;
  display: grid;
  gap: 4px;
  border: 1px solid #ddd6fe;
  border-radius: 13px;
  color: #475569;
  background: #fff;
}

.drawing-phone-speed button strong {
  font-size: 13px;
}

.drawing-phone-speed button small {
  font-size: 9px;
  line-height: 1.45;
}

.drawing-phone-speed button.active {
  color: #fff;
  border-color: #7c3aed;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  box-shadow: 0 8px 18px rgba(124,58,237,.2);
}

.drawing-phone-setup-note {
  margin-top: 12px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  direction: rtl;
  border: 1px solid #e9d5ff;
  border-radius: 13px;
  color: #5b21b6;
  background: #faf5ff;
}

.drawing-phone-setup-note > i {
  font-size: 22px;
}

.drawing-phone-setup-note span {
  display: grid;
  gap: 2px;
}

.drawing-phone-setup-note small {
  color: #7c718c;
  font-size: 10px;
}

.drawing-phone-setup-confirm {
  background: linear-gradient(135deg, #7c3aed, #db2777) !important;
}

.drawing-phone-lobby-times {
  display: flex;
  gap: 8px;
  justify-content: center;
  color: #7c3aed;
}

.drawing-phone-shell {
  min-height: 480px;
  padding: 11px;
  direction: rtl;
  color: #172554;
  background: radial-gradient(circle at 10% 5%, rgba(196,181,253,.48), transparent 25%),
        radial-gradient(circle at 95% 20%, rgba(251,207,232,.55), transparent 28%),
        linear-gradient(180deg, #faf7ff 0%, #f8fafc 100%);
}

.drawing-phone-brand,
.drawing-phone-reveal-head {
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(124,58,237,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.83);
  box-shadow: 0 10px 25px rgba(76,29,149,.08);
}

.drawing-phone-brand > span,
.drawing-phone-reveal-head > span {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 20px;
  background: linear-gradient(145deg, #7c3aed, #ec4899);
}

.drawing-phone-brand > div,
.drawing-phone-reveal-head > div {
  display: grid;
  gap: 3px;
}

.drawing-phone-brand b,
.drawing-phone-reveal-head b {
  color: #4c1d95;
  font-size: 14px;
}

.drawing-phone-brand small,
.drawing-phone-reveal-head small {
  color: #7c718c;
  font-size: 10px;
}

.drawing-phone-progress {
  margin: 10px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  align-items: center;
  font-size: 10px;
}

.drawing-phone-progress > div {
  height: 8px;
  overflow: hidden;
  border-radius: 10px;
  background: #e9d5ff;
}

.drawing-phone-progress > div i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b);
  transition: width .35s ease;
}

.drawing-phone-progress em {
  min-width: 43px;
  padding: 4px 6px;
  text-align: center;
  border-radius: 9px;
  color: #fff;
  background: #4c1d95;
  font: 700 11px monospace;
}

.drawing-phone-progress small {
  grid-column: 1 / -1;
  color: #7c718c;
  text-align: center;
}

.drawing-phone-task {
  padding: 13px;
  border: 1px solid rgba(124,58,237,.14);
  border-radius: 18px;
  text-align: center;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(76,29,149,.09);
}

.drawing-phone-task-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 7px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-size: 23px;
  background: linear-gradient(145deg, #8b5cf6, #ec4899);
}

.drawing-phone-task h3 {
  margin: 5px 0;
  color: #4c1d95;
  font-size: 16px;
}

.drawing-phone-task > p {
  margin: 3px auto 12px;
  color: #7c718c;
  font-size: 10px;
  line-height: 1.6;
}

.drawing-phone-task textarea {
  width: 100%;
  min-height: 92px;
  padding: 12px;
  resize: vertical;
  direction: rtl;
  border: 2px solid #e9d5ff;
  border-radius: 14px;
  outline: none;
  color: #1e293b;
  background: #fff;
}

.drawing-phone-task textarea:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168,85,247,.11);
}

.drawing-phone-text-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8b5cf6;
  font-size: 10px;
}

.drawing-phone-text-meta button,
.drawing-phone-submit {
  min-height: 38px;
  padding: 8px 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  box-shadow: 0 7px 16px rgba(124,58,237,.2);
}

.drawing-phone-prompt {
  margin-bottom: 9px;
  padding: 10px;
  display: flex;
  gap: 9px;
  align-items: center;
  text-align: right;
  border: 1px solid #fde68a;
  border-radius: 14px;
  color: #78350f;
  background: #fffbeb;
}

.drawing-phone-prompt > i {
  color: #f59e0b;
  font-size: 20px;
}

.drawing-phone-prompt span {
  display: grid;
  gap: 3px;
}

.drawing-phone-prompt small {
  color: #a16207;
}

.drawing-phone-prompt b {
  line-height: 1.5;
}

.drawing-phone-tools {
  margin: 7px 0;
  padding: 7px;
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 12px;
  background: #f8fafc;
}

.drawing-phone-colors {
  display: flex;
  gap: 4px;
}

.drawing-phone-colors button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #cbd5e1;
}

.drawing-phone-colors button.active {
  box-shadow: 0 0 0 2px #7c3aed;
  transform: scale(1.08);
}

.drawing-phone-tools label {
  min-width: 80px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.drawing-phone-tools input {
  width: 100%;
}

.drawing-phone-tools > button {
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  color: #475569;
  background: #e2e8f0;
  font-size: 10px;
}

.drawing-phone-tools > button.is-clear {
  color: #be123c;
  background: #ffe4e6;
}

.drawing-phone-canvas-wrap {
  width: 100%;
  overflow: hidden;
  border: 2px solid #ddd6fe;
  border-radius: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.drawing-phone-canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}

.drawing-phone-canvas-wrap.is-preview {
  margin-bottom: 10px;
  pointer-events: none;
}

.drawing-phone-submit {
  width: 100%;
  margin-top: 8px;
}

.drawing-phone-submit:disabled,
.drawing-phone-text-meta button:disabled {
  opacity: .55;
}

.drawing-phone-waiting {
  min-height: 290px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.drawing-phone-waiting-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  color: #fff;
  font-size: 28px;
  background: linear-gradient(145deg, #10b981, #06b6d4);
  box-shadow: 0 14px 30px rgba(6,182,212,.23);
}

.drawing-phone-waiting b {
  color: #0f766e;
  font-size: 16px;
}

.drawing-phone-waiting p {
  max-width: 250px;
  color: #64748b;
  font-size: 11px;
}

.drawing-phone-waiting-dots {
  display: flex;
  gap: 5px;
  direction: ltr;
}

.drawing-phone-waiting-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b5cf6;
  animation: drawingPhonePulse 1s infinite ease-in-out;
}

.drawing-phone-waiting-dots i:nth-child(2) {
  animation-delay: .15s;
}

.drawing-phone-waiting-dots i:nth-child(3) {
  animation-delay: .3s;
}

@keyframes drawingPhonePulse {
  0%, 100% {
    transform: translateY(0);
    opacity: .35;
  }

  50% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.drawing-phone-shell.is-reveal {
  padding-bottom: 22px;
}

.drawing-phone-albums {
  margin: 10px 0;
  padding: 6px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  direction: rtl;
}

.drawing-phone-albums button {
  min-width: 76px;
  padding: 6px;
  display: grid;
  justify-items: center;
  gap: 3px;
  border: 1px solid #e9d5ff;
  border-radius: 13px;
  color: #6b21a8;
  background: #fff;
}

.drawing-phone-albums button.active {
  color: #fff;
  border-color: #7c3aed;
  background: linear-gradient(145deg, #7c3aed, #db2777);
}

.drawing-phone-albums img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
}

.drawing-phone-albums span {
  max-width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.drawing-phone-reveal-nav {
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawing-phone-reveal-nav button {
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  color: #6d28d9;
  background: #ede9fe;
}

.drawing-phone-reveal-nav b {
  color: #7c3aed;
}

.drawing-phone-reveal-list {
  display: grid;
  gap: 10px;
}

.drawing-phone-reveal-entry {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #e9d5ff;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 22px rgba(76,29,149,.07);
}

.drawing-phone-step {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #8b5cf6, #ec4899);
}

.drawing-phone-author {
  display: flex;
  gap: 7px;
  align-items: center;
  padding-left: 34px;
}

.drawing-phone-author img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
}

.drawing-phone-author span {
  display: grid;
}

.drawing-phone-author small {
  color: #94a3b8;
  font-size: 8px;
}

.drawing-phone-author b {
  color: #4c1d95;
  font-size: 11px;
}

.drawing-phone-author em {
  margin-right: auto;
  color: #d97706;
  font-size: 8px;
  font-style: normal;
}

.drawing-phone-reveal-entry blockquote {
  margin: 9px 0 0;
  padding: 13px;
  border: 0;
  border-radius: 13px;
  color: #581c87;
  background: #faf5ff;
  font-size: 13px;
  line-height: 1.65;
}

.drawing-phone-reveal-entry blockquote i {
  margin-left: 6px;
  color: #c084fc;
}

.drawing-phone-reveal-canvas {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
}

.drawing-phone-reveal-canvas canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}

.drawing-phone-album-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: #7c3aed;
}

@media (max-width: 480px) {
  .drawing-phone-shell {
    min-height: calc(100vh - 165px);
    padding: 8px;
  }

  .drawing-phone-speed {
    grid-template-columns: 1fr;
  }

  .drawing-phone-setup-flow {
    gap: 2px;
  }

  .drawing-phone-setup-flow span {
    min-width: 42px;
  }

  .drawing-phone-tools {
    gap: 4px;
  }

  .drawing-phone-colors {
    width: 100%;
    justify-content: center;
  }

  .drawing-phone-colors button {
    width: 28px;
    height: 28px;
  }

  .drawing-phone-task {
    padding: 10px;
  }
}

/* وضع الشاشة الكاملة للهاتف المرسوم، باستخدام نفس حاوية لودو الغامرة. */

#dpnl.roomGamesPhoneMode,
#dpnl.roomGamesPhoneMode #roomGamesPanel.roomGamesIOS {
  color: #fff;
  background: radial-gradient(circle at 12% 12%, rgba(124,58,237,.28), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(236,72,153,.22), transparent 35%),
        #100b22 !important;
}

#dpnl.roomGamesPhoneMode .room-game-session-head {
  width: min(760px, calc(100vw - 92px));
  border-color: rgba(216,180,254,.3);
  background: rgba(46,16,101,.9);
}

#dpnl.roomGamesPhoneMode .room-game-session-head > div:nth-child(2) > b {
  color: #f5d0fe;
}

#dpnl.roomGamesPhoneMode .room-game-session-icon {
  color: #fff;
  border-color: rgba(244,114,182,.7);
  background: linear-gradient(145deg, #7c3aed, #db2777);
}

#dpnl.roomGamesPhoneMode .room-game-sound-toggle {
  color: #f5d0fe;
  border-color: rgba(216,180,254,.42);
}

#dpnl.roomGamesPhoneMode .drawing-phone-shell {
  min-height: calc(100vh - 20px);
  padding: 68px max(14px, env(safe-area-inset-right)) max(88px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow: auto;
  color: #172554;
  background: radial-gradient(circle at 8% 8%, rgba(196,181,253,.6), transparent 25%),
        radial-gradient(circle at 92% 18%, rgba(251,207,232,.65), transparent 26%),
        linear-gradient(160deg, #faf7ff 0%, #fdf2f8 48%, #eef2ff 100%);
}

#dpnl.roomGamesPhoneMode .drawing-phone-shell > .drawing-phone-brand,
#dpnl.roomGamesPhoneMode .drawing-phone-shell > .drawing-phone-progress,
#dpnl.roomGamesPhoneMode .drawing-phone-shell > .drawing-phone-task,
#dpnl.roomGamesPhoneMode .drawing-phone-shell > .drawing-phone-reveal-head,
#dpnl.roomGamesPhoneMode .drawing-phone-shell > .drawing-phone-albums,
#dpnl.roomGamesPhoneMode .drawing-phone-shell > .drawing-phone-reveal-nav,
#dpnl.roomGamesPhoneMode .drawing-phone-shell > .drawing-phone-reveal-list {
  width: min(100%, 860px);
  margin-right: auto;
  margin-left: auto;
}

#dpnl.roomGamesPhoneMode .drawing-phone-shell > .drawing-phone-progress {
  margin-top: 12px;
  margin-bottom: 12px;
}

#dpnl.roomGamesPhoneMode .drawing-phone-task {
  padding: clamp(12px, 2vw, 24px);
}

#dpnl.roomGamesPhoneMode .drawing-phone-canvas-wrap {
  width: min(100%, 760px);
  margin-right: auto;
  margin-left: auto;
}

#dpnl.roomGamesPhoneMode .drawing-phone-submit {
  width: min(100%, 760px);
}

#dpnl.roomGamesPhoneMode .drawing-phone-shell.is-lobby {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
}

#dpnl.roomGamesPhoneMode .drawing-phone-shell.is-lobby > .room-game-lobby,
#dpnl.roomGamesPhoneMode .drawing-phone-shell.is-lobby > .room-game-players {
  width: min(92vw, 720px);
  margin: 0 auto;
}

#dpnl.roomGamesPhoneMode .drawing-phone-shell.is-lobby > .room-game-lobby {
  min-height: 210px;
  padding: 28px;
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 25px 60px rgba(76,29,149,.18);
}

#dpnl.roomGamesPhoneMode .room-game-actions {
  position: fixed;
  z-index: 30;
  right: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(94vw, 620px);
  margin: 0;
  padding: 7px;
  transform: translateX(50%);
  border: 1px solid rgba(216,180,254,.28);
  border-radius: 15px;
  background: rgba(46,16,101,.9);
  box-shadow: 0 12px 32px rgba(15,7,32,.4);
  backdrop-filter: blur(10px);
}

#dpnl.roomGamesPhoneMode .room-game-result {
  border-color: rgba(216,180,254,.35);
  background: rgba(76,29,149,.94);
}

@supports (height: 100dvh) {
  #dpnl.roomGamesPhoneMode .drawing-phone-shell {
    min-height: calc(100dvh - 20px);
  }
}

@media (max-width: 560px) {
  #dpnl.roomGamesPhoneMode .room-game-session-head {
    right: 8px;
    left: 48px;
    width: auto;
    transform: none;
  }

  #dpnl.roomGamesPhoneMode .drawing-phone-shell {
    min-height: calc(100dvh - 20px);
    padding-top: 62px;
    padding-right: 7px;
    padding-left: 7px;
  }

  #dpnl.roomGamesPhoneMode .drawing-phone-shell.is-lobby > .room-game-lobby,
  #dpnl.roomGamesPhoneMode .drawing-phone-shell.is-lobby > .room-game-players {
    width: 100%;
  }
}

/* Multiple independent game sessions inside the same chat room. */

.room-game-active-sessions {
  width: 100%;
  margin: 0 0 10px;
  padding: 9px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fbff, #eef6ff);
  box-shadow: 0 7px 18px rgba(30, 64, 175, .08);
  direction: rtl;
}

.room-game-active-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: #173b75;
}

.room-game-active-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.room-game-active-head b {
  font-size: 11px;
}

.room-game-active-head em {
  padding: 3px 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 9px;
  font-style: normal;
}

.room-game-active-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  overscroll-behavior: contain;
}

.room-game-active-row {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 11px;
  background: #fff;
  color: #172554;
}

.room-game-active-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #2563eb, #4f46e5);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 5px 10px rgba(37, 99, 235, .2);
}

.room-game-active-row.is-ludo .room-game-active-icon {
  background: linear-gradient(145deg, #f97316, #eab308);
}

.room-game-active-row.is-connect4 .room-game-active-icon {
  background: linear-gradient(145deg, #f43f5e, #fbbf24);
}

.room-game-active-row.is-xo .room-game-active-icon {
  background: linear-gradient(145deg, #db2777, #9333ea);
}

.room-game-active-row.is-spy .room-game-active-icon {
  background: linear-gradient(145deg, #0f172a, #334155);
}

.room-game-active-row.is-draw .room-game-active-icon {
  background: linear-gradient(145deg, #059669, #0891b2);
}

.room-game-active-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
}

.room-game-active-copy b,
.room-game-active-copy small,
.room-game-active-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-game-active-copy b {
  font-size: 10px;
}

.room-game-active-copy small {
  color: #64748b;
  font-size: 8px;
}

.room-game-active-copy em {
  color: #2563eb;
  font-size: 8px;
  font-style: normal;
}

.room-game-active-row > button {
  min-width: 61px;
  padding: 7px 6px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(145deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 9px;
  box-shadow: 0 4px 9px rgba(22, 163, 74, .18);
}

.room-game-active-status {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 14px;
}

@media (max-width: 560px) {
  .room-game-active-list {
    grid-template-columns: 1fr;
    max-height: 188px;
  }

  .room-game-active-row {
    min-height: 58px;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (min-width: 561px) {
  .connect4-setup-dialog {
    display: flex;
    width: min(94vw, 560px);
    max-height: 94vh;
    overflow: auto;
    flex-direction: column;
  }

  .connect4-setup-options.is-first {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.waiting-room-status {
    position: fixed;
    z-index: 1000000;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(420px, calc(100vw - 20px));
    padding: 11px 13px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    box-shadow: 0 10px 30px rgba(15,23,42,.32);
    font-family: Tahoma, Arial, sans-serif;
}
.waiting-room-lock {
    flex: 0 0 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    color: #6d28d9;
    background: #fff;
    font-size: 20px;
}
.waiting-room-content {min-width:0;flex:1}
.waiting-room-title,.waiting-room-details,.waiting-room-time {display:block}
.waiting-room-title {font-size:14px;margin-bottom:3px}
.waiting-room-details {font-size:12px;white-space:normal}
.waiting-room-progress {
    height: 5px;
    margin: 7px 0 4px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.25);
}
.waiting-room-progress i {
    display:block;
    height:100%;
    width:0;
    border-radius:inherit;
    background:#fbbf24;
    transition:width .35s ease;
}
.waiting-room-time {font-size:11px;color:#e0e7ff}
.waiting-room-ready {background:linear-gradient(135deg,#059669,#16a34a)}
@media (max-width: 600px) {
    .waiting-room-status {top:60px;padding:9px 10px}
    .waiting-room-lock {flex-basis:36px;height:36px;line-height:36px}
}
.nameEffectsPanel{padding:0!important;overflow-y:auto;background:#f6f7fb!important}.nameEffectsBody{padding:14px}.nameEffectsPreview{display:flex;align-items:center;justify-content:center;min-height:90px;background:#171b2c;border-radius:16px;margin-bottom:14px;overflow:hidden}.nameEffectsPreview span{font-size:24px;font-weight:800;color:#fff;display:inline-block}.nameEffectsBody h3{font-size:16px;margin:14px 0 10px}.nameEffectsGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nameEffectsGrid button{border:1px solid #e1e4ec;background:#fff;border-radius:11px;padding:10px 6px;min-height:46px;color:#252a3d}.nameEffectsGrid button.active{border-color:#7757e8;box-shadow:0 0 0 2px rgba(119,87,232,.18);color:#6041d2}.nameEffectsGrid button span{display:block;height:15px;border-radius:8px;margin-bottom:5px}.nameEffectsGrid button b{font-size:11px}.nameEffectsSave{width:100%;border:0;border-radius:12px;background:linear-gradient(110deg,#7757e8,#dd4b9f);color:#fff;padding:12px;margin-top:14px;font-weight:700}#nameEffectsStatus{text-align:center;min-height:24px;padding-top:8px;color:#536078}.nameFx{display:inline-block;will-change:transform,filter,opacity}.nameFx-gradient{color:transparent!important;background-size:200% auto}
@keyframes nfxPulse{50%{transform:scale(1.12)}}.nameFx-pulse{animation:nfxPulse 1.2s ease-in-out infinite}
@keyframes nfxBounce{50%{transform:translateY(-5px)}}.nameFx-bounce{animation:nfxBounce .8s ease-in-out infinite}
@keyframes nfxShake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}.nameFx-shake{animation:nfxShake .25s linear infinite}
@keyframes nfxSwing{25%{transform:rotate(4deg)}75%{transform:rotate(-4deg)}}.nameFx-swing{transform-origin:top center;animation:nfxSwing 1s ease-in-out infinite}
@keyframes nfxFloat{50%{transform:translateY(-4px)}}.nameFx-float{animation:nfxFloat 1.8s ease-in-out infinite}
@keyframes nfxGlow{50%{filter:drop-shadow(0 0 7px currentColor)}}.nameFx-glow{animation:nfxGlow 1.2s ease-in-out infinite}
@keyframes nfxShine{to{background-position:200% center}}.nameFx-shine{background-image:linear-gradient(90deg,currentColor 20%,#fff 50%,currentColor 80%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;color:transparent!important;animation:nfxShine 1.6s linear infinite}
@keyframes nfxWave{25%{transform:translateY(-3px) rotate(-2deg)}75%{transform:translateY(2px) rotate(2deg)}}.nameFx-wave{animation:nfxWave 1s ease-in-out infinite}
@keyframes nfxRubber{30%{transform:scaleX(1.2) scaleY(.8)}60%{transform:scaleX(.9) scaleY(1.1)}}.nameFx-rubber{animation:nfxRubber 1.3s ease-in-out infinite}
@keyframes nfxFlip{50%{transform:perspective(300px) rotateX(180deg)}}.nameFx-flip{animation:nfxFlip 2s ease-in-out infinite}
@keyframes nfxZoom{50%{transform:scale(.88)}}.nameFx-zoom{animation:nfxZoom 1s ease-in-out infinite}
@keyframes nfxHeart{15%,45%{transform:scale(1.16)}30%,60%{transform:scale(1)}}.nameFx-heartbeat{animation:nfxHeart 1.4s ease-in-out infinite}
@keyframes nfxJelly{25%{transform:skewX(7deg)}50%{transform:skewX(-5deg)}75%{transform:skewX(3deg)}}.nameFx-jelly{animation:nfxJelly 1.2s ease-in-out infinite}
@keyframes nfxTilt{50%{transform:skewX(-8deg)}}.nameFx-tilt{animation:nfxTilt 1.2s ease-in-out infinite}
@keyframes nfxBlink{50%{opacity:.35}}.nameFx-blink{animation:nfxBlink 1s steps(2) infinite}
@keyframes nfxSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}.nameFx-slide{animation:nfxSlide 1.3s ease-in-out infinite}
@keyframes nfxSpark{50%{filter:brightness(1.8) drop-shadow(0 0 4px #ffd54a)}}.nameFx-spark{animation:nfxSpark .75s ease-in-out infinite}
@keyframes nfxNeon{50%{text-shadow:0 0 3px currentColor,0 0 9px currentColor,0 0 15px currentColor}}.nameFx-neon{animation:nfxNeon 1.3s ease-in-out infinite}
@keyframes nfxRainbow{to{filter:hue-rotate(360deg);background-position:200% center}}.nameFx-rainbow{background-image:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);background-size:200% auto;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;animation:nfxRainbow 2s linear infinite}
@keyframes nfxFocus{0%,100%{filter:blur(0)}50%{filter:blur(1px);letter-spacing:1px}}.nameFx-focus{animation:nfxFocus 1.8s ease-in-out infinite}
@media(max-width:480px){.nameEffectsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#dpnl.nameEffectsPanelOpen{width:315px!important;max-width:315px!important}
#nameEffectsPanel.nameEffectsPanel{float:none!important;width:100%!important;max-width:100%!important;min-width:0!important;height:100%!important;box-sizing:border-box!important;overflow-x:hidden!important;overflow-y:auto!important;background:#f6f7fb!important}
#nameEffectsPanel.nameEffectsPanel:not(.active){display:none!important}
#nameEffectsPanel.nameEffectsPanel.active{display:block!important}
#dpnl>#more:not(.active){display:none!important}
#nameEffectsPanel .profileDesignToolbar{position:sticky;top:0;z-index:3;width:100%;min-height:52px;padding:10px 14px;box-sizing:border-box;background:#f6f7fb}
#nameEffectsPanel .profileDesignBack{position:static!important;float:right!important;margin:0!important}
#nameEffectsPanel .nameEffectsBody{clear:both;width:100%;max-width:100%;min-width:0;padding:10px 14px 18px;box-sizing:border-box;overflow-x:hidden}
#nameEffectsPanel .nameEffectsPreview{width:100%;box-sizing:border-box;margin:0 0 14px}
#nameEffectsPanel .nameEffectsBody section{width:100%;box-sizing:border-box}
#nameEffectsPanel .nameEffectsGrid{display:grid!important;width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;box-sizing:border-box}
#nameEffectsPanel .nameEffectsGrid button{width:100%;min-width:0;box-sizing:border-box;overflow-wrap:anywhere}
@media(max-width:480px){#dpnl.nameEffectsPanelOpen{width:315px!important;max-width:100vw!important}#nameEffectsPanel .nameEffectsGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.lonline .chat_pane__user_item.loginProfileDesigned{position:relative;isolation:isolate}
.lonline .chat_pane__user_item.loginProfileDesigned:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.3);pointer-events:none}
.lonline .chat_pane__user_item.loginProfileDesigned .chat_pane__user_item__name,
.lonline .chat_pane__user_item.loginProfileDesigned .chat_pane__user_item__status{text-shadow:0 1px 2px rgba(255,255,255,.9)}
.lonline .chat_pane__user_item__avatar{position:relative;overflow:visible!important}
.lonline .loginProfileFrame{position:absolute;z-index:2;inset:-7px;display:block;background-position:center;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.lonline .username__wrapper.nameFx{max-width:180px;vertical-align:middle}
.profileCardStyleGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%}
.profileCardStyleTile{border:1px solid #d9deea;border-radius:13px;background:#fff;padding:7px;min-width:0;color:#283047}
.profileCardStyleTile.active{border-color:#7857e8;box-shadow:0 0 0 2px rgba(120,87,232,.2)}
.profileCardStyleTile>span{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:62px;border-radius:10px;overflow:hidden;background:#eef1f7}
.profileCardStyleTile>span i{font-size:25px}.profileCardStyleTile>span b{font-size:12px}.profileCardStyleTile>em{display:block;font-style:normal;font-weight:700;padding-top:5px}
.profileCard{position:relative!important;isolation:isolate;border-radius:0!important;overflow:hidden!important;transition:box-shadow .2s,border-color .2s}
.profileCard:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-size:240% 240%;animation:profileCardFlow 5s ease-in-out infinite}
.profileCard>:not(.chat_pane__user_item__flag){position:relative;z-index:1}
.profileCard>.chat_pane__user_item__flag{position:absolute!important;top:.05em!important;right:.05em!important;width:16px!important;height:14px!important;margin-top:1px!important;z-index:3}
@keyframes profileCardFlow{0%,100%{background-position:0 50%;opacity:.65}50%{background-position:100% 50%;opacity:1}}
.profileCard-glass{border:1px solid rgba(180,220,255,.8)!important;box-shadow:inset 0 0 18px rgba(210,235,255,.45),0 0 8px rgba(75,150,255,.35)!important;backdrop-filter:blur(8px)}
.profileCard-glass:after{background:linear-gradient(120deg,rgba(255,255,255,.65),rgba(77,155,255,.16),rgba(255,255,255,.38))}
.profileCard-fire{border:1px solid #ff6a19!important;box-shadow:inset 0 0 18px rgba(255,54,0,.38),0 0 10px rgba(255,84,0,.7)!important}
.profileCard-fire:after{background:radial-gradient(circle at 20% 100%,#ffb000 0,transparent 28%),radial-gradient(circle at 80% 100%,#ff3300 0,transparent 34%),linear-gradient(120deg,rgba(40,0,0,.12),rgba(255,70,0,.5))}
.profileCard-ice{border:1px solid #8cecff!important;box-shadow:inset 0 0 20px rgba(120,225,255,.55),0 0 9px #41cfff!important}
.profileCard-ice:after{background:linear-gradient(135deg,rgba(232,253,255,.8),rgba(43,174,255,.25),rgba(255,255,255,.65))}
.profileCard-neon{border:2px solid #ef4dff!important;box-shadow:0 0 7px #ed48ff,0 0 14px #28cfff,inset 0 0 12px rgba(91,36,255,.34)!important}
.profileCard-neon:after{background:linear-gradient(120deg,rgba(251,45,255,.38),rgba(25,211,255,.28),rgba(111,40,255,.42))}
.profileCard-royal{border:2px solid #d9a928!important;box-shadow:inset 0 0 18px rgba(0,0,0,.55),0 0 9px rgba(218,169,40,.65)!important}
.profileCard-royal:after{background:linear-gradient(135deg,rgba(10,10,12,.68),rgba(204,148,20,.38),rgba(5,5,7,.7))}
.profileCard-cosmic{border:1px solid #b05cff!important;box-shadow:inset 0 0 20px rgba(74,20,145,.5),0 0 10px #8041dc!important}
.profileCard-cosmic:after{background:radial-gradient(circle at 15% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 35%,#fff 0 1px,transparent 2px),linear-gradient(125deg,rgba(25,4,70,.6),rgba(142,42,220,.5),rgba(14,57,145,.45))}
#upro .modal-content.profileCard{background-color:#fff}
.entranceEffectsPanel:not(.active){display:none!important}.entranceEffectsPanel{height:100%;overflow-y:auto;background:#f6f7fb}.entrancePreview{margin:12px 0;padding:22px 10px;text-align:center;color:#fff;background:#10172b;border:2px solid #d4a62a;box-shadow:0 0 18px #d4a62a}.entrancePreview i,.entrancePreview b,.entrancePreview small{display:block}.entrancePreview i{font-size:32px}.entrancePreview b{font-size:22px;margin:7px}.entranceFx{animation:entranceFxPop .8s cubic-bezier(.2,.8,.2,1)}@keyframes entranceFxPop{0%{opacity:0;transform:scale(.45) rotate(-5deg)}70%{transform:scale(1.06)}100%{opacity:1;transform:none}}
.entranceFx-fire,.entranceFx-fire:after{border-color:#ff4b00!important;box-shadow:0 0 28px #ff5a00!important;background:linear-gradient(120deg,#250000,#ff5a00)!important}.entranceFx-cosmic{border-color:#9c5cff!important;box-shadow:0 0 28px #743cff!important;background:linear-gradient(120deg,#12052f,#6725b8,#071e55)!important}.entranceFx-lightning{border-color:#76ddff!important;box-shadow:0 0 30px #16bfff!important;background:linear-gradient(135deg,#061f40,#168cff,#fff)!important}.entranceFx-ice{border-color:#bff8ff!important;box-shadow:0 0 25px #73eaff!important;background:linear-gradient(120deg,#174d72,#8cecff)!important}.entranceFx-neon{border-color:#ff45ed!important;box-shadow:0 0 18px #ff45ed,0 0 30px #28dfff!important;background:linear-gradient(120deg,#251053,#a419b8)!important}.entranceFx-flowers{border-color:#ff9ac8!important;background:linear-gradient(120deg,#7d2450,#ffc1da)!important}.entranceFx-hearts{border-color:#ff476f!important;background:linear-gradient(120deg,#6b0923,#ff668d)!important}.entranceFx-dragon{border-color:#41e66e!important;background:linear-gradient(120deg,#082a14,#147a35)!important}.entranceFx-phoenix{border-color:#ffb000!important;background:linear-gradient(120deg,#610000,#ff7600)!important}.entranceFx-moon{border-color:#cdd8ff!important;background:linear-gradient(120deg,#10152e,#56649b)!important}.entranceFx-storm{border-color:#90a7c0!important;background:linear-gradient(120deg,#101820,#475b70)!important}

.profile-song-icon[style*="block"],.profile-song-icon[style*="inline"]{animation:profileMusicBeat 1.1s ease-in-out infinite}
@keyframes profileMusicBeat{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--profile-theme-color,#6c5ce7) 65%,transparent)}50%{box-shadow:0 0 0 7px transparent;transform:scale(1.08)}}
.profile-song-now{    position: absolute;
    right: 0px;
    bottom: 7px;
    left: 0px;
    height: 44px;
    display: flex !important;
    align-items: center;
    gap: 6px;
    top: 2px;
    padding: 4px 7px;
    color: #fff;
    background: rgba(9, 13, 29, 0.82);
    backdrop-filter: blur(2px);
    z-index: 4;}
.profile-song-now[style*="display:none"]{display:none!important}
.profile-song-now-cover{width:30px;height:30px;object-fit:cover}
.profile-song-now-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;text-align:right}
.profile-song-wave{height:24px;display:flex;align-items:center;gap:2px}
.profile-song-wave i{display:block;width:3px;height:6px;background:var(--profile-theme-color,#9b77ff)}
.profile-song-now.is-playing .profile-song-wave i{animation:profileWave .7s ease-in-out infinite alternate}
.profile-song-now.is-playing .profile-song-wave i:nth-child(2){animation-delay:.12s}.profile-song-now.is-playing .profile-song-wave i:nth-child(3){animation-delay:.24s}.profile-song-now.is-playing .profile-song-wave i:nth-child(4){animation-delay:.36s}.profile-song-now.is-playing .profile-song-wave i:nth-child(5){animation-delay:.48s}
@keyframes profileWave{to{height:23px}}

.profile-avatar-wrap{position:relative}
#moreNameAnimationRow{background:linear-gradient(105deg,#6437d7,#b240e0)!important;color:#fff!important}.thMoreIcoViolet{background:linear-gradient(135deg,#8d5cff,#d45cff)!important}
#morePerfectColorsRow{background:linear-gradient(105deg,#e53682,#8b3be0)!important;color:#fff!important}