/* ------------------------------------------------ vapordon stage, 5 panels

   bevels on cards and on whatever frame.js tags, dialogs, message boxes, tables, tooltips, menus, scrollbars
*/

/* ------------------------------------------------ bevels, VGUI RaisedBorder and InsetBorder */

.card, .stat-card, .file-card, .modal-content, .modal-box, .panel, .sheet, .server, .upload-card,
.toolbar-card, .toast, .more-menu-popup, .react-popover, .seen-popover, dialog, #tab-live, #tab-graphs {
  background-color: var(--v-control) !important;
}
.v-raised, .card, .stat-card, .file-card, .modal-content, .modal-box, .panel, .sheet, .server, .upload-card,
.toolbar-card, .toast, .more-menu-popup, .react-popover, .seen-popover, dialog, #tab-live, #tab-graphs {
  border: 1px solid !important;
  border-color: var(--v-raised) !important;
}
.v-inset {
  border: 1px solid !important;
  border-color: var(--v-inset) !important;
}
/* etched lines, dark then lit, like a groove cut into the panel */
.v-etch-b { border-bottom: 1px solid var(--v-shade) !important; box-shadow: 0 1px 0 var(--v-lit) !important; }
.v-etch-t { border-top: 1px solid var(--v-shade) !important; box-shadow: inset 0 1px 0 var(--v-lit) !important; }
a.card:hover, .file-card:hover, .server:hover { background-color: var(--v-control) !important; border-color: var(--v-raised) !important; }
a.card:hover .name, a.card:hover .card-name { color: var(--v-bright) !important; }

/* ------------------------------------------------ dialogs, every modal is a little vgui frame */

.modal, .drop-overlay, .page-drop-overlay, .lightbox, [class*="overlay"]:not(.leaflet-overlay-pane) {
  background-color: rgba(30, 34, 26, .55) !important;
}
.modal-box, .modal-content, dialog {
  padding-top: 0 !important;
  outline: 1px solid #000 !important;
}
.modal-head, .modal-box > h2:first-child, .modal-content > h2:first-child, .modal-content > h3:first-child, dialog > h2:first-child {
  margin: 0 -1px 10px !important;
  padding: 6px 10px !important;
  min-height: 28px;
  color: var(--v-bright) !important;
  font: 700 13px var(--v-head) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v-shade) !important;
  background: transparent !important;
}
.modal-head h2, .modal-head h3 { color: var(--v-bright) !important; margin: 0 !important; }
.modal-close {
  min-width: 18px; height: 18px; padding: 0 !important; line-height: 16px !important; text-align: center;
}

/* ------------------------------------------------ toasts and flash messages, steam message boxes */

.toast, .flash, .alert, .banner, .notice, .error-banner, .flash-error, .flash-success {
  background: var(--v-control) !important;
  color: var(--v-text) !important;
  border: 1px solid !important;
  border-color: var(--v-raised) !important;
  outline: 1px solid #000 !important;
}
.flash-error, .flash.error, .alert-error, .error-banner, .toast.error { border-left: 3px solid var(--v-red) !important; }
.flash-success, .flash.success, .toast.success { border-left: 3px solid var(--v-gold) !important; }
.error, .err, .l-err, .ue-error { color: #e8a58f !important; }
.warn, .warning, .l-warn, .cm-warn, .tdn-warn { color: var(--v-amber) !important; }

/* ------------------------------------------------ list views and tables, the server browser look */

table { border-collapse: collapse !important; background: var(--v-window) !important; }
.tablewrap, .mtable-wrap { background: var(--v-window) !important; border: 1px solid !important; border-color: var(--v-inset) !important; }
th {
  background: var(--v-control) !important;
  color: var(--v-text) !important;
  font-weight: 400 !important;
  text-align: left;
  border: 1px solid !important;
  border-color: var(--v-raised) !important;
  padding: 2px 6px !important;
}
td { border: 0 !important; border-bottom: 1px solid rgba(40, 46, 34, .5) !important; color: var(--v-text); }
tbody tr:hover td { background: rgba(149, 136, 49, .18); }

/* ------------------------------------------------ tooltips and popovers */

.tooltip, .tip, .help-tip-body, .leaflet-tooltip, [role="tooltip"] {
  background: var(--v-window) !important;
  color: var(--v-text) !important;
  border: 1px solid #000 !important;
}
.leaflet-tooltip::before { display: none !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--v-control) !important; color: var(--v-text) !important; border: 1px solid; border-color: var(--v-raised);
}
.leaflet-control-attribution { background: rgba(76, 88, 68, .85) !important; color: var(--v-dim) !important; }
.leaflet-control-attribution a { color: var(--v-text) !important; }
.leaflet-bar { border: 0 !important; }

/* ------------------------------------------------ details, menus, misc */

summary { cursor: default; color: var(--v-text); }
summary::marker { color: var(--v-dim); }
details[open] > summary { color: var(--v-gold); }

.more-menu-popup button, .more-item, .menu-item, [role="menuitem"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--v-dim) !important;
  text-align: left;
}
.more-menu-popup button:hover, .more-item:hover, .menu-item:hover, [role="menuitem"]:hover {
  background: var(--v-sel) !important;
  color: var(--v-bright) !important;
}

/* ------------------------------------------------ scrollbars, the chunkiest part of 2005 */

::-webkit-scrollbar { width: 17px; height: 17px; background: var(--v-darkbg); }
::-webkit-scrollbar-track { background: var(--v-darkbg); }
::-webkit-scrollbar-thumb { background: var(--v-control); border: 1px solid; border-color: var(--v-raised); }
::-webkit-scrollbar-corner { background: var(--v-control); }
::-webkit-scrollbar-button:single-button {
  display: block; height: 17px; width: 17px;
  background-color: var(--v-control);
  border: 1px solid;
  border-color: var(--v-raised);
  background-repeat: no-repeat; background-position: center;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 4h7L3.5 0z' fill='%23a0aa95'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23a0aa95'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M4 0v7L0 3.5z' fill='%23a0aa95'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0v7L4 3.5z' fill='%23a0aa95'/%3E%3C/svg%3E");
}