@charset "UTF-8";
/* НАСЫЩЕННОСТЬ|ЯРКОСТЬ VIOLET */
/* НАСЫЩЕННОСТЬ|ЯРКОСТЬ ORANGE */
/* НАСЫЩЕННОСТЬ|ЯРКОСТЬ RED */
/* НАСЫЩЕННОСТЬ|ЯРКОСТЬ GREEN */
/* НАСЫЩЕННОСТЬ|ЯРКОСТЬ ORANGE */
/* ОТСТУПЫ ДЛЯ ТАБЛИЦ */
label.checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  vertical-align: middle;
}
label.checkbox > input {
  opacity: 0;
  position: absolute;
}
label.checkbox > span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: 2px solid #A3AEF5;
  display: inline-block;
  background-color: #FFF;
  border-radius: 4px;
}
label.checkbox > span:hover {
  transition: none;
  border-color: #7686EF;
}
label.checkbox input:checked + span {
  background-image: url("icons/checkbox.svg");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #102089;
}
label.checkbox input:checked + span:hover {
  background-image: url("icons/checkbox_hover.svg");
  border: 2px solid #2B43E3;
}

label.checkbox.circle, label.radio {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 24px;
  vertical-align: middle;
}
label.checkbox.circle > input, label.radio > input {
  opacity: 0;
  position: absolute;
}
label.checkbox.circle > span, label.radio > span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: 2px solid #A3AEF5;
  display: inline-block;
  background-color: #FFF;
  border-radius: 24px;
}
label.checkbox.circle > span:hover, label.radio > span:hover {
  transition: none;
  border-color: #7686EF;
}
label.checkbox.circle input:checked + span, label.radio input:checked + span {
  background-image: url("icons/checkbox.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #102089;
}
label.checkbox.circle input:checked + span:hover, label.radio input:checked + span:hover {
  background-image: url("icons/checkbox_hover.svg");
  border: 2px solid #2B43E3;
}

input[type=checkbox].circle {
  appearance: none;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background-color: #FFF;
  border-radius: 100%;
  border: 1px solid #D1D7FA;
}
input[type=checkbox].circle:hover {
  border: 2px solid #7686EF;
}
input[type=checkbox].circle:checked {
  background-image: url("icons/radio.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #102089;
}
input[type=checkbox].circle:checked:hover {
  background-image: url("icons/radio_hover.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #2B43E3;
}

/* ———————————————————————————————————— */
input[type=radio] {
  appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background-color: #FFF;
  border-radius: 100%;
  border: 1px solid #D1D7FA;
}
input[type=radio]:hover {
  border: 2px solid #7686EF;
}
input[type=radio]:checked {
  background-image: url("icons/radio.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #102089;
}
input[type=radio]:checked:hover {
  background-image: url("icons/radio_hover.svg");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #2B43E3;
}

/* ———————————————————————————————————— */
input[type=text], input[type=password], input[type=number], textarea {
  appearance: none;
  box-sizing: border-box;
  padding: 10px 8px 10px 16px;
  color: #050B2E;
  background-color: #FFF;
  border-radius: 8px;
  border: 2px solid #D1D7FA;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.5px;
}
input[type=text]:hover, input[type=text]:focus, input[type=password]:hover, input[type=password]:focus, input[type=number]:hover, input[type=number]:focus, textarea:hover, textarea:focus {
  border-color: #7686EF;
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input:disabled:hover, input:disabled:focus {
  border-color: #D1D7FA;
}

/* ———————————————————————————————————— */
input[type=button], input[type=submit], button {
  appearance: none;
  padding: 10px 24px;
  border-radius: 12px;
  box-sizing: border-box;
  background-color: #2B43E3;
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.5px;
}
input[type=button]:hover, input[type=submit]:hover, button:hover {
  background-color: #7686EF;
  color: #FFF;
}
input[type=button]:active, input[type=submit]:active, button:active {
  background-color: #102089;
  color: #FFF;
}
input[type=button]:disabled, input[type=submit]:disabled, button:disabled {
  pointer-events: none;
  opacity: 0.4;
}

/* ————————————INTERFACE TABLE STYLE——— */
table {
  border-radius: 16px;
  overflow: hidden;
  border-collapse: collapse;
}
table > thead {
  background-color: #E8EBFC;
}
table > thead * {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.5px;
  color: #050B2E;
  text-align: center;
}
table > thead > tr > td, table > thead > tr th {
  height: 64px;
  padding: 8px 12px;
}
table > thead > tr > td:first-of-type, table > thead > tr th:first-of-type {
  padding-left: 24px;
}
table > thead > tr > td:last-of-type, table > thead > tr th:last-of-type {
  padding-right: 24px;
}
table > thead > tr > td > a, table > thead > tr th > a {
  display: block;
  padding: 8px 40px 8px 16px;
  height: calc(100% - 8px * 2);
  border-radius: 16px;
}
table > thead > tr > td > a.asc, table > thead > tr th > a.asc {
  background-color: #D1D7FA;
}
table > thead > tr > td > a.desc, table > thead > tr th > a.desc {
  background-color: #D1D7FA;
}
table > thead > tr > td > a:hover, table > thead > tr th > a:hover {
  background-color: #A3AEF5;
}
table > tbody {
  background-color: #FFF;
}
table > tbody tr:nth-of-type(2n) {
  transition: 0s;
  background-color: #F5F7FF;
}
table > tbody tr > td {
  padding: 16px 12px;
}
table > tbody tr > td:first-of-type {
  padding-left: 24px;
}
table > tbody tr > td:last-of-type {
  padding-right: 24px;
}

/* ———————————————————————————————————— */
select {
  padding: 10px 48px 10px 12px;
  border-radius: 8px;
  border: 2px solid #D1D7FA;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.5px;
  color: #050B2E;
  background-color: white;
  background-size: 24px;
  background-position: right 12px center;
  background-repeat: no-repeat;
}
select:hover, select:focus {
  border-color: #7686EF;
}

/* ———————————————————————————————————— */
h5:has(+ input) {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #292D31;
  margin-bottom: 8px;
}

h5:has(+ div.input-char-counter) {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #292D31;
  margin-bottom: 8px;
}

h5:has(+ label) {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #292D31;
  margin-bottom: 8px;
}

h5:has(+ select) {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #292D31;
  margin-bottom: 8px;
}

/* ———————————————————————————————————— */
label.switcher {
  width: 40px;
  height: 24px;
  cursor: pointer;
  display: inline-block;
  line-height: 24px;
  vertical-align: middle;
  /*width: calc(100% - 40px);*/
  position: relative;
  user-select: none;
}
label.switcher > span {
  display: inline-block;
  line-height: 24px;
  vertical-align: middle;
}
label.switcher > input {
  opacity: 0;
  position: absolute;
  height: 0;
  padding: 0;
  margin: 0;
}
label.switcher > input + span {
  width: 40px;
  height: 24px;
  padding: 0;
  border-radius: 20px;
  vertical-align: middle;
  position: absolute;
  right: 0;
  transition: 0.25s;
}
label.switcher > input + span:before {
  transition: 250ms;
  content: " ";
  display: block;
  position: absolute;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #FFF;
}
label.switcher > input:not(:checked) + span {
  background-color: #7B7F9D;
}
label.switcher > input:not(:checked) + span:before {
  left: 4px;
}
label.switcher > input:checked + span {
  background-color: #00C036;
}
label.switcher > input:checked + span:before {
  left: 20px;
}
label.switcher > input[type=radio]:not(:checked) + span {
  background-color: #7B7F9D;
}
label.switcher > input[type=radio]:not(:checked) + span:before {
  left: 4px;
}
label.switcher > input[type=radio]:checked + span {
  background-color: #00C036;
}
label.switcher > input[type=radio]:checked + span:before {
  left: 20px;
}

/* ———————————————————————————————————— */
div.input-char-counter {
  position: relative;
}
div.input-char-counter > div {
  position: absolute;
  bottom: -10px;
  right: 4px;
  background-color: white;
  padding: 2px 4px;
  text-align: right;
  font-size: 11px;
  color: #A9AAB0;
}
div.input-char-counter > div > span.o {
  color: #FF7200;
}
div.input-char-counter > div > span.r {
  color: #E13A3A;
}

/* ———————————————————————————————————— */
div.textarea-char-counter {
  position: relative;
}
div.textarea-char-counter > textarea {
  resize: none;
  display: block;
  width: 100%;
  height: 400px;
  font-size: 16px;
  line-height: 20px;
  position: relative;
}
div.textarea-char-counter > a.btn-clear {
  position: absolute;
  top: 10px;
  right: 10px;
}
div.textarea-char-counter > div {
  position: absolute;
  bottom: -10px;
  right: 4px;
  background-color: white;
  padding: 2px 4px;
  text-align: right;
  font-size: 11px;
  color: #A9AAB0;
}
div.textarea-char-counter > div > span.o {
  color: #FF7200;
}
div.textarea-char-counter > div > span.r {
  color: #E13A3A;
}

/* ———————————————————————————————————— */
div[class^=btns-actions] {
  position: relative;
  display: flex;
  box-sizing: border-box;
  background-color: #FFF;
  border-radius: 12px;
}
div[class^=btns-actions] > a {
  display: block;
  width: 40px;
  height: 40px;
  background-color: #FFF;
  border-radius: 0;
  position: relative;
  box-sizing: border-box;
  border-color: #D1D7FA;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 2px;
  border-bottom-width: 2px;
}
div[class^=btns-actions] > a:hover {
  border-color: #7686EF;
  background-color: #E8EBFC;
}
div[class^=btns-actions] > a:active {
  border-color: #7686EF;
  background-color: #7686EF;
}
div[class^=btns-actions] > a:first-child {
  border-radius: 12px 0 0 12px;
  border-left-width: 2px;
}
div[class^=btns-actions] > a:last-child {
  border-radius: 0 12px 12px 0;
  border-right-width: 2px;
}
div[class^=btns-actions] > a:only-child {
  border-radius: 12px;
  border-width: 2px;
}

/* ———————————————————————————————————— */
a[class^=btn-], button[class^=btn-] {
  box-sizing: border-box;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #FFF;
  border: 2px solid #D1D7FA;
  border-radius: 12px;
  padding: 0;
}
a[class^=btn-]:hover, button[class^=btn-]:hover {
  border-color: #7686EF;
  background-color: #E8EBFC;
}
a[class^=btn-]:active, button[class^=btn-]:active {
  border-color: #7686EF;
  background-color: #7686EF;
}
a[class^=btn-][class$=delete], button[class^=btn-][class$=delete] {
  background-image: url("icons/trash.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=delete-red], button[class^=btn-][class$=delete-red] {
  background-image: url("icons/trash_red.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=new-message], button[class^=btn-][class$=new-message] {
  background-image: url("icons/message.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=read-message], button[class^=btn-][class$=read-message] {
  background-image: url("icons/read_message.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=settings], button[class^=btn-][class$=settings] {
  background-image: url("icons/settings.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=edit], button[class^=btn-][class$=edit] {
  background-image: url("icons/edit.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=view], button[class^=btn-][class$=view] {
  background-image: url("icons/details.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=view2], button[class^=btn-][class$=view2] {
  background-image: url("icons/eye.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=clear], button[class^=btn-][class$=clear] {
  background-image: url("icons/wash.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=history], button[class^=btn-][class$=history] {
  background-image: url("icons/history.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=check], button[class^=btn-][class$=check] {
  background-image: url("icons/start_check.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=stop-check], button[class^=btn-][class$=stop-check] {
  background-image: url("icons/stop_check.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=update-group], button[class^=btn-][class$=update-group] {
  background-image: url("icons/update_group.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
a[class^=btn-][class$=more_details], button[class^=btn-][class$=more_details] {
  background-image: url("icons/more_details.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ———————————————————————————————————— */
div#dialog > dialog {
  margin: auto;
  border-radius: 16px;
  max-width: 500px;
  min-width: 350px;
}
div#dialog > dialog > div.container {
  padding: 24px 32px 16px 32px;
  position: relative;
}
div#dialog > dialog > div.container > a.close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  padding: 8px;
  background-image: url("icons/clear.svg");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}
div#dialog > dialog > div.container > a.close:hover {
  background-color: #E8EBFC;
}
div#dialog > dialog > div.container > a.close:active {
  background-color: #D1D7FA;
}
div#dialog > dialog > div.container > p:first-of-type {
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5px;
  color: #050B2E;
  margin-right: 32px;
}
div#dialog > dialog > div.container > div.content {
  margin-top: 20px;
}
div#dialog > dialog > div.container > div.buttons {
  text-align: center;
  margin-top: 20px;
}
div#dialog > dialog > div.container > div.buttons > a {
  display: inline-block;
  padding: 10px 12px;
  min-width: 150px;
  border-radius: 12px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.5px;
  color: #050B2E;
}
div#dialog > dialog > div.container > div.buttons > a:hover {
  background-color: #E8EBFC;
}
div#dialog > dialog > div.container > div.buttons > a:active {
  background-color: #7686EF;
}
div#dialog > dialog > div.container > div.buttons > a.green, div#dialog > dialog > div.container > div.buttons > a.good {
  background-color: #2B43E3;
  color: #FFF;
}
div#dialog > dialog > div.container > div.buttons > a.green:hover, div#dialog > dialog > div.container > div.buttons > a.good:hover {
  background-color: #7686EF;
  color: #FFF;
}
div#dialog > dialog > div.container > div.buttons > a.green:active, div#dialog > dialog > div.container > div.buttons > a.good:active {
  background-color: #102089;
  color: #FFF;
}
div#dialog > dialog > div.container > div.buttons > a.red, div#dialog > dialog > div.container > div.buttons > a.bad {
  background-color: #E13A3A;
  color: #FFF;
}
div#dialog > dialog > div.container > div.buttons > a.red:hover, div#dialog > dialog > div.container > div.buttons > a.bad:hover {
  background-color: #ef7676;
  color: #FFF;
}
div#dialog > dialog > div.container > div.buttons > a.red:active, div#dialog > dialog > div.container > div.buttons > a.bad:active {
  background-color: #891010;
  color: #FFF;
}
div#dialog > dialog > div.container > div.buttons > a:has(+ a) {
  margin-right: 12px;
}
@media screen and (max-width: 400px) and (min-width: 360px) {
  div#dialog > dialog > div.container > div.buttons > a {
    min-width: 130px;
  }
  div#dialog > dialog > div.container > div.buttons > a:has(+ a) {
    margin-right: 8px;
  }
}
div#dialog > dialog.hint > div.container > p:first-of-type {
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5px;
}
div#dialog > dialog.hint > div.container > div.content {
  margin-top: 16px;
}
div#dialog > dialog.hint > div.container > div.content > p.titled {
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  margin-top: 20px;
  color: #102089;
}
div#dialog > dialog.hint > div.container > div.content > p.titled + div {
  color: #3C4475;
  background-color: #F5F7FF;
  border-radius: 12px;
  padding: 10px 12px;
}
div#dialog > dialog.hint > div.container > div.content ul {
  padding-left: 20px;
  list-style-type: "— ";
  margin-top: 4px;
}
div#dialog > dialog.hint > div.container > div.content ul > li {
  padding-left: 4px;
}
div#dialog > dialog.hint > div.container > div.content ul > li:not(:last-of-type) {
  margin-bottom: 4px;
}
div#dialog > dialog.faq > div.container > p:first-of-type {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
div#dialog > dialog.faq > div.container > div {
  margin-top: 20px;
}

/* ———————————————————————————————————— */
div#snackbars {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
}
div#snackbars > div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  max-width: 360px;
  min-width: 120px;
  padding: 10px 16px;
  margin: 0 auto;
  border-radius: 16px;
  background-color: #102089;
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.5px;
}
div#snackbars > div.error {
  background-color: #891010;
  color: #FFF;
}
div#snackbars > div.warning {
  background-color: #FF7200;
  color: #FFF;
}
div#snackbars > div > a.close {
  background-image: url("icons/clear_white.svg");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 7px;
  right: 7px;
}

/* ———————————————————————————————————— */
a.faq {
  cursor: help;
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("icons/tooltip.svg");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}
a.faq:hover {
  background-image: url("icons/tooltip_dark.svg");
}

/*# sourceMappingURL=common.css.map */