@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

.eform-details-container {
    display: flex;
    flex-direction: row;
	flex: 1;
    align-items: center;
}

.eform-progress {
    margin-right: 12px;
}
.eform-progress > div.c100 {
	font-size: 48px;
	margin: 0;
}
.eform-progress > div.c100 > span {
	color: #000;
}

.eform-details {
/*	display: flex;
    flex-direction: column; */
	line-height: 20px;
}
.eform-details .grid-tile-header-text {
	margin-bottom: 0;
}


.tombstone-container {
}
.tombstone-container ul.tombstone-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.tombstone-container ul.tombstone-list li {
	display: inline;
}
.tombstone-label {
	font-weight: 600;
	margin-right: 4px;
}
.tombstone-value {
	margin-right: 8px;
}


.formlet-grid-item-content {
	padding: 0;
}

.formlet-container {
	width: 100%;
}

.formlet-selector {
	min-width: 225px;
	max-width: 225px;
	clear: both;
	position: relative;
	z-index: 1;
}

.formlet-selector .grid-tile-header-text {
	display: block;
	padding-left: 12px;
}

.formlet-main-section {
	width: 100%;
	clear: both;
	min-height: 645px;
	background-color: #fff; /* #f2f5f5 */
	position: relative;
	z-index: 0;
	overflow: auto;
}


.formlet-content-section {
	background-color: #fff; /* #f2f5f5 */
	padding: 15px;
}



.formlet-list {
}
.formlet-list .title a {
	text-decoration: none;
}

.step-state {
    display: flex;
    align-items: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-right: 8px;
	background: #c9d6d9;
	color: #000;
	border: 2px solid #c9d6d9;
}

.step-state > i {
	z-index: 3;
}

.step-state > i:before {
	content: "\f303"; /* Pencil-alt */
}
.step-state > i.fa-formlet-details:before {
	content: "\f303"; /* Pencil-alt */
}
.step-state > i.fa-formlet-list:before {
	content: "\f0cb"; /* List-OL */
}
.step-state > i.fa-formlet-attachmentlist:before,
.step-state > i.fa-formlet-attachmentdetails:before {
	content: "\f0c6"; /* Paperclip */
}
.step-state > i.fa-formlet-excelimport:before {
	content: "\f1c3"; /* File-Excel */
}
.step-state > i.fa-formlet-ss:before {
	content: "\f11e"; /* Flag-checkered */
}
.step-state > i.fa-formlet-budget:before {
	content: "\f51e"; /* Coins */
}
.step-state > i.fa-formlet-submissionlist:before,
.step-state > i.fa-formlet-referencedatalist:before {
	content: "\f03a"; /* List */
}

.formlet-issues,
.formlet-no-issues {
	position: absolute;
	right: 2px;
	bottom: -6px;
	z-index: 4;
	border-radius: 50%;
	background: #fff;
	font-size: 12px;
}

.formlet-issues > i,
.formlet-no-issues > i {
	padding: 2px;
	font-size: 12px;
}

.formlet-container {
	position: relative; /* Because .formlet-bar is absolutely positioned */
}
.formlet-container, ul.formlet-list {
	display: flex;
	display: -webkit-flex;
	background-color: #f2f5f5; /* #fff */
	overflow-y: hidden;
}

ul.form-document-list {
	list-style-type: none;
	margin: 0;
	padding-top: 12px;
	padding-right: 12px;
	padding-bottom: 16px;
	padding-left: 30px;
	flex-direction: column;
	position: relative;
}
ul.form-document-list li {
    position: relative;
}
ul.form-document-list li a i {
	margin-right: 8px;
}

ul.formlet-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	flex-direction: column;
	position: relative;
}
ul.formlet-list li {
    position: relative;
}

ul.formlet-list li:last-child > a .step-title span.formlet-no-issues,
ul.formlet-list li:last-child > a .step-title span.formlet-issues {
	display: none;
}

ul.formlet-list li > a {
	padding: 8px 0;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

ul.formlet-list li > a,
.step-title {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	-o-align-items: center;
	-ms-align-items: center;
}

ul.formlet-list li.margin-0 > a { margin-left: 14px; }
ul.formlet-list li.margin-1 > a { margin-left: 28px; }
ul.formlet-list li.margin-2 > a { margin-left: 42px; }
ul.formlet-list li.margin-3 > a { margin-left: 56px; }
ul.formlet-list li.margin-4 > a { margin-left: 70px; }
ul.formlet-list li.margin-5 > a { margin-left: 84px; }

ul.formlet-list li.margin-0[aria-selected="true"] > a,
ul.formlet-list li.margin-0[aria-selected="false"]:not(.plain-text) > a:hover {
	margin-left: 0px;
	padding-left: 14px;
}

ul.formlet-list li.margin-1[aria-selected="true"] > a,
ul.formlet-list li.margin-1[aria-selected="false"]:not(.plain-text) > a:hover {
	margin-left: 0px;
	padding-left: 28px;
}

ul.formlet-list li.margin-2[aria-selected="true"] > a,
ul.formlet-list li.margin-2[aria-selected="false"]:not(.plain-text) > a:hover {
	margin-left: 0px;
	padding-left: 42px;
}

ul.formlet-list li.margin-3[aria-selected="true"] > a,
ul.formlet-list li.margin-3[aria-selected="false"]:not(.plain-text) > a:hover {
	margin-left: 0px;
	padding-left: 56px;
}

ul.formlet-list li.margin-4[aria-selected="true"] > a,
ul.formlet-list li.margin-4[aria-selected="false"]:not(.plain-text) > a:hover {
	margin-left: 0px;
	padding-left: 70px;
}

ul.formlet-list li.margin-5[aria-selected="true"] > a,
ul.formlet-list li.margin-5[aria-selected="false"]:not(.plain-text) > a:hover {
	margin-left: 0px;
	padding-left: 84px;
}

ul.formlet-list li:not(.plain-text).margin-0:before { width: 14px; }
ul.formlet-list li:not(.plain-text).margin-1:before { width: 26px; }
ul.formlet-list li:not(.plain-text).margin-2:before { width: 40px; }
ul.formlet-list li:not(.plain-text).margin-3:before { width: 54px; }
ul.formlet-list li:not(.plain-text).margin-4:before { width: 68px; }
ul.formlet-list li:not(.plain-text).margin-5:before { width: 82px; }

ul.formlet-list-1 li:not(.plain-text).margin-0:before {
	width: 0px;
}

ul.formlet-list li[aria-selected="true"] > a {
	background-color: #fff; /* #f2f5f5 */
	padding-left: 20px;
}


ul.formlet-list li[aria-selected="false"]:not(.plain-text) > a:hover {
}

ul.formlet-list li[aria-selected="false"]:not(.plain-text):hover {
/*	background-color: #4f5a63; */
}

ul.formlet-list li[aria-selected="false"]:not(.plain-text):hover .step-text {
/*	color: #fff; */
}

ul.formlet-list li[aria-selected="false"].plain-text > div {
	margin-left: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
}

ul.formlet-list li.margin-0[aria-selected="false"].plain-text > div { padding-left: 12px; }
ul.formlet-list li.margin-1[aria-selected="false"].plain-text > div { padding-left: 20px; }
ul.formlet-list li.margin-2[aria-selected="false"].plain-text > div { padding-left: 28px; }
ul.formlet-list li.margin-3[aria-selected="false"].plain-text > div { padding-left: 36px; }
ul.formlet-list li.margin-4[aria-selected="false"].plain-text > div { padding-left: 44px; }
ul.formlet-list li.margin-5[aria-selected="false"].plain-text > div { padding-left: 52px; }

ul.formlet-list li[aria-selected="false"].plain-text {
	margin-left: 8px;
}

ul.formlet-list li[aria-selected="true"] .step-text {
	color: #2f62ae;
	font-weight: 600;
}

ul.formlet-list li a {
	text-decoration: none;
	color: #222;
	padding: 8px 0;	
}

ul.formlet-list li:not(.plain-text):before {
	position: absolute;
	content: '';
	height: 2px; /* Bar width */
	background: #c9d6d9;
	left: 8px;
	top: 50%;
}

.formlet-bar {
    position: absolute;
	left: 8px;
    top: 0px;
    width: 2px; /* Bar width */
    height: 100%;
    z-index: 2;
    background-color: #c9d6d9;
}

.step-title.plain-text {
	font-size: larger;
	font-weight: 600;
	padding-left: 12px;
	width: 100%;
}
.step-title.plain-text span {
	color: #000;
}

.step-title {
	margin-right: 12px;
	z-index: 3;
}

.step-title > span:first-child {
	position: relative;
}

.step-text {
	color: #000;
	line-height: 16px;
}


.dots {
	text-align: center;
	margin-top: 15px;
}
.dot {
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbbbbb;
	border: none;
	border-radius: 50%;
	display: inline-block;
	opacity: 0.3;
}
.dot.active {
	opacity: 1;
}
.dot.finish {
	background-color: #4caf50;
}

.formlet-content-wrapper {
/*	min-height: 600px; */
}

.formlet-content-wrapper .g3-row {
	width: 100%;
}

.formlet-content-wrapper div.g3-row {
	display: flex;
    display: -webkit-flex;
    flex-direction: row;
	align-items: center;
	width: 100%;
	margin-bottom: 8px;
}

.formlet-content-wrapper .g3-row:after {
	content: "";
	display: table;
	clear: both;
}

.formlet-content-wrapper .g3-row .g3-labelField {
	width: 45%;
	position: relative;
	padding-right: 12px;
}

.formlet-content-wrapper .mandatory-wrapper {
	display: inline-flex;
}

abbr.required {
    color: #d32f2f;
    font-size: 1.2em;
    font-weight: bold;
}
abbr.required:hover {
    color: #b71c1c;
}

.formlet-content-wrapper .g3-row .g3-valueField {
	width: 55%;
	position: relative;
	padding-left: 4px;
}

.formlet-content-wrapper .g3-row .g3-valueField > span {
}

.formlet-content-wrapper .g3-row .g3-valueField .ui-inputfield {
}

.formlet-content-wrapper .g3-labelFieldLeft {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.formlet-content-section .g3-m2mCheckListField fieldset,
.formlet-content-wrapper .g3-row .g3-valueField fieldset {
	display: inline-block;
}

.formlet-content-wrapper .g3-row .g3-valueField div.ui-selectonemenu .ui-selectonemenu-trigger,
.formlet-content-wrapper .g3-row .g3-valueField div.ui-fluid div.ui-selectonemenu .ui-selectonemenu-trigger {
}

.formlet-content-wrapper textarea {
	display: block;
}
.formlet-title-container {
	display: inline-block;
	padding: 6px 12px;
	position: relative;
}

.formlet-title-container .grid-tile-header-text {
	padding-left: 0;
}

.form-header-container {
/*  background-color: #f2f5f5; */
    padding: 12px;
    position: relative;									 
}

.form-header-container .grid-tile-header-text {
	margin-top: 0px;
}


.formlet-readonly-textarea {
	display: block;
}

.form-summary-label {
	padding-right: 6px;
}
.form-summary-label,
.form-current-page-label {
}


.formlet-content-section .g3-scrollingGrid .ui-datatable,
.formlet-content-section .g3-scrollingGrid .ui-treetable,
.formlet-content-section .hide-datatable-header-no-border td {
	background-color: #fff;
}
.formlet-content-section .g3-scrollingGrid .ui-datatable table tbody td,
.formlet-content-section .g3-scrollingGrid .ui-treetable table tbody td,
.formlet-content-section .g3-scrollingGrid .ui-datatable table thead th,
.formlet-content-section .g3-scrollingGrid .ui-treetable table thead th {
	padding: 2px;
}

.formlet-content-section .labelCentered {
	font-weight: bold;
	font-size: larger;
	color: #000;
	padding: 8px;
	width: 100%;
	margin-bottom: 0.25em;
}

.formlet-content-section .labelHighlighted {
	font-weight: bold;
	font-size: larger;
	color: #000;
	background-color: #fff;
	padding: 8px;
	width: 100%;
	margin-bottom: 0.25em;
}

.formlet-content-section .fieldDescription,
.formlet-content-section .fieldDescriptionLeft, 
.formlet-content-section .fieldDescriptionRight,
.formlet-content-section .fieldDescriptionCenter {
	font-size: 14px;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	display: flow-root;
}

.formlet-content-section .fieldDescription {
	text-align: justify;
}

.formlet-content-section .fieldDescriptionLeft {
	text-align: left;
}

.formlet-content-section .fieldDescriptionRight {
	text-align: right;
}

.formlet-content-section .fieldDescriptionCenter {
	text-align: center;	 	
}


.formlet-content-section .ui-state-disabled label.ui-inputfield {
	background-color: transparent;
}

.formlet-content-section .ui-state-disabled div.ui-selectonemenu-trigger {
	display: none; /* Hide the down arrow */
	background-color: transparent;
}


.formlet-content-section .form-control[disabled],
.formlet-content-section .form-control[readonly],
.formlet-content-section fieldset[disabled] .form-control,
.formlet-content-section .ui-inputfield[disabled],
.formlet-content-section .ui-inputfield[readonly],
.formlet-content-section fieldset[disabled] .ui-inputfield,
.formlet-content-section .ui-state-disabled,
.formlet-content-section .ui-widget-content .ui-state-disabled,
.formlet-content-section .ui-widget-header .ui-state-disabled {
    opacity: .85;
    filter: Alpha(Opacity=30);
	background-color: #fff;
}

textarea[readonly="readonly"], textarea[readonly], textarea[aria-readonly="true"] {
	padding-left: 0;
}