/* Core styles and imports */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

@import url("components/accordion.18ccf66160be.css");
@import url("components/buttons.a3f80a4b389a.css");
@import url("components/card.a6a57cfb18ec.css");
@import url("components/forms.742431231ff9.css");
@import url("components/formsets.b12e3800948b.css");
@import url("components/help.cb7af22bb9c5.css");
@import url("components/landing_page.effa5f7602e0.css");
@import url("components/menu.28e3ffec822f.css");
@import url("components/navbar.442581624950.css");
@import url("components/table.e28bd30d2f63.css");
@import url("components/pagination.574824514936.css");
@import url("components/dropdown.36ac0110f5d2.css");
@import url("components/tabs.9afdbc9c15f3.css");
@import url("components/legal.60d0901d4e0a.css");

@import url("partials/footer.a48abd9c5073.css");

/* Colors */
:root {
  --flexup-dark-blue: #1F3F5F;
  --flexup-light-blue: #2a5c8e;
  --flexup-green: #70AD47;
  --flexup-light-green: #8DC578;
  --flexup-very-light-green: #aaddaa;
  --flexup-red: #dc3545;
  --flexup-orange: #ED7D31;
  --flexup-light-blue: #5B9BD5;
  /* background colors */
  --light-blue: #d7e1f0;
  --very-light-blue: #ebebf5;
  --ultra-light-blue: #f5f5fa;
  --light-red: #f28b91;
  --gray: #ccc;
  --light-gray: #ddd;
  --very-light-gray: #f5f5f5;
  --ultra-light-gray: #fafafa;
  /* Environment band colors */
  --demo: #f3e7cf;
  --sandbox: #9fcbf0;
}

.dropdown-item{
  cursor: pointer;
}

.text-success {
  color: var(--flexup-green) !important;
}
.text-danger {
  color: var(--flexup-red) !important;
}

.colored-background {
  color: var(--flexup-dark-blue);
}


p + ul, p + ol {
  margin-top: -1em;
  /* Reduce top margin of lists */
}

/* Fonts & Emojis */

/* Default Font for Body */
body {
    font-family: 'Open Sans', 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Define Custom Emoji Font */
/* @font-face {
    font-family: 'FlexUpEmojiFont';
    src: url("/static/font/flexup_emoji.4a1c63f64aa9.otf") format('truetype');
} */


/* Emoji Handling */
.emoji {
    /* font-family: 'FlexUpEmojiFont', 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol', sans-serif; */
    font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol', sans-serif;
}



/* Typography */
html,
body {
  color: var(--flexup-dark-blue);
  scroll-padding-top: 100px; /* Adjust to match your header height or desired offset */
  padding-bottom: 20px;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.1rem;
  text-decoration: underline;
  font-weight: normal !important;
}

h4 {
  font-size: 1rem;
  text-decoration: underline;
  font-weight: normal !important;
}

.breadcrumb {
  font-size: 0.9rem;
}

h1,
h2 {
  font-weight: bold;
}

/* Responsive typography adjustments */
@media (max-width: 576px) {
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.2rem;
  }
  h3 {
    font-size: 1rem;
  }
}

/* Media */

/* Extra small devices (phones, below 576px) */
/* Default for mobile */

#mainContent.hidden { margin-left: 0; }
#mainContent.full { margin-left: 200px; }

.mainContent {
  padding-top: 80px; /* Adjust this value to match your navbar's height */
  transition: margin-left 0.3s ease-in-out; /* Added for smooth transition with sidebar */
}


/***** Styling page title *****/

.detail-title-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
}

.detail-title-content {
    margin-bottom: 40px; /* Space below the form-actions */
    display: flex;
    align-items: center;
}

.detail-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-end;
    margin-bottom: 1.5rem; /* Consistent with original margin-bottom */
}

.form-buttons {
    position: fixed;
    z-index: 1000;
    background-color: white;
    padding: 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.edit-button-container {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Medium screens and up (768px+) */
@media (min-width: 768px) {
    .detail-title-container {
        flex-direction: row;
        align-items: center;
    }
    
    .detail-buttons {
        align-self: center;
    }

    .form-buttons {
        top: 230px; /* for the navbar + title + breadcrumb (will be dynamically adjusted by JS) */
        right: 2rem;
        transition: top 0.4s ease;
    }
}


/* Small screens (below md breakpoint) */
@media (max-width: 767.98px) {
  #mainContent.hidden,
  #mainContent.full {
    margin-left: 0 !important; /* Override any other margin settings */
  }
    
  /* .left-menu.full { */
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  /* } */
}

/* Medium screens and up */
@media (min-width: 768px) {
  #mainContent.hidden { margin-left: 0; }
  #mainContent.full { margin-left: 200px; }
}


/* Small screens (<576px) */
@media (max-width: 575.98px) {
  /* Full menu overlays content */
  .left-menu.full {
    width: 250px;
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  }
  
  /* #mainContent {
    padding: 1rem;
  } */
  /* No margin changes for main content */
  #mainContent.hidden,
  #mainContent.full {
    margin-left: 0 !important;
  }
}

/* Medium screens (576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .left-menu.full {
    width: 250px;
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  }
  
  #mainContent.full {
    margin-left: 0;
  }
}

/* Large screens (≥768px) */
@media (min-width: 768px) {
  .left-menu.full {
    width: 250px;
  }
  
  #mainContent.full {
    margin-left: 250px;
  }
}

/* Bootstrap override */

.bg-dark {
  background-color: var(--flexup-dark-blue) !important;
  color: white;
}

.bg-light-gray {
  background-color: var(--very-light-gray) !important;
  /* color: var(--flexup-dark-blue); */

}

/* Sections & Blocks 
This is only used in development mode*/

/* div,
section,
main,
body,
header,
footer,
form {
  border: 0.5px solid rgba(194, 2, 252, 0.2) !important;
  background-color: rgba(129, 35, 252, 0.03) !important;
} */


/* Fix for full-width sections on small screens */
@media (max-width: 799px) {
  body {
    max-width: 100%;
  }
  
  .full-width-bg {
    width: 100%;
    max-width: 100%;
  }

  #heroCarousel {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  #heroCarousel .carousel-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.bg-grey {
  background-color: #6c757d !important;
  color: white !important;
}

.bg-green {
  background-color: #008000 !important;
  color: white !important;
}

.bg-green-very-light {
  background-color: var(--flexup-very-light-green) !important;
  color: var(--flexup-dark-blue);
}

.bg-blue-very-light {
  background-color: var(--flexup-light-blue) !important;
  color: white !important;
}

.bg-red {
  background-color: #ef233c !important;
  color: white !important;
}

.bg-yellow {
  background-color: #ffb700 !important;
  color: white !important;
}

.bg-orange {
  background-color: #ff7b00 !important;
  color: white !important;
}

.bg-blue {
  background-color: #219ebc !important;
  color: white !important;
}

.bg-blue-dark {
  background-color: #005f73 !important;
  color: white !important;
}

.bg-blue-very-dark {
  background-color: var(--flexup-dark-blue) !important;
  color: white !important;
}

.bg-blue-light {
  background-color: #2a5c8e !important;
  color: white !important;
}

.db-color{
  color: var(--flexup-dark-blue);
}
.db-color-bg{
  background-color:  var(--flexup-dark-blue);
}
.db-color-border{
  border:  var(--flexup-dark-blue);
}