:root{
  --input-color: rgb(228, 130, 24);
}

html,
body {
  height: 100%;
}

.display-js {
  display: none;
}

.display-no-js {
  display: block;
}

.logout-header {
  position: fixed;
  margin: 1em;
  font-size: 1.05em;
  font-weight: bold;
}

.icon {
  display: inline-flex;
  align-self: center;
}

.icon svg, .icon img {
  height: 1em;
  width: 1em;
  fill: currentColor;
}

.icon.baseline svg, .icon img {
  top: .125em;
  position: relative;
}

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.top-spacing {
  height: 10vh;
}

.template-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

h1 {
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.1875rem;
  text-align: center;
  color: rgb(50, 50, 50);
  margin-top: 1em;
}

h2 {
  font-family: Roboto, sans-serif;
  font-size: 1.675rem;
  color: gray;
}

h3 {
  margin-top: 1.5em;
  font-family: Roboto, sans-serif;
  font-size: 1.4rem;
  color: gray;
}

.reset-password,
.template-content {
  flex-direction: column;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-bottom: 2em;
}

.template-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  min-width: 300px;
}

.logo {
  padding: 1em;
  flex: 1;
  min-width: 200px;
}

.logo > * {
  max-height: 125px;
  margin: auto;
  max-width: 100%;
  display: flex;
}

.helper-text > ul {
  margin-top: 0.2em;
  padding-left: 2em;
}

.template-errors {
  margin-top: 1em;
  text-align: center;
  color: red;
  max-width: 50em;
}

.message-info {
  margin-inline: auto;
  margin-top: 1em;
  color: dimgrey;
  margin-bottom: 1.5em;
  word-spacing: 0.3em;
  max-width: 50em;
}

.message-contact {
  color: darkgrey;
  font-style: italic;
  margin-bottom: 1.5em;
}

.description {
  width: 100%;
  padding: 1em;
  text-align: start;
  border: solid 1px lightgray;
  border-radius: 0.5em;
}

.clickable-password {
  color: dimgrey;
  text-align: center;
  text-decoration: underline;
  margin-top: 1em;
  cursor: pointer;
}

.message {
  border: solid 1px lightgrey;
  text-align: justify;
  border-radius: 0.5em;
  padding: 1em;
  margin-top: 1em;
  margin-inline: auto;
  max-width: 32em;
  width: fit-content;
  color: dimgrey;
}

.prevention-message {
  text-align: justify;
  border: solid 1px lightgrey;
  border-radius: 1em;
  padding: 1em;
  margin-inline: auto;
  margin-top: 3em;
  max-width: 40em;
  color: grey;
  font-style: italic;
}

.mobile-link {

}

.text-center {
  text-align: center;
}

.document-name {
  margin-top: 0.5em;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}

.btn-container{
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn-foxnot {
  width: 20em;
  height: unset;
  line-height: 2em;
  min-height: 3.5em;
  max-height: 10em;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9375rem;
  vertical-align: middle;
  padding-block: 0.5em;
}


.btn-primary {
  background: rgb(228, 130, 24);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.btn-primary:hover,
.btn-primary:focus {
  background: rgb(228, 130, 24);
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.btn-file i {
  font-size: 2rem;
}

.file-field .btn {
  padding-inline: 1.5em;
}

.input {
  height: 3.25em;
  margin-bottom: 1.625rem;
  width: 20.5rem;
}

.input-field {
  margin-inline: auto;
  max-width: 20em;
}

.input-adornment {
  position: absolute;
  top: 0.7em;
  right: 0;
  width: 2.5em;
  height: 1.5em;
  border: none !important;
  background: none !important;
  cursor: pointer;
  fill: #9e9e9e;
}

svg {
  width: 100%;
  height: 100%;
}

/* label focus color */
.input-field input:not(.browser-default):focus:not([readonly]) + label {
  color: var(--input-color);
}
/* label underline focus color */
.input-field input:not(.browser-default):focus:not([readonly]) {
  border-bottom: 1px solid var(--input-color);
  box-shadow: 0 1px 0 0 var(--input-color);
}
/* valid color */
.input-field input:not(.browser-default).valid {
  border-bottom: 1px solid #9e9e9e;
  box-shadow: none;
}
/* invalid color */
.input-field input:not(.browser-default).invalid {
  border-bottom: 1px solid #9e9e9e;
  box-shadow: none;
}

.toast {
  border-radius: 4px;
  font-weight: bold;
}

.toast.warning {
  background: rgb(228, 130, 24);
}
.toast.success {
  background: limegreen;
}
.toast.error {
  background: red;
}

footer {
  display: flex;
  height: 50px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.footer {
  display: flex;
  justify-content: center;
}

.footer a {
  color: grey;
}

.footer > div {
  margin-inline: 1em;
}

.bold {
  font-weight: bold;
}

ul>li {
  list-style-type: disc !important;
  margin-left: 2em;
}

ul>li>ul>li {
  list-style-type: circle !important;
  margin-left: 2em;
}

.loader {
  margin-inline: auto;
  margin-bottom: 1em;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite
}

.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid grey;
  animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}