/* Selecter used in the LWC component - nhp_card Start Start */
/*  We want to get rid of selector based styling, its removed from nhp_card. Keeping it for now for any other cmps still using it. */
.card-font-style .slds-rich-text-editor__output > span > h3 > strong {
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-family: "SourceSansPro-Bold";
    font-weight: 700;
}

.card-font-style .slds-rich-text-editor__output > span > h2 > strong {
    font-size: 1.5rem;
    line-height: 2rem;
    font-family: "SourceSansPro-Bold";
    font-weight: 700;
}

.card-font-style .slds-rich-text-editor__output > span > p > strong {
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: "SourceSansPro-Bold";
    font-weight: 700;
}

.card-font-style .slds-rich-text-editor__output > span > p {
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: "SourceSansPro-Regular";
}

.card-font-style .slds-rich-text-editor__output > span > p > a > strong {
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: "SourceSansPro-Bold";
    font-weight: 700;
}
/* Selecter used in the LWC component - nhp_card Start end */

/* Selecter used in the LWC component - nhp_cardAboutOverview Start start */
.card-overview .slds-rich-text-editor__output strong {
	font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-6);
}
/* Selecter used in the LWC component - nhp_cardAboutOverview Start end */


/* Selecter used in the LWC component - nhp_cardEvents Start start */

.card-event .slds-rich-text-editor__output strong {
	font-family: "SourceSansPro-Bold";
}

/* Selecter used in the LWC component - nhp_cardEvents Start end */

/* Selecter used in the LWC component - nhp_cardVideo Start*/
.card-video-link-bold .slds-rich-text-editor__output > span > p > strong {
    color: rgba(3, 100, 142, 1);
    font-family: "SourceSansPro-Bold";
}
/* Added for card video on bold link on Earthquake page*/
.card-video-link-bold .slds-rich-text-editor__output > span > p > a > strong {
    font-family: "SourceSansPro-Bold";
}
/* Selecter used in the LWC component - nhp_cardVideo End*/

/* Selecter used in the LWC component - nhp_cardNaturalHazards   Start*/

.card-natural-hazards-font-style
	.slds-rich-text-editor__output
	 strong {
	font-family: "SourceSansPro-Bold";
	/* color: rgba(0, 0, 0, 1); */
}

.card-natural-hazards-desc-two-font-style
    .slds-rich-text-editor__output
    > span
    > p
    > strong {
    font-family: "SourceSansPro-Bold";
    color: rgba(3, 100, 142, 1);
}

/* Selecter usd in the LWC component - nhp_cardNaturalHazards  End*/

/* Selecter usd in the LWC component - nhp_cmsTextDisplay  Start*/

/* specific selector to show header-4-bold font */
.cms-text-display-font-family-class
    .slds-rich-text-editor__output
    > span
    > h3
    > strong {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-7);
    line-height: 1.5rem;
}

.cms-text-display-font-family-class .slds-rich-text-editor__output strong {
    font-family: "SourceSansPro-Bold";
}

/* Selecter usd in the LWC component - nhp_cmsTextDisplay End*/

/* Selecter used in the LWC component - nhp_card Start ---> Remove standard class styling use custom claases rto style*/
.text-color .slds-rich-text-editor__output > span > p > strong {
    color: rgba(3, 100, 142, 1);
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.625rem;
}

/* Added for card one on earthquake page*/
.text-color .slds-rich-text-editor__output > span > p > a > strong {
    font-family: "SourceSansPro-Bold";
    font-style: normal;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.625rem;
}

/* Added for cardColumndLayout Start*/
.card-column-layout .slds-rich-text-editor__output > span > p > strong {
    color: rgba(3, 100, 142, 1);
    font-family: "SourceSansPro-Bold";
}

.card-column-layout .slds-rich-text-editor__output > span > p > a > strong {
    font-family: "SourceSansPro-Bold";
}

/* Added for cardColumndLayout end*/

/*Selector style added for regional event accordion viewer speciafially.
If it conflicts with any other components, need to tweak accordingly.  */
lightning-formatted-rich-text > span > p > img {
    height: 40px;
}

.card-font-style .slds-rich-text-editor__output > span > h3 {
    font-size: 1.25rem;
    line-height: 1.625;
    font-family: "SourceSansPro-Regular";
    font-weight: 400;
}

/* cardBicolumnTextAndImage Start */

.card-bicolumn-text-image .slds-rich-text-editor__output
strong {
	font-family:"SourceSansPro-Bold";
}

/* card-multi-image styling end */

/******* nhp_tiles styling start ********/
.tiles-font-style .slds-rich-text-editor__output > span > p > strong > u {
    font-family: "SourceSansPro-Bold";
    font-size: 1rem;
    line-height: 1.5rem;
}
/******* nhp_tiles styling end ********/

/* homePageCard- styling start */
.homePageCard .slds-rich-text-editor__output > span > h1 > strong {
    font-family: "Urbane rounded-Demi Bold";
    font-weight: 600;
}

/* homePageCard- styling end */

/*Custom font styling for terms & privacy page start*/

.terms-privacy .slds-rich-text-editor__output
    strong {
    font-family: "SourceSansPro-Bold";
}
.terms-privacy .slds-rich-text-editor__output
    h3 {
    font-size: var(--dxp-g-font-size-8);
    line-height: 2rem;
}
.terms-privacy .slds-rich-text-editor__output
    h4 {
    font-size: var(--dxp-g-font-size-7);
}
.terms-privacy .slds-rich-text-editor__output > span > p > img {
        height: 45px;
}

/*Custom font styling for terms & privacy page end*/

/*custom styling for welcome mat start */
.welcome-mat .slds-rich-text-editor__output > span > p > img {
    height: 40px;
    width: auto;
    padding-right:5px;
    margin-top:5px;
}

/*custom styling for welcome mat end */

/******************************  Typography  utility start *****************************************/

.header-1-demi-bold {
    font-family: var(--dxp-g-heading-font-family);
    font-size: var(--dxp-g-font-size-11);
    line-height: 3.25rem;
}
.header-1-demi-bold .slds-rich-text-editor__output,
.slds-rich-text-editor__textarea {
    line-height: 3.25rem;
}

.header-2-demi-bold {
    font-family: var(--dxp-g-heading-font-family);
    font-size: var(--dxp-g-font-size-10);
    line-height: 2.5rem;
}

.header-2-demi-bold .slds-rich-text-editor__output,
.slds-rich-text-editor__textarea {
    line-height: 2.5rem;
}

.header-2-light {
    font-family: "Urbane rounded-Light";
    font-size: var(--dxp-g-font-size-10);
    line-height: 2.5rem;
}

.header-2-light .slds-rich-text-editor__output,
.slds-rich-text-editor__textarea {
    line-height: 2.5rem;
}

.header-3-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-8);
    line-height: 2rem;
}

.header-3-bold .slds-rich-text-editor__output,
.slds-rich-text-editor__textarea {
    line-height: 2rem;
}

.header-4-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-7);
    line-height: 1.5rem;
}

.header-4-semi-bold {
    font-family: "SourceSansPro-SemiBold";
    font-size: var(--dxp-g-font-size-7);
    line-height: 1.5rem;
}

.header-4-regular {
    font-family: "SourceSansPro-Regular";
    font-size: var(--dxp-g-font-size-7);
    line-height: 1.5rem;
}

.header-4-hyperlink-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-7);
    line-height: 1.5rem;
}

.header-4-hyperlink-hover-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-7);
    line-height: 1.5rem;
}

.header-5-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-6);
    line-height: 1.5rem;
}

.header-5-semi-bold {
    font-family: "SourceSansPro-SemiBold";
    font-size: var(--dxp-g-font-size-6);
    line-height: 1.5rem;
}

.header-5-regular {
    font-family: "SourceSansPro-Regular";
    font-size: var(--dxp-g-font-size-6);
    line-height: 1.5rem;
}

.header-5-hyperlink-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-6);
    line-height: 1.5rem;
}

.header-5-hyperlink-hover-semi-bold {
    font-family: "SourceSansPro-SemiBold";
    font-size: var(--dxp-g-font-size-6);
    line-height: 1.5rem;
}

.paragraph-large-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.5rem;
}

.paragraph-large-semi-bold {
    font-family: "SourceSansPro-SemiBold";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.5rem;
}

.paragraph-large-regular {
    font-family: "SourceSansPro-Regular";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.5rem;
}

.hyperlink-large-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.5rem;
}

.hyperlink-large-hover-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.5rem;
}

.paragraph-small-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-4);
    line-height: 1.25rem;
}

.paragraph-small-semi-bold {
    font-family: "SourceSansPro-SemiBold";
    font-size: var(--dxp-g-font-size-4);
    line-height: 1.25rem;
}

.paragraph-small-semi-bold .slds-rich-text-editor__output,
.slds-rich-text-editor__textarea {
    line-height: 1.25rem;
}

.paragraph-small-regular {
    font-family: "SourceSansPro-Regular";
    font-size: var(--dxp-g-font-size-4);
    line-height: 1.25rem;
}

.paragraph-small-regular .slds-rich-text-editor__output,
.slds-rich-text-editor__textarea {
    line-height: 1.25rem;
}

.hyperlink-small-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.25rem;
}

.hyperlink-small-hover-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.25rem;
}

.paragraph-x-small-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-2);
    line-height: 1rem;
}

.paragraph-x-small-semi-bold {
    font-family: "SourceSansPro-SemiBold";
    font-size: var(--dxp-g-font-size-2);
    line-height: 1rem;
}

.paragraph-x-small-regular {
    font-family: "SourceSansPro-Regular";
    font-size: var(--dxp-g-font-size-2);
    line-height: 1rem;
}

.button-2-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.5rem;
}

.button-2-semi-bold {
    font-family: "SourceSansPro-SemiBold";
    font-size: var(--dxp-g-font-size-5);
    line-height: 1.5rem;
}

.button-1-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-4);
    line-height: 1.25rem;
}

.button-1-semi-bold {
    font-family: "SourceSansPro-SemiBold";
    font-size: var(--dxp-g-font-size-4);
    line-height: 1.25rem;
}

.overline-bold {
    font-family: "SourceSansPro-Bold";
    font-size: var(--dxp-g-font-size-4);
    line-height: 1.25rem;
}
.caption-regular {
    font-family: "SourceSansPro-Regular";
    font-size: var(--dxp-g-font-size-1);
    line-height: 1rem;
}
.caption-bold {
    font-family: "SourceSansPro-Boldr";
    font-size: var(--dxp-g-font-size-1);
    line-height: 1rem;
}

/* Mobile generic typography*/
@media only screen and (max-width: 64em) {
	.header-1-demi-bold {
		font-size: var(--dxp-g-font-size-10);
		line-height: 2.5rem;
	}
	.header-2-demi-bold {
		font-size: var(--dxp-g-font-size-8);
		line-height: 2rem;
	}
	.header-2-light {
		font-size: var(--dxp-g-font-size-8);
		line-height: 2rem;
	}
	.header-2-light .slds-rich-text-editor__output,
	.slds-rich-text-editor__textarea {
		line-height: 2rem;
	}
	.header-3-bold {
		font-size: var(--dxp-g-font-size-6);
		line-height: 1.5rem;
	}
	.header-3-bold .slds-rich-text-editor__output, .slds-rich-text-editor__textarea{
		line-height: 1.5rem;
	}
	.header-4-regular {
		font-size: var(--dxp-g-font-size-6);
	}
	.header-4-semi-bold {
		font-size: var(--dxp-g-font-size-6);
	}
	.header-4-semi-bold {
		font-size: var(--dxp-g-font-size-6);
	}
	.header-5-bold {
		font-size: var(--dxp-g-font-size-5);
	}
	.header-5-semi-bold {
		font-size: var(--dxp-g-font-size-5);
	}
	.header-5-regular {
		font-size: var(--dxp-g-font-size-5);
	}
	.header-5-hyperlink-bold {
		font-size: var(--dxp-g-font-size-5);
	}
	.header-5-hyperlink-hover-semi-bold {
		font-size: var(--dxp-g-font-size-5);
	}
}

/************************************ Typography Utilities ends**************************************/

/************************************ Generic utitlities starts *************************************/

.pointer {
    cursor: pointer;
}

.inline-block {
    display: inline-block;
}

.white-text-color {
    color: #ffffff;
}
.blue-text-color {
    color: #03648e;
}

.container-padding {
    padding-top: 7%;
    padding-bottom: 5%;
}

.gradient-background {
    background: linear-gradient(
        180deg,
        rgba(238, 218, 197, 0.5) 0%,
        #ffffff 100%
    );
}

.blue-card-theme {
    background-color: #03648e;
    color: #ffffff;
}

.banner_image {
    height: 640px;
}

.search-bar {
    left: 25%;
    bottom: 20%;
    width: 50%;
}

.button-theme {
	background-color: rgba(22, 192, 110, 1);
	height: 3rem;
	/* max-width: 12rem; */
	border-color: rgba(22, 192, 110, 1);
	color: rgba(0, 0, 0, 1);
	justify-content: center;
	border: none;
	display: inline-flex;
	align-items: center;
}

.slds-button:focus,
.slds-button:hover {
    color: rgba(0, 0, 0, 1);
}

.subtab {
    margin-left: 10%;
    margin-right: 10%;
}

.tabline {
    border-bottom: 1px solid #808080;
    width: 90%;
    margin: auto;
}

.column-line {
    border-bottom: 3px solid rgb(22, 192, 14);
}

.display-table-cell {
    display: table-cell;
}

.button-none-background {
    background: none;
    border: none;
}

.white-background-color {
    background-color: #ffffff;
}

.justify-element {
    align-items: center;
}

.button-icon {
    left: 10%;
    max-height: 32px;
    max-width: 32px ;
}

.button-text-only {
	padding-left: 10%;
    padding-right: 10%;
}

.button-text {
	left: 28%;
}

.button-logo-width {
	width: 100%;
	max-width: 12rem;
}

/* Mobile generic utilities*/
@media only screen and (max-width: 64em) {
    .banner_image {
        height: 320px;
    }
    .search-bar {
        left: 0;
        bottom: 15%;
        width: 100%;
    }
    .subtab {
        margin-left: 0%;
        margin-right: 0%;
        overflow-x: scroll;
    }
    .subtab-col-width {
        min-width: fit-content;
        padding: 0% 5% 0% 5%;
        /* padding-right: 0.5rem; */
    }
    .button-theme {
        height: 2.5rem;
    }
    .button-icon {
        left: 6%;
    }
    .button-text {
        left: 28%;
    }
    .button-text-only {
        padding-left: 10%;
        padding-right: 10%;
    }
}

/************************************ Generic utitlities ends *************************************/

/**************************************************** NHP Filter Panel ************************************************/
/* Some specialized Styling used in the Filter Panel component which is impossible to be modified */
c-nhp-_filter-panel
    .date-input
    lightning-datepicker
    .slds-input-has-icon
    .slds-input__icon {
    margin-top: -0.75rem;
}
c-nhp-_filter-panel
    .date-input
    lightning-datepicker
    .slds-input-has-icon
    .slds-input {
    padding-top: 3px;
    padding-bottom: 3px;
}
c-nhp-_filter-panel
    .date-input
    lightning-datepicker
    .slds-datepicker
    tbody
    > tr
    > td.slds-is-today
    > .slds-day,
c-nhp-_filter-panel
    .date-input
    lightning-datepicker
    .slds-datepicker
    tbody
    > tr
    > td:hover
    > .slds-day {
    background-color: #b9ecd4;
    border-radius: 0;
}

c-nhp-_filter-panel
    .date-input
    lightning-datepicker
    .slds-datepicker
    tbody
    > tr
    > td.slds-is-selected
    > .slds-day {
    background-color: #16c06e;
    border-radius: 0;
}
/*************************************************** NHP Filter Panel **********************************************/

/************************************************ Popup Close ****************************************************/
.popup-content-container .popup-close,
.popup-close{
    font-size: 30px;
    margin-top: 20px;
    margin-right: 20px;
}
/************************************************ Popup Close ****************************************************/


/********************************************** Error page banner styling starts **********************************************/
/* mobile devices (48em and down) */
@media only screen and (max-width: 48em) {
	.errorPageHeader {
		position: absolute;
		top: 20vh;
		left: 5vw;
	}

	.errorPageImageContainer {
		height: 92vh;
		min-width: min-content;
	}

	.errorPageContentContainer {
		margin-top: 5vh;
		margin-left: 0vw;
	}

    .errorPageDescriptionTwo{
        position: absolute;
        padding-top: 5vh;
    }

    .errorPageLogoContainer {
		position: absolute;
		top: 5vh;
        left: 5vw;
        width: 145px;
        height: 67px;
	}
}

/* Ipad/tablets devices (48em and up) */
@media only screen and (min-width: 48em) {
	.errorPageHeader {
		position: absolute;
		top: 18vh;
		left: 10vw;
	}

	.errorPageContentContainer {
		margin-top: 5vh;
	}

	.errorPageImageContainer {
		height: 100vh;
		width: 100%;
	}

    .errorPageDescriptionTwo{
        position: absolute;
        padding-top: 5vh;
    }

    .errorPageLogoContainer {
		position: absolute;
		top: 5vh;
		left: 9vw;
        width: 145px;
        height: 67px;
	}
}

/* Large devices (laptops/desktops, 64em and up) */
@media only screen and (min-width: 64em) {
	.errorPageHeader {
		position: absolute;
		top: 30vh;
		left: 16vw;
		width: 50%;
	}

	.errorPageLogoContainer {
		position: absolute;
		top: 12vh;
		left: 9vw;
        width: 250px;
        height: 116px;
	}

	.errorPageImageContainer {
		height: 100vh;
		width: 100%;
	}

	.errorPageContentContainer {
		margin-top: 6vh;
		margin-left: 0vw;
		width: 100%;
	}

    .errorPageDescriptionTwo {
        position: relative;
    }
}

.errorBannerContainer {
	height: 100%;
	width: 100%;
}

.errorBannerFooter {
	position: absolute;
	bottom: 0px;
	width: 100%;
}

/* Address searchbar green border */
.searchbar .slds-input {
    border-color: #16c06e;
    border-width: 3px;
}

/********************************************** Error page banner styling ends **********************************************/