/*

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

*/
.responstable {
  margin: 0 0 20px 0;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  color: #000;
  border-radius: 10px;
  border: 1px solid #0dbafa;
  
}
.responstable tr {
  border: 0px solid #D9E4E6;
}
.responstable tr:nth-child(odd) {
  background-color: #ededed;
}


.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #ededed;
  color: #000;
  padding: 1em;
  vertical-align: top;
}
.responstable th:first-child {
  display: table-cell;
  text-align: left;
}
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 7em;
}
.responstable td:first-child {
  display: table-cell;
  text-align: left;
  border-right: 1px solid #D9E4E6;
}
@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #D9E4E6;
  }
}
.responstable th, .responstable td {
  text-align: left;
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
  }
}

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

h1 {
  font-family: Verdana;
  font-weight: normal;
  color: #0dbafa;
}

h2 {
 
  color: #0dbafa;
}

h1 span {
  color: #ff3333;
}
h2 span {
  color: #ff3333;
}

button {
border: none;
background:none;

}

/*button styles*/

button em{
    vertical-align:middle;
    margin:0 2px;
    display:inline-block;
   
      
      
}

button em.Image{
background-image: url(../images/refresh-icon-small.png);
    background-position: 0px 0px;
      background-repeat: no-repeat;
      background-size:20px 21px;
       width:30px;
       height:25px;
}

button em.Image2{
background-image: url(../images/search-icon-small.png);
    background-position: 4px 1px;
    background-size:20px 20px;
      background-repeat: no-repeat;
      
       width:30px;
       height:23px;
}

button em.Image3{
background-image: url(../images/clear-icon.png);
    background-position: 4px 1px;
      background-repeat: no-repeat;
      background-size:20px 20px;
      
       width:30px;
       height:23px;
}

button em.Image4{
background-image: url(../images/camera-small-white.png);
    background-position: 0px 0px;
      background-repeat: no-repeat;
      background-size: 25px 21px;
       width:25px;
       height:25px;
       padding-right:10px;
       
       
}

/* Forms */
input[type=submit] {
   
     background:none!important;
     border:none; 
     padding:0!important;
     font: inherit;
     /*border is optional*/
     border-bottom:1px solid #444; 
     cursor: pointer;
     font-size:inherit;
     font-weight: inherit;
}

/* Forms */
input[type=text], input[type=search] {
    width: 160px;
    padding: 5px 10px;
    vertical-align:middle;
    margin: 0;
    box-sizing: border-box; 
    font-size:20px;
    
}

span input[type=submit] {
   
  color:#0dbafa;
  border-bottom:1px solid #0dbafa; 
}

select {
-webkit-appearance: none;
padding: 5px 10px;
font-size:20px !important;
line-height:20px;
}


/*popup table styles */

.a {
  display: table-row;
  max-width:440px;
  
}
.a div {
  display: table-cell;
  padding-bottom: 7px;
  padding-right: 5px;
  max-width: 270px; 
  width:130px;
}

.b {
  display: table-row;
  max-width:200px; 
}

.b div {
  display: table-cell;
  padding: 1px;
  vertical-align:middle;
  text-align:center;
  max-width: 100px; 
}

.c {
  display: table-row;
  max-width:200px; 
}

.c div {
  display: table-cell;
  padding-bottom: 40px;
  vertical-align:middle;
  text-align:center;
  max-width: 100px; 
}

/* clearable input */
.clearable{
  background: #fff url(../closex.png) no-repeat right -16px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */