@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/bg1-img.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        font-family: 'Open Sans', sans-serif;
    }

    .forget_pws {
        margin-top: 20px;
        text-align: end;
    }


    /* add Logo */
    .login_logo_pws img{
        width: 90px;
        height: auto;
    }
    .login_logo_pws {
        text-align: center;
        margin-bottom: 20px;
    }

    /* remove outer padding */
    
    .main .row {
        padding: 0px;
        margin: 0px;
    }
    .pws_f_shadow{
/*        position: relative;*/
        /*box-shadow: 0px 2px 34px 18px rgba(0,0,0,0.18);
        -webkit-box-shadow: 0px 2px 34px 18px rgba(0,0,0,0.18);
        -moz-box-shadow: 0px 2px 34px 18px rgba(0,0,0,0.18);*/
        padding: 30px;
        border-radius: 10px !important;
    }
    /*Remove rounded coners*/
    
    nav.sidebar.navbar {
        border-radius: 0px;
    }

    button.btn.btn-info.sub_pws_btn {
        background-color: #333;
        width: 100%;
        padding: 10px 0px;
        margin: auto;
        display: block;
        border-radius: 5px;
        margin-top: 10px;
    }
    
    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;
        }
        .navbar-inverse .navbar-nav li a{
            color:#000;
        }

        .navbar-inverse .navbar-nav li a span{
            color:#cf393f;
        }
        .navbar-inverse .navbar-nav li.active a span{
            color:#fff;
        }

        /*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.3rem;
    }
    
    .gap {
        margin-top: 3rem;
    }
    /*============navigation sidebar design=============*/
    
    .navbar-inverse .navbar-nav-custom>li a:hover {
        color: #fff;
        background-color: #616161 !important;
        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 !important;
        background-color: #cf393f !important;
    }
    /*============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: #000;
    }
    
    .forg_fiel input{
        margin-bottom: 20px;
    }
    .chan_btn {
        margin: auto;
        background: #333;
        color: #fff;
        margin-top: 25px;
        display: block;
        width: 50%;
        border: 0px;
        padding: 7px 10px;
        transition: .3s;
        border: 1px solid #333;
    }
    
    .chan_btn:hover{
        background-color: transparent;
        color: #000;
    }


    .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: #333;
        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: #333;
        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: #cf393f;
        border-collapse: collapse;
    }
    
    .table-custom>thead>tr>th {
        border-bottom: 1px solid #364043;
        color: #fff;
        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: #333;
    }
    
    .table-single-product {
/*        background: #012B39;*/
        color: #000;
    }
    table.table.table-codensed.table-custom a {
        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 {
        margin-bottom: 30px;
        /*background: #cf393f;
        padding: 10px 15px;
        margin-bottom: 40px;*/
        /*width: 36%;
        display: block;
        margin: auto;
        margin-bottom: 36px;
        position: absolute;
        top: -30px;
        left: 0;
        border-radius: 38px;*/
    }
    
    .form-custom-login .form-heading h2 {
        color: #000;
        margin: 0;
        font-size: 22px;
    }
    
    .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: right !important;
        color: #cf393f !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;
    }
    
    input.form-control.rounded-0.pws_f {
        padding: 22px 18px;
        border-radius: 5px !important;
        margin-bottom: 25px;
        font-size: 18px;
    }

    .login_logo_pws2 img {
        width: 90px;
        height: auto;
    }

    .login_logo_pws2
    {
        padding: 15px;
    }


    .sidebar.navbar.navbar-inverse {
        background: #fff !important;
    }
    
    .text-p-reset {
        text-align: left !important;
    }
    
    .btn.focus,
    .btn:focus,
    .btn:hover {
        color: #000;
        text-decoration: none;
        border: 1px solid #333 !important;
        background-color: transparent;
    }
    
    .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: 800 !important;
    }
    
    .nav.nav-tabs>li.active>a {
        color: #000 !important;
        font-weight: bolder !important;
    }
    
    nav.sidebar {
        width: 14em !important;
    }

    .pws_update_btn{
        background-color:#333; 
        color:#fff;
    }
    

    .pws_new_task, .add_model_pws{
        background-color:#333; 
        color: #fff;
    }
    .pws_new_task:hover, .add_model_pws:hover{
        background-color:transparent; 
        color: #000;
    }









.flex_leftmain{
    padding: 0px;
}

.flex_leftmain ul {
    padding: 0px;
    background-color: #f2f2f2;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.flex_leftmain ul li {
    list-style-type: none;
    font-size: 18px;
    color: #000;
    font-weight: 600;
    padding: 10px 15px;
    border-bottom: 1px solid #8080804d;
    cursor: pointer;
}


#datepicker{
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#datepicker table.table-condensed {
    width: 100%;   
}

.datepicker-inline {
    width: 100% !important;
}

table, thead, tbody, tr, th, td.day{
    border:1px Solid #8080804d;
}

div#datepicker {
    background-color: #f2f2f2;
    padding: 20px;
}

#datepicker table.table-condensed thead tr th,
#datepicker table.table-condensed tbody tr td{
    padding: 20px;
    border:1px Solid #8080804d;
}
.datepicker-months table.table-condensed tbody tr td span,
.datepicker-years table.table-condensed tbody tr td span
{
    padding: 20px;
    border:1px Solid #8080804d;
    margin: 0px;
    border-radius: 0px;
    height: auto;
} 

li.pro_active {
    background-color: #cf393f;
    color: #fff !important;
}
.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top{
    display: block !important;
}

.inner_emp_flex {
    display: flex;
    background-color: #f2f2f2;
    margin-bottom: 40px;
    padding: 20px;
}

.inner_emp_flex .right_emp {
    width: 30%;
}

.inner_emp_flex .left_emp {
    width: 60%;
}

.emp_icon {
    display: flex;
    flex-direction: column;
    align-self: center;
}
h3.emp_tas_t {
    color: burlywood;
}
h2.emp_tas_tit {
    color: #fff;
}
.left_emp div {
    margin-bottom: 13px;
}

.task_pws_title h2{
    color: #fff !important;
    margin-bottom: 40px;
    background-color: #cf393f;
    padding: 10px 0px;
}

.adfsw{
    padding: 30px 0px;
}

.f_t_n {
    color: #fff !important;
}
















#selected-date,
#hidden-val {
  font-weight: bold;
}
.timepicker{
    display: none;
}
.datepicker_area {
    width: 100%;
    padding: 20px 10px !important;
    background-color: #fff;
}
.datepicker{
    width: 100% !important;
    padding: 0px !important;
}
.datepicker_area {
    padding: 0px;
}
.flex_rightmain{
    padding: 0px;
}

table.table-condensed thead tr th, table.table-condensed tbody tr td {
    padding: 20px;
}
table.table-condensed tbody tr td span{
    width: 15% !important;
}


#myDiv{
    display: none;
}


.task_p_item {
    display: flex;
    background-color: #f2f2f2;
    padding: 20px;
    margin-bottom: 30px;
    justify-content: space-between;
}

.task_pl_left {
    width: 60%;
}
.task_pl_left h2, .task_pl_left h4{
    margin: 0px;
    margin-bottom: 10px;
}

.task_pl_left p{
    margin: 0px;
    margin-bottom: 10px;
}

.task_pl_right {
    width: 30%;
}

.task_pl_right h2{
    color: #cf393f;
    margin: 0px;
    margin-bottom: 20px;
}

.modal-backdrop{
    z-index: 0 !important;
}

.back_link_l {
    margin-bottom: 30px;
}

.back_link_l a {
    padding: 10px 20px;
    text-decoration: none !important;
    color: #000;
    font-size: 17px;
    background-color: #fff;
    transition: .4s;
}
.back_link_l a:hover{
    background-color: #333;
    color: #fff;
}   







@media(max-width:920px){
    .task_p_item{
        flex-direction: column;
    }
    .task_pl_left{
        width: 100%;
    }
    .task_pl_right{
        width: 100%;
    }
}