﻿/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*@import url(https://fonts.googleapis.com/css?family=Pacifico);*/

/*basic reset*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	height: 100%;
	/*background: url(../images/default/bg.jpg);*/
	background: white;
}

body {
	font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
	width: 80%;
	margin: 5px auto;
	text-align: center;
	position: relative;
}

	#msform fieldset {
		background: rgba(211, 211, 211, 0.5);
		border: 0 none;
		border-radius: 3px;
		box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
		padding: 20px 30px;
		box-sizing: border-box;
		width: 80%;
		margin: 0 10%;
		/*stacking fieldsets above each other*/
		position: absolute;
	}
		/*Hide all except first fieldset*/
		#msform fieldset:not(:first-of-type) {
			display: none;
		}
	/*inputs*/
	#msform input, #msform textarea, #msform select {
		padding: 15px;
		border: 1px solid #ccc;
		border-radius: 3px;
		margin-bottom: 10px;
		/*width: 100%;*/
		box-sizing: border-box;
		font-family: montserrat;
		color: #2C3E50;
		font-size: 13px;
	}

		#msform input[type='checkbox'] {
			padding: 0px;
			border: 1px solid #ccc;
			border-radius: 3px;
			margin-bottom: 10px;
			width: 90%;
			box-sizing: border-box;
			font-family: montserrat;
			color: #2C3E50;
			font-size: 13px;
		}
	/*buttons*/
	#msform .action-button {
		width: 100px;
		/*background: #27AE60;*/
		background: #FB661F;
		font-weight: bold;
		color: white;
		border: 0 none;
		border-radius: 1px;
		cursor: pointer;
		padding: 10px 5px;
		margin: 10px 5px;
	}

	#msform .radio-label {
		background: #FB661F;
		color: White;
		cursor: pointer;
	}

	/*#msform .radio-label:hover 
{
   box-shadow: 0 0 0 2px white, 0 0 0 3px #FB661F !important;    
}*/

	#msform .action-button:hover, #msform .action-button:focus {
		/*box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;*/
		box-shadow: 0 0 0 2px white, 0 0 0 3px #FB661F;
	}

.ui-state-hover1 {
	border-color: Red;
	border-radius: 1px;
	box-shadow: 0 0 0 2px white, 0 0 0 3px #FB661F;
}

/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}

.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
	width: 97%;
}

	#progressbar li {
		list-style-type: none;
		color: black;
		text-transform: uppercase;
		font-size: 9px;
		/*width: 33.33%;*/
		width: 10%;
		float: left;
		position: relative;
	}

		#progressbar li:before {
			content: counter(step);
			counter-increment: step;
			width: 20px;
			line-height: 20px;
			display: block;
			font-size: 10px;
			color: #333;
			background: lightgray;
			border-radius: 3px;
			margin: 0 auto 5px auto;
		}
		/*progressbar connectors*/
		#progressbar li:after {
			content: '';
			width: 100%;
			height: 2px;
			background: lightgray;
			position: absolute;
			left: -50%;
			top: 9px;
			z-index: -1; /*put it behind the numbers*/
		}

		#progressbar li:first-child:after {
			/*connector not needed before the first step*/
			content: none;
		}
		/*marking active/completed steps green*/
		/*The number of the step and the connector before it = green*/
		#progressbar li.active:before, #progressbar li.active:after {
			/*background: #27AE60;*/
			background: #FB661F;
			color: white;
			text-decoration: underline;
			cursor: pointer;
		}


.inputdata {
	padding: 1px;
	margin: 1px;
}

	.inputdata label {
		color: #2C3E50;
		margin-right: 7px;
		margin-top: 5px;
		display: inline;
		float: left;
		text-align: right;
		width: 30%;
	}

	.inputdata span {
		display: block;
		overflow: hidden;
	}

	.inputdata input {
		width: 75%;
		padding-top: 8px;
		border: none;
		background: white;
	}

.otherdata {
	padding: 1px;
	margin: 1px;
}

	.otherdata label {
		color: #333;
		margin-right: 7px;
		margin-top: 5px;
		display: inline;
		float: left;
		text-align: right;
		width: 35%;
	}

	.otherdata span {
		display: block;
		overflow: hidden;
	}

	.otherdata input {
		width: 75%;
		padding-top: 8px;
		border: none;
		background: none;
	}

.noteTable {
	width: 70%;
	margin: 0px auto;
	border: 1px solid black;
	background-color: #F7BF90;
}

#pkiYes {
	display: none;
	width: 100%;
}

	#pkiYes th {
		float: left;
		margin-left: 10%;
	}

#shipMasterKeyQtyTable {
	width: 100%;
}

	#shipMasterKeyQtyTable th {
		float: left;
		margin-left: 10%;
		text-decoration: underline;
		color: #FB661F;
	}

#levelTable label {
	font-weight: bold;
}

#levelTable span {
	vertical-align: top;
}

#levelTable td {
	vertical-align: top;
}

	#levelTable td input {
		height: 2%;
		height: 20px;
	}

#subkeyqtySelect span input {
	padding-left: 0%;
}

.EverestInnercon {
	margin: 15px 0;
}

	.EverestInnercon a {
		display: inline-block;
		height: 150px;
		width: 220px;
		margin: 15px 15px;
	}

	.EverestInnercon img {
		box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(211, 211, 211, 0.5);
		border-radius: 5px;
		height: 150px;
		width: 220px;
	}

		.EverestInnercon img.ui-state-hover1 {
			border-color: Red;
			border-radius: 1px;
			box-shadow: 0 0 0 2px white, 0 0 0 3px #FB661F;
		}

.pkichangeinnerdiv {
	display: table;
	width: 15%;
	text-align: center;
	margin: auto;
}

.listChckbx3ccon {
	display: table;
	width: 100%;
}

.listinnerChckbx3ccon {
	float: left;
	width: 50%;
}

#msform .listChckbx3ccon input[type=checkbox] {
	height: 20px;
	width: 20px;
	float: left;
}

.listChckbx3ccon span {
	float: left;
	font-family: montserrat, arial, verdana;
	font-size: 15px;
	margin: 3px 1%;
}

.listChckbxcon {
	display: table;
	width: 100%;
}

.listinnerChckbxcon {
	float: left;
	width: 50%;
	padding: 0 0 0 5%;
}

.listinnerChckbxcon1 {
	float: left;
	width: 50%;
	padding: 0 0 0 2%;
}

#msform .listinnerChckbxcon input[type=checkbox], #msform .listinnerChckbxcon1 input[type=checkbox] {
	height: 20px;
	width: 20px;
	float: left;
}

.listinnerChckbxcon span, .listinnerChckbxcon1 span {
	float: left;
	margin: 3px;
	font-family: montserrat, arial, verdana;
	font-size: 15px;
}

.spinBox input {
	line-height: 1px;
}
/*.addButton,.deleteButton{
	padding: 1px 6px;
	-webkit-appearance: button;
	font: -webkit-small-control;
}*/

@media screen and (max-width: 1095px) {
	.listinnerChckbx3ccon {
		width: 100%;
	}
}

@media screen and (max-width: 950px) {
	.listinnerChckbxcon, .listinnerChckbxcon1 {
		width: 100%;
		padding: 0 0 0 5%;
	}

	.pkichangeinnerdiv {
		width: 30%;
	}
}

/* NEW CHANGES */
.formKss {
	width: 80%;
	margin: 5px auto;
	text-align: center;
	position: relative;
}

	.formKss fieldset {
		background: rgba(211, 211, 211, 0.5);
		border: 0 none;
		border-radius: 3px;
		box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
		padding: 20px 30px;
		box-sizing: border-box;
		width: 80%;
		margin: 0 10%;
		/*stacking fieldsets above each other*/
		position: absolute;
	}
		/*Hide all except first fieldset*/
		.formKss fieldset:not(:first-of-type) {
			display: none;
		}
	/*inputs*/
	.formKss input, .formKss textarea, .formKss select {
		padding: 15px;
		border: 1px solid #ccc;
		border-radius: 3px;
		margin-bottom: 10px;
		width: 90%;
		box-sizing: border-box;
		font-family: montserrat;
		color: #2C3E50;
		font-size: 13px;
	}

		.formKss input[type='checkbox'] {
			padding: 0px;
			border: 1px solid #ccc;
			border-radius: 3px;
			margin-bottom: 10px;
			width: 90%;
			box-sizing: border-box;
			font-family: montserrat;
			color: #2C3E50;
			font-size: 13px;
		}
	/*buttons*/
	.formKss .action-button {
		width: 100px;
		/*background: #27AE60;*/
		background: #FB661F;
		font-weight: bold;
		color: white;
		border: 0 none;
		border-radius: 1px;
		cursor: pointer;
		padding: 10px 5px;
		margin: 10px 5px;
	}

	.formKss .radio-label {
		background: #FB661F;
		color: White;
		cursor: pointer;
	}

	/*.formKss .radio-label:hover 
{
   box-shadow: 0 0 0 2px white, 0 0 0 3px #FB661F !important;    
}*/

	.formKss .action-button:hover, .formKss .action-button:focus {
		/*box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;*/
		box-shadow: 0 0 0 2px white, 0 0 0 3px #FB661F;
	}


	.formKss .listChckbx3ccon input[type=checkbox] {
		height: 20px;
		width: 20px;
		float: left;
	}

	.formKss .listinnerChckbxcon input[type=checkbox], .formKss .listinnerChckbxcon1 input[type=checkbox] {
		height: 20px;
		width: 20px;
		float: left;
	}

/* default.apsx*/
@-moz-document url-prefix() {
	.spinBox input {
		padding: 0 0.25em !important;
		height: 90%;
	}

	#levelTable td input {
		padding: 0 0.25em !important;
		height: 32px;
	}

	#Table1 td input {
		padding: 0 0.25em !important;
		height: 32px !important;
	}

		#Table1 td input[type='checkbox'] {
			padding: 0 0.25em !important;
			height: 20px !important;
		}
}

.tab {
	overflow: hidden;
	/*border: 1px solid #ccc;*/
	/*background-color: #f1f1f1;*/
}

	.tab button {
		background-color: inherit;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.3s;
		font-size: 17px;
		color: #FB661F;
		border-right: groove;
		border-top: groove;
		box-shadow: 0 0 15px 1px rgb(0 0 0 / 20%)
	}

		.tab button:hover {
			background-color: #eee;
		}

		.tab button.active {
			background-color: #FB661F;
			color: white;
		}

.tabcontent {
	display: none;
	padding: 6px 12px;
	/*border: 1px solid #ccc;*/
	border-top: groove;
	box-shadow: 0 0 15px 1px rgb(0 0 0 / 20%)
}

.hidden {
	display: none !important;
}

.display {
	display: block !important;
}

.table-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

	.table-container td {
		text-align: left;
	}

.mt-1 {
	margin-top: 1%;
}

.mt-2 {
	margin-top: 2%;
}

.mt-4 {
	margin-top: 4%;
}

.my-7 {
	margin-top: 7%;
}
