/* @import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
  padding: 0;
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
}

:root {
  --white_bg: #ffffff;
  --border_radius: 7px;
  --border-top: 1px solid rgba(0, 0, 0, .05);
  --border-bottom: 1px solid rgba(0, 0, 0, .05);
  --border-left: 1px solid rgba(0, 0, 0, .05);
  --border-right: 1px solid rgba(0, 0, 0, .05);
  --border: 1px solid rgba(0, 0, 0, .05);
  --light_bg: #F9F9F9;
  --black_bg: #111111;
  --inactive_link: #999;
  --bg_success: #EEFCF3;
  --bg_danger: #FFEEEB;
  --bg_warning: #FFF5EB;
  --body_bg: #f7f8ff;
  --brand_color: #0047cc;
  /* #FED828 */
}

.appBody {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 20px;
    background-color: #FAFAFA;
}

form .password-group {
  position: relative;
}

form .password-group .pass-view {
  position: absolute;
  right: 10px;
  top: 43px;
}

.appBody .item-box form label {
  font-size: .8em;
  margin-bottom: 10px;
}

.appBody .item-box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.appBody .tab-box .innerContent table thead {
  position: sticky;
  top: -10px;
  background: #fff;
  z-index: 999;
}

.appBody .tab-box .innerContent table thead th {
  border-bottom: none;
  border-top: none;
  padding: 1rem .7rem;
  vertical-align: middle;
  font-size: .9em;
}

.appBody .tab-box .innerContent table td {
  color: #333;
  font-size: .85em;
  vertical-align: middle;
  padding: .75rem .5rem;
}

.appBody .item-box form button {
  height: calc(2.5em + .75rem + 2px);
  color: var(--white_bg);
  background-color: var(--brand_color);
  border-radius: 10px;
}

.appBody .item-box .route span {
  color: var(--inactive_link);
  font-size: .9em;
}

.appBody .item-box .route a, .appBody .item-box .form-group a {
  color: var(--brand_color);
  text-decoration: none;
  font-size: .9em;
}

.appBody .item-box .wrapper {
  box-shadow: 0 0 10px 5px rgba(0,0,0,.05);
  border-radius: .9em;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  border: var(--border);
}

.appBody .item-box .wrapper h1{
  font-weight: 800;
  font-size: 2em;
  text-align: center;
  margin-bottom: 0;
}

.appBody .item-box .wrapper p{
  font-weight: 500;
  font-size: .9em;
  text-align: center;
  margin-bottom: 0;
}

.appBody .item-box .wrapper h2 {
  font-weight: 700;
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 30px;
}

.appBody .item-box form label {
  font-size: .8em;
  margin-left: 10px;
}


.appBody .navbar {
  /* height: 80px; */
  border-bottom: 1px solid rgba(0, 0, 0, .096);
  display: flex;
  align-items: center;
}

.appBody .navbar .title {
    font-weight: 800;
    font-size: 1em;
}

.appBody .navbar li a {
    font-weight: 500;
    font-size: .8em;
    text-decoration: none;
    border-bottom: 1px solid var(--brand_color);
    color: var(--brand_color);
}

.appBody .content {
  background-color: #FAFAFA;
  width: 100%;
  /* height: 90vh; */
  padding: 20px 0;
  /* max-height: 90vh; */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c2c1c1 #f1f1f1;
  gap: 20px;
}

.appBody .tab-box .nav.nav-mobile-role {
 display: flex;
  gap: 20px;
  padding: 5px;
  background: #dde1f9;
  border-radius: 30px;
}

.appBody .tab-box .nav.nav-mobile-role .nav-item .nav-link {
  text-decoration: none;
  color: var(--black_bg);
  font-size: .9em;
  font-weight: 400;
}

.appBody .tab-box .nav.nav-mobile-role .nav-item .nav-link.active {
  background-color: var(--brand_color);
  color: var(--white_bg);
  border-radius: 30px;
}


.appBody .tab-box .innerContent {
  height: 80vh;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c2c1c1 #f1f1f1;
  background-color: var(--white_bg);
  border-radius: .8em;
  padding: 30px;
  gap: 30px;
  border: var(--border);
    box-shadow: 0 0 10px 5px rgba(0,0,0,.05);
}

.appBody .tab-box .innerContent .d-flex.top-action h2 {
  font-weight: 700;
  font-size: 1.3em;
  margin-bottom: 0;
}