/* don't inject tailwind base, instead copy the tailwind base here for modification purpose */
/* TAILWIND BASE START */

/* https://unpkg.com/tailwindcss@3.1.8/src/css/preflight.css */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: theme(
    'fontFamily.sans',
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: theme(
    'fontFamily.mono',
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-size: 1em; /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: theme('colors.gray.400', #9ca3af); /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role='button'] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* TAILWIND BASE END */

/* START OF OTHER TAILWIND RULES */

@tailwind components;

@tailwind utilities;

/* END OF OTHER TAILWIND RULES */
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
.body-signin-link {
  margin-top: 10px;
  font-size: 14px;
}
.alert-error {
  margin-top: 5px;
  color: #e50101;
  font-size: 14px;
  font-weight: 600;
}
.alert-success {
  margin-top: 5px;
  color: #4e994f;
  font-size: 14px;
  font-weight: 600;
}
#otp-autofill {
  opacity: 1;
  border: none;
  position: absolute;
  z-index: -999;
}
#disclaimer {
  display: none;
}
html {
  height: 100%;
}
body {
  height: initial;
}
* {
  font-family: SFProText, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', sans-serif;
}
button.link {
  display: inline;
  text-align: left;
  padding: 0;
  background: transparent;
  border: 0;
  font-weight: 600;
  color: #425cc7;
  text-decoration: none;
  cursor: pointer;
}

a.link,
a.link:link,
a.link:active,
a.link:visited,
a.link:hover {
  font-weight: 600;
  color: #425cc7;
  text-decoration: none;
  cursor: pointer;
}
a.link:hover {
  text-decoration: underline;
}
.kw-logo {
  background-image: url('./img/kw-logo-sign-in.png?v=1.0');
  background-image: linear-gradient(transparent, transparent),
    url('./img/kw-logo-sign-in.svg?v=1.0');
  background-position: center center;
  background-size: 250px;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.card {
  margin: 0 auto;
  max-width: 420px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.card-head {
  font-size: 3em;
  text-align: center;
  height: 120px;
}
.card .body {
  background: #fff;
  padding: 20px 30px;
}
.card .body,
.card .card-head,
.card .signinDisclaimer {
  /* to handle old branding */
  /* don't remove */
  width: 420px;
}
.body-head {
  font-size: 20px;
  text-align: center;
  font-weight: 500;
}
.body-text {
  margin-top: 10px;
  font-size: 14px;
  color: #767676;
}
.body-foot {
  margin-top: 10px;
}
.body-foot .btn {
  text-align: center;
  width: 100%;
  font-size: 14px;
}
.body input {
  border-radius: 4px;
  margin-top: 6px;
  width: 100%;
}
div#powered-by a {
  cursor: default;
}
.body-powered-by {
  height: 43px;
  background-size: 110px;
  background-image: url('./img/securedbyacc.png?v=1.0');
  background-image: url('./img/securedbyacc.svg?v=1.0');
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 100px;
}
.body-other-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.body-sso-link {
  color: #767676;
  margin-top: 10px;
  font-size: 14px;
}
.body-sso-link .link {
  display: block;
}
input:disabled {
  background: #ebebeb;
}
.captcha-label {
  display: block;
}
label {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
}
.email-dialog {
  color: #425cc7;
}
.link-separator {
  display: inline-block;
  width: 32px;
}
.fieldset {
  position: relative;
}
.fieldset .alert-error {
  font-size: 14px;
}
.btn-p {
  border: 1px solid #fff;
  background: #425cc7;
}
.btn-p[disabled],
.btn-p[disabled]:hover,
.btn-p[disabled]:focus,
btn-p[disabled]:active {
  cursor: not-allowed;
  background: #8e9ede;
}
.btn-p:hover {
  background: #697dd3;
}

.btn-p:active,
.btn-p:focus {
  background: #005ec2;
  outline: -webkit-focus-ring-color auto 5px;
  box-shadow: 0 0 3px #425cc7;
}
.alert {
  border: solid 1px #f00;
}
.big-logo {
  display: none;
  z-index: -1;
  width: 420px;
  height: 240px;
  position: absolute;
  right: 50%;
  margin-right: 140px;
  margin-top: 200px;
}
body.background {
  /* values to match admin branding tools */
  background-image: none;
  background-color: white;
  background-position: center top;
  background-size: cover;
}
textarea,
input[type='text'],
input[type='password'] {
  font-size: 15px;
  line-height: 23px;
}
textarea:focus,
input:focus,
select:focus {
  outline: -webkit-focus-ring-color auto 5px;
  border: 1px solid #425cc7;
}
/*vuejs common */
[v-cloak] {
  display: none;
}
/* ie compatibility */
main {
  display: block;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.loader {
  margin: auto auto;
  font-size: 2px;
  position: relative;
  /* text-indent: -9999em; */
  border-top: 5px solid #a8ccf3;
  border-right: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  border-left: 5px solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}
.btn-sso .loader {
  border-top: 5px solid #f7f7f7;
  border-right: 5px solid #767676;
  border-bottom: 5px solid #767676;
  border-left: 5px solid #767676;
}

.otp-message {
  font-size: 14px;
  margin-bottom: 12px;
}

@media (prefers-color-scheme: dark) {
  body.background {
    background-color: black;
  }
  input {
    color: white;
  }
  input:disabled {
    background-color: #333;
  }
  .card-head,
  .card .body {
    background-color: black !important;
    color: white;
  }

  .kw-logo {
    background-image: url('./img/kw-logo-sign-in-white.png?v=1.0');
    background-image: linear-gradient(transparent, transparent),
      url('./img/kw-logo-sign-in-white.svg?v=1.0');
  }

  .body-powered-by {
    background-image: url('./img/securedbyacc-white.png?v=1.0');
    background-image: url('./img/securedbyacc-white.svg?v=1.0');
  }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 319px) {
  .card {
    margin: 0px auto;
  }
  .card .body {
    padding: 15px 15px;
  }
  .kw-logo {
    background-size: contain !important;
  }
  .card-head {
    padding: 20px;
  }
}
@media only screen and (min-width: 319px) {
  .card {
    margin: 0px auto;
    width: 100%;
  }
}
@media only screen and (max-height: 319px) {
  .card-head {
    display: none;
  }
  .card {
    margin-top: 0;
  }
}
@media only screen and (min-height: 319px) {
  #disclaimer {
    display: block;
    margin-bottom: 80px;
  }
}
@media only screen and (min-height: 769px) and (min-width: 769px) {
  .card {
    margin: calc(15vh) auto;
  }
}

@media only screen and (min-width: 769px) {
  .big-logo {
    display: block;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 769px) {
  body {
    background-color: black !important;
  }
}

@media (prefers-color-scheme: light) and (max-width: 769px) {
  body {
    background-color: white !important;
  }
}

@media only screen and (max-width: 769px) {
  body.background {
    background-image: none !important;
  }
  .card {
    padding-left: 0;
  }
}

#powered-by {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #595955;
  text-align: right;
  min-height: 60px;
}

.msp-partner-logo {
  margin: 10px auto;
  height: 40px;
  width: 240px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: none;
}

#captcha_image {
  display: inline-block;
  width: 80px;
  height: 83px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
  margin-top: 5px;
}

#captcha_field {
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
  width: calc(100% - 90px);
}

#reload_captcha {
  width: 100%;
}

#reload_captcha > img {
  width: 15px;
  height: auto;
}

#country-code {
  width: 80px;
  margin-right: 4px;
}

#mobile-container {
  width: 100%;
}

.tfaMobileNumberPicker {
  display: flex;
}

@media only screen and (max-width: 560px) {
  .card .body,
  .card .card-head,
  .card .signinDisclaimer {
    width: 100%;
  }
}

@media only screen and (max-width: 421px) {
  #mobile-container {
    width: 100%;
  }
  #country-code {
    width: 60px;
  }
}

@media (min-width: 0px) {
  .container {
    /* this is to override tailwind's css */
    max-width: 100% !important;
  }
}