/*
|--------------------------------------------------------------------------
| Colors Variables
|--------------------------------------------------------------------------
| Author: Hardcode Technologies
| Converted to CSS Variables System
|--------------------------------------------------------------------------
*/

:root {
  /* Basic Colors */
  --color-blue: #0000ff;
  --color-red: #ff0000;
  --color-green: #00ff00;
  --color-pink: #ff00ff;
  --color-cyan: #00ffff;

  /* Custom Colors */
  --color-sea-green: #a4da7f;
  --color-purple: #a47fda;
  --color-deep-green: #8db278;
  --color-army-green: #3e4e35;

  /* Greys */
  --color-light-grey: #b6b6b6;
  --color-deep-grey: #999999;
  --color-gray: rgb(200, 200, 200);

  /* Purple & Blue */
  --color-light-purple: #c1b1ca;
  --color-light-blue: #d4e2fd;

  /* Shadow */
  --color-shadow: #dee1e6;

  /* Bootstrap Style Colors */
  --color-primary: rgb(20, 20, 20);
  --color-secondary: #ffffff;/*#868e96*/
  --color-success: #28a745;
  --color-info: #17a2b8;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-light: #f8f9fa;
  --color-dark: #343a40;

  /* Common */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Text */
  --color-text-link: rgb(0, 200, 0);
  --color-text-primary: rgb(152, 84, 12);
  --color-text-green: rgb(20, 255, 20);
  --color-text-red: rgb(200, 10, 10);

  /* Notes */
  --color-note: rgba(255, 100, 100, 0.8);

  --font-size: 13px;
  --font-size-h1: 30px;
  --font-size-h2: 25px;
  --font-size-h3: 20px;
  --nav-bar-width-height: 50px;

  --color-white: #fff;
  --color-blue: rgb(0, 0, 100);

  --color-success: rgba(75, 248, 132, 1);
  --color-info: rgba(168, 84, 131, 1);
  --color-danger: rgba(224, 56, 44, 1);
  --color-warning: rgba(251, 194, 28, 1);

  --color-primary-text: rgba(150, 150, 150, 0.8);
  --color-bkg: rgba(0, 0, 0, 1); 
  --color-bkg-primary: rgba(232, 125, 13, 0.8);
  --color-primary-light: rgba(20, 20, 20, 0.5);
  --color-bkg-light: rgba(34, 38, 42, 0.5);
  --color-input-bkg: rgba(200, 200, 200, 0.2);

  --color-bkg-header-title: rgb(20, 20, 20);
  --color-bkg-header-body: rgba(30, 30, 30, 0.8);
  --color-blue-gray: rgb(1, 51, 52);
  --color-bkg-menu: rgb(30, 30, 30);

  /*chart*/
  --color-online: #5fb21b;
  --color-offline: #a33f2b;
  --color-ideal: #454e60;
  /*deaults*/
  --default-radius: 10px;
  --default-font-size: 14px;
  --default-font-size-bold: 18px;

  /*size*/
  --dim-slim: 1px;
  --dim-tiny: 3px;
  --dim-small: 5px;
  --dim-medium: 8px;
  --dim-large: 10px;
  --dim-tlarge: 13px;
  --dim-slarge: 15px;
  --dim-mlarge: 18px;
  --dim-xlarge: 20px;
  --box-dim: 40px;
}

/*
|--------------------------------------------------------------------------
| Background Classes
|--------------------------------------------------------------------------
*/

.bkg-blue {
  background-color: var(--color-blue);
}
.bkg-red {
  background-color: var(--color-red);
}
.bkg-green {
  background-color: var(--color-green);
}
.bkg-pink {
  background-color: var(--color-pink);
}
.bkg-cyan {
  background-color: var(--color-cyan);
}

.bkg-sea-green {
  background-color: var(--color-sea-green);
}
.bkg-purple {
  background-color: var(--color-purple);
}
.bkg-deep-green {
  background-color: var(--color-deep-green);
}
.bkg-army-green {
  background-color: var(--color-army-green);
}

.bkg-light-grey {
  background-color: var(--color-light-grey);
}
.bkg-light-purple {
  background-color: var(--color-light-purple);
}
.bkg-deep-grey {
  background-color: var(--color-deep-grey);
}
.bkg-light-blue {
  background-color: var(--color-light-blue);
}

.bkg-shadow {
  background-color: var(--color-shadow);
}

.bkg-transparent {
  background: transparent;
}

.bkg-primary {
  background-color: var(--color-primary);
}
.bkg-secondary {
  background-color: var(--color-secondary);
}
.bkg-success {
  background-color: var(--color-success);
}
.bkg-info {
  background-color: var(--color-info);
}
.bkg-warning {
  background-color: var(--color-warning);
}
.bkg-danger {
  background-color: var(--color-danger);
}
.bkg-light {
  background-color: var(--color-light);
}
.bkg-dark {
  background-color: var(--color-dark);
}
.bkg-white {
  background-color: var(--color-white);
}

/*
|--------------------------------------------------------------------------
| Text Colors
|--------------------------------------------------------------------------
*/

.text-white {
  color: var(--color-white);
}
.text-black {
  color: var(--color-black);
}

.text-deep-green {
  color: var(--color-deep-green);
}
.text-green {
  color: var(--color-text-green);
}

.text-primary {
  color: var(--color-text-primary);
}
.text-blue {
  color: var(--color-blue);
}
.text-red {
  color: var(--color-text-red);
}

.text-secondary {
  color: var(--color-secondary);
}
.text-success {
  color: var(--color-success);
}
.text-info {
  color: var(--color-info);
}
.text-warning {
  color: var(--color-warning);
}
.text-danger {
  color: var(--color-danger);
}
.text-light {
  color: var(--color-light);
}
.text-dark {
  color: var(--color-dark);
}

.text-link {
  color: var(--color-text-link);
}
.text-gray {
  color: var(--color-gray);
}

/*
|--------------------------------------------------------------------------
| Border Classes
|--------------------------------------------------------------------------
*/

.border-primary {
  border: 1px solid var(--color-primary);
}

.border-black {
  border: 1px solid var(--color-black);
}

/*
|--------------------------------------------------------------------------
| Bottom Border Lines
|--------------------------------------------------------------------------
*/

.bottom-line-white {
  border-bottom: 1px solid var(--color-white);
}

.bottom-line-black {
  border-bottom: 1px solid var(--color-black);
}

.bottom-line-deep-green {
  border-bottom: 1px solid var(--color-deep-green);
}

.bottom-line-primary {
  border-bottom: 1px solid var(--color-primary);
}

.bottom-line-secondary {
  border-bottom: 1px solid var(--color-secondary);
}

.bottom-line-success {
  border-bottom: 1px solid var(--color-success);
}

.bottom-line-info {
  border-bottom: 1px solid var(--color-info);
}

.bottom-line-warning {
  border-bottom: 1px solid var(--color-warning);
}

.bottom-line-danger {
  border-bottom: 1px solid var(--color-danger);
}

.bottom-line-light {
  border-bottom: 1px solid var(--color-light);
}

.bottom-line-dark {
  border-bottom: 1px solid var(--color-dark);
}

/*
|--------------------------------------------------------------------------
| Stripe Notifications
|--------------------------------------------------------------------------
*/

.danger-stripe {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.succes-stripe {
  background-color: var(--color-green);
  color: var(--color-black);
}

.succes-stripe * {
  color: var(--color-black);
}

/*
|--------------------------------------------------------------------------
| Notes
|--------------------------------------------------------------------------
*/

.note {
  color: var(--color-note);
  text-transform: capitalize;
}