@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body,html{
height: 100%;
font-size: 14px;
background: #f8f8f8;
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}

/* remove outer padding */
.main .row{
padding: 0px;
margin: 0px;
}
.well{
background-color: #fff;
}
/*Remove rounded coners*/
.navbar-inverse{
background-color: #272e48;
}
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-brand{
height: 65px;
padding: 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% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}

/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main{
margin-left: 250px;
}

/*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 #fff 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;
}
.navbar-inverse .navbar-nav>li>a{
color: #fff;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}

/*gives sidebar width/height*/
nav.sidebar{
width: 250px;
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% - 250px); /*keeps 100% minus nav size*/
margin-left: 250px;
}

/*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: 20px;
padding-bottom: 20px;
font-weight: 500;
}

.navbar-nav > li > a {
line-height: 15px;
}
}

@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: #07a8ff;
background-color: #61616100;
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: #07a8ff;
background-color: #61616100;
}
.navbar-inverse .navbar-nav-custom > .active > a:before
{
content: "";
background: #07a8ff;
height: 30px;
margin: auto;
left: 0;
width: 3px;
position: absolute;
bottom: 0;
top: 0;
}
/*============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: #dfdfdf;
color: #525252;
}

.btn{
border-radius:5px;
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;
padding: 12px 30px;
font-weight: 500;
}
.btn-sm{
padding: 2px 7px
}
.btn-success-custom{
margin-top: 1rem;
border: 1px solid #06960E;
width: 8rem;
padding: .5rem;
background-color: #06960E;
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: #990000;
color: #fff;
}

.btn-danger-custom:hover{
background-color: #990000;
color: #fff;
}

/*product page design*/
@media(max-width: 768px){

.nav-tabs-custom{
margin-top: 1rem;
}

}
.btn-primary{
background-color: #0667b8;
}
.btn-primary:hover, .btn-primary:focus{
background-color: #0667b8;
outline: 0;
}
.nav-tabs-custom > li.active > a, .nav-tabs-custom > li .active > a:focus, .nav-tabs-custom > li.active > a:hover{

background-color: #0667b8;
color: #fff;
}

.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-radius: 0.25em;
border-collapse: collapse;
}
.table-custom>thead>tr>th {
border-bottom: 1px solid #364043;
color: #E2B842;
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 */
26.
-moz-transform: scale(2) rotate(30deg) translate(50px);
27.
/* WebKit */
28.
-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
29.
/* Opera */
30.
-o-transform: scale(2) rotate(30deg) translate(50px);
31.
/* Standard */
32.
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: #00B16A;
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-control: .form-custom-login .form-group focus;
.form-control-box-shadow: none;
}
.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;

}

}

/*custom-nav*/
.custom-nav{
width: calc(100% - 250px);
margin-left: auto;
border-radius: 0;
}
.custom-nav .navbar-nav{
float: right;
}
.custom-nav .dropdown-menu{
min-width: auto;
left: -65px;
border-radius: 11px !important;
padding-top: 0;
width: 164px;

}
.custom-nav .dropdown-menu>li>a{
padding: 7px 20px;

}
.dropdown .dropdown-menu .user{
background: #0667b8;
color: #fff;
border-radius: 11px 11px 0 0;
color: ;
}
.dropdown .dropdown-menu .user a{
color: #fff;
}
.dropdown .dropdown-menu .user a:hover{
color: #fff;
background: #0667b8;


}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
color: #262626;
text-decoration: none;
background-color: #ffffff;
}
.dropdown:hover .dropdown-menu{
display: block !important;
}
.custom-nav .navbar-nav>li>a{
padding-top: 11px;
padding-bottom: 11px;
}
.custom-nav .navbar-nav img{
width: 42px;
height: 42px;
object-fit: cover;
border-radius: 50%;
}
.form-control{
border: 1px solid #efefef;
border-radius: 5px;
min-height: 50px;
box-shadow: none;
}
label{
font-weight: 400;
font-size: 13px;
}
.table thead th:first-child, .table tbody td:first-child {
border-left: 1px solid #efefef;
border-radius: 10px 0 0 10px;
padding-left: 30px;
}
.table{
border-collapse: separate !important;
border-spacing: 0 10px !important;
}
.table thead th:last-child, .table tbody td:last-child {
border-right: 1px solid #efefef;
border-radius: 0 10px 10px 0;
padding-right: 30px;
}
table.dataTable.display>tbody>tr.odd>.sorting_1, table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1{
box-shadow: none !important;
}
.table thead th, .table tbody td{
border: 1px solid #efefef;
border-top: 1px solid #efefef !important;
border-right: 0;
box-shadow: 0px 0px 20px rgb(0 0 0 / 3%);
vertical-align: middle;
border-left: 0;
}
table.dataTable tbody tr, .table thead th, .table tbody td{
background-color: white !important; 
}
table.dataTable.row-border>tbody>tr>th, table.dataTable.row-border>tbody>tr>td, table.dataTable.display>tbody>tr>th, table.dataTable.display>tbody>tr>td {
/*    border-top: none !important;*/
}
table.dataTable.stripe>tbody>tr.odd>*, table.dataTable.display>tbody>tr.odd>*{
box-shadow: none!important;
}
table.dataTable tbody th, table.dataTable tbody td {
padding: 10px 9px !important;
}
table.dataTable>thead>tr>th, table.dataTable>thead>tr>td{
border-bottom: none !important;
}
table.dataTable thead th, table.dataTable tfoot th {
font-weight: 500 !important;
}
.border-0{
border:0;    padding: 5px;
}

/*login */
.ad-auth-wrapper {
background-color: #0667b8;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
padding: 15px;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
}

.ad-auth-wrapper:before {
background-image: url(../img/auth-bg.png);
background-size: cover;
background-repeat: no-repeat;
content: "";
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.ad-auth-wrapper .input-group-addon{
background-color: #fff;
border: 1px solid #efefef;
border-radius: 5px 0 0 5px;
border-right: 0;
}
.ad-auth-wrapper .form-control{

border-left: 0;

}
.ad-auth-wrapper .input-group-addon .glyphicon{
color: #9abeed;

}
.ad-auth-wrapper .well{
padding: 40px;
}