@import url('../global.css');
@import url('../tables.css');
@import url('../script.css');

@import url('https://fonts.googleapis.com/css?family=Roboto:300&display=swap');

tr[data-tr-timestamp], tr[data-tr-mark] {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

[data-tr-timestamp] .ui.label {
  padding-left: 6px;
  padding-right: 6px;
  min-width: 1em;
}

.css-op-select-el {
  position: relative;
}

.css-op-select > .css-op-select-el::before {
  content: "\f00c";
  font-family: Icons;
  position: absolute;
  left: -1.5em;
  top: 0px;
}

.detail-content span {
  font-size: 70%;
}

.dropdown.text-full-width > .text {
  width: calc(100% - 2.5em);
}

.detail-top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5em;
}

.detail-top h1.header {
  color: white;
  margin-top: 0;
  padding-left: 0.25em;
}

.detail-timestamp {
  color: white;
  position: absolute;
  top: 1.25em;
  right: 2em;
}

.detail-identifier {
  color: white;
  position: absolute;
  top: 2.75em;
  right: 2em;
  opacity: 40%;
}

.detail-top img {
  height: 5em;
  padding-left: 1em;
}

.detail-content {
  margin-top: 4em;
  font-size: 1.25em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.detail-entry {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0.35em;
}

.detail-item {
  flex: 0 49%;
}

.detail-panel {
  flex: 0 33%;
  padding: 1em;
}

[data-sortable] {
  position: relative;
}

[data-sortable] * {
  pointer-events: none;
}

[data-sortable]::before {
  transform: scale(0.7);
}

[data-sortable]::after {
  transform: scale(0.7);
}

[data-sortable="1"]::before {
  content: "\f0de";
  font-family: Icons;
  position: absolute;
  left: 1px;
  top: 3px;
}

[data-sortable="2"]::before {
  content: "\f0dd";
  font-family: Icons;
  position: absolute;
  left: 1px;
  bottom: 3px;
}

[data-sortable="1"]::after {
  content: attr(data-sortable-index);
  position: absolute;
  left: 1px;
  top: 33%;
}

[data-sortable="2"]::after {
  content: attr(data-sortable-index);
  position: absolute;
  left: 1px;
  top: 33%;
}

.css-temporary {
  color: orange;
  position: absolute;
  font-size: 50%;
  top: 4em;
  width: 20em;
}

.css-settings-buttons > .button {
  margin-bottom: 0.5em;
}

.css-settings-buttons > .button > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 3em;
  font-size: 110%;
}

.css-settings-buttons i.icon {
  margin-right: 0em;
}

.script {
  position: relative;
}

.script-icons {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.25em;

  position: absolute;
  top: 1em;
  right: 0.5em;
}

.script-indicators {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.25em;

  position: absolute;
  right: 0.5em;
  bottom: 1em;
}

.script-indicators > i {
  visibility: hidden;
}

.script-indicators[data-remote="true"] > i[data-op="icon-remote"] {
  visibility: visible;
}

.script-indicators[data-assigned="true"] > i[data-op="icon-assigned"] {
  visibility: visible;
}

.script-icons > i {
  visibility: hidden;
}

.script-icons[data-pinned="true"] > i[data-op="icon-pin"], .script:hover > .script-icons > i[data-op="icon-pin"] {
  visibility: visible;
}

.css-context-menu {
  position: absolute !important;
  padding: 0 !important;
  z-index: 99 !important;
}

.css-context-menu-item {
  border: none !important;
  box-shadow: none !important;
}

.css-context-menu-item:hover {
  background-color: rgb(61, 61, 61) !important;
}

.css-context-menu::before {
  top: 1.25em !important;
  z-index: -1 !important;
}

.script-dropdown .script-version {
  float: right; 
}

.script-dropdown .menu .script-version {
  margin-right: 2em;
}