/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *







 

 */


table.dataTable th,
table.dataTable td {
  padding: 5px 6px;
  /* border-bottom: 1px solid #111; */
  border: 0.2px solid #e5e5e5;
}

table.dataTable tbody {
  white-space: nowrap;
}

.den-table td,
.den-table th {
  border: 1px solid #bab5b5;
  padding: 5px;
}

.den-table tbody {
  overflow: hidden;
  white-space: nowrap;
  height: 300px;
  overflow-x: scroll;
}

/* .den-table thead { display:block; } */
.den-table {
  /* width: 100%; */
  table-layout: fixed;
  border-collapse: collapse;
}

/*2022-04-07*/
.card {
  display: flex;
  /* Children use Flexbox */
  flex-direction: column;
  /* Rotate Axis */
  border: 1px solid #7eb1e3;
  /* Set up Border */
  border-radius: 4px;
  /* Slightly Curve edges */
  overflow: hidden;
  /* Fixes the corners */
  margin: 5px;
  /* Add space between cards */
}

.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #7eb1e3;
  background-color: #e5e5e5;
  padding: 5px 10px;
}

.card-main {
  display: flex;
  /* Children use Flexbox */
  flex-direction: column;
  /* Rotate Axis to Vertical */
  justify-content: center;
  /* Group Children in Center */
  align-items: center;
  /* Group Children in Center (on cross axis) */
  padding: 15px 0;
  /* Add padding to the top/bottom */
}

.material-icons {
  font-size: 36px;
  color: #D32F2F;
  margin-bottom: 5px;
}

.main-description {
  color: #D32F2F;
  font-size: 12px;
  text-align: center;
}

.machine_number_card {
  padding: 5px 15px 5px 15px;
  font-size: 20px;
  border: 1px solid #7eb1e3;
  border-radius: 4px;
  display: inline-block;
}


/* -----------------------------
Switch */

.uk-switch {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 60px;
}

/* Hide default HTML checkbox */
.uk-switch input {
  display: none;
}

/* Slider */
.uk-switch-slider {
  background-color: rgba(0, 0, 0, 0.22);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 500px;
  bottom: 0;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: .2s;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
}

/* Switch pointer */
.uk-switch-slider:before {
  content: '';
  background-color: #fff;
  position: absolute;
  width: 30px;
  height: 30px;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  transition-property: transform, box-shadow;
  transition-duration: .2s;
}

/* Slider active color */
input:checked+.uk-switch-slider {
  background-color: #39f !important;
}

/* Pointer active animation */
input:checked+.uk-switch-slider:before {
  transform: translateX(26px);
}

/* Modifiers */
.uk-switch-slider.uk-switch-on-off {
  background-color: #f0506e;
}

input:checked+.uk-switch-slider.uk-switch-on-off {
  background-color: #32d296 !important;
}

/* Style Modifier */
.uk-switch-slider.uk-switch-big:before {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}

.uk-switch-slider.uk-switch-small:before {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}

input:checked+.uk-switch-slider.uk-switch-big:before {
  transform: translateX(26px) scale(1.2);
}

/* Inverse Modifier - affects only default */
.uk-light .uk-switch-slider:not(.uk-switch-on-off) {
  background-color: rgba(255, 255, 255, 0.22);
}

.uk-marquee {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.shift-item {
  display: block; /* Menjadikan setiap shift di dalam sel tampil dalam baris baru */
  padding: 3px 0; /* Beri jarak antar shift */
  border-bottom: 1px solid #ddd; /* Menambahkan garis pemisah antar shift */
}

.shift-item:last-child {
  border-bottom: none; /* Menghilangkan garis terakhir agar tampak lebih rapi */
}