@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans.eot');
    src: url('../fonts/OpenSans.woff') format('woff'), url('../fonts/OpenSans.ttf') format('truetype'), url('../fonts/OpenSans.eot?#iefix') format('embedded-opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans-Bold.woff') format('woff'), url('../fonts/OpenSans-Bold.ttf') format('truetype'), url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.eot');
    src: url('../fonts/OpenSans-Italic.woff') format('woff'), url('../fonts/OpenSans-Italic.ttf') format('truetype'), url('../fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Semibold.eot');
    src: url('../fonts/OpenSans-Semibold.woff') format('woff'), url('../fonts/OpenSans-Semibold.ttf') format('truetype'), url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'oswald_regularregular';
    src: url('../fonts/oswald-regular-webfont.eot');
    src: url('../fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/oswald-regular-webfont.woff') format('woff'), url('../fonts/oswald-regular-webfont.ttf') format('truetype'), url('../fonts/oswald-regular-webfont.svg#oswald_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* webkit custom scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #e8e8e8;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #666666bd;
}

    ::-webkit-scrollbar-thumb:window-inactive {
        background: #1b577678;
    }

html, body {
    width: 100%;
    height: 100%;
    display: inline-block;
    font-size:14px;
}

html, body, .fluid-container, .main-body {
    height: 100%;
    font-weight: 400;
    background-attachment: fixed;
}

body {
    font-family: -apple-system, SkienMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    font-weight: 400;
    background-attachment: fixed;
    font-size: 0.9rem;
    line-height: 1.5;
    background-color: #fff;
    overflow-x: hidden;
    text-shadow: 0 0px 0px #292929;
}

    body a {
        transition: 0.5s all ease;
        -webkit-transition: 0.5s all ease;
        -moz-transition: 0.5s all ease;
        -o-transition: 0.5s all ease;
        text-decoration: none;
    }

        body a:hover {
            text-decoration: none;
        }


    .gradient, body > .sidebar-left .nav-link.active, body > .container > .sidebar-left .nav-link.active, .dropdown-item:focus, .dropdown-item:hover, .media-list > .media:hover, .media-list > .media.active, .search-list > .media:hover, .member-list .media:hover, .message-container div .media:hover {
        background: #2ec7cb;
        background: -moz-linear-gradient(left, #2ec7cb 0%, #6c8bef 100%);
        background: -webkit-linear-gradient(left, #2ec7cb 0%, #6c8bef 100%);
        background: linear-gradient(to right, #2ec7cb 0%, #6c8bef 100%);
        color: white;
    }

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}
/*global styles starts*/

h4, h5, h6,
h1, h2, h3 {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

ul, label {
    margin: 0;
    padding: 0;
}

ul, ol {
    margin: 0;
}

.dispalynone {
    display: none;
}

.displaylineBlock {
    display: inline-block;
}

.alignVertical {
    vertical-align: middle;
}

.displayBlock {
    display: block;
}

.align-left {
    float: left;
}

.floatNone {
    float: none !important;
}

.align-right {
    float: right;
}

.clear {
    clear: both;
}

.fullwidth {
    width: 100% !important;
}

.fullheight {
    height: 100%;
}

.noOverflow {
    overflow: inherit !important;
}

.overflowHidden {
    overflow: hidden;
}

.overflowAuto {
    overflow: auto;
}

.overflowY {
    overflow-y: auto
}

.textleft {
    text-align: left;
}

.Layout_ar .textleft {
    text-align: right;
}

.textright {
    text-align: right;
}

.Layout_ar .textright {
    text-align: left;
}

.textcenter {
    text-align: center !important;
}

.cursor {
    cursor: pointer;
}
.vd_input-wrapper input {
    /* padding-top: 2px; */
    background-color: #F3F6F9;
    border-color: #F3F6F9;
    padding: 1.25rem !important;
}
.loginpage .button-orange {
    background-color: #7e7e7e;
    color: #FFFFFF;
    background-color: #6993FF;
    border-color: #6993FF;
    border-radius: 0.42rem;
}
.button-orange:hover, .button-orange.active {
    background-color: #4A7DFF;
    border-color: #4A7DFF;
}
    .whiteBg, .whitebg {
    background: #fff !important;
}

.noBorder {
    border: none !important;
}

.noBorderRadius {
    border-radius: 0 !important;
}

.relativePos {
    position: relative;
}

.absolutePos {
    position: absolute;
}

.noPadding {
    padding: 0 !important;
}

.noPaddingLeft {
    padding-left: 0 !important;
}

.noPaddingRight {
    padding-right: 0 !important;
}

.noPaddingTop {
    padding-top: 0 !important;
}

.noPaddingBtm {
    padding-bottom: 0 !important;
}

.displayFlex {
    display: flex !important;
}

.flexColumn {
    flex-direction: column;
}

.flexAuto {
    flex: auto;
}

.flexOne {
    flex: 1;
}

.flexZero {
    flex: 0;
}

.cursorPointer {
    cursor: pointer;
}

.alignCenter, .alignItemCenter {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-spacebetween {
    justify-content: space-between;
}

.alignStart, .justify-start {
    align-items: flex-start;
}

.justify-end {
    justify-content: flex-end;
}


.flexWrap {
    flex-wrap: wrap;
}

.flexNoWrap {
    flex-wrap: nowrap;
}

.flex-25 {
    flex: 0 0 25px;
}

.flex-30 {
    flex: 0 0 30px;
}

.flex-50 {
    flex: 0 0 50px;
}

.flex-60 {
    flex: 0 0 60px;
}

.flex-74 {
    flex: 0 0 74px;
}

.flex-80 {
    flex: 0 0 80px;
}

.flex-100 {
    flex: 0 0 100px;
}

.flex-140 {
    flex: 0 0 140px;
}
.flex-25p { 
    flex:0 0 25%;
}
.flex-33p {
    flex: 0 0 33.33%;
}

.flex-50p {
    flex: 0 0 50%;
}

.flex-66p {
    flex: 0 0 66.66%;
}

.w100 {
    width: 100% !important;
}


.noMargin {
    margin: 0 !important;
}

.noMarginLeft {
    margin-left: 0 !important;
}

.noMarginRight {
    margin-right: 0 !important;
}

.noMarginTop {
    margin-top: 0 !important;
}

.noMarginBtm {
    margin-bottom: 0 !important;
}

.marginTop5 {
    margin-top: 5px !important;
}

.marginBtm5 {
    margin-bottom: 5px !important;
}

.marginLeft5 {
    margin-left: 5px !important;
}

.marginRight5 {
    margin-right: 5px !important;
}

.marginTop10 {
    margin-top: 10px !important;
}

.marginBtm10 {
    margin-bottom: 10px !important;
}

.marginRight10 {
    margin-right: 10px !important;
}

.marginLeft10 {
    margin-left: 10px !important;
}
.pad3 { 
    padding:3px !important
}
.pl-3 {
    padding-left:3px !important;
}
.pr-3 {
    padding-right:3px !important
}
.pb-3 {
    padding-bottom:3px !important;
}
.pt-3 {
    padding-top:3px !important;
}

.pad5 {
    padding: 5px !important;
}

.padtop5, .paddingtop5 {
    padding-top: 5px !important;
}

.padLeft5 {
    padding-left: 5px !important;
}

.padRight5 {
    padding-right: 5px !important;
}

.padbtm5, .paddingbtm5 {
    padding-bottom: 5px !important;
}

.padbtm2 {
    padding-bottom: 2px !important;
}

.padbtm15 {
    padding-bottom: 15px !important;
}

.pad10 {
    padding: 10px !important;
}

.padtop10 {
    padding-top: 10px !important;
}

.padLeft10 {
    padding-left: 10px !important;
}

.padRight10 {
    padding-right: 10px !important;
}
.pr-40 {
    padding-right:40px;
}

.padbtm10, .paddingbtm10 {
    padding-bottom: 10px !important;
}

.pad15 {
    padding: 15px !important;
}

.padLeft20 {
    padding-left: 20px !important;
}

.padbtm30 {
    padding-bottom: 30px !important;
}

.padbtm34 {
    padding-bottom: 34px !important;
}

.padbtm48 {
    padding-bottom: 48px !important;
}

.padLeft15 {
    padding-left: 15px !important;
}

.padtop100 {
    padding-top: 100px !important;
}

.smallText {
    font-size: 14px !important;
}

.fontnormal {
    font-weight: normal !important;
}

.font-bold {
    font-weight: bold;
}

.darkGreyBg {
    background: #6d6d6d !important;
}

.darkGrey {
    color: #6d6d6d !important;
}

.lightGreyBg {
    background: #c3c3c3 !important;
}

.lightGrey {
    color: #c3c3c3 !important;
}

.borderE4 {
    border: 1px solid #e4e4e4;
}

.borderBtmE4 {
    border-bottom: 1px solid #e4e4e4;
}

.borderRadius4 {
    border-radius: 4px !important;
}

.borderRadius12 {
    border-radius: 12px !important;
}

.fieldColumn .controls {
    width: 320px;
    padding: 0 20px 0 0;
}

.grayColor {
    color: #909090;
}

.displayInlineBlock {
    display: inline-block;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.text-right {
    text-align: right !important;
}

.fullsizeContainer {
    width: 100%;
    height: 100%;
}

.noBorderLeft {
    border-left: none !important;
}

.noBorderRight {
    border-right: none !important;
}

.noBorderTop {
    border-top: none !important;
}

.noBorderBottom {
    border-bottom: none !important;
}

.fontbold {
    font-weight: 600;
}

.fontbolder {
    font-weight: bold;
}

.mediumgrey {
    background: #d6d6d6;
}

.mediumGreyColor {
    color: #d6d6d6;
}

.boxShadow {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.fontSize12 {
    font-size: 12px !important;
}

.fontSize13 {
    font-size: 13px !important;
}

.fontSize14 {
    font-size: 14px !important;
}

.fontSize15 {
    font-size: 15px !important;
}

.fontSize18 {
    font-size: 18px !important;
}

.fontSize20 {
    font-size:20px !important;
}

.fontSize22 {
    font-size: 22px !important;
}

.fontSize40 {
    font-size: 40px !important;
}
.h-100-33 {
    height: calc( 100% - 33px);
}

.h-100-50 {
    height: calc(100% - 50px);
}

.h-100-60 {
    height: calc(100% - 60px);
}
.colorBlue {
    color: #1b84e2 !important;
}
.bgBlue {
    background: #1b84e2 !important;
}

.colorGreen {
    color: #5db75d !important;
}
.bgGreen {
    background: #5db75d !important;
}
.colorYellow {
    color: #efad4d !important;
}

.bgYellow {
    background: #efad4d !important;
}

.colorMagento {
    color: #da5350 !important;
}

.bgMagento {
    background: #da5350 !important;
}

.circle-chart__circle {
    stroke: #5db75d;
}

.mh-210 {
    min-height: 210px !important;
}
 
.mh-225 { min-height:225px !important; }

/*global styles ends*/
.header {
    width: 100%;
    height: 60px;
    background-color: #fbfbfb;
    z-index: 2003;
    margin: 0;
    position: fixed;
    box-sizing: border-box;
    padding: 0 10px 0 0;
    box-shadow: 0 -1px 3px rgba(0,0,0,.12), 0 4px 4px rgba(0,0,0,.24);
    border-bottom: 0px solid #e1e1e1;
    top: 0;
}

.leftheader {
    float: left;
    margin: 8px 0;
}

.rightheader {
    float: right;
    margin: 10px 0;
    position: relative;
    min-height: 40px;
}

.leftnaviconsmall {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 0 0 0 10px;
}

.leftnaviconfull {
    float: left;
    cursor: pointer;
    padding: 8px 4px;
    margin: 16px 14px;
    width: 27px;
    height: 28px;
}

    .leftnaviconfull span {
        width: 100%;
        height: 2px;
        float: left;
        background: #666;
        margin: 0 0 4px;
    }

.vendorscrnheader {
    color: #dfdfe1;
    font-size: 22px;
    font-weight: bold;
    display: inline-block;
    line-height: normal;
    padding: 7px 0 0;
    text-align: center;
    vertical-align: middle;
    width: auto;
}

    .vendorscrnheader img {
        display: block;
        margin: 0;
        max-width: 100%;
    }

    .vendorscrnheader span.logo-caption {
        color: white;
        float: left;
        margin: 4px -4px 0;
        font-size: 30px;
        letter-spacing: -1px;
    }

.logo-caption > span {
    font-weight: 900;
    color: #f20612;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari 5+ ONLY */
    ::i-block-chrome, .logo-caption {
        padding-bottom: 2px !important;
    }
}

.vendorscrnheader a {
    color: #333;
    float: left;
    text-decoration: none;
    width: 100%;
}

.vendorscrnheader span.subtitle {
    background: #20263e;
    border: medium none;
    clear: both;
    color: #999;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    margin: 0 auto;
    padding: 0 5px;
    position: relative;
    text-transform: none;
    top: -8px;
    width: 130px;
}

.caption_wrapper {
    float: left;
    text-align: center;
    vertical-align: top;
    width: auto;
    padding: 0;
}

.message {
    display: inline-block;
    vertical-align: middle;
    padding: 0px 20px 0px 0px;
    position: relative;
    cursor: pointer;
    margin: 16px 0px 0px;
}

.message .fa-envelope-o {
    color: #666;
    font-size: 23px;
    margin: 1px 0 0;
}

.messagecount {
    background-color: #F44336;
    border-radius: 10px;
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    top: -13px;
    left: -7px;
}
.myprofile-dropdown ul li.userAccountInfo {
    display: none;
}

.profilepicname {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    color: #333;
    font-size: 14px;
    padding: 0 65px 0 0;
    position: relative;
    height: 100%;
}

.profile-pic {
    width: 32px;
    height: 32px;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -16px;
}

    .profile-pic img {
        max-width: 100%;
        border-radius: 50%;
        background: #ccc;
        display: block;
    }

.profilepicname span {
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
}

    .profilepicname span.companyname {
        font-size: 13px;
        color: #777;
    }

.profilepicname img.hidedrpdwn {
    position: absolute;
    right: 3px;
    top: 50%;
    margin: -6px 0 0;
}

.myprofile-dropdown {
    display: none;
    position: absolute;
    background-color: white;
    top: 58px;
    padding: 5px 15px 0;
    right: 0;
    border-top: 4px solid #777;
    width: 190px;
    text-shadow: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

    .myprofile-dropdown ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .myprofile-dropdown ul li {
            padding: 5px 0;
            color: #337ab7;
        }

            .myprofile-dropdown ul li a div {
                display: inline-block;
                font-size: 13px;
            }

            .myprofile-dropdown ul li a {
                color: black;
                display: block;
            }

        .myprofile-dropdown ul.licenseType {
            margin: 0 -16px -1px
        }

            .myprofile-dropdown ul.licenseType li {
                padding: 6px 10px 8px;
                font-size: 11px;
                background: linear-gradient(to bottom, #828282 0%,#3d3d3d 100%);
                color: white;
                cursor: default;
                font-weight: 500;
                text-align: center;
                border-bottom: 1px solid #e1e1e1;
                border-top: 1px solid #e1e1e1;
                text-shadow: 0 1px 2px #000;
                margin: 0;
            }

span.licenceLabel {
    font-weight: 500;
    font-size: 14px;
    margin: 0;
}

span.licenceCaption, span.licenceCaption a {
    color: #fff !important;
    margin: 0;
    line-height: 13px;
}

    span.licenceCaption a {
        text-decoration: underline;
    }

.myprofile-icon {
    font-size: 14px !important;
    margin-right: 8px;
    display: inline-block;
    width: 10px;
}

.myprofile-arrow {
    position: absolute;
    top: -23px;
    color: #777;
    right: 9px;
}

    .myprofile-arrow i {
        font-size: 28px;
    }

.profilepicname a {
    text-decoration: none;
    color: #bab9b6;
}

.profilename {
    padding: 12px 0 0;
}

.myprofile-dropdown ul li.listTitle {
    border-bottom: 1px solid #ddd;
}

.myprofile-dropdown ul li form a {
    display: inline-block;
    margin: 0 5px 8px 0;
    position: relative;
}

    .myprofile-dropdown ul li form a label {
        color: black;
        cursor: pointer;
        padding: 0 0 0 20px;
        font-size: 13px;
    }

    .myprofile-dropdown ul li form a input {
        position: absolute;
        top: 0;
        opacity: 0;
        left: 0;
    }

.myprofile-dropdown ul li.chooseOptions span.inputIcon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid black;
    position: absolute;
    left: 0;
    top: 2px;
}

.myprofile-dropdown ul li.chooseOptions input[type="radio"]:checked + span.inputIcon:after {
    content: "";
    width: 8px;
    height: 8px;
    background: #3b3b3b;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
}

.mymessage {
    text-shadow: none;
    background-color: white;
    border-top: medium none;
    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
    display: none;
    padding: 0;
    position: absolute;
    right: -9px;
    top: 42px;
    width: 231px;
}

    .mymessage ul {
        list-style: none;
        padding: 10px 6px;
        margin: 0;
        font-size: 13px;
        border-top: 1px solid #e1e1e1;
    }

        .mymessage ul li {
            border-top: 1px solid #6591eb;
            padding: 5px;
        }

            .mymessage ul li a {
                text-decoration: none;
            }

            .mymessage ul li:first-child {
                border: none;
            }

            .mymessage ul li a div {
                overflow: hidden;
            }

.mymessage-icon {
    margin-right: 10px;
    float: left;
}

.mymessage span {
    font-size: 11px;
    color: #e2e2e2;
}

.mymessage-arrow {
    position: absolute;
    top: -19px;
    color: #cccccc;
    right: 32px;
}

    .mymessage-arrow i {
        font-size: 28px;
    }

.mymessageheader {
    background-color: #ccc;
    color: black;
    margin: 0 !important;
    padding: 7px 10px 7px 15px !important;
    font-size: 14px;
}

.settingicon {
    display: inline-block;
    vertical-align: middle;
    padding: 0px 10px 0px 0px;
    margin: 16px 0 0;
    cursor: pointer;
}

.main-body {
    width: 100%;
    padding-top: 60px;
    padding-right: 12px;
    display: table;
    table-layout: fixed;
    height: 100%; /*should not give height auto*/
}

#Load.fa-circle-o-notch {
    margin: 4em 0 0;
    position: relative;
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px;
}

    #Load.fa-circle-o-notch:before {
        position: absolute;
        width: 32px;
        height: 32px;
        background: url("../images/preloader.GIF") no-repeat;
        left: 0;
        top: 0;
        content: "";
    }

    #Load.fa-circle-o-notch.fa-pulse {
        animation: none;
    }

.DashbaordWindow .main-page > div {
    display: inline-block;
    vertical-align: top;
    min-height: 125px;
    color: #666;
    padding: 2px;
    margin-top: 4px;
}

/*.DashbaordWindow .main-page > div > div {
    //border: 1px solid #252d47;
    padding: 0;
    box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 4px 4px rgba(0,0,0,.24);
    width: 100%;
    display: inline-block;
    min-height: 125px;
}*/
.relativePosition {
    position: relative !important;
    width: 100% !important;
}

.smartView.DashbaordWindow {
    height: calc(100% - 58px);
}

.DashbaordWindow .main-page div.leftnav-tree-blk {
    width: 300px;
    position: absolute;
    bottom: 0;
    top: 0px;
    left: 0;
    box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 4px 4px rgba(0,0,0,.24);
}

.smartHeader {
    width: 100%;
    display: inline-block;
    background: #e8e8e8;
    padding: 8px 32px 8px 10px;
    margin: 0 0 5px;
    color: black;
}

    .smartHeader .closebtn {
        position: absolute;
        background: #e8e8e8;
        right: 8px;
        top: 8px;
        font-size: 15px;
        width: 22px;
        height: 22px;
        padding: 3px;
    }

.DashbaordWindow .main-page div.leftnav-tree-blk .leftnav-tree-filter {
    position: absolute;
    overflow-y: auto;
    top: 40px;
    bottom: 0;
    padding: 0;
    left: 0;
    right: 0px;
}


@media (min-width: 0px) and (max-width: 768px) {
    .DashbaordWindow .main-page > div.col-span-25 {
        width: 98%;
    }

    .DashbaordWindow .main-page > div.col-span-50 {
        width: 98%;
    }

    .DashbaordWindow .main-page > div.col-span-75 {
        width: 98%;
    }

    .DashbaordWindow .main-page > div.col-span-100 {
        width: 98%;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .DashbaordWindow .main-page > div.col-span-25 {
        width: 98%;
    }

    .DashbaordWindow .main-page > div.col-span-50 {
        width: 98%;
    }

    .DashbaordWindow .main-page > div.col-span-75 {
        width: 98%;
    }

    .DashbaordWindow .main-page > div.col-span-100 {
        width: 98%;
    }
}

@media (min-width: 992px) {
    .DashbaordWindow .main-page > div.col-span-25 {
        width: 24.5%;
    }

    .DashbaordWindow .main-page > div.col-span-50 {
        width: 49%;
    }

    .DashbaordWindow .main-page > div.col-span-75 {
        width: 73.5%;
    }

    .DashbaordWindow .main-page > div.col-span-100 {
        width: 98%;
    }
}


    /****left menu styles starts****/

    .bodyleftnav {
        background: white;
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        padding-bottom: 60px;
        display: table-cell;
        position: relative;
        z-index: 2002;
        vertical-align: top;
        background: white;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        border-right: 1px solid #e1e1e1;
        box-shadow: 0 -1px 3px rgba(0,0,0,.12), -1px 4px 8px rgba(0,0,0,.24);
    }

    .searchmenu {
        display: inline-block;
        position: fixed;
        color: #666;
        padding: 5px 4px;
        transition: width 0.55s;
        -webkit-transition: width 0.55s;
        width: 227px;
        z-index: 2;
        background: #ffffff;
        border-bottom: 1px solid #e1e1e1;
        border-top: 1px solid #e1e1e1;
    }

        .searchmenu input[type="text"] {
            border: 1px solid #e1e1e1;
            border-radius: 3px;
            width: 100%;
            padding: 6px 30px 6px 10px;
            font-size: 13px;
        }

            .searchmenu input[type="text"]:focus {
                box-shadow: 0 -1px 3px rgba(0,0,0,.12), 0 4px 4px rgba(0,0,0,.24);
                border: 1px solid #ccc;
            }

        .searchmenu span {
            position: absolute;
            right: 6px;
            top: 4px;
            width: 26px;
            padding: 6px 0;
            color: #648ebb;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
        }

            .searchmenu span:hover {
                color: #929bc7;
            }

    .bodyleftnav.inactive .searchmenu {
        width: 49px;
    }

        .bodyleftnav.inactive .searchmenu.expand {
            width: 227px;
        }

    .bodyleftnav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid #e1e1e1;
    }

    .bodyleftnav > ul {
        padding-top: 40px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow-y: auto;
    }

    .bodyleftnav.inactive > ul {
        overflow-y: inherit;
    }

    .bodyleftnav ul li {
        list-style: none;
        color: #333;
        position: relative;
        margin: 0;
    }

        .bodyleftnav ul li a {
            display: inline-block;
            margin: 0;
            color: #333;
            text-decoration: none;
            padding: 4px 10px;
            outline: medium none;
            cursor: pointer;
            width: 100%;
            border-bottom: 1px solid #eee;
            position: relative;
            transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
        }

            .bodyleftnav ul li a label {
                color: #333;
                cursor: pointer;
                display: block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 100%;
                font-weight: normal;
                font-size: 14px;
            }

    .bodyleftnav.inactive ul li a label {
        display: none;
    }

    .bodyleftnav ul ul {
        display: none;
    }

        .bodyleftnav ul ul li {
            display: inline-block;
            margin: 0;
            background: radial-gradient(ellipse at center, #222940 0%, #10141f 100%);
            width: 100%;
            font-size: 13px;
        }

            .bodyleftnav ul ul li span.lmenu-iconlinks {
                position: absolute;
                right: 0;
                text-align: right;
                padding: 0;
                top: 7px;
            }

                .bodyleftnav ul ul li span.lmenu-iconlinks:before {
                    display: none;
                }

                .bodyleftnav ul ul li span.lmenu-iconlinks i.iconlink {
                    position: relative;
                    z-index: 1;
                    width: 20px;
                    line-height: normal;
                    margin: 0 8px 0 0;
                    text-align: center;
                    font-size: 19px;
                    float: left;
                    color: #666;
                    -webkit-font-smoothing: antialiased;
                    text-rendering: optimizeLegibility;
                    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
                    border-radius: 15px;
                }

            .bodyleftnav ul ul li a {
                padding: 8px 14px;
                background: white;
                border-bottom: 1px solid #e1e1e1 !important;
                color: #333;
            }

                .bodyleftnav ul ul li a span {
                    transition: padding 0.5s ease;
                    -webkit-transition: padding 0.5s ease;
                    position: relative;
                    display: block;
                    padding-right: 45px;
                }

                .bodyleftnav ul ul li a:hover span {
                    transition: padding 0.5s ease;
                    -webkit-transition: padding 0.5s ease;
                    padding-left: 10px;
                }

    .bodyleftnav ul li ul li a span:before {
        font-family: 'FontAwesome';
        content: "\f101";
        font-size: 13px;
        left: -8px;
        color: #999;
        position: relative;
    }

    .bodyleftnav ul li.parent_li > a {
        padding: 4px 22px 4px 10px;
    }

    .bodyleftnav > ul > li > a span {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        align-items: center;
    }

    .bodyleftnav ul > li > a span img {
        display: flex;
        width: 30px;
        height: 30px;
        margin: 0 8px 0 0;
    }

    .bodyleftnav.inactive ul li.parent_li > a {
        padding: 6px 10px;
    }

    .active li.parent_li > a:after, li.submenu > a:after {
        font-family: 'FontAwesome';
        content: "\f105";
        font-size: 22px;
        color: #333;
        position: absolute;
        right: 10px;
        top: 50%;
        height: 22px;
        line-height: normal;
        margin-top: -12px;
    }

    li.submenu > a:after {
        color: #333;
    }

    .active li.parent_li > a.open:after, li.submenu > a.view:after {
        content: "\f107";
    }

    li.parent_li > a.open {
        background: #f5f5f5;
        border-bottom: 1px solid #e1e1e1 !important;
    }

    .bodyleftnav ul li a:hover {
        background: #e8e8e8;
        color: #333;
    }

        .bodyleftnav ul ul li a:hover:after, .bodyleftnav ul li a:hover span:before,
        .bodyleftnav ul ul li a.active:after, .bodyleftnav ul li a.active span:before, .bodyleftnav ul li a.active span {
            color: #666;
        }

    .bodyleftnav a.active, .bodyleftnav a.active.open, .bodyleftnav a.active:hover {
        background: #2ec7cb;
        background: -moz-linear-gradient(left, #2ec7cb 0%, #6c8bef 100%);
        background: -webkit-linear-gradient(left, #2ec7cb 0%, #6c8bef 100%);
        background: linear-gradient(to right, #2ec7cb 0%, #6c8bef 100%);
        border-bottom: 1px solid #e1e1e1 !important;
    }

    .bodyleftnav ul li ul li a.active {
        background: linear-gradient(to right, hsl(174, 82%, 39%) 0%, #6c8bef 100%)
    }

    li.parent_li ul > li a {
        padding-left: 30px;
    }

    li.submenu ul li a {
        padding-left: 42px;
    }

    li.submenu ul li ul li a {
        padding-left: 50px;
    }


    .bodyleftnav.active {
        width: 228px;
        min-width: 228px;
        max-width: 228px;
    }

        .bodyleftnav.active ul ul {
            position: relative;
            width: 100%;
            border-bottom: none;
        }


    .bodyleftnav.inactive ul li.parent_li > ul {
        display: none !important;
        left: 49px;
        position: absolute;
        top: 0;
        width: 220px;
        background: #293744;
        border: 1px solid #e1e1e1;
    }

    .bodyleftnav.inactive ul li.parent_li:hover a { /*background: radial-gradient(ellipse at center, #222940 0%, #10141f 100%);*/
        border-bottom: 0px solid #293744 !important;
    }

    .bodyleftnav.inactive ul li.parent_li:hover > ul {
        display: block !important;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

    .bodyleftnav.inactive ul li.parent_li:last-child:hover > ul {
        top: auto;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        bottom: -1px;
    }

    .bodyleftnav.inactive ul ul {
        border-bottom: none;
    }

    .bodyleftnav.inactive .searchmenu.expand {
        width: 228px;
        background:;
    }


    .submenu a i {
        display: none;
        margin-right: 15px;
    }

    .nosubitem a i {
        float: right;
        display: block;
    }



    /****left menu styles ends****/

    .action-mobile {
        padding-top: 7px;
    }

    .filter-td {
        position: relative;
        width: 12%;
        padding-left: 5px;
    }
    /*.filteroption{float: right;box-shadow: 0 1px 1px 0 #333; background-color: #dd6d17; padding: 6px 12px;border-radius: 5px;cursor: pointer;}
.filteroption:hover{box-shadow: 1px 1px 1px 1px #009344;}*/
    .filteroption span {
        color: #fff !important;
        font-size: 13px !important;
    }

    .filtericon {
        margin-right: 0 !important;
        font-size: 18px !important;
    }

    .filterdropdown {
        background: #fff;
        box-shadow: 0 10px 10px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.23);
        border: 1px solid #e1e1e1;
        position: absolute;
        right: 13px;
        top: 60px;
        width: 400px;
        z-index: 2002;
        height: auto !important;
    }

    .filterwrap {
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
        display: inline-block;
        position: relative;
    }

    .filterdropdown ul {
        list-style: none;
        padding: 0 0 20px;
        margin: 0;
    }

        .filterdropdown ul li.filter-fields {
            border: 1px solid transparent;
            border-bottom: 1px solid #e1e1e1;
            display: inline-block;
            line-height: 1;
            position: relative;
            list-style: outside none none;
            margin: 0;
            padding: 0 6px;
            width: 100%;
        }

            .filterdropdown ul li.filter-fields.filtermodified, span.field-row.filtermodified {
                border: 1px solid transparent;
                border-bottom: 1px solid #FF5722 !important;
            }

                .filterdropdown ul li.filter-fields.filtermodified label, span.field-row.filtermodified label {
                    font-weight: 600;
                    position: relative;
                    transition: all 0.4s ease;
                    -webkit-transition: all 0.4s ease;
                    padding-left: 26px;
                }

                    .filterdropdown ul li.filter-fields.filtermodified label:before, span.field-row.filtermodified label:before {
                        position: absolute;
                        left: 0;
                        top: 7px;
                        font-size: 17px;
                        font-weight: normal;
                        color: #666;
                        content: "\f0a4";
                        font-family: 'fontAwesome';
                        animation: pointanimate 0.7s linear infinite;
                        -o-animation: pointanimate 0.7s linear infinite;
                        -moz-animation: pointanimate 0.7s linear infinite;
                        -webkit-animation: pointanimate 0.7s linear infinite;
                    }

                    span.field-row.filtermodified label:before {
                        top: -3px;
                    }

            .filterdropdown ul li.filter-fields span.reseticon {
                position: absolute;
                right: 0;
                top: 0;
            }

    @keyframes pointanimate {
        0% {
            left: -2px;
        }

        50% {
            left: 3px
        }

        100% {
            left: -2px
        }
    }


    .filterdropdown ul li.last {
        border: none;
        padding: 10px 0;
    }

        .filterdropdown ul li.last span {
            margin: 0 0 0 10px;
        }

    .filterdropdown .filter-items {
        float: left;
        display: none;
        width: 100%;
        padding: 0 0 8px;
    }

        .filterdropdown .filter-items span.clearbtn {
            padding: 5px 0 0;
        }

    .filter-items .select-wrapper, .filter-items .select-wrapper select {
        width: 165px;
    }

    .filter-items.threefields .select-wrapper, .filter-items.threefields .select-wrapper select {
        width: 120px;
    }

    .date-field {
        position: relative;
    }

    .filter-items.threefields .date-field {
        display: inline-block;
        width: 114px;
    }

        .filter-items.threefields .date-field input {
            width: 100%;
        }

    .filter-items.threefields span.input-group-addon1 {
        right: 0;
    }

    .filterdropdown ul li label {
        display: inline-block;
        font-size: 13px;
        font-weight: normal;
        margin-bottom: 0;
        padding: 10px 0;
        width: 100%;
        background: url("../images/selectArrow-green.png") no-repeat 97% center;
    }

    .filterdropdown ul li:hover label, .filterdropdown ul li.active label {
        font-weight: 600;
        cursor: pointer;
    }

    .filterdropdown ul li.filter-modified {
        border-bottom: 1px solid green;
        box-shadow: 0 0 2px 1px #ccc inset;
    }

        .filterdropdown ul li.filter-modified label {
            color: #5cb85c;
            font-weight: bold;
            background: url("../images/selectArrow-green.png") no-repeat 97% center;
        }

    .preload-overlay {
        display: none;
        background: #000;
        height: 100%;
        left: 0;
        opacity: 0.1;
        filter: alpha(opacity=20);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .preloader {
        display: none;
        background: #ffffff;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        box-shadow: 0 -1px 3px rgba(0,0,0,.12), -1px 4px 8px rgba(0,0,0,.24);
        height: 46px;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 7px;
        position: fixed;
        top: 50%;
        width: 46px;
        z-index: 1000;
    }

    .filter-arrow {
        color: #666;
        cursor: pointer;
        font-size: 18px;
        height: 22px;
        margin: 0 5px 0 0;
        text-align: center;
        width: 22px;
    }

        .filter-arrow .fa {
            line-height: 21px;
            float: left;
            width: 100%;
        }

        .filter-arrow.show .fa-caret-up:before {
            content: "\f0d8";
        }

        .filter-arrow .fa-caret-up:before {
            content: "\f0d7";
        }

    .filtename {
        color: #666666;
        float: right;
        font-size: 18px;
        line-height: 1;
        position: relative;
    }

    .filterdropdown ul.select2-results {
        padding: 0 0 0 4px;
        margin: 4px 4px 4px 0;
    }

    .filtename input {
        border: 1px solid #ccc;
        font-size: 13px;
        height: 27px;
        padding: 0 6px;
        width: 180px;
    }

    .filtename .select2-container .select2-choice {
        width: 180px;
        border: 1px solid #ccc !important;
        height: 27px;
        border-radius: 0;
    }

        .filtename .select2-container .select2-choice > .select2-chosen {
            line-height: 25px;
            font-size: 13px;
        }

    .filtename .select2-search input {
        width: 100%;
        margin: 3px 0 0;
    }

    .filtename .select2-results .select2-result-label {
        padding: 6px 7px;
        font-size: 13px;
    }

    .select2-results li {
        min-height: inherit;
    }

    .filtename span.input-group-addon1 {
        position: absolute;
        right: 4px;
        top: 0px;
        font-size: 16px;
        border: none;
        color: #565656;
        cursor: pointer;
        margin-left: 0px;
        padding: 3px 6px;
        border-radius: 0 5px 5px 0;
    }

    span.lang-icon, .translate {
        background: #7e7e7e;
        color: #fff;
        font-size: 14px;
        margin-left: -6px;
        padding: 10px 12px;
        position: absolute;
        top: 0;
        right: 0;
        height: 34px;
    }

    .translate {
        background: url("../images/translate_icon.png") no-repeat center #7e7e7e;
        padding: 5px;
        width: 36px;
        position: absolute;
        right: 0;
        top: 0;
    }

    button.close-filter {
        background: transparent;
        border: medium none;
        float: right;
        height: 20px;
        padding: 0;
        right: 0;
        top: 0;
        width: 22px;
    }

    button.close-pin {
        background: transparent;
        border: medium none;
        float: right;
        height: 22px;
        margin-right: 5px;
        padding: 0;
        right: 0;
        text-align: center;
        top: 0;
        width: 22px;
    }

        button.close-pin i.pin {
            background: url("../images/unpin-grey.png") center no-repeat;
            height: 22px;
            width: 22px;
            display: inline-block;
        }

        button.close-pin.pin i.pin {
            background: url("../images/pin.png") center no-repeat !important;
            height: 22px;
            width: 22px;
        }

    button.filter-settings {
        background: transparent;
        border: none;
        width: 22px;
        height: 22px;
        margin: 0 5px 0 0;
    }

    div.filterdropdown div.filterheader {
        background: #f5f5f5;
        box-sizing: border-box;
        display: inline-block;
        font-size: 15px;
        padding: 9px 15px;
        width: 100%;
        color: #333;
        cursor: move;
        border-bottom: 1px solid #e1e1e1;
    }

    div.filterdropdown.ui-draggable-disabled div.filterheader {
        cursor: default;
    }

    .selectdropdwn {
        position: relative;
    }

        .selectdropdwn select {
            border: 1px solid #F6AF78;
            border-radius: 5px;
            color: #999;
            font-size: 15px;
            height: 30px;
            width: 260px;
            -moz-appearance: none;
        }

    .downarrowicon {
        color: #3c8dbc;
        cursor: pointer;
        font-size: 16px;
        position: absolute;
        right: 14px;
        top: 8px;
    }

    div.filterdropdown div.downarrowicon {
        color: #dd6d17;
    }

    .priceinut {
        width: 60px !important;
    }

    .activedropdown {
        width: 100px;
    }

        .activedropdown select {
            width: 100px;
        }

    .filterlastblk {
        display: inline-block;
        margin-right: 20px;
    }

    .filtersubmitbutton-style {
        background-color: #dd6d17;
        border-radius: 5px;
        color: #666;
        padding: 5px 18px;
        border: medium none;
        font-size: 16px;
        margin-top: 20px;
    }

    .field-row {
        font-size: 13px;
        max-width: 170px;
        min-width: 170px;
    }

        .field-row.field-row-btn {
            max-width: inherit;
            min-width: inherit;
        }

            .field-row.field-row-btn .button-green, .field-row.field-row-btn .button-orange {
                line-height: normal;
                padding: 5px 10px;
                margin: 0 4px 0 0;
                vertical-align: top;
            }

        .field-row select {
            -moz-appearance: none;
            border: 1px solid #aaa;
            padding: 2px;
            width: 100%;
            font-size: 12px;
        }

    .pagenav {
        font-size: 11px;
        color: #555;
        padding: 12px 0 7px;
        font-family: 'Open Sans', sans-serif !important
    }

        .pagenav a {
            color: #3c8dbc;
            text-decoration: none;
        }

        .pagenav span {
            color: #888888;
        }

    .pagenav-leftmargin {
        margin-left: 18px;
    }

    .pageheader {
        color: #666;
        font-size: 16px;
        line-height: normal;
        padding: 8px 20px;
        margin: 0;
        background-color: #fff;
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #e1e1e1;
        position: relative;
    }

        .pageheader > span {
            display: inline-block;
            padding: 3px 0 0;
        }

        .pageheader:before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 45px;
            bottom: 0;
            box-shadow: 0 1px 8px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
        }

        .pageheader .menugroup {
            position: relative;
        }

    .stickytab .pagecontent {
        padding-top: 56px;
    }

    /*.stickytab .summaryheader-blk { margin: 80px 0 0 0; }*/
    .stickytab .summary-panel .summaryheader-blk {
        margin: 55px 0 0 0;
    }

    .summary-panel .pageheadername.sticktotop div {
        margin-top: 0;
    }

    .summaryheader-blk {
        box-shadow: 0 -1px 3px rgba(0,0,0,.12), 0 4px 4px rgba(0,0,0,.24);
        color: #333;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        padding-bottom: 2px;
        margin: 5px 0 0 0;
        background: #fff;
        position: relative;
    }

        .summaryheader-blk span {
            margin-left: 20px;
        }

    .summary-buttons {
        position: absolute;
        right: 20px;
        top: 10px;
    }

        .summary-buttons span {
            float: left;
            margin: 0 0 0 10px;
            cursor: pointer;
            color: #666;
        }

            .summary-buttons span.refresh {
                font-size: 14px;
            }

            .summary-buttons span.remove {
                font-size: 20px;
                line-height: 12px;
                font-weight: bold;
            }

            .summary-buttons span:hover {
                color: #26a6c4;
            }

    .pageheadername {
        color: #666;
        font-size: 16px;
        padding: 5px 15px 5px 20px;
        margin: 0;
        clear: both;
        display: inline-block;
        width: 100%;
        position: relative;
    }

        .pageheadername div:not(.headerFilter,.popup.attachments) {
            display: inline-block;
            margin: 1px;
        }

        .pageheadername div.button-orange {
            margin: 0 0 0 6px;
            height: 30px;
            padding-top: 6px;
        }

        .pageheadername > div:not(.menugroup) {
            padding: 5px 0 0;
            margin: 0;
        }

            .pageheadername > div:not(.menugroup) a {
                top: 2px;
                font-size: 18px;
            }

    .filterMenu {
        font-size: 14px;
        border-left: 1px solid #e1e1e1;
        margin: 0 0 0 6px !important;
        padding: 0 0 0 9px;
        color: #666;
        position: relative;
        cursor: pointer;
        display: inline-block;
    }

        .filterMenu i.fa {
            font-size: 18px;
            position: relative;
            top: 2px;
        }

    .page_title_icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        background: url("../images/page_title_icon.png") no-repeat;
        margin: 0 5px 0 0;
        position: relative;
        vertical-align: middle;
    }

    .headerDescription {
        padding: 6px 0 0 26px;
        color: #adadad;
    }

    .summary-panel .pageheadername div {
        margin-top: -4px;
    }

    .stickdiv.sticktotop {
        position: fixed;
        background: #fff;
        display: inherit;
        z-index: 1002;
        width: 100%;
        padding-bottom: 8px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        top: 60px;
        padding-top: 10px;
    }
    /*.pageheadername div.createprodlink{float: right; font-size: 13px;border:1px solid #dd6d17;padding: 7px 12px;border-radius: 5px;box-shadow: 0 1px 1px 0 #333;cursor: pointer;background: #dd6d17;}
.pageheadername div.createprodlink a{text-decoration: none;color: #666;}
.pageheadername div.createprodlink:hover{box-shadow: 1px 1px 1px 1px #009344;}*/
    /*.pageheadername div.createprodlink i{color: #666;font-size: 18px !important; margin-right:6px;vertical-align: middle; line-height: normal; }
.createprodlink.button-orange { font-size:14px; padding: 6px 12px; margin: -6px 0 0; }*/
    /*.pageheadername .button-orange.alignright, .pageheadername .menu-wrap.alignright { margin-top:-6px !important; }*/

    .pageheader div.viewprodlink {
        margin-top: -7px;
        float: right;
        font-size: 16px;
        border: 1px solid #dd6d17;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 1px 1px 0 #333;
        cursor: pointer;
        background: #fff;
    }

        .pageheader div.viewprodlink a {
            text-decoration: none;
            color: #2c3e50;
        }

        .pageheader div.viewprodlink:hover {
            box-shadow: 1px 1px 1px 1px #dd6d17;
        }

        .pageheader div.viewprodlink i {
            color: #dd6d17;
            font-size: 22px;
            margin-right: 10px;
        }

    .headerFilter {
        width: 230px;
        position: absolute;
        right: 10px;
        background: white;
        box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
        top: 154%;
        border: 1px solid #e1e1e1;
        display: none;
        z-index: 100;
        font-size: 14px;
        padding: 6px;
        z-index: 2002;
    }

        .headerFilter:after {
            position: absolute;
            width: 14px;
            height: 14px;
            top: -8px;
            background: white;
            transform: rotate(135deg);
            right: 14px;
            border-left: 1px solid #e1e1e1;
            border-bottom: 1px solid #e1e1e1;
            content: "";
        }

        .headerFilter ul {
            display: inline-block;
            padding: 0;
            list-style: none;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            max-height: 140px;
            overflow-x: hidden;
        }

            .headerFilter ul li {
                display: inline-block;
                color: #666;
                font-weight: normal;
                padding: 4px;
                user-select: none;
                cursor: pointer;
                text-align: left;
                width: 100%;
                border: none;
            }

    ul.summaryheader {
        margin: 12px 0 0;
        padding: 0 66px 0 25px;
        min-height: 78px;
    }

        ul.summaryheader li {
            background: linear-gradient(to right, #aaa 0%, #777 100%);
            border-radius: 8px;
            border-bottom: 1px solid #e1e1e1;
            box-shadow: 0 -1px 3px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.24);
            color: white;
            display: inline-block;
            list-style: outside none none;
            padding: 10px 14px 10px 60px;
            position: relative;
            margin: 0 10px 12px 0;
            min-width: 126px;
        }

            ul.summaryheader li label {
                color: white;
                display: block;
                font-size: 13px;
                font-weight: 600;
                margin: 0;
                text-align: left;
                width: 100%;
            }

            ul.summaryheader li span.quick-icon {
                /*background: #585858; 
    border-radius: 4px;  
    box-shadow: 0 1px 2px #570901 inset;*/
                height: 38px;
                left: 10px;
                margin: -19px 0 0;
                padding: 8px;
                position: absolute;
                text-align: center;
                top: 50%;
                width: 38px;
            }

            ul.summaryheader li span.value {
                font-size: 17px;
                font-weight: bold;
                line-height: 28px;
                margin: 0;
                text-align: left;
                width: 100%;
            }
    /*.summaryheader li label { color: #333;  font-size: 11px;  font-weight: bold; }
.summaryheader li{list-style: none;margin-right: 40px;display: inline-block;}
.summaryheader li:first-child, .summaryheader li:nth-child(4), .summaryheader li:nth-child(5) { text-align: center; }
.summaryheader li span{margin-left: 0px; font-weight:bold; color: #dd6d17; display: block;font-size: 20px; font-family: 'Open Sans', sans-serif;}*/
    .pageheadername .viewsummary {
        float: right;
        text-align: center;
        line-height: 17px;
        cursor: pointer;
        position: relative;
        color: #666;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        background: #7e7e7e;
        width: 32px;
        height: 30px;
        margin: 0 0 0 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }

        .pageheadername .viewsummary:before {
            position: absolute;
            top: 0;
            padding: 6px 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #fff;
            font-size: 11px;
            font-family: 'fontAwesome';
            content: "\f078";
        }

        .pageheadername .viewsummary.active:before {
            content: "\f077";
        }

    .pageheadername a {
        position: relative;
        color: #666;
    }

    .viewsummary:hover {
        background-color: #484848;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
    }

    .sticktotop .viewsummary {
        display: none;
    }

    .summary-panel .pageheadername .viewsummary {
        margin-right: 10px;
    }

    .selectable-labels {
        transition: all 0.3s ease-in-out 0s;
        float: left;
        width: 98.5%;
        background: #f5f5f5;
        border-bottom: 1px solid #e5e5e5;
        height: 70px;
        min-height: 70px;
    }

    .selected-labels {
        width: 95%;
        float: left;
        margin: 1em 0 0;
        min-height: 80px;
        height: 80px;
        overflow: hidden;
    }

        .selected-labels ul {
            margin: 0 1em 0 -0.2%;
            float: left;
            clear: both;
        }

            .selected-labels ul li {
                float: none;
                margin: 0.5em 2em 1.5em 2em;
                width: auto;
                /* border-bottom: 2px solid #ccc; */
                display: inline-block !important;
                vertical-align: top;
            }

    article {
        display: block;
    }

    .pagecontent {
        padding: 8px;
        width: 100%;
        height: 100%;
    }

    .stickyheadertab .pagecontent {
        padding-top: 76px;
    }

    #CreatePointOfSale .menutab {
        margin-top: 22px;
    }

    #CreatePointOfSale.stickyheadertab .menutab {
        margin-top: 116px;
    }

    #CreatePointOfSale.stickyheadertab .pagecontent, #EditPointOfSale.stickyheadertab .pagecontent {
        padding-top: 8px;
    }

    .pagecontent-inner {
        /*    display: table;
*/ width: 100%;
    }

    .pagecontent-column {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        position: relative;
    }

        .pagecontent-column.columnleft {
            width: 100%;
            margin: 8px 0 0;
        }

    .recentadded {
        background-color: #555;
        width: 40%;
        height: 200px;
        display: inline-block;
    }

    .prod-tab-wrap {
        display: table;
        width: 100%;
        height: 100%;
        table-layout: fixed;
        min-height: 500px;
    }

    .producttab {
        transition: all 0.1s ease;
        -webkit-transition: all 0.1s ease;
        padding: 8px; /* <<---- for including summary*/
        /*border: 1px solid #e1e1e1;*/
        position: relative; /* commented for filter fixed position*/
        /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/
    }

    #ScreenConfigure .producttab {
        box-shadow: none;
        padding: 0;
    }

    .retrieveSale .prod-tab-wrap {
        padding-right: 0;
    }

    .productGrid_massaction {
        padding: 8px 5px;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        margin: 0 0 15px;
    }

    .massaction {
        width: 100%; /*height: 26px;*/
        font-size: 11px;
        color: #888;
        display: inline-block;
    }

    .field-row label {
        font-weight: normal;
    }

    .massaction a {
        color: #3c8dbc;
        vertical-align: top;
    }

    .tabletop ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .tabletop ul.tabletop-left {
            width: 100%;
        }

        .tabletop ul.tabletop-right {
            float: right;
            width: 100%;
            text-align: right;
            margin: 0;
        }

        .tabletop ul li:first-child {
            vertical-align: middle;
        }

        .tabletop ul.tabletop-right li.status-label-mobile {
            padding: 10px 0 0;
        }

        .tabletop ul li {
            display: inline-block;
            vertical-align: top;
        }

            .tabletop ul li.picker-switch {
                width: 100%;
            }

            .tabletop ul li .button-orange {
                float: left;
                margin: 0 0 4px 4px;
                height: 30px;
            }

    .table-topleft .field-row {
        display: inline-block;
        margin: 0 2px 8px 0;
        vertical-align: top;
    }

        .table-topleft .field-row label {
            font-size: 13px;
            width: 100%;
            min-height: 21px;
            padding-bottom: 3px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    input[type="text"] {
        padding: 2px 5px;
        border: 1px solid #bfbfbf;
        height: 28px;
        line-height: 16px;
        width: 100%;
        background: #fff !important;
        color: #333;
    }

    input[type="text"], input[type="password"], textarea, input[type="email"] {
        font-size: 13px;
        height: auto !important;
        padding-left: 2.5rem !important;
        border-radius: 0.42rem;
    }

    .faceDetect {
        padding-right: 0px;
    }

    .searchmenu .fa-search {
        color: #777;
    }

    .ui-datepicker .ui-datepicker-title select {
        color: #333;
    }
    /*.table-topleft .field-row.filtermodified label, .table-topleft .field-row.filtermodified label:before {color: #f07300; }*/
    .table-topleft .field-row .select2-container .select2-choice {
        padding: 2px 5px;
        border: 1px solid #aaa;
        height: 28px;
        line-height: 16px;
        border-radius: 0;
        width: 100%;
    }

        .table-topleft .field-row .select2-container .select2-choice > .select2-chosen {
            line-height: 22px;
        }
    /*.table-topleft .field-row.defaultfilter { background: #ffd4d7; padding: 2px 7px 6px; box-shadow: 0 2px 2px #cca2a5; -webkit-box-shadow: 0 2px 2px #cca2a5; }
.table-topleft .field-row.defaultfilter input[type="text"], .table-topleft .field-row.defaultfilter .select2-container .select2-choice { border: 1px solid #f59197 !important; }
.table-topleft .field-row.defaultfilter input[type="text"]:focus,
.table-topleft .field-row.defaultfilter .select2-container.select2-container-active a.select2-choice { box-shadow: 0px 1px 4px 2px #ffaeb4; -webkit-box-shadow: 0px 1px 4px 2px #ffaeb4; }*/

    .table-topleft .field-row.defaultfilter {
        background: #dad4d4;
        padding: 2px 7px 6px;
        box-shadow: 0 2px 2px #a0a0a0;
        -webkit-box-shadow: 0 2px 2px #a0a0a0;
    }

        .table-topleft .field-row.defaultfilter input[type="text"], .table-topleft .field-row.defaultfilter .select2-container .select2-choice {
            border: 1px solid #c3c3c3 !important;
        }

            .table-topleft .field-row.defaultfilter input[type="text"]:focus,
            .table-topleft .field-row.defaultfilter .select2-container.select2-container-active a.select2-choice {
                box-shadow: 0px 1px 4px 2px #051033;
                -webkit-box-shadow: 0px 1px 4px 2px #051033;
            }

    .table-topleft .field-row select {
        font-size: 13px;
        border: 1px solid #aaa;
        height: 28px;
    }

    .table-topleft .select2-results li {
        width: 100%;
    }

    .table-topleft .field-row .select2-container .select2-search {
        margin: 3px 0 0;
    }

    .massaction a.filter-search span {
        line-height: 16px;
    }

    div.table-topright {
        width: auto;
        float: right;
        margin: 6px 0 0 15px;
    }

    .no-display {
        display: none;
    }

    .right {
        float: right;
    }

    .left {
        float: left;
    }

    .field-row button {
        background-color: #2a2a2a;
        border: medium none;
        padding: 3px 10px;
        color: #666;
        border-radius: 2px;
    }

    .separator, .pipe {
        padding: 0 6px;
        font-size: .9em;
    }

    .productGrid_massaction table tbody tr td {
        font-family: 'Open Sans', sans-serif !important;
    }

    .r3-responsive-table .accordian-for-mobile {
        position: relative;
        display: none;
        padding-left: 10px;
        color: #666F78;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: -webkit-calc(100% - 23px);
        width: calc(100% - 23px);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        min-height: 24px;
    }

    .ordercreate-datatable.r3-responsive-table .accordian-for-mobile {
        min-height: initial;
    }

    .r3-responsive-table .accordian-for-mobile .accordian-arrow-icon {
        position: absolute;
        top: 0;
        right: 0;
        display: none;
    }

    .r3-responsive-table .accordian-for-mobile h3 {
        font-size: 1em;
        line-height: 1.6em;
        margin: 0;
        padding: 0;
        width: 99%;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-with-more-option-for-order-edit .tr-extra-row,
    .table-with-more-option .tr-extra-row {
        display: none;
        width: 100%; /*position: static;*/
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .editcolor {
        color: #3c8dbc;
        cursor: pointer;
    }

    .nav::after {
        clear: none;
    }

    .nav-tabs {
        border: none;
    }

    ul.nav-tabs .panel-group {
        margin-bottom: 0;
    }

    .bs-example {
        padding: 10px;
    }

    .addprodleft {
        width: 100%;
        padding: 0;
        display: inline-block;
        padding: 4px 0;
        color: #999;
    }

    .form-horizontal .addprodleft.control-label {
        text-align: left;
        width: 100%;
        vertical-align: top;
        padding: 4px 0;
        color: #666;
    }

    #CustomerDetails .addprodleft.control-label {
        padding-top: 0;
    }

    .inputrightinfo {
        color: #555;
        font-size: 12px;
    }

    .controls {
        display: inline-block;
        width: 60%;
    }

        .controls .controls {
            width: 100% !important;
        }

    .control-label {
        position: relative;
    }

    .form-horizontal .form-group::after {
        clear: none;
    }

    .form-horizontal .form-group {
        margin: 0 0 15px;
        position: relative;
        width: 360px;
        padding: 0 10px;
    }

    #ProductConfigSKU div.form-horizontal .form-group {
        margin: 0 0 15px;
        display: inline-block;
        width: 48%;
    }

    #ProductConfigSKU .form-horizontal .addprodleft.control-label {
        width: 150px;
    }

    label {
        font-weight: normal;
        color: #333;
        font-size: 14px;
    }

    .controls input, .controls .select2-container .select2-choice {
        background: #fff;
        font-size: 14px;
        height: 34px;
        line-height: normal;
        padding: 4px;
        width: 100%;
    }

    .controls .select2-container .select2-choice {
        border: 1px solid #bfbfbf !important;
        padding: 0 4px;
    }

    .controls .select2-container .select2-search input {
        margin: 5px 0 0 !important;
    }

    .controls .select2-container .select2-search-field input {
        height: 30px;
    }

    #SearchCategory .controls {
        position: relative;
    }

    button.add-category {
        border: none;
        width: 33px;
        height: 29px;
        background: url(../images/add-cat.png) no-repeat center transparent;
        position: absolute;
        right: -44px;
        top: 5px;
    }

    .controls .ui-select-container.select2 {
        width: 100%;
    }

    .controls input[type="checkbox"], .form-group input[type="checkbox"] {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        margin: 0;
    }

        .controls input[type="checkbox"]:focus, .form-group input[type="checkbox"]:focus {
            outline: none;
        }

    .controls.multiplefields input[type="text"] {
        width: 100%;
        margin: 0;
    }

    .controls input[type="password"]:hover,
    .controls input[type="email"]:hover, .controls textarea:hover, .controls select:hover {
        box-shadow: 0 0px 0px #f5f5f5, 0 0px 0px #e8e8e8;
    }

    .select2-container .select2-choice {
        background: #fff;
        border: 1px solid #bfbfbf !important;
        height: 28px;
        transition: none;
        margin: 0;
    }

    .select2-container-active .select2-choice, .select2-container-active .select2-choices {
        box-shadow: 0 -1px 3px rgba(0,0,0,.12), 0 4px 4px rgba(0,0,0,.24);
        border: 0px solid #bfbfbf !important;
    }

    input[type="text"]:focus, input[type="password"]:focus,
    input[type="tel"]:focus,
    input[type="email"]:focus, textarea:focus, select:focus {
        box-shadow: 0 -1px 3px rgba(0,0,0,.12), 0 4px 4px rgba(0,0,0,.24);
        border: 1px solid #bfbfbf;
    }

    .controls .select2-container .select2-search-field input:hover {
        box-shadow: none;
    }

    .controls textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #bfbfbf;
        font-size: 14px;
        padding: 4px;
        resize: none;
        background: #fff;
        color: #666;
        min-width: inherit;
    }

    .container-right .controls textarea {
        height: 70px;
    }

    .Dashboardnotify {
        margin: 15px 0 0 20px;
        width: 54%;
        background-color: #fff;
        box-shadow: 2px 2px 2px 2px #ccc;
        display: inline-block;
        float: left;
        height: 488px;
        border-radius: 5px;
    }

    .Dashboardrecentprod {
        margin: 15px 0 0 30px;
        width: 40.5%;
        background-color: #fff;
        display: inline-block;
        border-radius: 5px;
        height: 150px;
        background-color: #6badbb;
    }

    .viewprod {
        margin: 15px 0 0 30px;
        width: 19%;
        background-color: #fff;
        display: inline-block;
        border-radius: 5px;
        height: 150px;
        background-color: #f48576;
    }

    .createprod {
        margin: 15px 0 0 30px;
        width: 19%;
        background-color: #fff;
        display: inline-block;
        border-radius: 5px;
        height: 150px;
        background-color: #6cc4a3;
    }

    .quickcreat {
        margin: 15px 0 0 30px;
        width: 19%;
        background-color: #fff;
        display: inline-block;
        border-radius: 5px;
        height: 150px;
        background-color: #f3cd84;
    }

    .recentcatalog {
        margin: 15px 0 0 30px;
        width: 19%;
        background-color: #fff;
        display: inline-block;
        border-radius: 5px;
        height: 150px;
        background-color: #6baebc;
    }

    .Notification {
        color: #666;
        font-size: 19px;
        margin: 20px;
    }

    .Notification1 {
        margin: 15px 0 0 20px;
        width: 31%;
        background-color: #fff;
        box-shadow: 2px 2px 2px 2px #ccc;
        display: inline-block;
        float: left;
        height: 200px;
        border-radius: 5px;
    }

    .Notification2 {
        margin: 15px 0 0 25px;
        width: 31%;
        background-color: #fff;
        box-shadow: 2px 2px 2px 2px #ccc;
        display: inline-block;
        float: left;
        height: 200px;
        border-radius: 5px;
    }

    .Notification3 {
        margin: 15px 0 0 25px;
        width: 31%;
        background-color: #fff;
        box-shadow: 2px 2px 2px 2px #ccc;
        display: inline-block;
        float: left;
        height: 200px;
        border-radius: 5px;
    }

    .notify1 {
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        background-color: #6cc4a3;
        color: #666;
        font-size: 16px;
        padding: 10px;
    }

    .notify2 {
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        background-color: #f3cd84;
        color: #666;
        font-size: 16px;
        padding: 10px;
    }

    .notify3 {
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        background-color: #6baebc;
        color: #666;
        font-size: 16px;
        padding: 10px;
    }

    .productcreateleftnav {
        margin: 0; /*background-color: #20263e;*/
        float: left;
        width: 100%;
    }

    .panel-body {
        margin: 4px 0 0 !important;
    }

    div.panel-body {
        background-color: #fff !important;
        padding: 1em !important;
    }

        div.panel-body canvas#bar {
            width: 100% !important;
        }

    .page_subtitles .toggle-arrow, .page_subtitles a:hover span.toggle-arrow {
        float: right;
        font-size: 16px;
        color: #333;
    }

    .page_subtitles a.collapsed .toggle-arrow {
        color: #333;
    }

    .page_subtitles a {
        font-size: 1em;
        color: #333;
    }

    .nav-tabs li.tab-header {
        cursor: pointer;
        vertical-align: top;
        border-bottom: 1px solid #f5f5f5;
        border-top: 1px solid #999;
        margin: 0;
        width: 100%;
        position: relative;
    }

    .nav-tabs li .tab-pane {
        padding: 5px 15px;
    }

    .nav-tabs .productcreteheader {
        font-size: 16px;
        margin: 0;
        border: none;
        padding: 4px 0 10px;
    }

    .nav-tabs li.tab-header span.toggle-arrow {
        position: absolute;
        right: 14px;
        font-size: 26px;
        top: 7px;
        transition: all 0.2s ease;
    }

    .nav-tabs li.tab-header .panel-body {
        padding: 0;
    }
    /*ul.nav-tabs li:first-child { border-top:1px solid #e1e1e1; }*/
    .nav-tabs > li.tab-header > a {
        color: black;
        border: none;
        border: none !important;
        border-radius: 0;
        font-size: 14px;
        padding: 8px 15px;
        margin: 0;
        background-color: #e1e1e1;
    }

    .nav-tabs .page_subtitles a.collapsed {
        background: #f5f5f5;
        border-radius: 4px;
        color: #333;
    }
}

.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
    background-color: #e8e8e8;
    color: #333;
}

.nav-tabs .page_subtitles a {
    background: #2ec7cb;
    color: #333;
    border-radius: 4px 4px 0 0;
}


    .nav-tabs .page_subtitles a, .nav-tabs .page_subtitles a.collapsed:hover {
        background: #f5f5f5;
        color: #333;
        background: linear-gradient(to right, #f5f5f5 0%, #e2e2e2 100%);
        border-radius: 4px;
    }

        .nav-tabs .page_subtitles a:not(.collapsed) {
            background: #e2e2e2 !important;
            border-radius: 4px 4px 0 0;
            /*background: linear-gradient(to right, #f5f5f5 0%, #e2e2e2 100%);*/
        }


.nav-tabs > li.tab-header.active span.toggle-arrow {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.nav-tabs .page_subtitles a span.toggle-arrow {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

.nav-tabs .page_subtitles a.collapsed span.toggle-arrow {
    transform: rotate(0);
    -webkit-transform: rotate(0);
}

.nav-tabs .panel-body {
    padding: 0 !important;
    display: inline-block;
    width: 100%;
    margin-top: 6px !important;
    box-shadow: 0 10px 10px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.23);
    border-top: 1px solid #f5f5f5;
}

    .nav-tabs .panel-body .page_subtitles {
        margin: 0;
    }

.nav-tabs .page_subtitles {
    line-height: 40px;
    color: white;
    padding: 0;
    border: none;
    margin: 0 0 15px;
}

.nav-tabs .panel-body .container-left {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}

.nav-tabs .page_subtitles a:focus {
    outline: none;
}

.nav-tabs .page_subtitles h4 a {
    padding: 10px 14px;
    text-decoration: none !important;
}

.nav-tabs .page_subtitles a, .nav-tabs .page_subtitles h4 {
    text-transform: none;
    font-size: 15px;
    display: block;
    font-weight: normal;
}

.nav-tabs .panel-collapse .panel-body {
    padding: 10px !important;
    margin: 0 !important;
}

.productcreaterightnav {
    margin: 0;
    background-color: #20263e;
    box-shadow: 2px 2px 2px 2px #000;
    border: 1px solid #42688d;
    min-height: 423px;
}

.tab-content {
    margin: 10px 14px;
}

.productcreteheader {
    color: #666;
    font-size: 22px;
    padding: 10px 0;
    border-bottom: 1px solid #e1e1e1;
    margin: 0 0 15px;
}

    .productcreteheader.ui-draggable-handle {
        cursor: move;
    }

.tab-content .panel-body {
    padding: 0;
}

.createdate {
    vertical-align: middle;
}

    .createdate span.input-group-addon {
        background-color: #3c8dbc;
        border: none;
        color: #666;
        cursor: pointer;
    }

    .createdate div.input-group {
        width: 180px;
    }

    .createdate div input {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right: none;
        width: 180px;
    }

.productname {
    position: relative;
}

    .productname a {
        text-decoration: none;
    }

    .productname input {
        padding-right: 35px;
    }

    .productname div.languageoption {
        display: none;
        position: absolute;
        left: 0;
        top: 0px;
        background: white;
        border: 1px solid #e1e1e1;
        box-shadow: 0 6px 30px #000;
        height: auto;
        padding: 10px 17px;
        z-index: 99;
        width: 310px;
    }

        .productname div.languageoption .ui-resizable-e, .productname div.languageoption .ui-resizable-s {
            display: none;
        }

td div.productname div.languageoption {
    width: 290px;
    right: auto;
    left: 0;
}

div.languageoption select {
    width: 150px;
}

.languageoption label {
    text-align: left;
    width: 100%;
    padding: 0 0 2px;
}

div.languageoption input {
    width: 100% !important;
    margin-left: 0;
    margin-bottom: 10px;
    padding: 4px;
}

.productname div.languageoption i {
    padding: 5px;
    font-size: 18px;
    color: #dd6d17;
}

.productname div.languageoption ul li {
    position: relative;
    list-style: none;
}

.controls select {
    border: 1px solid #bfbfbf;
    height: 34px;
    padding: 4px;
    width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
    text-indent: 0.01px;
    float: left;
    background: #fff;
    color: #666;
    font-size: 13px;
}

.brand span.input-group-addon {
    background-color: #3c8dbc;
    border: none;
    color: #666;
    cursor: pointer;
    position: absolute;
    right: 0;
    width: 36px;
}

.brand {
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}

    .brand select {
        cursor: pointer;
    }

    .brand i.dropdownarrow {
        position: absolute;
        right: 10px;
        top: 8px;
        color: #7e7e7e;
        font-size: 19px;
    }

.price {
    vertical-align: middle;
}

    .price span.input-group-addon {
        background-color: #3c8dbc;
        border: none;
        color: #666;
        cursor: pointer;
    }

    .price div.input-group {
        width: 100%;
    }

    .price div input {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right: none;
    }

.redcolor {
    color: #ee465a;
}

.commaseperated {
    font-size: 12px;
    color: #707070;
}

.keywords input {
    border: none;
}

.keywords {
    vertical-align: top;
}

div.tagsinput {
    border: 1px solid #8FC0DE;
    border-radius: 4px;
    height: 28px;
    padding: 5px;
    width: 300px;
    height: 100px;
    overflow-y: auto;
}

div.keywords textarea {
    border: 1px solid #8FC0DE;
    border-radius: 4px;
    padding: 5px;
    width: 100%;
    height: 88px;
    overflow-y: auto;
}

div.tagsinput:hover {
    box-shadow: 0 0 5px #0c72ba;
}

div.tagsinput span.tag {
    border: 1px solid #a5d24a;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: block;
    float: left;
    padding: 5px;
    text-decoration: none;
    background: #cde69c;
    color: #638421;
    margin-right: 5px;
    margin-bottom: 5px;
    font-family: helvetica;
    font-size: 13px;
    border-radius: 2px;
}

div.tagsinput span.tag {
    background: #23c473;
    border-color: #23c473;
    color: #666;
}

    div.tagsinput span.tag a {
        color: #666;
    }

.enterproductdetailbutton {
    display: inline-block;
    float: right;
    clear: both;
}

.enterproductdetailbutton-style {
    background-color: #428BCA;
    border-radius: 5px;
    color: #666;
    padding: 9px 12px;
    border: medium none;
    font-size: 16px;
}

.submitcreateform {
    margin: 10px;
}

.submitcreateform-style {
    display: none;
    background: #7e7e7e;
    color: #666;
    padding: 3px 16px;
    border: medium none;
    font-size: 16px;
    box-shadow: 0 2px 6px 0px #000;
    -webkit-box-shadow: 0 2px 6px 0px #000;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

    .submitcreateform-style:hover {
        background-color: #1658f3;
    }

div.productcreteheader button.submitcreateform-style {
    float: right;
    font-size: 14px;
}

.createdby {
    float: left;
    color: #555555;
}

.editrow {
    cursor: pointer;
    text-align: right !important;
}

.tab-pane {
    display: none;
}

    .tab-pane.active {
        display: block;
    }

.tabpane.show {
    display: block;
}

.tr-extra-row {
    width: 100%;
    position: static;
    display: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.filter-tabletview {
    display: inline-block !important;
}

.prod-type-label {
    display: inline-block;
    font-weight: bold;
}

ul.prod-type {
    display: inline-block;
}

    ul.prod-type li {
        position: relative;
        list-style: none;
        display: inline-block;
        padding: 5px 10px;
        border-radius: 5px;
        margin: 5px;
        border: 1px solid #8fc0de;
        text-decoration: none;
    }

        ul.prod-type li a {
            text-decoration: none;
        }

        ul.prod-type li i.select-phy {
            position: absolute;
            right: -6px;
            top: -10px;
            color: #009344;
            font-size: 18px;
        }

table.search-category {
    border: 1px solid #5bacdf;
    margin: 10px;
    width: 98%;
}

    table.search-category tr td {
        border: 1px solid #5bacdf;
    }

.search-category tr td.search-category-header {
    padding: 10px;
    color: #2c3e50;
    font-size: 13px;
}

.search-category-header input {
    border: 1px solid #5bacdf;
    width: 60%;
}

.search-category-middle {
    vertical-align: middle;
}

    .search-category-middle input {
        background: #5bacdf none repeat scroll 0 0;
        border: 1px solid #3c8dbc;
        border-radius: 3px;
        box-shadow: 0 1px 1px 0 #333;
        color: #666;
    }

.search-content-left {
    width: 46%;
}

.search-content-middle {
    width: 8%;
}

.search-content-right {
    width: 46%;
}

.product-type input {
    margin: 5px 10px 5px 15.5%;
    -moz-appearance: none;
}



/*search category in create page*/
.product-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* CSS Tree menu styles */

ol.product-list-tree {
    padding: 0 0 0 30px;
    width: 300px;
}

    ol.product-list-tree li.product-list-category {
        padding: 5px 0;
    }

    ol.product-list-tree li {
        position: relative;
        margin-left: -15px;
        list-style: none;
    }

        ol.product-list-tree li.file {
            margin-left: -1px !important;
        }

        ol.product-list-tree li input {
            position: absolute;
            left: 0;
            margin-left: 0;
            opacity: 0;
            z-index: 2;
            cursor: pointer;
            height: 1em;
            width: 1em;
            top: 0;
        }

            ol.product-list-tree li input + ol {
                background: url(../images/plus1.png) 40px 0px no-repeat;
                margin: -21px 0 0 -44px; /* 15px */
                height: 1em;
                cursor: pointer;
            }

li input + ol > li {
    display: none;
    margin-left: -14px !important;
    padding-left: 1px;
}

ol.product-list-tree li label {
    display: block;
    padding-left: 24px;
}

    ol.product-list-tree li label.subCategory-name {
        cursor: pointer;
        display: block;
        padding-left: 12px;
        color: #3c8dbc;
        font-weight: bold;
    }

.product-list-subCategory label.subcateg {
    color: #3c8dbc;
    font-weight: bold;
    cursor: pointer;
}

ol.product-list-tree li input:checked + ol {
    background: url(../images/minus1.png) 40px 5px no-repeat;
    margin: -21px 0 0 -44px; /* 20px */
    padding: 1.563em 0 0 80px;
    height: auto;
    cursor: pointer;
}

    ol.product-list-tree li input:checked + ol > li {
        display: block;
        margin: 0 0 0.125em; /* 2px */
    }

        ol.product-list-tree li input:checked + ol > li:last-child {
            margin: 0 0 0.063em; /* 1px */
        }

.product-list-category label.categ {
    color: #2c3e50;
    font-weight: bold;
    cursor: pointer;
}

.product-list-sub-subCategory label {
    color: #3c8dbc;
}

.status-color {
    height: 86%;
    margin: 0;
    text-align: left;
    vertical-align: middle;
    width: 40px;
}

.status-color-label {
    height: 10px;
    text-align: left;
    vertical-align: middle;
    width: 10px;
}

.red {
    background: #ee465a;
}

.yellow {
    background: #fcce30;
}

.green {
    background: #5cb85c;
}

.white {
    background: white
}

.orange {
    background: #f3930b;
}

.purple {
    background: #B833FF
}

.blue {
    background: #019fd8;
}

.lightblue {
    background: #33E0FF;
}

.Turquoise {
    background: #0a705f;
}

.DarkViolet {
    background: #9400D3;
}

.SpringGreen {
    background: #00FF7F;
}
.Sgreen {
    background: #339900;
}
.OrangeRed {
    background: #FF4500;
}

.DeepPink {
    background: #9c067e;
}
.Sred {
    background: #FF0000;
}
.Grenadier {
    background: #CB4335;
}
.OrangePeel {
    background: #FF9900;
}
.gridstatus {
    width: auto !important;
    display: inline-block !important;
    padding: 3px 5px;
    color: #fff !important;
    border-radius: 3px;
    min-width: 80px;
    box-shadow: 0 1px 2px #848181;
    -webkit-box-shadow: 0 1px 2px #848181;
    text-align: center !important;
    text-decoration: none !important;
}

    .gridstatus.yellow {
        color: #846a00 !important;
    }

    .gridstatus.actionlink {
        color: blue !important;
    }

    .gridstatus.actionlink:hover {
        text-decoration: underline;
    }

    .gridstatus.actionlink:active {
        text-decoration: underline;
    }

/*.delete button { background-color: #dd6d17;  border: medium none;  border-radius: 5px;  box-shadow: 0 1px 1px 0 #333;  color: #666;  cursor: pointer;   font-size: 13px;  padding: 7px 12px;} */
.delete button i {
    color: #666;
    font-size: 14px;
    margin-right: 5px;
}

.tabletop ul li.status-label-mobile {
    float: none;
    display: block;
    clear: both;
    padding: 5px 0 0;
}

.status-label div.status-label-color {
    display: inline-block;
    padding: 0 0 0 10px;
}

    .status-label div.status-label-color label {
        vertical-align: middle;
        margin-right: 5px;
    }

.vtop div.hovericon {
    display: none;
    background: #34495e none repeat scroll 0 0;
    border: 1px solid #171733;
    position: absolute;
    right: -115px;
    top: -11px;
    border-left: none;
}

.hovericon ul {
    border: none;
    list-style: outside none none;
    margin-left: 0;
    padding: 0;
}

    .hovericon ul li {
        cursor: pointer;
        border: none;
        padding: 12px 18px;
        display: inline-block;
    }

        .hovericon ul li i {
            color: #666;
            font-size: 18px;
        }


/*create product grid structure*/
.ts-data-table {
    clear: both;
    width: 100%;
}

    .ts-data-table thead {
        background: #5bacdf;
    }

.ui-table th {
    padding: 0.4em 0.6em 0.6em !important;
    line-height: 1.5em;
    text-align: left;
    vertical-align: top;
    color: #666;
}

.ts-view-row td {
    padding: 0.4em 0.6em 0.6em !important;
    line-height: 1.5em;
    text-align: left;
    vertical-align: top;
    font-size: 12px;
}

    .ts-view-row td input {
        width: 90%;
    }

td.brandgrid {
    position: relative;
}

.mini-popup {
    display: none;
    background-color: #FFF;
    border: 1px solid #79BBDD;
    border-radius: 2px;
    box-shadow: 1px 2px 15px #79BBDD;
    height: auto;
    max-height: 28em;
    padding: 10px 0px;
    position: absolute;
    z-index: 99;
    right: 10px;
    top: 29px;
}

    .mini-popup select {
        width: 150px;
        border: 1px solid #ccc;
        box-shadow: 0 0 0 1px #dd6d17;
    }

.filter-label {
    width: 100%;
    color: #666;
    padding: 8px 4px;
    text-align: left;
}

    .filter-label ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 12px;
    }

        .filter-label ul li {
            display: inline-block;
            margin-left: 10px;
        }

            .filter-label ul li span {
                vertical-align: middle;
            }

            .filter-label ul li img {
                margin-left: 4px;
                vertical-align: middle;
                cursor: pointer;
                background: #ccc
            }

                .filter-label ul li img:hover {
                    box-shadow: 1px 1px 1px 1px #666;
                }

            .filter-label ul li.cancleall {
                cursor: pointer;
                padding: 3px 7px;
                background: #dd6d17;
                color: #666;
                border-radius: 3px;
            }

                .filter-label ul li.cancleall:hover {
                    box-shadow: 1px 1px 1px 1px #666;
                    border-radius: 2px;
                }


div.page-nav {
    float: left;
    margin: 10px 0;
    width: 100%;
    text-align: center;
}

.page-nav ul li {
    display: inline-block;
    border: none;
    padding: 10px;
    color: #666;
    cursor: pointer;
    font-size: 13px;
}

.producttab div.page-nav ul {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

    .producttab div.page-nav ul li i {
        font-size: 14px;
    }

.page-nav ul li.last input[type="text"] {
    display: inline-block;
    background: #2b334c;
    width: 44px;
    border: 1px solid #e1e1e1;
    height: 24px;
    padding: 3px;
    color: #666;
}

.page-nav ul li.last {
    padding-left: 50px;
}

.button-orange.addprod-option {
    position: absolute;
    right: -42px;
    padding: 5px 9px;
    font-weight: bold;
    font-size: 24px;
    line-height: 22px;
    top: 0;
}
/*.addprod-option.addcat { padding: 7px 9px; }*/


/*ERP POS css*/
.summaryheader-blk div.pos-sell-header {
    padding: 10px 20px;
}

div.POS-sell-blk {
    border-bottom: 1px solid #AEAEAA;
    color: #AEAEAA;
}

    div.POS-sell-blk ul.nav-tabs li {
        width: auto;
        float: none;
        display: inline-block;
    }

    div.POS-sell-blk ul.nav-tabs > li > a {
        border: none;
        color: white;
        font-size: 12px;
        margin: 0;
    }

    div.POS-sell-blk ul.nav-tabs > li.active > a {
        background-color: #fff;
        border: medium none;
        color: #dc6d26;
        border-bottom: 2px solid #dc6d26;
        font-size: 21px;
    }

.addproduct form fieldset {
    display: inline-block;
}

    .addproduct form fieldset input {
        border: 1px solid #aaa;
        font-size: 12px;
        padding: 4px;
        width: 320px;
        height: 36px;
    }

.addproduct button {
    background-color: #dd6d17;
    border: medium none;
    border-radius: 5px;
    box-shadow: 0 1px 1px 0 #333;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    padding: 7px 12px;
    margin-right: 20px;
}

    .addproduct button:hover {
        box-shadow: 1px 1px 1px 1px #009344;
    }

    .addproduct button i {
        color: #666;
        font-size: 14px;
    }

.addproduct form.search {
    max-width: 400px;
    width: 400px;
}

    .addproduct form.search input {
        height: 30px;
    }

li.searchCustomer {
    margin-left: 10px;
}

.searchCustomer form.search {
    max-width: 400px;
    width: 400px;
}

    .searchCustomer form.search input {
        height: 30px;
    }

.addproduct form.search ul.search-ac li {
    width: 100%
}

.searchCustomer form.search ul.search-ac li {
    width: 100%;
}

.searchCustomer button {
    background-color: #dd6d17;
    border: medium none;
    border-radius: 5px;
    box-shadow: 0 1px 1px 0 #333;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    padding: 7px 12px;
}

    .searchCustomer button:hover {
        box-shadow: 1px 1px 1px 1px #009344;
    }

    .searchCustomer button i {
        color: #666;
        font-size: 14px;
    }

.searchCustomer form fieldset {
    display: inline-block;
}

    .searchCustomer form fieldset input {
        border: 1px solid #aaa;
        font-size: 12px;
        padding: 4px;
        width: 320px;
        height: 36px;
    }

.currentsale-tablecontent table thead tr th.small-size {
    width: 5%;
}

.currentsale-tablecontent table thead tr th.medium-size {
    width: 10%;
}

.currentsale-tablecontent table thead tr th.large-size {
    width: 15%;
}

.currentsale-tablecontent table tbody tr td.small-size {
    width: 5%;
}

.currentsale-tablecontent table tbody tr td.medium-size {
    width: 10%;
}

.currentsale-tablecontent table tbody tr td.large-size {
    width: 15%;
}

.currentsale-tablecontent table thead {
    display: block;
}

    .currentsale-tablecontent table thead tr {
        display: table;
        width: 100%;
    }

        .currentsale-tablecontent table thead tr th {
            text-align: center;
            padding: 10px;
        }

.currentsale-tablecontent table tbody {
    display: block;
    height: 141px;
    overflow-y: auto;
}

    .currentsale-tablecontent table tbody tr {
        display: table;
        width: 100%;
    }

        .currentsale-tablecontent table tbody tr td {
            text-align: center;
            padding: 10px;
        }

.currentsale-tablecontent table thead tr th.checkbox-column {
    text-align: center;
}

.currentsale-tablecontent table tbody tr td.checkbox-column {
    text-align: center;
}

.currentsale-tablecontent table tbody tr td input.quantity {
    width: 50px;
    text-align: center;
}

.currentsale-tablecontent table tbody tr td input {
    width: 100px;
    text-align: center;
}

.currentsale-tablecontent table thead tr th.checkbox-column input {
    width: 30px;
}

.currentsale-tablecontent table tbody tr td.checkbox-column input {
    width: 30px;
}

.currentsale-tablecontent table tbody tr td i {
    color: #3c8dbc;
    font-size: 14px;
    margin: 0 10px;
}

.currentsale-tablecontent table thead tr th.buffer-th {
    text-align: right;
}

.currentsale-tablecontent table thead tr th.firstcoulmn {
    padding: 10px 2px 10px 0 !important;
    text-align: left;
}

.currentsale-tablecontent table tbody tr td.firstcoulmn {
    padding: 10px 2px 10px 0;
    text-align: left;
}

.currentsale-tablecontent table thead.final-subtotal tr th {
    color: #555;
    width: 12%;
}

.currentsale-tablecontent table thead.final-discount tr th {
    color: #555;
    width: 12%;
}

.currentsale-tablecontent table thead.final-total tr th {
    color: #000;
    width: 12%;
}

.currentsale-tablecontent table thead.final-discount tr th input {
    width: 65px;
}

#retriveSale ul li.seeproduct {
    font-size: 20px;
}

#retriveSale div.currentsale-tablecontent table tbody tr td input.mail {
    width: 150px;
}

div.closeRegister {
    margin: 10px;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 5px;
    width: 55%;
}

    div.closeRegister table.closingtotal {
        font-size: 21px;
        color: #333;
        width: 100%;
        text-align: left;
    }

        div.closeRegister table.closingtotal thead tr.closingtotal-header {
            font-size: 28px;
            color: #000;
        }

        div.closeRegister table.closingtotal thead tr.closingtotal-register th {
            padding: 10px 0;
            border-bottom: 1px dotted #aaa;
        }

        div.closeRegister table.closingtotal thead tr.closingtotal-header th {
            padding: 10px 0 20px 0;
        }

    div.closeRegister table.register-detail {
        font-size: 14px;
        width: 100%;
        text-align: left;
    }

        div.closeRegister table.register-detail tbody tr td {
            width: 25%;
            padding: 10px 0 0 0;
        }

            div.closeRegister table.register-detail tbody tr td strong {
                font-weight: bold;
            }

    div.closeRegister h2 {
        text-align: left;
        font-size: 21px;
        padding-top: 10px;
    }

    div.closeRegister table.sales-table {
        width: 100%;
        text-align: left;
        margin-top: 10px;
        margin-bottom: 20px;
    }

        div.closeRegister table.sales-table strong {
            font-weight: bold;
        }

        div.closeRegister table.sales-table tbody tr {
            border-top: 1px solid #ccc;
        }

            div.closeRegister table.sales-table tbody tr td.width25 {
                width: 25%;
                padding: 5px 0;
            }

            div.closeRegister table.sales-table tbody tr td.width50 {
                width: 50%;
                text-align: right;
                padding: 5px 0;
            }

    div.closeRegister table.item_list {
        width: 100%;
        margin: 10px 0 20px;
        padding: 10px 0;
    }

table.item_list thead tr th {
    font-weight: bold;
    padding: 5px 0;
    background: #009344;
    color: #666;
}

table.item_list tbody tr td {
    padding: 10px 0;
}

div.closeRegister div.form-button-bar {
    text-align: right;
    padding: 10px 0;
    border-top: 1px dotted #aaa;
}

    div.closeRegister div.form-button-bar button {
        background-color: #dd6d17;
        border: medium none;
        border-radius: 5px;
        box-shadow: 0 1px 1px 0 #333;
        color: #666;
        cursor: pointer;
        font-size: 13px;
        padding: 7px 12px;
        font-weight: bold;
    }

        div.closeRegister div.form-button-bar button:hover {
            box-shadow: 1px 1px 1px 1px #009344;
        }

        div.closeRegister div.form-button-bar button i {
            color: #666;
            font-size: 14px;
            margin-right: 5px;
        }

li div.defaultProductview {
    display: none;
    position: absolute;
    top: 35px;
    right: -1px;
    box-shadow: 0 0 5px;
    background: #fff;
    padding: 20px;
    width: 500px;
    z-index: 9;
}

.defaultProductview div.search-category input {
    display: inline-block;
    padding: 5px 5px 5px 28px;
    vertical-align: middle;
    border: 1px solid #ccc;
}

.defaultProductview div.search-category button {
    display: inline-block;
    background-color: #dd6d17;
    border: medium none;
    border-radius: 0 5px 5px 0;
    color: #666;
    cursor: pointer;
    font-size: 21px;
    padding: 5px 12px;
    font-weight: bold;
    margin-top: -2px;
    vertical-align: middle;
    margin-left: -4px;
}

.defaultProductview div.defaultprocuctlist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .defaultProductview div.defaultprocuctlist ul li {
        padding: 18px 13px;
        border: 1px solid #ccc;
        margin: 10px;
    }

        .defaultProductview div.defaultprocuctlist ul li:hover {
            box-shadow: 0 0 5px #dd6d17;
        }

.defaultProductview h2 {
    font-size: 18px;
    margin: 10px 0;
    color: #333;
}

.defaultProductview div.search-category form.search {
    width: 90%;
    max-width: 100%;
}

    .defaultProductview div.search-category form.search ul.search-ac li {
        width: 100%;
    }

.defaultProduct:hover .defaultProductview {
    display: block;
}


.defaultprocuctlist ul li div.prodselected {
    background: #009344 none repeat scroll 0 0;
    border-radius: 50%;
    color: #666;
    font-size: 12px;
    padding: 1px 5px;
    position: absolute;
    right: -11px;
    top: -12px;
}

.defaultProductview div.selected-cate-header span {
    font-size: 18px;
    margin: 10px 0;
    color: #333;
    display: inline-block;
    width: 70%;
}

.defaultProductview div.selected-cate-header div.add {
    display: inline-block;
    margin-top: 20px;
    text-align: right;
    width: 26%;
}

.defaultProductview div.selected-cate-header div.add {
}

    .defaultProductview div.selected-cate-header div.add button {
        background-color: #dd6d17;
        border: medium none;
        border-radius: 5px;
        box-shadow: 0 1px 1px 0 #333;
        color: #666;
        cursor: pointer;
        font-size: 13px;
        padding: 7px 12px;
    }

        .defaultProductview div.selected-cate-header div.add button:hover {
            box-shadow: 1px 1px 1px 1px #009344;
        }

        .defaultProductview div.selected-cate-header div.add button i {
            color: #666;
            font-size: 14px;
            margin-right: 5px;
        }


/*****POS styles starts****/
*:focus, a:focus {
    outline: none;
    outline-style: none;
}

.pos-options {
    margin: 0 0 10px;
    width: 100%;
}

.search-section {
    display: inline-block;
    width: 26%;
    max-width: 420px;
    margin: 0 25px 10px 0;
    position: relative;
    vertical-align: top;
}

    .search-section .select2-container {
        width: 100% !important;
        color: white;
    }

        .search-section .select2-container .select2-selection--single {
            height: 32px;
        }

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
    width: 28px;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow b,
    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        margin-left: -6px;
        border-width: 6px 6px 0 6px;
        border-color: #888 transparent transparent transparent !important;
    }

.order-details .select2-container {
    width: 100% !important;
    height: 34px !important;
}

.select2-container .select2-choice > .select2-chosen {
    color: #666;
    line-height: 30px;
    font-size: 13px;
}

.select2-drop, .select2-drop-active {
    border: 1px solid #e1e1e1 !important;
}

.select2-container .select2-choice .select2-arrow {
    width: 24px;
    border: none;
    background: transparent;
}

    .select2-container .select2-choice .select2-arrow b {
        position: absolute;
        border-color: #7e7e7e transparent transparent;
        border-style: solid;
        border-width: 6px 6px 0;
        width: 0;
        height: 0;
        top: 50%;
        left: 50%;
        margin: -2px 0 0 -8px;
    }

.search-section.field-button .button-orange.addoption {
    float: right;
    position: relative;
}

.search-section .select2wrapper {
    position: absolute;
    width: 100%;
    padding: 0 130px 0 0;
}

.search-section.button, .search-section.date-picker {
    width: auto;
}

.popup {
    display: none;
    width: 340px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2004;
    backface-visibility: hidden;
}

.popup-wrap {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1;
    box-shadow: 0 0px 18px -5px #000;
    border: 1px solid #e1e1e1;
    background: #fff;
    color: #666;
    transition: all 0.5s ease-in-out;
    display: inline-block;
    width: 100%;
    padding: 16px;
    position: relative;
}

.popup.pagePopup {
    width: 80%;
    height: auto;
    min-height: 450px;
    position: absolute;
    margin: 0 0 20px;
}

    .popup.pagePopup .pageheader {
        position: relative !important;
        top: auto !important;
        display: inline-block !important;
        background-color: #ffffff !important;
        box-shadow: none !important;
    }

    .popup.pagePopup .nav-tabs .panel-body .page_subtitles {
        margin: 0 0 20px;
        display: inline-block;
        width: 100%;
    }

    .popup.pagePopup .msg-alert {
        top: 0;
        z-index: 2002;
    }

.titleText .popup-wrap {
    padding: 0 16px 16px;
}

.titleText .popup-title {
    padding: 15px 10px 5px;
    margin: 0;
}

.ui-draggable .popup-title {
    cursor: move;
}

.popup.show .popup-wrap {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.popup-wrap input[type="text"] {
    border: 1px solid #aaa;
    color: #666;
    display: block;
    font-size: 13px;
    margin: 0 0 10px;
    padding: 5px 10px;
    width: 100%;
    background: #2b334c;
}

.popup-wrap .columns select {
    width: 100%;
}

.popup-wrap textarea {
    width: 100%;
    display: block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin: 0 0 10px;
    height: 100px;
    color: #666;
    background: #fff;
    resize:none;
}

.popup-wrap input[type="submit"] {
    float: right;
}

.popup-wrap .close, .closebtn {
    position: absolute;
    top: -15px;
    right: -12px;
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    opacity: 1;
    font-size: 14px;
    text-shadow: none;
    color: #666;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
}

.popup-wrap .close {
    z-index: 2002;
}

    .popup-wrap .close:hover, .closebtn:hover {
        background: #7a7a7a;
        color: #fff;
    }

.popup-title {
    background: transparent;
    border-bottom: 1px solid #ccc;
    color: #666;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px;
    padding: 5px 10px;
}

.popup.show .popup-wrap .sum_togglecontent {
    background: #252d47;
    padding: 10px;
}

.customer-details span.title {
    display: block;
    font-size: 15px;
}

.customer-details label {
    width: 100%;
    clear: both;
}

.menutab {
    display: block;
    width: 100%;
    padding: 0;
    margin: 40px 0 0;
    border-bottom: 1px solid #42688d;
    position: relative;
}

    .menutab ul {
        margin: 0 0 -1px;
        padding: 0 18px;
    }

        .menutab ul li {
            display: inline-block;
            margin: 0 0 0 -4.5px;
            cursor: pointer;
            list-style: none;
            font-size: 16px;
            color: #70716f;
            font-family: 'Open Sans', sans-serif;
            padding: 8px 50px 8px 20px;
            position: relative;
        }

            .menutab ul li.active {
                background: #337AB7;
                color: #fff !important;
            }

            .menutab ul li:hover {
                color: #337AB7;
            }

            .menutab ul li.active:after {
                position: absolute;
                width: 0;
                height: 0;
                content: "";
                border-left: 40px solid transparent;
                border-top: 41px solid #1b2133;
                top: 0;
                right: 0;
            }


.switch-user {
    padding: 5px;
    position: relative;
    float: right;
}

    .switch-user a {
        text-decoration: none;
        display: inline-block;
        padding: 0 6px;
        color: #666;
    }

        .switch-user a.active, .switch-user a:hover {
            color: #dd6d17;
        }

.transaction-date {
    color: #666;
    float: left;
    font-size: 15px;
    margin: 0 2px 0 0;
    position: relative;
    width: 198px;
}

    .transaction-date .fa {
        font-size: 20px;
        padding: 0 4px 0 0;
    }

.POSListingItems {
    display: table;
    padding-left: 0;
}

    .POSListingItems.col-xs-6 {
        width: 49% !important;
        padding-right: 0;
    }

    .POSListingItems .listColumn {
        display: table-cell;
        vertical-align: top;
        padding: 0 0 0 10px;
    }

.categorylisting.listColumn {
    width: 200px;
    padding: 0;
}

.listColumn .posmenu ul li {
    list-style: none;
    margin: 0 0 5px;
    padding: 0;
    width: 75px;
    height: 75px;
    font-size: 13px;
    text-align: center;
    display: table;
    float: left;
    color: black;
    background: white;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    position: relative;
}

.categorylisting.listColumn .posmenu ul li:nth-child(even) {
    margin-left: 5px;
}

.listColumn .posmenu ul li > span {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    padding: 4px;
}

    .listColumn .posmenu ul li > span img {
        display: block;
        margin: 0 auto 2px;
    }

.listColumn .posmenu ul li:hover, .listColumn .posmenu ul li.active {
    background: #7e7e7e;
    color: white;
}

.listColumn .posmenu ul li > span span {
    display: inline-block;
    width: 100%;
}

.listColumn .priceselectionlists ul li {
    list-style: none;
    margin: 0 5px 5px;
    padding: 0;
    width: 172px;
    height: 120px;
    font-size: 13px;
    text-align: center;
    display: grid;
    float: left;
    color: #666;
    background: #7e7e7e;
    border: 1px solid #42688d;
    border-bottom: 3px solid #dd6d17;
    cursor: pointer;
}

    .listColumn .priceselectionlists ul li > table {
        color: #666;
    }

    .listColumn .priceselectionlists ul li > span {
        display: list-item;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        padding: 4px;
    }

        .listColumn .priceselectionlists ul li > span img {
            display: block;
            margin: 0 auto 2px;
        }

    .listColumn .priceselectionlists ul li:hover, .listColumn .priceselectionlists ul li.active {
        background: #f4ecec;
    }

    .listColumn .priceselectionlists ul li > span span {
        display: list-item;
        width: 100%;
    }

.listColumn .productlist ul {
    margin: 0 0 0 -10px;
    padding: 0;
}

    .listColumn .productlist ul li {
        display: table;
        float: left;
        /*padding: 0 0 5px 5px;*/
        list-style: none;
        width: 24%;
        color: #666;
        cursor: pointer;
        font-size: 13px;
        max-width: 100px;
        height: 84px;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        margin-right: 3px;
        margin-bottom: 3px;
        background: white;
    }

        .listColumn .productlist ul li span.posItems {
            width: 100%;
            height: 74px;
            display: table-cell;
            padding: 30px 10px 10px;
            text-align: center;
            vertical-align: middle;
            /*background: #254462;*/
            /*border: 1px solid #9e9e9e;*/
            position: relative;
        }

            .listColumn .productlist ul li span.posItems span {
                display: inline-block;
                width: 100%;
                overflow: hidden;
                vertical-align: middle;
                max-height: 35px;
                word-break: break-word;
            }

        .listColumn .productlist ul li:hover span, .listColumn .productlist ul li.active span {
            background: #7e7e7e;
            color: white;
        }

.productlist {
    display: none;
}

.pos-quickIcons {
    position: absolute;
    left: 0;
    height: auto !important;
    display: inherit !important;
    top: 0;
    max-width: inherit !important;
}

    .pos-quickIcons span {
        width: 20px !important;
        height: 20px;
    }

        .pos-quickIcons span.editIcon {
            position: absolute;
            right: 2px;
            top: 2px;
        }

        .pos-quickIcons span.favIcon {
            position: absolute;
            left: 2px;
            top: 2px;
        }

.listColumn .productlist ul li span.posItems span.pos-quickIcons {
    top: 4px;
}

.popup.productprice {
    width: 740px;
}

    .popup.productprice .sum_togglecontent table.data-grid td input[type="text"] {
        margin: 0;
        height: 24px;
    }

.productprice .sum_togglecontent table.data-grid tr th {
    padding: 6px 3px;
}

.popup.productprice .quantity-fieldswrap {
    padding: 0;
}

.popup.workFlow {
    width: 420px;
    min-height: 140px;
    position: absolute !important;
}

    .popup.workFlow .popup-wrap {
        height: 100%;
        min-height: 140px;
    }

.popup .popupPointer {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 20px;
    background: #252d47;
    border-bottom: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    left: 50%;
    margin: 0 0 0 -7.5px;
    transform: rotate(45deg);
}

.productprice #divPaymentMethods {
    min-height: 200px;
    overflow-y: auto;
}

.productprice .paytotal {
    padding: 0;
}

.divPaymentMethods {
    height: calc(100% - 340px);
}
/**price management**/
.form-innerleft {
    float: left;
    vertical-align: top;
    width: 28%;
    min-width: 174px;
    margin: 0 20px 0 0;
}

    .form-innerleft .controls, .form-innerleft .transaction-date, .form-innerleft .Zebra_DatePicker_Icon_Wrapper {
        width: 100%;
    }

    .form-innerleft .Zebra_DatePicker {
        top: auto !important;
        bottom: 35px;
    }

.status {
    color: #ee465a;
    float: right;
    margin: 12px 25px 0 0;
    width: auto;
}

    .status.active {
        color: green;
    }

.smart-view .status {
    margin-top: 3px;
}

.touchview {
    background: #337ab7;
    color: #666;
    float: right;
    margin: 0 0 0 32px;
    padding: 8px 16px 8px 42px;
    position: relative;
    top: 8px;
    cursor: pointer;
}

    .touchview:after {
        border-right: 32px solid transparent;
        border-top: 36px solid #fff;
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        top: 0;
        width: 0;
    }

.toggle-wrapper { /*overflow: hidden;*/
    padding: 0 0 10px;
    display: inline-block;
    width: 100%;
    min-height: 40px;
    height: auto; /*height:100% gives vertical scroller in Mission list child summary view - overflow hidden hides date picker*/
}
/*.large-windowpanel .toggle-wrapper, .detail-panel .toggle-wrapper { overflow:inherit; }*/
.tabletop-section {
    display: inline-block;
    width: 100%;
    padding: 10px 0 0;
}

    .tabletop-section .grid-controls {
        margin: 0 0 5px;
        width: auto;
    }

        .tabletop-section .grid-controls div {
            margin: 0 0 0 10px;
        }

.stickygridheader {
    display: none;
}

.stickygrid {
    display: inline-block;
    height: 1px;
    background: transparent;
    opacity: 0;
    width: 100%;
    position: relative;
    top: -113px;
}

.stickygridheader table.listing {
    margin: 0;
}

.tabletop-section.fixedtop {
    top: 107px;
    position: fixed;
    z-index: 1;
    right: 20px;
    left: auto;
}

.fixedtop .stickygridheader {
    display: block;
    background: #fff;
}

.stickwrap .stickparentgrid {
    margin-top: 44px;
}

    .stickwrap .stickparentgrid > thead {
        opacity: 0;
    }

.tabletop-section .grid-controls div.total {
    background: white;
    font-weight: bold;
    padding: 6px 10px 5px;
    border: 0px solid gray;
    color: #666;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.table-wrap {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    width: 100%;
    float: left;
    position: relative;
}

    .table-wrap.active {
        width: 72%;
    }

.categorylist {
    overflow: hidden;
    padding: 0 0 0 5px;
    position: absolute;
    top: 0;
    right: 0;
    width: 38.9%;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    transform: translate3d(100%, 0px, 0px);
    -webkit-transform: translate3d(100%, 0px, 0px);
    min-height: 390px;
}

.table-wrap.active .categorylist {
    opacity: 1;
}

.categorylist .innercontent {
    display: block;
    min-height: 352px;
    border: 1px solid #ddd;
    width: 100%;
}

.categorylist h2 {
    font-size: 15px;
    margin: 0;
    padding: 11px 10px 12px;
    background: #009344;
    color: #666;
    font-weight: bold;
}

.listtable.productlisttable {
    min-height: 650px;
}

table.listing {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.zoomin {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

    .zoomin:hover {
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
    }

/*table.listing thead, .tablegrid thead {  color: #666;
background: #222938; 
background: -moz-linear-gradient(top,  #222938 0%, #394b5d 16%, #394b5d 100%);
background: -webkit-linear-gradient(top,  #222938 0%,#394b5d 16%,#394b5d 100%);
background: radial-gradient(ellipse at center, #222940 0%, #10141f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222938', endColorstr='#394b5d',GradientType=0 );
border-bottom:1px solid #e1e1e1; border-top:1px solid #e1e1e1;
border-radius:calc(0px - 0px) calc(0px - 0px) 0 0;
}*/

table.listing thead, .tablegrid thead {
    color: #666;
    background: #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
}

table.listing tbody tr {
    border-top: 1px solid #e1e1e1;
    color: #c8d4f9;
}

    table.listing tbody tr td:hover {
        cursor: pointer;
    }
/*table.listing tbody tr.editable { background: #f1f1f1; }*/
/*@media only screen and (min-width:1367px) {
    table.listing tr th:nth-of-type(5), table.listing tr td:nth-of-type(5) { text-align: right;  max-width: 390px; min-width: 390px;  width: 390px; }
}*/
table.listing tr th, table.listing tr td {
    padding: 6px 10px;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

    table.listing tr th a, table.listing tr th a:hover {
        color: #666;
        cursor: pointer;
    }

table.listing tr th, table.listing tr td {
    color: black;
}

table.listing tr td {
    font-weight: normal;
    cursor: default;
}

    table.listing tr td .controls {
        width: 100%;
    }

    table.listing tr th:first-child, table.listing tr td:first-child {
        text-align: left;
    }
    /*@media only screen and (min-width:1367px) {
    table.listing tr th:nth-of-type(2), table.listing tr td:nth-of-type(2) {  max-width: 150px; width: 150px; }
}*/
    table.listing tr td:nth-of-type(2) input[type="text"] {
        width: 34%;
        text-align: left;
    }

    table.listing tr th:last-child, table.listing tr td:last-child {
        width: 15px;
        max-width: 15px;
        min-width: 15px;
    }

    table.listing tr td input[type="text"] {
        border: 1px solid #e1e1e1;
        cursor: text;
        border-radius: 0;
        height: 28px;
        width: 100%;
    }

table.listing tr.editable td input[type="text"] {
    border: 1px solid #e1e1e1;
    cursor: text;
}

table.listing tr td input[type="text"]:focus {
    outline: none;
}

table.listing tr td.fieldWithIcon input[type="text"] {
    width: 59%;
    margin: 0 2px 0 0;
}

span.btns {
    display: inline-block;
    font-size: 20px;
    color: white;
    width: 24px;
    line-height: 6px;
    margin: 0 4px;
    /*border: 1px solid #e1e1e1;*/
    padding: 5px 0;
    position: relative;
    cursor: pointer;
    text-align: center;
    height: 22px;
    background: #7e7e7e;
    vertical-align: top;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
}

    span.btns.minus {
        padding: 4px 0 6px;
        position: relative;
    }

    span.btns:hover {
        background: #7e7e7e;
        color: #666;
    }

.editable span.btns { /*display:inline-block;*/
}

.product-name {
    position: relative;
}

.prod-thumb {
    display: inline-block;
    width: 25px;
    margin-right: 5px;
    vertical-align: middle;
}

    .prod-thumb img {
        max-width: 25px;
    }

.product-name a {
    text-decoration: none;
}

.product-name .popup {
    font-size: 13px;
    left: 130px !important;
    margin: -48px 0 0 !important;
    position: absolute;
}

    .product-name .popup p {
        margin: 0;
        padding: 0;
    }

.tool_tip {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 10px #333;
    font-size: 12px;
    left: 90px;
    padding: 7px 10px;
    position: absolute;
    top: 100%;
    width: 224px;
    z-index: 1000;
    display: none;
    color: #337ab7;
}

    .tool_tip:before {
        width: 26px;
        height: 17px;
        content: url("../images/tooltip-pointer.png");
        position: absolute;
        top: -17px;
    }

.tooltip_inner p {
    margin: 0;
    padding: 0;
}

table.listing tr td span.product-img {
    display: inline-block;
    width: 46px;
    margin: 0 10px 0 0;
}

    table.listing tr td span.product-img img {
        max-width: 100%;
    }


/***button styles starts***/

.form-group.fullwidth {
    width: 100%;
    display: inline-block;
    margin: 0;
}

    .form-group.fullwidth fieldset {
        max-width: inherit;
        box-shadow: none;
        border: 1px solid #dadada;
        border-radius: 0;
    }

    .form-group.fullwidth input {
        margin: 0;
        border-radius: 0;
    }

    .form-group.fullwidth div.form-group.fullwidth {
        width: 100%;
    }

    .form-group.fullwidth div.form-group {
        width: 358px;
        float: left;
    }

.button-orange, .button-green, .button-blue {
    background-color: #7e7e7e;
    transition: all 0.3s ease;
    display: inline-block;
    border: medium none;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
    font-size: 13px !important;
    padding: 5px 10px;
    margin: 0;
    vertical-align: top;
}
.btn-primary {
    background: rgb(192, 192, 192) !important;
    outline: none;
}

.button-orange.secondary {
    background: #9e9e9e;
}

    .btn-primary:hover {
        background: #7e7e7e !important;
        outline: none;
    }

.btn-link {
    outline: none;
    color: #7e7e7e !important;
}

    .btn-link:hover {
        outline: none;
        color: #7e7e7e !important;
    }

.btn {
    outline: none !important;
}


.button-green {
    background-color: #eee;
    padding: 0;
    color: #777 !important;
}

button.button-orange, button.button-green {
    padding: 7px 10px;
}
.grid_search_row button.button-orange {
    padding: 3px 8px;
}

.button-orange a, .button-green a, .button-blue a {
    display: block;
    color: #555;
    text-decoration: none;
}

.button-orange a, .button-blue a {
    color: #fff;
}

.button-orange .fa {
    font-size: 17px;
    top: 0;
    position: relative;
    margin: 0;
    line-height: 16px;
}

.button-orange.nontexticon .fa {
    margin: 0;
}

.button-orange .fa.fa-plus {
    font-size: 14px;
    top: 1px;
    margin: 0 2px;
}

.button-orange.noText .fa.fa-plus {
    margin: 0;
}

.button-orange:hover, .button-orange.active {
    background-color: #4A7DFF;
    border-color: #4A7DFF;
    color: #666;
    text-decoration: none;
}
#password-input-wrapper .menu-icon {
    font-size: 18px;
    left: 10px;
}
.vd_input-wrapper .menu-icon {
    font-size: 17px;
    left: 8px;
    position: absolute;
    top: 12px;
    width: auto !important;
    line-height: inherit;
}
.button-orange.addoption {
    padding: 0;
}

    .button-orange.addoption a {
        padding: 5px 12px;
    }

.button-orange.nontexticon {
    padding: 4px 6px 6px !important;
}

.button-green a {
    padding: 7px 12px;
    min-width: 88px;
    text-align: center;
}

.button-green:hover {
    background: #a3a3a3;
    color: #fff !important;
}

.button-blue {
    background: #5bacdf;
}

    .button-blue:hover {
        background: #2FA7F3;
    }

.borderbtm {
    border-bottom: 1px solid #e1e1e1;
}
/***button styles ends***/

table.listing tr.subtotal {
    background: #f5f5f5;
    border-top: 1px solid #9e9e9e;
    color: #f5deb3;
}

table.listing tr.grandtotal {
    background: #e1e1e1;
    /*border-top: 1px solid #F7834B;
    border-bottom: 1px solid #F7834B;*/
    color: #f5deb3;
}

    table.listing tr.subtotal td, table.listing tr.grandtotal td {
        font-weight: bold;
    }

        table.listing tr.subtotal td:nth-of-type(2), table.listing tr.grandtotal td:nth-of-type(2) {
            text-align: right;
            min-width: 385px;
        }

        table.listing tr.subtotal td input[type="text"] {
            border: 0px solid #EFBBA2;
            cursor: text;
        }

.listing .currentsale .stickparentgrid .sortablegrid {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

input.unit-price, input.discount {
    width: 100px !important;
    text-align: right !important;
    padding-right: 10px;
}

input.discount {
    width: 68px !important;
}

table.listing tr.subtotal td input.discount {
    margin: 0 0 0 8px;
    font-weight: normal !important;
    width: 60px !important;
    text-align: right !important;
    padding: 0 10px 0 0 !important;
}

    table.listing tr.subtotal td input.discount.percentage {
        width: 40px !important;
    }

table.listing tr.subtotal td span.caption span {
    margin: 0 0 0 5px;
    color: wheat;
}

.listing span.caption {
    color: #666;
}

.listing span.value {
    display: inline-block;
    padding: 0 0 0 10px;
    color: black;
}

.listing.topTotalValue {
    padding: 0px 8px 0 0;
    font-size: 24px; /*text-transform: uppercase;*/
    line-height: 24px;
    font-weight: 500;
}

    .listing.topTotalValue span.value {
        padding: 0 0 0 2px;
    }

.listing .fa.fa-trash {
    color: #cacaca;
    font-size: 16px;
    cursor: pointer;
}

.listing tr:hover .fa.fa-trash, .listing tr.editable td .fa.fa-trash {
    color: #969696;
}

.listing .fa.fa-trash:hover {
    color: #de6f27 !important;
}

table.listing tr.subtotal span.cufon {
    display: block;
    text-align: right;
    padding: 0 126px 0 0;
    clear: both;
    color: wheat;
}

/*.popup.payment { width: 410px; text-align: left; z-index:3000; }*/
.popup.payment {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0 !important;
}

    .popup.payment[data-popup-type="PriceSelection"] .listColumn {
        padding-top: 10px;
    }

    .popup.payment .popup-wrap {
        width: 410px;
        height: 90%;
        top: 50%;
        margin-top: -20%;
        margin-left: -205px;
        left: 50%;
    }

.paytotal {
    margin: 0 0 10px;
}

    .paytotal span {
        display: block;
        text-align: right;
        font-size: 14px;
        color: #666;
    }

        .paytotal span label {
            float: left;
            font-weight: bold;
            padding: 0;
            text-align: right;
            width: 235px;
        }

        .paytotal span.subtotal, .paytotal span.subtotal label {
            font-size: 17px;
            font-weight: normal;
            color: #f5deb3;
        }

            .paytotal span.subtotal label {
                float: none;
                padding: 0;
            }

        .paytotal span.subtotal {
            border-bottom: 1px solid #ddd;
            margin: 0 0 25px;
            color: #f5deb3;
        }

        .paytotal span.amtrecd input[type="text"] {
            display: inline-block;
            padding: 4px 10px;
            text-align: right;
            width: 108px;
            top: -4px;
            position: relative;
        }

.inputwrapper {
    background: #7e7e7e;
    border: 1px solid #42688d;
    border-bottom: 3px solid #dd6d17;
    color: #666;
    display: inline-block;
    margin: 0 2px 0 0;
    overflow: hidden;
    position: relative;
}

    .inputwrapper:hover, .inputwrapper.active {
        background: #1658f3;
    }

    .inputwrapper label {
        color: #666;
        margin: 0;
        padding: 5px 22px;
        cursor: pointer;
        position: relative;
    }

    .inputwrapper input[type="radio"] {
        position: absolute;
        left: -20px;
    }

.payment .sub-title {
    border-top: 1px solid #ddd;
    margin: 0 0 10px;
    padding: 10px 0 0;
    color: #666;
}

.payment_options {
    margin: 0 0 10px;
}

.overlaydiv {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 1003;
    display: none;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.button-orange.grid-refresh .fa {
    font-size: 18px;
    line-height: 21px;
    margin: 0;
}

/***STYLES FOR PRODUCT PRICE***/
.screenLayoutWrap {
    padding: 0 0 0 16px;
}

#ScreenLayout {
    margin: 0;
    border: 1px solid #e1e1e1;
    min-height: 150px;
}

    #ScreenLayout .windowcontainer {
        width: 100%;
    }

    #ScreenLayout ul.squick-view {
        display: none;
    }

    #ScreenLayout .form-horizontal .form-group {
        border: 2px dashed transparent;
        margin: 0;
        padding: 0 10px 15px;
        transition: all 1s ease;
    }

        #ScreenLayout .form-horizontal .form-group.focusSelected {
            border-color: #2ec7cb;
        }

    #ScreenLayout .pageheader {
        box-shadow: none;
    }

        #ScreenLayout .pageheader:before {
            display: none;
        }

        #ScreenLayout .pageheader > span {
            display: inline-block;
            width: 100%;
            margin: 0 0 18px;
        }

    #ScreenLayout .container-left .customer-search {
        top: -24px;
    }

.workflowList ul {
    margin: 0 0 10px;
    padding: 0;
    display: inline-block;
    width: 100%;
}

/*document extracted starts*/
.documentDataDetails.displayFlex {
    overflow: hidden;
    padding: 10px;
}

.documentDataDetails > div {
    flex: 1;
    width: 50%;
    padding: 8px;
}

.documentWrapper {
    padding: 10px;
}

    .documentWrapper .flexColumn {
        flex: 1;
        width: 50%;
        padding: 10px;
    }

.flexColumn canvas {
    display: flex;
    margin: 0 auto;
    max-width: 90%;
}

.dataContent {
    resize: none;
    width: 100%;
    min-height: 220px;
    padding: 10px;
    height: auto;
    margin: 8px 0 0;
}

ul.documentDataItems {
    margin: 0;
    padding: 10px;
    list-style: none;
    display: inline-block;
}

    ul.documentDataItems li {
        float: left;
        background: #fff;
        border: 1px solid #ccc;
        padding: 5px 10px;
        color: #666;
        margin: 0 5px 8px;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    }

        ul.documentDataItems li span.dataWrap label {
            font-weight: 500;
            padding: 0 5px 0 0;
            position: relative;
        }

            ul.documentDataItems li span.dataWrap label:after {
                content: " "
            }

.settingEditFields.stickyPanel {
    position: relative;
}

.htmllabelinfo span:not(.redcolor) {
    background: #ffeeba; padding: 10px; border: 1px solid #f5e1a5;  border-radius: 8px; text-align: left; display:block;
}
.tooltip_Data { position:relative;  color:#252d47; font-size: 16px; }
.tooltip_Data:before, .tooltip_Data:after {
    content:"";
    position:absolute;
     display:none; opacity:0;
}

.tooltip_Data:before {
    background: #252d47; border-radius: 4px; max-width: 230px; color: #fff;
    font-size: 12px; content: attr(tooltipdata);  padding: 3px 10px 6px; bottom: 8px; margin-bottom: 19px;
    left: 50%; transform: translateX(-50%); width: max-content;
}
.tooltip_Data:after {
    content: "";  bottom: 10px;  margin-bottom: 10px;  width: 0; height: 0; border-left: 6px solid transparent;
    border-right: 6px solid transparent;  border-top: 7px solid #252d47;  left: 50%;
    transform: translateX(-50%);
}

.tooltip_Data:hover:before, .tooltip_Data:hover:after {
    display:flex; opacity:1; z-index: 3000;
}



/*document extracted ends*/
@media only screen and (min-width:1367px) {
    table .listing.productprice tr th:last-child, table.listing.productprice tr td:last-child, table.listing.productprice tr th, table.listing.productprice tr td {
        width: 200px;
        max-width: 200px;
        min-width: 200px;
    }

        table.listing.productprice tr th:first-child, table.listing.productprice tr td:first-child,
        table.listing.productprice tr th:nth-of-type(2), table.listing.productprice tr td:nth-of-type(2) {
            max-width: 280px;
            width: 280px;
            min-width: 280px;
        }
}

/***STYLES FOR PRODUCT PRICE ENDS***/

/***STYLES FOR STOCK ORDER***/

.listing tbody {
    box-shadow: 0 2px 2px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.22);
}

.panel-body .listing tbody {
    box-shadow: none;
}

.pos-options .stockproduct {
    position: relative;
}

.pos-options input[type="text"] {
    border-radius: 4px;
    font-size: 14px;
    padding: 9px 8px;
    line-height: 15px;
    position: relative;
    width: 100%;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .pos-options input[type="text"] {
        padding: 8px;
    }
}

.pos-options .stockproduct input[type="text"] {
    padding: 6px 28px 6px 8px;
}

.pos-options input.ui-select-search {
    margin: 6px 0 0;
    padding: 4px 8px;
}

.ui-widget-content {
    background: #fff !important;
    font-size: 13px;
}

.ui-menu .ui-menu-item {
    padding: 5px 1em 5px 0.4em;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: #e9e9e9;
    border: none;
    margin: 0;
}

.stockproduct input[type="submit"] {
    background: url("../images/search.png") no-repeat center;
    border: medium none;
    height: 100%;
    position: absolute;
    top: 2px;
    width: 31px;
    right: 0;
    height: 34px;
}

    .stockproduct input[type="submit"]:hover {
        background: url("../images/search-hover.png") no-repeat center;
    }

.advancedsearch .fa-search-plus:before {
    content: url("../images/adv-search.png");
    left: -22px;
    position: absolute;
    top: -15px;
}

.button-orange.advancedsearch a {
    padding: 7px 12px 7px 30px;
}


.order-details {
    display: inline-block;
    width: 100%;
}

    .order-details > div {
        display: inline-block;
        vertical-align: top;
        width: 380px;
        margin: 0 0 16px;
    }

        .order-details > div label {
            display: inline-block;
            width: 100%;
        }

        .order-details > div span.inputwrap {
            display: inline-block;
            margin: 0;
            width: 85%;
        }

        .order-details > div select {
            width: 100%;
        }

        .order-details > div span.inputwrap .select2-container .select2-selection--single {
            height: 34px;
        }

.extrafield-section {
    position: relative;
    background: #f9f9f9;
    box-shadow: 0 0 10px 4px #ccc inset;
    display: none;
    margin: 24px 0 0;
    padding: 25px 15px;
    width: 100%;
    border-top: 3px solid #fff;
}

    .extrafield-section:before {
        display: none;
        border-bottom: 18px solid #ec8b40;
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        content: "";
        height: 0;
        left: 350px;
        position: absolute;
        top: -21px;
        width: 0;
    }

    .extrafield-section.active {
        border-top: 3px solid #ec8b40;
    }

        .extrafield-section.active:before {
            display: block;
        }

    .extrafield-section div {
        display: inline-block;
        margin: 0 10px 16px 0;
        vertical-align: top;
        width: 320px;
    }

        .extrafield-section div label {
            display: inline-block;
        }

        .extrafield-section div span.inputwrap {
            display: inline-block;
            margin: 0;
            width: 100%;
        }

        .extrafield-section div select {
            width: 100%;
            display: block;
        }

        .extrafield-section div span.inputwrap .select2-container .select2-selection--single {
            height: 34px;
        }

    .extrafield-section input[type="text"] {
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        font-size: 14px;
        padding: 6px 8px;
        position: relative;
        top: 2px;
        width: 100%;
    }

    .extrafield-section .select2-container {
        margin: 2px 0 0;
        width: 100% !important;
    }

.datepick {
    position: relative;
}

    .datepick .fa {
        font-size: 16px;
        position: absolute;
        right: 12px;
        top: 11px;
        color: #337ab7;
    }

.extrafield-section.add-np-section:before {
    left: 492px;
}

.advsearch .button-orange, .add-np-section .button-orange {
    margin: 26px 0 0;
}


.invoice .order-details div {
    margin: 10px 0 0;
}

.invoice .order-details label {
    font-weight: bold;
    width: auto;
}

.invoice .order-details > div span.inputwrap {
    width: auto;
}

.invoice .order-details .status {
    width: auto;
    margin-right: 20px;
}

    .invoice .order-details .status label {
        font-weight: normal;
    }

.invoice .order-details div.button-orange {
    width: auto;
    margin: 0;
}

table.listing.stockinvoice tr th:last-child, table.listing.stockinvoice tr td:last-child {
    max-width: 390px;
    min-width: 390px;
    text-align: right;
    width: 390px;
}

.popup.adv-searchlist {
    width: 790px;
}

table.listing.searchlist {
    margin: 0;
}

    table.listing.searchlist tr th, table.listing.searchlist tr td {
        max-width: 150px;
        min-width: 150px;
        width: 150px;
    }

    table.listing.searchlist tr td {
        padding: 5px 10px;
    }

        table.listing.searchlist tr th:first-child, table.listing.searchlist tr td:first-child {
            max-width: 34px;
            min-width: 34px;
            width: 34px;
        }

@media only screen and (min-width:1367px) {
    table.listing.searchlist tr th:nth-of-type(3), table.listing.searchlist tr td:nth-of-type(3) {
        max-width: 250px;
        min-width: 250px;
        width: 250px;
    }
}

.search-content {
    display: inline-block;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 280px;
}

table.listing.searchlist input[type="checkbox"]:focus {
    outline: none;
}

/***STYLES FOR STOCK ORDER ENDS***/

/****Product create sku listing starts****/
table.listing.planner-create {
    margin: 0;
    border-bottom: 1px solid #e1e1e1;
}

    table.listing.planner-create tr td:nth-of-type(2) input[type="text"] {
        width: 100%;
    }

    table.listing.planner-create tr td input[type="text"] {
        width: 100%;
        padding: 2px 10px;
        line-height: normal;
    }

table.listing tr td select {
    width: 100%;
    background: white;
    border: 1px solid #e1e1e1;
    height: 28px;
}


table.listing.planner-create tr th {
    padding: 10px 15px;
}

table.listing.planner-create tr td {
    padding: 5px 15px;
}

    table.listing.planner-create tr th:first-child, table.listing.planner-create tr td:first-child {
        max-width: 300px;
        min-width: 300px;
        text-align: left;
        width: 80px;
    }

    table.listing.planner-create tr th.toggle-arrow, table.listing.planner-create tr td.toggle-arrow {
        text-align: center;
        vertical-align: middle;
        width: 20px;
        max-width: 20px;
        min-width: 20px;
        padding: 0;
        line-height: 20px;
    }

    table.listing.planner-create tr th:last-child, table.listing.planner-create tr td:last-child {
        max-width: 20px;
        min-width: 20px;
        width: 20px;
        text-align: right;
    }

    table.listing.planner-create tr th.small, table.listing.planner-create tr td.small,
    table.listing tr th.small, table.listing tr td.small {
        max-width: 80px;
        width: 80px;
        min-width: 80px;
    }

    table.listing.planner-create tr td.toggle-arrow span {
        position: relative;
    }

        table.listing.planner-create tr td.toggle-arrow span:before {
            font-family: "FontAwesome";
            content: "\f105";
            position: absolute;
            left: 0;
            top: 0;
            font-size: 20px;
            color: #666;
        }

        table.listing.planner-create tr td.toggle-arrow span.active:before {
            content: "\f107";
        }

@media screen and (-webkit-min-device-pixel-ratio:0) {
    table.listing.planner-create tr th:last-child, table.listing.planner-create tr td:last-child {
        max-width: 44px;
        min-width: 44px;
        width: 44px;
        text-align: right;
    }
}

table.listing tbody tr.expand {
    background: #f1f1f1;
}

table.listing tr.expand td input[type="text"] {
    border: 1px solid #ccc;
    cursor: text;
}

.expand span.btns {
    display: inline-block;
}

table.listing tbody tr.morelist-options {
    display: none;
}

table.listing.planner-create.sku th:last-child, table.listing.planner-create.sku td.upload-controls {
    padding: 0 8px 0 0;
    min-width: 78px;
    width: 78px;
    max-width: 78px;
}

    table.listing.planner-create.sku td.upload-controls span {
        margin: 0 0 0 4px !important;
    }

.textleft, .textleft input[type="text"] {
    text-align: left !important;
}

.textright, .textright input[type="text"] {
    text-align: right !important;
}

.sum_togglecontent .textright .select2, .sum_togglecontent .textright .select2 input[type="text"] {
    text-align: left !important;
}

.textcenter, .textcenter input[type="text"] {
    text-align: center !important;
}

.button-orange.addmore {
    margin: 0 10px 0 0;
    padding: 4px 2px 4px 10px;
}

table.listing.planner-create tbody tr.morelist-options {
    background: #f2f2f2;
}


.thumbnail-seciton {
    float: left;
    position: relative;
    clear: both;
}

#slider {
    padding: 0 30px;
}

.pro-list-options {
    display: inline-block;
    width: 100%;
}

ul.gallery {
    list-style: none;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 5px;
}

    ul.gallery li {
        display: inline-block;
    }

        ul.gallery li a img {
            height: 140px;
            width: 200px;
        }

#previous-btn, #next-btn {
    font-size: 36px;
    cursor: pointer;
    font-weight: bold;
    height: 38px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    margin: -19px 0 0;
    width: 20px;
}

#next-btn {
    left: auto;
    right: 0;
}

.uploadicon {
    cursor: pointer;
    display: inline-block;
    height: 25px;
    margin: 0 0 0 -6px;
    text-align: center;
    width: 31px;
    position: relative;
}

    .uploadicon:before {
        font-family: "FontAwesome";
        content: "\f03e";
        position: absolute;
        font-size: 23px;
        top: 0;
        left: 0;
        line-height: 23px;
    }

.uploadvideoicon {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 0 0 -6px;
    text-align: center;
    width: 27px;
    position: relative;
}

    .uploadvideoicon:before {
        font-family: "FontAwesome";
        content: "\f03d";
        position: absolute;
        font-size: 23px;
        top: 0;
        left: 0;
        line-height: 23px;
    }

.uploadicon .fa {
    font-size: 18px;
    color: #666;
}

.uploadicon:hover .fa {
    color: #dd6d17;
}

table.listing tr.sku-fields {
    background: #f5f5f5;
}

    table.listing tr.sku-fields.catalog-form {
        background: #fff;
        border: none;
    }

a.skufieldlist {
    text-decoration: none;
}

table.listing tr.sku-fields .editorfield .controls {
    width: 100%;
}

table.listing tr.sku-fields td {
    text-align: left !important;
    padding: 6px 0 !important;
    border: 1px solid #e1e1e1;
}

table.listing tr.sku-fields .sku-fielditems {
    display: inline-block;
    width: 32%;
    padding: 6px 10px 6px 12px;
    opacity: 0;
}

table.listing tr.sku-fields.showfields .sku-fielditems {
    opacity: 1;
}

    table.listing tr.sku-fields.showfields .sku-fielditems label {
        font-size: 13px;
        padding: 0 0 3px;
    }

.sku-fielditems .select2-container-multi .select2-choices .select2-search-field input[type="text"] {
    height: 28px;
    border: none !important;
    width:100%;
}

table.listing tr.sku-fields td input[type="text"] {
    border: 1px solid #e1e1e1;
    height: 34px;
    text-align: left;
}

.dropzone {
    min-height: 35px;
    padding: 5px 54px;
    border: 2px dashed #42688d;
    width: 100%;
    color: #666;
    height: 35px;
    float: left;
    position: relative;
}

    .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
        cursor: pointer;
    }

    .dropzone .dz-preview {
        display: none;
    }

    .dropzone input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        opacity: 0;
    }

.dz-default.dz-message {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

.upload-preview {
    float: left;
    width: 37%;
    margin: 20px 0 0;
}

.imgsuploaded {
    float: left;
    width: 100%;
    position: relative;
    clear: both;
    padding: 0 0 0 3%;
}

    .imgsuploaded h2 {
        font-size: 18px;
        border-bottom: 1px solid #e1e1e1;
        padding: 0 0 8px;
        float: left;
        width: 100%;
        color: #666;
    }

.upload-imgwrap {
    box-sizing: border-box;
    float: left;
    height: 194px;
    padding: 12px 0 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    clear: both;
}

.notifytext {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    text-align: center;
}

.dz-preview {
    border: 1px solid #e2e2e2;
    box-shadow: 0 1px 5px 0px #ccc;
    display: inline-block;
    margin: 0 6px 10px;
    position: relative;
    vertical-align: top;
}

.dz-remove {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    right: 0;
    font-size: 0;
    cursor: pointer;
}

    .dz-remove:before {
        background: radial-gradient(ellipse at center, #222940 0%, #10141f 100%);
        border-radius: 50%;
        content: "\f057";
        font-family: "FontAwesome";
        font-size: 25px;
        position: absolute;
        right: 2px;
        top: 2px;
        color: #666;
        line-height: 19px;
    }

    .dz-remove:hover:before {
        background: #70a5d8;
    }

.dz-image {
    width: 90px;
    min-height: 25px;
}

    .dz-image img {
        max-width: 100%;
    }

.imgsuploaded.uploaded {
    float: right;
    clear: none;
    width: 56%;
    margin: 20px 0 0;
    border-left: 1px solid #e1e1e1;
    padding: 0 0 0 3%;
}

/***dropzone overwrite styling don't use****/
.imgsuploaded .dz-details, .imgsuploaded .dz-progress, .imgsuploaded .dz-error-message, .imgsuploaded .dz-success-mark, .imgsuploaded .dz-error-mark {
    display: none;
}
/***dropzone overwrite styling don't use****/

.morelist-options {
    width: 920px;
}

.total_imgs {
    display: inline-block;
    width: 43%;
    float: left;
}

    .total_imgs ul {
        margin: 0;
        list-style: none;
        border: 1px solid #5bacdf;
        box-sizing: border-box;
        padding: 5px;
        height: 260px;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .total_imgs ul li {
            background: #fff;
            border: 1px solid #ccc;
            height: 80px;
            float: left;
            margin: 0 4px 2px 0;
            overflow: hidden;
            width: 24%;
            position: relative;
            cursor: pointer;
        }

            .total_imgs ul li img {
                box-sizing: border-box;
                height: 100%;
                padding: 3px;
                position: absolute;
                width: 100%;
            }

.popup-wrap .productcreteheader {
    padding: 5px 0 10px;
}

.total_imgs ul li span.delete {
    display: none;
}

.total_imgs span.imgorder {
    display: none;
}

.total_imgs ul li.selected:after {
    background: #fff;
    text-align: center;
    position: absolute;
    right: 2px;
    top: 3px;
    font-family: FontAwesome;
    content: "\f00c";
    font-size: 13px;
    color: #dd6d17;
    height: 19px;
    width: 19px;
    line-height: 20px;
    border-radius: 50%;
}

.selected-images {
    float: right;
    width: 43%;
}

    .selected-images ul {
        border: 1px solid #5bacdf;
        height: 260px;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 5px;
    }

        .selected-images ul li {
            background: #fff;
            border: 1px solid #ccc;
            height: 80px;
            float: left;
            margin: 0 4px 3px 0;
            width: 24%;
            position: relative;
            cursor: pointer;
        }

            .selected-images ul li img {
                box-sizing: border-box;
                height: 100%;
                padding: 3px;
                position: absolute;
                width: 100%;
            }

.morelist-options span.title {
    font-size: 14px;
    padding: 0 0 5px;
    display: block;
    color: #666;
}

.morelist-options .button-orange {
    float: left;
    margin: 14% 3% 0;
    padding: 0;
}

    .morelist-options .button-orange a {
        padding: 7px 12px;
    }

.morelist-options .addimagesbtn.button-orange i {
    padding-left: 5px;
}

.selected-images span.delete {
    background: #fff;
    border-radius: 50%;
    color: #dd6d17;
    font-size: 14px;
    font-weight: bold;
    height: 17px;
    position: absolute;
    right: 3px;
    text-align: center;
    top: 3px;
    width: 16px;
    line-height: 17px;
    z-index: 1;
}

.popup-wrap span.imgorder label {
    float: left;
    font-size: 13px;
}

.upload-button.button-blue {
    position: absolute;
    right: 0;
    top: -5px;
    padding: 5px 16px 3px;
}

.uploaded .upload-imgwrap {
    height: 280px;
}

.pageheader .button-orange {
    margin: 0 0 0 5px;
}

/****Product create sku listing starts****/



/*****date picker styles starts*****/

.ui-datepicker .ui-widget-content {
    background: #fff !important;
    border: 1px solid #5bacdf;
    box-shadow: 0 1px 4px 2px #cdcdcd;
    font-size: 14px;
}

.ui-datepicker .ui-widget-header {
    background: #7e7e7e;
    border: medium none;
    border-radius: 0 !important;
    color: white;
    font-weight: bold;
}

.ui-datepicker th {
    border: 0 none;
    color: #666;
    font-weight: normal;
}

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default {
    background: #ccc;
    border: 1px solid #bfbfbf !important;
    color: #666;
    font-weight: normal !important;
}

.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-header .ui-state-highlight,
.ui-datepicker .ui-state-hover, .ui-datepicker .ui-widget-content .ui-state-hover,
.ui-datepicker .ui-widget-header .ui-state-hover, .ui-datepicker .ui-state-focus,
.ui-datepicker .ui-widget-content .ui-state-focus,
.ui-datepicker .ui-widget-header .ui-state-focus {
    background: #7e7e7e none repeat scroll 0 0;
    border: 1px solid #bfbfbf;
    color: white;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    background: transparent !important;
    margin-top: -6px;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover,
.ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover {
    border: none !important;
    background: transparent !important;
    top: 2px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-next.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover {
    right: -3px;
}

.ui-datepicker .ui-datepicker-prev span {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 7px solid transparent;
}

.ui-datepicker .ui-datepicker-next span {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 10px solid #fff;
    border-bottom: 7px solid transparent;
}

/*****date picker styles ends*****/


/***dropdown common styles starts***/

.select-wrapper {
    float: left;
    display: inline-block;
    border: 1px solid #e1e1e1;
    position: relative;
    background: url("../images/selectArrow-green.png") no-repeat 94% center #ffff;
    cursor: pointer;
}

    .select-wrapper, .select-wrapper select {
        height: 27px;
        line-height: 26px;
        width: 112px;
        background: url("../images/selectArrow-green.png") no-repeat 94% center #ffff;
        color: #666;
    }

        .select-wrapper .holder {
            cursor: pointer;
            display: block;
            font-size: 13px;
            margin: 0 24px 0 5px;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            z-index: 1;
        }

        .select-wrapper select {
            margin: 0;
            position: absolute;
            z-index: 2;
            cursor: pointer;
            outline: none;
            opacity: 0;
            _noFocusLine: expression(this.hideFocus=true);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            -khtml-opacity: 0;
            -moz-opacity: 0;
            font-size: 13px;
        }

/***dropdown common styles ends***/

/***product-view styles starts***/


mainGrid tr td input[type="text"] {
    padding: 2px 10px;
    text-align: left;
    width: 100%;
}

mainGrid tr th:first-child,
mainGrid tr td:first-child {
    padding: 5px 0;
    vertical-align: middle;
    max-width: 20px;
    min-width: 20px;
    width: 20px;
}

table.listing tr th.check-box, table.listing tr td.check-box {
    max-width: 28px;
    min-width: 28px;
    padding: 10px 0 10px 10px;
    width: 28px;
}

mainGrid tr th:last-child, mainGrid tr td:last-child {
    max-width: 34px;
    width: 34px;
    min-width: 34px;
    text-align: right;
}

.product-view .fa-gear {
    cursor: pointer;
}

table.listing tr th.numeric, table.listing tr td.numeric {
    text-align: right !important;
}

.popup.gridsettings {
    width: 560px;
}

.gridsettings .popup-wrap .productcreteheader {
    margin: 0 0 8px;
}

.gs-left, .gs-right {
    width: 48%;
}

.gridsettings .popup-wrap {
    min-height: 238px;
}

.gs-left .select2-container {
    width: 242px !important;
}

.gs-left .select2-container--default .select2-selection--multiple {
    max-height: 132px;
    overflow-x: hidden;
    overflow-y: auto;
}

.gs-left .select2-container--default .select2-selection--multiple, .gs-left .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ccc;
}

.gs-left .select2-results__option {
    padding: 3px 8px;
    font-size: 13px;
}

.gs-left ul li {
    font-size: 13px;
}

.gs-left .title, .gs-right .title {
    padding: 5px 0;
    color: #666;
}

.gs-left select {
    font-size: 13px;
}

.gs-right ul {
    margin: 0;
    padding: 0 0 5px;
    width: 100%;
    float: left;
}

    .gs-right ul > li {
        background: linear-gradient(to right, #f5f5f5 0%, #e2e2e2 100%);
        box-sizing: border-box;
        color: #666;
        float: left;
        margin: 0;
        padding: 0;
        width: 100%;
        list-style: none;
        border-top: 1px solid #ccc;
    }

        .gs-right ul > li:last-child {
            border-bottom: 1px solid #e1e1e1;
        }

    .gs-right ul li label {
        float: left;
        font-size: 13px;
    }

    .gs-right ul li span.prop-head {
        width: 100%;
        display: inline-block;
        font-size: 13px;
        padding: 3px 8px;
        cursor: pointer;
    }

span.prop-head .fa-caret-right {
    float: left;
    font-size: 17px;
    line-height: 17px;
    margin: 0 5px 0 0;
}

span.prop-head.show .fa-caret-right {
    font-size: 18px;
    line-height: 19px;
}

    span.prop-head.show .fa-caret-right:before {
        content: "\f0d7";
    }

.gs-right ul li span {
    float: right;
    width: 92px;
}

    .gs-right ul li span select {
        width: 92px;
        font-size: 12px;
        color: #666;
        background: #fff;
        border: 1px solid #e1e1e1;
    }

.popup-wrap .gs-right ul li span input[type="text"] {
    padding: 1px 5px;
    margin: 0;
    color: #666;
    box-shadow: none !important;
    font-size: 12px;
}

.gs-right ul ul {
    padding: 0;
    background: #ececec;
    display: none;
}

.gs-right ul li ul li {
    padding: 2px 5px 2px 18px;
    font-size: 12px;
    color: #666;
    background: #fff;
}

    .gs-right ul li ul li label {
        color: #666;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }

    .gs-right ul li ul li:last-child {
        border-bottom: none;
    }

.clearfix {
    clear: both;
}

.gridsettings .button-wrap {
    padding: 15px 0 0;
}

.gridsettings .button-orange {
    padding: 0;
    margin: 0 0 0 10px;
}

.popup-wrap .button-orange input[type="submit"] {
    background: transparent;
    border: medium none;
    float: left;
    padding: 7px 12px;
}

.button-dropdown .fa-sort-desc {
    border-left: 1px solid #586a7c;
    height: 32px;
    margin: 0;
    padding: 4px 6px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    .button-dropdown .fa-sort-desc:hover, .button-dropdown .fa-sort-desc.active {
        background: #484848;
        border-radius: 0 4px 4px 0;
    }

.button-dropdown div:not(.slide) {
    display: block;
    position: relative;
}
.button-dropdown div.slide {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 104%;
    width: 120px;
    display: none;
    box-shadow: 1px 2px 6px 0 #000;
    -webkit-box-shadow: 1px 2px 6px 0 #000;
    float: left;
}

.button-dropdown div ul {
    margin:0; padding:0; width:100%;
}

.button-dropdown div ul li {
    background: radial-gradient(ellipse at center, #222940 0%, #10141f 100%);
    border: 1px solid #e1e1e1;
    text-align: left;
    box-sizing: border-box;
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.popup-wrap .button-orange span ul li input[type="submit"] {
    color: #666;
    width: 100%;
    padding: 3px 0;
}

.button-dropdown div ul li input {
    padding: 5px 12px !important;
    text-align: left;
}

.button-dropdown div ul li:hover {
    background: #70a5d8;
    color: #fff !important;
}

.button-dropdown div ul li input {
    width: 100%;
    color: #666;
}

.button-dropdown.export {
    display: inline-block;
    position:relative;
}

.button-dropdown.export div.slide {
    right: 0;
    top: 100%;
    width: 144px;
    z-index: 1;
}
.button-dropdown.export div ul li {
    padding: 4px 6px;
    border-top: none;
    background: #fff;
    color: #7e7e7e !important;
    line-height: 25px;
}

.button-dropdown.export div ul li img {
    float: left;
    margin: 0 5px 0 0;
}

.button-dropdown.export div ul li:hover {
    background: #e4e4e4;
}

.button-dropdown.export div ul li:first-child {
    border-top: 1px solid #e1e1e1;
}

.button-dropdown.export span.icon {
    display: inline-block;
    margin-right: -2px;
    padding: 0 0 0 3px;
}

.button-dropdown.export .fa-external-link {
    top: 3px;
}

.export.onprocess .fa-external-link, .export .fa-spinner {
    display: none;
}

.export.onprocess .fa-spinner {
    display: block;
}

.viewlistname {
    display: inline-block;
    vertical-align: top;
    width: 82%;
}

    .viewlistname label {
        display: inline-block;
        padding: 5px 0 0;
        vertical-align: top;
    }

    .viewlistname span {
        display: inline-block;
        margin: 0 0 0 10px;
        width: 72%;
    }
/***product-view styles ends***/

/***checkbox common styles starts***/

.check-wrapper {
    position: relative;
    width: 15px;
    height: 16px;
    display: inline-block;
    background: url('../images/login-check.png') no-repeat center;
    top: 1px;
}

    .check-wrapper.checked {
        background: url('../images/login-checked.png') no-repeat center;
    }

    .check-wrapper input[type="checkbox"] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }

/***checkbox common styles ends***/

.container-left {
    width: 80%; /*position:relative;*/
}

.container-right.options {
    width: 300px;
    margin: 0 0 0 20px;
}

.form-horizontal .control-label {
    padding-top: 0;
}

.container-left.options .form-horizontal .addprodleft.control-label {
    width: 170px;
}

.container-left.options {
    width: 492px;
}

#ProductConfigSKU div.container-left.options {
    width: 100%;
}

.container-right.options .addprodleft {
    width: 100px;
}

.container-right.options .controls input {
    height: 30px;
}

.container-right.options .select2-container-multi .select2-choices {
    border: 1px solid #bfbfbf;
    font-size: 14px;
}

.container-right.options .select2-choices input {
    height: 28px;
}

.select2-container-multi .select2-choices {
    border: 1px solid #bfbfbf;
}

.customerid label, .customerid .controls {
    display: inline-block;
    width: auto !important;
    margin: 0 !important;
}

    .customerid .controls span {
        font-size: 14px;
        vertical-align: middle;
    }

.horizontal-tabheader {
    box-shadow: 0 1px 2px -1px #1d1d1d;
    box-sizing: border-box;
    float: left;
    margin: 10px 0 0;
    padding: 0;
    position: relative;
    width: 100%;
}

    .horizontal-tabheader ul {
        margin: 0;
        padding: 0;
    }

        .horizontal-tabheader ul li {
            color: #929292;
            cursor: pointer;
            float: left;
            font-family: "Open Sans",sans-serif;
            font-size: 15px;
            list-style: outside none none;
            margin: 0;
            padding: 8px 40px 8px 20px;
            position: relative;
            background: #dddddd;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

            .horizontal-tabheader ul li a {
                text-decoration: none !important;
                color: #666
            }

            .horizontal-tabheader ul li:hover a, .horizontal-tabheader ul li.show a {
                color: #666;
            }

            .horizontal-tabheader ul li:after {
                border-left: 28px solid transparent;
                border-top: 38px solid white;
                content: "";
                height: 0;
                position: absolute;
                right: 0;
                top: 0;
                width: 0;
            }

            .horizontal-tabheader ul li:hover, .horizontal-tabheader ul li.show {
                background: #333;
                color: #fff !important;
            }

                .horizontal-tabheader ul li:hover span.tab-delete,
                .horizontal-tabheader ul li.show span.tab-delete {
                    width: 20px;
                    height: 20px;
                    font-size: 20px;
                    padding: 3px 0;
                    box-shadow: 0 2px 3px #999;
                    -webkit-box-shadow: 0 2px 3px #999;
                    top: -8px;
                    left: -6px;
                    border: 1px solid #7fc6fb;
                }

.horizontal-tabcontent {
    float: left;
    width: 100%;
    box-sizing: border-box;
    display: none;
}

    .horizontal-tabcontent.show {
        display: block;
    }

    .horizontal-tabcontent .container-left {
        padding: 15px 10px;
        width: 100%;
    }

    .horizontal-tabcontent .form-group {
        display: inline-block;
        margin: 0 0 15px 1%;
        width: 32%;
    }

.form-group.threecolumn-layout {
    width: 100%;
    margin-left: 0;
    display: block;
}

.fullwidth-column {
    width: 100% !important;
}

.form-group.threecolumn-layout .controls {
    width: 100%;
}

.uploadimage .dropzone {
    padding: 5px;
}

.small-col-width .controls {
    text-align: center;
}

.form-group.threecolumn-layout > label {
    text-align: inherit;
    width: 100%;
    background: #f5f5f5 !important;
    border-radius: 4px 4px 0 0;
    vertical-align: middle;
    padding: 4px 0;
    height: 56px;
    padding-right: 16px !important;
    padding-left: 16px !important;
    line-height: 3.375rem;
    vertical-align: middle;
    color: #666;
}

.form-group.twocolumn-layout {
    width: 62%;
    margin-left: 0;
    display: block;
}

    .form-group.twocolumn-layout .controls {
        width: 100%;
    }

.full-column-layout table.grid tr td {
    padding: 5px 10px;
    vertical-align: top;
}

.horizontal-tabcontent .form-group:nth-of-type(3n+1) {
    margin-left: 0;
}

.addcontacts {
    display: inline-block;
    margin: 5px 0 0;
    position: relative;
    top: 0;
    vertical-align: middle;
}

    .addcontacts a.button-orange {
        line-height: 15px;
        padding: 5px 5px 5px 9px;
        text-align: center;
        color: #fff !important;
    }

.horizontal-tabcontent .addprodleft.control-label {
    text-align: left !important;
    width: 100%;
}

.tab-delete {
    background: #fff;
    border-radius: 0;
    box-shadow: 0 0 2px 1px #ccc;
    float: left;
    font-size: 12px;
    height: 14px;
    left: 1px;
    line-height: 10px;
    position: absolute;
    text-align: center;
    top: 1px;
    width: 14px;
    color: #cacaca;
}

    .tab-delete:hover {
        color: #ec8b40;
    }

.show .tab-delete {
    color: #337ab7;
    box-shadow: none;
}

    .show .tab-delete:hover {
        color: #7fc6fb;
    }

.horizontal-tabcontent .controls {
    width: 100%;
}

.container-left .customer-search {
    position: absolute;
    right: 18px;
    top: -5px;
}

.fl-advsearch .productcreteheader {
    position: relative;
}

.container-left .customer-search .button-orange {
    font-size: 13px;
    padding: 4px 12px;
    color: #fff !important;
    text-decoration: none;
}

.popup.fl-advsearch {
    display: none;
    float: left;
    width: 1086px;
    z-index: 2003;
    padding: 0 0 15px;
    position: absolute;
    margin-left: -550px !important;
    left: 50%;
    top: 6%;
    margin-top: 0 !important;
}

    .popup.fl-advsearch .popup-wrap {
        float: left;
    }

    .popup.fl-advsearch.ui-draggable {
        top: 6%;
    }

.summary-panel .popup.fl-advsearch {
    width: 1100px;
    top: 16%;
    margin-left: -550px !important;
}

.summary-panel .fl-advsearch-section div {
    width: 36%;
}

.expand-collapse {
    cursor: pointer;
    font-size: 22px;
    right: 6px;
    top: 5px;
    position: absolute;
}

    .expand-collapse.slide .fa-angle-down:before {
        content: "\f106";
    }

.fl-advsearch .button-orange {
    padding: 6px 12px;
    margin: 2px 0 0;
}

table.listing.fl-advsearch {
    margin: 0;
    table-layout: fixed;
}

/*table.listing.fl-advsearch tr th:nth-of-type(2), table.listing.fl-advsearch tr td:nth-of-type(2) {  max-width: inherit;  width: inherit; }*/

.fl-advsearch-section {
    display: block;
    margin: 0 0 10px;
}

    .fl-advsearch-section div.adv-fields {
        display: inline-block;
        margin: 0;
        vertical-align: top;
        width: 33%;
        padding: 5px;
    }

        .fl-advsearch-section div.adv-fields label {
            width: 100%;
            font-size: 13px;
            margin: 0 0 4px;
        }

    .fl-advsearch-section span.inputwrap {
        display: inline-block;
        width: 100%;
    }

    .fl-advsearch-section .two-fields select {
        height: 29px;
        width: 38%;
        border: 1px solid #bfbfbf;
        background: #fff;
        border-radius: 4px;
        color: #666;
    }

    .fl-advsearch-section span.filterfield {
        float: right;
        width: 100%;
    }

    .fl-advsearch-section .two-fields span.filterfield {
        width: 59%;
    }

    .fl-advsearch-section span.filterfield input {
        margin: 0;
    }

    .fl-advsearch-section .select-wrapper {
        border-radius: 4px;
        min-width: 93px;
        width: 39%;
        height: 31px;
        line-height: 29px;
    }

    .fl-advsearch-section input {
        border-radius: 4px;
    }

.fl-advsearch tr.selectedview {
    background: #f1f1f1;
}

.fl-advsearch-section .select-wrapper select {
    width: 99%;
}

.row-selected td {
    background: #f1f1f1 !important;
}

table.listing.fl-advsearch tbody tr:hover td {
    cursor: pointer;
}

table.listing.fl-advsearch tr th {
    white-space: inherit;
    position: relative;
}

table.listing.fl-advsearch tr th, table.listing.fl-advsearch tr td {
    word-wrap: break-word;
}

    table.listing.fl-advsearch tr th span.colmn-sort {
        position: absolute;
        margin: -10px 15px 0 4px;
        right: -6px;
        top: 50%;
    }

.textaligntop .addprodleft.control-label {
    padding-top: 10px;
}

.upload-banner .dropzone {
    margin: 0 0 5px;
}

.richtexteditor {
    width: 1000px;
}

#dailogue.popup {
    width: 1000px;
    min-height: 500px;
}

.cke {
    margin: 0 0 10px !important;
}

.richtexteditor .button-orange {
    margin-left: 10px;
    padding: 4px 12px;
}

.editorfield .controls {
    position: relative;
}

.text-editor {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #7e7e7e;
    border-radius: 4px;
    right: 0;
}

    .text-editor a {
        display: block;
        width: 24px;
        height: 24px;
        background: url("../images/text-editor.png") no-repeat center;
    }

.editorfield .controls textarea {
    padding-right: 24px;
}

.cke_contents {
    min-height: 294px;
}

.msg-alert {
    display: none;
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    top: -250px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    padding: 0;
    width: 100%;
    margin: 0;
    vertical-align: top;
    z-index: 2003;
    left: 0;
}

    .msg-alert.show {
        top: 66px;
        display: block;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
    }

.glb-msg-alert {
    display: none;
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    top: -250px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    display: inline-block;
    padding: 0;
    width: 100%;
    margin: 0;
    vertical-align: top;
    z-index: 2003;
    left: 0;
}

    .glb-msg-alert.show {
        top: 66px;
        display: block;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
    }

.then-msg {
    min-width: 330px;
    display: inline-block;
    font-size: 18px;
    max-width: 100%;
}

.stickmsg.fixedtopmsg {
    top: 120px;
    position: fixed;
    z-index: 2;
}

.stickmsgwrap .menuinnertab {
    padding: 55px 0 0;
}

.then-msginner {
    background: #009344;
    background: -moz-linear-gradient(top, #009344 1%, #7dd673 82%);
    background: -webkit-linear-gradient(top, #009344 1%,#7dd673 82%);
    background: linear-gradient(to bottom, #009344 1%,#7dd673 82%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009344', endColorstr='#7dd673',GradientType=0 );
    border-top: 1px solid #fff;
    box-shadow: 0 1px 6px 1px #868282;
    -webkit-box-shadow: 0 1px 6px 1px #868282;
    color: #666;
    box-sizing: border-box;
    float: left;
    padding: 10px 20px !important;
    width: 100%;
    position: relative;
}

    .then-msginner:before {
        position: relative;
        background: url("../images/success-icon.png") no-repeat center;
        width: 29px;
        height: 29px;
        content: "";
        margin: 0 10px 0 0;
        display: inline-block;
        vertical-align: middle;
    }

.msg-close {
    position: absolute;
    right: 0;
    top: 18px;
    right: 14px;
    background: url("../images/msg-close.png") no-repeat;
    width: 11px;
    height: 11px;
    cursor: pointer;
}

.error-msg {
    display: inline-block;
    max-width: 65%;
}

.error-msginner {
    background: #e85f71;
    background: -moz-linear-gradient(top, #e85f71 0%, #f3929b 100%);
    background: -webkit-linear-gradient(top, #e85f71 0%,#f3929b 100%);
    background: linear-gradient(to bottom, #e85f71 0%,#f3929b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e85f71', endColorstr='#f3929b',GradientType=0 );
    border-top: 1px solid #fff;
    box-shadow: 0 1px 6px 1px #868282;
    -webkit-box-shadow: 0 1px 6px 1px #868282;
    color: #000;
    box-sizing: border-box;
    float: left;
    padding: 10px 20px !important;
    width: 100%;
    position: relative;
    text-shadow: none;
    word-wrap: break-word;
}

    .error-msginner:before {
        position: relative;
        background: url("../images/error-icon.png") no-repeat center;
        width: 29px;
        height: 29px;
        content: "";
        vertical-align: middle;
        margin: 0 10px 0 0;
        display: inline-block;
    }

.msg-close {
    position: absolute;
    right: 0;
    top: 18px;
    right: 14px;
    background: url("../images/msg-close.png") no-repeat;
    width: 11px;
    height: 11px;
    cursor: pointer;
}

.field-validation-error, label.error {
    clear: both;
    color: #fff;
    float: left;
    font-size: 12px;
    margin: 2px 0 0;
    width: 100%;
}

.input-validation-error {
    background: #fff;
    border: 1px solid #ccc !important;
}

.success-msg {
    min-width: 330px;
    display: inline-block;
    font-size: 18px;
    max-width: 100%
}

    .success-msginner {
        background: #009344;
        background: -moz-linear-gradient(top,#009344 1%,#7dd673 82%);
        background: -webkit-linear-gradient(top,#009344 1%,#7dd673 82%);
        background: linear-gradient(to bottom,#009344 1%,#7dd673 82%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009344',endColorstr='#7dd673',GradientType=0);
        border-top: 1px solid #fff;
        box-shadow: 0 1px 6px 1px #868282;
        -webkit-box-shadow: 0 1px 6px 1px #868282;
        color: #666;
        box-sizing: border-box;
        float: left;
        padding: 10px 20px !important;
        width: 100%;
        position: relative
    }

    .success-msginner:before {
        position: relative;
        background: url("../images/success-icon.png") no-repeat center;
        width: 29px;
        height: 29px;
        content: "";
        margin: 0 10px 0 0;
        display: inline-block;
        vertical-align: middle
    }

    .warning-msginner {
        background: #ff9800;
        background: -moz-linear-gradient(top,#ff9800 1%,#f4bd6c 82%);
        background: -webkit-linear-gradient(top,#ff9800 1%,#f4bd6c 82%);
        background: background: linear-gradient(to bottom,#ff9800 1%,#f4bd6c 82%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009344',endColorstr='#7dd673',GradientType=0);
        border-top: 1px solid #fff;
        box-shadow: 0 1px 6px 1px #868282;
        -webkit-box-shadow: 0 1px 6px 1px #868282;
        color: #666;
        box-sizing: border-box;
        float: left;
        padding: 10px 20px !important;
        width: 100%;
        position: relative
    }

    .warning-msginner:before {
        position: relative;
        background: url("../images/info-icon.png") no-repeat center;
        width: 29px;
        height: 29px;
        content: "";
        margin: 0 10px 0 0;
        display: inline-block;
        vertical-align: middle
    }

/*****Order Details********/

.main-order-details {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 20px;
}

.address-total {
    display: table;
    width: 100%;
    vertical-align: top;
}

    .address-total .columns {
        display: table-cell;
        width: 33.33%;
    }

.columns-inner {
    box-shadow: 0 0 2px 2px radial-gradient(ellipse at center, #222940 0%, #10141f 100%);
    margin: 10px;
}

.columnsheader {
    background: #dd6d17;
    color: #666;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;
}

.columns-content {
    border: 1px solid #ededed;
    display: inline-block;
    padding: 12px;
    width: 100%;
    background: #fff;
    min-height: 158px;
}

    .columns-content span {
        display: inline-block;
        width: 140px;
    }

.order-info {
    display: inline-block;
    padding: 10px 25px;
    width: 100%;
    vertical-align: top;
}

.ordernumber, .ordertotal {
    background: #fff;
    border-bottom: 2px solid #337ab7;
    box-shadow: 0 1px 4px #ccc;
    color: #337ab7;
    float: left;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 20px;
    width: auto;
}

.orderdate {
    color: #999;
    float: left;
    padding: 18px 0 10px 20px;
    width: auto;
}

.ordertotal {
    float: right;
    background: #fff;
    border-bottom: 2px solid #dd6d17;
    color: #dd6d17;
}

table.listing.orderdetails tr th:last-child, table.listing.orderdetails tr td:last-child {
    width: inherit;
    max-width: inherit;
}

.listing.orderdetails span.skewitem {
    display: inline-block;
    margin: 0 3px;
}

    .listing.orderdetails span.skewitem label {
        font-weight: bold;
    }

.status-content {
    display: table;
    width: 100%;
    clear: both;
    margin: 0 0 15px;
}

    .status-content .columns {
        display: table-cell;
        width: 20%;
        vertical-align: top;
    }

    .status-content .inner {
        margin: 10px;
    }

    .status-content .columns label {
        float: left;
        font-weight: bold;
        margin: 8px 5px 0 0;
    }

    .status-content .columns .select-wrapper, .status-content .columns .select-wrapper select {
        width: 100%;
        height: 37px;
        border-radius: 4px;
        line-height: 26px;
    }

    .status-content .columns .select-wrapper {
        width: 76%;
    }

        .status-content .columns .select-wrapper .holder {
            line-height: 36px;
        }

    .status-content .columns.description {
        width: 24%;
    }

        .status-content .columns.description .inner span {
            width: 72%;
            float: left;
        }

            .status-content .columns.description .inner span input[type="text"] {
                border: 1px solid #ccc;
                border-radius: 4px;
                font-size: 15px;
                height: 36px;
                padding: 5px;
                width: 100%;
            }

    .status-content .columns.paymentmode .inner span { /*margin-top:8px;*/
        float: left;
    }

    .status-content .columns.statusdate {
        width: 18%;
    }

        .status-content .columns.statusdate .inner span.datetime_picker {
            min-width: 200px;
            float: left;
        }

/*****Order Details Ends********/

.proprice-date .datetimepicker-widget.dropdown-menu {
    top: auto !important;
    bottom: 36px !important;
}

.pagecontent.priceinfo form {
    display: inline-block;
    width: 100%;
}

.priceinfo .form-horizontal .addprodleft.control-label, .priceinfo .form-innerright .control-label {
    vertical-align: top;
    padding: 7px 10px 0 0;
}

.priceinfo .container-left {
    width: 755px;
}

.priceinfo .form-innerleft {
    width: 40%;
    margin-right: 15px;
}

.priceinfo .controls {
    width: 64%;
}

.controls.multiplefields .form-innerleft,
.controls.multiplefields .form-innerright {
    width: 50% !important;
    margin: 0;
    min-width: inherit;
    padding: 0 10px 0 0;
}

.controls.multiplefields .form-innerright {
    margin-right: 0;
    padding-right: 0;
}

    .controls.multiplefields .form-innerright.percentage input[type="text"] {
        width: 90%;
        margin: 0 5px 0 0;
    }

    .controls.multiplefields .form-innerright .transaction-date {
        width: 100% !important;
    }

.priceinfo .controls .form-innerright {
    float: right;
    width: 56%;
}

    .priceinfo .controls .form-innerright .transaction-date {
        float: right;
        width: 71%;
    }

.priceinfo .productcreateleftnav, .priceinfo .productcreaterightnav {
    min-height: 540px;
}

.priceinfo-details {
    width: 100%;
    float: left;
}

table.listing tr.pricetoggle-panel > td {
    padding: 0;
}

.priceinfo-details {
    float: left;
    width: 100%;
}

.membergroup {
    width: 49%;
}

    .membergroup .sum_toggleheader {
        box-shadow: 0 2px 2px #ccc;
        -webkit-box-shadow: 0 2px 2px #ccc;
    }

.nopadding {
    padding: 0 !important;
}

.priceinfo table.listing.tablegrid tr td table.listing {
    margin: 0;
}

.priceinfo table.listing tbody > tr:nth-of-type(1) {
    border: none;
}

.nopaddingLeft {
    padding-left: 0 !important;
}

.nopaddingRight {
    padding-right: 0 !important;
}

.nopaddingTop {
    padding-top: 0 !important;
}

.wrapWord {
    white-space: pre-wrap !important;
    word-break: break-all;
}

.tableBody {
    max-height: calc(100% - 66px);
    overflow-y: auto;
}

.tablegrid {
    width: 100%;
}

    .tablegrid tr th {
        white-space: nowrap;
    }

    .tablegrid tr th, .tablegrid tr td {
        padding: 6px 5px;
        font-weight: bold;
        font-size: 13px;
        text-align: left;
        vertical-align: middle;
    }

        .tablegrid tr th a, tablegrid tr th a:hover {
            color: #666;
            cursor: pointer;
        }

    .tablegrid tbody tr {
        border-top: 1px solid #CCDFF3;
    }

    .tablegrid tr td.statuscolumn {
        height: 100%;
    }

table.listing.tablegrid tr th:last-child, table.listing.tablegrid tr td:last-child {
    max-width: inherit;
    min-width: inherit;
    width: inherit;
}

.sum_innerheader {
    display: inline-block;
    font-weight: bold;
    width: 100%;
    padding: 7px 12px;
    border-bottom: 1px solid #ccc;
    position: relative;
    cursor: pointer;
}

    .sum_innerheader:before {
        position: absolute;
        font-family: 'fontAwesome';
        color: #394B5D;
        font-size: 17px;
        content: "\f107";
        right: 6px;
        top: 4px;
    }

.membergroup .sum_togglecontent {
    margin: 3px 0 6px;
    padding: 0;
    background: #fff;
}

.sum_innercontent {
    display: none;
    padding: 4px;
    border-bottom: 1px solid #ccc;
    background: #fff;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

    .sum_innercontent table.data-grid {
        margin: 0;
        background: #fff;
    }

        .sum_innercontent table.data-grid td {
            width: 50%;
        }

.membergroup .sum_togglecontent table tr td {
    padding: 6px 5px;
}

.sum_innercontent table.data-grid th.medium-col-width:last-child,
.sum_innercontent table.data-grid td.medium-col-width:last-child,
table.quantityfields td.medium-col-width:last-child {
    max-width: 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    text-align: center;
}

.sum_togglecontent table.data-grid td input[type="text"] {
    width: 100% !important;
}

.sum_innercontent table.quantityfields thead {
    background-color: #dddeee;
}

.sum_innercontent table.quantityfields tr th {
    color: #333;
}

.sum_innercontent table.quantityfields tr th,
.sum_innercontent table.quantityfields tr td {
    padding: 4px 5px !important;
}

.quantity-fieldswrap {
    padding: 4px;
    background: #fff;
    display: none;
}

.sum_innercontent table.data-grid tr.quantity-toggle {
    border: none;
}

.sum_innercontent table.data-grid td span.button-orange {
    box-shadow: 0 0 6px 0px #797979;
    -webkit-box-shadow: 0 0px 6px 0px #797979;
}

.button-orange.qtybtn .fa {
    font-size: 12px;
    padding: 1px;
    margin: 0;
}

.quantity-btn.button-orange {
    min-width: 96px;
    font-size: 11px;
}

table.listing tr td table tr.pricetoggle-panel table.grid tr th:last-child,
table.listing tr td table tr.pricetoggle-panel table.grid tr td:last-child {
    width: inherit;
    max-width: inherit;
    min-width: inherit;
}

.sum_togglecontent table.quantityfields thead {
    background: #f1f1f1 !important;
    color: #333;
}

.sum_togglecontent table.quantityfields {
    table-layout: fixed;
}
/* supplier maintanance */
.supplier-contacts .container-left {
    width: 100%;
}

.supplier-contacts .form-group {
    display: inline-block;
    vertical-align: top;
    width: 48%;
}

.supplier-contacts .addprodleft {
    width: 150px;
    text-align: right;
    vertical-align: top;
    padding: 5px 0 0;
}

.supplier-contacts .form-group .controls {
    padding: 0 0 0 7px;
}

.innertoggle:last-child .sum_innerheader {
    border-bottom: none;
}

.innertoggle:last-child .sum_innercontent {
    border-top: 1px solid #ccc;
}

/* supplier maintanance ends*/

.cufon {
    font-size: 12px;
}

.fa.pagemiddle-loader {
    top: 50%;
    margin: -20px 0 0 -20px !important;
    z-index: 3001;
    display: none;
    position: fixed;
    left: 50%;
    font-size: 40px;
    z-index: 3001;
    width: 40px;
    height: 40px;
}

.loaderoverlay {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    z-index: 3000;
}

    .loaderoverlay:before {
        position: absolute;
        background: #1a1a1a;
        width: 100%;
        height: 100%;
        content: "";
        top: 0;
        left: 0;
        opacity: 0.6;
        z-index: 0;
    }

    .loaderoverlay .fa.pagemiddle-loader {
        color: #1658f3;
        display: block;
    }

#LoginOverlay.loaderoverlay {
    opacity: 0.5;
}

#LoginButtonLoader.fa.pagemiddle-loader {
    z-index: 3001;
    color: #666;
}


/* POS Invoice preview starts*/
.printwrap {
    max-width: 98%;
    margin: 0 auto;
}

.printlogo {
    margin: 0 auto 5px;
    text-align: center;
    width: 374px;
}

    .printlogo img {
        max-width: 100%;
    }

.company-info {
    font-size: 13px;
    text-align: center;
}

.order-information {
    display: inline-block;
    margin: 60px 0 20px;
    padding: 15px 0;
    width: 100%;
    border-bottom: 1px solid #000;
}

    .order-information table {
        font-size: 14px;
        line-height: 22px;
        width: 100%;
    }

.ordered-list {
    display: inline-block;
    margin: 20px 0 5px;
    padding: 15px 0 100px;
    width: 100%;
    border-bottom: 1px solid #000;
}

.order_title {
    float: left;
}

.payment_mode {
    float: right;
}

.orderlist-header {
    display: inline-block;
    width: 100%;
    padding: 0 0 10px;
}

.ordered-list table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 0 0 25px;
}

    .ordered-list table tr th, .ordered-list table tr td {
        border: 1px solid #000;
        padding: 5px;
        min-width: 126px;
    }

        .ordered-list table tr th:nth-of-type(2), .ordered-list table tr td:nth-of-type(2),
        .ordered-list table tr th:nth-of-type(4), .ordered-list table tr td:nth-of-type(4),
        .ordered-list table tr th:nth-of-type(5), .ordered-list table tr td:nth-of-type(5),
        .ordered-list table tr th:nth-of-type(6), .ordered-list table tr td:nth-of-type(6) {
            width: 100px;
        }

    .ordered-list table.total td {
        border: none;
        border-top: 1px solid #000;
    }

    .ordered-list table.total tr:nth-of-type(1) td {
        border-top: none;
    }

.print-address {
    font-size: 13px;
    color: #000;
    text-align: center;
    width: 100%;
    display: inline-block;
    margin: 0 0 20px;
}

/* POS Invoice preview ends*/

.window-tab {
    padding: 20px;
}

.windowtab-inner {
    background: #fff;
    border: 4px solid #ececec;
    overflow: hidden;
}

    .windowtab-inner .pagenav {
        width: auto;
        display: inline-block;
    }

.windowtab-controls {
    float: right;
    margin: 8px 8px 0;
}

    .windowtab-controls span {
        background: #fff;
        border: 1px solid #2c3e50;
        color: #2c3e50;
        float: left;
        font-weight: bold;
        height: 25px;
        text-align: center;
        width: 25px;
        cursor: pointer;
        margin: 0 0 0 5px;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
    }

        .windowtab-controls span.minimize {
            font-size: 28px;
            font-weight: normal;
            line-height: 18px;
            position: relative;
        }

        .windowtab-controls span:hover {
            border: 1px solid #0190ec;
            color: #666;
            background: #0190ec;
        }

/* styles for summary panel starts */

.summary-panel {
    display: table-cell;
    width: 0;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    vertical-align: top;
    height: 100%; /*position:relative;*/
}

.pagecontent.summaryview .summary-panel {
    width: 400px;
    padding: 0 0 0 10px;
}

.pagecontent.summaryviewbigger .summary-panel {
    width: 900px !important;
    padding: 0 0 0 10px;
}

.summary-panel .summary-wrap {
    display: block;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    float: right;
    width: 0;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    background: #ffffff;
    -webkit-box-shadow: 0px 1px 6px 0px #ccc;
    box-shadow: 0px 1px 6px 0px #ccc;
    position: relative;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    color: #666;
}

.summaryview .summary-panel .summary-wrap {
    opacity: 1;
    width: 100%;
}

.summary-wrap .preload-overlay {
    position: absolute;
    opacity: 1;
    filter: alpha(opacity=100);
    background: transparent;
}

    .summary-wrap .preload-overlay:before {
        position: absolute;
        content: "";
        background: #000;
        opacity: 0.1;
        filter: alpha(opacity=20);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .summary-wrap .preload-overlay .preloader {
        display: block;
        position: absolute !important;
        top: 20%;
    }

.summary-header {
    position: relative; /*width:0; transition:width 0.4s ease; -webkit-transition:width 0.4s ease;*/
    width: 100%;
    padding: 5px;
}

.pagecontent.summaryview .summary-header {
    width: 100%;
    transition: width 0.4s ease;
    -webkit-transition: width 0.4s ease;
}

.summary-header h4 {
    color: #3c8dbc;
    font-size: 16px;
    border-bottom: 1px solid #BCE1F5;
    padding: 24px 10px 6px 0;
    font-weight: bold;
}

.summary-controls {
    position: absolute;
    right: 0;
    top: 0;
}

    .summary-controls span.panel-controls span {
        background: #fff;
        border: 1px solid #2c3e50;
        color: #2c3e50;
        float: left;
        font-weight: bold;
        height: 20px;
        text-align: center;
        width: 20px;
        cursor: pointer;
        margin: 0 0 0 5px;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        position: relative;
        line-height: 15px;
    }

    .summary-controls span.minmax {
        font-size: 28px;
        font-weight: normal;
        position: relative;
        color: #666;
    }

        .summary-controls span.minmax:before {
            content: "";
            position: absolute;
            left: 50%;
            margin: -6px 0 0 -6px;
            width: 12px;
            height: 12px;
            text-align: center;
            top: 50%;
            border: 1px solid #fff;
            box-shadow: 1px 1px 1px 0px #545454;
        }

    .summary-controls span.panelcontrols:hover {
        border: 1px solid #0190ec;
        color: #666;
    }

.summary-panel .summary-tab-inner {
    position: absolute;
    right: 0;
    padding: 0 1px 0 0;
    left: 0;
    top: 40px;
    bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto; /*removal of overflow hidden shows scroller in mission list- child view page*/
}

.summary-panel .summarytab-content {
    display: none;
    float: left;
    padding: 0;
    width: 100%;
}

.summarytab-content h4 {
    border-bottom: 2px solid #aaa;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 6px;
    padding: 12px 0 6px;
}

.summaryview table.listing {
    table-layout: fixed;
}

    .summaryview table.listing tr th, .summaryview table.listing tr td {
        word-wrap: break-word;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .summaryview table.listing tr.highlightrow {
        background: #7e7e7e;
    }

.summary-content {
    display: block;
    width: 100%;
    clear: both;
    margin-top: 2px;
}

.summary-toggle {
    display: block;
    float: left;
    width: 100%;
    clear: both;
    border: 1px solid #e1e1e1;
    margin: 4px 0;
    border-radius: 4px;
    background: #f9f9f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f9f9f9 0%, rgba(255,255,255,.15) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,rgba(255,255,255,.15) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(#e8e8e8 0%, #ccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='rgba(255,255,255,.15)',GradientType=0 ); /* IE6-9 */
    position: relative;
}

    .summary-toggle .fa.fa-file-text {
        color: #717171;
        position: absolute;
        margin: 0;
        cursor: pointer;
        line-height: 15px;
        width: 15px;
        height: 15px;
        right: 30px;
        top: 8px;
        font-size: 15px;
        z-index: 1;
    }

.sum_toggleheader {
    width: 100%;
    display: inline-block;
    font-size: 13px;
    color: #666;
    padding: 7px 30px 7px 10px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
}

    .sum_toggleheader:before {
        position: absolute;
        font-family: 'fontAwesome';
        color: #666;
        font-size: 17px;
        content: "\f138";
        right: 6px;
        top: 4px;
    }

.sum_togglecontent {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    padding: 0 5px 10px;
    display: none;
}

    .sum_togglecontent .inputwrap .select2-container {
        width: 100% !important;
    }

    .sum_togglecontent .select2-container .select2-choice > .select2-chosen {
        line-height: 28px;
    }

    .sum_togglecontent .select2-container .select2-choice {
        height: 30px;
    }

.summary-toggle.show .sum_toggleheader:before, .sum_toggleheader.show:before {
    content: "\f13a";
}

.sum_togglecontent table {
    width: 100%;
}

    .sum_togglecontent table.data-grid {
        margin: 0;
        table-layout: fixed;
    }

        .sum_togglecontent table.data-grid thead {
            border: 1px solid #f5f5f5;
            background: #f5f5f5;
        }

        .sum_togglecontent table.data-grid tr th, .sum_togglecontent table.data-grid tr td {
            text-align: left;
            word-wrap: break-word;
            padding: 3px;
            vertical-align: middle;
            border-color: #e1e1e1;
        }

        .sum_togglecontent table.data-grid tr td {
            border-color: #e1e1e1;
        }

            .sum_togglecontent table.data-grid tr td select {
                width: 100%;
            }

            .sum_togglecontent table.data-grid tr td input[type="text"] {
                border: 1px solid #bfbfbf;
            }

table.data-grid tr td select {
    background: #fff;
    color: #666;
    border: 1px solid #bfbfbf;
    height: 25px;
}

.sum_togglecontent table.data-grid tr td .button-orange.qtybtn {
    padding: 2px 5px;
}

.sum_togglecontent table tr td {
    padding: 0;
}

.sum_togglecontent #bar {
    width: 100% !important;
}

.summary-panel .label-value-box-inner .label-style {
    background: #e8e8e8; /*background:radial-gradient(ellipse at center, #222940 0%, #10141f 100%);*/
    position: relative;
}

.summary-panel .label-value-box-inner.last {
    margin: 0 0 10px;
}

.summary-content .label-style {
    font-weight: 500;
}

.sum_togglecontent .subtitle {
    padding: 0.4em;
    background: #d6d6d6;
}

    .sum_togglecontent .subtitle input[type="checkbox"] {
        display: inline-block;
        margin: 3px 5px 0 0;
        vertical-align: top;
    }

    .sum_togglecontent .subtitle span {
        display: inline-block;
        vertical-align: top;
    }

table.quantityfields tbody tr td {
    padding: 6px 5px !important;
}

.overlaySummaryView {
    position: fixed;
    width: 10px;
    top: 60px;
    bottom: 0;
    right: 0;
    left: auto;
    background: #fafafa;
    z-index: 2002;
    box-shadow: -1px -1px 3px rgba(0,0,0,.12), -2px 4px 8px rgba(0,0,0,.24);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    color: #666;
}

.dockToggle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #e8e8e8;
    cursor: pointer;
}

.overlaySummaryView.show {
    width: 300px;
}

.overlaySummaryInnerview {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 15px;
}
/*.sum_togglecontent .sum_togglecontent { display:block; }*/
/*.summary-toggle .sum_togglecontent { background:#fff; border: 5px solid #2C3E50; padding:5px; margin:0; }
.summary-toggle .label-value-box { margin:0; }

.summary-toggle:hover, .summary-toggle.show  { background:#2C3E50; }
.summary-toggle:hover .sum_toggleheader, .summary-toggle:hover .sum_toggleheader:before, 
.summary-toggle.show .sum_toggleheader, .summary-toggle.show .sum_toggleheader:before{ color:#666; }*/
.summary-panel div.two-column-header {
    margin: 0;
}

    .summary-panel div.two-column-header div.form-group {
        margin-bottom: 10px;
    }

.summary-panel table.listing tr th, .summary-panel table.listing tr td {
    font-size: 13px;
    padding: 6px;
    white-space: inherit;
}

    .summary-panel table.listing tr td label {
        font-size: 13px;
    }

.summary-panel .small-col-width {
    max-width: 56px;
    width: 56px;
    min-width: 56px;
}

.summary-panel .large-col-width {
    max-width: 86px;
    width: 86px;
    min-width: 86px;
}

.summary-panel .ex-large-col-width {
    max-width: 120px;
    width: 120px;
    min-width: 120px;
}

.summary-panel .medium-col-width {
    max-width: 78px;
    width: 78px;
    min-width: 78px;
}


/* styles for summary panel ends */


/*styles for customer document starts*/
table.listing.documents {
    table-layout: fixed;
}

    table.listing.documents tr td {
        padding: 5px 10px;
    }

        table.listing.documents tr th:first-child, table.listing.documents tr td:first-child,
        table.listing.documents tr th:last-child, table.listing.documents tr td:last-child {
            width: inherit;
            min-width: inherit;
            max-width: inherit;
        }


/*styles for customer document ends*/


/*css for print page*/
@media print {
    body {
        margin: 0;
        padding: 0;
        font-size: 13px;
    }

    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:*/
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }


    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
        margin: 0;
        padding: 0;
    }

    h2 {
        font-size: 16px;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    .printwrap {
        max-width: 98%;
        margin: 0 auto;
    }

    .printlogo {
        margin: 0 auto 5px;
        text-align: center;
        width: 374px;
    }

        .printlogo img {
            max-width: 100%;
        }

    .company-info {
        font-size: 13px;
        text-align: center;
    }

    .order-information {
        display: inline-block;
        margin: 60px 0 20px;
        padding: 15px 0;
        width: 100%;
        border-bottom: 1px solid #000;
    }

        .order-information table {
            font-size: 14px;
            line-height: 22px;
            width: 100%;
        }

    .ordered-list {
        display: inline-block;
        margin: 20px 0 5px;
        padding: 15px 0 100px;
        width: 100%;
        border-bottom: 1px solid #000;
    }

    .order_title {
        float: left;
    }

    .payment_mode {
        float: right;
    }

    .orderlist-header {
        display: inline-block;
        width: 100%;
        padding: 0 0 10px;
    }

    .ordered-list table {
        width: 100%;
        border-collapse: collapse;
        font-size: 15px;
        margin: 0 0 25px;
    }

        .ordered-list table tr th, .ordered-list table tr td {
            border: 1px solid #000;
            padding: 5px;
            min-width: 126px;
        }

            .ordered-list table tr th:nth-of-type(2), .ordered-list table tr td:nth-of-type(2),
            .ordered-list table tr th:nth-of-type(4), .ordered-list table tr td:nth-of-type(4),
            .ordered-list table tr th:nth-of-type(5), .ordered-list table tr td:nth-of-type(5),
            .ordered-list table tr th:nth-of-type(6), .ordered-list table tr td:nth-of-type(6) {
                width: 100px;
            }

        .ordered-list table.total td {
            border: none;
            border-top: 1px solid #000;
        }

        .ordered-list table.total tr:nth-of-type(1) td {
            border-top: none;
        }

    .print-address {
        font-size: 13px;
        color: #000;
        text-align: center;
        width: 100%;
        display: inline-block;
        margin: 0 0 20px;
    }
}

/*css for print page ends*/

/*css styles for shortkey panel starts*/
.shortkeyPanel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    /*z-index: 1000;*/
    background: #252d47;
}

.shortkeyInner {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 45px 0 0;
}

ul.shortkeyColumns {
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul.shortkeyColumns li {
        display: inline-block;
        width: auto;
        height: 50px;
        border-right: 1px solid #151a28;
        vertical-align: middle;
        text-align: center;
        padding: 8px 10px;
        font-size: 12px;
        line-height: normal;
    }

        ul.shortkeyColumns li:last-child {
            border: none;
        }

.shortkeySettings {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    right: 18px;
    top: 50%;
    margin: -10px 0 0;
    font-size: 20px;
    text-align: center;
}
/*css styles for shortkey panel ends*/

/*----------css changes for dashboard starts----------*/
/*.pageheader {
    position: relative;
    z-index: 1;
}*/

.jumbotron i.pageheader-setting {
    color: #888;
    font-size: 20px;
    position: absolute;
    right: 15px;
    top: 25px;
    cursor: pointer;
}

.jumbotron {
    padding: 20px 0;
    margin: 0;
    position: relative;
}

.windowcontainer {
    display: none;
}

    .windowcontainer > div.jumbotron {
        box-shadow: 2px 3px 4px 0 #ccc;
        -webkit-box-shadow: 2px 3px 4px 0 #ccc;
        margin: 5px 0 0;
    }

.main-page {
    padding: 1% 0.7%;
}

.charts {
    margin: 1em 0 0 !important;
}

.recent-quick {
    margin: 0.1em 0 0 !important;
}

#linechart canvas#line {
    width: 100% !important;
    height: 40vh !important;
}

#piechart canvas#pie {
    width: 100% !important;
    height: 27vh !important;
}

div#sortable-recent div.widget {
    margin: 1% 0.6% !important;
}

div.main-page div.charts-grids {
    position: relative;
}

    div.main-page div.charts-grids i.cross {
        position: absolute;
        right: 5px;
        top: 5px;
        color: rgb(106, 105, 105);
        cursor: pointer;
    }

.recent-quick {
    margin: 2em 0 0;
}

div.main-page div.charts-grids i.cross {
    position: absolute;
    right: 5px;
    top: 5px;
    color: rgb(106, 105, 105);
    cursor: pointer;
}

.main-page ul {
    list-style: none;
}

.content-slider i {
    color: #6a6969;
    font-size: 14px;
    width: 22px;
}

.content-slider li a span.recent-activities-desc {
    color: #2489ce;
    font-size: 0.84em;
    line-height: 20px;
}

ul.carousel li a label {
    font-size: 0.8em;
    color: #2489ce;
    cursor: pointer;
}

ul.carousel li {
    float: left !important;
    font-size: 18px;
    margin: 0;
    width: 50% !important;
    padding: 0 3px;
}

    ul.carousel li a {
        color: #2489ce;
        cursor: pointer;
        display: block;
        font-weight: normal !important;
        padding: 0.2em 0;
        text-decoration: none;
        border-bottom: 1px solid #e1e1e1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        ul.carousel li a i {
            font-size: 14px;
            width: 16px;
        }

div.main-page div.widget.recentact {
    width: 65.3%;
}

div.main-page div.widget.qiklaunch {
    margin-left: 2%;
    width: 32%;
}

div.main-page div.charts-grids.widget {
    overflow-y: auto;
    width: 100%;
    clear: both;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 10px;
}

.charts-grids .page_subtitles {
    margin: -10px -10px 0;
    padding: 7px 10px;
}

.charts-grids .c3 {
    width: 100%;
    height: 22vw;
    font-size: 11px;
    clear: both;
    display: inline-block;
    vertical-align: top;
    padding: 10px 0 0;
}

div.main-page div#qiklaunch.charts-grids.widget, div.main-page div#taskStatus.charts-grids.widget {
    overflow: hidden;
}

#taskStatus {
    display: inline-block;
    width: 100%;
}

    #taskStatus .page_subtitles {
        padding: 7px 10px;
    }

    #taskStatus .card-block {
        padding: 8px;
    }

#qiklaunch ul {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 100%;
    height: 40vh;
    overflow-y: auto;
}

.stats-left {
    float: left;
    width: 70%;
    text-align: center;
    padding: 1.02em 1em 1em;
}

.today_sale {
    background: #42688d;
}

.today_visitor {
    background: #585858;
}

.today_order {
    background: #e94e02;
}

.states-mdl .stats-left {
    background-color: #585858;
}

.states-mdl .stats-right {
    background-color: #6C6C6C;
}

.states-last .stats-left {
    background-color: #e94e02;
}

.states-last .stats-right {
    background-color: #ED6A2B;
}

.stats-left h5 {
    color: #666;
    font-size: 1em;
}

.stats-left h4 {
    font-size: 20px;
    color: #666;
    margin-top: 10px;
}

.stats-right {
    float: right;
    width: 30%;
    text-align: center;
    padding: 1.59em 1em;
}

    .stats-right label {
        font-size: 2em;
        color: #666;
    }

div.widget {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

div.main-page div.widget.danger {
    background: linear-gradient(to right, #e47c64 0%, #e36481 30%, #252d47 100%);
    min-height: 125px;
    box-shadow: none;
}

.stats-left.danger {
    background: linear-gradient(to right, #e47c64 0%, #e36481 30%, #252d47 100%);
}

.stats-right.danger {
    background: linear-gradient(to right, #e47c64 0%, #e36481 30%, #252d47 100%);
}

div.main-page div.widget.primary {
    background: linear-gradient(to right, #aaa 0%, #777 100%);
    min-height: 125px;
    box-shadow: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.stats-left.primary {
    background: linear-gradient(to right, #aaa 0%, #777 100%);
}

.stats-right.primary {
    background: linear-gradient(to right, #aaa 0%, #777 100%);
}


div.main-page div.widget.success {
    background: linear-gradient(to right, #48b8e6 0%, #6063c1 100%);
    min-height: 125px;
    box-shadow: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.stats-left.success {
    background: linear-gradient(to right, #aaa 0%, #777 100%);
}

.stats-right.success {
    background: linear-gradient(to right, #aaa 0%, #777 100%);
}

div.main-page div.widget.then {
    background: linear-gradient(to right, #2dc1c9 0%, #7e7e7e 30%, #252d47 100%);
}

.stats-left.then {
    background: linear-gradient(to right, #2dc1c9 0%, #7e7e7e 30%, #252d47 100%);
}

.stats-right.then {
    background: linear-gradient(to right, #2dc1c9 0%, #7e7e7e 30%, #252d47 100%);
}

div.main-page div.widget .bg-icon {
    color: #666;
    font-size: 100px;
    height: 100px;
    width: 100%;
    position: absolute;
    z-index: 0;
    top: 10px;
    left: 0;
    opacity: 0.1;
    padding: 0 15px;
}

.statusTitle {
    color: #fff;
    padding: 10px 0 8px;
    text-shadow: 0 1px 2px #000;
}

.statusfield {
    display: inline-block;
    width: 100%;
    padding: 0 0 10px;
    position: relative;
    color: #fff;
}

    .statusfield h4 {
        float: left;
        font-size: 17px;
        color: #fff;
        text-shadow: 0 1px 2px #000;
    }

    .statusfield label {
        position: absolute;
        right: 0;
        top: 2px;
        font-size: 17px;
        text-shadow: 0 1px 2px #000;
    }

.widget .statusfield label {
    color: white;
}

.smartviewflex .listColumn {
    display: inline-block;
    width: 100%;
}

    .smartviewflex .listColumn .posmenu {
        margin: 0;
        display: block;
        clear: both;
    }

        .smartviewflex .listColumn .posmenu ul {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border: 1px solid #e1e1e1;
            margin: 10px 0 0;
        }

            .smartviewflex .listColumn .posmenu ul li {
                width: 127px;
                margin: 2px !important;
            }

                .smartviewflex .listColumn .posmenu ul li > span {
                    width: 100%;
                    padding: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-flow: column;
                    height: 100%;
                }

                    .smartviewflex .listColumn .posmenu ul li > span span {
                        display: flex;
                        width: 100%;
                        height: 50%;
                        align-items: center;
                        justify-content: center;
                        line-height: 15px;
                        font-size: 13px;
                        padding: 2px;
                    }

                        .smartviewflex .listColumn .posmenu ul li > span span.lmenu-iconlinks {
                            flex-flow: row nowrap;
                        }

                            .smartviewflex .listColumn .posmenu ul li > span span.lmenu-iconlinks i {
                                padding: 0;
                                height: 100%;
                                align-items: center;
                                justify-content: center;
                                display: flex;
                                font-size: 20px;
                                flex: 1;
                            }

.smart-view .windowcontainer:not(.SmartViewMenu) {
    border: 1px solid #e1e1e1;
    margin: 30px 20px 20px;
    padding: 10px;
}

    .smart-view .windowcontainer:not(.SmartViewMenu) .pagecontent {
        display: inline-block;
    }

.pageClose {
    position: absolute;
    top: 12px;
    right: 15px;
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    opacity: 1;
    font-size: 14px;
    text-shadow: none;
    color: #42688d;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

    .pageClose:hover {
        background: #337ab7;
        color: #666;
    }

.smart-view #ViewChartOfAccounts.windowcontainer .pageheadername {
    padding-left: 5px;
}

.smart-view #ViewChartOfAccounts.windowcontainer .pagecontent {
    padding: 0;
    margin: 0;
}

.smart-view #ViewChartOfAccounts.windowcontainer .settings {
    margin: 0;
}

.smart-view #ViewChartOfAccounts.windowcontainer .producttab {
    padding: 0;
    margin: 0;
    border: none;
}

.smart-view #ViewChartOfAccounts.windowcontainer .settings table.grid thead {
    border-bottom: none;
}

.smart-view #ViewChartOfAccounts.windowcontainer .settings table.grid tbody tr {
    border-top: none;
}

    .smart-view #ViewChartOfAccounts.windowcontainer .settings table.grid tbody tr.gridtitle {
        border-bottom: 1px solid #7e7e7e;
    }

        .smart-view #ViewChartOfAccounts.windowcontainer .settings table.grid tbody tr.gridtitle td {
            border-top: 1px solid #7e7e7e;
        }
/*---style-dashboard css---*/
/*---main-content-start---*/
/*--charts--*/
.charts, .row {
    margin: 1em 0 0;
}

div.main-page div.charts-grids canvas#bar {
    width: 100% !important;
    position: relative;
    height: 40vh !important
}

div.main-page div#barchart.charts-grids, div.main-page div#linechart.charts-grids {
    overflow: hidden;
}

h4.title {
    font-size: 1.1em;
    color: #666;
    font-weight: normal;
    margin: 0.5em 0 1em;
    text-transform: uppercase;
    border-bottom: 1px solid #eaeded;
}
/*--//charts--*/

.footer {
    background: #fff;
    padding: 1em;
    width: 100%;
    text-align: center;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
    -webkit-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
    -ms-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
    -o-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
}

    .footer p {
        color: #7A7676;
        font-size: 0.9em;
        line-height: 1.6em;
        font-family: "Roboto Condensed",sans-serif;
        margin: 10px 0 0;
    }

        .footer p a {
            color: #E94E02;
        }

            .footer p a:hover {
                text-decoration: underline;
            }
/*---//footer---*/

.label-value-box {
    /*border: 1px solid #7e7e7e;*/
    clear: both;
    margin: 0 0 5px;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}


.label-value-box-inner {
    border: none;
    /*border-top: 1px solid rgb(45, 80, 116);*/
    table-layout: fixed;
    word-wrap: break-word;
    display: table;
    width: 100%; /*background:rgb(33, 147, 192);*/
    color: #666;
}

    .label-value-box-inner:first-child {
        border-top: none;
    }

    .label-value-box-inner .label-style {
        background: #e8e8e8;
        max-width: 100px;
        display: table-cell;
        font-size: 0.917em;
        overflow: hidden;
        padding: 0.4em;
        text-overflow: ellipsis;
        width: 48%;
        vertical-align: middle;
    }

    .label-value-box-inner .link-content { /*background: rgb(33, 147, 192);*/
        display: table-cell;
        top: 0.0em;
        padding: 5px !important;
        font-size: 13px;
    }

table.data-grid {
    width: 100%;
    margin: 0 0 15px;
}

    table.data-grid tbody tr {
        border: 1px solid #e1e1e1;
        background: #fff;
        color: #666;
    }

        table.data-grid tbody tr td {
            border: 1px solid #e1e1e1;
            word-break: break-all;
        }

    table.data-grid thead { /*background-color: #2C3E50;*/
        color: #666;
        border: 1px solid #333;
        background: linear-gradient(to bottom, #7e7e7e 0%,#252d47 100%); /* Old browsers */
    }


/*----------css changes for bodyrightmain-tab starts----------*/
.menuBorder {
    display: block;
    width: 100%;
    height: 1px;
    background: #e1e1e1;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    top: 55px;
}

.topmenuwrap {
    float: left;
    width: 100%;
    height: 56px;
    overflow: hidden;
    padding: 0 80px 0 10px;
    position: relative;
    z-index: 2001;
}

    .topmenuwrap .btncontrols-wrap {
        position: absolute;
        right: 8px;
        width: auto;
        top: 11px;
        display: none;
    }

    .topmenuwrap .btncontrols {
        display: inline-block;
        width: 30px;
        height: 28px;
        color: #fff;
        font-size: 23px;
        padding: 1px 0;
        text-align: center;
        cursor: pointer;
        background: #7e7e7e;
    }

        .topmenuwrap .btncontrols:hover {
            background: #484848;
        }

.topmenuwrap-inner {
    float: left;
    width: 100%;
    overflow-x: auto;
    height: 56px;
    overflow-y: hidden;
}

ul.bodyrightmain-tab {
    white-space: nowrap;
    padding: 17px 0 0;
    position: relative;
    z-index: 100;
}

    ul.bodyrightmain-tab li.tab-list {
        border-radius: 5px 5px 0 0;
        border: 1px solid #e1e1e1;
        border-bottom: none;
        display: inline-block;
        padding: 5px;
        position: relative;
        cursor: pointer;
        color: #776d6d;
        font-size: 14px;
        border-bottom-width: 2px;
        margin-right: 5px;
        transition: all 0.5s ease;
        background: #e2e0e0;
    }

        ul.bodyrightmain-tab li.tab-list div.tab-list-blk {
            padding: 3px 20px 5px;
        }

        ul.bodyrightmain-tab li.tab-list:hover, ul.bodyrightmain-tab li.tab-list.active {
            background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(254,255,255,1) 52%);
            color: #333;
        }

        ul.bodyrightmain-tab li.tab-list.active {
            border-bottom: 1px solid #fff;
            background: linear-gradient(to bottom, #e6e4e4 0%,rgba(254,255,255,1) 52%);
        }

        ul.bodyrightmain-tab li.tab-list i {
            position: absolute;
            right: 3px;
            top: 2px;
            cursor: pointer;
            font-size: 11px;
            color: #666;
            opacity: 0.6;
            transition: all 0.2s ease;
            -webkit-transition: all 0.2s ease;
            text-shadow: none;
        }

        ul.bodyrightmain-tab li.tab-list.active i, ul.bodyrightmain-tab li.tab-list:hover i {
            font-size: 13px;
            opacity: 1;
            top: -4px;
            right: -5px;
            width: 20px;
            height: 20px;
            border: 1px solid #42688d;
            border-radius: 50%;
            line-height: 18px;
            text-align: center;
            box-shadow: 0 -1px 2px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.24);
            background: #fff !important;
            color: #666 !important;
        }

@-moz-document url-prefix() {
    ul.bodyrightmain-tab li.tab-list.active i,
    ul.bodyrightmain-tab li.tab-list:hover i {
        line-height: 18px;
    }
}
/*----------css changes for bodyrightmain-tab ends----------*/

/*----------css changes for summary top tab icons starts----------*/
.summary-controls {
    position: static;
}

.summary-header h4 {
    padding: 6px;
    clear: both;
}

.summary-header div.summary-controls ul.summary-tab {
    display: inline-block;
    padding: 4px;
}

    .summary-header div.summary-controls ul.summary-tab li.summary-tab-list {
        display: inline-block;
        padding: 4px 6px;
        border: 1px solid rgb(126, 126, 126);
        color: #666;
        cursor: pointer;
        box-shadow: 0 1px 2px rgb(126, 126, 126);
        position: relative;
    }

        .summary-header div.summary-controls ul.summary-tab li.summary-tab-list.active {
            background: #7e7e7e;
            color: #eee;
        }

ul.summary-tab li.summary-tab-list i {
    font-size: 21px;
}

.summary-header div.summary-controls ul.summary-tab li.summary-tab-list:hover {
    background: #3c8dbc;
    color: #666;
}

div.label-value-box-inner span.link-content i {
    color: #717171;
    float: right;
    margin: 2px 10px;
    cursor: pointer;
}

div.label-value-box-inner span.link-content select {
    width: 160px;
}

div.label-value-box-inner span.link-content i:hover {
    color: #3c8dbc;
}

.so-report .fa-file:after, .si-report .fa-file:after {
    position: absolute;
    top: 7px;
    left: 1px;
    content: "SO";
    font-size: 10px;
    color: #666;
}

.si-report .fa-file:after {
    content: "SI";
    left: 3px;
}

ul.summary-tab li.summary-tab-list:hover .fa-file:after {
    color: #3c8dbc !important;
}

div.label-value-box-inner i {
    color: #666;
    float: right;
    margin: 5px 8px 2px 5px;
    cursor: pointer;
    line-height: 8px;
}

    div.label-value-box-inner i:hover {
        color: #3c8dbc;
    }

.summary-header div.summary-controls ul.summary-tab li.summary-tab-list.disabled {
    color: #888 !important;
    background: #fff !important;
    opacity: 0.5;
    cursor: no-drop !important;
}

#spanPriceList {
    display: inline-block;
    width: 100%;
    margin: 0 0 8px;
}
/*----------css changes for summary top tab icons ends----------*/

/*----------css changes for Tree view for product list starts----------*/
table.product-view tbody > tr:hover {
    background: #42688d;
    color: #666;
}

table.product-view tbody tr.mainrow td i {
    margin-left: 5px;
    cursor: pointer;
    font-size: 16px;
    color: white;
}

table.product-view tbody tr.subrow {
    display: none;
}

mainGrid tr.subrow table {
    background: #f1f1f1;
    border-collapse: collapse;
}

    mainGrid tr.subrow table.listing {
        margin: 0;
    }

        mainGrid tr.subrow table.listing thead {
            border: none;
        }

    mainGrid tr.subrow table thead, mainGrid tr.subrow table thead th {
        background: linear-gradient(to bottom, #7e7e7e 0%,#252d47 100%);
        color: white;
    }

        mainGrid tr.subrow table thead tr {
            border: none;
        }

    mainGrid tr.subrow table tbody tr {
        border: none;
        background: #42688d !important;
        color: #c8d4f9;
    }

mainGrid tr.subrow td input[type="text"] {
    padding: 5px 10px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.gridloader .fa-spinner {
    font-size: 25px;
}

.displaytablerow {
    display: table-row !important;
}

.mainrowbg {
    background: #f1f1f1;
}

tr.subrow td div table {
    display: table;
    width: 100%;
    table-layout: fixed;
}

mainGrid tr th:first-child, mainGrid tr td:first-child {
    padding: 0 7px 0 0;
}

mainGrid tr.subrow th:first-child, mainGrid tr.subrow td:first-child {
    padding: 0;
}

tr.subrow td div table tr td {
    width: auto !important;
}

tr.subrow td div table thead th {
    font-weight: bold;
    font-size: 13px;
    color: #333;
}

mainGrid tr th.togglebtn,
mainGrid tr td.togglebtn {
    min-width: 23px !important;
    max-width: 23px !important;
    width: 23px !important;
}

mainGrid tr td span {
    max-width: 200px;
    word-wrap: break-word;
    display: block;
}

mainGrid tr th.icon-column, mainGrid tr td.icon-column {
    width: 32px !important;
    max-width: 32px !important;
    min-width: 32px !important;
    text-align: center;
    padding: 6px 4px;
}

.icon-column i {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    color: white;
}

    .icon-column i:hover {
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
    }

mainGrid tr th.icon-column i, mainGrid tr td.icon-column i {
    margin: 0;
    font-size: 19px;
}

.fa-comments.active {
    color: #FF5722 !important;
    font-size: 15px !important;
}

.fullwidth-content span {
    white-space: pre-wrap;
}
/*----------css changes for Tree view for product list ends----------*/



/*----------css changes for left nav tree view ends----------*/
.bodyrightmain {
    display: table-cell;
    height: 100%;
    position: relative;
    width: 100%;
}

.leftnav-tree.slide {
    min-width: 320px;
    max-width: 320px;
    width: 320px;
}

.leftnav-tree-border {
    border-top: none;
}

.leftnav-treewrap {
    width: 0;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}

.leftnav-tree.slide .leftnav-treewrap {
    width: 320px;
    min-width: 320px;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}

.leftnav-tree-blk .searchmenu {
    border: none;
}

.smartView ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.smartView ul li {
    position: relative;
}

.smartView ul li a {
    position: relative;
    display: block;
    color: #666;
    text-decoration: none;
    padding: 0 !important;
    border-bottom: 1px solid #e1e1e1;
}

.smartView ul li a:before {
    position: absolute;
    right: 100%;
    width: 100%;
    top: 1px;
    content: "";
    height: 100%;
    border-bottom: 1px solid #e1e1e1;
}

.smartView ul.category-list li a:after {
    display: none;
}

.smartView ul li span > span.label {
    padding: 8px 10px;
}

.smartView ul.category-list li > span:not(.parent_icon, .child_icon) {
     position:relative;
}

#AreaSmartView.smartView ul li span > span.label {
    padding-left: 35px;
    position: relative;
}

.smartView ul li span > span:first-child img {
    max-width: 24px;
}

.smartView ul li span > span:first-child * {
    padding-right: 4px;
}

.smartView ul li span > span.tree_controls {
    flex: 0 0 54px;
}

.smartView li > ul li {
    padding-left: 15px;
}

.smartView li .fa-plus-square-o {
    position: relative;
    top: 1px;
    font-size: 14px;
    color: #666;
    margin: 0 5px 0 0;
}

.expand > .fa-plus-square-o:before {
    content: "\f147";
}

.smartView ul.category-list li span { cursor:pointer; }

li.leaf span.label > .fa {
    display: none;
}

.editiconright, .addiconright {
    background: #f5f5f5;
    color: #555;
    padding: 3px 5px;
    border-radius: 4px;
    margin: 0;
    line-height: normal;
}

span.tree_icon {
    width: 17px;
    height: 24px;
    position: absolute !important;
    left: 10px;
    display: none;
}


span.tree_icon {
    background: url("../images/area_icon.png") no-repeat left center;
}

.smartView li > ul li span.tree_icon {
    background: url("../images/pin_icon.png") no-repeat left center;
}

#AreaSmartView span.tree_icon {
    display: block;
}

/*----------css changes for left nav tree view ends----------*/
table.listing tr th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    table.listing tr th.statuscolumn, table.listing tr td.statuscolumn {
        max-width: 10px !important;
        min-width: 10px !important;
        width: 10px !important;
        padding: 0 0 0 7px !important;
    }

table.listing tr td.statuscolumn {
    height: 100%;
}

    table.listing tr td.statuscolumn .status-color {
        height: 100%;
        position: relative;
        background: transparent !important;
    }

        table.listing tr td.statuscolumn .status-color:before {
            position: absolute;
            content: "";
            top: 4px;
            bottom: 4px;
            width: 6px;
        }

.statuscolumn .status-color.red:before {
    background: #ee465a;
}

.statuscolumn .status-color.yellow:before {
    background: #fcce30;
}

.statuscolumn .status-color.green:before {
    background: #5cb85c;
}

.statuscolumn .status-color.white:before {
    background: white
}

.statuscolumn .status-color.orange:before {
    background: #f3930b;
}

.statuscolumn .status-color.lightblue:before {
    background: #33E0FF;
}

.statuscolumn .status-color.purple:before {
    background: #B833FF;
}

mainGrid tr th.treeview, mainGrid tr td.treeview {
    max-width: 21px !important;
    min-width: 21px !important;
    width: 21px !important;
}

.pagecontent.summaryview mainGrid tr th.treeview,
.pagecontent.summaryview mainGrid tr td.treeview {
    max-width: 24px !important;
    min-width: 24px !important;
    width: 24px !important;
}
/*----------css changes for common header list for purchanse order starts----------*/
div.two-column-header {
    margin: 20px 0;
}

    div.two-column-header div.form-group {
        display: inline-block;
        margin-bottom: 7px !important;
        width: 45%;
    }

        div.two-column-header div.form-group label.addprodleft.control-label {
            padding: 4px 10px 0 0;
            text-align: right;
            vertical-align: top;
            width: 170px;
        }

        div.two-column-header div.form-group div.controls {
            display: inline-block;
            width: 54%;
        }
            /*customer support >> tickets alignment*/
            div.two-column-header div.form-group div.controls table td {
                vertical-align: top;
                text-align: left;
            }

.minimize-fields div.two-column-header div.form-group div.controls {
    width: 50%;
}

table.listing.currentsale {
    table-layout: fixed;
}

    table.listing.currentsale .select2-container .select2-choice {
        border-radius: 0;
        height: 28px;
        text-align: left;
    }

        table.listing.currentsale .select2-container .select2-choice > .select2-chosen {
            line-height: 25px;
        }

div.toggle-wrapper table tbody tr td input {
    border: 1px solid #ddd;
}

table.listing tr td .select2-container input[type="text"] {
    width: 100%;
    margin: 2px 0 0;
}

table.listing tr td .select2-results li {
    font-size: 13px;
    text-align: left;
}

div.toggle-wrapper table.listing tr td input[type="text"] {
    border: 1px solid #aaa;
    padding: 2px 3px;
}

input[disabled="disabled"], select[disabled="disabled"], div[disabled="disabled"], button[disabled="disabled"], [disabled="disabled"] {
    opacity: 0.5 !important;
}

div.two-column-header div.form-group.onecol-header-center {
    text-align: center;
    width: 100%;
}

    div.two-column-header div.form-group.onecol-header-center label.addprodleft.control-label {
        margin-left: -100px;
    }

    div.two-column-header div.form-group.onecol-header-center div.controls {
        width: 40%;
    }

div.two-column-header div.form-group.onecol-header-left {
    text-align: left;
    width: 100%;
}

    div.two-column-header div.form-group.onecol-header-left div.controls {
        width: 40%;
    }

        div.two-column-header div.form-group.onecol-header-left div.controls.fullcolumn-layout {
            width: 74.5%;
        }

.ex-large-col-width {
    max-width: 220px;
    width: 220px;
    min-width: 220px;
}

.ex-larger-col-width {
    max-width: inherit !important;
    min-width: inherit !important;
    width: inherit !important;
    white-space: pre-wrap;
}

.large-col-width {
    max-width: 190px;
    width: 190px;
    min-width: 190px;
}

.medium-col-width {
    max-width: 120px;
    width: 120px;
    min-width: 120px;
}

.small-col-width {
    max-width: 85px;
    width: 85px;
    min-width: 85px;
}

.short-small-col-width {
    max-width: 30px;
    width: 30px;
    min-width: 30px;
}

.ex-small-col-width {
    max-width: 15px;
    width: 15px;
    min-width: 15px;
}

.fixed-width-18px {
    max-width: 18px;
    width: 18px;
    min-width: 18px;
}

/* 46 given to support plus/minus buttons in PI,PO, SI, SO */
.icon-col52 {
    max-width: 52px;
    width: 52px;
    min-width: 52px;
}

.noellipsis {
    white-space: unset !important;
    overflow: inherit !important;
    text-overflow: unset !important;
}

.medium-col-width input[type="text"] {
    width: 100% !important;
}

.extra-height {
    width: 100%;
    height: 150px;
    clear: both;
}

.nowidth {
    width: 0px !important;
    min-width: 0px !important;
    max-width: 0px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

th.small-col-width, th.ex-large-col-width, th.medium-col-width, th.ex-small-col-width, td.small-col-width, td.ex-large-col-width, td.medium-col-width, td.ex-small-col-width {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.fullcolumn-layout td.ex-large-col-width {
    overflow: inherit !important
}

.large-col-width.detailview-grid {
    min-width: 140px !important;
    max-width: 140px !important;
    width: 140px !important;
}

/*.detailview-grid .select2-container,
.detailview-grid .large-col-width input[type="text"],
.detailview-grid .medium-col-width input[type="text"],
.detailview-grid .ex-large-col-width input[type="text"],
.detailview-grid .large-col-width select,
.detailview-grid .medium-col-width select,
.detailview-grid .ex-large-col-width select {
    width: 82% !important;
}*/

.detailview-grid .button-orange.detailviews {
    padding: 4px 5px;
    vertical-align: middle;
}

table.listing.currentsale td.medium-col-width, .tablewrapper td.toggleContainer table td div.iconset span {
    overflow: inherit;
}

    .tablewrapper td.toggleContainer table td div.iconset span ul.dropdown-menu {
        left: auto;
        right: 0;
        background: #7e7e7e !important;
        background: -moz-linear-gradient(top, #7e7e7e 0%, #252d47 100%) !important;
        background: -webkit-linear-gradient(top, #7e7e7e 0%,#252d47 100%) !important;
        background: linear-gradient(to bottom, #7e7e7e 0%,#252d47 100%) !important;
        padding: 2px 15px 2px 15px !important;
    }

        .tablewrapper td.toggleContainer table td div.iconset span ul.dropdown-menu li:hover {
            background: #42688d;
            color: #666;
        }
/*----------css changes for common header list for purchanse order ends----------*/
table.grid {
    width: 100%;
    margin: 0 0 2px;
    border: 1px solid #ccdff3;
    table-layout: fixed;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.22);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

    table.grid thead { /*background-color: #2C3E50;*/
        color: #666;
        background: #f5f5f5 !important;
        border-bottom: 1px solid #e1e1e1;
        border-top: 1px solid #e1e1e1;
    }

    table.grid tbody tr {
        /*background: #fff;*/
        border: 1px solid #e1e1e1;
    }

        table.grid tbody tr td:hover {
            cursor: pointer;
        }

        table.grid tbody tr.editable {
            background: #f1f1f1;
        }

    table.grid tr th, table.grid tr td {
        padding: 7px 8px;
        font-size: 14px;
        text-align: center;
    }

    table.grid tr td {
        font-weight: normal;
        cursor: default;
        padding: 5px 10px;
        vertical-align: top;
    }

.form-group.threecolumn-layout .controls .grid input {
    height: 30px;
    border-radius: 0;
    padding: 2px 4px;
}

table.grid tr th.medium, table.grid tr td.medium {
    width: 16%;
    min-width: 144px;
}

table.grid tr th.large, table.grid tr td.large {
    min-width: 210px;
    width: 22%;
}

table.grid tr th.icons, table.grid tr td.icons {
    width: 110px;
    max-width: 110px;
    min-width: 110px;
    text-align: right;
}

table.grid tr th.version, table.grid tr td.version {
    max-width: 74px;
    min-width: 74px;
    width: 74px;
}

table.grid input[type="text"] {
    width: 100%;
    font-size: 13px;
    border: 1px solid #e1e1e1;
    padding: 4px 3px;
}

table.grid select {
    border: 1px solid #e1e1e1;
    font-size: 13px;
    padding: 3px 6px;
    width: 100%;
    float: none;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

table.grid .select2-container .select2-choice {
    background: #f5f5f5 none repeat scroll 0 0;
    border: 1px solid #aaa !important;
    border-radius: 0 !important;
    font-size: 13px;
    height: 28px;
    text-align: left;
}

    table.grid .select2-container .select2-choice > .select2-chosen {
        line-height: 26px;
    }

table.grid .select2-results li {
    font-size: 13px;
    text-align: left;
}

table.grid .select2-search {
    margin: 3px 0 0;
}

table.grid tr:nth-of-type(2n) {
    background: #fff;
}

table.grid tr td.icons a.button-orange.add-option, table.grid tr td.icons a.button-orange.remove-option {
    padding: 2px 8px;
    font-weight: bold;
    border-radius: 4px;
    font-size: 16px;
    line-height: 19px;
    vertical-align: middle;
    box-shadow: none;
}

table.grid tr td.icons a.button-orange.remove-option {
    line-height: 14px;
    padding: 2px 8px 7px;
    text-align: center;
    width: 24px;
}

table.grid tr th.upload, table.grid tr td.upload {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

table.grid tr th.dload, table.grid tr td.dload {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

table.grid tr td.icons input[type=file] {
    width: 22px;
    vertical-align: middle;
    cursor: pointer;
    height: 22px;
    overflow: hidden;
    display: inline-block;
    border: none;
    background: url("../images/upload-icon.png") no-repeat transparent;
    text-indent: -99999px;
}

table.grid tr td.icons a.download {
    width: 22px;
    vertical-align: middle;
    margin: 0 6px;
    font-size: 0;
    cursor: pointer;
    height: 22px;
    overflow: hidden;
    display: inline-block;
    border: none;
    background: url("../images/dload-icon.png") no-repeat transparent;
    text-indent: -99999px;
}

.fullcolumn-layout table.grid tr th, .fullcolumn-layout table.grid tr td {
    font-size: 13px;
 /*   border: 1px solid;*/
    padding: 10px;
    /* min-width: 200px; */
    background: white;
    box-sizing: border-box;
    text-align: left;
}
.fullcolumn-layout{
    overflow: scroll;
}

.fullcolumn-layout table.grid tr td {
    text-align: left;
}

    .fullcolumn-layout table.grid tr td.ex-small-col-width:last-child,
    .fullcolumn-layout table.grid tr td.ex-small-col-width:nth-last-child(2) {
        text-align: center;
    }

#PriceList .form-group.threecolumn-layout > label,
#CustomerEntitlements .form-group.threecolumn-layout > label {
    width: 100%;
    text-align: left;
}

#PriceList .container-left, #CustomerEntitlements .container-left {
    width: 100%;
}

#PriceList .button-orange {
    padding: 4px 5px;
    margin: 0 0 0 10px;
}

    #PriceList .button-orange .fa {
        margin: 0;
    }

#ImageMap .container-left {
    width: 820px;
}

#ImageMap .controls .dropzone {
    width: 128px;
    min-height: inherit;
    line-height: 25px;
    font-size: 12px;
    height: 28px;
    float: none;
    display: inline-block;
    padding: 0;
    vertical-align: middle;
}

#ImageMap .controls .lightbox img {
    width: 30px !important;
    height: 30px !important;
}

.fullcolumn-layout table.grid tr td textarea {
    width: 100%;
    background: #2b334c;
}

.grid-popup {
    display: none;
    z-index: 1;
    position: absolute;
    width: 250px;
    border: 1px solid #5bacdf;
    height: 100px;
    box-shadow: 2px 2px 2px 2px #ccc;
    background-color: #fff;
    padding: 10px;
}

.checkboxwrap {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
}

    .checkboxwrap input[type="checkbox"] {
        position: absolute;
        left: 0;
        opacity: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .checkboxwrap span.checkboxinner {
        display: inline-block;
        width: 100% !important;
        height: 100% !important;
        background: #fff;
        border: 1px solid #999;
    }

    .checkboxwrap input[type="checkbox"]:checked + span.checkboxinner {
        background: url("../images/checkedbox.png") no-repeat center #f5f5f5;
    }

    .checkboxwrap input[type="checkbox"]:disabled + span.checkboxinner {
        opacity: 0.3;
        cursor: default;
    }

div.form-group div.controls.fieldWithCheckBox {
    padding-left: 24px;
}

.fieldWithCheckBox .checkboxwrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

    .fieldWithCheckBox .checkboxwrap label {
        width: 16px;
        height: 16px;
    }
/* summary panel loader */
.fa.summary-loader {
    font-size: 18px;
    height: 18px;
    position: absolute;
    right: 28px;
    top: 8px;
    width: 18px;
}

.reportlink .fa.summary-loader {
    right: 53px;
}
/*summary panel loader ends*/

/*windowcontainer preloader starts*/
.windowcontainer { /*position:absolute; top:0; bottom:0; left:0; right:0;*/
}

.window-tab.preload-overlay {
    position: absolute;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #0000000f;
    z-index: 2000;
}

    .window-tab.preload-overlay:before {
        position: absolute;
        content: "";
        background: #000;
        opacity: 0.1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .window-tab.preload-overlay .preloader {
        display: block;
        position: fixed;
    }

.window-tab.popup-window .preloader {
    position: absolute;
}
/*windowcontainer preloader ends*/

/*----------css changes for responsive ERP starts----------*/

/*tab inside windowcontainer*/

ul.summaryheader.noicon li {
    padding: 10px 18px 10px;
}

ul.summaryheader li span.value {
    min-height: 28px;
    display: inline-block;
    vertical-align: top;
}

.menuinnertab {
    display: block;
    width: 100%;
    padding: 0;
    margin: 8px 0 0;
    position: relative;
    border-bottom: 1px solid rgba(123, 122, 122, 0.15);
}

    .menuinnertab ul {
        margin: 0;
        padding: 0 0 1px 4.5px;
        overflow: hidden;
    }

        .menuinnertab ul li {
            display: inline-block;
            margin: 0 5px -2px -4.5px;
            cursor: pointer;
            list-style: none;
            font-size: 13px;
            color: #777;
            font-family: 'Open Sans', sans-serif;
            padding: 6px 22px;
            position: relative;
            background: inherit;
            border-radius: 5px 5px 0 0;
            border: 1px solid #e1e1e1;
            border-bottom: 2px solid #e1e1e1;
            background: #f5f5f5;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

            .menuinnertab ul li:after {
                position: absolute;
                width: 0;
                height: 0;
                content: "";
                border-left: 32px solid transparent;
                top: 0;
                right: 0;
            }

            .menuinnertab ul li:hover {
                background: #777;
                background: linear-gradient(to right, #777 0%, #aaa 100%);
                border-color: transparent;
            }

                .menuinnertab ul li:hover a {
                    color: #fff;
                }

            .menuinnertab ul li.active:after {
                border-left: 32px solid transparent;
                top: 0;
                right: 0;
            }

            .menuinnertab ul li a {
                text-decoration: none;
                color: black;
            }

            .menuinnertab ul li.active {
                background: #777;
                background: linear-gradient(to right, #777 0%, #aaa 100%);
                border-color: transparent;
                color: white;
                /* border-bottom: 3px solid #252d47; */
            }

                .menuinnertab ul li.active a {
                    color: #fff;
                }

.innertab {
    display: none;
    margin: -1px 0 0;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 3px 1px -2px, rgba(0, 0, 0, 0.2) 0px 1px 5px 0px;
}

    .innertab.first, .summarytab-content.first {
        display: block;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }

/*tab inside windowcontainer ends*/

/*style for billing-delivery-payments starts*/

.header-list.two-column-header {
    display: inline-block;
    padding: 10px;
    width: 100%;
    margin: 0;
}

.header-list .columns {
    display: inline-block;
    width: 32%;
    min-height: 215px;
    vertical-align: top;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px #e1e1e1;
    -webkit-box-shadow: 0 1px 2px #e1e1e1;
}

    .header-list .columns.address {
        margin: 0 10px;
    }

.columns.payment span.payimg {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 46px;
}

    .columns.payment span.payimg img {
        max-width: 100%;
    }

.columns .columntitle {
    background: #394b5d;
    color: #666;
    font-weight: 600;
    display: inline-block;
    padding: 5px 10px;
    width: 100%;
}

.columns .three-col-inner {
    display: inline-block;
    padding: 10px;
    width: 100%;
    position: relative;
}

.columns.payment .three-col-inner {
    padding-top: 26px;
}
/*style for billing-delivery-payments ends*/

/* serial number popup styles on grid level starts */
div.popupwindow table {
    table-layout: fixed;
    width: 100%;
}

div.popupwindow span.fa-close {
    position: absolute;
    top: -9px;
    right: -8px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    text-align: center;
    padding: 5px 4px;
    box-shadow: 0 2px 2px #ccc;
}

div.popupwindow table tr th:last-child, div.popupwindow table tr td:last-child {
    width: inherit !important;
    max-width: inherit !important;
    min-width: inherit !important;
}

.serialnum-wrap, .gridfield-popupwrap {
    position: relative !important;
}

.gridfield-popupwrap {
    overflow: visible !important;
}

    .serialnum-wrap div.popupwindow, .gridfield-popupwrap div.popupwindow {
        position: absolute;
        background: #fff;
        -webkit-box-shadow: 0 2px 20px 2px #383737;
        box-shadow: 0 2px 20px 2px #383737;
        width: 376px;
        right: -120px;
        top: -44px;
        z-index: 1;
    }

    .gridfield-popupwrap div.popupwindow {
        display: none;
        top: -66px;
        right: 50px;
        width: 480px;
    }

        .serialnum-wrap div.popupwindow thead, .gridfield-popupwrap div.popupwindow thead {
            display: table-row !important;
        }

    .serialnum-wrap table thead tr, .gridfield-popupwrap table thead tr {
        border-top: none;
    }

    .serialnum-wrap .popupwindow-inner, .gridfield-popupwrap .popupwindow-inner {
        overflow-y: auto;
        width: 100%;
        min-height: 48px;
        max-height: 148px;
    }

    .gridfield-popupwrap .popupwindow-inner {
        max-height: 320px;
        padding: 15px;
    }

    .gridfield-popupwrap .fieldpopup .control-label {
        width: 130px;
        text-align: right;
        position: absolute;
        top: 4px;
    }

    .gridfield-popupwrap .fieldpopup .form-group {
        position: relative;
    }

        .gridfield-popupwrap .fieldpopup .form-group .controls {
            padding: 0 0 0 140px;
        }

            .gridfield-popupwrap .fieldpopup .form-group .controls .dropdownarrow {
                position: absolute;
                right: 10px;
                top: 7px;
                font-size: 16px;
            }

    .gridfield-popupwrap .controls select {
        height: 30px;
        border-radius: 0;
    }

    .gridfield-popupwrap .controls textarea {
        border-radius: 0;
        height: 60px;
    }

    .gridfield-popupwrap .main_loader {
        font-size: 30px;
        margin: 12px 0;
        text-align: center;
    }

    .gridfield-popupwrap .form-group input[type="button"], .gridfield-popupwrap .form-group input[type="submit"] {
        background-color: #2c3e50;
        border: none;
        border-radius: 0;
        box-shadow: 0 2px 6px 0 #797979;
        -webkit-box-shadow: 0 2px 6px 0 #797979;
        color: #fff !important;
        cursor: pointer;
        display: inline-block;
        font-size: 13px;
        padding: 5px 10px;
        text-decoration: none !important;
        transition: all 0.5s ease-in-out;
    }

        .gridfield-popupwrap .form-group input[type="button"]:hover, .gridfield-popupwrap .form-group input[type="submit"]:hover {
            background: #70a5d8;
        }

    .gridfield-popupwrap .fieldpopup .form-group input[type="button"] {
        max-width: 120px;
        float: right;
    }

.popupwindow ul {
    padding: 8px;
}

.serialnum-wrap div.popupwindow select {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 0;
}

.serialnum-wrap div.popupwindow input[type="text"] {
    border: 1px solid #ccc;
    padding: 3px;
    width: 100%;
    font-size: 13px;
}

.popupwindow ul li.popuprow {
    text-align: left;
    list-style: none;
    display: inline-block;
    width: 100%;
    padding: 0 0 5px;
}

.serialnum-wrap div.popupwindow span.fa-close {
    box-shadow: 0 2px 13px 2px #383737;
    -webkit-box-shadow: 0 2px 13px 2px #383737;
}
/*serial number popup styles on grid level ends*/

/*ware house inbound list styles starts*/
.status-label-mobile i.live-spin {
    color: #ee465a;
    font-size: 14px;
    margin: 8px;
}

.status-label-mobile span.live-text {
    margin-right: 10px;
    font-size: 13px;
    color: #000;
}

.message i.fa-envelope {
    font-size: 20px;
}

.minimize-fields .hidecolumn {
    display: none !important;
}

.pagecontent.summaryview {
    table-layout: fixed;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .pagecontent.summaryview {
        height: 1px;
    }
}

.minimize-fields table.product-view tr th, .minimize-fields table.product-view tr td {
    display: none;
}

    .minimize-fields table.product-view tr th:nth-of-type(1),
    .minimize-fields table.product-view tr td:nth-of-type(1),
    .minimize-fields table.product-view tr th:nth-of-type(2),
    .minimize-fields table.product-view tr td:nth-of-type(2),
    .minimize-fields table.product-view tr th:nth-of-type(3),
    .minimize-fields table.product-view tr td:nth-of-type(3),
    .minimize-fields table.product-view tr th:nth-of-type(4),
    .minimize-fields table.product-view tr td:nth-of-type(4) {
        display: table-cell;
    }


.slidebtn {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: 4px;
}

    .slidebtn label {
        width: 66px;
        height: 25px;
        display: inline-block;
        margin: 0;
        position: relative;
        border-radius: 14px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        background-clip: padding-box;
        background: rgb(138,138,138);
        background: -webkit-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
        background: -moz-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
        background: -o-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
        background: linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
        box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
        line-height: 25px;
        font-style: normal;
        color: #666;
        text-shadow: 0 1px 1px rgba(0,0,0,0.1);
        font-weight: bold;
        -moz-transition: all 1s ease-in;
        -webkit-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;
        transition: all 1s ease-in;
        cursor: pointer;
    }

    .slidebtn input[type=checkbox]:checked {
        content: "on";
        font-size: 14px
    }

    .slidebtn label i {
        position: absolute;
        top: -1px;
        right: 43px;
        width: 26px;
        height: 26px;
        display: block;
        border-radius: 36px;
        background: rgb(255,255,255);
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
        background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
        box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.2);
        -webkit-transition: all 200ms ease;
        -moz-transition: all 200ms ease;
        -o-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
        transition: all 200ms ease;
    }

        .slidebtn label i:before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 14px;
            height: 14px;
            margin: -7px 0 0 -7px;
            border-radius: 18px;
            background: rgb(239,239,239);
            background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: -o-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            background: linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
            box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
        }

    .slidebtn label:hover i {
        box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.3);
    }

    .slidebtn label:active i:before {
        box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
    }

    .slidebtn label:before {
        content: "No";
        margin-left: 14px;
        text-transform: uppercase;
        -webkit-transition: all 200ms ease;
        -moz-transition: all 200ms ease;
        -o-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
        transition: all 200ms ease;
    }

    .slidebtn input[type=checkbox]:checked ~ label:before {
        content: "Yes";
        text-transform: uppercase;
        margin-right: 20px;
        margin-left: 0;
    }

    .slidebtn input[type=checkbox]:checked ~ label {
        background: rgb(141,173,51);
        background: -webkit-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
        background: -moz-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
        background: -o-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
        background: -ms-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
        background: radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
    }

        .slidebtn input[type=checkbox]:checked ~ label i {
            right: 0;
        }

    .slidebtn input[type=checkbox]:disabled ~ label {
        background: #ccc !important;
        cursor: no-drop !important;
    }

    .slidebtn input {
        position: absolute;
        bottom: 5px;
        left: 50%;
        margin-left: 10px;
        opacity: .1;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

        .slidebtn input:hover {
            opacity: .1;
        }

.assignedbtn {
    margin: 0 0 0 20px;
}

    .assignedbtn span {
        display: inline-block;
        vertical-align: middle;
    }

div.two-column-header div.form-group label.control-label {
    padding: 4px 10px 0 0;
    text-align: left;
}

    div.two-column-header div.form-group label.control-label span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
        max-width: 100%;
    }

.hours-remaining {
    background: #337ab7;
    border-bottom: 1px solid #ccc;
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 10px;
    padding: 5px 10px 5px 10px 0;
}

    .hours-remaining label.control-label {
        color: #666;
        padding: 0 10px 0 0 !important;
    }

        .hours-remaining label.control-label:nth-child(2) {
            font-weight: bold;
            font-size: 16px;
            display: inline-block;
            width: 53%;
            vertical-align: top;
        }

.summary-panel .tabletop-section {
    padding: 10px 0;
}

.smalltextbox input[type="text"] {
    width: 62% !important;
}

.smalltextbox .control-label {
    width: 100% !important;
}

.commentoptions span {
    padding: 0 10px 5px 0;
}

.commentoptions select {
    font-size: 13px;
    padding: 2px;
    color: #666;
    background: white;
}


/*warehouse inbound list style ends*/


/*styles for comments sections starts*/

.popup.comments {
    left: auto !important;
    display: none;
    top: auto !important;
    margin: 44px 0 0 !important;
    position: absolute;
    right: 5px;
    width: 380px;
    z-index: 2000;
}

.comments .main-title {
    border-bottom: 2px solid #394b5d;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 6px;
    padding: 6px 0;
    width: 100%;
}

.msg-comments .inner-title {
    color: #666;
    font-weight: bold;
    margin: 0 0 6px;
    font-size: 14px;
}

ul.commentlist {
    border-left: 2px solid #337ab7;
    display: inline-block;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 0 12px;
    font-size: 13px;
    width: 100%;
}

.popup.comments ul.commentlist {
    max-height: 400px;
}

ul.commentlist li {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
}

    ul.commentlist li span.msg {
        display: inline-block;
        color: black !important;
        padding: 10px 12px;
        position: relative;
        width: 100%;
        /*border: 1px solid #eee;*/
        background: #f5f5f5;
        margin: 0 0 10px;
        box-shadow: 1px 1px 1px #9E9E9E;
        border-right: 1px solid #9e9e9eb3;
    }

    ul.commentlist li span.context:before {
        position: absolute;
        border-bottom: 10px solid transparent;
        border-left: 11px solid #337ab7;
        border-top: 10px solid transparent;
        content: "";
        height: 0;
        width: 0;
        left: 0;
        top: 0;
        margin: 15px 0 0 -15px;
    }

    ul.commentlist li span.comment_header {
        border-bottom: 1px solid #666;
        display: inline-block;
        font-weight: bold;
        padding: 0 0 6px;
        width: 100%;
    }

    ul.commentlist li span.username span {
        background: #ccc;
        border-radius: 50%;
        display: inline-block;
        height: 30px;
        margin: 0 5px 0 0;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
        width: 30px;
        box-shadow: 0 2px 2px #666;
        -webkit-box-shadow: 0 2px 2px #666;
    }

        ul.commentlist li span.username span img {
            max-width: 100%;
        }

    ul.commentlist li span.msg-date {
        padding: 4px 0 0;
    }

    ul.commentlist li ul {
        border: medium none;
        margin: 0;
        padding: 0 0 0 10px;
    }

        ul.commentlist li ul li {
            margin: 0;
        }

            ul.commentlist li ul li span:before {
                display: none;
            }

.comment_icons {
    text-align: right;
}

span.comment_icons {
    padding: 10px 0 0;
    margin: 0;
    border: none;
    text-align: right;
    display: block;
    clear: both;
}

    span.comment_icons span {
        padding: 0;
        margin: 0 0 0 4px;
        font-size: 15px;
        position: relative;
        float: right;
        background: #7e7e7e;
        width: 22px;
        height: 22px;
        vertical-align: top;
        text-align: center;
        border: 1px solid #9E9E9E;
        box-shadow: 0 1px 2px #9E9E9E;
    }

        span.comment_icons span:hover {
            box-shadow: 0 1px 2px #666;
            -webkit-box-shadow: 0 1px 2px #666;
        }

        span.comment_icons span a {
            display: inline-block;
            padding: 2px;
            text-align: center;
            width: 100%;
        }

            span.comment_icons span a i, .popup.comments .newcomnt-btns i {
                font-size: 15px !important;
            }

.menu-wrap {
    position: relative;
    margin: 0 !important;
}

.pageheadername div.overlaydiv {
    display: none;
}

.popup.comments .popup-wrap {
    opacity: 1;
    transform: none;
}

.pageheadername .transparent-overlay, .transparent-overlay {
    position: fixed;
    width: 100%;
    display: none;
    height: 100%;
    background: transparent;
    z-index: 2001;
    left: 0;
    top: 0;
}

.popup.comments .newcomnt-btns, .comments .newcomnt-btns {
    float: right;
    width: auto;
    margin: 0 0 4px;
}

    .popup.comments .newcomnt-btns span,
    .comments .newcomnt-btns span {
        border: 1px solid #ccc;
        font-size: 16px;
        margin: 0 0 0 5px;
        padding: 2px 3px;
        position: relative;
        color: #337ab7;
    }

        .popup.comments .newcomnt-btns span:hover,
        .comments .newcomnt-btns span:hover {
            color: #23527c;
            box-shadow: 0 1px 2px #666;
            -webkit-box-shadow: 0 1px 2px #666;
        }

.newcomnt-btns span input[type="submit"],
.newcomnt-btns span input[type="reset"] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 0;
    left: 0;
    top: 0;
}

.popup.comments:before {
    border-bottom: 12px solid #fff;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: 32px;
    top: -12px;
    width: 0;
    z-index: 1;
}

.popup-wrap .new_comments, .new_comments {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
}

.pageheadername div.msg-comments {
    margin: 0;
}

.popup-wrap .new_comments textarea, .new_comments textarea, .editbox textarea, .reply_field textarea {
    margin: 0;
    height: 100px !important;
    font-size: 13px;
    width: 100%;
    border: 1px solid #bfbfbf;
    color: #666;
    background: white;
}

.editbox {
    float: left;
    margin: 10px 0 0;
    width: 100%;
}

    .popup-wrap .editbox textarea, .editbox textarea, .popup-wrap .reply_field textarea, .reply_field textarea {
        margin: 0;
    }

    .editbox textarea, .reply_field textarea {
        height: 72px !important;
    }

.summary-tab-list .popup.comments {
    left: -24px !important;
    right: auto;
    margin: 14px 0 0 !important;
    z-index: 1000;
}

    .summary-tab-list .popup.comments:before {
        right: auto;
        left: 32px;
    }

.summary-controls .summary-tab-list span.iconwrap {
    display: inline-block;
    color: #888;
    background: transparent;
    border: none;
    margin: 0;
    padding: 4px 6px;
    float: none;
    width: auto;
    height: auto;
}

.summary-controls .summary-tab-list:hover span.iconwrap {
    color: #666;
}

li.summary_comment {
    padding: 0 !important;
}

.panelcontrols {
    margin: 10px 5px 0px 0;
}

    .panelcontrols span, .removebtn {
        float: right;
        margin: 0 0 0 5px;
        background: #aaa;
        width: 25px;
        height: 25px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        color: #fff;
    }

        .panelcontrols span:hover, .removebtn:hover {
            background: #3c8dbc;
            color: white;
        }

        .panelcontrols span.remove, .removebtn {
            line-height: 19px;
            font-size: 18px;
            font-weight: normal;
            text-shadow: 1px 1px 1px #545454;
        }

/*styles for comments sections ends*/


.popup.attachments {
    left: auto !important;
    display: none;
    top: auto !important;
    margin: 44px 0 0 !important;
    position: absolute;
    right: 5px;
    width: 380px;
    z-index: 2000;
}

.attachments .main-title {
    border-bottom: 2px solid #394b5d;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 6px;
    padding: 6px 0;
    width: 100%;
}

.msg-attachments .inner-title {
    color: #337ab7;
    font-weight: bold;
    margin: 0 0 6px;
    font-size: 14px;
}

ul.attachmentlist {
    border-left: 2px solid #337ab7;
    display: inline-block;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 0 12px;
    font-size: 13px;
    width: 100%;
}

.popup.attachments ul.attachmentlist {
    max-height: 400px;
}

ul.attachmentlist li {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
}

    ul.attachmentlist li span.msg {
        display: inline-block;
        color: #888 !important;
        padding: 10px 12px;
        position: relative;
        width: 100%;
        border: 1px solid #eee;
        background: #f9f9f9;
        margin: 0 0 10px;
    }

    ul.attachmentlist li span.context:before {
        position: absolute;
        border-bottom: 10px solid transparent;
        border-left: 11px solid #337ab7;
        border-top: 10px solid transparent;
        content: "";
        height: 0;
        width: 0;
        left: 0;
        top: 0;
        margin: 15px 0 0 -15px;
    }

    ul.attachmentlist li span.attachment_header {
        border-bottom: 1px solid #666;
        display: inline-block;
        font-weight: bold;
        padding: 0 0 6px;
        width: 100%;
    }

    ul.attachmentlist li span.username span {
        background: #ccc;
        border-radius: 50%;
        display: inline-block;
        height: 30px;
        margin: 0 5px 0 0;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
        width: 30px;
        box-shadow: 0 2px 2px #666;
        -webkit-box-shadow: 0 2px 2px #666;
    }

        ul.attachmentlist li span.username span img {
            max-width: 100%;
        }

    ul.attachmentlist li span.msg-date {
        padding: 4px 0 0;
    }

    ul.attachmentlist li ul {
        border: medium none;
        margin: 0;
        padding: 0 0 0 10px;
    }

        ul.attachmentlist li ul li {
            margin: 0;
        }

            ul.attachmentlist li ul li span:before {
                display: none;
            }

.attachment_icons {
    text-align: right;
}

span.attachment_icons {
    padding: 10px 0 0;
    margin: 0;
    border: none;
    text-align: right;
    display: block;
    clear: both;
}

    span.attachment_icons span {
        padding: 0;
        margin: 0 0 0 4px;
        font-size: 15px;
        position: relative;
        float: right;
        background: #fff;
        width: 22px;
        height: 22px;
        vertical-align: top;
        text-align: center;
        border: 1px solid #dadada;
    }

        span.attachment_icons span:hover {
            box-shadow: 0 1px 2px #666;
            -webkit-box-shadow: 0 1px 2px #666;
        }

        span.attachment_icons span a {
            display: inline-block;
            padding: 2px;
            text-align: center;
            width: 100%;
        }

            span.attachment_icons span a i, .popup.attachments .newcomnt-btns i {
                font-size: 15px !important;
            }

.menu-wrap {
    position: relative;
    margin: 0 !important;
}

.pageheadername div.overlaydiv {
    display: none;
}

.popup.attachments .popup-wrap {
    opacity: 1;
    transform: none;
}

.pageheadername .transparent-overlay, .transparent-overlay {
    position: fixed;
    width: 100%;
    display: none;
    height: 100%;
    background: transparent;
    z-index: 1000;
    left: 0;
    top: 0;
}

.popup.attachments .newcomnt-btns, .attachments .newcomnt-btns {
    float: right;
    width: auto;
    margin: 0 0 4px;
}

    .popup.attachments .newcomnt-btns span,
    .attachments .newcomnt-btns span {
        border: 1px solid #ccc;
        font-size: 16px;
        margin: 0 0 0 5px;
        padding: 2px 3px;
        position: relative;
        color: #337ab7;
    }

        .popup.attachments .newcomnt-btns span:hover,
        .attachments .newcomnt-btns span:hover {
            color: #23527c;
            box-shadow: 0 1px 2px #666;
            -webkit-box-shadow: 0 1px 2px #666;
        }

.newcomnt-btns span input[type="submit"],
.newcomnt-btns span input[type="reset"] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 0;
    left: 0;
    top: 0;
}

.popup.attachments:before {
    border-bottom: 12px solid #fff;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: 32px;
    top: -12px;
    width: 0;
    z-index: 1;
}

.popup-wrap .new_attachments, .new_attachments {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
}

.pageheadername div.msg-attachments {
    margin: 0;
}

.popup-wrap .new_attachments textarea, .new_attachments textarea, .editbox textarea, .reply_field textarea {
    margin: 0;
    height: 100px !important;
    font-size: 13px;
    width: 100%;
    border: 1px solid #bfbfbf;
}

/*style for settings page starts*/
.settings, .settings-sublist,
.settings-subtitle, .subsetting-grid {
    display: inline-block;
    width: 100%;
}

/*.subsetting-grid, .sublist-grid {
    display: none;
}*/

    .subsetting-grid.active {
        display: block;
    }

.settings-sublist {
    border-bottom: 1px solid #ccc;
}

    .settings-sublist.toggleview {
        border-bottom: none;
        border-radius: 4px;
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
    }

.settings-subtitle {
    cursor: pointer;
    font-size: 15px;
    padding: 6px 10px 6px 25px;
    position: relative;
}

    .settings-subtitle:before {
        position: absolute;
        left: 0;
        top: 3px;
        font-family: 'fontAwesome';
        content: "\f196";
        font-size: 20px;
        transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
    }

    .settings-subtitle.active:before {
        content: "\f147";
    }

.settings table.grid {
    border: none;
    margin: 0;
    box-shadow: none;
}

    .settings table.grid tr th, .settings table.grid tr td {
        padding: 5px 10px;
        color: #333;
    }

    .settings table.grid td {
        vertical-align: middle;
    }

    .settings table.grid tbody tr {
        border-top: 1px solid #f2f2f2;
    }

        .settings table.grid tbody tr.gridtitle td {
            background: #24405d;
        }

    .settings table.grid td input[type="text"] {
        border: 1px solid #e1e1e1;
        height: 26px;
        line-height: 15px;
        padding: 2px 5px;
    }

.toggleview {
    box-shadow: 0 10px 10px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.23);
    background: #fff;
    color: #333;
}

    .toggleview .settings-subtitle {
        border: 1px solid #fff;
        padding: 10px 10px 10px 30px;
        float: left;
        width: 100%;
        background: #f5f5f5;
        color: #333;
        border-radius: 4px;
        margin: 0;
        font-weight: normal;
    }

        .toggleview .settings-subtitle.active, .toggleview .settings-subtitle:hover {
            background: linear-gradient(to right, #f5f5f5 0%, #e2e2e2 100%);
        }

        .toggleview .settings-subtitle.active {
            margin-bottom: 0;
        }

.toggleview {
    margin-bottom: 6px;
    color: #333;
}

    .toggleview .settings-subtitle:before {
        top: 8px;
        font-weight: normal;
        left: 8px;
    }


/*style for settings page ends*/


/*styles for signature starts*/
.popup.sign_view {
    width: 500px;
}

.kbw-signature {
    display: inline-block;
    border: 1px solid #ccc;
    -ms-touch-action: none;
    width: 468px;
    height: 185px;
    margin: 0 0 10px;
}

.sign_view a.button-orange {
    padding: 5px 12px;
}

.fullwidth-column .columns {
    width: 48%;
}

    .fullwidth-column .columns select {
        border: 1px solid #ccc;
        padding: 4px;
    }

.signcontrols .button-orange {
    margin-top: 6px;
}
/*styles for signature ends*/

/*styles for alertwindow starts*/
.popup.alertwindow {
    width: 400px;
}

.alertwindow .popup-wrap {
    padding: 12px;
}

.alertwindow .productcreteheader {
    padding: 5px 10px;
    background: radial-gradient(ellipse at center, #222940 0%, #10141f 100%);
    border-radius: 4px;
    color: #666;
    border: none;
    font-size: 16px;
}

.popup-wrap .alertcontent {
    padding: 10px 0 20px;
}

.alertwindow a.button-orange {
    font-size: 14px;
    padding: 5px 22px;
    margin: 0 5px;
}
/*styles for alertwindow ends*/

/*styles for barcode icons starts*/

.codewrap {
    display: inline-block;
    position: relative;
}

    .codewrap.b-code {
        width: 118px;
        clear: both;
        display: block;
    }

        .codewrap.b-code input[type="text"], .codewrap.location input[type="text"] {
            float: left;
            width: 60px !important;
            margin: 0 3px 0 0;
            height: 24px;
        }

    .codewrap span {
        float: left;
        width: 23px;
        height: 23px;
        font-size: 18px;
        text-align: center;
        cursor: default;
    }

        .codewrap span.invalid {
            border: 1px solid #b62608;
            color: #b62608;
        }

        .codewrap span.valid {
            border: 1px solid #09ac09;
            color: #008000;
        }

    .codewrap i {
        line-height: 21px;
    }

    .codewrap.location {
        width: 145px;
    }

    .codewrap span.save, .codewrap span.gridicon {
        border: 1px solid #7e7e7e;
        color: #ffffff;
        background: radial-gradient(ellipse at center, #7e7e7e 0%, #7e7e7e 100%);
        margin: 0 0 0 3px;
        cursor: pointer;
    }

        .codewrap span.save:hover, .codewrap span.gridicon:hover {
            background: #484848;
            border: 1px solid #484848;
        }

    .codewrap.fieldwithicon {
        position: relative;
    }

        .codewrap.fieldwithicon input[type="text"] {
            width: 67% !important;
            float: left;
        }

.sum_togglecontent .codewrap.fieldwithicon input[type="text"] {
    width: 67% !important;
}

.quickviewwrap .codewrap.fieldwithicon span.gridicon {
    height: 21px;
}

.quickviewwrap .codewrap span.gridicon .fa-outdent, .fa.qtyprice {
    font-size: 14px;
    margin: 0;
}

.qtyprice:before {
    content: "\f1c0";
    padding: 0 2px 0 0;
}

.qtyprice:after {
    content: "\f155";
}

.thumbnailview img {
    max-width: 54px;
    max-height: 54px;
    width: auto !important;
    height: auto !important;
}

.mediumtextbox .codewrap.location {
    width: 225px;
    position: relative;
}

    .mediumtextbox .codewrap.location input[type="text"] {
        width: 134px !important;
    }
    /*.mediumtextbox .codewrap.location label.error { position:absolute; color:red; left:0; top:100%; font-size: 15px; margin: 4px 0 0; }*/
    .mediumtextbox .codewrap.location label.error {
        position: absolute;
        text-align: left;
        border: 1px solid red;
        border-radius: 4px;
        box-shadow: 0 0 6px #757474;
        top: -21px;
        z-index: 1;
        line-height: 11px;
        font-size: 12px;
        -webkit-box-shadow: 0 0 6px #757474;
        color: #666;
        text-shadow: 0 1px 2px #c9403a;
        padding: 4px 8px;
        left: 0;
        width: auto;
        background: #ef868a;
        line-height: 11px;
        float: left;
    }

        .mediumtextbox .codewrap.location label.error:before {
            position: absolute;
            left: 54px;
            bottom: -9px;
            width: 0;
            height: 0;
            content: "";
            border-right: 8px solid transparent;
            border-left: 8px solid transparent;
            border-top: 10px solid #ef868a;
        }
/*style for barcode icons ends*/


/*summary quickview panel starts*/
.quick-summary-wrap {
    position: relative;
}

.pagecontent.quick-summary-wrap {
    padding-right: 38px;
}

.summary_quickview {
    right: 0;
    transform: rotate(90deg) translate(100%, 0);
    -webkit-transform: rotate(90deg) translate(100%, 0);
    transform-origin: right top;
    -webkit-transform-origin: right top;
    position: absolute;
    top: 90px;
    padding: 0 0 0 45px;
    z-index: 1;
}

ul.squick-view {
    margin: 0;
    padding: 0;
}

    ul.squick-view li {
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
        background: radial-gradient(ellipse at center, #e8e8e8 0%, #ddd 100%);
        position: relative;
        padding: 7px 14px;
        color: #555;
        font-size: 13px;
        cursor: pointer;
    }

        ul.squick-view li.hover, ul.squick-view li.active {
            background: #337ab7;
        }

        ul.squick-view li span {
            position: absolute;
            font-size: 11px;
            color: #666;
            width: 12px;
            height: 12px;
            top: 0;
            text-align: center;
            padding: 4px;
            left: 0;
            line-height: 2px;
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
        }
/*ul.squick-view li:before { position:absolute; bottom:0; content:""; width:0; height:0; border-bottom:8px solid #fff; border-right:8px solid transparent; }*/

.pagecontent #editrightpanel {
    display: none;
}

.pagecontent.quick-summary-wrap #editrightpanel {
    display: block;
}

.quickviewpanel {
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 13px #ccc;
    -webkit-box-shadow: 0 2px 13px #ccc;
    top: 113px;
    right: 30px;
    bottom: 3px;
    width: 0;
    z-index: 10;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    overflow: hidden;
}

    .quickviewpanel .summary-header {
        width: inherit;
    }

    .quickviewpanel.slide {
        width: 350px;
    }

    .quickviewpanel .summarytab-content {
        clear: both;
    }

.quickviewwrap {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 46px;
    bottom: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

    .quickviewwrap.large-windowpanel {
        overflow-y: auto;
    }

.summary-panel .large-windowpanel .summary-tab-inner {
    position: inherit;
}

.quickviewpanel .quickviewwrap {
    top: 60px;
    right: 15px;
    left: 15px;
}

.quickviewpanel .q-view-inner {
    border: 1px solid #ccc;
    padding: 10px;
    height: 100%;
    width: 350px;
}

.controls.viewdetails {
    position: relative;
}

.viewdetails .button-orange {
    position: absolute;
    right: -44px;
    top: 0;
    padding: 8px;
}

    .viewdetails .button-orange.detailviews {
        right: -82px;
    }

/*summary quickview panel ends*/

mainGrid tr td .gridtitle {
    display: none;
}

.innertab.Allocations div.two-column-header div.form-group {
    width: 100%;
}

    .innertab.Allocations div.two-column-header div.form-group div.controls {
        width: 100%;
    }

.activefilter {
    animation: zoomanimate 0.7s linear infinite;
    -o-animation: zoomanimate 0.7s linear infinite;
    -moz-animation: zoomanimate 0.7s linear infinite;
    -webkit-animation: zoomanimate 0.7s linear infinite;
}

/*accounts page alignment fixes starts*/
.grid-select {
    width: 100%;
    position: relative;
}

    .grid-select i.dropdownarrow {
        position: absolute;
        right: 10px;
        top: 0px;
        color: #7e7e7e;
        font-size: 20px;
    }

table.grid span.grid-select select {
    height: 29px;
    background: white;
    color: #333;
}

table.grid tr td div.controls .button-orange {
    padding-bottom: 5px;
}
/*accounts page alignment fixes ends*/

/*column header sort starts*/
table.listing tr th span.colmn-sort {
    position: relative;
    text-align: center;
    margin: 0 15px 0 4px;
    vertical-align: top;
    display: inline-block;
}

table.listing tr th span i {
    position: absolute;
    padding-top: 3px;
    cursor: pointer;
    color: #666;
    height: 8px;
    left: -2px;
    width: 8px;
}

    table.listing tr th span i.fa-sort-asc.desc {
        top: 7px;
    }

        table.listing tr th span i.fa-sort-asc.desc:before {
            content: "\f0dd";
            line-height: 4px;
        }

table.listing tr th a.desc span i.fa-sort-asc.desc {
    display: none;
}

table.listing tr th a.asc span i.fa-sort-asc.asc {
    display: none;
}

/*column header sort ends*/

/*different priority label starts*/
.label-priority-high {
    color: #666;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    padding: 4px 6px;
    background: #d65c4f;
}

.label-priority-medium {
    color: #666;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    padding: 4px 6px;
    background: #65b688;
}

.label-priority-low {
    color: #666;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    padding: 4px 6px;
    background: #f6b94d;
}
/*different priority label ends*/

@keyframes zoomanimate {
    0% {
        transform: scale(1);
        -webkit-transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(0.9);
    }
}

@-moz-keyframes zoomanimate {
    0% {
        transform: scale(1);
        -webkit-transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(0.9);
    }
}

@-webkit-keyframes zoomanimate {
    0% {
        transform: scale(1);
        -webkit-transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(0.9);
    }
}

@-o-keyframes zoomanimate {
    0% {
        transform: scale(1);
        -webkit-transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(0.9);
    }
}

/*import section style starts*/
.fileimportsection {
    display: block;
    margin: 0 0 32px;
}

.content-left, .content-right {
    width: 380px;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
}

.content-left {
    border-right: 1px solid #ccc;
    padding-right: 20px;
    min-height: 220px;
    width: 400px;
}

.import-content .title {
    font-size: 16px;
    padding: 0 0 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid #ccc;
}

.uploadfield {
    position: relative;
    margin: 30px 0;
}

.uploadexcel {
    width: 0;
    height: 0;
    opacity: 0;
}

.filename {
    width: 100%;
    border: 1px solid #ccc;
    padding: 4px 8px;
}

.uploadfield span {
    display: block;
    padding: 0 100px 0 0;
}

button.uploadfile {
    position: absolute;
    right: 0;
    top: 0;
}

.processimport label {
    padding: 5px 0 0;
}

.processimport .button-orange {
    min-width: 164px;
}

.imported-filestatus {
    width: 774px;
    display: inline-block;
}

select.catlist {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
}

.importedfiles {
    background: #fbfbfb;
    display: inline-block;
    position: relative;
    border: 1px solid #d0d0d0;
    box-shadow: 0 1px 3px 0px #c5c5c5;
    -webkit-box-shadow: 0 1px 3px 0px #c5c5c5;
    margin: 0 0 10px;
    padding: 12px 20px;
    width: 100%;
}

.progressbar {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 2px;
    transition: width 0.5s ease;
    margin: 8px 0 0;
    -webkit-transition: width 0.5s ease;
}

    .progressbar:before {
        position: absolute;
        background: #ccc;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        content: "";
    }
    /*.progressbar:after { background:green; content:""; position:absolute; left:0; top:0; height:100%; width:100%; animation:fullexpand 10s ease-out; -o-animation:fullexpand 10s ease-out; 
                          -moz-animation:fullexpand 10s ease-out;  -webkit-animation:fullexpand 10s ease-out;  }*/

    .progressbar:after {
        background: #5cb85c;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 50%;
        animation: loader 2s;
        -webkit-animation: loader 2s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        transition-timing-function: linear;
        -webkit-transition-timing-function: linear;
    }

@keyframes loader {
    0% {
        transform: translateX(-250%);
    }

    100% {
        transform: translateX(200%);
    }
}

@-moz-keyframes loader {
    0% {
        transform: translateX(-250%);
    }

    100% {
        transform: translateX(200%);
    }
}

@-webkit-keyframes loader {
    0% {
        transform: translateX(-250%);
    }

    100% {
        transform: translateX(200%);
    }
}

@-o-keyframes loader {
    0% {
        transform: translateX(-250%);
    }

    100% {
        transform: translateX(200%);
    }
}

.importedfiles .import-inner {
    padding: 12px 0 6px 35px;
    border-top: 1px solid #fff;
}

.importedfiles.process .import-inner {
    padding-left: 0;
}

.importedfiles.error {
    border: 1px solid red;
}

.importedfiles.partial {
    border: 1px solid #FFC107;
}

.import_file_name {
    position: relative;
}

.then .import_file_name:before,
.error .import_file_name:before, .partial .import_file_name:before {
    position: absolute;
    left: -36px;
    top: -2px;
    content: url("../images/success-icon.png");
    width: 29px;
    height: 29px;
}

.then .progressbar /*, .importedfiles.error .progressbar, .importedfiles.partial .progressbar*/ {
    display: none;
}

.error .import_file_name:before {
    content: url("../images/error-icon.png");
}

.partial .import_file_name:before {
    content: url("../images/info-icon.png");
}

.error .importstatus, .partial .importstatus {
    color: #ee465a;
    padding: 4px 0 0;
    font-size: 13px;
    font-style: italic;
}

.partial .importstatus {
    color: #FFC107;
}

.viewlog {
    position: absolute;
    right: 20px;
    top: 13px;
    cursor: pointer;
    font-size: 13px;
    font-style: italic;
    padding: 2px 10px;
    border-radius: 0;
}

.import-title {
    padding: 5px 0;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    margin: 0;
}

@keyframes fullexpand {
    0% {
        width: 0;
    }

    50% {
        width: 50%;
    }

    100% {
        width: 100%;
    }
}

@-moz-keyframes fullexpand {
    0% {
        width: 0;
    }

    50% {
        width: 50%;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes fullexpand {
    0% {
        width: 0;
    }

    50% {
        width: 50%;
    }

    100% {
        width: 100%;
    }
}

@-o-keyframes fullexpand {
    0% {
        width: 0;
    }

    50% {
        width: 50%;
    }

    100% {
        width: 100%;
    }
}

.reprocess-icon {
    margin: 0 5px 0 0;
    width: 17px;
    height: 17px;
    font-size: 18px;
    color: #394B5D;
    position: relative;
    top: 4px;
}

.rotation {
    -webkit-animation: rotate 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    cursor: pointer;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
    }
}

.popup.viewlogpopup {
    width: 630px;
}

.popup-wrap.viewlogpopup .productcreteheader {
    padding: 0px 0 5px;
    font-size: 18px;
}

.viewlogpopup .content {
    max-height: 200px;
    overflow-y: auto;
}

.selectwrapper {
    position: relative;
}

.fileimportsection .selectwrapper {
    width: 100%;
    font-size: 13px;
}

.selectwrapper select {
    border: 1px solid #aaa;
    height: 30px;
    padding: 4px 8px;
    width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
    text-indent: 0.01px;
    float: left;
}

.selectwrapper i.dropdownarrow {
    position: absolute;
    right: 10px;
    top: 6px;
    color: #2C3E50;
    font-size: 19px;
}

/*import section style ends*/

/*style for grid in columns */

td.onecol-header-left div.controls.fullcolumn-layout table.grid th,
td.onecol-header-left div.controls.fullcolumn-layout table.grid td {
    text-align: left;
}

.addremovebutton {
    width: 45px;
    max-width: 45px;
    min-width: 45px;
}

table.fullcolumn-layout.grid td.onecol-header-left div.controls.fullcolumn-layout {
    width: 100%;
}

    table.fullcolumn-layout.grid td.onecol-header-left div.controls.fullcolumn-layout table.grid input {
        height: 28px;
    }

/*style for grid in columns ends*/

/*styles for tooltip starts*/
.control-label.tooltipp {
    width: 100% !important;
    text-align:left;
}

    .control-label.tooltipp span {
        overflow: hidden !important;
        /*white-space: nowrap;*/
        width: auto !important;
        max-width: 100% !important;
        text-overflow: ellipsis;
    }

.tooltipwrap {
    position: absolute;
    margin-top: 8px;
    top: 100%;
    z-index: 300;
}

.select2-container .tooltipwrap {
    margin-top: 0;
}

.tooltip-inner {
    max-width: 300px;
    padding: 8px 10px;
    text-align: left;
    background-color: #ffffff;
    font-size: 13px;
    border: 1px solid #e9a62b;
    color: #000;
    box-shadow: 0 2px 6px 1px #9f9f9f;
    -webkit-box-shadow: 0 2px 6px 1px #9f9f9f;
    position: relative;
    border-radius: 0;
    word-wrap: break-word;
}

    .tooltip-inner:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: -7px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #fff;
        z-index: 3;
        left: 22px;
    }

    .tooltip-inner:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: -8px;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 9px solid #e9a62b;
        z-index: 2;
        left: 21px;
    }
/*styles for tooltip ends*/

tr.ui-draggable-helper {
    width: 100%;
    background: #eaebec;
    cursor: move;
    z-index: 1000;
}

/*summaryview loader styles starts*/

.summary-panel .preloader {
    height: 68px;
    width: 158px;
    margin: -34px 0 0 -79px;
    border-radius: 0;
    padding: 10px 15px;
    top: 20%;
}

    .summary-panel .preloader img {
        position: absolute;
        left: 8px;
        top: 16px;
    }

.loadertextwrap {
    padding: 0 0 0 35px;
    float: left;
}

#Loadertext {
    width: 100%;
    float: left;
    text-transform: uppercase;
    padding: 2px 0 2px;
    border-bottom: 1px solid #227ea7;
}

.canceloperation {
    color: #5bc0de;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    float: right;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    text-transform: uppercase;
    padding: 4px 0;
}

    .canceloperation:hover {
        color: #e47e34;
    }

.loadingtext {
    color: #5bc0de;
    font-family: Arial;
    font-size: 13px;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    float: left;
    animation-name: loadinganimate;
    -o-animation-name: loadinganimate;
    -webkit-animation-name: loadinganimate;
    -moz-animation-name: loadinganimate;
    animation-duration: 2.09s;
    -o-animation-duration: 2.09s;
    -webkit-animation-duration: 2.09s;
    animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-direction: normal;
    -o-animation-direction: normal;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
}

#fadetext_1 {
    animation-delay: 0.75s;
    -o-animation-delay: 0.75s;
    -webkit-animation-delay: 0.75s;
    -moz-animation-delay: 0.75s;
}

#fadetext_2 {
    animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
}

#fadetext_3 {
    animation-delay: 1.05s;
    -o-animation-delay: 1.05s;
    -webkit-animation-delay: 1.05s;
    -moz-animation-delay: 1.05s;
}

#fadetext_4 {
    animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
}

#fadetext_5 {
    animation-delay: 1.35s;
    -o-animation-delay: 1.35s;
    -webkit-animation-delay: 1.35s;
    -moz-animation-delay: 1.35s;
}

#fadetext_6 {
    animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

#fadetext_7 {
    animation-delay: 1.64s;
    -o-animation-delay: 1.64s;
    -webkit-animation-delay: 1.64s;
    -moz-animation-delay: 1.64s;
}

#fadetext_8 {
    animation-delay: 1.78s;
    -o-animation-delay: 1.78s;
    -webkit-animation-delay: 1.78s;
    -moz-animation-delay: 1.78s;
}

#fadetext_9 {
    animation-delay: 1.92s;
    -o-animation-delay: 1.92s;
    -webkit-animation-delay: 1.92s;
    -moz-animation-delay: 1.92s;
}

#fadetext_9 {
    animation-delay: 2.06s;
    -o-animation-delay: 2.06s;
    -webkit-animation-delay: 2.06s;
    -moz-animation-delay: 2.06s;
}

@keyframes loadinganimate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes loadinganimate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes loadinganimate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes loadinganimate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes loadinganimate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/*summaryview loader ends*/
table.sorting-table tr.sorting-row td {
    background-color: #ddd !important;
    cursor: move;
}

.search_box, .snapshot {
    position: relative;
    float: right;
    border-radius: 2px;
    margin: 15px 15px 0px 0;
    padding: 0;
}
.snapshot {
    margin: 20px 22px 0px 0;
}

.search_box_wrap {
    width: 0;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    float: right;
    padding: 0;
    margin: 0;
}

.search_box.active .search_box_wrap {
    position: relative;
    width: 195px;
    padding: 0;
    box-shadow: 0 2px 2px #dad7d7;
}

.searchforclick {
    z-index: 100;
}

.search_box.active .searchforclick {
    display: none;
}

.search_box .fa-search {
    color: #666;
    font-size: 21px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    width: 29px;
    padding: 3px 5px;
    background: #fbfbfb;
}

.search_box.active .fa-search {
    background: #fff;
}

.search_box form input[type="text"] {
    border: none;
    outline: none;
    background: none;
    font-size: 13px;
    color: #94A3B1;
    width: 170px;
    padding: 7px;
    margin: 0;
    background: white !important;
    font-family: 'Open Sans', sans-serif;
}

.search_box form input[type="text"]:focus {
    color: #666; box-shadow:none;
}

.search_box form input[type="submit"] {
    border: none;
    outline: none;
    cursor: pointer;
    background: url(../images/search.png) no-repeat 0;
    width: 30px;
    height: 25px;
    padding: 8px;
}

.switch-field {
    font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
    padding: 40px;
    overflow: hidden;
}

.switch-title {
    margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
    float: left;
}

.switch-field label {
    display: inline-block;
    width: 60px;
    background-color: #e4e4e4;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    text-shadow: none;
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

    .switch-field label:hover {
        cursor: pointer;
    }

.switch-field input:checked + label {
    background-color: #A5DC86;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}

table.grid.documents thead tr th.check-box, table.grid.documents tbody tr td.check-box {
    max-width: 20px;
    width: 20px;
    min-width: 20px;
    text-align: center;
}

table.grid.documents tbody tr td i {
    padding: 0 10px;
    color: #e0a554;
}

    table.grid.documents tbody tr td i.fa-upload {
        color: #ccc;
    }

table.grid.documents tr td.icons a.button-orange.remove-option {
    background: #bfbcba;
    font-size: 13px;
}

table.grid.documents input[type="text"] {
    border: none;
    text-align: center;
}

    table.grid.documents input[type="text"]::-webkit-input-placeholder {
        color: #333;
    }

    table.grid.documents input[type="text"].filname {
        width: 50%;
    }

table.grid.documents .select2-container .select2-choice {
    border: 1px solid #ddd !important;
}

table.grid.documents select {
    border: 1px solid #ddd !important;
}

table.grid.documents tr:nth-of-type(2n) {
    background: #fff;
}

/*css for fieldset*/
fieldset {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 3px 3px 5px #ccc;
    max-width: 450px;
}

    fieldset legend i {
        border: 0px solid #ccc;
        border-radius: 4px;
        margin: 0 5px;
        padding: 3px 6px;
        color: #087eb9;
        cursor: pointer;
    }

    fieldset input {
        border: 1px solid #aaa;
        border-radius: 4px;
        font-size: 14px;
        height: 24px;
        line-height: normal;
        margin: 8px;
        padding: 3px;
        width: 60%;
    }

    fieldset label {
        min-width: 125px;
        display: inline-block;
        text-align: right;
    }

/*css for line divider*/
.divider-line {
    height: 5px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin: 15px 0 0 0;
}

.statusview {
    color: #337AB7 !important;
}

    .statusview:hover {
        text-decoration: underline !important;
    }

.popup.gridpopupfields {
    display: none;
    margin: 0 !important;
    position: absolute;
    right: 7px;
    width: 550px;
    z-index: 2002;
}

    .popup.gridpopupfields.fixedpos {
        position: fixed;
    }

    .popup.gridpopupfields .popup-wrap {
        opacity: 1;
        transform: none;
        font-size: 13px;
    }

    .popup.gridpopupfields:before, .popup.gridpopupfields:after {
        border-bottom: 12px solid #ffffff;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        content: "";
        height: 0;
        position: absolute;
        right: 58px;
        top: -12px;
        width: 0;
        z-index: 1;
        opacity: 0.1;
    }

    .popup.gridpopupfields .kbw-signature {
        width: 100%;
    }

    .popup.gridpopupfields:after {
        border-bottom: 12px solid #ffffff;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        opacity: 1;
        right: 58px;
        top: -9px;
    }

.popuptwocolumn-wrap .summary-content {
    width: 49.5%;
    clear: none;
    display: inline-block;
    vertical-align: top;
}

.bodyleftnav ul li.parent_li .fa.fa-folder:before {
    content: "\f15c";
    font-size: 15px;
    position: relative;
    top: 0px;
}

div.form-group div.controls {
    position: relative;
    width: 100%;
}

div.form-group label.control-label {
    word-wrap: break-word;
}

.popup.gridpopupfields[data-list="Cost"]:before {
    right: auto;
    left: 57px;
}

.popup.gridpopupfields[data-list="Cost"]:after {
    right: auto;
    left: 60px;
}

.popup.gridpopupfields[data-list="Price"]:before {
    right: auto;
    left: 179px;
}

.popup.gridpopupfields[data-list="Price"]:after {
    right: auto;
    left: 182px;
}

.popup.gridpopupfields span.close {
    top: 15px;
    right: 15px;
}

div.controls .field-validation-error {
    position: absolute;
    text-align: left;
    /*border: 1px solid red;*/
    border-radius: 4px;
    -webkit-box-shadow: 0 0 6px #757474;
    color: #fff;
    padding: 4px 10px;
    left: auto;
    width: auto;
    right: 0;
    background: #fd6269;
    -webkit-animation: move 1s;
    -webkit-animation-fill-mode: forwards;
    animation: move 1s;
    animation-fill-mode: forwards;
}

div.controls .field-validation-error {
    text-shadow: 0 1px 2px #c9403a;
    box-shadow: 0 0 6px #333;
}

    div.controls .field-validation-error:before {
        position: absolute;
        right: 35px;
        bottom: -9px;
        width: 0;
        height: 0;
        content: "";
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        border-top: 10px solid #fd6269;
    }

.popup.gridpopupfields .popup-wrap h4 {
    font-weight: 600;
    padding: 10px 0 15px;
}

.popup.gridpopupfields .popup-wrap table th {
    font-weight: bold;
}

.field-validation-info {
    z-index: 1;
    position: absolute;
    text-align: left;
    border: 1px solid #eda321;
    box-shadow: 0 0 6px #757474;
    -webkit-box-shadow: 0 0 6px #757474;
    color: #a06806;
    padding: 5px 10px;
    width: auto;
    min-width: 300px;
    max-width: 320px;
    background: #f9eb99;
    opacity: 0;
    font-size: 13px;
}

    .field-validation-info:before {
        position: absolute;
        left: 7px;
        width: 0;
        height: 0;
        content: "";
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        border-bottom: 10px solid #eda321;
        top: -11px;
    }

    .field-validation-info.view {
        -webkit-animation: fadeIn 0.6s;
        -webkit-animation-fill-mode: forwards;
        animation: fadeIn 0.6s;
        animation-fill-mode: forwards;
    }

.login-reg ul {
    margin: 0;
    padding: 0;
}

    .login-reg ul li {
        display: inline-block;
        width: 100%;
        padding: 0 0 10px;
    }

        .login-reg ul li label {
            width: 100%;
            margin: 0 0 5px;
        }

        .login-reg ul li input[type="password"] {
            width: 100%;
            padding: 5px 4px;
            border: 1px solid #ccc;
        }

        .login-reg ul li:first-child {
            padding: 0;
        }

@-webkit-keyframes fadeIn {
    from {
        margin: 14px 0 0;
        opacity: 0;
    }

    to {
        margin: 0;
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        margin: 14px 0 0;
        opacity: 0;
    }

    to {
        margin: 0;
        opacity: 1;
    }
}

@-webkit-keyframes move {
    from {
        bottom: 60px;
        opacity: 0;
    }

    to {
        bottom: 50px;
        opacity: 1;
    }
}

@keyframes move {
    from {
        bottom: 60px;
        opacity: 0;
    }

    to {
        bottom: 50px;
        opacity: 1;
    }
}

.disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: grey;
}

    .disabled a {
        color: grey !important;
    }


body.rounded .member-list .media .background, body.rounded .project-list .media .projectpic img, body.rounded .member-list .media, body.rounded .project-list .media, body.rounded .card, body.rounded .activity-block {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
}

.activity-block {
    background: linear-gradient(to right, #2dc1c9 0%, #7e7e7e 30%, #252d47 100%);
    border-radius: 8px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
}

.grid-sortable {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

    .grid-sortable li {
        background: #fff;
        list-style: none;
        width: 350px;
        display: inline-block;
        height: 135px;
        vertical-align: top;
        padding: 5px;
        /*        top: 10px !important;
*/
    }

        .grid-sortable li > span {
            display: block;
            border-radius: 8px;
            overflow:hidden;
            border: 1px solid #e8e8e8;
            box-shadow: 0 2px 6px #e0e0e0;
/*            cursor: move;
*/        }

            .grid-sortable li > span span {
                display: block;
                width: 100%;
            }

.countValue {
    margin: 0 0 5px;
    font-size: 22px;
}

.highlight {
    border: 1px solid red;
    font-weight: bold;
    font-size: 45px;
    background-color: #333333;
}

.default {
    background: #cedc98;
    border: 1px solid #DDDDDD;
    color: #333333;
}

.grid-sortable .bg-icon {
    font-size: 60px;
    height: 100px;
    width: 100%;
    position: absolute;
    z-index: 0;
    top: 10px;
    left: 0;
    opacity: 0.1;
    padding: 0 15px;
}


.page_subtitles {
    font-size: 16px;
    color: #666;
    padding: 4px 0 8px 0;
    border-bottom: 1px solid #eaeded;
}

    .page_subtitles a {
        text-transform: none;
        font-size: 14px;
    }

/*=======================*/
/*==== Timelines ======*/
/*=======================*/
.timeline {
    margin: 15px auto;
}

    .timeline .media:before {
        content: " ";
        height: 100%;
        left: 14px;
        width: 1px;
        background: rgba(200, 212, 249, 0.2);
        position: absolute;
        top: 0;
    }

    .timeline .media .message_userpic {
        margin-right: 15px;
        height: 60px;
        width: 60px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }

        .timeline .media .message_userpic img {
            height: 100%;
            width: auto;
        }

        .timeline .media .message_userpic:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 1;
        }

        .timeline .media .message_userpic.then:before {
            background: rgba(45, 193, 201, 0.2);
            background: -moz-linear-gradient(left, rgba(45, 193, 201, 0.2) 0%, rgba(33, 148, 193, 0.6) 30%, #252d47 100%);
            background: -webkit-linear-gradient(left, rgba(45, 193, 201, 0.2) 0%, rgba(33, 148, 193, 0.6) 30%, #252d47 100%);
            background: linear-gradient(to right, rgba(45, 193, 201, 0.2) 0%, rgba(33, 148, 193, 0.6) 30%, #252d47 100%);
            color: white;
        }

            .timeline .media .message_userpic.then:before .progress-bar {
                background: rgba(81, 209, 216, 0.2);
            }

        .timeline .media .message_userpic.danger:before {
            background: rgba(228, 124, 100, 0.2);
            background: -moz-linear-gradient(left, rgba(228, 124, 100, 0.2) 0%, rgba(227, 100, 129, 0.6) 30%, #252d47 100%);
            background: -webkit-linear-gradient(left, rgba(228, 124, 100, 0.2) 0%, rgba(227, 100, 129, 0.6) 30%, #252d47 100%);
            background: linear-gradient(to right, rgba(228, 124, 100, 0.2) 0%, rgba(227, 100, 129, 0.6) 30%, #252d47 100%);
            color: white;
        }

            .timeline .media .message_userpic.danger:before .progress-bar {
                background: rgba(236, 161, 143, 0.2);
            }

        .timeline .media .message_userpic.warning:before {
            background: rgba(255, 186, 0, 0.2);
            background: -moz-linear-gradient(left, rgba(255, 186, 0, 0.2) 0%, rgba(252, 146, 68, 0.6) 30%, #252d47 100%);
            background: -webkit-linear-gradient(left, rgba(255, 186, 0, 0.2) 0%, rgba(252, 146, 68, 0.6) 30%, #252d47 100%);
            background: linear-gradient(to right, rgba(255, 186, 0, 0.2) 0%, rgba(252, 146, 68, 0.6) 30%, #252d47 100%);
            color: white;
        }

            .timeline .media .message_userpic.warning:before .progress-bar {
                background: rgba(255, 200, 51, 0.2);
            }

        .timeline .media .message_userpic.primary:before {
            background: rgba(122, 121, 254, 0.2);
            background: -moz-linear-gradient(left, rgba(122, 121, 254, 0.2) 0%, rgba(167, 88, 245, 0.6) 30%, #252d47 100%);
            background: -webkit-linear-gradient(left, rgba(122, 121, 254, 0.2) 0%, rgba(167, 88, 245, 0.6) 30%, #252d47 100%);
            background: linear-gradient(to right, rgba(122, 121, 254, 0.2) 0%, rgba(167, 88, 245, 0.6) 30%, #252d47 100%);
            color: white;
        }

            .timeline .media .message_userpic.primary:before .progress-bar {
                background: rgba(172, 172, 254, 0.2);
            }

    .timeline .media .indication {
        margin-right: 10px;
        height: 60px;
        width: 30px;
        position: relative;
        text-align: center;
        vertical-align: middle;
        line-height: 60px;
    }

    .timeline .media h6 {
        margin-top: -3px;
    }

        .timeline .media h6 small {
            color: #c8d4f9;
        }

/*=======================*/
/* comment list css */
/*=======================*/
.comment-list {
    overflow-y: auto;
    color: #c8d4f9;
}

    .comment-list > .media {
        color: #91a8f3;
        text-decoration: none;
        padding: 15px 0em;
        position: relative;
    }

        .comment-list > .media:last-child {
            border-bottom: 0;
        }

        .comment-list > .media .message_userpic {
            width: 30px;
            height: 30px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            border-radius: 3px;
            overflow: hidden;
            margin-right: 15px;
            position: relative;
        }

            .comment-list > .media .message_userpic .user-status {
                height: 8px;
                width: 8px;
                display: block;
                position: absolute;
                right: 0px;
                top: 0px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                border-radius: 5px;
                -webkit-box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.2);
                -ms-box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.2);
                box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.2);
                border: 1px solid #ffffff;
            }

        .comment-list > .media h6 {
            color: white;
            margin-bottom: .75rem;
            font-family: inherit;
            font-weight: 400;
            line-height: 1.1;
            font-size: 15px !important;
        }

            .comment-list > .media h6 a {
                color: white;
                font-weight: 600;
            }

            .comment-list > .media h6 small {
                color: #91a8f3;
            }

        .comment-list > .media .description {
            color: #d1dbfa;
            margin-top: 10px;
            font-size: 13px;
        }

        .comment-list > .media .form-check {
            margin-top: 5px;
            margin-right: 10px;
        }

    .comment-list .media.active h6 {
        text-decoration: line-through;
    }

    .comment-list .comment {
        border: 1px solid #364269;
        background: #1e253a;
        padding: 10px;
        margin: 0;
    }

        .comment-list .comment:last-child {
            border-bottom: 1px solid #364269;
        }

        .comment-list .comment .form-control {
            background: transparent;
            color: #c8d4f9;
            border: 0;
        }

            .comment-list .comment .form-control:focus {
                border: 0;
            }

/*=======================*/
/*======Cards css =======*/
/*=======================*/
.card {
    margin: 0;
    background: #252d47;
}

.btn-group-sm > .btn, .btn-sm {
    padding: 6px 10px;
}

.card .card-img-top {
    max-width: 100%;
}

.card .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .card .card-header .nav-item {
        position: relative;
    }

        .card .card-header .nav-item .pull-right .dropdown-menu {
            left: auto;
            right: 0px;
            margin-top: 0px;
        }

    .card .card-header .card-title {
        font-size: 18px;
        margin: -20px;
        line-height: 30px;
        font-weight: 300;
        color: white;
        vertical-align: middle;
    }

.page_subtitles small {
    background: #48b8e6;
    color: #fff;
    padding: 2px 6px 4px;
    border-radius: 2px;
    line-height: normal;
    font-size: 13px;
    vertical-align: middle;
    margin: 0 0 0 5px;
    position: relative;
    top: -3px;
}

.card .card-header .btn {
    line-height: 28px;
    padding: 0 12px;
    font-size: 13px;
    margin-left: 10px;
    height: 30px;
}

    .card .card-header .btn i {
        margin: 0 2px;
    }

    .card .card-header .btn:focus {
        color: white;
        -webkit-box-shadow: 0 0px 0px 0px transparent;
        -moz-box-shadow: 0 0px 0px 0px transparent;
        -ms-box-shadow: 0 0px 0px 0px transparent;
        box-shadow: 0 0px 0px 0px transparent;
        outline: none;
    }

.card .card-header .btn-link {
    padding: 0 6px;
}

.card .card-header .list-unstyled {
    overflow: visible;
}

    .card .card-header .list-unstyled .media {
        padding: 5px 0;
    }

.card .card-footer {
    background: #2c3654;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header:first-child {
    border-radius: calc(0px - 0px) calc(0px - 0px) 0 0;
}

.align-items-start {
    align-items: flex-start !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.card-header {
    padding: 0;
    margin-bottom: 0;
    background-color: #f7f7f9;
    border-bottom: 0px solid rgba(0,0,0,0.125);
}

/*======================================*/
/* media, event and data listing  css */
/*=====================================*/

.msgList {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.msgListItem {
    float: left;
    width: 100%;
    border: 1px solid #e1e1e1;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    cursor: pointer;
    font-size: 13px;
    padding: 7px 54px 7px 10px;
    margin: 0 0 6px;
    position: relative;
}


    .msgListItem span {
        display: inline-block;
        vertical-align: top;
    }

        .msgListItem span.msgList_Icons {
            position: relative;
            top: 3px;
        }

        .msgListItem span a {
            display: inline-block;
            color: #48b8e6;
            text-decoration: none;
            vertical-align: top;
            text-transform: none;
        }

.tickBtn {
    display: none;
    position: absolute;
    right: 10px;
    top: 8px;
}

.innerNotify {
    overflow: hidden;
    display: block;
    padding: 4px;
    margin: 2px 0 0;
}

.msgListItem:hover, .msgListItem.highlightrow {
    background: #45a8d2;
}

    .msgListItem:hover span, .msgListItem:hover span a, .msgListItem.highlightrow span, .msgListItem.highlightrow span a {
        color: #fff;
    }

    .msgListItem:hover .tickBtn, .msgListItem.highlightrow .tickBtn {
        display: block;
    }

.msgListUserIcon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover !important;
    display: inline-block;
    vertical-align: middle;
}

/*media, event and data listing  css ends*/
/*****Calendar Styles Starts****/
.calendar {
    padding: 10px;
}

    .calendar h2 {
        color: #666;
        font-size: 23px;
    }

mwl-calendar {
    margin: 5px 0 0;
    display: block;
}

    mwl-calendar .cal-row-fluid {
        clear: both;
        display: table;
        table-layout: fixed;
        width: 100%;
    }

        mwl-calendar .cal-row-fluid .cal-cell1 {
            float: none;
            display: table-cell;
        }

    mwl-calendar #cal-week-box {
        display: none !important;
    }

    mwl-calendar .cal-row-fluid:hover, mwl-calendar .cal-year-box .row:hover, mwl-calendar [class*=cal-cell]:hover {
        background-color: transparent !important;
    }

    mwl-calendar .cal-row-fluid.cal-row-head, mwl-calendar .cal-row-fluid.cal-row-head:hover,
    mwl-calendar .cal-row-fluid.cal-row-head .cal-cell1:hover {
        background-color: #bfbfbf !important;
    }

    /*mwl-calendar .cal-month-box, mwl-calendar .cal-week-box, mwl-calendar .cal-year-box {
        border: 1px solid #bfbfbf !important;
    }*/

    mwl-calendar .cal-month-box [class*=cal-cell], mwl-calendar .cal-year-box [class*=span] {
        border-right: 1px solid #bfbfbf !important;
    }

    mwl-calendar .cal-row-fluid [class*=cal-cell]:last-child {
        border-right: none !important;
    }

    mwl-calendar .cal-month-box .cal-row-fluid, mwl-calendar .cal-year-box .row {
        border-bottom: 1px solid #bfbfbf !important;
    }

    mwl-calendar .cal-month-box, mwl-calendar .cal-week-box, mwl-calendar .cal-year-box {
        border: 1px solid #bfbfbf;
    }

    mwl-calendar .cal-row-fluid.cal-row-head, mwl-calendar .cal-row-fluid.cal-row-head:hover {
        color: #666;
    }

    mwl-calendar .cal-row-head [class*=cal-cell], mwl-calendar .cal-row-head [class*=cal-cell]:first-child {
        font-weight: normal !important;
    }

    /*mwl-calendar .cal-month-box .cal-row-fluid, mwl-calendar .cal-year-box .row {
        border-bottom: 1px solid #bfbfbf !important;
    }*/

    mwl-calendar .cal-month-box div {
        margin: 0;
    }

    mwl-calendar .cal-slide-content {
        margin: 0 0 0 -1px !important;
    }

.col-md-6.btnwrap {
    padding: 0;
    width: auto;
}

.calendar-title {
    margin: 0;
    position: absolute;
    width: 100%;
    font-size: 23px;
    color: #666;
}

mwl-calendar .cal-row-fluid .cal-cell1, mwl-calendar .cal-day-weekend span[data-cal-date] {
    color: #ffffff !important;
    font-size: 13px !important;
    margin: 0 5px 0 0;
}

mwl-calendar span[data-cal-date] {
    opacity: .8 !important;
    margin: 0;
    font-size: 13px !important;
    margin: 0 5px 0 0;
}

mwl-calendar .cal-day-outmonth span[data-cal-date] {
    opacity: .2 !important;
}

.btn-default {
    background-image: none !important;
    background-color: #eeeeee !important;
    color: #666 !important;
    text-shadow: none !important;
}

    .btn-default:hover, .btn-default:focus {
        background: #a3a3a3 !important;
        color: #fff !important;
    }

mwl-calendar .cal-day-today { /*background-color: #204d74 !important;*/
    background: #2ec7cb !important;
    background: -moz-linear-gradient(left, #2ec7cb 0%, #6c8bef 100%) !important;
    background: -webkit-linear-gradient(left, #2ec7cb 0%, #6c8bef 100%) !important;
    background: linear-gradient(to right, #ccc 0%, #999 100%) !important;
}

mwl-calendar .cal-day-outmonth.cal-day-today {
    background: #204d74 !important;
}

mwl-calendar .cal-day-today span[data-cal-date], mwl-calendar .cal-year-box [class*=span] {
    color: #fff !important;
}

.badge {
    font-weight: normal;
}

    .badge.small {
        font-size: 10px;
        line-height: 11px;
        padding: 3px 6px;
        position: relative;
        top: -1px;
    }

mwl-calendar .cal-day-tick {
    bottom: 0 !important;
    margin-right: -13px !important;
    border: none !important;
    background: none !important;
}

    mwl-calendar .cal-day-tick:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #b1b1b1;
        left: 0;
        bottom: 0;
    }

.cal-cell.pointer:hover, .cal-cell.pointer:hover div.cal-month-day, mwl-calendar .cal-slide-content {
    background: #bfbfbf !important;
}

    mwl-calendar .cal-slide-content ul li.dragging-active .event-item {
        color: #fff !important;
    }

.text-primary {
    color: #666;
    font-weight: bold;
}

.tooltip-inner .text-primary, .cal-day-box .day-event a, .day-highlight a.event-item, .cal-week-box [data-event-class] {
    color: #000 !important;
}

.day-highlight .text-primary {
    color: #337ab7;
}

mwl-calendar a.event-item-action, mwl-calendar a.event-item-delete, mwl-calendar a.event-item-edit {
    padding: 1px 4px !important;
    background: #fff;
    margin: 0 2px;
    border-radius: 2px;
    box-shadow: 0 1px 1px 1px #3370a5;
}

    mwl-calendar a.event-item-action i, mwl-calendar a.event-item-delete i, mwl-calendar a.event-item-edit i {
        text-shadow: none;
    }

mwl-calendar .cal-year-box .row {
    margin: 0;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

mwl-calendar .cal-events-num {
    margin: 0;
}

mwl-calendar .cal-year-box [class*=span] {
    display: table-cell;
    float: none;
    height: 100px;
    vertical-align: middle;
}

mwl-calendar .cal-year-box .row [class*=col-]:last-child {
    border-right: none !important;
}

mwl-calendar .cal-year-box .row .cal-day-today:last-child {
    border-right: 5px solid #688fed !important;
}

    mwl-calendar .cal-year-box .row .cal-day-today:last-child:hover {
        border-right: 5px solid #3370a5 !important;
    }

.tooltip-inner:after, .tooltip-inner:before { /*#e9a62b*/
    display: none;
}

.tooltip.top .tooltip-arrow {
    bottom: -1px;
    left: 50%;
    margin-left: -9px;
    border-width: 9px 9px 0;
    border-top-color: #fff;
    z-index: 1;
}

.cal-day-box .cal-day-panel {
    border: 1px solid #42688d !important;
}

.cal-day-box .cal-day-hour, .cal-day-box .cal-day-hour:nth-child(odd) {
    background-color: #f5f5f5 !important;
}

.cal-day-box .cal-day-hour-part {
    border-bottom: thin dashed #2d5074 !important;
    display: inline-block;
    padding: 5px 0;
    height: 30px;
    color: #666;
    width: 100%;
}

.cal-week-box [data-event-class], .cal-day-box .day-highlight {
    text-shadow: none !important;
}

.cal-day-box .cal-day-hour-part:hover {
    background: #2ec7cb !important;
    background: -moz-linear-gradient(left, #2ec7cb 0%, #6c8bef 100%) !important;
    background: -webkit-linear-gradient(left, #2ec7cb 0%, #6c8bef 100%) !important;
    background: linear-gradient(to right, #999 0%, #ddd 100%) !important;
}

.table-bordered.cal-edit-grid {
    margin: 15px 0 0;
    clear: both;
    table-layout: fixed;
}

.table-bordered.cal-edit-grid thead th, .table-bordered.cal-edit-grid thead tr:first-child th {
    border: 1px solid #e1e1e1 ;
    color: #666 !important;
    background: #f5f5f5;
    font-size: 14px;
}

.table-bordered.cal-edit-grid thead th.delete-btn-col {
    width: 85px;
}

.table-bordered.cal-edit-grid tr td {
    border: 1px solid #e1e1e1;
    color: #666;
}

.table-bordered.cal-edit-grid tr td table.uib-timepicker td {
    border: none;
    padding: 0 5px;
}

.table-bordered.cal-edit-grid input[type="text"] {
    height: 30px;
}
.uib-datepicker table thead th {
    border:none !important;
    vertical-align:top;
}
.uib-datepicker table thead tr:nth-of-type(2) th {
    padding:4px 0;
}
.uib-datepicker table thead th button {
    height: 33px; border: none;  border-radius: 0;
}
.uib-datepicker table thead th button i.glyphicon  { top:0; }

.uib-datepicker table tbody td .btn, 
.uib-datepicker table tbody td .btn-sm {
    border-radius: 0;
    border: none;
    background: #fff !important;
    color: #666;
}
.uib-datepicker table tbody td .btn.active,
.uib-datepicker table tbody td .btn-default:hover, .uib-datepicker table tbody td .btn-default:focus{
     background: #7e7e7e !important;
     color:#fff !important;
}
.uib-datepicker .btn.active span,
.uib-datepicker .btn.btn-info.active span, .uib-datepicker .btn-default:hover span,
.uib-datepicker .btn-default:focus .text-info {
    color: #fff;
}


.uib-datepicker-popup.dropdown-menu {
    padding-top: 0;
}

/*****Calendar Styles Ends******/

/**Pos screen starts**/
#CreatePointOfSale .fluid-container, #EditPointOfSale .fluid-container {
    height: 100%;
    padding-bottom: 70px;
}

#CreatePointOfSale.stickyheadertab .fluid-container,
#EditPointOfSale.stickyheadertab .fluid-container {
    padding-top: 92px;
}

#CreatePointOfSale .search-section, #EditPointOfSale .search-section {
    width: 20%;
    margin: 0 15px 10px 0;
    max-width: inherit;
}

    #CreatePointOfSale .search-section .select2-container,
    #EditPointOfSale .search-section .select2-container {
        width: 85% !important;
        vertical-align: top;
    }

    #CreatePointOfSale .search-section.remarks, #EditPointOfSale .search-section.remarks {
        margin: 0;
    }

        #CreatePointOfSale .search-section.remarks .controls, #CreatePointOfSale .transaction-date,
        #EditPointOfSale .search-section.remarks .controls, #EditPointOfSale .transaction-date {
            width: 100%;
        }

            #CreatePointOfSale .search-section.remarks .controls textarea,
            #EditPointOfSale .search-section.remarks .controls textarea {
                height: 48px;
            }

    #CreatePointOfSale .search-section.product, #EditPointOfSale .search-section.product {
        width: 256px;
    }

.pagecontent.currentSale {
    padding-right: 44px;
}

#CreatePointOfSale .search-section .button-orange:not(.addoption),
#EditPointOfSale .search-section .button-orange:not(.addoption) {
    padding: 5px 7px;
}

#CreatePointOfSale .button-orange.addoption a, #EditPointOfSale .button-orange.addoption a {
    padding: 2px 10px 4px;
}

#CreatePointOfSale .menuinnertab.rightSideMenu, #EditPointOfSale .menuinnertab.rightSideMenu {
    position: absolute;
    right: 39px;
    top: 128px;
    width: auto;
    transform: rotate(-90deg);
    margin: 0;
    transform-origin: 100% 0;
    border: none;
    z-index: 100;
}

.smart-view #CreatePointOfSale .menuinnertab.rightSideMenu,
.smart-view #EditPointOfSale .menuinnertab.rightSideMenu {
    right: 53px;
}

#CreatePointOfSale.stickyheadertab .menuinnertab.rightSideMenu,
#EditPointOfSale.stickyheadertab .menuinnertab.rightSideMenu {
    position: fixed;
    top: 147px;
    right: 50px;
}

.smart-view #CreatePointOfSale.stickyheadertab .menuinnertab.rightSideMenu,
.smart-view #EditPointOfSale.stickyheadertab .menuinnertab.rightSideMenu {
    right: 66px;
}

#CreatePointOfSale .subheader, #EditPointOfSale .subheader {
    position: relative;
    border-bottom: 1px solid #42688d;
    margin: 0 0 10px;
}

#CreatePointOfSale .menuinnertab ul li, #EditPointOfSale .menuinnertab ul li {
    padding: 6px 14px;
    margin: 0 0 0 4px;
    float: right;
}
/**Pos screen ends**/
/***schedular starts***/
.schedule {
    padding: 10px;
}

    .schedule .scheduler_default_corner div:nth-of-type(2) {
        display: none;
    }

.scheduler_default_rowheader_inner {
    border-right: 1px solid #42688d !important;
    font-size: 14px;
}

.scheduler_default_timeheadercol_inner {
    border-right: 1px solid #42688d !important;
}

.scheduler_default_timeheadergroup_inner {
    border-right: 1px solid #42688d !important;
    border-bottom: 1px solid #42688d !important;
}

.scheduler_default_divider, .scheduler_default_splitter, .scheduler_default_divider_horizontal,
.scheduler_default_resourcedivider, .scheduler_default_matrix_horizontal_line, .scheduler_default_matrix_vertical_line {
    background: #42688d !important;
}

.scheduler_default_rowheader, .scheduler_default_corner {
    background: #243a57;
}

.scheduler_default_main {
    border: 1px solid #42688d !important;
    margin-top: 35px;
}

.scheduler_default_rowheader, .scheduler_default_corner,
.scheduler_default_timeheadergroup, .scheduler_default_timeheadercol, .scheduler_default_cell {
    background: #243a57 !important;
    color: #fff !important;
}

.scheduler_default_crosshair_vertical, .scheduler_default_crosshair_horizontal, .scheduler_default_crosshair_left,
.scheduler_default_crosshair_top {
    opacity: 0.3 !important;
}

.scheduler_default_crosshair_vertical, .scheduler_default_crosshair_horizontal, .scheduler_default_crosshair_left,
.scheduler_default_crosshair_top, .scheduler_default_shadow_inner {
    background: #55a0e1 !important;
}

.scheduler_default_event {
    color: #fff !important;
}

.scheduler_default_event_inner {
    background: #1066a8 !important;
    vertical-align: top;
    border: none !important;
}

.menu_default_main {
    background: #243a57 !important;
}

    .menu_default_main a {
        color: #fff !important;
        padding: 2px 10px !important;
    }

        .menu_default_main a:hover {
            background: #1066a8 !important;
        }

.bubble_default_main_inner {
    border: 1px solid #1066a8 !important;
    border-radius: 0 !important;
    background: #000 !important;
    color: #fff !important;
    padding: 5px 10px !important;
}
/***schedular ends***/

/**new loader styles starts**/
.bounce-wrapper {
    min-height: 200px;
    overflow: hidden;
    width: 300px;
}

.three-bounce-inner {
    margin: 100px auto;
    width: 80px;
    text-align: center;
}

    .three-bounce-inner .bounce-item {
        width: 20px;
        height: 20px;
        background-color: #7e7e7e;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
        animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    }

    .three-bounce-inner .bi-item1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .three-bounce-inner .bi-item2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-three-bounce {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-three-bounce {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/**new Loader styles ends***/

/**attendance popup view starts**/

.gridItemPopup {
    width: 200px;
    min-height: 120px;
    background: #fff;
    box-shadow: 0 -1px 23px #000000;
    padding: 10px;
    border: 1px solid #e1e1e1;
    position: fixed;
    z-index: 9999;
    top: 90px;
    display: none;
    margin-top: 8px;
    margin-left: -8px;
}

.tooltipArrow {
    width: 15px;
    height: 15px;
    background: #fff;
    border-right: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    position: absolute;
    top: -8px;
    transform: rotate(-45deg);
    left: 12px;
}

.gridItemPopup.rightAligned {
    margin-left: 6px;
}

    .gridItemPopup.rightAligned .tooltipArrow {
        left: auto;
        right: 12px;
    }

.gridItemPopup.movedToTop .tooltipArrow {
    top: auto;
    bottom: -10px;
    border: none;
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

.gridItemPopupInner {
    background: #fff;
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 1;
}

    .gridItemPopupInner .controls {
        width: 100%;
        margin: 0 0 10px;
    }

.attendanceCalendar {
    margin: 10px 0;
    display: inline-block;
    width: 100%;
}

    .attendanceCalendar .monthPicker {
        display: inline-block;
    }

    .attendanceCalendar .ui-datepicker .ui-datepicker-prev,
    .attendanceCalendar .ui-datepicker .ui-datepicker-next,
    .attendanceCalendar .ui-datepicker .ui-datepicker-prev.ui-state-hover,
    .attendanceCalendar .ui-datepicker .ui-datepicker-next.ui-state-hover {
        background: #7e7e7e !important;
        top: 3px;
    }

    .attendanceCalendar .ui-datepicker .ui-datepicker-next {
        right: 2px !important;
    }

.attendanceStatus a {
    font-size: 10px;
}

    .attendanceStatus a i {
        color: #10d410;
        font-size: 16px;
        cursor: pointer;
    }

.gridItemPopup.setTooltipBottom {
    margin-top: -8px;
}

    .gridItemPopup.setTooltipBottom .tooltipArrow {
        transform: rotate(136deg);
        top: auto;
        bottom: -8px;
    }

td.attendanceStatus {
    background-color: white;
}

th.attendanceStatus.today {
    background: linear-gradient(to bottom, #7edbff 0%,#252d47 100%);
    color: #666;
}

td.attendanceStatus.disabledColumns {
    background: #f7f7f7;
    pointer-events: none;
}

    td.attendanceStatus.disabledColumns a {
        opacity: 0.3;
        cursor: not-allowed;
    }



/**attendance popupview ends**/


.select2-search input {
    height: 28px !important;
    width: 100% !important;
    border: 1px solid #ccc !important;
    background: #fff url(../images/select2.png) no-repeat 100% -22px;
    color: #333;
}

.select2-results .select2-result-label {
    font-size: 13px !important;
}

/*.controls ul.select2-result-single li:first-child div.ui-select-choices-row-inner {
    background: #fff;
    color: #666;
}
*/

.select2-search-choice-close {
    background: url(../images/select2.png) 98% top no-repeat !important;
    top: 50% !important;
    transform: translateY(-50%);
}

.select2-drop {
    background: #fff;
    color: #666;
    border: 1px solid #bfbfbf;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .15) !important;
}

.select2-results .select2-highlighted, .select2-results .select2-highlighted:hover {
    background: #7e7e7e !important;
}

.select2-container-multi .select2-choices {
    border: 1px solid #bfbfbf !important;
    background: white !important;
}

    .select2-container-multi .select2-choices .select2-search-field input {
        color: #333;
        background: white !important;
        width: 100%;
    }

    .select2-container-multi .select2-choices .select2-search-choice {
        border: 1px solid #aaa;
        background: #999;
    }

.ui-select-choices-row:hover {
    background-color: #e4e4e4 !important;
}

.schedulerTable {
    background: #fff;
}

    .schedulerTable th {
        border: 1px solid #e1e1e1 !important;
        color: #333;
        background: #f5f5f5 !important;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .schedulerTable tbody th, .schedulerTable tbody td {
        border: 1px solid #e1e1e1;
    }

@media only screen and (min-width:1367px) {
    table .listing.searchlist.fixedposition tr th:nth-of-type(2) {
        max-width: 130px;
        min-width: 130px;
        width: 130px;
    }

    table.listing.searchlist.fixedposition tr th:nth-of-type(3) {
        max-width: 220px;
        min-width: 220px;
        width: 220px;
    }

    mainGrid tr th, mainGrid tr td { /*max-width:120px; width:120px;  min-width:120px;*/
        text-align: left;
    }

        mainGrid tr th:first-child, mainGrid tr td:first-child {
            max-width: 16px;
            min-width: 16px;
            width: 16px;
        }
}

@media only screen and (max-width:1605px) {
    table.product-view > thead > tr > th:nth-child(13) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(13) ~ td {
        display: none;
    }
    /*table.product-view > thead > tr > th:last-child{display:block !important;}
    table.product-view > tbody > tr > td:last-child{display:block !important;}*/
}

@media only screen and (max-width:1570px) {
    #ProductConfigSKU div.form-horizontal .form-group {
        width: 49%;
    }
}

@media only screen and (max-width: 1565px) {
    .advsearch .button-orange {
        margin: 0;
    }
}

@media only screen and (max-width: 1548px) {
    .add-np-section .button-orange {
        margin: 0;
    }
}

@media only screen and (max-width: 1480px) {
    table.product-view > thead > tr > th:nth-child(10) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(10) ~ td {
        display: none;
    }
    /*table.product-view > thead > tr > th:last-child{display:block !important;}
    table.product-view > tbody > tr > td:last-child{display:block !important;}*/
    table.listing .small-col-width {
        max-width: 30px;
        min-width: 30px;
        width: 30px;
    }

    table.listing .large-col-width {
        max-width: 75px;
        min-width: 75px;
        width: 75px;
    }

    table.listing .ex-large-col-width {
        max-width: 150px;
        min-width: 150px;
        width: 150px;
    }

    table.listing .medium-col-width {
        max-width: 50px;
        min-width: 50px;
        width: 50px;
    }
}

@media only screen and (max-width:2380px) {
    div.two-column-header div.form-group label.addprodleft.control-label {
        width: 130px;
    }

    .summary-panel .fl-advsearch-section div {
        width: 45%;
    }

    .fl-advsearch-section .two-fields select {
        width: 38%;
    }

    table.listing tr th, table.listing tr td {
        padding: 6px 5px;
    }

    table.listing.currentsale .small-col-width {
        max-width: 30px;
        min-width: 30px;
        width: 30px;
    }

    table.listing.currentsale .large-col-width {
        max-width: 75px;
        min-width: 75px;
        width: 75px;
    }

    table.listing.currentsale .ex-large-col-width {
        max-width: 150px;
        min-width: 150px;
        width: 150px;
    }

    table.listing.currentsale .medium-col-width {
        max-width: 40px;
        min-width: 40px;
        width: 40px;
    }
}

@media only screen and (max-width:1310px) {
    .summary-panel .popup.fl-advsearch {
        margin-left: -300px !important;
        width: 600px;
    }

        .summary-panel .popup.fl-advsearch table.listing.fl-advsearch > thead > tr > th:nth-child(7) ~ th {
            display: none;
        }

        .summary-panel .popup.fl-advsearch table.listing.fl-advsearch > tbody > tr > td:nth-child(7) ~ td {
            display: none;
        }
    /*.popup.fl-advsearch{margin-left: -300px !important;width: 600px;}*/
    .popup.fl-advsearch table.listing.fl-advsearch > thead > tr > th:nth-child(7) ~ th {
        display: none;
    }

    .popup.fl-advsearch table.listing.fl-advsearch > tbody > tr > td:nth-child(7) ~ td {
        display: none;
    }

    table.listing.currentsale .small-col-width {
        max-width: 30px;
        min-width: 30px;
        width: 30px;
    }

    table.listing.currentsale .large-col-width {
        max-width: 75px;
        min-width: 75px;
        width: 75px;
    }

    table.listing.currentsale .ex-large-col-width {
        max-width: 150px;
        min-width: 150px;
        width: 150px;
    }

    table.listing.currentsale .medium-col-width {
        max-width: 40px;
        min-width: 40px;
        width: 40px;
    }
}

@media only screen and (max-width:1280px) {
    .container-left {
        width: 500px;
    }

    .priceinfo .container-left {
        width: 500px;
    }

    .form-innerleft {
        margin-right: 0;
        min-width: 100px;
        width: 40%;
    }

    .priceinfo .form-innerleft {
        margin-right: 0;
    }

    .priceinfo .controls .form-innerright .transaction-date {
        width: 60%;
    }

    .popup.fl-advsearch {
        width: 91%;
    }

    .fl-advsearch-section div {
        width: 46%;
    }

    table.listing.currentsale .small-col-width {
        max-width: 30px;
        min-width: 30px;
        width: 30px;
    }

    table.listing.currentsale .large-col-width {
        max-width: 75px;
        min-width: 75px;
        width: 75px;
    }

    table.listing.currentsale .ex-large-col-width {
        max-width: 150px;
        min-width: 150px;
        width: 150px;
    }

    table.listing.currentsale .medium-col-width {
        max-width: 40px;
        min-width: 40px;
        width: 40px;
    }
}

@media only screen and (max-width:1242px) {
    .membergroup {
        width: 100%;
    }
}

@media only screen and (min-width:1217px) {
    #ProductConfigSKU div.form-horizontal .form-group div.controls {
        width: 54%;
    }
}

@media only screen and (max-width:1216px) {
    #ProductConfigSKU div.form-horizontal .form-group {
        width: 100%;
    }

    #SearchCategory .form-horizontal .container-left {
        width: 100%;
    }

    #ProductConfigSKU div.form-horizontal .form-group div.controls {
        width: 62%;
    }

    #SearchCategory .form-horizontal .addprodleft.control-label {
        width: 150px;
    }

    #ProductMaps .productcreteheader .container-left {
        width: 100%;
    }

    #ProductMaps .container-left {
        width: 100%;
    }

    #ProductMaps .form-group div.controls {
        width: 50%;
    }

    #SeoMetadata .container-left {
        width: 100%;
    }

    #SeoMetadata .form-group div.controls {
        width: 50%;
    }

    table.product-view > thead > tr > th:nth-child(9) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(9) ~ td {
        display: none;
    }
}

@media only screen and (max-width:1150px) {
    div.two-column-header div.form-group {
        width: 100%;
    }

        div.two-column-header div.form-group.onecol-header-left div.controls {
            width: 54%;
        }

    table.listing.currentsale .small-col-width {
        max-width: 30px;
        min-width: 30px;
        width: 30px;
    }

    table.listing.currentsale .large-col-width {
        max-width: 100px;
        min-width: 100px;
        width: 100px;
    }

    table.listing.currentsale .ex-large-col-width {
        max-width: 100px;
        min-width: 100px;
        width: 100px;
    }

    table.listing.currentsale .medium-col-width {
        max-width: 40px;
        min-width: 40px;
        width: 40px;
    }

    div.two-column-header div.form-group.onecol-header-left div.controls.fullcolumn-layout {
        width: 54%;
    }

    .popup.fl-advsearch {
        margin-left: -300px !important;
        width: 600px;
    }

    table.product-view > thead > tr > th:nth-child(8) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(8) ~ td {
        display: none;
    }
}

@media only screen and (max-width:1085px) {
    /*table.product-view > thead > tr > th:nth-child(8) ~ th{display:none;}
    table.product-view > tbody > tr > td:nth-child(8) ~ td{display:none;}*/
}

@media only screen and (max-width:1054px) {
    table.product-view > thead > tr > th:nth-child(7) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(7) ~ td {
        display: none;
    }

    .field-row {
        max-width: 170px;
    }

    div.two-column-header div.form-group {
        width: 100%;
    }

    .pagecontent.summaryview.minimize-fields .summary-panel {
        width: 74%;
    }

    div.two-column-header div.form-group.onecol-header-left div.controls {
        width: 54%;
    }

    div.two-column-header div.form-group label.addprodleft.control-label {
        width: 140px;
    }

    .innertab.Allocations div.two-column-header div.form-group div.controls {
        width: 100%;
    }

    .summaryview table.product-view > thead > tr > th:nth-child(5) ~ th {
        display: none;
    }

    .summaryview table.product-view > tbody > tr > td:nth-child(5) ~ td {
        display: none;
    }

    .summaryview mainGrid tr.subrow td:first-child { /*float:left;*/
        width: 100%;
    }

        .summaryview mainGrid tr.subrow td:first-child > div {
            min-width: 305px;
        }

    .summary-panel .ex-large-col-width {
        width: 110px;
        max-width: 110px;
        min-width: 110px;
        display: none;
    }

    table.listing.currentsale.stickparentgrid tr th:last-child, table.listing.currentsale.stickparentgrid tr td:last-child {
        display: none;
    }

    table#JobOperation.listing.currentsale .small-col-width {
        max-width: 30px;
        min-width: 30px;
        width: 30px;
    }

    .pagecontent {
        padding: 15px 5px;
    }

    .producttab {
        padding: 15px 5px;
    }

    .productcreaterightnav .container-left {
        width: 450px;
    }

    .priceinfo .form-horizontal .addprodleft.control-label {
        width: 100%;
        text-align: left;
    }

    .priceinfo .controls .form-innerright .transaction-date {
        width: 45%;
    }

    .summary-panel .popup.fl-advsearch {
        margin-left: -200px !important;
        width: 400px;
    }

        .summary-panel .popup.fl-advsearch table.listing.fl-advsearch > thead > tr > th:nth-child(5) ~ th {
            display: none;
        }

        .summary-panel .popup.fl-advsearch table.listing.fl-advsearch > tbody > tr > td:nth-child(5) ~ td {
            display: none;
        }

    .summary-panel .fl-advsearch-section div {
        width: 100%;
    }

    .popup.fl-advsearch {
        margin-left: -200px !important;
        width: 400px;
    }

        .popup.fl-advsearch table.listing.fl-advsearch > thead > tr > th:nth-child(5) ~ th {
            display: none;
        }

        .popup.fl-advsearch table.listing.fl-advsearch > tbody > tr > td:nth-child(5) ~ td {
            display: none;
        }

    .fl-advsearch-section div {
        width: 100%;
    }

    .fl-advsearch-section .two-fields select {
        width: 110px;
    }

    .button-orange.addprod-option {
        right: -32px;
    }

    .menuinnertab ul li {
        width: 50%;
        margin: 1px 0 0 -4.5px;
    }

    table.listing.tablegrid .ex-large-col-width {
        max-width: 120px;
        min-width: 120px;
        width: 120px;
    }

    table.listing.tablegrid .medium-col-width {
        max-width: 85px;
        min-width: 85px;
        width: 85px;
    }
}

@media only screen and (max-width:1000px) {
    ul.carousel li {
        width: 100% !important;
        margin: 0;
    }

    .bodyleftnav.inactive ul li a label {
        display: none;
    }
}

@media only screen and (max-width:991px) {
    div.main-page div.widget {
        float: left;
    }

    .form-horizontal .addprodleft.control-label {
        width: 140px;
    }

    .page-nav ul li {
        padding: 10px 5px;
    }

    .summary-tab-list .popup.comments::before {
        display: none;
    }

    .popup.comments {
        width: 340px;
    }
}

@media only screen and (max-width:950px) {
    .stats-left h4 {
        font-size: 20px;
    }

    .productcreaterightnav {
        padding: 5px 0;
        width: 100%;
    }

    .pagecontent {
        padding: 5px;
    }

    .pagecontent-column.columnleft {
        width: 205px;
    }

    .productcreateleftnav {
        margin: 15px 5px 0 0;
        width: 98%;
    }

    div.productcreateleftnav div.bs-example {
        padding: 5px;
    }

        div.productcreateleftnav div.bs-example .nav > li > a {
            padding: 10px 5px;
        }

    .pagecontent-column.columnright div.tab-content {
        margin: 10px 8px;
    }

    .pagecontent-column.columnright div.container-left.options {
        width: 100%;
    }
    /*.pagecontent-column.columnright .form-horizontal .addprodleft.control-label{width: 130px;}*/
    /*.pagecontent-column.columnright .form-horizontal div.controls{width: 50%;}*/
    #UploadProductImage div.upload-preview {
        width: 41%;
    }

        #UploadProductImage div.upload-preview .dropzone {
            padding: 8px 12px;
        }

    #UploadProductImage div.productcreteheader {
        font-size: 17px;
    }

    #UploadProductVideo div.upload-preview {
        width: 41%;
    }

        #UploadProductVideo div.upload-preview .dropzone {
            padding: 8px 12px;
        }

    #UploadProductVideo div.productcreteheader {
        font-size: 17px;
    }

    .producttab {
        padding: 2px;
    }

    table.listing tr th, table.listing tr td {
        font-size: 12px;
    }

    .summary-panel table.listing tr th, .summary-panel table.listing tr td {
        font-size: 12px;
    }

        .summary-panel table.listing tr td label {
            font-size: 12px;
        }

    .summary-panel .small-col-width {
        width: 50px;
        max-width: 50px;
        min-width: 50px;
    }

    .summary-panel .medium-col-width {
        width: 70px;
        max-width: 70px;
        min-width: 70px;
    }

    .summary-panel .ex-large-col-width {
        width: 110px;
        max-width: 110px;
        min-width: 110px;
        display: none;
    }
    /*table.product-view > thead > tr > th:nth-child(8) ~ th{display:none;}
    table.product-view > tbody > tr > td:nth-child(8) ~ td{display:none;}*/
    table.listing.currentsale .small-col-width {
        max-width: 30px;
        min-width: 30px;
        width: 30px;
    }

    table.listing.currentsale .large-col-width {
        max-width: 100px;
        min-width: 100px;
        width: 100px;
    }

    table.listing.currentsale .ex-large-col-width {
        max-width: 100px;
        min-width: 100px;
        width: 100px;
    }

    table.listing.currentsale .medium-col-width {
        max-width: 100px;
        min-width: 100px;
        width: 100px;
    }

    .field-row select {
        width: 100%;
    }

    div.summary-content table.listing.currentsale > thead > tr > th:nth-child(7) ~ th {
        display: none;
    }

    div.summary-content table.listing.currentsale > tbody > tr > td:nth-child(7) ~ td {
        display: none;
    }
    /*.table-topleft .field-row input[type="text"]{max-width: 142px;}*/
    .pagecontent-column.columnleft {
        min-width: 150px;
    }

    .popup.comments {
        width: 300px;
    }

    .summary-tab-list .popup.comments {
        left: -75px !important;
    }

    .large-col-width.detailview-grid {
        min-width: 150px !important;
        max-width: 150px !important;
        width: 150px !important;
    }

    .menuinnertab ul li {
        width: 100%;
        margin: 1px 0 0 -4.5px;
    }
}

@media only screen and (max-width:870px) {
    .form-horizontal .addprodleft.control-label {
        width: 100%;
        text-align: left;
    }

    .form-horizontal div.controls {
        width: 100%;
    }

    .productcreaterightnav .container-left {
        width: 100%;
    }

    .pagecontent-column.columnright .form-horizontal div.controls.brand {
        width: 88%;
    }
    /*---for product create page----*/
    table.product-view > thead > tr > th:nth-child(6) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(6) ~ td {
        display: none;
    }
}

@media only screen and (max-width:832px) {
    .summary-panel .popup.fl-advsearch {
        margin-left: -175px !important;
        width: 350px;
    }

    .popup.fl-advsearch {
        margin-left: -175px !important;
        width: 350px;
    }

    .pageheadername {
        font-size: 16px;
        padding: 10px 15px 5px 2px;
    }

    .field-row {
        min-width: 130px;
        max-width: 130px;
    }
    /*table.product-view > thead > tr > th:nth-child(7) ~ th{display:none;}
    table.product-view > tbody > tr > td:nth-child(7) ~ td{display:none;}*/

}

@media only screen and (max-width:810px) {
    .summaryview table.product-view > thead > tr > th:nth-child(3) ~ th {
        display: none;
    }

    .summaryview table.product-view > tbody > tr > td:nth-child(3) ~ td {
        display: none;
    }

    .summaryview mainGrid tr.subrow td:first-child { /*float:left;*/
        width: 100%;
    }

        .summaryview mainGrid tr.subrow td:first-child > div {
            min-width: 305px;
        }
    /*.field-row {min-width: 170px;}*/
}

@media only screen and (max-width:790px) {
    .searchmenu span {
        display: none;
    }

    .searchmenu input {
        background: #fff url("../images/search.png") no-repeat scroll 48% 61%;
    }

    .searchmenu.expand span {
        display: block;
    }
}

@media only screen and (max-width:780px) {
    .summaryview table.product-view > thead > tr > th:nth-child(3) ~ th {
        display: none;
    }

    .summaryview table.product-view > tbody > tr > td:nth-child(3) ~ td {
        display: none;
    }

    .summaryview mainGrid tr.subrow td:first-child {
        float: left;
        width: 100%;
    }

        .summaryview mainGrid tr.subrow td:first-child > div {
            min-width: 305px;
        }

    mainGrid tr td .gridtitle {
        display: inline;
        float: left;
        font-weight: bold;
        width: 50%;
    }

    mainGrid tr table.listing thead {
        display: none;
    }

    mainGrid tr table.listing tbody tr td {
        width: 100% !important;
        display: block;
        padding: 5px 40px;
    }
    /*.innertab.Allocations div.two-column-header div.form-group div.controls{width: 100%;}*/
    /*.summary-panel .popup.fl-advsearch{margin-left:-330px !important;}*/
    table.listing.planner-create.sku > thead > tr > th:nth-child(4) ~ th {
        display: none;
    }

    table.listing.planner-create.sku > tbody > tr > td:nth-child(4) ~ td {
        display: none;
    }
}

@media only screen and (max-width:768px) {
    .profilepicname span.profilename, .profilepicname span.companyname {
        display: none;
    }

    .profilepicname ul li span.profilename, .profilepicname ul li span.companyname, .myprofile-dropdown ul li.userAccountInfo {
        display: inline-block;
        width: 100%;
    }

    .myprofile-dropdown ul li.userAccountInfo {
        border-bottom: 1px solid #e0e0e0;
    }

    .profilepicname span {
        font-weight: 600;
    }

        .profilepicname span.companyname {
            font-weight: normal;
        }

    .vendorscrnheader {
        padding-top: 7px;
    }

    .message {
        padding: 0px 5px 0px 0px;
        margin: 8px 0px 0px;
    }

    .searchbox {
        margin-top: 9px;
    }

    .mymessage {
        top: 37px;
        right: -34px;
    }
}

@media only screen and (max-width:642px) {
    .stats-left {
        padding: 16px 5px;
    }

    .stats-right {
        width: 30%;
    }

    div.main-page div.charts-grids {
        padding: 8px;
    }

    ul.summaryheader li {
        width: 49%;
        margin: 0 0 12px;
    }

    #SearchCategory .form-horizontal .addprodleft.control-label {
        width: 130px;
    }

    #ProductMaps .pagecontent-column.columnright .form-horizontal .addprodleft.control-label {
        width: 130px;
    }

    #SeoMetadata .pagecontent-column.columnright .form-horizontal .addprodleft.control-label {
        width: 130px;
    }

    #ProductMaps .productcreteheader {
        font-size: 18px;
    }

    table.product-view > thead > tr > th:nth-child(5) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(5) ~ td {
        display: none;
    }

    table.listing tr th a, table.listing tr th a {
        color: #333;
        cursor: pointer;
    }

        table.listing tr th a span, table.listing tr th a span {
            text-align: right; /*float:right;*/
        }
}

@media only screen and (max-width:640px) {
    .stats-left h4 {
        font-size: 1.7em;
    }

    .stats-right {
        padding: 1.35em 0em;
    }

    .stats-right {
        padding: 1.52em 0;
        width: 32%;
    }

    h4.title {
        font-size: 1em;
    }

    .footer p {
        font-size: 0.85em;
    }

    .large-col-width.detailview-grid {
        max-width: 150px !important;
        min-width: 150px !important;
        width: 150px !important;
    }
}

@media only screen and (max-width:620px) {
    .pagecontent.summaryview .summary-panel {
        width: 100%;
    }

    .pagecontent.summaryview.minimize-fields .summary-panel {
        width: 100%;
    }

    .pagecontent.summaryview .producttab {
        display: none;
    }

    table.listing.currentsale.stickparentgrid > thead > tr > th:nth-child(5) ~ th {
        display: none;
    }

    table.listing.currentsale.stickparentgrid > tbody > tr > td:nth-child(5) ~ td {
        display: none;
    }

    table.listing.currentsale.stickparentgrid tbody tr.subtotal {
        float: left;
        display: inline-table;
    }

        table.listing.currentsale.stickparentgrid tbody tr.subtotal td span.caption {
            display: inline-flex;
        }

    table.listing.currentsale.stickparentgrid tbody tr td:first-child {
        float: left;
    }

    .large-col-width {
        max-width: 150px;
        min-width: 150px;
        width: 150px;
    }

    .summary-panel .summary-wrap {
        position: unset;
    }

    .summary-panel .summary-tab-inner {
        position: unset;
    }

    .order-details > div {
        width: 100%;
    }

    table.listing.tablegrid .ex-large-col-width {
        max-width: 80px;
        min-width: 80px;
        width: 80px;
    }

    table.listing.tablegrid .medium-col-width {
        max-width: 80px;
        min-width: 80px;
        width: 80px;
    }
}

@media only screen and (max-width:590px) {
    /*.bodyleftnav{display:none;}*/
    .bodyleftnav.inactive {
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden;
    }

        .bodyleftnav.inactive.showmobmenu {
            width: 50px !important;
            max-width: 50px !important;
            overflow: inherit;
        }

            .bodyleftnav.inactive.showmobmenu ul li a label {
                display: none !important;
            }

    ul.summaryheader li {
        width: 100%;
    }

    #SearchCategory .form-horizontal .addprodleft.control-label {
        width: 110px;
    }

    #ProductMaps .pagecontent-column.columnright .form-horizontal .addprodleft.control-label {
        width: 120px;
    }

    #SeoMetadata .form-group div.controls {
        width: 45%;
    }

    table.listing.planner-create.sku > thead > tr > th:nth-child(3) ~ th {
        display: none;
    }

    table.listing.planner-create.sku > tbody > tr > td:nth-child(3) ~ td {
        display: none;
    }

    table.listing.productprice > thead > tr > th:nth-child(4) ~ th {
        display: none;
    }

    table.listing.productprice > tbody > tr > td:nth-child(4) ~ td {
        display: none;
    }

    .order-details > div {
        width: 100%;
    }

    .popup.sign_view {
        width: 80%;
    }

    .kbw-signature {
        width: 100%;
    }

    .summary-header div.summary-controls ul.summary-tab li.summary-tab-list {
        position: inherit;
    }

    .summary-panel .summary-controls {
        position: relative;
    }

    .popup.comments {
        width: 300px;
    }

    .summary-tab-list .popup.comments {
        left: 0px !important;
    }

        .summary-tab-list .popup.comments::before {
            display: none;
        }

    .DashbaordWindow .main-page > div#BoilerPlate2 > div div.col-md-4.widget, .DashbaordWindow .main-page > div#BoilerPlate3 > div div.col-md-4.widget, .DashbaordWindow .main-page > div#BoilerPlate4 > div div.col-md-4.widget {
        min-height: inherit;
    }

    div.main-page div.widget .bg-icon {
        font-size: 82px;
    }

    .page_subtitles {
        font-size: 13px;
    }

        .page_subtitles a {
            font-size: 11px;
        }

        .page_subtitles small {
            font-size: 10px;
        }

    ul.carousel li a {
        padding: 2px 0;
    }

        ul.carousel li a label {
            font-size: 12px;
        }

    .statusTitle {
        padding-top: 0;
    }
}

@media only screen and (max-width:525px) {
    table.listing.tablegrid table.quantityfields th.medium-col-width:last-child {
        max-width: 80px !important;
        min-width: 80px !important;
        width: 80px !important;
    }

    table.listing.tablegrid table.quantityfields td.medium-col-width:last-child {
        max-width: 80px !important;
        min-width: 80px !important;
        width: 80px !important;
    }
}

@media only screen and (max-width:490px) {
    .windowcontainer {
        clear: both;
    }

    .vendorscrnheader span.caption_wrapper span.logo-caption {
        display: none;
    }

    .header {
        height: 50px;
        background-color: white;
    }

    ul.bodyrightmain-tab li.tab-list {
        margin-left: 5px;
    }

    div.main-page div.charts-grids {
        padding: 8px 0;
    }

    .stats-right {
        padding: 1.85em 0;
    }

    div.main-page div.widget.recentact {
        width: 100%;
    }

    div.main-page div.widget.qiklaunch {
        width: 100%;
        float: left;
    }

    .main-body {
        padding-top: 59px;
    }

    .mobileview-create {
        display: none;
    }

    ul.summaryheader {
        padding: 0 20px;
    }

        ul.summaryheader li {
            width: 100%;
        }

            ul.summaryheader li:first-child {
                margin-top: 20px;
            }

    .producttab div.page-nav ul {
        text-align: left;
    }

    .producttab {
        padding: 15px 8px;
    }

    .pagecontent div.pagecontent-column {
        display: inline-block;
        width: 100%;
    }

        .pagecontent div.pagecontent-column div.productcreateleftnav {
            min-height: auto;
            height: auto;
            padding-bottom: 1px;
        }

    .form-horizontal div.controls {
        width: 100%;
    }

    .form-horizontal .addprodleft.control-label {
        width: 100%;
    }

    .pagecontent-column.columnright .form-horizontal .addprodleft.control-label {
        width: 100%;
    }

    .pagecontent-column.columnright .form-horizontal div.controls {
        width: 100%;
    }

        .pagecontent-column.columnright .form-horizontal div.controls.brand {
            width: 88%;
        }
    /*---for product create page----*/
    div.two-column-header div.form-group label.addprodleft.control-label {
        width: 100%;
        text-align: left;
    }

    div.two-column-header div.form-group div.controls {
        width: 100%;
    }

    .button-orange.addprod-option {
        top: 1px;
        right: -35px;
    }

    .pageheader {
        font-size: 16px;
        padding: 10px 0 0;
    }

    .pageheader:before { display:none; }

    .pageheader > span {
        display: inline-block;
        padding: 0 0 5px;
        border-bottom: 1px solid #ccc;
        width: 100%;
    }

    .pageheader .button-orange { margin: 4px; }


    .pagecontent-column.columnright div.tab-content {
        margin: 10px 0;
    }

    div.productcreaterightnav .productcreteheader {
        margin: 0 10px 15px 10px;
        font-size: 18px;
    }

    .pagecontent-column.columnright .container-right.options {
        width: 100%;
    }

    div.two-column-header div.form-group.onecol-header-left div.controls {
        width: 100%;
    }

    div.two-column-header div.form-group div.controls.viewdetails {
        width: 87%;
    }

    .productcreateleftnav {
        width: 100%;
    }

    .productcreaterightnav {
        width: 100%;
        padding: 5px 10px;
    }

    .tab-content {
        margin: 10px 0;
    }

    #UploadProductImage div.upload-preview {
        margin: 20px 0 0 5px;
    }

    #UploadProductVideo div.upload-preview {
        margin: 20px 0 0 5px;
    }

    .footer p {
        font-size: 0.85em;
    }

    div.main-page div.widget.states-mdl {
        margin: 0 auto;
    }

    h4.title {
        padding: 0.5em 0 0.8em;
    }

    table.product-view > thead > tr > th:nth-child(4) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(4) ~ td {
        display: none;
    }

    .form-horizontal .addprodleft.control-label {
        text-align: left;
    }

    .pageheadername .button-orange.alignright a span {
        display: none;
    }

    .priceinfo .controls {
        width: 100%;
    }

    .summaryheader-blk {
        display: inline-block;
        width: 100%;
    }

    .bodyleftnav {
        height: 100%;
    }

    #ProductConfigSKU .form-horizontal .addprodleft.control-label {
        width: 100%;
    }

    #ProductConfigSKU div.form-horizontal .form-group div.controls {
        width: 100%;
    }

    #SeoMetadata .form-group div.controls {
        width: 100%;
    }

    #ProductMaps .form-group div.controls {
        width: 100%;
    }

    .large-col-width {
        max-width: 100px;
        min-width: 100px;
        width: 100px;
    }

    .horizontal-tabcontent .form-group {
        width: 100%;
    }

    .pageheadername div.alignright.menugroup {
        margin: 6px 0;
    }

    .pageheadername > span {
        margin-left: 5px;
    }

    div.two-column-header div.form-group.onecol-header-left div.controls.fullcolumn-layout {
        width: 100%;
    }

    .filterdropdown {
        width: 90%;
    }

    table.data-grid > thead > tr > th:nth-child(4) ~ th {
        display: none;
    }

    table.data-grid > tbody > tr > td:nth-child(4) ~ td {
        display: none;
    }

    .menuinnertab ul li {
        width: 100%;
        margin: 1px 0 0 -4.5px;
    }

    .DashbaordWindow .main-page > div {
        width: 100%;
    }

    #piechart canvas#pie {
        height: 24vh !important;
    }

    .profile-pic {
        width: 26px;
        height: 26px;
    }

    .profilepicname {
        margin: 0;
    }

    .search_box {
        margin: 9px 18px 0px 0;
    }

    .leftnaviconfull {
        margin: 12px 14px;
    }

    .vendorscrnheader img {
        margin-top: 4px;
        max-width: 115px;
    }

    .message {
        margin-top: 9px;
    }

    .myprofile-dropdown {
        top: 33px;
    }
    .snapshot {  margin-top: 13px; }

    .smart-view .windowcontainer:not(.SmartViewMenu) { margin:0; }
    
    .pageClose { top:6px; right:6px; border-radius: 0; background: #42688d; color: #fff; z-index: 1;}

    #dynamicPopover.cropPopup {
        width: 390px;
        height: 464px;
    }

    .pageheader.stickdiv.sticktotop {
        padding: 10px;
        top: 50px !important;
    }

    .form-horizontal .form-group {
        width: 100%;
    }

}

@media only screen and (max-width:420px) {
    table.product-view > thead > tr > th:nth-child(3) ~ th {
        display: none;
    }

    table.product-view > tbody > tr > td:nth-child(3) ~ td {
        display: none;
    }

    .pageheader .button-orange.alignright a span {
        display: none;
    }

    .pagecontent.summaryview .summary-panel {
        width: 100%;
    }

    .pageheadername div.createprodlink i {
        margin-right: 0;
    }
    /*.pagecontent div.pagecontent-column{width:88%;}*/
    .pageheadername {
        font-size: 18px;
    }

    .summary-panel .popup.fl-advsearch {
        margin-left: -146px !important;
        width: 280px;
    }

        .summary-panel .popup.fl-advsearch table.listing.fl-advsearch > thead > tr > th:nth-child(3) ~ th {
            display: none;
        }

        .summary-panel .popup.fl-advsearch table.listing.fl-advsearch > tbody > tr > td:nth-child(3) ~ td {
            display: none;
        }

    .popup.fl-advsearch {
        margin-left: -146px !important;
        width: 280px;
    }

        .popup.fl-advsearch table.listing.fl-advsearch > thead > tr > th:nth-child(3) ~ th {
            display: none;
        }

        .popup.fl-advsearch table.listing.fl-advsearch > tbody > tr > td:nth-child(3) ~ td {
            display: none;
        }

    .productcreaterightnav {
        width: 100%;
    }

    .container-right.options {
        width: 100%;
    }

    .controls {
        width: 98%;
    }

    .minimize-fields div.two-column-header div.form-group div.controls {
        width: 100%;
    }

    .minimize-fields div.two-column-header div.form-group label.addprodleft.control-label {
        text-align: left;
        width: 100%;
    }

    table.listing.currentsale.stickparentgrid > thead > tr > th:nth-child(3) ~ th {
        display: none;
    }

    table.listing.currentsale.stickparentgrid > tbody > tr > td:nth-child(3) ~ td {
        display: none;
    }

    .fl-advsearch-section .two-fields span.filterfield {
        width: 50%;
    }

    table.listing tr th, table.listing tr td {
        padding: 10px;
        font-size: 13px;
    }

    table.listing.productprice > thead > tr > th:nth-child(3) ~ th {
        display: none;
    }

    table.listing.productprice > tbody > tr > td:nth-child(3) ~ td {
        display: none;
    }

    table.grid > thead > tr > th:nth-child(3) ~ th {
        display: none;
    }

    table.grid > tbody > tr > td:nth-child(3) ~ td {
        display: none;
    }

    table.data-grid > thead > tr > th:nth-child(3) ~ th {
        display: none;
    }

    table.data-grid > tbody > tr > td:nth-child(3) ~ td {
        display: none;
    }

    table.listing.tablegrid tr th, table.listing.tablegrid tr td {
        padding: 5px;
    }
}

@media only screen and (max-width:360px) {
    .pageheader .button-orange.alignright {
        margin-left: 5px;
        margin-right: 5px;
    }

    .pageheadername .button-orange.alignright {
        margin-left: 5px;
        margin-right: 5px;
    }

    .popup.comments {
        width: 280px;
    }

    table.listing.tablegrid table.quantityfields th.medium-col-width:last-child {
        max-width: 50px !important;
        min-width: 50px !important;
        width: 50px !important;
    }

    table.listing.tablegrid table.quantityfields td.medium-col-width:last-child {
        max-width: 50px !important;
        min-width: 50px !important;
        width: 50px !important;
    }

    table.listing.tablegrid .button-orange {
        padding: 5px;
    }
}

@media only screen and (max-width:321px) {
    .productcreaterightnav {
        padding: 5px;
    }

    .popup.comments {
        width: 250px;
    }
}
/*----------css changes for responsive ERP ends----------*/


.tablewrapper th.toggleContainer thead {
    background: #f5f5f5;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
}

.wrapper {
    margin: 0 auto;
    padding: 0;
    font-family: Arial;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.tablewrapper {
    display: inline-block;
    width: 100%;
}

    .tablewrapper table {
        border-spacing: 0;
        border-collapse: collapse;
        width: 100%;
        font-size: 13px;
        line-height: normal;
        table-layout: fixed;
    }

    .tablewrapper th.toggleContainer table th, .tablewrapper td.toggleContainer table td {
        padding: 3px 3px;
        border-bottom: 1px solid #e1e1e1;
        vertical-align: middle;
    }

    .tablewrapper td.toggleContainer table tr.childGrid td {
        display: none;
    }

    .tablewrapper th.statuscolumn, .tablewrapper td.statuscolumn {
        min-width: 10px;
        max-width: 10px;
        width: 10px;
    }

    .tablewrapper th.icon-column, .tablewrapper td.icon-column {
        min-width: 30px;
        max-width: 30px;
        width: 30px;
    }


    .tablewrapper table th.treeview, .tablewrapper table td.treeview {
        min-width: 20px;
        max-width: 20px;
        width: 20px;
    }

    .tablewrapper table th.check-box, .tablewrapper table td.check-box {
        min-width: 30px;
        max-width: 30px;
        width: 30px;
    }

    .tablewrapper th.toggleContainer table th span, .tablewrapper td.toggleContainer table td span:not(.excludeGridStyle), .tablewrapper td.toggleContainer table td span:not(.excludeGridStyle) {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #555;
    }

    .tablewrapper th.toggleContainer table th {
        padding: 5px 3px;
    }

        .tablewrapper th.toggleContainer table th span.colmn-sort {
            width: 11px;
            height: 100%;
            vertical-align: middle;
            position: relative;
            text-overflow: inherit;
        }

            .tablewrapper th.toggleContainer table th span.colmn-sort .fa {
                width: auto;
            }

                .tablewrapper th.toggleContainer table th span.colmn-sort .fa:after {
                    content: "\f0dd";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }

    .tablewrapper th.toggleContainer table a {
        color: #333;
        font-weight: normal;
    }

    .tablewrapper tr.highlightrow {
        background: #ccc;
        color: white;
    }

    .tablewrapper th.toggleContainer table a:hover {
        color: #ddd !important;
        cursor: pointer;
    }

    .tablewrapper tr {
        cursor: pointer;
    }

    .tablewrapper th.toggleContainer table th.first-col, .tablewrapper td.toggleContainer table td.first-col,
    .tablewrapper th.toggleContainer table th.last-col, .tablewrapper td.toggleContainer table td.last-col {
        display: table-cell !important;
        text-align: end;
    }

    .tablewrapper th.toggleContainer div.toggleContent table th.first-col,
    .tablewrapper td.toggleContainer div.toggleContent table td.first-col,
    .tablewrapper th.toggleContainer div.toggleContent table th.last-col,
    .tablewrapper td.toggleContainer div.toggleContent table td.last-col {
        display: none !important;
    }

    .tablewrapper td.toggleContainer div.toggleContent table td {
        display: none;
        float: left;
        width: 100%;
        max-width: inherit;
        box-sizing: border-box;
        background: #fafafa;
    }

        .tablewrapper td.toggleContainer div.toggleContent table td span {
            display: inline-block;
            width: 50%;
            vertical-align: top;
            box-sizing: border-box;
        }

span.gridTitle {
    font-weight: bold;
}

.tablewrapper td.toggleContainer div.toggleContent table td span.gridTitle {
    width: 160px;
    margin: 0 10px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span.gridColumnSetting {
    font-size: 20px;
    cursor: pointer;
    float: right;
    width: 18px !important;
}

.tablewrapper th.toggleContainer table th.last-col {
    position: relative;
}

.gridColumnList {
    display: none;
    position: absolute;
    top: 33px;
    right: 0;
    width: 150px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px 2px #ccc;
    padding: 6px 0;
}

    .gridColumnList ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .gridColumnList ul li {
            display: inline-block;
            width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
            text-align: left;
        }

            .gridColumnList ul li label {
                padding: 3px;
                display: block;
                cursor: pointer;
            }

            .gridColumnList ul li input[type="checkbox"] {
                position: relative;
                top: 2px;
            }

.iconset {
    display: inline-block;
    margin: 0;
}

.tablewrapper td.toggleContainer table td span.toggleArrow {
    font-size: 17px;
    display: none;
    position: relative;
    top: -4px;
}

.tablewrapper td.toggleContainer table td span.toggleArrow,
.tablewrapper td.toggleContainer table td div.iconset span {
    width: 15px;
    text-align: center;
    line-height: 20px;
    margin: 0 0 0 3px;
    cursor: pointer;
}

.tablewrapper th.toggleContainer table th.hideColumn, .tablewrapper td.toggleContainer table td.hideColumn {
    display: none !important
}

.tablewrapper td.toggleContainer div.toggleContent table td {
    display: inline-block;
}

.toggleContent {
    display: none;
}

#StudentAttendence .ui-datepicker select.ui-datepicker-month,
#StudentAttendence .ui-datepicker select.ui-datepicker-year,
#StaffAttendence .ui-datepicker select.ui-datepicker-month,
#StaffAttendence .ui-datepicker select.ui-datepicker-year {
    color: #333;
    font-weight: normal;
    font-family: 'Open Sans';
}

#StudentAttendence .ui-datepicker {
    padding: 3px 5px;
}

    #StudentAttendence .ui-datepicker .ui-widget-header, #StaffAttendence .ui-datepicker .ui-widget-header {
        background: #fff;
    }

    #StudentAttendence .ui-datepicker .ui-datepicker-prev span,
    #StaffAttendence .ui-datepicker .ui-datepicker-prev span {
        border-right-color: #fff;
        top: 10px;
    }

    #StudentAttendence .ui-datepicker .ui-datepicker-next span,
    #StaffAttendence .ui-datepicker .ui-datepicker-next span {
        border-left-color: #fff;
        left: 15px;
        top: 10px;
    }

.selectedBanner {
    display: inline-block;
    width: 50px !important;
    vertical-align: middle;
}

    .selectedBanner img {
        max-width: 100%;
    }
/*smartview/quickview panel styles starts*/
.smartViewTabMenu {
    position: fixed;
    z-index: 2001;
    top: 68px;
    right: 12px;
    width: 42px;
    bottom: 5px;
    overflow-y: auto;
    text-align: center;
}

    .smartViewTabMenu::-webkit-scrollbar {
        display: none;
    }

ul.tabMenu {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    white-space: nowrap;
    display: block;
    transform: rotate(90deg) translate(100%, 0);
    transform-origin: right top;
}

    ul.tabMenu li {
        display: inline-block;
        background: radial-gradient(ellipse at center, #e8e8e8 0%, #ddd 100%);
        padding: 7px 14px;
        color: #555;
        font-size: 13px;
        margin: 0 3px;
        cursor: pointer;
        position: relative;
        border-radius: 0 0 5px 5px;
        border: 1px solid #e1e1e1;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }

        ul.tabMenu li:hover, ul.tabMenu li.selected {
            background: #777;
            background: linear-gradient(to right, #777 0%, #aaa 100%);
            color: #fff;
        }

.menu-close {
    position: absolute;
    font-size: 18px;
    color: #666;
    width: 15px;
    height: 15px;
    top: 0;
    text-align: center;
    padding: 4px;
    left: 0;
    line-height: 2px;
    transform: rotate(-90deg);
}

ul.tabMenu li:hover .menu-close, ul.tabMenu li.selected .menu-close {
    color: #fff;
}

.smartviewTab {
    position: fixed;
    right: 50px;
    width: 0;
    top: 65px;
    bottom: 4px;
    background: #fff;
    z-index: 2001;
    padding: 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .smartviewTab div.panelTitle {
        overflow: inherit;
        background: #ececec;
        color: #666;
        padding: 8px;
        border: 1px solid #d8d8d8;
        position: relative;
        width: 280px;
    }

    .smartviewTab div.searchmenu {
        flex: 0;
        overflow: inherit;
        border-top: none;
    }

.smartview_close {
    position: absolute;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    background: #b3b3b3;
    line-height: 15px;
    cursor: pointer;
    box-shadow: 0 2px 2px #818181 inset;
    font-size: 16px;
}

.smartViewInner {
    display: none;
    padding: 4px;
    width: 280px;
    position: absolute;
    overflow: hidden;
    top: 35px;
    bottom: 0;
}

    .smartViewInner.show {
        display: block;
    }

.treeMenuWrap {
    position: absolute;
    top: 44px;
    bottom: 4px;
    right: 4px;
    left: 4px;
    overflow-y: auto;
}

.smartviewTab.showQuickViewPanel {
    width: 280px;
}

.smartviewTab div.panelTitle .close-pin {
    position: absolute;
    right: 32px;
    top: 5px;
    width: 23px;
    height: 24px;
    margin: 0;
}

.smartviewTab.pinned .close-pin .pin {
    transform: rotate(90deg);
}

/*smartview/quickview panel styles ends*/

#dynamicPopover {
    width: 789px;
    height: 559px;
    margin: 0 !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: fixed;
    z-index: 10000;
}

    #dynamicPopover.cropPopup {
        width: 821px;
        height: 579px;
    }

    #dynamicPopover .popup-wrap {
        height: 100%;
        z-index: 101;
    }

#dynamicPopoverContainer {
    display: block;
    width: 100%;
    height: calc(100% - 28px);
}

    #dynamicPopoverContainer img {
        max-width: 100%;
    }

.cropBtn {
    position: absolute;
    right: 16px;
    bottom: 8px;
}

    .cropBtn .button-orange {
        background: #48b8e6;
    }
/*.cropper-bg {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJEOEEwQzcxN0NDMTFFQjlDQzI5N0MyOThFREY2QTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJEOEEwQzgxN0NDMTFFQjlDQzI5N0MyOThFREY2QTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QkQ4QTBDNTE3Q0MxMUVCOUNDMjk3QzI5OEVERjZBMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QkQ4QTBDNjE3Q0MxMUVCOUNDMjk3QzI5OEVERjZBMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoOIw8kAAAChSURBVHja7NAxAQAACAMgtX/nWcHPByLQSYqbUSBLlixZsmQpkCVLlixZshTIkiVLlixZCmTJkiVLliwFsmTJkiVLlgJZsmTJkiVLgSxZsmTJkqVAlixZsmTJUiBLlixZsmQpkCVLlixZshTIkiVLlixZCmTJkiVLliwFsmTJkiVLlgJZsmTJkiVLgSxZsmTJkqVAlixZsmTJUiBL1rcVYADP8QPF/gpqAAAAAABJRU5ErkJggg==');
    background-repeat: repeat;
}*/

.dynamicPopoverOverlay, .snapshotOverlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: transparent;
    display: none;
    z-index: 10000;
}

.notifyjs-wrapper {
    position: relative !important;
}

td .notifyjs-wrapper {
    top: 15px;
}

.notifyjs-container {
    display: none;
    z-index: 1;
    position: absolute;
    min-width: 420px;
    max-width: 420px;
}

.notifyjs-corner .notifyjs-wrapper, .notifyjs-corner .notifyjs-container {
    position: relative;
    display: block;
    height: inherit;
    width: inherit;
    margin: 3px;
}

.notifyjs-arrow {
    position: absolute;
    z-index: 2;
    width: 0;
    height: 0;
    top: 100% !important;
}

td div.notifyjs-arrow, td div.notifyjs-container {
    top: 100% !important;
}

td div.notifyjs-container {
    margin: 5px 0 0;
}

td .notifyjs-bootstrap-base {
    box-shadow: 0 1px 1px 0 #ccc;
    padding: 8px 10px;
    white-space: inherit !important;
    word-break: break-all;
}

    td .notifyjs-bootstrap-base.notifyjs-bootstrap-warn,
    td .notifyjs-bootstrap-base.notifyjs-bootstrap-info,
    td .notifyjs-bootstrap-base.notifyjs-bootstrap-success {
        background-image: none;
        display: inline-block;
    }

    td .notifyjs-bootstrap-base.notifyjs-bootstrap-warn {
        border-color: #ffed8e;
        background-color: #ffed8e;
    }

    td .notifyjs-bootstrap-base span {
        white-space: inherit !important;
    }

.windowcontainer iframe form table {
    width: 100%;
}

/**gridchild item styles**/

.setBorderBtm {
    border-bottom: 1px solid #e1e1e1;
}

.toggleIcon.active {
    transform: rotate(180deg);
    position: relative;
    top: 2px;
}

.itemList {
    border: 1px solid #eae9e9;
    padding: 2px;
    margin: 0.35%;
    position: relative;
    max-width: 32.6%;
    flex: 0 0 32.6%;
    background: #fff;
    box-shadow: 0 1px 2px 0 #ccc;
    cursor: default;
    min-height: 72px;
}

    .itemList .mainTitle {
        padding: 5px 20px 5px 5px;
        font-size: 15px;
        border-bottom: 1px solid #e1e1e1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .itemList img {
        max-width: 43px;
        padding: 4px;
        border: 1px solid #e6e6e6;
        background: #fff;
        box-shadow: 0 2px 6px 0 #ccc;
    }

    .itemList .checkboxwrap {
        margin: 7px 0 0;
    }

.itemDescription {
    font-size: 12px;
}

    .itemDescription .product-title {
        font-size: 15px;
        padding-right: 22px
    }

    .itemDescription span {
        display: inherit !important;
        width: auto !important;
    }

.itemListControls {
    padding: 0 0 8px;
}

    .itemListControls span {
        transition: all 0.2s ease;
        width: auto !important;
        margin: 0 0 0 3px;
    }

        .itemListControls span .fa {
            padding: 0 5px 0 0;
        }

.itemListOptions {
    position: absolute;
    right: 5px;
    top: 7px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
}

    .itemListOptions:hover {
        background: #f2f2f2;
    }

.dotBtns {
    display: inline-block;
    width: 3px !important;
    padding: 5px 0;
}

    .dotBtns span.dot {
        width: 3px !important;
        height: 3px;
        border-radius: 50%;
        background: #989898;
        margin: 0 0 2px;
        float: left;
    }

.itemListDropdown {
    transition: all 0.2s ease;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    z-index: 1;
    width: 140px;
    background: #fff;
    border: 1px solid #e1e1e1;
    transform: scale(0);
    opacity: 0;
}

    .itemListDropdown span {
        text-align: left;
        padding: 5px;
    }

        .itemListDropdown span:hover {
            background: #f2f2f2;
        }

.itemListOptions:hover div.itemListDropdown {
    transform: scale(1);
    opacity: 1;
}

/**gridchid item style ends**/

/*product sync styles starts*/
.removeButton {
    background: #7e7e7e;
    line-height: 13px !important;
    font-size: 26px !important;
    display: inline-block !important;
    float: none !important;
    height: 25px;
}

.addButton {
    font-size: 20px !important;
    line-height: 15px !important;
    height: 25px;
}

.statusBar {
    height: 8px;
    position: relative;
    margin: 0;
}

    .statusBar > span {
        display: block;
        height: 100%;
        border-radius: 8px;
        background-color: #48b8e6;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #48b8e6), color-stop(1, #48b8e6) );
        box-shadow: inset 0 2px 9px #48b8e6, inset 0 -2px 6px #48b8e6;
        position: relative;
        overflow: hidden;
    }

        .statusBar > span:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
            z-index: 1;
            background-size: 50px 50px;
            animation: animateprogressbar 2s linear infinite;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            overflow: hidden;
        }

@-webkit-keyframes animateprogressbar {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 50px;
    }
}


.tabs ul li {
    list-style: none;
    display: inline-block;
    padding: 5px 10px;
    background: #f5f5f5;
    border: 1px solid #e6e4e4;
    border-bottom-color: #e6e4e4;
    cursor: pointer;
    position: relative;
    top: 1px;
    border-radius: 5px 5px 0 0;
}

    .tabs ul li.active {
        background: #777;
        background: linear-gradient(to right, #777 0%, #aaa 100%);
        color: #fff;
    }

        .tabs ul li.active span.badge {
            display: none;
        }

.tabContent {
    display: none;
}

    .tabContent.active {
        display: block;
    }

ul.notifyList li {
    list-style: none;
    background: #fff;
    border-radius: 5px;
    padding: 6px 10px;
    box-shadow: 0 1px 6px 0 #ccc;
    font-size: 13px;
    margin: 5px 0;
}

/*product sync styles ends*/

/*grid description popup starts*/
.descriptionData {
    display: none !important;
}

.dataDisplayPopup {
    position: fixed;
    max-width: 340px;
    z-index: 2003;
    top: 0;
    display: none;
    opacity: 0;
}

.dataDisplayInner {
    display: flex;
    width: 100%;
    background: #fdee69;
    box-shadow: 0 2px 12px #dcdcdc;
    padding: 10px;
    line-height: 18px;
    text-shadow: none;
    border: 1px solid #f3de2e;
    font-size: 13px;
}

.dataPointer {
    width: 15px;
    height: 15px;
    background: #fdee69;
    position: absolute;
    bottom: -7px;
    border-right: 1px solid #f3de2e;
    border-bottom: 1px solid #f3de2e;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

/*grid description popup ends*/

@media only screen and (max-width:527px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/

}



@media only screen and (min-width: 528px) and (max-width: 689px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3) {
        display: none;
    }
}

@media only screen and (min-width: 690px) and (max-width: 788px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4) {
        display: none;
    }
}


@media only screen and (min-width: 790px) and (max-width: 929px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5) {
        display: none;
    }
}


@media only screen and (min-width: 930px) and (max-width: 1049px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6) {
        display: none;
    }
}


@media only screen and (min-width: 1050px) and (max-width: 1179px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6),
    .tablewrapper td.toggleContainer table td:nth-child(7), .tablewrapper th.toggleContainer table th:nth-child(7) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(7) {
        display: none;
    }
}

@media only screen and (min-width: 1180px) and (max-width: 1339px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6),
    .tablewrapper td.toggleContainer table td:nth-child(7), .tablewrapper th.toggleContainer table th:nth-child(7),
    .tablewrapper td.toggleContainer table td:nth-child(8), .tablewrapper th.toggleContainer table th:nth-child(8) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(7),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(8) {
        display: none;
    }
}

@media only screen and (min-width: 1340px) and (max-width:1437px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6),
    .tablewrapper td.toggleContainer table td:nth-child(7), .tablewrapper th.toggleContainer table th:nth-child(7),
    .tablewrapper td.toggleContainer table td:nth-child(8), .tablewrapper th.toggleContainer table th:nth-child(8),
    .tablewrapper td.toggleContainer table td:nth-child(9), .tablewrapper th.toggleContainer table th:nth-child(9) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(7),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(8),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(9) {
        display: none;
    }
}


@media only screen and (min-width:1438px) and (max-width:1567px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6),
    .tablewrapper td.toggleContainer table td:nth-child(7), .tablewrapper th.toggleContainer table th:nth-child(7),
    .tablewrapper td.toggleContainer table td:nth-child(8), .tablewrapper th.toggleContainer table th:nth-child(8),
    .tablewrapper td.toggleContainer table td:nth-child(9), .tablewrapper th.toggleContainer table th:nth-child(9),
    .tablewrapper td.toggleContainer table td:nth-child(10), .tablewrapper th.toggleContainer table th:nth-child(10) {
        display: table-cell;
    }


    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(7),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(8),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(9),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(10) {
        display: none;
    }
}

@media only screen and (min-width:1568px) and (max-width:1697px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6),
    .tablewrapper td.toggleContainer table td:nth-child(7), .tablewrapper th.toggleContainer table th:nth-child(7),
    .tablewrapper td.toggleContainer table td:nth-child(8), .tablewrapper th.toggleContainer table th:nth-child(8),
    .tablewrapper td.toggleContainer table td:nth-child(9), .tablewrapper th.toggleContainer table th:nth-child(9),
    .tablewrapper td.toggleContainer table td:nth-child(10), .tablewrapper th.toggleContainer table th:nth-child(10),
    .tablewrapper td.toggleContainer table td:nth-child(11), .tablewrapper th.toggleContainer table th:nth-child(11) {
        display: table-cell;
    }


    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(7),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(8),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(9),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(10),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(11) {
        display: none;
    }
}

@media only screen and (min-width:1698px) and (max-width:1828px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6),
    .tablewrapper td.toggleContainer table td:nth-child(7), .tablewrapper th.toggleContainer table th:nth-child(7),
    .tablewrapper td.toggleContainer table td:nth-child(8), .tablewrapper th.toggleContainer table th:nth-child(8),
    .tablewrapper td.toggleContainer table td:nth-child(9), .tablewrapper th.toggleContainer table th:nth-child(9),
    .tablewrapper td.toggleContainer table td:nth-child(10), .tablewrapper th.toggleContainer table th:nth-child(10),
    .tablewrapper td.toggleContainer table td:nth-child(11), .tablewrapper th.toggleContainer table th:nth-child(11),
    .tablewrapper td.toggleContainer table td:nth-child(12), .tablewrapper th.toggleContainer table th:nth-child(12) {
        display: table-cell;
    }


    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(7),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(8),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(9),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(10),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(11),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(12) {
        display: none;
    }
}


@media only screen and (min-width:1829px) and (max-width:1960px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6),
    .tablewrapper td.toggleContainer table td:nth-child(7), .tablewrapper th.toggleContainer table th:nth-child(7),
    .tablewrapper td.toggleContainer table td:nth-child(8), .tablewrapper th.toggleContainer table th:nth-child(8),
    .tablewrapper td.toggleContainer table td:nth-child(9), .tablewrapper th.toggleContainer table th:nth-child(9),
    .tablewrapper td.toggleContainer table td:nth-child(10), .tablewrapper th.toggleContainer table th:nth-child(10),
    .tablewrapper td.toggleContainer table td:nth-child(11), .tablewrapper th.toggleContainer table th:nth-child(11),
    .tablewrapper td.toggleContainer table td:nth-child(12), .tablewrapper th.toggleContainer table th:nth-child(12),
    .tablewrapper td.toggleContainer table td:nth-child(13), .tablewrapper th.toggleContainer table th:nth-child(13) {
        display: table-cell;
    }

    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(7),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(8),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(9),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(10),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(11),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(12),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(13) {
        display: none;
    }
}

@media only screen and (min-width:1961px) and (max-width:2560px) {
    /*Hide toggleparent grids*/
    .tablewrapper td.toggleContainer table td:nth-child(2), .tablewrapper th.toggleContainer table th:nth-child(2),
    .tablewrapper td.toggleContainer table td:nth-child(3), .tablewrapper th.toggleContainer table th:nth-child(3),
    .tablewrapper td.toggleContainer table td:nth-child(4), .tablewrapper th.toggleContainer table th:nth-child(4),
    .tablewrapper td.toggleContainer table td:nth-child(5), .tablewrapper th.toggleContainer table th:nth-child(5),
    .tablewrapper td.toggleContainer table td:nth-child(6), .tablewrapper th.toggleContainer table th:nth-child(6),
    .tablewrapper td.toggleContainer table td:nth-child(7), .tablewrapper th.toggleContainer table th:nth-child(7),
    .tablewrapper td.toggleContainer table td:nth-child(8), .tablewrapper th.toggleContainer table th:nth-child(8),
    .tablewrapper td.toggleContainer table td:nth-child(9), .tablewrapper th.toggleContainer table th:nth-child(9),
    .tablewrapper td.toggleContainer table td:nth-child(10), .tablewrapper th.toggleContainer table th:nth-child(10),
    .tablewrapper td.toggleContainer table td:nth-child(11), .tablewrapper th.toggleContainer table th:nth-child(11),
    .tablewrapper td.toggleContainer table td:nth-child(12), .tablewrapper th.toggleContainer table th:nth-child(12),
    .tablewrapper td.toggleContainer table td:nth-child(13), .tablewrapper th.toggleContainer table th:nth-child(13),
    .tablewrapper td.toggleContainer table td:nth-child(14), .tablewrapper th.toggleContainer table th:nth-child(14) {
        display: table-cell;
    }


    /*shows hidden parent grids in toggleContent*/
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(2),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(3),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(4),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(5),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(6),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(7),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(8),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(9),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(10),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(11),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(12),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(13),
    .tablewrapper td.toggleContainer div.toggleContent table td:nth-child(14) {
        display: none;
    }
}

@media only screen and (min-width:2561px) {
    .tablewrapper {
        overflow-x: auto;
    }

        .tablewrapper th.toggleContainer table th, .tablewrapper td.toggleContainer table td {
            display: table-cell;
        }

    span.toggleArrow {
        display: none !important;
    }

    .toggleContent {
        display: none;
    }
}

/*.c3 {
    fill: whitesmoke;
}*/

/* If you want a thin axis line, add this as well.*/
.c3-axis-x, .c3-axis-y {
    /*fill: none;
    stroke-width: 0.5;
    stroke: #fff;
    font-variant:normal;*/
    /*color:whitesmoke !important;*/
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background: #fff !important;
}

.workflowList ul li {
    list-style: none;
    padding: 6px 0 6px;
    margin: 0;
    float: left;
    width: 100%;
    position: relative;
    color: #b9b9b9;
}

    .workflowList ul li.processing {
        font-weight: 600;
        color: #333;
    }

    .workflowList ul li:before {
        position: absolute;
        left: 7px;
        content: "";
        width: 2px;
        background: #b9b9b9;
        height: 100%;
        top: -50%;
        margin: 0;
    }

    .workflowList ul li:first-child:before {
        display: none;
    }

    .workflowList ul li:last-child {
        padding-bottom: 0;
    }

    .workflowList ul li span.flowdataDetails {
        display: inline-block;
        width: 100%;
        position: relative;
    }

        .workflowList ul li span.flowdataDetails span.flowData {
            padding: 0 14px 0 20px;
        }

        .workflowList ul li span.flowdataDetails:before {
            position: absolute;
            content: "";
            width: 8px;
            height: 8px;
            background: #b9b9b9;
            left: 4px;
            top: 6px;
            border-radius: 50%;
            z-index: 1;
        }

    .workflowList ul li.processing span.flowdataDetails:before {
        background: #1eb2fc;
        border: 1px solid #fff;
        transform: scale(2.5);
    }

    .workflowList ul li.active:before,
    .workflowList ul li.active span.flowdataDetails:before {
        background: #7e7e7e;
    }

    .workflowList ul li.active {
        color: #f5f5f5;
    }

    .workflowList ul li.reject {
        color: #ff0000;
    }

    .workflowList ul li.active.reject:before,
    .workflowList ul li.active.reject span.flowdataDetails:before {
        background: #ff0000;
    }

    .workflowList ul li.active span.flowdataDetails:before {
        transform: scale(1.4);
    }

span.flowdataDetails span.flowStatus_Icon {
    width: 17px;
    height: 17px;
    position: absolute;
    left: 22px;
    top: 2px;
}

.workflowList ul li.forward span.flowStatus_Icon {
    background: url(../../images/forward_Icon.png) no-repeat;
}

.workflowList ul li.approval span.flowStatus_Icon {
    background: url(../../images/approved_icon.png) no-repeat;
}

.workflowList ul li.processing span.flowStatus_Icon {
    background: url(../../images/workflow_pending.png) no-repeat;
    top: 1px;
}

.workflowList ul li.reject span.flowStatus_Icon {
    background-size: 17px !important;
    background: url(../../images/circle-wrong.png) no-repeat;
}

.textellipsis {
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.flowstatus_time {
    /*width: 40%;*/
    float: right !important;
}

.streamItems {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
}

.activityStream .contentItems {
    border: none;
    padding: 10px;
    background: #fff;
    margin: 5px 0;
    display: flex;
    box-shadow: 0 2px 5px 0 #ccc;
}

.activityStream .activityCnt {
    padding: 0 0 0 6px;
    font-size: 12px;
    margin-top: 0px;
}

.activityStream .contentItems span.chat-img {
    width: 30px;
    height: 30px;
    text-align: center;
    top: 50%;
    flex: 0;
}


.activityStream .contentItems span.time {
    text-align:right;
    margin-top:0;
    display:block;
}

/**********************step progress*/
.step-container {
    width: auto;
    position: relative;
    z-index: 1;
}

    .step-container > div {
        display: inline-block;
        width: 48%;
    }

        .step-container > div span {
            padding: 0 0 0 16px;
        }

.step-progressbar li {
    float: left;
    width: 74px;
    position: relative;
    text-align: center;
    margin: 6px 0 0;
}

.step-progressbar {
    counter-reset: step;
}


    .step-progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 30px;
        height: 30px;
        display: block;
        margin: 0 auto 5px;
        border-radius: 50%;
        line-height: 28px;
        background: #3a466d;
        color: #bebebe;
        font-weight: normal;
        text-shadow: none;
    }

    .step-progressbar li:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background: #979797;
        top: 15px;
        left: -50%;
        z-index: -1;
    }

    .step-progressbar li:first-child:after {
        display: none;
    }

    .step-progressbar li.active + li:before {
        border-color: #5f97e7;
        background: #31c4cd;
        color: white
    }

/*********************Header filter*******************/
.profile-information .entity-profile-pic img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 10px solid #f1f2f7;
    margin-top: 20px;
}


.card {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    margin: 1rem;
    position: relative;
}

.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

    .card-1:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

.card-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.waypoint {
    color: gray;
}

.imageCropArea {
    position: fixed;
    left: 200px;
    right: 100px;
    top: 50px;
    bottom: 50px;
    z-index: 9999;
    background: #000;
}

.cropImage {
    z-index: 9999;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #48b8e6;
    color: #fff;
    padding: 5px 10px;
    border: none;
}

.canceBtn {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #48b8e6;
    border: 1px solid #48b8e6;
    background: #fff;
    right: -12px;
    top: -10px;
    z-index: 99;
}
/*dashboard widget style starts*/

.widgetContainer .widget { min-height:125px; padding:10px; border:1px solid; }
.widgetDescription  { color:#666 !important; }
.widgetIcon { font-size: 30px;  padding: 9px;  height: 54px;  margin: 0 0 0 15px;  color: #fff;  width: 54px;
    display: flex;  align-items: center; justify-content: center;
}
.widgetTitle { border-bottom:1px solid; }


.widget_count {
    font-size: 60px;
    position: relative;
    top: 11px;
}
.activityIcon { font-size:16px; background:#efad4d; padding:3px 5px; margin:0 5px 0 0; color:#fff; }

.widget_count sub {
    font-size: 15px;
    bottom: 0;
}
 
.circle-chart__circle {
    animation: circle-chart-fill 2s reverse;
    transform: rotate(-90deg);
    transform-origin: center;
}

.widgetDescription .badge {
    padding: 8px 10px;
    font-weight: bold;
    min-width: 50px;
}

@keyframes circle-chart-fill {
    to {
        stroke-dasharray: 0 100;
    }
}


/*dashboard widget style ends*/

/*filtercrumb  style starts*/

.filterOverview {
    padding: 5px 0 10px;
    justify-content: flex-start;
}

.filterCrumbs {
    background: #f5f5f5; padding: 4px 5px 4px 8px; margin: 0 5px 0 0;  font-size: 13px;
    display: flex;  border: 1px solid #e2e2e2;  box-shadow: 0 1px 2px 0px #ececec;
    align-items: center; border-radius:4px; height:30px;
}

button.deleteCrumbs {
    width: 18px;  height: 18px;   background: #fff;  font-size: 10px;  margin: 0 0 0 5px;
    border-radius: 50%;  font-weight: bold;  border: 1px solid #e2e0e0;
}

/*filtercrumb  style ends*/

/*style for select2 parent child starts*/
.level_1 { font-weight: 500 !important; }
.level_2 { padding-left: 10px !important; }

/*styles for parent child ends*/

/*styles for snapshot starts*/
.popup.pagePopup[data-popup-type="snapshotWindow"] { width:690px; position:fixed !important; margin:0 !important; transform:translate(-50%,-50%);  z-index: 10000; }
.snapShotContainer {  width: 100%;  height: 300px;  overflow-y: auto;  border: 1px solid #ccc; }
.snapShotContainer canvas { width:auto !important; height:auto !important; max-width:100%; }
.commentsArea textarea { height:80px;}
.snapshot_icon { width:21px; height:21px; background:url("../images/snapshot_icon.png") no-repeat; display:inline-block; }
/*styles for snapshot ends*/
.controls .lightbox img {
    max-width: 85px;
}
/*.picker-switch table tbody tr,*/
.timepicker table tr {
    border: none !important;
}  
/*.datetimepicker-widget { padding:10px; }
.datetimepicker-widget ul li { display:inline-block; width:100%; padding:0 0 5px; }
.picker-switch table { width:auto; float:right; }
.picker-switch table tbody tr td { padding:0; vertical-align:middle !important; text-align:center !important; height:22px; }*/
/*.timepicker-picker table { width:100%; }
.timepicker-picker table tr td {  vertical-align:middle !important; text-align:center !important; padding:0; }
.timepicker-picker td .btn[data-action="togglePeriod"] { float:right; }
.picker-switch .dp-clear {
    background: #7e7e7e; padding: 3px 9px 5px; font-size: 12px; color: #fff; border-radius: 4px; line-height: normal;
}
.picker-switch .dp-clear:hover { background: #484848; }
.picker-switch .dp-clear:before { content:"clear"; }*/
.dp-up:before {
    content: ""; width: 0;  height: 0;  border-left: 8px solid transparent;  border-right: 8px solid transparent;
    border-bottom: 8px solid #333; top:50%; left:50%;  position: absolute;  transform: translateY(-50%, -50%); }

.dp-down:before {
    content: ""; width: 0;  height: 0;  border-left: 8px solid transparent;  border-right: 8px solid transparent;
    border-top: 8px solid #333;  position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }

.grid_data_list_wrap { width: 33.33%;  padding: 5px 8px 8px; }
.grid_data_list_wrap > div { background: #fff; padding: 8px 10px; box-shadow: 0 2px 9px 0 #f2f2f2; }
.grid_data_left img { max-width: 64px; padding:10px 10px 10px 0; }

.threeColumn .grid_data_list_wrap { width: 33.33%; max-width: 360px; }

.twoColumn .grid_data_list_wrap { width: 50%; }

.singleColumn .grid_data_list_wrap {
    width: 100%;
}

.popover.bs-popover-bottom {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.25),0 5px 15px 2px rgba(0,0,0,.2) !important;
    margin-left: -40px;
}

#GridTable > #languageoption {

}

.route-fieldset-compact {
    min-width : 100%;
}