/******************Weglot***********************************/

/*Restrict form width to remain within parent container 
   - form set to cover full width of pg. (used for translation purposes)*/
   .guideContainerNode {
    max-width: 100%;
}
/*WeGlot Keyboard Focus*/
.wg-drop.wg-mouse-click>div:focus 
{ 
    outline: 3px solid #1CA6DF; 
}

/********************** GLOBAL *******************************/
/* Set Global Header/Footer Color */
.cmp-global-header, .cmp-global-footer {
    background-color: #056c89;
}

/* Agency Logo Sizing */
.cmp-agency-header__logo {
    height: 3.5rem;
    width: auto;
}

/* Removes width restraints on text components */
.cmp-text {
    max-width: 100%;
    color:red;
}

/* Centers Text in Container */
.text-center {
    text-align: center !important;
}

/* Set attributes for color bar above H1 title text */
.title .cmp-title h1::before {
    width: 5.9375rem;
    content: " ";
    height: .375rem;
    position: absolute;
    top: 0;
    left: 0;
}

/* Set color of bar above H1 Title here */
.title h1::before {
    background-color: green;
    /* Uncomment the code below to remove the bar above the h1 title */
    display: none;
}

/* Set color of border for event date icon */
.cmp-news-feed__event-date {
    border: 1px solid #C3371E;
}
/* Set Button Color */
.btnFrontPage {
  width: 90%;
  border-left: 10px !important;
  border-right: 10px !important;
  border-color: white !important;
  padding-color: white;
  border-style: solid !important;
  text-align: center !important;
}

/* Set color of background for month portion of event date icon */
.cmp-news-feed__event-date__month {
    background: #C3371E;
}

/* Set color of background for year portion of event date icon */
.cmp-news-feed__event-date__year {
    background: #C3371E;
}

/* Agency Logo Sizing MQ */
@media (min-width: 1101px){ 
    .cmp-agency-header__logo 
    {
        height: 5rem;
    }
}

/*****************Online Form Confirmation Screen****************************/

.confirmation-h2 p {
    margin-top: 16px;
    border-top:2px solid #0f87a9 !important;
    font: "Helvetica";
    color: #0f87a9 !important;
    font-size: 29px !important;
    line-height: 45px;
    font-style: italic;
}

.confirmation-h2-dark p {
    font: "Helvetica";
    color: #002244 !important;
    font-size: 29px !important;
    line-height: 45px;
    font-style: italic;
}

.confirmation-footnote p {
    border-top:4px solid #0f87a9 !important;
    font: "Helvetica";
    color: #0f87a9 !important;
    font-size: 18px !important;
    padding-top: 4px;
}

.confirmation-logo {
    width: 33%;
}

.confirmation-width {
    width: 66%;
}

/* Help stop hate text styles */

.title .cmp-title h1 {
    color: #0f87a9;
    font-size: 35px;
    font-style: italic;
    font-weight: 300;
    text-align: left !important;
    border-top: 2px solid #9bd9eb !important;
}

.h1 h1 {
    color: #0f87a9;
    font-size: 35px;
    font: "Helvetica";
    font-style: italic;
    padding-top: 0px !important;
    font-weight: 300;
    border-top: 2px solid #9bd9eb !important;
}

.h2-dark-strong p {
    font: "Helvetica";
    font-size: 29px !important;
    color: #002244 !important;
    font-weight: 4 00 !important;
    line-height: 39px;
    font-style: italic;
}

.h2-dark p {
    font: "Helvetica";
    font-size: 25px !important;
    color: #002244 !important;
    padding-top: 12px;
    line-height: 34px;
    font-style: italic;
}

.h2-light p {
    font: "Helvetica";
    color: #0f87a9 !important;
    font-size: 25px !important;
    line-height: 34px;
    font-style: italic;
}

.h3 p {
    border-top:2px solid #9bd9eb !important;
    font-size: 15px;
    padding-top: 3px !important;
    color: #002244 !important;
    font: "Inter";
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

h3 {
    
    border-top:2px solid #9bd9eb !important;
    font-size: 15px !important;
    color: #002244 !important;
    padding-top: 3px !important;
    font: "Inter";
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.title .small h3 {
    
    border-top:2px solid #9bd9eb !important;
    font-size: 15px !important;
    color: #002244 !important;
    font: "Inter";
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.help-stop-hate-link p {
    color: #0f87a9 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}

.body-text p {
    color: #002244 !important;
    font-family: "Helvetica", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: normal;
}

.body-text2 p {
    color: #002244 !important;
    font-family: "Helvetica", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: normal;
}

.body-text h6 {
    color: #002244 !important;
    font-family: "Helvetica", sans-serif;
    font-size: 23px;
    line-height: 33px;
    font-weight: normal;
}

.body-text-light p {
    color: #0f87a9 !important;
    font-family: "Helvetica", sans-serif;
    font-size: 23px;
    line-height: 33px;
    font-weight: normal;
}

.width {
    max-width: 80%;
}

/*

.help-stop-hate-link {
    width: 30%;
    background-color: #9bd9eb !important;
    color: #0f87a9 !important;
    border-radius: 2px;
    text-transform: uppercase;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

*/

hr.cmp-separator__horizontal-rule {
    border-color: #9bd9eb; /* Sets the border color to the specified light blue */
    border-width: 1px; /* Adjust the border thickness as needed */
}

.needs-rule-top {
    border-top:1px solid #9bd9eb !important;
}

.needs-rule-bottom {
    border-bottom:2px solid #002244 !important;
}

a.needs-rule {
    border-bottom: 2px solid #002244 !important;
}


.hate-callout {
    background-color: rgba(155, 217, 235, 0.3); /* 0.3 is 30% opacity */
}



.help-stop-hate-btn {
    width: 100% !important;
    background-color: #fcb912 !important;
    color: #002244 !important;
    border: 2px solid #002244 !important;
    border-radius: 3px;
    text-transform: uppercase;
    padding: 20px !important;
    text-align: center !important;
    cursor: pointer;
}


#elana-card .text.title.cardTitle {
    font-size: 1.5em; /* Change the font size for the name */
    font-weight: bold; /* Make it bold */
    color: #9bd9eb; /* Change the text color to a dark blue */
    text-transform: uppercase; /* Make the text uppercase */
}

/* Target Elana Kahn's title (description) within the same card */
#elana-card .text.description.cardDescription {
    font-size: 1.2em; /* Change the font size for the title */
    font-style: italic; /* Make it italic */
    color: #333333; /* Change the color to a dark gray */
}