.gradient-custom-2 {
    /* fallback for old browsers */
    background: #f39a1c;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right,#f39a1c, #ee7724,  #cc611e,#000);
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #f39a1c, #ee7724,  #cc611e,#000);
    }
    
    @media (min-width: 768px) {
    .gradient-form {
    height: 100vh !important;
    }
    }
    @media (min-width: 769px) {
    .gradient-custom-2 {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
    }
    }

    #scrollableBox {
        height: 50vh;
        overflow-y: auto;
        white-space: pre-wrap;
      }

/* From Uiverse.io by AqFox */ 
.spinner {
  width: 44px;
  height: 44px;
  animation: spinner-y0fdc1 2s infinite ease;
  transform-style: preserve-3d;
 }
 
 .spinner > div {
  background-color: rgba(255, 106, 0, 0.4);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 2px solid black;
 }
 
 .spinner div:nth-of-type(1) {
  transform: translateZ(-22px) rotateY(180deg);
 }
 
 .spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
 }
 
 .spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
 }
 
 .spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
 }
 
 .spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
 }
 
 .spinner div:nth-of-type(6) {
  transform: translateZ(22px);
 }
 
 @keyframes spinner-y0fdc1 {
  0% {
   transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }
 
  50% {
   transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }
 
  100% {
   transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
 }

 .loader {
  position: fixed;
  left: 50%;
  top:50%;
  z-index: 200;
  scale:2
 }