// location-container tmppoint-container options-container search-container

.collapsible-container {
    position: relative; /* To position the button */
    display: flex; /* Flex to align items */
    align-items: center; /* Center align vertically */
}

/* Collapsible box */
.collapsible-box {
    /*transition: width 0.3s ease; /* Smooth transition for width */
    overflow: hidden; /* Hide content when collapsed */
    white-space: nowrap; /* Prevent content from wrapping */
}

.collapse-button-t {
    cursor: pointer;
    width: 20px; /* Width of the arrow button */
    height: inherit; /* Height of the arrow button */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: inherit;
}

.collapse-button-bl {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    /*height: inherit;*/
    background: none;
    cursor: pointer;
    border: none;
    padding: 0;
    padding-left: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.collapse-button-br {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    /*height: inherit;*/
    background: none;
    cursor: pointer;
    border: none;
    padding: 0;
    padding-right: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Collapsed state */
.collapsed .collapsible-container {
    padding: 0;
    width: 0; /* Collapsed width */
}

.collapsed .options-container {
    padding: 0;
    width: 0;
}

.collapsed .location-container {
    padding: 0;
    width: 0;
}

.collapsed .collapsible-box {
    padding: 0;
    width: 0;
}

.collapsed .collapse-button-t {
    width: 20px;
    padding: 0;
    margin: 0 -10px;
}

.collapsed .collapse-button-br {
    width: 10px; /* Width of the button when collapsed */
    padding: 0;
}

.collapsed .collapse-button-bl {
    width: 10px;
    padding: 0;
}

.collapsed .arrow-icon {
    transform: rotate(180deg);
}