label.file input {position:absolute; width:0; overflow:hidden; opacity:0;}
label.file {
  width:100%; /* Use for fluid design */
  min-width:200px;
  height:30px;
  line-height:28px!important;
  cursor:pointer;
  position:relative;
  display:inline-block;
  white-space:nowrap;
  font-family:sans-serif;
  text-align:right;
}
label.file:before {
  content:"No Passport image file selected";
  display:block;
  position:absolute;
  box-sizing:border-box;
  width:100%;
  height:inherit;
  padding:0 84px 0 10px;

  border-bottom:0px solid #d2d2d2;
  border-width:1px 0px 1px 2px;
  border-radius:3px 0 0 3px;
  background-color:#fff;
  color:#555555;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
  vertical-align:middle;
}
label.file[title]:not([title=""]):before{
  content:attr(title);
  color:#162f44;
}
label.file:after {
  content:"Passport image";
  display:inline-block;
  position:relative;
  box-sizing:border-box;
  width:200px;
  height:inherit;
  padding:0 4px;
  border-radius:0 3px 3px 0;
  background-color:#555555;
  color:#fff;
  overflow:hidden;
  font-size:14px;
  font-weight:normal;
  text-overflow:ellipsis;
  text-align:center;
  vertical-align:middle;
}



label.file2 input {position:absolute; width:0; overflow:hidden; opacity:0;}
label.file2 {
  width:100%; /* Use for fluid design */
  min-width:200px;
  height:30px;
  line-height:28px!important;
  cursor:pointer;
  position:relative;
  display:inline-block;
  white-space:nowrap;
  font-family:sans-serif;
  text-align:right;
}
label.file2:before {
  content:"No Face image file selected";
  display:block;
  position:absolute;
  box-sizing:border-box;
  width:100%;
  height:inherit;
  padding:0 84px 0 10px;

  border-bottom:0px solid #d2d2d2;
  border-width:1px 0px 1px 2px;
  border-radius:3px 0 0 3px;
  background-color:#fff;
  color:#555555;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
  vertical-align:middle;
}
label.file2[title]:not([title=""]):before{
  content:attr(title);
  color:#162f44;
}
label.file2:after {
  content:"Face image";
  display:inline-block;
  position:relative;
  box-sizing:border-box;
  width:200px;
  height:inherit;
  padding:0 4px;
  border-radius:0 3px 3px 0;
  background-color:#555555;
  color:#fff;
  overflow:hidden;
  font-size:14px;
  font-weight:normal;
  text-overflow:ellipsis;
  text-align:center;
  vertical-align:middle;
}



label.file3 input {position:absolute; width:0; overflow:hidden; opacity:0;}
label.file3 {
  width:100%; /* Use for fluid design */
  min-width:200px;
  height:30px;
  line-height:28px!important;
  cursor:pointer;
  position:relative;
  display:inline-block;
  white-space:nowrap;
  font-family:sans-serif;
  text-align:right;
}
label.file3:before {
  content:"No VISA image file selected";
  display:block;
  position:absolute;
  box-sizing:border-box;
  width:100%;
  height:inherit;
  padding:0 84px 0 10px;

  border-bottom:0px solid #d2d2d2;
  border-width:1px 0px 1px 2px;
  border-radius:3px 0 0 3px;
  background-color:#fff;
  color:#555555;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
  vertical-align:middle;
}
label.file3[title]:not([title=""]):before{
  content:attr(title);
  color:#162f44;
}
label.file3:after {
  content:"VISA image";
  display:inline-block;
  position:relative;
  box-sizing:border-box;
  width:200px;
  height:inherit;
  padding:0 4px;
  border-radius:0 3px 3px 0;
  background-color:#555555;
  color:#fff;
  overflow:hidden;
  font-size:14px;
  font-weight:normal;
  text-overflow:ellipsis;
  text-align:center;
  vertical-align:middle;
}



label.file4 input {position:absolute; width:0; overflow:hidden; opacity:0;}
label.file4 {
  width:100%; /* Use for fluid design */
  min-width:200px;
  height:30px;
  line-height:28px!important;
  cursor:pointer;
  position:relative;
  display:inline-block;
  white-space:nowrap;
  font-family:sans-serif;
  text-align:right;
}
label.file4:before {
  content:"No purchase file or image selected";
  display:block;
  position:absolute;
  box-sizing:border-box;
  width:100%;
  height:inherit;
  padding:0 84px 0 10px;

  border-bottom:0px solid #d2d2d2;
  border-width:1px 0px 1px 2px;
  border-radius:3px 0 0 3px;
  background-color:#fff;
  color:#555555;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
  vertical-align:middle;
}
label.file4[title]:not([title=""]):before{
  content:attr(title);
  color:#162f44;
}
label.file4:after {
  content:"Purchase file or image ";
  display:inline-block;
  position:relative;
  box-sizing:border-box;
  width:200px;
  height:inherit;
  padding:0 4px;
  border-radius:0 3px 3px 0;
  background-color:#555555;
  color:#fff;
  overflow:hidden;
  font-size:14px;
  font-weight:normal;
  text-overflow:ellipsis;
  text-align:center;
  vertical-align:middle;
}





label.file5 input {position:absolute; width:0; overflow:hidden; opacity:0;}
label.file5 {
  width:100%; /* Use for fluid design */
  min-width:200px;
  height:30px;
  line-height:28px!important;
  cursor:pointer;
  position:relative;
  display:inline-block;
  white-space:nowrap;
  font-family:sans-serif;
  text-align:right;
}
label.file5:before {
  content:"No attache file";
  display:block;
  position:absolute;
  box-sizing:border-box;
  width:100%;
  height:inherit;
  padding:0 84px 0 10px;

  border-bottom:0px solid #d2d2d2;
  border-width:1px 0px 1px 2px;
  border-radius:3px 0 0 3px;
  background-color:#fff;
  color:#555555;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
  vertical-align:middle;
}
label.file5[title]:not([title=""]):before{
  content:attr(title);
  color:#162f44;
}
label.file5:after {
  content:"Attach file";
  display:inline-block;
  position:relative;
  box-sizing:border-box;
  width:200px;
  height:inherit;
  padding:0 4px;
  border-radius:0 3px 3px 0;
  background-color:#555555;
  color:#fff;
  overflow:hidden;
  font-size:14px;
  font-weight:normal;
  text-overflow:ellipsis;
  text-align:center;
  vertical-align:middle;
}


.container_flotante {
  margin: 1em;
  position: fixed;
  bottom: 0;
  right: 0;
}
.container_flotante:hover .buttons2:not(:last-of-type) {
  width: 30px;
  height: 30px;
  margin: 15px auto 0;
  opacity: 1;
}
.container_flotante:hover .rotate {
  background-image: url("../images/Compose.svg");
  transform: rotate(0deg);
}
span.rotate {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-align: right;
}
span.rotate {
  background: #43b05c url("../images/Add.svg") center no-repeat;
  position: absolute;
  transform: rotate(90deg);
  transition: .3s;
}
.buttons2 {
  display: block;
  width: 35px;
  height: 35px;
  margin: 20px auto 0;
  text-decoration: none;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: .2s;
}
.buttons2:nth-last-of-type(2) {
  transition-delay: 20ms;
}
.buttons2:nth-last-of-type(3) {
  transition-delay: 40ms;
}
.buttons2:nth-last-of-type(4) {
  transition-delay: 60ms;
}
.buttons2:nth-last-of-type(5) {
  transition-delay: 80ms;
}
.buttons2:nth-last-of-type(6) {
  transition-delay: 100ms;
}
.buttons2:nth-last-of-type(1) {
  width: 56px;
  height: 56px;
  opacity: 1;
}
.buttons2:nth-last-of-type(2) {
  background: #D2A518 url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_invite_wht_24dp_r1.png") center no-repeat;
}
.buttons2:nth-last-of-type(3) {
  background: #3C80F6 url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_reminders_speeddial_white_24dp.png") center no-repeat;
}
.buttons2:nth-last-of-type(4) {
  background-image: url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/avatars/avatar_tile_j_80.png");
  background-size: contain;
}
.buttons2:nth-last-of-type(5) {
  background-image: url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/avatars/avatar_tile_x_80.png");
  background-size: contain;
}
.buttons2:nth-last-of-type(6) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/343394/profile/profile-80_3.jpg");
  background-size: contain;
}
.buttons2:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
button.delete{
  position:relative;
  float:right;
  margin-right: 10px;
}
.delete{
  position:relative;
  float:right;
  margin-right: 10px;
}
.container_flotante_borrar {
  width: 30px;
  position:relative;
  float:right;
}
.container_flotante_borrar:hover .buttons3:not(:last-of-type) {
  width: 15px;
  height: 15px;
  margin: 15px auto 0;
  opacity: 1;
}
.container_flotante_borrar:hover .rotate_borrar {
  background-image: url("../images/delete.svg");
  transform: rotate(0deg);
}
span.rotate_borrar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
span.rotate_borrar {
  margin-left: -15px;
  background: #e21b1b url("../images/dell.svg") center no-repeat;
  position: absolute;
  transform: rotate(90deg);
  transition: .3s;
}
.buttons3 {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0px auto 0;
  text-decoration: none;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: .2s;
}
.buttons3:nth-last-of-type(2) {
  transition-delay: 20ms;
}
.buttons3:nth-last-of-type(3) {
  transition-delay: 40ms;
}
.buttons3:nth-last-of-type(4) {
  transition-delay: 60ms;
}
.buttons3:nth-last-of-type(5) {
  transition-delay: 80ms;
}
.buttons3:nth-last-of-type(6) {
  transition-delay: 100ms;
}
.buttons3:nth-last-of-type(1) {
  width: 30px;
  height: 30px;
  opacity: 1;
}
.buttons3:nth-last-of-type(2) {
  background: #D2A518 url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_invite_wht_24dp_r1.png") center no-repeat;
}
.buttons3:nth-last-of-type(3) {
  background: #3C80F6 url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_reminders_speeddial_white_24dp.png") center no-repeat;
}
.buttons3:nth-last-of-type(4) {
  background-image: url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/avatars/avatar_tile_j_80.png");
  background-size: contain;
}
.buttons3:nth-last-of-type(5) {
  background-image: url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/avatars/avatar_tile_x_80.png");
  background-size: contain;
}
.buttons3:nth-last-of-type(6) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/343394/profile/profile-80_3.jpg");
  background-size: contain;
}
.buttons3:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
.container_interno {
  position: relative;
  float:right;
  margin-right: 10px;
  margin-top: -20px;
}
.container_interno:hover .buttons4:not(:last-of-type) {
  width: 30px;
  height: 30px;
  margin: 15px auto 0;
  opacity: 1;
}
.container_interno:hover .rotate {
  background-image: url("../images/Compose.svg");
  transform: rotate(0deg);
}
.buttons4 {
  display: block;
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
  text-decoration: none;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: .2s;
}
.buttons4:nth-last-of-type(2) {
  transition-delay: 20ms;
}
.buttons4:nth-last-of-type(3) {
  transition-delay: 40ms;
}
.buttons4:nth-last-of-type(4) {
  transition-delay: 60ms;
}
.buttons4:nth-last-of-type(5) {
  transition-delay: 80ms;
}
.buttons4:nth-last-of-type(6) {
  transition-delay: 100ms;
}
.buttons4:nth-last-of-type(1) {
  width: 30px;
  height: 30px;
  opacity: 1;
}
.buttons4:nth-last-of-type(2) {
  background: #D2A518 url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_invite_wht_24dp_r1.png") center no-repeat;
}
.buttons4:nth-last-of-type(3) {
  background: #3C80F6 url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_reminders_speeddial_white_24dp.png") center no-repeat;
}
.buttons4:nth-last-of-type(4) {
  background-image: url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/avatars/avatar_tile_j_80.png");
  background-size: contain;
}
.buttons4:nth-last-of-type(5) {
  background-image: url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/avatars/avatar_tile_x_80.png");
  background-size: contain;
}
.buttons4:nth-last-of-type(6) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/343394/profile/profile-80_3.jpg");
  background-size: contain;
}
.buttons4:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
[tooltip]:before {
  content: attr(tooltip);
  background: #585858;
  padding: 5px 7px;
  margin-right: 10px;
  border-radius: 2px;
  color: #FFF;
  font: 500 12px Roboto;
  white-space: nowrap;
  position: absolute;
  bottom: 20%;
  right: 100%;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
[tooltip]:hover:before {
  visibility: visible;
  opacity: 1;
}