:root{
    --offcanvas-width:260px;
    --topNavbarHeight:56px;
    

    --primaryColor:#3D655B;
    --whiteColor:white;
    --blackColor:black;
    --btnGreenColor:#04B900;
    --btnGreenDarkColor:#20744A;
    --primaryBackgroundColor:#4d8e6d;
    --btnRedColor:#F20000;
    --btnOrgangeColor:#F25700;
    --btnBlackColor:#000000;
    --bgNetWeight:#D3F4F8;
    --bgQuantityWeight:#FFE1B0;
    --bgTareWeight:#EFDAF8;
    --bgGrossWeight:#E0F1D2;
    --bgPrice:#E7C3C3;
    --bgProductForm:#A7E8D0;
    --bgIpCard:#EDE1A1;

    --titleFontSize:18px;
    --titleDisplayFontSize:20px;
    --valueFontSize:20px;
    --valueDisplayFontSize:24px;

    --titleFontWeight:600;
    --titleDisplayFontWeight:700;
    --valueFontWeight:900;
    --valueDisplayFontWeight:800;
}

.align-center { 
    text-align: center; 
}

.text-green{
    color: var(--btnGreenColor);
}

.text-black{
    color: var(--blackColor);
}

.text-red{
    color: var(--btnRedColor);
}

.top-nav{
    background-color: var(--primaryColor);
}

.sidebar-nav{
    width: var(--offcanvas-width);
    background-color: var(--primaryColor);
}

.color-text-red{
    color: #C10000!important;
}

.color-text-white{
    color: #FFFFFF!important;
}

.color-text-dark-green{
    color: var(--btnGreenDarkColor)!important;
}

.connection-status{
    color: green;
}

.connection-status-disconnected{
    color: red;
}

.btn-green{
    background-color: var(--btnGreenColor)!important;
    color: var(--whiteColor)!important;
}

.btn-red{
    background-color: var(--btnRedColor)!important;
    color: var(--whiteColor)!important;
}

.btn-refresh{
    background-color: var(--btnRedColor)!important;
    color: var(--whiteColor)!important;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 4px;
}

.btn-orange{
    background-color: var(--btnOrgangeColor)!important;
    color: var(--whiteColor)!important;
}

.btn-black{
    background-color: var(--btnBlackColor)!important;
    color: var(--whiteColor)!important;
}

.bg-net-weight{
    background-color: var(--bgNetWeight);
}

.bg-ip-card{
    background-color: var(--bgIpCard);
}

.bg-quantity-weight{
    background-color: var(--bgQuantityWeight);
}

.bg-tare-weight{
    background-color: var(--bgTareWeight);
}

.bg-gross-weight{
    background-color: var(--bgGrossWeight);
}

.bg-price{
    background-color: var(--bgPrice);
}

.bg-product-form{
    background-color: var(--bgProductForm);
}

.btn-green-csv{
    background-color: var(--btnGreenDarkColor);
    border-radius: 10px;
    color: var(--whiteColor);
}

.btn-green-border-csv{
    border-color: var(--btnGreenDarkColor);
    border-radius: 10px;
    color: var(--btnGreenDarkColor);
}

/* Font sizes */

.font-title{
    font-size: var(--titleFontSize);
    font-weight: var(--titleFontWeight);
}

.font-display-title{
    font-size: var(--titleDisplayFontSize);
    font-weight: var(--titleDisplayFontWeight);
}

.font-value{
    font-size: var(--valueFontSize);
    font-weight: var(--valueFontWeight);
}

.font-display-value{
    font-size: var(--valueDisplayFontSize);
    font-weight: var(--valueDisplayFontWeight);
}

.btn-primary{
    background-color: var(--primaryColor)!important;
    border-color: var(--primaryColor)!important;
}

.set-text-primary{
    color: var(--primaryColor)!important;
}

.set-primary{
    background-color: var(--primaryColor)!important;
}

.dataTable thead .sorting_asc,
 .dataTable thead .sorting_desc,
.dataTable thead .sorting {
    padding-left: 2.2rem !important;
    padding-right: 0.75rem !important;
 }

.scrollme {
    overflow-x: auto;
}

.vertical-center {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
  
    display: flex;
    align-items: center;
  }

.table-header-color{
    background-color: var(--primaryColor);
    color: var(--whiteColor);
}

.bg-login {

    background-color: var(--primaryBackgroundColor);
    /* Full height */
    height: 100%; 
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100wh 100vh;
  }

  .bg-home {

    background-image: url('../assets/home.jpg');
    /* Full height */
    height: 100%; 
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

@media (min-width:992px) {

    body{
        overflow: auto !important;
    }

    main{
        margin-left: var(--offcanvas-width);
    }

    .login-main{
        margin-left: 0!important;
    }

    .offcanvas-backdrop::before{
        display: none;
    }
    .sidebar-nav{
        transform: none;
        visibility: visible !important;
        top:var(--topNavbarHeight);
        height: calc(100%-var(--topNavbarHeight));
    }
}