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

/*#region SCROLLBAR */
.custom-scrollbar::-webkit-scrollbar {
    width: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: lightgrey;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/*#endregion */

[v-cloak] {
    display: none;
}

ul {
    padding-inline-start: 15px;
}

.breadcrumb-item a {
    transition: all .3s;
}

/*.form-control:focus, .form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0 var(--bs-primary);
}*/
/*.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;
}*/



/*#region NAV */
.navbar-brand {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 2rem;
    color: var(--bs-primary);
}

.navbar-custom .nav-item>a::after {
    content: '';
    display: block;
    margin: auto;
    height: 2px;
    width: 0px;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
}

.navbar-custom .nav-item a:hover::after {
    width: 100%;
    background: var(--bs-primary);
}
.navbar-custom .nav-item a.show::after {
    content: '';
    display: block;
    margin: auto;
    height: 2px;
    width: 0px;
    background: transparent;
    width: 100%;
    border-bottom: 2px solid var(--bs-primary);
}
/*#endregion */


.lista-inline {
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}

.lista-inline-item + .lista-inline-item::before {
  float: left;
  padding-left: .5rem;
  padding-right: .5rem;
  content: var(--bs-breadcrumb-divider, "-");
}
.lista-inline-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}

.input-field {
  border-radius: var(--bs-border-radius-lg);
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  color: #4343ff;
}

.link-default {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .15s ease-in-out;
}
.link-default.active {
    color: var(--bs-primary) !important;
}

.link-default:hover, .link-default:focus {
  color: var(--bs-primary) !important;
  text-decoration: none !important;
}

.ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ellipsis-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.img-hover {
  transition: .15s ease-in-out;
}
.img-hover:hover {
  opacity: .7;
}

/*#region stars */
.stars {
    display: inline-block;
}

.stars input {
    display: none;
}

.stars label {
    float: right;
    padding: 2px;
    font-size: 18px;
    color: #444;
    transition: all .2s;
}

.stars label:before {
    content: '\2605';
}

.stars input:checked ~ label:before {
    color: gold;
    transition: all .25s;
}

.stars label:hover {
    transform: scale(1.3);
}

input.star:checked ~ label.star:before {
    content: '\f005';
    color: #FD4;
    transition: all .25s;
}

input.star-5:checked ~ label.star:before {
    color: #FE7;
    text-shadow: 0 0 3px #952;
}

input.star-1:checked ~ label.star:before {
    color: #F62;
}

label.star:hover {
    transform: rotate(-10deg) scale(1.1);
}

label.star:before {
    content: '\f006';
    font-family: FontAwesome;
}
/*#endregion */

li.active{
    color: var(--bs-primary);
}

#curso-contenido > div > div > div {
    scroll-margin-top: 4rem;
}

#centro-contenido > div > div > div {
    scroll-margin-top: 4rem;
}

.btn-toggle-menu:hover {
    color: white;
    background-color: var(--bs-tertiary-bg) !important;
}

.btn-toggle-menu:active {
    color: white !important;
    background-color: var(--bs-tertiary-bg) !important;
}

.hover-darker {
    transition: background-color 0.3s ease, filter 0.3s ease; /* Smooth transition for the hover effect */
}

/* Apply darker effect on hover */
.hover-darker:hover {
    filter: brightness(90%); /* Make the div slightly darker */
}