.el-scrollbar {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.scrollbar-wrapper {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 143px;
}

.scrollbar-flex-content {
    display: flex;
    align-items: top;
   
}

.route-details-item {
    display: flex;
    align-items: center;
    margin-right: 12px;
    margin-left: 12px;
    /* position: relative;*/
}

.route-item-address {
    padding: 15px 52px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 2.1;
    text-align: center;
    min-width: 348px;
    margin:7px 0px;
}

.route-item-transport {
    display: flex;
    align-items: center;
    /*margin-left: 10px;*/
}

.route-transport_code {
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-right: 5px;
}

.route-transport_icon img {
    max-width: 39px;
    max-height: 23px;
}

.nowarp {
    white-space: nowrap;
color:#022;
}

.ips-tag {
    display: inline-block;
    padding: 2px 16px;
    margin-top: 5px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    /* text-transform: uppercase;*/
}

.ips-tag-death {
    background-color: #ff5252;
}

.ips-tag-arrival {
    background-color: #73fecf;
    color: green;
}

.ips-tag-danger {
    background-color: #ffd7d7;
    color: #ae1e1e;
}

.ips-tag-estimated {
    background-color: #FDE5FF;
    color: #ea16d4;
}


.ips-tag-warning {
    background-color: #ffc107;
}

.ips-tag-success {
    background-color: #4caf50;
}

.ips-tag-primary {
    background-color: #2196f3;
}

/*.line-active {*/
    /* border-top: 2px solid #4caf50;*/
    /*padding-left: 25px;
}*/

.inactive {
    opacity: 0.5;
}

.active {
    opacity: 1;
}

.route-details-item::before {
    content: '';
    position: absolute;
    left: -12px;
    right: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #4caf50;
}

.route-details-item:first-child::before {
    background-color: transparent;
}

.el-scrollbar__wrap--hidden-default::-webkit-scrollbar {
    display: none;
}

.estimatedTitle {
    font-weight: 600;
    font-size: 13px !important;
color:#022;
}


/* Style the beginning section of the scrollbar track */
.container::-webkit-scrollbar-track-piece:vertical:start {
    background-color: #4d7fff;
}
/* Style the end section of the scrollbar track */
.container::-webkit-scrollbar-track-piece:vertical:end {
    background-color: green;
}
/* Define the button style */
.container::-webkit-scrollbar-button:vertical {
    background-color: #4d7fff;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
}


::-webkit-scrollbar-track {
    max-height: 50% !important;
    height: 50% !important;
}

::-webkit-scrollbar {
    max-height: 50% !important;
    height: 50% !important;
}

#el-scrollbar::-webkit-scrollbar {
    display: block !important;
    width: 5px;
    background-color: palevioletred !important;
}

#el-scrollbar::-webkit-scrollbar-button {
    width: 50px;
}

#scrollbar-wrapper::-webkit-scrollbar {
    scrollbar-width: auto;
    scrollbar-color: #1a56ff #add8e6;
}

.el-scrollbarr ::-webkit-scrollbar {
    scrollbar-width: auto;
    scrollbar-color: #1a56ff #add8e6;
}

.scrollbar-wrapper {
    scrollbar-width: thin !important;
    /*     scrollbar-color: #FFF1F1 #f5f5f5 !important;*/
    /*   scrollbar-color: #472F92 #f5f5f5 !important;*/
    scrollbar-color: rgba(136, 136, 136, 0.8) transparent;
    scrollbar-highlight-color: red antiquewhite !important;
    scroll-margin: 2em !important;
    scroll-padding: 1em !important;
}

.route-item-icon {
    min-width: auto !important;
}

.route-address_name img {
    width: 32px;
    height: 19px !important;
}

.visiblePanel {
    display: block !important;
}

.invisiblePanel {
    display: none !important;
}