.ani-load {
  animation-name: aniload;
  -webkit-animation-name: aniload;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  display: block;
  visibility: visible;
}
@keyframes aniload {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
}
@-webkit-keyframes aniload {
  from {
  opacity: 0;
  } 
  to {
  opacity: 1;
  }
}
body {
  /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
  background: linear-gradient(-45deg, #74ebd5, #acb6e5, #12D8FA, #A6FFCB);
  background-size: 400% 400%;
  -webkit-animation: mygradient 15s ease infinite;
          animation: mygradient 15s ease infinite;
  height: 100vh;
}
.bg-glass {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.bg-hazel {
  background: #77A1D3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #77A1D3, #79CBCA, #E684AE);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #77A1D3, #79CBCA, #E684AE); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-profile:after, .bg-profile:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  width: 100vmax;
  height: 100vmax;
  background: rgba(0, 0, 0, 0.04);
  -webkit-animation: mybackground 90s linear infinite;
  animation: mybackground 90s linear infinite;
} 
.bg-profile:after {
  left: 15vw;
}
.bg-profile:before {
  right: 15vw;
  -webkit-animation-delay: -30s;
  animation-delay: -30s;
  animation-direction: reverse;
}
.card-ns {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.card-zoom:hover {
  overflow-x: hidden !important;
  transform: scale(1.1) !important;
  transition: all 0.5s ease !important;
  -webkit-transition: all 0.5s ease !important;
}
@font-face{
  font-family: 'Comic Neue';
  src: url("../../dist/font/comic-neue-regular.ttf") format("truetype");
}
.f-comic {
  font-family: "Comic Neue";
}
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
}
.img-zoom:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.ls-05 {
  letter-spacing: 0.5px;
}
.ls-15 {
  letter-spacing: 1.5px;
}
.rounded-4-top {
  border-radius: 16px 16px 0px 0px;
}
.rounded-4 {
  border-radius: 15px;
}
.rounded-5 {
  border-radius: 25px;
}
.spin-img {
  width: 2rem;
}
.spin-lg {
  width: 4rem;
  height: 4rem;
  color: #dd0a10;
}
.z-index-2 {
  z-index: 2;
}
@-webkit-keyframes mybackground {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes mybackground {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes mygradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes mygradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (min-width: 992px) {
  body {
    overflow-x: hidden !important;
  }
}
/* Sidebar */
.img-logo-sidebar {
  width: 30px;
}
#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 280px;
}
#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 280px;
  width: 0;
  height: 100%;
  margin-left: -280px;
  overflow-y: auto;
  background: #f7f8f9;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
  width: 280px;
}
#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -280px;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  width: 280px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.sidebar-nav li {
  line-height: 50px;
}
.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #323295;
}
.sidebar-nav li a:hover {
  text-decoration: none;
  color: #323295;
  background: #e5e7eb;
  border-radius: 15px;
  transition: all .7s;
  -moz-transition: all .7s;
  -webkit-transition:all .7s;
  -o-transition: all .7s;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}
.active {
  background: #7289da;
}
.active > a {
  color: #ffffff !important;
}
.active > a:hover{
  color: #ffffff !important;
  background: #667bc4 !important;
}
.sidebar-nav > .sidebar-brand {
  height: 100px;
  font-size: 18px;
  line-height: 60px;
  margin-left: 65px;
}
.sidebar-nav > .sidebar-brand a {
  color: #ffffff;
}
.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}
@media(min-width:768px) {
  #wrapper {
    padding-left: 280px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #sidebar-wrapper {
    width: 280px;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #page-content-wrapper {
    padding: 0px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}
/* Dashboard Color */
.text-blue-fjm {
  color: #323295;
}
.text-sea {
  color: #4ac8df;
}
.text-discord {
  color: #7289da;
}
.text-guava {
  color: #ff6f69;
}
.text-teal {
  color: #329999;
}
.text-amber {
  color: #ffcc5c;
}
.bg-sea {
  background-color: #4ac8df;
}
.bg-discord {
  background-color: #7289da;
}
.bg-guava {
  background-color: #ff6f69;
}
.bg-teal {
  background-color: #329999;
}
.bg-amber {
  background-color: #ffcc5c;
}
.btn-discord {
  background-color: #7289da;
  color: #ffffff;
}
.btn-discord:hover {
  background-color: #5b6dae;
  color: #ffffff;
}
.bg-rounded-bottom-light {
  background: #f8f9fa;
  border-radius: 0px 0px 16px 16px;
}