#rider-tools{
    position: relative;
    padding-top: 0;
    border-top: 0;
    display: block;
    background: #ffffff;
    border: 1px solid var(--rta-dark-blue);
    border-bottom: 0;
    margin-top: 1em;
}

#rider-tools .pane-title{
    display: none;
}

#rider-tools div[aria-label="Rider Tools"] {
    display: none;
}

.rider-tool{
    flex-direction: column;
    position: relative;
    padding: 3em 0 2em 0;
    justify-content: center;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background-color: white;
    transition: padding 300ms ease;
    border: 0;
    display: none; /* desktop hidden by default, shown via media query */
}

.is-keyboard .rider-tool:not(.mobile):focus{
    margin-right: 5px;
}

.rider-tools__text{
    margin: 0;
    font-size: 1em;
    font-weight: 400;
    text-align: left;
}

.rider-tools___schedules_ticker{
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight: bold;
    color: white;
    background-color: var(--rta-blue-alt);
    z-index: 1;
    padding: 0 0.5em;
    font-weight: 500;
}

@media(min-width:1400px){
    .rider-tools___schedules_ticker{
        bottom: 6px;
        max-width: 250px;
        margin: 0 auto;
        left: 0;
        right: 0;
        font-weight: 500;
        transform: skew(-4deg);
    }
    #rider-tools div[aria-label="Rider Tools"] {
        display: flex;
    }
}

/* Hide ticker when the tool is expanded/active */
.rider-tool[aria-expanded="true"] .rider-tools___schedules_ticker{
    display: none;
}

/*--------------Mobile Buttons----------------------*/
.rider-tool.mobile{
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0;
    flex-direction: row;
    padding: 1em;
    gap: 1em;
    position: relative;
    border-bottom: 1px solid var(--rta-dark-blue);
    background-color: var(--light-neutral-1);
    transition: all 300ms ease;
    min-height: 80px;
}

.rider-tool.mobile .rider-tools__icon{
    margin: 0;
    width: 45px;
    height: auto;
}

.rider-tool.mobile::after{
    display: block;
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    border-right: 1px solid #3b3b3b;
    border-bottom: 1px solid #3b3b3b;
    border-top: 0;
    border-left: 0;
    right: 2em;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    transition: all 300ms ease;
}

/* Rotate arrow when the mobile button is expanded */
.rider-tool.mobile[aria-expanded="true"]::after{
    transform: translateY(-50%) rotate(45deg);
}
/*--------------End of Mobile Buttons-------------------------*/

@media(min-width: 1400px){
    #rider-tools{
        margin-top: 0;
        border: 0;
    }

    .rider-tool{
        display: flex;
        z-index: 2;
    }

    .rider-tool.mobile{
        display: none;
    }

    .rider-tools__text{
        text-align: center;
        display: block;
        width: 100%;
        color: var(--rta-dark-blue);
        padding: 0;
        font-size: 1.4em;
    }
}

/* Layering + borders on active desktop tile */
.rider-tool[aria-expanded="false"]{
    z-index: 0;
}

.rider-tool[aria-expanded="true"]{
    position: relative;
    border-left: 10px solid var(--rta-dark-blue);
}

.rider-tools__icon{
    margin-bottom: 1em;
    width: auto;
    height: 60px;
    align-self: center;
    transition: all 300ms ease;
}

.rider-tools__icon:hover{
    transform: scale(1.15);
}

#panel-status{
    padding: 1em;
    border-left: 0;
    border-bottom: 0;
    border-right: 0;
    border-top: 1px solid var(--rta-dark-blue);
}

.panel-content-wrapper{
    border-bottom: 10px solid var(--rta-dark-blue) !important;
}

#panel-routes{
    padding: 0;
    border: 0;
}

#rider-tools #plan-a-trip-zed,
#rider-tools #block-servicealert{
    padding: 1em;
    /* border: 1px solid var(--rta-dark-blue); */
    margin: 0;
}

@media (min-width: 1400px){
    .panel-content-wrapper{
        border-bottom: 0 !important;
    }

    .rider-tool[aria-expanded="true"]{
        border: 1px solid var(--rta-dark-blue);
        border-top: 0;
        border-bottom: 0;
    }

    .rider-tools__icon{
        height: 125px;
    }

    #rider-tools #plan-a-trip-zed,
    #rider-tools #block-servicealert{
        border: 1px solid var(--rta-dark-blue);
        padding: 2em;
    }

    #rider-tools #block-servicealert{
        border-right: 0;
    }

    #panel-status{
        padding: 2em 0 0 0;
    }

    .rider-tool-wrapper{
        position: relative;
    }

    /* Diamond pointer under the active desktop tile.
       JS should toggle data-active="true" on the active wrapper. */
    .rider-tool-wrapper.rider-tool-wrapper--desktop[data-active="true"]::after{
        content: "";
        width: 25px;
        height: 25px;
        position: absolute;
        border-bottom: 1px solid var(--rta-dark-blue);
        border-right: 1px solid var(--rta-dark-blue);
        bottom: -5px;
        right: 48%;
        background-color: white;
        transform: rotate(45deg) translateX(50%);
        z-index: 1;
    }
}

/*--------Panels hidden via [hidden] attribute-------*/
.panel-content-wrapper[hidden] {
    display: none;
}