[ng-click],
[ng-dblclick],
a {
    cursor: pointer;
}



.hover-table:hover {
    background-color: var(--bs-secondary-bg-subtle);
    cursor: pointer;
}


.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-left: 35px;
    /* Adjust for icon width */
}

.input-with-icon i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Allows input focus */
    color: #aaa;
    /* Placeholder icon color */
}


.toaster-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2050;
}
.toast {
    margin-bottom: 0.5rem;
}





textarea {
resize: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}



/* LOADING PAGE */
#wifi-loader {
     --background: var(--bs-primary-bg);
     --front-color: #4f29f0;
     --back-color: #c3c8de;
     --text-color: #414856;
     width: 64px;
     height: 64px;
     border-radius: 50px;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
}
 #wifi-loader svg {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
}
 #wifi-loader svg circle {
     position: absolute;
     fill: none;
     stroke-width: 6px;
     stroke-linecap: round;
     stroke-linejoin: round;
     transform: rotate(-100deg);
     transform-origin: center;
}
 #wifi-loader svg circle.back {
     stroke: var(--back-color);
}
 #wifi-loader svg circle.front {
     stroke: var(--front-color);
}
 #wifi-loader svg.circle-outer {
     height: 86px;
     width: 86px;
}
 #wifi-loader svg.circle-outer circle {
     stroke-dasharray: 62.75 188.25;
}
 #wifi-loader svg.circle-outer circle.back {
     animation: circle-outer 1.8s ease infinite 0.3s;
}
 #wifi-loader svg.circle-outer circle.front {
     animation: circle-outer 1.8s ease infinite 0.15s;
}
 #wifi-loader svg.circle-middle {
     height: 60px;
     width: 60px;
}
 #wifi-loader svg.circle-middle circle {
     stroke-dasharray: 42.5 127.5;
}
 #wifi-loader svg.circle-middle circle.back {
     animation: circle-middle 1.8s ease infinite 0.25s;
}
 #wifi-loader svg.circle-middle circle.front {
     animation: circle-middle 1.8s ease infinite 0.1s;
}
 #wifi-loader svg.circle-inner {
     height: 34px;
     width: 34px;
}
 #wifi-loader svg.circle-inner circle {
     stroke-dasharray: 22 66;
}
 #wifi-loader svg.circle-inner circle.back {
     animation: circle-inner 1.8s ease infinite 0.2s;
}
 #wifi-loader svg.circle-inner circle.front {
     animation: circle-inner 1.8s ease infinite 0.05s;
}
 #wifi-loader .text {
     position: absolute;
     bottom: -40px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-transform: lowercase;
     font-weight: 500;
     font-size: 14px;
     letter-spacing: 0.2px;
}
 #wifi-loader .text::before, #wifi-loader .text::after {
     content: attr(data-text);
}
 #wifi-loader .text::before {
     color: var(--text-color);
}
 #wifi-loader .text::after {
     color: var(--front-color);
     animation: text-animation 3.6s ease infinite;
     position: absolute;
     left: 0;
}
 @keyframes circle-outer {
     0% {
         stroke-dashoffset: 25;
    }
     25% {
         stroke-dashoffset: 0;
    }
     65% {
         stroke-dashoffset: 301;
    }
     80% {
         stroke-dashoffset: 276;
    }
     100% {
         stroke-dashoffset: 276;
    }
}
 @keyframes circle-middle {
     0% {
         stroke-dashoffset: 17;
    }
     25% {
         stroke-dashoffset: 0;
    }
     65% {
         stroke-dashoffset: 204;
    }
     80% {
         stroke-dashoffset: 187;
    }
     100% {
         stroke-dashoffset: 187;
    }
}
 @keyframes circle-inner {
     0% {
         stroke-dashoffset: 9;
    }
     25% {
         stroke-dashoffset: 0;
    }
     65% {
         stroke-dashoffset: 106;
    }
     80% {
         stroke-dashoffset: 97;
    }
     100% {
         stroke-dashoffset: 97;
    }
}
 @keyframes text-animation {
     0% {
         clip-path: inset(0 100% 0 0);
    }
     50% {
         clip-path: inset(0);
    }
     100% {
         clip-path: inset(0 0 0 100%);
    }
}
 #body {
     background: #e8ebf3;
     height: 100vh;
     font: 400 16px 'Varela Round', sans-serif;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 #body .socials {
     position: fixed;
     display: block;
     left: 20px;
     bottom: 20px;
}
 #body .socials > a {
     display: block;
     width: 30px;
     opacity: 0.2;
     transform: scale(var(--scale, 0.8));
     transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
 #body .socials > a:hover {
     --scale: 1;
}
 

 /* Cards */
.configuration .card.active {
/*  color: #2470dc;*/
  background-color: #339DFF;
  color: #f1f1f1 !important;
}

.circled-letter {
  display: inline-block; 
  width: 60px;
  height: 60px;
/*  background-color: #007bff;*/
/*  color: white;*/
  text-align: center;
  line-height: 60px;
  border-radius: 50%; 
  font-weight: bold;
}