/**
 * default to generate [2-11] columns as 1 (oneColumnMode) and 12 (default) are in the main css
 * Copyright (c) 2021 Alain Dumesny - see GridStack root license
 */
.gs-2 > .grid-stack-item {
  width: 50%;
}
.gs-2 > .grid-stack-item[gs-x="1"] {
  left: 50%;
}
.gs-2 > .grid-stack-item[gs-w="2"] {
  width: 100%;
}

.gs-3 > .grid-stack-item {
  width: 33.333%;
}
.gs-3 > .grid-stack-item[gs-x="1"] {
  left: 33.333%;
}
.gs-3 > .grid-stack-item[gs-w="2"] {
  width: 66.667%;
}
.gs-3 > .grid-stack-item[gs-x="2"] {
  left: 66.667%;
}
.gs-3 > .grid-stack-item[gs-w="3"] {
  width: 100%;
}

.gs-4 > .grid-stack-item {
  width: 25%;
}
.gs-4 > .grid-stack-item[gs-x="1"] {
  left: 25%;
}
.gs-4 > .grid-stack-item[gs-w="2"] {
  width: 50%;
}
.gs-4 > .grid-stack-item[gs-x="2"] {
  left: 50%;
}
.gs-4 > .grid-stack-item[gs-w="3"] {
  width: 75%;
}
.gs-4 > .grid-stack-item[gs-x="3"] {
  left: 75%;
}
.gs-4 > .grid-stack-item[gs-w="4"] {
  width: 100%;
}

.gs-5 > .grid-stack-item {
  width: 20%;
}
.gs-5 > .grid-stack-item[gs-x="1"] {
  left: 20%;
}
.gs-5 > .grid-stack-item[gs-w="2"] {
  width: 40%;
}
.gs-5 > .grid-stack-item[gs-x="2"] {
  left: 40%;
}
.gs-5 > .grid-stack-item[gs-w="3"] {
  width: 60%;
}
.gs-5 > .grid-stack-item[gs-x="3"] {
  left: 60%;
}
.gs-5 > .grid-stack-item[gs-w="4"] {
  width: 80%;
}
.gs-5 > .grid-stack-item[gs-x="4"] {
  left: 80%;
}
.gs-5 > .grid-stack-item[gs-w="5"] {
  width: 100%;
}

.gs-6 > .grid-stack-item {
  width: 16.667%;
}
.gs-6 > .grid-stack-item[gs-x="1"] {
  left: 16.667%;
}
.gs-6 > .grid-stack-item[gs-w="2"] {
  width: 33.333%;
}
.gs-6 > .grid-stack-item[gs-x="2"] {
  left: 33.333%;
}
.gs-6 > .grid-stack-item[gs-w="3"] {
  width: 50%;
}
.gs-6 > .grid-stack-item[gs-x="3"] {
  left: 50%;
}
.gs-6 > .grid-stack-item[gs-w="4"] {
  width: 66.667%;
}
.gs-6 > .grid-stack-item[gs-x="4"] {
  left: 66.667%;
}
.gs-6 > .grid-stack-item[gs-w="5"] {
  width: 83.333%;
}
.gs-6 > .grid-stack-item[gs-x="5"] {
  left: 83.333%;
}
.gs-6 > .grid-stack-item[gs-w="6"] {
  width: 100%;
}

.gs-7 > .grid-stack-item {
  width: 14.286%;
}
.gs-7 > .grid-stack-item[gs-x="1"] {
  left: 14.286%;
}
.gs-7 > .grid-stack-item[gs-w="2"] {
  width: 28.571%;
}
.gs-7 > .grid-stack-item[gs-x="2"] {
  left: 28.571%;
}
.gs-7 > .grid-stack-item[gs-w="3"] {
  width: 42.857%;
}
.gs-7 > .grid-stack-item[gs-x="3"] {
  left: 42.857%;
}
.gs-7 > .grid-stack-item[gs-w="4"] {
  width: 57.143%;
}
.gs-7 > .grid-stack-item[gs-x="4"] {
  left: 57.143%;
}
.gs-7 > .grid-stack-item[gs-w="5"] {
  width: 71.429%;
}
.gs-7 > .grid-stack-item[gs-x="5"] {
  left: 71.429%;
}
.gs-7 > .grid-stack-item[gs-w="6"] {
  width: 85.714%;
}
.gs-7 > .grid-stack-item[gs-x="6"] {
  left: 85.714%;
}
.gs-7 > .grid-stack-item[gs-w="7"] {
  width: 100%;
}

.gs-8 > .grid-stack-item {
  width: 12.5%;
}
.gs-8 > .grid-stack-item[gs-x="1"] {
  left: 12.5%;
}
.gs-8 > .grid-stack-item[gs-w="2"] {
  width: 25%;
}
.gs-8 > .grid-stack-item[gs-x="2"] {
  left: 25%;
}
.gs-8 > .grid-stack-item[gs-w="3"] {
  width: 37.5%;
}
.gs-8 > .grid-stack-item[gs-x="3"] {
  left: 37.5%;
}
.gs-8 > .grid-stack-item[gs-w="4"] {
  width: 50%;
}
.gs-8 > .grid-stack-item[gs-x="4"] {
  left: 50%;
}
.gs-8 > .grid-stack-item[gs-w="5"] {
  width: 62.5%;
}
.gs-8 > .grid-stack-item[gs-x="5"] {
  left: 62.5%;
}
.gs-8 > .grid-stack-item[gs-w="6"] {
  width: 75%;
}
.gs-8 > .grid-stack-item[gs-x="6"] {
  left: 75%;
}
.gs-8 > .grid-stack-item[gs-w="7"] {
  width: 87.5%;
}
.gs-8 > .grid-stack-item[gs-x="7"] {
  left: 87.5%;
}
.gs-8 > .grid-stack-item[gs-w="8"] {
  width: 100%;
}

.gs-9 > .grid-stack-item {
  width: 11.111%;
}
.gs-9 > .grid-stack-item[gs-x="1"] {
  left: 11.111%;
}
.gs-9 > .grid-stack-item[gs-w="2"] {
  width: 22.222%;
}
.gs-9 > .grid-stack-item[gs-x="2"] {
  left: 22.222%;
}
.gs-9 > .grid-stack-item[gs-w="3"] {
  width: 33.333%;
}
.gs-9 > .grid-stack-item[gs-x="3"] {
  left: 33.333%;
}
.gs-9 > .grid-stack-item[gs-w="4"] {
  width: 44.444%;
}
.gs-9 > .grid-stack-item[gs-x="4"] {
  left: 44.444%;
}
.gs-9 > .grid-stack-item[gs-w="5"] {
  width: 55.556%;
}
.gs-9 > .grid-stack-item[gs-x="5"] {
  left: 55.556%;
}
.gs-9 > .grid-stack-item[gs-w="6"] {
  width: 66.667%;
}
.gs-9 > .grid-stack-item[gs-x="6"] {
  left: 66.667%;
}
.gs-9 > .grid-stack-item[gs-w="7"] {
  width: 77.778%;
}
.gs-9 > .grid-stack-item[gs-x="7"] {
  left: 77.778%;
}
.gs-9 > .grid-stack-item[gs-w="8"] {
  width: 88.889%;
}
.gs-9 > .grid-stack-item[gs-x="8"] {
  left: 88.889%;
}
.gs-9 > .grid-stack-item[gs-w="9"] {
  width: 100%;
}

.gs-10 > .grid-stack-item {
  width: 10%;
}
.gs-10 > .grid-stack-item[gs-x="1"] {
  left: 10%;
}
.gs-10 > .grid-stack-item[gs-w="2"] {
  width: 20%;
}
.gs-10 > .grid-stack-item[gs-x="2"] {
  left: 20%;
}
.gs-10 > .grid-stack-item[gs-w="3"] {
  width: 30%;
}
.gs-10 > .grid-stack-item[gs-x="3"] {
  left: 30%;
}
.gs-10 > .grid-stack-item[gs-w="4"] {
  width: 40%;
}
.gs-10 > .grid-stack-item[gs-x="4"] {
  left: 40%;
}
.gs-10 > .grid-stack-item[gs-w="5"] {
  width: 50%;
}
.gs-10 > .grid-stack-item[gs-x="5"] {
  left: 50%;
}
.gs-10 > .grid-stack-item[gs-w="6"] {
  width: 60%;
}
.gs-10 > .grid-stack-item[gs-x="6"] {
  left: 60%;
}
.gs-10 > .grid-stack-item[gs-w="7"] {
  width: 70%;
}
.gs-10 > .grid-stack-item[gs-x="7"] {
  left: 70%;
}
.gs-10 > .grid-stack-item[gs-w="8"] {
  width: 80%;
}
.gs-10 > .grid-stack-item[gs-x="8"] {
  left: 80%;
}
.gs-10 > .grid-stack-item[gs-w="9"] {
  width: 90%;
}
.gs-10 > .grid-stack-item[gs-x="9"] {
  left: 90%;
}
.gs-10 > .grid-stack-item[gs-w="10"] {
  width: 100%;
}

.gs-11 > .grid-stack-item {
  width: 9.091%;
}
.gs-11 > .grid-stack-item[gs-x="1"] {
  left: 9.091%;
}
.gs-11 > .grid-stack-item[gs-w="2"] {
  width: 18.182%;
}
.gs-11 > .grid-stack-item[gs-x="2"] {
  left: 18.182%;
}
.gs-11 > .grid-stack-item[gs-w="3"] {
  width: 27.273%;
}
.gs-11 > .grid-stack-item[gs-x="3"] {
  left: 27.273%;
}
.gs-11 > .grid-stack-item[gs-w="4"] {
  width: 36.364%;
}
.gs-11 > .grid-stack-item[gs-x="4"] {
  left: 36.364%;
}
.gs-11 > .grid-stack-item[gs-w="5"] {
  width: 45.455%;
}
.gs-11 > .grid-stack-item[gs-x="5"] {
  left: 45.455%;
}
.gs-11 > .grid-stack-item[gs-w="6"] {
  width: 54.545%;
}
.gs-11 > .grid-stack-item[gs-x="6"] {
  left: 54.545%;
}
.gs-11 > .grid-stack-item[gs-w="7"] {
  width: 63.636%;
}
.gs-11 > .grid-stack-item[gs-x="7"] {
  left: 63.636%;
}
.gs-11 > .grid-stack-item[gs-w="8"] {
  width: 72.727%;
}
.gs-11 > .grid-stack-item[gs-x="8"] {
  left: 72.727%;
}
.gs-11 > .grid-stack-item[gs-w="9"] {
  width: 81.818%;
}
.gs-11 > .grid-stack-item[gs-x="9"] {
  left: 81.818%;
}
.gs-11 > .grid-stack-item[gs-w="10"] {
  width: 90.909%;
}
.gs-11 > .grid-stack-item[gs-x="10"] {
  left: 90.909%;
}
.gs-11 > .grid-stack-item[gs-w="11"] {
  width: 100%;
}
/**
 * gridstack SASS styles 10.1.2
 * Copyright (c) 2021 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;
}
.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-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: translate(0, 10px) rotate(45deg);
}
.grid-stack-item > .ui-resizable-sw {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-nw {
  transform: translate(0, 10px) 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: 0;
}
.grid-stack-item > .ui-resizable-n {
  cursor: n-resize;
  height: 10px;
  top: 0;
  left: 25px;
  right: 25px;
}
.grid-stack-item > .ui-resizable-ne {
  cursor: ne-resize;
  width: 20px;
  height: 20px;
  top: 0;
}
.grid-stack-item > .ui-resizable-e {
  cursor: e-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
}
.grid-stack-item > .ui-resizable-se {
  cursor: se-resize;
  width: 20px;
  height: 20px;
}
.grid-stack-item > .ui-resizable-s {
  cursor: s-resize;
  height: 10px;
  left: 25px;
  bottom: 0;
  right: 25px;
}
.grid-stack-item > .ui-resizable-sw {
  cursor: sw-resize;
  width: 20px;
  height: 20px;
}
.grid-stack-item > .ui-resizable-w {
  cursor: w-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
}
.grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
  display: none !important;
}
.grid-stack-item.ui-draggable-dragging {
  will-change: left, top;
  cursor: move;
}
.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%;
}

.gs-12 > .grid-stack-item {
  width: 8.333%;
}
.gs-12 > .grid-stack-item[gs-x="1"] {
  left: 8.333%;
}
.gs-12 > .grid-stack-item[gs-w="2"] {
  width: 16.667%;
}
.gs-12 > .grid-stack-item[gs-x="2"] {
  left: 16.667%;
}
.gs-12 > .grid-stack-item[gs-w="3"] {
  width: 25%;
}
.gs-12 > .grid-stack-item[gs-x="3"] {
  left: 25%;
}
.gs-12 > .grid-stack-item[gs-w="4"] {
  width: 33.333%;
}
.gs-12 > .grid-stack-item[gs-x="4"] {
  left: 33.333%;
}
.gs-12 > .grid-stack-item[gs-w="5"] {
  width: 41.667%;
}
.gs-12 > .grid-stack-item[gs-x="5"] {
  left: 41.667%;
}
.gs-12 > .grid-stack-item[gs-w="6"] {
  width: 50%;
}
.gs-12 > .grid-stack-item[gs-x="6"] {
  left: 50%;
}
.gs-12 > .grid-stack-item[gs-w="7"] {
  width: 58.333%;
}
.gs-12 > .grid-stack-item[gs-x="7"] {
  left: 58.333%;
}
.gs-12 > .grid-stack-item[gs-w="8"] {
  width: 66.667%;
}
.gs-12 > .grid-stack-item[gs-x="8"] {
  left: 66.667%;
}
.gs-12 > .grid-stack-item[gs-w="9"] {
  width: 75%;
}
.gs-12 > .grid-stack-item[gs-x="9"] {
  left: 75%;
}
.gs-12 > .grid-stack-item[gs-w="10"] {
  width: 83.333%;
}
.gs-12 > .grid-stack-item[gs-x="10"] {
  left: 83.333%;
}
.gs-12 > .grid-stack-item[gs-w="11"] {
  width: 91.667%;
}
.gs-12 > .grid-stack-item[gs-x="11"] {
  left: 91.667%;
}
.gs-12 > .grid-stack-item[gs-w="12"] {
  width: 100%;
}

.gs-1 > .grid-stack-item {
  width: 100%;
}
/*
    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);
        }