body {
  user-select: none;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  display: grid;
  background-color: #454d55;
  /* background-color: black;
  background-image: url("https://media.giphy.com/media/26tn33aiTi1jkl6H6/giphy.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
  min-height: 100vh;
}



.div-main {
  overflow: hidden;
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  color: #343a40;
}

.inputbox input {
  background-color: #c81f1c;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
}

.title {
  color: gray;
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
}

.tile-inf {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  color: #006a8f;
}

.title-inity {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  color: #6bb8c0;
}

.text-bottom {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  color: gray;
}

.text-bottom-main {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  color: #c81f1c;
  cursor: pointer;
}

div > div > div.gap-3 > i {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  font-size: 1.5rem;
}

div > div > div.gap-3 > i:hover {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  cursor: pointer;
}

div > div > div.gap-3 > i:first-child {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  color: dodgerblue;
}

div > div > div.gap-3 > i:nth-child(2) {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  color: dodgerblue;
}

div > div > div.gap-3 > i:last-child {
  background-color: #343a40;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  color: gray;
}

.div-right {
  color: #fff;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  background-color: #343a40;
  background-image: url("../img/Advanced1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
  position: relative;
}

.div-right::after {
  content: "";
  position: absolute;
  max-width: 1920px;
  margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
  background-color: #000;
  inset: 0;
  z-index: -1;
  opacity: 0.2;
}

@media (max-width: 767px) {
  .div-right {
    background-color: #343a40;
    /* background-color: #343a40; */
    max-width: 1920px;
    margin: 0 auto; /* This centers the container if the viewport is wider than 1920px */
    display: none !important;
  }
}

.colored-toast.swal2-icon-success {
  background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
  background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
  background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
  background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
  background-color: #87adbd !important;
}

.colored-toast .swal2-title {
  color: white;
}

.colored-toast .swal2-close {
  color: white;
}

.colored-toast .swal2-html-container {
  color: white;
}