/* Shared desktop ad guardrail */

:root{
  --sgAdRailW:160px;
  --sgAdRailGap:20px;
  --sgAdRailTop:92px;
  --sgAdRailBottom:48px;
  --sgAdRailStage:600px;
}

.sgAdRail{
  position:fixed;
  top:var(--sgAdRailTop);
  right:max(14px,calc((100vw - var(--sgAdRailStage)) / 2 - var(--sgAdRailW) - var(--sgAdRailGap)));
  bottom:var(--sgAdRailBottom);
  width:var(--sgAdRailW);
  z-index:850;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  pointer-events:none;
}

.sgAdRailBox{
  width:100%;
  min-height:280px;
  max-height:600px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.94);
  color:#555;
  box-shadow:0 1px 2px rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:10px;
  pointer-events:none;
}

.sgAdRailLabel{
  width:100%;
  text-align:center;
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  color:#6b6b6b;
  text-transform:uppercase;
}

.sgAdRailSlot{
  flex:1;
  width:100%;
  margin-top:10px;
  border:1px dashed rgba(0,0,0,.14);
  background:rgba(0,0,0,.025);
}

@media (max-width:980px), (max-height:620px){
  .sgAdRail{display:none;}
}