/*
 * Elements - buttons, inputs...
*/

/** Form **/
.form-control,
.form-select {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border-color);
  font-size: .9rem;
  font-weight: 500;
  padding: .4rem .8rem;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
  display: block;
  border-radius: .375rem;
  background: var(--radial-gradient);
  color: var(--primary-color);
  box-shadow: var(--box-shadow-light);
}

.form-control::placeholder {
  opacity: 0.4;
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: var(--box-shadow);
  background: var(--radial-gradient);
  color: var(--primary-color);
}


.content-box {
  background: var(--background-color);
  border: 1px solid var(--border-color-dark);
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  backdrop-filter: blur(14px) saturate(140%);
  padding: 1.25rem 1rem 1rem;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.content-box .content-box-pre-title {
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .75rem;
  color: var(--primary-color);
}

.content-box .content-box-title {
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.content-box .content-box-text {
  line-height: 1.5;
  color: var(--primary-color-light);
  max-width: 70ch;
  margin-bottom: 1rem;
}

/** Select2 **/
.select2-container {
  width: 100% !important;
}

.select2-container .select2-selection {
  min-height: 38px !important;
}

.select2-selection--single .select2-selection__placeholder {
  line-height: 38px !important;
  color: var(--primary-color) !important;
}

.select2-container--default .select2-selection,
.renet-content-main .select2-container--default .select2-selection,
.renet-content-main .form-control {
  background: var(--radial-gradient);
  border-color: var(--border-color);
  color: var(--primary-color);
  box-shadow: var(--box-shadow);
}

.select2-container--default .select2-selection {
  line-height: 28px !important;
  font-size: 1rem;
  padding-left: .25rem;
  padding-right: .25rem;
  border-radius: .375rem !important;
}

.select2-container--default .select2-selection .select2-selection__rendered {
  line-height: 38px !important;
  font-size: 1rem;
  color: var(--primary-color) !important;
}

.select2-container--default .select2-selection.select2-selection--multiple .select2-selection__rendered {
  line-height: 23px !important;
}

.select2-container .select2-search--inline .select2-search__field {
  height: 23px;
  color: var(--primary-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bg-dark);
}

.select2-container--open .select2-dropdown--below {
  background: var(--radial-gradient)
}

.select2-dropdown {
  background-color: var(--bg-primary-dark);
  color: var(--primary-color);
}

/** Modals **/
.modal-content {
  background: var(--radial-gradient);
  border-color: rgba(255, 255, 255, .12);
  color: var(--primary-color);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .6);
  backdrop-filter: blur(14px);
}

.modal-header {
  border-bottom-color: rgba(255, 255, 255, .12);
}

.modal-footer {
  border-top-color: rgba(255, 255, 255, .12);
}


.action-btn {
  background: var(--bg-contrast);
  border: 1px solid var(--border-color);
  border-radius: .5rem;
  padding: .7rem .8rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: all .12s ease;
  cursor: pointer;
  position: relative;
  margin: 8px auto;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--box-shadow-light);
}

.action-btn-title {
  /*font-size: .8rem;*/
  font-weight: 500;
  color: var(--primary-color);
  line-height: 1.2;
}

.action-btn-text {
  font-size: .8rem;
  color: var(--primary-color-light);
  line-height: 1.2;
  margin-top: .2rem;
}


.re-condense-row:hover {
  background: var(--bg-primary-light);
}

/** Stat **/
.stat-row {
  margin-bottom: 1rem;
}

.stat-pill {
  background: var(--bg-primary-light);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  min-width: 220px;
  box-shadow: var(--box-shadow);
}

.stat-label {
  font-size: .7rem;
  color: var(--primary-color-light);
  margin-bottom: .4rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.stat-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.2;
}

.stat-note {
  font-size: .7rem;
  color: var(--success);
}


/** Progress bar **/
.accent-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--primary-color-light);
  margin-bottom: .4rem;
}

.accent-progress-value {
  font-weight: 600;
  background: rgba(234,179,8,0.15);
  color: var(--accent);
  padding: .2rem .5rem;
  border-radius: .5rem;
  font-size: .75rem;
}

.accent-progress-bar {
  background: rgba(255, 255, 255, 0.07);
  border-radius: .5rem;
  height: .5rem !important;
  width: 100%;
  overflow: hidden;
}

.accent-progress-bar-fill {
  background: linear-gradient(90deg, var(--accent) 0%, #fff 100%);
  height: 100%;
}

.theme-settings {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.theme-settings .theme {
  padding: .3rem .8rem;
  opacity: .3;
}

.theme-settings .theme.active {
  color: var(--primary-color);
  opacity: 1;
}

.theme-settings .theme:hover {
  cursor: pointer;
}

.theme-settings .theme.active:hover {
  cursor: default;
}

.dropdown-menu {
  background-color: var(--bg-primary-dark);
}

.dropdown-item {
  color: var(--primary-color)
}

#avatar-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--accent);
}

.popover {
  background-color: var(--bg-primary-light);
  border: 1px solid var(--border-color);
}

.popover-header {
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary-dark);
}


.nav-link 
{
  color: var(--primary-color);
} 

.nav-link:focus, .nav-link:hover 
{
  color: var(--accent);
}