/* style.css */

:root {
 /* Primary Series */
  --primary-50:  #E6EFF7;
  --primary-100: #CCDFEF;
  --primary-200: #99BFDF;
  --primary-300: #669FCF;
  --primary-400: #3C7FBB;
  --primary-500: #245F97;
  --primary-600: #1E507F;
  --primary-700: #1A456F;
  --primary-800: #163E64;
  --primary-900: #0E2740;
  --primary-950: #081A2B;

  
  /* Secondary Series */
  --secondary-50:  #f6f6f6;
  --secondary-100: #e7e7e7;
  --secondary-200: #d1d1d1;
  --secondary-300: #b0b0b0;
  --secondary-400: #888888;
  --secondary-500: #6d6d6d;
  --secondary-600: #5d5d5d;
  --secondary-700: #4f4f4f;
  --secondary-800: #454545;
  --secondary-900: #404040;
  --secondary-950: #262626;

  /* Gray Series */
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;


  --white: #ffffff;
  --black: #000000;
  /* --yellow: #FFFF00; */
  --red: #FF0000;
  --blue: #0000ff;
  --green: #00ff00;

  /* 50% 투명도를 가진 색상 */
  --white-shadow : #ffffff99;
  --black-shadow : #00000099; 
  --yellow-shadow: #ffff0099;  /* 50% 투명도를 가진 yellow (opacity)*/

  --sub-yellow : #f9fbe7;
  

  --sub-red: #fda5a5;
  --red-shadow: #ff000080;

  --sub-blue: #acacf8;
  --blue-shadow: #0000ff80;

  --sub-green: #aafdaa;
  --green-shadow: #00ff0080;

  --primary-color: #00776A;    /* Primary button coler */
  --primary-dark: #003D38;
  --primary-light: #00776A;
  --secondary-color: #404040;  /* secondary button coler */
  --secondary-dark: #262626;
  --secondary-light: #454545;
  --danger-color: #dc3545;    /* danger button coler */
  --danger-dark: #721c24;


  /* component colors - base  */
  --Header-Footer-Background-Color: #163E64; /* var(--primary-900);  */
  --Header-Footer-Font-Color:  #ffffff;     /* var(--white);  */
  --body-background-color: #f5f5f5;


 /* component colors - button  */
  --btn-text: #ffffff;
  --primary-btn: #245F97;      /* primary-500 */
  --primary-btn-hover: #1A456F; /* primary-700 */
  --secondary-btn: #454545;
  --secondary-btn-hover: #262626;
  --danger-btn: #dc3545;
  --danger-btn-hover: #721c24;
  --back-btn: #cccccc;
  --back-btn-hover: #aaaaaa;

  --font-color: #333333;
  --pagetitle-font-color: #3a3a3a;

  --table-header : #163E64 ;        /* table header color : var(--primary-700) */
  --table-header-text : #ffffff ;   /* table header text color : var(--white) */
  --border-color : #ddd;            /* table border text color : var(--white) */
  --tbody-even : #E6EFF7;           /* table body 짝수행 color : var(--primary-50) */ 
  --tbody-hover : #CCDFEF;          /* table body hover color : var(--primary-100) */ 
  --tbody-font : #333333;           /* table body font color : var(--font-color) */


/****************************************************************************************************/

  
  --cardborder-color : #245F97;      /* primary-500 */
  --cardborder-shadow : #245F9766;   /* 40% 투명 */


  /* Status Colors */
  --successmessage-color: #155724;
  --succesback-color: #d4edda;
  --errormessage-color: #721c24;
  --errorback-color: #f8d7da;

  
  --success-color: #28a745;
  --warning-color: #ffc107; 
  --info-color: #3C7FBB;

  --spinner-color : #245F97;
  --loadingback-color : #fafae5;
  
  
  --selected-row-bg: #99BFDF;
  --selected-row: #245F97;


}