.status-badge {
        padding: 1px 10px;
        border-radius: 25px;
        font-size: 13px;
        color: white;
        transition: background-color 0.3s ease-in-out;
    }
 
    
/* Global Styles */
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    background-color: #181818;
    color: white;
}

table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
}

th {
    background-color: #5A4FCF;
    padding: 10px 20px;
    color: white;
    text-align: left;
    font-weight: normal;
}

td {
    padding: 10px 20px;
    border-bottom: 1px solid transparent; /* Transparent border-bottom */
    color: #dcdcdc;
    transition: all 0.3s ease;
}

td.hover-effect:hover {
    background-color: #5A4FCF;
    color: white;
}


/* Responsive Styles */
@media (max-width: 600px) {
    table, th, td {
        display: block;
    }

    th {
        display: none;
    }

    td {
        display: grid;
        grid-template-columns: 1fr auto;
        margin-bottom: 10px;
        border-bottom: none;
    }

    td:before {
        content: attr(data-label);
        font-weight: bold;
        color: #5A4FCF;
        padding-right: 20px;
    }
}

/* FontAwesome Icons Styles */
th i {
    margin-right: 5px;
}

td i {
    margin-right: 5px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.action-btn {
    margin-bottom: 5px;
    padding: 5px 10px;
    font-size: 0.9em;
}

.note-container {
    flex-grow: 1;
}

.note-textarea {
    width: 100%;
    height: 100%;
}

    /* Button Styles */
.btn-purple {
    background-color: #5A4FCF;
    border-color: #5A4FCF;
    color: #ffffff;
    margin-top: 20px;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #1c1c1c;
}

.siilenced-darker {
  background-color: #1c1c1c;
}
 
    /* Button Styles */
.btn-purple {
    background-color: #5A4FCF;
    border-color: #5A4FCF;
    color: #ffffff;
    margin-top: 20px;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #1c1c1c;
}

.siilenced-darker {
  background-color: #1c1c1c;
}
 
.custom-card {


transition: all 0.3s ease;
display: flex;


}

    .custom-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.25);
    }

 

.card-title {
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 0;
    padding-bottom: 0;
}

.card-text {
    margin-top: 5px;
    padding-top: 0;
}

    .modal-content {
        background-color: #181818;
        color: white;
        border-radius: 15px;
    }

    .modal-header .close {
        color: white;
    }



    .modal-footer .btn {
        border-radius: 10px;
        padding: 8px 20px;
        font-size: 1em;
    }

    
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
}

.custom-card .custom-tab {
    background-color: #2a2d30;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    width: 400%; /* Make tabs full width */
}

.custom-card .btn {
    background-color: #5A4FCF;
    border-color: #5A4FCF;
    color: #ffffff;
}

.custom-card .btn:hover {
    background-color: #9c4dcc;
    border-color: #9c4dcc;
    color: #ffffff;
}

.custom-card .btn-rounded {
    border-radius: 50px;
}

.embed-responsive {
    margin-bottom: 20px;
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
    background: #2a2d30;
}

.bg-kanker {

    background-color: #111315;
}

.custom-card-quatro {
  background-color: #1a1d20;
  color: white;
  transition: all 0.3s ease;
  display: inline-block;
  align-items: center;
  padding: 0px;
  margin: 9px;
    margin-right: 10px;
  cursor: pointer;
  margin-right: 1px;
  border-radius: 15px;
  overflow: hidden;
  width: 800px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.bg-darker-two {
  background-color: #17191c;
}

.bg-darker {
  background-color: #17191c;
}

.custom-input {
    background-color: rgb(23, 25, 28);
}

.custom-button {
    color: #5A4FCF;
}

      /* Set the background color of the form submit button to purple */
      .btn-purple {
        background-color: #5A4FCF;
        border-color: #5A4FCF;
        color: #ffffff;
        margin-top: 10px;
      }
      
      /* Set the text color of the form submit button to white */
      .btn-purple {
        color: #ffffff;
      }

.custom-card .btn:hover {
  background-color: #9c4dcc;
  border-color: #9c4dcc;
  color: #ffffff;

}

.cardke3ba {
display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.custom-card-sinco {
  background-color: #1a1d20;
  color: white;
  transition: all 0.3s ease;
  align-items: center;
  padding: 0px;
  margin: 10px;
  cursor: pointer;
  border-radius: 15px;
  overflow: hidden;
  width: 400px;
  transition: all 0.3s ease;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}

      .form-control {
        background-color: #212529;
        border-color: #212529;
        color: #515962;
        margin-bottom: 20px;
      }

      .form-control {
  width: 90%;

}

.animated-button {
    transition: opacity 0.5s ease-in-out;
}


      .btn:hover {
        color: #ffff;
        background-color: #56098c;
        border-color: #56098c;
      }

       .purple {
        color: #5A4FCF;
      }
      
      .input-group-text {
        display: flex;
        align-items: center;
        padding: .375rem .75rem;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #6e707e;
        text-align: center;
        white-space: nowrap;
        background-color: #gff;
        border: 1px solid #5A4FCF;
        border-radius: .35rem;
        border-top-right-radius: 0.35rem;
        border-bottom-right-radius: 0.35rem;
}

      /* Set the color of the input fields placeholder text to light grey */
      .form-control::placeholder {
        color: #515962;
      }
      
      .form-control:focus {
        box-shadow: none;
        background-color: #212529;
        outline-color: #212529;
        border-color: #212529;
      }


      .form-control.custom-input:focus {
    box-shadow: none;
    background-color: #212529;
    border-color: #5A4FCF;
}

.offline-class {
    border: 1px solid gray;
    border-radius: 5px;
    color: white;
    background-color: gray;
}

.waiting-class {
    border: 1px solid red;
    border-radius: 5px;
    color: white;
    background-color: red;
}

.online-class {
    border: 1px solid green;
    border-radius: 5px;
    color: white;
    background-color: green;
}

/* Input Group Styles */
.input-group-prepend {
  
}

.input-group-text {
    background-color: #212529;
    color: #5A4FCF;
    border: none;
}

/* Button Styles */
.btn-purple {
    background-color: #5A4FCF;
    border-color: #5A4FCF;
    color: #ffffff;
    margin-top: -10px;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.btn-purple:hover {
    background-color: #9c4dcc;
    border-color: #9c4dcc;
    color: #ffffff;
}

      .card-header {
    font-size: 1.2em;
}

.bg-darkest {
      background-image: url('/img/backgroundImage.jpg');
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: 1920px; /* width and height */
}