/*
/ vac-login.css
*/
@media (min-width: 992px) {
    .w-lg-75 {
        width: 75%;
    }
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p {
    margin: 00px 0px 20px 0px;
}

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,
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,
caption {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div,
ul,
li,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    zoom: 1;
}

div:before,
article:before,
aside:before,
details:before,
figcaption:before,
figure:before,
footer:before,
header:before,
hgroup:before,
menu:before,
nav:before,
section:before,
div:after,
ul:after,
article:after,
aside:after,
details:after,
figcaption:after,
figure:after,
footer:after,
header:after,
hgroup:after,
menu:after,
nav:after,
section:after {
    content: "";
    display: table;
}

div:after,
article:after,
aside:after,
details:after,
figcaption:after,
figure:after,
footer:after,
header:after,
hgroup:after,
menu:after,
nav:after,
section:after {
    clear: both;
}

p {
    margin: 0 0 14px 0;
}

p,
a {
    -webkit-font-smoothing: subpixel-antialiased;
}

@media only screen and (min-width: 768px) {
    p {
        line-height: 130%;
    }
}

@media only screen and (min-width: 1024px) {
    p {
        line-height: 150%;
    }
}

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,
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,
caption {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div,
ul,
li,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    zoom: 1;
}

div:before,
article:before,
aside:before,
details:before,
figcaption:before,
figure:before,
footer:before,
header:before,
hgroup:before,
menu:before,
nav:before,
section:before,
div:after,
ul:after,
article:after,
aside:after,
details:after,
figcaption:after,
figure:after,
footer:after,
header:after,
hgroup:after,
menu:after,
nav:after,
section:after {
    content: "";
    display: table;
}

div:after,
article:after,
aside:after,
details:after,
figcaption:after,
figure:after,
footer:after,
header:after,
hgroup:after,
menu:after,
nav:after,
section:after {
    clear: both;
}

p {
    margin: 0 0 14px 0;
}

p,
a {
    -webkit-font-smoothing: subpixel-antialiased;
}

@media only screen and (min-width: 768px) {
    p {
        line-height: 130%;
    }
}

@media only screen and (min-width: 1024px) {
    p {
        line-height: 150%;
    }
}

a {
    color: inherit;
}

.login-logo {
    max-width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.pd-b-50 {
    padding-bottom: 50px;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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,
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,
caption {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div,
ul,
li,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    zoom: 1;
}

div:before,
article:before,
aside:before,
details:before,
figcaption:before,
figure:before,
footer:before,
header:before,
hgroup:before,
menu:before,
nav:before,
section:before,
div:after,
ul:after,
article:after,
aside:after,
details:after,
figcaption:after,
figure:after,
footer:after,
header:after,
hgroup:after,
menu:after,
nav:after,
section:after {
    content: "";
    display: table;
}

div:after,
article:after,
aside:after,
details:after,
figcaption:after,
figure:after,
footer:after,
header:after,
hgroup:after,
menu:after,
nav:after,
section:after {
    clear: both;
}

p,
a {
    -webkit-font-smoothing: subpixel-antialiased;
}

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,
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,
caption {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div,
ul,
li,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    zoom: 1;
}

div:before,
article:before,
aside:before,
details:before,
figcaption:before,
figure:before,
footer:before,
header:before,
hgroup:before,
menu:before,
nav:before,
section:before,
div:after,
ul:after,
article:after,
aside:after,
details:after,
figcaption:after,
figure:after,
footer:after,
header:after,
hgroup:after,
menu:after,
nav:after,
section:after {
    content: "";
    display: table;
}

div:after,
article:after,
aside:after,
details:after,
figcaption:after,
figure:after,
footer:after,
header:after,
hgroup:after,
menu:after,
nav:after,
section:after {
    clear: both;
}

p,
a {
    -webkit-font-smoothing: subpixel-antialiased;
}

a {
    color: inherit;
}

  .login-wrapper {
    max-width: 400px;
    margin: 0 auto;
    background-color: lightblue;
  }

  .inp {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 280px;
    margin-left: 20px;
    margin-bottom: 10px;
  }

  .inp .label {
    position: absolute;
    top: 16px;
    left: 0;
    font-size: 20px;
    color: #9098A9;
    font-weight: 500;
    transform-origin: 0 0;
    transition: all .2s ease;
  }

  .inp .border {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: #0077ff;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: all .15s ease;
  }

  .inp input {
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 12px 0;
    height: 48px;
    font-size: 20px;
    font-weight: 500;
    border-bottom: 2px solid #C8CCD4;
    background: none;
    border-radius: 0;
    color: #223254;
    transition: all .15s ease;
  }

  .inp input:hover {
    background-color: rgba(34,50,84,.03);
  }

  .inp input:not(:placeholder-shown) + span {
    color: #5a667f;
    transform: translateY(-26px) scale(0.75);
  }

  .inp input:focus {
    background: none;
    outline: none;
  }

  .inp input:focus + span {
    color: #07f;
    transform: translateY(-26px) scale(0.75);
  }

  .inp input:focus + span + .border {
    transform: scaleX(1);
  }

  .login-form-wrapper {
    margin: 20px;
  }