:root {
  --primary-color: #191919;
  --white: #FFFFFF;
  --sidebar-primary: #353E47;
  --sidebar-primary-hover: #353E47;
  --sidebar-background: #070E13;
  --background: #F1F3FF;
  --text-link: #FFFFFF;
  --headline: #CBD1D8;
  --expand-button: #353E47;
  --logout: #C70000;
}

body {
  background-color: #1A1A1A;
  font-family: 'Nunito', sans-serif;
}

.card {
  border: 0px;
  border-radius: 30px;
}

.card-login {
  background: url(https://omithion.com/images/header_banner.jpg) center bottom / 100%;
  border-radius: 20px 20px 0 0 !important;
}

.card-index {
  margin-top: 30%;
}

.card-img,
.card-img-top {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  background-color: #2C2F33;
  object-fit: cover;
}

.card-body {
  background-color: #2C2F33;
  color: #FFF;
  padding: var(--bs-card-spacer-y) 1.5rem;
}

.logo {
  width: 50%;
  height: auto;
  display: block;
  margin: 10px auto;
}

.logo-nav {
  width: 100%;
}

.form-login {
  width: 60%;
  margin: 0 20%;
}

.form-login label {
  margin: 16px 0 0 0;
  font-weight: 550;
}

.btn-login {
  width: 50%;
  margin: 40px 25% 20px;
  background: #FFC400;
  color: #000;
  border: 0px;
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 550;
  transition: all 1000ms ease;
}

.btn-login:hover {
  background: #005A00;
  color: #FFF;
  transition: all 500ms ease;
}

i {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

i .fas {
  font-size: 24px;
}

.username {
  margin: 24px 0;
  width: 100%;
  text-align: center;
  font-weight: 550;
}

.nav {
  flex-grow: 1;
}

.nav .btn {
  margin-bottom: 10px;
}

.logout-wrapper {
  margin-top: auto;
}

.content {
  padding: 20px;
  color: #FFF;
}

.page-title {
  text-align: center;
  padding: 20px 0;
  margin: 0;
  color: #FFF;
  font-weight: 550;
}

.btn-panel {
  width: 100%;
  margin: 20px 0;
  background: #FFC400;
  color: #000;
  border: 0px;
  border-radius: 10px;
  padding: 10px;
  font-weight: 800;
  transition: all 1000ms ease;
}

.btn-panel:hover {
  background: #005A00;
  color: #FFF;
  transition: all 500ms ease;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 0px !important;
}

.btn-danger {
  background-color: #C70000;
  font-weight: 550;
  border: 0px;
  transition: all 1000ms ease;
}

.btn-danger:hover {
  background-color: #770000;
  transition: all 500ms ease;
}

.form-new {
  width: 40%;
  margin: 0 30%;
}

.form-new label {
  margin: 16px 0 0 0;
  font-weight: 550;
}

.btn-edit {
  width: fit-content;
  margin: 0 1%;
  background: #FFC400;
  color: #000;
  border: 0px;
  border-radius: 10px;
  transition: all 1000ms ease;
}

.btn-edit:hover {
  background: #005A00;
  color: #FFF;
  transition: all 500ms ease;
}

.table .table .btn-edit {
  background: #005A00;
  color: #FFF;
}

.table .table .btn-edit:hover {
  background: #FFC400;
  color: #000;
}

.img-panel {
  width: 45%;
  border-radius: 10px;
}

.btn-remove {
  width: fit-content;
  margin: 0 1%;
  background-color: #C70000;
  font-weight: 550;
  border: 0px;
  border-radius: 10px;
  color: #FFF;
  transition: all 1000ms ease;
}

.btn-remove:hover {
  background-color: #770000;
  transition: all 500ms ease;
}

.btn-see {
  width: fit-content;
  margin: 0 1%;
  background: #005A00;
  color: #FFF;
  border: 0px;
  border-radius: 10px;
  font-weight: 550;
  transition: all 1000ms ease;
}

.btn-see:hover {
  background: #FFC400;
  color: #000;
  transition: all 500ms ease;
}

.form-edit {
  width: 60%;
  margin: 0 20%;
}

.form-edit label {
  color: #000;
  margin: 16px 0 0 0;
  font-weight: 550;
}

.form-edit h3 {
  color: #000;
  text-align: center;
  font-weight: 800;
}

.btn-save {
  width: 80%;
  margin: 20px 10%;
  background: #FFC400;
  color: #000;
  border: 0px;
  border-radius: 10px;
  padding: 8px;
  font-weight: 800;
  transition: all 1000ms ease;
}

.btn-save:hover {
  background: #005A00;
  color: #FFF;
  transition: all 500ms ease;
}

.btn-cancel {
  width: 80%;
  margin: 0 10%;
  background-color: #C70000;
  border: 0px;
  border-radius: 10px;
  padding: 8px;
  font-weight: 800;
  color: #FFF;
  transition: all 1000ms ease;
}

.btn-cancel:hover {
  background-color: #770000;
  transition: all 500ms ease;
}

.btn-new {
  width: 40%;
  margin: 0 30% 50px;
  background: #FFC400;
  color: #000;
  border: 0px;
  border-radius: 10px;
  padding: 8px;
  font-weight: 800;
  transition: all 1000ms ease;
}

.btn-new:hover {
  background: #005A00;
  color: #FFF;
  transition: all 500ms ease;
}

.table .btn-new {
  width: fit-content;
  min-width: 100px;
  margin: 0;
  margin-right: 16px;
}

.table {
  margin-bottom: 0;
}

.table thead th {
  padding: 8px 0;
  vertical-align: middle;
  text-align: center;
  color: #FFC400;
}

.table .table thead th {
  color: #FFF;
}

.table tbody td {
  vertical-align: middle;
  text-align: center;
  padding: 18px 0;
}

.table tbody .td-space-10 {
  width: 10% !important;
}

.table tbody .td-space-35 {
  width: 35% !important;
}

.table tbody .td-actions-1 {
  width: 5% !important;
}

.table tbody .td-actions-2 {
  width: 10% !important;
}

.table tbody .td-actions-3 {
  width: 15% !important;
}

.table-users tbody td {
  width: 20%;
}

.table-users tbody .td-user {
  width: 35% !important;
}

.td-user img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.table-users .table tbody td {
  width: 25%;
}

.table-panels tbody td {
  width: 42.5%;
}

.table-subpanels tbody td {
  width: 35%;
}

.table-tags tbody td {
  width: 20%;
  padding: 5px 0;
}

.table-suverys tbody td {
  width: 15%;
}

.table-suverys tbody .td-stat {
  width: 27.5% !important;
}

.table-suverys .table tbody td {
  width: 20%;
}

.table-suverys tbody .td-text {
  width: 65% !important;
  padding: 16px 2.5% !important;
}

.table-podcast tbody td {
  width: 85%;
}

.table-podcast .table tbody td {
  width: 15%;
}

.table-podcast .table tbody .td-link {
  width: 60% !important;
  padding: 16px 2.5% !important;
}

.table-projects tbody .td-name {
  width: 35%;
}

.table-projects tbody .td-description {
  width: 45%;
}

.list-user {
  margin: auto;
  text-align: start;
}

.hiddenRow {
  padding: 0 !important;
}

.table .form-link {
  color: #FFC400;
  text-decoration: none;
  padding-top: 10px;
}

.table .table .form-link {
  color: #FFF;
}

.form-control.user-panel {
  width: 250px;
  height: 250px;
  object-fit: cover;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

.text-white {
  text-align: center;
}

.copyright {
  margin: 20px 0 0 0;
  text-align: center;
}

section {
  position: absolute;
  width: 100%;
  padding-left: 330px;
}

body.collapsed section {
  padding-left: 110px;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 860px;
  left: 10px;
  top: 10px;
  bottom: 10px;
  padding: 16px 0px;
  border-radius: 16px;
  width: 300px;
  display: flex;
  color: var(--white);
  flex-direction: column;
  background-color: #23272b;
  transition: max-width 0.1s ease-in-out;
}

body.collapsed .sidebar {
  max-width: 80px;
  display: flex;
  align-items: center;
}

body.collapsed .hide {
  position: absolute;
  display: none !important;
}

/*? search wrapper */
.search__wrapper {
  padding: 0 16px;
  position: relative;
}

.search__wrapper input {
  background-color: var(--background);
  height: 40px;
  width: 100%;
  border-radius: 8px;
  padding: 0 8px;
  padding-left: 32px;
  flex-grow: 1;
  outline: none;
  border: none;
}

.search__wrapper svg {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 26px;
  transform: translateY(-50%);
  pointer-events: none;
  right: 24px;
}

body.collapsed .search__wrapper svg {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  stroke: var(--sidebar-primary-hover);
}

.search__wrapper input::-webkit-input-placeholder {
  color: var(--sidebar-primary-hover);
  white-space: nowrap;
}

body.collapsed .search__wrapper input {
  max-width: 40px;
}

body.collapsed .search__wrapper input::-webkit-input-placeholder {
  color: transparent;
}

/*? sidebar top */

.sidebar-top-wrapper {
  display: flex;
  background-color: var(--primary-color-light);
}

.sidebar-top {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  height: 64px;
  padding-bottom: 16px;
}

body.collapsed .sidebar-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo__wrapper {
  margin-top: -4px;
  display: flex;
  align-items: center;
  color: var(--text-link);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.35rem;
  gap: 8px;
  padding: 0 16px;
}

.logo-small {
  height: 48px;
  width: 48px;
  margin-right: 10px;
  overflow: hidden;
  object-fit: cover;
}

/*? menu links */
.sidebar-links {
  margin-top: 16px;
  width: 100%;
}

.sidebar-links h2 {
  margin-left: 16px;
  color: var(--headline);
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 8px;
  animation: fadeIn 0.2s ease-in-out;
}

body.collapsed .sidebar-links h2 {
  display: none;
}

.sidebar-links ul {
  list-style-type: none;
  position: relative;
  display: flex;
  column-gap: 8px;
  flex-direction: column;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.sidebar-links li {
  color: var(--text-link);
}

.sidebar-links li div {
  margin-bottom: 10px;
  display: none;
}

body.collapsed .sidebar-links li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-links li svg {
  stroke: var(--text-link);
  width: 28px;
  height: 28px;
  min-width: 28px;
}

.sidebar-links li div svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.sidebar-links li a:hover {
  background-color: var(--sidebar-primary-hover);
}

.sidebar-links li a {
  color: var(--text-link);
  flex-grow: 1;
  padding: 0 16px;
  font-size: 1.25rem;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 56px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

.sidebar-links li div a {
  padding: 0 56px;
  font-size: 1rem;
  gap: 10px;
  height: 36px;
}

.sidebar-links li a .link {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  animation: fadeIn 0.2s ease-in-out;
  color: #FFF;
}

.sidebar-links li a img {
  height: 34px;
  width: 34px;
}

.sidebar-links .active:hover {
  background-color: var(--sidebar-primary-hover);
}

.sidebar-links .active {
  text-decoration: none;
  background-color: var(--sidebar-primary-hover);
  color: var(--text-link);
}

.sidebar-links .active i {
  stroke: var(--text-link);
}


/* ?menutip */
.menutip {
  position: relative;
}

.menutip .menutip__content::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0%;
  margin-left: -10px;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #23272b transparent transparent;
}

.menutip .menutip__content {
  visibility: hidden;
  background-color: #23272b;
  color: var(--white);
  text-align: center;
  border-radius: 6px;
  padding: 6px 12px;
  position: absolute;
  z-index: 1;
  left: 90px;
}

.collapsed .menutip:hover .menutip__content {
  visibility: visible;
}

/*? profile part */
.sidebar__profile {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-direction: row;
  padding: 0 16px;
  color: var(--text-link);
  overflow-x: hidden;
  min-height: 42px;
}

.avatar__wrapper {
  position: relative;
  display: flex;
}

.avatar {
  display: block;
  width: 45px;
  height: 45px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 50%;
}

.avatar__name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
  animation: fadeIn 0.2s ease-in-out;
}

.user-name {
  font-weight: 700 !important;
  font-size: large;
  text-align: left;
  color: var(--text-link);
  animation: fadeIn 0.2s ease-in-out;
}

.email {
  color: var(--text-link);
  font-size: 13px;
  animation: fadeIn 0.2s ease-in-out;
}

.logout {
  animation: fadeIn 0.2s ease-in-out;
  margin-left: auto;
}

.logout svg {
  color: var(--logout);
}

body.collapsed .logout {
  display: none;
}

/*? Expand button */

.expand-btn {
  position: absolute;
  display: grid;
  place-items: center;
  cursor: pointer;
  background-color: var(--expand-button);
  z-index: 2;
  right: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0px;
}

.expand-btn svg {
  transform: rotate(-180deg);
  stroke: var(--white);
  width: 20px;
  height: 20px;
}

body.collapsed .expand-btn svg {
  transform: rotate(-360deg);
}

.bottom-links {
  margin-top: auto;
}

@keyframes fadeIn {
  from {
    width: 0px;
    opacity: 0;
  }

  to {
    opacity: 1;
    width: 100%;
  }
}

.rounded-pill {
  margin: 0 10px 0 0;
  background-color: #005A00;
}

.verified-yes-pill {
  background-color: #04210f;
  color: #72c894;
  padding: 8px 11px;
}

.verified-no-pill {
  background-color: #2e2005;
  color: #efc776;
  padding: 8px 11px;
}

.btn-index {
  width: 50%;
}

.card,
.list-group-item {
  background-color: #23272b;
  color: white;
  border: 0;
}

button.profile {
  width: 50px;
  height: 50px;
  align-content: center;
  align-items: center;
  align-self: center;
  text-align: center;
  margin: 0;
  border: 0 !important;
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #FFC400;
  color: #1A1A1A;
  transition: all 1000ms ease;
}

button.profile:hover {
  background-color: #005A00;
  color: #FFF;
  transition: all 500ms ease;
}

.content.profile {
  padding: 0 20px;
}

.card.profile {
  padding: 0 !important;
  border-radius: 20px;
}

img.profile {
  width: 250px;
  height: 250px;
  object-fit: cover;
}

.badge-role {
  padding: var(--bs-badge-padding-y) 16px;
}

img.profile-panel {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 8px;
}

h3.profile-panel {
  font-size: 1.2rem;
  text-align: center;
}

h2.profile-panel {
  margin-bottom: 32px;
  margin-left: 50px;
}

.profile-banner {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: url(https://omithion.com/images/header_banner.jpg) center bottom / 100%;
}

.position-absolute.profile-banner {
  top: 100% !important;
  left: 200px !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1;
  background: none !important;
}

span.profile-banner {
  height: 250px;
  object-fit: cover;
  display: block;
}

.d-flex.profile {
  margin-left: 350px !important;
  margin-top: 25px;
  min-height: 150px;
}

.profile-edited {
  top: 250px;
  right: 25px;
  position: absolute;
  text-align: right;
}

.btn-profile,
.btn-settings {
  width: fit-content;
  margin-top: 25px;
  margin-bottom: 10px;
  background: #FFC400;
  color: #000;
  border: 0px;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 800;
  transition: all 1000ms ease;
}

.btn-settings {
  margin-top: 10px;
  margin-bottom: 0;
}

.btn-profile:hover,
.btn-settings:hover {
  background: #005A00;
  color: #FFF;
  transition: all 500ms ease;
}

.btn-profile.cancel {
  margin-top: 0;
  background: #C70000;
  color: #FFF;
}

.btn-profile.cancel:hover {
  background: #770000;
}

.card.settings {
  border-radius: 20px;
}

.btn-settings.secondary {
  background: #005A00;
  color: #FFF;
}

.btn-settings.secondary:hover {
  background: #FFC400;
  color: #000;
}

ul.settings li svg {
  color: #005A00;
  background-color: white;
  outline: 1px solid #005A00;
  border-radius: 100%;
}

.settings form a {
  cursor: pointer;
  color: #1A1A1A;
  top: 75% !important;
  margin-right: 26% !important;
}

.settings form input {
  padding-right: 2.05rem !important;
}

.settings-switch {
  width: 3rem !important;
  height: 1.6rem;
  margin-right: 10px;
  cursor: pointer;
}

/* Botón interno (punto) del switch */
.settings-switch:checked {
  background-color: #FFC400;
  border-color: #FFC400;
}

.settings-switch:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}