@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
    body,
    html {
        height: 100%;
        font-size: 17px;
        background: #fff;
        background-image: url('./../img/bg-img.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        font-family: 'Open Sans', sans-serif;
    }
    /* remove outer padding */
    
    .main .row {
        padding: 0px;
        margin: 0px;
    }
    /*Remove rounded coners*/
    
    nav.sidebar.navbar {
        border-radius: 0px;
    }
    
    nav.sidebar,
    .main {
        -webkit-transition: margin 200ms ease-out;
        -moz-transition: margin 200ms ease-out;
        -o-transition: margin 200ms ease-out;
        transition: margin 200ms ease-out;
    }
    /* Add gap to nav and right windows.*/
    
    .main {
        padding: 10px 10px 0 10px;
    }
    /* .....NavBar: Icon only with coloring/layout.....*/
    /*small/medium side display*/
    
    @media (min-width: 768px) {
        /*Allow main to be next to Nav*/
        .main {
            position: absolute;
            width: calc(100% - 14em);
            /*keeps 100% minus nav size*/
            margin-left: 14em !important;
            float: right;
        }
        /*lets nav bar to be showed on mouseover*/
        nav.sidebar:hover+.main {
            margin-left: 14em;
        }
        /*Center Brand*/
        nav.sidebar.navbar.sidebar>.container .navbar-brand,
        .navbar>.container-fluid .navbar-brand {
            margin-left: 0px;
        }
        /*Center Brand*/
        nav.sidebar .navbar-brand,
        nav.sidebar .navbar-header {
            text-align: center;
            width: 100%;
            margin-left: 0px;
        }
        /*Center Icons*/
        nav.sidebar a {
            padding-right: 13px;
        }
        /*adds border top to first nav box */
        nav.sidebar .navbar-nav>li:first-child {
            border-top: 1px #968a00 solid;
        }
        /*adds border to bottom nav boxes*/
        nav.sidebar .navbar-nav>li {
            /* border-bottom: 1px #949494 solid; */
        }
        /* Colors/style dropdown box*/
        nav.sidebar .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        /*allows nav box to use 100% width*/
        nav.sidebar .navbar-collapse,
        nav.sidebar .container-fluid {
            padding: 0 0px 0 0px;
        }
        /*colors dropdown box text */
        .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
            color: #777;
        }
        /*gives sidebar width/height*/
        nav.sidebar {
            width: 200px;
            height: 100%;
            margin-left: -160px;
            float: left;
            z-index: 8000;
            margin-bottom: 0px;
        }
        /*give sidebar 100% width;*/
        nav.sidebar li {
            width: 100%;
        }
        /* Move nav to full on mouse over*/
        nav.sidebar:hover {
            margin-left: 0px;
        }
        /*for hiden things when navbar hidden*/
        .forAnimate {
            opacity: 0;
        }
    }
    /* .....NavBar: Fully showing nav bar..... */
    
    @media (min-width: 1330px) {
        /*Allow main to be next to Nav*/
        .main {
            width: calc(100% - 14em);
            /*keeps 100% minus nav size*/
            margin-left: 14em;
        }
        /*Show all nav*/
        nav.sidebar {
            margin-left: 0px;
            float: left;
        }
        /*Show hidden items on nav*/
        nav.sidebar .forAnimate {
            opacity: 1;
        }
    }
    
    nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
    nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #CCC;
        background-color: transparent;
    }
    
    nav:hover .forAnimate {
        opacity: 1;
    }
    
    section {
        padding-left: 15px;
    }
    
    @media(min-width: 768px) {
        .navbar-nav-custom>li>a {
            padding-left: 30px;
            padding-top: 30px;
            padding-bottom: 25px;
        }
        .navbar-nav>li>a {
            line-height: 10px;
        }
    }
    
    @media(min-width: 768px) {
        .well-custom {
            min-height: 35rem;
        }
    }
    
    .well-custom {
        margin-top: 0.5rem;
    }
    
    .gap {
        margin-top: 1rem;
    }
    /*============navigation sidebar design=============*/
    
    .navbar-inverse .navbar-nav-custom>li a:hover {
        color: #fff;
        background-color: #616161;
        transition: background-color 0.5s ease;
    }
    
    .navbar-inverse .navbar-nav-custom>.active>a,
    .navbar-inverse .navbar-nav-custom>.active>a:focus,
    .navbar-inverse .navbar-nav-custom>.active>a:hover {
        color: #fff;
        background-color: #616161;
    }
    /*============navigation sidebar design=============*/
    /*============input field design=============*/
    
    input[type=number] {
        -moz-appearance: textfield;
    }
    
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    input.input-custom::-webkit-input-placeholder {
        color: #fff;
        font-size: 1.1rem;
        padding-left: 1rem;
    }
    
    input.input-custom::-moz-placeholder {
        color: #fff;
        font-size: 1.1rem;
    }
    
    input.input-custom::-ms-input-placeholder {
        color: #fff;
        font-size: 1.1rem;
    }
    
    input.input-custom::-moz-placeholder {
        color: #fff;
        font-size: 1.1rem;
    }
    
    .input-custom {
        border-radius: 0px;
        font-size: 1.2rem;
        padding: 1.1rem auto 1.1rem auto;
        height: 2.8rem;
        background-color: #a9a9a9;
        color: #fff;
    }
    
    .btn {
        border-radius: 0px;
        font-size: 1rem;
        -webkit-transition: background-color 0.5s;
        -moz-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        transition: background-color 0.5s;
    }
    
    .btn-primary-custom {
        background: #f15a24;
        min-width: 8rem;
        color: #fff;
    }
    
    .btn-success-custom:hover {
        background-color: #06960E;
        color: #fff;
    }
    
    .btn-danger-custom {
        margin-top: 1rem;
        border: 1px solid #990000;
        width: 8rem;
        padding: .5rem;
        background-color: #fff;
    }
    
    .btn-danger-custom:hover {
        background-color: #990000;
        color: #fff;
    }
    /*product page design*/
    
    @media(max-width: 768px) {
        .nav-tabs-custom {
            margin-top: 1rem;
        }
    }
    
    .nav-tabs-custom>li.active>a,
    .nav-tabs-custom>li .active>a:focus,
    .nav-tabs-custom>li.active>a:hover {
        background-color: #012B39;
        color: #fff;
        font-weight: 500;
    }
    
    .nav-tabs-custom>li.active>a,
    .nav-tabs-custom>li.active>a:focus,
    .nav-tabs-custom>li.active>a:hover {
        border: 1px solid #012B39;
    }
    
    .table-custom {
        background: #012B39;
        border-collapse: collapse;
    }
    
    .table-custom>thead>tr>th {
        border-bottom: 1px solid #364043;
        color: #5bcad9;
        font-size: 0.85em;
        font-weight: 600;
        padding: 0.5em 1em;
        text-align: center;
    }
    
    .table-custom>tbody>tr>td {
        color: #fff;
        font-weight: 400;
        padding: 0.65em 0.2em;
        text-align: center;
    }
    
    .disabled td {
        color: #4F5F64;
    }
    
    .table-custom>tbody>tr {
        transition: background 0.25s ease;
    }
    
    .table-custom>tbody>tr:hover {
        background: #014055;
    }
    
    .table-single-product {
        background: #012B39;
        color: #fff;
    }
    /*floating add button design*/
    
    .multi-action {
        display: inline-block;
        position: fixed;
        width: 40px;
        height: 40px;
        margin: 300px 0 0 -28px;
        right: 2%;
        bottom: 3%;
        z-index: 1000;
    }
    
    .action-button {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 0;
        outline: 0;
        background: #f44336;
        font-size: 26px;
        color: white;
        z-index: 2;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        transition: all .3s;
    }
    
    .cat-action {
        position: relative;
        left: 2.1rem;
    }
    
    .plus-rotate:hover {
        /* Firefox */
        -moz-transform: scale(2) rotate(30deg) translate(50px);
        /* WebKit */
        -webkit-transform: scale(1.2) rotate(30deg) translate(50px);
        /* Opera */
        -o-transform: scale(2) rotate(30deg) translate(50px);
        /* Standard */
        transform: scale(2) rotate(30deg) translate(50px);
    }
    /*============admin login page design===================*/
    
    .form-custom-login {
        max-width: 600px;
        margin: auto;
        border: 1px solid #eee;
    }
    
    .form-custom-login:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .form-custom-login .form-heading {
        background: #f15a24;
        padding: 10px 15px;
    }
    
    .form-custom-login .form-heading h2 {
        color: #fff;
        margin: 0;
    }
    
    .form-custom-login .form-group {
        max-width: 100%;
        margin: auto;
        margin: 15px;
    }
    
    .form-custom-login .btn {
        margin-right: 15px;
        margin-bottom: 15px;
    }
    
    .login-gap {
        margin-top: 5rem;
    }
    /*========admin account panel============*/
    
    .admin-custom .panel-heading h3 span {
        font-weight: 800;
    }
    
    .admin-custom .tsale h3 span {
        color: #4C9ED9;
    }
    
    .admin-custom .tdue h3 span {
        color: #FF8C00;
    }
    
    .admin-custom .tprofit h3 span {
        color: #3AAB58;
    }
    
    .admin-custom .texpense h3 span {
        color: #C5060B;
    }
    
    .admin-custom .panel-body {
        font-size: 1.3rem;
    }
    
    .admin-custom .panel-footer {
        text-align: right;
    }
    
    .admin-custom .panel-footer a {
        color: #F63303;
    }
    /*========admin manage salesman page design============*/
    
    #salesman_pass_cng {
        display: none;
    }
    /*========admin banking page design============*/
    
    .banking-avail {
        color: #3AAB58;
    }
    
    .banking-wid {
        color: #C5060B;
    }
    
    .banking-dep {
        color: #4C9ED9;
    }
    
    .banking-details-form {
        margin-top: 2rem;
    }
    
    @media(min-width: 768px) {
        .banking-date {
            max-width: 7rem;
        }
        .banking-acc {
            max-width: 13rem;
        }
    }
    
    .acc-det-cat {
        color: #3AAB6B;
    }
    /*========dashboard page design===========*/
    
    .btn-dash {
        margin-top: 2rem;
        width: 100%;
        padding: 5rem;
        font-size: 2rem;
    }
    
    @media(max-width: 767px) {
        .btn-dash {
            margin-top: 2rem;
            width: 100%;
            padding: 3rem 1rem;
            font-size: 1.5rem;
        }
    }
    /*===========banking menu design ============*/
    
    .btn-success.active,
    .btn-success:active,
    .open>.dropdown-toggle.btn-success {
        background-color: #226822!important;
    }
    /*============modal close button design===========*/
    
    .close {
        float: left!important;
        color: red!important;
        opacity: 1!important;
        font-size: 2rem!important;
    }
    /*=============supplier product add page design=======*/
    
    .for-sale {
        display: none;
    }
    
    @media(max-width: 767px) {
        .btn-menu {
            width: 11rem;
            font-size: 0.8rem;
        }
    }
    
    .rounded-0 {
        border-radius: 0 !important;
    }
    
    .sidebar.navbar.navbar-inverse {
        background: #012B39 !important;
    }
    
    .text-p-reset {
        text-align: left !important;
    }
    
    .btn.focus,
    .btn:focus,
    .btn:hover {
        color: #e9e6e6;
        text-decoration: none;
        border: 1px solid #3ac4cb !important;
    }
    
    .btn-default.focus,
    .btn-default:focus,
    .btn-default:hover {
        color: #1c1c1c;
        text-decoration: none;
        border: 1px solid #f5f5f5 !important;
    }
    
    .well {
        background-color: #f5f5f582 !important;
    }
    
    .well .well {
        background-color: #fff !important;
    }
    
    .nav.nav-tabs>li>a {
        color: #000 !important;
        font-weight: bolder !important;
    }
    
    .nav.nav-tabs>li.active>a {
        color: rgb(231, 231, 231) !important;
        font-weight: bolder !important;
    }
    
    nav.sidebar {
        width: 14em !important;
    }