header {
    --header-slider-speed: 400s;
    --header-line-speed: 20s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 61px;
    z-index: 11;
}

header > .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}

header > .background > .bottom-line {
    background: url("../../img/header/header-bg.jpg") repeat-x;
    width: 7680px;
    height: 4px;
    position: absolute;
    bottom: 0;
    animation: header-line linear var(--header-line-speed) infinite running;
    z-index: 1;
    left: -3840px;
}

header > .body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 4px;
}

header > .body > .right-block {
    position: absolute;
    right: 21px;
    top: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    justify-items: right;
    align-items: center;
    justify-content: right;
    flex-direction: row-reverse;
}

header > .body > .right-block > .logout {
    position: relative;
    margin: 10px;
    background: green;
    background: url(../../img/header/exit-button.png);
    height: 20px;
    width: 16px;
    cursor: pointer;
}

header > .body > .right-block > .delimiter {
    position: relative;
    background: #dadee1;
    width: 1px;
    height: 34px;
    margin: 12px 18px;
}

header > .body > .right-block > .settings {

}

header > .body > .right-block > .user-data {

}

header > .body > .right-block > .user-data > .name {

}

header > .body > .right-block > .user-data > .role {

}

header > .body > .right-block > .notification {

}

header > .body > .right-block > .mail {

}

.header-placeholder {
    position: relative;
    width: 100%;
    height: 61px;
}

@keyframes header-line {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(3840px);
    }
}
footer {
    position: relative;
    height: 61px;
    width: 100%;
}

footer > .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

footer > .background > .bottom-line {
    background: url("../../img/footer/bg.jpg") repeat-x center;
    width: 100%;
    height: 7px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -960px;
}

footer > .body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 7px;
}

footer > .body > .left-block {
    position: absolute;
    left: 3%;
    width: 50%;
    top: 0;
    bottom: 0;
    display: flex;
}

footer > .body > .left-block > .project {
    position: relative;
    font-size: 1.4em;
    letter-spacing: 0.22px;
    padding-top: 13px;
    padding-left: 1px;
    color: #999999;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    line-height: 21px;
}

footer > .body > .left-block > .delimiter {
    position: relative;
    height: 8px;
    width: 1px;
    background: #cccccc;
    margin: 19px 18px;
}

footer > .body > .left-block > .about {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    font-size: 1.4em;
    letter-spacing: 0.22px;
    padding-top: 13px;
    color: #999999;
    line-height: 21px;
}

footer > .body > .right-block {
    position: absolute;
    right: 2%;
    top: 0;
    bottom: 7px;
    width: 50%;
    display: flex;
    justify-items: right;
    justify-content: right;
    flex-direction: row-reverse;
}

footer > .body > .right-block > .version {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    font-size: 1.4em;
    letter-spacing: 0.21px;
    padding-top: 13px;
    color: #999999;
    line-height: 21px;
}

footer > .body > .right-block > .version > span {
    padding-left: 21px;
}
#login-form {
    position: relative;
    min-height: calc(100vh - 61px - 61px);
}

#login-form > .window {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -232px;
    margin-top: -188px;
    width: 464px;
    height: 493px;
}

#login-form > .window > .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #cccccc;
    border-radius: 7px;
    background: white;
}

#login-form > .window > .body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#login-form > .window > .body > .header {
    position: relative;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    padding-top: 63px;
    letter-spacing: 0.5px;
    color: #333333;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#login-form > .window > .body > .sub-header {
    position: relative;
    text-align: center;
    font-size: 1.4em;
    padding-top: 15px;
    line-height: 22px;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#login-form > .window > .body > .form {
    position: relative;
    margin: 27px 72px 0;
}

#login-form > .window > .body > .form > .input {
    position: relative;
    border: 1px solid #dfe7ea;
    border-radius: 5px;
    width: 318px;
    margin-bottom: 19px;
    height: 44px;
}

#login-form > .window > .body > .form > .input > input {
    border: none;
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 1.4em;
    text-align: center;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

#login-form > .window > .body > .form > .input > .placeholder {
    position: absolute;
    font-size: 1.4em;
    text-align: center;
    letter-spacing: 0.5px;
    width: 100%;
    top: 0;
    bottom: 0;
    line-height: 45px;
    color: #cccccc;
    transition: color 0.5s;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#login-form > .window > .body > .form > .input > input:focus ~ .placeholder,
#login-form > .window > .body > .form > .input > input:valid ~ .placeholder {
    color: transparent;
}

#login-form > .window > .body > .form > .input > .error-block {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#login-form > .window > .body > .login-button {
    position: relative;
    font-size: 1.4em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
    width: 194px;
    height: 44px;
    background: #a4d176;
    margin: 38px auto 0;
    line-height: 44px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.5s;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#login-form > .window > .body > .login-button.disabled {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
}

#login-form > .window > .body > .login-button:hover:not(.disabled) {
    background: #248C46;
    color: #ffffff;
}

#login-form > .window > .body > .login-button:active:not(.disabled) {
    transform: translateY(1px);
}

#login-form > .window > .body > .reg-button {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    margin: 39px auto 0;
    text-align: center;
    font-size: 1.4em;
    letter-spacing: 0.2px;
    color: #3366ff;
    cursor: pointer;
    width: -moz-fit-content;
    width: fit-content;
}

#login-form > .window > .body > .reg-button:hover {
    border-bottom: 1px dashed;
    padding-bottom: 1px;
}

#login-form > .window > .body > .reg-button:active {
    color: mediumvioletred;
}


html{
    position: relative;
    min-height: 100%;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, hr {
    padding: 0;
    margin: 0;
}

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

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, th, var {
    font-weight: normal;
    font-style: normal;
}

ol, ul {
    list-style: none;
    padding-left: 16px;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}

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

abbr, acronym {
    border: 0;
}

a {
    color: inherit;
    text-decoration: inherit;
}

input {
    font-family: Arial, serif;
}

input:focus, textarea:focus {
    outline: none;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    font-size: 10px;
    font-family: Arial, serif;
    min-height: 100vh;
    /*min-width: 1230px;*/
    color: #333;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    min-width: 1650px;
}

body.show {
    opacity: 1;
    visibility: visible;
}

body.preloader {
    opacity: 1;
    visibility: visible;
}

body.preloader > *:not(#preloader,#intro) {
    transition: visibility 0.2s, opacity 0.2s;
    visibility: hidden;
    opacity: 0;
    position: fixed;
}

input[disabled] {
    color: inherit;
}

.hidden {
    display: none !important;
}

img {

    -khtml-user-drag: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    user-drag: element;
}

input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}
/** vision input **/

.vision-input {
    position: relative;
    border: 1px solid #dfe7ea;
    border-radius: 5px;
    width: 318px;
    margin-bottom: 19px;
    height: 44px;
}

.vision-input.required::before {
    content: '*';
    position: absolute;
    top: -12px;
    left: -12px;
    font-size: 1.8em;
    color: #ff3333;
}

.vision-input > input {
    border: none;
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 1.4em;
    letter-spacing: 0.5px;
    padding: 7px 15px 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    color: #666666;
}

.vision-input.center > input {
    text-align: center;
}

.vision-input > .placeholder {
    position: absolute;
    font-size: 1.4em;
    letter-spacing: 0.5px;
    top: 0;
    bottom: 0;
    left: 15px;
    right: 15px;
    line-height: 45px;
    color: #cccccc;
    transition: color 0.5s;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.vision-input.center > .placeholder {
    text-align: center;
}

.vision-input > input:focus ~ .placeholder,
.vision-input > input:valid ~ .placeholder {
    color: transparent;
}

.vision-input > .error-block {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: red;
    font-size: 1.1em;
    position: absolute;
    top: -15px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.vision-input.error.center > .error-block {
    text-align: center;
}

.vision-input.error > .error-block {
    visibility: visible;
    opacity: 1;
}

/** vision input **/


/** vision drop list **/

.vision-drop-list {
    position: relative;
    border: 1px solid #dfe7ea;
    border-radius: 5px;
    width: 318px;
    margin-bottom: 21px;
    height: 44px;
    transition: border-top-color 0.3s, border-bottom-color 0.3s, border-left-color 0.3s, border-right-color 0.3s, background-color 0.3s;
}

.vision-drop-list.open {
    z-index: 9;
}

.vision-drop-list > .back {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

.vision-drop-list.open > .back {
    display: block;
}

.vision-drop-list:hover:not(.open) {
    border-color: #999999;
    background: #dfe7ea;
}

.vision-drop-list > .placeholder {
    position: absolute;
    font-size: 1.4em;
    letter-spacing: 0.5px;
    top: 0;
    bottom: 0;
    left: 15px;
    right: 15px;
    line-height: 45px;
    color: #cccccc;
    transition: color 0.5s;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.vision-drop-list > input {
    border: none;
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 1.4em;
    letter-spacing: 0.5px;
    padding: 7px 15px 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    color: #666666;
    cursor: pointer;
}

.vision-drop-list > input:focus ~ .placeholder,
.vision-drop-list > input:valid ~ .placeholder {
    color: transparent;
}

.vision-drop-list.required::before {
    content: '*';
    position: absolute;
    top: -12px;
    left: -12px;
    font-size: 1.8em;
    color: #ff3333;
}

.vision-drop-list > .error-block {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: red;
    font-size: 1.1em;
    position: absolute;
    top: -15px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.vision-drop-list.error > .error-block {
    visibility: visible;
    opacity: 1;
}

.vision-drop-list > .list {
    border: 1px solid #dfe7ea;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: white;
    margin-top: 10px;
    display: none;
}

.vision-drop-list.open > .list {
    display: block;
}

.vision-drop-list > .list > .item {
    font-size: 1.4em;
    letter-spacing: 0.5px;
    padding: 10px 15px 10px;
    cursor: pointer;
}

.vision-drop-list > .list > .item:hover:not(.selected) {
    background: #dfe7ea;
}

.vision-drop-list > .list > .item.selected {
    font-weight: bold;
    background: #dfe7ea;
}

/** vision drop list **/

/** vision button **/

.vision-button {
    position: relative;
    font-size: 1.4em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
    width: 194px;
    height: 44px;
    background: #a4d176;
    line-height: 44px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.5s;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.vision-button.disabled {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
}

.vision-button:hover:not(.disabled) {
    background: #248C46;
    color: #ffffff;
}

.vision-button:active:not(.disabled) {
    transform: translateY(1px);
}

/** vision button **/

/** vision toggle switch **/

.vision-toggle-switch > input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.vision-toggle-switch > label {
    cursor: pointer;
    text-indent: -9999px;
    width: 200px;
    height: 100px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

.vision-toggle-switch > label:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

.vision-toggle-switch > input:checked + label {
    background: #bada55;
}

.vision-toggle-switch > input:checked + label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.vision-toggle-switch > label:active:after {
    width: 130px;
}

/** vision toggle switch **/