.cam100-replay-files{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(93,220,255,.16);
}

.cam100-replay-files-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.cam100-replay-files-head>div{
  display:flex;
  align-items:center;
  gap:8px;
}

.cam100-replay-files-head b{
  font-size:14px;
}

.cam100-replay-files-head span,
.cam100-replay-files-head small{
  color:#8ea7b8;
  font-size:12px;
}

.cam100-replay-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:320px;
  overflow:auto;
  padding-right:3px;
}

.cam100-replay-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(87,211,255,.13);
  border-radius:10px;
  background:rgba(5,20,34,.55);
}

.cam100-replay-row-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cam100-replay-row-info b{
  font-size:13px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.cam100-replay-row-info small{
  color:#829aaa;
  font-size:11px;
}

.cam100-replay-row-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}

.cam100-seg-play,
.cam100-seg-download,
.cam100-cancel-download{
  appearance:none;
  border:1px solid rgba(87,211,255,.25);
  border-radius:8px;
  background:rgba(12,42,62,.82);
  color:#dff8ff;
  min-height:34px;
  padding:0 11px;
  cursor:pointer;
  font-size:12px;
}

.cam100-seg-download{
  border-color:rgba(39,217,255,.42);
  background:rgba(0,119,158,.24);
}

.cam100-seg-download.downloading{
  cursor:default;
}

.cam100-seg-download:disabled{
  opacity:.48;
  cursor:not-allowed;
}

.cam100-replay-empty{
  padding:13px;
  border:1px dashed rgba(87,211,255,.18);
  border-radius:10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#b9d6e4;
}

.cam100-replay-empty small{
  color:#7893a3;
}

.cam100-download-status{
  margin:0 0 10px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(0,126,164,.12);
  border:1px solid rgba(44,216,255,.22);
}

.cam100-download-status-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  font-size:12px;
}

.cam100-download-status-top b{
  font-variant-numeric:tabular-nums;
}

.cam100-download-bar{
  height:6px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.08);
}

.cam100-download-bar i{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(
    90deg,
    #00a9dc,
    #38e7ff
  );
  transition:width .18s linear;
}

.cam100-cancel-download{
  margin-top:9px;
}

@media(max-width:700px){
  .cam100-replay-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .cam100-replay-row-actions{
    width:100%;
  }

  .cam100-seg-play,
  .cam100-seg-download{
    flex:1;
  }

  .cam100-replay-list{
    max-height:360px;
  }

  .cam100-replay-empty{
    flex-direction:column;
  }
}