.vault { width: 100%; height: 100%; display: flex; flex-direction: column; row-gap: 1rem; position: relative; } .swiper { margin: 0 !important; } .swiper-slide { width: 10% !important; cursor: pointer; } .swiper-slide p { color: #CDB5FF; color: color(display-p3 0.7882 0.7137 1); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: normal; margin: 0 auto; margin-top: .2rem; } .vault-wrapper { width: 100%; flex: 1; display: flex; column-gap: 2rem; padding: 0 2rem; } .card-container { width: 100%; height: 14.375rem; background-repeat: no-repeat; background-size: 100% 100%; position: relative; overflow: hidden; } .swiper-slide{ display: flex!important; flex-direction: column!important; justify-content: center!important; align-items: center!important; } .card-job-text { color: rgba(255, 255, 255, 0.69); color: color(display-p3 1 1 1 / 0.69); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 1.0754rem; font-style: normal; font-weight: 600; line-height: 100%; position: absolute; left: 1.5rem; top: 1rem; } .chip-logo { position: absolute; left: 1.5rem; bottom: 1rem; } .vault-company-money-text { text-align: right; leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 2.25rem; font-style: normal; font-weight: 700; line-height: 115.5%; /* 2.5987rem */ background: linear-gradient(90deg, #75b7ff 0%, #fff 138.29%); background: linear-gradient(90deg, color(display-p3 0.5167 0.71 1) 0%, color(display-p3 1 1 1 / 0) 138.29%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); } .vault-company-money-wrapper { display: flex; flex-direction: column; row-gap: 1rem; } .bank-logo { position: absolute; right: 1.5rem; top: 1rem; } .card-logo { position: absolute; right: -2.5rem; bottom: -2.5rem; width: 10.3125rem; height: 10.3125rem; opacity: 0.3; } .vault-company-amount-input::placeholder { color: rgba(255, 255, 255, 0.47); color: color(display-p3 1 1 1 / 0.47); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.975rem; font-style: normal; font-weight: 600; line-height: normal; } .vault-deposit-button { width: 23.75rem; height: 3.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.625rem; border: 0.125rem solid rgba(0, 0, 0, 0.22); border: 0.125rem solid color(display-p3 0 0 0 / 0.22); background: #75b7ff; background: color(display-p3 0.5167 0.71 1); cursor: pointer; transition: all 0.2s ease; color: #fff; color: color(display-p3 1 1 1); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 1rem; font-style: normal; font-weight: 600; line-height: normal; } .vault-deposit-button:hover { opacity: 0.9; } .vault-deposit-button.red { background: #FB444D; } .vault-deposit-button.black { background: #000; } .vault-deposit-button.green { background: #026E00; } .vault-deposit-button.purple { background: #9F50F0; } .vault-deposit-button.yellow { background: #F68D45; } .vault-withdraw-button:hover { opacity: 0.9; } .vault-withdraw-button { width: 23.75rem; height: 3.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.625rem; border: 0.125rem solid rgba(0, 0, 0, 0.22); border: 0.125rem solid color(display-p3 0 0 0 / 0.22); background: #ff4953; background: color(display-p3 1 0.3569 0.3569); transition: all 0.2s ease; color: #fff; color: color(display-p3 1 1 1); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 1rem; font-style: normal; font-weight: 600; line-height: normal; cursor: pointer; } .vault-company-amount-input { appearance: none; border: none; outline: none; padding: 0 1rem; text-align: center; width: 15.925rem; height: 3.25rem; border-radius: 0.8125rem; border: 0.1625rem solid rgba(0, 0, 0, 0.22); border: 0.1625rem solid color(display-p3 0 0 0 / 0.22); background: rgba(0, 0, 0, 0.53); background: color(display-p3 0 0 0 / 0.53); margin: 0 auto; color: rgba(255, 255, 255, 1); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.975rem; font-style: normal; font-weight: 600; line-height: normal; } .vault-company-money { flex: 1; height: 100%; display: flex; flex-direction: column; row-gap: 2rem; } .vault-money-log { flex: 2; height: 100%; display: flex; flex-direction: column; row-gap: 1rem; } .vault-header-text { color: #fff; color: color(display-p3 1 1 1); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 1.0754rem; font-style: normal; font-weight: 600; line-height: 143.836%; /* 1.5468rem */ } .vault-no-permission { width: 100%; height: 26.2rem; border-radius: 0.93169rem; border: 0.1433rem solid #75B7FF; border: 0.1433rem solid color(display-p3 0.5167 0.71 1); background: rgba(117, 183, 255, 0.10); background: color(display-p3 0.5176 0.7098 1 / 0.10); display: flex; flex-direction: column; row-gap: 1rem; justify-content: center; align-items: center; } .vault-no-permission.red { border: 0.1433rem solid #fb444d36; background: #fb444d36; } .vault-no-permission.yellow { border: 0.1433rem solid #f68c4521; background: #f68c4521; } .vault-no-permission.purple { border: 0.1433rem solid #a050f01e; background: #a050f01e; } .vault-no-permission.green { border: 0.1433rem solid #026E0036; background: #026E0036; } .vault-no-permission.black { border: 0.1433rem solid #00000036; background: #00000036; } .vault-logs { height: 100%; overflow: auto; width: 100%; display: flex; flex-wrap: wrap; row-gap: 1.5rem; column-gap: 1rem; padding: 1rem; align-content: flex-start; margin: 0 auto; } .vault-log { border-radius: 0.737rem; background: #324864; background: color(display-p3 0.214 0.2792 0.3833); width: 23%; height: 10.625rem; flex-shrink: 0; padding: 1rem; display: flex; flex-direction: column; row-gap: .75rem; } .log-info { display: flex; justify-content: space-between; align-items: center; width: 100%; } .log-info p { color: #75B7FF; color: color(display-p3 0.5167 0.71 1); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.68956rem; font-style: normal; font-weight: 400; line-height: normal; } .log-info h2 { color: #FFF; color: color(display-p3 1 1 1); text-align: right; leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.68956rem; font-style: normal; font-weight: 400; line-height: normal; } .log-info.withdraw h2 { color: #FF747A; } .log-info.deposit h2 { color: #83FF87; } .vault-log h1 { color: rgba(255, 255, 255, 0.66); color: color(display-p3 1 1 1 / 0.66); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.83875rem; font-style: normal; font-weight: 400; line-height: normal; } .vault-has-permission { width: 100%; height: 26.2rem; border-radius: 0.93169rem; border: 0.1433rem solid #75B7FF; border: 0.1433rem solid color(display-p3 0.5167 0.71 1); background: rgba(117, 183, 255, 0.10); background: color(display-p3 0.5176 0.7098 1 / 0.10); } .vault-has-permission.red { border: 0.1433rem solid #fb444d36; background: #fb444d36; } .vault-has-permission.yellow { border: 0.1433rem solid #f68c4521; background: #f68c4521; } .vault-has-permission.purple { border: 0.1433rem solid #a050f01e; background: #a050f01e; } .vault-has-permission.black { border: 0.1433rem solid #00000036; background: #00000036; } .vault-has-permission.green { border: 0.1433rem solid #026E0036; background: #026E0036; } .vault-no-permission p { color: rgba(255, 255, 255, 0.47); color: color(display-p3 1 1 1 / 0.47); text-align: center; leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 1.2435rem; font-style: normal; font-weight: 600; line-height: normal; }