:root {
  --main-color: #1871a5;
  --main-color-hover: #3f51b5;
  --main-color-left-menu-icon: #008000;
  --main-color-body-background: #fff;
  --main-color-body-background-second: #f6f6f6;
  --main-color-text: #000;
  --main-color-table-hover: #000;
  --main-color-button: #1871a5;
  --main-color-button-text: #fff;
  --main-color-button-hover: #095882;
  --main-color-yellow-info: #f7da78;
  --main-color-yellow-info-border: #e0c25f;
  --main-color-task-div-background: #f7f3f7;
  --main-color-task-comment-border: #b5b6b5;
  --main-color-task-comment: #deefff;
  --main-color-task-comment-author: #adcbff;
  --main-color-task-comment-my: #ccc4e6;
  --main-color-topline-current: #1871a5;
  --main-color-userbar-current: #1871a5;
}

@font-face {
  font-family: "Myriad pro";
  src: url("../fonts/mypro-it-webfont.eot");
  src:
    url("../fonts/mypro-it-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/mypro-it-webfont.woff") format("woff"),
    url("../fonts/mypro-it-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Myriad pro";
  src: url("../fonts/mypro-regular-webfont.eot");
  src:
    url("../fonts/mypro-regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/mypro-regular-webfont.woff") format("woff"),
    url("../fonts/mypro-regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Myriad pro";
  src: url("../fonts/mypro-semibold-webfont.eot");
  src:
    url("../fonts/mypro-semibold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/mypro-semibold-webfont.woff") format("woff"),
    url("../fonts/mypro-semibold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Myriad pro";
  src: url("../fonts/mypro-semiboldit-webfont.eot");
  src:
    url("../fonts/mypro-semiboldit-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/mypro-semiboldit-webfont.woff") format("woff"),
    url("../fonts/mypro-semiboldit-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

.us-logo-medium {
  background: url("../picture/logo.png") 0px no-repeat;
}

.date-time-field {
  color: #000;
  font-size: 14px;
  height: 23px;
  line-height: 23px;
  border: 1px solid var(--main-color-task-comment-border);
  outline: none;
  padding: 0 10px;
  padding-right: 10px;
  font-family: "Myriad pro", Tahoma, Geneva, Helvetica, sans-serif;
  background: url("../picture/calendar.svg") 100% 50% no-repeat;
  width: 120px;
}

.date-field {
  color: #000;
  font-size: 14px;
  height: 23px;
  line-height: 23px;
  border: 1px solid var(--main-color-task-comment-border);
  outline: none;
  padding: 0 10px;
  padding-right: 10px;
  font-family: "Myriad pro", Tahoma, Geneva, Helvetica, sans-serif;
  background: url("../picture/calendar.svg") 100% 50% no-repeat;
  width: 120px;
}

#oper_notify_id {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 350px;
  z-index: 9999;
}

.oper_notify_msg {
  width: 100%;
  min-height: 100px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 11px;
  margin-top: 5px;
}

.oper_notify_msg:hover {
  background-color: #000;
}

.employee_notify_task_new_comment {
  background-color: #408080;
  border: 1px solid #800080;
}

.employee_notify_task_new_comment:hover {
  background-color: rgba(64, 128, 128, 0.7);
}

.employee_notify_task_employee_assignment {
  background-color: #800080;
  border: 1px solid #800080;
}

.employee_notify_task_employee_assignment:hover {
  background-color: rgba(128, 0, 128, 0.7);
}

.oper_notify_msg_ico {
  width: 80px;
  min-height: 100px;
  text-align: center;
  float: left;
}

.oper_notify_msg_ico_href {
  color: #fff;
}

.oper_notify_msg_ico_href:hover {
  color: #fff;
}

.oper_notify_msg_ico_href:visited {
  color: #fff;
}

.oper_notify_msg_ico1 {
  background: url("../picture/phone_green.svg") no-repeat center 0px;
}

.oper_notify_msg_text {
  min-height: 100px;
  height: 100%;
  padding-top: 1px;
}

.oper_notify_msg_text a {
  color: #bdebff;
}

.oper_notify_msg_text a:hover {
  color: #5acbff;
}

.notify_caption {
  font-weight: bold;
  text-transform: uppercase;
}

.notify_caption1 {
  color: #39ff10;
}
/* Container for the attachment list items */
.c_attach_div {
  width: 100%;
  max-width: 700px;
  position: relative;
  margin: 5px 0;
  display: block;
  min-height: 40px;
}

.c_attach_div .c_attach_div_left {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  background-color: #d4d4d4;
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c_attach_div .c_attach_div_right {
  background: #efefef;
  border-radius: 0 6px 6px 0;
  padding: 5px 5px 5px 35px; /* Padding-left accounts for the absolute left div */
  display: block; /* Changed to block for full width */
  min-height: 40px;
  border: 1px solid #c0c0c0;
}

.c_attach_div .c_attach_div_right_new {
  background: var(--main-color-task-div-background);
  border-radius: 0 6px 6px 0;
  padding: 5px;
  display: block;
  min-height: 40px;
  border: 1px solid #c0c0c0;
}

/* The Frame (The upload box itself) */
.c_attach_frame_div {
  border: 1px solid #9c9e9c;
  color: var(--main-color-text);
  background: var(--main-color-task-div-background);
  padding: 8px; /* Slightly more padding for breathing room */
  max-width: 400px;
  box-sizing: border-box;
}

.c_attach_frame_div_top {
  display: flex; /* FLEXBOX fix starts here */
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  min-height: 45px;
  gap: 10px; /* Physical gap so they can't overlap */
}

.c_attach_frame_div_left {
  flex: 1; /* Takes available space */
  min-width: 0; /* Prevents overflow from file name */
}

.c_attach_frame_div_right {
  /* REMOVED: position absolute, top, right, and width 200px */
  display: flex;
  align-items: center;
  gap: 12px; /* Space between button and 'X' */
  flex-shrink: 0; /* Don't let the button get squished */
  text-align: right;
  padding-top: 0; /* Reset previous padding-top */
}

/* Ensure the 'X' icon is easy to click */
.c_attach_frame_div_right a {
  display: inline-flex;
  padding: 5px;
  color: inherit;
}

.c_attach_frame_div_info {
  font-size: 11px;
  height: 17px;
  overflow: hidden;
  color: #666;
}

/* Helper for the small size text */
.info_block {
  font-size: 10px;
  display: block;
  margin-top: 4px;
}

.lk_link_promise_span_info {
  font-size: 7pt;
}

footer {
  padding: 30px 0;
  margin-top: 20px;
  border-top: 2px solid #e0e0e0;
  position: relative;
}

footer #down_copy {
  color: #83898b;
  font-size: 13px;
}

footer #down_copy a {
}

footer #down_support {
  width: 150px;
  height: 18px;
  background: var(--main-color);
  color: var(--main-color-text);
  padding-top: 3px;
  padding-left: 7px;
  padding-bottom: 3px;
  display: block;
  position: absolute;
  text-align: right;
  right: 0;
  top: 25px;
}

footer #down_support a {
  text-decoration: none;
  color: var(--main-color-text);
}

footer #down_support i {
  color: var(--main-color-text);
}

footer #down_support:hover {
  background: #707070;
}

footer #down_support_div {
  width: 500px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background-color: var(--main-color);
  color: var(--main-color-text);
  padding: 5px;
}

footer #down_support_div ul {
  list-style: square inside;
  padding-bottom: 10px;
}

footer #down_support_div ul li {
  margin: 5px;
}

footer #down_support_div a {
  color: var(--main-color-text);
}

footer #down_support_div a:hover {
  color: #c6c3c6;
}

footer #down_support_div h2 {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: -5px;
  margin-bottom: 2px;
}

footer #down_support_div #down_support_cancel {
  position: absolute;
  right: 10px;
  top: 5px;
  padding-right: 20px;
}

footer #down_finishinfo {
  display: block;
  position: absolute;
  right: 0;
  margin-right: 170px;
  padding: 2px;
  font-size: 8pt;
  top: 25px;
  color: #fff;
}

footer #down_finishinfo_full {
  display: block;
  position: relative;
  float: right;
  right: 0;
  margin-right: 170px;
  padding: 2px;
  top: -40px;
  font-size: 9pt;
  background-color: #c6c3c6;
  border: 1px solid #000;
}

footer #down_finishinfo2_full {
  top: 20px;
  padding: 10px;
  position: relative;
  background-color: #c6c3c6;
  border: 1px solid #000;
  width: 400px;
}

/*
Стили для личного кабинета
==================================================================================================================
*/

.lk_menu {
  display: inline-block;
}

.lk_menu_punkt {
  background: rgba(0, 0, 0, 0.15);
  float: left;
  height: 110px;
  width: 220px;
  margin: 20px;
  padding: 10px;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.lk_menu_punkt:hover {
  background: rgba(0, 0, 0, 0.1);
}

.lk_menu_punkt_inside {
  background: var(--main-color-hover);
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  position: relative;
}

.lk_menu_punkt_inside:hover {
  background: var(--main-color);
  cursor: pointer;
}

.lk_menu_punkt_inside_link {
  padding: 5px;
  font-weight: bold;
  font-size: 13pt;
  text-align: center;
  position: relative;
  top: 10px;
}

.lk_menu_punkt_inside_link a {
  color: #fff;
  text-decoration: none;
}

.lk_menu_punkt_inside_link a:hover {
  color: #fff;
}

.lk_link_default {
  width: 48px;
  height: 48px;
  position: relative;
  top: 10px;
  left: 50%;
  margin-left: -24px;
}

.lk_netdata {
  display: inline-block;
  width: 100%;
  height: 190px;
}

.lk_netdata .lk_netdata_text {
  float: left;
}

.lk_netdata .lk_netdata_text_link {
  cursor: pointer;
}

.lk_netdata .lk_netdata_text .lk_netdata_text_link .lk_netname {
  position: relative;
  top: 15px;
  height: 40px;
  font-weight: bold;
  font-size: 45pt;
  color: var(--main-color);
}

.lk_netdata .lk_netdata_text .lk_netdata_text_link .lk_lk_text {
  position: relative;
  top: 10px;
  font-weight: bold;
  color: var(--main-color-task-comment-border);
  height: 20px;
  font-size: 20pt;
}

.lk_netdata .lk_netdata_text .lk_lk_userdata {
  position: relative;
  top: 25px;
}

.lk_netdata .lk_logo {
  width: 128px;
  height: 128px;
  left: 100%;
  top: 10px;
  margin-left: -135px;
  margin-bottom: 20px;
  position: relative;
}

.lk_main_content_inside {
}

#lk_notify_all {
  margin: 20px 0px;
}

#lk_notify_all .lk_notify_custom {
  padding: 15px;
  margin-bottom: 20px;
  background: #d6ffd6;
  border-left: 3px solid #84ff84;
}

#lk_notify_all .lk_notify_custom h3 {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
}

#lk_notify_all .lk_notify_custom .text {
  margin-top: -10px;
  margin-bottom: 10px;
}

#lk_notify_all .lk_notify_custom a {
  color: var(--main-color);
}

#lk_notify_all .lk_notify_custom a:hover {
  color: #666666;
}

.lk_label_top {
  color: #737173;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.link_lk_addcard {
}

.link_lk_online {
}

.link_lk_promise {
}

/* ------------------------------------ */
/* -----------Левое меню------------ */
/* ------------------------------------ */

nav {
}

nav ul {
  list-style: none;
}

nav ul li {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

nav ul li a {
  line-height: 28px;
  color: var(--main-color);
  font-size: 15px;
  text-decoration: none;
  height: 29px;
  display: block;
  padding-left: 30px;
  border-bottom: 1px solid #e0e0e0;
  background-position: 5px 50%;
  background-repeat: no-repeat;
}

nav ul li a span {
  float: right;
  color: #666666;
  font-size: 13px;
  margin-right: 10px;
}

nav ul li a .span_second {
  float: right;
  color: var(--main-color);
  font-size: 13px;
  margin-right: 20px;
}

.nav_short {
  position: absolute;
  width: 30px;
  border-right: 1px solid #e7e3e7;
  overflow: hidden;
}

.nav_short span {
  display: none;
}

#mywork_blink {
  color: #f00;
  font-weight: bold;
}

nav ul li a:hover {
  background-color: #f2f5f5;
  color: #666666;
}

nav ul li ul {
  padding-left: 30px;
}

nav ul li ul li {
  list-style: square;
  color: var(--main-color-left-menu-icon);
}

nav ul li ul li:hover {
  color: #9c9e9c;
}

nav ul li ul li a {
  line-height: 18px;
  color: var(--main-color);
  font-size: 15px;
  text-decoration: none;
  height: 100%;
  display: block;
  padding-left: 10px;
  border-bottom: none;
}

nav ul li ul li a:hover {
  background: none;
  text-decoration: underline;
}

nav ul li:hover ul {
}

nav ul li.active a {
  background-color: #0088d1;
  color: #fff;
  border: none;
  background-position: 5px 50%;
  background-repeat: no-repeat;
}

nav ul li a.i0 {
  cursor: pointer;
}

.paging {
  margin: 20px 0px;
}

.paging .current {
  padding: 5px;
  border: 1px solid #dadada;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  padding: 3px 10px;
  height: 20px;
  margin-left: -4px;
}

.paging .links {
  display: inline;
  margin-left: 10px;
  padding: 5px;
}

.paging .links a {
  border: 1px solid #dadada;
  font-weight: bold;
  font-size: 13px;
  display: inline-block;
  padding: 3px 10px;
  height: 20px;
  margin-left: -4px;
}

.paging .links a:hover {
  background: #f6f6f6;
  color: #000;
}

.paging .links a:last-child {
}

.paging .links a.left {
  margin-bottom: -11px;
}

.paging .links a.left:hover {
  margin-bottom: -11px;
}

.paging .links a.right {
  margin-bottom: -11px;
}

.page-right {
}

.calendar_all {
  vertical-align: top;
}

.calendar_all td {
  padding: 5px;
}

.calendar_all .calendar_header .current_date {
  background: var(--main-color);
  color: #fff;
}

.calendar_all .calendar_header .current_date a {
  color: #fff;
}

.calendar_all .calendar_item_hour {
  width: 40px;
  text-align: right;
  border-right: 1px dashed #d6d7d6;
  border-bottom: 1px solid #d6d7d6;
}

.calendar_all .calendar_item_element {
  vertical-align: top;
  border-right: 1px dashed #d6d7d6;
  border-bottom: 1px solid #d6d7d6;
}

.calendar_all .calendar_item_element_hover:hover {
  background: #eff7ff;
}

.calendar_all .item .current_date {
  background-color: #effbff;
  border-right: 1px solid var(--main-color);
  border-left: 1px solid var(--main-color);
}

.calendar_all .item .current_date_doing {
  background-color: #effbff;
  border-right: 1px solid var(--main-color);
  border-left: 1px solid var(--main-color);
}

.calendar_all .item .current_date_doing:hover {
  background-color: #bdefff;
}

.calendar_all .item .current_hour {
  text-decoration: none;
  padding-left: 20px;
}

.calendar_header_date {
  padding: 10px;
  border-bottom: 3px solid #cacaca;
}

.calendar_all .item .current_date_hour {
  border: 3px dotted var(--main-color);
}

.calendar_all .item .current_date_hour2 {
  background: #effbff;
}

.calendar_all .item .current_date_hour2_hover {
  background: #effbff;
}

.calendar_all .item .current_date_hour2_hover:hover {
  background: #eff7ff;
}

.calendar_all .calendar_item_element .busy_hour {
  text-align: center;
  font-weight: bold;
  border: #c0c0c0 solid 1px;
}

.calendar_all .calendar_item_element .work_hour {
  /* background: #FFFFDE; */
  border: #ff8000 solid 3px;
  margin-bottom: 1px;
  padding: 3px;
}

.calendar_all .calendar_item_element .doing_hour {
  border: #84f784 solid 3px;
  font-style: italic;
  padding-right: 16px;
  margin-bottom: 1px;
  padding: 3px;
}

.calendar_all .calendar_item_element .putback_hour {
  border: #000 solid 2px;
  font-style: italic;
  padding-right: 16px;
  margin-bottom: 1px;
  padding: 3px;
  background-color: #c0c0c0;
  color: #000;
}

.calendar_all .calendar_day_col {
  width: 13.5%;
}

#top_topline_current {
  position: fixed;
  width: 100vw;
  height: 40px;
  background: -moz-linear-gradient(left, var(--main-color), #848284 100%);
  background: -webkit-linear-gradient(left, var(--main-color), #848284 100%);
  background: -o-linear-gradient(left, var(--main-color), #848284 100%);
  background: -ms-linear-gradient(left, var(--main-color), #848284 100%);
  background: linear-gradient(to right, var(--main-color), #848284 100%);
  top: 0;
  left: 0;
  z-index: 900;
}

#top_topline_plan {
  position: fixed;
  width: 100vw;
  height: 40px;
  background: -moz-linear-gradient(left, var(--main-color), #848284 100%);
  background: -webkit-linear-gradient(left, var(--main-color), #848284 100%);
  background: -o-linear-gradient(left, var(--main-color), #848284 100%);
  background: -ms-linear-gradient(left, var(--main-color), #848284 100%);
  background: linear-gradient(to right, var(--main-color), #848284 100%);
  top: 0;
  left: 0;
  z-index: 900;
}

#top_topline_all {
  position: fixed;
  width: 100vw;
  height: 40px;
  background: -moz-linear-gradient(left, var(--main-color), #848284 100%);
  background: -webkit-linear-gradient(left, var(--main-color), #848284 100%);
  background: -o-linear-gradient(left, var(--main-color), #848284 100%);
  background: -ms-linear-gradient(left, var(--main-color), #848284 100%);
  background: linear-gradient(to right, var(--main-color), #848284 100%);
  top: 0;
  left: 0;
  z-index: 900;
}

#top_userbar {
  height: 40px;
  line-height: 40px;
  background: var(--main-color);
  color: #fff;
  position: relative;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1400px;
}

#top_userbar1 {
  height: 40px;
  line-height: 40px;
  background: #848284;
  color: #fff;
  position: relative;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1400px;
}

#top_userbar2 {
  height: 40px;
  line-height: 40px;
  color: #fff;
  position: relative;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1400px;
}

#top_userbar_current {
  height: 40px;
  line-height: 40px;
  color: #fff;
  position: relative;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

#top_userbar_plan {
  height: 40px;
  line-height: 40px;
  color: #fff;
  position: relative;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

#top_userbar_all {
  height: 40px;
  line-height: 40px;
  color: #fff;
  position: relative;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

#top_search {
  width: 250px;
  margin-left: 10px;
}

#top_search #top_field {
  color: #83898b;
  font-size: 13px;
  height: 23px;
  line-height: 23px;
  border: none;
  outline: none;
  font-family: "Myriad pro", Tahoma, Geneva, Helvetica, sans-serif;
}

#top_search #top_button {
  width: 28px;
  height: 23px;
  background: url("../picture/search_gray.svg") 50% 50% no-repeat #f2f5f5;
  cursor: pointer;
  border: none;
}

#top_search input,
#top_search button {
  vertical-align: middle;
}

#top_search #top_button:hover {
  background: url("../picture/search_blue.svg") 50% 50% no-repeat #f2f5f5;
}

#button_go_task,
#button_go_device,
#button_go_device_inv,
#button_go_inventory {
  width: 28px;
  height: 23px;
  background: url("../picture/search_gray.svg") 50% 50% no-repeat #f2f5f5;
  cursor: pointer;
  border: none;
  margin-top: 4px;
  right: 0;
}

#button_go_task:hover,
#button_go_device:hover,
#button_go_device_inv:hover,
#button_go_inventory:hover {
  background: url("../picture/search_blue.svg") 50% 50% no-repeat #f2f5f5;
}

#top_links {
  display: flex;
  gap: 15px;
  list-style: none;
  margin-left: auto;
  /* push links to right */
  align-items: center;
}

#top_links li {
  display: inline-block;
  border-left: 1px solid #195f84;
  height: 100%;
  text-align: center;
  padding-left: 10px;
}

#top_links li:first-child {
  border: none;
}

#top_links li a {
  color: #fff;
  text-align: center;
}

#top_links li a:hover {
  color: #dedfde;
}

#top_links li #top_region {
  border-bottom: 1px dashed;
}

#region_select {
  background-color: var(--main-color);
  border: 1px solid #e0e0e0;
  margin-left: -50px;
  padding-left: 25px;
}

#region_select ul {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px;
  margin-left: -15px;
  list-style: square outside;
  color: #fff;
}

#region_select li {
  border: none;
  display: list-item;
  text-align: left;
}

#top_find_result {
  background-color: var(--main-color);
  color: #fff;
  border: 1px solid #e0e0e0;
  position: absolute;
  line-height: 23px;
  min-width: 250px;
  z-index: 99999;
  position: absolute;
}

#top_find_result a {
  color: #fff;
}

#top_find_result a:hover {
  color: #dedfde;
}

#top_find_result ul {
  border-bottom: 1px solid #e0e0e0;
  padding-right: 5px;
  margin-left: 0px;
  list-style: square inside;
  color: #fff;
}

#top_find_result li {
  border: none;
  display: list-item;
  text-align: left;
  font-size: 12px;
}

#us_label {
  font-weight: bold;
  color: var(--main-color-hover);
  margin-top: 7px;
  margin-right: 7px;
  font-size: 28pt;
  height: 32px;
  width: 154px;
}

/* ~~ этот контейнер фиксированной ширины окружает остальные DIV ~~ */
#page_container {
  max-width: 1400px;
  margin: 0 auto;
  /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет */
  padding: 0 20px;
  position: relative;
  margin-top: 60px;
  /* border: 3px solid #f00; */
}

#page_container314 {
  position: relative;
  margin-top: 60px;
  padding: 25px;
  padding-left: 350px;
  /* can keep this if needed */
  max-width: 100vw;
  /* ensures container never exceeds viewport */
  box-sizing: border-box;
  /* include padding in max-width calculation */
  overflow-x: hidden;
  /* prevents horizontal overflow */
  word-wrap: break-word;
  /* breaks long words/URLs inside */
}

/* Optional: make child elements responsive */
#page_container314 > * {
  max-width: 100%;
  /* child elements cannot exceed container width */
  box-sizing: border-box;
}

.modeTypeall a,
.modeTypeall a:visited,
.modeTypeall a:hover,
.modeType a,
.modeType a:visited,
.modeType a:hover {
  text-decoration: none;
  color: var(--main-color);
}

.modeTypeplan a,
.modeTypeplan a:visited,
.modeTypeplan a:hover {
  text-decoration: none;
  color: #848284;
}

#menuTopUsText {
  font-size: 33pt;
  margin-top: 7px;
  margin-left: 3px;
}

#menuUsVersion {
  font-size: 9pt;
  margin-top: 9px;
  margin-left: 5px;
}

#menuUsIsPlanned {
  color: #f00;
  font-weight: bold;
  padding-left: 5px;
}

#menuUsNetwork {
  margin-top: 9px;
  margin-bottom: -5px;
  font-size: 12pt;
  font-weight: bold;
  font-style: italic;
  padding-left: 5px;
}

.div_razdel {
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
  text-transform: uppercase;
}

#popup {
  background-color: var(--main-color-body-background);
  position: fixed;
  top: 45px;
  left: 50%;
  margin-left: -150px;
  width: 220px;
  height: 39px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  padding: 10px;
  padding-left: 80px;
  border: 3px solid var(--main-color);
  font-size: 17px;
  padding-top: 5px;
  padding-bottom: 20px;
}

#notifyDivIcon {
  position: fixed;
  top: 60px;
  left: 50%;
  margin-left: -137px;
  z-index: 1010;
  font-size: 50px;
}

#popup_error {
  background-color: #fff;
  position: fixed;
  top: 45px;
  left: 50%;
  width: 220px;
  height: 39px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  padding: 10px;
  padding-left: 80px;
  margin-left: -150px;
  border: 3px solid #0088d1;
  font-size: 17px;
  padding-top: 5px;
  padding-bottom: 20px;
}

#main_content {
  /* border: 3px solid #0ff; */
}

/* 
.main_content_inside {
  min-width: 400px;
} */

.main_content_inside_min {
  padding-top: 10px;
  margin-left: 50px;
}

.main_content_inside_right_aside {
  margin-right: 220px;
}

/* #aside_left {
  float: left;
  width: 250px;
  padding-bottom: 10px;
  margin-right: 40px;
} */

#aside_right {
  padding: 5px;
  width: 200px;
  background: #f7efef;
  border-left: 2px solid #e7e7e7;
  position: absolute;
  top: 0px;
  right: 12px;
}

#top_topinfo {
  width: 100%;
  height: 60px;
  margin-bottom: 45px;
}

#div_contentplace {
  /* этот класс можно поместить в теге <br /> или в пустом блоке DIV в качестве конечного элемента, следующего за последним обтекаемым DIV (внутри #container), если overflow:hidden удалено в .container */
}

#div_empty {
  clear: both;
  background-color: #0f0;
  height: 0;
  line-height: 0;
  font: 1px;
}

.div_debug_header {
  margin-top: 50px;
  margin-left: 10px;
  font-weight: bold;
}

.div_debug {
  background-color: #cacaca;
  border: 2px solid #000;
  margin: 10px;
  padding: 2px;
}

.div_sql_debug {
  background-color: #fff;
  border: 1px solid #000;
  margin: 10px;
  padding: 2px;
}

.debug_greentext {
  color: #008000;
  font-weight: bold;
}

.debug_boldtext {
  font-weight: bold;
}

/* Диалоговое аякс-окно */
#dialog-overlay {
  width: 100%;
  height: 100%;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  background: #000;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 3000;
  display: none;
}

#dialogConfirmOverlay {
  width: 100%;
  height: 100%;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  background: #000;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 7000;
  display: none;
}

#dialog-box {
  position: fixed;
  z-index: 5000;
  display: none;
  width: 100vw;
  height: 100vh;
}

.dialog-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  justify-content: center;
  /* horizontal */
  align-items: center;
  /* vertical */
  padding: 10px;
  /* small padding for mobile */
  box-sizing: border-box;
  overflow: auto;
  display: flex;
}

#dialog-box .dialog-content {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  max-height: 60dvh;
  max-width: 95vw;
  width: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 15px;
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}
/* Target both dialog boxes to be safe */
/* Establishes a baseline width, but spares the buttons from stretching */
#dialog-box
  .dialog-content
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(
    [type="checkbox"]
  ):not([type="radio"]),
#dialog-box .dialog-content textarea,
#dialog-box .dialog-content select,
#dialogConfirmbox
  .dialogConfirmContent
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(
    [type="checkbox"]
  ):not([type="radio"]),
#dialogConfirmbox .dialogConfirmContent textarea,
#dialogConfirmbox .dialogConfirmContent select {
  width: 100%;
  max-width: 100% !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Specifically force textareas to size naturally without breaking out */
#dialog-box .dialog-content textarea,
#dialogConfirmbox .dialogConfirmContent textarea {
  width: 100% !important;
  height: 120px !important;
  max-width: 100% !important;
  box-sizing: border-box;
  resize: vertical;
}

/* Target your text inputs to destroy the 'size' attribute, excluding buttons */
#dialog-box
  .dialog-content
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(
    [type="checkbox"]
  ):not([type="radio"]),
#dialogConfirmbox
  .dialogConfirmContent
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(
    [type="checkbox"]
  ):not([type="radio"]) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* Specifically target textareas to override cols-induced width */
#dialog-box .dialog-content textarea {
  width: auto;
  /* allows textarea to size naturally */
  max-width: 100% !important;
  /* caps width to dialog’s inner width */
}
/* --- DIALOG SPECIFIC ROW STYLING --- */

#dialog-box .dialog-content .div_space {
  padding: 10px 5px;
  font-size: 14px;
  font-weight: bold;
}

#dialog-box .dialog-content .div_space2 {
  padding: 8px 5px;
  margin-bottom: 2px;
  border-bottom: 1px solid #eaeaea;
  display: flex; /* Aligns checkbox and text side-by-side */
  align-items: center; /* Centers them vertically */
  font-size: 14px;
  line-height: 1.4;
  transition: background-color 0.2s ease;
}

#dialog-box .dialog-content .div_space2:hover {
  background-color: #f0f4f8; /* Highlight on hover for readability */
}

/* Force the checkbox to behave inside the flex container */
#dialog-box .dialog-content .div_space2 input[type="checkbox"] {
  width: auto !important; /* Ensures the 100% width rule doesn't override */
  margin-right: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  cursor: pointer;
  flex-shrink: 0; /* Stops the checkbox from getting squished by long names */
}
#dialog-box .dialog_header {
  background: var(--main-color);
  color: #fff;
  padding: 10px 15px;
  margin: -15px -15px 15px -15px;
  width: auto;
  box-sizing: border-box;
  cursor: default;
  /* remove draggable cursor */
}

#dialog-box .deleteDialog {
  background: #f00;
  color: #fff;
  padding: 10px 15px;
  margin: 15px -15px -15px -15px;
  width: auto;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}

#dialog-box ul {
  padding: 10px;
  margin-left: 15px;
  list-style: square inside;
}

#dialog-box li {
  padding: 5px 0;
  text-align: left;
}

#dialogConfirmbox {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #fff;
  position: fixed;
  z-index: 10000;
  display: none;
}

#dialogConfirmbox .dialogConfirmContent {
  margin: 10px;
}

#dialogConfirmbox .dialog_header {
  background: var(--main-color);
  width: 100%;
  margin: -10px;
  padding: 10px;
  color: #fff;
  cursor: move;
}

#dialogConfirmbox .deleteDialog {
  background: #f00;
  width: 100%;
  margin: -10px;
  padding: 10px;
  color: #fff;
  cursor: move;
}

#dialogConfirmbox ul {
  padding: 10px;
  margin-left: -15px;
  list-style: square inside;
}

#dialogConfirmbox li {
  padding: 5px;
  border: none;
  display: list-item;
  text-align: left;
}

.div_map_equip {
  position: absolute;
  right: 10px;
  top: 80px;
  border: 1px solid #848284;
  max-width: 50%;
  max-height: 80%;
  background: #efefef;
  padding: 5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.div_map_equip .window_header {
  background: var(--main-color);
  width: 100%;
  margin-left: -7px;
  margin-top: -7px;
  padding: 10px 10px 10px 4px;
  color: #fff;
}

#region_select_id {
  position: absolute;
}

.div_table {
  border: 0px solid black;
  overflow: visible;
}

.div_table .a_cell {
  color: #000;
  text-decoration: none;
}

.div_table .a_cell:hover,
a:active,
a:focus {
  text-decoration: underline;
}

.div_table td {
  padding: 3px;
  margin: 0px;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.div_table .first_td {
  border-left: 1px solid black;
}

.div_table .last_tr {
  border-bottom: 1px solid black;
}

.div_table .total_tr {
  background: #c6c3c6;
}

.div_table .total_td {
  background: #dedbde;
}

.div_table .td_small {
  font-size: smaller;
}

.div_ipnet {
  margin-bottom: 8px;
  padding: 6px;
  background: #f4efef;
  border-left: 3px solid #008ed6;
  padding-left: 5px;
  font-size: 15px;
  font-weight: bold;
}

.div_ipnet_hide {
  margin-bottom: 8px;
  padding: 6px;
  background: #adadad;
  padding-left: 5px;
  font-size: 15px;
  font-weight: bold;
  width: 653px;
  color: #fff;
}

.div_ipnet_hide a {
  color: #fff;
}

.div_courier {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  font-family: "Courier", "sans-serif", Tahoma, Geneva, Helvetica;
  border: 1px solid #000;
}

#map_add_obj_id {
  position: fixed;
  top: 0px;
  background: #fff;
  padding: 10px;
  left: 50%;
  margin-left: -200px;
  z-index: 20;
}

#map_add_obj_id .dialog_header {
  background: var(--main-color);
  width: 100%;
  margin: -10px;
  padding: 10px;
  color: #fff;
}

.att_blink {
  background-color: #fff;
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #000;
  color: #f00;
  font-size: 8pt;
}

.comment_0 {
}

.comment_1 {
  background-color: #f7f7f7;
}

.comment_author {
  color: #8482ff;
}

#task_apart_used_info2_id {
  margin-top: 10px;
  padding: 3px;
  border: 6px solid #800000;
  border-radius: 6px 6px 6px 6px;
  background-color: #ffd7d6;
  font-weight: bold;
}

#task_apart_task_yet_info2_id {
  margin-top: 10px;
  padding: 3px;
  border: 6px solid #4b799b;
  border-radius: 6px 6px 6px 6px;
  background-color: #ddf4ff;
}

#task_building_task_yet_info_id {
  margin-top: 10px;
  padding: 3px;
  border: 6px solid #884a48;
  border-radius: 6px 6px 6px 6px;
  background-color: #f3d8d2;
}

#filter_button_id {
  width: 150px;
}

.table-wrapper {
  overflow-x: scroll !important;
}

.table-wrapper .table_table {
  min-width: 700px !important;
}

.table_table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

.dialog-content .table_table {
  min-width: 0px !important;
}

.table_table td,
.table_table th {
  padding: 10px;
  text-align: left;
  word-wrap: break-word;
}

.table_legend {
  font-weight: bold;
  background: none;
  text-align: center;
  vertical-align: middle;
  font-size: 14px !important;
}

.table_legend td {
  border-bottom: 3px solid #d4d4d4 !important;
  padding: 10px 5px;
  margin: 1px 0px;
}

.table_item {
  background: none;
  font-size: 13px;
  vertical-align: middle;
}

.table_item td {
  border-bottom: 1px solid #dadada;
  padding: 6px 6px;
  margin: 1px 0px;
}

.table_item_white {
  background: var(--main-color-body-background);
  color: var(--main-color-text);
}

.table_item_white:hover {
  background: #ebeaea;
  color: var(--main-color-table-hover);
}

.table_item_gray {
  background: var(--main-color-body-background-second);
}

.table_item_gray:hover {
  background: #ebeaea;
  color: var(--main-color-table-hover);
}

.table_item_total {
  background: #c6c3c6;
  font-weight: bold;
}

* html #login_page {
  /* хак для IE6 */
  background: #0f0;
}

#login_page #login_page_toplogo {
  width: 100%;
  height: 301px;
  background: url("../picture/transparent_logo.png") top no-repeat;
}

* html #login_page #login_page_toplogo {
  /* хак для IE6 */
  background: #072455;
}

#login_page #login_page_info {
  width: 600px;
  left: 50%;
  top: 50%;
  margin-left: -295px;
  margin-top: -350px;
  position: absolute;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
  padding: 8px;
}

#login_page #login_page_info h1 {
  font-size: 18px;
  margin-bottom: 15px;
}

#login_page #login_page_alert {
  width: 360px;
  left: 50%;
  top: 50%;
  margin-left: -175px;
  margin-top: -220px;
  position: fixed;
  background: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

#login_page #login_page_alert_inside {
  background: #fff;
  position: relative;
  background-color: #fff;
  padding: 20px;
  padding-left: 80px;
  font-size: 17px;
}

#login_page #login_page_pda {
  width: 64px;
  height: 64px;
  display: block;
  position: fixed;
  bottom: 60px;
  /*left: 50%;
    margin-left: -32px;
    */
  right: 0;
}

#login_page #login_page_form {
  width: 100%;
  max-width: 360px;
  left: 50%;
  top: 50%;
  margin-left: -180px;
  margin-top: -120px;
  position: absolute;
  background: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
  padding: 15px;
}

#login_page #login_page_form #divForm {
  background: #c4ccd4;
  padding: 15px;
  padding-top: 35px;
  position: relative;
}

#login_page #login_page_form .title {
  margin-bottom: 15px;
  font-size: 21px;
}

#login_page #login_page_form .field {
  width: 100%;
  max-width: 310px;
  height: 26px;
  line-height: 26px;
  padding: 0px 8px;
  font:
    13px/25px "Myriad pro",
    Tahoma,
    Geneva,
    sans-serif;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6);
  background: #fff;
  border: none;
  margin-bottom: 10px;
}

#login_page #login_page_form .button {
  font-size: 15px;
  height: 30px;
  margin-top: 5px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background: var(--main-color);
  color: #fff;
  border: 0px;
  outline: 0px;
  cursor: pointer;
}

#login_page #login_page_form .button:hover {
  background: var(--main-color-button-hover);
}

#login_page #login_page_form #link_cabinet {
  position: absolute;
  right: 3px;
  bottom: 30px;
  color: var(--main-color);
  padding-right: 20px;
}

#login_page #login_page_form #link_cabinet:hover {
  color: #666666;
}

#login_page_footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.2);
  height: 50px;
  min-width: 1000px;
}

* html #login_page_footer {
  /* хак для IE6 */
  background: #001842;
}

#login_page_footer #down_copy {
  position: absolute;
  top: 15px;
  left: 25px;
  color: #fff;
}

#login_page_footer #down_copy a {
  color: var(--main-color);
}

#login_page_footer #down_copy a:hover {
  color: #666666;
}

#to_top {
  position: fixed;
  bottom: 100px;
}

#to_top a {
  width: 72px;
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #bbb;
}

#to_top a:hover {
  color: var(--main-color);
}

#to_top span {
  width: 72px;
  height: 72px;
  display: block;
  background-color: #ddd;
  color: #a7a7a7;
  padding-top: 25px;
  font-size: 40pt;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}

#to_top a:hover span {
  color: #8fc44b;
  background-color: var(--main-color);
}

#div_failuremsg {
  margin: 10px;
  width: 400px;
  border: 1px solid #000;
}

#div_failuremsg_div {
  padding: 4px;
}

#div_failuremsg_header {
  background-color: var(--main-color);
  color: #fff;
  font-weight: bold;
  padding: 2px;
}

#div_yellow_info {
}

#div_yellow_info .div_info_block {
  padding: 3px;
  background: #ededed;
  border-left: 3px solid #d4d4d4;
  margin-bottom: 5px;
}

#div_yellow_info .div_info_block_advert {
  background: #b0ffb0;
  border-left: 3px solid #008000;
}

#div_yellow_info .div_info_block .caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 2px;
  text-transform: uppercase;
}

#div_yellow_info .div_info_block .text {
}

#div_yellow_info .div_info_block .text span {
  font-weight: bold;
  color: #848284;
}

#div_yellow_info .important {
  background: var(--main-color-yellow-info);
  border-left: 3px solid var(--main-color-yellow-info-border);
}

#div_yellow_info .div_info_block a {
  color: var(--main-color);
}

#div_yellow_info .div_info_block a:hover {
  color: #666666;
}

#div_news {
  margin: 20px 0;
}

#div_news .div_news_block {
  padding: 15px;
  background: #ededed;
  border-left: 3px solid #d4d4d4;
  margin-bottom: 20px;
}

#div_news .div_news_block h3 {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
}

#div_news .div_news_block .text {
  margin-top: -10px;
  margin-bottom: 10px;
}

#div_news .msg_block {
  background: #d6ffd6;
  border-left: 3px solid #84ff84;
}

#div_news .important {
  background: var(--main-color-yellow-info);
  border-left: 3px solid var(--main-color-yellow-info-border);
}

#div_news .high {
  background: #f00;
  color: #fff;
  border-left: 3px solid #fff;
}

.div_alert_news {
  padding: 15px;
  border-left: 3px solid #d4d4d4;
  margin-bottom: 20px;
  background: #d20000;
  border-left: 3px solid #ff8080;
  min-height: 500px;
  color: #fff;
}

.div_alert_news a {
  color: #ffffd5;
}

.div_alert_news a:hover {
  color: #ffff04;
}

#div_news .div_news_block a {
  color: var(--main-color);
}

#div_news .div_news_block a:hover {
  color: #666666;
}

.map_frame {
  border: 5px solid rgba(198, 195, 198, 0.5);
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 10px;
}

#scheme_menu_panel {
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #000;
}

#map_edit_panel {
  height: 30px;
  position: fixed;
  top: 39px;
  left: 0;
  width: 100%;
  padding: 5px;
  background: var(--main-color-hover);
  color: #fff;
  z-index: 10;
}

#map_edit_panel a {
  text-decoration: none;
}

#map_edit_panel .obj-button {
  margin-left: 5px;
  margin-top: -3px;
  margin-right: 5px;
  padding: 3px;
  background: #d6d7d6;
  border: 1px solid #9c9a9c;
  float: left;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

#map_edit_panel .obj-button:hover {
  background: #9c9a9c;
}

#map_edit_panel .obj-button a {
  color: #000;
}

#map_edit_panel .obj-button2 {
  margin-left: 5px;
  margin-top: -3px;
  margin-right: 5px;
  padding: 3px;
  padding-left: 7px;
  background: #d6d7d6;
  border: 1px solid #9c9a9c;
  float: left;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

#map_edit_panel .obj-button2:hover {
  background: #9c9a9c;
}

#map_edit_panel .obj-button2 a {
  color: #000;
}

#map_menu_panel {
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px;
}

#map_menu_panel .menu_down {
  margin-left: 5px;
  margin-top: 2px;
  margin-right: 5px;
  padding: 3px;
  border: 1px solid #9c9a9c;
  float: left;
  background-color: #d6d7d6;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

#map_menu_panel .menu_down:hover {
  background-color: #9c9a9c;
}

#map_menu_panel .menu_down a {
  color: #000;
  text-decoration: none;
}

.map_menu_down {
  display: inline;
  float: left;
  height: 100%;
  width: 16px;
  background-color: #fff;
  padding-left: 5px;
  padding-top: 1px;
  margin-top: 0px;
}

.map_menu_down:hover {
  background-color: #cacaca;
}

.button_inside {
  display: inline;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
  width: 32px;
  height: 100%;
}

.unselected_button {
  cursor: pointer;
  margin-left: 5px;
  margin-top: 2px;
  margin-right: 5px;
  border: 1px solid #9c9a9c;
  float: left;
  border-radius: 3px;
  background-color: #d6d7d6;
  height: 23px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

.unselected_button:hover {
  background: #9c9a9c;
}

.unselected_button div {
  margin-top: 2px;
}

.selected_button {
  float: left;
  color: #fff;
  background-color: #b5d3ff;
  border: 1px solid var(--main-color);
  border-radius: 3px;
  height: 28px;
  margin-top: 0px;
  margin-left: 5px;
  margin-right: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

.selected_button:hover {
  background: #73aaff;
}

.selected_button div {
  margin-top: 5px;
}

.selected_layer {
  font-weight: bold;
  margin-top: 1px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px;
  float: left;
  color: #fff;
  background: var(--main-color);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

.selected_layer:hover {
  background: #4a7dd6;
}

.selected_layer a {
  color: #fff;
  text-decoration: none;
}

.unselected_layer {
  margin-left: 5px;
  margin-top: 2px;
  margin-right: 5px;
  padding: 3px;
  background: #d6d7d6;
  border: 1px solid #9c9a9c;
  float: left;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

.unselected_layer:hover {
  background: #9c9a9c;
}

.unselected_layer a {
  color: #000;
  text-decoration: none;
}

.unselected_layer2 {
  margin-top: 1px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px;
  float: left;
  background: #d6d7d6;
  border: 1px solid #9c9a9c;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

.unselected_layer2:hover {
  background: #9c9a9c;
}

.unselected_layer2 a {
  color: #000;
  text-decoration: none;
}

#ttip {
  position: absolute;
  z-index: 999;
  border: 1px solid #111;
  background-color: #eee;
  padding: 5px;
  opacity: 0.85;
}

#ttipNew {
  position: absolute;
  z-index: 999;
  border: 1px solid #111;
  background-color: #eee;
  padding: 5px;
  opacity: 0.85;
  display: none;
  max-width: 400px;
  word-wrap: break-word;
}

.map_toppanel {
  background: var(--main-color);
  width: 100%;
  margin: -10px;
  padding: 10px;
  color: #fff;
}

.map_toppanel a {
  color: #fff;
}

.map_toppanel a:hover {
  color: #dedfde;
}

.j_card_div {
  border: 1px solid var(--main-color-task-comment-border);
  background-color: var(--main-color-task-div-background);
  padding: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
  overflow-y: auto;
}

.j_card_div .div_caption {
  text-align: center;
  background-color: #d6d3d6;
  padding: 5px;
  margin-top: -5px;
  margin-left: -5px;
  margin-right: -5px;
  font-weight: bold;
}

.j_card_div .j_table {
  margin-top: 5px;
  /* width: 100%; */
  font-size: 13px;
  vertical-align: top;
}

.j_card_div .j_table tr {
  height: 25px;
  vertical-align: top;
}

.j_table_td_left {
  text-align: right;
  font-weight: bold;
  width: 100px;
}

.j_table_td_left_na {
  font-weight: bold;
  max-width: 250px;
  /* TT-28086 width: 250px; */
}

.j_card_cur_state {
  text-align: center;
  font-weight: bold;
  font-size: 15pt;
  margin: 8px;
}

.j_button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--main-color-task-comment-border);
  padding-right: 0px;
  padding-left: 9px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
  background-color: #f7f3f7;
  margin: 2px;
  float: left;
}

.j_button:hover {
  background-color: #73aaff;
  border: 1px solid #000084;
  margin: 1px;
  width: 26px;
  height: 26px;
}

.j_button_green {
  background-color: #caffca;
}

.j_button_blau {
  background-color: #c4ecff;
}

.j_button_lock {
  width: 24px;
  height: 24px;
  border: 1px solid #c60000;
  padding-right: 0px;
  padding-left: 9px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
  margin: 2px;
  cursor: help;
  float: left;
}

.j_button_menu_delete {
  background-color: #ffcaca;
}

.j_button_splitter {
  width: 2px;
  height: 24px;
  border: 1px solid var(--main-color-task-comment-border);
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
  background-color: #848284;
  margin: 2px;
  float: left;
}

.j_button_inside {
  width: 24px;
  height: 24px;
  border: 1px solid var(--main-color-task-comment-border);
  padding-right: 0px;
  padding-left: 9px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px 0px 0px 3px;
  -moz-border-radius: 2px 0px 0px 2px;
  -khtml-border-radius: 4px 0px 0px 4px;
  background-color: #f7f3f7;
  margin: 2px 0px 2px 2px;
  float: left;
}

.j_button_inside:hover {
  background-color: #73aaff;
  border: 1px solid #000084;
}

.j_button_down {
  float: left;
  height: 24px;
  width: 15px;
  margin: 2px 2px 2px 0px;
  background-color: #184db5;
  -webkit-border-radius: 0px 3px 3px 0px;
  -moz-border-radius: 0px 2px 2px 0px;
  -khtml-border-radius: 0px 4px 4px 0px;
  padding-right: 0px;
  padding-left: 3px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.j_button_down:hover {
  background-color: #296de7;
}

.j_button_counter {
  float: left;
  height: 24px;
  min-width: 18px;
  margin: 2px 2px 2px 0px;
  background-color: #fff;
  border-right: 1px solid var(--main-color-task-comment-border);
  border-top: 1px solid var(--main-color-task-comment-border);
  border-bottom: 1px solid var(--main-color-task-comment-border);
  border-radius: 3px;
  -webkit-border-radius: 0px 3px 3px 0px;
  -moz-border-radius: 0px 2px 2px 0px;
  -khtml-border-radius: 0px 4px 4px 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 8px;
  padding-bottom: 2px;
  text-align: center;
}

.j_button_counter:hover {
  background-color: #f7f3f7;
}

.j_button_delete:hover {
  background-color: #ffaead;
}

.j_card_comment_div2 {
  border: 1px solid var(--main-color-task-comment-border);
  background-color: var(--main-color-body-background);
  padding: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

.j_card_comment_div {
  border: 1px solid var(--main-color-task-comment-border);
  padding: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.j_card_comment_div span {
  font-size: 12pt;
}

.j_card_comment_div_my {
  background-color: var(--main-color-task-comment-my);
}

.j_card_comment_div_author {
  background-color: var(--main-color-task-comment-author);
}

.j_card_comment_div_all {
  background-color: var(--main-color-task-comment);
}

.j_card_label_div {
  float: left;
  border: 1px solid var(--main-color-task-comment-border);
  padding: 2px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
  margin-bottom: 5px;
  margin-right: 5px;
  background-color: #ceffce;
  cursor: help;
}

.j_mywork_div {
  float: left;
  padding: 2px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 11px;
  margin: 5px;
  padding: 10px;
  min-width: 200px;
  text-align: center;
}

.j_mywork_div_create {
  background-color: #0082c6;
  color: #fff;
  max-width: 200px;
}

.j_mywork_div_watch {
  background-color: #00c742;
  color: #fff;
  max-width: 200px;
}

.j_mywork_div_work {
  background-color: #ff9694;
  color: #fff;
  max-width: 200px;
  line-height: 20px;
}

.j_mywork_div_wo_pers {
  background-color: #000;
  color: #fff;
  max-width: 200px;
}

.j_mywork_div_caption {
  font-size: 17pt;
  font-weight: bold;
}

.j_mywork_div_counter {
  padding-top: 25px;
  padding-bottom: 20px;
  font-size: 21pt;
  font-weight: bold;
  color: #000;
}

.j_mywork_div_counter span {
  background-color: #fff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 6px;
  padding-right: 10px;
  padding-left: 10px;
}

.j_mywork_div_counter span:hover {
  background-color: #f7f3f7;
}

.j_mywork_div_list {
  margin-top: 9px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #000;
  text-align: left;

  background-color: #fff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 6px;
  padding-right: 10px;
  padding-left: 10px;
}

.link_menu_down {
  padding-left: 20px;
}

.input_box {
  color: #000;
  font-size: 14px;
  height: 23px;
  line-height: 23px;
  border: 1px solid var(--main-color-task-comment-border);
  outline: none;
  padding: 0 10px;
  padding-right: 10px;
  font-family: "Myriad pro", Tahoma, Geneva, Helvetica, sans-serif;
}

.input_box:focus {
  background: #f7efef;
  border: 1px solid #808080;
}

.find_box {
  background: url("../picture/search_gray.svg") 100% 45% no-repeat;
}

.find_box:focus {
  background: url("../picture/search_blue.svg") 100% 45% no-repeat;
}

.div_center {
  text-align: center;
}

.div_right {
  text-align: right;
}

.div_bold {
  font-weight: bold;
}

#usersearch {
  height: 38px;
  line-height: 38px;
  width: 100%;
  background: #f4efef;
  position: relative;
  margin: 20px 0px;
}

#usersearch .field {
  width: -webkit-calc(100% - 80px);
  width: -moz-calc(100% - 80px);
  width: calc(100% - 80px);
  margin-left: 15px;
  border: 1px solid #dbd3d3;
  height: 22px;
  line-height: 22px;
  padding: 0px 5px;
}

#usersearch .button {
  width: 40px;
  height: 38px;
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  background: url("../picture/search_white.svg") 50% 50% no-repeat
    var(--main-color);
  border: none;
  outline: none;
  cursor: pointer;
}

#usersearch .button:hover {
  background: url("../picture/search_gray.svg") 50% 50% no-repeat
    var(--main-color);
}

#usersearch .check {
  display: inline-block;
  width: 20%;
  margin-right: 45px;
  margin-left: 15px;
}

#usersearch2 {
  height: 38px;
  line-height: 38px;
  width: 100%;
  background: #f4efef;
  position: relative;
  margin: 20px 0px;
}

#usersearch2 .field {
  width: 500px;
  margin-left: 15px;
  border: 1px solid #dbd3d3;
  height: 22px;
  line-height: 22px;
  padding: 0px 5px;
}

#usersearch2 .button {
  width: 40px;
  height: 38px;
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  background: url("../picture/search_white.svg") 50% 50% no-repeat
    var(--main-color);
  border: none;
  outline: none;
  cursor: pointer;
}

#usersearch2 .button:hover {
  background: url("../picture/search_gray.svg") 50% 50% no-repeat
    var(--main-color);
}

#usersearch2 .check {
  display: inline-block;
  width: 20%;
  margin-right: 45px;
  margin-left: 15px;
}

.j_news2 {
  width: 32px;
  height: 32px;
  margin-left: 5px;
}

.label_wait {
  height: 26px;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  background-color: #d5d500;
  padding-left: 13px;
  padding-top: 7px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  color: #000;
}

.label_stop {
  height: 26px;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  background-color: #ffd7d6;
  padding-left: 13px;
  padding-top: 7px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  color: #5a0000;
}

.label_alert {
  margin-top: 10px;
  margin-bottom: 10px;
  background: #ffd7d6;
  padding-left: 33px;
  padding-top: 7px;
  width: 100%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  color: #5a0000;
}

.label_error {
  font-size: 15px;
  margin: 10px;
  background-color: #ffd7d6;
  padding: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  color: #5a0000;
}

.morris-hover {
  position: absolute;
  z-index: 1000;
}

.morris-hover.morris-default-style {
  border-radius: 10px;
  padding: 6px;
  color: #666;
  background: rgba(255, 255, 255, 0.8);
  border: solid 2px rgba(230, 230, 230, 0.8);
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
}

.morris-hover.morris-default-style .morris-hover-row-label {
  font-weight: bold;
  margin: 0.25em 0;
}

.morris-hover.morris-default-style .morris-hover-point {
  white-space: nowrap;
  margin: 0.1em 0;
}

.graph_div {
  border: 1px solid #c0c0c0;
}

.graph_caption {
  font-weight: bold;
  background: #dedbde;
  padding-left: 5px;
  padding-right: 5px;
}

.div_sortable_class {
  cursor: pointer;
  margin-top: 5px;
  padding: 5px;
  width: 50%;
  background: #f6f6f6;
  color: #000;
}

.div_sortable_class:hover {
  background: #ededed;
  cursor: crosshair;
}

.div_scheme_port {
  position: absolute;
  font-size: 9pt;
  font-family: Courier, Tahoma, Geneva, Helvetica, sans-serif;
}

.div_scheme_port2 {
  position: absolute;
  font-size: 7pt;
  font-family: Courier, Tahoma, Geneva, Helvetica, sans-serif;
}

.div_scheme_att {
  position: absolute;
  font-size: 7pt;
  background-color: #fff;
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #000;
  color: #00f;
  font-family: Courier, Tahoma, Geneva, Helvetica, sans-serif;
}

.div_scheme_att_red {
  position: absolute;
  font-size: 7pt;
  background-color: #fff;
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #000;
  color: #f00;
  font-family: Courier, Tahoma, Geneva, Helvetica, sans-serif;
}

.div_scheme_att_pg {
  position: absolute;
  font-size: 7pt;
  background-color: #f7f700;
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #000;
  color: #f00;
  font-family: Courier, Tahoma, Geneva, Helvetica, sans-serif;
}

.div_scheme_caption {
  position: absolute;
  font-size: 8pt;
  line-height: 1.35;
  text-align: center;
  width: 190px;
  font-family: Courier, Tahoma, Geneva, Helvetica, sans-serif;
}

.div_scheme_link {
  color: #000;
  text-decoration: none;
}

.div_scheme_link:hover {
  color: var(--main-color);
}

.div_stat_select_kat {
  text-align: right;
  width: 100%;
}

.table_result_class {
  background: #c6c3c6;
  font-weight: bold;
  text-align: right;
}

.div_task_comment {
  overflow: hidden;
  max-height: 105px;
  word-wrap: break-word;
}

.div_task_comment_print {
  overflow: hidden;
  max-height: 1050px;
  word-wrap: break-word;
}

.link_leftmenu_j_count {
  text-decoration: underline;
  font-size: 16px;
}

.link_leftmenu_j_count:hover {
  color: #a5a6ff;
}

.sms_block_div {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background: #dedbde;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
}

.cursor_pointer {
  cursor: pointer;
}

.link_dashed,
.link_dashed:hover,
.link_dashed:active,
.link_dashed:focus {
  text-decoration: none;
}

.link_dashed span {
  border-bottom: 1px dashed;
  text-decoration: none;
}

.link_dashed2,
.link_dashed2:hover,
.link_dashed2:active,
.link_dashed2:focus {
  text-decoration: none;
  border-bottom: 1px dashed;
  text-decoration: none;
}

.link_none,
.link_none:hover,
.link_none:active,
.link_none:focus {
  text-decoration: none;
}

.span_news_counter {
  background-color: #0082c6;
  padding-left: 4px;
  margin-top: 1px;
  padding-right: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 9pt;
  cursor: pointer;
}

#span_mywork_counter_id {
  padding-left: 4px;
  margin-top: 1px;
  padding-right: 4px;
  background-color: #f00;
  color: #fff;
  font-weight: bold;
  font-size: 9pt;
  cursor: pointer;
}

.act_color {
  padding: 0px;
  width: 1px;
  position: relative;
}

.act_color .arrow {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: -5px;
}

.bad {
  background: #e2001a;
}

.bad .arrow {
  border-color: transparent transparent transparent #e2001a;
}

.ok {
  background: #0aa41c;
}

.gray_column {
  background: #cacaca;
}

.ok .arrow {
  border-color: transparent transparent transparent #0aa41c;
}

#span_all_counter_id {
  background-color: #008200;
  padding-left: 4px;
  margin-top: 1px;
  padding-right: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 9pt;
  cursor: pointer;
}

.day_delimiter {
  height: 15px;
}

.scheme_oval {
  float: left;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  -moz-border-radius: 100px / 80px;
  -webkit-border-radius: 100px / 80px;
  border-radius: 100px / 80px;
  border-color: #000;
  border-style: solid;
  border-width: 2px;
}

.scheme_line {
  float: left;
  background-color: #000;
  width: 10px;
  height: 20px;
}

.table_table a {
  position: relative;
  z-index: 1;
}

.table_table a.c_t2_rowlink {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0px;
}

.table_table a.c_t2_rowlink:hover {
  background-color: #cacaca;
  opacity: 0.1;
}

.working_menu_change_state {
  text-align: center;
  padding-bottom: 5px;
}

.working_menu_change_state .button_state {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  background-color: #2175a5;
  border: 1px solid var(--main-color);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 4px;
}

.working_menu_change_state .button_state a {
  color: #fff;
}

.working_menu_change_state .button_state:hover {
  background-color: #73aaff;
}

.red_link {
  padding-left: 4px;
  margin-top: 1px;
  padding-right: 4px;
  background-color: #f00;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
}

.red_link:hover {
  color: #cacaca;
}

.red_link2 {
  color: #f00;
  text-decoration: none;
  font-weight: bold;
}

.white_div {
  background-color: #fff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 6px;
  padding: 10px;
}

.current_date_free_doing {
  cursor: pointer;
}

.current_date_free_doing:hover {
  background-color: #bdefff;
}

.current_date_red {
  background-color: #ffebef;
  cursor: not-allowed;
}

.current_date_yellow {
  background-color: #ffffb7;
}

/* ОБЩИЕ ПАРАМЕТРЫ */

.box_border {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.code {
  font-family: monospace;
  font-weight: 600;
}

.sup {
  margin-top: 16px;
  font-size: 0.9em;
  font-style: italic;
}

.right {
  margin-left: auto;
  margin-right: 0px;
}

/*----------------------------------------*/
/* Разметка для блоков контакт-центра */
/*  Общие параметры (строка для блоков кнопок) */
.row {
  height: 4em;
  margin-left: -16px;
  margin-right: -16px;
  line-height: 1.2em;
}

.row:before {
  content: " ";
  display: block;
}

.row:after {
  content: " ";
  clear: both;
}

/* Блоки кнопок разных размеров внутри строки */
/* Цифра - количество ячеек, которые занимает блок по ширине в 12 ячеечной сетке */
.block-6 {
  width: 45%;
  float: left;
  text-align: center;
  padding: 0 16px;
}

.block-5 {
  width: 41.5%;
  float: left;
  text-align: center;
  padding: 0 16px;
}

.block-4 {
  width: 30%;
  float: left;
  text-align: center;
  padding: 0 16px;
}

.block-3 {
  width: 22%;
  float: left;
  text-align: center;
  padding: 0 16px;
}

.block-2 {
  width: 16.6%;
  float: left;
  text-align: center;
  padding: 0 16px;
}

.block-1 {
  width: 8.3%;
  float: left;
  text-align: center;
  padding: 0 16px;
}

/*----------------------------------------*/
/* Основные плашки для информации и кнопок */

/* настройка блока (плашки) с категорией кнопок */
.block-cc {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  margin: 32px 0px;
  padding: 16px;
  border-left: 4px solid;
}

/* общие настройки всех кнопок на плашке*/
.block-cc button {
  font-size: 1.2em;
  padding: 16px;
  display: block;
  border: 1px solid;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: all 0.2s ease-out;
  line-height: 1em;
}

.block-cc button:hover {
  outline: 0;
  box-shadow:
    rgba(0, 0, 0, 0.18) 0px 4px 16px 0px,
    rgba(0, 0, 0, 0.14) 0px 4px 16px 0px;
}

/* общие настройки заголовка №3 на плашке */
.block-cc h3 {
  font-size: 1.4em;
}

/* общие настройки полей ввода на плашке */
.block-cc input {
  padding: 5px;
  line-height: 1em;
}

/* КНОПКИ */
/* Широкая кнопка */
/* Да и вообще любой блок с шириной 100% */
.width {
  width: 100%;
}

/* Маленькая кнопка */
button.small {
  padding: 8px;
  font-size: 0.9em;
}

/* Серенькая кнопка обычная */
button.default {
  background: #eeeeee !important;
  color: #424242 !important;
  border: 1px solid #bdbdbd !important;
}

/* Синенькая кнопка "главная типа" */
button.primary {
  background: var(--main-color-hover) !important;
  color: #e8eaf6 !important;
  border: 1px solid #283593 !important;
}

/*-----------------------------*/
/* Цветные блоки */

.cc-red {
  border-color: #d32f2f;
  background: #ffebee;
}

.cc-red h3 {
  color: #d32f2f;
}

.cc-red button {
  background: #e53935;
  border: #b71c1c;
}

.cc-red button:hover {
  background: #d32f2f;
}

.cc-orange {
  border-color: #e64a19;
  background: #fbe9e7;
}

.cc-orange h3 {
  color: #e64a19;
}

.cc-orange button {
  background: #ff5722;
  border: #bf360c;
}

.cc-orange button:hover {
  background: #e64a19;
}

.cc-green {
  border-color: #388e3c;
  background: #e8f5e9;
}

.cc-green h3 {
  color: #388e3c;
}

.cc-green button {
  background: #43a047;
  border: #1b5e20;
}

.cc-green button:hover {
  background: #388e3c;
}

.cc-blue {
  border-color: #1976d2;
  background: #e3f2fd;
}

.cc-blue h3 {
  color: #1976d2;
}

.cc-blue button {
  background: #1e88e5;
  border: #0d47a1;
}

.cc-blue button:hover {
  background: #1976d2;
}

.div-form-customer-find {
  background-color: #fff;
  margin: 20px;
  padding-bottom: 5px;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 11px;
}

.div-form-house-find {
  background-color: #fff;
  width: 500px;
  margin: 20px;
  padding-bottom: 27px;
  padding-top: 27px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 11px;
}

.task-state-caption_delay {
  color: #fff;
  background: #f00;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #000;
}

.task-state-caption_cancel {
  color: #fff;
  background: #008040;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #000;
}

.task-state-caption_wait {
  color: #000000;
  background: #fffe13;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #000;
}

.task-state-caption_doing {
  color: #fff;
  background: #10ae78;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #000;
}

.task-caption-house-not-connect {
  color: #fff;
  background: #f00;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #000;
}

.rose-back {
  background-color: #ffb0b0;
}

.yellow-back {
  background-color: #ffffc1;
}

.accordeon-div {
  padding: 10px;
  padding-bottom: 0;
  padding-top: 0;
  font-size: 13px;
}

/* body {
  font: 14px/17px "Myriad pro", Tahoma, Geneva, hevetica, sans-serif;
  background-color: var(--main-color-body-background);
  margin: 0;
  padding: 0;
  color: var(--main-color-text);
  min-width: 960px;
} */

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  /* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */
  padding-right: 0;
  padding-left: 0;
  /* добавление боковых полей к элементам внутри контейнеров DIV, а не к самим контейнерам избавляет от необходимости расчетов рамочной модели. В качестве альтернативы можно использовать вложенный контейнер DIV с боковыми полями. */
}

ul,
ol,
dl {
  padding: 0;
  margin: 0;
}

a img {
  border: none;
}

a {
  color: var(--main-color);
  text-decoration: underline;
}

a:hover,
a:active,
a:focus {
  color: #666666;
}

.info_block {
  font-size: 10pt;
  font-weight: normal;
  font-style: italic;
}

.comment_block {
  float: right;
  width: 52px;
  height: 21px;
  text-align: center;
  color: #000;
  font-weight: bold;
  padding-top: 2px;
  z-index: 150;
}

.div_small {
  font-size: 8pt;
}

#admin_info .block {
  background: var(--main-color-left-menu-icon);
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  display: inline-block;
  margin-right: 5px;
}

#admin_info .block .first {
  display: inline-block;
  text-align: right;
  list-style: none;
  line-height: 16px;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #0b8a1a;
  overflow: hidden;
}

#admin_info .block .second {
  display: inline-block;
  text-align: left;
  list-style: none;
  line-height: 16px;
  overflow: hidden;
}

#admin_info .block a {
  color: #fff;
  text-decoration: underline;
}

.text_size {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.text_size::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background: -moz-linear-gradient(
    left,
    rgba(24, 113, 165, 0.2),
    var(--main-color) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(24, 113, 165, 0.2),
    var(--main-color) 100%
  );
  background: -o-linear-gradient(
    left,
    rgba(24, 113, 165 0.2),
    var(--main-color) 100%
  );
  background: -ms-linear-gradient(
    left,
    rgba(24, 113, 165, 0.2),
    var(--main-color) 100%
  );
  background: linear-gradient(
    to right,
    rgba(24, 113, 165, 0.2),
    var(--main-color) 100%
  );
}

.text_size_white {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.text_size_white::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.2), #fff 100%);
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0.2),
    #fff 100%
  );
  background: -o-linear-gradient(left, rgba(255, 255, 255 0.2), #fff 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.2), #fff 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), #fff 100%);
}

.label_area {
  vertical-align: top;
}

.textarea_class {
  color: #000;
  border: 1px solid var(--main-color-task-comment-border);
  outline: none;
  padding: 0 10px;
  font:
    14px/17px "Myriad pro",
    Tahoma,
    Geneva,
    sans-serif;
}

.textarea_class:focus {
  background: #f7efef;
  border: 1px solid #808080;
}

.button {
  font-size: 15px;
  padding: 10px 20px;
  background: var(--main-color-button) !important;
  color: var(--main-color-button-text);
  border: 0px;
  outline: 0px;
  cursor: pointer;
}

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

.button_small {
  font-size: 15px;
  padding: 3px 20px;
  background: var(--main-color);
  color: #fff;
  border: 0px;
  outline: 0px;
  cursor: pointer;
}

.button_small:hover {
  background: var(--main-color-button-hover);
}

.button2 {
  font-size: 15px;
  padding: 10px 20px;
  background: var(--main-color-button-hover);
  color: #fff;
  border: 0px;
  outline: 0px;
  cursor: pointer;
}

.button2:hover {
  background: #08496b;
}

.span_small {
  font-size: 11px;
}

.menu_div_leftblock {
  float: left;
  width: 180px;
}

.menu_div_leftblock ul {
  list-style: square inside;
  color: var(--main-color-left-menu-icon);
}

.menu_div_leftblock ul {
  font-size: 15px;
  display: block;
}

.menu_div_leftblock ul li {
  color: var(--main-color);
  line-height: 18px;
  height: 100%;
  margin-top: 10px;
}

.menu_div_leftblock ul li .select_punkt {
  font-weight: bold;
  color: #000;
}

.menu_div_leftblock ul li a:hover {
  color: #000;
}

.menu_div_rightblock {
  margin-left: 200px;
  padding: 5px;
  background: #e7e3e7;
  border-left: 3px solid #0088d1;
}

.label_h2 {
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.label_h2_wo {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 3px;
}

.label_h3 {
  font-size: 15px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.label_h3_wo {
  font-size: 15px;
  font-weight: bold;
}

.label_h3_hr {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #848284;
  border-bottom: 1px solid #848284;
}

.label_h3_hr_wo {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #848284;
  border-bottom: 1px solid #848284;
}

.label_h3_red {
  font-size: 15px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #f00;
  font-weight: bold;
}

.label_h3_green {
  font-size: 15px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #00c731;
  font-weight: bold;
}

.settings_option_name {
  width: 300px;
  text-align: right;
  float: left;
  padding-right: 20px;
}

.settings_option_value {
  font-weight: bold;
  width: 100%;
}

.settings_option_value a {
  padding-right: 20px;
}

.settings_option_value_change {
  padding: 0px;
}

.settings_option_value_change a {
  padding-right: 10px;
}

.settings_option_value_change .input_field {
  color: #000;
  font-size: 14px;
  height: 23px;
  line-height: 23px;
  width: 205px;
  border: 1px solid var(--main-color-task-comment-border);
  outline: none;
  padding: 0 10px;
  padding-right: 35px;
  overflow: hidden;
  font-family: "Myriad pro", Tahoma, Geneva, Helvetica, sans-serif;
}

#letters {
  margin: 20px 0px;
}

#letters .links {
  display: inline;
  border: 1px solid #dadada;
  height: 30px;
  line-height: 20px;
  padding: 5px;
  margin-left: 10px;
}

#letters .links a {
  margin: 5px 0px;
  padding: 0px 3px;
  border-right: 1px solid #dadada;
  text-transform: uppercase;
  font-size: 13px;
}

#letters .links a.current {
  color: #000;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
}

#letters .links a:last-child {
  border-right: none;
}

.table_block {
  margin: 20px 0px;
  /* display: table; */
}

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

.table_block .item > div {
  display: table-cell;
  padding: 5px 10px;
  font-size: 13px;
  margin: 1px 0px;
  vertical-align: top;
}

.table_block .left_data {
  font-weight: bold;
  text-align: right;
  background: var(--main-color-body-background-second);
}

.div_print {
  color: #000;
  font-family: "Helvetica", "Tahoma", "Arial";
}

.div_print a {
  text-decoration: none;
  color: #000;
}

.table_data {
  margin: 3px 0px 3px;
  display: table;
  overflow: hidden;
}

.table_data_nonspace {
  margin: 0px;
}

.table_data .report {
  display: table-row;
  max-height: 35px;
}

.table_data .report > div {
  display: table-cell;
  padding: 3px 10px;
  font-size: 13px;
  margin: 1px 0px;
  vertical-align: middle;
}

.table_data .report .right_div {
  text-align: right;
}

.table_data .item {
  display: table-row;
  max-height: 35px;
}

.table_data .white {
  background: none;
}

.table_data .white:hover {
  background: #ebeaea;
}

.table_data .gray {
  background: #f6f6f6;
}

.table_data .gray:hover {
  background: #ebeaea;
}

.table_data .cursor_pointer {
  cursor: pointer;
}

.table_data .legend {
  display: table-row;
  max-height: 35px;
  font-weight: bold;
  background: none;
  text-align: center;
}

.table_data .legend:hover {
  background: none;
}

.table_data .legend > div {
  display: table-cell;
  padding: 10px 5px;
  margin: 1px 0px;
  vertical-align: middle;
  border-bottom: 3px solid #d4d4d4 !important;
  font-size: 14px !important;
}

.table_data .item > div:not(.today) {
  display: table-cell;
  padding: 6px 6px;
  font-size: 13px;
  border-bottom: 1px solid #dadada;
  margin: 1px 0px;
  vertical-align: middle;
}

.table_data .today {
  display: table-cell;
  padding: 10px 10px;
  font-size: 13px;
  margin: 1px 0px;
  vertical-align: middle;
  border: 2px dotted #000;
}

.table_data .item ._number {
  text-align: center;
}

.table_data .item span:not(.work_fail) {
  /*
    color: #666666;
    */
}

.table_data .item .act_color {
  padding: 0px;
  width: 10px;
  position: relative;
}

.table_data .item .center_div {
  text-align: center;
}

.table_data .item .right_div {
  text-align: right;
}

.table_data .item .act {
  width: 110px;
  text-align: center;
}

.table_data .item .daten {
  width: 110px;
  text-align: center;
}

.table_data .item .money {
  width: 85px;
  text-align: right;
}

.table_data .item .act_color .arrow {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: -5px;
}

.table_data .ok {
  background: #0aa41c;
}

.table_data .ok .arrow {
  border-color: transparent transparent transparent #0aa41c;
}

.table_data .bad {
  background: #e2001a;
}

.table_data .bad .arrow {
  border-color: transparent transparent transparent #e2001a;
}

.span_user_mark {
  padding-right: 13px;
  margin-right: 5px;
}

.span_bold {
  font-weight: bold;
}

/* Меню с вкладками (карточка абонента и пр) */

ul#navigation,
ul#navigation2 {
  list-style: none;
  height: 21px;
  padding: 10px 0px 7px 10px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: visible;
}

ul#navigation li,
ul#navigation2 li {
  -webkit-border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
  float: left;
  margin: 0 5px 0 0;
  background-color: var(--main-color-body-background-second);
  border: solid 1px var(--main-color);
  position: relative;
  z-index: 1;
}

ul#navigation li.selected,
ul#navigation2 li.selected {
  z-index: 3;
}

ul#navigation li a:link,
ul#navigation li a:visited,
ul#navigation2 li a:link,
ul#navigation2 li a:visited {
  -webkit-border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
  display: block;
  text-align: center;
  padding: 0 10px 0 10px;
  margin: 0 0 -1px 0;
  height: 25px;
  line-height: 21px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  color: var(--main-color-button-text);
  letter-spacing: 1px;
  outline: none;
  float: left;
  background: var(--main-color-button);
  -webkit-transition: background-color 0.3s linear;
  -moz-transition: background-color 0.3s linear;
  -o-transition: background-color 0.3s linear;
}

ul#navigation li a:hover,
ul#navigation2 li a:hover {
  background-color: #5a87dd;
}

ul#navigation li.selected a:link,
ul#navigation li.selected a:visited,
ul#navigation2 li.selected a:link,
ul#navigation2 li.selected a:visited {
  color: #2b477d;
  border: solid 1px #fff;
  -webkit-transition: background-color 0.2s linear;
  background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat
    scroll 0 0 #f2f2f2;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.2, #f2f2f2),
    color-stop(0.8, #d1d1d1)
  );
  background-color: #f2f2f2;
}

.slider_content {
  padding: 5px;
  padding-bottom: 10px;
  -webkit-box-shadow: #111 0 0px 5px;
  -moz-box-shadow: #111 0 0px 5px;
  box-shadow: #111 0 0px 5px;
  border: 2px solid var(--main-color-body-background-second);
}

.slider_content_double {
  position: relative;
  width: 100%;
  display: inline-block;
}

.good_info_text {
  font-weight: bold;
  color: #008000;
}

.bad_info_text {
  font-weight: bold;
  color: #f00;
}

.gray_block_light {
  border: 1px solid #9c9e9c;
  color: #000;
  background: #f7f3f7;
  padding: 3px;
}

.gray_fon {
  background: #e7e7e7;
}

.yellow_fon {
  background: #ffff00;
}

.white_fon {
  background: #fff;
}

.red_fon {
  background: #f00;
  color: #ffffff;
  padding-left: 4px;
  padding-right: 4px;
}

.gray_block {
  border: 1px solid #9c9e9c;
  color: #000;
  background: #efefef;
  padding: 3px;
}

.gray_block_left {
  padding: 10px;
  background: #ededed;
  border-left: 3px solid #d4d4d4;
}

.border_left {
  border-left: 1px solid #d6d7d6;
}

.border_right {
  border-right: 1px solid #d6d7d6;
}

.green_block {
  color: #000;
  background: #adffad;
}

.div_color_1 {
  /* синий */
  background: var(--main-color);
  color: #fff;
  padding: 3px;
}

.div_color_1 a {
  color: #fff;
}

.div_color_2 {
  /* желтый */
  background: #f7df7b;
  color: #000;
  padding: 3px;
}

.larger_text {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
}

.work_fail {
  color: #fff;
  background: #f00;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #000;
}

.green_text {
  color: #008000;
}

.light_green_text {
  color: #39ff10;
}

.light_green {
  background: #bfffcf;
}

.red_text {
  color: #f00;
}

.normal_text {
  font-weight: normal;
}

.bold_text {
  font-weight: bold;
}

.italic_text {
  font-style: italic;
}

.old_customer {
  background: #cacaca;
}

.old_customer:hover {
  background: #c0c0c0;
}

.table_port {
  margin: 0;
  display: table;
  overflow: hidden;
}

.table_port .item {
  display: table-row;
  height: 45px;
}

.table_port .gray {
  background: #f6f6f6;
}

.table_port .legend {
  display: table-row;
  max-height: 35px;
  color: #fff;
  background: var(--main-color);
  text-align: center;
}

.table_port .legend > div {
  display: table-cell;
  vertical-align: middle;
  padding: 1px;
  font-size: 13px !important;
}

.table_port .item > div {
  display: table-cell;
  font-size: 13px;
  padding: 2px;
  border-bottom: 1px solid #dadada;
  vertical-align: middle;
}

.table_port .item .port_gray {
  background: #f6f6f6;
}

.table_port .item .port_black {
  background: #000;
  color: #fff;
  text-align: center;
}

.table_port .item .port_black a {
  color: #fff;
}

.table_port .item .port_green {
  background: #00ef00;
  text-align: center;
}

.table_port .item .port_red {
  background: #f00;
  text-align: center;
}

.table_port .item .port_number {
  border-left: 1px solid #dadada;
  border-right: 1px solid #dadada;
}

.table_port .item .port_traf {
  border-right: 1px solid #dadada;
}

.table_port .item .ov_module {
  border-left: 1px solid #dadada;
  border-right: 1px solid #dadada;
}

.table_port .item .ov_module_notdelim {
  border-bottom: 0px;
}

.table_port .item .ov_module_delim {
  border-top: 1px solid #dadada;
}

.table_port .item .act_color {
  padding: 0px;
  width: 10px;
  position: relative;
}

.table_port .item .act_color .arrow {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: -5px;
}

.link_black {
  color: #000;
}

.label_backgray {
  color: #fff;
  background: #737573;
  padding-left: 3px;
  padding-right: 3px;
  font-weight: bold;
}

.tagSpan {
  padding-left: 3px;
  padding-right: 3px;
  font-weight: bold;
}

.label_backblack {
  color: #fff;
  background: #000;
  padding-left: 3px;
  padding-right: 3px;
  font-weight: bold;
}

.label_backyellow {
  background: #ff0;
  padding-left: 3px;
  padding-right: 3px;
  font-weight: bold;
}

.green_div {
  background: #0f0;
}

.red_div {
  background: #f00;
}

.div_space {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
}

.div_space2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.ip_net_width {
  width: 21px;
}

.ip_net_customer {
  color: #000;
  background: #f7df7b;
}

.ip_net_customer_dolg {
  color: #f00;
  background: #e79e94;
}

.ip_net_customer_unreg {
  background: #cee7ff;
}

.ip_net_customer_pause {
  background: #428284;
}

.ip_net_customer_pause a {
  color: #fff;
}

.ip_net_user_subnet {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 50%, transparent 50%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.17) 50%),
    linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
}

.ip_net_subnet {
  background-image:
    repeating-linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px,
      transparent 60px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px,
      transparent 60px
    ),
    linear-gradient(
      60deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    ),
    linear-gradient(
      120deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    );
  background-size: 10px 120px;
}

.ip_net_device {
  color: #fff;
  background: var(--main-color);
}

.ip_net_device a {
  color: #fff;
}

.ip_net_device a:hover {
  color: #cacaca;
}

.ip_net_reserv {
  background: #cacaca;
}

.ip_net_inventory {
  color: #fff;
  background: #8400ff;
}

.ip_net_inventory a {
  color: #fff;
}

.standart_docs {
  font-family: "Arial";
  font-size: 8pt;
}

.hide_div {
  display: none;
}

.table_inventory_list {
  border: 1px solid #000;
  width: 100%;
}

.table_inventory_list td {
  margin: 0px;
  border: 1px solid #000;
}

.support_history_task_status_2 {
  color: #008000;
  font-weight: bold;
}

.support_history_task_status_3 {
  color: #f00;
  font-weight: bold;
}

.div_cable_line_wire_color {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  float: left;
  border: 1px #000 solid;
}

.erp-icon-small {
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  /* solid style */
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1em;
  /* наследует размер */
  line-height: 0.75em;
  margin-right: 5px;
  vertical-align: -3px;
  color: var(--main-color);
}

.erp-icon {
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-size: 1.2em;
  line-height: 0.75em;
  margin-right: 5px;
  vertical-align: -3px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--main-color);
}

/* Solid */
.erp-icon.fa-solid,
.erp-icon.fas {
  /* алиас */
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
}

/* Regular */
.erp-icon.fa-regular,
.erp-icon.far {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  /* solid — то, что было в FA4 */
}

/* Brands */
.erp-icon.fa-brands,
.erp-icon.fab {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.erp-icon-map {
  margin-left: 5px;
}

.erp-icon-normal {
  color: var(--main-color);
}

.erp-icon-normal:hover {
  color: var(--main-color-hover);
}

.erp-icon-white {
  color: #fff;
}

.erp-icon-gray {
  color: #c0c0c0;
}

.erp-icon-gray2 {
  color: #c0c0c0;
}

.erp-icon-gray2:hover {
  color: #f00;
}

.erp-icon-black {
  color: #000;
}

.erp-icon-green {
  color: #0f0;
}

.erp-icon-darkgreen {
  color: var(--main-color-left-menu-icon);
}

.erp-icon-red {
  color: #f00;
}

.erp-icon-lmenu {
  font-size: 0.9em;
  margin-left: -25px;
  color: var(--main-color-left-menu-icon);
  vertical-align: 0px;
  width: 18px;
}

.erp-icon-lk {
  font-size: 3em;
  color: #fff;
  width: 100%;
  text-align: center;
  padding-top: 15px;
}

.erp-icon-wait {
  vertical-align: -2px;
  color: #8c8c00 !important;
}

.erp-icon-danger {
  vertical-align: -2px;
  color: #f00 !important;
}

.erp-icon-danger:hover {
  color: #d70000 !important;
}

.erp-icon-attention {
  vertical-align: -2px;
  color: #ff8000 !important;
}

.erp-icon-attention:hover {
  color: #b95c00 !important;
}

.erp-icon-64 {
  font-size: 4em;
}

.erp-icon-ok {
  vertical-align: -2px;
  color: #00b900 !important;
}

.erp-icon-task-state {
  color: #fff !important;
}

.erp-icon-menu-object-card {
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  /* solid */
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.75em;
  line-height: 0.85em;
  color: #000;
  padding-left: 8px;
  padding-right: 5px;
}

.erp-icon-menu-object-card2 {
  padding-left: 6px;
  padding-top: 7px;
  padding-bottom: 3px;
}

.erp-icon-menu-object-card3 {
  padding-left: 4px;
  padding-top: 9px;
  padding-bottom: 1px;
  font-size: 1.6em;
}

.erp-icon-menu-object-card4 {
  padding-left: 3px;
  padding-top: 7px;
  padding-bottom: 3px;
}

.erp-icon-menu-object-card5 {
  padding-left: 10px;
  padding-right: 3px;
  padding-top: 6px;
  padding-bottom: 3px;
}

.erp-icon-menu-object-card-green {
  color: #000;
}

.erp-icon-menu-card {
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  /* solid стиль */
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 2em;
  line-height: 0.75em;
  color: #000;
  padding-left: 8px;
  padding-right: 5px;
}

.us-planed {
  background: url("../picture/plan.svg") 50% 50% no-repeat;
  padding-left: 20px;
}

.us-traf-in {
  margin-right: 1px;
  color: #008000;
}

.us-traf-out {
  margin-right: 1px;
  color: #f00;
}

.address-list-border {
  padding-left: 3px;
  border-left: 1px solid #848284;
}

.address-list-house-border {
  padding-left: 5px;
  margin-left: 30px;
  margin-bottom: 5px;
  border-left: 1px solid #848284;
}

.mapLabel {
  margin-top: -3px;
  position: absolute;
}

.footer2 {
  padding: 30px 0;
  margin-top: 20px;
  border-top: 2px solid #e0e0e0;
  position: relative;
  width: 100%;
}

.footer2 #down_copy {
  color: #83898b;
  font-size: 13px;
}

.footer2 #down_copy a {
}

.footer2 #down_support {
  width: 150px;
  height: 18px;
  background: var(--main-color);
  color: var(--main-color-text);
  padding-top: 3px;
  padding-left: 7px;
  padding-bottom: 3px;
  display: block;
  position: absolute;
  right: 0;
  top: 25px;
}

.footer2 #down_support a {
  text-decoration: none;
  color: var(--main-color-body-background);
}

.footer2 #down_support i {
  color: #fff;
}

.footer2 #down_support:hover {
  background: #707070;
}

.footer2 #down_support_div {
  width: 500px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background-color: var(--main-color);
  color: #fff;
  padding: 5px;
}

.footer2 #down_support_div ul {
  list-style: square inside;
  padding-bottom: 10px;
}

.footer2 #down_support_div ul li {
  margin: 5px;
}

.footer2 #down_support_div a {
  color: #fff;
}

.footer2 #down_support_div a:hover {
  color: #c6c3c6;
}

.footer2 #down_support_div h2 {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: -5px;
  margin-bottom: 2px;
}

.footer2 #down_support_div #down_support_cancel {
  position: absolute;
  right: 10px;
  top: 5px;
  padding-right: 20px;
}

.footer2 #down_finishinfo {
  display: block;
  position: absolute;
  right: 0;
  margin-right: 170px;
  padding: 2px;
  font-size: 8pt;
  top: 25px;
  color: var(--main-color-body-background);
}

.footer2 #down_finishinfo_full {
  display: block;
  position: relative;
  float: right;
  right: 0;
  margin-right: 170px;
  padding: 2px;
  top: -40px;
  font-size: 9pt;
  background-color: #c6c3c6;
  border: 1px solid #000;
}

.footer2 #down_finishinfo2_full {
  top: 20px;
  padding: 10px;
  position: relative;
  background-color: #c6c3c6;
  border: 1px solid #000;
  width: 400px;
}

.iface10M {
  -webkit-animation: ifaceAnim10M 1s infinite;
  /* Safari 4+ */
  -moz-animation: ifaceAnim10M 1s infinite;
  /* Fx 5+ */
  -o-animation: ifaceAnim10M 1s infinite;
  /* Opera 12+ */
  animation: ifaceAnim10M 1s infinite;
  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes ifaceAnim10M {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    background-color: #ff8000;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    background-color: #fff;
  }
}

.iface100M {
  -webkit-animation: ifaceAnim100M 1s infinite;
  /* Safari 4+ */
  -moz-animation: ifaceAnim100M 1s infinite;
  /* Fx 5+ */
  -o-animation: ifaceAnim100M 1s infinite;
  /* Opera 12+ */
  animation: ifaceAnim100M 1s infinite;
  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes ifaceAnim100M {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    background-color: #42f12e;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    background-color: #fff;
  }
}

.iface1G {
  -webkit-animation: ifaceAnim1G 1s infinite;
  /* Safari 4+ */
  -moz-animation: ifaceAnim1G 1s infinite;
  /* Fx 5+ */
  -o-animation: ifaceAnim1G 1s infinite;
  /* Opera 12+ */
  animation: ifaceAnim1G 1s infinite;
  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes ifaceAnim1G {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    background-color: #008000;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    background-color: #fff;
  }
}

.leaflet-ruler {
  height: 35px;
  width: 35px;
  background-image: url("../js/images/ruler_icon.png");
  /* <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
  background-repeat: no-repeat;
  background-position: center;
}

.leaflet-ruler:hover {
  background-image: url("../js/images/ruler_icon-colored.png");
  /* <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
}

.leaflet-ruler-clicked {
  height: 35px;
  width: 35px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../js/images/ruler_icon-colored.png");
  border-color: chartreuse !important;
}

.leaflet-bar {
  background-color: #ffffff;
}

.leaflet-control {
  cursor: pointer;
}

.result-tooltip {
  background-color: white;
  border-width: medium;
  border-color: #de0000;
  font-size: smaller;
}

.moving-tooltip {
  background-color: rgba(255, 255, 255, 0.7);
  background-clip: padding-box;
  opacity: 0.5;
  border: dotted;
  border-color: red;
  font-size: smaller;
}

.plus-length {
  padding-left: 45px;
}

.us-map-class .leaflet-popup-content-wrapper {
  background: transparent;
  opacity: 1;
  color: #000;
  font-size: 10px;
  line-height: 24px;
  border-radius: 0px;
  box-shadow: none;
}

.us-map-class .leaflet-popup-tip {
  background: transparent;
  border: none;
  box-shadow: none;
}

.labelObjectText {
  margin-bottom: -35px;
  text-align: center;
}

.linkOnMap {
  text-decoration: none;
  color: #000;
}

.linkOnMap:hover {
  color: #000;
  text-decoration: none;
}

.linkOnMap:visited {
  color: #000;
  text-decoration: none;
}

.linkOnMap:link {
  color: #000;
  text-decoration: none;
}

.addressNameInTree {
  font-weight: bold;
}

.houseNameInTree {
  font-size: 17px;
  text-decoration: underline;
  margin-left: 3px;
  padding-left: 2px;
  padding-right: 2px;
}

.houseNameInTree:hover {
  font-weight: bold;
}

.houseRed {
  color: #f00;
}

.houseGreen {
  color: #008000;
}

.houseBlackBack {
  background-color: #000;
  color: #fff;
}

.houseYellowBack {
  background-color: #ffff00;
}

.addressFindSelectorDiv {
  background: #efefef;
  border: #d4d4d4 2px solid;
  padding: 5px;
  border-radius: 0px 6px 6px 0px;
}

.addressFindSelectorDiv input {
  background-color: #fff;
}

.statRowTotal {
  background-color: #b2b2b2;
  font-weight: bold;
}

.statRowTotal td {
  border: 1px solid #000;
}

.statRowNormal {
  background-color: #fff;
}

.statRowNormal td {
  border: 1px solid #b2b2b2;
}

.statRowNormalItalic {
  background-color: #fff;
  font-style: italic;
}

.statRowNormalItalic td {
  border: 1px solid #b2b2b2;
}

.statRowMain {
  background-color: #cacaca;
  font-weight: bold;
}

.statRowMain td {
  border: 1px solid #b2b2b2;
}

.leaflet-div-icon {
  opacity: 1;
  background: #fff;
  border-radius: 30px;
}

.leaflet-middle-icon {
  border-radius: 30px;
}

.ifaceRow-epon {
  background-color: #e7f1fe;
}

.ifaceRow-802-11 {
  background-color: #ffe0c1;
}

.mapNodeInfoNormal {
  background-color: #fff;
  font-size: 9pt;
  font-weight: normal;
}

.mapDeviceInfoNormal {
  background-color: #fff;
  font-size: 11pt;
  font-weight: bold;
}

.mapDeviceInfoRed {
  background-color: #fff;
  color: #f00;
  font-size: 11pt;
  font-weight: bold;
}

.fiber-reserv {
  font-size: 10pt;
  font-weight: bold;
}

.leaflet-canvas-icon-layer {
}

.labelObjectText {
  cursor: pointer;
}

.leaflet-popup-content-wrapper {
  border: 0px solid #f00;
  height: 0px;
  margin-top: -8px;
}

.dist-marker {
  font-size: 9px;
  border: 1px solid #777;
  border-radius: 10px;
  text-align: center;
  color: #000;
  background: #fff;
}

.cityBack {
  background-color: #f5f3f6;
  border: 1px solid #cacaca;
  margin: 3px;
}

.reply_comment {
  text-align: left;
  font-style: italic;
  border-radius: 8px;
  width: 350px;
  max-height: 30px;
  overflow: hidden;
  /* Обрезаем все, что не помещается в область */
  background: #cacaca;
  /* Цвет фона */
  padding: 5px;
  /* Поля вокруг текста */
  text-overflow: ellipsis;
  /* Добавляем многоточие */
}

.reply_comment a {
  color: #000;
  text-decoration: none;
}

#fullTaskTypeDescription {
  display: none;
}

#fullTaskTypeDescriptionShort {
  display: "";
}

.nodeSchemeRedesignTopPanel {
  background: #e1e1ff;
}

.nodeSchemeTopPanel {
  background: #efefef;
}

.leaflet-control-layers-group-name {
  font-weight: bold;
  margin-bottom: 0.2em;
  margin-left: 3px;
}

.leaflet-control-layers-group {
  margin-bottom: -2.5em;
  margin-top: -20px;
  margin-bottom: 0px;
}

#map_menu2 {
  height: 30px;
  font-size: 14px;
  padding-left: 4px;
  padding-top: 4px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  background-color: #ffffff;
}

.grayInfoDiv {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 3px;
  border: 3px solid #c0c0c0;
  border-radius: 6px 6px 6px 6px;
  background-color: #eeeeee;
}

.darkRedInfoDiv {
  margin-top: 10px;
  padding: 3px;
  border: 6px solid #800000;
  border-radius: 6px 6px 6px 6px;
  background-color: #ffd7d6;
}

#buildingTaskCommentId {
  margin-top: 10px;
  padding: 3px;
  border: 6px solid var(--main-color-yellow-info-border);
  border-radius: 6px 6px 6px 6px;
  background-color: var(--main-color-yellow-info);
  font-weight: bold;
}

#house_scheme_id {
  padding-top: 40px;
}

.my-label {
  position: absolute;
  width: 1000px;
  font-size: 2px;
}

.leaflet-container.pointer-cursor-enabled {
  cursor: pointer;
}

.downLinkUrl {
  color: #f00;
}

.downLinkUrl {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #fff;
  font-size: 14px;
}

.spanContragentReportTransferName {
  font-size: 24px;
}

.dropdown-menu {
  background-color: white;
  border: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  border-top: 1px solid #ddd;
  padding: 2px 5px;
  margin: 0;
}

.dropdown-menu li:first-child {
  border-top: none;
}

.dropdown-menu li:hover,
.dropdown-menu .active {
  background-color: rgb(110, 183, 219);
}

.dropdown-menu a {
  height: 18px;
  text-decoration: none;
  color: #555;
}

.dropdown-menu a:hover {
  cursor: pointer;
}

.dropdown-menu img {
  vertical-align: text-top;
  height: 18px;
}

.leaflet-tooltip-label {
  position: absolute;
  padding: 0px 2px 0px 2px !important;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.95);
  /* background-color: rgba(255, 255, 255, 0.6); */
  border: 0px solid #000;
  color: #000;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.oldUnavailableClass {
  display: none;
}

.employeeUnavailableI {
  color: #f00;
}

.xdsoft_datetimepicker {
  box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.506);
  background: #ffffff;
  border-bottom: 1px solid #bbbbbb;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  color: #333333;
  display: block;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 8px;
  padding-left: 0px;
  padding-top: 2px;
  position: absolute;
  z-index: 9999;
  box-sizing: border-box;
  display: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.xdsoft_noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.xdsoft_noselect::selection {
  background: transparent;
}

.xdsoft_noselect::-moz-selection {
  background: transparent;
}

.xdsoft_datetimepicker.xdsoft_inline {
  display: inline-block;
  position: static;
  box-shadow: none;
}

.xdsoft_datetimepicker * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

.xdsoft_datetimepicker .xdsoft_datepicker,
.xdsoft_datetimepicker .xdsoft_timepicker {
  display: none;
}

.xdsoft_datetimepicker .xdsoft_datepicker.active,
.xdsoft_datetimepicker .xdsoft_timepicker.active {
  display: block;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
  width: 224px;
  float: left;
  margin-left: 8px;
}

.xdsoft_datetimepicker .xdsoft_timepicker {
  width: 58px;
  float: left;
  text-align: center;
  margin-left: 8px;
  margin-top: 0px;
}

.xdsoft_datetimepicker .xdsoft_datepicker.active + .xdsoft_timepicker {
  margin-top: 8px;
}

.xdsoft_datetimepicker .xdsoft_mounthpicker {
  position: relative;
  text-align: center;
}

.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAeCAYAAACR82geAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozQjRCQjRGREU4MkNFMzExQjRDQkIyRDJDOTdBRUI1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxQzQ5MUVFRTJDRTkxMUUzODYyMUJDN0ExNzY5MEJFMiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxQzQ5MUVFRDJDRTkxMUUzODYyMUJDN0ExNzY5MEJFMiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCNEJCNEZERTgyQ0UzMTFCNENCQjJEMkM5N0FFQjUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCNEJCNEZERTgyQ0UzMTFCNENCQjJEMkM5N0FFQjUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ZZiqAgAAAR5JREFUeNrs2W0OgjAMBmAnHJjoOZq8FzYTUAkfG9KuJFDaZD8MpoYHmG0JMcabxzLuTuAwDqMR9dlPIISQO0TtqtrVpA7+21troxe8Q3mMPjfsDJ3cmVcGJc4WuOdtDSaFksQphvn+WNHdthJQhFlDWeBowMQcTiEMPilUYLagTHC0YJI4BTD45VWA4aAMOJowCxwhDMY5D7t3MWEmOAIYzPNZghlwmDBI5bIG0+MwYJDLc1SYkl6pYnz3dbraWXjHQPAokfVHCQWbL1mFgcLfNVmDgWKBR4oFHgQFHmnBYIeWgBRbAg4OabUE2LGJJMUmEltRrjh2wBaUK8LkcOjqg6oUjmhkYnXm24wq7qdoyO5vIv29ksM4zI7xFmAAj1yMVcKZ+nYAAAAASUVORK5CYII=");
}

.xdsoft_datetimepicker .xdsoft_prev {
  float: left;
  background-position: -20px 0px;
}

.xdsoft_datetimepicker .xdsoft_next {
  float: right;
  background-position: 0px 0px;
}

.xdsoft_datetimepicker .xdsoft_next:active,
.xdsoft_datetimepicker .xdsoft_prev:active {
}

.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_prev {
  background-color: transparent;
  background-repeat: no-repeat;
  border: 0px none currentColor;
  cursor: pointer;
  display: block;
  height: 30px;
  opacity: 0.5;
  outline: medium none currentColor;
  overflow: hidden;
  padding: 0px;
  position: relative;
  text-indent: 100%;
  white-space: nowrap;
  width: 20px;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
  float: none;
  background-position: -40px -15px;
  height: 15px;
  width: 30px;
  display: block;
  margin-left: 14px;
  margin-top: 7px;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
  background-position: -40px 0px;
  margin-bottom: 7px;
  margin-top: 0px;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
  height: 151px;
  overflow: hidden;
  border-bottom: 1px solid #dddddd;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  background: #f5f5f5;
  border-top: 1px solid #dddddd;
  color: #666666;
  font-size: 12px;
  text-align: center;
  border-collapse: collapse;
  cursor: pointer;
  border-bottom-width: 0px;
  height: 25px;
  line-height: 25px;
}

.xdsoft_datetimepicker
  .xdsoft_timepicker
  .xdsoft_time_box
  > div
  > div:first-child {
  border-top-width: 0px;
}

.xdsoft_datetimepicker .xdsoft_next:hover,
.xdsoft_datetimepicker .xdsoft_prev:hover {
  opacity: 1;
}

.xdsoft_datetimepicker .xdsoft_label {
  display: inline;
  position: relative;
  z-index: 9999;
  overflow: hidden;
  margin: 0;
  padding: 5px 3px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  background-color: #fff;
  float: left;
  width: 182px;
  text-align: center;
}

.xdsoft_datetimepicker .xdsoft_month {
  width: 114px;
  text-align: right;
}

.xdsoft_datetimepicker .xdsoft_calendar {
  clear: both;
}

.xdsoft_datetimepicker .xdsoft_year {
  width: 56px;
}

.xdsoft_datetimepicker .xdsoft_calendar table {
  border-collapse: collapse;
  width: 100%;
}

.xdsoft_datetimepicker .xdsoft_calendar td > div {
  padding-right: 5px;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
  height: 25px;
}

.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
  width: 14.2857142%;
  text-align: center;
  background: #f5f5f5;
  border: 1px solid #dddddd;
  color: #666666;
  font-size: 12px;
  text-align: right;
  padding: 0px;
  border-collapse: collapse;
  cursor: pointer;
  height: 25px;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
  color: #33aaff;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker
  .xdsoft_timepicker
  .xdsoft_time_box
  > div
  > div.xdsoft_current {
  background: #33aaff;
  box-shadow: #178fe5 0px 1px 3px 0px inset;
  color: #fff;
  font-weight: 700;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
.xdsoft_datetimepicker .xdsoft_time_box > div > div.xdsoft_disabled {
  opacity: 0.5;
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  color: #fff !important;
  background: #ff8000 !important;
  box-shadow: none !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
.xdsoft_datetimepicker
  .xdsoft_timepicker
  .xdsoft_time_box
  > div
  > div.xdsoft_disabled:hover {
  color: inherit !important;
  background: inherit !important;
  box-shadow: inherit !important;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
  font-weight: 700;
  text-align: center;
  color: #999999;
  cursor: default;
}

.xdsoft_datetimepicker .xdsoft_copyright {
  color: #ccc !important;
  font-size: 10px;
  clear: both;
  float: none;
  margin-left: 8px;
}

.xdsoft_datetimepicker .xdsoft_copyright a {
  color: #eee !important;
}

.xdsoft_datetimepicker .xdsoft_copyright a:hover {
  color: #aaa !important;
}

.xdsoft_time_box {
  position: relative;
  border: 1px solid #ccc;
}

.xdsoft_time_box > .xdsoft_scrollbar > .xdsoft_scroller {
  background: #ccc !important;
  height: 20px;
  border-radius: 3px;
}

.xdsoft_time_box > .xdsoft_scrollbar {
  position: absolute;
  width: 7px;
  width: 7px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  cursor: pointer;
}

.leaflet-contextmenu {
  display: none;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 4px 0;
  background-color: #fff;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.leaflet-contextmenu a.leaflet-contextmenu-item {
  display: block;
  color: #222;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  padding: 0 12px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  cursor: default;
  outline: none;
}

.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {
  opacity: 0.5;
}

.leaflet-contextmenu a.leaflet-contextmenu-item.over {
  background-color: #f4f4f4;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {
  background-color: inherit;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.leaflet-contextmenu-icon {
  margin: 2px 8px 0 0;
  width: 16px;
  height: 16px;
  float: left;
  border: 0;
}

.leaflet-contextmenu-separator {
  border-bottom: 1px solid #ccc;
  margin: 5px 0;
}

.i0Li {
  overflow: hidden;
  word-wrap: anywhere;
}

option[colorTag="optionRed"] {
  background-color: #e20a0a;
  color: #ffffff;
}

.optionRed {
  background-color: #e20a0a;
  color: #ffffff;
}

option[colorTag="optionWhite"] {
  background-color: #ffffff;
  color: #000;
}

.optionWhite {
  background-color: #ffffff;
  color: #000;
}

option[colorTag="optionSeparator"] {
  font-weight: bold;
  font-style: italic;
  color: #9d9d9d;
}

.erp-label {
  permanent: true;
  position: absolute;
  width: 1000px;
  font-size: 14px;
  background-color: none;
  border-color: none;
  background: none;
  border: none;
  box-shadow: none;
  direction: "right";
  font-family: "Courier", "sans-serif", Tahoma, Geneva, Helvetica;
}

.rack_label_low_opacity.leaflet-tooltip-top:before,
.rack_label_low_opacity.leaflet-tooltip-bottom:before,
.rack_label_low_opacity.leaflet-tooltip-left:before,
.rack_label_low_opacity.leaflet-tooltip-right:before,
.rack_label.leaflet-tooltip-top:before,
.rack_label.leaflet-tooltip-bottom:before,
.rack_label.leaflet-tooltip-left:before,
.rack_label.leaflet-tooltip-right:before,
.erp-label.leaflet-tooltip-top:before,
.erp-label.leaflet-tooltip-bottom:before,
.erp-label.leaflet-tooltip-left:before,
.erp-label.leaflet-tooltip-right:before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

.rack_label_low_opacity {
  permanent: true;
  position: absolute;
  width: 1000px;
  font-size: 14px;
  color: #eeeeee;
  background-color: none;
  border-color: none;
  background: none;
  border: none;
  box-shadow: none;
  direction: "right";
  font-family: "Courier", "sans-serif", Tahoma, Geneva, Helvetica;
}

.rack_label {
  permanent: true;
  position: absolute;
  width: 1000px;
  font-size: 14px;
  color: #000;
  background-color: none;
  border-color: none;
  background: none;
  border: none;
  box-shadow: none;
  direction: "right";
  font-family: "Courier", "sans-serif", Tahoma, Geneva, Helvetica;
}

.menu_pic {
  padding-top: 10px;
  padding-left: 10px;
}

.menu_pic ul {
  list-style: none;
  display: flex;
  /* Flex layout */
  flex-wrap: wrap;
  /* Allow wrapping if needed */
  gap: 10px;
  /* Space between items */
  padding: 0;
  margin: 0;
}

.menu_pic ul li {
  flex: 0 0 62px;
  /* Fixed width for each circle */
  height: 62px;
  /* Fixed height */
}

.menu_pic ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #0088d1;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 23pt;
  text-decoration: none;
  transition: background-color 0.2s;
}

.menu_pic ul li a:hover {
  background-color: #0088d1;
}

.menu_pic ul li.bad a {
  box-shadow: 0 0 0 2px #d4d4d4;
}

.menu_pic ul li.bad a:hover {
  background-color: #fff;
}

.menu_pic ul li a i {
  position: relative;
  top: 0;
  left: 0;
}

#paste-area {
  position: relative;
  height: 100px;
  background-color: #f2f9ff;
  border: 1px solid #000;
  margin: 5px;
  margin-top: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 100px;
  caret-color: transparent;
}

#paste-area::before {
  content: attr(data-placeholder);
  position: absolute;
  color: #aaa;
  pointer-events: none;
}

#paste-area img {
  max-width: 100px;
  max-height: 100px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.badges {
  display: flex;
  align-items: center;
  /* Центрирует элементы по вертикали */
  justify-content: space-around;
  /* Распределяет пространство между элементами */
}

.badge {
  margin: 10px;
  /* Добавляет отступы вокруг каждого бейджа */
}

.cableLineMapWireInfo {
}

.cableLineMapWireInfo td {
  border: 1px solid var(--main-color-task-comment-border);
  padding: 2px;
  font-size: 10px;
}

.cableLineMapWireInfo .fiberColor {
  width: 16px;
}

.cableLineMapWireInfo .moduleColor {
  width: 16px;
}

.timeline {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.task {
  display: flex;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.status-date {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  height: 30px;
  padding-left: 5px;
  font-size: 12px;
  color: #000;
}

.status {
  display: flex;
  align-items: center;
  text-align: left;
  height: 12px;
  padding: 2px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status:hover {
  opacity: 0.5;
}

.shadowText {
  font-size: 15px;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 0.4px black;
  /* Для Safari/Chrome/Opera */
  text-stroke: 0.4px black;
  /* Стандартное свойство */
}

.errorPageText {
  color: var(--main-color);
}

#login_page {
  background: var(--main-color);
}

@media only screen and (orientation: portrait) {
  .leaflet-control-layers {
    box-sizing: border-box;
    max-height: 70vh;
    /* Высота для прокрутки */
    overflow-y: auto;
    /* Включение вертикальной прокрутки */
    -webkit-overflow-scrolling: touch;
    /* Плавная прокрутка для мобильных устройств */
    position: relative;
  }
}

.leaflet-control-layers-scrollbar {
  overflow-y: none;
}

.divInventoryReport {
  border-left: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
}

.lightGray {
  background: #efefef;
}

.arrow-icon {
  width: 14px;
  height: 14px;
}

.arrow-icon > div {
  margin-left: -1px;
  margin-top: -3px;
  transform-origin: center center;
  font:
    12px/1.5 "Helvetica Neue",
    Arial,
    Helvetica,
    sans-serif;
}

/*
.corporateSpan {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../picture/logo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-indent: -9999px;
}
*/

.customerAdditionalBillingDataId {
  width: 40px;
}

.sheduleTh {
  word-break: break-word;
  white-space: normal;
}

.potentialRetailCustomer {
  background: #ddffdd;
}

.potentialCorporateCustomer {
  background: #ddffdd;
}

#error-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background-color: red;
  color: white;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  z-index: 9999;
}

.car-widget {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.car-tile {
  flex: 1 1 calc(33.33% - 10px);
  min-width: 200px;
  max-width: 300px;
  background: var(--main-color-body-background-second);
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
}

.car-tile:hover {
  background: #ebeaea;
  cursor: pointer;
  /* курсор в виде руки (по желанию) */
}

.car-name {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 4px;
}

.car-plate {
  display: inline-block;
  padding: 2px;
  margin-bottom: 2px;
  background: white;
  color: black;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 3px;
  letter-spacing: 1.5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  /* лёгкая тень */
  width: fit-content;
  text-align: center;
  user-select: none;
}

.car-time,
.car-speed {
  font-size: 0.9em;
  margin-bottom: 4px;
}

#theme2-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: gray;
  font-size: 80px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Space divs for layout consistency */
/* Each checkbox row */