/* Plan cards table, shared by /product/pricing/ and /product/mission-pricing/ */
#mp-popular-header { display: flex; margin-bottom: -18px; line-height: 0; position: relative; z-index: 2; }
.mp-popular-spacer { flex: 1; }
#mp-most-popular-tag { background-color: var(--primary); color: var(--black); height: 32px; padding: 0 16px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; border-radius: 20px; border: none; }
#plan-template { border-radius: 15px; overflow: visible; background-color: white;}
#plan-template > div:not(:last-child) { border-right: 1px solid #222222; }
#basic-plan-container { border: 1px solid #222222; border-radius: 14px 0 0 14px; overflow: hidden; }
#premium-plan-container { border: 1px solid #222222; border-left: none !important; border-radius: 0 14px 14px 0; overflow: hidden; }
#plus-plan-container { border: 1px solid #222222; border-left: none !important; border-right: none !important; }
#pro-plan-container { border: 2px solid #0BD2CD !important; margin: -1px 0; position: relative; z-index: 1; }
#pricing-plan-section { padding: 0rem 3rem; margin-top: 0.25rem; position: relative; width: 100%; }
#pro-plan-section, #plus-plan-section, #starter-plan-section, #basic-plan-section, #premium-plan-section { background-color: white; width: 100%; }
#pro-plan-container { background-color: #F3FDFC; display: flex; flex-direction: column; }
#pro-plan-section { background-color: #F3FDFC; flex: 1; outline: none !important; }
#pro-plan-container .section-price { color: #038580; }
#pro-plan-container .section-price-text { color: #038580; }
#pricing-plan-section .primary-2{ color: #038580; font-weight: 700; }
#pricing-plan-section .discounted-text { font-size: 13px; text-decoration: line-through; color: #797979 }
#pricing-plan-section .section-head { padding: 1rem; }
#pricing-plan-section button-element.get-started-btn { --padding: 15px 16px; }
#pricing-plan-section .section-title { font-size: 26px; font-weight: 600; margin-bottom: 1rem; }
#pricing-plan-section .section-price-container { margin: .5rem 0; }
#pricing-plan-section .section-price { font-size: 25px; font-weight: 700; color: var(--primary-2); }
#pricing-plan-section .section-price-text { font-size: 26px; color: var(--primary-2);}
#pricing-plan-section .section-price-description { font-weight: 700; margin-bottom: 1rem; color: #797979; }
#pricing-plan-section .fee-admin-section { padding: 0.5rem;  }
#pricing-plan-section .feature-section { margin-top: 0.5rem; margin-bottom: 1rem; }
#pricing-plan-section .plan-description { padding: 1rem; }
#pricing-plan-section .feature-list { margin: 0; padding: 0; list-style: none; }
#pricing-plan-section .feature-list > li { display: block; color: var(--text-color); font-weight: 600; min-width: 100%; margin: 0; }
#pricing-plan-section .feature-list > li:not(:last-child) { border-bottom: none; }
#pricing-plan-section .feature-item-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 1rem; cursor: pointer; min-height: unset; }
#pricing-plan-section .sub-feature-list { list-style: disc; margin: 0; padding: 0 1rem 0.5rem 2.5rem; }
#pricing-plan-section .sub-feature-list li { display: list-item; font-size: 14px; font-weight: 500; color: var(--gray-700); padding: 0; margin: 0; border: none; min-height: unset; line-height: 24px; }
#pricing-plan-section .sub-feature-list li::marker { color: var(--gray-700); }
.sub-feature-addon { background-color: #FEE7DF; color: #222; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
#pricing-plan-section .line-break { height: 1px; background-color: #D1D5DB; border: none; width: 100%; }
#pricing-plan-section #basic-plan-container .feature-section { margin-top: 0; }
@media (max-width: 767px) {
    #pricing-plan-section { margin-top: 1rem; }
    #pricing-plan-section .annual-pill-tablet { display: none; }
    #pricing-plan-section .section-head { height: 260.5px; }
    #pricing-plan-section .section-price-container { display: flex; align-items: center; }
    #plan-template { border: none; border-radius: 0; overflow: visible; }
    #plan-template > div:not(:last-child) { border-right: none; border-bottom: none; }
    #pro-plan-container, #plus-plan-container, #starter-plan-container, #basic-plan-container, #premium-plan-container { margin-bottom: 1rem; }
    #pro-plan-container { border: none !important; margin: 0 0 1rem 0; }
    #basic-plan-container, #plus-plan-container, #premium-plan-container { border: none; border-radius: 0; overflow: visible; }
    #pro-plan-section, #plus-plan-section, #starter-plan-section, #basic-plan-section, #premium-plan-section { border: 1px solid #d1d5db !important; border-radius: 15px !important; width: 100%; max-width: 100% !important; }
    #pro-plan-section { border: 2px solid #0BD2CD !important; border-radius: 15px !important; overflow: hidden; }
    #pro-plan-section::before { content: 'Most Popular'; display: flex; justify-content: center; align-items: center; background-color: var(--primary); color: var(--black); height: 32px; font-size: 13px; font-weight: 700; }
    #mp-popular-header { display: none; }
}

@media (max-width: 385px) {
    #pricing-plan-section .section-head { height: auto; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #pricing-plan-section { margin-top: 3rem; padding: 0 1rem; }
    #pricing-plan-section #pro-plan-container, #plus-plan-container, #starter-plan-container, #basic-plan-container, #premium-plan-container { flex: 1 1 50%; box-sizing: border-box; }
    #pricing-plan-section .annual-pill { display: none; }
    #pricing-plan-section .annual-pill-tablet { display: block; }
    #pricing-plan-section .section-title { margin-bottom: 0; }
    #pricing-plan-section .section-head { padding: 1rem; width: 100%; height: 236.5px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
    #pricing-plan-section .section-head-top { display: flex; width: 100%; justify-content: space-between; }
    #pricing-plan-section .section-head-top div:nth-child(1) { width: 60%; }
    #pricing-plan-section .section-head-top div:nth-child(2) { width: 40%; text-align: right; }
    #pricing-plan-section .section-price-description { line-height: 15px; margin-bottom: 0; }
    #pricing-plan-section .get-started-container { margin-top: 2.5rem; width: 100%; }
    #pricing-plan-section #plus-plan-section { margin-top: 0; }
    #pricing-plan-section #basic-plan-container .feature-section { margin-top: 1rem; }
    #pricing-plan-section .flex-container { display: flex; width: 100%; }
    #pricing-plan-section .flex-container > div { width: 50%; }
    #pricing-plan-section .feature-arrow { display: none; }
}

@media (min-width: 768px) and (max-width: 935px) {
    #pricing-plan-section .section-head-top div:nth-child(1) { width: 228px; }
    #pricing-plan-section .section-head-top div:nth-child(2) { width: 136px; }
}

@media (min-width: 1025px) {
    #mp-popular-header { display: flex; }
    #pricing-plan-section { margin-top: 0; position: relative; }
    #pricing-plan-section .flex-container { display: flex; flex-direction: row; }
    #pricing-plan-section .flex-container > div { flex: 1 1 25%; box-sizing: border-box; }
    #pricing-plan-section #pro-plan-section, #plus-plan-section, #starter-plan-section, #premium-plan-section { margin-top: 0rem; width: auto; }
    #pricing-plan-section #basic-plan-section { margin-top: 0rem; }
    #pricing-plan-section .section-head { height: 300px; display: flex; flex-direction: column; justify-content: space-between; }
    #pricing-plan-section .section-head-top { display: flex; flex-direction: column; justify-content: flex-start; }
    #pricing-plan-section .get-started-container { width: 100%; padding-bottom: 0.5rem; }
    #pricing-plan-section .section-price-container { display: flex; align-items: center; flex-wrap: wrap; }
    #pricing-plan-section .annual-pill-tablet { display: none; }
    #pricing-plan-section #pro-plan-container, #plus-plan-container, #starter-plan-container, #basic-plan-container, #premium-plan-container { display: block; width: 25%; }
    #pricing-plan-section #pro-plan-container { display: flex; flex-direction: column; }
    #pricing-plan-section #basic-plan-container .feature-section { margin-top: 1rem; }
}

@media (min-width: 1025px) and (max-width: 1080px) {
    #pricing-plan-section .section-description { font-size: 14px; }
    #pricing-plan-section .plan-description { padding: .5rem; margin-bottom: .5rem; }
    #pricing-plan-section .feature-item-header { padding: 0.35rem 0.5rem; }
    #pricing-plan-section .line-break { margin: 0; padding: 0; width: 100%; }
}

@media (min-width: 1025px) and (max-width: 1268px) {
    #pricing-plan-section .transaction-fee, #pricing-plan-section .admin-count { font-size: 14px; }
    #pricing-plan-section .section-price-description { font-size: 14px; margin-bottom: 0; }
    div.feature-section > ul > li { font-size: 13px; }
}

@media (min-width: 1025px) and (max-width: 1373px){
    #pricing-plan-section .section-price-container { width: 222px; }
}

@media (min-width: 1194px) and (max-width: 1227px) {
    #pricing-plan-section .section-head-top { width: 240.5px; }
}

@media (min-width: 1280px) and (max-width: 1500px) {
    #pricing-plan-section .section-head { padding: 1.5rem; height: 310px; display: flex; flex-direction: column; justify-content: space-between; }
    #pricing-plan-section .fee-admin-section { padding: .75rem 1.5rem; }
    #pricing-plan-section .plan-description { padding: .75rem 1.5rem; }
    #pricing-plan-section .feature-item-header { padding: 12px 1.5rem; }
    #pricing-plan-section .sub-feature-list { padding: 0 1.5rem 0.5rem 2.75rem; }
    #pricing-plan-section .line-break { margin: 0 1.5rem; padding: 0 1.5rem; width: 80%; }
}

@media (min-width: 1501px) {
    #pricing-plan-section .section-head { padding: 2rem; height: 310px; display: flex; flex-direction: column; justify-content: space-between; }
    #pricing-plan-section .fee-admin-section { padding: 1rem 2rem; }
    #pricing-plan-section .plan-description { padding: 1rem 2rem; }
    #pricing-plan-section .feature-item-header { padding: 12px 2rem; }
    #pricing-plan-section .sub-feature-list { padding: 0 2rem 0.5rem 3.25rem; }
    #pricing-plan-section .line-break { margin: 0 2rem; padding: 0 2rem; width: 80%; }
}