@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/quicksand/quicksand-v15-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/quicksand/quicksand-v15-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/quicksand/quicksand-v15-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/quicksand/quicksand-v15-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/quicksand/quicksand-v15-latin-700.woff2") format("woff2");
}
.tooltip {
  display: block !important;
  z-index: 10000;
}
.tooltip .tooltip-inner {
  background: black;
  color: white;
  border-radius: 10px;
  padding: 5px 10px 4px;
  font-size: 12px;
}
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: black;
  z-index: 1;
}
.tooltip[x-placement^=top] {
  margin-bottom: 5px;
}
.tooltip[x-placement^=top] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^=bottom] {
  margin-top: 5px;
}
.tooltip[x-placement^=bottom] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^=right] {
  margin-left: 5px;
}
.tooltip[x-placement^=right] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.tooltip[x-placement^=left] {
  margin-right: 5px;
}
.tooltip[x-placement^=left] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.tooltip.popover .popover-inner {
  background: #f9f9f9;
  color: black;
  padding: 24px;
  border-radius: 5px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.tooltip.popover .popover-arrow {
  border-color: #f9f9f9;
}
.tooltip[aria-hidden=true] {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s, visibility 0.15s;
}
.tooltip[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s;
}

.alert {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 10px;
  display: inline-flex;
  margin-top: 10px;
  margin-bottom: 10px;
}
.alert > .icon {
  float: left;
  width: 10%;
  clear: both;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 11px;
}
.alert > .icon > img {
  margin-left: -4px;
}
.alert > .content {
  float: right;
  width: 90%;
  padding: 13px;
  text-align: left;
}
.alert > .content > b {
  color: #ffffff;
}
.alert > .content > p {
  color: #ffffff;
  font-size: 14px;
}

.alert-danger {
  background-color: #dd3f3f;
}
.alert-danger > .icon {
  background-color: #C43939;
}

.alert-warning {
  background-color: #5ba4dd;
}
.alert-warning > .icon {
  background-color: #365aa3;
}

.alert-success {
  background-color: #59b656;
}
.alert-success > .icon {
  background-color: #4c9c49;
}

a, abbr, acronym, address, applet, area, article, aside, audio, b, base, basefont, bb, bdo, big, blockquote, body,
br, button, canvas, caption, center, cite, code, col, colgroup, command, datagrid, datalist, dd, del, details, dfn,
dialog, dir, div, dl, dt, em, embed, eventsource, fieldset, figure, font, footer, form, frame, frameset, h1 to h6,
head, header, hgroup, hr, html, i, iframe, img, input, ins, isindex, kbd, keygen, label, legend, li, link, map, mark,
menu, meta, meter, nav, noframes, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt,
ruby, s, samp, script, section, select, small, source, span, strike, strong, style, sub, sup, table, tbody, td, textarea,
tfoot, th, thead, time, title, tr, track, tt, u, ul, var, video, wbr, ::after, ::before, :after, :before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #1a2831;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  z-index: 3;
  font-family: "Quicksand", Arial, Helvetica, sans-serif;
  list-style: none;
  outline: none;
  scroll-behavior: smooth;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

img {
  font-size: 0;
}

html {
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

body {
  height: 100%;
}

a, [href], button, input[type=submit], .btn {
  text-decoration: none;
  cursor: pointer;
}

.habbofont,
.habbfont {
  font-family: "Habbofont", "Quicksand", Arial, Helvetica, sans-serif;
}

body .app::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: 200ms ease-in-out all;
  background-color: #3c3f51;
  z-index: -1;
}
body .app[theme=light]::before {
  background-color: #eaeaea;
}
body .app.blur > *:not(.not-blurry) {
  filter: blur(50px);
}
body .website-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 380px;
  background-color: rgba(26, 93, 194, 0.2);
  z-index: -1;
  transition: 200ms ease-in-out all;
  padding-top: 220px;
}
body .website-bg::before {
  content: "";
  background-image: url("../images/head-bg-color.png");
  background-repeat: no-repeat;
  background-position: top center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.2;
  image-rendering: pixelated;
  transition: 200ms ease-in-out all;
}
body .website-bg > .mid {
  /* width: 100%; */
  max-width: 1148px;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px 10px 0 0;
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
}
body .website-bg > .mid::after,
body .website-bg > .mid::before {
  content: "";
  width: 15px;
  height: 15px;
  bottom: 0;
  position: absolute;
  transition: 200ms ease-in-out all;
}
body .website-bg > .mid::after {
  left: -15px;
  border-radius: 0 0 10px 0;
  box-shadow: 2px 2px 0 2px #3c3f51;
}
body .website-bg > .mid::before {
  right: -15px;
  border-radius: 0 0 0 10px;
  box-shadow: -2px 2px 0 2px #3c3f51;
}
body .website-bg[theme=light] {
  background-color: rgba(91, 164, 221, 0.2);
}
body .website-bg[theme=light]::before {
  background-image: url("../images/head-bg-color-light.png");
}
body .website-bg[theme=light] > .mid {
  background-color: #eaeaea;
}
body .website-bg[theme=light] > .mid::after {
  box-shadow: 2px 2px 0 2px #eaeaea;
}
body .website-bg[theme=light] > .mid::before {
  box-shadow: -2px 2px 0 2px #eaeaea;
}
body .page.online {
  width: 100%;
  max-width: 1350px;
  float: none;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  transition: 200ms ease-in-out padding;
}
body .global-box {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
  border-radius: 10px;
  background-color: #282a34;
  box-shadow: none;
  transition: 200ms ease-in-out all;
}
body .global-box > .title {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 18px;
  line-height: 20px;
  padding: 15px;
}
body .global-box > .title.na {
  padding-top: 0;
}
body .global-box.moving-blocks {
  background-color: transparent !important;
  border: 2px dashed #282a34;
  box-shadow: none !important;
}
body .global-box.moving-blocks > .center {
  text-align: center;
  padding: 25px 28px;
  font-size: 14px;
}
body .global-box > .content {
  width: 100%;
  float: left;
  clear: both;
  padding: 0 15px 15px 15px;
}
body .global-box > .content.loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
body .global-box > .content > .error {
  width: 100%;
  float: left;
  clear: both;
}
body .global-box > .content > p {
  color: #ffffff;
  opacity: 0.8;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
body .global-box > .content > p b,
body .global-box > .content > p a,
body .global-box > .content > p u {
  color: rgb(106.584, 163.1234285714, 248.816);
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
body .global-box > .content > p b.black {
  font-weight: bold;
  color: #ffffff;
}
body .global-box > .content > p a {
  text-decoration: underline;
}
body .global-box[theme=light] {
  background-color: #ffffff;
  box-shadow: 0px 0px 0 1px rgba(26, 40, 49, 0.1) inset;
  z-index: 4;
}
body .global-box[theme=light].moving-blocks {
  border: 2px dashed #ffffff;
}
body .global-box[theme=light] > .title {
  color: #3c3f51;
}
body .global-box[theme=light] > .content.loading {
  filter: invert(0);
}
body .global-box[theme=light] > .content > p {
  color: #3c3f51;
}
body .global-box[theme=light] > .content > p b,
body .global-box[theme=light] > .content > p a {
  color: #365aa3;
}
body .global-box[theme=light] > .content > p b.black {
  color: #3c3f51;
}
body .global-loader {
  position: fixed;
  z-index: 999999999;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: #3c3f51;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
body .global-loader::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: calc(50% - 300px);
  left: calc(50% - 300px);
  background-image: url("../images/umbrella.png");
  animation: spin 10s linear infinite;
  background-repeat: no-repeat;
  opacity: 0.5;
}
body .global-loader > img.light {
  display: none;
}
body .global-loader > img.dark {
  display: initial;
}
body .global-loader > span {
  color: #ffffff;
  margin-top: 20px;
}
body .global-loader[theme=light] {
  background-color: #ffffff;
}
body .global-loader[theme=light]::before {
  background-image: url("../images/umbrella-dark.png");
}
body .global-loader[theme=light] > img.dark {
  display: none;
}
body .global-loader[theme=light] > img.light {
  display: initial;
}
body .global-loader[theme=light] > span {
  color: #3c3f51;
}
body form {
  transition: 200ms ease-in-out all;
  opacity: 1;
}
body form.loading {
  opacity: 0.2;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
#site-header {
  width: 100%;
  float: left;
  clear: both;
  z-index: 5;
}
#site-header > .center {
  width: 100%;
  max-width: 1350px;
  float: none;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  transition: 200ms ease-in-out padding;
  height: 220px;
  z-index: 9;
}
#site-header > .center > .logo {
  float: left;
  background-image: url("../images/logo-dark.gif");
  background-repeat: no-repeat;
  background-position: top center;
  transition: 200ms ease-in-out all;
  width: 305px;
  height: 220px;
}
#site-header > .center > ul.navigation {
  padding: 80px 0;
  float: right;
}
#site-header > .center > ul.navigation > li {
  float: left;
  margin-left: 30px;
  height: 60px;
}
#site-header > .center > ul.navigation > li > a,
#site-header > .center > ul.navigation > li > span {
  font-size: 18px;
  text-transform: uppercase;
  line-height: 60px;
  float: left;
  color: #ffffff;
  transition: 150ms ease-in-out color;
  text-shadow: 0 0 5px #3c3f51;
  cursor: pointer;
  font-weight: bold;
}
#site-header > .center > ul.navigation > li > a::after,
#site-header > .center > ul.navigation > li > span::after {
  position: absolute;
  content: "";
  background-color: #282a34;
  z-index: -1;
  left: -10px;
  right: -10px;
  top: 30%;
  height: 35%;
  transform: rotate(-2deg);
  opacity: 0;
  transition: 200ms ease-in-out all;
  border-radius: 5px;
}
#site-header > .center > ul.navigation > li > a:hover::after,
#site-header > .center > ul.navigation > li > span:hover::after {
  opacity: 0.3;
}
#site-header > .center > ul.navigation > li > .sub {
  text-align: left;
  position: absolute;
  top: calc(100% - 10px);
  background-color: #3c3f51;
  border: 2px solid #282a34;
  border-radius: 10px;
  padding: 15px 20px;
  left: 50%;
  right: auto;
  transform: translate(-50%, 0);
  white-space: nowrap;
  display: none;
  transition: 200ms ease-in-out all;
}
#site-header > .center > ul.navigation > li > .sub::after {
  transition: 200ms ease-in-out all;
  content: "";
  position: absolute;
  background-color: #3c3f51;
  top: -7.5px;
  left: 50%;
  margin-left: -7.5px;
  width: 15px;
  height: 15px;
  border-top-right-radius: 50%;
  transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
  box-shadow: 1.7px -1.7px 0 #282a34;
}
#site-header > .center > ul.navigation > li > .sub > li {
  width: 100%;
  float: left;
  clear: both;
  line-height: 30px;
}
#site-header > .center > ul.navigation > li > .sub > li > a {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
#site-header > .center > ul.navigation > li > .sub > li > a.router-link-exact-active.router-link-active, #site-header > .center > ul.navigation > li > .sub > li > a:hover {
  color: #5797f8;
}
#site-header > .center > ul.navigation > li:hover > ul {
  display: block;
}
#site-header > .down {
  width: 87%;
  /* max-width: 1350px; */
  float: none;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  transition: 200ms ease-in-out padding;
}
#site-header > .down > .btn {
  float: left;
  min-height: 50px;
  line-height: 50px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 15px;
  width: 180px;
  text-align: center;
  font-size: 16px;
}
#site-header > .down > .btn > img {
  line-height: 50px;
  vertical-align: middle;
  margin-top: -1px;
}
#site-header > .down > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
#site-header > .down > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
#site-header > .down > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
#site-header > .down > .btn.right {
  float: right;
  padding-left: 20px;
  width: 200px;
  text-align: left;
}
#site-header > .down > .btn.right.after::after {
  content: "";
  width: 40px;
  height: 50px;
  position: absolute;
  background: url("../images/chevron-white.png");
  background-repeat: no-repeat;
  background-position: center center;
  transform: rotate(-180deg);
}
#site-header > .down > .dedibar {
  width: calc(100% - 180px - 200px - 15px - 15px);
  float: left;
  margin-top: 15px;
  height: 50px;
  background-color: #282a34;
  transition: 200ms ease-in-out all;
  border-radius: 20px;
  margin-left: 15px;
}
#site-header > .down > .dedibar > .title {
  position: absolute;
  left: 0;
  top: 0;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  padding: 0 10px 5px 20px;
  background-color: #347ae2;
  transition: 200ms ease-in-out all;
  z-index: 5;
  border-radius: 10px 0 0 10px;
}
#site-header > .down > .dedibar > .title::after {
  content: "";
  right: -20px;
  width: 20px;
  top: 0;
  bottom: 0;
  position: absolute;
  background-image: url("../images/dark-dedicaces.png");
  transition: 200ms ease-in-out all;
  background-repeat: no-repeat;
}
#site-header > .down > .dedibar > marquee {
  z-index: 4;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
#site-header > .down > .dedibar > marquee > .dedi {
  margin-right: 20px;
  display: inline-block;
}
#site-header > .down > .dedibar > marquee > .dedi > b,
#site-header > .down > .dedibar > marquee > .dedi > span {
  font-size: 14px;
  line-height: 50px;
  transition: 200ms ease-in-out all;
}
#site-header > .down > .dedibar > marquee > .dedi > b {
  color: #347ae2;
}
#site-header > .down > .dedibar > marquee > .dedi > span {
  margin-left: 5px;
  color: #ffffff;
}
#site-header > .down > .dedibar > marquee > .dedi > span > img {
  vertical-align: middle;
  margin-top: -4px;
}
#site-header > .down > .dedibar > .add {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 50px;
  background-color: #347ae2;
  background-image: url("../images/light-dedicaces-add.png");
  background-repeat: no-repeat;
  background-position: 11px 14px;
  transition: 200ms ease-in-out all;
  cursor: pointer;
  border-radius: 0 10px 10px 0;
}
#site-header > .down > .dedibar > .add::after {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  bottom: 0;
  width: 15px;
  transition: 200ms ease-in-out all;
  background-image: url("../images/dark-dedicaces-right.png");
}
#site-header > .down.entire > .dedibar {
  border-radius: 10px !important;
}

#site-header[theme=light] {
  width: 100%;
  float: left;
  clear: both;
  z-index: 5;
}
#site-header[theme=light] > .center > .logo {
  background-image: url("../images/logo.gif");
}
#site-header[theme=light] > .center > ul.navigation > li > a,
#site-header[theme=light] > .center > ul.navigation > li > span {
  color: #3c3f51;
  text-shadow: 0 0 5px #eaeaea;
}
#site-header[theme=light] > .center > ul.navigation > li > a::after,
#site-header[theme=light] > .center > ul.navigation > li > span::after {
  background-color: #ffffff;
}
#site-header[theme=light] > .center > ul.navigation > li > .sub {
  background-color: #eaeaea;
  border: 2px solid #ffffff;
}
#site-header[theme=light] > .center > ul.navigation > li > .sub::after {
  background-color: #eaeaea;
  box-shadow: 1.7px -1.7px 0 #ffffff;
}
#site-header[theme=light] > .center > ul.navigation > li > .sub > li > a {
  color: #3c3f51;
}
#site-header[theme=light] > .center > ul.navigation > li > .sub > li > a.router-link-exact-active.router-link-active, #site-header[theme=light] > .center > ul.navigation > li > .sub > li > a:hover {
  color: #365aa3;
}
#site-header[theme=light] > .down > .dedibar {
  background-color: #ffffff;
  box-shadow: 0px 0px 0 1px rgba(26, 40, 49, 0.1) inset;
}
#site-header[theme=light] > .down > .dedibar > .title {
  background-color: #5ba4dd;
  color: #ffffff;
}
#site-header[theme=light] > .down > .dedibar > .title::after {
  background-image: url("../images/light-dedicaces.png");
}
#site-header[theme=light] > .down > .dedibar > marquee > .dedi > b {
  color: #365aa3;
}
#site-header[theme=light] > .down > .dedibar > marquee > .dedi > span {
  color: #3c3f51;
}
#site-header[theme=light] > .down > .dedibar > .add {
  background-color: #5ba4dd;
  background-image: url("../images/light-dedicaces-add.png");
}
#site-header[theme=light] > .down > .dedibar > .add::after {
  background-image: url("../images/light-dedicaces-right.png");
}

#footer {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  background-image: url("../images/infini.png");
  background-position: top center;
  transition: 200ms ease-in-out all;
  background-repeat: no-repeat;
  padding: 70px 0 100px 0;
  margin-top: 50px;
}
#footer > .links {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 30px;
}
#footer > .links > a {
  display: inline-block;
  margin: 0 10px;
  color: #5797f8;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
#footer > p {
  width: 100%;
  float: left;
  clear: both;
  color: #eaeaea;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
#footer > span {
  width: 100%;
  float: left;
  clear: both;
  color: #eaeaea;
  font-weight: 600;
  margin-top: 20px;
  transition: 200ms ease-in-out all;
  font-size: 14px;
}
#footer > span > b {
  font-size: 14px;
  color: #5797f8;
  transition: 200ms ease-in-out all;
}

#footer[theme=light] {
  background-image: url("../images/infini-dark.png");
}
#footer[theme=light] > .links > a {
  color: #365aa3;
}
#footer[theme=light] > p {
  color: #3c3f51;
}
#footer[theme=light] > span {
  color: #3c3f51;
}
#footer[theme=light] > span > b {
  color: #365aa3;
}

.flash-error {
  position: fixed;
  left: 20px;
  bottom: -90px;
  z-index: 30000;
  opacity: 0;
  transition: 500ms ease-in-out all;
}
.flash-error.visible {
  opacity: 1;
  bottom: 20px;
}
.flash-error.bounce {
  animation: 500ms ease-in-out bounce;
}
.flash-error > .box-error {
  margin-top: 15px;
}

.box-error {
  float: left;
  clear: both;
  min-height: 50px;
  background-color: #59b656;
  border-radius: 10px;
  max-width: calc(100vw - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.box-error.error {
  background-color: #dd3f3f;
}
.box-error > span {
  float: left;
  padding: 15px 20px 15px 15px;
  color: #ffffff;
  margin-left: 54px;
}
.box-error > .eva {
  position: absolute;
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  left: 0;
  bottom: 0;
}

@keyframes bounce {
  0%, 100% {
    bottom: 15px;
  }
  50% {
    bottom: 25px;
  }
}
#user-control {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  filter: drop-shadow(0 0 20px #3c3f51);
}
#user-control > .user_actions {
  white-space: nowrap;
  position: absolute;
  bottom: 0;
  background-color: #ffffff;
  transition: 500ms ease-in-out all;
  border-radius: 15px;
  cursor: pointer;
  right: 103px;
}
#user-control > .user_actions.noProfile {
  right: 60px;
}
#user-control > .user_actions > .top {
  width: 100%;
  height: 40px;
  z-index: 3;
  transition: 500ms ease-in-out all;
  border-radius: 15px;
  display: flex;
  align-content: flex-start;
  padding-right: 40px;
}
#user-control > .user_actions > .top > .avatar {
  border-radius: 12px;
  background-color: #347ae2;
  transition: 500ms ease-in-out all;
  height: 54px;
  width: 54px;
  margin-top: -7px;
  margin-left: -7px;
  overflow: hidden;
  text-align: center;
}
#user-control > .user_actions > .top > .avatar > img {
  margin-top: -4px;
}
#user-control > .user_actions > .top > span {
  line-height: 40px;
  color: #3c3f51;
  transition: 500ms ease-in-out all;
  font-size: 14px;
  margin: 0 20px 0 10px;
}
#user-control > .user_actions > .top > .show {
  position: absolute;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #eaeaea;
  transition: 500ms ease-in-out all;
}
#user-control > .user_actions > .top > .show > .chevron {
  transform: rotate(-90deg);
  height: 40px;
  width: 40px;
  background-image: url("../images/chevron-blue.png");
  transition: 500ms ease-in-out all;
  background-repeat: no-repeat;
  background-position: center center;
}
#user-control > .user_actions > ul.nav {
  width: 100%;
  float: left;
  clear: both;
  z-index: 2;
  transition: 500ms ease-in-out all;
  overflow: hidden;
  max-width: 0;
  max-height: 0;
  padding: 0;
}
#user-control > .user_actions > ul.nav > li:not(.logout):not(.admin) {
  width: 100%;
  float: left;
  clear: both;
  cursor: pointer;
  font-size: 14px;
  line-height: 40px;
  border-top: 1px solid #eaeaea;
  transition: 500ms ease-in-out all, 200ms ease-in-out color, 200ms ease-in-out background-color;
  padding-right: 50px;
}
#user-control > .user_actions > ul.nav > li:not(.logout):not(.admin):first-child {
  border-top: 0;
}
#user-control > .user_actions > ul.nav > li:not(.logout):not(.admin):hover {
  color: #347ae2;
}
#user-control > .user_actions > ul.nav > li:not(.logout):not(.admin) > img {
  margin-right: 10px;
  vertical-align: middle;
  margin-top: -1px;
}
#user-control > .user_actions > ul.nav > li.admin {
  width: 100%;
  clear: both;
  float: left;
  min-height: 40px;
  line-height: 40px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 5px;
  margin-bottom: 5px;
}
#user-control > .user_actions > ul.nav > li.admin > img {
  line-height: 40px;
  vertical-align: middle;
  margin-top: -1px;
}
#user-control > .user_actions > ul.nav > li.admin > img {
  margin-left: 5px;
}
#user-control > .user_actions > ul.nav > li.admin:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
#user-control > .user_actions > ul.nav > li.logout {
  width: 100%;
  clear: both;
  float: left;
  min-height: 40px;
  line-height: 40px;
  background-color: #dd3f3f;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 5px;
  margin-bottom: 5px;
}
#user-control > .user_actions > ul.nav > li.logout > img {
  line-height: 40px;
  vertical-align: middle;
  margin-top: -1px;
}
#user-control > .user_actions > ul.nav > li.logout > img {
  margin-left: 5px;
}
#user-control > .user_actions > ul.nav > li.logout:hover {
  background-color: rgb(228.6725663717, 106.3274336283, 106.3274336283);
}
#user-control > .user_actions.active > .top {
  background-color: #eaeaea;
  border-radius: 15px 15px 0 0;
}
#user-control > .user_actions.active > .top > .show > .chevron {
  transform: rotate(90deg);
  border-radius: 12px 0 0 0;
}
#user-control > .user_actions.active > ul.nav {
  padding: 5px 15px 10px 15px;
  max-width: 500px;
  max-height: 500px;
}
#user-control > .btn {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 15px;
  line-height: 40px;
  text-align: center;
  background-color: #ffffff;
  transition: 500ms ease-in-out all;
  padding-top: 2px;
  overflow: hidden;
}
#user-control > .btn[theme=light] {
  background-color: #3c3f51;
}
#user-control > .btn.hidden {
  width: 0;
}

#user-control[theme=light] > .user_actions {
  background-color: #3c3f51;
}
#user-control[theme=light] > .user_actions > .top > .avatar {
  background-color: #5ba4dd;
}
#user-control[theme=light] > .user_actions > .top > span {
  color: #ffffff;
}
#user-control[theme=light] > .user_actions > .top > .show {
  background-color: #282a34;
}
#user-control[theme=light] > .user_actions > .top > .show > .chevron {
  background-image: url("../images/chevron-orange.png");
}
#user-control[theme=light] > .user_actions > ul.nav > li:not(.logout):not(.admin) {
  border-top: 1px solid #282a34;
  color: #ffffff;
}
#user-control[theme=light] > .user_actions > ul.nav > li:not(.logout):not(.admin):first-child {
  border-top: none;
}
#user-control[theme=light] > .user_actions > ul.nav > li:not(.logout):not(.admin):hover {
  color: #5ba4dd;
}
#user-control[theme=light] > .user_actions > ul.nav > li.admin {
  width: 100%;
  clear: both;
  float: left;
  min-height: 40px;
  line-height: 40px;
  background-color: #5ba4dd;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 5px;
  margin-bottom: 5px;
}
#user-control[theme=light] > .user_actions > ul.nav > li.admin > img {
  line-height: 40px;
  vertical-align: middle;
  margin-top: -1px;
}
#user-control[theme=light] > .user_actions > ul.nav > li.admin > img {
  margin-left: 5px;
}
#user-control[theme=light] > .user_actions > ul.nav > li.admin:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
#user-control[theme=light] > .user_actions.active > .top {
  background-color: #282a34;
}

#switch-theme {
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: #ffffff;
  background-image: url("../images/go-to-mode-light.png");
  background-position: center center;
  background-repeat: no-repeat;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  width: 40px;
  transition: 500ms ease-in-out all;
  z-index: 999;
  cursor: pointer;
}
#switch-theme.user {
  position: relative;
  float: left;
  top: 0;
  left: 0;
  border-radius: 15px;
}

#switch-theme[theme=light] {
  background-color: #3c3f51;
  background-image: url("../images/go-to-mode-dark.png");
}

#modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 998;
}
#modal:after {
  content: "";
  z-index: -1;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
#modal.visible {
  display: block;
}
#modal > .center {
  width: 100%;
  max-width: 450px;
  float: left;
  clear: both;
  margin-left: calc(50% - 450px / 2);
  transition: 200ms ease-in-out padding;
  width: 450px;
}
#modal > .center > .close {
  float: right;
  width: 35px;
  height: 35px;
  margin-top: 117px;
  background-color: #dd3f3f;
  color: #ffffff;
  border-radius: 10px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
  font-size: 17px;
  cursor: pointer;
}
#modal > .center > .modal-box {
  float: left;
  width: 400px;
  margin: 97px 0 200px 0;
}

#pagination {
  width: 100%;
  float: left;
  clear: both;
  display: flex;
  border-radius: 10px;
  justify-content: center;
}
#pagination * {
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
}
#pagination .prev-item,
#pagination .next-item {
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
}
#pagination .prev-link-item,
#pagination .next-link-item {
  padding: 0 15px;
}
#pagination .prev-item {
  border-radius: 10px 0 0 10px;
}
#pagination .next-item {
  border-radius: 0 10px 10px 0;
}
#pagination .page-item {
  border: 1px solid #3c3f51;
  transition: 200ms ease-in-out all;
  border-left: none !important;
}
#pagination .page-item > a {
  padding: 0 15px;
  float: left;
}
#pagination .page-item.active > a {
  color: #347ae2;
  transition: 200ms ease-in-out all;
}

#pagination[theme=light] * {
  color: #3c3f51;
}
#pagination[theme=light] .prev-item,
#pagination[theme=light] .next-item {
  background-color: #eaeaea;
}
#pagination[theme=light] .page-item {
  border: 1px solid #eaeaea;
}
#pagination[theme=light] .page-item.active > a {
  color: #365aa3;
}

.select-options {
  width: 100%;
  float: left;
  clear: both;
  z-index: 80;
  background-color: #3c3f51;
  border-radius: 10px;
  height: 50px;
  cursor: pointer;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.select-options > .select-button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 0 20px;
}
.select-options > .select-button > span {
  float: left;
  color: #ffffff;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: 200ms ease-in-out all;
}
.select-options > .select-button > .chevron {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background-image: url("../images/chevron-blue.png");
  transition: 200ms ease-in-out all;
  background-position: center center;
  background-repeat: no-repeat;
  transform: rotate(90deg);
  transition: 200ms ease-in-out all;
}
.select-options > .select-button > .chevron.up {
  transform: rotate(-90deg);
}
.select-options > .options {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(100% - 10px);
  background-color: rgb(68.6808510638, 72.114893617, 92.7191489362);
  transition: 200ms ease-in-out all;
  border-radius: 10px;
  box-shadow: 0 0 20px #3c3f51;
  border: 1px solid transparent;
}
.select-options > .options > span {
  width: 100%;
  float: left;
  clear: both;
  border-bottom: 1px solid #3c3f51;
  transition: 200ms ease-in-out all;
  color: #eaeaea;
  font-size: 14px;
  line-height: 40px;
  padding: 0 20px;
}
.select-options > .options > span:last-child {
  border-bottom: none;
}
.select-options > .options > span.selected, .select-options > .options > span:hover {
  color: #5797f8;
}

.select-options[theme=light] {
  width: 100%;
  float: left;
  clear: both;
  background-color: #eaeaea;
  border-color: #ddd;
}
.select-options[theme=light] > .select-button > span {
  color: #3c3f51;
}
.select-options[theme=light] > .select-button > .chevron {
  background-image: url("../images/chevron-orange.png");
}
.select-options[theme=light] > .options {
  box-shadow: none;
  border-color: #ddd;
  background-color: rgb(244.2, 244.2, 244.2);
}
.select-options[theme=light] > .options > span {
  border-bottom: 1px solid #eaeaea;
  color: #3c3f51;
}
.select-options[theme=light] > .options > span.selected, .select-options[theme=light] > .options > span:hover {
  color: #5ba4dd;
}

.mb-surprise > .content {
  padding-top: 15px !important;
}
.mb-surprise > .content > .badges {
  width: 100%;
  float: left;
  clear: both;
  display: flex;
  justify-content: center;
}
.mb-surprise > .content > .badges > .badge {
  margin-top: 0;
  float: initial;
  background: #3c3f51;
  width: 20%;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 10px;
  text-align: center;
  line-height: 45px;
  transition: 200ms ease-in-out all;
  height: 90px;
}
.mb-surprise > .content > .badges > .badge:first-child {
  margin-left: 0;
}
.mb-surprise > .content > .badges > .badge > span {
  width: 100%;
  float: left;
  clear: both;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 0;
  line-height: 30px;
  border-radius: 0 0 10px 10px;
  background-color: rgb(81.7021276596, 85.7872340426, 110.2978723404);
  font-size: 14px;
  color: #eaeaea;
  transition: 200ms ease-in-out all;
}
.mb-surprise > .content > .badges > .badge > img {
  vertical-align: middle;
  margin: 10px 0;
}
.mb-surprise > .content > .button {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 15px;
}
.mb-surprise > .content > .button > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.mb-surprise > .content > .button:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.mb-surprise > .content > .button[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.mb-surprise > .content > .button[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.mb-surprise[theme=light] > .content > .badges > .badge {
  background: #eaeaea;
}
.mb-surprise[theme=light] > .content > .badges > .badge > span {
  color: #3c3f51;
  background-color: rgb(208.5, 208.5, 208.5);
}

.panel-moving-blocks {
  position: fixed;
  right: -400px;
  top: 0;
  bottom: 0;
  width: 400px;
  z-index: 9999;
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
  border-left: 2px solid #282a34;
}
.panel-moving-blocks.visible {
  right: 0;
}
.panel-moving-blocks > .title {
  width: 100%;
  float: left;
  clear: both;
  background-color: #347ae2;
  transition: 200ms ease-in-out all;
  line-height: 50px;
  padding-left: 20px;
  color: #ffffff;
  background-image: url("../images/room-dark.png");
  background-repeat: no-repeat;
  background-position: right center;
}
.panel-moving-blocks > .title > .close {
  float: right;
  cursor: pointer;
  line-height: 50px;
  padding: 0 30px;
}
.panel-moving-blocks > .content {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(100vh - 50px);
  top: 50px;
  overflow: auto;
  padding: 0 15px 90px 15px;
}
.panel-moving-blocks > .content::-webkit-scrollbar {
  width: 0;
}
.panel-moving-blocks > .content > p {
  color: #ffffff;
  opacity: 0.8;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  margin-top: 12px;
}
.panel-moving-blocks > .content > p b,
.panel-moving-blocks > .content > p a {
  color: #5797f8;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.panel-moving-blocks > .content > p a {
  text-decoration: underline;
}
.panel-moving-blocks > .content button {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 15px;
}
.panel-moving-blocks > .content button > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.panel-moving-blocks > .content button:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.panel-moving-blocks > .content button[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.panel-moving-blocks > .content button[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.panel-moving-blocks > .content button.reset {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #dd3f3f;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.panel-moving-blocks > .content button.reset > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.panel-moving-blocks > .content button.reset:hover {
  background-color: rgb(228.6725663717, 106.3274336283, 106.3274336283);
}
.panel-moving-blocks > .content button.reset[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.panel-moving-blocks > .content button.reset[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.panel-moving-blocks > .content .global-box {
  cursor: move;
}
.panel-moving-blocks > .content .global-box .content {
  display: none;
}
.panel-moving-blocks > .content .global-box .title.na {
  display: none;
}

.panel-moving-blocks[theme=light] {
  background-color: #eaeaea;
  border-left: 2px solid #ffffff;
}
.panel-moving-blocks[theme=light] > .title {
  background-color: #6ebff3;
  background-image: url("../images/room-light.png");
}
.panel-moving-blocks[theme=light] > .content > p {
  color: #3c3f51;
}
.panel-moving-blocks[theme=light] > .content > p b,
.panel-moving-blocks[theme=light] > .content > p a {
  color: #365aa3;
}

.mb-thanks > .content {
  padding-top: 15px !important;
  width: calc(100% + 15px) !important;
}
.mb-thanks > .content > img {
  max-width: calc(100% - 15px);
}
.mb-thanks > .content > .description {
  padding-right: 15px;
  padding-bottom: 15px;
}
.mb-thanks > .content > .user {
  width: calc(33.3333333333% - 15px);
  margin-right: 15px;
  float: left;
}
.mb-thanks > .content > .user > img {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 10px;
}
.mb-thanks > .content > .user > span {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.mb-thanks > .content > .user > .stats > span {
  width: 100%;
  float: left;
  clear: both;
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 5px;
  line-height: 20px;
  transition: 200ms ease-in-out all;
}
.mb-thanks > .content > .user > .stats > span > img {
  float: left;
  margin-right: 10px;
}

.mb-thanks[theme=light] > .content > .user > span {
  color: #3c3f51;
}
.mb-thanks[theme=light] > .content > .user > .stats > span {
  color: #3c3f51;
}

.toggle-radio {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: auto;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 15px;
  cursor: pointer;
}
.toggle-radio > .stop {
  float: left;
  width: 40px;
  height: 40px;
  background-image: url("../images/hotel/radio_close.png");
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.toggle-radio > .stop.visible {
  background-image: url("../images/hotel/radio.png");
}
.toggle-radio > .vue-slider {
  transition: 200ms ease-in-out width;
}
.toggle-radio > .radiourl {
  float: right;
  width: 40px;
  cursor: pointer;
  height: 40px;
  background-image: url("../images/hotel/radio_logo.png");
  background-size: 50%;
  background-position: center center;
  background-repeat: no-repeat;
}
.toggle-radio > .audio {
  display: none;
}
.toggle-radio.enabled > .vue-slider {
  width: 0px !important;
}
.toggle-radio:not(.enabled) > .vue-slider {
  width: 100px !important;
  padding: 18px 5px 0 7px !important;
  float: left;
}
.toggle-radio:not(.enabled) > .vue-slider > .vue-slider-rail {
  height: 4px;
  background-color: #eaeaea;
  border-radius: 10px;
}
.toggle-radio:not(.enabled) > .vue-slider > .vue-slider-rail > .vue-slider-process {
  background-color: #1a5dc2;
  border-radius: 10px;
}
.toggle-radio:not(.enabled) > .vue-slider > .vue-slider-rail > .vue-slider-dot {
  width: 10px;
  height: 10px;
  background-color: #3c3f51;
  border-radius: 10px;
}

.page.create {
  width: 100%;
  float: left;
  clear: both;
  height: 100vh;
  z-index: -1;
}
.page.create > .backgrounds {
  position: fixed;
  height: 100%;
  width: 100%;
  transition: 500ms ease-in-out all;
  background-image: url("../images/stars.png");
  z-index: -1;
}
.page.create > .backgrounds > .image {
  transition: 500ms ease-in-out all;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.page.create > .backgrounds > .image.visible {
  opacity: 1;
}
.page.create > .backgrounds > .image.dark-one {
  background-image: url("../images/bg-one-mode-dark.png");
  background-position: right bottom;
  background-repeat: no-repeat;
}
.page.create > .backgrounds > .image.dark-two {
  background-image: url("../images/bg-two-mode-dark.png");
  background-position: left bottom;
  background-repeat: no-repeat;
}
.page.create > .backgrounds > .image.light-one {
  background-image: url("../images/bg-one-mode-light.png");
  background-position: right bottom;
  background-repeat: no-repeat;
}
.page.create > .backgrounds > .image.light-two {
  background-image: url("../images/bg-two-mode-light.png");
  background-position: left bottom;
  background-repeat: no-repeat;
}
.page.create > .backgrounds > .image.light-three {
  background-image: url("../images/bg-three-mode-light.png");
  background-position: left top;
  background-repeat: no-repeat;
}
.page.create > .center {
  width: 100%;
  max-width: 700px;
  float: left;
  clear: both;
  margin-left: calc(50% - 700px / 2);
  transition: 200ms ease-in-out padding;
  width: 700px;
  margin-top: 220px;
}
.page.create > .center > .logo {
  position: absolute;
  right: 60px;
  top: -95px;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step {
  width: 100%;
  float: left;
  clear: both;
  background-color: #282a34;
  background-image: url("../images/dark-isometric-tiles.png");
  background-position: bottom left;
  background-repeat: repeat-x;
  border-radius: 20px;
  padding: 30px;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .title {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 30px;
}
.page.create > .center > .step > .title > h1 {
  width: 100%;
  float: left;
  clear: both;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 10px;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .title > p {
  width: 100%;
  float: left;
  clear: both;
  color: #eaeaea;
  opacity: 0.8;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .avatar {
  position: absolute;
  width: 66px;
  height: 117px;
  background-image: url("../images/dark-plate.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  left: 31px;
  bottom: 27px;
  text-align: center;
  transition: 500ms ease-in-out all;
  opacity: 1;
}
.page.create > .center > .step > .avatar > img {
  float: left;
}
.page.create > .center > .step > .right {
  float: right;
  width: calc(100% - 64px - 40px);
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .right.noavatar {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 20px;
}
.page.create > .center > .step > .right > .input {
  float: left;
  width: calc(50% - 10px);
}
.page.create > .center > .step > .right > .input.top {
  margin-bottom: 20px;
}
.page.create > .center > .step > .right > .input.right {
  margin-left: 20px;
}
.page.create > .center > .step > .right > .input.full {
  width: 100%;
  float: left;
  clear: both;
}
.page.create > .center > .step > .right > .input > input {
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .right > .input > p {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 12px;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .right > .input > p > a {
  color: #eaeaea;
  font-size: 12px;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .right > .input > input[type=text],
.page.create > .center > .step > .right > .input > input[type=email],
.page.create > .center > .step > .right > .input > input[type=date],
.page.create > .center > .step > .right > .input > input[type=password] {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 20px;
  line-height: 45px;
  height: 45px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  border: 1px solid #ffffff;
  background-color: #282a34;
}
.page.create > .center > .step > .right > .input > input[type=submit] {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 20px;
  background-color: #347ae2;
  height: 45px;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 15px;
  text-transform: uppercase;
  font-feature-settings: "ordn" on;
}
.page.create > .center > .step > .right > .gender {
  float: left;
  width: calc(50% - 20px);
  margin-bottom: 20px;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .right > .gender.right {
  float: right;
}
.page.create > .center > .step > .right > .gender > h1 {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 18px;
  transition: 500ms ease-in-out all;
  margin-bottom: 20px;
}
.page.create > .center > .step > .right > .gender > .look {
  float: left;
  width: calc(33.3333333333% - 6.6666666667px - 6.6666666667px);
  margin-right: 20px;
  background-color: #282a34;
  box-shadow: 0 0 0 2px #3c3f51;
  border-radius: 20px;
  height: 64px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .step > .right > .gender > .look.selected {
  box-shadow: 0 0 0 2px #347ae2;
}
.page.create > .center > .step > .right > .gender > .look:last-child {
  margin-right: 0px;
}
.page.create > .center > .step > .right > .gender > .look > img {
  margin-top: -5px;
}
.page.create > .center > .down {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 220px;
}
.page.create > .center > .down > span {
  width: 100%;
  float: left;
  clear: both;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 5px;
  transition: 500ms ease-in-out all;
}
.page.create > .center > .down > a {
  font-size: 14px;
  color: #347ae2;
  transition: 500ms ease-in-out all;
}

.page.create[theme=light] > .backgrounds {
  background-color: #eaeaea;
  background-image: none;
  top: 0;
  position: fixed;
}
.page.create[theme=light] > .center > .step {
  box-shadow: 0 0 10px rgba(60, 63, 81, 0.1);
  background-color: #ffffff;
  background-image: url("../images/light-isometric-tiles.png");
}
.page.create[theme=light] > .center > .step > .title > h1,
.page.create[theme=light] > .center > .step > .title > p {
  color: #3c3f51;
}
.page.create[theme=light] > .center > .step > .avatar {
  background-image: url("../images/light-plate.png");
}
.page.create[theme=light] > .center > .step > .right > .input > p {
  color: #3c3f51;
}
.page.create[theme=light] > .center > .step > .right > .input > p > a {
  color: #282a34;
}
.page.create[theme=light] > .center > .step > .right > .input > input[type=text],
.page.create[theme=light] > .center > .step > .right > .input > input[type=email],
.page.create[theme=light] > .center > .step > .right > .input > input[type=date],
.page.create[theme=light] > .center > .step > .right > .input > input[type=password] {
  color: #3c3f51;
  border: 1px solid #3c3f51;
  background-color: #ffffff;
}
.page.create[theme=light] > .center > .step > .right > .input > input[type=submit] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.create[theme=light] > .center > .step > .right > .gender > h1 {
  color: #3c3f51;
}
.page.create[theme=light] > .center > .step > .right > .gender > .look {
  background-color: #ffffff;
  box-shadow: 0 0 0 2px #eee;
}
.page.create[theme=light] > .center > .step > .right > .gender > .look.selected {
  box-shadow: 0 0 0 2px #5ba4dd;
}
.page.create[theme=light] > .center > .down > span {
  font-weight: 600;
  color: #3c3f51;
}
.page.create[theme=light] > .center > .down > a {
  color: #365aa3;
}

.page.login {
  width: 100%;
  float: left;
  clear: both;
  height: 100vh;
  z-index: -1;
}
.page.login > .backgrounds {
  position: absolute;
  height: 100%;
  width: 100%;
  transition: 500ms ease-in-out all;
  background-image: url("../images/stars.png");
}
.page.login > .backgrounds > .image {
  transition: 500ms ease-in-out all;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.page.login > .backgrounds > .image.visible {
  opacity: 1;
}
.page.login > .backgrounds > .image.dark-one {
  background-image: url("../images/bg-one-mode-dark.png");
  background-position: right bottom;
  background-repeat: no-repeat;
}
.page.login > .backgrounds > .image.dark-two {
  background-image: url("../images/bg-two-mode-dark.png");
  background-position: left bottom;
  background-repeat: no-repeat;
}
.page.login > .backgrounds > .image.light-one {
  background-image: url("../images/bg-one-mode-light.png");
  background-position: right bottom;
  background-repeat: no-repeat;
}
.page.login > .backgrounds > .image.light-two {
  background-image: url("../images/bg-two-mode-light.png");
  background-position: left bottom;
  background-repeat: no-repeat;
}
.page.login > .backgrounds > .image.light-three {
  background-image: url("../images/bg-three-mode-light.png");
  background-position: left top;
  background-repeat: no-repeat;
}
.page.login > .avatar-login {
  position: absolute;
  left: 160px;
  bottom: 140px;
  width: 71px;
  height: 135px;
  background-image: url("../images/asteroide_plate.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  animation: 2s infinite ease-in-out pop;
  transition: 500ms ease-in-out transform, 500ms ease-in-out left;
}
.page.login > .avatar-login[theme=light] {
  transform: rotateY(180deg);
  left: calc(100vw - 160px - 71px);
}
.page.login > .avatar-login > img {
  transition: 500ms ease-in-out all;
  opacity: 1;
}
.page.login > .avatar-login > img.loading {
  opacity: 0;
}
.page.login > .center {
  width: 100%;
  max-width: 320px;
  float: left;
  clear: both;
  margin-left: calc(50% - 320px / 2);
  transition: 200ms ease-in-out padding;
  top: 50%;
  transform: translateY(-50%) scale(1);
  filter: blur(0);
  line-height: 1;
  width: 320px;
}
.page.login > .center > .logo {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 50px;
  text-align: center;
  transition: 500ms ease-in-out all;
}
.page.login > .center > h3 {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  transition: 200ms ease-in-out all;
}
.page.login > .center > p {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.login > .center > form {
  width: 100%;
  float: left;
  clear: both;
}
.page.login > .center > form > p {
  color: #ffffff;
  margin-bottom: 30px;
  text-align: center;
  font-size: 14px;
  transition: 500ms ease-in-out all;
}
.page.login > .center > form > .input {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 20px;
}
.page.login > .center > form > .input > input {
  transition: 500ms ease-in-out all;
}
.page.login > .center > form > .input > input[type=text],
.page.login > .center > form > .input > input[type=password],
.page.login > .center > form > .input > input[type=email] {
  width: 100%;
  float: left;
  clear: both;
  border: 2px solid #fff;
  border-radius: 20px;
  line-height: 45px;
  padding: 0 20px;
  color: #fff;
  background-color: #3c3f51;
}
.page.login > .center > form > .input > input[type=submit] {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 20px;
  background-color: #347ae2;
  height: 45px;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 15px;
  text-transform: uppercase;
}
.page.login > .center > form > .input > input[type=checkbox] {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #eaeaea;
  -webkit-appearance: none;
  cursor: pointer;
  margin-left: 2px;
}
.page.login > .center > form > .input > input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 4px;
  height: 12px;
  width: 12px;
  background-color: transparent;
  border-radius: 20px;
  left: 4px;
  transition: 500ms ease-in-out background-color;
}
.page.login > .center > form > .input > input[type=checkbox]:checked::before {
  background-color: #347ae2;
}
.page.login > .center > form > .input > label {
  color: #ffffff;
  float: left;
  margin-left: 12px;
  font-size: 14px;
  line-height: 20px;
  transition: 500ms ease-in-out all;
}
.page.login > .center > form > .input > a {
  position: absolute;
  transition: 500ms ease-in-out all;
  right: 0;
  line-height: 48px;
  padding: 0 20px 0 0;
  color: #347ae2;
  font-size: 14px;
}
.page.login > .center > .down {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
}
.page.login > .center > .down > span {
  width: 100%;
  float: left;
  clear: both;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 5px;
  transition: 500ms ease-in-out all;
}
.page.login > .center > .down > a {
  font-size: 14px;
  transition: 500ms ease-in-out all;
  color: #347ae2;
}
.page.login > .center-2fa {
  width: 100%;
  max-width: 520px;
  float: left;
  clear: both;
  margin-left: calc(50% - 520px / 2);
  transition: 200ms ease-in-out padding;
  top: 50%;
  transform: translateY(-50%) scale(1);
  filter: blur(0);
  line-height: 1;
}
.page.login > .center-2fa > .twofa_verification_box {
  width: 100%;
  float: left;
  clear: both;
  opacity: 1;
  background-color: #282a34;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: 500ms ease-in-out all;
}
.page.login > .center-2fa > .twofa_verification_box.loading {
  opacity: 0.5;
}
.page.login > .center-2fa > .twofa_verification_box > img {
  margin-top: -70px;
}
.page.login > .center-2fa > .twofa_verification_box > .title > h1 {
  font-size: 25px;
  color: #ffffff;
  transition: 500ms ease-in-out all;
}
.page.login > .center-2fa > .twofa_verification_box > .title > p {
  color: #ffffff;
  transition: 500ms ease-in-out all;
}
.page.login > .center-2fa > .twofa_verification_box > .input {
  width: 100%;
  float: left;
}
.page.login > .center-2fa > .twofa_verification_box > .input.top {
  margin-bottom: 20px;
}
.page.login > .center-2fa > .twofa_verification_box > .input.right {
  margin-left: 20px;
}
.page.login > .center-2fa > .twofa_verification_box > .input.full {
  width: 100%;
  float: left;
  clear: both;
}
.page.login > .center-2fa > .twofa_verification_box > .input.forgot-link {
  text-align: right;
  margin-top: 15px;
}
.page.login > .center-2fa > .twofa_verification_box > .input.forgot-link > a {
  color: #dd3f3f;
  font-size: 12px;
}
.page.login > .center-2fa > .twofa_verification_box > .input > input {
  transition: 500ms ease-in-out all;
}
.page.login > .center-2fa > .twofa_verification_box > .input > p {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 12px;
  transition: 500ms ease-in-out all;
}
.page.login > .center-2fa > .twofa_verification_box > .input > p > a {
  color: #eaeaea;
  font-size: 12px;
  transition: 500ms ease-in-out all;
}
.page.login > .center-2fa > .twofa_verification_box > .input > input[type=text],
.page.login > .center-2fa > .twofa_verification_box > .input > input[type=email],
.page.login > .center-2fa > .twofa_verification_box > .input > input[type=date],
.page.login > .center-2fa > .twofa_verification_box > .input > input[type=password] {
  border-radius: 10px;
  line-height: 45px;
  height: 45px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  border: 1px solid transparent;
  background-color: #3c3f51;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.page.login > .center-2fa > .twofa_verification_box > .input > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  float: none !important;
}
.page.login > .center-2fa > .twofa_verification_box > .input > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.login > .center-2fa > .twofa_verification_box > .input > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.page.login > .center-2fa > .twofa_verification_box > .input > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.login > .center-2fa > .twofa_verification_box > .input > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.login > .center-2fa > .twofa_verification_box > .input > .btn.danger {
  background-color: #dd3f3f;
}
.page.login > .center-2fa > .twofa_verification_box > .input > .btn.danger:hover {
  background-color: rgb(228.6725663717, 106.3274336283, 106.3274336283);
}
.page.login > .center-2fa > .down {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  margin-top: 10px;
}
.page.login > .center-2fa > .down > span {
  width: 100%;
  float: left;
  clear: both;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 5px;
  transition: 500ms ease-in-out all;
}
.page.login > .center-2fa > .down > a {
  font-size: 14px;
  transition: 500ms ease-in-out all;
  color: #347ae2;
}

.page.login[theme=light] > .backgrounds {
  background-color: #eaeaea;
  background-image: none;
  top: 0;
  position: fixed;
}
.page.login[theme=light] > .center > h3,
.page.login[theme=light] > .center > p {
  color: #3c3f51;
}
.page.login[theme=light] > .center > form > p {
  color: #3c3f51;
}
.page.login[theme=light] > .center > form > .input > input[type=text],
.page.login[theme=light] > .center > form > .input > input[type=password],
.page.login[theme=light] > .center > form > .input > input[type=email] {
  border: 2px solid #3c3f51;
  background-color: #ffffff;
  color: #3c3f51;
}
.page.login[theme=light] > .center > form > .input > input[type=submit] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.login[theme=light] > .center > form > .input > input[type=checkbox] {
  margin-left: 2px;
  box-shadow: 0 0 0 2px #3c3f51;
  background-color: #ffffff;
}
.page.login[theme=light] > .center > form > .input > input[type=checkbox]:checked::before {
  background-color: #5ba4dd;
}
.page.login[theme=light] > .center > form > .input > label {
  color: #3c3f51;
}
.page.login[theme=light] > .center > form > .input > a {
  color: #365aa3;
}
.page.login[theme=light] > .center > .down > span {
  color: #3c3f51;
}
.page.login[theme=light] > .center > .down > a {
  color: #365aa3;
}
.page.login[theme=light] > .center-2fa {
  width: 100%;
  max-width: 520px;
  float: left;
  clear: both;
  margin-left: calc(50% - 520px / 2);
  transition: 200ms ease-in-out padding;
  top: 50%;
  transform: translateY(-50%) scale(1);
  filter: blur(0);
  line-height: 1;
  width: 520px;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box {
  background-color: #ffffff;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .title > h1 {
  font-size: 25px;
  color: #3c3f51;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .title > p {
  color: #3c3f51;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > p {
  color: #3c3f51;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > p > a {
  color: #5ba4dd;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input.forgot-link {
  text-align: right;
  margin-top: 15px;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input.forgot-link > a {
  color: #dd3f3f;
  font-size: 12px;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > input[type=text],
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > input[type=email],
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > input[type=date],
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > input[type=password] {
  border-radius: 10px;
  line-height: 45px;
  height: 45px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  color: #3c3f51;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #5ba4dd;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  float: none !important;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > .btn:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > .btn.danger {
  background-color: #dd3f3f;
}
.page.login[theme=light] > .center-2fa > .twofa_verification_box > .input > .btn.danger:hover {
  background-color: rgb(228.6725663717, 106.3274336283, 106.3274336283);
}
.page.login[theme=light] > .center-2fa > .down > span {
  color: #3c3f51;
}
.page.login[theme=light] > .center-2fa > .down > a {
  color: #5ba4dd;
}

@keyframes pop {
  0%, 100% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: -20px;
  }
}
.page.profile > .full {
  width: 100%;
  float: left;
  clear: both;
}
.page.profile > .full > .left {
  float: left;
  width: 400px;
}
.page.profile > .full > .right {
  float: right;
  width: calc(100% - 400px - 15px);
}
.page.profile > .left {
  float: left;
  width: 750px;
}
.page.profile > .left > .left {
  float: left;
  width: calc(50% - 7.5px);
  margin-right: 15px;
}
.page.profile > .left > .right {
  float: left;
  width: calc(50% - 7.5px);
}
.page.profile > .right {
  float: right;
  width: calc(100% - 750px - 15px);
}
.page.profile > .right > .left {
  float: left;
  width: calc(100% - 160px - 15px);
}
.page.profile .mb-loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.page.profile .mb-loading[theme=light] {
  filter: invert(0);
}

#settings > .top::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  height: 130px;
  z-index: -1;
  background-image: url("../images/fun.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}
#settings > .top > .avatar {
  float: left;
  height: 90px;
  width: 110px;
  background-image: url("../images/settings-bg.png");
  mask-image: url("../images/settings-bg.png");
  text-align: center;
  margin: 20px 0 20px 20px;
}
#settings > .top > .right {
  float: right;
  width: calc(100% - 130px);
  padding: 32.5px 30px 40px 30px;
}
#settings > .top > .right > h1 {
  width: 100%;
  float: left;
  clear: both;
  transition: 200ms ease-in-out all;
  color: #ffffff;
  font-size: 18px;
  margin-bottom: 5px;
}
#settings > .top > .right > span {
  width: 100%;
  float: left;
  clear: both;
  transition: 200ms ease-in-out all;
  color: #ffffff;
  opacity: 0.8;
  font-size: 14px;
  font-weight: 500;
}
#settings > .top > .line {
  width: 100%;
  float: left;
  clear: both;
  height: 60px;
  padding: 10px 12px;
  transition: 200ms ease-in-out all;
  border-top: 1px solid #3c3f51;
}
#settings > .top > .line > span {
  width: 100%;
  float: left;
  clear: both;
  line-height: 40px;
  transition: 200ms ease-in-out all;
  color: #ffffff;
  padding-left: 20px;
  font-weight: 500;
  font-size: 14px;
}
#settings > .top > .line > span > b {
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
  font-weight: bold;
}
#settings > .top > .line > img {
  position: absolute;
  right: 20px;
}
#settings > .top[theme=light] > .right > h1 {
  color: #3c3f51;
}
#settings > .top[theme=light] > .right > span {
  color: #3c3f51;
}
#settings > .top[theme=light] > .line {
  border-top: 1px solid #eaeaea;
}
#settings > .top[theme=light] > .line > span {
  color: #3c3f51;
}
#settings > .top[theme=light] > .line > span > b {
  color: #3c3f51;
}
#settings > .forms {
  width: 100%;
  float: left;
  clear: both;
  padding-bottom: 15px;
}
#settings > .forms > .box {
  width: 100%;
  float: left;
  clear: both;
  padding: 15px;
  padding-bottom: 0;
}
#settings > .forms > .box > .title {
  width: 100%;
  float: left;
  clear: both;
  line-height: 40px;
  height: 40px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  background-color: #f27e46;
  border-radius: 10px;
}
#settings > .forms > .box > .title.sub {
  margin-top: 15px;
}
#settings > .forms > .box > .content {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
#settings > .forms > .box > .content .error {
  width: 100%;
  float: left;
  clear: both;
}
#settings > .forms > .box > .content > p.description {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  opacity: 0.5;
  font-size: 14px;
}
#settings > .forms > .box > .content > p.description > b {
  color: #347ae2;
  transition: 200ms ease-in-out all;
  font-weight: bold;
  font-size: 14px;
}
#settings > .forms > .box > .content > form {
  width: 100%;
  float: left;
  clear: both;
}
#settings > .forms > .box > .content > form > .input {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
#settings > .forms > .box > .content > form > .input > label {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
}
#settings > .forms > .box > .content > form > .input > input:not([type=submit]) {
  width: 100%;
  float: left;
  clear: both;
  line-height: 40px;
  color: #3c3f51;
  padding: 0 15px;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 14px;
  margin-top: 5px;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
#settings > .forms > .box > .content > form > .input > input[type=submit] {
  width: 100%;
  clear: both;
  float: left;
  min-height: 40px;
  line-height: 40px;
  background-color: #3c3f51;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
#settings > .forms > .box > .content > form > .input > input[type=submit] > img {
  line-height: 40px;
  vertical-align: middle;
  margin-top: -1px;
}
#settings > .forms > .box > .content > form > .input > input[type=submit]:hover {
  background-color: rgb(81.7021276596, 85.7872340426, 110.2978723404);
}
#settings > .forms > .box > .content > .line {
  width: 100%;
  border-radius: 10px;
}
#settings > .forms > .box > .content > .line:not(.relation) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#settings > .forms > .box > .content > .line:nth-child(2n+1) {
  background-color: rgba(0, 0, 0, 0.1);
}
#settings > .forms > .box > .content > .line > a {
  float: left;
  transition: 200ms ease-in-out all;
  padding: 18px 18px;
  width: calc(100% - 35px - 15px - 10px);
  color: #ffffff;
  font-size: 14px;
}
#settings > .forms > .box > .content > .line > .delete {
  float: right;
  width: 35px;
  height: 35px;
  margin-top: 1px;
  margin-right: 10px;
  background-color: #dd3f3f;
  color: #fff;
  border-radius: 10px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
  font-size: 17px;
  cursor: pointer;
}
#settings > .forms > .box > .content > .relation {
  width: 100%;
  float: left;
  clear: both;
  height: 60px;
  padding-left: 40px;
  background-repeat: no-repeat;
  background-position: 20px center;
}
#settings > .forms > .box > .content > .relation.love {
  background-image: url("../images/relation-love.png");
}
#settings > .forms > .box > .content > .relation.friend {
  background-image: url("../images/relation-friend.png");
}
#settings > .forms > .box > .content > .relation.unfriend {
  background-image: url("../images/relation-unfriend.png");
}
#settings > .forms > .box > .content > .relation > .avatar {
  float: left;
  height: 60px;
  width: 64px;
  overflow: hidden;
}
#settings > .forms > .box > .content > .relation > .username {
  transition: 200ms ease-in-out all;
  float: left;
  color: #ffffff;
  line-height: 60px;
  font-size: 14px;
}
#settings > .forms > .box > .content > .relation > .delete {
  margin-top: 13px;
}
#settings > .forms > .box > .content > .relation[theme=light] > .username {
  color: #3c3f51;
}
#settings > .forms > .box > .content > .badges {
  width: 100%;
  float: left;
  clear: both;
  max-height: 350px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 10px;
}
#settings > .forms > .box > .content > .badges::-webkit-scrollbar {
  transition: 200ms ease-in-out all;
  width: 5px;
  background-color: #3c3f51;
  border-radius: 10px;
}
#settings > .forms > .box > .content > .badges::-webkit-scrollbar-thumb {
  transition: 200ms ease-in-out all;
  width: 5px;
  background-color: #347ae2;
  border-radius: 10px;
}
#settings > .forms > .box > .content > .badges::-webkit-scrollbar-button, #settings > .forms > .box > .content > .badges::-webkit-scrollbar-corner, #settings > .forms > .box > .content > .badges::-webkit-scrollbar-track {
  display: none;
}
#settings > .forms > .box > .content > .badges > .badge {
  transition: 200ms ease-in-out all;
  float: left;
  background: #3c3f51;
  height: 50px;
  width: calc(100% / 6 - (10px - 10px / 6));
  border-radius: 10px;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 10px;
  text-align: center;
}
#settings > .forms > .box > .content > .badges > .badge.selected {
  box-shadow: 0 0 20px rgba(255, 54, 54, 0.5) inset;
}
#settings > .forms > .box > .content > .badges > .badge:nth-child(1) {
  margin-top: 0;
}
#settings > .forms > .box > .content > .badges > .badge:nth-child(2) {
  margin-top: 0;
}
#settings > .forms > .box > .content > .badges > .badge:nth-child(3) {
  margin-top: 0;
}
#settings > .forms > .box > .content > .badges > .badge:nth-child(4) {
  margin-top: 0;
}
#settings > .forms > .box > .content > .badges > .badge:nth-child(5) {
  margin-top: 0;
}
#settings > .forms > .box > .content > .badges > .badge:nth-child(6) {
  margin-top: 0;
}
#settings > .forms > .box > .content > .badges > .badge:nth-child(6n+6) {
  margin-right: 0;
}
#settings > .forms > .box > .content > .badges > .badge > .image {
  width: 100%;
  float: left;
  clear: both;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center center;
}
#settings > .forms > .box > .content > .badges[theme=light]::-webkit-scrollbar {
  background-color: #eaeaea;
}
#settings > .forms > .box > .content > .badges[theme=light]::-webkit-scrollbar-thumb {
  background-color: #5ba4dd;
}
#settings > .forms > .box > .content > .badges[theme=light] > .badge {
  background: #eaeaea;
}
#settings > .forms > .box > .content > .commands {
  width: 100%;
  float: left;
  clear: both;
}
#settings > .forms > .box > .content > .commands > .title {
  width: 100%;
  float: left;
  clear: both;
  cursor: pointer;
  padding: 10px 13px;
  background-color: #3c3f51;
  font-size: 14px;
  color: #ffffff;
  margin-top: 15px;
  border-radius: 10px;
}
#settings > .forms > .box > .content > .commands > .content {
  width: 100%;
  float: left;
  clear: both;
}
#settings > .forms > .box > .content > .commands > .content > .cmd {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
#settings > .forms > .box > .content > .commands > .content > .cmd > b {
  width: 100%;
  float: left;
  clear: both;
  transition: 200ms ease-in-out all;
  font-size: 14px;
  color: #347ae2;
}
#settings > .forms > .box > .content > .commands > .content > .cmd > span {
  transition: 200ms ease-in-out all;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}
#settings > .forms > .box > .content > .commands[theme=light] > .content > .cmd > b {
  color: #365aa3;
}
#settings > .forms > .box > .content > .commands[theme=light] > .content > .cmd > span {
  color: #3c3f51;
}
#settings > .forms > .box > .content > .tags {
  width: 100%;
  float: left;
  clear: both;
}
#settings > .forms > .box > .content > .tags > span {
  transition: 200ms ease-in-out all;
  float: left;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 5px;
  background-color: #3c3f51;
  line-height: 30px;
  padding: 0 10px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
#settings > .forms > .box > .content > .tags[theme=light] > span {
  background-color: #eaeaea;
  color: #3c3f51;
}
#settings > .forms > .box > .content > .description {
  margin-bottom: 15px;
}
#settings > .forms > .box > .content > .twofa_key {
  margin: 15px 0;
}
#settings > .forms > .box > .content > .twofa_key > b {
  color: #ffffff;
  margin-bottom: 5px;
  transition: 200ms ease-in-out all;
}
#settings > .forms > .box > .content > .twofa_key > i {
  color: #347ae2;
  transition: 200ms ease-in-out all;
}
#settings > .forms > .box > .content > .twofa_key[theme=light] > b {
  color: #3c3f51;
}
#settings > .forms > .box > .content > .twofa_key[theme=light] > i {
  color: #365aa3;
}
#settings > .forms > .box > .content > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #3c3f51;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  float: none !important;
}
#settings > .forms > .box > .content > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
#settings > .forms > .box > .content > .btn:hover {
  background-color: rgb(81.7021276596, 85.7872340426, 110.2978723404);
}
#settings > .forms > .box > .content > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
#settings > .forms > .box > .content > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
#settings > .forms > .box > .content > .btn.danger {
  background-color: #dd3f3f;
}
#settings > .forms > .box > .content > .btn.danger:hover {
  background-color: rgb(228.6725663717, 106.3274336283, 106.3274336283);
}
#settings > .forms > .box > .content > .twofa-step-medium {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 15px;
}
#settings > .forms > .box > .content > .twofa-step-medium > .left {
  width: 20%;
  float: left;
}
#settings > .forms > .box > .content > .twofa-step-medium > .left > img {
  width: 75px;
}
#settings > .forms > .box > .content > .twofa-step-medium > .left > .qr-code {
  border-radius: 10px;
}
#settings > .forms > .box > .content > .twofa-step-medium > .left > .qr-code > svg {
  border-radius: 10px;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right {
  width: 70%;
  float: right;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > h4 {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 5px;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > p {
  font-size: 14px;
  color: #ffffff;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > form {
  width: 100%;
  float: left;
  clear: both;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > form > .input {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > form > .input > label {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > form > .input > input:not([type=submit]) {
  width: 100%;
  float: left;
  clear: both;
  line-height: 40px;
  color: #3c3f51;
  padding: 0 15px;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 14px;
  margin-top: 5px;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > form > .input > input[type=submit] {
  width: 100%;
  clear: both;
  float: left;
  min-height: 40px;
  line-height: 40px;
  background-color: #3c3f51;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > form > .input > input[type=submit] > img {
  line-height: 40px;
  vertical-align: middle;
  margin-top: -1px;
}
#settings > .forms > .box > .content > .twofa-step-medium > .right > form > .input > input[type=submit]:hover {
  background-color: rgb(81.7021276596, 85.7872340426, 110.2978723404);
}
#settings > .forms > .box > .content > .manual-entry-key {
  width: 100%;
  float: left;
  clear: both;
  background-color: #347ae2;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  margin-top: 5px;
  font-size: 14px;
  margin-bottom: 15px;
}
#settings > .forms > .box > .content > .manual-entry-key > b {
  color: #ffffff;
}
#settings > .forms > .box > .content > .twofa-step-medium[theme=light] > .right > h4 {
  color: #3c3f51;
}
#settings > .forms > .box > .content > .twofa-step-medium[theme=light] > .right > p {
  color: #3c3f51;
}
#settings > .forms > .box > .content > .twofa-step-medium[theme=light] > .right > form .input > label {
  color: #3c3f51;
}
#settings > .forms > .box > .content > .twofa-step-medium[theme=light] > .right > form .input > input:not([type=submit]) {
  background-color: #eaeaea;
  border-color: #ddd;
}
#settings > .forms > .box > .content > .manual-entry-key[theme=light] {
  background-color: #5ba4dd;
}

#settings[theme=light] > .forms > .box > .title {
  background-color: #f27e46;
}
#settings[theme=light] > .forms > .box > .content > p.description {
  color: #3c3f51;
}
#settings[theme=light] > .forms > .box > .content > p.description > b {
  color: #365aa3;
}
#settings[theme=light] > .forms > .box > .content > form .input > label {
  color: #3c3f51;
}
#settings[theme=light] > .forms > .box > .content > form .input > input:not([type=submit]) {
  background-color: #eaeaea;
  border-color: #ddd;
}
#settings[theme=light] > .forms > .box > .content > .line > a {
  color: #3c3f51;
}

.page.enables-handitems > .left {
  float: left;
  width: calc(100% - 825px - 15px - 160px - 15px);
}
.page.enables-handitems > .left > .box > p.content {
  color: rgb(157.5, 157.5, 157.5);
  transition: 200ms ease-in-out all;
}
.page.enables-handitems > .left > .box > p.content > b {
  font-weight: bold;
  color: rgb(157.5, 157.5, 157.5);
  transition: 200ms ease-in-out all;
}
.page.enables-handitems > .left > .box > p.content > u {
  color: rgb(157.5, 157.5, 157.5);
  text-decoration: underline;
  transition: 200ms ease-in-out all;
}
.page.enables-handitems > .left > .box > p.content > span {
  color: #347ae2;
  transition: 200ms ease-in-out all;
}
.page.enables-handitems > .left > .box > p.content > span.red {
  color: #ce5b5b !important;
}
.page.enables-handitems > .right {
  float: left;
  margin-left: 15px;
  width: 825px;
}
.page.enables-handitems > .right > .line > .title {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
}
.page.enables-handitems > .right > .line > .content {
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: 200ms ease-in-out all;
}
.page.enables-handitems > .right > .line > .content > .enable {
  width: 75px;
  min-width: 75px;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.page.enables-handitems > .right > .line > .content > .enable:last-child {
  margin-right: 0;
}
.page.enables-handitems > .right > .line > .content > .enable > img {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 10px;
}
.page.enables-handitems > .right > .line > .content > .enable > span {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
  border-radius: 10px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  background-color: #3c3f51;
  color: #eaeaea;
}
.page.enables-handitems > .right > .line > .content > .enable > span.red {
  background-color: #dd3f3f;
}
.page.enables-handitems > .right > .line.visible > .content {
  max-height: none;
}

.page.enables-handitems[theme=light] > .left > .box > p.content {
  color: #3c3f51;
  opacity: 0.7;
}
.page.enables-handitems[theme=light] > .left > .box > p.content > b {
  color: #3c3f51;
  opacity: 0.7;
}
.page.enables-handitems[theme=light] > .left > .box > p.content > u {
  color: #3c3f51;
  opacity: 0.7;
}
.page.enables-handitems[theme=light] > .left > .box > p.content > span {
  color: #5ba4dd;
}

.page.homepage > .homepage {
  float: left;
  clear: none;
  width: calc(100% - 160px - 15px);
  margin-top: 15px;
  height: 1410px;
}
.page.homepage > .homepage > .title > .right {
  position: absolute;
  right: 0;
  top: 0;
}
.page.homepage > .homepage > .title > .right > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 50px;
  line-height: 50px;
  background-color: #4c9c49;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  border-radius: 0 10px 0 0;
}
.page.homepage > .homepage > .title > .right > .btn > img {
  line-height: 50px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.homepage > .homepage > .title > .right > .btn:hover {
  background-color: rgb(101.3318777293, 181.6812227074, 98.3187772926);
}
.page.homepage > .homepage > .title > .right > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.homepage > .homepage > .title > .right > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.homepage > .homepage > .title > .right > .btn.danger {
  width: 100%;
  clear: both;
  float: left;
  min-height: 50px;
  line-height: 50px;
  background-color: #C43939;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  border-radius: 0 10px 0 0;
}
.page.homepage > .homepage > .title > .right > .btn.danger > img {
  line-height: 50px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.homepage > .homepage > .title > .right > .btn.danger:hover {
  background-color: rgb(208.5889328063, 95.4110671937, 95.4110671937);
}
.page.homepage > .homepage > .title > .right > .btn.danger[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.homepage > .homepage > .title > .right > .btn.danger[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.homepage > .homepage > .box-error {
  width: 100%;
  float: left;
  clear: both;
}
.page.homepage > .homepage > .inner {
  width: 100%;
  float: left;
  clear: both;
  height: 1360px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_defaultskin,
.page.homepage > .homepage > .inner > .friends-widget.w_skin_defaultskin {
  width: 324px;
}
.page.homepage > .homepage > .inner > .rooms-widget.w_skin_defaultskin {
  width: 252px;
}
.page.homepage > .homepage > .inner > .friends-widget.w_skin_hc_pillowskin {
  width: 374px;
}
.page.homepage > .homepage > .inner > .rooms-widget.w_skin_hc_pillowskin,
.page.homepage > .homepage > .inner > .groups-widget.w_skin_hc_pillowskin {
  width: 302px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_hc_machineskin,
.page.homepage > .homepage > .inner > .friends-widget.w_skin_hc_machineskin {
  width: 385px;
}
.page.homepage > .homepage > .inner > .rooms-widget.w_skin_hc_machineskin,
.page.homepage > .homepage > .inner > .badges-widget.w_skin_hc_machineskin {
  width: 313px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_metalskin,
.page.homepage > .homepage > .inner > .friends-widget.w_skin_metalskin {
  width: 345px;
}
.page.homepage > .homepage > .inner > .rooms-widget.w_skin_metalskin,
.page.homepage > .homepage > .inner > .badges-widget.w_skin_metalskin {
  width: 273px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_notepadskin,
.page.homepage > .homepage > .inner > .friends-widget.w_skin_notepadskin {
  width: 326px;
}
.page.homepage > .homepage > .inner > .rooms-widget.w_skin_notepadskin,
.page.homepage > .homepage > .inner > .badges-widget.w_skin_notepadskin {
  width: 254px;
}
.page.homepage > .homepage > .inner > .rooms-widget.w_skin_speechbubbleskin,
.page.homepage > .homepage > .inner > .badges-widget.w_skin_speechbubbleskin {
  width: 238px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_noteitskin,
.page.homepage > .homepage > .inner > .friends-widget.w_skin_noteitskin {
  width: 309px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_noteitskin,
.page.homepage > .homepage > .inner > .rooms-widget.w_skin_noteitskin,
.page.homepage > .homepage > .inner > .badges-widget.w_skin_noteitskin {
  width: 237px;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin {
  width: 359px;
  padding: 0;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin.rooms-widget, .page.homepage > .homepage > .inner .widget.w_skin_goldenskin.player-widget {
  width: 287px;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-corner {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/golden/golden-top-left.png") no-repeat top left;
  padding-left: 31px;
  height: 31px;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-corner > .widget-headline {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/golden/golden-top-right.png") no-repeat top right;
  height: 31px;
  top: -3px;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-corner > .widget-headline > h3 {
  top: -5px;
  text-align: center;
  margin: 2px 20px 0 0;
  position: relative;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-corner > .widget-headline > h3 > .header-middle {
  text-align: center;
  background: url("../images/homepages/skins/golden/golden-header-middle.png") no-repeat top left;
  line-height: 20px;
  padding: 3px 15px;
  color: #733A00;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11px;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-corner > .widget-headline > h3 > .header-middle::after {
  content: "";
  position: absolute;
  left: 0;
  background: url("../images/homepages/skins/golden/golden-header-left.png") no-repeat top center;
  height: 21px;
  width: 15px;
  top: 0;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-corner > .widget-headline > h3 > .header-middle::before {
  content: "";
  position: absolute;
  right: 0;
  background: url("../images/homepages/skins/golden/golden-header-right.png") no-repeat top center;
  height: 21px;
  width: 15px;
  top: 0;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-body {
  width: 100%;
  float: left;
  clear: both;
  padding: 5px 38px 38px 38px;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5px;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/golden/golden-bottom-right.png") no-repeat bottom right;
}
.page.homepage > .homepage > .inner .widget.w_skin_goldenskin > .widget-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/golden/golden-bottom-left.png") no-repeat bottom left;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin {
  width: 310px;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin.player-widget {
  width: 250px;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin > .widget-edit {
  margin-top: 3px;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin > .widget-corner {
  width: 100%;
  float: left;
  clear: both;
  padding-left: 10px;
  height: 10px;
  background: url("../images/homepages/skins/bubble/bubble-top-left.png") no-repeat top left, url("../images/homepages/skins/bubble/bubble-bottom-left.png") no-repeat left 10px, url("../images/homepages/skins/bubble/bubble-bottom-right.png") right 10px;
  padding-left: 10px;
  height: 30px;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin > .widget-corner > .widget-headline {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/bubble/bubble-top-right.png") no-repeat top right;
  height: 31px;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin > .widget-corner > .widget-headline > h3 {
  text-align: left;
  vertical-align: bottom;
  position: relative;
  padding-top: 0;
  left: 5px;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin > .widget-corner > .widget-headline > h3 > .header-middle {
  color: #666;
  font-weight: bold;
  font-size: 14px;
  top: -17px;
  left: 3px;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin > .widget-body {
  width: 100%;
  float: left;
  clear: both;
  padding: 17px 10px 22px 0;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin > .widget-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5px;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/bubble/bubble-bottom-right.png") no-repeat bottom right;
}
.page.homepage > .homepage > .inner .widget.w_skin_speechbubbleskin > .widget-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/bubble/bubble-bottom-left.png") no-repeat bottom left;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin {
  width: 310px;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin.player-widget {
  width: 259px;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin > .widget-edit {
  margin-top: -1px;
  margin-right: 10px;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin > .widget-corner {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/metal/metal-top-left-header.png") no-repeat top left;
  padding-left: 24px;
  height: 24px;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin > .widget-corner > .widget-headline {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/metal/metal-top-right-header.png") no-repeat top right;
  height: 31px;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin > .widget-corner > .widget-headline > h3 {
  text-align: center;
  font-size: 11px;
  vertical-align: bottom;
  position: relative;
  left: -4px;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin > .widget-corner > .widget-headline > h3 > .header-middle {
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11px;
  top: -8px;
  padding-right: 18px;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin > .widget-body {
  width: 100%;
  float: left;
  clear: both;
  padding: 1px 20px 1px 20px;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin > .widget-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5px;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/metal/metal-bottom-right.png") no-repeat bottom right;
}
.page.homepage > .homepage > .inner .widget.w_skin_metalskin > .widget-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/metal/metal-bottom-left.png") no-repeat bottom left;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin {
  width: 310px;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin.player-widget {
  width: 259px;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin > .widget-edit {
  margin-top: 2px;
  margin-right: 10px;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin > .widget-corner {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/notepad/notepad-top-left.png") no-repeat top left;
  padding-left: 27px;
  height: 28px;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin > .widget-corner > .widget-headline {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/notepad/notepad-top-right.png") no-repeat top right;
  height: 31px;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin > .widget-corner > .widget-headline > h3 {
  text-align: left;
  font-size: 14px;
  vertical-align: bottom;
  position: relative;
  left: 10px;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin > .widget-corner > .widget-headline > h3 > .header-middle {
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11px;
  top: -8px;
  padding-right: 18px;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin > .widget-body {
  width: 100%;
  float: left;
  clear: both;
  padding: 1px 20px 1px 20px;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin > .widget-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5px;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/notepad/notepad-bottom-right.png") no-repeat bottom right;
}
.page.homepage > .homepage > .inner .widget.w_skin_notepadskin > .widget-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/notepad/notepad-bottom-left.png") no-repeat bottom left;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin {
  width: 310px;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin.player-widget {
  width: 259px;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin > .widget-edit {
  margin-top: 5px;
  margin-right: 2px;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin > .widget-corner {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/default/default-top-left-header.png") no-repeat top left;
  padding-left: 27px;
  height: 41px;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin > .widget-corner > .widget-headline {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/default/default-top-right-header.png") no-repeat top right;
  height: 41px;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin > .widget-corner > .widget-headline > h3 {
  text-align: left;
  font-size: 15px;
  vertical-align: bottom;
  position: relative;
  left: 0;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin > .widget-corner > .widget-headline > h3 > .header-middle {
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  top: -9px;
  left: -13px;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin > .widget-body {
  width: 100%;
  float: left;
  clear: both;
  padding: 1px 20px 1px 20px;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin > .widget-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5px;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/default/default-bottom-right.png") no-repeat bottom right;
}
.page.homepage > .homepage > .inner .widget.w_skin_defaultskin > .widget-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/default/default-bottom-left.png") no-repeat bottom left;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin {
  width: 310px;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin.player-widget {
  width: 259px;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin > .widget-edit {
  margin-top: 4px;
  margin-right: 2px;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin > .widget-corner {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/noteit/noteit-top-left.png") no-repeat top left;
  padding-left: 27px;
  height: 30px;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin > .widget-corner > .widget-headline {
  width: 100%;
  float: left;
  clear: both;
  background: url("../images/homepages/skins/noteit/noteit-top-right.png") no-repeat top right;
  height: 30px;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin > .widget-corner > .widget-headline > h3 {
  text-align: left;
  font-size: 15px;
  vertical-align: bottom;
  position: relative;
  left: 0;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin > .widget-corner > .widget-headline > h3 > .header-middle {
  color: #000;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  top: -9px;
  left: -13px;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin > .widget-body {
  width: 100%;
  float: left;
  clear: both;
  padding: 1px 20px 1px 20px;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin > .widget-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5px;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/noteit/noteit-bottom-right.png") no-repeat bottom right;
}
.page.homepage > .homepage > .inner .widget.w_skin_noteitskin > .widget-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("../images/homepages/skins/noteit/noteit-bottom-left.png") no-repeat bottom left;
}
.page.homepage > .homepage > .inner > .widget {
  position: absolute;
}
.page.homepage > .homepage > .inner > .widget > .widget-edit {
  position: absolute;
  z-index: 9999;
  right: 6px;
  top: 2px;
}
.page.homepage > .homepage > .inner > .widget > .widget-edit > .icon {
  width: 18px;
  height: 19px;
  background-image: url("../images/homepages/utilities/edit.gif");
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  z-index: 9999;
}
.page.homepage > .homepage > .inner > .widget > .widget-edit > .content {
  background-color: #3c3f51;
  padding: 5px 15px;
  border-radius: 10px;
  z-index: 9998;
  position: absolute;
  left: -15px;
  top: -15px;
  white-space: nowrap;
  width: 200px;
}
.page.homepage > .homepage > .inner > .widget > .widget-edit > .content > .title {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  line-height: 22px;
  margin-top: 10px;
}
.page.homepage > .homepage > .inner > .widget > .widget-edit > .content > .title > .close {
  float: right;
  height: 15px;
  margin-right: -5px;
  width: 15px;
  cursor: pointer;
  margin-top: 3px;
  background-image: url("../images/homepages/utilities/close_x.gif");
}
.page.homepage > .homepage > .inner > .widget > .widget-edit > .content > .list {
  width: 100%;
  float: left;
  clear: both;
  background-color: #ffffff;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  padding-left: 10px;
  line-height: 25px;
}
.page.homepage > .homepage > .inner > .widget > .widget-edit > .content > .list > option {
  font-size: 12px;
}
.page.homepage > .homepage > .inner > .player-widget > .widget-body {
  min-height: 155px;
  padding: 18px 38px 38px 48px !important;
}
.page.homepage > .homepage > .inner > .player-widget > .widget-body > span {
  width: 100%;
  float: left;
  clear: both;
  font-size: 14px;
  color: #000;
  margin-bottom: 5px;
}
.page.homepage > .homepage > .inner > .player-widget > .widget-body > span.username {
  text-decoration: underline;
}
.page.homepage > .homepage > .inner > .player-widget > .widget-body > img {
  float: left;
  clear: both;
  margin: 5px 0 10px 0;
}
.page.homepage > .homepage > .inner > .player-widget > .widget-body > img.avatar {
  position: absolute;
  right: 50px;
  top: 0;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_speechbubbleskin > .widget-body > img.avatar {
  right: 30px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_speechbubbleskin > .widget-body {
  padding-left: 19px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_speechbubbleskin > .widget-body > img.avatar {
  right: 30px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_metalskin > .widget-body {
  padding-left: 38px !important;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_metalskin > .widget-body > img.avatar {
  right: 20px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_defaultskin > .widget-body {
  padding-left: 28px !important;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_defaultskin > .widget-body > img.avatar {
  right: 10px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_notepadskin > .widget-body {
  min-height: 135px !important;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_notepadskin > .widget-body > img.avatar {
  right: 10px;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_noteitskin > .widget-body {
  padding-left: 28px !important;
  min-height: 135px !important;
}
.page.homepage > .homepage > .inner > .player-widget.w_skin_noteitskin > .widget-body > img.avatar {
  right: 10px;
}
.page.homepage > .homepage > .inner > .badges-widget > .widget-body {
  height: 250px;
}
.page.homepage > .homepage > .inner > .badges-widget > .widget-body > .badges {
  width: 100%;
  float: left;
  clear: both;
  overflow: auto;
  height: 100%;
  padding: 15px 0 0 15px;
}
.page.homepage > .homepage > .inner > .badges-widget > .widget-body > .badges > .badge {
  width: 51px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  margin-right: 11px;
  margin-bottom: 15px;
  cursor: pointer;
  height: 50px;
  text-align: center;
  line-height: 50px;
  float: left;
}
.page.homepage > .homepage.loading {
  height: 150px !important;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}

.page.homepage[theme=light] > .homepage.loading {
  filter: invert(0);
}

#user-plate > .userinfo {
  width: 100%;
  float: left;
  clear: both;
  background-color: rgb(35.5652173913, 37.3434782609, 46.2347826087);
  transition: 200ms ease-in-out all;
  border-radius: 10px 10px 0 0;
  height: 80px;
  overflow: hidden;
}
#user-plate > .userinfo > .avatar {
  float: left;
  width: 115px;
  height: 80px;
  text-align: center;
  background-image: url("../images/user-plate-bg.png");
}
#user-plate > .userinfo > .informations {
  float: right;
  padding: 20px;
  width: calc(100% - 115px);
}
#user-plate > .userinfo > .informations > span {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  opacity: 0.7;
  font-size: 12px;
}
#user-plate > .userinfo > .informations > b {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 20px;
}
#user-plate > .userinfo > .informations > .vip {
  position: absolute;
  right: 20px;
  top: 20px;
}
#user-plate > .wallet {
  width: 100%;
  float: left;
  clear: both;
  padding: 15px 15px 15px 0;
}
#user-plate > .wallet > .value {
  float: left;
  width: calc(33.3333333333% - 15px);
  margin-left: 15px;
  text-align: left;
  line-height: 35px;
  height: 35px;
  padding: 0 10px;
  text-shadow: 0 1px 2px rgba(26, 40, 49, 0.2);
  border-radius: 10px;
}
#user-plate > .wallet > .value > img {
  vertical-align: middle;
}
#user-plate > .wallet > .value > span {
  color: #ffffff;
  line-height: 35px;
  float: right;
}
#user-plate > .wallet > .value.infinity {
  background-color: #ffb537;
}
#user-plate > .wallet > .value.ducket {
  background-color: #d798d7;
}
#user-plate > .wallet > .value.diamond {
  background-color: #68c7cc;
}

#user-plate[theme=light] > .userinfo {
  background-color: rgb(175.4848484848, 210.8787878788, 238.5151515152);
}
#user-plate[theme=light] > .userinfo > .informations > span {
  color: rgb(64.3404255319, 67.5574468085, 86.8595744681);
}
#user-plate[theme=light] > .userinfo > .informations > b {
  color: #3c3f51;
}

.friends-online > .content > .arrow {
  width: 28px;
  height: 80px;
  background-color: #3c3f51;
  overflow: hidden;
  border-radius: 10px;
  transition: 200ms ease-in-out all;
  float: left;
  cursor: pointer;
}
.friends-online > .content > .arrow:hover {
  opacity: 0.8;
}
.friends-online > .content > .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background-image: url("../images/chevron-white.png");
  background-repeat: no-repeat;
  background-position: center center;
  transition: 200ms ease-in-out all;
}
.friends-online > .content > .arrow.right {
  position: absolute;
  right: 15px;
  top: 0;
}
.friends-online > .content > .arrow.right::after {
  transform: rotate(180deg);
}
.friends-online > .content > .friendlist {
  width: calc(100% - 15px - 28px - 28px);
  white-space: nowrap;
  overflow: hidden;
}
.friends-online > .content > .friendlist > .friend {
  display: inline-block;
  width: 77.7px;
  margin-left: 15px;
  background-image: url("../images/friend-online.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border-radius: 10px 10px 20px 20px;
  height: 80px;
  cursor: pointer;
  text-align: center;
  transition: 200ms ease-in-out all, 0ms margin-left;
}
.friends-online > .content > .friendlist > .friend.unlisted {
  background-image: none;
  background-color: #3c3f51;
  border-radius: 10px;
  opacity: 0.3;
}
.friends-online > .content > .friendlist > .friend > .avatar {
  width: 100%;
  float: left;
  clear: both;
  margin-top: -10px;
  height: 80px;
  overflow: hidden;
}
.friends-online > .content > .friendlist > .friend > .username {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  line-height: 25px;
  color: #ffffff;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  transition: 200ms ease-in-out all;
  font-weight: 500;
  background-color: #3c3f51;
  border-radius: 0 0 10px 10px;
}

.friends-online[theme=light] > .content > .arrow {
  background-color: #eaeaea;
}
.friends-online[theme=light] > .content > .arrow::after {
  background-image: url("../images/chevron-black.png");
}
.friends-online[theme=light] > .content > .friendlist {
  float: left;
  width: calc(100% - 15px - 25px - 25px);
}
.friends-online[theme=light] > .content > .friendlist > .friend > .username {
  color: #3c3f51;
  background-color: #dddddd;
}
.friends-online[theme=light] > .content > .friendlist > .friend.unlisted {
  background-color: #dddddd;
}

.box-notifications > .title > .btn {
  float: right;
  margin-left: 8px;
}
.box-notifications > .content > .loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.box-notifications > .content:not(.loading) {
  max-height: 300px;
  overflow: auto;
}
.box-notifications > .content > .line {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 10px;
  padding: 12px 15px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: 200ms ease-in-out all;
}
.box-notifications > .content > .line.unviewed {
  background-color: rgba(52, 122, 226, 0.2);
}
.box-notifications > .content > .line:first-child {
  margin-top: 0;
}
.box-notifications > .content > .line > .content {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.box-notifications > .content > .line > .content > span {
  width: 100%;
  float: left;
  clear: both;
  font-size: 12px;
  color: #eaeaea;
  margin-bottom: 2px;
  transition: 200ms ease-in-out all;
}
.box-notifications > .content > .line > .content > a {
  color: #5797f8;
  transition: 200ms ease-in-out all;
}

.box-notifications[theme=light] > .content > .loading {
  filter: invert(0);
}
.box-notifications[theme=light] > .content > .line.unviewed {
  background-color: rgba(226, 180, 52, 0.2);
}
.box-notifications[theme=light] > .content > .line > .content {
  color: #3c3f51;
}
.box-notifications[theme=light] > .content > .line > .content > span {
  color: rgb(70.8510638298, 74.3936170213, 95.6489361702);
}
.box-notifications[theme=light] > .content > .line > .content > a {
  color: #365aa3;
}

.slidernews {
  width: 100%;
  float: left;
  clear: both;
  height: 300px;
  margin-top: 15px;
}
.slidernews > .cubes {
  position: absolute;
  top: 40px;
  left: 30px;
  right: 40px;
  z-index: 9999999;
}
.slidernews > .cubes > .cube {
  float: left;
  width: calc(20% - 80px);
  margin-left: 10px;
  height: 5px;
  border-radius: 10px;
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
  cursor: pointer;
}
.slidernews > .cubes > .cube.active {
  background-color: #347ae2;
}
.slidernews > .article {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: 10px;
  padding: 40px;
  opacity: 0;
  transition: 200ms ease-in-out all;
  z-index: -1;
}
.slidernews > .article.active {
  opacity: 1;
  z-index: 1;
}
.slidernews > .article > span {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 20px;
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(26, 40, 49, 0.2);
}
.slidernews > .article > h1 {
  width: 100%;
  float: left;
  clear: both;
  font-size: 25px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(26, 40, 49, 0.2);
}
.slidernews > .article > p {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 20px;
  font-size: 14px;
  line-height: 17px;
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(26, 40, 49, 0.2);
}
.slidernews > .article > a {
  position: absolute;
  left: 40px;
  bottom: 40px;
  height: 45px;
  line-height: 45px;
  background-color: #3c3f51;
  color: #ffffff;
  padding: 0 0 0 20px;
  border-radius: 10px;
  font-size: 14px;
}
.slidernews > .article > a::before {
  content: "";
  width: 40px;
  height: 45px;
  margin-left: 20px;
  float: right;
  background-image: url("../images/dark-arrow.png");
  transition: 200ms ease-in-out all;
  background-position: left center;
  background-repeat: no-repeat;
}

.slidernews[theme=light] > .cubes > .cube {
  background-color: #ffffff;
}
.slidernews[theme=light] > .cubes > .cube.active {
  background-color: #f27e46;
}
.slidernews[theme=light] > .article a::before {
  background-image: url("../images/light-arrow.png");
}

.specific-event > .body > .error {
  margin: 15px;
  width: calc(100% - 30px);
}
.specific-event > .body > .content > .description {
  width: 100%;
  float: left;
  clear: both;
  color: #3c3f51;
  background-color: #eaeaea;
  margin-bottom: 15px;
  padding: 15px 18px;
  border-radius: 10px;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.specific-event > .body > .content > .body {
  width: 100%;
  float: left;
  clear: both;
  padding: 0 5px;
}
.specific-event > .body > .content > .body strong,
.specific-event > .body > .content > .body b {
  font-weight: bold;
}
.specific-event > .body > .content > .body * {
  line-height: 23px;
  transition: 200ms ease-in-out all;
  color: #3c3f51;
  font-size: 14px;
}
.specific-event > .body > .content > .body p {
  padding-bottom: 1em;
}
.specific-event > .body > .content > .body img {
  max-width: 100%;
  height: auto !important;
}

.rooms-opened > .content > .loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.rooms-opened > .content > .room {
  width: 100%;
  float: left;
  clear: both;
  height: 67px;
  border-radius: 10px;
  background-color: #3c3f51;
  margin-bottom: 10px;
  transition: 200ms ease-in-out all;
}
.rooms-opened > .content > .room.unvisited {
  background-image: none;
  background-color: #3c3f51;
  opacity: 0.3;
}
.rooms-opened > .content > .room:last-child {
  margin-bottom: 0;
}
.rooms-opened > .content > .room > .image {
  float: left;
  width: 47px;
  height: 47px;
  border-radius: 10px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 10px;
}
.rooms-opened > .content > .room > .description {
  float: left;
  width: calc(100% - 45px - 20px - 90px);
  padding-top: 15px;
  height: 65px;
  overflow: hidden;
}
.rooms-opened > .content > .room > .description > b {
  width: 100%;
  float: left;
  clear: both;
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.rooms-opened > .content > .room > .description > p {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 5px;
  color: #ffffff;
  opacity: 0.5;
  font-size: 12px;
  transition: 200ms ease-in-out all;
}
.rooms-opened > .content > .room > .view {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 90px;
  background-image: url("../images/room-dark.png");
  background-position: right center;
  background-repeat: no-repeat;
  border-radius: 0 10px 10px 0;
  text-align: center;
  padding: 12px 0 0 21px;
  transition: 200ms ease-in-out all;
}
.rooms-opened > .content > .room > .view > b {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 20px;
}
.rooms-opened > .content > .room > .view > span {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 10px;
  text-transform: uppercase;
}

.rooms-opened[theme=light] > .content > .loading {
  filter: invert(0);
}
.rooms-opened[theme=light] > .content > .room {
  background-color: #eaeaea;
}
.rooms-opened[theme=light] > .content > .room.unvisited {
  background-color: #eaeaea;
}
.rooms-opened[theme=light] > .content > .room > .description > b {
  color: #3c3f51;
}
.rooms-opened[theme=light] > .content > .room > .description > p {
  color: #3c3f51;
}
.rooms-opened[theme=light] > .content > .room > .view {
  background-image: url("../images/room-light.png");
}

.page.events .loading:not(.na) {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.page.events > .left {
  float: left;
  width: 400px;
}
.page.events > .left > div {
  width: 100%;
  float: left;
  clear: both;
}
.page.events > .left .last > .content > a {
  float: left;
  clear: both;
  color: #eaeaea;
  transition: 200ms ease-in-out all;
  line-height: 30px;
  font-size: 14px;
}
.page.events > .left .last > .content > a.notPublished {
  color: #dd3f3f;
}
.page.events > .left .last > .content > a > .chevron {
  width: 24px;
  height: 30px;
  float: left;
  margin-right: 5px;
  background-image: url("../images/chevron-blue.png");
  background-repeat: no-repeat;
  background-position: center center;
  filter: grayscale(100);
  transition: 200ms ease-in-out all;
}
.page.events > .left .last > .content > a:hover, .page.events > .left .last > .content > a.slc {
  color: #347ae2;
}
.page.events > .left .last > .content > a:hover > .chevron, .page.events > .left .last > .content > a.slc > .chevron {
  filter: grayscale(0);
}
.page.events > .right {
  float: left;
  margin-left: 15px;
  width: calc(100% - 400px - 15px - 160px - 15px);
}
.page.events > .right .comments {
  width: 100%;
  float: left;
  clear: both;
}
.page.events > .right .comments > .error {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.page.events > .right .comments > .box-comment > .content > .left {
  float: left;
  width: 70px;
  padding-right: 15px;
}
.page.events > .right .comments > .box-comment > .content > .left > .avatar {
  width: 100%;
  float: left;
  clear: both;
  height: 66px;
  overflow: hidden;
  text-align: center;
}
.page.events > .right .comments > .box-comment > .content > .left > .avatar > img {
  margin-top: -5px;
}
.page.events > .right .comments > .box-comment > .content > .right {
  float: right;
  width: calc(100% - 80px);
}
.page.events > .right .comments > .box-comment > .content > .right > .top {
  width: 100%;
  float: left;
  clear: both;
  padding: 15px;
  padding-left: 0;
  color: #ffffff;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.events > .right .comments > .box-comment > .content > .right > .top > a {
  color: #347ae2;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.events > .right .comments > .box-comment > .content > .right > .value {
  width: 100%;
  float: left;
  clear: both;
  word-wrap: break-word;
  color: #eaeaea;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}

.page.events[theme=light] .loading {
  filter: invert(0);
}
.page.events[theme=light] > .left .last > .content > a {
  color: #3c3f51;
}
.page.events[theme=light] > .left .last > .content > a > .chevron {
  background-image: url("../images/chevron-orange.png");
}
.page.events[theme=light] > .left .last > .content > a:hover, .page.events[theme=light] > .left .last > .content > a.slc {
  color: #5ba4dd;
}
.page.events[theme=light] > .left .last > .content > a:hover > .chevron, .page.events[theme=light] > .left .last > .content > a.slc > .chevron {
  filter: grayscale(0);
}
.page.events[theme=light] > .right .comments > .box-comment > .content > .right > .top {
  color: #3c3f51;
}
.page.events[theme=light] > .right .comments > .box-comment > .content > .right > .top > a {
  color: #5ba4dd;
}
.page.events[theme=light] > .right .comments > .box-comment > .content > .right > .value {
  color: rgb(81.7021276596, 85.7872340426, 110.2978723404);
}

.page.staff > .content > .col > .loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.page.staff > .content > .col > .list > .title {
  margin: 15px 15px 0 15px;
  line-height: 45px;
  padding: 0 15px;
  border-radius: 10px;
  width: calc(100% - 30px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.page.staff > .content > .col > .list > .title > img {
  position: absolute;
  top: 6px;
  right: 5px;
}
.page.staff > .content > .col > .list > .content > .error {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.page.staff > .content > .left {
  float: left;
  width: calc(100% - 400px - 15px - 160px - 15px);
}
.page.staff > .content > .left > .list > .content > .box-staff {
  float: left;
  margin-right: 15px;
  width: calc(50% - 7.5px);
  margin-top: 15px;
}
.page.staff > .content > .left > .list > .content > .box-staff:nth-child(2n+2) {
  margin-right: 0;
}
.page.staff > .content > .right {
  float: left;
  margin-left: 15px;
  width: 400px;
}
.page.staff > .content > .right > .list > .content > .box-staff {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.page.staff > .content > .tablet {
  display: none;
  margin-top: -20px;
}

.page.staff[theme=light] > .content > .col > .loading {
  filter: invert(0);
}
.page.staff[theme=light] > .content > .col > .list > .title {
  color: #ffffff;
}

.page.couples > .content > .left {
  float: left;
  width: calc(100% - 400px - 15px - 160px - 15px);
}
.page.couples > .content > .left > .couples > .content.loading {
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.page.couples > .content > .left > .couples > .content.search {
  margin-bottom: 15px;
  height: 45px;
}
.page.couples > .content > .left > .couples > .content.search > input {
  width: 100%;
  float: left;
  clear: both;
  height: 45px;
  line-height: 45px;
  color: #3c3f51;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 0 45px 0 18px;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.couples > .content > .left > .couples > .content.search > input[theme=light] {
  background-color: #eaeaea;
  border-color: #ddd;
}
.page.couples > .content > .left > .couples > .content.search::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  width: 40px;
  background-image: url("../images/search.gif");
  background-repeat: no-repeat;
  background-position: center center;
}
.page.couples > .content > .left > .couples > .content > .top {
  width: 100%;
  float: left;
  clear: both;
}
.page.couples > .content > .left > .couples > .content > .all.mt {
  margin-top: -15px;
}
.page.couples > .content > .left > .couples > .content > .box-error.mt {
  margin-top: 15px;
}
.page.couples > .content > .left > .couples > .content .couple-box:not(.top) {
  float: left;
  width: calc(100% / 2 - (15px - 15px / 2));
  margin-right: 15px;
  margin-top: 15px;
}
.page.couples > .content > .left > .couples > .content .couple-box:not(.top):nth-child(2n+2) {
  margin-right: 0;
}
.page.couples > .content > .left > .couples > .content .couple-box.top {
  float: left;
  width: calc(100% / 3 - (15px - 15px / 3));
  margin-right: 15px;
  background-color: #c39bd3 !important;
}
.page.couples > .content > .left > .couples > .content .couple-box.top:nth-child(3n+3) {
  margin-right: 0;
}
.page.couples > .content > .left > .couples > .content > #pagination {
  margin-top: 15px;
}
.page.couples > .content > .right {
  float: left;
  margin-left: 15px;
  width: 400px;
}
.page.couples > .content > .right > .box-error {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}

.page.couples[theme=light] > .content > .left > .couples > .content.loading {
  filter: invert(0);
}

.page.photos > .content > .left {
  width: calc(100% - 160px);
  float: left;
}
.page.photos > .content > .left .loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.page.photos > .content > .left > .photos {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 15px;
}
.page.photos > .content > .left > .photos > .content > .box-photo {
  width: calc(25% - 15px);
  float: left;
  margin-top: 15px;
  margin-right: 15px;
}
.page.photos > .content > .left > .photos > .content > .box-photo:nth-child(4n+4) {
  margin-right: 0;
}
.page.photos > .content > .left > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  width: calc(100% - 15px);
}
.page.photos > .content > .left > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.photos > .content > .left > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.page.photos > .content > .left > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.photos > .content > .left > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.page.photos[theme=light] > .content > .left > .loading {
  filter: invert(0);
}

.page.organisations > .content > .left {
  float: left;
  width: calc(100% - 450px - 15px - 160px - 15px);
  margin-left: 15px;
}
.page.organisations > .content > .left > .global-box > .content > p.description {
  margin-bottom: 15px;
}
.page.organisations > .content > .left > .global-box > .content > a {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.page.organisations > .content > .left > .global-box > .content > a > img {
  border-radius: 10px;
  width: 100%;
}
.page.organisations > .content > .right {
  float: left;
  width: 450px;
}

.page.jobs > .content {
  width: calc(100% - 160px - 15px);
  float: left;
}
.page.jobs > .content .error {
  width: calc(100% - 60px);
  margin: 30px;
}
.page.jobs > .content > .background {
  width: 100%;
  float: left;
  clear: both;
  height: 300px;
  background: url("../images/jobs.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  margin-top: 15px;
  border-radius: 10px;
}
.page.jobs > .content > .background::before {
  border-radius: 10px;
  content: "";
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.page.jobs > .content > .background > h1 {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  text-shadow: 0 2px 10px #000;
  color: #ffffff;
  font-size: 40px;
  line-height: 130px;
  font-weight: bold;
}
.page.jobs > .content > .form {
  width: calc(100% - 60px);
  margin-left: 30px;
  margin-top: -115px;
}
.page.jobs > .content > .form > .title {
  padding: 30px;
  padding-bottom: 20px;
}
.page.jobs > .content > .form > .content {
  padding: 0;
  margin-top: -20px;
}
.page.jobs > .content > .form > .content.big {
  transition: 200ms ease-in-out all;
  background-color: #3c3f51;
  padding-bottom: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  margin-left: 30px;
  width: calc(100% - 60px);
}
.page.jobs > .content > .form > .content > p.description {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 20px;
  line-height: 20px;
  opacity: 1;
  padding: 10px 30px 10px 30px;
}
.page.jobs > .content > .form > .content > p.description i {
  color: #ffffff;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.jobs > .content > .form > .content > p.description b {
  font-weight: bold;
}
.page.jobs > .content > .form > .content > p.description:not(.noitem)::before {
  content: "";
  float: left;
  background-image: url("../images/chevron-blue.png");
  transition: 200ms ease-in-out all;
  height: 20px;
  width: 20px;
  background-position: center center;
  margin-right: 5px;
}
.page.jobs > .content > .form > .content > p.title {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 20px;
  opacity: 1;
  padding: 10px 30px 0 30px;
  font-size: 18px;
  font-weight: bold;
}
.page.jobs > .content > .form > .content > form.form {
  width: 100%;
  float: left;
  clear: both;
  padding: 0 30px 30px 30px;
  background-color: rgb(37.7826086957, 39.6717391304, 49.1173913043);
  transition: 200ms ease-in-out all;
  border-radius: 0 0 10px 10px;
  margin-top: 30px;
  border-top: 1px solid transparent;
}
.page.jobs > .content > .form > .content > form.form > p {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  transition: 200ms ease-in-out all;
  margin-top: 30px;
}
.page.jobs > .content > .form > .content > form.form > .input {
  margin-top: 30px;
}
.page.jobs > .content > .form > .content > form.form > .input.z {
  z-index: 80;
}
.page.jobs > .content > .form > .content > form.form > .input:not(.demi) {
  width: 100%;
  float: left;
  clear: both;
}
.page.jobs > .content > .form > .content > form.form > .input.demi {
  float: left;
  width: calc(50% - 15px);
}
.page.jobs > .content > .form > .content > form.form > .input.demi.right {
  margin-left: 30px;
}
.page.jobs > .content > .form > .content > form.form > .input > label {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 10px;
  color: #eaeaea;
  transition: 200ms ease-in-out all;
}
.page.jobs > .content > .form > .content > form.form > .input > input:not([type=submit]),
.page.jobs > .content > .form > .content > form.form > .input > textarea {
  width: 100%;
  float: left;
  clear: both;
  resize: none;
  background-color: #3c3f51;
  color: #ffffff;
  border-radius: 10px;
  height: 50px;
  transition: 200ms ease-in-out all;
  padding: 0 17px;
  border: 1px solid transparent;
}
.page.jobs > .content > .form > .content > form.form > .input > input:not([type=submit])::placeholder,
.page.jobs > .content > .form > .content > form.form > .input > textarea::placeholder {
  color: #eaeaea;
  opacity: 0.5;
  transition: 200ms ease-in-out all;
}
.page.jobs > .content > .form > .content > form.form > .input > textarea {
  height: 200px;
  line-height: 16px;
  padding: 20px 17px;
  border-radius: 10px 10px 0 0;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 10px;
  background: #3c3f51;
  padding: 0 17px 15px 17px;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview * {
  color: #ffffff;
  font-size: unset;
  list-style: unset;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview p {
  margin-top: 15px;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview h1, .page.jobs > .content > .form > .content > form.form > .input > .markdown-preview h2, .page.jobs > .content > .form > .content > form.form > .input > .markdown-preview h3 {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
  font-weight: 900;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview h1 {
  font-size: 24px;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview h2 {
  font-size: 22px;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview h3 {
  font-size: 20px;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview ul {
  width: 100%;
  float: left;
  clear: both;
  list-style-type: disc;
  margin-left: 15px;
  margin-top: 15px;
}
.page.jobs > .content > .form > .content > form.form > .input > .markdown-preview strong {
  font-weight: 900;
}
.page.jobs > .content > .form > .content > form.form > .input > input[type=submit] {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.page.jobs > .content > .form > .content > form.form > .input > input[type=submit] > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.jobs > .content > .form > .content > form.form > .input > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.page.jobs > .content > .form > .content > form.form > .input > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.jobs > .content > .form > .content > form.form > .input > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.jobs > .content > .form > .content > form.form > .input-help {
  background: #2c2f3a;
  padding: 10px 17px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 0;
}
.page.jobs > .content > .form > .content > form.form > .input-help svg {
  vertical-align: -3px;
  margin-right: 5px;
}
.page.jobs > .content > .form > .content > form.form > .input-help b {
  color: #ffffff;
  font-size: 14px;
}

.page.jobs[theme=light] > .content > .form > .content.big {
  background-color: #eaeaea;
}
.page.jobs[theme=light] > .content > .form > .content > p.description::before {
  background-image: url("../images/chevron-orange.png");
}
.page.jobs[theme=light] > .content > .form > .content > p.description i {
  color: #3c3f51;
}
.page.jobs[theme=light] > .content > .form > .content > form.form {
  background-color: rgb(247.35, 247.35, 247.35);
  border-top: 1px solid #ddd;
}
.page.jobs[theme=light] > .content > .form > .content > form.form > p {
  color: #3c3f51;
}
.page.jobs[theme=light] > .content > .form > .content > form.form > .input > label {
  color: #3c3f51;
}
.page.jobs[theme=light] > .content > .form > .content > form.form > .input > input,
.page.jobs[theme=light] > .content > .form > .content > form.form > .input > textarea {
  background-color: #eaeaea;
  color: #3c3f51;
  border-color: #ddd;
}
.page.jobs[theme=light] > .content > .form > .content > form.form > .input > input::placeholder,
.page.jobs[theme=light] > .content > .form > .content > form.form > .input > textarea::placeholder {
  color: #3c3f51;
}
.page.jobs[theme=light] > .content > .form > .content > form.form > .input > input[type=submit] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.jobs[theme=light] > .content > .form > .content > form.form > .input > input:not([type=submit]) {
  border: 1px solid #ddd;
}

.page.room > .left {
  float: left;
  width: calc(100% - 160px - 15px);
}
.page.room > .left.loading {
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.page.room > .left.room {
  margin-top: 15px;
  height: 74px;
  border-radius: 10px;
  background-color: #282a34;
  margin-bottom: 10px;
  transition: 200ms ease-in-out all;
}
.page.room > .left.room > .image {
  float: left;
  width: 47px;
  height: 47px;
  border-radius: 10px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 10px;
}
.page.room > .left.room > .image > img {
  max-height: 57px;
  border-radius: 10px;
  margin-right: 15px;
}
.page.room > .left.room > .description {
  float: left;
  width: calc(100% - 45px - 20px - 90px);
  padding-top: 15px;
  margin-left: 10px;
}
.page.room > .left.room > .description > b {
  width: 100%;
  float: left;
  clear: both;
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.room > .left.room > .description > p {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 5px;
  color: #ffffff;
  opacity: 0.5;
  font-size: 12px;
  transition: 200ms ease-in-out all;
}
.page.room > .left.room > .btn {
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  position: absolute;
  right: 15px;
  top: 15px;
}
.page.room > .left.room > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.room > .left.room > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.page.room > .left.room > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.room > .left.room > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.room > .left > .box-error {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}

.page.room[theme=light] > .left.loading {
  filter: invert(0);
}
.page.room[theme=light] > .left.room {
  background-color: #ffffff;
}
.page.room[theme=light] > .left.room > .description > b {
  color: #3c3f51;
}
.page.room[theme=light] > .left.room > .description > p {
  color: #3c3f51;
}
.page.room[theme=light] > .left > .box-error {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}

.md-photo-control > .title > .avatar {
  background-color: #347ae2;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  float: left;
  margin-right: 20px;
  transition: 200ms ease-in-out all;
}
.md-photo-control > .title > .avatar > img {
  margin-top: -9px;
  left: -5px;
}
.md-photo-control > .title > .infos {
  margin-top: 6px;
}
.md-photo-control > .title > .infos > h3 {
  color: #ffffff;
  transition: 200ms ease-in-out all;
  margin-top: 0;
}
.md-photo-control > .title > .infos > .description {
  color: #868686;
  font-size: 14px;
  margin-top: -15px;
}
.md-photo-control > .content > img {
  border-radius: 10px;
  left: -112px;
  scale: 3;
}
.md-photo-control > .content > .likes-title {
  font-size: 12px;
  margin-bottom: -9px;
  margin-top: 10px;
  margin-left: 5px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.md-photo-control > .content > .likes {
  padding: 10px;
  display: inline-flex;
}
.md-photo-control > .content > .likes > .like-avatar {
  background-color: #e2b435;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-left: -12px;
  border: 5px solid #282a34;
  float: left;
  transition: 200ms ease-in-out all;
}
.md-photo-control > .content > .likes > .like-avatar > img {
  margin-top: -3px;
}
.md-photo-control > .content > .likes > .like-more-counter {
  background-color: #347ae2;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-left: -12px;
  border: 5px solid #282a34;
  float: left;
  transition: 200ms ease-in-out all;
}
.md-photo-control > .content > .likes > .like-more-counter > span {
  margin-top: 5px;
  margin-left: 2px;
  font-size: 11px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.md-photo-control > .content > .likes > p {
  margin-top: 5px;
  font-size: 12px;
  color: #ffffff;
  margin-left: -5px;
  transition: 200ms ease-in-out all;
}
.md-photo-control > .content > .remove-ob h4 {
  margin-bottom: 5px;
  margin-top: 0px;
  color: #ffffff;
}
.md-photo-control > .content > .remove-ob p {
  margin-bottom: 20px;
  font-size: 14px;
  color: #ffffff;
}
.md-photo-control > .content > .remove-ob .btn {
  margin-bottom: 10px;
}
.md-photo-control > .content > .actions {
  width: 100%;
  background-color: #3c3f51;
  border-radius: 10px;
  padding: 10px;
  min-height: 60px;
  transition: 200ms ease-in-out all;
}
.md-photo-control > .content > .actions > .left {
  float: left;
  width: 48%;
}
.md-photo-control > .content > .actions > .right {
  float: right;
  width: 48%;
}
.md-photo-control > .content > .actions .btn {
  clear: both;
  min-height: 40px;
  line-height: 40px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.md-photo-control > .content > .actions .btn.danger {
  background-color: #dd3f3f;
}
.md-photo-control > .content > .actions .btn.danger:hover {
  background-color: #ce5b5b;
}
.md-photo-control > .content > .actions .btn.like {
  background-color: #347ae2;
}
.md-photo-control > .content > .actions .btn.like:hover {
  background-color: #1a5dc2;
}

.md-photo-control[theme=light] > .title > .avatar {
  background-color: #5ba4dd;
}
.md-photo-control[theme=light] > .title > .infos > h3 {
  color: #3c3f51;
}
.md-photo-control[theme=light] > .content > .actions {
  background-color: #eaeaea;
}
.md-photo-control[theme=light] > .content > .actions .btn.like {
  background-color: #5ba4dd;
}
.md-photo-control[theme=light] > .content > .actions .btn.like:hover {
  background-color: #365aa3;
}
.md-photo-control[theme=light] > .content > .remove-ob h4 {
  color: #3c3f51;
}
.md-photo-control[theme=light] > .content > .remove-ob p {
  color: #3c3f51;
}
.md-photo-control[theme=light] > .content > .likes > .like-avatar {
  border-color: #ffffff;
}
.md-photo-control[theme=light] > .content > .likes > .like-more-counter {
  background-color: #3c3f51;
  border-color: #ffffff;
}
.md-photo-control[theme=light] > .content > .likes > p {
  color: #3c3f51;
}
.md-photo-control[theme=light] > .content > .likes-title {
  color: #3c3f51;
}

.couple-box {
  float: left;
  border-radius: 10px;
  background-color: #3c3f51;
  padding: 10px 20px 20px 20px;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.couple-box > .users {
  width: 92px;
  height: 70px;
  float: left;
}
.couple-box > .users > .user {
  position: absolute;
  overflow: hidden;
  height: 70px;
  border-radius: 100px;
}
.couple-box > .users > .user.second {
  right: 0;
  z-index: -1;
}
.couple-box > .names {
  float: left;
  height: 50px;
  margin-top: 30px;
  margin-left: 10px;
}
.couple-box > .names > a {
  width: 100%;
  float: left;
  clear: both;
  font-size: 14px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.couple-box > .buttons {
  position: absolute;
  top: 25px;
  right: 20px;
}
.couple-box > .buttons > span,
.couple-box > .buttons > .vote {
  width: 100%;
  float: left;
  clear: both;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.couple-box > .buttons > .vote {
  padding: 0 10px;
  border-radius: 10px;
  background-color: #b656b6;
  cursor: pointer;
}
.couple-box > .buttons > .vote:not(.disabled):hover {
  background-color: rgb(197.3842975207, 121.6157024793, 197.3842975207);
}
.couple-box > .buttons > .vote.disabled {
  opacity: 0.3;
}
.couple-box.top {
  background-image: url("../images/love-bg.png");
  overflow: hidden;
  border: none;
}
.couple-box.top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  height: 140px;
  background-color: rgba(40, 42, 52, 0.2);
  z-index: -1;
  border-radius: 200px/50px;
}
.couple-box.top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50px;
  height: 140px;
  background-color: rgba(40, 42, 52, 0.2);
  z-index: -1;
  border-radius: 200px/50px;
}
.couple-box.top > .users {
  float: none;
  margin: auto;
  margin-top: 10px;
}
.couple-box.top > .names {
  height: auto;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  text-align: center;
  padding: 20px 0 30px 40px;
}
.couple-box.top > .names::after {
  color: rgba(255, 255, 255, 0.7);
  font-size: 27px;
  position: absolute;
  left: 30px;
  height: 50px;
  line-height: 50px;
  transform: rotateZ(-13deg);
  font-weight: bold;
}
.couple-box.top > .names > a {
  color: #fff;
  font-size: 16px;
  line-height: 25px;
}
.couple-box.top[data-pos="1"] > .names::after {
  content: "#1";
}
.couple-box.top[data-pos="2"] > .names::after {
  content: "#2";
}
.couple-box.top[data-pos="3"] > .names::after {
  content: "#3";
}
.couple-box.top > .buttons {
  position: relative;
  top: 0;
  right: 0;
  max-width: 120px;
  margin: auto;
}
.couple-box.top > .buttons > .vote {
  background-color: #c39bd3;
}
.couple-box.top > .buttons > .vote:hover {
  background-color: rgb(216.25, 190.4166666667, 226.5833333333);
}

.couple-box:not(.top)[theme=light] {
  background-color: #eaeaea;
  border-color: #ddd;
}
.couple-box:not(.top)[theme=light] > .names > a {
  color: #3c3f51;
}
.couple-box:not(.top)[theme=light] > .buttons > span,
.couple-box:not(.top)[theme=light] > .buttons > .vote {
  color: #3c3f51;
}
.couple-box:not(.top)[theme=light] > .buttons > .vote {
  color: #ffffff;
}

.ask-for-couple > .content > input:not([type=submit]) {
  width: 100%;
  float: left;
  clear: both;
  line-height: 45px;
  color: #3c3f51;
  padding: 0 15px;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 14px;
  margin-top: 15px;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
  margin-bottom: 15px;
}
.ask-for-couple > .content > input[type=submit] {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.ask-for-couple > .content > input[type=submit] > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.ask-for-couple > .content > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.ask-for-couple > .content > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.ask-for-couple > .content > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.ask-for-couple[theme=light] > .content > input:not([type=submit]) {
  background-color: #eaeaea;
  border-color: #ddd;
}

.my-couple > .content > .couple-box {
  width: 100%;
  float: left;
  clear: both;
}
.my-couple > .content > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 15px;
}
.my-couple > .content > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.my-couple > .content > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.my-couple > .content > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.my-couple > .content > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.my-couple > .content > .btn.cancel {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #dd3f3f;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.my-couple > .content > .btn.cancel > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.my-couple > .content > .btn.cancel:hover {
  background-color: rgb(228.6725663717, 106.3274336283, 106.3274336283);
}
.my-couple > .content > .btn.cancel[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.my-couple > .content > .btn.cancel[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.my-couple > .content > .onboarding > .user {
  float: left;
  background-color: #3c3f51;
  border: 1px solid transparent;
  border-radius: 10px;
  width: 100px;
  padding: 10px 0 20px 0;
  text-align: center;
  transition: 200ms ease-in-out all;
}
.my-couple > .content > .onboarding > .onboardingContent {
  float: right;
  width: calc(100% - 100px - 15px);
  transition: 200ms ease-in-out all;
}
.my-couple > .content > .onboarding > .onboardingContent h5 {
  margin-bottom: 10px;
  font-weight: 900;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 16px;
  line-height: 16px;
}
.my-couple > .content > .onboarding > .onboardingContent p {
  font-size: 13px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.my-couple > .content > .onboarding[theme=light] > .user {
  background-color: #eaeaea;
  border-color: #dddddd;
}
.my-couple > .content > .onboarding[theme=light] > .onboardingContent h5 {
  color: #3c3f51;
}
.my-couple > .content > .onboarding[theme=light] > .onboardingContent p {
  color: #3c3f51;
}

.couple-requests > .content > .users {
  width: 100%;
  float: left;
  clear: both;
}
.couple-requests > .content > .users > .line {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 10px;
  line-height: 62px;
  padding: 0 15px;
}
.couple-requests > .content > .users > .line:first-child {
  margin-top: 15px;
}
.couple-requests > .content > .users > .line:nth-child(2n+1) {
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.couple-requests > .content > .users > .line > .avatar {
  float: left;
}
.couple-requests > .content > .users > .line > .avatar > img {
  float: left;
}
.couple-requests > .content > .users > .line > span {
  float: left;
  margin-left: 10px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
}
.couple-requests > .content > .users > .line > .buttons {
  float: right;
}
.couple-requests > .content > .users > .line > .buttons > .btn {
  margin-left: 15px;
  margin-top: 15px;
}
.couple-requests > .content > .users > .line > .buttons > .btn.accept {
  float: left;
  min-height: 35px;
  line-height: 35px;
  background-color: #59b656;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.couple-requests > .content > .users > .line > .buttons > .btn.accept > img {
  line-height: 35px;
  vertical-align: middle;
  margin-top: -1px;
}
.couple-requests > .content > .users > .line > .buttons > .btn.accept:hover {
  background-color: rgb(123.9834710744, 197.3842975207, 121.6157024793);
}
.couple-requests > .content > .users > .line > .buttons > .btn.decline {
  float: left;
  min-height: 35px;
  line-height: 35px;
  background-color: #dd3f3f;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.couple-requests > .content > .users > .line > .buttons > .btn.decline > img {
  line-height: 35px;
  vertical-align: middle;
  margin-top: -1px;
}
.couple-requests > .content > .users > .line > .buttons > .btn.decline:hover {
  background-color: rgb(228.6725663717, 106.3274336283, 106.3274336283);
}

.couple-requests[theme=light] > .content > .users > .line:nth-child(2n+1) {
  background-color: #eaeaea;
  border-color: #ddd;
}
.couple-requests[theme=light] > .content > .users > .line > span {
  color: #3c3f51;
}

.box-photo {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: 200ms ease-in-out all;
}
.box-photo > .picture {
  width: 100%;
  float: left;
  clear: both;
}
.box-photo > .picture > img {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 10px;
}
.box-photo > .informations {
  float: left;
}
.box-photo > .informations > .avatar {
  float: left;
  margin-left: 5px;
}
.box-photo > .informations > .username {
  line-height: 62px;
  margin-left: 5px;
  color: #ffffff;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.box-photo > .right {
  float: right;
}
.box-photo > .right > .btn {
  float: left;
  margin-right: 15px;
  margin-top: 15px;
  width: 35px;
  height: 35px;
  background-color: #dd3f3f;
  color: #ffffff;
  border-radius: 10px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
  font-size: 17px;
  cursor: pointer;
  transition: 200ms ease-in-out all;
}
.box-photo > .right > .btn.like {
  background-image: url("../images/like.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  padding-left: 44px;
  line-height: 35px;
  width: auto;
}
.box-photo > .right > .btn.liked {
  color: #347ae2;
}
.box-photo > .picture-info-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  border-radius: 10px;
  opacity: 0;
  transition: 200ms ease-in-out all;
}
.box-photo > .picture-info-overlay:hover {
  opacity: 1;
  background-color: rgba(50, 122, 226, 0.75);
  transition: background-color 0.3s ease;
}
.box-photo > .picture-info-overlay > .overlay-content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  text-align: center;
}
.box-photo > .picture-info-overlay > .overlay-content h4 {
  color: #ffffff;
  text-shadow: 0 2px 10px #3c3f51;
}
.box-photo > .picture-info-overlay > .overlay-content .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 40px;
  line-height: 40px;
  background-color: #282a34;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.box-photo > .picture-info-overlay > .overlay-content .btn:hover {
  background-color: #3c3f51;
}
.box-photo > .picture-info-overlay > .overlay-content-small > img {
  display: block;
  margin: 0 auto;
  float: none;
}
.box-photo > .picture-info-overlay > .overlay-content-small > .right-content {
  position: absolute;
  width: 100%;
  bottom: 12px;
  left: 0;
  right: auto;
  margin: 0;
  margin-top: 0;
  text-align: center;
}
.box-photo > .picture-info-overlay > .overlay-content-small > .right-content > h4 {
  color: #ffffff;
  text-shadow: 0 2px 10px #3c3f51;
  font-size: 13px;
  margin: 0 0 6px;
}
.box-photo > .picture-info-overlay > .overlay-content-small > .right-content > .btn {
  display: inline-block;
  width: auto;
  clear: none;
  float: none;
  min-height: 32px;
  line-height: 32px;
  background-color: #282a34;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  transition: 200ms ease-in-out all;
  padding: 0 18px;
  color: #ffffff;
}
.box-photo > .picture-info-overlay > .overlay-content-small > .right-content > .btn:hover {
  background-color: #3c3f51;
}

.box-photo[theme=light] > .informations > .username {
  color: #3c3f51;
}
.box-photo[theme=light] > .right > .btn {
  color: #3c3f51;
}
.box-photo[theme=light] > .right > .btn.liked {
  color: #365aa3;
}
.box-photo[theme=light] > .picture-info-overlay:hover {
  opacity: 1;
  background-color: #f27e46a8;
}

.box-staff {
  border-radius: 10px;
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
  padding: 0 0 20px 5px;
  background-position: right bottom;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  overflow: hidden;
}
.box-staff > .avatar {
  float: left;
  height: 64px;
  width: 64px;
  border-radius: 64px 0 64px 64px;
}
.box-staff > .avatar.offline {
  opacity: 1;
  filter: grayscale(1);
  background-image: url("../images/zzz.gif");
  background-position: right 25px;
  background-repeat: no-repeat;
}
.box-staff > .avatar > .one {
  display: block;
}
.box-staff > .avatar > .two {
  display: none;
}
.box-staff > .avatar:hover > .one {
  display: none;
}
.box-staff > .avatar:hover > .two {
  display: block;
}
.box-staff > .right {
  float: left;
  padding: 23px 10px 0 10px;
  word-wrap: break-word;
  width: calc(100% - 64px);
}
.box-staff > .right > span {
  width: 100%;
  float: left;
  clear: both;
  color: #eaeaea;
  transition: 200ms ease-in-out all;
  font-size: 16px;
  line-height: 16px;
}
.box-staff > .right > span > a {
  color: #eaeaea;
  transition: 200ms ease-in-out all;
}
.box-staff > .right > span > i {
  color: #eaeaea;
  transition: 200ms ease-in-out all;
  font-style: normal;
  font-size: 14px;
  line-height: 16px;
  opacity: 0.7;
}
.box-staff > .right > span.motto {
  margin-top: 5px;
  font-size: 14px;
  opacity: 0.7;
  line-height: 16px;
  transition: 200ms ease-in-out all;
}

.box-staff[theme=light] {
  border-color: #ddd;
  background-color: #eaeaea;
}
.box-staff[theme=light] > .right > span {
  color: #3c3f51;
}
.box-staff[theme=light] > .right > span > i {
  color: #3c3f51;
}
.box-staff[theme=light] > .right > span > a {
  color: #3c3f51;
}

.page.gamers > .content > .left {
  float: left;
  width: calc(100% - 600px - 15px - 160px - 15px);
}
.page.gamers > .content > .right {
  float: left;
  width: 600px;
  margin-left: 15px;
}

.page.top-demi > .content > .left {
  float: left;
  width: calc(50% - 80px - 15px);
}
.page.top-demi > .content > .right {
  float: left;
  width: calc(50% - 80px - 15px);
  margin-left: 15px;
}
.page.top-demi > .content > .col > .global-box.lb > .title {
  padding-bottom: 0;
}

.box-top-gamers > .title > img {
  float: right;
  margin-top: 3px;
}
.box-top-gamers > .loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.box-top-gamers > .description {
  padding-bottom: 0 !important;
}
.box-top-gamers > .top {
  margin-top: 15px;
  padding-bottom: 0 !important;
}
.box-top-gamers > .top > .pos {
  float: left;
  width: 33.3333333333%;
}
.box-top-gamers > .top > .pos.second {
  background-color: #adadad;
  border-radius: 10px 0 0 10px;
}
.box-top-gamers > .top > .pos.first {
  background-color: #e7a629;
}
.box-top-gamers > .top > .pos.third {
  background-color: #c47c47;
  border-radius: 0 10px 10px 0;
}
.box-top-gamers > .top > .pos > .avatar {
  width: 64px;
  height: 64px;
  border-radius: 64px;
  background-color: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 10px;
}
.box-top-gamers > .top > .pos > .infos {
  text-align: center;
  margin-bottom: 25px;
}
.box-top-gamers > .top > .pos > .infos > span {
  display: block;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.box-top-gamers > .top > .pos > .infos > span.nb {
  font-size: 12px;
}
.box-top-gamers > .others {
  width: 100%;
  float: left;
  clear: both;
}
.box-top-gamers > .others > .line {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
  background: #3c3f51;
  border-radius: 10px 30px 30px 10px;
  transition: 200ms ease-in-out all;
}
.box-top-gamers > .others > .line > .avatar {
  float: left;
  width: 64px;
  height: 64px;
  overflow: hidden;
}
.box-top-gamers > .others > .line > .avatar > img {
  float: left;
}
.box-top-gamers > .others > .line > .infos {
  float: left;
  padding: 13px 5px;
}
.box-top-gamers > .others > .line > .infos > span {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.box-top-gamers > .others > .line > .infos > span > img {
  margin-right: 1px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-top-gamers > .others > .line > .infos > span.points {
  opacity: 0.7;
  font-size: 14px;
}
.box-top-gamers > .others > .line > .pos {
  position: absolute;
  line-height: 40px;
  height: 40px;
  right: 0;
  top: 12px;
  border-radius: 10px 0 0 10px;
  background-color: #282a34;
  transition: 200ms ease-in-out all;
  color: #eaeaea;
  width: 50px;
  text-align: center;
  font-size: 14px;
}
.box-top-gamers > .others > .line > .pos::after, .box-top-gamers > .others > .line > .pos::before {
  content: "";
  position: absolute;
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
  border-radius: 0 12px 12px 0;
  height: 12px;
  left: 0;
  right: 0;
}
.box-top-gamers > .others > .line > .pos::after {
  top: -12px;
}
.box-top-gamers > .others > .line > .pos::before {
  bottom: -12px;
}
.box-top-gamers.me > .others > .line {
  margin-top: 0;
}
.box-top-gamers.butin > .content {
  margin-top: 0;
}
.box-top-gamers.last > .others > .line {
  border-radius: 10px;
}
.box-top-gamers.last > .others > .line > .badge {
  position: absolute;
  right: 12px;
  top: 12px;
}

.box-top-gamers[theme=light] > .loading {
  filter: invert(0);
}
.box-top-gamers[theme=light] > .top > .pos > .infos > span {
  color: #ffffff;
}
.box-top-gamers[theme=light] > .others > .line {
  background: #eaeaea;
}
.box-top-gamers[theme=light] > .others > .line > .infos > span {
  color: #3c3f51;
}
.box-top-gamers[theme=light] > .others > .line > .pos {
  background-color: #ffffff;
  color: #3c3f51;
}
.box-top-gamers[theme=light] > .others > .line > .pos::after, .box-top-gamers[theme=light] > .others > .line > .pos::before {
  content: "";
  background-color: #eaeaea;
}

.box-description-tg > .winnable > .line {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
  border-radius: 10px 30px 30px 10px;
  transition: 200ms ease-in-out all;
  height: 64px;
}
.box-description-tg > .winnable > .line > .infos {
  float: left;
  color: #282a34;
  font-size: 14px;
  line-height: 64px;
  transition: 200ms ease-in-out all;
}
.box-description-tg > .winnable > .line > .infos > b {
  font-size: 14px;
  font-weight: bold;
  transition: 200ms ease-in-out all;
}
.box-description-tg > .winnable > .line > .pos {
  position: absolute;
  line-height: 40px;
  height: 40px;
  right: 0;
  top: 12px;
  border-radius: 10px 0 0 10px;
  background-color: #282a34;
  transition: 200ms ease-in-out all;
  color: #eaeaea;
  width: 50px;
  text-align: center;
  font-size: 14px;
}
.box-description-tg > .winnable > .line > .pos::after, .box-description-tg > .winnable > .line > .pos::before {
  content: "";
  position: absolute;
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
  border-radius: 0 12px 12px 0;
  height: 12px;
  left: 0;
  right: 0;
}
.box-description-tg > .winnable > .line > .pos::after {
  top: -12px;
}
.box-description-tg > .winnable > .line > .pos::before {
  bottom: -12px;
}
.box-description-tg > .winnable > .line > .lots {
  float: left;
  line-height: 64px;
  padding-left: 15px;
}
.box-description-tg > .winnable > .line > .lots > img {
  vertical-align: middle;
  margin-right: 15px;
}
.box-description-tg > .winnable > .line.first {
  background-color: #e7a629;
}
.box-description-tg > .winnable > .line.first > .pos::after,
.box-description-tg > .winnable > .line.first > .pos::before {
  background-color: #e7a629;
}
.box-description-tg > .winnable > .line.second {
  background-color: #adadad;
}
.box-description-tg > .winnable > .line.second > .pos::after,
.box-description-tg > .winnable > .line.second > .pos::before {
  background-color: #adadad;
}
.box-description-tg > .winnable > .line.third {
  background-color: #c47c47;
}
.box-description-tg > .winnable > .line.third > .pos::after,
.box-description-tg > .winnable > .line.third > .pos::before {
  background-color: #c47c47;
}

.box-description-tg[theme=light] > .winnable > .line > .infos {
  color: #ffffff;
}
.box-description-tg[theme=light] > .winnable > .line > .infos > b {
  color: #ffffff;
}
.box-description-tg[theme=light] > .winnable > .line > .pos {
  background-color: #ffffff;
  color: #3c3f51;
}

.box-badges-tg > .content > .badge {
  float: left;
  background: #3c3f51;
  width: calc(12.5% - 8.75px);
  border-radius: 10px;
  margin-right: 10px;
  margin-top: 10px;
  text-align: center;
  line-height: 45px;
  transition: 200ms ease-in-out all;
}
.box-badges-tg > .content > .badge:nth-child(1) {
  margin-top: 0;
}
.box-badges-tg > .content > .badge:nth-child(2) {
  margin-top: 0;
}
.box-badges-tg > .content > .badge:nth-child(3) {
  margin-top: 0;
}
.box-badges-tg > .content > .badge:nth-child(4) {
  margin-top: 0;
}
.box-badges-tg > .content > .badge:nth-child(5) {
  margin-top: 0;
}
.box-badges-tg > .content > .badge:nth-child(6) {
  margin-top: 0;
}
.box-badges-tg > .content > .badge:nth-child(7) {
  margin-top: 0;
}
.box-badges-tg > .content > .badge:nth-child(8) {
  margin-top: 0;
}
.box-badges-tg > .content > .badge:nth-child(8n+8) {
  margin-right: 0;
}
.box-badges-tg > .content > .badge > img {
  vertical-align: middle;
  opacity: 0.2;
  margin: 10px 0;
}
.box-badges-tg > .content > .badge > span {
  width: 100%;
  float: left;
  clear: both;
  line-height: 30px;
  border-radius: 0 0 10px 10px;
  background-color: rgb(81.7021276596, 85.7872340426, 110.2978723404);
  font-size: 14px;
  color: #eaeaea;
  transition: 200ms ease-in-out all;
}
.box-badges-tg > .content > .badge.visible > img {
  opacity: 1;
}

.box-badges-tg[theme=light] > .content > .badge {
  background: #eaeaea;
}
.box-badges-tg[theme=light] > .content > .badge > span {
  color: #3c3f51;
  background-color: rgb(208.5, 208.5, 208.5);
}

.page.shop-home > .left {
  float: left;
  width: 50%;
}
.page.shop-home > .right {
  float: left;
  margin-left: 15px;
  width: calc(50% - 15px - 160px - 15px);
}

.shop-badges > .left {
  float: left;
  width: 437px;
}
.shop-badges > .right {
  float: left;
  margin-left: 15px;
  width: calc(100% - 437px - 15px - 160px - 15px);
}

.page.shop-convector > .full {
  width: calc(100% - 160px - 15px);
  float: left;
}
.page.shop-convector > .left {
  width: calc(50% - 80px - 15px);
  float: left;
}
.page.shop-convector > .right {
  width: calc(50% - 80px - 15px);
  float: left;
  margin-left: 15px;
}

.page.shop-megapack > .col {
  float: left;
  width: calc(33.3333333333% - 53.3333333333px - 15px);
  margin-right: 15px;
}

.page.shop-dedicaces > .left {
  width: calc(50% - 80px - 15px);
  float: left;
}
.page.shop-dedicaces > .right {
  width: calc(50% - 80px - 15px);
  float: left;
  margin-left: 15px;
}

.box-buy-winwins > .content > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  opacity: 1;
}
.box-buy-winwins > .content > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-buy-winwins > .content > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.box-buy-winwins > .content > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.box-buy-winwins > .content > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.box-buy-winwins > .content > .btn.loading {
  opacity: 0.5;
}

.box-buy-badges-pack > .content > .pack {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 15px;
}
.box-buy-badges-pack > .content > .pack:last-child {
  margin-bottom: 0;
}
.box-buy-badges-pack > .content > .pack > .content {
  width: 100%;
  float: left;
  clear: both;
  background-color: #3c3f51;
  border-radius: 10px;
  padding: 15px;
  opacity: 0.2;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.box-buy-badges-pack > .content > .pack > .content.available {
  opacity: 1;
}
.box-buy-badges-pack > .content > .pack > .content > .badges {
  width: 100%;
  float: left;
  clear: both;
}
.box-buy-badges-pack > .content > .pack > .content > .badges > .badge {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  margin-right: 15px;
  background-color: #282a34;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: 200ms ease-in-out all;
}
.box-buy-badges-pack > .content > .pack > .content > .badges > .badge:last-child {
  margin-right: 0;
}
.box-buy-badges-pack > .content > .pack > .content > .badges > .badge > img {
  vertical-align: middle;
}
.box-buy-badges-pack > .content > .pack > .content > .line {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.box-buy-badges-pack > .content > .pack > .content > .line > span {
  float: left;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.box-buy-badges-pack > .content > .pack > .content > .line > span.available {
  color: #347ae2;
  float: right;
  transition: 200ms ease-in-out all;
}
.box-buy-badges-pack > .content > .pack > .content > .line > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.box-buy-badges-pack > .content > .pack > .content > .line > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-buy-badges-pack > .content > .pack > .content > .line > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.box-buy-badges-pack > .content > .pack > .content > .line > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.box-buy-badges-pack > .content > .pack > .content > .line > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.box-buy-badges-pack[theme=light] > .content > .pack > .content {
  background-color: #eaeaea;
  border-color: #ddd;
}
.box-buy-badges-pack[theme=light] > .content > .pack > .content > .badges > .badge {
  background-color: #ffffff;
  border-color: #ddd;
}
.box-buy-badges-pack[theme=light] > .content > .pack > .content > .line > span {
  color: #3c3f51;
}
.box-buy-badges-pack[theme=light] > .content > .pack > .content > .line > span.available {
  color: #365aa3;
}

.box-buy-badges > .content > .badge {
  float: left;
  width: calc(33.3333333333% - 10px);
  min-width: 220px;
  margin-top: 15px;
  margin-right: 15px;
}
.box-buy-badges > .content > .badge:nth-child(3n+3) {
  margin-right: 0;
}
.box-buy-badges > .content > .badge:nth-child(1), .box-buy-badges > .content > .badge:nth-child(2), .box-buy-badges > .content > .badge:nth-child(3) {
  margin-top: 0;
}
.box-buy-badges > .content > .badge > .content {
  width: 100%;
  float: left;
  clear: both;
  background-color: #3c3f51;
  border-radius: 10px;
  padding: 15px;
  opacity: 0.2;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.box-buy-badges > .content > .badge > .content.available {
  opacity: 1;
}
.box-buy-badges > .content > .badge > .content > .badge {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  transition: 200ms ease-in-out all;
}
.box-buy-badges > .content > .badge > .content > .badge > img {
  vertical-align: middle;
}
.box-buy-badges > .content > .badge > .content > .infos {
  float: right;
  width: calc(100% - 10px - 70px);
}
.box-buy-badges > .content > .badge > .content > .infos > span {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  line-height: 35px;
  color: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  background-color: #282a34;
  transition: 200ms ease-in-out all;
}
.box-buy-badges > .content > .badge > .content > .infos > span:last-child {
  margin-top: 10px;
  background-color: #5ba4dd;
}
.box-buy-badges > .content > .badge > .content > .line {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 10px;
}
.box-buy-badges > .content > .badge > .content > .line > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 40px;
  line-height: 40px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.box-buy-badges > .content > .badge > .content > .line > .btn > img {
  line-height: 40px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-buy-badges > .content > .badge > .content > .line > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.box-buy-badges > .content > .badge > .content > .line > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.box-buy-badges > .content > .badge > .content > .line > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.box-buy-badges.mb > .content > .badge {
  width: 100%;
}

.box-buy-badges[theme=light] > .content > .badge > .content {
  background-color: #eaeaea;
  border-color: #ddd;
}
.box-buy-badges[theme=light] > .content > .badge > .content > .infos > span {
  color: #3c3f51;
  background-color: #ffffff;
}
.box-buy-badges[theme=light] > .content > .badge > .content > .infos > span:last-child {
  background-color: #347ae2;
  color: #ffffff;
}

.box-buy-personalized-badge > .content > p.description.with-badge {
  width: calc(100% - 50px);
  float: left;
}
.box-buy-personalized-badge > .content > .badge {
  float: right;
}
.box-buy-personalized-badge > .content > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 15px;
}
.box-buy-personalized-badge > .content > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-buy-personalized-badge > .content > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.box-buy-personalized-badge > .content > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.box-buy-personalized-badge > .content > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.box-convector > .content > .line {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
  background-color: #3c3f51;
  border-radius: 10px;
  padding: 15px;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
  opacity: 1;
}
.box-convector > .content > .line.loading {
  opacity: 0.5;
}
.box-convector > .content > .line:first-child {
  margin-top: 0;
}
.box-convector > .content > .line > .bloc {
  float: left;
  border-radius: 10px;
  background-color: #282a34;
  padding: 0 15px;
  line-height: 50px;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.box-convector > .content > .line > .bloc.diamonds {
  width: 180px;
}
.box-convector > .content > .line > .bloc.jetons {
  width: 130px;
}
.box-convector > .content > .line > .bloc > img {
  vertical-align: middle;
}
.box-convector > .content > .line > .bloc > span {
  float: right;
  padding-left: 15px;
  color: #dddddd;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.box-convector > .content > .line > .became {
  width: 40px;
  float: left;
  height: 50px;
  background-image: url("../images/chevron-blue.png");
  background-repeat: no-repeat;
  background-position: center center;
  transition: 200ms ease-in-out all;
}
.box-convector > .content > .line > .button {
  float: left;
  min-height: 50px;
  line-height: 50px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  float: right;
  width: calc(100% - 180px - 130px - 40px - 15px);
}
.box-convector > .content > .line > .button > img {
  line-height: 50px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-convector > .content > .line > .button:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.box-convector > .content > .line > .button[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.box-convector > .content > .line > .button[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.box-convector.mb > .content > .line {
  overflow: hidden;
}
.box-convector.mb > .content > .line > .bloc {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
}
.box-convector.mb > .content > .line > .bloc > span {
  float: none;
}
.box-convector.mb > .content > .line > .became {
  width: 100%;
  float: left;
  clear: both;
  transform: rotate(90deg);
  z-index: -1;
}
.box-convector.mb > .content > .line > .button {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}

.box-convector[theme=light] > .content > .line {
  background-color: #eaeaea;
  border-color: #ddd;
}
.box-convector[theme=light] > .content > .line > .bloc {
  background-color: #ffffff;
  border-color: #ddd;
}
.box-convector[theme=light] > .content > .line > .bloc > span {
  color: #3c3f51;
}
.box-convector[theme=light] > .content > .line > .became {
  background-image: url("../images/chevron-orange.png");
}

.box-megapack > .content,
.box-vip > .content {
  margin-top: 15px;
  transition: 200ms ease-in-out all;
  opacity: 1;
}
.box-megapack > .content.loading,
.box-vip > .content.loading {
  opacity: 0.5;
  height: auto !important;
  background: none !important;
  filter: none !important;
}
.box-megapack > .content > .top,
.box-vip > .content > .top {
  width: 100%;
  float: left;
  clear: both;
  padding: 15px;
  background-color: #3c3f51;
  border-radius: 10px;
  transition: 200ms ease-in-out all;
}
.box-megapack > .content > .top > .image,
.box-vip > .content > .top > .image {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  padding: 30px 0;
}
.box-megapack > .content > .top > .button.argent,
.box-vip > .content > .top > .button.argent {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #9a9a9a;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.box-megapack > .content > .top > .button.argent > img,
.box-vip > .content > .top > .button.argent > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-megapack > .content > .top > .button.argent:hover,
.box-vip > .content > .top > .button.argent:hover {
  background-color: rgb(179.5, 179.5, 179.5);
}
.box-megapack > .content > .top > .button.bronze,
.box-vip > .content > .top > .button.bronze {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #c47c47;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.box-megapack > .content > .top > .button.bronze > img,
.box-vip > .content > .top > .button.bronze > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-megapack > .content > .top > .button.bronze:hover,
.box-vip > .content > .top > .button.bronze:hover {
  background-color: rgb(208.3827160494, 151.4938271605, 109.6172839506);
}
.box-megapack > .content > .top > .button.or,
.box-vip > .content > .top > .button.or {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #e7a629;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.box-megapack > .content > .top > .button.or > img,
.box-vip > .content > .top > .button.or > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-megapack > .content > .top > .button.or:hover,
.box-vip > .content > .top > .button.or:hover {
  background-color: rgb(236.1428571429, 185.0714285714, 86.8571428571);
}
.box-megapack > .content h2,
.box-vip > .content h2 {
  text-align: center;
  margin: 20px 0;
  font-size: 16px !important;
  color: #347ae2;
  transition: 200ms ease-in-out all;
}
.box-megapack > .content > .advantages,
.box-vip > .content > .advantages {
  width: 100%;
  float: left;
  clear: both;
}
.box-megapack > .content > .advantages:not(.vip),
.box-vip > .content > .advantages:not(.vip) {
  padding: 30px 0;
}
.box-megapack > .content > .advantages > p,
.box-vip > .content > .advantages > p {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  line-height: 25px;
}
.box-megapack > .content > .advantages > p > span,
.box-vip > .content > .advantages > p > span {
  font-size: 14px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.box-megapack > .content > .advantages > p > img,
.box-vip > .content > .advantages > p > img {
  vertical-align: middle;
  margin-right: 5px;
}
.box-megapack > .content .badges,
.box-vip > .content .badges {
  width: 100%;
  float: left;
  clear: both;
}
.box-megapack > .content .badges > .badge,
.box-vip > .content .badges > .badge {
  float: left;
  background: #3c3f51;
  width: calc(100% / 5 - (10px - 10px / 5));
  border-radius: 10px;
  margin-right: 10px;
  margin-top: 10px;
  text-align: center;
  line-height: 45px;
  transition: 200ms ease-in-out all;
  height: 90px;
}
.box-megapack > .content .badges > .badge:nth-child(5n+5),
.box-vip > .content .badges > .badge:nth-child(5n+5) {
  margin-right: 0;
}
.box-megapack > .content .badges > .badge > img,
.box-vip > .content .badges > .badge > img {
  vertical-align: middle;
  margin: 10px 0;
}
.box-megapack > .content .badges > .badge > span,
.box-vip > .content .badges > .badge > span {
  width: 100%;
  float: left;
  clear: both;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 0;
  line-height: 30px;
  border-radius: 0 0 10px 10px;
  background-color: rgb(81.7021276596, 85.7872340426, 110.2978723404);
  font-size: 14px;
  color: #eaeaea;
  transition: 200ms ease-in-out all;
}
.box-megapack > .content .badges > .badge.visible > img,
.box-vip > .content .badges > .badge.visible > img {
  opacity: 1;
}
.box-megapack > .content .badges.vip,
.box-vip > .content .badges.vip {
  display: flex;
  justify-content: center;
}
.box-megapack > .content .badges.vip > .badge,
.box-vip > .content .badges.vip > .badge {
  margin-top: 0;
  float: initial;
}

.box-megapack[theme=light] > .content > .top,
.box-vip[theme=light] > .content > .top {
  background-color: #eaeaea;
}
.box-megapack[theme=light] > .content > .advantages > p > span,
.box-vip[theme=light] > .content > .advantages > p > span {
  color: #3c3f51;
}
.box-megapack[theme=light] > .content h2,
.box-vip[theme=light] > .content h2 {
  color: #365aa3;
}
.box-megapack[theme=light] > .content .badges > .badge,
.box-vip[theme=light] > .content .badges > .badge {
  background: #eaeaea;
}
.box-megapack[theme=light] > .content .badges > .badge > span,
.box-vip[theme=light] > .content .badges > .badge > span {
  color: #3c3f51;
  background-color: rgb(208.5, 208.5, 208.5);
}

.box-new-dedicace > .content > form {
  width: 100%;
  float: left;
  clear: both;
  background: #3c3f51;
  border-radius: 10px;
  padding: 0 15px 15px 15px;
  margin-top: 15px;
  border: 1px solid transparent;
  transition: 200ms ease-in-out all;
}
.box-new-dedicace > .content > form > .input-group {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.box-new-dedicace > .content > form > .input-group > label {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.box-new-dedicace > .content > form > .input-group > label > b {
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
  float: right;
}
.box-new-dedicace > .content > form > .input-group > textarea {
  width: 100%;
  float: left;
  clear: both;
  padding: 12px 15px;
  color: #3c3f51;
  border-radius: 10px;
  background-color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
  margin-top: 10px;
  min-width: 100%;
  max-width: 100%;
  resize: none;
  height: 120px;
  border: 1px solid transparent;
}
.box-new-dedicace > .content > form > .input-group > .emotes {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
}
.box-new-dedicace > .content > form > .input-group > .emotes > img {
  margin-right: 5px;
  margin-top: 15px;
  cursor: pointer;
}
.box-new-dedicace > .content > form > .input-group > .message-emotes {
  width: 100%;
  float: left;
  clear: both;
  background: #282a34;
  padding: 12px 15px;
  border-radius: 10px;
  margin-top: 10px;
  color: #ffffff;
  font-size: 14px;
  overflow-wrap: break-word;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.box-new-dedicace > .content > form > .input-group > .message-emotes > img {
  vertical-align: middle;
  margin-top: -4px;
}
.box-new-dedicace > .content > form > .input-group > input[type=submit] {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.box-new-dedicace > .content > form > .input-group > input[type=submit] > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-new-dedicace > .content > form > .input-group > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.box-new-dedicace > .content > form > .input-group > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.box-new-dedicace > .content > form > .input-group > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.box-new-dedicace[theme=light] > .content > form {
  background: #eaeaea;
  border-color: #ddd;
}
.box-new-dedicace[theme=light] > .content > form > .input-group > label {
  color: #3c3f51;
}
.box-new-dedicace[theme=light] > .content > form > .input-group > label > b {
  color: #3c3f51;
}
.box-new-dedicace[theme=light] > .content > form > .input-group > textarea {
  background-color: #ffffff;
  border-color: #ddd;
}
.box-new-dedicace[theme=light] > .content > form > .input-group > .message-emotes {
  background: #ffffff;
  color: #3c3f51;
  border-color: #ddd;
}

.box-my-dedicace > .loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.box-my-dedicace > .title.notop {
  padding-top: 0;
}
.box-my-dedicace > .content > .error {
  width: 100%;
  float: left;
  clear: both;
}
.box-my-dedicace > .content > .line {
  width: 100%;
  float: left;
  clear: both;
  background: #3c3f51;
  transition: 200ms ease-in-out all;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  border: 1px solid transparent;
  opacity: 1;
}
.box-my-dedicace > .content > .line.removed {
  opacity: 0.2;
}
.box-my-dedicace > .content > .line:first-child {
  margin-top: 0;
}
.box-my-dedicace > .content > .line > .message-emotes {
  width: 100%;
  float: left;
  clear: both;
  background: #282a34;
  padding: 12px 15px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  overflow-wrap: break-word;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.box-my-dedicace > .content > .line > .message-emotes > img {
  vertical-align: middle;
  margin-top: -4px;
}
.box-my-dedicace > .content > .line > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 40px;
  line-height: 40px;
  background-color: #dd3f3f;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 10px;
}
.box-my-dedicace > .content > .line > .btn > img {
  line-height: 40px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-my-dedicace > .content > .line > .btn:hover {
  background-color: rgb(228.6725663717, 106.3274336283, 106.3274336283);
}

.box-my-dedicace[theme=light] > .loading {
  filter: invert(0);
}
.box-my-dedicace[theme=light] > .content > .line {
  background: #eaeaea;
  border-color: #ddd;
}
.box-my-dedicace[theme=light] > .content > .line:first-child {
  margin-top: 0;
}
.box-my-dedicace[theme=light] > .content > .line > .message-emotes {
  background: #ffffff;
  color: #3c3f51;
  border-color: #ddd;
}

.box-flagme > .content {
  width: 100%;
  float: left;
  clear: both;
}
.box-flagme > .content.loading {
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.box-flagme > .content.loading[theme=light] {
  filter: invert(0);
}
.box-flagme > .content > form {
  margin-top: 15px;
}
.box-flagme > .content > form > .form-group {
  width: 100%;
  float: left;
  clear: both;
}
.box-flagme > .content > form > .form-group > label {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.box-flagme > .content > form > .form-group > input:not([type=submit]) {
  width: 100%;
  float: left;
  clear: both;
  height: 45px;
  line-height: 45px;
  color: #3c3f51;
  border-radius: 10px;
  padding: 0 15px;
  background-color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
  margin-top: 10px;
  resize: none;
  border: 1px solid transparent;
}
.box-flagme > .content > form > .form-group > input[type=submit] {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 10px;
}
.box-flagme > .content > form > .form-group > input[type=submit] > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-flagme > .content > form > .form-group > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.box-flagme > .content > form > .form-group > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.box-flagme > .content > form > .form-group > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.box-flagme > .content > .line {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 10px;
}
.box-flagme > .content > .line > span {
  float: left;
  color: #ffffff;
  line-height: 40px;
  height: 40px;
  background-color: #3c3f51;
  border-radius: 10px;
  padding: 0 15px;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.box-flagme > .content > .line > span.date {
  background-color: transparent;
}
.box-flagme > .content > .line > span.chevron {
  background-color: transparent;
  background-image: url("../images/chevron-blue.png");
  width: 40px;
  background-position: center center;
  background-repeat: no-repeat;
}
.box-flagme > .content > .line:last-child {
  margin-bottom: 0;
}

.box-flagme[theme=light] > .content > form > .form-group > label {
  color: #3c3f51;
}
.box-flagme[theme=light] > .content > form > .form-group > input {
  color: #3c3f51;
  background-color: #eaeaea;
  border-color: #ddd;
}
.box-flagme[theme=light] > .content > .line > span {
  color: #3c3f51;
  background-color: #eaeaea;
}
.box-flagme[theme=light] > .content > .line > span.chevron {
  background-image: url("../images/chevron-orange.png");
}
.box-flagme[theme=light] > .content > .line > span.date, .box-flagme[theme=light] > .content > .line > span.chevron {
  background-color: transparent;
}

.right-badge-maker {
  width: 100%;
  float: left;
  clear: both;
}
.right-badge-maker > .left {
  float: left;
  width: 515px;
}
.right-badge-maker > .right {
  float: right;
  width: calc(100% - 515px - 15px);
}

.badge-maker > .title > img {
  float: right;
  margin-top: 2px;
}
.badge-maker > .content > .loading {
  width: 100%;
  position: relative;
  height: 150px;
  z-index: 999;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
  border-radius: 10px;
}
.badge-maker > .content > .loading:not(.nobg) {
  background-color: rgba(60, 63, 81, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
}
.badge-maker > .content > .loading[theme=light] {
  filter: invert(0);
}
.badge-maker > .content > .loading[theme=light]:not(.nobg) {
  background-color: rgba(255, 255, 255, 0.5);
}
.badge-maker > .content > .editor {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
  height: 430px;
  background-color: #3c3f51;
  border-radius: 15px;
  padding: 15px;
  transition: 200ms ease-in-out all;
  border: 1px solid #3c3f51;
}
.badge-maker > .content > .editor > .render {
  float: left;
  width: 400px;
  height: 400px;
  background-image: url("../images/drawer-bg.png");
  background-position: top left;
  border-radius: 10px;
  cursor: crosshair;
  overflow: hidden;
  transition: 200ms ease-in-out all;
  border: 0 solid transparent;
}
.badge-maker > .content > .editor > .render > canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.badge-maker > .content > .editor > .tool {
  float: right;
  width: calc(100% - 400px - 15px);
  height: 400px;
}
.badge-maker > .content > .editor > .tool > .down {
  position: absolute;
  bottom: 0;
}
.badge-maker > .content > .editor > .tool .el {
  width: 40px;
  height: 40px;
  margin-top: 15px;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #282a34;
  border-radius: 10px;
  cursor: pointer;
  transition: 200ms ease-in-out all;
  border: 1px solid transparent;
}
.badge-maker > .content > .editor > .tool .el.slc {
  background-color: #1a5dc2;
}
.badge-maker > .content > .editor > .tool .el:first-child {
  margin-top: 0;
}
.badge-maker > .content > .editor > .tool .el.pencil {
  background-image: url("../images/bic.png");
}
.badge-maker > .content > .editor > .tool .el.rubber {
  background-image: url("../images/rubber.png");
}
.badge-maker > .content > .editor > .tool .el.undo {
  background-image: url("../images/undo.png");
}
.badge-maker > .content > .editor > .tool .el.redo {
  background-image: url("../images/redo.png");
}
.badge-maker > .content > .editor > .tool .el.color {
  border: none;
}
.badge-maker > .content > .editor > .tool .el.color::-webkit-color-swatch-wrapper {
  padding: 0;
}
.badge-maker > .content > .editor > .tool .el.color::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
}
.badge-maker > .content > .editor > .tool .el.save {
  background-image: url("../images/save.png");
}
.badge-maker > .content > .informations {
  width: 100%;
  float: left;
  clear: both;
  background-color: #3c3f51;
  padding: 5px 15px 15px 15px;
  border-radius: 10px;
}
.badge-maker > .content > .informations > input {
  width: 100%;
  float: left;
  clear: both;
  background-color: #ffffff;
  border-radius: 7px;
  margin-top: 10px;
  padding: 0 10px;
  line-height: 35px;
  font-size: 14px;
}
.badge-maker > .content > .informations > .preview {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  line-height: 67px;
  background-color: #282a34;
  margin-top: 15px;
  border-radius: 7px;
}
.badge-maker > .content > .informations > .preview > img {
  width: 40px;
  vertical-align: middle;
  image-rendering: pixelated;
}
.badge-maker > .content > .informations > button {
  width: 100%;
  clear: both;
  float: left;
  min-height: 35px;
  line-height: 35px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 15px;
  border-radius: 7px;
}
.badge-maker > .content > .informations > button > img {
  line-height: 35px;
  vertical-align: middle;
  margin-top: -1px;
}
.badge-maker > .content > .informations > button:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.badge-maker > .content > .informations > button[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.badge-maker > .content > .informations > button[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.badge-maker > .content > .templates {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: -15px;
}
.badge-maker > .content > .templates > .badge {
  float: left;
  width: 56.437px;
  height: 56.437px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  margin-right: 15px;
  padding: 9px;
  background: #3c3f51;
  transition: 200ms ease-in-out all;
  margin-bottom: 15px;
}
.badge-maker > .content > .templates > .badge > img {
  float: left;
}
.badge-maker > .content > .templates > .badge > .remove {
  position: absolute;
  right: -5px;
  top: -5px;
  height: 20px;
  width: 20px;
  background-color: #dd3f3f;
  border-radius: 10px;
  line-height: 18px;
  text-align: center;
  font-size: 13px;
  opacity: 0;
  transition: 200ms ease-in-out all;
  font-weight: bold;
  color: #ffffff;
}
.badge-maker > .content > .templates > .badge:hover > .remove {
  opacity: 1;
}
.badge-maker > .content > .templates[nb="2"] > .badge:nth-child(2n+2) {
  margin-right: 0;
}
.badge-maker > .content > .templates[nb="7"] > .badge:nth-child(7n+7) {
  margin-right: 0;
}

.badge-maker[theme=light] > .content > .editor {
  background-color: #eaeaea;
  border: 1px solid #ddd;
}
.badge-maker[theme=light] > .content > .editor > .render {
  border: 1px solid #ccc;
}
.badge-maker[theme=light] > .content > .editor > .tool .el {
  background-color: #ffffff;
}
.badge-maker[theme=light] > .content > .editor > .tool .el:not(.color) {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.badge-maker[theme=light] > .content > .editor > .tool .el.slc {
  background-color: #365aa3;
}

.buy-group {
  width: 100%;
  float: left;
  clear: both;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 60px;
}
.buy-group > .buy-price-tag {
  background-color: #3c3f51;
  border-radius: 10px;
  font-size: 14px;
  padding: 0 15px;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 45px;
  margin-right: 10px;
}
.buy-group > .buy-price-tag > img {
  margin-right: 5px;
}
.buy-group > .buy-vip-price-tag {
  background-color: #3c3f51;
  border-radius: 10px;
  font-size: 14px;
  color: #ffffff;
  min-height: 45px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
}
.buy-group > .buy-vip-price-tag > .buy-vip-icon {
  background-color: #347ae2;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.buy-group > .buy-vip-price-tag > .buy-vip-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 14px;
}
.buy-group > .buy-vip-price-tag > .buy-vip-price > img {
  margin-right: 5px;
}
.buy-group > button {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.buy-group > button > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.buy-group > button:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.buy-group > button[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.buy-group > button[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.buy-group[theme=light] > .buy-price-tag {
  background-color: #eaeaea;
  color: #3c3f51;
}
.buy-group[theme=light] > .buy-vip-price-tag {
  background-color: #eaeaea;
  color: #3c3f51;
}
.buy-group[theme=light] > .buy-vip-price-tag > .buy-vip-icon {
  background-color: #5ba4dd;
}

.page.casino-toroloto > .left {
  float: left;
  margin-left: 15px;
  width: calc(100% - 475px - 15px - 160px - 15px);
}
.page.casino-toroloto > .right {
  float: left;
  width: 475px;
}
.page.casino-toroloto .content.flex {
  text-align: center;
}
.page.casino-toroloto .content.flex > .mobi {
  display: inline-block;
  width: calc(25% - 30px);
  font-size: 0;
}
.page.casino-toroloto .content.flex > .mobi > span {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 10px;
  background-color: #3c3f51;
  padding: 15px 18px;
  color: #ffffff;
  font-size: 14px;
  border-radius: 10px;
  transition: 200ms ease-in-out all;
}

.global-box.toroloto > .content > .frank {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/box.png");
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 500ms ease-in-out all, 0ms ease-in-out height;
}
.global-box.toroloto > .content > .frank.shake {
  animation: 700ms linear shake infinite;
}
.global-box.toroloto > .content > .frank.opened {
  background-image: url("../images/box-boom-dark.gif");
}
.global-box.toroloto > .content > .frank.hideme {
  height: 0;
}
.global-box.toroloto > .content > .win {
  width: 100%;
  float: left;
  clear: both;
  background-color: #3c3f51;
  border-radius: 10px;
  margin-top: 15px;
  overflow: hidden;
  text-align: center;
  padding: 15px;
  transition: 200ms ease-in-out all;
}
.global-box.toroloto > .content > .win > span {
  width: 100%;
  float: left;
  clear: both;
  padding: 15px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  font-size: 14px;
  background-color: #282a34;
  border-radius: 10px;
  margin-bottom: 15px;
}
.global-box.toroloto > .content > .win > span > b {
  color: #347ae2;
  transition: 200ms ease-in-out all;
  font-size: 14px;
}
.global-box.toroloto > .content > .win > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.global-box.toroloto > .content > .win > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.global-box.toroloto > .content > .win > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.global-box.toroloto > .content > .win > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.global-box.toroloto > .content > .win > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.global-box.toroloto[theme=light] > .content > .frank.opened {
  background-image: url("../images/box-boom-light.gif");
}
.global-box.toroloto[theme=light] > .content > .win {
  background-color: #eaeaea;
}
.global-box.toroloto[theme=light] > .content > .win > span {
  color: #3c3f51;
  background-color: #ffffff;
}
.global-box.toroloto[theme=light] > .content > .win > span > b {
  color: #365aa3;
}

.page.casino-toroloto[theme=light] .content.flex > .mobi > span {
  background-color: #eaeaea;
  color: #3c3f51;
}

@keyframes shake {
  0%, 60% {
    transform: rotate(0deg);
  }
  15%, 45% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(10deg);
  }
}
.page.blackmarket > .left {
  float: left;
  width: calc(100% - 160px - 15px);
}
.page.blackmarket > .left > .navigation {
  background-image: url("../images/blackmarket-bg.png");
  background-position: center left;
  background-repeat: no-repeat;
}
.page.blackmarket > .left > .navigation > .content {
  padding-bottom: 0;
}
.page.blackmarket > .left > .navigation > .content > .title {
  float: left;
  line-height: 80px;
  font-size: 20px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.blackmarket > .left > .navigation > .content > .title > img {
  vertical-align: middle;
  margin-right: 10px;
  margin-left: 5px;
}
.page.blackmarket > .left > .navigation > .content > .navigation {
  float: right;
  margin-right: 5px;
}
.page.blackmarket > .left > .navigation > .content > .navigation > a {
  float: left;
  line-height: 40px;
  padding: 0 20px;
  background-color: #3c3f51;
  color: #ffffff;
  margin-left: 20px;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.blackmarket > .left > .navigation > .content > .navigation > a.router-link-active, .page.blackmarket > .left > .navigation > .content > .navigation > a.router-link-exact-active, .page.blackmarket > .left > .navigation > .content > .navigation > a:hover {
  color: #347ae2;
}
.page.blackmarket > .left .don-cornichon {
  position: absolute;
  z-index: -1;
  right: 20px;
  left: 0;
  bottom: 0;
  top: -20px;
  background-image: url("../images/don-cornichon.png");
  background-repeat: no-repeat;
  background-position: top right;
}

.page.blackmarket[theme=light] > .left > .navigation > .content > .title {
  color: #3c3f51;
}
.page.blackmarket[theme=light] > .left > .navigation > .content > .navigation > a {
  background-color: #eaeaea;
  color: #3c3f51;
}
.page.blackmarket[theme=light] > .left > .navigation > .content > .navigation > a.router-link-active, .page.blackmarket[theme=light] > .left > .navigation > .content > .navigation > a.router-link-exact-active, .page.blackmarket[theme=light] > .left > .navigation > .content > .navigation > a:hover {
  color: #365aa3;
}

.page.items > .content > .left {
  float: left;
  width: calc(100% - 160px - 15px);
}
.page.items > .content > .left > .ekipafon {
  background-image: url("../images/casino.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}
.page.items > .content > .left .global-box > .content > .description {
  width: 100%;
  float: left;
  clear: both;
}
.page.items > .content > .left .global-box > .content > .description.mobis {
  margin-bottom: 15px;
}
.page.items > .content > .left .global-box > .content > .description > ul {
  width: 100%;
  float: left;
  clear: both;
}
.page.items > .content > .left .global-box > .content > .description > ul > li {
  width: 100%;
  float: left;
  clear: both;
  padding-left: 30px;
  color: #ffffff;
  font-size: 14px;
  line-height: 30px;
  transition: 200ms ease-in-out all;
}
.page.items > .content > .left .global-box > .content > .description > ul > li::after {
  content: "";
  position: absolute;
  left: 0;
  height: 30px;
  width: 20px;
  background-image: url("../images/chevron-blue.png");
  background-repeat: no-repeat;
  background-position: center center;
}
.page.items > .content > .left > .loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.page.items > .content > .left > .loading[theme=light] {
  filter: invert(0);
}
.page.items > .content > .left > .content {
  width: 100%;
  float: left;
  clear: both;
}
.page.items > .content > .left > .content > .navigation {
  background-image: url("../images/blackmarket-bg.png");
  background-position: center left;
  background-repeat: no-repeat;
}
.page.items > .content > .left > .content > .navigation > .content {
  padding-bottom: 0;
}
.page.items > .content > .left > .content > .navigation > .content > .title {
  float: left;
  line-height: 80px;
  padding-left: 10px;
  font-size: 20px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.items > .content > .left > .content > .navigation > .content > .navigation {
  float: right;
  margin-right: 5px;
}
.page.items > .content > .left > .content > .navigation > .content > .navigation > span {
  float: left;
  line-height: 40px;
  padding: 0 20px;
  background-color: #3c3f51;
  color: #ffffff;
  margin-left: 20px;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  cursor: pointer;
}
.page.items > .content > .left > .content > .navigation > .content > .navigation > span:hover {
  color: #347ae2;
}
.page.items > .content > .left > .content > .items,
.page.items > .content > .left > .items {
  width: 100%;
  float: left;
  clear: both;
  width: calc(100% + 15px);
}
.page.items > .content > .left > .content > .items > .item-box,
.page.items > .content > .left > .items > .item-box {
  clear: none;
  width: calc(50% - 15px);
  margin-right: 15px;
  margin-top: 15px;
}

.page.items[theme=light] > .content > .left .global-box > .content > .description > ul > li {
  color: #3c3f51;
}
.page.items[theme=light] > .content > .left > .content > .navigation > .content > .title {
  color: #3c3f51;
}
.page.items[theme=light] > .content > .left > .content > .navigation > a {
  background-color: #eaeaea;
  color: #3c3f51;
}
.page.items[theme=light] > .content > .left > .content > .navigation > a.router-link-active, .page.items[theme=light] > .content > .left > .content > .navigation > a.router-link-exact-active, .page.items[theme=light] > .content > .left > .content > .navigation > a:hover {
  color: #365aa3;
}

.global-box.box-toroloto-my-owns > .content.loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
  padding-top: 0;
  margin-top: -15px;
}
.global-box.box-toroloto-my-owns > .content > .line {
  width: 100%;
  float: left;
  clear: both;
}
.global-box.box-toroloto-my-owns > .content > .line.top {
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
  border-radius: 10px 10px 0 0;
}
.global-box.box-toroloto-my-owns > .content > .line:first-child > span.first {
  border-radius: 10px 0 0 0;
}
.global-box.box-toroloto-my-owns > .content > .line:first-child > span.last {
  border-radius: 0 10px 0 0;
}
.global-box.box-toroloto-my-owns > .content > .line:last-child > span.first {
  border-radius: 0 0 0 10px;
}
.global-box.box-toroloto-my-owns > .content > .line:last-child > span.last {
  border-radius: 0 0 10px 0;
}
.global-box.box-toroloto-my-owns > .content > .line > span {
  float: left;
  width: 50%;
  padding: 10px 12px;
  color: #ffffff;
  font-size: 14px;
  border-bottom: 1px solid #3c3f51;
  border-right: 1px solid #3c3f51;
  transition: 200ms ease-in-out all;
}
.global-box.box-toroloto-my-owns > .content > .line > span.first {
  border-left: 1px solid #3c3f51;
}
.global-box.box-toroloto-my-owns > .content > .line.three > span {
  width: 33.3333333333%;
}

.global-box.box-toroloto-my-owns[theme=light] > .content .loading {
  filter: invert(0);
}
.global-box.box-toroloto-my-owns[theme=light] > .content > .line.top {
  background-color: #eaeaea;
}
.global-box.box-toroloto-my-owns[theme=light] > .content > .line > span {
  border-bottom: 1px solid #eaeaea;
  color: #3c3f51;
  border-right: 1px solid #eaeaea;
}
.global-box.box-toroloto-my-owns[theme=light] > .content > .line > span.first {
  border-left: 1px solid #eaeaea;
}
.global-box.box-toroloto-my-owns[theme=light] > .content > .line.three > span {
  width: 33.3333333333%;
}

.blackmarket-encheres > .content > .item {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 15px;
}
.blackmarket-encheres > .content > .item:last-child {
  margin-bottom: 0;
}
.blackmarket-encheres > .content > .item > .top {
  width: 100%;
  float: left;
  clear: both;
  background-color: #3c3f51;
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: row;
  height: 100px;
  transition: 200ms ease-in-out all;
}
.blackmarket-encheres > .content > .item > .top.ended {
  border-radius: 10px;
}
.blackmarket-encheres > .content > .item > .top > .case {
  width: 25%;
  text-align: center;
  align-items: center;
  display: flex;
}
.blackmarket-encheres > .content > .item > .top > .case > .center {
  width: 100%;
  float: left;
  clear: both;
}
.blackmarket-encheres > .content > .item > .top > .case > .center > img {
  max-height: 100px;
}
.blackmarket-encheres > .content > .item > .top > .case > .center > h5 {
  font-size: 12px;
  text-transform: uppercase;
  color: #eaeaea;
  opacity: 0.9;
  margin: auto;
  transition: 200ms ease-in-out all;
}
.blackmarket-encheres > .content > .item > .top > .case > .center > span {
  text-transform: uppercase;
  font-size: 14px;
  color: #ffffff;
  margin: auto;
  margin-top: 5px;
  transition: 200ms ease-in-out all;
}
.blackmarket-encheres > .content > .item > .top > .case > .center > .inputs {
  margin-top: 5px;
  width: calc(100% - 30px);
  padding-left: 30px;
}
.blackmarket-encheres > .content > .item > .top > .case > .center > .inputs > input[type=number] {
  background-color: #ffffff;
  float: left;
  line-height: 33px;
  border-radius: 10px 0 0 10px;
  width: 100px;
  padding-left: 30px;
  font-size: 14px;
  border: 1px solid transparent;
  border-right: none;
  transition: 200ms ease-in-out all;
  background-image: url("../images/utilities/duckets.gif");
  background-position: left+10px top+9px;
  background-repeat: no-repeat;
}
.blackmarket-encheres > .content > .item > .top > .case > .center > .inputs > input[type=submit] {
  float: left;
  min-height: 35px;
  line-height: 35px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  border-radius: 0 10px 10px 0;
  width: calc(100% - 100px);
}
.blackmarket-encheres > .content > .item > .top > .case > .center > .inputs > input[type=submit] > img {
  line-height: 35px;
  vertical-align: middle;
  margin-top: -1px;
}
.blackmarket-encheres > .content > .item > .top > .case > .center > .inputs > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.blackmarket-encheres > .content > .item > .top > .case > .center > .inputs > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.blackmarket-encheres > .content > .item > .top > .case > .center > .inputs > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.blackmarket-encheres > .content > .item > .history {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 0 0 10px 10px;
  background-color: rgb(49.1489361702, 51.6063829787, 66.3510638298);
  transition: 200ms ease-in-out all;
  overflow: hidden;
  line-height: 50px;
  height: 50px;
  white-space: nowrap;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.blackmarket-encheres > .content > .item > .history:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background-image: linear-gradient(to left, rgb(49.1489361702, 51.6063829787, 66.3510638298), transparent);
  z-index: 5;
  transition: 200ms ease-in-out all;
}
.blackmarket-encheres > .content > .item > .history > span {
  margin-left: 20px;
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.blackmarket-encheres > .content > .item > .history > span > b {
  color: #347ae2;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}

.blackmarket-encheres[theme=light] > .content > .item > .top {
  background-color: #eaeaea;
}
.blackmarket-encheres[theme=light] > .content > .item > .top > .case > .center > h5 {
  color: #3c3f51;
}
.blackmarket-encheres[theme=light] > .content > .item > .top > .case > .center > span {
  color: #3c3f51;
}
.blackmarket-encheres[theme=light] > .content > .item > .top > .case > .center > .inputs > input[type=number] {
  border-color: #ddd;
}
.blackmarket-encheres[theme=light] > .content > .item > .history {
  background-color: rgb(241.65, 241.65, 241.65);
}
.blackmarket-encheres[theme=light] > .content > .item > .history::after {
  background-image: linear-gradient(to left, rgb(241.65, 241.65, 241.65), transparent);
}
.blackmarket-encheres[theme=light] > .content > .item > .history > span {
  color: #3c3f51;
}
.blackmarket-encheres[theme=light] > .content > .item > .history > span > b {
  color: #365aa3;
}

.blackmarket-enigmes > .description::after {
  content: "";
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: url("../images/don-cornichon.png");
  background-position: calc(100% + 82px) top;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 0.4;
}
.blackmarket-enigmes > .enigmes {
  width: 100%;
  float: left;
  clear: both;
  width: calc(100% + 15px);
}
.blackmarket-enigmes > .enigmes > .loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.blackmarket-enigmes > .enigmes > .col {
  float: left;
  width: calc(50% - 15px);
  margin-right: 15px;
}
.blackmarket-enigmes > .enigmes > .col > .enigme {
  margin-right: 15px;
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > .description:not(.find) *:not(b) {
  transition: 200ms ease-in-out all;
  color: #ffffff;
  font-size: 14px;
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > .description.find {
  transition: 200ms ease-in-out all;
  background-color: #3c3f51;
  border-radius: 10px;
  padding: 15px 18px;
  margin-top: 15px;
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > form {
  width: 100%;
  float: left;
  clear: both;
  transition: 200ms ease-in-out all;
  background-color: #3c3f51;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > form > input[type=text] {
  float: left;
  transition: 200ms ease-in-out all;
  background-color: #ffffff;
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  line-height: 43px;
  padding: 0 15px;
  border-radius: 10px;
  width: calc(40% - 15px);
  margin-right: 15px;
  text-align: center;
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > form > input[type=submit] {
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  width: 60%;
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > form > input[type=submit] > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > form > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > form > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.blackmarket-enigmes > .enigmes > .col > .enigme > .content > form > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.blackmarket-enigmes[theme=light] > .enigmes > .loading {
  filter: invert(0);
}
.blackmarket-enigmes[theme=light] > .enigmes > .col > .enigme > .content > .description:not(.find) *:not(b) {
  color: #3c3f51;
}
.blackmarket-enigmes[theme=light] > .enigmes > .col > .enigme > .content > .description.find {
  background-color: #eaeaea;
}
.blackmarket-enigmes[theme=light] > .enigmes > .col > .enigme > .content > form {
  background-color: #eaeaea;
}
.blackmarket-enigmes[theme=light] > .enigmes > .col > .enigme > .content > form > input[type=text] {
  border-color: #ddd;
}

.global-box.item-box {
  padding: 0;
}
.global-box.item-box > .left {
  float: left;
  width: 40%;
  height: 252px;
  background-image: url("../images/room.png");
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 10px 0 0 10px;
  text-align: center;
  line-height: 252px;
}
.global-box.item-box > .left > img {
  vertical-align: middle;
}
.global-box.item-box > .right {
  float: right;
  width: 60%;
}
.global-box.item-box > .right > .title {
  width: 100%;
  float: left;
  clear: both;
  background-color: #347ae2;
  background-image: url("../images/room-dark.png");
  background-repeat: no-repeat;
  background-position: right center;
  border-radius: 0 10px 0 0;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.global-box.item-box > .right > .content {
  width: 100%;
  float: left;
  clear: both;
  padding: 0 20px 20px 20px;
}
.global-box.item-box > .right > .content > .inf {
  float: left;
  margin-top: 20px;
}
.global-box.item-box > .right > .content > .inf.demi {
  float: left;
  width: 50%;
}
.global-box.item-box > .right > .content > .inf:not(.demi) {
  clear: both;
  width: 100%;
}
.global-box.item-box > .right > .content > .inf > b {
  width: 100%;
  float: left;
  clear: both;
  font-weight: bold;
  color: #347ae2;
  margin-bottom: 5px;
  transition: 200ms ease-in-out all;
}
.global-box.item-box > .right > .content > .inf > span {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  margin-top: 5px;
  transition: 200ms ease-in-out all;
}

.global-box.item-box[theme=light] > .right > .title {
  background-color: #6ebff3;
  background-image: url("../images/room-light.png");
  color: #ffffff;
}
.global-box.item-box[theme=light] > .right > .content > .inf > b {
  color: #5ba4dd;
}
.global-box.item-box[theme=light] > .right > .content > .inf > span {
  color: #3c3f51;
}

.blackmarket.pack-rares {
  width: calc(100% + 15px);
}
.blackmarket.pack-rares > .pack-received {
  width: calc(100% - 15px);
}
.blackmarket.pack-rares > .pack-received > .content {
  width: 100%;
  float: left;
  clear: both;
}
.blackmarket.pack-rares > .pack-received > .content > .mobi {
  text-align: center;
  display: inline-block;
  width: calc(25% - 30px);
  font-size: 0;
  margin-right: 30px;
}
.blackmarket.pack-rares > .pack-received > .content > .mobi:first-child {
  margin-left: 15px;
}
.blackmarket.pack-rares > .pack-received > .content > .mobi:last-child {
  margin-right: 0;
}
.blackmarket.pack-rares > .pack-received > .content > .mobi > span {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 10px;
  background-color: #3c3f51;
  padding: 15px 18px;
  color: #ffffff;
  font-size: 14px;
  border-radius: 10px;
  transition: 200ms ease-in-out all;
}
.blackmarket.pack-rares > .pack {
  width: calc(50% - 15px);
  clear: none;
  float: left;
  margin-right: 15px;
}
.blackmarket.pack-rares > .pack * {
  opacity: 1;
  transition: 200ms ease-in-out all;
}
.blackmarket.pack-rares > .pack.loading * {
  opacity: 0.5;
}
.blackmarket.pack-rares > .pack > .title.silver {
  color: #c0c0c0;
}
.blackmarket.pack-rares > .pack > .title.gold {
  color: #e7a629;
}
.blackmarket.pack-rares > .pack > .title.platinum {
  color: #c9c8c7;
}
.blackmarket.pack-rares > .pack > .title.special {
  color: #ee7cff;
}
.blackmarket.pack-rares > .pack > .informations {
  width: 100%;
  float: left;
  clear: both;
  width: 100%;
  padding: 15px 15px 0 15px;
  padding-top: 0;
}
.blackmarket.pack-rares > .pack > .informations > .inf {
  float: left;
  width: calc(50% - 30px);
  margin-bottom: 15px;
}
.blackmarket.pack-rares > .pack > .informations > .inf > b {
  width: 100%;
  float: left;
  clear: both;
  font-weight: bold;
  transition: 200ms ease-in-out all;
}
.blackmarket.pack-rares > .pack > .informations > .inf > span {
  width: 100%;
  float: left;
  clear: both;
  font-size: 14px;
  margin-top: 3px;
  transition: 200ms ease-in-out all;
}
.blackmarket.pack-rares > .pack > .informations > .image {
  position: absolute;
  bottom: 0;
  right: 15px;
}
.blackmarket.pack-rares > .pack > .buy {
  margin-bottom: 15px;
  margin-left: 15px;
  width: calc(100% - 30px) !important;
}
.blackmarket.pack-rares > .pack > .buy.silver {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #c0c0c0;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #3c3f51;
}
.blackmarket.pack-rares > .pack > .buy.silver > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.blackmarket.pack-rares > .pack > .buy.silver:hover {
  background-color: rgb(217.5, 217.5, 217.5);
}
.blackmarket.pack-rares > .pack > .buy.silver[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.blackmarket.pack-rares > .pack > .buy.silver[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.blackmarket.pack-rares > .pack > .buy.gold {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #e7a629;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.blackmarket.pack-rares > .pack > .buy.gold > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.blackmarket.pack-rares > .pack > .buy.gold:hover {
  background-color: rgb(236.1428571429, 185.0714285714, 86.8571428571);
}
.blackmarket.pack-rares > .pack > .buy.gold[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.blackmarket.pack-rares > .pack > .buy.gold[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.blackmarket.pack-rares > .pack > .buy.platinum {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #c9c8c7;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #3c3f51;
}
.blackmarket.pack-rares > .pack > .buy.platinum > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.blackmarket.pack-rares > .pack > .buy.platinum:hover {
  background-color: rgb(226.0363636364, 225.5, 224.9636363636);
}
.blackmarket.pack-rares > .pack > .buy.platinum[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.blackmarket.pack-rares > .pack > .buy.platinum[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.blackmarket.pack-rares > .pack > .buy.special {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #ee7cff;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #3c3f51;
}
.blackmarket.pack-rares > .pack > .buy.special > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.blackmarket.pack-rares > .pack > .buy.special:hover {
  background-color: rgb(244.6183206107, 175, 255);
}
.blackmarket.pack-rares > .pack > .buy.special[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.blackmarket.pack-rares > .pack > .buy.special[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.blackmarket.pack-rares[theme=dark] > .pack > .informations > .inf > b {
  color: #ffffff;
}
.blackmarket.pack-rares[theme=dark] > .pack > .informations > .inf > span {
  color: #ffffff;
}

.page.help-tickets > .left {
  float: left;
  width: calc(100% - 160px - 15px - 450px - 15px);
}
.page.help-tickets > .right {
  float: left;
  margin-left: 15px;
  width: 450px;
}

.page.help-newbie > .content {
  float: left;
  width: calc(100% - 160px - 15px);
}
.page.help-newbie > .content > .background {
  width: 100%;
  float: left;
  clear: both;
  height: 300px;
  background: url("../images/jobs.png");
  background-position: center top;
  background-repeat: no-repeat;
  margin-top: 15px;
  border-radius: 10px;
}
.page.help-newbie > .content > .background::before {
  border-radius: 10px;
  content: "";
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.page.help-newbie > .content > .background > h1 {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  text-shadow: 0 2px 10px #000;
  color: #ffffff;
  font-size: 40px;
  line-height: 120px;
  font-weight: bold;
}
.page.help-newbie > .content > .global-box {
  width: calc(100% - 60px);
  margin-left: 30px;
  margin-top: -115px;
}
.page.help-newbie > .content > .global-box > .title {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
}
.page.help-newbie > .content > .global-box > .content > .case {
  float: left;
  width: 20%;
  height: 300px;
  text-align: center;
  margin: 25px 0;
}
.page.help-newbie > .content > .global-box > .content > .case > span {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  padding: 0 20px;
  transition: 200ms ease-in-out all;
}
.page.help-newbie > .content > .global-box > .content > .case > span.title {
  color: #347ae2;
  text-transform: uppercase;
  transition: 200ms ease-in-out all;
}
.page.help-newbie > .content > .global-box > .content > .case > span > a {
  color: #347ae2;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.help-newbie > .content > .global-box > .content > .case > img {
  margin: 15px 0;
}

.page.help-newbie[theme=light] > .content > .global-box > .content > .case > span {
  color: #3c3f51;
}
.page.help-newbie[theme=light] > .content > .global-box > .content > .case > span.title {
  color: #365aa3;
}
.page.help-newbie[theme=light] > .content > .global-box > .content > .case > span > a {
  color: #365aa3;
}

.page.help-safety > .content {
  float: left;
  width: calc(100% - 160px - 15px);
}
.page.help-safety > .content > .background {
  width: 100%;
  float: left;
  clear: both;
  height: 300px;
  background: url("../images/jobs.png");
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 15px;
  border-radius: 10px;
}
.page.help-safety > .content > .background::before {
  border-radius: 10px;
  content: "";
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.page.help-safety > .content > .background > h1 {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  text-shadow: 0 2px 10px #000;
  color: #ffffff;
  font-size: 40px;
  line-height: 120px;
  font-weight: bold;
}
.page.help-safety > .content > .global-box {
  width: calc(100% - 60px);
  margin-left: 30px;
  margin-top: -115px;
}
.page.help-safety > .content > .global-box > .title {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
}
.page.help-safety > .content > .global-box > .content > .col {
  float: left;
  width: 50%;
}
.page.help-safety > .content > .global-box > .content > .col > .case {
  width: 100%;
  float: left;
  clear: both;
  margin: 25px 0;
  text-align: center;
}
.page.help-safety > .content > .global-box > .content > .col > .case > span {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  padding: 0 20px;
  transition: 200ms ease-in-out all;
}
.page.help-safety > .content > .global-box > .content > .col > .case > span.title {
  color: #347ae2;
  text-transform: uppercase;
  transition: 200ms ease-in-out all;
}
.page.help-safety > .content > .global-box > .content > .col > .case > span > a {
  color: #347ae2;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.help-safety > .content > .global-box > .content > .col > .case > img {
  margin: 15px 0;
}

.page.help-safety[theme=light] > .content > .global-box > .content > .col > .case > span {
  color: #3c3f51;
}
.page.help-safety[theme=light] > .content > .global-box > .content > .col > .case > span.title {
  color: #365aa3;
}
.page.help-safety[theme=light] > .content > .global-box > .content > .col > .case > span > a {
  color: #365aa3;
}

.page.help-tutos > .content {
  float: left;
  width: calc(100% - 160px - 15px);
}
.page.help-tutos > .content.loading {
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}
.page.help-tutos > .content > .category {
  width: 100%;
  float: left;
  clear: both;
}
.page.help-tutos > .content > .category > .title {
  width: 100%;
  float: left;
  clear: both;
  height: 300px;
  background: url("../images/tuto.png");
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 15px;
  border-radius: 10px;
}
.page.help-tutos > .content > .category > .title::before {
  border-radius: 10px;
  content: "";
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.page.help-tutos > .content > .category > .title > h1 {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  text-shadow: 0 2px 10px #000;
  color: #ffffff;
  font-size: 40px;
  line-height: 150px;
  font-weight: bold;
}
.page.help-tutos > .content > .category > .global-box {
  width: calc(100% - 60px);
  margin-left: 30px;
  float: left;
  margin-top: -100px;
  padding-top: 15px;
}
.page.help-tutos > .content > .category > .global-box > .content > .video {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  background-color: #3c3f51;
  border-radius: 10px;
  padding: 15px;
  transition: 200ms ease-in-out all;
  margin-bottom: 15px;
}
.page.help-tutos > .content > .category > .global-box > .content > .video:last-child {
  margin-bottom: 0;
}
.page.help-tutos > .content > .category > .global-box > .content > .video > span {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  cursor: pointer;
}
.page.help-tutos > .content > .category > .global-box > .content > .video > .vi {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 10px;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.page.help-tutos > .content > .category > .global-box > .content > .video > .vi > iframe {
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page.help-tutos[theme=light] > .content.loading {
  filter: invert(0);
}
.page.help-tutos[theme=light] > .content > .category > .global-box > .content > .video {
  background-color: #eaeaea;
}
.page.help-tutos[theme=light] > .content > .category > .global-box > .content > .video > span {
  color: #3c3f51;
}

.page.help-attitude > .content {
  float: left;
  width: calc(100% - 160px - 15px);
}
.page.help-attitude > .content > .background {
  width: 100%;
  float: left;
  clear: both;
  height: 300px;
  background: url("../images/jobs.png");
  background-position: center top;
  background-repeat: no-repeat;
  margin-top: 15px;
  border-radius: 10px;
}
.page.help-attitude > .content > .background::before {
  border-radius: 10px;
  content: "";
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.page.help-attitude > .content > .background > h1 {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  text-shadow: 0 2px 10px #000;
  color: #ffffff;
  font-size: 40px;
  line-height: 120px;
  font-weight: bold;
}
.page.help-attitude > .content > .global-box {
  width: calc(100% - 60px);
  margin-left: 30px;
  margin-top: -115px;
}
.page.help-attitude > .content > .global-box > .title {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
}
.page.help-attitude > .content > .global-box > .content {
  padding: 30px;
}
.page.help-attitude > .content > .global-box > .content > .col {
  width: 50%;
  float: left;
  border-radius: 10px;
  padding: 30px;
}
.page.help-attitude > .content > .global-box > .content > .col > h1 {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  text-align: center;
}
.page.help-attitude > .content > .global-box > .content > .col.left {
  background-color: #4c9c49;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 0;
}
.page.help-attitude > .content > .global-box > .content > .col.left > .case > img {
  float: right;
}
.page.help-attitude > .content > .global-box > .content > .col.left > .case > .desc {
  float: left;
}
.page.help-attitude > .content > .global-box > .content > .col.right {
  background-color: #c43939;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0;
}
.page.help-attitude > .content > .global-box > .content > .col.right > .case > img {
  float: left;
}
.page.help-attitude > .content > .global-box > .content > .col.right > .case > .desc {
  float: right;
}
.page.help-attitude > .content > .global-box > .content > .col > .case {
  width: 100%;
  float: left;
  clear: both;
}
.page.help-attitude > .content > .global-box > .content > .col > .case > .desc {
  display: flex;
  align-content: center;
  width: calc(100% - 220px - 30px);
  height: 228px;
  flex-wrap: wrap;
}
.page.help-attitude > .content > .global-box > .content > .col > .case > .desc > .title {
  width: 100%;
  margin-bottom: 10px;
  color: #ffffff;
}
.page.help-attitude > .content > .global-box > .content > .col > .case > .desc > .d {
  width: 100%;
  color: #ffffff;
  opacity: 0.8;
  font-size: 14px;
}

.new-ticket > .content {
  width: 100%;
  float: left;
  clear: both;
}
.new-ticket > .content > form.form {
  width: 100%;
  float: left;
  clear: both;
}
.new-ticket > .content > form.form > p {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  transition: 200ms ease-in-out all;
  margin-top: 30px;
}
.new-ticket > .content > form.form > .input {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 20px;
}
.new-ticket > .content > form.form > .input.z {
  z-index: 80;
}
.new-ticket > .content > form.form > .input > label {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 10px;
  color: #eaeaea;
  transition: 200ms ease-in-out all;
}
.new-ticket > .content > form.form > .input > input:not([type=submit]),
.new-ticket > .content > form.form > .input > textarea {
  width: 100%;
  float: left;
  clear: both;
  resize: none;
  background-color: #3c3f51;
  color: #ffffff;
  border-radius: 10px;
  height: 50px;
  transition: 200ms ease-in-out all;
  padding: 0 17px;
  border: 1px solid transparent;
}
.new-ticket > .content > form.form > .input > input:not([type=submit])::placeholder,
.new-ticket > .content > form.form > .input > textarea::placeholder {
  color: #eaeaea;
  opacity: 0.5;
  transition: 200ms ease-in-out all;
}
.new-ticket > .content > form.form > .input > textarea {
  height: 200px;
  line-height: 16px;
  padding: 20px 17px;
}
.new-ticket > .content > form.form > .input > input[type=submit] {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.new-ticket > .content > form.form > .input > input[type=submit] > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.new-ticket > .content > form.form > .input > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.new-ticket > .content > form.form > .input > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.new-ticket > .content > form.form > .input > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.new-ticket > .content > form.form > .input-help {
  background: #2c2f3a;
  padding: 10px 17px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 0;
}
.new-ticket > .content > form.form > .input-help svg {
  vertical-align: -3px;
  margin-right: 5px;
}
.new-ticket > .content > form.form > .input-help b {
  color: #ffffff;
  font-size: 14px;
}

.new-ticket[theme=light] > .content > form.form > p {
  color: #3c3f51;
}
.new-ticket[theme=light] > .content > form.form > .input > label {
  color: #3c3f51;
}
.new-ticket[theme=light] > .content > form.form > .input > input:not([type=submit]),
.new-ticket[theme=light] > .content > form.form > .input > textarea {
  background-color: #eaeaea;
  color: #3c3f51;
  border-color: #ddd;
}
.new-ticket[theme=light] > .content > form.form > .input > input:not([type=submit])::placeholder,
.new-ticket[theme=light] > .content > form.form > .input > textarea::placeholder {
  color: #3c3f51;
}

.box-my-tickets > .content > .ticket {
  width: 100%;
  float: left;
  clear: both;
  background-color: #3c3f51;
  border-radius: 10px;
  margin-top: 15px;
  transition: 200ms ease-in-out all;
}
.box-my-tickets > .content > .ticket:first-child {
  margin-top: 0;
}
.box-my-tickets > .content > .ticket > .title {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  padding: 15px;
  cursor: pointer;
  word-wrap: break-word;
  transition: 200ms ease-in-out all;
}
.box-my-tickets > .content > .ticket > .title > .status {
  float: left;
  height: 20px;
  width: 20px;
  margin-right: 10px;
}
.box-my-tickets > .content > .ticket > .title > .status > img {
  width: 100%;
}
.box-my-tickets > .content > .ticket > .body {
  width: 100%;
  float: left;
  clear: both;
  background-color: rgb(53.4893617021, 56.1638297872, 72.2106382979);
  padding: 15px;
  color: #ffffff;
  font-size: 14px;
  border-radius: 0 0 10px 10px;
  word-wrap: break-word;
  transition: 200ms ease-in-out all;
}
.box-my-tickets > .content > .ticket > .body > .response {
  width: 100%;
  float: left;
  clear: both;
  word-wrap: break-word;
  color: #eaeaea;
  font-style: italic;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.box-my-tickets > .content > .ticket > .body > .response > .title {
  width: 100%;
  float: left;
  clear: both;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  transition: 200ms ease-in-out all;
  margin-top: 15px;
  padding: 15px 0;
  color: #eaeaea;
}
.box-my-tickets > .content > .ticket > .body > .response > i {
  color: #eaeaea;
  font-style: italic;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.box-my-tickets > .content > .ticket > .body > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 15px;
}
.box-my-tickets > .content > .ticket > .body > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.box-my-tickets > .content > .ticket > .body > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.box-my-tickets > .content > .ticket > .body > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.box-my-tickets > .content > .ticket > .body > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}

.box-my-tickets[theme=light] > .content > .ticket {
  background-color: #eaeaea;
}
.box-my-tickets[theme=light] > .content > .ticket > .title {
  color: #3c3f51;
}
.box-my-tickets[theme=light] > .content > .ticket > .body {
  background-color: rgb(228.9, 228.9, 228.9);
  color: #3c3f51;
}
.box-my-tickets[theme=light] > .content > .ticket > .body > .response {
  color: rgb(66.5106382979, 69.8361702128, 89.7893617021);
}
.box-my-tickets[theme=light] > .content > .ticket > .body > .response > .title {
  color: rgb(66.5106382979, 69.8361702128, 89.7893617021);
}
.box-my-tickets[theme=light] > .content > .ticket > .body > .response > i {
  color: rgb(66.5106382979, 69.8361702128, 89.7893617021);
}

.page.forum > .forum {
  width: calc(100% - 160px - 15px) !important;
  float: left;
  clear: none !important;
}
.page.forum > .forum > .box-error {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.page.forum > .forum > .header.category {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 10px 10px 0 0;
  background-color: rgba(0, 0, 0, 0.2);
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .header > h1 {
  float: left;
  line-height: 70px;
  font-size: 20px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
  margin: 0;
}
.page.forum > .forum > .header > h1 > img {
  vertical-align: middle;
  margin-right: 15px;
  margin-left: 15px;
}
.page.forum > .forum > .header > a {
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  float: right;
  padding: 0 30px;
  margin: 13px 12px 12px 0;
}
.page.forum > .forum > .header > a > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.forum > .forum > .header > a:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.page.forum > .forum > .header > a[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.forum > .forum > .header > a[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.forum > .forum > .content {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.page.forum > .forum > .content > .title {
  width: 100%;
  float: left;
  clear: both;
  background: #282a34;
  border-radius: 10px 10px 0 0;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content > .title > span {
  border-right: 1px solid #3c3f51;
  float: left;
  width: 50%;
  line-height: 45px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content > .title > span:last-child {
  border: none;
}
.page.forum > .forum > .content.home > .line {
  width: 100%;
  float: left;
  clear: both;
  border-radius: 10px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line:nth-child(2n+1) {
  background-color: #282a34;
}
.page.forum > .forum > .content.home > .line > .left {
  width: 50%;
  float: left;
  padding: 20px 25px;
  height: 187px;
}
.page.forum > .forum > .content.home > .line > .left > .background {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 15px;
  bottom: 20px;
  top: 20px;
  border-radius: 10px;
}
.page.forum > .forum > .content.home > .line > .left > .link {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 22px;
  background-color: #3c3f51;
  margin-left: 20px;
  margin-top: 27px;
  border-top-left-radius: 10px;
  padding: 10px 15px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .left > .link::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 10px;
  border-bottom-right-radius: 10px;
  height: 10px;
  width: 10px;
  box-shadow: 2px 2px 0 2px #3c3f51;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .left > p {
  width: 100%;
  float: left;
  clear: both;
  color: rgb(162.8695652174, 166.4130434783, 184.1304347826);
  font-size: 14px;
  padding: 0px 15px 10px 15px;
  background-color: #3c3f51;
  margin-left: 20px;
  border-bottom-left-radius: 10px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .left > p::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 10px;
  border-top-right-radius: 10px;
  height: 10px;
  width: 10px;
  box-shadow: 2px -2px 0 2px #3c3f51;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats {
  width: 50%;
  float: right;
}
.page.forum > .forum > .content.home > .line > .stats > .top {
  width: 100%;
  float: left;
  clear: both;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col {
  float: left;
  padding: 20px 25px 10px 25px;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col.min {
  width: 20%;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col:not(.min) {
  width: 60%;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col > h1 {
  width: 100%;
  float: left;
  clear: both;
  font-size: 12px;
  color: rgb(162.8695652174, 166.4130434783, 184.1304347826);
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col > span {
  width: 100%;
  float: left;
  clear: both;
  font-size: 30px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col > .users {
  padding: 2px 0 0 5px;
  display: inline-flex;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col > .users > .response-avatar {
  background-color: #282a34;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-left: -12px;
  border: 5px solid #3c3f51;
  float: left;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col > .users > .response-avatar > img {
  margin-top: -3px;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col > .users > .response-more-counter {
  background-color: #347ae2;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-left: -12px;
  border: 5px solid #3c3f51;
  float: left;
  text-align: center;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col > .users > .response-more-counter > span {
  text-align: center;
  margin-top: 5px;
  margin-left: 2px;
  font-size: 11px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .top > .col > .users > p {
  margin-top: 5px;
  font-size: 12px;
  color: #ffffff;
  margin-left: -5px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .down {
  width: 100%;
  float: left;
  clear: both;
  padding: 10px 25px 25px 25px;
}
.page.forum > .forum > .content.home > .line > .stats > .down > h1 {
  width: 100%;
  float: left;
  clear: both;
  font-size: 12px;
  color: rgb(162.8695652174, 166.4130434783, 184.1304347826);
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .down > a {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line > .stats > .down > a:hover {
  color: #347ae2;
}
.page.forum > .forum > .content.home > .line > .stats::after {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.home > .line:nth-child(2n+1) > .left > .background {
  left: 20px;
}
.page.forum > .forum > .content.home > .line:nth-child(2n+1) > .left > .link,
.page.forum > .forum > .content.home > .line:nth-child(2n+1) > .left > p {
  background-color: #282a34;
}
.page.forum > .forum > .content.home > .line:nth-child(2n+1) > .left > .link::after {
  box-shadow: 2px 2px 0 2px #282a34;
}
.page.forum > .forum > .content.home > .line:nth-child(2n+1) > .left > p::after {
  box-shadow: 2px -2px 0 2px #282a34;
}
.page.forum > .forum > .content.home > .line:nth-child(2n+1) > .stats > .top > .col > .users > .response-avatar {
  background-color: #3c3f51 !important;
  border-color: #282a34 !important;
}
.page.forum > .forum > .content.home > .line:nth-child(2n+1) > .stats > .top > .col > .users > .response-more-counter {
  border-color: #282a34 !important;
}
.page.forum > .forum > .content.loading {
  width: 100%;
  float: left;
  clear: both;
  height: 150px;
  background-image: url("../images/load.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: invert(1);
  transition: 200ms ease-in-out all;
}

.page.forum[theme=light] > .forum > .header.category {
  background-color: #efd99c;
}
.page.forum[theme=light] > .forum > .header > h1 {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .header > form > input:not([type=submit]) {
  background: #eaeaea;
  border-color: #ddd;
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.home > .line:nth-child(2n+1) {
  background-color: #ffffff;
}
.page.forum[theme=light] > .forum > .content.home > .line > .left > .link {
  width: 100%;
  float: left;
  clear: both;
  color: #3c3f51;
  background-color: #eaeaea;
}
.page.forum[theme=light] > .forum > .content.home > .line > .left > .link::after {
  box-shadow: 2px 2px 0 2px #eaeaea;
}
.page.forum[theme=light] > .forum > .content.home > .line > .left > p {
  background-color: #eaeaea;
}
.page.forum[theme=light] > .forum > .content.home > .line > .left > p::after {
  box-shadow: 2px -2px 0 2px #eaeaea;
}
.page.forum[theme=light] > .forum > .content.home > .line > .stats > .top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.page.forum[theme=light] > .forum > .content.home > .line > .stats > .top > .col > span {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.home > .line > .stats > .top > .col > .users > .response-avatar {
  background-color: #ffffff;
  border: 5px solid #eaeaea;
}
.page.forum[theme=light] > .forum > .content.home > .line > .stats > .top > .col > .users > .response-more-counter {
  background-color: #5ba4dd;
  border: 5px solid #eaeaea;
}
.page.forum[theme=light] > .forum > .content.home > .line > .stats > .top > .col > .users > p {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.home > .line > .stats > .down > a {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.home > .line > .stats > .down > a:hover {
  color: #365aa3;
}
.page.forum[theme=light] > .forum > .content.home > .line > .stats::after {
  background-color: rgba(0, 0, 0, 0.2);
}
.page.forum[theme=light] > .forum > .content.home > .line:nth-child(2n+1) > .left > .link,
.page.forum[theme=light] > .forum > .content.home > .line:nth-child(2n+1) > .left > p {
  background-color: #ffffff;
}
.page.forum[theme=light] > .forum > .content.home > .line:nth-child(2n+1) > .left > .link::after {
  box-shadow: 2px 2px 0 2px #ffffff;
}
.page.forum[theme=light] > .forum > .content.home > .line:nth-child(2n+1) > .left > p::after {
  box-shadow: 2px -2px 0 2px #ffffff;
}
.page.forum[theme=light] > .forum > .content.home > .line:nth-child(2n+1) > .stats > .top > .col > .users > .response-avatar {
  background-color: #eaeaea !important;
  border-color: #ffffff !important;
}
.page.forum[theme=light] > .forum > .content.home > .line:nth-child(2n+1) > .stats > .top > .col > .users > .response-more-counter {
  border-color: #ffffff !important;
}
.page.forum[theme=light] > .forum > .content.loading {
  filter: invert(0);
}

.page.forum > .forum > .content.category {
  padding: 0 20px;
}
.page.forum > .forum > .content.category > .line.head {
  width: 100%;
  float: left;
  clear: both;
}
.page.forum > .forum > .content.category > .line.head > span {
  float: left;
  padding: 10px 0;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.category > .line.head > span.title {
  width: 50%;
}
.page.forum > .forum > .content.category > .line.head > span.users {
  width: 20%;
}
.page.forum > .forum > .content.category > .line.head > span.nb_responses {
  width: 10%;
}
.page.forum > .forum > .content.category > .line.head > span.last_activity {
  width: 20%;
}
.page.forum > .forum > .content.category > .line:not(.head) {
  width: 100%;
  float: left;
  clear: both;
  transition: 200ms ease-in-out all;
  border-top: 1px solid #3c3f51;
  padding: 10px 0;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col {
  float: left;
  height: 40px;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.title {
  width: 50%;
  color: #ffffff;
  line-height: 40px;
  transition: 200ms ease-in-out all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 15px;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.title:hover {
  color: #347ae2;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.users {
  width: 20%;
  padding: 2px 0 0 5px;
  display: inline-flex;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.users > .response-avatar {
  background-color: #3c3f51;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-left: -12px;
  border: 5px solid #282a34;
  float: left;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.users > .response-avatar > img {
  margin-top: -3px;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.users > .response-more-counter {
  background-color: #5797f8;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-left: -12px;
  border: 5px solid #282a34;
  float: left;
  text-align: center;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.users > .response-more-counter > span {
  text-align: center;
  margin-top: 5px;
  margin-left: 2px;
  font-size: 11px;
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.users > p {
  margin-top: 5px;
  font-size: 12px;
  color: #ffffff;
  margin-left: -5px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.nb_responses {
  width: 10%;
  color: #ffffff;
  line-height: 40px;
}
.page.forum > .forum > .content.category > .line:not(.head) > .col.last_activity {
  width: 20%;
  color: #ffffff;
  line-height: 40px;
}

.page.forum[theme=light] > .forum > .content.category > .line.head > span {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.category > .line:not(.head) {
  border-top: 1px solid #ddd;
}
.page.forum[theme=light] > .forum > .content.category > .line:not(.head) > .col.title {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.category > .line:not(.head) > .col.title:hover {
  color: #365aa3;
}
.page.forum[theme=light] > .forum > .content.category > .line:not(.head) > .col.users > .response-avatar {
  background-color: #eaeaea;
  border: 5px solid #ffffff;
}
.page.forum[theme=light] > .forum > .content.category > .line:not(.head) > .col.users > .response-more-counter {
  background-color: #365aa3;
  border: 5px solid #ffffff;
}
.page.forum[theme=light] > .forum > .content.category > .line:not(.head) > .col.users > p {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.category > .line:not(.head) > .col.nb_responses {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.category > .line:not(.head) > .col.last_activity {
  color: #3c3f51;
}

.page.forum > .forum > .content.thread > .body, .page.forum > .forum > .content.comments > .comment > .body {
  width: 100%;
  float: left;
  clear: both;
}
.page.forum > .forum > .content.thread > .body > .top, .page.forum > .forum > .content.comments > .comment > .body > .top {
  width: 100%;
  float: left;
  clear: both;
  background-color: #2a3247;
  border-radius: 10px 10px 0 0;
  height: 100px;
  overflow: hidden;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.thread > .body > .top > .avatar, .page.forum > .forum > .content.comments > .comment > .body > .top > .avatar {
  float: left;
  width: 85px;
  height: 100px;
  background-image: url("../images/forum_plate.png");
  background-repeat: no-repeat;
  text-align: center;
}
.page.forum > .forum > .content.thread > .body > .top > .avatar > img, .page.forum > .forum > .content.comments > .comment > .body > .top > .avatar > img {
  margin-top: 10px;
}
.page.forum > .forum > .content.thread > .body > .top > .informations, .page.forum > .forum > .content.comments > .comment > .body > .top > .informations {
  float: left;
  padding: 15px 20px;
}
.page.forum > .forum > .content.thread > .body > .top > .informations > span, .page.forum > .forum > .content.comments > .comment > .body > .top > .informations > span {
  float: left;
  clear: both;
  margin-top: 5px;
  color: #ffffff;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.thread > .body > .top > .informations > span > a, .page.forum > .forum > .content.comments > .comment > .body > .top > .informations > span > a {
  color: #5797f8;
  transition: 200ms ease-in-out all;
  font-size: 14px;
}
.page.forum > .forum > .content.thread > .body > .top > .informations > span > a:hover, .page.forum > .forum > .content.comments > .comment > .body > .top > .informations > span > a:hover {
  text-decoration: underline;
}
.page.forum > .forum > .content.thread > .body > .top > .status, .page.forum > .forum > .content.comments > .comment > .body > .top > .status {
  float: right;
  line-height: 100px;
  padding: 0 40px;
}
.page.forum > .forum > .content.thread > .body > .top > .status > img, .page.forum > .forum > .content.comments > .comment > .body > .top > .status > img {
  vertical-align: middle;
}
.page.forum > .forum > .content.thread > .body > .thread, .page.forum > .forum > .content.comments > .comment > .body > .thread {
  width: 100%;
  float: left;
  clear: both;
  padding: 5px 20px 15px 20px;
}
.page.forum > .forum > .content.thread > .body > .thread *, .page.forum > .forum > .content.comments > .comment > .body > .thread * {
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  white-space: pre-wrap;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.thread > .body > .informations, .page.forum > .forum > .content.comments > .comment > .body > .informations {
  width: 100%;
  float: left;
  clear: both;
  padding: 15px 20px;
  background-color: #2a3247;
  border-radius: 0 0 10px 10px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.thread > .body > .informations > span, .page.forum > .forum > .content.comments > .comment > .body > .informations > span {
  color: #ffffff;
  float: left;
  font-size: 14px;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.thread > .body > .informations > span > a, .page.forum > .forum > .content.comments > .comment > .body > .informations > span > a {
  color: #5797f8;
  transition: 200ms ease-in-out all;
  cursor: pointer;
  font-size: 14px;
}
.page.forum > .forum > .content.thread > .body > .informations > span > a:hover, .page.forum > .forum > .content.comments > .comment > .body > .informations > span > a:hover {
  text-decoration: underline;
}
.page.forum > .forum > .content.thread > .body > .informations > .right, .page.forum > .forum > .content.comments > .comment > .body > .informations > .right {
  float: right;
}
.page.forum > .forum > .content.thread > .body > .informations > .right > a,
.page.forum > .forum > .content.thread > .body > .informations > .right > span, .page.forum > .forum > .content.comments > .comment > .body > .informations > .right > a,
.page.forum > .forum > .content.comments > .comment > .body > .informations > .right > span {
  cursor: pointer;
  color: #5797f8;
  transition: 200ms ease-in-out all;
  font-size: 14px;
}
.page.forum > .forum > .content.thread > .body > .informations > .right > a:hover,
.page.forum > .forum > .content.thread > .body > .informations > .right > span:hover, .page.forum > .forum > .content.comments > .comment > .body > .informations > .right > a:hover,
.page.forum > .forum > .content.comments > .comment > .body > .informations > .right > span:hover {
  text-decoration: underline;
}
.page.forum > .forum > .content.thread > .body > .informations > .right > span, .page.forum > .forum > .content.comments > .comment > .body > .informations > .right > span {
  color: #ce5b5b;
  margin-left: 15px;
}
.page.forum > .forum > .content.comments {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 0;
}
.page.forum > .forum > .content.comments > .box-error {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.page.forum > .forum > .content.comments > .btn {
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
  margin-top: 15px;
}
.page.forum > .forum > .content.comments > .btn > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.forum > .forum > .content.comments > .btn:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.page.forum > .forum > .content.comments > .btn[theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.forum > .forum > .content.comments > .btn[theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.forum > .forum > .content.comments > .comment > .body > .top {
  height: 78px;
}
.page.forum > .forum > .content.comments > .comment > .body > .top > .avatar {
  height: 78px;
}
.page.forum > .forum > .content.comments > .create-response, .page.forum > .forum > .content.comments .edit-response {
  width: 100%;
  float: left;
  clear: both;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create > .tt-txtarea, .page.forum > .forum > .content.comments .edit-response > .content > .input-create > .tt-txtarea {
  width: 100%;
  float: left;
  clear: both;
  resize: none;
  background-color: #3c3f51;
  color: #ffffff;
  height: 50px;
  transition: 200ms ease-in-out all;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create > .tt-txtarea::placeholder, .page.forum > .forum > .content.comments .edit-response > .content > .input-create > .tt-txtarea::placeholder {
  color: #eaeaea;
  opacity: 0.5;
  transition: 200ms ease-in-out all;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create .tt-editor-menubar, .page.forum > .forum > .content.comments .edit-response > .content > .input-create .tt-editor-menubar {
  display: inline-flex;
  background-color: #2d303a;
  width: 100%;
  padding: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create .tt-editor-menubar > .tt-btn, .page.forum > .forum > .content.comments .edit-response > .content > .input-create .tt-editor-menubar > .tt-btn {
  color: #fff;
  padding: 4px 10px;
  margin-right: 5px;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create .tt-editor-menubar > .tt-btn:hover, .page.forum > .forum > .content.comments .edit-response > .content > .input-create .tt-editor-menubar > .tt-btn:hover {
  background-color: #3e4150;
  transition: background-color 0.3s ease;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create .tt-editor-menubar > .tt-btn.is-active, .page.forum > .forum > .content.comments .edit-response > .content > .input-create .tt-editor-menubar > .tt-btn.is-active {
  background-color: #3e4150;
  transition: background-color 0.3s ease;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create > .tt-txtarea, .page.forum > .forum > .content.comments .edit-response > .content > .input-create > .tt-txtarea {
  min-height: 200px;
  line-height: 16px;
  padding: 5px 17px 20px 17px;
  border-radius: 0;
  overflow: auto;
  resize: vertical;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create > .tt-txtarea > .ProseMirror, .page.forum > .forum > .content.comments .edit-response > .content > .input-create > .tt-txtarea > .ProseMirror {
  width: 100%;
  float: left;
  clear: both;
  height: 100%;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-create > .tt-txtarea > .ProseMirror > :last-child, .page.forum > .forum > .content.comments .edit-response > .content > .input-create > .tt-txtarea > .ProseMirror > :last-child {
  margin-bottom: 20px;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-help, .page.forum > .forum > .content.comments .edit-response > .content > .input-help {
  width: 100%;
  float: left;
  clear: both;
  background: #2c2f3a;
  padding: 10px 17px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 0;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-help svg, .page.forum > .forum > .content.comments .edit-response > .content > .input-help svg {
  vertical-align: -3px;
  margin-right: 5px;
}
.page.forum > .forum > .content.comments > .create-response > .content > .input-help b, .page.forum > .forum > .content.comments .edit-response > .content > .input-help b {
  color: #ffffff;
  font-size: 14px;
}
.page.forum > .forum > .content.comments > .create-response > .content > input[type=submit], .page.forum > .forum > .content.comments .edit-response > .content > input[type=submit] {
  margin-top: 15px;
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.page.forum > .forum > .content.comments > .create-response > .content > input[type=submit] > img, .page.forum > .forum > .content.comments .edit-response > .content > input[type=submit] > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.forum > .forum > .content.comments > .create-response > .content > input[type=submit]:hover, .page.forum > .forum > .content.comments .edit-response > .content > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.page.forum > .forum > .content.comments > .create-response > .content > input[type=submit][theme=light], .page.forum > .forum > .content.comments .edit-response > .content > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.forum > .forum > .content.comments > .create-response > .content > input[type=submit][theme=light]:hover, .page.forum > .forum > .content.comments .edit-response > .content > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.forum > .forum > .content .edit-response {
  padding: 15px;
}

.page.forum[theme=light] > .forum > .content.thread > .body > .top, .page.forum[theme=light] > .forum > .content.comments > .comment > .body > .top {
  background-color: #efd99c;
}
.page.forum[theme=light] > .forum > .content.thread > .body > .top > .informations > span, .page.forum[theme=light] > .forum > .content.comments > .comment > .body > .top > .informations > span {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.thread > .body > .top > .informations > span > a, .page.forum[theme=light] > .forum > .content.comments > .comment > .body > .top > .informations > span > a {
  color: #365aa3;
}
.page.forum[theme=light] > .forum > .content.thread > .body > .informations, .page.forum[theme=light] > .forum > .content.comments > .comment > .body > .informations {
  background: #efd99c;
}
.page.forum[theme=light] > .forum > .content.thread > .body > .informations > span, .page.forum[theme=light] > .forum > .content.comments > .comment > .body > .informations > span {
  color: #3c3f51;
}
.page.forum[theme=light] > .forum > .content.thread > .body > .informations > span > a, .page.forum[theme=light] > .forum > .content.comments > .comment > .body > .informations > span > a {
  color: #365aa3;
}
.page.forum[theme=light] > .forum > .content.thread > .body > .informations > .right > a,
.page.forum[theme=light] > .forum > .content.thread > .body > .informations > .right > span, .page.forum[theme=light] > .forum > .content.comments > .comment > .body > .informations > .right > a,
.page.forum[theme=light] > .forum > .content.comments > .comment > .body > .informations > .right > span {
  color: #ce5b5b;
}
.page.forum[theme=light] > .forum > .content.thread > .body > .informations > .right > a, .page.forum[theme=light] > .forum > .content.comments > .comment > .body > .informations > .right > a {
  color: #365aa3;
}
.page.forum[theme=light] > .forum > .content.comments > .create-response > .content > .input-create > .tt-txtarea, .page.forum[theme=light] > .forum > .content.comments .edit-response > .content > .input-create > .tt-txtarea {
  background-color: #dddddd;
}

.page.forum.create > .content {
  width: calc(100% - 160px - 15px);
  float: left;
}
.page.forum.create > .content > .background {
  width: 100%;
  float: left;
  clear: both;
  height: 300px;
  background: url("../images/jobs.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  border-radius: 0 0 10px 10px;
}
.page.forum.create > .content > .background::before {
  border-radius: 10px;
  content: "";
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.page.forum.create > .content > .background > h1 {
  width: 100%;
  float: left;
  clear: both;
  text-align: center;
  text-shadow: 0 2px 10px #000;
  color: #ffffff;
  font-size: 40px;
  line-height: 130px;
  font-weight: bold;
}
.page.forum.create > .content > .form {
  width: calc(100% - 60px);
  margin-left: 30px;
  margin-top: -115px;
}
.page.forum.create > .content > .form > .title {
  padding: 30px;
  padding-bottom: 20px;
}
.page.forum.create > .content > .form > .content {
  padding: 0;
  margin-top: -20px;
}
.page.forum.create > .content > .form > .content > form.form {
  width: 100%;
  float: left;
  clear: both;
  padding: 0 30px 30px 30px;
  background-color: rgb(37.7826086957, 39.6717391304, 49.1173913043);
  transition: 200ms ease-in-out all;
  border-radius: 0 0 10px 10px;
  margin-top: 30px;
  border-top: 1px solid transparent;
}
.page.forum.create > .content > .form > .content > form.form > p {
  width: 100%;
  float: left;
  clear: both;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  transition: 200ms ease-in-out all;
  margin-top: 30px;
}
.page.forum.create > .content > .form > .content > form.form > .input {
  margin-top: 30px;
}
.page.forum.create > .content > .form > .content > form.form > .input.z {
  z-index: 80;
}
.page.forum.create > .content > .form > .content > form.form > .input:not(.demi) {
  width: 100%;
  float: left;
  clear: both;
}
.page.forum.create > .content > .form > .content > form.form > .input.demi {
  float: left;
  width: calc(50% - 15px);
}
.page.forum.create > .content > .form > .content > form.form > .input.demi.right {
  margin-left: 30px;
}
.page.forum.create > .content > .form > .content > form.form > .input > label {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 10px;
  color: #eaeaea;
  transition: 200ms ease-in-out all;
}
.page.forum.create > .content > .form > .content > form.form > .input > input:not([type=submit]),
.page.forum.create > .content > .form > .content > form.form > .input > .tt-txtarea {
  width: 100%;
  float: left;
  clear: both;
  resize: none;
  background-color: #3c3f51;
  color: #ffffff;
  height: 50px;
  transition: 200ms ease-in-out all;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.page.forum.create > .content > .form > .content > form.form > .input > input:not([type=submit])::placeholder,
.page.forum.create > .content > .form > .content > form.form > .input > .tt-txtarea::placeholder {
  color: #eaeaea;
  opacity: 0.5;
  transition: 200ms ease-in-out all;
}
.page.forum.create > .content > .form > .content > form.form > .input .tt-editor-menubar {
  display: inline-flex;
  background-color: #2d303a;
  width: 100%;
  padding: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.page.forum.create > .content > .form > .content > form.form > .input .tt-editor-menubar > .tt-btn {
  color: #fff;
  padding: 4px 10px;
  margin-right: 5px;
  border-radius: 10px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.page.forum.create > .content > .form > .content > form.form > .input .tt-editor-menubar > .tt-btn:hover {
  background-color: #3e4150;
  transition: background-color 0.3s ease;
}
.page.forum.create > .content > .form > .content > form.form > .input .tt-editor-menubar > .tt-btn.is-active {
  background-color: #3e4150;
  transition: background-color 0.3s ease;
}
.page.forum.create > .content > .form > .content > form.form > .input > .tt-txtarea {
  min-height: 200px;
  line-height: 16px;
  padding: 5px 17px 20px 17px;
  border-radius: 0;
  overflow: auto;
  resize: vertical;
}
.page.forum.create > .content > .form > .content > form.form > .input > .tt-txtarea > .ProseMirror {
  width: 100%;
  float: left;
  clear: both;
  height: 100%;
}
.page.forum.create > .content > .form > .content > form.form > .input > .tt-txtarea > .ProseMirror > :last-child {
  margin-bottom: 20px;
}
.page.forum.create > .content > .form > .content > form.form > .input.checkbox > label {
  width: auto !important;
  clear: none !important;
}
.page.forum.create > .content > .form > .content > form.form > .input.checkbox > input[type=checkbox] {
  float: left;
  width: 20px;
  height: 22px;
  border-radius: 25px;
  background-color: #eaeaea;
  -webkit-appearance: none;
  cursor: pointer;
  margin-left: 2px;
  margin-right: 15px;
  padding: 0 10px;
}
.page.forum.create > .content > .form > .content > form.form > .input.checkbox > input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 4px;
  height: 12px;
  width: 12px;
  background-color: transparent;
  border-radius: 20px;
  left: 4px;
  transition: 500ms ease-in-out background-color;
}
.page.forum.create > .content > .form > .content > form.form > .input.checkbox > input[type=checkbox]:checked::before {
  background-color: #347ae2;
}
.page.forum.create > .content > .form > .content > form.form > .input > input[type=submit] {
  margin-top: -15px;
  width: 100%;
  clear: both;
  float: left;
  min-height: 45px;
  line-height: 45px;
  background-color: #347ae2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: 200ms ease-in-out all;
  padding: 0 15px;
  color: #ffffff;
}
.page.forum.create > .content > .form > .content > form.form > .input > input[type=submit] > img {
  line-height: 45px;
  vertical-align: middle;
  margin-top: -1px;
}
.page.forum.create > .content > .form > .content > form.form > .input > input[type=submit]:hover {
  background-color: rgb(96.625, 151.2370689655, 232.375);
}
.page.forum.create > .content > .form > .content > form.form > .input > input[type=submit][theme=light] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.forum.create > .content > .form > .content > form.form > .input > input[type=submit][theme=light]:hover {
  background-color: rgb(133.2424242424, 187.4393939394, 229.7575757576);
}
.page.forum.create > .content > .form > .content > form.form > .input-help {
  background: #2c2f3a;
  padding: 10px 17px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 0;
}
.page.forum.create > .content > .form > .content > form.form > .input-help svg {
  vertical-align: -3px;
  margin-right: 5px;
}
.page.forum.create > .content > .form > .content > form.form > .input-help b {
  color: #ffffff;
  font-size: 14px;
}

.page.forum.create[theme=light] > .content > .form > .content > form.form {
  background-color: rgb(247.35, 247.35, 247.35);
  border-top: 1px solid #ddd;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > p {
  color: #3c3f51;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > label {
  color: #3c3f51;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > input,
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > .tt-txtarea {
  background-color: #eaeaea;
  color: #3c3f51;
  border-color: #ddd;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > input::placeholder,
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > .tt-txtarea::placeholder {
  color: #3c3f51;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > .tt-txtarea {
  background-color: #eaeaea;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > input[type=checkbox] {
  margin-left: 2px;
  box-shadow: 0 0 0 2px #3c3f51;
  background-color: #ffffff;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > input[type=checkbox]:checked::before {
  background-color: #5ba4dd;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > input[type=submit] {
  background-color: #5ba4dd;
  color: #ffffff;
}
.page.forum.create[theme=light] > .content > .form > .content > form.form > .input > input:not([type=submit]) {
  border: 1px solid #ddd;
}

.markdown-formatter {
  color: #ffffff !important;
}
.markdown-formatter * {
  color: #ffffff !important;
  font-weight: 500;
  font-size: 15px !important;
  white-space: pre-wrap;
  transition: 200ms ease-in-out all;
}
.markdown-formatter p {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.markdown-formatter b, .markdown-formatter strong {
  font-weight: bold !important;
}
.markdown-formatter b *, .markdown-formatter strong * {
  font-weight: bold !important;
}
.markdown-formatter u {
  text-decoration: underline;
}
.markdown-formatter u * {
  text-decoration: underline;
}
.markdown-formatter a {
  color: #5797f8;
}
.markdown-formatter a * {
  color: #5797f8;
}
.markdown-formatter blockquote {
  width: 100%;
  float: left;
  clear: both;
  border-left: 3px solid #347ae2;
  padding-left: 20px;
  margin-top: 20px;
  font-size: 10px !important;
  font-style: italic;
}
.markdown-formatter blockquote :first-child {
  margin-top: 0;
}
.markdown-formatter code {
  width: 100%;
  float: left;
  clear: both;
  font-weight: 400;
  font-size: 14px !important;
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px 22px;
  font-family: "Consolas", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New";
}
.markdown-formatter h1 {
  width: 100%;
  float: left;
  clear: both;
  font-size: 24px !important;
}
.markdown-formatter h2 {
  width: 100%;
  float: left;
  clear: both;
  font-size: 22px !important;
}
.markdown-formatter h3 {
  width: 100%;
  float: left;
  clear: both;
  font-size: 20px !important;
}
.markdown-formatter ul,
.markdown-formatter ol {
  width: 100%;
  float: left;
  clear: both;
  padding-left: 15px;
  margin-top: 15px;
}
.markdown-formatter ul *,
.markdown-formatter ol * {
  list-style-type: disc;
}
.markdown-formatter ul li,
.markdown-formatter ol li {
  margin: 0;
}
.markdown-formatter ul li > p,
.markdown-formatter ol li > p {
  margin: 0 !important;
}
.markdown-formatter ul li > ul,
.markdown-formatter ul li > ol,
.markdown-formatter ol li > ul,
.markdown-formatter ol li > ol {
  margin: 0 !important;
}
.markdown-formatter ol * {
  list-style-type: decimal !important;
}
.markdown-formatter img {
  max-width: 100%;
}

.markdown-formatter[theme=light] {
  color: #3c3f51 !important;
}
.markdown-formatter[theme=light] * {
  color: #3c3f51 !important;
}
.markdown-formatter[theme=light] a {
  color: #365aa3;
}
.markdown-formatter[theme=light] a * {
  color: #365aa3;
}
.markdown-formatter[theme=light] blockquote {
  border-left: 4px solid #5ba4dd;
}
.markdown-formatter[theme=light] code {
  background: #eaeaea;
  color: #3c3f51;
}

.gz-top-gamer-description > .content.winnable > .line {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
  border-radius: 10px;
  background-color: #3c3f51;
  transition: 200ms ease-in-out all;
}
.gz-top-gamer-description > .content.winnable > .line * {
  color: #ffffff;
  transition: 200ms ease-in-out all;
}
.gz-top-gamer-description > .content.winnable > .line:first-child {
  margin-top: 0;
}
.gz-top-gamer-description > .content.winnable > .line:not(.not):first-child {
  background-color: #e7a629;
}
.gz-top-gamer-description > .content.winnable > .line:not(.not):first-child * {
  color: #282a34;
}
.gz-top-gamer-description > .content.winnable > .line:not(.not):nth-child(2) {
  background-color: #adadad;
}
.gz-top-gamer-description > .content.winnable > .line:not(.not):nth-child(2) * {
  color: #282a34;
}
.gz-top-gamer-description > .content.winnable > .line:not(.not):nth-child(3) {
  background-color: #c47c47;
}
.gz-top-gamer-description > .content.winnable > .line:not(.not):nth-child(3) * {
  color: #282a34;
}
.gz-top-gamer-description > .content.winnable > .line > .word {
  padding: 0 20px;
  min-height: 55px;
  line-height: 55px;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.gz-top-gamer-description > .content.winnable > .line > .word:last-child {
  border-bottom: none;
}
.gz-top-gamer-description > .content.winnable > .line > .word:not(.demi) {
  width: 100%;
  float: left;
  clear: both;
}
.gz-top-gamer-description > .content.winnable > .line > .word.demi {
  float: left;
  width: 40%;
}
.gz-top-gamer-description > .content.winnable > .line > .word.demi:not(.r) {
  width: 60%;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.gz-top-gamer-description > .content.winnable > .line > .word > img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > img.icon {
  margin-right: 10px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .badge {
  min-height: 55px;
  line-height: 55px;
  font-size: 14px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .badge > img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .badge > img.icon {
  margin-right: 10px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .boxs {
  width: calc(100% + 40px);
  margin-left: -20px;
  float: left;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .boxs > .box {
  width: 33.3333333333%;
  float: left;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  min-height: 60px;
  line-height: 60px;
  font-size: 14px;
  padding-left: 20px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .boxs > .box > img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .boxs > .box > img.icon {
  margin-right: 10px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .boxs > .box:last-child {
  border-right: none;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .badges {
  width: calc(100% + 40px);
  margin-left: -20px;
  float: left;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .badges > .badge {
  width: 20%;
  float: left;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  padding-bottom: 10px;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .badges > .badge:last-child {
  border-right: none;
}
.gz-top-gamer-description > .content.winnable > .line > .word > .badges > .badge > span {
  float: left;
  clear: both;
  width: 100%;
  font-size: 14px;
}

.gz-top-gamer-description[theme=light] > .content.winnable > .line {
  background-color: #eaeaea;
}
.gz-top-gamer-description[theme=light] > .content.winnable > .line * {
  color: #282a34;
}
.gz-top-gamer-description[theme=light] > .content.winnable > .line:not(.not):first-child * {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.gz-top-gamer-description[theme=light] > .content.winnable > .line:not(.not):nth-child(2) * {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.gz-top-gamer-description[theme=light] > .content.winnable > .line:not(.not):nth-child(3) * {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}