/* for form */

.inputBox .label_form{
     flex-grow: 1;
     min-width:13%;
     width:13%;
     width: 100%;
   }
   .label_form{
   
     width:100%;
   }
   .inputTextBox,.dropDown_form,.radioGroup,.inputTextAreaBox{
     flex-grow: 10;
     min-width:60%;
   }

   .inputTextAreaBox{
     resize:none;
     color:black;
   }
   
   .fixedInputBox{
     display:flex;
     flex-direction: row;
     flex-shrink: 0;
     flex-grow: 1;
     align-content: space-between;
     justify-content: space-between;
     flex-wrap:wrap;
     width:100%;
     
   }
   
   .fixedInputBoxContainer{
     width:80%;
     display: flex;
     flex-direction: column;
     align-items: start;
   
   }
   
   .formWrapper{
     width:100%;
     display: flex;
     flex-direction: column;
     align-items: end;
   }
   
   .inputBox{
     display: flex;
     flex-direction: row;
     border-radius: 20px;
     justify-content: space-evenly;
     width:auto;
     flex-wrap:wrap;
     
     align-items: center;
     justify-items: center;
     align-content: center;
     padding:1rem 0rem;
   
   }
   
   
   
   .fileInputBox .label_form{
     flex-grow: 1;
     width:20%;
   }
   .fileInputBox{
     display:flex;
     flex-direction: row;
     justify-content: space-evenly;
     width:100%;
     gap: 5rem;
     align-items: center;
   }
   
   
   
   
   /* form button  */

/*    
   .form_submit_btn input:active{
     border-color: transparent;
   }
   .form_submit_btn input,.form_submit_btn div{
     border-radius: 10px;
   
     cursor: pointer;
     padding:10px 50px;
     border:1px solid ;

    margin:1rem;
    transition: all 0.1s linear;
   }
   
   .newAcc div{
     color:darkgrey;
   }

   .primaryBtn input:active{
    color:white;
   }
   .secondaryBtn input:active{
    color:black;
   }
   
   .primaryBtn input{
    border:1px solid black;
    background-color: #111111;
    color:white;
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, .2), 0 0px 10px 0 rgba(0, 0, 0, .2);

   }

   .secondaryBtn input{
    
    border:1px solid rgba(0, 0, 0, 1);
    background-color:transparent;

   }

   .tertiaryBtn input{
      border-color: black;
      background-color:transparent;
      box-shadow: none;
      text-decoration: underline ;
    }
   .secondaryBtn input:active{
    box-shadow: none;
   }

       
    .secondaryBtn input:hover{
      box-shadow: 0 0px 8px 0 rgba(0, 0, 0, .2), 0 0px 10px 0 rgba(0, 0, 0, .2);

    }
    .tertiaryBtn input:hover{
      border-color: crimson;
      color:crimson;
      text-decoration: underline crimson;
    } */


   /* form button  */
   
   

.inputBox input{
     border:1px solid transparent;
     padding:1rem 1rem;
     border-radius: 0.4rem;
    margin-right:1rem;
      border:1px solid black;
    width:100%;
     
}
input::placeholder{
  color:#121e;
}
      
.tinyInputBox{
   
     
   }
input, select, textarea{
    color: #000000;
}

textarea:focus, input:focus {
    color: #1b0e0e;
}
   
   .inputTextBox{
     transition: 0.1s linear;
     padding: 0rem 1rem;
     
   }
   .inputTextBox:focus{
     transition: 0.1s linear;
   }
   
   
   .Full{
     width:100%;
   }
   .partialFull{
     width:95%;
   }
   .Mid{
     width: 50%;
   }
   .PartialMid{
     width: 80%;
   }
   
   /*  bar */
   .form_container{
     display: flex;
     flex-direction: column;
     justify-items: center;
     justify-content: center;
     align-items:center;
     align-content: center;
     min-width:80vw;
     gap:50px;
   }
   
   
   .form_pair{
     display: flex;
     border-radius: 1rem;
     flex-wrap: wrap;
     width: 100%;
    justify-content: space-between;
   }
   .form_pair .inputBox{
     border-radius: 0px;
     background-color: transparent;
     flex-grow: 1;

   }
   


   .required label::after{
    content: "*";
    color:crimson;
    font-weight: bold;
    margin:0px 1rem;
   }










   .radioGroup{
     display:flex;
   
     flex-wrap: wrap;
     justify-content: space-evenly;
   }
   .checkmark{
     min-height:clamp(1rem,2vw,2rem);
     width:clamp(1rem,2vw,2rem);
     border-radius: 25px;
     background-color:#bcb;
     display: flex;
     justify-content: center;
   }
   .container input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
   }
   
   .container:hover input ~ .checkmark {
     background-color: #aac;
   }
   /* When the radio button is checked, add a blue background */
   .container input:checked ~ .checkmark {
     background-color: #2196F3;
   }
   /* Create the indicator (the dot/circle - hidden when not checked) */
   .checkmark:after {
     content: "";
     position: absolute;
     display: none;
   }
   /* Show the indicator (dot/circle) when checked */
   .container input:checked ~ .checkmark:after {
     display: block;
     justify-self: center;
     align-self: center;
   }
   /* Style the indicator (dot/circle) */
   .container .checkmark:after {
   
   
        width: clamp(.5rem,.8vw,1.5rem);
        height: clamp(.5rem,.8vw,1.5rem);
        border-radius: 50%;
        background: white;
   }
   



   @media (max-width: 768px) {
    .product-container {
      grid-template-columns: repeat(2, 1fr); /* Keep 2 columns */
      grid-template-rows: repeat(2, 1fr);    /* Adjust to 2 rows for smaller screens */
    }
  }
  
  /* For small screens (mobile) */
  @media (max-width: 480px) {
    .product-container {
      grid-template-columns: 1fr; /* 1 column for mobile */
      grid-template-rows: repeat(3, 1fr); /* 3 rows */
    }
  }