/* Colors */
:root {
    --primary-color: #ffffff;
    --secondary-color: #00D067;
    --border-light: #B0B0B0;
    --neutral-dark: #362212;
    --text-dark-primary: #003B20;
    --neutral-light-secondary: #D2FFED;
    --card-xs-text-color: #3D3D3D;
    --default-background-primary-color: #ECFFF6;
    --default-background-light-color: #00603947;
    --default-background-dark-color: #006039;
    --neutral-background-light-color: #00A254;
    --card--tag-color: #F2EFCF;
    --neutral-dark-gray: #888888;
    /* Default text color */
    --text-secondary: #ffffff;
    --text-primary: #6D6D6D;
    /* Secondary text color */
}

/* Usage */
.btn-outlined-custom {
    border: 2px solid #00D067;
    border-radius: inherit;
    background: transparent;
    color: #00D067 !important;
    height: 59px;
    width: 174px;
    display: flex;
    font-weight: bold;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background-color 0.5s ease;
    border-radius: 100px !important;
}

.btn-outlined-custom:hover {
    background: #00D067;
    color: black !important;
}

.btn-outlined:hover {
    background-color: transparent;
}

.btn-neutral-light {
    background-color: var(--neutral-light-secondary) !important;
    border-color: var(--neutral-light-secondary) !important;
    border-radius: 5px;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    color: var(--mhr) !important;
    font-size: 18px;
    font-weight: bold;
    width: 161px;
    height: 56px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.btn-neutral-light:hover {
    color: var(--mhr);
    border: none;
}

.btn-neutral-light:focus {
    box-shadow: inherit;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--neutral-dark);
}

.btn-primary:hover {
    color: var(--neutral-dark);
}

.btn-primary:focus {
    border: none;
    box-shadow: inherit !important;
    color: var(--neutral-dark) !important;
}

.btn-primary:active {
    border: none;
    box-shadow: inherit !important;
    color: var(--neutral-dark) !important;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--text-dark-primary);
    border-radius: 5px;
    font-weight: 700;
    font-size: 18px;
    /* height: 59px; */
    height: 50px;
    text-transform: uppercase;
}

.btn-secondary:hover {
    color: var(--text-dark-primary);
    background-color: #fff !important;
}

.btn-secondary:focus {
    border: none;
    box-shadow: inherit;
    color: var(--text-dark-primary);
}

.btn-secondary:active {
    border: none;
    box-shadow: inherit !important;
    color: var(--text-dark-primary) !important;
}

.btn-outlined {
    background-color: transparent;
    border-color: var(--text-secondary) !important;
    color: var(--text-secondary) !important;
    border-radius: inherit !important;
}

.btn-outlined:hover {
    color: var(--text-secondary);
}

.btn-outlined:focus {
    box-shadow: inherit;
    color: var(--text-secondary);
}

.btn-outlined:active {
    box-shadow: inherit;
    color: var(--text-secondary);
}

/* Additional text colors for different tags */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-secondary);
    /* Text color for headings */
}

h4 {
    color: var(--text-dark-primary);
}

p {
    color: var(--text-secondary);
    /* Text color for paragraphs */
}

a {
    color: var(--text-secondary);
    /* Text color for links */
}

label {
    color: var(--neutral-dark);
}

pre {
    color: var(--text-primary);
}