/* TEMPLATE BASE */
:root {
    --blanco: #fafafa;
    --negro: #252525;
    --color-1: #e62a23;
}

/*Fonts*/
@font-face {
    font-family: 'gothambold';
    src: url('../font/gotham-bold-webfont.woff2') format('woff2'), url('../font/gotham-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gothambook';
    src: url('../font/gothambook-webfont.woff2') format('woff2'), url('../font/gothambook-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gothamlight';
    src: url('../font/gothamlight-webfont.woff2') format('woff2'), url('../font/gothamlight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gothamssmbold';
    src: url('../font/gothamssm-bold-webfont.woff2') format('woff2'), url('../font/gothamssm-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gothamssmbook';
    src: url('../font/gothamssm-book-webfont.woff2') format('woff2'), url('../font/gothamssm-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gothamssmlight';
    src: url('../font/gothamssm-light-webfont.woff2') format('woff2'), url('../font/gothamssm-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gothamssmmedium';
    src: url('../font/gothamssm-medium-webfont.woff2') format('woff2'), url('../font/gothamssm-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    background: url(../img/view/bg-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'gothamssmmedium', sans-serif;
}

.bg-dark {
    margin: 0;
    padding: 0;
    background: url(../img/view/bg-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

*:focus {
    outline: none;
}

/* ESTILOS LOGIN */

.login-container {
    width: 100%;
    height: auto;
    padding: 0;
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    justify-content: center;
    align-items: center;
}

.v-center {
    display: flex;
    align-items: center;
}

.texto-login {
    color: #fafafa;
    width: 350px;
    height: auto;
    display: inline-block;
    margin: 0;
    padding: 0;
    align-items: center;
    margin-left: 40px;
    z-index: 99;
    & h2

{
    margin: 0;
    padding: 0;
    font-size: 26px;
}

& p {
    font-size: 18px;
    margin-bottom: 0;
}

}

.form-login {
    background-color: var(--color-1);
    width: 400px;
    height: auto;
    display: inline-block;
    padding: 20px 40px;
    border-radius: 16px;
    text-align: center;
    z-index: 99;
    & input

{
    width: 100%;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #fafafa;
    padding: 8px 0;
    font-size: 14px;
}

& .login-links {
    display: flex;
    justify-content: space-between;
    & a

{
    text-decoration: none;
    color: rgba(255,255,255,.5);
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 100;
    &:hover

{
    color: rgba(255,255,255,.8);
}

}
}

& .login-button {
    border: 2px solid #fafafa;
    background-color: var(--color-1);
    border-radius: 12px;
    color: #fafafa;
    font-size: 18px;
    font-weight: bold;
    padding: 6px 36px;
    cursor: pointer;
    &:hover

{
    background-color: var(--negro);
}

}
}

.barra-back {
    background-color: rgba(63,63,63,.8);
    width: 100%;
    height: 220px;
    position: absolute;
    z-index: 9;
}

.valid-feedback {
    color: green;
}

.invalid-feedback {
    color: #333F78;
}

/* FIN ESTILOS LOGIN */

/* ESTILOS VALIDACIÓN */

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #21F047;
}

.valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: .1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #fff;
    background-color: rgba(28, 200, 138, 0.9);
    border-radius: 0.35rem;
}

.was-validated .form-control:valid, .form-control.is-valid {
    border-color: #21F047;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2321F047' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right calc(0.375em + 0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
        border-color: #21F047;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
        box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
    }

    .was-validated .form-control:valid ~ .valid-feedback,
    .was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback,
    .form-control.is-valid ~ .valid-tooltip {
        display: block;
    }

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:valid, .custom-select.is-valid {
    border-color: #21F047;
    padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2321F047' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
        border-color: #21F047;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
        box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
    }

    .was-validated .custom-select:valid ~ .valid-feedback,
    .was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback,
    .custom-select.is-valid ~ .valid-tooltip {
        display: block;
    }

.was-validated .form-control-file:valid ~ .valid-feedback,
.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback,
.form-control-file.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: #21F047;
}

.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
    color: #21F047;
}

    .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
        border-color: #21F047;
    }

.was-validated .custom-control-input:valid ~ .valid-feedback,
.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback,
.custom-control-input.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
    border-color: #34e3a4;
    background-color: #34e3a4;
}

.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #21F047;
}

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
    border-color: #21F047;
}

.was-validated .custom-file-input:valid ~ .valid-feedback,
.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback,
.custom-file-input.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
    border-color: #21F047;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #fff;
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: .1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #fff;
    background-color: rgba(231, 74, 59, 0.9);
    border-radius: 0.35rem;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: #293d7b;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23e74a3b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23e74a3b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: center right calc(0.375em + 0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
        border-color: #293d7b;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
        box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
    }

    .was-validated .form-control:invalid ~ .invalid-feedback,
    .was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback,
    .form-control.is-invalid ~ .invalid-tooltip {
        display: block;
    }

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid, .custom-select.is-invalid {
    border-color: #293d7b;
    padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23e74a3b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23e74a3b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
        border-color: #293d7b;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
        box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
    }

    .was-validated .custom-select:invalid ~ .invalid-feedback,
    .was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback,
    .custom-select.is-invalid ~ .invalid-tooltip {
        display: block;
    }

.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
    color: #293d7b;
}

.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
    color: #293d7b;
}

    .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
        border-color: #293d7b;
    }

.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
    border-color: #ed7468;
    background-color: #ed7468;
}

.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
}

.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #293d7b;
}

.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
    border-color: #293d7b;
}

.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
    border-color: #293d7b;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
}
/* FIN ESTILOS VALIDACIÓN */







/* MI CUENTA */
.container-flex {
    width: 100%;
    height: auto;
    padding: 0;
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    justify-content: center;
    align-items: center;
    text-align: center;
}

.mis-datos {
    background-color: #fafafa;
    padding: 10px;
    border-radius: 16px;
    width: 600px;
    height: auto;
    & span

{
    width: 100%;
    height: auto;
    display: inline-flex;
    & .dato-izq

{
    background-color: var(--color-1);
    color: #fafafa;
    padding: 6px 14px;
    font-size: 14px;
    font-family: 'gothamssmlight', sans-serif;
    width: 34%;
    text-align: left;
}

& .dato-der {
    padding: 6px 14px;
    font-size: 14px;
    background-color: #d9d8d6;
    width: 76%;
    text-align: left;
    & b

{
    background-color: #fafafa;
    padding: 0 10px;
}

}
}
}

.marco-datos {
    width: auto;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
}

.otros-links {
    padding-left: 20px;
    width: 360px;
    & h1

{
    color: #fafafa;
}

}
/* FIN MI CUENTA */
.btn-custom {
    background-color: var(--color-1);
    color: #fafafa;
    text-decoration: none;
    border-radius: 6px;
    padding: 6px 12px;
    display: inline-block;
    font-family: 'gothamssmlight', sans-serif;
    transition: all .2s ease-in-out;
    &:hover

{
    background-color: #252525;
}

}

.color-w {
    color: #fafafa;
}





/* MIS PROPIEDADES */

.proyecto-box {
    background-color: var(--color-1);
    color: #fafafa;
    /*display: inline-block;*/
    display: none; /* Hide all by default */
    border-radius: 8px;
    padding: 20px;
    & h2

{
    margin: 0;
    padding: 0;
    margin-bottom: 6px;
}

& img {
    width: 260px;
    height: auto;
}

& button {
    padding: 6px;
    width: 100%;
    border-radius: 6px;
    margin-top: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(0,0,0,.5);
}

& a {
    padding: 6px;
    width: 100%;
    border-radius: 6px;
    margin-top: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(0,0,0,.5);
    background-color: var(--blanco);
}

}

.proyecto-box.active {
    display: inline-block; /* Show active box */
}

.fila-proyectos {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 20px;
    & h1

{
    margin-top: 0px;
}

}

.btn-flecha {
    padding: 20px;
    opacity: .5;
    transition: all .2s ease-in-out;
    visibility: visible; /* Ensure visibility by default */
}

    .btn-flecha:hover {
        opacity: 1;
    }

    .btn-flecha.disabled {
        visibility: hidden; /* Hide the button but keep the space */
    }

/* FIN MIS PROPIEDADES */


.descripcion-edificio {
    background-color: #cdcccc;
    border-radius: 14px;
    display: inline-block;
    padding: 20px;
    overflow: hidden;
    width: auto;
    height: auto;
}

.cont-edificio {
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 8px;
    background-color: #fafafa;
    display: inline-flex;
}

.imagen-edificio {
    width: 220px;
    aspect-ratio: 2 / 2.6;
    overflow: hidden;
    & img

{
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    -o-object-fit: cover;
    object-position: center;
    -o-object-position: center;
}

}

.desc-edificio {
    width: 320px;
    text-align: left;
    font-size: 14px;
    font-family: 'gothamlight', sans-serif;
    padding: 20px;
    display: inline-flex;
    align-items: center;
    & span

{
    padding: 4px 8px;
    display: inline-flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 2px;
    text-align: left;
    width: 100%;
    & b

{
    background-color: #e7e6e6;
    padding: 4px 8px;
}

}
}

.detalle {
    width: 100%;
    height: auto;
    display: block;
    background-color: #fafafa;
    border-radius: 8px;
    overflow: hidden;
}

    .detalle div {
        text-align: left;
        font-size: 14px;
        font-family: 'gothamlight', sans-serif;
    }

.cabecera {
    background-color: var(--color-1);
    color: #fafafa;
    text-align: center !important;
    font-size: 14px;
    font-family: 'gothamlight', sans-serif;
    padding: 6px 0;
}

.tabla-detalles {
    font-size: 14px;
    font-family: 'gothamlight', sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
    & th

{
    padding: 2px 12px;
    background-color: #9d9d9c;
    color: #fafafa;
    font-weight: 100;
    border-radius: 4px;
}

& td {
    padding: 2px 12px;
    background-color: #ededed;
    color: #252525;
    border-radius: 4px;
}

}

.small-depto {
    background-color: #fafafa;
    border-radius: 14px;
    display: block;
    width: auto;
    padding: 8px 20px;
    position: relative;
    & table td

{
    font-family: 'gothamlight', sans-serif;
    padding: 6px 16px;
}

& table tr:first-child td {
    border-right: 1px solid #252525;
}

    & table tr:first-child td:last-child {
        border-right: none;
    }

& .bg-red {
    background-color: var(--color-1);
    color: #fafafa;
    width: 100%;
    text-align: center;
}

}

.small-cabecera {
    color: #fafafa;
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 84%;
    & b

{
    background-color: var(--color-1);
    color: #fafafa;
    border-radius: 8px;
    width: 100%;
    display: block;
    padding: 6px 0px;
    font-weight: 100;
}

}

.imagen-depto {
    & img

{
    max-width: 600px;
    height: auto;
    display: block;
    background-color: #fafafa;
    border-radius: 14px;
    padding: 20px;
}

& a {
    display: inline-block;
}

    & a img {
        background-color: transparent;
        display: inline-block;
        height: 14px;
        padding: 0px;
    }

}

.barra-ejemplo {
    width: 650px;
    height: auto;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background-color: #fafafa;
}

.barra-cabecera {
    background-color: var(--color-1);
    color: #fafafa;
    text-align: center;
    padding: 6px 0px;
}

.tabla-solicitudes {
    padding: 10px;
    font-size: 14px;
    & th

{
    background-color: #9a9999;
    color: #fafafa;
    text-align: center;
    font-weight: 100;
    padding: 8px 0;
    &:first-child

{
    border-radius: 6px 0 0 6px;
}

&:last-child {
    border-radius: 0 6px 6px 0;
}

}

& td {
    background-color: #e7e6e6;
    color: #252525;
    padding: 8px 0;
    font-family: 'gothamlight', sans-serif;
    border-bottom: 3px solid white;
    &:first-child

{
    border-radius: 6px 0 0 6px;
}

&:last-child {
    border-radius: 0 6px 6px 0;
}

}

& .status-ok {
    background-color: #48ae4d;
    color: #fafafa;
    padding: 4px 8px;
    border-radius: 4px;
}

& .status-warning {
    background-color: #ffed00;
    color: #252525;
    padding: 4px 8px;
    border-radius: 4px;
}

& .btn-red {
    background-color: var(--color-1);
    color: #fafafa;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    border: none; /*NEW*/
    &:hover

{
    background-color: #252525;
}

}
}

/*fin nuevo codigo*/




.container-flotante {
    width: 100%;
    height: auto;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    justify-content: center;
    align-items: center;
    text-align: center;
    & h2

{
    color: #fafafa;
    font-weight: 100;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    font-family: 'gothamssmlight', sans-serif;
}

}

.barra-bienvenida {
    background-color: rgba(63,63,63,.8);
    width: 100%;
    height: auto;
    padding: 20px 0;
}

.fila {
    display: inline-flex;
    width: 100%;
    height: auto;
    justify-content: center;
    gap: 12px;
}

.btn-home {
    background-color: var(--color-1);
    color: #fafafa;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    padding: 30px 40px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 18px;
    transition: all .2s ease-in-out;
    & img

{
    padding-bottom: 4px;
}

&:hover {
    background-color: var(--negro);
}

}

.btn-volver {
    border: 2px solid #fafafa;
    color: #fafafa;
    text-decoration: none;
    border-radius: 6px;
    letter-spacing: 1px;
    padding: 6px 12px;
    display: inline-block;
    width: auto;
    height: auto;
    margin-top: 20px;
    background-color: rgba(0,0,0,.3);
    transition: all .2s ease-in-out;
    &:hover

{
    background-color: rgba(0,0,0,.6);
}

}


/* HEADER SUPERIOR */
header#header {
    height: 50px;
    /*background: #fff; ajuste angel*/
    background: #000;
    box-sizing: border-box;
    padding: 6px;
    text-align: center;
    position: fixed;
    top: 0px;
    z-index: 999;
    width: 100%;
    -webkit-box-shadow: 0px 9px 11px -12px rgba(40,72,171,1);
    -moz-box-shadow: 0px 9px 11px -12px rgba(40,72,171,1);
    box-shadow: 0px 9px 11px -12px rgba(40,72,171,1);
}

#header .bienvenida {
    display: inline-block;
    margin-top: 3px;
    position: absolute;
    left: 65px;
}

    #header .bienvenida .icono {
        display: inline-block;
        height: 30px;
        width: 30px;
        vertical-align: top;
    }

    #header .bienvenida strong {
        font-style: italic;
        color: #505353;
        line-height: 32px;
    }

#header .btnmenu {
    background-image: url("../img/header/menu-cerrado.png");
    height: 38px;
    width: 38px;
    background-size: 34px;
    background-position: 2px 2px;
    display: inline-block;
    position: absolute;
    right: 8px;
    background-repeat: no-repeat;
    cursor: pointer;
}

    #header .btnmenu.activo {
        background-image: url("../img/header/menu-abierto.png");
    }

#header .logo {
    /* background-image: url("../img//header/Icono.jpg");*/
    height: 38px;
    width: 48px;
    background-size: 42px;
    background-position: 2px 2px;
    display: inline-block;
    background-repeat: no-repeat;
}

#header .asesoria {
    /*background-image: url("../img/menu/equis-gris.png");*/
    background-size: cover;
    height: 38px;
    width: 35px;
    display: inline-block;
    position: absolute;
    left: 8px;
    line-height: 35px;
    border-radius: 3px;
    cursor: pointer;
}

#header .Name {
    /*background-image: url("../img/menu/icono_cliente.png");*/
    background-size: cover;
    height: 38px;
    width: 35px;
    display: inline-block;
    position: absolute;
    left: 45px;
    line-height: 35px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 5px;
}

#header .Name2 {
    height: 0px;
    width: 70px;
    display: inline-block;
    position: absolute;
    left: 85px;
    line-height: 25px;
    border-radius: 3px;
    text-align: left;
    line-height: 17px;
    font-size: 11px;
    padding-top: 3px;
    color: #333F78;
}

/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
    width: 100%;
    max-width: 360px;
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 9;
    top: 50px;
    /* left: -360px;*/
    right: -360px;
    background: #333F78;
    text-align: left;
    transition: all 0.3s;
    overflow-x: hidden;
    display: none;
}

    #sidebar.active {
        /*  left: 0;*/
        right: 0;
        display: block;
    }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
    display: none;
}

#sidebar ul li {
    display: block;
    background: #333F78;
    border-bottom: 3px solid #FFFFFF;
    font-size: 16px;
    margin-bottom: -1px;
}

    #sidebar ul li:last-child {
        border-bottom: 0px;
    }

    #sidebar ul li a {
        display: inline-block;
        padding: 10px 15px;
        line-height: 32px;
        vertical-align: top;
        width: 100%;
        box-sizing: border-box;
    }

    #sidebar ul li a, a:hover {
        color: #FFFFFF;
        text-decoration: none !important;
    }

    #sidebar ul li.sub a {
        width: calc(100% - 69px);
    }

    #sidebar ul li .cruz {
        width: 62px;
        height: 55px;
        display: inline-block;
        background-image: url("../img/slidebar/equis-gris.png");
        background-size: 21px;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: top;
        cursor: pointer;
    }

    #sidebar ul li a .icono {
        width: 36px;
        height: 32px;
        display: inline-block;
        vertical-align: top;
        margin-right: 15px;
    }

#sidebar ul.abierto li.sub.activo {
    background: #E46575;
}

    #sidebar ul.abierto li.sub.activo a {
        color: #fff;
    }

#sidebar li a .icono-inicio {
    background-image: url("../img/slidebar/inicio.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-cuenta {
    background-image: url("../img/slidebar/datos_mi_cuenta.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-inmuebles {
    background-image: url("../img/slidebar/mis_inmuebles.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

/*    #sidebar li a .icono-postventa {
        background-image: url("../img/slidebar/post_venta.png");
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: center;
    }*/

#sidebar li a .icono-cuotas {
    background-image: url("../img/slidebar/pagar_cuota.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-mapa {
    background-image: url("../img/slidebar/mapa_inmuebles.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-preguntas {
    background-image: url("../img/slidebar/preguntas_frecuentes.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-compra {
    background-image: url("../img/slidebar/proceso_compra.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-novedades {
    background-image: url("../img/slidebar/novedades.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-contacto {
    background-image: url("../img/slidebar/contactenos.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-postventa {
    background-image: url("../img/slidebar/post_venta.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar li a .icono-terminos {
    background-image: url("../img/slidebar/t_cond.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #333F78
}

/* SERVICIOS */

#servicios {
    background: #424141;
    border-bottom: 1px solid white;
}

    #servicios .pie {
        width: 100%;
        height: 100px;
    }

        #servicios .pie div {
            padding: 1px 0px;
            /**/ /*font-size: 90%;*/
            /*margin: 50px 0px;*/
            /*height: 65px;*/
            /*border-right: 1px solid gray;*/
            text-align: center;
        }

            #servicios .pie div:last-child {
                border: none;
            }

            #servicios .pie div a {
                display: block;
                /*line-height: 2;*/
                color: #c7c5c3;
                text-align: center;
            }

            #servicios .pie div .icono {
                display: inline-block;
                width: 28px;
                height: 30px;
                margin-left: 7px;
                vertical-align: top !important;
            }

            #servicios .pie div .icono-compra {
                background-image: url("../img/footer/manos_gris.png");
                background-size: 25px;
                background-repeat: no-repeat;
            }

            #servicios .pie div .icono-postventa {
                background-image: url("../img/footer/icono_postventaNew.png");
                background-size: 25px;
                background-repeat: no-repeat;
            }

            #servicios .pie div .icono-consulta {
                background-image: url("../img/footer/icono_cliente.png");
                background-size: 25px;
                background-repeat: no-repeat;
            }

            #servicios .pie div .icono-preguntas {
                background-image: url("../img/footer/icono_preguntas.png");
                background-size: 24px;
                background-repeat: no-repeat;
            }

            #servicios .pie div .icono-tips {
                background-image: url("../img/footer/icono_tips.png");
                background-size: 16px;
                background-repeat: no-repeat;
                margin-top: -1px;
                margin-left: 15px;
            }

/* FOOTER */
footer {
    background: #333F78;
    padding: 15px 15px 45px 15px;
    text-align: center;
    color: #ffffff;
    font-size: 90%;
    line-height: 18px;
}

.inferior {
    text-align: center;
    bottom: 100px;
}

.inferior2 {
    text-align: center;
    bottom: 45px;
}

.btnconocenos {
    /*background-image: url(../img/conocenos.png);*/
    height: 82px;
    width: 250px;
    background-size: 197px;
    background-position: 1px 1px;
    display: inline-block;
    left: 6px;
    margin-top: 14px;
    background-repeat: no-repeat;
    font-size: 20px;
}

.btnMenu1 {
    background: #3EE2F9;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu2 {
    background: #EA922F;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu3 {
    background: #55E83D;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu4 {
    background: gray;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu5 {
    background: #F5D11A;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu6 {
    background: #BBA03E;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu7 {
    background: #34851C;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu8 {
    background: #8a2be2;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu9 {
    background: #393BBB;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu10 {
    background: #D83C3C;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenu11 {
    background: #3b8c43;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.btnMenuPacal {
    background: #013571;
    height: 95px;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 0px;
    color: white;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 7px;
    cursor: pointer;
    width: 105px;
}

.card-header {
    padding: -0.0rem;
    padding-left: 10px;
}


.rcorners1 {
    border-radius: 30px / 30px;
    background: #DDDDDD;
    padding: 20px;
    width: 100%;
    height: 64px;
    color: #515151;
    font-family: Arial, Helvetica, sans-serif;
    text-align: right;
}

.rcorners2 {
    border-radius: 30px / 30px;
    background: #333F78;
    padding: 20px;
    width: 100%;
    height: 64px;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

.pass {
    font-size: 16px;
}

/*body {
    font-family: 'Open Sans  Condensed:300,700';
}*/

/* MOBILE */
@media (max-width: 576px) {
    .textLink {
        font-size: 11px;
    }

    .textFooter {
        font-size: 10px;
    }

    #superior .Name2 {
        width: 40px;
    }

    #superior .Name {
        width: 30px;
    }

    .pass {
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .textLink {
        font-size: 10px;
    }

    .pass {
        font-size: 10px;
    }
}


.btnCollapsed[aria-expanded="true"] {
    color: white;
    border-radius: 0px;
}

    .btnCollapsed[aria-expanded="true"] > .imgdown {
        background-image: url("../img/flecha-blanca.png");
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto auto;
        background-size: 40px;
        background-repeat: no-repeat;
        background-position: center;
        width: 45px;
        /*  margin-top: 10px;*/
        height: 25px;
    }

.btnCollapsed2[aria-expanded="true"] {
    color: white;
    background: #333F78;
    border-radius: 0px;
}

    .btnCollapsed2[aria-expanded="true"] > .imgdown {
        background: url("../img/flecha-blanca.png");
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto auto;
        background-size: 40px;
        background-repeat: no-repeat;
        background-position: center;
        width: 45px;
        /*  margin-top: 10px;*/
        height: 25px;
    }

.btnCollapsed2[aria-expanded="false"] {
    color: white;
    background: #333F78;
    border-radius: 0px;
}

    .btnCollapsed2[aria-expanded="false"] > .imgdown {
        background: url("../img/flecha-blanca-activo.png");
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto auto;
        background-size: 40px;
        background-repeat: no-repeat;
        background-position: center;
        width: 45px;
        /*  margin-top: 10px;*/
        height: 25px;
    }

.btnCollapsed[aria-expanded="false"] > .imgdown {
    background: url("../img/flecha-blanca-activo.png");
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto auto;
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center;
    width: 45px;
    /*  margin-top: 10px;*/
    height: 25px;
}

.imgLeft {
    background: url("../img/flecha_01.png");
    /*background-position-x: 0%;
    background-position-y: 0%;*/
    background-repeat: repeat;
    background-size: auto auto;
    background-size: 27px;
    background-repeat: no-repeat;
    background-position: center;
    width: 45px;
}

.btnGris {
    background: #5f87eb;
    color: white;
    border-radius: 0px;
}

    .btnGris:hover {
        color: white;
    }

.collapseGris {
    padding: 0px;
}

.infoDiv {
    background: #DBE1EA;
}

.carousel-control-prev-icon {
    background-image: url("../img/flecha_slide_izq.png");
    width: 30px;
    height: 30px;
}

.carousel-control-next-icon {
    background-image: url("../img/flecha_slide_der.png");
    width: 30px;
    height: 30px;
}



#sidebar li a .icono-oneclick {
    background-image: url(../img/slidebar/ic_oneclick.png);
    background-repeat: no-repeat;
    background-position: center;
}



.detailsa {
    display: inline-block;
    text-decoration: none;
    color: #000;
    transition: transform 0.2s ease-in-out;
}

    .detailsa:hover {
        transform: scale(1.03);
        color: #000;
    }


.contentrequests {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease, padding 0.1s ease;
    padding: 0 0;
}

    .contentrequests.show {
        max-height: 100%;
        padding: 10px;
    }

.headertoggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.arrow {
    transition: transform 0.1s ease;
}

.headertoggle .arrow.open {
    transform: rotate(180deg);
}


.btn-red {
    background-color: var(--color-1);
    color: #fafafa;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    &:hover
    {
        background-color: #252525;
    }
}


@media only screen and (max-width: 600px) {

.v-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.form-login {
  width: 360px !important;
}

.texto-login {
  display: none;
}

.container-flotante {
  overflow: hidden;
  & h2{
    font-size: 21px;
  }
}

.fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 20px;
}

.container-flex {
    flex-direction: column;
    top: 90px;
    transform: none;
}

.mis-datos {
    width: 100%;
}

.btn-flecha.disabled {
    visibility: hidden;
    width: 0px;
    overflow: hidden;
    padding: 0px;
}

#ViewPartial{
    width: 100%;
    overflow-x: auto;
}

.descripcion-edificio{
    width: 100%;
}

.cont-edificio{
    flex-direction: column;
    width: 100%;
}

.imagen-edificio{
    width: 100%;
    aspect-ratio: 1 / 1;
}

.btn-red{
    white-space: nowrap;
}

.imagen-depto {
    & img {
        max-width: 350px;
        height: auto;
        display: block;
        background-color: #fafafa;
        border-radius: 14px;
        padding: 20px;
    }
}

}