:root {

   --background-primary :#2B2B2B;
   --background-secondary :#c5986e;
   --background-terceary :#3C3C3C;
   --background-quaternary :rgba(0,0,0,0.5);

   --text-color-primary : #FFF;
   --text-color-secondary : #ccc;
   --text-color-terceary : #c5986e;
   --text-color-quanternary : #2B2B2B;
    
}

html {
    font-size: 12px;
    /*
    12px
    14px
    18px
    20px

    */
}


* {

    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    line-height: 1.6;
}

body {

  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;


  
}


.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}


/* WEB */

input {
    border: none;
    outline-style: none;
    letter-spacing: 2px;
    padding-left: 10px;
    color: var(--text-color-primary);
    font-size: 1rem;
}

textarea {
    border: none;
    padding-left: 10px;
    color: var(--text-color-primary);
    outline-style: none;
    font-size: 1rem;
}

h3 {
    
    font-size: var(--fontsize-web-h3);

    font-size: 1rem;
}

h2 {
    font-size: var(--fontsize-web-h2);
    
    font-size: 1rem;
    
}

a {
    color: var(--text-color-primary);
    font-size: 11px;

    font-size: 1rem;
}

p {
    font-size: 10px;

    font-size: 1rem;
    
}

button:focus {
  outline: none;


}


/* MOVIL */

#container-dashboard {
    cursor: pointer;
}

.container-dashboard {

    width: 100%;
    height: auto;
   
}

header {
    /*
    margin-top: 400px;
    */
    width: 100%;
    
}


body {
    background-color: var(--background-primary);
}
.container-father {

    width: 100%;
    max-height: 650px;
    background-image: url('/img/image.jpg');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: space-between;
    transition: 0.3s ease-in-out all;

}

.container-left {
  
    width: 280px;
    height: 650px;

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--text-color-primary);
    /*
    background-color: var(--background-primary);
    */
    background-color: green;

}


.left-one {
    
    height: 160px;
    width: 100%;
    
    /*
    background-color: var(--background-primary);
    */
    
  
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    

}

.arch {

    width: 100%;

    position: absolute;
    transform: translateX(-100%);
    transition: 2.5s ease-in-out;
    opacity: 0;
}

.arch .company {
    color: var(--text-color-primary);
    /*
    background-color: var(--background-primary);
    */
    /*
    border: 1px solid red;
    */
}


.arch div {
    text-align: center;
    padding: var(--padding-primary);
}



.date {
  
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}


.month {
    width: 100%;
    /*
    background-color: var(--background-primary);
    */
    /*
    border: 1px solid blue;
    */

    
}

.month p {
    width: 100% !important;
    text-align: center;
    color: var(--text-color-secondary);
}

.day {
    width: 100%;
    /*
    background-color: var(--background-primary);
    */
    /*
    border: 1px solid orange;
    */
   
}

.day h3  {
    font-size: 40px;
    font-size: 1rem;
}



.left-two {
  
    width: 100%;
    height: 490px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.architecture-title{
    padding: var(--padding-secondary);
    width: 45%;
  
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    /*
    background-color: var(--background-primary);
    */

}

.architecture-title div {
    height: auto;
   
}

.text-vertical {
    width: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 10px;   /* Espaciado horizontal entre letras */
    display: flex;
    align-items: center;
}

.text-vertical p {
    text-align: center;
    font-size: 0.6rem;
    color: var(--text-color-primary);
}


.slash {
    width: 100%;

   


}

.slash p {
    text-align: center;
 
    color: #ccc;
   
}

.social-list {
    width: 100%;
   
}

.social-list ul li a {
    font-size: 12px;
    font-size: 0.7rem;
    color: var(--text-color-secondary);

    /*
    color: #666666;
    */
}

.controls {
    width: 55%;
    background-color: transparent;

    
}

.empty {
    width: 100%;
    height: 60px;
    /*
    background-color: var(--background-primary);
    */
}

.buttons {


    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgba(0,0,0,0.3);
  
}

.buttons a {

    min-width: 3rem;
    width: 100%;
    height: 3rem;

    font-size: 0.7rem;
    letter-spacing: 4px;
    font-weight: bold;
    display: flex;
    justify-content: space-around;
    align-items: center;

    cursor: pointer;

}

.buttons a:hover {

    transition: 0.3s ease-in-out;
    /*
    background-color: #c5986e;
    */
}

.container-right {

    width: 86%;
    position: relative;
    
}


.container-right .info {
 
    position: absolute;

    transform: translateX(-100%);
    
    opacity: 0;
    transition: 2.5s ease-in-out;
    border-radius: 10px 10px;
    background-color: rgba(0,0,0,0.3);
    margin: 0px 10px;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 5rem;
    height: auto;
    background-color: rgba(0,0,0,0.3);
    padding: 0rem 5px;
    transition: 0.3s ease-in-out;




   
   
}

#project_info_title {
    text-transform: uppercase;
}

#project_info_description::first-letter {
text-transform: uppercase;
}

.telephone {
    width: 100%;
    max-width: 150px;
    max-width: 200px;
    max-width: 10.5rem;
    width: 100%;
    

    align-items: center;
    display: flex;
    height: 3rem;
    justify-content: center;
    text-align: center;

    /*
    border: 1px solid red;
    */
}

.telephone a {
    width: 100%;
    font-size: 1rem;
    letter-spacing: 1px;

}

.telephone a:hover {

    /*
    transition: 0.3s ease-in-out;
    color: var(--text-color-terceary);
    */
 
}

.links {
   
    width: 100%;
    max-width: 30rem;
    height: auto;
    margin-right: 10px;
    /*
    border: 1px solid red;
    */



 
}


.links nav ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
}

.links nav ul li {

    height: 3rem;
    width: 7rem;
    width: auto;

  

    
    

}


.links nav ul li a {
    /*
    color: #c5986e;
    */
    color: var(--text-color-primary);
    letter-spacing: 3px;
    /*
    font-weight: bold;
    */
    font-size: 10px;
    font-size: 0.7rem;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    text-align: center;

}

.links nav ul li a i {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 2px;
}



.links nav ul li a:hover {
    /*

    color: var(--text-color-terceary);
    transition: 0.3s ease-in-out;
    /*
    background-color: #c5986e;
    */
} 

.nav:hover {
    /*
    background-color: rgba(0,0,0,0.5);
    */
}

.links .logout-btn {

    border: none;
    background-color: transparent;
    color: var(--text-color-primary);
    font-weight: bold;
    font-size: 11px;
    font-size: 0.7rem;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
   
 
    width: 100%;
    height: 100%;
    height: 3rem;
    /*
    margin: 0rem 0.2rem;
    */

}

.links .logout-btn:hover {
    /*

   color: var(--text-color-primary);;
   background-color: var(--background-secondary);
   transition: 0.3s ease-in-out;
   cursor: pointer;
   */
}


.links-active {
  
    max-width: 100dvw;
    display: block !important;
    position: fixed !important;
    left: 0;
    top: 0;
    height: 100dvh;
    background-color: var(--background-primary);
    z-index: 999;
    padding-top: 70px;
    margin: 0;
}

.links-active  > nav {
    width: 100%;

    height: 100%;
}

.links-active > nav ul {
    width: 100%;
    height: 100%;
}

.btn_toogle_menu{
    z-index: 99999;
}

.project {
   
    width: 100%;
    height: 100%;
    max-height: 550px;
  
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}


.info {

    max-width: 1000px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px 10px;

    display: flex;
    height: auto;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: right;
    

   
}

.project div h2 {

    width: 100%;
    text-align: right;
    height: auto;
    color: var(--text-color-primary);
    letter-spacing: 6px;
}



.project div p {
    text-align: right;
    width: 100%;
    height: auto;
    color: var(--text-color-primary);
    margin: 15px 0px;

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow-wrap: break-word;
    
    
}

.project div a {
    
    width: 100%;
    max-width: 150px;
    height: auto;
   
    background-color: var(--background-secondary);
    color: var(--text-color-primary);
    margin: 0px 10px;
    border-radius: 10px 10px 10px 10px;
    text-align: center;
}


.project .info {
    background-color: blue;
}



/* ABOUT */

#container-about {
    cursor: pointer;
    /*
    border: 1px solid red;
    */
   
}



.container-about{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--background-primary);
    color: var(--text-color-primary);
    padding-bottom: 50px;

    position: absolute;
    transform: translateX(-100%);
    transition: 2.5s ease-in-out;
    opacity: 0;
    padding: 80px 0px;


    





  
}

.about-title {
    width: 100%;
    font-size: var(--fontsize-web-h3);
    height: 120px;
   
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

 
}

.content-about {
  
 
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-title h3 {
    letter-spacing: var(--letterspacing-primary);
}



.content-about div {
    width: 100%;
    max-width: 300px;
    margin: 15px 15px;
 

}

.content-about .one {
    
    height: 100%;
    
    
}

.content-about .two{
    height: 400px;
    overflow-y: scroll;

    
    
}


.content-about {
    pointer-events: auto;
}



.content-about .tree {
    width: 400px;
    max-height: 450px;
    overflow-y: auto;

    transition: transform 0.5s;
    


}




.content-about .one h3 {
    font-size: var(--fontsize-web-h3);
    font-size: 1rem;
    padding: 15px 0px;
    color: var(--text-color-primary);
}


.content-about .one p {

    text-align: justify;
    color: var(--text-color-primary);
}


.content-about .two h3 {
    font-size: var(--fontsize-web-h3);
    font-size: 1rem;
    padding: 15px 5px;
    color: var(--text-color-primary);
}



.content-about .two ul li {
    height: auto;

    width: 100%;
    letter-spacing: 3px;
    font-size: 10px;
    font-size: 0.7rem;
    margin: 10px 0px;
    text-transform: uppercase;
    color: var(--text-color-primary);

}

.content-about .two ul li i{

    font-size: 20px;
    font-size: 1rem;
    color: var(--text-color-terceary);

}

.content-about .tree img {
    
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 5px 5px;
}


/* PROJECT */

.container-project{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--background-primary);
    background-color: violet;
    color: var(--text-color-primary);
 
    position: absolute;

    transform: translateX(100%);

    transition: 2.5s ease-in-out;
    opacity: 0;

   
    padding: 80px 0px;
    
}

.project-title {

    width: 100%;

    max-width: 1000px;
    font-size: var(--fontsize-web-h3);
    height: auto;
 
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px 20px;
    margin-bottom: 20px;

}

.project-title h3 {
    width: 100%;
    max-width: 350px;
    text-align: center;
    letter-spacing: var(--letterspacing-primary);
    margin-bottom: 20px;

    font-size: 15px;
    font-size: 1rem;
    
    
}

.project-title p {
    width: 100%;
    max-width: 600px;
    text-align: left;
    font-size: 11px;
    font-size: 1rem;
    color: var(--text-color-primary);
}



.content-project {
    margin-top: 20px;
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;




}

.content-project a {

    width: 100%;
    max-width: 300px;
    margin: 40px 10px;
    height: 450px;
    position: relative;
    display: flex;
    align-content: center;
    justify-content: right;
    flex-wrap: wrap;
    
}


.content-project a div {

    position: absolute;
    bottom: 10%;
    left: 0;
     background-color: rgba(0,0,0,0.5);

}






.content-project a:hover {
    opacity: 0.5;
    transition: 0.3s ease-in-out;
}

.content-project a h3 {
   width: 300px;
   margin: left;

   padding: 10px 10px;
   position: relative; 
   z-index: 2;
   color: var(--text-color-primary);
   font-size: 15px;
   letter-spacing: 2px;

   font-weight: lighter;
   text-transform: uppercase;
  
}

.content-project a p {
   width: 100%;
   color: var(--text-color-primary);
   z-index: 2;
   letter-spacing: 6px;
   padding: 5px 5px;

}


.content-project a img {
    
    width: 85%;
    height: 100%;
 
    object-fit: cover;
    object-position: center;
    border-radius: 5px 5px;
    
 

}


/*  container-year-experiences */


.container-year-experiences {
    width: 100%;
 

    display: flex;
    justify-content: center;
    background-color: var(--background-primary);
    background-color: green;
    color: var(--text-color-primary);

    position: absolute;
    transform: translateX(100%);
    transition: 2.4s ease-in-out;
    opacity: 0;

    padding: 80px 10px;
}

.container-year-experiences div {
    
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

.container-year-experiences div h3 {
    text-align: center;
    

}

.container-year-experiences div h3 .title {

    color: var(--background-secondary);
   
}

.number {

    font-size: var(--fontsize-web-xxl);
    background-image: url('https://img.freepik.com/fotos-premium/hermoso-mar-dorado-sol-brillar-al-atardecer_49071-1549.jpg');
      background-size: 200%;
      background-position: center;
      
      /* Esto es lo importante: */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      font-size: 7rem;
}


/* CONTAINER OUR CLIENTES*/

.container-our-clients {

    width: 100%;
    background-color: var(--background-primary);
    background-color: brown;
    color: var(--text-color-primary);

    position: absolute;
    
    transform: translateX(-100%);

    
    transition: 2.5s ease-in-out;
    opacity: 0;
    padding: 80px 0;

}

.content-our-clients {

    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
    
}

.content-our-clients .button-our-client {

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    margin-bottom: 30px;
}

.content-our-clients .button-our-client a {
    max-width: 300px;
    height: 50px;
}

.container-our-clients .content {
    width: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;


}



.container-our-clients .content div {
    width: 100%;
    max-width: 300px;
    margin: 30px 10px;
    height: 100px;
    height: 150px;
    color: var(--text-color-primary);

    background-color:var(--background-terceary);
    border-radius: 5px 5px;
    padding: 10px 10px;    
    padding: 0.4rem 0.4rem;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.container-our-clients .content div:hover { 
    /*
    transition: 0.3s ease-in-out;
    background-color: #fff;
    color: var(--text-color-quanternary);

    */
    

}



.container-our-clients .title {
    width: 100%;
    max-width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.container-our-clients .title h3 {
    letter-spacing: var(--letterspacing-primary);
    font-size: var(--fontsize-web-h3);
    font-size: 1rem;
}

.container-our-clients .content i {
    font-size: 25px;
    width: 100%;
    text-align: center;
}

.container-our-clients .content p {

    font-size: 12px;
    font-size: 1rem;
    letter-spacing: 6px;
}

.container-our-clients a {

    width: 200px;
    

}




/* CONTACT */


.container-contact {
    
    width: 100%;
    padding: 0px 20px;
    text-align: center;
    background-color: var(--background-quaternary);
    /*
    background-color: red;
    */
    /*
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.9)),url('https://www.blogdelfotografo.com/wp-content/uploads/2017/08/surface-945444_1920.jpg');
    */
    color: var(--text-color-primary);
}

.content-contact {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;

    position: absolute;

    transform: translateX(-100%);

    transition: 2.5s ease-in-out;
    opacity: 0;


}

.container-contact .content {
    
    width: 100%;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.container-contact .title {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: var(--letterspacing-primary);
    font-size: var(--fontsize-web-h3);
   
}


.container-contact .info {

    width: 100%;
    max-width: 200px;
    max-width: 250px;
    height: 250px;


   

}

.container-contact .info ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.container-contact .info ul li {
    width: 100%;
    margin: 5px 0px;
}

.container-contact .info ul li a {
    color: var(--text-color-secondary);
}

.container-contact .info ul li a:hover {
    transition: 0.3s ease-in-out;
    color: #fff;

}


.container-contact .form {

    width: 100%;
    max-width: 650px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.container-contact .form form {
  
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: space-between;
}

.container-contact .form form input {

    
    width: 200px;
    height: 50px;
    margin: 5px 5px;
    background-color: transparent;
    border-bottom: 1px solid #686767;

}

.container-contact .form form textarea {

    width: 200px;
    height: 50px;
    margin: 5px 5px;
    background-color: transparent;
    border-bottom: 1px solid #686767;

}


::placeholder {
    padding-left: 10px;
}


textarea::placeholder {
    
      padding: 10px 10px;
      
}




.contact-button {

    width: 100%;
    height: 120px;
    display: flex;
    justify-content: right;
    align-items: center;
}

.container-contact a {
    width: 100%;
    max-width: 100px;
}


/* CONTAINER FOOTER */

.container-footer {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    background-color: var(--background-primary);
    background-color: #3b82f6;
    color: var(--text-color-primary);
    padding: 0.7rem 0.7rem;
    
   

    
}

.container-footer .content-footer {

    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;


    opacity: 0;
    transition: 2.5s ease-in-out;

}
.container-footer .content-footer h3 {
    color: var(--text-color-primary);
}

.container-footer .content-footer p {
    text-align: center;
    color: var(--text-color-primary);
}


/* REUTILIZABLE BUTTON */


.button {
    

    width: 150px;
    height: auto;
    background-color: var(--background-secondary);
    color: var(--text-color-primary);
    padding: 10px 10px;
    border-radius: 10px 10px 10px 10px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.7rem;

      cursor: pointer;
    
}

.button:hover {
    /*
    transition: 0.3s ease-in-out;
    background-color: #fff;
    color: #3C3C3C;
    transform: scale(104%);
    */
}


.text-camel {
    color: var(--text-color-terceary);
}

.text-white {
    color: var(--text-color-primary);
}




/* DASHBOARD*/

.container-dashboard {
    
    width: 100%;
    background-color: var(--background-primary);
    height: auto;
    /*
    height: 100vh;
    */
    letter-spacing: 2px;
  
}

.help-link {

    width: 90%;
    margin: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #3C3C3C;
    height: 40px;
    max-height: auto;
    text-align: center;


}

.help-link p {
    width: 100%;
    height: 50px;
}




.nav_dashboard ul {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #3C3C3C;
    margin-bottom: 15px;
}

.nav_dashboard ul li {
    height: 100%;
    width: 250px;
}

.nav_dashboard ul li a i {
    font-size: 1.5rem;
    margin-right: 5px;
}

.nav_dashboard ul li a {
    text-transform: uppercase;
    font-weight: bold;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1px solid transparent;

}

.nav_dashboard ul li a:hover {
    color: #c5986e;
    transition: 0.3s ease-in-out;
    border-bottom: 1px solid #c5986e;
}

.list_create_title {
    color: var(--text-color-primary);
}

.dashboard_title_blog{

    display: block;              /* Asegura que el width se aplique */
    white-space: nowrap;         /* Evita el salto de línea */
    overflow: hidden;            /* Oculta el desbordamiento */
    text-overflow: ellipsis;     /* Agrega los "..." */
    width: 90%;
    margin: 5px 6px;
    padding: 15px 8px;
    font-size: 10px;
    color: var(--text-color-primary);
    /*
    height: 50px;
    */

    height: auto;
    background-color: #3C3C3C;
    text-align: center;
}

.dashboard_title_portfolio{

    display: block;              /* Asegura que el width se aplique */
    white-space: nowrap;         /* Evita el salto de línea */
    overflow: hidden;            /* Oculta el desbordamiento */
    text-overflow: ellipsis;     /* Agrega los "..." */
    width: 90%;

    margin: 5px 6px;
    padding: 15px 8px;
    font-size: 10px;
    color: var(--text-color-primary);
    /*
    height: 50px;
    */
    height: auto;
    background-color: #3C3C3C;
    text-align: center;
 
}



.dashboard_title_portfolio:hover {

    background-color: #c5986e;
    transition: 0.3s ease-in-out;
}

.dashboard_title_portfolio:hover span {
    color: #fff;
}

.dashboard_title_portada{

    display: block;              /* Asegura que el width se aplique */
    white-space: nowrap;         /* Evita el salto de línea */
    overflow: hidden;            /* Oculta el desbordamiento */
    text-overflow: ellipsis;     /* Agrega los "..." */
    width: 90%;

    margin: 5px 6px;
    padding: 15px 8px;
    font-size: 10px;
    color: var(--text-color-primary);
    /*
    height: 50px;
    */
    background-color: #3C3C3C;
    text-align: center;
 
}



.dashboard_title_portada:hover {

    background-color: #c5986e;
    transition: 0.3s ease-in-out;
}



.dashboard_title_blog:hover {
    background-color: #c5986e;
    transition: 0.3s ease-in-out;
    color: #fff;
}


.dashboard_title_blog:hover span {
    color: #fff;
}



#detail-stage-dinamic {
    margin: 10px 0px;
    width: 100%;
    padding: 5px 5px;
    background-color: #3C3C3C;
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    cursor: auto;


}

#detail-stage-dinamic ul {

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
 
    

}


#detail-images {

    display: flex;
    justify-content: space-around;
    width: 100%;
}

#detail-stage-dinamic ul li {
    width: 100%;
    margin: 10px 5px;
    color: var(--text-color-primary);
    font-size: 10px;

}

#detail-stage-dinamic-description {
    white-space: pre-wrap;
}


#detail-stage-dinamic ul li span {
    font-size: 9.5px;
}


#detail-stage-dinamic ul li img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    background-repeat: none;
    border-radius: 10px 10px;
}

#detail-stage-fixed ul {


    background-color: #3C3C3C;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#detail-stage-fixed ul li {
    width: 200px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
    border: 1px solid rgb(197, 152, 110);
    */
}

#detail-stage-fixed ul li a{
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

#detail-stage-fixed ul li a:hover {
    background-color: #c5986e;
    transition: 0.3s ease-in-out linear;
}

.master-list{
    height: 650px;
    overflow: hidden;
    overflow-y: scroll;
}



#dashboard_form_create_blog {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


#dashboard_form_create_blog label {
    width: 100%;
    height: 40px;
    color: var(--text-color-primary);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: left;
}

#dashboard_form_create_blog input {
    margin: 4px 0px;
    width: 100%;
    padding: 10px 10px;
    background-color: var(--background-primary);
}

#dashboard_form_create_blog textarea {
    width: 100%;
    min-height: 350px;
    height: auto;
    background-color: var(--background-primary);
}

#dashboard_form_create_blog button {

    border: none;
    border-style: none;
    margin: 15px 0px;
    cursor: pointer;

}



#dashboard_form_create_portfolio {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


#dashboard_form_create_portfolio label {
    width: 100%;
    height: 40px;
    color: var(--text-color-primary);
    font-size: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
}

#dashboard_form_create_portfolio input {

    margin: 4px 0px;
    width: 100%;
    padding: 10px 10px;
    background-color: var(--background-primary);

}


#dashboard_form_create_portfolio textarea {
    width: 100%;
    min-height: 350px;
    height: auto;
    background-color: var(--background-primary);
}


#dashboard_form_create_portfolio button {

    border: none;
    border-style: none;
    margin: 15px 0px;
    cursor: pointer;

}


#dashboard_form_update_portada_company {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}


#dashboard_form_update_portada_company label {
    width: 100%;
    height: 50px;
    color: var(--text-color-primary);
    font-size: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
}

#dashboard_form_update_portada_company input {

    margin: 4px 0px;
    width: 100%;
    padding: 10px 10px;
    background-color: var(--background-primary);
    font-size: 10px;

}


#dashboard_form_update_portada_company textarea {
    width: 100%;
    min-height: 350px;
    height: auto;
    font-size: 10px;
    background-color: var(--background-primary);
}


#dashboard_form_update_portada_company button {

    border: none;
    border-style: none;
    margin: 15px 0px;
    cursor: pointer;

}


.portada_form_style {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: var(--background-terceary);
    padding: 10px 10px;
    
}


.portada_form_style .font_active {
    font-size: small;
}

.portada_form_style p {
    font-size:xx-large;
    color:#fff;
    margin-bottom: 15px;
}

.portada_form_style h3 {
    color: var(--background-secondary);
}


.portada_form_style  label {
    width: 100%;
    height: 40px;
    color: var(--text-color-primary);
    font-size: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
}

.portada_form_style  input {

    margin: 4px 0px;
    width: 100%;
    padding: 10px 10px;
    font-size: 10px;
    background-color: var(--background-primary);

}


.portada_form_style  textarea {
    width: 100%;
    min-height: 350px;
    font-size: 10px;
    height: auto;
    background-color: var(--background-primary);
    margin: 10px 0px;
    padding: 10px 10px;
}


.portada_form_style div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    height: auto;
    /*
    margin-right: 10px;
    */
  
}


.portada_form_style img {
    margin: 10px 0px;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px 10px;
    object-position: center;

}


.portada_form_style  button {

    width: 100%; 
    max-width: 200px;
    border: none;
    border-style: none;
    margin: 15px 0px;
    cursor: pointer;
    font-size: 11px;

}


#append_form_fonts h3 {
    color:var(--background-secondary);
    margin: 30px 0px;
    padding: 10px 10px;
    text-transform: uppercase;
    font-size: small;
}

#append_form_fonts form {
    margin: 30px 0px;
}

#append_form_fonts form button {
    width: 100%; max-width: 200px;
}


.select_font_size {
    width: 100%;
    padding: 10px 10px;
    background-color: var(--background-primary);
    color: var(--text-color-primary);
    font-size: 10px;
    border: none;
    outline: none;
}

.select_font_size input {
    padding: 10px 0px;
}


::-webkit-scrollbar {
    
    display: none; /* Oculta la barra de desplazamiento */
    
}

body {
    overflow: auto; /* Mantiene el desplazamiento activo */
}
/* LOGIN USER*/
.container-login {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--background-primary);
    color: var(--text-color-primary);
}


.container-login .container_form {
    width: 100%;
    max-width: 1000px;
    height: 400px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.container-login .container_form .title_login {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    font-size: 12px;
    color: #Fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}


.container-login .container_form form {

    max-width: 400px;
    min-width: 320px;
    min-height: 200px;
    width: 100%;
    height: auto;
    margin: auto;
}



.container-login .container_form form input {

    width: 100%;
    height: 50px;
    margin: 5px 5px;
    background-color: #3C3C3C;
    font-size: 12px;
}

.container-login .container_form form label {

    width: 100%;
    letter-spacing: 2px;
    height: 50px;
    margin: 5px 5px;
    font-size: 12px;
}

.container-login .container_form form button {
    


    width: 100%;
    height: 50px;
    min-width: 320px;
    background-color: #c5986e;
    color: var(--text-color-primary);
    border: none;
    border-radius: 10px 10px;
    border-style: none;
    margin-top: 15px;
    letter-spacing: 2px;
    font-size: 12px;

    display: flex;
    justify-content: space-around;
    align-items: center;
}

.message_result_change_password {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;

}

.container_other_option_of_login {
    width: 100%;
    max-width: 1000px;
    height: auto;
    padding: 5px 5px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}



#message {
    color: #c5986e;
}




.container-blog-public {

    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
    
    background-color: var(--background-primary);
 
}



.container-blog-public h3 {


    width: 100%;
    max-width: 1200px;
    min-height: 100px;
    height: auto;
    color: #fff;
    font-size: var(--fontsize-web-h3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 10px 10px;
    background-color: #c5986e;
}



.container-blog-public ul {
    
    margin: 15px 15px;
    width: 100%;
    max-width: 1200px;
    height: auto;

    background-color: #3C3C3C;
    padding: 15px 15px;
    border-radius: 10px 10px;
 
}

.container-blog-public ul #title {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 400;
    text-transform: uppercase;
}



.container-blog-public ul li {
    overflow-wrap: break-word;
    word-wrap: break-word;
    width: 100%;

    font-size: 14px;
    margin: 15px 0px;

}


.container-blog-public ul li img {
  
    width: 100%;
    height: auto;

    border-radius: 10px 10px;
    object-fit: contain;
    object-position: center;



}

.container-blog-public ul li span {
    width: 100%;
    margin-top: 10px;
    text-align: center;
}




.container-blog-public ul #image_author {

    width: 100px;
    height: 100px;

    
}


.container-blog-public ul #image_author img{

    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
 
}

#base_form_contact_mail button {
    
    width: 200px;
    height: 50px;
    margin: 5px 5px;
    cursor: pointer;
    /*
    background-color: var(--background-secondary);
    */
    color: var(--text-color-primary);
    /*
    border: none;
    */
    border-radius: 5px 5px;
    letter-spacing: 3px;
    font-size: 11px;
    font-size: 1rem;

}
#base_form_contact_mail button:hover {
    /*
    background-color: #fff;
    color: #2B2B2B;
    transition: 0.3s ease-in-out;
    */
}



#loader {
    display: none;
    animation: spin 1s linear infinite;
}


#image_author img {
    
    border-radius: 20px 20px;
 
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}






input:focus {
  border: 2px solid #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);

}

textarea:focus {
  border: 2px solid #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);

}


.barra_de_titulo {

  margin: 10px 0px;
  padding: 10px 15px;
  background-color: transparent;
  color: #fff;
  font-size: 10px;
}




.alert_message {

    text-transform: uppercase;
    width: 90%;
    height: auto;
    margin: 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 4s ease-in-out;
    font-size: 10px;
    padding: 5px 0px;
}


.disabled-link {
    pointer-events: none; /* ignora clicks */
    opacity: 0.5;         /* visualmente apagado */
    cursor: default;      /* cambia el cursor */
}

.disabled-codigo-verificacion-psw{
    pointer-events: none; /* ignora clicks */
    opacity: 0.5;         /* visualmente apagado */
    cursor: default;      /* cambia el cursor */
}

#mail_message_response {
    width: 100%;
}

.alert_new_blog {
    display: none;
    width: 100%;
    color: #c5986e;
}


.alert_new_portfolio {
    display: none;
    width: 100%;
    color: #c5986e;
}


.dashboard_form_update_blog_images {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.dashboard_form_update_blog_images label {
    width: 200px;
}

.dashboard_form_update_blog_images input {
    width: 200px;
}

.dashboard_form_update_blog_images_multiples {

    max-width: 200px;
    width: 100%;
    height: auto;

}

.dashboard_form_update_blog_images_multiples > label {
    width: 100%;
    height: auto;
    padding: 5px 5px;
}

.dashboard_form_update_blog_images_multiples > input {
    width: 100%;
}




#image_preview_mini {
    position: relative;
}


#image_preview_mini button {

    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

.container_images_preview {
    margin: 20px 0px;
}


.dashboard_form_update_portfolio_images {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.dashboard_form_update_portfolio_images label {
    width: 200px;
}

.dashboard_form_update_portfolio_images input {
    width: 200px;
}

.dashboard_form_update_portfolio_images_multiples {

    max-width: 200px;
    width: 100%;
    height: auto;

}

.dashboard_form_update_portfolio_images_multiples > label {
    width: 100%;
    height: auto;
    padding: 5px 5px;
}

.dashboard_form_update_portfolio_images_multiples > input {
    width: 100%;
}


#container_fuentes_images {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#container_fuentes_images li  {
    width: 240px;
    height: 400px;
   
  
}


#container_fuentes_images li:nth-child(even) {
    margin: 100px 20px;
}


#container_fuentes_images li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
    transition: transform 0.3s ease,box-shadow 0.3s ease;
  
}

#container_fuentes_images li img:hover {
    transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);

}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    
}


.active_overlay {
    opacity: 1;
    pointer-events: auto;
}




.container_element_zoom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    position: relative;
    pointer-events: none;
}

.container_element_zoom button {

    position: absolute;
    right: 0;
    top: 10px;
    right: 10px;
    cursor: pointer;
    border: none;
}


#change_img_next {
    transition: 0.3s ease linear;
}

#change_img_prev {
    transition: 0.3s ease linear;
}


.company_styles input{
    width: 50px;
    height: 30px;
    padding: 0;
    border: none;
    background-color: none;
}





.sub_container-about {
    background-color:var(--background-terceary);
    transition: 0.3s ease-in-out all;
    opacity: 0;
    pointer-events: none;
    display: flex;
    z-index: 1;
    
}

#container-context-menu {
    width: 400px;
    max-height: 300px;
    padding: 5px 5px;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out all;
}

.container-context-menu-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    
}

/*

#container-about:hover .sub_container-about {

    opacity: 1;
    pointer-events: auto;
}


#container_dashboard:hover .sub_container_dashboard {
    margin-top: 0.2rem;
    opacity: 1;
    pointer-events: auto;
}


*/

#sub-container-about{
    display: none;

    overflow-y: auto;

    position: absolute;
    left: 0;
    top: 4.6rem;
    max-height: 184px;
    overflow-y: auto;
    /*
    background-color: rgba(0,0,0,0.5);
    */
    justify-content: flex-start;

}



#sub-container-dashboard {

    display: none;

    overflow-y: auto;

    position: absolute;
    left: 0;
    top: 4.6rem;
    max-height: 184px;
    overflow-y: auto;
    /*
    background-color: rgba(0,0,0,0.5);
    */
    justify-content: flex-start;
}




#sub-container-about li {

    width: 150px;
    margin: 0px 0px;
    /*
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    */
}


.active-toogle-about {
    margin: 5px 0;
    background-color:var(--background-terceary);
    z-index: 99999999999999;
    display: flex !important;

    height: auto;
}


.active-toogle-dashboard {
    margin: 5px 0;
    background-color:var(--background-terceary);
    z-index: 99999999999999;
    display: flex !important;

    height: auto;
}




#sub-container-dashboard li {

    width: 150px;
    height: 100%;
    margin: 0px 0px;
    /*
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    */
}




.toogle-menu {
    width: 100%;
    display: flex;
    justify-content: right;
    display: none;
}

.toogle-menu button {
    width: 60px;
    height: 40px;
    border-radius: 5px 5px;
    margin: 8px 8px;
    border: none;
}

.toogle-menu button i {
    font-size: 1rem;
}





/*

#company_styles_background_primary {
    width: 50px;
    height: 30px;
    padding: 0;
    border: none;
    background-color: none;
}


#company_styles_color_text_primary {
        width: 50px;
    height: 30px;
    padding: 0;
    border: none;
    background-color: none;
}
    */



    @media (max-width: 1081px) {

        
        .toogle-menu  {
            display: flex;
        }

        .project div p  {
            margin: 10px 5px;
        }

        .container-year-experiences {
            padding: 0px;
        }

        .container-project{
            padding: 0px;
        }

        .project-title p { 
            margin: 0px 30px;
        }

        .container-year-experiences div {
            margin: 0px 30px;
        }
        

        .content-about {
            justify-content: center;
            
        }

        .content-about div {
            margin: 15px 40px;
        }

        .content-about .one {
            max-width: 100%;
        }

        .content-about .two {
            max-width: 100%;
        }

        .content-about .tree {
            max-width: 100%;
        }

        .project-title h3 {
            max-width: 100%; 
        }

        .project-title p {
            max-width: 100%; 
        }

        #project_info_title{
            font-size: 0.7rem;
            writing-mode: vertical-rl;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
            overflow-wrap: break-word;
            max-height: 440px;
            height: 100%;
         
            
        }
        
        #project_info_description {
            font-size: 0.6rem;
           
        }

        .container-right .info {
            background-color: transparent;
            max-width: 400px;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 5px 5px;

      
   
        }






       .buttons a {
            height: 2rem;
            font-size: 0.6rem;
        
       }

        .project {
            width: 100%;
            height: calc(100% - 3rem);
            padding: 0.2rem 0.2rem;
            display: flex;
            align-items:flex-end;
          


        }



        .container-left {
            width: 250px;
        }

        .container-right .info a {
            font-size: 0.7rem;
            margin-bottom: 1.5rem;
            
        }
        
         .container-right {
            width: 60% !important;
        }

        .telephone {
            max-width: 100%;
            height: 2rem;
        }


    
        .links nav ul li {
            width: 100%;
            height: auto;
            overflow: hidden;
    
    

        }

        .links nav ul li a {
            padding: 10px 0px;
            color: var(--text-color-primary);
            
        }

        #container-about > a {
            pointer-events: none;
        }

        #sub-container-about{
            max-height: 240px;
            overflow-y: auto;
            display: flex;
            position: static;
     
            display: block !important;
   
        }

        #sub-container-about li {
            width: 100%;
            box-shadow: none;
        }

        

        #sub-container-about li a {
            color: var(--text-color-terceary)
        }


        #sub-container-dashboard{
            max-height: 240px;
            overflow-y: auto;
            display: flex;
            position: static;

            display: block !important;
   
        }

        #sub-container-dashboard li {
            width: 100%;
            box-shadow: none;
        }

        #sub-container-dashboard li a {
            color: var(--text-color-terceary)
        }





        .content-contact .content .info {
            max-width: 100%;
    
  
        }

        .content-contact .content .form {
            max-width: 100%;
    
            height: auto;
        }
        
        .content-contact .content .form form {
            width: 100%;
            justify-content: center;
        }

        .content-contact .content .form form input {
            width: 100%;
        }

        .content-contact .content .form form textarea {
            width: 100%;
        }

        #base_form_contact_mail button {
            margin-top: 2rem;
        }


        .links {
            display: none;
            position: relative;
            
        }

        .telephone {
            display: none;
        }

        .telephone a {
            font-size: 0.7rem;
        }


        .nav {
                min-height: 10px;
                background-color: transparent;
        }
        

        .about-title {
            margin: 0px 15px;
           
        }

        #base_section_about_title {
            width: 100%;
            margin: 0px 30px;
        }



        /* DASHBOARD PORTAL*/

        .nav_dashboard ul {
          width: 100% !important;
          justify-content:space-between;
        }

        .nav_dashboard ul li {
           
            width: 120px !important;
        }


        .section_dashboard {
            flex-direction: column;
        }

        #master {
       
            width: 100% !important;
           max-height: 150px !important;
           overflow: auto;
        }

        #master .master-list li {
            width: 100%;
            margin: 8px 0;

            
        }

        #master .help-link {
            width: 100%;
            margin: 0;
        }

        #detail {
           width: 100% !important;
            
        }

        #detail-stage-fixed {
           
        }

        #detail-stage-fixed ul {
            width: 100%;
        }

        #detail-stage-fixed ul li {
            width: 100%;
        }

        #detail #detail-stage-dinamic p {
            padding: 5px 5px;
        }


    }

    #advertising-miguelcabana {
        display: flex;
        flex-direction: column;
        width: 100%;

    }

    #advertising-miguelcabana li {
        width: 100%;
        margin: 5px 5px;

        padding: 10px 10px;
        color: var(--text-color-primary);
    }

    
    #advertising-miguelcabana li span {
        color: var(--text-color-terceary);
    }

      #advertising-miguelcabana li a {
        color: var(--text-color-terceary);
      }



#button-container-menu-edit-web-close {
    width: 60px;
    height: 40px;
    border-radius: 5px 5px;
    margin: 8px 8px;
  

}





#container-menu-edit-web{
    

    position: fixed;
    top: 0;
    left: 0;
    /*
    border: 2px solid red;
    */
    width: 100dvw;
    max-height: none;
    height: 400px;
    overflow-y: scroll;
    /*
    height: auto;
    */
    z-index: 9999999999999999;
    background-color: #3C3C3C;
    transition: 0.3s ease-in-out all;
    opacity: 0;
    pointer-events: none;

    
    
    
}




#container-menu-edit-web.container-menu-edit-active {
    
    opacity: 1 ;
    pointer-events: auto;
}


/*


#container-menu-edit-web form {
    
    
    
    border: 1px solid #fff;
    width: 24rem;
    height: auto;
    border-radius: 5px 5px;
    padding: 5px 5px;
    display: flex;
    align-items: center;

    border: 2px solid green;
    
    
    
}

#container-menu-edit-web form button {
    
    border: 2px solid red;
    

}

*/



/*

#form-menu-edit-web-background {
    display: flex;

    justify-content: space-between;
    
}

#form-menu-edit-web-background > div {
    width: 45%;
    border: 1px solid blue;
}

#container-menu-edit-web form label {
    width: 70%;
    font-size: 0.7rem;
    border: 1px solid red;
}

#container-menu-edit-web form input {
    font-size: 0.7rem;


}
    */



#container-menu-edit-web form button {
    font-size: 0.7rem;
}


#container-color-edit-no > input {
    width: auto;
}


#container-background-edit-no > input {
    width: auto;
}



input[type="color"] {
    max-width: 40px;
    height: 40px;
    border: none;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
}





.background_activate_no {
    background-color: green !important;
}

.background_active_disabled {
    opacity: 0.5;
    pointer-events: none;
}

.background-transparent-active {
    background-color: transparent !important;
}

#input-menu-edit-web-background {
    /*
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    */
}

.pickcolor {
    position: relative;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}


.pickcolor.background-transparent::after {
    content: "";
    height: 100%;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        transparent 48%,
        red 48%,
        red 52%,
        transparent 52%
    );
    pointer-events: none;
}

#header-container-father{
      transition: 0.3s ease-in-out all;
      
}

.header-container-father-active {

    margin-top: 404px;

}

.header-container-html-app-active {
      margin-top: 404px;
}


#sub_container_button_edit {
    border-radius: 5px 5px;
    cursor: pointer;
    transition: 0.3s ease-in-out all;
}

#sub_container_button_edit:hover{
    transform: scale(95%);
}



#btn-short-active-edit-web{

    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 9999999999;
    transition:  0.3s ease-in-out all;
    background-color: #c5986e;
}
#btn-short-active-edit-web:hover {
    transform: scale(110%);
}


#btn-short-active-edit-web i{
    color: #fff;
    font-size: 1rem;
}




.container-menu-edit-web-border-active {
   border: 1px solid #fff;
   transition: 0.3s ease-in-out;
   border-radius: 5px 5px;

}


.is_index {
    cursor: pointer;
    transform: scale(105%);
    transition: 0.3s ease-in-out ;
}

.is_index.active {
    color: goldenrod;

}


/*

#header-container-father {
    border: 2px solid orange;
    height: auto;
}

.container-father {
    display: flex;
    flex-wrap: wrap;
}

.container-father > div {
    width: 100%;
    border: 2px solid blue;
}


.left-two > div{
   
}

*/



#container-all-web { 
    border: 2px solid blue;
    padding: 10px 10px;
    /*
    background-image: url(http://apparchitecture.local/img/image.jpg);
    */
}





.desing_new_app_create_new_container_div {
    border: 1px solid red;
    padding: 5px 5px;
}


.desing_container {
    width: 100%;
    border: 2px solid orange;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding: 10px 5px;
}

.desing_container p {
    width: 200px;
    border: 2px solid red;
}

.desing_container div {
    padding: 10px 5px;
    margin: 5px 0px;
}






#form-logout {
    /*
    width: 200px !important;
    height: 100% !important;
    */
}

#form-logout button {
    border-radius: 5px 5px;
}

#btn-dashboard {
    border-radius: 5px 5px;
}

.app-page-active {
    margin-top: 404px;
}





.container-builder-box-input {

    width: 30rem;
      border: 1px solid #686767;
}
.content-builder-box-input {
    width: 100%;
}
.content-builder-box-input div {
    width: 100%;
}
.content-builder-box-input div form {
    width: 100%;
}





.container-builder-box-menu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
   
}


.content-builder-box-menu {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.builder-box-tabs {
    width: auto;
    display: flex;
    justify-content: space-between;

}

.builder-box-tabs * {
    margin: 0px 5px;
}

.container-builder-box-styles {

    width: 30rem;
      border: 1px solid #686767;
      padding: 0rem 0.5rem;
}

.container-builder-box-styles > div {
    height: 3rem;
    margin-bottom: 0.5rem;
}

.form-menu-edit-web-color {
  
    width: 100%;
   
    display: flex;
    justify-content: space-between;
    align-items: center;
   
 
}

#container-color-edit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    height: 100%;
    
}

#container-color-edit label {
    color: #fff;
    font-size: 0.7rem;
}

#container-color-edit-no {
    width: 50%;

}

#input-menu-edit-web-background-transparent {
    border-radius: 5px 5px;
   
}

#input-menu-edit-web-color-no {
    margin-left: 0.8rem;
    border-radius: 5px 5px;
}



#form-menu-edit-web-background {

    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.8rem 0rem;

}

#textarea-menu-edit-web-text-select-label {
    width: 100% !important;
    
    margin-top: 0.8rem !important;
    display: block;
    height: 3rem;

   
      border-radius: 5px 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 0.7rem;
}

#textarea-menu-edit-web-text-select {
    width: 100%;
    margin: 0.9rem 0rem;
    font-size: 0.7rem;
    opacity: 0.5;
    height: 4rem;
}



#btn_menu-edit-web {
    border-radius: 5px 5px;
    border: none;
    
    
}

#container-background-edit {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
   

}


#container-background-edit-no {
    width: 50%;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#container-background-edit label {
    color: #fff;
    font-size: 0.7rem;
}

#container-background-edit-no input{
    width: auto;
  
    margin-left: 0.8rem !important;
    display: inline-block;
    font-size: 0.7rem;
    border-radius: 5px 5px;
    cursor: pointer;
}



.container-builder-box-property {

    width: 30rem;
}

.content-builder-box-property {
    width: 100%;
}

.content-builder-box-property div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #686767;
    border-radius: 5px 5px;
    padding: 1rem 0rem;
    height: 3rem;
    margin-bottom: 0.5rem;
}

.content-builder-box-property div label {
    color: #fff;
    width: 50%;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.content-builder-box-property div input {
    width: 50%;

    height: inherit;
    color: #2B2B2B;
    font-size: 0.7rem;

}


.container-builder-box-input {
   
    width: 30rem;
}

.container-builder-box-input div {
   
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px 5px;
    margin-bottom: 0.5rem;

    height: auto;
}

.container-builder-box-input div form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.container-builder-box-input div form label {
    width: 50%;
  
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.7rem;
      color: #fff;
}

.container-builder-box-input div form input {
     width: 50%;

     height: 3rem;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 0.7rem;
     color: #2B2B2B;
}

.container-builder-box-input div form button {
    width: 100%;
    padding: 0.5rem 1rem;
    cursor: pointer;
}


.container-builder-box-input div form p {
    width: 100%;
    height: 3rem;
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-builder-box-input button {
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}


.container-builder-box-project {
  
    width: 30rem;
border: 1px solid #686767;
}


.container-builder-box-project div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px 5px;
    height: auto;
}

.container-builder-box-project div p { 
    width: 100%;
    height: 3rem;
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container_list_project_app {
    width: 100%;
}

.container_list_project_app button {
     width: 50%;
     height: 3rem;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 0.7rem;
     color: #2B2B2B;
     background-color: #fff;
     cursor: pointer;
}

.container_desing_new_app_menu {
    width: 100%;
    height: auto;
}

.container_desing_new_app_menu div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #686767;
    border-radius: 5px 5px;
    height: 3rem;
    margin-bottom: 0.5rem;
}


.container_desing_new_app_menu div button {
    width: 50%;
    height: inherit;
    font-size: 0.7rem;
    cursor: pointer;
}

.container_desing_new_app_menu div a {
    width: 20%;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.container_desing_new_app_menu div span {
    width: 20%;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}


.alert_web {
    width: 300px;
    height: 60px;
    border-radius: 5px 5px;
    background-color: green;
    color: #fff;

   
    opacity: 1;
    z-index: 999999999999;
    position: fixed;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateX(-110%);
    transition: 0.3s ease-in-out;

}

.alert_web.active {

    transform: translateX(0);
}

.alert_web.no_changes_active {
    background-color: #fff !important;
}