@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
.containerMembership__Card{
    margin: 32px auto;
}
.membershipCard{
    display: flex;
    max-width: 1440px;
    margin: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 31px;
}
.titleMemberships{
    color:#505660;
    width: 1440px;
    text-align: center;
    font-family: Roboto;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 31.2px;
    margin: 31px 0px;
}
.formsMembership__Card{
    display: flex;
    align-items: start;
    gap: 24px;
    align-self: stretch;
    padding: 32px;
    margin: 31px auto;
    border-radius: 8px;
    border: 1px solid  #D1D3D8;
    background: #FFF;
	  
}

.attachment {
	border: 1px solid var(--blue-color--100);
	border-radius: 15px;
	margin-bottom: 38px;
	margin-left: auto;
	margin-right: auto;	
	padding-left: 60px !important;
	padding-right: 60px !important;
}


.attachment .attachment__header{
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.attachment .attachment__body{
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
	padding-bottom: 20px;
}

.attachment .attachment__header > div {
    padding: 30px 24px;
    color: var(--blue-color--100);
    font-size: var(--b-size-16);
    line-height: var(--height-b-size-16);
    font-family: var(--font-family-project);
    font-weight: var(--font-weight-l);
}

.attachment .attachment__header > div:nth-child(3) {
	text-align: center;
}


.attachment .attachment__body > div{
    border: 0px;
    border-bottom: solid 1px #054478;
    color: var(--gray-color-500);
    font-size: var(--b-size-14);
    line-height: var(--height-b-size-14);
    font-family: var(--font-family-project);
    font-weight: var(--font-weight-s);
    padding: 18px 24px;
}


@media (max-width: 767px) {
    .attachment {
       padding-left: 20px !important;
       padding-right: 20px !important;
    }
    .attachment .attachment__header > div:nth-child(2) {
	   display: none;
    }
    .attachment .attachment__body > div:nth-child(2) {
        display: none;
    }
}
	
.formsMembership__Card .capsuleSelect .form-group{
	width: 280px;
}

 @media (min-width: 768px) {
	  .formsMembership__Card .capsuleSelect .form-group{
		width: 100%;
	  }
}

.formsMembership__Card .capsuleDni .form-group{
	width: 280px;
}

 @media (min-width: 768px) {
	  .formsMembership__Card .capsuleDni .form-group{
		width: 100%;
	  }
}

.formsMembership__Card .capsuleDate .form-group{
	width: 280px;
}

 @media (max-width: 767px) {
	  .formsMembership__Card .capsuleDate{
		margin-top: -4px;
	  }
}

 @media (min-width: 768px) {
	  .formsMembership__Card .capsuleDate .form-group{
		width: 100%;
	  }
}
	
.capsuleSelect, .capsuleDni, .capsuleDate{
    display: flex;
    height: 46px;
  width: 280px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}
 @media (min-width: 768px) {
	  .capsuleSelect, .capsuleDni, .capsuleDate{
	      max-width: 316px;
			  width: 100%;
			  height: 46px;
	  }
}

@media (min-width: 1440px) {
	  .capsuleSelect, .capsuleDni, .capsuleDate{
	      width: 100%;
			  max-width: 258px;
			  height: 71px;
	  }
}



	
.labelType, .labelDoc, .labelNumDoc, .labelDate{
    color:#505660;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16.8px;
}
.capsuleType__Doc{
    display: flex;
    height: 71px;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

	@media (min-width: 1440px) {
		.capsuleType__Doc {
		   max-width: 338px;
			 width: 100%;
		}
	}
	
.tipoDocumento {
  color: var(--Greyscale--100, #6B7280);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.selectDni{
    display: flex;
    height: 46px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #E9EAEC;
    background: #FFF;
}
.capsuleDni input{
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 22px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #E9EAEC;
    background:  #FFF;
    color: var(--Greyscale--100, #6B7280);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}
.capsuleDate input{
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 22px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #E9EAEC;
    background: #FFF;
}
.capsuleType__Doc div{
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.capsuleType__Doc input{
    margin: 0px;
}
.labelText{
    color:#505660;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.8px;
    margin: 0px;
}
.containerButtons{
    display: flex;
    width: 402px;
    justify-content: center;
    margin: auto;
    align-items: center;
    gap: 24px;
}
.buttonClear{
    display: flex;
    height: 48px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0; 
    border-radius: 8px;
    border: 1px solid #FEC82F;
    background: #FFF;
    color: var(--Greyscale-500, #25282D);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 16.8px */
}
.buttonDownload{
    display: flex;
    height: 48px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0; 
    border-radius: 8px;
    border: 1px solid #FEC82F;
    background: #FEC82F;
    color: var(--Greyscale-500, #25282D);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 16.8px */
}
.input-icon {
    position: relative;
    display: inline-flex;
    width: 100%;
}

.input-icon input {
    height: 40px;
    padding: 8px 16px;
    padding-left: 50px; 
    padding-right: 30px; 
    width: 100%;
    font-size: 16px;
    font-style: normal;
    font-family: Roboto;
    font-weight: 400;
    line-height: 120%
}

.icon-left, .icon-right {
    position: absolute;
    top: 21px;
    transform: translateY(-50%);
}

.icon-left, .icon-right {
	z-index: 10;
}

.icon-left {
  left: 0px;
}
i.icon-right,
i.icon-left{
    padding: 16px;
}
.icon-right {
  right: -5px;
}
.capsuleCaptcha{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 1rem;
}

.capsuleCaptcha .taglib-captcha img {
  min-width: 200px;
}

.capsuleCaptcha .taglib-captcha a {
  margin: 0 5px;
}


@media screen and (min-width: 1025px) and (max-width: 1439px) {
    .membershipCard{
        max-width: 1024px;
        margin: auto;
    }
    .titleMemberships{
        width: 1024px;
    }
    .formsMembership__Card{
        padding: 24px;
			  
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .membershipCard{
        max-width: 768px;
        margin: auto;
    }
    .titleMemberships{
        width: 100%;
			  max-width: 704px;
    }
    .formsMembership__Card{
        max-width: 704px;
        display: flex;
        align-items: center;
        align-content: center;
        gap: 24px;
        flex: 1 0 0;
        flex-wrap: wrap;
        padding: 24px;
    }
    .capsuleSelect input, .capsuleDni input, .capsuleDate input{
        width: 316px;
    }
}

	@media (min-width: 1440px) {
		   .titleMemberships{
		       width: 100%;
					 max-width: 1248px;
		   }
	}
	
@media screen and (min-width: 320px) and (max-width: 767px) {
    .buttonDownload {
        order: 1;
    }
    .buttonClear {
        order: 2;
    }
    .membershipCard{
        max-width: 328px;
        margin: auto;
    }
    .titleMemberships{
        width: 233px;
        margin: 32px auto;
        font-size: 16px;
    }
    .formsMembership__Card{
        max-width: 328px;
        display: flex;
        align-items: center;
        align-content: center;
        gap: 24px;
        flex: 1 0 0;
        flex-wrap: wrap;
        padding: 24px;
        margin: 32px auto;
    }
    .capsuleDate, .capsuleDni, xcapsuleSelect{
        margin: 24px auto;
    }
    .capsuleSelect input, .capsuleDni input, .capsuleDate input{
        width: 100%;
    }
    .containerButtons{
        width: 316px;
    }
    .groupRadios{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .containerButtons{
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 316px;
        gap: 24px;
        margin: 0;
    }
    .buttonClear, .buttonDownload{
        width: 100%;
        padding: 8px 12px;
    }
    .capsuleCaptcha .g-recaptcha{
    	margin-left: 25px;
    }

}