* {
  margin: 0;
  padding: 0;
}

html { height: 100%; overflow:auto; }
body { height: 100%; }

html, body {
  
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  color: #000000;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  /*font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  */-ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
  font-size: 0.9em;
}

#noScript {
  margin: 16px;
  color: Black;
}

:lang(en-GB) {
  quotes: '\2018' '\2019' '\201C' '\201D';
}

:lang(zh) {
  font-family: 微软雅黑;
}

@-ms-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@-webkit-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/* Theme layout styles */

#fullPage {
  position: absolute;
  bottom: 28px;
  top: 0;
  width: 100%;
}

#brandingWrapper {
  background-color: #A5D7D2; /* <= Uni-Mint; default: #4488dd; */
  height: 100%;
  width: 100%;
}

#branding {
  /* A background image will be added to the #branding element at run-time once the illustration image is configured in the theme. 
     Recommended image dimensions: 1420x1200 pixels, JPG or PNG, 200 kB average, 500 kB maximum. */
  background-color: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

#brandingTint {
  /* This will define a tint to be overlaid on top of the illustration background image. */
  background-color: rgba(0, 0, 0, 0.0); /* <=  default: rgba(0,0,0,0.4); */
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

#contentWrapper {
  background-color: transparent;
  height: 0;
  width: 100%;
}

#content {
  /* Set content to center */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: #fff;

  /* Set size margins */
  margin-bottom: 28px;
  margin-left: auto;
  margin-right: auto;
  min-height: 235px;
  min-width: 320px;
  max-width: 412px;
  width: auto; /*calc(100% - 40px); */
  height: auto;
  padding: 36px;

  /* Add drop shadow */
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.55); /* default: 0 2px 3px */
  border: 1px solid rgba(0, 0, 0, 0.4);

  /* Allow Scrolling */
  overflow-y: auto;
  max-height: 80%;
}

#header {
  font-size: 2em;
  font-weight: lighter;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  padding: 0 0 0 0;
  margin: 0;
  height: 36px;
  width: 338px;
  background-color: transparent;
}

#header img {
  /* Logo image recommended dimension: 108x24  or 338x24 (elongated), 4 kB average, 10 kB maximum. Transparent PNG strongly recommended. */
  width: auto;
  height: 100%;
  position: relative;
  top: -7px;
}

#loginMessage {
  box-sizing: border-box;
  color: rgb(38, 38, 38);
  direction: ltr;
  display: block;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-weight: 300;
  font-size: 1.2rem;
  height: auto;
  line-height: 28px;
  margin-bottom: 16px;
  margin-left: -2px;
  margin-right: -2px;
  margin-top: 16px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  text-align: left;
  text-size-adjust: 100%;
  width: 342px;
  background-color: transparent;
}

#loginForm {
  width: 338px;
}

#workArea, #header {
  word-wrap: break-word;
}

#workArea {
  margin-bottom: 4%;
  margin-top: 16px;
  background-color: transparent;
}

#footerPlaceholder {
  height: 0;
}

#footer {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  box-sizing: border-box;
  clear: both;
  color: rgb(38, 38, 38);
  direction: ltr;
  display: block;
  filter: none;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 15px;
  font-weight: normal;
  height: 28px;
  line-height: 20px;
  overflow-x: visible;
  overflow-y: visible;
  position: fixed;
  text-align: left;
  text-size-adjust: 100%;
  width: 100%;
}

#footerLinks {
  padding-left: 10px;
}

#copyright {
  display: none;
}

/* <= hides Microsoft copyright in footer
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  direction: ltr;
  display: inline-block;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 12px;
  font-weight: normal;
  height: 28px;
  line-height: 28px;
  margin-left: 8px;
  margin-right: 8px;
  text-align: left;
  text-size-adjust: 100%;
}*/

#userNameArea, #passwordArea {
  box-sizing: border-box;
  color: rgb(38, 38, 38);
  direction: ltr;
  display: block;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 15px;
  font-weight: normal;
  height: 52px;
  line-height: 20px;
  margin-left: 0;
  margin-right: -2px;
  text-align: left;
  text-size-adjust: 100%;
  width: 342px;
}

#updatePasswordForm #submitButton, #cancelButton {
  width: 48%;
}

#oldPasswordArea, #newPasswordArea {
  margin-bottom: 7px;
}

#errorMessage {
  margin-top: 5px;
}

.pageLink {
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
  color: #ffffff; /* <= set hyperlinks color; default: rgb(0, 0, 0); */
  direction: ltr;
  display: inline-block;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 12px;
  font-weight: normal;
  height: 28px;
  line-height: 28px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  text-size-adjust: 100%;
  text-decoration: underline;
}

/* Common content styles */

.clear {
  clear: both;
}

.float {
  float: left;
}

.floatReverse {
  float: right;
}

.indent {
  margin-left: 16px;
}

.indentNonCollapsible {
  padding-left: 16px;
}

.hidden {
  display: none;
}

.notHidden {
  display: inherit;
}

.error {
  color: #e81123;
}

.actionLink {
  margin-top: 5px;
  margin-bottom: 8px;
  display: block;
}

a {
  color: #0067b8;
  text-decoration: none;
  background-color: transparent;
  word-wrap: normal;
}

ul {
  list-style-type: disc;
}

ul, ol, dd {
  padding: 0 0 0 16px;
}

h1, h2, h3, h4, h5, label {
  margin-bottom: 8px;
}

.submitMargin {
  height: 32px;
  margin-top: 18px;
  margin-bottom: 18px;
}

.topFieldMargin {
  margin-top: 8px;
}

.fieldMargin {
  margin-bottom: 8px;
}

.groupMargin {
  margin-bottom: 0;
}

.sectionMargin {
  margin-bottom: 64px;
}

.block {
  display: block;
}

.autoWidth {
  width: auto;
}

.fullWidth {
  width: 315px;
}

.fullWidthIndent {
  width: 315px;
}

.smallTopSpacing {
  margin-top: 15px;
}

.mediumTopSpacing {
  margin-top: 25px;
}

.largeTopSpacing {
  margin-top: 35px;
}

.smallBottomSpacing {
  margin-bottom: 5px;
}

.mediumBottomSpacing {
  margin-bottom: 15px;
}

.largeBottomSpacing {
  margin-bottom: 25px;
}

#openingMessage {
  margin-bottom: 4px;
}

input {
  max-width: 100%;
  font-family: inherit;
  margin-top: 0;
  margin-bottom: 0;
}

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

span.submit, input[type="submit"] {
  align-items: flex-start;
  background-color: rgb(0, 103, 184);
  border-bottom-color: rgb(0, 103, 184);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgb(0, 103, 184);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgb(0, 103, 184);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgb(0, 103, 184);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  direction: ltr;
  display: inline-block;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: normal;
  height: 36px;
  letter-spacing: normal;
  line-height: 25px;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 3px;
  position: relative;
  text-align: center;
  text-indent: 0;
  text-overflow: ellipsis;
  text-rendering: auto;
  text-shadow: none;
  text-size-adjust: 100%;
  touch-action: manipulation;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  word-spacing: 0;
  writing-mode: horizontal-tb;
  -webkit-appearance: none;
  -webkit-rtl-ordering: logical;
  -webkit-border-image: none;
}

input[type="submit"]:hover, span.submit:hover {
  background: rgb(0, 85, 152);
  border: 1px solid rgb(0, 85, 152);
}

input.text {
  background-color: rgba(255, 255, 255, 0.4);
  background-image: none;
  border-bottom-color: rgba(0, 0, 0, 0.6);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-top: none;
  border-left: none;
  border-right: none;
  box-sizing: border-box;
  color: rgb(38, 38, 38);
  cursor: auto;
  direction: ltr;
  display: block;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: normal;
  height:36px;
  letter-spacing: normal;
  line-height: 20px;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  max-width: 100%;
  outline-color: rgb(38, 38, 38);
  outline-style: none;
  outline-width: 0;
  padding-bottom: 6px;
  padding-left: 0;
  padding-right: 10px;
  padding-top: 6px;
  text-align: start;
  text-indent: 0;
  text-rendering: auto;
  text-shadow: none;
  text-size-adjust: 100%;
  text-transform: none;
  user-select: text;
  width: 310px;
  word-spacing: 0;
  writing-mode: horizontal-tb;
  -webkit-appearance: none;
  -webkit-locale: "en";
  -webkit-rtl-ordering: logical;
  -webkit-border-image: none;
}

input.text:focus {
  border: 1px solid #0067B8;
  border-top: none;
  border-left: none;
  border-right: none;
}

label.error {
  color: red;
  font-size: 1rem;
  display: block;
  margin-top: 5px;
}

input.error {
  border: 1px solid red;
  border-top: none;
  border-left: none;
  border-right: none;
  font-weight: 300;
  color: red;
}

/* The container must be positioned relative: */
.custom-select {
  width: 100%;
  position: relative;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: normal;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: rgba(255, 255, 255, 0.4);
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

fieldset {
  background-color: rgba(255, 255, 255, 0.4);
  background-image: none;
  border-color: rgba(0, 0, 0, 0.6);
  border-style: solid;
  border-width: 1px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  box-sizing: border-box;
  width: auto;
  height: auto;
  padding:10px;
}
legend {
  
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 20px;
  font-weight: 500;
  padding: 0px 5px;
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
/* Create a custom checkbox */
.checkmarkBox {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmarkBox {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmarkBox {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkBox:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmarkBox:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmarkBox:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

textarea {
  background-color: rgba(255, 255, 255, 0.4);
  background-image: none;
  border-bottom-color: rgba(0, 0, 0, 0.6);
  border-bottom-style: none;
  border-bottom-width: 1px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-top: none;
  border-left: none;
  border-right: none;
  box-sizing: border-box;
  color: rgb(38, 38, 38);
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: normal;
  height:108px;
  /*line-height: 120px;*/
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  max-width: 100%;
  outline-color: rgb(38, 38, 38);
  outline-style: none;
  outline-width: 0;
  padding-bottom: 6px;
  padding-left: 0;
  padding-right: 10px;
  padding-top: 6px;
  text-align: start;
  text-indent: 0;
  text-rendering: auto;
  text-shadow: none;
  text-size-adjust: 100%;
  text-transform: none;
  user-select: text;
  width: 310px;
  /*
  line-break: auto;
  content: "\a";
  word-spacing: pre;*/
  writing-mode: horizontal-tb;
  resize: none;
  -webkit-appearance: none;
  -webkit-locale: "en";
  -webkit-rtl-ordering: logical;
  -webkit-border-image: none;
}

textarea:focus {
  border: 1px solid #0067B8;
  border-top: none;
  border-left: none;
  border-right: none;
}

select {
  height: 28px;
  min-width: 60px;
  max-width: 100%;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: none;
  padding: 2px;
  font-family: inherit;
}

h1, .giantText {
  font-size: 2.0em;
  font-weight: lighter;
}

h2, .bigText {
  font-size: 1.33em;
  font-weight: lighter;
}

h3, .normalText {
  font-size: 1.25em;
  font-weight: normal;
}

h4, .smallText {
  font-size: 0.9em;
  font-weight: normal;
}

h4 {
  font-size: 0.7em;
  font-weight: normal;
}

h5, .tinyText {
  font-size: 0.9em;
  font-weight: normal;
}

.hint {
  color: #999999;
}

.emphasis {
  font-weight: 700;
  color: #2F2F2F;
}

.smallIcon {
  height: 20px;
  padding-right: 12px;
  vertical-align: middle;
}

.largeIcon {
  height: 48px;
  /* width:48px; */
  vertical-align: middle;
}

.largeTextNoWrap {
  height: 48px;
  display: table-cell; /* needed when in float*/
  vertical-align: middle;
  white-space: nowrap;
  font-size: 1.2em;
}

.idp {
  height: 48px;
  clear: both;
  padding: 8px;
  overflow: hidden;
  cursor: pointer;
}

.idp:hover {
  background-color: #cccccc;
  cursor: pointer;
}

.idpDescription {
  width: 80%;
  cursor: pointer;
}

.identityBanner {
  color: black;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
  height: 28px;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 15px;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.submit.backButton {
  color: black;
  width: 108px;
  background: #CCCCCC;
  border-color: #CCCCCC;
  height: 32px;
  margin-left: 10px;
  float: right;
}

input[type="submit"].backButton:hover, span.submit.backButton:hover {
  background: #AAA;
  border: 1px solid #AAA;
}

.submit.nextButton {
  left: 0;
  bottom: 0;
  height: 32px;
  width: 108px;
  float: right;
  margin-left: 10px;
}

.submit.modifiedSignIn {
  display: block;
  position: relative;
  height: 32px;
  width: 108px;
  float: right;
  margin-left: 10px;
}

#submissionArea {
  margin-top: 8px;
}

@keyframes ProgressFlagAnimation {
  from {
      left: 0;
  }
  to {
      left: 314px;
  }
}

.ProgressFlag.Show {
  opacity: 1;
}

.ProgressFlag > div {
  width: 2px;
  height: 2px;
  margin: 0 5px;
  background: blue;
  position: relative;
  -webkit-animation: ProgressFlagAnimation 1.45s infinite ease-in-out; /* Chrome, Safari, Opera */
  -webkit-animation-delay: -2s; /* Chrome, Safari, Opera */
  animation: ProgressFlagAnimation 5s infinite ease-in-out;
  animation-delay: -2s;
  text-align: center;
  display: inline-block;
}

.ProgressFlag > div:nth-child(1) {
  -webkit-animation-delay: .0s;
}

.ProgressFlag > div:nth-child(2) {
  -webkit-animation-delay: .2s;
}

.ProgressFlag > div:nth-child(3) {
  -webkit-animation-delay: .4s;
}

@media (max-width: 600px), (max-height: 392px) {
  #content {
      /* Set content to center */
      position: relative;
      top: 0;
      left: 0;
      transform: none;
      background-color: #fff;
      /* Set size margins */
      margin-bottom: 28px;
      margin-left: auto;
      margin-right: auto;
      min-height: 290px;
      min-width: 320px;
      max-width: 412px;
      width: calc(100% - 40px);
      height: auto;
      padding: 23px 18px 0 18px;
      /* Add drop shadow */
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      border: 0 solid rgba(0, 0, 0, 0);

      /* Allow Scrolling */
      overflow-y: initial;
      max-height: initial;
  }

  #footer {
      background-color: rgba(0, 0, 0, 0.6);
      bottom: 0;
      box-sizing: border-box;
      clear: both;
      color: rgb(38, 38, 38);
      direction: ltr;
      display: block;
      filter: none;
      font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
      font-size: 15px;
      font-weight: normal;
      height: 28px;
      line-height: 20px;
      overflow-x: visible;
      overflow-y: visible;
      position: fixed;
      text-align: left;
      text-size-adjust: 100%;
      width: 100%;
  }

  #brandingWrapper {
      display: none;
  }

  input.text {
      font-size: 16px;
  }

  .identityBanner {
      margin: 16px 0;
      padding: 0 80px 0 40px;
  }

  .identityBannerImage {
      left: -50px;
  }
}

/* Targets displays using any of Windows’ High Contrast Mode themes: */
@media screen and (-ms-high-contrast: active) {
  textarea::-webkit-input-placeholder {
      color: #00FF00;
  }

  textarea:-moz-placeholder { /* Firefox 18- */
      color: #00FF00;
  }

  textarea::-moz-placeholder { /* Firefox 19+ */
      color: #00FF00;
  }

  textarea:-ms-input-placeholder {
      color: #00FF00;
  }
}

/* Targets displays using the Windows’ "High Contrast Black" theme: */
@media screen and (-ms-high-contrast: white-on-black) {
  #contentWrapper {
      background-color: #000000;
      color: #ffffff;
  }

  .idp:hover {
      background-color: #ffffff;
      color: #000000;
  }

  #brandingWrapper {
      background-color: #000000;
      color: #ffffff;
  }

  html, body {
      background-color: #000000;
      color: #ffffff;
  }

  textarea::-webkit-input-placeholder {
      color: #ffffff;
  }

  textarea:-moz-placeholder { /* Firefox 18- */
      color: #ffffff;
  }

  textarea::-moz-placeholder { /* Firefox 19+ */
      color: #ffffff;
  }

  textarea:-ms-input-placeholder {
      color: #ffffff;
  }
}

/* Targets displays using the Windows’ "High Contrast White" theme: */
@media screen and (-ms-high-contrast: black-on-white) {
  #contentWrapper {
      background-color: #ffffff;
      color: #000000;
  }

  .idp:hover {
      background-color: #000000;
      color: #ffffff;
  }

  #brandingWrapper {
      background-color: #ffffff;
      color: #000000;
  }

  html, body {
      background-color: #ffffff;
      color: #000000;
  }

  textarea::-webkit-input-placeholder {
      color: #000000;
  }

  textarea:-moz-placeholder { /* Firefox 18- */
      color: #000000;
  }

  textarea::-moz-placeholder { /* Firefox 19+ */
      color: #000000;
  }

  textarea:-ms-input-placeholder {
      color: #000000;
  }
}

#authOptionLinks {
  text-align: right;
}