/* SAS-STE-Web CSS */
@media screen and (max-width: 650px) {
	#mainBox {
		width: 400px;
		margin: auto auto;
	}
	
	.keyInputArea {
		margin: 10px 19px;
	}
	
	.inputArea {
		margin: 10px 19px;
	}
}

@media screen and (min-width: 650px) {
	#mainBox {
		width: 600px;
		margin: auto auto;
	}
	.keyInputArea {
		margin: 10px 35px;
	}
	
	.inputArea {
		margin: 10px 35px;
	}
}

::-moz-selection {
  color: #000000;
  background: #aaaaaa;
}

::selection {
  color: #000000;
  background: #aaaaaa;
}

#heading {
	font-size: 50px;
	font-weight: 1000;
	text-align: center;
	margin: 70px 0px 0px 0px;
}

#version {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 30px;
}

.description {
	font-size: 20px;
}

.smallBox {
	width: 80%;
	margin: auto auto;
	padding-bottom: 10px;
	background-color: #606060;
}

.smallBoxHeading {
	width: 100%;
	background-color: #202020;
	color: #aaaaaa;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
}

.smallBoxText {
	font-size: 18px;
	color: #202020;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	font-weight: bold;
}

.smallBoxError {
	font-size: 18px;
	color: #aaaaaa;
	background-color: #902020;
	width: 100%;
	padding: 5px 0px;
	text-align: center;
	font-weight: bold;
}

.smallBoxPositive {
	font-size: 18px;
	color: #aaaaaa;
	background-color: #206520;
	width: 100%;
	padding: 5px 0px;
	text-align: center;
	font-weight: bold;
}

.smallBoxSeparator {
	background-color: #202020;
	border: none;
	width: 100%;
	height: 3px;
}

.threeGrid {
	width: 100%;
	display: grid;
	grid-template-columns: auto auto auto;
	
}

.twoGrid {
	width: 100%;
	display: grid;
	grid-template-columns: auto auto;
	
}

.fiveGrid {
	width: 100%;
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	
}

.typeSelecter {
	height: 40px;
	width: 110px;
	padding: 20px 5px 0px 5px;
	margin: auto auto;
	text-align: center;
	font-size: 18px;
	background-color: #404040;
	
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
	
}

.typeSelecter:hover {
	transform: scale(1.05);
	background-color: #252525;
	color: #aaaaaa;
	
}

.typeSelecterActive {
	height: 36px;
	width: 106px;
	padding: 17px 5px 1px 5px;
	margin: auto auto;
	text-align: center;
	font-size: 18px;
	background-color: #303030;
	border: solid 3px #202020;
	
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
	
}

.typeSelecterActive:hover {
	transform: scale(1.07);
	background-color: #252525;
	color: #aaaaaa;
	
}

.radioButton {
	height: 30px;
	width: 40px;
	padding: 10px 0px 0px 0px;
	margin: 0px auto;
	text-align: center;
	font-size: 18px;
	background-color: #404040;
	border: solid 3px #606060;
	
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
	
}

.radioButton:hover {
	background-color: #252525;
}

.radioButtonActive {
	height: 28px;
	width: 37px;
	padding: 7px 0px 0px 0px;
	margin: 2px auto;
	text-align: center;
	font-size: 18px;
	background-color: #303030;
	border: solid 3px #202020;
	
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
	
}

.radioButtonActive:hover {
	background-color: #252525;
}

.keyDisplayArea {
	width: 85%;
	height: 110px;
	inline-size: 85%;
    overflow-wrap: break-word;
	font-size: 18px;
	padding: 20px 10px;
	background-color: #303030;
	text-align: center;
	margin: 10px auto;
}

.keyInputArea {
	width: 90%;
	height: 110px;
	resize: none;
	margin: 20px 0px;
	
	font-size: 18px;
	padding: 20px 5%;
	background-color: #303030;
	color: #aaaaaa;
	text-align: center;
	border: none;
	outline: none;
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
}

.keyInputArea:focus {
	background-color: #252525;
	outline: none;
}

.button {
	width: 85%;
	height: 50px;
	background-color: #252525;
	text-align: center;
	margin: 5px auto;
	padding: 2px 10px 13px 10px;
	font-size: 20px;
	font-weight: bold;
	
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
}

.button:hover {
	transform: scale(1.07);
	background-color: #151515;
	color: #aaaaaa;
}

.inputArea {
	width: 90%;
	max-width: 90%;
	min-width: 90%;
	height: 250px;
	resize: verticle;
	margin: 20px 0px;
	
	font-size: 18px;
	padding: 20px 5%;
	background-color: #303030;
	color: #aaaaaa;
	text-align: left;
	border: none;
	outline: none;
	
	-webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
}

.inputArea:focus {
	background-color: #252525;
	outline: none;
}

.logButton {
	width: 80%;
	height: 50px;
	background-color: #181818;
	text-align: center;
	margin: 20px auto;
	padding: 2px 0px 13px 0px;
	font-size: 20px;
	font-weight: bold;
	
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
}

.logButton:hover {
	background-color: #101010;
	color: #aaaaaa;
}

/* Id specific CSS*/

#processButton {
	width: 80%;
	height: 50px;
	background-color: #202020;
	text-align: center;
	margin: 20px auto;
	padding: 2px 0px 13px 0px;
	font-size: 20px;
	font-weight: bold;
	
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
	transition-duration: 0.3s;
	cursor: pointer;
}

#processButton:hover {
	transform: scale(1.07);
	background-color: #151515;
	color: #aaaaaa;
}

#processButtonProcessing {
	width: 100%;
	height: 50px;
	background-color: #353535;
	text-align: center;
	margin: 20px auto;
	padding: 2px 0px 13px 0px;
	font-size: 20px;
	font-weight: bold;
	color: #909090;
	cursor: pointer;
	display: none;
	
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
}

#processError {
	width: 100%;
	background-color: #902020;
	text-align: center;
	margin: 20px auto;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
	color: #909090;
	display: none;
}

#logBox {
	width: 100%;
	margin: auto auto;
	background-color: #303030;
	display: none;
}

#logs {
	margin: 15px 15px;
}


/* Id specific UI change CSS*/

#functionBoxDecrypt {
	display: none;
}

#encryptExistingKeyBox {
	display: none;
}

#encryptNoKeyBox {
	display: none;
}

#decryptKeyedBox {
	display: none;
}

#decryptNoKeyBox {
	display: none;
}

#encryptAmountOne{
	display: none;
}

#encryptAmountTwoActive {
	display: none;
}

#encryptAmountThreeActive {
	display: none;
}

#encryptAmountFourActive {
	display: none;
}

#encryptAmountFiveActive {
	display: none;
}

#encryptAmountSixActive {
	display: none;
}

#encryptAmountSevenActive {
	display: none;
}

#encryptAmountEightActive {
	display: none;
}

#encryptAmountNineActive {
	display: none;
}

#encryptAmountTenActive {
	display: none;
}


#keyFormatErrorExistingKey {
	display: none;
}

#keyFormatErrorKeyed {
	display: none;
}

#keyAcceptedExistingKey {
	display: none;
}

#keyAcceptedKeyed {
	display: none;
}


/*Mobile*/
@media screen and (max-width: 900px) { 
	.smallBox {
		width: 100%;
		
	}

	.logButton {
		width: 100%;
	}

	#processButton {
		width: 100%;
	}

}