#pinModal{
	background-color:rgba(0,0,0,0.95);
}
#pinModal .modal-dialog{
}
.pin-code-input-container {
  position: relative;
  font-family: monospace;
  font-size: 1.5rem;
  height: 2ch;
  display: flex;
  left:0;
  align-items: center;
	user-select:none;
	-webkit-user-select:none;
}
.pin-code-input-container.background .pin-code-input-cell{
	background-color: var(--bs-body-bg);
}
.pin-code-input-container.large,
.pin-code-input-container.responsive { font-size: 2rem; }

.pin-code-input-container.small{ font-size: 1.25rem; }

.pin-code-input-container.half-circle,
.pin-code-input-container.circle{
	/*font-size: 1.25rem;*/
	height: 1.5ch;
}
.pin-code-input-container.circle .pin-code-input-cell,
.pin-code-input-container.half-circle .pin-code-input-cell{
	border-radius:50%;
}
.pin-code-input-container.circle .pin-code-input-cell{
	
}
.pin-code-input-container.half-circle .pin-code-input-cell{
	outline:none;
	border-bottom:2px solid var(--bs-border-color);
	margin-bottom:-2px;
}
.pin-code-input-container.circle .pin-code-input-element {
 
}
.pin-code-input-container .pin-code-input-element.one-time-pin {
  -webkit-text-security: initial;
  -moz-text-security: initial;	
  text-transform: uppercase;
}
.pin-code-input-container .pin-code-input-element {
	position:relative;
	
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  padding: 0;
  -webkit-text-security: disc;
  -moz-text-security: disc;
  letter-spacing: 1ch;
  color: var(--bs-body-color);
  /*padding-left: .25ch;*/
  height: 1.5ch;
  margin-bottom: .05ch;
  margin-right: -1.5ch;
  
  background: transparent;
  width: 9ch;
  z-index: 1;
  
	background:transparent !important;
	background-color:transparent !important;
	background-image:none !important;
	
	border-color:transparent !important;
	border-image:none !important;
	
	border:none !important;
	text-indent: .25ch;
	::-webkit-input-placeholder {text-indent: .25ch !important;}
	:-moz-placeholder { text-indent: .25ch !important;}
	::-moz-placeholder {text-indent: .25ch !important;}
	:-ms-input-placeholder {text-indent: .25ch !important;}
}

.pin-code-input-container .pin-code-input-cell {
  position: absolute;
  top: 0;
  bottom: 0;
  outline: 2px solid var(--bs-border-color);
  width: 1.5ch;
  z-index: 0;
}

.pin-code-input-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0.75ch 1.75ch;
  margin:0 1.5ch;
}
.pin-code-input-outer-wrap {
  display: block;
  margin:0 auto;
  position:relative;
}
.pin-code-input-container :nth-child(1 of .pin-code-input-cell){ left:0ch; }
.pin-code-input-container :nth-child(2 of .pin-code-input-cell){ left:2ch; }
.pin-code-input-container :nth-child(3 of .pin-code-input-cell){ left:4ch; }
.pin-code-input-container :nth-child(4 of .pin-code-input-cell){ left:6ch; }
.pin-code-input-container :nth-child(5 of .pin-code-input-cell){ left:8ch; }
.pin-code-input-container :nth-child(6 of .pin-code-input-cell){ left:10ch; }
.pin-code-input-container :nth-child(7 of .pin-code-input-cell){ left:12ch; }
.pin-code-input-container :nth-child(8 of .pin-code-input-cell){ left:14ch; }

[maxlength="1"].pin-code-input-element{ width:3ch; }
[maxlength="2"].pin-code-input-element{ width:5ch; }
[maxlength="3"].pin-code-input-element{ width:7ch; }
[maxlength="4"].pin-code-input-element{ width:9ch; }
[maxlength="5"].pin-code-input-element{ width:11ch; }
[maxlength="6"].pin-code-input-element{ width:13ch; }
[maxlength="7"].pin-code-input-element{ width:15ch; }
[maxlength="8"].pin-code-input-element{ width:17ch; }


.pin-code-input-container.pin-code-line-input-element .pin-code-input-cell {
	outline:none;
	border-bottom:2px solid var(--bs-border-color);
	margin-bottom:-2px;
}
.pin-code-input-wrap.is_valid~.valid-feedback, 
.pin-code-input-wrap.is_valid~.valid-tooltip,
.pin-code-input-wrap.is_invalid~.invalid-feedback, 
.pin-code-input-wrap.is_invalid~.invalid-tooltip,
.pin-code-input-container .pin-code-input-element.is_valid~.valid-feedback, 
.pin-code-input-container .pin-code-input-element.is_valid~.valid-tooltip,
.pin-code-input-container .pin-code-input-element.is_invalid~.invalid-feedback, 
.pin-code-input-container .pin-code-input-element.is_invalid~.invalid-tooltip{
    display: inline-block;
	max-width: initial;
}
/*
.pin-code-input-container.small .pin-code-input-element.is_valid~.valid-feedback > span.d-none, 
.pin-code-input-container.small .pin-code-input-element.is_valid~.valid-tooltip > span.d-none,
.pin-code-input-container.small .pin-code-input-element.is_invalid~.invalid-feedback > span.d-none, 
.pin-code-input-container.small .pin-code-input-element.is_invalid~.invalid-tooltip > span.d-none{
    display: none !important;
}
*/
.pin-code-input-container .pin-code-input-element.is_valid~.pin-code-input-cell{
	/*background-color: #198754;*/
	border-color: var(--bs-success) !important;
	outline-color: var(--bs-success) !important;	
}
.pin-code-input-container .pin-code-input-element.is_valid{
	color: var(--bs-success);
}
.pin-code-input-container .pin-code-input-element.is_invalid~.pin-code-input-cell{
	/*background-color: #dc3545;*/
	border-color: var(--bs-danger) !important;
	outline-color: var(--bs-danger) !important;
}
.pin-code-input-container .pin-code-input-element.is_invalid{
	color: var(--bs-danger);
}

.pin-code-input-outer-wrap.form-control{
	--bs-border-radius:0;
	border-radius:0;
	min-height:100%;
	display:inline-block;
}

.pin-code-input-outer-wrap.form-control{
	flex: 1 1 auto;
	display:flex;
	padding:0;
}
.form-control .pin-code-input-container{
	font-size:1.5rem;
}
.form-control .pin-code-input-container .pin-code-input-element{
	height:1.5ch;
}
.pin-code-input-outer-wrap.form-control{
	border: 1px solid transparent;	
	border-color: var(--bs-border-color);
	padding: 0.25ch 2ch 0.25ch 0ch;
}
.pin-code-input-outer-wrap.form-control .pin-code-input-wrap{
	position: relative;
	display:block;
    /*flex: 1 1 auto;*/
    /*
	width: 1%;
    min-width: 0;
	*/
	/*
	border-color: var(--bs-border-color);	
	*/
}
.form-control .pin-code-input-cell{
	background-color: var(--bs-body-bg);
}

@media(min-width: 576px) { 
	.pin-code-input-container.responsive.maxlength-6{		
		font-size: 1.5rem;		
	}
	.pin-code-input-container.responsive{
		font-size: 1.75rem;		
	}
	.pin-code-input-container.large {
		font-size: 3.5rem;
	}
}
@media(min-width: 768px) { 
	.pin-code-input-container.responsive.maxlength-6{		
		font-size: 1.5rem;		
	}
	.pin-code-input-container.responsive{
		font-size: 2.5rem;		
	}
	.pin-code-input-container.large {
		font-size: 5rem;
	}
}
@media(min-width: 992px) { 
	.pin-code-input-container.responsive.maxlength-6{		
		font-size: 3.5rem;		
	}
	.pin-code-input-container.responsive{
		font-size: 5rem;		
	}
	.pin-code-input-container.large {
		font-size: 6rem;
	}
	.form-group .pin-code-input-wrap.form-control,
	.input-group .pin-code-input-wrap.form-control{
		
	}
	.form-group .pin-code-input-container,
	.input-group .pin-code-input-container{
		font-size:1.5rem;
	}
}
@media(min-width: 1200px) { 
	.pin-code-input-container.responsive.maxlength-6{		
		font-size: 5rem;		
	}
	.pin-code-input-container.responsive{
		font-size: 7.5rem;		
	}
	.pin-code-input-container.large {
		font-size: 8rem;
	}
}
@media(min-width: 1400px) {
	.pin-code-input-container.responsive.maxlength-6{		
		font-size: 7.5rem;		
	}
	.pin-code-input-container.responsive{
		font-size: 8rem;		
	}
	.pin-code-input-container.large {
		font-size: 8rem;
	} 
}

/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* //////////// Previous PIN //////////////// */
/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */

/* No2 */
.pin-backdrop{
	background-color:rgba(0,0,0,0.75);	
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100vw;
	height:100dvh;
	display:none;
	z-index: 1035;
}
.pin-dialog-wrap{
	display:none;
	margin:0;
	width:100vw;
	height:100dvh;
	position:fixed;
	top:0;
	left:0;
	z-index: 1050;
}
.pin-dialog{
	position:absolute;
	display:inline-block;
	margin:0;
	z-index: 1051;
	width:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.pin-dialog-body{
	position:relative;	
}
.pin-backdrop.show,
.pin-backdrop.show~.pin-dialog-wrap{
	display:inline-block;
}
.box-pin-outer-wrap{
	position:relative;
	display:block;
	padding: 1.5rem 2rem;
	max-height:90dvh;
	overflow:hidden;
	overflow-y:auto;
	/*
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	
	display:inline-block;
	padding:1rem;
	*/
	padding:3rem 6rem;
	border: 1px solid transparent;
}
:root{	
	--pin-wrapper-padding: 0.5ch !important;
	--pin-wrapper-margin: 0rem 0 0.5rem 0;
	--pin-wrapper-display: flex;
	
	--pin-container-height: 2ch;
	--pin-container-font-size: 2.5rem;
	--pin-container-margin:  0, -2.5rem, -1.5ch, 0;
	
	--pin-input-letter-spacing: 1ch;
	--pin-input-indent: .25ch !important;
	--pin-input-height: 2.0ch;
	--pin-input-margin: 0, -2.5ch, 0.5ch, 0;
	
	--pin-cell-spacing: 2ch;
	--pin-cell-border: 1px solid var(--bs-border-color);
	--pin-cell-width: 1.5ch;
}
.box-pin-wrapper {
	position:relative;
	justify-content: center;
	/*text-indent: 1.5rem;*/
	
}
.form-group .box-pin-wrapper{
	bottom:-1.5ch;
	max-width:initial;
	--pin-wrapper-padding: 0 !important;
	--pin-wrapper-margin: 0 0 0 0;	
	--pin-wrapper-display: inline;
}
.box-pin-wrapper .box-pin-container.small,
.form-group .box-pin-wrapper .box-pin-container {
	--pin-container-height: 1.0ch;
	--pin-container-font-size: 2rem;	
	--pin-container-margin: 0, -2.5ch, -1.5ch, 0;
	right:0ch;
}

.box-pin-wrapper .box-pin-container.small .box-pin-input,
.form-group .box-pin-wrapper .box-pin-container .box-pin-input {	
	--pin-input-letter-spacing: 1ch;
	--pin-input-indent: .25ch !important;
	--pin-input-height: 1.25ch;
	--pin-input-margin: 0, 0, 0.5ch, 0;
	/*top:-0.75ch;*/
}
.box-pin-wrapper .box-pin-container.small .box-pin-cell,
.form-group .box-pin-wrapper .box-pin-container .box-pin-cell {
	--pin-cell-spacing: 2ch;
	--pin-cell-border: 1px solid var(--bs-border-color);
	--pin-cell-width: 1.5ch;
	bottom:-0.5ch;
}
.form-group .box-pin-wrapper .box-pin-input{
	--pin-input-margin: -1.5ch, 0, 0, 0;
}
.box-pin-wrapper .box-pin-container {
	position: relative;
	display:inline-block;
	font-family: monospace;
	font-size: var(--pin-container-font-size);
	height: var(--pin-container-height);
	
	align-items: center;
	right:-0.75ch;
	margin:var(--pin-container-margin);
	user-select:none;
	-webkit-user-select:none;
}
.box-pin-wrapper .box-pin-container input.box-pin-input{
	background:transparent;
	background-color:transparent;
	background-image:none;
	
	border-color:transparent;
	border-image:none;
	
	border:none;
}
.box-pin-wrapper .box-pin-container .box-pin-input {
	position:relative;
	font-family: inherit;
	font-size: inherit;
	border: none;
	outline: none;
	padding: 0;
	/*top:-0.5ch;*/
	letter-spacing: var(--pin-input-letter-spacing);
	-webkit-text-security: disc;
	-moz-text-security: disc;
	color: var(--bs-body-color);
	
	height: var(--pin-input-height);
	margin: var(--pin-input-margin);
	
	background: transparent;
	/*width: 9ch;*/
	z-index:10;
    
	text-indent: var(--pin-input-indent);
	::-webkit-input-placeholder {text-indent: var(--pin-input-indent) !important;}
	:-moz-placeholder { text-indent: var(--pin-input-indent) !important;}
	::-moz-placeholder {text-indent: var(--pin-input-indent) !important;}
	:-ms-input-placeholder {text-indent: var(--pin-input-indent) !important;}
}

.box-pin-wrapper .box-pin-cell {
	position: absolute;
	top: 0;
	bottom: 0;
	outline: 1px solid var(--bs-border-color);
	aspect-ratio:1/1;
	width: 1.5ch;
	z-index: 0;
	user-select:none;
	-webkit-user-select:none;
}
.box-pin-wrapper .box-pin-container.lines .box-pin-cell{	
	outline: none;
	border-bottom: 1px solid var(--bs-border-color);
	margin-bottom: -1px;
}

.box-pin-wrapper .box-pin-container.circles .box-pin-input{
	height: 1.5ch;
}
.box-pin-wrapper .box-pin-container.circles .box-pin-cell{	
	height: 1.5ch;
	border-radius:50%;
	top:55%;
	transform:translate(0%, -50%);
}
.box-pin-wrapper .box-pin-container.rectangles{
	height: 3.0ch;
}
.box-pin-wrapper .box-pin-container.rectangles .box-pin-cell {	
	aspect-ratio:1/2;
}

.box-pin-wrapper .box-pin-container .box-pin-input.is_valid~.box-pin-cell{
	/*background-color: #198754;*/
	border-color: var(--bs-success) !important;
	outline-color: var(--bs-success) !important;	
}
.box-pin-wrapper .box-pin-container .box-pin-input.is_valid{
	color: var(--bs-text-success);
}
.box-pin-wrapper .box-pin-container .box-pin-input.is_invalid~.box-pin-cell{
	/*background-color: #dc3545;*/
	border-color: var(--bs-danger) !important;
	outline-color: var(--bs-danger) !important;
}
.box-pin-wrapper .box-pin-container .box-pin-input.is_invalid{
	color: var(--bs-text-danger);
}
.box-pin-wrapper .box-pin-container .box-pin-input.is_invalid~.invalid-tooltip{
	color: var(--bs-danger) !important;
	
}
.box-pin-wrapper .box-pin-container .box-pin-input.is_valid~.valid-tooltip{
	color: var(--bs-success) !important;
	
}
.box-pin-wrapper .box-pin-container .box-pin-input.is_invalid~.invalid-tooltip,
.box-pin-wrapper .box-pin-container .box-pin-input.is_valid~.valid-tooltip{	
	display:block;
	right:auto;
	
	
	left:50%;
	transform:translate(-50%, 0%);	
	
	width:100%;
	
	background-color: var(--theme-transparent);
}
.form-group > .box-pin-wrapper .box-pin-container .box-pin-input.is_valid~.valid-tooltip,
.form-group > .box-pin-wrapper .box-pin-container .box-pin-input.is_invalid~.invalid-tooltip,
.box-pin-container.small .box-pin-input.is_valid~.valid-tooltip,
.box-pin-container.small .box-pin-input.is_invalid~.invalid-tooltip{	
	font-size:10px;
	margin-top:4px;	
	left:0;
	right:auto;
	transform:translate(0%, 0%);
}
.box-pin-wrapper {
	display:  var(--pin-wrapper-display);
	/*align-items: center;*/
	padding: var(--pin-wrapper-padding);
	margin: var(--pin-wrapper-margin);
	/*
	margin-top:0.5rem;
	margin-bottom:1rem;
	*/
	/*margin-right: -3.75rem;*/
}

[maxlength="1"].box-pin-input{ width:3ch; }
[maxlength="2"].box-pin-input{ width:5ch; }
[maxlength="3"].box-pin-input{ width:7ch; }
[maxlength="4"].box-pin-input{ width:9ch; }
[maxlength="5"].box-pin-input{ width:11ch; }
[maxlength="6"].box-pin-input{ width:13ch; }
[maxlength="7"].box-pin-input{ width:15ch; }
[maxlength="8"].box-pin-input{ width:17ch; }
.box-pin-wrapper .box-pin-cell:nth-child(2){ left:0; }
.box-pin-wrapper .box-pin-cell:nth-child(3){ left:2ch; }
.box-pin-wrapper .box-pin-cell:nth-child(4){ left:4ch; }
.box-pin-wrapper .box-pin-cell:nth-child(5){ left:6ch; }
.box-pin-wrapper .box-pin-cell:nth-child(6){ left:8ch; }
.box-pin-wrapper .box-pin-cell:nth-child(7){ left:10ch; }
.box-pin-wrapper .box-pin-cell:nth-child(8){ left:12ch; }
.box-pin-wrapper .box-pin-cell:nth-child(9){ left:14ch; }
.box-pin-wrapper .box-pin-cell:nth-child(10){ left:16ch; }

@media(min-width: 992px) { 
	.box-pin-wrapper:not(.responsive) .box-pin-container{
		font-size: 3.5rem;		
	}
	.form-group .box-pin-wrapper .box-pin-container{
		font-size:2rem;
	}
	.pin-dialog{
		max-width:75vw;
	}
/* No2 */
	.box-pin-wrapper.responsive [maxlength="1"].box-pin-input{ width:4ch; }
	.box-pin-wrapper.responsive [maxlength="2"].box-pin-input{ width:7ch; }
	.box-pin-wrapper.responsive [maxlength="3"].box-pin-input{ width:10ch; }
	.box-pin-wrapper.responsive [maxlength="4"].box-pin-input{ width:13ch; }
	.box-pin-wrapper.responsive [maxlength="5"].box-pin-input{ width:16ch; }
	.box-pin-wrapper.responsive [maxlength="6"].box-pin-input{ width:19ch; }
	.box-pin-wrapper.responsive [maxlength="7"].box-pin-input{ width:22ch; }
	.box-pin-wrapper.responsive [maxlength="8"].box-pin-input{ width:25ch; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(2){ left:0; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(3){ left:3ch; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(4){ left:6ch; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(5){ left:9ch; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(6){ left:12ch; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(7){ left:15ch; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(8){ left:18ch; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(9){ left:21ch; }
	.box-pin-wrapper.responsive .box-pin-cell:nth-child(10){ left:24ch; }
	
	.box-pin-wrapper.responsive .box-pin-container {
		font-size: 3.5rem;
		height: 3ch;
		right:0ch;
	}
	.box-pin-wrapper.responsive .box-pin-input {
		letter-spacing: 2ch;
		padding-left: .5ch !important;
		height: 2.5ch;
		margin:0;
		margin-right:-1.5ch;
		margin-bottom: .05ch;  
		top: 0;
		/*width: 9ch;*/
	}

	.box-pin-wrapper.responsive .box-pin-cell {
		outline: 2px solid var(--bs-border-color);
		width: 2.5ch;
	}
	.box-pin-wrapper.responsive .box-pin-container.lines .box-pin-cell{	
		outline:none;
		border-bottom: 2px solid var(--bs-border-color);
		margin-bottom: -2px;
	}


	.box-pin-wrapper.responsive .box-pin-container.circles .box-pin-input{
		height: 1.5ch;
	}
	.box-pin-wrapper.responsive .box-pin-container.circles .box-pin-cell{	
		height: 1.5ch;
		border-radius:50%;
		top:50%;
		transform:translate(0%, -50%);
	}
	.box-pin-wrapper.responsive .box-pin-container.rectangles{
		height: 3.0ch;
	}
	.box-pin-wrapper.responsive .box-pin-container.rectangles .box-pin-cell {	
		aspect-ratio:1/2;
	}

	.box-pin-wrapper.responsive {
		padding:0.5ch !important;
		margin-top:0.5rem;
		margin-bottom:1rem;
		max-width:100vw;
		/*margin-right: -3.75rem;*/
	}	
}
@media(min-width: 1400px) { 
	.pin-dialog{
		max-width:60vw;
	}
}

.pin-code-backdrop{
	position:fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	right:0;
	bottom:0;
	
	background-color:rgba(0,0,0,0.5);
}
.pin-code-wrapper{
	display:flex;
	position:relative;
	padding:0;
	margin:0;	
	
	margin-left:-1.5rem;
}
.pin-code-wrapper .pin-code-inner-wrapper{
	/*padding:0.25rem 0.25rem 0.05rem 0.25rem;*/
	overflow:hidden;
	display:block;
	margin:0;
	padding:0;
	
	margin-right:-1.5rem;
}
.pin-code-wrapper .pin-code-container{
	display:flex;	
	justify-content:center;
	position:relative;	
	padding:0.5rem;
	
	background-color:var(--bs-body-bg);
}
.pin-code-container .pin-code-input{
	-webkit-text-security: disc;
	-moz-text-security: disc;
	
	display:block;
  
	position:absolute;
	top:50%;
	left:0;
	width:calc(100% + 3rem);
	margin-right:-3rem;	
	overflow:hidden;
	
	font-size:2rem;
	
	transform:translate(0%, -50%);
	
	text-indent: 1.5rem;
	letter-spacing: 2.2rem;
	
	background:transparent !important;
	background-color:transparent !important;
	background-image:none !important;	
	border-color:transparent !important;
	border-image:none !important;	
	border:none !important;
	
	::-webkit-input-placeholder {text-indent:1.5rem!important;}
	:-moz-placeholder { text-indent:1.5rem!important;}
	::-moz-placeholder {text-indent:1.5rem!important;}
	:-ms-input-placeholder {text-indent:1.5rem!important;}
}
.pin-code-container .pin-code-mask{
	position:relative;
	z-index:0;
	
	outline:2px solid var(--bs-border-color);
	
	aspect-ratio: 1 / 2;
	width:2rem;
	height:3rem;
}
.pin-code-container.lines .pin-code-mask{
	
	outline:none;
	border-bottom:2px solid var(--bs-border-color);
	margin-bottom:-2px;
}
	
.pin-code-container .pin-code-mask{
	margin-right:0.5rem;
}
.pin-code-container .pin-code-mask:not(:nth-child(1)){
	margin-left:0.5rem;
}