/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )
-----------------------------------------*/
:root {
  --body-bg-color: rgba(24, 23, 23, 1);
  --base-color: rgba(255, 255, 255, 1);
  --h-color: rgba(255, 255, 255, 1);
  --text-color: rgba(255, 255, 255, 1);
  --text-muted-color: rgba(255, 255, 255, 0.3);
  --primary-color: rgba(95, 158, 160, 1);
  --small-color: rgba(255, 189, 45, 1);
  --error-color: rgba(255, 77, 77, 1);
  --error-border-color: rgba(255, 77, 77, 0.75);
  --error-bg-color: rgba(60, 20, 20, 0.75);
  --secondary-color: rgba(176, 196, 222, 0.75);
  --secondary-bg-hover-color: rgba(119, 136, 153, 0.75);
  --section-bg-color: rgba(30, 30, 35, 0.75);
  --custom-btn-bg-color: rgba(87, 136, 177, 0.75);
  --custom-btn-bg-hover-color: rgba(176, 196, 222, 0.75);
  --modal-color: rgba(0, 0, 0, 1);
  --header-bgcolor: rgba(0, 0, 0, 0.50);
  --p-color: rgba(210, 213, 221, 1);
  --label-color: rgba(176, 176, 184, 1);
  --input-color: rgba(136, 197, 230, 1);
  --input-bg-color: rgba(0, 0, 0, 0.2);
  --placeholder-color: rgba(136, 197, 230, 0.6);
  /* New variable for placeholder */
  --select-color: rgb(214, 243, 255);
  --select-bg-color: rgb(0, 0, 0);
  --border-color: rgba(255, 255, 255, 0.5);
  --link-hover-color: rgba(136, 197, 230, 1);
  --offcanvas-bg: rgba(0, 0, 0, 0.85);

  --video-display: block;
  --dropdown-bg: rgba(0, 0, 0, 1);
  --dropdown-text: rgba(255, 255, 255, 1);
  --dropdown-hover-bg: rgba(51, 51, 51, 1);

  --body-font-family: 'Roboto Condensed', sans-serif;
  --heading-font-family: 'Oswald', sans-serif;

  --h1-font-size: 62px;
  --h2-font-size: 36px;
  --h3-font-size: 28px;
  --h4-font-size: 24px;
  --h5-font-size: 22px;
  --h6-font-size: 20px;
  --p-font-size: 18px;
  --menu-font-size: 16px;
  --btn-font-size: 14px;

  --border-radius-large: 100px;
  --border-radius-medium: 20px;
  --border-radius-small: 10px;
  --border-radius-textarea: var(--border-radius-small);
  /* New variable for textarea */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Custom theme variables for cards and tables */
  --card-bg: var(--section-bg-color);
  --card-header-bg: rgba(30, 30, 35, 0.9);
  --card-border-color: rgba(255, 255, 255, 0.1);
  --card-text-color: var(--text-color);

  --table-bg: rgba(30, 30, 35, 0.75);
  --table-striped-bg: rgba(40, 40, 45, 0.75);
  --table-hover-bg: rgba(50, 50, 55, 0.75);
  --table-border-color: rgba(255, 255, 255, 0.15);
  --table-color: var(--text-color);
  --table-header-color: var(--h-color);

  /* Custom theme variables for alerts */
  --alert-success-bg: rgba(30, 70, 30, 0.8);
  --alert-success-text: rgba(180, 255, 180, 1);
  --alert-success-border: rgba(50, 100, 50, 1);

  --alert-danger-bg: rgba(70, 30, 30, 0.8);
  --alert-danger-text: rgba(255, 180, 180, 1);
  --alert-danger-border: rgba(100, 50, 50, 1);

  --alert-warning-bg: rgba(70, 70, 30, 0.8);
  --alert-warning-text: rgba(255, 255, 180, 1);
  --alert-warning-border: rgba(100, 100, 50, 1);

  --alert-info-bg: rgba(30, 30, 70, 0.8);
  --alert-info-text: rgba(180, 180, 255, 1);
  --alert-info-border: rgba(50, 50, 100, 1);

  /* API Docs */
  --api-code-bg: #1e1e1e;
  --api-code-color: #d4d4d4;
  --api-code-border: #333333;
  --api-alert-bg: rgba(108, 117, 125, 0.1);
  --api-alert-border: #6c757d;

  /* Request/Response differentiation */
  --api-request-bg: #0d1117;
  --api-request-border: #1f6feb;
  /* Blue border for request */
  --api-response-bg: #161b22;
  --api-response-border: #238636;
  /* Green border for response */
}