@charset "UTF-8";
* { margin: 0px auto; padding: 0px; }
/* ************************************************************************** */
.bad { color: #b70000; font-weight: bold; }
.good { color: #118301; font-weight: bold; }
div.body { background-color: #ffffff; border: solid 1px #305c8d; border-radius: 1%; box-shadow: 2px 2px 15px -2px rgba(0,0,0,0.75); margin: 2em auto; -moz-box-shadow: 2px 2px 15px -2px rgba(0,0,0,0.75); padding: 20px 20px 5px 20px; -webkit-box-shadow: 2px 2px 15px -2px rgba(0,0,0,0.75); width: 60em; }
.center { text-align: center; }
div.content { margin-top: 20px; }
.hide { display: none; }
.hint { color: #464646; font-size: 0.85em; }
.italic { font-style: italic; }
.name { color: #666666; float: left; font-size: 90%; font-weight: bold; width: 220px;padding: 2px 0 0 0px;margin-top: 2px; white-space: nowrap; text-align: right;}
/*.value { vertical-align: baseline!important; width: 60%; }*/
.value button,.value input,.value select { vertical-align: middle; width: 100%;height: 32px!important;margin-left: 5px!important; }
.value button {text-align: left;}
.small { font-size: 0.85em; }
p.step-row { color: #6699ff; display: inline; font-size: 1.5em; margin: 0; }
td.step-row { color: #666666; font-size: 100%; font-weight: bold; line-height: 3em; }
input.submit { border: outset 2px green; color: #305c8d; cursor: pointer; font-size: 12px; font-weight: bold; letter-spacing: 1px; margin: 1em 0; padding: 6px; text-transform: uppercase; }
input.submit.bad { background-color: #fde8e8; border-color: red; }
input.submit.good { background-color: #deffde; border-color: green; }
input.submit:hover { border-style: inset; }

button.w3-btn {padding: 2px 16px!important; }
input.w3-btn {padding: 3px 16px!important; }

.warn { color: #ca6800; }
.warning { color: #ca6800; }
/*
    HINTS
*/
.warning, .error { background-color: #fde8e8; border-left: solid 3px #ff0000; color: #b70000; line-height: 3.2em; margin-top: 0.5em; padding: 0.3em 0.5em; }
.success {text-align: center; background-color: #D5E2D6; border-left: solid 3px #1FAA03; color: #018235; line-height: 3.2em; margin-top: 0.5em; padding: 0.3em 0.5em; }
.welcome { color: #6F7374; font-size: 1.525em; font-weight: bold; padding: 16px; text-align: center; }
* html body * { overflow: visible; }
a, a:link, a:visited, a:active { color: #003366; text-decoration: underline; }
a:hover { color: #336699; }
a:focus { outline: none; }
body { background: url('background.png') repeat-x 0px 0px; background-color: #a8bccb; border: 0; height: 101%; margin: 0; padding: 0; }
/*
    FORM Elements
*/
form { margin: 0; }
h1 { border-top: medium none; color: #3a628f; font-size: 1.3em; margin: 5px 0; }
html { border: 0; color: #202020; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 85%; margin: 0; overflow: -moz-scrollbars-vertical; overflow-x: auto; padding: 0; }
/*
    COMMON Elements
*/
img { border: none; }
input, select {width: 100%; border: solid 1px #a3baca; padding: 2px;height: 32px; }
input:focus, select:focus { background: #fdf8e8; }
li { list-style-type: square; margin: 0; }
p { margin: 4px 0 4px 0; }
table { border-collapse: collapse; font-size: 1em; width: 100%; }
/*
    TABLE Elements
*/
table { background-color: #f8f8ff; border-color: #a3baca; border-width: 1px 2px 2px 1px; margin-bottom: 5px; margin-top: 15px; width: 100%; }
table > tbody { display: block; padding: 0.5em 0; }
table > tbody > tr { border-bottom: 1px solid #CCCCCC; /* #d2d1cc; */ /*padding: 0.8em 0 0.2em 0; width: 100%;*/ }
table > tbody > tr > td { font-size: 1em; line-height: 1.8em; padding-left: 0.8em; padding-right: 0.8em; text-align: left; vertical-align: middle; width: 19%; }
table > tbody > tr > th { font-size: 1em; padding-left: 0.8em; padding-right: 0.8em; text-align: right; vertical-align: top; white-space: nowrap; width: 1%; }
table > thead { background-color: #f2f1ff; }
table > thead > tr { }
table > thead > tr > td { color: #555758; font-size: 1.08em; padding: 1.2em 1em; }
.header,table > thead > tr > th { border-bottom: 2px groove #ccc; /* #d2d1cc; */ color: #6F7374; font-size: 1.125em; padding: 0.525em 0.2em; text-align: left; }
/*
table > tbody > tr > td.value {width: 250px;height: 32px;}
*/
table > tbody > td.name-pw  {height: 32px; margin: -45px 0 0 0;}
/* -------------------------------- */
.value button,.value input,.value select {width: 100%!important;height: 32px;background: #fcfcfc;border: 1px solid #aaa;border-radius: 5px;box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;}
.value-os input {height: 20px;width: 20px;top: 20px;}
.name-os {text-align: right;width: 250px;;}
.password {position: relative;color: #aaa;font-size: 16px;}
.password input {width: 100%!important;height: 32px;background: #fcfcfc;border: 1px solid #aaa;border-radius: 5px;box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;}
.password input { text-indent: 0px;}
/* -------------------------------- */
.field-icon.toggle-password {margin-left: -25px;margin-top: 10px;position: relative;z-index: 2;cursor: pointer;}
.field-icon.toggle-password {float: right;left: -10px;}
 td.name-pw {padding-top: 2px;margin-top: -35px;}
/*
.password .fa {position: absolute; top: 14px;left: 10px;color: #333333;}
    List Elements
*/
ul { margin: 0; padding: 2px 0 2px 15px; }

.wrong{background-color: #FFCED2;border: #FB0303 solid 2px;}

.w3-check {width: 18px;height: 18px;position: relative;top: 4px;}
.pre-fix {display: block;position: relative;left: 15px;padding: 4px 0;height: 32px;}

.value button {border: none!important;}
.value input:required::placeholder{
    color: red;
    background:pink;
    padding: 10px;
    text-decoration: none;
}

.value input:required::-ms-input-placeholder{
    color: red;
    background:pink;
    padding: 10px;
}

.value input:required::-moz-placeholder{
    opacity: 1;
}