:root {
  --bs-blue: #0061f2;
  --bs-indigo: #5800e8;
  --bs-purple: #6900c7;
  --bs-pink: #e30059;
  --bs-red: #e81500;
  --bs-orange: #f76400;
  --bs-yellow: #f4a100;
  --bs-green: #00ac69;
  --bs-teal: #00ba94;
  --bs-cyan: #00cfd5;
  --bs-white: #fff;
  --bs-gray: #69707a;
  --bs-gray-dark: #363d47;
  --bs-gray-100: #f2f6fc;
  --bs-gray-200: #e0e5ec;
  --bs-gray-300: #d4dae3;
  --bs-gray-400: #c5ccd6;
  --bs-gray-500: #a7aeb8;
  --bs-gray-600: #69707a;
  --bs-gray-700: #4a515b;
  --bs-gray-800: #363d47;
  --bs-gray-900: #212832;
  --bs-primary: #0061f2;
  --bs-secondary: #6900c7;
  --bs-success: #00ac69;
  --bs-info: #00cfd5;
  --bs-warning: #f4a100;
  --bs-danger: #e81500;
  --bs-light: #f2f6fc;
  --bs-dark: #212832;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-red: #e81500;
  --bs-orange: #f76400;
  --bs-yellow: #f4a100;
  --bs-green: #00ac69;
  --bs-teal: #00ba94;
  --bs-cyan: #00cfd5;
  --bs-blue: #0061f2;
  --bs-indigo: #5800e8;
  --bs-purple: #6900c7;
  --bs-pink: #e30059;
  --bs-red-soft: #f1e0e3;
  --bs-orange-soft: #f3e7e3;
  --bs-yellow-soft: #f2eee3;
  --bs-green-soft: #daefed;
  --bs-teal-soft: #daf0f2;
  --bs-cyan-soft: #daf2f8;
  --bs-blue-soft: #dae7fb;
  --bs-indigo-soft: #e3ddfa;
  --bs-purple-soft: #e4ddf7;
  --bs-pink-soft: #f1ddec;
  --bs-primary-soft: #dae7fb;
  --bs-secondary-soft: #e4ddf7;
  --bs-success-soft: #daefed;
  --bs-info-soft: #daf2f8;
  --bs-warning-soft: #f2eee3;
  --bs-danger-soft: #f1e0e3;
  --bs-primary-rgb: 0, 97, 242;
  --bs-secondary-rgb: 105, 0, 199;
  --bs-success-rgb: 0, 172, 105;
  --bs-info-rgb: 0, 207, 213;
  --bs-warning-rgb: 244, 161, 0;
  --bs-danger-rgb: 232, 21, 0;
  --bs-light-rgb: 242, 246, 252;
  --bs-dark-rgb: 33, 40, 50;
  --bs-black-rgb: 0, 0, 0;
  --bs-white-rgb: 255, 255, 255;
  --bs-red-rgb: 232, 21, 0;
  --bs-orange-rgb: 247, 100, 0;
  --bs-yellow-rgb: 244, 161, 0;
  --bs-green-rgb: 0, 172, 105;
  --bs-teal-rgb: 0, 186, 148;
  --bs-cyan-rgb: 0, 207, 213;
  --bs-blue-rgb: 0, 97, 242;
  --bs-indigo-rgb: 88, 0, 232;
  --bs-purple-rgb: 105, 0, 199;
  --bs-pink-rgb: 227, 0, 89;
  --bs-red-soft-rgb: 241, 224, 227;
  --bs-orange-soft-rgb: 243, 231, 227;
  --bs-yellow-soft-rgb: 242, 238, 227;
  --bs-green-soft-rgb: 218, 239, 237;
  --bs-teal-soft-rgb: 218, 240, 242;
  --bs-cyan-soft-rgb: 218, 242, 248;
  --bs-blue-soft-rgb: 218, 231, 251;
  --bs-indigo-soft-rgb: 227, 221, 250;
  --bs-purple-soft-rgb: 228, 221, 247;
  --bs-pink-soft-rgb: 241, 221, 236;
  --bs-primary-soft-rgb: 218, 231, 251;
  --bs-secondary-soft-rgb: 228, 221, 247;
  --bs-success-soft-rgb: 218, 239, 237;
  --bs-info-soft-rgb: 218, 242, 248;
  --bs-warning-soft-rgb: 242, 238, 227;
  --bs-danger-soft-rgb: 241, 224, 227;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-rgb: 105, 112, 122;
}
body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px; /* ini memberi space kiri kanan di mobile */

    background: linear-gradient(135deg,#dfe9f3,#ffffff,#dff4ff);
    font-family:'Metropolis',sans-serif;
}

.login-card{
    width:100%;
    max-width:380px;
    border-radius:20px;
    border:none;
    padding:35px 30px;
    box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.logo-box{
    width:70px;
    height:70px;
    background:#3b6df6;
    color:white;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:28px;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.status-badge{
    background:#e6f7ee;
    color:#2acb7d;
    border:1px solid #2acb7d;
    font-size:13px;
    padding:6px 14px;
    border-radius:50px;
}

.status-dot{
    width:8px;
    height:8px;
    background:#2acb7d;
    border-radius:50%;
    display:inline-block;
    margin-right:6px;
}

.form-control{
    height:48px;
    border-radius:12px;
}

.input-group-text{
    border-radius:12px 0 0 12px;
}

.input-group-text:last-child{
    border-top-right-radius:12px;
    border-bottom-right-radius:12px;
    cursor:pointer;
}

.btn-login{
    height:48px;
    border-radius:12px;
    background:linear-gradient(90deg,#3b6df6,#2c5ce3);
    border:none;
    font-weight:600;
}

.btn-login:hover{
    opacity:0.95;
}

.footer-text{
    font-size:12px;
    color:#999;
}

.register-link{
    font-size:14px;
}

.toast-alert {
  min-width: 320px;
  max-width: 100%;
  font-size: 0.875rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  overflow: hidden;
}

.toast-alert-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid #f1f1f1;
}

.toast-alert-body {
  padding: 12px 14px;
  color: #555;
}

.toast-alert-body p {
  margin: 0;
}

/* variant */

.toast-alert-success {
  border-left: 4px solid #28a745;
}

.toast-alert-info {
  border-left: 4px solid #0dcaf0;
}

.toast-alert-warning {
  border-left: 4px solid #ffc107;
}

.toast-alert-danger {
  border-left: 4px solid #dc3545;
}

.modal .modal-dialog .modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 1rem;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
}

.modal .modal-dialog .modal-content .panel-group {
  margin-bottom: 0
}

.modal .modal-dialog .modal-content .panel {
  box-shadow: none;
  margin-bottom: 0
}

.btn-default {
  color: #999!important;
  border-color: #ccc!important
}

.btn-default {
  background-color: #eee;
  border-color: #eee;
  color: #fff
}

.btn-default.active,
.btn-default.disabled,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.btn-default[disabled] {
  background-color: #e1e1e1;
  border-color: transparent;
  color: #fff
}

.divider{
    position:relative;
}

.divider::before,
.divider::after{
    content:"";
    position:absolute;
    top:50%;
    width:30%;
    height:1px;
    background:#e5e7eb;
}

.divider::before{
    left:0;
}

.divider::after{
    right:0;
}

.btn-whatsapp{

    border:1px solid #e5e7eb;

    height:48px;

    border-radius:12px;

    font-weight:600;

    background:white;

    transition:all .25s ease;

}

.btn-whatsapp i{

    color:#25D366;
    font-size:18px;

}

.btn-whatsapp:hover{

    background:#25D366;
    color:white;
    border-color:#25D366;

    transform:translateY(-1px);

    box-shadow:0 6px 14px rgba(37,211,102,0.25);

}

.btn-whatsapp:hover i{
    color:white;
}

.otp-field {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.otp-field input {
  height: 45px;
  width: 45px;
  border-radius: .575rem;
  outline: none;
  font-size: 1.125rem;
  text-align: center;
  background-color: #eef2f8;
  border: 1px solid #ddd;
  font-weight: 500;
}

.otp-field input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.otp-field input::-webkit-inner-spin-button,
.otp-field input::-webkit-outer-spin-button {
  display: none;
}

.otp-input:focus {
  box-shadow: none;
  border: 2px solid #0d6efd
}

.otp-control:focus {
  box-shadow: none;
  border: 2px solid #0d6efd
}

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}

.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}

.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.text-red {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-red-rgb), var(--bs-text-opacity)) !important;
}

.text-orange {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-orange-rgb), var(--bs-text-opacity)) !important;
}

.text-yellow {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-yellow-rgb), var(--bs-text-opacity)) !important;
}

.text-green {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-green-rgb), var(--bs-text-opacity)) !important;
}

.text-teal {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-teal-rgb), var(--bs-text-opacity)) !important;
}

.text-cyan {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-cyan-rgb), var(--bs-text-opacity)) !important;
}

.text-blue {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-blue-rgb), var(--bs-text-opacity)) !important;
}

.text-indigo {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-indigo-rgb), var(--bs-text-opacity)) !important;
}

.text-purple {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-purple-rgb), var(--bs-text-opacity)) !important;
}

.text-pink {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-pink-rgb), var(--bs-text-opacity)) !important;
}

.text-red-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-red-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-orange-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-orange-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-yellow-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-yellow-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-green-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-green-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-teal-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-teal-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-cyan-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-cyan-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-blue-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-blue-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-indigo-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-indigo-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-purple-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-purple-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-pink-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-pink-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-primary-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-success-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-info-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-warning-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-danger-soft {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-soft-rgb), var(--bs-text-opacity)) !important;
}

.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-rgb), var(--bs-text-opacity)) !important;
}

.text-muted {
  --bs-text-opacity: 1;
  color: #a7aeb8 !important;
}

.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-reset, .footer-admin a {
  --bs-text-opacity: 1;
  color: inherit !important;
}

.text-opacity-25 {
  --bs-text-opacity: 0.25;
}

.text-opacity-50 {
  --bs-text-opacity: 0.5;
}

.text-opacity-75 {
  --bs-text-opacity: 0.75;
}

.text-opacity-100 {
  --bs-text-opacity: 1;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.bg-red {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-red-rgb), var(--bs-bg-opacity)) !important;
}

.bg-orange {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-orange-rgb), var(--bs-bg-opacity)) !important;
}

.bg-yellow {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-yellow-rgb), var(--bs-bg-opacity)) !important;
}

.bg-green {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-green-rgb), var(--bs-bg-opacity)) !important;
}

.bg-teal {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-teal-rgb), var(--bs-bg-opacity)) !important;
}

.bg-cyan {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-cyan-rgb), var(--bs-bg-opacity)) !important;
}

.bg-blue {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
}

.bg-indigo {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-indigo-rgb), var(--bs-bg-opacity)) !important;
}

.bg-purple {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-purple-rgb), var(--bs-bg-opacity)) !important;
}

.bg-pink {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-pink-rgb), var(--bs-bg-opacity)) !important;
}

.bg-red-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-red-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-orange-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-orange-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-yellow-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-yellow-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-green-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-green-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-teal-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-teal-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-cyan-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-cyan-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-blue-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-blue-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-indigo-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-indigo-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-purple-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-purple-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-pink-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-pink-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-primary-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger-soft {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-soft-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-rgb), var(--bs-bg-opacity)) !important;
}

.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent !important;
}

.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
  --bs-bg-opacity: 1;
}

.bg-gradient {
  background-image: var(--bs-gradient) !important;
}

#google_code{
    letter-spacing:.55rem;
}

#google_code:focus{
    box-shadow:0 0 0 .25rem rgba(13,110,253,.15);
}