body {
  font-size: 0.875rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--vsf-secondary-color);
}

body a {
  color: var(--vsf-secondary-color);
}

.fa-solid,
.fa-light,
.fa-thin {
  color: var(--vsf-secondary-color);
}

h2 {
  font-weight: 600;
  font-size: 1.375rem;
  margin-bottom: 0;
}

p {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0;
}

h3 {
  font-size: 1rem;
  margin-bottom: 0;
  font-weight: 600;
}

h1 {
  font-size: 1.625rem;
  font-weight: 600;
}

strong {
  font-weight: 600;
}

ul {
  list-style: none;
  padding: 0;
}

.fa-regular.fa-chevron-right {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

.login,
.user-new {
  background-image: url("/web/img/login-fondo.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

main {
  background-color: #F5F5F5;
  min-height: calc(100vh - 236px);
}

.blue-light {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

.red-alert {
    color: #dc3545;
    font-weight: 600;
}

.blue-dark {
  color: var(--vsf-secondary-color);
}

.w-600 {
  font-weight: 600;
}

.logged-content .fa-solid,
.logged-content .fa-light,
.logged-content .fa-thin {
  color: rgba(1, 46, 94, 0.7);
}

/*Principal contenedores navegación*/
.container {
  max-width: 1200px;
}

main .container {
  display: flex;
  padding-top: 1.75rem;
  padding-bottom: 3rem;
}

.container .content-first {
  min-width: 350px;
  margin-right: 3.8125rem;
  background-color: white;
  height: fit-content;
  border-radius: var(--vsf-border-radius);
  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.05);
}

.container .content-first .nav-content {
  width: 100%;
}

main .medium {
  height: 2rem;
  background-color: white;
  border-top-right-radius: 5rem;
}

main .medium-blue {
  background-color: var(--vsf-primary-color);
}

.container .content-first ul {
  margin-bottom: 0;
}

.container .content-first li a {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.625rem;
}

.container .content-first li.active a {
  background-color: rgba(0, 159, 227, 0.1);
}

.container .content-first li a:hover,
.container .content-first li a.active {
  text-decoration: none;
  background-color: rgba(0, 159, 227, 0.1);
}

.container .content-first li:last-child a:hover, .container .content-first li.active:last-child a {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.container .content-first li:first-child a:hover, .container .content-first li.active:first-child a {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.container.mobile-menu .content-first li:last-child a:hover, .container.mobile-menu .content-first li:first-child a:hover{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.container .content-first li .imagen {
  display: flex;
  align-items: center;
}

.container .content-first li .imagen-inner {
  width: 35px;
  margin-right: 1rem;
  text-align: center;
}

.container .content-first li .imagen-inner img {
  width: 25px;
  height: 25px;
}


.container .content-first .badge-content {
  position: relative;
  width: 35px;
  text-align: center;
  margin-right: 1rem;
}

.container .content-first .badge-content .badge {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--vsf-primary-color);
  display: inline-block;
  top: -0.1rem;
  right: 0.6rem;
}

.container .content-first .badge-content .badge2 {
  position: absolute;
  min-width: 15px;
  min-height: 15px;
  background-color: var(--vsf-primary-color);
  bottom: -0.5rem;
  left: 0.4rem;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
}

/*General*/
.content {
  width: 100%;
}

.content .title-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.content .title-content .title {
  display: flex;
  align-items: center;
}

.title-content-sub {
  display: block;
  margin-bottom: 1.5rem;
}

.content .title-content-sub .title img {
  margin-right: 0.625rem;
}


.title-content-sub .title {
  margin-bottom: 0.4375rem;
  display: flex;
  align-items: center;
}

.title-content-sub .sub-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(1, 46, 94, 0.8);
}

/**/
.btn.btn-primary:hover {
  color: var(--vsf-primary-color);
  background-color: white;
  transition: all 0.3s ease;
  border-color: var(--vsf-primary-color);
}

.btn {
  font-weight: 600;
  padding: 0.94rem 2.58rem;
  font-size: 1rem;
}

.btn.btn-secondary:hover {
  color: var(--vsf-secondary-color);
  background-color: white;
  transition: all 0.3s ease;
  border-color: var(--vsf-secondary-color);
}

.container .shadow-content {
  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.04);
  border-radius: var(--vsf-border-radius);
  background-color: white;
}


button:focus {
  outline: 0;
}

/*Formularios*/
.form-group label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--vsf-secondary-color);
}

.form-group input {
  font-size: 1rem;
  font-weight: 600;
  color: var(--vsf-secondary-color);
}

.form-control::placeholder {
  color: var(--vsf-secondary-color);
}

.form-group .togglePass {
  cursor: pointer;
}

.form-group .fa-eye,
.form-group .fa-eye-slash {
  position: absolute;
  top: 1.8rem;
  right: 1rem;
}

.form-group {
  position: relative;
  filter: drop-shadow(0px 1px 20px rgba(0, 0, 0, 0.05));
}

.form-group label {
  position: absolute;
  left: 0.875rem;
  margin-bottom: 0;
  top: 0.625rem;
}

.form-group .form-control {
  color: var(--vsf-secondary-color);
  font-weight: 600;
}

.form-group input,
.form-group select {
  padding: 1.5625rem 0.875rem 0.6875rem;
  height: 3.5rem;
}
.form-group select{
  padding-left: 0.6rem;
}
.form-group select option {
  font-size: 1rem;
  font-weight: 600;
  color: var(--vsf-secondary-color);
}

/*Formularios check*/
.content .check-content {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  background-color: white;
  border-radius: var(--vsf-border-radius);
  margin-bottom: 0.625rem;
  align-items: center;
  filter: drop-shadow(0px 1px 20px rgba(0, 0, 0, 0.05));
  cursor: pointer;
  min-height: 50px;
}

.content .check-content .imagen-content {
  display: flex;
  align-items: center;
}

.content .check-content .imagen-content img {
  margin-right: 0.875rem;
}

.content .check-content .imagen-content div {
  font-weight: 600;
  color: rgba(21, 22, 36, 1);
}

.content .check-content .imagen-content p {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0;
  color: rgba(1, 46, 94, 0.8);
}

.content .check-content .imagen-content .imagen {
  width: 2.3rem;
  margin-right: 0.75rem;
  text-align: center;
}

.content .check-content .imagen-content .imagen img {
  margin: 0;
}

label.custom-control-label {
  cursor: pointer;
  padding-top: 0.2rem;
  color: rgb(151, 151, 151);
  margin-left: 0.7rem;
}

.form-group .custom-control-label {
  position: relative;
  margin-bottom: 0.5rem;
}

.custom-control-input {
  width: 0.875rem;
  height: 1rem;
}

.content .check-content .fa-circle::before {
  font-size: 1.625rem;
  color: #869DA7;
  opacity: 0.3;
  cursor: pointer;
}

.content .check-content .fa-circle-check::before {
  font-size: 1.625rem;
  color: var(--vsf-primary-color);
  cursor: pointer;
}

.custom-control.custom-checkbox .custom-control-label::before {
  border-radius: 0;
}

.custom-control.custom-checkbox a.condiciones {
  color: rgb(151, 151, 151);
  text-decoration: underline;
}

.content .text-password a {
  color: var(--vsf-primary-color);
}
.content .text-delete a {
    color: #dc3545;
}

.custom-control.custom-checkbox {
  font-size: 0.75rem;
  color: rgba(100, 100, 100, 1);
  margin-bottom: 0.5rem;
  font-weight: 600;
  padding-left: 0;
}

.custom-control.custom-checkbox a {
  color: var(--vsf-primary-color);
}

/* Notificaciones */

.trasmed-imbeeChat-div{
  margin-bottom: 1rem;
}
.trasmed-imbeeChat-container{
  position: relative;
  display: flex;
}
.trasmed-imbeeChat-div .trasmed-imbeeChat-container .w-imbee-wrapper{
  position: relative !important;
  height: auto !important;
  min-height: 500px !important;
}
.trasmed-imbeeChat-div .trasmed-imbeeChat-container .w-imbee-container{
  box-shadow: unset;
  background: transparent !important;
}
.trasmed-imbeeChat-div .trasmed-imbeeChat-container .w-imbee-header{
  display: none;
}


/*Login*/
.login .login-content {
  min-width: 350px;
  margin-right: 3.8125rem;
  background-color: white;
  border-radius: var(--vsf-border-radius);
  box-shadow: 4px 0px 34px rgba(0, 0, 0, 0.1);
}

.login .logo-content {
  display: flex;
  background-color: var(--vsf-primary-color);
  padding: 1.625rem 1.9375rem 1.8125rem 1.375rem;
  border-radius: var(--vsf-border-radius);
  color: white;
  font-size: 0.9375rem;
  align-items: end;
  border-bottom-right-radius: 0;
}

.logo-content h1 {
  margin-bottom: 0;
}

.login .logo-content .saludo h2 {
  color: white;
  margin-bottom: 0;
}

.login .logo-content .imagen {
  border: 3px solid white;
  width: 77px;
  height: 77px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.login .form-content {
  padding: 0 1.9375rem 1.3125rem 1.4375rem;
  background-color: #FFFFFF;
  border-radius: var(--vsf-border-radius);
}

.login .form-content .login-inicio {
  color: var(--vsf-secondary-color);
  margin-bottom: 0.9375rem;
  font-size: 0.8125rem;
  font-weight: 400;
}

.login .form-content .login-inicio span {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

.login .form-content .form-group {
  position: relative;
  margin-bottom: 1.0625rem;
}

.login .form-content .form-group input {
  padding: 1rem 3.0625rem;
  height: 2.625rem;
  font-size: 0.75rem;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.login .form-content .form-control::placeholder {
  color: rgb(47, 46, 43);
  font-weight: 400;
}

.login .form-content .form-group .fa-solid {
  position: absolute;
  font-size: 1.0625rem;
  top: 0.8rem;
  left: 1rem;
}

.login .form-content .form-group .fa-solid.fa-eye,
.login .form-content .form-group .fa-solid.fa-eye-slash {
  position: absolute;
  font-size: 0.9375rem;
  top: 1rem;
  right: 1.5rem;
  left: unset;
  color: rgba(47, 46, 43, 0.7);
}

.login .form-content .form-group .fa-solid.fa-eye {
  opacity: 0.8;
}

.login .login-content .btn {
  width: 100%;
}

.login .remember-password {
  text-align: center;
  margin-bottom: 0.9375rem;
}

.login .remember-password button {
  font-size: 0.75rem;
  border: 0;
  background-color: white;
  color: var(--vsf-secondary-color);
  padding: 0;
}

.login form .btn.btn-secondary {
  margin: 0;
}

.login .content .card {
  display: flex;
  flex-direction: row;
  padding: 1.1875rem 1.375rem 1.1875rem;
  background-color: white;
  margin-bottom: 1.375rem;
  width: 350px;
  min-height: 101px;
  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.05);
  border: 0;
}

.login .content .card.card-key {
  flex-direction: column;
}

.login .content .card.card-key .text-key{
  background-color: var(--vsf-secondary-color);
  border-radius: 0.375rem; 
  margin-top: 0.5rem;
  text-align: center;
  color: white;
  padding: 0.625rem;
  font-size: 0.75rem; 
  font-weight: 600;
}

.login .content .card img {
  font-size: 1.875rem;
  margin-right: 0.75rem;
}


.login .content h1 {
  font-size: 1.25rem;
  margin-bottom: 1.625rem;
  color: white;
  line-height: 1.78rem;
}

.login .content .title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.25rem;
}


.login .content .text {
  font-size: 0.75rem;
}

.login .content .badge-content {
  position: relative;
}

.login .content .badge-content .badge {
  width: 10px;
  height: 10px;
  background-color: var(--vsf-primary-color);
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  left: 0.8rem;
  top: 0.2rem;
}


.login .content .card.card-blue{
  width: 100%;
  background: var(--vsf-primary-color);
  color: white;
  align-items: center;
}

/*Página logueado*/
.logged .logged-content {
  min-width: 350px;
  margin-right: 3.5rem;
  border-radius: var(--vsf-border-radius);
  background-color: white;
  margin-bottom: 1.875rem;
  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.08);
  max-height: 440px;
}

.logged .logo-content {
  display: flex;
  background-color: var(--vsf-primary-color);
  padding: 1.4375rem 1.875rem 1.6875rem 1.375rem;
  border-radius: var(--vsf-border-radius);
  color: white;
  font-size: 0.9375rem;
  align-items: end;
  border-bottom-right-radius: 0;
}


.logged .logo-content .saludo h2 {
  color: white;
  margin-bottom: 0;
}

.logged .logo-content .imagen {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background-color: var(--vsf-secondary-color);
  border-radius: 50%;
}

.logged .logo-content .imagen img {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.logged .nav-content {
  padding: 0 1.375rem 2rem;
  background-color: #FFFFFF;
  border-radius: var(--vsf-border-radius);
}

.logged .nav-content .login-inicio {
  color: var(--vsf-secondary-color);
  margin-bottom: 0.9375rem;
  font-size: 0.75rem;
  font-weight: 400;
}

.logged .navcontent .login-inicio span {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

.logged .nav-content .text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--vsf-secondary-color);
  margin-bottom: 1.1875rem;
}

.logged .nav-content li a .fa-light {
  font-size: 1.375rem;
  margin-right: 0.6875rem;
}

.logged .nav-content li a img {
  height: auto;
  margin-right: 0.6875rem;
}

.logged .nav-content li a .badge-content {
  position: relative;
}

.logged .nav-content li a .badge-content .badge {
  width: 8px;
  height: 8px;
  background-color: var(--vsf-primary-color);
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  left: 0.6rem;
  top: -0.1rem;
}

.logged .nav-content ul {
  margin-bottom: 1.375rem;
}

.logged .nav-content li {
  margin-bottom: 0.9375rem;
}

.logged .nav-content li .item-nav {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.75rem;
}

.logged .btn-logout {
  text-align: center;
}

.logged .btn-logout .btn {
  padding: 0.94rem 4.1rem;
}

.logged .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: var(--vsf-border-radius);
  padding-right: 1.5625rem;
  color: rgba(142, 139, 129, 1);
  margin-bottom: 1.875rem;
  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.05);
}

.logged .item.item-icon {
  padding: 1.06rem 0.69rem 1.06rem 0.69rem;
  width: 100%;
}

.logged .item .imagen {
  position: relative;
  overflow: hidden;
  width: 40%;
  padding-bottom: 40.79%;
  display: block;
  margin-right: 1.1875rem;
  border-top-left-radius: var(--vsf-border-radius);
  border-bottom-left-radius: var(--vsf-border-radius);
  flex-shrink: 0;
}

.logged .item .imagen .imagen-inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.logged .item .imagen .imagen-inner img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.6s ease;
}

.logged .item .text {
  margin: 0 0.5rem;
  position: relative;
}

.logged .item .text .badge {
  position: absolute;
  top: 0.1rem;
  right: 0rem;
  background-color: var(--vsf-primary-color);
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 0.761rem;
  width: 0.9375rem;
  height: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logged .item .text div:nth-child(1) {
  font-weight: 600;
  color: var(--vsf-secondary-color);
  line-height: 1rem;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
}

.logged .item:hover .text div:nth-child(1) {
  text-decoration: underline;
  color: var(--vsf-secondary-color);
}

.logged .item .text p {
  font-size: 0.8125rem;
  line-height: 0.9375rem;
  margin-bottom: 0;
  color: rgb(151, 151, 151);
  font-weight: 400;
}

.logged .item:hover {
  text-decoration: none;
}

.logged .item:hover img {
  transform: scale(1.1);
}

.logged .item.item-icon:hover img {
  transform: none;
}

/*Modal general*/
.modal-content {
  border-radius: var(--vsf-border-radius);
  border: 0;
}

.fade {
  background-color: rgba(1, 46, 94, 0.5);
}

.modal-dialog.modal-dialog-centered {
  justify-content: center;
}

.modal-header .imagen {
  text-align: center;
  width: 100%;
}

.modal-content {
  padding: 2.1875rem 2.375rem 1.8125rem;
  max-width: 396px;
}

.modal-header {
  border-bottom: 0;
  padding: 0 0 1rem;
}

.modal-body {
  text-align: center;
  font-weight: 600;
  padding: 0 0 1rem;
  letter-spacing: 1px;
}

.modal-footer {
  border-top: 0;
  display: block;
  text-align: center;
  padding: 0;
}

.modal-footer .btn.btn-secondary {
  margin-bottom: 0.6875rem;
}

.modal-header .close span {
  position: absolute;
  top: 2rem;
  right: 2rem;
  backdrop-filter: blur(16px);
  color: rgb(151, 151, 151);
}

.modal-footer .fa-solid.fa-check {
  color: white;
  margin-right: 0.5rem;
  font-size: 0.9375rem;
}

.modal-footer a:hover .fa-solid.fa-check {
  color: var(--vsf-secondary-color);
}

.modal-footer btn.btn-secondary:hover .fa-solid.fa-check {
  color: var(--vsf-secondary-color);
}

.modal-footer .btn {
  max-width: 281px;
  padding: 0.94rem 0;
  width: 100%;
}

.modal-content .modal-body .sub-title {
  font-size: 0.75rem;
  font-weight: 400;
  margin-top: 0.5625rem;
}


/*Modal modificar reserva*/
.modal-footer .fa-spinner {
  display: block;
  font-size: 1.75rem;
  color: var(--vsf-primary-color);
}

.modal-footer .modal-link {
  margin-bottom: 0.8125rem;
  text-align: left;
}

.modal-footer .modal-link a {
  display: flex;
  align-items: center;
  padding: 0 0.8125rem;
  border: 1px solid rgba(113, 126, 153, 0.2);
  border-radius: 0.625rem;
  font-weight: 600;
  height: 56px;
}

.modal-footer .modal-link a:hover {
  text-decoration: none;
  background-color: rgba(0, 159, 227, 0.1);
  border: 1px solid rgba(0, 159, 227, 0.01);
}

.modal-footer .modal-link a div {
  width: 33px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.9375rem;
}

.modal-content.modal-fixed {
  padding: 2.1875rem 1.725rem 1rem;
}

/*Modal añadir una reserva*/

.modal-content.newBooking {
  padding: 2.1875rem 1.875rem 1.8125rem;
}

.modal-body .title {
  margin-bottom: 1.125rem;
}

.modal-content.newBooking .modal-body {
  padding: 0;
}

.modal-content.newBooking .modal-footer .btn {
  font-size: 1rem;
  width: 100%;
  padding: 0.8125rem 0;
}

/*Modal Eliminar pasajero o vehículo*/
.modal.deleteInfo .modal-content {
  padding: 2.1875rem 2.375rem 1.8125rem;
}

/*Modal contraseña*/
.modal.passwordModal .form-group {
  position: relative;
  margin-bottom: 1.375rem;
}

.modal.passwordModal .form-group .fa-solid {
  position: absolute;
  font-size: 1.0625rem;
  top: 0.8rem;
  left: 1rem;
}

.modal.passwordModal .form-group input {
  padding: 1rem 3.0625rem;
  height: 2.625rem;
  font-size: 0.75rem;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.modal.passwordModal .sub-text {
  margin-bottom: 0.9375rem;
  padding: 0 1rem;
  color: rgb(142, 139, 129);
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 1.35;
  letter-spacing: 0;
}

.modal.passwordModal .form-control::placeholder {
  color: rgb(47, 46, 43);
  font-weight: 400;
}

.modal.passwordModal .modal-body {
  padding: 0;
}

.modal.passwordModal .btn {
  margin-bottom: 0.625rem;
  width: 100%;
  padding: 0.9375rem 0;
}

.modal.passwordModal .link {
  color: var(--vsf-secondary-color);
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 400;
  margin-top: 0.5rem;
}

.modal.passwordModal .link a {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

.modal.passwordModal .modal-content {
  padding: 1.9375rem 2.375rem 1.625rem;
}

.modal.passwordModal .modal-header {
  border-bottom: 0;
  padding: 0 0 1.3125rem;
}

.modal.passwordModal .alert-content {
  display: flex;
  align-items: center;
  text-align: left;
  background-color: rgba(0, 159, 227, 0.1);
  border-radius: var(--vsf-border-radius);
  padding: 0.625rem;
  font-size: 0.75rem;
  color: rgba(1, 46, 94, 0.8);
  margin-bottom: 0.5rem;
}

.modal.passwordModal .alert-content .fa-solid.fa-circle-info {
  color: var(--vsf-primary-color);
  margin-right: 0.25rem;
}

.modal.passwordModal.password2 .link {
  opacity: 50%;
}

.modal.passwordModal.password2 .form-group {
  margin-bottom: 0.6875rem;
}

.modal.passwordModal .fa-eye::before,
.modal.passwordModal .fa-eye-slash::before {
  right: 0;
  position: absolute;
  color: rgba(47, 46, 43, 0.7);
  font-size: 0.9375rem;
  top: 0.2rem;
}

.modal.passwordModal .modal-body .text {
  margin-bottom: 1.5625rem;
}

.modal.passwordModal.password3 .form-group {
  margin-bottom: 0.75rem;
}

.modal.passwordModal.password3 .btn {
  margin-bottom: 0;
}

.modal.passwordModal .small-text {
  font-size: 0.625rem;
  line-height: 0.761875rem;
  color: rgb(0, 46, 94);
  margin-top: 0.5rem;
  font-weight: 400;
}

/*Info frecuente*/
.information .links {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

.information .links a {
  padding: 0.6rem 1rem;
  background-color: white;
  border-radius: var(--vsf-border-radius);
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-right: 0.9375rem;
}

.information .links a .imagen {
  width: 39px;
  height: 32px;
  display: flex;
  align-items: center;
}

.information .links a span {
  font-weight: 600;
}

.information .container .content-first {
  margin-bottom: 0.875rem;
}

.information .content .title-content .title img {
  margin-right: 0.625rem;
}

.information .content .title-content {
  margin-bottom: 2.25rem;
}

.information .content .item {
  display: flex;
  align-items: center;
  padding: 0.82rem 1.1875rem;
  background-color: white;
  justify-content: space-between;
  border-radius: 0.75rem;
  color: rgba(1, 46, 94, 0.8);
  margin-bottom: 0.875rem;
  filter: drop-shadow(0px 1px 20px rgba(0, 0, 0, 0.05));
}

.information .content .item .imagen-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.information .content .item .imagen-content .imagen {
  margin-right: 0.75rem;
}

.information .imagen-content .imagen-inner img {
  width: 27px;
  height: 27px;
}

.information .content .text {
  margin-bottom: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.information .content .text .btn {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}

.information .content .item .info div:nth-child(1) {
  font-weight: 600;
  color: var(--vsf-secondary-color);
  line-height: 1.0625rem;
}

.information .content .item .info div:nth-child(2) {
  font-weight: 500;
  line-height: 1.5rem;
  font-size: 0.75rem;
}

.information .content .btn.btn-delete {
  padding: 0;
  font-size: 0.625rem;
  color: rgb(228, 16, 66);
  margin-bottom: 1.0625rem;
}

.information .content .btn.btn-delete:focus,
.information .content .btn.btn-delete.focus {
  box-shadow: none;
}

.information .content .btn.btn-delete span {
  margin-right: 0.3125rem;
}

/*Información cuando no hay añadido nada */

.card.empty-card {
  padding: 1.25rem 1.625rem 1.0625rem 4.5rem;
  border: 0;
  box-shadow: 4px 0px 34px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.card.empty-card img {
  position: absolute;
  left: 1.3rem;
}

.card.empty-card img.imagen-passenger {
  left: 1.5rem;
  top: 1rem;
}

.card.empty-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.9375rem;
  color: var(--vsf-secondary-color);
}

.card.empty-card .text-content {
  font-size: 0.75rem;
  margin-bottom: 0.9375rem;
}

.card.empty-card .btn {
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
}


/*Añadir vehículo y pasajero*/
.content .title-content.subtitle-content {
  display: block;
  margin-bottom: 1.125rem;
}

.content .title-content.subtitle-content img {
  margin-right: 0.8125rem;
}

.content .title-content.subtitle-content h2 {
  font-size: 1.25rem;
}

.content .title-content.subtitle-content .title {
  margin-bottom: 1rem;
}

.content .title-content.subtitle-content p {
  font-size: 0.8125rem;
  margin-bottom: 0;
  color: rgba(1, 46, 94, 0.8);
  font-weight: 500;
}

.content .title-content.subtitle-content p .blue-light {
  font-weight: 500;
}

.content h4 {
  font-size: 0.9375rem;
  margin-bottom: 1.125rem;
  font-weight: 600;
  color: rgba(1, 46, 94, 0.8);

}

.content .tipo {
  margin-bottom: 0.5625rem;
}

.content .datos h4 {
  margin-bottom: 0.75rem;
}

.content .datos button {
  padding: 0.94rem 3.05rem;
  font-weight: 600;
}

.new-passenger .content .title-content.subtitle-content img {
  margin-right: 0.5rem;
}

/*Perfil*/
.profile .container .content .title-content {
  margin-bottom: 1.6875rem;
  align-items: start;
}

.profile .content .title-content h2 {
  margin-bottom: 0.4375rem;
}

.profile .content .title-content p {
  line-height: 1.1875rem;
  font-size: 0.8125rem;
}

.profile .content .title-content .title a {
  font-size: 0.8125rem;
  color: var(--vsf-primary-color);
  text-decoration: underline;
}

.profile .content .title-content img {
  width: 109px;
  height: 109px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.profile .content .item-user {
  margin-right: 1.0625rem;
  border-radius: 50%;
}


.profile .content .title-content .btn {
  border: none;
  text-decoration: underline;
  margin-top: 1.5rem;
  padding: 0;
  font-weight: 700;
  font-size: 0.875rem;
}

.profile .content .title-content .btn span {
  color: var(--vsf-primary-color);
  margin-right: 0.3rem;
}

.profile .content .title-content .btn:hover {
  background-color: transparent;
  color: var(--vsf-primary-color);
}

.profile .content .text-password {
  font-size: 0.625rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}
.profile .content .text-delete {
    font-size: 0.625rem;
    margin-top: 2.5rem;
}

.profile .btn-content {
    text-align: end;
    margin-top: 0.25rem;
}


.delete .btn-content {
    text-align: end;
    margin-top: 0.25rem;
}

.profile .alert {
  background-color: rgba(0, 159, 227, 0.1);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}

.profile .alert img {
  margin-right: 0.5rem;
}


/*Mis viajes*/
.travel .container .content-first {
  margin-bottom: 1.25rem;
}

.travel .content {
  width: 100%;
}

.travel .content .title-content .title img {
  margin-right: 0.625rem;
}

.travel .content .title-content h2 {
  margin-right: 0.25rem;
}

.travel .content .title-content .title div {
  font-size: 1rem;
  margin-right: 1rem;
}

.content .title-content .title .filtrar {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

.travel .reservas {
  border-bottom: 1px dashed #E0E0E0;
}

.travel .content .viaje {
  display: flex;
  align-items: center;
  padding: 1.1875rem 1.3125rem;
  position: relative;
  margin-bottom: 1rem;
}

.travel .viaje.vuelta {
  margin-bottom: 0;
}

.travel .delete {
  margin-bottom: 1rem;
}

.travel .delete .btn.deleteTrip {
  background-color: #F5F5F5;
  border: 0;
  padding: 0;
  font-size: 0.625rem;
  color: rgb(228, 16, 66);
  margin-bottom: 1.0625rem;
}

.travel .delete .btn.deleteTrip:focus,
.travel .delete .btn.deleteTrip.focus {
  box-shadow: none;
}

.travel .delete span {
  color: rgb(228, 16, 66);
}

.content .circle-border-left {
  background-color: #F1F1F1;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
}

.content .circle-border-right {
  background-color: #F1F1F1;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}


.travel .content .viaje .destino {
  display: flex;
  justify-content: start;
  margin-right: 23px;
  flex: 1 1 calc(50% - 23px);
}

.travel .content .viaje .destino h3 {
  font-weight: 700;
}

.travel .content .viaje .estancia {
  display: flex;
  justify-content: space-between;
  flex: 1 1 calc(30% - 23px);
}

.travel .content .viaje .city {
  max-width: 120px;
  width: 100%;
}

.travel .content .viaje .imagen {
  display: flex;
  align-items: center;
}

.travel .content .viaje .imagen img {
  margin-right: 0.9375rem;
}

.travel .content .viaje .destino.second {
  justify-content: start;
}

.travel .content .viaje .destino div:first-child {
  margin-right: 1.875rem;
}

.travel .content .viaje .destino div:last-child {
  margin-left: 1.875rem;
}

.travel .content .viaje .duplicar {
  display: flex;
  justify-content: end;
  flex: 1 1 calc(30% - 23px);
}

.travel .content .viaje .duplicar a {
  color: var(--vsf-primary-color);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.travel .content .viaje .duplicar a span {
  font-size: 1.25rem;
  margin-left: 0.5625rem;
  font-weight: 400;
}

.travel .content .viaje .duplicar>span {
  font-size: 1.75rem;
  color: var(--vsf-primary-color);
  display: none;
}

.travel .content .viaje .duplicar a:hover {
  text-decoration: none;
}

.travel .content .moreInfo.hidden {
  display: none;
}

/*Notificaciones*/
.notifications .container .title img {
  margin-right: 0.625rem;
}

.notifications .content .title-content h2 {
  margin-right: 0.25rem;
}

.notifications .content .title-content .title .number {
  font-size: 1rem;
  margin-right: 1rem;
}

.notifications .content .title-content .title .filtrar {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

/*Ajustes*/
.settings .content .card-notification {
  padding: 1.5rem 1.5rem 1.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: var(--vsf-border-radius);
  margin-bottom: 1.375rem;
  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.08);
}

.content .card-notification .imagen-content {
  display: flex;
  align-items: center;
}

.content .card-notification .imagen-content .circle-bell {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vsf-primary-color);
  border-radius: 50%;
  margin-right: 0.8125rem;
}

.content .card-notification .imagen-content .circle-bell span {
  color: white;
}

.settings .content .check-progress input:checked~span::after {
  background-color: white;
  transform: translate(25px, -1px);
  border: 1px solid var(--vsf-primary-color);
}

.settings .content .check-progress {
  margin-bottom: 0;
  cursor: pointer;
}

.settings .content .check-progress input:checked~span {
  background-color: var(--vsf-primary-color);
  border: 1px solid var(--vsf-primary-color);
}

.settings .content .check-progress input {
  display: none;
}

.settings .content .check-progress span {
  display: inline-block;
  width: 3rem;
  height: 1.375rem;
  ;
  background-color: #DEDCD5;
  border-radius: 1.375rem;
  border: 1px solid #C2CBD3;
}

.settings .content .check-progress span:after {
  content: "";
  display: block;
  width: 1.375rem;
  ;
  height: 1.375rem;
  background-color: white;
  border: 1px solid var(--vsf-primary-color);
  border-radius: 1.375rem;
  transition: 0.5s;
}

.settings .content .card-notification .imagen-content .text p {
  color: rgba(21, 22, 36, 1);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.0625rem;
  margin-bottom: 0;
}


/*Reservas*/
.bookings .container .shadow-content {
  margin-bottom: 0.5625rem;
}

.bookings .content .title-content h2 {
  margin-right: 0.875rem;
}

.bookings .content .title-content img {
  margin-right: 0.75rem;
}

.bookings .content .title-content .btn.btn-outline-primary {
  margin-right: 0.875rem;
}

.bookings .content .title-content .btn {
  padding: 0.94rem 1.48rem;
}

.bookings .content .title-content {
  align-items: start;
}

.bookings .content .title {
  margin-bottom: 0.365rem;
}

.bookings .content .sub-title {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.9375rem;
}

.bookings .title-content .link .btn.active {
  border: 1px solid var(--vsf-primary-color);
  background-color: #DDEDF4;
  ;
}

.bookings .title-content .link .btn:focus {
  box-shadow: none;
}

.bookings .title-content .link .btn {
  color: var(--vsf-secondary-color);
  font-size: 0.75rem;
  padding: 0.6rem 1.25rem;
  background-color: white;
  margin-right: 0.875rem;
}

.bookings .title-content .link a:hover {
  text-decoration: none;
}

.bookings .cancel {
  margin-bottom: 1.5625rem;
}

.bookings .cancel span {
  color: var(--vsf-primary-color);
}

.bookings .cancel a {
  color: rgba(1, 46, 94, 0.8);
  font-size: 0.75rem;
}

.bookings .content .title-content .reservas {
  display: flex;
  align-items: center;
  padding: 1.1875rem 1.3125rem;
  background-color: white;
  position: relative;
}

.bookings .mascota {
  display: flex;
  align-items: center;
  padding: 0 0.9375rem 0 1rem;
}

.bookings .mascota .imagen-inner {
  border: 1px solid transparent;
  padding: 3px 4px 2px 8px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.bookings .mascota.watch .imagen-inner {
  border-color: var(--vsf-secondary-color);
}

.bookings .mascota a {
  background-color: var(--vsf-secondary-color);
  color: white;
  padding: 7px 8px 7px 4px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  font-size: 0.625rem;
  flex-wrap: nowrap;
  align-items: center;
  display: none;
}

.bookings .mascota.watch a {
  display: flex;
}

.bookings .mascota a span {
  margin-right: 0.2rem;
}

.bookings .content .reservas a:hover {
  text-decoration: none;
}

.bookings .content .reservas {
  border-bottom: 1px dashed #E0E0E0;
  justify-content: space-between;
}

.bookings .content .reservas.reservas-destino {
  justify-content: space-between;
  border-bottom: 0;
}

.bookings .content .reservas.reservas-destino {
  align-items: start;
  padding: 0.75rem 1rem;
}

.bookings .content .reservas.reservas-destino .check-destino {
  display: flex;
  flex-grow: 1;
}

.bookings .content .reservas.reservas-destino .check-destino span {
  color: rgba(113, 126, 153, 0.2);
  font-size: 1.625rem;
  margin-right: 0.9375rem;
  cursor: pointer;
  padding-top: 0.1rem;
}

.bookings .content .reservas.reservas-destino.check {
  background-color: rgba(0, 159, 227, 0.1);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.bookings .content .reservas.reservas-destino.doubleCheck.check {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bookings .content .reservas .date-content {
  padding-top: 0.3rem;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--vsf-primary-color);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
}

.bookings .content .reservas.reservas-destino .check-destino .fa-circle-check {
  color: var(--vsf-primary-color);
}


.bookings .content .reservas div.title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0;
  padding-top: 0.1rem;
}

.bookings .content .reservas.reservas-destino .date-content .date {
  color: var(--vsf-secondary-color);
  font-size: 0.75rem;
  margin: 0 0.3rem;
  font-weight: 500;
}

.bookings .reservas .destino .text.text-car {
  border-right: 1px dashed #009FE3;
}

.bookings .content .reservas.reservas-destino .hour {
  font-size: 1.25rem;
  font-weight: 800;
  margin-right: 0.5rem;
  max-width: 78px;
  text-align: center;
  width: 100%;
  min-width: 78px;
}

.bookings .content .moreTime {
  color: var(--vsf-primary-color);
  font-size: 0.625rem;
  font-weight: 600;
  padding-right: 1.2rem;
  text-align: right;
  padding-top: 0.1rem;
}

.bookings .content .reservas .second-ticket {
  margin-left: 2.6875rem;
}

.bookings .content .reservas .second-destino {
  margin-right: 0.625rem;
}

.bookings .content .reservas .imagen {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  font-size: 0.625rem;
  border-left: 1px dashed #009FE3;
  width: 118px;
}

.bookings .content .reservas .imagen .imagen-inner {
  height: 30px;
  width: 30px;
  margin-right: 0.375rem;
}

.bookings .content .reservas .second-destino.cityW {
  text-align: right;
}

/*Bookings empty*/
.bookings .empty.content .title-content-sub .title img {
  margin-right: 1.0625rem;
}

.bookings .empty .btn {
  padding: 0.94rem 2.57rem;
}

.bookings .content .moreInfo.hidden {
  display: none;
}

/*Bookings y favoritos*/
.content .reservas {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  position: relative;
}

.content .reservas .destino {
  display: flex;
  align-items: center;
  flex: 1 1 calc(50% - 23px);
}

.reservas .destino .text {
  padding: 0 0.9375rem 0 1rem;
  border-left: 1px dashed #009FE3;
}

.content .reservas .destino .text p {
  font-size: 0.8125rem;
  font-weight: 400;
}

.content .reservas .destino .text .count {
  display: flex;
  align-items: center;
}

.content .reservas .destino .text .count.spanInfo {
  cursor: pointer;
}

.content .reservas .destino .text .count span {
  margin-left: 0.4375rem;
  color: var(--vsf-primary-color);
  font-size: 1.0625rem;
  font-weight: 900;
}

.content .reservas .destino .text .bold {
  font-size: 1rem;
  font-weight: 700;
}

.reservas .destino .text-ticket {
  margin-right: 0.9375rem;
  background-color: var(--vsf-primary-color);
  color: white;
  padding: 0 0.6rem;
  text-transform: uppercase;
  font-size: 0.625rem;
  width: 98px;
  text-align: center;
}

.content .reservas .destino .imagen {
  padding-left: 0.625rem;
  text-align: center;
  font-size: 0.625rem;
  border-left: 1px dashed #009FE3;
}

.content .reservas .fa-heart,
.content .reservas .fa-spinner {
  font-size: 1.75rem;
  color: var(--vsf-primary-color);
}


.bookings .content .reservas .newFavorite {
  cursor: pointer;
  transition: all 0.3s ease;
}

.bookings .content .reservas .text-favorite {
  font-size: 0.625rem;
  text-align: center;
}

.bookings .content .reservas .newFavorite:hover .fa-heart {
  font-weight: 700;
}

.content div .city-right {
  text-align: right;
}

/*Páginas cuando no tienen guardado, favoritos y reservas*/
.empty .card {
  padding: 1.4375rem 1.1875rem 1.75rem 1.875rem;
  border: 0;
  box-shadow: 4px 0px 34px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.empty .card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--vsf-secondary-color);
}

.empty .text-content {
  display: flex;
  align-items: center;
}

.empty .text-content .text {
  font-size: 0.75rem;
  flex: 1 1 calc(60% - 15px);
}

.empty .text-content .btn-content {
  flex: 1 1 40%;
  text-align: end;
}

/*Llave virtual*/

.virtual-key .card {
  padding: 1rem 1.625rem 1.375rem 1.3125rem;
  background-color: white;
  border-radius: var(--vsf-border-radius);
  margin-bottom: 0.625rem;
  border: 0;
  filter: drop-shadow(0px 1px 20px rgba(0, 0, 0, 0.05));
}

.virtual-key .card .text-content h3 {
  margin-bottom: 0.75rem;
  margin-right: 1rem;
}

.virtual-key .card .text-content div {
  font-size: 0.75rem;
}

.virtual-key .card .text-content .subTitle {
  margin-bottom: 0.5rem;
}

.virtual-key .card .btn-content a:first-child {
  margin-bottom: 0.5625rem;
  width: 100%;
}

.virtual-key .card .btn-content div a:nth-child(1) img {
  margin-right: 0.875rem;
}

.virtual-key .content .btn {
  padding: 0.94rem 1.2rem;
}

/*Nuevo usuario (userNew)*/
.user-new .container {
  padding-bottom: 1.375rem;
}

.content.form-user {
  background-color: white;
  border-radius: 1rem;
  box-shadow: 4px 0px 34px rgba(0, 0, 0, 0.1);
  padding: 1.375rem 1.8125rem 1rem 2.125rem;
}

.user-new h2 {
  margin-bottom: 0.5625rem;
  font-size: 1.25rem;
}

.alert-content {
  background: rgba(0, 159, 227, 0.1);
  color: rgba(1, 46, 94, 0.8);
  padding: 0.5625rem 0.6875rem 0.5rem;
  margin-bottom: 1.4375rem;
  border-radius: var(--vsf-border-radius);
  display: flex;
  font-size: 0.75rem;
  line-height: 1rem;
}

.user-new .alert-content {
  width: 81%;
}

.alert-content .fa-solid {
  color: var(--vsf-primary-color);
  margin-right: 0.5rem;
  padding-top: 0.2rem;
}


.user-new .link-content span {
  color: var(--vsf-primary-color);
}

.user-new .form-group .small-text, .profile .form-group .small-text {
  font-size: 0.625rem;
  line-height: 0.761875rem;
  color: var(--vsf-secondary-color);
  margin-top: 0.5rem;
}

.user-new .btn-content {
  margin-top: 0.5rem;
}

.user-new .btn-content .link {
  text-align: center;
  font-size: 0.75rem;
}

.user-new .btn-content .link a {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

/*Modal fixed*/
.ff-div {
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  padding: 2.75rem 0 1.5625rem;
  background: #fff;
  transition: all 0.3s ease;
  position: fixed;
  bottom: -181px;
  left: 0;
  right: 0;
  z-index: 10;
}

.ff-div.show {
  bottom: 0;
}

.ff-div>.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ff-div .ff-col1 {
  display: flex;
  align-items: center;
  margin-right: 2.625rem;
  flex-shrink: 0;
  flex: 1 1 20%;
}

.ff-div .ff-col1 img {
  margin-right: 1.125rem;
}

.ff-div .ff-col1 h4 {
  font-size: 1.125rem;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 1.625;
}

.ff-div .ff-col2 .btn-order {
  display: flex;
  align-items: center;
}

.ff-div .ff-col2 .btn {
  min-width: 229px;
  max-width: 229px;
  font-size: 1rem;
  font-weight: 600;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1875;
  padding: 0;
}

.ff-div .ff-col2 {
  display: flex;
  align-items: center;
}

.ff-div .ff-col2 .btn-order .btn-content:nth-child(1),
.ff-div .ff-col2 .btn-order .btn-content:nth-child(2) {
  flex: 1 1 calc(50% - 15px);
  margin-right: 20px;
}

.ff-div .ff-col2 .btn-content.card {
  flex: 1 1 calc(33.33% - 15px);
}


.ff-div .btn-close {
  position: absolute;
  top: -2rem;
  right: 0.5rem;
}

.ff-div .btn-close button {
  background-color: white;
  border: 0;
}

.ff-div .btn-close span {
  font-size: 1.5rem;
  color: rgb(151, 151, 151);
}

/*Página puntos*/
.points .image-background {
  background-image: url('/web/img/img-fondo-points-2.jpg');
  background-position: 100% 0%;
  background-size: cover;
  height: 20.75rem; 
  position: absolute;
  width: 100%;
}

/*.points .degradado {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(270deg, rgba(2, 22, 43, 0.60) 30.21%, rgba(255, 255, 255, 0.00) 67.19%, rgba(255, 255, 255, 0.00) 100%);
  height: 20.75rem;
  position: absolute;
  width: 100%;
}*/

main.points .container {
  z-index: 10;
  position: relative;
}

.points .header-content{
  /*padding: 3.56rem 3.5rem 5.13rem;*/
  margin-top: 20.5rem;
}

.points .header-points {
  /*margin-left: auto;
  max-width: 25.625rem; 
  color: white;*/
  margin-bottom: 1.5rem;
}

.points .header-points h1{
  font-size: 2.25rem;
  margin-bottom: 1.12rem;
}

.points .header-points div {
  font-size: 0.9375rem;
  font-weight: 500;
}


.points .header-points strong {
  font-weight: 700;
}

.title-content .title img {
  margin-right: 0.9375rem;
}

.points .container-white {
  background: white;
  box-shadow: 4px 0px 34px rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  position: relative;
}

.points .container-white .bg-blue {
  background: rgba(0, 159, 227, 0.16);
  height: 2rem;
  border-bottom-right-radius: 2rem;
}

.points .container-white .medium-white {
  background: rgba(0, 159, 227, 0.16);
  height: 3rem;
  position: absolute;
  top: 2rem;
  width: 5rem;
  left: 0;
}

.points .container-white .card {
  box-shadow: none;
  border-top-left-radius: 3rem;
}

.points .container-graph .container-text{
  margin-left: 1.75rem;
}

.points .container-graph .container-text .title {
  color: var(--vsf-primary-color);
  margin-bottom: 0;
  font-size: 1.125rem;
}

.points .container-graph .container-text .title .total-points {
  font-size: 2.375rem;
  margin-right: 0.5rem;
}


.points .container-graph .container-text .date {
  font-size: 0.9375rem;
}

.points .container-graph .container-text .info {
  margin-top: 0.875rem;
  border-top: 1px dashed;
  padding-top: 1.875rem;

  display: flex;
  font-size: 0.75rem;
}

.points .container-graph .container-text .info span {
  padding-top: 0.2rem;
}

.container-graph .container-text .info span {
  margin-right: 0.5rem;
  color: var(--vsf-primary-color);
}

.points .container-condition {
  text-align: center;
  margin-bottom: 2.375rem;
  margin-top: -1rem;
}

.points .container-condition a {
  font-size: 0.75rem;
  color: #979797;
  text-decoration: underline;
}

.points .card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1.6875rem 1.125rem 1.375rem 1.6875rem;
  border: 0;
  margin-bottom: 1.75rem;
  box-shadow: 4px 0px 34px rgba(0, 0, 0, 0.1);
}

.points .card .graph-circle {
  flex: 1 1 40%;
}

.points .card .text-content {
  margin-right: 1rem;
}

.points .card .title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.4375rem;
}

.points .card .text {
  font-size: 0.75rem;
  max-width: 371px;
}

.points .card .text a {
  color: var(--vsf-primary-color);
  font-weight: 600;
  text-decoration: underline;
}

.points .card .btn {
  width: 204px;
  padding: 0.94rem 0;
}

.points .card .subTitle {
  font-size: 0.625rem;
  font-weight: 500;
}

.points .card .subTitle span {
  font-weight: 700;
}

.points .card.cardType {
  padding: 0.75rem 4rem 1.06rem 1.16rem;
}

.points .alert-content {
  margin-bottom: 2.25rem;
}

.points .alert-content .text-enfasis {
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

/* Historial de puntos */

.points .sub-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.125rem;
  margin-bottom: 1.1875rem;
}

.pointsDiv .loading{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.pointsDiv .loading .fa{
  margin-right: 0.5rem;
}

.table-responsive {
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.03);
  background-color: white;
  border-radius: 0.5rem;
  margin-bottom: 1.75rem;
}

.table {
  color: var(--vsf-secondary-color);
  margin-bottom: 0;
}

.table thead {
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.03);
}

.table thead th {
  border: 0;
  color: var(--vsf-secondary-color);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.9375rem 1.25rem 1.0625rem;
}

.table thead th span {
  margin-left: 0.3rem;
}

.table thead th:last-child {
  text-align: end;
}

.table tbody td {
  font-size: 0.9375rem;
  padding: 1.5625rem 1.25rem 1.3125rem;
}

.table a {
  display: flex;
  align-items: center;
}

.table a:hover {
  text-decoration: none;
}

.table a:hover .search-container {
  background-color: #E5F5FC;
}

.table a:hover .search-container span {
  color: var(--vsf-primary-color);
  font-weight: 900;
}

.table .search-container {
  margin-right: 0.5rem;
  width: 1.125rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.table .search-container span {
  color: #979797;
  font-size: 0.875rem;
  font-weight: 400;
}

.table tbody .positive {
  color: var(--vsf-primary-color);
  font-weight: 600;
}

.table tbody .negative {
  color: #E30036;
  font-weight: 600;
}

.table tbody td {
  font-size: 0.9375rem;
  vertical-align: middle;
}

.table tbody td:last-child {
  background-color: #F6F6F6;
  text-align: end;
}

.points .container-btn {
  margin-bottom: 1.875rem;
}

.points .container-btn .btn {
  padding: 0.94rem 0;
  width: 208px;
}


.pointsRequest .alert-content {
  margin-top: 0.6875rem;
}

.pointsRequest .card {
  padding: 1.6875rem 1.125rem 1.375rem 1.6875rem;
  border: 0;
  margin-bottom: 1.75rem;
  box-shadow: 4px 0px 34px rgba(0, 0, 0, 0.1);
}

.pointsRequest .card .title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.4375rem;
}

.pointsRequest .card .text {
  font-size: 0.75rem;
  font-weight: 400;
}

.pointsRequest .title-content-sub .title {
  margin-bottom: 1.625rem;
}

.pointsRequest .title-content-sub .sub-title {
  font-weight: 400;
}

/*Modales puntos*/

.points .modal-header {
  display: block;
}

.points .modal-content {
  padding: 2.9375rem 1.0625rem 1.0625rem 1.25rem;
  max-width: 495px;
}

.points .modal-content .container-modal {
  border: 2px solid rgba(217, 217, 217, 0.51);
  padding: 1rem 2.25rem 1.1875rem 2.5rem;
  border-radius: 0.3rem;
}

.points .modal-content .container-modal .close {
  position: absolute;
  top: 0;
  right: 0;
}

.points .modal-content .text {
  font-size: 1rem;
  font-weight: 500;
}

.points .modal-content .destine {
  font-size: 1.875rem;
  font-weight: 600;
}

.points .modal-content .blue-light {
  font-size: 0.75rem;
}

.points .modal-content .container-details {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}

.points .modal-content .container-details .details {
  margin-right: 0.3rem;
}

.points .modal-content .container-details .details::after {
  content: "|";
  display: inline;
  color: var(--vsf-primary-color);
}


.points .modal-content .container-trip {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.points .modal-content .details-trip {
  background-color: var(--vsf-primary-color);
  color: white;
  padding: 0.2rem 0.75rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
}

.points .modal-content .details-trip span {
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 600;
}

.points .modal-content .price-trip {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
}

.points .modal-content .container-arrow {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  background-color: #E5F5FC;
  border-radius: 50%;
}

.points .modal-content .container-arrow span {
  font-size: 0.5rem;
}

.points .modal-content .modal-body {
  text-align: unset;
}

.points .modal-content .modal-body .container-trip {
  justify-content: start;
  font-size: 0.75rem;
  font-weight: 700;
}

.points .modal-body .badge {
  width: 0.3rem;
  height: 0.3rem;
  background-color: var(--vsf-primary-color);
  display: inline;
  border-radius: 50%;
  padding: 0;
}

.points .modal-body .container-trip span {
  color: var(--vsf-primary-color);
}

.points .modal-content .modal-body .container-details {
  justify-content: space-between;
  font-weight: 400;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed;
}

.points .modal-content .modal-body .container-price {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
}

.points .modal-content .modal-body .total-price {
  text-align: end;
  font-size: 1.5rem;
}

.points .modal-content .modal-body .container-total span {
  font-weight: 600;
  color: var(--vsf-primary-color);
}

.points .modal-content .modal-footer {
  background-color: rgba(0, 159, 227, 0.1);
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 1.1875rem;
}

.points .modal-content .modal-footer span {
  color: var(--vsf-primary-color);
  font-weight: 800;
}

.points .modal-content .circle-left {
  position: absolute;
  background: white;
  width: 1.5rem;
  height: 1.5rem;
  left: 0.6rem;
  border-right: 2px solid rgba(217, 217, 217, 0.51);
  border-radius: 50%;
  z-index: 50;
  top: 15rem;
}

.points .modal-content .circle-left.birthday, .points .modal-content .circle-right.birthday {
  top: 11rem;
}

.points .modal-content .circle-right {
  position: absolute;
  background: white;
  width: 1.5rem;
  height: 1.5rem;
  right: 0.4rem;
  border-left: 2px solid rgba(217, 217, 217, 0.51);
  border-radius: 50%;
  z-index: 50;
  top: 15rem;
}

/*Paginacion*/
.pagination {
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 1.25rem;
}

.pagination a:hover {
  text-decoration: none;
}

.pagination .pagination-number {
  display: flex;
  align-items: center;
}
.pagination .pagination-number button{
  border: 0;
  padding:0;
  background: none;
}
.pagination .pagination-number button:disabled{
  cursor: not-allowed;
  opacity: 0.75;
}

.pagination .container-arrow {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E9EAED;
  border-radius: 50%;
}

.pagination .container-arrow:nth-child(1) {
  margin-right: 0.5rem;
}

.pagination .container-arrow:last-child {
  margin-left: 0.5rem;
}

.pagination .fa-regular.fa-chevron-right,
.pagination .container-arrow span {
  color: #0E2B58;
  font-weight: 600;

}

/*Gráfica*/
#hc-container .highcharts-container {
  height: 200px !important;
}

/*Medias queries*/
@media (max-width: 1199px) {

  /*Páginas empty reservas y favoritos*/
  .empty .text-content {
    display: block;
  }

  .empty .text-content .text {
    margin-bottom: 1.25rem;
  }

  .empty .card h4 {
    margin-bottom: 0.5rem;
  }

  /*Bookings*/
  .bookings .content .reservas.reservas-destino .hour {
    margin-right: 0;
  }

  .bookings .content .reservas .second-destino {
    margin-right: 0;
  }

  .bookings .cancel {
    text-align: start;
  }

  .reservas .destino .text {
    padding: 0 0.5rem 0 0.7rem;
  }

  .bookings .content .reservas .imagen {
    padding: 0 0 0 0.5rem;
    flex-direction: column;
    width: 80px;
  }

  .bookings .content .reservas.reservas-destino .check-destino span {
    margin-right: 0;
  }

  .bookings .content .reservas.reservas-destino .date-content .date {
    margin: 0;
  }

  .bookings .content .reservas .second-ticket {
    margin-left: 1.5rem;
  }

  .bookings .content .reservas.reservas-destino .hour:first-child {
    margin-right: 0;
  }

  .bookings .mascota {
    padding: 0 0.5rem 0 0.8rem;
  }

  .reservas .destino .text {
    max-width: unset;
    width: unset;
  }

  .bookings .content .reservas .destino {
    flex: unset;
  }

  .bookings .content .reservas div.title {
    font-size: 1rem;
  }

  .bookings .content .reservas.reservas-destino .hour {
    font-size: 1.125rem;
    min-width: 60px;
    max-width: 60px;
  }

  .ff-div {
    bottom: -218px;
  }

  .user-new .alert-content {
    width: 100%;
  }
}

@media (max-width: 1025px){
  footer .content-info {
    margin-right: 0.5rem;
  }
  footer .content-info .dudas-contact {
    margin-right: 0.5rem;
  }
}

@media (max-width: 991px) {
  main .container {
    display: block;
  }

  .logged .logged-content {
    margin: 0 0 2rem;
    max-width: 350px;
    max-height: 100%;
  }

  .login .login-content {
    margin: 0 0 2rem;
    max-width: 350px;
  }

  .container .content-first {
    padding-bottom: 3.5rem;
    border-radius: 0;
    margin-right: 0;
  }

  footer .content-info {
    margin-right: 0;
  }

  footer .content-info .dudas-contact {
    margin-right: 2.125rem;
  }

  /*Bookings*/
  .reservas .destino .text-ticket {
    max-width: 100px;
    width: 100%;
  }

  .bookings .content .reservas.reservas-destino .hour {
    margin-right: 0.75rem;
  }

  .bookings .content .reservas .second-destino {
    margin-right: 0.625rem;
  }

  .bookings .cancel {
    text-align: end;
  }

  .reservas .destino .text {
    padding: 0 0.9375rem 0 1rem;
  }

  .bookings .content .reservas .destino {
    flex: 1 1 50%;
  }

  .bookings .content .reservas .imagen {
    padding: 0.3rem 1rem;
    width: 118px;
    flex-direction: row;
  }

  .bookings .content .reservas.reservas-destino .check-destino span {
    margin-right: 0.9375rem;
  }

  .bookings .content .reservas .second-ticket {
    margin-left: 2.2rem;
  }

  .bookings .content .reservas.reservas-destino .hour:first-child {
    margin-right: 0.6875rem;
  }

  .bookings .mascota {
    padding: 0 0.9375rem 0 1rem;
  }

  .bookings .reservas .destino .text {
    max-width: 146px;
    width: 100%;
  }

  .bookings .content .reservas.reservas-destino .hour {
    font-size: 1.25rem;
    max-width: 78px;
    min-width: 78px;
  }

  .bookings .content .reservas div.title {
    font-size: 1.125rem;
  }


  /*Páginas empty reservas y favoritos*/
  .empty .text-content {
    display: flex;
  }

  .empty .text-content .text {
    margin-bottom: 0;
  }

  .empty .card h4 {
    margin-bottom: 0;
  }

  /*Modal fixed*/

  .ff-div>.container {
    flex-direction: column;
    align-items: start;
  }

  .ff-div .ff-col1 {
    margin-right: 0;
    margin-bottom: 1.25rem;
  }

  .ff-div .btn-close {
    top: -1.3rem;
  }

  .points .header-points {
    margin-left: 0;
  }

  .points .content .title-content {
    margin-bottom: 2rem;
  }

}

@media (max-width: 767px) {
  .login .content .card {
    width: 100%;
  }

  .travel .content .viaje .estancia {
    flex: 0;
  }

  .travel .content .viaje .destino {
    margin-right: 0;
  }

  .bookings .content .reservas.reservas-destino div p:nth-child(1) {
    font-size: 0.875rem;
    font-weight: 500;
  }

  .bookings .content .blue-light {
    padding-top: 1rem;
  }

  .bookings .content .reservas .date-content {
    padding: 0 1.8rem;
  }

  .bookings .container-ticket1 {
    display: flex;
    align-items: center;
  }

  .bookings .container-ticket2 {
    display: flex;
    justify-content: space-between;
  }

  .bookings .borderLeft {
    border-right: 1px dashed #009FE3;
    padding-right: 3rem;

  }

  .bookings .content .reservas.reservas-destino .container-ticket1 .hour {
    margin-right: 0;
    text-align: start;
  }

  .bookings .content .reservas .imagen {
    border-left: 0;
  }

  .bookings .content .reservas.reservas-destino {
    align-items: center;
  }

  .bookings .content .text.pax {
    width: 113px;
  }

  .bookings .reservas .destino .text-ticket {
    width: 100%;
    min-width: 130px;
  }

  .bookings .content .reservas.reservas-destino .hour {
    max-width: 60px;
    min-width: 60px;
  }

  .bookings .content .reservas .hour {
    flex: 1 1 33.33%;
  }

  .bookings .content .reservas .date-content {
    flex: 1 1 33.33%;
    text-align: center;
  }

  .bookings .content .reservas .ticket {
    width: 100%;
  }

  .bookings .content .reservas .check-destino.borderLeft {
    width: 100%;
  }

  .bookings .content .check-destino.borderLeft.second-ticket {
    width: 100%;
  }


  /*Virtual Key*/

  .virtual-key .card {
    flex-direction: column;
  }

  .virtual-key .card .text-content div {
    margin-bottom: 1rem;
  }

  .virtual-key .card .btn-content a:first-child {
    margin-bottom: 1.25rem;
  }

  .user-new .link-content {
    text-align: start;
  }

  .user-new .btn-content {
    margin-top: 1rem;
  }

  /*Páginas empty favoritos y reservas*/
  .empty .text-content {
    display: block;
  }

  .empty .text-content .text {
    margin-bottom: 1.25rem;
  }

  .empty .text-content .btn-content {
    text-align: start;
  }

  .empty .card h4 {
    margin-bottom: 0.5rem;
  }

  /*Perfil*/

  .profile .btn-content {
    text-align: start;
  }

  /*Modal fixed*/
  .ff-div .ff-col2 {
    flex-direction: column;
    width: 100%;
  }

  .ff-div .ff-col2 .btn-order {
    flex: 1 1 100%;
    margin-right: 0;
    width: 100%;
  }

  .ff-div .ff-col2 .btn-content.btn-card {
    flex: 1 1 50%;
  }

  .ff-div .btn-order .btn {
    width: 100%;
  }

  .ff-div .ff-col2 .btn {
    min-width: 0;
    max-width: 100%;
  }

}

@media (max-width: 575px) {
  .content .title-content {
    display: block;
  }

  .content .title-content .title {
    margin-bottom: 1.625rem;
  }

  .logged .logged-content {
    max-width: 100%;
    min-width: 0;
  }

  .login .login-content {
    max-width: 100%;
  }

  .bookings .title-content .link {
    margin-bottom: 1.25rem;
  }

  .bookings .borderLeft {
    padding-right: 0.4rem;
  }

  .bookings .content .reservas .ticket {
    width: unset;
  }

  .bookings .content .moreTime {
    padding-right: 0;
  }

  .bookings .content .reservas .date-content {
    flex: 0;
  }

  .travel .content .viaje .city {
    width: unset;
  }

  .profile .content .title-content .btn {
    margin-top: 0;
  }

  /*Modal fixed*/
  .ff-div .btn-close {
    right: 1rem;
  }

  .ff-div .ff-col2 .btn-order {
    display: block;
  }

  .ff-div .ff-col2 .btn-order .btn-content {
    margin: 0 0 1.125rem;
  }

  .ff-div .ff-col2 .btn-order .btn-content:nth-child(1),
  .ff-div .ff-col2 .btn-order .btn-content:nth-child(2) {
    margin-right: 0;
  }

  /*Favoritos*/
  .travel .content .viaje .destino div:first-child {
    margin-right: 0;
  }

  .travel .content .viaje .destino div:last-child {
    margin-left: 0;
  }

  .travel .content .viaje .duplicar {
    flex: 1 1 10%;
  }

  .travel .content .viaje .duplicar a span {
    margin-left: 0.2rem;
  }

  .travel .content .viaje .duplicar a {
    font-size: 0.875rem;
    margin-left: 0.4rem;
  }

  .travel .content .viaje {
    display: block;
  }

  .travel .content .viaje .duplicar {
    margin-top: 0.3rem;
  }

  /*Bookings*/
  .bookings .cancel {
    text-align: unset;
  }

  .reservas .destino .text {
    padding: 0 0.5rem 0 0.5rem;
  }

  .bookings .mascota {
    margin-left: auto;
    padding: 0;
  }

  .bookings .content .reservas.reservas-destino .check-destino span {
    margin-right: 0.5rem;
  }

  .bookings .content .reservas.reservas-destino .hour:first-child {
    margin-right: 0;
  }

  .bookings .content .reservas .imagen .imagen-inner {
    margin-right: 0;
  }

  .bookings .content .reservas.reservas-destino .hour {
    font-size: 1.25rem;
  }

  .bookings .content .reservas div.title {
    font-size: 0.975rem;
  }

  .bookings .content .reservas.reservas-destino {
    padding: 0.45rem 0 0.65rem;
  }

  .bookings .content .reservas .imagen {
    padding: 0 0.5rem 0;
  }

  .bookings .content .reservas .imagen {
    width: 65px;
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .bookings .content .reservas .date-content {
    padding: 0;
  }

  .bookings .content .reservas .date-content {
    margin: 0;
  }

  .content .reservas .destino {
    margin-right: 0;
  }

  .content .reservas .destino .text .count span {
    margin-left: 0.2rem;
  }

  .bookings .content .reservas .second-destino {
    margin-right: 0.5rem;
  }

  .bookings .content .reservas.reservas-destino .hour {
    width: unset;
    text-align: left;
  }

  .bookings .content .reservas.reservas-destino .check-destino {
    padding-left: 0.4375rem;
  }

  .bookings .content .reservas.reservas-destino .date-content .date {
    font-size: 0.625rem;
  }

  .bookings .content .reservas .date-content {
    font-size: 0.5rem;
  }

  .bookings .mascota .imagen-inner {
    padding: 3px 2px 2px;
  }

  .bookings .content .reservas.reservas-destino .hour {
    width: unset;
    min-width: unset;
  }

  .bookings .reservas .destino .text.text-car {
    max-width: unset;
    width: unset;
  }

  .ff-div {
    bottom: -385px;
  }

  /*Página puntos*/
  .points .card .container-graph {
    display: block;
  }

  .points .card {
    display: block;
  }

  .points .card .text-content {
    margin-bottom: 1.25rem;
  }

}

@media (max-width: 408px) {
  .bookings .reservas .destino .text {
    max-width: unset;
    width: unset;
  }

  .bookings .reservas .destino .text-ticket {
    max-width: unset;
    width: unset;
    min-width: unset;
  }
  

}

@media (max-width: 369px) {
  .bookings .content .text.pax {
    width: auto;
  }

}