/******************************************************************
Traffic Query Explorer
******************************************************************/

.trafficquery{
  height : inherit;
}

.display-color-traffic {
  background-color: #0d47a1;
}


.trafficquery .display-header .item
{
  /* background: #7F6CE0; */
  color: #fff;
}

.trafficquery-service .service-list li, 
.trafficquery-legends .service-list li
{
  margin: 10px 24px;
  padding: 0;
  background-color: white;
  font-size: 18px;
  line-height: 30px;
  /*padding: 10px 15px;*/
  color: black;
  /*padding-left: 2em;*/
  text-decoration: none;
  border: 1px solid rgba(22,54,118,0.35);
}

.trafficquery-legends .legends_data {
  margin: 10px 24px;
}

.trafficquery-legends .legends_data .legends_header {
  padding: 5px 1em 5px 30px;
}

.trafficquery-service .service-list li .traffic-service {
    font-size: 14px;
    line-height: 40px;
    padding: 1em 1em 1em 30px;
}

.trafficquery-legends .service-list li .legends_header {
    background-color: #e7e9ef;
    padding: 5px 1em 5px 30px;
    
}

.trafficquery-legends .service-list li .legends_overall {
    padding: 5px 50px 5px 20px;
    height: 40px;
    margin: 10px;
}

.trafficquery-legends .service-list li .legends_text {
    float: left;
    font-size: 14px;
    line-height: 20px;
    
}

.trafficquery-legends .service-list li .legends_text:last-child {
    padding-bottom:1em;
}

.trafficquery-legends .service-list li .legends_square {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    float: right;
    margin-right: -40px;
    margin-top: -5px;
}

.trafficquery-legends .service-list li .legends_square_color_red {
  background-color: #ff1744;
}

.trafficquery-legends .service-list li .legends_square_color_yellow {
  background-color: #ffce00;
}

.trafficquery-legends .service-list li .legends_square_color_green {
  background-color: #3de07f;
}

.trafficquery-legends .service-list li .legends_square_color_light_red {
  background-color: #ff5d7c;
}

.trafficquery-legends .service-list li .legends_square_color_light_yellow {
  background-color: #ffdd4d;
}

.trafficquery-legends .service-list li .legends_square_color_light_green {
  background-color: #77e9a5;
}


.trafficquery-legends .service-list li .legends_square_color_white {
  background-color: #ffffff;
}

.trafficquery-legends .service-list li .accident {
  background-image: url(https://web-static.onemap.sg/images/main/traffic/OM2_AppIcon_512_accident_line.png);
  background-size: 40px 40px;
}

.trafficquery-legends .service-list li .traffic {
  background-image: url(https://web-static.onemap.sg/images/main/traffic/OM2_AppIcon_512_heavyTraffic_Line.png);
  background-size: 40px 40px;
}

.trafficquery-legends .service-list li .roadwork {
  background-image: url(https://web-static.onemap.sg/images/main/traffic/OM2_AppIcon_512_roadwork_line.png);
  background-size: 40px 40px;
}

.trafficquery-legends .service-list li .incidents {
  background-image: url(https://web-static.onemap.sg/images/main/traffic/OM2_AppIcon_512_incidents_line.png);
  background-size: 40px 40px;
}

.trafficquery-legends .service-list li .breakdown {
  background-image: url(https://web-static.onemap.sg/images/main/traffic/OM2_AppIcon_512_breakdown_line.png);
  background-size: 40px 40px;
}






/* ============================================================
  STYLE 1
============================================================ */
.style-1 input[type="text"] {
  padding: 10px;
  border: solid 1px gainsboro;
  -webkit-transition: box-shadow 0.3s, border 0.3s;
  -moz-transition: box-shadow 0.3s, border 0.3s;
  -o-transition: box-shadow 0.3s, border 0.3s;
  transition: box-shadow 0.3s, border 0.3s;
}
.style-1 input[type="text"]:focus, .style-1 input[type="text"].focus {
  border: solid 1px #707070;
  -webkit-box-shadow: 0 0 5px 1px #969696;
  -moz-box-shadow: 0 0 5px 1px #969696;
  box-shadow: 0 0 5px 1px #969696;
}

.trafficquery .display-option{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 52px;
  /* padding: 15px 20px;*/
  padding-bottom: 0px;
  /* background-color: lightgrey; */
  color: #fff;
  z-index: 10;
  left: 0px;
  right: 0px;
}

/* Style the list */
.trafficquery ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0px 30px;
    overflow: hidden;
    /* background-color: white;*/
    width: 100%;
}

/* Float the list items side by side */
.trafficquery ul.tab li {
  float: left;
}

/* Style the links inside the list items */
.trafficquery ul.tab li {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 15px 20px;
    margin: 0px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
    width: 50%;
}

/* Change background color of links on hover */
.trafficquery ul.tab li:hover {
  /* background-color: white; */
  border-bottom: 3px solid #ff1744;
  cursor: pointer;;
}

/* Create an active/current tablink class */
.trafficquery ul.tab li:focus, .trafficquery ul.tab li.active {
  /* background-color: white; */
  border-bottom: 3px solid #ff1744;
}

.trafficquery .checkbox {
display: inline-block;
cursor: pointer;
margin: 0;
float: right;
width: 100%;
}
.trafficquery input[type=checkbox] {
display:none;
}
.trafficquery .checkbox:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
vertical-align:middle;
background-color: #fff;
color: #f3f3f3;
text-align: center;
border-radius: 50px;
border: 1px solid #2957a7;
}
.trafficquery input[type=checkbox]:checked + .checkbox:before {
font-size: 15px;
background-color: #ed2349;
border: transparent;
}

.trafficquery .checkbox_text {
    float: left;
    width:92%;
    padding: 14px 0px 0px 0px;
    font-size: 15px;
    line-height: 18px;
    color: #041d38;
}

.trafficquery .clear {
  clear:both;
}