/*==================== GOOGLE FONTS ====================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*==================== khai báo biến ====================*/
:root {
  --header-height: ;

  /*========== Colors ==========*/
  /* Change favorite color */
  --hue-color: 142; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

  /* HSL color mode */
  --first-color: hsl(var(--hue-color), 69%, 61%);
  --first-color-second: hsl(var(--hue-color), 69%, 61%);
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
  --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --body-color: hsl(var(--hue-color), 60%, 99%);
  --container-color: #fff;
  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);

  /*========== Font and typography ==========*/
  --body-font: "Poppins", sans-serif;

  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
  --big-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes Bottom ==========*/
  /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
  --mb-0-25: 0.25rem;
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/* Font size for large devices */
@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}
body, h1, h2 {
    margin:0;
    padding:0;
    font-family: Poppins;
   }
   body {
    background:white;
    font-family: Arial, sans-serif;
   }
   h1 {
    padding:10px;
    background:var(--first-color);
   }
   
   /*---------------------------*/
   /* Read Users */
   /*---------------------------*/
   #user-list {
    margin:0;
    padding:0;
    width:180px;
    float:left;
    margin:10px;
    border:1px solid var(--first-color);
   }
   
   #user-list h2 {
    padding:10px;
    margin:0;
    color:white;
   }
   
   #user-list li {
    padding:5px 10px;
    border-top:1px solid var(--first-color);
    cursor: pointer;
    color:white;
    font-style: italic;
    list-style: none 
   }
   
   #user-list li:hover {
    background: var(--first-color);
   }
   
   #user-detail {
    float:left;
    width:200px;
    margin:10px;
    margin-left:0;
    padding:10px;
    border:1px solid var(--first-color);
    color:white;
   }
   
   
   
   /* Add User Module */
   #add-user-module {
       width:30px;
       margin-bottom: 1px;
       margin-left: 10px;
       margin-top:10px;
   }
   
   #add-user-module #open-add-user-form-btn {
       background: #54bb7d;
       font-size: 1.5em;
       color: white;
       padding-bottom: 5px;
   }
   
   #add-user-module form {
       position: absolute;
       padding: 10px;
       width: 150px;
       background-color: #e1e1e1;
       border: 1px solid #999;
       display: none;
   }
   
   #add-user-module form input {
       width: 97%;
       margin: 2px 0;
   }
   
   #add-user-module form button {
       background: #54bb7d;
       font-size: 1em;
       padding: 0px 10px;
       color: white;
       margin-top: 10px;
   }
   
   
   #add-user-module:hover form {
       display: block;
   }
   
   
   /*Edit*/
   #edit-user-module {
       display: none;
       position: absolute;
       background-color: #e1e1e1;
       border: 1px solid #999;
       top:149px;
       left: 160px;
       padding: 10px;
       width: 150px;
   }
   
   #user-list li:hover~#edit-user-module {
       display: none;
   }
   
   
   #edit-user-module form button {
       background: #54bb7d;
       font-size: 1em;
       padding: 0px 10px;
       color: white;
       margin-top: 10px;
   }