:root {
    --app-danger: #dc3545;
    --app-danger-soft: #f8d7da;
    --app-grey-softer: #fafafa;
    --app-grey-soft: #f0f0f0;
    --app-grey: #B2B2B2;
    --app-grey-strong: #666666;
    --app-white: #fff;
    --app-background: #ffffff;
    --app-text-black-bold: #00000075;
    --app-background-image: url('/images/app-background.svg');
    --app-table-grey: #F7F6FE;
    --app-table-grey-pagi: #717680;
    --app-table-pink-pagi: #FFF0E6;
    --app-blue-button: #099697;
    --app-blue-button-hover: #06696A;
    --app-orange-button: #FF6B00;
    --app-card-header: #099697;
    --app-orange: #FF6B00;
    --app-red: #FF0000;
    --app-orange-hover: #B34B00;
    --app-download-red: #F04438;
    --app-download-blue: #2E90FA;
    --app-download-green: #3EBF83;
    --app-download-orange: #F79009;
    --app-red-hover: #A83027;
    --app-blue-hover: #2065AF;
    --app-disabled: #E0E0E0;
    --app-green-hover: #107D4A;
    --app-download-orange-hover: #AD6506;
    --app-orange-hover-2: #FFC296;
    --app-mint-soft: #e6f5f5;
    --app-black: #000000;
    --app-orange: #ff8500;
    --app-text-otp: #44A095;
    --app-text-bantuan: #2FC5FB;
    --app-brown: #D88000;
}
.text-brown{
    color: var(--app-brown);
}
.bg-green {
    background-color: var(--app-download-green);
}

.c-blue-otp {
    color: var(--app-text-otp)
}

.c-blue {
    color: var(--app-blue-button)
}
.text-right{
    text-align: right !important;
}

.c-orange {
    color: var(--app-orange);
}
.bg-orange {
    background-color: var(--app-orange) !important;
}
.w-98 {
    width: 98% !important;
}
.w-300 {
    width: 300px;
}
.w-290 {
    width: 290px;
}
.h-400 {
    height: 400px;
}
.h-500{
    height: 500px !important;
}
.w-40 {
    width: 40px !important;
}
.h-40{
    height: 40px !important; 
}
.w-50{
    width: 50px !important;
}
.h-50{
    height: 50px !important; 
}
.c-red {
    color: var(--app-red)
}
.ml1-mr2 {
    margin-left: 1px;
    /*margin-right: 2px;*/
}
.bg-blue {
    color: #fff;
    background-color: var(--app-blue-button)
}

.font-inter {
    font-family: Inter,'Open Sans',Arial,Helvetica,sans-serif
}

.font-open-sans {
    font-family: 'Open Sans',Inter,Arial,Helvetica,sans-serif
}

.hover--text-app-primary:hover, .text-app-primary {
    color: var(--app-primary)
}

.bg-btn-app-orange {
    background-color: var(--app-orange);
    color: var(--app-white)
}

.text-app-orange {
    color: var(--app-orange);
    background-color: #fff;
    border: 2px solid var(--app-orange)
}

.bg-btn-app-orange:hover {
    background-color: var(--app-orange-hover);
    color: var(--app-white)
}

.bg-btn-app-orange:focus {
    outline: 0;
    background-color: var(--app-orange);
    color: var(--app-white)
}

.text-app-orange:hover {
    color: var(--app-orange);
    background-color: var(--app-orange-hover-2);
    border: 2px solid var(--app-orange)
}

.bg-btn-app-orange:active, .text-app-orange:active {
    background-color: var(--app-accent-primary);
    color: var(--app-white)
}

.bg-btn-app-primary {
    background-color: var(--app-blue-button) !important
}

    .bg-btn-app-primary:hover {
        background-color: var(--app-blue-button)
    }

.bg-app-primary, .hover--bg-app-primary:hover {
    background-color: var(--app-primary)
}

.border-app-primary {
    border: solid 1px var(--app-primary)
}

.border-bold-app-primary {
    border: solid 4px var(--app-primary)
}

.border-top-bold-app-primary {
    border-top: 4px solid;
    border-top-color: var(--app-primary) !important
}

.bg-app-primary-soft, .hover--bg-app-primary-soft:hover {
    background-color: var(--app-primary-soft)
}

.hover--border-app-primary:hover {
    border: solid 1px var(--app-primary)
}

.hover--text-app-primary-soft:hover, .text-app-primary-soft {
    color: var(--app-primary-soft)
}

.text-white {
    color: var(--app-white) !important;
}

.bg-app-secondary, .hover--bg-app-secondary:hover {
    background-color: var(--app-secondary)
}

.hover--text-app-secondary:hover, .text-app-secondary {
    color: var(--app-secondary)
}

.bg-app-secondary-soft, .hover--bg-app-secondary-soft:hover {
    background-color: var(--app-secondary-soft)
}

.hover--text-app-secondary-soft:hover, .text-app-secondary-soft {
    color: var(--app-secondary-soft)
}

.bg-app-tertiary, .hover--bg-app-tertiary:hover {
    background-color: var(--app-tertiary)
}

.hover--text-app-tertiary:hover, .text-app-tertiary {
    color: var(--app-tertiary)
}

.bg-app-tertiary-soft, .hover--bg-app-tertiary-soft:hover {
    background-color: var(--app-tertiary-soft)
}

.hover--text-app-tertiary-soft:hover, .text-app-tertiary-soft {
    color: var(--app-tertiary-soft)
}

.bg-app-accent-primary, .hover--bg-app-accent-primary:hover {
    background-color: var(--app-accent-primary)
}

.hover--text-app-accent-primary:hover, .text-app-accent-primary {
    color: var(--app-accent-primary)
}

.bg-app-accent-primary-soft, .hover--bg-app-accent-primary-soft:hover {
    background-color: var(--app-accent-primary-soft)
}

.hover--text-app-accent-primary-soft:hover, .text-app-accent-primary-soft {
    color: var(--app-accent-primary-soft)
}

.bg-app-accent-secondary, .hover--bg-app-accent-secondary:hover {
    background-color: var(--app-accent-secondary)
}

.hover--text-app-accent-secondary:hover, .text-app-accent-secondary {
    color: var(--app-accent-secondary)
}

.bg-app-accent-secondary-soft, .hover--bg-app-accent-secondary-soft:hover {
    background-color: var(--app-accent-secondary-soft)
}

.hover--text-app-accent-secondary-soft:hover, .text-app-accent-secondary-soft {
    color: var(--app-accent-secondary-soft)
}

.bg-app-accent-tertiary, .hover--bg-app-accent-tertiary:hover {
    background-color: var(--app-accent-tertiary)
}

.hover--text-app-accent-tertiary:hover, .text-app-accent-tertiary {
    color: var(--app-accent-tertiary)
}

.bg-app-accent-tertiary-soft, .hover--bg-app-accent-tertiary-soft:hover {
    background-color: var(--app-accent-tertiary-soft)
}

.hover--text-app-accent-tertiary-soft:hover, .text-app-accent-tertiary-soft {
    color: var(--app-accent-tertiary-soft)
}

.bg-app-grey, .hover--bg-app-grey:hover {
    background-color: var(--app-grey)
}

.hover--text-white:hover {
    color: #fff
}

.hover--text-black:hover {
    color: #000
}

.hover--text-app-grey:hover, .text-app-grey {
    color: var(--app-grey)
}

.bg-app-grey-soft, .hover--bg-app-grey-soft:hover {
    background-color: var(--app-grey-soft)
}

.hover--text-app-grey-soft:hover, .text-app-grey-soft {
    color: var(--app-grey-soft)
}

.hover--bg-app-mint-soft:hover {
    background-color: var(--app-mint-soft)
}

.bg-app-grey-strong, .hover--bg-app-grey-strong:hover {
    background-color: var(--app-grey-strong)
}

.active--bg-app-mint-soft:active {
    color: var(--app-black)
}

.hover--text-app-grey-strong:hover, .text-app-grey-strong {
    color: var(--app-grey-strong)
}

.bg-app-grey-softer, .hover--bg-app-grey-softer:hover {
    background-color: var(--app-grey-softer)
}

.hover--text-app-grey-softer:hover, .text-app-grey-softer {
    color: var(--app-grey-softer)
}

.hover--text-app-danger:hover, .text-app-danger {
    color: var(--app-danger)
}

.bg-app-danger, .hover--bg-app-danger:hover {
    background-color: var(--app-danger)
}

.hover--text-app-danger-soft:hover, .text-app-danger-soft {
    color: var(--app-danger-soft)
}

.bg-app-danger-soft, .hover--bg-app-danger-soft:hover {
    background-color: var(--app-danger-soft)
}

.text-xs {
    font-size: .7rem
}

.text.sm {
    font-size: .9rem
}

.text-lg {
    font-size: 1.25rem
}

.text-xl {
    font-size: 1.5rem
}

.bg-app-background {
    background-image: var(--app-background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.otp-style {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    border-radius: 50%;
    background-color: rgb(240, 240, 240);
    border: none;
    outline: none;
}