Buttons

  1. Buttons usage guide
  1. Home
  2. Buttons
Normal Buttons
  1. Font: Nunito Sans
  2. Font Size: 13px
  3. Background Color: #55b147
  4. Line Height: 1.3
  5. Button Size: Small
Example:

Normal:
R=85 G=177 B=71
HEX #55b147

Hover:
R=123 G=182 B=97
HEX #7bb661

Active:
R=81 G=150 B=73
HEX #519649

Copy HTML here
 
<button class="btn btn-sm btn-primary rounded-1" type="button" id="button-addon2">Display</button>
Copy CSS here
 
.btn-primary {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.btn {
    font-size: var(--button-font-size);
    border-radius: var(--tab-border-radius);
    padding: 0.312rem 0.875rem;
    margin-bottom: 2px;
}
.btn-primary {
    --bs-btn-active-bg: #519649;
    --bs-btn-active-border-color: #519649;
}
.btn-primary:hover {
    color: #fff;
    background-color: #7bb661;
    border-color: #7bb661;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .btn-primary:active {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
Normal Button with dropdown
  1. Font: Nunito Sans
  2. Font Size: 13px
  3. Background Color: #55b147
  4. Line Height: 1.3
  5. Button Size: Small
Example:

Normal:
R=85 G=177 B=71
HEX #55b147

Hover:
R=123 G=182 B=97
HEX #7bb661

Active:
R=81 G=150 B=73
HEX #519649

Copy HTML here
 
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Export Report</button>
<ul class="dropdown-menu" style="">
    <li><a href="" class="dropdown-item">XLSX</a></li>
    <li><a href="" class="dropdown-item">CSV</a></li>
</ul>
Copy CSS here
 
.btn-primary {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.btn {
    font-size: var(--button-font-size);
    border-radius: var(--tab-border-radius);
    padding: 0.312rem 0.875rem;
    margin-bottom: 2px;
}
.btn-primary {
    --bs-btn-active-bg: #519649;
    --bs-btn-active-border-color: #519649;
}
.btn-primary:hover {
    color: #fff;
    background-color: #7bb661;
    border-color: #7bb661;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .btn-primary:active {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
Normal action button for table
  1. Font: Nunito Sans
  2. Font Size: 13px
  3. Background Color: #333333
  4. Line Height: 1.3
  5. Button Size: Small
Example:

Normal:
R=51 G=51 B=51
HEX #333333

Hover:
R=85 G=177 B=71
HEX #55b147

Active:
R=255 G=255 B=255
HEX #ffffff

Copy HTML here
 
<a role="button" class="dropdown-toggle btn btn-sm btn-default" id="a1" data-bs-toggle="dropdown" aria-expanded="false">Action </a>
<ul class="dropdown-menu" aria-labelledby="a1" data-popper-placement="left-start"><li><a class="dropdown-item">Edit</a></li></ul>
Copy CSS here
 
.btn-default {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-group-sm > .btn, .btn-sm {
    line-height: 1.3;
    font-size: var(--button-fontsize-sm);
}
.btn {s
    font-size: var(--button-font-size);
    border-radius: var(--tab-border-radius);
    padding: 0.312rem 0.875rem;
    margin-bottom: 2px;
}
.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}
.btn-default:hover {
    color: #fff;
    background-color: #7bb661;
    border-color: #7bb661;
}
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: fit-content;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: var(--text-xs);
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--grey-light);
    border-radius: 0.35rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    cursor: pointer;
}
Extra small action button for table
  1. Font: Nunito Sans
  2. Font Size: 11px
  3. Background Color: #333333
  4. Button Size: Extra Small
Example:

Normal:
R=51 G=51 B=51
HEX #333333

Hover:
R=85 G=177 B=71
HEX #55b147

Active:
R=255 G=255 B=255
HEX #ffffff

Copy HTML here
 
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Actions</button>
<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="/Ops/EmployerEdit/1590" onclick="DisplayPageLoader();">Edit</a></li>
    <li><button class="dropdown-item" type="button" onclick="EmployerTerminate(1590);">Terminate</button></li>
</ul>
Copy CSS here
 
.btn-default {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-group-xs > .btn, .btn-xs
Specificity: (0,2,0)
 {
    padding: 0.2rem 0.5rem;
    font-size: 11px;
    line-height: 11px;
}
.btn-default:hover {
    color: #fff;
    background-color: #7bb661;
    border-color: #7bb661;
}
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
Hide/Show Panel Button
Hide Panel
  1. Font: Nunito Sans
  2. Font Size: 11px
  3. Background Color: #ffffff
  4. Button Size: Extra Small
Example:

Normal:
R=255 G=255 B=255
HEX #ffffff

Hover:
R=51 G=51 B=51
HEX #555555

Active:
R=85 G=177 B=71
HEX #333333

Copy HTML here
 
<a class="btn btn-xs btn-outline-secondary toggle-text-t" id="RightPanelToggle" data-bs-toggle="collapse" href="#r-sidebar" role="button" aria-expanded="true" aria-controls="r-sidebar">Hide Panel</a>
Copy CSS here
 
.btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--grey01);
}
.btn-group-xs > .btn, .btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 11px;
    line-height: 11px;
}
.btn-outline-secondary:hover
Specificity: (0,2,0)
 {
    color: #fff;
    background-color: #555555;
    border-color: #555555;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}
Cancel/Back Button
  1. Font: Nunito Sans
  2. Font Size: 13px
  3. Background Color: #ffffff
  4. Color: #f555555
  5. Line Height: 13px
  6. Button Size: Small
Example:

Normal:
R=238 G=238 B=238
HEX #eeeeee

Hover:
R=85 G=85 B=85
HEX #555555

Active:
R=204 G=204 B=204
HEX #cccccc

Copy HTML here
<button class="btn btn-sm btn-secondary">Back</button>
Copy CSS here
 
.btn-secondary {
    color: var(--secondary-color);
    background-color: var(--grey-light);
    border-color: var(--border-color);
}
.btn-group-sm > .btn, .btn-sm {
    line-height: 1.3;
    font-size: var(--button-fontsize-sm);
}
.btn-secondary:hover {
    color: var(--ivory-white);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
    color: #000;
    background-color: #cccccc;
    border-color: #bdbdbd;
}
Tabs
  1. Font: Nunito Sans
  2. Font Size: 12px
  3. Background Color: #ffffff
  4. Color: #f555555
  5. Text transformation: uppercase
Example:

Normal:
HEX #ffffff

Active:
Bottom border: #55b147

Copy HTML here
 
<div class="row">
    <div class="col-12 col-lg-12 slide-tab">
        <ul class="nav nav-tabs d-flex align-items-end flex-nowrap" id="employeedashTab" role="tablist">
            <li class="nav-item d-inline-flex " style="flex-basis:100%" role="presentation">
                <a class="nav-link w-100 active" id="EmployeeAcc-tab" data-bs-toggle="tab" href="#EmployeeAccTab" role="tab" aria-controls="EmployeeAcc" aria-selected="true">
                    My Account
                </a>
            </li>
            <li class="nav-item d-inline-flex " style="flex-basis:100%" role="presentation">
                <a class="nav-link w-100" id="Manage-tab" data-bs-toggle="tab" href="#ManageTab" role="tab" aria-controls="Manage" aria-selected="false" tabindex="-1">Cards</a>
            </li>
            <li class="nav-item d-inline-flex " style="flex-basis:100%" role="presentation">
                <a class="nav-link w-100" id="Contact-tab" data-bs-toggle="tab" href="#ContactTab" role="tab" aria-controls="Contact" aria-selected="false" tabindex="-1">Enquire</a>
            </li>
        </ul>
    </div>
</div>
Copy CSS here
 
.slide-tab > .nav.nav-tabs {
    border-bottom: 0px solid #dddfeb;
    margin-bottom: 5px;
    display: block;
}
.slide-tab > .nav-tabs .nav-link.active {
    border: 0px solid transparent;
    background-color: transparent !important;
}
.slide-tab > .nav-tabs li a:not(:empty):active, .slide-tab > .nav-tabs li:not(.active) a {
    background-color: transparent;
    color: var(--secondary-color);
    border: 0px;
    position: relative;
    text-transform: uppercase;
    padding: 3px 5px !important;
    font-weight: bold;
    text-align: center;
}
Mobile buttons
Overview Change Add Substantiation Statement
  1. Font: Nunito Sans
  2. Font Size: 11px
  3. Background Color: #55b147
  4. Color: #ffffff
Example:

Normal:
HEX #55b147

Hover:
HEX #7bb661

Active:
HEX #519649

Copy HTML here
 
<button class="btn btn-xs btn-primary dropdown-toggle" type="button" id="mortgage-menu" aria-haspopup="true" data-bs-toggle="dropdown" aria-expanded="false">
    <i class="sa sa-edit-02"></i>
</button>
<div class="dropdown-menu" aria-labelledby="mortgage-menu" style="">
    <a class="dropdown-item" onclick="LoadPartialOrActionMethod('/Employee/CappedItem','AccountDataPlaceholder')">Overview</a>
    <a class="dropdown-item" onclick="LoadPartialOrActionMethod('/Employee/RequestChange','AccountDataPlaceholder')">Change</a>
    <a class="dropdown-item" onclick="LoadPartialOrActionMethod('/Employee/SubsRemaining','AccountDataPlaceholder')">Add Substantiation</a>
    <a class="dropdown-item" onclick="LoadPartialOrActionMethod('/Employee/ViewStatement','AccountDataPlaceholder')">Statement</a>
</div>
Copy CSS here
 
.btn-primary {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.btn-primary:hover {
    color: #fff;
    background-color: #7bb661;
    border-color: #7bb661;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .btn-primary:active {
    color: #fff;
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-bg);
}
.btn-group-xs > .btn, .btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 11px;
    line-height: 11px;
}
.sa {
    font-family: 'salpack' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: fit-content;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: var(--text-xs);
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--grey-light);
    border-radius: 0.35rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}
.dropdown-menu .dropdown-item {
    font-size: var(--text-xs);
    cursor: pointer;
}
.drv-status-filter .dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}
.dropdown-menu .dropdown-item {
    font-size: var(--text-xs);
    cursor: pointer;
}
.drv-status-filter .dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}
Quick links menu buttons
Claims
  1. Font: Nunito Sans
  2. Font Size: 12px
  3. Background Color: #ffffff
  4. Color: #555555
Example:

Normal:
R=238 G=238 B=238
HEX #eeeeee

Copy HTML here
 
<div class="col-6 col-md-6 d-flex ps-0 ps-sm-3">
    <div class="card  bg-white shadow flex-grow-1">
        <a href="#EmployeeAccTab" role="button" class="card-start d-flex flex-row align-items-center justify-content-center  stretched-link btn" onclick="OpenMyAccountTab('/Employee/ClaimMenuList','AccountDataPlaceholder')">
            <!-- https://feathericons.dev/?search=file-text&iconset=feather -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="feather feather-trello" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-feather-line="1" data-feather-size="40" data-feather-color="green-dark" data-feather-bg="green-fade-light" style="stroke-width: 1; width: 40px; height: 40px;">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
                <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" style="transform: translate(40%,34%) scale(0.55); perspective: 500px; fill:var(--brand-color);"></path>
            </svg>
        </a>
        <div class="card-text-end">
            <div class="c-details">
                <div class="card-text fw-bold text-center">
                    Claims
                </div>
            </div>
        </div>
    </div>
</div>
Copy CSS here
 
.card {
    border-radius
Defines the radii of the outer border edge.
Learn more
Don't show
: var(--card-border-radius);
    background: var(--ivory-white);
    border: 1px solid var(--grey-light);
    color: var(--secondary-color);
    padding: 0.5rem 0.875rem;
    /* box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .05); */
}
.btn {
    font-size: var(--button-font-size);
    border-radius: var(--tab-border-radius);
    padding: 0.312rem 0.875rem;
    margin-bottom: 2px;
}
[data-feather-bg=green-fade-light]
Specificity: (0,1,0)
 {
    fill: rgba(85, 177, 71, .3);
}
[data-feather-color=green-dark] {
    stroke: rgb(85, 177, 71);
}
Buttons under the tabs
  1. Font: Nunito Sans
  2. Font Size: 12px
  3. Background Color: #fafafa
  4. Color: #555555
Example:

Normal:
HEX #fafafa

Copy HTML here
 
<div class="splide__track px-0 splide__track--slide splide__track--ltr splide__track--draggable" id="EziwayCardSplide-track" style="padding-left: 5%; padding-right: 5%;" aria-live="polite" aria-atomic="true">
    <ul class="splide__list" id="EziwayCardSplide-list" role="presentation" style="transform: translateX(0px);">
        <li class="splide__slide d-flex is-active is-visible" id="EziwayCardSplide-slide01" role="group" aria-roledescription="slide" aria-label="1 of 2" style="margin-right: 20px; width: calc(50% - 10px);">
            <div role="button" class="card bg-white rounded-m shadow-m align-items-center w-100" onclick="LoadPartialOrActionMethod('/Employee/EziwayCard','ManageTab')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card mt-2 mb-2" data-feather-line="1" data-feather-size="40" data-feather-color="green-dark" data-feather-bg="green-fade-light" style="stroke-width: 1; width: 40px; height: 40px;"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
                <h5 class="fw-bold text-center text-sm">Card Transactions</h5>
                <p class="line-height-s text-xs text-center d-none">
                    View your <br>card history
                </p>

            </div>
        </li>
    </ul>
</div>
Copy CSS here
 
.card {
    border-radius: var(--card-border-radius);
    background: var(--ivory-white);
    border: 1px solid var(--grey-light);
    color: var(--secondary-color);
}
Dark back button under tabs
  1. Font: Nunito Sans
  2. Font Size: 13px
  3. Background Color: #333333
  4. Color: #ffffff
Example:

Normal:
HEX #333333

Hover:
HEX #55b147

Copy HTML here
 
<button class="btn btn-sm btn-default" onclick="LoadPartialOrActionMethod('/Employee/MyEziwayCard','ManageTab')">Back</button>
Copy CSS here
 
.btn-default {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
Active/Refresh button
Active
  1. Font: Nunito Sans
  2. Font Size: 12px
  3. Color: #555555
Example:
Copy HTML here
 
<span class="fw-bold text-xs">Active <a href="javascript:void(0)"><i class="fas fa-sync-alt pe-2 pt-2 ps-1 pe-auto" id="btnRefreshMyPackage" onclick="LoadMyPackage()"></i></a></span>
Copy CSS here
 
.btn-default {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
Kebab menu for quick links
  1. Font: Nunito Sans
  2. Font Size: 12px
  3. Color: #555555
Example:
Copy HTML here
 
<div class="card-text-end  dropstart no-arrow text-end">
                <a role="button" class="dropdown-toggle" id="ANZ" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a>
                <ul class="dropdown-menu p-3 quickLinkBox" aria-labelledby="ANZ" style="">
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="990" id="990" onchange="CheckChangeQuickLink(990, this, 29)">
                                <label class="form-check-label" for="990"> CRM </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="991" id="991" onchange="CheckChangeQuickLink(991, this, 29)">
                                <label class="form-check-label" for="991"> Sales </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="992" id="992" onchange="CheckChangeQuickLink(992, this, 29)">
                                <label class="form-check-label" for="992"> Dealer Management </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="993" id="993" onchange="CheckChangeQuickLink(993, this, 29)">
                                <label class="form-check-label" for="993"> Operational Stats </label>
                            </div>
                        </li>
                </ul>
            </div>
Copy CSS here
 
.btn-default {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
Menu with dropdown option
NLV Marketing
  1. Font: Nunito Sans
  2. Font Size: 14px
  3. Color: #555555
  4. Background Color: #fafafa
Example:

Normal:
HEX #fafafa

Copy HTML here
 
<div class="card-text-end  dropstart no-arrow text-end">
                <a role="button" class="dropdown-toggle" id="ANZ" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a>
                <ul class="dropdown-menu p-3 quickLinkBox" aria-labelledby="ANZ" style="">
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="990" id="990" onchange="CheckChangeQuickLink(990, this, 29)">
                                <label class="form-check-label" for="990"> CRM </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="991" id="991" onchange="CheckChangeQuickLink(991, this, 29)">
                                <label class="form-check-label" for="991"> Sales </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="992" id="992" onchange="CheckChangeQuickLink(992, this, 29)">
                                <label class="form-check-label" for="992"> Dealer Management </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="993" id="993" onchange="CheckChangeQuickLink(993, this, 29)">
                                <label class="form-check-label" for="993"> Operational Stats </label>
                            </div>
                        </li>
                </ul>
            </div>
Copy CSS here
 
.btn-default {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
Inner tabs
  1. Font: Nunito Sans
  2. Font Size: 14px
  3. Active Color: #ffffff
  4. Inactive Color: #333333
Example:

Normal:
HEX #d1d1d1

Active:
HEX #55b147

Copy HTML here
 
<div class="tab-greybox"> <ul class="nav nav-tabs" id="EmployerDetailsinnerTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link collapsed active" data-bs-toggle="tab" href="#EmpDetailsTab" role="tab" aria-controls="EmpDetails" aria-selected="true" aria-expanded="false"> Employer Details</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link collapsed" data-bs-toggle="tab" href="#OpportunityTab" role="tab" aria-controls="Opportunity" aria-selected="false" aria-expanded="false" tabindex="-1">Opportunity</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link collapsed" data-bs-toggle="tab" href="#EmployerSitesTab" role="tab" aria-controls="EmployerSites" aria-selected="false" aria-expanded="false" tabindex="-1">Employer Sites</a> </li> </ul> </div>
Copy CSS here
 
.tab-greybox .nav-tabs {
    border-bottom: none;
}
.tab-greybox .nav-tabs li {
    margin-bottom: 2px;
}
.nav-tabs .nav-link.active {
    background-color: var(--brand-color);
    color: #ffffff;
}
.tab-greybox .nav-tabs li a {
    font-size: var(--text-sm);
    padding: 6px 30px !important;
    border-color: #eee #eee #ddd;
    background-color: var(--grey01);
    color: #000000;
    border-radius: 0;
    transition: 0.5s ease-in;
}
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
}