/* You can add global styles to this file, and also import other style files */
/* easylogic-colorpicker */
.easylogic-colorpicker {
  position: relative;
  width: 224px;
  z-index: 1000;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12);
  outline: none;
  /* theme */ }
.easylogic-colorpicker > .arrow {
    position: absolute;
    top: -10px;
    left: 7px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    display: none;
    border-bottom: 10px solid rgba(0, 0, 0, 0.2);
    pointer-events: none; }
.easylogic-colorpicker > .arrow:after {
      position: absolute;
      content: "";
      top: 1px;
      left: -9px;
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid white; }
.easylogic-colorpicker .colorpicker-body .arrow-button {
    position: relative;
    width: 10px;
    height: 12px;
    padding: 0px;
    background-color: transparent; }
.easylogic-colorpicker .colorpicker-body .arrow-button:before {
      content: "";
      display: inline-block;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      height: 50%;
      width: 0;
      height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-bottom: 3px solid black;
      pointer-events: none;
      margin: 2px;
      box-sizing: border-box; }
.easylogic-colorpicker .colorpicker-body .arrow-button:after {
      content: "";
      display: inline-block;
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 50%;
      width: 0;
      height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 3px solid black;
      pointer-events: none;
      margin: 2px;
      box-sizing: border-box; }
.easylogic-colorpicker .colorpicker-body .color {
    position: relative;
    height: 120px;
    overflow: hidden;
    cursor: pointer; }
.easylogic-colorpicker .colorpicker-body .color > .saturation {
      position: relative;
      width: 100%;
      height: 100%; }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value {
        position: relative;
        width: 100%;
        height: 100%; }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer {
          position: absolute;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          transform: translateX(-50%) translateY(-50%); }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer > div {
            border: 1px solid #ececec;
            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
            box-sizing: border-box;
            position: absolute;
            width: 10px;
            height: 4px;
            background-color: white; }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer .left-saturation {
            left: 0%;
            top: 50%;
            transform: translateX(calc(-100% - 4px)) translateY(-50%);
            cursor: col-resize; }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer .right-saturation {
            left: 100%;
            top: 50%;
            transform: translateX(4px) translateY(-50%);
            cursor: col-resize; }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer .top-value {
            width: 4px;
            height: 10px;
            left: 50%;
            top: 0%;
            transform: translateX(-50%) translateY(calc(-100% - 4px));
            cursor: row-resize; }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer .bottom-value {
            width: 4px;
            height: 10px;
            left: 50%;
            top: 100%;
            transform: translateX(-50%) translateY(4px);
            cursor: row-resize; }
.easylogic-colorpicker .colorpicker-body .color > .saturation {
      background-color: rgba(204, 154, 129, 0);
      background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0));
      background-repeat: repeat-x; }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value {
        background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0)); }
.easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer {
          border: 1px solid #fff;
          box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); }
.easylogic-colorpicker .colorpicker-body .control {
    position: relative;
    padding: 10px 0px 10px 0px;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; }
.easylogic-colorpicker .colorpicker-body .control > .color,
    .easylogic-colorpicker .colorpicker-body .control > .empty {
      position: absolute;
      left: 12px;
      top: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      box-sizing: border-box; }
.easylogic-colorpicker .colorpicker-body .control > .color2,
    .easylogic-colorpicker .colorpicker-body .control > .empty2 {
      position: absolute;
      left: 12px;
      top: 50px;
      width: 30px;
      height: 20px;
      border-radius: 4px;
      box-sizing: border-box; }
.easylogic-colorpicker .colorpicker-body .control > .color {
      border: 1px solid rgba(0, 0, 0, 0.1); }
.easylogic-colorpicker .colorpicker-body .control > .hue {
      position: relative;
      padding: 3px 16px;
      margin: 0px 0px 0px 42px;
      box-sizing: border-box;
      cursor: pointer; }
.easylogic-colorpicker .colorpicker-body .control > .hue > .hue-container {
        position: relative;
        width: 100%;
        height: 14px;
        border-radius: 3px; }
.easylogic-colorpicker .colorpicker-body .control > .hue-scale {
      position: relative;
      padding: 3px 16px;
      margin: 0px 0px 0px 42px;
      box-sizing: border-box;
      cursor: pointer; }
.easylogic-colorpicker .colorpicker-body .control > .hue-scale > .hue-scale-container {
        position: relative;
        width: 100%;
        height: 14px; }
.easylogic-colorpicker .colorpicker-body .control > .opacity {
      position: relative;
      padding: 3px 16px;
      margin: 0px 0px 0px 42px;
      box-sizing: border-box;
      cursor: pointer; }
.easylogic-colorpicker .colorpicker-body .control > .opacity > .opacity-container {
        position: relative;
        width: 100%;
        height: 14px;
        border-radius: 3px; }
.easylogic-colorpicker .colorpicker-body .control .drag-bar,
    .easylogic-colorpicker .colorpicker-body .control .drag-bar2 {
      position: absolute;
      cursor: pointer;
      top: 50%;
      left: 0px;
      transform: translateX(-50%) translateY(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%; }
.easylogic-colorpicker .colorpicker-body .control > .hue > .hue-container {
      background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); }
.easylogic-colorpicker .colorpicker-body .control > .opacity > .opacity-container {
      background-color: transparent;
      background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
      background-size: 10px 10px;
      background-position: 0 0, 0 5px, 5px -5px, -5px 0px; }
.easylogic-colorpicker .colorpicker-body .control > .opacity > .opacity-container > .color-bar {
        position: absolute;
        display: block;
        content: "";
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: 0px; }
.easylogic-colorpicker .colorpicker-body .control > .empty,
    .easylogic-colorpicker .colorpicker-body .control > .empty2 {
      background-color: transparent;
      background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
      background-size: 10px 10px;
      background-position: 0 0, 0 5px, 5px -5px, -5px 0px; }
.easylogic-colorpicker .colorpicker-body .control .drag-bar,
    .easylogic-colorpicker .colorpicker-body .control .drag-bar2 {
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
      background-color: #fefefe; }
.easylogic-colorpicker .colorpicker-body .information {
    /*border-top: 1px solid #e8e8e8;*/
    position: relative;
    box-sizing: padding-box; }
.easylogic-colorpicker .colorpicker-body .information > input {
      position: absolute;
      font-size: 10px;
      height: 20px;
      bottom: 20px;
      padding: 0 0 0 2px;
      box-sizing: border-box;
      -webkit-user-select: text;
         -moz-user-select: text;
              user-select: text; }
.easylogic-colorpicker .colorpicker-body .information > input[type=number] {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none; }
.easylogic-colorpicker .colorpicker-body .information > input[type=number]::-webkit-inner-spin-button, .easylogic-colorpicker .colorpicker-body .information > input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
                appearance: none;
        margin: 0; }
.easylogic-colorpicker .colorpicker-body .information.hex > .information-item.hex {
      display: flex; }
.easylogic-colorpicker .colorpicker-body .information.rgb > .information-item.rgb {
      display: flex; }
.easylogic-colorpicker .colorpicker-body .information.hsl > .information-item.hsl {
      display: flex; }
.easylogic-colorpicker .colorpicker-body .information > .information-item {
      display: none;
      position: relative;
      padding: 0px 5px;
      padding-left: 9px;
      box-sizing: border-box;
      margin-right: 40px; }
.easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field {
        display: block;
        flex: 1;
        padding: 3px;
        box-sizing: border-box;
        position: relative; }
.easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field > .title {
          text-align: center;
          font-size: 12px;
          color: #a9a9a9;
          padding-top: 2px; }
.easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field input {
          text-align: center;
          width: 100%;
          padding: 3px;
          height: 21px;
          font-size: 11px;
          color: #333;
          box-sizing: border-box;
          -webkit-user-select: text;
             -moz-user-select: text;
                  user-select: text;
          border: 1px solid #cbcbcb;
          border-radius: 2px; }
.easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number] {
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none; }
.easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]::-webkit-inner-spin-button, .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
                    appearance: none;
            margin: 0; }
.easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-l input[type=number], .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-s input[type=number] {
          padding-left: 1px;
          padding-right: 10px; }
.easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field .postfix {
          display: inline-block;
          position: absolute;
          right: 3px;
          top: 2px;
          height: 21px;
          line-height: 2;
          padding: 2px;
          box-sizing: border-box;
          text-align: center;
          font-size: 11px; }
.easylogic-colorpicker .colorpicker-body .information > .information-change {
      position: absolute;
      display: block;
      width: 40px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      text-align: center;
      box-sizing: border-box;
      padding-top: 5px; }
.easylogic-colorpicker .colorpicker-body .information > .information-change > .format-change-button {
        box-sizing: border-box;
        background: transparent;
        border: 0px;
        cursor: pointer;
        outline: none; }
.easylogic-colorpicker .colorpicker-body .information > .title {
      color: #a3a3a3; }
.easylogic-colorpicker .colorpicker-body .information > .input {
      color: #333; }
.easylogic-colorpicker .colorpicker-body .colorsets {
    border-top: 1px solid #e2e2e2; }
.easylogic-colorpicker .colorpicker-body .colorsets > .menu {
      float: right;
      padding: 10px 5px;
      padding-right: 15px; }
.easylogic-colorpicker .colorpicker-body .colorsets > .menu button {
        border: 0px;
        font-size: 14px;
        font-weight: 300;
        font-family: serif, sans-serif;
        outline: none;
        cursor: pointer; }
.easylogic-colorpicker .colorpicker-body .colorsets > .color-list {
      margin-right: 30px;
      display: block;
      padding: 12px 0px 0px 12px;
      box-sizing: border-box;
      line-height: 0; }
.easylogic-colorpicker .colorpicker-body .colorsets > .color-list h6 {
        margin-top: 0px;
        margin-bottom: 8px; }
.easylogic-colorpicker .colorpicker-body .colorsets > .color-list .color-item {
        width: 13px;
        height: 13px;
        border-radius: 2px;
        display: inline-block;
        margin-right: 12px;
        margin-bottom: 12px;
        position: relative;
        background-size: contain;
        overflow: hidden;
        box-sizing: border-box;
        cursor: pointer;
        vertical-align: middle; }
.easylogic-colorpicker .colorpicker-body .colorsets > .color-list .color-item:hover {
          transform: scale(1.2); }
.easylogic-colorpicker .colorpicker-body .colorsets > .color-list .color-item .empty {
          position: absolute;
          left: 0px;
          top: 0px;
          background-color: transparent;
          background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
          background-size: 10px 10px;
          background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
          width: 100%;
          height: 100%;
          padding: 0px;
          margin: 0px;
          pointer-events: none; }
.easylogic-colorpicker .colorpicker-body .colorsets > .color-list .color-item .color-view {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          padding: 0px;
          margin: 0px;
          pointer-events: none;
          border: 1px solid rgba(0, 0, 0, 0.1);
          box-sizing: border-box; }
.easylogic-colorpicker .colorpicker-body .colorsets > .color-list .add-color-item {
        width: 13px;
        height: 13px;
        display: inline-block;
        margin-right: 12px;
        margin-bottom: 12px;
        cursor: pointer;
        line-height: 1;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        font-family: serif,sans-serif;
        color: #8e8e8e;
        vertical-align: middle; }
.easylogic-colorpicker .colorpicker-body .color-chooser {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.05s ease-out;
    pointer-events: none; }
.easylogic-colorpicker .colorpicker-body .color-chooser.open {
      opacity: 1;
      pointer-events: all; }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container {
      position: absolute;
      top: 120px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      background-color: white; }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 34px;
        display: flex;
        padding: 3px 0px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title {
          flex: 2;
          font-weight: bold;
          font-size: 15px;
          box-sizing: border-box;
          margin-right: 30px;
          vertical-align: middle;
          margin: 0px;
          padding: 5px;
          padding-left: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #000;
          text-align: left; }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items {
          flex: 1;
          text-align: right;
          padding-right: 10px;
          display: block;
          height: 100%;
          line-height: 2;
          cursor: pointer; }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list {
        position: absolute;
        top: 34px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        overflow: auto; }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item {
          cursor: pointer;
          display: flex;
          padding: 3px 0px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover {
            background-color: rgba(0, 0, 0, 0.05); }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title {
            flex: 2;
            font-size: 14px;
            box-sizing: border-box;
            margin-right: 30px;
            vertical-align: middle;
            pointer-events: none;
            margin: 0px;
            padding: 5px;
            padding-left: 14px;
            font-weight: normal;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000;
            text-align: left; }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items {
            flex: 3;
            display: block;
            height: 100%;
            line-height: 1.6;
            cursor: pointer;
            pointer-events: none; }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item {
              width: 13px;
              height: 13px;
              border-radius: 3px;
              display: inline-block;
              margin-right: 10px;
              background-color: transparent;
              background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
              background-size: 10px 10px;
              background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
              background-size: contain;
              border: 1px solid #dddddd;
              overflow: hidden;
              box-sizing: border-box;
              cursor: pointer;
              vertical-align: middle; }
.easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view {
                width: 100%;
                height: 100%;
                padding: 0px;
                margin: 0px;
                pointer-events: none; }
.easylogic-colorpicker .gradient-editor {
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; }
.easylogic-colorpicker .gradient-editor .tools {
      padding: 4px 6px; }
.easylogic-colorpicker .gradient-editor .unit {
      display: grid;
      grid-template-columns: 1fr 50px 50px;
      grid-column-gap: 5px;
      font-size: 11px; }
.easylogic-colorpicker .gradient-editor .unit input, .easylogic-colorpicker .gradient-editor .unit select {
        width: 100%;
        box-sizing: border-box; }
.easylogic-colorpicker .gradient-editor [data-editor] {
      display: none;
      margin-top: 2px; }
.easylogic-colorpicker .gradient-editor [data-editor] > label {
        font-size: 11px;
        vertical-align: middle; }
.easylogic-colorpicker .gradient-editor [data-editor] > label > * {
          vertical-align: middle; }
.easylogic-colorpicker .gradient-editor:not([data-selected-editor*='static-gradient']) [data-editor='gradient'],
    .easylogic-colorpicker .gradient-editor:not([data-selected-editor*='static-gradient']) [data-editor='tools'] {
      display: block; }
.easylogic-colorpicker .gradient-editor[data-selected-editor='linear-gradient'] [data-editor='angle'], .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-linear-gradient'] [data-editor='angle'], .easylogic-colorpicker .gradient-editor[data-selected-editor='conic-gradient'] [data-editor='angle'], .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-conic-gradient'] [data-editor='angle'] {
      display: block; }
.easylogic-colorpicker .gradient-editor[data-selected-editor='radial-gradient'] [data-editor='centerX'],
    .easylogic-colorpicker .gradient-editor[data-selected-editor='radial-gradient'] [data-editor='centerY'], .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-radial-gradient'] [data-editor='centerX'],
    .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-radial-gradient'] [data-editor='centerY'], .easylogic-colorpicker .gradient-editor[data-selected-editor='conic-gradient'] [data-editor='centerX'],
    .easylogic-colorpicker .gradient-editor[data-selected-editor='conic-gradient'] [data-editor='centerY'], .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-conic-gradient'] [data-editor='centerX'],
    .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-conic-gradient'] [data-editor='centerY'] {
      display: block; }
.easylogic-colorpicker .gradient-editor[data-selected-editor='radial-gradient'] [data-editor='radialType'], .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-radial-gradient'] [data-editor='radialType'] {
      margin-top: 5px;
      display: grid;
      grid-template-columns: 1fr 105px;
      grid-column-gap: 2px; }
.easylogic-colorpicker .gradient-editor[data-selected-editor='radial-gradient'] [data-editor='radialType'] select, .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-radial-gradient'] [data-editor='radialType'] select {
        width: 100%; }
.easylogic-colorpicker .gradient-editor .sub-editor {
      padding: 0px 8px; }
.easylogic-colorpicker .gradient-editor .gradient-steps {
      position: relative;
      height: 30px; }
.easylogic-colorpicker .gradient-editor .hue-container,
    .easylogic-colorpicker .gradient-editor .hue {
      position: absolute;
      left: 10px;
      right: 10px;
      top: 4px;
      height: 14px;
      border-radius: 10px;
      border: 1px solid #cccccc;
      box-sizing: border-box;
      background-color: transparent;
      background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
      background-size: 10px 10px;
      background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
      pointer-events: all; }
.easylogic-colorpicker .gradient-editor .hue {
      pointer-events: none; }
.easylogic-colorpicker .gradient-editor .hue .step-list {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        border-radius: 10px;
        pointer-events: none; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="0"] [data-index="0"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="0"] [data-index="0"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="1"] [data-index="1"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="1"] [data-index="1"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="2"] [data-index="2"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="2"] [data-index="2"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="3"] [data-index="3"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="3"] [data-index="3"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="4"] [data-index="4"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="4"] [data-index="4"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="5"] [data-index="5"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="5"] [data-index="5"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="6"] [data-index="6"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="6"] [data-index="6"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="7"] [data-index="7"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="7"] [data-index="7"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="8"] [data-index="8"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="8"] [data-index="8"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="9"] [data-index="9"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="9"] [data-index="9"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="10"] [data-index="10"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="10"] [data-index="10"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="11"] [data-index="11"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="11"] [data-index="11"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="12"] [data-index="12"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="12"] [data-index="12"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="13"] [data-index="13"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="13"] [data-index="13"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="14"] [data-index="14"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="14"] [data-index="14"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="15"] [data-index="15"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="15"] [data-index="15"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="16"] [data-index="16"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="16"] [data-index="16"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="17"] [data-index="17"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="17"] [data-index="17"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="18"] [data-index="18"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="18"] [data-index="18"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="19"] [data-index="19"] {
          border: 0px;
          transform: translateX(-50%) translateY(calc(100%)); }
.easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="19"] [data-index="19"] .arrow {
            display: block; }
.easylogic-colorpicker .gradient-editor .hue .step-list .step {
          pointer-events: all;
          width: 10px;
          height: 10px;
          border: 1px solid white;
          box-sizing: border-box;
          display: inline-block;
          position: absolute;
          top: 50%;
          border-radius: 100%;
          box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.5);
          transform: translateX(-50%) translateY(-50%);
          background-color: transparent;
          background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
          background-size: 10px 10px;
          background-position: 0 0, 0 5px, 5px -5px, -5px 0px; }
.easylogic-colorpicker .gradient-editor .hue .step-list .step[data-cut='true'] {
            border-radius: 0%; }
.easylogic-colorpicker .gradient-editor .hue .step-list .step[data-cut='true'] .color-view {
              border-radius: 0%; }
.easylogic-colorpicker .gradient-editor .hue .step-list .step .color-view {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            border-radius: 100%;
            pointer-events: none; }
.easylogic-colorpicker .gradient-editor .hue .step-list .step .arrow {
            position: absolute;
            left: 50%;
            display: none;
            top: 0%;
            width: 5px;
            height: 5px;
            transform: translateX(-50%) translateY(-120%);
            pointer-events: none;
            -webkit-clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);
                    clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%); }
.easylogic-colorpicker .gradient-editor input[type=range] {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      width: 100%;
      margin: 6.2px 0;
      background-color: transparent; }
.easylogic-colorpicker .gradient-editor input[type=range]:focus {
      outline: none; }
.easylogic-colorpicker .gradient-editor input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 1px;
      cursor: pointer;
      background: #556375;
      border-radius: 0px;
      border: 0px solid #010101; }
.easylogic-colorpicker .gradient-editor input[type=range]::-webkit-slider-thumb {
      height: 10px;
      width: 10px;
      border-radius: 10px;
      background: #556375;
      cursor: pointer;
      -webkit-appearance: none;
              appearance: none;
      margin-top: -5px; }
.easylogic-colorpicker .gradient-editor input[type=range]:focus::-webkit-slider-runnable-track {
      background: #3174ad; }
.easylogic-colorpicker .gradient-editor input[type=range]::-moz-range-track {
      width: 100%;
      height: 1px;
      cursor: pointer;
      background: #556375;
      border-radius: 0px;
      border: 0px solid #010101; }
.easylogic-colorpicker .gradient-editor input[type=range]::-moz-range-thumb {
      border: 1px solid #000000;
      height: 10px;
      width: 10px;
      border-radius: 9px;
      background: #556375;
      cursor: pointer; }
.easylogic-colorpicker .gradient-editor input[type=range]::-ms-track {
      width: 100%;
      height: 1px;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent; }
.easylogic-colorpicker .gradient-editor input[type=range]::-ms-fill-lower {
      background: #556375;
      border: 0px solid #010101;
      border-radius: 0px;
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
.easylogic-colorpicker .gradient-editor input[type=range]::-ms-fill-upper {
      background: #556375;
      border: 0px solid #010101;
      border-radius: 0px; }
.easylogic-colorpicker .gradient-editor input[type=range]::-ms-thumb {
      height: 10px;
      width: 10px;
      border-radius: 9px;
      background: #556375;
      cursor: pointer; }
.easylogic-colorpicker .gradient-editor input[type=range]:focus::-ms-fill-lower {
      background: #556375; }
.easylogic-colorpicker .gradient-editor input[type=range]:focus::-ms-fill-upper {
      background: #556375; }
.easylogic-colorpicker .gradient-editor .right-menu {
      display: inline-block;
      float: right; }
.easylogic-colorpicker .gradient-editor .right-menu button {
        font-size: 11px;
        background-color: transparent;
        border: 0px; }
.easylogic-colorpicker.gradient-picker {
    width: 460px;
    box-sizing: border-box; }
.easylogic-colorpicker.gradient-picker .gradient-body {
      display: grid;
      grid-template-columns: 1fr 224px; }
.easylogic-colorpicker.gradient-picker .gradient-body > div:first-child {
        padding: 5px;
        border-right: 1px solid #cccccc; }
.easylogic-colorpicker.gradient-picker .popup-item {
      margin-bottom: 5px; }
.easylogic-colorpicker.gradient-picker .grid-2 {
      display: grid;
      grid-template-columns: 60px 1fr; }
.easylogic-colorpicker.gradient-picker .grid-2 label {
        font-size: 11px;
        padding-right: 2px;
        text-align: left; }
.easylogic-colorpicker.gradient-picker label {
      font-size: 11px; }
.easylogic-colorpicker.gradient-picker .gradient-preview {
      width: 100%;
      height: 100px;
      position: relative;
      margin-bottom: 5px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      overflow: hidden;
      background-color: transparent;
      background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
      background-size: 10px 10px;
      background-position: 0 0, 0 5px, 5px -5px, -5px 0px; }
.easylogic-colorpicker.gradient-picker .gradient-preview .gradient-view {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px; }
.easylogic-colorpicker.gradient-picker .picker-tab {
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list {
        text-align: center;
        padding: 2px 5px; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="linear-gradient"] .picker-tab-item[data-selected-value="linear-gradient"] {
          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="linear-gradient"] .picker-tab-item[data-selected-value="linear-gradient"] .icon svg path {
            fill: rgba(0, 0, 255, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-linear-gradient"] .picker-tab-item[data-selected-value="repeating-linear-gradient"] {
          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-linear-gradient"] .picker-tab-item[data-selected-value="repeating-linear-gradient"] .icon svg path {
            fill: rgba(0, 0, 255, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="radial-gradient"] .picker-tab-item[data-selected-value="radial-gradient"] {
          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="radial-gradient"] .picker-tab-item[data-selected-value="radial-gradient"] .icon svg path {
            fill: rgba(0, 0, 255, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-radial-gradient"] .picker-tab-item[data-selected-value="repeating-radial-gradient"] {
          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-radial-gradient"] .picker-tab-item[data-selected-value="repeating-radial-gradient"] .icon svg path {
            fill: rgba(0, 0, 255, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="conic-gradient"] .picker-tab-item[data-selected-value="conic-gradient"] {
          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="conic-gradient"] .picker-tab-item[data-selected-value="conic-gradient"] .icon svg path {
            fill: rgba(0, 0, 255, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-conic-gradient"] .picker-tab-item[data-selected-value="repeating-conic-gradient"] {
          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-conic-gradient"] .picker-tab-item[data-selected-value="repeating-conic-gradient"] .icon svg path {
            fill: rgba(0, 0, 255, 0.5); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item {
          display: inline-block;
          vertical-align: middle;
          height: 20px;
          width: 20px;
          box-sizing: border-box;
          cursor: pointer;
          position: relative;
          border-radius: 20%; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item .icon {
            pointer-events: none;
            border-radius: 100%;
            display: inline-block;
            width: 90%;
            height: 90%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item .icon svg {
              width: 100%;
              height: 100%; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="static-gradient"] .icon {
            background-image: linear-gradient(to right, red, red); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="linear-gradient"] .icon {
            background-image: linear-gradient(to right, black, gray); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="radial-gradient"] .icon {
            background-image: radial-gradient(closest-side, black, #ebf8e1, gray); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="conic-gradient"] .icon {
            background-image: conic-gradient(black, #ebf8e1); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="repeating-linear-gradient"] .icon {
            background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="repeating-radial-gradient"] .icon {
            background-image: repeating-radial-gradient(circle, #3f87a6, #ebf8e1 15%, #f69d3c 20%); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="repeating-conic-gradient"] .icon {
            background-image: repeating-conic-gradient(#3f87a6, #ebf8e1 5%, #f69d3c 10%); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector {
        padding: 2px 10px; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps {
          position: relative;
          display: block;
          height: 30px; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue-container {
            width: 100%;
            height: 14px;
            position: absolute;
            z-index: 0;
            background-color: transparent;
            background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
            background-size: 10px 10px;
            background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
            box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1); }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue {
            position: relative;
            padding: 0px;
            margin: 0px;
            cursor: pointer; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue > .step-list {
              position: relative;
              width: 100%;
              cursor: copy;
              height: 14px;
              z-index: 1; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue > .step-list.mode-drag {
                cursor: pointer; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar {
              border: 0px;
              background-color: transparent;
              border: 2px solid white;
              box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.6);
              width: 10px;
              height: 10px;
              transform: none;
              border-radius: 50%;
              display: inline-block;
              left: 0px;
              top: 17px;
              transform: translateX(-50%);
              position: absolute;
              background-color: rgba(255, 255, 255, 0.8);
              cursor: pointer;
              transition: top 0.3s ease-out; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar .guide-line {
                pointer-events: none;
                position: absolute;
                width: 1px;
                height: 0px;
                bottom: 8px;
                left: 3px;
                transform: translateX(-1px);
                transition: all 0.3s ease-out; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected {
                z-index: 1;
                top: 30px; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected .guide-line {
                  height: 17px; }
.easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected .guide-change {
                  opacity: 1; }
.easylogic-colorpicker.gradient-picker .easylogic-colorpicker {
      width: 223px;
      border-radius: 0px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      border: 0px;
      box-shadow: none; }
.easylogic-colorpicker.sketch {
    border-radius: 5px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .color {
      margin: 10px 10px 2px 10px;
      box-sizing: border-box;
      height: 150px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control {
      padding: 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .color, .easylogic-colorpicker.sketch > .colorpicker-body > .control > .empty {
        position: absolute;
        right: 10px;
        left: auto;
        top: 2px;
        width: 40px;
        height: 44px;
        border-radius: 2px;
        box-sizing: border-box; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .color2, .easylogic-colorpicker.sketch > .colorpicker-body > .control > .empty2 {
        position: absolute;
        right: 10px;
        left: auto;
        top: 50px;
        width: 40px;
        height: 20px;
        border-radius: 2px;
        box-sizing: border-box; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .color {
        box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5); }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .hue {
        position: relative;
        padding: 2px 2px 2px 10px;
        margin: 0px 50px 0px 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .hue > .hue-container {
          border-radius: 0px;
          height: 20px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .hue-scale {
        position: relative;
        padding: 2px 2px 2px 10px;
        margin: 0px 50px 0px 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .hue-scale > .hue-scale-container {
          border-radius: 0px;
          height: 20px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .opacity {
        position: relative;
        padding: 2px 2px 2px 10px;
        margin: 0px 50px 0px 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control > .opacity > .opacity-container {
          border-radius: 0px;
          height: 20px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar, .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar2 {
        border-radius: 0px;
        top: 50%;
        left: 0px;
        width: 5px;
        height: 80%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 1px;
        bottom: 1px !important; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar.first, .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar2.first {
          left: 0px;
          transform: translateX(50%) translateY(-50%) !important; }
.easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar.last, .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar2.last {
          transform: translateX(-110%) translateY(-50%) !important; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-change {
      display: none; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.rgb {
      display: inherit; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.hsl {
      display: none !important; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hex {
      display: inherit; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hsl {
      display: none !important; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.rgb {
      display: none !important; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.hsl {
      display: inherit; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item {
      display: inline-flex !important;
      margin-right: 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field {
        padding-left: 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child {
          padding-right: 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field > .title {
          color: black;
          font-size: 11px;
          cursor: pointer; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child:not(:first-child) {
        padding-right: 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item.hex {
      width: 74px;
      padding-right: 0px;
      padding-left: 5px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item.rgb {
      width: 140px;
      padding-left: 0px;
      padding-right: 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item.hsl {
      display: none;
      width: 140px;
      padding-left: 0px;
      padding-right: 0px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list {
      margin-right: 0px;
      padding-right: 12px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list h6 {
        margin-top: 0px;
        margin-bottom: 8px; }
.easylogic-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list .color-item {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        margin-right: 9px;
        margin-bottom: 10px; }
.easylogic-colorpicker.palette {
    border-radius: 3px;
    box-shadow: none; }
.easylogic-colorpicker.palette > .colorpicker-body > .color {
      display: none; }
.easylogic-colorpicker.palette > .colorpicker-body > .control {
      display: none; }
.easylogic-colorpicker.palette > .colorpicker-body > .information {
      display: none; }
.easylogic-colorpicker.palette > .colorpicker-body > .colorsets {
      box-sizing: border-box;
      border-top: 0px; }
.easylogic-colorpicker.palette > .colorpicker-body > .colorsets > .color-list h6 {
        margin-top: 0px;
        margin-bottom: 8px; }
.easylogic-colorpicker.palette > .colorpicker-body > .colorsets > .color-list .color-item {
        width: 15px;
        height: 15px;
        margin-right: 10px;
        margin-bottom: 10px; }
.easylogic-colorpicker.palette > .colorpicker-body > .color-chooser {
      display: none;
      box-sizing: border-box; }
.easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open {
        display: block;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: auto;
        border-radius: 3px;
        border: 1px solid #d8d8d8;
        box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12); }
.easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container {
          position: relative;
          top: auto;
          left: auto;
          right: auto;
          bottom: auto;
          background-color: white;
          box-sizing: border-box;
          border-radius: 2px; }
.easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-item-header {
            position: relative;
            left: auto;
            top: auto;
            right: auto;
            bottom: auto;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px; }
.easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-list {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            bottom: auto;
            overflow: auto; }
.easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-list .colorsets-item:last-child {
              border-bottom-left-radius: 3px;
              border-bottom-right-radius: 3px; }
.easylogic-colorpicker.macos .colorpicker-body .wheel {
    width: 224px;
    height: 224px;
    position: relative;
    box-sizing: border-box; }
.easylogic-colorpicker.macos .colorpicker-body .wheel .wheel-canvas {
      width: 214px;
      height: 214px;
      border-radius: 50%;
      position: absolute;
      left: 5px;
      top: 5px; }
.easylogic-colorpicker.macos .colorpicker-body .wheel .drag-pointer {
      display: inline-block;
      position: absolute;
      width: 10px;
      height: 10px;
      left: 50%;
      top: 50%;
      border: 1px solid white;
      border-radius: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 2; }
.easylogic-colorpicker.macos .control {
    padding-top: 0px; }
.easylogic-colorpicker.macos .control > .color, .easylogic-colorpicker.macos .control > .empty {
      top: 4px; }
.easylogic-colorpicker.macos .value {
    position: relative;
    padding: 6px 16px;
    margin: 0px 0px 0px 42px;
    box-sizing: border-box;
    cursor: pointer; }
.easylogic-colorpicker.macos .value > .value-container {
      position: relative;
      width: 100%;
      height: 10px;
      border-radius: 3px;
      background-image: linear-gradient(to right, #000000 0%, rgba(255, 255, 255, 0) 100%);
      box-sizing: border-box; }
.easylogic-colorpicker.macos .value > .value-container .drag-bar {
        position: absolute;
        cursor: pointer;
        top: 50%;
        left: 0px;
        transform: translateX(-50%) translateY(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%; }
.easylogic-colorpicker.mini {
    width: 180px;
    display: inline-block; }
.easylogic-colorpicker.mini .control {
      padding: 0px; }
.easylogic-colorpicker.mini .control .hue, .easylogic-colorpicker.mini .control .opacity {
        margin: 0px;
        padding: 0px; }
.easylogic-colorpicker.mini .control .hue > .hue-container {
        border-radius: 0px;
        overflow: hidden;
        height: 20px; }
.easylogic-colorpicker.mini .control .opacity > .opacity-container {
        border-radius: 0px;
        overflow: hidden;
        height: 20px; }
.easylogic-colorpicker.mini .control .drag-bar, .easylogic-colorpicker.mini .control .drag-bar2 {
        border: 0px;
        background-color: transparent;
        height: 100%;
        width: 5px;
        box-sizing: border-box;
        box-shadow: none; }
.easylogic-colorpicker.mini .control .drag-bar.last:before, .easylogic-colorpicker.mini .control .drag-bar.lastafter, .easylogic-colorpicker.mini .control .drag-bar2.last:before, .easylogic-colorpicker.mini .control .drag-bar2.lastafter {
          left: 1px; }
.easylogic-colorpicker.mini .control .drag-bar.first:before, .easylogic-colorpicker.mini .control .drag-bar.first:after, .easylogic-colorpicker.mini .control .drag-bar2.first:before, .easylogic-colorpicker.mini .control .drag-bar2.first:after {
          left: 3px; }
.easylogic-colorpicker.mini .control .drag-bar:before, .easylogic-colorpicker.mini .control .drag-bar2:before {
          content: "";
          position: absolute;
          left: 2px;
          top: 0px;
          width: 0;
          height: 0;
          transform: translateX(-50%);
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 4px solid black; }
.easylogic-colorpicker.mini .control .drag-bar:after, .easylogic-colorpicker.mini .control .drag-bar2:after {
          content: "";
          position: absolute;
          left: 2px;
          bottom: 0px;
          width: 0;
          height: 0;
          transform: translateX(-50%);
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-bottom: 4px solid black; }
.easylogic-colorpicker.mini-vertical {
    width: 180px;
    display: inline-block; }
.easylogic-colorpicker.mini-vertical .color {
      display: inline-block;
      width: 140px;
      height: 160px;
      vertical-align: middle; }
.easylogic-colorpicker.mini-vertical .control {
      height: 160px;
      padding: 0px;
      vertical-align: middle;
      display: inline-block; }
.easylogic-colorpicker.mini-vertical .control .hue, .easylogic-colorpicker.mini-vertical .control .opacity {
        margin: 0px;
        padding: 0px;
        width: 20px;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        position: relative; }
.easylogic-colorpicker.mini-vertical .control .hue > .hue-container {
        border-radius: 0px;
        overflow: hidden;
        height: 100%;
        background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); }
.easylogic-colorpicker.mini-vertical .control .opacity > .opacity-container {
        border-radius: 0px;
        overflow: hidden;
        height: 100%;
        width: 20px; }
.easylogic-colorpicker.mini-vertical .control .drag-bar, .easylogic-colorpicker.mini-vertical .control .drag-bar2 {
        border: 0px;
        background-color: transparent;
        height: 2px;
        width: 100%;
        box-sizing: border-box;
        box-shadow: none;
        transform: none; }
.easylogic-colorpicker.mini-vertical .control .drag-bar.last:before, .easylogic-colorpicker.mini-vertical .control .drag-bar.last:after, .easylogic-colorpicker.mini-vertical .control .drag-bar2.last:before, .easylogic-colorpicker.mini-vertical .control .drag-bar2.last:after {
          top: 2px; }
.easylogic-colorpicker.mini-vertical .control .drag-bar.first:before, .easylogic-colorpicker.mini-vertical .control .drag-bar.first:after, .easylogic-colorpicker.mini-vertical .control .drag-bar2.first:before, .easylogic-colorpicker.mini-vertical .control .drag-bar2.first:after {
          top: -1px; }
.easylogic-colorpicker.mini-vertical .control .drag-bar:before, .easylogic-colorpicker.mini-vertical .control .drag-bar2:before {
          content: "";
          position: absolute;
          left: 0px;
          top: 2px;
          width: 0;
          height: 0;
          transform: translateY(-50%);
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
          border-left: 4px solid black; }
.easylogic-colorpicker.mini-vertical .control .drag-bar:after, .easylogic-colorpicker.mini-vertical .control .drag-bar2:after {
          content: "";
          position: absolute;
          top: 2px;
          right: 0px;
          width: 0;
          height: 0;
          transform: translateY(-50%);
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
          border-right: 4px solid black; }
.easylogic-colorpicker.ring .colorpicker-body > .color {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 52px;
    top: 52px; }
.easylogic-colorpicker.ring .colorpicker-body .wheel {
    width: 224px;
    height: 224px;
    position: relative;
    box-sizing: border-box; }
.easylogic-colorpicker.ring .colorpicker-body .wheel .wheel-canvas {
      width: 214px;
      height: 214px;
      border-radius: 50%;
      position: absolute;
      left: 5px;
      top: 5px; }
.easylogic-colorpicker.ring .colorpicker-body .wheel .drag-pointer {
      display: inline-block;
      position: absolute;
      width: 10px;
      height: 10px;
      left: 50%;
      top: 50%;
      border: 1px solid white;
      border-radius: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 2; }
.easylogic-colorpicker.ring .control {
    padding-top: 0px; }
.easylogic-colorpicker.ring .control .value {
      display: none; }
.easylogic-colorpicker.ring .control > .color, .easylogic-colorpicker.ring .control > .empty {
      top: -17px;
      width: 30px;
      height: 30px;
      border-radius: 2px; }
.easylogic-colorpicker.xd {
    display: inline-block;
    padding-top: 12px;
    width: 245px; }
.easylogic-colorpicker.xd .color {
      display: inline-block;
      margin-left: 12px;
      margin-bottom: 12px;
      width: 170px;
      height: 170px;
      vertical-align: middle;
      border-radius: 3px;
      overflow: hidden;
      box-sizing: border-box;
      border: 1px solid #cecece; }
.easylogic-colorpicker.xd .color > .saturation > .value > .drag-pointer {
        border: 2px solid white;
        width: 7px;
        height: 7px;
        box-shadow: 0 0 1px 0px black, inset 0 0 1px 0px black; }
.easylogic-colorpicker.xd .control {
      height: 170px;
      padding: 0px;
      vertical-align: middle;
      display: inline-block;
      margin-right: 12px;
      margin-bottom: 12px; }
.easylogic-colorpicker.xd .control .hue, .easylogic-colorpicker.xd .control .opacity {
        margin: 0px;
        padding: 0px;
        width: 13px;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 3px;
        margin-left: 8px; }
.easylogic-colorpicker.xd .control .hue > .hue-container {
        border-radius: 0px;
        overflow: hidden;
        height: 100%;
        background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); }
.easylogic-colorpicker.xd .control .opacity > .opacity-container {
        border-radius: 0px;
        overflow: hidden;
        height: 100%; }
.easylogic-colorpicker.xd .control .drag-bar, .easylogic-colorpicker.xd .control .drag-bar2 {
        border: 0px;
        background-color: transparent;
        border: 2px solid white;
        box-shadow: 0 0 1px 0px black, inset 0 0 1px 0px black;
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        transform: none;
        overflow: hidden;
        left: 50%;
        transform: translateX(-50%) translateY(-50%); }
.easylogic-colorpicker.xd .information {
      margin-top: 5px; }
.easylogic-colorpicker.vscode {
    width: 336px;
    display: inline-block;
    background-color: #333;
    border: 1px solid #ececec;
    box-sizing: border-box;
    border-radius: 0px; }
.easylogic-colorpicker.vscode .colorpicker-body {
      border-radius: 0px;
      display: inline-block; }
.easylogic-colorpicker.vscode .colorpicker-body .color-view {
        height: 34px;
        background-color: transparent;
        background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
        background-size: 10px 10px;
        background-position: 0 0, 0 5px, 5px -5px, -5px 0px; }
.easylogic-colorpicker.vscode .colorpicker-body .color-view .color-view-container {
          line-height: 34px;
          font-size: 14px;
          text-align: center;
          width: 100%;
          height: 100%;
          cursor: pointer;
          -webkit-user-select: none;
             -moz-user-select: none;
                  user-select: none;
          text-shadow: 0 0 3px #535353; }
.easylogic-colorpicker.vscode .colorpicker-body .color-tool {
        padding: 8px; }
.easylogic-colorpicker.vscode .color {
      display: inline-block;
      width: 240px;
      height: 160px;
      vertical-align: middle; }
.easylogic-colorpicker.vscode .control {
      height: 160px;
      vertical-align: middle;
      display: inline-block;
      padding: 0px 0px 0px 4px; }
.easylogic-colorpicker.vscode .control .hue, .easylogic-colorpicker.vscode .control .opacity {
        margin: 0px;
        padding: 0px;
        width: 30px;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        position: relative; }
.easylogic-colorpicker.vscode .control .hue {
        padding-left: 5px;
        width: 35px; }
.easylogic-colorpicker.vscode .control .hue > .hue-container {
        border-radius: 0px;
        height: 100%;
        background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); }
.easylogic-colorpicker.vscode .control .opacity > .opacity-container {
        border-radius: 0px;
        height: 100%;
        width: 30px; }
.easylogic-colorpicker.vscode .control .drag-bar, .easylogic-colorpicker.vscode .control .drag-bar2 {
        background-color: transparent;
        height: 5px;
        width: 33px;
        box-sizing: border-box;
        box-shadow: none;
        transform: translateY(-50%) translateX(-2px);
        border: 1px solid rgba(255, 255, 255, 0);
        border-radius: 0px;
        box-shadow: 0 0 2px 0 black, inset 0 0 0 0 black; }
.easylogic-colorpicker.hide-colorsets .colorsets {
    display: none !important; }
.colorsets-contextmenu {
  position: fixed;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 6px;
  background-color: #ececec;
  border: 1px solid #cccccc;
  display: none;
  list-style: none;
  font-size: 13px;
  padding-left: 0px;
  padding-right: 0px; }
.colorsets-contextmenu.show {
    display: inline-block; }
.colorsets-contextmenu .menu-item {
    padding: 2px 20px;
    cursor: default; }
.colorsets-contextmenu .menu-item:hover {
      background-color: #5ea3fb;
      color: white; }
.colorsets-contextmenu.small .menu-item.small-hide {
    display: none; }
.ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}
.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}
.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}
.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}
.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}
.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}
.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}
.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}
.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 0 3px rgba(0,126,255,0.1)}
.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}
.ng-select .ng-has-value .ng-placeholder{display:none}
.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}
.ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,0.06)}
.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}
[dir="rtl"] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}
.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}
.ng-select.ng-select-single .ng-select-container{height:36px}
.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}
[dir="rtl"] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}
.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}
.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#333;background-color:#ebf5ff;border-radius:2px;margin-right:5px}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:1px 5px}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#000}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}
.ng-select .ng-clear-wrapper{color:#999}
.ng-select .ng-clear-wrapper:hover .ng-clear{color:#D0021B}
.ng-select .ng-spinner-zone{padding:5px 5px 0 0}
[dir="rtl"] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}
.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}
[dir="rtl"] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}
.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}
.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}
.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,0.06);left:0}
.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}
.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}
.ng-dropdown-panel.ng-select-right{left:100%;top:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}
.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px}
.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}
.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}
.ng-dropdown-panel.ng-select-left{left:-100%;top:0;border-top-left-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}
.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px}
.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}
.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:rgba(0,0,0,0.54);cursor:pointer}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,0.87);padding:8px 10px}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}
[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}
[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}
[dir="rtl"] .ng-dropdown-panel{direction:rtl;text-align:right}
.cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}
.cdk-overlay-container{position:fixed;z-index:1000}
.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}
.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}
.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}
.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.6)}
.cdk-overlay-transparent-backdrop{background:0 0}
.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
.owl-dialog-container{position:relative;pointer-events:auto;box-sizing:border-box;display:block;padding:1.5em;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);border-radius:2px;overflow:auto;background:#fff;color:rgba(0,0,0,.87);outline:0}
.owl-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.owl-dt-container,.owl-dt-container *{box-sizing:border-box}
.owl-dt-container{display:block;font-size:16px;font-size:1rem;background:#fff;pointer-events:auto;z-index:1000}
.owl-dt-container-row{border-bottom:1px solid rgba(0,0,0,.12)}
.owl-dt-container-row:last-child{border-bottom:none}
.owl-dt-calendar{display:flex;flex-direction:column;width:100%}
.owl-dt-calendar-control{display:flex;align-items:center;font-size:1em;width:100%;padding:.5em;color:#000}
.owl-dt-calendar-control .owl-dt-calendar-control-content{flex:1 1 auto;display:flex;justify-content:center;align-items:center}
.owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button{padding:0 .8em}
.owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button:hover{background-color:rgba(0,0,0,.12)}
.owl-dt-calendar-main{display:flex;flex-direction:column;flex:1 1 auto;padding:0 .5em .5em;outline:0}
.owl-dt-calendar-view{display:block;flex:1 1 auto}
.owl-dt-calendar-multi-year-view{display:flex;align-items:center}
.owl-dt-calendar-multi-year-view .owl-dt-calendar-table{width:calc(100% - 3em)}
.owl-dt-calendar-multi-year-view .owl-dt-calendar-table .owl-dt-calendar-header th{padding-bottom:.25em}
.owl-dt-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}
.owl-dt-calendar-table .owl-dt-calendar-header{color:rgba(0,0,0,.4)}
.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{font-size:.7em;font-weight:400;text-align:center;padding-bottom:1em}
.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider{position:relative;height:1px;padding-bottom:.5em}
.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider:after{content:'';position:absolute;top:0;left:-.5em;right:-.5em;height:1px;background:rgba(0,0,0,.12)}
.owl-dt-calendar-table .owl-dt-calendar-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;cursor:pointer;color:rgba(0,0,0,.85);-webkit-appearance:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}
.owl-dt-calendar-table .owl-dt-calendar-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;font-size:.8em;line-height:1;border:1px solid transparent;border-radius:999px;color:inherit}
.owl-dt-calendar-table .owl-dt-calendar-cell-out{opacity:.2}
.owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgba(0,0,0,.4)}
.owl-dt-calendar-table .owl-dt-calendar-cell-selected{color:rgba(255,255,255,.85);background-color:#3f51b5}
.owl-dt-calendar-table .owl-dt-calendar-cell-selected.owl-dt-calendar-cell-today{box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.owl-dt-calendar-table .owl-dt-calendar-cell-disabled{cursor:default}
.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){color:rgba(0,0,0,.4)}
.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content.owl-dt-calendar-cell-selected{opacity:.4}
.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgba(0,0,0,.2)}
.owl-dt-calendar-table .owl-dt-calendar-cell-active:focus>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),.owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){background-color:rgba(0,0,0,.04)}
.owl-dt-calendar-table .owl-dt-calendar-cell-in-range{background:rgba(63,81,181,.2)}
.owl-dt-calendar-table .owl-dt-calendar-cell-in-range.owl-dt-calendar-cell-range-from{border-top-left-radius:999px;border-bottom-left-radius:999px}
.owl-dt-calendar-table .owl-dt-calendar-cell-in-range.owl-dt-calendar-cell-range-to{border-top-right-radius:999px;border-bottom-right-radius:999px}
.owl-dt-timer{display:flex;justify-content:center;width:100%;height:7em;padding:.5em;outline:0}
.owl-dt-timer-box{position:relative;display:inline-flex;flex-direction:column;align-items:center;width:25%;height:100%}
.owl-dt-timer-content{flex:1 1 auto;display:flex;justify-content:center;align-items:center;width:100%;margin:.2em 0}
.owl-dt-timer-content .owl-dt-timer-input{display:block;width:2em;text-align:center;border:1px solid rgba(0,0,0,.5);border-radius:3px;outline:medium none;font-size:1.2em;padding:.2em}
.owl-dt-timer-divider{display:inline-block;align-self:flex-end;position:absolute;width:.6em;height:100%;left:-.3em}
.owl-dt-timer-divider:after,.owl-dt-timer-divider:before{content:'';display:inline-block;width:.35em;height:.35em;position:absolute;left:50%;border-radius:50%;transform:translateX(-50%);background-color:currentColor}
.owl-dt-timer-divider:before{top:35%}
.owl-dt-timer-divider:after{bottom:35%}
.owl-dt-control-button{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;margin:0;padding:0;background-color:transparent;font-size:1em;color:inherit}
.owl-dt-control-button .owl-dt-control-button-content{position:relative;display:inline-flex;justify-content:center;align-items:center;outline:0}
.owl-dt-control-button:focus>.owl-dt-control-button-content{background-color:rgba(0,0,0,.12)}
.owl-dt-control-button:not(:-moz-focusring):focus>.owl-dt-control-button-content{box-shadow:none}
.owl-dt-control-period-button .owl-dt-control-button-content{height:1.5em;padding:0 .5em;border-radius:3px;transition:background-color .1s linear}
.owl-dt-control-period-button:hover>.owl-dt-control-button-content{background-color:rgba(0,0,0,.12)}
.owl-dt-control-period-button .owl-dt-control-button-arrow{display:flex;justify-content:center;align-items:center;width:1em;height:1em;margin:.1em;transition:transform .2s ease}
.owl-dt-control-arrow-button .owl-dt-control-button-content{padding:0;border-radius:50%;width:1.5em;height:1.5em}
.owl-dt-control-arrow-button[disabled]{color:rgba(0,0,0,.4);cursor:default}
.owl-dt-control-arrow-button svg{width:50%;height:50%;fill:currentColor}
.owl-dt-inline-container,.owl-dt-popup-container{position:relative;width:18.5em;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}
.owl-dt-inline-container .owl-dt-calendar,.owl-dt-inline-container .owl-dt-timer,.owl-dt-popup-container .owl-dt-calendar,.owl-dt-popup-container .owl-dt-timer{width:100%}
.owl-dt-inline-container .owl-dt-calendar,.owl-dt-popup-container .owl-dt-calendar{height:20.25em}
.owl-dt-inline-container{display:inline-block}
.owl-dt-dialog-container{max-height:95vh;margin:-1.5em}
.owl-dt-dialog-container .owl-dt-calendar{min-width:250px;min-height:330px;max-width:750px;max-height:750px}
.owl-dt-dialog-container .owl-dt-timer{min-width:250px;max-width:750px}
@media all and (orientation:landscape){.owl-dt-dialog-container .owl-dt-calendar{width:58vh;height:62vh}.owl-dt-dialog-container .owl-dt-timer{width:58vh}}
@media all and (orientation:portrait){.owl-dt-dialog-container .owl-dt-calendar{width:80vw;height:80vw}.owl-dt-dialog-container .owl-dt-timer{width:80vw}}
.owl-dt-container-buttons{display:flex;width:100%;height:2em;color:#3f51b5}
.owl-dt-container-control-button{font-size:1em;width:50%;height:100%;border-radius:0}
.owl-dt-container-control-button .owl-dt-control-button-content{height:100%;width:100%;transition:background-color .1s linear}
.owl-dt-container-control-button:hover .owl-dt-control-button-content{background-color:rgba(0,0,0,.1)}
.owl-dt-container-info{padding:0 .5em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.owl-dt-container-info .owl-dt-container-range{display:flex;justify-content:space-between;padding:.5em 0;font-size:.8em}
.owl-dt-container-info .owl-dt-container-range:last-child{border-top:1px solid rgba(0,0,0,.12)}
.owl-dt-container-info .owl-dt-container-info-active{color:#3f51b5}
.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none;cursor:default!important}
.owl-dt-timer-hour12{display:flex;justify-content:center;align-items:center;color:#3f51b5}
.owl-dt-timer-hour12 .owl-dt-timer-hour12-box{border:1px solid currentColor;border-radius:2px;transition:background .2s ease}
.owl-dt-timer-hour12 .owl-dt-timer-hour12-box .owl-dt-control-button-content{width:100%;height:100%;padding:.5em}
.owl-dt-timer-hour12 .owl-dt-timer-hour12-box:focus .owl-dt-control-button-content,.owl-dt-timer-hour12 .owl-dt-timer-hour12-box:hover .owl-dt-control-button-content{background:#3f51b5;color:#fff}
.owl-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
@font-face {
  font-family: ProximaNovaRegular;
  src: url('proximanova-regular-webfont.a6c88ca5f422ab733ae4.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ProximaNovaLight;
  src: url('proximanova-light-webfont.b7f1770684c5361a3928.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ProximaNovaLtSemibold;
  src: url('proximanova-semibold-webfont.0b388274b0289af23ad6.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ProximaNovaBold;
  src: url('proximanova-bold-webfont.b5e5848be3549f4f90cb.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ProximaNovaXbold;
  src: url('proximanova-extrabold-webfont.db0702001e7b92a67989.woff2') format("woff");
  font-weight: 400;
  font-style: normal;
}
.ng-select .ng-select-container {
  background: transparent !important;
}
.ng-dropdown-panel {
  width: 200px;
}
:root {
  --RegularFont: ProximaNovaRegular;
  --LightFont: ProximaNovaLight;
  --SemiboldFont: ProximaNovaLtSemibold;
  --BoldFont: ProximaNovaBold;
  --XboldFont: ProximaNovaXbold;
  --AddImportBtn: #fff;
  --btnColor: rgba(27, 82, 151, 1);
  --hoverColor: rgba(0, 68, 135, 1);
  --usertype: #9744d0;
  --red: #df6e72;
  --blue: #8488ad;
  --skyblue: #8ec3d5;
  --alertred: #ec4844;
  --success: #39ae0b;
  --error: #d91e1e;
  --whitecolor: #fff;
  --bgactive: #268ddd;
  --whitecolor: #ffffff;
  --anchorblue: #428bca;
  --bgcolorlightgray: #f7f7f7;
  --borderBottomColor: #e5e5e5;
  --btnColorDenger: #d64830;
  --themeColor: #1b5297;
  --actionColor: #1b5297;
  --primaryColor: #1b5297;
  --secondaryColor: black;
  --ternary: #f8f7f7;
  --labelColor: #b1b1b1;
}
body {
  font-size: 14px;
  font-family: ProximaNovaRegular;
}
.actionColor {
  color: var(--ternary);
}
.actionBack {
  background-color: var(--ternary);
}
.grayBack {
  background-color: var(--ternary);
}
.subHeading12 {
  font-size: 12px;
}
.uppercase {
  text-transform: uppercase;
}
#formRequiredFieldMissing .alert-danger {
  color: #b94a48;
  letter-spacing: 2px;
}
#formRequiredFieldMissing .alert {
  position: relative;
  padding: 1rem;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  width: 95%;
  margin: auto;
  margin-top: 9px;
  margin-bottom: 12px;
}
.exportPop .modal-dialog {
  max-width: 810px;
  margin: 1.75rem auto;
}
.exportPop td th {
  text-align: center;
}
.exportPop .fileNameOfExport {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 250px;
  height: 1.2em;
  white-space: nowrap;
}
.exportPop .lableToDownload {
  font-size: 15px;
  margin-top: 6px;
  margin-bottom: 5px;
}
.exportPop .tCenter {
  text-align: center;
}
.exportPop .exportNew {
  text-align: center;
  border: solid 1px #eaeaea;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  padding: 9px 30px;
  margin-top: 16px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: 0.3s ease-in;
}
.exportPop .exportNew:hover {
  background: #f9f9f9;
  transition: 0.3s ease-out;
}
.exportPop .multiple_drodpown {
  margin-right: 4px;
}
.exportPop .multiple_drodpown .choicep {
  display: grid;
  padding: 4px 25px;
  position: relative;
  margin-bottom: 0px;
}
.exportPop .multiple_drodpown .choicep span {
  color: #333;
  font-size: 0.9rem;
}
.exportPop .multiple_drodpown ul li {
  border-bottom: 1px solid lightgrey;
}
.exportPop .multiple_drodpown input.rolecheckbox {
  width: 19px;
  height: 22px;
  margin-left: 16px;
  margin-top: 5px;
}
.exportPop .multiple_drodpown ul {
  max-height: 196px;
  overflow-x: hidden;
  width: 100% !important;
  padding: 0px !important;
  border: 1px solid #d6d6d6 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.exportPop .multiple_drodpown .roleset {
  margin-top: -27px;
  margin-left: 20px;
}
.exportPop .multiple_drodpown .catrogry-name {
  width: 93%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.f20 {
  font-size: 20px;
  transition: 0.3s ease-in;
}
.f20:hover {
  font-size: 22px;
  transition: 0.3s ease-out;
}
.form-group {
  margin-bottom: 2px;
}
#submitFormSectionHeading {
  position: relative;
  margin-bottom: 10px;
}
#submitFormSectionHeading .formSectionHeading {
  font-size: 12px;
  color: var(--themeColor);
  font-weight: bold;
  text-transform: uppercase;
  background-color: #fff;
  padding-right: 20px;
  position: relative;
  padding-left: 30px;
  z-index: 99;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#submitFormSectionHeading .hrLine {
  width: 94%;
  background: #ededed;
  height: 1.3px;
  position: absolute;
  top: 49%;
  right: 0;
  z-index: 0;
}
#submitFormSectionHeading .listPageSectionHeading {
  padding-left: 7px;
}
.shortLoader {
  border: 7px solid #f3f3f3;
  border-radius: 68%;
  border-top: 7px solid var(--themeColor);
  width: 55px;
  height: 55px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin: auto;
  margin-top: 40px;
  /* Safari */
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.overViewLoading {
  width: 100%;
  height: 61vh;
}
.overViewLoading img {
  position: absolute;
  top: 40%;
  margin: -50px auto 0;
  width: 207px;
  left: 38%;
}
.overViewLoading .overViewSubLoading {
  top: 47%;
  left: 50%;
}
#overViewContainer {
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
#overViewContainer .default-btn {
  background: var(--bgcolorlightgray);
  margin-right: 10px;
  letter-spacing: 1.15px;
  font-size: 14px;
  border: 1px solid #e5e5e5;
}
#overViewContainer .colored-btn {
  background: var(--btnColor);
  color: var(--whitecolor);
  margin-right: 10px;
  letter-spacing: 1px;
  font-size: 14px;
  border: 1px solid #e5e5e5;
}
#overViewContainer .colorborder {
  border-right: 1px solid lightgray;
}
#overViewContainer .no-background {
  background: transparent;
}
#overViewContainer .mar-lr-15 {
  margin-left: 15px;
  margin-right: 15px;
}
#overViewContainer .pad-l-15 {
  padding-left: 15px;
}
#overViewContainer .pad-rl-15 {
  padding-left: 15px;
  padding-right: 15px;
}
#overViewContainer .pad-rl-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
#overViewContainer .pad-tb-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
#overViewContainer .mrg0 {
  margin: 0;
}
#overViewContainer .mrgR0 {
  margin-right: 0px;
}
#overViewContainer .padR0 {
  padding-right: 0px;
}
#overViewContainer .floatRight {
  float: right;
}
#overViewContainer .f12 {
  font-size: 12px;
}
#overViewContainer .overOrderDetailLabel {
  padding-bottom: 5px;
}
#overViewContainer .select-all {
  display: inline-block;
  text-align: center !important;
}
#overViewContainer .selected {
  padding: 0.375rem 0 0 8px;
  margin-left: 36px;
}
#overViewContainer .leftside-btn {
  border: 1px solid #c4c4c4;
  border-radius: 0;
  font-size: 13px;
}
#overViewContainer .white-btn {
  background: var(--whitecolor);
  margin-right: 10px;
}
#overViewContainer .custom-border-bottom {
  border-bottom: 1px solid var(--borderBottomColor);
  padding-bottom: 15px;
}
#overViewContainer .activityclass {
  width: 100%;
  height: 3.5px;
  position: relative;
  background: black;
  top: 3px;
  border-radius: 4px;
  z-index: 100;
}
#overViewContainer .bottom-border {
  border-bottom: 1px solid #e5e5e5;
}
#overViewContainer .custom-border-right {
  border-right: 1px solid var(--borderBottomColor);
}
#overViewContainer .custom-border-left {
  border-left: 1px solid var(--borderBottomColor);
}
#overViewContainer .custom-border-bottom2 {
  border-bottom: 1.45px solid var(--borderBottomColor);
}
#overViewContainer .select-all-checkbox {
  padding: 15px 15px 10px;
}
#overViewContainer .list-min-height {
  min-height: 90vh;
}
#overViewContainer .activeTab {
  background-color: #f9f9f9;
}
#overViewContainer .list-height {
  height: 72vh;
  overflow-y: auto;
  overflow-x: hidden;
}
#overViewContainer .list-height::-webkit-scrollbar {
  width: 6px;
}
#overViewContainer .list-height::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
#overViewContainer .list-height::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
#overViewContainer .checkNowBtn {
  color: #2626a3;
  font-weight: bold;
  font-size: 12px;
  padding-left: 11px;
  text-decoration: underline;
  cursor: pointer;
}
#overViewContainer .listHeading {
  float: left;
  font-size: 12px;
  padding-top: 4px;
  font-weight: bold;
  text-transform: uppercase;
  color: #06069a;
  font-size: 14px;
}
#overViewContainer .filter-icon {
  border: 1px solid #c4c4c4;
  border-radius: 0px;
  padding: 4px 9px 4px 9px;
  margin-left: 3px;
  transition: 0.3s ease-in;
  border: 1px solid #c4c4c4;
  border-radius: 0px;
}
#overViewContainer .filter-icon:hover {
  background: #f9f9f9;
  transition: 0.3s ease-out;
}
#overViewContainer #filter-dropdown > .dropdown-toggle::after {
  display: none;
}
#overViewContainer .Allvendor-dropdown-menu {
  padding: 0px 0px;
  border-radius: 0px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.175);
  font-size: 14px;
  cursor: pointer;
}
#overViewContainer .Allvendor-dropdown-toggle {
  color: var(--blackcolor);
  letter-spacing: 1.3px;
  font-size: 14px;
}
#overViewContainer .new-button {
  margin-right: 10px;
  background: var(--btnColor);
  color: var(--whitecolor);
  padding: 0.1rem 0.3rem;
  border: none;
  height: 35px;
  border: none;
  font-size: 13.5px;
}
#overViewContainer .new-button .fa {
  color: var(--whitecolor);
}
#overViewContainer .vendor-dropdown a:hover {
  background: var(--bgactive);
  color: var(--whitecolor);
}
#overViewContainer .vendor-dropdown a:hover .fa {
  color: var(--whitecolor);
}
#overViewContainer .no-arrow:after {
  content: none;
}
#overViewContainer .height-37 {
  height: 37px !important;
  border: unset !important;
  font-size: 14px;
  padding-left: 46px;
  float: right;
}
#overViewContainer .search-box {
  position: absolute !important;
  border-right: solid 1px #e2e2e2;
  padding: 12px;
  padding-right: 15px;
}
#overViewContainer .border-gray {
  border-bottom: 1px solid lightgray;
}
#overViewContainer .noListRecord {
  text-align: center;
  margin-top: 24px;
  color: #afafaf;
  width: 100%;
}
#overViewContainer .itemListCheckbox {
  border-right: solid 1px gainsboro;
}
#overViewContainer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 0px;
}
#overViewContainer .custom:hover input ~ .checkmark {
  background-color: #cccccc;
}
#overViewContainer .custom input:checked ~ .checkmark {
  background-color: #339f41;
}
#overViewContainer .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
#overViewContainer .custom input:checked ~ .checkmark:after {
  display: block;
}
#overViewContainer .custom .checkmark:after {
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
#overViewContainer .wid-10 {
  width: 10%;
}
#overViewContainer .wid-12 {
  width: 12%;
}
#overViewContainer .font-bold {
  font-weight: 700;
}
#overViewContainer .overview-details {
  height: 72.5vh;
  overflow-y: auto;
  overflow-x: hidden;
}
#overViewContainer .overview-details::-webkit-scrollbar {
  width: 6px;
}
#overViewContainer .overview-details::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
#overViewContainer .overview-details::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
#overViewContainer .overViewAddLabel {
  margin-top: 8px;
  color: #da7612;
  border-left: solid 2px #da7612;
  padding-left: 5px;
  margin-bottom: 5px;
  font-size: 12px;
}
#overViewContainer .w98 {
  width: 98%;
}
#overViewContainer .title-bar {
  padding-top: 17px;
  margin-right: 0px;
  padding-bottom: 19px;
}
#overViewContainer .title-bar .btn {
  border: 1px solid #e5e5e5;
}
#overViewContainer .title-btn {
  padding: 4px 11px 4px 11px;
  height: 31px;
  background: white;
  margin-right: 10px;
  letter-spacing: 1.3px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s ease-in;
}
#overViewContainer .title-btn:hover {
  background: #f9f9f9;
  transition: 0.3s ease-out;
}
#overViewContainer .pad-row {
  border-bottom: 1px solid #cbd6e2;
}
#overViewContainer .viewPdfRow {
  padding-top: 8px !important;
}
#overViewContainer .prim-info-label {
  color: var(--labelColor);
  font-size: 12px;
}
#overViewContainer .prime-info-value {
  font-size: 13px;
}
#overViewContainer .overviewTab {
  padding: 5px 0px 2px 14px;
  font-size: 15px;
  color: black;
  font-weight: bold;
  border-bottom: solid 1px #f9f9f9;
  margin-bottom: 12px;
  margin-top: 12px;
  text-transform: uppercase;
}
#overViewContainer .actionTabs {
  position: relative;
  cursor: pointer;
}
#overViewContainer .actionTabs .absoluteRigtSection {
  position: absolute;
  right: 11px;
  font-size: 13px;
  top: 4px;
}
#overViewContainer .actionTabs p {
  margin-bottom: 0px !important;
  padding-bottom: 3px;
  text-align: center;
}
#overViewContainer #overViewAccordion .user-plus-icon {
  font-size: 18px !important;
}
#overViewContainer #overViewAccordion .card-body {
  padding: 0px;
}
#overViewContainer #overViewAccordion .card-header {
  padding: 0px;
  position: relative;
}
#overViewContainer #overViewAccordion .btn-link:hover {
  color: #0056b3;
  text-decoration: none;
  background-color: transparent;
  border-color: transparent;
}
#overViewContainer #overViewAccordion .btn-link:focus {
  text-decoration: none;
  border-color: transparent;
  box-shadow: none;
}
#overViewContainer #overViewAccordion .rightActionBtn {
  position: absolute;
  top: 0;
  right: 21px;
  color: #1792fd;
  cursor: pointer;
}
#overViewContainer #overViewAccordion .noRecordFound {
  background: #ffffff;
  width: 95%;
  margin: auto;
  margin-top: 5px;
  padding: 4px;
  border: solid 1px #d4d4d4;
  text-align: center;
  color: #193c7c;
  font-weight: bold;
  margin-bottom: 15px;
}
#overViewContainer .addressCard {
  width: 95%;
  border: solid 1px #d2d2d2;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 13px;
  padding-top: 6px;
  background-color: white;
}
#overViewContainer .addressCard .addressContactName {
  font-size: 14px;
  font-weight: bold;
  padding-left: 9px;
}
#overViewContainer .addressCard .addressType {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 16px;
  padding-left: 16px;
  font-size: 12px;
  border-radius: 19px;
  margin-left: 8px;
  margin-top: 2px;
}
#overViewContainer .addressCard .billing {
  background-color: #00a100;
  color: white;
}
#overViewContainer .addressCard .shipping {
  background: #193c7c;
  color: white;
}
#overViewContainer .addressCard .addressDetail {
  padding-left: 9px;
  margin-top: 4px;
}
#overViewContainer .addressCard .addressAction {
  text-align: end;
  padding-right: 10px;
  border-top: solid 1px #f3f3f3;
  padding-top: 3px;
  margin-top: 7px;
  margin-bottom: 5px;
  font-size: 17px;
  cursor: pointer;
}
#overViewContainer .collapse_usr_info_card {
  display: inline-flex;
}
#overViewContainer .collapse_user_info_img {
  width: 62px;
  height: 62px;
  margin-left: 7px;
  margin-bottom: 7px;
}
#overViewContainer .collpase_user_basicInfo {
  margin-left: 13px;
}
#overViewContainer .collpase_user_otherInfo {
  padding-left: 9px;
}
#overViewContainer #overviewActionTab .activityclass {
  width: 100%;
  height: 3.5px;
  position: relative;
  background: black;
  top: 3px;
  border-radius: 4px;
  z-index: 100;
}
#overViewContainer #overviewActionTab .heading {
  font-family: ProximaNovaLtSemibold;
}
#overViewContainer .padBtm0 {
  padding-bottom: 0px;
}
#overViewContainer .h100 {
  height: 100%;
}
#overViewContainer .overviewFlex {
  flex: 0 0 69.666667%;
  max-width: 69.666667%;
}
.overviewPageCommon {
  /* Hide the browser's default checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* ============ Create a custom radio button =============== */
  /* The container */
  /* Hide the browser's default radio button */
  /* On mouse-over, add a grey background color */
  /* When the radio button is checked, add a blue background */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the indicator (dot/circle) when checked */
  /* Style the indicator (dot/circle) */
  /* ===== End ==== */
}
.overviewPageCommon .prime-info-value {
  margin-bottom: 2px !important;
}
.overviewPageCommon .padT13 {
  padding-top: 13px;
}
.overviewPageCommon .form-control:focus {
  box-shadow: none !important;
  border-color: lightgrey !important;
}
.overviewPageCommon .btn-outline-secondary {
  border: 1px solid #dddbda;
  color: var(--btnColor);
  margin-right: 8px;
  background-color: #fbfcfd;
}
.overviewPageCommon .btn-outline-secondary:hover {
  background-color: #f4f6f9;
}
.overviewPageCommon .btn-primary {
  background-color: var(--btnColor);
  border-color: var(--btnColor);
  color: white;
}
.overviewPageCommon .col-pad {
  padding: 12px 20px;
  border-bottom: 1px solid lightgray;
}
.overviewPageCommon .col-pad p {
  cursor: pointer;
  display: flex;
  margin: 0px;
  margin: -20px;
  padding: 10px 10px;
  background: var(--sidebarfooter);
  color: var(--blackcolor);
}
.overviewPageCommon .col-pad p i {
  margin-right: 7px;
  font-size: 12px;
  margin-top: 6px;
}
.overviewPageCommon .col-pad p .downarrow {
  display: none;
}
.overviewPageCommon .col-pad p .rightarrow {
  display: block;
}
.overviewPageCommon .pad-row {
  padding-top: 6px;
  margin-top: 15px;
  border-bottom: 1px solid #cbd6e2;
}
.overviewPageCommon .activeTab {
  background-color: #f9f9f9;
}
.overviewPageCommon .divinner {
  padding-top: 11px;
}
.overviewPageCommon .divinner a {
  color: var(--anchorblue);
}
.overviewPageCommon .divinner .nobilling {
  color: #777;
}
.overviewPageCommon .pad-row p {
  font-size: 14px;
  color: #496582;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 8px;
  cursor: pointer;
}
.overviewPageCommon .pad-row p:hover {
  color: #6d849b;
}
.overviewPageCommon .div-pad {
  padding: 15px 3px;
}
.overviewPageCommon #selecteddiv .btn {
  font-size: 14px;
  font-family: ProximaNovaRegular;
}
.overviewPageCommon .heading {
  font-family: ProximaNovaLtSemibold;
}
.overviewPageCommon .leadowner .dropdown-toggle::after {
  float: right;
  margin-top: 9px;
}
.overviewPageCommon .selectedname {
  float: left;
  font-size: 14px;
}
.overviewPageCommon .btnowner {
  background-color: transparent;
  border: 1px solid lightgrey;
}
.overviewPageCommon .btnowner:focus {
  box-shadow: none;
}
.overviewPageCommon .choicep {
  display: grid;
  padding: 4px 25px;
  position: relative;
  margin-bottom: 0px;
}
.overviewPageCommon .choicep span {
  color: #333;
  font-size: 0.9rem;
}
.overviewPageCommon .choicep:hover {
  background-color: #f7f7f7;
}
.overviewPageCommon a:hover {
  color: inherit;
  text-decoration: none;
}
.overviewPageCommon .custom {
  font-size: 18px;
  font-family: ProximaNovaLtSemibold;
  display: block;
  position: relative;
  padding-left: 7px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.overviewPageCommon .custom input {
  position: absolute;
  opacity: 0 !important;
  cursor: pointer !important;
  height: 0 !important;
  width: 0 !important;
}
.overviewPageCommon .purchase_item_title {
  text-align: center;
  font-weight: bold;
}
.overviewPageCommon .custom:hover input ~ .checkmark {
  background-color: #cccccc;
}
.overviewPageCommon .custom input:checked ~ .checkmark {
  background-color: #339f41;
}
.overviewPageCommon .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.overviewPageCommon .custom input:checked ~ .checkmark:after {
  display: block;
}
.overviewPageCommon .vendor1 {
  margin-top: 7px;
}
.overviewPageCommon .vendor1:after,
.overviewPageCommon .searchdropdown-menu:before {
  bottom: 100%;
  right: 2%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.overviewPageCommon .vendor1:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -30px;
}
.overviewPageCommon .vendor1:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #ddd;
  border-width: 10px;
  margin-left: -30px;
}
.overviewPageCommon .white-btn {
  background: var(--whitecolor);
  margin-right: 10px;
}
.overviewPageCommon .default-dropdown {
  font-size: 11px;
  color: #999;
  font-weight: 600;
  padding-top: 6px;
  padding-left: 12px;
}
.overviewPageCommon .comment-button {
  color: var(--whitecolor);
  background: var(--btnColor);
}
.overviewPageCommon .comment-button .fa {
  color: var(--whitecolor);
}
.overviewPageCommon .more-dropdown {
  background: var(--bgcolorlightgray);
  margin-right: 15px;
}
.overviewPageCommon .select-all-checkbox {
  padding: 15px 15px 10px;
}
.overviewPageCommon .arrowdiv-left {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 17px solid #ffffff;
  position: absolute;
  top: 14px;
  left: 21px;
  z-index: 1000;
}
.overviewPageCommon .arrowdiv2-left {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 17px solid #eee;
  position: absolute;
  top: 14px;
  left: 20px;
  z-index: 999;
}
.overviewPageCommon .comment-box {
  padding: 5px;
  padding-left: 18px;
  border: 1px solid #eee;
  background-color: #fff;
  border-radius: 6px;
  width: 400px;
  margin-left: 22px;
  position: relative;
}
.overviewPageCommon .fa-dot-pos {
  position: absolute;
  right: -7px;
  top: 21px;
  color: #1b5297;
}
.overviewPageCommon .comment-div-border {
  border-right: 1px solid #1b5297;
}
.overviewPageCommon .left-side {
  font-size: 13px;
  padding-top: 17px;
  padding-right: 10px;
}
.overviewPageCommon .btnowner {
  background-color: transparent;
  border: 1px solid lightgrey;
}
.overviewPageCommon ul {
  width: 100% !important;
}
.overviewPageCommon .selectedname {
  float: left;
}
.overviewPageCommon .statementDiv {
  padding: 15px 15px 15px;
}
.overviewPageCommon .pdf-template {
  min-height: 600px;
  width: 100%;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  margin: 25px 0px 25px;
}
.overviewPageCommon .pdf-template .pdf-customize-btn {
  display: none;
}
.overviewPageCommon .pdf-template .dropdown-item {
  cursor: pointer;
}
.overviewPageCommon .pdf-template:hover .pdf-customize-btn {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 10px;
}
.overviewPageCommon table {
  width: 100%;
}
.overviewPageCommon thead tr {
  border-bottom: 3px solid #eee;
}
.overviewPageCommon thead td {
  font-size: 14px;
  padding: 7px 7px;
  font-family: ProximaNovaLtSemibold;
}
.overviewPageCommon tbody td {
  padding: 11px 8px 11px 10px;
  font-size: 13px;
  letter-spacing: 0.5px;
  overflow: inherit;
}
.overviewPageCommon tbody td a {
  color: #2c7bd0;
}
.overviewPageCommon tbody tr {
  border-bottom: 1px solid var(--borderBottomColor);
}
.overviewPageCommon tbody tr:hover {
  background-color: #f9f9f9;
  cursor: pointer;
}
.overviewPageCommon tbody tr:hover .editcolor {
  display: block;
}
.overviewPageCommon .requiredfield {
  border-left: 3px solid #df0707;
  border-radius: 3px;
}
.overviewPageCommon .choicep {
  display: block;
  padding: 4px 25px;
  position: relative;
  margin-bottom: 0px;
}
.overviewPageCommon .padd-left {
  padding-left: 15px;
}
.overviewPageCommon .ribbon {
  position: relative;
  float: left;
  margin-bottom: 30px;
  text-transform: uppercase;
  color: white;
}
.overviewPageCommon .ribbon:nth-child(even) {
  margin-right: 4%;
}
@media (max-width: 500px) {
  .overviewPageCommon .ribbon {
    width: 100%;
  }
  .overviewPageCommon .ribbon:nth-child(even) {
    margin-right: 0%;
  }
}
.overviewPageCommon .ribbon3 {
  width: 150px;
  height: 36px;
  line-height: 36px;
  padding-left: 15px;
  position: absolute;
  left: -8px;
  top: 8px;
  background: var(--btnColor);
  text-align: center;
}
.overviewPageCommon .ribbon3:before,
.overviewPageCommon .ribbon3:after {
  content: "";
  position: absolute;
}
.overviewPageCommon .ribbon3:before {
  height: 0;
  width: 0;
  top: -8.5px;
  left: 0.1px;
  border-bottom: 9px solid var(--btnColor);
  border-left: 9px solid transparent;
}
.overviewPageCommon .ribbon3:after {
  height: 0;
  width: 0;
  right: -14.5px;
  border-top: 20px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 15px solid var(--btnColor);
}
.overviewPageCommon .mb-4 {
  padding-top: 0px;
}
.overviewPageCommon .comments {
  padding-top: 17px;
  padding-left: 15px;
  font-size: 13px;
}
.overviewPageCommon .selected {
  padding: 0.375rem 0rem 0rem 8px;
}
.overviewPageCommon .select-all {
  display: inline-block;
  margin-right: 27px;
  margin-left: 10px;
}
.overviewPageCommon .leftside-btn {
  border: 1px solid #c4c4c4;
  border-radius: 0px;
  font-size: 14px;
}
.overviewPageCommon .dis-unset {
  display: unset;
}
.overviewPageCommon .dis-unset .btn {
  padding: 0.375rem 0.5rem !important;
}
.overviewPageCommon .padd-05 {
  padding: 0.25rem 0.5rem !important;
}
.overviewPageCommon .text-capitalize {
  text-transform: capitalize;
}
.overviewPageCommon .filename {
  color: var(--bgactive);
}
.overviewPageCommon .filedownload {
  color: var(--bgactive);
  padding: 0px 30px;
  cursor: pointer;
}
.overviewPageCommon .deletefile {
  color: #df1212;
  cursor: pointer;
}
.overviewPageCommon .bottom-border {
  border-bottom: 1px solid #ddd;
}
.overviewPageCommon .upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.overviewPageCommon .upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.overviewPageCommon .addtachemntbutn {
  color: var(--anchorblue) !important;
  background: var(--bgcolorlightgray);
  cursor: pointer !important;
  margin-top: -7px;
}
.overviewPageCommon .addtachemntbutn .fa {
  color: var(--anchorblue);
}
.overviewPageCommon .attachmenttitle {
  height: 45px;
}
.overviewPageCommon .margin-bottom-10 {
  margin-bottom: 10px;
}
.overviewPageCommon .alter-background {
  background: var(--bgcolorlightgray);
}
.overviewPageCommon .remvecsss {
  cursor: pointer;
  display: flex;
  margin: 0px !important;
  margin: 0px !important;
  padding: 0px !important;
  background: none !important;
  color: var(--blackcolor);
}
.overviewPageCommon .col-9-color {
  height: 93vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.overviewPageCommon .sales-details {
  height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.overviewPageCommon .col-left-div {
  flex: 0 0 30.333333%;
  max-width: 30.333333%;
}
.overviewPageCommon .sales-details::-webkit-scrollbar {
  width: 6px;
}
.overviewPageCommon .sales-details::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.overviewPageCommon .sales-details::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
.overviewPageCommon .openstatus a {
  color: #268ddd !important;
}
.overviewPageCommon .cancelledstatus a {
  color: #dd4126 !important;
}
.overviewPageCommon .closestatus a {
  color: #28a745 !important;
}
.overviewPageCommon .border1px {
  border: 1px solid #e5e5e5;
}
.overviewPageCommon .norecordtext {
  padding-top: 40px;
  text-align: center;
  font-size: 18px;
}
.overviewPageCommon .dispatchborderTable tbody td {
  padding: 3px 8px 4px 29px;
  overflow: unset;
}
.overviewPageCommon .dispatchborderTable thead td {
  padding: 7px 22px;
}
.overviewPageCommon .dispatchborderTable select.form-control:not([size]):not([multiple]) {
  height: calc(2rem + 2px);
}
.overviewPageCommon .dispatchborderTable tbody td {
  border: 1px solid #d9d9d9;
}
.overviewPageCommon .dispatchborderTable thead td {
  border: 1px solid #d9d9d9;
}
.overviewPageCommon #sort a {
  padding: 5px 15px;
  font-size: 15px;
}
.overviewPageCommon .anchorcolor {
  background: #428bca !important;
  color: white !important;
}
.overviewPageCommon .iconspan {
  display: inline-grid;
  position: absolute;
  margin-left: 8px;
}
.overviewPageCommon #sort .fa {
  font-size: 12px;
  color: white;
}
.overviewPageCommon .iconspan .fa {
  margin-bottom: -5px;
  border-bottom-color: #fff;
  font-size: 14px;
}
.overviewPageCommon .opacity0 {
  opacity: 0.5;
}
.overviewPageCommon .opacity1 {
  opacity: 1;
}
.overviewPageCommon .minht {
  height: 100%;
  overflow-x: hidden;
}
.overviewPageCommon .inputfield :focus {
  border: 1px solid #3c9df7 !important;
  box-shadow: 0 0 6px #8dc4ff !important;
}
.overviewPageCommon .inputfield {
  margin-bottom: 7px;
}
.overviewPageCommon .btnfilter {
  font-size: 16px !important;
  padding: 5px 15px 0px;
}
.overviewPageCommon #filtercol button {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  margin-top: 23px;
  font-size: 12px;
  font-family: ProximaNovaRegular !important;
}
.overviewPageCommon #filtercol .custom {
  padding-left: 35px;
  margin-bottom: 12px;
}
.overviewPageCommon #filtercol .inputfield {
  border: 1px solid lightgray !important;
  padding: 3px 4px;
  font-size: 13px;
  font-family: ProximaNovaRegular !important;
  margin-top: 8px;
}
.overviewPageCommon #filtercol select {
  font-size: 12px;
  border-radius: 2px !important;
  border-color: #d5d5d5;
  background: #f1f1f1;
  border: 1px solid #f1f1f1;
}
.overviewPageCommon #filtercol .input-group-text {
  background: white;
  border: 0px;
}
.overviewPageCommon #filtercol .form-control {
  background-color: white;
  border: 0px;
}
.overviewPageCommon #filtercol .input-group {
  border-bottom: 1px solid lightgrey;
}
.overviewPageCommon #filtercol ul {
  list-style-type: none;
  padding-top: 13px;
  padding-left: 12px;
}
.overviewPageCommon #filtercol ul li label {
  font-size: 0.881rem;
  font-family: ProximaNovaLtSemibold;
}
.overviewPageCommon #filtercol ul li .checkmark {
  top: 5px;
}
.overviewPageCommon .filterdiv {
  padding-left: 35px;
}
.overviewPageCommon .filterbtn label {
  font-size: 0.881rem;
  font-family: ProximaNovaLtSemibold;
}
.overviewPageCommon .template-block {
  margin: 60px 60px 60px;
}
.overviewPageCommon .w-20 {
  width: 20%;
}
.overviewPageCommon #shipment .form-group {
  margin-bottom: 1.4rem;
}
.overviewPageCommon #package thead td {
  text-transform: uppercase;
}
.overviewPageCommon #package tbody td {
  padding: 7px 8px 6px 9px;
}
.overviewPageCommon .font-14 {
  font-size: 14px;
}
.overviewPageCommon .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.overviewPageCommon .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.overviewPageCommon .checkmark1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 50%;
}
.overviewPageCommon .container:hover input ~ .checkmark1 {
  background-color: #ccc;
}
.overviewPageCommon .container input:checked ~ .checkmark1 {
  background-color: #2196f3;
}
.overviewPageCommon .checkmark1:after {
  content: "";
  position: absolute;
  display: none;
}
.overviewPageCommon .container input:checked ~ .checkmark1:after {
  display: block;
}
.overviewPageCommon .container .checkmark1:after {
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}
.overviewPageCommon .calender-icon {
  position: absolute;
  top: 34%;
  right: 7%;
}
.overviewPageCommon .col-label {
  font-weight: bold;
}
.overviewPageCommon .blue {
  color: #2c7bd0 !important;
}
.overviewPageCommon .btnowner:after {
  float: right;
  margin-top: 10px;
}
.overviewPageCommon .multiselecct-dropdown input.rolecheckbox {
  width: 19px;
  height: 22px;
  margin-left: 16px;
  margin-top: 5px;
}
.overviewPageCommon .multiselecct-dropdown .choicep {
  display: grid;
  padding: 4px 25px;
  position: relative;
  margin-bottom: 0px;
}
.overviewPageCommon .multiselecct-dropdown .roleset {
  margin-top: -27px;
  margin-left: 20px;
}
.overviewPageCommon .multiselecct-dropdown li {
  border-bottom: 1px solid lightgrey;
}
.overviewPageCommon .width-5 {
  width: 5%;
}
.overviewPageCommon .bor-top {
  border-top: 1px solid lightgray;
}
.overviewPageCommon .item-table {
  margin-top: 10px;
}
.overviewPageCommon .item-table thead td {
  background: #f6f6f6;
}
.overviewPageCommon .Item-div {
  padding: 12px;
  background: #f6f3f3;
  margin-bottom: 15px;
}
.overviewPageCommon .card-div {
  padding: 7px 15px 4px;
}
.overviewPageCommon .not-found {
  margin-top: 23%;
}
.overviewPageCommon .w-11 {
  width: 11%;
}
.overviewPageCommon .close_icon {
  font-size: 30px;
  cursor: pointer;
}
.overviewPageCommon .modal-size {
  max-width: 999px;
}
.overviewPageCommon #shipmentDeliveryChallanModal .template-block {
  margin: 20px 18px 25px;
}
.overviewPageCommon .left_side {
  flex: 0 0 28%;
  max-width: 30%;
}
.overviewPageCommon .right_side {
  flex: 0 0 72% !important;
  max-width: 75% !important;
}
.overviewPageCommon .detail-modal-size {
  max-width: 1000px !important;
}
.overviewPageCommon .cardImageWidth {
  height: 65px !important;
  width: 200px !important;
}
.overviewPageCommon .text_right {
  text-align: right;
}
.overviewPageCommon .shipmentContainer {
  border: solid 1px #dedede;
  width: 97%;
  margin: 0;
}
.overviewPageCommon .shipmentBrdTop {
  border-top: solid 1px #dedede;
}
.overviewPageCommon .shipmentBrdBtm {
  border-bottom: solid 1px #dedede;
}
.overviewPageCommon .basicInfo {
  padding-top: 11px;
  padding-bottom: 11px;
}
.overviewPageCommon .stepHeader {
  border-bottom: solid 1px #dedede;
  font-size: 16px;
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
  background: #f9f9f9;
}
.overviewPageCommon .shipmentBottom {
  border-top: solid 1px #dedede;
  padding-top: 7px;
  padding-bottom: 7px;
}
.overviewPageCommon .shipmentDataContainer {
  padding-top: 10px;
  padding-bottom: 15px;
}
.overviewPageCommon .shimentLabel {
  color: #1b5297;
  font-weight: 500;
  margin-top: 9px;
}
.overviewPageCommon .pickupOption {
  align-self: center;
  border-right: solid 1px gainsboro;
  padding-top: 8px;
  padding-bottom: 5px;
  padding-left: 40px;
}
.overviewPageCommon .pickupLocationRow {
  margin-bottom: 12px;
  margin-top: 12px;
}
.overviewPageCommon .packageInput {
  margin-top: 12px;
  width: 50%;
  margin-top: 11px;
}
.overviewPageCommon .shipmentTable {
  border: solid 1px whitesmoke;
}
.overviewPageCommon .shipmentTable th {
  background: #fbfbfb;
}
.overviewPageCommon .shipmentTable th,
.overviewPageCommon .shipmentTable td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.overviewPageCommon .shipmentTable td {
  border-bottom: solid 1px #dedede;
}
.overviewPageCommon .text_center {
  text-align: center;
}
.overviewPageCommon .avaialbleCuriorOption {
  padding-left: 11px;
  padding-top: 18px;
}
.overviewPageCommon .recommandated {
  color: green;
}
.overviewPageCommon .shpmentItemBtm {
  padding-bottom: 12px;
}
@media (max-width: 1300px) {
  .overviewPageCommon .new-button {
    font-size: 12px;
    margin-right: 7px;
  }
  .overviewPageCommon .short_action .fa {
    font-size: 12px;
  }
}
.overviewPageCommon .overscroll {
  overflow-y: scroll;
  height: 155px;
}
.overviewPageCommon .changepd {
  padding: 6px 8px;
}
.overviewPageCommon .selectedownerli {
  padding: 6px;
  border: 2px solid gainsboro;
  margin-bottom: 5px;
}
.overviewPageCommon .closefilterbtn {
  padding: 4px 12px;
  font-size: 17px;
  margin: -7px;
  cursor: pointer;
  position: relative;
  float: right;
  background: lightgray;
}
.overviewPageCommon .wi-734 {
  max-width: 734px;
}
.overviewPageCommon .packages {
  padding: 0px 18px 0px 17px;
  border: 1px solid gainsboro;
  background: ghostwhite;
  margin: 0 5px;
}
.overviewPageCommon .packagelabel {
  font-size: 14px;
  font-weight: 600;
}
.overviewPageCommon .backg {
  background: ghostwhite;
}
.overviewPageCommon .purchaseDiv thead {
  background: var(--bgcolorlightgray);
}
.overviewPageCommon .cardlistclass {
  margin: 24px 11px 0px;
}
.overviewPageCommon .pad-8 {
  padding: 8px !important;
}
.overviewPageCommon .f17 {
  font-size: 17px;
}
.form-control {
  font-size: 0.8rem;
}
#feedback body {
  background-color: aliceblue;
}
.loading-screen-wrapper {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
  width: 90%;
  height: 100%;
  display: block;
}
.notavail {
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: center;
  padding-top: 12px;
}
.loading-screen-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.spinner {
  margin-left: 10px;
}
.spinner > div {
  width: 10px;
  height: 10px;
  background-color: #333;
  margin-right: 5px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@-webkit-keyframes blinker {
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blinker {
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
.load {
  -webkit-animation: blinker 1.4s ease infinite;
          animation: blinker 1.4s ease infinite;
  opacity: 1;
}
.load {
  color: black;
  font-weight: 600;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
  font-size: 25px;
}
.modal-lg {
  max-width: 500px !important;
}
.modal-lg .modal-content {
  border-radius: 0 !important;
}
.align-self-center {
  align-self: center;
}
.font-bold {
  font-weight: bold;
}
.btnht {
  min-height: 35px;
}
.searchli {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}
*:focus {
  outline: 0;
  box-shadow: unset !important;
}
.btn-secondary:not(:disabled):not(.disabled):active {
  color: black;
  background-color: white;
  border-color: #c4c4c4;
}
.btn-secondary:hover {
  color: black;
  background-color: white;
  border-color: #c4c4c4;
}
.thick .bar {
  height: 5px !important;
}
.pad-0 {
  padding: 0px;
}
.txtcapsnone {
  text-transform: none !important;
}
.disabled {
  cursor: not-allowed !important;
}
.txtcaps {
  text-transform: capitalize;
}
.selectedtr {
  background-color: #fffced !important;
}
.pointer {
  cursor: pointer;
}
.pad {
  padding: 11px 0px 11px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
}
#dropdownMenuButton:focus {
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: unset !important;
}
#dropdownMenuButton:hover {
  border: 1px solid rgba(0, 0, 0, 0.3);
}
#dropdownMenuButton {
  background-color: transparent;
  font-family: ProximaNovaLtSemibold;
}
.fixright {
  float: right;
}
.fixright img {
  width: 13px;
  position: relative;
  bottom: 2px;
}
.fixright button {
  background-color: var(--AddImportBtn);
  color: black;
  border-radius: 0px;
  border: 1px solid #c4c4c4;
  font-size: 14px;
}
.fixleft {
  float: left;
}
.fixleft img {
  width: 13px;
  position: relative;
  bottom: 2px;
}
.fixleft button {
  background: cornflowerblue;
  color: white;
  border: none;
  font-size: 14px;
}
.btn-secondary:focus {
  box-shadow: unset !important;
}
.validation {
  color: #d72e3d;
  font-size: 11px;
  font-family: ProximaNovaRegular;
}
.pad-top-26 {
  padding-top: 26px;
  padding-bottom: 40px;
}
.requiredfield {
  border-left: 3px solid #df0707 !important;
}
.btn-primary {
  background-color: var(--btnColor);
  border-color: var(--btnColor);
  color: white;
  font-size: 14px;
}
.btn-primary:hover {
  background-color: var(--hoverColor);
  color: white;
}
.btn {
  border-radius: 0px;
}
#adduser .btn-secondary:hover,
#filtercol .btn-secondary:hover,
#login .btn-secondary:hover,
#addrole .btn-secondary:hover,
#customfield .btn-secondary:hover,
#updatepersonaldetails .btn-secondary:hover {
  color: black;
  background-color: white !important;
  border-color: lightgrey !important;
}
#adduser .btn-outline-secondary,
#filtercol .btn-outline-secondary,
#login .btn-outline-secondary,
#addrole .btn-outline-secondary,
#customfield .btn-outline-secondary,
#updatepersonaldetails .btn-outline-secondary {
  border: 1px solid #dddbda;
  color: var(--btnColor);
  margin-right: 8px;
  background-color: #fbfcfd;
}
#adduser .btn-outline-secondary:hover,
#filtercol .btn-outline-secondary:hover,
#login .btn-outline-secondary:hover,
#addrole .btn-outline-secondary:hover,
#customfield .btn-outline-secondary:hover,
#updatepersonaldetails .btn-outline-secondary:hover {
  background-color: #f4f6f9;
  color: var(--btnColor);
  border: 1px solid #dddbda;
}
#adduser .btn-primary,
#filtercol .btn-primary,
#login .btn-primary,
#addrole .btn-primary,
#customfield .btn-primary,
#updatepersonaldetails .btn-primary {
  background-color: var(--btnColor);
  border-color: var(--btnColor);
  color: white;
}
#adduser .btn-primary:hover,
#filtercol .btn-primary:hover,
#login .btn-primary:hover,
#addrole .btn-primary:hover,
#customfield .btn-primary:hover,
#updatepersonaldetails .btn-primary:hover {
  background-color: var(--hoverColor);
  color: white;
}
.quickadd {
  padding: 6px 22px;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  text-transform: capitalize;
  z-index: 1;
  background: white;
  border-top: 1px solid lightgray;
  color: #1f6eb8;
}
.filter {
  margin-left: 15px !important;
}
.width {
  max-width: 80% !important;
}
.width2 {
  max-width: 20% !important;
  border-left: 1px solid lightgray;
  box-shadow: 0 0 3px #c3c6ca;
}
#filtercol button {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  margin-top: 23px;
  font-size: 12px;
  font-family: ProximaNovaRegular !important;
}
#filtercol .inputfield {
  border: 1px solid lightgray !important;
  padding: 3px 4px;
  font-size: 13px;
  font-family: ProximaNovaRegular !important;
  margin-top: 8px;
}
#filtercol select {
  font-size: 12px;
  border-radius: 2px !important;
  border-color: #d5d5d5;
  background: #f1f1f1;
  border: 1px solid #f1f1f1;
}
#filtercol .input-group-text {
  background: white;
  border: 0px;
}
#filtercol .form-control {
  background-color: white;
  border: 0px;
}
#filtercol .input-group {
  border-bottom: 1px solid lightgrey;
}
#filtercol ul {
  list-style-type: none;
  padding-top: 13px;
  padding-left: 12px;
}
#filtercol ul li label {
  font-size: 0.881rem;
  font-family: ProximaNovaLtSemibold;
}
#filtercol ul li .checkmark {
  top: 5px;
}
table {
  width: 100%;
}
.tdwidth {
  width: 1%;
}
thead tr {
  border-bottom: 3px solid #eee;
}
thead td {
  font-size: 14px;
  padding: 7px 28px;
  font-family: ProximaNovaLtSemibold;
}
tbody td {
  padding: 11px 14px 11px 28px;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: unset;
}
tbody td a {
  color: #2c7bd0 !important;
}
tbody tr {
  border-bottom: 1px solid #eceff1;
}
.pad-10 {
  padding: 0px 10px;
}
tbody tr:hover {
  background-color: #f9f9f9;
  cursor: pointer;
}
tbody tr:hover .editcolor {
  display: block;
}
.editcolor {
  color: #999999;
  display: none;
}
.custom {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.custom .cinput {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1.5px solid #868686;
  border-radius: 2px;
}
/* On mouse-over, add a grey background color */
.custom:hover input ~ .checkmark {
  background-color: #cccccc;
}
/* When the checkbox is checked, add a blue background */
.custom input:checked ~ .checkmark {
  background-color: #2196f3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.custom input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.custom .checkmark:after {
  left: 5.5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
#optiondiv .btn {
  background: white;
  color: black;
  border: 1px solid lightgray;
  border-radius: 0px;
  padding: 4px 10px 4px;
}
#optiondiv p {
  margin: 0px;
  padding-top: 4px;
}
.mr-tp {
  margin-top: 20px;
  margin-right: 0px !important;
}
.count {
  font-weight: 400;
  margin-left: 28px;
}
.count b {
  font-family: ProximaNovaLtSemibold;
}
.opacity {
  opacity: 0.5;
}
.width-99 {
  width: 99%;
}
.pad-left-29 {
  padding-left: 29px;
}
.pad-left-15 {
  padding-left: 15px;
}
.ng-progress .bar {
  background: red !important;
  height: 2.5px;
  transform: translate3d(0%, 0px, 0px);
  transition: none 0s ease 0s;
}
.mylead {
  z-index: 111 !important;
}
.cdk-overlay-container {
  z-index: 11000 !important;
}
.owl-dt-container thead tr {
  border-bottom: 0px solid #eee !important;
}
.owl-dt-container tbody td {
  padding: 7.14286% 0px 7.14286% 0px !important;
}
#success-snackbar {
  visibility: hidden;
  max-width: 430px;
  margin-left: -125px;
  background-color: #d4edda;
  color: #155724;
  text-align: center;
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: 0px;
  font-size: 17px;
  border: 1.1px solid transparent;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1);
}
#success-snackbar .imgsuccess {
  float: left;
  height: 45px;
  margin-right: 10px;
}
#success-snackbar span {
  float: left;
  margin-right: 0px;
}
#success-snackbar img {
  margin-right: 16px;
  position: relative;
  width: 30px;
  margin-top: 6px;
  margin-left: 16px;
}
#success-snackbar .successhead {
  position: relative;
  bottom: 0px;
  font-size: 17px;
  font-family: ProximaNovaLtSemibold;
}
#success-snackbar .successmsg {
  bottom: 6px;
  font-size: 15px;
  font-family: ProximaNovaRegular;
  text-transform: capitalize;
  white-space: -webkit-nowrap;
  text-align: left;
  padding-left: 72px;
  padding-right: 15px;
  margin-top: -20px;
}
#success-snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#error-snackbar {
  visibility: hidden;
  max-width: 430px;
  margin-left: -125px;
  background-color: #f8d7da;
  color: #721c24;
  text-align: center;
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: 0px;
  font-size: 17px;
  border: 1.1px solid transparent;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1);
}
#error-snackbar .imgsuccess {
  float: left;
  height: 45px;
  margin-right: 10px;
}
#error-snackbar span {
  float: left;
  margin-right: 0px;
}
#error-snackbar img {
  margin-right: 16px;
  position: relative;
  width: 30px;
  margin-top: 6px;
  margin-left: 16px;
}
#error-snackbar .successhead {
  position: relative;
  bottom: 0px;
  font-size: 17px;
  font-family: ProximaNovaLtSemibold;
}
#error-snackbar .successmsg {
  position: relative;
  bottom: 6px;
  font-size: 15px;
  font-family: ProximaNovaRegular;
  text-transform: capitalize;
  text-align: left;
  padding-left: 72px;
  padding-right: 15px;
  margin-top: -14px;
}
#error-snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#warning-snackbar {
  visibility: hidden;
  max-width: 430px;
  margin-left: -125px;
  background-color: #feefb3;
  color: #721c24;
  text-align: center;
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: 0px;
  font-size: 17px;
  border: 1.1px solid transparent;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1);
}
#warning-snackbar .imgsuccess {
  float: left;
  height: 45px;
  margin-right: 10px;
}
#warning-snackbar span {
  float: left;
  margin-right: 0px;
}
#warning-snackbar img {
  margin-right: 16px;
  position: relative;
  width: 30px;
  margin-top: 6px;
  margin-left: 16px;
}
#warning-snackbar .successhead {
  position: relative;
  bottom: 0px;
  font-size: 17px;
  font-family: ProximaNovaLtSemibold;
}
#warning-snackbar .successmsg {
  position: relative;
  bottom: 6px;
  font-size: 15px;
  font-family: ProximaNovaRegular;
  text-transform: capitalize;
  text-align: left;
  padding-left: 72px;
  padding-right: 15px;
  margin-top: -14px;
}
#warning-snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#attachactivity .ngx-file-drop__content {
  display: block !important;
  height: 100% !important;
  padding: 24px 18px !important;
}
#attachactivity .ngx-file-drop__drop-zone {
  height: 138px !important;
  margin: auto;
  border: 1px dashed lightgray !important;
  border-radius: 0.25rem !important;
  background: #f9f9f9;
}
#addterms .btn-group > .btn {
  color: #436486 !important;
  font-size: 13px !important;
}
#addterms .btn-group > .btn {
  background: white !important;
}
.fc-title {
  color: white !important;
}
.fc-time {
  color: white !important;
}
#note .note-toolbar {
  z-index: 0 !important;
  display: none;
}
#note .note-editor.note-frame .note-editing-area .note-editable {
  height: 217px !important;
}
#myCalendar .fc-button {
  font-size: 13px !important;
  text-transform: capitalize;
}
#myCalendar .fc-button-primary {
  color: black !important;
  background-color: #ededed !important;
  border-color: #c6c6c6 !important;
}
#myCalendar .fc-button-primary:not(:disabled):active,
#myCalendar .fc-button-primary:not(:disabled).fc-button-active {
  color: #fff !important;
  background-color: #63798d !important;
  border-color: #6e8295 !important;
}
#myCalendar .fc-scroller {
  height: 555px;
}
.fc-scroller {
  height: 555px;
}
.fc-title {
  text-transform: capitalize;
}
.fc-list-item-title a {
  text-transform: capitalize !important;
}
#freeztable {
  /* Use overflow:scroll on your container to enable scrolling: */
  /* Use position: sticky to have it stick to the edge
   * and top, right, or left to choose which edge to stick to: */
  /* To have the header in the first column stick to the left: */
  /* Just to display it nicely: */
}
#freeztable div {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}
#freeztable thead th {
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  top: 0;
}
#freeztable tbody th {
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  left: 0;
}
#freeztable thead th:first-child {
  left: 0;
  z-index: 1;
}
#freeztable thead th {
  background: #000;
  color: #fff;
}
#freeztable tbody th {
  background: #fff;
  border-right: 1px solid #ccc;
}
#freeztable table {
  border-collapse: collapse;
}
#freeztable td,
#freeztable th {
  padding: 0.5em;
}
.chartjs-render-monitor {
  height: 285px !important;
}
.fixsearch {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1;
}
.filedownload {
  width: 14px;
  margin-left: 4px;
  opacity: 0.9;
}
#addcompany .leadtxt,
#applicationForm .leadtxt,
#customerForm .leadtxt {
  font-family: ProximaNovaRegular;
  padding-left: 30px;
  margin: 0;
  margin-top: 6px;
}
#addcompany .mylead .btn,
#applicationForm .mylead .btn,
#customerForm .mylead .btn {
  font-size: 0.8125rem;
  border-radius: 2px;
  margin-right: 8px;
}
#addcompany .mylead,
#applicationForm .mylead,
#customerForm .mylead {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1111;
}
#addcompany .mylead .btn-outline-secondary,
#applicationForm .mylead .btn-outline-secondary,
#customerForm .mylead .btn-outline-secondary {
  border: 1px solid #dddbda;
  color: var(--btnColor);
}
#addcompany .mylead .btn-outline-secondary:hover,
#applicationForm .mylead .btn-outline-secondary:hover,
#customerForm .mylead .btn-outline-secondary:hover {
  background-color: #f4f6f9;
}
#addcompany .mylead .btn-primary,
#applicationForm .mylead .btn-primary,
#customerForm .mylead .btn-primary {
  background-color: var(--btnColor);
  border-color: var(--btnColor);
  color: white;
}
#addcompany .mylead .btn-primary:hover,
#applicationForm .mylead .btn-primary:hover,
#customerForm .mylead .btn-primary:hover {
  background-color: var(--hoverColor);
  color: white;
}
#addcompany #leadul,
#applicationForm #leadul,
#customerForm #leadul {
  max-height: 196px;
  overflow-x: hidden;
}
#addcompany .selectsalution,
#applicationForm .selectsalution,
#customerForm .selectsalution {
  border: 1px solid #ced4da;
}
#addcompany .selectsalution:hover,
#applicationForm .selectsalution:hover,
#customerForm .selectsalution:hover {
  background-color: transparent;
  color: black;
}
#addcompany .btn-outline-secondary:not(:disabled):not(.disabled).active,
#addcompany .btn-outline-secondary:not(:disabled):not(.disabled):active,
#addcompany .show > .btn-outline-secondary.dropdown-toggle,
#applicationForm .btn-outline-secondary:not(:disabled):not(.disabled).active,
#applicationForm .btn-outline-secondary:not(:disabled):not(.disabled):active,
#applicationForm .show > .btn-outline-secondary.dropdown-toggle,
#customerForm .btn-outline-secondary:not(:disabled):not(.disabled).active,
#customerForm .btn-outline-secondary:not(:disabled):not(.disabled):active,
#customerForm .show > .btn-outline-secondary.dropdown-toggle {
  background-color: transparent;
  color: black;
  border-color: #ced4da;
}
#addcompany .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
#addcompany .show > .btn-outline-secondary.dropdown-toggle:focus,
#applicationForm .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
#applicationForm .show > .btn-outline-secondary.dropdown-toggle:focus,
#customerForm .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
#customerForm .show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: unset;
}
#addcompany .pad-left-45,
#applicationForm .pad-left-45,
#customerForm .pad-left-45 {
  padding-left: 45px;
}
#addcompany .txtcolor,
#applicationForm .txtcolor,
#customerForm .txtcolor {
  color: #1b5297;
}
#addcompany .general,
#applicationForm .general,
#customerForm .general {
  background-color: #fff;
  display: inline-block;
  padding-right: 20px;
  position: relative;
  bottom: 31px;
  font-family: ProximaNovaLtSemibold;
  text-transform: uppercase;
  font-size: 13.5px;
}
#addcompany .form-control,
#applicationForm .form-control,
#customerForm .form-control {
  color: black !important;
}
#addcompany .form-control:focus,
#applicationForm .form-control:focus,
#customerForm .form-control:focus {
  border-color: #c3c6ca !important;
  box-shadow: 0 0 6px #c3c6ca !important;
  transition: box-shadow 0.1s ease-in-out;
}
#addcompany select:focus,
#applicationForm select:focus,
#customerForm select:focus {
  border-color: #c3c6ca !important;
  box-shadow: 0 0 6px #c3c6ca !important;
  transition: box-shadow 0.1s ease-in-out;
}
#addcompany .col-form-label,
#applicationForm .col-form-label,
#customerForm .col-form-label {
  text-align: right;
  text-transform: capitalize;
  font-size: 13px;
}
#addcompany .leadowner .dropdown-toggle::after,
#applicationForm .leadowner .dropdown-toggle::after,
#customerForm .leadowner .dropdown-toggle::after {
  float: right;
  margin-top: 9px;
}
#addcompany .selectedname,
#applicationForm .selectedname,
#customerForm .selectedname {
  float: left;
  text-transform: capitalize;
  font-size: 14px;
  width: 92%;
}
#addcompany .btnowner,
#applicationForm .btnowner,
#customerForm .btnowner {
  background-color: transparent;
  border: 1px solid lightgrey;
  text-align: left;
  font-size: 0.8rem;
}
#addcompany ul,
#applicationForm ul,
#customerForm ul {
  width: 100% !important;
  padding: 0px !important;
  border: 1px solid #d6d6d6 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  height: 196px;
  overflow-x: hidden;
}
#addcompany ul li,
#applicationForm ul li,
#customerForm ul li {
  border-bottom: 1px solid lightgrey;
  cursor: pointer;
}
#organizationForm .leadowner .dropdown-toggle::after {
  float: right;
  margin-top: 9px;
}
#organizationForm .selectedname {
  float: left;
  text-transform: capitalize;
  font-size: 14px;
}
#organizationForm .btnowner {
  background-color: transparent;
  border: 1px solid lightgrey;
}
#organizationForm ul {
  width: 100% !important;
  padding: 0px !important;
  border: 1px solid #d6d6d6 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  height: 196px;
  overflow-x: hidden;
}
#organizationForm ul li {
  border-bottom: 1px solid lightgrey;
  cursor: pointer;
}
#organizationForm .choicep {
  display: grid;
  padding: 4px 25px;
  position: relative;
  margin-bottom: 0px;
}
#organizationForm .choicep span {
  color: #333;
  font-size: 0.9rem;
}
#organizationForm .checkpos {
  text-align: left !important;
  position: absolute;
  left: 5px;
  top: 5px;
  opacity: 0.7;
}
#organizationForm .choicep:hover {
  background-color: #f7f7f7;
}
#organizationForm a {
  text-decoration: none !important;
}
.filter-custom {
  border: 1px solid #c4c4c4;
  border-radius: 0px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: #2196f3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
  transform: translateX(17px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
.Model-form .form-control {
  height: 32px;
  border-bottom: 1px solid var(--borderBottomColor) !important;
  border: 0;
  border-radius: 0;
}
.Model-form ::-moz-placeholder {
  font-size: 14px;
}
.Model-form ::placeholder {
  font-size: 14px;
}
.Model-form .form-group {
  margin-bottom: 0.5rem;
}
.no-hover:hover {
  background: unset !important;
  color: #212529 !important;
}
::ng-deep .custom-slider .ng5-slider .ng5-slider-pointer:after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  top: 8px;
  left: 7.5px;
  border-radius: 4px;
  background: #fff;
}
::ng-deep .custom-slider .ng5-slider .ng5-slider-pointer {
  cursor: pointer;
  width: 20px;
  height: 20px;
  top: -8px;
  background-color: #0db9f0;
  z-index: 3;
  border-radius: 16px;
}
#updatepersonaldetails .btn {
  font-size: 12px;
}
#updatepersonaldetails .modal-dialog {
  max-width: 600px !important;
}
#updatepersonaldetails .modal-header {
  border: 0px;
}
#updatepersonaldetails .form-control {
  border: 0px;
  color: #222;
  font-family: ProximaNovaRegular;
  font-size: 16px;
}
#updatepersonaldetails .alert-info {
  font-size: 13px;
  padding: 10px 4px;
}
#updatepersonaldetails .scrolldiv {
  height: 435px;
  overflow-x: hidden;
  padding: 0px 20px;
}
#updatepersonaldetails .modalpad {
  padding: 0px 20px;
}
#updatepersonaldetails .modal-footer {
  border: 0px;
  padding-top: 0px;
}
#updatepersonaldetails .main-div {
  padding: 0px;
}
#updatepersonaldetails .form-group {
  border-bottom: 1px solid #dadde1;
  position: relative;
}
#updatepersonaldetails .col-form-label {
  padding-left: 0px;
  opacity: 0.8;
  font-size: 15px;
}
#updatepersonaldetails .required {
  width: 26%;
  height: 2px;
  position: absolute;
  bottom: 0px;
  background: #df1212;
}
#updatepersonaldetails .addressborder {
  border-bottom: 0px;
}
#updatepersonaldetails .checkboxcss1 {
  padding: 11px 14px;
}
#updatepersonaldetails .checkboxcss {
  padding: 11px 29px;
}
#updatepersonaldetails .checkcss1 {
  margin: 10px 0px;
}
#updatepersonaldetails .lblfont1 {
  padding: 0px 52px;
}
#updatepersonaldetails input.checkboxcss {
  width: 23px;
  height: 21px;
}
#updatepersonaldetails input.rolecheckbox {
  width: 19px;
  height: 22px;
  margin-left: 16px;
  margin-top: 5px;
}
#updatepersonaldetails .activelock {
  white-space: pre;
  float: right;
  margin-top: -31px;
}
#updatepersonaldetails .roleset {
  margin-top: -27px;
  margin-left: 20px;
}
#updatepersonaldetails .leadowner .dropdown-toggle::after {
  float: right;
  margin-top: 9px;
}
#updatepersonaldetails .selectedname {
  float: left;
  text-transform: capitalize;
  font-size: 14px;
}
#updatepersonaldetails .btnowner {
  background-color: transparent;
  border: 1px solid lightgrey;
  font-size: 14px !important;
}
#updatepersonaldetails ul {
  width: 100% !important;
  padding: 0px !important;
  border: 1px solid #d6d6d6 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  height: 196px;
  overflow-x: hidden;
}
#updatepersonaldetails ul li {
  border-bottom: 1px solid lightgrey;
  cursor: pointer;
}
#updatepersonaldetails .choicep {
  display: grid;
  padding: 4px 25px;
  position: relative;
  margin-bottom: 0px;
}
#updatepersonaldetails .choicep span {
  color: #333;
  font-size: 0.9rem;
  text-transform: capitalize;
}
#updatepersonaldetails .checkpos {
  text-align: left !important;
  position: absolute;
  left: 5px;
  top: 5px;
  opacity: 0.7;
}
#updatepersonaldetails .choicep:hover {
  background-color: #f7f7f7;
}
#updatepersonaldetails a {
  text-decoration: none !important;
}
#updatepersonaldetails a:hover {
  color: inherit;
  text-decoration: none;
}
#updatepersonaldetails .validate {
  position: relative;
  bottom: 12px;
  width: 40%;
  margin: auto;
}
#updatepersonaldetails .passvalid {
  margin-top: -12px;
  text-align: center;
}
#updatepersonaldetails .active-red {
  border-bottom: 1px solid red;
}
#updatepersonaldetails .border-bt {
  border-bottom: 1px solid white;
}
#adduser .btn,
#addrole .btn,
#updatepersonaldetails .btn,
#changepasstab .btn,
#addwarranty .btn {
  font-size: 12px;
}
#adduser .modal-dialog,
#addrole .modal-dialog,
#updatepersonaldetails .modal-dialog,
#changepasstab .modal-dialog,
#addwarranty .modal-dialog {
  max-width: 600px !important;
}
#adduser .modal-header,
#addrole .modal-header,
#updatepersonaldetails .modal-header,
#changepasstab .modal-header,
#addwarranty .modal-header {
  border: 0px;
}
#adduser .form-control,
#addrole .form-control,
#updatepersonaldetails .form-control,
#changepasstab .form-control,
#addwarranty .form-control {
  border: 0px;
  color: #222;
  font-family: ProximaNovaRegular;
  font-size: 16px;
}
#adduser .alert-info,
#addrole .alert-info,
#updatepersonaldetails .alert-info,
#changepasstab .alert-info,
#addwarranty .alert-info {
  font-size: 13px;
  padding: 10px 4px;
}
#adduser .scrolldiv,
#addrole .scrolldiv,
#updatepersonaldetails .scrolldiv,
#changepasstab .scrolldiv,
#addwarranty .scrolldiv {
  height: 435px;
  overflow-x: hidden;
  padding: 0px 20px;
}
#adduser .modalpad,
#addrole .modalpad,
#updatepersonaldetails .modalpad,
#changepasstab .modalpad,
#addwarranty .modalpad {
  padding: 0px 20px;
}
#adduser .modal-footer,
#addrole .modal-footer,
#updatepersonaldetails .modal-footer,
#changepasstab .modal-footer,
#addwarranty .modal-footer {
  border: 0px;
  padding-top: 0px;
}
#adduser .main-div,
#addrole .main-div,
#updatepersonaldetails .main-div,
#changepasstab .main-div,
#addwarranty .main-div {
  padding: 0px;
}
#adduser .form-group,
#addrole .form-group,
#updatepersonaldetails .form-group,
#changepasstab .form-group,
#addwarranty .form-group {
  border-bottom: 1px solid #dadde1;
  position: relative;
}
#adduser .col-form-label,
#addrole .col-form-label,
#updatepersonaldetails .col-form-label,
#changepasstab .col-form-label,
#addwarranty .col-form-label {
  padding-left: 0px;
  opacity: 0.8;
  font-size: 15px;
}
#adduser .required,
#addrole .required,
#updatepersonaldetails .required,
#changepasstab .required,
#addwarranty .required {
  width: 26%;
  height: 2px;
  position: absolute;
  bottom: 0px;
  background: #df1212;
}
#adduser .addressborder,
#addrole .addressborder,
#updatepersonaldetails .addressborder,
#changepasstab .addressborder,
#addwarranty .addressborder {
  border-bottom: 0px;
}
#adduser .checkboxcss1,
#addrole .checkboxcss1,
#updatepersonaldetails .checkboxcss1,
#changepasstab .checkboxcss1,
#addwarranty .checkboxcss1 {
  padding: 11px 14px;
}
#adduser .checkboxcss,
#addrole .checkboxcss,
#updatepersonaldetails .checkboxcss,
#changepasstab .checkboxcss,
#addwarranty .checkboxcss {
  padding: 11px 29px;
}
#adduser .checkcss1,
#addrole .checkcss1,
#updatepersonaldetails .checkcss1,
#changepasstab .checkcss1,
#addwarranty .checkcss1 {
  margin: 10px 0px;
}
#adduser .lblfont1,
#addrole .lblfont1,
#updatepersonaldetails .lblfont1,
#changepasstab .lblfont1,
#addwarranty .lblfont1 {
  padding: 0px 52px;
}
#adduser input.checkboxcss,
#addrole input.checkboxcss,
#updatepersonaldetails input.checkboxcss,
#changepasstab input.checkboxcss,
#addwarranty input.checkboxcss {
  width: 23px;
  height: 21px;
}
#adduser input.rolecheckbox,
#addrole input.rolecheckbox,
#updatepersonaldetails input.rolecheckbox,
#changepasstab input.rolecheckbox,
#addwarranty input.rolecheckbox {
  width: 19px;
  height: 22px;
  margin-left: 16px;
  margin-top: 5px;
}
#adduser .activelock,
#addrole .activelock,
#updatepersonaldetails .activelock,
#changepasstab .activelock,
#addwarranty .activelock {
  white-space: pre;
  float: right;
  margin-top: -31px;
}
#adduser .roleset,
#addrole .roleset,
#updatepersonaldetails .roleset,
#changepasstab .roleset,
#addwarranty .roleset {
  margin-top: -27px;
  margin-left: 20px;
}
#adduser .leadowner .dropdown-toggle::after,
#addrole .leadowner .dropdown-toggle::after,
#updatepersonaldetails .leadowner .dropdown-toggle::after,
#changepasstab .leadowner .dropdown-toggle::after,
#addwarranty .leadowner .dropdown-toggle::after {
  float: right;
  margin-top: 9px;
}
#adduser .selectedname,
#addrole .selectedname,
#updatepersonaldetails .selectedname,
#changepasstab .selectedname,
#addwarranty .selectedname {
  float: left;
  text-transform: capitalize;
  font-size: 14px;
}
#adduser .btnowner,
#addrole .btnowner,
#updatepersonaldetails .btnowner,
#changepasstab .btnowner,
#addwarranty .btnowner {
  background-color: transparent;
  border: 1px solid lightgrey;
  font-size: 14px !important;
}
#adduser ul,
#addrole ul,
#updatepersonaldetails ul,
#changepasstab ul,
#addwarranty ul {
  width: 100% !important;
  padding: 0px !important;
  border: 1px solid #d6d6d6 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  height: 196px;
  overflow-x: hidden;
}
#adduser ul li,
#addrole ul li,
#updatepersonaldetails ul li,
#changepasstab ul li,
#addwarranty ul li {
  border-bottom: 1px solid lightgrey;
  cursor: pointer;
}
#adduser .choicep,
#addrole .choicep,
#updatepersonaldetails .choicep,
#changepasstab .choicep,
#addwarranty .choicep {
  display: grid;
  padding: 4px 25px;
  position: relative;
  margin-bottom: 0px;
}
#adduser .choicep span,
#addrole .choicep span,
#updatepersonaldetails .choicep span,
#changepasstab .choicep span,
#addwarranty .choicep span {
  color: #333;
  font-size: 0.9rem;
  text-transform: capitalize;
}
#adduser .checkpos,
#addrole .checkpos,
#updatepersonaldetails .checkpos,
#changepasstab .checkpos,
#addwarranty .checkpos {
  text-align: left !important;
  position: absolute;
  left: 5px;
  top: 5px;
  opacity: 0.7;
}
#adduser .choicep:hover,
#addrole .choicep:hover,
#updatepersonaldetails .choicep:hover,
#changepasstab .choicep:hover,
#addwarranty .choicep:hover {
  background-color: #f7f7f7;
}
#adduser a,
#addrole a,
#updatepersonaldetails a,
#changepasstab a,
#addwarranty a {
  text-decoration: none !important;
}
#adduser a:hover,
#addrole a:hover,
#updatepersonaldetails a:hover,
#changepasstab a:hover,
#addwarranty a:hover {
  color: inherit;
  text-decoration: none;
}
#adduser .validate,
#addrole .validate,
#updatepersonaldetails .validate,
#changepasstab .validate,
#addwarranty .validate {
  position: relative;
  bottom: 12px;
  width: 40%;
  margin: auto;
}
#adduser .passvalid,
#addrole .passvalid,
#updatepersonaldetails .passvalid,
#changepasstab .passvalid,
#addwarranty .passvalid {
  margin-top: -12px;
  text-align: center;
}
#adduser .active-red,
#addrole .active-red,
#updatepersonaldetails .active-red,
#changepasstab .active-red,
#addwarranty .active-red {
  border-bottom: 1px solid red;
}
#adduser .border-bt,
#addrole .border-bt,
#updatepersonaldetails .border-bt,
#changepasstab .border-bt,
#addwarranty .border-bt {
  border-bottom: 1px solid white;
}
#usersActive,
#term {
  /* Rounded sliders */
}
#usersActive label,
#term label {
  margin-bottom: 0px;
}
#usersActive h4,
#term h4 {
  font-weight: 100;
  font-size: 25px;
  letter-spacing: 0.7px;
  margin-left: 30px;
}
#usersActive p,
#term p {
  font-weight: 100;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-left: 30px;
}
#usersActive .activepagination,
#term .activepagination {
  text-align: right;
}
#usersActive .nodatatext1,
#term .nodatatext1 {
  color: #676767;
  font-size: 17px;
  margin-top: 0px;
  margin-bottom: 2px;
}
#usersActive .nodatatext2,
#term .nodatatext2 {
  font-size: 14px;
  color: #989696;
  margin-top: 0px;
  margin-bottom: 19px;
}
#usersActive .switch,
#term .switch {
  position: relative;
  display: inline-block;
  width: 39px;
  height: 21px;
}
#usersActive .switch input,
#term .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
#usersActive .slider,
#term .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}
#usersActive .slider:before,
#term .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 3.5px;
  background-color: white;
  transition: 0.4s;
}
#usersActive input:checked + .slider,
#term input:checked + .slider {
  background-color: #47b647;
}
#usersActive input:focus + .slider,
#term input:focus + .slider {
  box-shadow: 0 0 1px #47b647;
}
#usersActive input:checked + .slider:before,
#term input:checked + .slider:before {
  transform: translateX(13px);
}
#usersActive .slider.round,
#term .slider.round {
  border-radius: 34px;
}
#usersActive .slider.round:before,
#term .slider.round:before {
  border-radius: 50%;
}
#usersActive tbody tr,
#term tbody tr {
  border-bottom: 1px solid #eee;
  cursor: pointer;
  text-transform: capitalize;
}
#usersActive div.ex1,
#term div.ex1 {
  overflow-y: auto;
  height: 300px;
}
#usersActive .mr-tp,
#term .mr-tp {
  margin-top: 20px;
}
#usersActive .count,
#term .count {
  font-weight: 400;
}
#usersActive .count b,
#term .count b {
  font-family: ProximaNovaLtSemibold;
}
#itemlist .pad-left,
#settings .pad-left {
  padding-left: 11px;
  border-bottom: 1px solid lightgray;
}
#itemlist ul,
#settings ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 1rem;
  height: 500px;
  overflow-x: hidden;
}
#itemlist .br-1,
#settings .br-1 {
  border-right: 1px solid lightgray;
}
#itemlist li,
#settings li {
  padding-right: 20px;
  border-top: 1px solid white;
  padding-left: 11px;
  padding-bottom: 7px;
  padding-top: 7px;
  cursor: pointer;
  font-size: 13.5px;
  color: #6c6c6c;
}
#itemlist .tr-bb,
#settings .tr-bb {
  border-bottom: 3.5px double #e1e0e0;
}
#itemlist .tr-bb td,
#settings .tr-bb td {
  font-family: ProximaNovaRegular;
  color: #777;
  text-transform: uppercase;
}
#itemlist .colorchange,
#settings .colorchange {
  color: #1c97ff !important;
}
#itemlist tbody tr,
#settings tbody tr {
  border-bottom: 1px solid #f2f2f2;
}
#itemlist tbody tr:hover,
#settings tbody tr:hover {
  background-color: #f9f9f9;
}
#itemlist thead td a,
#settings thead td a {
  text-transform: uppercase;
}
#itemlist .tdwidth,
#settings .tdwidth {
  width: 20%;
}
#fieldedit input,
#fieldedit textarea {
  border: 1px solid #c3c6ca;
  border-radius: 5px;
  min-width: 40%;
  text-transform: capitalize;
  padding: 3px 10px;
  font-size: 13px;
}
#fieldedit tr td span {
  word-break: break-all;
}
#fieldedit img {
  width: 13%;
  margin-right: 10px;
  margin-left: 5px;
}
#fieldedit .imgop {
  opacity: 0.5;
}
#fieldedit input[type=text]:focus,
#fieldedit textarea:focus {
  border-color: #3c9df7 !important;
  box-shadow: 0 0 6px #8dc4ff !important;
  border-radius: 5px;
}
#fieldedit i {
  margin: 0 10px 0px 5px;
  cursor: pointer;
}
#fieldedit .disablebtn {
  background: transparent;
  border: 0px;
}
#fieldedit .editimg {
  width: 13px !important;
  cursor: pointer;
}
#fieldedit .settingimg {
  width: 13% !important;
}
/* Create a custom radio button */
.checkmark1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 1.5px solid #868686 !important;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark1 {
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark1 {
  background-color: #2196f3;
  border: 0px !important;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark1:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark1:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark1:after {
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}
.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.question-circle {
  color: #777;
}
.ngx-file-drop__content {
  display: block !important;
  height: 100% !important;
  padding: 24px 18px !important;
}
.ngx-file-drop__drop-zone {
  height: 138px !important;
  margin: auto;
  border: 1px dashed lightgray !important;
  border-radius: 0.25rem !important;
  background: #f9f9f9;
}
.disble-li {
  color: #767474;
  font-weight: 600;
  border-bottom: none;
  pointer-events: none;
  padding-left: 11px;
  font-size: 14.4px;
  padding-bottom: 4px;
  padding-top: 3px;
}
.pickericon {
  width: 13px;
  position: absolute;
  right: 25px;
  top: 10px;
  cursor: pointer;
}
#AddVendorModal .modal-dialog {
  max-width: 1300px;
}
.not-found {
  margin-top: 22%;
}
.newaccount {
  cursor: pointer;
  border-top: 1px solid lightgray;
}
@media (min-width: 576px) {
  #AddCustomerModal .modal-dialog {
    max-width: 1308px;
    margin: 1.75rem auto;
  }
}
.w-break {
  white-space: pre-line;
}
.custom_dates .owl-dt-inline-container .owl-dt-calendar,
.custom_dates .owl-dt-popup-container .owl-dt-calendar {
  height: 100%;
}
.custom_dates .owl-dt-inline-container {
  width: 100%;
}
.col-width-20 {
  width: 20%;
}
.word-break {
  word-break: break-word;
}
.filename {
  cursor: pointer;
}
.modal-xll .modal-dialog {
  max-width: 80%;
}
.add-new-currency {
  margin-bottom: 0px;
  padding: 4px 25px;
  cursor: pointer;
  font-size: 14px;
}
/*******growing table address dropdown******/
.addressDropdown_growing_table {
  width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dropdown_button {
  width: 160px;
}
.lineBreak {
  line-break: anywhere;
}
.cursor-pointer {
  cursor: pointer;
}
.about_us .note-editor.note-frame .note-editing-area .note-editable {
  min-height: 310px;
  overflow: auto;
}
.mr-tp {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  background: white;
}
.mr-tp ul {
  border: unset !important;
  box-shadow: unset !important;
  height: unset !important;
}
.mr-tp ul li {
  border-bottom: unset !important;
}
.backtocss {
  background: cornflowerblue;
  color: white;
  border: none;
}
.overflowhidden {
  overflow: hidden;
}
#reason_modal .colored-btn {
  background: var(--btnColor);
  color: var(--whitecolor);
  margin-right: 10px;
  letter-spacing: 1px;
  font-size: 14px;
  border: 1px solid #e5e5e5;
}
#modelColorBtn .colored-btn {
  background: var(--btnColor);
  color: var(--whitecolor);
  margin-right: 10px;
  letter-spacing: 1px;
  font-size: 14px;
  border: 1px solid #e5e5e5;
}
#publishBtn .bubbly-button {
  font-family: "Helvetica", "Arial", sans-serif;
  display: inline-block;
  /* font-size         : 1em; */
  font-size: 14px;
  padding: 6px 24px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* background        : var(--btnColor); */
  /* color             : var(--whitecolor); */
  /* color             : #fff; */
  border-radius: 3px;
  font-weight: 500;
  background: #f9f9f9;
  border: 1px solid gainsboro;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
}
#publishBtn .bubbly-button:focus {
  outline: 0;
}
#publishBtn .bubbly-button:before, #publishBtn .bubbly-button:after {
  position: absolute;
  content: "";
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
#publishBtn .bubbly-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, transparent 20%, #f9f9f9 20%, transparent 30%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, transparent 10%, #f9f9f9 15%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
#publishBtn .bubbly-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, transparent 10%, #f9f9f9 15%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%), radial-gradient(circle, #f9f9f9 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
#publishBtn .bubbly-button:active {
  transform: scale(0.9);
  background-color: #ececec;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
#publishBtn .bubbly-button.animate:before {
  display: block;
  -webkit-animation: topBubbles ease-in-out 0.75s forwards;
          animation: topBubbles ease-in-out 0.75s forwards;
}
#publishBtn .bubbly-button.animate:after {
  display: block;
  -webkit-animation: bottomBubbles ease-in-out 0.75s forwards;
          animation: bottomBubbles ease-in-out 0.75s forwards;
}
.dropdownscrollbardiv {
  max-height: 200px;
  overflow-y: auto;
}
.dropdownscrollbardiv::-webkit-scrollbar {
  width: 6px;
}
.dropdownscrollbardiv::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.dropdownscrollbardiv::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
/* Hide the browser's default checkbox */
.custom input {
  position: absolute;
  opacity: 0 !important;
  cursor: pointer !important;
  height: 0 !important;
  width: 0 !important;
}