@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primary-color: #000;
    --secondary-color: #DCFD34;
    --secondary-color-opacity: #6a7e03;
    --third-color: #e1e1e0;
    --font-primary: "Chakra Petch", sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --prime-bg: #0f0f0f;
    --secondary-bg: #070707;
    --b-radius: 12px;
    --b-radius-sm: 7px;
    --border: 1.5px solid #1b1b1b;
    --border-green: 1px solid #dbfd34b1;
    --border-sm: 1px solid #1b1b1b;
    --success-color: #11FF00;
    --danger-color: #FF0202;
    --fs-primary: 12px;
    --light-grey: #e1e1e057;

    --main-gradien-one: #151313;
    --main-gradien-two: #000000;
}

body {
    font-family: var(--font-primary);
    background: var(--primary-color);
    color: var(--third-color);
}

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

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

.font-secondary {
    font-family: var(--font-secondary) !important;
}

.b-radius {
    border-radius: var(--b-radius) !important;
}

.b-radius-chat {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.b-radius-chat-right {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.border {
    border: var(--border) !important;
}

.border-top {
    border-top: var(--border) !important;
}

.border-light {
    border: 1px solid var(--light-grey) !important;
}

.border-sm {
    border: var(--border-sm) !important;
}

.border-green {
    border: var(--border-green) !important;
}

.prime-bg {
    /* background: var(--prime-bg); */
    background: #0E0E0E;
    background: linear-gradient(181deg, var(--main-gradien-one) 0%, var(--main-gradien-two) 100%) !important;
}

.fs-5 {
    font-size: 1rem !important;
}

.bg-primary {
    background: #0E0E0E;
    background: linear-gradient(181deg, var(--main-gradien-one) 0%, var(--main-gradien-two) 100%) !important;
}

select.bg-primary {
    background-color: #0E0E0E !important;
}

input.bg-primary,
textarea.bg-primary {
    background: #0E0E0E !important;
}

.form-group label {
    background: transparent !important;
}

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

.h-100-vh {
    height: 100vh;
}

.offcanvas {
    max-width: 300px;
}

.clip-circle {
    clip-path: circle();
}

.text-success {
    color: #0ec670 !important;
}

.text-danger {
    /* color: #e60c22 !important; */
    color: #ff001a !important;
}

.text-info {
    color: #1a6ad1 !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

/* Custom animation classes */
@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slideIn .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}