@media (min-width: 992px) {

  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}


.old_dx-item>dx-list-item {
  background-color: #FF3b3c !important;
}

.old_element>div.artist {
  color: #e3e3e3;
  font-size: 18px;
}

.old_element>div.titel {
  color: #d18a3e;
  font-size: 18px;
}

#now_playing {
  margin-top: 12px;
  padding-bottom: 12px;

  padding: 2px;
  padding-left: 2px;

}

#now_playing_artist {
  color: #e3e3e3;
  font-size: 18px;
}

#now_playing_titel {
  color: #d18a3e;
  font-size: 18px;
}

.progressbar_percent {

  float: left;

}

.now_playing_rest_time {

  float: right;
  margin-right: 20px;
}


#progress {
  margin-top: 2px;

}

.old_dx-progressbar-container {
  height: 10px;
  border: 1px solid #4d4d4d;
  background-color: #4c4c4c;
  border-radius: 2px;
}

#old_show_plot {
  background-color: #da1818;
  height: 10px;
  float: left;

}

#icon_micro {
  font-size: 30px;
  float: right;
}

table.dataTable tbody tr {
  background-color: #4e7fa2;
}

.dataTables_info {
  color: #e1e8ed !important;
}

.paginate_button {
  background-color: #5b5a5a;
  color: #e1e8ed !important;
}

.ellipsis {
  color: #e1e8ed !important;
}

.paging_simple_numbers {
  background-color: #5b5a5a;
  color: #e1e8ed !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: .5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  cursor: hand;
  color: #e1e8ed !important;
  border: 1px solid transparent;
  border-radius: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #e1e8ed !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: #e1e8ed !important;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: #2f343a;
  margin-left: 3px;
  color: #e1e8ed !important;
}

table.dataTable tbody tr.selected {
  background-color: #f39c12;
}

.table-striped tbody tr:nth-of-type(2n+1) {
  background-color: rgb(42, 80, 106);
}

.content-header {
  padding: 15px .5rem;
  padding-top: 15px;
  padding-right: 0.5rem;
  padding-bottom: 1px;
  padding-left: 0.5rem;
}

.old_dx-list-item {
  border-top: 1px solid #4d4d4d;
  color: #dedede;

  border-color: #f39c12 !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.old_dx-list-item-before-bag.dx-list-toggle-delete-switch-container {
  width: 37px;

}

.old_dx-button-mode-contained.dx-button-danger {
  background-color: #ff0700;
  border-color: transparent;
  color: #fff;
}


.blue-background-class {
  background-color: #f09a2d !important;
}

.col {
  padding-right: 0;
  margin-right: 15px;
}

.selected {
  background-color: #f9c7c8;
  border: solid red 1px !important;
  z-index: 1 !important;
}

.highlight {
  background-color: #B7F8C7 !important;
}

.highlight {
  background-color: #B7F8C7;
}

.handle {
  cursor: grab;
}

.music-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333;
  /* Darker background for the player */
  border: 2px solid #f09a2d;
  /* Border color matching the image */
  padding: 5px 2px;
  border-radius: 5px;
}



.info-icon_first {
  color: white;
  margin-right: 10px;
  padding-left: 35px;
  width: 45px;
}

.song-info {
  flex: 1;
  color: #e0e0e0;

}

.artist {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.song {
  color: #f09a2d;
  /* Song title color matching the image */
}

.delete-button {
  background-color: #ff0000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

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

.playtime {

  color: white;
  border: none;
  padding: 10px 20px;

}

.playtime_now {

  color: white;
  border: none;
  display: inline-block;
  /* Added */
  vertical-align: middle;
  /* Added */
  margin-left: 10px;
  /* Adjust as needed */

}


.now_playing_co {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  /* Added */
  right: 20px;
  /* Added */
  top: 50%;
  /* Added */
  transform: translateY(-50%);
  /* Added */
}


.voice_center_buttons {
  display: flex;
  justify-content: center;
  align-items: center;


}

.voice_center_buttons .btn {
  margin: 0 10px;
  /* Setzt den Abstand auf beiden Seiten, um insgesamt 20px Abstand zwischen den Buttons zu erreichen */
}

.waveform {
  width: 100%;
  height: 128px;
  border: 1px solid #ddd;
  margin-bottom: 70px;
  /* Fügt einen Abstand von 20 Pixel nach unten hinzu */
}

.container_wave {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#titel_wave {
  margin-right: auto;
  color: #ff8000;
}

#delete_wave {
  margin-left: auto;
}

#status_wait {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url("../img/wait.gif");
  z-index: 9999;
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: -50px 0 0 -50px;
  /* is width and height divided by two */
}

.sample_rate {
  color: #ff8000;
  font-size: 10px;

}

.nav-item img {
  width: 32px;
  /* Größe des Icons anpassen */
  height: 32px;
}


.current_titel_left_bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 15px;
}




#title_element {
  display: flex;
  align-items: stretch;
  width: 100%;
  /* Stellt sicher, dass alle Kinder die gleiche Höhe haben */
}

#color_element {
  width: 15px;

}

.handle_element {
  display: flex;
   width: 32px;
  height: 32px;
  padding: 10px 10px;
  border-radius: 50%;
  font-size: 18px;
  margin-right: 5px;
  cursor: grab;

}
.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-details {
  flex-grow: 1; /* Nimmt den verbleibenden Platz ein */
  display: flex;
  flex-direction: column;
}

.track-details1 div {
  flex-grow: 1; /* Stellt sicher, dass alle divs gleich groß sind */
    border: 1px solid #000; /* Rahmen für Visualisierung */

}
#track_artist{
  width: 100%;
  font-weight: bold;
  font-size: 18px;
}
#track_name {
  font-size: 18px;
  color: #f09a2d;
  font-weight: bold;
  /* Song title color matching the image */
  width: 100%;
}
#track_infos {
  display: flex;
  width: 100%;
  justify-content: space-between; /* Verteilt den Inhalt gleichmäßig */
  padding-top: 12px;
}
#track_start_time {
  flex-basis: 30%; /* Nimmt 30% des verfügbaren Raumes ein */
  text-align: left;
  font-size: 18px;
}

#track_playtime {
  flex-basis: 60%; /* Nimmt 40% des verfügbaren Raumes ein */
  text-align: right;
  font-size: 18px;
}

.del_titel {
  flex-basis: 10%; /* Nimmt 30% des verfügbaren Raumes ein */
  text-align: right;
  margin-right: 5px;
  color: #f09a2d;
 
}