@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2") format("woff2"),
    url("../fonts/Roboto-Light.woff") format("woff"),
    url("../fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
    url("../fonts/Roboto-Regular.woff") format("woff"),
    url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
    url("../fonts/Roboto-Medium.woff") format("woff"),
    url("../fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #e5e8e5;
}

.scroll-container {
  overflow: auto;
  scroll-padding: 50px 0 0 50px;
}

.scroll-container.horizontal::-webkit-scrollbar {
  height: 7px; /* Mengubah tinggi scrollbar horizontal */
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #2196f3; /* Warna default */
}

.scroll-container.primary::-webkit-scrollbar-thumb {
  background-color: #2196f3; /* primary */
}

.scroll-container.primary::-webkit-scrollbar-track {
  background-color: #e3f2fd; /* primary */
}

.scroll-container.secondary::-webkit-scrollbar-thumb {
  background-color: #ffc107; /* secondary */
}

.scroll-container.secondary::-webkit-scrollbar-track {
  background-color: #fff8e1; /* secondary */
}

.scroll-container.error::-webkit-scrollbar-thumb {
  background-color: #f44336; /* error */
}

.scroll-container.error::-webkit-scrollbar-track {
  background-color: #ffebee; /* error */
}

.scroll-container.info::-webkit-scrollbar-thumb {
  background-color: #3f51b5; /* info */
}

.scroll-container.info::-webkit-scrollbar-track {
  background-color: #e8eaf6; /* info */
}

.scroll-container.success::-webkit-scrollbar-thumb {
  background-color: #4caf50; /* success */
}

.scroll-container.success::-webkit-scrollbar-track {
  background-color: ##e8f5e9; /* success */
}

.scroll-container.warning::-webkit-scrollbar-thumb {
  background-color: #ff9800; /* success */
}

.scroll-container.warning::-webkit-scrollbar-track {
  background-color: #fff3e0; /* success */
}

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

/* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
  background-color: #e3f2fd;
}

/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
  background-color: #2196f3;
}

/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
  background-color: #e3f2fd;
}

/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
  background-color: black;
}