*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    transition: all .3s ease-out;
}
:root{
    --Plomo:#5e5e5e;
    --Azul:#005db4;
    --GrisFondo:#f0f0f0;

    font-family: 'Ruda', sans-serif; 
}
/*UTILIDADES*/

.containerWaitImg{
    display: inline-block;
    margin-left: 1rem;
    width: 5%;
}
#gifLoader{
    display: block;
}
#gifLoader2{
    display: none;
}
.inputHidden{
    display: none;
}
.selected-image{
    margin-bottom: 2rem;
}
.inputInline{
    display: inline-block;
    padding: .5rem;
    font-size: 1.2rem;
    border: 0;
    border-bottom: 1px solid var(--Brown);
    color: var(--Brown);
}
.inputInline:focus-visible{
    outline: 0;
}
.btnSubmit{
    background-color: #503C3D;
    border: 2px solid var(--Beige);
    border-radius: 0;
    color: var(--Plomo);
    cursor: pointer;
    font-size: 1rem;
    font-family: "Ruda", sans-serif;
    padding: .5rem 1.5rem;
}
.inputNumber{
    padding: .4rem;
    font-size: 1rem;
    width: 3rem;
    border: 2px solid var(--Brown);
}
.inputNumberFloat{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2rem;
    background-color: var(--Plomo);
    color: var(--Brown);
    border:2px solid var(--Beige);
    font-family:"Ruda";
    font-weight:900;
}
.fileUp{
    border-style:dashed;
}
.icon-project{
    width: 24px;
    height: 24px;
    transition: all .2s linear;
}
.icon-project:hover{
    transition: all .2s linear;
    transform: scale(1.1);
}
.arrowTab{
    float: right;
    transition: all .2s linear;
}
.showInput{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    right: 0;
}
.showInput:checked{
    border: .35em solid var(--Plomo);
    appearance: none;
    background-color: var(--Brown);
    border-radius: 50%;
}
.showInput-checkBox{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    right: 0;
}
.showInput-checkBox:checked{
    border: .35em solid var(--Plomo);
    appearance: none;
    background-color: var(--Brown);
}
.head-add{
    font-size: 1.5rem;
    display: inline-block;
    margin-right: 1.5rem;
    margin-bottom: 4rem;
}
.input-form{
    border: 0;
    border-bottom: 1px solid var(--Brown);
    display: inline-block;
    width: 50%;
    font-size: 1.3rem;
    color: var(--Brown);
}
.showImages{
    visibility: hidden;
    height: 0px!important;
    transition: all .2s linear;
}
.activo{
    font-size: 1.4rem;
    padding: .4rem;
    margin: 0!important;
    gap: 0!important;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.activo:nth-of-type(1){
    background-color: rgba(2, 71, 2, 0.8);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 0 1px rgba(0,0,0,1);
}
.activo:nth-of-type(2){
    background-color: rgba(75, 2, 2, 0.8);;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 0 1px rgba(0,0,0,1);
}
#rbOn:checked ~ .activo:nth-of-type(1){
    background-color:rgb(5, 143, 5);
    color: rgb(255, 255, 255);
    box-shadow: 0 0 30px rgba(5, 143, 5, 1);
}
#rbOff:checked ~ .activo:nth-of-type(2){
    background-color:rgb(143, 5, 5);
    color: rgb(255, 255, 255);
    box-shadow: 0 0 30px rgba(143, 5, 5, 1);
}
.chkShowImages{
    display: none;
}
.chkShowImages:checked ~ .tabShowImg .arrowTab{
    transform: rotate(90deg);
    transition: all .2s linear;
}
.chkShowImages:checked ~ .showImages{
    visibility: visible!important;
    height: 38vh!important;
    transition: all .2s linear;
}
.tabShowImg{
    background-color: var(--Plomo);
    border: 2px solid var(--Beige);
    color: var(--Brown);
    display: block;
    padding: 1rem;
    width: auto;
    cursor:pointer;
}
.input-form:focus-visible{
    outline: 0;
}
.icon--see_galery{
    color: var(--Verdoso);
}
.icon--see_galery:hover{
    color: var(--Brown);
}
.icon--update_project{
    color: var(--Brown);
}
.icon--delete_project{
    color: rgb(209, 65, 65);
}
.icon--delete_project:hover{
    color: red;
}

/*****************/


.opt-add-category{
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: "Ruda",sans-serif;
    border: 2px solid var(--Brown);
    color: var(--Brown);
}
.panel-section{
    display: grid;
    height:100vh;
    background-color: var(--secondaryColor);
}
.sidebar-container{
    overflow: hidden;
    display: block;
}
.paneles-container{
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    background-color: var(--GrisFondo);
}
#paneles{
    border: 0;
}
.grid-images{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 2rem;
    border-radius: 8px;
    row-gap: 2rem;
    column-gap: 1rem;
}
.card-img{
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    border-radius: 8px;
    transition: border .1s linear;
    position: relative;
    text-align: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--Plomo);
}
.card-img img{
    height: 38vh;
}
.card-img:hover{
    transition: border .1s linear;
    box-shadow: 0 0 5px #4b4b4b;
}
.card-img:hover .image{
    border-radius: 8px;

    opacity: .6;
}
.card-img:hover .show-img-name, .card-img:hover #deleteImg{
    display: block;
}
.image{
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.show-img-name{
    position: absolute;
    color: white;
    font-weight: 600;
    display: none;
    cursor: default;
    word-break: break-word;
}
#deleteImg{
    background-color: rgb(224, 43, 43);
    border: none;
    border-radius: 0;
    color: white;
    cursor: pointer;
    display: none;
    font-size: 15px;
    padding: .2rem .3rem;
    position: absolute;
    right: 0;
    top: 0;
}
#deleteImg:hover{
    background-color: rgb(245, 112, 112);
}
.container-buttons{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
}
#guardarImagen{
    font-size: 1rem;
    margin-top: 2rem;
    padding: .8rem 1.3rem;
    width: 6.5rem;
}

.add_category{
    display: flex;
    justify-content: space-between;
}
.title{
    font-size: 2rem;
}
.categories_container{
    margin-top: 3rem;
    padding: 2rem 2rem 2rem 0;
}
.categories_container--proyectos{
    margin-top: 1.5rem;
    padding: 2rem 2rem 2rem 0;
}
.addCategory-form{
    display: flex;
    gap: 2rem;
    align-items: center;
}
.headline{
    font-weight: 600;
}
.txtCategory-name{
    border: none;
    border-bottom: 1px solid var(--primaryColor);
    font-size: 1rem;
    padding: .4rem;
    color: var(--fourthColor);
}
.txtCategory-name:focus{
    border-color: var(--primaryColor);
    outline: none;
}
.btn-guardarCategory{
    font-size: 1.1rem;
    padding: .3rem 1rem;
    border:2px inset;
    border-radius: 5px;
}
.tabla-categories{
    border-spacing: 2rem;
}
.table-header{
    font-size: 1.8rem;
}
.table-header--proyectos{
    font-size: 1.2rem;
}
.tabla-categories--result{
    font-size: 1.1rem;
}
.container-btn--update{
    color: rgb(45, 132, 167);
    border-color: rgb(45, 132, 167);
    border: 2px outset;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.container-btn--update:hover{
    color: white;
    border-color: rgb(14, 95, 128);
    background-color: rgb(45, 132, 167);
    transform: scale(1.1);
    transition: all .3s ease-in-out;
}
.container-btn--delete{
    color: #e81e1e;
    border-color: #e81e1e;
    border: 2px outset;
    border-radius: 5px;
    cursor: pointer;
}
.container-btn--delete:hover{
    color: white;
    border-color: #e81e1e;
    background-color: #e81e1e;
    transform: scale(1.1);
    transition: all .3s ease-in-out;
}
.grid-image-projects{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1rem;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 1rem;
    background-color: var(--Verdoso);
}
.grid-image-projects::-webkit-scrollbar{ background-color: var(--Plomo); width: 10px;}
.grid-image-projects::-webkit-scrollbar-track{ background-color: var(--Plomo); width: 10px;}
.grid-image-projects::-webkit-scrollbar-thumb{ background-color: var(--Plomo); width: 10px;}

.tabla-categories--result__img{
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50px;
}
.containerImgIconLogo{
    display: grid;
    grid-template-columns: 50% 50%;
    margin-bottom: 2rem;
}
.logoIconImg{
    max-width: 15rem;
    border-radius: 8px;
    border: 2px solid var(--Beige);
}
.loginForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90vh;
    padding:2rem;
}
.loginInputForm{
    border: 0;
    border-bottom: 2px solid var(--Azul);
    width: 20rem;
    display: block;
    padding: .5rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}
.loginInputForm:focus-visible{
    outline: 0;
}
.loginSubmitForm{
    border: 2px solid var(--Azul);
    border-radius: 0;
    color: var(--Azul);
    cursor: pointer;
    font-size: 1.2rem;
    padding: .5rem 2rem;
    width: 100%;
    transition: all .2s ease-in-out;
}
.loginSubmitForm:hover{
    background-color: var(--Plomo);
    color: var(--GrisFondo);
    border-color: var(--Azul);
    transition: all .2s ease-in-out;
}
.returnPage{
    color: var(--Brown);
    margin-top: 2rem;
    transition: all .2s ease-in-out;
}
.returnPage:hover{
    transform: scale(1.1);
    transition: all .2s ease-in-out;
}
.backButton{
    display: flex;
    padding: .4rem .4rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    background-color: var(--Plomo);
    border: 2px solid var(--Beige);
    border-radius: 5px;
    transition: all .2s ease-in-out;
}
.backButton:hover{
    background-color: var(--Brown);
    color: var(--Plomo);
    font-weight: 600;
    transition: all .2s ease-in-out;
}