@import url("https://fonts.googleapis.com/css?family=Numans");

:root {
  --color: #5500ffff;
  --color-hover: #ed6a1ff;
}


html,
body {
  height: 100%;
  font-family: "Numans", sans-serif;
}


.social_icon span {
  font-size: 60px;
  margin-left: 10px;
  color: var(--color);
}

.social_icon span:hover {
  color: white;
  cursor: pointer;
}

.card-header h3 {
  color: white;
}

.social_icon {
  position: absolute;
  right: 20px;
  top: -45px;
}

.input-group-prepend span {
  width: 50px;
  background-color: var(--color);
  color: black;
  border: 0 !important;
}

input:focus {
  outline: 0 0 0 0 !important;
  box-shadow: 0 0 0 0 !important;
}

.remember {
  color: white;
}

.remember input {
  width: 20px;
  height: 20px;
  margin-left: 15px;
  margin-right: 5px;
}

.login_btn {
  color: black;
  background-color: var(--color);
  width: 100px;
}

.login_btn:hover {
  color: black;
  background-color: white;
}

.links {
  color: white;
}

.links a {
  margin-left: 4px;
}

@font-face {
  font-family: futura-medium;
  src: url("../fonts/FuturaMedium.otf") format("opentype");
}

label {
  font-family: sans-serif;
}

a {
  color: var(--color);
}

a:hover {
  color: var(--color-hover);
}

nav {
  box-shadow: 5px 10px 18px #ededed;
}

input,
textarea,
select {
  background-color: #f1f1f1 !important;
}

tbody tr {
  font-size: 12px;
}

.required {
  color: red;
}

.bg-light {
  background-color: white !important;
}

.card {
  margin-top: 40px; /* auto */
  margin-bottom: 40px; /* auto */
  width: 650px;
  border: none;
}

.title,
.modal-title {
  font-family: sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color);
  margin-bottom: 20px;
}

.subtitle {
  font-weight: bold;
  color: var(--color);
  padding-top: 10px;
  padding-bottom: 15px;
}

.form-label {
  font-weight: bold;
}

.form-check-input:checked {
  border-color: var(--color) !important;
  background-color: var(--color) !important;
}

.modal-title {
  font-size: 18px !important;
}

.modal-header,
.modal-footer {
  border: none;
}

.btn-primary {
  border-radius: 20px;
  border-color: var(--color);
  background-color: var(--color);
}

.btn-secondary {
  border-radius: 20px;
  border-color: #e7423b;
  background-color: #e7423b;
}

.btn-link {
  color: var(--color);
}

.btn-primary:hover {
  border-color: var(--color);
  background-color: var(--color);
}

.btn-secondary:hover {
  border-color: #a61913;
  background-color: #a61913;
}

.btn-link:hover {
  color: #ffe32f;
}

.btn-file {
  border-radius: 5px;
  background-color: var(--color);
  color: #f1f1f1;
}

.label-file {
  padding-top: 7px;
  padding-left: 10px;
}

#loading {
  display: flex;
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(192, 192, 192, 0.5);
  background-image: url("https://i.stack.imgur.com/MnyxU.gif");
  background-repeat: no-repeat;
  background-position: center;
}


/** SWAL **/
.slide-vertical {
  overflow: hidden;
}

.slide-vertical ul,
.slide-vertical li {
  list-style: none;
  font-size: 1.3rem !important;
  margin: 0 0 0 0 !important;
  padding: 0 0 0 0 !important;
}

.slide-vertical ul {
  width: 100%;
  height: 40px;
  position: relative;
  text-align: center;
}

.elements-2 ul {
  animation: slide2 5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.elements-3 ul {
  animation: slide3 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.slide-vertical li {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 200%;
  line-height: 40px;
  font-size: 20px;
}

.slide-vertical li:first-child {
  top: 100%;
}

.elements-2 li:last-child {
  top: 200%;
}

.elements-3 li:last-child {
  top: 300%;
}

@keyframes slide2 {
  0% {
      transform: translateY(0%);
  }

  5%,
  45% {
      transform: translateY(-100%);
  }

  55%,
  90% {
      transform: translateY(-200%);
  }

  100% {
      transform: translateY(-300%);
  }
}

@keyframes slide3 {
  0% {
      transform: translateY(0%);
  }

  6%,
  30% {
      transform: translateY(-100%);
  }

  40%,
  60% {
      transform: translateY(-200%);
  }

  70%,
  90% {
      transform: translateY(-300%);
  }

  100% {
      transform: translateY(-400%);
  }
}

.spinner-container {
  padding-top: 1rem !important;
}

#navbar  {
  background: linear-gradient(90deg, #0C0C0D 2.74%, #007CB0 96.64%);
}