html {
  font-size: 14px;
}

@media (min-width: 768px) {
  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;
}

/* Define a CSS class for the borderless list box */
.borderless-listbox {
    border: 1px solid rgba(0, 0, 0, 0); /* Transparent border */
}

    /* Define styles for the list box when hovered */
    .borderless-listbox:hover {
        border: 1px solid #000; /* Change the color and width as needed */
    }

.hover-underline {
    text-decoration: none; /* Remove the default underline */
}

    /* CSS Style for the anchor when hovered */
    .hover-underline:hover {
        text-decoration: underline; /* Show underline on hover */
    }

/* Style for the link */
.icon-link {
    display: inline-block;
    padding: 10px 10px; /* Adjust padding as needed */
    background-color: #ffffff; /* Link background color */
    text-decoration: none; /* Remove underline */
    color: #000000; /* Text color */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition effect */
    background-image: url('/image/details.svg'); /* Reference to the external SVG file */
    background-size: 16px; /* Adjust icon size as needed */
    background-repeat: no-repeat;
    background-position: center; /* Center the SVG */
    position: relative;
    text-decoration: none;
}

    .icon-link::after {
        content: "";
        position: absolute;
        top: 100%; /* Position it just below the anchor */
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        background-color: #333; /* Tooltip background color */
        color: #fff; /* Tooltip text color */
        border-radius: 5px;
        opacity: 0; /* Initially hidden */
        transition: opacity 0.3s ease; /* Fade-in transition effect */
    }

    .icon-link:hover::after {
        opacity: 1;
    }

    .icon-link:hover {
        background-color: #eeeeff; /* Change background color on hover */
    }

.icon-link-up {
    background-image: url('/image/up.svg');
}

    .icon-link-up::after {
        content: "up";
    }

.icon-link-down {
    background-image: url('/image/down.svg');
}

    .icon-link-down::after {
        content: "down";
    }

.icon-link-edit {
    background-image: url('/image/edit.svg');
}

    .icon-link-edit::after {
        content: "edit";
    }

.icon-link-delete {
    background-image: url('/image/delete.svg');
}

    .icon-link-delete::after {
        content: "delete";
    }

.icon-link-new {
    background-image: url('/image/new.svg');
}

    .icon-link-new::after {
        content: "new";
    }

.icon-link-new-textbutton {
    background-image: url('');
}

    .icon-link-new-textbutton::after {
        content: "";
    }

    .icon-link-new-textbutton:hover::after {
        opacity: 0;
    }

.icon-new-textbutton {
    height: 16px;
    width: 16px;
    margin-right: 5px;
}

.icon-menu-button {
    height: 16px;
    width: 16px;
    margin-right: 5px;
    transform: translateY(-10%);
}

.icon-link-details {
    background-image: url('/image/details.svg');
}

    .icon-link-details::after {
        content: "details";
    }

.icon-link-entries {
    background-image: url('/image/entries.svg');
}

    .icon-link-entries::after {
        content: "entries";
    }

.icon-link-play {
    background-image: url('/image/play.svg');
}

    .icon-link-play::after {
        content: "play";
    }

.icon-link-link {
    background-image: url('/image/link.svg');
}

    .icon-link-link::after {
        content: "link";
    }