* {
	background: transparent;
	margin: 0;
	padding: 0;
	outline: none;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Ubuntu, sans-serif;	
}


body {
	margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
	text-align: left;
	background-color: #fff;
}



se {
  min-height: 100%;
  background-color: #ffffff;
}
h1 {
  letter-spacing: -1px;
}
a {
  color: #484ac4;
  text-decoration: unset;
}
.login-root {
  background: #f7fafc;
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.flex-flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.center-center {
  align-items: center;
  justify-content: center;
}
.box-root {
  box-sizing: border-box;
}
.flex-direction--column {
  -ms-flex-direction: column;
  flex-direction: column;
}

.box-divider--light-all-2 {
  box-shadow: inset 0 0 0 2px #e3e8ee;
}
.box-background--blue {
  background-color: #484ac4;
}
.box-background--white {
  background-color: #ffffff;
}
.box-background--blue800 {
  background-color: #212d63;
}
.box-background--gray100 {
  background-color: #e3e8ee;
}
.box-background--cyan200 {
  background-color: #7fd3ed;
}
.padding-top--64 {
  padding-top: 64px;
}
.padding-top--24 {
  padding-top: 24px;
}
.padding-top--48 {
  padding-top: 48px;
}
.padding-bottom--24 {
  padding-bottom: 24px;
}
.padding-horizontal--48 {
  padding: 48px;
}
.padding-bottom--15 {
  padding-bottom: 15px;
}

.margin-bottom--24 {
  margin-bottom: 24px;
}



.flex-justifyContent--center {
  -ms-flex-pack: center;
  justify-content: center;
}

.formbg {
  margin: 0px auto;
  width: calc(100% - 20px);
  max-width: 400px;
  background: white;
  border-radius: 4px;
  box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px,
    rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
}
.title-b {
    display: block;
    font-size: 20px;
    line-height: 28px;
    color: #1a1f36;
    font-weight: 500;
}
label {
  margin-bottom: 10px;
}
.reset-pass a,
label {
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.reset-pass > a {
  text-align: right;
}
.grid--50-50 {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
}

.field input {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  /* box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;*/
}

input[type="submit"] {
  background-color: rgb(84, 105, 212);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgb(84, 105, 212) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.field-checkbox input {
  width: 20px;
  height: 15px;
  margin-right: 5px;
  box-shadow: unset;
  min-height: unset;
}
.field-checkbox label {
  display: flex;
  align-items: center;
  margin: 0;
}
a.ssolink {
  display: block;
  text-align: center;
  font-weight: 600;
}
.footer-link span {
  font-size: 14px;
  text-align: center;
}
.listing a {
  color: #697386;
  font-weight: 600;
  margin: 0 10px;
}

.animationRightLeft {
  animation: animationRightLeft 2s ease-in-out infinite;
}
.animationLeftRight {
  animation: animationLeftRight 2s ease-in-out infinite;
}
.tans3s {
  animation: animationLeftRight 3s ease-in-out infinite;
}
.tans4s {
  animation: animationLeftRight 4s ease-in-out infinite;
}

@keyframes animationLeftRight {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(1000px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes animationRightLeft {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0px);
  }
}
.error {
    color: red;
    font-weight: 500;
    margin-bottom: 10px;
    background: #ffe7e7;
    width: 100%;
    line-height: 20px;
    padding: 10px 10px;
}
.Invalid_input {
  color: red;
  font-size: 15px;
}
input:disabled {
  cursor: not-allowed;
}

.formbg-outer {
    display: flex;
    vertical-align: middle;
    position: relative;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 20px;
}
.field {
    text-align: center;
}
#file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.up-bt {
    line-height: 40px;
    font-size: 16px;
    padding: 0 10px;
    border-radius: 4px;
    white-space: nowrap;
    border: none;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
    color: #168ce3;
    border: 1px solid #eee;
    cursor: pointer;
    max-height: 40px;
    margin-top: 24px;
    width: 100%;
    justify-content: center;
}
.up-bt:hover {
    background: #f2f3fc;
}
.up-bt svg {
    fill: #168ce3;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}


.txt_field {
    position: relative;
    margin-top: 15px;	
}

.txt_field span {
    border-bottom: 1px solid #efeff1;
    display: block;	
}
.txt_field span::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #484ac4;
    transition: .5s;
}

.txt_field input:focus ~ span::before, .txt_field input:valid ~ span::before {
    width: 100%;
}

.txt_field label {
    position: absolute;
    top: 50%;
    left: 0px;
    color: #a1a1a1;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: .2s;
    font-weight: 300;	
    -webkit-order: unset;
    order: unset;	
}

.txt_field input:-webkit-autofill ~ label, .txt_field input:focus ~ label, .txt_field input:valid  ~ label {
    top: 0px;
    font-size: 12px;
    color: #484ac4 !important;
    left: 0;	
}

.txt_field input:-webkit-autofill , .txt_field input:focus, .txt_field input:valid {
        transition: background-color 5000s ease-in-out 0s;	
}



.txt_field input:invalid:not(:placeholder-shown) ~ label{
   color: red;
   top: 0px;
   left: 0px;  
   font-size: 12px;  
}


/*
.txt_field input:invalid:not(:focus):not(:placeholder-shown) ~ label{
   color: red;
   top: -5px;
}
*/



.txt_field[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555;
    cursor: text;
}
.chkbtn {
    margin-right: 10px;
}


.chkbtn input {
    display: none;
}

.tgl-btn {
    position: relative;
    margin-right: 10px;
    border: 2px solid #484ac4;
    height: 22px;
    width: 22px;
    border-radius: 5px;
}


.chkbtn input:checked + span.tgl-btn:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 7px;
    width: 3px;
    height: 9px;
    border: solid #484ac4;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@keyframes rotate {
  100% {
    transform: rotate(360deg); }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -3.5rem; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -12.4rem; } 
}

@keyframes color {
  100%,
  0% {
    stroke: #d62d20; }
  40% {
    stroke: #0057e7; }
  66% {
    stroke: #008744; }
  80%,
  90% {
    stroke: #ffa700; }
}
	
#preloader {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999999;
    background: #fff;
}
.loader {
    position: absolute;
    width: 5rem;
    height: 10rem;
    top: 50%;
    margin: 0 auto;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}
.circular {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
svg {
    overflow: hidden;
    vertical-align: middle;
}
.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}






@media screen and (max-width: 480px){
.formbg-inner {
    padding: 30px;
}

}


@media screen and (min-width: 1220px){
.field-checkbox label {
    cursor: pointer;
}

}