/* global styles */
h2 {font-size: 1.5rem;margin-bottom: 20px;color: #333}
.page-title {position:relative}
.resource-body{margin-bottom:20px}
.breadcrumb{position:absolute;top:0px;right:0px;font-size:13px;margin-bottom:8px}
.breadcrumb ul {display: flex;list-style: none;padding: 0;margin: 0;}
.breadcrumb ul li a {text-decoration:none;color: rgba(var(--color-foreground), 0.75)}
.breadcrumb ul li a:hover {text-decoration:underline}
.breadcrumb .delimiter{padding: 0 2px 0 0}
.page-width{max-width:1440px}

.resource-page .content-top {margin-bottom:30px;text-align:left}
.resource-page .content-bottom {margin-top:20px;text-align:left}
.resource-box__picture img.no-image {width:150px;opacity:0.8}

/* toogle menu */
#mobile-menu-toggle {position:relative;float: left;width: 35px;height: 30px;background: url(images/filter.svg) no-repeat 0px 4px;background-size: 30px;opacity: 0.5}
#mobile-menu-toggle .icon {position:absolute;left:0px;width:30px}
#mobile-menu-toggle span {display:none;font-size: 1.5rem;letter-spacing: 0.06rem;font-family: var(--font-body-family);font-style: var(--font-body-style);font-weight: var(--font-body-weight);color: rgba(var(--color-foreground), 0.75);position:initial !Important}

@media all and (max-width: 767px) { /*Mobile*/
  .resource-page {width:100%;padding:0 20px;}
  .resource-page h1{font-size:19px}
  .center {width:100%;padding:15px 0px}
  .resource-grid {grid-template-columns: repeat(2, 1fr)}
  .resource-grid .resource-box {flex: 0 0 calc(50% - 10px); background-color: lightblue;text-align:center;padding: 2px;border: 1px solid #e5e5e5;box-sizing: border-box} 
  .resource-page .info {display: block;clear: both;height: 40px}
  .resource-box__picture{height:200px}
  .resource-box__picture img{display:inline-block;max-width:90%}
  .side {position: absolute;top: 0;left:0px;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1;width: 100%;margin-bottom: 0 !important;transform: translateX(-100%);transition: transform 0.3s ease-in-out; z-index:999}
  .side.active {transform: translateX(0)}
  .side .filter-container {position:fixed;margin:0px;border-radius: 0px;height: 100%;overflow:auto;width:80%}
  .side.hide {transform: translateX(-100%);opacity: 0}
  body.hidescroll {overflow: hidden;}

  /*#mobile-menu.nonvisible {display: none}*/
  #mobile-menu:not(.nonvisible) {display: block;z-index:100}
  #mobile-menu-close {width: 26px;height: 26px;position:absolute;top:17px;right: 16px;background-color:#fff}

  .resource-container.pdf iframe {height:55vh} 
  .resource-page .page-title{display:grid}
  .resource-page .page-title h1{order: 2;margin-top: 10px;}
  .resource-page .page-title .breadcrumb{order:1;position: relative;}
  .resource-page .content-top {margin-bottom:10px}
  .resource-container iframe{height:230px}
}

@media (min-width: 768px) { /*Desktop*/
  .resource-page h1 {max-width: 45%;padding: 0px;margin: 0 0 15px;}
  .resource-page .side{float:left;width:250px}
  .resource-container iframe{height: 100%}
  /*.resource-page h1{font-size:22px}*/
  .resource-page .center{float:right;width:calc(100% - 270px);padding:20px 0}
  .resource-box__picture {height:250px}
  .resource-box__picture img {width:170px;padding-top:10px}
  #mobile-menu-toggle{display:none !important}
  #mobile-menu-close{display:none}
}

.resource-page {margin:20px auto 40px;display:flow-root}
.resource-page__pager {display:block;width:100%;text-align:center;margin-top:15px}
.resource-page__pager button {border:1px solid #aaa;padding: 6px 10px}
.resource-page__pager button:first-child {margin-right: 6px}

.resource-container {display:flex;flex-wrap: wrap;margin-bottom:20px}
.resource-container iframe{width: 100%;inset:0;border:0;}
.resource-container h1 {font-size:20px}
.resource-container .records {width:100%;height:40px;text-align:left}
select {width: 100%;padding: 8px;border: 1px solid #e5e5e5;border-radius: 4px;font-size: 1rem}
label {display: block;margin-bottom: 5px}
button {padding: 2px 0px 7px;font-size: 1rem;border: none;border-radius: 4px;cursor: pointer}
button.apply-filters {background-color: #0A285A;color: white;margin-right: 10px}
button.reset-filters {background-color:#f8f9fa;color: #333;border:1px solid #e5e5e5}
#loading-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;justify-content:center;align-items:center;z-index:1000;display:none}

/* centered loading icon and message */
.loading-icon {text-align: center;color: white;font-size: 18px}

/* Loading spinner image styling */
.loading-icon img {width:50px;height:50px;margin-bottom:10px}

/* search input */
.search-container {position: relative;display: flex;align-items: center;width: 100%;margin-top:15px}
.search-container input[type="text"] {border:1px solid #e5e5e5;border-radius:6px;padding:8px 60px 8px 8px;width: 100%}
.search-container input[type="text"]:focus {outline: none;border: 1px solid #e5e5e5}
.search-container input[type="text"]::placeholder  {color:#ccc;opacity: 0.8;}
.search-icon, .close-icon {position: absolute;right: 10px;cursor: pointer;display: flex;align-items: center;}
.search-icon {right:8px;opacity:0.4}
.close-icon {width:16px;right: 30px;color:#aaa}


.resource-box__type{padding:4px;font-size:14px;border: 1px solid #1c4587;text-align:center}
.resource-box__type.t1 {border:1px solid #1c4587;color:#1c4587}
.resource-box__type.t2 {border:1px solid #4fd1c5;color:#4fd1c5}
.resource-box__type.t3 {border:1px solid #fe0201;color:#fe0201}

/* resource tab */
.resource-tab{position:relative}
.resource-tab ul {display: flex;list-style: none;padding: 0;margin: 0;}
.resource-tab ul li a{display:block;color:#2C3E50;padding: 6px 20px;text-decoration: none;margin-right:15px;border-radius:8px;white-space:nowrap;background-color:#eee;font-size:14px;}
.resource-tab ul li a.active, .resource-tab ul li a:hover{background-color: #2C3E50;color:#fff}

/*****************************************************************/
/********************* resource detail page **********************/
/*****************************************************************/
.resource-page__title{position:relative}
.resource-page__summary {margin-bottom:20px;padding-top:10px}
.resource-page__summary button.download {background-color: #2C3E50;border: none;padding:9px 15px 8px 36px;color: #fff;text-decoration: none;margin-left:25px;border-radius:16px;background-image: url(images/download.png);background-size: 18px;background-repeat: no-repeat;background-position:14px 8px;font-size:13px}
.resource-page__summary button.download:hover {background-color: #1a252f;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15)}
.resource-page__desc{margin-top:20px}
.resource-page__overview{margin-bottom:20px}

/* resource box */
.resource-grid {width:100%;display: grid;gap:8px}
.resource-grid .resource-box {position:relative;float: left;border: 1px solid #eee;background-color: #fff;text-align:center;margin-bottom:10px;padding-bottom:3px}

/* resource grid */
.resource-container {position:relative;max-width:100%;overflow:hidden;}
.resource-container.pdf {aspect-ratio:816/1056;}
.resource-container.ppt, .resource-container.pptx {aspect-ratio:781/600;}
.resource-container.xls, .resource-container.xlsx {aspect-ratio:781/400;}
.resource-container.video iframe{width:100%;border:none}

.resource-box__title {line-height:22px}
.resource-box__title a {display:block;color:#000;text-decoration:none;padding:4px 0;font-weight:bold}
.resource-box__title a:hover{color:#0A285A}
.resource-box__picture{display: flex;align-items:center;justify-content:center;background: linear-gradient(#f0f5f7, #cbd1d8);text-align:center;padding: 6px 0 0;overflow: hidden;padding-top:10px}
.resource-box__featured{position: absolute;background-color:#CCAA19;color: #fff;padding:0px 8px;font-size: 14px}
.resource-box__ext{font-size:13px}


/* resource grid / list */
.resource-options{width:100%;margin-bottom:20px;border:1px solid #e5e5e5;border-width:1px 0 1px 0;padding:5px 0px;color:#000}
.resource-options .viewmode a {display: inline-block;width: 24px; height: 32px;margin: 0 0 0 12px;background-position: center;background-repeat: no-repeat;opacity: .5;}
.resource-options .results{float:left}

.resource-options .resource-options__records{float:left;line-height:28px;}
.resource-options .resource-options__records.loading { position: relative; }
.resource-options .resource-options__records.loading::after { content: ""; position: absolute; left: 0; top: 0; color: #666; font-style: italic; }

.resource-options .viewmode{float:right;display:flex;align-items:center}
.resource-options .viewmode a.grid {background-image: url(images/view-grid.png)}
.resource-options .viewmode a.list {background-image: url(images/view-list.png)}
.resource-options .viewmode a.selected {opacity: 1}

/* facet filter styles */
.filter-container {width: 250px;padding: 20px;background: #fff;border:1px solid #e5e5e5;margin: 20px 0px} /*border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)*/
.filter-container .filter-group label, 
.filter-container .filter-group input {font-size:14px}
.filter-container h2 {font-weight:lighter;font-size:22px;margin:0 0 8px}
.filter-container__group {font-weight:bold;margin-bottom:10px;display:none}
.filter-group {margin-bottom: 20px}
.filter-header {display: flex;justify-content: space-between;align-items: center;cursor: pointer}
.filter-header label {font-weight:bold;font-size:14px}
/*.toggle-button {background: none;border: none;font-size: 4rem;cursor:pointer;line-height: 0px}
.toggle-button.collapsed{font-size:2rem}*/
.toggle-button {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
  background:none;
}

.toggle-button::before,
.toggle-button::after {
  content: '';
  position: absolute;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Horizontal bar (minus) */
.toggle-button::before {
  width: 12px;
  height: 2px;
}
.toggle-button.collapsed::after {
  width: 2px;
  height: 12px;
  background-color: #333;
}

.filter-content {margin-top: 10px}
select {width: 100%;padding: 8px;border: 1px solid #e5e5e5;border-radius: 4px;font-size: 1rem}
label {display: block;margin-bottom: 5px}
button {padding: 2px 0px 7px;font-size: 1rem;border: none;border-radius: 4px;cursor: pointer}
button.apply-filters {background-color: #0A285A;color: white;margin-right: 10px}
button.reset-filters {background-color:#f8f9fa;color: #333;border:1px solid #e5e5e5}

@media (max-width: 480px) {
  .resource-page__title {display: flex;flex-direction:column;margin-top:10px}
  .resource-page__title h1 {width:100%}
  .resource-page__title .breadcrumb{margin:0;text-align:left;height:36px;overflow-y:auto;position:relative;order:1}
  .resource-page__title .breadcrumb ul {display: inline-flex;white-space: nowrap}
  .resource-page__title h1{margin:5px 0px 20px;order:2}
  .resource-tab ul {overflow-y:auto;padding:5px 0px 0px 0px} 
  .resource-tab ul li {min-height:35px} 
  .resource-tab ul li a {margin-right:5px}

  .resource-page__summary button.download{margin:5px 0 0;display:block;padding:5px 15px 8px 36px}
   /*.breadcrumb{overflow-y:hidden}
  */
}

@media(min-width: 481px){
  .resource-container.video {padding-bottom: 75%}
}

@media (min-width: 1024px) {
    .resource-container iframe{position:absolute}
    .side { float: left }
    /*.resource-page {width:1300px;margin:auto}*/
    .resource-grid {grid-template-columns: repeat(4, 1fr)}
    .resource-grid:nth-child(4n+1){}
    /*.resource-container.pdf iframe {height:1220px}*/
    .resource-container.video {position: relative;width: 80%;padding-bottom: 45.25%;height: 0;overflow: hidden;margin:0 auto;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);aspect-ratio: 16 / 9}
    /*width: 100%;padding-bottom: 56.25%;*/
    .resource-container.video iframe {position: absolute;top: 0;left: 0;height:100%}


}

/* facet filters */
.custom-checkbox {width: 16px;height: 16px;border: 2px solid #e5e5e5;display: inline-block;margin-right: 8px;border-radius: 4px;background-color: white;vertical-align: middle;transition: background 0.2s ease;}
.facet-checkbox:checked + .custom-checkbox {background-color: #2C3E50;border-color: #2C3E50;position: relative;}
.facet-checkbox:checked + .custom-checkbox::before {content: "✔";font-size: 13px;background-color: #2C3E50;color: #fff;position:absolute;line-height:14px;left:1px}
.facet-checkbox {display: none !important}

    .resource-page.view .breadcrumb{position:relative}
    .resource-page.view h1{min-width:100%}

/*resource-grid*/
.resource-grid .resource-box__title{padding:4px 10px}
.resource-grid .resource-box__desc{display:none}
.resource-grid .resource-box__tags{font-size:14px;text-align: left;display:inline}
.resource-grid .resource-box__number{display:inline;padding-left:10px}
.resource-grid .resource-box__lang{display:none}
.resource-grid .resource-box__title {text/align:center}

/*resource-list*/
.resource-list{width:100%}
.resource-list .resource-box {display: flex;flex-wrap: wrap;border: 1px solid #e5e5e5;padding:10px 15px 15px;margin-bottom: 20px;flex-direction:row;gap:1rem}
.resource-list .resource-box__featured,
.resource-list .resource-box__picture{display:none}
.resource-list .resource-box__title{order:1;min-height: initial;width:100%;text-align:left}
.resource-list .resource-box__desc{order:2;text-align:left;width:100%;margin-bottom:10px}
.resource-list .resource-box__type {order:3;flex-direction: column;border-radius:14px;padding:0px 10px}
.resource-list .resource-box__number{order:4}
.resource-list .resource-box__lang{order:5;padding-left:10px;border-left:1px solid #ccc}
.resource-list .resource-box__tags {order:6;padding-left:10px;border-left:1px solid #ccc}
.resource-list .resource-box__sep{display:none}

/*hide shopify breadcrumbs*/
.breadcrumbs{display:none}


/* Tab Navigation Arrows - Desktop Only - Resource */
    @media (min-width: 768px) {
      .resource-tab {position: relative;display: flex;align-items: center;}
      .tab-arrow {background: rgba(255, 255, 255, 0.9);border: 1px solid #ddd;border-radius: 4px;padding: 5px;cursor: pointer;z-index: 10;transition: all 0.2s ease;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
      .tab-arrow:hover {background: #fff;box-shadow: 0 4px 8px rgba(0,0,0,0.15);}
      .tab-arrow:disabled {opacity: 0.3;cursor: not-allowed;}
      .tab-arrow svg {width: 15px;height: 15px;color: #666;}
      .tab-arrow-left {margin-right: 8px;}
      .tab-arrow-right {margin-left: 8px;}
      .tab-scroll-container {flex: 1;overflow: hidden;position: relative;}
      .tab-list {display: flex;overflow-x: auto;scroll-behavior: smooth;scrollbar-width: none;-ms-overflow-style: none;white-space: nowrap;margin: 0;padding: 0;}
      .tab-list::-webkit-scrollbar {display: none;}
      .tab-list li {flex-shrink: 0;}
    }
    
    /* Mobile - hide arrows */
    @media (max-width: 767px) {
      .tab-arrow {display: none !important;}
      .tab-scroll-container {width: 100%;}
      .tab-list {display: flex;/*flex-direction: column;*/}
    }


/*************************************************************************/
/* Selected Filters Styling */
/*************************************************************************/
#selected-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 15px; padding: 0; }
#selected-filters.hidden { display: none; }
.selected-filter-tag { display: inline-flex; align-items: center;border: 1px solid #ddd;padding: 0px 12px; font-size: 12px; color: #333; gap: 6px; }
.selected-filter-tag .remove-filter { background: none; border: none; color: #666; cursor: pointer; font-size: 16px; padding: 0; margin-left: 4px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; }
.selected-filter-tag .remove-filter:hover { background-color: #ddd; color: #333; }
.clear-all-filters { background-color: transparent; color: #2C3E50; border: none; border-radius: 20px; padding: 6px 0px; font-size: 12px; cursor: pointer; transition: background-color 0.2s; }
.clear-all-filters:hover {text-decoration: underline;}

/* Loading States */
#loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.3); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 100; }
#loading-overlay.show { display: flex; }
.loading-icon { text-align: center; }
.loading-icon p { margin-top: 10px; font-size: 16px; color: #333; }

/* Loading spinner */
.loading-spinner { width: 32px; height: 32px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; }

/* Resource container positioning */
.resource-container { position: relative; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Resource grid loading state */
.resource-grid.loading { opacity: 0.5; pointer-events: none; transition: opacity 0.3s ease; }
.resource-list.loading { opacity: 0.5; pointer-events: none; transition: opacity 0.3s ease; }

/* Filter loading states */
.filter-container.loading { pointer-events: none; }
.filter-container.loading .facet-checkbox { opacity: 0.6; cursor: not-allowed; }
.filter-container.loading .facet-checkbox:disabled { cursor: not-allowed; }

/* Results loading state */
.results.loading { position: relative; }
.results.loading::after { content: ""; position: absolute; left: 0; top: 0; color: #666; font-style: italic; }

/* Selected filters loading state */
#selected-filters.loading { opacity: 0.6; pointer-events: none; }

/* Search loading state */
.search-container.loading { position: relative; }
.search-container.loading::after { content: ""; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid #f3f3f3; border-top: 2px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; }

/* Filter mini loading indicator */
.filter-loading { display: inline-block; width: 12px; height: 12px; border: 2px solid #f3f3f3; border-top: 2px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin-left: 8px; }


/* CH CLI*/
.resource-options{background: #fff;padding: 5px 5px;}
.resource-box__type{color:#000}
.filter-group{color:#000}
.resource-page__pager button{color:#000}
.resource-list{background-color:#fff}
.resource-list .resource-box{color:#000}
.checkbox-group label{display: flex;line-height: 1.4;}
.checkbox-group span{flex-shrink: 0;margin-top: 2px;}
.filter-content .checkbox-group{max-height: 309px;overflow-y: auto;display: block;}


#mobile-menu-toggle path {
  fill: white !important;
}

.resource-page.view .breadcrumb :is(ul,li) {gap:initial}

.download-container button.download{margin:10px 0 4px;background-image: url(images/download-external.png)}
.download-container .note{font-size:12px;color:#666;}

.resource-page.view  h2 {font-size: 22px;font-weight: bold;}