html, body {
    padding: 0;
    height: 100%;
    margin: 0;
    background: #ffffff;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

#map{
    border: 1px solid #14110F;
    border-radius: 2px;
    cursor: default; !important;
}

#map-page-root {
    display: flex;
    height: 100%;
}

#login-container {
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Arrange children in a column */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    height: 100%; /* Full height of the viewport */
}

#left-panel {
    flex: 0 0 300px; /* Fixed width for left panel */
    padding: 10px 2px 10px 10px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3); /* Optional shadow */
    position: relative; /* Allows positioning the sign-out button */
}

#road-list {
    /* Style for the road list */
    height: calc(100% - 150px); /* Fill height, minus space for sign-out button */
    overflow-y: auto; /* Scroll if content overflows */
    display: flex;
    flex-direction: column;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
#sign-out-button {
    text-decoration: none;
    font-size: 18px;
    color: #d00000;
    position: absolute; /* Position button at the bottom */
    bottom: 10px; /* Distance from the bottom */
    left: 10px; /* Distance from the left */
}

#map-container {
    flex: 1; /* Takes up remaining space */
    position: relative; /* Allows absolute positioning inside */
}

#right-panel {
    flex: 0 0 250px; /* Fixed width for right panel */
    padding: 5px;
}

#road-list .road-item {
    margin: 5px 5px 5px 0;
    background: #14110F;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
}

#road-list .road-item a {
    text-decoration: none;
    color: #F3F3F4;
    font-weight: bold;
    margin: 5px 5px 5px 5px
}

#add-road-button {
    background: #14110F;
    text-decoration: none;
    color: #F3F3F4;
    padding: 10px;
    margin-right: 10px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex; /* Use Flexbox for layout */
    align-items: center; /* Vertically center */
}

#add-road-button .add-road-button-plus{
    display: inline;
    font-size: 25px;
    margin-right: 10px; /* Add some spacing between the plus and content */
    margin-bottom: 0;
    margin-top: 0;
    transition: transform .15s ease-in-out;
}

#add-road-button .add-road-button-content{
    flex-grow: 1; /* Fill the remaining space */
    display: flex;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    padding-right: 25px;
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
}

#add-road-button:hover .add-road-button-plus {
    transform: rotate(90deg); /* Rotate the plus symbol by 90 degrees */
}

#create-road-lines-panel {
    display: none;
    flex-direction: column;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    height: 100%;
}

#create-road-lines-command {
    display: flex;
    height: fit-content;
    text-align: center;
}

#create-road-lines-list-all {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#create-road-lines-list-all .road-item {
    margin: 5px 5px 5px 0;
    background: #34312d;
    padding: 3px;
    border-radius: 5px;
}

#create-road-lines-list-all .road-item p {
    text-decoration: none;
    color: #F3F3F4;
    font-weight: bold;
    margin: 5px 5px 5px 5px
}

#create-road-lines-list-all .delete-road-item {
    color: #d00000;
    display: flex;
    font-size: 14px;
    font-weight: 1000;
    margin: 4px;
    cursor: pointer;
    justify-content: end;
    width: fit-content;
}

.road-control-button {
    cursor: pointer;
    background: #14110F;
    color: #F3F3F4;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;
}

.road-control-button-remove {
    cursor: pointer;
    background: #d00000;
    color: #F3F3F4;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;
}

.road-controls img {
    width: 24px;
    height: 24px;
    margin: 4px;
    cursor: pointer;
}

.road-controls {
    display: flex;
    width: fit-content;
    margin-right: auto;
}

#edit-road-panel {
    display: none;
    flex-direction: column;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    height: 100%;
}

#edit-road-panel h5 {
    margin: 3px
}

#edit-road-list-all {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#edit-road-list-all .road-item {
    margin: 5px 5px 5px 0;
    background: #34312d;
    padding: 3px;
    border-radius: 5px;
}

#edit-road-list-all .road-item p {
    text-decoration: none;
    color: #F3F3F4;
    font-weight: bold;
    margin: 5px 5px 5px 5px
}

#edit-road-list-all .delete-road-item {
    color: #d00000;
    display: flex;
    font-size: 14px;
    font-weight: 1000;
    margin: 4px;
    cursor: pointer;
    justify-content: end;
    width: fit-content;
}

.draggable {
    user-select: none;
    cursor: move;
}

.draggable.dragging {
    opacity: .5;
}