:root {
    --flex-blue-600: #0369B1;
    --flex-red-500: #da3224;
    --flex-yellow-400: #fbd10e;
    --flex-green-300: #54bc48;
    --flex-purple-300: #9176b5;
    --flex-coolGrey-000: #ffffff;
    --flex-coolGrey-100: #f3f7fa;
    --flex-coolGrey-900: #222222;
    --flex-warmGrey-000: #f7f7f7;
    --flex-warmGrey-100: #eaeaea;
    --flex-warmGrey-200: #d8d8d8;
    --flex-warmGrey-300: #cacaca;
    --flex-warmGrey-500: #aaacae;
    --flex-warmGrey-600: #898a8c;
    --flex-warmGrey-700: #707070;
    --flex-warmGrey-900: #303030;
    --color-table-header-bg: #fafafa;
    --color-table-row-hover-blue: #e5f0f7;
    --color-table-row-grey-hover: var(--flex-warmGrey-000);
    --color-button-blue-hover: #02548E;
    --color-button-white-hover: #e6f0f7;
    --color-button-red-hover: #da3224;
    --color-white: var(--flex-coolGrey-000);
    --color-text-black: var(--flex-coolGrey-900);
    --color-text-subtle: var(--flex-warmGrey-600);
    --color-text-grey: var(--flex-warmGrey-700);
    --color-text-blue: var(--flex-blue-600);
    --color-text-red: var(--flex-red-500);
    --color-text-low-confidence: #e15347;
    --color-ocr-vendor: #9747FF;
    --color-ocr-date: #46A33C;
    --color-ocr-amount: var(--flex-blue-600);
}

html { height: 100%; margin: 0; }
body { min-height: 100%; margin: 0; font-family: Helvetica, Arial, sans-serif; }
hr { border: 0; border-top: 1px solid var(--flex-warmGrey-200) }
_:-ms-fullscreen, :root body { height: 100%; }  /*ie11 workaround for flexbox/min-height bug*/

.Header { background-color: var(--flex-blue-600); }
.Header.Banner { height: 30px; padding: 20px 15px; background-size: auto 30px; background-image: url(/expensewire/Resources/graphics/expensewirelogo_white.png); background-position: 15px 20px; background-repeat: no-repeat; }
.Header .MenuButton { height: 20px; background-color: var(--flex-blue-600); border: medium none; padding: 0; }
.Header .MenuButton .Icon { width: 15px; display: inline-block; padding-left: 15px; }
.HeaderMenuDisplay { background-color: var(--color-white); position: absolute; z-index: 2; right: 30px; top: 55px; box-shadow: 5px 5px 5px -5px #000000; }
.HeaderMenuContent { padding: 20px; }
.HeaderToolTip { position: relative; display: inline-block; }
.HeaderToolTip .ToolTipText { visibility: hidden; width: 120px; background-color: var(--color-white); text-align: center; padding: 5px 0; position: absolute; z-index: 1; opacity: 0; transition: opacity 1s; top: 160%; left: 50%; margin-left: -60px; }
.HeaderToolTip .ToolTipText::after { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent var(--color-white) transparent; }
.HeaderToolTip:hover .ToolTipText { visibility: visible; opacity: 1; }

.HeaderTabs { background-color: var(--flex-blue-600); padding: 0 20px; }
.HeaderTabs .Tabs { overflow: hidden; }
.HeaderTabs .Tabs .Tab { height: 30px; padding: 0 20px; text-align: center; text-decoration: none; }
.HeaderTabs .Tabs .Tab.Selected { height: 27px; border-bottom: var(--flex-coolGrey-100) solid 3px; }
.HeaderTabs .ScrollButton { width: 30px; height: 30px; border: none; margin: 0; background-color: var(--flex-blue-600); background-repeat: no-repeat; background-size: 12px; }
.HeaderTabs .ScrollButton.Left { padding: 0 15px 0 0; background-position: top left; }
.HeaderTabs .ScrollButton.Right { padding: 0 0 0 15px; background-position: top right; }
.HeaderTabs .ScrollButton.Left.White { background-image: url(/expensewire/Resources/graphics/arrow_left_white.png); }
.HeaderTabs .ScrollButton.Right.White { background-image: url(/expensewire/Resources/graphics/arrow_right_white.png); }
.HeaderTabs .ScrollButton.Left.Gray { background-image: url(/expensewire/Resources/graphics/arrow_left_gray.png); }
.HeaderTabs .ScrollButton.Right.Gray { background-image: url(/expensewire/Resources/graphics/arrow_right_gray.png); }

.BodyWrapper { height: 100%; }
.Body { height: calc(100% - 30px); background-color: var(--flex-coolGrey-100); padding: 20px; }
.Body .Content { padding: 15px; background-color: var(--color-white); border: var(--flex-warmGrey-200) solid 1px; border-radius: 4px; }
.Body .Content .Narrow { width: 600px; }
.Body .Content .Wide { width: 920px; }
.Body .SidePanelPlaceHolder { width: 334px; }
.Body .Content.SidePanel { width: 300px; position: fixed; max-height: calc(100% - 71px); overflow-y: auto; overflow-x: hidden; }
.Body .Content.StretchedSidePanel { overflow-y: auto; overflow-x: hidden; }
.Body .FlexContent { background-color: var(--color-white); border: var(--flex-warmGrey-200) solid 1px; border-radius: 4px; }

.Footer { background-color: var(--flex-coolGrey-100); padding: 0 15px 5px 15px; }
.Footer .Seperator { border-top: var(--flex-warmGrey-200) solid 1px; padding-top: 5px; }

.Modal.Overlay { width: 100%; height: 100%; position: fixed; top: 0; background-color: rgba(0, 0, 0, 0.48); }
.Modal.Overlay .OuterContent { background-color: var(--color-white); max-height: calc(100% - 60px); max-width: calc(100% - 60px); }
.Modal.Overlay .OuterContent iframe { width: 100%; height: 100%; border: none; }
.Modal { height: 100%; background-color: var(--color-white); }
.Modal .StaticPadding { padding: 10px; }
.Modal .StaticPadding .ModalButton { width: 15px; height: 15px; padding: 0; margin-left: 10px; border: none; background-color: var(--color-white); background-repeat: no-repeat; background-size: 15px 15px; background-position: center; }
.Modal .StaticPadding .ModalButton.Help { background-image: url(/expensewire/Resources/graphics/help.png); }
.Modal .StaticPadding .ModalButton.Close { background-image: url(/expensewire/Resources/graphics/icon-flex-close.svg); cursor: pointer; }
.Modal .InnerContent { height: 100%; padding: 0 15px; overflow-y: auto; position: relative; }
.Modal .InnerContent .ModalRoot { min-height: 100%; }
.UploadReceipt [role="alert"], #ReceiptUploadRecovery [role="alert"] { font-size: 12px; font-weight: normal; padding-top: 0; outline: none; }
#ReceiptUploadRecovery .InnerContent { border-top: 1px solid var(--flex-warmGrey-200); border-bottom: 1px solid var(--flex-warmGrey-200); padding: 0 17px; }
#ReceiptUploadRecovery .FlexFooterPadding { padding: 12px 20px; }

.DocumentViewerSurface { position: relative; overflow: hidden; touch-action: auto; cursor: default; }
.DocumentViewerSurface.Pannable { touch-action: none; cursor: grab; }
.DocumentViewerSurface.Pannable.Dragging { cursor: grabbing; }
.DocumentViewerImage { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; max-width: none; max-height: none; object-fit: fill; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.DocumentToolbarButton { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; appearance: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.DocumentToolbarButton[disabled] { cursor: default; opacity: 0.35; }
.DocumentToolbarButton:focus-visible { outline: 2px solid var(--flex-blue-600); outline-offset: 2px; }
.DocumentLightboxOverlay { z-index: 4010; display: flex; flex-direction: column; padding: 80px; box-sizing: border-box; }
.DocumentLightboxToolbar { display: flex; align-self: center; align-items: center; gap: 10px; min-height: 30px; margin-top: 16px; padding: 8px 10px; background-color: var(--color-white); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32); }
.DocumentLightboxToolbar img { display: block; width: 20px; height: 20px; }
.DocumentToolbarButton img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.DocumentLightboxClose { position: absolute; top: 12px; right: 12px; z-index: 1; width: 32px; height: 32px; background-color: var(--flex-coolGrey-900); border-radius: 4px; }
.DocumentLightboxClose img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.DocumentLightboxSurface { flex: 1 1 auto; min-height: 0; background-color: var(--flex-coolGrey-900); border-radius: 4px; }
.ReceiptOcrImageOverlay { position: absolute; top: 50%; left: 50%; z-index: 1; overflow: visible; pointer-events: none; transform-origin: center; }
.ReceiptOcrImageOverlay.Hidden { display: none; }
.ReceiptOcrPolygon { pointer-events: all; cursor: help; }
.ReceiptOcrPolygon:focus { outline: none; stroke-width: 4; }
.ReceiptOcrTooltip { position: absolute; z-index: 3; max-width: 240px; padding: 8px 10px; border: 1px solid var(--flex-warmGrey-300); background: var(--color-white); color: var(--color-text-black); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font-size: 12px; line-height: 16px; pointer-events: none; }
.ReceiptOcrTooltipSection + .ReceiptOcrTooltipSection { margin-top: 8px; }
.ReceiptOcrTooltipFieldName { font-weight: bold; }
.ReceiptOcrTooltipValue { font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; }
.DocumentLightboxClose { z-index: 2; }
@media (min-resolution: 1.5dppx) {
    .DocumentLightboxToolbar { gap: 15px; min-height: 45px; margin-top: 24px; padding: 12px 15px; }
    .DocumentLightboxToolbar img { width: 30px; height: 30px; }
    .DocumentLightboxClose { top: 18px; right: 18px; width: 48px; height: 48px; }
    .DocumentLightboxClose img { width: 30px; height: 30px; }
}
@keyframes documentLightboxLoadingSpinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
.DocumentLightboxLoadingSpinner { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; background: center / contain no-repeat url("/expensewire/Resources/graphics/icon-flex-loading.svg"); animation: documentLightboxLoadingSpinner 2s linear infinite; }
.Gray10 { color: var(--color-text-grey); font-size: 10px; }
.Black12 { color: var(--color-text-black); font-size: 12px; }
.Gray12 { color: var(--color-text-grey); font-size: 12px; }
.Blue12 { color: var(--color-text-blue); font-size: 12px; }
.Black14 { color: var(--color-text-black); font-size: 14px; }
.Gray14 { color: var(--color-text-grey); font-size: 14px; }
.Blue14 { color: var(--color-text-blue); font-size: 14px; }
.Blue20 { color: var(--color-text-blue); font-size: 20px; }
.Black20 { color: var(--color-text-black); font-size: 20px; }
.White14 { color: var(--color-white); font-size: 14px; }
.Red14 { color: var(--color-text-red); font-size: 14px; }
.Red16 { color: var(--color-text-red); font-size: 16px; }
.Gray16 { color: var(--color-text-grey); font-size: 16px; }
.AlignCenter { text-align: center; }
.AlignRight { text-align: right; }
.Bold { font-weight: bold; }
.Pointer { cursor: pointer; }
.CursorDefault { cursor: default; }
.AutoCompleteId, .AutoCompleteInfo { font-size: 12px; }
.AutoCompleteUserName { font-size: 14px; }

.FormAction { margin-right: 10px; }
.Input { width: 100%; padding: 0; border: var(--flex-warmGrey-500) solid 1px;}
.InputReadOnly { width: 100%; padding: 0; border: none; -moz-appearance: none; background-color: var(--color-white); }
.Button { height: 34px; padding: 0 16px; font-size: 14px; border: none; border-radius: 3px; cursor: pointer; box-sizing: border-box; }
.Button.Blue { background-color: var(--flex-blue-600); color: var(--color-white); border: var(--flex-blue-600) solid 1px; }
.Button.Blue:hover { background-color: var(--color-button-blue-hover); text-decoration: none; }
.Button.ScanWithAI { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; }
.Button.ScanWithAI::before { width: 12px; height: 12px; background: url(/expensewire/Resources/graphics/icon-flex-sparkle-white.svg) center / contain no-repeat; content: ""; }
.Button.Blue.ccpabannerButton { margin-top: 0; width: unset; }
.Button.Gray { background-color: var(--flex-warmGrey-300); color: var(--color-white); border: var(--flex-warmGrey-300) solid 1px; }
.Button.White { background-color: var(--color-white); color: var(--flex-blue-600); border: var(--flex-warmGrey-500) solid 1px; }
.Button.White:hover { background-color: var(--color-button-white-hover); }
.Button.WhiteWithBlueText { background-color: var(--color-white); color: var(--flex-blue-600); border: var(--flex-warmGrey-500) solid 1px; }
.Button.RedOutline { background-color: var(--color-white); color: var(--color-text-red);  border: var(--color-text-red) solid 1px;}
.Button.RedOutline:hover { background-color: var(--color-text-red); color: var(--color-white); }
.Button.Lock { height: 20px; width: 20px; padding: 0; background-color: transparent; background-image: url(/expensewire/Resources/graphics/icon-flex-lock.svg); background-repeat: no-repeat; }
.Button.LockOpen { height: 20px; width: 20px; padding: 0; background-color: transparent; background-image: url(/expensewire/Resources/graphics/icon-flex-lock-open.svg); background-repeat: no-repeat; }

.Link { text-decoration: none; }
.Dropdown { width: 100%; padding: 0; border: var(--flex-warmGrey-500) solid 1px; }
.DropdownReadOnly { width: 100%; padding: 0; border: none; -moz-appearance: none; background-color: var(--color-white); }
.Checkbox { margin: 0; vertical-align: middle; }
.Seperator { border-top: var(--flex-warmGrey-200) solid 1px; }
.TextArea { width: 100%; padding: 0; border: var(--flex-warmGrey-500) solid 1px; resize: none; }
.Table { width: 100%; border-spacing: 0; }
.Table td { padding: 0; }
.Ellipses { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.TopSpacer { margin-top: 15px; }
.BottomSpacer { margin-bottom: 20px; }
.LargeBottomSpacer { margin-bottom: 25px; }
.DoubleLargeBottomSpacer { margin-bottom: 50px; }
.LeftSpacer { margin-left: 15px; }
.RightSpacerMD { margin-right: 10px; }
.RightSpacer { margin-right: 15px; }
.RightSpacerLG { margin-right: 20px; }
.SmallTopSpacer { margin-top: 5px; }
.MediumTopSpacer { margin-top: 20px; }
.LargeTopSpacer { margin-top: 25px; }
.XLTopSpacer { margin-top: 40px; }
.SmallBottomSpacer { margin-bottom: 5px; }
.SmallLeftSpacer { margin-left: 5px; }
.LargeLeftSpacer { margin-left: 25px; }
.SmallRightSpacer { margin-right: 5px; }
.LargeRightSpacer { margin-right: 25px; }
.RowSpacer { margin-top : 10px; }
.GapSM { gap: 10px; }
.Gap { gap: 20px; }
.Padding { padding: 20px; }
.PaddingLeft { padding-left: 20px; }
.PaddingRightXS {padding-right: 5px; }
.PaddingRight { padding-right: 20px; }
.PaddingTop { padding-top: 20px; }
.PaddingTopMD { padding-top: 15px; }
.PaddingBottom { padding-bottom: 20px; }
.PaddingBottomMD { padding-bottom: 15px; }

.Grid { width: calc(100% + 30px); border-spacing: 0; margin-left: -15px; margin-right: -15px; }
.Grid td { padding: 10px 0; }
.Grid td:first-child { padding-left: 15px; }
.Grid td:last-child { padding-right: 15px; }
.Grid .Button { width: 32px; height: 32px; padding: 0; background-repeat: no-repeat; background-position: center; background-color: transparent; }
.Grid .Button.Open { background-image: url(/expensewire/Resources/graphics/icon-flex-view.svg); }
.Grid .Button.Print { background-image: url(/expensewire/Resources/graphics/icon-flex-printer.svg); }
.Grid .Button.Policy.Green { background-image: url(/expensewire/Resources/graphics/icon-flex-policy-green.svg); margin-right: 5px; }
.Grid .Button.Policy.Yellow { background-image: url(/expensewire/Resources/graphics/icon-flex-policy-yellow.svg); margin-right: 5px; }
.Grid .Button.Policy.Red { background-image: url(/expensewire/Resources/graphics/icon-flex-policy-red.svg); margin-right: 5px; }
.Grid .Button.Receipt.Green { background-image: url(/expensewire/Resources/graphics/icon-flex-receipt-green.svg); }
.Grid .Button.Receipt.Yellow { background-image: url(/expensewire/Resources/graphics/icon-flex-receipt-yellow.svg); }
.Grid .Button.Receipt.Blue { background-image: url(/expensewire/Resources/graphics/icon-flex-receipt-blue.svg); border: none }
.Grid .Button.Blue.Receipt:hover, #Grid .Button.Blue.Receipt:hover { background-color: transparent; }
.Grid .Button.Receipt.Red { background-image: url(/expensewire/Resources/graphics/icon-flex-receipt-red.svg); }
.Grid .Button.Edit { background-image: url(/expensewire/Resources/graphics/icon-flex-edit.svg); width: 24px; }
.Grid .Button.Attach { background-image: url(/expensewire/Resources/graphics/icon-flex-attach.svg); }
.Grid .Button.Delete { background-image: url(/expensewire/Resources/graphics/icon-flex-delete.svg); }
.Grid .Button.Detach { background-image: url(/expensewire/Resources/graphics/icon-flex-detach.svg); }
.Grid .Button.Duplicate { background-image: url(/expensewire/Resources/graphics/icon-flex-duplicate.svg); }
.Grid .Button.Back { background-image: url(/expensewire/Resources/graphics/Arrow%20Left%20V2.png); }
.Grid .Button.View { background-image: url(/expensewire/Resources/graphics/icon-flex-view.svg); }
.Grid .Button.Drop { background-image: url(/expensewire/Resources/graphics/icon-flex-drop.svg); }
.Grid .Button.Download { background-image: url(/expensewire/Resources/graphics/icon-flex-download.svg); }
.Grid .Button.GreenPaperclip { background-image: url(/expensewire/Resources/graphics/icon-flex-attached.svg); cursor: default; }
.Grid .TdSeperator { padding: 0; }
.Grid .Seperator { margin: 0 -15px; }
.Grid .SelectedRow { background-color: #C0D9EB; }

.InlineMenu { position: absolute; top: 0; left: 0; padding: 15px; border: var(--flex-warmGrey-200) solid 1px; background-color: var(--color-white); box-shadow: 5px 5px 5px -5px #000000; min-width: 250px; }

.FlexMenuSelected { position: relative; }
.FlexMenuSelected::before { position: absolute; content: ''; display: block; top: 0; left: 0; height: 250px; width: 5px; background-color: var(--flex-blue-600); }
.FlexMenuSelected a { align-self: flex-start !important; height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 17px; }
.FlexSubMenuSelected { position: relative; }
.FlexSubMenuSelected::before { position: absolute; content: ''; display: block; top: 0; left: 0; height: 250px; width: 5px; background-color: var(--flex-blue-600); }
.FlexMenuNoOverflow { overflow: hidden; }

.HoverWindow { position: absolute; top: 0; left: 0; }
.HoverWindow .HoverWindowFrame { border: none; }
.HoverWindow .Rectangle { width: 300px; padding: 15px; border: var(--flex-warmGrey-200) solid 1px; background-color: var(--color-white); box-shadow: 5px 5px 5px -5px #000000; }
.HoverWindow .Triangle { width: 20px; height: 20px; border-left: var(--flex-warmGrey-200) solid 1px; border-bottom: var(--flex-warmGrey-200) solid 2px; background-color: var(--color-white); position: absolute; top: calc(50% - 10px); }
.HoverWindow .Triangle.Left { transform: rotate(45deg); left: -10px; }
.HoverWindow .Triangle.Right { transform: rotate(225deg); left: 322px; box-shadow: -5px 0px 5px -5px #000000; }

.FlexItem.ChromeFix_StretchOuter { position: relative; background-color: var(--flex-coolGrey-100); }
.FlexItem.ChromeFix_StretchOuter .ChromeFix_StretchInner { position: absolute; top:0; bottom:0; left:0; right:0; }
.FlexItem.IE11Fix_Overflow { width: 100%; }

.TextXS { font-size: 10px; }
.TextSM { font-size: 12px; }
.TextMD { font-size: 14px; }
.TextLG { font-size: 16px; }
.TextXL { font-size: 20px; }
.TextXXL { font-size: 24px; }

.LineHeightXXL { line-height: 24px; }
.NoWrap { white-space: nowrap; }
.Hidden { display: none; }

.TextBlack { color: var(--color-text-black); }
.TextWhite { color: var(--color-white); }
.TextGrey { color: var(--color-text-grey); }
.TextBlue { color: var(--color-text-blue); }
.TextRed { color: var(--color-text-red); }
.LowConfidence { color: var(--color-text-low-confidence); font-size: 8px; font-style: normal; font-weight: 400; line-height: 20px; }

a.TextBlue:hover { color: var(--color-text-blue); text-decoration: none; }

.FlexInput { width: 100%; height: 28px; color: var(--flex-warmGrey-900); font-size: 14px; padding: 5px 10px; border: var(--flex-warmGrey-500) solid 1px; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.FlexInput:focus { height: 28px; outline: none; padding: 4px 9px; border: 2px solid var(--flex-blue-600); }
.FlexInput:disabled { background-color: var(--flex-warmGrey-100) !important; cursor: default; color: var(--color-text-black) !important; opacity: 1; }
.FlexInputDisabled { background-color: var(--flex-warmGrey-100); cursor: default; }
select.FlexInput { padding: 5px 7px; appearance: none; background-image: url("/ExpenseWire/Resources/graphics/icon-flex-arrow-filled-down.svg"); background-repeat: no-repeat; background-position-x: calc(100% - 10px); background-position-y: 50%; padding-right: 35px; }
select.FlexInput:focus { padding: 4px 6px; background-position-x: calc(100% - 9px); }
select.FlexInputClear { padding: 5px 7px; appearance: none; background-image: url("/ExpenseWire/Resources/graphics/icon-flex-arrow-down-blue.svg"); background-repeat: no-repeat; background-position-x: calc(100% - 10px); background-position-y: 50%; padding-right: 35px; border: 0; cursor: pointer;}
select.FlexInputClear:focus { outline: none; }

.FlexError { color: var(--flex-red-500); font-size: 12px; padding-top: 20px;}

.FlexInputInline { height: 34px; }
.FlexInputInline:focus { height: 34px; }
.FlexInputCheckbox { transform: scale(1.25); cursor: pointer; }
.FlexInputCheckbox.NoCheckboxTransform { transform: none; height: 16.25px; width: 16.25px; } /*work around for transform stacking context issues*/
.FlexInputCheckbox:disabled { background-color: var(--flex-warmGrey-100) !important; cursor: default; color: var(--color-text-black) !important; opacity: 1; }
span.FlexInputCheckbox { transform: none; cursor: default; }
span.FlexInputCheckbox input { margin-right: 5px; margin-left: 5px; transform: scale(1.25); cursor: pointer; }

.FlexTextArea { width: 100%; height: 90px; color: var(--flex-warmGrey-900); font-size: 14px; padding: 5px 10px; border: var(--flex-warmGrey-500) solid 1px; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.FlexTextArea:focus { height: 90px; outline: none; padding: 4px 9px; border: 2px solid var(--flex-blue-600); }
.FlexTextArea:disabled { background-color: var(--flex-warmGrey-100) !important; cursor: default; color: var(--color-text-black) !important; opacity: 1; }
.FlexRequired { color: var(--flex-red-500); font-size: 14px; }

.FlexLabel { padding-right: 3px; vertical-align: middle; }
.FlexLabelTextarea {padding-right: 3px; vertical-align: baseline; padding-top: 7px; }
.FlexLabelDiv { display: flex !important; justify-content: flex-end; align-items: center; height: 28px; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.FlexBorderRounded { border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.FlexBorderRoundedTop { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.FlexBorderRoundedBottom { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.FlexBorderOutline { border: var(--flex-warmGrey-200) solid 1px; }
.FlexBorderTop { border-top: 1px solid var(--flex-warmGrey-200); }
.FlexBorderTop:first-of-type { border-top: none; }
.FlexBorderBottom { border-bottom: 1px solid var(--flex-warmGrey-200); }
.FlexHeaderPadding { padding: 14px 20px; }
.FlexFooterPadding { padding: 0 3px; }

.FlexIconClose { height: 100%; width: 15px; border: none; background-color: transparent; background-image: url("/ExpenseWire/Resources/graphics/icon-flex-close.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; }
.FlexIconMagnifier { height: 20px; width: 20px; border: none; margin-left: 10px; background-color: transparent; background-image: url("/ExpenseWire/Resources/graphics/icon-flex-magnifier.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.FlexIconAlertBlue { height: 20px; width: 20px; border: none; background-color: transparent; background-image: url("/ExpenseWire/Resources/graphics/icon-flex-alert-blue.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.FlexIconAlertRed:before { content: ''; display: inline-block; margin-right: 5px; height: 20px; width: 20px; border: none; background-color: transparent; background-image: url("/ExpenseWire/Resources/graphics/icon-flex-alert-red.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.FlexIconWarningYellow:before { content: ''; display: inline-block; margin-right: 5px; height: 20px; width: 20px; border: none; background-color: transparent; background-image: url("/ExpenseWire/Resources/graphics/icon-flex-warning-yellow.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.FlexIconArrowRightBlack { height: 14px; width: 8px; border: none; background-color: transparent; background-image: url("/ExpenseWire/Resources/graphics/icon-flex-arrow-right.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; }

.FlexCardContainer { background-color: var(--color-white); border: 1px solid var(--flex-warmGrey-200); border-radius: 4px; }
.FlexHeader { padding: 0 20px; border-bottom: 1px solid var(--flex-warmGrey-200); background-color: var(--color-white); border-top-left-radius: 4px; border-top-right-radius: 4px;}
.FlexFullWidth { width: 100%; }
.FlexTable { width: 100%; border-spacing: 0px; border-collapse: collapse; }
.FlexTableHeader { padding: 15px 20px; border-bottom: var(--flex-warmGrey-200); background-color: var(--color-table-header-bg); color: var(--flex-warmGrey-700); }
.FlexTableHeader .HeaderTextWrap { white-space: normal !important; }
.FlexTableHeader td { padding-top: 15px; padding-bottom: 15px; }
.FlexTableHeader td a { color: var(--flex-warmGrey-700); text-decoration: none; }
.FlexTableHeader td:first-child { padding-left: 20px; }
.FlexTableHeader td:last-child { padding-right: 20px; text-align: end; }
.FlexTable td:first-child { padding-left: 20px; }
.FlexTable td:last-child {padding-right: 20px; text-align: end; }
.FlexTable td:nth-child(3) { padding-top: 15px; padding-bottom: 15px; }
.FlexTable .FlexTableRow { border-bottom: 1px solid var(--flex-warmGrey-200); transition: 250ms linear; }
.FlexTable .FlexTableRow:last-of-type { border-bottom: none; }
.FlexTable .FlexRowDisabled { background-color: var(--color-table-row-grey-hover); }
.FlexTable .FlexTableRow.RowSelected { background-color: var(--color-table-row-hover-blue); } 
.FlexTableWrapper #TableDiv { padding: 0px; }

.FlexTable .Button { width: 30px; height: 30px; padding: 0; background-repeat: no-repeat; background-position: center; background-color: transparent; }
.FlexTable .Button.Open { background-image: url(/expensewire/Resources/graphics/icon-flex-folder-open.svg); }
.FlexTable .Button.Print { background-image: url(/expensewire/Resources/graphics/icon-flex-printer.svg); }
.FlexTable .Button.Policy.Green { background-image: url(/expensewire/Resources/graphics/icon-flex-policy-green.svg); }
.FlexTable .Button.Policy.Yellow { background-image: url(/expensewire/Resources/graphics/icon-flex-policy-yellow.svg); }
.FlexTable .Button.Policy.Red { background-image: url(/expensewire/Resources/graphics/icon-flex-policy-red.svg); }
.FlexTable .Button.Receipt.Green { background-image: url(/expensewire/Resources/graphics/icon-flex-receipt-green.svg); }
.FlexTable .Button.Receipt.Yellow { background-image: url(/expensewire/Resources/graphics/icon-flex-receipt-yellow.svg); }
.FlexTable .Button.Receipt.Blue { background-image: url(/expensewire/Resources/graphics/icon-flex-receipt-blue.svg); border: none }
.FlexTable .Button.Receipt.Red { background-image: url(/expensewire/Resources/graphics/icon-flex-receipt-red.svg); }
.FlexTable .Button.Edit { background-image: url(/expensewire/Resources/graphics/icon-flex-edit.svg); }
.FlexTable .Button.Attach { background-image: url(/expensewire/Resources/graphics/icon-flex-attach.svg); width: 32px; }
.FlexTable .Button.Delete { background-image: url(/expensewire/Resources/graphics/icon-flex-delete.svg); }
.FlexTable .Button.Detach { background-image: url(/expensewire/Resources/graphics/icon-flex-detach.svg); }
.FlexTable .Button.Duplicate { background-image: url(/expensewire/Resources/graphics/icon-flex-duplicate.svg); }
.FlexTable .Button.Back { background-image: url(/expensewire/Resources/graphics/Arrow%20Left%20V2.png); }
.FlexTable .Button.View { background-image: url(/expensewire/Resources/graphics/icon-flex-view.svg); }
.FlexTable .Button.Drop { background-image: url(/expensewire/Resources/graphics/icon-flex-drop.svg); }
.FlexTable .Button.Download { background-image: url(/expensewire/Resources/graphics/icon-flex-download.svg); }
.FlexTable .Button.GreenPaperclip { background-image: url(/expensewire/Resources/graphics/icon-flex-attached.svg); cursor: default; }

.FlexRow { background-color: var(--color-white); padding: 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: 250ms linear; text-decoration: none; }
.FlexRow:last-of-type { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}
.FlexRowHover:hover { background-color: var(--color-table-row-grey-hover); }
.FlexRowHoverBlue:hover { background-color: var(--color-table-row-hover-blue); }
.FlexLeftBorderAccent { width: 5px; background-color: var(--flex-blue-600); margin-right: 15px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.FlexFixedHeight { height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.FlexVerticalSeparator { display: flex; margin-right: 15px; margin-left: 15px; background-color: var(--flex-warmGrey-200); width: 1px; min-width: 1px; max-width: 1px; align-self: stretch; }