html {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

#map .leaflet-popup {}

#map .leaflet-popup .hidden-data {
  display: none;
}

#map .leaflet-popup h4 {
  margin: 5px 0;
}

#map .leaflet-popup .orders {
  margin: 0;
  padding: 0;
  list-style: none;
}

#map .leaflet-popup .orders li {
  padding: 0 0 0 12px;
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: left top 6px;
  line-height: 21px;
  color: #707070;
  cursor: pointer;
}

#map .leaflet-popup .orders li:hover {
  text-decoration: underline;
  color: #707070;
}

#map .leaflet-popup .orders li.status.status_0 {
  background-image: url(../images/issue_status_0.svg);
}
#map .leaflet-popup .orders li.status.status_1 {
  background-image: url(../images/issue_status_1.svg);
}
#map .leaflet-popup .orders li.status.status_2 {
  background-image: url(../images/issue_status_2.svg);
}
#map .leaflet-popup .orders li.status.status_3 {
  background-image: url(../images/issue_status_3.svg);
}

#map .leaflet-popup .add-new-order {
  margin: 10px 0 0 0;
}

#map .leaflet-popup .item-addon-data {
  display: block;
  line-height: 13px;
  margin: 0 0 10px 0;
  color: #b0b0b0;
}

header .map-layers {
  position: absolute;
  right: 25px;
  z-index: 2;
  margin: 30px auto 0 auto;
  width: calc(100% - 50px);
  border-radius: 0;
  background: none;
  text-align: right;
  display: flex;
}

header .map-layers.menu-hidden {
  margin: 0 auto;
}

header .map-layers button {
  font-size: 12px;
  font-weight: 500;
  padding: 10px 40px;
  border-radius: 20px;
  margin: 0 0 0 auto;
}

header .map-layers .toggle-menu {
  background-image: url(../images/arrow-up_w.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px auto;
  padding: 0;
  margin: 0 0 0 0;

  position: absolute;
  top: -50px;
  left: -15px;
  width: 35px;
  height: 35px;
  border: 1px solid #fff;
}

header .map-layers .toggle-menu[data-menu-pos="closed"] {
  top: -45px;
  transform: rotate(180deg);
  background-position: center top 5px;
  width: 35px;
  height: 40px;
  border-radius: 20px 20px 0 0;
}

header .map-layers .layers-list {
  display: none;
  position: absolute;
  width: 200px;
  right: 0;
  left: auto;
  top: calc(100% + 10px);

  border-radius: 20px;
  background-color: rgba(44,44,44,0.7);
  color: #fff;
  padding: 20px;
}

header .map-layers .layers-list.show {
  display: block;
}

header .map-layers .layers-list > div {
  width: 100%;
}

header .map-layers .layers-list > div.other-layers {
  margin: 20px 0 0 0;
}

header .map-layers .layers-list h3 {
  margin: 0 0 10px 0;
  padding: 0 0 3px 0;
  font-size: 12px;
  border-bottom: 1px solid #fff;
  text-align: left;
  font-weight: 500;
  width: 100%;
}

header .map-layers .layers-list ul {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 300;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
}

header .map-layers .layers-list ul li {
  padding: 3px 5px 3px 17px;
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="gray"/></svg>');
  background-repeat: no-repeat;
  background-position: left 5px center;
  background-size: 5px auto;
  border-radius: 20px;
  transition: 0.1s ease-in-out;
  margin: 2px 0;
}

header .map-layers .layers-list ul li.active {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="%235cfb48"/></svg>');
  background-color: rgba(255,255,255,0.2);
}

header .map-layers .layers-list ul li.active:hover {
  background-color: rgba(255,255,255,0.3);
}

header .map-layers .layers-list ul li:hover {
  background-color: rgba(255,255,255,0.1);
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter',sans-serif;
  background-color: #d5d5d5;
  color: #222;
}

button {
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

button.style-1 {
  background-color: #29A6BE;
  color: #fff;
  border: none;
}

button.style-1:hover {
  background-color: #1B8FA6;
}

button.popup-button {
  padding: 3px 10px;
  border-radius: 10px;
}

button.style-4 {
  background-color: #E78787;
  color: #fff;
  border: none;
}

button.style-4:hover {
  background-color: #d97474;
}

button.style-2 {
  border: none;
  background-color: #9C9C9C;
  color: #fff;
}

button.style-2:hover {
  background-color: #7E7E7E;
}

button.style-3 {
  border: 3px solid #29A6BE;
  background-color: #fff;
  color: #29A6BE;
}

button.style-5 {
  border: none;
  background-color: #2C2C2C;
  color: #fff;
}

button.style-5:hover {
  background-color: #191919;
}

.alert.alert-danger {
  text-align: center;
  font-size: 14px;
  background-color: #BC3C3C;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  display: block;
}


#page button.back-button {
  background-color: #d5d5d5;
  border: none;
  border-radius: 20px;
  padding: 5px 15px 5px 35px;
  color: #7e7e7e;
  position: absolute;
  top: 30px;
  display: none;
}

#page button.back-button.show {
  display: inline;
}

#page button.back-button:hover {
  background-color: #a9a9a9;
  color: #565656;
}

#page button.back-button::before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  background: url(../images/arrow-right_w.svg) no-repeat center rgba(34,34,34,0.3);
  background-size: 9px auto;
  left: 0;
  top: 0;
  border-radius: 15px;
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

/* button.style-3:hover {
  background-color: #7E7E7E;
} */

button:focus,
textarea:focus,
select:focus,
input:focus,
.select2:focus,
.select2 span:focus {
  outline: none;
}

.warning-bg {
  background-color: #E0C002;
  color: rgba(0,0,0,0.7);
}

.error-bg {
  background-color: #e00202;
  color: rgba(255, 255, 255, 0.7);
}

#container {}

#container #content {}

#content.menu-hidden #page {
  margin: 0 auto;
}

#loading {
  background-color: rgba(255,255,255,0.7);
  background-image: url(../images/loading.svg);
  background-repeat: no-repeat;
  background-size: 85px auto;
  background-position: center;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* width: 140px;
  height: 140px;
  left: 50%;
  margin-left: -70px;
  top: 50%;
  margin-top: -30px; */
}

#loading-header {
  background-color: rgba(255, 255, 255, 0.7);
  background-image: url(../images/loading.svg);
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: center;
  position: absolute;
  z-index: 99;
  width: 30px;
  height: 10px;
  top: 4px;
  left: -40px;
}

#ajax-mini-loading {
  background-color: rgba(255,255,255,0.5);
  background-image: url(../images/loading.svg);
  background-repeat: no-repeat;
  background-size: 140px auto;
  background-position: center;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* width: 140px;
  height: 140px;
  left: 50%;
  margin-left: -70px;
  top: 50%;
  margin-top: -30px; */
}

#ajax-field-loading {
  background-color: rgba(255,255,255,0.5);
  background-image: url(../images/loading.svg);
  background-repeat: no-repeat;
  background-size: 20% auto;
  background-position: center;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* width: 140px;
  height: 140px;
  left: 50%;
  margin-left: -70px;
  top: 50%;
  margin-top: -30px; */
}

#container #content .form.form-authentification {
  width: 968px;
  /* height: 304px; */
  border-radius: 20px;
  margin: 0 auto;
  position: relative;
  background: rgb(14,85,98);
  background: linear-gradient(180deg, rgba(14,85,98,1) 0%, rgba(21,101,116,1) 100%);
}

#container #content .form.form-authentification form {
  position: relative;
  width: calc(100% - 4px - 440px);
  /* height: calc(300px - 120px); */
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  padding: 200px 220px 60px 220px;
  background: url(../images/logo.svg) no-repeat left 60px top 60px;
  background-size: 170px auto;
  position: relative;
  left: 1px;
  top: 1px;
}

#container #content .form.form-authentification form .form-group {
  margin: 0 0 35px 0;
}

#container #content .form.form-authentification form .form-group.submit {
  text-align: center;
}

#container #content .form.form-authentification form .form-group:last-of-type {
  margin: 0 0 0 0;
}

#container #content .form.form-authentification form label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 15px 0;
}

#container #content .form.form-authentification form input {
  width: calc(100% - 44px);
  font-size: 15px;
  border-radius: 35px;
  border: 1px solid rgba(34,34,34,0.5);
  background-color: #FFFFFF;
  padding: 22px;
}

#container #content .form.form-authentification form button {
  text-align: center;
  border: none;
  background-color: #29A6BE;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 35px;
  border-radius: 40px;
  color: #fff;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

#container #content .form.form-authentification form button:hover {
  background-color: #15899F;
}

#container #content .form.form-authentification form button:disabled {
  opacity: 0.5;
}

#container #content .form.form-authentification .alert.alert-danger {
  text-align: center;
  font-size: 14px;
  background-color: #BC3C3C;
  color: #fff;
  padding: 10px 0;
  border-radius: 25px;
}

header {
  position: relative;
  margin: 25px 0 0 0;
  z-index: 2;
}

header > div {
  position: relative;
  margin: 0 auto;
  width: calc(100% - 50px);
  background: rgb(14,85,98);
  background: linear-gradient(180deg, rgba(14,85,98,1) 0%, rgba(21,101,116,1) 100%);
  border-radius: 20px;
}

header > div.top-menu-el {
  height: auto;
}

header > div.top-menu-el.hidden {
  height: 0;
  overflow: hidden;
}

header > div > div {
  position: relative;
  left: 1px;
  top: 1px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  width: calc(100% - 4px - 70px);
  padding: 0 35px;
  display: flex;
  align-self: stretch;
}

header .logotype {
  display: block;
  background: url(../images/logo.svg) no-repeat left center;
  background-size: auto 50px;
  width: 100px;
  height: 50px;
  padding: 25px 35px 25px 0;
  border-right: 1px solid #073740;
}

header .topmenu {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  list-style: none;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(255,255,255,0.3);
}

header .topmenu li {
  position: relative;
  padding: 60px 35px 0 35px;
  height: calc(100% - 60px);
  background-repeat: no-repeat;
  background-position: center top 25px;
  background-size: auto 23px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

header .topmenu li.active {
  color: #156574;
  background-color: rgba(255,255,255,1);
  border-top: 2px solid #dddddd;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

header .topmenu li[data-menu-id="item-1"] {
  background-image: url(../images/menuicons/icon-1.svg);
}
header .topmenu li[data-menu-id="item-1"].active {
  background-image: url(../images/menuicons/icon-1_a.svg);
}
header .topmenu li[data-menu-id="item-2"] {
  background-image: url(../images/menuicons/icon-2.svg);
}
header .topmenu li[data-menu-id="item-2"].active {
  background-image: url(../images/menuicons/icon-2_a.svg);
}
header .topmenu li[data-menu-id="item-3"] {
  background-image: url(../images/menuicons/icon-3.svg);
}
header .topmenu li[data-menu-id="item-3"].active {
  background-image: url(../images/menuicons/icon-3_a.svg);
}
header .topmenu li[data-menu-id="item-4"] {
  background-image: url(../images/menuicons/icon-4.svg);
}
header .topmenu li[data-menu-id="item-4"].active {
  background-image: url(../images/menuicons/icon-4_a.svg);
}
header .topmenu li[data-menu-id="item-5"] {
  background-image: url(../images/menuicons/icon-5.svg);
}
header .topmenu li[data-menu-id="item-5"].active {
  background-image: url(../images/menuicons/icon-5_a.svg);
}
header .topmenu li[data-menu-id="item-6"] {
  background-image: url(../images/menuicons/icon-6.svg);
}
header .topmenu li[data-menu-id="item-6"].active {
  background-image: url(../images/menuicons/icon-6_a.svg);
}
header .topmenu li[data-menu-id="item-7"] {
  background-image: url(../images/menuicons/icon-7.svg);
}
header .topmenu li[data-menu-id="item-7"].active {
  background-image: url(../images/menuicons/icon-7_a.svg);
}

header .topmenu li::after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  top: 50%;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255,255,255,0.3);
}

header .topmenu li::before {
  content: '';
  display: block;
  position: absolute;
  left: -3px;
  top: 50%;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255,255,255,0.3);
}

header .topmenu li.active::after,
header .topmenu li.active::before {
  background-color: rgba(255,255,255,1);
}

header .topmenu li:first-of-type::before,
header .topmenu li:last-of-type::after {
  display: none;
}

header .topmenu li .wtongue {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 20px;
  left: 0;
  bottom: -20px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  z-index: 4;
}

header .account {
  /* margin: 0 0 0 auto; */
  margin: 0 0 0 60px;
  display: flex;
  align-items: center;
}

header .account .name-and-logout {
  text-align: right;
  margin: 0 25px 0 0;
}

header .account .name-and-logout .name {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

header .account .name-and-logout .logout {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  padding: 0;
  margin: 10px 0 0 0;
  border: none;
  border-bottom: 1px solid #fff;
  background-color: transparent;
  cursor: pointer;
}

header .account .name-and-logout .logout:hover {
  border: none;
}

header .account .userpic {}

header .account .userpic span {
  background: url(../images/userpic.svg) no-repeat center;
  background-size: 44px auto;
  width: 44px;
  height: 44px;
  display: block;
}

header .search {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 32px 0;
}

header .search form {
  display: flex;
  align-items: center;
}

header .search .form-group {
  position: relative;
}

header .search .faq {
  width: 14px;
  height: 14px;
  background: url(../images/search-faq.svg) no-repeat center;
  background-size: 14px auto;
  margin: 0 7px 0 0;
  cursor: pointer;
}

header .search input {
  background-color: rgba(255,255,255,0.2);
  border: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  transition: 0.1s ease-in-out;
  min-width: 240px;
}

header .search input:focus {
  background-color: #fff;
  border: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  color: #999;
}

header .search button {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 50%;
  margin-top: -8px;
  background-image: url(../images/search-button.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px auto;
  border: none;
  background-color: transparent;
  width: 16px;
  height: 16px;
  cursor: pointer;
}


footer {
  position: absolute;
  bottom: 25px;
  width: calc(100% - 50px);
  left: 25px;
  z-index: 2;
}

footer .copyrights {
  font-size: 12px;
  color: rgba(0,0,0,0.5);
  line-height: 22px;
}

#content #page {
  display: none;

  background-color: #fff;
  width: calc(100% - 50px - 150px);
  margin: 20px auto 0 auto;
  z-index: 3;
  position: relative;
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
  transition: 0.2s ease-in-out;
  padding: 75px;
}

#content #page.showed {
  display: block;
}

#content #page h1 {
  border-bottom: 3px solid #222;
  padding: 0 0 10px 0;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 0 0;
}

#content #page h1 span.title {
  font-size: 30px;
  font-weight: 800;
  color: #222;
  text-transform: uppercase;
  line-height: 30px;
}

#content #page h1 span.close {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 40px;
  background: #222 url(../images/close.svg) no-repeat center;
  background-size: 25px auto;
  right: 0;
  bottom: -35px;
  cursor: pointer;
}

#content #page h1 span.addons {
  position: absolute;
  right: 85px;
  top: -10px;
  text-align: right;
}

#content #page h1 span.addons #orders-reload-timer {
  font-size: 12px;
  font-weight: 300;
  color: rgba(34,34,34,0.5);
}

#content #page h1 span.addons #orders-manual-reload {
  padding: 0;
  border-radius: 5px;
  background-color: transparent;
  border: none;
  display: block;
  margin: 10px 0 0 auto;
}

#content #page h1 span.addons #orders-manual-reload::before {
  content: '';
  display: block;
  position: relative;
  width: 15px;
  height: 15px;
  background-color: #29A6BE;
  -webkit-mask-image: url(../images/retweet-solid.svg);
  mask-image: url(../images/retweet-solid.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: 0.2s ease-in-out;
}

#content #page h1 span.addons .created {
  font-size: 12px;
  font-weight: 400;
  color: rgba(34,34,34,0.5);
}

#content #page h1 span.addons .created i {
  font-style: normal;
}

#content #page h1 span.addons .created .edit-order-create-date {
  cursor: pointer;
  border-bottom: 1px dotted rgba(34,34,34,0.8);
}

#content #page h1 span.addons .created .edit-order-create-date:hover {
  border-bottom: none;
}

#content #page h1 span.addons .info {
  font-size: 14px;
  font-weight: 400;
  color: #222;
  font-weight: bold;
  margin: 0 0 5px 0;
}

#content #page h1 span.funcs {
  margin: 0 0 0 30px;
  line-height: 30px;
}

#content #page h1 span.funcs button {
  border: none;
  padding: 10px 25px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 20px;
  margin: 0 10px 0 0;
}

#page-content {
  margin: 30px 0 0 0;
  height: 100%;
}

#page-content .search-and-filter {
  display: flex;
  align-items: flex-end;
  margin: 0 0 35px 0;
  position: relative;
}

#page-content .search-and-filter .show-search {
  border: none;
  width: 20px;
  height: 20px;
  background-color: #29a6be;
  border: 1px dotted #29a6be;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

#page-content .search-and-filter .show-search::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin: -10px 0 0 -10px;
  top: 50%;
  background-color: #fff;
  -webkit-mask-image: url(../images/search-button-2.svg);
  mask-image: url(../images/search-button-2.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: 0.2s ease-in-out;
  position: relative;
}

#page-content .search-and-filter .show-search:hover,
#page-content .search-and-filter .show-search.active {
  background-color: #19879d;
}

#page-content .search-and-filter .show-search.active {
  width: 10px;
  height: 10px;
  left: -20px;
  padding: 10px 25px 10px 10px;
  top: -10px;
}

#page-content .search-and-filter .show-search.active::before {
  -webkit-mask-image: url(../images/angle-left-solid.svg);
  mask-image: url(../images/angle-left-solid.svg);
}

#page-content .search-and-filter form {
  display: none;
}

#page-content .search-and-filter form.show {
  display: flex;
  position: absolute;
  left: 0;
  bottom: -20px;
  padding: 20px 20px 20px 0;
  background-color: #fff;
  z-index: 9;
}

#page-content .search-and-filter form.show-d {
  display: block;
  background-color: #fff;
  z-index: 9;
}

#page-content .search-and-filter form .form-group {
  position: relative;
}

#page-content .search-and-filter form input {
  font-size: 12px;
  border-radius: 10px;
  font-weight: 300;
  background-color: #e5e5e5;
  box-shadow: inset 0 4px 4px rgba(0,0,0,0.1);
  border: none;
  padding: 14px;
  min-width: 400px;
}

#page-content .search-and-filter form button[type="submit"] {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 50%;
  margin-top: -8px;
  background-image: url(../images/search-button-2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px auto;
  border: none;
  background-color: transparent;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Скроллбар */
* {
  scrollbar-width: none;
  scrollbar-color: #888 #f1f1f1;
}

/* Ползунок скроллбара */
*::-webkit-scrollbar {
  width: 5px;
  height: 12px;
}

*::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Трек скроллбара */
*::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

/* Угловая область скроллбара */
*::-webkit-scrollbar-corner {
  background-color: #f1f1f1;
}

#page-content .reference-elements-list {
  margin: 40px 0 0 0;
}

#page-content .reference-elements-list .list .header,
#page-content .orders-list .list .header,
#page-content .manage-service .list .header {
  display: table;
  width: calc(100% - 10px);
  table-layout: fixed;
}

#page-content .reference-elements-list .list .header > div,
#page-content .orders-list .list .header > div,
#page-content .manage-service .list .header > div {
  display: table-cell;
  background-color: rgba(34,34,34,0.1);
  padding: 10px 20px;
  /*border-right: 2px solid #fff;*/
}

#page-content .orders-list .list .header > div.col-num-3 {
  width: 200px;
}

#page-content .orders-list .list .header > div.col-num-1 {
  display: none;
  width: 125px;
}

#page-content .orders-list .list .header > div.col-num-2 {
  width: 250px;
}

#page-content .reference-elements-list .list .header > div.sorting-th,
#page-content .orders-list .list .header > div.sorting-th {
  /*display: flex;*/
  /*align-items: center;*/
  vertical-align: middle;
}

#page-content .reference-elements-list .list .header > div.sorting-th .sort,
#page-content .orders-list .list .header > div.sorting-th .sort {
  background-image: url(../images/sort-desc-icon.svg);
  background-repeat: no-repeat;
  background-size: 15px auto;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 0 0 10px;
  cursor: pointer;
}

#page-content .reference-elements-list .list .header > div.sorting-th .sort[data-current-sort="asc"],
#page-content .orders-list .list .header > div.sorting-th .sort[data-current-sort="asc"] {
  transform: rotate(180deg);
}

#page-content .orders-list .list .header > div.col-num-7 {
  text-align: center;
  width: 120px;
}

#page-content .orders-list .list .data .el > div.col-num-7 {
  width: 120px;
}

@keyframes flash-insert {
  from {
    background-color: #29a6be;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  to {
    background-color: transparent;
  }
}

#page-content .orders-list .data .el.flash-insert {
  animation: flash-insert 2s ease-out;
}

#page-content .reference-elements-list .list .header > div:last-of-type,
#page-content .orders-list .list .header > div:last-of-type {
  border-right: none;
}

#page-content .reference-elements-list .list .data,
#page-content .orders-list .list .data,
#page-content .manage-service .list .data {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

#page-content .orders-list .list .showmore {
  position: absolute;
  right: 13px;
  bottom: 20px;
}

#page-content .orders-list .list .showmore button {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

#page-content .reference-elements-list .list .scrolling-func,
#page-content .orders-list .list .scrolling-func {
  margin: 20px 0 0 0;
}

#page-content .reference-elements-list .list .scrolling-func span,
#page-content .orders-list .list .scrolling-func span {
  background-image: url(../images/scrolling-button.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 30px;
  height: 30px;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

#page-content .reference-elements-list .list .scrolling-func span.finish,
#page-content .orders-list .list .scrolling-func span.finish {
  opacity: 0.2;
}

#page-content .reference-elements-list .list .data .el,
#page-content .orders-list .list .data .el,
#page-content .manage-service .list .data .el {
  display: table;
  width: 100%;
  table-layout: fixed;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  border-bottom: 1px solid #e8e8e8;
}

#page-content .reference-elements-list .list .data .el.hidden,
#page-content .orders-list .list .data .el.hidden,
#page-content .manage-service .list .data .el.hidden {
  display: none;
}

#page-content .reference-elements-list .list .data .el:hover,
#page-content .orders-list .list .data .el:hover,
#page-content .manage-service .list .data .el:hover {
  background-color: rgba(217,217,217,0.3);
}

/*#page-content .reference-elements-list .list .data .el:nth-child(even),*/
/*#page-content .orders-list .list .data .el:nth-child(even),*/
/*#page-content .manage-service .list .data .el:nth-child(even) {*/
/*  background-color: rgba(217,217,217,0.2);*/
/*}*/

#page-content .reference-elements-list .list .data .el > div,
#page-content .orders-list .list .data .el > div,
#page-content .manage-service .list .data .el > div {
  display: table-cell;
  padding: 15px 20px;
  /*border-right: 2px solid #fff;*/
  font-size: 13px;
  vertical-align: top;
}

#page-content .orders-list .list .data .el > div.col-num-2 {
  width: 250px;
  position: relative;
}

#page-content .orders-list .list .data .el > div.col-num-3 {
  width: 200px;
}

#page-content .orders-list .list .data .el > div.col-num-8 .jobs-list .job {
  margin: 0 0 5px 0;
}

#page-content .orders-list .list .data .el > div.col-num-1 {
  display: none;
  width: 125px;
}

#page-content .manage-service .tab-container[data-tab-content="users"] .col-num-0 {
  width: 100px;
}

#page-content .manage-service .tab-container[data-tab-content="users"] .list .data .el > div.col-num-5 {
  position: relative;
  display: flex;
  align-items: center;
}

#page-content .manage-service .tab-container[data-tab-content="users"] .col-num-5 label {
  position: relative;
}

#page-content .manage-service .tab-container[data-tab-content="users"] .col-num-5 label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#page-content .manage-service .tab-container[data-tab-content="users"] .col-num-5 label span {
  border: 1px solid rgba(34, 34, 34, 0.5);
  padding: 5px 10px;
  cursor: pointer;
}

#page-content .manage-service .tab-container[data-tab-content="users"] .col-num-5 label:first-of-type span {
  border-right: none;
  border-radius: 10px 0 0 10px;
}

#page-content .manage-service .tab-container[data-tab-content="users"] .col-num-5 label:last-of-type span {
  border-radius: 0 10px 10px 0;
}
/*#page-content .order-data .form-data .form-group.submits input#order_status_0:checked ~ span {*/
#page-content .manage-service .tab-container[data-tab-content="users"] .col-num-5 label input:checked ~ span {
  border: 1px solid #417d89;
  background-color: #417d89;
  color: #fff;
}

#page-content .orders-list .list .data .el > div.col-num-2 small {
  color: #999;
}

#page-content .orders-list .list .data .el > div .delays {
  display: block;
  text-align: right;
  position: absolute;

  bottom: 5px;
  right: 5px;
}

#page-content .orders-list .list .data .el > div .delays span {
  padding: 2px 4px;
  margin: 2px 0 0 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;

  display: block;
  border-radius: 5px;
  margin: 0;
}

#page-content .orders-list .list .data .el .workers-list {
  position: relative;
}

#page-content .orders-list .list .data .el .workers-list .worker {
  display: inline-block;
  color: #2AA6BD;
  border-bottom: 1px dotted #2AA6BD;
  cursor: pointer;
  margin: 0 8px 2px 0;
}

#page-content .orders-list .list .data .el .workers-list .worker:last-of-type {
  margin: 0 0 0 0;
}

#page-content .orders-list .list .data .el .workers-list .worker .jobs-list {
  position: absolute;
  background-color: #fff;
  z-index: 1;
  padding: 10px 15px;
  border-radius: 5px;
  left: 0;
  top: 25px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

#page-content .orders-list .list .data .el .workers-list .worker .jobs-list span {
  display: block;
  margin: 0 0 5px 0;
  color: #222;
}

#page-content .orders-list .list .data .el .workers-list .worker:hover {
  border: none;
}

#page-content .orders-list .list .data .el > div:last-of-type {
  border-right: none;
}

#page-content .orders-list .list .data > .el > div.col-num-1 span {
  padding: 3px 20px 3px 30px;
}

#page-content .orders-list .list .data > .el > div.col-num-1 span.warning-bg,
#page-content .orders-list .list .data > .el > div.col-num-2 .warning-bg {
  background-image: url(../images/warning-icon.svg);
  background-repeat: no-repeat;
  background-position: left 5px center;
  background-size: 14px auto;
  border-radius: 7px;
}

#page-content .orders-list .list .data > .el > div.col-num-2 .warning-bg {
  padding: 5px 0 5px 28px;
  margin: 0 0 5px 0;
  width: 70%;
}

#page-content .orders-list .list .data > .el > div.col-num-7 span.status {
  width: 30px;
  height: 30px;
  display: block;
  background-size: 100% auto;
  margin: 0 auto;
}

#page-content .orders-list .list .data > .el > div.col-num-7 span.status.status_0 {
  background-image: url(../images/issue_status_0.svg);
}
#page-content .orders-list .list .data > .el > div.col-num-7 span.status.status_1 {
  background-image: url(../images/issue_status_1.svg);
}
#page-content .orders-list .list .data > .el > div.col-num-7 span.status.status_2 {
  background-image: url(../images/issue_status_2.svg);
}
#page-content .orders-list .list .data > .el > div.col-num-7 span.status.status_3 {
  background-image: url(../images/issue_status_3.svg);
}

#page-content .orders-list .list .data > .el > div.col-num-7 span {}

#page-content .orders-list .search-and-filter .filters {
  display: table;
  width: calc(100% - 10px);
  table-layout: fixed;
  /*width: 100%;*/
  /*display: flex;*/
  /*align-items: flex-end;*/
  /*justify-content: flex-start;*/
  /*margin: 0;*/
}

#page-content .orders-list .search-and-filter .filters > div {
  margin: 0;
  padding: 0 20px;
  display: table-cell;
}

#page-content .orders-list .search-and-filter .filters > div.delaycheck,
#page-content .orders-list .search-and-filter .filters > div.reset {
  vertical-align: bottom;
}

#page-content .orders-list .search-and-filter .filters > div.reset {
  padding: 0;
}

#page-content .orders-list .search-and-filter .filters > div.reset .reset-filter {
  padding: 7px 0;
  border-radius: 10px;
  font-size: 12px;
  line-height: 28px;
  text-align: left;
  font-weight: 600;
  width: 34px;
  opacity: 0.5;
  display: flex;
  align-items: center;
  background: #d9d9d9 url(../images/close.svg) no-repeat center;
  background-size: 14px auto;
  transition: 0.2s ease-in-out;
}

#page-content .orders-list .search-and-filter .filters > div.reset .reset-filter:hover {
  opacity: 1;
}

/*#page-content .orders-list .search-and-filter .filters > div.reset .reset-filter::before {*/
/*  content: '';*/
/*  display: block;*/
/*  width: 100%;*/
/*  height: 13px;*/
/*  background-color: #fff;*/
/*  -webkit-mask-image: url(../images/close.svg);*/
/*  mask-image: url(../images/close.svg);*/
/*  -webkit-mask-repeat: no-repeat;*/
/*  mask-repeat: no-repeat;*/
/*  -webkit-mask-size: contain;*/
/*  mask-size: contain;*/
/*  -webkit-mask-position: center;*/
/*  mask-position: center;*/
/*  transition: 0.2s ease-in-out;*/
/*  position: relative;*/
/*}*/








#page-content .orders-list .search-and-filter .filters > div:last-of-type {
  margin: 0;
}

#page-content .orders-list .search-and-filter .filters h3 {
  font-size: 14px;
  margin: 0 0 5px 0;
  font-weight: 600;
}

#page-content .orders-list .search-and-filter .filters input,
#page-content .orders-list .search-and-filter .filters select {
  padding: 12px;
  font-size: 12px;
  font-weight: 300;
  min-width: 200px;
  border-radius: 10px;
  border: 1px solid rgba(34,34,34,0.5);
  margin: 0 10px 0 0;
}

#page-content .orders-list .search-and-filter .filters > div.periods input {
  width: calc(50% - 30px);
  min-width: auto;
}

#page-content .orders-list .search-and-filter .filters select {
  width: 100%;
}

#page-content .orders-list .search-and-filter .filters .select2-container {
  font-size: 12px;
  font-weight: 300;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(34,34,34,0.5);
  margin: 0 10px 0 0;
  padding: 6px 0px;
}

#page-content .orders-list .search-and-filter .filters .select2-container.select2-container--open,
#page-content .orders-list .search-and-filter .filters .select2-container.select2-container--focus {
  background-color: #e0c002 !important;
  border: 1px solid #e0c002 !important;
}

#page-content .orders-list .search-and-filter .filters .select2-container--default .select2-selection--single {
  border: none;
  border-radius: 0;
}

#page-content .orders-list .search-and-filter .filters .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
}

.select2-results__option {
  font-size: 12px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #29a6be;
}

#page-content .orders-list .search-and-filter .filters .select2-container--default .select2-selection--single .select2-selection__clear span {
  background: rgba(34, 34, 34, 0.4) url(../images/close.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: block;
  font-size: 0;
  background-size: 10px;
  border-radius: 10px;
}

#page-content .orders-list .search-and-filter .filters input,
#page-content .orders-list .search-and-filter .filters select:last-of-type {
  margin: 0;
}

#page-content .orders-list .search-and-filter .filters select:last-of-type {
  margin: 0;
}

#page-content .order-data .block-label {
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  background: url(../images/new-order-label-bg.svg) no-repeat left 50px center;
  background-size: auto 20px;
}

#page-content .order-data .block-label::before {
  display: inline-block;
  font-size: 19px;
  font-weight: 900;
  color: rgba(0,0,0,0.7);
  text-align: center;
  background-color: #E0C002;
  border-radius: 20px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin: 0 25px 0 0
}

#page-content .order-data {
  display: flex;
  height: 100%;
}

#page-content .order-data .step {
  position: relative;
}

#page-content .order-data .step[data-step-disabled="true"] {
  opacity: 0.3;
}

#page-content .order-data .step[data-step-disabled="true"]::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);
  z-index: 2;
}

#page-content .new-reference,
#page-content .new-reference-element,
#page-content .edit-reference-element,
#page-content .edit-reference,
#page-content .user-data {
  height: 100%;
}

#page-content .new-reference form,
#page-content .new-reference-element form,
#page-content .edit-reference-element form,
#page-content .edit-reference form,
#page-content .user-data form {
  width: 100%;
  height: 100%;
  position: relative;
}

#page-content .order-data .step-1 {
  width: calc(50% - 150px);
}

#page-content .order-data .step-2 {
  width: 50%;
  margin: 0 0 0 auto;
}

#page-content .order-data .step-1 .block-label::before {
  content: '1';
}

#page-content .order-data .step-2 .block-label::before {
  content: '2';
}

#page-content .order-data form {
  height: 100%;
}

#page-content .new-reference form {
  display: flex;
}

#page-content .new-reference form .form-data {
  width: 50%;
}

#page-content .new-reference-element .form-data,
#page-content .edit-reference-element .form-data{
  display: flex;
  flex-wrap: wrap;
}

#page-content .order-data .form-data {
  margin: 40px 0 0 0;
  position: relative;
  height: calc(100% - 100px);
}

#page-content .reports-list .form-data {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#page-content .reports-list .form-data .form-group {
  flex: 0 0 25%;
  width: 25%;
}

#page-content .reports-list .form-data .form-group.periods > div > div {
  display: flex;
  gap: 10px;
}

#page-content .reports-list .form-data .form-group.periods input[type="text"] {
}

#page-content .new-reference-element .form-data .form-group,
#page-content .edit-reference-element .form-data .form-group,
#page-content .edit-reference .form-data .form-group,
#page-content .user-data .form-data .form-group,
#page-content .reports-list .form-data .form-group,
#page-content .order-data .form-data .form-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 20px 0;
}

#page-content .reports-list .form-data .form-group.periods > div span {
  position: relative;
}

#page-content .reports-list .form-data .form-group.periods > div span button.field__clear {
  cursor: pointer;
  font-weight: bold;
  height: 26px;

  background-color: transparent;
  border: none;
  font-size: 1em;
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 10px;
  margin: 0;
}

#page-content .reports-list .form-data .form-group.periods > div span button.field__clear.hidden {
  display: none;
}

#page-content .reports-list .form-data .form-group.periods > div span button.field__clear > span {
  background: rgba(34, 34, 34, 0.4) url(../images/close.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: block;
  font-size: 0;
  background-size: 10px;
  border-radius: 10px;
}

#page-content .new-reference-element .form-data .form-group,
#page-content .edit-reference-element .form-data .form-group {
  min-width: calc(25% - 40px);
  margin: 0 40px 20px 0;
}

#page-content .new-reference-element .form-data .form-group > div,
#page-content .edit-reference-element .form-data .form-group > div,
#page-content .reports-list .form-data .form-group > div {
  position: relative;
  width: 100%;
}

#page-content .new-reference .form-data .form-group.submits,
#page-content .new-reference .form-data .form-group,
#page-content .new-reference-element .form-data .form-group.submits,
#page-content .edit-reference-element .form-data .form-group.submits,
#page-content .edit-reference .form-data .form-group {
  margin: 0 0 50px 0;
}

#page-content .new-reference .form-data .fields-list .form-group {
  margin: 0 0 20px 0;
}

#page-content .archive-order.order-data .form-data .form-group {
  margin: 0 0 50px 0;
}

#page-content .new-reference .form-data .form-group.submits,
#page-content .edit-reference-element .form-data .form-group.submits,
#page-content .new-reference-element .form-data .form-group.submits,
#page-content .edit-reference .form-data .form-group.submits,
#page-content .user-data .form-data .form-group.submits,
#page-content .reports-list .form-data .form-group.submits,
#page-content .order-data .form-data .form-group.submits {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  align-items: center;
}

#page-content .new-reference-element .form-data .form-group.submits label,
#page-content .edit-reference-element .form-data .form-group.submits label,
#page-content .order-data .form-data .form-group.submits label {
  width: auto;
  margin: 0 10px 0 0;
}

#page-content .new-reference-element .form-data .form-group.submits input,
#page-content .edit-reference-element .form-data .form-group.submits input,
#page-content .order-data .form-data .form-group.submits input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#page-content .new-reference-element .form-data .form-group.submits input ~ span,
#page-content .edit-reference-element .form-data .form-group.submits input ~ span,
#page-content .order-data .form-data .form-group.submits input ~ span {
  padding: 10px 20px 10px 40px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  border-radius: 70px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: left 5px center;
  background-size: 25px auto;
}

#page-content .order-data .form-data .form-group.submits input#order_status_0 ~ span {
  border: 1px dotted rgba(34,34,34,0.2);
  color: rgba(34,34,34,0.2);
  background-image: url(../images/issue_status_0.svg);
}

#page-content .order-data .form-data .form-group.submits input#order_status_0:checked ~ span {
  background-color: rgba(34,34,34,0.2);
  color: #fff;
}

#page-content .order-data .form-data .form-group.submits input#order_status_1 ~ span {
  border: 1px dotted #75A1BE;
  color: #75A1BE;
  background-image: url(../images/issue_status_1.svg);
}

#page-content .order-data .form-data .form-group.submits input#order_status_1:checked ~ span {
  background-color: #75A1BE;
  color: #fff;
}

#page-content .order-data .form-data .form-group.submits input#order_status_2 ~ span {
  border: 1px dotted #A2B97F;
  color: #A2B97F;
  background-image: url(../images/issue_status_2.svg);
}

#page-content .order-data .form-data .form-group.submits input#order_status_2:checked ~ span {
  background-color: #A2B97F;
  color: #fff;
}

#page-content .order-data .form-data .form-group.submits input#order_status_3 ~ span {
  border: 1px dotted #C9878C;
  color: #C9878C;
  background-image: url(../images/issue_status_3.svg);
}

#page-content .order-data .form-data .form-group.submits input#order_status_3:checked ~ span {
  background-color: #C9878C;
  color: #fff;
}

#page-content .order-data .form-data .form-group.submits .add-photos-to-order,
#page-content .order-data .form-data .form-group.submits .submit-and-close-2,
#page-content .order-data .form-data .form-group.submits .edit-and-close,
#page-content .order-data .form-data .form-group.submits .reopenorder-and-close,
#page-content .user-data .form-data .form-group.submits .edit-and-close,
#page-content .user-data .form-data .form-group.submits .create-and-close,
#page-content .order-data .form-data .form-group.submits .submit-and-close,
#page-content .reports-list .form-data .form-group.submits .show-report,
#page-content .reports-list .form-data .form-group.submits .download-report {
  padding: 15px 25px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 40px;
  margin: 0 20px 0 auto;
}

#page-content .order-data .form-data .form-group.submits .reopenorder-and-close {
  margin: 0 20px;
}

#page-content .reports-list .form-data .form-group.submits .download-report {
  margin: 0;
}

#page-content .order-data .form-data .form-group.submits .show-all-order-photos {
  margin: 0 0 0 auto;
  padding: 0 0 0 0;
  background-color: transparent;
  border: none;
  color: #29A6BE;
  border-bottom: 1px dotted #29A6BE;
  cursor: pointer;
}

#page-content .order-data .form-data .form-group.submits .show-all-order-photos:hover {
  border-bottom: none;
}

#page-content .order-data .form-data .form-group.submits .add-photos-to-order {
  background-image: url(../images/images-regular.svg);
  background-repeat: no-repeat;
  background-position: center left 15px;
  background-size: 20px auto;
  margin: 0 0 0 20px;
  padding: 15px 25px 15px 50px;
  color: #222;
}

#page-content .order-data .form-data .form-group.submits .submit-and-close-2 {
  margin: 0 0 0 20px;
}

#page-content .new-reference .form-data .form-group.submits .edit-and-close,
#page-content .new-reference-element .form-data .form-group.submits .edit-and-close,
#page-content .edit-reference-element .form-data .form-group.submits .edit-and-close,
#page-content .edit-reference .form-data .form-group.submits .edit-and-close,
#page-content .order-data .form-data .form-group.submits .edit-and-continue,
#page-content .order-data .form-data .form-group.submits .submit-and-continue {
  padding: 15px 60px 15px 25px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 40px;
  position: relative;
  /* margin: 0 0 0 auto; */
  transition: 0.1s ease-in-out;
}

#page-content .new-reference .form-data .form-group.submits .edit-and-close:focus,
#page-content .new-reference-element .form-data .form-group.submits .edit-and-close:focus,
#page-content .edit-reference-element .form-data .form-group.submits .edit-and-close:focus,
#page-content .edit-reference .form-data .form-group.submits .edit-and-close:focus,
#page-content .order-data .form-data .form-group.submits .edit-and-continue:focus,
#page-content .order-data .form-data .more-jobs:focus,
#page-content .new-reference .form-data .more-fields:focus,
#page-content .order-data .form-data .form-group.submits .submit-and-continue:focus {
  box-shadow: 0px 3px 0 #156574;
}

#page-content .new-reference .form-data .form-group.submits .edit-and-close:active,
#page-content .new-reference-element .form-data .form-group.submits .edit-and-close:active,
#page-content .edit-reference-element .form-data .form-group.submits .edit-and-close:active,
#page-content .edit-reference .form-data .form-group.submits .edit-and-close:active,
#page-content .order-data .form-data .form-group.submits .edit-and-continue:active,
#page-content .order-data .form-data .form-group.submits .submit-and-continue:active {
  top:  3px;
  box-shadow: none;
}

#page-content .edit-reference .form-data .form-group.submits .remove-and-close,
#page-content .edit-reference-element .form-data .form-group.submits .remove-and-close {
  padding: 15px 60px 15px 25px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 40px;
  position: relative;
  margin: 0 20px 0 auto;
}

#page-content .new-reference .form-data .form-group.submits .edit-and-close,
#page-content .new-reference-element .form-data .form-group.submits .edit-and-close {
  margin: 0 20px 0 auto;
}

#page-content .new-reference .form-data .form-group.submits .edit-and-close::after,
#page-content .new-reference-element .form-data .form-group.submits .edit-and-close::after,
#page-content .edit-reference-element .form-data .form-group.submits .edit-and-close::after,
#page-content .edit-reference .form-data .form-group.submits .edit-and-close::after,
#page-content .order-data .form-data .form-group.submits .edit-and-continue::after,
#page-content .order-data .form-data .form-group.submits .submit-and-continue::after {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 47px;
  background-color: #156574;
  border-radius: 30px;
  right: 0;
  top: 0;
  background-image: url(../images/arrow-right_w.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px auto;
}

#page-content .edit-reference .form-data .form-group.submits .remove-and-close::after,
#page-content .edit-reference-element .form-data .form-group.submits .remove-and-close::after {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 47px;
  background-color: #BC3C3C;
  border-radius: 30px;
  right: 0;
  top: 0;
  background-image: url(../images/remove_w.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px auto;
}

#page-content .order-data .form-data .form-group .edit-date i {
  font-style: normal;
  font-weight: bold;
}

#page-content .new-reference .form-data .form-group.submits .cancel,
#page-content .new-reference-element .form-data .form-group.submits .cancel,
#page-content .edit-reference-element .form-data .form-group.submits .cancel,
#page-content .edit-reference .form-data .form-group.submits .cancel,
#page-content .order-data .form-data .form-group.submits .cancel,
#page-content .order-data .form-data .form-group.submits .edit-close-date,
#page-content .user-data .form-data .form-group.submits .cancel {
  font-size: 15px;
  font-weight: 600;
  color: rgba(34,34,34,0.7);
  border-bottom: 1px dotted rgba(34,34,34,0.7);
  cursor: pointer;
  margin: 0 20px 0 0;
}

#page-content .new-reference .form-data .form-group.submits .cancel:hover,
#page-content .new-reference-element .form-data .form-group.submits .cancel:hover,
#page-content .edit-reference-element .form-data .form-group.submits .cancel:hover,
#page-content .edit-reference .form-data .form-group.submits .cancel:hover,
#page-content .order-data .form-data .form-group.submits .cancel:hover,
#page-content .order-data .form-data .form-group.submits .edit-close-date:hover,
#page-content .user-data .form-data .form-group.submits .cancel:hover {
  border: none;
}

#page-content .order-data .form-data .form-group > div {
  width: calc(50% - 20px);
  position: relative;
}

#page-content .order-data .form-data .form-group > div:last-of-type {
  width: 50%;
  margin: 0 0 0 auto;
}

#page-content .order-data .form-data .form-group > div.el-value {
  width: 100%;
  margin: 0 0 0 0;
}

#page-content .order-data .form-data .form-group > div.el-value[data-form-el-id="order_priority"] span {
  font-size: 12px;
  background-color: #E0C002;
  border-radius: 10px;
  padding: 10px 20px 10px 30px;
  background: #E0C002 url(../images/warning-icon.svg) no-repeat left 10px center;
  background-size: 12px auto;
}

#page-content .new-reference .form-data .form-group label,
#page-content .reports-list .form-data .form-group label,
#page-content .new-reference-element .form-data .form-group label,
#page-content .edit-reference-element .form-data .form-group label,
#page-content .edit-reference .form-data .form-group label,
#page-content .user-data .form-data .form-group label,
#page-content .order-data .form-data .form-group label {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  margin: 0 0 10px 10px;
  width: 100%;
}

#page-content .new-reference .form-data .form-group input[type="text"],
#page-content .new-reference .form-data .form-group select,
#page-content .reports-list .form-data .form-group select,
#page-content .reports-list .form-data .form-group input[type="text"],
#page-content .new-reference-element .form-data .form-group input[type="text"],
#page-content .edit-reference-element .form-data .form-group input[type="text"],
#page-content .edit-reference .form-data .form-group input[type="text"],
#page-content .user-data .form-data .form-group input[type="text"],
#page-content .order-data .form-data .form-group input[type="text"],
#page-content .order-data .form-data .form-group select {
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 400;
  border: 1px solid rgba(34,34,34,0.5);
  border-radius: 20px;
  width: calc(100% - 40px);
}

select + span.select2:focus, select + span.select2 *:focus {}


textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
#page-content .select2-container *:focus,
.select2-container--open .select2-selection {
  background-color: #e0c002 !important;
  border: 1px solid #e0c002 !important;
}

#page-content .order-data .form-data .form-group .select2-selection,
#page-content .reports-list .form-data .form-group .select2-selection {
  height: 49px;
  border-radius: 20px;
}

#page-content .order-data .form-data .form-group .select2-selection .select2-selection__rendered,
#page-content .reports-list .form-data .form-group .select2-selection .select2-selection__rendered {
  line-height: 49px;
}

#page-content .order-data .form-data .form-group .select2-selection .select2-selection__clear,
#page-content .order-data .form-data .form-group .select2-selection .select2-selection__arrow,
#page-content .reports-list .form-data .form-group .select2-selection .select2-selection__clear,
#page-content .reports-list .form-data .form-group .select2-selection .select2-selection__arrow {
  height: 47px;
}

#page-content .order-data .form-data .form-group .select2-selection .select2-selection__clear span,
#page-content .reports-list .form-data .form-group .select2-selection .select2-selection__clear span {
  background: rgba(34, 34, 34, 0.4) url(../images/close.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: block;
  font-size: 0;
  background-size: 10px;
  border-radius: 10px;
}

#page-content .new-reference .form-data .form-group select {
  width: calc(50% + 40px);
}

#page-content .new-reference .fields-ready-list h2 {
  margin: 0 0 20px 0;
}

#page-content .new-reference .form-data .form-group input[type="text"],
#page-content .user-data .form-data .form-group input[type="text"],
#page-content .edit-reference .form-data .form-group input[type="text"] {
  width: 50%;
}

#page-content .new-reference-element .form-data .form-group input[type="text"],
#page-content .edit-reference-element .form-data .form-group input[type="text"] {
  width: calc(100% - 40px);
}

#page-content .new-reference-element .form-data .form-group select,
#page-content .edit-reference-element .form-data .form-group select {
  width: 100%;
}

#page-content .new-reference-element .form-data .form-group input[type="text"][data-field-type="sp"],
#page-content .edit-reference-element .form-data .form-group input[type="text"][data-field-type="sp"],
#page-content .order-data .form-data .form-group input[type="text"][data-field-type="sp"] {
  background-image: url(../images/arrow-select-down.svg);
  background-repeat: no-repeat;
  background-position: right 40px center;
  background-size: 12px auto;
  cursor: pointer;
}

#page-content .new-reference-element .form-data .form-group span.choose-coordinates,
#page-content .edit-reference-element .form-data .form-group span.choose-coordinates {
  background: url(../images/map-marked-alt-solid.svg) no-repeat center;
  width: 17px;
  height: 17px;
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 15px;
  display: block;
  opacity: 0.5;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

#page-content .new-reference-element .form-data .form-group span.choose-coordinates:hover,
#page-content .edit-reference-element .form-data .form-group span.choose-coordinates:hover {
  opacity: 1;
}

#page-content .order-data .form-data .form-group select {
  width: 100%;
}

#page-content .order-data .form-data .form-group input[type="text"].empty,
#page-content .order-data .form-data .form-group select.empty,
#page-content .new-reference .form-data .form-group input[type="text"].empty,
#page-content .new-reference .form-data .form-group select.empty,
#page-content .user-data .form-data .form-group input[type="text"].empty {
  border-color: #ff7e7e;
  background-color: #ff00000f;
}

#page-content .orders-list .filters input[type="checkbox"],
#page-content .order-data .form-data .form-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#page-content .orders-list .filters label[for="orders_delays"],
#page-content .order-data .form-data .form-group label[for="order_priority"] {
  margin: 0;
  display: inline-block;
  width: auto;
}

#page-content .orders-list .filters input[type="checkbox"] ~ span,
#page-content .order-data .form-data .form-group input[type="checkbox"] ~ span {
  display: block;
  width: 140px;
  padding: 12px 35px 12px 70px;
  border: 1px dotted rgba(34,34,34,0.5);
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  background-image: url(../images/warning-icon.svg);
  background-repeat: no-repeat;
  background-position: left 25px center;
  background-size: 25px auto;
  margin: 0 0 0 0;
  cursor: pointer;
  opacity: 0.5;
}

#page-content .orders-list .filters .delaycheck {
  margin: 0 0 0 10px;
}

#page-content .orders-list .filters input[type="checkbox"] ~ span {
  padding: 6px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 28px;
  background-size: 12px auto;
  background-position: center;
  text-align: left;
  font-weight: 600;
  width: 20px;
  opacity: 1;
}

#page-content .orders-list .filters input[type="checkbox"]:checked ~ span,
#page-content .order-data .form-data .form-group input[type="checkbox"]:checked ~ span {
  background-color: #E0C002;
  opacity: 1;
  color: rgba(34,34,34,0.7);
  border: 1px dotted rgba(34,34,34,0.5);
}

#page-content .user-data .form-data .roles-list .checkboxes {
  display: flex;
  flex-wrap: wrap;
}

#page-content .user-data .form-data .roles-list .checkboxes label {
  width: auto;
  margin: 0 0 0 0;
}

#page-content .user-data .form-data .roles-list .checkboxes input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#page-content .user-data .form-data .roles-list .checkboxes input[type="radio"] ~ span {
  display: block;
  padding: 5px 15px;
  text-transform: none;
  border: 1px dotted rgba(34,34,34,0.5);
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  margin: 0 15px 0 0;
  cursor: pointer;
  opacity: 0.5;
  font-weight: normal;
}

#page-content .user-data .form-data .roles-list .checkboxes input[type="radio"]:checked ~ span {
  background-color: #E0C002;
  opacity: 1;
  color: rgba(34,34,34,0.7);
  border: 1px dotted rgba(34,34,34,0.5);
}

#page-content .order-data .form-data .order-photos {
  display: none;
}

#page-content .order-data .form-data .workers-list {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  /* max-height: 120px; */
  width: 100%;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  margin: 5px 0 0 0;

  .wj-el {
    flex: 0 0 auto;
    position: relative;
    margin: 0 10px 0 0;
    border: 1px dotted #999;
    padding: 7px;
    border-radius: 10px;
  }

.wj-el .remove-worker-jobs {
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    background: url(../images/close_b.svg) no-repeat center;
    background-size: 10px auto;
}

.new-reference .fields-ready-list .list .remove-field {
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  background: url(../images/close_b.svg) no-repeat center;
  background-size: 10px auto;
}
}

#page-content .order-data .form-data .workers-list > div {
  width: 250px;
  border: 1px dotted rgba(34,34,34,0.5);
  border-radius: 20px;
  padding: 15px;
  font-size: 12px;
  font-weight: 400;
  margin: 10px 10px 0 0;
}

#page-content .order-data .form-data .workers-list > div > span {
  display: block;
}

#page-content .order-data .form-data .workers-list .work-photos {
  display: flex;
  align-items: flex-start;
  margin: 0 0 7px 0;
}

#page-content .order-data .form-data .workers-list .work-photos span.add-photos.photo-icon {
  display: block;
  background: url(../images/images-regular.svg) no-repeat center;
  width: 20px;
  height: 20px;
  margin: 0 20px 0 0;
  opacity: 0.3;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

#page-content .order-data .form-data .workers-list .work-photos span.add-photos.photo-icon:hover {
  opacity: 0.8;
}

#page-content .order-data .form-data .workers-list .work-photos .photos-list {
  display: flex;
  width: calc(100% - 80px);
  max-height: 25px;
  overflow: hidden;
}

#page-content .archive-order.order-data .form-data .workers-list .work-photos .photos-list {
  width: calc(100% - 5px);
}

#page-content .order-data .form-data .workers-list .work-photos .photos-list .after-photos {
  margin: 0 0 0 auto;
}

#page-content .order-data .form-data .workers-list .work-photos .photos-list .work-photo {
  display: inline-block;
  width: 20px;
  height: 20px;
  overflow: hidden;
  margin: 0 -5px 0 0;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.7);
}

#page-content .order-data .form-data .workers-list .work-photos .photos-list .work-photo img {
  height: 20px;
  width: 20px;
}

#page-content .order-data .form-data .workers-list > div > ul {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
}

#page-content .order-data .form-data .workers-list > div > ul li {
  /*margin: 10px 0;*/
  padding: 10px 0;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #dadada;
}

#page-content .order-data .form-data .workers-list > div > ul li:last-of-type {
  border-bottom: none;
}

#page-content .order-data .form-data .workers-list > div > ul li .quantity {
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
}

#page-content .order-data .form-data .workers-list > div > ul li .quantity button {
  display: block;
  padding: 3px 5px;
  background-color: #e6e6e6;
  border: 1px solid #d0d0d0;
  border-radius: 30px;
  line-height: 12px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  margin: 0 5px;
}

#page-content .order-data .form-data .workers-list > div > ul li .quantity button:hover {
  background-color: #9c9c9c;
}

#page-content .order-data .form-data .more-workers-chooser{
  display: flex;
  align-items: center;
}

#page-content .order-data .form-data .more-jobs,
#page-content .new-reference .form-data .more-fields {
  padding: 7px 20px 7px 30px;
  font-size: 12px;
  color: #fff;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  margin: 0 0 0 auto;
}

#page-content .order-data .form-data .more-jobs::before,
#page-content .new-reference .form-data .more-fields::before {
  content: '';
  display: block;
  position: absolute;
  background: #156574 url(../images/plus_w.svg) no-repeat center;
  background-size: 12px auto;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  left: 4px;
  top: 50%;
  margin-top: -10px;
}

#page-content .new-reference .fields-ready-list .list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

#page-content .new-reference .fields-ready-list .list li {
  position: relative;
  border: 1px dotted rgba(34,34,34,0.5);
  border-radius: 20px;
  padding: 10px 35px 10px 15px;
  font-size: 12px;
  font-weight: 400;
  margin: 10px 10px 0 0;
}

#page-content .new-reference .fields-ready-list .list li strong {
  display: block;
  font-size: 15px;
  margin: 0 0 5px 0;
}

#page-content .new-reference .fields-ready-list .list li span {
  font-size: 13px;
}

#page-content .order-data .form-data .more-workers {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 0 30px;
  margin: 0 0 0 auto;
  position: relative;
  cursor: pointer;
  color: rgba(34,34,34,0.7);
}

#page-content .order-data .form-data .more-workers span {
  border-bottom: 1px dotted rgba(34,34,34,0.7);
}

#page-content .order-data .form-data .more-workers span:hover {
  border: none;
}

#page-content .order-data .form-data .more-workers::before {
  content: '';
  display: block;
  position: absolute;
  background: rgba(34,34,34,0.7) url(../images/plus_w.svg) no-repeat center;
  background-size: 12px auto;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  left: 4px;
  top: 50%;
  margin-top: -10px;
}

#page-content form[name="reference-element"] .form-data .finded-list,
#page-content .order-data .form-data .whoes-list,
#page-content .order-data .form-data .addresses-list {
  background-color: #fff;
  position: absolute;
  z-index: 1;
  max-height: 300px;
  overflow: auto;
}

#page-content form[name="reference-element"] .form-data .finded-list,
#page-content .order-data .form-data .whoes-list,
#page-content .order-data .form-data .addresses-list {
  display: none;
  scrollbar-width: thin;
  scrollbar-color: #cfcfcf #ffffff;
}

#page-content form[name="reference-element"] .form-data .finded-list.show,
#page-content .order-data .form-data .whoes-list.show,
#page-content .order-data .form-data .addresses-list.show {
  border: 1px solid #d5d5d5;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  min-width: 200px;
  display: block;
}

#page-content form[name="reference-element"] .form-data .finded-list > div,
#page-content .order-data .form-data .whoes-list > div,
#page-content .order-data .form-data .addresses-list > div {
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
  cursor: pointer;
}

#page-content form[name="reference-element"] .form-data .finded-list > div:hover,
#page-content .order-data .form-data .whoes-list > div:hover,
#page-content .order-data .form-data .addresses-list > div:hover {
  background-color: rgba(0,0,0,0.1);
}

#page-content form[name="reference-element"] .form-data .remove-els,
#page-content .order-data .form-data .remove-who,
#page-content .order-data .form-data .remove-address {
  position: absolute;
  right: 7px;
  bottom: 15px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: rgba(34, 34, 34, 0.4) url(../images/close.svg) no-repeat center;
  background-size: 10px;
  cursor: pointer;
}

#page-content .order-data .form-data .whoes-list > div:hover,
#page-content .order-data .form-data .addresses-list > div:hover {
  background-color: rgba(34,34,34,0.1);
}

#page-content .references-list .list,
#page-content .reports-list .list {
  display: flex;
  flex-wrap: wrap;
  overflow-y:  scroll;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

#page-content .reports-list .list {
  align-items:  flex-start;
}

#page-content .references-list .list .el,
#page-content .reports-list .list .el {
  position: relative;
  width: calc(33% - 20px);
  /* flex: 1 1 calc(33% - 20px); */
  margin: 0 10px 30px 10px;
  box-sizing: border-box;

  background-color: #EFEFEF;
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;

  font-size: 12px;

  color: #222;
  transition: 0.2s ease-in-out;
}

#page-content .references-list .list .el.hidden,
#page-content .reports-list .list .el.hidden {
  display: none;
}

#page-content .references-list .list .el.active,
#page-content .references-list .list .el:hover,
#page-content .reports-list .list .el.active,
#page-content .reports-list .list .el:hover,
#page-content .reports-list .list .el.active {
  background-color: #156574;
  color: #fff;
}

#page-content .references-list .list .el.active .functions,
#page-content .references-list .list .el:hover .functions,
#page-content .reports-list .list .el.active .functions,
#page-content .reports-list .list .el:hover .functions {
  display: block;
}

#page-content .references-list .list .el h2,
#page-content .reports-list .list .el h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 20px 0;
}

#page-content .references-list .list .el .row,
#page-content .reports-list .list .el .row {
  margin: 0 0 5px 0;
}

#page-content .references-list .list .el .label,
#page-content .reports-list .list .el .label {
  opacity: 0.7;
}

#page-content .references-list .list .el .functions,
#page-content .reports-list .list .el .functions {
  position: absolute;
  right: 10px;
  top: 10px;
  display: none;
}

#page-content .references-list .list .el .functions button {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.2s ease-in-out;
  border: none;
  width: 17px;
  height: 17px;
  background-color: transparent;
}

#page-content .reports-list .list .el form#report-filter-form {
  margin: 20px 0 0 0;
}

#page-content .reports-list .list .el form#report-filter-form .form-group {
  display: flex;
  margin: 0 0 10px 0;
  align-items: center;
}

#page-content .reports-list .list .el form#report-filter-form .form-group:last-of-type {
  margin: 0;
}

#page-content .reports-list .list .el form#report-filter-form .form-group label {
  width: 100px;
}

#page-content .reports-list .list .el form#report-filter-form .form-group input,
#page-content .reports-list .list .el form#report-filter-form .form-group select {
  border-radius: 35px;
  border: 1px solid rgba(34,34,34,0.5);
  background-color: #FFFFFF;
  padding: 5px 10px;
  width: 30%;
}

#page-content .reports-list .list .el form#report-filter-form .form-group button[type="submit"] {
  padding: 5px 10px;
  border-radius: 10px;
}

#page-content .reports-list .list .el form#report-filter-form .form-group button.cancel {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  border-bottom: 1px dotted rgba(34,34,34,0.7);
  cursor: pointer;
  margin: 0 20px 0 0;
  background-color: transparent;
  border: none;
  padding: 0 0 0 0;
}

#page-content .reports-list .list .el form#report-filter-form .form-group button.cancel:hover {
  color: #fff;
}

#page-content .reports-list .list .el form#report-filter-form .form-group.submits {
  margin: 20px 0 0 0;
}

#page-content .references-list .list .el .functions button:hover {
  opacity: 1;
}

#page-content .references-list .list .el .functions {
  display: none;
}

#page-content .references-list .list .el .functions button.reference-elements-list {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0 -48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0 -48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0 -48-48zm448 16H176a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16zm0-320H176a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0 -16-16zm0 160H176a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16z"/></svg>');
  /* background-image: url(../images/list-icon.svg); */
  margin: 0 15px 0 0;
}

#page-content .references-list .list .el .functions button.edit-reference {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4 .6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/></svg>');
  /* background-image: url(../images/edit-function-icon.svg); */
}


#content #page.rolledup {
  position: fixed;
  width: calc(100% - 150px);
  opacity: 0.7;
  padding: 25px 75px 0 75px;
}

#content .modal {
  display: none; /* Изначально скрыто */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
  z-index: 1050; /* Высокий z-index, чтобы окно было над всем */
  align-items: center;
  justify-content: center;
}

#content .modal.modal-show {
  display: flex;
}

#content .modal h2 {
  width: 100%;
  width: 100%;
  font-size: 20px;
  margin: 0 0 20px 0;
}

.modal-content {
  background-color: #fff;
  padding: 35px;
  border-radius: 8px;
  max-width: 70%;
  max-height: calc(99% - 70px);
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: auto;
  scrollbar-width: thin; /* Для Firefox */
  scrollbar-color: #aaa #f0f0f0; /* Цвет полосы и фона */
}

.modal .modal-body {
}

.modal .close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.modal .orders-photos-list,
.modal form#uploadImagesForOrder,
.modal form#uploadImagesForWork {
  display: flex;
  flex-wrap: wrap;
}

.modal form#editCreateDate label,
.modal form#editCloseDate label {
  display: block;
  margin: 0 0 10px 10px;
}

.modal form#editCreateDate input[type="text"],
.modal form#editCloseDate input[type="text"] {
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 400;
  border: 1px solid rgba(34,34,34,0.5);
  border-radius: 20px;
  width: 20%;
}

.modal .orders-photos-list > div,
.modal form#uploadImagesForOrder > div,
.modal form#uploadImagesForWork > div {
  width: calc(50% - 60px);
  padding: 20px 0;
}

.modal form#uploadImagesForOrder > div.alert,
.modal form#uploadImagesForWork > div.alert {
  padding: 10px 20px;
  margin: 20px auto 0 auto;
}

.modal .orders-photos-list .before-work-block,
.modal form#uploadImagesForOrder > div.before-work-block,
.modal form#uploadImagesForWork > div.before-work-block {
  margin: 0 30px 0 0;
  border-right: 1px solid #d9d9d9;
}

.modal .orders-photos-list > div > div {
  position: relative;
}

.modal .orders-photos-list > div > div span {
  position: relative;
  display: inline-block;
  margin: 0 20px 20px 0;
}

.modal .orders-photos-list > div > div img {
  width: 150px;
  height: auto;
}

.modal .orders-photos-list > div > div span .remove-image {
  padding: 0;
  display: block;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  background-image: url(../images/close.svg);
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center;
  border-radius: 25px;
}

.modal .orders-photos-list .after-work-block,
.modal form#uploadImagesForOrder > div.after-work-block,
.modal form#uploadImagesForWork > div.after-work-block {
  margin: 0 0 0 0;
}

.modal form#editCreateDate > div.submits,
.modal form#editCloseDate > div.submits,
.modal form#uploadImagesForOrder > div.submits,
.modal form#uploadImagesForWork > div.submits {
  width: 100%;
  margin: 40px 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
}

.modal form#uploadImagesForOrder h3,
.modal form#uploadImagesForWork h3 {
  font-weight: normal;
  font-size: 14px;
  color: #B4B4B4;
  margin: 0 0 20px 0;
}

.modal form#uploadImagesForOrder .job-block,
.modal form#uploadImagesForWork .job-block {
  margin: 15px 0 0 0;
}

.modal form#uploadImagesForOrder .job-block h4,
.modal form#uploadImagesForWork .job-block h4 {
  font-size: 13px;
  font-weight: normal;
  margin: 0 0 5px 0;
}

.modal form#uploadImagesForOrder .job-block .existing-images,
.modal form#uploadImagesForWork .job-block .existing-images {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0 0 0;
}

.modal form#uploadImagesForOrder .job-block .existing-images span,
.modal form#uploadImagesForWork .job-block .existing-images span {
  margin: 0 20px 10px 0;
  position: relative;
  z-index: 1;
  display: block;
}

.modal form#uploadImagesForOrder .job-block .existing-images span .remove-image,
.modal form#uploadImagesForWork .job-block .existing-images span .remove-image {
  padding: 0;
  display: block;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  background-image: url(../images/close.svg);
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center;
}

.modal form#uploadImagesForOrder .job-block .existing-images span:last-of-type,
.modal form#uploadImagesForWork .job-block .existing-images span:last-of-type {
  margin: 0 0 10px 0;
}

.modal form#uploadImagesForOrder .job-block .existing-images a,
.modal form#uploadImagesForWork .job-block .existing-images a {
  margin: 0 10px 0 0;
}

.modal form#uploadImagesForOrder .job-block .existing-images a:last-of-type,
.modal form#uploadImagesForWork .job-block .existing-images a:last-of-type {
  margin: 0 0 0 0;
}

.modal form#uploadImagesForOrder .job-block .existing-images a img,
.modal form#uploadImagesForWork .job-block .existing-images a img {
  width: auto;
  height: 50px;
  border-radius: 5px;
}

.modal form#editCreateDate button,
.modal form#editCloseDate button,
.modal form#uploadImagesForOrder button,
.modal form#uploadImagesForWork button {
  padding: 10px 15px;
  border-radius: 25px;
}

.modal form#uploadImagesForOrder .custom-file-upload,
.modal form#uploadImagesForWork .custom-file-upload {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.modal form#uploadImagesForOrder .custom-file-label,
.modal form#uploadImagesForWork .custom-file-label {
  background-color: #2C2C2C;
  color: white;
  font-size: 12px;
  font-weight: normal;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.modal form#uploadImagesForOrder .file-name,
.modal form#uploadImagesForWork .file-name {
  display: block;
  font-size: 13px;
  color: #666;
}

ul.tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

ul.tabs .tab-switcher {
  display: inline-block;
  cursor: pointer;
  margin-right: 25px;
  padding: 10px 20px;
  font-size: 16px;
}

ul.tabs .tab-switcher.active {
  background-color: #417d89;
  color: #fff;
}

#page-content .manage-service .tab-container[data-tab-content="users"] .add-user {
  padding: 10px 20px;
  margin: 0 0 20px 0;
  border-radius: 20px;
}

#page-content .manage-service .list .data .col-num-2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

#page-content .manage-service .list .data .col-num-2 ul li::after {
  content: ', ';
}


#page-content .manage-service .list .data .col-num-2 ul li:last-of-type::after {
  content: '';
}