/* Paso 2 - Titulo */
#tab-step2 {
    width: 20%;
}
#step2-img {
    display: none;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Paso 2 - Contenido Elecci�n Origen/Destino */
.content-tab2 {
    display: -webkit-box !important;
    background-color: #eeeeee !important;
    padding: 20px;
}
@media only screen and (max-width: 768px) {
    #search-tab2 {
        display: inline-table !important;
        width: 100%;
    }
    #returning-container2 {
        margin-top: 14px;
    }
}
@media only screen and (max-width: 768px) {
    #returning-container2 {
        margin-top: 12px;
    }
}


#l-normal-return2 {
    display: block;
}
#l-short-return2 {
    display: none;
}
/*Paso 2 - Cambios especificos para <=1024px*/
@media only screen and (max-width: 1024px) {
    #l-normal-return2 {
        display: none;
    }
    #l-short-return2 {
        display: block;
        margin-bottom: 7px;
    }
}

/* Paso 2 - Contenido Selecci�n Itinerario */
.content-route {
    margin: 25px;
}
#label-route {
    font-size: 14px;
    color: #99B1C2;
}

#label-route-croquis {
    font-size: 14px;
    color: #99B1C2;
    font-family: 'Montserrat', sans-serif;
}

/* Paso 2 - Contenido Back Itinerarios Retorno */
.back-ret-route {
    padding: 0px;
}
@media only screen and (max-width: 768px) {
    .back-ret-route {
        margin-bottom: 12px;
    }
}

/* Paso 2 - Cabecera de itinerarios */
#route-list-header {
    background-color: #2966d9;
    border-radius: 8px;
    padding: 0px;
    position: relative;
    top: 0px;
}
#route-list-tab-header {
    margin-top: 0px;
    margin-bottom: 6px;
    height: 35px;
    padding: 0px;
}
.item-header-route {
    color: #ffffff;
    font-weight: bold !important;
}
#route-item {
    width: 20%;
}
#service-item {
    width: 20%;
}
#seats-item {
    width: 17%;
}
#choose-item {
    width: 17%;
}
@media only screen and (max-width: 1024px) {
    #route-item {
        width: 30%;
    }
    #service-item {
        width: 25%;
    }
    #seats-item {
        width: 25%;
    }
    #choose-item {
        width: 25%;
    }
}

/* Paso 2 - Contenido Itinerarios (Acordion) */
.accordion {
    display: none;
}
@media only screen and (max-width: 768px) {
    .accordion {
        display: block;
    }
}
.m-accordion .m-accordion__item .m-accordion__item-head {
    display: table;
}
@media only screen and (max-width: 768px) {
    .m-accordion .m-accordion__item .m-accordion__item-head {
        padding: 1rem 2rem;
    }
}
@media only screen and (max-width: 375px) {
    .m-accordion .m-accordion__item .m-accordion__item-head {
        padding: 1rem 1.6rem;
    }
}
@media only screen and (max-width: 320px) {
    .m-accordion .m-accordion__item .m-accordion__item-head {
        padding: 1rem 1.2rem;
    }
}
@media only screen and (max-width: 320px) {
    .m-accordion .m-accordion__item .m-accordion__item-head .m-accordion__item-icon {
        padding-right: 1rem;
    }
}
@media only screen and (max-width: 320px) {
    .m-accordion .m-accordion__item .m-accordion__item-head .m-accordion__item-icon {
        padding-right: 0.5rem;
    }
}
@media only screen and (max-width: 768px) {
    .seat-title-icon {
        width: 18px;
        height: 24px;
    }
}
@media only screen and (max-width: 320px) {
    .seat-title-icon {
        width: 15px;
        height: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .seats-available-header {
        margin-left: 400px;
        margin-right: 5px;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        font-family: 'Montserrat', sans-serif;
    }
}
@media only screen and (max-width: 425px) {
    .seats-available-header {
        margin-left: 70px;
    }
}
@media only screen and (max-width: 375px) {
    .seats-available-header {
        margin-left: 30px;
    }
}
@media only screen and (max-width: 320px) {
    .seats-available-header {
        margin-left: 16px;
        font-size: 14px;
    }
}
.acc-flex {
    display: flex;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
}
@media only screen and (max-width: 768px) {
    .acc-warning-container {
        display: block;
        padding: 0px;
    }
    .acc-warning {
        padding: 0px;
        margin-bottom: 5px;
    }
}

/* Paso 2 - Contenido Itinerarios */
#content-step2 {
    padding: 0px 0px 20px 0px;
}
@media only screen and (max-width: 768px) {
    #content-step2 {
        padding: 0px 0px 10px 0px;
    }
}
#route-itinerario {
    display: block;
    margin-top: 20px;
}
#route-list-content {
    margin-top: 0px;
    height: auto;
    padding: 4px 0px 4px 0px;
}
@media only screen and (max-width: 768px) {
    #route-list-content {
        padding: 0px;
    }
}
@media only screen and (max-width: 425px) {
    #route-list-content {
        padding: 0px;
    }
}
#route-list-subcontent {
    margin-top: 0px;
    height: auto;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
}
#routes-list-body {
    padding: 0px 0px 0px 0px;
    position: relative;
    top: 0px;
}

/* Paso 2 - Contenido Opcion Itinerario */
@media only screen and (max-width: 1024px) {
    .container-departure {
        width: 12%;
    }
}
.departure-time {
    color: #474747;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 0px;
    font-family: 'Montserrat', sans-serif;
}
@media only screen and (max-width: 1024px) {
    .departure-time {
        font-size: 16px;
    }
}
@media only screen and (max-width: 768px) {
    #departure-container {
        padding: 0px;
        margin: 0px 15px 0px auto;
    }
    .departure-time {
        text-align: center;
    }
}
@media only screen and (max-width: 425px) {
    #departure-container {
        margin: 0px 25px 0px auto;
    }
}
@media only screen and (max-width: 375px) {
    #departure-container {
        margin: 0px 20px 0px auto;
    }
}
@media only screen and (max-width: 320px) {
    #departure-container {
        margin: 0px 12px 0px auto;
    }
    .departure-time {
        font-size: 14px;
    }
}
.departure-text {
    color: #BCBCBC;
    font-size: 13px;
    margin-bottom: 0px;
    text-align: center;
}
@media only screen and (max-width: 1440px) {
    .departure-text {
        margin-right: 6px;
        text-align: right;
    }
}
@media only screen and (max-width: 768px) {
    .departure-text {
        font-size: 14px;
        margin-right: 0px;
        text-align: center;
    }
}
@media only screen and (max-width: 320px) {
    .departure-text {
        font-size: 12px;
    }
}
.container-arrow {
    width: 50px;
}
@media only screen and (max-width: 1024px) {
    .container-arrow {
        width: 35px;
        padding: 10px 0px 10px 0px !important;
    }
}
.route-arrow {
    color: #474747;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 0px;
}
@media only screen and (max-width: 1024px) {
    .container-arrival {
        width: 12%;
    }
}
@media only screen and (max-width: 768px) {
    .container-arrival {
        width: auto;
    }
}
@media only screen and (max-width: 768px) {
    #arrival-container {
        padding: 0px;
        margin: 0px auto 0px 15px;
    }
}
@media only screen and (max-width: 425px) {
    #arrival-container {
        margin: 0px auto 0px 25px;
    }
}
@media only screen and (max-width: 375px) {
    #arrival-container {
        margin: 0px auto 0px 20px;
    }
}
@media only screen and (max-width: 320px) {
    #arrival-container {
        margin: 0px auto 0px 12px;
    }
}
.arrival-time {
    color: #474747;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    margin-bottom: 0px;
    font-family: 'Montserrat', sans-serif;
}
@media only screen and (max-width: 1024px) {
    .arrival-time {
        font-size: 16px;
    }
}
@media only screen and (max-width: 768px) {
    .arrival-time {
        font-weight: 900;
        text-align: center;
    }
}
@media only screen and (max-width: 320px) {
    .arrival-time {
        font-size: 14px;
    }
}
.arrival-text {
    color: #BCBCBC;
    text-align: left;
    width: 110px;
    margin-right: 0px;
    margin-bottom: 0px;
}
@media only screen and (max-width: 768px) {
    .arrival-text {
        font-size: 14px;
        text-align: center;
        width: 60px;
        margin-left: 5px;
    }
}
@media only screen and (max-width: 320px) {
    .arrival-text {
        font-size: 12px;
        margin-left: 0px;
    }
}
.first-empty {
    width: 56px;
}

/* Paso 2 - Contenido Opci�n Servicio*/
@media only screen and (max-width: 1024px) {
    .container-service-type {
        padding: 0px 1px 0px 1px !important; 
    }
}
@media only screen and (max-width: 768px) {
    #service-div {
        display: none;
    }
    #service-name-container-tablet {
        display: block;
        padding: 0px;
        margin: 0px 15px 0px auto;
    }
    #service-type-container-tablet {
        display: block;
        padding: 0px;
        margin: 10px auto 0px 15px;
    }
    #seats-div {
        display: none;
    }
    #level-container-tablet {
        display: block;
        padding: 0px;
        margin: 0px 11px 0px auto;
    }
    #seats-container-tablet {
        display: flex;
        padding: 0px;
        margin: 0px 14px 0px 14px;
    }
    #price-container-tablet {
        display: block;
        padding: 0px;
        margin: 0px auto 0px 11px;
    }
}
@media only screen and (max-width: 425px) {
    #service-div {
        display: flex;
        margin-top: 20px;
    }
    #service-name-container-tablet {
        display: none;
    }
    #service-type-container-tablet {
        display: none;
    }
    #seats-div {
        display: flex;
    }
    #level-container-tablet {
        display: none;
    }
    #seats-container-tablet {
        display: none;
    }
    #price-container-tablet {
        display: none;
    }
    #service-name-container {
        padding: 0px;
        margin: 0px 25px 0px auto;
    }
}
@media only screen and (max-width: 375px) {
    #service-name-container {
        margin: 0px 20px 0px auto;
    }
}
@media only screen and (max-width: 320px) {
    #service-name-container {
        margin: 0px 15px 0px auto;
    }
}
.service-title {
    text-align: left;
    color: #BCBCBC;
    margin-bottom: 0px;
}
.service-title {
    text-align: center;
}
@media only screen and (max-width: 768px) {
    .service-title {
        font-size: 13px;
    }
}
@media only screen and (max-width: 320px) {
    .service-title {
        font-size: 12px;
    }
}
.service-name {
    text-align: left;
    font-weight: bold;
    color: #1B354A;
    margin-bottom: 0px;
}
.service-name {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}
@media only screen and (max-width: 768px) {
    .service-name {
        font-size: 16px;
    }
}
@media only screen and (max-width: 320px) {
    .service-name {
        font-size: 14px;
    }
}
.service-type {
    border-radius: 14px;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
@media only screen and (max-width: 768px) {
    #service-type-container {
        padding: 0px;
        margin: 10px auto 0px 25px;
    }
    .service-type {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}
@media only screen and (max-width: 375px) {
    #service-type-container {
        margin: 10px auto 0px 20px;
    }
}
@media only screen and (max-width: 320px) {
    #service-type-container {
        margin: 7px auto 0px 15px;
    }
}
.direct {
    background-color: #1B354A;
}
.scale {
    background-color: #FFB200;
}
.second-empty {
    width: 40px;
}

/* Paso 2 - Contenido Opci�n Asiento */
#seats-div {
    margin-top: 20px;
}
#level-container {
    padding: 0px;
}
@media only screen and (max-width: 768px) {
    #level-container {
        margin: 0px 11px 0px auto;
    }
}
@media only screen and (max-width: 375px) {
    #level-container {
        margin: 0px 8px 0px auto;
    }
}
@media only screen and (max-width: 320px) {
    #level-container {
        margin: 0px 6px 0px auto;
    }
}
.first-level {
    color: #BCBCBC;
    margin-bottom: 0px;
    font-family: "Montserrat", sans-serif;
}
.second-level {
    color: #BCBCBC;
    margin-bottom: 0px;
    font-family: "Montserrat", sans-serif;
}
@media only screen and (max-width: 768px) {
    .first-level {
        font-size: 14px;
    }
    .second-level {
        font-size: 14px;
    }
}
@media only screen and (max-width: 320px) {
    .first-level {
        font-size: 13px;
    }
    .second-level {
        font-size: 13px;
    }
}

#seats-container {
    display: flex;
    padding: 0px;
}
@media only screen and (max-width: 768px) {
    #seats-container {
        margin: 0px 14px 0px 14px;
    }
}
@media only screen and (max-width: 375px) {
    #seats-container {
        margin: 0px 12px 0px 12px;
    }
}
@media only screen and (max-width: 320px) {
    #seats-container {
        margin: 0px 9px 0px 9px;
    }
}
.seats {
    font-weight: bold;
    margin-bottom: 0px;
    font-family: "Montserrat", sans-serif;
}
@media only screen and (max-width: 768px) {
    .seats {
        margin-left: 0px;
        margin-right: 5px;
        font-size: 14px;
    }
}
@media only screen and (max-width: 320px) {
    .seats {
        font-size: 13px;
    }
}
.available {
    color: #000000;
}
@media only screen and (max-width: 768px) {
    .seat-icon {
        width: 15px;
        height: 20px;
    }
}
.almost-complete {
    color: #FFB200;
}
.complete {
    color: #E90E13;
}
#price-container {
    padding: 0px;
}
@media only screen and (max-width: 768px) {
    #price-container {
        margin: 0px auto 0px 11px;
    }
}
@media only screen and (max-width: 375px) {
    #price-container {
        margin: 0px auto 0px 8px;
    }
}
@media only screen and (max-width: 320px) {
    #price-container {
        margin: 0px auto 0px 6px;
    }
}
.price-first-level {
    color: #000000;
    font-weight: bold;
    margin-bottom: 0px;
    font-family: "Montserrat", sans-serif;
}
.price-second-level {
    color: #000000;
    font-weight: bold;
    margin-bottom: 0px;
    font-family: "Montserrat", sans-serif;
}
@media only screen and (max-width: 768px) {
    .price-first-level {
        font-size: 14px;
    }
    .price-second-level {
        font-size: 14px;
    }
}
@media only screen and (max-width: 320px) {
    .price-first-level {
        font-size: 13px;
    }
    .price-second-level {
        font-size: 13px;
    }
}
.third-empty {
    width: 30px;
}

/* Paso 2 - Contenido Opci�n Elegir*/
.btn-div {
    width: 200px;
}
@media only screen and (max-width: 768px) {
    .btn-div {
        margin: 0px auto 10px auto;
    }
}
@media only screen and (max-width: 768px) {
    #choosebtn-div {
        margin-top: 10px;
    }
}
.btn-check {
    width: 100%;
    font-weight: bold;
    background-color: rgb(77, 128, 246);
    border-color: rgb(77, 128, 246);
    color: #FFFFFF !important;
    font-family: 'Raleway', sans-serif;
    border: 0px;
    margin-bottom: 0px;
}
.btn-check:hover {
    color: #000000 !important;
}
.btn-check:active {
    color: #000000 !important;
}

.btn-check-r {
    width: 100%;
    font-weight: bold;
    background-color: rgb(77, 128, 246);
    border-color: rgb(77, 128, 246);
    color: #FFFFFF !important;
    font-family: 'Raleway', sans-serif;
    border: 0px;
    margin-bottom: 0px;
}

.btn-check-r:hover {
    color: #000000 !important;
}

.btn-check-r:active {
    color: #000000 !important;
}

.btn-uncheck {
    width: 100%;
    font-weight: bold;
    background-color: rgb(77, 128, 246);
    border-color: rgb(77, 128, 246);
    color: #FFFFFF !important;
    font-family: 'Raleway', sans-serif;
    border: 0px;
    margin-bottom: 0px;
}

/* Paso 2 - Advertencia Ruta */
.double-warning {
    margin: 2px 0px;
    display: flex;
}
.route-line-warning {
    border-bottom: 1px solid #EDEDED;
    display: flex;
}
.route-warning {
    margin: 0px 0px 4px 10px;
    font-size: 13px;
    font-weight: bold;
    color: #38576E;
    display: flex;
}
@media only screen and (max-width: 1440px) {
    .route-warning {
        margin: 0px 0px 4px 20px;
    }
}
@media only screen and (max-width: 768px) {
    .route-warning {
        margin: 0px;
        font-size: 12px;
        padding-bottom: 0px;
        border-bottom: 0px solid;
    }
}
.route-warning-info {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}
@media only screen and (max-width: 320px) {
    .route-warning-info {
        width: 18px;
        height: 18px;
        margin-right: 2px;
    }
}

/* Paso 2 - Croquis */
#row-croquis {
    padding: 10px 0px 20px 6px;
}
#back-step2 {
    margin-left: 10px;
}
.legend {
    margin: 2rem 0px 1rem 10px;
    font-weight: bold;
}
.legend-detail {
    font-size: .9rem;
    color: #99B1C2;
    padding-left: .5rem;
}
.flex-vertical {
    display: flex;
    align-items: center;
}
.background-legend {
    border-radius: .3em;
}
.back-person {
    background-color: #E6E6FA;
}
.back-available {
    border-style: solid;
    border-color: rgb(77, 128, 246);
}
.back-checked {
    background-color: #FFB200;
}
.square-legend-available {
    width: 18px;
    height: 18px;
}
.square-legend-checked {
    width: 23px;
    height: 23px;
}
.space-bottom {
    margin: 0px 0px 1rem 10px;
}
.bordered-detail {
    border-radius: 10px;
    border: 1px solid #ddd;
}
.bordered-croquis {
    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}
.color-title-detail {
    color: black;
    padding-top: 1rem;
    font-size: 14px;
    font-weight: bold;
}
.color-title-ida {
    color: rgb(77, 128, 246);
}
.color-title-retorno {
    color: rgb(77, 128, 246);
}
.back-detail {
    background-color: #E6E6FA;
}
.label-detail {
    margin-bottom: 0rem;
    font-weight: bold;
    color: #99B1C2;
}
#content-details {
    margin-top: 0px;
}
@media only screen and (max-width: 768px) {
    #content-details {
        margin-top: 25px;
    }
}
.data-detail {
    font-weight: bold;
    color: black;
    font-family: 'Montserrat', sans-serif;
}
.data-detail2 {
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 8px;
}
.data-address {
    font-family: 'Montserrat', sans-serif;
}
.dat-det-nivel1{
    margin: 0px;
}
.passenger-name {
    margin: 3px 0px;
}
.seat-price {
    margin: 3px 0px;
}
.total-departing {
    padding: 0px;
    margin: 0px;
    font-size: 14px;
}
.total {
    padding: 0px;
}
.total-return {
    font-size: 14px;
}
.monto_total_ida {
    margin: 0px;
    font-size: 14px;
}
.monto_total_retorno {
    font-size: 14px;
}

#normal-total-d {
    display: block;
}
#small-total-d {
    display: none;
}
@media only screen and (max-width: 375px) {
    #normal-total-d {
        display: none;
    }
    #small-total-d {
        display: block;
    }
}
#normal-total-r {
    display: block;
}
#small-total-r {
    display: none;
}
@media only screen and (max-width: 375px) {
    #normal-total-r {
        display: none;
    }
    #small-total-r {
        display: block;
    }
}

.btn-primary {
    color: #fff;
    background-color: rgb(77, 128, 246);
    border-color: rgb(77, 128, 246);
}
.btn-primary:hover {
    color: #fff;
    background-color: rgb(77, 128, 246);
    border-color: rgb(77, 128, 246);
}
.size-important {
    font-size: 1.2rem;
}
.content-route-detail {
    margin-left: 25px;
    margin-right: 25px;
}
@media only screen and (max-width: 425px) {
    .content-route-detail {
        text-align: center;
    }
}