body { 
    border: 1px solid #005197;
    margin: 5px !important;
    min-height: calc(100vh - 10px);
    max-height: 100%;
    font-size: 100%;
}
.modal-open {
  padding-right: 3px !important;
  margin: 0 !important;
}
a {
    color:#005197 !important;
    text-decoration: none !important;
}
a:visited {
    color:#005197 !important;
    text-decoration: none !important;
}
a:link {
    color:#005197 !important;
    text-decoration: none !important;
}
a:hover {
	color:#000 !important;
	text-decoration: none !important;
}

.coreBlue {
	background-color: #005197;
}
.coreGray {
	background-color: #CCC;
}
.highlightColor {
	background-color: #FFC;
}
.noPadding {
	padding: 0 !important;
}
.pagePadding{
	padding: 5px;
}
.headingContainer {
	border: 1px solid #CCC;
	background-color: #EEE;
	margin: 0;
}
.pageHeading {
	padding: 2px 5px;
	font: bold 0.8em 'verdana', sans-serif;
}
.disError {
	padding: 2px 5px;
	font: bold 0.8em 'verdana', sans-serif;
	color: #F00;
	text-align: right;
}
.snpsm-logo {
	width: 45px;
	height: 45px;
	background: url(/images/snpsm-logo.png) no-repeat center center;
	margin-left: 0px;
	float: left;
}
.snp-logo {
	width: 45px;
	height: 45px;
	background: url(../images/snp-logo.png) no-repeat center center;
	margin-left: 0px;
	margin-right: 5px;
	float: left;
}
.snp-title {
	margin: 2px 0 0 0;
	font: bold 1.45em 'Arial', sans-serif;
	color: #005197;
}
.login-info {
	margin: 2px 0 0 0;
	font: 0.8em 'verdana', sans-serif;
}
.alignMenu {
	height: 50px; 
	text-align: right; 
	position: relative;
}
.alignErrorContainer{
	height: 50px;
}
.alignError{
	background-color: red;
	margin-top: 19px;
	padding: 5px 10px;
	display:inline-block;
	float: right;
	border: 1px dotted #FC3;
	background-color: #FFC;
	border-radius: 5px;
}
.alignDropdown {
	font: 0.9em 'verdana', sans-serif !important;
	position: absolute; 
	bottom:5px; 
	right: 0px;
	width: auto;
	height: 26px !important;
	padding: 0 10px !important;
}
.pageContent {
	font: 0.9em 'verdana', sans-serif;
	position: relative;
}
.loginPageContent {
	font: 0.9em 'verdana', sans-serif;
	position: relative;
	height: calc(100vh - 200px);
}
.sectionContainer {
	display: table;
	padding: 20px 25px; 
    border: 1px solid #CCC;
    box-shadow: 0px 5px #EEE;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);.
	background-color: blue;
}
/* TEXT BOX*/
input[type="text"], input[type="password"], input[type="number"], select {
	border: 1px solid #CCC;
	background-color: #FFF;
	font: normal 1em 'verdana', sans-serif;
	border-radius: 0;
	width: 200px;
	padding: 5px 7px;
	margin-left: 5px !important;
}
input[type="number"] {
	margin: 0 !important;
}
.labelTxt{
	text-align: right;
	padding-right: 5px;
}
input[type="submit"], input[type="button"] {
	color: #005197;
	border: 1px solid #005197;
	color: #005197;
	background: #FFF;	
	font: Bold 0.9em 'verdana', sans-serif;	
	padding: 5px 10px;
	text-align: center;
	margin: 4px 5px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
}

input[type="submit"]:hover, input[type="button"]:hover {
    background-color: #005197;
    color: #FFF;
}
#messageToaster {
	position: absolute; 
	top: 100px; 
	right: 0; 
	z-index: 999999999 !important; 
	padding: 10px; 
}
.inputValidationError {
    border: solid 1px #F00 !important;
}
.txtRed {
	color: #F00;
}
.txtGray {
	color: #999;
}

.tableOuterBorder {
   font: normal 0.9em 'verdana', sans-serif;
   border-collapse: collapse;
   width: 100%;
   margin: 0 0 5px 0;
}
.tableOuterBorder th {
   border: 1px solid #CCC;
   padding: 6px 5px;
}
.tableOuterBorder td {
   border: 1px solid #CCC;
   padding: 5px;
}
.tableHeading {
     border-collapse: collapse;
      width: 100%;
      font: bold 1em 'verdana', sans-serif;
}
.tableHeading th {
   border: 0;
   padding: 0;
}
.tableContent {
  font: normal 1em 'verdana', sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: #FFF;
  
}
.tableContent th {
   border-top: 0 !important;
   background-color: #FFF;
}
.tableContent td, .tableContent th {
  border: 1px solid #CCC;
  padding: 6px 5px;
}

.linkAdd {
   width: 200px !important; 
   text-align: right !important; 
   font-weight: normal;
}
.modal-border {
	border: 1px solid #CCC;
	padding: 5px;
	margin: 5px;
	width: 100%;
	background-color: #FFF;
	float: left;
}
.modal-heading {
	border: 1px solid #CCC;
	border-bottom: 0 !important;
	font-weight: bold;
	width: 100%;
	padding: 5px;
	background-color: #EEE;
}
.modal-content-area {
	border: 1px solid #CCC;
	padding: 10px 30px;	
	float: left;
	width: 100% !important;
}
.modal-content-area input[type="text"], .modal-content-area input[type="password"], .modal-content-area select {
	font: normal 0.9em 'verdana', sans-serif;
	width: 100% !important;
	margin: 0 0 10px 0!important;
	float: left;
}
.modal-content-area input[type="text"] {
	padding: 6px 7px !important;
}
.modal-content-area input[type="number"] {
	margin: 0 0 10px 0!important;
}
.modal-content-area label {
	font: normal 0.9em 'verdana', sans-serif;
}
.modal-content-area input[type="submit"] {
	margin: 0 auto !important;
}
.col-left {
	width: 75%;
	float: left;
}
.col-right {
	width: 20%;
	float: right;	
}
.col-span {
	width: 100%;
	float: left;
}

/* QUESTION CONTAINER*/

.questionContainerMain{
  display: block;
  position: relative;
  margin: 30px 40px 0;
  height: auto;
  padding: 20px;
  width: auto;
}
.questionContainer {
	width: 80% !important;
	float: left;
}
.diagramContainer {
	width: 18% !important;
	float: right;
}
.diagramContainer img {
	width: 100%;
	max-height: 400px;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

ul li{
  color: #333;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: auto+;
  border-bottom: 1px solid #EEE;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.1em;
  padding: 23px 20px 20px 65px;
  margin: 10px auto;
  height: auto;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
	color: #005197;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 26px;
  width: 26px;
  top: 30px;
  left: 20px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #005197;
}

ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 12px;
  width: 12px;
  top: 2px;
  left: 2px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #047fea;
}

input[type=radio]:checked ~ .check::before{
  background: #047fea;
}

input[type=radio]:checked ~ label{
  color: #047fea;
}
.questionContainer .question {
	font: normal 1.4em 'verdana', sans-serif;
	margin: 0 0 10px 0;

}
/* END: QUESTION CONTAINER*/
.fileUpload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #EEE;
    box-shadow: 3px 3px #f5f5f5;
}
.fileUpload:active {
  box-shadow: 1px 1px #f9f9f9;
  transform: translateY(2px);
}
.searchElements td {
	border:0 !important;
	font-weight: bold !important;
}
.seafareContainer {
	width: 100%;
	float: left;
	position: relative; 
}
.seafarerPhoto img {
	width: 85px;
	height: 85px;
	border: 1px solid #ccc;
	padding: 5px;
	float: left;
	margin-right: 5px;
}
.seafarerDetailsContainer {
	float: left;
	width: calc(100% - 90px);
	border-bottom: 1px solid #EEE;
	height: 85px;
}
.seafarerName {
	font: bold 1.2em 'verdana', sans-serif !important;
	float: left;
	width: 100%;
	padding-bottom: 6px; 
	text-transform: uppercase;
}
.seafarerRank{
	float: left;
	width: 100%;
	/*margin-bottom: 15px;*/
}
.seafarerStartTest {
	float: right;
	position: absolute; bottom: 7px; right: 0px; 
}
.seafarerStartTest input{
	margin: 0;
}
.seafarerNameFontSize {
	font: bold 1.1em 'verdana', sans-serif !important;
}
.testBriefContainer {
	width: 100%;
	float: left;
}
.testBriefBorder {
	border: 1px solid #ccc;
	padding: 10px;
	background-color: #F6F6F6;
	width: 50%;
	margin: 10px auto 0;
	overflow: auto;
}
.testBriefLeft {
	width: 25%;
	float: left;
	line-height: 25px;
}
.testBriefRight {
	width: 75%;
	float: left;
	font-weight: bold;
	line-height: 25px;
}
.instructionContainer {
	width: 50%;
	margin: 25px auto 0;
}
#timer {
	background-color: #005197;
	position: absolute;
	top: 40;
	right: 0;
	padding: 15px 10px;
	font: 1em 'verdana', sans-serif !important;
	color: #FFF;

}
.pagingAlignleft {
  float: left;
  width:20% !important;
  margin: 20px 0 10px 0;
}
/* #mainMenu option:nth-child(3) {
    font-weight:bold !important;
} */
.testQuestionNo {
	float: left !important; 
	clear: left !important; 
	margin-left: 60px !important; 
	width: 28% !important; 
	text-align: center !important;
}
.bottomButtons {
	margin-top: 50px !important;
	margin-left: 60px; 
	clear: left;
	float: left;
	width: 80%;
}
.bottomButtons img {
	margin-right: 40px !important;
}
.submitTestButton {
	float: left;
	margin-left: 50px;
	margin-top: 100px;
	line-height: 22px; 
	display: none;
}
.searchSDID,.searchName,.searchTest,.searchSubmit {
	width: auto;
	float: left;
	padding: 10px 0;
	margin: 0 15px;
	font-weight: bold;
}
.searchSDID {
	margin: 0 15px 0 0;
}
.searchSDID input[type=number] {
	width: 60px;
}
.searchName input[type=text] {
	width: 350px;
}
.searchSubmit {
	padding: 8px 0;
	text-align: right;
}
.searchTest input[type=submit] {
	margin: 0 20px;
}
.searchTest select{
	font-weight: normal;
}

.pagingAligncenter {
  float: left;
  width: 60% !important;
  text-align: center;
  margin: 20px 0 10px 0;
}
.pagingAlignright {
 float: left;
 width: 20% !important;
 margin: 20px 0 10px 0;
}​
