/*
    Document   : override
    Created on : <date>
    Author     : <author>
    Description:
        This is where any of your application specific styles should be included
*/

.sendOffScreen {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.demo-oracle-icon {
  width:137px;
  height:18px
}

.demo-oracle-icon:before {
  content:url("images/oracle_logo.svg")
}

.txt-center{
  text-align: center;
}

html:not([dir="rtl"]) .demo-oracle-icon {
  padding-right:4px
}

html[dir="rtl"] .demo-oracle-icon {
  padding-left:4px
}

.demo-oracle-icon:before {
  display:inline
}

.demo-appheader-avatar {
  width:24px;
  height:24px
}


.demo-table-container {
  width: 100%;
}


.demo-button-red {
  /* red COLOR RAMP */

  --demo-red-rgb-10: 214, 60, 17;
  --demo-red-rgb-20: 249, 242, 253;
  --demo-red-rgb-30: 246, 236, 252;
  --demo-red-rgb-40: 239, 219, 250;
  --demo-red-rgb-50: 229, 196, 246;
  --demo-red-rgb-60: 215, 165, 242;
  --demo-red-rgb-70: 206, 145, 239;
  --demo-red-rgb-80: 196, 123, 235;
  --demo-red-rgb-90: 183, 94, 231;
  --demo-red-rgb-100: 169, 64, 227;
  --demo-red-rgb-110: 159, 40, 223;
  --demo-red-rgb-120: 214, 60, 17;
  --demo-red-rgb-130: 132, 32, 186;
  --demo-red-rgb-140: 117, 28, 166;
  --demo-red-rgb-150: 102, 24, 144;
  --demo-red-rgb-160: 214, 60, 17;
  --demo-red-rgb-170: 72, 17, 101;

  /* SOLID */

  /* solid enabled */
  --oj-button-solid-chrome-bg-color: rgb(var(--demo-red-rgb-140));
  --oj-button-solid-chrome-border-color: transparent;
  --oj-button-solid-chrome-text-color: var(--oj-core-neutral-contrast);

  /* solid hover */
  --oj-button-solid-chrome-bg-color-hover: rgb(var(--demo-red-rgb-120));
  --oj-button-solid-chrome-border-color-hover: transparent;
  --oj-button-solid-chrome-text-color-hover: var(--oj-core-neutral-contrast);

  /* solid active */
  --oj-button-solid-chrome-bg-color-active: rgb(var(--demo-red-rgb-160));
  --oj-button-solid-chrome-border-color-active: transparent;
  --oj-button-solid-chrome-text-color-active: var(--oj-core-neutral-contrast);

  /* solid disabled */
  --oj-button-solid-chrome-bg-color-disabled: rgba(var(--demo-red-rgb-100), 0.1);
  --oj-button-solid-chrome-border-color-disabled: transparent;
  --oj-button-solid-chrome-text-color-disabled: var(--oj-core-text-color-disabled);

  /* BORDERLESS */

  /* borderless-chrome enabled */
  --oj-button-borderless-chrome-text-color: rgb(var(--demo-red-rgb-120));

  /* borderless chrome hover */
  --oj-button-borderless-chrome-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-button-borderless-chrome-border-color-hover: transparent;
  --oj-button-borderless-chrome-text-color-hover: var(--oj-button-borderless-chrome-text-color);

  /* borderless chrome-active */
  --oj-button-borderless-chrome-bg-color-active: var(--oj-core-bg-color-active);
  --oj-button-borderless-chrome-border-color-active: transparent;
  --oj-button-borderless-chrome-text-color-active: var(--oj-button-borderless-chrome-text-color);

  /* borderless chrome disabled */
  --oj-button-borderless-chrome-text-color-disabled: rgba(var(--demo-red-rgb-160), 0.3);

  /* OUTLINED */

  /* outlined enabled */
  --oj-button-outlined-chrome-border-color: rgba(var(--demo-red-rgb-160), 0.3);
  --oj-button-outlined-chrome-text-color: var(--oj-button-borderless-chrome-text-color);

  /* outlined hover */
  --oj-button-outlined-chrome-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-button-outlined-chrome-border-color-hover: var(--oj-button-outlined-chrome-border-color);
  --oj-button-outlined-chrome-text-color-hover: var(--oj-button-outlined-chrome-text-color);

  /* outlined active */
  --oj-button-outlined-chrome-bg-color-active: var(--oj-core-bg-color-active);
  --oj-button-outlined-chrome-border-color-active: var(--oj-button-outlined-chrome-border-color);
  --oj-button-outlined-chrome-text-color-active: var(--oj-button-outlined-chrome-text-color);

  /* outlined disabled */
  --oj-button-outlined-chrome-border-color-disabled: rgba(var(--demo-red-rgb-160), 0.1);
  --oj-button-outlined-chrome-text-color-disabled: var(
    --oj-button-borderless-chrome-text-color-disabled
  );
}


.demo-appheader-avatar:before {
  content:url("images/avatar_24px.png")
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .demo-appheader-avatar:before {
      content:url("images/avatar_24px_2x.png");
      -webkit-transform:translate(-25%, -25%) scale(0.5);
      transform:translate(-25%, -25%) scale(0.5)
  }
}

.skeleton-line {
  height: 12px;
  margin: 10px 0;
  border-radius: 6px;
  background: #e6e6e6;
  animation: shimmer 1.2s infinite;
  background: linear-gradient(90deg, #e6e6e6 0%, #f5f5f5 50%, #e6e6e6 100%);
  background-size: 200% 100%;
}

.w-60 { width: 60%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}