:root {
    --paragraph-size: 1.1rem;
    /* According to ENVRI-StyleGuide2023-4sep23.pdf, Large Headings are 2.6x paragraph-size, smaller headings 1.6 * paragraphs*/
    --minor-heading-size: calc(var(--paragraph-size) * 1.2);
    --smaller-heading-size: calc(var(--paragraph-size) * 1.6);
    --larger-heading-size: calc(var(--paragraph-size) * 2.6);
    --step-circle-width: 40pt;

    /* Basic Text */
    --body-fg: #012030;
    --body-bg: #FFFFFF;

    /* Highlighted Text, Cards, Input Fields, etc */
    --secondary-fg: #012030;
    --secondary-bg: #F4F8FB;
    --secondary-border: 2pt solid var(--secondary-fg);
    --secondary-border-radius: 5pt;

    /* Buttons, etc */
    --primary-fg: #FFFFFF;
    --primary-bg: #012030;

    /* Navigation, Footer */
    --header-bg: #FFFFFF;
    --header-fg: #012030;
    --footer-bg: #E9F6FF;
    --footer-fg: #012030;

    --placeholder-fg: #7d7d7d !important;
}

/******************************
* Global Settings
******************************/

.view, html {
    height: 100%
}

body {
    font-family: 'Inter Tight Light', 'Montserrat', sans-serif !important;
    font-size: var(--paragraph-size);
    /* background-image: url('../img/under_construction_tape.png'); */
}

html:not(.minimal) body {
    /* shown on pages that have a menu bar only. (e.g. not shown in iframes, or
     * any other page that's based on "base_minimal.html" rather than "base.html") */

    height: 100%

    /*
    background-image: url('../img/demonstrator.png');
    background-repeat: repeat-y;
    */
}

h1 {
    font-family: 'Inter Tight ExtraBold', sans-serif;
    font-size: var(--larger-heading-size);
    line-height: 1;
}

h4 {
    /* h4 was chosen here because the templates already used h4,
     * but in the long term perhaps this could be changed to h2
     * since logically, this is the secondary header. */
    font-family: 'Inter Tight SemiBold', sans-serif;
    font-size: var(--smaller-heading-size);
}

h5 {
    font-family: 'Inter Tight SemiBold', sans-serif;
    font-size: var(--minor-heading-size);
    margin-top: 50px;
    color: #1b9293;
}

/******************************
 * Mobile
 ******************************/

@media only screen and (max-width:768px) {
    /* nothing here yet */
}

/******************************
 * Navigation
 ******************************/

.navbar {
    background-color: var(--header-bg);
    margin-bottom: 30pt;
}
.nav-item a, .nav-item button {
    font-family: 'Inter Tight Regular', sans-serif;
    font-size: var(--smaller-heading-size);
    color: var(--header-fg) !important;
}

/******************************
 * Footer
 ******************************/

footer {
    background-color: var(--footer-bg);
    color: var(--footer-fg);
    margin-top: 50px;
    padding-top: 50pt;
    padding-bottom: 150pt;
    font-size: 18pt;
}
.footer-link-bar a, .footer-link-bar button {
    font-family: 'Inter Tight ExtraBold', sans-serif;
    color: var(--footer-fg);
    text-decoration: none;
}

/******************************
 * Bootstrap Overrides
 ******************************/

.btn-dark {
    color: var(--primary-fg);
    background-color: var(--primary-bg);
}
/*a, a:link, a:visited, a:hover, a:active {
    color: var(--body-fg);
    text-decoration: inherit;
    font-weight: inherit;
}*/

/******************************
 * Generic, reusable building blocks
 ******************************/

.underline_links a, .underline_links a:link, .underline_links a:visited, .underline_links a:hover, .underline_links a:active {
    text-decoration: underline !important;
}
a.unstyled, a.unstyled:link, a.unstyled:visited, a.unstyled:hover, a.unstyled:active {
    color: inherit !important;
    text-decoration: inherit !important;
    font-weight: inherit !important;
}

.nonbreaking {
    white-space: nowrap;
}
.apply-input-borders input,
.apply-input-borders textarea,
.apply-input-borders select {
    border: var(--secondary-border);
    border-radius: var(--secondary-border-radius);
}
.apply-input-borders input[type=submit] {
    color: var(--primary-fg);
    background-color: var(--primary-bg);
    padding: 5pt 20pt;
}
.highlighted {
    color: var(--secondary-fg) !important;
    background-color: var(--secondary-bg) !important;
}
.collapsed .hide-if-collapsed {
    display: none;
}
.hide-if-expanded {
    display: none;
}
.collapsed .hide-if-expanded {
    display: inherit;
}

/******************************
 * Front Page
 ******************************/

@media only screen and (min-width:768px) {
    .container-frontpage {
        padding-left: 5%;
        padding-right: 5%;
    }
}
.intro-text {
    width: 80%;
    font-family: 'Inter Tight ExtraBold', sans-serif;
    line-height: 120%;
}
.intro-text b {
    font-family: 'Inter Tight ExtraBold', sans-serif;
}

.search-description {
    font-family: 'Inter Tight Regular', sans-serif;
    font-size: var(--smaller-heading-size);
}

.container-cards a, .container-cards a:link, .container-cards a:visited,
.container-cards a:hover, .container-cards a:active {
    color: inherit;
    text-decoration: inherit;
    font-weight: inherit;
}
.card-title {
    font-family: 'Inter Tight SemiBold', sans-serif;
    font-size: var(--minor-heading-size);
    line-height: 91%;
}
.card-text {
    font-family: 'Inter Tight Regular', sans-serif;
    font-size: var(--paragraph-size);
    line-height: 133%;
}
.card-image, .card-title, .card-text {
    padding: 6pt;
}

.card-image img {
    width: 90px;
    display: block;
    margin: 0 auto;
}

/* search bar */
.unified-search-bar input, .unified-search-bar .input-group-text {
    width: 65%;
    border: var(--secondary-border) !important;
    background-color: var(--footer-bg) !important;
    background-image: url('../img/search_magnifying_glass.svg');
    background-repeat: no-repeat;
    background-position: 15pt calc(50%);
    background-size: 1.5em 1.5em;
    font-family: 'Inter Tight SemiBold', sans-serif;
    font-size: var(--minor-heading-size);
    height: 40pt;
    border-radius: 30pt;
    padding-left: 60pt;
}
.unified-search-bar input::placeholder {
    color: var(--placeholder-fg)
}

/******************************
 * Service Pages
 ******************************/

.page-content-container {
}

.cservices-searchbox-container .select2-container {
}


.cservices-searchbox-container .select2-selection {
    border: 2pt solid var(--secondary-fg) !important;
    background-color: var(--secondary-bg) !important;
}

.cservices-searchbox-container input[type=text] {
    border: 2pt solid var(--secondary-fg) !important;
    background-color: var(--secondary-bg) !important;
    border-radius: 4px;
    min-height: 32px;
    font-family: 'Inter Tight Light', 'Montserrat', sans-serif !important;
    font-size: var(--paragraph-size);
    padding: 5px;
}

/* free_text_keyword field
   color: var(--placeholder-fg); does not work... */
.cservices-searchbox-container input[type=text]::placeholder {
    color: #bbbbbb;
}

.training-searchbox-container input[type=text] {
    border: var(--secondary-border) !important;
    background-color: var(--secondary-bg) !important;
}


/* Chrome/Opera/Safari */
::-webkit-input-placeholder {
    color: var(--placeholder-fg);
}

/* Firefox 19+ */
::-moz-placeholder {
    color: var(--placeholder-fg);
}

/* IE 10+ */
:-ms-input-placeholder {
    color: var(--placeholder-fg);
}

/* Firefox 18- */
:-moz-placeholder {
    color: var(--placeholder-fg);
}


.circle {
    font-family: 'Inter Tight ExtraBold', sans-serif;
    border-radius: 50%;
    min-height: var(--step-circle-width);
    min-width: var(--step-circle-width);
    max-height: var(--step-circle-width);
    max-width: var(--step-circle-width);
    line-height: var(--step-circle-width);
    font-size: calc(var(--step-circle-width) * 0.6);
    text-align: center;
    vertical-align: middle;
    color: var(--primary-fg);
    background-color: var(--primary-bg);
}
h1 {
    /* Workaround to override the "margin-top: 100px" in the first h1 in most pages.
     * TODO: Remove the top margin in all pages and then remove the following line. */
    margin-top: 0 !important;
}

.search_result_v2 {
    padding-bottom: 1em;
}
.search_result_v2 b {
    font-family: 'Inter Tight ExtraBold', sans-serif;
}
.search_result_v2 a, .search_result_v2 a:link, .search_result_v2 a:visited,
.search_result_v2 a:hover, .search_result_v2 a:active {
    color: inherit;
    text-decoration: inherit;
    font-weight: inherit;
}
.search_result_v2 a {
    font-family: 'Inter Tight ExtraBold', sans-serif;
}

.training_filters {
    color: var(--secondary-fg) !important;
    background-color: var(--secondary-bg) !important;
    border-radius: var(--secondary-border-radius) !important;
    border: var(--secondary-border);
    padding: 10pt;
    overflow: auto;
    min-width: min-content;
}
.training_filters td {
    color: var(--secondary-fg) !important;
    background-color: var(--secondary-bg) !important;
}
.training_filters thead {
    border: 0px solid white;
}
.training_reset_filter {
    color: var(--secondary-fg);
    font-size: 85%;
    text-decoration: none;
    font-family: 'Inter Tight SemiBold', sans-serif;
}
.styled-accordion .card-header,
.styled-accordion .card-body {
    color: var(--secondary-fg);
    background-color: var(--secondary-bg);
    border-bottom: 0px hidden black;
}
.styled-accordion a {
    color: inherit;
    text-decoration: inherit;
    font-family: 'Inter Tight SemiBold', sans-serif;
}
.cs-detail-label {
    font-weight: bold;
}
.cs-detail-value {
    padding-bottom: 1em;
}

/******************************
 * Other / Unordered
 ******************************/

b {
    font-family: 'Inter Tight SemiBold', sans-serif;
}
.container-custom-xxl {
    /* since bootstrap 5.0 is not available yet */
    max-width: 1400px !important;
}

under .ul-bullet {
    list-style-type: disc !important;
    padding-left: 1em;
}

.ul-bullet {
    list-style-type: disc !important;
    padding-left: 40px;
}

.search {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1)
}

.search input {
    height: 60px;
    text-indent: 25px;
    border: 2px solid #d6d4d4
}

.search input:focus {
    box-shadow: none;
    border: 2px solid #0f4e8a
}

.search .fa-search {
    position: absolute;
    top: 20px;
    left: 16px
}

.search button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    width: 110px;
    background: blue
}

/*
          @media (min-width: 800px) and (max-width: 850px) {
          .navbar:not(.top-nav-collapse) {
          background: #0f4e8a!important;
          }
          } */


/* body::after { */
/*     content: ""; */
/*     background-image: url('../img/under_construction_tape.png'); */
/*     background-repeat: repeat-y; */
/*     background-position: 0% 0%; */
/*     opacity: 0.2; */
/*     top: 0; */
/*     bottom: 0; */
/*     left: 0; */
/*     right: 0; */
/*     position: absolute; */
/*     z-index: -1; */
/* } */

/* *, */
/* *:after, */
/* *:before { */
/*     margin: 0; */
/*     padding: 0; */
/*     box-sizing: border-box; */
/*     -webkit-box-sizing: border-box; */
/*     -moz-box-sizing: border-box; */
/* } */

#navmenu {
    box-shadow: 0 4px 4px 0 rgba(0,0,0,.2);
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
/*/ start count stats /*/

section#counter-stats {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}

.stats {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

.stats .fa {
    color: #5e6eb8;
    font-size: 30px;
}


fieldset.inlineLabels ul {list-style:none}



/* bootstrap cards: hover */
.mycard {border-radius: 4px;
         background: #fff;
         box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
         transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
         padding: 10px 36px 10px 36px;
         cursor: pointer;
        }

.mycard:hover {transform: scale(1.01);
               box-shadow: 0 10px 20px rgba(0, 0, 0, .24), 0 4px 8px rgba(0, 0, 0, .12);
              }


ul {
    list-style-type: none;
    margin: 0px;
    margin-left: -10px;
    padding: 0px;
}


/* formatting specifically for bootstrap accordion on training page */
.accordion-heading {
    border: 2px solid gray;
    background-color: #eeeeee;
    padding: 10px;
    margin-top: 2px;
    color: black;
}

.accordion-body {
    border: 1px solid gray;
    border-top: 0px;
    margin-bottom: 12px;
    padding: 10px;
}



/* formatting search result table on the training resources page */
table.search_result {
    border: 1px solid #333333;
    white-space: nowrap;
    width: auto;
    /* font-family: 'Inter Tight SemiBold', sans-serif; */
    /* font-size: 13pt; */
    font-weight: normal;

}

table.search_result td a {
    color: blue;
    text-decoration: none;
}

table.search_result th {
    vertical-align: top;
    background-color: #dddddd;
    padding-left: 5px;
    padding-right: 5px;
}

table.search_result td {
    padding-left: 5px;
    padding-right: 5px;
    border: 1px dotted #666666;
}

table.search_result dl {
    margin-top: 0;
    margin-bottom: 1em;
}

table.search_result tr:nth-child(even) {
    background-color: #eeeeee;
}


table.search_result tr:hover th[scope=row], table.search_result tr:hover td {
    /* background-color: #1a5276; */
    /* color: #ffffff; */
}


table.search_result th[scope=col] {
  /* border-bottom: 1px solid #333; */
  /* border-right: 1px solid #333; */
  border: 1px solid #333;
}


.dropdown-item.disabled {
    pointer-events: none;
    cursor: default;
    color: black;
}

.colpadding {
    padding: 0 25px 0 0;
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 5px;
}
.colpadding .form-check {
    padding-left: 1em;
}


/* image zoom */
.zoom_img {
  width: 150px;
  transition: width 1s;
  margin-right: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid gray;
 }

.zoom_img:hover {
    width: max-content;
    max-width: 100%;
    transition: width 1s;
    transition-delay: .25s;
    cursor: zoom-in;
 }

h6 {
    margin-top: 10px;
    margin-bottom: 0px;
    font-weight: bold;
}


/* bootstrap carousel */
.usecase-container-box {
    height: 230px;
    padding: 5px;
    margin: auto;
    width: 90%;
    display: flex;
    justify-content: center;
    padding: 5px;
}


.usecase-container-box.ok {
    background-color: white;
}

.usecase-container-box.white {
    background-color: white;
}

.usecase {
    width: 400px;
    height: 100%;
    margin: auto;
    overflow: hidden;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
 }

.dashboard_entry {
    /* border: 0px solid black; */
    width: 400px;
    height: 100%;
    margin: auto;
    overflow: hidden;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px;
 }


.dashboard_iframe {
    background: url(../img/loading.gif) no-repeat center center;
    width: 100%;
    height: 320px;
    border: 0px solid gray;
}


.tooltip-inner {
    min-width: 100px !important;
    max-width: 500px !important;
}


/* hilighted science demonstrator item */
.has_cloud {
   background-image: url('../img/cloud_green.svg');
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   border: 3px solid #8df099;
   border-radius: 10px;
 }

/* hilighted hands-on item */
.has_orange_cloud {
   background-image: url('../img/cloud_orange.svg');
   background-position: left;
   background-size: contain;
   background-repeat: no-repeat;
   border: 3px solid #ff9700;
   border-radius: 10px;
 }

.has_curly {
   background-image: url('../img/curly.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   background-size: auto 80% !important;
}