/**
* ROOT VARIABLES
*/
html {
  //COLOR
  --uip-color-default: #fff;
  --uip-color-off-white: #f5f5f5;
  --uip-color-muted: #f2f2f4;
  --uip-color-grey: #e7e7e9;
  --uip-color-primary: #0c5cef;
  --uip-color-primary-wash: rgba(115, 165, 255, 0.21);
  --uip-color-primary-dark: #0a49be;
  --uip-color-green: #32d296;
  --uip-color-green-wash: rgba(50, 210, 150, 0.21);
  --uip-color-orange: #f96d41;
  --uip-color-orange-wash: rgba(250, 160, 90, 0.21);
  --uip-color-red: rgb(240, 80, 110);
  --uip-color-dark-red: #d81a3f;
  --uip-color-red-wash: rgba(240, 80, 110, 0.21);
  --uip-color-red-mid-wash: rgba(240, 80, 110, 0.41);
  --uip-color-black: #222;
  --uip-color-black-full: #000;
  //BACKGROUND
  --uip-background-default: #fff;
  --uip-background-muted: var(--uip-color-muted);
  --uip-background-grey: var(--uip-color-grey);
  --uip-background-primary: var(--uip-color-primary);
  --uip-background-orange: var(--uip-color-orange);
  --uip-backdrop-color: rgba(255, 255, 255, 0.78);
  --uip-login-background: var(--uip-color-primary-dark);
  //PADDING
  --uip-padding-xxxs: 2px;
  --uip-padding-xxs: 5px;
  --uip-padding-xs: 10px;
  --uip-padding-s: 15px;
  --uip-padding-m: 30px;
  --uip-padding-l: 60px;
  --uip-padding-button: 7px;
  //MARGIN
  --uip-margin-xxxs: 2px;
  --uip-margin-xxs: 5px;
  --uip-margin-xs: 10px;
  --uip-margin-s: 15px;
  --uip-margin-m: 30px;
  --uip-margin-l: 60px;
  //FONTS
  --uip-body-font-family: "Nunito", sans-serif;
  --uip-header-font-family: var(--uip-body-font-family);
  --uip-text-bold: 700;
  --uip-text-color-normal: #555;
  --uip-text-color-emphasis: #222;
  --uip-text-color-muted: #999;
  --uip-text-color-inverse: #fff;
  --uip-text-color-inverse-fade: #ededed;
  --uip-text-xs: 0.8em;
  --uip-text-s: 0.9em;
  --uip-text-m: 1em;
  --uip-text-l: 1.4em;
  --uip-text-xl: 1.8em;
  --uip-text-xxl: 2.5em;
  --uip-body-font-size: 13px;
  //BORDER RADIUS
  --uip-border-radius: 4px;
  --uip-border-circle: 50%;
  --uip-border-width: 1px;
  --uip-border-color: rgba(181, 181, 181, 35%);
  //APP SPECIFIC
  //TOOLBAR
  --uip-toolbar-height: 32px;
  --uip-toolbar-background: var(--uip-background-default);
  --uip-toolbar-text-color: var(--uip-text-color-muted);
  --uip-toolbar-text-color-hover: var(--uip-text-color-emphasis);
  --uip-toolbar-background-secondary: var(--uip-background-muted);
  //MENU
  --uip-menu-width: 160px;
  --uip-menu-background: var(--uip-background-muted);
  --uip-menu-secondary-color: var(--uip-background-grey);
  --uip-menu-background-grey: rgb(199, 199, 199, 0.53);
  --uip-notification-background: var(--uip-color-black);
  --uip-menu-text-color: #777777;
  --uip-menu-text-emphasis: var(--uip-text-color-emphasis);
  --uip-menu-sub-text-color: #757575;
  --uip-menu-sub-text-emphasis: var(--uip-menu-text-emphasis);
  --uip-submenu-hover: var(--uip-text-color-emphasis);
  --uip-menu-offset: 32px;
  --uip-menu-padding: var(--uip-padding-s);
  --uip-menu-logo-height: 28px;
  --uip-menu-active-background: var(--uip-background-grey);
  --uip-menu-search-background: var(--uip-background-grey);
  --uip-menu-search-color: var(--uip-menu-text-color);
  //BODY
  --uip-body-color: var(--uip-background-grey);
  --uip-body-background: var(--uip-background-default);
  //BUTTONS
  --uip-button-default-bg: var(--uip-background-muted);
  --uip-button-default-hover-bg: var(--uip-background-grey);
  --uip-button-border-radius: var(--uip-border-radius);
  --uip-button-border-color: transparent;
  --uip-button-border-width: 0;
  --uip-button-text-color: var(--uip-text-color-normal);
  --uip-button-text-color-hover: var(--uip-text-color-normal);

  --uip-button-primary-bg: var(--uip-background-primary);
  --uip-button-primary-hover-bg: var(--uip-color-primary-dark);
  --uip-button-primary-border-color: transparent;
  --uip-button-primary-text-color: var(--uip-text-color-inverse);

  --uip-button-danger-bg: var(--uip-color-red-wash);
  --uip-button-danger-hover-bg: var(--uip-color-red-mid-wash);
  --uip-button-danger-border-color: transparent;
  --uip-button-danger-text-color: var(--uip-color-red);

  --uip-button-page-action-bg: var(--uip-background-muted);
  --uip-button-page-action-hover-bg: var(--uip-background-grey);
  --uip-button-page-action-border-color: transparent;
  --uip-button-page-action-text-color: var(--uip-text-color-normal);

  //SHADOW
  --uip-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  --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-background: var(--uip-background-default);
  --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"] {
  --uip-color-default: #111;
  --uip-background-default: #1a1a1a;
  --uip-background-muted: #2d2d2d;
  --uip-background-grey: #555;
  --uip-menu-search-background: #333;
  --uip-text-color-emphasis: #fff;
  --uip-body-background: #1a1a1a;
  --uip-menu-background: #222;
  --uip-menu-secondary-color: #333;
  --uip-menu-text-color: #a2a2a2cf;
  --uip-menu-background-grey: #444;
  --uip-color-primary: #3567c2;
  --uip-color-primary-dark: #0a49be;
  --uip-color-primary-wash: #3966b982;
  --uip-color-green-wash: #006c5b;
  --uip-backdrop-color: rgba(26, 26, 26, 0.84);
  --uip-color-red-wash: rgba(240, 80, 110, 0.67);
  --uip-color-red: #ffa6b7;
  //TEXT
  --uip-text-color-emphasis: #fff;
  --uip-text-color-normal: #cecece;
  --uip-text-color-muted: #ffffff80;
  --uip-checkbox-border: #444;
  --uip-menu-search-color: var(--uip-text-color-muted);
  --uip-border-color: rgba(181, 181, 181, 19%);

  //COLOR
  --uip-color-black: #333;

  //CARDS
  --uip-card-border-color: transparent;
  --uip-card-background: #222;

  //shadow
  --uip-box-shadow-large: 0 12px 48px rgb(62 67 108 / 30%), 0 32px 80px rgb(62 67 108 / 10%);
}
/**
* UTILITY CLASSES
*/
.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-cursor-pointer {
  cursor: pointer;
}
.uip-cursor-drag {
  cursor: grab;
}
.uip-position-relative {
  position: relative;
}
.uip-position-absolute {
  position: absolute;
}
.uip-position-fixed {
  position: fixed;
}
.uip-shadow {
  box-shadow: var(--uip-box-shadow);
}
.uip-shadow-large {
  box-shadow: var(--uip-box-shadow-large);
}
.uip-drop-top {
  transform: translate(0%, calc(-100% - 40px));
}
.uip-drop-bottom {
  transform: translate(-50%, 10px);
}

.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--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-180 {
  transform: rotate(180deg);
}
.uip-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
.uip-border-box {
  box-sizing: border-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-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;
    }
  }
}
/**
* BUTTONS CLASSES SHORTCUTS
*/

.uip-button-default {
  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-button-border-radius);
  cursor: pointer;
  border-style: solid;
  font-size: var(--uip-text-m);
  color: var(--uip-button-text-color);
  background-color: var(--uip-button-default-bg);
  border-width: var(--uip-button-border-width);
  border-color: var(--uip-button-border-color);
  &:hover {
    color: var(--uip-button-text-color);
    background-color: var(--uip-button-default-hover-bg);
  }
  &:active {
    background-color: var(--uip-button-default-bg);
    color: var(--uip-button-text-color);
    border-style: solid;
    border-width: var(--uip-button-border-width);
    border-color: var(--uip-button-border-color);
    padding-top: var(--uip-padding-button);
    padding-bottom: var(--uip-padding-button);
    padding-left: var(--uip-padding-s);
    padding-right: var(--uip-padding-s);
    top: inherit;
    outline: 4px solid var(--uip-color-primary-wash);
  }
  &:focus {
    box-shadow: none;
    outline: 4px solid var(--uip-color-primary-wash);
  }
}

.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-background-default);
  @extend .hover\:uip-background-grey;
}

.uip-button-primary {
  @extend .uip-button-default;
  background-color: var(--uip-button-primary-bg);
  border-color: var(--uip-button-primary-border-color);
  color: var(--uip-button-primary-text-color);
  &:hover {
    color: var(--uip-button-primary-text-color);
    background-color: var(--uip-button-primary-hover-bg);
    border-color: var(--uip-button-primary-border-color);
    color: var(--uip-button-primary-text-color);
  }
  &:active {
    background-color: var(--uip-button-primary-bg);
  }
}

.uip-button-danger {
  @extend .uip-button-default;
  border-color: var(--uip-button-danger-border-color);
  background-color: var(--uip-button-danger-bg);
  color: var(--uip-button-danger-text-color);
  &:hover {
    background-color: var(--uip-button-danger-hover-bg);
    color: var(--uip-button-danger-text-color);
  }
  &:active {
    background-color: var(--uip-button-danger-bg);
  }
}

.uip-button-secondary {
  @extend .uip-button-primary;
  @extend .hover\:uip-background-secondary;
  background-color: var(--uip-color-black);
}

/**
* NOTIFCATION CLASSES SHORTCUTS
*/
#notification-drop {
  position: fixed;
  left: var(--uip-margin-s);
  bottom: var(--uip-margin-s);
  z-index: 9999;
  width: 500px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 999999999;
}
.uip-notification {
  background: var(--uip-notification-background);
  color: var(--uip-text-color-inverse);
  margin-bottom: var(--uip-margin-xs);
  padding: var(--uip-padding-s);
  border-radius: var(--uip-border-radius);
  font-size: var(--uip-text-m);
  display: inline-block;
}

/**
* HEIGHT CLASSES
*/
.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-10 {
  height: 10px;
  min-height: 10px;
}
.uip-h-18 {
  height: 18px;
  min-height: 18px;
}
.uip-h-20 {
  height: 18px;
  min-height: 18px;
}
.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-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-h-70 {
  min-height: 70px;
}
.uip-h-100 {
  min-height: 100px;
}
.uip-h-50p {
  min-height: 50%;
}
.uip-h-100p {
  min-height: 100%;
}
.uip-h-150 {
  height: 150px;
  min-height: 150px;
}
.uip-h-380 {
  height: 380px;
}
.uip-h-400 {
  height: 400px;
}
.uip-h-420 {
  height: 420px;
}

.uip-h-200 {
  height: 200px;
  min-height: 200px;
}
.uip-max-h-200 {
  height: 200px;
  max-height: 200px;
}
.uip-max-h-100p {
  max-height: 100%;
}

.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 {
  height: 500px;
  max-height: 500px;
}
.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-2 {
  width: 2px;
}
.uip-w-4 {
  width: 4px;
}
.uip-w-5 {
  width: 5px;
}
.uip-w-10 {
  width: 10px;
}
.uip-w-18 {
  width: 18px;
}
.uip-w-26 {
  width: 26px;
}
.uip-w-28 {
  width: 28px;
}
.uip-min-w-28 {
  min-width: 28px;
}
.uip-min-w-35 {
  min-width: 35px;
}
.uip-min-w-40 {
  min-width: 40px;
}
.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-125 {
  width: 125px;
}
.uip-w-150 {
  width: 150px;
}
.uip-w-180 {
  width: 180px;
}
.uip-w-200 {
  width: 200px;
}
.uip-w-250 {
  width: 250px;
}
.uip-w-280 {
  width: 280px;
}
.uip-w-190 {
  width: 190px;
}
.uip-min-w-200 {
  min-width: 200px;
}
.uip-min-w-250 {
  min-width: 250px;
}

.uip-min-w-300 {
  min-width: 300px;
}
.uip-w-300 {
  width: 300px;
}
.uip-w-400 {
  width: 400px;
}
.uip-w-500 {
  width: 500px;
}
.uip-w-600 {
  width: 600px;
}
.uip-max-w-600 {
  max-width: 600px;
}

.uip-w-900 {
  width: 900px;
}
.uip-w-50p {
  width: 50%;
}
.uip-w-10p {
  width: 10%;
}
.uip-w-100p {
  width: 100%;
}
.uip-w-100p {
  width: 100%;
}
.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-32 {
  max-width: 32px;
}
.uip-max-w-150 {
  max-width: 150px;
}
.uip-max-w-300 {
  max-width: 300px;
}
.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-100p {
  max-width: 100%;
}
//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-card-background);
  overflow: auto;
}
/**
* INPUT CLASSES
*/
.uip-standard-input {
  border-radius: var(--uip-border-radius) !important;
  border: var(--uip-border-radius) solid var(--uip-border-color);
}
.uip-default-input {
  background-color: var(--uip-background-muted) !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-normal);
  &:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}
.uip-input-color::placeholder {
  color: var(--uip-text-color-muted);
}

.uip-active-outline {
  outline: 2px solid var(--uip-color-primary-wash);
}
/**
* BACKGROUND CLASSES
*/
.uip-background-default {
  background-color: var(--uip-background-default);
}
.uip-background-muted {
  background-color: var(--uip-background-muted);
}
.uip-background-grey {
  background-color: var(--uip-background-grey);
}
.uip-background-orange {
  background-color: var(--uip-color-orange);
}
.uip-background-orange-wash {
  background-color: var(--uip-color-orange-wash);
}
.uip-background-green {
  background-color: var(--uip-color-green);
}
.uip-background-green-wash {
  background-color: var(--uip-color-green-wash);
}
.uip-background-red {
  background-color: var(--uip-color-red);
}
.uip-background-dark-red {
  background-color: var(--uip-color-dark-red);
}

.uip-background-primary {
  background-color: var(--uip-background-primary);
}
.uip-background-primary-wash {
  background-color: var(--uip-color-primary-wash);
}
.uip-background-dark {
  background-color: var(--uip-color-black);
}

.uip-background-red-wash {
  background-color: var(--uip-color-red-wash);
}
.uip-no-background {
  background: none;
}
/**
* BORDER CLASSES
*/
.uip-border-round {
  border-radius: var(--uip-border-radius);
}
.uip-border-round-left {
  border-radius: var(--uip-border-radius) 0 0 var(--uip-border-radius);
}
.uip-border-round-top {
  border-radius: var(--uip-border-radius) var(--uip-border-radius) 0 0;
}
.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-green {
  border-color: var(--uip-color-green);
}
.uip-border-dashed {
  border: 2px dashed var(--uip-border-color);
}
.uip-border-dashed-bottom {
  border-bottom: 2px dashed var(--uip-border-color);
}
.uip-no-border {
  border: none;
}
/**
* HOVER CLASSES
*/
.hover\:uip-background-muted {
  &:hover {
    background-color: var(--uip-background-muted);
  }
}
.hover\:uip-background-grey {
  &:hover {
    background-color: var(--uip-background-grey);
  }
}
.hover\:uip-background-primary-dark {
  &:hover {
    background-color: var(--uip-color-primary-dark);
  }
}
.hover\:uip-background-primary-wash {
  &:hover {
    background-color: var(--uip-color-primary-wash);
  }
}
.hover\:uip-background-secondary {
  &:hover {
    background-color: var(--uip-color-black-full);
  }
}
.hover\:uip-background-red {
  &:hover {
    background-color: var(--uip-color-red);
  }
}

/**
* LINK CLASSES
*/
.uip-link-default {
  color: var(--uip-text-color-normal);
  &:hover {
    color: var(--uip-text-color-emphasis);
  }
}
.uip-link-muted {
  color: var(--uip-text-color-muted);
  cursor: pointer;
  &:hover {
    color: var(--uip-text-color-normal);
  }
  &:active,
  &:focus {
    color: var(--uip-text-color-emphasis);
  }
}
.uip-no-outline {
  outline: none !important;
  box-shadow: none !important;
}
.uip-no-underline {
  text-decoration: none !important;
}
/**
* TEXT CLASSES
*/
.uip-text-xs {
  font-size: var(--uip-text-xs);
}
.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);
}
.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-normal);
}
.uip-text-emphasis {
  color: var(--uip-text-color-emphasis);
}

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

.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-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;
}

///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-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-bold {
  font-weight: var(--uip-text-bold);
}
.uip-text-lowercase {
  text-transform: lowercase;
}
/** 
* PADDING CLASSES
*/
.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-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);
}
//PADDING RIGHT
.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);
}
//PADDING TOP
.uip-padding-top-remove {
  padding-top: 0;
}
.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);
}
//PADDING BOTTOM
.uip-padding-bottom-remove {
  padding-bottom: 0;
}
.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);
}

/** 
* 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;
}

///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);
}

/**
* 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-center {
  align-items: center;
}
.uip-flex-middle {
  justify-content: center;
}

.uip-flex-end {
  justify-content: flex-end;
}
.uip-flex-column {
  flex-direction: column;
}
.uip-flex-row {
  flex-direction: row;
}
.uip-flex-between {
  justify-content: space-between;
}
.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-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-row {
  flex-direction: row;
}
.uip-flex-stretch {
  align-items: stretch;
}
.uip-flex-vertical-middle {
  justify-content: center;
}

/**
* POSITION CLASSES
*/
.uip-left-0 {
  left: 0;
}
.uip-left-menu {
  left: var(--uip-menu-width);
}
.uip-right-0 {
  right: 0;
}
.uip-right--8 {
  right: -8px;
}
.uip-top--8 {
  top: -8px;
}
.uip-bottom-0 {
  bottom: 0;
}
.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-120p {
  top: 120%;
}
.uip-right-center {
  right: 50%;
  transform: translate(50%, 0px);
}

/**
* TOOLTIP
*/

.uip-tooltip {
  border-radius: var(--uip-border-radius);
  padding: var(--uip-padding-xxs);
  background: var(--uip-color-black);
  color: var(--uip-text-color-inverse);
  z-index: 999999;
  min-width: 100px;
  font-size: 12px;
  text-align: center;
  animation-name: uip-fade-in-delay;
  animation-duration: 0.8s;
  &::after {
    content: "";
    background: var(--uip-color-black);
    border-radius: var(--uip-border-radius);
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: -3px;
    transform: rotate(45deg);
    left: calc(50% - 5px);
  }
}
/**
* ANIMATIONS CLASSES
*/
.uip-fade-in {
  animation-name: uip-fade;
  animation-duration: 0.6s;
}

.uip-focus-in {
  animation-name: uip-focus-in;
  animation-duration: 2s;
}

.uip-scale-in {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: top right;
}
.uip-scale-in-bottom {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: bottom center;
}
.uip-scale-in-right {
  animation-name: scale-in;
  animation-duration: 0.2s;
  transform-origin: right center;
}

////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);
}

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

///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);
  }

  80% {
    transform: scale(1.07);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@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-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-wash);
}

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

.uip-scrollbar {
  &::-webkit-scrollbar {
    width: 1em;
  }
  &::-webkit-scrollbar-track {
    background-color: var(--uip-background-muted);
    border-radius: var(--uip-border-radius);
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--uip-background-default);
    border: 2px solid var(--uip-background-muted);
    border-radius: var(--uip-border-radius);
  }
}

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

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

//LINK HELPER CLASSES
@import "utility/utility.scss";
@import "modules/admin-menu.scss";
@import "modules/toolbar.scss";
@import "modules/login.scss";
@import "modules/dark.scss";
@import "plugins/compatability.scss";
@import "uip-icons.css";

html[uip-admin-theme="true"] {
  --wp-admin-theme-color: var(--uip-color-primary);
  --wp-admin-theme-color-darker-10: var(--uip-color-primary-dark);
  --wp-admin-theme-color-darker-20: var(--uip-color-primary-dark);
  @import "modules/theme.scss";
}
html[uip-admin-theme="true"][data-theme="dark"] {
  @import "modules/gutenberg-dark.scss";
}
