@media (min-width: 100px) {
		  .modal-xlg {
			max-width: 1140px;
		  }
		}	
       
        #map {
            height: 100%;
            width: 100%;
        }

        #steps {
            max-height: 50%;
            overflow-y: auto;
        }

        .directiondiv{
         width:30%;
        }
        .mapdiv{
        width:70%;
        min-height:50vh;
        }

        #steps div {
            padding: 5px 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;      /* Light border */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
            transition: transform 0.3s ease; /* Smooth transition for hover effect */
            color: #000;
            margin-bottom: 5px;
        }

        #steps div b {
            color: #d81324;
        }

        #steps div div {
            background-color: #f1f1f1;
        }

        @media (max-width: 991px) {
           
           #steps div {
              font-size:13px;
           }
       }	
       @media (max-width:500px) {
            .directiondiv{     
            width:100%;     
             height:250px;
             overflow:auto;
             padding-top: 2px;
            }
           #steps div {
              font-size:10px;
              padding: 1px 1px;              
           }
           .mapdiv{
            width:100%;
            }

           #map {
            height:250px;
            font-size: 10px !important;
           }
            
       }
           

        /* Scrollbar styles for webkit browsers */
        ::-webkit-scrollbar {
            width: 7px; /* Width of the scrollbar */
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1; /* Color of the track */
        }
        ::-webkit-scrollbar-thumb {
            background: rgb(57, 56, 56); /* Color of the scrollbar thumb */
            border-radius: 0px; /* Rounded corners for the thumb */
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555; /* Color of the thumb when hovered */
        }

        /* Sample container with overflow for scrolling */
        .scroll-container {
            height: 300px; /* Fixed height for demonstration */
            overflow-y: scroll; /* Enable vertical scrolling */
            padding: 10px; /* Padding inside the container */
            border: 1px solid #ddd; /* Border for the container */
        }