.hidden {
  opacity: 0%;
}

.bitbox {
  cursor: pointer;
}

.vertical-center {
  top: 50%;
  position: fixed;
  -ms-transform: translateY(-50%); 
  transform: translateY(-50%);
}

.centerDivX {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

.centerDivY {	
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
  	
	margin: auto;
}

.centerDivY {	
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
  	
	margin: auto;
}

.invisible {
    opacity: 0%;
}

/*Wiggle*/

@-webkit-keyframes wiggle
{
  0% {-webkit-transform: rotateZ(3deg);}
  50% {-webkit-transform: rotateZ(-3deg);}
  100% {-webkit-transform: rotateZ(3deg);}
}
@-moz-keyframes wiggle
{
  0% {-moz-transform: rotateZ(3deg);}
  50% {-moz-transform: rotateZ(-3deg);}
  100% {-moz-transform: rotateZ(3deg);}
}
@-o-keyframes wiggle
{
  0% {-o-transform: rotateZ(3deg);}
  50% {-o-transform: rotateZ(-3deg);}
  100% {-o-transform: rotateZ(3deg);}
}
@keyframes wiggle
{
  0% {transform: rotateZ(3deg);}
  50% {transform: rotateZ(-3deg);}
  100% {transform: rotateZ(3deg);}
}
 
.wiggle {    
  -webkit-animation: wiggle 0.2s ease-in-out;
  -moz-animation: wiggle 0.2s ease-in-out;
  -o-animation: wiggle 0.2s ease-in-out;
  animation: wiggle 0.2s ease-in-out;
}

/*Hop*/

@-webkit-keyframes hop
{
  0% {-webkit-transform: translateY(-0.5rem);}
  100% {-webkit-transform: translateY(0);}
}

@-moz-keyframes hop
{
  0% {-moz-transform: translateY(-0.5rem);}
  100% {-moz-transform: translateY(0rem);}
}

@-o-keyframes hop
{
  0% {-o-transform: translateY(-0.5rem);}
  100% {-o-transform: translateY(0rem);}
}

@keyframes hop
{
  0% {transform: translateY(-0.5rem);}
  100% {transform: translateY(0rem);}
}
 
.hop {    
  -webkit-animation: hop 0.2s ease-in-out;
  -moz-animation: hop 0.2s ease-in-out;
  -o-animation: hop 0.2s ease-in-out;
  animation: hop 0.2s ease-in-out;
}

.bgtransition {
  transition: background-color 1.5s ease-out;
}

.correct {
  background-color: #009432 !important;
}

.incorrect {
  background-color: #bd272c !important;
}

.removebtnborder {
  box-shadow: 0 0 0 0rem rgba(24, 144, 255, 0.3) !important;
  color: white !important;
}

/*
////////////
Custom V-Spacers
////////////
*/

.v-spacer-5 {
    height: 5px;
}

.v-spacer-10 {
    height: 10px;
}

.v-spacer-15 {
    height: 15px;
}

.v-spacer-20 {
    height: 20px;
}

.v-spacer-25 {
    height: 25px;
}

.v-spacer-30 {
    height: 30px;
}

.v-spacer-35 {
    height: 35px;
}

.v-spacer-40 {
    height: 40px;
}

.v-spacer-45 {
    height: 45px;
}

.v-spacer-50 {
    height: 50px;
}

/*
////////////
Loading Animation
////////////
*/

.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: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(107, 206, 255);
    margin: -4px 0 0 -4px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
  }
  .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: 71px;
    left: 32px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  

/*
////////////
Link Buttons
////////////
*/

/*
Discord Link Buttons
*/

.btn.btn-discord {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
.btn.btn-discord:hover {
    color: #ffffff;
    background-color: #899ad8;
    border-color: #899ad8;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
.btn.btn-discord:focus {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    -webkit-box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    outline-color: transparent;
}
.btn.btn-discord.active {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    -webkit-box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    outline-color: transparent;
}
.btn.btn-discord:focus:hover {
    /* 
    * Only text color and background color is overridden, while the border 
    * color, box shadow, and the outline of the focus selector is kept.
    */
    color: #ffffff;
    background-color: #899ad8;
}
.btn.btn-discord.active:hover {
    /* 
    * Only text color and background color is overridden, while the border 
    * color, box shadow, and the outline of the focus selector is kept.
    */
    color: #ffffff;
    background-color: #899ad8;
}
.dark-mode .btn.btn-discord {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
.dark-mode .btn.btn-discord:hover {
    color: #ffffff;
    background-color: #899ad8;
    border-color: #899ad8;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.dark-mode .btn.btn-discord:focus {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    -webkit-box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    outline-color: transparent;
}
.dark-mode .btn.btn-discord.active {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    -webkit-box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
    outline-color: transparent;
}
.dark-mode .btn.btn-discord:focus:hover {
    /* 
    * Only text color and background color is overridden, while the border 
    * color, box shadow, and the outline of the focus selector is kept.
    */
    color: #ffffff;
    background-color: #899ad8;
}
.dark-mode .btn.btn-discord.active:hover {
    /* 
    * Only text color and background color is overridden, while the border 
    * color, box shadow, and the outline of the focus selector is kept.
    */
    color: #ffffff;
    background-color: #899ad8;
}
.btn.btn-discord.disabled {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.btn.btn-discord:disabled {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.btn.btn-discord.disabled:hover {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.btn.btn-discord.disabled:focus {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.dark-mode .btn.btn-discord.disabled {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.dark-mode .btn.btn-discord:disabled {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.dark-mode .btn.btn-discord.disabled:hover {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.dark-mode .btn.btn-discord.disabled:focus {
    color: #ffffff;
    background-color: #7289DA;
    border-color: #7289DA;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}