@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
}

:root {
    --pharma-blue: #1E83C3;
    --pharma-blue-dark: #166a9e;
    --pharma-gray: #808080;
    --pharma-black: #171717;
    --pharma-white: #FFFFFF;
    --pharma-surface: #F5F7F9;
    --primary: #1E83C3;
}

html, body {
    font-family: "Open Sans", Arial, sans-serif;
    color: var(--pharma-black);
    background: var(--pharma-surface);
}

h1, h2, h3, h4, h5, h6, .sidebar-brand-text, .card-header {
    font-family: "Open Sans", Arial, sans-serif;
    letter-spacing: .025em;
}

.bg-gradient-primary,
.sidebar.bg-gradient-primary,
.btn-primary,
.btn-login,
.badge-primary,
.page-item.active .page-link {
    background: var(--pharma-blue) !important;
    border-color: var(--pharma-blue) !important;
}

.btn-primary:hover,
.btn-login:hover {
    background: var(--pharma-blue-dark) !important;
    border-color: var(--pharma-blue-dark) !important;
}

.text-primary, a, .stat-icon {
    color: var(--pharma-blue);
}

a:hover {
    color: var(--pharma-blue-dark);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--pharma-blue);
    box-shadow: 0 0 0 .2rem rgba(30, 131, 195, .2);
}

.card,
.dropdown-menu,
.modal-content {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(23, 23, 23, .08);
}

.card-stat {
    border-left-color: var(--pharma-blue) !important;
}

.sidebar-brand {
    min-height: 5.5rem;
}

.sidebar-brand-text {
    text-transform: uppercase;
    font-size: .96rem;
}

@media (max-width: 768px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card-body {
        padding: 1rem;
    }
}