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;
    }
}