/* header (in all pages) ----------- */
.header_section {
    background-color: #FFFFFF;
    padding: 20px;
    padding-bottom: 10px;
    padding-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 5npm00; 
    min-height: 120px;
 }

.title_header {
    transform: translateY(-10px);
    text-align: center;
    font-size: 25px;
}

.subtitle_header {
    text-align: center;
    font-size: 10px;
    transform: translateY(-10px);
}

.copyright_header {
    font-size: 10px;
}

/* user msgs */

#status_text {
    text-align: center;
    width: 100%;
    height: 35px;
    padding: 5px;
    color: #FFFFFF;
    background: orange;
    border-radius: 2px 2px 2px 2px;
    box-sizing: border-box;
    height: auto; /* adjust height if needed for long msgs, like in forgot-pass screen */
}

/* main container for app ----------- */

 .ms-welcome__main {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    padding: 10px 20px;
 }

 .ms-welcome__main > h2 {
     width: 100%;
     text-align: center;
 }

/* logo for app -----------

Note: the size of the logo depends on the size of the parent div-----------
Example: <div style="width: 100px; height: 100px;"> {% include '/static/logo.html' %} </div>
----------- */

 .logobox {
    /* this box must be square */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo {
      position: relative;
      top: -5%;
      left: 2.5%;
      width: 66.67%;
      height: 100%;
      mask: radial-gradient(circle at 27.5% 57.5%, black 50%, transparent 50%);
      -webkit-mask: radial-gradient(circle at 27.5% 57.5%, black 50%, transparent 50%);
  }

  .logo .bar {
      background-color: black;
      width: 10%;
      position: absolute;
  }

  .bar1 {
      height: 92.5%;
      left: 15%;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
      top: 0%;
  }

  .bar2 {
      height: 86.0%;
      left: 30%;
      top: 0%;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);

  }

  .bar3 {
    height: 79.5%;
      left: 45%;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
      top: 0%;
  }

  .bar4 {
    height: 73.0%;
      left: 60%;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
      top:0%;
  }

  .bar5 {
    height: 66.67%;
      left: 75%;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
      top:0%;
  }