@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 {

  --cus-color-bg-white: #FFFFFF;
  --cus-color-bg-lightblue: #E6F3FF;
  --cus-color-bg-blue: #A3CCFA;
  --cus-color-bg-grayishblue: #C5D3E0;
  --cus-color-bg-gray: #E3E3E2;
  --cus-color-bg-darkblue: #003366;

  --cus-color-primary-darkblue: #003366;
  --cus-color-primary-lightblue: #99CCFF;
  --cus-color-secondary-black: #333333;
  --cus-color-secondary-blue: #14A0EB;
  --cus-color-secondary-darkgray: #C2D3E2;
  --cus-color-secondary-lightgray: #E3E3E2;
  --cus-color-secondary-lightorange: #E7AD83;
  --cus-color-secondary-lightgreen: #B4C9A4;
  --cus-color-secondary-gray: #C9CCCE;
  /*--cus-color-secondary-gradient: #7588C4 to #60BAC3;*/
  --cus-color-secondary-gradient-A: #7588C4;
  --cus-color-secondary-gradient-B: #60BAC3;

  /*--tdp-primary: #00D9BA;*/
  --tdp-primary: var(--cus-color-bg-blue);
  --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-light-orange: #F58C60;
  --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-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: var(--cus-color-bg-blue);
  /*--tdp-nav-link-color: white;*/
  --tdp-nav-link-color: var(--cus-color-bg-darkblue);
  --tdp-nav-link-color-old: 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: 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: 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 */
  /*--tdp-primary-btn-color: #00D9BA;
  --tdp-primary-btn-border: 2px solid #00D9BA;*/
  --tdp-primary-btn-color: var(--cus-color-bg-darkblue);
  --tdp-primary-btn-border: 2px solid var(--cus-color-bg-blue);
  --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;
  /* Alert boxes */
  /*--tdp-alert-success-bg-color: #CEFFF6;
  --tdp-alert-success-border-color: #3ECCBB;
  --tdp-alert-success-text-color: #27887D;*/
  --tdp-alert-success-bg-color: #B4C9A4;
  --tdp-alert-success-border-color: #155724;
  --tdp-alert-success-text-color: #155724;
  --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: 18px;
}

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%;*/
  min-height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 100px;
}

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

.bg-header{
  /*background-color: #0c3c6c !important;
  background: url(../images/bg-header.png) no-repeat center center !important;*/
  background-color: #FFFFFF;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  
  /* background-position: 75% !important; */
}

.bg-blur-1{
    background: url(../images/bg-blur-1.png) no-repeat !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    color: #003366;
    padding-block: 40px;
}

.bg-blue-sky {
  /*background-color: #E6F3FF;*/
  background-color: #FFFFFF;
  color: #003366;
  padding-block: 40px;
}

.bg-blue-dark {
  background-color: #003366;
  padding-block: 40px;
}



/* over write lib stoplight */
/* main.css เรียกก่อน css ของ lib เรียกทีหลัง จึงต้องใช้ !important */
.sl-font-prose {
  font-family: "OpenSans-Regular" !important;
}
.sl-text-paragraph {
  font-size: 25px !important;
  line-height: 30px !important;
      margin-top: 15px;
}
.sl-font-sans, .sl-font-ui{
  font-family: "OpenSans-Regular" !important;
}
.sl-text-base {
  font-size: 16px !important;
  line-height: 20px !important;
}
.sl-font-mono {
    font-family: "OpenSans-Regular" !important;
}
.sl-text-lg {
  font-size: 16px !important;
  line-height: 20px !important;
}
.sl-prose {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --fs-paragraph: 1em;
    --fs-paragraph-small: 0.875em;
    --fs-code: 0.875em;
    /*font-family: var(--font-prose);*/
    font-family: "OpenSans-Regular" !important;
    font-size: 16px;
    line-height: var(--lh-paragraph);
}
/* end over write lib stoplight */