/*
#FFFFFF
#F5F5F5
#666	
#4c97f3	
#c0ecae	
https://www.google.com/fonts/specimen/Work+Sans
https://www.google.com/fonts/specimen/Work+Sans	
*/

@import url('https://fonts.googleapis.com/css?family=Work+Sans');

.marker {
          border: none;
          cursor: pointer;
          height: 42px;
          width: 35px;
          background-image: url(mstile-150x150-orange.png);
         background-repeat: no-repeat;
          background-color: rgba(0, 0, 0, 0);
         background-size: contain;
        }

#myInput[type=text] {
    margin-left: 0px; 
    background: url(../icons/search-icon-white.png); 
    background-repeat: no-repeat; 
    background-position: left;
                    }

.heading h1 {
          font-size:17px;
          margin:0 0 0 0;
          line-height: 20px;
          padding: 25px 2px;
          font-family: 'Work Sans';
          font-weight: 200;
        }

#myInput {
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
    height: 40px; 
    border-style: none;
}   

    #myInput[type=text] 
    {
    margin-left: 0px; 
    background: url(../icons/search-icon-dark.png); 
    background-repeat: no-repeat; 
    background-position: left;
    }

/*Sidebar Content*/

  .heading {
          background:#F5F5F5;
          border-bottom:3px solid #666;
          min-height:60px;
          line-height:60px;
          background-color: #F5F5F5;
          color: black;
        }

/*Listings*/

        .listings {
          overflow:auto;
          padding-bottom:60px;
          background: #f5f5f5;
        text-transform: capitalize;
        }
          
          .listings div 
          {color: black}

        .listings .item {
          display:block;
          border-bottom:1px solid #eee;
          padding:13px;
          text-decoration:none;
         
        }

        .listings .item .title {
          color:black;
          font-weight:700;  
          font-family: 'Work Sans', Arial,Helvetica,sans-serif;
          font-weight: 600;
            font-size: 11px;
          text-transform: Capitalize;
                               }

        listings .item {
          border-bottom:1px solid #eee;
                       }

        .listings .item:last-child { 
            border-bottom:none;    
                                   }

   

        .listings .item .title small { 
            font-weight:400; 
                                     }

        .listings .item.active .title,
        .listings .item .title:hover {           
        color:#666;
                                     }

        .listings .item.active {
            background: #fefefe;
                               }

 #Div1 {max-height: 35px; 
             overflow-y: hidden;
             font-family: 'Work Sans', Arial,Helvetica,sans-serif;
          font-weight: 300;
        }



::-webkit-scrollbar {
          width:6px;
          height:6px;
          border-left:0;
          background:rgba(0,0,0,0.1);
        }
        ::-webkit-scrollbar-track {
          background:none;
        }
        ::-webkit-scrollbar-thumb {
          background:#666;
          border-radius:0;
        }

.modal-content {
    background: #f5f5f5;
    border-radius: 0px;
    color: black; 
    margin-top: 0vh; 
    height: 45vh;
 }



.mapboxgl-popup-content div
{
    margin-top: 0px;
}


.modal h1 {
    color: black;
    padding: 15px 2px 5px 2px; 
    margin-top: -5px;
    font-family: 'Work Sans',Arial,Helvetica,sans-serif;
    text-transform: capitalize; 
    font-size: 15px;
          }
.modal h5 {
    font-size: 16px; 
    font-style: italic;
          }
.modal p  {
    font-family: 'Work Sans', Arial,Helvetica,sans-serif;}
.myButton:hover {
    color: white;
    background: transparent;
    font-size: 12px;
          }     


.myButton:active {
	position:relative;
	top:1px;
     background: transparent;
}
.myButton {
background: transparent;
border-style: solid; border-color: #f5f5f5; border-width: 1px;font-size: 12px;
}
.btn-info {
        padding: 5px 5px 5px 5px;
        background: #666;
        color: white;
        border-style: none;
              }

.btn-info:focus 
{background-color: #f5f5f5; border-color: black;color: black;}

.modal-body {height: 40vh; width: 100%;}
   
@media only screen and (max-width: 768px) {
.modal-body {height: 100vh;}
    .mapboxgl-popup-content div {padding: 8px;}}
    @media (min-width: 768px) {
.modal-body {
    margin-top: -125px;
    
}
}
.btn-info:hover {background: #666;}

/*Modal Button*/
.modal-header .btn-info
{
    padding: 10px 20px 10px 20px;
    margin-top: -10px;
    float: right;
    color: white;
    font-family: helvetica;
}

  .mapboxgl-popup-content h3 {
          background:transparent;
          color:#f5f5f5;
          padding:10px;
          border-radius:3px 3px 0 0;
          font-weight:700;
          margin-top:-15px;
          text-align: center;
        }

        .mapboxgl-popup-content h4 {
          padding: 10px 10px 10px 10px;
          font-weight:400;
          background: transparent;
          color: #f5f5f5;
          text-align: center;
         }

   mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
          border-bottom-color: #666 ;
        }

label{
    background:  linear-gradient(#F39F86, #FC9842);
      }
  
#close {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:transparent;
    color: white;
    font-size: 1.5em;
    transition: 500ms;
    }

#card {
  background:  transparent; 
  padding-top:30px;

      }   

.full-card

{
 background:  linear-gradient(#F39F86, #FC9842);
 border-radius: 5px;
}

.modal 
{height: 0px !important;}
#card h3 {font-size: 1.5rem !important;}
#card h4 {font-size: 1.5rem !important;}


@media (max-width: 768px) {
.modal {
    height: 400px;}
.modal-body {height: 20vh;}
.modal-content{margin-left: -35%;width: 80vw}
    }
    @media (max-width: 450px) {
        .modal-content { margin-left: -20%;width: 90vw !important;}
    }