html {
  font-size: 14px;
}

@media (min-width: 50%) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/*.btn-icon {
    border: none;
    background: none;
    padding: 0;
}*/



.btn-icon {
    border: none;
    background: none;
    padding: 0;
    transition: transform 0.3s ease;
}

.btn-icon:hover {
    transform: scale(1.4);
}

.btn-icon-delete {
    border: none;
    background: none;
    padding: 0;
}

.btn-icon-delete:hover {
    color: red; /* Optional hover effect */
    cursor: pointer;
}

bi-trash::before {
    content: "\f5de"
}


.icon-action-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .icon-action-list .icon-action {
        margin-right: 0.5rem;
    }

        .icon-action-list .icon-action:last-child {
            margin-right: 0;
        }

.icon-action {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30px; /* Replace $wrapper-size with the appropriate value */
    height: 30px; /* Replace $wrapper-size with the appropriate value */
    border-radius: 8px; /* Replace $border-radius with the appropriate value */
    background-color: white; /* Replace $color-gray-lightest with the appropriate color */
    outline: none !important;
    cursor: pointer;
    border-width: 1px;
    -webkit-appearance: none !important; /* because Safari */
    -moz-appearance: none !important; /* because Safari */
    appearance: none !important; /* because Safari */
    transition: none !important; /* to beat .table-default__row td a */
    font-size: calc(1rem + 0.5vw); /* Replace with your actual fluid font size logic */
}

    .icon-action:hover {
        background-color: #b8b8b8 !important; /* Replace $color-primary with the appropriate color */
    }

        .icon-action:hover .bi {
            filter: brightness(0) invert(1);
        }

    .icon-action .bi {
        font-size: 16px; /* Replace $icon-size with the appropriate value */
    }

        .icon-action .bi:before {
            color: #000; /* Replace $color-black with the appropriate color */
        }

.icon-action--sm {
    width: 32px; /* Replace $wrapper-size-sm with the appropriate value */
    height: 32px; /* Replace $wrapper-size-sm with the appropriate value */
}

    .icon-action--sm .bi {
        font-size: 12px; /* Replace $icon-size-sm with the appropriate value */
    }