﻿/* import font families */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* openpath css color variables */
:root {
    /* fonts */
    --openpath-text: 'Poppins', sans-serif;
    --openpath-text-weight-light: 200;
    --openpath-text-weight-standard: 300;
    --openpath-text-weight-strong: 500;
    /* colors */
    --openpath-blue: rgb(7, 136, 212);
    --openpath-blue-75: rgb(7, 136, 212, .75);
    --openpath-blue-50: rgb(7, 136, 212, .50);
    --openpath-blue-25: rgb(7, 136, 212, .25);
    --openpath-green: rgb(0, 220, 108);
    --openpath-green-75: rgb(0, 220, 108, .75);
    --openpath-green-50: rgb(0, 220, 108, .50);
    --openpath-green-25: rgb(0, 220, 108, .25);
    --openpath-red: rgb(255,61,0);
    --openpath-red-75: rgb(255,61,0, .75);
    --openpath-red-50: rgb(255,61,0, .50);
    --openpath-red-25: rgb(255,61,0, .25);
    --openpath-yellow: rgb(255,187,0);
    --openpath-yellow-75: rgb(255,187,0, .75);
    --openpath-yellow-50: rgb(255,187,0, .50);
    --openpath-yellow-25: rgb(255,187,0, .25);
    --openpath-orange: rgb(255, 95, 31);
    --openpath-dark-gray: rgb(51,55,64);
    --openpath-gray: rgb(108,114,126);
    --openpath-silver: rgb(184,186,190);
    --openpath-light-gray: rgb(232,232,233);
    --openpath-white: rgb(255,255,255);
    --openpath-approved: rgb(76, 175, 80);
    --openpath-declined: rgb(241, 118, 109);
    --openpath-errored: rgb(224, 224, 224);
    --openpath-pending: rgb(255, 152, 0);
    --openpath-rejected: rgb(133, 221, 232);
    --openpath-cancelled: rgb(224,224,224);
    /* borders */
    --openpath-radius: 10px;
    --openpath-radius-strong: 25px;
    --openpath-bg: #fff;
    --openpath-border: #d5d5d5;
    --color-brand: #0789d4;
    --openpath-logo-color: #333740;
    --openpath-tr-hover: #FFFDE7;
    --openpath-loader: #ddd;
    --bg-blue-200: #d5e4f1;
    --blue-grey-700: #37474f;
    --jsgrid-selected: #ebebeb;
}

body.dark-mode {
    --openpath-green: rgb(34 160 96);
    --blue-grey-700: #a2a2a2;
    --bg-blue-200: #004678;
    --openpath-loader: #5b5b5b;
    --openpath-tr-hover: #1f2732;
    --openpath-logo-color: #e4e4e4;
    --main-background: #1c2733;
    --openpath-bg: #323b47;
    --openpath-border: #474747;
    --openpath-dark-gray: #d5d3d3;
    --openpath-gray: #e4e4e4;
    --openpath-silver: rgb(82, 84, 88);
    --openpath-white: rgb(40, 40, 40);
    --color-brand: #0789d4;
    --openpath-light-gray: #2e2e2e;
    color: var(--openpath-dark-gray);
    --jsgrid-selected: #2a323d;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--openpath-gray);
}

.dark-mode .alert-success {
    background-color: transparent;
}
.dark-mode .label-default {
    color: #333740;
}
/* define stardard fonts */
.openpath-text,
.openpath-text h1,
.openpath-text h2,
.openpath-text h3 {
    font-family: var(--openpath-text);
    font-weight: var(--openpath-text-weight-standard);
    color: var(--openpath-dark-gray);
}

.openpath-text {
    font-size: 12px;
}
.apexcharts-canvas,
.apexcharts-canvas text {
    color: var(--openpath-gray);
    fill: var(--openpath-gray);
}

.openpath-text h1 {
    font-weight: var(--openpath-text-weight-strong);
    font-size: 32px;
    margin: 10px 0;
}

        .openpath-text h2 {
            font-weight: var(--openpath-text-weight-strong);
            font-size: 26px;
            margin: 0 0 10px 0;
        }

        .openpath-text h3 {
            font-weight: var(--openpath-text-weight-standard);
            font-size: 18px;
            color: var(--openpath-gray);
            margin: 0;
        }

        .openpath-text a {
            color: var(--openpath-blue);
        }

        .openpath-text .btn {
            border-radius: var(--openpath-radius-strong);
        }

/* stardard openpath colors */
.openpath-blue { color: var(--openpath-blue); }
.openpath-blue-75 { color: var(--openpath-blue-75); }
.openpath-blue-50 { color: var(--openpath-blue-50); }
.openpath-blue-25 { color: var(--openpath-blue-25); }
.openpath-blue-bg { background-color: var(--openpath-blue); }
.openpath-blue-75-bg { background-color: var(--openpath-blue-75); }
.openpath-blue-50-bg { background-color: var(--openpath-blue-50); }
.openpath-blue-25-bg { background-color: var(--openpath-blue-25); }

.openpath-green { color: var(--openpath-green); }
.openpath-green-75 { color: var(--openpath-green-75); }
.openpath-green-50 { color: var(--openpath-green-50); }
.openpath-green-25 { color: var(--openpath-green-25); }
.openpath-green-bg { background-color: var(--openpath-green); }
.openpath-green-75-bg { background-color: var(--openpath-green-75); }
.openpath-green-50-bg { background-color: var(--openpath-green-50); }
.openpath-green-25-bg { background-color: var(--openpath-green-25); }

.openpath-red { color: var(--openpath-red); }
.openpath-red-75 { color: var(--openpath-red-75); }
.openpath-red-50 { color: var(--openpath-red-50); }
.openpath-red-25 { color: var(--openpath-red-25); }
.openpath-red-bg { background-color: var(--openpath-red); }
.openpath-red-75-bg { background-color: var(--openpath-red-75); }
.openpath-red-50-bg { background-color: var(--openpath-red-50); }
.openpath-red-25-bg { background-color: var(--openpath-red-25); }

.openpath-yellow { color: var(--openpath-yellow); }
.openpath-yellow-75 { color: var(--openpath-yellow-75); }
.openpath-yellow-50 { color: var(--openpath-yellow-50); }
.openpath-yellow-25 { color: var(--openpath-yellow-25); }
.openpath-yellow-bg { background-color: var(--openpath-yellow); }
.openpath-yellow-75-bg { background-color: var(--openpath-yellow-75); }
.openpath-yellow-50-bg { background-color: var(--openpath-yellow-50); }
.openpath-yellow-25-bg { background-color: var(--openpath-yellow-25); }

.openpath-dark-gray { color: var(--openpath-dark-gray) !important; }
.openpath-dark-gray-bg { background-color: var(--openpath-dark-gray) !important; }
.openpath-gray { color: var(--openpath-gray); }
.openpath-gray-bg { background-color: var(--openpath-gray) !important; }
.openpath-silver { color: var(--openpath-silver) !important; }
.openpath-silver-bg { background-color: var(--openpath-silver) !important; }
.openpath-light-gray { color: var(--openpath-light-gray) !important; }
.openpath-light-gray-bg { background-color: var(--openpath-light-gray) !important; }
.openpath-white { color: var(--openpath-white) !important; }
.openpath-white-bg { background-color: var(--openpath-white) !important; }
.openpath-cancelled-bg { background-color: var(--openpath-cancelled) !important; }

.openpath-approved { color: var(--openpath-approved); }
.openpath-declined { color: var(--openpath-declined); }
.openpath-rejected { color: var(--openpath-rejected); }
.openpath-errored { color: var(--openpath-errored); }
.openpath-pending { color: var(--openpath-pending); }
.openpath-canceled { color: var(--openpath-cancelled); }
/* shades of stardard openpath colors */
