@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

:root {
  /* Ekinops brand palette (March 2026) */
  --ek-deep-blue: #060075;
  --ek-green: #00BD00;
  --ek-digital-blue: #0094FF;
  --ek-midnight-blue: #000042;
  --ek-white: #FFFFFF;
  --ek-orange: #FF7900;
  --ek-yellow: #FFBB00;
  --ek-violet: #6535FF;
  --ek-grey: #E7E7EC;
  --ek-light: #F7F7FA;
  --ek-black: #0B020A;

  /* Accessible text shades (WCAG AA on white) */
  --ek-digital-blue-text: #0068C9;
  --ek-green-text: #007A00;
  --ek-orange-text: #B34F00;

  /* Derived backgrounds */
  --ek-blue-tint-bg: #EEF6FF;
  --ek-orange-tint-bg: #FFF4EA;

  /* Legacy aliases — primary scale */
  --primary-color: var(--ek-deep-blue);
  --primary50-color: var(--ek-blue-tint-bg);
  --primary100-color: #D6E8FF;
  --primary200-color: #A8C8F0;
  --primary300-color: #6B8FC4;
  --primary400-color: #3D5FA8;
  --primary500-color: var(--ek-deep-blue);
  --primary600-color: #05005C;
  --primary700-color: #04004A;
  --primary800-color: #030038;
  --primary900-color: var(--ek-midnight-blue);

  /* Legacy aliases — accent scale (mapped to brand, no raspberry) */
  --accent100-color: var(--ek-deep-blue);
  --accent200-color: var(--ek-deep-blue);
  --accent300-color: var(--ek-midnight-blue);
  --accent400-color: var(--ek-green-text);
  --accent500-color: var(--ek-deep-blue);
  --accent600-color: var(--ek-digital-blue-text);
  --accent700-color: var(--ek-digital-blue-text);
  --accent800-color: var(--ek-grey);
  --accent900-color: var(--ek-light);

  --font-color-light: var(--ek-white);
  --font-color: var(--ek-black);
  --olfeo-color: var(--ek-digital-blue-text);
  --olfeo700-color: var(--ek-digital-blue);
  --success-color: var(--ek-green);
  --success-background-color: #F0FFF0;
  --error-color: #D72427;
  --error-background-color: #F8EAED;
  --alert-color: var(--ek-orange);
  --alert-background-color: var(--ek-orange-tint-bg);
  --bgbuttonPrimary-color: var(--ek-grey);
  --bg1-color: var(--ek-white);
  --bg2-color: var(--ek-light);
  --bg3-color: var(--ek-grey);
  --portal-main-entries-bg-color: var(--ek-light);
  --hoovered-portal-main-entries-bg-color: var(--ek-grey);
  --Menu1-color: var(--ek-midnight-blue);
  --Menu2-color: var(--ek-green);
  --Menu3-color: var(--ek-deep-blue);
}

body {
  background-color: var(--bg1-color);
  color: var(--font-color);
  font-family: 'Inter', Arial, sans-serif;
}

/*********** portal page settings  **************/
.portal-header::before {
  background: var(--ek-midnight-blue);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 85%, rgba(0, 189, 0, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(0, 148, 255, 0.2) 0%, transparent 50%);
}

.portal-header::after {
  background: none;
  background-color: transparent;
}

.portal-header h1 {
  color: var(--font-color-light);
}

.portal-header {
  padding: 56px 56px;
}

.portal-header .logo {
  margin-bottom: 0;
  height: 100px;
}

.portal-header .portal-search .search-field {
  border-radius: 4px 0 0 4px;
  font-size: 16px;
  color: var(--ek-black);
  width: 500px;
  display: inline-block;
  vertical-align: middle !important;
}

.portal-header .search-field {
  background-color: rgba(255, 255, 255, 1);
}

.search-field::placeholder {
  color: var(--font-color);
}

.portal-header .portal-search button,
.publication-contents h4 span {
  background-color: var(--ek-green);
  color: var(--ek-midnight-blue);
}

.portal-header .portal-search button:hover {
  background-color: var(--ek-green-text);
  color: var(--ek-white);
}

.publication-icon {
  background-color: var(--primary-color);
}

.portal-single-publication {
  background-color: var(--bg1-color);
}

.portal-single-publication a {
  background-color: var(--portal-main-entries-bg-color);
}

.portal-single-publication a:hover {
  background-color: var(--hoovered-portal-main-entries-bg-color);
  text-decoration: none;
}

/* icons used for the landing page's main sections cards */
.cat-panel-1:before{ /* rocket  */
  content:"\f135";
}
.cat-panel-2:before{ /* cloud  */
  content:"\f0c2";
}
.cat-panel-3:before{ /* code */
  content:"\f121";
}
.cat-panel-4:before{ /* file*/
  content:"\f15c";
}
.cat-panel-5:before{ /* circle-question */
  content:"\f059";
}

.featured-content-label {
  display: none;
}

.portal-contents {
  display: none;
}

/*********** doc page settings  **************/
.site-sidebar {
  background-color: var(--Menu1-color);
}

.portal-single-publication .publication-icon {
  background-color: var(--primary-color);
}

.site-sidebar .active {
  background-color: var(--ek-deep-blue);
}

.theme1 .procedure > li::before {
  background-color: var(--ek-deep-blue);
}

.nav-site-sidebar > li > a {
  padding: 16px 24px 16px 24px;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-site-sidebar ul .active > a {
  font-weight: bold;
  background-color: var(--ek-deep-blue);
  border-left: 4px solid var(--ek-green);
  color: var(--ek-white);
}

.nav-site-sidebar ul {
  list-style: none;
  padding: 0;
  display: none;
  background-color: var(--primary600-color);
  color: var(--ek-white);
}

.search-field::placeholder {
  color: #333;
}

.search-field {
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.9);
  border: 0;
  color: #333;
  padding: 12px 15px;
  height: auto;
}

.theme1 .site-sidebar .logo {
  width: 100%;
  max-width: 90%;
  padding: 35px 0;
  padding-top: 35px;
  display: inline-block;
}

.theme1 .section-nav.nav > li.active > a:before {
  content: '';
  border-radius: 50%;
  left: -3px;
  top: 12px;
  background: var(--ek-green);
  position: absolute;
  width: 6px;
  height: 6px;
}

.theme1 .section-nav.nav li.active > a {
  color: var(--ek-deep-blue);
}

.section-nav.nav > li a:focus,
.section-nav.nav > li a:hover {
  color: var(--ek-deep-blue);
}

.breadcrumb-node:before {
  color: var(--font-color);
}

.breadcrumb a {
  color: var(--primary-color);
  text-decoration: underline;
}

.h1,
h1 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ek-deep-blue);
}

.h2,
h2 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ek-deep-blue);
}

.h3,
h3 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ek-deep-blue);
}

.subtitle {
  margin-top: -12px;
  color: #6B6B75;
  font-style: italic;
  font-weight: 500;
}

.h4,
h4 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ek-digital-blue-text);
}

.h5,
h5 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: bold;
  line-height: 1.1;
  color: var(--ek-green-text);
}

.h6,
h6 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ek-midnight-blue);
}

.h7,
h7 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: bold;
  color: var(--ek-deep-blue);
}

a {
  color: var(--olfeo-color);
}

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
  color: var(--ek-deep-blue);
}

.publication-contents a:hover {
  color: var(--ek-deep-blue);
}

.text-primary,
.btn-link,
.pagination > li > a,
.pagination > li > span {
  color: var(--primary-color);
}

.bg-primary,
.btn-primary,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--ek-deep-blue);
  border-color: var(--ek-deep-blue);
  color: var(--ek-white);
}

.pager li > a,
.pager li > span {
  color: var(--primary-color);
  text-transform: uppercase;
  font-weight: bold;
}

.pager li > a:hover,
.pager li > span:hover {
  background-color: var(--bgbuttonPrimary-color);
  color: var(--primary-color);
}

/**************** Notes cards ****************************/
.warning,
.caution,
.important {
  border-left-color: var(--ek-orange);
  background-color: var(--alert-background-color);
}

.warning:before,
.caution:before,
.important:before {
  border-left-color: var(--ek-orange);
  background-color: var(--alert-background-color);
  color: var(--ek-orange-text);
}

.warning.danger {
  border-left-color: var(--error-color);
  background-color: var(--error-background-color);
}

.warning.danger:before {
  border-left-color: var(--error-color);
  background-color: var(--error-background-color);
  color: var(--error-color);
}

.tip,
.note,
.notice {
  border-left-color: var(--ek-digital-blue);
  background-color: var(--primary50-color);
}

.tip:before,
.note:before,
.notice:before {
  border-left-color: var(--ek-digital-blue);
  background-color: var(--primary50-color);
  color: var(--ek-digital-blue-text);
}

.panel-heading :not(div).title:before,
.panel-heading .sidebar-title:before {
  content: "\f0da";
  color: var(--ek-green);
  font-family: FontAwesome;
  font-size: 1em;
  font-weight: 100;
  margin-right: 10px;
  vertical-align: 0%;
  font-style: normal;
  display: inline-block;
  width: 15px;
}

/**************************  Database specific items  **************************/


/* classes for adding a download button in the changelog page */
.btn-container{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.btn-oem{
  min-width: fit-content;
  background-color: var(--ek-green);
  color: var(--ek-light);
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 20px;
  word-wrap: break-word;
  margin-bottom: 8px;
  border-radius: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
}
.btn-oem:hover{
  background-color: var(--ek-green-text);
  color: var(--ek-light);
}

.btn-secondary{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
/*  text-transform: uppercase; */
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 500;
}

.btn-secondary:hover{
  background-color: var(--ek-grey);
  color: var(--primary-color);
}

.dl-oem-sdk-row{
  padding-top: 40px;
}

.dl-oem-api-row{
  padding-top: 40px;
}

.dl-icon::before{
  vertical-align: middle;
  content:"\f019";
  font-size: 14px;
  margin-left: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 8px;
}

.goto-icon::after{
  vertical-align: middle;
  content:"\f061";
  font-size: 14px;
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}