/* Created by JN for Umb13 deployment; Oct 2025 */


/* FLBS 2025 colors */
.bg-flbs-teal {background-color: #006d6f}
.flbs-teal {color: #006d6f}

.div-br {
    background-image: linear-gradient(105deg, #2b5134 34.9%, transparent 80%);
    content: '';
    display: block;
    height: 1em;
    margin-bottom: 1.25em;
    margin-top: 1em;
    width: 50%;
}

/* Kimbia styles */
.groupLabel:first-of-type, .k_question label:first-of-type {
    font-size: 2rem !important;
    color: #006d6f; /* #2f7590;*/
    font-weight: bold;
}
.k_questionBlock div input[type="radio"] {
    appearance: auto !important;
    transform: scale(1.5); /* Increases size by 50% */
    -ms-transform: scale(1.5); /* For IE 9 */
    -webkit-transform: scale(1.5); /* For Chrome, Safari, Opera */
}
.k_questionBlock div input[type="text"], .k_questionBlock div select {
    min-height:40px
}

/* Hidden (until all fields completed) card detail fields */
#_payment.accountNumber_1 input {
    min-height:40px
}

.k_button {
    color: white;
    background-color: #006d6f; /* #2f7590;*/
    min-height:40px;
    min-width:120px;
}

.k_buttonBlock, .k_buttonBlock td  {border: 0}

/* Homepage mods/overrides */
/* Uskn Windows Title Bkg Color */
#site-content > section.content.component.usn_cmp_windows.base-bg.base-bg-solid > div > div > div.component-main.row.listing.listing_window-mosaic.big-window-first.windows-4 > div > div > div.info.text-left.align-self-center.justify-content-center > p {
    background-color: rgb(221,221,221, .5);
    border-radius:4px;
    padding:6px 4px;
}

#site-content > section > div > div > div > div > div > div.info.text-left.align-self-center.justify-content-center > p {
    background-color: rgb(221,221,221, .7);
    border-radius:4px;
    padding:6px 4px;
}

#site-content > section.content.component.usn_cmp_windows.base-bg.base-bg-solid > div > div > div > div > div > a > div.info.text-left.align-self-center.justify-content-center > p {
    background-color: rgb(221,221,221, .7);
    border-radius:4px;
    padding:6px 4px;

}
/* Banner image heading and subheading */
#site-content > section.content.component.usn_cmp_banner.base-bg.base-bg-solid > div > div > div.inner > div > div > div {
    /*background-color: rgb(51,51,51, .2);*/
    border-radius:4px;
    padding:6px 4px;
    max-width:fit-content;
    margin:auto;

}

/* Usk override for component spacing */
/*@media (min-width: 768px) {
    section.content:not(.usn_cmp_banner):not(.usn_cmp_breadcrumb) {
        padding: 1.5rem !important;
    }
}*/

/* Header override for Page Titles (appearing in header, overlapping logo...) */
#site-content > section.content.base-bg.pb-0 > div > div > div > h1 {
    margin-top:90px !important;
}

/* Donations page Fund Option hover effect */
.flbs-fund {
  transition: all 0.3s ease;
}
.flbs-fund:hover {
transform: scale(1.05);
}
.flbs-fund a {background-color: #006d6f; color: #eeeeee;}
.flbs-fund a:hover {background-color: #006d6f; color: #cccccc; text-decoration:underline !important}

/* Card title styles */
.card-title-1 {font-size:1.5rem}
.card-title-2 {font-size:1.25rem}
.card-title-3 {font-size:1.125rem}
.card-title-4 {font-size:1rem}


/* Override scrollbars on image hover - blog listing; others? */
div.image {overflow: hidden !important;
}

/* Allow iframe video to fill containing DIV */
.video-container {
  position: relative; /* Allows absolute positioning of the iframe within */
  width: 100%; /* Makes the container take full width of its parent */
  padding-top: 75%; /* This creates the 16:9 aspect ratio (9/16 = 0.5625) */
  /* For a 4:3 aspect ratio, use padding-top: 75%; (3/4 = 0.75) */
  overflow: hidden; /* Hides any content that goes outside the container */
}

.responsive-iframe {
  position: absolute; /* Positions the iframe relative to the container */
  top: 0;
  left: 0;
  width: 100%; /* Makes the iframe fill the container's width */
  height: 100%; /* Makes the iframe fill the container's height */
}

/* Don't hide images throughout site */
.image {overflow:auto !important;}


/* FLBS RTEditor styles 
    Note: must also edit appsettings.json to add these classes to the RTEditor allowed classes
*/
.list-style-none {list-style-type:none}

/* FLBS always show pdf icon after a pdf link */
a[href$=".pdf"] {position: relative;padding: 4px; max-width:600px; display:inline-block; vertical-align:middle; align-items:center; transition: all 0.3s ease;}
a[href$=".pdf"]:hover {transform: scale(1.05);}
a[href$=".pdf"]::after {content: ""; display: inline-block;  width: 30px; height: 30px; background: url('icons/64px-PDF_file_icon.png') no-repeat center right; background-size: contain;margin-left: 5px;vertical-align: middle; }

.flbs-image-450-float-right {width: 300px; float: right; margin: 10px 0 30px 30px;}
.flbs-image-450-float-left {width: 300px; float: left; margin: 10px 0 30px 30px;}
.flbs-image-450-center {width: 300px; text-align:center; margin: 10px 30px;}