html, body {
  margin: 0;
  padding: 0;
  background-color: #424242; }

.body {
  background-color: #424242;
  color: black; }

* {
  font-family: 'the-1-official-regular', 'Open Sans', sans-serif;
  font-weight: 400; }

.logo {
  display: flex;
  align-items: center;
  padding: 20px; }
  .logo img {
    width: 100px;
    height: 100px;
    border-radius: 60px; }
  .logo span {
    margin-left: 20px;
    color: white; }

.line-display-name {
  font-size: 30px; }

.rmd-tab-panel.panel-bg {
  overflow-x: auto; }

.rmd-list, .rmd-app-bar__title {
  font-family: inherit; }

@media (max-width: 568px) {
  .logo {
    display: flex;
    align-items: center;
    padding: 0; }
    .logo img {
      width: 100px;
      height: 100px;
      border-radius: 60px;
      margin-left: 20px; }
    .logo span {
      margin-left: 20px;
      color: white; } }

.list {
  padding: 0px;
  background-color: white;
  margin: 8px 30px 10px 30px;
  min-width: 300px;
  justify-content: center;
  line-height: initial; }

.list-item-container {
  border-bottom: 8px solid #424242;
  padding: 0; }

a {
  color: black;
  text-decoration: none; }

.list-item {
  display: flex;
  flex-direction: column;
  position: relative; }
  .list-item[grayout=true] {
    width: 100%;
    opacity: 0.8;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); }

.list-item > div {
  word-wrap: break-word; }

.list-detail {
  display: flex;
  flex-direction: row; }

.box {
  display: flex;
  background-color: #fff;
  flex-direction: column;
  height: 240px; }
  .box.reward-image {
    position: relative;
    flex: 0 0 240px; }
    .box.reward-image img {
      height: 100%; }

.detail-voucher {
  padding: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff; }
  .detail-voucher .header {
    margin-bottom: 10px;
    font-size: 1.6em;
    font-weight: 400;
    word-wrap: break-word;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .detail-voucher .content {
    font-size: 1.2em;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .detail-voucher .used, .detail-voucher .date, .detail-voucher .expired {
    margin-top: auto;
    margin-bottom: -5px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1em; }
  .detail-voucher .date i {
    font-size: 1.4em;
    line-height: inherit; }

.zigzag {
  position: absolute;
  right: 0px;
  top: 0;
  width: 7px;
  height: calc(100% + 10px);
  background: linear-gradient(-137deg, white 6px, transparent 0) 0 5px, linear-gradient(320deg, white 5px, transparent 0) 0 5px;
  background-position: left bottom;
  background-repeat: repeat-y;
  background-size: 10px 10px; }

.ribbon {
  position: absolute;
  left: -5px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 100px;
  height: 100px;
  text-align: right; }

.ribbon span {
  font-size: 14px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 110px;
  display: block;
  background: #e72027;
  box-shadow: 0 3px 10px -5px black;
  position: absolute;
  top: 22px;
  height: 25px;
  left: -24px;
  display: flex;
  align-items: center;
  justify-content: center; }

.ribbon span::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #808080;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #808080; }

.ribbon span::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #808080;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #808080; }

.limit-reached-en span {
  font-size: 12px;
  width: 135px;
  top: 27px; }
  .limit-reached-en span::before {
    left: -5px !important; }
  .limit-reached-en span::after {
    right: 5px !important; }

.inssued-inactive {
  width: 100%;
  opacity: 0.5; }

@media (min-width: 768px) and (max-width: 1024px) {
  .box {
    height: 200px; }
    .box.reward-image {
      flex: 0 0 200px; }
  .detail-voucher .header {
    font-size: 1.4em; }
  .detail-voucher .content {
    font-size: 0.9em;
    -webkit-line-clamp: 2; }
  .detail-voucher .used, .detail-voucher .date, .detail-voucher .expired {
    font-size: 0.8em; }
  .list-item {
    height: 200px; }
    .list-item .image {
      flex: 0 0 200px;
      width: 200px;
      height: 200px; } }

@media (max-width: 767px) {
  .list {
    margin: 8px 10px 0; }
  .detail-voucher .header {
    font-size: 0.9em; }
  .detail-voucher .content {
    font-size: 0.7em;
    -webkit-line-clamp: 1; }
  .detail-voucher .used, .detail-voucher .date, .detail-voucher .expired {
    font-size: 0.65em; } }

@media (min-width: 481px) and (max-width: 767px) {
  .box {
    height: 130px; }
    .box.reward-image {
      flex: 0 0 130px; }
  .header {
    font-size: 0.9em; }
  .list-item {
    height: 130px; }
    .list-item .image {
      flex: 0 0 130px;
      width: 130px;
      height: 130px; } }

@media (max-width: 480px) {
  .box {
    height: 130px; }
    .box.reward-image {
      flex: 0 0 130px; }
  .list-item {
    height: 130px; }
    .list-item .image {
      flex: 0 0 130px;
      width: 130px;
      height: 130px; } }

/* Safari 6.1-10.0 (not 10.1) */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-color-index: 0) {
  .safari-only .limit-reached-en span {
    font-size: 10px; } }

/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .safari-only .limit-reached-en span {
      font-size: 10px; } } }

/* Safari 11+ */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .safari-only .limit-reached-en span {
      font-size: 10px; } } }

@font-face {
  font-family: 'the-1-official-regular';
  font-style: normal;
  font-weight: normal;
  src: url("/static/fonts/The1Official_Regular.ttf"); }

@font-face {
  font-family: 'the-1-official-bold';
  font-style: normal;
  font-weight: normal;
  src: url("/static/fonts/The1Official_Bold.ttf"); }

@font-face {
  font-family: 'the-1-official-light';
  font-style: normal;
  font-weight: normal;
  src: url("/static/fonts/The1Official_Light.ttf"); }

html, body {
  margin: 0;
  font-family: 'the-1-official-regular', 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }