@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: #34d9c3;
    --tdp-primary-dark: #479885;
    --tdp-primary-light: #479885;
    --tdp-primary-success-light: #479885;
    --tdp-secondary: #257da2;
    --tdp-secondary-dark: #0c4861;
    --tdp-light-blue: #257da2;
    --tdp-light-gray: #f2f2f2;
    --tdp-light-purple: #257da2;
    --tdp-primary-danger-light: #f5222d;
    --tdp-danger-light: #f5222d;
    --tdp-danger-dark: #79050b;
    --tdp-primary-warning-light: #fa8c16;
    --tdp-warning-light: #fa8c16;
    --tdp-warning-dark: #743d03;
    --tdp-light-border: 1px solid #b3b3b3;
    --tdp-extra-dark: #000219;
    --tdp-dark: #000219;
    --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: #000219;
    --tdp-body-bg-color: #e9ecef;
    --tdp-tab-active: #ebedf4;
    --tdp-light-green: #d7f8f3;
    --tdp-light-red: #ffd1ce;
    --tdp-login-form: #F0F0F3D9;
    /* Text colors */
    --tdp-text-color: #2c3030;
    --tdp-link-color: rgb(37, 125, 162);
    --tdp-link-hover-color: rgb(12, 72, 97);
    --tdp-nav-link-color: white;
    --tbd-text-color-dark: #1a1a1a;
    --tdp-text-color-extra-dark: #03031C;
    --tdb-text-color-gray: #828282;
    --tbd-text-colot-gray-mid: #4d4d4d;
    --tdb-text-color-gray-lighter: #f2f2f2;
    /* Borders */
    --tdp-card-border-radius: 10px;
    --tdp-border-color-on-error: #ff6c7d;
    --tdp-table-border-color: #c3c3e5;
    --tdp-border-radius: 20px;
    --tdp-login-form-border-radius: 8px;
    --tdp-primary-border: 2px solid #34d9c3;
    --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 */
    --tdp-primary-btn-bg-color: #34d9c3;
    --tdp-primary-btn-color: #333333;
    --tdp-primary-btn-border: 2px solid #34d9c3;
    --tdp-primary-btn-text: 2px solid #34d9c3;
    --tdp-secondary-btn-bg-color: transparent;
    --tdp-secondary-btn-color: #257da2;
    --tdp-secondary-btn-border: 1.5px solid rgb(224, 224, 224);
    --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: #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;
    /* Icons */
    --tdp-icon-success-dark: #479885;
    --default-border-radius: 18px;
}

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

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

section::before {
     content:"";
     display:block;
     height:70px; /* fixed header height*/
     margin:-70px 0 0; /* negative fixed header height */
 }

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

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

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

.container {
    max-width: 1230px;
}