:root {
    --account-action-connect: 'Подключиться';
    --account-action-disconnect: 'Отключиться';
    --account-notifier-connected: 'Соединение установлено!';
    --account-notifier-disconnected: 'Соединение разорвано!';
    --gate-notify-offline: 'Не удалось установить связь с сервером, список турникетов не доступен';
    --gate-state-offline: 'Выключен';
    --gate-state-online: 'Включен';
    --gate-state-freepassage: 'Своб. пр.';
}
body {
    margin: 0;
    font-family: 'Montserrat';
    font-style: normal;
    background-color: #F4F5F7;
}
::-webkit-scrollbar {
    width: 0.313vw;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #c2c2c2;
    border-radius: 0.156vw;
}
::-webkit-scrollbar-button:single-button {
    display: block;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
    display: none;
}
::-webkit-scrollbar-button:single-button:vertical:increment {
    display: none;
}
.login-screen .login-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.login-screen .login-container .login-left {
    width: 42.8%;
    background: radial-gradient(50% 50% at 50% 50%, #004A74 0%, #000305 100%);
}
.login-screen .login-container .login-left .left-wrapper {
    margin: 7.407vh 3.385vw 9.907vh 2.5vw;
}
.login-screen .login-container .login-left .infotec-logo {
    width: 11.822vw;
    height: 7.314vh;
    background-image: url('/images/logo/infotec_logo.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.login-screen .login-container .login-left .text-greeting {
    font-size: 1.98vw;
    font-weight: 600;
    padding-top: 11.481vh;
    padding-left: 0.625vw;
    color: #fff;
}
.login-screen .login-container .login-left .text-details {
    font-size: 1.25vw;
    font-weight: 500;
    line-height: 170%;
    padding-top: 2.22vh;
    padding-left: 0.625vw;
    padding-bottom: 4.07vh;
    color: #fff;
}
.login-screen .login-container .login-left .access-picture img {
    width: 100%;
}
.login-screen .login-container .login-right {
    width: 57.2%;
    background-color: #fff;
}
.login-screen .login-container .login-right .right-wrapper {
    height: calc(100% - 7.407vh);
    margin: 7.407vh 3.125vw 0;
}
.login-screen .login-container .login-right .text-logo {
    color: #253858;
    font-size: 1.354vw;
    font-weight: 700;
    line-height: 1.666vw;
}
.login-screen .login-container .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 7.407vh);
    justify-content: center;
}
.login-screen .login-container .form-container .login-form {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1.667vw;
}
.login-screen .login-container .form-container .login-form .form-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.833vw;
}
.login-screen .login-container .form-container .login-form .form-header {
    font-size: 1.25vw;
    font-weight: 700;
    line-height: 1.458vw;
    color: #303030;
}
.login-screen .login-container .form-container .login-form .label {
    font-size: 0.729vw;
    font-style: normal;
    font-weight: 600;
    line-height: 1.042vw;
    color: #6F6F6F;
}
.login-screen .login-container .form-container .login-form input {
    width: 17.188vw;
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 0.833vw; 
    padding: 0.521vw 0.625vw;
    border-radius: 0.208vw;
    border: 1px solid #C3C3C3;
    color: #6F6F6F;
}
.login-screen .login-container .form-container .login-form input:focus {
    outline: none;
}
.login-screen .login-container .form-container .login-form .note {
    font-size: 0.625vw;
    font-weight: 400;
    line-height: 0.833vw;
    color: #6f6f6f;
    padding: 0.208vw 0;
}
.login-screen .login-container .form-container .login-form .field .message {
    display: none;
}
.login-screen .login-container .form-container .login-form .field .message .message-sign {
    display: inline-block;
    width: 0.938vw;
    height: 0.938vw;
    background-image: url('/images/icons/error_circle.svg');
    background-size: cover;
}
.login-screen .login-container .form-container .login-form .field .message .message-text {
    font-size: 0.625vw;
    font-weight: 400;
    color: #CC4B41;
}
.login-screen .login-container .form-container .login-form .field.error .message {
    display: flex;
    padding: 0.208vw 0px;
    align-items: flex-start;
    gap: 0.417vw;
    align-self: stretch;
}
.login-screen .login-container .form-container .login-form .field.error .note {
    display: none;
}
.login-screen .login-container .form-container .login-form .field.error input {
    border: 1px solid #CC4B41;
}
.login-screen .login-container .form-container .login-form .form-footer input {
    width: 18.49vw;
    background-color: #A0C800;
    color: #fff;
    border: 1px solid #A0C800;
    cursor: pointer;
}
.navbar {
    display: flex;
    height: 2.708vw;
    padding: 0px 3.125vw;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.navbar .left {
    display: flex;
    align-items: center;
    gap: 6.25vw;
}
.navbar .left .logo {
    text-align: center;
    font-size: 0.938vw;
    font-weight: 700;
    line-height: 1.25vw;
    color: #000;
}
.navbar .left .menu {
    display: flex;
    align-items: center;
    gap: 0.833vw;
    color: #fff;
}
.navbar .left .menu .menu-item {
    display: flex;
    border-radius: 0.208vw;
    padding: 0.417vw 0.625vw;
    align-items: center;
    gap: 0.208vw;
    cursor: pointer;
    color: #303030;
}
.navbar .left .menu .menu-item.active {
    background-color: #4DABF5;
    color: #f9f9f9;
}
.navbar .left .menu .menu-item.active:hover {
    cursor: default;
}
.navbar .left .menu .menu-item svg {
    width: 1.25vw;
    height: 1.25vw;
    fill: #303030;
}
.navbar .left .menu .menu-item.active svg {
    fill: #f9f9f9;
}
.navbar .left .menu .menu-item span {
    font-size: 0.938vw;
    font-weight: 500;
    line-height: 130%;
}
.navbar .right {
    display: flex;
    align-items: center;
    gap: 1.667vw; 
}
.navbar .right .theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.208vw;
    color: #303030;
}
.navbar .right .theme-toggle .label-on,
.navbar .right .theme-toggle .label-off {
    font-size: 0.938vw;
    font-weight: 400;
    line-height: 140%;
    padding: 0.417vw 0.625vw;
}
.navbar .right .theme-toggle.on .label-on {
    display: none;
}
.navbar .right .theme-toggle.off .label-on {
    display: block;
}
.navbar .right .theme-toggle.on .label-off {
    display: block;
}
.navbar .right .theme-toggle.off .label-off {
    display: none;
}
.navbar .right .theme-toggle .switch {
    width: 1.875vw;
    height: 1.042vw;
    cursor: pointer;
    transition: all 0.2s ease-out;
}
.navbar .right .theme-toggle.on .switch {
    background-position: center;
    background-image: url('/images/icons/switch_on.svg');
    background-size: cover;
}
.navbar .right .theme-toggle.off .switch {
    background-position: center;
    background-image: url('/images/icons/switch_off.svg');
    background-size: cover;
}
.navbar .right .account {
    display: flex;
    position: relative;
    padding: 0.417vw 0.417vw 0.417vw 0.625vw;
    align-items: center;
    gap: 0.417vw;
    color: #fff;
    cursor: pointer;
}
.navbar .right .account .account-name {
    font-size: 0.938vw;
    font-weight: 500;
    line-height: 140%;
    color: #303030;
}
.navbar .right .account .arrow {
    width: 0.833vw;
    height: 0.833vw;
    transition: all 0.3s ease-out;
}
.navbar .right .account .arrow svg {
    width: 0.833vw;
    height: 0.833vw;
    fill: #ADADAD;
}
.navbar .right .account .arrow.rotated {
    transform: rotate(180deg);
}
.navbar .right .account .indicator {
    width: 0.938vw;
    height: 0.938vw;
}
.navbar .right .account.offline .indicator {
    background-image: url('/images/icons/circle_red.svg');
    background-size: cover;
}
.navbar .right .account.online .indicator {
    background-image: url('/images/icons/circle_green.svg');
    background-size: cover;
}
.navbar .right .account .account-action {
    display: none;
    position: absolute;
    top: 2.448vw;
    color: #303030;
    padding: 0.417vw 0.625vw;
    background-color: #fff;
    left: 1.927vw;
    border-radius: 0.208vw;
    font-size: 0.938vw;
    font-weight: 400;
    line-height: 140%;
    box-shadow: 0px 0px 1.302vw 0px rgba(0, 0, 0, 0.15);
}
.navbar .right .account .account-action .action-text {
    display: none;
}
.navbar .right .account.offline .account-action:after {
    content: var(--account-action-connect);
}
.navbar .right .account.online .account-action:after {
    content: var(--account-action-disconnect);
}
.navbar .right .account .notifier {
    display: flex;
    position: absolute;
    top: 2.865vw;
    color: #303030;
    padding: 0.625vw 1.25vw;
    left: -3.385vw;
    border-radius: 0.208vw;
    font-size: 0.729vw;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    align-items: center;
    gap: 0.417vw;
    cursor: default;
    word-break: break-all;
    white-space: nowrap;
    visibility: hidden;
}
.navbar .right .account .notifier .notifier-icon {
    width: 1.25vw;
    height: 1.25vw;
}
.navbar .right .account .notifier .notifier-text {
    display: none;
}
.navbar .right .account .notifier.online {
    background-color: #D4ECD5;
}
.navbar .right .account .notifier.online:after {
    content: var(--account-notifier-connected);
}
.navbar .right .account .notifier.online .notifier-icon {
    background-image: url('/images/icons/state_online.svg');
    background-size: cover;
}
.navbar .right .account .notifier.offline {
    background-color: #F5DBD9;
}
.navbar .right .account .notifier.offline:after {
    content: var(--account-notifier-disconnected);
}
.navbar .right .account .notifier.offline .notifier-icon {
    background-image: url('/images/icons/state_offline.svg');
    background-size: cover;
}
.navbar .right .sign-out:hover {
    cursor: pointer;
}
.navbar .right .sign-out svg {
    width: 1.25vw;
    height: 1.25vw;
    fill: #6F6F6F;
}
.gates-screen {
    padding: 0.833vw 3.125vw 0.833vw 3.125vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 1.25vw;
    grid-row-gap: 0px;
}
.gates-screen .topbar {
    display: flex;
    grid-area: 1 / 1 / 2 / 3;
    justify-content: space-between;
    padding-bottom: 0.833vw;
}
.gates-screen .topbar .zones-shortlist {
    display: flex;
    align-items: center;
    font-size: 0.729vw;
    line-height: 1.042vw;
    font-weight: 400;
    gap: 3.802vw;
}
.gates-screen .topbar .zones-shortlist .zone {
    display: flex;
    gap: 0.625vw;
    color: #6F6F6F;
}
.gates-screen .topbar .zones-shortlist .zone .zone-value {
    font-size: 0.833vw;
    font-weight: 500;
}
.gates-screen .topbar .gates-viewmode {
    display: flex;
    border-radius: 0.208vw;
    background-color: #DCDCDC;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.gates-screen .topbar .gates-viewmode .mmode-label,
.gates-screen .topbar .gates-viewmode .cmode-label {
    padding: 0.313vw 0.833vw;
    font-size: 0.833vw;
    line-height: 1.458vw;
    font-weight: 500;
    border-radius: 0.208vw;
    cursor: pointer;
}
.gates-screen .topbar .gates-viewmode .mmode-label {
    background-color: #4DABF5;
    color: #f9f9f9;
}
.gates-screen .topbar .gates-viewmode .cmode-label {
    color: #8D8D8D;
}
.gates-screen .topbar .gates-viewmode.active .mmode-label {
    background-color: #DCDCDC;
    color: #8D8D8D;
}
.gates-screen .topbar .gates-viewmode.active .cmode-label {
    background-color: #4DABF5;
    color: #f9f9f9;
}
.gates-screen .list {
    grid-area: 2 / 1 / 3 / 2;
    width: 68.542vw;
}
.gates-screen .list .server:not(:first-child)  {
    margin-top: 1.875vw;
}
.gates-screen .list .server .server-name {
    display: flex;
    padding: 0.104vw 0.833vw;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    height: 2.292vw;
    background-color: #ECEEF2;
    font-size: 0.938vw;
    font-weight: 500;
    line-height: 2.292vw;
    gap: 0.417vw;
    color: #303030;
    border-top-left-radius: 0.208vw;
    border-top-right-radius: 0.208vw;
}
.gates-screen .list .server .offline-notify {
    display: none;
}
.gates-screen .list .server.offline .offline-notify {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    color: #CC4B41;
    padding: 0.417vw 0.625vw;
    font-size: 0.729vw;
    font-weight: 500;
    line-height: 2.083vw;
}
.gates-screen .list .server.offline .offline-notify::after {
    content: var(--gate-notify-offline);
}
.gates-screen .list .server .server-name .server-state {
    width: 1.25vw;
    height: 1.25vw;
}
.gates-screen .list .server.online .server-name .server-state {
    background-image: url('/images/icons/state_online.svg');
    background-size: cover;
}
.gates-screen .list .server.offline .server-name .server-state {
    background-image: url('/images/icons/state_offline.svg');
    background-size: cover;
}
.gates-screen .list .gate {
    display: flex;
    padding: 0.208vw 0;
    justify-content: space-between;
    border-right: 1px solid #ECEEF2;
    border-bottom: 1px solid #ECEEF2;
    border-left: 1px solid #ECEEF2;
    color: #303030;
    font-size: 0.833vw;
    font-weight: 400;
    background-color: #fff;
}
.gates-screen .list .gate:last-child {
    border-bottom-left-radius: 0.208vw;
    border-bottom-right-radius: 0.208vw;
}
.gates-screen .list .gate .gate-info {
    display: flex;
    width: 30.208vw;
    justify-content: space-between;
    align-items: center;
}
.gates-screen .list .gate .gate-info .gate-info-group {
    display: flex;
    align-items: center;
    gap: 0.417vw;
    align-self: stretch;
}
.gates-screen .list .gate .gate-info .gate-info-number {
    padding: 0.208vw 0.625vw;
    width: 1.042vw;
}
.gates-screen .list .gate .gate-info .gate-info-name {
    padding: 0 0.208vw;
    width: 7.813vw;
}
.gates-screen .list .gate .gate-info .gate-info-counter {
    padding: 0 0.417vw;
    width: 6.458vw;
}
.gates-screen .list .gate .gate-info-state {
    display: flex;
    align-items: center;
    gap: 0.417vw;
    width: 5.417vw;
    padding: 0.313vw 0.625vw;
    border-radius: 0.208vw;
    background-color: #E5E5E5;
    font-size: 0.729vw;
    line-height: 1.042vw;
}
.gates-screen .list .gate .gate-info-state .state-color {
    width: 0.625vw;
    height: 0.625vw;
    border-radius: 0.104vw;
    background-color: #ADADAD;
}
.gates-screen .list .gate .gate-info-state .state-name {
    display: none;
}
.gates-screen .list .gate.online .gate-info-state {
    background-color: #E6F1CE;
}
.gates-screen .list .gate.online .gate-info-state .state-color {
    background-color: #80B80A;
}
.gates-screen .list .gate.online .gate-info-state:after {
    content: var(--gate-state-online);
}
.gates-screen .list .gate.offline .gate-info-state {
    background-color: #EC7B7B33;
}
.gates-screen .list .gate.offline .gate-info-state .state-color {
    background-color: #EC7B7B;
}
.gates-screen .list .gate.offline .gate-info-state:after {
    content: var(--gate-state-offline);
}
.gates-screen .list .gate.freepassage .gate-info-state:after {
    content: var(--gate-state-freepassage);
}
.gates-screen .list .gate .gate-control {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 1.563vw;
}
.gates-screen .list .gate .gate-control .control-functions {
    display: flex;
    width: 24.063vw;
    align-items: center;
    gap: 1.25vw;
}
.gates-screen .list .gate .gate-control .control-functions .function-passes {
    display: flex;
    padding: 0.313vw 0.625vw;
    align-items: center;
    gap: 0.313vw;
    cursor: pointer;
}
.gates-screen .list .gate .gate-control .control-functions .function-passes img {
    width: 1.042vw;
    height: 1.042vw;
}
.gates-screen .list .gate .gate-control .control-commands {
    display: flex;
    padding-right: 0.625vw;
    justify-content: flex-end;
    align-items: center;
    gap: 0.938vw;
}
.gates-screen .list .gate .gate-control .control-commands .commands-list {
    width: 1.25vw;
    height: 1.25vw;
    background-image: url('/images/icons/menu.svg');
    background-size: cover;
    cursor: pointer;
}
.gates-screen .list .gate .gate-control .control-functions .command-input,
.gates-screen .list .gate .gate-control .control-functions .command-output {
    display: flex;
    padding: 0.313vw 0.625vw;
    align-items: center;
    gap: 0.313vw;
}
.gates-screen .list .gate .gate-control .control-functions .command-input .command-icon,
.gates-screen .list .gate .gate-control .control-functions .command-output .command-icon {
    width: 1.25vw;
    height: 1.25vw;
    background-size: contain;
}
.gates-screen .list .gate.offline .gate-control .control-functions,
.gates-screen .list .gate.freepassage .gate-control .control-functions {
    color: #8D8D8D;
}
.gates-screen .list .gate.online .gate-control .control-functions .command-input .command-icon {
    background-image: url('/images/icons/input_enabled.svg');
    background-size: cover;
}
.gates-screen .list .gate.online .gate-control .control-functions .command-output .command-icon {
    background-image: url('/images/icons/output_enabled.svg');
    background-size: cover;
}
.gates-screen .list .gate.offline .gate-control .control-functions .command-input .command-icon,
.gates-screen .list .gate.freepassage .gate-control .control-functions .command-input .command-icon {
    background-image: url('/images/icons/input_disabled.svg');
    background-size: cover;
}
.gates-screen .list .gate.offline .gate-control .control-functions .command-output .command-icon,
.gates-screen .list .gate.freepassage .gate-control .control-functions .command-output .command-icon {
    background-image: url('/images/icons/output_disabled.svg');
    background-size: cover;
}
.gates-screen .list .gate.online .gate-control .control-functions .command-input,
.gates-screen .list .gate.online .gate-control .control-functions .command-output {
    cursor: pointer;
}
.gates-screen .list .gate.online .gate-control .control-functions .command-input:hover,
.gates-screen .list .gate.online .gate-control .control-functions .command-output:hover {
    background-color: #F6FAE6;
}
.gates-screen .list .gate.offline .gate-control .control-functions .command-input,
.gates-screen .list .gate.offline .gate-control .control-functions .command-output {
    cursor: default;
}
.gates-screen .list .gate.freepassage .gate-control .control-functions .command-input,
.gates-screen .list .gate.freepassage .gate-control .control-functions .command-output {
    cursor: default;
}
.gates-screen .list .gate .gate-control .control-functions .command-input.disabled,
.gates-screen .list .gate .gate-control .control-functions .command-output.disabled {
    cursor: default;
    color: #8D8D8D;
}
.gates-screen .list .gate .gate-control .control-functions .command-input.disabled .command-icon {
    background-image: url('/images/icons/input_disabled.svg');
    background-size: cover;
}
.gates-screen .list .gate .gate-control .control-functions .command-output.disabled .command-icon {
    background-image: url('/images/icons/output_disabled.svg');
    background-size: cover;
}
.gates-screen .list .gate.online .gate-control .control-functions .command-input.disabled:hover,
.gates-screen .list .gate.online .gate-control .control-functions .command-output.disabled:hover {
    background-color: initial;
}
.gates-screen .list .gate .gate-control .commands-list {
    color: #303030;
}
.gates-screen .gate-commands-dropdown {
    display: none;
    position: absolute;
    padding: 0.417vw 0;
    background-color: #fff;
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 140%;
    border-radius: 0.208vw;
    box-shadow: 0px 0px 1.302vw 0px rgba(0, 0, 0, 0.15);
    z-index: 5;
}
.gates-screen .gate-commands-dropdown .command-entry {
    padding: 0.208vw 0.417vw;
    cursor: pointer;
    color: #303030;
}
.gates-screen .gate-commands-dropdown .command-entry:hover {
    background-color: #E6F3FA;
}
.gates-screen .gate-commands-dropdown .command-entry.disabled {
    color: #8D8D8D;
    cursor: default;
}
.gates-screen .gate-commands-dropdown .command-entry.disabled:hover {
    background-color: #fff;
}
.gate-command-scan {
    display: none;
}
.gate-command-scan .command-scan-container {
    display: flex;
    flex-direction: column;
    gap: 0.521vw;
    align-items: center;
}
.gate-command-scan .command-scan-container .scan-label {
    font-size: 0.938vw;
    font-weight: 500;
    line-height: 1.354vw;
}
.gate-command-scan .command-scan-container input[type=text] {
    width: 7.292vw;
    padding: 0.469vw 0.417vw 0.521vw 0.417vw;
    border: 1px solid #C3C3C3;
    border-radius: 0.208vw;
    font-family: 'Montserrat';
    font-size: 0.729vw;
    font-weight: 400;
    line-height: normal;
}
.gate-command-scan .command-scan-container input[type=text]:focus {
    outline: none;
}
.gate-command-scan .command-scan-container input[type=button] {
    width: 7.292vw;
    background-color: #A0C800;
    color: #fff;
    border: 1px solid #A0C800;
    cursor: pointer;
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 0.833vw;
    padding: 0.521vw 0.625vw;
    border-radius: 0.208vw;
}
.gate-command-confirm {
    display: none;
}
.gate-command-confirm .command-confirm-container {
    display: flex;
    flex-direction: column;
    gap: 0.781vw;
}
.gate-command-confirm .command-confirm-container .confirm-label {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 0.938vw;
    font-weight: 500;
    line-height: 1.354vw;
}
.gate-command-confirm .command-confirm-container .buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    gap: 1.042vw;
}
.gate-command-confirm .command-confirm-container .buttons-container input[type=button] {
    width: 9.375vw;
    background-color: #A0C800;
    color: #fff;
    cursor: pointer;
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 0.833vw;
    padding: 0.521vw 0.625vw;
    border-radius: 0.208vw;
    border: none;
}
.gate-command-confirm .command-confirm-container .buttons-container input.button-reject {
    background-color: #CC4B4180;
}
.gate-command-affirm {
    display: none;
}
.gate-command-affirm .command-affirm-container {
    display: flex;
    flex-direction: column;
    gap: 0.781vw;
}
.gate-command-affirm .command-affirm-container .affirm-label {
    font-size: 0.938vw;
    font-weight: 500;
    line-height: 1.354vw;
    text-align: center;
}
.gate-command-affirm .command-affirm-container .buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    gap: 1.042vw;
}
.gate-command-affirm .command-affirm-container .buttons-container input[type=button] {
    width: 9.375vw;
    background-color: #A0C800;
    color: #fff;
    border: 1px solid #A0C800;
    cursor: pointer;
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 0.833vw;
    padding: 0.521vw 0.625vw;
    border-radius: 0.208vw;
}
.gate-command-affirm .command-affirm-container .buttons-container input.button-reject {
    color: #303030;
    background-color: #F5DBD9;
    border: 1px solid #F5DBD9;
}
.gates-screen .counters {
    grid-area: 2 / 2 / 3 / 3;
    display: none;
    flex-direction: column;
    align-items: stretch;
    font-size: 0.938vw;
    font-weight: 500;
    line-height: 1.354vw;
}
.gates-screen .counters .header {
    display: flex;
    height: 2.292vw;
    padding: 0.104vw 0.833vw;
    align-items: center;
    gap: 0.625vw;
    background-color: #ECEEF2;
    color: #303030;
    border-top-left-radius: 0.208vw;
    border-top-right-radius: 0.208vw;
}
.gates-screen .counters .zones-list {
    border: 1px solid #ECEEF2;
    max-height: fit-content;
    border-bottom-left-radius: 0.208vw;
    border-bottom-right-radius: 0.208vw;
}
.gates-screen .counters .zones-list .zone {
    display: flex;
    padding: 0.625vw 0.833vw;
    align-items: center;
    gap: 0.417vw;
    font-size: 0.833vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.146vw;
    color: #6F6F6F;
    background-color: #fff;
}
.gates-screen .counters .zones-list .zone:last-child {
    border-bottom-left-radius: 0.208vw;
    border-bottom-right-radius: 0.208vw;
}
.gates-screen .counters .zones-list .zone .zone-value {
    font-weight: 500;
}
.gates-screen .messages {
    grid-area: 2 / 2 / 3 / 3;
}
.gates-screen .messages .messages-header {
    display: flex;
    font-size: 0.938vw;
    font-weight: 500;
    line-height: 1.354vw;
    height: 2.292vw;
    padding: 0.104vw 0.833vw;
    color: #303030;
    background-color: #ECEEF2;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 0.208vw;
    border-top-right-radius: 0.208vw;
}
.gates-screen .messages .messages-header .open-button {
    width: 1.354vw;
    height: 1.354vw;
    background-image: url('/images/icons/down_arrow.svg');
    background-size: cover;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
.gates-screen .messages .messages-list {
    min-height: 1.979vw;
    border: 1px solid #ECEEF2;
    background-color: #fff;
}
.gates-screen .messages .messages-list .message {
    display: none;
    font-size: 0.833vw;
    font-weight: 400;
    line-height: 1.146vw;
    padding: 0.625vw 0.833vw;
    color: #6F6F6F;
}
.gates-screen .messages .messages-list .message:last-child {
    display: block;
}
.gates-screen .messages.open {
    height: calc(100% - 2.604vw);
}
.gates-screen .messages.open .messages-header .open-button {
    transform: rotate(180deg);
}
.gates-screen .messages.open .messages-list {
    overflow-y: scroll;
    height: 75vh;
    border-bottom-left-radius: 0.208vw;
    border-bottom-right-radius: 0.208vw;
}
.gates-screen .messages.open .messages-list .message {
    display: block;
}
.passages-screen {
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 1.042vw;
}
.passages-screen .passages-filter {
    display: flex;
    padding: 1.25vw 3.125vw 0.833vw 3.125vw;
    justify-content: space-between;
    align-items: flex-start;
}
.passages-screen .passages-filter .filter-left {
    display: flex;
    align-items: flex-end;
    gap: 1.042vw;
}
.passages-screen .passages-filter .filter-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.208vw;
}
.passages-screen .passages-filter .section-header {
    font-size: 0.625vw;
    font-weight: 400;
    line-height: 0.833vw;
}
.passages-screen .passages-filter .dropdown {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 12.917vw;
    padding: 0.104vw 0.625vw;
    border-radius: 0.208vw;
    background-color: #fff;
    color: #8D8D8D;
    cursor: pointer;
}
.passages-screen .passages-filter .dropdown .dropdown-value {
    font-size: 0.729vw;
    font-weight: 500;
    line-height: 1.042vw;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    color: #6F6F6F;
}
.passages-screen .passages-filter .dropdown .arrow {
    grid-row: span 2;
    width: 0.833vw;
    height: 0.833vw;
    background-image: url('/images/icons/down_arrow_filter.svg');
    background-size: cover;
    transition: all 0.3s ease-out;
}
.passages-screen .passages-filter .dropdown.open .arrow {
    transform: rotate(180deg);
}
.passages-screen .passages-filter .dropdown .list-container {
    display: none;
    position: absolute;
    top: 2.552vw;
    left: 0;
    min-width: 14.167vw;
    padding: 0.625vw 0px 0.625vw 0px;
    border-radius: 0.208vw;
    background: #fff;
    box-shadow: 0px 0px 1.302vw 0px rgba(0, 0, 0, 0.15);
    z-index: 5;
    cursor: default;
}
.passages-screen .passages-filter .dropdown .list-content {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    max-height: 70vh;
    overflow: auto;
    width: 100%;
}
.passages-screen .passages-filter .dropdown.open .list-container {
    display: flex;
}
.passages-screen .passages-filter .dropdown .list-content .content-entry {
    display: flex;
    padding: 0.417vw 0.833vw;
    align-items: center;
    gap: 0.417vw;
    align-self: stretch;
    cursor: pointer;
}
.passages-screen .passages-filter .dropdown .list-content .content-entry:hover {
    background-color: #E6F3FA;
}
.passages-screen .passages-filter .dropdown .list-content .content-entry .checkbox {
    display: inline-block;
    width: 0.833vw;
    height: 0.833vw;
    background-image: url('/images/icons/checkbox_empty.svg');
    background-size: cover;
    transition: all 0.3s ease-out;
}
.passages-screen .passages-filter .dropdown .list-content .content-entry.checked .checkbox {
    background-image: url('/images/icons/checkbox_checked.svg');
    background-size: cover;
}
.passages-screen .passages-filter .dropdown .list-content .content-entry .entry-color {
    width: 0.625vw;
    height: 0.625vw;
    border-radius: 0.208vw;
    background-color: #c2c2c2;
}
.passages-screen .passages-filter .dropdown.dropdown-colormarked .list-content .content-entry.default .entry-color {
    display: none;
}
.passages-screen .passages-filter .dropdown .list-content .content-entry .entry-value {
    color: #6F6F6F;
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 150%;
    word-break: break-all;
    white-space: nowrap;
}
.passages-screen .passages-filter .dropdown .list-content .content-entry.checked .entry-value {
    color: #303030;
}
.passages-screen .passages-filter .filter-section .filter-input {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 12.917vw;
    padding: 0.104vw 0.625vw;
    border-radius: 0.208vw;
    background-color: #fff;
    color: #8D8D8D;
}
.passages-screen .passages-filter .filter-section .filter-input .close {
    width: 0.833vw;
    height: 0.833vw;
    background-image: url('/images/icons/close.svg');
    background-size: cover;
    grid-row: span 2;
    cursor: pointer;
    visibility: hidden;
}
.passages-screen .passages-filter .filter-section .filter-input .filter-barcode-input {
    color: #6F6F6F;
}
.passages-screen .passages-filter .filter-section input {
    width: 7.292vw;
    border: none;
    font-family: 'Montserrat';
    font-size: 0.729vw;
    font-weight: 500;
    line-height: 1.042vw;
    padding: 0;
}
.passages-screen .passages-filter .filter-section input:focus {
    outline: none;
}
.passages-screen .passages-filter .filter-right {
    display: flex;
    align-self: end;
}
.passages-screen .passages-filter .filter-viewmode {
    display: flex;
    line-height: 1.458vw;
    font-size: 0.833vw;
    font-weight: 500;
    color: #8D8D8D;
    background-color: #E5E5E5;
    border-radius: 0.208vw;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.passages-screen .passages-filter .filter-viewmode div {
    text-align: center;
    padding: 0.313vw 0.833vw;
}
.passages-screen .passages-filter .filter-viewmode .cmode-label {
    background-color: #4DABF5;
    color: #f9f9f9;
    border-radius: 0.208vw;
}
.passages-screen .passages-filter .filter-viewmode .vmode-label {
    background-color: initial;
}
.passages-screen .passages-filter .filter-viewmode.active .cmode-label {
    background-color: initial;
    color: #8D8D8D;
}
.passages-screen .passages-filter .filter-viewmode.active .vmode-label {
    background-color: #4DABF5;
    color: #f9f9f9;
    border-radius: 0.208vw;
}
.passages-screen .passages-list {
    padding: 0 3.125vw 1.042vw;
    margin-top: 1.042vw;
    overflow: auto;
}
.passages-screen .passages-list table {
    width: 100%;
    border-spacing: 0;
}
.passages-screen .passages-list table thead {
    position: sticky;
    top: 0;
}
.passages-screen .passages-list .list-header {
    font-weight: 600;
    color: #303030;
    text-align: left;
}
.passages-screen .passages-list .list-header th {
    background-color: #fff;
    padding: 0.208vw;
    font-size: 0.729vw;
    line-height: 1.042vw;
}
.passages-screen .passages-list .list-header th:first-child {
    padding-left: 0.625vw;
    border-top-left-radius: 0.208vw;
}
.passages-screen .passages-list .list-header th:last-child {
    padding-right: 0.625vw;
    border-top-right-radius: 0.208vw;
}
.passages-screen .passages-list .spacer th {
    background-color: #fff;
    border-bottom: 1px solid #F4F5F7;
}
.passages-screen .passages-list tr.passage {
    background-color: #fff;
}
.passages-screen .passages-list .passage td {
    padding: 0.208vw;
}
.passages-screen .passages-list .passage td:first-child {
    padding-left: 0.625vw;
}
.passages-screen .passages-list .passage:last-child {
    border-bottom-left-radius: 0.208vw;
    border-bottom-right-radius: 0.208vw;
}
.passages-screen .passages-list .passage:last-child td:first-child {
    border-bottom-left-radius: 0.208vw;
}
.passages-screen .passages-list .passage:last-child td:last-child {
    border-bottom-right-radius: 0.208vw;
}
.passages-screen .passages-list .passage .barcode {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    max-width: 7.813vw;
    cursor: pointer;
}
.passages-screen .passages-list .passage .passage-state {
    display: flex;
    padding: 0.208vw;
    align-items: center;
    gap: 0.417vw;
    word-break: break-all;
    white-space: nowrap;
}
.passages-screen .passages-list .passage .passage-state-color {
    display: inline-block;
    width: 0.625vw;
    height: 0.625vw;
    background-color: #ADADAD;
    border-radius: 0.208vw;
}
.passages-screen .passages-list .passage .passage-state-text {
    display: none;
}
.passages-screen .passages-list .passage .passage-state:after {
    content: 'Не определено';
}
.passages-screen .passages-list .passage.state0,
.passages-screen .passages-list .passage.state99,
.passages-screen .passages-list .passage.state50 {
    background-color: #FFE9E9;
}
.passages-screen .passages-list .passage.state30 {
    background-color: #FFEDD1;
}
.passages-screen .passages-list .passage.state30 td:last-of-type {
    cursor: pointer;
}
.passages-screen .passages-list .passage.state0 .passage-state-color,
.passages-screen .passages-list .passage.state99 .passage-state-color,
.passages-screen .passages-list .passage.state50 .passage-state-color {
    background-color: #CC4B41;
}
.passages-screen .passages-list .passage.state0 .passage-state:after,
.passages-screen .passages-list .passage.state99 .passage-state:after,
.passages-screen .passages-list .passage.state50 .passage-state:after {
    content: 'Запрещён';
}
.passages-screen .passages-list .passage.state10 .passage-state-color {
    background-color: #FEE400;
}
.passages-screen .passages-list .passage.state10 .passage-state:after {
    content: 'Разрешён';
}
.passages-screen .passages-list .passage.state20 .passage-state-color {
    background-color: #80B80A;
}
.passages-screen .passages-list .passage.state20 .passage-state:after {
    content: 'Произведён';
}
.passages-screen .passages-list .passage.state25 .passage-state-color {
    background-color: #D4ECD5;
}
.passages-screen .passages-list .passage.state25 .passage-state:after {
    content: 'Не произведён';
}
.passages-screen .passages-list .passage.state30 .passage-state-color {
    background-color: #FF794E;
}
.passages-screen .passages-list .passage.state30 .passage-state:after {
    content: 'Требуется подтверждение';
}
.passages-screen .passages-list .passage.state60 .passage-state-color {
    background-color: #FEE400;
}
.passages-screen .passages-list .passage.state60 .passage-state:after {
    content: 'Биометрия';
}
.passages-screen .passages-list .passage .passage-zone {
    display: flex;
    padding: 0.208vw;
    align-items: center;
    gap: 0.417vw;
    word-break: break-all;
    white-space: nowrap;
}
.passages-screen .passages-list .passage .passage-zone .direction1,
.passages-screen .passages-list .passage .passage-zone .direction2 {
    width: 1.25vw;
    height: 1.25vw;
    background-size: contain;
}
.passages-screen .passages-list .passage .passage-zone .direction1 {
    background-image: url('/images/icons/input_enabled.svg');
    background-size: cover;
}
.passages-screen .passages-list .passage .passage-zone .direction2 {
    background-image: url('/images/icons/output_enabled.svg');
    background-size: cover;
}
.error-modal {
    display: none;
}
.error-modal .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.781vw;
}
.error-modal .error-container .error-header {
    font-size: 0.938vw;
    font-weight: 500;
}
.error-modal .error-container .error-message {
    font-size: 0.729vw;
    font-weight: 500;
}
.error-modal .error-container input[type=button] {
    width: 5.208vw;
    background-color: #A0C800;
    color: #fff;
    border: 1px solid #A0C800;
    cursor: pointer;
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 0.833vw;
    padding: 0.521vw 0.625vw;
    border-radius: 0.208vw;
}
.error-modal, .gate-command-scan, .gate-command-confirm {
    border-radius: 0.208vw;
}
body.dark {
    background-color: #303030;
}
.dark .navbar {
    background-color: #303030;
}
.dark .navbar .left .logo {
    color: #fff;
}
.dark .navbar .left .menu .menu-item svg {
    fill: #f9f9f9;
}
.dark .navbar .left .menu .menu-item span {
    color: #f9f9f9;
}
.dark .navbar .right .theme-toggle {
    color: #ECEEF2;
}
.dark .navbar .right .account .account-name {
    color: #ECEEF2;
}
.dark .navbar .right .account .account-action {
    background-color: #3D3F41;
    color: #ECEEF2;
}
.dark .navbar .right .account .arrow svg {
    fill: #fff;
}
.dark .navbar .right .sign-out svg {
    fill: #F9F9F9;
}
.dark .screens {
    background-color: #303030;
}
.dark .gates-screen .topbar .zones-shortlist .zone {
    color: #ADADAD;
}
.dark .gates-screen .server .server-name {
    background-color: #303846;
    color: #fff;
}
.dark .gates-screen .server .gate {
    color: #fff;
    border-right: 1px solid #303846;
    border-bottom: 1px solid #303846;
    border-left: 1px solid #303846;
}
.dark .gates-screen .list .gate {
    background-color: #303030;
}
.dark .gates-screen .list .gate .gate-info-state {
    background-color: #646060;
}
.dark .gates-screen .list .gate .gate-info-state .state-color {
    background-color: #ADADAD;
}
.dark .gates-screen .list .gate.online .gate-info-state {
    background-color: #80B80A80;
}
.dark .gates-screen .list .gate.online .gate-info-state .state-color {
    background-color: #80B80A;
}
.dark .gates-screen .list .gate.online .gate-control .control-functions .command-input:hover,
.dark .gates-screen .list .gate.online .gate-control .control-functions .command-output:hover {
    background-color: #303846;
}
.dark .gates-screen .list .gate.online .gate-control .control-functions .command-input.disabled:hover,
.dark .gates-screen .list .gate.online .gate-control .control-functions .command-output.disabled:hover {
    background-color: #303030;
}
.dark .gates-screen .list .gate.online .gate-control .control-commands .command-input:hover,
.dark .gates-screen .list .gate.online .gate-control .control-commands .command-output:hover {
    color: #303846;
}
.dark .gates-screen .list .gate.online .gate-control .control-commands .command-input.disabled:hover,
.dark .gates-screen .list .gate.online .gate-control .control-commands .command-output.disabled:hover {
    color: #8D8D8D;
}
.dark .gates-screen .list .gate.offline .gate-info-state {
    background-color: #CC4B4180;
}
.dark .gates-screen .list .gate.offline .gate-info-state .state-color {
    background-color: #CC4B41;
}
.dark .gates-screen .server .gate .commands-list {
    color: #fff;
}
.dark .gates-screen .gate-commands-dropdown .command-entry {
    color: #fff;
}
.dark .gates-screen .gate-commands-dropdown .command-entry.disabled {
    color: #8D8D8D;
}
.dark .gates-screen .gate-commands-dropdown .command-entry:hover {
    background-color: #303846;
}
.dark .gates-screen .gate-commands-dropdown .command-entry.disabled:hover {
    background-color: initial;
}
.dark .gates-screen .counters .header {
    background-color: #303846;
    color: #fff;
}
.dark .gates-screen .counters .zones-list {
    border: 1px solid #303846;
}
.dark .gates-screen .counters .zones-list .zone {
    color: #fff;
    background-color: #303030;
}
.dark .gates-screen .topbar .gates-viewmode {
    border: 1px solid #303846;
    background-color: initial;
    color: #636975;
}
.dark .gates-screen .topbar .gates-viewmode .mmode-label {
    background-color: #303846;
    color: #ECEEF2;
}
.dark .gates-screen .topbar .gates-viewmode .cmode-label {
    background-color: initial;
    color: #636975;
}
.dark .gates-screen .topbar .gates-viewmode.active .mmode-label {
    background-color: initial;
    color: #636975;
}
.dark .gates-screen .topbar .gates-viewmode.active .cmode-label {
    background-color: #303846;
    color: #ECEEF2;
}
.dark .gates-screen .messages {
    background-color: #303030;
}
.dark .gates-screen .messages .messages-header {
    background-color: #303846;
    color: #fff;
}
.dark .gates-screen .messages .messages-list {
    border: 1px solid #303846;
    background-color: #303030;
}
.dark .gates-screen .messages .messages-list .message {
    color: #fff;
}
.dark .gates-screen .gate-commands-dropdown {
    background-color: #3D3F41;
    color: #f9f9f9;
}
.dark .passages-screen .passages-filter .section-header {
    color: #8D8D8D;
}
.dark .passages-screen .passages-filter .filter-viewmode {
    border: 1px solid #303846;
    background-color: initial;
    color: #636975;
}
.dark .passages-screen .passages-filter .filter-viewmode .cmode-label {
    background-color: #303846;
    color: #ECEEF2;
}
.dark .passages-screen .passages-filter .filter-viewmode.active .vmode-label {
    background-color: #303846;
    color: #ECEEF2;
}
.dark .passages-screen .passages-filter .filter-viewmode.active .cmode-label {
    background-color: initial;
    color: #636975;
}
.dark .passages-screen .passages-filter .dropdown {
    border: 1px solid #3D3F41;
    background-color: #3D3F41;
    color: #fff;
}
.dark .passages-screen .passages-filter .filter-section .filter-input {
    background-color: #3D3F41;
    border: 1px solid #3D3F41;
    cursor: text;
}
.dark .passages-screen .passages-filter .filter-section input {
    background-color: #3D3F41;
    color: #ADADAD;
}
.dark .passages-screen .passages-filter .dropdown .dropdown-value {
    color: #ADADAD;
}
.dark .passages-screen .passages-filter .dropdown .list-container {
    background-color: #3D3F41;
    color: #f9f9f9;
}
.dark .passages-screen .passages-filter .dropdown .list-content .content-entry .entry-value {
    color: #f9f9f9;
}
.dark .passages-screen .passages-filter .dropdown .list-content .content-entry:hover {
    background-color: #303846;
}
.dark .passages-screen .passages-list .list-header {
    color: #fff;
    background-color: #303030;
}
.dark .passages-screen .passages-list .list-header th {
    background-color: #303030;
}
.dark .passages-screen .passages-list .spacer th {
    background-color: #303030;
    border-bottom: 1px solid #7E7E7E;
}
.dark .passages-screen .passages-list tr.passage {
    background-color: #303030;
}
.dark .passages-screen .passages-list .passage {
    color: #fff;
}
.dark .passages-screen .passages-list .passage.state0,
.dark .passages-screen .passages-list .passage.state99,
.dark .passages-screen .passages-list .passage.state50 {
    background-color: #7E3E39;
}
.dark .passages-screen .passages-list .passage.state30 {
    background-color: #B48700;
}
.dark .error-modal, .dark .gate-command-scan, .dark .gate-command-confirm {
    background-color: #3D3F41;
    color: #f9f9f9;
}
.dark .gate-command-scan .command-scan-container input[type="text"] {
    border: 0.104vw solid #303030;
    color: #f9f9f9;
    background-color: #3D3F41;
}

@media screen and (min-width: 1280px) and (max-width: 1680px) {
    .navbar .right .account .notifier {
        font-size: 0.938vw;
    }
    .gates-screen .list .gate {
        font-size: 0.938vw;
    }
    .gates-screen .gate-commands-dropdown {
        font-size: 0.938vw;
    }
    .gates-screen .messages .messages-list .message {
        font-size: 0.938vw;
    }
    .passages-screen .passages-filter .section-header {
        font-size: 0.938vw;
    }
    .passages-screen .passages-filter .dropdown .dropdown-value {
        font-size: 0.938vw;
    }
    .passages-screen .passages-filter .dropdown .list-content .content-entry .entry-value {
        font-size: 0.938vw;
    }
    .passages-screen .passages-filter .filter-section input {
        font-size: 0.938vw;
    }
    .passages-screen .passages-list .list-header th {
        font-size: 0.938vw;
    }
    .passages-screen .passages-list .passage td {
        font-size: 0.938vw;
    }
}

.navbar {
    display: none;
}
.screens {
    display: none;
}
.screens.login-screen {
    display: block;
}