/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    Floating labels styling
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Tooltip */
.profile .about-tab .floating-label .tooltip,
.edit-doc .about-tab .floating-label .tooltip {
  bottom: 0;
  color: var(--copy);
  display: none;
  margin-left: 28px;
  margin-right: 3rem;
  position: absolute;
  right: 0;
}
.profile .about-tab .floating-label .tooltip:hover,
.edit-doc .about-tab .floating-label .tooltip:hover {
  display: block;
}

/* Floating labels */
/* Show password */
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

LLLLLLLLLLL                                                    iiii
L:::::::::L                                                   i::::i
L:::::::::L                                                    iiii
LL:::::::LL
  L:::::L                  ooooooooooo      ggggggggg   gggggiiiiiiinnnn  nnnnnnnn
  L:::::L                oo:::::::::::oo   g:::::::::ggg::::gi:::::in:::nn::::::::nn
  L:::::L               o:::::::::::::::o g:::::::::::::::::g i::::in::::::::::::::nn
  L:::::L               o:::::ooooo:::::og::::::ggggg::::::gg i::::inn:::::::::::::::n
  L:::::L               o::::o     o::::og:::::g     g:::::g  i::::i  n:::::nnnn:::::n
  L:::::L               o::::o     o::::og:::::g     g:::::g  i::::i  n::::n    n::::n
  L:::::L               o::::o     o::::og:::::g     g:::::g  i::::i  n::::n    n::::n
  L:::::L         LLLLLLo::::o     o::::og::::::g    g:::::g  i::::i  n::::n    n::::n
LL:::::::LLLLLLLLL:::::Lo:::::ooooo:::::og:::::::ggggg:::::g i::::::i n::::n    n::::n
L::::::::::::::::::::::Lo:::::::::::::::o g::::::::::::::::g i::::::i n::::n    n::::n
L::::::::::::::::::::::L oo:::::::::::oo   gg::::::::::::::g i::::::i n::::n    n::::n
LLLLLLLLLLLLLLLLLLLLLLLL   ooooooooooo       gggggggg::::::g iiiiiiii nnnnnn    nnnnnn
                                                     g:::::g
                                         gggggg      g:::::g
                                         g:::::gg   gg:::::g
                                          g::::::ggg:::::::g
                                           gg:::::::::::::g
                                             ggg::::::ggg
                                                gggggg

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.login .container {
  background-color: var(--foreground);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(24, 24, 24, 0.25);
  height: auto;
  width: 70%;
}
.login .container .session {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 40rem;
  justify-content: center;
  width: auto;
}
.login .container .session form .floating-label {
  align-items: center;
  display: flex;
  position: relative;
  width: 100%;
  /* Caps Lock warning */
}
.login .container .session form .floating-label label {
  font-weight: bold;
  left: 0;
  opacity: 0;
  padding-left: 2.5rem;
  pointer-events: none;
  position: absolute;
  top: 1rem;
}
.login .container .session form .floating-label input {
  background: none;
  border: none;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  height: 56px;
  margin-left: auto;
  outline: 1px solid transparent;
  padding: 20px 0px;
  width: calc(100% - 44px);
}
.login .container .session form .floating-label input:not(:-moz-placeholder) {
  padding: 28px 0px 12px 0px;
}
.login .container .session form .floating-label input:not(:placeholder-shown) {
  padding: 28px 0px 12px 0px;
}
.login .container .session form .floating-label input:not(:-moz-placeholder) + label {
  opacity: 0.7;
  transform: translateY(-10px);
}
.login .container .session form .floating-label input:not(:placeholder-shown) + label {
  opacity: 0.7;
  transform: translateY(-10px);
}
.login .container .session form .floating-label input:not(:-moz-placeholder):valid + label {
  opacity: 1;
}
.login .container .session form .floating-label input:not(:placeholder-shown):valid + label {
  opacity: 1;
}
.login .container .session form .floating-label input:not(:-moz-placeholder):valid + .icon svg {
  opacity: 1;
}
.login .container .session form .floating-label input:not(:placeholder-shown):valid + .icon svg {
  opacity: 1;
}
.login .container .session form .floating-label input:not(:-moz-placeholder):valid + .icon svg path {
  fill: var(--primary-light);
}
.login .container .session form .floating-label input:not(:placeholder-shown):valid + .icon svg path {
  fill: var(--primary-light);
}
.login .container .session form .floating-label input:not(:-moz-placeholder):not(:valid):not(:focus) + label + .icon {
  animation-duration: 300ms;
  animation-name: shake-shake;
}
.login .container .session form .floating-label input:not(:placeholder-shown):not(:valid):not(:focus) + label + .icon {
  animation-duration: 300ms;
  animation-name: shake-shake;
}
.login .container .session form .floating-label input:focus {
  border-bottom: solid 1px var(--primary-light);
}
.login .container .session form .floating-label .icon {
  height: -moz-fit-content;
  height: fit-content;
}
.login .container .session form .floating-label .icon svg {
  fill: var(--primary-light);
  height: 30px;
  opacity: 0.5;
  width: 30px;
}
.login .container .session form .floating-label #showPassword,
.login .container .session form .floating-label #showPasswordConfirm {
  opacity: 0.4;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 25px;
}
.login .container .session form .floating-label #showPassword:hover,
.login .container .session form .floating-label #showPasswordConfirm:hover {
  opacity: 1;
}
.login .container .session form .floating-label #showPassword:active,
.login .container .session form .floating-label #showPasswordConfirm:active {
  opacity: 1;
}
.login .container .session form .floating-label input [type=checkbox] {
  left: 0;
  opacity: 0.01;
  position: absolute;
}
.login .container .session form .floating-label input [type=checkbox] + label {
  cursor: pointer;
  font-size: 1rem;
  margin: 1rem;
  padding-left: 2.3em;
  position: relative;
}
.login .container .session form .floating-label input [type=checkbox] + label::before {
  background: white;
  border: 1px solid #aaa;
  border-radius: 0.2em;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 rgba(203, 34, 237, 0.2);
  content: "";
  height: 1.4em;
  left: 0;
  position: absolute;
  top: 0;
  width: 1.4em;
}
.login .container .session form .floating-label input [type=checkbox] + label::after {
  color: var(--primary-light);
  content: "X";
  font-size: 1.375em;
  left: 0.2em;
  opacity: 0;
  position: absolute;
  top: -0.2em;
  transform: scale(0) rotate(45deg);
}
.login .container .session form .floating-label input [type=checkbox]:checked + label::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.login .container .session form .floating-label label {
  color: #000;
  font-size: 12.5px;
  font-weight: 400;
}
.login .container .session form .floating-label .circle {
  background-color: red;
  border-radius: 2rem;
  bottom: 1rem;
  display: none;
  height: 10px;
  position: absolute;
  right: 2rem;
  width: 10px;
}
.login .container .session form .formBottom {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.login .container .session form .formBottom button {
  border: none;
  border-radius: 1rem;
  box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.13);
  font-size: 14px;
  font-weight: 500;
  margin: 0.5rem 1rem;
  min-width: 100px;
  outline: 0;
  padding: 0.5rem 1rem;
  text-align: center;
  width: auto;
}
.login .container .session form .formBottom .login button:hover {
  transform: translateY(-3px);
}
.login .container .session form .formBottom .login button:hover:active {
  transform: scale(0.99);
}

@media only screen and (max-width: 768px) {
  .login {
    padding: 2rem 0 !important;
  }
  .login .container {
    width: 90%;
  }
  .login .container .session {
    background-image: none;
  }
  .login .container .session form .floating-label #showPassword {
    right: -1rem !important;
  }
  .login .container .session form .formBottom {
    flex-direction: column;
  }
}/*# sourceMappingURL=login.css.map */