@import 'common.css';

/* LOGIN */
.login-bg{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    background: rgba(0, 123, 255,0.05);
}
.login h1 img{
    width: 290px;
    margin:0 auto
}
.login-con{
    border: 1px solid var(--es-light);
    padding:25px 45px 35px;
    background: var(--es-white);
    margin: 45px 0 0;
    box-shadow: 0 0 25px var(--es-shadow);
}
.login-con form{
    display: flex;
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.login button {
    width: 100%;
}
.login-con p a,
.login h3 {
    color: var(--es-blue);
}
.login-con p {
    padding: 0;
}
.login-con p{
    font-size: calc(var(--es-fnt-size) - .1rem);
}

/* MAIN CONTAINER */
/* DASHBOARD */
.info {
    margin: 35px 0 0;
}
.info .card {
    padding: 20px;
    border-bottom: 3px solid transparent;
}
.info .card .card-body {
    position: relative;
}
.info .card small{
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.4;
}
.info .card p{
    font-size:calc(var(--es-fnt-size) - 0.15rem);
    color: rgba(0,0,0,0.3);
}
.info .card p strong{
    display: block;
    font-size: calc(var(--es-fnt-size));
    color: rgba(0,0,0,0.5);
}
.info .card h5 {
    display: flex;
    padding-left: 0;
    align-items: center;
}
.info .card i {
    margin-right: 15px;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    font-size: calc(var(--es-fnt-size) - 0.1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.info .card.order {
    border-bottom-color: var(--es-blue);
}
.info .card.order h5 i {
    background: var(--es-blue);
}
.info .card.order h5 {
    color: var(--es-blue);
}
.info .card.ship {
    border-bottom-color: var(--es-red);
}
.info .card.ship h5 {
    color: var(--es-red);
}
.info .card.ship h5 i {
    background: var(--es-red);
}
.info .card.pending {
    border-bottom-color: var(--es-orange);
}
.info .card.pending h5 {
    color: var(--es-orange);
}
.info .card.pending h5 i {
    background: var(--es-orange);
}
.info .card.completed {
    border-bottom-color: var(--es-green);
}
.info .card.completed h5 {
    color: var(--es-green);
}
.info .card.completed h5 i {
    background: var(--es-green);
}
.info .card.product {
    border-bottom-color: var(--es-green);
}
.info .card.product h5 {
    color: var(--es-green);
}
.info .card.product h5 i {
    background: var(--es-green);
}


.margin-15{
    margin-top: 15px;
}
#chart button {
    border: 1px solid var(--es-border);
    padding: 5px 15px;
    font-size: calc(var(--es-fnt-size) - .2rem);
    margin-left: 15px;
}
#chart button.active{
    border-color: var(--es-blue);
    color: var(--es-blue);
}
.two-cols [class*="col-lg-"]{
    display: flex;
    flex-wrap: wrap;
}
.two-cols .card {
    padding: 20px;
    width: 100%;
}
/* .card {
    padding: 20px;
} */
.dt-layout-row {
    padding: 0 20px;
}
.two-cols h6 {
    color: var(--es-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.two-cols h6 a {
    font-size: calc(var(--es-fnt-size) - 0.15rem);
    font-weight: 700;
    opacity: .6;
    border-bottom: 1px solid var(--es-blue);
    text-transform: uppercase;
}
.status {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    display: inline-block;
}

.status.pending {
    background-color: #f0ad4e;  /* Orange */
}

.status.processing {
    background-color: #17a2b8;  /* Blue/Teal */
}

.status.shipped {
    background-color: #46b760;  /* Green */
}

/* INBOUND SHIPMENT */

.modal-window-wrap.inbound-view{
	width: 800px;
}
.modal-window-wrap.inbound-view th,
.modal-window-wrap.inbound-view td,
.table-center th, 
.table-center td {
    text-align: left !important;
}
.modal-window-wrap.inbound-view th:nth-child(2),
.modal-window-wrap.inbound-view td:nth-child(2),
.table-center th:nth-child(2),
.table-center td:nth-child(2) {
    text-align: left !important;
}
.daterangepicker .drp-calendar {
    display: none;
    max-width:100%;
    width: 100%;
}
.card-body h5 {
    color: var(--es-gray-dark);
}
.reports .card-body h5 {
    padding-left: 25px;
}
/* REPORTS */
.reports th,
.reports td {
    text-align: left !important;
}
.reports th:first-child {
    width: 25%;
    text-align: left !important;
}
.reports td:first-child {
    text-align: left !important;
}
.reports .table-center th:first-child {
    width:auto;
    text-align: left !important;
}
/* SETTINGS */
.client th{
width: 300px !important;
}
.client .table-center th:nth-child(2){
    text-align: center !important;
}
.report-product .table-center th:nth-child(1){
    width: 100px !important;
}
.settings h4 {
    padding-bottom: 15px;
}
.settings nav ul {
    display: flex;
    border-bottom: 2px solid var(--es-border);
    flex-wrap: wrap;
}
 .settings nav li{
    padding-right: 35px;
    margin-bottom: -1px;
 }
 .settings nav li:first-child {
    border-top: none !important;
 }
.settings nav li a{
	font-size: calc(var(--es-fnt-size) - 0.15rem);
	color: var(--es-text);
	display: block;
	padding: 10px;
    border-bottom: 3px solid transparent;
}
.settings nav li.active>a {
	color: var(--es-blue);
    border-bottom-color: var(--es-blue);
}
.settings-con>h5 {
    padding-bottom: 35px;
}
.settings-con .col-lg-8,
.settings-con .col-lg-9 {
    border-left: 1px solid var(--es-border);
    min-height: 56vh;
    padding-left: 45px;
}
.settings-con .col-lg-8 {
    min-height: 65vh;
}
.settings-con .col-lg-9 form ,
.settings-con .col-lg-8 form {
    width: 50%;
}
.settings-con .card {
    padding:10px 35px;
    border-top: none;
}
.settings-con .card .card{
    border: none;
    padding: 0;
}
.settings-con .col-lg-4 .card {
    text-align: center;
}
.settings-con .col-lg-4 .card .upload {
    margin-bottom: 25px;
}
.settings-con .col-lg-4 .card h5 {
    color: var(--es-blue);
}
.settings-con .col-lg-4 .card p {
    font-size: calc(var(--es-fnt-size) - .2rem);
    line-height: 24px;
}
.settings-con .card h6 {
    color: var(--es-blue);
    padding-bottom: 20px;
}
.settings-con small{
    display: block;
    color: var(--es-gray-dark);
    font-size: calc(var(--es-fnt-size) - .15rem);
    opacity: 0.6;
    font-weight: 500;
}
.settings .btn {
    margin: 0;
}
.team-member .card{
    border: 1px solid var(--es-border) !important;
    padding:0 25px !important;
}
.team-member .row{
    align-items: center;
}
.team-member h5 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 35px;
}
.team-member .card .col-lg-10{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.team-member .card  img{
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin-right: 20px;
}
.team-member .card h6{
    line-height: 25px;
    font-size: calc(var(--es-fnt-size) - 0.05rem);
}
.team-member .card h6 span{
    display: block;
    color: var(--es-gray-dark);
    font-weight: 500;
    font-size: calc(var(--es-fnt-size) - 0.1rem);
}
.team-member .card .col-lg-2 a{
    margin-left: 10px;
    opacity: 0.5;
}
.team-member .card .col-lg-2 a .fa-trash{
    color: var(--es-red);
}
.team-member {
    position: relative;
}
.team-member .add-user{
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    padding: 10px 45px;
    background: white;
    width: 100%;
}
.team-member .add-user form {
    width: 50%;
}

.payment-options li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 550px;
    border: 1px solid var(--es-border);
    padding: 15px;
    border-radius: 3px;
    margin-top: 15px;
}
.payment-options li span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}
.payment-options li img{
    width: 60px;
    margin-right: 20px;
}
.payment-options li button {
    font-size: calc(var(--es-fnt-size) - 0.15rem);
    padding: 5px 10px;
    opacity: .6;
}
.payment-options li .fa-ellipsis {
    margin-left: 20px;
    border: 2px solid var(--es-border);
    padding: 0px 8px;
    border-radius: 3px;
    cursor: pointer;
}
.payment-options li  .cards{
    position: absolute;
    right: 0;
    top: 40px;
    width: 180px;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    border: 1px solid var(--es-border);
}
.payment-options li .fa-ellipsis:hover + .cards{
    opacity: 1;
    visibility: visible;
}
.payment-options li .cards a {
    display: block;
    opacity: 0.7;
    padding:6px 20px;
    font-size: calc(var(--es-fnt-size) - 0.2rem);
}
.payment-options li .cards a i {
    margin-right: 10px;
}
.add-payment{
    border: 1px solid var(--es-border) !important;
    padding:0 25px 25px !important;
}
.add-payment .row{
    align-items: center;
}
.add-payment [class*="col-lg-"] {
    padding-top: 10px;
    padding-bottom: 10px;
}
.add-payment .flex{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.add-payment .flex input{
    width: 47%;
}
.add-payment button {
    margin-top: 15px !important;
}

/* STORE CONNECT */
.store-connect-con {
    position: relative;
}
.store-connect-con h4 span {
    display: block;
    font-size: calc(var(--es-fnt-size) - 0.1rem);
    font-weight: 500 !important;
    opacity: 0.7;
}
.store-connect-con .btn-outline {
    position: absolute;
    left: 45px;
    border-color: var(--es-blue) !important ;
    color: var(--es-blue) !important;
    top: 65px;
}
.store-connect-con .btn-outline:hover {
    background: var(--es-blue);
    color: white !important;
}
.store-connect-con .chosen-container {
    width: 300px !important;
}
.stores td{
    vertical-align: middle;
}
.stores td>span {
    display: flex;
    align-items: center;
}
.stores td small {
    opacity: 0.6;
}
.stores img{
    margin-right: 15px;
    width: 30px;
}
.stores .switch{
    margin-top: 10px;
}
.store-connect {
    padding:0 25px;
    margin: 35px 0 0;
}
.store-connect nav li{    
    border-bottom: 3px solid transparent;
    padding: 10px;
	font-size: calc(var(--es-fnt-size) - 0.15rem);
	color: var(--es-text);
    margin-right: 25px;
}
.store-connect nav li a{
    padding: 0;
    border: none;
}
.store-connect nav li.active{    
    border-bottom-color:var(--es-blue);
    color: var(--es-blue);
}
.store-connect-con {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
}
.store-connect-con .card-body {
    flex: 0;
}
.store-connect-con img{
    width: 60px;
    margin-bottom: 15px;
}
.store-connect-con h5 {
    color: var(--es-blue);
}
.store-connect-con h5 small{
    display: block;
    color: var(--es-gray-dark);
}
.type-connect li {
    border: 1px solid var(--es-border);
    padding: 10px 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:0 0 30px;
    width: 390px;
}
.type-connect li img {
    height: 40px;
    margin-right: 10px;
    margin-bottom: 0;
}
.order-table td {
    vertical-align: middle;
}
.order-table img{
    width: 25px;
    margin: 0 3px;
}
.order-table td a{
    color: var(--es-blue);
}
div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom: none;
}
.accordion-content h6 {
    padding-bottom: 5px;
}
.accordion-content h6 + small {
    font-size: 15px;
}
.stores-table .d-flex{
    align-items: flex-start;
}
.stores-table .d-flex label {
    margin: 0 0 0 10px;
}
aside > nav {
    border: none !important;
}
aside .top-sidebar nav {
    border-top:  1px solid var( --es-border);
}
/* RESPONSIVE */

@media (max-width: 1550px ) {
    .filter .input {
        width: 69%;
    }
    .filter .input input {
        width: 97%;
    }
    
    .page-content {
        padding: 25px 15px 35px !important;
    }
    .info .card {
        padding: 20px 10px !important;
    } 
     .info .card p {
        font-size: calc(var(--es-fnt-size) - 0.37rem) !important;
    }
        .client.dataTable {
        width: 100% !important;
    }  
    .dash-table{
       overflow-x: scroll;
    }
     .dash-table table{        
         width: 890px !important;
    }
}
@media (max-width: 1400px ) {
    .scroll-xl .dt-layout-cell{
       overflow-x: scroll;
    }
    
    
     table.order-table{
        width: 1200PX !important;
    }  
}
@media (min-width:1200px) and (max-width:1400px){
    
     .page-content-wrap {
        margin-left: 220px !important;
    }
    aside {
        width: 220px !important;
    }
    
    .row>* {
        padding-right: calc(var(--bs-gutter-x) * .3);
        padding-left: calc(var(--bs-gutter-x) * .3);
    }
    .info .card p {
        font-size: calc(var(--es-fnt-size) - 0.37rem) !important;
    }
    #DataTables_Table_0_wrapper .dt-layout-cell,
    #productReportTable_wrapper .dt-layout-cell,
    #productsTable_wrapper .dt-scroll-body,
   #productsTable_wrapper .dt-scroll-headInner{
    overflow-x: scroll;
   }
   #DataTables_Table_0_wrapper .dt-layout-cell table {
    width: 1585px !important;
   }
   #productReportTable_wrapper .dt-layout-cell table {
    width: 1225px !important;
   }
    #productsTable_wrapper .dt-scroll-body table,
   #productsTable_wrapper .dt-scroll-headInner table{
    width:1555px !important;
   }
   aside nav li ul li a{
    padding-right: 20px !important;
   }
}
@media (max-width: 1199px){
    
     .orders table.dataTable {
        width: 1185PX !important;
    }  
    .inbound-shipment table.dataTable {
        width: 1050PX !important;
    }  
    .shipments table.dataTable {
        width: 1075PX !important;
    }  
   .report-product table.dataTable {
        width: 1015PX !important;
    }  
    .settings-con .col-lg-9 form ,.settings-con .col-lg-8 form {
    width: 65%;
    }
    .settings-con .col-lg-8, .settings-con .col-lg-9 {
    padding-left: 25px;
    }
    
    .scroll-lg .dt-layout-cell{
       overflow-x: scroll;
    }
    
}
@media(max-width: 1099px){
    .scroll-lga .dt-layout-cell{
       overflow-x: scroll;
    }
    .products table.dataTable , .stores table.dataTable , .returns table{        
         width: 850px !important;
    }
}

@media (min-width:1024px) and (max-width: 1199px){
    .filter .input {
        width: 54%;
    }
    .filter .input input {
        width: 95%;
    }
    table.dataTable>tbody>tr>td {
    padding: 14px 7px;
    }
    .info .col-lg-3{
        width: 50% !important;
    }
    .login-bg .container{
        max-width: 990px !important;
    }

}
@media (min-width: 991px) {
    .col-lg-2 {
        flex: 0 0 auto;
        width: 13.666667%;
    }
    .col-lg-10 {
        flex: 0 0 auto;
        width: 86.3346%;
        
    }
    .settings-con .col-lg-3 {
        width: 20%;
    }
    .settings-con .col-lg-9 {
        width: 80%;
    }
    .scroll-md .dt-layout-cell{
       overflow-x: scroll;
    }
    
     
}

@media (max-width:992px){
    .login-bg .container{
        max-width: 800px !important;
    }
    .filter .input {
        width: 100%;
    }
    .filter .input input {
        width: 93%;
    }
    .card-body .btn-group{
        padding-top: 30px;
    }
    table.dataTable {
        width: 980PX !important;
    }  
     .settings-con .col-lg-9 form ,.settings-con .col-lg-8 form {
    width: 80%;
     }
     .settings-con .card {
    padding: 10px 5px;
    }
    
    .team-member{
        width: 75% !important;
    }
    .team-member h5 .btn{
        width: 180px !important;
    }
    .payment-options{
        overflow-x: scroll;
    }
        .page-content {
        padding: 25px 15px 35px !important;
    }
    .row>* {
        padding-right: calc(var(--bs-gutter-x) * .3);
        padding-left: calc(var(--bs-gutter-x) * .3);
    }
    .info .card p {
        font-size: calc(var(--es-fnt-size) - 0.37rem) !important;
    }
    .filter .btn {
    margin: 0 20px 0 0px !important;
    }

}
@media (min-width: 564px) {
    .daterangepicker {
        width: 332px;
        right: 20px !important;
        left: 0;
        margin: auto;
    }
}
@media (max-width:768px){
   .team-member {
    width: 95% !important;
    }
        .upload button {
        width: 160px;
        height: 160px;
    }
    .scroll-sm .dt-layout-cell{
       overflow-x: scroll;
    }
    .login-con p {
    font-size: calc(var(--es-fnt-size) - .2rem);
    }
   
    
}
@media (max-width:759px) and (min-width:499px){
  aside {
    overflow-y: scroll;
    display: block !important;
   }
   .login-bg {
    height: 170vh ;
    }
     .login-bg .container{
        max-width: 500px !important;
    }
  
}
@media (max-width:399px){
    .login-con {
    padding: 25px 25px 35px;
    }
   .team-member h5 {
    display: block;
    }
    .page-title{
        font-size: 20px !important;
    }
    .client.dataTable {
        width: 550px !important;
    }
    .team-member .card {
    padding: 0 10px;}
    .filter .btn {
    padding: 9px 10px;
    margin: 5px !important;
    }
    .list-user .card{
        width: 258px;
    }
    .btn-group{
        display: block;
    }
    .page-content {
        overflow-y: scroll;
        padding: 25px 10px 35px !important;
    }
    .store-connect-con .btn-outline {
        position: relative !important;
        top: 0px !important;
        left: 0 !important;
    }
    .store-connect-con {
    overflow: scroll;
   }
   .type-connect{
    width: 310px !important;
   }
   .settings-con .col-lg-9 {
        width: 95%;
    }
    .dt-layout-start {
    padding-left: 0px;
    }
    h6 {
    font-size: calc(var(--es-hd-size) - 1.1rem);}
}