html {
  height:100%;
}

body {
  margin:0;
  background: url(../bg.webp) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #666666 50%, #000000 50%);
  bottom:0;
  left:-50%;
  opacity:.2;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.content {

  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

.content img {

  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
}
.content img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.content img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  cursor: pointer;
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}
	
	
.container {
  padding: 2rem 0rem;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 400px;
  }
  .modal-dialog .modal-content {
    padding: 1rem;
  }
}
.modal-header .close {
  margin-top: -1.5rem;
}

.form-title {
  margin: -2rem 0rem 2rem;
}

.btn-round {
  border-radius: 3rem;
}

.delimiter {
  padding: 1rem;
}

.animate-bottom {
  position: relative;
  animation: animatebottom 0.2s;
}

@keyframes animatebottom {
  from {
	bottom: -250px;
	opacity: 0;
  }

  to {
	bottom: 0;
	opacity: 1;
  }
}

#konfirmaslogin .modal-dialog {
position:fixed;
top:auto;
right:auto;
left:auto;
bottom:0;
height:30%;
}  

#konfirmaslogin .modal-body {
border-radius: 20px 20px 0 0 !important;
}
#konfirmaslogin .modal-content {
border-radius: 20px 20px 0 0 !important;
}

#loaderMedical {
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  z-index: 1061;  
  background-color: #F8F9FA;
}

@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.loaderMedical {
    position: relative;
    margin: auto;
    box-sizing: border-box;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transform-origin: 50% 50%;
    transform: perspective(200px) rotateX(66deg);
    animation: spinner-wiggle 1.2s infinite;
  }
  .loaderMedical:before,
  .loaderMedical:after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 4px solid #0000;
    animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
      spinner-fade 1.2s linear infinite;
  }
  .loaderMedical:before {
    border-top-color: #00b1eb;
  }
  .loaderMedical:after {
    border-top-color: #00ebb7;
    animation-delay: 0.4s;
  }

  @keyframes spinner-spin {
    100% { transform: rotate(360deg)}
  }
  @keyframes spinner-fade {
    25%, 75% { opacity: 0.1}
    50% { opacity: 1 }
  }