:root {
  --color-black: #424242;
  --color-light-gray: #f7f7f8;
  --color-dark-gray: #9ba6b2;
  --color-gray: #dce0e6;
  --color-theme: #2b97bf;
  --color-ultra-light-theme: #f0f3f7;
  --color-success: #9ece69;
  --color-danger: #dc3545;
  --inputtext-color: #334155;
  --input-border-color: #cbd5e1;
}

html {
  font-size: 12.5px;
}

body {
  font-family: "Open Sans", sans-serif;
  color: var(--color-black);
  background: #fff;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

::selection {
  background: var(--color-theme);
  color: #fff;
}

::-moz-selection {
  background: var(--color-theme);
  color: #fff;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nobr {
  white-space: nowrap;
}

.modal-top-layer {
  background: #00000034;
  padding-top: 50px;
}

.left-sidebar .list-group-item.has-tab-error {
  background: #e7caca;
}

.left-sidebar .list-group-item.has-tab-error i {
  background: #e19d9d;
  color: #fff;
}

.left-sidebar .list-group-item.has-tab-error.active {
  color: #495057;
}

.yii-debug-toolbar_position_bottom {
  opacity: 0.1;
}

.yii-debug-toolbar_position_bottom:hover {
  opacity: 1;
}

.yii-debug-toolbar_active {
  opacity: 1;
}

@media (min-width: 982px) {
  .modal-top-layer .modal-lg {
    width: 990px !important;
  }
}

.badge-join {
  display: flex;
}

.badge-join a:first-of-type .badge {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.badge-join a:last-of-type .badge {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-config-gridview a {
  color: var(--color-dark-gray);
}

.btn-config-gridview a:hover {
  color: var(--color-theme);
}

.table_section_info {
  padding-bottom: 0 !important;
}

.table_section_info > div:last-child {
  border: 0 !important;
}

.disabled_div {
  pointer-events: none;
  opacity: 0.6;
}

.is_theme {
  color: #9ece69;
}

.selectedrow {
  background-color: var(--color-theme) !important;
  color: white;
}

.table_select_row:hover {
  background-color: var(--color-theme) !important;
  color: white;
  cursor: pointer;
}

.block_data {
  background: #f7f7f7;
  border-radius: 7px;
  padding: 10px;
  border: 1px solid #ced4da;
  margin-top: 5px;
}

.disabled-wrapper > button {
  pointer-events: none;
}

.disabled-wrapper {
  cursor: not-allowed;
}

.form-control {
  border: 1px solid var(--input-border-color) !important;
  color: var(--inputtext-color) !important;
}

.input-group-text {
  background-color: #f9fafb;
  border-color: var(--input-border-color) !important;
}

body {
  background-color: #f7f7f8 !important;
}

.root main {
  margin-left: 70px;
  width: calc(100% - 70px);

  position: relative;
  padding: 0 2rem 1.5rem;
  background: 0 0;
  min-height: 100vh;
  transition: margin-left 0.2s;
}

#vue-topbar {
  background-color: #ffffff !important;
  position: sticky;
  top: 0;
  padding: 1rem 1.5rem;
  z-index: 1000;

  outline: 1px solid oklch(96.7% 0.003 264.542);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.content {
  background-color: #ffffff !important;
  padding: 2rem;
  margin-top: 2rem;
  border-radius: 1rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 990;
  padding: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  background-color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.user-avatar {
  object-fit: cover;
}
.user-avatar-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.user-avatar-initials:hover {
  transform: scale(1.2);
  transition: transform 0.6s ease-in-out;
}
.user-name {
  font-weight: 600;
  font-size: 1rem;
}

@media (max-width: 576px) {
  .user-name {
    display: none;
  }
}