/*[ICONS]**************************************************************************************************************/
/**
  The icon is drawn in the 'content' of the '::before' psuedo,
  By default it is a 16x16 box with the icon filling the space.
  Generally......
  Button is 30x30 1px border 5px padding content area is 18px -
                  psuedo is 16x16 border 0 padding 0 = icon is 16px text is font size is 12 px at 1.5x lineheight is 18px
  Button.i-btn is 30x30 0 border 0 padding content area is 30px -
                  psuedo is 30x30 border 2 padding 5 = icon 16
  Icon tag is 16x16 no border no padding = icon is 16
  Can vary size
  Can vary border color
  Can vary icon color
  but must be explicit!
  Adding color class to element changes color of icon
  Adding size class to element changes size of icon
  Adding border color class to element effects the icon border on 'i-btn' only
  Some elements have defaults i.e. color is preset with no explicit color class required
  If you set 'color' then both text and icon are the same color
  If you want one to be different you must explicitly set BOTH 'icon-color' and 'text-color'
  THERE ARE NO MORE 'i.btn' they are automatically converted to 'button.i-btn'
  Any none i-btn i tag is auto converted to an icon element
  Icon's are input helper, deliverables play controls, todos.views, file upload controls
  NOTE:Secondary buttons use a 12px icon!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  NOTE: The ::after psuedo is used to display symbols or attr data
  NOTE TO ROB: The below URL is versioned and should be updated whenever the font file is updated!!!!!
**/
@font-face {
  font-family: "wmj";
  src: url("../../assets/fonts/wmj.woff?v=20230201") format("woff");
  font-weight: normal;
  font-style: normal;
}
icon::before,
.i-right::before,
.icon-r::before,
.icon-l::before,
.icon-c::before,
.icon-j::before,
.icon::before {
  font-family: "wmj" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  text-decoration: none!important;
  font-size: 16px;
  speak: none;
  line-height: 1;
  flex: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: inline-block;
  vertical-align: middle;
  cursor: inherit;
  margin: 0;
  padding: 0;
}
/*[BUTTON ICONS] *******************************************************************************************************/
button.icon {
  justify-content: center;
  padding: 0!important;
}
button.icon::before {
  margin: 0;
}
icon.icon-r,
button.icon-r {
  flex-direction: row-reverse;
  justify-content: end;
  width: auto;
}
icon.icon-r::before,
button.icon-r::before {
  margin-left: 5px;
}
icon.icon-l,
button.icon-l {
  justify-content: start;
  width: auto;
}
icon.icon-l::before,
button.icon-l::before {
  margin-right: 5px;
}
icon.icon-c,
button.icon-c {
  flex-direction: column;
  justify-content: center;
  height: auto;
}
/*to get around how someone specified btn-action.secondary we have to make the margin-right important*/
icon.icon-c::before,
button.icon-c::before {
  margin-left: auto!important;
  margin-right: auto!important;
  margin-bottom: 4px;
}
icon.icon-l.justified,
button.icon-l.justified,
icon.icon-r.justified,
button.icon-r.justified {
  justify-content: space-between;
}
/*BUTTON only 'l'(deliverables) and 'xl'(i-btn mainmenu) are in use by button but m is the default if not specified*/
/*ICON 'ss' used in deliverables 'm' 'xxl' used by datagrid delete expand dashboard uses xxl*/
icon.ss::before,
button.ss::before {
  font-size: 10px!important;
}
icon.s::before,
button.s::before {
  font-size: 12px!important;
}
icon.m::before,
button.m::before {
  font-size: 16px!important;
}
icon.l::before,
button.l::before {
  font-size: 24px!important;
}
icon.xl::before,
button.xl::before {
  font-size: 32px!important;
}
icon.xxl::before,
button.xxl::before {
  font-size: 56px;
}
/*[I-BTN ICONS] *******************************************************************************************************/
/*[ICON TAG]************************************************************************************************************/
icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #000;
  padding: 0;
}
icon[data-action] {
  pointer-events: auto!important;
}
grid-indicator > icon.indicator {
  width: 100%;
  height: 100%;
}
icon.helper {
  position: absolute;
  bottom: 0.1rem;
  right: 0.1rem;
  width: 28px !important;
  min-width: 28px !important;
  min-height: 28px;
  cursor: pointer;
}
icon.round,
.timeline icon {
  height: 28px;
  width: 28px;
  border: none;
}
.timeline icon {
  margin-right: -1.6rem;
}
icon.round::before,
.timeline icon:before {
  width: 28px;
  height: 28px;
  background-color: #fff;
  border: 3px solid #0997d5;
  border-radius: 50%;
  color: #333;
  padding: 1px;
  line-height: 20px;
  text-align: center;
}
icon.round::before,
.timeline icon.green::before {
  border-color: #7bb724;
}
.spin.unchecked > icon {
  animation: spin-in 500ms ease both;
}
/*add custom to row when displaying custom editor*/
.spin.checked > icon {
  animation: spin-out 500ms ease both;
}
@keyframes spin-in {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes spin-out {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
icon.icon-text {
  font-style: italic;
}
icon.icon-text::before {
  margin-right: 0.5rem;
}
icon.rotate45 {
  transform: rotate(0deg);
}
icon.rotate45::before {
  transform: rotate(45deg);
}
.icon-rotate::before {
  transform: rotate(90deg);
  transform-origin: center;
}
.icon-rotate-270::before {
  transform: rotate(270deg);
  transform-origin: center;
}
.icon-rotate-180::before {
  transform: rotate(180deg);
  transform-origin: center;
}
/*[ICON TAG END]*******************************************************************************************************/
/*[I-RIGHT]************************************************************************************************************/
grid-cell.i-right::before {
  cursor: pointer;
  transition: transform 0.25s ease-in-out;
  transform: rotate(90deg);
  transform-origin: center;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  padding: 0;
  margin-right: 6px;
  margin-left: -16px;
  opacity: 1;
  font-size: 10px!important;
  line-height: 16px;
}
grid-row.collapsed > grid-cells > grid-cellgroup > grid-cell.i-right::before {
  transform: rotate(0deg);
}
li.i-right::before {
  width: 16px;
  height: 25px;
  min-width: 16px;
  min-height: 16px;
}
listview.jumplist > li.i-right::before {
  line-height: 2.5rem;
  position: absolute;
  right: 9px;
}
/*[I-RIGHT] END********************************************************************************************************/
/*[SVG ICONS] **********************************************************************************************************/
svg.svghidden,
svg.svgsymbols {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
svg.icon {
  display: inline-block;
}
svg.icon.micro {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
}
svg.icon.mini {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
svg.icon.small {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
svg.icon.medium {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
svg.icon.large {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}
svg.icon.xlarge {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
}
svg.icon.collapsed {
  transform: scaleY(-1);
}
/*[ICONS] END**********************************************************************************************************/
/*[BUTTON ICON COLOR DEFAULTS]*****************************************************************************************/
button::before,
icon::before {
  color: #333;
}
button.bottom::before {
  color: #000;
}
button.muted::before,
button.btn-label::before {
  color: #b4b4b4;
}
button.btn-action::before,
button.i-btn::before {
  color: #0997d5;
}
button.btn-primary::before,
button.btn-secondary::before,
button.btn-danger::before,
button.i-btn.menu::before {
  color: #fff;
}
button.btn-auto-save::before {
  color: #7bb724;
}
button.btn-footer:before {
  color: #dff1fa;
}
/*[FOCUS OVERRIDES]****************************************************************************************************/
button.white:focus::before {
  color: #333;
}
/*[ACTIVE OVERRIDES]***************************************************************************************************/
button:active::before,
button.active::before,
button.i-btn:active::before,
button.i-btn.active::before {
  color: #fff !important;
}
button.btn-action.active::before,
button.btn-action:active::before,
button.bottom.active::before,
button.bottom:active::before {
  color: #000 !important;
}
button.btn-action.secondary:focus::before,
button.btn-action.secondary.focus::before,
button.btn-action.secondary:active::before,
button.btn-action.secondary.active::before {
  color: #fff !important;
}
button.btn-danger:active::before,
button.btn-danger.active::before {
  color: #d0333e !important;
}
button.btn-secondary:active::before,
button.btn-secondary.active::before {
  color: #7bb724 !important;
}
button.btn-primary:active::before,
button.btn-primary.active::before {
  color: #0997d5 !important;
}
/*[DISABLED OVERRIDES]*************************************************************************************************/
:disabled::before {
  color: #bebebe;
}
button.btn-auto-save:disabled::before {
  color: #ccc;
}
/*[BUTTON COLOR DEFAULTS] END******************************************************************************************/
/*[SPECIALS COLOR OVERRIDES]*************************************************************************************************/
listview.listview-dropdown > li.selected::after {
  color: #ffffff;
}
.i-delete::before {
  color: #d0333e;
}
button.i-btn.xl {
  width: 90px!important;
  height: 90px!important;
}
button.i-btn.xl::before {
  width: 90px!important;
  height: 90px!important;
}
button.i-btn.icon-c.overflow-label {
  overflow: visible;
  margin-bottom: 28px;
}
button.i-btn.icon-c.overflow-label::before {
  margin-bottom: 0;
}
button.i-btn.icon-c.overflow-label > span {
  display: block;
  text-align: center;
  white-space: normal;
  font-size: 12px;
  line-height: 13px;
  position: absolute;
  width: 100%;
  top: calc( 100% + 2px );
}
button.i-btn.xl.menu,
button.i-btn.xl.menu::before {
  color: #fff;
}
button.i-btn.xl.menu.icon-black.no-hover::after {
  color: #333 !important;
  text-shadow: none;
}
button.i-btn.xl.menu.i-menu-folder::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 90px;
  width: 90px;
  vertical-align: middle;
  display: inline-block;
  font-family: monospace;
  font-size: 35px;
  line-height: 35px;
  font-weight: bold;
  speak: none;
  cursor: inherit;
  margin: 0;
  padding: 0;
  color: #ffffff;
  content: "\2026";
  padding-top: 42px;
  text-align: center;
}
@media screen and (max-width: 479px) {
  /* 80x80 circle*/
  button.i-btn.xl {
    width: 80px!important;
    height: 80px!important;
    border-radius: 40px;
    /*we need this because it then clips the background - dont use %*/
  }
  button.i-btn.xl.i-menu-folder::before,
  button.i-btn.xl.menu::before,
  button.i-btn.xl::before {
    width: 80px!important;
    height: 80px!important;
    line-height: 76px;
  }
  button.i-btn.i-menu-folder::after {
    width: 80px!important;
    height: 80px!important;
    min-height: 80px!important;
    min-width: 80px!important;
    padding-top: 37px;
  }
}
button.i-btn.i-list.phone::before,
button.i-btn.i-more.phone::before {
  color: #ffffff;
}
body.ctl button.i-btn.close.i-close:hover::before {
  color: #0997d5 !important;
  content: "\2e";
  border-color: #0997D5;
}
button.icon {
  text-decoration: none!important;
}
input[type="search"] {
  background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20id%3D%22i-search%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20viewBox%3D%220%200%2032%2032%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23000%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M30.8%2014.7c0-7.3-5.9-13.2-13.1-13.2-7.3%200-13.2%205.9-13.2%2013.2s5.9%2013.1%2013.2%2013.1c7.2%200%2013.1-5.9%2013.1-13.1zm-13.1%208.7c-4.8%200-8.7-3.9-8.7-8.7C9%209.9%2012.9%206%2017.7%206s8.7%203.9%208.7%208.7c0%204.8-3.9%208.7-8.7%208.7zM7.8%2026.9c0%201.8-1.5%203.3-3.3%203.3s-3.3-1.5-3.3-3.3%201.5-3.3%203.3-3.3%203.3%201.5%203.3%203.3z%22%2F%3E%3C%2Fsvg%3E), url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=);
  background-size: 16px 16px, auto;
  background-repeat: no-repeat;
  background-position: left 9px center, right -10px center;
}
icon.icon-2x {
  width: 2rem;
  height: 2rem;
}
icon.icon-2x:before {
  font-size: 20px;
}
icon.icon-25x {
  width: 2.5rem;
  height: 2.5rem;
}
icon.icon-25x:before {
  font-size: 25px;
}
icon.icon-3x {
  width: 3rem;
  height: 3rem;
}
icon.icon-3x:before {
  font-size: 30px;
}
icon.icon-4x {
  width: 4rem;
  height: 4rem;
}
icon.icon-4x:before {
  font-size: 40px;
}
icon.icon-2x,
icon.icon-25x,
icon.icon-3x,
icon.icon-4x {
  min-width: 0;
}
.active.i-maximize:before {
  animation: spin-in 0.2s linear;
}
:active.flip-icon::before,
.active.flip-icon::before {
  transform: scaleY(-1);
}
/*[SPECIALS OVERRIDES] END*********************************************************************************************/