/* Loading html css */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.center {
  height: 100vh;
  display: flex;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.wave {
  width: 5px;
  height: 100px;
  background: linear-gradient(45deg, cyan, #fff);
  margin: 10px;
  animation: wave 1s linear infinite;
  border-radius: 20px;
}

.wave:nth-child(2) {
  animation-delay: 0.1s;
}

.wave:nth-child(3) {
  animation-delay: 0.2s;
}

.wave:nth-child(4) {
  animation-delay: 0.3s;
}

.wave:nth-child(5) {
  animation-delay: 0.4s;
}

.wave:nth-child(6) {
  animation-delay: 0.5s;
}

.wave:nth-child(7) {
  animation-delay: 0.6s;
}

.wave:nth-child(8) {
  animation-delay: 0.7s;
}

.wave:nth-child(9) {
  animation-delay: 0.8s;
}

.wave:nth-child(10) {
  animation-delay: 0.9s;
}

@keyframes wave {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

/* end loading css */

/* loading new css */
@keyframes square-animation {
  0% {
    left: 0;
    top: 0;
  }

  10.5% {
    left: 0;
    top: 0;
  }

  12.5% {
    left: 32px;
    top: 0;
  }

  23% {
    left: 32px;
    top: 0;
  }

  25% {
    left: 64px;
    top: 0;
  }

  35.5% {
    left: 64px;
    top: 0;
  }

  37.5% {
    left: 64px;
    top: 32px;
  }

  48% {
    left: 64px;
    top: 32px;
  }

  50% {
    left: 32px;
    top: 32px;
  }

  60.5% {
    left: 32px;
    top: 32px;
  }

  62.5% {
    left: 32px;
    top: 64px;
  }

  73% {
    left: 32px;
    top: 64px;
  }

  75% {
    left: 0;
    top: 64px;
  }

  85.5% {
    left: 0;
    top: 64px;
  }

  87.5% {
    left: 0;
    top: 32px;
  }

  98% {
    left: 0;
    top: 32px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

.loader {
  position: relative;
  width: 96px;
  height: 96px;
  transform: rotate(45deg);
}

.loader-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: 2px;
  border-radius: 6px;
  animation: square-animation 10s ease-in-out infinite both;
}

/* Gradient based on #3772FF */
.loader-square:nth-child(1) {
  background: #F49C21;
}

.loader-square:nth-child(2) {
  background: #F9C784;
}

.loader-square:nth-child(3) {
  background: #FFD56B;
}

.loader-square:nth-child(4) {
  background: #F49C21;
}

.loader-square:nth-child(5) {
  background: #F9C784;
}

.loader-square:nth-child(6) {
  background: #FFD56B;
}

.loader-square:nth-child(7) {
  background: #F49C21;
}

/* Delay tetap */
.loader-square:nth-of-type(1) {
  animation-delay: -1.4285714286s;
}

.loader-square:nth-of-type(2) {
  animation-delay: -2.8571428571s;
}

.loader-square:nth-of-type(3) {
  animation-delay: -4.2857142857s;
}

.loader-square:nth-of-type(4) {
  animation-delay: -5.7142857143s;
}

.loader-square:nth-of-type(5) {
  animation-delay: -7.1428571429s;
}

.loader-square:nth-of-type(6) {
  animation-delay: -8.5714285714s;
}

.loader-square:nth-of-type(7) {
  animation-delay: -10s;
}

/* end loading new css */

.input-login>.MuiFormLabel-root {
  color: #fff;
}

.input-login>.MuiInputBase-root>.MuiInputBase-input {
  color: #fff
}

#input-text-field {
  padding: 0.7rem;
}

.main-layout {
  background-color: #fff;
  padding: 2rem 0 0 0;
  color: #131212;
  font-family: "Montserrat", sans-serif;
  position: relative;
  width: 93%;
  float: right;
  min-height: 100vh;
  transition: width 300ms ease-in;
}

@media screen and (max-width: 1270px) {
  .div-sidebar {
    display: none;
  }

  .sidebar {
    display: none;
  }

  .main-layout {
    width: 100% !important;
  }

  .top-bar {
    width: 100% !important;
  }

  .main-layout-hide-sidebar {
    width: 100% !important;
  }

  .icon-menu-sidebar {
    display: block !important;
  }

  .icon-menu-sidebar-std {
    display: none !important;
  }
}

.top-bar {
  /* background: rgb(1,117,200);
    background: linear-gradient(214deg, rgba(1,117,200,1) 0%, rgba(90,147,179,1) 100%); */
  background-color: #F8FAFD;
  padding: 5px 2rem 0px 3rem;
  height: 100px;
  position: relative;
  width: 93%;
  float: right;
  transition: width 300ms ease-in;
}

/* Mobile */
@media (max-width: 768px) {
  .top-bar {
    padding: 5px 1.8rem 0px 1.8rem;
  }
}

.hide-sidebar {
  width: 83%;
}

.main-layout-hide-sidebar {
  padding: 2rem 0 0 0;
  font-family: "Montserrat", sans-serif;
  position: relative;
  width: 83%;
  float: right;
  min-height: 100vh;
  transition: width 300ms ease-in;
}

.input-small-padding>.MuiInputBase-root>.MuiInputBase-input {
  padding: 0.7rem !important;
}

.input-small-padding>.MuiSelect-select {
  padding: 0.7rem !important;
}

.react-datepicker-wrapper {
  width: 100%;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

.react-datepicker__input-container .react-datepicker__calendar-icon {
  padding: 0.7rem 1rem !important;
  color: #5A6A85 !important;
}


.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #f49c21 !important;
}
.MuiInputLabel-root.Mui-focused {
  color: #f49c21 !important;
}

.MuiMenuItem-root.Mui-selected,
.MuiMenuItem-root.Mui-selected:hover {
  background-color: #F9C784 !important;
}

.MuiAutocomplete-option[aria-selected="true"] {
  background-color: #F9C784 !important;
  color: #222 !important;
}

/* DatePicker input focus & border */
.react-datepicker__input-container input:focus {
  border-color: #F49C21 !important;
  box-shadow: 0 0 0 2px rgba(244,156,33,0.15) !important;
}

/* DatePicker selected day */
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
  background-color: #F9C784 !important;
  color: #222 !important;
}

/* DatePicker today highlight */
.react-datepicker__day--today {
  border: 1px solid #F49C21 !important;
}

/* DatePicker calendar header */
.custom-datepicker-calendar .react-datepicker__header {
  background-color: #FFF4E5 !important;
  border-bottom: 1px solid #F9C784 !important;
}

/* DatePicker month/year dropdown */
.custom-datepicker-calendar .react-datepicker__current-month,
.custom-datepicker-calendar .react-datepicker__month-read-view,
.custom-datepicker-calendar .react-datepicker__year-read-view {
  color: #F49C21 !important;
  font-weight: 600;
}

/* DatePicker: highlight selected time (jam) dengan warna kuning */
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected,
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected:focus {
  background-color: #F9C784 !important;
  color: #222 !important; /* hitam */
  font-weight: 600;
}


.react-datepicker__close-icon {
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.react-datepicker__close-icon::after {
  background-color: transparent !important;
  color: #F49C21 !important;
  font-size: 18px !important;
  border-radius: 50%;
  box-shadow: none;
}

.react-datepicker__close-icon:hover::after {
  color: #D0851C !important;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 6px;
}