.checkbox {
  padding-right: 60%;
}

:root {
  --gutter: 20px;
}

h1 {
  font-weight: bolder;
  font-size: large;
}

.app {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 10px;
  padding: 10px;
  align-items: center;
}

.banklist {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: center;
  width: 100%;
}

.banklist>* {
  grid-column: 2 / -2;
}

.banklist>.full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 20px repeat(10, calc(50% - var(--gutter) * 2)) 10px;
  grid-template-rows: minmax(150px, 1fr);
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(0.75 * var(--gutter));
  margin-bottom: calc(-0.5 * var(--gutter));
}

.hs:before,
.hs:after {
  content: "";
}

/* Hide scrollbar */
.hide-scroll {
  overflow-y: hidden;
  margin-bottom: calc(-0.1 * var(--gutter));
}

/* Demo styles */

ul {
  list-style: none;
  padding: 0;
}

.banklist {
  /* width: 375px;
  height: 200px; */
  overflow-y: scroll;
}

.item {
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background:#FBFCFD;
  box-shadow: 0px 0px 2px #E5E5E5;
  border: 2px solid #F5F6F9;
  border-radius: 8px;
}

.item-one {
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border-radius: 8px;
}

.row {
  display: flex;
  width: 100%;
}

.left {
  flex: 10%;
  margin-top: auto;
  margin-bottom: auto;
  /* margin-right: 1rem; */
}

.right {
  width: 90%;
}

.account {
  padding: calc(var(--gutter) / 2 * 1.5);
  margin: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  background: #fff;
  border-radius: 8px;
  align-items: center;
  scroll-snap-align: center;
  justify-content: center;
}

.account img {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 10px;
  height: 75px;
}

.accountLogo {
  display: flex;
  float: left;
}

.accountDetails {
  padding-left: 20px;
}

.accountConsents {
  padding-left: 50px;
}

.accountConsents h1 {
  font-size: x-large;
}

.account a {
  padding-left: 50px;
}

.accountList {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: center;
  margin: 10px;
}

.accountList>* {
  grid-column: 2 / -2;
}

.accountList>.full {
  grid-column: 1 / -1;
}

.vs {
  overflow-y: auto;
  scroll-snap-type: y proximity;
  padding-bottom: calc(0.75 * var(--gutter));
  margin-bottom: calc(-0.5 * var(--gutter));
}

.vs:before,
.vs:after {
  content: "";
}