//SSS4
//_Version: 1.0.38

.Warning 
{
	color: #f80;
}


.Border { border:1px solid #888; }
.BorderNoTop { border:1px solid #888; border-top:0; }

.TopBGColor { background-color:#222 !important; }
.BGColor { background-color:#fff !important; }
.SecondBGColor { background-color:#1e2b3c !important; }
.SecondFGColor { color:#fff !important; }

.TranslucidBG { background-color:rgba(1,1,1,0.85) !important; border: 1px solid rgba(1,1,1,0.5) } 

.Padding { padding:20px !important; }

.NoPadding { padding:0 !important; }
.NoPaddingContainer { padding:0 !important; }

.TopMargin { margin-top:20px !important; } 
.BottomMargin { margin-bottom:20px !important; } 

.SpacedLine { line-height:30px; }

.Double { width:45%;}
.Min {min-width:350px;} 

.BoxShadow
{
	box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
}


.W100p { width:100% !important }

.CenteredWhiteText
{
	color: #fff;
	text-align: center;
}

a.GridRefreshButton
{
	margin-right:5px;
}

tbody.GridRows
{
	overflow-y: scroll;
	overflow-x: hidden;
}

table.Grid, th.Grid, td.Grid
{
	border: 1px solid #4a4a4a;
	padding:4px;
	color: #ccc;
}

table.Grid
{
	border-collapse: collapse;
	border: 0px;
	width: 100%;
	font-size: 14px;
	-webkit-overflow-scrolling: touch;
	font-family:Verdana,Arial;
	background-color: #202530;
}

table.Grid thead
{
	top: 0;
}

// for grids in general
table.AlternateRowsColors tr:nth-child(2n+1)
{
	background-color:#2b303b;
}
// for grids with Expanded rows
table.AlternateRowsColorsExpendedGrids tr:nth-child(4n+1)
{
	background-color:#2b303b;
}

.BlueGridBackgroundColor
{
	background-color: #202530;
}

.GridSCC thead
{
	position: sticky;
	top: -1px;
	z-index: 1;
}

/* ------------------------------- Dialog (pop-up) Style ------------------------------- */

dialog
{
	margin: auto;
	border: none;
	border-radius: 0.5rem;
	padding: 0px;
}
dialog::backdrop
{
	background-color: rgba(0,0,0,0.4);
	backdrop-filter: blur(2px);
}
dialog[open]
{
	animation: fadeIn 0.3s ease;
}
@keyframes fadeIn
{
	from
	{
		opacity: 0;
		transform: translateY(-10px);
	}
	to
	{
		opacity: 1;
		transform: translateY(0); 
	}
}

dialog #dialog-confirm-message,
dialog #dialog-inform-message
{
	padding:30px;
}
dialog #dialog-confirm-buttons-container
{
	display: flex;
	justify-content: space-between;
	background-color: #e8e8e8;
	border-radius: 0px 0px 0.5rem 0.5rem;
	padding: 15px 30px;
}
dialog #dialog-inform-button-container
{
	display: flex;
	justify-content: center;
	background-color: #e8e8e8;
	border-radius: 0px 0px 0.5rem 0.5rem;
	padding: 15px 30px;
}

/* ------------------------------- */


.ViewMaxW { max-width:1500px !important; }
@media (any-pointer: coarse)
{
	.ViewMaxW { max-width:950px !important; }
}

.Hidden { display: none }

.BigFontSize { font-size:36px; }
@media (any-pointer: coarse) { .BigFontSize { font-size: 68px !important;  } }

.Shadow 
{
	-moz-box-shadow:0px 0px 10px 10px rgba(0,0,0,0.75); -webkit-box-shadow:0px 0px 10px 10px rgba(0,0,0,0.75); box-shadow:0px 0px 10px 10px rgba(0,0,0,0.75);
}

.OverCenter 
{
	width:unset !important ; height:unset !important;  max-height:100vh !important;
	position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);	
	-moz-box-shadow:0px 0px 10px 10px rgba(0,0,0,0.25); -webkit-box-shadow:0px 0px 10px 10px rgba(0,0,0,0.25); box-shadow:0px 0px 10px 10px rgba(0,0,0,0.25);
}

.OverLeft
{
	width:unset !important ;height:unset !important;
	position: fixed;top: 50%;left: 0;transform: translate(0, -50%);	
}
.OverRight
{
	width:unset !important ;height:unset !important;
	position: fixed;top: 50%;right: 0;transform: translate(0, -50%);
	max-height:100%; overflow:auto;
}
.OverTop
{
	width:unset !important ;height:unset !important;
	position: fixed;top: 0;left: 50%;transform: translate(-50%,0);	
}
.OverBottom
{
	width:unset !important ;height:unset !important;
	position: fixed;bottom: 0;left: 50%;transform: translate(-50%,0);	
}

.OverTopLeft
{
	width:unset !important ;height:unset !important;
	position: fixed;top: 0;left:0; 	
}

.OverTopRight
{
	width:unset !important ;height:unset !important;
	position: fixed;top: 0;right:0; 	
}

.OverBottomLeft
{
	width:unset !important ;height:unset !important;
	position: fixed;bottom: 0;left:0; 	
}

.VerticalTopContainer { vertical-align:top !important; }

.LeftContainer { text-align:left !important; }
.RightContainer { text-align:right !important; }

.Rounded 
{
	border-radius: 4px;
}

.TopBorder { border-top: 1px solid #eee }

.HI { width:50px; text-align:center; color:#000; padding:2px; margin:1px; float:left; } 
.BGLightGreen { background-color:#0f0; }
.BGSilver { background-color:#aaa; }
.BGGray { background-color:#777; }
.BGYellow { background-color:#aa0; }
.BGGreen { background-color:#0a0; }
.BGRed { background-color:#a00; }
.BGOrange { background-color:#f80; }
.BGBlue { background-color:#6af; }
.BGBlack { background-color:#000 !important; border:1px solid #888; }




div.Main
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center; font-family: Verdana;
	text-align:center !important;
}

div.Over
{
	position:fixed;
	width:100%; height:100%;
	font-family: Verdana;
}


div.Canvas
{
	-webkit-overflow-scrolling: touch;   
	vertical-align: top;
	background-color: #111;
	border: 1px solid #2d3e48 !important;
}

label
{
	xxxdisplay: inline-block;
	width: 100%;
	text-align: left; font-size:16px; color:#888; margin-top:8px;
}
@media (any-pointer: coarse)
{
	label
	{
		font-size:34px;
		padding: 50 0 10 0;
	}
}

.Label { font-size:16px; color:#444; }

div.CanvasTitle
{
	font-size:14px; background-color:rgba(128,128,128,0.25); padding:6px 20px 6px 15px; display:inline-block; color:#fff;
	border-radius: 2px 2px 6px 6px; letter-spacing:1px; 
}
@media (any-pointer: coarse)
{
	div.CanvasTitle { font-size:38px;  border-radius: 2px 0 55px 0; padding-right:50px;}
}


.Icon
{
	font-size: 24px;
}
@media (any-pointer: coarse)
{
	.Icon
	{
		font-size: 66px;
	}
}


.SSCForm
{
	text-align:left !important;
}



.CoreStepCanceled 
{
	background-image:	linear-gradient(  25deg, transparent,transparent,transparent,transparent,transparent,red,transparent,transparent,transparent,transparent,transparent),
						linear-gradient( -25deg, transparent,transparent,transparent,transparent,transparent,red,transparent,transparent,transparent,transparent,transparent);
}



.H10vh { height:10vh !important }
.H15vh { height:15vh !important }
.H20vh { height:20vh !important }
.H30vh { height:30vh !important }
.H40vh { height:40vh !important }
.H50vh { height:50vh !important }
.H60vh { height:60vh !important }
.H70vh { height:70vh !important }
.H80vh { height:80vh !important }

.H90vh { height:90vh !important }
.H100vh { height:100vh !important }




div.CurtainSSC
{
	position:fixed; top:0; left:0;
	width:100%; height:100%;
	background-color: rgba(0,0,0,0.75);
	overflow:auto;
}



div.Message
{
	padding:20px; width:100%; text-align:center; justify-content:center;
	color:#fff;
	background-color:#000; border: 1px solid #ccc;
	-moz-border-radius:4px; -webkit-border-radius:5px;
}


.MinW { min-width:200px !important; }
.MinTextW { min-width:500px !important; }
@media (any-pointer: coarse) { .MinTextW { min-width:100% !important; } }

.MaxW { max-width:200px !important; }
.MaxTextW { max-width:500px !important; }
@media (any-pointer: coarse) { .MaxTextW { max-width:100% !important; } }

.NicePadding { padding:15px !important; }
.NicePaddingContainer { padding:15px !important; }


.VoidButton
{
	background-color: transparent;
	color: #d13939;
}
.VoidButton:hover
{
	background-color: transparent;
	color: #e88383;
}
.VoidButton:disabled
{
	background-color: transparent;
	color: #aeaeae;
	cursor: unset;
}

button
{
	margin-top: 28px;
	cursor:hand; cursor:pointer;
	height: 41px;
	width: 156px;
	color: #fff;	
	background-color: #06a;
	xxletter-spacing: 0.2px;
	font-size: 14px;
	padding: 14px;
	text-decoration: none;
	border:0px; -moz-border-radius:4px; -webkit-border-radius:5px;
	text-align: center;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
	white-space: nowrap;
	margin:5px;
}
@media (any-pointer: coarse) { button { width:40%;  } }
button:hover 
{ 
	background-color: #09e;
	transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; 
}

button.NoIcon { font-size:16px; }

button:disabled
{
	background-color: #06a;
	opacity: 0.5;
	cursor: unset;
}







.CoreGrid
{
	display:flex;
	flex-direction:column;
	row-gap:15px;
	margin-bottom:20px;
}



input,select,radio,textarea { xxwidth:100%; background-color:#000; color:#fff; border: 1px solid #555; outline: 0; }
@media (any-pointer: coarse) { input,select,radio { font-size:16px; }  }


.ShortField { min-width:100px; }
.MiddleField { min-width:300px; }
.LongField { min-width:500px; }

//textarea { height:150px !important; } 
textarea { height:100% !important; min-height:15vh; } 

input:disabled 
{
	background-color: rgba(255,255,255,0); border: 1px solid rgba(0,0,0,0);
}

input[type="radio"] { width:unset; }
input[type="checkbox"] { width:unset; }


input,select:-webkit-autofill 
{ 
	//-webkit-background-clip: text;
	//-webkit-text-fill-color:#fff;
}

#Confirmation
{
	position: absolute;
}

#Information
{
	position: absolute;
}

div.Mobile
{
	position:absolute;
}


span.MobileLabel
{
	color:#444; width:100%; font-size:14px; color:#888;
}


.MobileInput { font-size:16px; width:100%;  background-color:#fff; color:#000; border: 1px solid #888; outline: 0; padding:3px; 

button.MobileButton
{
	border-radius: 35px;
	background-color:#fff;  border: 1px solid #888;
	font-size:16px; color:#000;
	width:70%;
	height:50px;
}

button.MobileCircle
{
	max-height:70px !important; max-width:70px !important;
	min-height:70px !important; min-width:70px !important;
	border-radius: 35px;	padding:0;
	background-color:#fff;  border: 1px solid #888;
}




.MobileNiceRadio div {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2px;
	justify-content: center;
}

.MobileNiceRadio input[type="radio"] {
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.MobileNiceRadio input[type="radio"]:checked + span {
	box-shadow: 0 0 0 1px #444;
	background-color: #fff;
	z-index: 1;
	color: #000;
}

label.MobileNiceRadio {
	width: unset;
}


label.MobileNiceRadio span {
	display: block;
	cursor: pointer;
	background-color: #aaa;
	padding: 4px 14px 4px 14px;
	position: relative;
	//margin-left: .0625em;
	box-shadow: 0 0 0 1px #777;
	//letter-spacing: 1px;
	color: #777;
	text-align: center;
	transition: background-color .5s ease;
	font-size:16;
}

label.MobileNiceRadio:first-child span {
	border-radius: 6px 0 0 6px;
}

label.MobileNiceRadio:last-child span {
	border-radius: 0 6px 6px 0;
}