/*:root{
  --warning: #ffc107;
  --primary: #0d6efd;
  --danger: #dc3545;
  --cdanger: white;
  --padding: 6px 12px;
  --radius: 4px;
}*/

:root{
  --bs-success: rgb(25,135,84);
  --bs-primary: #0d6efd;
  --bg-color: rgb(239,241,242);
  --header-font-size: 100%;
  --header-font-weight: 500;
  --yellow: #ee8;
  --scratch: var(--bs-warning);
  --scratch: #a23c01;
  --header-sidebar-bg: #014681;
  --combining-bg: #FFA726;
  --tooltip-bg: #eee;
  --selected-border: #0e62c9;
  --blue-600: #0a58ca;
}

.Highlighted {
  background-color: var(--yellow)!important;
}

.btn-outline-light{
  margin-left: 10px;
}

.Selected {
  background-color: #00DCFF40!important;
}

@keyframes reveal {
  from {opacity: 0.8;}
  to {opacity: 1;}
}

@keyframes zoom {
  from {transform: scale(1.0);}
  to {transform: scale(1.01);}
}

@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.Flash {
  animation-name: reveal;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

.Zoom {
  animation-name: zoom;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

.max{
  /*max-height:80vh;
  overflow-y: auto;*/
  animation: reveal 0.2s ease-in;
}

/*https://stackoverflow.com/questions/69519541/react-beautiful-dnd-auto-scroll-between-droppable*/
*{scroll-behavior: unset !important}
body{overflow: hidden;}

#status{
  padding-right: 16px;
}

#tooltip-bottom {
  opacity: 1.0;
  animation: reveal 0.2s ease-in;
}
#tooltip-bottom > .tooltip-inner {
  background-color: var(--tooltip-bg);
  border:0px solid lightgray;
  opacity: 1.0;
  text-align: left;
  color:black;
  overflow-x: auto;
  overflow-y: auto;
  border:1px solid lightgray;
}

.tooltip-inner::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}
.tooltip-inner::-webkit-scrollbar-thumb {
  background: lightgray;
  border-radius:4px;
  border:1px solid #eee;
}

/*#tooltip-bottom > .tooltip-arrow {
  display: none;
}*/

#tooltip-bottom-task {
  opacity: 1.0;
  min-width: 420px;
}

#tooltip-bottom-task > .tooltip-inner {
  display:flex;
  flex-direction: column;
  max-height: 60vh;
  min-width:420px;
  background-color: var(--tooltip-bg);
  text-align: left;
  color:black;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid lightgray;
  padding:0;
}

#tooltip-bottom-task-hover {
  opacity: 1.0;
  min-width: 420px;
}
#tooltip-bottom-task-hover.hide-tooltip {
  display: none;
}

#tooltip-bottom-task-hover > .tooltip-inner {
  display:flex;
  flex-direction: column;
  max-height: 60vh;
  min-width:420px;
  background-color: var(--tooltip-bg);
  text-align: left;
  color:black;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid lightgray;
  padding:0;
}

.scratch {
  color: white!important;
  border: 2px solid var(--scratch)!important;
}

.scratch-header {
  background-color: var(--scratch)!important;
  color: white!important;
}

#resizer {
  width: 3px;
  z-index: 2;
  cursor: col-resize;
  user-select: none;
  background: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#resizer:hover{
  background: var(--header-sidebar-bg);
}

#searchbox{
  outline: none;
  border:0;
  min-width: 90px;
  border: none;
  padding: 5px;
  width: 90%;
  min-width: 90px;
  font-size: 14px;
}

#column-header .badge {
  background-color: unset!important;
  color: white!important;
}

.navbar {
  background-color: var(--blue-600)!important;
}

.navbar-text{
  white-space: nowrap;
  padding-left:30px;
}

.navbar button {
  white-space: nowrap;
}

.pill{
  color:black!important;
  background-color: transparent!important;
  cursor: pointer;
}

.Selected-Original {
  border: 3px solid var(--selected-border)!important;
}

.spin{
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}