/*custom CSS input here, you can add your own .customclass and then use customclass in the webcomponent. This the .Overlay Script using Mition colours */

/*Hide login for now*/

/*.user-icon-container {
    display: none;
}

.mobile-menu-container .user-details {
    display: none;
}

.main-menu--showsecondlevel { 
    display: none;
}

*/
/*Hide login for now*/

/*Hide delete ticket button for users own events*/
#UserEventEditor #Popup-buttonarea .action-delete {
    display: none;
}

/* Site styles */

h1, h2, h3 {
    font-weight: 800;
	line-height: 1.2em !important;
}

.members--webpage a:link {
	font-weight: 700 !important;
	border-bottom-width: 1px !important;
	border-bottom-style: dotted !important;
}

a:hover {
    color: #009ddc !important;
    border-bottom: 1px #009ddc dotted;
}

.h-720 {
	min-height: 720px;
}

/* Specialty bullets */

.tickbox-list {
  list-style: none; /* Remove default bullets */
  padding-left: 0;   /* Remove default padding from the UL */
}

.tickbox-list li {
  position: relative; /* Needed for absolute positioning of the pseudo-element */
  padding-left: 30px; /* Space for the custom tickbox */
  margin-bottom: 10px; /* Space between list items */
  line-height: 1.5em; /* Improve readability for wrapped text */
  /* Remove align-items: flex-start; from li if you had it, as flex is on the ::before */
}

.tickbox-list li::before {
  content: '\2714'; /* Lighter checkmark */
  position: absolute;
  left: 0; /* Position the tickbox at the beginning of the padding */
  top: 3px; /* Align to the top of the list item */
  /* You might need a slight adjustment for perfect visual alignment depending on your font-size and line-height.
     Try adding a small 'top' value if 'top: 0' isn't perfect:
     top: 2px; 
  */

  /* Styling for the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px; /* Size of the circle */
  height: 20px;
  border: 2px solid green; /* Circle border */
  border-radius: 50%; /* Makes it a circle */
  background-color: green; /* Fill the circle */
  color: white; /* Color of the tick mark */
  font-size: 18px; /* Size of the tick mark */
  /* font-weight: bold; */ /* Optional: remove if you want a lighter tick */
}

.tickbox-list-white {
  list-style: none; /* Remove default bullets */
  padding-left: 0;   /* Remove default padding from the UL */
}

.tickbox-list-white li {
  position: relative; /* Needed for absolute positioning of the pseudo-element */
  padding-left: 30px; /* Space for the custom tickbox */
  margin-bottom: 10px; /* Space between list items */
  line-height: 1.5em; /* Improve readability for wrapped text */
  /* Remove align-items: flex-start; from li if you had it, as flex is on the ::before */
}

.tickbox-list-white li::before {
  content: '\2714'; /* Lighter checkmark */
  position: absolute;
  left: 0; /* Position the tickbox at the beginning of the padding */
  top: 3px; /* Align to the top of the list item */
  /* You might need a slight adjustment for perfect visual alignment depending on your font-size and line-height.
     Try adding a small 'top' value if 'top: 0' isn't perfect:
     top: 2px; 
  */

  /* Styling for the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px; /* Size of the circle */
  height: 20px;
  border: 2px solid white; /* Circle border */
  border-radius: 50%; /* Makes it a circle */
  background-color: white; /* Fill the circle */
  color: green; /* Color of the tick mark */
  font-size: 18px; /* Size of the tick mark */
  /* font-weight: bold; */ /* Optional: remove if you want a lighter tick */
}

.tickbox-list-blue {
  list-style: none; /* Remove default bullets */
  padding-left: 0;   /* Remove default padding from the UL */
}

.tickbox-list-blue li {
  position: relative; /* Needed for absolute positioning of the pseudo-element */
  padding-left: 30px; /* Space for the custom tickbox */
  margin-bottom: 10px; /* Space between list items */
  line-height: 1.5em; /* Improve readability for wrapped text */
  /* Remove align-items: flex-start; from li if you had it, as flex is on the ::before */
}

.tickbox-list-blue li::before {
  content: '\2714'; /* Lighter checkmark */
  position: absolute;
  left: 0; /* Position the tickbox at the beginning of the padding */
  top: 3px; /* Align to the top of the list item */
  /* You might need a slight adjustment for perfect visual alignment depending on your font-size and line-height.
     Try adding a small 'top' value if 'top: 0' isn't perfect:
     top: 2px; 
  */

  /* Styling for the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px; /* Size of the circle */
  height: 20px;
  border: 2px solid #009ddc; /* Circle border */
  border-radius: 50%; /* Makes it a circle */
  background-color: #009ddc; /* Fill the circle */
  color: white; /* Color of the tick mark */
  font-size: 18px; /* Size of the tick mark */
  /* font-weight: bold; */ /* Optional: remove if you want a lighter tick */
}

.tickbox-list-teal {
  list-style: none; /* Remove default bullets */
  padding-left: 0;   /* Remove default padding from the UL */
}

.tickbox-list-teal li {
  position: relative; /* Needed for absolute positioning of the pseudo-element */
  padding-left: 30px; /* Space for the custom tickbox */
  margin-bottom: 10px; /* Space between list items */
  line-height: 1.5em; /* Improve readability for wrapped text */
  /* Remove align-items: flex-start; from li if you had it, as flex is on the ::before */
}

.tickbox-list-teal li::before {
  content: '\2714'; /* Lighter checkmark */
  position: absolute;
  left: 0; /* Position the tickbox at the beginning of the padding */
  top: 3px; /* Align to the top of the list item */
  /* You might need a slight adjustment for perfect visual alignment depending on your font-size and line-height.
     Try adding a small 'top' value if 'top: 0' isn't perfect:
     top: 2px; 
  */

  /* Styling for the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px; /* Size of the circle */
  height: 20px;
  border: 2px solid #004763; /* Circle border */
  border-radius: 50%; /* Makes it a circle */
  background-color: #004763; /* Fill the circle */
  color: white; /* Color of the tick mark */
  font-size: 18px; /* Size of the tick mark */
  /* font-weight: bold; */ /* Optional: remove if you want a lighter tick */
}
.tickbox-list-now {
  list-style: none; /* Remove default bullets */
  padding-left: 0;   /* Remove default padding from the UL */
}

.tickbox-list-now li {
  position: relative; /* Needed for absolute positioning of the pseudo-element */
  padding-left: 30px; /* Space for the custom tickbox */
  margin-bottom: 10px; /* Space between list items */
  line-height: 1.5em; /* Improve readability for wrapped text */
  /* Remove align-items: flex-start; from li if you had it, as flex is on the ::before */
}

.tickbox-list-now li::before {
  content: '\2714'; /* Lighter checkmark */
  position: absolute;
  left: 0; /* Position the tickbox at the beginning of the padding */
  top: 3px; /* Align to the top of the list item */
  /* You might need a slight adjustment for perfect visual alignment depending on your font-size and line-height.
     Try adding a small 'top' value if 'top: 0' isn't perfect:
     top: 2px; 
  */

  /* Styling for the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px; /* Size of the circle */
  height: 20px;
  border: 2px solid #7277b7; /* Circle border */
  border-radius: 50%; /* Makes it a circle */
  background-color: #7277b7; /* Fill the circle */
  color: #ffffff; /* Color of the tick mark */
  font-size: 18px; /* Size of the tick mark */
  /* font-weight: bold; */ /* Optional: remove if you want a lighter tick */
}

.tickbox-list-purple {
  list-style: none; /* Remove default bullets */
  padding-left: 0;   /* Remove default padding from the UL */
}

.tickbox-list-purple li {
  position: relative; /* Needed for absolute positioning of the pseudo-element */
  padding-left: 30px; /* Space for the custom tickbox */
  margin-bottom: 10px; /* Space between list items */
  line-height: 1.5em; /* Improve readability for wrapped text */
  /* Remove align-items: flex-start; from li if you had it, as flex is on the ::before */
}

.tickbox-list-purple li::before {
  content: '\2714'; /* Lighter checkmark */
  position: absolute;
  left: 0; /* Position the tickbox at the beginning of the padding */
  top: 4px; /* Align to the top of the list item */
  /* You might need a slight adjustment for perfect visual alignment depending on your font-size and line-height.
     Try adding a small 'top' value if 'top: 0' isn't perfect:
     top: 2px; 
  */

  /* Styling for the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px; /* Size of the circle */
  height: 20px;
  border: 2px solid #671e77; /* Circle border */
  border-radius: 50%; /* Makes it a circle */
  background-color: #671e77; /* Fill the circle */
  color: white; /* Color of the tick mark */
  font-size: 18px; /* Size of the tick mark */
  /* font-weight: bold; */ /* Optional: remove if you want a lighter tick */
}

/* Header elements */

.Members--Main-navbar--Wrapper .Members--Main-navbar {
    max-width: 1300px; /* Limits the menu width */
    margin: 0 auto; /* Centers the menu horizontally */
    left: 0; /* Aligns it to the viewport's left edge */
    right: 0; /* Aligns it to the viewport's right edge */
}

.menu-item-container {
 	margin-left: 10px !important;
	margin-right: 10px !important;
	background-color: white !important;
}

/* Profile Elements */

.members-userprofilepicture-mini {
height: 140px !important;
width: 140px !important;
}
.members-userprofilepicture-mini.fixedpositionondesktop {
top: -120px !important;
}

/* Webpage Components */

@media (min-width: 992px) {
    .committee-wide .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
} /*was missing an end here which prevented styles on mobiles */
 
.features-icons-item {
  padding-top: 16px !important;
}

/*contain the control but allow to style background still full width*/
.innercontainer > div:first-of-type {
    max-width: 1260px;
    margin: 0 auto; /* Centers it */
}

.WebpageComponent-PageList {
    max-width: 1292px !important;
    margin: 0 auto !important; /* Centers it */
}

.WebpageComponent {
    padding-top: 10px;
    padding-bottom: 10px;
}

.WebpageComponent-Hero-2-0 {
    margin-top: 0px !important; /* prevent hero from folding under the menu */
}

.WebpageComponent-Hero-3-0 {
    margin-top: 0px !important; /* prevent hero from folding under the menu */
}

.HeroCaption h1 {
	font-size: 3.6rem !imporant;
	line-height: 1.1em !important;
}

.HeroCaption p {
	font-size: 22px !important;
}

.Header {
	padding-left: 0px !important;
	border-bottom: none !important;
}

.WebpageComponent-Call-to-action-2-0 .card {
	padding: 0px!important;
}

.WebpageComponent-Call-to-action-2-0 .card .col-lg-6 {
	padding: 0px !important;
}

.WebpageComponent-Call-to-action-2-0 .card .card-body {
	padding: 0px 24px 0px 24px !important;
}

.WebpageComponent-Call-to-action-2-0 .card .card-img-top {
 border-radius: 0px !important;
 padding: 0px !important;
}

.WebpageComponent-Program-Card .program_image_wrap img {
  max-width: 130px !important;
}

.WebpageComponent-Image-Card .card .card-bottom button {
  bottom: 10px;
  float: right;
  left: 10px;
  margin: auto;
  position: absolute;
}

.Members--Component--CallToAction--Text {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* Set the max height for any component like Hero 3*/
.WebpageComponent.height500 { max-height: 500px; overflow: hidden; min-height:unset!important}
.WebpageComponent.height600 { max-height: 600px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height700 { max-height: 700px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height800 { max-height: 800px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height900 { max-height: 900px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height1000 { max-height: 1000px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height1100 { max-height: 1100px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height1200 { max-height: 1200px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height1300 { max-height: 1300px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height1400 { max-height: 1400px; overflow: hidden; min-height:unset!important }
.WebpageComponent.height1500 { max-height: 1500px; overflow: hidden; min-height:unset!important }

/*make the whole background row a colour*/

.WebpageComponent-Colour-Teal {
    background: #004763 !important;
}

.WebpageComponent-Colour-AliceBlue {
    background: #F0F8FF !important;
}

.WebpageComponent-Colour-AliceBlue-CTA {
    background: #F0F8FF !important;	
}

.WebpageComponent-Colour-AliceBlue-CTA .Members--Component--CallToAction--ImageRight img {
    max-width: 70% !important;
	border-radius: 50% !important;
  }

.WebpageComponent-Colour-AliceBlue-CTA .Members--Component--CallToAction--ImageLeft img {
    max-width: 70% !important;
	border-radius: 50% !important;
  }

.WebpageComponent-Colour-AliceBlue-CTA .mx-auto {
 	text-align: left !important;
}

.WebpageComponent-Journal-CTA {
    background: #FFFFFF !important;	
}

.WebpageComponent-Journal-CTA .Members--Component--CallToAction--ImageRight img {
    max-width: 100% !important;
  }

.WebpageComponent-Journal-CTA .Members--Component--CallToAction--ImageLeft img {
    max-width: 100% !important;
  }

.WebpageComponent-Journal-CTA .mx-auto {
 	text-align: left !important;
}

@media (min-width: 1180px) {
.WebpageComponent-Journal-CTA .btn {
     margin-left: 16px !important;
  }
}

.WebpageComponent-TMABannerTealAliceBlue {
	background: linear-gradient(to right, #004763, #004763 50%, #F0F8FF 50%, #F0F8FF);
	padding: 0px!important;
}

.WebpageComponent-TMABannerTealAliceBlue .card {
	padding: 0px!important;
	background-color: #F0F8FF !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerTealAliceBlue .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerTealAliceBlue .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #004763 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerTealAliceBlue .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-Colour-AliceBlueTeal {
	background: linear-gradient(to right, #F0F8FF, #F0F8FF 50%, #004763 50%, #004763);
	padding: 0px!important;
}

.WebpageComponent-Colour-TealAliceBlue {
	background: linear-gradient(to right, #004763, #004763 50%, #F0F8FF 50%, #F0F8FF);
	padding: 0px!important;
}

.WebpageComponent-Colour-Now {
    background: #7277b7 !important;
}

.WebpageComponent-TMABannerNowGray {
	background: linear-gradient(to right, #7277b7, #7277b7 50%, #f3f1f1 50%, #f3f1f1);
	padding: 0px!important;
}

.WebpageComponent-TMABannerNowGray .card {
	padding: 0px!important;
	background-color: #f3f1f1 !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerNowGray .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerNowGray .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #7277b7 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerNowGray .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-Colour-Gray {
    background: #f3f1f1 !important;
}

/*make the whole background row a colour*/
.WebpageComponent-Colour-Teal {
    background: #004763 !important;
}

.WebpageComponent-Colour-Gold {
    background: #db9a00 !important;
}

.WebpageComponent-Colour-Blue {
    background: #009ddc !important;
}

.WebpageComponent-Colour-Green {
    background: green !important;
}

.WebpageComponent-Colour-WhiteGreen {
	background: linear-gradient(to right, white, white 50%, green 50%, green);
}

.WebpageComponent-Colour-WhiteGreen .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: green !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerGreenWhite {
	background: linear-gradient(to right, green, green 50%, white 50%, white);
}

.WebpageComponent-TMABannerGreenWhite .card {
	padding: 0px!important;
	background-color: #ffffff !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerGreenWhite .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerGreenWhite .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: green !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerGreenWhite .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-TMABannerGreenGray {
	background: linear-gradient(to right, green, green 50%, #f3f1f1 50%, #f3f1f1);
}

.WebpageComponent-TMABannerGreenGray .card {
	padding: 0px!important;
	background-color: #f3f1f1 !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerGreenGray .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerGreenGray .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: green !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerGreenGray .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-Colour-Lime {
    background: #D7FFD7 !important;
}
.WebpageComponent-Colour-Blue-CTA {
    background: #009ddc !important;
}

.WebpageComponent-Colour-Blue-CTA .Members--Component--CallToAction--ImageRight img {
    max-width: 70% !important;
	border-radius: 50% !important;
  }

.WebpageComponent-Colour-Blue-CTA .Members--Component--CallToAction--ImageLeft img {
    max-width: 70% !important;
	border-radius: 50% !important;
  }

.WebpageComponent-Colour-Blue-CTA .mx-auto {
 	text-align: left !important;
}

.WebpageComponent-TMABannerBlueWhite {
	background: linear-gradient(to right, #009ddc, #009ddc 50%, white 50%, white);
}

.WebpageComponent-TMABannerBlueWhite .card {
	padding: 0px!important;
	background-color: #ffffff !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerBlueWhite .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerBlueWhite .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #009ddc !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerBlueWhite .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-Colour-Purple {
    background: #671e77 !important;
}

.WebpageComponent-Foodbank {
 	background-color: #671e77 !important;
	background-image: url(https://turnaround.org.au/api/Website/DownloadFile?FileGuid=235a1a15-4c85-4a1c-9cf9-19f9924c7fdf#EXT=.png);
	background-repeat: repeat-x;
}

.WebpageComponent-Foodbank .Members--Component--CallToAction img {
    max-width: 100% !important;
  }

.WebpageComponent-Foodbank .mx-auto {
 	text-align: left !important;
}

.WebpageComponent-TMABannerPurpleWhite {
	background: linear-gradient(to right, #671e77, #671e77 50%, white 50%, white);
}

.WebpageComponent-TMABannerPurpleWhite .card {
	padding: 0px!important;
	background-color: #ffffff !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerPurpleWhite .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerPurpleWhite .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #671e77 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerPurpleWhite .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-TMABannerPurpleGray {
	background: linear-gradient(to right, #671e77, #671e77 50%, #f3f1f1 50%, #f3f1f1);
}

.WebpageComponent-TMABannerPurpleGray .card {
	padding: 0px!important;
	background-color: #f3f1f1 !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerPurpleGray .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerPurpleGray .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #671e77 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerPurpleGray .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}


.WebpageComponent-TMABannerGray {
	background-color: #f3f1f1;
	padding: 0px!important;
}

.WebpageComponent-TMABannerGray .card {
	padding: 0px!important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerGray .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerGray .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #004763 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerGray .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-TMABannerTealGray {
	background: linear-gradient(to right, #004763, #004763 50%, #f3f1f1 50%, #f3f1f1);
	padding: 0px!important;
}

.WebpageComponent-TMABannerTealGray .card {
	padding: 0px!important;
	background-color: #f3f1f1 !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerTealGray .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerTealGray .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #004763 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerTealGray .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-TMABannerGrayTeal {
	background: linear-gradient(to right, #f3f1f1, #f3f1f1 50%, #004763 50%, #004763);
	padding: 0px!important;
}

.WebpageComponent-TMABannerGrayTeal .card {
	padding: 0px!important;
	background-color: #f3f1f1 !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerGrayTeal .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerGrayTeal .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #004763 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerGrayTeal .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-TMABannerTealWhite {
	background: linear-gradient(to right, #004763, #004763 50%, #ffffff 50%, #ffffff);
	padding: 0px!important;
}

.WebpageComponent-TMABannerTealWhite .card {
	padding: 0px!important;
	background-color: #ffffff !important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerTealWhite .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerTealWhite .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #004763 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerTealWhite .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-TMABannerGreen {
	background-color: white;
	padding: 0px!important;
}

.WebpageComponent-TMABannerGreen .card {
	padding: 0px!important;
	border-radius: 0 !important;
}

.WebpageComponent-TMABannerGreen .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerGreen .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: green!important;
	min-height: 100px;
}

.WebpageComponent-TMABannerGreen .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-TMABannerWhite {
	background-color: #ffffff;
	padding: 0px!important;
}

.WebpageComponent-TMABannerWhite .card {
	padding: 0px!important;
}

.WebpageComponent-TMABannerWhite .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerWhite .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #004763 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerWhite .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-TMABannerAliceBlue {
	background-color: #F0F8FF;
	padding: 0px!important;
}

.WebpageComponent-TMABannerAliceBlue .card {
	padding: 0px!important;
}

.WebpageComponent-TMABannerAliceBlue .card .col-lg-6 {
	padding: 0px 0px !important;
}

.WebpageComponent-TMABannerAliceBlue .card .card-body {
	padding: 24px 24px 0px 24px !important;
	background-color: #004763 !important;
	min-height: 100px;
}

.WebpageComponent-TMABannerAliceBlue .card .card-img-top {
 border-radius: 0px !important;
 height: 85%;
 object-fit: cover !important;
}

.WebpageComponent-Icon-Card .iconcardbody {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.TMAResources .members--documentlibrarylist--imagewrapper {
   display: none; /* Hide the original image */
}

.Event-Field-TicketCapacity { 
    display: none;
}

.members--component--EventList3 .card .ribbon { 
    display: none;
}

/*carousel centre images*/
.react-multi-carousel-item .imageonly {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

    /* social--tool - BA : hide the connect / block bottons by request (for user profiles on user directory when logged in) - which is usually a great APP function for Conferences*/
    .social--tool {
        display: none !important;
    }

    /* Hide this field on the Profile page*/
    .Field--Member--Since {
        display: none !important;
    }

    /*text control*/
    @media screen and (min-width: 899px) {
        .members--text {
        padding-left: 24px;
        padding-top: 24px;
        padding-right: 24px;
        padding-bottom: 24px;
    }
}

@media screen and (max-width: 898px) {
    .members--text {
        padding-left: 8px;
        padding-top: 8px;
        padding-right: 8px;
        padding-bottom: 8px;
     }
}

/* Overlays */

.TMA1 .Overlay {
    background-color: transparent;
    background-image: url(https://turnaround.org.au/api/Website/DownloadFile?FileGuid=f06e0228-7e5f-4204-a8a8-502d62843df1#EXT=.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
   /* max-height: 200px; */
}

.TMA2 .Overlay {
    background-color: transparent;
    background-image: url(https://turnaround.org.au/api/Website/DownloadFile?FileGuid=2dae6ffe-141f-44a7-a72a-10f94ce2577d#EXT=.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    /* max-height: 200px; */
}

.TMA3 .Overlay {
    background-color: #004763;
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    /* max-height: 200px; */
}
/* Curved buttons */

.btn.btn-primary:not(.close-button) {
    padding: 6px 35px 6px 13px !important;
    border-radius: 0px !important;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    border-color: unset !important;
    border-width: 0px !important;
    outline: 0;
	font-size: 20px !important;
	line-height: 1.5em !important;
}

.btn.btn-secondary {
    padding: 6px 35px 6px 13px !important;
    border-radius: 0px !important;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    border-color: unset !important;
    border-width: 0px !important;
    outline: 0;
	font-size: 20px !important;
	line-height: 1.5em !important;
}

.btn.btn-delete {
    padding: 6px 35px 6px 13px !important;
    border-radius: 0px !important;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    border-color: unset !important;
    border-width: 0px !important;
    outline: 0;
	font-size: 20px !important;
	line-height: 1.5em !important;
}

.btn.btn-warning {
    padding: 6px 35px 6px 13px !important;
    border-radius: 0px !important;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    border-color: unset !important;
    border-width: 0px !important;
    outline: 0;
	font-size: 20px !important;
	line-height: 1.5em !important;
}

.btn.btn-link {
    padding: 6px 35px 6px 13px !important;
    border-radius: 0px !important;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    border-color: unset !important;
    border-width: 0px !important;
    outline: 0;
	font-size: 20px !important;
	line-height: 1.5em !important;
}

/* Footer */
.tma--footer {
    background-color: #009ddc;
    margin-top: -10px;
	margin-bottom: 0px !important;
}

@media screen and (min-width: 899px) {
    .footer-col-3 {
        min-width: 900px; /* Resets minimum width for smaller screens */
        text-align: left !important;
        margin-left: 0px !important;
        padding-left: 0px !important;
    }
    .footer-col-4 {
        margin-right: 0px !important;
        padding-right: 0px !important;
        text-align: right !important;
    }
}

    .tma--footer .footericon {
        color: #ffffff !important;
    }

    .tma--footer .social-icon {
        color: #ffffff !important;
    }

.Footer-Subscribe-Section button {
    background-color: #ffffff!important;
	color: #009ddc !important;
}

.footer-topsection {
    border-bottom: 1px solid #ffffff;
}

.footer-bottomsection {
    color:white!important;
    border-bottom: 1px solid #ffffff;
}

/*ipad and desktop settings*/


@media (min-width: 1300px) {
    .container {
        max-width: 1300px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
    }

    /* Only when scrolled too far top */
    .scrollable .members--headerPadding {
        max-width: 1300px;
        margin: 0 auto;
        left: 0;
        right: 0;
        max-height: 200px !important;
    }

    .members--headerPadding .Portal {
        padding-top: 90px;
    }

    .members--headerPadding .Members--Main-navbar--Wrapper .Members--Main-navbar {
        min-height: 130px;
    }

    /* Top Logo */
    .Members--Main-image {
        max-height: 100px !important;
    }

    .WebpageComponent-Body--scroll-up .Members--Main-navbar--Wrapper {
        min-height: 130px; /* Sets a minimum height for the navbar when scrolling up */
        width: 100%; /* Ensures the navbar takes the full width of the viewport */
        position: fixed; /* Fixes the navbar to the top of the viewport */
        top: -0px; /* Positions the navbar at the top */
        z-index: 10000; /* Ensures the navbar appears above other content */
        background-color: white;
    }

    .tma-footer {
        position: absolute;
        left: 0px;
        bottom: -1000px;
    }

    .tma-footer-inner {
        max-width: 1440px;
    }

    .Members--Main-image {
        width: 120px;
    }

    .mobile-menu-header-wrapper img {
        height: 80px;
    }

    .navbar {
        padding: 10px 20px !important;
    }

    .menu-item-container .nav-item-header {
        padding: 0px 0px 0px 0px !important;
    }

    .mobile-menu-header-wrapper .close-button {
        margin: 0px;
    }



    .menu-item-container .nav-item-header {
        font-size: 18px !important;
    }

    .WebpageComponent-Footer-3-0 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

        .WebpageComponent-Footer-3-0:first-of-type {
            padding-top: 20px !important;
        }


    .WebpageComponent-Footer:last-of-type {
        padding-bottom: 30px !important;
    }

        .WebpageComponent-Footer:last-of-type .footer-col-3 {
            padding-top: 13px;
        }


    .WebpageComponent-Footer-3-0:first-of-type .footer-bottomsection div:last-of-type {
        margin-top: auto;
        padding-left: 20px !important;
    }

    body {
        margin-bottom: 0px !important;
    }


    .submenu-container {
        background-color: #ffffff !important;
    }

    .footer-overlay1 {
        background-color: transparent;
        background-image: url(https://turnaround.org.au/api/Website/DownloadFile?FileGuid=b946c54e-c48e-48cc-9115-b943a53bacad#EXT=.png) !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.1;
        top: 0px;
        right: -400px;
    }

    .WebpageComponent-Body--scroll-down .mobile-menu-header-wrapper
    {
    height: 130px !important;
    }


    .footer-bottomsection .left-or-centre img {
        max-width: 160px;
    }

    .WebpageComponent-Body--scroll-down .Members--Main-navbar {
        display: flex !important;
        background-color: #ffffff !important;
        z-index: 1;
        top: -10px;
    }

    .WebpageComponent-Body--scroll-down .Members--Main-navbar--Wrapper {
        min-height: 130px !important;
        background-color: #ffffff !important;
        z-index: 1;
        top: -10px;
    }

    .Members--Main-navbar--Wrapper {
        min-height: 130px !important;
        background-color: #ffffff !important;
        position: fixed;
        width: 100%;
        z-index: 1;
        top: -10px;
    }
}

/*mobile settings*/
/*ipad and desktop settings*/
@media (max-width: 1299px) {
    /*Needed this part for z-index so menu is always on top*/
    .WebpageComponent-Body--scroll-down .mobile-menu-header-wrapper {
        height: 90px !important;
        display: flex !important;
        background-color: #ffffff !important;
        position: fixed;
        width: 100%;
        z-index: 1;
    }

    .WebpageComponent-Body--scroll-down .Members--Main-navbar {
        background-color: #ffffff !important;
        position: fixed;
        width: 100%;
        z-index: 1;
        display: flex;
        top: -10px;
    }

    /*bottom margin*/
    body {
        margin-bottom: 0px !important;
    }
}