@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 './common/form.css';
@import './common/navigation.css';
@import './common/typography.css';
@import './common/tyk-icons.css';
@import './common/texts.css';
@import './common/layout.css';

/*
  Global Variables
*/

:root {
  --tdp-primary: #175e61;
  --tdp-primary-dark: #000000;
  --tdp-primary-light: grey;
  --tdp-primary-success-light: #CEFFF6;
  --tdp-secondary: #000000;
  --tdp-secondary-dark: #505071;
  --tdp-light-blue: #175e61;
  --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 grey;
  --tdp-extra-dark: #36364C;
  --tdp-dark: #43435B;
  --tdp-text-on-red-background: #EA4766;
  --tdp-size-xs: 12px;
  --tdp-size-sm: 17.99px;
  --tdp-size-md: 16px;
  --tdp-size-lg: 18px;
  --tdp-size-xl: 24px;
  /*
    Extra variables to ease customisation
  */
  /* Background colors */
  --tdp-nav-bg-color: white;
  --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: #202020;
  --tdp-link-color: #ea002a;
  --tdp-nav-link-color: #000;
  --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: 0px;
  --tdp-border-color-on-error: #FF6C7D;
  --tdp-table-border-color: grey;
  --tdp-border-radius: 0px;
  --tdp-login-form-border-radius: 0px;
  --tdp-primary-border: 1px solid #03031C;
  --tdp-form-element-border: 2px solid grey;
  --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 */
  --tdp-primary-btn-color: #ea002a;
  --tdp-primary-btn-border: 2px solid #ea002a;
  --tdp-secondary-btn-color: #FFF;
  --tdp-secondary-btn-border: 2px solid #ea002a;
  --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;
  /* Alert boxes */
  --tdp-alert-success-bg-color: #175e61;
  --tdp-alert-success-border-color: #175e61;
  --tdp-alert-success-text-color: #fff;
  --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: #00B798;
  --default-border-radius: 0px;
}

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

body {
  padding-top: 55px;
  height: 100vh;
  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: white;
  color: black;
  border-top: 1px solid #EA002A;
  border-bottom: 1px solid #EA002A;
}

.light-grey-bg {
  background: #fafafa;
  color: black;
}

.black-bg {
  background: black;
  color: white;
}

.light-to-dark-bg {
  background: #fff;
  border-top: 1px solid #EA002A;
  border-bottom: 1px solid #EA002A;
  color: black;
}

.container {
  max-width: 1230px;
}

.red-border {
  border-bottom: 1px solid #EA002A;
}

/* Font sizes */

h1 {
  font-size: 50.43px !important;
  line-height: 44px !important;
  letter-spacing: 1.2px !important;
}

h2 {
  font-size: 39.57px !important;
  line-height: 41px !important;
  color: #175e61 !important;
}

p {
  font-size: 17.99px !important;
  line-height: 23px !important;
}