body,
html {
  height: 100%;
  background-color: #333333;
  margin: 0;
}

.image-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-text {
  width: 50vw;
}

@media screen and (min-width: 1024px) {
  .logo-text {
    width: 19vw;
  }
}

.is-hidden {
  display: none;
}

[v-cloak] {
  display: none !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.selected {
  opacity: 0.7;
}
.bg-dark {
  background-color: #262426 !important;
}
.bg-light-green {
  background-color: #70db70 !important;
}

.bg-red {
  background-color: #ff704d !important;
}

.text-light-gray {
  color: #d1d1d1;
}

@media (min-width: 993px) {
  .fixed-right-bar {
    height: 100% !important;
    margin-top: 3.5em;
    margin-left: 66.66666%;
    height: 100% !important;
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }
}

.modal-content {
  background-color: #333 !important;
}

.close {
  text-shadow: none !important;
}

.shaker {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.text-purple {
  color: #6a0dad;
}

a.text-purple:hover,
a.text-purple:focus {
  color: #4d097e;
}

.bg-purple {
  color: #fff;
  background-color: #6a0dad;
}

a.bg-purple:hover,
a.bg-purple:focus {
  background-color: #4d097e;
}

.btn-purple {
  color: #ffffff;
  background-color: #6a0dad;
  border-color: #5b0b95;
}

.btn-purple:focus,
.btn-purple.focus {
  color: #ffffff;
  background-color: #4d097e;
  border-color: #13021f;
}

.btn-purple:hover {
  color: #ffffff;
  background-color: #4d097e;
  border-color: #39075c;
}

.btn-purple:active,
.btn-purple.active,
.open > .dropdown-toggle.btn-purple {
  color: #ffffff;
  background-color: #4d097e;
  background-image: none;
  border-color: #39075c;
}

.btn-purple:active:hover,
.btn-purple.active:hover,
.open > .dropdown-toggle.btn-purple:hover,
.btn-purple:active:focus,
.btn-purple.active:focus,
.open > .dropdown-toggle.btn-purple:focus,
.btn-purple:active.focus,
.btn-purple.active.focus,
.open > .dropdown-toggle.btn-purple.focus {
  color: #ffffff;
  background-color: #39075c;
  border-color: #13021f;
}

.btn-purple.disabled:hover,
.btn-purple[disabled]:hover,
fieldset[disabled] .btn-purple:hover,
.btn-purple.disabled:focus,
.btn-purple[disabled]:focus,
fieldset[disabled] .btn-purple:focus,
.btn-purple.disabled.focus,
.btn-purple[disabled].focus,
fieldset[disabled] .btn-purple.focus {
  background-color: #6a0dad;
  border-color: #5b0b95;
}

.btn-purple .badge {
  color: #6a0dad;
  background-color: #ffffff;
}

.panel-purple {
  border-color: #6a0dad;
}

.panel-purple > .panel-heading {
  color: #ffffff;
  background-color: #6a0dad;
  border-color: #6a0dad;
}

.panel-purple > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #6a0dad;
}

.panel-purple > .panel-heading .badge {
  color: #6a0dad;
  background-color: #ffffff;
}

.panel-purple > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #6a0dad;
}

.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-75 {
  opacity: 0.75;
}
.darken {
  box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, 0.1);
}
.small-text {
  font-size: 0.75rem;
}

.color-hotness {
  color: #ff3860 !important;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}
.sidebar {
  min-height: 100vh;
  padding-top: 1rem;
}

.sidebar .nav-link.active {
  font-weight: bold;
  color: #007bff;
}
.content {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}
.content.collapsed {
  margin-left: 250px;
}
.sidebar {
  position: fixed;
  z-index: 1045;
  transform: translateX(-250px);
  transition: transform 0.3s ease;
}
.sidebar.show {
  transform: translateX(0);
}
.navbar-toggler-icon {
  height: auto;
  width: auto;
}
/* For iOS devices */

.ios-specific .download-buttons .ios-button {
  display: flex !important;
}

.ios-specific .download-buttons .android-button {
  display: none !important;
}

/* For Android devices */

.android-specific .download-buttons .android-button {
  display: flex !important;
}

.android-specific .download-buttons .ios-button {
  display: none !important;
}

.desktop-specific .download-buttons .ios-button,
.desktop-specific .download-buttons .android-button {
  display: flex !important;
}