.breadcrumbs {
    border: 1px solid #cbd2d9;
    border-radius: 0.3rem;
    display: inline-flex;
    overflow: hidden;
}

.breadcrumbs__item, #myTab .nav-link {
    background: #e74a3b;
    color: #fff;
    outline: none;
    padding: 0.3em 0.5em 0.5em 1em;
    position: relative;
    text-decoration: none !important;
    transition: background 0.2s linear;
}

.breadcrumbs__item:hover:after,
.breadcrumbs__item:hover,
.breadcrumbs__item.is-active:hover, 
.breadcrumbs__item.is-active:hover::after,
#myTab .nav-link:hover,
#myTab .nav-link.active:hover {
    background: #17a673;
    color: #fff;
}

.breadcrumbs__item:after,
.breadcrumbs__item:before {
    bottom: 0;
    clip-path: polygon(50% 50%, -50% -50%, 0 100%);
    content: "";
    left: 100%;
    position: absolute;
    top: 0;
    transition: background 0.2s linear;
    width: 1em;
    z-index: 1;
    background: #e74a3b;
    color: #fff;
}

.breadcrumbs__item:before {
    background: #cbd2d9;
    margin-left: 1px;
}

.breadcrumbs__item:last-child {
    border-right: none;
}

.breadcrumbs__item.is-active, .breadcrumbs__item.is-active::after, #myTab .nav-link.active {
    background: #f6c23e;
}

#custom-nav {
    display: flex;
    list-style: none;
    margin: 0;
}

#custom-nav li {
    margin-left: -2px;
}

ul#custom-nav {
    justify-content: center;
    padding-right: 1rem;
}

#custom-nav li:first-child a {
    border-radius: 8px 0 0 8px;
}

#custom-nav li:last-child a {
    border-radius: 0 8px 8px 0;
}

#custom-nav a {
    background-color: #fff;
    color: #010724;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid #010724;
    height: 2em;
    padding: 0 1em;
    border-radius: 0;
    transform: skew(-30deg);
    position: relative;
    transition: color 0.35s ease, border-color 0.35s ease, padding-right 0.5s ease;
    overflow: hidden;
    /* To hide text overflow */
}

#custom-nav a:hover,
#custom-nav a:focus {
    outline: 0;
    color: #e74a3b;
    border-color: #e74a3b;
    z-index: 1;
}

#custom-nav a.active {
    color: #e74a3b;
    border-color: #e74a3b;
    z-index: 1;
}

#custom-nav a>i {
    font-size: 1.5em;
    margin-right: 0.5em;
    transform: skew(30deg);
}

#custom-nav a span {
    width: 0px;
    opacity: 0;
    /* Hide the text */
    white-space: nowrap;
    /* Prevent text from wrapping */
    transform: skew(30deg);
    transition: opacity 0.5s ease, margin-left 0.5s ease;
    margin-left: -1em;
    /* Hide the text off-screen */
}

#custom-nav a:hover span,
#custom-nav a span {
    width: auto;
    opacity: 1;
    /* Show text on hover */
    margin-left: 0;
    /* Bring the text into view */
}

.form-check {
    display: inline-block;
    margin: 10px;
}

.bubble-checkbox {
    display: none;
}

.bubble-label {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    background-color: #ffffff;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.bubble-checkbox:checked+.bubble-label {
    background-color: #ff0000;
    color: #fff;
}

.bubble-label:hover {
    background-color: #d5e2eb;
    color: #000000;
}