html,body{
	height:100%;
    margin:0;
    padding:0;
    /*font-size: 12px;*/
	font-family: arial, helvetica, sans-serif;
	color: #657383;
	font-size: 1rem !important;
}

#contentHeader, #contentMain, #contentBox, #contentError {
	/*padding:1px 0;*/
	z-index: -1;
}

#contentHeader {
	background-color:#fff;
	position:relative;
    overflow:hidden;
	padding-top: 15px;
}

#contentHeader img {
	/*float: left;*/
	width: 33%;
	height: auto;
	vertical-align: middle;
}

#contentHeader span {
	display:inline-block;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	width: 50%;
}

.applicationTitle {
	font-family: 'Collator', arial, helvetica, sans-serif;
    font-size: 1.75rem !important;
	font-weight: bold;
	color: var(--corp-color) !important;
	height: auto;
}

#contentMain {
	display:table;
	text-align: center;
	vertical-align: middle;
	margin: auto;
}

#contentBox {
	/*max-with:320px;
	min-with:320px;*/
	margin:auto;
	display:inline-block;
	text-align: center;
	vertical-align: middle;
	border: 1px solid;
	border-color: var(--corp-color) !important;
	/*border-radius: 10px;*/
	background-color: #f3f3f3;
	padding: 20px 50px;
}

#contentError {
	margin: 5px auto 0 auto;
	text-align: center;
}

#contentLinks {
	margin: 15px 0 15px 0;
}

.content-box {
	display:inline-block;
	text-align: center;
	vertical-align: middle;
	border: 1px solid;
	border-color: var(--corp-color) !important;
	/*border-radius: 10px;*/
	background-color: #f3f3f3;
	padding: 20px 50px;
}

.form-fields {
	display: table;
	border-spacing: 10px;
}

.form-row {
	display: table-row;
}

.form-fields label {
	font-size: 14px;
	font-family: arial, helvetica, sans-serif;
	font-weight: 700;
	color: #657383;
	width: 170px;
	line-height: 30px;
	vertical-align: middle;
	text-align: right;
	display: table-cell;
}

.form-fields input {
	height: 30px;
	border-radius: 4px;
	border: 1px solid #CCCCCC;
	padding-left: 5px;
	font-size: 14px;
}

input:focus {
	box-shadow: rgba(0, 0, 0, 0.075) 0 1px 1px inset, rgba(102, 175, 233, 0.6) 0 0 8px;
	border-color: #66AFE9;
	outline: 0;
}

input::placeholder {
   color: #999;
   font-size: 12px;
}

.form-buttons {
	
}

.button-block{
	display: table-cell;
	padding: 2px 15px 2px 15px;
	margin: 0 15px 0 15px;
}


.form-buttons button {
	height: 30px;
	font-size: 14px;
	font-family: arial, helvetica, sans-serif;
	font-weight: 700;
	/*color: #657383;*/
	color: white;
	background-color: var(--corp-color) !important;
	border: 0;
}

#buttons-bar {
	margin-top: 25px;
}

button:disabled,button[disabled]{
	border: 1px solid #999999;
	background-color: #cccccc;
	color: #666666;
}

.required {
}

label.required::before { 
    content: " * " !important;
    color: red;
    font-weight: bold;
}

.hidden {
	display: none;
}

.navigation a {
	font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    font-weight: 700;
	color: rgb(0,128,255);
}

.navigation button {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
	font-family: arial, helvetica, sans-serif;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
}

.info {
    color: dodgerblue;
}

.info:hover {
    background: #2196F3;
    color: white;
}

.error-messages-box {
	background-color: #FFF7F7;
    border: 1px solid #FF0000;
    border-radius: 10px 10px 10px 10px;
    padding: 5px;
}

.error-message {
	font-size: 14px;
    font-weight: bold;
	color: #FF0000;
	text-align: left;
}

.error-message .image, .error-message.image {
	height: 24px;
    width: 24px;
	display: inline-block;
	vertical-align: middle;
}

.valid .image, .valid.image {
    background: url("../images/icons/green_ok_24.png") no-repeat scroll center top / 24px auto rgba(0, 0, 0, 0);
}
.invalid .image, .invalid.image {
    background: url("../images/icons/red_ko_24.png") no-repeat scroll center top / 24px auto rgba(0, 0, 0, 0);
}

span.image, img.image {
	display: inline-block !important;
	vertical-align: middle;
}

.error-message .message {
	vertical-align: middle;
	padding-left: 5px;
}

.valid .message, .valid.message {
    color: #3A7D34;
}
.invalid .message, .invalid.message {
    color: #EC3F41;
}

.flag-countries, .flag-countries * {
	margin: 0 5px 0 0;
}

.phoneCode {
	color: grey;
	font-weight: 500;
}

.phoneCode::after {content: ")";}
.phoneCode::before {content: "(+";}

.alternateUserid {
    color: grey;
    font-weight: 500;
}

.alternateUserid::after {content: ")";}
.alternateUserid::before {content: "(";}

.countdown {
	line-height: 4em;
}

.countdown-label+.countdown-display {
    /*margin-left: 10px;*/
}

.countdown-label {
    margin-right: 10px;
}

.countdown-display {
	line-height: 1em;
	text-align: center;
	font-weight: bold;
	font-size: 2.5em;
	/*margin: 0 10px;*/
	padding: 10px 10px;
}

.countdown-display.outline {
	border: 1px solid;
	border-radius: 10px;
}

.countdown-display.success{
	color: #28a745;
}

.countdown-display.outline.success {
	border-color: #28a745;
}

.countdown-display.warning{
	color: #ffc107;
}

.countdown-display.outline.warning {
	border-color: #ffc107;
}

.countdown-display.danger{
	color: #dc3545;
}

.countdown-display.outline.danger {
	border-color: #dc3545;
}

.challenge-code + .separator::before {content: "-";}
.challenge-response + .separator::before {content: "-";}
.separator {margin: auto 0;padding: 0 0.5em !important;}

.splitted-code.code-part + .separator::before, .splitted-code .code-part + .separator::before {content: "-";}
.splitted-code .separator {margin: auto 0;padding: 0 0.5em !important;}

div.alert.alert-warning .table-bordered > thead > tr > th,
div.alert.alert-warning .table-bordered > tbody > tr > th,
div.alert.alert-warning .table-bordered > tfoot > tr > th,
div.alert.alert-warning .table-bordered > thead > tr > td,
div.alert.alert-warning .table-bordered > tbody > tr > td,
div.alert.alert-warning .table-bordered > tfoot > tr > td {
    border: 1px solid #000000;
}

.form-control:invalid~.select2 .select2-selection--single,.form-control.is-invalid~.select2 .select2-selection--single{
    border-color: #dc3545;
}

.form-control:valid~.select2 .select2-selection--single,.form-control.is-valid~.select2 .select2-selection--single{
    border-color: #28a745;
}

A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}

.loader {
  /*border: 8px solid #f3f3f3;*/
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  /*border-top: 8px solid #1B365E;*/
  border-top: 2px solid var(--corp-color);
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  -webkit-animation-name: spin; /* Safari */
  -webkit-animation-duration: 2s; /* Safari */
  -webkit-animation-timing-function: linear; /* Safari */
  -webkit-animation-iteration-count: infinite; /* Safari */
  animation: spin 2s linear infinite;
}

.ui-monthpicker .ui-datepicker-month {
    display: none;
}

.ui-monthpicker td span {
  padding: 5px;
  cursor: pointer;
  text-align: center;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*** Mobiles (up to 500px width) ***/
@media only screen 
and (max-width : 480px) {
	#contentBox {
		margin-top: 15px !important;
	}
	
	.applicationTitle {
        font-size: 1.35rem !important;
    }
}

/*** Mobiles (up to 400px width) ***/
@media only screen 
and (max-width : 400px) {
	.form-fields label {
		display: block;
		text-align: left;
	}
	
	#buttons-bar *:not(:first-child) {
		margin-top: 15px;
	}
	
	#buttons-bar {
		text-align: left;
	}
	
	.applicationTitle {
        font-size: 1.2rem !important;
    }
}

/*** Mobiles (up to 320px width) ***/
@media only screen 
and (max-width : 320px) {
	#contentBox {
		padding-left: 5px;
		padding-right:5px;
	}
	
	.applicationTitle {
        font-size: 1rem !important;
    }
    
    .countdown-display {
        font-size: 1.5em;
    }
    
    .countdown-group {
        display: inline !important;
    }
    
    .loader {
        width: 20px;
        height: 20px;
        border-width: 3px;
    }
}