@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* PRESET  */
  :root {
  --body-bgd:#212121;
  --strip-bgd:#171717;
  
  --menu-bgd: #171717;
  --menu-bgd-hover: #343434;

  --content-bgd:#212121;  
  --sidebar-bgd: #171717;
  --sidebarbar-text: #e2e1e1;
  
  --text-color-default: #fafafa;
  --placeholder-color-default: #cbcbcb;
  
  --brand-color1:#00582a;
  --brand-color2:#808080;
  
  --info-text:#cbcbcb;
  
  --up-color: #77DD77;
  --down-color: #FF6961;
  
  --info-text:#adadad; }


  html[data-theme='light'] {
  --body-bgd:#ffffff;
  --strip-bgd:#f9f9f9;
  
  --info-text:#747474;
  
  --menu-bgd: #f9f9f9;
  --menu-bgd-hover: #ececec;
  
  --content-bgd:#ffffff;
  --sidebar-bgd: #f9f9f9;
  --sidebarbar-text: #0d0d0d;
  
  --text-color-default: #0d0d0d;
  --placeholder-color-default: #838383;
  
  --info-text:#6d6d6d; }
  

/* DEFAULT  */
html {height: 100%;}
body { margin:0px; padding:0px; height: 100%;min-height: 100vh; font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight:400;font-size:18px;background-color:var(--sidebar-bgd);}
@media screen and (max-width: 380px){ html{  width: 380px; overflow: auto; }}



input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: none;font: inherit; color: inherit; outline: none; box-shadow: none; }

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-color:#f3f3f3;}

.login-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;}

.logo {
    width: 200px;
    margin-bottom: 2px;}


.input-box {margin-bottom: 10px;}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0 10px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;}

.login-button {
transition:0.3s;
    background-color: #00582a;
    color: white;
    padding: 10px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight:400;
    width: 100%;}

.login-error {    background-color: #c71212;
    color: white;
    padding: 10px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight:300;
    width: 100%;
    margin-top:10px;}

.login-button:hover {
    background-color: #808080;
}