.steam-payments {
  position:relative;
  padding:34px 40px 40px;
  background:var(--color-block-background);
  border-radius:var(--border-radius)
}
.steam-payments._alt {
  margin-top:44px;
  padding:0;
  background:transparent;
  border-radius:0
}
.steam-payments__balance {
  margin-bottom:25px
}
.steam-payments__methods {
  margin-top:24px
}
.steam-payments__summary {
  margin-top:30px
}
.steam-payments__receipt {
  margin-top:20px
}
.steam-payments__note {
  display:flex;
  align-items:center;
  margin-top:30px
}
.steam-payments__note .svg-icon {
  flex:0 0 auto;
  margin-right:15px;
  font-size:20px
}
.steam-payments__quicknav {
  display:flex;
  margin:25px -7px
}
.steam-payments__quicknav-col {
  flex:0 0 50%;
  padding-left:7px;
  padding-right:7px
}
@media only screen and (max-width:1440px) {
  .steam-payments {
    padding:28px 30px 30px;
    border-radius:var(--border-radius-hd)
  }
  .steam-payments__receipt {
    margin-top:20px
  }
  .steam-payments__methods {
    margin-top:16px
  }
  .steam-payments__note,
  .steam-payments__summary {
    margin-top:20px
  }
  .steam-payments__note .svg-icon {
    margin-right:15px;
    font-size:15px
  }
}
@media only screen and (max-width:768px) {
  .steam-payments {
    margin-top:20px;
    padding:0;
    background:transparent
  }
  .steam-payments__methods {
    margin-top:20px
  }
  .steam-payments__receipt,
  .steam-payments__summary {
    margin-top:15px
  }
  .steam-payments__note {
    align-items:flex-start;
    margin-top:20px;
    margin-bottom:20px
  }
  .steam-payments__note .svg-icon {
    margin-right:15px;
    font-size:16px
  }
}
.methods {
  display:flex;
  align-items:center;
  margin-left:-10px;
  margin-right:-10px;
  margin-bottom:-10px;
  flex-wrap:wrap
}
.methods__col {
  flex:0 0 25%;
  min-width:1px;
  margin-bottom:20px;
  padding:0 10px;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none
}
.methods__toggle {
  display:flex;
  flex-direction:column;
  min-height:120px;
  padding:24px 30px;
  background:var(--color-block-background);
  border:1px solid transparent;
  border-radius:var(--border-radius);
  cursor:pointer;
  transition:background .25s ease-in-out,border .25s ease-in-out
}
.methods__toggle:hover {
  background:var(--color-block-background-hover)
}
.methods__toggle._active .methods__toggle-icon {
  transform:rotate(180deg)
}
.methods__toggle-icon {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:20px;
  height:20px;
  margin-top:auto;
  margin-left:auto;
  margin-bottom:3px;
  font-size:0;
  background:var(--color-background);
  border-radius:50%;
  will-change:transform;
  transition:transform .25s ease-in-out
}
.methods__toggle-icon .svg-icon {
  font-size:8px
}
@media only screen and (max-width:1800px) {
  .spage-alt .methods__col {
    flex-basis:33.333333%
  }
}
@media only screen and (max-width:1440px) {
  .methods {
    margin-left:-5px;
    margin-right:-5px
  }
  .methods__col {
    flex-basis:33.333333%;
    margin-bottom:10px;
    padding-left:5px;
    padding-right:5px
  }
  .methods__toggle {
    min-height:110px;
    padding:19px 24px;
    border-radius:var(--border-radius-hd)
  }
  .spage-alt .methods__col {
    flex-basis:25%
  }
}
@media only screen and (max-width:1200px) {
  .spage-alt .methods__col {
    flex-basis:33.333333%
  }
}
@media only screen and (max-width:768px) {
  .methods {
    display:block;
    margin-left:0;
    margin-right:0;
    margin-bottom:0
  }
  .methods__col {
    flex-basis:100%;
    margin-bottom:5px;
    padding:0
  }
  .methods__toggle {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    min-height:70px;
    border-radius:var(--border-radius)
  }
  .methods__toggle-title br {
    display:none
  }
  .methods__toggle-icon {
    width:25px;
    height:25px;
    margin-top:0
  }
  .methods__toggle-icon .svg-icon {
    font-size:10px
  }
}
.summary {
  display:flex;
  align-items:center
}
.summary__scope {
  display:flex;
  flex:0 0 300px;
  flex-direction:column
}
.summary__scope-row {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.summary__scope-row span:first-child {
  padding-right:10px
}
.summary__scope-row:not(:last-child) {
  margin-bottom:15px
}
.summary__cta {
  flex:1 1 auto;
}

.steam-page .summary__cta {
  padding-left:60px;
}


@media only screen and (max-width:1440px) {
  .summary__scope {
    flex-basis:270px
  }
  .summary__scope-row:not(:last-child) {
    margin-bottom:10px
  }
  .summary__cta {
    padding-left:40px
  }
}
@media only screen and (max-width:768px) {
  .summary {
    flex-direction:column-reverse;
    align-items:flex-start
  }
  .summary__scope {
    flex-basis:100%;
    width:100%;
    margin-top:20px;
    padding-right:0
  }
  .summary__scope-row:not(:last-child) {
    margin-bottom:15px
  }
  .summary__cta {
    width:100%;
    padding-left:0
  }

  .steam-page .summary__cta {
    padding-left:0;
  }
  
}
.balance {
  padding:20px 25px 15px;
  border:1px solid var(--color-border);
  border-radius:var(--border-radius)
}
.balance__row {
  display:flex;
  align-items:center
}
.balance__row:not(:last-child) {
  margin-bottom:10px
}
.balance__label {
  flex:1 1 auto;
  padding-right:10px
}