@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #222e3c;
    --primary-rgba-1: rgba(34, 46, 60, 0.1);
    --primary-rgba-2: rgba(34, 46, 60, 0.2);
    --primary-rgba-3: rgba(34, 46, 60, 0.3);
    --primary-rgba-4: rgba(34, 46, 60, 0.4);
    --primary-rgba-5: rgba(34, 46, 60, 0.5);
    --primary-rgba-6: rgba(34, 46, 60, 0.6);
    --primary-rgba-7: rgba(34, 46, 60, 0.7);
    --primary-rgba-8: rgba(34, 46, 60, 0.8);
    --primary-rgba-9: rgba(34, 46, 60, 0.9);
    --secondary: #96C0B7;
    --secondary-rgba-1: rgba(150, 192, 183, 0.1);
    --secondary-rgba-2: rgba(150, 192, 183, 0.2);
    --white: #FFFFFF;
    --bg-white: #FFF;
    --text-white: #FFF;
    --title: #212529;
    --purple: #9F0CEE;
    --brown: #785115;
    --orange: #ff8853;
    --yellow: #ffc600;
    --skyblue: #00aeff;
    --red: #ff586e;
    --green: #04a57c;
    --blue: #4a8be0;
    --white: #FFFFFF;
    --black: #000000;
    --pink: #ff4db8;
    --night: #341447;
    --blue: #3b7ddd;
    --indigo: #0a0a0a;
    --teal: #20c997;
    --cyan: #17a2b8;
    --black: #000;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --success: #1cbb8c;
    --info: #17a2b8;
    --warning: #fcb92c;
    --danger: #dc3545;
    --light: #f5f7fb;
    --dark: #212529;
    --primary-rgb: 59, 125, 221;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 28, 187, 140;
    --info-rgb: 23, 162, 184;
    --warning-rgb: 252, 185, 44;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 245, 247, 251;
    --dark-rgb: 33, 37, 41;
    --purple-rgba-1: rgba(159, 12, 238, 0.1);
    --brown-rgba-1: rgba(120, 81, 21, 0.1);
    --darkgray-rgba-1: rgba(88, 88, 88, 0.1);
    --lightgray-rgba-1: rgba(230, 230, 230, 0.1);
    --orange-rgba-1: rgba(255, 136, 83, 0.1);
    --yellow-rgba-1: rgba(255, 198, 0, 0.1);
    --skyblue-rgba-1: rgba(0, 174, 255, 0.1);
    --red-rgba-1: rgba(255, 88, 110, 0.1);
    --green-rgba-1: rgba(4, 165, 124, 0.1);
    --blue-rgba-1: rgba(74, 139, 224, 0.1);
    --white-rgba-1: rgba(255, 255, 255, 0.1);
    --black-rgba-1: rgba(0, 0, 0, 0.1);
    --pink-rgba-1: rgba(255, 77, 184, 0.1);
    --night-rgba-1: rgba(52, 20, 71, 0.1);
    --primary-text-emphasis: #183258;
    --secondary-text-emphasis: #2b2f32;
    --success-text-emphasis: #0b4b38;
    --info-text-emphasis: #09414a;
    --warning-text-emphasis: #654a12;
    --danger-text-emphasis: #58151c;
    --light-text-emphasis: #495057;
    --dark-text-emphasis: #495057;
    --primary-bg-subtle: #d8e5f8;
    --secondary-bg-subtle: #e2e3e5;
    --success-bg-subtle: #d2f1e8;
    --info-bg-subtle: #d1ecf1;
    --warning-bg-subtle: #fef1d5;
    --danger-bg-subtle: #f8d7da;
    --light-bg-subtle: #fcfcfd;
    --dark-bg-subtle: #ced4da;
    --primary-border-subtle: #b1cbf1;
    --secondary-border-subtle: #c4c8cb;
    --success-border-subtle: #a4e4d1;
    --info-border-subtle: #a2dae3;
    --warning-border-subtle: #fee3ab;
    --danger-border-subtle: #f1aeb5;
    --light-border-subtle: #e9ecef;
    --dark-border-subtle: #adb5bd;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --font-sans-serif: Poppins, sans-serif;
    --gradient: linear-gradient(180deg, hsla(0, 0%, 100%, .15), hsla(0, 0%, 100%, 0));
    --body-font-family: var(--font-sans-serif);
    --body-font-size: 0.875rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #495057;
    --body-color-rgb: 73, 80, 87;
    --body-bg: #f5f7fb;
    --body-bg-rgb: 245, 247, 251;
    --emphasis-color: #000;
    --emphasis-color-rgb: 0, 0, 0;
    --secondary-color: rgba(73, 80, 87, .75);
    --secondary-color-rgb: 73, 80, 87;
    --secondary-bg: #e9ecef;
    --secondary-bg-rgb: 233, 236, 239;
    --tertiary-color: rgba(73, 80, 87, .5);
    --tertiary-color-rgb: 73, 80, 87;
    --tertiary-bg: #f8f9fa;
    --tertiary-bg-rgb: 248, 249, 250;
    --heading-color: #000;
    --link-color: #3b7ddd;
    --link-color-rgb: 59, 125, 221;
    --link-decoration: none;
    --link-hover-color: #2f64b1;
    --link-hover-color-rgb: 47, 100, 177;
    --link-hover-decoration: underline;
    --code-color: #e83e8c;
    --highlight-bg: #fef1d5;
    --border-width: 1px;
    --border-style: solid;
    --border-color: #dee2e6;
    --border-color-translucent: rgba(0, 0, 0, .175);
    --border-radius: 0.2rem;
    --border-radius-sm: 0.1rem;
    --border-radius-lg: 0.3rem;
    --border-radius-xl: 1rem;
    --border-radius-xxl: 2rem;
    --border-radius-2xl: var(--border-radius-xxl);
    --border-radius-pill: 50rem;
    --box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, .05);
    --box-shadow-sm: 0 0.05rem 0.2rem rgba(0, 0, 0, .05);
    --box-shadow-lg: 0 0.2rem 0.2rem rgba(0, 0, 0, .05);
    --box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);
    --focus-ring-width: 0.25rem;
    --focus-ring-opacity: 0.25;
    --focus-ring-color: rgba(59, 125, 221, .25);
    --form-valid-color: #1cbb8c;
    --form-valid-border-color: #1cbb8c;
    --form-invalid-color: #dc3545;
    --form-invalid-border-color: #dc3545;
}

body {
    background: #222e3c;
    font-family: Poppins, sans-serif;
}

.login-area {
    background: #222e3c;

    img {
        width: 60%;
    }

    .login-header {
        font-size: .9rem;
        font-weight: 300;
        color: var(--gray-500);
    }

    .card {
        margin-bottom: 24px;

        .form-label {
            font-size: 0.9rem;
        }

        .form-control-lg {
            font-size: 1rem;
        }

        .btn-group-lg>.btn,
        .btn-lg {
            --bs-btn-padding-y: 0.4rem;
            --bs-btn-padding-x: 1rem;
            --bs-btn-font-size: 0.925rem;
            --bs-btn-border-radius: var(--bs-border-radius-lg);
        }

        .btn-primary {
            --bs-btn-color: #fff;
            --bs-btn-bg: var(--primary);
            --bs-btn-border-color: var(--primary);
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #2F4A69;
            --bs-btn-hover-border-color: #2F4A69;
            --bs-btn-focus-shadow-rgb: 88, 145, 226;
            --bs-btn-active-color: #fff;
            --bs-btn-active-bg: #2F4A69;
            --bs-btn-active-border-color: #2F4A69;
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            --bs-btn-disabled-color: #fff;
            --bs-btn-disabled-bg: var(--primary);
            --bs-btn-disabled-border-color: var(--primary);
        }

    }

    .login-footer {
        img {
            width: 45%;
        }
    }
}