.info-banner {display: flex; flex-direction: row; align-items: start; width: 100%; border-radius: 12px; border: 1px solid var(--blue-300, #8CC5F2); background: var(--blue-200, #CCE8FF); padding: 1rem; margin-bottom: 20px; color: var(--blue-700, #003865); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 120%;} .info-banner img {font-size: 1rem; margin-top: 0.25rem; margin-right: 0.5rem;} .payment-intro-container {margin-bottom: 1.5rem;} .payment-header {font-size: 1.25px; margin-bottom: 0.5rem; color: #36383A;} .payment-desc {font-size: 14px; line-height: 150%; color: #36383A;} .payment-error-box {background-color: #FFF3CD; border: 1px solid #FFCD39; padding: 24px 32px; border-radius: 12px; color: #664D03; margin: 28px 0 30px 0;} .payment-error-box .container-box {display: inline-block; width: 100%; max-width: 100%;} .payment-error-box h4 {float: left; font-family: var(--laya-header-font-family); font-size: 24px; color: #664D03; margin-bottom: 20px; max-width: 90%;} .payment-error-box .notification-icon-desktop {display: inline-block; float: right;} .payment-error-box .notification-icon-mobile {display: none; float: right;} .payment-error-box p {margin-bottom: 0; font-weight: 600; line-height: 150%; font-size: 14px; color: #664D03;} .payment-error-box ul {margin-top: 16px; margin-bottom: 0; padding-left: 20px;} .payment-error-box li {list-style: disc; font-size: 14px; line-height: 150%; margin-bottom: 8px; color: #664D03;} .notification-icon {float: right; font-size: 20px; color: #664D03;} @media (max-width: 991px){.payment-error-box {padding: 24px; margin-top: 10px;} .payment-error-box h4 {font-size: 20px;} .payment-error-box p {font-size: 14px;} .payment-error-box li {font-size: 14px;} .notification-icon {width: 20px; height: 20px;} .payment-error-box .notification-icon-desktop {display: none;} .payment-error-box .notification-icon-mobile {display: inline-block;}} .payment-info {margin-bottom: 1rem; border-radius: 12px; border: 1px solid var(--neutrals-400-input-fields, #CFD1D3); background: var(--neutrals-100, #FAFAFA); padding: 1.5rem;} .payment-info-holder a {text-decoration: underline;} .payment-info-holder h5 {font-family: var(--laya-header-font-family); color: var(--text-grey-800-primary, #36383A); font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 120%; margin-bottom: 1rem;} .payment-info-holder .separator {margin: 1rem 0; height: 1px; background-color: var(--neutrals-300, #EAEAEB);} .payment-info-holder ol {padding-left: 1.25rem;} .payment-info-holder p, .payment-info-holder ol > li, .payment-info-holder ul > li {color: var(--text-grey-800-primary, #36383A); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 120%;} .payment-info-holder ul > li {margin-bottom: 0.25rem;} .amounts-section {display: flex; padding: 16px; flex-direction: row; align-items: start; gap: 1rem; flex: 1 0 0; border-radius: 14px; background: #fff; box-shadow: 0px 1px 4px 0px rgba(79, 108, 129, 0.16); margin-bottom: 1.5rem;} .amounts-section h5 {margin-bottom: 0;} .amounts-section p {color: var(--text-grey-700-secondary, #53565A); font-feature-settings: 'clig' off, 'liga' off; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 120%; margin-bottom: 0.25rem;} .amounts-section p.allow-2-business-days {margin-top: 1rem;} .amount-row {display: flex; flex-direction: row; align-items: center; gap: 0.5rem;} .amount-row p {color: var(--text-grey-800-primary, #36383A); font-feature-settings: 'clig' off, 'liga' off; font-family: var(--laya-header-font-family); font-size: 1.75rem; font-style: normal; font-weight: 400; line-height: 120%; margin-bottom: 0;} .amount-row img {cursor: pointer;} .member-details-section {margin-bottom: 1rem;} .member-details-section label {display: inline; vertical-align: bottom; color: var(--text-grey-700-secondary, #53565A); font-family: var(--laya-header-font-family); font-size: 1rem; font-style: normal; font-weight: 700; line-height: 120%;} .member-details-section p {display: inline;} .member-details-section .member-detail:not(:first-child) {padding-top: 0.5rem;} p.thank-you {color: var(--text-grey-700-secondary, #53565A); font-feature-settings: 'clig' off, 'liga' off; font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 20px;} .tooltip .tooltip-inner {text-align: left;} :root {.tooltip {--bs-tooltip-max-width: 340px;}} body {font-size: 13px;} .form-content label {display: inline-block; vertical-align: bottom; color: #00679a; margin-bottom: 0!important; font-weight: 700;} .form-content p {display: inline; vertical-align: bottom;} .form-content input.form-control, .form-content select.form-control {margin-top: 0.15rem;} .form-content .form-group.col-md-12, .form-content .form-group.col-xs-12 {padding-left: 0!important; padding-right: 0!important;} .form-select {border-radius: 0.875rem;} .flex-reset > * {flex: 1 1 auto !important;} .form-group {margin-bottom: 15px;} .form-group.has-error, .form-group.has-error .control-label {color: #a94442;} .form-group.has-error .form-control {border-color: #a94442; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;} .help-block {margin-top: 6px;} .form-grouped-content {width: 100%; display: inline-flex; justify-content: space-between;} @media (max-width: 767px) {.form-grouped-content {display: block;}} .form-container {min-height: 160px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background-color: #fff; padding-bottom: 90px;} .form-title {padding: 25px 15px 15px 0;} .payment-intro-container {margin-bottom: 1.5rem;} .payment-header {font-size: 1.25rem; margin-bottom: 0.5rem; color: #36383A;} .payment-desc {font-size: 14px; line-height: 150%; color: #36383A;} .payment-provider {font-size: 20px; font-weight: bold;} #creditCardRenewal {margin-top: 20px; max-width: 1000px;} .option-disabled {color: #888888;} .option-enabled {color: #555555;} option[value="string:"][disabled] {display: none;} @media only screen and (min-width: 992px){#successmessage{min-height: 400px}} .info {display: inline-flex; align-items: center; gap: 0.5em; margin-left: 0.25em;} .info .fa-circle, .info .fa-exclamation-triangle, .fa-info-circle {color: #00679a;} .info .fa-exclamation-triangle{font-size: 2em;} .info .fa-lg {display: inline-block; font-size: 1rem;} .fa-stack-2x {font-size: 2em;} .input-group-addon.info {width: 1em; height: 1em;} .input-group-addon.info {background-color: transparent; padding: 5px; border: none;} .amount-to-pay-tooltip {position: relative; display: inline-block;} .amount-to-pay-tooltip .tooltip-text {visibility: hidden; width: 320px; color: #fff; background-color: #000; border: 1px solid #000; padding: 8px; border-radius: 4px; position: absolute; z-index: 99; top: 80%; left: 110%; transform: translateY(-50%); opacity: 0; transition: opacity 0.3s ease-in-out;} .amount-to-pay-tooltip .tooltip-text::after {content: ''; position: absolute; top: 40%; right: 100%; transform: rotate(90deg); margin-left: -5px; border-width: 5px; border-style: solid; border-color: #000 transparent transparent transparent;} .amount-to-pay-tooltip:hover .tooltip-text {visibility: visible; opacity: 1;} .amount-to-pay-tooltip .icon {width: 16px; height: 16px; margin-left: 4px; margin-top: -3px;} .owed-section > ul {list-style: none; padding-left: 0;} iframe#app_main {height: 700px; width: 100%;}