.ubwr-box {
display: block;
width: 270px;
margin: 0;
font-family: Arial, sans-serif !important;

color: initial !important;
filter: none !important;
opacity: 1 !important;
}

.ubwr-box * {
box-sizing: border-box;
text-decoration: none !important;
}

.ubwr-bar {
position: relative;
height: 27px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.12);
background: linear-gradient(
to top,
rgba(25,25,25,0.55),
rgba(255,255,255,0.25)
);
}

.ubwr-center {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  padding: 0 50px;

  text-align: center;
  color: #000 !important;
}

.ubwr-center-default {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;

  opacity: 1;
}

.ubwr-center-hover {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  line-height: 1.05;
  opacity: 0;
}
.ubwr-hover-line1 {
  font-size: 10px;
}

.ubwr-hover-line2 {
  font-size: 12px;
  font-weight: 600;
}

.ubwr-center:hover .ubwr-center-default {
  opacity: 0;
}

.ubwr-center:hover .ubwr-center-hover {
  opacity: 1;
}
.ubwr-hover-line1 {
font-size: 10px;
}

.ubwr-hover-line2 {
font-size: 12px;
font-weight: 600;
}

.ubwr-center:hover .ubwr-center-default {
opacity: 0;
}

.ubwr-center:hover .ubwr-center-hover {
opacity: 1;
}

.ubwr-nav {
position: absolute;
top: 0;
bottom: 0;
width: 36px;

display: flex;
align-items: center;

background: linear-gradient(
to top,
rgba(10,10,10,0.85),
rgba(25,25,25,0.45)
);

transition: width 0.25s ease;
z-index: 3;
overflow: hidden;

color: #fff !important;
}

.ubwr-left {
left: 0;
justify-content: flex-start;
}
.ubwr-right {
right: 0;
justify-content: flex-end;
}
.ubwr-arrow {
flex: 0 0 36px;
width: 36px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #fff !important;
z-index: 2;
}

.ubwr-label {
font-size: 13px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
color: #fff !important;
z-index: 2;
}

.ubwr-left .ubwr-label {
margin-left: 4px;
}

.ubwr-right .ubwr-label {
margin-right: 4px;
}
.ubwr-left .ubwr-arrow { order: 1; }
.ubwr-left .ubwr-label { order: 2; }

.ubwr-right .ubwr-label { order: 1; }
.ubwr-right .ubwr-arrow { order: 2; }


.ubwr-nav:hover {
width: 70%;
}

.ubwr-nav:hover .ubwr-label {
opacity: 1;
}

.ubwr-bar:has(.ubwr-nav:hover) .ubwr-center {
opacity: 0;
pointer-events: none;
}

.ubwr-flow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
opacity: 0;
pointer-events: none;
z-index: 1;
}

.ubwr-flow-left {
right: 12px;
color: #00ffff !important;
text-shadow: 0 0 4px #00ffff, 0 0 8px #7cffff;
}

.ubwr-flow-right {
left: 12px;
color: #00ffff !important;
text-shadow: 0 0 4px #00ffff, 0 0 8px #7cffff;
}

.ubwr-nav:hover .ubwr-flow {
opacity: 0.9;
}
.ubwr-left:hover .ubwr-flow-left {
animation: ubwrFlowLeft 1.8s linear infinite;
}

.ubwr-right:hover .ubwr-flow-right {
animation: ubwrFlowRight 1.8s linear infinite;
}

@keyframes ubwrFlowLeft {
0% { transform: translateY(-50%) translateX(6px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(-50%) translateX(-12px); opacity: 0; }
}

@keyframes ubwrFlowRight {
0% { transform: translateY(-50%) translateX(-6px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(-50%) translateX(12px); opacity: 0; }
}