@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  color: #000000;
  font-weight: normal;
  font-family: "Roboto", sans-serif;
  min-width: 500px;
  -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,
#brandingWrapper {
  width: 100%;
  height: 100%;
  background-color: inherit;
}
#brandingWrapper {
  background-color: #4488dd;
}
#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. */
  height: 100%;
  background-color: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  min-height: 740px;
  height: 100%;
}
#contentWrapper {
  position: absolute;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 426px;
  width: 423px;
  box-sizing: border-box;
  top: 220px;
  right: 136px;
}
#content {
  min-height: 100%;
  height: auto !important;
  margin: 0 auto -55px auto;
  padding: 0px 150px 0px 50px;
}
#header {
  font-size: 2em;
  font-weight: lighter;
  font-family: "Roboto", sans-serif;
  padding-top: 90px;
  margin-bottom: 60px;
  min-height: 100px;
  overflow: hidden;
}
#header img {
  /* Logo image recommended dimension: 60x60 (square) or 350X35 (elongated), 4 kB average, 10 kB maximum. Transparent PNG strongly recommended. */
  width: auto;
  height: auto;
}
#workArea,
#header {
  word-wrap: break-word;
  width: 343px;
}
#footerPlaceholder {
  height: 40px;
}
#footer {
  height: 40px;
  padding: 0px 50px 0px 50px;
  position: relative;
  color: #666666;
  font-size: 0.78em;
}
#footerLinks {
  float: none;
  padding-top: 5px;
}
#copyright {
  color: #696969;
}
.pageLink {
  color: #000000;
  padding-left: 16px;
}

/* 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: #c85305;
}
.actionLink {
  margin-bottom: 8px;
  display: block;
}
a {
  color: #2672ec;
  text-decoration: none;
  background-color: transparent;
}
ul {
  list-style-type: disc;
}
h1,
h2,
h3,
h4,
h5,
label {
  margin-bottom: 8px;
}
.submitMargin {
  margin-top: 32px;
  margin-bottom: 40px;
}
.topFieldMargin {
  margin-top: 8px;
}
.fieldMargin {
  margin-bottom: 8px;
}
.groupMargin {
  margin-bottom: 30px;
}
.sectionMargin {
  margin-bottom: 64px;
}
.block {
  display: block;
}
.autoWidth {
  width: auto;
}
.fullWidth {
  width: 342px;
}
.fullWidthIndent {
  width: 326px;
}
input {
  max-width: 100%;
  font-family: inherit;
  margin-bottom: 8px;
}
input[type="radio"],
input[type="checkbox"] {
  vertical-align: middle;
  margin-bottom: 0px;
}
span.submit,
input[type="submit"] {
  border: none;
  background-color: rgb(38, 114, 236);
  min-width: 80px;
  width: auto;
  height: 30px;
  padding: 4px 20px 6px 20px;
  border-style: solid;
  border-width: 1px;
  transition: background 0s;
  color: rgb(255, 255, 255);
  cursor: pointer;
  margin-bottom: 8px;

  -ms-user-select: none;
  -moz-transition: background 0s;
  -webkit-transition: background 0s;
  -o-transition: background 0s;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
input[type="submit"]:hover,
span.submit:hover {
  background: rgb(212, 227, 251);
}
input.text {
  height: 28px;
  padding: 0px 3px 0px 3px;
  border: solid 1px #bababa;
}
input.text:focus {
  border: 1px solid #6b6b6b;
}
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: 2em;
  font-weight: lighter;
}
h2,
.bigText {
  font-size: 1.33em;
  font-weight: lighter;
}
h3,
.normalText {
  font-size: 1em;
  font-weight: normal;
}
h4,
.smallText {
  font-size: 0.9em;
  font-weight: normal;
}
h5,
.tinyText {
  font-size: 0.8em;
  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;
}
.idp:hover {
  background-color: #cccccc;
}
.idpDescription {
  width: 80%;
}

/* Form factor: intermediate height layout. Reduce space of the header. */
@media only screen and (max-height: 820px) {
  #header {
    padding-top: 40px;
    min-height: 0px;
    overflow: hidden;
  }
}

/* Form factor: intermediate height layout. Reduce space of the header. */
@media only screen and (max-height: 500px) {
  #header {
    padding-top: 30px;
    margin-bottom: 30px;
  }
}

/* Form factor: intermediate layout (WAB in non-snapped view falls in here) */
@media only screen and (max-width: 600px) {
  html,
  body {
    min-width: 260px;
  }

  #contentWrapper {
    float: none;
    width: 100%;
  }

  #content,
  #footer,
  #header {
    width: 400px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
  }

  #workArea {
    width: 100%;
  }

  .fullWidth {
    width: 392px;
  }

  .fullWidthIndent {
    width: 376px;
  }
}

@media only screen and (max-width: 450px) {
  body {
    font-size: 0.8em;
  }

  #content,
  #footer {
    width: auto;
    margin-right: 33px;
    margin-left: 25px;
  }

  #header {
    width: auto;
  }

  span.submit,
  input[type="submit"] {
    font-size: 0.9em;
  }

  .fullWidth {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .fullWidthIndent {
    width: 85%;
  }

  .idpDescription {
    width: 70%;
  }
}

/* Form factor: snapped WAB (for WAB to work in snapped view, the content wrapper width has to be set to 260px) */
@media only screen and (max-width: 280px) {
  #contentWrapper {
    width: 260px;
  }
  .idpDescription {
    max-width: 160px;
    min-width: 100px;
  }
}

/* NEW DESIGN */

/* BRANDING WRAPPER */
#brandingWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* INTRO CONTAINER */
.intro-container {
  position: absolute;
  top: 160px;
  left: 136px;
}

.grupo-container {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-right: 10px;
}

/* SVG Letter Components for Logo */
.svg-letter {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Grupo Letters */
.svg-letter-g {
  width: 24px;
  height: 33px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="33" viewBox="0 0 24 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1724 32.7378C10.0527 32.7378 6.56272 31.3494 4.06661 28.7698C1.28978 25.8564 0 21.934 0 16.4789C0 10.4321 1.67672 6.1379 5.07568 3.18657C7.42005 1.15326 10.25 0.182129 13.6489 0.182129C17.0479 0.182129 20.1586 1.2443 22.6547 3.32313L20.8793 5.67509C18.2011 3.9225 16.2816 3.23209 13.7476 3.23209C9.91616 3.23209 6.89655 4.93916 5.56124 8.58849C4.69633 10.9404 4.27146 13.6186 4.27146 16.6231C4.27146 20.7807 5.08326 24.1494 6.57031 26.2282C8.05735 28.307 11.4032 29.5968 14.5214 29.5968C16.5775 29.5968 18.3529 29.1795 19.7413 28.3525V18.7019H13.133V15.5609H23.4285V30.3327C21.0842 31.8122 17.5411 32.7302 14.1876 32.7302" fill="white"/></svg>');
}

.svg-letter-r {
  width: 22px;
  height: 33px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="22" height="33" viewBox="0 0 22 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5537 4.38513C11.4991 3.96785 10.2093 3.74024 8.43395 3.74024H4.64805V15.5607H8.14564C11.0666 15.5607 12.842 15.0524 14.0862 13.9447C15.1863 12.9736 15.763 11.2665 15.763 9.18768C15.763 7.10885 14.4201 5.12865 12.5537 4.38513ZM16.6203 32.2293C15.6643 30.1505 12.5992 25.3024 8.24427 19.946C6.9469 18.3755 6.23373 17.9582 4.60253 17.9127V32.2293H0.672485V0.553711H8.33532C12.8344 0.553711 15.0422 1.33517 16.6203 2.58702C18.1073 3.74024 19.8751 5.86459 19.8751 9.2332C19.8751 14.453 16.3775 17.9127 11.1577 17.9127H10.6797C12.2123 19.1114 13.3124 20.5909 13.9876 21.471C15.376 23.2691 21.5518 32.2293 21.5518 32.2293H16.6203Z" fill="white"/></svg>');
}

.svg-letter-u {
  width: 22px;
  height: 33px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="22" height="33" viewBox="0 0 22 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4418 30.3326C17.4312 31.9941 14.7986 32.7831 10.823 32.7831C5.74731 32.7831 2.87185 31.3492 1.10409 28.2158C0.239172 26.6908 0.148132 24.6575 0.148132 23.2767V0.553711H4.02507V21.8883C4.02507 23.4588 4.16922 25.4921 4.60168 26.4556C5.22381 27.844 6.99916 29.5511 11.0202 29.5511C13.7516 29.5511 15.8076 28.8607 16.8167 27.5633C17.9168 26.1294 18.061 24.7485 18.061 22.6242V0.553711H21.9379V23.087C21.9379 26.9184 21.4144 28.7241 19.4494 30.3401" fill="white"/></svg>');
}

.svg-letter-p {
  width: 21px;
  height: 33px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="21" height="33" viewBox="0 0 21 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4151 5.31074C13.0722 4.20304 11.3045 3.74024 8.18623 3.74024H4.11962V16.5319H9.52913C12.306 16.5319 13.5502 16.0235 14.6503 14.8248C15.796 13.5805 16.327 12.1466 16.327 10.3485C16.327 7.99653 15.7504 6.42602 14.4151 5.31833M17.723 17.1312C15.5228 19.0204 13.1253 19.6273 9.77191 19.6273H4.11962V32.2293H0.189575V0.553711H9.28634C12.8295 0.553711 14.6958 0.925472 16.4712 2.03317C19.248 3.78576 20.682 6.41844 20.682 9.60496C20.682 12.7915 19.8702 15.2345 17.7155 17.1312" fill="white"/></svg>');
}

.svg-letter-o {
  width: 27px;
  height: 33px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="27" height="33" viewBox="0 0 27 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9284 7.38944C19.7828 5.03748 17.3853 3.0497 13.5994 3.0497C10.5343 3.0497 7.80297 4.48363 6.55871 6.74455C5.41307 8.82338 4.88199 11.5471 4.88199 15.4696C4.88199 20.2266 5.6938 24.3767 6.99117 26.501C8.23543 28.5343 11.3006 29.9151 13.9788 29.9151C16.657 29.9151 18.622 28.9895 20.109 27.1914C21.7326 25.2036 22.4989 22.6696 22.4989 17.4498C22.4989 12.7838 22.0209 9.60484 20.9208 7.38186M22.1272 29.7786C19.6842 31.9029 17.1956 32.8285 13.7967 32.8285C9.77559 32.8285 6.66493 31.258 4.45713 28.815C1.86997 25.9548 0.534668 21.6605 0.534668 16.2586C0.534668 6.1907 5.51171 0.00732422 13.607 0.00732422C19.3048 0.00732422 22.3699 2.91313 23.948 5.18163C26.0117 8.13297 26.9145 11.8278 26.9145 16.9111C26.9145 23.0034 25.4806 26.8348 22.1272 29.7938" fill="white"/></svg>');
}

/* NC Letters */
.svg-letter-n {
  width: 26px;
  height: 33px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="26" height="33" viewBox="0 0 26 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.7871 32.2217L10.9907 21.2282C10.1409 19.5894 9.15462 17.3209 8.44904 15.2724C8.63871 16.5015 8.91942 19.4073 8.91942 23.3146V32.2217H0.907593V0.553711H9.01048L14.9966 11.4107C15.9374 13.095 16.9313 15.3179 17.7279 17.4499C17.4927 15.5835 17.4472 12.4501 17.4472 10.3637V0.553711H25.459V32.2217H16.7871Z" fill="white"/></svg>');
}

.svg-letter-c {
  width: 25px;
  height: 33px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="25" height="33" viewBox="0 0 25 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7802 32.7681C10.7288 32.7681 7.0491 31.5845 4.03708 28.4056C1.44234 25.6364 0.266357 21.5015 0.266357 17.0024C0.266357 13.0496 0.926431 10.0527 2.52728 7.18486C5.3117 2.23057 10.0687 0 15.8196 0C19.1655 0 22.701 0.910436 24.2108 2.32161L20.6298 8.31532C19.1655 7.22279 17.5191 6.63101 15.7286 6.63101C14.2643 6.63101 12.8986 6.99518 12.0489 7.8601C10.4481 9.45336 9.92457 11.0846 9.92457 14.8098C9.92457 20.0372 10.1598 22.5333 11.5254 24.081C12.6104 25.3101 13.976 26.084 15.721 26.084C17.8378 26.084 19.5372 25.5833 21.3733 23.99L24.9998 29.5361C22.9286 31.4025 19.5828 32.7605 14.7726 32.7605" fill="white"/></svg>');
}

.svg-letter-underscore {
  width: 53px;
  height: 7px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="53" height="7" viewBox="0 0 53 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52.4689 0.780273H0.900269V6.85743H52.4689V0.780273Z" fill="white"/></svg>');
}

/* Logo container styles */
.logo-container {
  display: flex;
  align-items: center;
  gap: 2px;
}

.logo-text {
  margin-right: 5px;
}

.nc-grouptext-content {
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  margin-top: 132px;
}

.nc-grouptext-content h2 {
  color: rgba(255, 255, 255, 0.87);
  font-size: 48px;
  font-weight: 400;
  line-height: 116.7%;
}

.nc-grouptext-description {
  color: rgba(255, 255, 255, 0.87);
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.15px;
  max-width: 272px;
}

.nc-grouptext-userlabel {
  font-size: 12px;
  font-weight: 400;
  line-height: 166%;
  letter-spacing: 0.4px;
}

#userNameInput,
#passwordInput {
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #b6b5bb;
  background: #fff;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: flex;
  height: 51px;
  padding: 16px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.nc-grouptext-passwordlabel {
  font-size: 12px;
  font-weight: 400;
  line-height: 166%;
  letter-spacing: 0.4px;
}

#header {
  display: none;
}

#workArea {
  margin-top: 40px;
}

#loginMessage {
  display: none;
}

#content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

#submitButton {
  border-radius: 4px;
  background: #0066a4;
  display: flex;
  padding: 8px 12px;
  align-items: center;
  justify-content: center;
}

#footer {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#userNameInput::placeholder,
#passwordInput::placeholder {
  color: #b6b5bb;
}

.content-container {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

@media only screen and (max-width: 1265px) {
  #branding {
    min-height: 1000px;
  }

  .nc-grouptext-content h2 {
    font-size: 42px;
  }
}

@media only screen and (max-width: 1199px) {
  .nc-grouptext-content h2 {
    font-size: 36px;
  }

  #branding {
    min-height: 1000px;
  }
}

@media only screen and (max-width: 1139px) {
  .nc-grouptext-content h2 {
    font-size: 28px;
  }

  #branding {
    min-height: 1000px;
  }
}

@media only screen and (max-width: 1138px) {
  .nc-grouptext-content h2 {
    max-width: 60%;
    font-size: 36px;
  }

  #branding {
    min-height: 1000px;
  }
}

@media only screen and (max-width: 992px) {
  .intro-container {
    top: 170px;
    left: 15%;
    right: 15%;
  }

  .nc-grouptext-title {
    margin-top: 107px;
  }

  .nc-grouptext-content h2 {
    font-size: 34px;
    max-width: 100%;
  }

  .nc-grouptext-content {
    margin-top: 64px;
  }

  #contentWrapper {
    top: 515px;
    left: 15%;
    right: 15%;
    padding: 0;
    width: calc(100vw - 30%);
    margin-right: 0;
    max-width: 100%;
  }

  .logo-container {
    top: 120px;
    left: 136px;
  }

  #authArea {
    padding: 0 40px;
  }

  #workArea {
    width: 100%;
  }

  #branding {
    min-height: 1000px;
  }
}

@media only screen and (max-width: 540px) {
  .intro-container {
    top: 152px;
    left: 24px;
  }

  .nc-grouptext-content {
    margin-top: 64px;
  }

  .nc-grouptext-content h2 {
    font-size: 24px;
  }

  .nc-grouptext-content p {
    font-size: 12px;
  }

  .nc-grouptext-title {
    margin-top: 64px;
  }

  #contentWrapper {
    top: 390px;
    left: 24px;
    right: 24px;
    padding: 0;
    width: calc(100vw - 48px);
    margin-right: 0;
    max-width: 100%;
  }

  #branding {
    min-height: 850px;
  }

  #workArea {
    margin-top: 24px;
  }

  #authArea {
    padding: 0 24px;
  }

  .submitMargin {
    margin-bottom: 24px;
}
}