@import './components/select.css';
@import './components/buttons.css';
@import './components/card.css';
@import './components/input.css';
@import './components/table.css';
@import './components/alert.css';
@import './components/modal.css';
@import './components/tooltip.css';

@import './pages/catalogue.css';
@import './pages/login.css';
@import './pages/home.css';
@import './pages/api-product.css';
@import './pages/cart.css';
@import './pages/flip-flop.css';
@import './pages/blog.css';
@import './pages/app.css';
@import './pages/users.css';
@import './pages/analytics.css';
@import './pages/get-started.css';

@import './common/form.css';
@import './common/navigation.css';
@import './common/typography.css';
@import './common/tyk-icons.css';
@import './common/texts.css';
@import './common/layout.css';
@import './design-system.css';

/*
  Global Variables
*/

:root {
 /* --tdp-primary: #00D9BA;*/
  --tdp-primary: #2C72FF;
  --tdp-primary-dark: #A2A2CC;
  --tdp-primary-light: #C3C3E5;
  --tdp-primary-success-light: #CEFFF6;
  /*--tdp-secondary: #7A79A1;
  --tdp-secondary-dark: #505071;*/
  --tdp-secondary: #2a2a3b;
  --tdp-secondary-dark: #1d1d29;
  --tdp-light-blue: #82BBC6;
  --tdp-light-gray: #EDEDF9;
  --tdp-light-purple: #0C95CF;
  --tdp-primary-danger-light: #F5CCD1;
  --tdp-danger-light : #FF6C7D;
  --tdp-danger-dark : #E44766;
  --tdp-primary-warning-light: #FFE885;
  --tdp-warning-light : #D6B218;
  --tdp-warning-dark : #C58C11;
  --tdp-light-border: 1px solid #C3C3E5;
  --tdp-extra-dark: #36364C;
  --tdp-dark: #43435B;
  --tdp-text-on-red-background: #EA4766;
  --tdp-size-xs: 12px;
  --tdp-size-sm: 14px;
  --tdp-size-md: 16px;
  --tdp-size-lg: 18px;
  --tdp-size-xl: 24px;
  /*
    Extra variables to ease customisation
  */
  /* Background colors */
  /*--tdp-nav-bg-color: #36364C;*/
  --tdp-nav-bg-color: black;
  --tdp-body-bg-color: white;
  --tdp-tab-active: #EBEDF4;
  --tdp-light-green: #D7F8F3;
  --tdp-light-red: #FFD1CE;
  --tdp-login-form: #F0F0F3D9;
  /* Text colors */
  --tdp-text-color: #505071;
  /*--tdp-link-color: #00D9BA;*/  
  --tdp-link-color: #578FFF;
  --tdp-nav-link-color: white;
  --tdb-text-color-dark: #31394D;
  --tdp-text-color-extra-dark: #03031C;
  --tdb-text-color-gray: #808080;
  --tbd-text-colot-gray-mid: #4D4D4D;
  --tdb-text-color-gray-lighter: #868686;
  /* Borders */
  --tdp-card-border-radius: 7px;
  --odido-card-border-radius: 0;
  --tdp-border-color-on-error: #FF6C7D;
  --tdp-table-border-color: #C3C3E5;
  --odido-table-border-color: white;
  --tdp-border-radius: 20px;
  --tdp-login-form-border-radius: 8px;
  --tdp-primary-border: 1px solid #03031C;
  --tdp-form-element-border: 2px solid #C3C3E5;
  --tpd-gray-200-border: 1px solid #DDDDDD;
  --tdp-border-graph: 2px solid #EFEEEB;
  --tdp-analytics-select-border: 2px solid #505071;
  --tdp-border-green: #2CA597;
  /* Buttons */
  --odido-btn-hover-color: radial-gradient(circle, rgba(128,128,128,1) 0%, rgba(0,0,0,1) 100%);
 
  /*--tdp-primary-btn-color: #00D9BA;
  --tdp-primary-btn-border: 2px solid #00D9BA;*/
  --tdp-primary-btn-color: black;
  --tdp-primary-btn-border: 2px solid black;
  --tdp-primary-btn-hover-color: rgb(39, 39, 39);
  --tdp-secondary-btn-color: #7A79A1;
  --tdp-secondary-btn-border: 2px solid #7A79A1;
  --tdp-danger-btn-color: #FF6C7D;
  --tdp-danger-btn-border: 2px solid #FF6C7D;
  --tdp-danger-outline-btn-border: 2px solid #E44766;
  --tdp-warning-btn-color: #D6B218;
  --tdp-warning-btn-border: 2px solid #C58C11;
  --tdp-warning-outline-btn-border: 2px solid #D6B218;
  --action-brand-default: #335FFD;
  --action-brand-btn-border: 2px solid #335FFD;
  --border-brand-default: #2A4DD0;
  --border-brand-hover: #223EAC;
  --link-default: #00A6ED;
  /* Alert boxes */
  --tdp-alert-success-bg-color: #FFCE7D;
  --tdp-alert-success-border-color: #FFBD51;;
  --tdp-alert-success-text-color: #8D85FF;
  --tdp-alert-info-bg-color: #EDEDF9;
  --tdp-alert-info-border-color: #7A79A1;
  --tdp-alert-info-text-color: #505071;
  --tdp-alert-warning-bg-color: #FFF5CC;
  --tdp-alert-warning-border-color: #D6B218;
  --tdp-alert-warning-text-color: #996900;
  --tdp-alert-danger-bg-color: #FFE7EA;
  --tdp-alert-danger-border-color: #FF7787;
  --tdp-alert-danger-text-color: #AD465A;
  /* Icons */
  --tdp-icon-success-dark: #2C72FF;
  --default-border-radius: 18px;
  --odido-bg-color: linear-gradient(225deg, #ffac24 7.81%, #7066ff 59.9%, #80aaff 100%, #2c72ff 100%);
  --odido-solid-bg-color: #82ACFF;
  --odido-unity-global-color-scale-purple-100: #C6C2FF;
  --odido-solid-light-bg-color: #FFF0D7;
  --odido-solid-mid-blue-bg-color: #82ACFF;
  --odido-solid-light-pink-bg-color: #FFE8EA;
  --odido-solid-light-blue-bg-color:#EEF3FF;
  --odido-solid-lit-pink-bg-color: #F4DDD5;
  --odido-card-light-blue-bg-color:#f2f6ff;
  --odido-solid-mid-purple-bg-color: #C7C4FF;
  --odido-solid-light-purple-bg-color: #E5E3FF;
  --odido-solid-vlight-purple-bg-color: #F3F2FF;
  --odido-solid-vlight-pink-bg-color: #FFF5F6;
  --odido-bg-white-color: white;
}

html {
  scroll-padding-top: 70px;
}

body {
  padding-top: 55px;
  color: var(--tdp-text-color);
  background-color: var(--tdp-body-bg-color);
}

.page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Gradient backgrounds */
.dark-to-light-bg {
  background: linear-gradient(93.59deg, #36364C 19.75%, #505071 81.94%);
  color: white;
}

.light-to-dark-bg {
  background: linear-gradient(93.59deg, #505071 19.75%, #36364C 81.94%);
  color: white;
}

.odido-color-mix-bg {
  background: linear-gradient(225deg, #ffac24 7.81%, #7066ff 59.9%, #80aaff 100%, #2c72ff 100%);
  color: white;
  padding-bottom: 50px;
}
 /* .odido-color-mix-bg {
   background-image: url('/assets/images/API-Portal-homepage.png');  
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   color: white;
   padding-bottom: 50px;
} */
.odido-background-soft {
  background-color: var(--odido-unity-global-color-scale-purple-100) !important;
}

.odido-background-light {
  background-color: var(--odido-solid-light-bg-color);
}

.odido-background-light-blue {
  background-color: var(--odido-solid-light-blue-bg-color);
}

.odido-background-vlight-pink {
  background-color: var(--odido-solid-vlight-pink-bg-color);
}

.odido-background-light-pink {
  background-color: var(--odido-solid-light-pink-bg-color);
}

.odido-background-white {
  background-color: var(--odido-bg-white-color);
}
.odido-color-mix-bg2 {
  background: linear-gradient(225deg, #2f9a92 0%, #ff7621 46.35%, #ff9773 67.19%, #ffa1aa 89.58%, #ff808c 98.44%);
  color: white;
}
.container {
  max-width: 1010px;
  /* max-width: 1230px; */
}
/* List Group set
========================================================================== */
.list-group-set {
  list-style: none;
  padding: 0;
}
.list-group-set > li {
  background-color: var(--odido-solid-light-purple-bg-color);
  border-bottom: var(--unity-global-border-width-1) solid var(--unity-global-color-solid-white);
  padding: var(--unity-global-space-20) var(--unity-global-space-16);
  position: relative;
}
.list-group-set > li div {
  font: var(--unity-alias-body-regular-lg);
}
.list-group-set > li div.text-muted {
  font: var(--unity-alias-body-regular-md);
  color: var(--unity-global-color-solid-black) !important;
}
.list-group-set > li div.extra-line {
  font: var(--unity-alias-body-regular-md);
  color: var(--unity-global-color-scale-gray-500);
}
.list-group-set > li:first-child:last-child {
  border-radius: var(--unity-global-border-radius-24);
}
.list-group-set > li:first-child {
  border-radius: 0 0 0 0;
}
.list-group-set > li:last-child {
  border-radius: 0 0 0 0;
  border-bottom: none;
}
.list-group-set > li:hover.is-clickable {
  background-color: var(--odido-solid-mid-purple-bg-color);
}
.list-group-set > li .icon-arrow-right {
  color: var(--unity-global-color-solid-black) !important;
}
.list-group-set > li .text-link {
  text-decoration: none;
}

/* Added alignment fix for accordion elements */
.accordion {
    margin-left: 0; /* Align with section header */
    padding-left: 0; /* Remove extra padding */
}

.accordion-panel-title {
    text-align: left; /* Ensure titles align properly */
}

.section-heading {
    margin-top: 0px;
    margin-bottom: 20px; /* Add spacing between header and accordion */
    line-height: 64px;
}