:root {
  --ekd-backend-layout-1-bg: #fd6da9;
  --ekd-backend-layout-1-fg: #000000;
  --ekd-backend-layout-2-bg: #a6b3ff;
  --ekd-backend-layout-2-fg: #000000;
  --ekd-backend-layout-3-bg: #780bbe;
  --ekd-backend-layout-3-fg: #ffffff;
  --ekd-backend-layout-4-bg: #fdaf60;
  --ekd-backend-layout-4-fg: #000000;
}

.t3-page-ce-header {
  .ekd-mobile-info {
    .fa {
      vertical-align: middle;
      margin-left: 5px;
    }
  }

  .fa-desktop {
    font-size: 16px;
  }

  .fa-mobile {
    font-size: 21px;
  }
}

.ekd-ctype-info {
  font-size: 0.6rem;
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em;
  border: 1px solid #333;
  background-color: #fff;
  padding: 0.15em 0.25em;
}

.form-wizards-items-bottom {
  .ekd_posterimage {
    padding-top: 1rem;

    img {
      max-width: 100%;
      height: auto;
    }
  }
}

.exampleContent {

  .ekd-backend-layout {
    &-1 {
      padding: 2em;
      background-color: var(--ekd-backend-layout-1-bg);
      color: var(--ekd-backend-layout-1-fg);
      a {
        color: var(--ekd-backend-layout-1-fg);
      }
    }
    &-2 {
      padding: 2em;
      background-color: var(--ekd-backend-layout-2-bg);
      color: var(--ekd-backend-layout-2-fg);
      a {
        color: var(--ekd-backend-layout-2-fg);
      }
    }
    &-3 {
      padding: 2em;
      background-color: var(--ekd-backend-layout-3-bg);
      color: var(--ekd-backend-layout-3-fg);
      a {
        color: var(--ekd-backend-layout-3-fg);
      }
    }
    &-4 {
      padding: 2em;
      background-color: var(--ekd-backend-layout-4-bg);
      color: var(--ekd-backend-layout-4-fg);
      a {
        color: var(--ekd-backend-layout-4-fg);
      }
    }
  }


  .youtubefile, .vimeofile {
    position: relative;
    width: 100%;
  }

  .videofile {
    position: relative;
    width: 100%;

    i.fa {
      background-color: #4a4a4d;
      position: absolute;
      top: calc(50% - 25px);
      left: calc(50% - 25px);
      font-size: 20px;
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }
  }

  img {
    width: 100%;
    height: auto;
  }

  ul, ol {
    padding-left: 1.25rem;
  }

  table {
    width: 100%;
    border: 1px solid #aaa;

    td, th {
      border: 1px solid #aaa;
      padding: 0.5rem;
    }

    margin: 0.5rem 0;
  }

  .youtubefile {
    i.fa {
      color: #f00;
      position: absolute;
      top: calc(50% - 30px);
      left: calc(50% - 30px);
      font-size: 60px;

      &:before {
        position: absolute;
        z-index: 1;
      }

      &:after {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% + 20px);
        left: calc(50% + 20px);
        width: 20px;
        height: 20px;
        background-color: #fff;
        z-index: 0;
      }
    }

  }

  .vimeofile {
    i.fa {
      color: #09a7e6;
      position: absolute;
      top: calc(50% - 30px);
      left: calc(50% - 30px);
      font-size: 60px;

      &:before {
        position: absolute;
        z-index: 1;
      }

      &:after {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% + 7px);
        left: calc(50% + 7px);
        width: 40px;
        height: 40px;
        background-color: #fff;
        z-index: 0;
      }
    }

  }

  .ekd-backend-50-50, .ekd-backend-25-75, .ekd-backend-30-70 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .ekd-backend-image-17 {
    flex-direction: row-reverse !important;
  }

  .ekd-backend-50-50 {
    > * {
      width: 50%;
      padding-right: 10px;

      &:last-child {
        padding-right: 0;
      }
    }
  }

  .ekd-backend-25-75 {
    > * {
      width: 25%;
      padding-right: 10px;

      &:last-child {
        width: 75%;
        padding-right: 0;
      }
    }
  }

  .ekd-backend-30-70 {
    > * {
      width: 30%;
      padding-right: 10px;

      &:last-child {
        width: 70%;
        padding-right: 0;
      }
    }
  }
}

.inline_documentation_container {
  position: relative;

  margin-top: 1rem;
  dl {

    border: 1px solid #333;
    border-radius: 5px;
    background-color: #ccc;
    padding: 0;
  }
  dt {
    cursor: help !important;
    label {
      padding: 1rem;
      cursor: help !important;
    }

  }

  dd {
    padding: 1rem;
    img {
      max-width: 100%;
      max-height: 150px;
      height: auto;
      width: auto;
    }
  }

  input[type="checkbox"] {
    width: 1px;
    height: 1px;
    position: absolute;
    opacity: 0;
    & + .inline_documentation {
      dd {
        display: none;
      }
    }
    &:checked + .inline_documentation {
      dd {
        display: block;
      }
    }
  }
}