* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,body { height: 100%; margin: 0px; padding: 0px; }
body {
    font-family: "Open Sans", sans-serif;
    position: relative;     
    font-size: 100%;
    height: 100%;
    width: 100%;
    top: 0;
}
#logintop, .formtop {
    position: relative;
    background-color: inherit;   
    text-align: center;
	width: 300px;	
    margin-left: auto;
    margin-right: auto;
	font-family: 'Roboto', sans-serif;
    font-size: 22px;
    color: white;
	padding-top: 30px;
}
.formtop  {    
    padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
#logintop h1 {
	font-size: 18px;
	color: #ffffff;
	padding-top: 20px;
	padding-bottom: 10px;
}
.formtop h1 {
    font-size: 18px;
    color: #223A73;
    padding: 0;
}
#timer {
    font-weight: bold;
    color: #f4375f;
    margin-left: 2px;
	font-size: 18px;
}
#refreshcaptcha {
	background-color: #b3e3ff;
}
.-ddi-captcha- {
	border-radius: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.actionfield {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    
}
input:not([type=checkbox]), 
input[type=text], 
input[type=number], 
input[type=submit], 
button, 
button[type=button],
select, 
textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;	
}
button::-moz-focus-inner {
  border: 0;
}
select :focus {
    outline: none;
}
textarea {
	resize: vertical;
}
input, button, select, textarea, .actionfield {
    border-radius: 5px;
    font-family: "Open Sans", sans-serif;
}
input, select, .actionfield {
    border: 1px solid #ccc;    
}
.actionfield {
    background-color: #f2f2f2;
}
.rightspan .actionfield input {
    border: none;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}
input:hover, 
input[type=text]:hover, 
input[type=number]:hover, 
input[type=password]:hover, 
select:hover,
textarea:hover,
.rightspan .actionfield:hover {
    border-color: #0095EB;
}
input:focus,
select:focus, 
textarea:focus,
input[type=text]:focus, 
input[type=number]:focus, 
input[type=password]:focus  {
    border: 1px solid #0095EB;
	outline: none;
}
.rightspan .actionfield:hover  > .actionbutton { 
    color: #0095EB;
}
input[type=text][readonly] {
    background-color: #f2f2f2;
}
a:focus {
	outline: 1px dotted #0095EB;
}
select {
    color: black;
    background-color: white;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23CCCCCC%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;    
    background-size: .65em auto, 100%;
	background-position: right .7em top 50%, 0 0;
}
select[dir="ltr"] {
	background-position: right .7em top 50%, 0 0;
}
select[dir="rtl"] {
	background-position: left .7em top 50%, 0 0;
}
select::-ms-expand {
    display: none;
}
select:hover {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230095EB%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}
select.-read-only- {
  color: gray;
  background-color: #f2f2f2;
}
button[type=button]:disabled {
  background: #dddddd;
}
input[type=submit]:disabled {
  background: #dddddd;
}
input:readonly {
    background-color: #f2f2f2;
}
a:link, a:visited, a:active {
    text-decoration: none;
}
a:hover {
    cursor: pointer;
}
.formcontainer {
    position: relative;
    margin-left: auto;
    margin-right: auto; 
	padding-bottom: 30px;
}
.verysmall {
	width: 200px;
}
.small {
	width: 300px;
	max-width: 85vw;
}
.normal {
	width: 600px;
	max-width: 90vw;
}
.fieldcontainer {
    padding: 10px 10px;
    position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.dark .fieldcontainer {
    padding:0;
    margin: 2px 0px;	
    border: none;
}
.leftspan {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;    
    flex: 0 0 40%;
    min-width: 160px;
}
.rightspan {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;    
    flex: 1 0 60%;
}
.rightspan ul {
	list-style-type: none;
	width: 100%;
}
.rightspan li label {
	 font-size: 0;
	 padding: 0;
}
.formcontainer input, 
.formcontainer select, 
.formcontainer button,
.formcontainer input[type=submit], 
.actionfield {
    font-weight: normal;
    padding: 8px 12px;
    margin: 2px 0px;
    width: 100%;
    font-size: 16px;    
}
.formcontainer a {
    color: #0095EB;
}
.formcontainer a:hover  {
    text-decoration: underline;
}
.formcontainer label {	
    white-space: nowrap;
    font-size: 14px;
    color: #223A73;
	margin: 2px 0px;
	padding-top: 2px;
	padding-left: 12px;
    font-weight: bold;
}
.formcontainer.dark label {
    color: white;
    font-weight: normal;
}
.formcontainer input[type=checkbox] {
    width: auto;
}
.formcontainer button, .formcontainer input[type=submit] {
    border: 2px solid white;
    background-color: #0095EB;
    color: white;
    transition: border-color 0.3s ease; 
}
.formcontainer button[type=button]:disabled,
.formcontainer input[type=submit]:disabled,
.formcontainer input[type=submit][disabled] {
  background: #ccc;
  color: #666666;
  border: 1px solid #ccc;
}
#abort {
	background: white;
	color: #223A73;
	border: 1px solid #223A73;
}
.formcontainer button:hover, .formcontainer input[type=submit]:hover:enabled {
    border: 2px solid #0095EB;
    background-color: #0095EB;
    color: white;
    cursor: pointer;
}
.formcontainer input:focus,
.formcontainer select:focus, 
.formcontainer textarea:focus,
.formcontainer input[type=text]:focus, 
.formcontainer input[type=number]:focus, 
.formcontainer input[type=password]:focus {
    border: 1px solid #0095EB;
	box-shadow: 0 0 3pt 2pt #d7f0f4; /* offset-x | offset-y | blur-radius | spread-radius | color */
}
.formcontainer.dark input:focus,
.formcontainer.dark select:focus, 
.formcontainer.dark textarea:focus,
.formcontainer.dark input[type=text]:focus, 
.formcontainer.dark input[type=number]:focus, 
.formcontainer.dark input[type=password]:focus {
    border: 1px solid #223A73;
	box-shadow: 0 0 3pt 2pt #d7f0f4; /* offset-x | offset-y | blur-radius | spread-radius | color */
}
.formcontainer .rightspan .actionfield input:focus {
    border: none;
    box-shadow: none;
}
.formerrors {
    font-size: 12px;
    color: #ca1a4b;
    padding:0;
    padding-left: 5px;
    margin:0;
    width: 100%;
    flex: 0 1 100%;
        
	left:0;
	bottom:0;
}
.formcontainer.dark .formerrors {
    color: #f6bb08;
}
.instructions {
	color: #223A73;
	font-size: 12px;
	background-color: white;
	line-height: 2;
	text-align: left;
	padding-left: 12px;
}
.infocontent {
    background-color: inherit;
    color: #075b97;
    padding: 10px;
    border-radius: 5px;
    font-size: 13x;
    text-align: center;
}
.formcontainer.dark .infocontent {
    color: #f6bb08;
}
.errorcontent {
    background-color: inherit;
    color: #ca1a4b;
    padding: 10px;
    border-radius: 5px;
    font-size: 13px;
    text-align: center;
}
.formcontainer.dark .errorcontent {
    color: #f6bb08;
}
.confirmcontent {
    background-color: inherit;
    text-align: left;
    padding-bottom: 20px;
}
button.actionbutton  {
    text-align: center;
    padding: 0;
    margin: 0;    
    width: 15px;
    height: 15px;
    border: none;
    font-size: 100%;
	font-weight: bold;
}
button.actionbutton:focus {
    outline: 1px dotted #0095EB;
}
.leftspan button.actionbutton {
    float: right;
    background-color: white;
    color: #223A73;
}
.leftspan button.actionbutton:hover  {    
    background-color: white;
    color: #0095EB;    
}

.rightspan button.actionbutton {
    float: right;
    background-color: #f2f2f2;
    color: #ccc;
}
.rightspan button.actionbutton:hover  {    
    background-color: #f2f2f2;
    color: #0095EB;
    border: none;
}
button.linkbutton {
    text-align: center;
    padding: 0;
    margin: 0;
    background-color: inherit;
    color: #0095EB;
    border: none;
    width: auto;
    margin-top: 10px;
}
button.linkbutton:hover  {
    border: none;
    background-color: inherit;
    color: #0095EB;
    text-decoration: underline;
    cursor: pointer;
}
button.linkbutton:focus {
    outline: 1px dotted #0095EB;
}
.appfooter a {
    font-size: 12px;
    color: #525252;
    padding: 5px;
}
.formcontainer.dark  .appfooter a {
    color: white;
}
.appfooter a:hover {
    text-decoration: underline;
    cursor: pointer;
}
div[hint-text] {
	color:#075b97;
	background-color: white;
	text-align: center;
	margin-left: 5px;	
    flex: 0 0 auto;
    font-size: 12px;
}
.dark div[hint-text] {
	color:white;
	background-color: #223A73;
}
div[hint-text]:hover {
	cursor: pointer;
	color:#0095EB;    
}
.dark div[hint-text]:hover {
	color:#0095EB;
}
div[hint-text] > i {
	width: 20px;
	height: 20px;
	pointer-events: none;
}
.ddi-hint {
	position: absolute;	
	z-index: 1;
	
	font-size: 12px;
	width: 400px;
	max-width: 70vw;
	background-color: white;
	color: 	#223A73;
	text-align: left;
	border-radius: 0px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	
	bottom: 100%;	
	padding: 10px;
	
	border: 1px solid #ccc;
}
.dark .ddi-hint {
    box-shadow: none;
    border-radius: 6px;
}
@media print {
    body * {
    visibility: hidden;
    }
}