/* =====================================================
   Some basic css variables to reused over this stylesheet.
   ===================================================== */
:root {
    --knmi-blue: #01689b;
}

/* =====================================================
   The "account masthead" bar across the top of the site
   ===================================================== */

.account-masthead {
    margin-bottom: initial;
    padding: 62px 0;
    background: white;
    background-image: url("knmi.svg");
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: calc(50% + 132px);
}

/* The "bubble" containing the number of new notifications. */
.account-masthead .account .notifications a span {
    background-color: blue;
}

/* The text and icons in the user account info. */
.account-masthead .account ul li {
    border-left: 0px
}

.account-masthead .account ul li a {
    color: black;
    border: 1px white;
    height: 125px;
}

/* Navbar menu items */

.main-navbar ul li.active a {
    background-color: unset !important;
    font-weight: 600;
}

.main-navbar ul li a:hover {
    background-color: unset !important;
    text-decoration: underline;
}

/* The user account info text and icons, when the user's pointer is hovering
    over them. */
.account-masthead .account ul li a:hover {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(0, 123, 199, 0.7);
    height: 125px;
}

/* ========================================================================
   The main masthead bar that contains the site logo, nav links, and search
   ======================================================================== */

.masthead {
    background-color: var(--knmi-blue);
    background-image: none;
    padding: 6px 0;
}

.masthead a {
    color: #fff;
}

.masthead hgroup h1 {
    margin: 9px 0;
}

/* The "navigation pills" in the masthead (the links to Datasets,
    Organizations, etc) when the user's pointer hovers over them. */
.masthead .navigation .nav-pills li a:hover {
    color: white;
    text-decoration: underline;
    background-color: var(--knmi-blue);
}

/* The "active" navigation pill (for example, when you're on the /dataset page
    the "Datasets" link is active). */
.masthead .navigation .nav-pills li.active a {
    background-color: var(--knmi-blue);
    font-weight: 900;
    /* 400 is normal, 700 is same as bold*/
}

/* The "navigation pill" in the masthead (link to developer portal)
when the user has clicked on them. */
.masthead .navigation .nav-pills li a:visited {
    background-color: var(--knmi-blue);
    /* for removing the highlight after a click */
}

/* The "box shadow" effect that appears around the search box when it
    has the keyboard cursor's focus. */
.masthead input[type="text"]:focus {
    -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
}

/* Search filed in masthead */
.site-search .field-bordered {
    border-bottom: 1px dotted #ddd;
}

.site-search input {
    width: 100%;
    height: auto;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0;
    background-color: #fff;
}

.site-search input:focus {
    outline: 2px dotted #000;
    outline-offset: 0;
    -webkit-box-shadow: 0 0 0 2px #fff;
    box-shadow: 0 0 0 2px #fff;
    color: #000;
    background-color: #fff;
}

.site-search .btn {
    position: absolute;
    display: block;
    height: 35px;
    width: 35px;
    top: 50%;
    right: 10px;
    margin-top: -17.5px;
    margin-bottom: 0px;
    border: none;
    color: var(--knmi-blue);
    -webkit-transition: color 0.05s ease-in;
    -o-transition: color 0.05s ease-in;
    transition: color 0.05s ease-in;
}

.site-search .btn:hover {
    color: #fff;
    background-color: #000;
}

/* ===========================================
   The content in the middle of the front page
   =========================================== */

/* Remove the "box shadow" effect around various boxes on the page. */
.module-search.box {
    box-shadow: none;
    border: unset;
}

.homepage .hero {
    border: none;
    background-image: unset;
    background-color: #fff;
}

.main {
    min-height: 0;
    background-color: #fff;
    background-image: unset;
}

/* Add a border line between the top and bottom halves of the front page. */
.homepage [role="main"] {
    border-top: 0px solid rgb(204, 204, 204);
}

.homepage [role="main"] {
    padding: 0 0;
}

/* ====================================
    The Search Data in the middle of the homepage
    ==================================== */
.homepage .module-search {
    margin-top: 60px;
    padding: 0;
    color: #fff;
    margin-bottom: 30px;
}

.homepage .module-search .search-giant {
    margin-bottom: 10px;
}

.homepage .module-search .search-giant input {
    border-color: #003f52;
}

.homepage .module-search .module-content {
    border-radius: 0 0 0 0;
    color: white;
    background-color: var(--knmi-blue);
    border-bottom: none;
}

.homepage .module-search .module-content .heading {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 26px;
    line-height: 40px;
}

.homepage .module-search .search-form {
    padding: 10px;
}

.search-form .search-input button i {
    color: var(--knmi-blue);
}

/* ====================================
    The Popular datasets in the middle of the homepage
    ==================================== */
.homepage .module-popular-datasets .module-heading {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 26px;
    line-height: 40px;
    color: rgb(68, 68, 68);
    padding-left: 15px;
}

/* ====================================
    The Groups display in the middle of the homepage
    ==================================== */

.homepage .groups_homepage .media-grid {
    background-color: #E5F0F9;
    border: 0;
    margin: 0 0 30px;
}

.homepage .groups_homepage .media-item {
    width: 266px;
}

.homepage .groups_homepage .media-image {
    height: 72px;
    width: 72px;
}

/*Tags*/
.tag {
    background-color: #ffffff;
    border-radius: 5px;
}

a.tag:hover,
a.tag:focus {
    text-decoration: none;
    color: #fff;
    background-color: var(--knmi-blue);
}

/*Badges*/

.dataset-badge-header {
  font-size: 12px;
  color: #454545;
  margin-top: 3px;
}

.dataset-badge-row {
    display: flex;
    column-gap: 4px;
    column-width: 500px
}

.dataset-badge-area {
    margin-top: 5px;
}

/* ====================================
    The styling of a dataset details page
                General
    ==================================== */

.skiplink a {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.skiplink a:focus {
    position: absolute;
    background-color: white;
    color: var(--knmi-blue);
    font-size: large;
    font-weight: bold;
    overflow: hidden;
    width: auto;
    height: auto;
    clip: auto;
}

.deprecation-snippet {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid rgb(255, 0, 0);
    color: #666;
    padding: 1em 1.5em;
    display: block;
}

.replace-strong {
    font-weight: bold;
}

::placeholder {
    color: black !important;
}

.code-snippet {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid var(--knmi-blue);
    color: #666;
    padding: 1em 1.5em;
    display: block;
    line-height: 34px;
    overflow-wrap: break-word;
}

.code-snippet button {
    float: right;
}

/* Navigation tabs bar */
.page-header {
    background-color: #fff;
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 15px;
    border-bottom: 1px solid #ddd;
    margin: 40px 0 20px;
}

.page-header .nav-tabs li a {
    background-color: #e0e0e0;
    color: #000000;
    margin-right: 2px;
}

.page-header .nav-tabs>li.active>a,
.page-header .nav-tabs>li.active>a:hover,
.page-header .nav-tabs>li.active>a:focus {
    cursor: default;
    background-color: #fff;
    color: #000000;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.page-header .nav-tabs a:hover {
    background-color: #ededed;
}

/* class for specific settings dataset page */
.wrapper {
    border: none;
    box-shadow: 0 0 0 0 rgb(0 0 0 / 5%);
    margin-left: 0;
    margin-right: 0;
}

.no-nav.wrapper .primary .module .module-content {
    padding: 0;
}

/* Position button XML page */
.module-resource .actions {
    top: 0;
    right: 0;
}

/* ====================================
   Styling of facets/filters
    ==================================== */
.date-range-input {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
}


.filters .collapse-toggle {
    color: inherit;
    text-decoration: none;
}
.filters .collapse-toggle[aria-expanded=true] .expand-icon {
  display: none;
}
.filters .collapse-toggle[aria-expanded=false] .collapse-icon {
  display: none;
}


/* ====================================
    The styling of a dataset details page
             Summary tab
    ==================================== */

.thumbnail {
    padding: 10px;
    margin-bottom: 0;
    border: 0 solid #ddd;
    border-radius: 0;
    -webkit-transition: border 0.0s ease-in-out;
    -o-transition: border 0.0s ease-in-out;
    transition: border 0.0s ease-in-out;
}

.thumbnail img {
    display: block;
    margin: auto;
    width: 75%;
}

/* Border styling */
aside.secondary {
    border: 1px solid #ddd;
}

.primary[role="main"]:not(.dataset) {
    border: 1px solid #ddd;
    border-left: 0;
}

/* About page border */
article[role="main"] {
    border: 2px solid #ddd;
    border-radius: 4px;
}

.wrapper .description {
    word-break: normal;
}

.module-content .description {
    word-break: normal;
}

/* settings column metadata table */
.additional-info .table th {
    padding-left: 10px;
    width: 35%;
}

/* ====================================
    The styling of a dataset details page
              Access tab
    ==================================== */

#browse-frame {
    width: 100%;
    overflow: hidden;
    height: 42em;
}

/* ====================================
    The styling of a dataset details page
                Preview
    ==================================== */

#adaguc-viewer-frame {
    width: 100%;
    overflow: hidden;
    height: 55em;
    margin-top: 10px;
}

#adaguc-viewer-frame iframe {
    width: 100%;
    height: 100%;
}

/* ====================================
    The footer at the bottom of the site
    ==================================== */

.site-footer,
body {
    background-color: var(--knmi-blue);
    background-image: none;
}

/* The text in the footer. */
.site-footer,
.site-footer label,
.site-footer small {
    color: rgba(255, 255, 255, 0.6);
}

/* The link texts in the footer. */
.site-footer a {
    color: #ffffff;
}

.site-footer label {
    color: #ffffff;
}

.site-footer strong {
    color: #ffffff;
}

.select2-search input:focus {
    border: 3px solid black;
}