<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    html, body {
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    #login-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px;
      text-align: center;
    }
      #login-screen > h1 {
        margin: 20px auto;
        font-size: 1.3rem;
      }
      #login-screen > button {
        border: 0;
        border-radius: 6px;
        background: #1b9b81;
        color: #fff;
        padding: 15px 25px;
        font-size: 1.1rem;
      }

    #tab-config-screen {
      display: flex;
      flex-direction: column;
    }
      #tab-config-screen > h1 {
        margin: 30px 0 15px;
        font-size: 1.3rem;
        font-weight: normal;
      }
      #tab-config-screen > select {
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 10px;
        font-size: 1.1rem;
      }

    #kantree-app-frame {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
    }
      #kantree-app-frame > iframe {
        flex: 1 1 auto;
        border: 0;
      }
      #kantree-app-frame > div {
        flex: 0 0 auto;
        font-size: .9rem;
        background: rgb(221, 221, 221);
        border-top: 1px solid rgb(185, 185, 185);
        color: #777;
        padding: 5px;
        display: flex;
        align-items: center;
      }
      #kantree-app-frame > div > span {
        flex: 1 1 auto;
      }
  </style>
  {% asset_tags "kantree.integrations.microsoft365.msteams:static/msteams-integration.jsx" %}
</head>
<body>
  <div id="app"></div>
</body>
</html>
