@charset "UTF-8";
/* main color for top bar and sidemenu base
/* #273847; #3a5063; #444; */
/* main highlighting color for headings, controls, etc */
/* base color for shading and shadow effects  */
/* #4c5985; #196cb0; #c85958; */
/* red */
/* #db574e; #d9534f; */
/* orange */
/* green */
/* green */
/* red */
/* #2ba135; */
/* sizing */
/* grid tables */
/* tabs */
/* required fields */
/* required input field bg */
/* validation field bg */
/* animations (true/false */
/* scrollbars */
/* sidebar menu */
/* #273847; #3a5063; #444; */
/* #4c5985; #196cb0; #187DAF; */
/* #db574e; #d9534f; */
/* orange */
/* green */
/* green */
/* red */
@import url("customize.css");
#reference-color-section {
	display: block;
	position: absolute;
	left: -100px;
}
#reference-color-section #primaryColor {
	background-color: var(--primary-color);
}
#reference-color-section #whiteColor {
	background-color: #fff;
}
#reference-color-section #blackColor {
	background-color: #000;
}
#reference-color-section #negativeColor {
	background-color: var(--negative-color);
}
#reference-color-section #attentionColor {
	background-color: var(--attention-color);
}
#reference-color-section #positiveColor {
	background-color: var(--positive-color);
}
#reference-color-section #importantColor {
	background-color: var(--important-color);
}
#reference-color-section #labelColor {
	background-color: #444;
}
#reference-color-section #gridBGColor {
	background-color: var(--grid-header-bg-color);
}
#reference-color-section #GUColor {
	background-color: #c02424;
}
#reference-color-section #sidebarMainColor {
	background: var(--sidebar-main-color);
}
#reference-color-section #sidebarHoverColor {
	background: var(--sidebar-hover-color);
}

/*method for toggling the transition*/
/*method for toggling the animation.*/
/*we can change font size using the variable*/
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.main-content {
	font-size: 11px !important;
	height: 100%;
	font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Header text */
.h1 {
	font-weight: 300;
	font-size: 19.8px !important;
	color: var(--important-color);
}

.h2 {
	font-weight: 300 !important;
	font-size: 16.5px !important;
	color: var(--blue-color) !important;
	padding: 14px 0 0 4px;
}

.header2 {
	font-weight: 300 !important;
	font-size: 16.5px !important;
	color: var(--blue-color) !important;
}

.header3 {
	font-weight: 400 !important;
	font-size: 14.3px !important;
}

.h3 {
	font-weight: 400;
	font-size: 12.1px !important;
}

p {
	font-size: 11px;
	font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Color text or icon */
.text-important {
	color: #187daf !important;
}

.text-attention {
	color: #e76b1b !important;
}

.text-positive {
	color: #309b27 !important;
}

.text-negative {
	color: #dc503c !important;
}

.icon-medium {
	font-size: 14px;
}

.text-positive-border {
	color: #309b27 !important;
	border-radius: 4px 4px 0px 0px;
	border-bottom: 1px solid #39b92f !important;
}
.text-positive-border:hover {
	background: #f5fcf5 !important;
	border-bottom: 3px solid #309b27 !important;
}
.text-positive-border:active {
	transform: translateY(0.5px);
}

.text-positive-border.active {
	border-bottom: 3px solid #309b27 !important;
}

.text-negative-border {
	color: #dc503c !important;
	border-radius: 4px 4px 0px 0px;
	border-bottom: 1px solid #e06553 !important;
}
.text-negative-border:hover {
	background: #fef8f7 !important;
	border-bottom: 3px solid #dc503c !important;
}
.text-negative-border:active {
	transform: translateY(0.5px);
}

.text-negative-border.active {
	border-bottom: 3px solid #dc503c !important;
}

/*this is the class we use for styling the header of the  section*/
.section-header {
	min-height: 21px;
	color: var(--subheader-font-color);
	font-size: 11.55px !important;
	display: flex;
	align-items: center;
}
.section-header button {
	color: var(--blue-color);
}

.section-header-margin {
	margin: 5px 0 5px 5px;
}

.section-container {
	border: 1px solid #e8e8e8;
	/*  #e8e8e8; */
	margin-bottom: 1px;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 4px 14px 2px #fafafa;
}

.section-container-notice-board {
	border: none;
	box-shadow: none;
	padding: 0;
}

.is-hidden {
	display: none;
}

.transparent {
	color: transparent;
}

.float-right {
	float: right;
}

.badge-status {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
}
.badge-status span {
	font-size: 8.8px !important;
	border-radius: 3px;
	padding: 1px 3px;
	margin: 0 2px 0 2px;
	color: #fff !important;
	transition: all 0.2s ease-in-out;
}
.badge-status span.pending-badge {
	background: var(--pending-color);
}
.badge-status span.alert-badge {
	background: #dc503c;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #cacaca;
	opacity: 1;
	/* Firefox */
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #cacaca;
}

::-ms-input-placeholder {
	/* Microsoft Edge */
	color: #cacaca;
}

select {
	font-size: 11;
}

/* width */
::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-width);
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
	background: var(--scrollbar-color);
}

/* Scrollbar Handle   */
::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-color);
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(150, 150, 150, 0.6);
	cursor: pointer;
}

.display-flex {
	display: flex;
}

.flex-align-center {
	align-items: center;
}

.main-container-interface {
	height: 100%;
}

i:focus {
	outline: 1px solid var(--focus-color) !important;
	border: none !important;
}

div:focus {
	outline: none !important;
	border: 1px solid var(--focus-color) !important;
}

input:focus,
button:focus,
a:focus,
span:focus {
	box-shadow: 0 0 2px var(--focus-color);
	border: 1px solid var(--focus-color) !important;
	outline: none !important;
}

.flex-start {
	justify-content: flex-start !important;
}

.flex-center {
	justify-content: center !important;
}

.flex-between {
	display: flex;
	justify-content: space-between !important;
	align-items: center;
	flex-grow: 1;
}

.cursor-default {
	cursor: default !important;
}

.cursor-pointer {
	cursor: pointer;
}

.space {
	margin: 0 2px !important;
}

.position-relative {
	position: relative;
}

.main-secion-common {
	flex-grow: 1;
}

.fade-enter {
	opacity: 0;
}

.fade-enter-active {
	transition: opacity 0.7s;
}

.fade-leave-active {
	transition: opacity 0.1s;
}

.fade-move {
	transition: transform 0.6s;
}

/* Animations to fade the snackbar in and out */
@keyframes fadein {
	from {
		top: 0;
		opacity: 0;
	}
	to {
		top: 50px;
		opacity: 1;
	}
}
@keyframes fadeout {
	from {
		top: 50px;
		opacity: 1;
	}
	to {
		top: 0;
		opacity: 0;
	}
}
/** Dropdown Animation **/
@keyframes nav-down {
	0% {
		height: 0px;
	}
	100% {
		height: 100px;
	}
}
/** Sub-Nav Sliding Animation **/
@keyframes nav-anim-left {
	0% {
		left: 100%;
	}
	100% {
		left: -3%;
	}
}
/** Dropdown Animation **/
@keyframes nav-down {
	0% {
		height: 0px;
	}
	100% {
		height: 100px;
	}
}
/** Sub-Nav Sliding Animation **/
@keyframes nav-anim-left {
	0% {
		left: 100%;
	}
	100% {
		left: -3%;
	}
}
@keyframes spin2 {
	0% {
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(45deg) scale(1.2);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}
@keyframes norecord {
	0% {
		opacity: 0;
	}
	75% {
		opacity: 2%;
	}
	100% {
		opacity: 1;
	}
}
@keyframes progressbar {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	/* 1 */
	-webkit-text-size-adjust: 100%;
	/* 2 */
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	/* 1 */
	font-size: 100%;
	/* 1 */
	line-height: 1.15;
	/* 1 */
	margin: 0;
	/* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	/* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	/* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	/* 1 */
	padding: 0;
	/* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	/* 1 */
	outline-offset: -2px;
	/* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	/* 1 */
	font: inherit;
	/* 2 */
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

.button-default {
	white-space: normal;
	padding: 0px 8px;
	border: 1px solid #ccc;
	background: linear-gradient(#fff, #f8f8f8);
	border-radius: 3px;
	color: #727272;
	font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 11px !important;
	margin: 2px 1px;
	cursor: pointer;
	min-height: 21px;
	min-width: 64px;
}
.button-default:hover {
	border-color: var(--control-active-color);
	background: #fff;
	color: var(--control-active-color);
	/* #287fa6; */
}
.button-default:active {
	transform: translateY(0.5px);
}

.button-disable-grid {
	background: transparent;
	border: none;
	outline: none;
	color: #727272;
}
.button-disable-grid:hover {
	background: transparent !important;
	border: none !important;
	outline: none;
	cursor: not-allowed !important;
	color: #727272 !important;
	text-decoration: none !important;
}

.button-primary {
	border: 1px solid var(--control-active-color);
	background: var(--control-active-color);
	color: #fff;
}
.button-primary:hover {
	border-color: var(--control-active-color);
	background: #fff;
	color: var(--control-active-color);
}
.button-primary:active {
	transform: translateY(0.5px);
}

.button-success {
	border: 1px solid var(--pending-color);
	background: var(--pending-color);
	color: #fff !important;
}
.button-success:hover {
	border: 1px solid var(--pending-color);
	background: #fff;
	color: #2d9325 !important;
}
.button-success:focus {
	outline: #309b27 auto 1px;
}
.button-success:active {
	transform: translateY(0.5px);
}

/*styling the button section for cancel and save button*/
.main-button-group {
	padding: 1px;
	display: flex;
	justify-content: flex-end;
	border: 0px solid #d1d1d1;
	align-items: center;
	justify-content: space-between;
}
.main-button-group.searchbar-exist {
	justify-content: space-between;
}

.button-delete:hover {
	border-color: #dc503c !important;
	background: #dc503c !important;
	color: #fff !important;
}
.button-delete:focus {
	outline: #dc503c auto 1px;
}
.button-delete:active {
	transform: translateY(0.5px);
}

.button-danger {
	border-color: #de5845 !important;
	background: #de5845 !important;
	color: #fff !important;
}
.button-danger:hover {
	border-color: #dc503c !important;
	background: #dc503c !important;
	color: #fff !important;
}

.icon-danger {
	text-align: center;
	color: #800;
	justify-items: center;
}

.button-disabled {
	border-color: #ebebeb;
	background: #f7f7f7;
	color: #ccc !important;
	cursor: not-allowed !important;
}
.button-disabled:hover {
	border-color: #ebebeb !important;
	background: #f7f7f7 !important;
	color: #ccc !important;
	text-decoration: none !important;
}

/*this is the button off*/
.button-off {
	/* #e3e3e3 */
	/* #bababa */
}
.button-off:i {
	color: #bababa;
}

.disable-toggle.button-on {
	cursor: not-allowed !important;
}
.disable-toggle.button-on:hover {
	color: #fff !important;
	background: var(--control-active-color) !important;
	border: 1px solid var(--control-active-color) !important;
}
.disable-toggle.button-on:active {
	transform: translateY(0.5px);
}

.disable-toggle.button-off {
	cursor: not-allowed !important;
}
.disable-toggle.button-off:hover {
	background: #fafafa !important;
	color: #bababa !important;
	border-color: #e3e3e3 !important;
}
.disable-toggle.button-off:active {
	transform: translateY(0.5px);
}

.button-label {
	border: none;
	outline: none;
	background: #fff;
}

.button-tranparent {
	background: transparent;
	cursor: pointer;
	height: 35px;
}

.grid-header-button {
	font-weight: 400;
	color: var(--grid-header-color);
}

.plus-icon {
	position: relative;
}
.plus-icon::after {
	font-family: "FontAwesome";
	content: "＋";
	font-size: 18px;
	position: absolute;
}

.button-save {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: 0px !important;
	min-width: 44px;
	padding-left: 14px;
	border-right-color: transparent;
}

.save-and-add-section {
	position: relative;
}
.save-and-add-section .button-save-new {
	min-width: auto !important;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: 0px !important;
	margin-right: 2px !important;
	border-left-color: transparent;
	padding: 0 5px !important;
}

.export-to-excel-button {
	min-width: 80px;
}

#error-page #error-icon {
	font-size: 33px !important;
	color: #187daf !important;
}
#error-page #static-error-message {
	display: none;
}

/**from the componetn*/
#error-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 30vh;
}
#error-page .error-icon {
	font-size: 33px !important;
	color: var(--important-color);
}
#error-page .static-error-message {
	font-size: 19.8px !important;
	color: var(--important-color);
	font-weight: 300;
	margin-bottom: 2rem;
}

.checkbox-container {
	display: block;
	position: relative;
	margin: 0 20px 6px 3px;
	cursor: pointer;
	font-size: 22px !important;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none !important;
	/* Internet Explorer/Edge */
	user-select: none;
	display: inline-block;
	min-height: 5px;
}
.checkbox-container label {
	cursor: pointer;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 4;
	top: 4;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 0.8rem;
	width: 0.8rem;
	background-color: #fff;
	border: 1px solid #d1d1d1;
	/* #333; */
	border-radius: 2px;
	margin-right: 5px;
	/* border-radius: 2px; */
}

.disabled-checkbox {
	border-color: #ebebeb;
	background: #f7f7f7;
	color: #ccc !important;
	cursor: not-allowed;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
	background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
	background-color: #fff;
}

.checkbox-container input:focus ~ .checkmark {
	border-color: var(--focus-color) !important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after,
checkmark-multi-select-readonly:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
	font-family: "FontAwesome";
	content: "";
	color: var(--important-color);
	font-size: 11px;
}

.checkbox-container .check-group-partial-checked:after {
	content: "";
	position: absolute;
	border: 0.21rem solid #000;
	top: 2px;
	left: 2px;
}

.checkbox-container .checkmark-multi-select-readonly:after {
	border-color: #000 !important;
	color: #000 !important;
}

.selected-checkbox {
	vertical-align: middle;
	margin-top: 6px;
}

.corss-icon {
	display: inline-block;
	font-family: "FontAwesome";
	content: "";
	font-size: 12px;
}

.checked-icon {
	display: inline-block;
	font-family: "FontAwesome";
	content: "";
	font-size: 12px;
}

.boolean-icon {
	font-weight: 900;
}

.input-combo-multi-select-container {
	position: relative;
}

.input-combo-selected-area {
	min-height: 21px;
	position: relative;
	max-width: 70vw;
	min-width: 115px;
	z-index: 20;
	color: #000;
	text-align: left;
	border: 1px solid #d1d1d1;
	padding: 3px 16px 3px 4px;
	display: flex;
	border-radius: 2px;
	align-items: center;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.input-combo-selected-area > div {
	margin-right: 2px;
}
.input-combo-selected-area i {
	position: absolute;
	font-size: 11px;
	right: 3px;
}

.input-combo-multi-select {
	min-width: calc(30vw - 2px);
	left: 1px;
	max-height: 250px !important;
	overflow: auto;
	transition: all ease 100ms;
}
.input-combo-multi-select label {
	flex-grow: 1;
}

.checkbox-container-multi-select-checkbox {
	margin-bottom: 8px !important;
}

.checkbox-container-multi-select-checkbox .checkmark:after {
	bottom: -4px;
}

.multi-select-list-readonly {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #d1d1d1;
	padding: 0.2rem;
	max-height: 150px;
	overflow: auto;
	border-radius: 2px;
	flex-grow: 1;
	margin: 3px 0;
	min-width: 30vw;
	min-height: 32px;
}

.input-combo-multi-select-all {
	border-bottom: 1px solid #e8e8e8;
}

.multi-select-checkbox-area-relative {
	position: relative !important;
	box-shadow: none !important;
	border: 1px solid #d1d1d1;
}

.multi-select-picker {
	cursor: pointer;
}

.fieldgroup-container {
	margin-left: 28px;
}

.fieldgroup-toggle-icon {
	font-size: 0.95rem !important;
	cursor: pointer;
	opacity: 0.8;
	min-width: 13px;
}

.fieldgroup-header-container {
	display: flex;
	align-items: flex-start;
	margin-top: 5px;
}
.fieldgroup-header-container label {
	margin-top: 1px;
}

/* Customize the label (the container-radio) */
.container-radio {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px !important;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none !important;
	/* Internet Explorer/Edge */
	user-select: none;
}

/* Hide the browser's default radio button */
.container-radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.container-radio .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-radio input:checked ~ .checkmark {
	background-color: #2196f3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.container-radio .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.container-radio .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.radio-button-container-main {
	display: flex;
	align-items: center;
	margin-top: 5px;
}

.radio-button-container-report {
	margin-right: 15px;
}

.input-for-report-radio {
	display: flex;
	margin-top: -2px;
}

.radio-button-container {
	margin-top: 5px;
}
.radio-button-container .radio-button-caption {
	font-family: inherit;
	font-size: inherit;
	margin-left: 3px;
	cursor: pointer;
}
.radio-button-container .radio-button-input {
	font-family: inherit;
	font-size: inherit;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: 2px;
}

.url-inteface-iframe {
	height: calc(100vh - 36px);
	width: calc(84% - 2px);
	margin-left: 2px;
	position: absolute;
}

.checkbox-select {
	height: 21px;
	position: relative;
	width: auto;
	min-width: 140px;
	z-index: 20;
	color: #555;
	text-align: left;
	border: 1px solid #d1d1d1;
	margin-right: 2px;
	padding-top: 2px;
	font-size: 11;
}
.checkbox-select i {
	font-size: 10px;
}

.checkbox-select ul {
	list-style: none;
}

@media only screen and (max-width: 600px) {
	.checkbox-select {
		margin: 100px auto 0 !important;
	}
}
.checkbox-select__trigger {
	background: #fff;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	margin-top: 2px 0 !important;
	cursor: pointer;
	padding: 0 2px !important;
	transition: all 0.4s ease;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none !important;
	/* Internet Explorer/Edge */
	user-select: none;
	flex-basis: 100%;
	min-width: 140px;
}

.checkbox-select__trigger.isActive i {
	transform: rotate(90deg);
}

.checkbox-select__title {
	font-size: 11px;
	flex: 1;
	letter-spacing: 1px;
	white-space: nowrap;
	overflow: hidden;
}

@media only screen and (max-width: 600px) {
	.checkbox-select__title {
		font-size: 11px;
	}
}
.checkbox-select__dropdown {
	background: #eee;
	position: absolute;
	left: -1px;
	right: -1px;
	border: 1px solid #d1d1d1;
}

.checkbox-select__dropdown:after,
.checkbox-select__dropdown:before {
	position: absolute;
	content: "";
	top: 0;
	display: block;
	z-index: 1;
}

.checkbox-select__dropdown:after {
	opacity: 0;
	background: #d1d1d1;
	left: -200px;
	width: 200px;
	background-color: #2980b9;
	transition: opacity 0.3s ease;
	animation: load 1.8s linear infinite;
}

.checkbox-select__dropdown:before {
	width: 100%;
	background-color: #000;
}

.checkbox-select__dropdown.activeSearch:after {
	opacity: 1;
}

.checkbox-select__dropdown .simplebar-scrollbar {
	right: 1px;
}

.checkbox-select__info {
	margin-top: 10px !important;
}

@media only screen and (max-width: 600px) {
	.checkbox-select__search-wrapp {
		padding: 10px 15px 5px !important;
	}
}
.checkbox-select__search-wrapp input {
	width: 100%;
	font-size: 11px;
	background: transparent;
}

.checkbox-select__search-wrapp ::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #b8b8b8;
	opacity: 1;
}

.checkbox-select__search-wrapp ::-moz-placeholder {
	/* Firefox 19+ */
	color: #b8b8b8;
	opacity: 1;
}

.checkbox-select__search-wrapp :-ms-input-placeholder {
	/* IE 10+ */
	color: #b8b8b8;
	opacity: 1;
}

.checkbox-select__search-wrapp :-moz-placeholder {
	/* Firefox 18- */
	color: #b8b8b8;
	opacity: 1;
}

.checkbox-select__col {
	display: flex;
	font-size: 9px;
	padding: 0 25px !important;
	justify-content: space-between;
	text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
	.checkbox-select__col {
		padding: 0 15px !important;
	}
}
.checkbox-select__select-all label {
	cursor: pointer;
}

.checkbox-select__select-all input {
	display: none;
}

.checkbox-select__filters-wrapp {
	padding: 5px 0px;
	max-height: 140px;
	overflow-y: auto;
	background: #fff;
}

.checkbox-select__check-wrapp {
	position: relative;
	padding: 1px 5px !important;
	margin-bottom: 2px !important;
}
.checkbox-select__check-wrapp:hover {
	background: var(--grid-header-bg-color);
}

@media only screen and (max-width: 600px) {
	.checkbox-select__check-wrapp {
		padding: 0 5px !important;
	}
}
.checkbox-select__check-wrapp input[type="checkbox"] {
	opacity: 0;
	position: absolute;
}

.checkbox-select__check-wrapp input[type="checkbox"] + label {
	position: relative;
	cursor: pointer;
	font-size: 11px;
	line-height: 14px;
	padding-left: 20px !important;
	display: inline-block;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none !important;
	/* Internet Explorer/Edge */
	user-select: none;
	transition: padding 0.25s ease !important;
}

.checkbox-select__check-wrapp input[type="checkbox"] + label:after {
	border: solid 1px #d1d1d1;
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	top: 0;
	left: 0;
	position: absolute;
	margin-bottom: 1px;
	border-radius: 2px;
}

.checkbox-select__check-wrapp input[type="checkbox"] + label:before {
	content: "";
	position: absolute;
	left: 3px;
	top: 1px;
	width: 4px;
	height: 7px;
	border: 1px solid var(--important-color);
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 0;
}

.checkbox-select__check-wrapp input[type="checkbox"]:checked + label:before {
	opacity: 1;
}

.checkbox-select__check-wrapp input[type="checkbox"]:focus + label:after {
	border-color: #5bbae8 !important;
}

@keyframes load {
	0% {
		left: -200px;
		width: 20%;
	}
	50% {
		width: 40%;
	}
	70% {
		width: 60%;
	}
	80% {
		left: 50%;
	}
	95% {
		left: 120%;
	}
	100% {
		left: 100%;
	}
}
.link {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 20px !important;
	z-index: 9999;
}

.link a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
}

.link .fa {
	font-size: 10px;
	margin-right: 8px !important;
	color: #fff;
}

.none-item {
	color: #808080;
	font-style: italic;
}

.main-component {
	height: 100%;
}

.fullSizeForModalInteface {
	flex-basis: 99.8% !important;
	margin-left: 0.2% !important;
	width: 99.8% !important;
}

.grid-arrow {
	font-size: 16.5px !important;
	padding-left: 2px !important;
}

.grid-arrow.asc {
	transform: rotate(-90deg) !important;
}

.grid-arrow.dsc {
	transform: rotate(90deg) !important;
}

#filterContainer {
	position: relative;
}

.fixed-height {
	height: 180px;
}

.filter-opening-icon {
	display: inline;
}

/*
this is the active class that show 
that we have set the filter for that column
*/
.activeFilter {
	color: #187daf !important;
	/* #085180 */
}
.activeFilter:hover {
	color: #187daf !important;
}
.activeFilter:active {
	transform: translateY(0.5px);
}

.sideBarFilter {
	color: #187daf !important;
	cursor: not-allowed;
}
.sideBarFilter:hover {
	color: #187daf !important;
	cursor: not-allowed !important;
}

.disabled-icon {
	color: #888 !important;
	cursor: default !important;
}
.disabled-icon:hover {
	border-color: #888 !important;
}

.filter-icon {
	color: #a8a8a8;
	font-size: 13.2px !important;
	height: 12px;
	padding: 1px;
	margin-right: 7px;
}
.filter-icon:hover {
	color: #187daf !important;
	cursor: pointer;
}
.filter-icon:active {
	transform: translateY(0.5px);
}

.filter-buttons {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gridFilter {
	padding: 5px;
	position: absolute;
	border-radius: 3px;
	border: 0.5px solid #dfdfdf;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	z-index: 100 !important;
	transform: scaleY(0);
	transform-origin: top;
	background: #fff;
}
.gridFilter.active {
	transform: scaleY(1);
	/* box-shadow: 5px 5px 5px $gray-color; */
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
.gridFilter .filter-operation-section {
	width: 100%;
	margin-bottom: 4px;
	display: flex;
	justify-content: space-between;
}

.rollup-section {
	margin: 4px 0;
}

.form-row-rollup-container {
	margin: 2px 0;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
	background: #fff;
	cursor: pointer;
	padding: 2px 2px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	min-height: 21px;
	/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
}
.accordion .active,
.accordion:hover {
	background: #f9f9f9;
}
.accordion i {
	padding: 1px 2px;
	margin-right: 4px;
}
.accordion i.active {
	transform: rotate(90deg);
}

/* Style the accordion panel. Note: hidden by default */
.accordion-panel {
	transform: scaleY(0);
	transform-origin: top;
	position: absolute;
}
.accordion-panel.active {
	transform: scaleY(1);
	position: relative;
}

.accordion-title {
	padding: 2px;
	cursor: pointer;
}
.accordion-title:focus {
	border: 1px solid #5bbae8;
}

.tsa-modal {
	z-index: 100;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
	display: flex;
	display: none;
	justify-content: center;
	align-items: center;
	/* Modal Content/Box */
	/* The Close Button */
}
.tsa-modal:not(:focus-within) {
	background-color: rgba(1, 0, 0, 0.4);
	transition: background-color 0.01s;
}
.tsa-modal.active {
	display: flex;
}
.tsa-modal.active .modal-content {
	max-width: 95vw;
}
.tsa-modal .picker-modal {
	width: 70%;
	height: 80%;
	max-height: 98vh !important;
	max-width: 70vw !important;
	min-height: 40vh !important;
}
.tsa-modal .interface-modal {
	width: 95vw;
	height: 95vh;
}
.tsa-modal .navigation-modal {
	width: 350px;
	height: 120px;
}
.tsa-modal .modal-content {
	background-color: #fefefe;
	/* 15% from the top and centered */
	border: 1px solid #888;
	box-shadow: 0px 23px 30px -20px rgba(0, 0, 0, 0.4);
	/* Could be more or less, depending on screen size */
}
.tsa-modal .modal-content .modal-iframe {
	width: 100%;
	height: calc(100% - 30px);
	margin: 0 auto;
}
.tsa-modal .modal-header {
	display: flex;
	justify-content: space-between;
	padding: 4px;
	align-items: center;
}
.tsa-modal .modal-header .modal-title {
	font-size: 14.3px !important;
}
.tsa-modal .modal-content-area {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.tsa-modal .close {
	color: #aaa;
	font-size: 17.6px !important;
	font-weight: bold;
}
.tsa-modal .close:hover,
.tsa-modal .close:focus {
	color: var(--focus-color);
	text-decoration: none;
	cursor: pointer;
}

.remove-modal {
	z-index: 6;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
	display: none;
	justify-content: center;
	align-items: center;
	/* Modal Content/Box */
}
.remove-modal:not(:focus-within) {
	background-color: rgba(1, 0, 0, 0.4);
	transition: background-color 0.01s;
}
.remove-modal.active {
	display: flex;
}
.remove-modal .delete-modal-content {
	width: 380px;
}
.remove-modal .delete-modal-content .delete-modal-main-area {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.remove-modal .delete-modal-content .delete-modal-main-area > div {
	margin-left: 20px;
	margin-top: 15px;
	margin-bottom: 0px;
	height: auto;
}
.remove-modal .tsa-modal-content {
	display: flex;
	position: absolute;
	z-index: 50;
	flex-direction: column;
	background-color: #fefefe;
	margin: auto;
	/* 15% from the top and centered */
	border: 1px solid #888;
	min-width: 335px;
	box-shadow: 0px 23px 30px -20px rgba(0, 0, 0, 0.4);
	min-height: 205px;
	text-align: center;
	padding: 2rem 2rem 0 2rem;
	max-height: 170px;
}
.remove-modal .tsa-modal-content p span {
	color: #dc503c;
}

.button-group {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	position: relative;
}

.remove-deactive-area {
	display: flex;
	align-items: center;
	height: 40px;
	margin: 20px 0 0 20px;
}
.remove-deactive-area .deleting-item-in-modal {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.remove-deactive-area label,
.remove-deactive-area select {
	margin-right: 3px;
}

.common-modal-area p {
	margin-top: 1rem;
	text-align: left;
	line-height: 1.6;
}

.modal-process-cip {
	text-align: left;
	line-height: 1.4;
}

.expiry-data-moadal-area {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-basis: 70px;
	line-height: 2;
}

.bold-label {
	font-weight: 600;
}

@keyframes modalAnim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes ModalContentAnim {
	0% {
		transform: translateX(-200%) rotate(-90deg);
		opacity: 0;
	}
	/* 50% {
      transform: translateX(-10%) rotate(4deg);
    } */
	100% {
		transform: translateX(0) rotate(0);
		opacity: 1;
	}
}
.navigation-modal-header {
	display: flex;
	justify-content: center;
	padding: 3px;
	align-items: center;
}
.navigation-modal-header .modal-title {
	font-size: 14.3px !important;
	margin-bottom: 10px;
}

#authentication-section iframe {
	height: 240px;
	width: 350px;
	background-color: #ffffff;
	border-radius: 2px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
	padding: 1rem;
	transform: translate(125px, -20vh);
}
@media screen and (max-height: 800px) {
	#authentication-section iframe {
		transform: translate(125px, -25vh);
	}
}
@media screen and (max-height: 600px) {
	#authentication-section iframe {
		transform: translate(125px, -30vh);
		height: 210px;
	}
}
@media screen and (max-height: 470px) {
	#authentication-section iframe {
		transform: translate(125px, 0);
		height: 210px;
	}
}

.close-modal-icon-container {
	position: relative;
}

.close-modal-icon {
	position: absolute;
	right: 6px;
	top: 6px;
	cursor: pointer;
	font-size: 16px !important;
	color: #727272;
	/* medium grey ($button-color) */
	border-radius: 3px;
	padding: 0px 4px 4px 4px;
}
.close-modal-icon .fa-close {
	color: transparent;
}
.close-modal-icon .fa-close::after {
	color: #727272;
	content: "✕";
	position: absolute;
	top: 3px;
	left: 4px;
}
.close-modal-icon:hover {
	background: #e0e0e0;
}

.navigation-modal-content {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
@media screen and (max-height: 500px) {
	.navigation-modal-content {
		margin-top: 5px;
	}
}

.close-modal-single {
	position: relative;
	right: 6px;
	top: 6px;
	cursor: pointer;
	font-size: 16px !important;
	color: #727272;
	/* medium grey ($button-color) */
	border-radius: 3px;
	padding: 0px 4px 4px 4px;
}
.close-modal-single .fa-close {
	color: transparent;
}
.close-modal-single .fa-close::after {
	color: #727272;
	content: "✕";
	position: absolute;
	top: 3px;
	left: 4px;
}
.close-modal-single:hover {
	background: #e0e0e0;
}

.business-loader {
	z-index: 100;
	border: 16px solid #f3f3f3;
	border-top: 16px solid var(--important-color);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	animation: spin 2s linear infinite;
	position: fixed;
	top: 40%;
	margin-left: auto;
	margin-right: auto;
	color: var(--important-color);
}

.loader-center-screen {
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
}

.loader-center-content {
	left: 50%;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	background: #555;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.spinner1:after {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	bottom: -2px;
	right: -2px;
	border-radius: 50%;
	border: 1px solid transparent;
	border-color: #187daf transparent;
	animation: spin2 1s linear infinite;
}

.spinner {
	height: 10px;
	width: 10px;
	border-radius: 50%;
	position: absolute;
	bottom: 0.25rem;
	left: 0.1rem;
}
.spinner:after {
	content: "";
	border: 4px solid #f3f3f3;
	border-top: 4px solid var(--important-color);
	border-radius: 50%;
	width: 9px;
	height: 9px;
	animation: spin 2s linear infinite;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: var(--important-color);
}

.select-spinner {
	top: 0.1rem;
	right: 0;
	z-index: 10;
}

.reload-select {
	position: absolute;
	left: -0.5rem;
	z-index: 10;
	top: -0.1rem;
}

.small-loader {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 9px;
	height: 9px;
	animation: spin 2s linear infinite;
	position: relative;
	top: 40%;
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
	margin-left: auto;
	margin-right: auto;
	color: #45a5d9;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden;
	background-color: #333;
	color: #fff;
	/* White text color */
	text-align: center;
	/* Centered text */
	border-radius: 2px;
	/* Rounded borders */
	padding: 8px 14px 8px 14px;
	/* Padding */
	position: fixed;
	z-index: 101;
	left: 50%;
	transform: translateX(-50%);
	top: 40px;
	/* box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.06); */
	/* don't apply shadow since there is an invisible snackbar on every save */
	/* Show the snackbar when clicking on a button (class added with JavaScript) */
}
#snackbar.show {
	visibility: visible;
	/* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
   */
}
#snackbar.error {
	color: #fff !important;
	background: #dc503c !important;
}
#snackbar.successful {
	background: #309b27 !important;
	color: #fff !important;
}
#snackbar.warning {
	background: #e76b1b !important;
	color: #fff !important;
}
#snackbar.hidden {
	background: transparent;
	color: transparent;
}
#snackbar .snackbar-message {
	display: block;
	word-wrap: break-word;
	text-align: left;
}
#snackbar i {
	margin-left: 10px;
	cursor: pointer;
}
#snackbar .close-section {
	position: absolute;
	top: 2px;
	right: 2px;
}

/* Style the tab */
.tab {
	overflow: hidden;
	margin: 0 2px -1px 0;
	padding: 0 10px 0 0;
	max-width: 98vw;
	border-bottom: 1px solid #e8e8e8;
	z-index: 300000;
}

/* Style the buttons that are used to open the tab content 
.tab .button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 10px;
  @include transition(all, .3s, ease-in-out);
  color: $white-color;
  background: #333;
  margin-right: 5.5px;
  @include fontSize($base-font-size);
  border: 1px solid #333;
  border-bottom: none;

} */
.tab .button {
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 6px 10px 3px 10px;
	color: var(--tab-main-color);
	background: none;
	margin-right: 5.5px;
	margin-top: 4px;
	font-size: 11.55px !important;
	border: none;
	border-bottom: 3px solid transparent;
}

/* Change background color of buttons on hover 
.tab .button:hover {
  background-color: $white-color;
  border: 1px solid var(--important-color);
  border-bottom: none;
  color: var(--important-color);
} */
.tab .button:hover {
	background: #f9f9f9;
	/* #f9f9f9; */
	border: none;
	border-bottom: 3px solid #9e9e9e;
	/* var(--important-color); */
	/* scale-color($important-color, $lightness:5%); */
	color: #5c5c5c;
	/* var(--important-color); */
	border-radius: 4px 4px 0px 0px;
}
.tab .button:hover:active {
	transform: translateY(0.5px);
}

.tab .button:active {
	transform: translateY(0.5px);
}

/* Create an active/current tablink class 
.tab .button.active {
  background-color: $white-color;
  color: var(--important-color);
  border: 1px solid $gray-color;
  border-bottom: none;
  cursor: default; 
} */
.tab .button.active {
	background-color: none;
	color: var(--tab-active-color);
	border-bottom: 3px solid var(--tab-active-color);
	cursor: default;
}
.tab .button.active.button:hover {
	background: none;
	color: var(--tab-active-color);
	border-bottom: 3px solid var(--tab-active-color);
	cursor: default;
}
.tab .button.active:active {
	transform: translateY(0.5px);
}

.tab .button:focus {
	border-top: 1px solid #5bbae8;
	border-left: 1px solid #5bbae8;
	border-right: 1px solid #5bbae8;
}

/*
.tab .button.disabled {
  opacity: .3;
  cursor: default;

  &.button:hover {
    color: $white-color;
    background: #333;
  } */
.tab .button.disabled {
	opacity: 0.3;
	cursor: default;
	border: none;
}
.tab .button.disabled.button:hover {
	background: none;
	cursor: default;
	border: none;
}

/* Style the tab content */
.tab-main-container {
	max-width: 100vw;
	scrollbar-width: thin;
	scrollbar-color: rgba(150, 150, 150, 0.4) var(--scrollbar-color);
	overflow-y: auto !important;
	overflow-x: hidden;
	transform-origin: top;
	max-height: calc(100vh - 145px);
}

.tabcontent {
	display: none;
	padding: 0px 0 2px 0px;
	margin: 0px 2px 5px 0;
	border-top: 1px solid #e8e8e8;
	/*  #e8e8e8; */
}

.section-header-tab-in-tab {
	min-height: var(--sub-tab-in-tab-header-top);
}

.bookmarkTab .button.active {
	margin-bottom: 24px;
}

.chipsContainer {
	max-height: 100px;
	overflow: auto;
	margin: 0 0 0 2px;
	border: 1px solid #d1d1d1;
	padding: 1px;
	min-height: 18px;
	min-width: 80px;
	display: flex;
	position: relative;
	flex-wrap: wrap;
	cursor: pointer;
}

/*start of chips section*/
.tsa-chip {
	align-items: center;
	min-height: 17px;
	padding: 1px !important;
	font-size: 11px !important;
	font-family: "Open Sans", "Segoe UI", "Verdana", "Arial", "helvetica", "sans-serif";
	margin: 2px 1px 2px 2px !important;
	border-radius: 3px !important;
	background-color: #eeeeee !important;
	position: relative !important;
}

.tsa-chip:hover .chip-tooltip {
	visibility: visible !important;
}

.tsa-chip i {
	/* background: #555 !important; */
	color: #333333 !important;
	padding: 1.6px 2px 1px 0px !important;
	margin: 0 1px;
	font-size: 13px !important;
}

.tsa-chip i.close-chip {
	cursor: pointer !important;
	background: #eeeeee !important;
	color: #c4c4c4 !important;
	font-size: 11px !important;
}

.chip-tooltip {
	visibility: hidden !important;
	text-align: left !important;
	/* border-radius : 2px!important;		 */
	transition: all 0.1s !important;
	position: fixed !important;
	z-index: 10 !important;
	padding: 3px 5px !important;
	height: auto !important;
	color: #fff !important;
	background-color: #333333 !important;
	border-color: #333333 !important;
	font-size: 11px !important;
	max-width: 200px !important;
}

.chips-container-label {
	margin: 15px 0 0 0;
}

#grid-top-section {
	display: flex;
	margin-right: 2px;
	align-items: center;
	justify-content: space-between;
}

.flex-space-between {
	justify-content: space-between;
}

#settingContainer {
	position: relative;
	display: flex;
	align-self: center;
	align-items: center;
	margin-bottom: 0.1rem;
}
#settingContainer i.resetFilter {
	transform: rotate(-30deg) translateY(-13px) translateX(-19px);
	/* @include fontSize(1.18 * $base-font-size); */
}
#settingContainer #grid-setting-area {
	margin: 0px 0 0px 20px;
	transform-origin: top left;
	border: 1px solid #dedede;
}
#settingContainer #grid-setting-area .grid-setting-checkbox-area {
	display: flex;
	justify-content: space-around;
	margin: 0 5px 2px 0;
	align-items: center;
}
#settingContainer .drag-drop-order {
	font-size: 11px !important;
	color: #ccc;
	float: right;
	visibility: hidden;
	cursor: pointer;
}

#add-new-form {
	margin: -10px 0 0 -120px;
	min-width: 150px;
	transform-origin: top right;
}
#add-new-form span:hover {
	color: #466077;
}

.add-new-form-item {
	padding-left: 4px;
	white-space: nowrap;
}
.add-new-form-item:hover {
	background: var(--grid-header-bg-color);
	cursor: pointer;
	color: #466077;
}

.setting-section-common {
	/* padding: 3px 2px; */
	line-height: 1.5;
	border-radius: 3px;
	/* border: 0.5px solid scale-color($gray-color, $lightness: 30%); */
	max-height: 50vh;
	overflow: auto;
	flex-wrap: wrap;
	flex-direction: column;
	position: absolute;
	background: #fff;
	transform: scale(0);
	z-index: 100;
	/* @include fontSize(1.1 * $base-font-size); */
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
.setting-section-common.active-edge {
	transform: scale(1) !important;
}
.setting-section-common.active {
	transform: scale(1);
	/* box-shadow: 5px 5px 5px $gray-color; */
}
.setting-section-common .column-section-header {
	background: #666;
	color: #fff;
	padding: 4px 4px;
	margin-bottom: 4px;
}
.setting-section-common label {
	cursor: pointer;
}

.grid-setting-area-item {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.grid-setting-area-item:hover {
	background: #e8e8e8;
	color: #466077;
}
.grid-setting-area-item:hover > i {
	visibility: visible;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 12px;
	float: right;
	margin: 2px 0 0 3px;
}

/* Hide default HTML checkbox */
.switch input {
	display: none;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #999;
}

.slider:before {
	position: absolute;
	content: "";
	height: 10px;
	width: 11px;
	top: 1px;
	left: 1px;
	background-color: white;
}

input:checked + .slider {
	background-color: var(--important-color);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--important-color);
}

input:checked + .slider:before {
	transform: translateX(7px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

#grid-grouping-area {
	margin: 0px 0 0 20px;
	transform-origin: top left;
	padding: 3px 2px;
}

/*this is the section for showing the grouping data in the DOM*/
.grouping-header {
	background: #666;
	display: inline-block;
	flex-basis: 10%;
	border-radius: 4px;
	border: 1px solid #fff;
	box-shadow: 0 0 5px gray;
}
.grouping-header div {
	background: #666;
	color: #fff;
}
.grouping-header label {
	color: #fff !important;
}

.GroupingDataTableHeader {
	background-color: #9e9e9e;
	color: #fff;
	font-weight: 600;
	padding: 2px 4px;
	display: flex;
	align-content: space-around;
	height: 16px;
	padding-left: 2px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 16px;
	display: flex;
	align-items: center;
}

#sidbar-section {
	position: relative;
	display: flex;
}
#sidbar-section #sidebar i {
	cursor: pointer;
}

.sidebar-container {
	height: 100vh;
	width: 16vw;
}

#sidebar {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none !important;
	/* Internet Explorer/Edge */
	user-select: none;
	z-index: 4;
	position: relative;
	height: 100vh;
	background: var(--sidebar-main-color) !important;
	padding-left: 0px;
	left: 0;
	/* #333; */
}
#sidebar button {
	color: #d1d1d1 !important;
}
#sidebar.absolute-position {
	position: absolute;
}
#sidebar ul {
	list-style: none;
	background: var(--sidebar-main-color);
	/* $label-font-color; */
	color: #d1d1d1;
	margin: 0;
	padding: 0;
	min-height: 25px;
}
#sidebar ul.active-item {
	background: #202c37;
	/* #333; */
	color: var(--attention-color);
}
#sidebar ul:first-child {
	min-height: calc(100vh - 35px) !important;
}
#sidebar ul:first-child > li {
	/*  #666; */
}
#sidebar ul:first-child > li:first-child {
	margin-top: 2px;
}
#sidebar ul li {
	position: relative;
}
#sidebar ul li.main-parent {
	background: var(--sidebar-parent-of-active-item) !important;
	/* #333; */
	padding-bottom: 0px;
	color: #fff !important;
	/* $white-color; */
}
#sidebar ul li.active > span {
	transform: rotate(90deg);
}
#sidebar ul li.selectedRow > button {
	background: var(--sidebar-active-color) !important;
	/* lighten($sidebar-main-color, 13%); */
	color: #fff !important;
}
#sidebar ul li.li-selected > button {
	background-color: var(--sidebar-hover-color);
}
#sidebar ul li.active-item-parent {
	color: #fff;
}
#sidebar ul li ul {
	transform: scale(0);
	display: none;
	padding-left: 18px;
}
#sidebar ul li ul.active {
	transform: scale(1);
	display: block;
}
#sidebar ul li ul.active > li:hover {
	color: #fff;
	cursor: pointer;
}
#sidebar ul li a,
#sidebar ul li button {
	background: transparent;
	outline: none;
	cursor: pointer;
	display: block;
	flex-grow: 1;
	width: 100%;
	text-align: left;
	padding: 7px 0 7px 3px;
	border: 1px solid transparent;
	color: #fff;
}
#sidebar ul li a.active-item,
#sidebar ul li button.active-item {
	color: #fff;
}
#sidebar ul li a:hover,
#sidebar ul li button:hover {
	color: #fff !important;
	transition: all 0.4s ease-in-out;
}
#sidebar ul li a.main-parent i,
#sidebar ul li button.main-parent i {
	transform: rotate(90deg);
}
#sidebar ul li a.active-item-parent,
#sidebar ul li button.active-item-parent {
	color: #fff;
}
#sidebar ul li.active > ul {
	transform: scale(1);
	display: block;
}
#sidebar ul i {
	padding: 4px 6px;
	right: 4px;
	top: 3px;
	position: absolute;
}
#sidebar ul i.active {
	transform: rotate(90deg);
	top: 3px;
}
#sidebar ul span {
	position: absolute;
	right: 10px;
	top: 8px;
}
#sidebar ul span.active {
	transform: rotate(90deg);
	top: 8px;
}
#sidebar .main-menu-item:hover {
	color: #fff;
	cursor: pointer;
}

/*this is the main section of the page*/
#main-section {
	flex-grow: 1;
}
#main-section.active {
	width: 100%;
}
#main-section.active .tsa-grid-container {
	width: 100vw !important;
}
#main-section.active .form-main-container {
	width: 100vw !important;
}
#main-section.remove-margin {
	margin-top: 0;
}

/*this is the pin icon that we use
for toggle the position of the section 
form absolute to static */
#pinIcon.active {
	transform: rotate(90deg);
}

.fade-enter {
	opacity: 0;
}

.hide-text {
	color: transparent;
	font-size: 1px;
}

.showPin {
	display: none;
}

.sidebar-ui-conainer {
	display: block;
}
.sidebar-ui-conainer.active {
	display: none;
}

.overflow-scroll {
	max-height: calc(100vh - 35px);
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(150, 150, 150, 0.4) var(--scrollbar-color);
}

.sidebar-li {
	position: relative;
}

.sidebar-narrative {
	position: absolute;
	color: #444;
	z-index: 210;
	font-size: 9.9px !important;
	font-weight: 500;
	padding: 5px;
	display: flex;
	transform: scaleY(0);
	margin-top: 1px;
	border-radius: 4px;
	/* 4px; */
	text-align: left;
	/* center; */
	transition: transform 0.2s ease-in-out;
	max-width: 250px;
	word-break: break-word;
	line-height: 18px;
	white-space: normal;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
	background: #f8f8f8;
	color: #6f6f6f;
	border: 0.5px solid #e7e7e7;
	padding: 0.2rem;
	z-index: 1100;
	left: 40px;
	top: 22px;
	transform: scaleY(1);
	transition-delay: 300ms;
	transform: rotateX(-90deg);
}

.sidebar-narrative-show {
	transform: rotateX(0deg);
}

#sidebar-resize-handler {
	color: #fff;
	position: absolute;
	right: -3px;
	top: -35px;
	height: 100vh;
	cursor: col-resize;
	border: 2px solid transparent;
	z-index: 200;
	transition: all ease-in-out 0.35s;
}
#sidebar-resize-handler:hover {
	border: 2px solid var(--sidebar-focus-color);
}

.stop-resize {
	cursor: default !important;
}

.sidebar-resizing-active {
	border: 2px solid var(----sidebar-focus-color) !important;
}

.content-full-page {
	width: 99vw i !important;
}

#topSectionContainer {
	display: flex;
	align-content: space-between;
	font-size: 14.3px !important;
	font-weight: 200;
	width: 100vw;
}
#topSectionContainer #topSectionSidebar {
	background: var(--toolbar-color);
	/* darken($primary-color, 10%); */
	/* #333; */
	color: #fff;
	padding: 7px 0 7px 0;
	width: 16vw;
	position: relative;
	display: flex;
	justify-content: space-between;
}
#topSectionContainer #topSectionSidebar i {
	margin: 0 10px;
}
#topSectionContainer #topSectionTop {
	background: var(--toolbar-color);
	/* darken($primary-color, 10%); */
	/* #333; */
	color: #fff;
	flex-grow: 1;
	margin-left: 2px;
	padding: 7px 0 7px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#topSectionContainer #topSectionTop .navbar-target-name {
	cursor: pointer;
}
#topSectionContainer #topSectionTop .navbar-target-name:hover {
	/* color: lighten($primary-color, 50%); /* green-color; */
	text-decoration: underline;
}
#topSectionContainer i {
	margin-right: 10px;
	cursor: pointer;
}

.functional-section {
	display: flex;
	justify-content: flex-end;
}

#authentication-details {
	font-size: 11px !important;
	transform-origin: top right;
	margin: -6px 0 0 -55px;
}

#top-logo-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.tsa-logo {
	width: 80px;
	height: auto;
	margin-right: 6px;
}

.tooltip-section {
	position: fixed;
	color: #444;
	z-index: 210;
	font-size: 9.9px !important;
	font-weight: 500;
	padding: 5px;
	display: flex;
	transform: scaleY(0);
	margin-top: 1px;
	border-radius: 4px;
	/* 4px; */
	text-align: left;
	/* center; */
	transition: transform 0.2s ease-in-out;
	max-width: 250px;
	word-break: break-word;
	line-height: 18px;
	white-space: normal;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
	/*add the class for change the background and color 
  depend on the  color of the content area*/
}
.tooltip-section.light-tooltip {
	background: #f8f8f8;
	color: #6f6f6f;
	border: 0.5px solid #e7e7e7;
}
.tooltip-section.dark-tooltip {
	background: #f8f8f8;
	color: #6f6f6f;
	border: 0.5px solid #e7e7e7;
}
.tooltip-section.mid-left {
	margin-left: -100px;
}
.tooltip-section.left {
	margin-left: -50px;
}
.tooltip-section:hover {
	transform: scaleY(0) !important;
}

/*this is the section for styling the 
  area that we want to show the tooltip after hovering*/
.tooltip-area {
	display: inline-block;
	position: relative;
}
.tooltip-area:hover .tooltip-section {
	transform: scaleY(1) translateX(6px);
}

.add-item {
	position: relative;
	z-index: -10;
}

.grid-search-section {
	display: flex;
	border-radius: 2px;
}
.grid-search-section select {
	-webkit-border-radius: 0px;
	border: 1px solid var(--important-color);
	border-left: none;
	border-right: none;
	background: #f6f6f6;
	color: #727272;
	font-weight: 400;
	margin-left: -1px;
}
.grid-search-section select:focus {
	border-left: none !important;
	border-right: none !important;
}

.search-control {
	height: 21px;
	border-radius: 3px 0 0 3px;
	border: 1px solid var(--important-color);
	border-right: none;
	font-family: inherit;
	font-size: inherit;
	padding: 0 2px 0 2px;
}

.findVaue {
	position: relative;
}

.resetFind {
	position: absolute;
	top: 2px;
	right: 2px;
	cursor: pointer;
}

.from-searchbar-section {
	display: flex;
	align-items: center;
	margin-left: 0.5rem;
}

.searching-label {
	color: #444;
	font-weight: 400;
	white-space: nowrap;
	font-size: inherit;
	font-family: inherit;
	margin-right: 2px;
}

.icon-container {
	white-space: normal;
	word-wrap: break-word;
	vertical-align: middle;
	padding: 2px 2px;
	border: 1px solid #ccc;
	background: linear-gradient(#fff, #f8f8f8);
	border-radius: 3px;
	color: #8d8d8d;
	margin: 0 2px 0 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	height: 21px;
	min-width: 33px;
}
.icon-container:hover {
	border-color: var(--important-color);
	background: #fff;
	color: var(--important-color);
	/* #287fa6; */
}
.icon-container:active {
	transform: translateY(0.5px);
}
.icon-container.disable {
	cursor: not-allowed;
	border-color: #ebebeb;
	background: #f7f7f7;
	color: #ccc !important;
}
.icon-container.disable:hover {
	border-color: #ebebeb !important;
	background: #f7f7f7 !important;
	color: #ccc !important;
}

.icon-navigation {
	font-size: 0.8rem;
}

.search-icon {
	background: var(--control-active-color);
	color: #fff;
	border: 1px solid var(--control-active-color);
	border-radius: 0 3px 3px 0;
}
.search-icon:hover {
	background: #fff;
	color: var(--control-active-color);
	border-color: var(--control-active-color);
}
.search-icon:active {
	transform: translateY(0.5px);
}

.autocomplete {
	/*the container must be positioned relative:*/
	font-size: 11;
	position: relative;
	display: inline-block;
}

.autocomplete-input {
	width: 200px;
	border-color: var(--important-color);
}

#autocomplete-list {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: non;
	border-top: non;
	z-index: 99;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

.autocomplete-items {
	font-size: 11;
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 2;
}

.autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
	/*when hovering an item:*/
	background-color: #e9e9e9;
}

.autocomplete-active {
	/*when navigating through the items using the arrow keys:*/
	background-color: DodgerBlue !important;
	color: #ffffff;
}

/*start styling the right click section*/
.right-click-menu {
	background: #fff;
	border: 1px solid #dedede;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
	color: #333;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0px;
	position: absolute;
	z-index: 99999999 !important;
	min-width: 150px;
}

.right-click-menu-sidebar {
	background: #3c5367 !important;
	box-shadow: 0px 2px 5px #d1d1d1 !important;
	border: 1px solid #9c9292 !important;
	color: #d1d1d1 !important;
}
.right-click-menu-sidebar li {
	margin: 0 !important;
}
.right-click-menu-sidebar li:hover {
	background: #466077 !important;
}
.right-click-menu-sidebar .separator {
	border-top: 1px inset #d1d1d1 !important;
}

.right-click-menu li {
	padding: 4px;
	cursor: pointer;
}

.right-click-menu li:hover {
	background: var(--grid-header-bg-color);
}

.separator {
	border-top: 1px inset rgba(0, 0, 0, 0.1);
}

/*end styling the right click section*/
.favourite {
	font-size: 1rem;
	padding-top: 2px;
}

.bookmark-input-contaioner {
	margin: 10px 0 20px 0;
}

.bookmark-conatiner {
	overflow: auto;
	width: 100%;
	max-height: calc(75vh - 190px);
	min-height: calc(75vh - 190px);
}

.bookmark-modal {
	width: 500px;
	height: 75vh;
	display: flex;
	flex-direction: column;
}
@media (max-height: 700px) {
	.bookmark-modal {
		max-height: 80vh;
	}
}

.bookmark-label-section {
	text-align: left;
	flex-basis: 50px;
}

.bookmark-input-section {
	flex-basis: 90%;
	padding-right: 2px;
}
.bookmark-input-section .input-control {
	width: 100%;
}

.bookmark-button-area {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-basis: 12%;
}

#bookamrkbar {
	z-index: 200;
	display: none;
	display: inline-block;
	background: #fff;
	padding-left: 0px;
	left: 0;
	border-bottom: 1px solid var(--grid-even-color);
	/* #333; */
}
#bookamrkbar.absolute-position {
	position: absolute;
}
#bookamrkbar ul {
	list-style: none;
	background: #fff;
	/* $label-font-color; */
	color: var(--primary-color);
	margin: 0;
	padding: 0;
	min-height: 25px;
}
#bookamrkbar ul.active-item {
	background: #e6e6e6;
	/* #333; */
	color: var(--attention-color);
}
#bookamrkbar ul:first-child button {
	padding-left: 10px;
}
#bookamrkbar ul:first-child > li {
	/*  #666; */
}
#bookamrkbar ul .test341 {
	padding: 7px 0 0px 0px;
	margin: 5px 0 0px 2px;
}
#bookamrkbar ul li {
	position: relative;
	display: block;
	height: 30px;
}
#bookamrkbar ul li.main-parent {
	/* #333; */
	padding-bottom: 0px;
	color: #334657 !important;
	/* $white-color; */
}
#bookamrkbar ul li.active i {
	transform: rotate(90deg);
}
#bookamrkbar ul li.selectedRow > button {
	background: var(--sidebar-active-color) !important;
	border-radius: 0px;
	color: #fff !important;
}
#bookamrkbar ul li.selectedRow > i {
	color: #fff;
}
#bookamrkbar ul li.active-item-parent {
	color: var(--primary-color);
}
#bookamrkbar ul li ul {
	transform: scale(0);
	display: none;
	padding-left: 18px;
}
#bookamrkbar ul li ul.active {
	transform: scale(1);
	display: block;
}
#bookamrkbar ul li ul.active > li:hover {
	cursor: pointer;
}
#bookamrkbar ul li .bookmark-newfolder-input {
	height: 100%;
	display: flex;
	align-items: center;
}
#bookamrkbar ul li .bookmark-newfolder-input input {
	margin-left: 3px;
}
#bookamrkbar ul li button {
	cursor: pointer;
	display: block;
	padding: 7px 0 7px 3px;
	border: 1px solid transparent;
	text-align: left;
	width: 100%;
	height: 100%;
	background: #fff;
}
#bookamrkbar ul li button:hover {
	background-color: var(--grid-even-color);
}
#bookamrkbar ul li button.active-item {
	color: #fff;
}
#bookamrkbar ul li button.main-parent i {
	transform: rotate(90deg);
}
#bookamrkbar ul li button.active-item-parent {
	color: #fff;
}
#bookamrkbar ul li.active > ul {
	transform: scale(1);
	display: block;
}
#bookamrkbar ul i {
	left: 3px;
	position: absolute;
	cursor: pointer;
	top: 10px;
}
#bookamrkbar ul i.active {
	transform: rotate(90deg);
}

.bookmark-folder-empty:hover {
	cursor: not-allowed !important;
}
.bookmark-folder-empty span:hover,
.bookmark-folder-empty button:hover {
	cursor: not-allowed !important;
}

.bookmark-insert-mode {
	margin-left: -18px !important;
}

.notice-section {
	border: 0px solid #d1d1d1;
	padding: 2px 2px 0 2px;
	border-top: none;
}

.notice-item {
	color: #fff;
	margin-bottom: 3px;
	padding: 4px;
	display: flex;
	justify-content: space-between;
	border-radius: 3px;
	width: calc(100% + 4px);
	margin-left: -2px;
}

.attention {
	background: var(--attention-color) !important;
	color: #fff !important;
}

.attention-even {
	background: #bb5514 !important;
	color: #fff !important;
}

.important {
	background: var(--important-color);
}

.attention {
	background: var(--attention-color);
}

.positive {
	background: var(--positive-color);
}

.negative {
	background: #dc503c;
}

.tsa-date-container {
	display: flex;
	justify-content: flex-end;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none !important;
	/* Internet Explorer/Edge */
	user-select: none;
}

.tsa-date-picker {
	color: 11;
	width: 210px;
	max-height: 236px;
	background: #fff;
	/* var(--highlight-color); */
	padding: 2px;
	position: fixed;
	z-index: 100;
	transform: scaleY(1);
	transform-origin: top;
	border-radius: 3px !important;
	/* border: 1px solid #ccc; */
	border: 0.5px solid #dfdfdf;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
.tsa-date-picker.active {
	transform: scaleY(1);
}
.tsa-date-picker #month-year-section {
	display: flex;
	justify-content: space-between;
	margin: 1px;
	color: var(--important-color);
	font-weight: 600;
	background: #f0f0f0;
	border: 1px solid #f0f0f0;
	padding: 2px 1px;
	align-items: center;
	cursor: default;
}
.tsa-date-picker #month-year-section i {
	cursor: pointer;
}
.tsa-date-picker .month-days {
	display: flex;
	width: 210px;
	flex-wrap: wrap;
	margin-bottom: 3px;
}
.tsa-date-picker .month-day {
	padding: 1px 4px;
	margin: 2px 1px;
	text-align: center;
	width: 27px;
	color: #727272;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 1px;
	font-size: 11px !important;
	cursor: pointer;
}
.tsa-date-picker .month-day:hover {
	border-color: var(--important-color);
	background: #fff;
	color: var(--important-color);
}
.tsa-date-picker .month-day:active {
	box-shadow: 0 0 2px #31a8e3;
	transform: translateY(0.5px);
}
.tsa-date-picker .hide-day {
	opacity: 0;
	cursor: default;
}
.tsa-date-picker .hide-day:hover {
	opacity: 0;
}
.tsa-date-picker .current-day {
	border: 1px solid #a1d7f2;
	background: #edf7fd;
	color: #727272;
}
.tsa-date-picker .current-day:hover {
	border-color: var(--important-color);
	background: #fff;
	color: var(--important-color);
}
.tsa-date-picker .selected-day {
	background: var(--important-color);
	color: #fff;
}
.tsa-date-picker .selected-day:hover {
	background: #156d99;
	color: #fff;
}
.tsa-date-picker .week-days {
	display: flex;
	flex-wrap: wrap;
	margin: 3px 0px;
}
.tsa-date-picker .week-days .week-day {
	padding: 1px 4px;
	margin: 2px 1px;
	text-align: center;
	width: 27px;
	color: #444;
	font-size: 11px !important;
	font-weight: 400;
	cursor: default;
}

.tsa-date-input {
	display: flex;
	align-items: center;
}

.date-picker-button {
	height: 21px;
	margin-left: 0;
	font-size: 11px !important;
	border: 1px solid #d1d1d1;
	border-radius: 0px 2px 2px 0px;
	color: #727272;
	width: 20px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
}
.date-picker-button i {
	margin-top: 2px;
	color: #000;
}
.date-picker-button:hover {
	border-color: var(--important-color);
	background: #fff;
	color: var(--important-color);
	/* #287fa6; */
}
.date-picker-button:active {
	transform: translateY(0.5px);
}

.date-picker-month {
	/* min-width: 60px; */
	text-align: right;
	padding: 0 2px 0 0;
	cursor: pointer;
}
.date-picker-month:hover {
	text-decoration: underline;
}

.date-picker-year {
	cursor: pointer;
	text-align: left;
	padding: 0 0 0 2px;
}
.date-picker-year:hover {
	text-decoration: underline;
}

.month-year-section {
	display: flex;
	justify-content: flex-end;
	flex-basis: 100%;
	background: #f0f0f0;
	border: 1px solid #f0f0f0;
	color: #fff;
}

.year-month {
	padding: 4px;
	margin: 2px;
	text-align: center;
	flex-basis: 65px;
	color: #727272;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 1px;
	font-size: 11px !important;
	cursor: pointer;
}
.year-month:hover {
	border-color: var(--important-color);
	background: #fff;
	color: var(--important-color);
}
.year-month:active {
	box-shadow: 0 0 2px #31a8e3;
	transform: translateY(0.5px);
}

.toggle-section {
	transform: scaleX(0);
	max-height: 0;
}
.toggle-section.active {
	transform: scaleX(1);
	max-height: 186px;
}

.current-empty-section {
	display: flex;
	justify-content: space-around;
	/* this is for the required date */
}
.current-empty-section button {
	background: linear-gradient(#fff, #f8f8f8);
	border-radius: 3px;
	border: 1px solid #ccc;
	color: #727272;
	margin: 2px 1px;
	flex-basis: 49%;
	text-align: center;
	cursor: pointer;
	height: 21px;
	min-width: 64px;
}
.current-empty-section button:hover {
	border-color: var(--important-color);
	background: #fff;
	color: var(--important-color);
	/* #287fa6; */
}
.current-empty-section button:active {
	transform: translateY(0.5px);
}
.current-empty-section .empty-disabled {
	/* color: $gray-color; */
	border-color: #ebebeb;
	background: #f7f7f7;
	color: #ccc !important;
	cursor: not-allowed;
}
.current-empty-section .empty-disabled:hover {
	color: #ccc !important;
	border-color: #ebebeb !important;
	background: #f7f7f7 !important;
}

.year-month-name {
	display: flex;
}

#ReportLaunch iframe {
	height: 100vh;
}

.reportParent {
	width: 100%;
	height: 0;
	padding-bottom: 57.2%;
	position: relative;
	margin: 5px 0 0 5px;
}

.tsa-form-control {
	display: flex;
	margin-bottom: 4px;
	justify-content: flex-start;
	align-items: center;
}

.tsa-form-control-reverse {
	flex-direction: row-reverse;
	justify-content: flex-end;
	margin-left: 130px;
	align-items: center;
}
.tsa-form-control-reverse .label-control {
	flex-basis: auto !important;
	margin-left: -16px;
}

.tsa-form-control-textarea {
	align-items: flex-start !important;
	margin-bottom: 2px !important;
}

.remove-margin {
	margin-bottom: 0;
}

.select-view select {
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: "";
	border: none;
}
.select-view select:disabled {
	color: #333 !important;
	font-size: 12.98px !important;
}

.label-control {
	color: #444;
	font-weight: 400;
	white-space: nowrap;
	margin: 3px 2px 0 0;
	padding: 0px 0px 0px 16px;
}

.label-control-textarea {
	margin-top: 0px !important;
}

.label-success {
	color: #309b27 !important;
}

.label-danger {
	color: #dc503c !important;
}

.label-important {
	color: var(--blue-color) !important;
}

.label-bold {
	font-weight: 600;
}

.label-disabled {
	color: #d1d1d1 !important;
}

.retry-control {
	color: var(--important-color);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	margin-left: 4px;
}
.retry-control:hover {
	text-decoration: underline;
}

.hyperlink-control {
	color: var(--hyperlink-color);
	white-space: nowrap;
	font-weight: 600;
	margin-top: 4px;
	height: 17px;
	cursor: pointer;
	padding: 2px 2px 0px 2px !important;
	/* 0px bottom padding when underlining hyperlinks */
	text-decoration: none;
}
.hyperlink-control:hover {
	text-decoration: underline;
}

.align-right {
	min-width: 130px;
	text-align: right;
}

.input-section {
	font-size: 100%;
	text-align: left;
}

.label-section {
	font-size: 100%;
	text-align: right;
	min-width: 130px;
}

.form-view {
	color: #000;
	font-weight: 600;
	padding: 0px 2px 0px 2px;
	/* 3px bottom padding so hyperlink underlines don't alter line-height */
	display: inline-block;
	line-height: 17px;
}

.input-control {
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	height: 21px;
	padding: 1px 1px 0px 1px;
	font-size: 100%;
	font-weight: 600;
	font-family: inherit;
	font-size: inherit;
}
.input-control:focus {
	box-shadow: 0 0 2px var(--focus-color);
	border: 1px solid var(--focus-color) !important;
	outline: none !important;
}
.input-control .date-mask {
	margin-left: -18px;
}

.textarea-control {
	font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 100%;
	font-weight: 600;
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	padding: 1px;
	/* 0px 4px 0px 4px; */
	font-family: inherit;
	font-size: inherit;
	min-height: 21px;
	resize: none;
	min-height: 21px;
	line-height: 17px;
}
.textarea-control:focus {
	box-shadow: 0 0 2px var(--focus-color);
	border: 1px solid var(--focus-color) !important;
	outline: none !important;
}

.input-control-new {
	height: 16px;
	border: 1px solid transparent;
	display: inline-block;
}
.input-control-new:focus {
	box-shadow: 0 0 2px var(--focus-color);
	border: 1px solid var(--focus-color) !important;
	outline: none !important;
}

/*this is the class for chaging the size of the input element 
that will have inside the grid */
.input-width {
	max-width: 90%;
}

/*this is the class for showing the validation error*/
.validation-error {
	position: fixed;
	color: #fff;
	z-index: 200000;
	background: #dc503c;
	/* @include fontSize(1.18 * $base-font-size); */
	font-size: 9.9px !important;
	font-weight: 500;
	padding: 5px;
	transform: scaleY(0);
	margin-top: 1px;
	margin-left: -5px;
	border-radius: 4px;
	transition: transform 0.4s ease-in-out;
	max-width: 250px;
	word-break: break-word;
	line-height: 18px;
	white-space: normal;
	box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.2);
}
.validation-error.show {
	transform: scaleY(1);
}

/*this is the style for calendar picker*/
[type="date"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
}

[type="date"]::-webkit-clear-button {
	/* Removes blue cross */
	-webkit-appearance: none;
	margin: 0;
}

.calendar-icon {
	margin-left: -18px;
}

/*this is the class for showing the pnding status*/
.pending-edit {
	border: 1px solid var(--pending-color) !important;
	background: var(--pending-color-bg) !important;
	/* lighten($pending-color, 60%) !important; */
}

.default-border {
	border: 1px solid #d1d1d1;
}

.validation-error-outline {
	border: 1px solid #dc503c !important;
	background: #fef8f7 !important;
	/* lighten($red-color, 39%) !important; */
}

.input-control-date-mask {
	font-size: 12.98px !important;
	margin-left: -90px;
	display: inline-block;
}

.hyper-link {
	color: var(--hyperlink-color);
	cursor: pointer;
}

.input-read-only {
	border-color: transparent;
	font-weight: 600;
	resize: none;
}

.hide-input {
	display: none;
	position: absolute;
}

.is-required {
	border: 1px solid var(--required-color-border);
	/* yellow required fields */
	background: var(--required-color);
	/* border: 1px solid var(--important-color); */
	/* blue-color required fields */
	/* background: scale-color($important-color, $lightness: 96%); */
}
.is-required:focus {
	box-shadow: 0 0 2px var(--focus-color);
	border: 1px solid var(--focus-color) !important;
	outline: none !important;
}

.input-picker-container {
	padding-left: 2px;
}

.none-text {
	color: #808080;
	font-weight: normal !important;
	cursor: default;
	pointer-events: none;
}

.input-control-date {
	width: 90px;
	font-weight: 600;
	padding: 0px 4px 0px 4px;
}

.separation-space {
	margin: 0px 5px;
}

.input-select {
	overflow: scroll;
	background: #fff !important;
}

.input-select option {
	overflow: scroll;
}

.form-status-important {
	color: var(--important-color);
}

.form-status-attention {
	color: #dc503c;
}

.form-status-positive {
	color: var(--positive-color);
}

.form-status-negative {
	color: #dc503c;
}

.input-focus {
	box-shadow: 0 0 2px var(--focus-color);
	border: 1px solid var(--focus-color) !important;
	outline: none !important;
}

.formatted-text {
	white-space: pre-wrap !important;
	word-wrap: break-word;
	line-height: 17px;
}

.formatted-text-grid {
	white-space: pre-line !important;
	word-break: break-word !important;
}
.formatted-text-grid:first-line {
	line-height: 0 !important;
}

.pre-wrap {
	white-space: pre-wrap !important;
}

.formatted-text-new {
	white-space: normal !important;
}

.input-checkbox-container {
	margin-top: 5px;
}

.input-area {
	display: flex;
}

.input-icon {
	width: 20px;
}

.input-picker {
	border-right: none !important;
	border-radius: 2px 0px 0px 2px;
}

#calculateWidth {
	position: absolute;
	visibility: hidden;
	height: auto;
	width: auto;
	white-space: nowrap;
	font-size: 11px;
	/* Thanks to Herb Caudill comment */
}

.clickable-item {
	cursor: pointer;
}

.tsa-input-inactive {
	color: #9e9e9e;
	/* #bababa */
}

.tsa-grid-inactive-hyperlink {
	color: #74c4ec !important;
}

.money-sign-padding {
	padding-left: 0.5rem !important;
}

.money-sign-padding--minus {
	padding-left: 0.7rem;
}

.money-sign {
	color: #444;
	font-weight: 600;
	font-family: inherit;
	position: absolute;
	left: 0.15rem;
	top: 0.32rem;
}

.input-select-section {
	position: relative;
}
.input-select-section:after {
	position: absolute;
	content: "test";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.multiselect-checkbox-list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: -1px 0 3px 0;
}
.multiselect-checkbox-list label {
	font-weight: 600;
	margin-left: -3px;
}
.multiselect-checkbox-list label:hover {
	cursor: pointer;
}
.multiselect-checkbox-list label.checkbox-disabled {
	color: #9e9e9e;
	cursor: default;
}
.multiselect-checkbox-list label.checkbox-read-only:hover {
	cursor: default !important;
}
.multiselect-checkbox-list .checkmark {
	margin-top: 1px;
}
.multiselect-checkbox-list span.checkmark-multi-select-readonly {
	border: none !important;
	cursor: default !important;
	margin-top: 1px;
}
.multiselect-checkbox-list .multi-select-checkbox-readonly {
	cursor: default;
}

.checkmark-multi-select-none {
	margin-top: -1px;
}

.input-for-report {
	margin-left: 4px;
}

.input-picker-container {
	position: relative;
}

.select-area {
	display: flex;
	align-items: center;
}
.select-area i {
	margin-left: 5px;
	cursor: pointer;
	font-size: 9px;
	color: #c1c1c1;
}
.select-area i:hover {
	color: #187daf;
}

option {
	background: #fff;
}

.tsa-main-overflow {
	overflow-y: auto;
	max-height: calc(100vh - 109px);
}

.tsa-main-overflow-WOC {
	max-height: calc(100vh - 109px - 35px) !important;
}

.tsaForm {
	position: absolute;
	border-top: none;
	overflow-wrap: break-word;
	display: none;
}
.tsaForm.form-show {
	position: relative;
	display: block;
}
.tsaForm .form-content {
	position: relative;
}
.tsaForm .form-content.show::after {
	display: block;
}
.tsaForm .form-content::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: #fff;
	display: none;
}
.tsaForm .save-toast {
	color: var(--positive-color);
	visibility: hidden;
	display: inline;
}
.tsaForm .save-toast.show {
	visibility: visible;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.sub-form {
	padding-right: 2px;
}

.selected-form {
	border: 1px solid var(--important-color);
}

.subgrid-inside-subform {
	border: 1px solid #47b1e6 !important;
}

#main-form-list {
	margin: 2px 2px 0 0;
}

.form-main-container {
	margin: 5px 0.1% 0 0.2%;
}

.editing-alert {
	color: var(--pending-color);
	font-weight: 600;
	margin: 0 3px 0 0;
}

.validation-alert {
	color: #dc503c;
	font-weight: 600;
	margin: 0 3px 0 0;
}

.button-area {
	display: flex;
	align-items: center;
}

.main-form-left-section {
	display: flex;
	margin-left: 0.2rem;
}

.main-form-banner {
	min-height: 2.5rem;
	display: flex;
}

.tinny-form-portion {
	height: 150px;
}

.form-area {
	padding: 1px 0 12px 22px;
}

.sub-form-area {
	padding: 5px 0 12px 22px;
}

.add-new-form-container {
	position: relative;
}

.save-and-add {
	width: 105px;
	left: -50px;
	padding: 2px 3px;
}

.save-add-new-multi-form {
	left: -100px !important;
	min-width: 170px !important;
	max-width: 250px !important;
}

#tsa-grid-header {
	display: flex;
}

.grid-root-section {
	position: relative;
}
.grid-root-section:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
	top: 0;
	left: 0;
	z-index: 2;
}

.tsa-grid-main-container {
	display: flex;
	margin-right: 3px;
	background: var(--grid-header-bg-color);
}

.tsa-grid-header-remain-section {
	background: #d1d1d1;
	min-width: 40px;
}

.PickerDataTableRow {
	min-height: 15px !important;
	border-top: 0px !important;
}

.grid-right-click-open > .tsa-grid-odd {
	background: #1b8dc5;
	color: #fff !important;
}
.grid-right-click-open > .tsa-grid-even {
	background: #1b8dc5;
	color: #fff !important;
}
.grid-right-click-open .hyperlink-control,
.grid-right-click-open .form-view,
.grid-right-click-open .tsa-grid-inactive {
	color: #fff !important;
}

/*this class is for the editable grid*/
.grid-row-without-subform:hover > .tsa-grid-odd {
	background: #fcfcfc;
	/* light mouseover background-change on rows that are not clickable (odd) */
}
.grid-row-without-subform:hover > .tsa-grid-even {
	background: #f1f1f1;
	/* light mouseover background-change on rows that are not clickable (even) */
}
.grid-row-without-subform:hover input ~ .checkmark {
	background-color: #fff !important;
	/* show left-column checkbox when user hovers anywhere on the row */
	border-color: #333;
}
.grid-row-without-subform.active input ~ .checkmark {
	background-color: #fff !important;
	/* show left-column checkbox when checkboxes are active */
	border-color: #333;
}

.grid-row-secondary {
	cursor: pointer;
}
.grid-row-secondary:hover input ~ .checkmark {
	background-color: #fff !important;
	border-color: #333;
}
.grid-row-secondary.active input ~ .checkmark {
	background-color: #fff !important;
	border-color: #333;
}
.grid-row-secondary:hover > .tsa-grid-odd {
	background: var(--grid-odd-hover);
	/* heavy mouseover background-change on rows that are clickable (odd) */
	color: #fff !important;
}
.grid-row-secondary:hover > .tsa-grid-even {
	/* heavy mouseover background-change on rows that are clickable (odd) */
	background: var(--grid-odd-hover);
	/* heavy mouseover background-change on rows that are clickable (even) */
	color: #fff !important;
}
.grid-row-secondary.active > .tsa-grid-odd {
	background: var(--grid-odd-hover);
	/* heavy mouseover background-change on rows that are active (odd) */
	color: #fff !important;
}
.grid-row-secondary.active > .tsa-grid-even {
	background: var(--grid-odd-hover);
	/* heavy mouseover background-change on rows that are active (even) */
	color: #fff !important;
}
.grid-row-secondary:hover > .checkbox-column-content {
	background: var(--control-active-color);
	color: #fff !important;
}
.grid-row-secondary:hover i.expandable {
	color: #fff;
}
.grid-row-secondary:hover span.tree-grid-paging-button {
	color: #fff;
}
.grid-row-secondary:hover .grid-expand-before:before {
	border-color: #fff;
}
.grid-row-secondary:hover .hyperlink-control,
.grid-row-secondary:hover .form-view,
.grid-row-secondary:hover .tsa-grid-inactive,
.grid-row-secondary:hover .text-positive,
.grid-row-secondary:hover .text-negative,
.grid-row-secondary:hover .cip-icon,
.grid-row-secondary:hover .filter-icon-positive,
.grid-row-secondary:hover .cip-disable-text {
	color: #fff !important;
}
.grid-row-secondary:hover .warn-badge {
	color: var(--blue-color) !important;
	background: #fff !important;
}
.grid-row-secondary:hover .tsa-date-picker {
	color: #000;
}
.grid-row-secondary.active i.expandable {
	color: #fff;
}
.grid-row-secondary.active .hyperlink-control,
.grid-row-secondary.active .form-view,
.grid-row-secondary.active .tsa-grid-inactive {
	color: #fff !important;
}
.grid-row-secondary.active .tsa-date-picker {
	color: #000;
}

i.expandable {
	width: 10px;
}

/* this is for stop highlighting the text in the browsers
after pressing the shift key or try to select some text */
.tsa-grid-container {
	max-width: 83vw;
	border: 1px solid #e8e8e8;
	border-radius: 2px;
	padding: 2px;
	display: inline-block;
	padding: 1px;
	margin: 1px;
	/* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}
.tsa-grid-container .tsa-grid-columns {
	display: flex;
	text-align: left;
	width: 100%;
}
.tsa-grid-container .tsa-grid-columns > div.footer-CIP:last-child {
	padding-right: 2px;
}
.tsa-grid-container #tsa-grid-body {
	display: flex;
	flex-direction: column;
	text-align: left;
}
.tsa-grid-container .DataTableHeader {
	font-weight: 400;
	color: var(--grid-header-color);
	padding: 4px;
	background: var(--grid-header-bg-color);
	display: flex;
	align-content: space-around;
	height: 23px !important;
}
.tsa-grid-container .DataTableHeader .grid-header-label-section {
	flex-basis: calc(100% - 7px);
	display: flex;
}
.tsa-grid-container .DataTableHeader .grid-header-section {
	display: flex;
	padding-left: 3px;
}
.tsa-grid-container .DataTableHeader .grid-header-section .grid-header-label-section {
	flex-basis: calc(100% - 7px);
	display: flex;
}
.tsa-grid-container .DataTableHeader .grid-header-section .sorting-label {
	cursor: pointer;
	height: 17px;
	padding: 1px;
}
.tsa-grid-container .DataTableHeader .grid-header-section .sorting-label:hover {
	text-decoration: underline;
}
.tsa-grid-container .DataTableHeader .grid-header-section i {
	margin-left: 6px;
}
.tsa-grid-container .DataTableHeader .grid-header-section div:last-child {
	position: relative;
}
.tsa-grid-container .grid-component-cell {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: -3px;
	padding-top: 3px;
	margin-left: -1px;
}

#calculate-width-section {
	position: absolute;
	visibility: hidden;
	height: auto;
	width: auto;
	white-space: nowrap;
}

.grid-action {
	width: 150px;
}

.tsa-grid-column-content {
	padding: 0;
	display: flex;
	align-items: center;
}

.scroll-grid-section {
	margin-right: 3px;
	scrollbar-width: thin;
	scrollbar-color: rgba(150, 150, 150, 0.4) var(--scrollbar-color);
	overflow-x: auto;
}

.no-scroll {
	overflow-x: hidden !important;
}

.extraspace-scroll {
	min-width: 40px !important;
}

.CIP-main-grid {
	overflow: auto;
	margin-right: 1px;
	max-height: calc(100vh - 255px) !important;
}

.subGrid-scroll {
	overflow-y: overlay;
	max-height: calc(100vh - 270px);
}

.infinite-scroll {
	overflow: auto;
	margin-right: 1px;
	max-height: calc(100vh - 115px);
}

.cursor-default {
	cursor: default !important;
}

.add-new-grid {
	color: var(--important-color);
	margin: 5px 10px;
	float: right;
	cursor: pointer;
}

.remove-bulk-section {
	color: #dc503c !important;
	margin: 5px 10px;
	float: right;
	cursor: pointer;
}

.remove-bulk {
	margin-right: 10px;
}

.checkbox-column-header {
	width: 40px;
	height: 23px;
	display: flex;
	align-items: center;
}

.last-selected-item {
	border-top: 1px dotted var(--control-active-color) !important;
	border-bottom: 1px dotted var(--control-active-color) !important;
}

.checkbox-column {
	min-width: 1.6rem;
	text-align: center;
	border-left: 3px solid transparent;
}
.checkbox-column input ~ .checkmark {
	background-color: transparent !important;
	border-color: transparent;
}
.checkbox-column:hover input ~ .checkmark {
	background-color: #fff !important;
	border-color: #333;
}
.checkbox-column input:checked ~ .checkmark {
	background-color: #fff !important;
	border-color: #333;
}

.checkbox-fix-column {
	position: fixed;
	height: 25px;
	z-index: 1000;
	background: #fff;
}

.spacer {
	height: 50px;
	margin: 0 0 -50px 0;
	/* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
	background: transparent;
	/* you'll need this if #container's parent element has a different background from #container itself */
}

#tsa-grid-row {
	border-top: 1px dotted white;
}

/* this is the section that we have create for the tree grid section
and we use the same grid compont and create the tree */
.grid-cell-with-expand {
	display: flex;
	margin-left: 0;
	width: 100%;
}
.grid-cell-with-expand > div:last-child {
	flex-grow: 100;
}

.grid-expand-section {
	position: relative;
	display: flex;
	align-items: center;
}
.grid-expand-section .grid-expand-icon-container .grid-expand-icon {
	margin: 0px 3px 0 2px;
	color: #666;
}

.grid-expand-before {
	display: flex;
	position: relative;
}
.grid-expand-before:before {
	content: "...";
	color: transparent;
	border-bottom: 1px dotted #333;
	border-left: 1px dotted #333;
	padding-left: 1px;
	margin: -6px 0 0 -13px;
	position: absolute;
	width: 14px;
}

.grid-action-column {
	text-align: center;
	width: 40px;
	color: #085180;
	border-left: 1px solid #fff;
	padding: 4px;
	background: var(--grid-header-bg-color);
}

.table-header-conatainer {
	display: flex;
	justify-content: space-between;
}

.column-handler {
	border: 1.5px solid #fff;
	cursor: col-resize;
	height: 25px;
	margin-top: -4px;
}

.column-handler-content {
	border: 0px solid transparent;
}

.column-handler-content-grouping {
	border: 0px solid #9e9e9e;
	background-color: #9e9e9e;
	height: 16px;
}

.filter-column-handler-section {
	display: flex;
	flex-basis: 10px;
	justify-content: flex-end;
}

.filter-column-handler-section-cip {
	flex-basis: 4px;
}

.tsa-grid-inactive {
	color: #9e9e9e;
	/* #bababa */
}

.tsa-grid-odd {
	color: #000;
}

.info-grid-odd {
	color: #fff;
}

.info-grid-even {
	color: #f4f4f4;
}

.tsa-grid-even {
	background: var(--grid-even-color);
	color: #000;
}

.deleted-grid-row {
	background: repeating-linear-gradient(45deg, #fff, #fff 2px, #f7d8d3 2px, #f7d8d3 4px);
	/* red striped bg */
	color: #9e9e9e !important;
	/* set a color on DEL text */
	/* background: lighten($red-color, 38%); /* light-red bg */
	/* background: lighten(#f8ebba, 5%); /* yellow bg */
	/* background: repeating-linear-gradient(45deg, $white-color, $white-color 4px, #f8ebba 4px, #f8ebba 8px); /* yellow striped bg */
	/* background: repeating-linear-gradient(45deg, $white-color, $white-color 2px, lighten($gray-color,7%) 2px, lighten($gray-color,7%) 4px); /* light-gray striped bg */
	/* color: $red-color; /* set a color on DEL text */
	/* text-decoration: line-through; */
}
.deleted-grid-row .button-default:hover {
	background: #f9e3e0;
	color: #dc503c;
	/* text-decoration: line-through; */
	border: 1px solid #d1d1d1;
}

.deleted-grid-row-odd {
	background: repeating-linear-gradient(45deg, #f7d8d3, #f7d8d3 2px, #f4f4f4 2px, #f4f4f4 4px);
	/* red striped bg */
	color: #9e9e9e !important;
	/* set a color on DEL text */
	/* background: lighten($red-color, 36%); /* light-red bg */
	/* background: #f8ebba; /* yellow bg */
	/* background: repeating-linear-gradient(45deg, #f8ebba, #f8ebba 8px, $grid-even-color 8px, $grid-even-color 16px); /* yellow striped bg */
	/* background: repeating-linear-gradient(45deg, lighten($gray-color,7%), lighten($gray-color,7%) 2px, f4f4f4 2px, f4f4f4 4px); /*light-gray striped bg */
	/* color: $red-color; /* set a color on DEL text */
	/* text-decoration: line-through; */
}

.deleted-item-sub-grid {
	/* color: $red-color; */
	/* set a color on DEL text */
	/* color: #858585 !important; */
	/* set a color on DEL text */
	/* text-decoration: line-through; */
}

.remove-item {
	text-align: center;
	width: 60px;
	color: #dc503c;
	padding: 0 5px;
	align-self: center;
}

.subgrid-selected-item {
	background: var(--control-active-color) !important;
	color: #fff !important;
}

.subgrid-selected-row {
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.main-grid-container {
	height: 100%;
}

.tree-grid-paging-button {
	color: #125d82;
	font-weight: 600;
}
.tree-grid-paging-button:hover {
	color: var(--important-color);
}

.more-button-checkbox {
	margin-left: 1.8em;
	cursor: default;
}

.grid-title {
	margin: 4px 0 2px 6px;
	color: var(--important-color);
	font-size: 11px !important;
}

.main-grid-content {
	margin-left: 50px;
}

.hide-border {
	border: none !important;
}

.is-readonly1 {
	position: relative;
}
.is-readonly1::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(34, 34, 34, 0.1);
}

.scroll-provider {
	width: var(--scrollbar-width);
}

.not-allowed {
	cursor: not-allowed !important;
}

/* this is the section for the selected row in the grid */
.slected-item-odd {
	background-color: #dedede;
}

.selected-item-even {
	background-color: #d9d9d9;
}

.container-frozen-column {
	width: 1.8rem;
	float: left;
}

.grid-footer {
	display: flex;
	justify-content: flex-end;
	align-items: flex;
}
.grid-footer > span {
	margin: 0 2px;
}
.grid-footer .footer-highlight {
	color: var(--important-color);
	margin-right: 2px;
}

.target-form-section-frozen {
	width: 1.8rem;
	display: none;
	border: 1px solid var(--control-active-color);
	border-right: none;
}
.target-form-section-frozen.show {
	display: block;
}

.grid-empty-row {
	font-family: inherit;
	height: 25px;
	display: flex;
	align-items: center;
	padding-left: 27px;
}
.grid-empty-row span {
	margin-left: 3px;
}

.tree-grid-no-child {
	color: #dc503c;
	margin-left: 0.5rem;
}

.copylink-address {
	position: absolute;
	z-index: -4;
}

/* *hiding the scroll for the checkbox column so it will follow the scroll of the grid* */
.hiding-scroll {
	scrollbar-track-color: transparent !important;
	scrollbar-width: none;
}

.hiding-scroll::-webkit-scrollbar {
	background: var(--grid-even-color);
	width: 0px;
}

.hiding-scroll::-webkit-scrollbar-thumb {
	background: transparent !important;
}
.hiding-scroll::-webkit-scrollbar-thumb:hover {
	background: transparent;
}

.hiding-scroll::-webkit-scrollbar-track {
	background: #fff !important;
}

.fading {
	animation: norecord ease-in 2s;
}

.negative-icon {
	color: #dc503c;
	font-size: 1rem !important;
}

.positive-icon {
	font-size: 1rem !important;
	color: #309b27;
}

.transparent-icon {
	font-size: 1rem;
	color: transparent;
}

.info-icon {
	color: #e6af00;
	font-size: 1rem !important;
}

.access-modal-icon {
	color: #d1d1d1;
}
.access-modal-icon:active {
	transform: translateY(0.5px);
}

.flex-end {
	justify-content: flex-end !important;
	padding-right: 2px !important;
}

.center {
	justify-content: center !important;
}

.grid-functional-buttons-column {
	min-width: 67px !important;
	padding: 0.1rem;
}

.column-handler {
	border: 1.5px solid #fff;
	cursor: col-resize;
	height: 25px;
	margin-top: -4px;
}

.column-handler-content {
	border: 0px solid transparent;
}

.column-handler-content-grouping {
	border: 0px solid #9e9e9e;
	background-color: #9e9e9e;
	height: 16px;
}

.grid-content-label {
	padding-left: 4px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 25px;
	display: flex;
	height: 25px;
	align-items: center;
}

/* *this is the style
  /*this will hide the scroll bar for the header section
and so we can see the sroll will follow the scroll
on the main grid without showing the scroll */
.tsa-grid-main-no-reocd {
	width: calc(100% + 1px);
}

.tsa-grid-freeze-header {
	-ms-overflow-style: none;
	width: 120%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	background: var(--grid-header-bg-color);
}

.tsa-grid-freeze-footer::-webkit-scrollbar {
	height: 0;
}

.tsa-grid-freeze-header-new {
	width: 100% !important;
}

/* hide the scroll bar for the freezing section */
.tsa-grid-freeze-header-new::-webkit-scrollbar {
	width: 0px;
	height: 0px;
	background: transparent;
	/* make scrollbar transparent */
}

/* *hiding the scroll for the checkbox column so it will follow the scroll of the grid* */
.hiding-scroll {
	scrollbar-track-color: transparent !important;
	scrollbar-width: none;
}

.hiding-scroll::-webkit-scrollbar {
	background: #f4f4f4;
	width: 0px;
}

.hiding-scroll::-webkit-scrollbar-thumb {
	background: transparent !important;
}
.hiding-scroll::-webkit-scrollbar-thumb:hover {
	background: transparent;
}

.hiding-scroll::-webkit-scrollbar-track {
	background: #fff !important;
}

.grid-content-wrapping {
	white-space: normal !important;
	line-height: 1.4;
	height: auto !important;
	padding: 3px 0;
}

.export-to-excel-section {
	position: relative;
	display: flex;
}
.export-to-excel-section .spinner {
	bottom: 0px !important;
}

.export-to-excel-progressbar {
	width: 92%;
	position: absolute;
	top: 78%;
	left: 4%;
}
.export-to-excel-progressbar .export-to-excel-progressbar-chunk {
	border-bottom-width: 1px !important;
}

.export-to-excel-container {
	position: relative;
}

#picker .chipsArea {
	max-height: 100px;
	min-width: 300px;
	display: inline-block;
	border-radius: 5px;
	cursor: pointer;
	padding: 10px 5px;
	overflow: auto;
	border: 1px solid #007;
	margin: 10px 3px;
	min-height: 25px;
	position: relative;
}
#picker .hidden {
	display: none;
}

.tsa-picker-section {
	display: flex;
	align-items: center;
}

.combo-picker {
	position: absolute;
	z-index: 1000;
	display: none;
}
.combo-picker.active {
	display: block;
}

.combo-iframe {
	height: 100%;
	margin: 0 auto;
	overflow: auto;
	width: 200%;
}

.tsa-grid-unallocated {
	font-style: italic;
	color: #808080;
}

.filed-set-class {
	display: flex;
}

.same-row {
	display: flex;
	justify-content: flex-start;
}

.audit-main {
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 11px !important;
	color: #767676;
}

.invoice-form-container {
	margin: 2px;
	border: 1px solid #d1d1d1;
	padding: 5px 30px;
	display: flex;
}
.invoice-form-container label {
	padding-left: 0px !important;
}
.invoice-form-container > div:first-child {
	flex-basis: 30%;
}
.invoice-form-container > div:last-child {
	flex-basis: 70%;
}
.invoice-form-container .download-section {
	min-height: 30px !important;
	display: flex;
	align-items: center;
}
.invoice-form-container .download-section > div {
	position: relative;
	margin-left: 2px;
	min-height: 30px !important;
}
.invoice-form-container .download-section > div .download-spinner {
	left: 0;
	top: 0.4rem;
	bottom: 0;
}
.invoice-form-container .invoice-section {
	margin-bottom: 20px;
}
.invoice-form-container .invoice-section > div {
	min-height: 20px;
	display: flex;
	align-items: center;
}
.invoice-form-container .invoice-section .label-section {
	width: auto;
	background-color: #424242;
	color: #fff !important;
	padding: 2px;
	border-radius: 2px;
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
}
.invoice-form-container .invoice-section .label-section label {
	color: #fff;
}

.cip-icon-size {
	font-size: 16px;
}

.invoice-summary-grid .sub-grid-row-container {
	max-height: calc(95vh - 405px);
	overflow-y: auto;
}
.invoice-summary-grid .summary-grid-row {
	display: flex;
}
.invoice-summary-grid .invoice-header-section {
	display: flex;
	padding: 0 3px;
	border-right: 2px solid #fff;
	justify-content: center;
	align-items: center;
	background: #e8e8e8;
}
.invoice-summary-grid .summary-grid-header {
	display: flex;
	font-weight: 400;
	color: #085180;
}
.invoice-summary-grid .summary-grid-header-new {
	display: grid;
	grid-template-columns: 2fr 3fr 3fr 3fr;
}
.invoice-summary-grid .summary-grid-content {
	display: grid;
	grid-template-columns: 2fr repeat(9, 1fr);
}
.invoice-summary-grid .invoice-grid-header-cell {
	text-align: center;
	padding: 0 3px;
}
.invoice-summary-grid .invoice-grid-header-cell .grid-header-cell {
	flex-basis: 100%;
	padding: 4px 0;
	display: flex;
}
.invoice-summary-grid .invoice-grid-cell > div {
	display: flex;
	height: 30px;
	align-items: center;
}
.invoice-summary-grid .summary {
	background-color: #424242;
	color: #fff;
}
.invoice-summary-grid .highlight {
	background-color: #767676;
	color: #fff;
}

.cancel-download-button {
	margin-left: 20px;
}

/*pre invoice summary*/
.prev-invoice-summary {
	justify-content: flex-start;
}
.prev-invoice-summary > div:first-child {
	flex-basis: 35%;
}

.hyperlink-control-cip {
	padding: 0 !important;
	margin-top: 0 !important;
	height: auto;
}

.cip-status-column {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding-right: 5px;
}

/*sub table*/
.invoice-status-buttons {
	display: flex;
	justify-content: center;
	min-width: 80px;
}

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

.cip-link:hover {
	text-decoration: underline;
	cursor: pointer;
}

.invoice-status {
	margin-left: 3px;
}

.cip-container {
	margin: 5px;
}
.cip-container .cip-section-grid {
	border: 1px inset #d1d1d1;
	padding: 4px;
}
.cip-container .cip-header {
	display: flex;
	align-items: center;
	margin: 4px;
}
.cip-container .cip-section {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}
.cip-container .top-summary {
	margin-top: 10px;
	width: 25vw;
}
.cip-container .top-summary > div {
	display: flex;
	flex-basis: 100%;
}

.cip-grid-icon {
	min-width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cip-grid-icon i {
	font-size: 16px;
}

.cip-grid-icon-content {
	min-width: 50px;
	text-align: left !important;
}
.cip-grid-icon-content i {
	margin-left: 5px;
	font-size: 16px;
}

.footer-CIP {
	color: #fff !important;
	background-color: #424242 !important;
	padding: 0.1rem 0;
	cursor: default !important;
}
.footer-CIP i {
	color: #fff !important;
}
.footer-CIP i.transparent-icon {
	color: #424242 !important;
}

.cip-form-main {
	display: none;
}
.cip-form-main.active {
	display: block;
}

.invoice-text-help {
	font-style: italic;
	color: #636363;
}

.label-control-cip {
	color: #444;
	white-space: nowrap;
	font-size: inherit;
	margin: 0 2px 0 0;
}

.hyperlink-cip {
	color: var(--blue-color);
	cursor: pointer;
	white-space: nowrap;
	font-size: inherit;
	margin: 0 2px 0 0;
	font-weight: 600;
	text-decoration: none;
}
.hyperlink-cip:hover {
	text-decoration: underline;
}

.label-bold {
	font-weight: 600 !important;
}

.summary-item {
	display: flex;
	align-items: center;
	min-height: 17px;
}

.label-right-align {
	flex-basis: 124px;
	text-align: right;
}

.cip-grid-hover {
	cursor: pointer;
}

.cip-grid-cell {
	display: flex;
	align-items: center;
}

.cip-icon-common {
	margin: 0 2px;
}

.cip-form-label-section {
	display: flex;
	margin: 3px 0 3px -3px;
	align-items: center;
}
.cip-form-label-section span {
	margin: 0 2px;
}

.cip-import-invoice {
	height: 50vh !important;
	min-width: 60vw !important;
}

.calendar-period-section {
	display: flex;
	border-radius: 2px;
	align-items: center;
}

.caret-icon-container {
	margin: 0 1.5px;
    font-size: 1rem !important;
}

.info-column {
	min-width: 1.6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #808080;
}

.cip-checkbox-container {
	margin: 2px 0 8px 0;
}
.cip-checkbox-container label {
	cursor: pointer;
}

/*Icon button for CIP*/
.cip-icon-button-negative {
	width: 40px;
	height: 20px;
	padding: 2px;
	border-radius: 1px;
}
.cip-icon-button-negative:hover {
	background: #dc503c !important;
	color: #fff !important;
}

.icon-container-cip:active {
	transform: translateY(0.5px);
}

.sub-table-header {
	margin: 1px 0 4px 0;
}

/*IE support style*/
_:-ms-fullscreen,
:root .year-month {
	padding: 3px;
	flex-basis: 56px;
}

_:-ms-fullscreen,
:root #sidebar {
	width: 15.9%;
}

input[type="text"]::-ms-clear {
	display: none;
}

_:-ms-fullscreen .table-header-conatainer,
:root .table-header-conatainer {
	display: block;
}
_:-ms-fullscreen .column-handler-content,
:root .column-handler-content {
	border: 0 solid transparent;
}
_:-ms-fullscreen .column-handler-content-grouping,
:root .column-handler-content-grouping {
	border: 0 solid #9e9e9e;
	background-color: #9e9e9e;
	height: 16px;
}
_:-ms-fullscreen .column-handler,
:root .column-handler {
	cursor: col-resize;
}
_:-ms-fullscreen .tsa-date-picker,
:root .tsa-date-picker {
	margin-left: -210px !important;
}

.badge-status {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 30px;
	text-transform: uppercase;
	margin: 0 2px;
}
.badge-status span {
	font-size: 8.8px !important;
	border-radius: 3px;
	padding: 1px 3px;
	margin: 0 2px 0 2px;
	color: #fff !important;
	transition: all 0.2s ease-in-out;
}
.badge-status span.pending-badge {
	background: var(--pending-color);
}
.badge-status span.alert-badge {
	background: #dc503c;
}
.badge-status span.warn-badge {
	background-color: #e6af00;
}

.file-upload-header {
	padding: 0.3rem 0.1rem;
	display: flex;
	background: whitesmoke;
	margin: 4px 1%;
	box-shadow: 0 4px 14px 2px #fafafa;
}
.file-upload-header > div {
	flex-basis: 25%;
}

.label-right-align-import-modal {
	flex-basis: 110px;
	text-align: right;
}

.label-control-gap-left {
	margin-left: 4px;
}

.invoice-details-section {
	position: relative;
	margin: 0px 0 0.2rem 0;
}

.invoice-modal-title {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	min-height: 20px;
	font-size: 11.55px;
}

.invoice-input {
	width: 100px;
}

.invoice-input-description {
	width: 450px;
}

.import-invoice-form {
	display: grid;
	grid-template-columns: 1fr 50% 408px;
}

.import-invoice-hard-copy {
	display: grid;
	grid-template-columns: 1fr 50% 408px;
}

.hard-copy-view {
	background: #f1f1f1;
	padding: 12px;
	margin: 1rem 1rem 1rem 0;
	border-radius: 3px;
	/* added */
	box-shadow: 0 4px 14px 2px #fafafa;
	/* added */
}

.custom-file-input::-webkit-file-upload-button {
	visibility: hidden;
}

.custom-file-input::before {
	content: "browse";
	color: var(--blue-color);
	white-space: nowrap;
	font-weight: 600;
	margin-top: 4px;
	height: 17px;
	cursor: pointer;
	padding: 2px 2px 0px 2px !important;
	/* 0px bottom padding when underlining hyperlinks */
	text-decoration: none;
}
.custom-file-input::before:hover {
	text-decoration: underline;
}

.custom-file-input:hover::before {
	border-color: black;
}

.custom-file-input:active::before {
	background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

.hidden {
	display: none;
}

.import-invoice-upload {
	margin-top: 2px;
	width: 80%;
}

.invoice-second-section {
	margin-top: 1rem;
}

.upload-file-input:focus ~ label {
	border-radius: 1px;
	border: 1px solid var(--sidebar-focus-color);
}

.upload-file-input {
	position: absolute;
	z-index: -10;
}

.attachment-form-control {
	display: flex;
	margin: 0.2rem 0;
}

.attachment-main {
	display: grid;
	width: 99%;
	grid-column-gap: 0.2rem;
	grid-template-areas: "attachment-icon attachment-data attachment-close" "attachment-icon attachcment-porgress attachment-close ";
	grid-template-columns: auto 93% auto;
}
.attachment-main .attachment-icon {
	grid-area: attachment-icon;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.attachment-main .attachment-data {
	grid-area: attachment-data;
	display: flex;
	justify-content: space-between;
}
.attachment-main .attachment-data label.name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 400px;
}
.attachment-main .attachment-close {
	grid-area: attachment-close;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	cursor: pointer;
	color: #636363;
}
.attachment-main .attachment-close i {
	margin: 0 2px;
}

.attachment-progressbar-container {
	grid-area: attachcment-porgress;
	display: flex;
	justify-content: space-between;
}
.attachment-progressbar-container .attachment-progressbar {
	width: 100%;
	border-bottom: 4px solid #309b27;
	transform-origin: left;
}
.attachment-progressbar-container .attahchment-disable {
	border-bottom: 4px solid var(--scrollbar-thumb-color);
}

.drop-section {
	border: 0.01rem dashed #d1d1d1;
	min-height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.drop-section > div {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.drop-section > div i {
	font-size: 1rem;
	color: #d1d1d1;
}

.attachment-label-area {
	min-height: 100px;
	display: flex;
	align-items: flex-end;
}

.cip-import-invoice-modal {
	z-index: 5 !important;
}

.cip-tab-container {
	overflow-y: auto;
	max-height: calc(100% - 137px);
	overflow-x: hidden;
}

.supplier-invoice-top-section {
	height: 113px;
}

.prcessing-button {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}

.attachment-error {
	border-color: #dc503c !important;
	background: #fef8f7 !important;
}

.attachment-required {
	border-color: #a8a38f;
	/* yellow required fields */
	background: #fffff4;
}

.pending-attachment {
	border-color: #309b27 !important;
	background: #f5fcf5 !important;
}

.dragover {
	border-color: var(--blue-color) !important;
	background: #e7f9e6 !important;
}

.front-label {
	margin: 2px 0 0 3px;
	color: #636363;
	font-size: 11px;
}

.rare-label {
	margin-right: 1px;
	font-size: 11px;
}

.calculate-label-text {
	color: #636363;
	margin: 0 1px 0 7px;
}

.tsa-radio-control {
	display: flex;
	margin-bottom: 5px;
}
.tsa-radio-control > div:first-child {
	display: flex;
	justify-content: flex-end;
	flex-basis: 130px;
}

.redirecting {
	color: #fff;
}

.invoice-create-form {
	z-index: 5 !important;
	position: relative;
}

.cip-add-invoice-search {
	width: 300px;
}

.supplier-invoice-modal {
	width: 95% !important;
	height: 98vh !important;
}

.hardcopy-important-value {
	position: relative;
	margin-top: 2px;
	height: 17px;
}
.hardcopy-important-value:after,
.hardcopy-important-value::before {
	position: absolute;
	content: "";
	width: 73%;
	border-top: 1px solid #000;
	opacity: 0.8 !important;
}
.hardcopy-important-value:after {
	bottom: -3px;
}
.hardcopy-important-value:before {
	top: 0px;
}
.hardcopy-important-value label,
.hardcopy-important-value .label-control {
	font-weight: bold !important;
}

.label-section-hardcopy {
	font-size: 100%;
	text-align: right;
	min-width: 157px !important;
	margin-right: 20px;
}

.label-section-hardcopy-value {
	text-align: right;
	min-width: 60px !important;
}

.tsa-form-control-hardcopy {
	margin-bottom: 0 !important;
}

.report-lunch-page-container {
	margin: 0.3rem 0.4rem;
	max-height: calc(100vh - 40px);
	overflow: auto;
}

.report-landing-page-header {
	margin-top: 14px;
	min-height: 5rem;
}

.report-landing-page-picker-area {
	min-height: 200px;
}

.report-form-control {
	display: flex;
	min-height: 2.2rem;
	margin-bottom: 0.5rem;
	align-items: flex-start;
}

.report-form-control-reverse {
	flex-direction: row-reverse;
	justify-content: flex-end;
	margin-left: 228px;
	align-items: center;
}
.report-form-control-reverse .report-label-control {
	flex-basis: auto !important;
	margin-left: -8px;
}

.report-label-control {
	flex-basis: 230px;
	display: flex;
	justify-content: flex-end;
}

.chipsArea {
	max-height: 100px;
	min-height: 23px !important;
	min-width: 50vw;
	max-width: 50vw;
	display: inline-block;
	/* border-radius : 5px; */
	cursor: pointer;
	overflow: auto;
	border: 1px solid #d1d1d1;
	background-color: #fcfcfc;
	/* margin: 7px 3px 3px 0px; */
	min-height: 26px;
	position: relative;
	margin-left: 5px;
	border-radius: 2px;
	display: flex;
	position: relative;
	flex-wrap: wrap;
}

.picker-field-required {
	border: 1px solid var(--required-color-border) !important;
	background: var(--required-color) !important;
}
.picker-field-required:focus {
	box-shadow: 0 0 2px var(--focus-color);
	border: 1px solid var(--focus-color) !important;
	outline: none !important;
}

.report-landing-button-groups {
	margin: 10px 0;
	display: flex;
	z-index: -1px;
}
.report-landing-button-groups > div:first-child {
	flex-basis: 170px;
}

.landing-page-accordion {
	margin: 3px 0;
	background: #fff;
	cursor: pointer;
	width: 100%;
	min-height: 21px;
	display: flex;
	align-items: center;
	/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
}
.landing-page-accordion .active,
.landing-page-accordion:hover {
	background: #f9f9f9;
}
.landing-page-accordion span {
	margin-left: 4px;
}
.landing-page-accordion i {
	margin-left: 3px;
}
.landing-page-accordion i.active {
	transform: rotate(90deg);
}

.tinny-report-portion {
	height: 1px;
}

.landing-page-data-picker-area {
	margin: 0 0 0.2rem 0.3rem;
}

.date-picker {
	display: flex;
	font-size: 11px;
}

.date-picker select {
	border: 1px solid #d1d1d1;
}

/* .date-picker .date-range {
    flex-basis: 290px;
} */
.date-picker > div {
	margin: 0 20px 0 0;
}

.date-picker .date-range-input {
	width: 40px;
}

.date-picker .data-picker-output {
	font-size: 11px;
	margin: 3px 0;
	position: absolute;
}

.date-picker .date-range-label {
	font-weight: 600;
	margin: 3px 4px 0 4px;
}

.date-picker .date-range-label-to {
	margin-left: 54px;
}

.date-picker .date-mask {
	margin-left: -120px;
	margin-top: 3px;
}

.custom-date-range {
	display: flex;
}

.custom-date-range > div {
	margin-right: 5px;
	height: 20px;
}

.custom-padding {
	padding: 1px 2px;
}

.time-picker1 {
	width: 65px;
}

.input-date-select {
	width: 85px;
	padding-left: 4px;
	border: 1px solid #d1d1d1;
}

.calendar-picker {
	text-align: center;
	display: flex;
	font-size: 11px;
}

.calendar-picker select {
	border: 1px solid #d1d1d1;
	min-width: 130px;
}

.seleted-area {
	margin: 2px 0 0 2px;
}

.calendar-picker span {
	margin: 2px 5px;
}

.active-period {
	color: #b00;
	font-size: 12px;
}

.vue__time-picker {
	width: 6.5em !important;
	margin-top: -1px;
}
.vue__time-picker input.display-time {
	height: auto !important;
	width: 6.5em !important;
	font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
	font-weight: 600 !important;
	font-size: inherit !important;
	border-radius: 2px !important;
	height: 21px !important;
	padding: 1px 2px !important;
}
.vue__time-picker .dropdown {
	width: 6.5em !important;
	height: 22em !important;
}
.vue__time-picker .dropdown .select-list {
	width: 6.5em !important;
	height: 22em !important;
}
.vue__time-picker .dropdown .select-list .hours {
	display: flex;
	flex-direction: column;
}
.vue__time-picker .dropdown .select-list .hours li:nth-child(2) {
	order: 12;
}
.vue__time-picker .dropdown ul li:not([disabled]).active:focus,
.vue__time-picker .dropdown ul li:not([disabled]).active {
	background: var(--important-color) !important;
}
.vue__time-picker .dropdown ul li:not([disabled]).active:focus:hover,
.vue__time-picker .dropdown ul li:not([disabled]).active:hover {
	background: #156d99 !important;
}

.invoice-resolve-header {
	padding: 0.5rem 0 0.5rem 0.1rem;
}

.invoice-label-control {
	color: #444;
	font-weight: 600;
	white-space: nowrap;
}

.resolve-invoice-warning {
	margin-left: 6px;
}

.import-invoice-function-buttons {
	display: flex;
	justify-content: flex-end;
	padding: 0.1rem;
}

.invoice-resolve-helptext {
	position: relative;
}

.invoice-resolve-tab-header {
	display: flex;
	align-items: center;
	min-height: 45px;
	margin-top: 5px;
}

.invoice-resolve-warning-area {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3px 0;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	min-width: 350px;
	min-height: 21px;
}
.invoice-resolve-warning-area label {
	color: #fff !important;
	margin-left: 2px;
}

.invoice-part-helptext {
	border: 1px solid whitesmoke;
	margin: 2px 1% 2px 1%;
	border-radius: 3px;
	padding: 4px 2px;
	box-shadow: 0 4px 14px 2px #fafafa;
	background: whitesmoke;
	color: #444;
	font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.3;
	flex-basis: 60%;
	min-height: 45px;
}

.ivoice-part-status-select {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-right: none !important;
}

/*invoice hardcopy modal*/
.invoice-hard-copy-modal {
	z-index: 120 !important;
}

.invoice-hard-copy-modal-content {
	position: absolute;
	z-index: 50;
	background-color: #fefefe;
	border: 1px solid #888;
	width: 440px;
	box-shadow: 0px 23px 30px -20px rgba(0, 0, 0, 0.4);
	height: 270px;
	padding: 0.2rem;
}
.invoice-hard-copy-modal-content .modal-header {
	min-height: 20px;
	display: flex;
	align-items: flex-start;
}

/*rename modal*/
.rename-invoice-part-modal {
	width: 400px;
	height: 230px;
}

.renaming-invoic-part {
	height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.renaming-invoice-buttons {
	margin-top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30%;
}

.cip-bulk-update-area {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*move invoice modal*/
.move-invoice-part-modal {
	width: 400px !important;
	height: 200px !important;
}

.redirecting {
	color: #fff;
}

.moving-invoice-radio-section {
	margin-left: 20px;
}

.moving-invoice-new-name {
	width: 250px;
}

.moving-invoice-new-name-select {
	max-width: 250px;
}

.moving-invoice-spinner {
	left: calc(50% - 10px);
	top: 25px;
}

.hardcopy-invoice-modal-amount {
	display: flex;
	margin: 1.2rem 0.5rem;
}
.hardcopy-invoice-modal-amount > div {
	flex-basis: 47%;
}
.hardcopy-invoice-modal-amount .hard-copy-net-amount {
	border: 1px solid #d1d1d1;
	padding: 3px;
	background-color: #424242;
	color: #fff !important;
	border-radius: 3px;
}
.hardcopy-invoice-modal-amount .hard-copy-net-amount label {
	color: #fff;
}

.label-cip-hardcopy-value {
	min-width: 63px;
}

.cip-modal-container {
	margin: 0 4px;
}

.tsa-live-grid-container {
	max-height: calc(95vh - 175px);
	overflow-y: auto;
}

.tsa-live-grid-conatianer-one-row {
	overflow-y: hidden;
}

.live-grid-import-invoice {
	max-height: calc(95vh - 220px) !important;
}

.live-grid-sub-header {
	display: flex;
	min-height: 25px;
	align-items: center;
}
.live-grid-sub-header > div:first-child {
	flex-basis: calc(100% - 70px);
	border-left: 1px solid #e8e8e8;
}
.live-grid-sub-header > div:last-child {
	flex-grow: 1;
	border-right: 1px solid #e8e8e8;
}

.live-grid-sub-row {
	max-height: 300px;
	overflow-y: auto;
	display: flex;
}
.live-grid-sub-row > div:first-child {
	flex-basis: calc(100% - 70px);
}
.live-grid-sub-row > div:last-child {
	flex-grow: 1;
	border-right: 1px solid #e8e8e8;
}

.live-grid-one-row {
	max-height: calc(90vh - 175px) !important;
}

.live-grid-row {
	min-height: 25px;
	margin: 1px 2px 1px 1px;
}
.live-grid-row:hover {
	background: #fcfcfc;
}

.live-grid-header-cell {
	display: flex;
	align-items: center;
	min-height: 25px;
	position: relative;
	border-top: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
}

.live-grid-column {
	border-right: none;
	border-left: none;
	min-height: 25px;
}

.live-grid-sub-column {
	min-height: 25px;
	display: flex;
	align-items: center;
	border-left: 1px solid #e8e8e8;
}
.live-grid-sub-column > div:first-child {
	display: flex;
	align-items: center;
}

.custom-indent {
	margin-left: 10px;
}

.live-grid-icon-container {
	position: relative;
}

.live-grid-spinner {
	bottom: calc(50% - 1px);
}

.live-grid-first-colum {
	position: relative;
}

.live-grid-parent-icon {
	min-width: 9px;
}

.live-attention-text {
	color: #444;
	font-style: italic;
}

.live-normal-text {
	color: #444;
}

.live-light-normal-text {
	color: #000;
}

.live-attention {
	color: #e76b1b;
}

.live-negative {
	color: var(--negative-color);
}

.live-heavy-negative {
	color: var(--negative-color);
	font-weight: 600;
}

.hide-border-left {
	border-left: none !important;
	border-right: 1px solid #e8e8e8;
}

.live-grid-footer {
	display: flex;
	align-items: center;
}

.live-grid-result {
	min-height: 70px;
	border: 1px solid #424242;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0.2rem auto;
	width: 90vw;
	font-size: 120%;
	white-space: nowrap;
	flex-direction: column;
	padding: 0.3rem auto;
}

.live-grid-success {
	color: #309b27;
	border-color: #309b27;
	background: #f7fdf7;
}

.live-grid-fail {
	color: #dc503c;
	border-color: #dc503c;
	background: #fbebe9;
}

.cip-h3 {
	display: block;
	font-size: 1.17em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}

.efo-main-container {
	overflow: auto;
	max-height: calc(95vh - 50px);
	overflow-x: hidden;
}

.efo-main-section {
	border: 1px solid #e8e8e8;
	margin: 2px 5px;
}

.efo-main-header {
	display: flex;
	align-items: center;
	min-height: 25px;
	cursor: pointer;
}
.efo-main-header:hover {
	background: #fafafa;
}

.eof-label-right-align {
	flex-basis: 200px;
	text-align: right;
}

.eof-live-grid-container {
	margin-left: 45px !important;
}

.eof-live-grid-area {
	width: calc(90vw - 45px) !important;
}

.eop-main-content {
	width: 100% !important;
}

.eof-section-contaier {
	position: absolute;
}

.eof-table-container {
	margin: 0 2px 0 45px;
}

.eof-table-header {
	min-height: 22px;
	display: flex;
	align-items: center;
	margin-bottom: 2px;
}

.eof-table-left-margin {
	padding-left: 15px !important;
}

.eof-ready-run {
	color: #309b27;
	border: 1px solid #e8e8e8;
}

.eof-not-ready-run {
	color: #dc503c;
	border: 1px solid #e8e8e8;
}

.eof-ready-need-confirm {
	border: 1px solid #dc503c;
	padding: 5px 5px 10px 5px;
	margin: 0.2rem auto;
	width: 50vw;
	min-height: 100px;
}

.efo-ready-note-list {
	margin: 5px 0 10px 30px;
}
.efo-ready-note-list li {
	margin: 2px 0;
}

.efo-ready-check-list {
	margin: 5px 0 10px 0;
}

.eof-table-grid {
	display: grid !important;
	grid-template-columns: 8fr 28fr 4fr;
}
@media screen and (max-width: 1200px) {
	.eof-table-grid {
		grid-template-columns: 12fr 23fr 5fr;
	}
}

.eof-summay-item {
	min-height: 21px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.eof-summary-table-container {
	border: none;
}

.eof-summary-sub-header {
	margin: 0.2rem 0;
	color: #999;
}

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

.hiding-button {
	background: transparent;
	border: none;
	outline: none;
}

#reportViewer1 {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	overflow: hidden;
	clear: both;
	width: calc(100vw - 12px) !important;
}

.telerik-report-viewer {
	position: relative;
}

.virtual-button-area {
	position: absolute;
	z-index: 200;
	left: 117px;
	top: 11px;
}

.telerik-virtual-button {
	background: #edebeb;
	width: 48px;
	height: 35px;
	cursor: pointer;
}
.telerik-virtual-button:hover {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.2) 100%);
}

.telerik-report-viewer-content {
	width: 100% !important;
	height: 95vh !important;
}

.work-order-container {
	background: var(--work-order-container-background-color);
	color: var(--work-order-container-color);
	padding: 6px 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12.1px !important;
	font-weight: 200;
	min-height: 35px;
	flex-wrap: wrap;
	transition: all 0.5s ease-in-out;
}
.work-order-container > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.work-order-container i {
	margin-top: 5px;
}
.work-order-container.work-order-disable {
	background: #9e9e9e !important;
}

.work-order-button-area {
	display: flex;
}

.work-order-button {
	margin-right: 1rem;
}

.grid-WOC {
	max-height: calc(100vh - 115px - 35px) !important;
}

.sidebar-WOC {
	max-height: calc(100vh - 35px - 35px) !important;
}

.subgrid-WOC {
	max-height: calc(100vh - 270px - 35px) !important;
}

.tab-main-container-WOC {
	max-height: calc(100vh - 145px - 35px) !important;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
	transition: all 0.8s ease;
}

.slide-fade-leave-active {
	transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
	transform: translateX(10px);
	opacity: 0;
}

.transition-text {
	opacity: 0;
}

.work-order-hyperlink-container {
	max-width: 650px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 2px;
	font-weight: 500;
	cursor: pointer;
}
.work-order-hyperlink-container a {
	color: var(--work-order-container-hyperlink-color);
	text-decoration: underline;
}
.work-order-hyperlink-container a:hover {
	text-decoration: underline;
}

/*# sourceMappingURL=index.css.map */