/*
---------------------------------------------------------------------------------------------
OVERRIDES COMUN
---------------------------------------------------------------------------------------------
*/

header{
    margin-bottom: 0;
}

main{
    margin-bottom: 2rem;
}


/*
----------------------
AREA DE USUARIO
----------------------
*/

.header-logo{
    text-align: start;
}
.header-btn{
    display: flex;
    justify-content: end;
    align-items: center;
}

/*.btn.btn-secondary.btn-block{
    padding: 0.625rem 1.5rem;
    background: #d1392c;
    border-radius: 100px;
}
.btn-outline-primary{
    border-radius:100px;
    border: 1px solid rgba(0, 56, 99, 0.3);
    color: #003863;
    font-size: 1rem;
    padding: 10px 24px;
}
.btn-primary{
    background: #003863;;
    border-radius:100px;
    padding: 10px 24px;
    font-size: 1rem;
}*/
.btn-primary:hover{
    background: rgba(0, 56, 96, 0.87);
}
.img-user img {
    width: 100%;
    max-width: 600px;
    max-height: 600px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.08);
    padding: 0;
}
.user-circle {
    margin-left: auto;
    color:white;
    padding:10px;
    width:44px;
    text-align: center;
    background-color: #FF8300;
    border-radius: 30px;;
}
.user-circle a {
    text-decoration: none;
    color:white;
}
.user-title{
    color: #003863;
    font-size: 1.375rem;
    font-weight: 500;
}
.user-subtitle{
    color: #003863;
    font-size: 1rem;
    font-weight:400;
    margin-bottom: 1rem;
}
.user-title-bar{
    margin: 0 0 1.5rem 0;
}
.user-title-bar h5{
    color: #ffffff;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
}

.title-user {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    margin: 4rem 0 2rem 0;
    font-size: 1.5rem;
    font-weight: 400;

}
.title-user h2{
    font-size: 2.625rem;
}
.title-user p{
    font-size: 1.125rem;
}
.img-user img{
    height:auto;
}
.user-title .fas{
    color: #FF8300;
}
.user-title span {
    margin-right: 0.4rem;
}
.card-user{
    padding: 1.5rem;
    background: #ECF1F7;
    border-radius: 1rem;
    color: #003863;
    margin: 3rem 0;
}
.card-user .fas.fa-user {
    font-size: 2rem;
    border-radius: 100px;
    text-align: center;
}
.card-user .btn-div{
    display: flex;
    gap: 1rem;
    justify-content: end;
    height: 100%;
    align-items: center;
}
.card-user .text{
    display: flex;
    flex-direction: column;
    gap: 0;
}
.card-user a >.fal.fa-sign-out{
    font-weight: 400;
}
.img-user{
    display: flex;
    align-items: center;
    height: fit-content;
}
.details-outward, .details-return{
    z-index: 1000;
}
.download{
    white-space: nowrap;
    margin-top: auto;
}

/* sidebar */

.sidebar-user{
    margin-bottom: 1.5rem;
}
.sidebar-user a {
    text-decoration: none;
    color: #003863;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 1.25rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease-in-out;
}
.sidebar-user > a > span:nth-child(1){
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar-user > a > span:nth-child(3){
    text-align: center;
}
.sidebar-user a .fas{
    font-size: 2rem;
    color: rgba(0, 56, 99, 0.82);
    text-align: center;
    margin-right: 1rem;
}
.sidebar-user a .fas.fa-chevron-right{
    font-size: 0.75rem;
}
.sidebar-user a span:nth-child(3){
    font-size: 0.75rem;
    color: rgba(0, 56, 99, 1);
}

.sidebar-user a.not-allowed {
    cursor:not-allowed;
    background-color: #d4d4d4;
}
.sidebar-user a.not-allowed:hover {
    border:none !important;
}

.sidebar-user a.active,
.sidebar-user a:hover {
    background: #ECF1F7;
}

/* formularios */

.card{
    background: #ffffff;
    border-radius: 1rem;
    border: none;
    padding: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card.c-resume{
    padding: 2rem;
}

.card label,
.modify-body label{
    color: rgba(0, 56, 99, 0.82);
    margin-bottom: 0.625rem;
}
.card-option{
    padding: 0.5rem;
    width: max-content;
    background: #ECF1F7;
    border-radius: 100px;
    margin: 0 auto;
}
.card-option .btn-log{
    color: #003863;
    padding: 0.75rem 1.5rem;
    border-radius:100px;
    border: none;
}
.card-option .btn-log.selected {
    background: #003863;
    color: #ffffff;

}

.card .form-control,
.modify-body .form-control,
.modify-body .select2-container--bootstrap .select2-selection--single,
.card .select2-container--bootstrap .select2-selection--single{
    color: #003863;
    border: 1px solid rgba(0, 56, 99, 0.3);
    border-radius: 100px;
    padding: 0.375rem 1.5rem;
    font-size: 1rem;
    height: 50px;
    line-height: 2.4em;
}

.card .form-control::placeholder,
.modify-body .form-control::placeholder,
.form-control-datos .select2-container--bootstrap .select2-selection--single .select2-selection__rendered::placeholder{
    color: rgba(0, 56, 99, 0.82);
    font-size: 1rem;
    font-weight: 500;
}

.card .datepicker.form-control:disabled,
.card .datepicker.form-control[readonly],
.modify-body .datepicker.form-control:disabled,
.modify-body .datepicker.form-control[readonly]{
    background: #F4F7FB;
}
.card .form-group .fa-calendar-alt,
.card .form-group .fa-user,
.card .form-group .fa-clock{
    top: 2.2rem;
    right: 1.5rem;
}
.card .btn-applyfilter, .card .btn-quitfilter{
    width: 100%;
}
.modify-body .form-group .fa-calendar-alt{
    position: relative;
    top: -2.25rem;
    left: 11.5rem;
    color: #003863;
}
#login-modal .modal-content{
    border: 0;
    border-radius: 16px;
    padding: 2rem;
}
#login-modal .modal-header{
    border: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
#login-modal .modal-body, #login-modal .modal-body{
     padding: 0;
}

#login-modal .fa-calendar-alt {
    left: 10.75rem;
    top: -2.25rem;
}
.modify-body .modify-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #003863;
}
.modify-body .modify-pill {
    margin-left: 1rem;
    background: #003863;
    color: white;
    border-radius: 1rem;
    padding: 0.25rem 1rem;
 }
.dates-row .form-group .fa-calendar-alt{
    position: absolute;
    top: 2.5625rem;
    right: 2.25rem;
    color: #003863;
}
.form-group .select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection  {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    color: #003863;
    font-weight: 500;
}
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: #003863;
    color: #fff
}
.form-control,
.select2-container--bootstrap .select2-selection--single,
.form-group-datos .select2-selection.select2-selection--single{
    color: #003863;
    font-size: 1rem;
    font-weight: 500;
    height: 3.125rem;
    padding: 0.5rem 1rem;
    -webkit-appearance:none;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
}
.card .custom-control-label {
    font-size: 1rem;
}

/* login */
.card-header.simple2 {
    background: transparent;
    padding-bottom: 0.8875rem;
    text-transform: unset;
    color: #001476;
    font-size: 1.5rem;
    font-weight: 400;
}

.card.user-login{
    margin-top: 4rem;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card.user-login .card-header{
    padding: 2.5rem 3rem 1.25rem 3rem;
    border-bottom: none;
}
.card.user-login .card-body{
    padding-bottom: 0;
}

.user-login .password-show,
.myProfile .password-show,
.register .password-show,
.reset-password .password-show{
    position: absolute;
    top: 2.75rem;
    right:2rem;
    cursor: pointer;
    opacity: 0.75;
    color: #003863;
}
.user-login .password-show:hover,
.myProfile .password-show:hover,
.register .password-show:hover,
.reset-password .password-show:hover {
    opacity: 1;
}
.rememberForgot{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0 0 0;
}
.forgotPassword,
.goBack{
    color:rgba(0, 56, 99, 0.82);
}
.btn.btn-remember{
    white-space: nowrap;
    padding: 0.75rem 1rem;
}
/* INICIO */
.card .card-index {
    display: flex;
    flex-direction: column;
    text-align:center;
}

.card .card-index span {
    display:block;
}
.card .card-index span img{
    width:75%;
}
.card .card-index span {
   margin-bottom:10px;
}
.card .card-index span:nth-of-type(2) {
    color: #001476;

}
.card .card-index span:nth-of-type(4) {

    color: #FF8300 !important;
}
.card .card-index a {
    text-decoration: none;
    color:#8A8C8C;
}


/* Registro */

.card .legal-title {
    color: #001476;
    margin-bottom: 1rem;
}
.card .legal-text {
    font-size: 0.875rem;
    font-style: italic;
}
.card .legal-text b,
.card .legal-text strong{
    font-weight: 700;
    color: #000;
}

/* Mi perfil */

.myProfile .show-pass {
    color: #003863;
    cursor: pointer;
}
.myProfile .show-pass.open .fa-angle-down{
    transform: rotate(180deg);
}

/* Mis tickets */

/* Cabecera de los tickets*/

.tickets-header{
    display: flex;
    flex-direction: row;
    padding: 0;
}
.tickets-header > div{
    padding: 1.25rem
}

.tickets-header .route{
    flex: 3;
    display: flex;
    flex-direction: column;
}
.tickets-header .route .type {
    color: #003863;
    text-align: left;
    cursor:pointer;
}
.tickets-header .route .originDestination{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
    margin: 0.35rem 0;
}
.tickets-header .route .originDestination > :nth-child(1),
.tickets-header .route .originDestination > :nth-child(3){
    flex-grow: 1;
    flex-shrink: 0;
    font-size: 1.375rem;
    font-weight: 500;
    color: #003863;
    text-align: right;
    padding: 0 1.25rem 0 0;
}
.tickets-header .route .originDestination > :nth-child(3){
    text-align: left;
    padding: 0 0 0 1.25rem;
}
.tickets-header .route .originDestination > :nth-child(2){
    flex-shrink: 0;
    flex-grow: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tickets-header .route .originDestination .dot span {
    display: block;
    width: 5px;
    height: 5px;
    background: rgb(209, 57, 44);
    border-radius: 50%;

}
.tickets-header .route .originDestination .dot:last-child{

}
.tickets-header .route .originDestination .dot:last-child span{

}
.tickets-header .route .originDestination .bus{
    flex-grow: 1;
    display: flex;
    align-items: center;
    position: relative;
}
.tickets-header .route .originDestination .bus .fa-bus{
    padding: 10px 10px;
    color: rgba(0, 56, 99, 1);
    border-radius: 323px;
    background-color: #ECF1F7;
}
.tickets-header .route .originDestination .bus:before,
.tickets-header .route .originDestination .bus:after{
    flex-shrink: 1;
    width: 50%;
    display: inline-block;
    height: 2px;
    content: "";
    background: url(/web/img/flecha-horarios.png) right center repeat;
    margin: 0px 0px 0px 0.5rem;
}
.tickets-header .route .originDestination .bus .type{
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    width: unset;
}
.tickets-header .route .info-dates{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #003863;
}
.line-separate-ticket{
    border-top: 1px dashed #DC3545;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.tickets-header .tickets-actions{
    flex: 1;
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    justify-content: center;
    gap: 1rem;
}

.tickets-header .info-details-outward,
.tickets-header .info-details-return{
    margin-top: 1.5rem;
}

/* Cuerpo de los tickets */

.tickets-card{
    padding-top: 0;
}

.tickets-detail{
    color: #003863;
}
.tickets-detail .info-origindestination{
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    color: #003863;
    opacity: 60%;
    font-size: 1.125rem;
}
.info-origindestination > :nth-child(3) {
    margin-left: auto;
}

.info-details{
    color: #003863;
    white-space: nowrap;
}
.info-details .info-link a{
    color: #003863;
    text-decoration: none;
    margin-left: 1.25rem;
}
.tickets-card .tickets-detail-row{
    border-bottom: 2px solid #F1F5FB;
    padding: 1.25rem 0;
}
.tickets-card .ticket-item.ticket-item-pax,
.tickets-card .ticket-item.ticket-item-billete{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: #003863;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tickets-card .ticket-item.ticket-item-billete span:nth-child(2) {
    opacity:60%;
    margin-left:0.25rem;
}

.tickets-card .ticket-item.ticket-item-pax .fas {
    color: #003863;
    font-size: 1.25rem;
    margin-right: 1rem;
}
.tickets-card .ticket-item.ticket-item-route .far{
    margin: 0 1rem;
}
.tickets-card .ticket-item .blue {
    color:#001476;
}
.tickets-card .tickets-actions{
    margin-top: 1.25rem;
}
.tickets-card button {
    background: none;
    border-radius: 20px;
    border-style: solid;
    padding: 10px 18px 10px 18px;
    width: 130px;
}
.tickets-card button.btnmodify {
    color: #ffffff;
    background: rgba(0, 56, 99, 1);
    outline: none;
}
.tickets-card button.btnmodify:hover, .tickets-card button.btnmodify.active {
    color: white;
    background: rgba(0, 56, 99, 0.82);
}
.tickets-card button.btncancel {
    color: #DC3545;
    border-color: #DC3545;
    outline: none;
}
.tickets-card button.btncancel:hover,.tickets-card button.btncancel.active  {
    color: white;
    background-color: #DC3545;
}
.tickets-card .ticket-item-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #000;
    line-height: 1.2;
}
.tickets-card .ticket-item-info  .fas {
    font-size: 1.25rem;
    margin-right: 0.75rem;
    color: #8A8C8C;
}
.c-pax .resume-trip {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: flex-start;
}
.c-pax .localizador span:nth-child(2) {
    font-size: 1.5rem;
}
/* Otros */

.popupModify {
    text-align:left;
}
.c-header .resume-trip{
    flex-direction: column;
    gap: 1rem;
}
.c-header .resume-trip .share-dwl {
    display: flex;
    align-items: center;
    justify-content: center;
}

.duration .fa-clock{
    margin: 0 0.5rem 0 0;
}
.trip.selected {
    border: 2px solid #003863;
}

/*
---------------------------------------------------------------------------------------------
MEDIAQUERIES
---------------------------------------------------------------------------------------------
*/

/*Tablet*/
@media (max-width: 1024px) {
    .img-user img{
        width: 25.5rem;
    }
    .card.user-login {
        margin-left: 0;
    }

    .dates-row .form-group .fa-calendar-alt {

        left: 13.5rem;
    }
    .ticket-item.ticket-item-billete{
        font-size:0.875rem;
        padding: 0;

}

}

/*Tablet*/
@media (max-width: 991px) {
    .img-user img {
        width: 18.5rem;
    }

    .card-option {
        margin-left: 2rem;
    }

    .rememberForgot {
        flex-direction: column;
    }

    .card-user div:nth-child(2) {
        justify-content: center;
    }
    .card .btn-applyfilter, .card .btn-quitfilter{
        padding: 0.75rem 1.5rem;
    }

    .sidebar-user a .fas {
        font-size: 1.5rem;
    }

    .dates-row .form-group .fa-calendar-alt {
        left: 9.5rem;
    }

    .tickets-detail .info-origindestination {
        margin-top: 0.25rem;
    }

    .tickets-header {
        flex-direction: column;
    }

    .info-details {
        text-align: center;
    }

    .ticket-item.ticket-item-billete {
        font-size: 1rem;
        margin-left: 2.75rem;

    }
}

/*Movil horizontal*/
@media (max-width: 767px){

}

/*Movil verical*/
@media (max-width: 575px){
    .user-title-bar h5{
        font-size: 1.31rem;
    }
    .card-header .tilde,
    .user-title-bar .tilde{
        margin-right: 0.5rem;
    }

    .card-user .btn-div {
        justify-content: center;
    }

    .card .card-index span{
        margin-bottom: 0.1rem;
    }

    .card.user-login .card-header{
        padding: 2rem 1.25rem 2rem 1.25rem;
    }

    .card .btn-applyfilter, .card .btn-quitfilter {
        padding: 0.75rem 0.5rem;
    }
    .card-option {
        margin-left: 3.5rem;
    }

    .img-user img{
        display: none;
    }
    .title-user{
        margin: 2rem 1rem 0 1rem;
    }
    .tickets-header{
        padding: 0;
    }

    .dates-row .form-group .fa-calendar-alt {
        left: 8rem;
    }
    .tickets-header .route{
        flex: 1 1 100%;
    }
    .tickets-header .route .originDestination{
        margin: 0;
        flex-wrap: wrap;
    }
    .tickets-header .route .originDestination > :nth-child(1){
        order:1;
        padding: 0;
        text-align: left;
        width: 50%;
    }
    .tickets-header .route .originDestination > :nth-child(3){
        order:2;
        padding: 0;
        text-align: right;
        width: 50%;
    }
    .tickets-header .route .originDestination > :nth-child(2){
        order:3;
        width: 100%;
    }
    /*.tickets-header .route .originDestination .bus .type{*/
    /*    top: 1.5rem;*/
    /*}*/
    .tickets-card .ticket-item,
    .tickets-card .ticket-item.ticket-item-pax{
        align-items: flex-start;
        text-align: left;
    }
    .tickets-card .ticket-item.ticket-item-route{
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .tickets-card .ticket-item.ticket-item-billete{
        justify-content: flex-start;
       flex-direction: row;
    }
    .tickets-card .ticket-item.ticket-item-billete span:nth-child(1){
        margin-right: 0.5rem;
    }
    .tickets-header .pax{
        display: none;
    }
    .tickets-detail .info-origindestination {
        margin-top: 0.25rem;
    }
    .modify-body .form-group .fa-calendar-alt {
        left:9rem;
    }
    #login-modal .fa-calendar-alt {
        left: 18.5rem;;
    }
    /*.tickets-header > div {
        padding: 0.3rem;
    }
    .tickets-header .route .originDestination .dot {
        display:none;
    }
    .tickets-header .route .originDestination .bus .fa-bus {
        display:none;
    }
    .tickets-header .route .originDestination > :nth-child(2) {
     flex-shrink: inherit;
    }
    .tickets-header .pax {
        display:none;
    }
    .tickets-header .route .originDestination .bus .type {
        top: -0.9rem;
    }
    .tickets-header .route .originDestination > :nth-child(1), .tickets-header .route .originDestination > :nth-child(3) {
        font-size: 0.85rem;
    }
    .tickets-header .route .originDestination .bus:before, .tickets-header .route .originDestination .bus:after {
        display: none;
    }*/
}
@media (max-width: 376px) {
    .card-option {
        margin-left: 2.25rem;
    }
}

@media (max-width: 320px) {
    .card-option {
        margin-left: 0.75rem ;
    }
}