body,
html {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	font-weight: 300;
}

.index_container {
	width: 100vw;
	min-height: 100vh;
	background: #bec5ca;
	background: linear-gradient(90deg, #eef2f3, #bec5ca);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.h1 {
	font-size: 32px;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}

.index_container form {
	margin-top: 50px;
	min-height: 50vh;
	width: 70vw;
	background-color: hsla(0, 0%, 100%, .5);
	padding: 20px;
	border-radius: 10px;
	font-size: .8em;
}

.form_reminder {
	margin-bottom: 10px;
	display: inline-block;
}

.form_star {
	color: #ca1717 !important;
	font-size: 1.5em !important;
}

.form_container {
	display: grid;
	grid-template-columns: 49% 49%;
	grid-column-gap: 20px;
	column-gap: 20px;
	overflow: hidden;
	padding: 3px;
}

.form_container div {
	max-width: 100%;
}

.form_input {
	padding-bottom: 10px;
	position: relative;
}

.form_inputAddon {
	position: relative;
}

.form_text {
	display: inline-block;
	margin-bottom: 5px;
}

.form_required {
	color: #ca1717;
	position: absolute;
	top: 50%;
	transform: translateY(-30%);
	right: 2px;
	font-size: 1.5em;
}

.p-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px
}

.p-hidden-accessible input,
.p-hidden-accessible select {
	transform: scale(0)
}

select.p-inputtext {
	background: #ffffff url(../img/arr_icon.png) no-repeat right center;
}

.form_dateReset {
	position: absolute;
	top: 45%;
	right: 0;
	transform: translateY(-50%);
	height: 100%;
	padding: 0 10px;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #a01616;
}

.form_phone {
	display: flex;
	flex-grow: 1;
}

.form_phoneNumber {
	width: 30% !important;
}

.form_cascade {
	position: relative;
}

.form_cascadeSelect {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 85%;
	z-index: 100;
}

.form_overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 200vh;
	z-index: 150;
	background-color: rgba(163, 27, 27, 0);
}

.form_level {
	display: none;
	position: absolute;
	left: 143px;
	bottom: -290px;
	width: 50vw;
	height: 320px;
	z-index: 200;
	border: 1px solid rgba(0, 0, 0, .4);
	background-color: #fff
}

.form_cascadeTab {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr
}

.form_cascadeTab span {
	border: 1px solid rgba(0, 0, 0, .11);
	text-align: center;
	padding: 10px;
	font-size: 1em;
	cursor: pointer
}

.form_active {
	background-color: #efefef
}

.form_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 200vh;
	z-index: 150;
	background-color: rgba(163, 27, 27, 0)
}

.form_cascadeItems {
	overflow: scroll;
	height: 280px
}

.form_item {
	display: flex;
	justify-content: space-between;
	padding: 8px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, .219);
	cursor: pointer
}

.upload_container p,
.form_declaration p,
.form_confirmCheckbox p {
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}

.form_declaration {
	background-color: hsla(0, 0%, 100%, .5);
	padding: 5px 20px;
	text-align: justify;
	margin: 15px 0;
	position: relative;
}

.form_declaration h3,
.form_uploaded {
	text-align: center;
}

.form_declaration h3 {
	display: block;
	font-size: 15px;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}

.form_declaration input[type=checkbox] {
	margin-right: 10px;
	width: 20px;
	height: 20px;
}

.form_signatureContainer {
	position: relative;
	height: 350px;
}

.form_confirmCheckbox,
.form_signature {
	display: flex;
	align-items: center;
}

.form_signature {
	flex-direction: column;
}

.form_confirmCheckbox input[type=checkbox] {
	margin-right: 10px;
	width: 20px;
	height: 20px;
}

.form_signHeader {
	display: flex;
	margin: 20px 0;
}

.form_clear {
	margin-left: 20px;
	cursor: pointer;
}

.form_button {
	width: 60%;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.login_container {
	width: 100vw;
	min-height: 100vh;
	background: #bec5ca;
	background: linear-gradient(90deg, #eef2f3, #bec5ca);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: lighter !important;
}

.login_title {
	display: inline-block;
	font-size: 2em;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.login_card {
	width: 500px;
}

.login_container button,
.login_container input,
.login_container label {
	font-weight: lighter !important;
}

.login_button {
	width: 100%;
	margin-top: 10px;
}

i.pi {
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
}

.pi-user {
	background: url(../img/login_icon1.png) no-repeat;
	background-size: 100%;
}

.pi-lock {
	background: url(../img/login_icon2.png) no-repeat;
	background-size: 100%;
}

.admin_container {
	width: 100vw;
	min-height: 100vh;
	background: #bec5ca;
	background: linear-gradient(90deg, #eef2f3, #bec5ca);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.admin_title {
	margin-block-start: 1em;
	margin-block-end: 1em;
	font-size: 3em;
	margin-bottom: 0;
}

.admin_container .admin_form {
	margin-top: 50px;
	min-height: 50vh;
	width: 70vw;
	background-color: hsla(0, 0%, 100%, .5);
	padding: 20px;
	border-radius: 10px;
	font-size: .8em !important;
	background-color: #fff;
}

.admin_toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0;
}

.admin_column {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 16px;
}

.p-datatable-tbody td:not(.p-selection-column) {
	padding: 0 !important;
}

.admin_form td {
	font-weight: 300 !important;
}

.admin_form input[type=checkbox] {
	margin: 10px 0;
	width: 18px;
	height: 18px;
}

.p-button-icon-only {
	text-align: center;
}

.user_container {
	width: 100vw;
	min-height: 100vh;
	background: #bec5ca;
	background: linear-gradient(90deg, #eef2f3, #bec5ca);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user_title {
	margin-block-start: 1em;
	margin-block-end: 1em;
	font-size: 3em;
	margin-bottom: 0;
}

.user_container .user_form {
	margin-top: 50px;
	min-height: 50vh;
	width: 70vw;
	background-color: hsla(0, 0%, 100%, .5);
	padding: 20px;
	border-radius: 10px;
	font-size: .8em !important;
	background-color: #fff;
}

.user_toolbar {
	font-size: 0;
}

.user_column {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 16px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.user_form td {
	font-weight: 300 !important;
}

.user_form input[type=checkbox] {
	margin: 10px 0;
	width: 18px;
	height: 18px;
}

.UserForm_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 50px;
}

.UserForm_buttonList {
	width: 100%;
	padding: 10px 0;
	margin-bottom: -20px;
}

.UserForm_container form {
	margin-top: 50px;
	min-height: 50vh;
	width: 50vw;
	background-color: hsla(0, 0%, 100%, .7);
	padding: 20px;
	border-radius: 5px;
	font-size: .8em;
	box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.UserForm_container button {
	width: 100%;
	margin-top: 20px;
}

.form_container_in {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 10px 0;
}

.form_container_in label {
	margin-bottom: 10px;
	font-size: 1.1em;
}

.admin_filter {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 10px;
	column-gap: 10px;
	grid-row-gap: 10px;
	row-gap: 10px;
}

.admin_inputField {
	display: flex;
	flex-direction: column;
}

.admin_inputField label {
	font-size: .8em;
	font-weight: lighter;
	margin-bottom: 5px;
	opacity: .7;
}

.admin_toolbar2 {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.admin_inputField input {
	font-size: .9em !important;
}

._id__print {
	width: 70vw;
	margin: 30px 30px -20px;
	display: flex;
	justify-content: space-between;
	font-size: 0;
}

._id__print ._id__printButton {
	float: right;
	cursor: pointer;
}

._id__print i {
	margin: 0 5px 0 0;
	position: static;
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

._id__print span {
	font-size: 16px;
	vertical-align: middle;
}

.pi-chevron-left {
	background: url(../img/idp_icon1.png);
}

.pi-print {
	background: url(../img/idp_icon2.png);
}

.form_error {
    position: absolute;
    top: 2px;
    right: 5px;
    z-index: 100000;
    color: #a01616;
    font-size: .8em;
}

.Form_cardForm {
    margin: 20px 0;
}

.Form_card_to_buy {
    display: grid;
    grid-template-columns: 19% 10% 10% 10% 23% 23%;
    grid-column-gap: 10px;
    column-gap: 10px;
    margin: 20px 0;
}

.Form_input {
    display: flex;
    flex-direction: column;
}

.Form_input label {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

.Form_total {
    display: grid;
    grid-template-columns: repeat(3,31%);
    grid-column-gap: 20px;
    column-gap: 20px;
    margin: 20px 0;
}

.Form_uploaded {
    text-align: center;
}

.Form_uploaded p {
    text-align: left;
}

.Form_uploaded a {
    margin-left: 20px;
    font-weight: 700;
}

.Form_uploaded img {
    width: 400px;
    height: 250px;
    object-fit: contain;
}

.Form_uploaded a i {
	margin: 0 5px 0 0;
	position: static;
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.pi-download {
	background: url(../img/download_icon.png);
}

@media only screen and (max-width: 920px) {
	.index_container form {
		width: 95vw;
		padding: 10px
	}
	.form_container {
		display: block;
	}
	.p-inputgroup-addon {
	    width: 140px!important;
	}
	.p-component {
		font-size: 0.8rem;
	}
	
	.js-signature {
		width: 65%;
	}
}

/*****/
.vscomp-wrapper{height:100%!important}
.vscomp-toggle-button{border:none!important}
.vscomp-wrapper.focused .vscomp-toggle-button, .vscomp-wrapper:focus .vscomp-toggle-button{box-shadow:none;height:100%}
.vscomp-value{line-height:38px!important;height:100%!important}
.vscomp-wrapper.show-value-as-tags .vscomp-arrow{height:54px!important}

.vscomp-arrow{    background: #ffffff url(../img/arr_icon.png) no-repeat right center;width:36px;}
.vscomp-arrow::after{display:none}
#multiple-select2 .vscomp-value{line-height:72px!important;}