@import url(http://localhost:3005/static/scss/colors.scss);
@font-face {
  font-family: "Robot";
  src: url("/static/fonts/Roboto-Medium.ttf");
  font-weight: 500;
  font-style: normal; }

:root {
  --darkPrimary: #000000;
  --lightPrimary: #ffffff;
  --gray: #4f4f4f;
  --mainBg: #E0E0E0; }

body {
  font-family: Robot;
  margin: 0;
  font-size: 10px;
  color: #000000;
  box-sizing: border-box; }
  body * {
    box-sizing: border-box; }
  body main {
    width: 100vw;
    height: 100vh;
    background: #fafafa;
    overflow: hidden; }
    body main .ant-table.ant-table-small .ant-table-tbody > tr > td,
    body main .ant-table.ant-table-small .ant-table-thead > tr > th {
      padding: 5px; }
  body .home {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    height: 100%; }
  body .main-content {
    position: relative;
    flex-grow: 1;
    width: 50vw;
    padding: 10px 0; }
  body .scroll-custom::-webkit-scrollbar {
    width: 16px;
    background: #c5c6c6;
    border-radius: 16px; }
  body .scroll-custom::-webkit-scrollbar-thumb {
    background: #767676;
    width: 16px;
    height: 145px;
    border-radius: 16px; }
  body button {
    font-family: Robot;
    cursor: pointer;
    height: 40px;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    color: #737373; }
  body button:focus,
  body input:focus,
  body *:focus {
    outline: none; }
  body .message-no,
  body .message-ok {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000000;
    width: 130px;
    height: 50px;
    font-weight: bold;
    font-size: 20px;
    color: #333333;
    background: var(--lightPrimary); }

/**/
.table-search {
  display: flex;
  flex-direction: column;
  width: 210px;
  padding: 5px; }
  .table-search .ant-checkbox-wrapper {
    margin-left: 5px; }

.table-search__list {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow: hidden;
  overflow-y: auto; }

.table-search__btns {
  display: flex; }

.table-search__res {
  flex-grow: 1;
  width: 50px;
  margin-right: 10px; }

.table-search__search {
  flex-grow: 1;
  width: 50px; }

/**/

.outh {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #dddddd; }

.outh__logo {
  margin-top: 100px;
  margin-bottom: 40px; }
  .outh__logo img {
    width: 360px; }

.outh__container {
  display: flex;
  justify-content: center;
  padding: 20px 10px;
  background-color: #f0f0f0; }

.outh__form {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .outh__form .ant-form-item-label {
    width: 100px; }
  .outh__form .outh__btn-login {
    margin-left: auto; }

.outh__support-phone {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  font-size: 14px; }

.main-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  background-color: #0050b3;
  padding: 5px 10px; }

.main-header__inner {
  display: flex;
  align-items: center;
  width: 100%; }

.main-header__menu .ant-btn {
  background-color: transparent;
  border: none;
  padding-left: 0; }

.main-header__menu .anticon {
  display: flex;
  align-items: center;
  justify-content: center; }

/* menu */
.main__menu {
  box-shadow: 7px 0px 10px -5px rgba(0, 0, 0, 0.2);
  min-width: 40px;
  width: auto;
  background-color: #ffffff;
  height: calc(100vh - 40px); }
  .main__menu * {
    transition: none !important;
    transition-duration: 0s !important;
    animation: none !important; }
  .main__menu .ant-menu .ant-menu-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px; }
    .main__menu .ant-menu .ant-menu-item .ant-btn-text {
      border: none;
      background-color: transparent;
      padding: 0; }
  .main__menu .ant-menu .ant-menu-submenu-title,
  .main__menu .ant-menu .ant-menu-item {
    padding: 0 10px;
    padding-left: 10px !important;
    padding-right: 20px; }
  .main__menu .ant-menu .ant-menu-submenu .ant-menu {
    padding-left: 10px; }
  .main__menu .ant-menu.ant-menu-inline-collapsed {
    width: 40px; }
    .main__menu .ant-menu.ant-menu-inline-collapsed .ant-menu-submenu-title,
    .main__menu .ant-menu.ant-menu-inline-collapsed .ant-menu-item {
      padding-right: 10px; }
  .main__menu .ant-menu .ant-menu-submenu-arrow {
    right: 5px; }

/* user */
.main-header__user {
  display: flex;
  margin-left: auto;
  padding: 0 10px;
  border-left: 1px solid #ffffff; }

.user-menu {
  top: 40px !important; }
  .user-menu .ant-dropdown-menu-item {
    display: flex; }
    .user-menu .ant-dropdown-menu-item .ant-btn {
      width: 100%; }

.user-menu__title {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 10px;
  color: #ffffff;
  font-size: 14px; }
  .user-menu__title .anticon {
    display: flex;
    align-items: center;
    margin-left: 5px; }

.step.settings {
  display: flex;
  width: 100%;
  height: 100%; }
  .step.settings > .navigator {
    width: 100%;
    max-width: 266px; }
  .step.settings > .tabs-settings {
    width: 100%;
    max-width: calc(100% - 266px);
    position: relative; }
    .step.settings > .tabs-settings .content > .Common > .bottom,
    .step.settings > .tabs-settings .content > .SearchCars > .bottom,
    .step.settings > .tabs-settings .content > .RackManagement > .bottom,
    .step.settings > .tabs-settings .content > .role > .bottom {
      bottom: 0;
      left: 0;
      display: flex;
      background: #4f4f4f;
      align-items: center;
      min-height: 89px;
      width: 100%;
      position: absolute;
      padding: 10px; }
      .step.settings > .tabs-settings .content > .Common > .bottom > .save,
      .step.settings > .tabs-settings .content > .SearchCars > .bottom > .save,
      .step.settings > .tabs-settings .content > .RackManagement > .bottom > .save,
      .step.settings > .tabs-settings .content > .role > .bottom > .save {
        width: 187px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        margin-left: auto;
        border: 0px solid; }
      .step.settings > .tabs-settings .content > .Common > .bottom > .prew,
      .step.settings > .tabs-settings .content > .SearchCars > .bottom > .prew,
      .step.settings > .tabs-settings .content > .RackManagement > .bottom > .prew,
      .step.settings > .tabs-settings .content > .role > .bottom > .prew {
        width: 182px;
        border: 1px solid #ffffff;
        height: 40px;
        font-weight: bold;
        font-size: 18px;
        background: #4f4f4f;
        color: #f2f2f2; }

.step.systems {
  display: flex;
  width: 100%;
  height: 100%; }
  .step.systems > .right {
    width: 408px;
    min-width: 408px;
    padding: 0px; }
  .step.systems > .left {
    width: calc(100% - 408px);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 10px; }
    .step.systems > .left > .title {
      color: #333333;
      font-weight: bold;
      font-size: 2em;
      margin-bottom: 13px;
      text-align: center; }
    .step.systems > .left > table th,
    .step.systems > .left > table td {
      text-align: center;
      font-size: 10px;
      font-weight: 400;
      line-height: 24px; }
    .step.systems > .left > table .selected {
      background: #4f4f4f;
      color: #ffffff; }
    .step.systems > .left > div {
      margin-bottom: 4px; }
      .step.systems > .left > div:last-child {
        margin-bottom: 0px; }
    .step.systems > .left > .bottom-panel-logs {
      position: absolute;
      width: 100%;
      left: 0px;
      bottom: 0px;
      min-width: 691px;
      height: 56px;
      background: var(--gray);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 12px;
      padding-right: 10px; }
      .step.systems > .left > .bottom-panel-logs .prew {
        width: 142px;
        height: 40px;
        border: 1px solid #ffffff;
        background: var(--gray);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 18px;
        color: #f2f2f2; }
      .step.systems > .left > .bottom-panel-logs .xls {
        background: #ffffff;
        display: flex;
        width: 185px;
        height: 40px;
        border: 0px solid #ffffff;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        margin-left: 1px; }

.step.presonal-area, .step.createUser {
  display: flex;
  height: 100%;
  padding-top: 15px; }
  .step.presonal-area > .left, .step.createUser > .left {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 22px;
    padding-bottom: 90px;
    padding-right: 10px; }

.step.basket {
  display: flex;
  height: 100%; }
  .step.basket > .right {
    width: 408px; }
  .step.basket > .left {
    width: calc(100% - 408px);
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 22px;
    padding-bottom: 90px;
    padding-right: 10px; }
    .step.basket > .left > .searchBlock-title {
      text-align: center;
      margin-top: 27px;
      margin-bottom: 24px; }
      .step.basket > .left > .searchBlock-title .dis {
        color: #bdbdbd;
        font-size: 1.8em;
        font-weight: bold; }
      .step.basket > .left > .searchBlock-title .num {
        color: var(--darkPrimary);
        font-size: 1.8em;
        font-weight: bold; }
    .step.basket > .left .cars {
      overflow-y: auto;
      height: calc(100% - 72px); }

.step.step1 {
  display: flex;
  height: 100%;
  padding-top: 26px; }
  .step.step1 > .searchBlock {
    width: calc(100% - 408px);
    padding-left: 12px;
    height: 100%;
    position: relative;
    padding-bottom: 101px; }
    .step.step1 > .searchBlock > .searchBlock-title {
      text-align: center;
      margin-top: 27px;
      margin-bottom: 24px; }
      .step.step1 > .searchBlock > .searchBlock-title .dis {
        color: #bdbdbd;
        font-size: 1.8em;
        font-weight: bold; }
      .step.step1 > .searchBlock > .searchBlock-title .num {
        color: var(--darkPrimary);
        font-size: 1.8em;
        font-weight: bold; }
  .step.step1 > .right {
    width: 408px;
    padding: 0px;
    margin-top: -26px;
    margin-bottom: 10px;
    height: calc(100% + 36px); }
  .step.step1 > .left {
    width: calc(100% - 408px);
    display: flex;
    padding-top: 14px;
    flex-wrap: wrap;
    overflow-y: auto;
    padding-bottom: 7px;
    padding-left: 22px; }
    .step.step1 > .left .arms {
      width: 100%; }
      .step.step1 > .left .arms > h2 {
        font-size: 1.6em;
        color: var(--darkPrimary);
        font-weight: normal;
        text-align: center; }
      .step.step1 > .left .arms .cart-item {
        display: flex;
        flex-direction: column;
        align-items: center; }
        .step.step1 > .left .arms .cart-item .cart {
          display: flex;
          width: 424px;
          height: 62px;
          background: #f2f2f2;
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          padding-left: 10px;
          padding-right: 10px;
          margin-bottom: 1px; }
          .step.step1 > .left .arms .cart-item .cart > div {
            width: 50%; }
            .step.step1 > .left .arms .cart-item .cart > div.vin {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100%;
              font-size: 1.4em;
              color: #333333; }
            .step.step1 > .left .arms .cart-item .cart > div.car {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: flex-start; }
              .step.step1 > .left .arms .cart-item .cart > div.car .nameCar {
                color: var(--darkPrimary);
                font-size: 2em;
                font-weight: bold; }
              .step.step1 > .left .arms .cart-item .cart > div.car .options {
                color: #828282;
                font-weight: bold;
                font-size: 1em; }
    .step.step1 > .left > div {
      width: 50%;
      flex-direction: column; }
      .step.step1 > .left > div.avto > div {
        max-width: 214px;
        display: flex;
        flex-direction: column;
        margin-bottom: 31px; }
      .step.step1 > .left > div.avto .cart-items {
        display: flex;
        justify-content: center; }
        .step.step1 > .left > div.avto .cart-items .cart {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100px;
          height: 100px;
          background: #f2f2f2;
          margin-right: 14px;
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); }
          .step.step1 > .left > div.avto .cart-items .cart .text {
            font-size: 1.6em;
            color: var(--gray);
            margin-bottom: 16px;
            font-weight: normal;
            text-transform: lowercase; }
          .step.step1 > .left > div.avto .cart-items .cart span {
            font-size: 3.2em;
            color: var(--darkPrimary);
            font-weight: bold; }
          .step.step1 > .left > div.avto .cart-items .cart:last-child {
            margin-right: 0px; }
      .step.step1 > .left > div.problems .cart-items {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center; }
        .step.step1 > .left > div.problems .cart-items .cart {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-end;
          width: 214px;
          height: 64px;
          background: #f2f2f2;
          margin-bottom: 14px;
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          padding-right: 11px;
          position: relative; }
          .step.step1 > .left > div.problems .cart-items .cart img {
            position: absolute;
            left: 9px; }
          .step.step1 > .left > div.problems .cart-items .cart .text {
            font-size: 1.6em;
            color: var(--gray);
            margin-bottom: 3px;
            font-weight: normal;
            text-transform: lowercase; }
          .step.step1 > .left > div.problems .cart-items .cart span {
            font-size: 3.2em;
            color: var(--darkPrimary);
            font-weight: bold; }
          .step.step1 > .left > div.problems .cart-items .cart:last-child {
            margin-right: 0px; }
    .step.step1 > .left .title {
      display: flex;
      align-items: center;
      font-size: 1.6em;
      justify-content: center;
      text-transform: uppercase;
      margin-bottom: 6px; }
      .step.step1 > .left .title img {
        margin-right: 7px; }

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }
  .modal .modal-mask {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.4); }
  .modal .modal-close-btn {
    cursor: pointer;
    position: absolute;
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    z-index: 1002;
    top: 20px;
    background-color: transparent;
    border: 0px solid;
    right: 12px; }
    .modal .modal-close-btn::after, .modal .modal-close-btn:before {
      content: "";
      width: 30px;
      height: 2px;
      background-color: #E5E5E5;
      transform: rotate(45deg);
      position: absolute; }
    .modal .modal-close-btn:before {
      transform: rotate(-45deg); }
  .modal .modal-content {
    display: flex;
    z-index: 1002;
    min-width: 252px;
    min-height: 392px;
    background: #E5E5E5;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border: 0px solid transparent;
    flex-direction: column; }

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

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

.cars {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .cars .title {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px; }

.cars__status-icon {
  display: flex;
  align-items: center;
  margin-right: 5px; }

.cars__status-label {
  margin-left: 10px;
  font-size: 12px;
  line-height: 12px;
  margin-bottom: -5px; }

.cars__content {
  overflow: hidden;
  display: flex;
  flex-grow: 1;
  height: 500px;
  padding: 10px; }
  .cars__content .ant-table-wrapper,
  .cars__content .ant-spin-nested-loading {
    width: 100%;
    height: 100%; }
  .cars__content .ant-spin-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; }
    .cars__content .ant-spin-container .ant-table {
      overflow: hidden;
      overflow-y: auto;
      height: 500px;
      flex-grow: 1; }
  .cars__content .cars__table-row {
    cursor: pointer; }
    .cars__content .cars__table-row:hover .ant-table-cell {
      background-color: #e6f7ff; }

.cars__modal-info .ant-modal-body {
  height: 600px; }

.cars__modal-info .ant-tabs-nav-operations {
  position: absolute; }

.cars__modal-info .ant-tabs {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .cars__modal-info .ant-tabs .ant-tabs-content-holder {
    height: 200px;
    flex-grow: 1; }
  .cars__modal-info .ant-tabs .ant-tabs-content,
  .cars__modal-info .ant-tabs .ant-tabs-tabpane-active {
    height: 100%; }

.cars__modal-info .cars__modal-map {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

.cars__modal-full-info {
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding: 10px 5px; }

.cars__modal-full-item {
  display: flex;
  margin-bottom: 10px; }
  .cars__modal-full-item > span {
    margin-left: auto; }

.createForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  height: 100%; }
  .createForm > .title {
    width: 100%;
    text-align: center;
    color: #333333;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 16px; }
  .createForm > .under {
    color: #4f4f4f;
    font-size: 1.6em;
    margin-bottom: 20px;
    width: 100%;
    text-align: center; }
  .createForm > .form::-webkit-scrollbar {
    width: 7px;
    background: #f2f2f2;
    border-radius: 2px; }
  .createForm > .form::-webkit-scrollbar-thumb {
    background: #525252;
    width: 7px;
    height: 145px;
    border-radius: 2px; }
  .createForm > .form {
    width: 100%;
    display: flex;
    overflow-y: auto; }
    .createForm > .form .form-content {
      width: 100%;
      max-width: 544px;
      display: flex;
      flex-direction: column;
      padding-right: 44px;
      padding-bottom: 10px; }
      .createForm > .form .form-content .form-item {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 6px;
        align-items: center;
        position: relative; }
        .createForm > .form .form-content .form-item span {
          min-width: 100px;
          margin-right: 22px;
          color: #000000;
          font-size: 2em;
          font-weight: bold; }
        .createForm > .form .form-content .form-item > .fields::-webkit-scrollbar {
          width: 2px;
          background: #f2f2f2;
          border-radius: 2px; }
        .createForm > .form .form-content .form-item > .fields::-webkit-scrollbar-thumb {
          background: #525252;
          width: 2px;
          border-radius: 2px; }
        .createForm > .form .form-content .form-item .fields {
          min-width: 276px;
          width: 276px;
          min-height: 44px;
          padding-left: 12px;
          display: flex;
          align-items: center;
          color: #f2f2f2;
          font-weight: bold;
          font-size: 2em;
          background: #4f4f4f;
          box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
          position: relative;
          overflow-y: auto; }
          .createForm > .form .form-content .form-item .fields.select {
            padding-right: 27px; }
            .createForm > .form .form-content .form-item .fields.select::after {
              content: "";
              display: block;
              position: absolute;
              right: 7px;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-top: 10px solid #c4c4c4; }
        .createForm > .form .form-content .form-item:last-child {
          margin-bottom: 0px; }
      .createForm > .form .form-content > .command-btn {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-end; }
        .createForm > .form .form-content > .command-btn > button {
          width: 276px;
          height: 65px;
          background: #f2f2f2;
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          font-size: 1.6em;
          color: #4f4f4f;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 0px solid transparent; }
    .createForm > .form > .btn {
      display: flex;
      flex-direction: column;
      width: calc(100% - 544px);
      height: 100%;
      justify-content: flex-start; }
      .createForm > .form > .btn > button {
        min-width: 110px;
        min-height: 110px;
        width: 100px;
        height: 100px;
        border: 0px solid transparent;
        background: #f2f2f2;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        margin-bottom: 17px;
        flex-direction: column;
        padding: 0px;
        padding-top: 8px;
        padding-bottom: 12px;
        justify-content: space-between;
        align-items: center;
        display: flex; }
        .createForm > .form > .btn > button:last-child {
          margin-bottom: 9px; }
        .createForm > .form > .btn > button img {
          display: block; }
        .createForm > .form > .btn > button > span {
          font-size: 16px;
          color: #4f4f4f; }
  .createForm > .bar-bottom {
    background: #4f4f4f;
    width: 100%;
    height: 89px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0px;
    left: 0px; }
    .createForm > .bar-bottom > button {
      border: 1px solid #ffffff;
      height: 40px;
      min-width: 143px;
      background-color: transparent;
      color: #f2f2f2;
      font-size: 1.8em;
      font-weight: bold; }
    .createForm > .bar-bottom > div {
      display: flex; }
      .createForm > .bar-bottom > div > button {
        width: 188px;
        height: 40px;
        color: #4f4f4f;
        background: #ffffff;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 188px;
        border: 0px solid transparent;
        margin-left: 1px;
        text-transform: uppercase; }
  .createForm .span {
    position: absolute;
    right: -44px; }
    .createForm .span > span {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 35px;
      height: 35px;
      position: relative;
      border: 0px solid transparent;
      border-radius: 50%;
      min-width: 35px;
      margin: 0px !important;
      font-size: 2em !important;
      color: #ffffff !important;
      font-weight: bold !important;
      background: #333333;
      cursor: pointer; }
    .createForm .span > .d {
      position: absolute;
      bottom: calc(100% + 15px);
      width: 226px;
      background: #ffffff;
      box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
      border-radius: 4px;
      padding-left: 12px;
      padding-right: 16px;
      display: flex;
      align-items: center;
      font-size: 1.2em;
      min-height: 72px;
      left: -12px; }
      .createForm .span > .d::after {
        content: "";
        display: block;
        position: absolute;
        bottom: -12px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 12px solid #ffffff;
        left: 21px; }

.switch-componet {
  border: 1px solid;
  border-radius: 20px;
  width: 40px;
  height: 20px;
  display: block; }
  .switch-componet.true span {
    margin-left: auto; }
  .switch-componet span {
    display: block;
    width: 18px;
    height: 18px;
    background-color: #dadada;
    border-radius: 50px; }

.Dropdown-mobilitygroup {
  position: relative; }
  .Dropdown-mobilitygroup .Dropdown-mobilitygroup-button {
    width: 67px;
    min-width: 67px;
    height: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: var(--lightPrimary);
    border: 0px solid transparent;
    cursor: pointer; }
    .Dropdown-mobilitygroup .Dropdown-mobilitygroup-button > span {
      width: 5px;
      height: 5px;
      display: block;
      background: #333333;
      border-radius: 50%;
      margin-bottom: 3px; }
      .Dropdown-mobilitygroup .Dropdown-mobilitygroup-button > span:last-child {
        margin-bottom: 0px; }
  .Dropdown-mobilitygroup .Dropdown-mobilitygroup-child {
    z-index: -1000;
    opacity: 0;
    transition: 500ms;
    position: absolute;
    bottom: 100%;
    left: -50%; }
    .Dropdown-mobilitygroup .Dropdown-mobilitygroup-child.active {
      z-index: 999;
      opacity: 1; }
    .Dropdown-mobilitygroup .Dropdown-mobilitygroup-child > button {
      cursor: pointer;
      width: 354px;
      min-width: 334px;
      display: flex;
      align-items: center;
      height: 73px;
      font-size: 20px;
      font-weight: bold;
      color: #333333;
      padding-left: 29px;
      padding-right: 13px;
      background-color: #FFFFFF;
      border: 0px solid var(--darkPrimary);
      border-bottom: 1px solid var(--darkPrimary); }
      .Dropdown-mobilitygroup .Dropdown-mobilitygroup-child > button:last-child {
        border-bottom: 0px; }
  .Dropdown-mobilitygroup.bottom .Dropdown-mobilitygroup-child {
    bottom: auto;
    top: 100%; }

.paint {
  width: 100%;
  min-height: 40px;
  font-size: 16px;
  background: #C5C6C6;
  color: #000000;
  border: none;
  padding: 5px;
  display: flex;
  overflow-x: auto;
  align-items: center;
  white-space: nowrap; }
  .paint > span {
    animation: run 1s linear infinite; }
  .paint > .eleps {
    animation: none;
    width: 16px;
    display: inline-block;
    height: 16px;
    background: linear-gradient(0deg, #4f4f4f, #4f4f4f), linear-gradient(0deg, #4f4f4f, #4f4f4f), #4f4f4f;
    border: 0px solid transparent;
    border-radius: 50%;
    margin-left: 12px; }
    .paint > .eleps:first-child {
      margin-left: 0px; }
  .paint > .placeholder {
    animation: none;
    color: #bdbdbd;
    font-size: 16px;
    position: absolute;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center; }
    .paint > .placeholder + span {
      display: none; }

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

.SelectPopap {
  overflow-y: auto;
  min-width: 540px;
  max-width: 540px;
  max-height: 500px;
  padding: 10px 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .SelectPopap > .item-select {
    min-width: 218px;
    background: #F2F2F2;
    height: 58px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 13px;
    margin-bottom: 13px;
    font-size: 1.6em;
    color: #000000; }
    .SelectPopap > .item-select:nth-child(even) {
      margin-right: 0px; }

.restInput {
  width: 100%; }
  .restInput input {
    width: 100%;
    min-height: 40px;
    font-size: 16px;
    background: #c5c6c6;
    color: #000000;
    border: none;
    padding: 5px;
    display: flex;
    overflow-x: auto;
    align-items: center;
    white-space: nowrap; }

.systems {
  flex-direction: column;
  align-items: center; }
  .systems .title {
    text-align: center;
    margin-bottom: 20px; }

.systems__content {
  width: 100%;
  padding: 10px; }
  .systems__content .ant-table-content .systems__table-row:hover .ant-table-cell {
    background-color: #e6f7ff; }
  .systems__content .systems__add-btn {
    margin-top: 20px; }

.systems__form .ant-form-item-label {
  width: 100px;
  flex-shrink: 0; }

.systems__form .ant-input-group-addon {
  width: 32px;
  padding: 0; }
  .systems__form .ant-input-group-addon .ant-btn {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none; }
    .systems__form .ant-input-group-addon .ant-btn .anticon {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      width: 100%; }

.systems__subscribe .ant-form-item-label {
  width: 150px;
  min-width: 150px; }

.systems__info-list {
  width: 100%;
  margin: 0;
  padding: 0; }
  .systems__info-list li {
    display: flex;
    list-style: none;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0; }
    .systems__info-list li b {
      margin-right: 10px; }
    .systems__info-list li span {
      margin-left: auto; }

.step.logs {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .step.logs .title {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px; }

.logs__content {
  overflow: hidden;
  display: flex;
  flex-grow: 1;
  height: 500px;
  padding: 10px; }
  .logs__content .ant-table-wrapper,
  .logs__content .ant-spin-nested-loading {
    width: 100%;
    height: 100%; }
  .logs__content .ant-spin-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; }
    .logs__content .ant-spin-container .ant-table {
      overflow: hidden;
      overflow-y: auto;
      height: 500px;
      flex-grow: 1; }

.rack {
  display: flex;
  width: 100%;
  height: 100%; }
  .rack .left {
    width: calc(100% - 408px);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 90px;
    position: relative;
    padding-right: 9px; }
    .rack .left h2.title {
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      text-align: center; }
    .rack .left .main {
      max-height: calc(100% - 24px - 16px - 16px); }
    .rack .left .panel-btn-navigate {
      display: flex;
      position: absolute;
      height: 56px;
      width: 100%;
      left: 0px;
      bottom: 0px;
      background: #4F4F4F;
      align-items: center;
      justify-content: flex-end;
      padding: 0px 12px; }
      .rack .left .panel-btn-navigate button.b {
        width: 202px;
        height: 70px;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0px solid transparent;
        font-weight: bold;
        font-size: 20px;
        color: #333333; }
  .rack .right {
    width: 408px;
    height: 100%; }

table.table-component {
  border-spacing: 0px; }
  table.table-component thead {
    background: #4f4f4f;
    display: table;
    width: 100%;
    table-layout: fixed; }
    table.table-component thead th {
      color: #ffffff;
      padding: 5px 8px; }
  table.table-component > tbody {
    display: block;
    height: 500px;
    overflow-y: auto; }
    table.table-component > tbody tr {
      line-height: 22px;
      display: table;
      width: 100%;
      table-layout: fixed;
      font-weight: 400; }
      table.table-component > tbody tr.active {
        background: #4f4f4f;
        color: #ffffff; }
      table.table-component > tbody tr th {
        word-break: break-all;
        font-weight: 400;
        font-size: 12px; }

.RackPanel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1A1A1A;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 20px; }
  .RackPanel .title {
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    margin-bottom: 17px; }

.select-mt .line {
  min-height: 75px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-bottom: 1px solid #C5C6C6;
  padding-left: 10px;
  position: relative;
  padding-right: 45px; }
  .select-mt .line > .title {
    color: #F8F8F8;
    font-size: 1.6em;
    text-transform: uppercase;
    font-weight: bold; }
  .select-mt .line > button.state {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 41px;
    height: 41px;
    border: 0px solid transparent;
    border-radius: 50%;
    right: 0px;
    background: transparent; }
    .select-mt .line > button.state::after, .select-mt .line > button.state::before {
      content: "";
      position: absolute;
      height: 3px;
      display: block;
      width: 18px;
      background: #fefefe; }
    .select-mt .line > button.state.add::after {
      transform: rotate(45deg); }
    .select-mt .line > button.state.add::before {
      transform: rotate(-45deg); }
    .select-mt .line > button.state.remove::after {
      transform: rotate(45deg);
      margin-left: -5px; }
    .select-mt .line > button.state.remove::before {
      transform: rotate(-45deg);
      margin-left: 6px; }
  .select-mt .line > .value .name-value span {
    color: #FFFFFF;
    font-size: 1.6em;
    font-style: normal;
    font-weight: bold; }
    .select-mt .line > .value .name-value span::after {
      content: ', '; }
    .select-mt .line > .value .name-value span:last-child::after {
      content: none; }
  .select-mt .line > .value > .value-length {
    color: #FFFFFF;
    font-size: 1.6em;
    font-style: normal;
    font-weight: bold; }
    .select-mt .line > .value > .value-length::before {
      content: " "; }

.select-mt > .select-data {
  position: fixed;
  left: 0;
  z-index: 999;
  top: 53px;
  height: calc(100vh - 53px);
  width: calc(100vw - 408px);
  background: #FAFAFA;
  display: flex;
  flex-direction: column; }
  .select-mt > .select-data .select-data-container-title {
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    color: #1A1A1A;
    text-align: center;
    width: 100%;
    padding-top: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid  #C4C4C4; }
  .select-mt > .select-data > .select-data-container {
    padding: 8px 10px;
    height: calc(100% - 53px);
    overflow-y: auto;
    width: 100%;
    margin: 0 auto; }
    .select-mt > .select-data > .select-data-container .max-container {
      max-width: 750px;
      margin: 0 auto;
      justify-content: space-between;
      align-items: self-start;
      align-content: start;
      display: flex;
      flex-wrap: wrap; }
    .select-mt > .select-data > .select-data-container .select-data-item {
      min-width: 232px;
      width: 218px;
      height: 58px;
      color: #000000;
      font-size: 1.6em;
      background: #FAFAFA;
      display: inline-flex;
      padding: 0px 16px;
      align-items: center;
      justify-content: flex-start; }
      .select-mt > .select-data > .select-data-container .select-data-item.active {
        background: #8CB0BF;
        color: #FFFFFF; }
        .select-mt > .select-data > .select-data-container .select-data-item.active > span::after {
          content: "";
          position: absolute;
          width: 22px;
          height: 16px;
          background: url("/static/img/active.svg") no-repeat; }
      .select-mt > .select-data > .select-data-container .select-data-item span {
        position: relative;
        margin-right: 9px;
        width: 30px;
        min-width: 30px;
        height: 30px;
        background: #BDBDBD;
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center; }
  .select-mt > .select-data .panel {
    width: 100%;
    height: 53px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gray);
    padding: 0px 12px;
    margin-top: auto; }
    .select-mt > .select-data .panel > span {
      font-weight: bold;
      font-size: 1.8em;
      color: #F2F2F2; }
    .select-mt > .select-data .panel .clear {
      width: 67px;
      min-width: 67px;
      border: 1px solid #F2F2F2;
      height: 40px;
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      .select-mt > .select-data .panel .clear::after, .select-mt > .select-data .panel .clear::before {
        content: "";
        width: 62px;
        height: 1px;
        background-color: #F2F2F2;
        transform: rotate(-45deg);
        position: absolute; }
      .select-mt > .select-data .panel .clear::after {
        transform: rotate(45deg); }
    .select-mt > .select-data .panel > .select-data-gruop-btn {
      display: flex; }
      .select-mt > .select-data .panel > .select-data-gruop-btn button {
        width: 144px;
        height: 40px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333333;
        font-size: 18px;
        line-height: 21px;
        font-weight: bold;
        border: 0px solid transparent; }
        .select-mt > .select-data .panel > .select-data-gruop-btn button:last-child {
          width: 104px;
          margin-left: 9px; }

.select-mt.active {
  background: #8CB0BF; }
  .select-mt.active .line > button.state {
    transform: rotate(90deg); }

.btn {
  width: 200px;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  border: 0px solid transparent;
  background-color: transparent;
  cursor: pointer; }
  .btn img {
    width: 34px;
    height: auto; }
  .btn span {
    font-size: 12px;
    margin-left: 20px;
    color: #ffffff; }
  .btn.active {
    background-color: #000000;
    border: 0px solid transparent; }
    .btn.active span {
      color: var(--lightPrimary); }
    .btn.active.help p {
      color: var(--lightPrimary); }
  .btn.help p {
    margin: 0px;
    font-weight: bold;
    font-size: 46.8px; }

.button {
  border: 0px solid transparent;
  cursor: pointer;
  background-color: transparent;
  display: flex; }

.button-clear-filter {
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0px; }

.RackInfo {
  width: 408px;
  padding: 0px;
  height: 100%;
  background: #1A1A1A;
  position: relative;
  padding-left: 20px;
  padding-right: 27px;
  padding-top: 12px;
  overflow-y: auto;
  padding-bottom: 9px; }
  .RackInfo .modal > .modal-close-btn {
    display: none; }
  .RackInfo > .top {
    border-bottom: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative; }
    .RackInfo > .top .icon {
      width: 100px;
      height: 100px;
      background: url("/static/img/icon/user-defult.png") no-repeat;
      background-size: 100%;
      margin-right: 23px;
      filter: invert(100%); }
    .RackInfo > .top .name {
      color: #FFFFFF;
      font-weight: bold;
      font-size: 2.6em; }
    .RackInfo > .top .clear {
      background-color: transparent;
      border: 0px solid transparent;
      width: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 46px;
      position: absolute;
      padding: 0px;
      top: 0px;
      right: 0px; }
      .RackInfo > .top .clear::after, .RackInfo > .top .clear::before {
        width: 100%;
        height: 5px;
        background-color: #FFFFFF;
        display: block;
        content: "";
        position: absolute;
        transform: rotate(45deg); }
      .RackInfo > .top .clear::after {
        transform: rotate(-45deg); }
  .RackInfo > .center {
    padding-top: 16px;
    display: flex;
    flex-direction: column; }
    .RackInfo > .center .item {
      display: flex;
      margin-bottom: 10px; }
      .RackInfo > .center .item > .title {
        min-width: 155px;
        color: #BDBDBD;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.6em;
        padding-left: 10px;
        padding-right: 10px; }
      .RackInfo > .center .item span {
        color: #FFFFFF;
        font-size: 1.6em;
        font-weight: bold; }
        .RackInfo > .center .item span .LineCar {
          width: 395.73px;
          height: 52.68px;
          min-width: 395.73px;
          min-height: 52.68px;
          padding-left: 10px;
          padding-right: 10px; }
          .RackInfo > .center .item span .LineCar .left {
            width: 200px; }
          .RackInfo > .center .item span .LineCar .active,
          .RackInfo > .center .item span .LineCar .state-icon,
          .RackInfo > .center .item span .LineCar .riaght {
            display: none; }
          .RackInfo > .center .item span .LineCar .center {
            min-width: 0px;
            width: auto;
            margin: 0px; }
          .RackInfo > .center .item span .LineCar > .center .centerTop {
            font-weight: bold;
            font-size: 16px;
            color: #000000; }
          .RackInfo > .center .item span .LineCar > .center .centerBottom {
            font-weight: bold;
            font-size: 10px;
            color: #828282; }
          .RackInfo > .center .item span .LineCar > .left .bottom {
            font-weight: bold;
            font-size: 14px;
            color: #333333; }
  .RackInfo > .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin-top: 26px; }
    .RackInfo > .bottom > button {
      width: 326px;
      height: 40px;
      min-width: 326px;
      min-height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 22px;
      border: 1px solid #FFFFFF;
      background-color: transparent;
      color: #F2F2F2;
      text-transform: uppercase;
      font-size: 1.8em; }
      .RackInfo > .bottom > button:last-child {
        margin-bottom: 0px; }

.manager {
  width: 100%;
  padding: 10px; }

.manager__content .title {
  text-align: center;
  margin-bottom: 20px; }

.manager__add-btn {
  margin-top: 10px; }

.manager__form {
  min-height: 400px; }
  .manager__form .ant-form-item-label {
    width: 100px;
    flex-shrink: 0; }

.updates {
  padding: 10px; }

.updates__content {
  display: flex;
  justify-content: center;
  padding-top: 30px; }
  .updates__content .ant-tabs {
    width: 100%; }
    .updates__content .ant-tabs .ant-tabs-tabpane {
      display: flex;
      padding: 20px; }
  .updates__content .ant-tabs-nav-operations {
    position: absolute;
    pointer-events: none; }

.updates__form {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin-right: 20px; }
  .updates__form:last-child {
    margin-right: 0; }
  .updates__form .updates__form-title {
    margin: 0;
    margin-bottom: 10px; }
  .updates__form .ant-form-horizontal,
  .updates__form .ant-form-item-control {
    flex: 0 0; }
  .updates__form .ant-form-item {
    display: flex;
    flex-direction: column; }
  .updates__form .ant-form-item-label {
    text-align: left; }

.renew_form {
  display: flex;
  flex-direction: column;
  padding: 10%;
  justify-content: space-between;
  height: 420px;
  font-size: 16px; }
  .renew_form .content {
    display: flex;
    flex-direction: column; }
    .renew_form .content input,
    .renew_form .content select {
      margin-bottom: 20px;
      font-size: 18px;
      border: none;
      padding: 6px; }
    .renew_form .content span {
      margin-bottom: 8px; }
  .renew_form button {
    font-size: 20px;
    border: none;
    cursor: pointer;
    height: 46px;
    color: #ffffff;
    background: #4f4f4f; }

.roles {
  overflow: hidden;
  overflow-y: auto; }

.user-role {
  display: flex;
  margin-bottom: 30px;
  padding: 10px; }
  .user-role .ant-table-wrapper {
    width: 100%; }

.roles__controls {
  padding: 10px; }

.roles__render-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 200px; }
  .roles__render-header .ant-btn {
    margin: 0 5px;
    border: none; }

.roles__render-header-title {
  text-align: center;
  width: 100%;
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.account .title {
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: center; }

.acount__content {
  padding: 10px; }

.acount__list-info {
  width: 300px;
  margin: 0;
  padding: 0;
  padding-left: 50px; }

.acount__list-item {
  list-style: none;
  display: flex;
  font-size: 18px;
  margin-bottom: 10px; }
  .acount__list-item b {
    width: 200px;
    min-width: 200px;
    margin-right: auto; }

.clientList {
  display: flex; }
  .clientList > .right {
    width: 408px;
    min-width: 408px;
    padding: 0px;
    background: #1a1a1a;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 23px;
    padding-right: 23px;
    max-height: calc(100vh - 56px);
    min-height: calc(100vh - 56px); }
    .clientList > .right .SearchPhone div.rowSearchPhone button {
      background-color: #c5c6c6;
      padding-right: 10px; }
    .clientList > .right .SearchPhone input {
      background: #c5c6c6;
      color: #ffffff;
      font-size: 40px; }
    .clientList > .right .SearchPhone .keyboard .keyboard-rows .row_keyboard .key button {
      min-width: 87px;
      min-height: 87px;
      width: 87px;
      height: 87px; }
    .clientList > .right .SearchPhone .keyboard .keyboard-rows .row_keyboard .key .empty {
      background: #1a1a1a; }
  .clientList > .left {
    width: calc(100% - 408px);
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 22px;
    padding-top: 13px;
    max-height: calc(100vh - 56px);
    min-height: calc(100vh - 56px);
    padding-bottom: 56px; }
    .clientList > .left > .title {
      color: #333333;
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 13px;
      text-align: center; }
    .clientList > .left > .list {
      height: calc(100% - (37px + 56px)); }
    .clientList > .left .ScrollView.scroll-custom {
      margin-right: 0px;
      width: 100%;
      height: 100%; }
    .clientList > .left > .bottom-panel-clientlist {
      position: absolute;
      width: 100%;
      left: 0px;
      bottom: 0px;
      min-width: 691px;
      height: 56px;
      background: var(--gray);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 12px;
      padding-right: 10px; }
      .clientList > .left > .bottom-panel-clientlist .prew {
        width: 142px;
        height: 40px;
        border: 1px solid #ffffff;
        background: var(--gray);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 18px;
        color: #f2f2f2; }
      .clientList > .left > .bottom-panel-clientlist .xls {
        background: #ffffff;
        display: flex;
        width: 185px;
        height: 40px;
        border: 0px solid #ffffff;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        margin-left: 1px; }

.ScrollView {
  width: 100%;
  overflow-y: auto;
  height: calc(100% - 72px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }

.clientline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 101px;
  min-height: 101px;
  max-width: 968px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 20px;
  border-bottom: 2px solid #c4c4c4; }
  .clientline.active {
    background: #8cb0bf; }
    .clientline.active > div {
      color: #ffffff; }
  .clientline:first-child {
    border-top: 2px solid #c4c4c4; }
  .clientline > div {
    width: calc(100% / 3);
    color: #000000; }
  .clientline .clientline_one {
    font-weight: bold;
    font-size: 23px; }
  .clientline .clientline_two {
    font-weight: bold;
    font-size: 16px; }
  .clientline .clientline_three {
    font-weight: 100;
    font-size: 23px; }

.clientListInfo {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto; }
  .clientListInfo .document-client h1 {
    text-align: center;
    color: #ffffff; }
  .clientListInfo .document-client .document-item {
    color: #ffffff;
    font-size: 16px;
    font-weight: 100; }
  .clientListInfo .document-client span {
    font-weight: bold;
    margin-right: 10px; }

.test-drives {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .test-drives .title {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px; }

.test-drives__content {
  overflow: hidden;
  display: flex;
  flex-grow: 1;
  height: 500px;
  padding: 10px; }
  .test-drives__content .ant-table-wrapper,
  .test-drives__content .ant-spin-nested-loading {
    width: 100%;
    height: 100%; }
  .test-drives__content .ant-spin-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; }
    .test-drives__content .ant-spin-container .ant-table {
      overflow: hidden;
      overflow-y: auto;
      height: 500px;
      flex-grow: 1; }
  .test-drives__content .test-drives__table-row {
    cursor: pointer; }
    .test-drives__content .test-drives__table-row:hover .ant-table-cell {
      background-color: #e6f7ff; }
  .test-drives__content .test-drives__client-name {
    overflow: hidden;
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis; }

.test-drives__modal h3 {
  text-align: center; }

.test-drives__modal-item {
  display: flex;
  width: 100%;
  margin-bottom: 10px; }

.report {
  padding: 22px;
  font-size: 14px; }
  .report h2 {
    color: #333333;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 13px;
    text-align: center; }
  .report p {
    margin: 10px 0; }

.dealerPage {
  padding-top: 30px; }
  .dealerPage .dealer-tabler {
    padding-left: 30px;
    padding-right: 30px; }

.user-local {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .user-local .title {
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center; }

.user-local__content {
  overflow: hidden;
  display: flex;
  flex-grow: 1;
  height: 500px;
  padding: 10px; }
  .user-local__content .ant-table-wrapper,
  .user-local__content .ant-spin-nested-loading {
    width: 100%;
    height: 100%; }
  .user-local__content .ant-spin-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; }
    .user-local__content .ant-spin-container .ant-table {
      overflow: hidden;
      overflow-y: auto;
      height: 500px;
      flex-grow: 1; }
  .user-local__content .user-local__table-row {
    cursor: pointer; }
    .user-local__content .user-local__table-row:hover .ant-table-cell {
      background-color: #e6f7ff; }

.main-spin {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); }

.Alert-dialog {
  position: fixed;
  z-index: -1000;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  transition: 500ms; }
  .Alert-dialog.active {
    z-index: 1001;
    opacity: 1; }
  .Alert-dialog > .Alert-content {
    min-width: 528px;
    min-height: 243px;
    background: var(--lightPrimary);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); }

.open .top h1 {
  margin-top: 22px;
  color: var(--gray);
  text-align: center;
  font-size: 2.4em;
  font-weight: normal; }

.open .center {
  margin-top: 26px;
  margin-bottom: 26px; }
  .open .center h1 {
    color: var(--darkPrimary);
    text-align: center;
    font-size: 2.4em;
    font-weight: bold; }

.open .bottom {
  font-size: 1.6em;
  color: var(--darkPrimary);
  text-align: center; }

.message {
  min-width: 528px;
  min-height: 243px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column; }
  .message > .title {
    color: #4f4f4f;
    font-size: 2.4em;
    margin-top: 22px;
    margin-bottom: 50px; }
  .message > .status {
    display: flex;
    justify-content: center;
    margin-bottom: 43px;
    align-items: center; }
    .message > .status span {
      font-size: 2.4em;
      color: #000000;
      font-weight: bold;
      margin-left: 8px;
      display: flex;
      align-items: center; }
    .message > .status .icon.succsus {
      min-width: 50px;
      min-height: 50px;
      width: 50px;
      height: 50px;
      background: url("/static/img/check-circle.png") no-repeat; }
  .message > .description {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    margin-bottom: 39px;
    font-size: 1.4em; }

.alert-rfid {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .alert-rfid h2 {
    margin-bottom: 0px;
    font-size: 24px;
    align-items: center;
    color: #4f4f4f;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 22px; }
    .alert-rfid h2.black {
      margin-top: 35px;
      color: #000000;
      font-weight: bold;
      font-size: 24px;
      margin-bottom: 35px; }
  .alert-rfid span {
    font-size: 25px;
    color: #000000; }

.Error {
  max-width: 528px; }
  .Error h2 {
    text-align: center;
    color: #4f4f4f;
    font-weight: normal;
    font-size: 24px; }
  .Error h1 {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    color: #000000; }
  .Error div {
    display: flex;
    align-items: center;
    justify-content: center; }
    .Error div svg {
      margin-right: 7px; }

.FirstUserEntry {
  width: 938px;
  height: 657px;
  padding: 32px 60px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  background: #ffffff; }
  .FirstUserEntry .title {
    height: 40px;
    font-size: 24px;
    text-align: center;
    color: #4f4f4f;
    margin-bottom: 8px; }
  .FirstUserEntry .text {
    height: 356px;
    overflow-y: auto;
    font-size: 16px;
    text-align: justify;
    display: flex;
    align-items: center;
    color: #4f4f4f;
    padding-top: 30px; }
  .FirstUserEntry label.agreed {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .FirstUserEntry label.agreed input {
      display: none; }
    .FirstUserEntry label.agreed input:checked + .icon::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 16px;
      background: url("/static/img/active.svg") no-repeat; }
    .FirstUserEntry label.agreed .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      min-width: 20px;
      background: #bdbdbd;
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 50%; }
    .FirstUserEntry label.agreed span {
      margin-left: 6px;
      font-size: 16px;
      color: #4f4f4f; }
  .FirstUserEntry .ok button {
    width: 290px;
    height: 40px;
    border: 1px solid #4f4f4f;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: 24px;
    color: #000000; }
    .FirstUserEntry .ok button:disabled {
      opacity: 0.6; }

.PopapCar {
  min-width: 672px;
  max-width: 672px;
  min-height: 591px;
  background: #828282;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 20px 22px; }
  .PopapCar > .tab-control {
    position: absolute;
    top: -50px;
    left: 0;
    display: flex; }
    .PopapCar > .tab-control button {
      height: 50px;
      display: flex;
      padding: 0px 15px;
      border: 1px solid #828282;
      background-color: #C5C6C6;
      color: #ffffff; }
      .PopapCar > .tab-control button.active {
        background-color: #828282; }
  .PopapCar > .bottom {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: flex-end;
    padding: 0px 10px;
    background: #4f4f4f;
    position: absolute;
    bottom: 0px;
    left: 0px;
    align-items: center; }
    .PopapCar > .bottom button {
      width: 181px;
      height: 40px;
      border: 0px solid transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333333;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 20px; }
  .PopapCar > .center {
    width: 100%;
    height: 370px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 15px 0px; }
    .PopapCar > .center > .item-state {
      margin-bottom: 12px;
      display: flex;
      min-height: fit-content; }
      .PopapCar > .center > .item-state .title {
        max-width: 160px;
        width: 100%;
        color: #bdbdbd;
        font-weight: bold;
        font-size: 16px;
        margin-right: 15px;
        text-transform: uppercase; }
      .PopapCar > .center > .item-state span {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff; }
  .PopapCar > .top {
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    padding-bottom: 15px; }
    .PopapCar > .top > .clear {
      width: 40px;
      min-width: 40px;
      position: relative;
      border: 0px solid;
      height: 40px;
      background-color: transparent;
      display: flex;
      align-items: center;
      cursor: pointer;
      position: absolute;
      justify-content: center;
      border: 0px solid;
      right: 0;
      top: 0;
      cursor: pointer; }
      .PopapCar > .top > .clear::after, .PopapCar > .top > .clear:before {
        content: "";
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        transform: rotate(-45deg);
        position: absolute; }
      .PopapCar > .top > .clear::after {
        transform: rotate(45deg); }
    .PopapCar > .top > .title-top {
      display: flex;
      color: #ffffff;
      align-items: flex-end;
      margin-bottom: 9px; }
      .PopapCar > .top > .title-top .name {
        font-style: normal;
        font-weight: bold;
        font-size: 26px;
        margin-right: 8px; }
      .PopapCar > .top > .title-top .vin {
        font-weight: bold;
        font-size: 18px; }
    .PopapCar > .top > .title-bottom {
      display: flex;
      flex-direction: column;
      color: #ffffff;
      font-weight: bold;
      font-size: 16px; }
      .PopapCar > .top > .title-bottom > div {
        display: flex;
        align-items: center; }
      .PopapCar > .top > .title-bottom span {
        display: flex;
        min-width: 130px;
        min-height: 30px;
        color: #bdbdbd;
        align-items: center;
        font-weight: bold;
        font-size: 16px; }