:root {
    --color-primary-dark: #041936;
    --color-primary: #0B2D5C;
    --color-primary-light: #1E4F9A;

    --color-orange: #ff814f;
    --color-warning-dark: #eeb509;
    --color-warning: #ffc107;
    --color-warning-light: #fdc164;
    --color-success: #5fffb4;
    --color-success-light: #aef3c6;

    /* --color-secondary: #4A90E2; */

    --color-black: #101828;
    --color-white: #FFFFFF;
    --color-gray-100: #eceef1;
    --color-gray-200: #cdd0d6;
    --color-gray-300: #98A2B3;
    --color-gray-400: #475467;
    --color-danger: #ef4444;

    --color-facebook: #3574bb;
    --color-apple: #293543;
    --color-divider: #a3b0ca7a;

    --bg-primary: #012557;
    --bg-primary-light: #4a88e6;
    --bg-dark: #021533;

    --font-family-base: 'Prompt', sans-serif;

    --font-2xs: 10px;
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 28px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    --bg-gradient-primary-horizontal: linear-gradient(to top, #001e3b, #03131f);
    --bg-gradient-primary-center: linear-gradient(to right,#03131f 0%,#011a41 50%,#03131f 100%);
    --bg-gradient-primary-light-center: linear-gradient(to right,#031b3b 0%,#06234d 50%,#031b3b 100%);
}

:root {
    --bs-border-color: var(--color-gray-200);
}

::-webkit-scrollbar {
  display: none;
}

/* ===== TEXT ===== */

.fs-2xs {
    font-size: var(--font-2xs) !important;
}

.fs-xs {
    font-size: var(--font-xs) !important;
}

.fs-sm {
    font-size: var(--font-sm) !important;
}

.fs-md {
    font-size: var(--font-md) !important;
}

.fs-lg {
    font-size: var(--font-lg) !important;
}

.fs-xl {
    font-size: var(--font-xl) !important;
}

.fs-2xl {
    font-size: var(--font-2xl) !important;
}

.fs-3xl {
    font-size: var(--font-3xl) !important;
}

/* ===== FONT WEIGHT ===== */

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}


/* ===== TEXT COLOR ===== */

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

.color-primary-light {
    color: var(--color-primary-light) !important;
}

.color-white {
    color: var(--color-white) !important;
}

.color-black {
    color: var(--color-black) !important;
}

.color-gray-100 {
    color: var(--color-gray-100) !important;
}

.color-gray-200 {
    color: var(--color-gray-200) !important;
}

.color-gray-300 {
    color: var(--color-gray-300) !important;
}

.color-gray-400 {
    color: var(--color-gray-400) !important;
}

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

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

.color-success {
    color: var(--color-success) !important;
}

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

.color-warning-light {
    color: var(--color-warning-light) !important;
}

/* ===== BACKGROUND COLOR ===== */

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

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

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

.bg-gray-100 {
    background-color: var(--color-gray-100) !important;
}

.bg-gray-200 {
    background-color: var(--color-gray-200) !important;
}

.bg-gray-300 {
    background-color: var(--color-gray-300) !important;
}

.bg-gray-400 {
    background-color: var(--color-gray-400) !important;
}

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

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

/* ===== SOCIAL COLOR ===== */

.text-facebook {
    color: var(--color-facebook) !important;
}

.text-google {
    color: var(--color-google) !important;
}

.text-apple {
    color: var(--color-apple) !important;
}

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

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

/* ===== BUTTON ===== */

.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-font-size: var(--font-md);
    --bs-btn-font-weight: 400;
    --bs-btn-border-radius: .45rem;
}

.btn:hover, .btn:focus-visible, .btn:active {
    border-color: transparent !important;
    outline-color: transparent !important;
}

.btn-icon-transparent {
    color: var(--color-white);
    font-size: var(--font-xl);
    border-radius: .5rem;
    padding: .25rem !important;
}

.btn-icon-transparent:hover,
.btn-icon-transparent:focus-visible,
.btn-icon-transparent:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-w-icon {
    display: flex;
    align-items: center;
}

/* ===== SCREEN ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-md);
    color: var(--color-primary);
    min-height: 100dvh;
    overflow: hidden;
    background: var(--bg-gradient-primary-center);
}

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

.screen {
    /* display: none; */
    min-height: 100dvh;
    max-height: 100dvh;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
}

.screen-page .container {
    padding: 0 !important;
}

/* .screen.active {
    display: flex;
} */

.text-divider {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
}

.text-divider::before,
.text-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--color-gray-200);
}

.text-divider::before {
    margin-right: 10px;
}

.text-divider::after {
    margin-left: 10px;
}

.divider {
  border: none;
  height: 1px;
  opacity: 1;
  background-color: var(--color-divider);
  margin: 1rem 0;
}

/* ══════════════════════════════
   Menu Setting
══════════════════════════════ */

.setting-menu-dropdown {
  background: var(--bg-primary);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: .75rem;
  padding: .5rem;
  min-width: 170px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

.setting-menu-dropdown .dropdown-item {
  color: var(--color-white);
  font-size: var(--font-sm);
  border-radius: .5rem;
  padding: .5rem 1rem;
  transition: background 0.15s;
}

.setting-menu-dropdown .dropdown-item:hover,
.setting-menu-dropdown .dropdown-item:focus {
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
}

.setting-menu-dropdown .dropdown-divider {
  border-color: rgba(255,255,255,0.1);
}

/* ══════════════════════════════
   Responsive
══════════════════════════════ */

@media (min-width: 768px) {
    .container {
        max-width: 600px;
    }
}