:host {

  p, h1, h2, h3, h4, h5 {
    padding: 0;
    margin: 0;
  }

  button.selected > * {
    color: var(--red);
  }

  .test {
    width: 100%;
    height: 250px;
    box-shadow: inset 0 0 0 1px black;
  }

  .icon-svg {
    color: var(--ars-header-color);
    height: 18px;
    width: 18px;
  }

  .pseudo-button {
    cursor: default;

    > * {
      cursor: default;
    }
  }

  .questionwall {
    &-icon {
      font-family: 'Material Icons', serif;
      font-weight: normal;
      font-style: normal;
      font-size: 18px;
      line-height: 18px;
      padding: 0;
      margin: 0;
      color: var(--ars-header-color);
    }

    &-header {
      background-color: var(--ars-foreground-color);
      border-bottom: solid 1px var(--ars-border-color);
      z-index: 4;
    }

    &-footer {
      background-color: var(--ars-foreground-color);
      border-top: solid 1px var(--ars-border-color);
      z-index: 54;

      > * {
        height: 100%;
        float: left;
      }
    }

    &-comment {
      &-meta {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
      }

      &-border {
        &-on {
          box-shadow: inset 0px 0px 0px 1px var(--ars-button-color-light);
        }

        &-off {
          box-shadow: inset 0px 0px 0px 0px var(--ars-button-color-light);
        }
      }

      &-timestamp {
        color: var(--ars-paragraph-color);
        font-size: 14px;
        line-height: 18px;
      }

      &-user {
        color: var(--ars-header-color);
        font-size: 14px;
        padding-right: 8px;
        line-height: 18px;
      }

      &-body {
        hyphens: auto;
        word-break: break-word;
        color: var(--ars-header-color);
        line-height: 22px;
        white-space: normal;

        hr {
          border: 1px solid var(--ars-header-color);
        }
      }

      &-btn {
        > button > * {
          color: var(--ars-button-color-light);
        }

        > button:hover > * {
          color: var(--ars-button-color);
        }
      }

      &-notification {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 2px;
        line-height: 18px;
        font-weight: 600;
        color: #cc4244;
      }

      &-number {
        font-size: 100px;
        letter-spacing: 2px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.2);
      }
    }

    &-list {
      box-sizing: border-box;
      border-left: solid 1px var(--ars-border-color);

      &-filter {
        border-top: solid 1px var(--ars-border-color);
        border-bottom: solid 1px var(--ars-border-color);
      }

      &-border-bottom {
        border-bottom: solid 1px var(--ars-border-color);
      }

      &-comments {
      }

      &-hide {
        background-color:orange;
      }

      &-scroll {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: orange;
      }
    }

    &-present {
      font-size: 45px;
      padding: 16px 32px 16px 32px;
      color: var(--ars-header-color);
      hyphens: auto;
      word-break: break-word;

      &-options {
        &-outer {
          width: 0;
          height: 0;
          position: relative;
        }

        &-inner {
          width: 180px;
          height: 50px;
          position: relative;
          top: 16px;
          left: -212px;
        }

        &-slider {
          display: flex;
          flex-grow: 1;
          overflow: visible;
        }
      }

      &-box {
        &-outer {
          display: flex;
          flex-direction: row;
          justify-content: center;
          hyphens: auto;
          word-break: break-word;
          color: yellow;
        }

        &-inner {
          width: 1000px;
          flex-shrink: 1;
        }
      }

      &-meta {
        padding-top: 16px;
        display: flex;
        justify-content: start;
        flex-direction: row;

        :first-child {
          padding-left: 32px;
        }

        &-icon {
          font-size: 20px;
          line-height: 40px;
        }

        &-user {
          font-family: Roboto, 'sans-serif';
          font-size: 18px;
          padding-left: 4px;
          padding-right: 16px;
          color: var(--ars-header-color);
        }

        &-timestamp {
          font-family: Roboto, 'sans-serif';
          font-size: 18px;
          font-weight: 400;
          color: var(--ars-paragraph-color);
        }

        &-number {
          font-family: Roboto, 'sans-serif';
          font-size: 256px;
          padding-left: 16px;
          font-weight: bold;
          color: rgba(255, 255, 255, 0.2);
        }
      }

      &-introduction {
        &-title {
          font-size: 35px;
          padding: 32px 32px 0 32px;
          color: yellow;
        }

        &-desc {
          font-size: 18px;
          padding: 16px 32px 0 32px;
          color: var(--ars-paragraph-color);
        }
      }
    }

    &-screen {
      background-color: var(--ars-background-color);
    }

    &-text {
      &-color {
        color: var(--ars-paragraph-color);
      }
    }
  }

  .bound img {
    max-width: 100%;
  }

  .flex {
    &-column {
      &-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }

  .icon-color {
    color: var(--ars-button-color);
    &-yellow{
      color:yellow;
      transform:scale(1.5);
    }
  }

}

:host ::ng-deep {
  .questionwall-present-markdown {
    max-width: 100%;
    color: yellow;

    hr {
      border: 1px solid yellow;
    }
  }

  .questionwall-present-options-slider {
    .mat-slider-wrapper {
      background-color: var(--ars-button-color-light);
    }

    .mat-slider-thumb {
      background-color: var(--ars-button-color);
    }

    .mat-slider-track-fill {
      background-color: var(--ars-button-color);
    }
  }

  .side-list{
    transition:width ease-in-out 0.1s;
  }

  .qr-overlay {
    position: fixed;
    left: 32px;
    bottom: 64px;
    width: 200px;
    height: 200px;
    animation:popin-qr-overlay 0.2s cubic-bezier(0,.04,0,1) both;
  }

  @keyframes popin-qr-overlay {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }


}

.selected {
  font-weight: bold;
}

h2 {
  color: red;
  font-weight: normal !important;
  padding-top: 10px !important;
}