@import '../../styles/variables.css';
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --circle-size: 22px;
  --smallPadding: 8px;
  --largePadding: calc(var(--smallPadding) * 2);
  --bg-color: #242c35;
}

body {
  background-color: #242c35;
}

.demo {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

.demo__rhs-panel {
  background-color: var(--bg-color);
  padding: 0px;
  font-size: 16px;
}

.demo__options-panel,
.demo__rhs-panel > .demo__options-panel + .demo__options-panel {
  margin: 0px;
  padding: var(--largePadding);
  background-color: var(--bg-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.demo__options-panel label {
  margin: 0px;
}

.demo__options-panel label:hover {
  background-color: transparent;
}

.demo__options-panel .legend-container {
  padding: var(--smallPadding) 0px 0px;
}
.demo__legend_off_instructions,
.demo__legend_on_instructions {
  display: inline-block;
  padding: 0px;
  line-height: normal;
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.demo__legend_off_instructions {
  display: none;
}

.options-title {
  padding: var(--largePadding) 0px var(--smallPadding);
  font-weight: 700;
}

label.selection-mode-label {
  padding: var(--smallPadding) 0px;
  margin: 0px;
}

.option-container {
  padding: var(--smallPadding) 0px;
}

.option-container label {
  padding-bottom: var(--smallPadding);
}

span.circle {
  border-radius: 22px;
  display: inline-block;
  margin: 0px var(--smallPadding) 0px 0px;
  padding: 4px;
  width: 8px;
  min-width: 8px;
  height: 8px;
}

.circle-ceo {
  background: #04bf8e;
}

.circle-manager {
  background: #fc766a;
}

.circle-employee {
  background: #2676c7;
}

span.demo__legend {
  margin: 0px;
  padding: calc(var(--smallPadding) / 2) 0px;
}

.demo__options-panel select {
  background-color: #242c35;
  border-radius: 0px;
  border: 1px solid #dedede80;
  color: #d6d6d6;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  text-align: left;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.712087 0.524587C1.0782 0.158471 1.6718 0.158471 2.03791 0.524587L7 5.48667L11.9621 0.524587C12.3282 0.158471 12.9218 0.158471 13.2879 0.524587C13.654 0.890704 13.654 1.4843 13.2879 1.85041L7.66291 7.47541C7.2968 7.84153 6.7032 7.84153 6.33709 7.47541L0.712087 1.85041C0.345971 1.4843 0.345971 0.890704 0.712087 0.524587Z' fill='%23A9A9A9'/%3E%3C/svg%3E%0A");
  cursor: pointer;
}
.check.fas {
  color: #bbb;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 25px;
}
.check.fas:hover {
  color: #fff;
}

input ~ .check::before {
  content: '\f070';
  font-size: 20px;
  font-weight: 900;
}

input:checked ~ .check::before {
  content: '\f06e';
  font-size: 20px;
  font-weight: 900;
}

input ~ .toggle::before {
  content: '\f205';
  font-size: 20px;
  font-weight: 900;
  vertical-align: middle;
}

input ~ .toggle {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
  color: #ffffff;
}

input:not(:checked) ~ .demo-legend .demo__legend_on {
  display: none;
}

input:checked ~ .demo-legend .demo__legend_off {
  display: none;
}

label:has(input:not(:checked)) ~ .demo__legend_on_instructions {
  display: none;
}

label:has(input:not(:checked)) ~ .demo__legend_off_instructions {
  display: inline-block;
}

input:checked ~ .toggle {
  -webkit-transform: none;
          transform: none;
  color: #04bf8e;
}

/* Annotation edit box styles */

#annotation-editor {
  background-color: #242c35;
  display: none;
  max-height: 300px;
  max-width: 300px;
  overflow-y: auto;
  position: absolute;
  border-radius: 8px;
  min-height: 68px;
  min-width: 72px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px;
}

#annotation-editor-text {
  background-color: #242c35;
  width: 100%;
  color: #e5e8eb;
  font-family: sans-serif;
  font-size: 14px;
  padding: 0px 0px 5px 0px;

  /* remove border on focus */
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  resize: none; /*remove the resize handle on the bottom right*/
}
.annotation-editor-button {
  background-color: #3e414b;
  color: #afafaf;
  border: none;
  padding-block: 0;
  padding-inline: 0;
  height: 26px;
  width: 26px;
  margin: 0px;
  border-radius: 5px;
}

.annotation-editor-button:not(:first-child) {
  margin: 0px 0px 0px 5px;
}

.annotation-editor-button:hover {
  background-color: #565a69;
}

.annotation-editor-button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}

.button-container {
  padding: var(--smallPadding) 0px var(--largePadding);
}

.export-button {
  width: 100%;
  height: 36px;
  color: #fff;
  background-color: #333745;
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  border: none;
  margin-bottom: 10px;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.export-button:hover {
  background-color: #7380ac;
}

.export-container {
  padding: 0px;
}

#exportimg {
  min-height: 200px;
}