.subscreen_enter{
  transform:translateX(100%) translateZ(0);
}
.subscreen_enter_active{
  transition: transform var(--transition);
  transform: translateX(0%) translateZ(0);
}
.subscreen_exit{
  transform: translateX(0%) translateZ(0);
}
.subscreen_exit_active{
  transition: transform var(--transition);
  transform: translateX(100%) translateZ(0);
}
.subscreen_enter_gesture{
  transform: translateX(0%) translateZ(0);
}
.subscreen_enter_active_gesture{
  transform: translateX(0%) translateZ(0);
}
.subscreen_exit_gesture{
  transform: translateX(100%) translateZ(0);
}
.subscreen_exit_active_gesture{
  transform: translateX(100%) translateZ(0);
}
.subscreen{
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  background: var(--body);
  //transform:translateX(100%) translateZ(0px);
  & .appbar{
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 100;
    align-items: center;
    justify-content: flex-start;
    //background:var(--widget);
    width: 100%;
    min-height: 3.75rem;
  }
  & .content{
    width: 100%;
    overflow: auto;
    margin-top: 3.75rem;
  }
}
.header{
  display: flex;
  flex-direction: row;
  align-items: center;
  width:100%;
  background: var(--widget);
  // border-bottom: 1px solid var(--border);
  // box-shadow:var(--widget-shadow);
  position:relative;
  height:3.75rem;
  padding: 0px 10px;
  & .close{
    display: flex;
    align-items: center;
    position:absolute;
    height: 3.75rem;
    width: 2rem;
    & .arrow{
      width: 1.55rem;
      height: 2em;
      transform: rotate(-180deg);
      fill: var(--text);
    }
  }
  & .hcontent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--header);
  }
}
