/*

RESPONSTABLE 2.0 by jordyvanraaij
 Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
 https://gist.github.com/jordyvanraaij/9069194

*/
#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}
// Default options for table style
$table-breakpoint: 480px;
$table-background-color: #FFF;
$table-text-color: #024457;
$table-outer-border: 1px solid #167F92;
$table-cell-border: 1px solid #D9E4E6;

// Extra options for table style (parse these arguments when including your mixin)
$table-border-radius: 10px;
$table-highlight-color: #EAF3F3;
$table-header-background-color: #167F92;
$table-header-text-color: #FFF;
$table-header-border: 1px solid #FFF;

// The Responstable mixin

@mixin responstable(
 $breakpoint: $table-breakpoint,
 $background-color: $table-background-color,
 $text-color: $table-text-color,
 $outer-border: $table-outer-border,
 $cell-border: $table-cell-border,
 $border-radius: none,
 $highlight-color: none,
 $header-background-color: $table-background-color,
 $header-text-color: $table-text-color,
 $header-border: $table-cell-border) {

 .responstable {
   margin: 1em 0;
   width: 100%;
   overflow: hidden;
   background: $background-color;
   color: $text-color;
   border-radius: $border-radius;
   border: $outer-border;

   tr {
     border: $cell-border;
     &:nth-child(odd) { // highlight the odd rows with a color
       background-color: $highlight-color;
     }
   }

   .th {
     display: none; // hide all the table header for mobile
     border: $header-border;
     background-color: $header-background-color;
     color: $header-text-color;
     padding: 1em;
     &:first-child { // show the first table header for mobile
       display: table-cell;
       text-align: center;
     }
     &:nth-child(2) { // show the second table header but replace the content with the data-th from the markup for mobile
       display: table-cell;
       span {display:none;}
       &:after {content:attr(data-th);}
     }
     @media (min-width: $breakpoint) {
       &:nth-child(2) { // hide the data-th and show the normal header for tablet and desktop
         span {display: block;}
         &:after {display: none;}
       }
     }
   }

   .td {
     display: block; // display the table data as one block for mobile
     word-wrap: break-word;
     max-width: 7em;
     &:first-child {
       display: table-cell; // display the first one as a table cell (radio button) for mobile
       text-align: center;
       border-right: $cell-border;
     }
     @media (min-width: $breakpoint) {
       border: $cell-border;
     }
   }

   .th, .td {
     text-align: left;
     margin: .5em 1em;
     @media (min-width: $breakpoint) {
       display: table-cell; // show the table as a normal table for tablet and desktop
       padding: 1em;
     }
   }
 }
}

// Include the mixin (with extra options as overrides)

@include responstable(
 $border-radius: $table-border-radius,
 $highlight-color: $table-highlight-color,
 $header-background-color: $table-header-background-color,
 $header-text-color: $table-header-text-color,
 $header-border: $table-header-border);

// General styles

body {
 padding: 0 2em;
 font-family: Arial, sans-serif;
 color: #024457;
 background: #f2f2f2;
}

h1 {
 font-family: Verdana;
 font-weight: normal;
 color: #024457;
 span {color: #167F92;}
}
#map {
height: 400px;
width: 100%;
}



label{
  color:#00c1de;

}
legend {
      display: block;
    width: 100%;
}


.gm-style .gm-style-iw {
   font-color:#024457
   font-size: 16px;
   font-weight: bold;
   font-family: sans-serif;

}

fieldset {
      border: 0;
    }

    .overflow {
      height: 200px;
      .custom-combobox {
          position: relative;
          display: inline-block;

        }
        .custom-combobox {
      position: relative;
      display: inline-block;

    }
    .custom-combobox-toggle {
      position: absolute;
      top: 0;
      bottom: 0;
      margin-left: -1px;
      padding: 0;

    }
    .custom-combobox-input {
      margin: 0;
      padding: 30px 30px;

    }
    .demoHeaders {
      margin-top: 2em;
    }
.xx{
  border: 1px solid #cecece;
  width: 200px;
  border-radius: 3px;
  overflow: hidden;

}