/******************************************************************************
 *                                                                            *
 *  Copyright (c) 2018, 2022 by AsterionDB Inc.                               *
 *                                                                            *
 *  All rights reserved.  No part of this work may be reproduced or otherwise *
 *  incorporated into other works without the express written consent of      *
 *  AsterionDB Inc.                                                           *
 *                                                                            *
 *****************************************************************************/

/* Toolbar/menubar at top of screen... everything else has to be pushed down */
body 
{
  padding-top: 4.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/* Someone is overriding the lightbox style on the close button, so we set it again here and call it important */
.closeButton___3BdAF
{
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=") no-repeat 50%!important;
  /* Also on top of our toolbar, this looks better: */
  float: none !important;
}

/* ReactTable's "No rows found" div is oddly shaped/positioned, apparently for when the table is rendered with
 * no blank rows... if it is rendered with a fixed height and several blank rows, we probably don't need thesee
 * changes (I think this is needed if we set MinRows very low) */
.rt-noData
{
  height: 75%;
  background-color: #cccccc !important;
  white-space: nowrap;
  /* these two lines center the text vertically */
  display: flex !important;
  align-items: center;
}

/* Want to allow reactstrap CSS styles for "danger" to apply to React-Select widgets */
.has-danger .Select-control
{
  border-color: #d9534f !important
}

/* Make a <Datetime> input a bit see-through */
.react-datetime-transparent .rdtPicker
{
  opacity: 0.9;
}

/* Open a <Datetime> input's date picker upward */
.react-datetime-open-upward .rdtPicker
{
  top: auto;
  bottom: 100%;
}

/* rc-input-number <InputNumber /> */

.rc-input-number {
  display: inline-block;
  height: 30px;
  margin: 0;
  padding: 0;
  line-height: 30px;
  vertical-align: middle;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;
}
.rc-input-number-focused {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.rc-input-number-out-of-range input {
  color: red;
}
.rc-input-number-handler {
  display: block;
  height: 15px;
  overflow: hidden;
  line-height: 15px;
  text-align: center;
  touch-action: none;
}
.rc-input-number-handler-active {
  background: #ddd;
}
.rc-input-number-handler-up-inner,
.rc-input-number-handler-down-inner {
  color: #666666;
  -webkit-user-select: none;
  user-select: none;
}
.rc-input-number:hover {
  border-color: #1890ff;
}
.rc-input-number:hover .rc-input-number-handler-up,
.rc-input-number:hover .rc-input-number-handler-wrap {
  border-color: #1890ff;
}
.rc-input-number-disabled:hover {
  border-color: #d9d9d9;
}
.rc-input-number-disabled:hover .rc-input-number-handler-up,
.rc-input-number-disabled:hover .rc-input-number-handler-wrap {
  border-color: #d9d9d9;
}
.rc-input-number-input-wrap {
  height: 100%;
  overflow: hidden;
}
.rc-input-number-input {
  width: 100%;
  height: 100%;
  padding: 0;
  color: #666666;
  line-height: 26px;
  text-align: center;
  border: 0;
  border-radius: 4px;
  outline: 0;
  transition: all 0.3s ease;
  transition: all 0.3s;
  -moz-appearance: textfield;
}
.rc-input-number-handler-wrap {
  float: right;
  width: 20px;
  height: 100%;
  border-left: 1px solid #d9d9d9;
  transition: all 0.3s;
}
.rc-input-number-handler-up {
  padding-top: 1px;
  border-bottom: 1px solid #d9d9d9;
  transition: all 0.3s;
}
.rc-input-number-handler-up-inner:after {
  content: '+';
}
.rc-input-number-handler-down {
  transition: all 0.3s;
}
.rc-input-number-handler-down-inner:after {
  content: '-';
}
.rc-input-number-handler-down-disabled,
.rc-input-number-handler-up-disabled {
  opacity: 0.3;
}
.rc-input-number-handler-down-disabled:hover,
.rc-input-number-handler-up-disabled:hover {
  color: #999;
  border-color: #d9d9d9;
}
.rc-input-number-disabled .rc-input-number-input {
  background-color: #f3f3f3;
  cursor: not-allowed;
  opacity: 0.72;
}
.rc-input-number-disabled .rc-input-number-handler {
  opacity: 0.3;
}
.rc-input-number-disabled .rc-input-number-handler:hover {
  color: #999;
  border-color: #d9d9d9;
}

.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}