@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
  /* neutrals */
  --gray-0:  #ffffff;
  /*--gray-50: #f9fafb;*/
  --gray-100:#FFFFFFCC;
  /*--gray-200:;*/
  --gray-300:#FFFFFFB2;
  --gray-400:#FFFFFF66;
  --gray-500:#FFFFFF4D;
  --gray-600:#FFFFFF33;
  --gray-700:#FFFFFF0D;
  --gray-800:#FFFFFF1A;
  --gray-900:#121214;

  /* brand */
  /*--primary-50:  #eff6ff;
  --primary-100: #dbeafe;*/
  --primary-200: #FFFFFF33;
  --primary-300: #343865;
  --primary-400: #98a1ff;
  /*--primary-500: #3b82f6;*/
  --primary-600: #717DFC;
  --primary-700: #1A1F52;
  --primary-800: #01063F;
  --primary-900: #01063F;

  --color2:      #45F7D9;
  --color3:      #EB70FE;
  --color4:      #4499FB;

  /*--accent:      #f59e0b;*/
  --success:     #91FE5E;
  --success-100: #A8F43E1A;
  --success-200: #A8F43E1F;
  /*--danger:      #FF9191;*/
  --danger:      #FD6464;
  --danger-100:  #FD64641A;
  --danger-200:  #FD64641F;
  --danger-300:  #F37E73;
  --warning:     #FAAD56;
  --warning-200: #FAAD564D;

  

}

:root {
  --body-color:        var(--gray-0);

  --color-bg:           var(--gray-900);
  --color-bg-800:       var(--gray-800);
  --color-bg-700:       var(--gray-700);
  --color-bg-200:       var(--gray-200);

  --color-bg-alt-200:   var(--primary-200);
  --color-bg-alt-600:   var(--primary-600);
  --color-bg-alt:       var(--primary-900);
  --color-text:         var(--gray-0);
  /*--color-text-muted:   var(--gray-600);
  --color-border:       var(--gray-200);*/

  --color-primary:      var(--primary-600);
  /*--color-primary-hover:var(--primary-700);*/
  --color-danger:        var(--danger);
  --color-success:       var(--success);
  --color-warning:       var(--warning);
  --color-warning-light: var(--warning-200);

  --radius: 16px;
  --title-line-color: var(--gray-600);
}

.fs-10 {font-size:10px}
.fs-11 {font-size:11px}
.fs-12 {font-size:12px}
.fs-13 {font-size:13px}
.fs-14 {font-size:14px}
.fs-16 {font-size:16px}
.fs-18 {font-size:18px}
.fs-20 {font-size:20px}
.fs-22 {font-size:22px}
.fs-24 {font-size:24px}
.fs-26 {font-size:26px}
.fs-28 {font-size:28px}
.fs-30 {font-size:30px}
.fs-32 {font-size:32px}
.fs-36 {font-size:36px}


.text-gray-100 {color: var(--gray-100)}
.text-gray-200 {color: var(--gray-200)}
.text-gray-300 {color: var(--gray-300)}
.text-gray-400 {color: var(--gray-400)}
.text-gray-500 {color: var(--gray-500)}
.text-gray-600 {color: var(--gray-600)}
.text-gray-700 {color: var(--gray-700)}
.text-gray-800 {color: var(--gray-800)}
.text-gray-900 {color: var(--gray-900)}
/*.text-gray-800 {color: #FFFFFF1A}*/

.text-primary {color: var(--color-primary) !important}

.text-success {color: var(--color-success) !important}
.text-danger {color: var(--color-danger) !important}
.text-warning {color: var(--color-warning) !important}

.text-color2 {color: var(--color2) !important}
.text-color3 {color: var(--color3) !important}
.text-color4 {color: var(--color4) !important}

.bg-gray-100 { background-color: var(--gray-100) !important}
.bg-gray-200 { background-color: var(--gray-200) !important}
.bg-gray-300 { background-color: var(--gray-300) !important}
.bg-gray-400 { background-color: var(--gray-400) !important}
.bg-gray-500 { background-color: var(--gray-500) !important}
.bg-gray-600 { background-color: var(--gray-600) !important}
.bg-gray-700 { background-color: var(--gray-700) !important}
.bg-gray-800 { background-color: var(--gray-800) !important}

.bg-primary { background-color: var(--primary-600) !important}

.bg-warning { background-color: var(--color-warning)}
.bg-success { background-color: var(--color-success)}
.bg-success-200 { background-color: var(--success-200) }
.bg-danger { background-color: var(--color-danger)}
.bg-danger-200 { background-color: var(--danger-200) }

.border-gray-800 { border-color: var(--gray-800) !important}
.border-success { border-color: var(--color-success) !important}
.border-danger { border-color: var(--color-danger) !important}
.border-warning { border-color: var(--color-warning) !important}

.text-justify { text-align: justify !important; }



@media (max-width: 768px) {
  .modal,
  .modal-dialog {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* new */
    max-width: 500px;
    margin: 0 auto;
  }

  .modal-content {
    height: 100%;
    border-radius: 0;
  }

  .modal-body {
    overflow-y: auto;
  }
}
.modal-title-absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /*pointer-events: none; optional: prevents interfering with close button */
}
/* RESET BOOSTRAP STUFF */
.modal-content {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius);
}
.modal-footer {
  border-top: none;
  margin-top: 1rem;
}
.modal-dialog {
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Nunito", sans-serif;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.bg-body {
  background-color: var(--color-bg) !important;
}
.bg-light {
  background-color: var(--primary-400) !important;
}

header {
  background-color: var(--primary-700);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  color: var(--gray-0);
}

.contained {
  padding: 1em 16px;
}
.section-title {
  margin:30px 0 14px 0;
}
.section-title h2 {
  margin:0;
}
.card {
  background-color: var(--color-bg-800);
  border-radius: var(--radius);
  color: var(--color-text);
}
.cards-stack > .card + .card, .cards-stack a + a .card {
  margin-top: 0.5rem;      /* space between cards */
}
.card.mt {
  margin-top: 1rem;
}

.card.bg-success {
  background-color: var(--success-200) !important;
}
a .card:hover, a .card:active {
  background-color: var(--primary-700) !important;
}
a .card.bg-success:hover {
  background-color: var(--success-100) !important;
}

.card.bg-danger {
  background-color: var(--danger-200) !important;
}
a .card.bg-danger:hover {
  background-color: var(--danger-100) !important;
}

.card.warning {
  border-color: var(--warning) !important;
  background-color: var(--warning-200) !important;
}

.card-card {
  background-color: var(--color-bg-700);
  border-radius: var(--radius);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--primary-400);
}

h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
h2 {
  font-size:18px;
  font-weight: 700;
}

.text-muted {
  color: var(--gray-100) !important;;
}
.content {
  color: var(--gray-100);
}
.content strong {
  color: var(--color-text);
}
.content p {
  margin: 0.5rem 0;
}

.form-control {
 padding:16px;
}

.btn {
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text);
}
.btn-primary:hover {
  background-color: var(--primary-700);
}
.btn-secondary {
  background-color: var(--gray-800);
  color: var(--color-text);
}
.btn-secondary:hover {
  background-color: var(--gray-700);
}
.btn-white {
  background-color: white;
}
.btn-white:hover {
  background-color: var(--gray-100);
  color:#01063F;
}

/*.progress {
  height: 8px;
  --bs-progress-height: 8px;
  --bs-progress-bg: ;
  --bs-progress-bar-color: );
  --bs-progress-bar-bg: var(--primary-600);
}*/
.progress {
  height: 8px;               /* slimmer bar (default = 1rem)   */
  background: var(--gray-500);          /* soft gray track                */
  border-radius: 4px;        /* pill shape                     */
  overflow: hidden;             /* keeps inner bar rounded        */
}
/* inner bar ------------------------------------------------ */
.progress-bar {
  background: var(--primary-600); /* blue→indigo */
  color: #fff;
  line-height: 8px;             /* match .progress height         */
  transition: width .35s ease;  /* smooth change on JS update     */
}
.progress.progress-sm {
  height:4px;
}
.progress-bar.progress-bar-sm {
  line-height: 4px;
}
.progress-warning .progress-bar {
  background: var(--color-warning) !important;
}

.lined-title {
  position: relative;               /* anchor for the pseudo‐element   */
  display: flex;                    /* keep text and line on one row   */
  align-items: center;              /* vertical centring               */
}
.lined-title::after {
  content: "";
  flex-grow: 1;                     /* ← expands to fill the container */
  height: 1px;
  background: var(--title-line-color);
  margin-inline-start: 1rem;        /* gap between text and line       */
}

.circled-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
  line-height: 1;
  color: white;
  border-radius: 50%;
  background-color: var(--color-bg-alt-200);
  text-decoration: none;
  cursor: pointer;

  /* Force clickable area even for <a> with no href */
  pointer-events: auto;
}
button.circled-icon {
  border: none !important;
}
.circled-icon:hover {
  background-color: var(--color-bg-alt-600);
}
.squared-icon {
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1.4rem;

  line-height: 2.7rem;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  vertical-align: middle;

  color: white;
  border-radius: 8px;
  background-color: var(--color-bg-alt-200);
}
.squared-icon.success {
  background-color: var(--color-success);
  color: #242D19;
}
.squared-icon.danger {
  background-color: var(--color-danger);
  color: #2E1C1E;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 32px;
}
.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-text);
}
.badge-primary-light {
  background-color: var(--primary-600);
  color: var(--color-text);
}
.badge-secondary {
  background-color: var(--primary-300);
  color: var(--color-text); 
}
.badge-light-success {
  border: 2px var(--success) solid;
  color: var(--success);
  border-radius: 8px;
}
.badge-light-danger {
  border: 2px var(--danger) solid;
  color: var(--danger);
  border-radius: 8px;
}
.badge-light-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  padding: 6px 18px;
}
.badge-light {
  background-color: var(--gray-600);
  color: var(--color-200);
  font-weight: 400;
}


#user-menu .web {
  transform:translate(-30px,59px);
}

.user-menu-link {
  background-color: var(--color-bg-800);
  margin: 14px 0;
  padding: 14px;
  display: block;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
}
a.user-menu-link {
  color: var(--color-text);
}
a.user-menu-link.danger {
  color: var(--color-danger);
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  z-index: 109;
  background-color: rgba(0, 0, 0, 0.5);
  animation: animation-drawer-fade-in .3s ease-in-out 1;
}
.drawer {
  display: flex !important;
  overflow: auto;
  z-index: 110;
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: var(--color-bg-800);
  transition: transform .3s ease-in-out !important;
}

.donut-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: var(--gray-300);
}

/* used in user profile */
.legend {
  font-size: 12px;
  color: var(--gray-300);
}

.content img {
  max-width: 100%;
  width:auto;
  max-height: 360px;
  border-radius:14px;
  border:1px solid white;
  margin-top:0.8em;
}

.noscrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}
.noscrollbar::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge (Chromium) */
}

select {
  background-color: var(--color-bg-800);
  color: var(--color-text);
  border:none;
  border-radius: 10px;
  padding: 6px 12px 6px 12px;
  font-size: 14px;
}