﻿/*
    Use this file to customize your site CSS. Do not modify the core css files.
*/

/* Styles for mobile screens (max-width: 768px) */
@media (max-width: 768px) {
	/* breadcrumb are not wrapping on the mobile view */
    .breadcrumb {
		flex-wrap: wrap;
    }
	.breadcrumb-item {
		overflow: visible;
		text-overflow: ellipsis;
	}
	/* 20250305 Sprint 5, Task 10. Add more spacing to H1 in mobile view only. */
	h1 {
	  margin-top: 0rem;
	}
}


@media (min-width: 992px) {
    .mdgov-navbar-nav-parent>.mdgov-navbar-item.has-children .mdgov-navbar-action a {
        margin-right: -.5rem;
    }

.mdgov-navbar-nav-parent>.mdgov-navbar-item .mdgov-navbar-action a
Specificity: (0,3,1)
 {
    color: var(--mdgov-navbar-parent-link-color);
    font-size: .70rem !important;
}

}


input[type=password], input[type=text], input[type=file], input:not([type]), textarea, .ms-inputBox{

  border: 1px solid #eaeaea !important;
  
  }

.mdgov-pageContent a{
color: #b62033;
font-size: 20px;
text-decoration: underline;

}

a:visited:not(.btn,.usa-button,.list-group-item-action,.mdgov-footer a,.mdgov-entNav a,.mdgov-masthead-top a,.mdgov-sectionNav-link) {
    color: #b62033;
}


/*accordion*/
.usa-accordion__button {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  justify-content: normal;
  text-align: left;
  padding: 0;
  color: #fff;
  font-size: 22px;
  background-color: #b62033;
  background-image: url(../img/usa-icons-bg/remove--white.svg), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1.5rem;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  margin: 0;
  padding: 1rem 3.5rem 1rem 1.25rem;
  text-decoration: none;
  width: 100%;
}

.usa-accordion__button:hover {
 
  background-color: #971b2a;

}
/*footer*/
.mdgov-footer{

color: #ffffff;
background-color: #000000 !important;
}

.mdgov-footer__agency__logo img {
    
    display: none !important;
}

.mdgov-footer a { 
color: #ffffff !important;
}

.ewf-footer{
color : #ffffff !important;
}

/*20250225 - update the header color to #162E51*/
.mdgov-masthead {
	background-image: none;
	background-color: #ececec;
      height: 250px !important;
}

@media (min-width: 992px) {
    .mdgov-masthead-top {
      padding: 0 !important;
    }
}

.mdgov-masthead-top-wrap {
 
    height: 160px !important;
}

/*breadcrumb*/
.bg-light, .mdgov-linkImageCard {
  --mdgov-bg-opacity: 1;
background-color: rgb(182 32 51) !important;
}

.breadcrumb-item a:visited
 {
    color: #ffffff !important;
}

.breadcrumb-item.active{
  color: #ffffff !important;

}
.breadcrumb-item a {
  color: #ffffff !important;
}




breadcrumb-item:not(:first-of-type)::before {
  display: inline-block;
  width: 3ex;
  height: 3ex;
  content: "";
  vertical-align: top;
  background: 0 0;
  background-color: #ffffff !important;
  -webkit-mask-image: url(data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>), linear-gradient(transparent, transparent);
  mask-image: url(data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>), linear-gradient(transparent, transparent);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 2ex 2ex;
  mask-size: 2ex 2ex;
}


.breadcrumb-item:not(:first-of-type)::before {
  display: inline-block;
  width: 3ex;
  height: 3ex;
  content: "";
  vertical-align: top;
  background: 0 0;
  background-color: #ffffff !important;

}
/* Custom hover effect to change the entire card color */
.Card-ContainerDiv-class:hover, .Card-ContainerDiv-class:focus{
  background-color: #f2f2f2; /* New background color */
  /* 20250227 - the Title should be black*/
  /* color: #005EA2; */
  transition: background-color 0.3s ease; /* Smooth background color transition */
}

.CardMain-class ul>li>a {
	text-decoration	: none;
}
/* For external links, the "after" image mask icon should be inside the card */
.Card-li-class a[target="_blank"]::after {
    position: absolute !important;  /* Keeps it inside the card */
    bottom: 10px !important;  /* Adjusts to ensure it stays inside */
    right: 20px !important;
    z-index: 10 !important;  /* Ensures it doesn't get hidden */
    transform: none !important;  /* Removes unwanted transformations */
    max-width: 20px !important;  /* Prevents oversized mask images */
}

/* For Cards, the font color and style should match as mentioned in the Figma */
/* 20250227 - the Title should be black. Delete this later.
.usa-card__container{
	color: #005EA2;
}
*/
/* Target only cards where the anchor tag has an href (i.e., clickable cards) */
.usa-card a[href] .usa-card__heading {
    color: #1b1b1b; !important;
}

/* Ensure non-clickable card titles remain unchanged */
.usa-card a:not([href]) .usa-card__heading {
    color: inherit !important;
}

.usa-card__body{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/*20250210 - commenting this because of the issue reported related to Accessibility test failure*/
/*
.usa-button.usa-button--hover, .usa-button:hover {
    background-color: #0050d8;
}
*/

/* 20250127 - change the hyperlink to match the new requirements. */
a {
    color: #b62033;
    text-decoration: none;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

/* Ensuring equal width and height for all buttons */
/* Button container using flexbox */
.usa-button-group {
  display: flex;
  gap: 1rem; /* Space between buttons */
  flex-wrap: wrap; /* Allows buttons to wrap dynamically */
  justify-content: center; /* Centers buttons when wrapping */
  margin: auto; /* Center the group */
  align-items: stretch; /* Ensures all buttons are the same height */
}

/* Wrapper for each button + label */
.button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1; /* Makes all button containers equal width */
  min-width: 100px; /* Prevents shrinking too much */
}

/* Style for the labels */
.button-label {
  margin-bottom: 0.5rem; /* Space between label and button */
}

/* Dynamic buttons */
.custom-button {
  flex: 1; /* Ensures equal width among buttons */
  min-width: 100px; /* Prevents buttons from shrinking too much */
  max-width: 100%; /* Prevents overflow */
  width: 100%; /* Makes buttons fill container width */
  height: 50px;
  padding: 1rem; /* Adds padding for spacing */
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal; /* Allows text wrapping */
  display: flex;
  justify-content: center;
  align-items: center;
}


.usa-button--accent-warm, .usa-button--accent-warm:visited {
    color: #1b1b1b !important;
    background-color: #e5a000;
    font-size: 20px;
    text-decoration: none !important;
}

.usa-button--accent-warm:hover {
    color: #1b1b1b !important;
    background-color: #e4b23e;
    font-size: 20px;
    text-decoration: none !important;
}


.usa-button {
 padding: 1rem 1.5rem !important;
 
}

/* Added margin-top to headings */
h6, .h6, .mdgov-newsCarousel__item h3, .mdgov-newsCarousel__item .h3, h5, .h5, h4, .h4, h3, .h3, h2, .h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-family: "Public Sans Web",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: 700;
    line-height: 1.2;
    color: var(--mdgov-heading-color);
}

/* Bug fix: Paging numbers are not visible 
https://stg-doitnw.maryland.gov/About-DoIT/Portfolio-Officers/Pages/Portfolio-Officers.aspx?page=2 */
.page-link[aria-current="true"] {
   color: #fff !important;
}

.mdgov-masthead-top{
gap: 0 !important;
}

@media (min-width: 992px) {
  .mdgov-masthead-brand-logo {
      max-height: 110px;
  }
}

/*Navigation Tab styles */
.mdgov-navbar-nav-parent>.mdgov-navbar-item.current .mdgov-navbar-action ::after{
  border-bottom: 3px solid #991f34 !important;

}

element.style {
}
html.has-ribbon #s4-workspace button {
    min-width: 0;
}
button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
    cursor: pointer;
}

.mdgov-navbar-toggle {
    color: #991f34 !important;
    border: 0;
    padding: .5rem;
    /* left: 10px; */
    color: var(--mdgov-navbar-toggle-color);
    background-color: var(--mdgov-navbar-toggle-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    margin-left: 8px;
    outline: 0;
}


.mdgov-navbar-toggle:hover{
border-top-right-radius: 5px;
border-color: #000000 !important;
background-color: #000000 !important;
}

.mdgov-navbar-nav-parent>.mdgov-navbar-item .mdgov-navbar-action a {
  color: var(--mdgov-navbar-parent-link-color);
  font-size: 16px !important;
 
}


.mdgov-navbar-submenu-heading a {
    padding: 0;
    color: inherit;
    text-decoration: underline !important;
    font-size: 1.25rem;
    text-decoration: none;
}

.mdgov-navbar-submenu-heading a:hover{
    padding: 0;
    color: #b62033;
    text-decoration: underline !important;
    font-size: 1.25rem;
    text-decoration: none;
}

@media (min-width: 992px) {
  .mdgov-navbar-nav-parent>.mdgov-navbar-item.has-children .mdgov-navbar-action a {
        margin-right: -1.5rem;
  }
}


@media (max-width: 991.98px) {
    .mdgov-masthead-nav {
        background-color: #111111;
    }
}


/*Logo Title*/
.mdgov-agency {
  font-weight: 600;
  color: inherit;
  line-height: 2.3rem;
  margin: 0;
  width: 500px;
  display: block !important;
  text-transform: uppercase;
}
@media (min-width: 1400px) {
  .mdgov-agency {
      line-height: 2.2rem;
        font-size: 2rem;
  }
}



@media (min-width: 1400px) {
  .mdgov-agency__name {
      font-size: 1.2rem !important;
  }
}
.mdgov-agency__name {
  font-weight: 400 !important;
  color: inherit;
  line-height: 1.5rem;
  margin: 0;
  text-transform: capitalize;
  font-size: 1.22rem !important;
  padding-top: 4px;
}

.mdgov-masthead-brand {

    gap: 1.5rem;
}


@media (max-width: 767.98px) {
  .mdgov-agency__name {
    font-weight: 400 !important;
    color: inherit;
    line-height: 1.25rem;
    margin: 0;
    text-transform: capitalize;
    font-size: .75rem !important;
    padding-top: 0px;
  }
  .mdgov-agency {
  font-weight: 600;
line-height: 1.4rem !important;
    margin-top: 10px;
    font-size: 1.2rem !important;
  width: inherit !important;
    display: block !important;
    text-transform: uppercase;
}
.mdgov-masthead-brand {
    gap: .7rem !important;
}
}
  @media (max-device-width: 1024px) {
.mdgov-agency__name {
    font-weight: 400 !important;
    color: inherit;
    line-height: 1rem;
    margin: 0;
    text-transform: capitalize;
    font-size: .75rem !important;
    padding-top: 4px;
}

.mdgov-agency {
    font-weight: 600;
    color: inherit;
    line-height: 1.5rem;
    font-size: 1.25rem;
    margin: 0;
    display: block !important;
    text-transform: uppercase;
}
}

  @media (max-device-width: 1180px) {
.mdgov-agency__name {
    font-weight: 400 !important;
    color: inherit;
    line-height: 1rem;
    margin: 0;
    text-transform: capitalize;
    font-size: .75rem !important;
    padding-top: 4px;
}

.mdgov-agency {
    font-weight: 600;
    color: inherit;
    line-height: 1.5rem;
    font-size: 1.25rem;
    margin: 0;
    display: block !important;
    text-transform: uppercase;
}
}


@media (max-width: 400px) {
    .mdgov-agency__name {
        font-weight: 400 !important;
        color: inherit;
        line-height: 1rem;
        margin: 0;
        text-transform: capitalize;
        font-size: 1rem !important;
        padding-top: 0px;
    }

        .mdgov-agency {
        font-weight: 600;
        line-height: 1rem !important;
        margin-top: 10px;
        font-size: .9rem !important;
        width: inherit !important;
        display: block !important;
        text-transform: uppercase;
    }
}


@media (max-width: 1368px) {
.mdgov-agency {
    font-weight: 600;
    color: inherit;
    line-height: 1.6rem;
    margin: 0;
    font-size: 1.45rem;
    display: block !important;
    text-transform: uppercase;
}

.mdgov-agency__name {
    font-weight: 400 !important;
    color: inherit;
    line-height: 1.5rem;
    margin: 0;
    text-transform: capitalize;
    font-size: 1.21rem !important;
    padding-top: 4px;
}

}


@media (max-device-width: 1180px) {
    .mdgov-agency__name {
        font-weight: 400 !important;
        color: inherit;
        line-height: 1rem;
        margin: 0;
        text-transform: capitalize;
        font-size: .9rem !important;
        padding-top: 4px;
    }

    mdgov-agency {
        font-weight: 600;
        color: inherit;
        line-height: 1.5rem;
        font-size: 1.5rem;
        margin: 0;
        display: block !important;
        text-transform: uppercase;
    }

    .mdgov-navbar-item a {
    display: block;
    padding: .7rem;
    text-decoration: none;
}

.mdgov-navbar-nav-parent>.mdgov-navbar-item .mdgov-navbar-action a {
    color: var(--mdgov-navbar-parent-link-color);
    font-size: 11px !important;
}
}

@media (min-width: 992px) {
    .mdgov-navbar-nav-parent>.mdgov-navbar-item.current .mdgov-navbar-action ::after {
        content: "";
        border-bottom: 3px solid var(--mdgov-navbar-parent-link-current-border-color);
        width: calc(100% - 2rem);
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: .7rem;
        margin-right: 1rem;
    }
}



/*card image*/



.usa-card__container {
    color: #1b1b1b;
    background-color: #fff;
    font-family: Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 1rem;
    padding: 1rem !important;
    line-height: 1.6;
    border-width: 2px;
    border-color: #dfe1e2;
    border-style: solid;
    display: flex;
    height: 100%;
    flex-direction: column;
    margin-left: .5rem;
    margin-right: .5rem;
    position: relative;
    border-radius: .5rem;
}

.usa-card__img img {
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  border-radius: .5rem !important;
  object-fit: cover;
}

.usa-card__heading {
  font-family: Public Sans Web, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 1.34rem;
  line-height: 1.2;
  margin: 0;
}

