@import url('https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css");

@media (min-width: 240px) and (max-width: 767px) {
    #content {
        display: block;
        max-width: 100%;
        width: 100%;
        padding: 1rem !important;
    }

    .de_fee {
        margin: 0;
        min-width: 85px;
        text-align: center;
    }

    .button-wrapper a {
        width: 100%;
        text-align: center;
    }

    .field .form-group fieldset {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .form-group>label,
    .form-group fieldset>legend {
        padding: 0 !important;
    }

    form[name=regForm] fieldset {
        grid-template-columns: 100%;
    }

    #content #content-middle .tab-content {
        padding: 0 !important;
    }

    #content .row .col-sm-9,
    #content .row .col-sm-3 {
        padding: 0;
    }

    div[data-group="membernumber"] div p.membernumber a {
        font-size: 0.85rem;
    }

    div[data-group="membernumber"] div p.membernumber a i {
        font-size: 1rem;
    }

    .review #content .row {
        display: grid;
    }

    .review .field-summary span,
    .review .field-summary ul {
        width: 100% !important;
        flex: 100% !important;
    }

    table.breakdown {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .breakdown,
    table.breakdown tr,
    table.breakdown .desc,
    table.breakdown .amount,
    table.breakdown td.totalQuantity {
        border: none !important;
    }

    #paymentForm {
        padding: 0px;
    }

    .breakdown thead {
        display: none !important;
    }

    table.breakdown .desc {
        display: grid;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 0.5rem 1rem 0 0 !important;
        text-align: left;
    }

    table.breakdown .desc:before {
        position: relative;
    }

    .breakdown,
    .breakdown tbody,
    .breakdown tr,
    .breakdown td {
        display: block;
        width: 100%;
    }

    .breakdown tr {
        margin-bottom: 18px;
        padding: 16px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.45);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        opacity: 0;
        transform: translateY(10px);
        animation: fadeSlideIn 0.35s ease forwards;
    }

    @keyframes fadeSlideIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .breakdown tr:nth-child(odd) {
        background: rgba(255, 255, 255, 0.32);
    }

    .breakdown tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.18);
    }

    .breakdown td {
        text-align: right;
        padding: 10px 0;
        position: relative;
        font-size: 15px;
        line-height: 1.3;
    }

    .breakdown td:nth-child(1)::before {
        content: "Description";
    }

    .breakdown td:nth-child(2)::before {
        content: "Quantity";
    }

    .breakdown td:nth-child(3)::before {
        content: "";
    }

    .breakdown td:nth-child(4)::before {
        content: "Unit Price";
    }

    .breakdown td:nth-child(5)::before {
        content: "Tax";
    }

    .breakdown td:nth-child(6)::before {
        content: "Amount";
    }

    .breakdown td::before {
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #2a2a2a;
        text-align: left;
        font-size: 14px;
    }

    .breakdown td:empty::before {
        content: "";
    }

    #CVVmodal {
        width: 95% !important;
    }

    .breakdown td:nth-child(5)::before {
        display: none;
    }

    td.item_tax_col.hide {
        display: block !important;
        float: left;
        width: 50%;
    }

    td.item_tax_col.hide:nth-child(2):before {
        content: "Tax";
        display: inline-block;
    }

    .breakdown-page .table.table-striped.breakdown {
        background: transparent;
        box-shadow: none;
    }

    #paymentForm label {
        display: grid;
        grid-template-columns: 26px 93%;
        text-align: left;
    }

    #paymentForm label span.pay-info {
        display: inline-grid;
        margin: 0 !important;
        width: auto;
        position: relative;
    }

    #paymentForm label span.pay-info span {
        margin: 10px 0px !important;
        position: relative;
        left: -22px;
    }

    #bankInfo #infoTable,
    #billinfoTable {
        width: 100%;
        border-collapse: collapse;
        font-family: inherit;
    }

    #bankInfo #infoTable th,
    #bankInfo #infoTable td,
    #billinfoTable th,
    #billinfoTable td {
        padding: 6px 16px !important;
        vertical-align: middle;
    }

    #bankInfo #infoTable th,
    #billinfoTable th {
        width: 36%;
        text-align: left;
        font-weight: 600;
        color: #333;
        font-size: 15px;
    }

    #bankInfo #infoTable tr:not(:last-child) th,
    #bankInfo #infoTable tr:not(:last-child) td,
    #billinfoTable tr:not(:last-child) td,
    #billinfoTable tr:not(:last-child) th {
        border-bottom: 1px solid #eee;
    }

    #bankInfo #infoTable,
    #bankInfo #infoTable tbody,
    #bankInfo #infoTable tr,
    #bankInfo #infoTable th,
    #bankInfo #infoTable td,
    #billinfoTable,
    #billinfoTable tbody,
    #billinfoTable tr,
    #billinfoTable td,
    #billinfoTableth th {
        display: block;
        width: 100%;
        border: none;
    }

    #bankInfo #infoTable tr,
    #billinfoTable tr {
        padding: 12px 0 0 0;
        margin-bottom: 0px;
        border-bottom: none;
    }

    #bankInfo #infoTable th,
    #billinfoTable th {
        margin-bottom: 0px;
        font-size: 14px;
        color: #444;
    }

    #bankInfo #infoTable td,
    #billinfoTable td {
        padding: 0 0 5px 0;
    }

    #bankInfo #infoTable td input,
    #billinfoTable input {
        width: 100%;
        box-sizing: border-box;
        padding-left: 40px;
    }

    #paymentForm #bankInfo table,
    #billinfoTable {
        margin: 0px !important;
        width: 100% !important;
    }

    #breakdown_body {
        padding: 0.5rem;
    }

    #noTax {
        text-indent: -999px;
    }

    #project_payment_methods {
        width: 100% !important;
    }

    #couponForm {
        max-width: 100% !important;
        width: 100% !important;
    }

    #couponForm input[type="submit"] {
        top: calc(0.0rem + 1.1rem);
        right: 0.3rem;
    }

    #bankInfo,
    #billing_information {
        max-width: 100% !important;
        margin: 1rem 0 !important;
        padding: 1rem;
    }

    section#footer .footer img {
        width: 4rem;
        height: 4rem;
    }

    #content {
        max-width: 100% !important;
    }

    #main-card-wrap .card {
        max-width: 100% !important;
        width: 100%;
    }

    div.landing-buttons {
        display: grid !important;
        gap: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
    }

    div.landing-buttons a,
    .princing-container .card.member {
        max-width: 100% !important;
    }

    div.col-sm-9,
    div.col-sm-3 {
        overflow: visible !important;
    }

    .princing-container .pricing-grid {
        grid-template-columns: 100% !important;
    }

    .princing-container .section-title {
        align-items: flex-start !important;
    }

    .princing-container .section-title span {
        display: grid;
    }

    .princing-container .section-title span small {
        font-size: 0.85rem !important;
    }
	.button-wrapper {
		flex-wrap: wrap;
	}
	form[name=regForm] fieldset legend,
	form[name=regForm] fieldset legend.left,
	form[name=regForm] .form-group>label{
		color: var(--primary);
        font-weight: bold !important;
	}
	#content-middle .panel-default .panel-body #fieldContainer{
		gap: 1.5rem;
	}
}