.hidden {
  display: none;
}

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: -1px 0px 0px 0px !important;
  padding: 0;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
#UI{
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
/*  background-color: red;*/
}

#tutorial{
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
/*  background-color: red;*/
}
#tutorialImg{
  position: absolute;
  max-width: 400px;
  display: block;
  width: 90%;
  left:0; right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  pointer-events: none;
}

#UILandscape{
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
/*  background-color: red;*/
}

#uiPanel{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 32px;

  position: absolute;
  width: 260px;
  height: 125px;
  left: 50%;
  bottom:60px;
  margin-left: -162px;
  background: #FFFFFF;
  border-radius: 2px;

  font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 120%;
color: #004985;
/* or 24px */

font-feature-settings: 'pnum' on, 'lnum' on;
  /*
  background-color: white;
  width: 320px;
  height: 165px;

  position:absolute; bottom:60px;
  left: 50%;
  margin-left: -160px;
  */
}

#ctaBtn{
  display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 14px 32px 14px 40px;

position: static;
width: 190px;
height: 52px;
left: 32px;
top: 112px;

/* Systemair/UI/CTA Background */

color: #004985;
background: #F0F8FF;
border-radius: 2px;
margin: 0 auto;

/* Inside Auto Layout */

flex: none;
order: 2;
flex-grow: 0;
}

.button.btn.add::before {
  font-family: fontAwesome;
  content: "\f067\00a0";
}

#ctaBtnText{
  font-family: Inter;
  font-weight: bold;

font-size: 20px;
line-height: 120%;
}
#btnArrow{
  font-size: 24px;
line-height: 24px;
padding: 5px;
}


@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */
  #UILandscape{
    display: none;
  }
  #uiPanel{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 32px;
  
    position: absolute;
    width: 260px;
    height: 125px;
    left: 50%;
    bottom:60px;
    margin-left: -162px;
    background: #FFFFFF;
    border-radius: 2px;
  
    font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 120%;
  color: #004985;
  /* or 24px */
  
  font-feature-settings: 'pnum' on, 'lnum' on;
    /*
    background-color: white;
    width: 320px;
    height: 165px;
  
    position:absolute; bottom:60px;
    left: 50%;
    margin-left: -160px;
    */
  }
  
  #ctaBtn{
    display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 14px 32px 14px 40px;
  
  position: static;
  width: 190px;
  height: 52px;
  left: 32px;
  top: 112px;
  
  /* Systemair/UI/CTA Background */
  
  color: #004985;
  background: #F0F8FF;
  border-radius: 2px;
  margin: 0 auto;
  
  /* Inside Auto Layout */
  
  flex: none;
  order: 2;
  flex-grow: 0;
  }
  
  .button.btn.add::before {
    font-family: fontAwesome;
    content: "\f067\00a0";
  }
  
  #ctaBtnText{
    font-family: Inter;
    font-weight: bold;
  
  font-size: 20px;
  line-height: 120%;
  }
  #btnArrow{
    font-size: 24px;
  line-height: 24px;
  padding: 5px;
  }
  
  }
  
  @media all and (orientation:landscape) {
    /* Style adjustments for landscape mode goes here */
    #UI{
      display: none;
    }
    #uiPanelLandscape{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 24px 32px;
    
      position: absolute;
      width: 260px;
      height: 30px;
      left: 50%;
      bottom:60px;
      margin-left: -162px;
      border-radius: 2px;
    
      font-family: Inter;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 120%;
    color: #004985;
    /* or 24px */
    
    font-feature-settings: 'pnum' on, 'lnum' on;
      /*
      background-color: white;
      width: 320px;
      height: 165px;
    
      position:absolute; bottom:60px;
      left: 50%;
      margin-left: -160px;
      */
    }
    
    #ctaBtn{
      display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 32px 14px 40px;
    
    position: static;
    width: 190px;
    height: 52px;
    left: 32px;
    top: 112px;
    
    /* Systemair/UI/CTA Background */
    
    color: #004985;
    background: #F0F8FF;
    border-radius: 2px;
    margin: 0 auto;
    
    
    /* Inside Auto Layout */
    
    flex: none;
    order: 2;
    flex-grow: 0;
    }
    #ctaText{
      display: none;
    }
    .button.btn.add::before {
      font-family: fontAwesome;
      content: "\f067\00a0";
    }
    
    #ctaBtnText{
      font-family: Inter;
      font-weight: bold;
    
    font-size: 20px;
    line-height: 120%;
    }
    #btnArrow{
      font-size: 24px;
    line-height: 24px;
    padding: 5px;
    }
    
  }

  .mrbranding {
    padding: 5px;
    display:block;
    
    size: 10px;
    max-width: 110px;
    
    position: fixed;
    bottom: 20px;
    left: 5px;
    z-index : 999;
    pointer-events: none;
  }