#map, body, html { 
    width: 100% !important; 
    height: 100%; 
    margin: 0px !important; 
    overflow: hidden; 
    padding: 0px !important;
    font-family: "Lato",sans-serif,Helvetica,Arial;
}

.grid{
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}
.esriSimpleSliderDisabledButton {
  pointer-events:none;
}
.appTitle {   
    color:#fff;
}
select:focus, button:focus{
    outline:none;
}
/**top nav bar**/
.nav-top {
    overflow: hidden;
    background-color: #00498c;
    height:52px;
}
.nav-top a {
    float: left;  
    text-align: center;
    text-decoration: none; 
}
.nav-top a:hover {  
    color: #fff!important;
}
.nav-top a.active {
    color: #fff!important;
    border-bottom:4px solid #B5BD00;
}
/*.nav-top-right {
    float: right;
    margin-right: 2px;
}*/
.nav-top-right {
    float: right;
    height:52px;
    margin-right: 2px;
    outline:none;
    color:#919191;
}
#specialTab {
    width: 85px!important;
    padding: 4px 1px!important;
    line-height: 1em!important
}
.emptyContent{
    text-align: center;
    margin: 20px;
}
.maintenance{
    text-align: center;
    margin: 30px 2px; 
    color:red;
}
.displayIt{ 
    display:block!important;
}
.notDisplayIt{
    display:none!important;
}
ul[tabindex='7']{
    background-color: #f3f6f9!important;
    display: inline-block; 
    width: calc(100% - 45px)!important;
}
ul[tabindex='7']:focus{
    outline:none;
}
.esriSimpleSlider div {
    width: 28px;
    height: 28px;
    font-size: 18px!important;
    font-weight:bolder;
    background-color:#fff!important;  
    box-shadow:none!important;   
    line-height:20px!important;
    box-shadow: 1px 1px 2px 1px #a2a2a2!important;
}
.esriSimpleSlider div:hover{
    background-color:#dcdcdc!important;
}
.esriSimpleSliderVertical .esriSimpleSliderDecrementButton {
    -webkit-border-radius: 0px 0px 8px 8px!important;
    border-radius: 0px 0px 8px 8px!important;   
    padding: 2px 0px 0px 0px;
     line-height:25px!important; 
}
/*.esriSimpleSliderVertical .esriSimpleSliderDecrementButton span {
    font-size:18px;
    font-weight:bolder;
}*/
.esriSimpleSliderTL{
    background-color:transparent!important;
    border:none!important;
}
.esriSimpleSliderVertical .esriSimpleSliderIncrementButton {
    border-bottom: 1px solid #dcdcdc!important;
    -webkit-border-radius: 8px 8px 0 0!important;
    border-radius: 8px 8px 0px 0px !important;
    padding: 2px 0px 0px 0px;
     line-height:25px!important;  
}
/*.esriSimpleSliderVertical .esriSimpleSliderIncrementButton span{
    font-size:18px;
    font-weight:bolder;
}*/
#gpsbutton {
    margin-bottom: 3px;  
    border-radius: 8px!important;
    /*background-color: white;
    box-shadow: 1px 1px 2px 1px #a2a2a2;*/
}
#mapLegend{
    margin-top: 3px;
    /*border: 1px solid white;*/
    padding: 2px 0px 0px 0px;
    border-radius: 8px!important;
    background-color: white;
    box-shadow: 1px 1px 2px 1px #a2a2a2;
}
#gpsImg {
    margin: 0px 2px 3px 3px;
}
#legendImg{
    margin:0px 2px 4px 3px;
}
.esriPopup {  
      font-family: "Lato",sans-serif,Helvetica,Arial!important;
      font-size:13px!important;
}
.esriPopup .esriPopupWrapper {
    box-shadow:none!important;
    -webkit-box-shadow:none!important; 
}
.esriPopup .pointer{
    border-radius:3px;
}
.esriPopup .pointer.bottom {
    display: block;
    left: 13px;
    margin-left: -8px;
    bottom: -4px;
}
.esriPopup .pointer.top {
    background: #fff;
    display: block;
    left: 12px;
    top: 26px;
    margin-left: -8px;
}

/*.esriPopup .pointer.top {
    background: #f7f7f7!important;
    top: 11px!important;
}*/

.esriPopup .pointer.bottomLeft {
    bottom: -5px!important;
    left: 4px!important;
}
.esriPopup .outerPointer.left {
    left: 0px!important;
    margin-left: -6px!important;
    bottom: -7px!important;
    top: -21px!important;
    right: auto;
}
.esriPopup .pointer.topLeft {
    background: #fff;
    display: block;
    left: 6px;
    top: auto;
    bottom: -4px;
}

/*.esriPopup .outerPointer.left {
    /*left: 50%!important;*
    margin-left: -6px!important;
    bottom: -8px!important;
    top: -22px!important;
    right: auto;
}*/

.esriPopup .outerPointer.right {  
    right: -9px!important;
    top: -22px!important;
    margin-top: -8px!important;
}
.esriPopup .esriPopupWrapper{
    position: absolute!important;
    left: -12px!important;
    bottom: 17px!important;
    top:auto!important;
    right:auto!important;
    width:max-content;
}
.esriPopup .actionsPane {
   display:none!important;
}
.esriPopup .titleButton.close {
    right: 3px;
    color: black;
    opacity:0.5!important;
    margin-top:-4px;
}
.esriPopup .titleButton.close:hover {   
    opacity:1.0!important;
}
.esriPopup .titleButton.close:before{
    content: "\00d7";
}
/*.esriPopup .sizer {  
    width: auto!important; 
}*/
.esriPopup .sizer {
    max-width: 350px;
    background-color: #fff;
    width:auto;
    border-radius: 3px;
}
.esriPopup .titlePane { 
     font-size:13px;
     font-family: 'Lato', sans-serif;
     color:#000;
     padding-left:8px;
     font-weight:400;
     background-color:#fff!important;
    height:18px;
}
/*.esriPopup .contentPane {   
    font-weight: 600;
    padding: 2px 5px 0px 5px!important;
}*/
.esriPopup .contentPane {
    border-radius: 5px;
    font-weight: 400;
    padding: 1px 12px 5px 8px!important;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    background-color: #fff;
}
.infoButton{
    position:absolute; z-index:12;top:1px; right:40px;
}
#stationModalContent{
    overflow-y:auto;
}
#stopModalContent {
    padding:2px!important;
}
.modal {  
    bottom: auto!important;   
}
/*#stationModal{
    overflow: auto !important;
    padding-left:0px!important;
    margin: 20px auto 10px auto;
}*/
#stationModalButton, #stopModalButton{
    top:5px;
    right:10px;
}
/*************adapt wmata next train style**************/
table {
    width:calc(100% - 45px)!important;
    border: none;
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0;
    font-size:14px;
    font-variant:normal;
    margin-bottom:5px;
}
table:focus{
    outline:none!important;
}
table thead {
    border-bottom: 2px solid #3B6798;
}
table th:first-child, table td:first-child {
    padding-left: 15px;
}
table thead th {
    padding: 8px 0;
}
table tbody tr td {
    padding: 6px 0;
}
th {
    display: table-cell;
    vertical-align: inherit;
    font-size:15px;
    font-weight:600;
    text-align: left;
}
th.line {
    width: 12%;
}
th.cars {
    width: 13%;
}
th.destination {
    width: 40%;
}
th.minutes {
    width: 15%;
}
/*td.minutes{
    width:35%;
}*/
.Infotable {
    width: calc(100% - 30px)!important;
    border: none;
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    font-variant: normal;
    margin-bottom: 5px;
    margin-left:5px;
}
.Infotable th{
    font-size:1.3em;
    font-weight:500;
}
.alertText {
    font-size: 14px;
    margin: 6px 6px 5px 8px;
}
.oc_img { width: 20px; height: 20px; margin-left: 15px; background-color: transparent;}
 .oc_noData{ margin-left:10px; background-color:transparent;   border-style: outset;     border-color:azure;     border-width:1px;          border:1px solid #4c4c4c; }

 .visually-hidden {    /*text show for ADA*/  position: absolute !important;  clip: rect(1px 1px 1px 1px);  padding:0 !important;  border:0 !important;  width: 1px !important;  overflow: hidden;}
/*.esriPopup .titlePane
{ 
    background-color:#2E4761!important;
}*/
.modal.in .modal-dialog {  
    /*border: 1px solid #4679b0;*/
     border: 1px solid #cccccc;
}
.modal-header {
    padding: 5px 10px 10px 10px !important;
    overflow-y: auto;
    color: #333;
    font-size: 1.5em;
    border:none;
}
.modal-title{
     width:calc(100% - 25px)!important;
}
.modal-body { padding: 10px 0px 10px 10px !important; color:#333; }
.modal-button { position: absolute;
    top: 1px;
    right: 2px;
    font-size: 11px !important;
    font-weight: 600;
    color: white !important;
}
#stationModal, #stopModal {
    /*overflow: auto!important;*/
    padding-left: 0!important;
    margin: 0px auto 10px auto;
}
#stationModalTitle, #stopModalTitle{
    font-size:1.5em;
}
#stationModalTitle:hover{
    cursor:pointer;
}
#alertTab:hover{
    cursor:pointer;
}
#alertClose:hover{
    cursor:pointer;
}
.alertTitle{ font-size: 1.125em; font-weight: 500!important;color: #be462b;}
.alertNoTitle{ font-size: 1.125em; font-weight: 500!important;color: #333;}
#stationTab:focus{
    outline:none;
}
.close-button{
    position:absolute;
    top:1px;
    right:10px;
    color:#2a2a2a!important;
    z-index:10;
    /*overwrit bootstrap button property*/
    font-size:24px!important;
    opacity:0.9!important;
    line-height:0.9!important;
}
.close-button:hover{
    cursor:pointer
}
.close-button:before{
    content: "\00d7";
}
.searchButton {
    /*-webkit-box-shadow: 0 5px 0px 0px rgba(84,129,179,0.50);
    box-shadow: 0 5px 0px 0px rgba(84,129,179,0.50);*/
    background: #4d77a7;
    border: none;
    color: #fff!important;
    display: inline-block;
    font-size: 15px;
    height: auto;
    padding: 5px 20px;
    text-align: center;
    text-transform:none;
    vertical-align: middle;
    width: auto;
    margin-top: 5px;
    margin-bottom:10px;
}
.button {
    -webkit-box-shadow: 0 5px 0px 0px rgba(84,129,179,0.50);
    box-shadow: 0 5px 0px 0px rgba(84,129,179,0.50);
    /*background: #4d77a7;*/
    border: none;
    color: #dedede!important;
    display: inline-block;
    font-size: 15px;
    height: auto;
    padding: 5px 20px;
    text-align: center;
    text-transform: none;
    vertical-align: middle;
    width: auto;
    margin-top: 3px;
    margin-bottom:10px;
}
#stationContent, #busContent {
    text-align: center;
    /*background-color:#f3f6f9;*/
}
.hidden{
    display:none!important;
}
.select{
    margin-left:auto;
    margin-right:auto;
    width:80%;
}
.select:before {
    /* content: "▼"; */
    content: "\25be";
    padding: 10px 0px;     
    position: absolute;
    right: 13%;
    top: 4px;
    z-index: 1;
    width: 12px;
    height: 6px;
    text-align: center;
    pointer-events: none;
    font-size: 28px;
    color: gray;
}
#metroBus, #metro {
    /*width: 320px;*/
    width:100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom:25px;
    border: 1px solid #4d77a7;
    appearance:none;
    border-radius:3px;
}
#metroBus, #metro option {
  text-wrap:normal;
}
#spBus{
    margin: 10px auto;
}
#spTrain{
     margin: 10px auto;
}
.dpn{
   width: 280px;
    height: 28px;
    display: block;
}
/**close button**/
.panelClose { 
  position: absolute;
  right: 8px;
  top: 5px;
  width: 8px;
  height: 8px;
  opacity: 0.7;
}
.panelClose:hover {
  opacity: 1;
  cursor:pointer;
}
.panelClose:before, .panelClose:after {
  position: absolute;
  left: 5px;
  content: ' ';
  height: 18px;
  width: 2px;
  background-color: #333;
}
.panelClose:before {
  transform: rotate(40deg);
}
.panelClose:after {
  transform: rotate(-40deg);
}
/**********/
#searchPanel{
    z-index:10;
    background-color:#f3f6f9;
    border: 1px solid #4679b0;
    height: auto;
    max-height: 400px;
    /*display:none;*/
    /*box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);*/
    box-shadow: 0 0 2px 1px #ccc;
}
/*#specialContent{
    padding: 10px 0px 10px 10px;
    padding: 10px 20px 10px 10px;
}*/
#avlContent, #specialContent{
    padding:0px;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    display:none!important;
}
.modal-alert {  
    margin-left:10px!important;
}
.color-legend {
    z-index: 2;   
    position: absolute;   
    border: 2px ridge;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    display:none;
}
.color-legend:hover {
  /*box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);*/
  box-shadow: 0 0 2px 1px #ccc;
}
#legend {
    width: 195px;
    font-size:13px;
    position: absolute;
    left: 45px;
    top: 55px;
    right:auto;
    bottom:auto;
    z-index: 10;
    background-color: #fff!important;
    border: 1px solid #cccccc;
    text-align: left;
     /*box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);*/
     box-shadow: 0 0 2px 1px #ccc;
    padding: 3px;
}
 #legendTB
 {
    width: calc(100% - 4px)!important;
 }
#legendTB thead{
     border:none!important;
 }
#legendTB tbody tr td{
    padding: 1px 0px!important;
}
#legendTB th:first-child{
    padding-left:5px!important;
}
#legendTB td:first-child{
    padding-left:10px!important;
}
#legendTB thead th {
    padding: 0px;
}
#legend ul{
    text-align:left;
  
}
#legend ul:not(:last-child){
      border-bottom: 2px solid #3B6798;
}
#legend ul>li{
    padding:2px 6px!important;
    height:32px!important;
}
#legend li>span{
    float:right;
}
#legend li>img {
    float: left;
    margin-top: -4px;
}
#legend li>img:focus{
   outline:none!important;
}
.modal-content {  
    /*background-color: #f3f6f9;*/
      background-color: #fff;
    border-radius:0px;
}
button.gm-control-active.gm-fullscreen-control {
    /*google map toggle full screen*/
    display: none;
}
.displayIt{ 
    display:block!important;
}
.notDisplayIt{
    display:none!important;
}
.popup-item-content{
    text-align:left;   
}
.logo { vertical-align: top !important; margin-top: -12px !important; }
/*table > thead > tr > th { line-height: 5px !important; }*/
.linebreak{
    border-bottom:1px solid #5F9EA0;
    width:calc(100% - 45px)!important;
}
ul { list-style: none !important; }
.list-group-item { border: none !important; padding: 5px 10px !important; background-color: #fff!important; }
.list-group { text-align: center; margin-bottom: 5px !important; }
.BL, .GR, .OR, .RD, .SV, .YL { font-weight: 700; }
.RD { color:#bf1138; } .OR {color:#e08c29; } .YL { color:#e5cc0f; } .GR { color: #13b840; } .BL { color: #2e8ec1; } .SV { color:#a4a4a4; }
.BLUE, .GREEN, .ORANGE, .RED, .SILVE, .YELLOW { font-weight: 700; }
.RED { color:#bf1138; } .ORANGE {color:#e08c29; } .YELLOW { color:#e5cc0f; } .GREEN { color: #13b840; } .BLUE { color: #2e8ec1; } .SILVE { color:#a4a4a4; }
@media screen and (max-width: 677px) {
     #legend {
        width: 200px;  
        left: 45px;
        top: auto;
        bottom:2px;
        right:auto;
        overflow-y:auto;
        max-height:calc(100% - 50px); 
    }    
    .modal{
    top:49px;
    }
    .modal-dialog {
    position: relative;
    width: auto;
    margin: 0px 1px;    
    }
    #stationModal{
        top:35%;      
        height:70vh;
    }
    #stationModalContent{      
        height: calc(65vh - 52px)!important;
        max-height: calc(65vh - 52px)!important;
    }
    #specialTab {
    width: 70px!important;
    padding: 8px 1px!important;
    line-height: 1em!important;
    }
    /*.nav-top a.active { 
        border-bottom:5px solid #B5BD00;
    }*/
    .moblieMap{
        height:35%!important;
    }
   .appTitle {
        font-size: 20px;  
        line-height: 2.6em;        
        padding-left:5px;
    }
    .color-legend {      
        bottom: 5px;
        top:auto;
        right:auto;
        left: 36px;       
    }
     .nav-top{
         height:49px;
     }
     .nav-top a {              
        padding: 12px 6px;
        font-size: 14px;
        height:48px;              
     }    
      #logoLink{
            padding:3px 1px;
            margin:1px;
     }   
     #searchPanel {
            width: 100%;
            position: absolute;
            left: 0;
            right:auto;
            top: 49px;
            /*bottom: auto;*/
    }
    .button{
        font-size:14px;
    }
    .esriSimpleSliderTL {
         top: auto;
        left: 5px;
        right: auto;
        bottom: 5px;       
    } 
    #searchBtn { margin-top:2px!important;  } 
    .pull-left{ min-width:165px!important;}   
    .pull-right{ min-width:100px!important;}
    table th:first-child, table td:first-child {
        padding-left: 5px;
    }
     table {
        width: calc(100% - 30px) !important;
    }
    th.line {
        width: 18%;
    }
    th.cars {
        width: 18%;
    }
    th.destination {
        width: 40%;
    }
    th.minutes {
        width: 15%;
    }
    .oc_img {
        margin-left:8px;
    }
    .esriPopup .sizer {
        max-width: 270px;
        min-width: inherit;
        /*width: 270px;*/
    }  
}
@media screen and (min-width: 678px) {
    .modal-dialog {
        width: 450px;
        overflow-y:hidden;
        margin: 0px auto;
    }
    .modal {
        left: auto!important;
        top:52px
    }
    .queryLink{  /*for query link*/
        top:5px!important;
    }
    .appTitle {
         font-size: 24px;  
        line-height: 2.3em;      
        padding-left:8px;
    } 
    .color-legend {      
        bottom: auto;
        top:52px;
        right:auto;
        left: 36px;       
    }
    .nav-top a {
        padding: 12px 12px;
        font-size: 1.3em;    
        font-weight: 400;
        height:50px;
    }
    #logoLink{
            padding:4px 2px;
            margin:1px;    
    }
    .esriSimpleSliderTL{ 
        top:55px; 
        left:5px;
        bottom:auto;
        right:auto;        
    }   
     #searchPanel{ 
            width: 400px;   
            position: absolute;
            left: auto;
            right: 2px;
            top: 52px;               
    }
    #stationModalContent{      
        height: calc(100vh - 99px)!important;
        max-height: calc(100vh - 101px)!important;
    }   
}