/* Limit width for specific column in the confirmation view */
.view-col-list {
  max-width: 200px;           /* Adjust to fit your layout */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zeffy one time and monthly tabs */
.MuiTabs-root.css-kszcw7 {
    display: none !important;
}

/* Archive box style */
.archive {
  background-color: #3298b6;
  border: none;
  color: #fff; /* default text color */
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: flex;
  font-size: 20px;
  margin: auto;
  border-radius: 12px;
  justify-content: center;
  width: 375px;
  transition: background-color 0.3s ease; /* optional smooth hover effect */
}

/* Archive links inherit white color */
.archive a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease; /* smooth color transition */
}

/* Archive link hover/focus override */
.archive a:hover,
.archive a:focus,
.archive .link:hover,
.archive .link:focus {
  color: #ffe576 !important; /* yellow hover color */
}

/* Optional: make the entire archive box clickable with hover effect */
.archive:hover {
  background-color: #2b86a1; /* slightly darker on hover */
  cursor: pointer;
}


.responsive-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
#block-bbd-5-5-12-profile ul.clearfix.nav {
    display: flex;
    flex-direction: column;
}
form#webform-submission-covenant-node-3138-add-form {
    background: #eee;
    padding: 30px;
}
div#covenant {
    margin: 0 40px;
    border: 1px #ccc sol
    padding: 20px;
}
div#col3c {
    background-color: #eee;
    padding: 20px 0 10px 0;
}
div#col3a {
    background-color: #E5E5E5;
    padding: 20px 0 10px 0;
}
div#col3b {
    background-color: #DEDEDE;
    padding: 20px 0 10px 0;
}
div#col4 {
    padding: 20px 0 10px 0;
    background-color: #D6D6D6;
}
div#olivia {
    display: flex;
    justify-content: space-between;
}

form#commerce-order-item-add-to-cart-form-commerce-product-49 {
    max-width: 400px;
}
div#pledgeoptions {
    padding: 20px;
    background-color: #E6F5FE;
    border: 1px solid #000;
}
input#edit-field-donation-for-none {
    display: none;
}
label.form-check-label[for=edit-field-donation-for-none] {
    display: none;
}
.view-services-list .views-row {
	margin-bottom: 30px;
}
#navbar-top {
    background-color: #fff;
}
#navbar-main {
    background-color: #3298B6;
}
.nav-link {
    color: #000;
}
.region-top-header-form .content {
    display: flex;
    justify-content: flex-end;
    padding-right: 7px;
}
.region-top-header-form .nav-link {
    color: #2f8bc1;
}
.view-events .views-field.views-field-view-node {
	padding-bottom: 20px;
}
.btn {
	color: #fff;
	background-color: #3298B6;
}
.caption > figcaption {
	text-align: center;
    font-style: italic;
}
.colcontainer_header {
  display: flex;
  flex-wrap: wrap;
  text-align:left;
}
.colcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align:center;
}
#edit-login-register-profile-0-format, #edit-login-register-profile-lname-0-format, #edit-login-register-name--description, #edit-login-register-password--description {
	display: none;
}
.region-top-header-form .nav {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	justify-content: flex-end;
}

#navbar-main {
   border-bottom: 20px solid transparent;
   border-image: url('/sites/default/files/nav.png') 0 0 20 0 round;
}
#block-bbd-barrio-account-menu .nav-link {
    padding: 0 .3rem;
}
nav#block-bbd-barrio-account-menu, div#block-cart {
    display: flex;
    justify-content: end;
}
#navbar-top {
    border-top: 15px solid #1D443C;
    padding:10px 0;
}
#footer {
   border-top: 20px solid transparent;
   border-image: url('/sites/default/files/nav.png') 20 0 0 0 round;
}
.view-services .views-field.views-field-title, .views-field.views-field-field-individual {
    padding-left: 12px;
}
.views-field.views-field-field-date4 {
    font-weight: 700;
}
.donate {
    display: flex;
    justify-content: center;
}
.donate a {
    background: #008EE2;
    border-radius: 12px;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none !important;
}
.view-social-justice-collection .views-field-title {
    padding-top: 15px;
}
.view-social-justice-collection {
    margin-bottom: 25px;
}

.region .block h2 {
    background: #3298b6;
    padding: 3px;
    color: #fff;
    font-size: 24px;
    text-align: center;
}
.cart-form .views-field, .checkout-pane .views-field {
    color: #000;
}
.cart-block--contents {background: #ddd}
.region h2.node__title {
    display: none;
}
.node--view-mode-teaser {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 15px;
}

div#main {
    margin-left: auto;
    margin-right:auto;
    padding:20px;
}
.main-content section.section {
    max-width: 800px;
    margin: auto;
}
table tr th, table tr th a, table tr th a:hover, table tr th a:focus {
    color: #000 !important;
    font-weight: bold;
}

.responsiveCal {
    overflow: hidden;
    position: relative;
    width:100%;
}

.responsiveCal::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}
.responsiveCal iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.googleCalendar{
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 75%;
}

.googleCalendar iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.js-form-item.js-form-type-checkbox.checkbox.form-check.js-form-item-unit-price-0-override.form-item-unit-price-0-override {
    display: none;
}
.view.view-social-justice-collection .views-row  {
    margin-bottom: 20px;
    border-bottom: #ccc 1px solid;
    padding-bottom: 20px;
}


.container {max-width: 1180px}
div#page-wrapperl {background-color:#fff}

html, body {
    background: #1d84c3;
}
.navbar {
    padding-top: 0;
    padding-bottom: 0;
}
.navbar-nav a:hover {	border-bottom: 2px solid #fff}
.navbar-nav a, .dropdown-menu li.active>a {color: #fff !important}
.navbar-dark .navbar-nav .nav-link {    color:#fff !important}
.nav-link {    padding: .4rem}
.dropdown-item {
    color: #fff;
    background-color: #3298B6;
}
.dropdown-item.active, .dropdown-item:active,.dropdown-item:focus, .dropdown-item:hover {
    background-color:  #3298B6;
}
section.region-footer {  border-top: none}

.dropdown-item a {text-decoration:none}
.dropdown-menu {
    background-color: #3298B6;
}
.navbar-collapse, .justify-content-end {
    justify-content: flex-start !important;
}
.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
    align-items: flex-start;
}


.flexcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align:center;
}
.flexcontainer img {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
}
/** Hero and flexslider */
.region-hero .node__content {
    margin-top: 0;
}
.region-hero img {
    max-height: 500px;
    height: auto;
    width: 100%;
    max-width: 100vw;
    margin:0;
}
.node--type-hero .node__content {
    font-size: .8em;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}

.region-hero .flexslider .slides > li {
    display: flex!important;
    justify-content: center;
    align-items: center;
    font-size: 3.2vmax;
    flex-flow: column;
    color: #fff;
    background: radial-gradient(black, transparent);
}
.region-hero li.flex-active-slide {
    display: flex;
    justify-content: center;
    align-content: center;
    width:auto;
}



.region-hero .flexslider {
    margin: 0 0 0px;
    border: 0;
}
.flexslider {margin: 0}

.flexslider .slides img, .flex-control-thumbs img {
     max-width: 100%;         /* Scales down with parent container */
  height: auto;            /* Keeps aspect ratio */
  max-height: 500px;       /* Limits height */
  object-fit: contain;
}
#flex-slider-1{
 display: flex;              /* Enables flex centering */
  align-items: center;        /* Vertical centering */
  justify-content: center;    /* Horizontal centering */
  max-height: 500px;          /* Restrict container height */
  overflow: hidden;
}
.flex-control-nav li {padding: 10px}
ol.flex-control-nav.flex-control-thumbs {
    padding-top: 35px;
}
.flex-direction-nav a {
    display: block;
    width: 40px;
    height: 40px;
    margin: -20px 0 0;
    position: absolute;
    top: 40%;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color: #fff;
    background-color: #000;
    border-radius: 50%;
    text-align: center;
}
.flex-direction-nav a:before {
    font-family: "flexslider-icon";
    font-size: 20px;
    display: inline-block;
    content: '\f001';
    color: #FFF;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    line-height: 40px;
}
.flex-direction-nav .flex-next {
    right: -50px;
    text-align: center;
}
.flex-caption {
    text-align: center;
    font-style: italic;
    font-size: large;
}



/** Hero and flexslider end  */

span.img.left {float:left; margin: 0 20px 20px 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
span.img.right {float:right; margin: 0 0 20px 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
span.img.fullshadow  {box-shadow: 0 2px 10px rgb(0, 0, 0, 0.5)};
span.img.padding {padding: 10px}
span.img.auto {width: auto}

.feed-icon {display:none}


#fullrowfirst {
    background: #eee;
    padding: 20px 0;
    display:flex;
    justify-content: space-evenly;
}

.region-footer .node__title, .region-hero .node__title {
    display: none;
}
.site-footer, .footer {
    background: transparent !important;
    padding:0 !important;
}
.site-footer__bottom {
    margin-top: 0;
}
section.region-footer {
  background-color:transparent;
  color:#fff;
  padding-top: 15px;
}
.region-footer a {color:#fff}
.bb, .bb a {
  font-size:10px;
  color: #fff;
}
#footer {
    border-top: 20px solid transparent;
    border-image: url('/sites/puc/files/nav.png') 20 0 0 0 round;
}
img.left {float:left; margin: 0 20px 20px 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
img.right {float:right; margin: 0 0 20px 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
img.boxshadow  {box-shadow: 0 2px 10px rgb(0, 0, 0, 0.5)};
img.padding {padding: 10px}
img.fullwidth {width: 100%; height:auto}


.col1_header {
    padding-right: 20px;
}
.col2_header {align-self: flex-end;}
#col2_container .row {--bs-gutter-x: 0}
.col3c_header, .col3a_header, .col3b_header {
	flex-grow: 5;
	text-align: right;
}
.region-col2-first {padding-right: 15px}
div#col2_container,div#col3c_container,div#col3a_container,div#col3b_container, div#col4_container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#col3c img, #col3a img, #col3b img,#col4 img {
  width:100%;
  height: auto;
}
#col3c .node__content a, #col3a .node__content a, #col3b .node__content a {color: #000}

#col3c article, #col3a article, #col3b article {  padding: 0 10px}
#col3c h2.node__title, #col3a h2.node__title, #col3b h2.node__title {
    display: none;
}

#col4 .row {--bs-gutter-x: 1rem}

#fullrowzero .node__title, #fullrowsecond .node__title {display:none}
#fullrowzero, #fullrowsecond {padding:20px 0}
.region-featured-bottom-second h2.node__title {
    display: none;
}


@media (min-width: 576px)  {
.region-col2-first {
  padding-right: 15px;
  width:66%;
}
.region-col2-second {
    width: 33%;
}
}
@media (min-width: 576px)  {
  .region-col4-first, .region-col4-second, .region-col4-third, .region-col4-fourth  {    width:50%}
}
@media (min-width: 768px)  {
  .region-col3c-first, .region-col3c-second, .region-col3c-third, .region-col3a-first, .region-col3a-second, .region-col3a-third, .region-col3b-first, .region-col3b-second, .region-col3b-third {width:33.33%}
}
@media (min-width: 992px)  {
  .region-col4-first, .region-col4-second, .region-col4-third, .region-col4-fourth  {    width:25%}
}