/*
=====================================================
BESTMAN POS ERP V1
GLOBAL UI SYSTEM
=====================================================
*/

:root{

    /*
    =====================================================
    BRAND COLORS
    =====================================================
    */

    --primary-color:#ff7a00;

    --dark-color:#111111;

    --dark-secondary:#1c1c1c;

    --light-bg:#f5f5f5;

    --white:#ffffff;

    --border-color:#e5e5e5;

    --text-color:#333333;

    --text-light:#777777;

    /*
    =====================================================
    SHADOWS
    =====================================================
    */

    --shadow-sm:
    0 2px 8px rgba(0,0,0,0.05);

    --shadow-md:
    0 10px 30px rgba(0,0,0,0.08);

    /*
    =====================================================
    BORDER RADIUS
    =====================================================
    */

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:24px;
}

/*
=====================================================
RESET
=====================================================
*/

*{

    margin:0;
    padding:0;

    box-sizing:border-box;
}

/*
=====================================================
BODY
=====================================================
*/

body{

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    background:var(--light-bg);

    color:var(--text-color);

    font-size:14px;

    line-height:1.5;
}

/*
=====================================================
LINKS
=====================================================
*/

a{

    text-decoration:none;

    color:inherit;
}

/*
=====================================================
BUTTONS
=====================================================
*/

.btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:14px 20px;

    border:none;

    border-radius:var(--radius-sm);

    cursor:pointer;

    font-size:14px;
    font-weight:600;

    transition:0.2s ease;
}

.btn-primary{

    background:var(--primary-color);

    color:var(--white);
}

.btn-primary:hover{

    opacity:0.92;
}

/*
=====================================================
INPUTS
=====================================================
*/

input,
select,
textarea{

    width:100%;

    padding:14px;

    border:1px solid var(--border-color);

    border-radius:var(--radius-sm);

    font-size:14px;

    background:var(--white);
}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:var(--primary-color);
}

/*
=====================================================
CARDS
=====================================================
*/

.card{

    background:var(--white);

    border-radius:var(--radius-md);

    padding:20px;

    box-shadow:var(--shadow-sm);
}

/*
=====================================================
HEADINGS
=====================================================
*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--dark-color);

    font-weight:700;
}

/*
=====================================================
PAGE CONTAINER
=====================================================
*/

.container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:20px;
}