/*
    Variables
*/

:root {
    --color-primary: #2770f6;
    --color-text-theme: #2770f6;
    --color-btn-theme: #2770f6;
    --color-bg-theme: #2770f6;
    --color-primary: #2770f6;
    --color-primary-300: #0070ba;
    --color-primary-400: #009de4;
    --color-primary-600: #001544;
    --color-blank: #fff;
    --color-black: #000;
    --color-white: #fff;
    --color-bg-white: var(--color-white);
    --color-bg-gray1: #eaeef1;
    --color-bg-gray2: #f0f3f9;
    /* e.g. bg cupture, calendar */
    --color-bg-gray3: #e5edf6;
    /* e.g. bg progress bar upload docs */
    --color-bg-gray4: #eceeef;
    /* e.g. tricolor popup */
    --color-bg-gray5: #fafbfc;
    --color-bg-danger: #f34f66;
    --color-bg-green: #24f692;
    --color-bg-orange: #f6ad24;
    --color-success: #12d5b8;
    --color-error: #f52743;
    --color-emphasis: #ffd923;
    --color-border-common: #e1e1e1;
    --color-border-gray1: #f2f2f2;
    --color-border-gray2: #9d9d9d;
    --color-border-td: #dee2e6;
    --color-border-inputs: #e6e9ef;
    --color-input-group-text: #d4e2fc;
    /* e.g. phone number */
    --color-text-basic: #0b102f;
    --color-text-blue1: #0a2360;
    --color-text-gray1: #878995;
    --color-text-gray2: #6d7082;
    --color-text-gray3: #7f7f7f;
    /* e.g. tarading page label */
    --color-text-gray4: #5a5f6d;
    /* e.g. tarading page table */
    --color-text-gray5: #bcbec0;
    --color-text-gray6: #868e99;
    /* e.g. datapicker */
    --color-text-white: var(--color-white);
    --color-header-basic: #231f20;
    /* e.g. account page */
    --color-header-gray1: #6f7073;
    /* e.g. account page */
    --color-header-gray2: #606974;
    /* e.g. datapicker */
    --color-icon-gray: #828595;
    --color-text-muted: #656565;
    --color-trade-widget-button-buy: var(--color-buy-sell-btn);
    --color-trade-widget-button-sell: var(--color-buy-sell-btn);
    --border-radius: 5px;
    --card-header-border: none;
    --card-header-background: transparent;
    --card-footer-background: rgba(0, 0, 0, .03);
    --card-footer-border-top: 1px solid rgba(0, 0, 0, .125);
    --card-box-shadow: none;
    --card-border-radius: var(--border-radius);
    --card-border: 1px solid var(--color-border-common);
    /* Font example, waiting desingns Fonts */
    --font-family: 'proxima-nova', "Roboto", Arial, sans-serif;
    --font-body: 12px;
    --font-small: 12px;
    --font-medium-sm: 13px;
    --font-medium: 14px;
    --font-lg-sm: 16px;
    --font-lg: 18px;
    --font-xxlg: 22px;
    --font-xxlg-lg: 25px;
    --font-xxxlg: 32px;
    --box-shadow: 0 10px 18px rgba(0, 0, 0, .1);
    --form-control-border-radius: 5px;
    --input-group-dropdown-border-radius: inherit;
    --button-border-radius: 5px;
    --button-focus-shadow: 0 0 0 0.2rem var(--color-text);
    /* Change dashboard */
    /* Cart */
    --color-change-dashboard-cart-background: var(--color-primary-300);
    --color-change-dashboard-cart-text: var(--color-blank);
    --cart-strong-amount: white;
    /* Footer */
    --color-main-footer-background: var(--color-primary);
    --color-change-footer-nav-title: var(--color-primary-300);
    --color-change-footer-nav-item: var(--color-blank);
    /* Buy form */
    --predefined-offer-shadow: none;
    --predefined-offer-border: var(--border);
    --color-predefined-offer-text-hover: var(--color-blank);
    --color-buy-form-negative-background: var(--color-gray-500);
    /* Order confirmation */
    --order-confirmation-header-background: var(--color-primary);
    --order-confirmation-footer-background: var(--color-primary-300);
    --order-confirmation-text: var(--color-blank);
}