.modal {
    display: none;
    position: fixed;
    z-index: 3333333; /* Sit on top */
    padding-top: 100px; /* Location of the  box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.2);
  
  }

  .modal2 {
    display: none;
    position: fixed;
    z-index: 3333333; /* Sit on top */
    padding-top: 100px; /* Location of the  box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.2);
  
  }
  
  /* Modal Content */
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin:  40px auto;
    padding: 20px;
    max-width: 800px;
    border-radius: 0.5rem;
    font-family: Helvetica,Arial,sans-serif;
    box-shadow: 0 2px 8px #00000054;
  }
  
  @media (max-width: 900px) {
    .modal-content {
      width: 95%;
    }
  }
  
  .modal-contentt{
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    padding: 20px;
    box-shadow: 0 2px 8px #00000054;
    font-family: Helvetica,Arial,sans-serif;
    border-radius: 0.5rem;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  
  @media (max-width: 900px) {
    .modal-contentt {
      width: 95%;
    }
  }
  
  /* The Close Button */
  #close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  #close:hover,
  #close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  @keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
  }
  

  .wal_title{
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-radius: .5rem;
    width: 100%;
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .wal_title>div:nth-child(1)>img{
    border-radius: 9999px;
    width: 3rem;
    max-width: 100%;
    height: auto;
    display: block;
  }
  .wal_title>div:nth-child(2){
    margin-left: .75rem;
    margin-right: .75rem;
      padding-top: .75rem;
      padding-bottom: .75rem;
  }
  .wal_title>div:nth-child(2)>h3{
  font-weight: 600;--tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity));
  }
  .wal_btn{
    height: 60px;
    justify-content: center;
    display: flex;
  }
  .wal_btn>button{
  border-bottom-width: 2px;--tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity));
  margin-left: .5rem;
  margin-right: .5rem;
  cursor: pointer;
  -webkit-appearance: button;
  background-color: transparent;
  font-size: 100%;
  background-image: none;
  padding: 1rem;
  border-style: solid;
  border:none;
  -webkit-appearance: button;
  }
  .wal_btn>button.active{
    border-bottom: 2px solid #0284c7;
  }
  .wal_outline{
    padding: .5rem;
    width: 100%;
    position: relative;
  }
  .wal_outline>textarea{
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
    transition-property: background-color,border-color,color,fill,stroke;
    outline: 2px solid transparent;
  outline-offset: 2px;--tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
  line-height: 1.5rem;
  font-size: 1rem;
  padding-left: .75rem;
  padding-right: .75rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
  --tw-bg-opacity: .5;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
  border-width: 1px;
  border-radius: .25rem;
  resize: none;
  width: 100%;
  --tw-ring-inset: var(--tw-empty, );
  border-style: solid;
  }
  .wal_outline>input[type='password']{
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
    transition-property: background-color,border-color,color,fill,stroke;
    outline: 2px solid transparent;
  outline-offset: 2px;--tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
  line-height: 1.5rem;
  font-size: 0.9rem;
  padding-left: .75rem;
  padding-right: .75rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
  --tw-bg-opacity: .5;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
  border-width: 1px;
  border-radius: .25rem;
  resize: none;
  width: 100%;
  --tw-ring-inset: var(--tw-empty, );
  border-style: solid;
  }
  
  .wal_outline>label{
    font-size: .875rem;
    --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
  }
  .wal_proceed>button{
    display: block;
  margin-top: 1rem;--tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
   padding-top: .5rem;
    padding-bottom: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity));
  border-radius: .5rem;
  width: 100%;
  font-size: 100%;
  border-style: solid;
  border-color: currentColor;
  -webkit-appearance: button;
  }
  
  .confam{
  /* padding: 0 auto; */
  align-content: center;
  justify-content: center;
  }
  .confam>img{
    max-width: 100%;
    height: 3rem;
    align-content: center;
    padding: 0 auto;
  }
  .confam2{
    /* border: 1px solid lightgreen; */
    font-size: 0.9rem;
  }
  .confam2>img{
    max-width: 100%;
    height: 3rem;
    align-content: center;
    padding: 0 auto;
  }

  .spinner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.3)
  }
  
  .spinner>img{
    width: 70px;
  }

  .finally{
    display: none;
    position: relative;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .final_text{
    width: auto;
    padding: 15px;
    margin: 0px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 1.5);
  }
  
  .final_text_focus{
    width: 100%;
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    align-items: center;
    padding: 5px;
  }
  
  /* .final_text_focus2{
    display: flex;
    flex-flow: row;
    width: 100%;
    justify-content: space-around;
    padding: 2px;
  } */
  
  .focus_left{
    background-color: rgba(255, 255, 255, 0.8)
    /* animation: none; */
    /* border-color: #ffffff; */
    /* transition: border 500ms ease-out;
    border: 3px solid rgba(0, 0, 0, 0.2);
    position: relative;
    display: inline-block; */ 
  }
  
  .focus_left::after{
    border-radius: 50%;
    width: 30%;
    height: 50px;
    
  }

  .wrapper{
    /* height:100vh; */
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: rgba(255, 255, 255, 0.8);
  }
  .checkmark__circle{
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
  }
  .checkmark{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
  }
    
    .checkmark__check{
      transform-origin: 50% 50%;
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
    }
    @keyframes stroke{
      100%{stroke-dashoffset: 0}
    }
    @keyframes scale{
      0%, 
      100%{transform: none}
      50%{transform: scale3d(1.1, 1.1, 1)}
    }
      
    @keyframes fill{
      100%{box-shadow: inset 0px 0px 0px 30px #7ac142}
    }
  .focus_right{
    display: flex;
    flex-direction: column;
    padding-left: 10px;
  }
  .focus_right{
    display: flex;
    flex-direction: column;
    padding-left: 10px;
  }
  .focus_right>h3{
    font-weight: 500;
    margin: 5px 0px 0px 5px;
    font-size: 25px;
    color: #424242;
  }
  .focus_right>p{
    color: rgb(117, 117, 117);
    font-size: 14px;
    margin: 5px;
  }