@media only screen and (min-width: 768px) {
    .container-kol {
        width: 390px;
    }
}

@media only screen and (max-width: 640px) {
    .container-kol {
        max-width: 640px;
    }
}

.container-kol {
    margin: auto;
    position: relative;
    background: linear-gradient(168deg, #233379 -5.51%, #08768F 100.94%);
    min-height: 100vh;
    overflow: hidden;
}

/* header */
.text-header {
    color: #1E1E1E;
    font-size: 20px;
    font-weight: 600;
    line-height: 120%;
}

.text-header-menu {
    color: white;
    font-size: 14px;
    font-weight: 600;
    line-height: 120%;
}

.text-header-menu > .customer-name {
    color: white;
    font-size: 12px;
    font-weight: 400;
    line-height: 120%;
    padding-top: 0.25rem;
}

/* input */
div.form-group label {
    color: #1E1E1E;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 12px;
}

small.form-text {
    color: #959595;
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
}

.section-title {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 120%;
}

.section-value {
    color: #3D3D3D;
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.section-value-poin {
    color: #3D3D3D;
    text-align: justify;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.total-poin {
    color: #3D3D3D;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.section {
    margin-bottom: 24px !important;
}

input[type=radio], select {
    padding: 14px 12px !important;
    background: #FFF !important;
    color: #1E1E1E !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 120% !important;
}
input::placeholder {
    color: #B0AEAE !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 120% !important;
}

.btn-custom {
    padding: 16px 24px !important;
    border-radius: 32px !important;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 120%;
    background: linear-gradient(158.14deg, #233379 55.69%, #08768F 122.07%);
    color: #fff;
    border: none;
}

.btn-outline-custom {
    padding: 16px 24px !important;
    border-radius: 32px !important;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 120%;
    background: white;
    color: #233379;
    border: 1px solid #233379;
}
.btn-outline-custom:hover {
    border: 1px solid #233379;
}
.card {
    min-height: 100vh;
    margin-bottom: 0px !important;
}
.card-header {
    justify-content: center !important;
    gap: 2rem;
}
.card-header-menu {
    justify-content: start !important;
    gap: 1rem !important;

}
.card-body {
    min-height: 100% !important;
    border-top-left-radius: 1.5rem; /* 24px */
    border-top-right-radius: 1.5rem; /* 24px */
    padding-bottom: 0px;
}
.back-icon {
    width: 24px;
    height: 24px;
}

.container-kol .modal {
    position: absolute;
}

label.required:after {
    content:" *";
    color:red;
}

.radio-point input[type="radio"]{
    opacity: 0;
    position: fixed;
    width: 0;
}

.radio-point label {
    display: inline-block;
    background-color: linear-gradient(180deg, #24347A 0%, #175484 100%);
    color: #233A7C;
    min-width: 100px;
    padding: 16px 24px;
    font-size: 16px;
    border: 1.2px solid #000;
    border-radius: 32px;
    border-color: #233A7C;
}

.radio-point label:hover {
    background-color: #233A7C;
    color: #FFFFFF;
    cursor: pointer;
}

.radio-point input[type="radio"]:checked + label {
    background-color: #233A7C;
    border-color: #233A7C;
    color: #FFFFFF;
}

.radio-channel input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.radio-channel label {
    display: inline-block;
    background-color: linear-gradient(180deg, #24347A 0%, #175484 100%);
    color: #FFFFFF;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    /* border: 1.2px solid #24347A; */
    border-radius: 32px;
}

.radio-channel label:hover {
    background-color: #FFFFFF;
    color: #24347A;
    cursor: pointer;
}

.radio-channel input[type="radio"]:checked + label {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #233A7C;
}

.done-message {
    color: #1E1E1E;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}
.done-img {
    width: 84px;
    height: 84px;
}
.border-32 {
    border-radius: 32px;
}

/* page mutasi */

.radio-activity input[type="radio"] {
    opacity: 0;
    position: fixed;
    color: #24347A
}

.radio-activity label {
    display: inline-block;
    background-color: #24347A;
    color: #FFFFFF;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    padding: 8px 24px;
    border-radius: 32px;
}

.radio-activity label:hover {
    background-color: #FFFFFF;
    color: #24347A;
    cursor: pointer;
}

.radio-activity input[type="radio"]:checked + label {
    background-color: #FFF;
    color: #24347A;
}

.elipse {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.verified {
    background-color: #29A335;
}
.text-green {
    color: #29A335;
}

.text-point {
    color: #1E1E1E;
    text-align: justify;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

.text-date {
    color: #9F9595;
    text-align: justify;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.text-post-media {
    color: #1E1E1E;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.text-status {
    text-align: justify;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.remaining-point {
    color: #9F9595;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}
.point-redemption {
    color: #3D3D3D;
    text-align: justify;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 48px */
}

.btn-history-cancel {
    border: none;
    margin: 0;
    padding: 0;
    background: none;
}

.forgot-password-link {
    text-align: end;
}

.forgot-password-link > a {
    color: #233379;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}

.forgot-password-link > a:hover {
    text-decoration-line: underline;
    color: #233379;
}

.btn-primary,
.form-check-input:checked {
    background-color: #233379;
}
.form-check-input:checked {
    border-color: #233379;
}

.login-form-container {
    height: auto !important;
    flex: unset !important;
    padding-bottom: 2rem;
}

.mypoint-bg-gradient {
    background: linear-gradient(180deg, #24347A 0%, #175484 100%);
}

.resend-otp:hover {
    text-decoration: underline !important;
    text-underline-offset: 2;
}