@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@600&display=swap');
.font2 {
  font-family: 'Sofia Sans', sans-serif;
}

.clan-settings-card {
  border: 1px solid #473f72;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

.clan-settings-card p {
  margin-bottom: 0;
}

table th {
  font-size: inherit !important;
  text-transform: uppercase !important;
  font-weight: bold!important;
  color: white !important;
}

.client-online {
  background: #68CF29;
  border-radius: 50%;
  padding: 5px;
  display: inline-block;
  vertical-align: middle;
}

.client-busy {
  background: #79001e;
  border-radius: 50%;
  padding: 5px;
  display: inline-block;
  vertical-align: middle;
}

.client-vacation {
  background: #1cc7f1;
  border-radius: 50%;
  padding: 5px;
  display: inline-block;
  vertical-align: middle;
}

.client-away {
  background: #fd8b09;
  border-radius: 50%;
  padding: 5px;
  display: inline-block;
  vertical-align: middle;
}


.client-offline {
  background: #fd2609;
  border-radius: 50%;
  padding: 5px;
  display: inline-block;
  vertical-align: middle;
}

.select-login {
    min-width: 75px;
    margin: 10px;
}

.login-loading {
    font-size: 75px;
    color: #6a6767;
    margin: 30px;
}

#login-card button {
  font-weight: 500 !important;
}

#login-card button:disabled {
  opacity: 0.8;
  cursor: default;
}

.auth-up {
  padding: 30px;
}

.auth-down {
  max-height: 250px;
  padding: 100px 0 50px 0;
  border-radius: 0 0 20px 20px;
  background: url(../images/login-wave2.svg);
  background-size: cover;
}

.auth-info1 {
  font-size: 10px;
  margin-bottom: 0px;
}

.login-options {
  padding: 0px 0px 20px 0px;
}

.login-rodo {
  font-size: 12px;
}

.auth-down::after {
  background-color: #1f1a34;
}

.authincation-content {
  
}

::-webkit-scrollbar {
    width: 20px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
  }
.card-title {
    text-transform: none !important;
}
[data-theme-version="dark"] .ts3-channel-tree {
  background-color: #282244;
  height: 50vh;
  max-height: 50vh;
  overflow:scroll;
  overflow-x:hidden;
  border-radius: 10px;
}
[data-theme-version="light"] .ts3-channel-tree {
  background-color: #fff;
  height: 50vh;
  max-height: 50vh;
  overflow:scroll;
  overflow-x:hidden;
  color: black;
  border-radius: 10px;
}
[data-theme-version="dark"] .ts3-channel-tree .server_name
{
  background-color: #221d3a;
  box-shadow: 2px 7px 10px #0303044f;
}
[data-theme-version="light"] .ts3-channel-tree .server_name
{
  background-color: #ebe7ff;
  box-shadow: 2px 7px 10px #d6d6ff4f;

}


.ts3-channel-tree img {
  width: 24px;
  height: auto;
  display:inline;
  margin: 4px;
}

.ts3-channel-tree .channel-cspacer {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 5px;
  text-align: center;
  border-radius: 10px;
  margin-left: 10px;
  font-style: italic;
}
.ts3-channel-tree .channel-rspacer {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 5px;
  text-align: right;
  border-radius: 10px;
  margin-left: 10px;
  font-style: italic;
}
.ts3-channel-tree .channel-sspacer {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 5px;
  border-radius: 10px;
  margin-left: 10px;
  font-style: italic;
  white-space: nowrap;
}
.ts3-channel-tree .channel-spacer {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 2px;
  border-radius: 10px;
  margin-left: 10px;
  white-space: nowrap;
}




[data-theme-version="dark"] .ts3-channel-tree .client,[data-theme-version="dark"].ts3-channel-tree .ts3-channel, [data-theme-version="dark"] .ts3-channel-tree .channel  {
  background: rgb(40,34,68);
  background: linear-gradient(130deg, rgb(28 24 50) 0%, rgb(32 28 54) 30%, rgba(34,29,58,0.9164040616246498) 61%, rgba(34,29,58,0) 100%);
  margin-bottom: 5px;
  border-radius: 10px;
  margin-left: 10px;
  white-space: nowrap;
}

[data-theme-version="light"] .ts3-channel-tree .client, [data-theme-version="light"] .ts3-channel-tree .ts3-channel, [data-theme-version="light"] .ts3-channel-tree .channel  {
  background: rgb(132, 131, 141);
  background: linear-gradient(130deg, rgb(170, 170, 172) 0%, rgb(169, 169, 170) 30%, rgba(126, 126, 128, 0.916) 61%, rgba(145, 144, 150, 0) 100%);
  margin-bottom: 5px;
  border-radius: 10px;
  margin-left: 10px;
  white-space: nowrap;
}


.ts3-channel-tree img {
  margin-left: 10px;  
}



[data-theme-version="dark"] .sk-three-bounce {
  background-color: #120f1e;
}





.rotation {
  display: block;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px -150px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.3;
  z-index: -1;
  animation: 2s girandomt infinite forwards linear;
}

.player {
  border-radius: 6px;
  background-color: white;
  min-height: 200px;
  box-shadow: 0px 5px 20px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.player .head {
  padding: 15px;
  color: white;
  height: auto;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.player .head .front {
  position: relative;
  height: 100%;
  justify-content: space-around;
}
.player .head .back {
  height: 110%;
  width: 110%;
  top: -10px;
  left: -10px;
  position: absolute;
  background-position: center;
  background-size: cover;
  background-image: url("https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80");
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.player .head .avatar {
  width: 90px;
  height: 90px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.player .head .avatar img {
  width: 100%;
  height: 100%;
}
.player .head .infos {
  justify-content: space-around;
  flex-direction: column;
  height: inherit;
  align-items: baseline;
}
.player .head .tags span {
  border-radius: 3px;
  padding: 2px 11px;
  margin: 1px 2px;
  background-color: #15A58B;
  font-weight: bold;
}
.player .head .titulo_song {
  font-size: 20px;
}
.player .head .duracao_song {
  
  letter-spacing: 1.2px;
  font-size: 12px;
  color: white;
  margin-bottom: 8px;
}
.player .timeline {
  height: auto;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.player .timeline .volume {
  flex-direction: row;
}
.player .timeline .controllers.active .play {
  box-shadow: 0px 0px 10px 2px rgba(30, 177, 150, 0.1);
  animation: 3s pulseshadowplay infinite both;
}
.player .timeline .controllers .back, .player .timeline .controllers .play, .player .timeline .controllers .stop {
  font-size: 16px;
  margin: 10px;
  display: inline;
  color: #4A4A4A;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid transparent;
}
.player .timeline .controllers .play {
  transition: all 0.3s ease-in-out;
}
.player .timeline .controllers .play:hover {
  box-shadow: 0px 0px 10px 2px rgba(30, 177, 150, 0.38);
  border: 2px solid rgba(143, 208, 196, 0.54) !important;
}
.player .timeline .controllers .stop:hover {
  box-shadow: 0px 0px 10px 2px rgba(30, 177, 150, 0.38);
  border: 2px solid rgba(143, 208, 196, 0.54) !important;
}
.player .timeline .controllers .back::after {
  content: "";
  font-family: "FontAwesome";
  margin-right: 5px;
}
.player .timeline .controllers .play::after {
  content: "\f04b";
  font-family: "FontAwesome";
  padding: 5px;
}
.player .timeline .controllers .stop::after {
  content: "\f04c";
  font-family: "FontAwesome";
  padding: 5px;
}
.player .timeline .controllers .forward::after {
  content: "";
  font-family: "FontAwesome";
  margin-left: 5px;
}
.player .timeline .soundline {
  width: 100%;
  height: 6px;
  position: relative;
  background: #F3F3F3;
  border-radius: 2px;
  overflow: hidden;
}
.soundline::after {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #6CE59C;
  box-shadow: 0px 0px 9px #94FFBF;
  transition: all 0.4s cubic-bezier(0.07, 0.82, 0.11, 1.02);
  width: var(--data-time);
}

@keyframes pulseshadowplay {
  0% {
    box-shadow: 0px 0px 10px 2px rgba(30, 177, 150, 0.1);
  }
  50% {
    box-shadow: 0px 0px 50px 2px rgba(30, 177, 150, 0.38);
  }
}
@keyframes girandomt {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0px 0px 30px 40px rgba(255, 255, 255, 0);
  }
}
.linear-wipe {
  text-align: center;
  background: linear-gradient(to right, #e09903 20%, #ff5e00 40%, #ff8100 60%, #eb9903 80%);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: shine 1s linear infinite;
          animation: shine 1s linear infinite;
}
@-webkit-keyframes shine {
  to {
    background-position: 200% center;
  }
}
@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.guild-card {
  background: url(../images/ckg.png); 
  border:solid 2px #4b4174;
}

.vacation-calendar {
  background-color: #ff2b1e4a !important;
  line-height: 1.15 !important;
}
.meeting-calendar {
  background-color: #ae00ff !important;
  line-height: 1.15 !important;
}

.event-calendar {
  background-color: #0077ff !important;
  line-height: 1.15 !important;
}


.maintance-calendar {
  background-color: #ff9900 !important;
  line-height: 1.15 !important;
}

.other-calendar {
  background-color: #444444 !important;
  line-height: 1.15 !important;
}

.fc-daygrid-dot-event {
  background: #2c254a;
  border: none;
}

.canceled-calendar {
  font-weight: 500;
  font-style: italic;
  

}

.canceled-line {
  border: 1px solid white;
  border-radius: 21px;
  float: left;
  background-color: white;
  margin-left: 5px;
  padding: 1px 1px 25px 1px;
  margin-right: 5px;
}

.lottery-machine {
  color: white;
  font-size: 36px;
  font-size: 24px;
  margin: 50px;
  height: 125px;
  padding-top: 50px;
  background-color: #18132c;
  border-radius: 20px;
  transition: all .1s ease-in-out;
  transition: all .1s ease-out;

}

.lotto-slider {
  position:relative;
  white-space: nowrap;
  padding-bottom: 200px;
	background: linear-gradient(-45deg, #2c254a, #53478d);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
  border-radius: 20px;
  margin-bottom: 20px;
}


.lotto-slider img {
  display: inline-block;
  width: 128px;
  margin-right: 20px;
  position: absolute;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  text-align: center;
}

.pre {
  font-size: 0px;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.show-w {
  opacity: 1 !important;
  transform: translateX(-200px);
  animation: lottery 0.15s ease-in;
}

.show-e {
  transform: translateX(0px) !important;
  animation: lotteryend 4s ease-in;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}

@keyframes lotteryend {
  50% {
    transform: translateX(-200px) !important;
    opacity: 1;
  }
  100% {
    transform: translateX(0px) !important;
    opacity: 0;
  }
}


@keyframes lottery {
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(200px);
    opacity: 0;
  }
}

.dataTables_wrapper .dataTables_paginate span {
  background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button {
  color: var(--primary) !important;
  height: 48px !important;
  width: 40px !important;
  line-height: 48px !important;
  margin: 0 3px!important;
  border-radius: 10px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--rgba-primary-1) !important;
  color:  var(--primary) !important;
  margin-top: 5px !important;
  border-radius: 10px !important;
  width: 40px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: #3e314c !important;
}


.lds-roller,
.lds-roller div,
.lds-roller div:after {
  box-sizing: border-box;
  color: white;
}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: currentColor;
  margin: -3.6px 0 0 -3.6px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 62.62742px;
  left: 62.62742px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 67.71281px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 70.90963px;
  left: 48.28221px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 70.90963px;
  left: 31.71779px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 67.71281px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 62.62742px;
  left: 17.37258px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12.28719px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.content_js {
  transition: all .5s linear;

}

.switching {
  opacity: 0;
  margin-top:900px;
}


.ck-content {
  color: white;
  background-color: #2c254a !important;
  border-color: #5b5289 !important;

}

.ck-toolbar {
  background-color: #18142a !important;
  border: none !important;
}

.ck-icon {
  color: #89879f !important;
}
.ck-toolbar__separator {
  background-color: #5b5289 !important;
}
.ck-dropdown__button {
  color: #626262 !important;
}
.ck-editor__editable_inline {
  min-height: 400px !important;
}
/*
.fc-daygrid-event {
  border-radius: 10px;
  white-space: normal;
}
.fc-h-event {
  border: none;
}
.fc-event, .external-event {
  cursor: auto;
}
.fc-h-event .fc-event-main {
  display: none;
}
.fc .fc-scroller-harness {
  overflow: visible !important;
}
.fc .fc-view-harness {
  height: 50vh !important;
}
*/
.table-no-border td {
  border:none;
}

.login-sh-h {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 1s ease-in-out;
  height: 0;
}

.login-sh-s {
  visibility: visible;
  opacity: 1;
  height: 100%;
}

.hide-effect {
  animation: hiding 0.5s ease-in-out;
  animation-iteration-count: 1;
  opacity: 0;
}

.show-effect {
  animation: showing 0.5s ease-in-out;
  animation-iteration-count: 1;
  opacity: 1;

}

@keyframes showing {
  0%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hiding {
  0%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.loader {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {
  border-radius: 50%;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
}
.loader:before {
  animation: ball1 1s infinite;
  background-color: #fff;
  box-shadow: 30px 0 0 #ff3d00;
  margin-bottom: 10px;
}
.loader:after {
  animation: ball2 1s infinite;
  background-color: #ff3d00;
  box-shadow: 30px 0 0 #fff;
}

@keyframes rotate {
  0% { transform: rotate(0deg) scale(0.8) }
  50% { transform: rotate(360deg) scale(1.2) }
  100% { transform: rotate(720deg) scale(0.8) }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #ff3d00;
  }
  50% {
    box-shadow: 0 0 0 #ff3d00;
    margin-bottom: 0;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #ff3d00;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #fff;
  }
  50% {
    box-shadow: 0 0 0 #fff;
    margin-top: -20px;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #fff;
    margin-top: 0;
  }
}

.body-hide {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

.body-hide-end {
  opacity: 0;
  background-color: #120f1e !important;
}

.chat {
  height: 40vh;
  position: relative;
  padding: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.chat:before {
  background-image: url("../images/chat.jpg");
  background-size: cover;
  content: ' ';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

.chat .message {
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: flex;
  width: 100%;
  padding: 5px 10px 5px 10px;
}

.message-author {
  margin-left: 50px;
}

.message-author-right {
  margin-right: 55px;
  text-align: right;
}


.chat .message-image {
  margin-right: 10px;
  margin-left: 10px;
  display: flex;
}

.chat .opened {
  background-color: #0d6233;
}

.chat .closed {
  background-color: #ff4444;
}

.chat .own {
  background-color: grey;
}

.chat .other {
  background-color: #085fff;
}

.message-box {
  display: flex;
  align-items: center;
}

.message-load {
  opacity: 1;
  animation: message-load 1s;
}

@keyframes message-load {
  0%{
    translate: 700px 0px;
    opacity: 0;
  }
  100%{
    translate: 0px 0px;
    opacity: 1;
  }
}

.notification-menu {

  border: 3px solid #2c254a !important;

}

.all-notification {
  border-top: 3px solid #2c254a !important;
}

.select-image {

  border: 3px solid #2c254a !important;
  border-radius: 5px;

}

.notification_dropdown .dropdown-menu-right {
  min-width: 610px;
}

.notification-menu .widget-media .timeline .timeline-panel .media {
  align-self: center !important;
}

.new_notification .notification-description {
  color: orange !important;
}

.no-border {
  border: none !important;
}

.text-special {
  color: #29cf99 !important;
  font-weight: bold;
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}

.rodo-box {
  display: flex;
}

.rodo {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  margin: auto;


}

.rodo p {
  margin: 0;
  font-size: 12px;
}

.rodo h3 {
  color: black !important;
}

.rodo-content {
  border-radius: 10px 10px 0px 0px;
  padding: 30px 20px;
  background-color: white;
  bottom: 0;
  position: fixed;
  display: block;
}

.rodo-back {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 999;
  backdrop-filter: blur(15px);
}

[data-theme-version="dark"] .card-home-stats {
  border-radius: 30px;
    background-color: #3b336336 !important ;
}

.card-home-stats h6 {
  color: #9c9cff !important
}

[data-theme-version="dark"] .card-home-userlist {
  border-radius: 30px;
}

.card-home-userlist .widget-media .timeline .timeline-panel {
  border: none !important;
  background: #2c254a36;
  padding: 10px;
  border-radius: 10px !important;
}

.card-home-userlist .widget-media .timeline .timeline-panel .media-info {
  padding: 30px;
}


.cr-30 {
  border-radius: 30px !important;
}

.dark-animation {

  animation: dark 4s infinite;

}

@keyframes dark {
  0% {
    background-color: #6e6e6e;
  }
  50% {
    background-color: #000000
  }
  100% {
    background-color: #6e6e6e;
  }
}


.ts3-viewer {
  background-color: #2c254a;

}

.ts3-viewer span {
  margin-left: 10px;
}

.ts3-viewer img {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.ts3-viewer .server-name {
  background-color: #1a1430;
  padding: 10px;
  border-radius: 5px;
  align-items: center;
  display: flex;
  font-size: 16px;

}

.ts3-viewer .channel {
  background-color: #1a143063;;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  align-items: center;
  display: flex;
  font-size: 16px;
}

.ts3-viewer .subchannel {
  background-color: #1a143063;;
  padding: 5px;
  margin-top: 5px;
  margin-left: 30px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  align-items: center;
  display: flex;
  font-size: 16px;
}

.ts3-viewer .rspacer {
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}

.ts3-viewer .cspacer {
  min-height: 24px;
  border-radius: 5px;
  font-style: italic;
  font-size: 16px;
  text-align: center;
}
.ts3-viewer .spacer {
  min-height: 24px;
  border-radius: 5px;
  font-style: italic;
  font-size: 16px;
  text-align: left;
}