/* Global Scrollbar Styles Starts here */
::-webkit-scrollbar {
  height: 16px;
}
 
::-webkit-scrollbar-track {
  background: #E1E4E7;
}
 
::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 10px;
  border: 2px solid #E1E4E7;
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: #000;
}
/* Global Scrollbar Styles Ends here */

/* Listing Download Styles Starts here */
.product-container {
  max-width: 1280px;
  width: 90%;
  display: flex;
  gap: 40px;
  padding: 80px 0;
  margin: 0 auto;
}
 
.product-container .image-section {
  width: 56%;
  height: 100%;
  margin-right: -6%;
  border: 1px solid #E1E4E7;
}
 
.product-container .image-section .main-image {
  width: 100%;
}
 
.product-container .image-section .thumbnail-container {
  display: flex;
  overflow-x: auto;
}
 
.product-container .image-section .thumbnail-container img {
  width: 120px;
  height: 120px;
  cursor: pointer;
  margin: 10px;
  border: 5px solid transparent;
}

.product-container .image-section .thumbnail-container img:hover, 
.product-container .image-section .thumbnail-container img.selected {
  border: 5px solid #fec000;
}

.product-container .details-section {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.product-container .details-section h1 {
  font-weight: 700;
  font-size: 64px;
  color: #000;
  line-height: 1em;
}
.product-container .details-section h2 {
  margin-top: -10px;
  font-weight: 400;
  color: #000;
  font-size: 32px;
  line-height: 1.25em;
  padding: 10px 0 0 0;
}
 
.product-container .details-section p {
  font-size: 18px;
  line-height: 27px;
  color: #000;
  margin: 0px 0px 20px 0px;
  padding-bottom: 0px;
}
 
.product-container .details-section .meta {
  font-size: 0.9rem;
  color: #000;
}
 
.product-container .details-section .meta span {
  font-size: 24px;
}
 
.product-container .details-section .bedrooms {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  text-decoration: none;
  /*color: #5f1635;*/
}
 
.product-container .details-section .bedrooms svg {
  flex-shrink: 0;
}
 
.product-container .details-section .package-options {
  display: flex;
  flex-direction: column;
}
 
.product-container .details-section .package-options label {
  color: #000;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0px;
  cursor: pointer;
  font-size: 1rem;
  padding: 20px;
  border: 4px solid transparent;
}
 
.product-container .details-section .package-options label.selected-border {
  border: 4px solid #fec000;
  border-radius: 12px;
}

.product-container .details-section .package-options label {
  font-size: 18px;
}
 
.product-container .details-section .package-options label span {
  font-weight: bold;
  font-size: 24px;
  margin: 0px 0px 10px 0px;
}
 
.product-container .details-section .package-options label input[type="radio"] {
  accent-color: #000;
  align-self: baseline;
  margin: 12px 0 0 0;
}
 
.product-container .details-section .download-button {
  background-color: #fec000;
  color: #000;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  line-height: 18px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  margin-top: 20px;
  width: 251px;
  height: 64px;
  text-align: center;
}

.product-container .details-section .download-button:hover {
    line-height: 18px;
}
 
.product-container .details-section .compare-packages {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0px 0px 0px;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  color: #5f1635;
  text-decoration: underline;
}
 
.product-container .details-section .compare-packages svg {
  flex-shrink: 0;
}
/* Listing Download Styles Ends here */
 
/* Mobile Responsive Listing Download Styles Starts here */
@media (max-width: 1028px) {
  .product-component-top-line {
    margin-top: 20px;
  }
 
  .product-container {
    padding: 20px 0px;
    flex-direction: column;
    width: 90%;
    gap: 0;
    flex-direction: column-reverse;
  }
 
  .product-container .image-section {
    width: 100%;
  }
 
  .product-container .image-section .main-image {
    width: 100%;
    min-width: unset;
    min-height: unset;
  }
  
  .product-container .image-section .thumbnail-container img {
      width: 80px;
      height: 80px;
  }
 
  .product-container .details-section {
    width: 100%;
    padding: 0px 0px 48px 0px;
  }
  
  .product-container .details-section .package-options label {
    margin: 10px 0px;
  }
 
  .product-container .details-section .package-options label.selected-border {
    padding: 20px;
  }
 
  .product-container .details-section h1 {
    font-size: 40px;
    font-weight: 700;
    margin-top: 40px;
  }
 
  .product-container .details-section h2 {
    font-size: 24px;
    font-weight: 400;
  }
}
/* Mobile Responsive Listing Download Styles Ends here */

/* Floor Plan */
.floor-plan-container {
  padding: 80px 0px 120px 0px;
  max-width: 1280px;
  width: 90%;
  margin: 0 auto;
  display: flex;
}

/* First column */
.floor-plan {
  width: 50%;
  grid-column: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0px 80px;
  margin: auto 0;
}
.floor-plan-container .heading{
    padding: 0px 0px 20px 0px;
}

.floor-plan-container .heading h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    margin: 0;
}

.large-8.small-12.medium-8.columns {
    width: 50%;
    padding: 0px 0px 0px 80px;
    display: grid;
    gap: 10px;
    margin: auto 0;
}
@media (max-width: 768px) {
    .large-8.small-12.medium-8.columns {
        width: 100%;
        padding: 0;
    }
.floor-plan-container .heading {
    padding-left: 0;
    }
}

.floor-plan-container h2,
.floor-plan-container .floor-details,
.floor-plan-container .content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.floor-plan img {
  width: 100%;
}

/* Second column */

.floor-plan-container > h2,
.floor-plan-container > .floor-details,
.floor-plan-container > .content {
  grid-column: 2;
}

/* Remove default margins */

.floor-plan-container > h2,
.floor-plan-container > .floor-details,
.floor-plan-container > .content {
  margin: 0;
  /* Reset default margins */
}

/* Adjust specific spacing as needed */
.floor-plan-container .content p{
     margin: 0px 0px 20px 0px;   
}
.floor-plan-container .content p{
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
}

.floor-plan-container > h2 {
  margin-bottom: 10px;
  /* Space below h2 */
}

.floor-plan-container > .floor-details {
  margin-bottom: 15px;
  padding-left: 100px;
  /* Space below .floor-details */
}
.floor-plan-container .floor-details {
    width: 232px;
}

.floor-plan-container  .floor-details .floor-plans:before {
      content: url('../icons/reschedule-icon.svg');
}

.floor-plan-top {
  width: 100%;
  top: 0;
}
.dropdown {
  /* margin-bottom: 20px; */
}

.dropdown select {
  padding: 15px 24px 15px 30px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 2px solid #000;
  background-image: url(https://www.uatsc10hsct.cmhc-schl.gc.ca/dropdown-down.png) !important;
  background-size: 24px;
  background-origin: content-box;
  background-color: #fff;
  cursor: pointer;
}

.icons-list {
  display: grid;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 10px 0px 10px 20px;
}
.icons-list svg {
    height: 26.7px;
    width: 26.7px;
}

.icons-list li {
  display: flex;
  gap: 15px;
  align-items: center;
}

.icon {
  margin-right: 10px;

  font-size: 20px;
}

.visually-hidden {
  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;
}

@media (max-width: 768px) {
    
    .floor-plan-container .floor-details{
        width:100%;
        padding-left:0px;
    }
    
    .floor-plan-container{
        padding: 48px 20px 80px 20px;
        width: 100%;
    }
    
    .floor-plan-container .content p{
       margin: 38px 0px 20px 0px;   
    }
    
    .floor-plan-mobile.large-4.small-12.medium-4.columns {
        padding: 0;
    }
    
  .floor-plan-container {
    flex-direction: column;
    display: flex;
  }

  .floor-plan,
  .details {
    width: 100%;
  }

  .details p,
  .dropdown {
    margin-bottom: 20px;
  }

  .floor-plan-container .details h2 {
    order: 1;
  }

  .floor-plan-container .details .dropdown {
    order: 2;
  }

  .floor-plan-container .floor-plan {
    order: 3;
  }

  .content {
    order: 4;
  }
}
/* Floor Plan */

/* Compare Packages Component Styles Starts here */
.compare-package{
  background-color:#E1E4E7;
}
.compare-container{
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
    width: 90%;
    padding: 80px 0px 120px 0px;
}

.compare-container .compare-heading h1 {
  font-size: 64px;
  color: #79133E;
  font-weight: 700;
  line-height: 64px;
  margin-bottom: 20px;
  }

.compare-container .compare-heading h2 {
  font-size: 32px;
  color: #000;
  font-weight: 400;
  line-height: 40px;
  margin-bottom: 20px;
}

.compare-container .compare-heading p {
  font-size: 18px;
  color: #000;
  font-weight: 400;
  line-height: 27px;
  margin-bottom: 48px;
}

.package-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: 81px;
}

.package-cards{
  width: -webkit-fill-available;
  width: -moz-available;
  background-color: #fff;
  border-color: 1px solid #E1E4E7;
  border-radius: 12px;
  padding: 48px;
  text-align: left;
  box-shadow: 0px 4px 4px 0px #00000040;
}
.package-cards h2{
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: 16px;
  }

.package-cards p{
font-size: 18px;
font-weight: 400;
line-height: 27px;
}
.package-cards ul{
  list-style: none;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  margin: 0;
}

.package-cards ul li {
  display: flex;
  line-height: 27px; 
  margin-bottom: 10px; 
  padding: 0; 
}

.package-cards ul li svg {
  margin-right: 8px; 
  flex-shrink: 0;
}

.package-cards ul li span {
  line-height: 27px;
}

/* Compare Packages Component Styles Ends here */

/* Mobile Responsive Compare Packages Component Styles Starts here */
@media (max-width: 768px) {
  .compare-container {
    width: unset;
    padding: 48px 20px 80px 20px;

  }

  .compare-container .compare-heading h1 {
    font-size: 40px;
    line-height: 40px;
    text-align: left;
    }

    .compare-container .compare-heading h2 {
      font-size: 24px;
      line-height: 24px;
      text-align: left;
    }
    
    .compare-container .compare-heading p {
      text-align: left;
    }
    
    .package-cards {
        padding: 48px 20px;
    }

    .package-cards h2{
      font-size: 32px;
      line-height: 32px;
    }

    .package-card {
      grid-template-columns: auto;
      gap:48px;
    }
}
/* Mobile Responsive Compare Packages Component Styles Ends here */

/* HowItWorks Component Styles Starts here */
.howitwork-container{
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
    width: 90%;
    padding: 80px 0px 120px 0px;
}

.howitwork-container .howitwork-heading h1 {
    font-size: 64px;
    color: #79133E;
    font-weight: 700;
    line-height: 64px;
    margin-bottom: 20px;
}

.howitwork-container .howitwork-heading h2 {
    font-size: 32px;
    color: #000;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 20px;
}

.howitwork-container .howitwork-heading p {
    font-size: 18px;
    color: #000;
    font-weight: 400;
    line-height: 27px;
    margin-bottom: 48px;
}

.howitwork-card {
    display: grid;
    grid-template-columns: auto auto;
    text-align: left;
    row-gap: 28px;
    column-gap: 80px;
}

.howitwork-card h2{
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.howitwork-card p{
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}
/* HowItWorks Component Styles Ends here */

/* Mobile Responsive HowItWorks Component Styles Starts here */
@media (max-width: 768px) {
  .howitwork-container {
    width: unset;
    text-align: left;
    padding: 48px 20px 80px 20px;
  }

  .howitwork-container .howitwork-heading h1 {
    font-size: 40px;
    line-height: 40px;
  }

  .howitwork-container .howitwork-heading h2 {
    font-size: 24px;
    line-height: 24px;
  }

  .howitwork-card {
    grid-template-columns: auto;
    gap:28px;
  }
}
/* Mobile Responsive HowItWorks Component Styles Ends here */


/* Dropdown Jquery UI styles starts here */

.ui-selectmenu-menu {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    z-index: 9999;
}

.ui-selectmenu-button.ui-button:focus {
  background-color: #fff;
}

.tac-modal #housing-catalog-terms-div .ia-generic-form-image .ia-generic-form-container .ia-custom-form-style .form-group .ui-selectmenu-button.ui-button {
    width: 100%;
    padding: 9px 10px;
    margin: 0 0 20px 0;
    display: block;
    /* flex-direction: row-reverse; */
    width: 100%;
    height: 37px;
    border-radius: 4px;
    background-color: #F7F8F9;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.tac-modal #housing-catalog-terms-div .ia-generic-form-image .ia-generic-form-container .ia-custom-form-style .form-group .ui-selectmenu-button.ui-button .ui-icon {
    margin: 6px 0 0 0;
    background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downiconblack.svg);
    background-repeat: no-repeat;
}

.tac-modal #housing-catalog-terms-div .ia-generic-form-image .ia-generic-form-container .ia-custom-form-style .form-group .ui-selectmenu-button.ui-button .ui-selectmenu-text {
    color: #000; 
    font-size: 16px; 
    font-weight: 400; 
    font-style: normal; 
    line-height: normal;
}

.tac-modal #housing-catalog-terms-div .ia-generic-form-image .ia-generic-form-container .ia-custom-form-style {
    padding: 0;
}
.tac-modal #housing-catalog-terms-div .ia-generic-form-image .ia-generic-form-container .ia-custom-form-style button#btnSaveTerms {
    margin: 10px 0 30px 0;
    background-color: #FEC000;
    color: #000;
    border: 2px solid #FEC000;
    padding: 20px 40px;
    border-radius: 4px;
}

.tac-modal #housing-catalog-terms-div .ia-generic-form-image .ia-generic-form-container .ia-custom-form-style button#btnSaveTerms:hover {
    margin: 10px 0 30px 0;
    background-color: #FFF;
    color: #000;
    padding: 20px 40px;
    border-radius: 4px;
    border: 2px solid #FEC000;
}
.tac-modal #housing-catalog-terms-div .ia-generic-form-image .ia-generic-form-container .ia-custom-form-style button#btnSave {
    margin: 10px 0 30px 0;
}

.ui-widget-content .ui-state-focus {
    background: none;
    border: none;
}

.ui-button:active {
    background-color: #fff !important;
}

span#floorSelect-button {
    width: 232px;
    border: 2px solid #000;
    border-radius: 4px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  outline: none;
}

.ui-state-active, .ui-widget-content .ui-state-active {
  border: none;
}

.ui-menu .ui-menu-item-wrapper {
    padding: 10px 10px 10px 36px;
}

.ui-menu .ui-state-active {
    margin: 0;
}

.ui-widget-content .ui-state-active {
    background-color: unset;
}

.ui-widget-content .ui-state-active:hover {
  background-color: #000;
}

.ui-selectmenu-text {
  margin-right: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1px;
}

.ui-selectmenu-button.ui-button {
  padding: 15px 24px 12px 30px;
  width: 190px;
  background-color: white;
  color: #000;
  margin: 0;
}

.ui-selectmenu-button.ui-button:focus {
  outline: 2px solid #FEC000;
}

.ui-widget.ui-widget-content {
  border: 1px solid rgba(0, 0, 0, 0.85);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px 0;
  border-radius: 5px;
  color: #fff;
}

.ui-button:hover .ui-icon {
  width: 24px;
  height: 15px;
  background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downicon.svg);
  background-size: contain;
  display: inline-block;
}

.ui-button .ui-icon {
  width: 24px;
  height: 15px;
  background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downicon.svg);
  background-size: contain;
  display: inline-block;
}

.ui-button:focus .ui-icon {
  width: 24px;
  height: 15px;
  background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downicon.svg);
  background-size: contain;
  display: inline-block;
}

.ui-button .ui-icon:hover {
  width: 24px;
  height: 15px;
  background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downicon.svg);
  background-size: contain;
  display: inline-block;
}

.ui-selectmenu-button .ui-button .ui-widget .ui-selectmenu-button-closed .ui-corner-all {
  width: 24px;
  height: 15px;
  background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downicon.svg);
  background-size: contain;
  display: inline-block;
}

.ui-menu .ui-menu-item .selected {
    background-image: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/yellowtickicon.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 36px;
}

.ui-menu .ui-menu-item .selected.ui-state-active {
    background-image: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/yellowtickicon.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 36px;
}

.ui-menu .ui-menu-item .selected.ui-state-active:hover {
    background-image: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/yellowtickicon.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 36px;
}

.ui-menu .ui-menu-item .ui-state-active:hover {
    background-color: #000;
    background-image: none;
}

@media (max-width: 768px) {
  .ui-selectmenu-button.ui-button {
      max-width: unset;
  }
  .ui-selectmenu-text {
      line-height: 27px;
      font-size: 16px;
      font-weight: 700;
  }
  
  .ui-selectmenu-button.ui-button {
    width: 100%;
    background-color: #fff;
    padding: 5px 10px 5px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    line-height: 13.6px;
    letter-spacing: 1px;
    text-align: left;
    color: #000;
    border: 1px solid #F5F5F5;
    cursor: pointer;
  }

  .ui-button .ui-icon {
    background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downiconblack.svg);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 6px;
  }

  .ui-state-active .ui-icon, .ui-button:active .ui-icon {
    background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downiconblack.svg);
    background-repeat: no-repeat;
    background-position: center;
  }

  .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon {
    background: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/downiconblack.svg);
    background-repeat: no-repeat;
    background-position: center;
  }

  .ui-widget.ui-widget-content {
    background-color: black;
    color: white;
    opacity: 0.8;
  }
}

/* Dropdown Jquery UI styles ends here */
/* Check box css starts here */
.ui-icon-blank.ui-icon-blank.ui-icon-blank {
	box-shadow: none;
	border: 2px solid #00093a;
	background-color: #F2F2F2;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: none;
	border: 2px solid #00093a;
}

.ui-state-active .ui-icon {
	background-image: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/tick%20icon.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgb(242, 242, 242);
}

.ui-state-active:hover .ui-icon {
	background-image: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/tick%20icon.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.ui-state-checked {
	border: none;
}

.ui-button.ui-state-active {
	color: #00093a;
}

.ui-button.ui-state-active:hover {
	background-color: unset;
	color: #00093a;
	outline: unset;
	border: unset;
}

label.ui-checkboxradio-label.ui-corner-all.ui-button.ui-widget {
	display: flex;
	font-size: 18px;
	font-weight: 400;
	line-height: 20px;
	color: #00093a;
	margin: 0;
	text-align: left;
}

.housing-catalog .ia-custom-form-style .form-group .mondatory-singlecheckbox-validation .black {
    margin: 0 0 0 6px;
}

.form-group .mondatory-singlecheckbox-validation .form-checkboxbtn {
    padding: 0;
    margin: 0;
}


.form-group .mondatory-singlecheckbox-validation .form-checkboxbtn .ui-checkboxradio-icon {
    height: 12px;
    width: 16px;
    padding: 0;
    margin: 0;
    background-color: #FFF;
}

#txt_keepPosted + label .ui-checkboxradio-icon {
    width: 20px;
} 
.form-group .mondatory-singlecheckbox-validation .form-checkboxbtn .ui-checkboxradio-icon:hover {
    background-image: url(https://www.cmhc-schl.gc.ca/content/project/housingcatalog/img/tick%20icon.svg);
}

.ui-icon-blank.ui-icon-blank.ui-icon-blank {
    background-image: none !important;
}

.ui-visual-focus {
    box-shadow: none;
}

.housing-catalog .ia-custom-form-style .form-group .mondatory-singlecheckbox-validation label {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
    color: #000;
    padding: 10px 0 0 0;
    margin: 0 0 20px 0;
}

/* Check box css ends here */