/* This stylesheet is used to capture style tweaks that eventually need to be rolled into the main elements style sheet */

/*CSS Class for padding controls*/

.padding-80 {
    padding:80px 80px 80px 80px;
}

.padding-bottom-15 {
    padding-bottom:15px !important;
}

.padding-bottom-45 {
    padding-bottom:45px;
}
.padding-top-45 {
    padding-top:45px;
}
.padding-top-45-bottom-45 {
    padding-top:45px;
    padding-bottom:45px;
}
.padding-top-60 {
    padding-top:60px;
}
.padding-bottom-60 {
    padding-bottom:60px;
}
.padding-top-60-bottom-60 {
    padding-top:60px;
    padding-bottom:60px;
}
.padding-top-80-bottom-80 {
    padding-top:80px;
    padding-bottom:80px;
}
.padding-left-right-top-30 {
     padding: 30px 30px 0px 30px;
}

/* END - CSS Class for padding controls*/

/*CSS Class for margin controls*/

/* Custom class overrides for components */

.featureBox__fitContent .featurebox-tile-image {
	min-height: initial !important;
}

/* END - Custom classes for components */

.margin-top-60 {
    margin-top: 60px;
}
.margin-top-60-bottom-30 {
    margin-top: 60px;
    margin-bottom: 30px;
}


/*END - CSS Class for margin controls*/

/* Colour Changes */

.white-button {
    border: 1px solid #ffffff;
    background-color: #ffffff;
    /*    color: #0173af; */
    color: #005c84;
}


.white-button:hover {
    /* background-color: #005989;
    border: 1px solid #005989; */
    background-color: #00405C;
    border: 1px solid #00405C;
    color: #FFFFFF;
}

.blue-button {
    /* border:1px solid #0173af;
    background-color: #0173af; */
    border: 1px solid #005c84;
    background-color: #005c84;
    color: #FFFFFF;
}

.blue-button:hover {
    /* background-color: #005989;
    border: 1px solid #005989; */
    background-color: #00405C;
    border: 1px solid #00405C;
    color: #FFFFFF;
}

.color-blue {
    /* This overrides the #0173af blue 
    color: #0173af; */
    color: #00093a;
}

.bgcolor-blue {
    /* This overrides the #0173af blue 
    background-color: #0173af; */
    background-color: #005c84;
}

.border-lightgrey {
    border: 2px solid #e5e5e5;
    border-radius: 4px;
}

.border-btm-blue {
    border-bottom: 5px solid #005c84;
}

#chptr-showmore {
    border-bottom: 3px solid #005c84;
    color: #005c84;
}

.acc-border-blue {
    border: 1px solid #005c84;
}

header.header-brdrbtm-blue {
    border-bottom: 3px solid #005c84;
}

.acc-bgcolor-blue {
    background-color: #005c84;
}

.border-blue {
    border: 1px solid #005c84;
}

/*related sub nav border left style*/

.subnav-brdrleft-blue {
    border-left: 5px solid #005c84;
}

.subnav-brdrbtm-blue {
    border-bottom: 3px solid #005c84;
}

.borderblue-hover:hover {
    border: 1px solid #005c84;
}

.ia-common-tasks .ui-selectmenu-button.ui-button.ui-widget.ui-selectmenu-button-closed {
    border-bottom: 1px solid #005c84;
}

.ia-common-tasks .ui-selectmenu-button-closed .ui-selectmenu-text {
    color: #005c84;
}

.custom-form-style {
    border-color: #005c84;
}

.form-borderblue {
    border-color: #005c84;
}

.ai-guidenav li::before {
	background-image: url(https://assets.cmhc-schl.gc.ca/sites/cmhc/shared/imgs/icons/icon-chevron-right.svg);
}


.testing-chevron {
	background-image: url(https://assets.cmhc-schl.gc.ca/sites/cmhc/shared/imgs/icons/icon-chevron-right.svg);    
}

.ia-featurebox .featurebox-tile-main h3 a {
	color: #00093a;
}
.wizard.ui-accordion .ui-accordion-header {
	border: 1px solid #005c84;
	padding: 12px 28px 12px 17px;
	font-size: 16px;
	color: #005c84;	
}
.wizard.experienceEditor h3, .ui-accordion-header-active {
	background-color: #005c84;
}
/* END - Colour Changes */


/* Font Overrides */

@media screen and (max-width: 767px) {

.font-42 {
  font-size:34px;
}
.font-24 {
  font-size:22px;
}
.cmhc-SubHeader {
	font-size: 22px;
}
.cmhc-SubHeader + p {
	font-size: 20px;
}

}
/* End - Font Overrides */







/* Hamburger Menu */
/* Overrides hiding of menu text under 991px */
@media only screen and (min-width: 600px) {
    .menutext {
	    display: inline-block;
    }

}

header .menu-list a {
    padding-right: .5em;
}

/* END - Hamburger Menu */


/* Home Page Hero Banner */

.ia-hero-banner .section-right .banner-image {
	min-height: 460px;
}

/* END - Home Page Hero Banner */


/* Index Page */

#index-page main {
	border-top: 2px solid #e5e5e5;
}

.ia-pagetiles {
    border-bottom: 2px solid #e5e5e5;
}


/* Index Page */



@media screen and (max-width: 360px) {
.ai-guidenav {
	max-width: 85%;
}
}
.ai-guidenav {
	margin-left: .9em;
}
.ai-guidenav li a.active {
	font-weight: bold;
	cursor: default;
}

.guidenav-accordion {
	margin-bottom: 30px;
	border: 2px solid #e5e5e5;
	border-radius: 4px;
	background-color: #f8f8f8;
}

.guidenav-accordion:hover {
    border: 2px solid #cccccc;
}

#chptr-showmore {
	border-bottom: none;
	padding-left: .5em;
	padding-top: 7px;
	margin-bottom: 0px;
	text-decoration: underline;
}

#chptr-showmore::before {
    background-image: url('https://assets.cmhc-schl.gc.ca/sites/cmhc/shared/imgs/icons/icon-chevron-right.svg');
}

#chptr-showmore:hover::before {
	border: 1px solid transparent;
}
#chptr-showmore.active {
	border-bottom: 2px solid #e5e5e5;
    background-color: #f8f8f8;
}
#chptr-showmore.active:hover {
    background-color: #e5e5e5;
}

.showmore-wrapper.active {
	background-color: white;
	margin-bottom: 0px;
}

li.grid-content.pagetile-content {
    /*border-top: 5px solid #005c84;*/
    border-bottom: 2px solid #e5e5e5;
    border-left: 2px solid #e5e5e5;
    border-right: 2px solid #e5e5e5;
    border-radius: 4px;
}

/* Recent Articles */
@media only screen and (min-width: 641px) {
    .ia-related-article h2.article-title {
	    margin: 0em 0 0em 0;
    }
}

/* END - Recent Articles */

.ia-hero-banner .banner-content {
    /* Fix padding inside hero banner */
    padding: 0px 50px 40px 50px;
}

.banner-wrapper {
    /* background-color: #0173af;
    background-color: #005c84; */
}

.bgcolor-grey {
    background-color: #f8f8f8;
}

div.feature-wrapper div.grid-2 {
    column-gap: 2.4rem;
    -ms-grid-columns: 1fr 2.4rem 1fr;
    /* This should be gutter-space-50 */
}

div.feature-wrapper .grid-2 .grid-content {
    margin: 1.2rem 0 1.2rem 0;
}

.featurebox-tile-content {
    padding: 22px 25px 25px 25px;
}

.ia-common-tasks .commontask-dropdown label {
    padding: 40px 0 10px 0;
}

/* CommonTasks component */

@media screen and (min-width: 641px) and (max-width: 1023px) {
    .ia-common-tasks .common-task-content {
	    width: 48%;
    }
}
.ia-common-tasks .commontask-tile .img-icon img {
    width: 85px;
    height: 85px;
    margin: 8px;
}

/* END CommonTasks component */

@media screen and (max-width: 767px) {
    /* CommonTasks component select-menu */
    .ia-common-tasks .ui-selectmenu-button.ui-button {
        display: block;
        max-width: 70%;
        margin: 10px auto 0px auto;
    }
}

@media screen and (min-width: 720px) and (max-width: 767px) {
    /* CommonTasks component select-menu */
    .ia-common-tasks .ui-selectmenu-button.ui-button {
        max-width: 55%;
    }
}

/* INDEX TILES */

li.grid-content.pagetile-content {
    padding: 21px 25px 20px 25px;
}

/* END - INDEX TILES */

/* RECENT ARTICLES */

.article-tile .text-posts {
    padding: 22px 25px 20px 25px;
}

/* END - RECENT ARTICLES */

/* FOOTER ELEMENTS */

/* Note: This should be in the main style sheet, not in element control */

/* Fixes unintend cascade to footer links */

.footer-navigation ul:last-child {
    float: none;
}

.footer-navigation .footer-social ul:last-child {
    float: right;
}

/* THIS STYLE OVER-WRITES A STYLE IN THE CMHC-FORMS STYLESHEET */

.ia-custom-form-style {
    border-color: #005c84;
    border-top: 5px solid #005c84;
	border-bottom: 2px solid #e5e5e5;
	border-left: 2px solid #e5e5e5;
	border-right: 2px solid #e5e5e5;
	border-radius: 4px;
	margin-top: 45px;
	margin-bottom: 60px;
}


/* END - CMHC-FORMS STYLESHEET */

/* Flexible Feature Box Modification */
.grid-1 {
/* When feature box is set to 1 column, this class is applied. Need to remove bottom margin */
	margin: 0.625rem 0 0rem 0;
}
.grid-1.gutterspace-30 .grid-content {
	margin: 0.938rem 0 0.0rem 0;
}
.grid-2 {
	margin: 0.625rem 0 0rem 0;
}
div.feature-wrapper .grid-2 .grid-content {
	margin: 1.2rem 0 0rem 0;
}

div#hero-banner__featureBox.ia-featurebox {
    margin-top: 0;
    padding-top: 0;
}

div#hero-banner__featureBox.ia-featurebox .feature-wrapper {
	background-color: #f7f7f7;
	padding: 0px 30px 0px 30px;
}
@media screen and (min-width: 768px) {
div#hero-banner__featureBox.ia-featurebox .feature-wrapper {
    /* This modifies the padding for the flexible feature box on the home page */
    padding: 20px 50px 47px 50px;
}
}
div#hero-banner__featureBox.ia-featurebox .feature-wrapper .featurebox-tile-main {
    background-color: white;
}

@media only screen and (min-width: 641px) {
    .ia-featurebox .featurebox-title {
	margin: 0em 0 0em 0;
}
}

/*#hero-banner__featureBox h3 {
    font-size: 32px;
}

@media screen and (min-width: 760px) {
    #hero-banner__featureBox h3 {
        font-size: 36px;
    }
}*/

#hero-banner__featureBox p {
    font-size: 18px;
}
.ia-featurebox .section-right .featurebox-tile-image {
	margin-right: inherit;
	min-height: 330px;
}
.ia-featurebox .columns {
	padding-left: 0;
	padding-right: 0;
}
/* END - Flexible Feature Box Modification */

/* CMHC Calculators and Accordions */
.cmhc-accordion, .text-component.text-clearfix, .wizard {
    /* Added .wizard to make calculators the same width as accordions */
	max-width: 920px;
}
@media screen and (max-width: 800px) {
    .wizard {
        margin: 0 0px 20px 0px;
    }
}
@media screen and (max-width: 920px) {
    .wizard {
        padding-left: 15px;
        padding-right: 15px;        
    }
}

.icon-tooltip {
	background: url('https://assets.cmhc-schl.gc.ca/sites/cmhc/shared/imgs/icons/icon-info.svg') no-repeat;
}
.cmhc-accordion-header a {
	background-image: url('https://assets.cmhc-schl.gc.ca/sites/cmhc/shared/imgs/icons/icon-plus.svg');
}
.wizard > div, .wizard .ui-widget-content, .cmhc-accordion > div > div {
	border: 2px solid #e5e5e5;
	border-radius: 4px;
}
.help-tip-box {
	border: 2px solid #e5e5e5;
	border-radius: 4px;
	color: #656565;
	font-weight: normal;
	padding: 17px 40px 17px 90px;
}
@media screen and (max-width: 640px) {
    /* Note: Redundant style, but required to fix the cascade @ responsive size */
    .help-tip-box {
	    padding: 20px 20px 10px 20px;
    }
}

.affordability-calculator-result-header, .mortgage-calculator-result-header, .debt-service-ratio-result-header {
	max-width: 920px;
	background-color: #005c84;
}
.mortgage-calculator-result-subheader {
	max-width: 920px;
	border: 2px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}
.recalculate-form {
	max-width: 920px;
	border: 2px solid #e5e5e5;
	border-top:1px solid #e5e5e5;
	color: #656565;
	border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* END - CMHC Calculators and Accordions */

/* NHS Page Logo */
.nhslogoimg {
	width: inherit;
	float: right;
	clear: right;
	margin-left: 15px;
}
.nhslogo-image {
	border: 2px solid #e5e5e5;
	padding: 1em 2em 1em 2em;
	border-radius: 4px;
}
/* END - NHS Page Logo