@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body {
  margin: auto;
  background: #f7fdff;
}

.box-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  body {
    background: #fff;
  }

  .box-center {
    width: 100%;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    position: absolute;
    box-shadow: none;
  }
}

button,
input,
select,
textarea {
  border-radius: 0 !important;
}

.btn-primary,
.bg-primary {
  background-color: #00b9e8 !important;
  border-color: #00b9e8 !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
  background-color: #0d8faf !important;
  border-color: #0d8faf !important;
  transition: ease-in-out 0.2s;
}

.btn-success,
.bg-success {
  background-color: #3eb489 !important;
  border-color: #3eb489 !important;
}

.btn-success:hover,
.btn-success:active,
.btn-success:focus,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
  background-color: #2b8b68 !important;
  border-color: #2b8b68 !important;
  transition: ease-in-out 0.2s;
}

.required::before {
  content: "*";
  color: red;
}

.hidden {
  display: none;
}

/* timeline */
.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: #ebebeb;
}

.timeline-item {
  margin-bottom: 40px;
  position: relative;
}

.timeline-content {
  position: relative;
  margin-left: 0%;
  padding-left: 30px;
}

.timeline-marker {
  position: absolute;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e9ecef;
  transition: all 0.3s ease;
}

.timeline-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.timeline-header i {
  font-size: 1.25rem;
}

.timeline-header .title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.timeline-item.active .timeline-marker {
  background: #28a745;
  box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.2);
}

.timeline-item.active .timeline-card {
  border-left: 4px solid #28a745;
}

.timeline-item[data-status="waiting-verification"].active .timeline-marker {
  background: #dc3545;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2);
}

.timeline-item[data-status="waiting-verification"].active .timeline-card {
  border-left: 4px solid #dc3545;
}

.timeline-item[data-status="waiting-info"].active .timeline-marker {
  background: #ffc107;
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2);
}

.timeline-item[data-status="waiting-info"].active .timeline-card {
  border-left: 4px solid #ffc107;
}

.timeline-item[data-status="processing"].active .timeline-marker {
  background: #007bff;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
}

.timeline-item[data-status="processing"].active .timeline-card {
  border-left: 4px solid #007bff;
}

@media (max-width: 768px) {
  .timeline::before {
    left: 20px;
  }

  .timeline-content {
    margin-left: 0;
    padding-left: 50px;
  }

  .timeline-marker {
    left: 14px;
  }
}