/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}



body {
	margin: 0;
	padding: 0;
	min-width: 960px;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	background: #e9ebee;
}

body, input {
	color: navy;
}

div {
	display: block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

th {
	font-weight: 400;
	white-space: nowrap;
	padding: 5px 15px;
}

	th.top {
		white-space: normal;
		text-align: center;
		border-top: 1px solid transparent;
		border-left: 1px solid transparent;
		border-right: 1px solid transparent;
	}

	th.left {
		border-top: 1px solid transparent;
		border-left: 1px solid transparent;
		border-bottom: 1px solid transparent;
	}


td {
	white-space: nowrap;
	line-height: 30px;
	text-align: center;
	padding: 0 15px;
}

input[type="radio"], input[type="checkbox"], label{
    vertical-align: middle;
    margin: 0;
}

input[type="radio"] {
	margin-right: 5px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
select
{
	height: 33px;
	padding: 5px 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: 20px;
	text-indent: 9px;
	-webkit-appearance: none;
}

fieldset {
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}

legend {
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
}

select {
	height: 42px;
}

pre {
	white-space: pre-wrap;
	font-size: 12px;
}

/* Remove controls from Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Remove controls from Safari and Chrome */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0; /* Removes leftover margin */
}

.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */	
}

.modal-content {
	background-color: #fefefe;
	color: #333333;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 500px;
}

.sharelink-url-box {
	border: 1px solid #e9ebee;
	background-color: #fafafa;
	width: 100%;
	padding: 10px;
	font-size: 12px;
	line-height: 20px;
	margin: 20px 0;
	overflow: auto;
}

.reportbug-box {
	border: 1px solid #e9ebee;
	background-color: #fafafa;
	width: 100%;
	height: 200px;
	padding: 10px;
	font-size: 14px;
	line-height: 20px;
	margin: 20px 0;
}

.inspectdate-options {
	margin-bottom: 15px;
}

.modal-content a:link, .modal-content a:visited, .modal-content a:hover, .modal-content a:active {
	margin-right: 40px;
	text-decoration: none;
	color: #2793e6;
}

.modal-cancel {
	color: #333333 !important;
}

.wordwrap { 
	white-space: pre-wrap;      /* CSS3    */
	white-space: -moz-pre-wrap; /* Firefox */    
	white-space: -pre-wrap;     /* Opera <7 */   
	white-space: -o-pre-wrap;   /* Opera 7 */    
	word-wrap: break-word;      /* IE */
	word-break: break-all;
}

.selectable {
    -webkit-touch-callout: all; /* iOS Safari */
      -webkit-user-select: all; /* Safari */
       -khtml-user-select: all; /* Konqueror HTML */
         -moz-user-select: all; /* Firefox */
          -ms-user-select: all; /* Internet Explorer/Edge */
              user-select: all; /* Chrome and Opera */
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.day, .month {
	width: 38px;
}

.year {
	width: 57px;
}

.hide, .print {
	display: none;
}

.right {
	text-align: right !important;
}

.nowrap {
	white-space: nowrap;
}

.middle {
	vertical-align: middle !important;
}

#calcLang {
	margin-top: 15px;
}

	#calcLang label:not(:last-child) {
		margin-right: 20px;
	}

.divtable {
	display: table;
	table-layout: fixed;
	width: 100%;
}
	
	.divtable .column {
		display: table-cell;
		vertical-align: top;
		/*border: 1px solid;*/
	}

	.column.first {
		padding-right: 20px;
	}

	.column.last {
		padding-left: 20px;
	}

.border, input, select, td {
	border: 1px solid #e9ebee;
}

.noborder {
	border: 0;
}

.nameRes {
	min-width: 25px;
	margin-left: 5px;
}

.block {
	display: block;
	margin: 0 0 40px 0;
	text-align: left;
}

.padding {
	padding: 15px 15px
}

.title {
	display: block;
	border: 1px solid;
	margin-top: -100px;
}

#container {
	width: 960px;
	margin: 0 auto;
	padding-bottom: 50px;
	position: relative;
}

.content {
	width: 960px;
	padding: 25px 30px 0px 30px;
	background-color: #ffffff;
	border: 1px solid #dddfe2;
}

.spacer {
	border: 0;
	height: 25px;
}

.left {
	text-align: left;
}

.inline {
	display: inline-block;
}

.multiple .block {
	margin: 0;
}

.padding-vertical {
	padding: 15px 0;
}

.needlogin .button-item, 
.needlogin .text-item,
#ie .text-item
{
	margin-top: 30px;
	text-align: center;
}

.needlogin .button-item input {
	/*box-sizing:border-box;*/
	font-size: 16px;
	width: 100%;
	height: 51px;
	margin-bottom: 15px;
	padding: 15px 16px 14px;
	line-height: 20px;
	max-width: 420px;
}

.needlogin .text-item.subtext {
	font-size: 12px;
}

.needlogin {
	padding-top: 30px;
}

.loggedin {
	background: #4267b2; /*fb background*/
	color: #ffffff;
}
	.loggedin .username {
		/*font-weight: bold;*/
	}

	.loggedin .divtable {
		table-layout: fixed;
		width: 100%;
	}

	.loggedin .divtable .column {
		display: table-cell;
		white-space: nowrap;
		vertical-align: middle;
		overflow: hidden;
		text-overflow: ellipsis;
		/*border: 1px solid;*/
		width: auto;
	}

	.loggedin img.img-fb {
		display: block;
		float: left;
		height: 30px;
		border-radius: 15px;
		border: 1px solid #ffffff;
	}

	.loggedin .loggedinmsg {
		line-height: 30px;
		margin-left: 10px;
	}

	.loggedin .divtable .column.logo {
		width: 200px;
	}

	.loggedin img.img-logo {
		display: block;
		width: 200px;
		margin: auto;
	}

	.loggedin a:link, .loggedin a:visited, .loggedin a:hover, .loggedin a:active {
		text-decoration: none;
		color: #ffffff;
		margin: 0;
		padding: 0;
	}

.memo {
	margin: -20px 0 20px 0;
	text-align: center;
	font-size: 12px;
}

#lifePathMap {
}
	#lifePathMap table {
		border-collapse: separate;
		border-spacing: 0;
	}
	#lifePathMap table td {
		height: 5px;
		width: 10%;
		border: none;
		line-height: 30px;
	}
	#lifePathMap table .lpm-upper td,
	#lifePathMap table .lpm-year td,
	#lifePathMap table .lpm-age td {
		line-height: 25px;
	}
	#lifePathMap table td.bt {
		border-top: 2px solid;
	}
	#lifePathMap table td.bb {
		border-bottom: 2px solid;
	}
	#lifePathMap table td.bl {
		border-left: 2px solid;
	}
	#lifePathMap table td.br {
		border-right: 2px solid;
	}
	#lifePathMap table td.brr {
		border-top-right-radius: 28px 30px;
		-webkit-border-top-right-radius: 28px 30px;
		-moz-border-top-right-radius: 28px 30px;
	}
	#lifePathMap table td.blr {
		border-top-left-radius: 28px 30px;
		-webkit-border-top-left-radius: 28px 30px;
		-moz-border-top-left-radius: 28px 30px;
	}

.matrix {
}
	.matrix td {
		width: 33.3%;
		line-height: 60px;
	}
#karma {
}
	#karma td {
		width: 10%
	}
	#karma tr :first-child {
		text-align: left;
	}

.mobile {
	display: none !important;
}

.desktop {
	display: block !important;
}

/*::-webkit-input-placeholder, 
:-moz-placeholder, 
::-moz-placeholder, 
:-ms-input-placeholder {
   color: transparent;
}*/


.fbbutton {
	background: #4267b2; /*fb button 3578E5*/
	border-color: #29487d;
	border-radius: 2px;
	color: #ffffff;
}

.error {
	color: #e53935;
}

#footer {
	text-align: center;
	margin-bottom: 20px;
	font-style: italic;
	font-size: 12px;
	color: #999999;
}

.print-title {
    padding: 50px 0 75px 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
}

#ie {
	margin: 50px 0 0 0;
	text-align: center;
}

.fadeinandout {
    animation: fadeinout 1s linear forwards infinite;
    opacity: 0;
}

@keyframes fadeinout {
  50% { opacity: 1; }
}


/* Destktop Styles */
@media (min-width:951px) {
	#header {
		z-index: 999;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		top: 0px;
	}
	.needlogin {
		width: 400px;
		margin: auto;
	}

	.loggedin {
		margin-bottom: 100px;
		padding: 5px 0;
	}

	.loggedin .divtable {
		width: 960px;
		margin: 0 auto;
		position: relative;
	}

	.content {
    	border-radius: 4px;
	}

	fieldset {
		border-radius: 2px;
	}

	:not(.always-show)::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent;
    }
    :not(.always-show):-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: transparent;
    }
    :not(.always-show)::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: transparent;
    }
    :not(.always-show):-ms-input-placeholder { /* Internet Explorer 10+ */
       color: transparent;
    }

	.sticky {
		margin-left: -30px;
		margin-right: -30px;
		margin-top: -25px;
		padding: 25px 30px 20px 30px;
		background-color: #fff;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		top: 45px;
		border-bottom: 3px double #ccc;
	}

	.sticky fieldset {
		/*border-width: 2px;*/
		border-color: #ccc;
	}

	.loader {
		display: none;
		text-align: center;
		vertical-align: bottom;
		line-height: 40px;
		font-size: 12px;
		font-style: italic;
	}

	.loader-wrapper {
		display: inline-block;
		height: 30px;
		margin-bottom: -10px; 
	}
}


/* Mobile Styles */
@media only screen and (max-width: 950px) {
	body {
		min-width: 320px;
		-webkit-text-size-adjust: 100%;
	}

	#container {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}

	.content {
		width: initial;
		padding: 25px 0px 0px 0px;
		border-left: none;
		border-right: none;
	}

	input {
	}

	input[type="text"],
	input[type="password"], 
	input[type="date"],
	input[type="number"],
	input[type="submit"],
	select 
	{
		/*box-sizing:border-box;*/
		font-size: 16px;
		width: 100%;
		height: 51px;
		margin-bottom: 15px;
		padding: 15px 16px 14px;
		line-height: 20px;
		max-width: 420px;
	}

	form {
		max-width: 420px;
		margin: auto;
	}

	input.apple-switch {
		position: relative;
		-webkit-appearance: none;
		outline: none;
		width: 50px;
		height: 30px;
		background-color: #fff;
		border: 1px solid #e9ebee;
		border-radius: 50px;
		box-shadow: inset -20px 0 0 0 #fff;
	}
	input.apple-switch:after {
		content: "";
		position: absolute;
		top: 1px;
		left: 1px;
		background: transparent;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
	}
	input.apple-switch:checked {
		box-shadow: inset 20px 0 0 0 #4267b2;
		/*border-color: #4ed164;*/
		border-color: #4267b2;
	}
	input.apple-switch:checked:after {
		left: 20px;
		box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
	}

	.modal {
		padding-top: 100px;
	}

	.modal-content {
		max-width: 80%;
	}

	.modal-content a:link, .modal-content a:visited, .modal-content a:hover, .modal-content a:active {
		margin: 0;
	}

	.sharelink-url-box {
		margin-bottom: 30px;
	}

	.inspectdate-options {
		text-align: center;
		margin-bottom: 20px;
		font-size: 16px;
		line-height: 20px;
	}

	.inspectdate-options label {
		margin-left: 10px;
	}

	.date-item-custom input {
		padding: 10px 12px 10px 10px;
		text-indent: 10px;
	    text-indent: 0;
	    text-align: center
	}

	.day, .month {
		width: 66px !important;
	}

	.year {
		width: 86px !important;
	}

	select, input, textarea {
		color: inherit;
		background-color: white;
		-webkit-appearance: none;
		-webkit-border-radius: 0;
	}

	th {
		white-space: normal;
		padding: 3px 5px
	}

		th.left {
			padding-left: 0;
		}

	td {
		padding: 0 5px;
	}

	fieldset {
		border: none !important;
		margin-bottom: 20px !important;
	}

	legend {
		text-align: center;
	}

	td.left {
		white-space: normal;
	}

		.divtable .column {
			display: block;
			/*border: 1px solid;*/
		}

		.divtable .column.first, .divtable .column.last {
			padding: 0;
		}

	#sticky {
		position: initial;
	}

	.date-item, .input-item, .button-item, .text-item {
		text-align: center;
		/*margin-bottom: 10px;*/
	}

	.needlogin {
		margin-bottom: 40px;
	}

	.loggedin img.img-fb {
		height: 40px;
		border-radius: 22px;
		border: 2px solid #ffffff;
	}

	.loggedin img.img-share {
		height: 25px;
	}

	.memo {
		margin: 5px 15px;
	}

	.check-item {
		text-align: left;
		padding-left: 12px;
	}

	label:not(.always-show), .controls br {
		display: none;
	}

	.mobile {
		display: block !important;
	}

	.desktop {
		display: none !important;
	}

	input[type="date"] {
		text-indent: 9px;
	}
	input[type="date"]:focus,
	input[type="date"]:valid,
	input[type="date"]:disabled
	{
		text-indent: 8px;  /*different indent in chrome and safari, needs a fix*/
	}

	input[type="date"]::before {
		color: grey;
		content: attr(placeholder);
	}
	input[type="date"] {
		color: #ffffff;
	}
	input[type="date"]:focus,
	input[type="date"]:valid,
	input[type="date"]:disabled
	{
		color: inherit;
	}
	input[type="date"]:focus::before,
	input[type="date"]:valid::before,
	input[type="date"]:disabled::before
	{
		content: "" !important;
	}
}


@media print {    
    .no-print, .no-print *
    {
        display: none !important;
    }

    .print, .print *
    {
        display: block !important;
    }
}

/*input fields a rounded in mobile*/