@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
.form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
      display: block;
}

.body, .body1 {
      line-height: 1;
}

ol,
ul {
      list-style: none;
}

blockquote,
q {
      quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
      content: '';
      content: none;
}

table {
      border-collapse: collapse;
      border-spacing: 0;
}

/* html {
      width: 100%;
      height: 100%;
} */

.body, .body1 {
      position: absolute;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      top: 0;
      font-size: 16px;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
      visibility:hidden;
}

.form, .form1 {
      position: absolute;
      display: block;
      width: 100%;
      max-width: 500px;
      background-color: var(--bg_aside);
      margin: 0;
      padding: 2.25em;
      box-sizing: border-box;
      border: solid 1px var(--bg_main);
      border-radius: .5em;
      font-family: 'Source Sans Pro', sans-serif;
      transform: scale(0);
      transition: 0.5s;
}

.form .svgContainer {
      position: relative;
      width: 240px;
      height: 240px;
      margin: 0 auto 1em;
      border-radius: 50%;
      pointer-events: none;
}

.form .svgContainer div {
      position: relative;
      width: 100%;
      height: 0;
      overflow: hidden;
      border-radius: 50%;
      padding-bottom: 100%;
}

.form .svgContainer .mySVG {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
}

.form .svgContainer:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: inherit;
      height: inherit;
      box-sizing: border-box;
      border: solid 2.5px var(--header_font);
      border-radius: 50%;
}

.form .inputGroup, .form1 .inputGroup {
      margin: 0 0 2em;
      padding: 0;
      position: relative;
      overflow: hidden;
}

#forgotten, #log_form{
    text-decoration: none;
    color: var(--bg_success);
}

#forgotten:hover, #log_form:hover{
    text-decoration: underline;
}

.form .inputGroup:last-of-type {
      margin-bottom: 0;
}

.form label, .form1 label {
      margin: 0 0 12px;
      display: block;
      font-size: 1.25em;
      color: var(--header_font);
      font-weight: 700;
      font-family: inherit;
}

.form input[type='email'],
.form input[type="text"],
.form input[type="number"],
.form input[type="url"],
.form input[type="search"],
.form input[type="password"],
.form1 input {
      display: block;
      margin: 0;
      padding: 0 1em 0;
      padding: .875em 1em 0;
      /* background-color: #F3FAFD; */
      background-color: var(--bg_main);
      border: solid 2px var(--header_font);
      border-radius: 4px;
      -webkit-appearance: none;
      box-sizing: border-box;
      width: 100%;
      height: 65px;
      font-size: clamp(1em, 4.5vw, 1.55em);
      color: var(--font_white);
      font-weight: 600;
      font-family: inherit;
      transition: box-shadow .2s linear, border-color .25s ease-out;
}

.form input[type='email']:focus,
.form input[type="text"]:focus,
.form input[type="number"]:focus,
.form input[type="url"]:focus,
.form input[type="search"]:focus,
.form input[type="password"]:focus {
      outline: none;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, .1);
      border: solid 2px #4EB8DD;
 }

.form button, .form1 button {
      /* display: block; */
      /* margin: 0; */
      /* padding: .65em 1em 1em; */
      /* background-color: var(--header_font); */
      /* border: none; */
      /* border-radius: 4px; */
      /* box-sizing: border-box; */
      /* box-shadow: none; */
      width: 100%;
      height: 65px;
      /* font-size: 1.55em; */
      /* color: #FFF; */
      /* font-weight: 600; */
      /* font-family: inherit; */
      /* transition: background-color .2s ease-out; */
}

.form button:hover,
.form button:active,
.form1 button:hover {
      /* background-color: #217093; */
}


.form .inputGroup1 .helper {
      position: absolute;
      z-index: 1;
      font-family: inherit;
}

.form .inputGroup1 .helper1 {
      top: 0;
      left: 0;
      transform: translate(1em, 2.2em) scale(1);
      transform-origin: 0 0;
      color: var(--header_font);
      font-size: 1.55em;
      font-weight: 400;
      /* opacity: .65; */
        opacity: 0;
      pointer-events: none;
      transition: transform .2s ease-out, opacity .2s linear;
}

.form .inputGroup1.focusWithText .helper {
      transform: translate(1em, 1.55em) scale(.6);
      opacity: 1;
}

#loginEmail:focus::placeholder, #loginEmail1:focus::placeholder{
    color: transparent;
}

.form .inputGroup2 input[type="password"] {
      padding: .4em 1em .5em;
}

.form .inputGroup2 input[type="text"] {
      padding: .025em 1em 0;
}

.form .inputGroup2 #showPasswordToggle {
      display: block;
      padding: 0 0 0 1.45em;
      position: absolute;
      top: .25em;
      right: 0;
      font-size: 1em;
}

.form .inputGroup2 #showPasswordToggle input {
      /* position: absolute;
      z-index: -1;
      opacity: 0; */
      display: none;
}

.form .inputGroup2 #showPasswordToggle .indicator {
      position: absolute;
      top: 0;
      left: 0;
      height: .85em;
      width: .85em;
      background-color: var(--bg_main);
      border: solid 2px var(--header_font);
      border-radius: 3px;
}

.form .inputGroup2 #showPasswordToggle .indicator:after {
      content: "";
      position: absolute;
      left: 2px;
      top: -8px;
      width: .3em;
      height: 13px;
      border: solid var(--bg_success);
      border-width: 0 3px 3px 0;
      transform: rotate(45deg);
      visibility: hidden;
}

.form .inputGroup2 #showPasswordToggle input:checked~.indicator:after {
      visibility: visible;
}

.form .inputGroup2 #showPasswordToggle input:focus~.indicator,
.form .inputGroup2 #showPasswordToggle input:hover~.indicator {
      border-color: #4EB8DD;
}


.form .inputGroup2 #showPasswordToggle input:disabled~.indicator {
      opacity: .5;
}

.form .inputGroup2 #showPasswordToggle input:disabled~.indicator:after {
      visibility: hidden;
}

.wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.5s ease, height 0.2s ease;
}

.wrapper .form-box.login {
    /* display: none; */
    transition: transform 0.18s ease;
    transform: translateX(0);
}

.form-box.login, .form-box.register{
      width: 100%; /*remove it if monkey doesn't watch typing in email*/
}

/* remove display none above */
.wrapper .form-box.register {
    position: absolute;
    transform: translateX(500px);
    transition: none;
}

.wrapper.active .form-box.login {
    /* transition: none; */
    transform: translateX(-500px);
}

.wrapper.active .form-box.register {
    transition: transform 0.18s ease;
    transform: translateX(0);
}

.icon-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background-color: #162938;
    font-size: 2em;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    z-index: 1;
 }

 .bi-x{
    transition: 1s;
 }
.bi-x:hover{
    transform: rotate(180deg);
}
/* ********************error and success styling ********* */

#loginEmail.error, #loginEmail1.error{
	border-color: hsl(0, 80%, 50%);
      color: hsl(0, 80%, 50%);
}


#loginEmail.success,
#loginEmail.success:focus,
#loginEmail1.success,
#loginEmail1.success:focus {
	border-color: hsl(100, 60%, 50%);
      color: hsl(100, 60%, 50%);
}