/* Manage Membership */
#manage-membership-holder {
    font-family: "roboto", sans-serif;
}

#manage-membership-holder h1 {
    font-family: "Georgia", serif, sans-serif;
}

#manage-membership-holder .page-title {
    font-size: 48px;
}

#manage-membership-holder #membership-details {
    padding: 5px;
    font-size: 16px;
    font-weight: lighter;
}

#manage-membership-holder #membership-details .row {
    margin: 15px;
}

#manage-membership-holder #membership-details .row.row-divider {
    margin: 25px;
}

#manage-membership-holder #membership-details .row:not(.row-btn) div {
    padding: 0;
}

#manage-membership-holder #membership-details .row:not(.row-btn) div:nth-of-type(2) {
    font-weight: bold;
}

#manage-membership-holder #membership-details .row.row-btn .btn {
    display: block;
    border: 1px #ec1c24 solid;
    width: 100%;
    line-height: 2.5;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

#manage-membership-holder #membership-details .row.row-btn .btn:hover, #manage-membership-holder #membership-details .row.row-btn .btn.btn-red {
    background: #ec1c24;
    color: #fff;
}

#manage-membership-holder #membership-benefits {
    float: right;
    width: 65%;
}

#manage-membership-holder #membership-benefits h3 {
    margin: 35px 0;
    font-size: 28px;
    padding: 0;
    font-weight: 400;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"],
.ui-dialog[aria-describedby="dialog-cancel-subscription"],
.ui-dialog[aria-describedby="dialog-resume-subscription"] {
    position: fixed;
    top: 50% !important;
    transform: translate(0, -43%) !important;
    text-align: center;
    border-radius: 0 !important;
    max-height: 80%;
}

.ui-dialog[aria-describedby="dialog-payment-history"] {
    position: fixed;
    top: 50% !important;
    transform: translate(-40%, -50%);
    text-align: center;
    width: 70% !important;
    height: 85% !important;
    padding: 0;
    font-size: 12px;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-titlebar,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-titlebar,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-titlebar,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-titlebar {
    width: 100%;
    background: none;
    border: none;
    font-size: 40px;
    float: left;
    font-weight: 300;
    display: inline-block;
    font-family: "Georgia", sans-serif;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-titlebar .ui-dialog-title,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-titlebar .ui-dialog-title,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-titlebar .ui-dialog-title,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-titlebar .ui-dialog-title {
    width: 100%;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-titlebar .ui-dialog-titlebar-close,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-titlebar .ui-dialog-titlebar-close,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-titlebar .ui-dialog-titlebar-close,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-titlebar .ui-dialog-titlebar-close {
    position: absolute;
    right: 6px;
    top: 16px;
    border: none;
    background: none;
    font-size: 22px;
    font-weight: 600;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-titlebar .ui-dialog-titlebar-close:before,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-titlebar .ui-dialog-titlebar-close:before,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-titlebar .ui-dialog-titlebar-close:before,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-titlebar .ui-dialog-titlebar-close:before {
    content: "\002716";
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-content,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-content,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-content {
    width: 75% !important;
    margin: 0 auto 65px;
    font-weight: 600;
    height: 130px !important;
}

.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-content {
    width: 80% !important;
    font-weight: 300;
    height: 75% !important;
    text-align: left;
    min-height: 75% !important;
    overflow-x: hidden;
    margin: 0 auto;
    max-height: 75% !important;
    padding: 0;
    font-size: 18px;
}

.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-content .container {
    overflow: hidden !important;
    width: 100%;
    margin: 0 !important;
}

.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-content .container .row div .row div.right-border {
    border-right: 1px #979797 solid;
}

.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-content .container .row div .row div {
    padding: 0 8px;
    line-height: 2.5;
    border-left: 1px #979797 solid;
    border-bottom: 1px #979797 solid;
}

.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-content .container .row div .row.title-row {
    font-size: 16px;
    border-top: 1px #979797 solid;
    font-weight: 600;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-buttonpane,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-buttonpane,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-buttonpane,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-buttonpane {
    border: none !important;
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    text-align: center;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-buttonpane .ui-dialog-buttonset button {
    background: #ec1c24;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    text-align: center;
    width: 33%;
    line-height: 3;
    outline: none;
    border: 1px solid #ec1c24;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button span,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button span,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button span,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-buttonpane .ui-dialog-buttonset button span {
    line-height: 3;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button:last-child,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button:last-child,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button:last-child,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-buttonpane .ui-dialog-buttonset button:last-child {
    background: #fff;
    color: #000;
}

.ui-dialog[aria-describedby="dialog-pause-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child,
.ui-dialog[aria-describedby="dialog-cancel-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child,
.ui-dialog[aria-describedby="dialog-resume-subscription"] .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child,
.ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {
    background: #ec1c24;
    color: #fff;
}

/* Manage Membership Package Block Specific Styles */
#manage-membership-holder .package-block {
    width: 49%;
    min-height: 180px;
    max-height: 180px;
    margin-bottom: 15px;
    height: 180px;
}

#manage-membership-holder .package-block:nth-of-type(2n) {
    float: right;
}

/* Mobile specific styles */
@media screen and (max-width: 480px) {
    #manage-membership-holder .page-title {
        font-size: 32px;
    }

    #manage-membership-holder #membership-details .row {
        margin: 10px 15px;
    }

    #manage-membership-holder #membership-details .row.row-divider {
        margin: 15px;
    }

    #manage-membership-holder #membership-benefits {
        margin-top: 25px;
        float: left;
        width: 83.33333333%;
    }

    #manage-membership-holder #membership-benefits h3 {
        font-size: 22px;
    }

    #manage-membership-holder .package-block.col-xs-6 {
        min-height: 118px;
        max-height: 118px;
        width: 48%;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: lighter;
        background-size: 45%, 15%;
    }

    .ui-dialog[aria-describedby="dialog-payment-history"] {
        position: fixed;
        top: 5% !important;
        text-align: center;
        width: 90% !important;
        height: 90% !important;
        padding: 0;
        left: 0 !important;
        font-size: 12px !important;
        transform: translate(5%, 5%);
    }

    .ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-content {
        width: 90% !important;
    }

    .ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-titlebar .ui-dialog-title {
        font-size: 22px;
    }

    .ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-content .container .row div .row div {
        line-height: 2.5;
        font-size: 12px;
        padding: 0 5px;
    }

    .ui-dialog[aria-describedby="dialog-payment-history"] .ui-dialog-content .container .row div .row.title-row {
        font-size: 14px;
    }
}