/*
    Document   : override
    Created on : 2020-01-24
    Author     : Donald Raikes
    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;
}

.emp-details {
  padding-left: 80px; 
  width: 200px;
}

.emp-dept {
  font-size: 14px; 
  font-weight: 400; 
  font-style: italic; 
  margin-bottom: 10px;
}

.emp-name {
  font-size: 20px; 
  font-weight: bolder;
}

.demo-filmstrip-item {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #333;
  font-size: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
    
.demo-stretch-items {
  height: 100%;
}

.fs-container {
  width: 420px;
}

.small-cell {
  width: 20%;
}

.med-cell {
    width: 40%;
}

.demo-stretch-items {
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.chart-label {
  padding-left: 40px;
  font-weight: bolder;
}

.item-image {
  width: 150px;
  height: 150px;
  float: left;
}

.item-title {
  font-size: 32px;
  font-weight: bolder;
  text-align: start;
}

.item-location {
  font-size: 24px;
  font-weight: 600;
  text-align: start;
}

.item-count {
  font-size: 24px;
  font-weight: 600;
  text-align: start;
}

.table-size {
  height: 500px;
}

.button-set-width {
  min-width: 50px;
}

/* Button Styling */

  .demo-button-red {
    /* Red color ramp */
    --background: 255, 255, 255;
    --red100: 255, 201, 201;
    --red200: 255, 152, 152;
    --red300: 254, 94, 94;
    --red400: 237, 0, 0;
    --red500: 182, 0, 0;
    --red600: 129, 0, 0;

    /* solid enabled */
    --oj-button-solid-chrome-bg-color: rgb(var(--red500));
    --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:  rgba(var(--red300),.12);
    --oj-button-solid-chrome-border-color-hover:  rgb(var(--red500));
    --oj-button-solid-chrome-text-color-hover:  rgb(var(--red400));

    /* solid active */
    --oj-button-solid-chrome-bg-color-active: rgba(var(--red300),.16);
    --oj-button-solid-chrome-border-color-active: transparent;
    --oj-button-solid-chrome-text-color-active: var(--oj-core-text-color-primary);


    /* solid selected */
    --oj-button-solid-chrome-bg-color-selected: var(--red300);
    --oj-button-solid-chrome-border-color-selected: var(--oj-button-solid-chrome-border-color);
    --oj-button-solid-chrome-text-color-selected: var(--oj-button-solid-chrome-text-color);
  }

  .demo-button-green {
    /* Green color ramp */
    --background: 255, 255, 255;
    --green100: 181, 225, 178;
    --green200: 118, 200, 112;
    --green300: 47, 171, 38;
    --green400: 16, 137, 7;
    --green500: 12, 104, 5;
    --green600: 8, 71, 4;

    /* solid enabled */
    --oj-button-solid-chrome-bg-color: rgb(var(--green400));
    --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:  rgba(var(--green200),.12);
    --oj-button-solid-chrome-border-color-hover:  rgb(var(--green400));
    --oj-button-solid-chrome-text-color-hover:  rgb(var(--green300));

    /* solid active */
    --oj-button-solid-chrome-bg-color-active: rgba(var(--green200),.16);
    --oj-button-solid-chrome-border-color-active: transparent;
    --oj-button-solid-chrome-text-color-active: var(--oj-core-text-color-primary);


    /* solid selected */
    --oj-button-solid-chrome-bg-color-selected: var(--green200);
    --oj-button-solid-chrome-border-color-selected: var(--oj-button-solid-chrome-border-color);
    --oj-button-solid-chrome-text-color-selected: var(--oj-button-solid-chrome-text-color);
  }


  .demo-button-purple {
    /* Purple color ramp */
    --background: 255, 255, 255;
    --purple100: 230, 205, 241;
    --purple200: 209, 165, 230;
    --purple300: 188, 123, 218;
    --purple400: 165, 79, 206;
    --purple500: 139, 26, 191;
    --purple600: 98, 8, 140;

    /* solid enabled */
    --oj-button-solid-chrome-bg-color: rgb(var(--purple500));
    --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:  rgba(var(--purple300),.12);
    --oj-button-solid-chrome-border-color-hover:  rgb(var(--purple500));
    --oj-button-solid-chrome-text-color-hover:  rgb(var(--purple400));

    /* solid active */
    --oj-button-solid-chrome-bg-color-active: rgba(var(--purple300),.16);
    --oj-button-solid-chrome-border-color-active: transparent;
    --oj-button-solid-chrome-text-color-active: var(--oj-core-text-color-primary);


    /* solid selected */
    --oj-button-solid-chrome-bg-color-selected: var(--purple300);
    --oj-button-solid-chrome-border-color-selected: var(--oj-button-solid-chrome-border-color);
    --oj-button-solid-chrome-text-color-selected: var(--oj-button-solid-chrome-text-color);
  }

.demo-oracle-icon{
  width:137px; 
  height:18px;
  padding-right:4px}html[dir="rtl"] 
.demo-oracle-icon{padding-left:4px}
.demo-oracle-icon:before{display:inline}
.demo-oracle-icon:before{content:url("images/oracle_logo.svg")}html:not([dir="rtl"])

h1, h2, h3, h4, h5, h6 {
  color: rgb(16, 15, 14);
    font-family: inherit;
	  font-style: normal;
	    margin: 8px 0;
		  padding: 0 0 2px; }

.h1Style {
		    font-size: 2rem;
			  font-weight: 900;
			    line-height: 2.5rem; 
}

.h2Style {
				  font-size: 2rem;
				    font-weight: bold;
					  line-height: 2.5rem; 
}

.h3Style {
					    font-size: 2rem;
						  font-weight: lighter;
						    line-height: 2.5rem; 
}

.h4Style {
							  font-size: 1.5rem;
							    font-weight: 900;
								  line-height: 2rem; 
}

.h5Style {
								    font-size: 1.5rem;
									  font-weight: normal;
									    line-height: 2rem; 
}

.h6Style {
										  font-size: 1.25rem;
										    font-weight: normal;
											  line-height: 1.75rem; 
}

.setFocusRectangle{
    outline-width: 0;
}

.textSpacing {
	line-height: 1.5 !important; 
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

.link-emphasis {
  font-weight: 500;
  color: blue;
}

.hideSkipNav { 
  position: absolute;
  left: -1000px;
}

.hideSkipNav:focus {
  position: unset;
  left: 0px;
}