/**
 * gridstack SASS styles 12.3.3
 * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
 */
.grid-stack {
  position: relative;
}

.grid-stack-rtl {
  direction: ltr;
}
.grid-stack-rtl > .grid-stack-item {
  direction: rtl;
}

.grid-stack-placeholder > .placeholder-content {
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0;
  position: absolute;
  width: auto;
  z-index: 0 !important;
}

.grid-stack > .grid-stack-item {
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  width: var(--gs-column-width);
  height: var(--gs-cell-height);
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  margin: 0;
  position: absolute;
  width: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
  overflow-y: hidden;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content,
.grid-stack > .grid-stack-placeholder > .placeholder-content {
  top: var(--gs-item-margin-top);
  right: var(--gs-item-margin-right);
  bottom: var(--gs-item-margin-bottom);
  left: var(--gs-item-margin-left);
}

.grid-stack-item > .ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
}
.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
  display: none;
}
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw,
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}
.grid-stack-item > .ui-resizable-ne {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-sw {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-nw {
  transform: rotate(-45deg);
}
.grid-stack-item > .ui-resizable-se {
  transform: rotate(-45deg);
}
.grid-stack-item > .ui-resizable-nw {
  cursor: nw-resize;
  width: 20px;
  height: 20px;
  top: var(--gs-item-margin-top);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-n {
  cursor: n-resize;
  height: 10px;
  top: var(--gs-item-margin-top);
  left: 25px;
  right: 25px;
}
.grid-stack-item > .ui-resizable-ne {
  cursor: ne-resize;
  width: 20px;
  height: 20px;
  top: var(--gs-item-margin-top);
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-e {
  cursor: e-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-se {
  cursor: se-resize;
  width: 20px;
  height: 20px;
  bottom: var(--gs-item-margin-bottom);
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-s {
  cursor: s-resize;
  height: 10px;
  left: 25px;
  bottom: var(--gs-item-margin-bottom);
  right: 25px;
}
.grid-stack-item > .ui-resizable-sw {
  cursor: sw-resize;
  width: 20px;
  height: 20px;
  bottom: var(--gs-item-margin-bottom);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-w {
  cursor: w-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
  left: var(--gs-item-margin-left);
}
.grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
  display: none !important;
}
.grid-stack-item.ui-draggable-dragging {
  will-change: left, top;
}
.grid-stack-item.ui-resizable-resizing {
  will-change: width, height;
}

.ui-draggable-dragging,
.ui-resizable-resizing {
  z-index: 10000;
}
.ui-draggable-dragging > .grid-stack-item-content,
.ui-resizable-resizing > .grid-stack-item-content {
  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}

.grid-stack-animate,
.grid-stack-animate .grid-stack-item {
  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
}

.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
  transition: left 0s, top 0s, height 0s, width 0s;
}

.grid-stack > .grid-stack-item[gs-y="0"] {
  top: 0px;
}

.grid-stack > .grid-stack-item[gs-x="0"] {
  left: 0%;
}
/*
    More detailed instruction: https://wiki.bravurasolutions.com/display/IntTaweb/Using+graphics+in+TAWeb
    Add content here if the icons available in already used external libraries (like Material Icons) are not enough
    Some actions needs to be performed on the SVG before implementation, in the following order:
    1. Optimization (https://jakearchibald.github.io/svgomg/ - use open SVG or Paste markup options)
    2. URL encoding (https://npm.runkit.com/mini-svg-data-uri - check Usage section on the right side)
    
    Use the result as a CSS background with a SVG Data URI e.g.:
        background-image: url("data:image/svg+xml, _url_encoded_svg_"); - putting the uri in double quotes is important

    Remember to use hyphen-delimited syntax for CSS selector naming
    Full example:
        .example-delete-icon {
            background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3e%3cpath d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-size: auto;
        }
*/


.menu-arrow-icon,
#menucontainer .k-icon.k-menu-expand-arrow /* unique case, for Kendo menu dropdown arrows*/ {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='none' d='M0 0h24v24H0V0z'/%3e%3cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
}

.dashboard-customise-icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3e%3cpath fill='%239E9E9E' d='M0 10h8V0H0v10zm0 8h8v-6H0v6zm10 0h8V8h-8v10zm0-18v6h8V0h-8z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
}

/*
    Think twice before changing anything here
    If you need to amend styling of Material Icons for a particular brand, like branding colours, font-sizes or default hover animations etc
    do so in a brand specific stylesheet for icons e.g. RetailAMI-icons-overrides.css
*/

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("/Content/Icons/MaterialDesign/Fonts/v126/MaterialIcons-Regular.eot"); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), url("/Content/Icons/MaterialDesign/Fonts/v126/MaterialIcons-Regular.woff2") format('woff2'), url("/Content/Icons/MaterialDesign/Fonts/v126/MaterialIcons-Regular.woff") format('woff'), url("/Content/Icons/MaterialDesign/Fonts/v126/MaterialIcons-Regular.ttf") format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: inherit;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    text-transform: none !important;
}

    /* Rules for sizing the icon. */
    .material-icons.md-18 {
        font-size: 18px;
    }    
    .material-icons.md-21 {
        font-size: 21px;
    }

    .material-icons.md-24 {
        font-size: 24px;
    }

    .material-icons.md-36 {
        font-size: 36px;
    }

    .material-icons.md-30 {
        font-size: 30px;
    }

    .material-icons.md-48 {
        font-size: 48px;
    }

    .material-icons.md-clickable:hover {
        color: rgba(0, 0, 0, 0.82);
        cursor: pointer;
        -webkit-transition: all 0.1s;
        -moz-transition: all 0.1s;
        -o-transition: all 0.1s;
        transition: all 0.1s;
    }

/* Rules for using icons as black on a light background (Default) */
.material-icons {
    color: rgba(0, 0, 0, 0.54);
}

    .material-icons.md-inactive,
    .material-icons.md-inactive:hover {
        color: rgba(0, 0, 0, 0.26);
        cursor: default;
    }

    /* Rules for using icons as white on a dark background (Rare cases) */
    .material-icons.md-light {
        color: rgba(255, 255, 255, 1);
    }

        .material-icons.md-light.md-clickable:hover {
            color: rgba(255, 255, 255, 0.82);
        }

        .material-icons.md-light.md-inactive,
        .material-icons.md-light.md-inactive:hover {
            color: rgba(255, 255, 255, 0.3);
        }