body, html
{
    font-family: 'Helvetica', 'Arial', sans-serif;
	background-image: linear-gradient(to bottom, #293133 0%, #293133 100%); /*anthracite*/
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: #293133;	
}

.spacer
{
	height: 10px;	
}

.mydiv
{
	position: absolute;	
	width: 100%;
    height: 100%;
	min-height: 100%;
}
*/

.mybody-blue
{
	background-image: linear-gradient(to bottom, #3660D4 0%, #000080 100%); /*blue*/
}
 
.mybody-bronze
{
	background-image: linear-gradient(to bottom, #Cd7f32 0%, #432A11 100%); /*blue*/
}

.mybody-silver
{
	background-image: linear-gradient(to bottom, #C0C0C0 0%, #4E4E4E 100%); /*blue*/
}
 
.mybody-gold
{
	background-image: linear-gradient(to bottom, #FFD700 0%, #685800 100%); /*blue*/
}

.mybody-graphite
{
/*	
	background-image: linear-gradient(to bottom, #383428 0%, #1D1B15 100%); graphite
*/
	
	background-image: linear-gradient(to bottom, #293133 0%, #293133 100%); /*anthracite*/
}

.container
{
	margin: 16px auto;
	align-content: center;
}

.center
{
	padding: auto 0;
	text-align: center;
	font-size: 1.2em ;
}

.center-ft
{
	padding: auto 0;
	text-align: center;
	font-size: 0.8em ;
}

.row
{
	margin: 16px auto;
	align-content: center;
}

.card
{
	width: 40%;
	margin-top: auto;
	margin-bottom: auto;
	box-shadow: rgba(214, 230, 237, 0.12) 2px 2px 4px 2px,	rgba(214, 230, 237, 0.32) 4px 8px 20px 4px;		  
}

/*
mygraphite-	383428 1D1B15
myblue-		4169E1 3660D4
mybronze-	Cd7f32 432A11
mysilver-	C0C0C0 4E4E4E
mygold-		FFD700 685800
*/

.card-header
{
	margin-top: auto;
	margin-bottom: auto;
	justify-content: center;	
	height: 4em;	
	background-color: #4169E1 !important;
	color: whitesmoke !important;	
	display: flex;
}

.card-footer
{
	justify-content: center;
	height: 4em;
	background-color: #4169E1 !important;
	color: whitesmoke !important;	
	display: flex;	
}

.myblue
{
	background-color: #4169E1 !important;
	color: whitesmoke !important;	
}

.mybronze
{
	background-color: #CD7f32 !important;
	color: whitesmoke !important;	
}

.mygold
{
	background-color: #FFD700 !important;
	color: whitesmoke !important;	
}

.mysilver
{
	background-color: #C0C0C0 !important;
	color: whitesmoke !important;	
}

.mygraphite
{
	background-color: #293133 !important;
/*
	background-color: #383428 !important;
*/	
	color: whitesmoke !important;	
}

.card-footer h6
{
	font-size: 0.8em;
}

.btn-logon
{
	font-size: 1.6em; 
}

.social_icon span
{
	font-size: 60px;
	margin-left: 10px;
	color: #FFC312;
}

.social_icon span:hover
{
	color: white;
	cursor: pointer;
}

.social_icon
{
	position: absolute;
	right: 20px;
	top: -45px;
}

.input-group-prepend span
{
	width: 50px;
	background-color: #00AEF0;
	color: black;
	border:0 !important;
}

input:focus
{
	outline: 0 0 0 0  !important;
	box-shadow: 0 0 0 0 !important;
}

/* Applies styling only to read-only pin inputs */
.pininput[readonly]
{
	background-color: white !important;
	text-align: center;
	font-size: 1.6em;
	font-family: Verdana, sans-serif;
	letter-spacing: 0.125em;
}

/* When masking is enabled (optional JS class), hide digits */
.pininput.masked
{
	color: transparent !important;
	caret-color: black;
}

/* Container for proper overlay positioning */
.pin-input-wrapper
{
	position: relative;
	width: 100%;
}

/* General styling for the input field */
.pininput
{
	width: 100%;
	text-align: center;
	font-size: 1.6em;
	font-family: Verdana, sans-serif;
	letter-spacing: 0.3em;
	background-color: white;
	color: transparent; /* Keep digits hidden */
	caret-color: black;
	padding: 0.6em 1em;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

/* Overlay where icons (dots/squares) appear */
#pin-mask
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.4em;
	width: 100%;
	height: 100%;

	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 1.6em;
	color: #333;

	pointer-events: none;
	user-select: none;
}

.d-none
{ 
	display: none !important;
}

.remember
{
	color: white;
}

.remember input
{
	width: 20px;
	height: 20px;
	margin-left: 15px;
	margin-right: 5px;
}

.btn
{
	box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
	border-radius: .25rem !important;
	text-align: center;
	font-weight: bold !important;
	font-size: 1.2rem !important;
	border-color: silver !important;
}

.login_btn
{
	color: black;
	background-color: #00AEF0;
	width: 100px;
}

.login_btn:hover
{
	color: black;
	background-color: #98E4FF;
}

.guest_btn
{
	color: black;
	background-color: #00AEF0;
	width: 100px;
}

.guest_btn:hover
{
	color: black;
	background-color: #98E4FF;
}

.links
{
	color: white;
}

.links a
{
	margin-left: 4px;
}	

.help-block/* h3,h4,h5,h6*/
{
	color:#FF0000;
/*	
	padding-top: 1rem;
	text-align: center;
	margin: auto;
*/	
	padding: auto 0;
	text-align: center;
	font-size: 1.2em;	
}

  .pin-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pin-display {
      width: 180px;
      height: 50px;
      border: 1px solid #888;
      border-radius: 0px;
      font-size: 24px;
      letter-spacing: 16px;
      padding: 5px 12px;
      background: white;
      font-family: monospace;
      user-select: none;
      text-align: center;
      cursor: text;
    }

    .eye-icon {
      font-size: 24px;
      cursor: pointer;
      user-select: none;
    }

    .real-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
	
@media only screen and (max-width: 600px)
{
	.card
	{
		width: 100%;
	}	
}