:root {
    --brand-yellow: #fcbe03;
    --brand-dark: #2c2c2c;
    --brand-gray: #f5f6f8;
    --brand-blue: #1b43b1;
    --bs-btn-active-border-color: var(--brand-yellow);
    --bs-btn-active-bg: #fdf8e8;
    --bs-border-radius-pill: 9px;
}


.breadcrumb-text a {
    text-decoration: none;
    color: var(--brand-blue);
}

.sidebar {
    background: var(--brand-gray);
    overflow: hidden
}

.sidebar-title {
    background: var(--brand-yellow);
    background-image: url("partial-logo.png");
    background-repeat: no-repeat;
    background-position: right top;
    font-weight: bold;
    font-size: larger;
    padding: 16px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px
}

.sidebar-item {
    padding: 1.5rem .75rem;
    color: #555;
    border-radius: 10px;
    margin-bottom: .25rem;
    margin-right: -25px;
    transition: background-color .2s ease
}

.sidebar-item::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #000;
    background: transparent;
    margin-right: 8px;
    vertical-align: middle;
}

.sidebar-item.active {
    font-weight: 600;
    color: #222;
    background: #fff7d6;
    border: 1px solid var(--brand-yellow)
}

.sidebar-item.active::before {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
}

.border-brand {
    border-color: var(--brand-yellow) !important
}

.payment-select {
    margin-bottom: 24px;
    border: 2px solid #c2c2c2;
    border-radius: 12px;
}

.btn-outline-brand {
    font-size: small;
    color: #333
}

.btn-outline-brand:hover,
.btn-outline-brand:focus,
.btn-check:checked + .btn-outline-brand {
    background-color: #fff7d6;
    border-color: var(--brand-yellow);
    color: #000
}

.btn-brand {
    background: #fdf8e8;
    border: 1px solid #fcbe03;
    color: #000;
    border-radius: 999px
}

.btn-brand:hover {
    background: #ffd863
}

.footer {
    background: var(--brand-yellow);
}

.form-control-md {
    background-color: #f3f4f6
}


.input-group-text {
    background: #fff
}

.dual-divider {
    --left-len: 120px;
    margin-bottom: 24px;
    height: 2px;
    width: 100%;
    background: linear-gradient(to right,
            var(--brand-blue) 0,
            var(--brand-blue) var(--left-len),
            var(--brand-yellow) var(--left-len),
            var(--brand-yellow) 100%)
}

.alipay {
    background-image: url("alipay.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 120px;
    border-radius: 6px;
}

.wechat {
    background-image: url("wechat.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 120px;
    border-radius: 6px;
}

main {
    margin-top: 24px;
}

section {
    margin-left: 3%;
}

h5 {
    font-size: large;
    font-weight: bold;
}

.text-ms {
    color: var(--brand-blue);
}

.form-label {
    font-size: medium;
    font-weight: bold;
}

.secondary-text {
    color: #555;
}

.text-ss {
    font-size: 9px;
    color: #555;
    line-height: 1.5;
    margin-bottom: -5px;
}

@media (min-width: 768px) {
    .narrow-input {
        width: 75%;
        margin-left: auto;
    }
}

.form-label.with-icon::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' fill='%23F7D228' stroke='none'/%3E%3Crect x='2' y='14' width='8' height='8' fill='%231E3E97'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    margin-right: 6px;
    margin-top: -1px;
    vertical-align: middle;
}

.nav-link {
    margin-right: -8px;
}

.steps-pills .nav-link-f.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='280' width='1230'%3E%3Cpath d='M50 25 Q25 25 25 50 L25 250 Q25 275 50 275 L1075 275 Q1100 275 1125 250 L1200 175 Q1225 150 1200 125 L1125 50 Q1100 25 1075 25 Z' stroke='%23fcbe03' stroke-width='5' fill='%23fdf8e8'/%3E%3C/svg%3E");
}

.steps-pills .nav-link-nf.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='280' width='1230'%3E%3Cpath d='M50 25 Q0 25 25 50 L100 125 Q125 150 100 175 L25 250 Q0 275 50 275 L1075 275 Q1100 275 1125 250 L1200 175 Q1225 150 1200 125 L1125 50 Q1100 25 1075 25 Z' stroke='%23fcbe03' stroke-width='5' fill='%23fdf8e8'/%3E%3C/svg%3E");
}

.steps-pills .nav-link-f {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='280' width='1230'%3E%3Cpath d='M50 25 Q25 25 25 50 L25 250 Q25 275 50 275 L1075 275 Q1100 275 1125 250 L1200 175 Q1225 150 1200 125 L1125 50 Q1100 25 1075 25 Z' stroke='%23f1f1f1' stroke-width='5' fill='%23f1f1f1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    color: #000;
    border: 0;
    padding: 12px 36px;
    min-height: 48px;
}

.steps-pills .nav-link-nf {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='280' width='1230'%3E%3Cpath d='M50 25 Q0 25 25 50 L100 125 Q125 150 100 175 L25 250 Q0 275 50 275 L1075 275 Q1100 275 1125 250 L1200 175 Q1225 150 1200 125 L1125 50 Q1100 25 1075 25 Z' stroke='%23f1f1f1' stroke-width='5' fill='%23f1f1f1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    color: #000;
    border: 0;
    padding: 12px 36px;
    min-height: 48px;
}

.steps-pills .nav-link.active {
    background-color: transparent;
    color: #000;
}

.steps-pills .nav-link .tri-right,
.steps-pills .nav-link .tri-right-border {
    display: none;
}