/* styles.css */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('splash.png'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    filter: blur(0px); /* Optional: Apply a blur effect to the background */
}

.container {
    position: relative;
    z-index: 1;
}

.btn-orange {
    background-color: orange; /* Set default color to your desired orange */
    border-color: orange; /* Adjusted border color accordingly */
    transition: filter 0.3s; /* Adding a smooth transition effect */
    width: 100%; /* Adjust button width to suit your needs */
    height: 37px; /* Adjust height to your desired width */
}

.btn-orange:hover,
.btn-orange:focus {
    filter: brightness(1.2); /* Increase brightness on hover and focus */
}

.btn-orange:active {
    filter: brightness(0.8); /* Decrease brightness when active (clicked) */
}

.text-white {
    color: white;
}

.card {
    width: 100%;
}

h3 {
    color: black; /* Adjust the SSID text color */
}

/* First popover link styles */
a.popover-link.first-popover {
    font-weight: bold;       /* Makes text bold can remove for non bold */
    color: blue;          /* Custom color for first popover */
}

a.popover-link.first-popover:hover {
    color: blue;          /* Optional: Change color on hover for first popover */
}

/* Second popover link styles */
a.popover-link.second-popover {
    font-weight: bold;       /* Makes text bold */
    color: blue;          /* Custom color for second popover */
}

a.popover-link.second-popover:hover {
    color: blue;          /* Optional: Change color on hover for second popover */
}
