@import url('custom.css');
@media screen and (max-width: 768px) {
    .login-form {
        width: 320px !important;
    }

    .table-responsive {
        border: none !important;
    }
}

@media (max-width: 576px) {
    body {
        overflow-x: hidden;
    }

    .login-form {
        width: 100% !important;

    }

    .btn-pull-right {
        right: 30px;
    }

    .content-login {
        /*        padding: 0px 0px 60px 0px !important;
*/ width: 100%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -4%);
        height: 110%;
        background-color: white;
    }

    .popup-alert {
        width: 100%;
    }

    .popup-button {
        width: 100%;
        height: 45px;
    }

    .modal-dialog {
        margin-top: 15%;
    }
    /*margin*/
    .no-margin-top-xs {
        margin-top: 0px !important;
    }

    .mt-xs-10 {
        margin-top: 10px;
    }

    .m-20-xs {
        margin: 20px;
    }

    .mt-20-xs {
        margin-top: 20px;
    }

    .mr-20-xs {
        margin-right: 20px;
    }

    .mb-20-xs {
        margin-bottom: 20px;
    }

    .mb-10-xs {
        margin-bottom: 10px;
    }

    .mb-unset-xs {
        margin-bottom: unset !important;
    }

    .ml-20-xs {
        margin-left: 20px;
    }

    .ml-30-percent {
        margin-left: 30%;
    }

    .mr-30-percent {
        margin-right: 30%;
    }

    /*padding*/
    .p-30-xs {
        padding: 30px;
    }

    .pt-30-xs {
        padding-top: 30px;
    }

    .pr-30-xs {
        padding-right: 30px;
    }

    .pb-30-xs {
        padding-bottom: 30px;
    }

    .pl-30-xs {
        padding-left: 30px;
    }

    /*no padding*/
    .no-padding-left-xs {
        padding-left: 0px;
    }

    .no-padding-xs {
        padding: 0px;
    }

    .text-center-xs {
        text-align: center;
    }

    .content {
        padding: 0px 10px 60px 10px ;
    }

    .col-md-6 .no-padding {
        padding: 0px;
    }

    .panel {
        border-color: #fff;
    }

    .absolute-bottom {
        position: absolute;
        bottom: 15px;
        width: 100%;
    }

    .display-none {
        display: none;
    }

    .credit-card-img img {
        margin-top: -50px;
    }

    .credit-card {
        width: 100%;
    }

    .panel-flat .panel-heading {
        border-bottom: 1px solid #BDBDBD;
    }

    .merchant-logo {
        width: 40px;
        margin-top: 30px;
    }
}

.navigation > li > ul li.active > a {
    /*background-color: rgb(255 255 255);
    color: #333333;*/
}

@media (min-width: 577px) {
    .content-login {
        width: 55%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -4%);
    }

    .popup-alert {
        width: 80%;
        margin: 0 auto;
    }

    .popup-button {
        width: 60%;
        height: 45px;
    }

    .modal-dialog {
        margin-top: 8% !important;
    }

    .absolute-bottom {
        position: absolute;
        bottom: 15px;
        width: 85%;
    }

    credit-card-img img {
        margin-top: 35px;
    }

    .credit-card-inner {
        font-size: 20px;
    }

    /*margin*/
    .m-20-sm {
        margin: 20px;
    }

    .mt-20-sm {
        margin-top: 20px;
    }

    .mr-20-sm {
        margin-right: 20px;
    }

    .ml-20-sm {
        margin-left: 20px;
    }

    .m-50-sm {
        margin: 50px;
    }

    .mt-50-sm {
        margin-top: 50px;
    }

    .mr-50-sm {
        margin-right: 50px;
    }

    .ml-50-sm {
        margin-left: 50px;
    }
}

@media (max-width: 768px) {
    .sidebar-mobile-main .sidebar-main,
    .sidebar-mobile-secondary .sidebar-secondary,
    .sidebar-mobile-opposite .sidebar-opposite,
    .sidebar-mobile-detached .sidebar-detached > .sidebar {
        display: block;
        position: absolute;
    }

    .pt-50-mobile {
        padding-top: 50px;
    }
}

@media only screen and (device-width: 768px) {
    /* For general iPad layouts */
    .content-login {
        padding: 0px 0px 60px 0px !important;
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -4%)
    }

    .login-form {
        width: 55% !important;
        margin: 0 auto;
    }
}

@media (device-width: 1028px) and (device-height: 768px) {
    .voucher-width {
        width: 33.33333333%;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .voucher-width {
        width: 33.33333333%;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 1400px) {
    .voucher-width {
        width: 25%;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-device-width: 1200px) and (max-width: 1399px) {
    .voucher-width {
        width: 33.33333333%;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn-pull-right {
        right: 20px;
    }
}

@media only screen and (device-width: 1024px) and (device-height: 1366px) {
    /* For portrait layouts only */
    .content-login {
        padding: 0px 0px 60px 0px !important;
        width: 100%;
    }

    .login-form {
        width: 55% !important;
        margin: 0 auto;
    }
}

@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
    .content-login {
        padding: 0px 0px 60px 0px !important;
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -4%);
    }
}

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    .cc-wrapper {
        height: 170px;
    }

    .credit-card-inner {
        font-size: 16px !important;
    }
}

@media (device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2) {
    /*IPhone 5 only CSS here*/
    .cc-wrapper {
        height: 150px;
    }

    .credit-card-logo img {
        margin-top: 25px !important;
    }

    .credit-card-inner {
        font-size: 16px !important;
        margin-top: 45px !important;
    }
}

/*padding*/
.p-30 {
    padding: 30px;
}

.pt-30 {
    padding-top: 30px;
}

.pr-30 {
    padding-right: 30px;
}

.pl-30 {
    padding-left: 30px;
}

.pl-10-lg {
    padding-left: 10px;
}

.pr-10-lg {
    padding-right: 10px;
}

.pb-10-lg {
    padding-bottom: 10px;
}

.width-fit-content {
    width: 100%;
}

.panel-width {
    margin: 0 auto;
}

.digit-group input[type="text"] {
    width: 34px;
    height: 34px;
    background-color: white;
    border: none;
    border-bottom: 1px solid #333333;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 15px;
}

.otp-container {
    border: 1px solid #ddd;
    border-radius: 4px;
}
    .otp-container input[type="text"] {
        height: 34px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: 34px;
        padding: 0;
        margin: 0 15px;
        border: none;
        background-color: white;
        box-sizing: border-box;
        vertical-align: middle;
    }

        .otp-container input[type="text"]::placeholder {
            font-size: 13px;
            line-height: 34px;
            color: #999;
            font-weight: normal;
            text-align: center;
            vertical-align: middle;
            transform: translateY(-3px);
            letter-spacing: 0px;
        }


.splitter {
    padding: 0 5px;
    color: white;
    font-size: 24px;
}

.prompt {
    margin-bottom: 20px;
    font-size: 20px;
    color: white;
}

.voucher-info {
    background-color: #E64F6D;
    color: #fff !important;
    padding: 4px;
    opacity: 0.95;
    position: relative;
    z-index: 2;
    top: -102px;
    display: none;
    height: 107px;
}

hr.voucher-info-line {
    border-top: 1px dashed #fff;
    margin-top: 0px;
    margin-bottom: 0px;
}

.scrolling-voucher-name {
    overflow-x: scroll;
    overflow-y: hidden;
    font-size: 19px;
    height: 23px;
    margin-bottom: 5px;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .scrolling-voucher-name::-webkit-scrollbar {
        display: none;
    }

.scrolling-voucher {
    overflow-x: scroll;
    overflow-y: hidden;
    font-size: 19px;
    white-space: nowrap;
    -ms-overflow-style: none;
}

    .scrolling-voucher::-webkit-scrollbar {
        display: none;
    }

.scrolling-voucher-more-info {
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
}

    .scrolling-voucher-more-info::-webkit-scrollbar {
        display: none;
    }

.voucher-label-expired {
    position: relative;
    background-color: rgb(233, 24, 24);
    color: rgb(255, 255, 255);
    font-size: 10px;
    float: right;
    top: -5px;
    right: -15px;
    z-index: 3;
    margin: 0px;
    padding: 3px;
    border-radius: 0px 5px;
}

.voucher-label-redeemed {
    position: relative;
    margin: 0;
    background-color: #F19C23;
    color: #fff;
    font-size: 10px;
    float: right;
    padding: 3px;
    top: -5px;
    right: -15px;
    border-radius: 0 5px 0 5px;
    z-index: 3;
}

::-webkit-scrollbar {
    width: 0px;
}

.disabled-link {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.respv-panel-heading {
    position: relative;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.respv-panel-body {
    position: relative;
    padding: 20px;
}

.respv-panel-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 30px;
    padding-left: 20px;
}

.memberperks-text {
    font-size: 16px;
}

.respv-membership-title {
    font-size: 18px;
    font-weight: bold;
}

.respv-membership-items {
    font-size: 14px;
}

.respv-label {
    font-size: 14px;
    font-weight: bold;
}

.respv-form-heading {
    position: relative;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    padding: 15px 20px;
}

.respv-title {
    font-size: 18px;
    font-weight: bold;
}

.respv-error-label {
    font-size: 14px;
    color: #EB001B;
    float: right;
}

.input-validation-error {
    border-width: 1px;
    border-color: #EB001B;
}

.input-group-btn {
    padding-left: 1px;
    padding-right: 1px;
}

.no-left-border {
    border-left: none;
}

    .no-left-border .input-validation-error {
        border-color: #EB001B;
    }

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
}

/* Begin User Wallet */

.input-v2 input, select {
    height: 44px !important;
}

.button-alert-confirm-no {
    float: left !important;
    margin-left: 15% !important;
    margin-top: 10px;
    width: 30%
}

.button-alert-confirm-ok {
    float: right !important;
    margin-right: 15% !important;
    margin-top: 10px;
    width: 30%
}

.button-alert-confirm-ok-center {
    margin-top: 10px;
    width: 60%
}

@media(max-width: 576px) {
    .modal-alert-sm {
        width: 90%;
        margin: 0 auto;
        top: 20%;
    }
}

@media (min-width: 700px) {
    .modal-alert-sm {
        width: 30%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .btn-pull-right {
        right: 30px;
    }

    .hide-sm {
        display: none;
    }

    .hide-landscape {
        display: none;
    }
}

.modal-alert-header {
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    text-align: center;
}

.modal-alert-message {
    font-size: 18px;
    color: #808080;
    text-align: center;
}

/* End User Wallet */


@media (max-width: 577px) {
    .digit-group input[type="text"] {
        margin: 0 5px;
    }
}

@media (min-width: 992px) {
    .hide-sm {
        display: none;
    }
}

@media(max-width: 500px) {
    .respv-panel-heading {
        position: relative;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }

    .respv-panel-body {
        position: relative;
        padding: 0 10px 0 10px;
    }

    .respv-panel-title {
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 0;
        padding-top: 0px;
        padding-left: 0;
    }

    .memberperks-text {
        font-size: 12px;
    }

    .pl-10-lg {
        padding-left: 0px;
    }

    .pr-10-lg {
        padding-right: 0px;
    }

    .pb-10-lg {
        padding-bottom: 0px;
    }

    .respv-membership-title {
        font-size: 12px;
    }

    .respv-membership-items label {
        font-size: 12px;
    }

    .respv-membership-items a {
        font-size: 12px;
    }

    .respv-membership-items span {
        font-size: 12px;
    }

    .respv-label {
        font-size: 12px;
    }

    .respv-form-heading {
        padding: 15px 10px;
    }

    .respv-title {
        font-size: 14px;
    }

    .respv-error-label {
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    .login-form {
        width: 100% !important;
    }
}

@media (max-width: 320px) {
    .digit-group input[type="text"] {
        margin: 0 0;
    }
}

@media (max-width: 280px) {
    .login-form {
        width: 99% !important;
    }
}

@media (min-width: 500.01px) and (max-width: 1024px) {
    .respv-panel-title {
        margin-top: 0px;
    }
}

.navbar-inverse {
    background: rgba(255, 255, 255, 1) !important;
    border: 1px solid #d9d9d9;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-bottom: 10px;
    position: fixed;
    right: auto;
    left: auto;
    width: 100%;
}


.custom-scroll-hide {
    overflow-y:scroll;
}

@media (max-width: 768px) {
    .sidebar {
        background-color: var(--color1);
        position: fixed !important;
        padding-top: 75px;
    }

    .pr-10-dsktop-only {
        padding-right: 5px !important;
    }

    .mbl-fnt-size-14px {
        font-size: 14px !important;
    }

    .section-alert-member {
        padding-top: 0px !important;
    }

    .see-expiring-point-text {
        margin-top: -9px;
    }
}

.reset-from-email {
    margin-top: -13%;
}

.error-field {
    border: 1px solid #f44336 !important;
}

.error-field-select {
    border: 1px solid #f44336;
    border-left:0px !important
}

.txt-current-level {
    font-family: Roboto;
    font-size: 12px;
    font-weight: 300;
    line-height: 11.72px;
    letter-spacing: 0.4000000059604645px;
    text-align: left;
}

.sec-hdr-cstm-wth-btn {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.brd-rght-cstm {
    border-right: 1px solid #dddd;
}

.sctn-point {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;

}

.pr-10-dsktop-only {
    padding-right:10px;
}

.fnt-size-12px {
    font-size : 12px !important;
}

.sctn-point-tier {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
    align-items: flex-end;
    flex-direction: row;
}

.section-alert-member {
    padding-top: 15px;
}

.custom-modal-header-style {
    background-color: #F2F2F2 !important;
}

.custom-modal-close-button-style {
    font-weight: bold;
    font-size: 24px;
}

.custom-modal-height-60vh.modal-dialog {
    height: 60vh;
}

.custom-modal-height-82vh.modal-dialog {
    height: 82vh;
}

.custom-loading-spinner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.mb-shrink {
    margin-bottom: -20px;
}

#modalExistingAccount span.checked {
    background: #00B900;
    color: white;
    border: 2px solid #00B900;
}

#modalExistingAccount .checker span.checked:after {
    background-color: unset;
}