.block-tools {
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 112px;
  position: relative;
}

.block-tools ul{
	list-style: none;
}

.tools-1 {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #343434;
  padding: 24px 16px;
  height: 100%;
}

.tools-1-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.tools-1-button {
  appearance: none;
  border: none;
  padding: 26px 13px;
  background: #1d1d1d;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  cursor: pointer;
  transition: background 250ms;
}

.tools-1-button:hover {
  background: #0a84ff;
}

.tools-1-button:hover .tools-1-text {
  color: #ffffff;
}

.tools-1-icon {
  width: 30px;
  height: 25px;
  fill: #ffffff;
  transition: fill 250ms linear;
}

.tools-1-text {
  margin: 12px 0 0 0;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 130%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: #d2d2d2;
  justify-content: center;
  transition: color 250ms linear;
}

.tools-2 {
  display: flex;
  flex-direction: column;
  background: #343434;
  padding: 24px 16px;
}

.tools-2-list {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.tools-2-list-button {
  appearance: none;
  border: none;
  background: #1d1d1d;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 250ms linear;
}

.tools-2-list-button:hover {
  background: #0a84ff;
}

.tools-2-list-button:hover .tools-2-icon {
  fill: #ffffff;
}

.tools-2-icon {
  width: 16px;
  height: 13px;
  fill: #3b3c3c;
  transition: fill 250ms linear;
}

.tools-2-list2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 0;
  padding: 0;
}

.tools-2-item2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tools-2-button {
  appearance: none;
  border: none;
  background: #272727;
  border-radius: 12px;
  padding: 13px 16px;
  width: 100%;
  cursor: pointer;
  transition: background 250ms linear;
}

.tools-2-button:hover {
  background: #0a84ff;
}

.tools-2-button:hover .tools-2-icon2 {
  fill: #ffffff;
}

.tools-2-button:hover .tools-2-text {
  color: #ffffff;
}

.tools-2-button-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #272727;
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 250ms linear;
}

.tools-2-button-link:hover {
  background: #0a84ff;
}

.tools-2-button-link:hover .tools-2-icon2 {
  fill: #ffffff;
}

.tools-2-button-link:hover .tools-2-text {
  color: #ffffff;
}

.tools-2-remove {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 15px);
  background: #272727;
  padding: 6px 12px;
  border-radius: 0px 8px 8px 0px;
}

.tools-2-remove-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.tools-2-remove-button {
  appearance: none;
  border: none;
  padding: 11px 28px;
  background: #1d1d1d;
  border-radius: 12px;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 130%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: #d2d2d2;
  cursor: pointer;
  transition: all 250ms linear;
}

.tools-2-remove-button:hover {
  color: #ffffff;
  background: #0a84ff;
}

.tools-2-icon2 {
  width: 15px;
  height: 20px;
  margin-bottom: 8px;
  fill: #8d8e8e;
  transition: fill 250ms linear;
}

.tools-2-text {
  font-style: normal;
  font-weight: bold;
  font-size: 11px;
  line-height: 130%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: #fff;
  transition: color 250ms linear;
  margin-bottom: 0;
}

.tools-line {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 100%;
  display: flex;
  opacity: 0;
  flex-direction: column;
  background: #1d1d1d;
  width: 152px;
  height: 100%;
  pointer-events: none;
  transition: all 250ms linear;
}

.tools-line.open-line {
  opacity: 1;
  pointer-events: auto;
}

.tools-line-list {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.tools-line-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1d1d1d;
  padding: 20px 15px;
  border-bottom: 1px solid #2b2b2b;
}

.tools-line-clear {
  display: flex;
  align-items: center;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
}

.tools-line-clear:hover .tools-line-clear-icon {
  fill: #0a84ff;
}

.tools-line-clear:hover .tools-line-clear-text {
  color: #0a84ff;
}

.tools-line-clear-icon {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  fill: #8d8e8e;
  transition: fill 250ms linear;
}

.tools-line-clear-text {
  font-style: normal;
  font-weight: normal;
  font-size: 9px;
  line-height: 11px;
  display: flex;
  align-items: center;
  color: #8d8e8e;
  transition: color 250ms linear;
}

.tools-line-exit,
.tools-forms-button-close,
.tools-text-button-close,
.tools-graph-button-close {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
}

.tools-line-exit:hover .tools-line-exit-icon,
.tools-forms-button-close:hover .tools-line-exit-icon,
.tools-text-button-close:hover .tools-line-exit-icon,
.tools-graph-button-close:hover .tools-line-exit-icon {
  fill: #0a84ff;
}

.tools-line-exit:hover .tools-forms-button-close-icon,
.tools-forms-button-close:hover .tools-forms-button-close-icon,
.tools-text-button-close:hover .tools-forms-button-close-icon,
.tools-graph-button-close:hover .tools-forms-button-close-icon {
  fill: #0a84ff;
}

.tools-line-exit-icon {
  width: 12px;
  height: 12px;
  fill: #8d8e8e;
  transition: fill 250ms linear;
}

.tools-line-item-text {
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 13px;
  display: flex;
  align-items: center;
  color: #ffffff;
  margin: 0;
}

.tools-line-color {
  appearance: none;
  border: none;
  border-radius: 50%;
  background: #eb5757;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.tools-line-color-block {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  flex-direction: column;
  padding: 15px 15px;
  background: #272727;
  border-radius: 0px 8px 8px 0px;
}

.tools-line-color-block-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.tools-line-color-block-item {
  width: calc((100% - 30px) / 4);
}

.tools-line-color-button-white,
.tools-line-color-button-red,
.tools-line-color-button-yellow,
.tools-line-color-button-orange,
.tools-line-color-button-purple,
.tools-line-color-button-blue,
.tools-line-color-button-green {
  appearance: none;
  width: 25px;
  height: 25px;
  padding: 2px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.tools-line-color-button-white:hover,
.tools-line-color-button-red:hover,
.tools-line-color-button-yellow:hover,
.tools-line-color-button-orange:hover,
.tools-line-color-button-purple:hover,
.tools-line-color-button-blue:hover,
.tools-line-color-button-green:hover {
  border: 2px solid #ffffff;
}

.tools-line-color-button-white {
  background: white;
}

.tools-line-color-button-red {
  background: red;
}

.tools-line-color-button-yellow {
  background: yellow;
}

.tools-line-color-button-orange {
  background: orange;
}

.tools-line-color-button-purple {
  background: purple;
}

.tools-line-color-button-blue {
  background: blue;
}

.tools-line-color-button-green {
  background: green;
}

.tools-line-color-button-non {
  border: none;
  background: none;
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
}

.tools-line-color-button-non:hover {
  border: 2px solid #0a84ff;
  border-radius: 50%;
}

.tools-line-color-button-non-icon {
  width: 25px;
  height: 25px;
}

.tools-line-color-block-info {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.tools-line-color-block-text {
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 13px;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.tools-line-color-block-number {
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 13px;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.tools-line-color-block-input {
  -webkit-appearance: none;
  margin-top: 20px;
  background: none;
}

.tools-line-color-block-input::-webkit-slider-runnable-track {
  background: #525252;
  border: 0px solid #ffffff;
  outline: none;
  border-radius: 20px;
  width: 100%;
  height: 4px;
}

.tools-line-color-block-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -5px;
  margin-bottom: -5px;
}

.tools-line-size {
  appearance: none;
  background: none;
  border: none;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  display: flex;
  align-items: center;
  color: #ffffff;
  cursor: pointer;
}

.tools-line-size-block {
  display: none;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  left: 100%;
  background: #272727;
  border-radius: 0px 8px 8px 0px;
  padding: 24px 12px;
}

.tools-line-size-block-input {
  -webkit-appearance: none;
  background: none;
}

.tools-line-size-block-input::-webkit-slider-runnable-track {
  background: #525252;
  border: 0px solid #ffffff;
  outline: none;
  border-radius: 20px;
  width: 100%;
  height: 4px;
}

.tools-line-size-block-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -5px;
  margin-bottom: -5px;
}

.tools-line-form {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
}

.tools-forms {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 100%;
  display: flex;
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  background: #1d1d1d;
  width: 152px;
  height: 100%;
  transition: opacity 250ms linear;
}

.tools-forms.open-forms {
  opacity: 1;
  pointer-events: auto;
}

.tools-forms-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: 0;
}

.tools-forms-list-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 20px 15px;
  border-bottom: 1px solid #2b2b2b;
}

.tools-forms-button-clear {
  appearance: none;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.tools-forms-button-clear:hover .tools-forms-button-clear-icon {
  fill: #0a84ff;
}

.tools-forms-button-clear:hover .tools-forms-button-clear-text {
  color: #0a84ff;
}

.tools-forms-button-clear-icon {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  fill: #8d8e8e;
  transition: fill 250ms linear;
}

.tools-forms-button-clear-text {
  font-style: normal;
  font-weight: normal;
  font-size: 9px;
  line-height: 11px;
  display: flex;
  align-items: center;
  color: #8d8e8e;
  transition: color 250ms linear;
}

.tools-forms-button-close {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
}

.tools-forms-button-close:hover .tools-forms-button-close-icon {
  fill: #0a84ff;
}

.tools-forms-button-close-icon {
  width: 12px;
  height: 12px;
  fill: #8d8e8e;
  transition: fill 250ms linear;
}

.tools-forms-list-item-text {
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 13px;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.tools-forms-button-color {
  cursor: pointer;
  appearance: none;
  border: none;
  background: #eb5757;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.tools-forms-button-circled {
  appearance: none;
  background: none;
  border-radius: 50%;
  border: 3px solid #ffffff;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.tools-forms-circled {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 100%;
  padding: 13px 12px;
  border-radius: 0px 8px 8px 0px;
  background: #272727;
}

.tools-forms-circled-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.tools-forms-circled-item {
  width: calc((100% - 30px) / 4);
}

.tools-forms-circled-button-n,
.tools-forms-circled-button-white,
.tools-forms-circled-button-red,
.tools-forms-circled-button-yellow,
.tools-forms-circled-button-orange,
.tools-forms-circled-button-purple,
.tools-forms-circled-button-blue,
.tools-forms-circled-button-green {
  appearance: none;
  border: none;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.tools-forms-circled-button-white {
  background: white;
}

.tools-forms-circled-button-red {
  background: #eb5757;
}

.tools-forms-circled-button-yellow {
  background: #f3c747;
}

.tools-forms-circled-button-orange {
  background: #f2994a;
}

.tools-forms-circled-button-purple {
  background: #9b51e0;
}

.tools-forms-circled-button-blue {
  background: #2d9cdb;
}

.tools-forms-circled-button-green {
  background: #27ae60;
}

.tools-forms-circled-button-icon {
  width: 25px;
  height: 25px;
}

.stronge-circled {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.tools-forms-list-item-stronge {
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 13px;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.tools-forms-stronge-input {
  margin-top: 15px;
  -webkit-appearance: none;
  background: none;
}

.tools-forms-stronge-input::-webkit-slider-runnable-track {
  background: #525252;
  border: 0px solid #ffffff;
  outline: none;
  border-radius: 20px;
  width: 100%;
  height: 4px;
}

.tools-forms-stronge-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -5px;
  margin-bottom: -5px;
}

.tools-forms-list-item-stronge {
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 13px;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.tools-forms-opacity-input {
  margin-top: 15px;
  -webkit-appearance: none;
  background: none;
}

.tools-forms-opacity-input::-webkit-slider-runnable-track {
  background: #525252;
  border: 0px solid #ffffff;
  outline: none;
  border-radius: 20px;
  width: 100%;
  height: 4px;
}

.tools-forms-opacity-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -5px;
  margin-bottom: -5px;
}

.tools-forms-button-size {
  appearance: none;
  border: none;
  background: none;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 13px;
  display: flex;
  align-items: center;
  color: #ffffff;
  cursor: pointer;
}

.tools-line-size-forms-input {
  -webkit-appearance: none;
  background: none;
}

.tools-line-size-forms-input::-webkit-slider-runnable-track {
  background: #525252;
  border: 0px solid #ffffff;
  outline: none;
  border-radius: 20px;
  width: 100%;
  height: 4px;
}

.tools-line-size-forms-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -5px;
  margin-bottom: -5px;
}

.tools-forms-list-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 22px 11px;
}

.tools-forms-list-form-item {
  width: calc((100% - 8px) / 2);
}

.tools-forms-line-form-button {
  appearance: none;
  padding: 15px;
  border: 2px solid transparent;
  background: #35383c;
  box-sizing: border-box;
  border-radius: 12px;
  cursor: pointer;
  transition: border 200ms linear;
}

.tools-forms-line-form-button:hover {
  border: 2px solid #0a84ff;
}

.tools-forms-line-form-button.active {
  border: 2px solid #0a84ff;
}

.tools-forms-list-form-icon {
  width: 28px;
  height: 28px;
}

.tools-line-form-block {
  display: none;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 100%;
  background: #272727;
  border-radius: 0px 8px 8px 0px;
  padding: 19px 24px;
}

.tools-line-form-block-button {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
}

.tools-line-form-block-button2 {
  appearance: none;
  background: none;
  border: none;
  margin-left: 24px;
  cursor: pointer;
}

.tools-line-form-block-icon {
  width: 20px;
  height: 20px;
}

.tools-line-form-icon {
  width: 20px;
  height: 18px;
}

.tools-line-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 22px 12px;
  margin-bottom: 0;
}

.tools-line-select-item {
  width: calc((100% - 8px) / 2);
  display: flex;
  justify-content: center;
}

.tools-line-select-button {
  display: flex;
  justify-content: center;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 15px;
  background: #35383c;
  box-sizing: border-box;
  border-radius: 12px;
  border: 2px solid transparent;
}

.tools-line-select-button:hover {
  border: 2px solid #0a84ff;
}

.tools-line-select-button.active {
  border: 2px solid #0a84ff;
}

.tools-line-select-icon {
  width: 30px;
  height: 30px;
}

.tools-texts {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 100%;
  display: flex;
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  background: #1d1d1d;
  width: 152px;
  height: 100%;
  transition: opacity 250ms linear;
}

.tools-texts.open-texts {
  opacity: 1;
  pointer-events: auto;
}

.tools-graph {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 100%;
  display: flex;
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  background: #1d1d1d;
  width: 152px;
  height: 100%;
  transition: opacity 250ms linear;
}

.tools-graph.open-graph {
  opacity: 1;
  pointer-events: auto;
}

.tools-graph-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;
  gap: 8px;
  margin-bottom: 0;
}

.tools-graph-item {
  width: calc((100% - 8px) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tools-graph-button {
  display: flex;
  appearance: none;
  background: #35383c;
  border-radius: 12px;
  padding: 15px;
  border: 2px solid transparent;
  cursor: pointer;
}

.tools-graph-button:hover {
  border: 2px solid #0a84ff;
}

.tools-graph-button.active {
  border: 2px solid #0a84ff;
}

.tools-graph-icon {
  width: 30px;
  height: 30px;
}