main {
    padding-top: 1.5rem !important;
}

a svg {
    height: 20px;
    width: 20px;
}

a svg path {
    fill: rgb(var(--ct-link-color-rgb));
}

.table-component thead th.sortable:before {
     font-family: "Font Awesome 7 Pro" !important;
     content: '\f077' !important;
 }

.table-component thead th.sortable:after {
    font-family: "Font Awesome 7 Pro" !important;
    content: '\f078' !important;
}

.button-bar, .modal-footer {
    display: flex;
}

.button-bar button, .button-bar a, .modal-footer button {
    flex: 1;
    text-align: center;
    margin: 0 4px;
}

.button-bar button:first-child, .button-bar a:first-child, .modal-footer button:first-child {
    margin-left: 0;
}

.button-bar button:last-child, .button-bar a:last-child, .modal-footer button:last-child {
    margin-right: 0;
}

.vertical-button-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.vertical-button-bar > btn {
    width: 100%;
}

@media (max-width: 991px) {

    main {
        padding-top: 0.75rem !important;
        padding-left: 0;
        padding-right: 0;
    }

    .button-bar {
        flex-direction: column;
        row-gap: 1rem;
    }

    .button-bar > * {
        max-width: 100%;
        margin: 0 !important;
    }
}

/* Container that holds the toggle button */
.sidebar-toggle-container {
    z-index: 1000;
    position: absolute;
    top: 0;
    right: 0;
}

html[data-sidenav-size="condensed"] .sidebar-toggle-container {
    text-align: center;
    left: 0;
    position: sticky;
}

@media (max-width: 767.98px) {
    .sidebar-toggle-container {
        display: none;
    }
}


/* Float button to the right, keep it clean and flat */
#sidebarToggle {
    position: relative;
    width: 100%;
    height: 35px;
    cursor: pointer;
    background-color: var(--ct-help-box-bg);
    color: var(--ct-menu-item-hover-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* required for icon overlay positioning */
}

#sidebarToggle:hover {
    color: var(--ct-menu-item-active-color);
}


/* Icons overlap so we can animate between them */
.side-close-icon,
.side-open-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    pointer-events: none;
    transition:
            opacity .35s ease,
            transform .35s ease;
}

/* Default sidebar closed state */
.side-close-icon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

.side-open-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-360deg);
}

html[data-sidenav-size="condensed"]  .side-close-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(360deg);
}

html[data-sidenav-size="condensed"] .side-open-icon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Clear float to avoid layout issues after the button */
.sidebar-toggle-container::after {
    content: "";
    display: block;
    clear: both;
}