/*.contact_container {
      background-color: rgba(242, 242, 242, 1);
        position: relative;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
       
    }
   */
   /* Define the colors for map references*/


   .color-red { background-color: rgb(0,80,130); }
   .color-green { background-color: rgb(234, 178, 0); }
   .color-blue { background-color: rgb(197,90,17); }

    #countryCode, #fromTime, #toTime{
    
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none; 
    -webkit-appearance: none; /* Remove default arrow for older versions of Chrome/Safari */
    -moz-appearance: none; /* Remove default arrow for Firefox */
    background-image: url('/data/selectdown2.png'); /* Replace 'down_arrow_icon.png' with your own image */
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 30px; /* Set the desired width */
       height: 100%; /* Set the desired height of the select field */
       
  }
   
   /* Style the list */
   
   .square-list {
     list-style: none;
     padding-left: 0;
     transform: translate(50%, -100%);
     

    }
    
   
   /* Style the list items */
   .square-list li {
     margin-bottom: 5px;
   }
   
   /* Style the colored squares */
   .square {
     display: inline-block;
     width: 10px;
     height: 10px;
     margin-right: 5px;
     border: 1px solid #000; /* Add border for clarity */
   }
   @media screen and (max-width: 1076px) {
    .square-list {transform: translate(50%, -50%);}

   }

   @media screen and (max-width: 995px){
    .square-list {transform: translate(30%, 20%); 
  }

  @media screen and (max-width: 576px) {
    .square-list{
      opacity: .3;
     position: relative;
     bottom: -80px;
     font-size: 7px;
     transform: translate(50%, -100%);
    }
    
    .section_title_container1{
      display: inline;
      justify-content: center;
    }

        #contact input,
         #contact textarea,
          #contact select {
         background-color: transparent;
          border: 1px solid black;
             }     
            .contact_container{ 
              z-index: 3;
              background-color: rgba(242, 242, 242, .1);
            }
            .Form_data_container{
                background-color: transparent;
                width: 100%;
                padding: 0 .5rem;
            }
            
            #map{
               padding-right: 0;
                width: 100%;
                position: absolute;
                top: 20%;
                left: 0;
                z-index:-1;
             }
         }

 
    
      
             @media screen and (max-width: 515px) {
              .square-list {transform: translate(38%, -130%);
            }
            @media screen and (max-width: 400px) {
              @media screen and (max-width: 385px) {
                .square-list li{font-size: 14px;
                }
               }

            }
          
             @media screen and (max-width: 385px) {
              #map{
                top: 200px;
              }
             }
           
                
          /*      @media screen and (max-width: 992px) {
                 TEngo un ghost en el espacio de arriba de la contact section
                 cuando reduzco la pantalla en 995px, y no era este @media aparentemente. 
                      
                }*/