/* 
 * Deprecated DNN CSS class names will remain available for some time
 * before being  permanently removed. Removal will occur according to
 * the  following process:
 *
 * 1. Removal will only occur with a major (x.y) release, never
 *    with a maintenance (x.y.z) release.
 * 2. Removal will not occur less than six months after the release
 *    when it was deprecated.
 * 3. Removal will not occur until after deprecation has been noted 
 *    in at least two major releases.
 *
 *                                              |        |Planned |
 *  Name                                        |Release |Removal |
 *----------------------------------------------+--------+--------+
 * Mod{NAME}C                                     5.6.2    6.2
 *   {NAME} = sanitized version of the DesktopModule Name 
 *   Used on <div> tag surrounding Module Content, inside container
 *----------------------------------------------+--------+--------+
 */  



/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg {
}

/* background color for the content part of the pages */
Body
{
}

.ControlPanel {
}

/* background/border colors for the selected tab */
.TabBg {
}

.LeftPane  { 
}

.ContentPane  { 
}

.RightPane  { 
}

/* text style for the selected tab */
.SelectedTab {
}

/* hyperlink style for the selected tab */
A.SelectedTab:link {
}

A.SelectedTab:visited  {
}

A.SelectedTab:hover    {
}

A.SelectedTab:active   {
}

/* text style for the unselected tabs */
.OtherTabs {
}
    
/* hyperlink style for the unselected tabs */
A.OtherTabs:link {
}

A.OtherTabs:visited  {
}

A.OtherTabs:hover    {
}

A.OtherTabs:active   {
}

/* GENERAL */
/* style for module titles */
.Head   {
}

/* style of item titles on edit and admin pages */
.SubHead    {
}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {
}

/* text style used for most text rendered by modules */
.Normal
{
}

/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox
{
}

.NormalRed
{
}

.NormalBold
{
}

/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton     {
}
    
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {
}

A.CommandButton:visited  {
}

A.CommandButton:hover    {
}
    
A.CommandButton:active   {
}

/* button style for standard HTML buttons */
.StandardButton     {
}

/* GENERIC */
H1  {
}

H2  {
}

H3  {
}

H4  {
}

H5, DT  {
}

H6  {
}

TFOOT, THEAD    {
}

TH  {
}

A:link  {
}

A:visited   {
}

A:hover {
}

A:active    {
}

SMALL   {
}

BIG {
}

BLOCKQUOTE, PRE {
}


UL LI   {
}

UL LI LI    {
}

UL LI LI LI {
}

OL LI   {
}

OL OL LI    {
}

OL OL OL LI {
}
OL UL LI   {
}

HR {
}

/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */    
.Message    {
}   

/* style of item titles by Announcements and events */
.ItemTitle    {
}

/* Menu-Styles */
/* Module Title Menu */
.ModuleTitle_MenuContainer {
}

.ModuleTitle_MenuBar {
}

.ModuleTitle_MenuItem {
}

.ModuleTitle_MenuIcon {
}

.ModuleTitle_SubMenu {
}

.ModuleTitle_MenuBreak {
}

.ModuleTitle_MenuItemSel {
}

.ModuleTitle_MenuArrow {
}

.ModuleTitle_RootMenuArrow {
}

/* Main Menu */

.MainMenu_MenuContainer {
}

.MainMenu_MenuBar {
}

.MainMenu_MenuItem {
}

.MainMenu_MenuIcon {
}

.MainMenu_SubMenu {
}

.MainMenu_MenuBreak {
}

.MainMenu_MenuItemSel {
}

.MainMenu_MenuArrow {
}

.MainMenu_RootMenuArrow {
}

/* Login Styles */
.LoginPanel{
}

.LoginTabGroup{
}

.LoginTab {
}

.LoginTabSelected{
}

.LoginTabHover{
}

.LoginContainerGroup{
}

.LoginContainer{
}

/* alex edit */
/*Homepage Hero Banner */
.heroBannerContainer{
    background-image: linear-gradient(45deg, rgba(108, 124, 0, .3) 12%,rgba(26, 132, 74, .3) 40%,rgba(26, 132, 74, .3) 40%,rgba(160, 32, 32, .4) 83%),url("/Portals/0/Images/Banner_1-1.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 750px;
    border-bottom:1px solid #595959;
    position: relative;
    z-index: 1;
}

.heroBannerContainer .top-left-text{
    position: absolute;
    top: 50px;
    /* left: 3%; */
    left: clamp(1rem, 0.5rem + 2.5vw, 2.75rem);
    /* background-color: red; */
}
.heroBannerContainer .top-left-text{
    position: absolute;
    top: 50px;
    /* left: 3%; */
    left: clamp(1rem, 0.5rem + 2.5vw, 2.75rem);
    width: 60%;
    /* background-color: red; */
}
.heroBannerContainer .top-left-text .font1{
    /* font-size: 32px; */
    font-size: clamp(1.7rem, 1.44rem + 1.3vw, 3rem);
    margin-bottom: 12px;
    letter-spacing: 1.5%;
    font-family: 'Archivo Black', sans-serif;
    color: #fff;
}
.heroBannerContainer .top-left-text .font2{
    /* font-size: 72px; */
    font-size: clamp(2.5rem, 1.143rem + 4.286vw, 5rem);
    letter-spacing: 0;
    font-family: 'Archivo Black', sans-serif;
    color: #fff;
}
.heroBannerContainer .top-left-text .font3{
    font-size: clamp(2rem, 1.84rem + 0.8vw, 2.8rem);
    letter-spacing: 5.5%;
    line-height: 130%;
    margin-bottom: 12px;
    font-family: 'Archivo Black', sans-serif;
    color: #E8DEDB;
}
.heroBannerContainer .top-left-text .font4{
    font-size: clamp(2.8rem, 2.4rem + 1.4vw, 4rem);
    letter-spacing: 5.5%;
    line-height: 130%;
    margin-bottom: 12px;
    font-family: 'Archivo Black', sans-serif;
    color: #E8DEDB;
}
.heroBannerContainer .top-left-text .font5{
    font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.8rem);
    line-height: 130%;
    margin-bottom: 12px;
    letter-spacing: 1.5%;
    font-family: 'Archivo Black', sans-serif;
    color: black;
}

/*accordion styles*/
/* Make all accordion buttons the same color as the active one */
.accordion-button {
    background-color: var(--bs-accordion-active-bg, #e7f1ff) !important;
    color: var(--bs-accordion-active-color, #0c63e4) !important;
}
.accordion-button:not(.collapsed) {
    background-color: #ffc107 !important; /* Yellow when active/clicked */
    color: #000 !important;
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}
/* Add spacing between accordion items */
.accordion-item {
    margin-bottom: 1rem;
}



/*responsive table for NNIJISP data */
<style>
  /* X-Small devices (portrait phones, less than 576px) */
  /* No media query for `xs` since this is the default in Bootstrap */

  .aligned-grid{
    display: grid;
    grid-template-columns: 1fr; /* stack everything on xs */
    gap: .75rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    padding: 1rem;
  }

  /* On xs, we hide the header row (since it's stacked) */
  .hdr{ display: none; }

  .cell{
    border-bottom: 1px solid #e9ecef;
    padding-bottom: .75rem;
  }

  /* Add labels for xs stacked view (optional but helpful) */
  .cell::before{
    display: block;
    font-weight: 700;
    margin-bottom: .25rem;
  }

  /* Label the stacked cells in repeating groups of 3 */
  .aligned-grid > .cell:nth-of-type(1n)::before{ content: ""; } /* default reset */

  /* Explanation:
     In the DOM, .cell elements start after the 3 .hdr items.
     So cell #1 = Name (person 1), #2 = Title, #3 = Contact, then repeats.
  */
  .aligned-grid > .cell:nth-of-type(1)::before{ content: "Name"; }
  .aligned-grid > .cell:nth-of-type(2)::before{ content: "Title/Division/Branch"; }
  .aligned-grid > .cell:nth-of-type(3)::before{ content: "Contact Information"; }

  .aligned-grid > .cell:nth-of-type(4)::before{ content: "Name"; }
  .aligned-grid > .cell:nth-of-type(5)::before{ content: "Title/Division/Branch"; }
  .aligned-grid > .cell:nth-of-type(6)::before{ content: "Contact Information"; }

  .aligned-grid > .cell:nth-of-type(7)::before{ content: "Name"; }
  .aligned-grid > .cell:nth-of-type(8)::before{ content: "Title/Division/Branch"; }
  .aligned-grid > .cell:nth-of-type(9)::before{ content: "Contact Information"; }

  /* Wrap long emails nicely */
  .aligned-grid a{ word-break: break-word; }


  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    /* still stacked is OK here, but you can increase spacing */
    .aligned-grid{ gap: 1rem; }
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .aligned-grid{
      grid-template-columns: 1fr 1fr 1fr; /* true table-like columns */
      gap: 0;
      padding: 0;
      border-radius: .5rem;
      overflow: hidden; /* keeps borders tidy */
    }

    .hdr{
      display: block;
      font-weight: 700;
      padding: .75rem 1rem;
      background: #f8f9fa;
      border-bottom: 1px solid #dee2e6;
    }

    .cell{
      padding: 1rem;
      border-bottom: 1px solid #dee2e6;
    }

    /* Remove stacked labels */
    .cell::before{ content: none; display: none; }
  }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .aligned-grid{
      grid-template-columns: 1.2fr 1fr 1.3fr; /* favor contact column */
    }
  }

  /* X-Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .aligned-grid{
      grid-template-columns: 1.25fr 1fr 1.5fr;
    }
  }

  /* XX-Large devices (larger desktops, 1400px and up) */
  @media (min-width: 1400px) {
    .aligned-grid{
      grid-template-columns: 1.3fr 1fr 1.6fr;
    }
  }
</style>