.global-footer {
    margin-top: 0;
}
.content-wraper {
    padding: 0 1rem;
}
.global-main-container {
    height: 100%;
}
#login-main {
 background-image: url(/img/background-login.jpg);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 width: 100%;
 height: 100%;
}
header.login-header {
    color: #fff;
    padding: 2rem 0;
}
h1.title {
    font-weight: bold;
    text-align: start;
    padding: 0.5rem 0;
}
#login-main label {
    color: var(--color-detalle);
    opacity: .7;
}
.password-info {
    font-size: 0.8rem;
    padding: 0.3rem 0;
    opacity: .7;
}
.btn-dashbord {
    height: 56px;
    font-size: 1rem;
    font-weight: bold;
    padding: 0 32px;
}

.form-floating>.form-control, .input-group>.form-control {
    padding: 1rem .75rem;
}

.form-floating>.form-control, .form-floating>.form-select, .input-group>.form-control, .input-group>.form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}
#tel-prefix {
    max-width: 5rem;
    color: var(--bs-gray);
}
.form-select:focus, .form-control:focus, .btn:focus {
    border-color: unset;
    outline: 0;
    box-shadow: none;
}
.btn:focus {
    border: none;
}
#input-docs {
    display: none;
}
p {
    max-width: 100%;
}
.error{
    color: var(--bs-danger) !important;
    font-weight: bold;
    font-size: 0.8rem;
}
.password-requirements {
    list-style-type: none;
    padding: 0;
    margin: 0.5rem 0;
}
.password-requirements li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
}
.password-requirements li.complete::before {
    content: "\f00c";
    font-family: "FontAwesome";
    color: var(--bs-success);
}
.password-requirements li.required::before {
    content: "\f00d";
    font-family: "FontAwesome";
    color: var(--bs-danger);
}
/* zona privada */
#wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}
.dashboard-side-nav .navbar-nav {
	width: 4rem;
    position: relative;
    position: sticky;
    top: 0;
    height: fit-content;
    background-color: #fff;
}
.dashboard-side-nav .nav-item {
	margin: 0.25rem 0.5rem;
    border-radius: 5px;
}
.dashboard-side-nav .nav-item:hover {
    background-color: var(--color-primary-alpha-25);
}
.dashboard-side-nav .nav-item.active {
    background-color: var(--color-primary-alpha-25);
}
.dashboard-side-nav .nav-item.active .nav-link {
    color: var(--color-primary);
}
.dashboard-side-nav .nav-link:hover {
    text-decoration: none;
    color: var(--color-primary);
}
.dashboard-side-nav .nav-link {
    text-align: center;
}
.nav-link i {
    font-size: 1.5em;
}
.shadaw-in {
    box-shadow: inset 2px 2px 10px 0px rgba(181, 220, 227, 0.5);
}
.nav-link .link-text {
    display: none;
}
#content-wrapper {
    background-color: #effafb;
    width: 100%;
    color: var(--bs-gray-dark);
}
#content-wrapper .card-body, #content-wrapper .vehicle-title {
    --bs-body-color: #3e424e;
    color: var(--bs-body-color);
}
a.vehicle-card-link {
    text-decoration: none;
}
.dashboard-content {
	display: flex;
	flex-direction: column;
    gap: 1rem;
}
.dashboard-content .card, .bid-car {
    position: relative;
}
.dashboard-content .card:hover .count, 
.dashboard-content .card:hover .card-icon i.fa-circle,
.dashboard-content .card:hover .card-title,
.dashboard-content .card:hover a.dashboard-link {
    color: var(--color-primary);
    text-decoration: none;
}
a.dashboard-link::after{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.card-title {
	border-bottom: 1px solid #f4f4f4;
	font-weight: 700;
	margin: 0;
    color: #5e666f;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}
.card-grid, .card-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
}
.card-grid:not(:last-child), .card-grid-3:not(:last-child)  {
    margin-bottom: 1rem;
}
.card-icon {
	color: var(--color-button-link);
	opacity: 0.6;
	position: relative;
	text-align: center;
    align-self: center;
}
.card-icon .fa-stack {
	font-size: 1.25rem;
}
.card-data * {
    text-align: center;
    color: var(--bs-gray-dark);
}
.body-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
.body-grid .bid {
	padding: 0.5rem;
    transition: .3s ease-in;
    position: relative;
}
.body-grid .bid:hover {
 background-color: var(--color-primary-alpha-25);
 border-radius: 5px;
 cursor: pointer;
}
.body-grid .bid *{
    text-align: center;
}
.bid.open {
    background: var(--color-primary-alpha-25);
}
.body-grid .title {
	font-size: 0.8rem;
	font-weight: bold;
}
.card-body .count  {
	font-size: 2rem;
}
.bid-total.badge.rounded-pill {
	color: #fff;
}
.dashboard-content .card-body {
    padding: clamp(0.5rem, 2.5vw, 1rem);
}
.dashboard-content .card-header {
    padding: clamp(0.25rem, 2.75vw, 0.5rem ) 1rem;
}

.bid-title {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}
.card-body .vehicle-cards {
    background-color: #fff;
}
.vehicle-card {
	border: 1px solid #e6e6e6;
	margin-bottom: 16px;
	position: relative;
}
.fotoprincipal {
    display: flex;
}
.fotoprincipal img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 450px;
}
.card-bids {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.5rem;
}
.bid-car-photo img {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.bid-car {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: 5px;
    flex-wrap: wrap;
    padding: 0.75rem;
}
.bid-car-data {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    padding: 0.25rem 0;
    flex-wrap: wrap;
}
.bid-car .title {
    font-size: clamp(1rem, 2.3vw, 1.2rem);
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.bid-car-data .bid-car-values, .vehicle-cards .bid-car-values,
.bid-car-data .car-bid-values, .vehicle-cards .car-bid-values
{
    display: flex;
    flex-direction: row;
    gap: 0 0.5rem;
    flex-wrap: wrap;
}
.bid-car-values .primary-price,
.car-bid-values .primary-price
{
    font-size: 0.9rem;
    font-weight: bold;
}
.bid-car-values .primary-price .price,
.car-bid-values .primary-price .price
{ 
    font-size: 1.3rem;
    color: var(--color-secundario);
}
.auto-detalles-lista {
    display: flex;
    gap: 0.5rem 1rem;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: var(--color-detalle);
    flex-wrap: wrap;
}
.sds-filter>span>span {
    white-space: nowrap;
}
.bid-car .btn-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 21;
}
.bid-car .btn-close:hover {
    color: var(--color-primary);
    opacity: 1;
}
.lose.close, .win.close{
    display: none;
}
.price-section {
    padding: 5px 0;
}
.auto-detalles-lista {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}
.add-pujas {
    z-index: 13;
    position: relative;
}
.dashboard-content-pujas .vehicle-card .contact-buttons {
    position: static;
    padding: 0.5rem 0;
    justify-content: flex-end;
}
.vehicle-card .vehicle-card-main .vehicle-details {
	line-height: 1;
	flex: 1;
	margin: 16px 16px 0;
	display: block;
	grid-row: 2;
	grid-column: 1;
}
@media (min-width:768px) {
    .vehicle-card .vehicle-card-main .vehicle-details {
        grid-column: 2;
        grid-row: 1;
        padding-bottom: 38px
    }
}
.vehicle-card .vehicle-card-main .vehicle-details {
    padding-bottom: 1rem;
}
[data-my-automatic-bid="0"] {
    height: 0;
    visibility: hidden;
    transition: .3s ease-in;
}
.sds-button, .sds-button--dense, .sds-button--fluid, .sds-button--medium, .sds-button--secondary, .sds-button--secondary-dense, .sds-button--secondary-fluid, .sds-button--secondary-medium {
	height: 50px;
	font-size: 15px;
}
.sds-input-container .sds-text-field {
	height: 52px;
	font-size: 15px;
}
.sds-input-container {
	height: 52px;
}

div[id^="clock"] {
    background-color: var(--color-white-alpha-75);
    padding: 0.25rem 0.75rem;
    width: 100%;
    border-top: 1px solid transparent;
    border-inline: 1px solid transparent;
    justify-content: flex-end;
}
div[id^="clock"], .time-left, div[id^="clock"] .time-left > * {
    font-size: 0.9rem;
    color: var(--color-secondary); 
    display: flex;
    gap: 0.2rem;
    align-items: center;
    font-weight: bold;
}
div[id^="clock"] svg {
    width: 1.05rem;
    margin-right: 0.25rem;
}
.vehicle-subtitle {
	font-size: 18px;
	font-family: Source Sans Pro,sans-serif;
	font-weight: 700;
	margin: 7px 0 2px;
}
.distintivo-Ambiental {
	display: flex;
	gap: .5em;
	align-items: center;
    margin-bottom: 5px;
}
.distintivo-Ambiental img {
    width: 30px;
}
@media (min-width:768px) {
    .vehicle-card .vehicle-card-main {
        display: grid;
        position: relative;
        min-height: 225px;
        grid-template-columns: 42% 58%;
    }
    .card-grid {
        display: grid;
        grid-template-columns: 180px auto;
        align-items: center;
    }
    .card-grid-3 {
        grid-template-columns: 70px 1fr 1fr;
    }
    .card-data {
        display: flex;
        gap: 0.25rem;
        flex-direction: column;
    }
    .card-data * {
        text-align: left;
    }
    .card-icon {
        text-align: left;
    }

    .card-bids {
        display: flex;
        flex-direction: column;
    }
    .bid-car {
        flex-direction: row;
    }
    .bid-car-photo {
        width: 100%;
        display: flex;
        height: 100%;
    }
    .bid-car-photo img {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top-right-radius: 0;
        object-fit: cover;
    }
    
    .bid-car .title {
        font-weight: normal;
    }
    .bid-car-data .bid-car-values,
    .bid-car-data .car-bid-values
    {
        flex-direction: row;
    }
    .bid-car-data .bid-car-values .price-section,
    .bid-car-data .car-bid-values .price-section
    {
        padding: 0;
    }
    /*.bid-car-data .status {
         grid-column: 2;
        padding: 0.5rem 1rem; 
    }*/
    .bid-car-data .data {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: clamp(0.7rem, 2.5vw, 0.9rem);
        grid-column: 1;
        color: var(--color-detalle);
        padding: 0.5rem 1rem;
    }
}
@media (min-width: 980px) {
    .content-wraper {
        padding: 0 1rem;
        margin: 0 auto;
        max-width: 1170px;
    }
    .login-grid {
        display: grid;
        grid-template-columns: 40% 60%;
        padding: 5rem 0;
        gap: 1rem;
    }
    header.login-header {
        padding-top: 1rem;
        grid-row: 1;
        grid-column: 2;
    }
    .login-box {
        grid-column: 1;
        grid-row: 1;
    }
    .register-grid {
        display: grid;
        grid-template-columns: 1fr;
        padding: 3rem 0;
        gap: 1rem;
    }
    .register-grid header.login-header {
        padding-top: 1rem;
        grid-row: unset;
        grid-column: unset;
        text-align: center;
    }
    .register-grid .login-box {
        grid-column: unset;
        grid-row: unset;
        max-width: 700px;
        margin: 0 auto;
        width: 100%;
    }
    .register-grid h1.title {
        text-align: center;
    }
    .recordar-grid {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 5rem 0;
        gap: 1rem;
    }
    /* zona privada */
    .dashboard-side-nav .navbar-nav {
        width: 17rem;
    }
    .dashboard-side-nav .navbar-nav .nav-link {
        padding: 1rem;
        color: var(--bs-gray-dark);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        justify-content: start;
        text-align: start;
    }
    .nav-link .link-text {
        display: inline;
    }
    .dashboard-content{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(12, auto);
        grid-template-areas: "perfil perfil perfil favoritos favoritos"
                             "perfil perfil perfil favoritos favoritos"
                             "perfil perfil perfil favoritos favoritos"
                             "perfil perfil perfil alert alert"
                             "pujas pujas pujas alert alert"
                             "pujas pujas pujas alert alert" 
                             "pujas pujas pujas tarjeta tarjeta"
                             "pujas pujas pujas tarjeta tarjeta"
                             "x x x tarjeta tarjeta"
                             "x x x chat chat"
                             "x x x chat chat"
                             "x x x chat chat";
    }
    .dashboard-perfil{
        /* grid-column: span 3;
        grid-row: span 2; */
        grid-area: perfil;
    }
    .dashboard-pujas {
        /* grid-column: span 3;
        grid-row: span 2; */
        grid-area: pujas;

    }
    .dashboard-favoritos {
        /* grid-column: span 2;
        grid-row: span 1; */
        grid-area: favoritos;
    }
    .dashboard-alerta {
        grid-area: alert;
    }
    .dashboard-chat {
        grid-area: chat;
    }
    .dashboard-tarjeta {
        grid-area: tarjeta;
    }

}