@import url(https://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);@import url(https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap);@import url(https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap);@charset "UTF-8";
.sidebar-top .tool-title, .sidebar-top a, .sidebar-top {
  padding: 0;
  margin: 0;
  border: 0;
}

/* __________________________RESET CSS__________________________*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  text-align: center;
  background-color: #fafafa;
  height: 100%;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

#prompt_window {
  position: fixed;
  width: 800px;
  min-height: 300px;
  border-radius: 5px;
  padding: 20px;
  background-color: white;
  display: inline-block;
  z-index: 999999999999;
  top: 30px;
  border: 1px solid #ccc;
  -webkit-box-shadow: 0px 0px 40px 0px #000;
          box-shadow: 0px 0px 40px 0px #000;
  left: calc(50vw - 400px);
  padding-bottom: 70px;
  color: #555;
}

#prompt_window h2 {
  font-size: 30px;
  font-weight: bold;
  color: #068C9B;
  margin-bottom: 20px;
}

#prompt_window .prompt_window_content {
  text-align: left;
}

#prompt_window .close_prompt {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  width: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-family: Verdana;
  color: white;
  background-color: #aaa;
  border-radius: 3px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#prompt_window .close_prompt:hover {
  cursor: pointer;
  background-color: #888;
}

#prompt_window button {
  position: absolute;
  bottom: 20px;
  left: 5%;
  width: 90%;
}

.are_you_sure {
  display: none;
  position: fixed;
  width: 80%;
  /* Set the width to a relative percentage */
  max-width: 500px;
  /* Limit the maximum width */
  height: auto;
  max-height: 90vh;
  top: 50%;
  /* Center the modal vertically */
  left: 50%;
  /* Center the modal horizontally */
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /* Adjust the modal position to be centered */
  padding: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fafafa;
  border: 1px solid #666;
  z-index: 999999999;
  -webkit-box-shadow: 0px 0px 500px 141px black;
  box-shadow: 0px 0px 500px 141px rgba(0, 0, 0, 0.28);
  overflow-y: auto;
  /* Enable scrolling if content exceeds the maximum height */
}

.are_you_sure h3 {
  font-size: 32px;
  font-weight: 600;
  line-height: 50px;
  margin-bottom: 20px;
}

.are_you_sure p {
  font-size: 17px;
  line-height: 20px;
}

.are_you_sure .are_you_sure_button_container {
  margin-top: 20px;
}

.are_you_sure #oh_yeah_proceed,
.are_you_sure #please_god_no,
.are_you_sure #well_ok_then {
  width: 50%;
  /* Half the width of the modal */
  height: auto;
  padding: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  /* Place buttons side by side */
  border: 1px solid #888;
  background-color: green;
  font-size: 30px;
  font-weight: 500;
  cursor: pointer;
  color: white;
  text-align: center;
  /* Center the text inside the button */
}

.are_you_sure #please_god_no {
  left: 266px;
  background-color: indianred;
}

.are_you_sure #well_ok_then {
  background-color: #068C9B;
  left: 150px;
}

.youtube-embed-placeholder {
  background-image: url("../images/yt-placeholder.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*iframe{opacity: 0;}*/
.yt-ph-link {
  color: white;
  padding-top: 20;
  position: absolute;
  font-size: 18px;
  font-weight: 800;
  width: 100%;
  text-align: center;
  display: none;
}

strong {
  font-weight: 500;
}

h1, h3 {
  color: #444;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

h4, h5, h6 {
  color: #444;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  margin-top: 0px;
  padding-bottom: 5px;
  margin-bottom: 0px;
  font-size: 12px;
  width: 100%;
  TEXT-ALIGN: CENTER;
}

h1 {
  FONT-SIZE: 40PX;
  margin-bottom: 0px;
}

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6, p {
  cursor: default;
}

p {
  font-size: 13px;
}

b {
  font-weight: 500;
}

.jcon, .jcons, .jconxs {
  display: inline-block;
  background-image: url("../icons/icon_sprite.png");
  background-size: 360px;
  background-repeat: no-repeat;
  width: 36px !important;
  height: 36px !important;
  position: relative;
  top: 0px;
  left: 0px;
}

.jcons {
  background-size: 260px;
  width: 26px !important;
  height: 26px !important;
}

.jconxs {
  background-size: 180px;
  width: 18px !important;
  height: 18px !important;
}

.function_switch:active .jcon,
.function_switch:active .jcons,
.function_switch:active .jconxs,
.selected-square .jcon,
.function_switch.active_function_btn .jcon,
.selected-square .jcons,
.function_switch.active_function_btn .jcons,
.selected-square .jconxs,
.function_switch.active_function_btn .jconxs,
.active_function_btn .jcon,
.active_function_btn .jcons,
.active_function_btn .jconxs,
.selected .jcon,
.selected .jcons,
.selected .jconxs {
  display: inline-block;
  background-image: url("../icons/icon_sprite_c2.png");
}

.semi-off .jcons {
  opacity: 0.4;
}

.active_function_btn .jcon, .active_function_btn .jcons {
  -webkit-animation: pulseopacity 0.5s infinite;
          animation: pulseopacity 0.5s infinite;
}

@-webkit-keyframes pulseopacity {
  0%, 55%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes pulseopacity {
  0%, 55%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.jcon_00 {
  background-position: 0px 0px;
}

.jcon_01 {
  background-position: -36px 0px;
}

.jcon_02 {
  background-position: -72px 0px;
}

.jcon_03 {
  background-position: -108px 0px;
}

.jcon_04 {
  background-position: -144px 0px;
}

.jcon_05 {
  background-position: -180px 0px;
}

.jcon_06 {
  background-position: -216px 0px;
}

.jcon_07 {
  background-position: -252px 0px;
}

.jcon_08 {
  background-position: -288px 0px;
}

.jcon_09 {
  background-position: -324px 0px;
}

.jcon_10 {
  background-position: 0px -36px;
}

.jcon_11 {
  background-position: -36px -36px;
}

.jcon_12 {
  background-position: -72px -36px;
}

.jcon_13 {
  background-position: -108px -36px;
}

.jcon_14 {
  background-position: -144px -36px;
}

.jcon_15 {
  background-position: -180px -36px;
}

.jcon_16 {
  background-position: -216px -36px;
}

.jcon_17 {
  background-position: -252px -36px;
}

.jcon_18 {
  background-position: -288px -36px;
}

.jcon_19 {
  background-position: -324px -36px;
}

.jcon_20 {
  background-position: 0px -72px;
}

.jcon_21 {
  background-position: -36px -72px;
}

.jcon_22 {
  background-position: -72px -72px;
}

.jcon_23 {
  background-position: -108px -72px;
}

.jcon_24 {
  background-position: -144px -72px;
}

.jcon_25 {
  background-position: -180px -72px;
}

.jcon_26 {
  background-position: -216px -72px;
}

.jcon_27 {
  background-position: -252px -72px;
}

.jcon_28 {
  background-position: -288px -72px;
}

.jcon_29 {
  background-position: -324px -72px;
}

.jcon_30 {
  background-position: 0px -108px;
}

.jcon_31 {
  background-position: -36px -108px;
}

.jcon_32 {
  background-position: -72px -108px;
}

.jcon_33 {
  background-position: -108px -108px;
}

.jcon_34 {
  background-position: -144px -108px;
}

.jcon_35 {
  background-position: -180px -108px;
}

.jcon_36 {
  background-position: -216px -108px;
}

.jcon_37 {
  background-position: -252px -108px;
}

.jcon_38 {
  background-position: -288px -108px;
}

.jcon_39 {
  background-position: -324px -108px;
}

.jcon_40 {
  background-position: 0px -144px;
}

.jcon_41 {
  background-position: -36px -144px;
}

.jcon_42 {
  background-position: -72px -144px;
}

.jcon_43 {
  background-position: -108px -144px;
}

.jcon_44 {
  background-position: -144px -144px;
}

.jcon_45 {
  background-position: -180px -144px;
}

.jcon_46 {
  background-position: -216px -144px;
}

.jcon_47 {
  background-position: -252px -144px;
}

.jcon_48 {
  background-position: -288px -144px;
}

.jcon_49 {
  background-position: -324px -144px;
}

.jcon_50 {
  background-position: 0px -180px;
}

.jcon_51 {
  background-position: -36px -180px;
}

.jcon_52 {
  background-position: -72px -180px;
}

.jcon_53 {
  background-position: -108px -180px;
}

.jcon_54 {
  background-position: -144px -180px;
}

.jcon_55 {
  background-position: -180px -180px;
}

.jcon_56 {
  background-position: -216px -180px;
}

.jcon_57 {
  background-position: -252px -180px;
}

.jcon_58 {
  background-position: -288px -180px;
}

.jcon_59 {
  background-position: -324px -180px;
}

.jcon_60 {
  background-position: 0px -216px;
}

.jcon_61 {
  background-position: -36px -216px;
}

.jcon_62 {
  background-position: -72px -216px;
}

.jcon_63 {
  background-position: -108px -216px;
}

.jcon_64 {
  background-position: -144px -216px;
}

.jcon_65 {
  background-position: -180px -216px;
}

.jcon_66 {
  background-position: -216px -216px;
}

.jcon_67 {
  background-position: -252px -216px;
}

.jcon_68 {
  background-position: -288px -216px;
}

.jcon_69 {
  background-position: -324px -216px;
}

.jcon_70 {
  background-position: 0px -252px;
}

.jcon_71 {
  background-position: -36px -252px;
}

.jcon_72 {
  background-position: -72px -252px;
}

.jcon_73 {
  background-position: -108px -252px;
}

.jcon_74 {
  background-position: -144px -252px;
}

.jcon_75 {
  background-position: -180px -252px;
}

.jcon_76 {
  background-position: -216px -252px;
}

.jcon_77 {
  background-position: -252px -252px;
}

.jcon_78 {
  background-position: -288px -252px;
}

.jcon_79 {
  background-position: -324px -252px;
}

.jcon_80 {
  background-position: 0px -288px;
}

.jcon_81 {
  background-position: -36px -288px;
}

.jcon_82 {
  background-position: -72px -288px;
}

.jcon_83 {
  background-position: -108px -288px;
}

.jcon_84 {
  background-position: -144px -288px;
}

.jcon_85 {
  background-position: -180px -288px;
}

.jcon_86 {
  background-position: -216px -288px;
}

.jcon_87 {
  background-position: -252px -288px;
}

.jcon_88 {
  background-position: -288px -288px;
}

.jcon_89 {
  background-position: -324px -288px;
}

.jcon_90 {
  background-position: 0px -324px;
}

.jcon_91 {
  background-position: -36px -324px;
}

.jcon_92 {
  background-position: -72px -324px;
}

.jcon_93 {
  background-position: -108px -324px;
}

.jcon_94 {
  background-position: -144px -324px;
}

.jcon_95 {
  background-position: -180px -324px;
}

.jcon_96 {
  background-position: -216px -324px;
}

.jcon_97 {
  background-position: -252px -324px;
}

.jcon_98 {
  background-position: -288px -324px;
}

.jcon_99 {
  background-position: -324px -324px;
}

.jcons_00 {
  background-position: 0px 0px;
}

.jcons_01 {
  background-position: -26px 0px;
}

.jcons_02 {
  background-position: -52px 0px;
}

.jcons_03 {
  background-position: -78px 0px;
}

.jcons_04 {
  background-position: -104px 0px;
}

.jcons_05 {
  background-position: -130px 0px;
}

.jcons_06 {
  background-position: -156px 0px;
}

.jcons_07 {
  background-position: -182px 0px;
}

.jcons_08 {
  background-position: -208px 0px;
}

.jcons_09 {
  background-position: -234px 0px;
}

.jcons_10 {
  background-position: 0px -26px;
}

.jcons_11 {
  background-position: -26px -26px;
}

.jcons_12 {
  background-position: -52px -26px;
}

.jcons_13 {
  background-position: -78px -26px;
}

.jcons_14 {
  background-position: -104px -26px;
}

.jcons_15 {
  background-position: -130px -26px;
}

.jcons_16 {
  background-position: -156px -26px;
}

.jcons_17 {
  background-position: -182px -26px;
}

.jcons_18 {
  background-position: -208px -26px;
}

.jcons_19 {
  background-position: -234px -26px;
}

.jcons_20 {
  background-position: 0px -52px;
}

.jcons_21 {
  background-position: -26px -52px;
}

.jcons_22 {
  background-position: -52px -52px;
}

.jcons_23 {
  background-position: -78px -52px;
}

.jcons_24 {
  background-position: -104px -52px;
}

.jcons_25 {
  background-position: -130px -52px;
}

.jcons_26 {
  background-position: -156px -52px;
}

.jcons_27 {
  background-position: -182px -52px;
}

.jcons_28 {
  background-position: -208px -52px;
}

.jcons_29 {
  background-position: -234px -52px;
}

.jcons_30 {
  background-position: 0px -78px;
}

.jcons_31 {
  background-position: -26px -78px;
}

.jcons_32 {
  background-position: -52px -78px;
}

.jcons_33 {
  background-position: -78px -78px;
}

.jcons_34 {
  background-position: -104px -78px;
}

.jcons_35 {
  background-position: -130px -78px;
}

.jcons_36 {
  background-position: -156px -78px;
}

.jcons_37 {
  background-position: -182px -78px;
}

.jcons_38 {
  background-position: -208px -78px;
}

.jcons_39 {
  background-position: -234px -78px;
}

.jcons_40 {
  background-position: 0px -104px;
}

.jcons_41 {
  background-position: -26px -104px;
}

.jcons_42 {
  background-position: -52px -104px;
}

.jcons_43 {
  background-position: -78px -104px;
}

.jcons_44 {
  background-position: -104px -104px;
}

.jcons_45 {
  background-position: -130px -104px;
}

.jcons_46 {
  background-position: -156px -104px;
}

.jcons_47 {
  background-position: -182px -104px;
}

.jcons_48 {
  background-position: -208px -104px;
}

.jcons_49 {
  background-position: -234px -104px;
}

.jcons_50 {
  background-position: 0px -130px;
}

.jcons_51 {
  background-position: -26px -130px;
}

.jcons_52 {
  background-position: -52px -130px;
}

.jcons_53 {
  background-position: -78px -130px;
}

.jcons_54 {
  background-position: -104px -130px;
}

.jcons_55 {
  background-position: -130px -130px;
}

.jcons_56 {
  background-position: -156px -130px;
}

.jcons_57 {
  background-position: -182px -130px;
}

.jcons_58 {
  background-position: -208px -130px;
}

.jcons_59 {
  background-position: -234px -130px;
}

.jcons_60 {
  background-position: 0px -156px;
}

.jcons_61 {
  background-position: -26px -156px;
}

.jcons_62 {
  background-position: -52px -156px;
}

.jcons_63 {
  background-position: -78px -156px;
}

.jcons_64 {
  background-position: -104px -156px;
}

.jcons_65 {
  background-position: -130px -156px;
}

.jcons_66 {
  background-position: -156px -156px;
}

.jcons_67 {
  background-position: -182px -156px;
}

.jcons_68 {
  background-position: -208px -156px;
}

.jcons_69 {
  background-position: -234px -156px;
}

.jcons_70 {
  background-position: 0px -182px;
}

.jcons_71 {
  background-position: -26px -182px;
}

.jcons_72 {
  background-position: -52px -182px;
}

.jcons_73 {
  background-position: -78px -182px;
}

.jcons_74 {
  background-position: -104px -182px;
}

.jcons_75 {
  background-position: -130px -182px;
}

.jcons_76 {
  background-position: -156px -182px;
}

.jcons_77 {
  background-position: -182px -182px;
}

.jcons_78 {
  background-position: -208px -182px;
}

.jcons_79 {
  background-position: -234px -182px;
}

.jcons_80 {
  background-position: 0px -208px;
}

.jcons_81 {
  background-position: -26px -208px;
}

.jcons_82 {
  background-position: -52px -208px;
}

.jcons_83 {
  background-position: -78px -208px;
}

.jcons_84 {
  background-position: -104px -208px;
}

.jcons_85 {
  background-position: -130px -208px;
}

.jcons_86 {
  background-position: -156px -208px;
}

.jcons_87 {
  background-position: -182px -208px;
}

.jcons_88 {
  background-position: -208px -208px;
}

.jcons_89 {
  background-position: -234px -208px;
}

.jcons_90 {
  background-position: 0px -234px;
}

.jcons_91 {
  background-position: -26px -234px;
}

.jcons_92 {
  background-position: -52px -234px;
}

.jcons_93 {
  background-position: -78px -234px;
}

.jcons_94 {
  background-position: -104px -234px;
}

.jcons_95 {
  background-position: -130px -234px;
}

.jcons_96 {
  background-position: -156px -234px;
}

.jcons_97 {
  background-position: -182px -234px;
}

.jcons_98 {
  background-position: -208px -234px;
}

.jcons_99 {
  background-position: -234px -234px;
}

.jconxs_00 {
  background-position: 0px 0px;
}

.jconxs_01 {
  background-position: -18px 0px;
}

.jconxs_02 {
  background-position: -36px 0px;
}

.jconxs_03 {
  background-position: -54px 0px;
}

.jconxs_04 {
  background-position: -72px 0px;
}

.jconxs_05 {
  background-position: -90px 0px;
}

.jconxs_06 {
  background-position: -108px 0px;
}

.jconxs_07 {
  background-position: -126px 0px;
}

.jconxs_08 {
  background-position: -144px 0px;
}

.jconxs_09 {
  background-position: -162px 0px;
}

.jconxs_10 {
  background-position: 0px -18px;
}

.jconxs_11 {
  background-position: -18px -18px;
}

.jconxs_12 {
  background-position: -36px -18px;
}

.jconxs_13 {
  background-position: -54px -18px;
}

.jconxs_14 {
  background-position: -72px -18px;
}

.jconxs_15 {
  background-position: -90px -18px;
}

.jconxs_16 {
  background-position: -108px -18px;
}

.jconxs_17 {
  background-position: -126px -18px;
}

.jconxs_18 {
  background-position: -144px -18px;
}

.jconxs_19 {
  background-position: -162px -18px;
}

.jconxs_20 {
  background-position: 0px -36px;
}

.jconxs_21 {
  background-position: -18px -36px;
}

.jconxs_22 {
  background-position: -36px -36px;
}

.jconxs_23 {
  background-position: -54px -36px;
}

.jconxs_24 {
  background-position: -72px -36px;
}

.jconxs_25 {
  background-position: -90px -36px;
}

.jconxs_26 {
  background-position: -108px -36px;
}

.jconxs_27 {
  background-position: -126px -36px;
}

.jconxs_28 {
  background-position: -144px -36px;
}

.jconxs_29 {
  background-position: -162px -36px;
}

.jconxs_30 {
  background-position: 0px -54px;
}

.jconxs_31 {
  background-position: -18px -54px;
}

.jconxs_32 {
  background-position: -36px -54px;
}

.jconxs_33 {
  background-position: -54px -54px;
}

.jconxs_34 {
  background-position: -72px -54px;
}

.jconxs_35 {
  background-position: -90px -54px;
}

.jconxs_36 {
  background-position: -108px -54px;
}

.jconxs_37 {
  background-position: -126px -54px;
}

.jconxs_38 {
  background-position: -144px -54px;
}

.jconxs_39 {
  background-position: -162px -54px;
}

.jconxs_40 {
  background-position: 0px -72px;
}

.jconxs_41 {
  background-position: -18px -72px;
}

.jconxs_42 {
  background-position: -36px -72px;
}

.jconxs_43 {
  background-position: -54px -72px;
}

.jconxs_44 {
  background-position: -72px -72px;
}

.jconxs_45 {
  background-position: -90px -72px;
}

.jconxs_46 {
  background-position: -108px -72px;
}

.jconxs_47 {
  background-position: -126px -72px;
}

.jconxs_48 {
  background-position: -144px -72px;
}

.jconxs_49 {
  background-position: -162px -72px;
}

.jconxs_50 {
  background-position: 0px -90px;
}

.jconxs_51 {
  background-position: -18px -90px;
}

.jconxs_52 {
  background-position: -36px -90px;
}

.jconxs_53 {
  background-position: -54px -90px;
}

.jconxs_54 {
  background-position: -72px -90px;
}

.jconxs_55 {
  background-position: -90px -90px;
}

.jconxs_56 {
  background-position: -108px -90px;
}

.jconxs_57 {
  background-position: -126px -90px;
}

.jconxs_58 {
  background-position: -144px -90px;
}

.jconxs_59 {
  background-position: -162px -90px;
}

.jconxs_60 {
  background-position: 0px -108px;
}

.jconxs_61 {
  background-position: -18px -108px;
}

.jconxs_62 {
  background-position: -36px -108px;
}

.jconxs_63 {
  background-position: -54px -108px;
}

.jconxs_64 {
  background-position: -72px -108px;
}

.jconxs_65 {
  background-position: -90px -108px;
}

.jconxs_66 {
  background-position: -108px -108px;
}

.jconxs_67 {
  background-position: -126px -108px;
}

.jconxs_68 {
  background-position: -144px -108px;
}

.jconxs_69 {
  background-position: -162px -108px;
}

.jconxs_70 {
  background-position: 0px -126px;
}

.jconxs_71 {
  background-position: -18px -126px;
}

.jconxs_72 {
  background-position: -36px -126px;
}

.jconxs_73 {
  background-position: -54px -126px;
}

.jconxs_74 {
  background-position: -72px -126px;
}

.jconxs_75 {
  background-position: -90px -126px;
}

.jconxs_76 {
  background-position: -108px -126px;
}

.jconxs_77 {
  background-position: -126px -126px;
}

.jconxs_78 {
  background-position: -144px -126px;
}

.jconxs_79 {
  background-position: -162px -126px;
}

.jconxs_80 {
  background-position: 0px -144px;
}

.jconxs_81 {
  background-position: -18px -144px;
}

.jconxs_82 {
  background-position: -36px -144px;
}

.jconxs_83 {
  background-position: -54px -144px;
}

.jconxs_84 {
  background-position: -72px -144px;
}

.jconxs_85 {
  background-position: -90px -144px;
}

.jconxs_86 {
  background-position: -108px -144px;
}

.jconxs_87 {
  background-position: -126px -144px;
}

.jconxs_88 {
  background-position: -144px -144px;
}

.jconxs_89 {
  background-position: -162px -144px;
}

.jconxs_90 {
  background-position: 0px -162px;
}

.jconxs_91 {
  background-position: -18px -162px;
}

.jconxs_92 {
  background-position: -36px -162px;
}

.jconxs_93 {
  background-position: -54px -162px;
}

.jconxs_94 {
  background-position: -72px -162px;
}

.jconxs_95 {
  background-position: -90px -162px;
}

.jconxs_96 {
  background-position: -108px -162px;
}

.jconxs_97 {
  background-position: -126px -162px;
}

.jconxs_98 {
  background-position: -144px -162px;
}

.jconxs_99 {
  background-position: -162px -162px;
}

.pulsantiera-sidebar {
  background-color: #fafafa;
  height: 80px;
  text-align: left;
  width: 100%;
  position: relative;
  right: 0px;
  bottom: 0px;
  top: 30px;
  border: 1px solid #AAB4C1;
  border-top: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 7px 17px;
}

.em_puls_label {
  font-size: 7px;
  color: #777;
}

.em_show {
  display: none;
}

.empty_icon_slot {
  display: hidden !important;
  background-color: transparent !important;
}

.empty_icon_slot:hover {
  display: hidden !important;
  background-color: transparent !important;
  cursor: default !important;
}

.sidebar-top {
  background-color: #fff;
  height: calc(100vh - 270px);
  text-align: left;
  width: 100%;
  position: relative;
  right: 0px;
  top: 30px;
  border: 1px solid #AAB4C1;
  border-top: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.sidebar-top .tool-title {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  padding: 5px;
}

.sidebar-top a {
  width: 100%;
  height: 100%;
}

.sidebar-top .bucapt {
  /* button caption */
  display: none;
}

.sidebar-top a img, .sidebar-top button img {
  display: inline-block;
  height: 100%;
  max-height: 35px;
  width: auto;
  padding: 0px;
  border-radius: 5%;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.panels-container {
  display: inline-block;
  background-color: #e9eff2;
  border-left: 1px solid #bacbcf;
  height: 100%;
  width: 270px;
  padding: 0 5px;
  border-bottom-right-radius: 5px;
  position: absolute;
  top: 0;
  left: 69px;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 1;
}

.sidebar-bottom {
  display: inline-block;
  background-color: #fff;
  height: 150px;
  width: 100%;
  border: 1px solid #AAB4C1;
  border-bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  position: absolute;
  bottom: 0;
  left: 0px;
  padding: 8px;
  text-align: left;
  color: #888;
}

.sidebar-bottom #service_id {
  color: #48AAAF;
  font-weight: bold;
  margin-bottom: 6px;
}

.layer-selector {
  border: 1px solid #96b9bd;
  background-color: #f2f5f5;
}

.undos, .redos {
  position: absolute;
  bottom: -5px;
  right: -5px;
  height: 10px;
  width: 14px;
  font-size: 10px;
  line-height: 12px;
  font-weight: bold;
  padding: 1px;
  border-radius: 25%;
  background-color: #575757;
  color: white;
}

.ui-tooltip {
  padding: 6px 10px !important;
  border-radius: 5px !important;
  text-align: left !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #fafafa !important;
  background-color: #444 !important;
  font-size: 14px !important;
  z-index: 999999999999999 !important;
}

.sidebar-top {
  padding: 10px;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 0px;
}

.sidebar-top hr {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #E8EFF2;
}

.sidebar-top h1, .sidebar-top h2, .sidebar-top h3, .sidebar-top h4, .sidebar-top h5, .sidebar-top h6, .sidebar-top p, .sidebar-top a, .sidebar-top input, .sidebar-top output {
  color: #444;
}

.sidebar-top .vertical_spacer {
  display: inline-block;
  width: 0px;
  margin-left: 8px;
  margin-right: 8px;
  border: 2px solid #E8EFF2;
  height: 7px;
}

.slider_set {
  margin: 6px 0;
}

.slider_set p, .slider_set output, .slider_set input {
  font-size: 13px;
  display: inline-block;
  height: 20px !important;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  vertical-align: top;
  line-height: 20px;
  margin: 0 !important;
  padding: 0 !important;
}

.slider_set p {
  width: 40%  !important;
}

.slider_set output {
  width: 10%  !important;
  text-align: center;
}

.slider_set input {
  width: 50% !important;
}

.layer-controller {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  width: 254px;
  background-color: #fafafa;
  border: 1px solid #AAB4C1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
}

.layer-controller .icon_button {
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.layer-controller:hover .icon_button {
  opacity: 1;
}

#lr_xc_show {
  position: absolute;
  bottom: 0;
  left: -35px;
}

#lr_panel_hide {
  position: absolute;
  bottom: 35px;
  left: -35px;
}

.colors-indicator {
  cursor: default;
  display: inline-block;
  width: 28px;
  height: 3px;
  margin: 1.5px;
  line-height: 3px;
  background-color: transparent;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  border-radius: 0;
  -ms-user-select: none;
      user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  position: relative;
}

.colors-indicator .color_thingy {
  display: none;
}

.colors-indicator .color_thingy[class*="color-"] {
  font-size: 0;
  border: 0;
  border-radius: 50%;
  display: inline-block !important;
  height: 5px;
  width: 5px;
  margin: 0 2px;
}

.colors-indicator .drawing-indicator {
  display: inline-block !important;
  position: absolute;
  top: -12px;
  height: 12px;
  width: 100%;
  text-align: center;
  line-height: 12px;
  font-size: 10px;
  color: transparent;
  text-align: center;
}

.colors-indicator .drawing-indicator .line_mark, .colors-indicator .drawing-indicator .rect_mark {
  display: none;
  -webkit-transform: scale(0.56);
          transform: scale(0.56);
  top: -2px;
  opacity: 0.8;
  position: absolute;
  left: 0;
}

.colors-indicator .drawing-indicator .line_mark {
  left: 9px;
}

.colors-indicator .drawing-indicator .sel {
  display: inline-block !important;
  color: #AAB4C1;
}

@-webkit-keyframes colorPulse {
  0% {
    color: #AAB4C1;
  }
  30% {
    color: #068C9B;
  }
  100% {
    color: #444;
  }
}

@-webkit-keyframes has_active {
  0% {
    background-color: transparent;
  }
  30% {
    background-color: #068C9B;
  }
  100% {
    background-color: transparent;
  }
}

#navatar img {
  height: 40px;
  border-radius: 50%;
  position: absolute;
  left: 0;
}

#username_nav {
  width: calc(100% - 20px) !important;
  margin: 0 10px !important;
  background-color: #555;
  border-radius: 20px;
  color: black;
  font-weight: bold;
  padding: 0 !important;
  text-align: center;
  position: relative;
}

#editor_dropdown {
  display: inline-block;
  position: absolute;
  margin: 0;
  top: 0;
  padding: 0;
  left: 0px;
  z-index: 99998;
  text-align: left;
  width: 352px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #424242;
  height: 30px;
  /*border-radius: 5px 5px 0 0;*/
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/*    #editor_dropdown.open{
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }*/
#gs_logo {
  max-height: 22px;
  display: inline-block;
  position: absolute;
  height: 20px !important;
  padding: 3px;
  margin: 2px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#gs_logo img {
  height: 20px !important;
}

#gs_logo:hover {
  cursor: pointer;
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  background-color: transparent !important;
}

#menu_icon {
  text-align: right;
  color: #888;
  position: absolute;
  height: 30px;
  top: 0;
  right: 10px;
  line-height: 30px;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#hamb {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  display: inline-block;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#menu_icon:hover,
#hamb:hover {
  color: white;
}

.open #hamb {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

#editor_dropdown span {
  min-height: 40px;
  padding: 0 10px;
  margin: 0;
  line-height: 40px;
  color: white;
  display: block;
  width: 100%;
  position: relative;
}

.has_sub_dropper:hover .sub_dropper {
  max-width: 100vw;
  max-height: 100vh;
}

.has_sub_dropper:hover:after {
  content: '';
  position: absolute;
  right: 35px;
  top: 10px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #999;
}

.sub_dropper {
  position: absolute;
  top: 0;
  display: inline-block;
  left: 352px;
  background-color: #444;
  border-radius: 5px;
  padding: 40px 0px 10px 0;
  max-width: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.sub_dropper span {
  width: 100%;
  min-width: 300px;
  display: inline;
}

.sub_dropper_label {
  display: inline-block;
  height: 30px;
  width: 100%;
  color: #dedede;
  line-height: 30px;
  background-color: #555;
  top: 0px;
  padding: 5px 20px;
  position: absolute;
}

#editor_dropdown span a {
  color: #a2a2a2;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  display: inline-block;
  padding: 0 10px;
  text-decoration: none;
  width: calc(100% - 40px);
}

#editor_dropdown span a:hover {
  text-decoration: none;
  color: white;
  background-color: #4d6d71;
  border-radius: 5px;
}

#editor_dropdown #dropper {
  display: none;
  background-color: #424242;
  margin-top: 30px;
  padding: 10px 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

/*

.ui-effects-transfer {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 360;
}*/
/* SWITCHES */
.onoffswitch {
  position: relative;
  width: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 15px;
  padding: 0;
  line-height: 14px;
  border: 1px solid #C25757;
  border-radius: 5px;
  background-color: #C25757;
  -webkit-transition: background-color 0.3s ease-in;
  transition: background-color 0.3s ease-in;
}

.onoffswitch-label:before {
  content: "";
  display: block;
  width: 15px;
  margin: 0px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 23px;
  border: 1px solid #C25757;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5) !important;
          box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5) !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
  background-color: #0EC20B;
}

.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
  border-color: #0EC20B;
}

.onoffswitch-checkbox:checked + .onoffswitch-label:before {
  right: 0px;
}

.switcher {
  -background-color: white;
  position: relative;
  max-width: 240px;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 10px;
  height: 20px;
}

.switcher .etichetta-switch {
  display: inline-block;
  vertical-align: top;
  line-height: 22px;
  font-size: 12px;
  color: #555;
  text-transform: uppercase;
  position: absolute;
  left: 0px;
}

.switcher .onoffswitch {
  display: inline-block;
  position: absolute;
  right: 0px;
}

.expandable_set_cont {
  position: relative;
  background-color: #fff;
  padding: 8px;
  border: 1px solid #AAB4C1;
  border-radius: 7px;
  overflow: hidden;
  margin: 10px 0;
  display: none;
  min-height: 16px;
  vertical-align: middle;
}

.expandable_set_cont hr {
  border-color: #AAB4C1 !important;
  margin-bottom: 6px;
}

.expandable_set_cont .full_button {
  color: #fafafa;
  background-color: #068C9B;
  display: block;
  padding: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.expandable_set_cont .full_button:hover {
  background-color: #48AAAF;
}

.expandable_set_cont .full_button:active {
  background-color: #48AAAF;
  color: #444;
}

.close_this_panel {
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  top: 4px;
  right: 2px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0, 0;
  cursor: pointer;
  opacity: 0.2;
  background-image: url("../icons/x.svg");
}

.close_this_panel:hover {
  opacity: 0.6;
}

/*.expandable_set.function_switch:after{
    content:'';
    display: inline-block;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-left: 4px solid transparent;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: 0.3s;
}
.expandable_set.function_switch:hover:after{
   border-bottom-color: $accent_1;
   border-right-color: $accent_1;
   bottom: -2px;
   right: -2px;
}*/
.expandable_set h6 {
  color: #444;
}

.expandable_set h5 {
  position: relative;
  width: calc(100% - 5px);
  color: #444;
  cursor: pointer;
  border-radius: 4px;
  padding: 3px;
  margin-bottom: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.expandable_set h5:hover {
  color: #fafafa;
  background-color: #888;
}

/*.expandable_set h5:after{
    content:'';
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    border-bottom: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid $scuro_2;
    border-left: 4px solid $scuro_2;
    transition: 0.3s;
}
.expandable_set h5:hover:after{
   border-top-color: $accent_1;
   border-left-color: $accent_1;
   top: -4px;
   left: -4px;
}*/
.pianola {
  margin: 5px 0;
}

#structures, #tunings,
.pianola select,
.pianola .key_selector,
.pianola .structure-selector,
.pianola .deg_selector,
.pianola .shape_selector,
.pianola .select_option,
.pianola .option_selector,
.pianola .string_off_selector,
.option_box, .select_option {
  position: relative;
  cursor: pointer;
  display: inline-block;
  border: 1px solid;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-color: #888;
  border-radius: 3px !important;
  width: 29px;
  margin: 2px;
  line-height: 28px;
  font-size: 14px;
  text-align-last: center;
  text-align: center;
  text-overflow: '';
  height: 30px;
  color: #444;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  /* Standard */
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#structures:hover, #tunings:hover,
.pianola select:hover,
.pianola .key_selector:hover,
.pianola .structure-selector:hover,
.pianola .deg_selector:hover,
.pianola .shape_selector:hover,
.pianola .select_option:hover,
.pianola .option_selector:hover,
.pianola .string_off_selector:hover,
.option_box:hover, .select_option:hover {
  border-color: #AAB4C1;
}

#structures.selected, #tunings.selected,
.pianola select.selected,
.pianola .key_selector.selected,
.pianola .structure-selector.selected,
.pianola .deg_selector.selected,
.pianola .shape_selector.selected,
.pianola .selected.select_option,
.pianola .selected.option_selector,
.pianola .string_off_selector.selected,
.option_box.selected, .select_option.selected {
  border-color: #068C9B !important;
  color: #068C9B !important;
  background-color: #eafafd;
}

#structures.no-arrow, #tunings.no-arrow,
.pianola select.no-arrow,
.pianola .key_selector.no-arrow,
.pianola .structure-selector.no-arrow,
.pianola .deg_selector.no-arrow,
.pianola .shape_selector.no-arrow,
.pianola .no-arrow.select_option,
.pianola .no-arrow.option_selector,
.pianola .string_off_selector.no-arrow,
.option_box.no-arrow, .select_option.no-arrow {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-user-select: none;
  /*Safari*/
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
}

.pianola .string_off_selector {
  margin-bottom: 22px;
}

.pianola .black_keys {
  margin-left: 15px;
}

.black_keys select,
.black_keys .deg_selector {
  background-color: #fff;
}

.white_keys select,
.white_keys .deg_selector {
  background-color: #fafafa;
}

.iterv_spacer {
  display: inline-block;
  width: 30px;
}

.pianola .key_selector {
  background-color: #888 !important;
  border-color: #444 !important;
  color: #fafafa !important;
}

.bass_selector, .bass_string_selector {
  position: absolute;
  bottom: -14px;
  width: 21px;
  height: 12px;
  left: 2px;
  border: 1px solid;
  border-color: #E8EFF2;
  border-top: 0;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.bass_selector:hover, .bass_string_selector:hover {
  background-color: #AAB4C1;
}

.bass_selector.selected, .bass_string_selector.selected {
  background-color: #068C9B;
  border-color: #068C9B;
}

.bass_selector.selected::after, .bass_string_selector.selected::after {
  content: 'BASS';
  display: inline-block;
  width: 100%;
  position: absolute;
  left: -1px;
  top: 1px;
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  font-family: monospace;
  line-height: 11px;
  text-align: center;
}

.black_keys .bass_selector {
  position: absolute;
  top: -14px;
  border: 1px solid;
  border-color: #E8EFF2;
  border-bottom: 0;
  border-radius: 0;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.option_box {
  height: auto;
  width: 100%;
  border: 0;
}

.select_option,
.option_selector {
  width: 80px !important;
  line-height: 16px !important;
  padding: 3px !important;
  height: 40px !important;
}

.pianola .string_off_selector::after,
.pianola .string_off_selector::before {
  content: '';
  position: absolute !important;
  display: inline-block;
  height: 1px;
  width: 32px;
  left: -2px;
  border-radius: 10px;
  top: 13px;
  background-color: #888;
  opacity: 0.7;
  -webkit-transform: rotate(-45deg);
}

.pianola .string_off_selector::before {
  -webkit-transform: rotate(45deg);
}

.pianola .string_off_selector.selected::after,
.pianola .string_off_selector.selected::before {
  display: none !important;
}

#note-text {
  display: inline-block;
  width: 3em;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Verdana', sans-serif;
  color: #E8EFF2;
  border: 2px solid #E8EFF2;
  border-radius: 6px;
  padding: 5px 10px 5px 10px;
  text-align: center;
  background-color: #444;
}

.expandable_set_cont .set_cont_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  gap: 3px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 26px;
  border-radius: 3px;
  width: calc(100% - 6px);
  margin: 3px 0;
}

.expandable_set_cont .set_cont_col {
  font-size: 14px;
  color: #333;
  text-align: left;
  line-height: 26px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.expandable_set_cont .set_cont_col.col_wide {
  -webkit-box-flex: 4;
      -ms-flex-positive: 4;
          flex-grow: 4;
}

.expandable_set_cont .set_cont_col.col_narrow {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.expandable_set_cont .set_cont_col.f_btn {
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #068C9B;
  border: 1px solid #068C9B;
  border-radius: 3px;
  background-color: #fafafa;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.expandable_set_cont .set_cont_col.f_btn:hover {
  background-color: #068C9B;
  color: #fafafa;
}

.expandable_set_cont .set_cont_col.f_btn.enabled {
  background-color: indianred;
  color: #fafafa;
}

.set_cont_col input[type="number"],
.set_cont_col select {
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  height: 26px;
  font-family: 'Verdana', sans-serif;
  /* color: #E8EFF2; */
  border-radius: 4px;
  text-align: center;
  /* background-color: #444; */
  border: 1px solid #068C9B;
  max-height: 26px;
  padding: 0;
  margin: 0;
  color: #068C9B;
  background-color: #fafafa;
  width: 100%;
}

.shape-selector,
.diesis-selector,
.interval-selector {
  display: inline-block;
  vertical-align: top;
  height: 20px;
  width: 20px;
  border: 1px solid transparent;
  border-radius: 50%;
  margin: 1.5px;
  margin-bottom: 4.5px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
  line-height: 20px;
  font-size: 14px;
}

.interval-selector, .diesis-selector {
  background-color: #444;
  color: #E8EFF2;
}

.shape-selector {
  display: inline-block;
  vertical-align: top;
  height: 25px;
  width: 25px;
  margin: 5px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
  line-height: 23px;
  font-size: 14px;
  background-color: #444;
  border-color: #444 !important;
  border: 0;
  -webkit-transform: scale(1.8);
          transform: scale(1.8);
}

.shape-selector.selected-shape {
  color: indianred;
  -webkit-transform: scale(2);
          transform: scale(2);
}

.color-selector {
  display: inline-block;
  position: relative;
  vertical-align: top;
  height: 14px;
  width: 24px;
  margin: 1px;
  cursor: pointer;
  line-height: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 14px;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  border-radius: 2px;
  border: 1px solid #AAB4C1 !important;
}

.color-selector:hover {
  border: 2px solid #555;
  border-radius: 2px;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  z-index: 700;
}

.color-selector.current-color {
  border: 2px solid #888 !important;
  border-radius: 2px;
  -webkit-transform: scale(1.35);
          transform: scale(1.35);
  z-index: 600;
}

#double-selector .second-color {
  display: inline-block;
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  top: 0;
}

#double-selector .first-color {
  display: inline-block;
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
}

.style_selector {
  cursor: pointer;
  display: inline-block;
  font-size: 10px;
  width: 42%;
  height: 20px;
  border: 1px solid #eee;
  margin: 2%;
}

.tabs_container {
  font-size: 14px !important;
  /*border-radius: 5px;*/
  border: 1px solid #a4c7ce;
  margin: -9px;
  margin-top: 5px;
  /*border-radius: 0px;*/
  /*    &.fulltab{
      width: calc(100% + 16px);
      margin: -9px;
      margin-top: 5px;
      border-radius: 0px;
      box-shadow: none;
      padding-top: 15px;
      background: linear-gradient(to bottom, white 0%, #eee 15px, white 200px);
      border-top-color: transparent;
    }*/
}

.tabs_titles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  /*align-items: center;*/
  min-height: 26px;
  border-radius: 5px;
  margin-bottom: -1px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: #ddd;
}

.tab_title {
  border: 1px solid #ccc;
  border-color: #ccc;
  height: 26px;
  line-height: 26px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
  color: #666;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
  background-color: #ddd;
}

.tab_title.selected {
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: transparent;
  color: #068C9B;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  background: white;
}

.tab {
  display: none;
  padding: 10px;
  padding-top: 12px;
  font-size: 0;
  border-top: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background: white;
}

.tab.selected {
  display: block;
}

/*
.expandable_set_cont input[type="range"]{
max-width: 110px;
}*/
.dropdown_card {
  width: calc(100%);
  margin: 10px -5px 0 -5px;
  padding: 10px 5px;
  border-radius: 5px;
}

.dropdown_card.open {
  background-color: #eee;
}

.dropdown_card .dropdown_card_title {
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  color: #068C9B;
  text-align: center;
  display: block;
  -webkit-transition: 0.3s !important;
  transition: 0.3s !important;
}

.dropdown_card .dropdown_card_title:hover {
  color: #AAB4C1;
}

.dropdown_card .dropdown_card_title:before {
  content: '\25B6';
  position: absolute;
  right: 20px;
  font-weight: bold;
  color: #068C9B !important;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  opacity: 0;
}

.dropdown_card.open .dropdown_card_title:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.dropdown_card .dropdown_card_content {
  padding-top: 20px;
  display: none;
}

.dropdown_card:hover .dropdown_card_title:before {
  opacity: 1;
}

.function_switch {
  cursor: pointer;
  display: inline-block;
  margin: 1.5px;
  line-height: 24px;
  background-color: #fafafa;
  border: 1px solid transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #444;
  width: 28px;
  height: 28px;
  text-align: center;
  border-radius: 2px;
  -ms-user-select: none;
      user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  font-size: 16px;
  vertical-align: middle;
}

.function_switch.semi-off {
  background-color: #fafafa;
  color: #AAB4C1;
  border-color: transparent !important;
}

.function_switch.selected-square, .function_switch.active_function_btn {
  background-color: #E8EFF2;
  color: #068C9B;
  opacity: 1;
  border-color: transparent;
}

.function_switch.semi-off.selected-square:not(.layer-selector), .function_switch.semi-off.active_function_btn:not(.layer-selector) {
  background-color: #fafafa;
  color: #AAB4C1;
}

.function_switch.active_function_btn {
  -webkit-animation: colorPulse 0.6s infinite;
          animation: colorPulse 0.6s infinite;
  border: 1px dashed #068C9B;
}

.function_switch.display_field {
  width: 63px;
  cursor: default;
  border-color: transparent !important;
  background-color: #E8EFF2 !important;
}

.function_switch.input_field {
  position: relative;
  top: -2px;
  width: 59px;
  cursor: text;
  border-color: transparent !important;
  background-color: #E8EFF2 !important;
}

.function_switch.icon_button {
  border-color: transparent !important;
  background-color: transparent !important;
}

.function_switch.icon_button:hover {
  color: #48AAAF;
}

.function_switch.layer-selector.selected-square, .function_switch.layer-selector.active_function_btn {
  background-color: #068C9B;
  color: #fafafa;
}

.function_switch:hover {
  background-color: #ddd;
}

.function_switch:active {
  background-color: #444;
  color: #fafafa;
}

.vertical-icons {
  display: inline-block;
  height: 100%;
  width: 70px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.vertical-icons .function_switch {
  position: relative;
  padding: 0;
  width: 70px !important;
  height: 60px !important;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  margin: 0px;
  margin-top: 5px;
  padding-top: 5px;
  background-color: transparent;
  border-color: transparent;
  border-left: 0 !important;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.vertical-icons .function_switch i {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.vertical-icons .jcon span {
  display: inline-block;
  font-size: 10px;
  line-height: 10px;
  font-weight: 600;
  position: absolute;
  bottom: -12px;
  left: -17px;
  width: 68px;
  padding: 1px;
  border-radius: 2px;
}

/*
.expandable_set.function_switch{
    position: relative;
    padding: 0;
    width: $jconw*1px !important;
    height: $jconw*1px !important;
    box-sizing: border-box !important;

    i{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    &.selected{
               background-color: $accent_shadow;
    }
}*/
.vertical-icons .function_switch:hover {
  border: 1px dashed #bacbcf;
  border-right: 1px dashed #bacbcf;
  width: 70px !important;
  content-size: border-box !important;
  background-color: #e9eff2;
  z-index: 2;
}

.vertical-icons .function_switch.selected {
  border: 1px solid #bacbcf;
  /*padding-left: 7px;
                      padding-right: 5px;
                      margin-left: 0px;*/
  border-left: 0;
  border-right: 1px solid #e9eff2;
  width: 70px !important;
  content-size: border-box !important;
  background-color: #e9eff2;
  z-index: 2;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vertical-icons .function_switch.selected span {
  /* COLORE TESTO ETICHETTA */
  color: #068C9B !important;
}

.exp_sets_arrows {
  display: block;
  height: 20px;
  width: 100%;
  background-color: #b7bcbc;
  position: absolute;
  bottom: 0;
  z-index: 100;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.exp_sets_arrows div {
  display: inline-block;
  width: 50%;
  height: 100%;
  background-color: #e7eff2;
  color: #3b3b3b;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 15px;
  text-align: center;
  line-height: 20px;
}

.exp_sets_arrows div:hover {
  color: #068C9B;
  cursor: pointer;
}

#mobile_sidebar {
  background-color: #444;
  position: fixed;
  left: 0;
  top: 0;
  width: 70px;
  height: 100vh;
  font-size: 0;
}

#mobile_sidebar.portrait {
  width: 100vw;
  height: 70px;
}

.mobile_icon {
  display: block;
  width: 100%;
  height: calc(100% / 6);
  background-color: #257887;
  border: 1px solid #98bec6;
  border-right-width: 2px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-left: 0;
  line-height: 16vh;
  font-size: 12px;
  color: white;
}

.mobile_icon.selected {
  background-color: #068C9B;
}

.mobile_icon.portrait {
  width: calc(100% / 6);
  height: 100%;
  display: inline-block;
  line-height: 70px;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  white-space: nowrap;
  vertical-align: top;
}

#mobile_panels {
  background-color: #444;
  position: fixed;
  left: 70px;
  top: 0;
  width: 400px;
  height: 100vh;
  z-index: 900;
  overflow-y: scroll;
  display: none;
}

#mobile_panels.portrait {
  width: 100vw;
  height: 400px;
  left: 0;
  top: 70px;
}

.mob_pan {
  padding: 10px;
  position: relative;
  display: none;
}

.mob_pan_btn {
  padding: 15px;
  font-size: 14px;
  margin-bottom: 5px;
  display: inline-block;
  color: #444;
  width: calc(100% - 30px);
  font-weight: bold;
  border-radius: 5px;
  background-color: #bed5d7;
}

.mob_pan_btn.disabled {
  background-color: #888;
}

.mob_layer_show,
.mob_layer_sel {
  display: inline-block;
  background-color: #729099;
  width: 11%;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
}

.mob_layer_show.selected,
.mob_layer_sel.selected {
  background-color: #fbfeff;
}

.mob_pan .color-selector,
.mob_pan .shape-selector {
  width: calc(25% - 10px);
  margin: 0;
  height: 13vh;
  margin-top: 2vh;
  -webkit-transition: 0s !important;
  transition: 0s !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
}

.mob_pan .color-selector:active,
.mob_pan .shape-selector:active {
  background-color: transparent !important;
}

.mob_pan .shape-selector.selected-shape {
  background-color: transparent !important;
  color: white;
  -webkit-transition: 0s !important;
  transition: 0s !important;
}

.mob_pan .color-selector.current-color {
  border: 2px solid #fff !important;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: 0s !important;
  transition: 0s !important;
}

html {
  overflow: hidden;
  background-color: #b7bcbc;
}

.generator-main-content {
  position: relative;
  margin-left: 352px;
  height: 100vh;
}

.sidebar-container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 352px;
  overflow-y: hidden;
  overflow-x: hidden;
  height: 100vh;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1000;
  /*background-color: aqua;*/
}

#active_tool {
  display: inline-block;
  width: 120px;
  height: 50px;
  background-color: #068C9B;
  position: fixed;
  top: 38px;
  left: 360px;
  z-index: 9999;
  font-size: 13px;
  color: #fff;
  padding: 8px;
  border-radius: 5px;
  -webkit-animation: flashbox 2s linear infinite;
          animation: flashbox 2s linear infinite;
}

#active_tool #disable_tool {
  display: block;
  width: 125px;
  height: 18px;
  font-size: 13px;
  line-height: 19px;
  color: #068C9B;
  background-color: #fff;
  position: absolute;
  bottom: 5px;
  left: 5px;
  border-radius: 3px;
  cursor: pointer;
}

#active_tool #disable_tool:hover {
  background-color: #48AAAF;
  color: #fff;
}

#document_container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  text-align: left;
}

#document_padder {
  display: inline-block;
  text-align: left;
  margin: 50px;
}

#user_document {
  position: relative;
  display: inline-block;
  padding: 30px;
  padding-bottom: 100px;
  border: 1px solid #eaeaea;
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 6px 3px 26px -2px rgba(0, 0, 0, 0.55);
          box-shadow: 6px 3px 26px -2px rgba(0, 0, 0, 0.55);
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  text-align: center;
}

/* TITOLI EDITABILI */
.edit-title {
  width: 100%;
  height: 45px;
  background-color: transparent;
  border: transparent;
  text-align: left;
  color: #444;
  font-family: monospace;
  font-weight: 400;
  letter-spacing: normal;
  font-size: 36px !important;
  line-height: 36px !important;
  margin-left: 0px !important;
  overflow: hidden;
  resize: none;
  font-weight: 600;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0px;
  margin-bottom: 25px;
  outline: none !important;
  white-space: pre-line;
}

.edit-title[placeholder]:empty::before {
  content: attr(placeholder);
  color: #888;
}

.edit-title[placeholder]:empty:focus::before {
  content: "";
}

.fretboard_title {
  display: block;
  width: calc(100% - 30px);
  height: 35px;
  padding: 7.5px;
  font-size: 20px;
  line-height: 20px;
  background-color: transparent;
  border: none;
  /*border-bottom: 2px solid #ccc;*/
  text-align: left;
  color: #444;
  font-family: 'Verdana', sans-serif;
  margin: 15px;
  overflow: hidden;
  resize: none;
  font-weight: 600;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none !important;
  white-space: pre-line;
}

.fretboard_description {
  width: calc(100% - 30px);
  margin: 15px;
  margin-top: 0;
}

.fretboard_description:empty:before,
.fretboard_title:empty:before {
  content: attr(placeholder);
  color: #888;
  display: block;
  position: absolute;
}

.fretboard_description:empty,
.fretboard_title:empty {
  display: none;
}

.selected_li .fretboard_description:empty,
.selected_li .fretboard_title:empty {
  display: block;
  font-size: 14px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.fretboard_description:empty:focus,
.fretboard_title:empty:focus {
  display: block !important;
}

#savepaneltitle,
textarea#diagram_description {
  width: 100% !important;
  font-size: 14px;
  margin-top: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 10px;
  color: #055d67;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#savepaneltitle {
  font-size: 20px;
  font-weight: bold;
  white-space: pre-line;
}

#savepaneltitle.empty {
  border: 2px solid indianred;
  margin-top: 9px;
  margin-bottom: -1px;
  background-color: #ffecec;
}

/* POPUP CONFERMA */
#popconf {
  background-color: #eee;
  position: relative;
  padding: 30px;
  max-width: 500px;
  margin: auto;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.5);
}

#popconf button {
  width: 45%;
  display: inline-block;
}

#popconf h2 {
  font-size: 25px;
  color: #444;
  margin-bottom: 20px;
}

#popconf p {
  font-size: 16px;
  color: #444;
  margin-bottom: 20px;
  line-height: 24px;
}

/* FLASH */
#flash {
  background-color: #068C9B;
  color: #fafafa;
  border-radius: 5px;
  width: 70vw;
  /*min-width: 800px;*/
  /*border: 2px solid yellow;*/
  position: fixed;
  bottom: 20px;
  right: 15vw;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  padding: 20px;
  -ms-flex-line-pack: middle;
      align-content: middle;
  z-index: 999999999;
  -webkit-animation: flashbox 1s linear infinite;
          animation: flashbox 1s linear infinite;
}

@-webkit-keyframes flashbox {
  0% {
    background-color: #068C9B;
  }
  10% {
    background-color: #15747f;
  }
  20% {
    background-color: #068C9B;
  }
}

@keyframes flashbox {
  0% {
    background-color: #068C9B;
  }
  10% {
    background-color: #15747f;
  }
  20% {
    background-color: #068C9B;
  }
}

#blacker {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 600;
  display: none;
}

#dynamic_tooltip {
  pointer-events: none;
  position: fixed;
  background-color: #fffbc7;
  z-index: 999999999999;
  display: inline;
  text-align: left;
  padding: 6px;
  border-radius: 15px;
  border: 1px solid #888;
  max-width: 350px;
  display: none;
}

#dynamic_tooltip h3 {
  color: #333;
  /*margin-bottom: 5px;*/
  display: inline-block;
  text-transform: lowercase;
  font-size: 13px;
  font-weight: 400;
}

#dynamic_tooltip h3:first-line {
  text-transform: capitalize;
  /*capitalize all caps*/
}

#dynamic_tooltip p {
  color: #666;
  display: none;
}

.exporting {
  -background-color: white;
  padding: 30px !important;
  padding-top: 50px !important;
  padding-bottom: 150px !important;
}

.exporting #brando {
  display: block !important;
}

.exporting .frbselector, .exporting .frbmove, .exporting .rubber, .exporting .frbcopy {
  display: hidden !important;
  height: 0px !important;
  overflow: hidden !important;
}

.exporting .fb-cont {
  margin-top: 20px !important;
}

.linefix {
  display: none;
}

.exporting .linefix {
  position: relative;
  display: block !important;
  width: calc(100% - 8px);
  margin-left: 10px;
  margin-top: -3px;
  background-color: #bbb;
  height: 1px;
  z-index: 999;
}

.exporting .titlespace input {
  border: 0px !important;
  background-color: transparent !important;
}

line {
  cursor: pointer !important;
}

.unclickable_lines line {
  pointer-events: none !important;
}

.temporary_line,
.temporary_marker {
  display: inline-block;
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 100;
  -webkit-transform-origin: 0 2.5px;
          transform-origin: 0 2.5px;
  pointer-events: none !important;
  opacity: 0.3;
}

.temporary_rect {
  pointer-events: none !important;
  z-index: 500;
}

.rectangle {
  display: inline-block;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.clickable_rect .rectangle {
  pointer-events: all !important;
  cursor: pointer !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 100;
}

.clickable_rect .rectangle:hover {
  border: 3px dashed black;
  opacity: 0.5;
}

#snappy {
  display: inline-block;
  position: absolute;
  z-index: 999999999;
  width: 8px;
  height: 8px;
  pointer-events: none !important;
  opacity: 1;
}

#snappy:before {
  content: '+';
  display: inline-block;
  position: absolute;
  top: -6px;
  left: -5px;
  z-index: 999999999;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 18px;
  color: indianred;
  pointer-events: none !important;
  opacity: 1;
}

.backdrop {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #00000040;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 99999998;
  overflow: auto;
  display: none;
}

.progress-bar {
  position: relative;
  margin-top: 5px;
  color: #eee;
  display: block;
  padding: 2px;
  border-radius: 2px;
  width: calc(100% - 10px);
  background-color: #666;
  border: 1px solid #068C9B;
}

.progress-bar .bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 1%;
  background-color: #48AAAF;
  display: block;
  height: 100%;
  z-index: 500;
  border-radius: 2px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.progress-bar .text {
  position: relative;
  z-index: 1000;
  font-size: 12px;
}

#phpsavepanel {
  margin: auto;
  width: 60%;
  min-width: auto;
  padding: 10px;
  background-color: #ffffff;
  z-index: 99999999;
  border: 1px solid #ccc;
  text-align: left;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 30px 10px #00000070;
          box-shadow: 0 0 30px 10px #00000070;
  max-width: 1000px;
}

#phpsavepanel.not_logged_in {
  max-width: 800px !important;
}

.tags_for_save {
  color: #484848;
}

.tags_for_save .tagsection > p:not(:nth-of-type(1)),
.tags_for_save > p {
  margin-top: 20px;
}

.tags_for_save .tagsection > p,
.tags_for_save > p {
  margin-bottom: 3px;
  font-weight: bold;
  background-color: #eee;
  padding: 5px;
}

span.tagsection.empty {
  border: 2px solid indianred !important;
  display: block;
  border-radius: 5px;
  overflow: hidden;
  background-color: #ffecec;
}

span.tagsection.empty::before {
  content: "Select at least one tag in order to save";
  display: block;
  background-color: indianred;
  color: white;
  padding: 3px;
}

.no_login_warning a.no_login_btn_h,
.wide_prompt_button,
#phpsavepanel button {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
  background-color: #068C9B;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.no_login_warning a.no_login_btn_h:hover,
.wide_prompt_button:hover,
#phpsavepanel button:hover {
  background-color: #48AAAF;
}

.no_login_warning a.no_login_btn_h {
  width: calc(50% - 3px) !important;
  display: inline-block;
  padding: 12px !important;
  text-decoration: none;
}

.no_login_warning button.proceed_no_login.ddd {
  background-color: #eee !important;
  color: #555  !important;
  pointer-events: none  !important;
}

.no_login_warning h2 {
  font-size: 30px;
  text-align: center;
  color: #068C9B;
  margin-bottom: 20px;
  font-weight: 900;
}

.no_login_warning p {
  font-size: 16px;
  line-height: 16px;
  margin-bottom: 5px;
}

.no_login_warning p strong {
  font-weight: 900;
}

.no_login_warning p.alert_box {
  padding: 10px;
  background-color: #c1dfe3;
  color: #444;
  border-radius: 5px;
  margin: 10px 0;
}

.no_login_warning p a {
  color: #068C9B;
  font-weight: 900;
  text-decoration: none;
}

.no_login_warning p a:hover {
  color: #48AAAF;
}

#social_bar {
  position: fixed;
  top: 3px;
  right: 20px;
  width: 420px;
  z-index: 3000;
  text-align: left;
  background-color: #f8fbff;
  border: 1px solid #598c92;
  border-radius: 5px;
  padding-top: 3px;
}

#like_karma {
  height: 27px;
  padding-bottom: 3px;
}

#like_karma > div {
  vertical-align: top;
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 27px;
}

#like_karma .picks-cont {
  width: 140px;
  position: relative;
}

#like_karma .picks-cont .donate-picks,
#like_karma .picks-cont #picks-amount {
  cursor: pointer !important;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: 70px;
  max-width: 70px;
  padding: 0 5px;
  border: 0;
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 12px;
}

#like_karma .picks-cont .donate-picks {
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
  border-right: 0;
}

#like_karma .picks-cont .donate-picks:hover {
  background-color: #ddd;
}

#like_karma .picks-cont #picks-amount {
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
  border-left: 0;
  left: 70px;
}

#like_karma .likes-cont {
  width: 60px;
}

#like_karma .views-cont {
  width: 75px;
  padding-left: 5px;
  font-size: 12px;
  line-height: 14.5px;
  color: #555;
}

#like_karma .comms-cont {
  width: 140px;
  text-align: center;
}

#like_karma .comms-cont a {
  color: #068C9B;
  text-decoration: none;
  line-height: 27px;
  text-align: center;
  font-size: 13px;
}

#like_karma .comms-cont a:hover {
  color: #48AAAF;
}

.updated_count {
  color: indianred !important;
}

.comment {
  margin: 0 15px;
  margin-bottom: 20px;
  width: 380px;
  word-break: break-word;
  color: #555;
}

.comment.newcomment {
  background-color: yellow;
  padding: 15px;
  margin: 0px;
}

.comment .user a {
  color: #068C9B;
  font-weight: 500;
  text-decoration: none !important;
}

.comment .user a:hover {
  color: #48AAAF;
}

.comment .author a::before {
  content: '\25B6   ';
}

.comment .comment-time, .comment .comment-controls {
  font-size: 12px;
  line-height: 12px;
  color: #aaa;
  display: inline-block;
}

.comment .comment-time a, .comment .comment-controls a {
  color: #aaa;
  text-decoration: none !important;
}

.comment .comment-time a:hover, .comment .comment-controls a:hover {
  color: #48AAAF;
}

.comment .comment-body {
  margin-top: 5px;
  margin-bottom: 5px;
}

#refresh_comments {
  font-size: 12px;
  line-height: 12px;
  color: #aaa;
  text-decoration: none;
}

#comments_section {
  display: none;
  height: calc(100vh - 42px);
  position: relative;
  border-left: 1px solid #48AAAF;
  overflow-x: hidden;
  overflow-y: auto;
}

#comments_list {
  height: 100%;
  padding: 20px 0;
}

#new_comment {
  height: 130px;
  border: 1px solid #48AAAF;
  border-left: 0;
}

#new_comment textarea {
  height: 100px;
  width: 100%;
  background-color: transparent;
  border: 0;
  outline: none;
  resize: none;
  overflow: auto;
  font-size: 15px;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#new_comment button {
  width: 100%;
  border: 0;
  border-radius: 0;
  height: 30px;
  background-color: #48AAAF;
  color: #fff;
  cursor: pointer;
}

#new_comment button:hover {
  background-color: #068C9B;
}

#picks-donated {
  display: none;
  z-index: 3000;
  position: absolute;
  top: 30px;
  left: -60px;
  width: 335px;
  font-size: 12px;
  color: #555;
  background-color: #ddd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #068C9B;
  padding: 10px;
}

#picks-donated b {
  font-size: 18px;
  font-weight: bold;
  display: block;
  width: 100%;
}

.synthplay, .synthplay:after, .synthplay:before {
  display: inline-block;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  opacity: 0.2;
  background-color: #068C9B;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation: synth 2s infinite ease-in-out;
          animation: synth 2s infinite ease-in-out;
}

.synthplay:after {
  content: '';
  opacity: 1;
  background-color: #48AAAF;
  -webkit-animation: synth 1.25s infinite ease-in-out;
          animation: synth 1.25s infinite ease-in-out;
}

.synthplay:before {
  content: '';
  opacity: 1;
  background-color: #E8EFF2;
  -webkit-animation: synth 1.5s infinite ease-in-out;
          animation: synth 1.5s infinite ease-in-out;
}

@-webkit-keyframes synth {
  0% {
    left: 5%;
    width: 90%;
  }
  50% {
    left: 15%;
    width: 70%;
  }
  100% {
    left: 5%;
    width: 90%;
  }
}

@keyframes synth {
  0% {
    left: 5%;
    width: 90%;
  }
  50% {
    left: 15%;
    width: 70%;
  }
  100% {
    left: 5%;
    width: 90%;
  }
}

#chord_display {
  position: relative;
  display: block;
  position: fixed;
  height: calc(100vh - 110px);
  width: 480px;
  max-width: 0px;
  right: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px;
  min-height: 20px;
  background-color: #E8EFF2;
  line-height: 12px;
  border-left: 1px solid #AAB4C1;
  display: none;
  -webkit-box-shadow: 0 0 15px 0px #aaa;
          box-shadow: 0 0 15px 0px #aaa;
  border-bottom-left-radius: 5px;
  display: none;
}

#chord_display .close_chord {
  position: absolute !important;
  display: inline-block;
  top: 8px;
  left: 8px;
  font-size: 22px;
  color: #888;
  z-index: 999999;
  cursor: pointer;
}

#chord_display i {
  display: inline-block;
  width: 24px;
  height: 14px;
  border-right: 1px solid #888;
  position: relative;
}

#chord_display i.selected {
  color: white;
  z-index: 15000;
}

#chord_display i::before {
  content: '';
  display: inline-block;
  position: absolute;
  height: 2px;
  width: 100%;
  top: 6px;
  left: 0px;
  background-color: #ccc !important;
  z-index: 5000;
}

#chord_display i.root::after,
#chord_display i.lowest::after,
#chord_display i.selected::after {
  content: '';
  display: inline-block;
  position: absolute;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  top: 1px;
  left: 6px;
  background-color: #068C9B;
  z-index: 10000;
}

#chord_display i.lowest::after {
  content: '';
  font-size: 10px;
  line-height: 10px;
  color: white;
  background-color: #068C9B;
}

#chord_display i.root::after {
  content: 'R';
  font-size: 11px;
  line-height: 12px;
  color: #eafafd;
  background-color: #068C9B;
}

#chord_display .prev_fb {
  position: relative;
  border: 1px solid #ddd;
  display: inline-block;
  background-color: #fafafa;
  -ms-user-select: none;
      user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  cursor: pointer;
  -webkit-transition: 0.2;
  transition: 0.2;
  word-wrap: nowrap !important;
  min-width: 413px;
}

#chord_display .prev_fb div i:first-child {
  background-color: #403f3f !important;
  width: 12px;
}

#chord_display .prev_fb div i:first-child::after {
  left: 0px;
}

#chord_display .prev_fb div i:first-child::before {
  display: none;
}

#chord_display .prev_fb:hover {
  background-color: #eafafd;
}

#chord_display .prev_fb_fr_n {
  margin-top: 2px;
  margin-bottom: 18px;
  min-width: 413px;
}

#chord_display .prev_fb_fr_n span {
  display: inline-block;
  width: 25px;
  height: 14px;
  font-size: 12px;
  color: #777;
  text-align: center;
}

#chord_display .prev_fb_fr_n span:first-child {
  width: 14px;
  margin-left: -6px;
  color: transparent;
  position: relative;
}

#chord_display .prev_fb_fr_n span:first-child:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: 1px;
  left: 0px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACb0lEQVR4Xm1TzUuiYRB//MJqCWFz6yJJ7GEP0VHwsnjIk4eQbkt/wR72sP/AYqfQgx6FYhHssIuHUAONSC36IFM8iKL5+QF68NVVSy0om52RfV4Ud+DHO898/GaYeYcBgIh4PL56c3OzGw6Hr4LBoODz+UbHx8fCycnJVSgU2j0/P1/lsRyiEo1GdyKRSDwWi0GxWIRWqwX9fh+azSZks1m4uLiAQCBQRpKvMwS3t7c76CjkcjkYDofjxMfHR+h2u9DpdEQkEgnAjvrX19d7nECOFVcHg8F3jUbzEcFeX1/Hjre3NwLp4vef/129Xv+WTqeT6+vrvySXl5e7CoXix8bGBhuNRjOJHNwmk8kYFmWLi4v3a2trn6XPz8+bS0tLFEAEIgnZcHj0FkHdvby8sJWVFYYz+oS2LYnf7xf0er0au5iqRkEk29vbzOFwiHYSIsKtMKPR+Js6eK9UKnkVEVyOjo6YVqud6mJhYYE9PDwQoU4qkUj+4BDp8V8Cs9nM8vk82cQ5UPLc3BzZtFK5XH7fbrfJMUOwv7/PbDYbTxbtgiAwlUpF7yoRhBqNBtmnuqCqBoOBz0QkoS3UajWmVqvpHZOi/Oz1epVSqcRQnySZ0WnQhUKBPT09seXlZbKfSU0mU21+ft5WrVYHRIIdjYlQpnZPgyZ/pVJhuH+K86HfL97C6enp3uHhYd/j8QD+XJBKpaBcLkMymQRcGbhcLnA6nYBxgEcXxZvZnDwmfhNf8GCybrcb7HY7WCwWsFqtcHBwAF6vF/BSARO9d3d3mzxHQsqkZDKZD9jaFsKIPh3qWkQV9RjiDOHX6XQCj/8Lq7xsVet785EAAAAASUVORK5CYII=);
  cursor: pointer;
}

#chord_display .prev_fb span {
  display: inline-block;
  background-color: #AAB4C1;
  opacity: 0.3;
  border-radius: 50%;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 37px;
  left: 70px;
}

#chord_display .prev_fb span:nth-of-type(2) {
  left: 120px;
}

#chord_display .prev_fb span:nth-of-type(3) {
  left: 170px;
}

#chord_display .prev_fb span:nth-of-type(4) {
  left: 220px;
}

#chord_display .prev_fb span:nth-of-type(5) {
  left: 295px;
  top: 22px;
}

#chord_display .prev_fb span:nth-of-type(6) {
  left: 295px;
  top: 51px;
}

#chord_display .prev_fb span:nth-of-type(7) {
  left: 370px;
}

#chord_display h2 {
  margin: 15px;
  font-size: 20px;
  text-align: left;
  color: #444;
  min-width: 413px;
}

#chord_display p {
  margin: 15px;
  font-size: 14px;
  line-height: 16px;
  color: #888;
  text-align: left;
  min-width: 413px;
}

.transcription {
  display: none;
  width: calc(100% - 20px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  z-index: 500;
  text-align: left;
  padding: 10px;
  background-color: white;
  border: 1px solid #ccc;
  margin: 10px;
}

.w_0_06::after {
  content: '16';
}

.w_0_13::after {
  content: '8';
}

.w_0_25::after {
  content: '4';
}

.w_0_50::after {
  content: '2';
}

.w_1_00::after {
  content: '1';
}

.w_0_04::after {
  content: '16T';
}

.w_0_08::after {
  content: '8T';
}

.w_0_17::after {
  content: '4T';
}

.w_0_33::after {
  content: '2T';
}

.w_0_06::after, .w_0_13::after, .w_0_25::after, .w_0_50::after,
.w_1_00::after, .w_0_04::after, .w_0_08::after, .w_0_17::after,
.w_0_33::after {
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 30px;
  bottom: -30px;
  font-size: 7px;
  left: 5px;
  color: #777;
}

.w_note {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: calc(100% - 4px) !important;
  min-width: 15px;
  height: 14px;
  display: inline-block;
  position: relative;
  top: -7.5px;
  padding-top: 7px;
  left: 2px;
  background-color: #f7f7f7;
  border: 1px solid;
  border-color: #cfcfcf !important;
  z-index: 3;
  border-radius: 6px;
  padding-left: 3px !important;
}

.w_note:before {
  content: '';
  position: absolute;
  display: inline-block;
  background-color: #cccccc;
  width: 3px;
  height: 1px;
  top: 6.5px;
  left: -3px;
}

.w_note:after {
  content: '';
  position: absolute;
  display: inline-block;
  background-color: #cccccc;
  width: 3px;
  height: 1px;
  top: 6.5px;
  right: -3px;
}

.tabnote {
  padding-top: 8px;
  position: relative;
  display: inline-block;
  width: 25px;
  height: 90px;
  margin: 0px;
  margin-bottom: 30px;
  vertical-align: top;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.tabnote_divider {
  display: inline-block;
  margin-bottom: 16px;
}

.tabnote_divider .tabnote:first-child {
  border-left: 1px solid #ccc;
}

.tabnote_divider .tabnote:last-child {
  border-right: 1px solid #ccc;
}

.tabnote span {
  text-align: left;
  padding-left: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  display: inline-block;
  width: 100%;
  height: 16px;
  margin: 0px;
  font-family: verdana;
  font-size: 12px;
  line-height: 0px;
  color: #444;
}

/* l'help slider si prende un passaggio in questo css visto che è uguale per ora */
#help_slider .content {
  max-height: 80vh;
  overflow-y: auto;
  display: block;
  background-color: white;
  font-size: 1.2em;
  text-align: left;
  padding: 20px;
}

#help_slider .content p, #help_slider .content a {
  font-size: 0.9em;
  padding: 10px 0;
  line-height: 1.4em;
  color: #3d3d3d;
  text-decoration: none;
}

#help_slider .content a:hover {
  color: #aa433e;
}

#help_slider .content h3 {
  font-size: 1.6em;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700;
  color: #068C9B;
}

#help_slider .content .btlk {
  font-size: 1em;
  display: block;
  width: 100%;
  color: #666;
  font-weight: 100;
  text-decoration: none;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 6px 0;
}

#help_slider .content .btlk:hover {
  color: #aa433e;
  font-weight: 500;
  background-color: #eee;
}

.help_dropdown {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 6px 0;
}

.help_dropdown > a {
  border: none !important;
  margin: 0 !important;
}

.help_dropdown .help_drops {
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #ebf0ef;
  display: none;
}

.help_dropdown .help_drops b {
  font-weight: bold;
}

.help_dropdown .help_drops.help_video {
  background-color: #c9d4d2;
  position: relative;
  text-align: center;
  font-weight: bold;
}

.help_dropdown .help_drops.help_video iframe {
  height: 360px;
  width: 600px;
  display: block;
  margin: auto;
}

/**********/
#help_slider,
#anteprima_download {
  max-height: 90vh;
  position: fixed;
  padding: 10px;
  overflow-y: auto;
  top: 0;
  background: #c7d4d2;
  display: block;
  left: 20vw;
  z-index: 99999999;
  width: 60vw;
  border: 2px solid #666;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  -webkit-box-shadow: 0 0 0 3000px #000000AA;
          box-shadow: 0 0 0 3000px #000000AA;
  display: none;
}

#help_slider canvas,
#anteprima_download canvas {
  width: 100% !important;
  height: auto !important;
}

#help_slider > a,
#anteprima_download > a {
  display: inline-block;
  width: calc(20vw - 5px);
  padding: 10px 0;
  margin-top: 10px;
  border-color: #929998;
  background-color: #f2f6f5;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: #888;
  text-decoration: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#help_slider > a:hover,
#anteprima_download > a:hover {
  color: #333;
  background-color: #ffffff;
}

.fs_loading {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: relative;
}

.fs_loading:after {
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: red;
  top: 0;
  left: 0;
  -webkit-animation: loading_image 0.5s infinite linear;
          animation: loading_image 0.5s infinite linear;
}

@-webkit-keyframes loading_image {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    left: calc(100% - 6px);
  }
  50% {
    top: calc(100% - 6px);
    left: calc(100% - 6px);
  }
  75% {
    top: calc(100% - 6px);
    left: 0;
  }
}

@keyframes loading_image {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    left: calc(100% - 6px);
  }
  50% {
    top: calc(100% - 6px);
    left: calc(100% - 6px);
  }
  75% {
    top: calc(100% - 6px);
    left: 0;
  }
}

span.addlabel {
  position: absolute;
  right: 10%;
  background: #d1d1d1;
  height: 10px;
  width: 10px;
  display: inline-block;
  line-height: 10px;
  padding: 1px;
  margin: 0;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  z-index: 5000;
}

span.addlabel:hover:before,
span.addlabel:before {
  content: '+';
}

span.addlabel:hover {
  background: #999;
  color: white;
}

.fret_number {
  position: relative;
}

.fret_number:hover .addlabel {
  opacity: 1;
}

p.fretlabel {
  position: absolute;
  left: 0;
  top: calc(100% - 30px);
  height: 30px;
  overflow: hidden;
  padding: 0 5px;
  font-size: 17px;
  line-height: 30px;
  z-index: 20;
  font-weight: 600;
  resize: none;
  width: 100%;
  background-color: transparent !important;
  text-align: center;
  resize: none;
  border: none;
  color: inherit;
  pointer-events: auto;
  outline: none !important;
}

/* .haslabel {  padding-bottom: 30px; margin-bottom: 8px}

    .haslabel.secondrow { padding-bottom: 63px; }

    .haslabel.secondrow.thirdrow { padding-bottom: 96px; }*/
/*.haslabel .addlabel{ display: none !important; }*/
/*--------*/
.labels-container {
  display: block;
  display: none;
  text-align: left;
  /*width: inherit !important;*/
  /*background-color: yellow;*/
  height: 40px;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: auto;
}

.labels-container:hover {
  -webkit-box-shadow: 0 0 5px 0px #999;
          box-shadow: 0 0 5px 0px #999;
  background-color: #fffaef;
  border-radius: 5px;
}

.labels-container .fc-res-handle {
  display: none;
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  left: calc(50% - 5px);
  cursor: ns-resize;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #bbb;
  z-index: 5000;
}

.labels-container .fc-res-handle:hover {
  border-top: 8px solid #555;
}

.labels-container:hover .fc-res-handle {
  display: block;
}

.fretlabelcontainer {
  display: inline-block;
  width: 200px;
  height: 30px;
  position: absolute !important;
  z-index: 1;
  min-height: 30px !important;
  border-radius: 4px;
  border: 4px solid #ddd;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: transparent !important;
  pointer-events: none;
}

.fretlabelcontainer .ui-resizable-handle {
  pointer-events: auto;
}

.fretlabelcontainer:hover .fretlabelcontrols {
  width: 70px;
  z-index: 2000;
}

.fretlabelcontrols {
  pointer-events: auto;
  width: 0px;
  height: 16px;
  display: inline-block;
  position: absolute;
  background-color: transparent;
  bottom: -8px;
  left: 6px;
  -webkit-transition: 0.1s;
  -webkit-transition: 0.05s;
  transition: 0.05s;
  overflow: hidden;
  text-align: left;
}

.fretlabelcontrols:hover {
  z-index: 50;
}

.fretlabelcontrols div {
  height: 16px;
  width: 16px;
  background-color: #999;
  display: inline-block;
  /* border: 1px solid #ccc; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  /* margin: 0; */
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: top;
}

.fl-move {
  background-color: indianred !important;
  cursor: move !important;
}

.fretlabelcontrols div:hover {
  background-color: #666;
  opacity: 1;
}

.selecting-color:before {
  content: 'Pick a color from the palette';
  position: absolute;
  padding: 0 10px;
  height: 20px;
  width: 180px;
  line-height: 20px;
  font-size: 13px;
  color: #fff;
  background-color: #218995;
  /* border: 1px solid #ccc; */
  /* border-radius: 4px; */
  left: 6px;
  top: calc(100% - 26px);
  z-index: 50;
  -webkit-animation: pulseopacity 0.3s infinite;
  animation: pulseopacity 0.3s infinite;
}

#fretboard-cont {
  position: relative;
  text-align: center;
  background-color: blue;
}

#sortable {
  display: grid;
  grid-template-columns: repeat(6, auto);
  width: auto;
}

#sortable li {
  margin: 6px;
  grid-column: span 6;
  position: relative;
  border: 1px solid #f0f0f0;
  background-color: #fafafa;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#sortable .selected_li {
  border: 1px solid #98b9bc;
  background-color: #f9fcfc;
  -webkit-box-shadow: 0 0 20px 0 #00000066;
          box-shadow: 0 0 20px 0 #00000066;
}

.draggable_text_box {
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: move;
  position: relative;
}

.parsed_markdown,
.text_box {
  width: 100%;
  min-width: 250px;
  border: 0;
  resize: none;
  outline: none;
  background-color: transparent;
  text-align: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-wrap: break-word;
  overflow: hidden;
  font-size: 15px;
  color: #444;
  white-space: pre-line;
  cursor: text;
  line-height: 17px;
  padding: 10px;
  /*div{display: inline}*/
}

textarea.text_box {
  font-family: sans-serif;
}

/*.text_box {  
background-color: pink; 
display: none;
    &.editingTextBox{ 
        background-color: yellow !important; 
    }
}*/
#user_document .parsed_markdown {
  padding: 10px;
  text-align: left !important;
  cursor: pointer !important;
}

#user_document .parsed_markdown h1 {
  font-size: 1.8em;
  line-height: 1.3em;
}

#user_document .parsed_markdown h2 {
  font-size: 1.4em;
  color: #555;
  line-height: 1.2em;
}

#user_document .parsed_markdown h3 {
  font-size: 1.1em;
  color: indianred;
}

#user_document .parsed_markdown h4 {
  font-size: 1.1em;
  color: #068C9B;
}

#user_document .parsed_markdown h5 {
  font-size: 1.2em;
  color: #555;
}

#user_document .parsed_markdown h6 {
  font-size: 1.2em;
  color: #888;
}

#user_document .parsed_markdown h1, #user_document .parsed_markdown h2, #user_document .parsed_markdown h3, #user_document .parsed_markdown h4, #user_document .parsed_markdown h5, #user_document .parsed_markdown h6 {
  margin: 8px 0;
  display: inline-block;
}

#user_document .parsed_markdown h1, #user_document .parsed_markdown h2, #user_document .parsed_markdown h3, #user_document .parsed_markdown h4, #user_document .parsed_markdown b {
  font-weight: bold;
  cursor: pointer !important;
}

#user_document .parsed_markdown h5, #user_document .parsed_markdown h6 {
  font-family: monospace;
}

#user_document .parsed_markdown i {
  font-style: italic;
}

#user_document .parsed_markdown u {
  text-decoration: underline;
}

#user_document .parsed_markdown h4, #user_document .parsed_markdown h5, #user_document .parsed_markdown h6 {
  text-align: left !important;
}

#user_document .parsed_markdown .txt_quote {
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #fafafa;
  border-radius: 4px;
}

#user_document .parsed_markdown hr {
  margin: 2px;
  padding: 0;
}

#user_document .parsed_markdown hr.dash {
  border: 1px dashed #bbb;
}

#user_document .parsed_markdown hr.solid {
  border: 1px solid #bbb;
}

#user_document .parsed_markdown ul {
  list-style-type: circle;
  list-style-type: circle;
  margin-left: 0.5em;
  list-style-position: inside;
  padding: 0;
}

#user_document .parsed_markdown li {
  border: 0;
  padding: 0;
  margin: 0.5em 0;
}

.fb-cont {
  position: relative;
  margin: auto;
  text-align: center;
  min-width: 380px;
  width: auto;
  /*transform-origin: top left !important;*/
  /*//background-color: navy; /////////////////////////*/
}

.fb-cont-hide {
  display: none;
}

.fretboard {
  border: 1px solid #bbb;
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.ui-resizable-resizing {
  /*    .fretboard_description,
    .fretboard_title,
    .additional_frb_control,
    .fretboard_controls{opacity: 0 !important}*/
}

.ui-resizable-resizing .fretboard {
  border: 3px dashed indianred;
  -webkit-transform-origin: top left !important;
          transform-origin: top left !important;
}

.ui-resizable-resizing .fretboard .string {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.ui-resizable-resizing .fb-cont {
  position: relative;
  opacity: 0.5;
}

.ui-resizable-resizing .fret_numbers {
  opacity: 0 !important;
}

.string {
  display: inline-block;
  white-space: nowrap;
  -margin-bottom: 0px;
}

.fret {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 20px;
  border-left: 3px solid rgba(50, 50, 50, 0.5);
  text-align: center;
  cursor: cell;
  font-family: 'Verdana', sans-serif;
  font-weight: bold;
}

.unclickable,
.unclickable_frets .fret {
  pointer-events: none !important;
}

.clickable {
  pointer-events: all !important;
  cursor: pointer;
}

.unclickable {
  pointer-events: none !important;
}

.clickable {
  pointer-events: all !important;
  cursor: pointer;
}

.fretzero {
  background-color: #aaa;
  border-left-color: transparent !important;
  border-bottom: 1px solid #aaa;
  margin-bottom: -1px;
}

.fretzero:hover, .fret:hover {
  background: #ccc;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, #ccc), color-stop(47%, #7f7f7f), color-stop(49%, #7f7f7f), color-stop(51%, #ccc));
  background: linear-gradient(to bottom, #ccc 45%, #7f7f7f 47%, #7f7f7f 49%, #ccc 51%);
}

.fret_numbers {
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  width: 900px;
  display: inline-block;
}

.fret_numbers .fret_number {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: inline-block;
  width: 70px;
  line-height: 30px;
  text-align: center;
  font-family: 'Verdana', sans-serif;
  color: #888;
  border-left: 2px solid transparent !important;
  border-right: 1px solid transparent !important;
}

.fret_numbers .fret_number:first-of-type {
  width: 35px;
  color: transparent !important;
}

/* CANVAS PER FREEHAND DRAWING ---- */
.custom-frb-canvas {
  position: absolute;
  background-color: transparent;
  z-index: 99999;
  cursor: pointer;
  top: 0;
  left: 0;
  pointer-events: none;
  cursor: none;
}

#pencil_cursor {
  display: block;
  display: none;
  position: absolute;
  height: 30px;
  width: 30px;
  /* background-color: red; */
  z-index: 999999999999;
  top: -30px;
  left: 0px;
  pointer-events: none;
  background-size: contain;
  background-image: url(../../public/icons/pencil.png);
}

#pencil_cursor.rubber {
  background-image: url(../../public/icons/rubber.png);
}

#pencil_cursor.rubber:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #ffffff88;
  left: -15px;
  bottom: -15px;
  z-index: 1;
  border-radius: 15px;
  border: 1px solid #ccc;
}

#pencil_cursor.isDrawing {
  height: 40px;
  width: 40px;
  top: -40px;
}

.active_canvas {
  background-color: #ffffff55;
  /*cursor: url(../../public/icons/pencil.cur) 8 8, auto !important;*/
  pointer-events: all;
}

.canvas_enabled {
  /*bottone*/
  border: 1px solid red;
}

.dot {
  position: absolute;
  top: 0px;
  display: inline-block;
  height: 16px;
  width: 16px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #ccc;
  opacity: 0.5;
  pointer-events: none;
}

#user_document.fb_style_1 .string,
div[stringtype="fb_style_1"] {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(46%, #fffaef), color-stop(46%, #d6b698), color-stop(54%, #d6b698), color-stop(54%, #fffaef));
  background: linear-gradient(to bottom, #fffaef 46%, #d6b698 46%, #d6b698 54%, #fffaef 54%);
}

#user_document.fb_style_1 .fretboard {
  background-color: #fffaef;
}

#user_document.fb_style_2 .string,
div[stringtype="fb_style_2"] {
  background: #38301e;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(42%, #38301e), color-stop(46%, #e5d199), color-stop(49%, #ddd1aa), color-stop(54%, #e0bc47), color-stop(59%, #38301e));
  background: linear-gradient(to bottom, #38301e 42%, #e5d199 46%, #ddd1aa 49%, #e0bc47 54%, #38301e 59%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38301e', endColorstr='#38301e', GradientType=0);
}

#user_document.fb_style_2 .fret {
  border-left-color: #ddd;
}

#user_document.fb_style_2 .fretboard {
  background-color: #38301e;
}

#user_document.fb_style_2 .note-dot {
  text-shadow: 0px 0px 3px #ffffff, 0px 0px 3px #ffffff, 0px 0px 3px #ffffff, 0px 0px 2px #ffffff;
}

#user_document.fb_style_3 .string,
div[stringtype="fb_style_3"] {
  background: #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, #ffffff), color-stop(47%, #7f7f7f), color-stop(49%, #7f7f7f), color-stop(51%, #ffffff));
  background: linear-gradient(to bottom, #ffffff 45%, #7f7f7f 47%, #7f7f7f 49%, #ffffff 51%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}

#user_document.fb_style_3 .fretboard {
  background-color: #ffffff;
}

#user_document.fb_style_4 .string,
div[stringtype="fb_style_4"] {
  background: #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, #ffffff), color-stop(47%, #7f7f7f), color-stop(49%, #7f7f7f), color-stop(51%, #ffffff));
  background: linear-gradient(to bottom, #ffffff 45%, #7f7f7f 47%, #7f7f7f 49%, #ffffff 51%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}

#user_document.fb_style_4 .fret {
  border-left-color: rgba(0, 0, 0, 0.05) !important;
}

#user_document.fb_style_4 .fretzero {
  border-left-color: #aaa !important;
}

#user_document.fb_style_4 .fretboard {
  background-color: #ffffff;
}

#user_document.fb_style_5 .string,
div[stringtype="fb_style_5"] {
  background: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(44%, white), color-stop(48%, #7c1d1d), color-stop(50%, #fcdab3), color-stop(53%, #f9f1e8), color-stop(78%, white), color-stop(78%, white));
  background: linear-gradient(to bottom, white 44%, #7c1d1d 48%, #fcdab3 50%, #f9f1e8 53%, white 78%, white 78%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}

#user_document.fb_style_5 .fret {
  border-left-color: rgba(0, 0, 0, 0.15) !important;
}

#user_document.fb_style_5 .fretboard {
  background-color: white;
}

#user_document.fb_style_6 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(42%, transparent), color-stop(47%, #60401c), color-stop(53%, #9A6324), color-stop(52%, transparent));
  background: linear-gradient(to bottom, transparent 42%, #60401c 47%, #9A6324 53%, transparent 52%);
}

#user_document.fb_style_6 .fretboard,
div[stringtype="fb_style_6"] {
  background-image: url("../img/wood.jpg");
  background-opacity: 0.8;
}

#user_document.fb_style_7 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(42%, transparent), color-stop(47%, #60401c), color-stop(53%, #9A6324), color-stop(52%, transparent));
  background: linear-gradient(to bottom, transparent 42%, #60401c 47%, #9A6324 53%, transparent 52%);
}

#user_document.fb_style_7 .dot {
  background-color: black;
  opacity: 0.2;
}

#user_document.fb_style_7 .fretzero {
  background-color: #f4eeea;
}

#user_document.fb_style_7 .fretboard {
  background-image: url("../img/wood_lightest.jpg");
}

div[stringtype="fb_style_7"] {
  /* preview */
  background-image: url("../img/wood_lightest.jpg");
}

#user_document.fb_style_8 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), color-stop(49%, #333), color-stop(51%, #333), color-stop(53%, transparent));
  background: linear-gradient(to bottom, transparent 47%, #333 49%, #333 51%, transparent 53%);
}

#user_document.fb_style_8 .dot {
  background-color: transparent;
  opacity: 0.2;
  border: 1px solid #333;
}

#user_document.fb_style_8 .fretzero {
  background-color: #fff;
}

#user_document.fb_style_8 .fretboard {
  background-color: #fff;
  border-color: #b4b4b4;
}

#user_document.fb_style_8 .fret {
  border-color: #333;
}

div[stringtype="fb_style_8"] {
  /* preview */
  border: 2px solid #333;
}

#user_document.fb_style_9 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), color-stop(49%, #98bec6), color-stop(51%, #98bec6), color-stop(53%, transparent));
  background: linear-gradient(to bottom, transparent 47%, #98bec6 49%, #98bec6 51%, transparent 53%);
}

#user_document.fb_style_9 .dot {
  background-color: #98bec6;
  opacity: 0.2;
  border: 1px solid #98bec6;
}

#user_document.fb_style_9 .fretzero {
  background-color: #fff;
}

#user_document.fb_style_9 .fretboard {
  background-color: #fff;
  border-color: #98bec6;
}

#user_document.fb_style_9 .fret {
  border-color: #98bec6;
}

#user_document.fb_style_9 .fret_number {
  color: #98bec6;
}

div[stringtype="fb_style_9"] {
  /* preview */
  border: 2px solid #98bec6;
}

#user_document.fb_style_10 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), color-stop(49%, #fff), color-stop(51%, #fff), color-stop(53%, transparent));
  background: linear-gradient(to bottom, transparent 47%, #fff 49%, #fff 51%, transparent 53%);
}

#user_document.fb_style_10 .dot {
  background-color: #fff;
  border: 1px solid #fff;
  opacity: 0.4;
}

#user_document.fb_style_10 .fretzero {
  background-color: #444;
}

#user_document.fb_style_10 .fretboard {
  background-color: #333;
}

#user_document.fb_style_10 .fret {
  border-color: #fff;
}

#user_document.fb_style_10 .note-dot {
  text-shadow: 0px 0px 3px #ffffff, 0px 0px 3px #ffffff, 0px 0px 3px #ffffff, 0px 0px 2px #ffffff;
}

div[stringtype="fb_style_10"] {
  /* preview */
  border: 2px solid #CCC;
  background-color: #333;
}

#user_document.fb_style_11 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), color-stop(49%, #333), color-stop(51%, #333), color-stop(53%, transparent));
  background: linear-gradient(to bottom, transparent 47%, #333 49%, #333 51%, transparent 53%);
}

#user_document.fb_style_11 .dot {
  background-color: transparent;
  opacity: 0.2;
  border: 1px solid #333;
}

#user_document.fb_style_11 .fretzero {
  background-color: #eee;
  border: 0;
  border-color: white;
}

#user_document.fb_style_11 .fretboard {
  background-color: transparent;
  border-color: transparent;
}

#user_document.fb_style_11 .fret {
  border-color: #333;
}

div[stringtype="fb_style_11"] {
  /* preview */
  border: 1px dashed #000;
  background-color: white;
}

#user_document.fb_style_12 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), color-stop(49%, #333), color-stop(51%, #333), color-stop(53%, transparent));
  background: linear-gradient(to bottom, transparent 47%, #333 49%, #333 51%, transparent 53%);
}

#user_document.fb_style_12 .dot {
  background-color: transparent;
  opacity: 0.2;
  border: 1px solid #333;
}

#user_document.fb_style_12 .fretzero {
  background-color: #fffaef;
  border: 0;
  border-color: white;
}

#user_document.fb_style_12 .fretboard {
  background-color: #fffaef;
  border-color: transparent;
}

#user_document.fb_style_12 .fret {
  border-color: #333;
}

div[stringtype="fb_style_12"] {
  /* preview */
  border: 1px dashed #000;
  background-color: #fffaef;
}

#user_document.fb_style_13 {
  background-color: #000;
  border-color: #41f900;
  color: #41f900 !important;
  font-family: 'Chakra Petch', sans-serif !important;
  -webkit-box-shadow: 0 0 20px 10px #41f900;
          box-shadow: 0 0 20px 10px #41f900;
  /*filter: saturate(0) contrast(1) sepia(1) hue-rotate(45deg);*/
}

#user_document.fb_style_13 .edit-title {
  border-bottom: 2px dashed #41f900;
  font-family: 'Chakra Petch', sans-serif !important;
}

#user_document.fb_style_13 .edit-title, #user_document.fb_style_13 .fretboard_title,
#user_document.fb_style_13 .fretboard_description, #user_document.fb_style_13 #credits,
#user_document.fb_style_13 .fret_number, #user_document.fb_style_13 textarea {
  color: #41f900 !important;
  font-family: 'Chakra Petch', sans-serif !important;
}

#user_document.fb_style_13 li, #user_document.fb_style_13 .selected_li {
  background-color: transparent;
}

#user_document.fb_style_13 .selected_li .column_control,
#user_document.fb_style_13 .selected_li .frb_control,
#user_document.fb_style_13 .selected_li .fretboard_controls,
#user_document.fb_style_13 .selected_li .additional_frb_control {
  background-color: #525252;
  color: #41f900;
}

#user_document.fb_style_13 .txt_quote {
  background-color: #41f90033;
  border-color: #41f900;
}

#user_document.fb_style_13 .parsed_markdown {
  color: #41f900 !important;
  font-family: 'Chakra Petch', sans-serif !important;
}

#user_document.fb_style_13 .parsed_markdown h1, #user_document.fb_style_13 .parsed_markdown h2, #user_document.fb_style_13 .parsed_markdown h3, #user_document.fb_style_13 .parsed_markdown h4, #user_document.fb_style_13 .parsed_markdown h5, #user_document.fb_style_13 .parsed_markdown h6 {
  color: #41f900 !important;
  font-family: 'Chakra Petch', sans-serif !important;
}

#user_document.fb_style_13 .parsed_markdown hr {
  border-color: #41f900;
}

#user_document.fb_style_13 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), color-stop(49%, #41f900), color-stop(51%, #41f900), color-stop(53%, transparent));
  background: linear-gradient(to bottom, transparent 47%, #41f900 49%, #41f900 51%, transparent 53%);
}

#user_document.fb_style_13 .dot {
  background-color: transparent;
  opacity: 0.2;
  border: 1px solid #41f900;
}

#user_document.fb_style_13 .fretzero {
  background-color: transparent;
}

#user_document.fb_style_13 .fretboard {
  background-color: transparent;
  border-color: transparent;
}

#user_document.fb_style_13 .fret {
  border-color: #41f900;
  border-style: double;
}

#user_document.fb_style_13 .note-dot {
  text-shadow: 0px 0px 3px #41f900, 0px 0px 3px #41f900, 0px 0px 3px #41f900, 0px 0px 2px #41f900;
}

div[stringtype="fb_style_13"] {
  /* preview */
  border: 1px solid #000;
  background-color: #41f900;
}

#user_document.fb_style_14 {
  color: #5c5c5c !important;
  font-family: 'Shadows Into Light', cursive !important;
  /*filter: saturate(0) contrast(1) sepia(1) hue-rotate(45deg);*/
}

#user_document.fb_style_14 .edit-title {
  /*border-bottom:  2px dashed $themecolor_13;*/
  font-family: 'Shadows Into Light', cursive !important;
}

#user_document.fb_style_14 .edit-title, #user_document.fb_style_14 .fretboard_title,
#user_document.fb_style_14 .fretboard_description, #user_document.fb_style_14 #credits,
#user_document.fb_style_14 .fret_number, #user_document.fb_style_14 textarea {
  color: #5c5c5c !important;
  font-family: 'Shadows Into Light', cursive !important;
}

#user_document.fb_style_14 .parsed_markdown {
  font-family: 'Shadows Into Light', cursive !important;
  color: #5c5c5c !important;
}

#user_document.fb_style_14 .parsed_markdown h1, #user_document.fb_style_14 .parsed_markdown h2, #user_document.fb_style_14 .parsed_markdown h3, #user_document.fb_style_14 .parsed_markdown h4, #user_document.fb_style_14 .parsed_markdown h5, #user_document.fb_style_14 .parsed_markdown h6 {
  font-family: 'Shadows Into Light', cursive !important;
}

#user_document.fb_style_14 .parsed_markdown hr {
  border-color: #5c5c5c;
}

#user_document.fb_style_14 .string {
  background: transparent;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), color-stop(49%, #5c5c5c), color-stop(51%, #5c5c5c), color-stop(53%, transparent));
  background: linear-gradient(to bottom, transparent 47%, #5c5c5c 49%, #5c5c5c 51%, transparent 53%);
}

#user_document.fb_style_14 .dot {
  background-color: transparent;
  opacity: 0.2;
  border: 1px solid #5c5c5c;
}

#user_document.fb_style_14 .fretzero {
  background-color: white;
}

#user_document.fb_style_14 .fretboard {
  background-color: transparent;
}

#user_document.fb_style_14 .fret {
  border-color: #5c5c5c;
}

div[stringtype="fb_style_14"] {
  /* preview */
  border: 1px solid #000;
  background-color: #5c5c5c;
}

.black_n_whiter {
  -webkit-filter: saturate(0%);
          filter: saturate(0%);
}

.low-saturation {
  -webkit-filter: saturate(30%);
          filter: saturate(30%);
}

div[class*="selected-fret-lr_"] div[class*="lr_"] {
  display: inline-block;
}

.hide-lr_1 .note-dot.lr_1 {
  display: none !important;
}

.hide-lr_2 .note-dot.lr_2 {
  display: none !important;
}

.hide-lr_3 .note-dot.lr_3 {
  display: none !important;
}

.hide-lr_4 .note-dot.lr_4 {
  display: none !important;
}

.hide-lr_5 .note-dot.lr_5 {
  display: none !important;
}

.hide-lr_6 .note-dot.lr_6 {
  display: none !important;
}

.hide-lr_7 .note-dot.lr_7 {
  display: none !important;
}

.hide-lr_8 .note-dot.lr_8 {
  display: none !important;
}

.selected-fret-lr_1 .fret-text {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.selected-fret-lr_2 .fret-text {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.selected-fret-lr_3 .fret-text {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.selected-fret-lr_4 .fret-text {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.selected-fret-lr_5 .fret-text {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.selected-fret-lr_6 .fret-text {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.selected-fret-lr_7 .fret-text {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.selected-fret-lr_8 .fret-text {
  opacity: 1;
  color: white;
  text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.fret-text.hide_text {
  text-shadow: none;
  color: rgba(0, 0, 0, 0.1);
}

span.customText {
  color: white !important;
  top: 0%;
  width: 300%;
  left: -100% !important;
  font-size: 50%;
  text-shadow: 0 0 2px black,  0 0 2px black, 0 0 2px black !important;
}

span.customText::before {
  display: none !important;
}

.new_custom_text {
  pointer-events: all;
  position: absolute;
  margin: auto;
  left: -10px;
  width: 40px;
  border-radius: 4px;
  height: 20px;
  opacity: 0.8;
  font-size: 14px;
  font-family: sans-serif;
  border: 2px solid black;
  font-weight: bold;
  text-align: center;
}

.hide-lr_1 line.lr_1 {
  display: none !important;
}

.hide-lr_2 line.lr_2 {
  display: none !important;
}

.hide-lr_3 line.lr_3 {
  display: none !important;
}

.hide-lr_4 line.lr_4 {
  display: none !important;
}

.hide-lr_5 line.lr_5 {
  display: none !important;
}

.hide-lr_6 line.lr_6 {
  display: none !important;
}

.hide-lr_7 line.lr_7 {
  display: none !important;
}

.hide-lr_8 line.lr_8 {
  display: none !important;
}

.hide-lr_1 .rectangle.lr_1 {
  display: none !important;
}

.hide-lr_2 .rectangle.lr_2 {
  display: none !important;
}

.hide-lr_3 .rectangle.lr_3 {
  display: none !important;
}

.hide-lr_4 .rectangle.lr_4 {
  display: none !important;
}

.hide-lr_5 .rectangle.lr_5 {
  display: none !important;
}

.hide-lr_6 .rectangle.lr_6 {
  display: none !important;
}

.hide-lr_7 .rectangle.lr_7 {
  display: none !important;
}

.hide-lr_8 .rectangle.lr_8 {
  display: none !important;
}

.select-flag {
  -webkit-animation: colorPulse 0.3s  infinite;
          animation: colorPulse 0.3s  infinite;
  -webkit-animation: bounce 0.6s infinite ease-in-out;
          animation: bounce 0.6s infinite ease-in-out;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  50% {
    -webkit-transform: translateY(4%);
            transform: translateY(4%);
  }
  100% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  50% {
    -webkit-transform: translateY(4%);
            transform: translateY(4%);
  }
  100% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
}

.in_clipboard {
  border-radius: 20px;
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  width: calc(100% - 2px) !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: calc(100% - 2px) !important;
  margin: 2px;
  -webkit-animation: flash 0.2s infinite linear;
          animation: flash 0.2s infinite linear;
}

@-webkit-keyframes flash {
  0% {
    border: 3px dashed #ff171769;
  }
  49% {
    border: 3px dashed #ff171769;
  }
  50% {
    border: 0;
  }
  99% {
    border: 0;
  }
}

@keyframes flash {
  0% {
    border: 3px dashed #ff171769;
  }
  49% {
    border: 3px dashed #ff171769;
  }
  50% {
    border: 0;
  }
  99% {
    border: 0;
  }
}

.select_marker {
  display: inline-block;
  position: absolute;
  width: 50%;
  height: 0px;
  border: 7px solid red;
  border-top-color: transparent;
  border-bottom-color: transparent;
  -webkit-animation: rotation 1s infinite linear;
  animation: rotation 1s infinite linear;
  top: calc(50% - 8px);
  left: calc(25% - 8px);
}

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

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

.fret-text {
  position: relative;
  z-index: 100;
  color: rgba(0, 0, 0, 0.1);
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}

.hiddenImportant {
  display: none !important;
}

.note-dot.lr_1 {
  z-index: 20;
}

.note-dot.lr_2 {
  z-index: 30;
}

.note-dot.lr_3 {
  z-index: 40;
}

.note-dot.lr_4 {
  z-index: 50;
}

.note-dot.lr_5 {
  z-index: 60;
}

.note-dot.lr_6 {
  z-index: 70;
}

.note-dot.lr_7 {
  z-index: 80;
}

.note-dot.lr_8 {
  z-index: 90;
}

.note-dot.lr_1 span {
  z-index: 21;
}

.note-dot.lr_2 span {
  z-index: 31;
}

.note-dot.lr_3 span {
  z-index: 41;
}

.note-dot.lr_4 span {
  z-index: 51;
}

.note-dot.lr_5 span {
  z-index: 61;
}

.note-dot.lr_6 span {
  z-index: 71;
}

.note-dot.lr_7 span {
  z-index: 81;
}

.note-dot.lr_8 span {
  z-index: 91;
}

.prev-dot,
.note-dot {
  position: absolute;
  height: 20px;
  width: 20px;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 26px;
  color: white;
  display: none;
  text-shadow: 0px 0px 1px #000000, 0px 0px 1px #000000;
}

.prev-dot {
  position: relative;
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 6px;
  top: -4px;
}

.prev-dot div.splitter {
  width: 8px;
  height: 20px;
  top: 20%;
  font-size: 20px;
  line-height: 20px;
}

.fretboard_controls {
  background-color: transparent;
  position: relative;
  margin: 0px;
  margin-bottom: 10px;
  width: 100%;
  top: 0;
  display: inline-block;
  opacity: 0.25;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.selected_li .fretboard_controls,
li:hover .fretboard_controls {
  opacity: 1;
}

.frb_control, .column_control, .txt_control {
  display: inline-block;
  position: relative;
  width: calc(100% - 106px);
  font-size: 0px;
  background-color: transparent;
  float: left;
  text-align: left;
  z-index: 999;
  font-family: 'Verdana', sans-serif;
}

.frb_control div, .column_control div, .txt_control div {
  z-index: 999999999;
  display: inline-block;
  border-radius: 20%;
  height: 18px;
  width: 18px;
  padding: 2px;
  line-height: 18px;
  border: 1px solid #E8EFF2;
  margin: 1px;
  font-size: 10px;
  color: #444;
  background-color: #fff;
  text-align: center;
}

.frb_control div:hover, .column_control div:hover, .txt_control div:hover {
  cursor: pointer;
  background-color: #E8EFF2;
  opacity: 1;
}

.frb_control div.selected, .column_control div.selected, .txt_control div.selected {
  background-color: #888;
  color: #fff;
}

.frb_control .spacer, .column_control .spacer, .txt_control .spacer {
  display: inline-block;
  background-color: transparent;
  height: 5px;
  width: 2%;
}

.frb_control .button_set, .column_control .button_set, .txt_control .button_set {
  width: auto;
  min-width: 30px;
}

.column_control {
  width: 106px;
  background-color: transparent;
  float: right;
  text-align: right;
}

.column_control,
.frb_control,
.fretboard_controls {
  padding: 2px 0;
}

.selected_li .column_control,
.selected_li .frb_control,
.selected_li .fretboard_controls {
  background-color: #8fbfc7;
}

.txt_control, .column_control.txt {
  border-bottom: 1px solid #E8EFF2;
}

.frbcopy {
  cursor: copy;
}

.frbmove {
  cursor: move;
}

.frbselector.selected {
  background-color: #218995 !important;
  border-color: #4fc1ce !important;
}

.add_fretboard_title,
.add_fretboard_description {
  display: none;
}

.selected_li .add_fretboard_title,
.selected_li .add_fretboard_description {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  text-align: left;
  color: #666;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.add_fretboard_title.hide,
.add_fretboard_description.hide {
  display: none !important;
}

.additional_frb_control {
  display: none;
  position: absolute;
  background-color: #ffebcd;
  padding: 4px 12px;
  margin-top: -10px;
  text-align: left;
  font-size: 14px;
  color: #444;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-height: 20px;
  overflow: auto;
}

.additional_frb_control input {
  border: 1px solid #ccc;
  max-width: 34px;
}

.selected_li .additional_frb_control {
  display: block;
}

/*
.column_control, .frb_control, .txt_control{
display: inline-block;
  position: absolute;
  width: 112px;
  top: 0px;
  left: calc(100% - 112px);
  box-sizing: border-box;
  z-index: 999;
  font-size: 0px;
  text-align: right;
  font-family: 'Verdana', sans-serif;
  background-color: #fafafa; // #b5c4c6;
  padding: 2px;
  padding-bottom: 3px;
    div{
        z-index: 999999999;
        display: inline-block;
        border-radius: 20%;
        height: 18px;
        width: 18px;
        padding: 2px;
        line-height: 18px;
        border: 1px solid $medio_2;
        margin-right: 3px;
        font-size: 10px;
        color: $testo_icone;
        background-color: $chiaro_1;
        text-align: center;
        &:hover{
            cursor: pointer;
            background-color: $medio_2;
            opacity: 1;
        }
        &.selected{
            background-color: $scuro_2;
            color: $chiaro_1;
        }
    }
    .button_set{
        width: auto;
        min-width: 30px;
    }
}

.selected_li .column_control, 
.selected_li  .frb_control{
background-color: #b5c4c6;
}

.txt_control, .column_control.txt{ //barra superiore caselle testo e video e icone colonna
  border-bottom: 1px solid $medio_2;
}
/*.frb_control:active, .txt_control:active{ 
  cursor: move;
}
*/
/*
.frb_control, .txt_control{
    position: absolute;
    width: calc(100% - 112px);
    left: 0% !important;
    text-align: left;
}

.frbselector.selected{
    background-color: $accent_2 !important;
    border-color: $accent_1 !important;
    color: $chiaro_1;

}

.frbcopy {
    cursor: copy;
}

.frbmove {
    cursor: move;
}

*/
/*----------------MOBILE-----------------*/
@media only screen and (max-device-width: 700px) {
  .mobileHide, .sharepanel, .closepanel {
    display: none !important;
  }
  #panel-3 {
    height: 110px;
  }
  #panel-7 {
    height: 240px;
  }
  #panel-8 {
    height: 170px;
  }
  #panel-1, #panel-2, #panel-3, #panel-4, #panel-5, #panel-6, #panel-7, #panel-8, #panel-10, #panel-11, #panel-12 {
    left: 10px;
    top: 50px;
  }
  #panel-9 {
    bottom: 20px;
  }
}

#mc_embed_signup {
  color: #9c9c9c;
  font: 1rem "PT Sans", sans-serif;
  max-width: 400px;
  position: absolute;
  top: 55px;
  right: 30px;
  padding: 5px;
  border-radius: 2px;
  background: #aaa;
  border: 1px solid #aaa;
  z-index: 5;
}

#mc_embed_signup h2 {
  color: #fff;
  margin-top: 5px;
  font-size: 14px;
  text-align: left;
}

#mc_embed_signup div {
  display: inline;
}

#mc_embed_signup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#mc_embed_signup input[name="subscribe"] {
  display: inline-block;
  background: transparent;
  color: inherit;
  font: inherit;
  border: 0;
  outline: 0;
  padding: 0;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  cursor: pointer;
}

#mc_embed_signup input[name="subscribe"] {
  background: #666;
  color: #fff;
  -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 6px 20px;
}

#mc_embed_signup input[name="subscribe"]:hover {
  background: indianred;
}

#mc_embed_signup input[name="subscribe"]:active {
  -webkit-box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}

#mc_embed_signup input[name="subscribe"] {
  margin-left: -70px;
}

#mc_embed_signup input[name="EMAIL"] {
  width: 300px;
  background: #f8f8f8;
  color: #a3a3a3;
  font: inherit;
  border: 0;
  outline: 0;
  padding: 10px 18px;
}

#document_tuning,
#credits {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
  color: #888;
  text-align: right;
  font-family: Verdana, sans-serif;
}

#document_tuning {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
  font-size: 12px;
}

.unlogged,
.pu {
  position: relative;
}

.unlogged {
  background-color: indianred;
}

.unlogged:after,
.pu:after {
  content: 'PRO';
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: white;
  font-weight: bold;
  font-size: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  background-color: #b80101;
  opacity: 0;
  width: 100%;
  height: 0%;
  top: 0;
  left: 0;
  border-radius: 3px;
  pointer-events: none;
}

.unlogged:after {
  content: '!';
  font-size: 18px;
}

.pul:after {
  content: 'PRO PLAN NEEDED';
}

.unlogged:hover:after,
.pu:hover:after {
  opacity: 0.8;
  height: 100%;
}

.ui-effects-transfer {
  background-color: red;
  z-index: 99999;
  opacity: 0.2;
  -webkit-animation: colors 0.1s linear infinite;
          animation: colors 0.1s linear infinite;
  border: 5px dashed black;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*filter: blur(50px);*/
}

@-webkit-keyframes colors {
  0% {
    background-color: white;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: black;
  }
}

@keyframes colors {
  0% {
    background-color: white;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: black;
  }
}

.color-1, span.color-1:before {
  background-color: #c73329;
  border-color: #c73329 !important;
  stroke: #c73329 !important;
  color: #c73329;
  font-size: 20px;
}

line.color-1 {
  background-color: transparent;
  fill: #c73329 !important;
}

.fretlabel.color-1,
.rectangle.color-1 {
  background-color: rgba(199,51,41, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-1,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-1:before,
.semitrans-lr_2 .note-dot.lr_2.color-1,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-1:before,
.semitrans-lr_3 .note-dot.lr_3.color-1,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-1:before,
.semitrans-lr_4 .note-dot.lr_4.color-1,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-1:before,
.semitrans-lr_5 .note-dot.lr_5.color-1,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-1:before,
.semitrans-lr_6 .note-dot.lr_6.color-1,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-1:before,
.semitrans-lr_7 .note-dot.lr_7.color-1,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-1:before,
.semitrans-lr_8 .note-dot.lr_8.color-1,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-1:before {
  color: rgba(199,51,41, 0.5);
  text-shadow: none;
}

.color-2, span.color-2:before {
  background-color: #89d1dc;
  border-color: #89d1dc !important;
  stroke: #89d1dc !important;
  color: #89d1dc;
  font-size: 20px;
}

line.color-2 {
  background-color: transparent;
  fill: #89d1dc !important;
}

.fretlabel.color-2,
.rectangle.color-2 {
  background-color: rgba(137,209,220, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-2,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-2:before,
.semitrans-lr_2 .note-dot.lr_2.color-2,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-2:before,
.semitrans-lr_3 .note-dot.lr_3.color-2,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-2:before,
.semitrans-lr_4 .note-dot.lr_4.color-2,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-2:before,
.semitrans-lr_5 .note-dot.lr_5.color-2,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-2:before,
.semitrans-lr_6 .note-dot.lr_6.color-2,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-2:before,
.semitrans-lr_7 .note-dot.lr_7.color-2,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-2:before,
.semitrans-lr_8 .note-dot.lr_8.color-2,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-2:before {
  color: rgba(137,209,220, 0.5);
  text-shadow: none;
}

.color-3, span.color-3:before {
  background-color: #f1c231;
  border-color: #f1c231 !important;
  stroke: #f1c231 !important;
  color: #f1c231;
  font-size: 20px;
}

line.color-3 {
  background-color: transparent;
  fill: #f1c231 !important;
}

.fretlabel.color-3,
.rectangle.color-3 {
  background-color: rgba(241,194,49, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-3,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-3:before,
.semitrans-lr_2 .note-dot.lr_2.color-3,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-3:before,
.semitrans-lr_3 .note-dot.lr_3.color-3,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-3:before,
.semitrans-lr_4 .note-dot.lr_4.color-3,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-3:before,
.semitrans-lr_5 .note-dot.lr_5.color-3,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-3:before,
.semitrans-lr_6 .note-dot.lr_6.color-3,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-3:before,
.semitrans-lr_7 .note-dot.lr_7.color-3,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-3:before,
.semitrans-lr_8 .note-dot.lr_8.color-3,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-3:before {
  color: rgba(241,194,49, 0.5);
  text-shadow: none;
}

.color-4, span.color-4:before {
  background-color: #6aa845;
  border-color: #6aa845 !important;
  stroke: #6aa845 !important;
  color: #6aa845;
  font-size: 20px;
}

line.color-4 {
  background-color: transparent;
  fill: #6aa845 !important;
}

.fretlabel.color-4,
.rectangle.color-4 {
  background-color: rgba(106,168,69, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-4,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-4:before,
.semitrans-lr_2 .note-dot.lr_2.color-4,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-4:before,
.semitrans-lr_3 .note-dot.lr_3.color-4,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-4:before,
.semitrans-lr_4 .note-dot.lr_4.color-4,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-4:before,
.semitrans-lr_5 .note-dot.lr_5.color-4,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-4:before,
.semitrans-lr_6 .note-dot.lr_6.color-4,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-4:before,
.semitrans-lr_7 .note-dot.lr_7.color-4,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-4:before,
.semitrans-lr_8 .note-dot.lr_8.color-4,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-4:before {
  color: rgba(106,168,69, 0.5);
  text-shadow: none;
}

.color-5, span.color-5:before {
  background-color: #068c9b;
  border-color: #068c9b !important;
  stroke: #068c9b !important;
  color: #068c9b;
  font-size: 20px;
}

line.color-5 {
  background-color: transparent;
  fill: #068c9b !important;
}

.fretlabel.color-5,
.rectangle.color-5 {
  background-color: rgba(6,140,155, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-5,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-5:before,
.semitrans-lr_2 .note-dot.lr_2.color-5,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-5:before,
.semitrans-lr_3 .note-dot.lr_3.color-5,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-5:before,
.semitrans-lr_4 .note-dot.lr_4.color-5,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-5:before,
.semitrans-lr_5 .note-dot.lr_5.color-5,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-5:before,
.semitrans-lr_6 .note-dot.lr_6.color-5,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-5:before,
.semitrans-lr_7 .note-dot.lr_7.color-5,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-5:before,
.semitrans-lr_8 .note-dot.lr_8.color-5,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-5:before {
  color: rgba(6,140,155, 0.5);
  text-shadow: none;
}

.color-6, span.color-6:before {
  background-color: #004b7d;
  border-color: #004b7d !important;
  stroke: #004b7d !important;
  color: #004b7d;
  font-size: 20px;
}

line.color-6 {
  background-color: transparent;
  fill: #004b7d !important;
}

.fretlabel.color-6,
.rectangle.color-6 {
  background-color: rgba(0,75,125, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-6,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-6:before,
.semitrans-lr_2 .note-dot.lr_2.color-6,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-6:before,
.semitrans-lr_3 .note-dot.lr_3.color-6,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-6:before,
.semitrans-lr_4 .note-dot.lr_4.color-6,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-6:before,
.semitrans-lr_5 .note-dot.lr_5.color-6,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-6:before,
.semitrans-lr_6 .note-dot.lr_6.color-6,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-6:before,
.semitrans-lr_7 .note-dot.lr_7.color-6,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-6:before,
.semitrans-lr_8 .note-dot.lr_8.color-6,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-6:before {
  color: rgba(0,75,125, 0.5);
  text-shadow: none;
}

.color-7, span.color-7:before {
  background-color: #e9fafd;
  border-color: #e9fafd !important;
  stroke: #e9fafd !important;
  color: #e9fafd;
  font-size: 20px;
}

line.color-7 {
  background-color: transparent;
  fill: #e9fafd !important;
}

.fretlabel.color-7,
.rectangle.color-7 {
  background-color: rgba( 233,250,253, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-7,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-7:before,
.semitrans-lr_2 .note-dot.lr_2.color-7,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-7:before,
.semitrans-lr_3 .note-dot.lr_3.color-7,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-7:before,
.semitrans-lr_4 .note-dot.lr_4.color-7,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-7:before,
.semitrans-lr_5 .note-dot.lr_5.color-7,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-7:before,
.semitrans-lr_6 .note-dot.lr_6.color-7,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-7:before,
.semitrans-lr_7 .note-dot.lr_7.color-7,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-7:before,
.semitrans-lr_8 .note-dot.lr_8.color-7,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-7:before {
  color: rgba( 233,250,253, 0.5);
  text-shadow: none;
}

.color-8, span.color-8:before {
  background-color: #c17ba0;
  border-color: #c17ba0 !important;
  stroke: #c17ba0 !important;
  color: #c17ba0;
  font-size: 20px;
}

line.color-8 {
  background-color: transparent;
  fill: #c17ba0 !important;
}

.fretlabel.color-8,
.rectangle.color-8 {
  background-color: rgba(193,123,160, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-8,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-8:before,
.semitrans-lr_2 .note-dot.lr_2.color-8,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-8:before,
.semitrans-lr_3 .note-dot.lr_3.color-8,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-8:before,
.semitrans-lr_4 .note-dot.lr_4.color-8,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-8:before,
.semitrans-lr_5 .note-dot.lr_5.color-8,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-8:before,
.semitrans-lr_6 .note-dot.lr_6.color-8,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-8:before,
.semitrans-lr_7 .note-dot.lr_7.color-8,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-8:before,
.semitrans-lr_8 .note-dot.lr_8.color-8,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-8:before {
  color: rgba(193,123,160, 0.5);
  text-shadow: none;
}

.color-9, span.color-9:before {
  background-color: black;
  border-color: black !important;
  stroke: black !important;
  color: black;
  font-size: 20px;
}

line.color-9 {
  background-color: transparent;
  fill: black !important;
}

.fretlabel.color-9,
.rectangle.color-9 {
  background-color: rgba(0,0,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-9,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-9:before,
.semitrans-lr_2 .note-dot.lr_2.color-9,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-9:before,
.semitrans-lr_3 .note-dot.lr_3.color-9,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-9:before,
.semitrans-lr_4 .note-dot.lr_4.color-9,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-9:before,
.semitrans-lr_5 .note-dot.lr_5.color-9,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-9:before,
.semitrans-lr_6 .note-dot.lr_6.color-9,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-9:before,
.semitrans-lr_7 .note-dot.lr_7.color-9,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-9:before,
.semitrans-lr_8 .note-dot.lr_8.color-9,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-9:before {
  color: rgba(0,0,0, 0.5);
  text-shadow: none;
}

.color-10, span.color-10:before {
  background-color: #444444;
  border-color: #444444 !important;
  stroke: #444444 !important;
  color: #444444;
  font-size: 20px;
}

line.color-10 {
  background-color: transparent;
  fill: #444444 !important;
}

.fretlabel.color-10,
.rectangle.color-10 {
  background-color: rgba(68,68,68, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-10,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-10:before,
.semitrans-lr_2 .note-dot.lr_2.color-10,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-10:before,
.semitrans-lr_3 .note-dot.lr_3.color-10,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-10:before,
.semitrans-lr_4 .note-dot.lr_4.color-10,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-10:before,
.semitrans-lr_5 .note-dot.lr_5.color-10,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-10:before,
.semitrans-lr_6 .note-dot.lr_6.color-10,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-10:before,
.semitrans-lr_7 .note-dot.lr_7.color-10,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-10:before,
.semitrans-lr_8 .note-dot.lr_8.color-10,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-10:before {
  color: rgba(68,68,68, 0.5);
  text-shadow: none;
}

.color-11, span.color-11:before {
  background-color: #666666;
  border-color: #666666 !important;
  stroke: #666666 !important;
  color: #666666;
  font-size: 20px;
}

line.color-11 {
  background-color: transparent;
  fill: #666666 !important;
}

.fretlabel.color-11,
.rectangle.color-11 {
  background-color: rgba(102,102,102, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-11,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-11:before,
.semitrans-lr_2 .note-dot.lr_2.color-11,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-11:before,
.semitrans-lr_3 .note-dot.lr_3.color-11,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-11:before,
.semitrans-lr_4 .note-dot.lr_4.color-11,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-11:before,
.semitrans-lr_5 .note-dot.lr_5.color-11,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-11:before,
.semitrans-lr_6 .note-dot.lr_6.color-11,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-11:before,
.semitrans-lr_7 .note-dot.lr_7.color-11,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-11:before,
.semitrans-lr_8 .note-dot.lr_8.color-11,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-11:before {
  color: rgba(102,102,102, 0.5);
  text-shadow: none;
}

.color-12, span.color-12:before {
  background-color: #999999;
  border-color: #999999 !important;
  stroke: #999999 !important;
  color: #999999;
  font-size: 20px;
}

line.color-12 {
  background-color: transparent;
  fill: #999999 !important;
}

.fretlabel.color-12,
.rectangle.color-12 {
  background-color: rgba(153,153,153, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-12,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-12:before,
.semitrans-lr_2 .note-dot.lr_2.color-12,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-12:before,
.semitrans-lr_3 .note-dot.lr_3.color-12,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-12:before,
.semitrans-lr_4 .note-dot.lr_4.color-12,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-12:before,
.semitrans-lr_5 .note-dot.lr_5.color-12,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-12:before,
.semitrans-lr_6 .note-dot.lr_6.color-12,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-12:before,
.semitrans-lr_7 .note-dot.lr_7.color-12,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-12:before,
.semitrans-lr_8 .note-dot.lr_8.color-12,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-12:before {
  color: rgba(153,153,153, 0.5);
  text-shadow: none;
}

.color-13, span.color-13:before {
  background-color: #cccccc;
  border-color: #cccccc !important;
  stroke: #cccccc !important;
  color: #cccccc;
  font-size: 20px;
}

line.color-13 {
  background-color: transparent;
  fill: #cccccc !important;
}

.fretlabel.color-13,
.rectangle.color-13 {
  background-color: rgba( 204,204,204, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-13,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-13:before,
.semitrans-lr_2 .note-dot.lr_2.color-13,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-13:before,
.semitrans-lr_3 .note-dot.lr_3.color-13,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-13:before,
.semitrans-lr_4 .note-dot.lr_4.color-13,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-13:before,
.semitrans-lr_5 .note-dot.lr_5.color-13,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-13:before,
.semitrans-lr_6 .note-dot.lr_6.color-13,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-13:before,
.semitrans-lr_7 .note-dot.lr_7.color-13,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-13:before,
.semitrans-lr_8 .note-dot.lr_8.color-13,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-13:before {
  color: rgba( 204,204,204, 0.5);
  text-shadow: none;
}

.color-14, span.color-14:before {
  background-color: #dadada;
  border-color: #dadada !important;
  stroke: #dadada !important;
  color: #dadada;
  font-size: 20px;
}

line.color-14 {
  background-color: transparent;
  fill: #dadada !important;
}

.fretlabel.color-14,
.rectangle.color-14 {
  background-color: rgba(218,218,218, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-14,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-14:before,
.semitrans-lr_2 .note-dot.lr_2.color-14,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-14:before,
.semitrans-lr_3 .note-dot.lr_3.color-14,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-14:before,
.semitrans-lr_4 .note-dot.lr_4.color-14,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-14:before,
.semitrans-lr_5 .note-dot.lr_5.color-14,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-14:before,
.semitrans-lr_6 .note-dot.lr_6.color-14,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-14:before,
.semitrans-lr_7 .note-dot.lr_7.color-14,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-14:before,
.semitrans-lr_8 .note-dot.lr_8.color-14,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-14:before {
  color: rgba(218,218,218, 0.5);
  text-shadow: none;
}

.color-15, span.color-15:before {
  background-color: #f3f3f3;
  border-color: #f3f3f3 !important;
  stroke: #f3f3f3 !important;
  color: #f3f3f3;
  font-size: 20px;
}

line.color-15 {
  background-color: transparent;
  fill: #f3f3f3 !important;
}

.fretlabel.color-15,
.rectangle.color-15 {
  background-color: rgba(243,243,243, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-15,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-15:before,
.semitrans-lr_2 .note-dot.lr_2.color-15,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-15:before,
.semitrans-lr_3 .note-dot.lr_3.color-15,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-15:before,
.semitrans-lr_4 .note-dot.lr_4.color-15,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-15:before,
.semitrans-lr_5 .note-dot.lr_5.color-15,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-15:before,
.semitrans-lr_6 .note-dot.lr_6.color-15,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-15:before,
.semitrans-lr_7 .note-dot.lr_7.color-15,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-15:before,
.semitrans-lr_8 .note-dot.lr_8.color-15,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-15:before {
  color: rgba(243,243,243, 0.5);
  text-shadow: none;
}

.color-16, span.color-16:before {
  background-color: white;
  border-color: white !important;
  stroke: white !important;
  color: white;
  font-size: 20px;
}

line.color-16 {
  background-color: transparent;
  fill: white !important;
}

.fretlabel.color-16,
.rectangle.color-16 {
  background-color: rgba(255,255,255, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-16,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-16:before,
.semitrans-lr_2 .note-dot.lr_2.color-16,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-16:before,
.semitrans-lr_3 .note-dot.lr_3.color-16,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-16:before,
.semitrans-lr_4 .note-dot.lr_4.color-16,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-16:before,
.semitrans-lr_5 .note-dot.lr_5.color-16,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-16:before,
.semitrans-lr_6 .note-dot.lr_6.color-16,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-16:before,
.semitrans-lr_7 .note-dot.lr_7.color-16,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-16:before,
.semitrans-lr_8 .note-dot.lr_8.color-16,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-16:before {
  color: rgba(255,255,255, 0.5);
  text-shadow: none;
}

.color-17, span.color-17:before {
  background-color: #fe0000;
  border-color: #fe0000 !important;
  stroke: #fe0000 !important;
  color: #fe0000;
  font-size: 20px;
}

line.color-17 {
  background-color: transparent;
  fill: #fe0000 !important;
}

.fretlabel.color-17,
.rectangle.color-17 {
  background-color: rgba(254,0,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-17,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-17:before,
.semitrans-lr_2 .note-dot.lr_2.color-17,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-17:before,
.semitrans-lr_3 .note-dot.lr_3.color-17,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-17:before,
.semitrans-lr_4 .note-dot.lr_4.color-17,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-17:before,
.semitrans-lr_5 .note-dot.lr_5.color-17,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-17:before,
.semitrans-lr_6 .note-dot.lr_6.color-17,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-17:before,
.semitrans-lr_7 .note-dot.lr_7.color-17,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-17:before,
.semitrans-lr_8 .note-dot.lr_8.color-17,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-17:before {
  color: rgba(254,0,0, 0.5);
  text-shadow: none;
}

.color-18, span.color-18:before {
  background-color: #ff9900;
  border-color: #ff9900 !important;
  stroke: #ff9900 !important;
  color: #ff9900;
  font-size: 20px;
}

line.color-18 {
  background-color: transparent;
  fill: #ff9900 !important;
}

.fretlabel.color-18,
.rectangle.color-18 {
  background-color: rgba(255,153,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-18,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-18:before,
.semitrans-lr_2 .note-dot.lr_2.color-18,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-18:before,
.semitrans-lr_3 .note-dot.lr_3.color-18,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-18:before,
.semitrans-lr_4 .note-dot.lr_4.color-18,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-18:before,
.semitrans-lr_5 .note-dot.lr_5.color-18,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-18:before,
.semitrans-lr_6 .note-dot.lr_6.color-18,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-18:before,
.semitrans-lr_7 .note-dot.lr_7.color-18,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-18:before,
.semitrans-lr_8 .note-dot.lr_8.color-18,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-18:before {
  color: rgba(255,153,0, 0.5);
  text-shadow: none;
}

.color-19, span.color-19:before {
  background-color: yellow;
  border-color: yellow !important;
  stroke: yellow !important;
  color: yellow;
  font-size: 20px;
}

line.color-19 {
  background-color: transparent;
  fill: yellow !important;
}

.fretlabel.color-19,
.rectangle.color-19 {
  background-color: rgba( 255,255,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-19,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-19:before,
.semitrans-lr_2 .note-dot.lr_2.color-19,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-19:before,
.semitrans-lr_3 .note-dot.lr_3.color-19,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-19:before,
.semitrans-lr_4 .note-dot.lr_4.color-19,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-19:before,
.semitrans-lr_5 .note-dot.lr_5.color-19,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-19:before,
.semitrans-lr_6 .note-dot.lr_6.color-19,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-19:before,
.semitrans-lr_7 .note-dot.lr_7.color-19,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-19:before,
.semitrans-lr_8 .note-dot.lr_8.color-19,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-19:before {
  color: rgba( 255,255,0, 0.5);
  text-shadow: none;
}

.color-20, span.color-20:before {
  background-color: lime;
  border-color: lime !important;
  stroke: lime !important;
  color: lime;
  font-size: 20px;
}

line.color-20 {
  background-color: transparent;
  fill: lime !important;
}

.fretlabel.color-20,
.rectangle.color-20 {
  background-color: rgba(0,255,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-20,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-20:before,
.semitrans-lr_2 .note-dot.lr_2.color-20,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-20:before,
.semitrans-lr_3 .note-dot.lr_3.color-20,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-20:before,
.semitrans-lr_4 .note-dot.lr_4.color-20,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-20:before,
.semitrans-lr_5 .note-dot.lr_5.color-20,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-20:before,
.semitrans-lr_6 .note-dot.lr_6.color-20,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-20:before,
.semitrans-lr_7 .note-dot.lr_7.color-20,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-20:before,
.semitrans-lr_8 .note-dot.lr_8.color-20,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-20:before {
  color: rgba(0,255,0, 0.5);
  text-shadow: none;
}

.color-21, span.color-21:before {
  background-color: #01ffff;
  border-color: #01ffff !important;
  stroke: #01ffff !important;
  color: #01ffff;
  font-size: 20px;
}

line.color-21 {
  background-color: transparent;
  fill: #01ffff !important;
}

.fretlabel.color-21,
.rectangle.color-21 {
  background-color: rgba(1,255,255, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-21,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-21:before,
.semitrans-lr_2 .note-dot.lr_2.color-21,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-21:before,
.semitrans-lr_3 .note-dot.lr_3.color-21,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-21:before,
.semitrans-lr_4 .note-dot.lr_4.color-21,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-21:before,
.semitrans-lr_5 .note-dot.lr_5.color-21,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-21:before,
.semitrans-lr_6 .note-dot.lr_6.color-21,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-21:before,
.semitrans-lr_7 .note-dot.lr_7.color-21,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-21:before,
.semitrans-lr_8 .note-dot.lr_8.color-21,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-21:before {
  color: rgba(1,255,255, 0.5);
  text-shadow: none;
}

.color-22, span.color-22:before {
  background-color: blue;
  border-color: blue !important;
  stroke: blue !important;
  color: blue;
  font-size: 20px;
}

line.color-22 {
  background-color: transparent;
  fill: blue !important;
}

.fretlabel.color-22,
.rectangle.color-22 {
  background-color: rgba(0,0,255, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-22,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-22:before,
.semitrans-lr_2 .note-dot.lr_2.color-22,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-22:before,
.semitrans-lr_3 .note-dot.lr_3.color-22,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-22:before,
.semitrans-lr_4 .note-dot.lr_4.color-22,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-22:before,
.semitrans-lr_5 .note-dot.lr_5.color-22,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-22:before,
.semitrans-lr_6 .note-dot.lr_6.color-22,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-22:before,
.semitrans-lr_7 .note-dot.lr_7.color-22,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-22:before,
.semitrans-lr_8 .note-dot.lr_8.color-22,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-22:before {
  color: rgba(0,0,255, 0.5);
  text-shadow: none;
}

.color-23, span.color-23:before {
  background-color: #9900ff;
  border-color: #9900ff !important;
  stroke: #9900ff !important;
  color: #9900ff;
  font-size: 20px;
}

line.color-23 {
  background-color: transparent;
  fill: #9900ff !important;
}

.fretlabel.color-23,
.rectangle.color-23 {
  background-color: rgba(153,0,255, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-23,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-23:before,
.semitrans-lr_2 .note-dot.lr_2.color-23,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-23:before,
.semitrans-lr_3 .note-dot.lr_3.color-23,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-23:before,
.semitrans-lr_4 .note-dot.lr_4.color-23,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-23:before,
.semitrans-lr_5 .note-dot.lr_5.color-23,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-23:before,
.semitrans-lr_6 .note-dot.lr_6.color-23,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-23:before,
.semitrans-lr_7 .note-dot.lr_7.color-23,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-23:before,
.semitrans-lr_8 .note-dot.lr_8.color-23,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-23:before {
  color: rgba(153,0,255, 0.5);
  text-shadow: none;
}

.color-24, span.color-24:before {
  background-color: magenta;
  border-color: magenta !important;
  stroke: magenta !important;
  color: magenta;
  font-size: 20px;
}

line.color-24 {
  background-color: transparent;
  fill: magenta !important;
}

.fretlabel.color-24,
.rectangle.color-24 {
  background-color: rgba(255,0,255, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-24,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-24:before,
.semitrans-lr_2 .note-dot.lr_2.color-24,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-24:before,
.semitrans-lr_3 .note-dot.lr_3.color-24,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-24:before,
.semitrans-lr_4 .note-dot.lr_4.color-24,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-24:before,
.semitrans-lr_5 .note-dot.lr_5.color-24,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-24:before,
.semitrans-lr_6 .note-dot.lr_6.color-24,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-24:before,
.semitrans-lr_7 .note-dot.lr_7.color-24,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-24:before,
.semitrans-lr_8 .note-dot.lr_8.color-24,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-24:before {
  color: rgba(255,0,255, 0.5);
  text-shadow: none;
}

.color-25, span.color-25:before {
  background-color: #f4cccb;
  border-color: #f4cccb !important;
  stroke: #f4cccb !important;
  color: #f4cccb;
  font-size: 20px;
}

line.color-25 {
  background-color: transparent;
  fill: #f4cccb !important;
}

.fretlabel.color-25,
.rectangle.color-25 {
  background-color: rgba( 244,204,203, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-25,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-25:before,
.semitrans-lr_2 .note-dot.lr_2.color-25,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-25:before,
.semitrans-lr_3 .note-dot.lr_3.color-25,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-25:before,
.semitrans-lr_4 .note-dot.lr_4.color-25,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-25:before,
.semitrans-lr_5 .note-dot.lr_5.color-25,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-25:before,
.semitrans-lr_6 .note-dot.lr_6.color-25,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-25:before,
.semitrans-lr_7 .note-dot.lr_7.color-25,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-25:before,
.semitrans-lr_8 .note-dot.lr_8.color-25,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-25:before {
  color: rgba( 244,204,203, 0.5);
  text-shadow: none;
}

.color-26, span.color-26:before {
  background-color: #fce5cc;
  border-color: #fce5cc !important;
  stroke: #fce5cc !important;
  color: #fce5cc;
  font-size: 20px;
}

line.color-26 {
  background-color: transparent;
  fill: #fce5cc !important;
}

.fretlabel.color-26,
.rectangle.color-26 {
  background-color: rgba(252,229,204, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-26,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-26:before,
.semitrans-lr_2 .note-dot.lr_2.color-26,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-26:before,
.semitrans-lr_3 .note-dot.lr_3.color-26,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-26:before,
.semitrans-lr_4 .note-dot.lr_4.color-26,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-26:before,
.semitrans-lr_5 .note-dot.lr_5.color-26,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-26:before,
.semitrans-lr_6 .note-dot.lr_6.color-26,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-26:before,
.semitrans-lr_7 .note-dot.lr_7.color-26,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-26:before,
.semitrans-lr_8 .note-dot.lr_8.color-26,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-26:before {
  color: rgba(252,229,204, 0.5);
  text-shadow: none;
}

.color-27, span.color-27:before {
  background-color: #fef2cc;
  border-color: #fef2cc !important;
  stroke: #fef2cc !important;
  color: #fef2cc;
  font-size: 20px;
}

line.color-27 {
  background-color: transparent;
  fill: #fef2cc !important;
}

.fretlabel.color-27,
.rectangle.color-27 {
  background-color: rgba(254,242,204, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-27,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-27:before,
.semitrans-lr_2 .note-dot.lr_2.color-27,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-27:before,
.semitrans-lr_3 .note-dot.lr_3.color-27,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-27:before,
.semitrans-lr_4 .note-dot.lr_4.color-27,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-27:before,
.semitrans-lr_5 .note-dot.lr_5.color-27,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-27:before,
.semitrans-lr_6 .note-dot.lr_6.color-27,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-27:before,
.semitrans-lr_7 .note-dot.lr_7.color-27,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-27:before,
.semitrans-lr_8 .note-dot.lr_8.color-27,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-27:before {
  color: rgba(254,242,204, 0.5);
  text-shadow: none;
}

.color-28, span.color-28:before {
  background-color: #d8ead3;
  border-color: #d8ead3 !important;
  stroke: #d8ead3 !important;
  color: #d8ead3;
  font-size: 20px;
}

line.color-28 {
  background-color: transparent;
  fill: #d8ead3 !important;
}

.fretlabel.color-28,
.rectangle.color-28 {
  background-color: rgba(216,234,211, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-28,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-28:before,
.semitrans-lr_2 .note-dot.lr_2.color-28,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-28:before,
.semitrans-lr_3 .note-dot.lr_3.color-28,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-28:before,
.semitrans-lr_4 .note-dot.lr_4.color-28,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-28:before,
.semitrans-lr_5 .note-dot.lr_5.color-28,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-28:before,
.semitrans-lr_6 .note-dot.lr_6.color-28,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-28:before,
.semitrans-lr_7 .note-dot.lr_7.color-28,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-28:before,
.semitrans-lr_8 .note-dot.lr_8.color-28,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-28:before {
  color: rgba(216,234,211, 0.5);
  text-shadow: none;
}

.color-29, span.color-29:before {
  background-color: #cfe0e3;
  border-color: #cfe0e3 !important;
  stroke: #cfe0e3 !important;
  color: #cfe0e3;
  font-size: 20px;
}

line.color-29 {
  background-color: transparent;
  fill: #cfe0e3 !important;
}

.fretlabel.color-29,
.rectangle.color-29 {
  background-color: rgba(207,224,227, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-29,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-29:before,
.semitrans-lr_2 .note-dot.lr_2.color-29,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-29:before,
.semitrans-lr_3 .note-dot.lr_3.color-29,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-29:before,
.semitrans-lr_4 .note-dot.lr_4.color-29,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-29:before,
.semitrans-lr_5 .note-dot.lr_5.color-29,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-29:before,
.semitrans-lr_6 .note-dot.lr_6.color-29,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-29:before,
.semitrans-lr_7 .note-dot.lr_7.color-29,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-29:before,
.semitrans-lr_8 .note-dot.lr_8.color-29,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-29:before {
  color: rgba(207,224,227, 0.5);
  text-shadow: none;
}

.color-30, span.color-30:before {
  background-color: #cfe2f3;
  border-color: #cfe2f3 !important;
  stroke: #cfe2f3 !important;
  color: #cfe2f3;
  font-size: 20px;
}

line.color-30 {
  background-color: transparent;
  fill: #cfe2f3 !important;
}

.fretlabel.color-30,
.rectangle.color-30 {
  background-color: rgba( 207,226,243, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-30,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-30:before,
.semitrans-lr_2 .note-dot.lr_2.color-30,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-30:before,
.semitrans-lr_3 .note-dot.lr_3.color-30,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-30:before,
.semitrans-lr_4 .note-dot.lr_4.color-30,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-30:before,
.semitrans-lr_5 .note-dot.lr_5.color-30,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-30:before,
.semitrans-lr_6 .note-dot.lr_6.color-30,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-30:before,
.semitrans-lr_7 .note-dot.lr_7.color-30,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-30:before,
.semitrans-lr_8 .note-dot.lr_8.color-30,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-30:before {
  color: rgba( 207,226,243, 0.5);
  text-shadow: none;
}

.color-31, span.color-31:before {
  background-color: #d9d2e9;
  border-color: #d9d2e9 !important;
  stroke: #d9d2e9 !important;
  color: #d9d2e9;
  font-size: 20px;
}

line.color-31 {
  background-color: transparent;
  fill: #d9d2e9 !important;
}

.fretlabel.color-31,
.rectangle.color-31 {
  background-color: rgba(217,210,233, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-31,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-31:before,
.semitrans-lr_2 .note-dot.lr_2.color-31,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-31:before,
.semitrans-lr_3 .note-dot.lr_3.color-31,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-31:before,
.semitrans-lr_4 .note-dot.lr_4.color-31,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-31:before,
.semitrans-lr_5 .note-dot.lr_5.color-31,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-31:before,
.semitrans-lr_6 .note-dot.lr_6.color-31,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-31:before,
.semitrans-lr_7 .note-dot.lr_7.color-31,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-31:before,
.semitrans-lr_8 .note-dot.lr_8.color-31,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-31:before {
  color: rgba(217,210,233, 0.5);
  text-shadow: none;
}

.color-32, span.color-32:before {
  background-color: #ead1dc;
  border-color: #ead1dc !important;
  stroke: #ead1dc !important;
  color: #ead1dc;
  font-size: 20px;
}

line.color-32 {
  background-color: transparent;
  fill: #ead1dc !important;
}

.fretlabel.color-32,
.rectangle.color-32 {
  background-color: rgba(234,209,220, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-32,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-32:before,
.semitrans-lr_2 .note-dot.lr_2.color-32,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-32:before,
.semitrans-lr_3 .note-dot.lr_3.color-32,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-32:before,
.semitrans-lr_4 .note-dot.lr_4.color-32,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-32:before,
.semitrans-lr_5 .note-dot.lr_5.color-32,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-32:before,
.semitrans-lr_6 .note-dot.lr_6.color-32,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-32:before,
.semitrans-lr_7 .note-dot.lr_7.color-32,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-32:before,
.semitrans-lr_8 .note-dot.lr_8.color-32,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-32:before {
  color: rgba(234,209,220, 0.5);
  text-shadow: none;
}

.color-33, span.color-33:before {
  background-color: #ea9999;
  border-color: #ea9999 !important;
  stroke: #ea9999 !important;
  color: #ea9999;
  font-size: 20px;
}

line.color-33 {
  background-color: transparent;
  fill: #ea9999 !important;
}

.fretlabel.color-33,
.rectangle.color-33 {
  background-color: rgba(234,153,153, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-33,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-33:before,
.semitrans-lr_2 .note-dot.lr_2.color-33,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-33:before,
.semitrans-lr_3 .note-dot.lr_3.color-33,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-33:before,
.semitrans-lr_4 .note-dot.lr_4.color-33,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-33:before,
.semitrans-lr_5 .note-dot.lr_5.color-33,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-33:before,
.semitrans-lr_6 .note-dot.lr_6.color-33,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-33:before,
.semitrans-lr_7 .note-dot.lr_7.color-33,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-33:before,
.semitrans-lr_8 .note-dot.lr_8.color-33,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-33:before {
  color: rgba(234,153,153, 0.5);
  text-shadow: none;
}

.color-34, span.color-34:before {
  background-color: #f9cb9c;
  border-color: #f9cb9c !important;
  stroke: #f9cb9c !important;
  color: #f9cb9c;
  font-size: 20px;
}

line.color-34 {
  background-color: transparent;
  fill: #f9cb9c !important;
}

.fretlabel.color-34,
.rectangle.color-34 {
  background-color: rgba(249,203,156, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-34,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-34:before,
.semitrans-lr_2 .note-dot.lr_2.color-34,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-34:before,
.semitrans-lr_3 .note-dot.lr_3.color-34,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-34:before,
.semitrans-lr_4 .note-dot.lr_4.color-34,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-34:before,
.semitrans-lr_5 .note-dot.lr_5.color-34,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-34:before,
.semitrans-lr_6 .note-dot.lr_6.color-34,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-34:before,
.semitrans-lr_7 .note-dot.lr_7.color-34,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-34:before,
.semitrans-lr_8 .note-dot.lr_8.color-34,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-34:before {
  color: rgba(249,203,156, 0.5);
  text-shadow: none;
}

.color-35, span.color-35:before {
  background-color: #ffe599;
  border-color: #ffe599 !important;
  stroke: #ffe599 !important;
  color: #ffe599;
  font-size: 20px;
}

line.color-35 {
  background-color: transparent;
  fill: #ffe599 !important;
}

.fretlabel.color-35,
.rectangle.color-35 {
  background-color: rgba( 255,229,153, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-35,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-35:before,
.semitrans-lr_2 .note-dot.lr_2.color-35,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-35:before,
.semitrans-lr_3 .note-dot.lr_3.color-35,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-35:before,
.semitrans-lr_4 .note-dot.lr_4.color-35,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-35:before,
.semitrans-lr_5 .note-dot.lr_5.color-35,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-35:before,
.semitrans-lr_6 .note-dot.lr_6.color-35,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-35:before,
.semitrans-lr_7 .note-dot.lr_7.color-35,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-35:before,
.semitrans-lr_8 .note-dot.lr_8.color-35,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-35:before {
  color: rgba( 255,229,153, 0.5);
  text-shadow: none;
}

.color-36, span.color-36:before {
  background-color: #b6d6a8;
  border-color: #b6d6a8 !important;
  stroke: #b6d6a8 !important;
  color: #b6d6a8;
  font-size: 20px;
}

line.color-36 {
  background-color: transparent;
  fill: #b6d6a8 !important;
}

.fretlabel.color-36,
.rectangle.color-36 {
  background-color: rgba(182,214,168, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-36,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-36:before,
.semitrans-lr_2 .note-dot.lr_2.color-36,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-36:before,
.semitrans-lr_3 .note-dot.lr_3.color-36,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-36:before,
.semitrans-lr_4 .note-dot.lr_4.color-36,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-36:before,
.semitrans-lr_5 .note-dot.lr_5.color-36,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-36:before,
.semitrans-lr_6 .note-dot.lr_6.color-36,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-36:before,
.semitrans-lr_7 .note-dot.lr_7.color-36,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-36:before,
.semitrans-lr_8 .note-dot.lr_8.color-36,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-36:before {
  color: rgba(182,214,168, 0.5);
  text-shadow: none;
}

.color-37, span.color-37:before {
  background-color: #a2c4c8;
  border-color: #a2c4c8 !important;
  stroke: #a2c4c8 !important;
  color: #a2c4c8;
  font-size: 20px;
}

line.color-37 {
  background-color: transparent;
  fill: #a2c4c8 !important;
}

.fretlabel.color-37,
.rectangle.color-37 {
  background-color: rgba(162,196,200, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-37,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-37:before,
.semitrans-lr_2 .note-dot.lr_2.color-37,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-37:before,
.semitrans-lr_3 .note-dot.lr_3.color-37,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-37:before,
.semitrans-lr_4 .note-dot.lr_4.color-37,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-37:before,
.semitrans-lr_5 .note-dot.lr_5.color-37,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-37:before,
.semitrans-lr_6 .note-dot.lr_6.color-37,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-37:before,
.semitrans-lr_7 .note-dot.lr_7.color-37,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-37:before,
.semitrans-lr_8 .note-dot.lr_8.color-37,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-37:before {
  color: rgba(162,196,200, 0.5);
  text-shadow: none;
}

.color-38, span.color-38:before {
  background-color: #9fc5e8;
  border-color: #9fc5e8 !important;
  stroke: #9fc5e8 !important;
  color: #9fc5e8;
  font-size: 20px;
}

line.color-38 {
  background-color: transparent;
  fill: #9fc5e8 !important;
}

.fretlabel.color-38,
.rectangle.color-38 {
  background-color: rgba(159,197,232, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-38,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-38:before,
.semitrans-lr_2 .note-dot.lr_2.color-38,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-38:before,
.semitrans-lr_3 .note-dot.lr_3.color-38,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-38:before,
.semitrans-lr_4 .note-dot.lr_4.color-38,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-38:before,
.semitrans-lr_5 .note-dot.lr_5.color-38,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-38:before,
.semitrans-lr_6 .note-dot.lr_6.color-38,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-38:before,
.semitrans-lr_7 .note-dot.lr_7.color-38,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-38:before,
.semitrans-lr_8 .note-dot.lr_8.color-38,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-38:before {
  color: rgba(159,197,232, 0.5);
  text-shadow: none;
}

.color-39, span.color-39:before {
  background-color: #b4a6d6;
  border-color: #b4a6d6 !important;
  stroke: #b4a6d6 !important;
  color: #b4a6d6;
  font-size: 20px;
}

line.color-39 {
  background-color: transparent;
  fill: #b4a6d6 !important;
}

.fretlabel.color-39,
.rectangle.color-39 {
  background-color: rgba(180,166,214, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-39,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-39:before,
.semitrans-lr_2 .note-dot.lr_2.color-39,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-39:before,
.semitrans-lr_3 .note-dot.lr_3.color-39,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-39:before,
.semitrans-lr_4 .note-dot.lr_4.color-39,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-39:before,
.semitrans-lr_5 .note-dot.lr_5.color-39,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-39:before,
.semitrans-lr_6 .note-dot.lr_6.color-39,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-39:before,
.semitrans-lr_7 .note-dot.lr_7.color-39,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-39:before,
.semitrans-lr_8 .note-dot.lr_8.color-39,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-39:before {
  color: rgba(180,166,214, 0.5);
  text-shadow: none;
}

.color-40, span.color-40:before {
  background-color: #d5a6bc;
  border-color: #d5a6bc !important;
  stroke: #d5a6bc !important;
  color: #d5a6bc;
  font-size: 20px;
}

line.color-40 {
  background-color: transparent;
  fill: #d5a6bc !important;
}

.fretlabel.color-40,
.rectangle.color-40 {
  background-color: rgba( 213,166,188, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-40,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-40:before,
.semitrans-lr_2 .note-dot.lr_2.color-40,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-40:before,
.semitrans-lr_3 .note-dot.lr_3.color-40,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-40:before,
.semitrans-lr_4 .note-dot.lr_4.color-40,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-40:before,
.semitrans-lr_5 .note-dot.lr_5.color-40,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-40:before,
.semitrans-lr_6 .note-dot.lr_6.color-40,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-40:before,
.semitrans-lr_7 .note-dot.lr_7.color-40,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-40:before,
.semitrans-lr_8 .note-dot.lr_8.color-40,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-40:before {
  color: rgba( 213,166,188, 0.5);
  text-shadow: none;
}

.color-41, span.color-41:before {
  background-color: #df6666;
  border-color: #df6666 !important;
  stroke: #df6666 !important;
  color: #df6666;
  font-size: 20px;
}

line.color-41 {
  background-color: transparent;
  fill: #df6666 !important;
}

.fretlabel.color-41,
.rectangle.color-41 {
  background-color: rgba(223,102,102, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-41,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-41:before,
.semitrans-lr_2 .note-dot.lr_2.color-41,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-41:before,
.semitrans-lr_3 .note-dot.lr_3.color-41,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-41:before,
.semitrans-lr_4 .note-dot.lr_4.color-41,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-41:before,
.semitrans-lr_5 .note-dot.lr_5.color-41,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-41:before,
.semitrans-lr_6 .note-dot.lr_6.color-41,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-41:before,
.semitrans-lr_7 .note-dot.lr_7.color-41,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-41:before,
.semitrans-lr_8 .note-dot.lr_8.color-41,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-41:before {
  color: rgba(223,102,102, 0.5);
  text-shadow: none;
}

.color-42, span.color-42:before {
  background-color: #f6b26b;
  border-color: #f6b26b !important;
  stroke: #f6b26b !important;
  color: #f6b26b;
  font-size: 20px;
}

line.color-42 {
  background-color: transparent;
  fill: #f6b26b !important;
}

.fretlabel.color-42,
.rectangle.color-42 {
  background-color: rgba(246,178,107, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-42,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-42:before,
.semitrans-lr_2 .note-dot.lr_2.color-42,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-42:before,
.semitrans-lr_3 .note-dot.lr_3.color-42,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-42:before,
.semitrans-lr_4 .note-dot.lr_4.color-42,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-42:before,
.semitrans-lr_5 .note-dot.lr_5.color-42,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-42:before,
.semitrans-lr_6 .note-dot.lr_6.color-42,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-42:before,
.semitrans-lr_7 .note-dot.lr_7.color-42,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-42:before,
.semitrans-lr_8 .note-dot.lr_8.color-42,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-42:before {
  color: rgba(246,178,107, 0.5);
  text-shadow: none;
}

.color-43, span.color-43:before {
  background-color: #ffd967;
  border-color: #ffd967 !important;
  stroke: #ffd967 !important;
  color: #ffd967;
  font-size: 20px;
}

line.color-43 {
  background-color: transparent;
  fill: #ffd967 !important;
}

.fretlabel.color-43,
.rectangle.color-43 {
  background-color: rgba(255,217,103, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-43,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-43:before,
.semitrans-lr_2 .note-dot.lr_2.color-43,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-43:before,
.semitrans-lr_3 .note-dot.lr_3.color-43,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-43:before,
.semitrans-lr_4 .note-dot.lr_4.color-43,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-43:before,
.semitrans-lr_5 .note-dot.lr_5.color-43,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-43:before,
.semitrans-lr_6 .note-dot.lr_6.color-43,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-43:before,
.semitrans-lr_7 .note-dot.lr_7.color-43,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-43:before,
.semitrans-lr_8 .note-dot.lr_8.color-43,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-43:before {
  color: rgba(255,217,103, 0.5);
  text-shadow: none;
}

.color-44, span.color-44:before {
  background-color: #93c47d;
  border-color: #93c47d !important;
  stroke: #93c47d !important;
  color: #93c47d;
  font-size: 20px;
}

line.color-44 {
  background-color: transparent;
  fill: #93c47d !important;
}

.fretlabel.color-44,
.rectangle.color-44 {
  background-color: rgba(147,196,125, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-44,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-44:before,
.semitrans-lr_2 .note-dot.lr_2.color-44,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-44:before,
.semitrans-lr_3 .note-dot.lr_3.color-44,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-44:before,
.semitrans-lr_4 .note-dot.lr_4.color-44,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-44:before,
.semitrans-lr_5 .note-dot.lr_5.color-44,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-44:before,
.semitrans-lr_6 .note-dot.lr_6.color-44,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-44:before,
.semitrans-lr_7 .note-dot.lr_7.color-44,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-44:before,
.semitrans-lr_8 .note-dot.lr_8.color-44,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-44:before {
  color: rgba(147,196,125, 0.5);
  text-shadow: none;
}

.color-45, span.color-45:before {
  background-color: #76a5af;
  border-color: #76a5af !important;
  stroke: #76a5af !important;
  color: #76a5af;
  font-size: 20px;
}

line.color-45 {
  background-color: transparent;
  fill: #76a5af !important;
}

.fretlabel.color-45,
.rectangle.color-45 {
  background-color: rgba( 118,165,175, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-45,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-45:before,
.semitrans-lr_2 .note-dot.lr_2.color-45,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-45:before,
.semitrans-lr_3 .note-dot.lr_3.color-45,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-45:before,
.semitrans-lr_4 .note-dot.lr_4.color-45,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-45:before,
.semitrans-lr_5 .note-dot.lr_5.color-45,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-45:before,
.semitrans-lr_6 .note-dot.lr_6.color-45,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-45:before,
.semitrans-lr_7 .note-dot.lr_7.color-45,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-45:before,
.semitrans-lr_8 .note-dot.lr_8.color-45,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-45:before {
  color: rgba( 118,165,175, 0.5);
  text-shadow: none;
}

.color-46, span.color-46:before {
  background-color: #6fa8db;
  border-color: #6fa8db !important;
  stroke: #6fa8db !important;
  color: #6fa8db;
  font-size: 20px;
}

line.color-46 {
  background-color: transparent;
  fill: #6fa8db !important;
}

.fretlabel.color-46,
.rectangle.color-46 {
  background-color: rgba(111,168,219, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-46,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-46:before,
.semitrans-lr_2 .note-dot.lr_2.color-46,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-46:before,
.semitrans-lr_3 .note-dot.lr_3.color-46,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-46:before,
.semitrans-lr_4 .note-dot.lr_4.color-46,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-46:before,
.semitrans-lr_5 .note-dot.lr_5.color-46,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-46:before,
.semitrans-lr_6 .note-dot.lr_6.color-46,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-46:before,
.semitrans-lr_7 .note-dot.lr_7.color-46,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-46:before,
.semitrans-lr_8 .note-dot.lr_8.color-46,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-46:before {
  color: rgba(111,168,219, 0.5);
  text-shadow: none;
}

.color-47, span.color-47:before {
  background-color: #8e7cc2;
  border-color: #8e7cc2 !important;
  stroke: #8e7cc2 !important;
  color: #8e7cc2;
  font-size: 20px;
}

line.color-47 {
  background-color: transparent;
  fill: #8e7cc2 !important;
}

.fretlabel.color-47,
.rectangle.color-47 {
  background-color: rgba(142,124,194, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-47,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-47:before,
.semitrans-lr_2 .note-dot.lr_2.color-47,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-47:before,
.semitrans-lr_3 .note-dot.lr_3.color-47,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-47:before,
.semitrans-lr_4 .note-dot.lr_4.color-47,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-47:before,
.semitrans-lr_5 .note-dot.lr_5.color-47,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-47:before,
.semitrans-lr_6 .note-dot.lr_6.color-47,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-47:before,
.semitrans-lr_7 .note-dot.lr_7.color-47,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-47:before,
.semitrans-lr_8 .note-dot.lr_8.color-47,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-47:before {
  color: rgba(142,124,194, 0.5);
  text-shadow: none;
}

.color-48, span.color-48:before {
  background-color: #c17ba0;
  border-color: #c17ba0 !important;
  stroke: #c17ba0 !important;
  color: #c17ba0;
  font-size: 20px;
}

line.color-48 {
  background-color: transparent;
  fill: #c17ba0 !important;
}

.fretlabel.color-48,
.rectangle.color-48 {
  background-color: rgba(193,123,160, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-48,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-48:before,
.semitrans-lr_2 .note-dot.lr_2.color-48,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-48:before,
.semitrans-lr_3 .note-dot.lr_3.color-48,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-48:before,
.semitrans-lr_4 .note-dot.lr_4.color-48,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-48:before,
.semitrans-lr_5 .note-dot.lr_5.color-48,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-48:before,
.semitrans-lr_6 .note-dot.lr_6.color-48,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-48:before,
.semitrans-lr_7 .note-dot.lr_7.color-48,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-48:before,
.semitrans-lr_8 .note-dot.lr_8.color-48,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-48:before {
  color: rgba(193,123,160, 0.5);
  text-shadow: none;
}

.color-49, span.color-49:before {
  background-color: #cc0000;
  border-color: #cc0000 !important;
  stroke: #cc0000 !important;
  color: #cc0000;
  font-size: 20px;
}

line.color-49 {
  background-color: transparent;
  fill: #cc0000 !important;
}

.fretlabel.color-49,
.rectangle.color-49 {
  background-color: rgba(204,0,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-49,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-49:before,
.semitrans-lr_2 .note-dot.lr_2.color-49,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-49:before,
.semitrans-lr_3 .note-dot.lr_3.color-49,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-49:before,
.semitrans-lr_4 .note-dot.lr_4.color-49,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-49:before,
.semitrans-lr_5 .note-dot.lr_5.color-49,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-49:before,
.semitrans-lr_6 .note-dot.lr_6.color-49,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-49:before,
.semitrans-lr_7 .note-dot.lr_7.color-49,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-49:before,
.semitrans-lr_8 .note-dot.lr_8.color-49,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-49:before {
  color: rgba(204,0,0, 0.5);
  text-shadow: none;
}

.color-50, span.color-50:before {
  background-color: #e69138;
  border-color: #e69138 !important;
  stroke: #e69138 !important;
  color: #e69138;
  font-size: 20px;
}

line.color-50 {
  background-color: transparent;
  fill: #e69138 !important;
}

.fretlabel.color-50,
.rectangle.color-50 {
  background-color: rgba( 230,145,56, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-50,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-50:before,
.semitrans-lr_2 .note-dot.lr_2.color-50,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-50:before,
.semitrans-lr_3 .note-dot.lr_3.color-50,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-50:before,
.semitrans-lr_4 .note-dot.lr_4.color-50,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-50:before,
.semitrans-lr_5 .note-dot.lr_5.color-50,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-50:before,
.semitrans-lr_6 .note-dot.lr_6.color-50,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-50:before,
.semitrans-lr_7 .note-dot.lr_7.color-50,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-50:before,
.semitrans-lr_8 .note-dot.lr_8.color-50,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-50:before {
  color: rgba( 230,145,56, 0.5);
  text-shadow: none;
}

.color-51, span.color-51:before {
  background-color: #f1c231;
  border-color: #f1c231 !important;
  stroke: #f1c231 !important;
  color: #f1c231;
  font-size: 20px;
}

line.color-51 {
  background-color: transparent;
  fill: #f1c231 !important;
}

.fretlabel.color-51,
.rectangle.color-51 {
  background-color: rgba(241,194,49, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-51,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-51:before,
.semitrans-lr_2 .note-dot.lr_2.color-51,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-51:before,
.semitrans-lr_3 .note-dot.lr_3.color-51,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-51:before,
.semitrans-lr_4 .note-dot.lr_4.color-51,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-51:before,
.semitrans-lr_5 .note-dot.lr_5.color-51,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-51:before,
.semitrans-lr_6 .note-dot.lr_6.color-51,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-51:before,
.semitrans-lr_7 .note-dot.lr_7.color-51,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-51:before,
.semitrans-lr_8 .note-dot.lr_8.color-51,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-51:before {
  color: rgba(241,194,49, 0.5);
  text-shadow: none;
}

.color-52, span.color-52:before {
  background-color: #6aa84f;
  border-color: #6aa84f !important;
  stroke: #6aa84f !important;
  color: #6aa84f;
  font-size: 20px;
}

line.color-52 {
  background-color: transparent;
  fill: #6aa84f !important;
}

.fretlabel.color-52,
.rectangle.color-52 {
  background-color: rgba(106,168,79, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-52,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-52:before,
.semitrans-lr_2 .note-dot.lr_2.color-52,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-52:before,
.semitrans-lr_3 .note-dot.lr_3.color-52,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-52:before,
.semitrans-lr_4 .note-dot.lr_4.color-52,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-52:before,
.semitrans-lr_5 .note-dot.lr_5.color-52,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-52:before,
.semitrans-lr_6 .note-dot.lr_6.color-52,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-52:before,
.semitrans-lr_7 .note-dot.lr_7.color-52,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-52:before,
.semitrans-lr_8 .note-dot.lr_8.color-52,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-52:before {
  color: rgba(106,168,79, 0.5);
  text-shadow: none;
}

.color-53, span.color-53:before {
  background-color: #45818e;
  border-color: #45818e !important;
  stroke: #45818e !important;
  color: #45818e;
  font-size: 20px;
}

line.color-53 {
  background-color: transparent;
  fill: #45818e !important;
}

.fretlabel.color-53,
.rectangle.color-53 {
  background-color: rgba(69,129,142, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-53,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-53:before,
.semitrans-lr_2 .note-dot.lr_2.color-53,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-53:before,
.semitrans-lr_3 .note-dot.lr_3.color-53,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-53:before,
.semitrans-lr_4 .note-dot.lr_4.color-53,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-53:before,
.semitrans-lr_5 .note-dot.lr_5.color-53,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-53:before,
.semitrans-lr_6 .note-dot.lr_6.color-53,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-53:before,
.semitrans-lr_7 .note-dot.lr_7.color-53,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-53:before,
.semitrans-lr_8 .note-dot.lr_8.color-53,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-53:before {
  color: rgba(69,129,142, 0.5);
  text-shadow: none;
}

.color-54, span.color-54:before {
  background-color: #3d85c6;
  border-color: #3d85c6 !important;
  stroke: #3d85c6 !important;
  color: #3d85c6;
  font-size: 20px;
}

line.color-54 {
  background-color: transparent;
  fill: #3d85c6 !important;
}

.fretlabel.color-54,
.rectangle.color-54 {
  background-color: rgba(61,133,198, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-54,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-54:before,
.semitrans-lr_2 .note-dot.lr_2.color-54,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-54:before,
.semitrans-lr_3 .note-dot.lr_3.color-54,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-54:before,
.semitrans-lr_4 .note-dot.lr_4.color-54,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-54:before,
.semitrans-lr_5 .note-dot.lr_5.color-54,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-54:before,
.semitrans-lr_6 .note-dot.lr_6.color-54,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-54:before,
.semitrans-lr_7 .note-dot.lr_7.color-54,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-54:before,
.semitrans-lr_8 .note-dot.lr_8.color-54,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-54:before {
  color: rgba(61,133,198, 0.5);
  text-shadow: none;
}

.color-55, span.color-55:before {
  background-color: #674ea7;
  border-color: #674ea7 !important;
  stroke: #674ea7 !important;
  color: #674ea7;
  font-size: 20px;
}

line.color-55 {
  background-color: transparent;
  fill: #674ea7 !important;
}

.fretlabel.color-55,
.rectangle.color-55 {
  background-color: rgba( 103,78,167, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-55,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-55:before,
.semitrans-lr_2 .note-dot.lr_2.color-55,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-55:before,
.semitrans-lr_3 .note-dot.lr_3.color-55,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-55:before,
.semitrans-lr_4 .note-dot.lr_4.color-55,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-55:before,
.semitrans-lr_5 .note-dot.lr_5.color-55,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-55:before,
.semitrans-lr_6 .note-dot.lr_6.color-55,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-55:before,
.semitrans-lr_7 .note-dot.lr_7.color-55,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-55:before,
.semitrans-lr_8 .note-dot.lr_8.color-55,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-55:before {
  color: rgba( 103,78,167, 0.5);
  text-shadow: none;
}

.color-56, span.color-56:before {
  background-color: #a64d79;
  border-color: #a64d79 !important;
  stroke: #a64d79 !important;
  color: #a64d79;
  font-size: 20px;
}

line.color-56 {
  background-color: transparent;
  fill: #a64d79 !important;
}

.fretlabel.color-56,
.rectangle.color-56 {
  background-color: rgba(166,77,121, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-56,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-56:before,
.semitrans-lr_2 .note-dot.lr_2.color-56,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-56:before,
.semitrans-lr_3 .note-dot.lr_3.color-56,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-56:before,
.semitrans-lr_4 .note-dot.lr_4.color-56,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-56:before,
.semitrans-lr_5 .note-dot.lr_5.color-56,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-56:before,
.semitrans-lr_6 .note-dot.lr_6.color-56,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-56:before,
.semitrans-lr_7 .note-dot.lr_7.color-56,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-56:before,
.semitrans-lr_8 .note-dot.lr_8.color-56,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-56:before {
  color: rgba(166,77,121, 0.5);
  text-shadow: none;
}

.color-57, span.color-57:before {
  background-color: #990000;
  border-color: #990000 !important;
  stroke: #990000 !important;
  color: #990000;
  font-size: 20px;
}

line.color-57 {
  background-color: transparent;
  fill: #990000 !important;
}

.fretlabel.color-57,
.rectangle.color-57 {
  background-color: rgba(153,0,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-57,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-57:before,
.semitrans-lr_2 .note-dot.lr_2.color-57,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-57:before,
.semitrans-lr_3 .note-dot.lr_3.color-57,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-57:before,
.semitrans-lr_4 .note-dot.lr_4.color-57,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-57:before,
.semitrans-lr_5 .note-dot.lr_5.color-57,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-57:before,
.semitrans-lr_6 .note-dot.lr_6.color-57,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-57:before,
.semitrans-lr_7 .note-dot.lr_7.color-57,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-57:before,
.semitrans-lr_8 .note-dot.lr_8.color-57,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-57:before {
  color: rgba(153,0,0, 0.5);
  text-shadow: none;
}

.color-58, span.color-58:before {
  background-color: #b45f07;
  border-color: #b45f07 !important;
  stroke: #b45f07 !important;
  color: #b45f07;
  font-size: 20px;
}

line.color-58 {
  background-color: transparent;
  fill: #b45f07 !important;
}

.fretlabel.color-58,
.rectangle.color-58 {
  background-color: rgba(180,95,7, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-58,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-58:before,
.semitrans-lr_2 .note-dot.lr_2.color-58,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-58:before,
.semitrans-lr_3 .note-dot.lr_3.color-58,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-58:before,
.semitrans-lr_4 .note-dot.lr_4.color-58,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-58:before,
.semitrans-lr_5 .note-dot.lr_5.color-58,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-58:before,
.semitrans-lr_6 .note-dot.lr_6.color-58,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-58:before,
.semitrans-lr_7 .note-dot.lr_7.color-58,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-58:before,
.semitrans-lr_8 .note-dot.lr_8.color-58,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-58:before {
  color: rgba(180,95,7, 0.5);
  text-shadow: none;
}

.color-59, span.color-59:before {
  background-color: #be9000;
  border-color: #be9000 !important;
  stroke: #be9000 !important;
  color: #be9000;
  font-size: 20px;
}

line.color-59 {
  background-color: transparent;
  fill: #be9000 !important;
}

.fretlabel.color-59,
.rectangle.color-59 {
  background-color: rgba(190,144,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-59,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-59:before,
.semitrans-lr_2 .note-dot.lr_2.color-59,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-59:before,
.semitrans-lr_3 .note-dot.lr_3.color-59,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-59:before,
.semitrans-lr_4 .note-dot.lr_4.color-59,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-59:before,
.semitrans-lr_5 .note-dot.lr_5.color-59,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-59:before,
.semitrans-lr_6 .note-dot.lr_6.color-59,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-59:before,
.semitrans-lr_7 .note-dot.lr_7.color-59,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-59:before,
.semitrans-lr_8 .note-dot.lr_8.color-59,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-59:before {
  color: rgba(190,144,0, 0.5);
  text-shadow: none;
}

.color-60, span.color-60:before {
  background-color: #37761d;
  border-color: #37761d !important;
  stroke: #37761d !important;
  color: #37761d;
  font-size: 20px;
}

line.color-60 {
  background-color: transparent;
  fill: #37761d !important;
}

.fretlabel.color-60,
.rectangle.color-60 {
  background-color: rgba(55,118,29, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-60,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-60:before,
.semitrans-lr_2 .note-dot.lr_2.color-60,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-60:before,
.semitrans-lr_3 .note-dot.lr_3.color-60,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-60:before,
.semitrans-lr_4 .note-dot.lr_4.color-60,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-60:before,
.semitrans-lr_5 .note-dot.lr_5.color-60,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-60:before,
.semitrans-lr_6 .note-dot.lr_6.color-60,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-60:before,
.semitrans-lr_7 .note-dot.lr_7.color-60,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-60:before,
.semitrans-lr_8 .note-dot.lr_8.color-60,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-60:before {
  color: rgba(55,118,29, 0.5);
  text-shadow: none;
}

.color-61, span.color-61:before {
  background-color: #134f5c;
  border-color: #134f5c !important;
  stroke: #134f5c !important;
  color: #134f5c;
  font-size: 20px;
}

line.color-61 {
  background-color: transparent;
  fill: #134f5c !important;
}

.fretlabel.color-61,
.rectangle.color-61 {
  background-color: rgba( 19,79,92, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-61,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-61:before,
.semitrans-lr_2 .note-dot.lr_2.color-61,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-61:before,
.semitrans-lr_3 .note-dot.lr_3.color-61,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-61:before,
.semitrans-lr_4 .note-dot.lr_4.color-61,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-61:before,
.semitrans-lr_5 .note-dot.lr_5.color-61,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-61:before,
.semitrans-lr_6 .note-dot.lr_6.color-61,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-61:before,
.semitrans-lr_7 .note-dot.lr_7.color-61,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-61:before,
.semitrans-lr_8 .note-dot.lr_8.color-61,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-61:before {
  color: rgba( 19,79,92, 0.5);
  text-shadow: none;
}

.color-62, span.color-62:before {
  background-color: #0c5394;
  border-color: #0c5394 !important;
  stroke: #0c5394 !important;
  color: #0c5394;
  font-size: 20px;
}

line.color-62 {
  background-color: transparent;
  fill: #0c5394 !important;
}

.fretlabel.color-62,
.rectangle.color-62 {
  background-color: rgba(12,83,148, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-62,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-62:before,
.semitrans-lr_2 .note-dot.lr_2.color-62,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-62:before,
.semitrans-lr_3 .note-dot.lr_3.color-62,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-62:before,
.semitrans-lr_4 .note-dot.lr_4.color-62,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-62:before,
.semitrans-lr_5 .note-dot.lr_5.color-62,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-62:before,
.semitrans-lr_6 .note-dot.lr_6.color-62,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-62:before,
.semitrans-lr_7 .note-dot.lr_7.color-62,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-62:before,
.semitrans-lr_8 .note-dot.lr_8.color-62,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-62:before {
  color: rgba(12,83,148, 0.5);
  text-shadow: none;
}

.color-63, span.color-63:before {
  background-color: #351b75;
  border-color: #351b75 !important;
  stroke: #351b75 !important;
  color: #351b75;
  font-size: 20px;
}

line.color-63 {
  background-color: transparent;
  fill: #351b75 !important;
}

.fretlabel.color-63,
.rectangle.color-63 {
  background-color: rgba(53,27,117, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-63,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-63:before,
.semitrans-lr_2 .note-dot.lr_2.color-63,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-63:before,
.semitrans-lr_3 .note-dot.lr_3.color-63,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-63:before,
.semitrans-lr_4 .note-dot.lr_4.color-63,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-63:before,
.semitrans-lr_5 .note-dot.lr_5.color-63,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-63:before,
.semitrans-lr_6 .note-dot.lr_6.color-63,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-63:before,
.semitrans-lr_7 .note-dot.lr_7.color-63,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-63:before,
.semitrans-lr_8 .note-dot.lr_8.color-63,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-63:before {
  color: rgba(53,27,117, 0.5);
  text-shadow: none;
}

.color-64, span.color-64:before {
  background-color: #741a47;
  border-color: #741a47 !important;
  stroke: #741a47 !important;
  color: #741a47;
  font-size: 20px;
}

line.color-64 {
  background-color: transparent;
  fill: #741a47 !important;
}

.fretlabel.color-64,
.rectangle.color-64 {
  background-color: rgba(116,26,71, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-64,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-64:before,
.semitrans-lr_2 .note-dot.lr_2.color-64,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-64:before,
.semitrans-lr_3 .note-dot.lr_3.color-64,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-64:before,
.semitrans-lr_4 .note-dot.lr_4.color-64,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-64:before,
.semitrans-lr_5 .note-dot.lr_5.color-64,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-64:before,
.semitrans-lr_6 .note-dot.lr_6.color-64,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-64:before,
.semitrans-lr_7 .note-dot.lr_7.color-64,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-64:before,
.semitrans-lr_8 .note-dot.lr_8.color-64,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-64:before {
  color: rgba(116,26,71, 0.5);
  text-shadow: none;
}

.color-65, span.color-65:before {
  background-color: #660000;
  border-color: #660000 !important;
  stroke: #660000 !important;
  color: #660000;
  font-size: 20px;
}

line.color-65 {
  background-color: transparent;
  fill: #660000 !important;
}

.fretlabel.color-65,
.rectangle.color-65 {
  background-color: rgba(102,0,0, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-65,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-65:before,
.semitrans-lr_2 .note-dot.lr_2.color-65,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-65:before,
.semitrans-lr_3 .note-dot.lr_3.color-65,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-65:before,
.semitrans-lr_4 .note-dot.lr_4.color-65,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-65:before,
.semitrans-lr_5 .note-dot.lr_5.color-65,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-65:before,
.semitrans-lr_6 .note-dot.lr_6.color-65,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-65:before,
.semitrans-lr_7 .note-dot.lr_7.color-65,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-65:before,
.semitrans-lr_8 .note-dot.lr_8.color-65,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-65:before {
  color: rgba(102,0,0, 0.5);
  text-shadow: none;
}

.color-66, span.color-66:before {
  background-color: #783f04;
  border-color: #783f04 !important;
  stroke: #783f04 !important;
  color: #783f04;
  font-size: 20px;
}

line.color-66 {
  background-color: transparent;
  fill: #783f04 !important;
}

.fretlabel.color-66,
.rectangle.color-66 {
  background-color: rgba(120,63,4, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-66,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-66:before,
.semitrans-lr_2 .note-dot.lr_2.color-66,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-66:before,
.semitrans-lr_3 .note-dot.lr_3.color-66,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-66:before,
.semitrans-lr_4 .note-dot.lr_4.color-66,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-66:before,
.semitrans-lr_5 .note-dot.lr_5.color-66,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-66:before,
.semitrans-lr_6 .note-dot.lr_6.color-66,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-66:before,
.semitrans-lr_7 .note-dot.lr_7.color-66,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-66:before,
.semitrans-lr_8 .note-dot.lr_8.color-66,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-66:before {
  color: rgba(120,63,4, 0.5);
  text-shadow: none;
}

.color-67, span.color-67:before {
  background-color: #7f6001;
  border-color: #7f6001 !important;
  stroke: #7f6001 !important;
  color: #7f6001;
  font-size: 20px;
}

line.color-67 {
  background-color: transparent;
  fill: #7f6001 !important;
}

.fretlabel.color-67,
.rectangle.color-67 {
  background-color: rgba( 127,96,1, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-67,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-67:before,
.semitrans-lr_2 .note-dot.lr_2.color-67,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-67:before,
.semitrans-lr_3 .note-dot.lr_3.color-67,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-67:before,
.semitrans-lr_4 .note-dot.lr_4.color-67,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-67:before,
.semitrans-lr_5 .note-dot.lr_5.color-67,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-67:before,
.semitrans-lr_6 .note-dot.lr_6.color-67,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-67:before,
.semitrans-lr_7 .note-dot.lr_7.color-67,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-67:before,
.semitrans-lr_8 .note-dot.lr_8.color-67,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-67:before {
  color: rgba( 127,96,1, 0.5);
  text-shadow: none;
}

.color-68, span.color-68:before {
  background-color: #264e13;
  border-color: #264e13 !important;
  stroke: #264e13 !important;
  color: #264e13;
  font-size: 20px;
}

line.color-68 {
  background-color: transparent;
  fill: #264e13 !important;
}

.fretlabel.color-68,
.rectangle.color-68 {
  background-color: rgba(38,78,19, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-68,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-68:before,
.semitrans-lr_2 .note-dot.lr_2.color-68,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-68:before,
.semitrans-lr_3 .note-dot.lr_3.color-68,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-68:before,
.semitrans-lr_4 .note-dot.lr_4.color-68,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-68:before,
.semitrans-lr_5 .note-dot.lr_5.color-68,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-68:before,
.semitrans-lr_6 .note-dot.lr_6.color-68,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-68:before,
.semitrans-lr_7 .note-dot.lr_7.color-68,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-68:before,
.semitrans-lr_8 .note-dot.lr_8.color-68,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-68:before {
  color: rgba(38,78,19, 0.5);
  text-shadow: none;
}

.color-69, span.color-69:before {
  background-color: #0c343d;
  border-color: #0c343d !important;
  stroke: #0c343d !important;
  color: #0c343d;
  font-size: 20px;
}

line.color-69 {
  background-color: transparent;
  fill: #0c343d !important;
}

.fretlabel.color-69,
.rectangle.color-69 {
  background-color: rgba(12,52,61, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-69,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-69:before,
.semitrans-lr_2 .note-dot.lr_2.color-69,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-69:before,
.semitrans-lr_3 .note-dot.lr_3.color-69,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-69:before,
.semitrans-lr_4 .note-dot.lr_4.color-69,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-69:before,
.semitrans-lr_5 .note-dot.lr_5.color-69,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-69:before,
.semitrans-lr_6 .note-dot.lr_6.color-69,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-69:before,
.semitrans-lr_7 .note-dot.lr_7.color-69,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-69:before,
.semitrans-lr_8 .note-dot.lr_8.color-69,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-69:before {
  color: rgba(12,52,61, 0.5);
  text-shadow: none;
}

.color-70, span.color-70:before {
  background-color: #073763;
  border-color: #073763 !important;
  stroke: #073763 !important;
  color: #073763;
  font-size: 20px;
}

line.color-70 {
  background-color: transparent;
  fill: #073763 !important;
}

.fretlabel.color-70,
.rectangle.color-70 {
  background-color: rgba(7,55,99, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-70,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-70:before,
.semitrans-lr_2 .note-dot.lr_2.color-70,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-70:before,
.semitrans-lr_3 .note-dot.lr_3.color-70,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-70:before,
.semitrans-lr_4 .note-dot.lr_4.color-70,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-70:before,
.semitrans-lr_5 .note-dot.lr_5.color-70,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-70:before,
.semitrans-lr_6 .note-dot.lr_6.color-70,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-70:before,
.semitrans-lr_7 .note-dot.lr_7.color-70,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-70:before,
.semitrans-lr_8 .note-dot.lr_8.color-70,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-70:before {
  color: rgba(7,55,99, 0.5);
  text-shadow: none;
}

.color-71, span.color-71:before {
  background-color: #20124d;
  border-color: #20124d !important;
  stroke: #20124d !important;
  color: #20124d;
  font-size: 20px;
}

line.color-71 {
  background-color: transparent;
  fill: #20124d !important;
}

.fretlabel.color-71,
.rectangle.color-71 {
  background-color: rgba(32,18,77, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-71,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-71:before,
.semitrans-lr_2 .note-dot.lr_2.color-71,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-71:before,
.semitrans-lr_3 .note-dot.lr_3.color-71,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-71:before,
.semitrans-lr_4 .note-dot.lr_4.color-71,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-71:before,
.semitrans-lr_5 .note-dot.lr_5.color-71,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-71:before,
.semitrans-lr_6 .note-dot.lr_6.color-71,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-71:before,
.semitrans-lr_7 .note-dot.lr_7.color-71,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-71:before,
.semitrans-lr_8 .note-dot.lr_8.color-71,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-71:before {
  color: rgba(32,18,77, 0.5);
  text-shadow: none;
}

.color-72, span.color-72:before {
  background-color: #4c112f;
  border-color: #4c112f !important;
  stroke: #4c112f !important;
  color: #4c112f;
  font-size: 20px;
}

line.color-72 {
  background-color: transparent;
  fill: #4c112f !important;
}

.fretlabel.color-72,
.rectangle.color-72 {
  background-color: rgba(76,17,47, 0.3);
}

.semitrans-lr_1 .note-dot.lr_1.color-72,
.semitrans-lr_1 .note-dot.lr_1 .splitter span.color-72:before,
.semitrans-lr_2 .note-dot.lr_2.color-72,
.semitrans-lr_2 .note-dot.lr_2 .splitter span.color-72:before,
.semitrans-lr_3 .note-dot.lr_3.color-72,
.semitrans-lr_3 .note-dot.lr_3 .splitter span.color-72:before,
.semitrans-lr_4 .note-dot.lr_4.color-72,
.semitrans-lr_4 .note-dot.lr_4 .splitter span.color-72:before,
.semitrans-lr_5 .note-dot.lr_5.color-72,
.semitrans-lr_5 .note-dot.lr_5 .splitter span.color-72:before,
.semitrans-lr_6 .note-dot.lr_6.color-72,
.semitrans-lr_6 .note-dot.lr_6 .splitter span.color-72:before,
.semitrans-lr_7 .note-dot.lr_7.color-72,
.semitrans-lr_7 .note-dot.lr_7 .splitter span.color-72:before,
.semitrans-lr_8 .note-dot.lr_8.color-72,
.semitrans-lr_8 .note-dot.lr_8 .splitter span.color-72:before {
  color: rgba(76,17,47, 0.5);
  text-shadow: none;
}

.color-0 {
  background-color: transparent;
  border-color: transparent;
  stroke: transparent;
}

[class^="dotshape_"]:before, [class*=" dotshape_"]:before {
  font-family: "gs_icons";
  font-size: 100%;
  vertical-align: bottom;
}

/* ICONE ORIGINALI */
@font-face {
  font-family: 'gs_icons';
  src: url("data:application/octet-stream;base64,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") format("woff"), url("data:application/octet-stream;base64,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WCA8WS6xKwEUKy2wPSwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xKwEUKy2wPiywNSsjIC5GsAIlRlJYIDxZLrErARQrLbA/LLA2K4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrErARQrsARDLrArKy2wQCywABawBCWwBCYgLkcjRyNhsAlDKyMgPCAuIzixKwEUKy2wQSyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAJQysgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2GwAiVGYTgjIDwjOBshICBGI0ewASsjYTghWbErARQrLbBCLLA1Ky6xKwEUKy2wQyywNishIyAgPLAEI0IjOLErARQrsARDLrArKy2wRCywABUgR7AAI0KyAAEBFRQTLrAxKi2wRSywABUgR7AAI0KyAAEBFRQTLrAxKi2wRiyxAAEUE7AyKi2wRyywNCotsEgssAAWRSMgLiBGiiNhOLErARQrLbBJLLAII0KwSCstsEossgAAQSstsEsssgABQSstsEwssgEAQSstsE0ssgEBQSstsE4ssgAAQistsE8ssgABQistsFAssgEAQistsFEssgEBQistsFIssgAAPistsFMssgABPistsFQssgEAPistsFUssgEBPistsFYssgAAQCstsFcssgABQCstsFgssgEAQCstsFkssgEBQCstsFossgAAQystsFsssgABQystsFwssgEAQystsF0ssgEBQystsF4ssgAAPystsF8ssgABPystsGAssgEAPystsGEssgEBPystsGIssDcrLrErARQrLbBjLLA3K7A7Ky2wZCywNyuwPCstsGUssAAWsDcrsD0rLbBmLLA4Ky6xKwEUKy2wZyywOCuwOystsGgssDgrsDwrLbBpLLA4K7A9Ky2waiywOSsusSsBFCstsGsssDkrsDsrLbBsLLA5K7A8Ky2wbSywOSuwPSstsG4ssDorLrErARQrLbBvLLA6K7A7Ky2wcCywOiuwPCstsHEssDorsD0rLbByLLMJBAIDRVghGyMhWUIrsAhlsAMkUHiwARUwLQBLuADIUlixAQGOWbABuQgACABjcLEABUKyAAEAKrEABUKzCgIBCCqxAAVCsw4AAQgqsQAGQroCwAABAAkqsQAHQroAQAABAAkqsQMARLEkAYhRWLBAiFixA2REsSYBiFFYugiAAAEEQIhjVFixAwBEWVlZWbMMAgEMKrgB/4WwBI2xAgBEAAA=") format("truetype");
}

/* ----------- 128 icone con font ttf  ------------- */
/*@font-face {
  font-family: 'gs_icons';
  src: 
  url(../../public/icons/font/gs_icons_2.ttf);
}*/
/*$icons: 
'\0000', '\0001', '\0002', '\0003', '\0004', '\0005', 
'\0006', '\0007', '\0008', '\0009', '\000A', '\000B', 
'\000C', '\000D', '\000E', '\000F', '\0010', '\0011', 
'\0012', '\0013', '\0014', '\0015', '\0016', '\0017', 
'\0018', '\0019', '\001A', '\001B', '\001C', '\001D', 
'\001E', '\001F', '\0020', '\0021', '\0022', '\0023', 
'\0024', '\0025', '\0026', '\0027', '\0028', '\0029', 
'\002A', '\002B', '\002C', '\002D', '\002E', '\002F', 
'\0030', '\0031', '\0032', '\0033', '\0034', '\0035', 
'\0036', '\0037', '\0038', '\0039', '\003A', '\003B', 
'\003C', '\003D', '\003E', '\003F', '\0040', '\0041', 
'\0042', '\0043', '\0044', '\0045', '\0046', '\0047', 
'\0048', '\0049', '\004A', '\004B', '\004C', '\004D', 
'\004E', '\004F', '\0050', '\0051', '\0052', '\0053', 
'\0054', '\0055', '\0056', '\0057', '\0058', '\0059', 
'\005A', '\005B', '\005C', '\005D', '\005E', '\005F', 
'\0060', '\0061', '\0062', '\0063', '\0064', '\0065', 
'\0066', '\0067', '\0068', '\0069', '\006A', '\006B', 
'\006C', '\006D', '\006E', '\006F', '\0070', '\0071', 
'\0072', '\0073', '\0074', '\0075', '\0076', '\0077', 
'\0078', '\0079', '\007A', '\007B', '\007C', '\007D', 
'\007E', '\007F', '\00A0', '\00A1', '\00A2', '\00A3', 
'\20AC', '\00A5', '\0160', '\00A7', '\0161', '\00A9', 
'\00AA', '\00AB', '\00AC', '\00AD', '\00AE', '\00AF', 
'\00B0', '\00B1', '\00B2', '\00B3', '\017D', '\00B5', 
'\00B6', '\00B7', '\017E';*/
/*@for $i from 1 through 128 {*/
.dotshape_1:before {
  content: "\F111";
}

.dotshape_1 {
  background-color: transparent;
}

.dotshape_1 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_1 span:before {
  font-family: "gs_icons";
  content: "\F111";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_2:before {
  content: "\E800";
}

.dotshape_2 {
  background-color: transparent;
}

.dotshape_2 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_2 span:before {
  font-family: "gs_icons";
  content: "\E800";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_3:before {
  content: "\E801";
}

.dotshape_3 {
  background-color: transparent;
}

.dotshape_3 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_3 span:before {
  font-family: "gs_icons";
  content: "\E801";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_4:before {
  content: "\E80B";
}

.dotshape_4 {
  background-color: transparent;
}

.dotshape_4 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_4 span:before {
  font-family: "gs_icons";
  content: "\E80B";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_5:before {
  content: "\E80C";
}

.dotshape_5 {
  background-color: transparent;
}

.dotshape_5 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_5 span:before {
  font-family: "gs_icons";
  content: "\E80C";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_6:before {
  content: "\E804";
}

.dotshape_6 {
  background-color: transparent;
}

.dotshape_6 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_6 span:before {
  font-family: "gs_icons";
  content: "\E804";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_7:before {
  content: "\E805";
}

.dotshape_7 {
  background-color: transparent;
}

.dotshape_7 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_7 span:before {
  font-family: "gs_icons";
  content: "\E805";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_8:before {
  content: "\E806";
}

.dotshape_8 {
  background-color: transparent;
}

.dotshape_8 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_8 span:before {
  font-family: "gs_icons";
  content: "\E806";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_9:before {
  content: "\E807";
}

.dotshape_9 {
  background-color: transparent;
}

.dotshape_9 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_9 span:before {
  font-family: "gs_icons";
  content: "\E807";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_10:before {
  content: "\F0A9";
}

.dotshape_10 {
  background-color: transparent;
}

.dotshape_10 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_10 span:before {
  font-family: "gs_icons";
  content: "\F0A9";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_11:before {
  content: "\F0A8";
}

.dotshape_11 {
  background-color: transparent;
}

.dotshape_11 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_11 span:before {
  font-family: "gs_icons";
  content: "\F0A8";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_12:before {
  content: "\F10C";
}

.dotshape_12 {
  background-color: transparent;
}

.dotshape_12 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_12 span:before {
  font-family: "gs_icons";
  content: "\F10C";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_13:before {
  content: "\E808";
}

.dotshape_13 {
  background-color: transparent;
}

.dotshape_13 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_13 span:before {
  font-family: "gs_icons";
  content: "\E808";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_14:before {
  content: "\E809";
}

.dotshape_14 {
  background-color: transparent;
}

.dotshape_14 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_14 span:before {
  font-family: "gs_icons";
  content: "\E809";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_15:before {
  content: "\E80A";
}

.dotshape_15 {
  background-color: transparent;
}

.dotshape_15 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_15 span:before {
  font-family: "gs_icons";
  content: "\E80A";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_16:before {
  content: "\E80E";
}

.dotshape_16 {
  background-color: transparent;
}

.dotshape_16 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_16 span:before {
  font-family: "gs_icons";
  content: "\E80E";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_17:before {
  content: "\E80F";
}

.dotshape_17 {
  background-color: transparent;
}

.dotshape_17 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_17 span:before {
  font-family: "gs_icons";
  content: "\E80F";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_18:before {
  content: "\E810";
}

.dotshape_18 {
  background-color: transparent;
}

.dotshape_18 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_18 span:before {
  font-family: "gs_icons";
  content: "\E810";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_19:before {
  content: "\E811";
}

.dotshape_19 {
  background-color: transparent;
}

.dotshape_19 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_19 span:before {
  font-family: "gs_icons";
  content: "\E811";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_20:before {
  content: "\E81D";
}

.dotshape_20 {
  background-color: transparent;
}

.dotshape_20 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_20 span:before {
  font-family: "gs_icons";
  content: "\E81D";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_21:before {
  content: "\E813";
}

.dotshape_21 {
  background-color: transparent;
}

.dotshape_21 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_21 span:before {
  font-family: "gs_icons";
  content: "\E813";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_22:before {
  content: "\E814";
}

.dotshape_22 {
  background-color: transparent;
}

.dotshape_22 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_22 span:before {
  font-family: "gs_icons";
  content: "\E814";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_23:before {
  content: "\E815";
}

.dotshape_23 {
  background-color: transparent;
}

.dotshape_23 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_23 span:before {
  font-family: "gs_icons";
  content: "\E815";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_24:before {
  content: "\E816";
}

.dotshape_24 {
  background-color: transparent;
}

.dotshape_24 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_24 span:before {
  font-family: "gs_icons";
  content: "\E816";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_25:before {
  content: "\E817";
}

.dotshape_25 {
  background-color: transparent;
}

.dotshape_25 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_25 span:before {
  font-family: "gs_icons";
  content: "\E817";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_26:before {
  content: "\E818";
}

.dotshape_26 {
  background-color: transparent;
}

.dotshape_26 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_26 span:before {
  font-family: "gs_icons";
  content: "\E818";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_27:before {
  content: "\E819";
}

.dotshape_27 {
  background-color: transparent;
}

.dotshape_27 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_27 span:before {
  font-family: "gs_icons";
  content: "\E819";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_28:before {
  content: "\E81A";
}

.dotshape_28 {
  background-color: transparent;
}

.dotshape_28 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_28 span:before {
  font-family: "gs_icons";
  content: "\E81A";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_29:before {
  content: "\E81C";
}

.dotshape_29 {
  background-color: transparent;
}

.dotshape_29 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_29 span:before {
  font-family: "gs_icons";
  content: "\E81C";
  background-color: transparent;
  display: block;
}

/*@for $i from 1 through 128 {*/
.dotshape_30:before {
  content: "\E81E";
}

.dotshape_30 {
  background-color: transparent;
}

.dotshape_30 span {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: transparent;
}

.dotshape_30 span:before {
  font-family: "gs_icons";
  content: "\E81E";
  background-color: transparent;
  display: block;
}

div.splitter {
  display: inline-block;
  position: absolute;
  top: 0%;
  left: 0;
  overflow: hidden;
}

/*nav {
    width: calc(100vw - 342px);
    position: absolute;
    height: 30px !important;
    right: 0px;
    z-index: 200 !important;
    background-color: #f8fbff;
}

#gs_logo{
    position: absolute;
    display: inline-block;
    left: 0px;
    top: 0px;
    height: 20px !important;
    padding: 3px;
    margin: 2px;
    border-radius: 2px;
    transition: 0.3s;
    img {
    	margin: 0;
    	padding: 0;
    	height: 20px !important
    }
    &:hover{
    	background-color: #222;
    }
 }
.notif_number, .dropdown-menu{display: none !important;}

.navbar a, .navbar div, .navbar ul, .navbar li {
    display: inline-block;
    color: #999;
    line-height: 30px;
    text-decoration: none;
}

#user_links {
    position: absolute;
    display: inline-block;
    right: 30px;
    li{
    	display: block;
    }
}
#nav_links{
    position: absolute;
    display: inline-block;
    left: 230px;
    li{
    	margin: 0 10px;
    }
}*/
/* tema tour giallorosso */
/* $tr_freccia: $c_7;
 $tr_bordo: $c_7_chiaro;
 $tr_sfondo_titolo: $giallo_scuro;
 $tr_titolo: $c_7;
 $tr_sfondo_testo: $giallo_chiaro;
 $tr_testo: black;
 $tr_bottone: $c_7;
 $tr_bottone_hover: $c_7_chiaro;
 $tr_ombra: $c_1;*/
/* tema tour giallorosso2 */
/* $tr_freccia: $c_7;
 $tr_bordo: $c_7;
 $tr_sfondo_titolo: $c_7;
 $tr_titolo: white;
 $tr_sfondo_testo: $giallo_chiaro;
 $tr_testo: black;
 $tr_bottone: $c_7;
 $tr_bottone_hover: $c_7_chiaro;
 $tr_ombra: $giallo_scuro;*/
/* tema tour verde */
.shepherd-element, .shepherd-element *,
.shepherd-element :after,
.shepherd-element :before {
  text-align: left;
  border-radius: 0px;
}

.shepherd-element {
  /*box-shadow: 4px 4px 0px 0px $tr_ombra;*/
  border: 3px solid #48AAAF;
}

.shepherd-arrow:before {
  background: red;
  height: 30px;
  width: 30px;
}

.shepherd-title {
  color: #333;
  font-weight: 800;
  /*font-size: 1.2em;*/
}

/*
.shepherd-has-title .shepherd-content .shepherd-header {
    background: $tr_sfondo_titolo;
    padding: 10px;
    translate: 0 -1px;
}*/
.shepherd-button {
  background: #068C9B;
  color: #fff;
}

.shepherd-button:hover,
.shepherd-button:not(:disabled):hover {
  background: #48AAAF;
  color: white;
}

.shepherd-content {
  /*   border-radius: 0px; 
    outline: none;
    padding: 0;*/
  background-color: #fff;
}

.shepherd-cancel-icon {
  font-weight: 900;
}

.shepherd-enabled.shepherd-element {
  z-index: 999999;
}

.shepherd-button {
  background: #ffffff;
  border-top: solid 4px #16202D;
  border-radius: 0;
  color: #16202D;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
}

.shepherd-button:hover {
  background: #16202D;
  color: #ffffff;
}

.shepherd-button.shepherd-button-secondary {
  background: #CAD5D5;
}

.shepherd-button.shepherd-button-secondary:hover {
  color: #CAD5D5;
  background: #16202D;
}

.shepherd-cancel-icon {
  font-family: "GT Pressura", sans-serif;
}

.shepherd-element {
  border: solid 4px #16202D;
}

.shepherd-element,
.shepherd-header,
.shepherd-footer {
  border-radius: 0;
}

.shepherd-element .shepherd-arrow {
  border-width: 0;
  height: auto;
  width: auto;
}

.shepherd-arrow::before {
  display: none;
}

.shepherd-element .shepherd-arrow:after {
  content: url("../svg/arrow_red2.svg");
  width: 28px;
  height: 28px;
  display: inline-block;
}

.shepherd-element[data-popper-placement^='top'] .shepherd-arrow,
.shepherd-element.shepherd-pinned-top .shepherd-arrow {
  bottom: -28px;
}

.shepherd-element[data-popper-placement^='top'] .shepherd-arrow:after,
.shepherd-element.shepherd-pinned-top .shepherd-arrow:after {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

.shepherd-element[data-popper-placement^='bottom'] .shepherd-arrow {
  top: -28px;
}

.shepherd-element[data-popper-placement^='bottom'] .shepherd-arrow:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.shepherd-element[data-popper-placement^='left'] .shepherd-arrow,
.shepherd-element.shepherd-pinned-left .shepherd-arrow {
  right: -28px;
}

.shepherd-element[data-popper-placement^='left'] .shepherd-arrow:after,
.shepherd-element.shepherd-pinned-left .shepherd-arrow:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.shepherd-element[data-popper-placement^='right'] .shepherd-arrow,
.shepherd-element.shepherd-pinned-right .shepherd-arrow {
  left: -28px;
}

.shepherd-footer {
  padding: 0;
}

.shepherd-footer button:not(:last-of-type) {
  border-right: solid 4px #16202D;
}

.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
  margin-top: -7px;
}

.shepherd-has-title .shepherd-content .shepherd-header {
  background: transparent;
  /*font-family: "GT Pressura", sans-serif;*/
  padding-bottom: 0;
  padding-left: 1.3rem;
  /*padding: 1.3rem;*/
}

.shepherd-has-title .shepherd-content .shepherd-header .shepherd-title {
  font-size: 1.2rem;
  text-transform: uppercase;
}

.shepherd-text {
  font-size: 1.2rem;
  padding: 1.3rem;
}

.shepherd-text b {
  font-weight: bold;
}

.shepherd-text a, .shepherd-text a:visited,
.shepherd-text a:active {
  border-bottom: 1px dotted;
  border-bottom-color: rgba(0, 0, 0, 0.75);
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none;
}

.shepherd-text a:hover, .shepherd-text a:visited:hover,
.shepherd-text a:active:hover {
  border-bottom-style: solid;
}

.hover\:text-navy-light:hover {
  --tw-text-opacity: 1;
  color: #959fac;
}

/*
@media (min-width: 768px) {
  .md\:h-48 {
    height: 12rem;
  }

  .md\:w-48 {
    width: 12rem;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:pt-8 {
    padding-top: 2rem;
  }
}

@media (min-width: 1024px) {
  .lg\:mt-0 {
    margin-top: 0;
  }

  .lg\:mt-4 {
    margin-top: 1rem;
  }

  .lg\:mb-24 {
    margin-bottom: 6rem;
  }

  .lg\:mt-24 {
    margin-top: 6rem;
  }

  .lg\:mr-4 {
    margin-right: 1rem;
  }

  .lg\:h-56 {
    height: 14rem;
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-56 {
    width: 14rem;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-0 {
    padding: 0;
  }

  .lg\:pr-10 {
    padding-right: 2.5rem;
  }

  .lg\:pr-0 {
    padding-right: 0;
  }
}
*/
@media print {
  .nav_clear,
  nav,
  #editor_dropdown,
  #social_bar,
  .layer-controller,
  .sidebar-container {
    display: none !important;
  }
  .generator-main-content {
    padding: 0 !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    width: 100vw;
    margin: 0 !important;
    background-color: #fff !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  #document_container {
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  #document_padder {
    margin: 0 !important;
  }
  #user_document {
    border: 1px solid transparent;
    background-color: #fff;
    -webkit-box-shadow: 6px 3px 26px -2px rgba(0, 0, 0, 0) !important;
            box-shadow: 6px 3px 26px -2px rgba(0, 0, 0, 0) !important;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transition: 0s;
    transition: 0s;
    width: initial;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
}

#tutorial_container {
  position: fixed;
  display: block;
  height: 90vh;
  width: 90vw;
  background: white;
  top: 5vh;
  left: 5vw;
  z-index: 999999999999;
  border-radius: 5px;
  border: 1px solid #aaa;
  overflow: hidden;
  -webkit-box-shadow: 0 0 100px 50px #000000aa;
          box-shadow: 0 0 100px 50px #000000aa;
  display: none;
}

.overlay_btn {
  display: none;
}

.close_tutorial {
  position: absolute;
  display: block;
  height: 50px;
  width: 50px;
  top: 20px;
  right: 20px;
  font-size: 30px;
  font-weight: 800;
  cursor: pointer;
  opacity: 0.4;
}

.close_tutorial:hover {
  opacity: 1;
}

.tut_cont_overlay_mode {
  padding-bottom: 30px;
  height: calc(90vh - 30px) !important;
}

.tut_cont_overlay_mode .overlay_btn {
  position: absolute;
  color: #444444;
  z-index: 99999;
  display: block;
  bottom: 0px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  background-color: #e8f0f2;
  cursor: pointer;
}

.t-help {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  opacity: 0;
  display: inline-block;
  z-index: 500000;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: help;
}

.t-help:hover {
  opacity: 0.5;
}

#help_mode {
  display: inline-block;
  height: 100%;
  border-radius: 10px;
}

#help_mode h1 {
  font-size: 30px;
  text-align: center;
  color: indianred;
}

#help_mode p {
  font-size: 16px;
  color: #444;
  padding: 10px;
}

#quit_help_mode {
  display: inline-block;
  padding: 5px;
  color: white;
  width: calc(100% - 20px);
  background-color: indianred;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}

#quit_help_mode:hover {
  background-color: #b5363a;
}