:root {

    --primary-color: rgb(24, 95, 157);
    --primary-color-hover: rgb(26, 69, 107);
    --secondary-color: rgb(38, 148, 238);
    --secondary-color-hover: rgba(35, 102, 157,1);
    --tertiary-color: rgba(230,234,235,1);
    --tertiary-color-hover: rgb(204, 215, 218);
    --focus-color: #b0d7ef;
    --focus-bg: #d1e4f0;
    --alt-bg: rgba(167,149,127,0.4);
    --table-stripes: rgba(207, 213, 227, 0.4);
  
    --active-Dataset-item: #32804d;
    --active-Region-item: #2568cc;
    --active-Range-item: #b26a3b;
  
    --base-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  
    --p-1: 0.25rem;
    --p-2: 0.5rem;
    --p-3: 0.75rem;
    --p-4: 1rem;
    --p-5: 1.25rem;
    --p-6: 1.5rem;
    
    --transition-base: all 0.5s ease-out;
  
    --border-base: 1px solid rgba(139, 139, 139, 0.4);
    --border-lg: 1px solid rgba(139, 139, 139, 0.2); var(--base-shadow);
    --border-focus: 2px solid var(--focus-bg);
  
    --checkbox-bg: rgb(153, 104, 14);
    --checkbox-border: rgb(171, 119, 20);
    --checkbox-shadow: rgba(157, 108, 17, 0.4);
  
}



/* style.css overrides */
#block-yearfacet .facet, #block-region .facet,  #block-category .facet  {
    line-height: inherit;
    max-width: 780px;
}

@media all and (max-width: 992px) {
  .main-container-data {
    width: 100%;
  }
}



/* 
*
* jQuery ui overrides 
*
*/

/* jQuery UI > accordion */

.ui-state .ui-icon,
.ui-button .ui-icon {
	background-image: url("../images/ui-icons_555555_256x240.png") !important;
}

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("../images/ui-icons_555555_256x240.png") !important;
}

.ui-icon, .ui-widget-content .ui-icon {
    background-image: url("../images/ui-icons_555555_256x240.png") !important;
}


/* jQuery UI > interaction */

.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 {
  background-color: #dfe1e3;
  border: 1px solid #b7bcc2;
  color: inherit;
}

.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 {
  background-color: #dfe1e3;
  border: 1px solid #b7bcc2;
  color: inherit;
}

.accordion li .ui-state-active, 
.accordion li .ui-widget-content .ui-state-active, 
.accordion li .ui-widget-header .ui-state-active, 
.accordion li a.ui-button:active, 
.accordion li .ui-button:active, 
.accordion li .ui-button.ui-state-active:hover {
  color: #fff;
}

#accordionDataset .ui-state-active, 
#accordionDataset .ui-widget-content .ui-state-active, 
#accordionDataset .ui-widget-header .ui-state-active, 
#accordionDataset a.ui-button:active, 
#accordionDataset .ui-button:active, 
#accordionDataset .ui-button.ui-state-active:hover {
  background-color: var(--active-Dataset-item) !important;
}

#accordionRegion .ui-state-active, 
#accordionRegion .ui-widget-content .ui-state-active, 
#accordionRegion .ui-widget-header .ui-state-active, 
#accordionRegion a.ui-button:active, 
#accordionRegion .ui-button:active, 
#accordionRegion .ui-button.ui-state-active:hover {
  background-color: var(--active-Region-item) !important;
}

#accordionYearRange .ui-state-active, 
#accordionYearRange .ui-widget-content .ui-state-active, 
#accordionYearRange .ui-widget-header .ui-state-active, 
#accordionYearRange a.ui-button:active, 
#accordionYearRange .ui-button:active, 
#accordionYearRange .ui-button.ui-state-active:hover {
  background-color: var(--active-Range-item) !important;
}

html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #bdc4cc;
	background: #f7f8f8;
	font-weight: normal;
	color: #323232;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  border: 1px solid rgba(155, 186, 209, 0.7);
  background: rgba(182, 212, 235, 0.7);
	color: #323232;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #b7bcc2;
	background: #dfe1e3;
	font-weight: normal;
	color: #323232;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #323232;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px var(--focus-color);
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--focus-color);
	background-color: #ffffff;
}


.ui-widget-content {
	/* border: var(--border-base); */
  border: 1px solid rgba(59, 109, 75, 0.7);
	background: #ffffff;
	color: #383838;
}
h3 > .ui-widget-content {
  border: none;
}


.input-group.search button {
  padding-top: 9px;
  padding-bottom: 9px;
}




/* sidebar-first & content */

.region-sidebar-first, .container-fluid.view-id-facet {
    border: 1px solid rgba(123,179,136,0.35);
    background-color: rgba(233,228,211,0.4);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
    margin-bottom: 1rem;
    padding: 1rem;
}


.facet > h2 {
    border: 1px solid rgba(123,179,136,0.7) !important;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background: rgb(123,179,136) !important;
    background: linear-gradient(335deg, rgba(123,179,136,1) 17%, rgba(175,201,181,1) 100%) !important;
    border: none;
    font-size: 2.25rem !important;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1rem !important;
    position: relative;
    text-align: left;
    width: 100%; 
}
.ui-accordion-header-icon {
    position: absolute;
    top: 2.45rem;
    right: 1.25rem;
}

.accordion-inner {
    border: 1px solid rgba(59,109,75,0.4);
    background-color: #fff;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 0 0 !important;
}
.accordion-inner ul {
    margin-bottom: 0 !important;
    padding-left: 0;
}
.accordion-inner .facet-item {
    /* overwrite of .facets-widget-checkbox .facet-item, .facets-widget-links .facet-item */
    font-family: Arial,Helvetica,sans-serif;
    display: block;
    padding: 1rem 1rem 1rem 1rem;
    display: flex;
}

.accordion-inner .facet-item input[type="checkbox"] {
    margin-top: 0;
    margin-right: 0.5rem;
}
.accordion-inner .facet-item label {
    /* display: block; */
    margin-bottom: 0;
    /* flex-grow: 99; */
    /* width: 100%; */
    max-width: 75%;
}
.accordion-inner .glyphicon {
    margin-left: 0.25rem;
}
.accordion-inner .facet-item label > span {
    display: flex;
}
.accordion-inner .facet-item label > span > span:last-of-type {
    flex: 2;
    text-align: right;
}

.accordion-inner .facet-item:nth-child(odd) {
    background-color: var(--table-stripes);
}

.accordion-inner .facet-item .facet-item__count {
    flex-grow:99;
    text-align: right;
}

.accordion-inner .facet-item .facet-item__count > strong {
    background: #796f66;
    color: #fff;
    display: inline-block;
    padding: 0 0.45rem;
    text-align: center;
    border-radius: 0.95rem;
    min-width: 2rem;
    text-shadow: 0 0 1px rgba(0,0,0,0.2);
}


/* accordion inner / Region & Year items */

.accordion-inner .item-list__region label, 
.accordion-inner .item-list__Year label {
    display: block;
    flex-grow: 99;
    width: 100%;
    max-width: 100%;
}


/* card / dataset-item */

.dataset-item {
    position: relative;
    overflow: hidden;
    min-height: 295px; /* #! */
    max-height: 325px; /* #! */
}
.dataset-item > .thumbnail {
    border: 1px solid rgba(59, 109, 75, 0.7);
    background-color: #fff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 86%, rgb(229 228 220) 87%, rgb(195 184 173) 100%); /* #! */
    /* background-color: rgb(238,238,238); */
    /* background: radial-gradient(circle, rgba(238,238,238,1) 65%, rgba(255,255,255,1) 75%);  #! */
    /* box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px; */
    border-radius: 0.25rem;
    min-height: 275px; /* #! */
    max-height: 315px; /* #! */
    position: relative;
    padding: 0 /* #! */
}
.dataset-item .thumbnail.pull-center {
    padding: 0 !important; /* #! */
    max-width: 115px; /* #! */
    max-height: 175px; /* #! */
    background-color: transparent; /* #! */
    /* border-bottom: 1px solid rgba(0,0,0,0.15)  #! */
    margin-top: 0.75rem; /* #! */
    position: relative; /* #! */
}
.dataset-item .dataset-years {
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 10px 10px 0;
}
.dataset-item .dataset-years span {
    display: block;
    padding: 0.35rem 0.5rem;
    color: #000;
    font-weight: 700;
    text-align: center;
    font-size: 1.25rem;
    background-color: rgba(139, 139, 139, 0.2);
    border-radius: 5px;
}
.dataset-item > .thumbnail h2 {
    /* #! padding: 5px; */
    text-align: center;
    padding: 10px;
    margin-bottom: 0; /* #! */
}
.dataset-item > .thumbnail .pull-center img {
    display: block;
    /* #! padding: 5px 5px 0 0; */
    /* #! max-width: 100%; */
    max-width: 100%; /* #! */
    height: auto;
    /* width: 85%;  #! */
    border: 1px solid rgba(0,0,0,0.25); /* #! */
    border-radius: 2px; /* #! */
    box-shadow: 0 3px 10px rgba(0,0,0,0.25); /* #! */
}
.dataset-item > .thumbnail .pull-center::after {
    content: " ";
    display: block;
    clear: right;
}
.dataset-item > .thumbnail .buttonblock {
    background-color: var(--alt-bg);
    border-top: 1px solid #e9e9e9;
    height: 45px;
    padding: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/**
 * Viewport width specific styling for datasets
 *
 * col-big-3 -> (min-width: 1500px)
 * col-lg-4 -> (min-width: 1200px)
 * col-md-6 -> (min-width: 992px)
 * col-xs-12
 */

@media all and (min-width: 1500px) {
  .dataset-item .thumbnail.pull-center {
    max-width: 135px;
  }
}

@media all and (min-width: 1200px) {
  .dataset-item .thumbnail.pull-center {
    max-width: 115px;
    max-height: 165px;
  }
}

@media all and (min-width: 992px) {
  .dataset-item .thumbnail.pull-center {
    max-width: 110px;
    max-height: 155px;
  }
  .dataset-item {
    min-height: 335px; /* #! */
    max-height: 345px; /* #! */
  }
  .dataset-item > .thumbnail {
    min-height: 330px; /* #! */
    max-height: 340px; /* #! */
  }
  .dataset-item > .thumbnail h2 {
    text-align: left; /* #! */
  }
}



/* nested unordered lists in facets results */

.facets-widget-checkbox .levelone button {
    padding: 0;
    margin: 0;
    border: 0;
}

.facets-widget-checkbox .levelone .facets-widget- {
    margin-top: 1rem;
    width: 100% !important;
    flex-grow: 100;
}

.accordion-inner .levelone > fieldset > ul > li {
    flex-wrap: wrap;
}
.accordion-inner .levelone .facet-item {
    background-color: transparent !important;
    font-weight: 700;
    padding-top: 0;
}
.accordion-inner .levelone .facet-item:first-of-type {
    padding-top: 1rem;
}
.accordion-inner .levelone > fieldset > ul > .facet-item > input[type="checkbox"] {
    display: none;
}
.accordion-inner .levelone > fieldset > ul > .facet-item > .facet-item__overviewlink {
    display: none;
}
.accordion-inner .leveltwo > fieldset > ul > .facet-item > div {
    display: inline-block;
    padding-right: 0.5rem;
}
.accordion-inner .levelone > fieldset > ul > .facet-item > span:last-of-type {
    display: none;
}
.accordion-inner .levelone > fieldset > ul > li > label > span {
    padding-right: 1rem;
}
.accordion-inner .levelone > fieldset > ul > li > label > span > button {
    display: none;
}

.accordion-inner .leveltwo {
    border: 1px solid rgba(59,109,75,0.2);
    border-radius: 2px;
}
.accordion-inner .leveltwo .facet-item {
    margin-left: 0 !important;
    font-weight: 700;
    border-bottom: 1px solid rgba(59,109,75,0.2);
    padding: 1rem;
}
.accordion-inner .leveltwo .facet-item:last-of-type {
    border-bottom: none;
}
.accordion-inner .leveltwo .facet-item:nth-of-type(odd) {
    background-color: var(--table-stripes) !important;
}

/* remove styles from gui */
.ui-accordion .contextual {
    background-color: transparent;
    border: 0;
	overflow: visible !important;
    padding: 0 0 !important;
}
/* .dataset-facet-choice { This was for the label, saving it in case we need it later
    background:linear-gradient(335deg, rgba(123,179,136,1) 17%, rgba(175,201,181,1) 100%);
    width: 10%;
    padding: 5px;
} */


/* loading throbber */
/**
 * @file
 * Visual styles for ajax-progress throbber.
 */

 .ajax-progress {
    display: inline-block;
  }
  
  /**
   * Throbber.
   */
  
  .ajax-progress__throbber {
    position: relative;
    display: inline-flex;
    align-content: center;
    height: 1.125rem;
    margin-block-start: -0.1875rem;
    margin-block-end: 0;
    margin-inline-start: 0.875rem;
    margin-inline-end: 0.875rem;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.125rem;
  }
  
  .ajax-progress__throbber {
    width: 1.125rem;
    height: 1.125rem;
    border-width: 2px;
    border-color: #497f98 transparent #497f98 #497f98;
  }
  
  .ajax-progress--throbber .message {
    display: inline-block;
    padding-inline-start: 0.5625rem;
    font-size: 0.875rem;
    font-weight: 400;
  }
  
  /**
   * Full screen throbber.
   */

  .view-facet {
    position: relative;
  }
  
  .view-id-facet .ajax-progress--fullscreen {
    position: absolute;
    left: 50%;
    right: 50%;
    top: 3rem;
    z-index: 1000;
    /* inset-block-start: 50%;
    inset-inline-start: 50%; */
    width: 7.25rem;
    height: 7.25rem;
    margin: -1.75rem;
    border: 1px solid #ccc;
    border-radius: 3.5rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
  }
  
  .view-id-facet .ajax-progress--fullscreen::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 4.75rem;
    height: 4.75rem;
    margin: -2.375rem;
    content: "";
    border-width: 5px;
  }
  
  [dir="rtl"] .view-id-facet  .ajax-progress--fullscreen {
    box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1);
  }
  
  /**
   * Common styles for all kinds of throbbers.
   */
  
  .view-id-facet .ajax-progress__throbber .throbber,
  .view-id-facet .ajax-progress--fullscreen::before {
    animation: mrlc-throbber 0.75s linear infinite;
    border-style: solid dotted solid solid;
    border-color: #497f98 transparent #497f98 #497f98;
    border-radius: 50%;
  }
  
  /**
   * Remove margin from ajax throbbers following buttons because buttons already
   * have a large margin set.
   */
  
  html.js .button:not(.js-hide) + .view-id-facet .ajax-progress__throbber {
    margin-inline-start: 0;
  }
  
  @keyframes mrlc-throbber {
    0% {
      transform: rotateZ(0);
    }
  
    100% {
      transform: rotateZ(360deg);
    }
  }