:root {
  --minix-primary: #578493;
  --minix-primary-dark: #476c7b;
  --minix-text: #37474f;
  --minix-muted: #78909c;
  --minix-border: #eceff1;
  --minix-soft: #f5f7f8;
  --minix-white: #ffffff;
}

html,
body,
#app,
.v-application,
.v-application__wrap {
  min-height: 100%;
}

html,
body {
  overflow: auto !important;
  background: #dfe8ed;
}

body {
  margin: 0;
  color: var(--minix-text);
  font-family: Inter, Roboto, Arial, sans-serif;
}

#app {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

.profile-container {
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 34px;
  color: var(--minix-text) !important;
  background:
    linear-gradient(rgba(231, 241, 245, .50), rgba(231, 241, 245, .50)),
    url('/siteBG.png') center center / cover fixed no-repeat !important;
}

.profile-container > .v-container:first-of-type {
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  height: auto !important;
  min-height: 94px;
  margin: 0 auto;
  padding: 14px 18px 8px !important;
}

.profile-container > .v-container:first-of-type > .v-row {
  align-items: center;
  margin: 0 !important;
}

.profile-container > .v-container:first-of-type .v-img {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .14));
}

.profile-container > .v-container:first-of-type .v-chip {
  color: var(--minix-text) !important;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 5px 16px rgba(55, 71, 79, .12) !important;
}

.profile-container > .oh-bg,
.oh-bg {
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  height: auto !important;
  min-height: 52px;
  margin: 0 auto 16px !important;
  padding: 6px 16px !important;
  color: #fff;
  background: rgba(30, 41, 59, .42) !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(30, 41, 59, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.oh-bg > .v-row {
  align-items: center;
  min-height: 38px;
  margin: 0 !important;
}

.profile-container > .v-container:nth-of-type(3) {
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 !important;
}

.profile-container > .v-container:nth-of-type(3) > .v-row:first-child {
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr) !important;
  grid-template-areas:
    "side main"
    "side widgets";
  align-items: start;
  gap: 16px;
  margin: 0 !important;
}

.profile-container > .v-container:nth-of-type(3) > .v-row:first-child > .v-col {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

.profile-container > .v-container:nth-of-type(3) > .v-row:first-child > .v-col:nth-child(1) {
  grid-area: side;
}

.profile-container > .v-container:nth-of-type(3) > .v-row:first-child > .v-col:nth-child(2) {
  grid-area: main;
  min-width: 0;
}

.profile-container > .v-container:nth-of-type(3) > .v-row:first-child > .v-col:nth-child(3) {
  grid-area: widgets;
  min-width: 0;
}

.profile-container .avi {
  height: auto !important;
  max-height: none !important;
  color: var(--minix-text) !important;
  background: var(--minix-white) !important;
  border: 1px solid var(--minix-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px -10px rgba(87, 132, 147, .15) !important;
  overflow: hidden;
}

.profile-container > .v-container:nth-of-type(3)
> .v-row:first-child > .v-col:nth-child(1) .avi {
  min-height: 820px;
}

.profile-container > .v-container:nth-of-type(3)
> .v-row:first-child > .v-col:nth-child(2) .avi {
  min-height: 420px;
}

.profile-container .swIBtn {
  color: var(--minix-primary) !important;
  background: #fff !important;
  border: 1px solid var(--minix-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 10px rgba(55, 71, 79, .08) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.profile-container .swIBtn:hover {
  transform: translateY(-2px);
  border-color: #b0bec5 !important;
  box-shadow: 0 7px 16px rgba(87, 132, 147, .18) !important;
}

.profile-container .avi-bg {
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbfc, #edf3f5) !important;
  border: 1px solid var(--minix-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(55, 71, 79, .09) !important;
}

.profile-container .avi-bg-selected {
  border-color: var(--minix-primary) !important;
  box-shadow:
    0 0 0 3px rgba(87, 132, 147, .16),
    0 10px 25px rgba(55, 71, 79, .12) !important;
}

.profile-container .avatar-counter {
  color: var(--minix-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
}

.profile-container .swPBtn {
  min-height: 36px !important;
  padding: 0 15px !important;
  color: #607d8b !important;
  text-transform: none !important;
  background: var(--minix-soft) !important;
  border: 1px solid var(--minix-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.profile-container .swPBtn.v-btn--active,
.profile-container .v-btn--active.swPBtn {
  color: #fff !important;
  background: linear-gradient(90deg, #4fa3a5, var(--minix-primary)) !important;
  border-color: transparent !important;
  box-shadow: 0 5px 14px rgba(87, 132, 147, .22) !important;
}

.profile-container .spaces-container {
  padding-top: 10px !important;
}

.profile-container .spaces-grid {
  align-content: start;
}

.profile-container .space-column {
  padding: 7px !important;
}

.profile-container .space-card {
  overflow: hidden;
  border: 1px solid var(--minix-border);
  border-radius: 11px !important;
  box-shadow: 0 3px 9px rgba(55, 71, 79, .07) !important;
}

.profile-container .space-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 9px 20px rgba(87, 132, 147, .18) !important;
}

.profile-container .space-name {
  max-width: 150px !important;
  margin-top: 5px;
  color: var(--minix-text);
}

.profile-container > .v-container:nth-of-type(3)
> .v-row:first-child > .v-col:nth-child(3) > .avi {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 118px auto;
  gap: 12px;
  min-height: 0 !important;
  padding: 16px !important;
}

.profile-container > .v-container:nth-of-type(3)
> .v-row:first-child > .v-col:nth-child(3) > .avi
> .v-card-title {
  display: none !important;
}

.profile-container > .v-container:nth-of-type(3)
> .v-row:first-child > .v-col:nth-child(3) > .avi
> .widgetImg {
  width: 100%;
  height: 118px !important;
  padding: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--minix-border);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .03);
}

.profile-container > .v-container:nth-of-type(3)
> .v-row:first-child > .v-col:nth-child(3) > .avi
> p {
  margin: 0 !important;
  padding: 3px 6px;
  color: var(--minix-text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.profile-container .v-divider {
  border-color: var(--minix-border) !important;
  opacity: 1;
}

.profile-container h1,
.profile-container h2,
.profile-container h3,
.profile-container p {
  color: inherit;
}

@media (max-width: 959px) {
  .profile-container > .v-container:first-of-type,
  .profile-container > .oh-bg,
  .profile-container > .v-container:nth-of-type(3) {
    width: min(100% - 20px, 760px);
  }

  .profile-container > .v-container:nth-of-type(3) > .v-row:first-child {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "side"
      "main"
      "widgets";
  }

  .profile-container > .v-container:nth-of-type(3)
  > .v-row:first-child > .v-col:nth-child(1) .avi {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .profile-container > .v-container:first-of-type .v-row {
    flex-direction: column;
  }

  .profile-container > .v-container:first-of-type .v-col {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .profile-container > .v-container:nth-of-type(3)
  > .v-row:first-child > .v-col:nth-child(3) > .avi {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}