:root {
  --detail-view-width: 100px;
  --detail-view-header-height: 200px;
}

html, body, .dpv-page {
  min-height: 100vh;
  min-width: 100vw;
  max-height: 100vh;
  max-width: 100vw;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.btn-close-file {
  --bs-btn-close-file-color: #000;
  --bs-btn-close-file-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle-fill' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z'/> </svg>");
  --bs-btn-close-file-opacity: 0.5;
  --bs-btn-close-file-hover-opacity: 0.75;
  --bs-btn-close-file-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-file-focus-opacity: 1;
  --bs-btn-close-file-disabled-opacity: 0.25;
  --bs-btn-close-file-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  color: var(--bs-btn-close-file-color);
  background: transparent var(--bs-btn-close-file-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-file-opacity);
}

.btn-close-file:hover {
  color: var(--bs-btn-close-file-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-file-hover-opacity);
}

.btn-close-file:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-file-focus-shadow);
  opacity: var(--bs-btn-close-file-focus-opacity);
}

.btn-close-file:disabled, .btn-close-file.disabled {
  pointer-events: none;
  user-select: none;
  opacity: var(--bs-btn-close-file-disabled-opacity);
}

.btn-stop {
  --bs-btn-stop-color: #000;
  --bs-btn-stop-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor' class='bi bi-stop-fill'><path d='M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5z'/></svg>");
  --bs-btn-stop-opacity: 0.5;
  --bs-btn-stop-hover-opacity: 0.75;
  --bs-btn-stop-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-stop-focus-opacity: 1;
  --bs-btn-stop-disabled-opacity: 0.25;
  --bs-btn-stop-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  font-size: 1.2em;
  margin-top: 2px;
  margin-right: 10px;
  width: 1em;
  height: 1em;
  color: var(--bs-btn-stop-color);
  background: transparent var(--bs-btn-stop-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-stop-opacity);
}

.btn-stop:hover {
  color: var(--bs-btn-stop-color);
  text-decoration: none;
  opacity: var(--bs-btn-stop-hover-opacity);
}

.btn-stop:focus {
  outline: 0;
  box-shadow: var(--bs-btn-stop-focus-shadow);
  opacity: var(--bs-btn-stop-focus-opacity);
}

.btn-stop:disabled, .btn-stop.disabled {
  pointer-events: none;
  user-select: none;
  opacity: var(--bs-btn-stop-disabled-opacity);
}

.btn-play {
  --bs-btn-play-color: #000;
  --bs-btn-play-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor' class='bi bi-play-fill'><path d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/></svg>");
  --bs-btn-play-opacity: 0.5;
  --bs-btn-play-hover-opacity: 0.75;
  --bs-btn-play-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-play-focus-opacity: 1;
  --bs-btn-play-disabled-opacity: 0.25;
  --bs-btn-play-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  font-size: 1.2em;
  margin-right: 10px;
  width: 1em;
  height: 1em;
  padding: 0;
  color: var(--bs-btn-play-color);
  background: transparent var(--bs-btn-play-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-play-opacity);
}

.btn-play:hover {
  color: var(--bs-btn-play-color);
  text-decoration: none;
  opacity: var(--bs-btn-play-hover-opacity);
}

.btn-play:focus {
  outline: 0;
  box-shadow: var(--bs-btn-play-focus-shadow);
  opacity: var(--bs-btn-play-focus-opacity);
}

.btn-play:disabled, .btn-play.disabled {
  pointer-events: none;
  user-select: none;
  opacity: var(--bs-btn-play-disabled-opacity);
}

.btn-repeat {
  --bs-btn-repeat-color: #000;
  --bs-btn-repeat-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor' class='bi bi-arrow-clockwise'><path fill-rule='evenodd' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/> <path d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z'/></svg>");
  --bs-btn-repeat-opacity: 0.5;
  --bs-btn-repeat-hover-opacity: 0.75;
  --bs-btn-repeat-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-repeat-focus-opacity: 1;
  --bs-btn-repeat-disabled-opacity: 0.25;
  --bs-btn-repeat-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  font-size: 1.1em;
  margin-top: 3px;
  margin-right: 13px;
  width: 1em;
  height: 1em;
  color: var(--bs-btn-repeat-color);
  background: transparent var(--bs-btn-repeat-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-repeat-opacity);
}

.btn-repeat:hover {
  color: var(--bs-btn-repeat-color);
  text-decoration: none;
  opacity: var(--bs-btn-repeat-hover-opacity);
}

.btn-repeat:focus {
  outline: 0;
  box-shadow: var(--bs-btn-repeat-focus-shadow);
  opacity: var(--bs-btn-repeat-focus-opacity);
}

.btn-repeat:disabled, .btn-repeat.disabled {
  pointer-events: none;
  user-select: none;
  opacity: var(--bs-btn-repeat-disabled-opacity);
}

.btn-icon {
  border: none;
}

.btn-icon:hover {
  color: var(--bs-link-hover-color);
}

.btn-light {
  --bs-btn-bg: #e9ecef;
}

.btn-none:hover {
  border-color: black;
  transition: border-color 0.5s;
}

.dpv-file-uploader {
  font-family: "Segoe UI";
  font-size: 15px;
}

.dpv-file-container {
  display: grid;
  grid-template-areas: "file control";
  grid-template-columns: 1fr 100px;
}

.dpv-file-info {
  grid-area: file;
}

.dpv-file-control {
  grid-area: control;
  font-size: 25px;
}

.dpv-file-name {
  font-size: 18px;
}

.dpv-file-size {
  font-size: 16px;
}

.dpv-file-progress {
  grid-column: 1/span 2;
}

.dpv-file-info-icon {
  font-size: 15px;
  margin-right: 2px;
}

.dpv-file-info-text {
  font-size: 16px;
}

.dpv-file-success {
  font-size: 15px;
}

/* Data-Grid with Detail-View styles */
.dpv-view-grid {
  display: grid;
  grid-template-areas: "list control detail";
  grid-template-columns: 1fr 15px auto;
  grid-template-rows: calc(100vh - 50px);
  height: calc(100vh - 50px);
  overflow: hidden;
}

.dpv-view-list.dpv-detail-show {
  grid-area: list;
  width: calc(100vw - var(--detail-view-width) - 215px);
  transition: width 0.6s ease;
}

.dpv-view-list.dpv-detail-hide {
  grid-area: list;
  width: calc(100vw - 215px);
  transition: width 0.6s ease;
}

.dpv-detail-view {
  grid-area: detail;
  padding: 0px;
  background-color: #FCFCFC;
}

.detail-view-body {
  height: calc(100vh - var(--detail-view-header-height));
  overflow-x: hidden;
  overflow-y: auto;
}

.detail-view-collapse.collapse-horizontal.collapsing {
  transition: width 0.6s ease;
}

.dpv-view-control {
  grid-area: control;
  background-color: #dee2e6;
}

.btn-collapse-detail {
  padding: 0;
  margin-left: -1px;
  margin-top: 9px;
  border: none;
}

.dpv-detail-view-title {
  background-color: #F7FAFC;
  padding-top: 7px;
  height: 51.5px;
}

.dpv-detail-view-content {
  height: calc(100vh - 101.5px);
  overflow-x: hidden;
  overflow-y: auto;
}

.dpv-empty-management-info {
  height: calc(100vh - 150px);
}

.dpv-audit-info {
  width: 520px;
}

.dpv-info-item {
  display: grid;
  grid-template-areas: "info-icon info-label" "info-icon info-text";
  grid-template-columns: 25px 1fr;
  grid-template-rows: 20px;
  padding: 10px;
}

.dpv-info-icon {
  grid-area: info-icon;
}

.dpv-info-label {
  grid-area: info-label;
  font-size: 15px;
  font-weight: bold;
}

.dpv-info-text {
  grid-area: info-text;
  color: black;
}

/* Data-Grid with Detail-View styles */
/*.dpv-view-grid {
    display: grid;
    grid-template-areas: "list detail";
    grid-template-columns: 1fr 300px;
    grid-template-rows: calc(100vh - 50px);
    height: calc(100vh - 50px);
    overflow: hidden;
}

.dpv-view-list {
    grid-area: list;
    width: calc(100vw - 500px);
}

.dpv-detail-view {
    grid-area: detail;
    padding: 0px;
    background-color: #FCFCFC;
}*/
.dpv-detail-view-title {
  background-color: #F7FAFC;
  padding-top: 7px;
  height: 51.5px;
}

.dpv-empty-management-info {
  height: calc(100vh - 150px);
}

/* sidebar styles */
.dpv-sidebar {
  display: grid;
  grid-template-areas: "head" "body" "foot";
  grid-template-rows: 100px 1fr 75px;
  width: 200px;
  height: 100%;
  background: #38383C;
}

.dpv-sidebar-item {
  display: grid;
  grid-template-areas: "icon name arrow";
  grid-template-columns: 25px 1fr 25px;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0) !important;
  border-left: 0;
  border-right: 0;
  padding: 5px 0 5px 15px;
  margin-bottom: 5px;
}

.dpv-sidebar-subitem {
  font-size: 0.9em;
}

.dpv-sidebar-subitem a {
  padding-left: 5px;
}

.dpv-sidebar-item-grid-icon {
  grid-area: icon;
  color: white !important;
}

.dpv-sidebar-item-grid-arrow {
  grid-area: arrow;
  color: white !important;
}

.dpv-sidebar-item-grid-name {
  grid-area: name;
}

.dpv-sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid;
  border-left: 0;
  border-right: 0;
}

.dpv-sidebar-item:has(> .dpv-sidebar-item-active) {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid;
  border-left: 0;
  border-right: 0;
}

.dpv-sidebar-item a {
  color: white !important;
  text-decoration: none;
}

.dpv-sidebar-item a:link {
  text-decoration: none;
}

.dpv-sidebar-item a:visited {
  text-decoration: none;
}

.dpv-sidebar-item a:hover {
  text-decoration: none;
}

.dpv-sidebar-item a:active {
  text-decoration: none;
}

.dpv-sidebar-logo {
  grid-area: head;
}

.dpv-sidebar-body {
  grid-area: body;
}

.dpv-sidebar-footer {
  grid-area: foot;
}

/* end sidebar styles */
.dpv-list-none {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dpv-header {
  background-color: #fff;
}

.dpv-toolbar-header {
  height: 50px;
  margin-right: 10px;
}

.dpv-page {
  grid-template-areas: "side head" "side main";
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 200px calc(100vw - 200px);
  overflow: hidden;
}

.dpv-page > header {
  grid-area: head;
}

.dpv-page > aside {
  grid-area: side;
  width: 200px;
}

.dpv-page > main {
  grid-area: main;
}