/* global styles */
h2 {font-size: 1.5rem;margin-bottom: 20px;color: #333}
.page-title {position:relative}
.breadcrumb{position:absolute;top:0px;right:0px;font-size:14px}
.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}

/* toogle menu */
#mobile-menu-toggle {float: left;width: 33px;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%}
  .side.hide {transform: translateX(-100%);opacity: 0}

  /*#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} 
}

@media (min-width: 768px) { /*Desktop*/
  .resource-page h1 {max-width: 45%}
  .resource-page .side{float:left;width:250px}
  .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}
.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 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%}
.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}
.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{border:1px solid #eee;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}
.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:6px;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}

/* resource grid */
.resource-container iframe{width: 100%;height: 100%;inset:0;border:0;}
.resource-container.pdf {
    /* 8.5x11 portrait = 1 : 1.294 aspect */
    position:relative;
    max-width:100%;
    aspect-ratio:816/1056;
    overflow:hidden;
}
.resource-container.video {max-width: 100%}
.resource-container.video iframe{width:100%;border:none}
/*.resource-container.pdf iframe, .resource-container.video iframe{width:100%;border:none}*/
.resource-box__title {line-height:22px;text-align:left}
.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 .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}
.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}

   /*.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;padding:0px 10px 10px}
.resource-grid .resource-box__number{display:none}

/*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%}
.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__tags {order:5;padding-left:10px;border-left:1px solid #ccc}