/* font CSS
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Reset CSS
========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }

body { background:#f4f4f4; color: #111111; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px;line-height: 1; overflow-x: hidden;}

*, *::after, *::before{ box-sizing: border-box;}
/* Common CSS
========================================================================== */
ol, ul { list-style: none; }

a, .btn { transition: all 0.5s ease; }
a:active, a:hover, a:focus, .btn:focus, .btn:active, .btn:hover { outline: 0; }
a { color: #36A635; text-decoration: none; }
a:focus, a:hover { color: #111111; text-decoration: none; }

b, strong { font-weight: bold; }
small { font-size: 80%; }
sub, sup { font-size: 72%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.4em; }
sub { bottom: -0.25em; }

img { border: 0; vertical-align: middle; }

hr { box-sizing: content-box; height: 0; }

*:focus { box-shadow: none; outline: 0; }

svg:not(:root) { overflow: hidden; }


/* Button CSS
========================================================================== */
.btn {
    box-shadow: none;
    border: 0px;
    border-radius: 5px;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 15px;
    font-weight: 600;
}
    .btn.focus, .btn:focus{ box-shadow: none;}
    .btn-primary {
        background: #36A635;
        border-color: #36A635;
        color: #ffffff !important;
    }
.btn-primary:hover, .btn-primary:focus ,.btn-primary:not(:disabled):not(.disabled):active{ background: rgba(54, 166, 53, 0.8); border-color: rgba(54, 166, 53, 0.8); box-shadow: none; color: #ffffff;}
button:focus{ outline: 0; box-shadow: none;}
.btn-primary.focus, .btn-primary:focus{ box-shadow: none;}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}
 
/****** Color Css ***/
.text-primary{ color: #36A635!important;}
.text-grey {
    color: #888 !important;
} 

/****** Custom Css ***/
.wrapper{ padding-top: 78px; }

.text-underline{ text-decoration: underline;}
.container { max-width: 1110px; width: 100%;  padding: 0 15px; margin: auto; position: relative;}
 

.relative{ position: relative;}
.block{ display: block;}
.resize-none{ resize: none;}
/*-------------------------------------------------------*/
/*  Header Navigation Css
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
/* Common ELement Css
/*-------------------------------------------------------*/
.wrapper-form {
    padding-top: 1rem;
    padding-bottom: 1rem;
} 
 

/*-------------------------------------------------------*/
/* Form element Css
/*-------------------------------------------------------*/ 
/*.form-group{ margin-bottom: 34px; }*/
.form-fieldset {
    border-top: 1px solid #00000026;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 14px;
}
.form-fieldset legend {
    background: #fff;
    display: inline-block;
    width: auto;
    padding-right: 10px;
    margin-top: -12px;
}
.control-label{ font-size: 14px; font-weight: 600; margin-bottom: 5px;}
.form-control {
    display: block;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background: #fff;
    width: 100% !important;
    height: 40px;
    padding: .375rem .75rem;
    font-weight: 400;
    font-size: 14px;
}
.form-control:focus { border: 2px solid #3b6eff; }
.form-button{}

.form-box {
    background: #ffffff;
    border-radius: 15px;
    padding: 1rem 1.5rem;
}
.form-box h3 { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600;}
    .form-box .form-group {
        margin-bottom: 1rem;
    }
    .form-box .form-control {
        border: 1px solid #cccccc;
        border-radius: 5px;
        background: #fff;
        width: 100%;
        height: 36px;
        padding: 0.5rem 1rem;
        font-weight: 600;
        font-size: 13px;
    }

.form-box .control-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 3px; }

.form-box .customselect{background: url(../images/selectimg.jpg) no-repeat right center #fff; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-box .selectcustom{ position: relative;}
.form-box .selectcustom:after{ 
    content: "";
    background: url(../images/selectimg.jpg) no-repeat right center #fff;
    position: absolute;
    width: 32px;
    display: block;
    height: 60px;
    top: 0;
    right: 0;
    border-radius: 0px 5px 5px 0px;

}
.form-box .selectcustom .customselect{ background: none;}

    .form-box .Editor-editor {
        height: 135px;
    }
    .form-box .btn-group   {
        margin-left: 1px!important;
    }
    .form-box .line-control-status-bar {
        display: none;
    }
.form-submit {
    text-align: center;
}

.form-submit .btn {
    min-width: 200px;
    height: 60px;
}
.error-msg{ font-size: 13px; font-weight: 600;}
.error-input {border: 1px solid red}
.file-browse .file-border {
    opacity: 0;width: 100%;
}

.file-browse .upload-btn {
    display: block;
    width: calc(100% - 30px);
    height: 30px;
    border: 0.5px solid #ccc;
    border-radius: 5px;
    position: absolute;
    top: 0;
    padding-left: 68px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    outline: 0;
    font-size: 12px;
}

    .file-browse .upload-btn::before {
        position: absolute;
        content: "Browse";
        color: #fff;
        height: 30px;
        width: 61px;
        line-height: 20px;
        padding: 5px;
        text-transform: uppercase;
        top: 0px;
        left: 0;
        background: #36A635;
        border-color: #36A635;
        border-radius: 5px 0px 0px 5px;
        font-size: 12px;
        font-weight: 500;
    }
.file-browse {
    position: relative;
}
.imageuploader {
}

.imageList{    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;}
.imageList li{    min-width: 50%;
    flex-basis: 50%;
    padding: 0 24px 3rem;}
    .imageList li .image, .imageList li .image_picker{    background: #e5e5e5;
    position: relative;
    width: 100%;   
    height: 200px;} 
.imageList li .image .close{width: 32px;
    height: 32px;
    background: red;
    border: 1px solid #d6d6d6;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    display: inline-block;
    margin: 10px 5px;
    z-index: 3;
    right: 0;}
    .imageList li .image .close.disabled{ background: #fff;}
    .imageList li .image .close:before {
        left: 50%;
        top: 50%;
        margin-left: -10px;
        margin-top: -2px;
        width: 20px;
        height: 4px;
        background-color: #e5e5e5;
        border: 1px solid #d6d6d6;
        content: "";
        position: absolute;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .imageList li .image .close:after {
        width: 20px;
        height: 4px;
        background-color: #e5e5e5;
        border: 1px solid #d6d6d6;
        content: "";
        left: 50%;
        top: 50%;
        margin-left: -10px;
        margin-top: -2px;
        position: absolute;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .imageuploader .bototmLink {
        text-align: right;
        margin-top: -24px;
    }
    
    .imageuploader .bototmLink a {
        text-decoration: underline;
    }
.line-control-menu-bar a.btn {
    font-size: 12px;
    padding: 0.1rem 0.3rem;
}
.line-control-menu-bar .dropdown-toggle .caret {
    margin-left: 0px;
}
    .line-control-menu-bar .dropdown-menu li a {
        padding: 0.5rem;
        color: #111;
        display: block;
        width: 100%;
    } 
    .line-control-menu-bar .dropdown-menu li a:hover {
        background: #e6e6e6;
    }

    /*** FIle uploader **/
    
.setting {
  }
  .image_picker .settings_wrap {
    overflow: hidden;
    position: relative;
  }
 
  .drop_target {
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    height: 200px;
    width: 100%;
  }
  .drop_target input[type="file"] {
    visibility: hidden;
  }
  .drop_target:before {
    background: url(../images/image.jpg) no-repeat;
    background-size: cover;
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 200px;
    transition: color 0.2s;
  }

  .drop_target .image_preview {
    width: 100%;
    height: 100%;
    background: no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 2;
  }
  header.header-green{ margin: 0 -20px;}
  .modalform{     max-width: 1140px; width: 96%;}

    .modalform .modal-header {
        background: #36A635;
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1.5rem;
        color: #fff;
        margin-bottom: 0rem;
        text-align: center;
    }

        .modalform .modal-header .modal-title, .header-green h1 {
            font-weight: 500;
            font-size: 2rem;
            display: block;
            text-align: center;
            width: 100%;
            padding-right: 2.5rem;
        }
.modalform .wrapper-form{ padding: 0px;}
.modalform .wrapper-form .form-box{ padding: 0px 2rem;}

.modal-dialog .modal-header .close {
    position: absolute;
    right: 40px;
    top: 42px;
    width: 24px;
    height: 24px;
    opacity: 1;
    padding: 0px;
}
  .modal-dialog .modal-header .close:after,.modal-dialog .modal-header .close:before {
    position: absolute;
    left: 11px;
    top: 0px;
    content: ' ';
    height: 24px;
    width: 2px;
    background-color: #ffffff;
  }
  .modal-dialog .modal-header .close:before {
    transform: rotate(45deg);
  } 
  .modal-dialog .modal-header .close:after {
    transform: rotate(-45deg);
  }
    

.modalform .modal-dialog .modal-header .close {
    top: 44px;
} 

.modalform  .line-control-menu-bar a.btn {
    font-size: 13px;
    padding: 0.3rem;
}

.modalform  .line-control-status-bar {
    min-height: 14px;
    line-height: 15px;
}
.modalform .modal-body {
    padding: 0;
}

.modalform .modal-scroll {
    max-height: calc(100vh - 144px);
    overflow: auto;
    padding: 0 15px;
}

.modalform .form-submit {
    padding: 15px;
}

/*-------------------------------------------------------*/
/* Login Page Css
/*-------------------------------------------------------*/ 
.contentwrapper{
    background: #ffffff;
    display: flex;
    display: -webkit-flex;
    
}
.contentwrapper .leftPanel{     background: #36A635;
    box-shadow: 20px 4px 120px rgba(59, 110, 255, 0.2);
    height: 100vh;
    min-width: 536px;
    flex-basis: 536px;
    padding: 2rem;}
    .contentwrapper .leftPanel .logo { 
        margin: auto;
        margin-bottom: 3rem;
    }
    
    .contentwrapper .leftPanel .logo img {
        max-width: 347px;
        min-width: 260px;
    }
.leftPanel .titleText{ font-size: 40px; line-height: 57px; margin: auto; color: #fff; }
.leftPanel .titleText span { font-size: 30px; }
    .contentPanel {
        height: 100vh;
        overflow-y: auto;
        flex-basis: 100%;
        padding: 15px;
    }
    
    .form-container {
        justify-content: center;
        align-items: center;
        min-height: calc(100vh - 70px);
        display: flex;
    }
    
    .form-container .loginForm {
        max-width: 342px;
        width: 100%;
        padding: 40px 0;
    }
       
        h3.title {
            font-size: 30px;
            line-height: 30px;
            margin-bottom: 4.5rem;
            font-weight: 600;
        }
.form-link{ margin-top: 2rem; text-transform: uppercase; font-weight: 600; font-size: 14px;}
.form-message {
    text-align: center;
    line-height: 1.5rem;
}

.form-message h2 {
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 17px;
}
.form-container .loginForm .custom-checkbox {
    font-size: 13px;
    line-height: 1.6rem;
}

/*=================================
Main container
=================================*/
.main-container {
    display: flex;
    display: -webkit-flex;
}

.siteheader-green {
    background: #33da1a;
    text-align: center;
    padding: 1rem 0;
    font-size: 2rem;
    color: #fff;
    margin: 0rem -20px 1rem;
}

    .siteheader-green h1 {
        font-weight: 500;
        font-size: 2.5rem;
        margin: 0;
    }

/*-------------------------------------------------------*/
/* Left Sidebar Css
/*-------------------------------------------------------*/
.leftsidebar {
    background: #fff;
    box-shadow: 0 35px 35px rgba(0,0,0,.1);
    min-height: 100vh;
    min-width: 160px;
    flex-basis: 160px;
    position: relative;
}

.leftsidebar .logo-bar {
    height: 60px;
    position: relative;
    padding: 0 20px 0 10px;
}
.leftsidebar .logo-bar .logo-small{display: none;}
.leftsidebar .logo-bar .togglebtn{
background: #fff;
border: 1px solid #dadada;
position: absolute;
color: #aeaaaa;
z-index: 9999;
padding: 0;
font-size: 20px;
right: -13px;
width: 26px;
height: 26px;
border-radius: 100%;
display: none;
align-items: center;
justify-content: center;
}

.leftsidebar .menu-bar { 
    height: calc(100vh - 141px);
    position: relative;
    overflow: auto;
}

.leftsidebar .menu-bar .nav-bar {
    padding: 0;
    margin: 0;
}

.leftsidebar .menu-bar .nav-bar li {
    margin: 5px 0;
}

.leftsidebar .menu-bar .nav-bar li a {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding: 13px 10px;
    color: #000;
    font-size: 13px;
    line-height: 1;
    font-family: roc-grotesk,sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    min-width: 100%;
    border-radius: 0;
}
.leftsidebar .menu-bar .nav-bar li a .icon{ color: #36A635;margin-right: .5rem;
    font-size: 13px;}

.leftsidebar .menu-bar .nav-bar li.active a, .leftsidebar .menu-bar .nav-bar li a:hover {background: rgba(59,110,255,.1);
    font-weight: 500;}

.profilearea {
    width: calc(100% - 10px);
    border-radius: 0 15px 15px 0;
    background-color: #36A635;
    padding: 15px;
    margin: 10px 0 10px;
    position: absolute;
    bottom: 0px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

    .profilearea .user {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 100%;
        background-color: rgba(0,0,0,.25);
        cursor: pointer;
        border: 1px solid #fff;
        overflow: hidden;
        padding: 0;
    }

        .profilearea .user img {
            max-width: 100%;
            object-fit: cover;
            width: 40px;
            height: 40px;
        }

    .profilearea .detail {
        color: #fff;
        margin-left: 10px;
        flex-basis: calc(100% - 50px);
        min-width: calc(100% - 50px);
    }

    .profilearea .name {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 4px;
        display: block;
    }

    .profilearea .detail a {
        color: #f6e8e8;
        font-size: 12px;
    }

@media (max-width: 990px){
    .leftsidebar .logo-bar .togglebtn{
        display: flex;
        display: -webkit-flex;
    }
    .leftsidebar .logo-bar img, .leftbar-open .leftsidebar .logo-bar .logo-small{display: none;}
    .leftsidebar .logo-bar .logo-small{display: block; margin-left: -2px;}
    .leftsidebar { min-width: 40px; flex-basis: 40px; }
    
    .leftsidebar .menu-bar .nav-bar li a { justify-content: center; }
    
    .leftsidebar .menu-bar .nav-bar li a .value { display: none; }
    
    .leftsidebar .menu-bar .nav-bar li a .icon {  margin-right: 0; }
    .leftsidebar .logo-bar .togglebtn i { transform: rotate(180deg); top: -1px; position: relative;  left: 1px; }

 
    .leftbar-open .leftsidebar .logo-bar img{display: block;} 
    .leftbar-open .leftsidebar { min-width: 160px; flex-basis: 160px; }
    .leftbar-open .leftsidebar .menu-bar .nav-bar li a { justify-content: left; }
    .leftbar-open .leftsidebar .menu-bar .nav-bar li a .value { display: inline-block; }
    .leftbar-open .leftsidebar .menu-bar .nav-bar li a .icon {  margin-right: 0.5rem; }
    .leftbar-open .leftsidebar .logo-bar .togglebtn i { transform: rotate(0deg); top: 0px; left: 0px; }
    .profilearea .user {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .profilearea {
        padding: 5px;
    }

        .profilearea .user img {
            width: 20px;
            height: 20px;
        }
}



/*-------------------------------------------------------*/
/* Right Panel Css
/*-------------------------------------------------------*/  
.right-panel {
    background: #f9f9f9;
    flex-basis: 100%;
    min-width: calc(100% - 165px);
}
.main-container .right-panel .content-panel {
    padding: 0 20px;
}
.main-container .right-panel .content-panel .table-sidebar {
    display: flex;
    display: -webkit-flex;
    position: relative;
}.main-container .right-panel .table-content {
    
    min-width: 100%;
    max-width: 100%;
    margin-top: 15px;
}
.table-content .table-responsive {
    height: calc(100vh - 96px);
}
.form-panel {
    height: 100vh;
    overflow: auto;
    margin: 0 -20px;
    padding-bottom: 80px;
}
.wrapper-form.form-panel {
    height: calc(100vh - 92px);
    overflow: auto;
    margin: 0 -20px;
    padding-bottom: 80px;
}

    .form-panel .form-submit {
        background: #f9f9f9;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 15px;
    }

.table-default thead tr th{background:#ececec;border:0;padding:.1rem .6rem}
.table-default thead tr th:first-child{border-radius:6px 0 0 0}
.table-default thead tr th:last-child{border-radius:0 6px 0 0}
.table-default thead tr th i.fa-filter{opacity:0;color:#aaa;transition-duration:.5s;font-size:10px;position:absolute;right:0;top:0;bottom:0;margin:auto;height:9px}
.table-default thead tr th:hover i.fa-filter{opacity:1}
.table-default tbody{background:#fff}
.table-default tr td,.table-default tr th{font-size:12px;vertical-align:middle;padding:.2rem .6rem}
.table-default tr td {
    border-top: 0;
    border-bottom: 1px solid #e3e3e3;
    min-height: 42px;
    line-height: 1.2rem;
}

.table-fixed thead tr th{position:-webkit-sticky;position:sticky;top:0;z-index:1}

.table-border{background:#ededed;border:1px solid #ededed;border-collapse:separate;border-spacing:0;border-radius:6px}
.table-border tbody tr:last-child td{border-bottom:0}
.table-border-scroll{border-bottom:1px solid #ededed;border-radius:6px}
.table-border-scroll .table-border{border-bottom:0}
.table-border-radius{border:1px solid #ececec;border-radius:6px;overflow:hidden}
.table-border-radius .table-default tbody tr:last-child td{border-bottom:0}

.badge {
    font-weight: normal;
    border: 0px;
    border-radius: 15px;
    padding: 0.2rem 0.5rem;
    font-size: 11px;
}
    .badge .cross {
        cursor: pointer;
        margin-left: 5px;
        font-size: 12px;
    }
h1.title {
    flex-basis: 100%;
    min-width: 100%;
}

.main-container .right-panel .table-content .table {
    margin-bottom: 0;
}


.main-container .right-panel .content-panel .table-sidebar .rightsidebar {
    display: none;
    min-width: 700px;
    max-width: 700px;
    background: #fff;
    margin-left: auto;
    border-left: 1px solid rgba(0,0,0,.1);
    margin-right: -20px;
    position: relative
}
.main-container .right-panel .content-panel .table-sidebar .rightsidebar .customscroll{overflow:auto}
.main-container .right-panel .content-panel .table-sidebar .rightsidebar .close-strip{background-color:#36A635; color: #fff;border-bottom:1px solid #fff;padding:.5rem;text-align:right;}
.main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail{display: flex;
    display: -webkit-flex;
    flex-wrap: wrap; padding:0px;align-items:center}
    .main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail .item {
        flex-basis: 33.33%;
        min-width: 33.33%;
        padding: 15px;
        font-size: 14px;
    }
    .main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail .item label {
        font-weight: 600;
        margin-bottom: 5px;
        display: block;
        width: 100%;
    }
.main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail .image{margin-left:auto;border:1px solid #d5d5d5;border-radius:5px;overflow:hidden;width:151px}
.main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail .info{padding-right:15px}.main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail .info .item{margin-bottom:18px;font-size:18px}.main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail .info h5{color:#000;font-size:12px;margin-bottom:5px;font-weight:400}

.table-sidebar.rightsidebar-open .table-content {
    min-width: calc(100% - 650px);
    max-width: calc(100% - 650px);
    max-height: calc(100vh - 35px);
    overflow: hidden;
}

.main-container .right-panel .content-panel .table-sidebar.rightsidebar-open .rightsidebar {
    display: block;
}
.rightsidebar .collaborator {
    padding: 15px 15px 5px;
    background: #F5F8F9;
    display: flex;
    display: -webkit-flex;
    font-size: 13px;
    margin: 0 15px;
}

.collaborator ul {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.collaborator label {
    font-size: 11px;
}

.collaborator ul li {
    margin-left: 10px; margin-bottom: 10px;
}
    .collaborator ul li .dropdown .dropdown-toggle {
        padding: 0 0.5rem;
        color: #0070fe;
        font-size: 14px;
    }
    .collaborator ul li .dropdown-menu ul li {
        font-size: 14px;
        cursor: pointer;
        padding: 0.5rem;
        margin: 0px;
        width: 100%;
        border-bottom: 1px solid #e6e6e6;
    }

        .collaborator ul li .dropdown-menu ul li:last-child {
            border-bottom: 0px;
        }

        .collaborator ul li .dropdown-menu ul li:hover {
            background: #e6e6e6;
        }
.rightsidebar .tag {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding: 15px;
}

.rightsidebar .tag label {
    font-size: 14px;
    text-transform: capitalize;
}

.rightsidebar .tag ul {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    margin-left: 1rem;
}

.rightsidebar .tag ul li {
    margin: 4px;
}

.rightsidebar .tag ul li .tag {
    border: 0px;
    border-radius: 15px;
    padding: 0.2rem 0.5rem;
    font-size: 11px;
}

.bg-yellow {
    background: #ff9500!important;
    color: #fff!important;
}
.bg-green {
    background: #00d577!important;
    color: #fff;
}
.bg-gray {
    background: #e6e6e6 !important;
    color: #111;
}
.bg-lightgreen {
    background: #98d03d!important;
    color: #fff;
}
.bg-blue {
    background: #0070fe!important;
    color: #fff;
}
.bg-red {
    background: #ff1d41!important;
    color: #fff;
}
.table-inventory tr{ cursor: pointer; }

.rightsidebar .tag ul li .tag span {
    opacity: 0.5;
    font-size: 16px;
    margin-left: 7px;
}


.rightsidebar .tag ul li .dropdown-toggle {
    padding: 0;
    color: #0070fe;
}

.no-arrow {}

.no-arrow:after {
    opacity: 0;
    display: none;
}

.rightsidebar .tag ul li .dropdown {
    margin-left: 1rem;
}

.rightsidebar .tag ul li .dropdown-menu {
    padding: 0;
}

.rightsidebar .tag ul li .dropdown-menu ul {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    margin: 0px;
}

.rightsidebar .tag ul li .dropdown-menu ul li {
    min-width: 100%;
    flex-basis: 100%;
    padding: 5px;
    margin: 0;
}
.rightsidebar .tag ul li .dropdown-menu ul li:hover{ background: #e6e6e6;}
.rightsidebar .name-icon {
    font-size: 11px;
    height: 32px;
    line-height: 32px;
    min-width: 32px;
    flex-basis: 32px;
    width: 32px;
    align-items: center;
    background: center/cover #cbd4db;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    position: relative;
    vertical-align: top;
    flex-shrink: 0;
    margin-right: 8px;
}

.comment-composer {
    display: flex;
    display: -webkit-flex;
    padding: 12px;
}

.comment-composer .texteditor {
    flex-grow: 1; 
}

.comment-composer .texteditor .comment-textarea {
    border: 0;
    width: 100%;
    resize: none;
    margin: 0;
    height: 69px;
    font-size: 15px;
    padding: 5px;
}

.comment-composer .texteditor .editor-tools {
    padding: 10px;
    font-size: 12px;
    display: flex;
    display: -webkit-flex;
}
    .comment-composer .texteditor .Editor-container {
        margin-top: 0;
    }

    .comment-composer .texteditor .btn-group a {
        font-size: 10px;
    }

    .comment-composer .texteditor .Editor-editor {
        height: 92px;
        border-radius: 5px;
    }

    .comment-composer .texteditor div#statusbar_txtEditor {
        display: none;
    }
.comment-button {
    text-align: right;
    padding: 0 12px 0 52px;
}

.btn-sm {
}

.comment-composer .texteditor .editor-tools .button {
    margin-left: auto;
}

.btn-sm {
    font-size: 12px;
    padding: 0.3rem 0.5rem;
    font-weight: 500;
}

.comment-composer .texteditor .editor-tools .button span {
    margin-right: 10px;
}

.feedSection {}

.feedSection  .feedList {}

.feedSection  .feedList li {
    display: flex;
    display: -webkit-flex;
    padding: 10px 15px;
    margin-bottom: 10px;
}

.feedSection .feedList .feed-title {
    display: flex;
    display: -webkit-flex;
    margin-bottom: 8px;
}

.feedSection .feedList .feed-title .name {
    color: #151b26;
    font-size: 13px;
    font-weight: 500;
}

.feedSection .feedList .feed-title .like {
    margin-left: auto;
    color: #6f7782;
    font-size: 15px;
}

.feedSection .feedList .feed-title .name .date {
    color: #6f7782;
    font-size: 11px;
    margin-left: 8px;
}

.feedSection .feedList .feed-comment {
    font-size: 13px;line-height: 1.1rem;
}

.feedSection .feedList 
 .detail {
    flex-grow: 1;
}

.feedSection .feedList .feed-title .name span.attach-icon {
    margin-left: 4px;
}

.feedSection .feedList .feed-comment .attachment {
    background: #f6f8f9;
    border: 1px solid #e8ecee;
    border-radius: 8px;
    overflow: hidden;
}

    .feedSection .feedList .feed-comment .attachment img {
        max-height: 400px;
        width: 100%;
        object-fit: cover;
    }

.feedSection .feedList .feed-comment .attachment-name {
    font-size: 11px;
    font-weight: 600;
    color: #6f7782;
    margin-top: 3px;
}

.feedSection .feedList .feed-comment .attachment-name a {
    color: #6f7782;
}

.feedSection .feedList .update-item {
    flex-basis: 100%;
    min-width: 100%;
    color: #6f7782;
    font-size: 11px;
    margin-bottom: 6px;
    line-height: 1.1rem;
}

.feedSection .feedList .feed-update {
    flex-wrap: wrap;
    padding-left: 55px;
    padding-top: 0;
}

.feedSection .feedList .update-item a {
    color: #6f7782;
    font-weight: 500;
}

    .feedSection .feedList .feed-comment embed {
        width: 100%;
        min-height: 120px;
        overflow: hidden;
    }
.main-container .right-panel .content-panel .table-sidebar .rightsidebar .close-strip button.close-right {
    background: transparent;
    border: 0px;
    color: #fff;
}
.table-inventory tr td .image {
    height: 50px;
    overflow: hidden;
    width: 80px;
}

.table-inventory tr td .image embed {
    width: 100px;
    height: 100%;
}
    .table-inventory tr td .image img {
        width: 100%;
        object-fit: cover;
    }

@media (max-width: 990px){
    .main-container .right-panel .content-panel .table-sidebar .rightsidebar{    min-width: 386px;
        max-width: 386px;}
        .table-sidebar.rightsidebar-open .table-content {
            min-width: calc(100% - 386px);
            max-width: calc(100% - 386px);
        }
}
@media (max-width: 767px){
    .main-container .right-panel .content-panel .table-sidebar .rightsidebar{ min-width: 320px;
        max-width: 320px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;}
        .main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail .item label, .main-container .right-panel .content-panel .table-sidebar .rightsidebar .sku-detail .item {
            font-size: 12px;
        }
        .collaborator ul li {
            margin: 6px 8px 0 0;
        }
        
        .collaborator ul {
            width: 100%;
            min-width: 100%;
        }
        .table-sidebar.rightsidebar-open .table-content {
            min-width: 100%;
            max-width: 100%;
        }
}
.dz-size{
    display:none;
}
.task-search {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    margin: 0 -7.5px;
}
    .task-search .col-auto {
        padding: 0 7.5px;
    }

    .task-search .form-group {
        margin-bottom: 1rem;
    }

    .task-search .col-button {
        display: flex;
        display: -webkit-flex;
    }

        .task-search .col-button .btn {
            height: 40px;
        }

        @media (max-width: 700px){
            .task-search {
                flex-wrap: wrap;
            }

                .task-search .col-button {
                    flex-basis: 100%;
                    min-width: 100%;
                    padding: 0 15px 15px;
                }

            .task-list .table-responsive {
                height: calc(100vh - 141px);
            }
        }
        @media(max-width: 540px){
            .task-search .col-auto {
                width: 100%;
            }
            .task-list .table-responsive {
                height: calc(100vh - 200px);
            }
        }

/***********************************
Responsive Css
****************************************/
@media (max-width: 1100px){
    .contentwrapper .leftPanel {
        min-width: 436px;
        flex-basis: 436px;
    }
}

@media (max-width: 990px){
    .contentwrapper .leftPanel {
        min-width: 330px;
        flex-basis: 330px;
    }
}
@media (max-width: 767px){
    .contentwrapper {
        flex-wrap: wrap;
    }
    
    .contentwrapper .leftPanel {
        min-width: 100%;
        flex-basis: 100%;
        height: auto;
    }
    
    .form-container .loginForm {
        padding: 15px 0;
    }
    
    .contentPanel {
        height: auto;
        padding: 30px 15px;
    }
    
    .form-container {
        min-height: 100%;
    }
    
    .leftPanel .titleText {
        font-size: 2rem;
        line-height: 2.5rem;
    }
}

.error-message {
    text-align: center;
    color: red;
    font-weight: bold;
    padding-top:5px;
}
.modal-dialog {
    max-width: 40% !important;
     
}
.thHeader {
    background-color: #444;
    color: white;
    width:15%;
}

.thHeader, .tdColumn {
    border: 1px solid #444;
    padding: 15px;
    text-align: left;
    width: 15%;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    font-weight:900;
}
.nav-tabs .nav-link{
    color:#000;
}
.custom-tooltip {
    position: absolute;   
    
    border: 1px solid cornflowerblue;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 1s;
}

    .custom-tooltip.ag-tooltip-hiding {
        opacity: 0;
    }

    .custom-tooltip p {
        margin: 5px;
        white-space: nowrap;
    }

        .custom-tooltip p:first-of-type {
            font-weight: bold;
        }
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-btn:hover {
    background-color: #000 !important;
}
.loader {
    border: .2em solid currentcolor;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: 1s loader linear infinite;
    position: relative;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 8px;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.result-dialog {
    max-width: 500px !important;
}
.result-dialog .form-label {
    flex-basis: 190px;
    min-width: 190px;
    color: #888;
    font-size: 14px;
}
.result-dialog .value {
    position: relative;
    padding-left: 10px;
    font-size: 14px;
    word-break: break-all;
}
.result-dialog .value:after {
    content: ':';
    position: absolute;
    left: 0;
    color: #888;
}

.select2-default {
    width: 120px;
}

h5.Scretch_pad_heading {
    color: #fff;
    background: #36A635;
    padding: 12px 0px;
    font-size: 32px;
}

h5.Scretch_pad_heading {
    background: #36A635;
    padding: 10px;
    color: #fff;
}

.Scretch_pad_row {
    height: calc(100% - 60px);
}

.api_selection h3 {
    background: #36A635;
    color: #fff;
    font-size: 16px;
    padding: 4px;
    text-align: center;
    margin-bottom: 10px;
}

.required-parameters h3 {
    background: #36A635;
    color: #fff;
    font-size: 16px;
    padding: 4px;
    text-align: center;
    margin-bottom: 10px;
}

.optional-parameters h3 {
    background: #36A635;
    color: #fff;
    font-size: 16px;
    padding: 4px;
    text-align: center;
    margin-top: 10px;
}

.submit_button button {
    border: 1px solid #ddd;
    padding: 2px 8px;
    font-size: 12px;
    margin-bottom: 6px;
}

.response_column {
    background: #fff;
    padding: 8px;
    height: 100%;
}


.full-row h3 {
    background: #36A635;
    color: #fff;
    font-size: 20px;
    padding: 6px 0px;
    text-align: center;
}

.full-row {
    border: 1px solid #aaa;
}

.input_date input {
    width: 68px;
}

.select_dateTime {
    margin-right: 41px;
}

    .select_dateTime input {
        margin: 0px;
    }

        .select_dateTime input:first-child {
            margin-right: 8px !important;
        }
.form-group-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.form-group-row .col-label {
    color: #888;
    flex-basis: 160px;
    min-width: 160px;
    font-size: 14px;
}
.form-group-row .column-box {
    display:flex;
    align-items: center;
    grid-gap: 8px;
}
.form-group-row .column-box .icon {
    position: static !important;
    transform: none !important;
}
.form-group-row .col-input {
    width: 100%;
    position: relative;
}
.form-group-row .col-input .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0px, -50%);
}
.form-group-row .col-input .select2-default {
    width: 100%;
}
.form-group-row .col-input .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}
.form-group-row .col-input .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}
.form-group-row .col-input .select2-container .select2-selection--single {
    height: 40px !important;
}
.response_column .tab-content {
    height: calc(100% - 60px);
}

.xtb {
    display: table;
    font-family: monospace;
}

.xtc {
    display: table-cell;
}

.xmt {
    color: #0000CC;
    display: inline;
}

.xel {
    color: red;
    display: inline;
}

.xdt {
    color: #000000;
    display: inline;
}

.xat {
    color: #FF0000;
    display: inline;
}
.select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}
.font-10 {
    font-size: 10px;
}
.setting-submit-btn:disabled {
    color: #fff;
    background-color: #36A635;
    border-color: #36A635;
}
.toggle-switch input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.toggle-switch label {
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    height: 20px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

    .toggle-switch label:after {
        content: '';
        position: absolute;
        top: 2px;
        left: 3px;
        width: 16px;
        height: 15px;
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
    }

.toggle-switch input:checked + label {
    background: #36a635;
}

    .toggle-switch input:checked + label:after {
        left: calc(100% - 3px);
        transform: translateX(-100%);
    }
.Scretch_pad .inner_selection .api_selection .form-group-row .col-label,
.Scretch_pad .inner_selection .user-info .form-group-row .col-label {
    flex-basis: 100px;
    min-width: 100px;
}
.select2-results__option {
    font-size: 14px;
}

/*dashboard page design */

.dashboard .row {
    margin-right: -12px !important;
    margin-left: -12px !important;
}

.dashboard .col-md-4, .col-lg-3 {
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.dashboard-card {
    padding: 20px 24px;
    box-shadow: 0px 4px 40px 0px #00000012;
    background-color: #FFFFFF;
    border-radius: 10px;
}


    .dashboard-card .icon-box {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-card .bg-light-orange {
        background-color: #FFF1D6;
    }

    .dashboard-card .bg-light-green {
        background-color: #E1F7DE;
    }

    .dashboard-card .bg-light-blue {
        background-color: #CFF6FF;
    }

    .dashboard-card .bg-light-green-2 {
        background-color: #D7F4E2;
    }

    .dashboard-card .header-heading {
        font-size: 24px;
        font-weight: 600;
        color: #252B37;
    }

    .dashboard-card .header-section {
        padding-bottom: 24px;
        border-bottom: 1px solid #DDDDDD;
        gap: 10px;
    }

    .dashboard-card .dashboard-list .list-header {
        display: grid;
        grid-template-columns: 41% 24% 28%;
        gap: 12px;
    }

    .dashboard-card .dashboard-list .list-data {
        display: grid;
        grid-template-columns: 41% 24% 28%;
        gap: 12px;
        margin-top: 16px;
    }

    .dashboard-card .dashboard-list .list-header-text {
        font-size: 14px;
        color: #797979;
        font-weight: 400;
    }

    .dashboard-card .dashboard-list .list-data-text {
        font-size: 14px;
        color: #252B37;
        font-weight: 400;
    }

    .dashboard-card .dashboard-list .font-500 {
        font-weight: 500;
    }

.dashboard-section .dashboard-section-list {
    display: grid;
    grid-template-columns: 42% 17% 16% 19%;
    gap: 10px;
    gap: 10px;
    margin-top: 16px;
}

.dashboard-section .dashboard-section-list-heading {
    font-size: 14px;
    color: #717680;
    font-weight: 400;
}

.dashboard-section .dashboard-section-list-value {
    font-size: 14px;
    font-weight: 400;
    color: #252B37;
    word-wrap: break-word;
}

.dashboard-section .dashboard-section-date {
    font-size: 10px;
    color: #A4A7AE;
}

.dashboard-section h4 {
    font-size: 20px;
    color: #1A1E28;
    font-weight: 600;
}

.dashboard-section .form-control {
    height: 34px;
    padding: 2px 12px;
    focus: none !important;
}

.dashboard-section .status-baghe {
    font-size: 12px;
    line-height: 1;
    padding: 3px 6px;
    color: #000000;
    border-radius: 4px;
    height: fit-content;
    width: fit-content;
}

.dashboard-section .status-pending {
    background-color: #FFF4B6;
}

.dashboard-section .status-progress {
    background-color: #B6D1FF;
}

.dashboard-section .status-completed {
    background-color: #D3FFB6;
}

.dashboard-section .client-box {
    border: 1px solid #E9E9E9;
    padding: 14px;
    border-radius: 6px;
    margin-top: 16px;
}

    .dashboard-section .client-box .Client-number {
        font-size: 16px;
        color: #252B37;
        margin-right: 12px;
        font-weight: 600;
    }

    .dashboard-section .client-box .signed-text {
        font-size: 16px;
        color: #717680;
        margin-right: 12px;
    }

    .dashboard-section .client-box .product-type svg {
        color: #252B37;
    }

    .dashboard-section .client-box .date-time-text {
        font-size: 12px;
        color: #A4A7AE;
    }

    .dashboard-section .client-box .account-heading {
        font-size: 12px;
        color: #414651;
        margin-right: 8px;
    }

        .dashboard-section .client-box .account-heading svg {
            margin-right: 4px;
        }

    .dashboard-section .client-box .amount-text {
        color: #3B6EFF;
        font-size: 16px;
        font-weight: 500;
    }

    .dashboard-section .client-box .last-amount {
        color: #7B7B7B;
        font-size: 12px;
        font-weight: 500;
    }

.nightly-tasks-scroll {
    height: 490px;
    overflow-y: auto;
}

#signUpActivitiesData, #cancellationActivitiesData {
    height: 520px;
    overflow: auto;
}


.abc {
    height: 580px !important;
}