.userInfoContainer {
    padding: 10px 40px 0
}

.boldText {
    font-weight: 700
}

td,
th {
    text-align: center
}

.buy-button {
    padding: 6px 45px;
    border-radius: 0;
    border-color: transparent;
    font-size: 14px
}

.buy-button:hover {
    border-color: #e8e8e8 !important
}

.btn.focus,
.btn:focus {
    box-shadow: transparent !important
}

.logOutButton {
    padding: .2rem .9rem;
    border-radius: 0;
    border-color: transparent;
    background-color: #ab18a6;
    font-size: 14px
}

.buy-button:hover,
.logOutButton:hover {
    border-color: #e8e8e8 !important;
    background-color: #ab18a6 !important
}

.logOutButtonContainer {
    padding: .5rem 0
}

@media (min-width:992px) {
    .logOutButtonContainer {
        padding: 0 .5rem !important;
        margin: auto 0
    }
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0 !important
}

.btn-primary.focus,
.btn-primary:focus {
    color: #fff;
    background-color: #ab18a6;
    border-color: transparent;
    box-shadow: 0 0 0 0
}

.sectionTitleContainer {
    text-align: center;
    padding-top: 60px
}

.sectionTitle {
    color: #aa16a3;
    font-size: 32px
}

.fieldTitle {
    color: #3a2470;
    font-size: 18px
}

.containerMarginBottom {
    margin-bottom: 60px
}

.containerPaddingBottom {
    padding-bottom: 60px
}

.flexClass {
    display: flex
}

.centerVertically {
    align-items: center
}

.centerHorizontally {
    justify-content: center
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #ab17a8;
    border-top: 2px solid #ab17a8;
    color: #3e2776;
    background-color: #fcf3f8;
    font-family: openBold;
    font-size: 14px
}

.table td,
.table th {
    padding: .45rem;
    vertical-align: top;
    border-top: 0 solid transparent;
    border-bottom: 2px solid #ab17a8
}

.table td {
    font-family: openBold;
    font-size: 14px
}

.rowTitle {
    color: #371f6e;
    text-align: start;
    text-transform: uppercase
}

.disabledCellBackground {
    background-color: #ebebeb
}

.adminTable {
    text-align: start;
    border-bottom-width: 0;
    border-top-width: 0;
    border-bottom-style: solid;
    border-top-style: solid;
    border-left: 2.5px solid transparent;
    border-right: 2.5px solid transparent
}

.adminTable td {
    font-family: openSemiBold;
    text-align: start
}

.adminTable td,
.adminTable thead th {
    border-width: 2px 1px;
    border-style: solid
}

.userBorderColor td,
.userBorderColor thead th {
    border-color: #b013ab
}

.userTitleColor {
    color: #b013ab !important
}

.purchaseBorderColor td,
.purchaseBorderColor thead th {
    border-color: #3898ea
}

.purchaseTitleColor {
    color: #3898ea !important
}

.validationBorderColor td,
.validationBorderColor thead th {
    border-color: #59297b
}

.validationTitleColor {
    color: #59297b !important
}

.regionBorderColor td,
.regionBorderColor thead th {
    border-color: #ab15ab
}

.regionTitleColor {
    color: #ab15ab !important
}

.saleBoxContainer {
    height: -webkit-min-content;
    height: min-content;
    width: 290px;
    margin: 10px auto 20px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 15px
}

.saleBoxContainerBg {
    background-color: #f3f5f4
}

.saleBoxContainerSelectedBg {
    background-color: #e3dde9
}

.saleTitle {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-bottom: 6px
}

.blackBackground {
    background-color: #000000
}

.lilacBackground {
    background-color: #ab17a5
}

.violetBackground {
    background-color: #602b91
}

.lightBlueBackground {
    background-color: #359ae9
}

.lilacColor {
    color: #ab17a5
}

.violetColor {
    color: #602b91
}

.lightBlueColor {
    color: #359ae9
}

.leftImage {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px
}

.saleBoxContainer>p {
    text-align: center
}

.contactButton {
    height: 38px;
    width: 220px;
    border-radius: 0;
    font-size: 13px;
    background-color: #c159bc !important;
    border: 0;
    margin-bottom: 1rem;
    cursor: pointer
}

.downloadText {
    color: #3a2470
}

.downloadBoxContainer {
    border: 1.5px solid #632b91;
    padding: 25px;
    margin: 0 auto 40px;
    width: 315px;
    height: 250px
}

.downloadIconContainer {
    margin: 0 auto 12px;
    width: -webkit-max-content;
    width: max-content
}

.horizontallyCentered {
    text-align: center
}

.downloadButtonPosition {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    margin: auto
}

.globalDataStyle>p {
    color: #3b2370;
    font-size: 18px
}

.globalDataStyle>p span {
    color: #4595d0;
    font-size: 28px
}

#userTutorials {
    background-color: #f3f3f3;
    padding-bottom: 60px
}

.regionTitle {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 15px auto 25px
}

.regionBoxContainer {
    height: 236px;
    width: 290px;
    margin: 25px auto 30px;
    background-color: #fff;
    font-size: 14px
}

.regionBoxContainer div p {
    color: #494949;
    margin-bottom: 10px !important
}

.regionBoxContainer p span {
    font-size: 16px
}

.regionContainer {
    background-image: url(/static/assets/world_background1.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1px 0;
    background-color: #f7f7f7
}

.quantityContainer {
    margin-bottom: 20px;
    font-size: 14px;
    display: flex
}

.quantityLabel {
    background-color: #602b91;
    height: 100%;
    padding: 0 10px;
    border-radius: 0;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer
}

#quantityInput {
    width: 75px;
    background-color: #fff
}

#quantityInput,
#quantityInput:focus {
    border: 2px solid #602b91;
    padding-left: 8px
}

#quantityInput:focus {
    outline: none
}

.paymentMethod {
    margin: 15px auto 0;
    display: flex;
    justify-content: center
}

input[id=quantityInput]::-webkit-inner-spin-button,
input[id=quantityInput]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.container_payment {
    display: block
}

.payment-form {
    padding: 10px 0 60px;
    margin-bottom: 70px;
    font-family: openRegular
}

.payment-form.dark {
    background-color: #f3f3f3
}

.payment-form .content {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .075);
    background-color: #fff
}

.payment-form .block-heading {
    padding-top: 40px;
    margin-bottom: 30px;
    text-align: center
}

.payment-form .block-heading p {
    text-align: center;
    max-width: 420px;
    margin: auto;
    color: rgba(0, 0, 0, .45)
}

.payment-form .block-heading h1,
.payment-form .block-heading h2,
.payment-form .block-heading h3 {
    margin-bottom: 1.2rem;
    color: #009ee3
}

.payment-form .form-payment {
    border-top: 2px solid #c6e9fa;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .075);
    background-color: #fff;
    padding: 0;
    max-width: 600px;
    margin: auto
}

.payment-form .title {
    font-size: 1em;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    margin-bottom: .8em;
    font-weight: 400;
    padding-bottom: 8px
}

.payment-form .products {
    background-color: #f7fbff;
    padding: 25px
}

.payment-form .products .item {
    margin-bottom: 1em
}

.payment-form .products .item-name {
    font-weight: 500;
    font-size: .9em
}

.payment-form .products .item p {
    margin-bottom: .2em
}

.payment-form .products .price {
    float: right;
    font-weight: 500;
    font-size: .9em
}

.payment-form .products .total {
    border-top: 1px solid rgba(0, 0, 0, .1);
    margin-top: 10px;
    padding-top: 19px;
    font-weight: 500;
    line-height: 1
}

.payment-form .payment-details {
    padding: 25px 25px 15px;
    height: 100%
}

.payment-form .payment-details label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #8c8c8c;
    text-transform: uppercase
}

.payment-form button {
    margin-top: .6em;
    padding: 12px 0;
    font-weight: 500;
    background-color: #009ee3;
    margin-bottom: 10px
}

.payment-form .mercadopago-button {
    width: 100%;
    padding: 8px 0
}

.payment-form a,
.payment-form a:not([href]) {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #009ee3;
    cursor: pointer
}

.payment-form a:not([href]):hover {
    color: #3483fa;
    cursor: pointer
}

@media (min-width:576px) {
    .payment-form .title {
        font-size: 1.2em
    }

    .payment-form .products {
        padding: 40px
    }

    .payment-form .products .item-name,
    .payment-form .products .price {
        font-size: 1em
    }

    .payment-form .payment-details {
        padding: 20px 40px
    }

    .payment-form .payment-details button {
        margin-top: 1em;
        margin-bottom: 15px
    }
}

.productSelect {
    width: 220px;
    border-radius: 0 !important;
    color: #878787;
    border: 1.5px solid #a919a2;
    background-clip: unset
}

.productSelect:focus {
    box-shadow: 0 0 8px 1px #a919a2 !important
}

.custom-select {
    background: #fff url(/static/media/flecha_dropdown.8e5317a2.webp) no-repeat right .75rem center/10px 6px !important
}

.wrap {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    box-sizing: border-box
}

.wrap * {
    box-sizing: inherit
}

@media (max-width:992px) {
    .wrap {
        max-width: 500px
    }

    #userTutorials {
        padding-bottom: 90px
    }
}

.swiper-button-next {
    background-image: url(/static/media/right_arrow.e19079d3.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: inherit;
    background-color: #e6e6e6
}

.swiper-button-next:after {
    display: none
}

.swiper-button-prev {
    background-image: url(/static/media/left_arrow.722c2c73.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: inherit;
    background-color: #e6e6e6
}

.swiper-button-prev:after {
    display: none
}

.swiper-pagination-bullet-active {
    background: #3b2372 !important
}

.swiper-container {
    width: 100%;
    position: relative
}

.swiper-wrapper {
    width: 100%
}

.swiper-slide {
    width: 100%;
    background-color: transparent;
    padding-bottom: 40px;
    padding-top: 40px
}

.swiper-slide .video-container {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%
}

.swiper-slide .video-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.contactComponent {
    background-color: #f3f3f3
}

.contactUsLabelColor {
    color: #362073
}

.contactUsInput {
    border: 1px solid #c159bc;
    border-radius: 0
}

.contactUsInput:focus {
    border-color: #c159bc;
    box-shadow: 0 0 8px 1px #c159bc
}

.cancelContactUs,
.cancelContactUs:focus {
    margin-left: 15px;
    padding: 6px 45px;
    border-radius: 0;
    border: 1px solid #c159bc;
    font-size: 14px;
    color: #c159bc;
    background-color: transparent
}

.cancelContactUs:active {
    color: #fff !important;
    background-color: #362073 !important;
    border-color: #362073 !important
}

.cancelContactUs:hover {
    color: #362073 !important;
    background-color: transparent !important;
    border-color: #362073 !important
}

.contactGraButContainer {
    text-align: left;
    float: left
}

.searchPaginationContainer {
    margin: 20px 0
}

.graySearchContainer {
    background-color: #f0f0f0;
    padding: 4px
}

.whiteSearchContainer {
    background-color: #fff;
    padding: 4px 0
}

.whiteSearchContainer .form-group {
    margin-bottom: 0
}

#listFilter,
#listSearcher {
    border-width: 0;
    color: #000
}

#listFilter:focus,
#listSearcher:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 0 rgb(255 255 255/0)
}

.filterSelect {
    width: 200px;
    border-radius: 0 !important;
    color: #878787;
    border: 1.5px solid #a919a2;
    background-clip: unset
}

.searchStyle {
    margin: auto 10px
}

.paginationButton {
    font-size: 14px;
    color: #ae15a5;
    margin-bottom: 1px
}

.pageNumberInput {
    text-align: center;
    padding: 0 5px;
    width: 35px;
    float: left;
    height: -webkit-max-content;
    height: max-content;
    font-size: 14px;
    margin-right: 5px
}

.pageNumberInput:focus-visible {
    outline-offset: 0 !important;
    outline: none !important
}

.clearSearchStyle {
    margin: 4px 10px 0
}

.pointerClass {
    cursor: pointer
}

.clickableButton {
    cursor: pointer;
    pointer-events: auto
}

.unclickableButton {
    cursor: default;
    pointer-events: none
}

.noArrow::-webkit-inner-spin-button,
.noArrow::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.noArrow {
    -moz-appearance: textfield
}

.regionSelect {
    border-radius: 0 !important;
    color: #212529;
    border: none;
    background-clip: unset;
    font-size: 14px
}

.regionSelect:focus {
    box-shadow: 0 0 0 0 transparent !important
}

.regionSelect {
    background: transparent url(/static/media/flecha_dropdown.8e5317a2.webp) no-repeat right .75rem center/10px 6px !important
}

.countryContainer {
    margin-bottom: 60px;
    max-height: 400px;
    background-color: #f5f6fa
}

.form-check-inline {
    margin-right: 35px !important
}

.inputInCell {
    width: 100%;
    padding: .45rem;
    border: 0
}

.inputInCell:hover {
    outline: 0
}

.inputInCell:focus-visible,
.inputInCell:hover {
    border-color: #86b7fe;
    box-shadow: inset 0 0 4px 3px #86b7fe
}

.inputInCell:focus-visible {
    outline: 0 auto transparent;
    outline: 0
}

@font-face {
    font-family: openRegular;
    src: url(/static/media/OpenSans-Regular.1b0809d5.ttf);
    font-display: swap
}

@font-face {
    font-family: openLight;
    src: url(/static/media/OpenSans-Light.ed41bedf.ttf);
    font-display: swap
}

@font-face {
    font-family: openItalic;
    src: url(/static/media/OpenSans-Italic.95855802.ttf);
    font-display: swap
}

@font-face {
    font-family: openSemiBold;
    src: url(/static/media/OpenSans-SemiBold.a16d8201.ttf);
    font-display: swap
}

@font-face {
    font-family: openBold;
    src: url(/static/media/OpenSans-Bold.dbb97fd9.ttf);
    font-display: swap
}

.regularFont {
    font-family: openRegular
}

.lightFont {
    font-family: openLight
}

.italicFont {
    font-family: openItalic
}

.semiBoldFont {
    font-family: openSemiBold
}

.boldFont {
    font-family: openBold
}

.blackFont {
    color: #212529
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    height: 100%
}

body {
    position: relative;
    padding-bottom: 250px;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media (max-width:768px) {
    body {
        padding-bottom: 428px
    }
}

.main-footer {
    color: hsla(0, 0%, 100%, .5019607843137255);
    padding: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

address {
    font-size: 12px
}

.contactInfoMargin {
    margin-bottom: 0
}

.contactInfoFooter {
    color: #fff;
    font-size: 14px
}

.footerTitle {
    color: #d57eb2;
    font-size: 14px
}

.container-padding {
    padding-top: 60px
}

.userContent {
    position: relative;
    top: 89.74px
}

.adminContent {
    position: relative;
    top: 117px
}

.navbar {
    padding: 0 2rem !important;
    align-items: center
}

.bg-dark {
    background-color: #e8e8e8 !important
}

.headerLink:focus,
.navbar-dark .navbar-nav .headerLink {
    color: #aa3895;
    font-size: 14px;
    font-family: openSemiBold;
    padding: 1rem 0;
    margin: 0 .5rem;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent
}

.headerLink:hover {
    color: #3b2370 !important;
    cursor: pointer;
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important
}

.navbar-dark .navbar-toggler {
    outline: transparent !important;
    border-color: transparent !important
}

@media (min-width:992px) {
    .headerLink:hover {
        color: #3b2370 !important;
        cursor: pointer;
        border-top: 5px solid transparent !important;
        border-bottom: 5px solid #3b2370 !important
    }

    .headerLink:focus {
        color: #aa3895 !important
    }

    .navbar {
        align-items: flex-end
    }
}

.navbar-dark .navbar-toggler-icon {
    background-image: url(/static/media/menu_icon.3870fd35.webp) !important;
    background-size: 32px 24px
}

.adminDataHeader {
    background-color: #b1a8c7;
    color: #fff;
    padding: .1rem 2rem;
    font-size: 14px;
    display: flex;
    justify-content: space-between
}

.linksPosition {
    margin-right: 0 !important;
    margin-left: auto
}

.disabledNavbar {
    pointer-events: none;
    cursor: default
}

.disableColorClass {
    color: #929292 !important
}

.disableBackgroundClass {
    background-color: #929292 !important
}

.violet-gradient {
    background-color: #85308b;
    background-image: linear-gradient(90deg, #85308b, #4d2472)
}

#dropdown-button {
    font-size: 13px;
    background-Color: #d5c9d5;
    padding: 3px 10px;
    height: -webkit-max-content;
    height: max-content;
    position: absolute;
    top: 0;
    right: 47px;
    color: #3a2470;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border: none;
    border-radius: 0
}

.dropdown {
    position: unset
}

.dropdown-menu {
    top: 0;
    right: 224px;
    left: unset;
    font-size: 13px;
    background-color: #d7d5d6;
    border-radius: 0;
    border: none;
    padding: .15rem 0;
    animation: 2s ease-in;
    animation-delay: 1000ms;
}

.dropdown-item {
    color: #787677;
    display: inline;
    display: initial;
    padding: .25rem 1rem
}

.dropdown-toggle:after {
    display: none
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
    color: #3a2470;
    text-decoration: underline;
    background-color: transparent;
    background-color: initial
}

@media (max-width:992px) {
    #dropdown-button {
        position: static
    }

    .dropdown-menu.show {
        margin-top: 2px !important
    }
}

.inline {
    display: inline;
}

.link-button {
    background: none;
    border: none;
    color: #787677;
    cursor: pointer;
    font-family: openSemiBold;
    padding: .25rem 1rem;
}

.link-button-selected {
    color: #3a2470;
}

.link-button:focus {
    outline: none;
}

.link-button:active {
    color: red;
}

.alert {
    padding: 20px;
    /* Red */
    /* color: white; */
    margin-bottom: 15px;
}

/* The close button */
.closebtn {
    margin-left: 15px;
    /* color: white; */
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color: black;
}