h-usersite/angular/src/app/pages/guest-card/guest-card.component.scss

:host {
  .guest-card {
    display: flex;
    flex-direction: column;
    align-items: center;    
    max-width: 600px;
    margin: 0 auto;

    .top-info {
	padding: 8px 0 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #292929;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 1px solid #000000;
	border-top: 1px solid #888888;
	
	&__level {
	    width: 100%;
	    
	    display: flex;
	    align-items: center;
	    justify-content: space-around;

	    font-size: 16px;
	}

	& p {
	    color: var(--button-color);
	}

	p.top-info__bonus{
	    font-size: 20px;
	}	
    }

    &__qr {
	margin: 10px;
      padding: 10px;
      width: fit-content;
      background-image: linear-gradient(
          #fff 33%,
          transparent 0px,
          transparent 67%,
          #fff 0px
        ),
        linear-gradient(
          90deg,
          #ffe 33%,
          transparent 0px,
          transparent 66%,
          #fff 0px
        ),
        linear-gradient(#fff 33%, transparent 0px, transparent 67%, #fff 0),
        linear-gradient(90deg, #fff 33%, transparent 0, transparent 66%, #fff 0);
      background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
      background-position: 0 0, 0 0, 100% 100%, 100% 100%;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
      cursor: pointer;
    }

    &__user-description {
	background-color: #292929;      
      padding: 14px 24px;                

      p {
	  width: 60%;
	  text-align: center;
	  margin: 0 auto;
	  font-style: normal;
	  font-weight: 400;
	  font-size: 16px;
	  line-height: 19px;
	  letter-spacing: -0.5px;
    color: var(--text-color);
      }

      .price,
      .percent {
	  font-weight: bold;
      }      
    }

    &__purchases-description {
      margin: 0;
      padding: 14px 24px;
      width: 100%;
      text-align: center;
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
      letter-spacing: -0.5px;
      grid-template-columns: calc(100% - 24px) 24px;

      span {
        color: #219653;
      }
    }

    &__level-info {	
	padding-top: 36px;
	padding-left: 36px;
	padding-right: 36px;
      display: flex;
      flex-direction: column;
      align-items: center;

      h2 {
          font-style: normal;
	  font-family: Montserrat;
        font-weight: 700;	
        font-size: 17px;
        line-height: 22px;
        text-align: center;
        letter-spacing: -0.408px;
      }

      input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 5px;
        display: block;
        position: relative;
        background: #231f20;
        box-shadow: 0px 0px 3px #f2c94c59;
        background-image: linear-gradient(#f2c94c, #f2c94c);
        background-size: 70% 100%;
        background-repeat: no-repeat;

        &::before,
        &::after {
          content: " ";
          display: block;
          width: 16px;
          height: 16px;
          border-radius: 100%;
          position: absolute;
          top: -5px;
        }

        &::before {
          background-color: #f2c94c;
          left: 0px;
        }

        &::after {
          background-color: #f2c94c;
          right: 0px;
        }

        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          background: #f2c94c;
          width: 16px;
          height: 16px;
          border-radius: 100%;
          display: none;
        }

        &::-ms-thumb {
          -webkit-appearance: none;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: #f2c94c;
          cursor: ew-resize;
          box-shadow: 0 0 2px 0 #555;
          transition: background 0.3s ease-in-out;
        }

        &::-moz-range-thumb {
          -webkit-appearance: none;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: #f2c94c;
          cursor: ew-resize;
          box-shadow: 0 0 2px 0 #555;
          transition: background 0.3s ease-in-out;
        }
      }

    }

    &__download-app {
      width: 100%;
      position: relative;
      margin-top: 32px;
      display: flex;
      justify-content: flex-end;
      img {
        width: 100%;
        max-width: calc(100% - 16px);
      }
    }

    &__loyalty-program {
      text-align: center;
      color: #7F2061;
      font-style: normal;
      font-weight: bold;
      font-size: 12px;
      line-height: 16px;
      text-decoration: none;
      margin: 17px 0 22px;
    }
  }
}

app-accordion {
  ul {
    li {
      list-style-type: disc;
      margin-left: 16px;
    }
  }
}