:root {
	--user-color-red: #d50000;
	--user-color-pink: #c51162;
	--user-color-purple: #aa00ff;
	--user-color-deep-purple: #6200ea;
	--user-color-indigo: #304ffe;
	--user-color-blue: #2962ff;
	--user-color-light-blue: #0091ea;
	--user-color-cyan: #00b8d4;
	--user-color-teal: #00bfa5;
	--user-color-green: #00c853;
	--user-color-light-green: #64dd17;
	--user-color-lime: #aeea00;
	--user-color-yellow: #ffd600;
	--user-color-amber: #ffab00;
	--user-color-orange: #ff6d00;	
	--user-color-deep-orange: #dd2c00;
	--user-color-background-opaticy: 0.2;
	
	--user-color-red-rgb: 213,0,0;
	--user-color-pink-rgb: 197,17,98;
	--user-color-purple-rgb: 170,0,255;
	--user-color-deep-purple-rgb: 98,0,234;
	--user-color-indigo-rgb: 48,79,254;
	--user-color-blue-rgb: 41,98,255;
	--user-color-light-blue-rgb: 0,145,234;
	--user-color-cyan-rgb: 0,184,212;
	--user-color-teal-rgb: 0,191,165;
	--user-color-green-rgb: 0,200,83;
	--user-color-light-green-rgb: 100,221,23;
	--user-color-lime-rgb: 174,234,0;
	--user-color-yellow-rgb: 255,214,0;
	--user-color-amber-rgb: 255,171,0;
	--user-color-orange-rgb: 255,109,0;	
	--user-color-deep-orange-rgb: 221,44,0;
}


.viewer-container {
    display: flex;
	flex-direction: row;
	height: calc(100% - 50px);
}

.grid-step-cell .x-grid-cell-inner{
	vertical-align: middle;
	padding: 0px;
}

div.grid-step-container {
	height: 60px;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 4px;
	margin: 2px;
	border-width: 2px; 
	border-style: solid;
	border-radius:4px;
	cursor: move;
	position: relative;
}

div.grid-step-container:after {
    content: "\f044";
    font-family: FontAwesome;
	z-index: 1;
	position: absolute;
	opacity: 0.2;
  	left: 40%;
	font-size: 40px;
 }

div.grid-step-stepId {
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

div.grid-step-data-container {
	display: flex;
	flex-direction: column;
	width: calc(100% - 30px); //40px is grid-step-stepId width
}

div.grid-step-container-selected {
	//background-color: rgba(inherit, 0.3) !important;
	//border-color: black !important;
	opacity: 0.5;
	cursor: pointer !important;
}

span.grid-step-fullname{
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:16px;
	font-weight: 600;
	color:#000000de;
}

span.grid-step-remarks{
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:14px;
	font-weight: 600;
	color:#00000099;
}

div.grid-step-container-color-1 {
	background-color: rgba(var(--user-color-red-rgb), 0.2);
	border-color: var(--user-color-red);
}

div.grid-step-container-color-1:after {
	color: var(--user-color-red);
}

div.grid-step-container-color-2 {
	background-color: rgba(var(--user-color-pink-rgb), 0.2);
	border-color: var(--user-color-pink);
}

div.grid-step-container-color-2:after {
	color: var(--user-color-pink);
}

div.grid-step-container-color-3 {
	background-color: rgba(var(--user-color-purple-rgb), 0.2);
	border-color: var(--user-color-purple);
}

div.grid-step-container-color-3:after {
	color: var(--user-color-purple);
}

div.grid-step-container-color-4 {
	background-color: rgba(var(--user-color-deep-purple-rgb), 0.2);
	border-color: var(--user-color-deep-purple);
}

div.grid-step-container-color-4:after {
	color: var(--user-color-deep-purple);
}

div.grid-step-container-color-5 {
	background-color: rgba(var(--user-color-indigo-rgb), 0.2);
	border-color: var(--user-color-indigo);
}

div.grid-step-container-color-5:after {
	color: var(--user-color-indigo);
}

div.grid-step-container-color-6 {
	background-color: rgba(var(--user-color-blue-rgb), 0.2);
	border-color: var(--user-color-blue);
}

div.grid-step-container-color-6:after {
	color: var(--user-color-blue);
}

div.grid-step-container-color-7 {
	background-color: rgba(var(--user-color-light-blue-rgb), 0.2);
	border-color: var(--user-color-light-blue);
}

div.grid-step-container-color-7:after {
	color: var(--user-color-light-blue);
}

div.grid-step-container-color-8 {
	background-color: rgba(var(--user-color-cyan-rgb), 0.2);
	border-color: var(--user-color-cyan);
}

div.grid-step-container-color-8:after {
	color: var(--user-color-cyan);
}

div.grid-step-container-color-9 {
	background-color: rgba(var(--user-color-teal-rgb), 0.2);
	border-color: var(--user-color-teal);
}

div.grid-step-container-color-9:after {
	color: var(--user-color-teal);
}

div.grid-step-container-color-10 {
	background-color: rgba(var(--user-color-green-rgb), 0.2);
	border-color: var(--user-color-green);
}

div.grid-step-container-color-10:after {
	color: var(--user-color-green);
}

div.grid-step-container-color-11 {
	background-color: rgba(var(--user-color-light-green-rgb), 0.2);
	border-color: var(--user-color-light-green);
}

div.grid-step-container-color-11:after {
	color: var(--user-color-light-green);
}

div.grid-step-container-color-12 {
	background-color: rgba(var(--user-color-lime-rgb), 0.2);
	border-color: var(--user-color-lime);
}

div.grid-step-container-color-12:after {
	color: var(--user-color-lime);
}

div.grid-step-container-color-13 {
	background-color: rgba(var(--user-color-yellow-rgb), 0.2);
	border-color: var(--user-color-yellow);
}

div.grid-step-container-color-13:after {
	color: var(--user-color-yellow);
}

div.grid-step-container-color-14 {
	background-color: rgba(var(--user-color-amber-rgb), 0.2);
	border-color: var(--user-color-amber);
}

div.grid-step-container-color-14:after {
	color: var(--user-color-amber);
}

div.grid-step-container-color-15 {
	background-color: rgba(var(--user-color-orange-rgb), 0.2);
	border-color: var(--user-color-orange);
}

div.grid-step-container-color-15:after {
	color: var(--user-color-orange);
}

div.grid-step-container-color-16 {
	background-color: rgba(var(--user-color-deep-orange-rgb), 0.2);
	border-color: var(--user-color-deep-orange);
}

div.grid-step-container-color-16:after {
	color: var(--user-color-deep-orange);
}

.recipients-grid-toolbar {
	background: white;
}

.recipients-grid-toolbar-label {
	font-size: 20px;
	font-weight: 600;
}

/*Thumbnails sidebar change direction*/

.left-sidebar .fv__ui-sidebar-dragger {
    visibility: hidden;
}

.right-sidebar {
	flex-direction: row-reverse !important;
}

.right-sidebar .fv__ui-sidebar-nav-ctrl{
	margin-right: 5px;
	margin-left: 0px !important;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
}

.right-sidebar .fv__ui-sidebar-nav-ctrl.active{
	border-left: none;
	border-right-style: solid !important;
	border-right-width: 2px;
	border-right-color: rgb(225, 225, 225);
}

.right-sidebar .fv__ui-sidebar-dragger {
    visibility: hidden;
}

/*toolbar*/

.fv__ui-editable-dropdown {
	margin: 8px;
}

/*drag and drop ghost*/

#signature-item-ghost {
	border-width: 2px;
	border-style: solid;
	border-radius: 4px;
	position: absolute;
	top: -1000px;
	display: flex;
	flex-direction: row;
	align-items: center;
 	justify-content: center;
}

#signature-item-ghost:after {
	content: '\f044';
	font-family: FontAwesome;
	position: absolute;
	opacity: 0.4;
  	left: 40%;
}

/*annotation*/

.signature-item {
	border-width: 2px;
	border-style: solid;
	border-radius: 4px;
	position: absolute;
	width: 200px;
	height: 100px;
	z-index: 28;
	display: flex;
	flex-direction: row;
	align-items: center;
 	justify-content: center;
	cursor: move;
}

.signature-item:after {
	content: '\f044';
	font-family: FontAwesome;
	position: absolute;
	opacity: 0.4;
  	left: 40%;
}