.circle {
  display: inline-block;
  width: 40px; /* Adjust the size of the circle */
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle; /* Align with text */
  margin-left: 10px; /* Space between the text and the circle */
  border: 2px solid #414141; /* Optional border */
}

.big-circle {
  display: inline-block;
  width: 60px; /* Adjust the size of the circle */
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle; /* Align with text */
  margin-left: 10px; /* Space between the text and the circle */
  border: 2px solid #414141; /* Optional border */
}

.circle img,.big-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.init-button {
    display: inline-block;
    width: 60px; /* Adjust width as needed */
    padding: 8px 0; /* Vertical padding only */
    background-color: #09970f;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.init-button:hover {
    background-color: #017f06;
}

.result-button {
    display: inline-block;
    width: 60px; /* Adjust width as needed */
    padding: 8px 0; /* Vertical padding only */
    background-color: #181818;
    color: #adadad;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
}

.result-button:hover {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
}


.action-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.action-button:hover {
    background-color: #45a049;
}

.orange-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #ff6e00;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.orange-button:hover {
    background-color: #8a3324;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mb20 {
    margin-bottom: 20px;
}

.ml10 {
    margin-left: 10px;
}

.ml20 {
    margin-left: 20px;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.dark-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #282828;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.dark-button:hover {
    background-color: rgb(4, 4, 15);
}

.dark-blue-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #052524;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.dark-blue-button:hover {
    background-color: rgb(4, 4, 15);
}

.view-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #676762;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.view-button:hover {
    background-color: #000000;
}

.logout-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: red;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.logout-button:hover {
    background-color: #a30000;
}

.delete-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: red;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.delete-button:hover {
    background-color: #ab0505;
}

.edit-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgb(11, 92, 212);
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.edit-button:hover {
    background-color: #000000;
}

.reset-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #541414;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.reset-button:hover {
    background-color: #301515;
}

.non-assign-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #d8d8d8;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.non-assign-button:hover {
    background-color: #ffffff;
}

.assign-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #252525;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.assign-button:hover {
    background-color: #151414;
}

.add-button {
    background-color: rgb(46, 155, 46);
    color: white;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.add-button:hover {
    background-color: rgb(21, 82, 21);
}

.red-button {
    background-color: #dc3545;
    color: white;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.red-button:hover {
    background-color: #c82333;
}

.set-packet-button {
    background-color: #1B53BD;
    color: white;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.set-packet-button:hover {
    background-color: #000000;
}

.already-set-packet-btn {
    background-color: #000000;
    color: white;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.already-set-packet-btn:hover {
    background-color: #C2D7FF;
    color: #000000;
}

.back-button {
    background-color: #3498db; /* Bluish color */
    color: #fff; /* Text color (white in this case) */
    padding: 7px 10px; /* Adjust padding as needed */
    border: none; /* Remove border */
    border-radius: 5px; /* Optional: Add rounded corners */
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
}

/* Hover effect */
.back-button:hover {
    background-color: #2980b9; /* Darker shade when hovered */
}

/* Button Styling */
.submit-button {
    background-color: green;
    color: #ffffff;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.submit-button:hover {
    background-color: black;
    color: white;
}

.badge-musketeer{
    background: linear-gradient(90deg, #0058b7, #478602); /* your custom color */
    color: white;
}