/* ===============================
   Onboarding Wrapper
=================================*/
.restaler-onboarding {
  max-width: 940px;
  margin: 120px auto 0 auto;
}

.restaler-onboarding h1 {
  text-align: center;
  margin: 0 0 32px 0;
  font-size: 28px;
}

/* ===============================
   Steps & Progress Bar
=================================*/
.restaler-steps {
  list-style: none;
  display: flex;
  justify-content: space-around;
  gap: 16px;
  background: #fff;
  margin: 0 0 2px 0;
  padding: 12px 32px;
}

.restaler-progress-bar-wraper {
  height: 2px;
  background: #D1D1FF;
  max-width: 100%;
}

.restaler-progress-bar {
  height: 2px;
  background: #6366F1;
  max-width: 100%;
}

/* ===============================
   Step Content
=================================*/
.restaler-step-content {
  background: #fff;
  padding: 40px;
  margin: 0 0 24px 0;
}

.restaler-step-content p {
  font-size: 15px;
}

.restaler-step-content h2 {
  margin: 0 0 24px 0;
}

.restaler-step-content .header,
.restaler-step-content .footer {
  text-align: center;
}

.restaler-step-content.license-activation {
  text-align: center;
}

.restaler-step-content .section {
  margin: 40px 0;
}

.restaler-step-content .settings {
  text-align: left;
}

.restaler-step-content a {
  color: #6366F1;
  text-decoration: none;
  border-bottom: 1px solid;
}

.restaler-step-content form {
  position: relative;
}

/* ===============================
   Tables
=================================*/
.restaler-step-content table {
  text-align: center;
  margin: 0 auto;
  position: relative;
}

.restaler-step-content table td {
  display: flex;
  justify-content: center;
}

.restaler-step-content table .btn,
.restaler-step-content table .btn:hover {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  background: #10B981;
}

/* ===============================
   Inputs & Form Elements
=================================*/
.restaler-step-content table input {
  border: 1px solid #E2E8F0;
  width: 320px;
  min-height: 40px;
  padding: 0 12px;
}

.restaler-step-content table input[type="text"]:focus,
.restaler-step-content table input[type="password"]:focus {
  border-color: #D1D1FF;
  box-shadow: 0 0 0 1px #D1D1FF;
  outline: 2px solid transparent;
}

.restaler-step-content input[type="number"] {
  width: 120px;
}

.restaler-step-content select {
  min-width: 180px;
}

.restaler-step-content textarea {
  padding: 12px;
  min-height: 160px;
}

/* ===============================
   Actions
=================================*/
.restaler-step-actions {
  text-align: right;
}