* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.role-wrapper:hover {
    transform: scale(1.07);
    transition: all 0.3s ease-out;
}

.role-wrapper:hover .card, .role-wrapper:hover i {
    color: #289bd1 !important;
    transition: all 0.2s ease-out;
}

.nav-search-wrapper input,
.nav-search-btn {
    transition: all 0.25s ease-out;
}

.nav-search-wrapper input:invalid:not(:focus),
.nav-search-btn {
    cursor: pointer;
}

.nav-search-wrapper input:focus,
.nav-search-wrapper input:valid {
    width: 100%;
}

.nav-search-wrapper input:focus,
.nav-search-wrapper input:not(:focus) + .nav-search-btn:focus {
    outline: transparent;
}

.nav-search-wrapper input {
    border-radius: 1.5em;
    transform: translate(0.5em, 0.5em) scale(0);
    transform-origin: 100% 0;
    width: 0;
}

.nav-search-wrapper input:focus,
.nav-search-wrapper input:valid {
    border-radius: 0.375em;
    transform: scale(1);
}

input[type="search"]::-webkit-search-cancel-button {
    filter: invert(100%);
}

.removeInputFocus:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.clarama-edit-element.highlight {
    border-color: DeepSkyBlue !important;
    background-color: #eee !important;
    box-shadow: 0 0 15px 5px rgba(0, 190, 255, 0.5);
    transition: box-shadow, background-color, border-color 0.5s ease-in-out;
}

.bi-plus-circle.grid-interaction-add:hover {
    color: #4bb785;
    transition: color 0.2s ease-in-out;
}

#interactionPopup {
    position: absolute;
    display: none;
    z-index: 1055;
    padding: 10px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    max-width: 44%;
}

.help img {
    width: 100%;
}

@media (min-width: 576px) {
    #interactionModal .modal-dialog {
        max-width: 85% !important;
    }
}

.custom-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.custom-selected {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    border-top: none;
    background: white;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-option {
    padding: 8px 12px;
    cursor: pointer;
}

.custom-option:hover {
    background-color: #f1f1f1;
}

.breadcrumb-hidden {
    display: none;
}

.breadcrumb-ellipsis {
    position: relative;
    cursor: pointer;
}

.breadcrumb-ellipsis .hidden-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    background: #191919;
    z-index: 100;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 15px;
}

.breadcrumb-ellipsis:hover .hidden-items {
    display: flex;
}

.breadcrumb-ellipsis .hidden-items::before {
    content: "";
    position: absolute;
    top: -17px;
    left: 50%;
    border-width: 9px;
    border-style: solid;
    border-color: transparent transparent #191919 transparent;
}

#contextMenu {
    z-index: 1050;
    min-width: 150px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#contextMenu .dropdown-item:focus, #contextMenu .dropdown-item:hover {
    background-color: #f3f3f3 !important;
}

.nav-tabs {
    border: none;
}

.nav-item {
    position: relative;
    border: none;
    width: fit-content;
}

.tab-item::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background-color: #dee2e6;
}

.nav-link:not(.active) .tab-title {
    color: rgb(0, 45, 247);
}

.resizable-col {
    overflow: hidden;
    position: relative;
}

.resize-handle {
    opacity: 0;
    transition: opacity 0.2s ease;
    width: 4px;
    height: 100%;
    background: #ddd;
    position: absolute;
    right: 0;
    top: 0;
    cursor: col-resize;
    z-index: 10000;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.resizable-col:hover .resize-handle {
    opacity: 1;
}

.ui-draggable-disabled .resize-handle {
    display: none;
}

.modal {
    z-index: 100000 !important;
}

.subtle-divider {
    margin: 0.5rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.remove-focus .dropdown-item:focus, .remove-focus .dropdown-item:active, .remove-focus .dropdown-item:hover {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: #000 !important;
}