.top_menu_item_left:hover {
    color: #1552b1 !important;
    border-bottom: 3px solid #1552b1 !important;
}

.top_menu_item_left.active {
    color: #1552b1 !important;
    border-bottom: 3px solid #1552b1 !important;
    font-weight: 700 !important;
}

/* This rule ensures the last item on the side menu is rectangular (when hovered) */
.ui.vertical.menu > .item:last-child {
    border-radius: 0 !important;
}

/* This removes the arrow from the sidebar menu */
.ui.pointing.menu .active.item::after {
    visibility: hidden !important;
}

.side-menu-scroll-gradient {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    margin-bottom: -50px;
    padding-bottom: 50px;
}

.side-menu-scroll-gradient:after {
    content: "";
    position: absolute;
    z-index: 2 !important;
    /* top: 450px; */
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom,
        rgba(255,255,255,0), rgba(255,255,255, 1) 100%);
    width: 100%;
    height: 50px;
}

.side-menu-no-scroll-bar {
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.side-menu-no-scroll-bar::-webkit-scrollbar {
    width: 0px !important;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

.side-menu-scroll-indicator {
    margin-top: 50px;
    height: 45px;
    width: 210px;
    z-index: 3;
    background-image: linear-gradient(to bottom,
        rgba(255,255,255, 1), var(--support-colour-light) 100%);
}

.side-menu-button {
    cursor: pointer;
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: transform .2s ease-in-out; 
}

.side-menu-button-reverse {
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}
/* Global Style for Components */

.action_button:hover {
	background-color: #163b74 !important;
}

.ui.toggle.checkbox input:focus:checked~.box:before,
.ui.toggle.checkbox input:focus:checked~label:before {
    background-color: var(--action-colour-primary) !important
}

.ui.toggle.checkbox input~.box:before,
.ui.toggle.checkbox input~label:before {
    background-color: var(--support-colour-dark) !important
}

.ui.toggle.checkbox .box::after, .ui.toggle.checkbox label::before,
.ui.toggle.checkbox .box::after, .ui.toggle.checkbox label::after {
	background: var(--support-colour-primary);
}

.ui.toggle.checkbox {
	float: right;
}