.navbar{                                                /* adds shadow to bottom of nav bar */
    box-shadow: 0 4px 10px black;
}

.nav li:not([data-level]):last-of-type a{               /* to make "Join Today" in nav bar bold*/
    font-weight: bold !important;
}

.navysection{
    background-color:#00355f;
} 

.graysection{
    background-color: #D3D3D3;
}

.bluesection{
    background-color: rgb(0, 124, 190);
}

.mediumbluesection{
    background-color: #005285;
}

.urgentmessage{                                             /* urgent alert background color */
    background-color: rgb(202, 4, 4);
}

.nonurgentmessage{                                          /* non-urgent alert background color */
    background-color: rgb(0, 242, 205)
}

.backgroundcolor{
    background-color: rgb(255, 255, 255);
}

.buttontextcolor a{
    color: rgb(255, 255, 255)!important;
}

.navybutton a{
    background-color: rgb(0, 53, 95)!important;
    border-color: rgb(0, 53, 95)!important;
}

.navybutton2 a{
    background-color: rgb(0, 53, 95)!important;
    border-color: rgb(255, 255, 255)!important;
}

.graybutton a{
    background-color: #8e918f;
    border-color: #404040;
    color: rgb(0, 0, 0);
}

.graybutton:hover a{
    background-color: #8e918f;
    border-color: #404040;
    color: rgb(0, 0, 0);
    border-width: 3px !important;   
}

.graybutton3 a{
    color: #404040 !important;
    font-weight: bold !important;
    background-color: rgba(255, 255, 255, 0)!important;
    border-color: #404040 !important; 
}

.graybutton3:hover a{
    color: #404040 !important;
    font-weight: bold !important;
    background-color: rgba(255, 255, 255, 0)!important;
    border-color: #404040 !important;
    border-width: 3px !important;
}



.graybutton2 a{
    color: rgb(102, 102, 102)!important;
    font-weight: bold !important;
    background-color: rgba(255, 255, 255, 0)!important;
    border-color: rgb(102, 102, 102)!important;
}

.graybutton2:hover a{
    color: rgb(102, 102, 102)!important;
    font-weight: bold !important;
    background-color: rgba(255, 255, 255, 0)!important;
    border-color: rgb(102, 102, 102)!important;
    border-width: 3px !important;
}

.whitebutton a{
    color: rgb(0, 53, 95)!important;
    font-weight: bold !important;
    background-color: rgb(255, 255, 255)!important;
    border-color: rgb(255, 255, 255)!important;
}

.whitebutton:hover a{
    color: rgb(0, 53, 95)!important;
    font-weight: bold !important;
    background-color: rgb(255, 255, 255)!important;
    border-color: rgb(255, 255, 255)!important;
    border-width: 3px !important;
}


.whitebutton a:focus,
.whitebutton a:active {
    color: rgb(0, 53, 95) !important;
    font-weight: bold !important;
    background-color: rgb(255, 255, 255) !important;
    border-color: rgb(255, 255, 255) !important;
    border-width: 3px !important;
    box-shadow: none !important; /* removes SLDS focus ring */
    outline: none !important;    /* removes browser focus outline */
}

.whitebutton2 a{
    color: rgb(0, 53, 95)!important;
    font-weight: bold !important;
    background-color: rgb(255, 255, 255)!important;
    border-color: rgb(64, 64, 64)!important;
}

.whitebutton2:hover a{
    color: rgb(0, 53, 95)!important;
    font-weight: bold !important;
    background-color: rgb(255, 255, 255)!important;
    border-color: rgb(64, 64, 64)!important;
    border-width: 3px !important;
}

.cardimagemaxheight {
   height: auto;
   max-height: 100%;
}

.textshadow {
   text-shadow: 2px 2px black;
}

.buttonshadow a{
    box-shadow: 2px 2px 4px black;
}

.imagealignright img{
    float: right;
}

.imagealignleft img{
    float: left;
}

.disclosure, .disclosure *{
    color: rgb(102, 102, 102)!important;
    font-weight: 500!important; 
    font-size: 14px!important;
    font-style: italic!important;
}

.productbox h4{
    color: black;
    font-style: bold;
    font-family: "Roboto";
    font-weight: 400;
    font-size: 21px;
}
    

.bluecolumn {
    background-color: #007CBE;
}

.lightbluecolumn {
    background-color: rgba(0, 124, 190, 0.10);
}

.graycolumn {
    background-color: #D3D3D3;
}

.navycolumn {
    background-color: rgb(0, 53, 95);
}

.whitecolumn {
    background-color: rgb(255, 255, 255);
}
.LearnMore {
    background-color: rgb(255, 255, 255)!important;
    border-color: rgb(255, 255, 255)!important;
    color: rgb(0, 53, 95)!important;
    text-decoration: underline!important;
}

@media (max-width: 800px) {
.button a{
    width: 80vw; /* Makes the button span the full width of the parent container */
  }
}


.textbox-border div{
    border: solid #404040 1px!important;
}


.comparison a{
target-name: same;
target-same: tab;
}

.tabdropdown a[role=menuitem]{
    font-size: 14px!important;
    font-weight: bold!important;
    color: rgb(0, 124, 190)!important;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  transition: top 0.3s ease-in-out !important;
  text-wrap: nowrap;
}
.skip-link:focus {
  top: 40px;
}

.accordion .slds-accordion__summary{
    background: none;
}

.accordion .slds-accordion_summary {
    background-color: none !important;
}

.accordionborder .slds-accordion__summary-heading .slds-button {
    font-size: 20px;
    font-family: "Roboto";
    font-weight: 400px;
}

.accordionborder .slds-accordion__summary-heading .slds-button:focus {
     box-shadow: none !important;                     /*change none to inset 0 0 0 2px white */
    font-weight: bold !important;
}

.accordionborder .slds-accordion__summary-heading .slds-button:hover {
     box-shadow: none !important;                     /*change none to inset 0 0 0 2px white */
    font-weight: bolder !important;
}

.slds-accordion__list-item {
    border-top: 0 !important;
    border-bottom: 1px solid rgb(64, 64, 64) !important;
}

.accordionwhiteheading .slds-accordion__summary-heading .slds-button {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: "Roboto";
    font-weight: 400px;
}

.accordionwhiteheading .slds-accordion__summary-heading .slds-button:focus {
    color: rgb(255, 255, 255); 
    box-shadow: none !important;                     /*change none to inset 0 0 0 2px white */
    font-weight: bold !important;
}

.accordionwhiteheading .slds-accordion__summary-heading .slds-button:hover {
    color: rgb(255, 255, 255); 
    box-shadow: none !important;                     /*change none to inset 0 0 0 2px white */
    font-weight: bolder !important;
}


/*.accordion span[tabsaccordions-accordionsection_accordionsection] {
 font-size: 20px;
 font-family: "Oswald";
 font-weight: bold;
 background: none;
 color: rgb(64, 64, 64);
}*/


@media only screen and (max-width: 47.9375em) {
 header .logo-anchor  div.dxp-content-layout-site-logo{
        max-height: 45px;
    }

community_navigation-customizable-navigation-hamburger-menu-container svg{
    width: 2.5rem !important;
    height: 2.5rem !important;
 }

 .card-border-top-mobile .dxp-block-image-host{             /* To round the image corners on Card component for mobile (checking page) */
    border-radius: 11px 11px 0 0;
}
}

.loginbutton a {
    color: white !important;                              /* White text */
    font-weight: bold !important;
    background-color: rgb(0, 124, 190) !important;        /* Solid blue background */
    border: rgb(0, 124, 190) !important;                  /* Match border to background */
    text-decoration: none;                                /* No underline */
    transition: all 0.3s ease;                            /* Smooth hover transition */
    cursor: pointer;                                      /* Hand cursor */
}

.loginbutton:hover a {
    background-color: rgb(0, 124, 190) !important;        /* Same background on hover */
    border: 2px solid rgb(255, 255, 255) !important;      /* Change border to white */
    color: white !important;                              /* Still white text */
}

.loginbutton a:active {
    transform: scale(0.98);
    box-shadow: inset 0 0 3px white;
    border: 2px solid rgb(0, 53, 95) !important;            /* Dark blue border on click */
}   

.card-border-right .dxp-block-image-host{                     /* To round the image corners on Card component(checking page) */
    border-radius: 0 11px 11px 0;
}

.card-border-left .dxp-block-image-host{                      /* To round the image corners on Card component (checking page) */
    border-radius: 11px 0 0 11px;
}

/*
.columntest{
    border: 1px solid rgb(102, 102, 102) !important;
    border-radius: 12px !important;
    padding-bottom: 0px !important;
}

.columntest .columns-content{
    border: 1px solid rgb(102, 102, 102) !important;
    border-radius: 12px !important;
    padding-bottom: 0px !important;
} 

*/

.columntest {
    border: 1px solid rgb(102, 102, 102) !important;
    border-radius: 12px !important;
}

.columnheight {
    height: 400px;
}

.roundedtopcolumn {
    border-radius: 11px 11px 0px 0px;
}

/*
.image-container {
    background-color: rgb(0, 124, 190);
}
*/

/*
.interactions-component {                                   
    background-color:rgb(0, 124, 190);
}
*/ /* Horizontal line background color */


.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison-table {
    min-width: 900px;
    border-collapse: separate;
    table-layout: auto; /* allow first column to size automatically */
}

.comparison-table td {
    text-align: center;
    vertical-align: middle;
    font-size: 20px; /* bold checkmarks */
    font-weight: bold;
}

/* Sticky header */
.comparison-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    text-align: center; /* center product headings */
}

/* Sticky first column */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 4;
    text-align: left !important;
    font-weight: 600;
    white-space: nowrap; /* prevent wrapping */
    background-color: #f4f6f9; /* optional for contrast */
    padding-right: 12px;
}

/* Sticky header + column overlap */
.sticky-header-col {
    z-index: 6 !important;
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .comparison-table {
        min-width: 600px; /* small screens */
    }
    .sticky-col {
        white-space: normal; /* allow wrapping on mobile */
        padding-right: 8px;
    }
}