:root {
  --d1: 8.3333333%;
  --e1: 12.5%;
  --t1: 10%;
  --f1: 25%;
}

.t1 {
  width: var(--t1) !important;
}

.t2 {
  width: calc(var(--t1) * 2) !important;
}

.t3 {
  width: calc(var(--t1) * 3) !important;
}

.t4 {
  width: calc(var(--t1) * 4) !important;
}

.t5 {
  width: calc(var(--t1) * 5) !important;
}

.t6 {
  width: calc(var(--t1) * 6) !important;
}

.t7 {
  width: calc(var(--t1) * 7) !important;
}

.t8 {
  width: calc(var(--t1) * 8) !important;
}

.t9 {
  width: calc(var(--t1) * 9) !important;
}

.t10 {
  width: calc(var(--t1) * 10) !important;
}

.f1 {
  width: var(--f1) !important;
}

.f2 {
  width: calc(var(--f1) * 2) !important;
}

.f3 {
  width: calc(var(--f1) * 3) !important;
}

.f4 {
  width: calc(var(--f1) * 4) !important;
}

@media print {
  :root {
    --d1: 8.3333333%;
    --e1: 12.5%;
    --t1: 10%;
    --f1: 25%;
  }

  .e1 {
    width: var(--e1) !important;
  }

  .e2 {
    width: calc(var(--e1) * 2) !important;
  }

  .e3 {
    width: calc(var(--e1) * 3) !important;
  }

  .e4 {
    width: calc(var(--e1) * 4) !important;
  }

  .e5 {
    width: calc(var(--e1) * 5) !important;
  }

  .e6 {
    width: calc(var(--e1) * 6) !important;
  }

  .e7 {
    width: calc(var(--e1) * 7) !important;
  }

  .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .d1 {
    width: var(--d1) !important;
  }

  .d2 {
    width: calc(var(--d1) * 2) !important;
  }

  .d3 {
    width: calc(var(--d1) * 3) !important;
  }

  .d4 {
    width: calc(var(--d1) * 4) !important;
  }

  .d5 {
    width: calc(var(--d1) * 5) !important;
  }

  .d6 {
    width: calc(var(--d1) * 6) !important;
  }

  .d7 {
    width: calc(var(--d1) * 7) !important;
  }

  .d8 {
    width: calc(var(--d1) * 8) !important;
  }

  .d9 {
    width: calc(var(--d1) * 9) !important;
  }

  .d10 {
    width: calc(var(--d1) * 10) !important;
  }

  .d11 {
    width: calc(var(--d1) * 11) !important;
  }

  .d12 {
    width: calc(var(--d1) * 12) !important;
  }
}

/* @responsive behavior for large screens */
@media only screen and (min-width: 1400px) {
  .e1 {
    width: var(--e1) !important;
  }

  .e2 {
    width: calc(var(--e1) * 2) !important;
  }

  .e3 {
    width: calc(var(--e1) * 3) !important;
  }

  .e4 {
    width: calc(var(--e1) * 4) !important;
  }

  .e5 {
    width: calc(var(--e1) * 5) !important;
  }

  .e6 {
    width: calc(var(--e1) * 6) !important;
  }

  .e7 {
    width: calc(var(--e1) * 7) !important;
  }

  .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .d1 {
    width: var(--d1) !important;
  }

  .d2 {
    width: calc(var(--d1) * 2) !important;
  }

  .d3 {
    width: calc(var(--d1) * 3) !important;
  }

  .d4 {
    width: calc(var(--d1) * 4) !important;
  }

  .d5 {
    width: calc(var(--d1) * 5) !important;
  }

  .d6 {
    width: calc(var(--d1) * 6) !important;
  }

  .d7 {
    width: calc(var(--d1) * 7) !important;
  }

  .d8 {
    width: calc(var(--d1) * 8) !important;
  }

  .d9 {
    width: calc(var(--d1) * 9) !important;
  }

  .d10 {
    width: calc(var(--d1) * 10) !important;
  }

  .d11 {
    width: calc(var(--d1) * 11) !important;
  }

  .d12 {
    width: calc(var(--d1) * 12) !important;
  }

  .lrgScreen .e1 {
    width: var(--e1) !important;
  }

  .lrgScreen .e2 {
    width: calc(var(--e1) * 2) !important;
  }

  .lrgScreen .e3 {
    width: calc(var(--e1) * 3) !important;
  }

  .lrgScreen .e4 {
    width: calc(var(--e1) * 4) !important;
  }

  .lrgScreen .e5 {
    width: calc(var(--e1) * 5) !important;
  }

  .lrgScreen .e6 {
    width: calc(var(--e1) * 6) !important;
  }

  .lrgScreen .e7 {
    width: calc(var(--e1) * 7) !important;
  }

  .lrgScreen .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .lrgScreen .d1 {
    width: var(--d1) !important;
  }

  .lrgScreen .d2 {
    width: calc(var(--d1) * 2) !important;
  }

  .lrgScreen .d3 {
    width: calc(var(--d1) * 3) !important;
  }

  .lrgScreen .d4 {
    width: calc(var(--d1) * 4) !important;
  }

  .lrgScreen .d5 {
    width: calc(var(--d1) * 5) !important;
  }

  .lrgScreen .d6 {
    width: calc(var(--d1) * 6) !important;
  }

  .lrgScreen .d7 {
    width: calc(var(--d1) * 7) !important;
  }

  .lrgScreen .d8 {
    width: calc(var(--d1) * 8) !important;
  }

  .lrgScreen .d9 {
    width: calc(var(--d1) * 9) !important;
  }

  .lrgScreen .d10 {
    width: calc(var(--d1) * 10) !important;
  }

  .lrgScreen .d11 {
    width: calc(var(--d1) * 11) !important;
  }

  .lrgScreen .d12 {
    width: calc(var(--d1) * 12) !important;
  }

  .medScreen .e1 {
    width: var(--e1) !important;
  }

  .medScreen .e2 {
    width: calc(var(--e1) * 2) !important;
  }

  .medScreen .e3 {
    width: calc(var(--e1) * 3) !important;
  }

  .medScreen .e4 {
    width: calc(var(--e1) * 4) !important;
  }

  .medScreen .e5 {
    width: calc(var(--e1) * 5) !important;
  }

  .medScreen .e6 {
    width: calc(var(--e1) * 6) !important;
  }

  .medScreen .e7 {
    width: calc(var(--e1) * 7) !important;
  }

  .medScreen .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .medScreen .d1 {
    width: var(--e1) !important;
  }

  .medScreen .d2 {
    width: calc(var(--e1) * 2) !important;
  }

  .medScreen .d3 {
    width: calc(var(--e1) * 3) !important;
  }

  .medScreen .d4 {
    width: calc(var(--e1) * 4) !important;
  }

  .medScreen .d5 {
    width: calc(var(--e1) * 5) !important;
  }

  .medScreen .d6 {
    width: calc(var(--e1) * 6) !important;
  }

  .medScreen .d7 {
    width: calc(var(--e1) * 7) !important;
  }

  .medScreen .d8,
  .medScreen .d9,
  .medScreen .d10,
  .medScreen .d11,
  .medScreen .d12 {
    width: calc(var(--e1) * 8) !important;
  }

  .smlScreen .e1 {
    width: calc(var(--e1) * 2) !important;
  }

  .smlScreen .e2 {
    width: calc(var(--e1) * 4) !important;
  }

  .smlScreen .e3 {
    width: calc(var(--e1) * 6) !important;
  }

  .smlScreen .e4,
  .smlScreen .e5,
  .smlScreen .e6,
  .smlScreen .e7,
  .smlScreen .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .smlScreen .d1 {
    width: calc(var(--d1) * 3) !important;
  }

  .smlScreen .d2 {
    width: calc(var(--d1) * 6) !important;
  }

  .smlScreen .d3 {
    width: calc(var(--d1) * 9) !important;
  }

  .smlScreen .d4,
  .smlScreen .d5,
  .smlScreen .d6,
  .smlScreen .d7,
  .smlScreen .d8,
  .smlScreen .d9,
  .smlScreen .d10,
  .smlScreen .d11,
  .smlScreen .d12 {
    width: calc(var(--d1) * 12) !important;
  }
}

/* @responsive behavior for medium screens */
@media only screen and (min-width: 960px) and (max-width: 1399px) {
  .e1 {
    width: var(--e1) !important;
  }

  .e2 {
    width: calc(var(--e1) * 2) !important;
  }

  .e3 {
    width: calc(var(--e1) * 3) !important;
  }

  .e4 {
    width: calc(var(--e1) * 4) !important;
  }

  .e5 {
    width: calc(var(--e1) * 5) !important;
  }

  .e6 {
    width: calc(var(--e1) * 6) !important;
  }

  .e7 {
    width: calc(var(--e1) * 7) !important;
  }

  .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .d1 {
    width: var(--e1) !important;
  }

  .d2 {
    width: calc(var(--e1) * 2) !important;
  }

  .d3 {
    width: calc(var(--e1) * 3) !important;
  }

  .d4 {
    width: calc(var(--e1) * 4) !important;
  }

  .d5 {
    width: calc(var(--e1) * 5) !important;
  }

  .d6 {
    width: calc(var(--e1) * 6) !important;
  }

  .d7 {
    width: calc(var(--e1) * 7) !important;
  }

  .d8,
  .d9,
  .d10,
  .d11,
  .d12 {
    width: calc(var(--e1) * 8) !important;
  }

  .medScreen .e1 {
    width: var(--e1) !important;
  }

  .medScreen .e2 {
    width: calc(var(--e1) * 2) !important;
  }

  .medScreen .e3 {
    width: calc(var(--e1) * 3) !important;
  }

  .medScreen .e4 {
    width: calc(var(--e1) * 4) !important;
  }

  .medScreen .e5 {
    width: calc(var(--e1) * 5) !important;
  }

  .medScreen .e6 {
    width: calc(var(--e1) * 6) !important;
  }

  .medScreen .e7 {
    width: calc(var(--e1) * 7) !important;
  }

  .medScreen .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .medScreen .d1 {
    width: var(--d1) !important;
  }

  .medScreen .d2 {
    width: calc(var(--d1) * 2) !important;
  }

  .medScreen .d3 {
    width: calc(var(--d1) * 3) !important;
  }

  .medScreen .d4 {
    width: calc(var(--d1) * 4) !important;
  }

  .medScreen .d5 {
    width: calc(var(--d1) * 5) !important;
  }

  .medScreen .d6 {
    width: calc(var(--d1) * 6) !important;
  }

  .medScreen .d7 {
    width: calc(var(--d1) * 7) !important;
  }

  .medScreen .d8,
  .medScreen .d9,
  .medScreen .d10,
  .medScreen .d11,
  .medScreen .d12 {
    width: calc(var(--d1) * 8) !important;
  }

  .smlScreen .e1 {
    width: calc(var(--e1) * 2) !important;
  }

  .smlScreen .e2 {
    width: calc(var(--e1) * 4) !important;
  }

  .smlScreen .e3 {
    width: calc(var(--e1) * 6) !important;
  }

  .smlScreen .e4,
  .smlScreen .e5,
  .smlScreen .e6,
  .smlScreen .e7,
  .smlScreen .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .smlScreen .d1 {
    width: calc(var(--d1) * 3) !important;
  }

  .smlScreen .d2 {
    width: calc(var(--d1) * 6) !important;
  }

  .smlScreen .d3 {
    width: calc(var(--d1) * 9) !important;
  }

  .smlScreen .d4,
  .smlScreen .d5,
  .smlScreen .d6,
  .smlScreen .d7,
  .smlScreen .d8,
  .smlScreen .d9,
  .smlScreen .d10,
  .smlScreen .d11,
  .smlScreen .d12 {
    width: calc(var(--d1) * 12) !important;
  }
}

/* @responsive behavior for small screens */
@media only screen and (max-width: 959px) {
  .e1 {
    width: calc(var(--e1) * 2) !important;
  }

  .e2 {
    width: calc(var(--e1) * 4) !important;
  }

  .e3 {
    width: calc(var(--e1) * 6) !important;
  }

  .e4,
  .e5,
  .e6,
  .e7,
  .e8 {
    width: calc(var(--e1) * 8) !important;
  }

  .d1 {
    width: calc(var(--d1) * 3) !important;
  }

  .d2 {
    width: calc(var(--d1) * 6) !important;
  }

  .d3 {
    width: calc(var(--d1) * 9) !important;
  }

  .d4,
  .d5,
  .d6,
  .d7,
  .d8,
  .d9,
  .d10,
  .d11,
  .d12 {
    width: calc(var(--d1) * 12) !important;
  }
}

/* special fix for overview (1:3) and userSetting (3:1) tiles */

.fullWidth.medScreen .stackContent > .hBox > .tile.d4 {
  width: calc(var(--d1) * 4) !important;
}

.fullWidth.medScreen .stackContent > .hBox > .tile.d8 {
  width: calc(var(--d1) * 8) !important;
}

/* @responsive behavior for large screens */
@media only screen and (min-width: 1400px) {
  .stdBlock {
    width: 40% !important;
    margin: 0 auto;
  }
}

/* @responsive behavior for medium screens */
@media only screen and (min-width: 960px) and (max-width: 1399px) {
  .stdBlock {
    width: 60% !important;
    margin: 0 auto;
  }
}

/* @responsive behavior for small screens */
@media only screen and (max-width: 959px) {
  .stdBlock {
    width: 80% !important;
    margin: 0 auto;
  }
}