@charset "UTF-8";
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
}
body img, html img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}

.modal-overlay {
  position: fixed;
  width: 80%;
  max-width: 700px;
  height: 90%;
  max-height: 900px;
  background-color: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid #0C3D59;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 1;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 20px;
}
.modal-overlay .header {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 12px;
  box-sizing: border-box;
  background-color: #0C3D59;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.modal-overlay .header .element {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.modal-overlay .header .vibrate {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0ff;
  transform: scale(1);
  box-shadow: 0 0 0 rgb(0, 0, 0);
  animation: anim-vibrate 2s cubic-bezier(0, 0, 0, 1.11) infinite;
}
@keyframes anim-vibrate {
  0% {
    transform: scale(0.65);
    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.65);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
.modal-overlay .window {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%; /* Ширина относительно родителя */
  max-width: 520px; /* Максимальная ширина */
  height: auto;
  padding: 24px 0;
  margin-top: 56px;
  text-align: center;
}
.modal-overlay .window .card-img {
  z-index: 1;
  width: 50%;
  max-width: 250px; /* Адаптивная ширина изображения */
  height: auto;
  position: relative;
}
.modal-overlay .window p {
  width: 100%;
  max-width: 220px;
  font-size: 1em;
  color: rgb(238, 238, 238);
}
.modal-overlay .window .modal-img {
  transform: translateX(-7px); /* Сместить влево на 18px */
  width: 100%; /* Адаптивная ширина изображения */
  height: auto;
}
.modal-overlay .tabs {
  width: 100%;
}
.modal-overlay .tabs .tab-buttons {
  display: flex;
  justify-content: flex-start;
  border-bottom: 2px solid #0C3D59;
}
.modal-overlay .tabs .tab-buttons .tab-button {
  padding: 10px 20px;
  cursor: pointer;
  background-color: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  border-bottom: 2px solid transparent;
  color: rgb(238, 238, 238);
}
.modal-overlay .tabs .tab-buttons .tab-button.active {
  border-bottom: 2px solid #0ff;
  color: #0ff;
}
.modal-overlay .tabs .tab-content {
  display: none;
}
.modal-overlay .tabs .tab-content .window-result {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%; /* Ширина относительно родителя */
  max-width: 420px; /* Максимальная ширина */
  height: 250px;
  padding: 24px 0;
  box-sizing: border-box;
  margin-top: 56px;
  text-align: center;
}
.modal-overlay .tabs .tab-content .window-result .result {
  z-index: 1;
  width: 50%;
  max-width: 110px; /* Адаптивная ширина изображения */
  height: auto;
  position: relative;
}
.modal-overlay .tabs .tab-content .window-result p {
  width: 100%;
  max-width: 220px;
  font-size: 1em;
  color: rgb(238, 238, 238);
}
.modal-overlay .tabs .tab-content .window-result .modal-img {
  transform: translateX(-7px); /* Сместить влево на 18px */
  width: 100%; /* Адаптивная ширина изображения */
  height: auto;
}
.modal-overlay .tabs .tab-content .table-tb {
  margin-top: 56px;
  position: relative;
  max-width: 650px;
  width: 90%;
  border-collapse: collapse;
  z-index: 4;
}
.modal-overlay .tabs .tab-content .table-tb table {
  width: 100%;
  border-collapse: collapse; /* Убираем промежутки между ячейками для более точных линий */
  background-color: rgba(12, 61, 89, 0.164);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.modal-overlay .tabs .tab-content .table-tb table thead {
  border-top: 1px solid #112b3a;
  border-bottom: 1px solid #112b3a;
}
.modal-overlay .tabs .tab-content .table-tb table tbody tr {
  border-bottom: 1px solid #112b3a;
}
.modal-overlay .tabs .tab-content .table-tb table tbody tr:hover {
  background-color: rgba(65, 65, 65, 0.089);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.modal-overlay .tabs .tab-content .table-tb th, .modal-overlay .tabs .tab-content .table-tb td {
  padding: 12px;
  text-align: left;
  color: rgb(238, 238, 238);
}
.modal-overlay .tabs .tab-content .table-tb tbody tr td {
  font-size: 14px;
  font-weight: 100;
  text-transform: uppercase;
  color: rgba(238, 238, 238, 0.5);
}
.modal-overlay .tabs .tab-content .table-tb tbody tr:hover td {
  font-size: 14px;
  font-weight: 100;
  text-transform: uppercase;
  color: rgba(238, 238, 238, 0.9);
}
.modal-overlay .tabs .tab-content.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal-overlay .avatar {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 300px;
  height: 300px;
  margin-top: 50px;
}
.modal-overlay .avatar .stroke-circle {
  position: absolute;
  width: 240px; /* Ширина круга */
  height: 240px; /* Высота круга */
  border-radius: 50%; /* Скругление для создания круга */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto; /* Центрирование круга на странице */
}
.modal-overlay .avatar .arrows {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-overlay .avatar .outer-circle {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto; /* Центрирование контейнера */
  animation: rotate 7s linear infinite;
}
.modal-overlay .avatar .user {
  position: absolute; /* исправляем на absolute, чтобы аватар накладывался поверх круга */
  width: 220px;
  height: 220px;
  background-image: url("../img/avatar.png");
  background-size: cover; /* добавляем для корректного отображения изображения */
  background-position: center;
  border-radius: 50%; /* чтобы картинка была круглой */
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.modal-overlay .table {
  margin-top: 32px;
  position: relative;
  width: 400px;
  border-collapse: collapse;
  z-index: 4;
}
.modal-overlay .table table {
  width: 100%;
  border-left: 2px solid rgb(238, 238, 238);
}
.modal-overlay .table td {
  padding: 12px;
  text-align: left;
}
.modal-overlay .table tbody tr td {
  font-size: 14px;
  font-weight: 100;
  text-transform: uppercase;
  color: rgb(238, 238, 238);
}
.modal-overlay .inputs {
  position: absolute;
  bottom: 190px;
  width: 90%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.modal-overlay .inputs .input-group {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
  /* Вертикальная полоса справа */
}
.modal-overlay .inputs .input-group .border-left {
  position: absolute;
  width: 6px; /* Толщина полосы */
  height: 70px; /* Высота полосы */
  background-color: #0C3D59; /* Цвет полосы */
  z-index: 3;
}
.modal-overlay .inputs .input-group .border-right {
  position: absolute;
  right: 0;
  width: 6px; /* Толщина полосы */
  height: 70px; /* Высота полосы */
  background-color: #0C3D59; /* Цвет полосы */
  z-index: 3;
}
.modal-overlay .inputs .input-group .border-linear1 {
  position: absolute;
  top: -8px;
  left: 7px;
  width: 6px;
  height: 20px;
  background-color: #0C3D59;
  z-index: 3;
  transform: rotate(90deg);
}
.modal-overlay .inputs .input-group .border-linear1_1 {
  position: absolute;
  top: -8px;
  right: 7px;
  width: 6px;
  height: 20px;
  background-color: #0C3D59;
  z-index: 3;
  transform: rotate(90deg);
}
.modal-overlay .inputs .input-group .border-linear2 {
  position: absolute;
  bottom: -8px;
  left: 7px;
  width: 6px;
  height: 20px;
  background-color: #0C3D59;
  z-index: 3;
  transform: rotate(90deg);
}
.modal-overlay .inputs .input-group .border-linear2_1 {
  position: absolute;
  bottom: -8px;
  right: 7px;
  width: 6px;
  height: 20px;
  background-color: #0C3D59;
  z-index: 3;
  transform: rotate(90deg);
}
.modal-overlay .inputs .input-group .input-field {
  position: relative;
  background-color: rgba(8, 47, 78, 0.322);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  height: 70px;
  width: 100%;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #0ff;
  border: none; /* Убираем стандартный бордер */
  box-sizing: border-box;
}
.modal-overlay .inputs .input-group .input-field:focus {
  background-color: rgba(12, 61, 89, 0.7);
  outline: none;
}
.modal-overlay .inputs .input-group .error {
  color: #ff0000;
  font-size: 12px;
}
.modal-overlay .error {
  position: absolute;
  bottom: 130px;
  color: rgb(238, 238, 238);
}
.modal-overlay .btn-logout {
  display: none;
  position: absolute;
  bottom: 40px;
  width: 176px;
  height: 70px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease; /* Плавный переход для изменения масштаба */
}
.modal-overlay .btn-logout p {
  position: absolute;
  top: 15px;
  left: 70px;
  color: rgb(238, 238, 238);
  z-index: 1;
  transition: color 0.3s ease; /* Плавный переход для цвета текста */
}
.modal-overlay .btn-logout:hover .login-svg path, .modal-overlay .btn-logout:hover .login-svg rect {
  fill: #0ff; /* Новый цвет для всех path и rect */
}
.modal-overlay .btn-logout:hover {
  transform: scale(1.1); /* Изменение масштаба при наведении */
}
.modal-overlay .btn-logout:hover .login-svg .btn-fon {
  fill: #0C3E5A;
}
.modal-overlay .btn-logout:hover p {
  color: #66ffff; /* Изменение цвета текста при наведении */
}
.modal-overlay .btn-logout:active {
  transform: scale(0.95);
}
@media (max-width: 768px) {
  .modal-overlay .btn-logout:hover {
    transform: scale(1);
  }
  .modal-overlay .btn-logout:active {
    transform: scale(0.95);
  }
}
.modal-overlay .btn-login {
  position: absolute;
  bottom: 40px;
  width: 176px;
  height: 70px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease; /* Плавный переход для изменения масштаба */
}
.modal-overlay .btn-login p {
  position: absolute;
  top: 15px;
  left: 70px;
  color: rgb(238, 238, 238);
  z-index: 1;
  transition: color 0.3s ease; /* Плавный переход для цвета текста */
}
.modal-overlay .btn-login:hover .login-svg path, .modal-overlay .btn-login:hover .login-svg rect {
  fill: #0ff; /* Новый цвет для всех path и rect */
}
.modal-overlay .btn-login:hover {
  transform: scale(1.1); /* Изменение масштаба при наведении */
}
.modal-overlay .btn-login:hover .login-svg .btn-fon {
  fill: #0C3E5A;
}
.modal-overlay .btn-login:hover p {
  color: #66ffff; /* Изменение цвета текста при наведении */
}
.modal-overlay .btn-login:active {
  transform: scale(0.95);
}
@media (max-width: 768px) {
  .modal-overlay .btn-login:hover {
    transform: scale(1);
  }
  .modal-overlay .btn-login:active {
    transform: scale(0.95);
  }
}/*# sourceMappingURL=styles.css.map */