@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

html,
body {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
}

#map {
    z-index: 0;
    width: 100%;
    height: 100%;
}

.formBlock {
    position: absolute;
    top: 325px;
    left: 10px;
    z-index: 1;
    background: white;
    padding: 10px;
    border-radius: 5px;
    height: 42px;
}
.live-track {
    position: absolute;
    top: 164px;
    left: 10px;
    z-index: 1;
}
.live-track .hover-text2 {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the button */
    left: 160%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the text when hovering over the button */
.live-track:hover .hover-text2 {
    visibility: visible;
    opacity: 1;
}
.input { margin-right: 5px;
}
td {
    white-space: nowrap;
}
#reset-map {
    position: absolute;
    top: 212px;
    left: 10px;
    z-index: 1;
}
#reset-map .hover-text3 {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the button */
    left: 160%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the text when hovering over the button */
#reset-map:hover .hover-text3 {
    visibility: visible;
    opacity: 1;
}
#return-dashboard {
    position: absolute;
    top: 263px;
    left: 10px;
    z-index: 1;
}
#return-dashboard .hover-text4 {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the button */
    left: 160%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the text when hovering over the button */
#return-dashboard:hover .hover-text4 {
    visibility: visible;
    opacity: 1;
}
#form { 
    display: none; 
}
#toggle-directions {
    position: absolute;
    top: 121px;
    left: 12px;
}
/* Hidden text that appears on hover */
#toggle-directions .hover-text {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the button */
    left: 160%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the text when hovering over the button */
#toggle-directions:hover .hover-text {
    visibility: visible;
    opacity: 1;
}
#but1 {
    position: absolute;
    top: 657px;
    left: 12px;
    z-index: 2;
    font-size: 12px;
}
#but2 {
    position: absolute;
    top: 657px;
    left: 73px;
    z-index: 2;
    font-size: 12px;

}
#but3 {
    position: absolute;
    top: 657px;
    left: 135px;
    z-index: 2;
    font-size: 12px;
}
#up-icon {
    font-size: x-large;
}
.form1 div{
    display: flex;
    justify-content: space-between;
    gap: 5px;
}
.span1a .input1{
    width: 100%;
    padding: 10px;
    margin: 5px 0 20px 0;
    background-color: #eee;
    border: none;
    outline: none;
}
textarea{
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    background-color: #eee;
    border: none;
    outline: none;
}
.button1aa {
    background-color: #e53653;
    padding: 10px 30px;
    border-radius: 5px;
    color: white;
    border: none;
    margin-top: 20px;
}
.button1aa:hover {
    background-color: #a20d26;
    cursor: pointer;
}
.leaflet-routing-container {
    opacity: 0.77;
}
.leaflet-routing-alt {
    opacity: 1;
}
.leaflet-pane {
    margin-top: 45px;
}

@media screen and (max-width: 600px)
{
    #but1 {
    top: 92vh;

    }
    #but2 {    
        top: 92vh;
        
    }
    #but3 {    
        top: 92vh;
           
    }
    .leaflet-pane {
    margin-left: -5vw;
    }

}

@media screen and (max-width: 900px) and (min-width: 600px) {

    #but1 {
    top: 93vh;

    }
    #but2 {    
        top: 93vh;
        
    }
    #but3 {    
        top: 93vh;
           
    }

}

@media screen and (min-width: 900px) {

    #but1 {
    top: 89vh;

    }
    #but2 {    
        top: 89vh;
        
    }
    #but3 {    
        top: 89vh;
           
    }

}