/*
:: Font
---------------------------------------------------------------------------- */
/* Heavy */
@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-Heavy.eot');
  src: url('../fonts/FazzNeue/FazzNeue-Heavy.eot') format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-Heavy.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-Heavy.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-HeavyItalic.eot');
  src: url('../fonts/FazzNeue/FazzNeue-HeavyItalic.eot')
      format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-HeavyItalic.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-HeavyItalic.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-HeavyItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-Bold.eot');
  src: url('../fonts/FazzNeue/FazzNeue-Bold.eot') format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-Bold.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-Bold.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-BoldItalic.eot');
  src: url('../fonts/FazzNeue/FazzNeue-BoldItalic.eot')
      format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-BoldItalic.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-BoldItalic.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* Medium */
@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-Medium.eot');
  src: url('../fonts/FazzNeue/FazzNeue-Medium.eot') format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-Medium.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-Medium.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-MediumItalic.eot');
  src: url('../fonts/FazzNeue/FazzNeue-MediumItalic.eot')
      format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-MediumItalic.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-MediumItalic.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

/* Reguler */
@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-Regular.eot');
  src: url('../fonts/FazzNeue/FazzNeue-Regular.eot') format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-Regular.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-Regular.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-Italic.eot');
  src: url('../fonts/FazzNeue/FazzNeue-Italic.eot') format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-Italic.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-Italic.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-Light.eot');
  src: url('../fonts/FazzNeue/FazzNeue-Light.eot') format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-Light.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-Light.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'FazzNeue';
  src: url('../fonts/FazzNeue/FazzNeue-LightItalic.eot');
  src: url('../fonts/FazzNeue/FazzNeueFazzNeue-LightItalic.eot')
      format('embedded-opentype'),
    url('../fonts/FazzNeue/FazzNeue-LightItalic.woff2') format('woff2'),
    url('../fonts/FazzNeue/FazzNeue-LightItalic.woff') format('woff'),
    url('../fonts/FazzNeue/FazzNeue-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

/*
:: Variabel
---------------------------------------------------------------------------- */
:root {
  --color-primary: #0d1667;
  --color-secondary: #f0cb03;
  --color-text: #1a1a1a;
}

/*
:: Thypography
---------------------------------------------------------------------------- */
body {
  font-family: 'FazzNeue';
  color: var(--color-text);
}

img {
  max-width: 100%;
}

.site {
  overflow: hidden;
  position: relative;
}

.navbar {
  background: linear-gradient(45deg, #305d9e 0%, #133f7e 100%);
}

#status-transaksi {
  font-size: 20px;

  display: flex;
  align-items: center;

  /* blackwhite / white */

  color: #ffffff;
}

#status-badge {
  border-radius: 20px;
  float: right;
}