.PaymentsView {
    position: absolute;
    width: 100%;
    top: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
}

.PaymentsViewContent {
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    height: auto;
    padding-bottom: 10px;
    background: white;
}

.Popover .PaymentsViewContent {
    left: 25px;
    right: 25px;
    background: none;
    box-shadow: none;
}

.PaymentsButton {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 200px;
    height: 60px;
    float: left;

    border-style: solid;
    border-width: 0.5px;
    border-radius: 30px;
    border-color: #E0E0E0;
    border-color: rgba(102, 102, 102, 0.5);
    box-shadow: 0px 0px 3px #CCCCCC;
    cursor: pointer;

    color: #808080;
    text-align: center;
    line-height: 60px;

    -moz-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
    user-select: none;
}
.PaymentsButton:hover {
    box-shadow: 0px 0px 10px #808080;
    border-color: #C0E0C0;
    border-color: rgba(0, 102, 0, 0.25);
    background-color: #F8FFF8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#C0C0C0')";
}

.PaymentsTopImage {
    position: relative;
    padding: 9.6%;
    width: 100%;
    float: left;

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/coins_header@3x.jpg', sizingMethod='scale')";
    background-image: url('../images/coins_header@3x.jpg'), linear-gradient(transparent, transparent);
    background-size: cover;
}

.PaymentsErrorMessageBox {
    display: none;
    position: relative;
    width: 100%;
    height: auto;
    float: left;
}

.PaymentsErrorMessage {
    position: relative;

    color: #808080;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    margin: 0 0 22px 12px;
}

.PaymentsViewLabel {
    position: relative;
    width: 100%;
    height: 32px;
    float: left;
    padding: 12px 0px 24px 12px;

    font-size: 18px;
    color: #808080;
}

.PaymentsPackagesContainer {
    position: relative;
    width: 100%;
    float: left;
}
.PaymentsCoinsPackage {
    position: relative;
    width: 20%;
    padding-top: 35%;
    float: left;
    cursor: pointer;
}
.PaymentsVIPPackage {
    position: relative;
    width: 25%;
    padding-top: 35%;
    float: left;
    cursor: pointer;
}
.PaymentsCoinsPackage .PaymentsPackageBorder, .PaymentsVIPPackage .PaymentsPackageBorder {
    -webkit-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}
                                
.PaymentsProvidersContainer {
    position: relative;
    width: 100%;
    float: left;
    padding-bottom: 25px;
}
.PaymentsProvider {
    position: relative;
    width: 25%;
    height: 140px;
    float: left;
    cursor: pointer;
}

.PaymentsPackageBorder {
    position: absolute;
    left: 8px;
    top: 8px;
    right: 8px;
    bottom: 8px;

    border-style: solid;
    border-width: 3px;
    border-radius: 6px;
    border-color: #EEEEEE;
}
.PaymentsPackageBorder:hover {
    border-color: #00A000;
}

.selected.PaymentsCoinsPackage .PaymentsPackageBorder, .selected.PaymentsVIPPackage .PaymentsPackageBorder {
    border-color: #00A000;
}

.PaymentsProviderImage {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 14px;
    height: 48px;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#DirectDebitImage {
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo_ec@3x.png', sizingMethod='scale')";
    background-image: url('../images/logo_ec@3x.png'), linear-gradient(transparent, transparent);
}
#PayPalImage {
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo_paypal@3x.png', sizingMethod='scale')";
    background-image: url('../images/logo_paypal@3x.png'), linear-gradient(transparent, transparent);
}
#SofortImage {
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo_sofortueberweisung@3x.png', sizingMethod='scale')";
    background-image: url('../images/logo_sofortueberweisung@3x.png'), linear-gradient(transparent, transparent);
}

.PaymentsProviderLabel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;

    color: #808080;
    font-size: 12px;
    text-align: center;
}

.PaymentsPackageSelectLine {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 16px;
    height: 24px;

    text-align: center;
    padding-top: 1px;

    background: #00A000;
}

.AutoBuyLine {
    position: relative;
    padding: 12px 0 24px 12px;
    text-align: left;
/*    display: inline-block; */
    display: none;
}

.AutoBuyLine :hover{
    cursor: pointer;
}

.PaymentsPackageSelectCheckbox, .AutoBuyCheckbox{
    position: relative;
    top: 0px;
    width: 18px;
    height: 18px;
    display: inline-block;

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/checkbox_unchecked@3x.png', sizingMethod='scale')";
    background-image: url('../images/checkbox_unchecked@3x.png'), linear-gradient(transparent, transparent);
    background-size: cover;
}

.AutoBuyCheckbox {
    float: left;
}

.selected.PaymentsCoinsPackage .PaymentsPackageSelectCheckbox, .selected.PaymentsVIPPackage .PaymentsPackageSelectCheckbox, .selected.AutoBuyCheckbox {
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/checkbox_checked@3x.png', sizingMethod='scale')";
    background-image: url('../images/checkbox_checked@3x.png'), linear-gradient(transparent, transparent);
}


.PaymentsPackageSelectLabel, .AutoBuyLabel {
     position: relative;
     width: 40px;
     top: -2px;
     height: 18px;
     line-height: 13px;
     display: inline-block;

     color: white;
     font-size: 13px;
 }

.AutoBuyLabel {
    width: auto;
    top: 2px;
    color: #808080;
    font-size: 16px;
}

.PaymentsPackageTopBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 45px;

    background: #EEEEEE;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.PaymentsPackageBestSellerImage {
    visibility: hidden;
    position: absolute;
    top: -12px;
    right: -8px;
    width: 36px;
    height: 36px;

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/best_seller@3x.png', sizingMethod='scale')";
    background-image: url('../images/best_seller@3x.png'), linear-gradient(transparent, transparent);
    background-size: cover;
}
.preselected.PaymentsCoinsPackage .PaymentsPackageBestSellerImage, .preselected.PaymentsVIPPackage .PaymentsPackageBestSellerImage {
    visibility: visible;
}

.PaymentsPackageNameContainer {
    position: relative;
    top: 12px;
    height: 60px;
    background-color: #EEEEEE;
}

.PaymentsPackagePriceContainer {
    position: relative;
    width: 100%;
    text-align: center;
}

.PaymentsPackageCoinsText {
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    top: 10px;
    width: auto;
    color: #808080;
    font-size: 18px;
    text-align: center;
}

.PaymentsPackageCoinsTextCrossOut {
    margin-left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 19px;
    height: 3px;
    width: 45px;
    background-color: #e12a4c;
}

.PaymentsPackageBonusCoinsText {
    position: absolute;
    margin-left: 50%;
    width: auto;
    /*top: 15px;*/
    font-size: 20px;
    line-height: 16px;
    text-align: center;
    padding: 3px;
    padding-left: 7px;
    padding-right: 7px;
    font-weight: 500 !important;
    /*transform: translateX(-50%);*/
    rotation: 45deg;

    -ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
    transform: rotate(10deg) translateX(-20%);

    border-radius: 6px;
    color: #ffffff;
    background-color: #00A000;
}

.PaymentsPackageCoinsLabel {
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    top: 38px;
    width: auto;
    color: #808080;
    font-size: 18px;
    line-height: 16px;
    text-align: center;
}

.PaymentsPackageInfoImage {
    position: absolute;
    top: 60px;
    right: 2px;
    width: 12px;
    height: 12px;
 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ic_more@3x.png', sizingMethod='scale')";
    background-image: url('../images/ic_more@3x.png'), linear-gradient(transparent, transparent);
    background-size: cover;
}

.PaymentsHoverInfo {
    display: none;
    position: absolute;
    width: 168px;
    height: 112px;
    bottom: 7px;
    left: -77px;
    z-index: 9;

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_bubble@3x.png', sizingMethod='scale')";
    background-image: url('../images/bg_bubble@3x.png'), linear-gradient(transparent, transparent);
    background-size: cover;

    font-size: 12px;
    color: #404040;
    padding: 12px 4px 8px 10px;
}
.PaymentsPackageInfoImage:hover .PaymentsHoverInfo {
    display: block;
}

.PaymentsPackageImage {
    position: absolute;
    top: 58px;
    left: 5px;
    right: 5px;
    bottom: 64px;

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ic_coins03@3x.png', sizingMethod='scale')";
    background-image: url('../images/ic_coins03@3x.png'), linear-gradient(transparent, transparent);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.preselected.PaymentsCoinsPackage .PaymentsPackageImage, .preselected.PaymentsVIPPackage .PaymentsPackageImage {
    top: 60px;
    bottom: 68px;
}
.PaymentsPackagePriceLabel {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 20px;
    text-align: center;

    color: #C0C0C0;
    font-size: 16px;
    line-height: 16px;
    bottom: 42px;
}

.PaymentsPackageVIPPriceLabel {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 20px;
    text-align: center;

    color: #C0C0C0;
    font-size: 13px;
    line-height: 13px;
    bottom: 42px;
}

/* Fonts */

.PaymentsButton, .PaymentsViewLabel, .PaymentsProviderLabel, .PaymentsPackageSelectLabel, .PaymentsPackageCoinsText, .PaymentsPackageCoinsLabel, .PaymentsPackageBonusCoinsText, .PaymentsPackagePriceLabel, .PaymentsPackageVIPPriceLabel, .PaymentsHoverInfo, .AutoBuyLabel {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}

.PaymentsErrorMessage {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: bold;
}

@media screen and (min-width: 1294px) {
    /* Bigger payment labels when screen is big */
    .PaymentsPackageBorder {
        border-width: 6px;
        border-radius: 12px;
    }
    .PaymentsPackageTopBackground {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .PaymentsPackagePriceLabel {
        font-size: 30px;
        bottom: 56px;
    }
    .PaymentsPackageVIPPriceLabel {
        font-size: 18px;
        bottom: 42px;
    }
    .PaymentsPackageTopBackground {
        height: 70px;
    }
    .PaymentsPackageInfoImage {
        position: absolute;
        top: 90px;
        right: 2px;
        width: 20px;
        height: 20px;
    }
    .PaymentsHoverInfo {
        bottom: 14px;
        left: -73px;
    }
    .PaymentsPackageBestSellerImage {
        top: -22px;
        right: -14px;
        width: 52px;
        height: 52px;
    }

    .PaymentsPackageNameContainer {
        top: 12px;
        height: 100px;
    }

    .PaymentsPackagePriceContainer {
        line-height: 14px;
    }

    .PaymentsPackageCoinsText {
        top: 30px;
        font-size: 28px;
        line-height: 16px;
    }

    .PaymentsPackageCoinsTextCrossOut {
        top: 38px;
        height: 3px;
        width: 65px;
    }

    .PaymentsPackageBonusCoinsText {
        top: 5px;
        font-size: 25px;
        line-height: 16px;
        padding: 8px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .PaymentsPackageCoinsLabel {
        top: 60px;
        font-size: 28px;
        line-height: 16px;
    }
}

@media screen and (max-width: 1023px) {
    .PaymentsViewContent {
        position: relative;
        top: 0px;
        right: 0px;
        margin: 0;
    }
    .PaymentsCoinsPackage, .PaymentsVIPPackage {
        width: 100%;
        padding-top: 0;
        height: 180px;
    }
    .PaymentsProvider {
        width: 100% !important;
        height: 130px;
    }
    .PaymentsPackageInfoImage {
        visibility: hidden;
    }
    .PaymentsPackageImage {
        top: 50px;
    }
    .PaymentsPackageNameLabel {
        font-size: 20px;
    }
    .PaymentsPackageBestSellerImage {
        right: -4px;
        width: 58px;
        height: 58px;
    }

    .Popover .PaymentsViewContent {
        left: 0px;
        right: 0px;
    }

    .PaymentsPackageNameContainer {
        top: 12px;
        height: 100px;
    }

    .PaymentsPackagePriceContainer {
        line-height: 14px;
    }

    .PaymentsPackageCoinsText {
        top: 17px;
        font-size: 20px;
        line-height: 16px;
    }

    .PaymentsPackageCoinsTextCrossOut {
        top: 24px;
        height: 3px;
        width: 40px;
    }

    .PaymentsPackageBonusCoinsText {
        font-size: 20px;
        padding: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .PaymentsPackageCoinsLabel {
        top: 45px;
        font-size: 20px;
        line-height: 16px;
    }
}

@media screen and (max-width: 767px) {
    .PaymentsView {
        position: relative;
        height: auto;
    }

    .PaymentsPackageNameContainer {
        top: 12px;
        height: 100px;
    }

    .PaymentsPackagePriceContainer {
        line-height: 14px;
    }

    .PaymentsPackageCoinsText {
        top: 17px;
        font-size: 20px;
        line-height: 16px;
    }

    .PaymentsPackageCoinsTextCrossOut {
        top: 24px;
        height: 3px;
        width: 45px;
    }

    .PaymentsPackageBonusCoinsText {
        font-size: 20px;
        padding: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .PaymentsPackageCoinsLabel {
        top: 45px;
        font-size: 20px;
        line-height: 16px;
    }
}