// Icons
i.icon {
  &.icon-expand-up {
    width: 17px;
    height: 17px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,5.1 2,13.9 4.1,16 11.1,9.2 17.9,16 20,13.9 11.2,5.1 11.1,5 "/></g></svg>');
  }
  &.icon-expand-down {
    width: 17px;
    height: 17px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
  }
  &.icon-search {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
  }
  &.icon-edit {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
  }
  &.icon-reader {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M17,21H1V9h6V2l0,0h10v5h1V1H6.2L0,7.6V22h18v-3h-1V21z M6,2.8V8H1.1L6,2.8z M13,8c-5.1,0-9,5-9,5s4.1,5,9,5c5,0,9-5,9-5S18,8,13,8z M8.7,15.5C6.8,14.4,6.4,13,6.4,13s0.4-1.5,2.4-2.6C8.3,11.2,8,12,8,13C8,13.9,8.3,14.8,8.7,15.5z M13,16.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7c2.1,0,3.7,1.7,3.7,3.7C16.7,15.1,15.1,16.7,13,16.7z M17.3,15.5c0.4-0.7,0.7-1.6,0.7-2.5c0-1-0.3-1.8-0.7-2.6c2,1.1,3.4,2.6,3.4,2.6S19.2,14.4,17.3,15.5z M13,11.7c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3S13.7,11.7,13,11.7z"/></g></svg>');
  }
  &.icon-download {
    width: 22px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon id="XMLID_3_" points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 	"/><polygon id="XMLID_6_" points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 	"/></g></svg>');
  }
  &.icon-info {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M10,17h2V8h-2V17z M11,1C5.5,1,1,5.5,1,11s4.5,10,10,10s10-4.5,10-10S16.5,1,11,1z M11,20c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S16,20,11,20z M10,7h2V5h-2V7z"/></g></svg>');
  }
  &.icon-about {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
  }
  &.icon-help {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
  }
  &.icon-versions {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>');
  }
  &.icon-text-color {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
  }
  &.icon-text-align-center {
    width: 22px;
    height: 22px;
    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
  }
  &.icon-text-align-justify {
    width: 22px;
    height: 22px;
    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
  }
  &.icon-text-align-left {
    width: 22px;
    height: 22px;
    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
  }
  &.icon-text-align-right {
    width: 22px;
    height: 22px;
    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
  }
  &.icon-text-valign-top {
    width: 22px;
    height: 22px;
    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
  }
  &.icon-text-valign-middle {
    width: 22px;
    height: 22px;
    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
  }
  &.icon-text-valign-bottom {
    width: 22px;
    height: 22px;
    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
  }
  &.icon-insimage {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="#f00"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
  }
  &.icon-sort {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="#f00"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
  }
  &.icon-image-library {
    width: 22px;
    height: 22px;
    .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.2;}.cls-3{fill:#fff;}.cls-10,.cls-11,.cls-4,.cls-6,.cls-7,.cls-8,.cls-9{mix-blend-mode:multiply;}.cls-4{fill:url(#grad_8);}.cls-5{fill:url(#grad_10);}.cls-6{fill:url(#grad_12);}.cls-7{fill:url(#grad_14);}.cls-8{fill:url(#grad_79);}.cls-9{fill:url(#grad_77);}.cls-10{fill:url(#grad_75);}.cls-11{fill:url(#grad_81);}</style><linearGradient id="grad_8" x1="11.08" y1="10.26" x2="11.08" y2="1.26" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3e916"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_10" x1="11.08" y1="20.44" x2="11.08" y2="11.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5eb6e8"/><stop offset="1" stop-color="#958cc3"/></linearGradient><linearGradient id="grad_12" x1="1.46" y1="11.05" x2="10.46" y2="11.05" gradientTransform="translate(17 5.09) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#cc8dba"/><stop offset="1" stop-color="#f86867"/></linearGradient><linearGradient id="grad_14" x1="11.73" y1="11.05" x2="20.73" y2="11.05" gradientTransform="translate(27.28 -5.18) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6ac07f"/><stop offset="1" stop-color="#c5da3d"/></linearGradient><linearGradient id="grad_79" x1="11.74" y1="10.42" x2="17.52" y2="4.63" gradientTransform="translate(30.29 2.51) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c5da3d"/><stop offset="1" stop-color="#f3e916"/></linearGradient><linearGradient id="grad_77" x1="4.7" y1="17.49" x2="10.48" y2="11.71" gradientTransform="translate(23.24 19.65) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9595c3"/><stop offset="1" stop-color="#cc8dba"/></linearGradient><linearGradient id="grad_75" x1="4.69" y1="4.64" x2="10.47" y2="10.42" gradientTransform="translate(7.54 -3.15) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f86867"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_81" x1="11.77" y1="11.78" x2="17.55" y2="17.56" gradientTransform="translate(14.63 -6.05) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5ec0e8"/><stop offset="1" stop-color="#6ac07f"/></linearGradient></defs><title>icons_for_svg</title><g class="cls-1"><g id="Слой_1" data-name="Слой 1"><rect class="cls-2" x="0.09" y="0.01" width="22" height="22" rx="4" ry="4"/><rect class="cls-3" x="0.57" y="0.49" width="21.04" height="21.04" rx="3.6" ry="3.6"/><rect class="cls-4" x="8.33" y="1.26" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-5" x="8.33" y="11.76" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-6" x="3.21" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-5.09 17) rotate(-90)"/><rect class="cls-7" x="13.48" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(5.18 27.28) rotate(-90)"/><rect class="cls-8" x="11.87" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(19.64 23.19) rotate(-135)"/><rect class="cls-9" x="4.8" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(2.54 30.33) rotate(-135)"/><rect class="cls-10" x="4.83" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-3.1 7.56) rotate(-45)"/><rect class="cls-11" x="11.87" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-6.07 14.63) rotate(-45)"/></g></g></svg>');
  }
  &.icon-function {
    width: 22px;
    height: 22px;
    background-image: url(../img/function.png);
  }

  // Reorder

  &.icon-move-backward {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>');
  }
  &.icon-move-forward {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>');
  }
  &.icon-move-background {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>');
  }
  &.icon-move-foreground {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
  }

  // Presets of table borders

  &.icon-table-borders-all {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
  }
  &.icon-table-borders-none {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
  }
  &.icon-table-borders-inner {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
  }
  &.icon-table-borders-outer {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
  }
  &.icon-table-borders-left {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>');
  }
  &.icon-table-borders-center {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>');
  }
  &.icon-table-borders-right {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>');
  }
  &.icon-table-borders-top {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>');
  }
  &.icon-table-borders-middle {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>');
  }
  &.icon-table-borders-bottom {
    width: 28px;
    height: 28px;
    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
  }

  &.sortdown {
    width: 22px;
    height: 22px;
    background-image: url(../img/sort-a-z.png);
  }
  &.sortup {
    width: 22px;
    height: 22px;
    background-image: url(../img/sort-z-a.png);
  }
}

// Overwrite color for toolbar
.navbar {
  i.icon {
    &.icon-undo {
      width: 22px;
      height: 22px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M20,17v-2c0-1.7-1.3-3-3-3H3.7l3.4,3.4l-1.4,1.4l-5.2-5.2L0,11l0.5-0.6l5.2-5.2l1.4,1.4L3.7,10H17c2.8,0,5,2.2,5,5v2H20z"/></g></svg>');
    }
    &.icon-redo {
      width: 22px;
      height: 22px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,17v-2c0-2.8,2.2-5,5-5h13.3l-3.4-3.4l1.4-1.4l5.2,5.2L22,11l-0.5,0.6l-5.2,5.2l-1.4-1.4l3.4-3.4H5c-1.7,0-3,1.3-3,3v2H0z"/></g></svg>');
    }
    &.icon-search {
      width: 22px;
      height: 22px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
    }
    &.icon-burger {
      width: 22px;
      height: 22px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-8 1 22 22" fill="@{navBarIconColor}"><g><path d="M-6,6v2h18V6H-6z M-6,13h18v-2H-6V13z M-6,18h18v-2H-6V18z"/></g></svg>');
    }
    &.icon-plus {
      width: 22px;
      height: 22px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
    }
    &.icon-edit {
      width: 22px;
      height: 22px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
    }
    &.icon-settings {
      width: 22px;
      height: 22px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2s-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5s-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>');
    }
    &.icon-prev {
      width: 20px;
      height: 20px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
    }
    &.icon-next {
      width: 20px;
      height: 20px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
    }
    &.icon-expand-down {
      width: 22px;
      height: 22px;
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
    }
  }
}

.chart-types .thumb {
  &.bar-normal {
    background-image: url('../img/charts/chart-03.png');
  }
  &.bar-stacked {
    background-image: url('../img/charts/chart-02.png');
  }
  &.bar-pstacked {
    background-image: url('../img/charts/chart-01.png');
  }
  &.line-normal {
    background-image: url('../img/charts/chart-06.png');
  }
  &.line-stacked {
    background-image: url('../img/charts/chart-05.png');
  }
  &.line-pstacked {
    background-image: url('../img/charts/chart-04.png');
  }
  &.hbar-normal {
    background-image: url('../img/charts/chart-09.png');
  }
  &.hbar-stacked {
    background-image: url('../img/charts/chart-08.png');
  }
  &.hbar-pstacked {
    background-image: url('../img/charts/chart-07.png');
  }
  &.area-normal {
    background-image: url('../img/charts/chart-12.png');
  }
  &.area-stacked {
    background-image: url('../img/charts/chart-11.png');
  }
  &.area-pstacked {
    background-image: url('../img/charts/chart-10.png');
  }
  &.pie {
    background-image: url('../img/charts/chart-13.png');
  }
  &.doughnut {
    background-image: url('../img/charts/chart-14.png');
  }
  &.pie3d {
    background-image: url('../img/charts/chart-22.png');
  }
  &.scatter {
    background-image: url('../img/charts/chart-15.png');
  }
  &.stock {
    background-image: url('../img/charts/chart-16.png');
  }
  &.line3d {
    background-image: url('../img/charts/chart-21.png');
  }
  &.bar3dnormal {
    background-image: url('../img/charts/chart-17.png');
  }
  &.bar3dstack {
    background-image: url('../img/charts/chart-18.png');
  }
  &.bar3dpstack {
    background-image: url('../img/charts/chart-19.png');
  }
  &.hbar3dnormal {
    background-image: url('../img/charts/chart-25.png');
  }
  &.hbar3dstack {
    background-image: url('../img/charts/chart-24.png');
  }
  &.hbar3dpstack {
    background-image: url('../img/charts/chart-23.png');
  }
  &.bar3dpsnormal {
    background-image: url('../img/charts/chart-20.png');
  }
}