/*Nait styles*/
.main-header {
    z-index: 999;
    /*background: #002D74 url(/theme/images/starburst-bg.jpg) center top no-repeat;*/
    min-height: 100px;
    border-top: 10px solid #002D74;
    position: relative;
    top: 0;
    margin: 0 auto;
}
#search_bar_desktop {    
	background-color: #fff;
}
#search_bar_desktop input#search_input {
    border: 1px solid #002d71 !important;
    height: 60px;
    border-radius: 2rem !important;
    font-size:1.1rem !important;
}
.close {
    font-size: 1.1rem;
}



header.default{
    border:none !important;
}

/* John put his mprimary nav outside of his ecomm bar in his example.. but in corrent implementation its inside ecomm bar
section#ecommerce_bar .container.arrow-sticky-at-top{
    max-width: calc(1600px * var(--bs-ratio)) !important;
}
*/

section.primary-navigation{
    position:relative;
    top: 50%;
}

section#ecommerce_bar li.nav-item > a.nav-link {
    color: #000;
}
button.navbar-toggler {
	color: #F5F7FA !important;
}
section.primary-navigation{
        background-color: transparent !important;
}

h2.catalogue2_desc_self{
    display:none;
}
.carousel-item img {
        max-width: 100%;
}



footer.arrow--site-footer{
    width: 100% !important;   
    border-top-right-radius: 2.5rem;
    border-top-left-radius: 2.5rem;
    margin: 0 auto;
    color: #000000;
    background-color: #ddd !important;
}

footer.arrow--site-footer:not(.pt-5) {
    display: none !important;
}

.grecaptcha-badge { 
    visibility: hidden; 
}

.upper-footer {
        background-color: #5e6a70;
        color: #000;
        line-height: 1.6;
        font-size: 14px;
        height: auto;
        padding: 25px
}

/* Base styles for nav-item links */
li.nav-item > a.nav-link {
    color: #000;
    font-size: 18px;
    padding: 15px 10px; 
    text-decoration: none; 
    border-bottom: 5px solid transparent; 
    transition: color 0.3s, border-bottom 0.3s; 
}

.primary-navigation .nav-item > .nav-link {
    border-bottom: 5px solid transparent; 
}

.primary-navigation .nav-item > .nav-link:hover {
    color: #d2d2d2 !important; 
    /*border-bottom: 5px solid #00A0DF; */
}

.primary-navigation .dropdown-item .nav-item > .nav-link:hover {
    color: #002968; 
    font-weight: 400; 
    text-decoration: none !important; 
    padding: 10px 15px; 
    /*transition: color 0.3s; */
}

.nav-link.dropdown-item:hover {
    color: #00A0DF; 
    text-decoration: none !important; 
    border-bottom: none !important; 
    font-weight:400;
}
a.nav-link.dropdown-item {
    color: #00A0DF; 
    text-decoration: none !important; 
    border-bottom: none !important; 
    font-weight:400;
}
.flyoutnav-panel:first-child
{
    margin-left: 15rem;
}


a {
    text-decoration: none; 
}

a:hover {
    text-decoration: none; 
}

a {
    color: #002968; 
    text-decoration: none; 
}

a:hover {
    color: #00A0DF; 
    text-decoration: underline; 
}

.adjust-inline-search-btn:hover {
        background: #C61D23;
        color: #fff;
}

.navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-item {
    position: relative; 
}

.nav-link {
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: black; 
    transition: color 0.3s;
}

/* Remove the dropdown arrow */
.nav-link::after {
    content: none !important; /* Removes the arrow on dropdown links */
}

/* Dropdown menu styling */
.dropdown-menu {
    display: none; /* Hide by default */
    position: absolute;
    top: 100%; /* Position below the parent li */
    left: 0;
    background-color: white;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.dropdown-item {
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

/* Show dropdown on hover */
.nav-item:hover > .dropdown-menu {
    display: block;
}

/* Hover effect for dropdown items */
.dropdown-item:hover {
    background-color: #007bff;
    color: white;
}

/* Hover effect for nav links */
.nav-link:hover {
    color: none !important; 
}

body.reg-light-background{
           font-family: 'Montserrat', sans-serif;
	font-size: 16px;

}
li.nav-item > a.nav-link {

           font-family: 'Montserrat', sans-serif;
}
li.nav-item a {
        text-transform: capitalize;
        font-weight: 500;
}
/*.row.nospace-row .card {
	min-height: 21.5rem !important;
		
}*/
/*.esolution-view.esolution-view-container.arrow-view-container .row .columns .card {*/
/*	min-height: 350px !important; */
/*}*/


/* NAIT STLES */

body{
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6, .small {
    font-family: 'Montserrat', sans-serif;
}
p {
    font-family: 'Montserrat', sans-serif;
    color: rgba(100,100,100  , 1); 
}

h1{
    font-size: 2.55rem;
    font-weight: 400;
   
}
h2{
    font-size: 1.95rem;
    font-weight: 400;
 
}
h3{
    font-size: 1.55rem;
    font-weight: 400;
}
h4{
    font-size: 1.25rem;
    font-weight: 400;
}

h5{
    font-size: 1.15rem;
    font-weight: 400;
}
.h2-color
{
    color: black;
}

.labelh5
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
}
.faqTitle img{
width: 5%;
  display: inline;
}


.faqTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 2rem; 
}

body.reg-light-background {
	background-color: #f4f5fa !important;


}



#accordion {
    max-width: 800px; 
    margin: 0 auto;   
    width: 100%;      
}

.nait-title-wrapper h1
{
    font-size: 2.55rem !important;
    font-weight: 400 !important;
}

ol.breadcrumb {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #fff !important;
  border-radius: .25rem;
  margin-top: 0;
  align-items: center;
}
ol.breadcrumb a
{
    color: #000 !important;
    font-size: 14px !important;
}

ol.breadcrumb li.breadcrumb-item.active {
  color: #000 !important;
  font-size: 14px !important;

}



.btn-nait{
    width: 100%;
    border-radius: 2rem;
    height: 60px;
    font-size: 1.25rem;
    background-color: #002D71;
    color: azure;
}

.btn-nait:hover{
    background-color: #ffffff !important;
    transition: translateX(-50%) .6s;
    transform-origin: 50% 50% 0px;
    color: #002D71 !important;
    border: 1px solid #002D71 !important;
}

.btn-nait-outline{
    width: 100%;
    border-radius: 2rem;
    height: 60px;
    font-size: 1.25rem;
    color: #002D71;
    border: 1px solid #002D71;
}

.btn-nait-outline:hover{
    transition: .6s;
    color: #ffffff;
    background-color: #002D71;
    border: none;
}


.btn-nait-disabled,
.btn-nait-disabled:hover {
  background-color: #dddddd !important;
  color: #bbb !important;
  border: 1px solid #bbb !important;
  cursor: not-allowed;
}


/* --- VIEW CART BUTTON (Outline Style) --- */
#basket_sidebar_subtotal .basket_sidebar_link_basket a.btn-primary {
    width: 95% !important;
    border-radius: 2rem !important;
  
    font-size: 1.25rem !important;
    color: #002D71 !important;
    border: 1px solid #002D71 !important;
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: .6s;
}

#basket_sidebar_subtotal .basket_sidebar_link_basket a.btn-primary:hover {
    color: #ffffff !important;
    background-color: #002D71 !important;
    border-color: #002D71 !important;
}

/* --- CHECKOUT BUTTON (Solid Style) --- */
#basket_sidebar_subtotal .basket_sidebar_link_checkout a.btn-primary {
    width: 95% !important;
    border-radius: 2rem !important;
  
    font-size: 1.25rem !important;
    background-color: #002D71 !important;
    color: azure !important;
    border: 1px solid #002D71 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .6s;
}

#basket_sidebar_subtotal .basket_sidebar_link_checkout a.btn-primary:hover {
    background-color: #ffffff !important;
    color: #002D71 !important;
    border: 1px solid #002D71 !important;
 
}



img.nait-cloth-thumbnail {
  width: 65%;               /* or a fixed size, e.g. 144px */
  aspect-ratio: 1 / 1;      /* force the DIV to be a square */
  background: #f6f6f6;
  border-radius: 44px;
  object-fit: contain;       /* keep the image’s inherent ratio inside that square */
  display: block;    
}

img.nait-cloth-img
{ 
    width: 100%;
    aspect-ratio: 1 / 1;      /* force the DIV to be a square */
    background: #f6f6f6;
    border-radius: 44px;
    object-fit: contain;       /* keep the image’s inherent ratio inside that square */
    display: block; 
}

.nait-color-size
{
  width: 62px;          
  height: 62px !important;          
  line-height: 57px;
  border-radius: 50%;    
  text-align: center;
  font-size: 16px; 
  color: #002d71 !important;
  background-color: #fff !important; 
  border: 1px solid #002d71;
  transition: background-color 0.2s ease-in-out;
  display: inline-flex;      
  align-items: center;     
  justify-content: center;
  white-space: nowrap;

}

a.nait-color-size:not([style*="not-allowed"]):hover {
    background-color: #e6e6ef !important;
}

.nait-product-desc{
   line-height: 1rem;
   font-size: 14px;
}
.nait-product-desc-item{

   font-size: 14px;
}
/* make ONLY the first card row taller on the homepage */
.esolution-view-container .row.nospace-row.theme-arrow-view:first-of-type .card{
    min-height: 31.25rem !important;
}
.row.nospace-row .card {
    border-radius: 44px !important;
}

.nait-form-control
{
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #002d71;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px #002d71 solid;
    
}
.nait-form-control-radius
{
    border-radius: 44px !important;
}

.nait-catalogue-border
{
    border-radius: 44px;
    
}

.stock-location
{
    font-size: 12px;
}

.stock-location-space
{
    margin: 0 5px;
}


.nait-item-text
{
    font-size: 0.75em;
}


.item-description-html {
    margin-top: 1.5rem;
    

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5; 
    -webkit-box-orient: vertical;
    

    max-height: 120px; 
}

.catalogue-carousel .carousel-track
{
    padding-bottom: 50px;
}

.catalogue-carousel .carousel-card .title
{
  color: #002968 !important;
  text-decoration: none;
font-size: 1rem !important;
  font-weight: bold;
  padding: 0px 3rem;

}
.catalogue-carousel .carousel-card .catalogue_carousel_thumbnail_title:hover {
    text-decoration: none !important;
}

.catalogue-carousel .carousel-card:hover .title {
    color: #00A0DF !important;
}

.catalogue-carousel {
    padding-bottom: 40px !important;
}

.catalogue-carousel .carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0 !important;
}

.item-description-html a {
    color: #007bff;
    text-decoration: underline;
}
.item-description-html p {
    margin-bottom: 0.5rem;
}
.item-description-html ul, .item-description-html ol {
    padding-left: 20px;
    margin-bottom: 0.5rem;
}
.nait-price
{
 font-size: 1.5em;
 color: black;
}

.esolution-view.esolution-view-container.arrow-view-container .row .columns .card.h-full {
  height: clamp(180px, 35vw, 350px) !important;
  min-height: clamp(180px, 35vw, 350px) !important;
  max-height: clamp(180px, 35vw, 350px) !important;
}

.esolution-view.esolution-view-container.arrow-view-container .row .columns .card.h-half {
  height: clamp(90px, 17.5vw, 175px) !important;
  min-height: clamp(90px, 17.5vw, 175px) !important;
  max-height: clamp(90px, 17.5vw, 175px) !important;
}

.esolution-view.esolution-view-container.arrow-view-container .row .columns .card.h-third {
  height: clamp(60px, 11.67vw, 116.67px) !important;
  min-height: clamp(60px, 11.67vw, 116.67px) !important;
  max-height: clamp(60px, 11.67vw, 116.67px) !important;
}


section.primary-navigation .navbar-collapse.arrow-sticky-at-top {
  display: flex !important;
}

.card-headline, .card-body-text 
{
    color: #000;
    padding-left: 5px;
   
}
.card-headline
{
    font-size: 38px !important;
    padding-top: 5rem;
}
.card-body-text
{
    font-size: 17px !important;
}
.theme-arrow-view .card.grey
{
    background-color: #f2f2f2;
}

.card-body
{
    padding: 15px;
}

.arrow-slider-image-cover {
    object-fit: contain !important;
}

/* setting up a custom height for lg-3 cards on desktop*/
.esolution-view-container .row.nospace-row.theme-arrow-view > .columns.col-lg-3 .card{
    min-height: 360px !important;
}

@media screen and (max-width: 768px){
        .jumbotron-style {
                background-size: 100% auto !important;
                padding-bottom: 0px !important;
        }
        .arrow-hero-banner{
                margin-top: -128px !important;
        }
}



/************************* OVERRIDES ***************/
:root {
  --bs-ratio: 0.9125; /* 1460 ÷ 1600 */
}

/* 2) Re-scale each container size */
@media (min-width: 576px) {
  .container, .container-sm {
    /* 576px * 0.9125 ≈ 525.6px */
    max-width: calc(576px * var(--bs-ratio));
  }
}

@media (min-width: 768px) {
  .container, .container-md {
    /* 768px * 0.9125 ≈ 700.8px */
    max-width: calc(768px * var(--bs-ratio));
  }
}

@media (min-width: 992px) {
  .container, .container-lg {
    /* 992px * 0.9125 ≈ 905.2px */
    max-width: calc(992px * var(--bs-ratio));
  }
}

@media (min-width: 1200px) {
  .container, .container-xl {
    /* 1200px * 0.9125 = 1095px */
    max-width: calc(1200px * var(--bs-ratio));
  }
}

@media (min-width: 1600px) {
  .container {
    /* 1600px * 0.9125 = 1460px */
    max-width: calc(1600px * var(--bs-ratio)) !important;
  }
}

/* 3) (Optional) If you need a .container-xxl utility: */
@media (min-width: 1600px) {
  .container-xxl {
    width: 100%;
    max-width: calc(1600px * var(--bs-ratio));
  }
}
.theme-arrow-view .card {
    margin-top: auto;
    margin-right: 0;
    margin-left: 0; 
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  
    padding-right: 5px;
    padding-left: 5px;
}

.pd20px
{
    padding-left: 20px;
}

.pd10px
{
    padding-left: 10px;
}

.pd10toppx
{
    padding-top: 10px !important;
}

.pricemarginb0

{
    margin-bottom: 0 !important;
}

.mr10px
{
    margin-right: 10px;
}

.ml10px
{
    margin-left: 10px;
}

#basket_sidebar.active
{
    z-index: 1000;
}

.arrow-view-catalogue .row > .col-12.col-md-6.col-lg-4 {
    padding-left: 15px;
    padding-right: 15px;
}

body section#ecommerce_bar li.nav-item > a.nav-link.dropdown-item:hover {
    background-color: #f2f2f2 !important;
  
}/* Grid Card & Front Page Styling */

/* Center items in grid row */
.row.g-3s {
    justify-content: center !important;
}

/* Flex columns for equal card heights */
.row.g-3s > div[class*="col-"] {
    display: flex;
}

.gridcard {
    border-radius: 44px !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    transition: box-shadow 0.3s ease-in-out !important;
}

.gridcard:hover {
    /* Navy brand tint shadow */
    box-shadow: 0 12px 24px rgba(0, 44, 91, 0.12) !important; 
}

/* Gradient overlay */
.gridcard::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; 
    background: linear-gradient(to bottom, transparent 0%, #172854 100%);
    pointer-events: none; 
    z-index: 1;
}

/* Content positioning over gradient */
.gridcard-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2; 
    padding-bottom: 15px; 
}

.gridcard-text {
    color: #ffffff !important;
    text-align: center;
}

section#ecommerce_bar .navbar {
    padding-top: 5px !important;
}

.site-logo {
    padding-top: 15px;
}

/* NAIT Infoblock Grid & Typography */
.row.g-3s {
    justify-content: center;
    margin-bottom: 25px;
}

.infoblock {
    flex: 0 1 290px;
    margin: 0 15px;
    padding: 15px 20px;
    text-align: center;
}

.infoblock h2::before,
.infoblock h3::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
    color: #004b87;
    font-size: 1.1rem;
    display: inline-block;
}

.infoblock:nth-child(1) h2::before,
.infoblock:nth-child(1) h3::before {
    content: "\f059";
}

.infoblock:nth-child(2) h2::before,
.infoblock:nth-child(2) h3::before {
    content: "\f013";
}

.infoblock:nth-child(3) h2::before,
.infoblock:nth-child(3) h3::before {
    content: "\f5a0";
}

.infoblock h2, 
.infoblock h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.3;
    color: #212529 !important;
}

.infoblock a {
    color: #0070c0 !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease-in-out, text-decoration 0.2s;
}

.infoblock a:hover {
    color: #004b87 !important;
    text-decoration: underline !important;
}

.infoblock p, 
.infoblock strong {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    font-weight: normal !important;
    color: #555 !important;
    display: block;
    line-height: 1.4;
}




/*
 * ===================================================================
 * MOBILE RESPONSIVE SCALING FOR ARROW CARDS
 *
 * This block overrides the fixed desktop height on screens narrower
 * than 768px and applies a proportional aspect ratio.
 * ===================================================================
 */
@media (max-width: 767.98px) {


  .esolution-view.esolution-view-container.arrow-view-container .row .columns .card.h-full {
    height: initial !important;
    min-height: initial !important;
    max-height: initial !important;
    position: relative; /* This is the anchor for the children */
  }


  .esolution-view.esolution-view-container.arrow-view-container .row .columns .card.h-full::before {
    content: '';
    display: block;
    /* --- Choose your mobile aspect ratio --- */
    /* padding-top: 100%; */   /* 1:1 Square - often best for mobile */
    padding-top: 75%;    /* 4:3 Standard */
    /* padding-top: 56.25%; */ /* 16:9 Widescreen */
  }


  .esolution-view.esolution-view-container.arrow-view-container .row .columns .card.h-full > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

}


/* Footer */

.footer_title a, h5 {
    color: #000 !important;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    padding: 0 3rem;
}

.arrow--site-footer{
    padding-bottom: 0px;
}

.arrow--site-footer li.nav-item > a.nav-link {
    font-size: 0.8rem;
    padding: 0px;
    text-decoration: none; 
    border-bottom: 5px solid transparent; 
    transition: color 0.3s, border-bottom 0.3s; 
    color: #000 !important;
}

.footer-campus-services a {
    color: #000 !important;
    font-size: 14px;
}


.footer-campus-services
{
    background: #0c1e4d;
}

.footer-bottom-bar{
  background-color: #999;
  color: #000;
}
.footer-bottom-bar a
{
    color: #000;
    font-size: 12px;
}

.legal-links a,
.powered-by a,
a.powered-by
{
    color: #000 !important;
}
/* --- Google Calendar Widget Styles --- */

/* Main container for positioning */
.gcal-widget-container {
    position: fixed;
    z-index: 1000;
}

/* Position helper classes */
.gcal-widget-container.position-bottom-right {
    bottom: 20px;
    right: 20px;
}
.gcal-widget-container.position-bottom-left {
    bottom: 20px;
    left: 20px;
}
.gcal-widget-container.position-top-right {
    top: 20px;
    right: 20px;
}
.gcal-widget-container.position-top-left {
    top: 20px;
    left: 20px;
}

/* The floating action button (FAB) */
.gcal-widget-fab {
    display: flex;
    align-items: center;
    color: black;
    background-color: white;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none; /* Prevents text selection on click */
}


/* The status indicator icon */
.gcal-status-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

/* Status Colors */
.gcal-status-icon.status-closed { background-color: #e74c3c; /* Red */ }
.gcal-status-icon.status-open { background-color: #2ecc71; /* Green */ }
.gcal-status-icon.status-closing-soon { background-color: #f39c12; /* Orange */ }
.gcal-status-icon.status-opening-soon { background-color: #f1c40f; /* Yellow */ }

.gcal-status-text {
    font-weight: bold;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

/* The panel that shows the weekly hours */
.gcal-widget-panel {
    position: absolute;
    bottom: calc(100% + 10px); /* Position above the FAB */
    right: 0;
    width: 320px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    padding: 15px;
    
    /* Hide by default */
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.gcal-widget-container.position-custom-top-80 {
    /* 40px from the top of the screen */
    top: 20px;    
    
    /* Start the widget's left edge at 80% across the screen */
    left: 75%;    
    
    /* This is a magic trick: it shifts the widget left by half its own width,
       perfectly centering it on the 80% mark. */
    transform: translateX(-50%); 
}


/* Adjust panel position for top-placed widgets */
.gcal-widget-container.position-top-right .gcal-widget-panel,
.gcal-widget-container.position-top-left .gcal-widget-panel,
.gcal-widget-container.position-custom-top-80 .gcal-widget-panel {
    bottom: auto; 
    top: calc(100% + 10px); 
}

/* Adjust panel alignment for left-placed widgets */
.gcal-widget-container.position-bottom-left .gcal-widget-panel,
.gcal-widget-container.position-top-left .gcal-widget-panel {
    right: auto;
    left: 0;
}


/* Show the panel when FAB is active */
.gcal-widget-panel.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.gcal-widget-panel h4 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #333;
}

/* Styling for the generated hours table */
.gcal-hours-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

.gcal-hours-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
}

.gcal-hours-table td:first-child {
    font-weight: 600;
    color: #333;
    width: 100px; /* Give days a fixed width */
}

.gcal-hours-table tr:last-child td {
    border-bottom: none;
}


/* --- Helper class to prevent flash of unstyled content --- */
.nait-visibility-hidden {
    visibility: hidden;
}

/* --- Styles for the restructured page header --- */
.course_search_heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.course_search_heading h4 {
    margin-bottom: 0;
    color: #000;
}

/* --- Styles for "Required/Alternative" and "Search Again" tags --- */
.nait_course_item_status {
    font-size: 0.9rem;
    font-weight: 400;
    color: #0f2c6d !important;
    vertical-align: middle;
    margin-left: 10px;
    border: 1px solid #0f2c6d;
    padding: 2px 8px;
    border-radius: 44px;
    text-decoration: none !important; /* Remove underline from links */
    display: inline-block;
    transition: background-color 0.2s, color 0.2s; /* Smooth transition */
}

/* --- Add a hover effect specifically for the link to show it's clickable --- */
#search_again_link.nait_course_item_status:hover {
    background-color: #002D71;
    color: #fff !important;
    border-color: #002D71;
}


/* --- Styles to disable jQuery UI accordion hover/focus effects --- */
.accordion_h3.ui-state-hover,
.accordion_h3.ui-state-focus {
    background: none !important;
    border-color: transparent !important;
}

/* --- Styles for the new H1 item title --- */
.nait-title-wrapper h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-transform: uppercase !important;
}

.course_item_new_buy .course_item_title {
    display: none;
}

.ui-widget-content {
  border: none !important;
  background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
  color: #222222;
}

.course_item_image {
	width: 100% !important;
	height: 100% !important;
	min-width: 150px;
	border: none;
	margin: 0 auto;
	text-align: center;
	float: none !important;
}

.nait-metadata-line > div {
    display: inline;
    padding-right: 5px; 
}

.text-dark H2{
    text-transform: uppercase !important;
  
}

.course_header
{
    margin-bottom: 2em !important;
}

.ui-accordion .ui-accordion-content {
  padding-left: 0 !important;
  border-top: 0;
  overflow: auto;
}

.course_item_image img {
    padding-top: 10px; 
}

form[name="cti_buy"] button.course_button_inCart {
    background-color: #636f7f !important; /* A standard Bootstrap primary blue */
    border-color: #636f7f !important;     /* Important to change the border too! */
}

ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 1rem;
}


.primary-navigation .dropdown-menu {
  
    position: fixed !important;
    z-index: 1050;

  
    width: 1450px !important; /* Desired large screen width */
    max-width: 100vw !important; /* CRITICAL: Use 'vw' (viewport width) for 100% of the viewport, overriding any parent constraint. */


    left: 50% !important; /* Move the left edge to the center of the viewport */
    transform: translateX(-50%); /* Move the element back by half of its own width */

    
    top: 54px; /* Adjust this value to sit perfectly under your fixed header */

 
    right: auto !important; /* Ensure 'right' doesn't conflict with centering */
    padding-left: 0;
    padding-right: 0;
   
    margin: 0 !important;
}

/* Course Search styling */

/* 1. Hide the actual radio circle */
.arrow_radio_buttons .form-check-input {
  display: none;
}

/* 2. Style the label to look like your nait-color-size button */
.arrow_radio_buttons .form-check-label {
  width: 62px;
  height: 62px !important;
  line-height: 57px;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  color: #002d71 !important;
  background-color: #fff !important;
  border: 1px solid #002d71;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  margin: 0; /* Reset bootstrap margins */
}

/* 3. Hover state */
.arrow_radio_buttons .form-check-label:hover {
  background-color: #e6e6ef !important;
}

/* 4. "Selected" state - when the hidden radio is checked */
.arrow_radio_buttons .form-check-input:checked + .form-check-label {
  background-color: #002d71 !important;
  color: #fff !important;
}

/* 5. Layout adjustment for the list items */
.arrow_radio_buttons li.form-check-inline {
  padding: 0 10px 10px 0;
  margin-right: 0; /* Overriding default Bootstrap inline margin */
}
/* =========================================
   1. MAIN BUY BUTTON (With Injected Icon)
   ========================================= */
.course_item .cti_buy_button {
    /* Layout & Alignment (Flex is best for icon + text) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Visual Style */
    background-color: #002D71 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 2rem !important;
    
    /* Sizing */
    height: 60px !important;
    width: 100% !important;
    max-width: 300px;
    margin-top: 10px !important;
    
    /* Typography */
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Hover State */
.course_item .cti_buy_button:hover {
    background-color: #001d4a !important;
}

/* Inject the Shopping Cart Icon before the text */
.course_item .cti_buy_button::before {
    content: "\f07a";                 /* FontAwesome Cart Icon */
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900;                 
    margin-right: 10px;               
    font-size: 1.2rem;                
}

/* =========================================
   2. QUANTITY INPUT FIELD
   ========================================= */
.course_item input[name="qty"] {
    height: 60px !important;
    border-radius: 2rem !important;
    text-align: center !important;
    border: 1px solid #ced4da !important;
    width: 80px !important;
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
    display: inline-block !important; /* Ensures it sits above/near button */
}

.course_item label[for="qty"] {
    font-weight: bold;
    margin-right: 10px;
}

/* =========================================
   3. SECONDARY BUTTON (Already has icon in HTML)
   ========================================= */
#arrow_buy_button_new,
.es_buy_button {
    background-color: #002D71 !important;
    border-color: #002D71 !important;
    color: #ffffff !important;
    border-radius: 2rem !important;
    height: 60px !important;
    width: 100% !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: background-color 0.2s ease;
}

#arrow_buy_button_new:hover,
.es_buy_button:hover {
    background-color: #001d4a !important;
}

#arrow_buy_button_new i,
.es_buy_button i {
    font-size: 1.2rem !important;
}