html,body{
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    position: relative;
    background-color: #24193B;
}

h1{
    font-size: 23px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 300;
    margin-bottom: 45px;
}

p{
    font-size: 14px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    line-height: 26px;
    margin-bottom: 30px;
}

.help-border{
    border: 1px solid red;
}

#payment-header{
    padding-top: 75px;
    padding-bottom: 45px;
}


.braintree-heading {
    position: relative !important;
    margin-bottom: 20px !important;
    margin-top: 40px !important;
}

.braintree-placeholder{
    margin-bottom: -80px !important;
}

.flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.steps-box{
    max-width: 414px;
    margin: 45px auto;
    position: relative;
}

.step-item{
    font-size: 12px;
    color: #5B5764;
    letter-spacing: 0;
    text-align: center;
    font-weight: bold;
    position: relative;
    width: 138px;
}

.step-item.active{
    font-size: 12px;
    color: #F5046B;
    letter-spacing: 0;
    text-align: center;
}

.step-item.active .step-bullet{
    background-color: #F5046B;

}

.step-bullet{
    width: 7px;
    height: 7px;
    -webkit-border-radius: 3.5px;
    -moz-border-radius: 3.5px;
    border-radius: 3.5px;
    background-color: #5B5764;
    position: absolute;
    left: calc(50% - 5px);
    top: 40px;
    text-align: center;
}

.step-bullet svg{
    display: none;
}

.step-item.done .step-bullet{
    background-color: transparent;
}

.step-item.done .step-bullet svg{
    display: block;
}

.steps-line{
    height: 1px;
    background-color: #5B5764;
    width: calc(100% - 138px);
    position: absolute;
    left: calc(138px/2);
    top: 43px;
}

#payment-content{
    padding-bottom: 75px;
}

.payment-container {
    max-width: 650px;
    width: 100%;
    background-color: #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 75px 10px;
    margin: 0 auto;
}

.payment-container.game-download{
    max-width: 802px;
}

.sub-title{
    font-size: 16px;
    color: #623A76;
    letter-spacing: 0;
    text-align: center;
    font-weight: bold;
}

.sub-text {
    font-size: 13px;
    color: #242424;
    letter-spacing: 0;
    text-align: center;
    line-height: 19px;
    width: 244px;
    margin: 45px auto;
}

label{
    font-size: 13px;
    color: #7368B8;
    letter-spacing: 0;
    text-align: center;
}

input.model-1{
    background: #F4F4F4;
    border: 2px solid #E4E4E4;
    border-radius: 6px;
    min-width: 200px;
    height: 44px;
    text-align: center;
    transition: all .3s ease-in-out;
}

input.model-1.redeem{
    width: 244px;
}

input.model-1.redeem.invalid{
    border: 2px solid #F5046B;
    transition: all .3s ease-in-out;

}

input.model-1::placeholder{
    color: rgba(128, 128, 128, 0.46);
    opacity: 1;
}

input.model-1:focus {
    box-shadow: none;
    outline: 0 none;
    border: 2px solid #7368B8;
    transition: all .3s ease-in-out;

}

button.model-4, button.model-5{
    font-size: 15px;
    color: #CFCFCF;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 700;
    background-color: transparent;
    border: none;
    margin-top: 75px;
    transition: all .3s ease-in-out;
}

button.model-4.active{
    color: #7368B8;
    transition: all .3s ease-in-out;
}

button.model-4:hover{
    opacity: 0.8;
}

.payment-security-icons {
    margin-top: 40px;
}

.payment-security-icons img{
    margin: 0 10px;
}

.already-registered-box {
    background: #D6F8F3;
    border: 0px solid #92EBDD;
    border-radius: 6px;
    font-size: 16px;
    color: #623A76;
    letter-spacing: 0;
    text-align: center;
    line-height: 32px;
    width: 437px;
    max-width: 100%;
    height: 0;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.already-registered-box.active{
    transition: all .3s ease-in-out;
    height: 206px;
    padding: 20px;
    margin: 20px auto;
    border: 1px solid #92EBDD;
}

button.model-2 {
    background: #7368B8;
    border-radius: 80px;
    font-size: 11.2px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 13.6px;
    width: 183px;
    height: 29px;
    border: none;
    margin: 20px;
}

.hover-opacity:hover{
    opacity: 0.7;
    transition: all .2s ease-in-out;
}

.hover-opacity{
    opacity: 1;
    transition: all .2s ease-in-out;
}

button.model-2.redeem{
    width: 244px;
    height: 51px;
    border-radius: 100px;
    font-size: 14px;
    letter-spacing: 0;
    text-align: center;
    line-height: 17px;
    transition: all .3s ease-in-out;
    margin: 20px auto;

}

button.model-2.finish{
    /* Rectangle 3 Copy 2: */
    background: #7368B8;
    border-radius: 100px;
    width: 194px;
    height: 51px;
    font-size: 14px;
    font-weight: 300;
    margin-top: 40px;
}

button.model-2.redeem:disabled{
    color: #505050;
    background: #CFCFCF;
    opacity: 0.4;
    transition: all .3s ease-in-out;
}

.model-3 {
    font-size: 11.2px;
    color: #7368B8;
    letter-spacing: 0;
    text-align: center;
    line-height: 13.6px;
    background-color: transparent;
    border: none;
    font-weight: 700;
    display: block;
    margin: 0 auto;
}

.order-resume-title {
    font-size: 11px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    width: 442px;
    max-width: 100%;
    border-bottom: 2px solid rgba(151, 151, 151, 0.31);
    margin: 0 auto 20px auto;
    padding: 15px;
}

.order-item {
    /* Purchased Item: */
    font-size: 11px;
    color: #696969;
    letter-spacing: 0;
    line-height: 43px;
    width: 442px;
    height: 43px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(151, 151, 151, 0.31);
    max-width: 100%;

}

.order-item-value{
    width: 40px;
}

.dollar-sign{
    width: 40px;
}

.total-row {
    font-size: 11px;
    color: #7368B8;
    letter-spacing: 0;
    line-height: 43px;
    width: 442px;
    height: 43px;
    margin: 0 auto;
    font-weight: bold;
    max-width: 100%;

}

.payment-method-title {
    /* Choose payment metho: */
    font-size: 14px;
    color: #24193B;
    letter-spacing: 0;
    margin: 40px auto 20px ;
    width: 442px;
    max-width: 100%;
    text-align: left;
}

.payment-method-box {
    background: #fafafa;
    border: 1px solid #DADADA;
    border-radius: 6px;
    width: 442px;
    max-width: 100%;
    margin: 0 auto;
}

.payment-method-item {
    height: 57px;
    justify-content: flex-start;
    padding-left: 5px;
    border-bottom: 1px solid #DADADA;
    cursor: pointer;
}

.payment-method-item.selected, .payment-method-item:hover{
    background-color: #e9e9e9;
}

.payment-method-item:last-of-type{
    border-bottom: none;
}

.payment-icon {
    width: 53px;
    margin-right: 20px;
}

.payment-session-warn {
    /* For security reasons: */
    font-size: 11px;
    color: #7368B8;
    letter-spacing: 0;
    font-weight: lighter;
    width: 442px;
    max-width: 100%;
    text-align: left;
    margin: 20px auto;
}

.agreement-checkbox input[type="checkbox"] {
    background: #FFFFFF;
    border: 1px solid #979797;
    border-radius: 2.4px;
}

.agreement-checkbox input[type="checkbox"]:checked{
    color: #7368B8;
}

.license-agreement-box {
    width: 442px;
    max-width: 100%;
    margin: 0 auto;
    justify-content: flex-start;
}


.check-container {
    display: block;
    position: relative;
    padding-left: 40px;
    margin-bottom: 14px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    background: #FFFFFF;
    border: 1px solid #979797;
    border-radius: 2.4px;
}

.check-container input:checked ~ .checkmark {
    background: #7368B8;
    border: 1px solid #7368B8;
    border-radius: 2.4px;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
    left: 3px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.agreement-label, .agreement-label a {
    /* I accept the end use: */
    font-size: 13px;
    color: #24193B;
    letter-spacing: 0;
}

.agreement-label a{
    text-decoration: none;
    border-bottom: 1px solid #979797;
}

.agreement-label a:hover{
    color: #7368b8;
    border-bottom: 1px solid #7368b8;

}

.agreement-checkbox{
    width: 16px;
    height: 16px;
    background-image: url(../img/checkbox@3x.png);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    margin-right: 25px;

}

.agreement-checkbox.active{
    background-image: url(../img/checkbox-active@3x.png);
}

#agreement-checkbox-true{
    position: absolute;
    z-index: -1;
}

button#proceed-1{
    margin-top: 45px;
}

.order-resume-box {
    /*margin-top: 55px;*/
    height: 0;
    overflow: auto;
    transition: all .3s ease-in-out;

}

.order-resume-box.active{
    margin-top: 55px;
    height: 650px;
    transition: all .6s ease-in-out;
}

.success-title {
    /* Your payment is bein: */
    font-size: 18px;
    color: #24193B;
    letter-spacing: 0;
    text-align: center;
    line-height: 30px;
    margin-bottom: 70px;
    font-weight: 300;
}

.success-illustration {
    margin-bottom: 70px;
}

.success-details {
    /* It can take a few ho: */
    font-size: 14px;
    color: #24193B;
    letter-spacing: 0;
    text-align: center;
    line-height: 30px;
    width: 442px;
    max-width: 100%;
    margin: 0 auto;
}

.success-box {
    display: none;
}

.activate-title {
    font-size: 16px;
    color: #623A76;
    letter-spacing: 0;
    text-align: center;
    font-weight: bold;
}

.activate-details {
    font-size: 13px;
    color: #242424;
    letter-spacing: 0;
    text-align: center;
    margin-top: 35px;
}

.buy-it-here {
    /* No activation code?: */
    font-size: 13px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    margin-top: 20px;
}

.buy-it-here a{
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #808080;
}

.buy-it-here a:hover{
    color: #7368b8;
}

.sub-invalid-msg {
    /* Invalid code. Please: */
    font-size: 13px;
    color: #F5046B;
    letter-spacing: 0;
    text-align: center;
    width: 244px;
    margin: 10px auto;
    display: none;
}

#redeem-success-msg{
    /* Subscription activat: */
    font-size: 19px;
    color: #1DBEA5;
    letter-spacing: 0;
    text-align: center;
    margin-top: 0;
    height: 0;
    overflow: hidden;

}

#redeem-success-msg.active{
    margin-top: 40px;
    height: auto;
    transition: all .3s ease-in-out;
}

.steps-inner-box {
    flex-wrap: nowrap;
}

.version-tabs-box {
    width: 675px;
    max-width: 100%;
    margin: 40px auto;
}

.nav-tabs{
    border-bottom: 2px solid #7368B8;
}

.nav-tabs>li{
    width: 33.33%;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    background-color: #7368B8;
    color: #ffffff;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #7368B8;
}

.nav-tabs > li.active svg path, #select-version svg path{
    fill: #ffffff; !important;
}

.nav-tabs svg path, #select-version svg path{
    fill: #808080; !important;
}

.nav-tabs>li>a, .nav-tabs>li>a:focus{
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    font-size: 12.6px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    border-bottom: 1px solid transparent;
    border-color: #e4e4e4;
    margin-right: 0;
}

.nav-tabs>li>a:hover{
    background-color: #f4f4f4;
}

select#select-version{
    background-color: #7368B8;
    color: #ffffff;
    width: 90%;
    height: 60px;
    border: none;
    padding-left: 10px;
}

.tab-content{
    margin-top: 60px;
}

@media (max-width: 767px){

    .steps-box{
        width: 300px;
        max-width: 100%;
    }

    .step-item{
        width: 100px;
    }

    .steps-line{
        height: 1px;
        background-color: #5B5764;
        width: calc(100% - 100px);
        position: absolute;
        left: 50px;
        top: 54px;
    }

    .step-item:nth-of-type(3) .step-bullet{
        top: 49px;
    }

    .dollar-sign{
        width: 5px;
    }

    .order-item, .total-row{
        font-size: 10px;
    }

    .agreement-label, .agreement-label a{
        font-size: 11px;
    }

    .payment-container{
        padding: 75px 20px;
    }
}

.game-title {
    /* gameName: */
    font-size: 17px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    margin-top: 25px;
}

.game-version {
    /* Aditional Info: */
    font-size: 11px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    margin-top: 5px;
}

.activate-game-message {
    /* You need to activate: */
    font-size: 12px;
    color: #24193B;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 30px;
}

div.game-download-button {
    /* Rectangle 3 Copy 2: */
    border: 1px solid #D9D9D9;
    border-radius: 80px;
    width: 159px;
    height: 41px;
    font-size: 11.2px;
    color: #7B7B7B;
    letter-spacing: 0;
    text-align: center;
    line-height: 41px;
    margin: 0 auto;
    cursor: pointer;
}

div.game-download-button:hover{
    border: 1px solid #7368B8;
    color: #7368B8;
}

.download-instruct-text {
    /* Or open this link on: */
    font-size: 13px;
    color: #7368B8;
    letter-spacing: 0;
    text-align: center;
    margin-top: 10px;
}


.download-instruct-text a{
    background-color: #F3F2FF;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed #7c6def;
    margin-left: 5px;
}

.how-to-link {
    font-size: 12px;
    color: #7368B8;
    letter-spacing: 0;
    text-align: center;
    font-weight: bold;
    margin-top: 35px;
    cursor: pointer;
    margin-bottom: 35px;
}

.how-to-list {
    width: 270px;
    text-align: left;
    color: #000;
    font-size: 13px;
    line-height: 21px;
    margin: 0 auto;
    height: 0;
    overflow: hidden;
    transition: all .3s ease;
}

.how-to-list.active{
    height: 300px;
    transition: all .3s ease;
}

.how-to-list li{
    margin-bottom: 30px;
    position: relative;
    font-size: 5px;
    padding-left: 10px;
}

.how-to-list li span{
    font-size: 13px;
}

.how-to-info {
    /* This is mandatory si: */
    font-size: 11px;
    color: #808080;
    letter-spacing: 0;
    line-height: 15px;
    padding-left: 50px;
}

.condition-button {
    /* Rectangle 6: */
    background: #3A304E;
    width: 384px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    color: #ffffff;
    margin: 20px auto;
}

.reset-email-button {
    width: 21px;
    height: 21px;
    position: absolute;
    right: -31px;
    top: 11.5px;
    background-image: url(../img/reset-email-button@2x.png);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: none;
}

.reset-email-button:hover{
    background-image: url(../img/reset-email-button-hover@2x.png);
}

#android-warning {
    color: #956A15;
    background: #F9DFAA;
    padding: 16px;
    width: 442px;
    margin: auto;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

@media (max-width: 500px) {
    #android-warning {
        width: unset;
    }
}