/* Satoshi fonts */
/**
* @license
*
* Font Family: Satoshi
* Designed by: Deni Anggara
* URL: https://www.fontshare.com/fonts/satoshi
* © 2025 Indian Type Foundry
*
* Satoshi Light 
* Satoshi LightItalic 
* Satoshi Regular 
* Satoshi Italic 
* Satoshi Medium 
* Satoshi MediumItalic 
* Satoshi Bold 
* Satoshi BoldItalic 
* Satoshi Black 
* Satoshi BlackItalic 
* Satoshi Variable (Variable font)
* Satoshi VariableItalic (Variable font)

*
*/
@font-face {
  font-family: 'Satoshi-Light';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
    url('../fonts/Satoshi-Light.woff') format('woff'),
    url('../fonts/Satoshi-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-LightItalic';
  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
    url('../fonts/Satoshi-LightItalic.woff') format('woff'),
    url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Regular';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
    url('../fonts/Satoshi-Regular.woff') format('woff'),
    url('../fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-Italic';
  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
    url('../fonts/Satoshi-Italic.woff') format('woff'),
    url('../fonts/Satoshi-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Medium';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
    url('../fonts/Satoshi-Medium.woff') format('woff'),
    url('../fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-MediumItalic';
  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
    url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
    url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Bold';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
    url('../fonts/Satoshi-Bold.woff') format('woff'),
    url('../fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-BoldItalic';
  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
    url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
    url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Black';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
    url('../fonts/Satoshi-Black.woff') format('woff'),
    url('../fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-BlackItalic';
  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
    url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
    url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}

/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
@font-face {
  font-family: 'Satoshi-Variable';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
    url('../fonts/Satoshi-Variable.woff') format('woff'),
    url('../fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
@font-face {
  font-family: 'Satoshi-VariableItalic';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
    url('../fonts/Satoshi-VariableItalic.woff') format('woff'),
    url('../fonts/Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}

:root {
  --gray1: #222629;
  --gray2: #474B4F;
  --gray3: #6B6E70;
  --darkgreen: #059669;
  --green: #10b981;
  --lightgreen: #1482FA;
  --extralightgreen: #BDE3FF;
  --black: #000000;
  --white: #ffffff;
}

.text-gray1 {
  color: #222629 !important;
}

.text-gray2 {
  color: #474B4F !important;
}

.text-gray3 {
  color: #6B6E70 !important;
}

.text-darkgreen {
  color: #059669 !important;
}

.text-green {
  color: #10b981 !important;
}

.bg-gray1 {
  background-color: #222629 !important;
}

.bg-gray2 {
  background-color: #474B4F !important;
}

.bg-gray3 {
  background-color: #6B6E70 !important;
}

.bg-darkgreen {
  background-color: #059669 !important;
}

.bg-green {
  background-color: #10b981 !important;
}

.bg-gradient-login {
  background-color: #ffffff;
  background-image: linear-gradient(131deg, #222629 0%, #6B6E70 50%, #474B4F 100%);
  background-size: cover;
}

.bg-gradient-light {
  background-color: #ffffff;
  background-image: linear-gradient(131deg, #ffffff 0%, #bbbfc2 50%, #6B6E70 100%);
  background-size: cover;
}

.bg-gradient-dark {
  background-color: #FFF7F5;
  background-image: linear-gradient(131deg, #61892F 0%, #6B6E70 100%);
  background-size: cover;
}

.loader-box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  height: 100vh;
}

/* HTML: <div class="loader"></div> */
.loader {
  position: absolute;
  left: 50%;
  width: fit-content;
  font-size: 17px;
  font-family: monospace;
  line-height: 1.4;
  font-weight: bold;
  background:
    linear-gradient(#000 0 0) left,
    linear-gradient(#000 0 0) right;
  background-repeat: no-repeat;
  border-right: 5px solid #0000;
  border-left: 5px solid #0000;
  background-origin: border-box;
  animation: l9-0 2s infinite;
}

.loader::before {
  content: "Loading";
}

.loader::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 22px;
  height: 60px;
  background:
    linear-gradient(90deg, #000 4px, #0000 0 calc(100% - 4px), #000 0) bottom /22px 20px,
    linear-gradient(90deg, #86C232 4px, #0000 0 calc(100% - 4px), #86C232 0) bottom 10px left 0/22px 6px,
    linear-gradient(#000 0 0) bottom 3px left 0 /22px 8px,
    linear-gradient(#000 0 0) bottom 0 left 50%/8px 16px;
  background-repeat: no-repeat;
  animation: l9-1 2s infinite;
}

@keyframes l9-0 {

  0%,
  25% {
    background-size: 50% 100%
  }

  25.1%,
  75% {
    background-size: 0 0, 50% 100%
  }

  75.1%,
  100% {
    background-size: 0 0, 0 0
  }
}

@keyframes l9-1 {
  25% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: 0
  }

  25.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: 0
  }

  50% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px)
  }

  75% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px)
  }

  75.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px)
  }
}

/* Modern minimal design overrides */
html,
body {
  height: 100%;
}

body {
  background: #fbfbfb;
  color: #222;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.card {
  border: 1px solid #e9ecef;
  border-radius: 0.6rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.footer {
  font-size: 0.9rem;
  padding: 1.5rem 0;
  border-top: 1px solid #e9ecef;
  margin-top: auto;
}

.loader-box {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1050;
}

.loader-box .loader {
  width: 3rem;
  height: 3rem;
  border: 4px solid #e9ecef;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn-primary {
  background-color: #10b981;
  border-color: #10b981;
}

.btn-primary:hover {
  background-color: #059669;
  border-color: #059669;
}

.btn-primary:focus,
.btn-primary.focus {
  background-color: #059669;
  border-color: #059669;
  box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
}

.btn-primary:active,
.btn-primary.active {
  background-color: #059669;
  border-color: #059669;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}