@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

:root {

  --hexBlue: #3575BB;
  --sendiDarkBlueHex: #28356C;

  --hexMlGray: #AFB4BF;
  --hexMlLightGray: #efefef;

  --sendiDarkBlue: #28356C;
  --sendiBlue: #3575BB;
  --sendiPaleBlue: #e1edfd;

  --sendiPurple: #9996cf;
  --sendiDarkPurple: #8986cf;
  --sendiPalePurple: #e9e6ff;

  --sendiLime: #4dc1b5;
  --sendiDarkLime: #3db1b5;
  --sendiPaleLime: #a4d9cd;
  --sendiTransparentLime: #a4d9cd50;

  --sendiGray: #AFB4BF;
  --sendiPaleBlueGray: #d1d5db;
  --sendiLightGray: #f3f3f3;

  --sendiDarkGray: #333333;

  --sendiOrange: #F36806;
  --sendiDarkOrange: #D34806;

}

body { 
  background-attachment: fixed;
  height:100vh;
  background-image: url(https://sendicares.nl/wp-content/uploads/2022/11/foto-wond-2-947x1024.jpeg);
  background-size: cover;
  background-position: center center;
  backdrop-filter: blur(10px) ;
  margin: 0;
    height: 100vh;
    overflow: hidden;
    padding-top:0;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 14px;
  }
  
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

  .aligner {
    width:100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    ackground: linear-gradient(335deg, rgba(235,235,255,1) 0%, rgba(235,235,255,0.9) 25%,rgba(235,235,255,0.75) 50%, rgba(235,235,255,1) 90%, rgba(235,235,255,1) 100%);
    background: linear-gradient(335deg, rgba(15,15,35,0.8) 0%, rgba(15,15,35,0.7) 25%,rgba(15,15,35,0.55) 50%, rgba(15,15,35,0.8) 90%, rgba(15,15,35,0.8) 100%);
  }
  
  .wrapper{
    width: 420px; max-width:90vw;
    padding: 30px;
    border-radius: 12px;
    border:6px solid white;
    background-color: rgba(250, 250, 255, 1);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(220,220,220,1) 100%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    
    
  
  }
  
  .slideUp {
    opacity: 0;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  #footer {
    position: fixed;
    bottom:0px;
    height:70px;
    width:100vw;
    background-color: rgba(255,255,255,0.7);
  }
  
  label {
    margin-bottom:4px;
  }
  
  @keyframes fadeInAnimation {
      0% {
          opacity: 0;
          transform: translateY(40px);
      }
      100% {
          opacity: 1;
          transform: translateY(0);
       }
  }

  .btn-primary {
    background-color: var(--sendiOrange) !important;
    border-color: var(--sendiOrange) !important;
  }
  
  .btn-primary:hover {
    background-color: var(--sendiDarkOrange) !important;
    border-color: var(--sendiDarkOrange) !important;
  }