/******************************************************************************
Sprite Mixin
******************************************************************************/
/******************************************************************************
Extendible Sprite Class
******************************************************************************/
/* ========================================================================== Layout utilities ========================================================================== */
/** Float Right / Left */
.u-pullLeft { float: left !important; }

.u-pullRight { float: right !important; }

.u-alignTop { vertical-align: top !important; }

.u-alignMiddle { vertical-align: middle !important; }

.u-alignBaseline { vertical-align: baseline !important; }

.u-alignBottom { vertical-align: bottom !important; }

.u-hidden { display: none !important; }

.u-visible { visibility: visible !important; }

/* ========================================================================== Animation Utilities ========================================================================== */
.u-Animate-spin { -webkit-animation: u-animate-spin 2s infinite linear; animation: u-animate-spin 2s infinite linear; }

@-webkit-keyframes u-animate-spin { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); } }

@keyframes u-animate-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }

.visuallyhidden, .visuallyHidden, .hideMeButHearMe, .u-VisuallyHidden, .u-vh { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus, .u-VisuallyHidden.is-focusable:active, .u-VisuallyHidden.is-focusable:focus, .u-vh.is-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.u-DisplayNone { display: none; }

.u-Overlay { background-color: #000000; opacity: 0.15; left: 0; top: 0; width: 100%; height: 100%; }

.u-Overlay--quickEdit { position: fixed; z-index: 8000; }

.u-Overlay--processing { position: absolute; z-index: 1000; }

.u-Overlay--glass { position: fixed; background-color: transparent; opacity: 1; z-index: 1000; }

.u-textRight, .u-tR { text-align: right !important; }

.u-RTL .u-textRight, .u-RTL .u-tR { text-align: left !important; }

.u-textLeft, .u-tL { text-align: left !important; }

.u-RTL .u-textLeft, .u-RTL .u-tL { text-align: right !important; }

.u-textCenter, .u-tC { text-align: center !important; }

.u-textEnd, .u-tE { text-align: right !important; }

.u-RTL .u-textEnd, .u-RTL .u-tE { text-align: left !important; }

.u-textStart, .u-tS { text-align: left !important; }

.u-RTL .u-textStart, .u-RTL .u-tS { text-align: right !important; }

.u-textUpper { text-transform: uppercase; }

.u-textLower { text-transform: lowercase; }

.u-textInitCap { text-transform: capitalize; }

.u-fontWeightNormal, .u-fwNormal { font-weight: normal; }

.u-fixedFont { font-family: 'Menlo','Consolas',sans-serif; }

.u-nowrap { white-space: nowrap !important; }

.u-bold, .u-strong { font-weight: bold !important; }

.u-italics, .u-em { font-style: italic !important; }

.u-underline { text-decoration: underline !important; }

/* ========================================================================== Processing Spinner (loading animation) --- Used by several processes with in APEX to indicate that somethign is loading ========================================================================== */
.u-Processing { box-sizing: border-box; display: block; height: 64px; width: 64px; cursor: progress; position: absolute; left: 50%; margin-left: -32px; padding: 16px; background-color: rgba(0, 0, 0, 0.5); border-radius: 100%; z-index: 2000; *background: url(../img/u-Processing.gif) transparent no-repeat; *padding: 0; }

.u-Processing-spinner { display: block; width: 32px; height: 32px; font-family: "apex-5-icon-font" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: rgba(0, 0, 0, 0.5); -webkit-animation: u-animate-spin 1s infinite linear; animation: u-animate-spin 1s infinite linear; color: #FFF; *visibility: hidden; }

.u-Processing-spinner:before { font-size: 32px; content: "\e01e"; }

/* ========================================================================== Inline Spinner --- Often displayed next to a field indicating to indicate  that something is loading or being fetched ========================================================================== */
.u-Processing--inline { position: static; width: 24px; height: 24px; margin: 0 4px; padding: 4px; display: inline-block; vertical-align: top; *background: url(../img/u-Processing--small.gif) transparent no-repeat; }

.u-Processing--inline .u-Processing-spinner { width: 16px; height: 16px; }

.u-Processing--inline .u-Processing-spinner:before { font-size: 16px; }

/* comment ========================================================================== */
.u-Processing--cellRefresh { width: 24px; height: 24px; padding: 4px; display: block; background-color: rgba(0, 0, 0, 0.25); }

.u-Processing--cellRefresh .u-Processing-spinner { width: 16px; height: 16px; }

.u-Processing--cellRefresh .u-Processing-spinner:before { font-size: 16px; }

/* ========================================================================== Report Utility Class ========================================================================== */
.u-resetTable { border-collapse: collapse; table-layout: auto; border-spacing: 0; }

.u-Report { border-collapse: collapse; table-layout: auto; border-spacing: 0; }

.u-Report td.pagination { border-width: 0 !important; }

.u-Report .u-Report-header, .u-Report th { background-color: #F4F4F4; vertical-align: bottom; padding: 8px; color: #404040; font-weight: bold; -webkit-font-smoothing: antialiased; }

.u-Report th[scope="rowgroup"] { background-color: #FAFAFA; }

.u-Report th[scope="row"] { background-color: #fff; }

.u-Report td { padding: 4px 8px; color: #404040; transition: background-color .1s; background-color: #FFF; }

.u-Report tr:nth-child(even) td, .u-Report tr:nth-child(even) th[scope="row"] { background-color: #FAFAFA; }

.u-Report td, .u-Report th { border: 1px solid #E8E8E8; }

.u-Report--stretch { width: 100%; }

.u-Report--inline tr:first-child td, .u-Report--inline tr:first-child th { border-top-width: 0; }

.u-Report--inline tr:last-child td, .u-Report--inline tr:last-child th { border-bottom-width: 0; }

.u-Report--inline tr td:last-child, .u-Report--inline tr th:last-child { border-right-width: 0; }

.u-Report--inline tr td:first-child, .u-Report--inline tr th:first-child { border-left-width: 0; }

.u-Report--staticBG tr:nth-child(even) td, .u-Report--staticBG tr:nth-child(even) th[scope="row"] { background-color: #FFF; }

.u-Report--firstColLabel tr td:first-child { width: 40%; }

.u-Report-sort, .u-Report-sortHeading, .u-Report-sortIcon { display: inline-block; vertical-align: top; }

.u-Report-sortIcon { margin-left: 4px; }

/* Styles used for the Standard Look class ========================================================================== */
.u-Report--standardLook { font-size: 12px; line-height: 16px; vertical-align: top; }

.u-Report--standardLook th { padding: 8px 4px; }

.u-Report--standardLook td { padding: 4px; }

/* Styles used for the Standard Look class ========================================================================== */
.u-Report--dataLoad { font-size: 12px; line-height: 16px; vertical-align: top; }

.u-Report--dataLoad th { padding: 8px 4px; }

.u-Report--dataLoad td { padding: 4px; }

.u-Report--dataLoad th, .u-Report--dataLoad td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

.apex-no-scroll { overflow: hidden !important; width: 100%; }

.clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

/* Item Help Dialogs ========================================================================== */
#apex_popup_field_help:focus { outline: none; }

.apex-help-dialog { padding: 12px; }

.apex-help-dialog .a-Button { margin-top: 8px; }

.apex-help-dialog h2 { font-size: 16px; font-weight: bold; }

.apex-help-dialog h3 { font-size: 14px; font-weight: bold; }

.apex-help-dialog h4 { font-size: 12px; font-weight: bold; }

.apex-help-dialog p, .apex-help-dialog li { font-size: 12px; }

/* Built with APEX ========================================================================== */
.u-BuiltWithAPEX { display: inline-block; vertical-align: top; }

.u-BuiltWithAPEX .fa-heart { font-size: 10px; line-height: inherit; margin: 0 2px; transition: color 1s ease; }

.u-BuiltWithAPEX:hover .fa-heart { color: #FF0000; -webkit-animation: apexheartpulse 1s infinite ease; animation: apexheartpulse 1s infinite ease; }

@-webkit-keyframes apexheartpulse { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
  70% { -webkit-transform: scale(1.25); transform: scale(1.25); }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); } }

@keyframes apexheartpulse { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
  70% { -webkit-transform: scale(1.25); transform: scale(1.25); }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); } }