::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.16s;
}

body.wrra-report-flow{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

body.wrra-report-flow *{
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#000;
  overflow:hidden;
}

body.wrra-report-flow{
  overflow:hidden;
  height:100dvh;
  min-height:100dvh;
  overscroll-behavior:none;
  touch-action:manipulation;
  background:#16164a;
}

body.wrra-report-flow .wrra-body{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
}

body.wrra-report-flow .wrra-main{
  height:100dvh;
  min-height:100dvh;
  padding:0;
  overflow:hidden;
  display:block;
  background:#16164a;
}

body.wrra-report-flow .wrra-dynamic,
body.wrra-report-flow .wrra-dynamic-content{
  width:100%;
  height:100dvh;
  min-height:100dvh;
  padding:0;
  overflow:hidden;
  display:block;
  border-radius:0;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  color:white;
  display:flex;
  flex-direction:column;
  height:100vh;
}

.wrra-body{
  flex:1 1 auto;
  display:flex;
  min-height:0;
  height:auto;
  overflow:hidden;
}

.wrra-main{
  position:relative;
  width:100%;
  flex:1;
  min-width:0;
  min-height:0;
  height:100%;
  padding:20px;
  display:grid;
  gap:20px;
  box-sizing:border-box;
  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url("/images/backing/body.png");
  background-size:cover;
  background-position:center;
}

.wrra-dynamic{
  grid-column:1;
  width:100%;
  height:100%;
  min-height:0;
}

.wrra-dynamic-content{
  width:100%;
  height:100%;
  min-height:0;
  padding-left:10px;
  border-radius:18px;
  overflow:hidden;
}

.wrra-dynamic-content img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.wrra-side-panel{
  width:100%;
  height:100%;
  min-height:0;
}

body.wrra-scroll{
  overflow-y:auto;
  overflow-x:hidden;
}

body.wrra-scroll .wrra-scale-frame{
  height:auto !important;
  min-height:100%;
}

body.wrra-scroll .wrra-body{
  height:auto !important;
  overflow:visible !important;
}

body.wrra-scroll .wrra-main{
  height:auto !important;
  min-height:0;
  overflow:visible !important;
}

body.wrra-scroll .wrra-dynamic{
  height:auto !important;
}

body.wrra-scroll .wrra-dynamic-content{
  height:auto !important;
  overflow:visible !important;
}

.wrra-scale-frame{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}

@media (min-width:901px){
  body:not(.wrra-report-flow):not(.wrra-scroll){
    width:100vw;
    height:100vh;
    overflow:hidden;
    display:block;
  }

  body.wrra-scroll{
    overflow-y:auto;
    overflow-x:hidden;
  }

  body:not(.wrra-report-flow) .wrra-scale-frame{
    width:1920px;
    height:var(--wrra-frame-height,1080px);
    min-height:0;
    display:flex;
    flex-direction:column;
    position:relative;
    left:50%;
    transform:translateX(-50%) scale(var(--wrra-scale,1));
    transform-origin:top center;
  }
}

@media (max-width:900px){
  .wrra-scale-frame{
    width:100%;
    height:100%;
    transform:none !important;
  }
}