:root{
  --ink:#17382D;
  --ink-2:#215441;
  --muted:#637970;
  --muted-2:#91A59C;

  --line:#D9E8E1;
  --line-2:#C7DCD2;

  --paper:#F4F9F6;
  --paper-2:#E9F4EF;
  --card:#FFFFFF;

  --green:#087F5B;
  --green-2:#0B946A;
  --green-3:#18A878;
  --green-4:#4DBE98;
  --green-dark:#04553D;

  --green-soft:#E4F5ED;

  --mint:#D7F0E5;
  --mint-2:#BFE5D4;

  --gold:#C9A85D;
  --gold-soft:#F7F0DE;

  --red:#B42318;
  --red-soft:#FDECEC;

  --orange:#B54708;
  --orange-soft:#FFF3E6;

  --blue:#1769AA;
  --blue-soft:#EAF3FA;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;

  --shadow-xs:0 1px 3px rgba(4,85,61,.06);
  --shadow:0 6px 22px rgba(4,85,61,.09);
  --shadow-lg:0 16px 45px rgba(4,85,61,.15);

  --transition:all .2s ease;

  --bs-body-font-family:"Anuphan","Sarabun",system-ui,sans-serif;
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--paper);

  --bs-primary:var(--green);
  --bs-primary-rgb:8,127,91;

  --bs-link-color:var(--green);
  --bs-link-color-rgb:8,127,91;

  --bs-border-color:var(--line);
}

/* =========================================================
   BASE
   ========================================================= */

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;

  color:var(--ink);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(75,169,135,.09),
      transparent 25rem
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(23,107,77,.045),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      #F8FBF9 0%,
      var(--paper) 100%
    );

  font-size:15px;
  line-height:1.6;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{
  color:var(--green);
  text-decoration:none;
  transition:var(--transition);
}

a:hover{
  color:var(--green-dark);
}

img{
  max-width:100%;
}

button,
input,
select,
textarea{
  font:inherit;
}

::selection{
  background:rgba(75,169,135,.22);
  color:var(--green-dark);
}

:focus-visible{
  outline:2px solid var(--green-3);
  outline-offset:2px;
}

.num,
.table td.num,
.table th.num{
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  min-height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;

  border-radius:9px;

  font-size:.88rem;
  font-weight:600;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

.btn i{
  line-height:1;
}

.btn-primary{
  --bs-btn-bg:var(--green);
  --bs-btn-border-color:var(--green);

  --bs-btn-hover-bg:var(--green-dark);
  --bs-btn-hover-border-color:var(--green-dark);

  --bs-btn-active-bg:var(--green-dark);
  --bs-btn-active-border-color:var(--green-dark);

  --bs-btn-disabled-bg:#98AAA2;
  --bs-btn-disabled-border-color:#98AAA2;

  box-shadow:0 4px 12px rgba(23,107,77,.18);
}

.btn-primary:hover{
  box-shadow:0 7px 18px rgba(23,107,77,.23);
}

.btn-outline-primary{
  --bs-btn-color:var(--green);
  --bs-btn-border-color:#AFC6BC;

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--green);
  --bs-btn-hover-border-color:var(--green);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--green-dark);
  --bs-btn-active-border-color:var(--green-dark);
}

.btn-success{
  --bs-btn-bg:var(--green-2);
  --bs-btn-border-color:var(--green-2);

  --bs-btn-hover-bg:var(--green-dark);
  --bs-btn-hover-border-color:var(--green-dark);
}

.btn-green{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--green-dark),
      var(--green-2)
    );

  border-color:var(--green);

  font-weight:700;

  box-shadow:
    0 5px 15px rgba(23,107,77,.2);
}

.btn-green:hover{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #0B4631,
      var(--green)
    );

  border-color:var(--green-dark);

  box-shadow:
    0 7px 18px rgba(23,107,77,.26);
}

.btn-light{
  background:#fff;
  border-color:var(--line-2);
  color:var(--ink);
}

.btn-light:hover{
  background:#F7FAF8;
  border-color:#B8C9C1;
  color:var(--green-dark);
}

.btn-danger{
  box-shadow:0 3px 10px rgba(180,35,24,.10);
}

.btn-sm{
  min-height:34px;
  padding:.35rem .7rem;
  border-radius:8px;
  font-size:.8rem;
}

.btn-lg{
  min-height:46px;
  border-radius:10px;
}

/* =========================================================
   FORM
   ========================================================= */

.form-label{
  margin-bottom:.4rem;

  color:#385149;

  font-size:.84rem;
  font-weight:650;
}

.form-control,
.form-select{
  min-height:42px;

  color:var(--ink);

  background:#fff;

  border:1px solid #CCD9D3;
  border-radius:9px;

  box-shadow:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.form-control::placeholder{
  color:#A1AEA8;
}

.form-control:hover,
.form-select:hover{
  border-color:#AEBFB7;
}

.form-control:focus,
.form-select:focus{
  color:var(--ink);
  background:#fff;

  border-color:var(--green-2);

  box-shadow:
    0 0 0 .22rem rgba(31,128,96,.13);
}

textarea.form-control{
  min-height:100px;
}

.form-check-input{
  border-color:#B7C7C0;
}

.form-check-input:checked{
  background-color:var(--green);
  border-color:var(--green);
}

.form-check-input:focus{
  border-color:var(--green-2);
  box-shadow:0 0 0 .2rem rgba(31,128,96,.12);
}

.input-group-text{
  color:#60736B;
  background:#F6F9F7;
  border-color:#CCD9D3;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.app-nav{
  position:sticky;
  top:0;
  z-index:1030;

  background:
    linear-gradient(
      135deg,
      #0B3B2A 0%,
      var(--green-dark) 45%,
      var(--green) 100%
    );

  border-bottom:2px solid var(--green-3);

  padding:.42rem 0;

  box-shadow:
    0 5px 22px rgba(13,81,57,.22);
}

.app-nav .container,
.app-nav .container-fluid{
  position:relative;
}

.app-nav .navbar-brand{
  display:flex;
  align-items:center;
  gap:.7rem;

  margin-right:1.6rem;

  min-width:0;
}

.app-nav .navbar-brand img{
  width:42px;
  height:42px;

  flex:0 0 42px;

  object-fit:contain;

  padding:3px;

  background:#fff;

  border:2px solid rgba(255,255,255,.7);
  border-radius:50%;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.06);
}

.brand-mark{
  width:42px;
  height:42px;

  flex:0 0 42px;

  display:grid;
  place-items:center;

  color:#D9F2E7;

  border:2px solid rgba(255,255,255,.72);

  border-radius:50%;

  background:rgba(255,255,255,.055);

  font-size:1.05rem;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.05);
}

.brand-text{
  min-width:0;
}

.brand-text strong{
  display:block;

  color:#fff;

  font-size:1rem;
  font-weight:700;
  line-height:1.25;

  letter-spacing:.01em;

  white-space:nowrap;
}

.brand-text small{
  display:block;

  max-width:25em;

  margin-top:1px;

  color:#B9D2C7;

  font-size:.7rem;
  line-height:1.35;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-nav .nav-link{
  position:relative;

  color:#D6E8E0;

  padding:.62rem .8rem!important;

  border-radius:8px;

  font-size:.87rem;
  font-weight:500;

  transition:
    color .18s ease,
    background-color .18s ease;
}

.app-nav .nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}

.app-nav .nav-link.active{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.05)
    );

  box-shadow:
    inset 0 -2px 0 #79C5A8;
}

.app-nav .dropdown-menu{
  min-width:210px;

  margin-top:.5rem;

  padding:.45rem;

  background:#fff;

  border:1px solid var(--line);

  border-radius:11px;

  box-shadow:var(--shadow-lg);
}

.app-nav .dropdown-item{
  padding:.52rem .75rem;

  color:var(--ink);

  border-radius:7px;

  font-size:.85rem;

  transition:var(--transition);
}

.app-nav .dropdown-item:hover{
  color:var(--green-dark);
  background:var(--green-soft);
}

.app-nav .dropdown-item i{
  width:1.35rem;

  display:inline-block;

  color:var(--green-2);
}

.app-nav .dropdown-item.active,
.app-nav .dropdown-item:active{
  color:var(--green-dark);

  background:var(--mint);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:.45rem;
}

.fy-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;

  padding:.28rem .72rem;

  color:#fff;

  background:rgba(255,255,255,.045);

  border:1px solid rgba(255,255,255,.25);

  border-radius:999px;

  font-size:.78rem;

  white-space:nowrap;
}

.fy-chip span{
  color:#A9D6C3;
}

.fy-chip strong{
  color:#fff;

  font-weight:650;

  font-variant-numeric:tabular-nums;
}

.btn-user{
  min-height:36px;

  padding:.35rem .75rem;

  color:#fff;

  background:rgba(255,255,255,.045);

  border:1px solid rgba(255,255,255,.2);

  border-radius:999px;

  font-size:.82rem;
}

.btn-user:hover{
  color:#fff;

  background:rgba(255,255,255,.1);

  border-color:rgba(255,255,255,.35);
}

/* =========================================================
   CONTENT
   ========================================================= */

.content{
  width:100%;

  min-height:calc(100vh - 135px);

  padding-top:1.6rem;
  padding-bottom:2rem;
}

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;

  gap:1rem;

  margin-bottom:1.2rem;
}

.page-head h1{
  margin:0;

  color:var(--green-dark);

  font-size:1.48rem;
  font-weight:750;

  line-height:1.3;

  letter-spacing:-.015em;
}

.page-head .sub{
  margin-top:.2rem;

  color:var(--muted);

  font-size:.82rem;
}

.page-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
}

.app-footer{
  padding:1.15rem .75rem;

  color:var(--muted);

  background:#fff;

  border-top:1px solid var(--line);

  font-size:.78rem;
}

/* =========================================================
   PANEL
   ========================================================= */

.panel{
  position:relative;

  margin-bottom:1.2rem;
  padding:1.3rem;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #FCFEFD 100%
    );

  border:1px solid var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow);
}

.panel::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:3px;

  background:
    linear-gradient(
      180deg,
      var(--green-2),
      rgba(31,128,96,.12)
    );
}

.panel > h2,
.panel-title{
  margin:0 0 1rem;

  color:var(--green-dark);

  font-size:1rem;
  font-weight:700;
}

.panel-title{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.panel-title i{
  color:var(--green-2);
  font-size:.95rem;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:.55rem;

  margin-bottom:1rem;
  padding-bottom:.95rem;

  border-bottom:1px solid var(--line);
}

.toolbar .input-group{
  width:auto;
  max-width:420px;
}

.toolbar .form-control,
.toolbar .form-select{
  width:auto;
  min-width:150px;
}

.toolbar .input-group .form-control{
  min-width:180px;
}

.toolbar-label{
  color:var(--muted);
  font-size:.8rem;
  font-weight:600;
}

/* =========================================================
   TABLE
   ========================================================= */

.table-responsive{
  width:100%;

  overflow-x:auto;

  border-radius:10px;

  scrollbar-width:thin;
}

.table{
  --bs-table-bg:transparent;
  --bs-table-border-color:#E9F0EC;

  margin-bottom:0;

  color:var(--ink);

  font-size:.86rem;
}

.table > :not(caption) > * > *{
  padding:.72rem .75rem;
}

.table thead th{
  color:#456158;

  background:
    linear-gradient(
      180deg,
      #F7FAF8,
      #EDF3F0
    );

  border-bottom:1px solid #D3DFD9;

  font-size:.77rem;
  font-weight:700;

  white-space:nowrap;

  vertical-align:middle;
}

.table thead th:first-child{
  border-radius:8px 0 0 0;
}

.table thead th:last-child{
  border-radius:0 8px 0 0;
}

.table tbody td{
  vertical-align:middle;

  border-color:#E9F0EC;
}

.table tbody tr{
  transition:background-color .15s ease;
}

.table tbody tr:hover{
  background:#F4F9F6;
}

.table tbody tr:last-child td{
  border-bottom:0;
}

.table .actions{
  text-align:right;
  white-space:nowrap;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty{
  padding:3rem 1rem!important;

  color:var(--muted);

  text-align:center;
}

.empty i{
  display:block;

  margin-bottom:.6rem;

  color:#B2C2BA;

  font-size:2.2rem;
}

.empty strong{
  display:block;

  margin-bottom:.2rem;

  color:#61746C;

  font-size:.9rem;
}

/* =========================================================
   TAG
   ========================================================= */

.tag{
  display:inline-flex;
  align-items:center;
  gap:.3rem;

  padding:.2rem .6rem;

  color:var(--green-dark);

  background:var(--green-soft);

  border:1px solid #BFE0D0;

  border-radius:999px;

  font-size:.73rem;
  font-weight:600;

  white-space:nowrap;
}

/* =========================================================
   STATUS
   ========================================================= */

.status{
  display:inline-flex;
  align-items:center;
  gap:.4rem;

  padding:.22rem .62rem;

  border-radius:999px;

  font-size:.73rem;
  font-weight:650;

  white-space:nowrap;
}

.status::before{
  content:"";

  width:6px;
  height:6px;

  flex:0 0 6px;

  border-radius:50%;

  background:currentColor;
}

.status-success{
  color:#147A50;
  background:#E6F5ED;
}

.status-warning{
  color:var(--orange);
  background:var(--orange-soft);
}

.status-danger{
  color:var(--red);
  background:var(--red-soft);
}

.status-info{
  color:#1769AA;
  background:var(--blue-soft);
}

/* =========================================================
   SUMMARY GAUGES
   ========================================================= */

.gauges{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(190px,1fr));

  margin-bottom:1.2rem;

  overflow:hidden;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow);
}

.gauge{
  position:relative;

  min-height:110px;

  padding:1.1rem 1.2rem;

  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.gauge::after{
  content:"";

  position:absolute;

  left:1.2rem;
  bottom:0;

  width:30px;
  height:2px;

  background:var(--green-2);

  border-radius:999px;
}

.gauge .v{
  color:var(--green-dark);

  font-size:1.55rem;
  font-weight:750;
  line-height:1.25;

  font-variant-numeric:tabular-nums;
}

.gauge .l{
  margin-top:.18rem;

  color:var(--muted);

  font-size:.78rem;
}

.gauge.warn .v{
  color:var(--red);
}

.bar-track{
  height:6px;

  margin-top:.5rem;

  overflow:hidden;

  background:#E4ECE8;

  border-radius:999px;
}

.bar-track span{
  display:block;

  width:0;
  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--green),
      var(--green-3)
    );

  border-radius:inherit;
}

.bar-track span.over{
  background:var(--red);
}

/* =========================================================
   DOCUMENT STAMP
   ========================================================= */

.doc-stamp{
  display:inline-flex;
  align-items:center;

  padding:.38rem .85rem;

  color:var(--green-dark);

  background:
    linear-gradient(
      135deg,
      #F5FBF8,
      var(--green-soft)
    );

  border:1px solid #9FCDBA;

  border-radius:9px;

  font-size:1.15rem;
  font-weight:750;

  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* =========================================================
   FORM ACTIONS
   ========================================================= */

.form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;

  gap:.5rem;

  margin-top:1.35rem;
  padding-top:1rem;

  border-top:1px solid var(--line);
}

/* =========================================================
   PAGINATION
   ========================================================= */

.pagination-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:1rem;

  margin-top:1rem;
  padding-top:1rem;

  border-top:1px solid var(--line);
}

.pagination-info{
  color:var(--muted);

  font-size:.78rem;
  white-space:nowrap;
}

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:.3rem;

  margin:0;
}

.pagination .page-link{
  position:relative;

  min-width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:.3rem .65rem;

  color:#50645C;

  background:transparent;

  border:1px solid transparent;

  border-radius:9px!important;

  font-size:.8rem;
  font-weight:650;

  box-shadow:none;

  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.pagination .page-link:hover{
  color:var(--green-dark);

  background:#EEF5F1;

  border-color:#D5E3DD;

  transform:translateY(-1px);
}

.pagination .page-item.active .page-link{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--green-dark),
      var(--green)
    );

  border-color:var(--green);

  box-shadow:
    0 5px 14px rgba(23,107,77,.2);
}

.pagination .page-item.active .page-link::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:-4px;

  width:15px;
  height:2px;

  transform:translateX(-50%);

  background:#70B99C;

  border-radius:999px;
}

.pagination .page-item.disabled .page-link{
  color:#B6C1BC;

  background:#F7F9F8;

  border-color:#EDF1EF;

  cursor:not-allowed;

  transform:none;

  box-shadow:none;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link{
  padding-left:.8rem;
  padding-right:.8rem;

  color:var(--green);

  background:#fff;

  border-color:#D1DED8;
}

.pagination .page-item:first-child .page-link:hover,
.pagination .page-item:last-child .page-link:hover{
  color:#fff;

  background:var(--green);

  border-color:var(--green);
}

.pagination .page-link:focus{
  color:var(--green-dark);

  background:#F2F8F5;

  border-color:var(--green-2);

  box-shadow:
    0 0 0 .2rem rgba(31,128,96,.12);
}

.pagination .page-link i{
  font-size:.72rem;
}

/* =========================================================
   LOGIN
   ========================================================= */

.auth-wrap{
  min-height:100vh;

  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(380px,1fr);

  background:#fff;
}

.auth-side{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  min-height:100vh;

  overflow:hidden;

  padding:4rem;

  color:#fff;

  background:
    radial-gradient(
      circle at 78% 15%,
      rgba(91,190,151,.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(75,169,135,.14),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #082F22 0%,
      var(--green-dark) 48%,
      #176B4D 100%
    );

  border-right:4px solid var(--green-3);
}

.auth-side::before{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-180px;
  top:-180px;

  border:1px solid rgba(121,197,168,.22);

  border-radius:50%;

  box-shadow:
    0 0 0 35px rgba(121,197,168,.045),
    0 0 0 75px rgba(121,197,168,.025),
    0 0 0 125px rgba(121,197,168,.015);
}

.auth-side::after{
  content:"";

  position:absolute;

  width:360px;
  height:360px;

  right:-160px;
  bottom:-170px;

  border:1px solid rgba(255,255,255,.08);

  border-radius:50%;

  box-shadow:
    0 0 0 35px rgba(255,255,255,.025),
    0 0 0 75px rgba(255,255,255,.018);
}

.auth-side h1{
  position:relative;
  z-index:2;

  max-width:14em;

  margin:0 0 .75rem;

  color:#fff;

  font-size:2.15rem;
  font-weight:750;

  line-height:1.25;
  letter-spacing:-.02em;
}

.auth-side p{
  position:relative;
  z-index:2;

  max-width:38em;

  margin:0;

  color:#BBD4C9;

  font-size:.92rem;
}

.auth-side .seal{
  position:absolute;

  right:-80px;
  top:-80px;

  width:340px;
  height:340px;

  border:2px solid rgba(121,197,168,.25);

  border-radius:50%;

  box-shadow:
    0 0 0 24px rgba(121,197,168,.045),
    0 0 0 58px rgba(121,197,168,.025);
}

.auth-form{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:2rem;
}

.auth-form form{
  width:100%;
  max-width:390px;

  padding:2rem;

  background:#fff;

  border:1px solid var(--line);

  border-radius:16px;

  box-shadow:
    0 18px 50px rgba(23,107,77,.09);
}

.auth-form .auth-title{
  margin-bottom:.25rem;

  color:var(--green-dark);

  font-size:1.55rem;
  font-weight:750;
}

.auth-form .auth-subtitle{
  margin-bottom:1.5rem;

  color:var(--muted);

  font-size:.82rem;
}

/* =========================================================
   ALERT
   ========================================================= */

.alert{
  border-radius:10px;

  border-width:1px;

  font-size:.85rem;
}

.alert-primary{
  color:var(--green-dark);

  background:var(--green-soft);

  border-color:#C7E1D5;
}

.alert-success{
  color:#12633F;

  background:#E7F6EE;

  border-color:#C9E8D9;
}

.alert-warning{
  color:#8A4B08;

  background:var(--orange-soft);

  border-color:#F5D8B4;
}

.alert-danger{
  color:#9D2018;

  background:var(--red-soft);

  border-color:#F2C7C3;
}

/* =========================================================
   BADGES
   ========================================================= */

.badge{
  font-weight:650;
  letter-spacing:.01em;
}

.bg-primary{
  background-color:var(--green)!important;
}

.bg-success{
  background-color:var(--green-2)!important;
}

.bg-warning{
  background-color:var(--orange)!important;
}

.bg-danger{
  background-color:var(--red)!important;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

*{
  scrollbar-width:thin;
  scrollbar-color:#B9CAC2 transparent;
}

::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  background:#B9CAC2;
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:#9BAFA6;
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width:991.98px){

  .app-nav .navbar-collapse{
    padding-top:.65rem;
  }

  .app-nav .navbar-nav{
    padding:.35rem 0;
  }

  .app-nav .nav-link{
    padding:.65rem .8rem!important;
  }

  .nav-right{
    width:100%;

    margin-top:.5rem;
    padding:.7rem 0 .25rem;

    border-top:1px solid rgba(255,255,255,.1);
  }

  .app-nav .dropdown-menu{
    margin-top:.25rem;
  }

  .content{
    padding-top:1.25rem;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:860px){

  .auth-wrap{
    grid-template-columns:1fr;
  }

  .auth-side{
    min-height:270px;

    padding:2.5rem;

    border-right:0;
    border-bottom:4px solid var(--green-3);
  }

  .auth-side h1{
    font-size:1.65rem;
  }

  .auth-side p{
    max-width:32em;
  }

  .auth-form{
    min-height:calc(100vh - 270px);

    padding:2rem 1.25rem;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:576px){

  body{
    font-size:14px;
  }

  .content{
    padding-top:1rem;
    padding-bottom:1.25rem;
  }

  .page-head{
    align-items:flex-start;

    margin-bottom:1rem;
  }

  .page-head h1{
    font-size:1.25rem;
  }

  .page-head .sub{
    font-size:.77rem;
  }

  .page-actions{
    width:100%;
  }

  .page-actions .btn{
    flex:1;
  }

  .panel{
    padding:1rem;

    border-radius:11px;
  }

  .panel::before{
    width:2px;
  }

  .toolbar{
    align-items:stretch;
  }

  .toolbar .form-select,
  .toolbar .form-control,
  .toolbar .input-group{
    width:100%;
    max-width:none;
    min-width:0;
  }

  .table{
    min-width:700px;
  }

  .gauges{
    grid-template-columns:1fr 1fr;
  }

  .gauge{
    min-height:95px;

    padding:.85rem;
  }

  .gauge .v{
    font-size:1.3rem;
  }

  .gauge .l{
    font-size:.72rem;
  }

  .pagination-wrap{
    flex-direction:column;
    align-items:center;
  }

  .pagination-info{
    text-align:center;
  }

  .pagination{
    flex-wrap:wrap;
  }

  .pagination .page-link{
    min-width:34px;
    width:34px;
    height:34px;

    padding:.25rem;

    font-size:.76rem;
  }

  .pagination .page-item:first-child .page-link,
  .pagination .page-item:last-child .page-link{
    width:auto;

    padding-left:.65rem;
    padding-right:.65rem;
  }

  .auth-side{
    min-height:220px;

    padding:1.75rem;
  }

  .auth-side h1{
    font-size:1.4rem;
  }

  .auth-side p{
    font-size:.8rem;
  }

  .auth-form{
    min-height:calc(100vh - 220px);

    padding:1rem;
  }

  .auth-form form{
    padding:1.4rem;

    border-radius:13px;

    box-shadow:0 10px 30px rgba(23,107,77,.08);
  }

  .form-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .form-actions .btn{
    width:100%;
  }
}

/* =========================================================
   VERY SMALL SCREEN
   ========================================================= */

@media (max-width:380px){

  .gauges{
    grid-template-columns:1fr;
  }

  .pagination .page-item:nth-child(6),
  .pagination .page-item:nth-child(7){
    display:none;
  }

  .brand-text small{
    max-width:15em;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important;
  }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print{

  @page{
    margin:15mm;
  }

  body{
    color:#000;
    background:#fff!important;

    font-family:"Sarabun",sans-serif;
  }

  .app-nav,
  .app-footer,
  .no-print,
  .toolbar,
  .page-actions,
  .pagination-wrap,
  .btn{
    display:none!important;
  }

  .content{
    min-height:0;
    padding:0;
  }

  .page-head{
    margin-bottom:1rem;
  }

  .panel{
    margin:0 0 1rem;
    padding:0;

    background:#fff!important;

    border:0;
    border-radius:0;

    box-shadow:none!important;
  }

  .panel::before{
    display:none;
  }

  .table{
    font-size:11pt;
  }

  .table thead th{
    color:#000!important;
    background:#F2F2F2!important;

    border-bottom:1px solid #999;
  }

  .table td{
    border-color:#CCC!important;
  }

  .status,
  .tag{
    color:#000!important;
    background:#fff!important;

    border:1px solid #999!important;
  }

  .doc-stamp{
    color:#000!important;
    background:#fff!important;

    border:1px solid #777!important;
    box-shadow:none!important;
  }
}