/** @format */

#psta-bus-arrival-widget {
     width: 100%;
     height: 360px;
     padding: 18px;
     overflow-x: hidden;
     overflow-y: scroll;
}

.psta-bus-mode-toggle {
     width: 100%;
}

.psta-bus-mode-toggle {
     display: grid;
     grid-template-columns: repeat(2, 2fr);
}

.psta-bus-mode-toggle label {
     width: 100%;
}

.psta-bus-mode-toggle input[type="radio"] {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}

.psta-bus-mode-toggle label span {
     display: block;
     position: relative;
     width: 100%;
     padding: 20px 10px;
     color: #0072ce;
     font-weight: 700;
     text-align: center;
     text-transform: uppercase;
}

.psta-bus-mode-toggle label span::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background-color: #ecf5f4;
}

.psta-bus-mode-toggle input[type="radio"]:checked + span::after {
     height: 5px;
     background-color: #0072ce;
}

.psta-bus-mode-toggle label:hover {
     cursor: pointer;
}

.psta-bus-mode-toggle label:hover span:after {
     height: 5px;
}

.psta-bus-stop-search{
     position: relative;
     margin: 40px 0;
}

.psta-bus-stop-search-row{
     position: relative;
}

.psta-bus-stop-search-row label {
     position: absolute;
     top: -8px;
     left: 5px;
     padding: 0 5px;
     color: #0072ce;
     font-size: 0.75rem;
     text-transform: uppercase;
     background-color: #fff;
}

.psta-bus-stop-search-row input {
     display: block;
     width: 100%;
     padding: 10px;
     margin: 0 0 10px 0;
     font-family: "Roboto", serif;
     font-size: 1rem;
     border: 2px solid #0072ce;
     box-sizing: border-box;
}

.psta-bus-stop-search-row button {
     display: block;
     width: 100%;
     padding: 10px 20px;
     margin: 20px 0;
     font-family: "Poppins", serif;
     font-size: 1rem;
     font-weight: 700;
     color: #fff;
     border-radius: 0;
     background-color: #0072ce;
     border: 2px solid #0072ce;
     box-sizing: border-box;
}

.psta-bus-stop-search-row button:hover, .psta-bus-stop-search-row button:focus{
     color: #0072CE;
     background-color: #fff;
     border: 2px solid #39393B;
     box-shadow: 6.6666666667px 6.6666666667px 0 0 #A0F5F0;
}

.psta-bus-stop-search-help {
     margin: 10px 0 0 0;
}

.bus-id-stop {
     margin: 0;
     font-weight: 700;
}

ul.psta-nearby-stop-list,
ul.psta-bus-list {
     width: 100% !important;
     list-style: none;
}

ul.psta-nearby-stop-list li.psta-nearby-stop, .psta-stop-wrapper {
     padding: 10px;
     margin: 0 0 20px 0 !important;
     border: 1px solid #39393b;
}

#psta-bus-status-location {
     margin: 10px 0;
}

.psta-nearby-stop-header{
     font-size: .75rem;
}

.stop-number{
     display: block;
     font-size: 1rem;
     font-weight: 700;
}

.psta-nearby-route-list {
     width: 100% !important;
     padding: 0 !important;
     list-style: none;
}

.psta-nearby-route-list li {
     margin: 20px 0 !important;
}

.psta-nearby-route-list li:last-of-type {
     margin: 20px 0 0 0 !important;
}

.psta-nearby-route-list li .headsign-time,
li.stop-id-route .headsign-time {
     display: grid;
     grid-template-columns: auto 90px;
     align-items: center;
}

.psta-route-number {
     margin: 0 0 10px 0;
}

.psta-route-number .rte-num,
.psta-route-number .rte-direction {
     color: #0072ce;
     margin: 0;
}

.stop-time-info{
     display: grid;
     grid-template-columns: repeat(2, auto);
     justify-content: space-between;
}

.rte-direction{
     display: block;
}

.route-number.has-h-4-font-size,
.time-number.has-h-4-font-size{
     color: #0072ce;
}

.psta-time-pill {
     text-align: center;
}

.time-min{
     text-transform: uppercase;
}

.psta-bus-list li.stop-id-route {
     margin-left: 0 !important;
}

.stop-id-route .psta-route-number {
     display: block;
}

.psta-stop-route{
     margin: 20px 0 0 0 !important;
}

@media (min-width: 900px) {
     .hide-trip-planner #psta-bus-arrival-widget {
          height: 548px;
     }
}

@media (min-width: 1100px) {
     .psta-nearby-route-list li {
          grid-template-columns: auto 100px;
     }
}

.psta-bus-debug,
.remove {
     display: none;
}

/* Focus ring for keyboard / a11y */
.psta-bus-mode-toggle input[type="radio"]:focus-visible + span {
     outline: 2px solid #111827;
     outline-offset: 2px;
}