:root {
  
  --mtier-active-color: #da291c;
  --mtier-active-bg-color: #f1f5f9;
  --mtier-level-1-color: #1E293B;
  --mtier-level-2-color: #475569;
  --mtier-level-3-color: #64748B;
}



.main-nav {
    margin: 0 !important;

    #meteor-desktop-nav {
        margin: 0 !important;
        padding: 0 !important;
    
        .Meteor-Navigation__Link__desktop{
            padding-left: 0px !important;
            padding-right: 24px !important;
            font-weight: 500 !important;

            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.35s ease, transform 0.35s ease;
            
        }

        .Meteor-Navigation__Link__desktop.show{
          opacity: 1;
          transform: translateY(0);
        }
    }
}


/* 1. Main Container */
.meteor-menu[data-meteor-template="solar"] {
  border-radius: 5px !important;
  box-sizing: border-box !important;
  
  .m-tiers {
      font-family: Roboto, Arial !important;
      font-size: 14px !important;
      line-height: 20px !important;
      /* color: var(--mtier-level-1-color) !important; */
      
      .m-cover {
          border-radius: 5px !important;
          box-shadow: 0px 4px 6px -1px #0000001A;

          span.m-left-border,
          span.m-right-border {
            border-color: var(--mtier-active-bg-color) !important;
            border-width: 1px !important;
            opacity: 1 !important;
          }
        }

        .m-tier-1{
            .m-nav {
                .m-link {
                  padding: 12px !important;
                  font-size: 14px !important;
                  line-height: 20px !important;
                  color: var(--mtier-level-1-color) !important;

                }
                .m-link[data-active="true"] {
                    color: var(--mtier-active-color) !important;
                    background-color: var(--mtier-active-bg-color) !important;
                }
            }
        }

        .m-tier-2{
            .m-nav {
                .m-link {
                    padding: 12px !important;
                    font-size: 14px !important;
                    line-height: 20px !important;
                    color: var(--mtier-level-2-color) !important;
                }
            }
            .m-nav[data-active="true"] {  
                .m-link[data-active="true"] {
                    color: var(--mtier-active-color) !important;
                    background-color: var(--mtier-active-bg-color) !important;
                }
            }
        }

        .m-tier-3{
            .m-nav {
                .m-link {
                    padding: 12px !important;
                    font-size: 14px !important;
                    line-height: 20px !important;
                    color: var(--mtier-level-3-color) !important;
                }
            }
            .m-nav[data-active="true"] {
                .m-link[data-active="true"] {
                    color: var(--mtier-active-color) !important;
                    background-color: var(--mtier-active-bg-color) !important;
                }
            }
        }

        .m-shield{
            display: none !important;
        }
        
    }
}


/* Main Mobile Navigation Container */
.main-nav[data-meteor-platform="mobile"] {
  #meteor-mobile-nav.Meteor-MobileNavigation {
    font-family: Roboto !important;
    line-height: 20px !important;
    padding: 24px 0 !important;

    ul {
      /* Primary UL (level 1) */
      > li {
        
        > .Meteor-MobileNavigation__Link {
          border-bottom: 1px solid #E2E8F0;

          > a.Meteor-Navigation__Link__mobile {
            padding: 12px 0 !important;
            color: var(--mtier-level-1-color) !important;

            .Meteor-Caret {
              rotate: 90deg !important;
            }
          }
        }

        > .Meteor-MobileMenu {
          .Meteor-Stacked {
            > ul {

              padding: 0 !important;
              
              /* Level 2 UL */
              > li.Meteor-Stacked__ListItem {
                > div > a.Meteor-StackedAnchor {
                  width: 100% !important;
                  justify-content: space-between !important;
                  font-weight: 400 !important;
                  font-size: 14px !important;
                  padding: 8px 12px !important;

                  .Meteor-Stacked__Caret {
                    order: 1 !important;
                    .Meteor-Caret {
                      rotate: 90deg !important;
                    }
                  }
                }


                &.is-open {
                  > div > a.Meteor-StackedAnchor {
                    color: var(--mtier-active-color) !important;

                    .Meteor-Stacked__Caret {
                      .Meteor-Caret {
                        rotate: 180deg !important;
                        path {
                          fill: var(--mtier-active-color) !important;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          /* Active State for Level 1 Menu */
          &[data-active="true"] {
            max-height: 1000px;

            .Meteor-Stacked {
              > ul {
                border: 1px solid #E2E8F0 !important;
                border-radius: 5px !important;
                max-height: 600px;
                opacity: 1;

                > li.Meteor-Stacked__ListItem {
                  > div a.Meteor-StackedAnchor {
                    color: var(--mtier-level-1-color) !important;
                    order: 1 !important;
                    font-weight: 400 !important;
                    font-size: 14px !important;
                    padding: 8px 12px !important;
                  }

                  &.has-submenu {
                    > ul {
                      overflow: hidden;
                      max-height: 0;
                      opacity: 0;
                      transition: max-height 0.35s ease-in-out, opacity 0.25s ease-in-out;
                    }

                    &.is-open {
                      > ul {
                        max-height: 600px;
                        opacity: 1;
                        overflow: hidden;
                        overflow-y: hidden !important;
                      }

                      > div a.Meteor-StackedAnchor {
                        color: var(--mtier-active-color) !important;
                      }
                    }
                  }

                  /* Level 3 UL */
                  ul {
                    background-color: #F1F5F9 !important;
                    margin: 0 12px 5px 12px !important;
                    /* padding: 12px 0 0 0 !important; */
                    border-radius: 5px !important;
                    padding: 0 !important;
                    overflow-y: hidden !important;
                    
                    li.Meteor-Stacked__ListItem {
                      > div a.Meteor-StackedAnchor {
                        color: var(--mtier-level-2-color) !important;
                        width: 100% !important;
                        justify-content: space-between !important;
                        font-weight: 400 !important;
                        font-size: 14px !important;
                        padding: 8px 12px !important;

                        .Meteor-Stacked__Caret {
                          order: 1 !important;
                          .Meteor-Caret {
                            rotate: 90deg !important;
                            path {
                              fill: var(--mtier-level-2-color) !important;
                            }
                          }
                        }
                      }

                      &.has-submenu.is-open {
                        > div a.Meteor-StackedAnchor{
                        
                          font-weight: 700 !important;
                          .Meteor-Caret {
                            rotate: 180deg !important;
                          }
                        }
                      }

                      /* Level 4 UL */
                      ul {
                        background-color: #E2E8F0 !important;
                        margin: 0 12px 5px 12px !important;
                        /* padding: 12px 0 0 0 !important; */
                        border-radius: 5px !important;
                        font-weight: 400 !important;
                        font-size: 14px !important;
                        padding: 0 !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      /* Level 1 List Item State when a child menu is active */
      > li:has(> .Meteor-MobileMenu[data-active="true"]) {
        > .Meteor-MobileNavigation__Link {
          border: none !important;

          > a.Meteor-Navigation__Link__mobile {
            color: var(--mtier-active-color) !important;

            .Meteor-Caret {
              rotate: 180deg !important;
              path {
                fill: var(--mtier-active-color) !important;
              }
            }
          }
        }
      }

    }
  }
}