@charset "UTF-8";
.tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.tabs input[type=radio] {
  position: absolute;
  top: 0;
  left: -9999px;
}
.tabs [id^=tab]:checked + label {
  background: #ffffff;
  border-bottom: 1px solid #FFFFFF;
}
.tabs [id^=tab]:checked ~ [id^=tab-content] {
  display: block;
}

.tab:not(:first-child) {
  margin-left: -1px;
}
.tab__label {
  display: block;
  font-weight: normal;
  padding: 2px 16px;
  font-weight: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 26px;
  border: 1px solid #dddddd;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: #eeeeee;
  cursor: pointer;
  z-index: 3;
}
.tab__label:hover {
  background: #dddddd;
}
.tab__label span.fa {
  margin-right: 5px;
}
.tab__content {
  padding: 6px;
  border: 1px solid #dddddd;
  /* Исходный текст подбора в форме редактирования */
}
.tab__content .field__podbor_mono {
  background-color: #fffff3;
  margin: -6px;
  padding: 6px;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 18px;
}

@media only screen and (max-width: 479px) {
  .tab__label-text {
    display: none;
  }
}
.longpress {
  -webkit-animation: 1s longpress;
  animation: 1s longpress;
}

@-webkit-keyframes longpress {
  0%, 10% {
    background: #eeeeee;
  }
  100% {
    background: yellow;
  }
}

@keyframes longpress {
  0%, 10% {
    background: #eeeeee;
  }
  100% {
    background: yellow;
  }
}
.tablimiter {
  bottom: 1px;
  display: block;
  left: 100%;
  margin-left: 0;
  position: absolute;
  top: 0;
  width: 1px;
  z-index: 10;
  background: red;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  left: 808px;
  /*margin-top: 34px;*/
  /*margin-top: 69px;*/
  /*margin-bottom: 21px;*/
}
@media only screen and (max-width: 479px) {
  .tablimiter {
    display: none;
  }
}

/**
 *  Замена текста
 */
#findReplaceResults {
  margin-top: 2px;
  font-size: 9pt;
}
#findReplaceResults.success {
  color: #3c7500;
}
#findReplaceResults.error {
  color: #ff0a0a;
}

.hotkeys {
  margin-left: 4px;
  font-size: 9pt;
}

.hotkeys span {
  display: inline-block;
  padding: 2px 4px;
  background-color: #eeeeee;
  border-color: #eeeeee;
  color: #666;
  margin: 1px 0;
}

#podborEditor {
  padding: 5px;
  border: 1px solid rgb(217, 217, 217);
  white-space: pre;
  padding: 4px 8px;
  background: transparent;
  min-height: 200px;
  overflow-x: hidden;
}
@media only screen and (max-width: 479px) {
  #podborEditor {
    font-size: 13px;
    overflow-x: scroll;
  }
}
#podborEditor b, #podborEditor .podbor__chord {
  color: #ff7a7a;
  font-weight: 600;
}
#podborEditor .podbor__chord:hover {
  color: #ff7a7a;
  font-weight: 600;
  text-decoration: none;
  cursor: auto;
}
#podborEditor[contenteditable=false] {
  background-color: #eef1f4;
  color: #888888;
  cursor: not-allowed;
}

.cursor-loading-wrapper {
  position: relative;
  background: white;
}

.cursor-loading-wrapper,
.cursor-loading-wrapper * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.cursor-loading-wrapper {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.cursor-loading-wrapper .cursor-pie {
  width: 50%;
  height: 100%;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  position: absolute;
  background: #08c;
}

.cursor-loading-wrapper .cursor-spinner {
  border-radius: 100% 0 0 100%/50% 0 0 50%;
  z-index: 200;
  border-right: none;
  -webkit-animation: rota 0.8s linear infinite;
          animation: rota 0.8s linear infinite;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.cursor-loading-wrapper .cursor-filler {
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  animation: opa 0.8s steps(1, end) infinite reverse;
  border-left: none;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.cursor-loading-wrapper .cursor-mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  -webkit-animation: opa 0.8s steps(1, end) infinite;
          animation: opa 0.8s steps(1, end) infinite;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.cursor-loading-wrapper .cursor-ready {
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  background: #08c;
  border-radius: 50%;
  z-index: 500;
  -webkit-animation: jopa 1.6s steps(1, end) infinite;
          animation: jopa 1.6s steps(1, end) infinite;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

@-webkit-keyframes rota {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rota {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes opa {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes opa {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes jopa {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
@keyframes jopa {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
/* --------------------------------------------------------------------------
   Tooltip CSS - стили относящиеся к подсказкам в label и всплывающим
   -------------------------------------------------------------------------- */
.tooltip_icon, .tooltip .icon, .icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Podbor CSS - стили относящиеся к тексту подбора и управления им
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {
  .podbor__text {
    overflow-x: scroll;
  }
}

/* Аккорд в тексте подбора */
.podbor__chord {
  font-size: 1em;
  color: var(--color-black-940);
  font-weight: 700;
  display: inline;
}
.podbor__chord:hover {
  cursor: pointer;
  text-decoration: underline;
}
@media only screen and (max-width: 479px) {
  .podbor__chord:hover {
    text-decoration: none;
  }
}
.podbor__chord:focus {
  background-color: transparent;
}

.podbor__keyword {
  /*color: green;*/
  /*color: #a0a0a0;*/
  /*color: #a0a0a0;*/
  color: #9e9e9e;
  /*color: #0db3ff;*/
  /*display: inline-block;*/
}

/*.podbor__keyword {*/
.podbor__author-comment, .podbor__author-comment .podbor__chord {
  /*color: #a0a0a0;*/
  color: #0db3ff;
  /*color: #ef6c00;*/
  /*color: #689f38;*/
  /*color: #558b2f;*/
  /*display: inline-block;*/
  line-height: 18px;
}

.podbor__author-comment span:not(.podbor__chord span) {
  /*visibility: hidden;*/
  font-size: 1px;
  letter-spacing: -1px;
  color: transparent;
  line-height: 6px;
}

.podbor__author-comment.hidden .podbor__chord,
.podbor__author-comment.hidden span:not(.podbor__chord span):first-child:before,
.podbor__author-comment.hidden span:not(.podbor__chord span):last-child:after {
  color: transparent;
}

.podbor__author-comment span:not(.podbor__chord span):first-child:before {
  content: "(";
  font-size: 13px; /* Maintain relative font-size in browsers that support it */
  letter-spacing: normal;
  color: #0db3ff;
  display: inline;
  visibility: visible;
  line-height: 6px;
  margin-left: 8px;
}

.podbor__author-comment span:not(.podbor__chord span):last-child:after {
  content: ")";
  font-size: 13px; /* Maintain relative font-size in browsers that support it */
  letter-spacing: normal;
  color: #0db3ff;
  display: inline;
  visibility: visible;
  line-height: 6px;
  margin-right: 8px;
}

.podbor__author-comment.hidden, .podbor__author-comment.hidden span:last-child:after, .podbor__author-comment.hidden span:first-child:before {
  display: inline;
  color: transparent;
}

.podbor__keyword + .podbor__author-comment {
  /*font-weight: bold;*/
  /*display: inline-block;*/
  /*margin-left: 12px;*/
}

.podbor__inline {
  display: block;
}

.podbor__inline .podbor__keyword {
  display: inline;
  margin-right: 6px;
}

.podbor__inline .podbor__keyword.hidden {
  display: none;
}

.podbor__inline .podbor__keyword.hidden .podbor__author-comment.hidden {
  display: none;
}

.podbor__pripev_separate {
  padding-left: 32px;
  /*padding: 6px 0 6px 32px;*/
  margin-left: 0;
}

.podbor__pripev_color {
  /*background-color: #cecece;*/
  /*background-color: #f3ffef;*/
  background: rgb(243, 255, 239);
  background: -webkit-gradient(linear, left top, right top, color-stop(40%, rgb(243, 255, 239)), to(rgb(255, 255, 255)));
  background: linear-gradient(90deg, rgb(243, 255, 239) 40%, rgb(255, 255, 255) 100%);
  /*border-left: 3px solid green;*/
  border-left: 2px solid #46b846;
  margin-left: -24px;
  /*padding-left: 24px;*/
  padding: 6px 0 6px 24px;
}

.podbor__pripev_separate.podbor__pripev_color {
  padding-left: 50px;
}

.podbor-format {
  color: #616161;
}

.podbor-format__button {
  color: #9e9e9e;
  /*color: #a0a0a0;*/
  cursor: pointer;
  margin: -6px 0 12px 0;
}

.podbor-format__button a {
  /*color: #9e9e9e;*/
}

.podbor-format__settings {
  padding: 0 6px 6px 12px;
}

.podbor-format-checkbox-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

.podbor-format-checkbox + .podbor-format-checkbox {
  margin-left: 12px;
}

.podbor-format-checkbox__category {
  font-size: 12px;
}

.podbor-format-checkbox__category + .podbor-format-checkbox {
  margin-left: 12px;
}

.podbor-format-checkbox__input {
  display: none;
}

.podbor-format-checkbox__label {
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  display: block;
  padding-left: 22px;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-tap-highlight-color: transparent;
  line-height: 18px;
  /*padding-top: 0.5rem;/*/
}

.podbor-format-checkbox__label:before {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background: #ffffff;
  border: 1px solid #D0D4D8;
  content: "";
  left: 0;
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.podbor-format-checkbox__label:after {
  direction: ltr;
  display: inline-block;
  font-family: "FontAwesome";
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  text-rendering: optimizeLegibility;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: #ffffff;
  content: "\f00c";
  padding: 1px;
  font-size: 16px;
  line-height: 16px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  left: 0;
}

.podbor-format-checkbox__input:checked + label.podbor-format-checkbox__label:after {
  color: #6aa2da;
}

.podbor-format-checkbox__input:disabled + label.podbor-format-checkbox__label:after {
  color: #cecece;
}

.podbor-format-checkbox__input:disabled + label.podbor-format-checkbox__label {
  color: #cecece;
}

/* --------------------------------------------------------------------------
   Предпросмотр
   -------------------------------------------------------------------------- */
#podbor__preview .podbor__chord {
  color: #ff7a7a;
}
#podbor__preview .podbor__author-comment {
  /*color: #558b2f;*/
  color: #0db3ff;
  display: inline;
  line-height: initial;
}
#podbor__preview .podbor__author-comment span:not(.podbor__chord span) {
  font-size: 1px;
  letter-spacing: -1px;
  color: transparent;
}
#podbor__preview .podbor__author-comment span:not(.podbor__chord span):first-child:before {
  content: "(";
  font-size: 13px;
  letter-spacing: normal;
  color: #0db3ff;
  display: inline;
  margin-left: 9px;
}
#podbor__preview .podbor__author-comment span:not(.podbor__chord span):last-child:after {
  content: ")";
  font-size: 13px;
  letter-spacing: normal;
  color: #0db3ff;
  display: inline;
  margin-right: 9px;
}

/* --------------------------------------------------------------------------
   Podbor Chords CSS - стили относящиеся к картинкам аппликатур
   -------------------------------------------------------------------------- */
/* Картинка аккорда на странице подбора и предпросмотра */
.chord-scheme {
  display: inline-block;
  padding: 2px;
  height: 84px;
  width: 79px;
}
.chord-scheme__img {
  cursor: move;
}
.chord-scheme_move {
  /*background-color: #C8EBFB;*/
  background-color: #7D8F9B;
}

/* Всплывающий аккорд в тексте подбора */
.chord-popup {
  /*position: fixed;*/
  display: block;
  position: absolute;
  top: 0;
  left: -500px;
  z-index: 10;
  padding: 14px 8px 5px 8px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  background: #fff;
  cursor: default;
  top: 100px;
  left: 100px;
  /*margin-top: 20px;*/
  /*margin-left: 12px;*/
  padding: 3px 0px 0px 5px;
  width: 80px;
  white-space: normal;
  /*position: fixed;*/
  /*position: static;*/
}
.chord-popup img {
  width: 100%;
}
@media only screen and (max-width: 479px) {
  .chord-popup {
    width: 80px;
  }
  .chord-popup img {
    width: auto;
  }
}
.chord-popup div {
  cursor: move;
}
.chord-popup__close {
  cursor: pointer;
  position: absolute;
  border-radius: 50%;
  font-size: 8px;
  line-height: 11px;
  z-index: 300;
  color: white;
  text-align: center;
  display: none;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 32px;
  height: 32px;
  top: -15px;
  right: -15px;
}
.chord-popup__close:before {
  content: "\f00d";
  font-size: 9px;
  line-height: 13px;
  display: block;
  background: #000;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 10px;
  z-index: 300;
}
@media only screen and (max-width: 479px) {
  .chord-popup__close {
    width: 42px;
    height: 42px;
    top: -18px;
    right: -22px;
    text-align: center;
  }
  .chord-popup__close:before {
    background: #000;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 14px;
  }
}
.chord-popup__close:hover {
  cursor: pointer;
}
.chord-popup__close:hover:before {
  content: "\f00d";
  background-color: #d9b402;
  color: #000;
}
.chord-popup__bookmark {
  position: absolute;
  border-radius: 50%;
  font-size: 12px;
  color: #ff3535;
  line-height: 12px;
  z-index: 300;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: none;
  width: 32px;
  height: 32px;
  bottom: -5px;
  right: -5px;
}
.chord-popup__bookmark:hover {
  cursor: pointer;
}
.chord-popup__bookmark:before {
  content: "\f097";
  margin: 11px;
  display: block;
  z-index: 300;
}
@media only screen and (max-width: 479px) {
  .chord-popup__bookmark {
    display: block;
    width: 42px;
    height: 42px;
    bottom: -14px;
    right: -13px;
  }
  .chord-popup__bookmark:before {
    margin: 15px;
  }
}
.chord-popup_fixed {
  z-index: 12;
  position: fixed !important;
}
.chord-popup_fixed .chord-popup__bookmark {
  display: inline-block;
}
.chord-popup_fixed .chord-popup__bookmark:before {
  content: "\f02e";
}
.chord-popup_open .chord-popup__close {
  display: inline-block;
}
.chord-popup:hover .chord-popup__bookmark {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Podbor Chords CSS - стили относящиеся к картинкам аппликатур
   -------------------------------------------------------------------------- */
.podbor-editor-left-menu {
  display: none;
}
.podbor-editor-left-menu.fa {
  color: #cecece;
  font-weight: 600;
}

/*.podbor-editor__menu-item,*/
.podbor-editor__menu-item {
  /*&:hover {*/
  /*    background-color: #edeff1;*/
  /*    color: #333333;*/
  /*    font-weight: 600;*/
  /*}*/
  /*&-selected {*/
  /*    color: #333333;*/
  /*    font-weight: 600;*/
  /*    text-decoration: none;*/
  /*}*/
}
.podbor-editor__menu-item a {
  /*color: #001a34;*/
  display: block;
  font-size: 14px;
  padding: 0 12px 0 16px;
  font-weight: normal;
  color: #9f9f9f;
  -webkit-transition: all 0.085s ease-in-out;
  transition: all 0.085s ease-in-out;
}
.podbor-editor__menu-item:first-child a {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.podbor-editor__menu-item:last-child a {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.podbor-editor__menu-item a .fa {
  margin-right: 6px;
}
.podbor-editor__menu-item:hover a {
  background-color: #edeff1;
  color: #333333;
  font-weight: 600;
  text-decoration: none;
}
.podbor-editor__menu-item:hover a .fa {
  color: #38a800;
  font-weight: 600;
  text-decoration: none;
}
.podbor-editor__menu-item-selected a {
  background-color: #edeff1;
  color: #333333;
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 1156px) {
  .podbor-editor-left-menu {
    position: fixed;
    display: block;
    top: 100px;
    margin-left: -190px;
    line-height: 36px;
    background: #f9f9f9;
    /*padding: 6px 0;*/
    border-radius: 12px;
  }
}