.preloaderImg{
	height: 50px;
}

.hide{
	display: none;
}

.hide-me {
    visibility: hidden;
    display: none;
}
.show-me{
    visibility: visible;
}
.border{ 
    border: 2px solid red !important;
}

.success{
    background-color:green; color:#fff !important;
}
.error{
    background-color:red; color:#fff;
}
.dragDrop{
    width: 200px;
    height: 150px;
    border: 1px dashed slategrey;
}

#mainDivGratingOD{
    gap: 10px;
    display: grid;
}
.gratingOutsideDimensions{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 10%;
    gap: 20px;
}


a {
    width: 100%;
    height: 100%;}



        .btnDiv{
            display: flex;
            justify-content: right;
            gap: 10px;
        }
.button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; 
    color: #fff;
    border-radius: 6px;
    border: none;
    font-size: 16px;
    padding: 10px 20px;
    text-decoration: none;
    cursor:default;
    background-color: #192355;
	    justify-content: center;
    align-items: center;
}



        .btn-success {
            background: #055309;
        }
        .btn-danger {
            background: #530505;
        }

        /* #fileslistid ul li{
            margin-bottom: 20px;
        } */

        #filesListId ul li .button{
            padding: 4px 4px 0 4px;
            background: #530505;
        }

        .accent{
            color: #4679BD;
            font-weight: bold;
        }
        .danger{
          color:#e50e0e;
        }


        .formBlock{
            
            margin-top: 10px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            font-size: 1.2rem;
        }


        .formBlock label{
            display: inline-block;
            width: 100%;
            color: #192355;
            font-weight: bold;
            
        }
        .txt-fields{
            width: 100%;
            min-height: 40px;
            border: 1px solid #ccc;
            padding: 10px;
            font-size: 1.1rem;
        }

        .formBlock textarea{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
                 box-sizing: border-box;
                 width: 100%;
			    font-size: 1.2rem;
    			padding: 10px;
        }

        .contact-heading{
            color: #428aa9;
            font-size: 1.4rem;
            margin-top: 20px;
        }
        .formSubmit{
                display: flex;
        justify-content: right;
        margin-top: 20px;

        }
        .radio label {
            width: auto;
            margin-right: 20px;
            padding: 5px;
        
        }

















        #drop-zone {
            width: 100%;
            min-height: 150px;
            border: 3px dashed rgba(0, 0, 0, .3);
            border-radius: 5px;
font-family: sans-serif;
            position: relative;

            display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 1.6rem;
    font-weight: 500;
          }
          #drop-zone input {
            width: 100%;
            min-height: 150px;
            position: absolute;
            cursor: pointer;
            left: 0px;
            top: 0px;
            opacity: 0;
          }
          /*Important*/
          
          #drop-zone.mouse-over {
            border: 3px dashed rgba(0, 0, 0, .3);
            color: #7E7E7E;
          }

          .fileList{
            display: flex;
            gap: 10px;
            padding: 10px 0;
            justify-content: space-between;
          }
          
          .fileSize{
            font-size: 1rem;
            font-style: italic;
            color: chocolate;
            margin-left: 5px;
          }

.checkBoxes{
   
    display: flex;margin-top: 10px;margin-left: 5px; 
}
.checkBoxes input{
    margin-right: 15px;
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.8); /* IE */
  -moz-transform: scale(1.8); /* FF */
  -webkit-transform: scale(1.8); /* Safari and Chrome */
  -o-transform: scale(1.8); /* Opera */
  transform: scale(1.8);
    
}





              
/************************************************************************************

MEDIA QUERIES

*************************************************************************************/



/* xs  */
@container container (min-width: 475px) {
    .container {
      /* border: 2px solid green; */
    }
  } /*end xs */
  
  /* small */
  @container container (min-width: 640px) {
    .container {
      /* border: 2px solid yellow; */
    }

  }
  /* small end */
  
  /*   medium */
  @container container (min-width: 768px) {

    .formBlock{        
        grid-template-columns: 1fr 1fr;
        width: 70%;        
    }

    .formBlock-1col{
        grid-template-columns: 1fr;
    }
    .formBlock-3col{
        grid-template-columns: 1fr 1fr 1fr;
        
    }
    .formBlock-4col{
        grid-template-columns: 1fr 1fr 1fr 10%;
        
    }
    .formBlock-4col-rows {
      grid-template-columns: 15% 15% 1fr 10%;
  }

    .formBlock-5col-rows {
      grid-template-columns: 5% 15% 15% 1fr 10%;
  }

  .formBlock-custom{
    grid-template-columns: 35% 29% 1fr;
  }

  .formBlock-customShape{
    grid-template-columns: 77% 1fr;
  }
  .formBlock-customOldGrating{
    grid-template-columns: 28% 1fr;
  }
  


    .formBlock-5col{
        grid-template-columns: 8% 10% 10% 18% 1fr 10%;
        
    }

    .formBlock-5col-OD{
      grid-template-columns: 10% 10% 18% 1fr 10%;
      
  }    


  }
  /* medium end */
  


  .mt-5{
    margin-top: 5px; margin-right: 5px;
  }

  .mt-20{
    margin-top: 20px;
  }
  .mb-20{
    margin-bottom: 20px;
  }
  .mb-30{
    margin-bottom: 30px;
  }
  .mt-30{
    margin-top: 30px;
  }



  /*
  errors
  */

  .errorInput{
    border: 2px solid red;
  }

  .submitSuccess{
    min-height: 100px;
    border-radius: 10px;
    border: 2px solid green;
    color: green;
    text-align: center;
    padding: 50px;
  }

  .label{
    margin-top: 20px;

  }
  .label, .label-row{
    display: inline-block;
    width: 100%;
    color: #192355;
    font-weight: bold;
  }