/*VERSION CONTROL
LAST UPDATE BY: Senio
DATE: 13 May 2025
WR: 451894
Alfresco: https://alfresco.wgtn.cat-it.co.nz/share/page/site/nz---elearning/documentlibrary#filter=path%7C%2FClients%2F2%2520Current%2520Clients%2FT%25u016B%2520%25u0100tea%2FTheme%7C&page=1

*/

/* Three Tiles with background images */
/* Upcoming events */

.page-wrapper {
      font-family: Arial, sans-serif;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow-x: auto;
    }

    .tile-grid {
      display: flex;
      flex-wrap: nowrap;
      gap: 20px;
      max-width: 100%;
      padding: 20px;
      width:100%;
    }

    .tile {
      background-color: #222;
      width: 30%;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow: hidden;
    }

    .tile:hover {
      transform: translateY(-5px);
    }

    .tile-image {
      height: 150px;
      background-size: cover;
      background-position: center;
      border-radius: 12px 12px 0 0;
    }

    .tile-content {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tile-title {
      margin: 0 0 10px;
      color: #f04e4e;
    }

    .tile-description {
      text-align: center;
    }


/******* Card with image above and text below ***************/

.card-1 {
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  padding: 20px;
  border: none; 
}

.card-image {
  width: 100%;
  height: auto;
  display: block;
}

.card-text {
  padding: 16px;
  font-size: 1.1rem;
  color: #333;
}

/************ Text beside image **************/

.image-text-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.side-image {
  width: 300px;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}

.side-text {
  flex: 1;
  font-family: Arial, sans-serif;
  color: #333;
  min-width: 250px;
}

/* Responsive behavior for small screens */
@media (max-width: 768px) {
  .image-text-row {
    flex-direction: column;
    text-align: center;
  }

  .side-image {
    width: 100%;
    max-width: 100%;
  }

  .side-text {
    width: 100%;
  }
}



/*variabale declarations*/
:root {
    --background-color: #6495ed;
    --header-color: #faf0e6;
    --text-color: #171717;
    --primary-color: ;
    --secondary-color: ;
    --text-color: ;
    --header-color: ;
    --white: #fff;
    --black: #000;
    --hyperlink: ;
    --accent-1: ;
    --accent-2: ;
    --accent-3: ;
    --accent-4: ;
}

/*SITE ELEMENTS*/

.card,
.course-section .section-item {
    border-radius: 0px;
}

.drawer {
    background-color: #eaf2fa;
}

alert-success, .environmenttable .ok {
    color: #1c3f1a;
    background-color: #d7e4d6;
    border-color: #c6dac6;
}

/*font, text and headings*/
body {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 1rem;
}
h1, h2, h3, h4, h5, h6 {
    color: #222f65;
}

a {
    color: #3c9ed0;
}

/*site header*/

.navbar.fixed-top {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 70px;
}

.navbar.fixed-top .navbar-brand .logo {
    max-height: calc(88px - 20px - (0.25rem * 2));
}

.moremenu .nav-link.active {
    border-bottom-color: #3c9ed0;
}
.moremenu .nav-link.active:focus, .moremenu .nav-link.active:hover {
    border-bottom-color: #ee6123;
}

.navbar .primary-navigation .navigation .nav-link {
    color: #222f65;
    font-weight: 600;
}

/*site footer*/



/*buttons*/
.btn {
    border-radius: 0px;
}
.btn-primary {
    background-color: #3c9ed0;
    border-color: #3c9ed0;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #215489;
    border-color: #215489;
}

.btn-secondary {
    background-color: #32b7b2;
    border-color: #32b7b2;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #258985;
    border-color: #258985;
}

/*forms*/
.maincalendar .calendarmonth td.today .day-number-circle {
    background-color: #3c9ed0;
}

/*login page*/


/*home page*/
body#page-site-index.limitedwidth #page.drawers .main-inner {
    max-width: none;
}

.sitetopic .section-item {
    margin-bottom: 0;
    border-radius: 0;

}

#page-site-index.editing .modtype_folder {
  display: block !important;
}

#page-site-index .modtype_folder {
  display: none !important;
}
#page-site-index.editing .modtype_resource  {
   display: block !important;
}

#page-site-index .modtype_resource {
  display: none !important;
}

#page-site-index .course-section .section-item {
    padding: 0;
    border: 0;
    border-radius: 0;
}
.tool_catalogue_tiles .tool_catalogue_course .tool_catalogue_course_title {
    font-size: 20px;
    color: #3c9ed0;
    font-weight: 700;
}
#page-site-index .course-content {
    margin-top: 0;
    margin-bottom: 50px;
}

/*******HERO SECTION******/
.hero-element {
    display: flex;
    justify-content: center;
    background: #3c9ed0;
    padding: 20px;
}

.hero-element img {
    max-width: 80%;
    align-self: center;
    border: 1px white solid;

}


.course-section .summarytext .hero-element img {
    border-radius: 0px;
}

/**********WELCOME BLOCK*******/

.welcome-block {

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10px;
    gap: 40px;

}

.welcome-block--maincontent {
    flex: 2;
}

.welcome-block--side {
    flex: 1;
    border-left: 1px solid #292f32;
    padding: 0 20px;

}

.welcome-block--maincontent-section {
    display: flex;
}


.welcome-block--maincontent-section p {
    flex: 400px;
    font-size: 18px;
    line-height: 24px;
}

.welcome-block--maincontent-section h2 {
    flex: 20px;
    font-size: 32px;
    color: #222f65;
}

.welcome-block--side h2,
.welcome-block--side p,
.welcome-block--side a {
    text-align: center;
}

.welcome-block--side a {
    font-weight: 700;
    font-size: 18px;
    color: #3c9ed0;

}
.welcome-block--side p {
font-size: 18px;
line-height: 24px;
}
.welcome-block--side h2 {
font-size: 32px;
color: #222f65;
}

/*catalogue*/

.rounded-top {
    border-radius: 0px !important;
}

.tool_catalogue_tiles .tool_catalogue_course .tool_catalogue_course_image, .tool_catalogue_list .tool_catalogue_course .tool_catalogue_course_image {
    min-height: 11rem;
    max-height: 11rem;
}
#page-course-index-category.fullwidth.centered-main div[role="main"] .centered-content {
    max-width: 1440px;
}

/*dashboards*/
body#page-my-index.limitedwidth #page.drawers .main-inner {
    max-width: 1440px;
}

/*blocks*/


/*COURSE PAGE*/
.courseindex .courseindex-item {
    border-radius: 0px;
}
.courseindex .courseindex-item.pageitem {
    background-color: #3c9ed0;
}


/*tiles format*/
.format-tiles .course-content ul.tiles .tile.tilestyle-1, .format-tiles .course-content ul.tiles .tile.tilestyle-2 {
    border-top-color: #3d9fd0;
}

.format-tiles .phototile .progress-indic, .format-tiles .subtile.hasphoto .activitytype, .format-tiles.editing .subtile.hasphoto .editable-title {
    background-color: #3c9ed0;
}

.format-tiles .course-content ul.tiles .tile.phototile.tilestyle-1 .photo-tile-text h3, .format-tiles .course-content ul.tiles .tile.phototile.tilestyle-2 .photo-tile-text h3 {
    background-color: #3c9ed0;
}

.format-tiles .section li.activity.label h1, .format-tiles .section li.activity.label h2, .format-tiles .section li.activity.label h3, .format-tiles .section li.activity.label h4 {
    color: #222f65;
}
.format-tiles .course-content li.activity.label h1, .format-tiles .course-content .section li.activity.label h2, .format-tiles .course-content li.activity.label h3, .format-tiles .course-content li.activity.label h4, .format-tiles .editor_atto_content_wrap h1, .format-tiles .editor_atto_content_wrap h2, .format-tiles .editor_atto_content_wrap h3, .format-tiles .editor_atto_content_wrap h4 
 {
border-left: #3c9ed0 solid 5px;
 }

 .format-tiles .sectiontitle::after, .format-tiles .badge-info {
    background-color: #3c9ed0;
 }
/*COURSE ACTIVITIES*/

/*quiz*/

/* Dashboard */

/* Course overview block */

.block_myinprogress > .card-body .content {
  
}

/******* *************************************** ****************/
/******* Tū Ātea templates start below ***************/
/******* *************************************** ****************/

.ta-vertical-card {
	 flex-direction: column;
	 font-family: "Roboto";
	 min-width: 354px;
	 max-width: 32%;
}

.ta-vertical-card .ta-event-details {
	 display: flex;
	 flex-direction: column;
	 height: 65%;
	 padding: 22px;
	 align-items: flex-start;
}

.ta-vertical-card h2 {
	 margin: 0px 0px 10px;
	 font-size: 1.2rem;
}

.ta-vertical-card .ta-image-container {
	 overflow: hidden;
	 position: relative;
	 width: 100%;
	 height: 280px;
	 margin-top: -10%;
}

.ta-vertical-card .ta-image-container--overlay {
	 position: absolute;
	 opacity: 0;
	 height: 200%;
	 width: 100%;
	 background: rgb(66, 59, 59);
	 transition: 0.3s ease-in-out;
}

.ta-vertical-card:hover .ta-image-container--overlay {
	 opacity: 0.65;
}

.ta-vertical-card .ta-event-image {
	 position: absolute;
	 width: 100%;
	 height: 110%;
	 object-fit: cover;
	 transition: 0.45s cubic-bezier(0.46, -0.05, 0.55, 1.2);
}

.ta-vertical-card:hover .ta-event-image {
	 transform: scale(1.2);
}

.ta-vertical-card .ta-button {
	 margin-top: auto;
	 background: rgb(39, 84, 138);
	 color: rgb(255, 255, 255);
	 padding: 10px 24px;
	 border: medium;
	 cursor: pointer;
	 border-radius: 30px;
	 transition: 0.3s ease-in-out;
	 text-decoration: none;
}

.ta-vertical-card .ta-button:hover {
	 color: white;
	 background: rgb(58, 111, 175);
	 text-decoration: none;
}

@media (min-width: 1400px) {
	
}
.ta-horizontal-card {
	 flex-direction: row;
	 min-width: 100px;
	 min-height: 360px;
	 margin: auto auto 20px;
}

.ta-horizontal-card .ta-event-details {
	 padding: 30px;
	 flex-grow: 1;
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 max-width: 60%;
}

.ta-horizontal-card h2 {
	 margin: 0px 0px 10px;
}

.ta-horizontal-card .ta-image-container {
	 width: 40%;
	 overflow: hidden;
	 position: relative;
}

.ta-horizontal-card .ta-image-container--overlay {
	 position: absolute;
	 opacity: 0;
	 height: 100%;
	 width: 100%;
	 background: rgb(66, 59, 59);
	 transition: 0.3s ease-in-out;
}

.ta-horizontal-card:hover .ta-image-container--overlay {
	 opacity: 0.5;
}

.ta-horizontal-card .ta-event-image {
	 position: absolute;
	 width: 120%;
	 height: 120%;
	 margin-left: -5%;
	 object-fit: cover;
	 transition: 0.45s cubic-bezier(0.46, -0.05, 0.55, 1.2);
}

.ta-horizontal-card:hover .ta-event-image {
	 transform: scale(1.15);
}

.ta-horizontal-card .ta-button {
	 align-self: flex-end;
	 margin-top: auto;
	 margin-right: 6px;
	 margin-bottom: 6px;
	 background: rgb(39, 84, 138);
	 color: rgb(255, 255, 255);
	 padding: 12px 24px;
	 border: medium;
	 cursor: pointer;
	 border-radius: 30px;
	 transition: 0.3s ease-in-out;
	 text-decoration: none;
}

.ta-horizontal-card .ta-button:hover {
	 color: rgb(255, 255, 255);
	 background: rgb(58, 111, 175);
	 text-decoration: none;
}

@media (min-width: 768) {
	
  .ta-horizontal-card { flex-direction: column;
}
}
.ta-home {
	 max-width: 1440px;
	 margin: auto;
}

.ta-heading {
	 margin-top: 0px;
}

.ta-heading h2 {
	 font-family: "Barlow", sans-serif;
	 font-size: 4.1rem;
	 font-weight: 500;
	 letter-spacing: 1.1px;
	 margin-bottom: 10px;
}

.ta-heading p {
	 letter-spacing: 0.9px;
	 font-size: 1.3rem;
}

.ta-video-container video {
	 width: 100%;
}

.ta-contact__container {
	 background-color: rgb(221, 221, 221);
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 width: 75%;
	 padding: 40px 0px;
	 margin: auto;
}

.ta-contact__container h2 {
	 font-family: "Barlow", sans-serif;
	 font-weight: 500;
	 font-size: 4.1rem;
	 margin: 10px 0px;
	 color: rgb(39, 84, 138);
}

.ta-contact-details--container {
	 display: flex;
	 flex-direction: row;
	 justify-content: space-around;
	 margin: 48px 0px 8px;
}

.ta-contact__panel {
	 max-width: 32%;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
}

.ta-contact__panel .ta-button {
	 margin: 20px 0px;
}

.ta-contact__panel .ta-icon-holder {
	 color: white;
	 min-height: 92px;
}

.ta-contact__panel i {
	 color: rgb(255, 255, 255);
}

.ta-content {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 justify-content: space-between;
	 min-height: 150px;
}
.fml-block {
	 display: flex;
	 flex-direction: row;
	 height: 400px;
	 overflow-x: scroll;
}

.fml-img--container {
	 min-width: 50%;
	 max-width: 50%;
	 max-height: 400px;
	 overflow: hidden;
}

.fml-img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 transform: scale(1.2);
}

.fml-info__container {
	 height: 100%;
	 padding: 0px 40px;
	 box-sizing: border-box;
	 min-width: 600px;
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
}
.ta-dashboard__container {
	 padding: 18px;
}

.ta-home__section {
	 margin: 64px 0px;
}

.ta-hz-center-align {
	 display: flex;
	 flex-direction: row;
	 width: 100%;
	 justify-content: center;
}

.ta-heading--highlight {
	 background-color: rgb(39, 84, 138);
	 padding: 18px 28px;
	 margin-bottom: 2rem;
}

.ta-heading--highlight h2 {
	 color: white;
}

.ta-inner-heading {
	 margin: 12px;
}

.ta-eventcard-container {
	 margin-right: auto;
	 width: 100%;
}

.ta-event-description {
	 margin-top: 12px;
	 font-size: 0.75em;
	 color: rgb(51, 51, 51);
}

.ta-icon {
	 padding-right: 18px;
}

.ta-row {
	 display: flex;
	 flex-flow: wrap;
	 justify-content: center;
	 gap: 2rem;
	 margin: 12px auto;
}

.ta-row > * {
	 flex: 1 1 0%;
}

.ta-event-card {
	 position: relative;
	 display: flex;
	 border-radius: 8px;
	 overflow: hidden;
	 box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 14px;
	 cursor: default;
}

.ta-event-card p {
	 font-size: 0.9rem;
	 margin: 18px 0px;
}

.ta-event-card p.ta-datetime {
	 margin: 2px;
	 font-weight: 600;
}

.ta-event-card p.ta-location {
	 margin: 2px;
	 font-weight: 400;
}

.ta-event-card a {
	 font-size: 0.9rem;
}

.ta-button {
	 background: rgb(39, 84, 138);
	 color: rgb(255, 255, 255);
	 padding: 16px 28px;
	 border: medium;
	 cursor: pointer;
	 border-radius: 30px;
	 transition: 0.3s ease-in-out;
	 text-decoration: none;
}

.ta-button i {
	 margin-right: 8px;
}

.ta-button:hover {
	 color: white;
	 background: rgb(58, 111, 175);
	 text-decoration: none;
}