/**
* ROOT VARIABLES
*/
html {
  --uip-logo: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjEzNDVweCIgaGVpZ2h0PSIxMzg3cHgiIHN0eWxlPSJzaGFwZS1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uOyB0ZXh0LXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IGltYWdlLXJlbmRlcmluZzpvcHRpbWl6ZVF1YWxpdHk7IGZpbGwtcnVsZTpldmVub2RkOyBjbGlwLXJ1bGU6ZXZlbm9kZCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8Zz48cGF0aCBzdHlsZT0ib3BhY2l0eTowLjk5NCIgZmlsbD0iIzAwMDAwMCIgZD0iTSA2NDUuNSwtMC41IEMgNjU3LjE2NywtMC41IDY2OC44MzMsLTAuNSA2ODAuNSwtMC41QyA2OTUuOTIsMS42ODkwMSA3MTAuOTIsNS44NTU2NyA3MjUuNSwxMkMgOTExLjUsOTYgMTA5Ny41LDE4MCAxMjgzLjUsMjY0QyAxMzE2LjQ2LDI4My4wODUgMTMzNi43OSwzMTEuMjUyIDEzNDQuNSwzNDguNUMgMTM0NC41LDQyMC41IDEzNDQuNSw0OTIuNSAxMzQ0LjUsNTY0LjVDIDEwODMuOTUsNDQ3LjU2IDgyMy42MTgsMzMwLjA2IDU2My41LDIxMkMgNTQ5LjcxMSwyMDUuNjA1IDUzNi4wNDQsMTk4LjkzOSA1MjIuNSwxOTJDIDQ5NC4yLDE3Ny42OSA0NzcuMzY3LDE1NC44NTYgNDcyLDEyMy41QyA0NjkuOTY3LDEwNS4yNjcgNDc0Ljk2Nyw4OS4yNjcxIDQ4Nyw3NS41QyA0OTguMjExLDYzLjI4ODUgNTExLjM3OCw1My43ODg1IDUyNi41LDQ3QyA1NTUuMTY3LDM0IDU4My44MzMsMjEgNjEyLjUsOEMgNjIzLjQyNyw0LjM1MjQxIDYzNC40MjcsMS41MTkwNyA2NDUuNSwtMC41IFoiLz48L2c+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuOTk1IiBmaWxsPSIjMDAwMDAwIiBkPSJNIC0wLjUsOTg1LjUgQyAtMC41LDc3Ni41IC0wLjUsNTY3LjUgLTAuNSwzNTguNUMgNi4zODQyNywzMTYuMjIgMjcuNzE3NiwyODMuMzg3IDYzLjUsMjYwQyAxMjEuMDgzLDIzMy44MDYgMTc4Ljc0OSwyMDcuODA2IDIzNi41LDE4MkMgMjc5LjgyNCwxNjguNDgxIDMyMi4xNTcsMTcxLjE0OCAzNjMuNSwxOTBDIDUyNy4xNjcsMjY3IDY5MC44MzMsMzQ0IDg1NC41LDQyMUMgODY3LjQ0MSw0MjguMjY1IDg3OC45NDEsNDM3LjQzMiA4ODksNDQ4LjVDIDkwNi4wOTQsNDczLjIwNyA5MDMuOTI4LDQ5Ni4wNCA4ODIuNSw1MTdDIDg3Ni42ODcsNTIyLjA3NSA4NzAuMzU0LDUyNi40MDggODYzLjUsNTMwQyA4MTIuMTY3LDU1My43NzcgNzYwLjUsNTc2Ljc3NyA3MDguNSw1OTlDIDY4NC4wNzUsNjA2LjkzNCA2NTkuNDA4LDYwNy42IDYzNC41LDYwMUMgNjI1LjM2Myw1OTguMzk5IDYxNi4zNjMsNTk1LjM5OSA2MDcuNSw1OTJDIDUxMy4yODcsNTQ4LjA2IDQxOC45NTMsNTA0LjM5MyAzMjQuNSw0NjFDIDMwNS40MjgsNDU0Ljc4NCAyOTMuMjYxLDQ2MS4yODQgMjg4LDQ4MC41QyAyODUuODg5LDQ5MS4zODcgMjg0LjcyMiw1MDIuMzg3IDI4NC41LDUxMy41QyAyODUuMTU1LDYwNS4xNjEgMjg1LjQ4OSw2OTYuODI4IDI4NS41LDc4OC41QyAyODUuNTg2LDg5OC41MDQgMjg1LjA4NiwxMDA4LjUgMjg0LDExMTguNUMgMjczLjU3OSwxMTcwLjU3IDI0Mi40MTMsMTE5MC43NCAxOTAuNSwxMTc5QyAxNDYuODM4LDExNjEuMTcgMTA0LjE3MSwxMTQxLjE3IDYyLjUsMTExOUMgMTcuMTY3MywxMDg2LjE2IC0zLjgzMjY1LDEwNDEuNjYgLTAuNSw5ODUuNSBaIi8+PC9nPgo8Zz48cGF0aCBzdHlsZT0ib3BhY2l0eTowLjk5NiIgZmlsbD0iIzAwMDAwMCIgZD0iTSAxMzQ0LjUsNzA4LjUgQyAxMzQ0LjUsNzk4LjgzMyAxMzQ0LjUsODg5LjE2NyAxMzQ0LjUsOTc5LjVDIDEzNDYuOTYsMTAxNi4wMSAxMzM4LjgsMTA1MC4wMSAxMzIwLDEwODEuNUMgMTMwOS41LDEwOTYgMTI5NywxMTA4LjUgMTI4Mi41LDExMTlDIDExMDMuNDUsMTIwMi4xMyA5MjQuNDUsMTI4NS40NyA3NDUuNSwxMzY5QyA3MjUuODg3LDEzNzcuODIgNzA1LjU1NCwxMzgzLjY1IDY4NC41LDEzODYuNUMgNjczLjE2NywxMzg2LjUgNjYxLjgzMywxMzg2LjUgNjUwLjUsMTM4Ni41QyA2MzcuODUxLDEzODQuNTcgNjI1LjUxNywxMzgxLjA3IDYxMy41LDEzNzZDIDU1OS45MjYsMTM1MS41NSA1MDYuNTkyLDEzMjYuNTUgNDUzLjUsMTMwMUMgNDIwLjE1NCwxMjc3Ljg1IDQwMC4zMiwxMjQ2LjAyIDM5NCwxMjA1LjVDIDM5My4wNzIsMTE5Ny4xNyAzOTIuMjM5LDExODguODQgMzkxLjUsMTE4MC41QyAzOTIuMzg1LDEwNTYuMzUgMzkzLjA1Miw5MzIuMTgxIDM5My41LDgwOEMgMzkzLjQ4OSw3NzUuODE4IDM5My4xNTYsNzQzLjY1MSAzOTIuNSw3MTEuNUMgMzkyLjY5LDY5NS4zMTQgMzk0LjUyMyw2NzkuMzE0IDM5OCw2NjMuNUMgNDExLjY5Myw2MTcuMzk5IDQ0MS44NTksNjAwLjU2NiA0ODguNSw2MTNDIDUzOC4wNzIsNjM1LjExOSA1ODcuNDA2LDY1Ny43ODYgNjM2LjUsNjgxQyA2NjcuNDg1LDY5OC42NzIgNjg1Ljk4NSw3MjUuMTcyIDY5Miw3NjAuNUMgNjkyLjMzMyw4NTUuNSA2OTIuNjY3LDk1MC41IDY5MywxMDQ1LjVDIDc4Ny45NzEsMTAwMC45MyA4ODMuMTM4LDk1Ni43NjUgOTc4LjUsOTEzQyA5OTYuNDQ0LDkwNi4yOTcgMTAxMS42MSw4OTUuNzk3IDEwMjQsODgxLjVDIDEwMzAuNTEsODcyLjQ2OSAxMDM0Ljg1LDg2Mi40NjkgMTAzNyw4NTEuNUMgMTAzNy4zMyw3NzkuMTY3IDEwMzcuNjcsNzA2LjgzMyAxMDM4LDYzNC41QyAxMDM3LjgxLDYxMy43NTUgMTA0Mi44MSw1OTQuNDIxIDEwNTMsNTc2LjVDIDEwNzAuMjEsNTUzLjE1OSAxMDkzLjM3LDU0My4zMjYgMTEyMi41LDU0N0MgMTEyNi4xOSw1NDcuNTU5IDExMjkuODUsNTQ4LjIyNiAxMTMzLjUsNTQ5QyAxMTc5LjA3LDU2OS40NTMgMTIyNC40MSw1OTAuNDUzIDEyNjkuNSw2MTJDIDEzMDkuNDMsNjMyLjc0MSAxMzM0LjQzLDY2NC45MDcgMTM0NC41LDcwOC41IFoiLz48L2c+Cjwvc3ZnPgo=");

  /**
   * Main theme colors
   * @since 3.0.0
   */
  //Primary
  --uip-color-primary: #333;
  --uip-color-primary-lighter: rgb(207, 196, 240, 0.74);
  --uip-color-primary-darker: #111;
  //Accent
  --uip-color-accent: rgb(108, 76, 203);
  --uip-color-accent-lighter: rgba(79, 70, 106, 0.55);
  --uip-color-accent-darker: rgb(91, 64, 171);
  //Colors green
  --uip-color-green: rgb(22, 163, 74);
  --uip-color-green-lighter: rgba(50, 210, 150, 0.21);
  --uip-color-green-darker: #005d3a;
  //Colors orange
  --uip-color-orange: rgb(234, 88, 12);
  --uip-color-orange-lighter: rgba(250, 160, 90, 0.21);
  --uip-color-orange-darker: #9e4b0c;
  //Colors red
  --uip-color-red: rgb(239, 68, 68);
  --uip-color-red-lighter: rgb(240, 80, 110, 0.2);
  --uip-color-red-darker: rgb(158, 54, 82);
  //Backgrounds
  --uip-color-base-0: #fff;
  --uip-color-base-1: #f2f2f4;
  --uip-color-base-2: #e7e7e9;
  --uip-color-active: #fff;
  --uip-color-highlight: rgba(0, 0, 0, 0.2);
  //Base
  --uip-text-color-base: rgba(8, 8, 16, 0.75);
  --uip-text-color-emphasis: rgba(8, 8, 16, 1);
  --uip-text-color-muted: rgba(8, 8, 16, 0.56);
  --uip-text-color-inverse: #fff;
  //
  --uip-canvas-background: var(--uip-color-base-2);

  ///////
  //////
  //////
  ///////
  //BACKGROUND
  --uip-darken-backdrop: rgba(0, 0, 0, 0.3);
  --uip-notification-background: #111;
  //Modal / confirm backgorunds
  --uip-backdrop-color: rgba(255, 255, 255, 0.78);
  //PADDING
  --uip-padding-xxxs: 2px;
  --uip-padding-xxs: 4px;
  --uip-padding-xs: 8px;
  --uip-padding-s: 16px;
  --uip-padding-m: 32px;
  --uip-padding-l: 64px;
  --uip-padding-button: 8px;
  //MARGIN
  --uip-margin-xxxs: 2px;
  --uip-margin-xxs: 4px;
  --uip-margin-xs: 8px;
  --uip-margin-s: 16px;
  --uip-margin-m: 32px;
  --uip-margin-l: 64px;
  //FONTS
  --uip-body-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, emoji,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --uip-header-font-family: var(--uip-body-font-family);
  --uip-text-bold: 500;
  //#52b;
  --uip-text-xxs: 0.512em;
  --uip-text-xs: 0.62em;
  --uip-text-s: 0.8em;
  --uip-text-m: 1em;
  --uip-text-l: 1.25em;
  --uip-text-xl: 1.618em;
  --uip-text-xxl: 2.618em;
  --uip-body-font-size: 13px;
  //Links

  //BORDER RADIUS
  --uip-border-radius: 4px;
  --uip-border-radius-large: 8px;
  --uip-border-circle: 50%;
  --uip-border-width: 1px;
  --uip-border-color: rgba(181, 181, 181, 35%);

  //BUTTONS
  --uip-button-border-radius: var(--uip-border-radius-large);
  --uip-button-border-color: transparent;
  --uip-button-border-width: 0;

  --uip-button-primary-border-color: transparent;

  --uip-button-danger-border-color: transparent;

  --uip-button-page-action-border-color: transparent;

  //SHADOW
  --uip-box-shadow-small: 0 1px 1px rgba(0, 0, 0, 0.08);
  --uip-box-shadow: 0 1px #0000000d, 0 4px 10px rgba(0, 0, 0, 0.12);
  --uip-box-shadow-large: 0 12px 48px rgb(0 0 0 / 30%), 0 32px 80px rgb(0 0 0 / 10%);
  //INPUTS
  --uip-checkbox-border: #c1c1c1;
  //CARDS
  --uip-card-border-color: var(--uip-border-color);
  --uip-card-border: var(--uip-border-width) solid var(--uip-card-border-color);
  --uip-card-border-radius: var(--uip-border-radius);
  --uip-card-shadow-spread: 0;
  --uip-card-shadow-blur: 0;
  --uip-card-shadow-color: transparent;
}

html[data-theme="dark"],
[data-theme="dark"],
.uip-dark-mode {
  color-scheme: dark;
  --uip-logo: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjEzNDVweCIgaGVpZ2h0PSIxMzg3cHgiIHN0eWxlPSJzaGFwZS1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uOyB0ZXh0LXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IGltYWdlLXJlbmRlcmluZzpvcHRpbWl6ZVF1YWxpdHk7IGZpbGwtcnVsZTpldmVub2RkOyBjbGlwLXJ1bGU6ZXZlbm9kZCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8Zz48cGF0aCBzdHlsZT0ib3BhY2l0eTowLjk5NCIgZmlsbD0iI2ZmZiIgZD0iTSA2NDUuNSwtMC41IEMgNjU3LjE2NywtMC41IDY2OC44MzMsLTAuNSA2ODAuNSwtMC41QyA2OTUuOTIsMS42ODkwMSA3MTAuOTIsNS44NTU2NyA3MjUuNSwxMkMgOTExLjUsOTYgMTA5Ny41LDE4MCAxMjgzLjUsMjY0QyAxMzE2LjQ2LDI4My4wODUgMTMzNi43OSwzMTEuMjUyIDEzNDQuNSwzNDguNUMgMTM0NC41LDQyMC41IDEzNDQuNSw0OTIuNSAxMzQ0LjUsNTY0LjVDIDEwODMuOTUsNDQ3LjU2IDgyMy42MTgsMzMwLjA2IDU2My41LDIxMkMgNTQ5LjcxMSwyMDUuNjA1IDUzNi4wNDQsMTk4LjkzOSA1MjIuNSwxOTJDIDQ5NC4yLDE3Ny42OSA0NzcuMzY3LDE1NC44NTYgNDcyLDEyMy41QyA0NjkuOTY3LDEwNS4yNjcgNDc0Ljk2Nyw4OS4yNjcxIDQ4Nyw3NS41QyA0OTguMjExLDYzLjI4ODUgNTExLjM3OCw1My43ODg1IDUyNi41LDQ3QyA1NTUuMTY3LDM0IDU4My44MzMsMjEgNjEyLjUsOEMgNjIzLjQyNyw0LjM1MjQxIDYzNC40MjcsMS41MTkwNyA2NDUuNSwtMC41IFoiLz48L2c+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuOTk1IiBmaWxsPSIjZmZmIiBkPSJNIC0wLjUsOTg1LjUgQyAtMC41LDc3Ni41IC0wLjUsNTY3LjUgLTAuNSwzNTguNUMgNi4zODQyNywzMTYuMjIgMjcuNzE3NiwyODMuMzg3IDYzLjUsMjYwQyAxMjEuMDgzLDIzMy44MDYgMTc4Ljc0OSwyMDcuODA2IDIzNi41LDE4MkMgMjc5LjgyNCwxNjguNDgxIDMyMi4xNTcsMTcxLjE0OCAzNjMuNSwxOTBDIDUyNy4xNjcsMjY3IDY5MC44MzMsMzQ0IDg1NC41LDQyMUMgODY3LjQ0MSw0MjguMjY1IDg3OC45NDEsNDM3LjQzMiA4ODksNDQ4LjVDIDkwNi4wOTQsNDczLjIwNyA5MDMuOTI4LDQ5Ni4wNCA4ODIuNSw1MTdDIDg3Ni42ODcsNTIyLjA3NSA4NzAuMzU0LDUyNi40MDggODYzLjUsNTMwQyA4MTIuMTY3LDU1My43NzcgNzYwLjUsNTc2Ljc3NyA3MDguNSw1OTlDIDY4NC4wNzUsNjA2LjkzNCA2NTkuNDA4LDYwNy42IDYzNC41LDYwMUMgNjI1LjM2Myw1OTguMzk5IDYxNi4zNjMsNTk1LjM5OSA2MDcuNSw1OTJDIDUxMy4yODcsNTQ4LjA2IDQxOC45NTMsNTA0LjM5MyAzMjQuNSw0NjFDIDMwNS40MjgsNDU0Ljc4NCAyOTMuMjYxLDQ2MS4yODQgMjg4LDQ4MC41QyAyODUuODg5LDQ5MS4zODcgMjg0LjcyMiw1MDIuMzg3IDI4NC41LDUxMy41QyAyODUuMTU1LDYwNS4xNjEgMjg1LjQ4OSw2OTYuODI4IDI4NS41LDc4OC41QyAyODUuNTg2LDg5OC41MDQgMjg1LjA4NiwxMDA4LjUgMjg0LDExMTguNUMgMjczLjU3OSwxMTcwLjU3IDI0Mi40MTMsMTE5MC43NCAxOTAuNSwxMTc5QyAxNDYuODM4LDExNjEuMTcgMTA0LjE3MSwxMTQxLjE3IDYyLjUsMTExOUMgMTcuMTY3MywxMDg2LjE2IC0zLjgzMjY1LDEwNDEuNjYgLTAuNSw5ODUuNSBaIi8+PC9nPgo8Zz48cGF0aCBzdHlsZT0ib3BhY2l0eTowLjk5NiIgZmlsbD0iI2ZmZiIgZD0iTSAxMzQ0LjUsNzA4LjUgQyAxMzQ0LjUsNzk4LjgzMyAxMzQ0LjUsODg5LjE2NyAxMzQ0LjUsOTc5LjVDIDEzNDYuOTYsMTAxNi4wMSAxMzM4LjgsMTA1MC4wMSAxMzIwLDEwODEuNUMgMTMwOS41LDEwOTYgMTI5NywxMTA4LjUgMTI4Mi41LDExMTlDIDExMDMuNDUsMTIwMi4xMyA5MjQuNDUsMTI4NS40NyA3NDUuNSwxMzY5QyA3MjUuODg3LDEzNzcuODIgNzA1LjU1NCwxMzgzLjY1IDY4NC41LDEzODYuNUMgNjczLjE2NywxMzg2LjUgNjYxLjgzMywxMzg2LjUgNjUwLjUsMTM4Ni41QyA2MzcuODUxLDEzODQuNTcgNjI1LjUxNywxMzgxLjA3IDYxMy41LDEzNzZDIDU1OS45MjYsMTM1MS41NSA1MDYuNTkyLDEzMjYuNTUgNDUzLjUsMTMwMUMgNDIwLjE1NCwxMjc3Ljg1IDQwMC4zMiwxMjQ2LjAyIDM5NCwxMjA1LjVDIDM5My4wNzIsMTE5Ny4xNyAzOTIuMjM5LDExODguODQgMzkxLjUsMTE4MC41QyAzOTIuMzg1LDEwNTYuMzUgMzkzLjA1Miw5MzIuMTgxIDM5My41LDgwOEMgMzkzLjQ4OSw3NzUuODE4IDM5My4xNTYsNzQzLjY1MSAzOTIuNSw3MTEuNUMgMzkyLjY5LDY5NS4zMTQgMzk0LjUyMyw2NzkuMzE0IDM5OCw2NjMuNUMgNDExLjY5Myw2MTcuMzk5IDQ0MS44NTksNjAwLjU2NiA0ODguNSw2MTNDIDUzOC4wNzIsNjM1LjExOSA1ODcuNDA2LDY1Ny43ODYgNjM2LjUsNjgxQyA2NjcuNDg1LDY5OC42NzIgNjg1Ljk4NSw3MjUuMTcyIDY5Miw3NjAuNUMgNjkyLjMzMyw4NTUuNSA2OTIuNjY3LDk1MC41IDY5MywxMDQ1LjVDIDc4Ny45NzEsMTAwMC45MyA4ODMuMTM4LDk1Ni43NjUgOTc4LjUsOTEzQyA5OTYuNDQ0LDkwNi4yOTcgMTAxMS42MSw4OTUuNzk3IDEwMjQsODgxLjVDIDEwMzAuNTEsODcyLjQ2OSAxMDM0Ljg1LDg2Mi40NjkgMTAzNyw4NTEuNUMgMTAzNy4zMyw3NzkuMTY3IDEwMzcuNjcsNzA2LjgzMyAxMDM4LDYzNC41QyAxMDM3LjgxLDYxMy43NTUgMTA0Mi44MSw1OTQuNDIxIDEwNTMsNTc2LjVDIDEwNzAuMjEsNTUzLjE1OSAxMDkzLjM3LDU0My4zMjYgMTEyMi41LDU0N0MgMTEyNi4xOSw1NDcuNTU5IDExMjkuODUsNTQ4LjIyNiAxMTMzLjUsNTQ5QyAxMTc5LjA3LDU2OS40NTMgMTIyNC40MSw1OTAuNDUzIDEyNjkuNSw2MTJDIDEzMDkuNDMsNjMyLjc0MSAxMzM0LjQzLDY2NC45MDcgMTM0NC41LDcwOC41IFoiLz48L2c+Cjwvc3ZnPgo=");

  //Primary
  --uip-color-primary: rgb(108, 76, 203);
  --uip-color-primary-lighter: rgba(79, 70, 106, 0.55);
  --uip-color-primary-darker: rgb(91, 64, 171);
  //Accent
  --uip-color-accent: rgb(108, 76, 203);
  --uip-color-accent-lighter: rgba(79, 70, 106, 0.55);
  --uip-color-accent-darker: rgb(91, 64, 171);
  //Colors green
  --uip-color-green: #209267;
  --uip-color-green-lighter: rgba(64, 144, 131, 0.34);
  --uip-color-green-darker: #005d3a;
  //Colors orange
  --uip-color-orange: #fc7e57;
  --uip-color-orange-lighter: rgba(168, 97, 57, 0.62);
  --uip-color-orange-darker: #b12c0;
  //Colors red
  --uip-color-red: #fd6767;
  --uip-color-red-lighter: rgb(90 35 54);
  --uip-color-red-darker: rgb(143, 37, 57);
  //Backgrounds
  --uip-color-base-0: #111;
  //--uip-color-base-1: #2d2d2d;
  --uip-color-base-1: rgb(39, 39, 44);
  //--uip-color-base-2: #555;
  --uip-color-base-2: rgb(68, 68, 78);
  --uip-color-active: rgb(68, 68, 78);
  //
  --uip-canvas-background: var(--uip-color-base-1);
  //Base
  --uip-text-color-base: #cecece;
  --uip-text-color-emphasis: #fff;
  --uip-text-color-muted: #ffffff80;
  --uip-text-color-inverse: #fff;
  --uip-color-highlight: rgba(255, 255, 255, 0.2);

  //TEXT
  --uip-checkbox-border: #444;
  --uip-border-color: rgba(181, 181, 181, 10%);

  //CARDS
  --uip-card-border-color: transparent;
  --uip-darken-backdrop: rgba(0, 0, 0, 0.6);

  //shadow
  --uip-box-shadow-large: 0 12px 48px rgb(62 67 108 / 30%), 0 32px 80px rgb(62 67 108 / 10%);
  --uip-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

html[uip-core-app="true"] {
  body {
    background: var(--uip-color-base-0);
    font-size: 13px;
  }
}
#uip-ui-builder {
  p {
    margin: 0;
  }
}

#uip-frontend-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
/**
* UTILITY CLASSES
*/
.uip-canvas-background {
  background-color: var(--uip-canvas-background);
}
.uip-logo {
  background-image: var(--uip-logo);
  background-size: contain;
  background-repeat: no-repeat;
}
.uip-logo-inverse {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTYuMjcgMjA3LjE5Ij48ZGVmcz48c3R5bGU+LmNscy0xe2lzb2xhdGlvbjppc29sYXRlO30uY2xzLTJ7ZmlsbDojZmZmO2ZpbGwtcnVsZTpldmVub2RkO308L3N0eWxlPjwvZGVmcz48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iU2hhcGVfMzhfY29weSIgZGF0YS1uYW1lPSJTaGFwZSAzOCBjb3B5IiBjbGFzcz0iY2xzLTEiPjxnIGlkPSJTaGFwZV8zOF9jb3B5LTIiIGRhdGEtbmFtZT0iU2hhcGUgMzggY29weSI+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTkxLjU4LDQyLjE2LDEwMS4zOS43M2E4LjA4LDguMDgsMCwwLDAtNi43LDBMNzUuMzIsOS42MWE4LDgsMCwwLDAsMCwxNC42MkwxODQuODcsNzQuNTlhOCw4LDAsMCwwLDExLjQtNy4zVjQ5LjQ3QTgsOCwwLDAsMCwxOTEuNTgsNDIuMTZabTAsNTMuNTNMMTY5LDg1LjRhOCw4LDAsMCwwLTExLjM4LDcuMzJWMTI5LjlhOC4wNiw4LjA2LDAsMCwxLTQuNjYsNy4zbC00My41LDIwLjJBOCw4LDAsMCwxLDk4LDE1MC4xMVYxMTIuNzVhOCw4LDAsMCwwLTQuNjctNy4zTDcwLjgyLDk1YTgsOCwwLDAsMC0xMS40Miw3LjNWMTg0LjlhOCw4LDAsMCwwLDQuNjUsNy4yOWwzMC42MSwxNC4yNWE4LDgsMCwwLDAsNi43NiwwbDkwLjE3LTQxLjU5YTgsOCwwLDAsMCw0LjY4LTcuM1YxMDNBOCw4LDAsMCwwLDE5MS41Niw5NS42OVpNMTAxLjM3LDg4LjJsMjEuMy05LjgxYTgsOCwwLDAsMCwwLTE0LjZMNDMuNDcsMjcuMTZhOCw4LDAsMCwwLTYuNzgsMGwtMzIsMTVBOCw4LDAsMCwwLDAsNDkuNDNWMTU3LjU2YTgsOCwwLDAsMCw0LjY4LDcuM2wyMC43NCw5LjU0YTgsOCwwLDAsMCwxMS40LTcuMzFWNzQuNTRhOCw4LDAsMCwxLDExLjM1LTcuMzNsNDYuNTMsMjFBOCw4LDAsMCwwLDEwMS4zNyw4OC4yWiIvPjwvZz48L2c+PC9nPjwvc3ZnPg==");
  background-size: contain;
  background-repeat: no-repeat;
}
.uip-unset-all {
  all: unset;
}
.uip-transition-all {
  transition: all 0.3s ease;
}
.uip-no-resize {
  resize: none;
}
.uip-overflow-auto {
  overflow: auto;
}
.uip-overflow-visible {
  overflow: visible;
}
.uip-overflow-hidden {
  overflow: hidden;
}
.uip-text-ellipsis {
  text-overflow: ellipsis;
}

.uip-no-wrap {
  white-space: nowrap;
}
.uip-break-word {
  word-wrap: break-word;
}
.uip-cursor-pointer {
  cursor: pointer;
}
.uip-cursor-drag {
  cursor: grab;
}
.uip-remove-drag {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.uip-position-relative {
  position: relative;
}
.uip-position-absolute {
  position: absolute;
}
.uip-position-sticky {
  position: sticky;
}
.uip-position-fixed {
  position: fixed;
}
.uip-vertical-align-top {
  vertical-align: top;
}
.uip-shadow-small {
  box-shadow: var(--uip-box-shadow-small);
}
.uip-shadow {
  box-shadow: var(--uip-box-shadow);
}
.uip-shadow-large {
  box-shadow: var(--uip-box-shadow-large);
}
.uip-gradient-dark {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7511379551820728) 0%, rgba(255, 255, 255, 0) 80%);
}
.uip-drop-top {
  transform: translate(0%, calc(-100% - 40px));
}
.uip-drop-bottom {
  transform: translate(-50%, 10px);
}
.uip-translate-y-50 {
  transform: translateY(-50%);
}
.uip-translate-y-100 {
  transform: translateY(-100%);
}

.uip-drop-right {
  left: 100%;
  transform: translate(-15px, calc(-34px));
}
.uip-hover-drop {
  display: none;
  z-index: 99;
}
.uip-hover-drop-container {
  &:hover .uip-hover-drop {
    display: block;
  }
}
.uip-z-index-1 {
  z-index: 1;
}
.uip-z-index-2 {
  z-index: 2;
}
.uip-z-index-3 {
  z-index: 3;
}
.uip-z-index--99 {
  z-index: -99;
}
.uip-z-index-9 {
  z-index: 9;
}
.uip-z-index-99 {
  z-index: 99;
}
.uip-z-index-9999 {
  z-index: 9999;
}
.uip-rotate--45 {
  transform: rotate(-45deg);
}
.uip-rotate-180 {
  transform: rotate(180deg);
}
.uip-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
.uip-border-box {
  box-sizing: border-box;
}
.uip-content-box {
  box-sizing: content-box;
}
.uip-display-block {
  display: block;
}
.uip-display-inline {
  display: inline;
}
.uip-display-inline-block {
  display: inline-block;
}
.uip-display-contents {
  display: contents;
}
.uip-margin-auto {
  margin-left: auto;
  margin-right: auto;
}

.uip-hidden {
  display: none !important;
}
.uip-nothidden {
  display: inherit !important;
}
.uip-nothidden-block {
  display: block !important;
}
.uip-no-select {
  pointer-events: none;
}
.uip-no-text-select {
  user-select: none;
}
.uip-border-collapse {
  border-collapse: collapse;
}
.uip-display-table-cell {
  display: table-cell;
}
.uip-min-width-0 {
  min-width: 0;
}
.uip-opacity-0 {
  opacity: 0 !important;
}
.uip-opacity-50 {
  opacity: 50% !important;
}
.uip-opacity-20 {
  opacity: 20% !important;
}
.uip-opacity-70 {
  opacity: 70% !important;
}

#uip-content-drag {
  padding: var(--uip-padding-xs);
  border-radius: var(--uip-border-radius);
  background: var(--uip-notification-background);
  color: var(--uip-text-color-inverse);
}
.uip-dark-logo {
  display: none;
}
.uip-icon-hover {
  opacity: 0;
}
.uip-icon-hover-container {
  &:hover {
    .uip-icon-hover {
      opacity: 1;
    }
  }
}
.uip-google-sign-in {
  position: relative;

  .uip-icon-hover {
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  &:hover {
    .uip-icon-hover {
      opacity: 1;
    }
  }
}

.uip-font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/**
* BUTTONS CLASSES SHORTCUTS
*/

.uip-button-default {
  padding-top: var(--uip-padding-button);
  padding-bottom: var(--uip-padding-button);
  padding-left: var(--uip-padding-xs);
  padding-right: var(--uip-padding-xs);
  border-radius: var(--uip-button-border-radius);
  white-space: nowrap;
  line-height: normal;
  cursor: pointer;
  border-style: solid;
  font-size: var(--uip-text-m);
  color: var(--uip-text-color-base);
  background-color: var(--uip-color-base-1);
  border-width: var(--uip-button-border-width);
  border-color: var(--uip-button-border-color);
  user-select: none;
  &:hover {
    color: var(--uip-text-color-base);
    background-color: var(--uip-color-base-2);
  }
  &:active {
    background-color: var(--uip-color-base-1);
    color: var(--uip-text-color-base);
    border-style: solid;
    border-width: var(--uip-button-border-width);
    border-color: var(--uip-button-border-color);
    top: inherit;
    outline: 2px solid var(--uip-color-primary-lighter);
  }
  &:focus {
    box-shadow: none;
    outline: 2px solid var(--uip-color-primary-lighter);
  }
}
.uip-button-default:disabled {
  color: var(--uip-text-color-muted);
  cursor: not-allowed;
}
.uip-button-grey {
  padding-top: var(--uip-padding-button);
  padding-bottom: var(--uip-padding-button);
  padding-left: var(--uip-padding-s);
  padding-right: var(--uip-padding-s);
  border-radius: var(--uip-border-radius);
  cursor: pointer;
  border: none;
  font-size: var(--uip-text-m);
  background-color: var(--uip-color-base-0);
  @extend .hover\:uip-background-grey;
}

.uip-button-primary {
  @extend .uip-button-default;
  background-color: var(--uip-color-primary);
  border-color: var(--uip-button-primary-border-color);
  color: var(--uip-text-color-inverse);

  &:hover {
    color: var(--uip-text-color-inverse);
    background-color: var(--uip-color-primary-darker);
    border-color: var(--uip-button-primary-border-color);
    color: var(--uip-text-color-inverse);
  }
  &:active {
    background-color: var(--uip-color-primary);
  }
}

.uip-button-danger {
  @extend .uip-button-default;
  border-color: var(--uip-color-red);
  background-color: var(--uip-color-red-lighter);
  color: var(--uip-color-red);
  &:hover {
    background-color: var(--uip-color-red-lighter);
    color: var(--uip-color-red-darker);
  }
  &:active {
    background-color: var(--uip-color-red-lighter);
  }
}
.uip-button-warning {
  @extend .uip-button-default;
  border-color: var(--uip-color-orange);
  background-color: var(--uip-color-orange-lighter);
  color: var(--uip-text-color-base);
  &:hover {
    background-color: var(--uip-color-orange-lighter);
    color: var(--uip-text-color-emphasis);
  }
  &:active {
    background-color: var(--uip-color-orange-lighter);
    color: var(--uip-text-color-emphasis);
  }
}

.uip-button-secondary {
  @extend .uip-button-primary;
  @extend .hover\:uip-background-secondary;
  text-decoration: none;
  background-color: var(--uip-color-accent);
  line-height: normal;
}

/**
* NOTIFCATION CLASSES SHORTCUTS
*/
#notification-drop {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 999999999;
  pointer-events: bounding-box;
}
.uip-notification {
  background: var(--uip-notification-background);
  color: var(--uip-text-color-inverse);
  margin-bottom: var(--uip-margin-xs);
  padding: var(--uip-padding-xs);
  border-radius: var(--uip-border-radius-large);
  font-size: var(--uip-text-m);
  display: inline-block;
  font-weight: 300;

  max-width: 100%;
  .uip-notification-status {
    background-color: var(--uip-color-primary);
  }
  &.uip-success {
    .uip-notification-status {
      background-color: var(--uip-color-green);
    }
  }
  &.uip-error {
    .uip-notification-status {
      background-color: var(--uip-color-red);
    }
  }
  &.uip-warning {
    .uip-notification-status {
      background-color: var(--uip-color-orange);
    }
  }
  &.uip-default {
    .uip-notification-status {
      background-color: var(--uip-color-primary);
    }
  }
}
#notification-drop {
  display: flex;
  flex-direction: column-reverse;
  width: auto;
  align-items: center;
  row-gap: var(--uip-margin-xs);
  padding-top: 30px;
  padding-left: 15px;
  padding-right: 30px;

  .uip-notification {
    transition: all 0.3s ease;
    position: absolute;
    opacity: 0;
  }
  .uip-notification:nth-last-child(2) {
    bottom: -10px;
    filter: blur(1px);
    opacity: 1;
    zoom: (0.9);
  }
  .uip-notification:nth-last-child(3) {
    bottom: -20px;
    filter: blur(2px);
    opacity: 1;
    zoom: (0.8);
  }
  .uip-notification:last-child {
    filter: blur(0);
    position: relative;
    opacity: 1;
  }
}
#notification-drop {
  &:hover {
    .uip-notification {
      filter: blur(0);
      position: relative;
      opacity: 1;
      zoom: (1);
      margin-bottom: 0 !important;
      bottom: auto;
    }
  }
}

/**
* HEIGHT CLASSES
*/
.uip-h-auto {
  height: auto;
}
.uip-h-2 {
  height: 2px;
  min-height: 2px;
}
.uip-h-4 {
  height: 4px;
  min-height: 4px;
}
.uip-h-5 {
  height: 5px;
  min-height: 5px;
}
.uip-h-6 {
  height: 6px;
  min-height: 6px;
}
.uip-h-8 {
  height: 6px;
}
.uip-h-10 {
  height: 10px;
  min-height: 10px;
}
.uip-h-12 {
  height: 12px;
  min-height: 12px;
}
.uip-h-14 {
  height: 14px;
  min-height: 14px;
}
.uip-h-18 {
  height: 18px;
  min-height: 18px;
}
.uip-h-20 {
  height: 20px;
  min-height: 20px;
}
.uip-h-22 {
  min-height: 22px;
}
.uip-h-24 {
  height: 24px;
  min-height: 24px;
}
.uip-h-26 {
  height: 26px;
  min-height: 26px;
}
.uip-h-28 {
  height: 28px;
  min-height: 28px;
}
.uip-max-h-28 {
  max-height: 28px;
}
.uip-h-30 {
  min-height: 30px;
  height: 30px;
}
.uip-h-32 {
  min-height: 32px;
}
.uip-h-38 {
  min-height: 38px;
}
.uip-h-40 {
  min-height: 40px;
}
.uip-h-48 {
  min-height: 48px;
}
.uip-h-50 {
  min-height: 50px;
}
.uip-max-h-50 {
  max-height: 50px;
}
.uip-max-h-80 {
  max-height: 80px;
}
.uip-max-h-160 {
  max-height: 160px;
}
.uip-h-70 {
  min-height: 70px;
}
.uip-h-100 {
  min-height: 100px;
}
.uip-h-130 {
  height: 130px !important;
}
.uip-h-100vh {
  min-height: 100vh;
}
.uip-h-50p {
  min-height: 50%;
}
.uip-h-100p {
  height: 100%;
}
.uip-h-100 {
  height: 130px;
  min-height: 130px;
}
.uip-h-120 {
  height: 120px;
  min-height: 120px;
}
.uip-h-130 {
  height: 130px;
  min-height: 130px;
}
.uip-h-150 {
  height: 150px;
  min-height: 150px;
}
.uip-h-200 {
  height: 200px;
  min-height: 200px;
}
.uip-h-250 {
  height: 250px;
  min-height: 250px;
}
.uip-h-380 {
  height: 380px;
}
.uip-h-400 {
  height: 400px;
}
.uip-h-420 {
  height: 420px;
}

.uip-min-h-500 {
  min-height: 500px;
}
.uip-h-500 {
  height: 500px;
}

.uip-h-600 {
  height: 600px;
}

.uip-h-200 {
  height: 200px;
  min-height: 200px;
}
.uip-min-h-18 {
  min-height: 18px;
}
.uip-min-h-20 {
  min-height: 20px;
}
.uip-min-h-30 {
  min-height: 30px;
}
.uip-min-h-48 {
  min-height: 48px;
}
.uip-min-h-50 {
  min-height: 50px;
}
.uip-min-h-200 {
  min-height: 200px;
}
.uip-min-h-300 {
  min-height: 300px;
}
.uip-min-h-400 {
  min-height: 400px;
}
.uip-max-h-30 {
  max-height: 30px;
}
.uip-max-h-200 {
  max-height: 200px;
}
.uip-max-h-100p {
  max-height: 100%;
}
.uip-max-h-120 {
  max-height: 120px;
}
.uip-max-h-100 {
  max-height: 100px;
}
.uip-max-h-130 {
  max-height: 130px;
}
.uip-max-h-150 {
  max-height: 150px;
}
.uip-max-h-200 {
  max-height: 200px;
}
.uip-max-h-280 {
  max-height: 280px;
}
.uip-max-h-300 {
  height: 300px;
  max-height: 300px;
}

.uip-max-h-400 {
  max-height: 400px;
}

.uip-max-h-500 {
  max-height: 500px;
}
.uip-max-h-600 {
  max-height: 600px;
}
.uip-max-h-800 {
  height: 800px;
  max-height: 800px;
}
.uip-max-h-300 {
  height: 300px;
  min-height: 300px;
  max-height: 300px;
}

.uip-h-viewport {
  min-height: 100vh;
}
.uip-max-h-viewport {
  max-height: 100vh;
}
/**
* WIDTH CLASSES
*/
.uip-w-auto {
  width: auto;
}
.uip-w-1 {
  width: 2px;
}
.uip-w-2 {
  width: 2px;
}
.uip-w-4 {
  width: 4px;
}
.uip-w-5 {
  width: 5px;
}
.uip-w-6 {
  width: 6px;
}
.uip-w-8 {
  width: 8px;
}
.uip-w-9 {
  width: 9px;
}
.uip-w-10 {
  width: 10px;
}
.uip-w-12 {
  width: 12px;
}
.uip-w-14 {
  width: 14px;
}
.uip-w-15 {
  width: 15px;
}
.uip-w-16 {
  width: 16px;
}
.uip-w-18 {
  width: 18px;
}
.uip-w-20 {
  width: 20px;
}
.uip-w-22 {
  width: 22px;
}
.uip-w-24 {
  width: 24px;
}
.uip-w-25 {
  width: 25px;
}
.uip-w-26 {
  width: 26px;
}
.uip-w-28 {
  width: 28px;
}
.uip-w-30 {
  width: 30px;
}
.uip-min-w-18 {
  min-width: 18px;
}
.uip-min-w-20 {
  min-width: 20px;
}
.uip-min-w-28 {
  min-width: 28px;
}
.uip-min-w-35 {
  min-width: 35px;
}
.uip-min-w-40 {
  min-width: 40px;
}
.uip-min-w-60 {
  min-width: 60px;
}
.uip-min-w-100 {
  min-width: 100px;
}
.uip-min-w-130 {
  min-width: 130px;
}
.uip-min-w-150 {
  min-width: 150px;
}
.uip-min-w-160 {
  min-width: 160px;
}
.uip-min-w-200 {
  min-width: 200px;
}
.uip-min-w-320 {
  min-width: 320px;
}
.uip-w-38 {
  width: 38px;
}
.uip-w-32 {
  width: 32px;
}
.uip-w-40 {
  width: 40px;
}
.uip-w-48 {
  width: 48px;
}
.uip-w-50 {
  width: 50px;
}
.uip-w-60 {
  width: 60px;
}
.uip-w-70 {
  width: 70px;
}

.uip-w-80 {
  width: 80px;
}

.uip-w-100 {
  width: 100px;
}
.uip-w-120 {
  width: 120px;
}

.uip-w-100vw {
  width: 100vw;
}
.uip-w-125 {
  width: 125px;
}
.uip-w-150 {
  width: 150px;
}
.uip-w-160 {
  width: 160px;
}
.uip-w-180 {
  width: 180px;
}
.uip-w-200 {
  width: 200px;
}
.uip-w-240 {
  width: 240px;
}
.uip-w-250 {
  width: 250px;
}
.uip-w-260 {
  width: 260px;
}
.uip-w-280 {
  width: 280px;
}
.uip-w-190 {
  width: 190px;
}
.uip-min-w-250 {
  min-width: 250px;
}

.uip-min-w-300 {
  min-width: 300px;
}
.uip-w-320 {
  width: 320px;
}
.uip-min-w-350 {
  min-width: 350px;
}
.uip-min-w-400 {
  min-width: 400px;
}
.uip-min-w-500 {
  min-width: 500px;
}
.uip-min-w-600 {
  min-width: 600px;
}
.uip-min-w-700 {
  min-width: 700px;
}
.uip-min-w-1000 {
  min-width: 1000px;
}
.uip-w-300 {
  width: 300px;
}
.uip-w-350 {
  width: 350px;
}
.uip-w-400 {
  width: 400px;
}
.uip-w-420 {
  width: 420px;
}
.uip-w-440 {
  width: 440px;
}
.uip-w-450 {
  width: 450px;
}
.uip-w-500 {
  width: 500px;
}

.uip-w-600 {
  width: 600px;
}
.uip-max-w-500 {
  max-width: 500px;
}
.uip-max-w-600 {
  max-width: 600px;
}
.uip-max-w-700 {
  max-width: 700px;
}
.uip-w-700 {
  width: 700px;
}
.uip-w-900 {
  width: 900px;
}
.uip-w-1000 {
  width: 1000px;
}
.uip-w-40p {
  width: 40%;
}
.uip-w-50p {
  width: 50%;
}
.uip-w-10p {
  width: 10%;
}
.uip-w-80p {
  width: 80%;
}
.uip-w-90p {
  width: 90%;
}
.uip-w-100p {
  width: 100%;
}
.uip-w-vw {
  width: 100vw;
}
.uip-w-20p {
  width: 20%;
}
.uip-w-30p {
  width: 30%;
}
.uip-w-70p {
  width: 70%;
}
@media only screen and (max-width: 768px) {
  .uip-w-100p-mobile {
    width: 100%;
  }
}
.uip-max-w-13 {
  max-width: 13px;
}
.uip-max-w-13 {
  max-width: 13px;
}
.uip-max-w-20 {
  max-width: 20px;
}
.uip-max-w-24 {
  max-width: 24px;
}
.uip-max-w-32 {
  max-width: 32px;
}
.uip-max-w-60 {
  max-width: 60px;
}
.uip-max-w-80 {
  max-width: 80px;
}
.uip-max-w-100 {
  max-width: 100px;
}
.uip-max-w-150 {
  max-width: 150px;
}
.uip-max-w-160 {
  max-width: 160px;
}
.uip-max-w-250 {
  max-width: 250px;
}
.uip-max-w-260 {
  max-width: 260px;
}
.uip-max-w-300 {
  max-width: 300px;
}
.uip-max-w-320 {
  max-width: 320px;
}
.uip-max-w-350 {
  max-width: 350px;
}
.uip-max-w-900 {
  max-width: 900px;
}
.uip-max-w-1300 {
  max-width: 1300px;
}
.uip-max-w-200 {
  max-width: 200px;
}
.uip-max-w-400 {
  max-width: 400px;
}
.uip-max-w-80p {
  max-width: 80%;
}
.uip-max-w-90p {
  max-width: 90%;
}
.uip-max-w-100p {
  max-width: 100%;
}
.uip-max-w-100vw {
  max-width: calc(100vw - 60px);
}
.uip-ratio-1-1 {
  aspect-ratio: 1 / 1;
}
.uip-ratio-16-10 {
  aspect-ratio: 16 / 10;
}
///ZOOM LEVEL
.uip-zoom-0-8 {
  zoom: 0.8;
}
//DESKTOP UPWARDS
[class*="uip-width"] {
  box-sizing: border-box;
  max-width: 100%;
  display: inline-grid;
}

.uip-width-xxsmall {
  width: calc(100% * 1 / 6.001);
}

.uip-width-xsmall {
  width: 20%;
}

.uip-width-small {
  width: 25%;
}
.uip-width-small-medium {
  width: calc(100% * 1 / 3.001);
}
.uip-width-medium {
  width: 50%;
}
.uip-width-medium-large {
  width: calc(100% * 2 / 3.001);
}
.uip-width-large {
  width: 75%;
}
.uip-width-xlarge {
  width: 100%;
}
.uip-width-auto {
  flex: 1;
  min-width: 1px;
}

.uip-masonry {
  column-gap: var(--uip-margin-m);
  max-width: 100%;
  min-width: 1px;
  & > * {
    display: inline-block;
    vertical-align: top;
    width: 100%;
  }
}

///IPAD / SMALL LAPTOP
@media (max-width: 1400px) {
  .uip-width-xxsmall {
    width: 25%;
  }

  .uip-width-xsmall,
  .uip-width-small,
  .uip-width-small-medium {
    width: 50%;
  }
  .uip-width-medium-large {
    width: 75%;
  }
  .uip-masonry {
    column-count: 4 !important;
  }
}

@media (max-width: 1100px) {
  .uip-masonry {
    column-count: 3 !important;
  }
  .litepicker {
    .container__months.columns-2 {
      widows: auto;
    }
  }
}

@media (max-width: 799px) {
  .uip-width-xxsmall,
  .uip-width-xsmall,
  .uip-width-small,
  .uip-width-small-medium,
  .uip-width-medium,
  .uip-width-medium-large,
  .uip-width-large,
  .uip-width-xlarge {
    width: 100%;
  }
  .uip-masonry {
    column-count: 2 !important;
  }

  .litepicker {
    left: 0 !important;
    width: auto;
    overflow: auto !important;
    .container__predefined-ranges {
      display: none !important;
    }
    .container__months.columns-2 {
      widows: auto;
    }
  }
}

.uip-grid {
  margin-left: -30px;
  & > * {
    padding-left: 30px;
  }
}

.uip-grid-small {
  margin-left: -15px;
  & > * {
    padding-left: 15px;
  }
}
.uip-grid-large {
  margin-left: -50px;
  & > * {
    padding-left: 50px;
  }
}
/**
* CARD CLASSES
*/
.uip-card {
  box-shadow: 0 var(--uip-card-shadow-spread) var(--uip-card-shadow-blur) var(--uip-card-shadow-color);
  border: var(--uip-card-border);
  border-radius: var(--uip-card-border-radius);
  background-color: var(--uip-color-base-1);
  overflow: auto;
}
/**
* INPUT CLASSES
*/
.uip-standard-input {
  border-radius: var(--uip-border-radius) !important;
  border: var(--uip-border-radius) solid var(--uip-border-color);
}
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="new-password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
  &.uip-input {
    border-radius: var(--uip-border-radius-large);
    border: var(--uip-border-width) solid var(--uip-color-base-1);
    color: var(--uip-text-color-base);
    background-color: var(--uip-color-base-1);
    margin: 0;
    &:focus {
      outline: 2px solid var(--uip-color-primary-lighter);
      border: var(--uip-border-width) solid var(--uip-color-base-1);
      box-shadow: none;
    }
    &:hover,
    &:active {
      border: var(--uip-border-width) solid var(--uip-color-base-1);
      color: var(--uip-text-color-base);
    }
    &::placeholder {
      color: var(--uip-text-color-muted);
      opacity: 1;
    }
  }
  &.uip-input-small {
    border-radius: var(--uip-border-radius-large);
    border: var(--uip-border-width) solid var(--uip-color-base-1);
    color: var(--uip-text-color-base);
    background-color: var(--uip-color-base-1);
    margin: 0;
    font-size: 0.85em;
    min-height: auto;
    &:focus {
      outline: 2px solid var(--uip-color-primary-lighter);
      box-shadow: none;
      border: var(--uip-border-width) solid var(--uip-color-base-1);
    }
    &:hover,
    &:active {
      color: var(--uip-text-color-base);
      border: var(--uip-border-width) solid var(--uip-color-base-1);
    }
    &::placeholder {
      color: var(--uip-text-color-muted);
      opacity: 1;
    }
  }
}

select.uip-input {
  min-height: 27px;
  height: 27px;
  -webkit-appearance: none;
  padding-left: 7px;
  padding-right: 7px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiIGZpbGw9IiM4MjgyOTkiPjxwYXRoIGQ9Ik00ODAtMzU3cS02IDAtMTEtMnQtMTAtN0wyNjEtNTY0cS05LTktOS0yMXQ5LTIxcTktOSAyMS41LTl0MjEuNSA5bDE3NiAxNzYgMTc2LTE3NnE5LTkgMjEtOXQyMSA5cTkgOSA5IDIxLjV0LTkgMjEuNUw1MDEtMzY2cS01IDUtMTAgN3QtMTEgMloiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  background-size: 18px 18px;
}

input[type="number"].uip-remove-steps::-webkit-outer-spin-button,
input[type="number"].uip-remove-steps::-webkit-inner-spin-button,
input[type="number"].uip-remove-steps {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield !important;
}
input[type="radio"] {
  &.uip-input {
    box-shadow: none;
    &:checked {
      border-color: var(--uip-color-primary);
    }
    &:checked::before {
      background-color: var(--uip-color-primary);
    }
    &:focus,
    &:active {
      outline: 2px solid var(--uip-color-primary-lighter);
    }
  }
}
.settings_page_uip-ui-builder input.uip-input {
  background: var(--uip-color-base-1);
  border: 1px solid var(--uip-color-base-1);
}

.uip-checkbox[type="checkbox"] {
  border-radius: var(--uip-border-radius);
  box-shadow: none;
  background-color: var(--uip-color-base-0);
  margin: 0 !important;
  margin-right: 0 !important;
  &:checked {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij48cGF0aCBkPSJNIDE5Ljk4MDQ2OSA1Ljk5MDIzNDQgQSAxLjAwMDEgMS4wMDAxIDAgMCAwIDE5LjI5Mjk2OSA2LjI5Mjk2ODggTCA5IDE2LjU4NTkzOCBMIDUuNzA3MDMxMiAxMy4yOTI5NjkgQSAxLjAwMDEgMS4wMDAxIDAgMSAwIDQuMjkyOTY4OCAxNC43MDcwMzEgTCA4LjI5Mjk2ODggMTguNzA3MDMxIEEgMS4wMDAxIDEuMDAwMSAwIDAgMCA5LjcwNzAzMTIgMTguNzA3MDMxIEwgMjAuNzA3MDMxIDcuNzA3MDMxMiBBIDEuMDAwMSAxLjAwMDEgMCAwIDAgMTkuOTgwNDY5IDUuOTkwMjM0NCB6Ii8+PC9zdmc+");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--uip-color-primary);
    border-color: var(--uip-color-primary);
  }
  &:checked::before {
    content: "";
    display: none;
  }
  &:focus,
  &:active {
    outline: 2px solid var(--uip-color-primary-lighter);
  }
  &.uip-checkbox-round {
    border-radius: 50%;
  }
}
@media screen and (max-width: 782px) {
  .uip-checkbox[type="checkbox"],
  .input[type="radio"] {
    height: 1rem;
    width: 1rem;
  }
}
/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
  &.uip-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;

    /* Removes default focus */
    &:focus {
      outline: none;
    }

    /***** Chrome, Safari, Opera and Edge Chromium styles *****/
    /* slider track */
    &::-webkit-slider-runnable-track {
      background-color: var(--uip-color-primary-lighter);
      border-radius: 0.5rem;
      height: 5px;
    }

    /* slider thumb */
    &::-webkit-slider-thumb {
      -webkit-appearance: none; /* Override default look */
      appearance: none;
      margin-top: -3px; /* Centers thumb on the track */

      /*custom styles*/
      background-color: var(--uip-color-base-0);
      border: 1px solid var(--uip-color-accent);
      filter: drop-shadow(0px 2px 2px var(--uip-shadow-color));
      height: 10px;
      width: 10px;
      border-radius: 50%;
    }

    &:focus::-webkit-slider-thumb {
      outline: 2px solid var(--uip-color-primary-lighter);
    }

    /******** Firefox styles ********/
    /* slider track */
    &::-moz-range-track {
      background-color: var(--uip-color-primary-lighter);
      border-radius: 0.5rem;
      height: 5px;
    }

    /* slider thumb */
    &::-moz-range-thumb {
      border: none; /*Removes extra border that FF applies*/
      border-radius: 0; /*Removes default border-radius that FF applies*/

      /*custom styles*/
      background-color: var(--uip-color-base-0);
      border: 2px solid var(--uip-color-primary);
      height: 10px;
      width: 10px;
      border-radius: 50%;
    }

    &:focus::-moz-range-thumb {
      outline: 2px solid var(--uip-color-primary-lighter);
      outline-offset: 0.125rem;
    }
  }
}

.uip-default-input {
  background-color: var(--uip-color-base-1) !important;
  border-radius: var(--uip-border-radius) !important;
  border: none !important;
}
.uip-blank-input {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: none !important;
  line-height: inherit !important;
  min-height: 0 !important;
  color: var(--uip-text-color-base) !important;
  &:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  &::placeholder {
    color: var(--uip-text-color-muted);
    opacity: 1;
  }
}
.uip-input-color::placeholder {
  color: var(--uip-text-color-muted);
}

.uip-active-outline {
  outline: 2px solid var(--uip-color-primary-lighter);
}
.uip-strong-outline {
  outline: 2px solid var(--uip-color-green);
}
.hover\:uip-active-outline {
  &:hover {
    outline: 2px solid var(--uip-color-primary-lighter);
  }
}
.hover\:uip-active-border-outline {
  &:hover {
    box-shadow: inset -1px 0 0 var(--uip-color-primary-lighter), inset 0 -1px 0 var(--uip-color-primary-lighter), inset 1px 0 0 var(--uip-color-primary-lighter),
      inset 0 1px 0 var(--uip-color-primary-lighter);
  }
}
/**
* BACKGROUND CLASSES
*/
.uip-background-default {
  background-color: var(--uip-color-base-0);
}
.uip-background-muted {
  background-color: var(--uip-color-base-1);
}
.uip-background-grey {
  background-color: var(--uip-color-base-2);
}
.uip-background-highlight {
  background-color: var(--uip-color-active);
}
.uip-background-high-light {
  background-color: var(--uip-color-highlight);
}

.uip-background-orange {
  background-color: var(--uip-color-orange);
}
.uip-background-orange-wash {
  background-color: var(--uip-color-orange-lighter);
}
.uip-background-green {
  background-color: var(--uip-color-green);
}
.uip-background-green-wash {
  background-color: var(--uip-color-green-lighter);
}
.uip-background-red {
  background-color: var(--uip-color-red);
}
.uip-background-dark-red {
  background-color: var(--uip-color-red-darker);
}

.uip-background-primary {
  background-color: var(--uip-color-primary);
}
.uip-background-secondary {
  background-color: var(--uip-color-accent);
}
.uip-background-primary-wash {
  background-color: var(--uip-color-primary-lighter);
}
.uip-background-dark {
  background-color: var(--uip-color-accent);
}

.uip-background-red-wash {
  background-color: var(--uip-color-red-lighter);
}
.uip-background-black-wash {
  background-color: var(--uip-darken-backdrop);
}
.uip-no-background {
  background: none;
}
.uip-background-cover {
  background-size: cover;
}
.uip-background-contain {
  background-size: contain;
}
.uip-background-no-repeat {
  background-repeat: no-repeat;
}
.uip-background-center {
  background-position: center center;
}
.uip-background-checkered {
  background: repeating-conic-gradient(#cccccd 0 25%, transparent 0 50%) 50%/7px 7px;
}
/**
* BORDER CLASSES
*/
.uip-border-transparent {
  border-width: var(--uip-border-width);
  border-style: solid;
  border-color: transparent;
}
.uip-border-round {
  border-radius: var(--uip-border-radius);
}
.uip-border-rounder {
  border-radius: var(--uip-border-radius-large);
}
.uip-border-round-left {
  border-radius: var(--uip-border-radius-large) 0 0 var(--uip-border-radius-large);
}
.uip-border-round-right {
  border-radius: 0 var(--uip-border-radius-large) var(--uip-border-radius-large) 0;
}
.uip-border-round-top {
  border-radius: var(--uip-border-radius) var(--uip-border-radius) 0 0;
}
.uip-border-round-bottom-left {
  border-radius: 0 0 0 5px;
}
.uip-before-border {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    left: 3px;
    background: var(--uip-color-base-2);
    width: 1px;
    top: 0;
    bottom: 6px;
  }
}
.uip-border-right-square {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.uip-border-left-square {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.uip-border-circle {
  border-radius: 50%;
}
.uip-border-none {
  border: none;
}
.uip-border {
  border-width: var(--uip-border-width);
  border-style: solid;
  border-color: var(--uip-border-color);
}
.uip-border-bottom {
  border-bottom-width: var(--uip-border-width);
  border-bottom-style: solid;
  border-bottom-color: var(--uip-border-color);
}
.uip-border-top {
  border-top-width: var(--uip-border-width);
  border-top-style: solid;
  border-top-color: var(--uip-border-color);
}
.uip-border-left {
  border-left-width: var(--uip-border-width);
  border-left-style: solid;
  border-left-color: var(--uip-border-color);
}
.uip-border-right {
  border-right-width: var(--uip-border-width);
  border-right-style: solid;
  border-right-color: var(--uip-border-color);
}
.uip-border-left-remove {
  border-left: none !important;
}
.uip-border-right-remove {
  border-right: none !important;
}
.uip-border-green {
  border-color: var(--uip-color-green);
}
.uip-border-orange {
  border-color: var(--uip-color-orange);
}
.uip-border-red {
  border-color: var(--uip-color-red);
}
.uip-border-dashed {
  outline: 1px dashed rgb(12, 92, 239, 0.54);
  outline-offset: 1px;
}
.uip-border-dashed-muted {
  border: 1px dashed var(--uip-border-color);
}
.uip-border-dashed-emphasis {
  border: 2px dashed var(--uip-color-primary-lighter);
}
.uip-border-dashed-bottom {
  border-bottom: 2px dashed var(--uip-border-color);
}
.uip-no-border {
  border: none;
}
.uip-no-transparent {
  border-color: transparent;
}

.uip-border-bottom-primary {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--uip-color-primary);
}

.uip-border-match {
  border-width: 2px;
  border-style: solid;
  border-color: var(--uip-color-base-0);
}
.uip-border-primary {
  border-width: 2px;
  border-style: solid;
  border-color: var(--uip-color-accent);
}

/**
* HOVER CLASSES
*/
.hover\:uip-background-muted {
  &:hover {
    background-color: var(--uip-color-base-1);
  }
}
.hover\:uip-background-grey {
  &:hover {
    background-color: var(--uip-color-base-2);
  }
}
.hover\:uip-background-primary-dark {
  &:hover {
    background-color: var(--uip-color-primary-darker);
  }
}
.hover\:uip-background-primary-wash {
  &:hover {
    background-color: var(--uip-color-primary-lighter);
  }
}
.hover\:uip-background-secondary {
  &:hover {
    background-color: var(--uip-color-accent-darker);
  }
}
.hover\:uip-background-red {
  &:hover {
    background-color: var(--uip-color-red);
  }
}
.hover\:uip-color-epmhasis {
  &:hover {
    color: var(--uip-text-color-emphasis);
  }
}
.hover\:uip-shadow {
  &:hover {
    @extend .uip-shadow;
  }
}

/** --uip-text-color-base: var(--uip-color-primary);
--uip-text-color-emphasis: var(--uip-color-primary-darker);
* LINK CLASSES
*/
.uip-link-emphasis {
  color: var(--uip-color-primary);
  cursor: pointer;
  &:hover,
  &:active {
    color: var(--uip-color-primary-darker);
  }
}
.uip-link-default {
  color: var(--uip-text-color-base);
  cursor: pointer;
  &:hover,
  &:active {
    color: var(--uip-text-color-emphasis);
  }
  &:focus {
    border-radius: var(--uip-border-radius);
    outline: 2px solid var(--uip-color-primary-lighter);
    box-shadow: none;
    color: var(--uip-text-color-emphasis);
  }
}
.uip-link-muted {
  color: var(--uip-text-color-muted);
  cursor: pointer;
  &:hover,
  &:active {
    color: var(--uip-text-color-base);
  }
  &:focus {
    border-radius: var(--uip-border-radius);
    outline: 2px solid var(--uip-color-primary-lighter);
    box-shadow: none;
    color: var(--uip-text-color-emphasis);
  }
}
.uip-link-disabled {
  color: var(--uip-text-color-muted);
  cursor: pointer;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  &:hover,
  &:active {
    color: var(--uip-text-color-base);
  }
}
.uip-link-danger {
  color: var(--uip-color-red);
  cursor: pointer;
  &:hover,
  &:active {
    color: var(--uip-color-red-darker);
  }
}
.uip-link-inverse {
  color: #fff;
  cursor: pointer;
  &:hover,
  &:active {
    color: #ddd;
  }
}
.uip-no-outline {
  outline: none !important;
  box-shadow: none !important;
}
.uip-no-underline {
  text-decoration: none;
}
.uip-link-focus:focus {
  box-shadow: none;
  border-radius: 4px;
  outline: 2px solid var(--uip-color-primary-lighter);
}

/**
* TEXT CLASSES
*/
.uip-text-xxs {
  font-size: var(--uip-text-xxs);
}
.uip-text-xs {
  font-size: var(--uip-text-xs);
  line-height: 1.4;
}
.uip-text-s {
  font-size: var(--uip-text-s);
}
.uip-text-m {
  font-size: var(--uip-text-m);
}
.uip-text-l {
  font-size: var(--uip-text-l);
  line-height: 1.2;
}
.uip-text-xl {
  font-size: var(--uip-text-xl);
}
.uip-text-xxl {
  font-size: var(--uip-text-xxl);
  line-height: 1.1;
}

.uip-text-muted {
  color: var(--uip-text-color-muted);
}
.uip-text-normal {
  color: var(--uip-text-color-base);
}
.uip-text-emphasis {
  color: var(--uip-text-color-emphasis);
}

.uip-text-white {
  color: #fff;
}
.uip-text-primary {
  color: var(--uip-color-primary);
}

.uip-text-accent {
  color: var(--uip-color-accent);
}

.uip-text-orange {
  color: var(--uip-color-orange);
}
.uip-text-green {
  color: var(--uip-color-green);
}
.uip-text-yellow {
  color: var(--uip-color-green);
}
.uip-text-red {
  color: var(--uip-color-red);
}
.uip-text-danger {
  color: var(--uip-color-red);
}
.uip-text-inverse {
  color: var(--uip-text-color-inverse);
}
.uip-text-left {
  text-align: left;
}
.uip-text-right {
  text-align: right;
}
.uip-text-center {
  text-align: center;
}
.uip-line-height-0 {
  line-height: 0;
}
.uip-line-height-1 {
  line-height: 1;
}

///FORCE LIGHT TEXT / VALUES
.uip-light-text {
  color: #cecece;
  .uip-text-emphasis {
    color: #fff;
  }
  .uip-link-default {
    color: #cecece;
  }
  .uip-text-normal {
    color: #e3e3e3;
  }
  .uip-text-muted {
    color: #ffffff80;
  }
  .uip-background-muted {
    background-color: #2d2d2d;
  }
  .hover\:uip-background-muted {
    &:hover {
      background-color: #2d2d2d;
    }
  }
}
.uip-text-capitalize {
  text-transform: capitalize;
}
.uip-text-underline {
  text-decoration: underline;
}
.uip-text-italic {
  font-style: italic;
}

.uip-block-quote {
  &::before {
    content: "“";
    color: var(--uip-text-color-muted);
    font-size: 40px;
    margin-right: 5px;
    opacity: 0.5;
  }
  &::after {
    content: "”";
    color: var(--uip-text-color-muted);
    font-size: 40px;
    margin-left: 5px;
    opacity: 0.5;
  }
}
////OVERVIEW SPECIFIC
.uip-primary-column {
}
/**
* FONT CLASSES
*/
.uip-body-font {
  font-family: var(--uip-body-font-family);
}
.uip-header-font {
  font-family: var(--uip-header-font-family);
}
.uip-text-weight-normal {
  font-weight: 400;
}
.uip-text-bold {
  font-weight: var(--uip-text-bold);
  font-variation-settings: "wght" 500, "opsz" 16, "GRAD" 100;
}
.uip-text-lowercase {
  text-transform: lowercase;
}
.uip-text-uppercase {
  text-transform: uppercase;
}
/** 
* PADDING CLASSES
*/
.uip-padding-xxxs {
  padding: var(--uip-padding-xxxs);
}
.uip-padding-xxs {
  padding: var(--uip-padding-xxs);
}
.uip-padding-xs {
  padding: var(--uip-padding-xs);
}
.uip-padding-s {
  padding: var(--uip-padding-s);
}
.uip-padding-m {
  padding: var(--uip-padding-m);
}
.uip-padding-l {
  padding: var(--uip-padding-l);
}
//PADDING LEFT
.uip-padding-left-xxxs {
  padding-left: var(--uip-padding-xxxs);
}
.uip-padding-left-xxs {
  padding-left: var(--uip-padding-xxs);
}
.uip-padding-left-xs {
  padding-left: var(--uip-padding-xs);
}
.uip-padding-left-s {
  padding-left: var(--uip-padding-s);
}
.uip-padding-left-m {
  padding-left: var(--uip-padding-m);
}
.uip-padding-left-l {
  padding-left: var(--uip-padding-l);
}
.uip-padding-left-remove {
  padding-left: 0;
}
//PADDING RIGHT
.uip-padding-right-xxxs {
  padding-right: var(--uip-padding-xxxs);
}
.uip-padding-right-xxs {
  padding-right: var(--uip-padding-xxs);
}
.uip-padding-right-xs {
  padding-right: var(--uip-padding-xs);
}
.uip-padding-right-s {
  padding-right: var(--uip-padding-s);
}
.uip-padding-right-m {
  padding-right: var(--uip-padding-m);
}
.uip-padding-right-l {
  padding-right: var(--uip-padding-l);
}
.uip-padding-right-remove {
  padding-right: 0;
}
//PADDING TOP
.uip-padding-top-remove {
  padding-top: 0;
}
.uip-padding-top-xxxs {
  padding-top: var(--uip-padding-xxxs);
}
.uip-padding-top-xxs {
  padding-top: var(--uip-padding-xxs);
}
.uip-padding-top-xs {
  padding-top: var(--uip-padding-xs);
}
.uip-padding-top-s {
  padding-top: var(--uip-padding-s);
}
.uip-padding-top-m {
  padding-top: var(--uip-padding-m);
}
.uip-padding-top-l {
  padding-top: var(--uip-padding-l);
}
.uip-padding-top-remove {
  padding-top: 0;
}
//PADDING BOTTOM
.uip-padding-bottom-remove {
  padding-bottom: 0;
}
.uip-padding-bottom-xxxs {
  padding-bottom: var(--uip-padding-xxxs);
}
.uip-padding-bottom-xs {
  padding-bottom: var(--uip-padding-xxs);
}
.uip-padding-bottom-xs {
  padding-bottom: var(--uip-padding-xs);
}
.uip-padding-bottom-xxs {
  padding-bottom: var(--uip-padding-xxs);
}
.uip-padding-bottom-s {
  padding-bottom: var(--uip-padding-s);
}
.uip-padding-bottom-m {
  padding-bottom: var(--uip-padding-m);
}
.uip-padding-bottom-l {
  padding-bottom: var(--uip-padding-l);
}
.uip-padding-remove-top {
  padding-top: 0;
}
.uip-padding-remove-bottom {
  padding-bottom: 0;
}
.uip-padding-remove {
  padding: 0;
}

/** 
* MARGIN CLASSES
*/
.uip-margin-xxs {
  margin: var(--uip-margin-xxs);
}
.uip-margin-xs {
  margin: var(--uip-margin-xs);
}
.uip-margin-s {
  margin: var(--uip-margin-s);
}
.uip-margin-m {
  margin: var(--uip-margin-m);
}
.uip-margin-l {
  margin: var(--uip-margin-l);
}
//margin LEFT
.uip-margin-left-xxs {
  margin-left: var(--uip-margin-xxs);
}
.uip-margin-left-xs {
  margin-left: var(--uip-margin-xs);
}
.uip-margin-left-s {
  margin-left: var(--uip-margin-s);
}
.uip-margin-left-m {
  margin-left: var(--uip-margin-m);
}
.uip-margin-left-l {
  margin-left: var(--uip-margin-l);
}
.uip-margin-left-auto {
  margin-left: auto;
}
.uip-margin-left-remove {
  margin-left: 0;
}
//margin RIGHT
.uip-margin-right-xxs {
  margin-right: var(--uip-margin-xxs);
}
.uip-margin-right-xs {
  margin-right: var(--uip-margin-xs);
}
.uip-margin-right-s {
  margin-right: var(--uip-margin-s);
}
.uip-margin-right-m {
  margin-right: var(--uip-margin-m);
}
.uip-margin-right-l {
  margin-right: var(--uip-margin-l);
}
.uip-margin-right-remove {
  margin-right: 0;
}
//margin TOP
.uip-margin-top-xxs {
  margin-top: var(--uip-margin-xxs);
}
.uip-margin-top-xs {
  margin-top: var(--uip-margin-xs);
}
.uip-margin-top-s {
  margin-top: var(--uip-margin-s);
}
.uip-margin-top-m {
  margin-top: var(--uip-margin-m);
}
.uip-margin-top-l {
  margin-top: var(--uip-margin-l);
}
.uip-margin-top-remove {
  margin-top: 0;
}
//margin BOTTOM
.uip-margin-bottom-xxs {
  margin-bottom: var(--uip-margin-xxs);
}
.uip-margin-bottom-xs {
  margin-bottom: var(--uip-margin-xs);
}
.uip-margin-bottom-s {
  margin-bottom: var(--uip-margin-s);
}
.uip-margin-bottom-m {
  margin-bottom: var(--uip-margin-m);
}
.uip-margin-bottom-l {
  margin-bottom: var(--uip-margin-l);
}
.uip-margin-bottom-remove {
  margin-bottom: 0;
}
.uip-margin-remove {
  margin: 0 !important;
}
.uip-margin-left--8 {
  margin-left: -8px;
}
.uip-margin-left--5 {
  margin-left: -5px;
}

///GAP CLASSES
.uip-gap-xxxs {
  gap: var(--uip-margin-xxxs);
}
.uip-gap-xxs {
  gap: var(--uip-margin-xxs);
}
.uip-gap-xs {
  gap: var(--uip-margin-xs);
}
.uip-gap-s {
  gap: var(--uip-margin-s);
}
.uip-gap-m {
  gap: var(--uip-margin-m);
}
.uip-gap-l {
  gap: var(--uip-margin-l);
}

///ROW GAP CLASSES
.uip-row-gap-xxxs {
  row-gap: 3px;
}
.uip-row-gap-xxs {
  row-gap: var(--uip-margin-xxs);
}
.uip-row-gap-xs {
  row-gap: var(--uip-margin-xs);
}
.uip-row-gap-s {
  row-gap: var(--uip-margin-s);
}
.uip-row-gap-m {
  row-gap: var(--uip-margin-m);
}
.uip-row-gap-l {
  row-gap: var(--uip-margin-l);
}

.uip-grid-col-1-2 {
  display: grid;
  grid-template-columns: 0.5fr 0.6fr;
  grid-gap: var(--uip-margin-xs);
}

.uip-grid-col-1-3 {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-gap: var(--uip-margin-xs);
}
.uip-grid-col-4-6 {
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-gap: var(--uip-margin-xs);
}
.uip-grid-col-3-1 {
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-gap: var(--uip-margin-xs);
}
//Grid classes
.uip-grid-col-2 {
  --grid-layout-gap: var(--uip-margin-s);
  --grid-column-count: 2;
  --grid-item--min-width: 100px;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}
.uip-grid-col-3 {
  --grid-layout-gap: var(--uip-margin-s);
  --grid-column-count: 3;
  --grid-item--min-width: 50px;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}
.uip-grid-col-4 {
  --grid-layout-gap: var(--uip-margin-s);
  --grid-column-count: 4;
  --grid-item--min-width: 50px;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}
.uip-variable-grid {
  --grid-layout-gap: var(--uip-margin-s);
  --grid-column-count: 4;
  --grid-item--min-width: 260px;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}
.uip-grid-col-5 {
  --grid-layout-gap: var(--uip-margin-s);
  --grid-column-count: 5;
  --grid-item--min-width: 120px;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}
.uip-grid-col-6 {
  --grid-layout-gap: var(--uip-margin-s);
  --grid-column-count: 6;
  --grid-item--min-width: 100px;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

.uip-grid-gap-xs {
  --grid-layout-gap: var(--uip-margin-xs);
}
.uip-grid-gap-xxs {
  --grid-layout-gap: var(--uip-margin-xxs);
}
.uip-grid-gap-m {
  --grid-layout-gap: var(--uip-margin-m);
}
.uip-grid-min-width-medium {
  --grid-item--min-width: 250px;
}

/**
* FLEX CLASSES
*/
.uip-flex {
  display: flex;
}
.uip-inline-flex {
  display: inline-flex;
}
.uip-flex-grow {
  flex-grow: 1;
  min-width: 1px;
}
.uip-flex-no-grow {
  flex-grow: 0;
}
.uip-flex-no-shrink {
  flex-shrink: 0;
}
.uip-flex-shrink {
  flex-shrink: 2;
}
.uip-flex-center {
  align-items: center;
}
.uip-flex-middle {
  justify-content: center;
}

.uip-flex-end {
  justify-content: flex-end;
}
.uip-flex-justify-end {
  justify-content: flex-end;
}
.uip-flex-column {
  flex-direction: column;
}
.uip-flex-row {
  flex-direction: row;
}
.uip-flex-reverse {
  flex-direction: row-reverse;
}
.uip-flex-between {
  justify-content: space-between;
}
.uip-flex-content-stretch {
  justify-content: stretch;
}
.uip-flex-left {
  justify-content: start;
}
.uip-flex-right {
  justify-content: end;
}
.uip-flex-wrap {
  flex-wrap: wrap;
}
.uip-flex-no-wrap {
  flex-wrap: nowrap;
}

@media only screen and (max-width: 768px) {
  .uip-flex-wrap-mobile {
    flex-wrap: wrap;
  }
}
.uip-self-flex-start {
  align-self: flex-start;
}
.uip-self-flex-center {
  align-self: center;
}
.uip-flex-start {
  align-items: flex-start;
}
.uip-flex-baseline {
  align-content: baseline;
}
.uip-flex-justify-baseline {
  align-items: baseline;
}
.uip-flex-end {
  align-items: flex-end;
}
.uip-flex-stretch {
  align-items: stretch;
}
.uip-flex-vertical-middle {
  justify-content: center;
}

/**
* POSITION CLASSES
*/
.uip-left-0 {
  left: 0;
}
.uip-left-16 {
  left: 16px;
}
.uip-left--16 {
  left: -16px;
}
.uip-left--20 {
  left: -20px;
}
.uip-left--32 {
  left: -32px;
}
.uip-right-16 {
  right: 16px;
}
.uip-bottom-16 {
  bottom: 16px;
}
.uip-left-menu {
  left: var(--uip-menu-width);
}

.uip-left-100p {
  left: 100%;
}
.uip-right-0 {
  right: 0;
}
.uip-right--8 {
  right: -8px;
}
.uip-top--8 {
  top: -8px;
}
.uip-top-16 {
  top: 16px;
}
.uip-top-50p {
  top: 50%;
}
.uip-top-80 {
  top: 80px;
}
.uip-left-50p {
  left: 50%;
}
.uip-bottom-0 {
  bottom: 0;
}
.uip-bottom-1 {
  bottom: 1px;
}
.uip-bottom-2 {
  bottom: 2px;
}
.uip-bottom-16 {
  bottom: 16px;
}
.uip-right-100p {
  right: 100%;
}
.uip-bottom-100p {
  bottom: 100%;
}
.uip-left-menu-width {
  left: var(--uip-menu-width);
}
.uip-top-0 {
  top: 0;
}
.uip-top-1 {
  top: 1px;
}
.uip-top-2 {
  top: 2px;
}
.uip-top-120p {
  top: 120%;
}
.uip-right-center {
  right: 50%;
  transform: translate(50%, 0px);
}
.uip-translateX--50p {
  transform: translateX(-50%);
}
.uip-translateY--50p {
  transform: translateY(-50%);
}
.uip-translateY--100p {
  transform: translateY(-100%);
}
.uip-translate-all-50p {
  transform: translateY(-50%) translateX(-50%);
}
.uip-translate-all-back-50p {
  transform: translateY(-50%) translateX(50%) rotate(-45deg);
}

/**
* TOOLTIP
*/

.uip-tooltip {
  border-radius: var(--uip-border-radius);
  padding: var(--uip-padding-xxs);
  background: var(--uip-color-accent);
  color: var(--uip-text-color-inverse);
  max-width: 120px;
  text-align: center;
  animation-name: uip-fade-in-delay;
  animation-duration: 0.8s;
  line-height: 1.4;
  position: fixed;
  font-size: var(--uip-text-s);
  z-index: 9;
  &::after {
    content: "";
    background: var(--uip-color-accent);
    border-radius: var(--uip-border-radius);
    width: 10px;
    height: 10px;
    position: absolute;
    top: -3px;
    transform: rotate(45deg);
    left: calc(50% - 5px);
  }
}

.uip-tooltip-top {
  &::after {
    top: calc(100% - 5px);
  }
}
/**
* ANIMATIONS CLASSES
*/
.uip-fade-in {
  animation-name: uip-fade;
  animation-duration: 0.2s;
}
.uip-fade-out {
  animation-name: uip-fade-out;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  opacity: 0;
}

.uip-focus-in {
  animation-name: uip-focus-in;
  animation-duration: 2s;
}
.uip-scale-in-top {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: top left;
}
.uip-scale-in-top-right {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: top right;
}
.uip-scale-in-top-center {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: top center;
}
.uip-scale-in {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: top right;
}
.uip-scale-in-center {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: center center;
}
.uip-scale-in-bottom {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: bottom;
}
.uip-scale-in-bottom-right {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: bottom right;
}
.uip-slide-in-right {
  animation-name: slide-in-right;
  animation-duration: 0.2s;
  transform-origin: right;
  animation-iteration-count: 1;
}
.uip-slide-in-left {
  animation-name: slide-in-left;
  animation-duration: 0.2s;
  transform-origin: right;
}
.uip-slide-out-left {
  animation-name: slide-out-left;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  transform-origin: right;
  transform: translateX(-100%);
}
.uip-slide-out-right {
  animation-name: slide-out-right;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  transform-origin: right;
  transform: translateX(100%);
}

///Vue transitions
.slide-down-enter-active {
  transition: all 0.2s ease-in-out;
  animation-name: slide-down;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  transform-origin: top center;
}

.slide-up-enter-active {
  transition: all 0.2s ease-in-out;
  animation-name: slide-down;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  transform-origin: bottom center;
}

.translate-enter-active,
.translate-leave-active {
  transition: all 0.2s ease;
  opacity: 1 !important;
}

.translate-enter-from,
.translate-leave-to {
  opacity: 0 !important;
  transform: translateX(30px);
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: scale(1, 0);
  }
  70% {
    opacity: 1;
    transform: scale(1, 1.03);
  }
  86% {
    opacity: 1;
    transform: scale(1, 1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

///Vue transitions
.slide-right-enter-active {
  transition: all 0.2s ease-in-out;
  animation-name: slide-right;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  transform-origin: top right;
}

.slide-left-enter-active {
  transition: all 0.2s ease-in-out;
  animation-name: slide-right;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  transform-origin: top left;
}
.slideinout-enter-active,
.slideinout-leave-active {
  transition: all 0.2s ease;
}
.slideinout-enter-from,
.slideinout-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.2s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: scale(0, 1);
  }
  70% {
    opacity: 1;
    transform: scale(1.03, 1);
  }
  86% {
    opacity: 1;
    transform: scale(1.01, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  80% {
    transform: translateX(0%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  80% {
    transform: translateX(0%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes slide-out-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}
@keyframes slide-out-right {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

////post folders

.uip-post-folders {
  position: fixed;
  top: calc(var(--uip-toolbar-height) + 15px);
  width: 250px;
  left: calc(var(--uip-menu-width) + 20px);
  z-index: 99999;
  *:not(.material-icons-outlined) {
    font-family: var(--uip-body-font-family);
  }
}

html[uip-post-folders="true"] {
  #wpcontent {
    margin-left: calc(var(--uip-menu-width) + 280px) !important;
  }
  .column-uip_draggable {
    width: 20px;
  }
}

@media (max-width: 900px) {
  .uip-hidden-small {
    display: none;
  }
  .mobile\:uip-w-100p {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  html[uip-post-folders="true"] {
    #wpcontent {
      margin-left: calc(var(--uip-menu-width)) !important;
      margin-top: 300px;
    }
  }
  .uip-post-folders {
    position: absolute;
    top: -300px;
    max-height: 300px;
    overflow: auto;
  }
}

.uip-remove-list-enter-active,
.uip-remove-list-leave-active {
  transition: all 0.5s ease;
}

.uip-remove-list-enter-from,
.uip-remove-list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.uip-paragraph-block {
  ul {
    list-style: circle;
  }
}

.material-icons-outlined {
  max-width: 17px;
  overflow: hidden;
  opacity: 0;
  transition: all 0.1s ease;
}

html[uip-core-app="true"] {
  overflow-x: hidden;
  body {
    transition: left 0.2s ease;
    left: 0px;
  }
}

///inline drop
inline-drop {
  position: relative;
  drop-content {
    display: none;
    z-index: 1;
  }
  &:hover {
    drop-content {
      display: block;
      position: absolute;
    }
  }
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0);
    max-height: 0;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    max-height: 9000px;
  }
}

@keyframes uip-focus-in {
  0% {
    box-shadow: 0px 0px 20px 0px var(--uip-color-primary);
    border-radius: 4px;
  }
  100% {
    box-shadow: 0px 0px 20px 0px transparent;
    border-radius: 0px;
  }
}

@keyframes uip-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes uip-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes uip-fade-in-delay {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.uip-loading-box {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: var(--uip-color-primary-lighter);
}

.uip-loader {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50px;
  background: linear-gradient(45deg, var(--uip-color-primary-lighter), var(--uip-color-primary), var(--uip-color-primary-lighter));
  left: -100%;
  animation: uip-load 1s linear infinite;
}

.uip-loader-bar {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50px;
  background: var(--uip-color-primary);
  left: -100%;
  animation: uip-load-bar 1s linear infinite;
}

.uip-load-spinner {
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-name: rotate-forever;
  animation-timing-function: linear;
  height: 16px;
  width: 16px;
  border: 4px solid rgba(250, 250, 250, 0.3);
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
}
.uip-load-spinner-dark {
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-name: rotate-forever;
  animation-timing-function: linear;
  height: 16px;
  width: 16px;
  border: 3px solid var(--uip-color-primary);
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
}

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

.uip-loading-chart {
  svg path,
  svg rect {
    fill: var(--uip-color-primary);
  }
}

.uip-hide-scrollbar {
  scroll-behavior: instant;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}
.uip-hide-scrollbar::-webkit-scrollbar {
  /* WebKit */
  width: 0 !important;
  height: 0 !important;
}
.ace_scrollbar {
  --uip-color-base-0: #111;
  --uip-color-base-1: rgb(39, 39, 44);
  --uip-color-base-2: rgb(68, 68, 78);
  &::-webkit-scrollbar {
    width: 1em;
  }
  &::-webkit-scrollbar-track {
    background-color: var(--uip-color-base-0);
    border-radius: var(--uip-border-radius);
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--uip-color-base-2);
    border: 2px solid var(--uip-color-base-0);
    border-radius: var(--uip-border-radius);
  }
}
.uip-scrollbar-hidden {
  &::-webkit-scrollbar {
    width: 0em;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 0;
  }
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }
}

.uip-fade-bottom {
  position: relative;
  &::after {
    content: "";
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

uip-highlight {
  background: rgb(255, 150, 0, 0.26);
}

@keyframes uip-load {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes uip-load-bar {
  0% {
    left: -100%;
  }
  40% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}

#uip-ajax-overlay {
  top: var(--uip-toolbar-height);
  left: var(--uip-menu-width);
  position: fixed;
  height: calc(100vh - var(--uip-toolbar-height));
  width: calc(100vw - var(--uip-menu-width));
  background: var(--uip-color-base-0);
  z-index: 9998;
  transition: all 0.3s ease-in-out;
}
#uip-ajax-overlay[src=""] {
  display: none;
}
.uip-ajax-loader {
  height: 4px;
  width: 100%;
  overflow: hidden;
  background: var(--uip-color-primary-lighter);
  position: absolute;
}
.uip-ajax-loader.uip-position-relative {
  position: relative;
}
#uip-dynamic-loader-cover {
  height: 2px;
  overflow: hidden;
  background: var(--uip-color-primary-lighter);
  width: calc(100vw - var(--uip-menu-width));
  top: calc(var(--uip-toolbar-height) + 2px);
  left: var(--uip-menu-width);
  position: fixed;
  z-index: 9999;
  display: none;
}
#uip-close-full-screen {
  display: none;
}

body.uip-full-screen {
  #uip-ajax-overlay {
    top: 0;
    left: 0;
    width: 100vw;
    padding-top: 30px;
    z-index: 999999;
    height: 100vh;
  }
  #uip-close-full-screen {
    z-index: 999999;
    display: block;
  }
  #wpcontent {
    top: 0;
    left: 0;
    width: 100vw;

    z-index: 999999;
    height: 100vh;
    position: fixed;
    transition: all 0.3s ease-in-out;
    margin-left: 0 !important;
    background: var(--uip-color-base-0);
    padding: var(--uip-padding-s);
    padding-top: 30px;
  }
}
.uip-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  input:checked + .uip-slider {
    background-color: var(--uip-color-primary);
  }

  input:focus + .uip-slider {
    box-shadow: 0 0 1px #2196f3;
  }
  input:checked + .uip-slider:before {
    font-size: 13px;
    font-variation-settings: "wght" 600;
    color: var(--uip-color-primary);
    transform: translateX(18px);
  }
  .uip-slider {
    position: absolute;
    cursor: pointer;
    display: flex;
    padding: 3px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--uip-color-primary-lighter);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 10px;
    &:before {
      font-size: 13px;
      font-variation-settings: "wght" 600;
      color: #999;
      aspect-ratio: 1/1;
      text-align: center;
      box-shadow: 0 2px 8px rgba 0, 0, 0, 0.08;
      background-color: #fff;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      border-radius: 10px;
      height: 100%;
      aspect-ratio: 1 / 1;
    }
  }
}

.uip-dark-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  input:checked + .uip-slider {
    background-color: var(--uip-color-accent);
  }

  input:focus + .uip-slider {
    box-shadow: 0 0 1px #2196f3;
  }
  input:checked + .uip-slider:before {
    content: "";
    @extend .uip-background-icon;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTEyMHEtMTUwIDAtMjU1LTEwNVQxMjAtNDgwcTAtMTUwIDEwNS0yNTV0MjU1LTEwNXExNCAwIDI3LjUgMXQyNi41IDNxLTQxIDI5LTY1LjUgNzUuNVQ0NDQtNjYwcTAgOTAgNjMgMTUzdDE1MyA2M3E1NSAwIDEwMS0yNC41dDc1LTY1LjVxMiAxMyAzIDI2LjV0MSAyNy41cTAgMTUwLTEwNSAyNTVUNDgwLTEyMFptMC04MHE4OCAwIDE1OC00OC41VDc0MC0zNzVxLTIwIDUtNDAgOHQtNDAgM3EtMTIzIDAtMjA5LjUtODYuNVQzNjQtNjYwcTAtMjAgMy00MHQ4LTQwcS03OCAzMi0xMjYuNSAxMDJUMjAwLTQ4MHEwIDExNiA4MiAxOTh0MTk4IDgyWm0tMTAtMjcwWiIvPjwvc3ZnPg==")
      center center / contain no-repeat;
    color: var(--uip-color-primary);
    transform: translateX(20px);
  }
  .uip-slider {
    position: absolute;
    cursor: pointer;
    display: flex;
    padding: 3px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--uip-color-primary-lighter);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 14px;
    &:before {
      content: "";
      @extend .uip-background-icon;
      mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTM2MHE1MCAwIDg1LTM1dDM1LTg1cTAtNTAtMzUtODV0LTg1LTM1cS01MCAwLTg1IDM1dC0zNSA4NXEwIDUwIDM1IDg1dDg1IDM1Wm0wIDgwcS04MyAwLTE0MS41LTU4LjVUMjgwLTQ4MHEwLTgzIDU4LjUtMTQxLjVUNDgwLTY4MHE4MyAwIDE0MS41IDU4LjVUNjgwLTQ4MHEwIDgzLTU4LjUgMTQxLjVUNDgwLTI4MFpNMjAwLTQ0MEg0MHYtODBoMTYwdjgwWm03MjAgMEg3NjB2LTgwaDE2MHY4MFpNNDQwLTc2MHYtMTYwaDgwdjE2MGgtODBabTAgNzIwdi0xNjBoODB2MTYwaC04MFpNMjU2LTY1MGwtMTAxLTk3IDU3LTU5IDk2IDEwMC01MiA1NlptNDkyIDQ5Ni05Ny0xMDEgNTMtNTUgMTAxIDk3LTU3IDU5Wm0tOTgtNTUwIDk3LTEwMSA1OSA1Ny0xMDAgOTYtNTYtNTJaTTE1NC0yMTJsMTAxLTk3IDU1IDUzLTk3IDEwMS01OS01N1ptMzI2LTI2OFoiLz48L3N2Zz4=")
        center center / contain no-repeat;
      color: #999;
      aspect-ratio: 1/1;
      text-align: center;
      box-shadow: 0 2px 8px rgba 0, 0, 0, 0.08;
      background-color: #fff;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      border-radius: 50%;
      line-height: 1.5;
      height: 100%;
      aspect-ratio: 1 / 1;
    }
  }
}
.uip-hover-selected-block:not(.uip-preview-selected-block) {
  //box-shadow: 0px 0px 0px 4px rgb(244 128 54);
  //box-shadow: 0 0 0 rgba(12, 92, 239, 0.6);
  //animation: pulse 2s infinite;
  outline: 1px solid cyan !important;
  outline-offset: -1px;
}

.uip-block-selected-wrap {
  outline: 1px solid blue !important;
  outline-offset: -1px;
}
.uip-block-selected-wrap.uip-block-resizing::after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background: rgba(0, 0, 255, 0.2);
  z-index: 1;
}

.uip-border-blue {
  outline: 1px solid blue !important;
  outline-offset: -1px;
}

.uip-drop-remote-template {
  height: 20px;
  width: 160px;
  border-radius: 4px;
  background: rgba(0, 0, 255, 0.4);
  * {
    display: none;
  }
}

.uip-canvas-ghost {
  background: rgba(0, 222, 255, 0.17) !important;
  border: none !important;
  border-radius: 8px;
  color: transparent !important;
  & * {
    opacity: 0;
  }
}

.uip-drop-zone {
  outline: 1px solid orange !important;
  outline-offset: -1px;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(12, 92, 239, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(12, 92, 239, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(12, 92, 239, 0);
  }
}

.IroSlider {
  //width: calc(200px - var(--uip-margin-xs) - var(--uip-margin-xs)) !important;
  margin-top: var(--uip-margin-xs) !important;
  margin-bottom: 0 !important;
  width: 240px;
}
.IroBox {
  border-radius: var(--uip-border-radius-large) !important;
}

.uip-drop-ghost {
  display: none;
}
.uip-drop-area {
}

.uip-background-icon {
  height: 1em;
  width: 1em;
  min-height: 1em;
  min-width: 1em;
  background-color: currentcolor;
  display: block;
}

.uip-inline-drag-icon {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMzYwLTE2MHEtMzMgMC01Ni41LTIzLjVUMjgwLTI0MHEwLTMzIDIzLjUtNTYuNVQzNjAtMzIwcTMzIDAgNTYuNSAyMy41VDQ0MC0yNDBxMCAzMy0yMy41IDU2LjVUMzYwLTE2MFptMjQwIDBxLTMzIDAtNTYuNS0yMy41VDUyMC0yNDBxMC0zMyAyMy41LTU2LjVUNjAwLTMyMHEzMyAwIDU2LjUgMjMuNVQ2ODAtMjQwcTAgMzMtMjMuNSA1Ni41VDYwMC0xNjBaTTM2MC00MDBxLTMzIDAtNTYuNS0yMy41VDI4MC00ODBxMC0zMyAyMy41LTU2LjVUMzYwLTU2MHEzMyAwIDU2LjUgMjMuNVQ0NDAtNDgwcTAgMzMtMjMuNSA1Ni41VDM2MC00MDBabTI0MCAwcS0zMyAwLTU2LjUtMjMuNVQ1MjAtNDgwcTAtMzMgMjMuNS01Ni41VDYwMC01NjBxMzMgMCA1Ni41IDIzLjVUNjgwLTQ4MHEwIDMzLTIzLjUgNTYuNVQ2MDAtNDAwWk0zNjAtNjQwcS0zMyAwLTU2LjUtMjMuNVQyODAtNzIwcTAtMzMgMjMuNS01Ni41VDM2MC04MDBxMzMgMCA1Ni41IDIzLjVUNDQwLTcyMHEwIDMzLTIzLjUgNTYuNVQzNjAtNjQwWm0yNDAgMHEtMzMgMC01Ni41LTIzLjVUNTIwLTcyMHEwLTMzIDIzLjUtNTYuNVQ2MDAtODAwcTMzIDAgNTYuNSAyMy41VDY4MC03MjBxMCAzMy0yMy41IDU2LjVUNjAwLTY0MFoiLz48L3N2Zz4=")
    center center / contain no-repeat;
}

.uip-star-icon-full {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI2OSAzMTQtMTY5cS0xMSA3LTIzIDZ0LTIxLThxLTktNy0xNC0xNy41dC0yLTIzLjVsNDQtMTg5LTE0Ny0xMjdxLTEwLTktMTIuNS0yMC41VDE0MC01NzFxNC0xMSAxMi0xOHQyMi05bDE5NC0xNyA3NS0xNzhxNS0xMiAxNS41LTE4dDIxLjUtNnExMSAwIDIxLjUgNnQxNS41IDE4bDc1IDE3OCAxOTQgMTdxMTQgMiAyMiA5dDEyIDE4cTQgMTEgMS41IDIyLjVUODA5LTUyOEw2NjItNDAxbDQ0IDE4OXEzIDEzLTIgMjMuNVQ2OTAtMTcxcS05IDctMjEgOHQtMjMtNkw0ODAtMjY5WiIvPjwvc3ZnPg==")
    center center / contain no-repeat;
}

.uip-star-icon-half {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTY3NXYzMTJsMTI2IDc3LTMzLTE0NCAxMTEtOTYtMTQ2LTEzLTU4LTEzNlptMCA0MDZMMzE0LTE2OXEtMTEgNy0yMyA2dC0yMS04cS05LTctMTQtMTcuNXQtMi0yMy41bDQ0LTE4OS0xNDctMTI3cS0xMC05LTEyLjUtMjAuNVQxNDAtNTcxcTQtMTEgMTItMTh0MjItOWwxOTQtMTcgNzUtMTc4cTUtMTIgMTUuNS0xOHQyMS41LTZxMTEgMCAyMS41IDZ0MTUuNSAxOGw3NSAxNzggMTk0IDE3cTE0IDIgMjIgOXQxMiAxOHE0IDExIDEuNSAyMi41VDgwOS01MjhMNjYyLTQwMWw0NCAxODlxMyAxMy0yIDIzLjVUNjkwLTE3MXEtOSA3LTIxIDh0LTIzLTZMNDgwLTI2OVoiLz48L3N2Zz4=")
    center center / contain no-repeat;
}

.uip-star-icon-empty {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtMzU0LTI4NyAxMjYtNzYgMTI2IDc3LTMzLTE0NCAxMTEtOTYtMTQ2LTEzLTU4LTEzNi01OCAxMzUtMTQ2IDEzIDExMSA5Ny0zMyAxNDNabTEyNiAxOEwzMTQtMTY5cS0xMSA3LTIzIDZ0LTIxLThxLTktNy0xNC0xNy41dC0yLTIzLjVsNDQtMTg5LTE0Ny0xMjdxLTEwLTktMTIuNS0yMC41VDE0MC01NzFxNC0xMSAxMi0xOHQyMi05bDE5NC0xNyA3NS0xNzhxNS0xMiAxNS41LTE4dDIxLjUtNnExMSAwIDIxLjUgNnQxNS41IDE4bDc1IDE3OCAxOTQgMTdxMTQgMiAyMiA5dDEyIDE4cTQgMTEgMS41IDIyLjVUODA5LTUyOEw2NjItNDAxbDQ0IDE4OXEzIDEzLTIgMjMuNVQ2OTAtMTcxcS05IDctMjEgOHQtMjMtNkw0ODAtMjY5Wm0wLTIwMVoiLz48L3N2Zz4=")
    center center / contain no-repeat;
}

.uip-arrow-icon-up {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDQwLTY0NyAyNDQtNDUxcS0xMiAxMi0yOCAxMS41VDE4OC00NTJxLTExLTEyLTExLjUtMjh0MTEuNS0yOGwyNjQtMjY0cTYtNiAxMy04LjV0MTUtMi41cTggMCAxNSAyLjV0MTMgOC41bDI2NCAyNjRxMTEgMTEgMTEgMjcuNVQ3NzItNDUycS0xMiAxMi0yOC41IDEyVDcxNS00NTJMNTIwLTY0N3Y0NDdxMCAxNy0xMS41IDI4LjVUNDgwLTE2MHEtMTcgMC0yOC41LTExLjVUNDQwLTIwMHYtNDQ3WiIvPjwvc3ZnPg==")
    center center / contain no-repeat;
}

.uip-arrow-icon-down {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDQwLTMxM3YtNDQ3cTAtMTcgMTEuNS0yOC41VDQ4MC04MDBxMTcgMCAyOC41IDExLjVUNTIwLTc2MHY0NDdsMTk2LTE5NnExMi0xMiAyOC0xMS41dDI4IDEyLjVxMTEgMTIgMTEuNSAyOFQ3NzItNDUyTDUwOC0xODhxLTYgNi0xMyA4LjV0LTE1IDIuNXEtOCAwLTE1LTIuNXQtMTMtOC41TDE4OC00NTJxLTExLTExLTExLTI3LjV0MTEtMjguNXExMi0xMiAyOC41LTEydDI4LjUgMTJsMTk1IDE5NVoiLz48L3N2Zz4=")
    center center / contain no-repeat;
}
.uip-command-icon {
  content: "";
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPgo8cGF0aCBkPSJNMCAwIEMwLjczMDQ2NTM5IC0wLjAwNjU3MTIgMS40NjA5MzA3OSAtMC4wMTMxNDI0IDIuMjEzNTMxNDkgLTAuMDE5OTEyNzIgQzQuNjMwOTYyMTggLTAuMDM5NjIyNTMgNy4wNDgzMzA3OCAtMC4wNTEzMDM4NCA5LjQ2NTgyMDMxIC0wLjA2MTI3OTMgQzEwLjI5MjgwNjc4IC0wLjA2NTM1NDgyIDExLjExOTc5MzI0IC0wLjA2OTQzMDM1IDExLjk3MTgzOTkgLTAuMDczNjI5MzggQzE2LjM1MDAzOTE2IC0wLjA5NDQ4MTQyIDIwLjcyODIwNzE2IC0wLjEwODc4NjIxIDI1LjEwNjQ0NTMxIC0wLjExODE2NDA2IEMyOS42MjAxNzA5NSAtMC4xMjkyMTk2NiAzNC4xMzM0MDI0MiAtMC4xNjM2MTE5MyAzOC42NDY5NTM1OCAtMC4yMDMzMzU3NiBDNDIuMTI0OTA3MzYgLTAuMjI5NTI5MiA0NS42MDI3NDM5MyAtMC4yMzc4NTgzNiA0OS4wODA3ODc2NiAtMC4yNDE0NDU1NCBDNTAuNzQ0MTA1ODcgLTAuMjQ2MzA1MzkgNTIuNDA3NDE5MDUgLTAuMjU3OTAyMjMgNTQuMDcwNjQwNTYgLTAuMjc2NDgzNTQgQzU2LjQwNDI1ODM3IC0wLjMwMDkzMTQ3IDU4LjczNjYwNDgzIC0wLjI5OTkwMDE4IDYxLjA3MDMxMjUgLTAuMjkyOTY4NzUgQzYxLjc1MTA4ODU2IC0wLjMwNTc3ODgxIDYyLjQzMTg2NDYyIC0wLjMxODU4ODg3IDYzLjEzMzI3MDI2IC0wLjMzMTc4NzExIEM2OC40ODk1MjI4NyAtMC4yNzQxMDI1OSA3MS40NTk2MTE0NiAxLjI1OTYzOTM2IDc1Ljc5Mzk0NTMxIDQuMTc3MDAxOTUgQzc5Ljk1NDIxNTUxIDguNjY1NzE0NTMgODAuOTEzODI3MTMgMTEuODkwNzE4MiA4MC45NzA5NDcyNyAxNy45MTQzMDY2NCBDODAuOTkwMjAwMTIgMTkuNjgxOTQzNjYgODAuOTkwMjAwMTIgMTkuNjgxOTQzNjYgODEuMDA5ODQxOTIgMjEuNDg1MjkwNTMgQzgxLjAxNzIyODg1IDIyLjc2MDI3NDA1IDgxLjAyNDYxNTc4IDI0LjAzNTI1NzU3IDgxLjAzMjIyNjU2IDI1LjM0ODg3Njk1IEM4MS4wNDAyOTgzMSAyNi42NTk3OTMwOSA4MS4wNDgzNzAwNiAyNy45NzA3MDkyMyA4MS4wNTY2ODY0IDI5LjMyMTM1MDEgQzgxLjA3MTcwMTUyIDMyLjA5ODc1MzU2IDgxLjA4MTU0NDU2IDM0Ljg3NjEzMTU3IDgxLjA4OTExMTMzIDM3LjY1MzU2NDQ1IEM4MS4xMDAxNTc5IDQxLjE5ODgwNTA1IDgxLjEzNDU0MTY3IDQ0Ljc0MzQxNDkgODEuMTc0MjgzMDMgNDguMjg4NDMzMDcgQzgxLjIwNjgzMTggNTEuNjgzNTU0OTggODEuMjExMjM1MTUgNTUuMDc4NjExMTMgODEuMjE5NzI2NTYgNTguNDczODc2OTUgQzgxLjIzNzIzNDY1IDU5Ljc0MDc2MzU1IDgxLjI1NDc0Mjc0IDYxLjAwNzY1MDE1IDgxLjI3Mjc4MTM3IDYyLjMxMjkyNzI1IEM4MS4yNTU5Njg3NCA2OS4xNTc1NTAwMiA4MS4wMDQ1MjA2MiA3My42NjY5NzM0NCA3Ni43OTM5NDUzMSA3OS4xNzcwMDE5NSBDNzEuODkxMjk5OTQgODMuNzIwOTE3MTcgNjguMDU4ODE2MjIgODQuMzI4NzQ1NyA2MS41ODc4OTA2MiA4NC4zNTQwMDM5MSBDNjAuODU3NDI1MjMgODQuMzYwNTc1MSA2MC4xMjY5NTk4NCA4NC4zNjcxNDYzIDU5LjM3NDM1OTEzIDg0LjM3MzkxNjYzIEM1Ni45NTY5Mjg0NCA4NC4zOTM2MjY0NCA1NC41Mzk1NTk4NCA4NC40MDUzMDc3NCA1Mi4xMjIwNzAzMSA4NC40MTUyODMyIEM1MS4yOTUwODM4NSA4NC40MTkzNTg3MyA1MC40NjgwOTczOCA4NC40MjM0MzQyNiA0OS42MTYwNTA3MiA4NC40Mjc2MzMyOSBDNDUuMjM3ODUxNDcgODQuNDQ4NDg1MzMgNDAuODU5NjgzNDcgODQuNDYyNzkwMTEgMzYuNDgxNDQ1MzEgODQuNDcyMTY3OTcgQzMxLjk2NzcxOTY3IDg0LjQ4MzIyMzU2IDI3LjQ1NDQ4ODIgODQuNTE3NjE1ODQgMjIuOTQwOTM3MDQgODQuNTU3MzM5NjcgQzE5LjQ2Mjk4MzI3IDg0LjU4MzUzMzExIDE1Ljk4NTE0NjcgODQuNTkxODYyMjYgMTIuNTA3MTAyOTcgODQuNTk1NDQ5NDUgQzEwLjg0Mzc4NDc2IDg0LjYwMDMwOTI5IDkuMTgwNDcxNTggODQuNjExOTA2MTQgNy41MTcyNTAwNiA4NC42MzA0ODc0NCBDNS4xODM2MzIyNiA4NC42NTQ5MzUzNyAyLjg1MTI4NTggODQuNjUzOTA0MDggMC41MTc1NzgxMiA4NC42NDY5NzI2NiBDLTAuNTAzNTg1OTcgODQuNjY2MTg3NzQgLTAuNTAzNTg1OTcgODQuNjY2MTg3NzQgLTEuNTQ1Mzc5NjQgODQuNjg1NzkxMDIgQy02LjkwMTYzMjI0IDg0LjYyODEwNjQ5IC05Ljg3MTcyMDgzIDgzLjA5NDM2NDU1IC0xNC4yMDYwNTQ2OSA4MC4xNzcwMDE5NSBDLTE4LjM2NjMyNDg5IDc1LjY4ODI4OTM3IC0xOS4zMjU5MzY1MSA3Mi40NjMyODU3MSAtMTkuMzgzMDU2NjQgNjYuNDM5Njk3MjcgQy0xOS4zOTU4OTE4OCA2NS4yNjEyNzI1OCAtMTkuNDA4NzI3MTEgNjQuMDgyODQ3OSAtMTkuNDIxOTUxMjkgNjIuODY4NzEzMzggQy0xOS40MjkzMzgyMyA2MS41OTM3Mjk4NiAtMTkuNDM2NzI1MTYgNjAuMzE4NzQ2MzQgLTE5LjQ0NDMzNTk0IDU5LjAwNTEyNjk1IEMtMTkuNDUyNDA3NjggNTcuNjk0MjEwODIgLTE5LjQ2MDQ3OTQzIDU2LjM4MzI5NDY4IC0xOS40Njg3OTU3OCA1NS4wMzI2NTM4MSBDLTE5LjQ4MzgxMDkgNTIuMjU1MjUwMzUgLTE5LjQ5MzY1MzkzIDQ5LjQ3Nzg3MjM0IC0xOS41MDEyMjA3IDQ2LjcwMDQzOTQ1IEMtMTkuNTEyMjY3MjggNDMuMTU1MTk4ODUgLTE5LjU0NjY1MTA1IDM5LjYxMDU4OSAtMTkuNTg2MzkyNCAzNi4wNjU1NzA4MyBDLTE5LjYxODk0MTE4IDMyLjY3MDQ0ODkzIC0xOS42MjMzNDQ1MiAyOS4yNzUzOTI3OCAtMTkuNjMxODM1OTQgMjUuODgwMTI2OTUgQy0xOS42NDkzNDQwMiAyNC42MTMyNDAzNiAtMTkuNjY2ODUyMTEgMjMuMzQ2MzUzNzYgLTE5LjY4NDg5MDc1IDIyLjA0MTA3NjY2IEMtMTkuNjY4MDc4MTEgMTUuMTk2NDUzODkgLTE5LjQxNjYyOTk5IDEwLjY4NzAzMDQ3IC0xNS4yMDYwNTQ2OSA1LjE3NzAwMTk1IEMtMTAuMzAzNDA5MzIgMC42MzMwODY3MyAtNi40NzA5MjU2IDAuMDI1MjU4MjEgMCAwIFogTS0xMC4xNjY5OTIxOSA3LjcyNzc4MzIgQy0xMC42MzM2MzI4MSA4LjMwOTE1MDM5IC0xMS4xMDAyNzM0NCA4Ljg5MDUxNzU4IC0xMS41ODEwNTQ2OSA5LjQ4OTUwMTk1IEMtMTIuMzA0MjE4NzUgMTAuMzQ5OTUxMTcgLTEyLjMwNDIxODc1IDEwLjM0OTk1MTE3IC0xMy4wNDE5OTIxOSAxMS4yMjc3ODMyIEMtMTUuMjIwNjk4MDUgMTQuODc2MDE4ODUgLTE1LjMzMTk0ODgzIDE4Ljg3MDQ1OTI2IC0xNS4zNTEzMTgzNiAyMy4wMzk3OTQ5MiBDLTE1LjM1NzY5ODIxIDIzLjk3NzgxOTUyIC0xNS4zNjQwNzgwNiAyNC45MTU4NDQxMiAtMTUuMzcwNjUxMjUgMjUuODgyMjkzNyBDLTE1LjM3MTc2NDA3IDI2Ljg4NDQ2OTMgLTE1LjM3Mjg3Njg5IDI3Ljg4NjY0NDkgLTE1LjM3NDAyMzQ0IDI4LjkxOTE4OTQ1IEMtMTUuMzc3MzUxODQgMjkuOTYwOTIzMTYgLTE1LjM4MDY4MDI0IDMxLjAwMjY1Njg2IC0xNS4zODQxMDk1IDMyLjA3NTk1ODI1IEMtMTUuMzg5MTY0NzkgMzQuMjc2NDY0NDMgLTE1LjM5MTUxODI1IDM2LjQ3Njk3ODI1IC0xNS4zOTEzNTc0MiAzOC42Nzc0OTAyMyBDLTE1LjM5MzU0MjI3IDQyLjAzMjkyNTU0IC0xNS40MTE3MDg1MiA0NS4zODgwMzEwOSAtMTUuNDMwNjY0MDYgNDguNzQzNDA4MiBDLTE1LjQzMzU5ODY1IDUwLjg4NTMzNDE3IC0xNS40MzU1ODMwMSA1My4wMjcyNjE2OSAtMTUuNDM2NTIzNDQgNTUuMTY5MTg5NDUgQy0xNS40NDM3MDg5NSA1Ni4xNjczMTY1OSAtMTUuNDUwODk0NDcgNTcuMTY1NDQzNzMgLTE1LjQ1ODI5NzczIDU4LjE5MzgxNzE0IEMtMTUuNDg0NDEyOTIgNjcuMjA1MTkzMDggLTE1LjQ4NDQxMjkyIDY3LjIwNTE5MzA4IC0xMS42NTUyNzM0NCA3NS4xMzc5Mzk0NSBDLTEwLjc4MzIyMjY2IDc1LjgzNzkwMDM5IC0xMC43ODMyMjI2NiA3NS44Mzc5MDAzOSAtOS44OTM1NTQ2OSA3Ni41NTIwMDE5NSBDLTkuMzE5OTIxODggNzcuMDM0MTExMzMgLTguNzQ2Mjg5MDYgNzcuNTE2MjIwNyAtOC4xNTUyNzM0NCA3OC4wMTI5Mzk0NSBDLTQuMDY3MTIwMjEgODAuNDU0MzYxNjIgMC40NzYxMTc4NiA4MC4zMDYyMjMzNyA1LjEyNTQ4ODI4IDgwLjMyMjI2NTYyIEM3LjAxMzAyMzIyIDgwLjMzMTgzNTQgNy4wMTMwMjMyMiA4MC4zMzE4MzU0IDguOTM4NjkwMTkgODAuMzQxNTk4NTEgQzEwLjMwNDUwNCA4MC4zNDMxMjc0NCAxMS42NzAzMTgzNCA4MC4zNDQyNDEyNiAxMy4wMzYxMzI4MSA4MC4zNDQ5NzA3IEMxNC40NDcxMTMzOCA4MC4zNDgxODcxOSAxNS44NTgwOTM2MSA4MC4zNTE1NTE1NiAxNy4yNjkwNzM0OSA4MC4zNTUwNTY3NiBDMjAuMjIyODQ3MjIgODAuMzYxMDMzODkgMjMuMTc2NTkxNzUgODAuMzYyODk4MTIgMjYuMTMwMzcxMDkgODAuMzYyMzA0NjkgQzI5LjkwMTc5MDE2IDgwLjM2MjIwMzE0IDMzLjY3MzAyMDY1IDgwLjM3NTg1MzgyIDM3LjQ0NDM5NTA3IDgwLjM5MzA3NjkgQzQwLjM1Nzg4ODI2IDgwLjQwNDIzNDg1IDQzLjI3MTMzNjQxIDgwLjQwNjIyMjczIDQ2LjE4NDg0ODc5IDgwLjQwNTY5NDk2IEM0Ny41NzQ2MTMxOSA4MC40MDY4Njk0MiA0OC45NjQzNzg5NiA4MC40MTEyNjA5NyA1MC4zNTQxMjIxNiA4MC40MTkwMjczMyBDNjEuNjcwMDc0MTggODAuOTE3NjQzMjkgNjEuNjcwMDc0MTggODAuOTE3NjQzMjkgNzEuNzU0ODgyODEgNzYuNjI2MjIwNyBDNzIuMjIxNTIzNDQgNzYuMDQ0ODUzNTIgNzIuNjg4MTY0MDYgNzUuNDYzNDg2MzMgNzMuMTY4OTQ1MzEgNzQuODY0NTAxOTUgQzczLjY1MTA1NDY5IDc0LjI5MDg2OTE0IDc0LjEzMzE2NDA2IDczLjcxNzIzNjMzIDc0LjYyOTg4MjgxIDczLjEyNjIyMDcgQzc2LjgwODU4ODY3IDY5LjQ3Nzk4NTA1IDc2LjkxOTgzOTQ2IDY1LjQ4MzU0NDY1IDc2LjkzOTIwODk4IDYxLjMxNDIwODk4IEM3Ni45NDU1ODg4NCA2MC4zNzYxODQzOSA3Ni45NTE5Njg2OSA1OS40MzgxNTk3OSA3Ni45NTg1NDE4NyA1OC40NzE3MTAyMSBDNzYuOTU5NjU0NjkgNTcuNDY5NTM0NjEgNzYuOTYwNzY3NTIgNTYuNDY3MzU5MDEgNzYuOTYxOTE0MDYgNTUuNDM0ODE0NDUgQzc2Ljk2NTI0MjQ2IDU0LjM5MzA4MDc1IDc2Ljk2ODU3MDg2IDUzLjM1MTM0NzA1IDc2Ljk3MjAwMDEyIDUyLjI3ODA0NTY1IEM3Ni45NzcwNTU0MiA1MC4wNzc1Mzk0NyA3Ni45Nzk0MDg4OCA0Ny44NzcwMjU2NSA3Ni45NzkyNDgwNSA0NS42NzY1MTM2NyBDNzYuOTgxNDMyODkgNDIuMzIxMDc4MzYgNzYuOTk5NTk5MTUgMzguOTY1OTcyODIgNzcuMDE4NTU0NjkgMzUuNjEwNTk1NyBDNzcuMDIxNDg5MjcgMzMuNDY4NjY5NzQgNzcuMDIzNDczNjMgMzEuMzI2NzQyMjIgNzcuMDI0NDE0MDYgMjkuMTg0ODE0NDUgQzc3LjAzNTE5MjM0IDI3LjY4NzYyMzc1IDc3LjAzNTE5MjM0IDI3LjY4NzYyMzc1IDc3LjA0NjE4ODM1IDI2LjE2MDE4Njc3IEM3Ny4wNzIzMDM1NCAxNy4xNDg4MTA4MyA3Ny4wNzIzMDM1NCAxNy4xNDg4MTA4MyA3My4yNDMxNjQwNiA5LjIxNjA2NDQ1IEM3Mi42NjE3OTY4NyA4Ljc0OTQyMzgzIDcyLjA4MDQyOTY5IDguMjgyNzgzMiA3MS40ODE0NDUzMSA3LjgwMjAwMTk1IEM3MC45MDc4MTI1IDcuMzE5ODkyNTggNzAuMzM0MTc5NjkgNi44Mzc3ODMyIDY5Ljc0MzE2NDA2IDYuMzQxMDY0NDUgQzY1LjY1NTAxMDg0IDMuODk5NjQyMjkgNjEuMTExNzcyNzYgNC4wNDc3ODA1MyA1Ni40NjI0MDIzNCA0LjAzMTczODI4IEM1NC41NzQ4Njc0IDQuMDIyMTY4NSA1NC41NzQ4Njc0IDQuMDIyMTY4NSA1Mi42NDkyMDA0NCA0LjAxMjQwNTQgQzUxLjI4MzM4NjYyIDQuMDEwODc2NDcgNDkuOTE3NTcyMjkgNC4wMDk3NjI2NCA0OC41NTE3NTc4MSA0LjAwOTAzMzIgQzQ3LjE0MDc3NzI1IDQuMDA1ODE2NzIgNDUuNzI5Nzk3MDEgNC4wMDI0NTIzNSA0NC4zMTg4MTcxNCAzLjk5ODk0NzE0IEM0MS4zNjUwNDM0MSAzLjk5Mjk3MDAyIDM4LjQxMTI5ODg4IDMuOTkxMTA1NzkgMzUuNDU3NTE5NTMgMy45OTE2OTkyMiBDMzEuNjg2MTAwNDcgMy45OTE4MDA3NiAyNy45MTQ4Njk5OCAzLjk3ODE1MDA4IDI0LjE0MzQ5NTU2IDMuOTYwOTI3MDEgQzIxLjIzMDAwMjM2IDMuOTQ5NzY5MDYgMTguMzE2NTU0MjEgMy45NDc3ODExNyAxNS40MDMwNDE4NCAzLjk0ODMwODk0IEMxNC4wMTMyNzc0NCAzLjk0NzEzNDQ5IDEyLjYyMzUxMTY2IDMuOTQyNzQyOTMgMTEuMjMzNzY4NDYgMy45MzQ5NzY1OCBDLTAuMDgyMTgzNTUgMy40MzYzNjA2MiAtMC4wODIxODM1NSAzLjQzNjM2MDYyIC0xMC4xNjY5OTIxOSA3LjcyNzc4MzIgWiAiIGZpbGw9IiMwMDAwMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5LjIwNjA1NDY4NzUsNy44MjI5OTgwNDY4NzUpIi8+CjxwYXRoIGQ9Ik0wIDAgQzMuMzQwMDk2NzUgMC44NTUyMjYzOCA0LjkzNzIwMzg2IDIuODA4MTk1ODIgNi45Mzc1IDUuNDk2MDkzNzUgQzYuOTM3NSA2LjQ4NjA5Mzc1IDYuOTM3NSA3LjQ3NjA5Mzc1IDYuOTM3NSA4LjQ5NjA5Mzc1IEM0LjQ2MjUgOC4wMDEwOTM3NSA0LjQ2MjUgOC4wMDEwOTM3NSAxLjkzNzUgNy40OTYwOTM3NSBDMS45Mzc1IDYuODM2MDkzNzUgMS45Mzc1IDYuMTc2MDkzNzUgMS45Mzc1IDUuNDk2MDkzNzUgQy0wLjA0MjUgNS40OTYwOTM3NSAtMi4wMjI1IDUuNDk2MDkzNzUgLTQuMDYyNSA1LjQ5NjA5Mzc1IEMtNS44MzMzNDExNyA4LjIwNDQzOTA2IC02LjA3MzAyNTA0IDkuMzg4NzM4MzQgLTUuNzUgMTIuNjgzNTkzNzUgQy01LjM0Nzc0NzE3IDE1LjM4MzgzOTI5IC01LjM0Nzc0NzE3IDE1LjM4MzgzOTI5IC00LjA2MjUgMTYuNDk2MDkzNzUgQy0yLjM5NjMyODg1IDE2LjUzNjczMjA3IC0wLjcyODYxOTA1IDE2LjUzODgxNDc1IDAuOTM3NSAxNi40OTYwOTM3NSBDMS4yNjc1IDE1LjgzNjA5Mzc1IDEuNTk3NSAxNS4xNzYwOTM3NSAxLjkzNzUgMTQuNDk2MDkzNzUgQzMuNTg3NSAxNC40OTYwOTM3NSA1LjIzNzUgMTQuNDk2MDkzNzUgNi45Mzc1IDE0LjQ5NjA5Mzc1IEM2LjM3MDc1Mzc4IDE3Ljc4MzIyMTgzIDUuNTQxNjc4NyAxOS4zOTc0NjY2NyAyLjkzNzUgMjEuNDk2MDkzNzUgQy0xLjYwMjkwNjAxIDIyLjUxNjQwOTcxIC01LjE0MDM1NTA3IDIyLjA0MTg1Mjk5IC05LjEyNSAxOS42ODM1OTM3NSBDLTExLjk3MTM5NjYyIDE1LjAwMDgxMjIxIC0xMi4wMzkxNzc3MiAxMC44MzU3OTkgLTExLjA2MjUgNS40OTYwOTM3NSBDLTguMTYzNjExNzIgMC44NzU5OTA1NSAtNS4yNjYwOTA5MSAtMC4zMjkxMzA2OCAwIDAgWiAiIGZpbGw9IiMwMDAwMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM3LjA2MjUsMzguNTAzOTA2MjUpIi8+CjxwYXRoIGQ9Ik0wIDAgQzEuMzIgMCAyLjY0IDAgNCAwIEM0IDEuMzIgNCAyLjY0IDQgNCBDNC45OSA0IDUuOTggNCA3IDQgQzcgNS4zMiA3IDYuNjQgNyA4IEM2LjAxIDggNS4wMiA4IDQgOCBDNCAxMC42NCA0IDEzLjI4IDQgMTYgQzQuOTkgMTYgNS45OCAxNiA3IDE2IEM3IDE3LjMyIDcgMTguNjQgNyAyMCBDNC42OSAxOS42NyAyLjM4IDE5LjM0IDAgMTkgQzAgMTUuMzcgMCAxMS43NCAwIDggQy0wLjk5IDggLTEuOTggOCAtMyA4IEMtMyA2LjY4IC0zIDUuMzYgLTMgNCBDLTIuMDEgNCAtMS4wMiA0IDAgNCBDMCAyLjY4IDAgMS4zNiAwIDAgWiAiIGZpbGw9IiMwMDAwMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4LDQwKSIvPgo8cGF0aCBkPSJNMCAwIEMxLjY1IDAgMy4zIDAgNSAwIEM1IDcuMjYgNSAxNC41MiA1IDIyIEMzLjM1IDIyIDEuNyAyMiAwIDIyIEMwIDE0Ljc0IDAgNy40OCAwIDAgWiAiIGZpbGw9IiMwMDAwMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY5LDM4KSIvPgo8cGF0aCBkPSJNMCAwIEMyLjk3IDAgNS45NCAwIDkgMCBDOSAxLjMyIDkgMi42NCA5IDQgQzcuNjggNCA2LjM2IDQgNSA0IEM0LjY3IDcuOTYgNC4zNCAxMS45MiA0IDE2IEMyLjY4IDE2IDEuMzYgMTYgMCAxNiBDMCAxMC43MiAwIDUuNDQgMCAwIFogIiBmaWxsPSIjMDAwMDAwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1OCw0NCkiLz4KPC9zdmc+Cg==")
    center center / contain no-repeat;
}

.uip-command-icon {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMjYwLTEyMHEtNTggMC05OS00MXQtNDEtOTlxMC01OCA0MS05OXQ5OS00MWg2MHYtMTYwaC02MHEtNTggMC05OS00MXQtNDEtOTlxMC01OCA0MS05OXQ5OS00MXE1OCAwIDk5IDQxdDQxIDk5djYwaDE2MHYtNjBxMC01OCA0MS05OXQ5OS00MXE1OCAwIDk5IDQxdDQxIDk5cTAgNTgtNDEgOTl0LTk5IDQxaC02MHYxNjBoNjBxNTggMCA5OSA0MXQ0MSA5OXEwIDU4LTQxIDk5dC05OSA0MXEtNTggMC05OS00MXQtNDEtOTl2LTYwSDQwMHY2MHEwIDU4LTQxIDk5dC05OSA0MVptMC04MHEyNSAwIDQyLjUtMTcuNVQzMjAtMjYwdi02MGgtNjBxLTI1IDAtNDIuNSAxNy41VDIwMC0yNjBxMCAyNSAxNy41IDQyLjVUMjYwLTIwMFptNDQwIDBxMjUgMCA0Mi41LTE3LjVUNzYwLTI2MHEwLTI1LTE3LjUtNDIuNVQ3MDAtMzIwaC02MHY2MHEwIDI1IDE3LjUgNDIuNVQ3MDAtMjAwWk00MDAtNDAwaDE2MHYtMTYwSDQwMHYxNjBaTTI2MC02NDBoNjB2LTYwcTAtMjUtMTcuNS00Mi41VDI2MC03NjBxLTI1IDAtNDIuNSAxNy41VDIwMC03MDBxMCAyNSAxNy41IDQyLjVUMjYwLTY0MFptMzgwIDBoNjBxMjUgMCA0Mi41LTE3LjVUNzYwLTcwMHEwLTI1LTE3LjUtNDIuNVQ3MDAtNzYwcS0yNSAwLTQyLjUgMTcuNVQ2NDAtNzAwdjYwWiIvPjwvc3ZnPg==")
    center center / contain no-repeat;
}
.uip-alt-icon {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNjM3LTIwMHEtMjIgMC00MC0xMC41VDU2OC0yNDBMMzE0LTY4MEgxNjBxLTE3IDAtMjguNS0xMS41VDEyMC03MjBxMC0xNyAxMS41LTI4LjVUMTYwLTc2MGgxNTRxMjIgMCA0MCAxMC41dDI5IDI5LjVsMjU0IDQ0MGgxNjNxMTcgMCAyOC41IDExLjVUODQwLTI0MHEwIDE3LTExLjUgMjguNVQ4MDAtMjAwSDYzN1ptMy00ODBxLTE3IDAtMjguNS0xMS41VDYwMC03MjBxMC0xNyAxMS41LTI4LjVUNjQwLTc2MGgxNjBxMTcgMCAyOC41IDExLjVUODQwLTcyMHEwIDE3LTExLjUgMjguNVQ4MDAtNjgwSDY0MFoiLz48L3N2Zz4=")
    center center / contain no-repeat;
}
.uip-shift-icon {
  @extend .uip-background-icon;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMzIwLTE2MHYtMjgwSDIwNHEtMjYgMC0zNi41LTIyLjVUMTczLTUwNWwyNzYtMzM3cTEyLTE1IDMxLTE1dDMxIDE1bDI3NiAzMzdxMTYgMjAgNS41IDQyLjVUNzU2LTQ0MEg2NDB2MjgwcTAgMTctMTEuNSAyOC41VDYwMC0xMjBIMzYwcS0xNyAwLTI4LjUtMTEuNVQzMjAtMTYwWm04MC00MGgxNjB2LTMyMGgxMTFMNDgwLTc1NCAyODktNTIwaDExMXYzMjBabTgwLTMyMFoiLz48L3N2Zz4=")
    center center / contain no-repeat;
}

.uip-filter-contrast {
  filter: contrast(0.2);
}

.uip-percentage-value {
  &::after {
    content: "%";
  }
}

.uip-drop-hightlight {
  background: var(--uip-color-orange-lighter);
}

.uip-admin-menu {
  .wp-menu-image:before {
    color: inherit;
    font-size: inherit !important;
    padding: 0;
  }
}

.fixed {
  .column-uip_post_id {
    width: 50px;
    text-align: right;
  }
  .column-uip_post_modified {
    width: 7%;
  }
}

#uip-preview-content {
  //transition: all 0.3s ease;
}

#uip-preview-content *,
#uip-ui-app *,
.uip-flex * {
  box-sizing: border-box;
}

.ui-template {
  .uip-desktop-view {
    min-width: 100vw;
    min-height: 100vh;
    //aspect-ratio: 16/10;
  }

  .uip-tablet-view {
    min-width: 701px;
    max-width: 990px;
    min-height: 100vh;
  }

  .uip-phone-view {
    min-width: 700px;
    max-width: 700px;
    min-height: 100vh;
  }
}
.ui-admin-page,
.ui-front-template {
  .uip-desktop-view {
    min-width: 100vw;
    width: 100vw;
    max-width: 100vw;
    min-height: 60px;
  }

  .uip-tablet-view {
    min-width: 701px;
    max-width: 990px;
    min-height: 60px;
  }

  .uip-phone-view {
    min-width: 700px;
    max-width: 700px;
    min-height: 60px;
  }
}

.uip-row-hover {
  td {
    transition: all 0.2s ease-in-out;
  }
  &:hover {
    td {
      background-color: var(--uip-color-base-1);
    }
  }
}

[uip-admin-theme="true"] body:not(.block-editor-page) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--uip-text-color-emphasis);
  }
}

.uip-circle-before {
  &::before {
    content: "";
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
    border: 1px solid var(--uip-color-accent);
    background: var(--uip-color-base-0);
    position: absolute;
    left: 0;
    transform: translateX(-50%);
  }
}

#uip-ui-app,
#uip-template-body {
  p {
    font-size: 1em;
  }
}

html[uip-core-app="true"] {
  body.js.is-fullscreen-mode {
    margin-top: 0;
  }
}

.uip-builder-frame {
  min-height: 100vh;
  max-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

@keyframes ghost-in {
  0% {
    opacity: 0;
    transform: scale(0);
    max-height: 2px;
    max-width: 2px;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    max-height: 9000px;
    max-width: 9000px;
  }
}

//LINK HELPER CLASSES
@import "modules/uip-frame.scss";

:root {
  --wp-admin-theme-color: var(--uip-color-primary);
  --wp-admin-theme-color-darker-10: var(--uip-color-primary-darker);
  --wp-admin-theme-color-darker-20: var(--uip-color-primary-darker);
}

[uip-admin-theme="true"] {
  @import "modules/uip-theme.scss";
}

[uip-framed-page="true"] {
  #adminmenumain,
  #wpadminbar,
  #wpfooter {
    display: none;
  }
}

@import "modules/wp-toolbar.scss";

@import "modules/compatability.scss";
//Import dark specific styles
html[data-theme="dark"] {
  @import "modules/dark.scss";
}

html[uip-ajax-page="true"] {
  top: 0 !important;
  padding-top: 0 !important;
  #uip-toolbar {
    display: none !important;
  }
  #adminmenumain {
    display: none !important;
  }
  #wpcontent {
    margin-left: 0 !important;
  }
  #wpfooter {
    margin-left: 0 !important;
  }
  #screen-meta-links {
    display: none;
  }
}

.uip-code-editor .ace-tm {
  background-color: var(--uip-color-base-1);
  color: black;
  .ace_gutter {
    background: var(--uip-color-base-1);
    color: #333;
  }

  .ace_print-margin {
    width: 1px;
    background: #e8e8e8;
  }

  .ace_fold {
    background-color: #6b72e6;
  }

  .ace_cursor {
    color: black;
  }

  .ace_invisible {
    color: rgb(191, 191, 191);
  }

  .ace_storage,
  .ace_keyword {
    color: blue;
  }

  .ace_constant {
    color: rgb(197, 6, 11);
  }

  .ace_constant.ace_buildin {
    color: rgb(88, 72, 246);
  }

  .ace_constant.ace_language {
    color: rgb(88, 92, 246);
  }

  .ace_constant.ace_library {
    color: rgb(6, 150, 14);
  }

  .ace_invalid {
    background-color: rgba(255, 0, 0, 0.1);
    color: red;
  }

  .ace_support.ace_function {
    color: rgb(60, 76, 114);
  }

  .ace_support.ace_constant {
    color: rgb(6, 150, 14);
  }

  .ace_support.ace_type,
  .ace_support.ace_class {
    color: rgb(109, 121, 222);
  }

  .ace_keyword.ace_operator {
    color: rgb(104, 118, 135);
  }

  .ace_string {
    color: rgb(3, 106, 7);
  }

  .ace_comment {
    color: rgb(76, 136, 107);
  }

  .ace_comment.ace_doc {
    color: rgb(0, 102, 255);
  }

  .ace_comment.ace_doc.ace_tag {
    color: rgb(128, 159, 191);
  }

  .ace_constant.ace_numeric {
    color: rgb(0, 0, 205);
  }

  .ace_variable {
    color: rgb(49, 132, 149);
  }

  .ace_xml-pe {
    color: rgb(104, 104, 91);
  }

  .ace_entity.ace_name.ace_function {
    color: #0000a2;
  }

  .ace_heading {
    color: rgb(12, 7, 255);
  }

  .ace_list {
    color: rgb(185, 6, 144);
  }

  .ace_meta.ace_tag {
    color: rgb(0, 22, 142);
  }

  .ace_string.ace_regex {
    color: rgb(255, 0, 0);
  }

  .ace_marker-layer .ace_selection {
    background: rgb(181, 213, 255);
  }
  .ace-tm.ace_multiselect .ace_selection.ace_start {
    box-shadow: 0 0 3px 0px white;
  }
  .ace_marker-layer .ace_step {
    background: rgb(252, 255, 0);
  }

  .ace_marker-layer .ace_stack {
    background: rgb(164, 229, 101);
  }

  .ace_marker-layer .ace_bracket {
    margin: -1px 0 0 -1px;
    border: 1px solid rgb(192, 192, 192);
  }

  .ace_marker-layer .ace_active-line {
    background: var(--uip-color-base-1);
  }

  .ace_gutter-cell {
    color: var(--uip-text-color-muted);
    background: var(--uip-color-base-1);
  }

  .ace_gutter {
    background: var(--uip-color-base-1);
  }

  .ace_gutter-active-line {
    background-color: transparent;
    color: var(--uip-text-color-emphasis);
  }

  .ace_marker-layer .ace_selected-word {
    background: rgb(250, 250, 255);
    border: 1px solid rgb(200, 200, 250);
  }

  .ace_indent-guide {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
  }

  .ace_indent-guide-active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAZSURBVHjaYvj///9/hivKyv8BAAAA//8DACLqBhbvk+/eAAAAAElFTkSuQmCC")
      right repeat-y;
    display: none;
  }
}