:root {
    
    --bs-font-sans-serif: "Open Sans";
}

.content-wrap {
    padding: 80px 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}

.btn {
    --bs-btn-font-family: "Open Sans";
}

input, button, select, optgroup, textarea, ::placeholder {
    font-family: "Open Sans";
}

.home-btn {
    text-align: right;
}

.form-control {
    border-radius: 9px;
}

.dark .section, .section.dark {
    background-color: #4BD1A5;
    border-color: rgba(255,255,255,0.1);
}

.section.dark.opaco {
    background-color: #00819D;
    border-color: rgba(255,255,255,0.1);
}

.section.dark.claro {
    background-color: #F8F8F8;
    border-color: rgba(255,255,255,0.1);
}

.card.login {
    --bs-card-bg: #4BD1A5;
}

.fondo-gris .card.login {
    --bs-card-bg: #00819D;
}

.fondo-gris h1, .fondo-gris h2, .fondo-gris h3, .fondo-gris h4, .fondo-gris h5, .fondo-gris h6 {
    color: white;
}

.fondo-gris .button-black:not(.button-border) {
    background-color: #FFD400 !important;
    border-color: #FFD400 !important;
}

.opaco.card {
    --bs-card-color: white;
    --bs-card-bg: #666666;
}

.opaco.card h1, .opaco.card h2, .opaco.card h3, .opaco.card h4, .opaco.card h5, .opaco.card h6 {
    color: white;
}

.opaco .btn-primary:not(.button-border) {
    background-color: #FF0C14 !important;
}

.fondo-oscuro h1, .fondo-oscuro h2, .fondo-oscuro h3, .fondo-oscuro h4, .fondo-oscuro h5, .fondo-oscuro h6 {
    color: #FFF;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 30px 0;
    font-family: 'Open Sans', sans-serif;
}

.fondo-oscuro label {
    color: #FFF;
    font-family: 'Open Sans', sans-serif;
    text-transform: none;
    font-weight: 400;
    margin-bottom: 0;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #464646;
    opacity: 1; /* Firefox */
    text-align: center;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #464646;
    text-align: center;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #464646;
}

#search-form-search::placeholder {
    text-align: left;
    font-size: 10px;
}

.button-black:not(.button-border) {
    background-color: #00819D !important;
}

.bienvenido-login {
    margin: 63px 10px;
}

.dark-background {
    color: white;
    text-align: center;
}

a.dark-background {
    color: #00829e; /* no estoy 100% seguro del color */
}

.box-shadow {
    box-shadow: 0px 3px 6px #00000029;
}

.rounded-7 {
    border-radius: 1.5rem !important;
}

.card.dashboard {
    background-color: #FFF;
    margin: 2em 1em 1em 1em !important;
}

.card-body {
    padding: 1em;
}
.card-item {
    padding: 0 15px;
}

.imagen {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0px 0px 5px #00000073;
    border: 2px solid #5B5B5B;
    text-align: center;
}

.imagen img {
    width: 60px;
}

.bajada {
    margin: 20px 0;
    color: #000;
    text-align: center;
    font: normal normal 600 20px/27px Open Sans;
}

.header {
    margin: 0 20px 10px 20px;
    vertical-align: middle;
}

#nombre-sede {
    font: normal normal 600 8px/20px Open Sans;
    color: white;
    margin: 0;
    background-image: url(../citybus/img/BOTON-SEDE-VACIO.png);
    padding: 5px 10px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.img-home {
    max-width: 100%;
}

#search-form-search {
    background-image: url("../citybus/img/buscar.png");
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position-y: center;
    background-position-x: 95%;
}

.footer-citybus {
    background-image: url("../citybus/img/franja_inferior_logos.png");
    background-position: bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-bottom: 80px;
}

.boton {
    margin-top: 10px;
    margin-bottom: 10px;
}

a {
    text-decoration: none !important;
    color: #0880a5;
}

.ticket.no-valido .card-header {
    background-color: #00819D;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    background-image: url("../citybus/img/ERROR.png");
    background-repeat: no-repeat;
    background-size: auto 85%;
    background-position-y: center;
    background-position-x: 95%;
}


.ticket.valido .card-header {
    background-color: #00819D;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    background-image: url("../citybus/img/OK.png");
    background-repeat: no-repeat;
    background-size: auto 85%;
    background-position-y: center;
    background-position-x: 95%;
}


.ticket.reporte .card-header {
    background-color: #E5E5E5;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    background-position-y: center;
    background-position-x: 95%;
}

.ticket h1 {
    color: white;
    text-align: center;
    margin: 0 50px 0 0;
}

.ticket.reporte h1 {
    color: #7A7A7A;
    text-align: left;
    margin: 0 50px 0 0;
}

.ticket {
    background: white 0% 0% no-repeat padding-box;
}

.ticket.ticket.reporte {
    background: #E5E5E5 0% 0% no-repeat padding-box;
}

.ticket ul {
    list-style-type: none;
}

.btn-lg {
    border-radius: 0.2em;
}

.btn-primary {
    background-color: #4BD1A5;
    color: #FFF;
    border-color: #4BD1A5;
    text-transform: uppercase;
}

.btn-primary:active, .btn-primary:hover {
    background-color: #FD0D15;
    color: #FFF;
    border-color: #FD0D15;
    box-shadow: inset 0px 0px 6px #00000029, 0px 0px 6px #000000A8;
}


.btn-secondary {
    background-color: #4BD1A5;
    color: #FFF;
    border-color: #4BD1A5;
    font-weight: bold;
}

.btn-warning {
    background-color: #FDDC3C;
    color: #414141;
    border-color: #FDDC3C;
    font-weight: bold;
}

.btn-secondary:active, .btn-secondary:hover {
    background-color: #11AC00;
    color: #FFF;
    border-color: #11AC00;
    box-shadow: inset 0px 0px 6px #00000029, 0px 3px 6px #000000A8;
}


.btn-success {
    background-color: #00A8FF;
    color: #FFF;
    border-color: #0000008C;
}

.btn-success:active, .btn-success:hover {
    background-color: #00A8FF;
    color: #FFF;
    border-color: #0000008C;
    box-shadow: inset 0px 0px 6px #00000029, 0px 3px 6px #000000A8;
}


.card.ticket {
    margin: 1em 1em 50px 1em !important;
}


@media (min-width: 576px) {
    .footer-citybus {
        padding-bottom: 140px;
    }

    .card.ticket {
        margin-bottom: 100px;
    }
}

.usr-menu .dropdown-toggle::after {
    border: 0;
}

.boton.card-item {
    width: calc(100% / 3);
}

label.required::after {
    content: " *";
    color: red;
}

nav {
    margin-top: 40px;
    line-height: 3rem;
}

nav svg {
    width: 20px;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }
  
  .checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  }
  
  .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  }
  
  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes scale {
    0%, 100% {
      transform: none;
    }
    50% {
      transform: scale3d(1.1, 1.1, 1);
    }
  }
  @keyframes fill {
    100% {
      box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
  }

.success-activate {

    background:#11AC00;
    color:white;
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    font: normal normal 600 26px/62px Open Sans;
    letter-spacing: 0px;
    z-index: 100;
}

.texto-activado {
    margin: auto;
}

@media (max-width: 767px) {
    .boton.card-item {
        width: calc(100% / 2);
    }
}

@media (min-width: 992px) {

    #nombre-sede {
        font: normal normal 600 16px/20px Open Sans;
        margin-left: -10px;
    }

    .footer-citybus {
        padding-bottom: 400px;
    }

    .card.ticket {
        margin-bottom: 150px;
    }
}


@media (max-width: 575px) {
    #search-form .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
        font-size: x-small
    }

    .row.header {
        --bs-gutter-x: 0.4rem;

    }

    .card.dashboard .card-body {
        padding: 0.8em 1.2em;
    }

}