table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 18px;
    text-align: left;
}

th,
td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
    cursor: pointer;
}

tr:hover {
    background-color: #f5f5f5;
}

#searchInput {
    padding: 10px;
    margin: 10px 20px;
    width: 98%;
}

.light-gray-thin-text {
    color: #303030;
    font-weight: 300;
    font-size: small;
}

.status {
    text-align: center;
    vertical-align: middle;
}

.status-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.status-container span {
    display: inline-block;
    padding: 0px 15px;
    border-radius: 25px;
    color: white;
    
}

.online span {
    /* border: 1px solid rgb(0, 10, 0); */
    background-color: rgb(90, 170, 90);
}

.offline span {
    /* border: 1px solid rgb(130, 0, 0); */
    background-color: rgb(255, 90, 90);
}


th,
td {
    text-align: center;
    vertical-align: middle;
}

/* Style the container */
#button-container {
    margin-top: 10px;
    margin-right: 10px;
}


/* Style the button */
.btn-custom {
    background-color: #FFD700;
    /* Gold color */
    color: #000;
    /* Black text */
    border: none;
    /* Remove border */
}

/* Hover effect */
.btn-custom:hover {
    background-color: #FFC400;
    /* A different shade of yellow */
}

.font-weight-bold {
    font-weight: bold;
    border: 1px solid #333333;
    margin-right: 10px;
}
 
.action-icons a {
    margin-right: 10px;
    text-decoration: none;
    color: inherit;
}

.action-icons a.delete-icon:hover {
    color: rgb(255, 90, 90);
}
.action-icons a.refresh-icon:hover {
    color: #22ac47;
}
.action-icons a.edit-icon:hover {
    color: #aaa100;
}

.resolution-container {
    display: flex; /* Enables flexbox layout */
    align-items: center; /* Centers items vertically */
    justify-content: flex-start; /* Aligns items to the start of the container */
    
}

.resolution-container input {
    width: 6rem;
    margin-right: 10px; /* Adds a small space between the inputs */
     
}
.small-label {
    display: block;
    margin: 0px;
    padding: 0px;
    font-size: 10px;  /* Adjust the font size as needed */
 }

 .resolution-container .input-group {
    display: flex;
    flex-direction: column;
}

#specialField {
    justify-content: center; /* Centers the items horizontally within the container */
}

.separator {
    margin: 10px 12px 0px 0px; /* Adds space around the 'x' */
}