:root{
   --body-color: #fff;
  /* --body-color: linear-gradient(to bottom, #f8d5e0, #eccecb, #d9c8bd, #c6c1b6, #b7b9b3); */
  /* --nav-color: #088F8F; */
  --nav-color: #088F8F;
  --button-color: #088F8F;
  --button-border-color: #088F8F; 
  --bg-color: rgb(252, 245, 245);
  --primary-color: #edf2fc;
  --secondary-color: #212121; 
  --button-border-color: #088F8F;  
  --fill-color: #088F8F;  
  
}
.dark-theme{
  --body-color: #0a0a0a;
  --nav-color: #000;
  --button-border-color: rgb(212, 208, 208);
  --bg-color: #000;
  --fill-color: #0a0a0a; 
  --secondary-color: #088F8F; 
  --primary-color: #edf2fc;
}

body{
    margin: 0;
    display: flex;
 align-items: center;

}
input:focus {
  outline: none !important;
}
.input-text:focus{
  outline: none !important;
}
.mycontainer{
  background: bottom;
  
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); */
    
    
}


.input-group-icon{
    display: flex;
}
.input-group-prepend span{
    background-color: #088F8F;
}
.bggetter{
  background-color: var(--body-color) !important; 
  border-radius: 10px !important;
  box-shadow: 0 2px 25px rgb(0, 255, 191) !important;
}
.card{  
    display: flex;
    justify-content: center;
    align-items: center;   
    /* background-color: var(--body-color) !important;  */
}
.msec{
    display: flex;
    justify-content: center;
    align-items: center;
 
      /* background-color: var(--body-color);  */
}
.myhed{
color: #088F8F;
font-weight: 600;
padding-top: 20px;
margin-left: 2px;

}
.netter{
  color: rgb(0, 255, 191);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: small;
  font-weight: 200;
}
.timage{
  width: 2.75em !important;
  height: 2.40em !important;
  border: 1px solid #cac7c9de;
  border-radius: 2px;
  margin-right: -5px;
}
.myhed2{
  color: #088F8F;
  font-weight: 600;
  padding-top: 1px;
  padding-bottom: 30px;
  
  }
.input-group{
    padding: 5px;
    width: 200px;
}
.mygroup{
    display: flex;
}

.mygroups{
  display: block;
}

input[type="date"]{
    background-color: #088F8F;
    padding: 5px;
       font-family: "Roboto Mono",monospace;
    color: #ffffff;
    font-size: 14px;
    border: none;
    margin-right: 5px;
    outline: none;
        width: 100%;
        border-radius: 5px;
        
}
::-webkit-calendar-picker-indicator{
    background-color: #ffffff;
    
    cursor: pointer;
    border-radius: 3px;
}

#country_code{
  width: 85px !important;
  color: #088F8F;
}
.mybtn{
  background-color: #fff;
  color: #088F8F;
  border-width: 2px solid #088F8F !important;
}
button:before {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  border: 2px solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s;
  animation: 0.8s linear infinite rotate;
}
button.sending {
  pointer-events: none;
  cursor: not-allowed;
}
button.sending:before {
  transition-delay: 0.5s;
  transition-duration: 1s;
  opacity: 1;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* .chk{
    margin-top: 50px;
} */
.myhedd{
  padding-bottom: -10px;
}
.myhedd span{
  color: #088F8F;
     font-style: italic;
}
.light {
    --primary: #088F8F;
    --other: hsl(188, 89%, 56%);
  
    background: hsl(0, 0%, 98%);
  }
  
 
  

  
  /* label
  label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
  
    margin: 12px 0;
  
    cursor: pointer;
    position: relative;
  }
  
   */
 
  
  /* .design */
  .design {
    width: 16px;
    height: 16px;
  
    border: 1px solid var(--other);
    border-radius: 100%;
    margin-right: 4px;
  
    position: relative;
  }
  
  .design::before,
  .design::after {
    content: "";
    display: block;
  
    width: inherit;
    height: inherit;
  
    border-radius: inherit;
  
    position: absolute;
    transform: scale(0);
    transform-origin: center center;
  }
  
  .design:before {
    background: var(--other);
    opacity: 0;
    transition: .3s;
  }
  
  .design::after {
    background: var(--primary);
    opacity: .4;
    transition: .6s;
  }
  
  
  /* .text */
  .text {
    color: var(--other);
    font-weight: bold;
  }
  
  
  /* checked state */
  input:checked+.design::before {
    opacity: 1;
    transform: scale(.6);
  }
  
  
  /* other states */
  input:hover+.design,
  input:focus+.design {
    border: 1px solid var(--primary);
  }
  
  input:hover+.design:before,
  input:focus+.design:before {
    background: var(--primary);
  }
  
  input:hover~.text {
    color: var(--primary);
  }
  
  input:focus+.design::after,
  input:active+.design::after {
    opacity: .1;
    transform: scale(2.6);
      outline: none !important;
  }

  @media (max-width: 320px){


 
 .design {
    width: 1px;
    height: 16px;
  
    border: 1px solid var(--other);
    border-radius: 100%;
     
    position: relative;
  }

  .myhed{
    color: #088F8F;
    font-weight: 600;
    padding-top: 30px;
    margin-left: 5px;
    
    }
    .lstyle{
      margin-left: -10px !important;
    }
    .rstyle{
      
      margin-left: -30px;
    }
    
  }
  @media (max-width: 375px){

    input[type="date"]{     
           
           margin-right: 1px;
           width: 140px !important;
   }

 
 .design {
    width: 1px;
    height: 16px;
  
    border: 1px solid var(--other);
    border-radius: 100%;
     
    position: relative;
  }

  .myhed{
    color: #088F8F;
    font-weight: 600;
    padding-top: 30px;
    margin-left: 5px;
    
    }
    .lstyle{
      margin-left: -10px !important;
    }
    .rstyle{
      
      margin-left: -30px;
    }
    
  }
  @media (max-width: 600px){

    input[type="date"]{     
           width: 350px; 
           margin-right: 5px;
   }


 .design {
    width: 1px;
    height: 16px;
  
    border: 1px solid var(--other);
    border-radius: 100%;
    margin-right: 4px;
  
    position: relative;
  }
  }

  @media (max-width: 900px){

    input[type="date"]{     
           width: 170px; 
           margin-right: 5px;
   }
   .design {
    width: 1px;
    height: 16px;
  
    border: 1px solid var(--other);
    border-radius: 100%;
    margin-right: 4px;
  
    position: relative;
  }

  }