* {
	margin:0;
	padding:0;
	font-family: system-ui;
}

.dark-mode {
    color-scheme: dark;
	--bg-root: #292929;
	--cr-root: #cacaca;
	--bg-menu: #3d3d3f;
	--bc-menu: #333333;
	--cr-menu: #999999;
	--bg-submenu: #242424;
	--cr-icon: #212121;
	--bg-thumb: #454545;
	--bg-thumb-h: #353535;
    --bg-input: #1a1a1a;
	--bg-input-r: #464646;
	--bc-input: #3e3e3e;
	--bc-input-r: #4f4f4f;
    --cr-input: #aaaaaa;
	--cr-input-p: #777777;
	--bg-row-h: #40404b;
	--bg-row-n: #2e2e2e;
	--cr-cell: #ffffc3;
	--bg-form: #242424;
	--cr-form: #ffffc3;
	--bg-union: #2f2f2f;
	--bc-cell: #414141;
	--bg-list: #505050;
	--cr-list: #cacaca;
	--bg-line: #222222;
	--bg-small: #464646;
	--bg-inner: #6a6a6a;
	--bg-enable: #66E84CC9;
	--bg-subrow-n: #595959;
	--bc-subrow: #535353;
	--cr-success: #85DD85;
	--cr-former: #ffefd5;
	--cr-error: #F96D6D;
	--cr-label: #838383;
	--cr-h5: #9b9b9b;
}

.light-mode {
    color-scheme: light;
	--bg-root: #f5f5f5;
	--cr-root: #252525;
	--bg-menu: #424242;
	--bc-menu: #333333;
	--cr-menu: #999999;
	--bg-submenu: #ffffff;
	--cr-icon: #ffffff;
	--bg-thumb: #d9d9d9;
    --bg-thumb-h: #c9c9c9;
    --bg-input: #ffffff;
	--bg-input-r: #dfdfdf;
	--bc-input: #e0e0e0;
	--bc-input-r: #d5d5d5;
    --cr-input: #212121;
	--cr-input-p: #606060;
	--bg-row-h: #d9dbe1;
	--bg-row-n: #f0f0f0;
	--cr-cell: #e75700;
	--bg-form: #ffffff;
	--cr-form: #8a2020;
	--bg-union: #fdfdfd;
	--bc-cell: #d7d7d7;
	--bg-list: #505050;
	--cr-list: #cacaca;
	--bg-line: #cdcdcd;
	--bg-small: #7e7e7e;
	--bg-inner: #575757;
	--bg-enable: #00B7FF;
	--bg-subrow-n: #c6c6c6;
	--bc-subrow: #d0d0d0;
	--cr-success: #20bf00;
	--cr-former: #00B7FF;
	--cr-error: #ff0000;
	--cr-label: #606060;
	--cr-h5: #606060;
}

.dev-enable {
	height: 2px;
	width: 100%;
	top: 42px;
	left: 0;	
	background-size: 200% 100%;
	z-index: 7;
	background: linear-gradient(to right, violet, rgb(122, 7, 204), rgb(0, 140, 255), rgb(0, 238, 0), rgb(255, 251, 0), red, violet);
	position: absolute;
	animation: rainbowAnimation 2s ease-out infinite alternate, rotateColors 4s ease-in-out infinite alternate;
}

.maintenance,
.fault {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 30px;
}

.fault {
    font-size: 140px;
    font-family: consolas;
}

.required {
	color: var(--cr-error);
}

label,
.no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-action] > * {
	pointer-events: none;
}

body {
	background-color: var(--bg-root);
	color: var(--cr-root);
	font-size: 18px;
	overflow: hidden;
}

::-webkit-scrollbar,
::-webkit-scrollbar-corner {
	background-color: var(--bg-root);
}

::-webkit-scrollbar-thumb {
	background-color: var(--bg-thumb);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--bg-thumb-h);
}

.dropdown-list::-webkit-scrollbar,
.dropdown-list::-webkit-scrollbar-corner {
	background-color: #505050;
}

.dropdown-list::-webkit-scrollbar-thumb {
	background-color: #656565;
}

.dropdown-list::-webkit-scrollbar-thumb:hover {
	background-color: #707070;
}

.menu-wrapper::-webkit-scrollbar,
.menu-wrapper::-webkit-scrollbar-corner {
	background-color: var(--bc-menu);
}

.menu-wrapper::-webkit-scrollbar-thumb {
	background-color: #505050;
}

.menu-wrapper::-webkit-scrollbar-thumb:hover {
	background-color: #606060;
}

h4 {
	color: var(--cr-input-p);
	font-weight: normal;
}

.table-container h4 {
	margin: 20px 0;
	text-align: left;
}

label,
input,
button,
select,
div[contenteditable="true"] {
	font-size: 14px;
}

li span {
	min-width: 34px;
    color: #ffffc3;
    display: inline-block;
}

select {
	background-color: var(--bg-input);
	color: var(--cr-input);
	min-width: 100px;
	border-radius: 7px;
	padding: 6px 12px;
	border: none;	
	transition: all ease-in-out 150ms;
}

select:enabled:hover, select:focus {
	background-color: var(--bg-input-r);
}

select:disabled {
	opacity: 0.5;
}

button {
	min-width: 90px;
	padding: 4px 20px;
	border-radius: 7px;
	background: #464646;
	color: #d5d5d5;
	position: relative;
	border: none;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	transition: all ease-in-out 150ms;
}

button:disabled {
	pointer-events: none;
	opacity: 0.5;
}

button::before {
	width: 1px;
	height: 1px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	transform: scale(0);
	background-color: rgba(255, 255, 255, 0.1);
	position: absolute;
	content: '';
	margin: auto;	
}

button:hover:before {
	animation: ripple-effect 2.5s ease-out infinite;
}

button:active {
	background-color: var(--bg-thumb-h);
}

button:not(.button-small).notify {
	padding: 4px 27px;
}

button.notify::after {
	margin: 2px 7px;
	padding: 8px;
    border-radius: 12px;    
    position: absolute;
    content: '';
}

button.button-small.notify::after {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 5px;
}

button.error::after {
	background: #e56868 url(../../assets/images/close2.svg) center center/8px no-repeat;
}

button.former::after {
	background: var(--bg-inner) url(../../assets/images/minus.svg) center center/10px no-repeat;
}

button.success::after {
    background: #008b47 url(../../assets/images/success2.svg) center center/14px no-repeat;
}

button.save::after {
    background: var(--bg-inner) url(../../assets/images/save.svg) center center/12px no-repeat;
}

input:disabled {
	cursor: not-allowed;
}

input:disabled,
input:disabled ~ label  {
	opacity: 0.5;
}

div[contenteditable="true"],
textarea,
input[type="date"],
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"] {
	background-color: var(--bg-input);
	border: 1px solid var(--bc-input);	
	color: var(--cr-input);
	min-width: 100px;
	padding: 4px 10px;
	outline: 0;
	border-radius: 7px;	
	box-sizing: border-box;
	transition: border ease-in-out 150ms;
}

input[type="date"] {
	min-width: 122px;
}

input[type="file"] {
	display: none;
}

input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder {
    color: var(--cr-input-p);
}

div[contenteditable="true"]:not(.invalid):focus,
textarea:not(.invalid):focus,
input[type="date"]:not(.invalid):focus,
input[type="text"]:not(.invalid):focus,
input[type="tel"]:not(.invalid):focus,
input[type="number"]:not(.invalid):focus,
input[type="password"]:not(.invalid):focus {
	border: 1px solid rgb(108, 165, 221) !important;
}

input[type="number"] {
	-moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

input.invalid {
	border: 1px solid #F96D6D !important;
}

li {
	min-height: 19px;
}

.invalid-message {
	color: #F96D6D;
}

div[contenteditable="true"] {
	max-width: 90vw;
	max-height: 300px;
	min-height: auto;	
	overflow: scroll;
	word-break: break-word;
}

.table-cell input[type="text"] {
    width: 100%;
	padding: 4px;
}

.table-cell input[type="text"]:not(.dropdown-input) {
	text-align: center;
}

.dropdown-input:read-only {
	background-color: var(--bg-input-r);
	border: 1px solid var(--bc-input-r);
	cursor: pointer;
}

.hide {
	display: none !important;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

div[contenteditable="true"].highlight:not(.lock):not(:focus),
input[type="text"].highlight:not(.lock):not(:focus) {
	animation: highlight 4s infinite;
}

a {
	cursor: pointer;
	text-decoration: none;
	transition: all ease-in-out 150ms;
}

.table-cell a {
	color: #85DD85;
	display: block;
	text-align: left;
}

.table-cell a:hover {
	color: #75ffca;
}

.table-cell.cell-report {
	padding-bottom: 6px;
}

label {
	color: var(--cr-label);
	padding: 5px 1px;	
	display: block;	
	text-align: left;	
}

.separator {
	background-color: var(--bg-line);
	width: 1px;
    height: 19px;
	margin: 0 15px;
    display: inline-block;
    vertical-align: middle;
}

#table-wrapper {
	flex: 1;
	overflow: auto;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wrapper {
	height: 100vh;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.container {
	flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.flex-container {
	height: 100vh;
	display: flex;
	flex-direction: column;	
}

.center-container {
	max-width: 1200px;
	align-items: center;
	justify-content: center;
	margin: auto;
}

.table-container {
	margin: 0 auto;
}

.side-menu {
	left: 5px;
	border-radius: 5px;
	margin-top: 36px;
	margin-bottom: 10px;
	padding: 5px;
	z-index: 1;
	position: sticky;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.table {
	color: var(--cr-root);
	font-size: 14px;
	padding-bottom: 7px;
	margin-top: 2px;
}

.table[data-source="directions2"] {
	color: #cacaca;
}

.table :not(.table-header) .sidebar-left:nth-child(2) {
	vertical-align: unset;
}

.table[data-source="stats"] .table-cell {
	vertical-align: middle;
}

.table[data-source="stats"] > :last-child {
	background-color: var(--bg-input);
}

.table[data-source="stats"] > :last-child .sidebar-right {
	display: none;
}

.table-header {
	background: var(--bg-root);
	top: 0px;
	font-size: 14px;
	height: 32px;
    z-index: 4;    
    position: sticky;
	display: table-header-group;
}

.table-header > .table-cell {
	color: var(--cr-cell);
	padding-bottom: 3px;	
	transition: color .25s;
	vertical-align: middle;
}

.table-header .button-small.save {
	background-color: var(--cr-cell);
}

.table-cell.hidden {
	min-width: 0px !important;
	max-width: 0px;
	padding: 1px 5px;
}

.table-cell:not(.menu-cell).hidden > *,
.menu-cell.hidden span,
.menu-cell.hidden .column-menu *:not(.button-line),
.menu-cell:not(.hidden) .column-menu .button-line {
    display: none;
}

.table-cell:not(.menu-cell).hidden,
.menu-cell:hover {
	color: transparent !important;
	white-space: nowrap !important;
}

.column-menu {
	top: -2px;
    left: 0;
    right: 0;    
	opacity: 0;
	z-index: 1;
	margin: 0 auto;
    position: absolute;    
	transition: opacity .25s;
}

.menu-cell:hover .column-menu,
.menu-cell.hidden .column-menu {
	opacity: 1;
}

.table-row {
	display: table-row;	
}

.table-row:hover,
.table-row:hover > .sidebar-left,
.table-row:hover > .sidebar-right {
	background-color: var(--bg-row-h) !important;
}

.table-row:nth-child(even),
.table-row:nth-child(even) .sidebar-left, 
.table-row:nth-child(even) .sidebar-right {
	background-color: var(--bg-row-n);
}

.table-cell {
	border-left: 1px dotted var(--bc-cell);
	padding: 0px 7px 1px 7px;	
	position: relative;
	display: table-cell;
	text-align: center;
	word-wrap: break-word;
	white-space: nowrap;
	/* text-overflow: ellipsis;
    overflow: hidden; */
}

.cropped-cell {
	width: 100px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.table-header > :first-child,
.table-row > :first-child,
.sidebar-left + .table-cell {
	border-left: none;
}

.status-,
.status-0,
.status-1 {
	padding-left: 11px;
}

.status-0::before,
.status-1::before {
	background-color: var(--bg-enable);
	width: 2px;
	top: 5px;
	left: 8px;
	bottom: 5px;
	border-radius: 1px;
	position: absolute;
	content: '';
}

.status-0::before {
	background: #EE5757;
}

.sidebar-left,
.sidebar-right {
	background-color: var(--bg-root);
	border-right: 1px dotted var(--bc-cell);
	left: 0;
	z-index: 3;	
	position: sticky;	
	border-left: none;
	vertical-align: top;
}

.sidebar-right {
	left: unset;
	right: 0;
	border-right: none;
	border-left: 1px dotted var(--bc-cell);
	vertical-align: top;
}

.horizontal-separator {
	background-color: var(--bg-line);
	height: 1px;
	width: 80%;
	margin: 20px auto;	
}

.nowrap {
	white-space: normal !important;
}

.empty {
	margin: auto;
}

.empty::before {
	color: var(--cr-icon);
	font-size: 250px;
	margin: auto;    
    font-family: Consolas;
	content: '><';
}

.table-menu {
	left: 15px;
	margin: 10px;
	z-index: 5;
	position: sticky;
    text-align: left;        
}

#table-wrapper .table-menu {
	margin-bottom: 15px;
}

.table-center {
	text-align: center;
}

.button-accept {
    background: #69a162;
    color: white;
}

.button-simple {
	background-color: transparent !important;
}

.button-simple::before {
    content: none;
}

.button-small {
	background-color: var(--bg-small);
	width: 30px;
	height: 30px;
	border-radius: 15px;	
	padding: 0;
	min-width: unset;
	background-repeat: no-repeat;
	background-position: center;
}

.menu-block .button-small {
	background-color: #464646;
}

.column-menu .button-small {
	margin-top: 3px;
}

.button-update {
	display: flex;
	align-items: center;
}

.button-line {
	min-width: 6px;
    padding: 0px;
    height: 24px;
}

.button-light {
	background-color: #626262;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-list {
	background-color: var(--bg-list);
	color: var(--cr-list);
	box-shadow: 0px 0px 150px 50px var(--cr-icon);
	min-width: 100%;
	max-height: 300px;
	margin-top: 5px;
	border-radius: 7px;
	font-size: 14px;
	z-index: 5;	
	border: 1px solid #5A5A5A;    
	box-sizing: border-box;
	overflow-y: auto;
	position: absolute;
	display: none;
	list-style-type: none;
	text-align: left;
}

.dropdown-list.reverse {
	bottom: 34px;
}

.dropdown-list li {
	padding: 5px 10px;
	cursor: pointer;
}
  
.dropdown-list li:hover {
	background-color: #5A5A5A;
}

.notifications {
	box-shadow: 0px 0px 150px 50px var(--cr-icon);
	width: 340px;
	left: 0;
	right: 0;
    bottom: 20px;
    margin: 0px auto;
    border-radius: 5px;
    z-index: 5;
	opacity: 0;    
	position: absolute;
	display: none;
}

.messages-container {	
	border-radius: 7px 7px 0px 0px;
	background-color: #3d3d3f;
	position: relative;
    overflow: hidden;	      
}

.single-container {
	border-radius: 7px;
}

.messages-container::before,
.messages-container::after {
    position: absolute;
    content: '';
    height: 20px;
    width: 100%;
	left: 0;
    z-index: 1;
    background: linear-gradient(0deg, #3d3d3f80 0%, #3d3d3f 80%);
}

.messages-container::after {
	bottom: 0px;
	background: linear-gradient(180deg, #3d3d3f80 0%, #3d3d3f 80%);
}

.notifications-line {
    bottom: 0px;
    left: 29px;
    width: 1px;
    height: 100%;
    background-color: #656565;
    position: absolute;
}

.collapse .message:nth-of-type(-n + 2) {
	height: 0px;
	margin: 0px 10px;
}

.message {
    position: relative;
	margin: 20px 10px;
	display: flex;
	overflow: hidden;
	transition: all ease-in-out 150ms;
}

.message-body {
	margin-left: 7px;
}

#message-icon {	
    width: 20px;
    height: 20px;
	z-index: 1;
	background-color: #3d3d3f; 
    border: 10px solid #3d3d3f;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
	margin: auto;
}

.message-icon-1 {
	width: 14px !important;
	height: 14px !important;
	margin: auto 3px !important;
	background-image: url(../../assets/images/close.svg);
}

.message-icon0 {
	background-image: url(../../assets/images/minus.svg);
	margin: 0 !important;
}

.message-icon1 {
	background-image: url(../../assets/images/success.svg);
	margin: 0 !important;
}

.message-title {
	max-width: 280px;
	color: #FFFFFF;
	font-size: 16px;
	text-align: left;
}

.message-title span {
	color: rgb(255, 255, 195);
}

.message-info {
	font-size: 13px;
    color: #999999;
	text-align: left;
}

.message-info span:last-child:before {
	content: '';
    width: 3px;
    height: 3px;
    background-color: white;
    display: inline-block;
    border-radius: 2px;
    margin: 3px 7px;
}

.menu {
	background-color: var(--bg-menu);
	border-bottom: 2px solid var(--bc-menu);	
	height: 41px;
	z-index: 6;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
}

.menu-left,
.menu-right {
	z-index: 1;
	display: flex;
}

.menu-left {
	margin: 0px 0px 0px 25px;
}

.menu-right {
	margin: 0px 25px 0px 0px;
}

.menu-items {
	left: 0;
	right: 0;
	z-index: 0;
	display: flex;
	justify-content: center;
	position: absolute;	
}

.menu-name {
	font-size: 16px;
	padding: 10px 20px 10px 10px;
	position: relative;
	white-space: nowrap;
	display: flex;
	transition: color ease-in-out 150ms;
}

.menu-name .menu-icon {
	margin: auto 7px;
	background-size: 16px;
}

.menu-item:hover .menu-name {
	color: var(--cr-menu);
}

.menu-button:hover {
	background-color: var(--bc-menu);
}

.menu-bg {	
	width: 100%;
	height: 41px;
	top: 0px;
	background-color: var(--bg-menu);
	position: absolute;
	transition: background-color 0.5s ease;
}

.menu-item {
	z-index: 1;
}

.menu-item:hover .menu-block {
	opacity: 1;
}

.menu-wrapper {   
	width: 100%; 
    height: 100%;
    max-height: 350px;    
    display: flex;
    justify-content: center;
	overflow-y: auto;
}

.menu-list {
	background-color: var(--bc-menu);	
    top: 41px;
	left: 0;
	right: 0;
	max-height: 0px;
	position: absolute;
	text-align: left;
	overflow-y: hidden;
	transition: max-height 0.35s ease;
}

.menu-item.active:hover .menu-list {
	max-height: 350px;
}

.menu-item.active:hover ~ .menu-bg {
	background-color: var(--bc-menu);
}

.menu-container {
	width: 1230px;
	height: 100%;
	margin: 10px 15px 25px 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.page-curtain {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	opacity: 0;
    z-index: -1;
	background: #00000099;
	position: fixed;
	visibility: hidden;
	transition: opacity .15s cubic-bezier(.4,0,.6,1) 50ms, visibility .15s step-end 50ms;
}

.menu-item.active:hover ~ .page-curtain {
	opacity: 1;
	visibility: visible;
	transition: opacity .15s cubic-bezier(.4,0,.6,1) 50ms,visibility .15s step-start 50ms;
}

.menu-list .icon-applicants {
	background-repeat: no-repeat;
}

.menu-block {	
	max-width: 400px;
	flex: 1 0 calc(33% - 10px);
	display: flex;
	box-sizing: border-box;
}

.menu-link {
	width: 100%;
	padding: 7px 0px;
	overflow: hidden;
}

.menu-block:hover .link-name {
	color: var(--cr-list);
}

.link-name {
	font-size: 16px;
}

.link-descr {
	font-size: 14px;
	margin-top: -3px;
	color: #757575;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-icon {
	min-width: 20px;
    width: 20px;
    height: 20px;
	margin: auto 20px;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center;
}

.menu-icon.icon-proxy {
	background-size: 14px;	
}

.menu-icon.icon-other {
	background-size: 12px;	
}

.menu-name > .icon-applicants {
	background-size: 18px;
}

.menu-link:not([data-frame=""]) + .button-small {
	margin: auto 15px;
	min-width: 30px;
}

.menu-link[data-frame=""] + .button-small.icon-external {
	visibility: hidden;
}

.menu-block:hover .menu-line {
	opacity: 1;
}

.menu-line {
	width: 4px;
	height: 14px;
	border-radius: 2px;
	opacity: 0;
	background-color: #4CC2FF;
	margin: auto 0px auto 5px;
}

.home-link {
	background-color: var(--bc-menu);
	height: 41px;	
	border: none;
	cursor: pointer;
	overflow: hidden;
	display: block;
}

.home-link > div {
	transition: transform 0.3s;
	width: 46px;
	height: 41px;
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;
	top: -41px;
	display: block;
	position: relative;
}

.home-link:hover > div {
    transform: translateY(41px);
}

.top-part {
	background-color: #4CC2FF;
}

.menu-button {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
	width: 46px;
	padding: 0px;
}

.menu-button.icon-external {
	background-size: 20px;
}

.menu-user {
	font-size: 16px;
	max-width: 160px;
	line-height: 39px;
    margin-right: 10px;
	color: #757575;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-name {
	color: #a8a8a8;
}

.page-anchor {
	display: none;
}

.table-row .cell-note {
	padding: 1px 0px;
}

.cell-separator {
	padding: 0px 10px;
	border: unset !important;
}

.cell-separator::before {
	background-color: var(--bg-line);	
	width: 3px;
	height: 100%;
	top: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	position: absolute;
	content: '';
}

.cell-separator + .table-cell {
	border: unset;
}

.united-input {
	background-color: var(--bg-input);
	border: 1px solid var(--bc-input);
	border-radius: 7px;	  
	display: inline-block;
}

.united-state {
	color: var(--cr-cell);
	font-size: 16px;
	margin: 10px;
}

.united-input .separator {
	margin: unset;
}

.united-input > input {
	border-color: transparent !important;
	width: 100px !important;
}

.indicator-line {
	top: 3px;
	width: 100%;
	z-index: 100;
	position: absolute;	
	height: auto;
	opacity: 0;
}
 
.indicator-line.active .indicator {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	left: -100px;
	margin: auto;
	position: relative;
	box-sizing: border-box;
	animation: shadowRolling 2s linear infinite;
}

/* menu */
.observe-phones {
	font-size: 14px;
	line-height: 41px;
	opacity: 0.8;
    margin: auto 0px auto 10px;
	color: #bbbbbb;
	position: relative;
	display: flex;
	align-items: center;
	transition: opacity 0.35s ease;
}

.open .observe-phones {
	opacity: 0;
}

.observe-phones .separator {
	background-color: var(--bc-menu);
}

.phones-column {
	padding: 0px 5px;
	min-width: 24px;
	position: relative; 
}

.observe-phones .menu-icon {
	margin: 0px 10px;
}

.phones-count::before,
.phones-online::before,
.phones-offline::before {
	width: 100%;
	height: 2px;
	top: 0px;
	left: 0px;
    position: absolute;
	background-color: #999999;
	content: ''; 
}

.phones-online::before {
	background-color: #7edd7e;
}

.phones-offline::before {
	background-color: #f15757;
}

.phones-offline {
    height: 41px;
    display: flex;
    flex-direction: column;
}

.phones-offline div {
	line-height: 1;
}

.phones-disabled {
	font-size: 9px;
	margin-top: 5px;
    text-align: right;
}
/* menu */

.icon-home {
	background-size: 16px;
	background-image: url(../../assets/images/home.svg);
}

.icon-external {
	background-image: url(../../assets/images/external.svg);
}

.icon-update {
	background-image: url(../../assets/images/update.svg);
}

.icon-remove {
	background-image: url(../../assets/images/remove.svg);
}

.icon-hide {
	background-size: 16px;
	background-image: url(../../assets/images/hide.svg);
}

.icon-key {
	background-size: 18px;
	background-image: url(../../assets/images/key.svg);
}

.icon-applicants {
	background-image: url(../../assets/images/applicants.svg);
}

.icon-remote {
	background-image: url(../../assets/images/remote.svg);
}

.icon-link {
	background-image: url(../../assets/images/link.svg);
}

.icon-directions {
	background-image: url(../../assets/images/directions.svg);
}

.icon-config {
	background-image: url(../../assets/images/config.svg);
}

.icon-phone {
	background-image: url(../../assets/images/phone.svg);
}

.icon-messages {
	background-image: url(../../assets/images/messages.svg);
}

.icon-online {
	background-image: url(../../assets/images/online.svg);
}

.icon-add {
	background-image: url(../../assets/images/add.svg);
}

.icon-proxy {
	background-image: url(../../assets/images/proxy.svg);
}

.icon-data {
	background-image: url(../../assets/images/data.svg);
}

.icon-sim {
	background-image: url(../../assets/images/sim.svg);
}

.icon-other {
	background-image: url(../../assets/images/other.svg);
}

.icon-exit {
	background-image: url(../../assets/images/exit.svg);
}

.icon-upload {
	background-size: 18px;
	background-image: url(../../assets/images/upload.svg);
}

.icon-alert {
	background-size: 17px;
	background-image: url(../../assets/images/alert.svg);
}

.icon-email {
	background-size: 21px;
	background-image: url(../../assets/images/email.svg);
}

.icon-stats {
	background-size: 18px;
	background-image: url(../../assets/images/stats.svg);
}

.icon-cheque {
	background-size: 15px;
	background-image: url(../../assets/images/cheque.svg);
}

.icon-tasks {
	background-size: 18px;
	background-image: url(../../assets/images/tasks.svg);
}

.icon-cards {
	background-size: 17px;
	background-image: url(../../assets/images/cards.svg);
}

.icon-save {
	background-size: 14px;
	background-image: url(../../assets/images/save.svg);
}

.icon-close {
	background-size: 12px;
	background-image: url(../../assets/images/close.svg);
}

.icon-minus {
	background-image: url(../../assets/images/minus2.svg);
}

.icon-plus {
	background-size: 16px;
	background-image: url(../../assets/images/plus.svg);
}

.icon-share {
	background-size: 14px;
	background-image: url(../../assets/images/share.svg);	
}

.icon-unblock {
	background-size: 18px;
	background-image: url(../../assets/images/unblock.svg);
}

.icon-consulate {
	background-image: url(../../assets/images/consulate.svg);
}

.icon-disable {
	background-size: 16px;
	background-image: url(../../assets/images/disable.png);
}

.icon-enable {
	background-size: 24px;
	background-image: url(../../assets/images/enable.svg);
}

.dark-mode .icon-table {
	background-size: 14px;
	background-image: url(../../assets/images/table.svg);
}

.light-mode .icon-table {
	background-size: 14px;
	background-image: url(../../assets/images/table2.svg);
}

.light-mode #theme {
	background-image: url(../../assets/images/dark.svg);
}

.dark-mode #theme {
	background-image: url(../../assets/images/light.svg);
}

.ha-right {
	text-align: right;
}

@media (max-width: 1350px) {
	.menu-title {
		display: none;
	}

	.menu-name {
		padding: 10px;
	}

	.menu-name .menu-icon {
		background-size: 18px;
	}

	.menu-icon.icon-other {
		background-size: 14px;
	}

	.menu-name .menu-icon {
		margin: auto 3px;
	}
}

@media (max-width: 1230px) {
	.menu-container	{
		width: 830px;
	}

	.menu-block	{
		flex: 1 0 calc(50% - 10px);
	}
}

@media (max-width: 1150px) {
	.observe-phones {
		display: none;
	}
}

@media (max-width: 899px) {
	.menu-container	{
		width: 400px;
	}

	.menu-block	{
		flex: 1 0 100%;
	}
}

@media (max-width: 799px) {
	.menu-user {
		display: none;
	}
}

@keyframes ripple-effect {
	0% {
		transform: scale(0);
		opacity: 1;
	}

	30% {
		transform: scale(200);
		opacity: 0;
	}

	100% {
		transform: scale(200);
		opacity: 0;
	}
}

@keyframes rainbowAnimation {
	to {
		background-position: 200% 0;
	}
}

@keyframes rotateColors {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes highlight {
	0%, 60%, 100% {
		border-color: var(--bc-input);
	}
	30% {
		border-color: #6fb2f599;
	}
}

@keyframes shadowRolling {
	0% {
		box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
	}
	12% {
		box-shadow: 100px 0 #ffffc3, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
	}
	25% {
		box-shadow: 110px 0 #ffffc3, 100px 0 #ffffc3, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
	}
	36% {
		box-shadow: 120px 0 #ffffc3, 110px 0 #ffffc3, 100px 0 #ffffc3, 0px 0 rgba(255, 255, 255, 0);
	}
	50% {
		box-shadow: 130px 0 #ffffc3, 120px 0 #ffffc3, 110px 0 #ffffc3, 100px 0 #ffffc3;
	}
	62% {
		box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #ffffc3, 120px 0 #ffffc3, 110px 0 #ffffc3;
	}
	75% {
		box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #ffffc3, 120px 0 #ffffc3;
	}
	87% {
		box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #ffffc3;
	}
	100% {
		box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
	}
}