/* Base Theme Info */

/*
  Color Palette Guide: https://colorhunt.co/palette/789dbcffe3e3fef9f2c9e9d2;
  Background: FEF9F2; Cream
  Banner: 789DBC; Blue
  Accent: C9E9D2;  Green
  Accent #2: FFE3E3;  Pink
  Font: #2D2E33; Charcoal

  BCTF Green: 53d37e;
  BCTF Dark Blue: 072d63;
  BCTF Light Blue: 3176ab;  
  BCTF BG: FFF;
*/

body {


  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #FEF9F2;
  text-align: left;
  /*background-color: #FEF9F2;*/
  background-color: red;

  display: flex;
  min-height: 100vh;
  flex-direction: column;

}

.root-background1 {
  margin: 0;
  min-height: 100vh;
  /* A soft forest backdrop */
  /*background-color: #1a2e24; */
  
  /* The SVG is URL-encoded. %23 represents the # in hex colors */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M400,0 C420,400 450,700 200,1000 L800,1000 C550,700 580,400 600,0 Z' fill='%232c1b18'/%3E%3Cpath d='M440,500 C400,750 150,900 0,1000 L250,1000 C350,900 420,800 460,700 Z' fill='%233e2723'/%3E%3Cpath d='M560,550 C600,800 850,950 1000,1000 L750,1000 C650,920 580,800 540,700 Z' fill='%234e342e'/%3E%3C/svg%3E");
  
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* Anchors the roots to the bottom even if the page scrolls */
  background-attachment: fixed;
}

.root-background2 {
  margin: 0;
  min-height: 100vh;
  background-color: #f4f1ea;
  
  background-image:
    /* Left Root Flare */
    radial-gradient(100% 200% at 0% 100%, transparent 45%, #5C4033 45.5%, #5C4033 100%),
    /* Right Root Flare */
    radial-gradient(50% 200% at 100% 100%, transparent 45%, #5C4033 45.5%, #5C4033 100%),
    /* Center Pillar Trunk */
    linear-gradient(to right, transparent 35%, #5C4033 35%, #5C4033 65%, transparent 65%);
    
  /* The roots take up the bottom 30% of the screen, the trunk takes the whole height */
  background-size: 
    36% 30%, 
    36% 30%, 
    100% 100%;
    
  background-position: 
    bottom left, 
    bottom right, 
    top center;
    
  background-repeat: no-repeat;
  background-attachment: fixed;
}


.root-background {
  margin: 0;
  min-height: 100vh;
  /* Your requested light background */
  background-color: #FEF9F2; 
  
  /* 
    The 8 SVG paths use a palette of bright, soft earthy tones:
    #EADDCE (Main background pillar - lightest)
    #E8D0BC, #E2C4AA, #DDC0A6, #D4B499, #CBAA8D, #C19C7D, #B38D6F (Foreground roots - slightly darker for depth)
  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M350,0 C380,500 450,700 100,1000 L900,1000 C550,700 620,500 650,0 Z' fill='%23EADDCE'/%3E%3Cpath d='M380,400 C300,700 150,900 -50,1000 L200,1000 C300,900 400,800 420,550 Z' fill='%23E2C4AA'/%3E%3Cpath d='M620,400 C700,700 850,900 1050,1000 L800,1000 C700,900 600,800 580,550 Z' fill='%23C19C7D'/%3E%3Cpath d='M440,200 C380,550 250,850 100,1000 L350,1000 C400,900 450,600 470,300 Z' fill='%23B38D6F'/%3E%3Cpath d='M560,200 C620,550 750,850 900,1000 L650,1000 C600,900 550,600 530,300 Z' fill='%23E8D0BC'/%3E%3Cpath d='M480,500 C450,750 350,900 250,1000 L450,1000 C460,950 500,850 510,650 Z' fill='%23CBAA8D'/%3E%3Cpath d='M520,600 C550,800 650,950 700,1000 L500,1000 C510,950 510,850 510,750 Z' fill='%23DDC0A6'/%3E%3Cpath d='M490,700 C470,850 400,950 350,1000 L650,1000 C600,950 530,850 510,700 Z' fill='%23D4B499'/%3E%3C/svg%3E");
  
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed; 
}

#siteNavBar a {
  color: #FEF9F2;
  text-decoration: none;
}

/* TODO*/
#siteNavBar a:hover {
  color: #C9E9D2;
  text-decoration: none;
}

#siteNavBar .dropdown-item {
   background-color: #955;
   color: #FEF9F2;
   position: relative;
}




.accent-blue-text {
  color: #789DBC;
}

/* Original */
.accent-red-text {
  color: #FFE3E3;
}

.red-text {
  color: #FF9797;
}

.green-text {
  color: #93D3A5;
}

.accent-green-text {
  color: #C9E9D2;
}

small {
  font-size: 80%;
}

h3 {
  color: #789DBC;
}

/*  ########  NEW COLOR SCHEME ######## */

nav.no-padding {
  padding: 0px; 
}


/*  ######### Site Nav Bar ######### */
div.nav_golden_border  {
    background-color: #C9E9D2;
    margin: 0px;
}

div.nav_red_admin_border  {
    background-color: red;
    padding: 2px 0px 2px 0px;
    margin: 0px;
}

div.nav_gray_gradient {
    background:  linear-gradient(#3176ab, #3176ab);
    margin: 0px;    
}

/*div.nav_mask_overlay {
    background: url('pirate_mask_overlay.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-size: auto 50px;
}
*/
/* TODO? */
#siteNavBar li.page-active .nav-link {
    color: #93d3a5;
}


h1.nav_title {
    text-shadow: 1px -2px 0px black;
    font: 48px 'Tahoma';
    margin: 0px;
    color: #eee;
}

/*
.nav_mask_overlay a.navbar-brand {
  text-shadow: 1px -2px 0px #444;
  padding: 0px;
  font: 24px 'Tahoma';
  margin: 0px;
  color: #eeeedd;
}

@media only screen and (max-device-width: 350px){

  .nav_mask_overlay a.navbar-brand {
      font: 18px 'Tahoma';
    }
}


.nav_mask_overlay a.navbar-brand:hover {
  color: #fff;
}

.nav_mask_overlay.navbar-dark {
  color: unset;
}

.nav_mask_overlay a.nav-link {
    /*text-shadow: 1px -2px 0px black;*/
    /*font: 18px 'Tahoma';*/
    margin: 0px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #eeeedd;
    text-shadow: 1px 1px 6px black;
}


@media only screen and (max-device-width: 984px){

  .nav_mask_overlay a.nav-link {
    /*text-shadow: 1px -2px 0px black;*/
    font: 16px 'Tahoma';
    font-weight: 200px;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 20px;
    padding-right: 20px;
    color: #eeeedd;
    text-shadow: none;
  }

  .navbar-model-view {
    float: right;
    border: 1px solid #eeeedd;
    /*padding-left: 20px;
    padding-right: 20px;*/
    margin-top: 10px;
    border-radius: 8px;
  }


}



.center-container {
  align-content: center;
  text-align: center;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}

.center-container-shadow{
  border: 1px solid #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  display: block;
  object-fit: contain;
}


@media only screen and (max-device-width: 480px){

  .center-container {
      padding-left: 15%;
      padding-right: 15%;
    }
}

/* Container spacing */
.vendor-grid-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Responsive Grid layout */
.vendor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    align-items: center;
    justify-items: center;
}

/* Individual grid cell container */
.vendor-item {
    width: 100%;
    height: 120px; /* Uniform height container to align irregular logos nicely */
    background: #ffffff; /* Optional: adjust card background if needed */
    border: 1px solid #eaeaea; /* Optional subtle border */
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vendor-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.vendor-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Image scaling to handle various shapes (tall vs wide) */
.vendor-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Ensures the whole logo fits without getting cropped */
    filter: grayscale(100%); /* Optional: Gives all vendor logos a clean, uniform look */
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Bring color back on hover */
.vendor-item:hover .vendor-logo-img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Mobile Fallback: Automatically shifts to a single column or tighter grid on tiny screens */
@media (max-width: 480px) {
    .vendor-grid {
        grid-template-columns: 1fr; /* Forces single column */
    }
}

/*
.nav_mask_overlay a.nav-link:hover {
    color: #fff;
}


.nav_mask_overlay a.dropdown-item {
  color: #ddd;
}

.nav_mask_overlay a.dropdown-item:hover {
  color: #ddd;
  background-color: #a66;
}

.nav_mask_overlay a.masquerade {
  color: #ddd;
  background-color: #58a;
}

.nav_mask_overlay a.masquerade:hover {
  color: #ddd;
  background-color: #6ac;
}
*/





/*  ### SCREEN SIZES ###*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


/* TESTING SCHEDULE STUFF*/

.main_bg {
  background: url("df_main_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  opacity: 50%;
  /*background-attachment: fixed;*/
}

/* ######## END OF NEW COLOR SCHEME ######## */



.bg-dark {
  /*background-image: linear-gradient(#e5214b, #b2f3f0);*/
  background-image: linear-gradient(black, #2e4a9e);
}

.bg-admin {
  background-image: linear-gradient(#822, #933);
}


.bg-admin-become-user {
  background-image: linear-gradient(#459689, #49a394);
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.container {
  width: 100%;
}

.doc-example {
  padding: 4px;
  padding-left:8px;
  background-color: #f3f3f3;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 10px;
}



#basic_frame {
  border-radius: 25px;
  border: 2px solid #eee;
  background-color: #FEF9F2;
  padding: 10px; 
  width: inherit;
  height: 10%;
  align-content: center;
  text-align: center;
  padding-bottom: 30px;
}

#info_tile h1 {
  color: #fff;
}

hr.docs {
  border: 1px solid #d3d4d7;
  border-radius: 5px;
  margin-top: 40px;
  margin-bottom: 30px;
}

th.required { font-weight: bold; }

th.required:after { content: '*' }

#info_tile {
  border-radius: 25px;
  border: 5px solid #8A2BE2;
  background-image:
    url("program_deactive.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 80vw;
  max-width: 300px;
  height: 400px;
}

#register_button {
  color: black;
  border-radius: 8px;
  border: 2px solid #51afab;
  background-color: #5ac3be;
  width: 80vw;
  max-width: 300px;
  height: 60px;
  font-size: 20px;
  font-weight: 600;
}

#register_button:hover {
  background-color: #51afab ;
  border: 2px solid #51afab;
}

#register_edit_button {
  color: black;
  border-radius: 8px;
  border: 2px solid #e5ad06;
  background-color: #ffc107;
  width: 80vw;
  max-width: 300px;
  height: 60px;
  font-size: 20px;
  font-weight: 600;
}

#register_edit_button:hover {
  background-color: #d39e00 ;
  border: 2px solid #d39e00;
}


.table-responsive-sm {
    max-height: 50px;
}

.table_input {
  border-radius: 6px;
  /*margin-left: 10px;*/
  border: 1px solid #ddd;
}


#info_tile:hover {
  border: 5px solid #8A2BE2;
  background-image: 
    url("program_active.jpg");
  cursor: pointer; 
}

#vegan_icon {
  background-image: 
    url("vegan_icon_32x32.png");
  background-size: 100%;
  background-repeat: no-repeat;
  border: none;
  width: 24px;
  height: 24px;
}

#gluten_icon {
  background-image: 
    url("gluten_free_icon_32x32.png");
}

#info_tile_v2 {
  border-radius: 25px;
  border: 5px solid #00b300;
  background-image:
    url("program_deactive.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 300px;
  height: 400px;

}
#info_tile_v2:hover {
  border: 5px solid #00b300;
  background-image: 
    url("program_edit.jpg");
  cursor: pointer; 
}

#menu_background {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 98%;
  max-width: 800px;
  /*text-align: center;*/
  align-content: center;
  border-radius: 15px; 
  border: 2px solid #eee;
  background-image:
    url("paper.jpg");
  background-repeat: repeat;
  padding: 10px;

}

@media only screen and (max-device-width: 400px) {
  .menu_background h6 {
     font-size: 3.4vw
  }
}



#form_container_header {
  margin-left: -25px;
  margin-right: -25px;
  padding-top: 5px;
  margin-top: 10px;
  margin-bottom: 5px;
  background-color: #53d37e;
  border-radius: 15px;
}

#form_container_header_red {
  margin-left: -25px;
  margin-right: -25px;
  padding-top: 5px;
  margin-top: 10px;
  margin-bottom: 5px;
  background-color: #e5214b;
  border-radius: 15px;
}

#form_container_header_yellow {
  margin-left: -25px;
  margin-right: -25px;
  padding-top: 5px;
  margin-top: 10px;
  margin-bottom: 5px;
  background-color: #ffd862;
  border-radius: 15px;
}

#form_container_header_blue {
  margin-left: -25px;
  margin-right: -25px;
  padding-top: 5px;
  margin-top: 10px;
  margin-bottom: 5px;
  background-color: #b2f3f0;
  border-radius: 15px;
}


#form_container_box {
  border: 1px solid #dadce0;
  background-color: #fff;
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 1vw;
  padding-right: 1vw;
}


#registration_banner {
  background-image:
    url("registration_banner_2026.jpg");
  border-radius: 15px;
  border: 1px solid #53d37e;
  background-repeat: no-repeat;
  background-size: cover;

  color: white;
  margin-left: -25px;
  margin-right: -25px;
  height: 15vh;
  text-align: center;
  font-size: 200%;
  font-family: Tahoma;
  text-shadow: 2px 2px black;
  vertical-align: middle;
}

.alert-error {
  color: #721c24;
  background-color: #eebbbb;
  border-color: #ee3333;
}

.alert-error hr {
  border-top-color: #f1b0b7;
}

.nts-blue-text {
  color: #3176ab;
}

/* Original */
.nts-red-text {
  color: #e5214b;
}


@import url('https://fonts.googleapis.com/css?family=Raleway:200');

#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: inherit;
  height: inherit;
  color: white;
  font-family: 'Tahoma';
  font-size: 100%;
}
.gradient-border {
  --borderWidth: 10px;
  background: #ffffff00;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 60s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.round-time-bar div {
  height: 5px;
  background: linear-gradient(to bottom, purple, #909);
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
  transform-origin: left center;
}

@keyframes roundtime {
  to {
    transform: scaleX(0);
  }
}