/* 
* Noto Kufi Arabic (Arabic)
*/
@import url('//fonts.googleapis.com/earlyaccess/notokufiarabic.css');

body {
  font-family: 'Noto Kufi Arabic', sans-serif;
}
.custombody {
  margin: auto;
  overflow: auto;
  background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
}

@keyframes gradient {
  0% {
      background-position: 0% 0%;
  }
  50% {
      background-position: 100% 100%;
  }
  100% {
      background-position: 0% 0%;
  }
}

.wave {
  background: rgb(255 255 255 / 25%);
  border-radius: 1000% 1000% 0 0;
  position: fixed;
  width: 200%;
  height: 12em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  animation: wave 18s linear reverse infinite;
  opacity: 0.8;
}

.wave:nth-of-type(3) {
  bottom: -2.5em;
  animation: wave 20s -1s reverse infinite;
  opacity: 0.9;
}

@keyframes wave {
  2% {
      transform: translateX(1);
  }

  25% {
      transform: translateX(-25%);
  }

  50% {
      transform: translateX(-50%);
  }

  75% {
      transform: translateX(-25%);
  }

  100% {
      transform: translateX(1);
  }
}

@-webkit-keyframes introduceBadge {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes introduceBadge {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes pulseBadge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulseBadge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes pulseBadge2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulseBadge2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.custombadge {
  -webkit-animation: introduceBadge 1s linear 0s 1 both;
          animation: introduceBadge 1s linear 0s 1 both;
  background: rgba(0, 113, 246, 0.2);
  border-radius: 50%;
  height: 50px;
  perspective: 600px;
  position: relative;
  width: 50px;
}
.custombadge:before, .custombadge:after {
  -webkit-animation: pulseBadge 3s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite both;
          animation: pulseBadge 3s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite both;
  border: 2px dashed #0071f6;
  border-radius: inherit;
  bottom: -16px;
  content: "";
  left: -16px;
  opacity: 0.2;
  position: absolute;
  right: -16px;
  top: -16px;
}
.custombadge:after {
  -webkit-animation-name: pulseBadge2;
          animation-name: pulseBadge2;
  bottom: -32px;
  left: -32px;
  opacity: 0.1;
  right: -32px;
  top: -32px;
}

@-webkit-keyframes introduceLabel {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotateY(-1800deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(20deg);
  }
}

@keyframes introduceLabel {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotateY(-1800deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(20deg);
  }
}
@-webkit-keyframes rotateLabel {
  0% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateY(-20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
}
@keyframes rotateLabel {
  0% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateY(-20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
}
.custombadge .badge__label {
  -webkit-animation: introduceLabel 2s cubic-bezier(0.19, 1, 0.22, 1) 1s 1 both, rotateLabel 5s linear 3s infinite;
          animation: introduceLabel 2s cubic-bezier(0.19, 1, 0.22, 1) 1s 1 both, rotateLabel 5s linear 3s infinite;
  color: #0071f6;
  font: 900 20px/1 -apple-system, BlinkMacSystemFont;
  left: 50%;
  position: absolute;
  text-align: center;
  text-shadow: 0px 4px 8px rgba(0, 113, 246, 0.2);
  top: 50%;
  transform: translate(-50%, -50%);
}
.loader.simple-loader {
  background-color: #F5F6FA;
  height: 100%;
  width: 100%;
  position: fixed;
  place-content: center;
  overflow: hidden !important;
  right: 0px;
  z-index: 1250;
}
.loader.simple-loader .loader-body {
  /* background: url(../images/loader.gif) no-repeat scroll center center; */
  -webkit-background-size: 20% 20%;
          background-size: 20%;
  width: 100%;
  height: 100%;
  position: relative;
}

.table tr td, .table tr th {
  vertical-align: middle!important;
}
.form-signin {
  max-width: 330px;
  padding: 1rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
label.error {
  font-size: 12px;
  color: #f00;
}
.home-intro {
  min-height: 53vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0075ff;
}
.waves {
  position: relative;
  width: 100%;
  height: 122px;
  top: -122px;
  /* Fix For Safari Gap */
  min-height: 100px;
  max-height: 150px;
}
.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

.custombtn {
  display: inline-block;
  background: transparent;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  padding: 20px 30px;
  border: 3px solid #fff;
  border-radius: 5px;
  box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all ease-in-out 300ms;
}
.custombtn:hover {
  color: #fff;
  background-color: #4285f4;
  box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
  transform: translate(0px, -5px) scale(1.1);
}