document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

.profile-page {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-areas: 'user-info settings maintenance-mode partner-info';
  gap: 20px;
  margin-bottom: 20px;
  @include screen('xl') {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'user-info settings' 'partner-info maintenance-mode' 'partner-info .';
  }
  @include screen('m') {
    grid-template-columns: 1fr;
    grid-template-areas: 'user-info' 'settings' 'partner-info' 'maintenance-mode';
  }
}

.profile-page-card {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  h4 {
    margin-bottom: 20px;
    font-weight: 400;
  }
}

.user-info {
  grid-area: user-info;
}

.maintenance-mode {
  grid-area: maintenance-mode;
}

.settings {
  grid-area: settings;
}

.partner-info {
  grid-area: partner-info;
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 21px;
  font-weight: 400;
  h4 {
    margin-bottom: 0;
  }
}

.card-body {
  padding: 20px;
  mat-slide-toggle {
    margin-left: 10px;
  }
}

.card-item {
  margin: 20px 0;
  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .card-key {
    color: var(--color-grey-dark);
    font-size: 14px;
    margin-bottom: 7px;
    font-weight: 700;
  }
  .card-value {
    font-weight: 300;
    font-size: 16px;
    .role-value {
      color: var(--color-accent);
      font-weight: 500;
      svg-icon {
        margin-right: 4px;
      }
    }
    .change-email-actions,.confirm-email-actions {
      margin-left: 15px;
      display: inline-block;
      .btn {
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
      @include screen('s') {
        display: block;
        margin-top: 15px;
        margin-left: 0;
      }
    }
    .change-email-actions {
      margin-left: 0;
    }
  }
  svg-icon {
    font-size: 15px;
    margin-left: 4px;
    line-height: 18px;
  }
  .svg-icon-check {
    color: var(--color-green);
  }
  .svg-icon-cross {
    color: var(--color-red);
  }
}

.card-hint {
  font-size: 12px;
  color: var(--color-grey-dark);
  margin-top: 10px;
}

.card-buttons {
  margin-top: 30px;
  .btn {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}

.card-footer {
  margin-top: 20px;
  text-align: center;
}

.partner-actions {
  margin-top: 15px;
  text-align: center;
}

<div class="profile-page">
  <div class="profile-page-card user-info">
    <div class="card-header">
      <h4>My Information</h4>
    </div>
    <div class="card-body">
      <div class="card-item">
        <div class="card-key">User Name:</div>
        <div class="card-value">{{ userInfo?.data.username }}</div>
      </div>
      <div class="card-item">
        <div class="card-key">Organization Name:</div>
        <div class="card-value">{{ userInfo?.data.organizationName }}</div>
      </div>
      <div class="card-item">
        <div class="card-key">Subscription End Date</div>
        <div class="card-value">
        </div>
      </div>
      <div class="card-item">
        <div class="card-key">E-mail:</div>
        <div class="card-value">
          {{ userInfo?.data.email }}

          <div class="confirm-email-actions">
            <button class="btn btn--small" (click)="confirmEmail()">Confirm E-mail</button>
          </div>
        </div>
      </div>
      <div class="card-item">
        <div class="card-key">Role:</div>
        <div class="card-value">
          <div class="role-value">
            <svg-icon [key]="userInfo?.data.role.toLowerCase()"></svg-icon>
            {{userInfo?.data.role}}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="profile-page-card maintenance-mode" *ngIf="userInfo?.data.role.toLowerCase() === 'admin'">
    <div class="card-header">
      <h4>Maintenance mode</h4>
    </div>
    <div class="card-body">
      <div>
        <span>Maintenance Mode:</span>
        <mat-slide-toggle [color]='toggleColor' [checked]="userInfo?.isMaintenanceModeEnabled" (change)="isMaintenanceModeChanged($event)">
        </mat-slide-toggle>
      </div>
      <div class="card-hint">
        Maintenance Mode can be used by admin to disable all actions on the Server Detail page.
      </div>
    </div>
  </div>

  <div class="profile-page-card settings">
    <div class="card-header">
      <h4>Settings</h4>
    </div>
    <div class="card-body">
      <div>
        <div class="card-item">
          <div class="card-key">Password:</div>
          <div class="card-value">
            <button class="btn btn--transparent btn--medium" (click)="openChangePasswordDialog()">Change Password</button>
          </div>
        </div>
        <div class="card-item">
          <div class="card-key">E-mail:</div>
          <div class="card-value">
            <div class="change-email-actions">
              <button class="btn btn--transparent btn--medium" [disabled]="!userInfo?.data.isEmailConfirmed" (click)="openChangeEmailDialog()">Change E-mail</button>
            </div>
          </div>
        </div>
        <div *ngIf="userInfo?.data.isEmailConfirmed">
          <span>E-mail Notifications:</span>
          <mat-slide-toggle [color]='toggleColor' [checked]="userInfo?.data.isEmailNotificationEnabled" (change)="isEmailNotificationChanged($event)">
          </mat-slide-toggle>
        </div>
        <div *ngIf="userInfo?.data.isEmailConfirmed" class="card-hint">
          Allows to receive Taikun notifications on e-mail.
        </div>
        <div class="card-item">
          <div class="card-value">
            <button class="btn btn--danger btn--small" (click)="openDeleteDialog(userInfo.data.username)">Delete account</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="profile-page-card partner-info" *appUserRoleIs="['admin','partner']">
    <div class="card-header">
      <h4>Partner</h4>
    </div>
    <div class="card-body">
      <form class="form" [formGroup]="partnerForm" (ngSubmit)="updatePartnerInfo()">
        <div class="form-field form-field--full-width p-0">
          <label for="partner-name">Name</label>
          <input id="partner-name" matInput placeholder="Name" formControlName="name">
        </div>
        <div class="form-field form-field--full-width p-0">
          <label for="partner-link">Link</label>
          <input id="partner-link" placeholder="Link" formControlName="link">
          <mat-error *ngIf="partnerForm?.get('link')?.errors?.pattern">Should have URL format,e.g. 'https://example.com'</mat-error>
        </div>
        <div class="image-upload">
          <label for="logo-upload" class="button-like">Choose Logo</label>
          <span class="file-name">
            {{ partnerFormData?.get('logo')?.name }}
          </span>
          <input type="file" id="logo-upload" class="hidden-input" formControlName="logo" (change)="fileChange($event.target.files)" />
        </div>
        <div class="form-actions">
          <button class="btn btn--accent">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>