/***************************************************
* tipografia
* general
* archive user
* archive admin
* single user
* single admin
* consentiment area privada
***************************************************/
/****** variables ******/
:root {
    --color-primer: #d57e00;
    --color-segon: #3e3935;
    --text-color: #4a4a4a;
}

/****** tipografia ******/
.text-uppercase {
    text-transform: uppercase;
}
@media(max-width: 680px) {
    .areaprivada-class h1 {
        font-size: 36px;
    }
}
/****** general ******/
.areaprivada-class #main-content > .container {
    padding-bottom: 58px;
}
.areaprivada-class #main-content .container:before {
    content: none;
}
.text-center {
    text-align: center;
}
.areaprivada__content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 28% 4% 68%;
    grid-template-columns: 28% 68%;
    -webkit-column-gap: 4%;
       -moz-column-gap: 4%;
            column-gap: 4%;
}
@media(max-width: 767px) {
    .areaprivada__content {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
    .areaprivada__content-right {
        padding-top: 40px;
    }
}

/****** archive user ******/
/* login form */
#areaprivada-loginform {
    padding: 30px;
    margin: 30px auto 0;
    max-width: 600px;
    box-shadow: 4px 4px 9px 1px rgba(0, 0, 0, 0.5);
}
#areaprivada-loginform .login-username,
#areaprivada-loginform .login-password {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 39% 1% 60%;
    grid-template-columns: 39% 60%;
    -webkit-column-gap: 1%;
       -moz-column-gap: 1%;
            column-gap: 1%;
}
#areaprivada-loginform .login-username input,
#areaprivada-loginform .login-password input {
    padding: 10px 15px;
    background-color: #f5f5f5;
}
#areaprivada-loginform .login-submit {
    margin-top: 20px;
}
#areaprivada-loginform input[type="submit"],
.consent__form input[type="submit"] {
    padding: 10px 30px;
    background-color: var(--color-primer);
    color: #ffffff;
    border: 2px solid var(--color-primer);
    border-radius: 11px;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
}
#areaprivada-loginform input[type="submit"]:hover,
.consent__form input[type="submit"]:hover {
    background-color: #ffffff;
    color: var(--color-primer);
}
/* end login form */
.areaprivada-icon-tornar img {
    max-width: 16px;
    margin-right: 5px;
}
.areaprivada-user-info {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--color-primer);
}
.areaprivada-user-info p {
    margin-bottom: 15px;
    font-size: 20px;
    color: #ffffff;
}
.areaprivada-user-info h3 {
    padding-bottom: 0;
    font-size: 30px;
    color: #ffffff;
}
.areaprivada-user-menu {
    margin-top: 20px;
}
.areaprivada-user-menu > a,
a.areaprivada-icon-tornar {
    display: block;
    padding: 10px;
    border-radius: 11px;
    background-color: var(--color-segon);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}
.areaprivada-user-menu > a svg {
    fill: #ffffff;
}
.areaprivada-user-menu > a:hover,
a.areaprivada-icon-tornar:hover {
    background-color: var(--color-primer);
}
h1.areaprivada__content-title {
    padding-bottom: 0;
    font-size: 40px;
}
.areaprivada__content-list {
    padding-top: 50px;
}
.areaprivada__content-list article {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 60% 30% 10%;
    grid-template-columns: 60% 30% 10%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #adadad;
}
.areaprivada__content-list a:hover article {
    background-color: #ededed;
}
.areaprivada__content-list h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 25px;
}
.areaprivada__content-list .documents__data {
    padding-left: 15px;
    font-size: 16px;
}
.areaprivada__content-list .documents__icons {
    padding-left: 15px;
    line-height: 0.1;
}
.areaprivada__content-list article img {
    max-width: 25px;
}
@media(max-width: 680px) {
    #areaprivada-loginform {
        padding: 20px;
    }
    #areaprivada-loginform .login-username,
    #areaprivada-loginform .login-password {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}
@media(max-width: 480px) {
    h1.areaprivada__content-title {
        font-size: 28px;
    }
    .areaprivada__content-list {
        padding-top: 30px;
    }
    .areaprivada__content-list article {
        padding: 10px 0;
        -ms-grid-columns: 58% 34% 8%;
        grid-template-columns: 58% 34% 8%;
    }
    .areaprivada__content-list h2 {
        font-size: 20px !important;
    }
    .areaprivada__content-list .documents__data,
    .areaprivada__content-list .documents__icons {
        padding-left: 5px;
    }
}

/****** archive admin ******/
.areaprivada__admin-menu {
    text-align: right;
}
.areaprivada__admin-content {
    padding-top: 30px;
}
.admin-proyectos-filtro {
    margin-bottom: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
}
.admin-proyectos-filtro label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
#filtro-usuario {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}
.admin-proyectos-lista.loading {
    position: relative;
}
.admin-proyectos-lista.loading:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1;
}
.admin-proyectos-lista.loading:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.proyectos-container {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.proyecto-item {
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.proyecto-usuario {
    font-weight: 700;
    font-size: 16px;
    color: #23282d;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.proyecto-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 10px;
}
@media (max-width: 380px) {
    .proyectos-container {
        grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    }
}

/****** single user ******/
.documents__title h1 {
    font-size: 25px;
}
.documents__title span {
    font-size: 16px;
}
.documents__content,
.documents__files-img,
.documents__files-pdf {
    padding-top: 20px;
}
.documents__files-img .lightbox-gallery {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    row-gap: 20px;
}
.lightbox-gallery__item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.lightbox-gallery__item::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.lightbox-gallery__item img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}
.documents__files-pdf li:not(:last-child) {
    margin-bottom: 10px;
}
.documents__files-pdf a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.documents__files a:hover {
    text-decoration: underline;
}
.documents__files-pdf img {
    max-width: 30px;
    margin-left: 5px;
}
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 999999; /* Sit on top */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
}
.modal button { 
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 2px 16px; 
    background-color: #5cb85c; 
    color: white; 
}
@media (max-width: 980px) {
    .documents__files-img .lightbox-gallery {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 680px) {
    .documents__files-img .lightbox-gallery {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .documents__files-img .lightbox-gallery {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

/****** single admin ******/
.areaprivada__single-admin-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.areaprivada__single-icon-tornar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.areaprivada__single-icon-tornar svg {
    height: 16px;
}
.areaprivada__single-content {
    padding-top: 30px;
}

/****** consentiment area privada ******/
.consent__form {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid var(--color-segon);
}
.consent__form .button {
    margin-top: 20px;
}