@font-face {
      font-family: "Lato-Black";
      src: url("../fonts/Lato-Black.ttf");
  }

  @font-face {
      font-family: "Lato-Bold";
      src: url("../fonts/Lato-Bold.ttf");
  }

  @font-face {
      font-family: "Lato-Medium";
      src: url("https://cumi.id/assets/fonts/Lato-Medium.ttf");
  }

  @font-face {
      font-family: "Lato-Regular";
      src: url("../fonts/Lato-Regular.ttf");
  }

  a {
      color: black;
  }

  ::-webkit-scrollbar {
      width: 0px;
      /* remove scrollbar space */
      background: transparent;
      /* optional: just make scrollbar invisible */
  }

  /*helper*/
  .font-regular {
      font-family: "Lato-Regular";
  }

  .font-medium {
      font-family: "Lato-Medium";
  }

  .font-bold {
      font-family: "Lato-Bold";
  }

  .font-18 {
      font-size: 18px;
  }

  .font-black {
      font-family: "Lato-Black";
  }

  .capitalize {
      text-transform: capitalize;
  }

  .margin-top-50 {
      margin-top: 50px;
  }

  .margin-top-0 {
      margin-top: 0px;
  }

  .margin-top-100 {
      margin-top: 100px;
  }

  .padding-top-20 {
      padding-top: 20px;
  }

  .padding-10 {
      padding: 10px;
  }

  .padding-top-0 {
      padding-top: 0px;
  }

  .padding-top-5 {
      padding-top: 5px;
  }

  .padding-top-10 {
      padding-top: 10px;
  }

  .padding-20 {
      padding: 20px;
  }

  .padding-top-50 {
      padding-top: 50px;
  }

  .padding-right-0 {
      padding-right: 0px;
  }

  .padding-right-50 {
      padding-right: 50px !important;
  }

  .padding-right-10 {
      padding-right: 10px;
  }

  .padding-left-0 {
      padding-left: 0px;
  }

  .padding-left-10 {
      padding-left: 10px;
  }

  .padding-bottom-10 {
      padding-bottom: 10px !important;
  }

  .padding-bottom-0 {
      padding-bottom: 0px !important;
  }

  .margin-auto {
      margin: auto;
  }

  .margin-top-20 {
      margin-top: 20px;
  }

  .margin-top-30 {
      margin-top: 30px;
  }

  .margin-top-10 {
      margin-top: 10px;
  }

  .margin-top-5 {
      margin-top: 5px !important;
  }

  .background-grey {
      background: #FAFAFA;
  }

  .background-orange {
      background: #f27c4e;
  }

  .margin-bottom-20 {
      margin-bottom: 20px !important;
  }

  .margin-bottom-10 {
      margin-bottom: 10px !important;
  }

  .margin-bottom-5 {
      margin-bottom: 5px;
  }

  .margin-bottom-50 {
      margin-bottom: 50px;
  }

  .margin-bottom-30 {
      margin-bottom: 30px;
  }

  .position-relative {
      position: relative;
  }

  .margin-none {
      margin: 0px !important;
  }

  .margin-left-20 {
      margin-left: 20px;
  }

  .margin-left-0 {
      margin-left: 0px !important;
  }

  .margin-left-10 {
      margin-left: 10px;
  }

  .margin-right-20 {
      margin-right: 20px;
  }

  .margin-right-0 {
      margin-right: 0px !important;
  }

  .margin-right-10 {
      margin-right: 10px;
  }

  .margin-right-15 {
      margin-right: 15px;
  }

  .margin-bottom-0 {
      margin-bottom: 0px !important;
  }

  .table-center-vertical {
      vertical-align: middle !important;
  }

  .color-grey {
      color: grey !important;
  }

  .color-grey-4a {
      color: #4a4a4a !important;
  }

  .color-grey-form {
      color: #c5c5c5 !important;
  }

  .star-container {
      color: #ABB2B9;
  }

  .text-orange {
      color: #f27c4e;
  }

  .text-green {
      color: #7ED321;
  }

  .text-blue {
      color: #4A90E2;
  }

  .text-black {
      color: #717171 !important;
  }

  .text-fullblack {
      color: black;
  }

  .text-red {
      color: #b44953;
  }

  .hover-red:hover {
      color: #b44953 !important;
  }

  .full-width {
      width: 100%;
  }

  .text-white {
      color: #f4ecec;
  }

  .text-bold {
      font-weight: bold;
  }

  .min-height-80 {
      min-height: 80%;
  }

  .button-round-orange {
      border-radius: 20px;
      background-color: #f27c4e !important;
  }

  .button-round-orange:hover {
      border-radius: 20px;
      background: #b44953 !important;
  }

  .button-round-white {
      border-radius: 20px;
      background-color: white !important;
      color: #f27c4e !important;
      border-color: #80808052 !important;
      padding-left: 20px;
      padding-right: 20px;
  }

  .button-round-white:hover {
      border-radius: 20px;
      background-color: #f27c4e !important;
      color: white !important;
      border-color: transparent !important;
      padding-left: 20px;
      padding-right: 20px;
  }

  .button-round-grey {
      border-radius: 20px;
      background-color: white !important;
      color: #a9a9a9 !important;
      border-color: #80808052 !important;
      padding-left: 20px;
      padding-right: 20px;
  }

  .button-round-grey:hover {
      border-radius: 20px;
      background-color: #f27c4e !important;
      color: white !important;
      border-color: transparent !important;
      padding-left: 20px;
      padding-right: 20px;
  }

  .text-right {
      text-align: right;
  }

  .text-center {
      text-align: center;
  }

  .text-left {
      text-align: left;
  }

  .float-right {
      float: right;
  }

  .float-left {
      float: left;
  }

  .img-black {
      filter: grayscale(100%);
  }

  .max-width-80 {
      max-width: 80%;
  }

  .font-size-12 {
      font-size: 12px;
  }

  .font-size-14 {
      font-size: 14px;
  }

  /*end helper*/