@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/portal-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/getting-started.css";
@import "./pages/feedback.css";
@import "./pages/catalouge-details.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 "./common/banner-images.css";
@import "./pages/open-api-doc.css";
@import "./pages/profile.css";
@import "./pages/avmgmt_login.css";

/*
  Global Variables
*/

:root {
  --tdp-primary: #00d9ba;
  --tdp-primary-dark: #a2a2cc;
  --tdp-primary-light: #c3c3e5;
  --tdp-primary-success-light: #cefff6;
  --tdp-secondary: #7a79a1;
  --tdp-secondary-dark: #505071;
  --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 customization
  */
  /* Background colors */
  --tdp-nav-bg-color: #36364c;
  --tdp-body-bg-color: #11315a;
  --tdp-tab-active: #ebedf4;
  --tdp-light-green: #d7f8f3;
  --tdp-light-red: #ffd1ce;
  --tdp-login-form: #f0f0f3d9;
  --tdp-text-color: #505071;
  --tdp-link-color: #00d9ba;
  --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;
  --tdp-text-color-white: white;
  --tdp-bg-color-api-doc-gray: #ebeef5;
  --tdp-bg-color-api-doc-sidebar: #eceef5;
  /* Borders */
  --tdp-card-border-radius: 10px;
  --tdp-border-color-on-error: #ff6c7d;
  --tdp-table-border-color: #c3c3e5;
  --tdp-border-radius: 25px;
  --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;
  --api-portal-tabs-border: 1.5px solid #FFC300;
  --tdp-form-element-border-white: 2px solid #ffffff;
  --tdp-form-element-border-alert: 2px solid #285082;
  /* Buttons */
  --tdp-primary-btn-color: #00d9ba;
  --tdp-primary-btn-border: 2px solid #00d9ba;
  --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;
  --border-brand-default: #2a4dd0;
  --border-brand-hover: #223eac;
  --link-default: #00a6ed;
  /* API Portal Buttons */
  --api-portal-btn-color: #11315a;
  --api-portal-btn-border: 2px solid #ffc300;
  --api-portal-btn-bg-color: #ffc300;

  /* Background colors */
  --api-portal-nav-bg-color: #11315a;
  --api-portal-light-bg-color: #11315a;
  --api-portal-dark-bg-color: #0D2543;
  --api-portal-link-color: #ffc300;
  --api-portal-color-white: white;
  --api-portal-modal-bg: #EBEBEB;
  --api-portal-alert-bg: #EDECEC;
  /* Card title */
  --api-portal-card-title-text-color: #ffc300;
  --api-portal-card-border-radius: 25px;
  /* catalog form border */
  --api-catalog-form-border: 2px solid #ffc300;
  /* color constant*/
  --api-portal-white-color: white;
  --api-portal-yellow-color: #FFC300;
  --api-portal-orange-color: #FF671F;
  --api-portal-black-color: black;
  --api-portal-placeholder: rgba(17, 49, 90, 0.25);
  --api-portal-text-italic-color: #777777;
  /* input background color */
  --api-portal-input-bg-color: #f3f3f3;
  /* Alert boxes */
  --tdp-alert-success-bg-color: #cefff6;
  --tdp-alert-success-border-color: #3eccbb;
  --tdp-alert-success-text-color: #27887d;
  --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;
  --tdb-text-color-genral: #285082;
  /* Icons */
  --tdp-icon-success-dark: #00b798;
  --default-border-radius: 18px;

  --api-portal-card-title-color: #BF4D17;
  --api-portal-blog-date-color: #767676;
  --api-portal-text-color: #454545;
  --api-portal-form-placeholder-color: #11315A;
  --api-portal-white-smoke-color: #EBEBEB;
  --api-portal-delete-button: #CE0000;
  --api-portal-737373-color: #737373;
}

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

body {
  height: 100vh;
  background-color: var(--api-portal-light-bg-color);
}

.page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #11315A;
  margin-top: 6em;
}

/* 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;
}

.container {
  max-width: 1230px;
}

/* move this to typography.css */
.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font-60 {
  font-size: 60px;
  /* Adjust font size */
}

.font-50 {
  font-size: 50px;
  /* Adjust font size */
}

.text-gradient-yellow-orange {
  background: linear-gradient(to right, #FFC300, #FF671F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grey-box {
  margin: -3rem auto 2rem;
  width: 40vw;
  color: white;
}

@media screen and (min-width: 100em) {
  .grey-box {
    width: 30%
  }
}

@media print,
screen and (min-width: 48em) {
  .grey-box {
    margin: -4rem auto 4rem;
    width: 76vw
  }
}

@media print,
screen and (min-width: 64em) {
  .grey-box {
    margin-top: -4.5rem
  }
}

@media screen and (min-width: 75em) {
  .grey-box {
    margin-top: -5rem
  }
}

@media screen and (min-width: 100em) {
  .grey-box {
    width: 30vw;
    margin: -9rem auto 6rem;
  }
}

button {
  background-color: transparent;
  border: none;
  color: white;
  padding: 12px 30px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

canvas {
  /*prevent interaction with the canvas*/
  pointer-events: none;
}

.bullets-icon {
  width: 70px;
  height: 23px;
}

.portal_private_layout_wrapper {
  width: 90%;
}

.rounded-20 {
  border-radius: 20px;
}

.error-message {
  color: var(--tdp-danger-dark);
  font-size: 12px;
  margin-left: 14px;
}

.overflow-wrap {
  overflow-wrap: anywhere;
}

.custom-page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--api-portal-light-bg-color);
}