.app-header__logo .logo-src {
    height: 50px!important;
    width: 200px!important;
    background-repeat: no-repeat!important;
}

.app-sidebar .scrollbar-sidebar{overflow: overlay;}

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar {
    width: 0.8em;
  }

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  }
   
.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-thumb {
    background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%) !important;
    border-radius: 25px;
    border: 1px solid #46aef7;
  }

  .prodImg{
    max-width: 90px;
  }

  .ycii {
    max-height: 480px;
    overflow-y: auto;
}
div.expnditm {
  padding-left: 50px;
}
a:hover {
  cursor: pointer;
  color: #FFAD49!important;
}

.qcontimg img {
  width: 100%;
}

.qcont {
  line-height: 0em;
}

.progress-bar-animated-alt.progress-bar::after, .progress-bar-animated-alt .progress-bar::after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  animation: progress-active 2s ease infinite;
}
.progress .progress-bar:last-child {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}
.progress-bar-animated-alt.progress-bar, .progress-bar-animated-alt .progress-bar {
  position: relative;
}

.weekly_quest_title
{
  text-transform: uppercase;
  font-weight: 750;
}

.weekly_quest_desc
{
  text-transform: lowercase;
}

/* COLLECTION SYSTEM */
.collection_title
{
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 750;
}

.collection_desc
{
  font-size: 11px;
  color: #02D031;
}

.collection_info
{
  font-size: 11px;
}

.collection_rwds
{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #F9D300;
}

.completed_stamp
{
  background-image: url('../images/completed.png');
  background-repeat: no-repeat;
  background-position: top 20px left -5px;
}

.disabled-form {
  pointer-events: none;
  opacity: 1;
}

.hidden {
  visibility: hidden;
}

/* collection-wrapper-unavailable */
.collection-wrapper-unavailable {
  text-align:center;
  border: 1px solid rgba(204, 204, 204, .12);
  border-radius:.25rem;
  margin:0 0 20px;
  padding:5px;
  transform: translate(0px, 0px);
}

.collection-wrapper-unavailable::before{
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background: none;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
  border-top: 1px solid rgba(108, 117, 125, .75);
  border-left: 1px solid rgba(108, 117, 125, .75);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.collection-wrapper-unavailable::after{
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background: none;
  bottom: 0;
  right: 0;
  transform: translate(5px, 5px);
  border-bottom: 1px solid rgba(108, 117, 125, .75);
  border-right: 1px solid rgba(108, 117, 125, .75);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.collection-wrapper-unavailable:hover:before, .collection-wrapper-unavailable:hover:after{
  width: calc(100% + 15px);
  height: calc(100% + 15px);
}

.collection-wrapper-unavailable:hover {
  border: 1px solid rgba(204, 204, 204, .05);
  background:rgba(25, 29, 36, .25);
  transition: all 0.12s ease-in-out;
}

/* collection-wrapper-claiming */
.collection-wrapper-claiming {
  text-align:center;
  border: 1px solid rgba(204, 204, 204, .12);
  border-radius:.25rem;
  margin:0 0 20px;
  padding:5px;
  transform: translate(0px, 0px);
}

.collection-wrapper-claiming::before{
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background: none;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
  border-top: 1px solid rgba(247, 185, 35, .5);
  border-left: 1px solid rgba(247, 185, 35, .5);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.collection-wrapper-claiming::after{
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background: none;
  bottom: 0;
  right: 0;
  transform: translate(5px, 5px);
  border-bottom: 1px solid rgba(247, 185, 35, .5);
  border-right: 1px solid rgba(247, 185, 35, .5);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.collection-wrapper-claiming:hover:before, .collection-wrapper-claiming:hover:after{
  width: calc(100% + 15px);
  height: calc(100% + 15px);
}

.collection-wrapper-claiming:hover {
  border: 1px solid rgba(204, 204, 204, .05);
  background:rgba(25, 29, 36, .25);
  transition: all 0.12s ease-in-out;
}

/* collection-wrapper-progress */
.collection-wrapper-progress {
  text-align:center;
  border: 1px solid rgba(204, 204, 204, .12);
  border-radius:.25rem;
  margin:0 0 20px;
  padding:5px;
  transform: translate(0px, 0px);
}

.collection-wrapper-progress::before{
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background: none;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
  border-top: 1px solid rgba(22, 170, 255, .5);
  border-left: 1px solid rgba(22, 170, 255, .5);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.collection-wrapper-progress::after{
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background: none;
  bottom: 0;
  right: 0;
  transform: translate(5px, 5px);
  border-bottom: 1px solid rgba(22, 170, 255, .5);
  border-right: 1px solid rgba(22, 170, 255, .5);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.collection-wrapper-progress:hover:before, .collection-wrapper-progress:hover:after{
  width: calc(100% + 15px);
  height: calc(100% + 15px);
}

.collection-wrapper-progress:hover {
  border: 1px solid rgba(204, 204, 204, .05);
  background:rgba(25, 29, 36, .25);
  transition: all 0.12s ease-in-out;
}

/* collection-wrapper-completed */
.collection-wrapper-completed {
  text-align:center;
  border: 1px solid rgba(204, 204, 204, .12);
  border-radius:.25rem;
  margin:0 0 20px;
  padding:5px;
  transform: translate(0px, 0px);
}

.collection-wrapper-completed::before{
  content: '';
  position: absolute;
  width: calc(100% + 15px);
  height: calc(100% + 15px);
  background: none;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
  border-top: 1px solid rgba(58, 196, 126, .5);
  border-left: 1px solid rgba(58, 196, 126, .5);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.collection-wrapper-completed::after{
  content: '';
  position: absolute;
  width: calc(100% + 15px);
  height: calc(100% + 15px);
  background: none;
  bottom: 0;
  right: 0;
  transform: translate(5px, 5px);
  border-bottom: 1px solid rgba(58, 196, 126, .5);
  border-right: 1px solid rgba(58, 196, 126, .5);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.collection-wrapper-completed:hover {
  border: 1px solid rgba(204, 204, 204, .05);
  background:rgba(25, 29, 36, .25);
  transition: all 0.12s ease-in-out;
}

.collection-pulse {
  background: black;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  margin: 10px;
  height: 8px;
  width: 8px;
  transform: scale(1);
  animation: pulse-black 2s infinite;
  position:absolute;
  left: 80%;
}

.collection-pulse.disable {
  background: rgba(255, 82, 82, 1);
  box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

.collection-pulse.enable {
  background: rgba(3, 172, 14, 1);
  box-shadow: 0 0 0 0 rgba(3, 172, 14, 1);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(3, 172, 14, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(3, 172, 14, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(3, 172, 14, 0);
  }
}

.collection-pulse-legend {
  background: black;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  margin: 8px;
  height: 8px;
  width: 8px;
  transform: scale(1);
  animation: pulse-black 2s infinite;
  position:relative; 
  float:left;
}

.collection-pulse-legend.disable {
  background: rgba(255, 82, 82, 1);
  box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
  animation: pulse-red 2s infinite;
}

.collection-pulse-legend.enable {
  background: rgba(3, 172, 14, 1);
  box-shadow: 0 0 0 0 rgba(3, 172, 14, 1);
  animation: pulse-green 2s infinite;
}


/* WEB SHOP CARD */
.shop-card {
  text-align: center;
  margin: 0 0 10px;
  padding: 5px;
  border: 1px solid rgba(204, 204, 204, .12);
  transform: translate(0px, 0px);
}

.shop-card::before{
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background: none;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
  border-top: 1px solid rgba(22, 170, 255, .5);
  border-left: 1px solid rgba(22, 170, 255, .5);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.shop-card::after{
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background: none;
  bottom: 0;
  right: 0;
  transform: translate(5px, 5px);
  border-bottom: 1px solid rgba(22, 170, 255, .5);
  border-right: 1px solid rgba(22, 170, 255, .5);
  z-index: -1;
  transition: all 0.55s ease-in-out;
}

.shop-card:hover:before, .shop-card:hover:after{
  width: calc(100% + 15px);
  height: calc(100% + 15px);
}

.shop-card:hover {
  border: 1px solid rgba(204, 204, 204, .05);
  background:rgba(25, 29, 36, .25);
  transition: all 0.12s ease-in-out;
}

/* WEBSHOP */
span.itemtype1 {
  color: #0d6d00;
  font-weight: 500;
  letter-spacing: 2px;
}
span.itemtype2 {
  color: #ff0006;
  font-weight: 500;
  letter-spacing: 2px;
}
span.itemtype3 {
  color: #016d55;
  font-weight: 500;
  letter-spacing: 2px;
}
span.itemtype4 {
  color: #6d015a;
  font-weight: 500;
  letter-spacing: 1px;
}
span.itemtype5 {
  color: #ffcc00;
  font-weight: 500;
  letter-spacing: 1px;
}
span.desc2 {
  color: #0066ff;
  font-weight: 500;
  letter-spacing: 0.5px;
}

span.character {
  font-size: 1.25em;
}

/* RANKING */
.class-ranking{
  text-align: center;
}
.class-ranking ul > li{
  display: inline-block;
  overflow: hidden;
  margin-right: 45px;
}

.class-ranking a {
  filter: grayscale(100%);
}

.class-ranking a:hover{
  filter: grayscale(0%);
}

.calibur {
  background-color: #e0bf07;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 16px 0px rgba(255,242,0,1);
  -moz-box-shadow: 0px 0px 16px 0px rgba(255,242,0,1);
  box-shadow: 0px 0px 16px 0px rgba(255,242,0,1);
  margin: 8px;
  height: 8px;
  width: 8px;
  transform: scale(1);
  animation: pulse-black 2s infinite;
  position:relative; 
  float:left;
}

.caliburfont {
  color: rgba(255,242,0,1);
  text-shadow: 0px 0px 10px rgba(173,173,168,1);	
}

.guildleader {
  background-color: #16bdc9;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(68,226,250,1);
  -moz-box-shadow: 0px 0px 5px 0px rgba(68,226,250,1);
  box-shadow: 0px 0px 5px 0px rgba(68,226,250,1);
  margin: 8px;
  height: 8px;
  width: 8px;
  transform: scale(1);
  animation: pulse-black 2s infinite;
  position:relative; 
  float:left;
}
 .guildleaderfont {
  color: #0ca5b0;
  text-shadow: 0px 0px 10px rgba(53,201,227,1);	
}

.bringer {
  background-color: #ff3c3c;
  border-radius: 50%;
	-webkit-box-shadow: 0px 0px 11px 0px rgba(255,60,60,1);
	-moz-box-shadow: 0px 0px 11px 0px rgba(255,60,60,1);
	 box-shadow: 0px 0px 11px 0px rgba(255,60,60,1);
  margin: 8px;
  height: 8px;
  width: 8px;
  transform: scale(1);
  animation: pulse-black 2s infinite;
  position:relative; 
  float:left;
}

.bringerfont {
  color: #ff3c3c;
  text-shadow: 0px 0px 10px rgba(255,60,60,1);
}

.guardian {
  background-color: #b3b2ad;
  border-radius: 50%;
	-webkit-box-shadow: 0px 0px 11px 0px rgba(173,173,168,1);
	-moz-box-shadow: 0px 0px 11px 0px rgba(173,173,168,1);
	 box-shadow: 0px 0px 11px 0px rgba(173,173,168,1);
  margin: 8px;
  height: 8px;
  width: 8px;
  transform: scale(1);
  animation: pulse-black 2s infinite;
  position:relative; 
  float:left;
}

.guardianfont {
  color: #b3b2ad;
  text-shadow: 0px 0px 10px rgba(173,173,168,1);	
}

/* Circle */
.circle-a {
  background-color: rgba(0,0,0,0);
  border: 5px solid #2196F3;
  opacity: .9;
  border-right: 5px solid rgba(0,0,0,0);
  border-left: 5px solid rgba(0,0,0,0);
  border-radius: 50px;
  box-shadow: 0 0 35px #2196F3;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  -moz-animation:spinPulse 1s infinite ease-in-out;
  -webkit-animation:spinPulse 1s infinite linear;
}
.circle-a1 {
  background-color: rgba(0,0,0,0);
  border: 5px solid #2196F3;
  opacity: .9;
  border-left: 5px solid rgba(0,0,0,0);
  border-right: 5px solid rgba(0,0,0,0);
  border-radius: 50px;
  box-shadow: 0 0 15px #2196F3;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  position: relative;
  top: -30px;
  -moz-animation:spinoffPulse 1s infinite linear;
  -webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2196F3;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse { 
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2196F3; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); } 
}

/* Tooltip Styles */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 15px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 200%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}