#app {
  width: 100vw;
  height: 100vh;
  visibility: hidden;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.interface {
  width: calc(0.092592592vh * 852);
  height: calc(0.092592592vh * 746);
  border-radius: calc(0.092592592vh * 26);
  /* background: var(--backgroundGradient); */
  padding: calc(0.092592592vh * 52) calc(0.092592592vh * 62) 0 calc(0.092592592vh * 62);
  box-sizing: border-box;
  position: relative;
  flex-direction: column;
  overflow: hidden;
}
.interface header {
  display: flex;
  gap: calc(0.092592592vh * 13);
  align-items: flex-end;
  width: 100%;
  border-bottom: calc(0.092592592vh * 1) #ffffff26 solid;
  height: -moz-fit-content;
  height: fit-content;
}
.interface header p.gilroy800 {
  font-size: calc(0.092592592vh * 52.8);
  background: radial-gradient(70.24% 70.24% at 50% 50%, #fff 0%, #d3d3d3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.interface header p.brothership {
  font-size: calc(0.092592592vh * 43.5);
  background: radial-gradient(70.24% 70.24% at 50% 50%, var(--secondary-color) 0%, var(--secondary-color) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 135%;
  margin-bottom: calc(0.092592592vh * -5);
}
.interface .content {
  height: 87%;
  width: 100%;
  position: relative;
  margin-top: calc(0.092592592vh * 20);
  display: flex;
  gap: calc(0.092592592vh * 49);
}
.interface .content .left {
  display: flex;
  flex-direction: column;
  gap: calc(0.092592592vh * 17);
  width: calc(0.092592592vh * 254);
}
.interface .content .left .card-container {
  width: calc(0.092592592vh * 254);
  height: calc(0.092592592vh * 164);
  background-image: url(../img/card.png);
  background-size: 100% 100%;
}
.interface .content .left .card-container .texts {
  padding: calc(0.092592592vh * 18) 0 calc(0.092592592vh * 18) calc(0.092592592vh * 23);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.interface .content .left .card-container .texts p.p-white55 {
  font-size: calc(0.092592592vh * 14);
}
.interface .content .left .card-container .texts p.p-white {
  font-size: calc(0.092592592vh * 16);
}
.interface .content .left .list-of-transactions {
  display: flex;
  flex-direction: column;
  gap: calc(0.092592592vh * 13);
}
.interface .content .left .list-of-transactions ::-webkit-scrollbar {
  display: none;
}
.interface .content .left .list-of-transactions .scroll-container {
  overflow: auto;
  height: calc(0.092592592vh * 333);
}
.interface .content .left .list-of-transactions .scroll-container ul {
  display: flex;
  flex-direction: column;
  gap: calc(0.092592592vh * 9);
  width: 100%;
}
.interface .content .left .list-of-transactions .scroll-container ul li {
  width: 100%;
  height: calc(0.092592592vh * 48);
  border-radius: calc(0.092592592vh * 5);
  background: radial-gradient(141.05% 2978.01% at 0% 11.46%, #ffffff60 0%, #ffffff21 100%);
  padding: calc(0.092592592vh * 7);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.interface .content .left .list-of-transactions .scroll-container ul li .hist-left {
  display: flex;
  align-items: center;
  gap: calc(0.092592592vh * 10);
}
.interface .content .left .list-of-transactions .scroll-container ul li .hist-left .icon-container {
  width: calc(0.092592592vh * 34);
  height: calc(0.092592592vh * 34);
  border-radius: calc(0.092592592vh * 2);
}
.interface .content .left .list-of-transactions .scroll-container ul li .hist-left .icon-container svg {
  width: calc(0.092592592vh * 17);
  height: calc(0.092592592vh * 17);
}
.interface .content .left .list-of-transactions .scroll-container ul li p.gilroy400 {
  font-size: calc(0.092592592vh * 12);
}
.interface .content .left .list-of-transactions .scroll-container ul li p.gilroy500 {
  font-size: calc(0.092592592vh * 15);
  margin-top: calc(0.092592592vh * 1);
}
.interface .content .left .list-of-transactions .scroll-container ul li.received p.gilroy500 {
  color: var(--primary-color);
}
.interface .content .left .list-of-transactions .scroll-container ul li.received .icon-container {
  background: var(--icon-container);
}
.interface .content .left .list-of-transactions .scroll-container ul li.withdraw p.gilroy500 {
  color: #e43742;
}
.interface .content .left .list-of-transactions .scroll-container ul li.withdraw .icon-container {
  background: #e4374233;
}
.interface .content .left .list-of-transactions .scroll-container ul li.transfer p.gilroy500 {
  color: #a0cf1a;
}
.interface .content .left .list-of-transactions .scroll-container ul li.transfer .icon-container {
  background: #a0cf1a33;
}
.interface .content .right {
  display: flex;
  flex-direction: column;
  gap: calc(0.092592592vh * 32);
  height: 100%;
  width: calc(0.092592592vh * 428);
}
.interface .content .right .top-cont {
  display: flex;
  flex-direction: column;
  gap: calc(0.092592592vh * 14);
}
.interface .content .right img {
  width: calc(0.092592592vh * 440);
}
.interface .content .right .buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: calc(0.092592592vh * 189);
}
.interface .content .right .buttons .button {
  width: calc(0.092592592vh * 132);
  height: 100%;
  border-radius: calc(0.092592592vh * 3);
  background: radial-gradient(168.34% 126.46% at 50% 0%, #ffffff2d 0%, #ffffff48 100%);
  overflow: hidden;
  transition: 0.5s ease-in-out;
}
.interface .content .right .buttons .button:hover {
  transform: scale(1.05);
}
.interface .content .right .buttons .button .top-container {
  height: calc(0.092592592vh * 142);
  width: 100%;
  position: relative;
}
.interface .content .right .buttons .button .top-container svg {
  width: calc(0.092592592vh * 132);
  height: calc(0.092592592vh * 107);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.interface .content .right .buttons .button .top-container img {
  width: calc(0.092592592vh * 132);
  height: calc(0.092592592vh * 142);
  position: relative;
  z-index: 99;
}
.interface .content .right .buttons .button .bottom-container {
  background: #d9d9d91a;
  width: 100%;
  height: calc(0.092592592vh * 47);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.092592592vh * 27);
}
.interface .content .right .buttons .button .bottom-container .texts-column p {
  font-size: calc(0.092592592vh * 12);
}
.interface .content .right .buttons .button .bottom-container svg {
  width: calc(0.092592592vh * 23);
  height: calc(0.092592592vh * 23);
}
.interface .head-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.interface .head-values .texts {
  display: flex;
  flex-direction: column;
}
.interface .head-values .texts p.gilroy400 {
  font-size: calc(0.092592592vh * 12);
}
.interface .head-values .texts p.gilroy600 {
  font-size: calc(0.092592592vh * 14);
}
.interface .head-values .timeline {
  display: flex;
  gap: calc(0.092592592vh * 4);
  height: calc(0.092592592vh * 20);
}
.interface .head-values .timeline p {
  border-radius: calc(0.092592592vh * 2);
  height: 100%;
  font-size: calc(0.092592592vh * 12);
  padding: 0 calc(0.092592592vh * 7);
  transition: 0.2s ease-in-out;
}
.interface .head-values .timeline p.gilroy400 {
  background: #d1d1d175;
}
.interface .head-values .timeline p.gilroy500 {
  background: var(--timeline-button-color);
}
.interface .head-values .indicators-container {
  display: flex;
  gap: calc(0.092592592vh * 22);
}
.interface .head-values .indicators-container .cont {
  display: flex;
  gap: calc(0.092592592vh * 8);
  align-items: center;
}
.interface .head-values .indicators-container .cont p {
  font-size: calc(0.092592592vh * 12);
}
.interface .head-values .indicators-container .cont .indicator {
  width: calc(0.092592592vh * 7);
  height: calc(0.092592592vh * 7);
  border-radius: 50%;
}
.interface .head-values .indicators-container .cont .indicator.i-blue {
  background: var(--primary-color);
  box-shadow: 0px 0px 8px 0px var(--income-shadow);
}
.interface .head-values .indicators-container .cont .indicator.i-red {
  background: var(--red-dot);
  box-shadow: 0px 0px 8px 0px var(--red-dot-shadow);
}
.interface .head-values .indicators-container .cont .indicator.i-green {
  background: var(--other-dot);
  box-shadow: 0px 0px 8px 0px var(--other-dot-shadow);
}
.interface .modal-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
}
.interface .modal-container::before {
  content: "";
  width: calc(0.092592592vh * 601);
  height: calc(0.092592592vh * 601);
  background: red;
  position: absolute;
  left: calc(0.092592592vh * -900);
  border-radius: 50%;
  filter: drop-shadow(calc(0.092592592vh * 1030) 0px calc(0.092592592vh * 50) var(--drop-shadow));
}
.interface .modal-container .modal {
  width: calc(0.092592592vh * 220);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(0.092592592vh * 18);
}
.interface .modal-container .modal .head-texts {
  display: flex;
  flex-direction: column;
  gap: calc(0.092592592vh * 1.5);
}
.interface .modal-container .modal .head-texts p {
  text-align: center;
}
.interface .modal-container .modal .head-texts p.gilroy400 {
  font-size: calc(0.092592592vh * 13);
}
.interface .modal-container .modal .head-texts p.gilroy400.p-grad-100 {
  background: radial-gradient(70.24% 70.24% at 50% 50%, #fff 0%, #d3d3d3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.interface .modal-container .modal .head-texts p.gilroy400.p-grad-55 {
  background: radial-gradient(70.24% 70.24% at 50% 50%, #ffffff8c 0%, #d3d3d38c 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.interface .modal-container .modal .head-texts p.brothership {
  font-size: calc(0.092592592vh * 43.5);
  background: radial-gradient(70.24% 70.24% at 50% 50%, var(--secondary-color) 0%, var(--secondary-color) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.interface .modal-container .modal .inputs {
  display: flex;
  flex-direction: column;
  gap: calc(0.092592592vh * 7);
  width: calc(0.092592592vh * 220);
}
.interface .modal-container .modal .inputs input {
  width: 100%;
  text-align: center;
  border-radius: calc(0.092592592vh * 3);
  border: calc(0.092592592vh * 1) solid #ffffff0d;
  background: #ffffff0d;
  height: calc(0.092592592vh * 56);
  color: #ffffff;
}
.interface .modal-container .modal .inputs input::-moz-placeholder {
  background: radial-gradient(70.24% 70.24% at 50% 50%, #ffffff8c 0%, #d3d3d38c 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.interface .modal-container .modal .inputs input::placeholder {
  background: radial-gradient(70.24% 70.24% at 50% 50%, #ffffff8c 0%, #d3d3d38c 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.interface .modal-container .modal .inputs .row {
  height: calc(0.092592592vh * 53);
  display: flex;
  gap: calc(0.092592592vh * 7);
}
.interface .modal-container .modal .inputs .row .btn {
  box-sizing: border-box;
  border: calc(0.092592592vh * 1) solid red;
  width: 100%;
  border-radius: calc(0.092592592vh * 2);
  transition: 0.2s ease-in-out;
}
.interface .modal-container .modal .inputs .row .btn p {
  font-size: calc(0.092592592vh * 13);
}
.interface .modal-container .modal .inputs .row .btn.btn-green {
  border-color: var(--primary-color);
  background: radial-gradient(88.26% 88.26% at 50% 50%, var(--green-button-first) 0%, var(--green-button-second)26 100%);
}
.interface .modal-container .modal .inputs .row .btn.btn-green:hover {
  box-shadow: 0px 0px calc(0.092592592vh * 250) var(--primary-color) inset;
}
.interface .modal-container .modal .inputs .row .btn.btn-red {
  border-color: #cf1a1a;
  background: radial-gradient(88.26% 88.26% at 50% 50%, #cf1a1a40 0%, #cf1a1a26 100%);
}
.interface .modal-container .modal .inputs .row .btn.btn-red:hover {
  box-shadow: 0px 0px calc(0.092592592vh * 250) #cf1a1a inset;
}

.close-btn {
  width: calc(0.092592592vh * 35);
  height: calc(0.092592592vh * 35);
  border-radius: calc(0.092592592vh * 4);
  background: radial-gradient(115.72% 115.72% at 51.43% 51.43%, #FF4848 0%, #241313 100%);
  box-shadow: 0px 0px calc(0.092592592vh * 3) 0px #FF5656 inset, 0px calc(0.092592592vh * 13) calc(0.092592592vh * 16) 0px #ff484840;
  position: absolute;
  top: calc(0.092592592vh * 28);
  right: calc(0.092592592vh * 28);
  transition: 0.2s ease-in-out;
}
.close-btn:hover {
  transform: scale(1.1);
}
.close-btn svg {
  width: calc(0.092592592vh * 15);
  height: calc(0.092592592vh * 15);
}/*# sourceMappingURL=global.css.map */