/*

    ______    ______   ______         ______  ________

   /      \  /      \ |      \       /      \|        \

  |  $$$$$$\|  $$$$$$\ \$$$$$$      |  $$$$$$\\$$$$$$$$

  | $$   \$$| $$___\$$  | $$        | $$  | $$  | $$

  | $$       \$$    \   | $$        | $$  | $$  | $$

  | $$   __  _\$$$$$$\  | $$        | $$  | $$  | $$

  | $$__/  \|  \__| $$ _| $$_       | $$__/ $$  | $$

   \$$    $$ \$$    $$|   $$ \       \$$    $$  | $$

    \$$$$$$   \$$$$$$  \$$$$$$        \$$$$$$    \$$



  DEVELOPED BY GABRIEL HENRIQUE & RAFAEL LODI

  FACEBOOK: WWW.FACEBOOK.COM/GABRIELHDEV



*/

.bx {
  width: 0;

  height: auto;
}

.bx .bxTitle {
  width: 100%;

  height: auto;

  position: relative;

  font-weight: 700;

  font-size: 21px;

  color: #161621;

  line-height: 29px;
}

.bx .bxTitleSub {
  width: 100%;

  height: auto;

  position: relative;

  font-weight: 700;

  font-size: 14px;

  margin-top: 20px;

  color: #161621;

  line-height: 29px;
}

.bx .bxTitle::before {
  content: "";

  width: 10%;

  height: 0;

  position: absolute;

  bottom: -4px;

  left: 0;

  border-bottom: 3px dashed #161621;
}

.bx .bxTitleSub::before {
  content: "";

  width: 10%;

  height: 0;

  position: absolute;

  bottom: -4px;

  left: 0;

  border-bottom: 3px dashed #161621;
}

.bx.bxWhite .bxTitle {
  color: #fff;
}

.bx.bxWhite .bxTitle::before {
  border-bottom: 3px dashed #fff;
}

.bx .bxTitle .bxFunctions {
  width: auto;

  height: 30px;

  float: right;
}

.bx .bxTitle .bxFunctions button {
  min-width: 30px;

  height: 30px;

  padding: 0 7px;

  margin-left: 5px;

  position: relative;

  background-color: #fcd300;

  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.15);

  border-radius: 3px;

  text-align: center;

  font-size: 12px;

  color: #fff;

  line-height: 30px;

  transition: color 0.3s;
}

.bx .bxTitle .bxFunctions button:hover {
  color: #eee;
}

.bx .bxTitle .bxFunctions button:first-of-type {
  margin-left: 0;
}

.bx .bxTitle .bxFunctions button.options:hover > ul {
  visibility: visible;

  opacity: 1;
}

.bx .bxTitle .bxFunctions ul {
  width: 100px;

  height: auto;

  position: absolute;

  top: 30px;

  left: calc(50% - 50px);

  background-color: #fff;

  border-radius: 3px;

  visibility: hidden;

  opacity: 0;

  transition: opacity 0.3s;

  z-index: 999;
}

.bx .bxTitle .bxFunctions button ul::before {
  content: "";

  position: absolute;

  top: -6px;

  left: calc(50% - 1.5px);

  border: 3px solid transparent;

  border-bottom-color: #fff;
}

.bx .box .image,
.bx.Slide .box li {
  position: relative;

  background-position: center;
}

.bx .bxTitle .bxFunctions ul li {
  width: 100%;

  height: 25px;

  padding: 0 10px;

  font-size: 11px;

  color: #555;

  line-height: 25px;

  transition: box-shadow 0.5s, color 0.2s, font-weight 0.2s;
}

.bx .bxTitle .bxFunctions ul li:hover {
  box-shadow: inset 200px 25px 0 #fcd300, inset -200px -25px 0 #fcd300;

  font-weight: 600;

  color: #fff;
}

.bx .bxTitle .bxFunctions ul li:first-of-type {
  border-radius: 3px 3px 0 0;
}

.bx .bxTitle .bxFunctions ul li:last-of-type {
  border-radius: 0 0 3px 3px;
}

.bx .bxContent {
  width: 100%;

  height: auto;

  padding-bottom: 2px;

  margin-top: 10px;
}

.Ranking .interativo {
  height: 312px;

  padding-right: 5px;

  overflow-y: auto;
}

.Ranking .interativo::-webkit-scrollbar {
  width: 7px;
}

.Ranking .interativo::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

.Ranking .interativo::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
}

.bx .box {
  padding: 5px;

  background-color: #fff;

  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);

  border-radius: 3px;
}

.bx .box .image {
  background-color: #161621;

  background-image: url(../img/padrao.png);

  background-repeat: no-repeat;

  border-radius: 3px;
}

.bx .box .image .dt {
  width: 100%;

  height: 100%;

  background-image: linear-gradient(to bottom, #8e770073, #fcd300);

  border-radius: 3px;

  text-align: center;

  text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);

  font-size: 12px;

  color: #fff;

  opacity: 0;

  transition: opacity 0.3s;
}

.bx .box .image .dt span:first-of-type {
  font-weight: 600;
}

.bx .box:hover .image .dt {
  opacity: 1;
}

.bx .box .data {
  font-size: 11px;

  color: #161621;
}

.bx .box .data p:first-of-type {
  font-weight: 600;

  font-size: 14px;
}

.bx .box .data p {
  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;
}

.bx.News {
  width: 630px;
}

.bx.News .box {
  width: calc((100% - 20px) / 3);

  height: 130px;

  margin: 10px 10px 0 0;
}

.bx.News .box:nth-child(1),
.bx.News .box:nth-child(2),
.bx.News .box:nth-child(3) {
  margin-top: 0;
}

.bx.News .box:nth-child(3n + 3) {
  margin-right: 0;
}

.bx.News .box .image {
  width: 100%;

  height: 80px;
}

.bx.News .box .image .fixo {
  width: 20px;

  height: 20px;

  background-image: url(../img/estrela.png);

  float: left;

  position: absolute;
}

.bx.News .box .image .dt {
  padding-top: 25px;
}

.bx.News .box .data {
  width: 100%;

  margin-top: 5px;
}

.bx.Events {
  width: 350px;

  float: right;
}

.bx.Events .box {
  width: 100%;

  height: 74px;

  margin-top: 10px;
}

.bx.Events .box:first-of-type {
  margin-top: 0;
}

.bx.Events .box .image {
  width: 64px;

  height: 64px;
}

.bx.Events .box .image .dt {
  padding-top: 17px;
}

.bx.Events .box .data {
  width: calc(100% - 69px);

  margin-left: 5px;
}

.bx.Slide {
  width: 630px;
}

.bx.Slide .box {
  width: 100%;

  height: 280px;

  padding: 5px;

  overflow: hidden;
}

.bx.Slide .box li {
  width: 100%;

  height: 270px;

  background-image: url(../img/padrao.png);

  background-size: cover;

  border-radius: 3px;
}

.bx.Slide .box li .data {
  width: calc(100% - 20px);

  position: absolute;

  left: 10px;

  bottom: 10px;

  padding: 10px;

  background-color: rgba(0, 0, 0, 0.5);

  border-radius: 5px;

  font-size: 14px;

  color: #fff;

  opacity: 0;

  transition: opacity 0.3s;
}

.bx.Slide .box:hover li .data {
  opacity: 1;
}

.bx.Slide .box .data p:first-of-type {
  font-size: 17px;
}

.bx.Birthday {
  width: 350px;

  float: right;
}

.bx.Birthday .box {
  width: 100%;
}

.bx.Birthday .box .month {
  width: auto;

  height: 20px;

  padding: 0 5px;

  margin: -2px -2px 0 0;

  background-color: #fcd300;

  border-radius: 2px;

  text-align: right;

  font-weight: 600;

  font-size: 10px;

  color: #fff;

  line-height: 20px;

  float: right;
}

.bx.Birthday .box .day {
  width: calc((100% - 30px) / 7);

  height: 40px;

  margin: 5px 5px 0 0;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);

  border-radius: 5px;

  text-align: center;

  font-size: 12px;

  color: #161621;

  line-height: 40px;
}

.bx.Birthday .box .calendar .day:nth-child(7n + 7) {
  margin-right: 0;
}

.bx.Birthday .box .calendar > .day:nth-child(1),
.bx.Birthday .box .calendar > .day:nth-child(2),
.bx.Birthday .box .calendar > .day:nth-child(3),
.bx.Birthday .box .calendar > .day:nth-child(4),
.bx.Birthday .box .calendar > .day:nth-child(5),
.bx.Birthday .box .calendar > .day:nth-child(6),
.bx.Birthday .box .calendar > .day:nth-child(7) {
  height: 20px;

  box-shadow: initial;

  font-weight: 600;

  font-size: 13px;

  line-height: 20px;
}

.bx.Infos .box .data p:first-of-type,
.bx.userArea .box .data p:first-of-type {
  padding: 0 10px;

  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.35);

  border-radius: 5px;

  color: #fff;

  line-height: 35px;
}

.bx.Birthday .box .day.tip {
  background-color: #fde87b;

  font-weight: 600;

  color: #fff;
}

.bx.Birthday .box .day.active {
  background-color: #fcd300;

  font-weight: 600;

  color: #fff;

  position: relative;

  cursor: pointer;

  transition: all 0.1s;

  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.1);
}

.bx.Birthday .box .day.active:hover {
  box-shadow: inset 0 0 0 25px rgba(0, 0, 0, 0.1);
}

.bx.Birthday .box .day.active.ball::before {
  content: "";

  background-color: #bf0000;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  box-shadow: 0 0 0 2px #fff;

  position: absolute;

  right: -2px;

  top: -2px;
}

.bx.Ads {
  width: 100%;
}

.bx.Idi {
  width: 100%;
}

.bx.Ads .box {
  width: 100%;

  min-height: 120px;
}

.bx.Top {
  width: 100%;
}

.bx.Top .bxContent {
  width: calc((100% / 4) - 8px);
  margin-right: 10px;
  margin-top: 20px;
}

.bx.Top .bxContent:nth-child(5n + 5) {
  margin-right: 0;
}

.bx.Top .titleCargo {
  width: 100%;
  position: relative;
  font-weight: 700;
  font-size: 15px;
  color: #9b9b9b;
  text-align: center;
}

.bx.Top .box {
  width: 100%;
}

.bx.Top .box .bgRank {
  width: calc((100% / 3) - 4px);
  height: 90px;
  background-color: #e5e5e5;
  float: left;
  border-radius: 3px;
  margin-right: 5px;
}

.bx.Top .box .bgRank:nth-child(1) {
  background-color: #e5e5e5;
}

.bx.Top .box .bgRank:nth-child(2) {
  background-color: #fcc023;
}

.bx.Top .box .bgRank:nth-child(3) {
  background-color: #cd7f32;
}

.bx.Top .box .bgRank:last-child {
  margin-right: 0;
}

.bx.Top .box .bgRank .rankTitle {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 0 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.bx.Top .box .bgRank .rankTitle p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  width: 100%;
  padding: 5px;
  font-weight: 600;
}

.bx.Top .box .bgRank .avatar {
  width: 72px;
  height: 80px;
  background-image: url(https://www.habbo.com.br/habbo-imaging/avatarimage?&user=idiota136&action=wav&direction=3&head_direction=3&img_format=png&gesture=sml&headonly=0&size=b);
  background-position: top;
  margin: -16px auto;
}

.bx.RankingInterativo {
  width: 100%;
}

.bx.Gratis {
  width: 100%;
}

.bx.Gratis .bxEmblema {
  width: calc((100% - -5px) / 17);
  border-radius: 4px;
  margin: 0 8px 0 0;
  transition: all 0.5s;
  background-color: #f4f4f4;
  background-position: center;
  background-repeat: no-repeat;
  height: 60px;
  cursor: pointer;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.bx.Gratis a:nth-child(15n + 15) .bxEmblema {
  margin: 0;
}

.bx.Gratis .bxEmblema.inativo {
  filter: grayscale(1);
  opacity: 0.5;
}

.bx.Gratis .bxEmblema:hover {
  background-color: #fcd300;
}

.bx.userArea {
  width: 630px;
}

.bx.userArea .box {
  width: calc((100% - 10px) / 2);

  height: 70px;

  margin: 10px 10px 0 0;
}

.bx.userArea .box:nth-child(1),
.bx.userArea .box:nth-child(2) {
  margin-top: 0;
}

.bx.userArea .box:nth-child(2n + 2) {
  margin-right: 0;
}

.bx.userArea .box .avatar {
  width: 64px;

  height: 85px;

  margin: -20px -5px 0 -10px;
}

.bx.userArea .box .data {
  width: calc(100% - 49px);
}

.bx.userArea .box .data p:first-of-type {
  height: 35px;

  margin-bottom: 6px;

  background-color: #161621;
}

.bx.userArea .box.fixo .data p:first-of-type {
  background-color: #fcd300;
}

.bx.userArea .box.vip .data p:first-of-type {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 7px,
    transparent 7px,
    transparent 14px
  ) !important;
}

.bx.userArea .box.fixo.vip .data p:first-of-type {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.02),
    rgba(0, 0, 0, 0.02) 7px,
    transparent 7px,
    transparent 14px
  ) !important;
}

.bx.Infos {
  width: 350px;

  float: right;
}

.bx.Infos .box {
  width: 100%;

  height: 70px;

  margin-top: 10px;
}

.bx.Infos .box .avatar {
  width: 64px;

  height: 85px;

  margin: -20px -5px 0;

  float: right;
}

.bx.Infos .box .data {
  width: calc(100% - 54px);

  text-align: right;
}

.bx.Infos .box .data p:first-of-type {
  height: 35px;

  margin-bottom: 6px;

  background-color: #fcd300;
}

.bx.Ranking {
  width: calc((100% - 40px) / 4);

  margin-right: 10px;
}

.bx.Ranking:last-of-type {
  margin-right: 0;
}

.bx.Ranking .box {
  width: 100%;

  height: 70px;

  margin-top: 10px;

  box-shadow: inset -5px 0 0 #161621, 0 2px 2px rgba(0, 0, 0, 0.1);
}

.bx.Ranking .box:first-of-type {
  margin-top: 0;
}

.bx.Ranking .box:nth-child(1) {
  box-shadow: inset -5px 0 0 gold, 0 2px 2px rgba(0, 0, 0, 0.1);
}

.bx.Ranking .box:nth-child(2) {
  box-shadow: inset -5px 0 0 silver, 0 2px 2px rgba(0, 0, 0, 0.1);
}

.bx.Ranking .box:nth-child(3) {
  box-shadow: inset -5px 0 0 #cd7f32, 0 2px 2px rgba(0, 0, 0, 0.1);
}

.bx.RankingMerito .box:nth-child(2) {
  box-shadow: inset -5px 0 0 gold, 0 2px 2px rgba(0, 0, 0, 0.1);
}

.bx.RankingMerito .box:nth-child(3) {
  box-shadow: inset -5px 0 0 silver, 0 2px 2px rgba(0, 0, 0, 0.1);
}

.bx.RankingMerito .box:nth-child(4) {
  box-shadow: inset -5px 0 0 #cd7f32, 0 2px 2px rgba(0, 0, 0, 0.1);
}

.bx.Ranking .box .avatar {
  width: 64px;

  height: 85px;

  margin: -20px -5px 0 -10px;
}

.bx.Ranking .box .data {
  width: calc(100% - 54px);

  margin-top: 15px;

  float: right;
}

.bx.Ranking.RankingMerito {
  width: calc((100% - 40px) / 3);
}

.bx.Ranking.RankingMerito:nth-child(6) {
  margin-right: inherit;
}

.bx.Ranking.RankingMerito .box {
  height: 35px;

  padding-right: 15px;
}

.bx.Ranking.RankingMerito .box .data {
  width: calc(100% - 35px);

  margin-top: 5px;
}

.bx.Ranking.RankingMerito .box .data p {
  font-size: 12px;
}

.bx.Ranking.RankingMerito .box .avatar {
  width: 33px;

  height: 43px;

  margin: -13px 0 0 -3px;
}

.bx.Ranking.RankingMerito .bxTitle {
  font-size: 20px;
}

.bx.Ranking.RankingMerito.Mensal {
  margin-right: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.bx.Ranking.RankingMerito.Mensal .contentMensal {
  width: 50%;
}

.bx.Ranking.RankingMerito.Mensal .box {
  width: calc((100% - 15px) / 3);

  box-shadow: inset 0 -5px 0 gold, 0 2px 2px rgba(0, 0, 0, 0.1);

  height: 55px;

  margin-top: 0;

  margin-right: 5px;

  display: flex;

  flex-direction: row-reverse;

  justify-content: space-around;

  text-align: center;
}

.bx.Ranking.RankingMerito.Mensal .box span {
  font-size: 14px;
}

.bx.Ranking.RankingMerito.Mensal .box .avatar {
  width: 60px;

  height: 75px;

  margin: -30px 0 0 -3px;

  background-position: 57px 0px;
}

.bx.Ranking.RankingMerito.Mensal .bxTitle {
  margin-top: 11px;
}

.bx.Ranking.RankingMerito.Mensal .rankingMensal {
  margin-top: 17px;
  width: 100%;
}

.bx.Ranking.RankingMerito.Mensal .rankingMensal .box {
  padding-right: 0;
}

.bx.Market {
  width: 630px;
}

.bx.Market .bxContent {
  padding: 90px 0 25px;

  position: relative;

  background-color: #fff;

  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);

  border-radius: 3px;
}

.bx.Market .bxContent .floor,
.bx.Market .bxContent::before {
  height: 70px;

  position: absolute;

  content: "";
}

.bx.Market .bxContent::before {
  width: calc(100% + 12px);

  top: 0;

  left: -6px;

  background-image: url(../img/tent_water_color.png);

  background-size: contain;

  background-repeat: no-repeat;
}

.bx.Market .bxContent .floor {
  width: 100%;

  bottom: 0;

  left: 0;

  background-color: #1dcbac;

  background-image: linear-gradient(
    to top,
    #10aa8e 18px,
    rgba(255, 255, 255, 0.3) 0,
    transparent 20px
  );

  box-shadow: inset 0 -10px 15px -10px rgba(0, 0, 0, 0.45);

  border-radius: 0 0 3px 3px;
}

.bx.Market .bxContent .centerMarket {
  width: calc(100% - 40px);

  min-height: 114px;

  margin-left: 20px;

  position: relative;
}

.bx.Market .bxContent .box {
  width: calc((100% / 7) - (6 * 15px / 7));

  height: 100px;

  margin: 0 0 10px 15px;
}

.bx.Market .bxContent .box:first-of-type {
  margin-left: 0;
}

.bx.Market .bxContent .box .item {
  width: 100%;

  height: 60px;

  background-image: url(../img/padraoEmblem.png);

  background-repeat: no-repeat;

  background-position: center;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);

  border-radius: 3px;
}

.bx.Market .bxContent .box .item .info {
  width: 100%;

  height: 60px;

  position: relative;

  border-radius: 3px;

  transition: box-shadow 0.3s, opacity 0.3s;

  opacity: 0;
}

.bx.Market .bxContent .box .item .info button {
  width: 20px;

  height: 20px;

  position: absolute;

  top: calc(50% - 10px);

  left: calc(50% - 10px);

  background-color: #fff;

  border-radius: 3px;

  text-align: center;

  font-size: 11px;

  color: #1dcbac;

  line-height: 20px;

  visibility: hidden;

  opacity: 0;

  transition: opacity 0.3s;
}

.bx.Market .bxContent .box .val {
  width: 100%;

  height: 25px;

  margin-top: 5px;

  position: relative;

  background-color: #1dcbac;

  border-radius: 3px;

  text-align: center;

  font-weight: 600;

  font-size: 11px;

  color: #fff;

  line-height: 25px;

  overflow: hidden;
}

.bx.Market .bxContent .box .val button {
  width: 100%;

  height: 25px;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 3px;

  font-weight: 600;

  font-size: 10px;

  color: transparent;

  transition: box-shadow 0.3s, color 0.3s, opacity 0.3s;

  opacity: 0;
}

.bx.Market .bxContent .box:hover .item .info {
  box-shadow: inset 200px 60px 0 #1dcbac, inset -200px -60px 0 #1dcbac;

  opacity: 1;
}

.bx.Market .bxContent .box:hover .item .info button {
  opacity: 1;

  visibility: visible;
}

.bx.Market .bxContent .box:hover .val button {
  box-shadow: inset 200px 25px 0 #1dcbac, inset -200px -25px 0 #1dcbac;

  color: #fff;

  opacity: 1;
}

.bx.Market .bxFunctions #paginationPrevMarket,
.bx.Market .bxFunctions #paginationNextMarket,
.bx.Market .bxFunctions #infoMarket {
  background-color: #1dcbac;
}

.bx.ViP {
  width: 340px;
  opacity: 0.2;
  filter: blur(2px);
  cursor: not-allowed;

  float: right;
}

.bx.ViP .box {
  width: 100%;

  height: 230px;

  padding: 10px;

  position: relative;

  background-color: #161621 !important;

  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 7px,
    transparent 7px,
    transparent 14px
  ) !important;

  font-size: 12px;

  line-height: 20px;

  color: #fff;
}

.bx.ViP .box .val,
.bx.ViP .box .val button {
  height: 45px;

  position: absolute;

  font-weight: 600;
}

.bx.ViP .box .val {
  width: calc(100% - 20px);

  bottom: 10px;

  left: 10px;

  background-color: #fafafa;

  border-radius: 3px;

  text-align: center;

  color: #161621;

  line-height: 45px;
}

.bx.ViP .box .val button {
  width: 100%;

  top: 0;

  left: 0;

  border-radius: 2px;

  color: transparent;

  transition: box-shadow 0.1s, color 0.1s, opacity 0.1s;

  opacity: 0;
}

.bx.ViP .box .val:hover button {
  box-shadow: inset 200px 25px 0 #161621, inset -200px -25px 0 #161621;

  color: #fff;

  opacity: 1;
}

.bx.Page form input,
.bx.Page form textarea,
.bx.Page form select {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);

  border-radius: 3px;
}

.VIP {
  width: 33px;

  height: 17px;

  background-image: url(../img/vip.png);
}

.bx.Page .box,
.bx.Page .box .infos {
  height: auto;

  color: #161621;

  width: 100%;
}

.bgVIP {
  background-color: #161621 !important;

  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 7px,
    transparent 7px,
    transparent 14px
  ) !important;
}

.bx.Page .bxContent div {
  max-width: 100%;
}

.bx.Comment,
.bx.Comments,
.bx.Page {
  width: 100%;
}

.bx.Page .box {
  min-height: 130px;

  padding: 10px;

  font-size: 13px;
}

.bx.Page .box .infos {
  margin-bottom: 5px;

  font-size: 12px;

  opacity: 0.85;
}

.bx.Page form {
  width: 100%;
}

.bx.Page form input,
.bx.Page form select {
  width: 100%;

  height: 60px;

  padding: 0 10px;

  margin-top: 10px;
}

.bx.Page form input:first-of-type {
  margin-top: 0;
}

.bx.Page form input[type="file"] {
  display: none;
}

.bx.Page form label[for="file"] {
  width: 200px;

  height: 200px;

  padding: 0 10px;

  background-color: #fcd300;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border-radius: 3px;

  text-align: center;

  font-weight: 600;

  font-size: 13px;

  color: #fff;

  line-height: 200px;
}

.bx.Page form textarea {
  width: 100%;

  height: 150px;

  min-width: 100%;

  max-width: 100%;

  min-height: 150px;

  max-height: 300px;

  margin-top: 10px;

  padding: 10px;
}

.bx.Page .txaButtons button,
.bx.Page form > button {
  height: 50px;

  padding: 0 10px;

  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.15);

  border-radius: 5px;

  font-weight: 600;

  font-size: 14px;

  color: #fff;
}

.bx.Page .txaButtons {
  width: 100%;
}

.bx.Page .txaButtons button {
  width: auto;

  min-width: 40px;

  margin: 5px 5px 0 0;
}

.bx.Page .txaButtons button[type="submit"] {
  background-color: #fcd300;

  margin-right: 0;

  float: right;
}

.bx.Page .txaButtons button[type="button"] {
  background-color: #161621;
}

.bx.Page form > button {
  width: 100%;

  margin-top: 5px;

  background-color: #fcd300;
}

.bx.Page .box .lineNotify {
  width: 100%;
}

.bx.Page .box .lineNotify li {
  width: 100%;
}

.bx.Page .box .lineNotify p {
  text-align: right;
  font-size: 11px;
  opacity: 0.8;
  margin-top: 10px;
}

.bx.Comment .box {
  width: 100%;

  height: auto;

  min-height: initial;

  position: relative;
}

.bx.Comment .box .floor {
  width: 225px;

  height: 191px;

  position: absolute;

  left: 0;

  bottom: 0;

  background-image: url(../img/welcomeBg.png?5);

  border-radius: 0 0 0 4px;
}

.bx.Comment .box .floor .avatar {
  width: 64px;

  height: 110px;

  margin: 45px 0 0 65px;
}

.bx.Comment .box form {
  width: calc(100% - 230px);

  float: right;
}

.bx.Comment .box form textarea {
  height: 120px;

  min-height: 120px;

  max-height: 300px;
}

.bx.Comments .box {
  width: 100%;

  height: auto;

  min-height: 80px;

  margin-bottom: 5px;

  position: relative;
}

.bx.Comments .box .avatar {
  width: 64px;

  height: 80px;

  position: absolute;

  left: -8px;

  bottom: 9px;
}

.bx.Comments .box .comment,
.bx.Comments .box .infos {
  width: calc(100% - 50px);

  height: auto;

  color: #161621;

  float: right;
}

.bx.Comments .box .comment {
  min-height: 50px;

  background-color: rgba(0, 0, 0, 0.03);

  border-radius: 3px;

  padding: 10px;

  font-size: 13px;
}

.bx.Comments .box .infos {
  margin-top: 5px;

  text-align: right;

  font-size: 12px;

  opacity: 0.85;
}

.bx.Comments .box .VIP {
  position: absolute;

  bottom: 4px;

  left: 9px;

  z-index: 9;
}

.bx.Comments .box.bgVIP .comment {
  background-color: rgba(255, 255, 255, 0.97);
}

.bx.Comments .box.bgVIP .infos {
  color: #fff;
}

.bx.Page.Topic .bxTitle p:first-of-type {
  font-weight: 700;
}

.bx.Page.Topic .bxTitle p:last-of-type {
  font-size: 11px;

  font-weight: initial;

  line-height: 12px;

  margin-bottom: 5px;
}

.bx.Page.Topic.theComment {
  margin-top: 30px;
}

.bx.Page.Topic.theComment:first-of-type {
  margin-top: 0;
}

.bx.Page.Topic .box {
  padding-left: 0;

  position: relative;
}

.bx.Page.Topic .box::before {
  width: 300px;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: #fcd300;

  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.01),
    rgba(0, 0, 0, 0.01) 10px,
    transparent 10px,
    transparent 20px
  );

  border-radius: 4px 0 0 4px;

  content: "";
}

.bx.Page.Topic.bgVIPTopic .box::before {
  background-color: #161621;

  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 7px,
    transparent 7px,
    transparent 14px
  );
}

.bx.Page.Topic .box .profile .VIP {
  position: absolute;

  top: -5px;

  right: 5px;
}

.bx.Page.Topic .box .profile {
  width: 300px;

  height: auto;

  padding: 15px 0;

  position: relative;
}

.bx.Page.Topic .box .profile .picture {
  width: 230px;

  height: 230px;

  margin-left: 45px;

  background-color: #161621;

  background-image: url(../img/padrao.png);

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border-radius: 50% 50% 50% 0;
}

.bx.Page.Topic .box .profile .picture .avatar {
  width: 128px;

  height: 220px;

  margin: 20px 0 0 -55px;
}

.bx.Page.Topic .box .profile .rank,
.bx.Page.Topic .box .profile .tarja {
  margin: 15px 0 0 35px;

  width: 230px;

  font-size: 13px;

  font-weight: 600;

  color: #fff;

  text-align: center;
}

.bx.Page.Topic .box .profile .rank {
  height: auto;
}

.bx.Page.Topic .box .profile .tarja {
  height: 50px;

  background-color: rgba(255, 255, 255, 0.4);

  border-radius: 3px;

  line-height: 50px;
}

.bx.Page.Topic .box .profile .medals {
  width: 230px;

  height: auto;

  margin: 5px 0 0 35px;
}

.bx.Page.Topic .box .profile .medals .bxFunctions {
  width: 230px;

  height: 30px;

  margin-top: 5px;
}

.bx.Page.Topic .box .profile .medals .bxFunctions button {
  width: calc(50% - 2.5px);

  height: 30px;

  background-color: rgba(255, 255, 255, 0.4);

  border-radius: 3px;

  text-align: center;

  font-size: 13px;

  font-weight: 600;

  color: #fff;
}

.bx.Page.Topic .box .profile .medals .bxFunctions button:last-of-type {
  float: right;
}

.bx.Page.Topic .box .profile .medals .medal {
  width: calc((100% / 4) - (3 * 5px / 4));

  height: 50px;

  margin: 0 5px 5px 0;

  background-color: rgba(255, 255, 255, 0.4);

  background-image: url(../img/padraoEmblem.png?0);

  background-position: center;

  background-repeat: no-repeat;

  border-radius: 3px;

  transition: background-color 0.3s;
}

.bx.Page.Topic .box .profile .medals .medal:nth-child(4n + 4) {
  margin-right: 0;
}

.bx.Page.Topic .box .text {
  width: calc(100% - 310px);

  float: right;
}

.bx.Page.Topic .box .profile .medals .medal:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.bx.Page.Topic .box .profile .medals .medal .num {
  width: 15px;

  height: 15px;

  margin: -2px;

  background-color: #161621;

  border-radius: 50%;

  text-align: center;

  font-size: 10px;

  color: #fff;

  line-height: 15px;

  float: right;
}

.bx.Page.Staff .order button,
.bx.Page.paginationTopics .pag {
  font-size: 12px;

  color: #fff;

  font-weight: 600;

  border-radius: 3px;
}

.bx.Page.paginationTopics {
  margin-top: 15px;
}

.bx.Page.paginationTopics .pag {
  width: 30px;

  height: 30px;

  margin-right: 5px;

  background-color: #fcd300;

  text-align: center;

  line-height: 30px;
}

.bx.Page.paginationTopics .pag.select {
  background-color: #161621;
}

.bx.Page.Staff .order {
  width: 100%;

  height: auto;

  padding: 5px 5px 0;

  margin-top: 10px;

  border-radius: 3px;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
}

.bx.Page.Staff .order:first-of-type {
  margin-top: 0;
}

.bx.Page.Staff .order button {
  width: auto;

  height: 40px;

  margin-right: 10px;

  margin-bottom: 5px;

  padding: 0 10px;

  background-color: #fcd300;

  line-height: 40px;
}

.bx.Page.staffShow .box .member {
  width: calc(100% / 7 - (6 * 5px / 7));

  height: auto;

  margin: 5px 5px 0 0;

  padding: 0;

  position: relative;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);

  background-position: -10px;

  background-repeat: no-repeat;
}

.bx.Page.staffShow .box .member:nth-child(7n + 7) {
  margin-right: 0;
}

.bx.Page.staffShow .box .member:nth-child(1),
.bx.Page.staffShow .box .member:nth-child(2),
.bx.Page.staffShow .box .member:nth-child(3),
.bx.Page.staffShow .box .member:nth-child(4),
.bx.Page.staffShow .box .member:nth-child(5),
.bx.Page.staffShow .box .member:nth-child(6),
.bx.Page.staffShow .box .member:nth-child(7) {
  margin-top: 0;
}

.bx.Page.staffShow .box .member i {
  position: absolute;

  top: 5px;

  right: 5px;

  font-size: 13px;

  color: #fcd300;
}

.bx.Page.staffShow .box .member .avatar {
  width: 64px;

  height: 110px;

  margin: -5px 0 0 calc(50% - 40px);
}

.bx.Page.staffShow .box .member .name {
  width: calc(100% - 10px);

  height: 35px;

  margin: 0 5px 5px;

  background-color: #fcd300;

  border-radius: 3px;

  text-align: center;

  font-size: 12px;

  font-weight: 600;

  color: #fff;

  line-height: 35px;
}

.bx.Profile .image {
  width: 150px;

  height: 150px;

  margin-left: 4px;

  background-color: #161621;

  background-image: url(../img/padrao.png);

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  box-shadow: 0 0 0 4px #fff;

  border-radius: 3px;
}

.bx.Profile .image .avatar {
  width: 128px;

  height: 170px;

  margin: -20px 0 0 10px;
}

.bx.Profile .box,
.bx.Profile .inBox.Infos {
  margin-top: 10px;
}

.bx.Profile .info {
  width: calc(100% - 169px);

  height: auto;

  font-size: 20px;

  color: #fff;

  float: right;
}

.bx.Profile .box {
  position: relative;
}

.bx.Profile .info.user {
  font-size: 27px;

  font-weight: 700;
}

.bx.Profile .info.about b {
  font-size: 17px;
}

.bx.Profile .inBox {
  width: 300px;

  border-radius: 3px;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
}

.bx.Profile .inBox .title .boxMin {
  float: right;

  min-width: 40px;

  margin-right: 10px;

  background-color: #f5f5f5;

  color: #1e1e2d;

  line-height: 30px;

  margin-top: 10px;

  padding: 0px 5px;

  border-radius: 3px;

  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.35),
    0px 2px 0px rgba(0, 0, 0, 0.11);

  cursor: pointer;
}

.bx.Profile .inBox .title {
  width: 100%;

  height: 50px;

  background-color: #161621;

  border-radius: 3px 3px 0 0;

  text-align: center;

  font-size: 13px;

  font-weight: 600;

  color: #fff;

  line-height: 50px;
}

.bx.Profile .inBox .content {
  width: 100%;
}

.bx.Profile .inBox .content .info {
  width: 100%;

  height: auto;

  padding: 15px 10px;

  border-top: 1px solid rgba(0, 0, 0, 0.01);

  font-size: 11px;

  color: #161621;
}

.bx.Profile .inBox .content .info:first-of-type {
  border-top: none;
}

.bx.Profile .inBox.Infos .title,
.bx.Profile .inBox.Refs .title {
  background-color: #161621;
}

.bx.Profile .inBox .content {
  max-height: 269px;

  overflow-y: auto;
}

.bx.Profile .inBox .content::-webkit-scrollbar {
  width: 7px;
}

.bx.Profile .inBox .content::-webkit-scrollbar-button {
  display: none;
}

.bx.Profile .inBox .content::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.05);
}

.bx.Profile .inBox .content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);

  width: 7px;
}

.bx.Profile .inBox.Infos.Data {
  width: calc(25% - 9px);
}

.bx.Profile .inBox.Infos.Rank {
  width: calc(25% - 6px);

  margin-left: 10px;
}

.bx.Profile .inBox.Infos.Train {
  width: calc(50% - 5px);

  margin-left: 10px;
}

.bx.Profile .inBox.Status {
  width: 100%;

  padding: 5px;
}

.bx.Profile .inBox.Status .stats {
  width: auto;

  height: 35px;

  padding: 0 10px;

  margin-left: 10px;

  background-color: #fcd300;

  border-radius: 3px;

  font-size: 11px;

  color: #fff;

  line-height: 35px;

  float: right;
}

.bx.Profile .inBox.Medals,
.bx.Profile .inBox.Refs {
  width: 100%;

  margin-top: 10px;
}

.bx.Profile .inBox.Medals .content,
.bx.Profile .inBox.Refs .content {
  padding: 5px;
}

.bx.Profile .inBox.Medals .content .medal,
.bx.Profile .inBox.Refs .content .user {
  width: calc((100% / 12) - (11 * 5px / 12));

  height: 50px;

  margin: 0 5px 5px 0;

  background-color: rgba(0, 0, 0, 0.05);

  background-image: url(../img/padraoEmblem.png?0);

  background-position: center;

  background-repeat: no-repeat;

  border-radius: 3px;

  transition: background-color 0.3s;
}

.bx.Profile .inBox.Refs .content .user {
  height: 60px;
}

.bx.Profile .inBox.Medals .content .medal .num,
.bx.Profile .inBox.Refs .content .user .num {
  width: 15px;

  height: 15px;

  margin: -2px;

  background-color: #fcd300;

  border-radius: 50%;

  text-align: center;

  font-size: 10px;

  color: #fff;

  line-height: 15px;

  float: right;
}

.bx.myConfigs .txaButtons,
.bx.myConfigs form textarea {
  width: calc(100% - 210px);

  float: right;
}

.bx.Profile .inBox.Medals .content .medal:nth-child(12n + 12),
.bx.Profile .inBox.Refs .content a:nth-child(12n + 12) .user {
  margin-right: 0;
}

.bx.Profile .inBox.DQ,
.bx.Profile .inBox.DO {
  width: 100%;

  margin-top: 10px;

  overflow-y: auto;
}

.bx.Profile .inBox.DA,
.bx.Profile .inBox.DF,
.bx.Profile .inBox.DMKT,
.bx.Profile .inBox.DINV,
.bx.Profile .inBox.CDO,
.bx.Profile .inBox.CAR,
.bx.Profile .inBox.Corregedoria {
  margin-top: 10px;

  margin-left: 10px;
}
.bx.Profile .inBox.DA .title {
  background-color: #4bb6ed;
}

.bx.Profile .inBox.DQ .title {
  background-color: #a0f176;
}
.bx.Profile .inBox.DO .title {
  background-color: #fcd300;
}

.bx.Profile .inBox.DF .title {
  background-color: #989898;
}

.bx.Profile .inBox.DMKT .title {
  background-color: #8f40da;
}

.bx.Profile .inBox.DINV .title {
  background-color: #005eb1;
}

.bx.Profile .inBox.CDO .title {
  background-color: #d2691e;
}

.bx.Profile .inBox.CAR .title {
  background-color: #508ab3;
}

.bx.Profile .inBox.Corregedoria .title {
  background-color: #3b3b3b;
}

.bx.Profile .inBox.one,
.bx.Profile .inBox.max {
  width: 100%;
  margin-left: 0;
}

.bx.Profile .departamentos {
  width: 100%;
}

.bx.Profile .inBox.one {
  margin-left: 0;
}

.bx.Profile .inBox.two {
  width: calc((100% / 2) - 5px);
}

.bx.Profile .inBox.three {
  width: calc((100% / 3) - 7px);
}

.bx.Profile .inBox.four {
  width: calc((100% / 4) - 8px);
}

.bx.Profile .inBox.sizeIdi {
  margin-left: 10px;
}

.bx.myConfigs form textarea {
  min-width: calc(100% - 210px);

  max-width: calc(100% - 210px);
}

.bx.myConfigs .txaButtons button {
  height: 45px;
}

.bx.myTopics .topic {
  width: calc((100% - 30px) / 4);

  height: 70px;

  margin: 10px 10px 0 0;

  padding: 5px;

  background-color: #fff;

  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);

  border-radius: 3px;
}

.bx.myTopics .topic .buttons button,
.bx.myTopics .topic .data p:first-of-type {
  background-color: #161621;

  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.35);

  border-radius: 5px;

  color: #fff;
}

.bx.myTopics .box .topic:nth-child(1),
.bx.myTopics .box .topic:nth-child(2),
.bx.myTopics .box .topic:nth-child(3),
.bx.myTopics .box .topic:nth-child(4) {
  margin-top: 0;
}

.bx.myTopics .box .topic:nth-child(4n + 4) {
  margin-right: 0;
}

.bx.myTopics .topic .buttons {
  width: 50px;

  height: 70px;
}

.bx.myTopics .topic .buttons button {
  width: 100%;

  height: 28px;

  margin-bottom: 4px;

  font-size: 10px;

  line-height: 28px;
}

.bx.myTopics .topic .data {
  width: calc(100% - 55px);

  margin-left: 5px;
}

.bx.myTopics .topic .data p:first-of-type {
  height: 35px;

  padding: 0 10px;

  margin-bottom: 6px;

  line-height: 35px;
}

.bx.Dpts {
  width: 100%;
}

.bx.Dpts .box {
  width: calc((100% - 55px) / 3);

  margin-right: 27px;
}

.bx.Dpts .box:nth-child(3n + 3) {
  margin-right: 0;
}

.bx.Dpts .emblema {
  width: 75px;

  height: 75px;

  border-radius: 5px;

  background: url(https://csiot.com.br/painel/assets/uploads/upload-284ce140e3a7762b09c74dd612c5da01.gif)
    no-repeat;

  background-color: #7735b6;

  background-position: center;
}

.bx.Profile .box .contaTemp {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: 0px;

  width: 100%;

  height: 100%;

  background-image: linear-gradient(to bottom, transparent, #fcd300);

  z-index: 99999;

  border-radius: 3px;
}

.bx.Profile .box .contaTemp div {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  font-size: 2.8em;

  text-align: center;

  color: #202030;

  text-shadow: rgba(0, 0, 0, 0.29) 0px 0px 1px;
}

.bx.Profile .box .contaTemp span {
  position: absolute;

  left: 50%;

  top: 55%;

  transform: translate(-50%, -50%);

  font-size: 1.5em;

  text-align: center;

  color: rgba(22, 22, 33, 0.16);

  text-shadow: rgba(0, 0, 0, 0.29) 0px 0px 1px;
}