/* The popup form - hidden by default */
.summary-popup {
  display: block; /*none*/
  background-color: white;
  border: none;
  border-radius: 20px;
  min-height: 600px; /* Need a specific value to work */
  min-width: 300px;
  cursor: auto;
  box-shadow: 0 0 200px black;
  padding-bottom: 10%;

/*  clear: both;*/


}
#summary-popup-padding{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
  max-width: 600px; /* Need a specific value to work */
  padding-left: 2%;
  padding-right: 2%;  
  padding-bottom: 100px;
  z-index: 20;
}

#close-popup-area-summary {
  top: 0;
  left: 0; 
  right: 0; 
  bottom: 0;
  position: fixed;
  overflow-y:scroll;
  z-index: 10;
  display: none; /*none*/
  cursor: pointer;  
  z-index: 25;
}

#summary-popup-name {
  padding-left: 10%;
  padding-right: 10%;
  font-size: 200%;
  text-align: center;  
  font-family: 'Quicksand';
  font-weight: 700;
}

#summary-popup-skills-text {
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 10px;
  margin-top: 50px;
  font-size: 150%;
  text-align: center;  
  font-family: 'Quicksand';
  font-weight: 700;
}

#summary-popup-mail-box {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 30px;
/*  height: 200px;*/
  border: 1px solid black;
  border-radius: 25px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  font-family: 'Quicksand';
  font-weight: 700;
/*   box-shadow: 0 0 20px #ffdd99; */
  border: 2px solid rgb(246,192,45);
  background: rgb(255,254,217);
}


.summary-popup-skills-tree-header {
  display: flex;
  margin-left: 10%;
  margin-right: 10%;
  flex-wrap: wrap;
}
.summary-popup-skills-tree-header-add-skills {
  display: flex;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: 15px;
  background-color: unset;
  border: 0;
  height: 100%;
  border-radius: 15px;
  transition-duration: 0.5s;
  cursor: pointer;
}
.summary-popup-skills-tree-header-add-skills:hover {
  transform:scale(0.9);
  transition-duration:0.5s;
}

.summary-popup-skills-tree-header-add-skills-img {
  height:30px;
}

.summary-popup-skills-tree-header-add-skills-text {
  font-size: 130%;
  color: #0dbf5c;
  margin-top: auto;
  margin-bottom: auto;
  font-family: 'Quicksand';
  font-weight: 700;
  padding-left:10px;
  padding-bottom:5px;

}

.summary-popup-skills-tree-content {
  overflow: hidden;
  display: flex;
  margin-left: 10%;
  margin-right: 10%;
  flex-direction: column;

}

.summary-popup-skills-tree-content-any {
    font-family: 'Quicksand';
    font-size: 80%;
}

.summary-popup-skills-tree-content-detail-wrapper {
  margin-top: 0;
  overflow: hidden;
}
.summary-popup-skills-tree-content-detail {
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 20px;
  font-family: 'Quicksand';
  text-align: left;
  transition: all 0.5s;
  font-weight: 500;
}


.summary-popup-skills-tree-content-line {
/*  margin-top: -10%;*/
  border-radius: 15px;
  background-color: #F6C02D;
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-bottom: 15px;

}

.summary-popup-skills-tree-content-line-colapsed {
  display: flex;

  height: 100%;
  margin-bottom: 12px;
  margin-top: 12px;

}

.summary-popup-skills-tree-content-line-delete {
  height: 20px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 2%;
  transition-duration:0.5s;
  cursor:pointer;

}
.summary-popup-skills-tree-content-line-delete:hover {
  transform:scale(0.9);
  transition-duration:0.5s;
}

.summary-popup-skills-tree-content-line-text {
  margin: auto;
  font-family: 'Quicksand';
  font-size: 100%;
  font-weight: 700;


}
.summary-popup-skills-tree-content-line-inspect {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 2%;
  margin-left: unset;
  border: 0;
  background-color: unset;
  transition-duration:0.5s;

}
.summary-popup-skills-tree-content-line-inspect:hover {
  transform:scale(0.9);
  transition-duration:0.5s;
}


.summary-popup-skills-tree-content-line-inspect-image {
  height: 20px;
  cursor:pointer;

}


#summary-popup-mail-box-header {
  display: flex;
  margin-bottom: 20px;
}

#summary-popup-mail-box-contact-back {
  display: flex;
  margin-bottom: 20px;
}

#summary-popup-mail-box-name-email {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}

#summary-popup-mail-box-name {
  width: 45%;
  height: 30px;
  min-width: 180px;
/*  margin-right: auto;*/
  border-radius: 8px;

}

#summary-popup-mail-box-email {
  width: 45%;
/*  margin-left: auto;*/
  height: 30px;
  min-width: 180px;
  border-radius: 8px;
  background: white;
}


.summary-popup-mail-box-submit-active {
  font-family: 'Quicksand';
  height: 50px;
  border-radius: 15px;
  background-color: #0dbf5c;
  border: 0;
  font-weight: 700;
  color: white;
  padding: 0 20px;
  transition-duration:0.5s;
  cursor: pointer;
}
.summary-popup-mail-box-submit-active:hover {
  transform:scale(1.05);
  transition-duration:0.5s;
}

.summary-popup-mail-box-submit-disabled {
  font-family: 'Quicksand';
  height: 50px;
  border-radius: 15px;
  background-color: gray;
  border: 0;
  font-weight: 700;
  color: white;
  padding: 0 20px;
  cursor: no-drop;
}



#summary-popup-mail-box-contact-back-checkbox {
  width: 30px;
  height: 30px;

}


#summary-popup-mail-box-checbox-text {
    text-align: left;
    margin-left: 2%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

#expand-contract {
  border-bottom: 1px solid red;
  margin-top: -100%;
  transition: all 1s;
}

#expand-contract.expanded {
   background-color: green;
   margin-top: 0;
}