/* The base the account pages (sign-in, licence manager, passkeys) are drawn on.

   ui.css and account.css are copied unchanged from the Equation Editor site so the
   two sites' account pages look the same - but they sit on top of that site's own
   style.css, for its variables, its IBM Plex faces and its plain buttons, inputs and
   headings. This is that part of it, and nothing else. Loaded only by the account
   pages, after Bootstrap and fxRender's style.css, so none of it reaches the rest
   of the site. */

:root {
    --black: #000;
    --darkblue:  #003366;
    --green: #28a745;
    --white: #fff;
    --maxwidth: 1200px;
    --margin: 5px;
    --nmargin: -5px;
    --spacing: 30px;
    --nspacing: -30px;
    --gridspacing: 10px;
}

@media (min-width: 576px) {
  :root {
    --margin: 30px;
    --nmargin: -30px;
  }
}

/* ---- IBM Plex, self-hosted - SIL Open Font License 1.1, see /assets/fonts/plex/LICENSE.txt ---- */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/assets/fonts/plex/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/assets/fonts/plex/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


h1, h2, h3, h4, h5 {
  font-weight: 300;
  margin: 0;
  line-height:normal;
}

h1 {
	font-size: 50px;
	margin-bottom: 15px;
}

h2 {
	font-size: 30px;
	margin-bottom: 1rem;
	margin-top: 30px;
}

h3 { 
	padding-top: 0;
	font-size: 1.4rem;
  font-weight: 400;
	margin-bottom: 1rem;
	margin-top:10px;
}

h4 { 
	font-size: 16px;
}

/* fxRender's own style.css gives its headings the marketing face (marine-up);
   the Equation Editor's does not, so there they take IBM Plex from body.ui. */
body.ui h1, body.ui h2, body.ui h3, body.ui h4, body.ui h5 {
  font-family: inherit;
}

.center, .center p, .center h3 {
  text-align: center;
}


input, select {
  width: 100%;
  max-width: 400px;
  height: 40px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

label {
  display: block;
}

textarea {
  width: 100%;
  max-width: 400px;
  height: 100px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

[type=button]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

button, a.button {
  padding: 8px 14px;

  border-radius: .2rem; 

  font-family: muli, sans-serif;
  font-weight: 400;
  font-size: 14px;
    
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;

  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-wrap: none;
  white-space: nowrap;

  color: var(--green);
  border: 1px solid var(--green);
  background-color: transparent; 
  text-decoration: none;

  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

a.button.large, button.large {
  font-size: 110%;
}

a.button.small, button.small {
  font-size: 80%;
  padding: 4px 7px;
}

p.button {
  text-align: center;
}

a.button:hover, button:hover {
  background-color: var(--darkblue);
  color: var(--white);
  border-color: var(--darkblue);
}

button.green, a.button.green {
  color: var(--white) !important;
  background-color: var(--green);
}

button.blue, a.button.blue {
  color: var(--white) !important;
  border-color: var(--darkblue);
  background-color: var(--darkblue);
}




section { 
  padding: 15px var(--margin);
  margin:auto;
  max-width: var(--maxwidth);
}

input:invalid, textarea:invalid {
  border-right: 5px solid red;
}

input:valid, textarea:valid {
  border-right: 5px solid green;
}