.box-forms{
    box-sizing: border-box;
    width: 100%;
    height: 569px;
    border: 1px solid #D6D6DC;
    border-radius: 15px;
    background-color: #ffffff;
}
.box-forms-register {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    border: 1px solid #D6D6DC;
    border-radius: 15px;
    background-color: #ffffff;
}


.title-form{
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 700;
    font-size: 27px;
    line-height: 38px;
    /* identical to box height, or 125% */
    display: flex;
    align-items: center;
    letter-spacing: 0.1px;
    /* Secondary/100 */
    color: #33334F;
    margin-bottom: 24px;;
}

.label {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: 0.2px;
    color: #F35B51;
    /* margin-bottom: 6px; */
}

.input {
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    padding-left: 20px;
    background: #FFFFFF;
    border: 2px solid #F35B51;
    box-shadow: 0px 5px 40px rgb(18 21 26 / 5%);
    border-radius: 7px;
    margin-bottom: 10px;
}


.text-form {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.3px;
    color: #8786AD;
}

.box-header {
    width: 100%;
    height: 49px;
    padding-top: 9px;
    padding-left: 10px;
    background: #F35B51;
    border-radius: 10px 10px 0px 0px;
}

.text-perfil{
    /* H4 */
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 32px;
    /* identical to box height, or 123% */
    letter-spacing: 0.2px;
    color: #FFFFFF;
}

.box-items{
    /* Category 3 */


    /* Auto layout */

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 30px;
    gap: 15px;

    width: 100%;
    height: 62px;

    border: 1px solid #EBEBEB;
    /* Inside auto layout */

    flex: none;
    order: 2;
    flex-grow: 0;
}

.text-item{

    width: 215px;
    height: 22px;

    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    /* identical to box height, or 138% */

    display: flex;
    align-items: center;
    letter-spacing: 0.3px;

    /* Other/Dark */
    cursor: pointer;
    color: #12151A;


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}


/* skin 3 */
.skin-3 .num-in span {
	display: block;
	float: left;
	width: 25px;
	height: 34px;
	position: relative;
	cursor: pointer;
}

.skin-3 .num-in span.minus:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	margin-left: -5px;
	margin-top: -1px;
	background-color: #000;
}

.skin-3 .num-in .in-num {
	float: left;
	width: 54px;
	height: 34px;
	border: 1px solid #CCCCCC;
	border-radius: 3px;
	text-align: center;
	font-size: 14px;
}

.skin-3 .num-in span.plus:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	margin-left: -5px;
	margin-top: -1px;
	background-color: #000;
}

.skin-3 .num-in span.plus:after {
	content: '';
	position: absolute;
	height: 10px;
	width: 2px;
	left: 50%;
	top: 50%;
	margin-top: -5px;
	margin-left: -1px;
	background-color: #000;
}

/* / skin 3 */



.table-header-cart{
    background: #EBEBEB;
    border-radius: 10px 10px 0px 0px;
}
.table-body-cart{

    box-sizing: border-box;

    background: #FFFFFF;
    /* Devider/Devider */

    border: 1px solid #EBEBEB;
    border-radius: 0px;
}



.label-facturacion{


    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    /* identical to box height, or 114% */

    display: flex;
    align-items: center;
    letter-spacing: 0.2px;

    /* Secondary/100 */

    color: #33334F;
}
.input-facturacion{
/* Input */


box-sizing: border-box;

    /* Auto layout */

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 17px 20px;
    gap: 10px;

    width: 100% !important;

    background: #FFFFFF;
    /* Secondary/70 */

    border: 2px solid #D6D6DC;
    border-radius: 7px;
}
@media only screen and (max-width: 600px) {
    .text-form{
        text-align: justify;
    }

    .box-forms{
        height: auto;
    }
}


.acceder-checkout{
    color: #F35B51;
    cursor: pointer;
    font-family: 'Libre Franklin';
    font-style: normal;

}



  .creditCardForm {
    max-width: 700px;
    background-color: #fff;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}

.creditCardForm label {
    width: 100%;
}

.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}

.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    position: relative;
}

.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}

.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}

.creditCardForm .owner {
    width: 100%;
    margin-right: 10px;
}

.creditCardForm .CVV {
    width: 35%;
}

.creditCardForm #card-number-field {
    width: 100%;
}

.creditCardForm #expiration-date {
    width: 49%;
}

.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}

.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}

.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}

.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}

.transparent {
    opacity: 0.2;
}

@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}



.spinner.loading {

    position: relative;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
}

  .spinner.loading:before {
    content: "";
    height: 30px;
    width: 30px;
    margin: -15px auto auto -15px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-width: 8px;
    border-style: solid;
    border-color: #2180c0 #ccc #ccc;
    border-radius: 100%;
    animation: rotation .7s infinite linear;
  }

  @keyframes rotation {
    from {
      transform: rotate(0deg);
    } to {
      transform: rotate(359deg);
    }
  }