@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spinner-panel {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spinner {
    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spinner {
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-webkit-keyframes spin2 {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes search-spinner {
    to {
        transform: rotate(360deg)
    }
}

@keyframes loading-spinner-main {
    to {
        transform: rotate(360deg)
    }
}

.loader-dots {
    font-size: 9px;
    width: 1em;
    height: 1em;
    position: absolute;
    border-radius: 50%;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    transform: translate(-50%, -50%);
    margin-left: 45px;
    margin-top: 40px;
}


@-webkit-keyframes load5 {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #1ab394, 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.5), -1.8em -1.8em 0 0em rgba(26,179,148, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.7), 1.8em -1.8em 0 0em #1ab394, 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.5), 1.8em -1.8em 0 0em rgba(26,179,148, 0.7), 2.5em 0em 0 0em #1ab394, 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.5), 2.5em 0em 0 0em rgba(26,179,148, 0.7), 1.75em 1.75em 0 0em #1ab394, 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.5), 1.75em 1.75em 0 0em rgba(26,179,148, 0.7), 0em 2.5em 0 0em #1ab394, -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.5), 0em 2.5em 0 0em rgba(26,179,148, 0.7), -1.8em 1.8em 0 0em #1ab394, -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.5), -1.8em 1.8em 0 0em rgba(26,179,148, 0.7), -2.6em 0em 0 0em #1ab394, -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.5), -2.6em 0em 0 0em rgba(26,179,148, 0.7), -1.8em -1.8em 0 0em #1ab394;
    }
}

@keyframes load5 {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #1ab394, 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.5), -1.8em -1.8em 0 0em rgba(26,179,148, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.7), 1.8em -1.8em 0 0em #1ab394, 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.5), 1.8em -1.8em 0 0em rgba(26,179,148, 0.7), 2.5em 0em 0 0em #1ab394, 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.5), 2.5em 0em 0 0em rgba(26,179,148, 0.7), 1.75em 1.75em 0 0em #1ab394, 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.5), 1.75em 1.75em 0 0em rgba(26,179,148, 0.7), 0em 2.5em 0 0em #1ab394, -1.8em 1.8em 0 0em rgba(26,179,148, 0.2), -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.5), 0em 2.5em 0 0em rgba(26,179,148, 0.7), -1.8em 1.8em 0 0em #1ab394, -2.6em 0em 0 0em rgba(26,179,148, 0.2), -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.5), -1.8em 1.8em 0 0em rgba(26,179,148, 0.7), -2.6em 0em 0 0em #1ab394, -1.8em -1.8em 0 0em rgba(26,179,148, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(26,179,148, 0.2), 1.8em -1.8em 0 0em rgba(26,179,148, 0.2), 2.5em 0em 0 0em rgba(26,179,148, 0.2), 1.75em 1.75em 0 0em rgba(26,179,148, 0.2), 0em 2.5em 0 0em rgba(26,179,148, 0.2), -1.8em 1.8em 0 0em rgba(26,179,148, 0.5), -2.6em 0em 0 0em rgba(26,179,148, 0.7), -1.8em -1.8em 0 0em #1ab394;
    }
}


html {
    width: 100vw
}

.login-background {
    background-color: #2f4050 !important
}

.JCLRgrip:hover {
    border-right: 1px dashed #bbb
}

.form-inline .input-daterange {
    max-width: 254px !important
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

no-hover-color:hover {
    color: inherit !important
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    margin: 3px 0 0
}

.editable-address {
    display: block;
    margin-bottom: 5px
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
	position: absolute;
	margin-left: 6px;
	border: 0;
	border-radius: 10px;
	border-radius: 8px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	background-clip: padding-box;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px
}
li.dropdown-submenu {
	position: relative
}
.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float:right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #ccc;
	margin-top: 5px;
	margin-right: -10px
}

.dropdown-submenu{position:relative;
}
.dropdown-submenu>.dropdown-menu{
                  top:0;
                  left:100%;
                  margin-top:-6px;
                  margin-left: 4px;
                  -webkit-border-radius:0 6px 6px 6px;
                  -moz-border-radius:0 6px 6px 6px;
                  border-radius:0 6px 6px 6px;
                  /* border: 1px solid rgba(0,0,0,.15); */
                  border-radius: 4px;
                  position: absolute !important;
}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.dropdown-submenu li {
    max-width: 220px;
    width: 220px;
}

.editable-address label {
    display: inline-block
}

@media (max-width:480px) {
    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
        position: absolute;
        left: 0;
        right: 0;
        border: 1px solid #ddd;
        background: #fff;
        width: 100%
    }
}

.reportTable td:last-child, .reportTable th:last-child {
    text-align: right !important;
    font-weight: 500
}

.reportTable .no-records-found td {
    text-align: center !important;
    font-weight: 400
}

@media print {
    #pageheaderDiv, .btn, .btn.dropdown-toggle .bs-caret, .collapse-link {
        display: none
    }

    #pageheaderSubDiv {
        margin-top: 10px
    }

    .fixed-table-body, .ibox-title, table {
        border: 0
    }

    .ibox {
        margin: 0
    }

    .btn.dropdown-toggle, .form-control {
        border: 0;
        background: 0 0;
        display: block
    }

    #mainFooter, .fixed-table-toolbar, .pagination, [data-np="1"] {
        display: none !important
    }
}

.sub-total-label {
    padding: 9px;
    background-color: #f3f3f4;
    font-weight: 500
}

.item-image {
    /* -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.2); */
    /*-moz-box-shadow: 0 0 1px 1px rgba(0,0,0,.2); */
    /* box-shadow: 0 0 1px 1px rgba(0,0,0,.2); */
}

#return-to-top i, #return-to-top-not, #return-to-top-not i {
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#return-to-top-not {
    bottom: 50px;
    right: 17px;
    float: right;
    background: #1a2226;
    background: rgba(26,34,38,.6);
    width: 25px;
    height: 27px;
    text-decoration: none;
    -moz-border-radius: 35px;
    border-radius: 5px;
    display: none;
    z-index: 999;
    position: absolute;
    -webkit-transition: all .3s linear
}

    #return-to-top i, #return-to-top-not i {
        color: #fff;
        margin: 0;
        position: relative;
        left: -7px;
        top: 3px;
        font-size: 16px;
        -webkit-transition: all .3s ease
    }

    #return-to-top-not:hover, #return-to-top:hover {
        background: rgba(26,34,38,.8)
    }

        #return-to-top-not:hover i, #return-to-top:hover i {
            color: #fff;
            top: 5px
        }

#return-to-top i {
    left: 9px;
    top: 10px;
    font-size: 19px
}

body.modal-open {
    margin: 0;
    overflow-y: auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
body.modal-open::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.modal.show-at-top {
        top: 5% !important;
    margin-top: 0 !important;
}

@media screen and (min-width:979px) {
    .modal-xl {
        width: 1200px
    }
}

label:hover:before {
    border: 1px solid #1ab394 !important
}

.spinner:not(:required):before {
    z-index: 2000;
    content: '';
    top: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    border-radius: 50%;
    border: 7px solid #ccc;
    border-top-color: #1ab394;
    animation: spinner 1s linear infinite
}

a[disabled] {
    color: gray;
    cursor: not-allowed
}

div.datepicker {
    z-index: 999999999999999 !important
}

.dims-avatar img {
    border-radius: 3px;
    display: block;
    margin: 0 auto;
    height: 100%;
    width: 100%
}

.dims-avatar-app-image {
    height: 100%;
    width: 50px
}

@media screen and (min-width:979px) {
    .mdl-xl {
        margin-left: -600px !important
    }

    .mdl-lg {
        margin-left: -450px !important
    }

    .mdl-md {
        margin-left: -303px !important
    }

    .mdl-sm {
        margin-left: -285px !important
    }
}

.alignTop {
    top: 50px !important;
    margin-top: 0 !important
}

.alertContainer {
    padding: 0
}

    .alertContainer:empty {
        display: none
    }

.nav-tabs.no-margin-left > li:first-child {
    margin-left: 0
}

.row-br tr {
    border-bottom: solid 1px #ddd !important
}

.box-header > .box-tools.pull-right .dropdown-menu {
    right: 0;
    left: auto
}

p {
    margin: 0 !important
}

.table.no-padding, .table.no-padding td, .table.no-padding th {
    padding: 0
}

.dropdown-menu > li > a > i {
    padding-right: 5px;
    font-size: 14px
}

@media screen and (max-width:764px) {
    .bs-bars .btn, .bs-bars .btn-group, .tags-label {
        width: 100% !important
    }
}

.bootstrap-table tr.selected {
    background-color: #f3f3f4 !important
}

.validationText {
    color: red
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 5px
}

.selectedMenu {
    color: #fff !important;
    background: #293846 !important;
    border-left-color: #2a6182 !important;
    font-size: 14px !important
}

@media (max-width:480px) {
    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
        position: absolute;
        left: 0;
        right: 0;
        border: 1px solid #ddd;
        background: #fff;
        width: 100%
    }
}

.form-table {
    width: 100%
}

    .form-table tr:first-child td {
        border: 0 !important
    }

    .form-table tr td {
        padding-top: 10px !important
    }

        .form-table tr td:nth-child(odd) {
            font-weight: 400;
        }

    .form-table.itemMasterDetail tr td:first-child {
        width: 111px
    }

    .form-table tr td:last-child {
        text-align: right;
        padding-right: 30px;
        word-break: break-all
    }

.table-blue-header {
    white-space: pre-wrap
}

.itemMasterDetail td {
    padding-bottom: 9px !important;
    border: #fff !important
}

.toast-custom {
    background-color: #000
}

#loadingMessageDivStatic > div {
    position: absolute;
    overflow: hidden;
    width: 100%;
    bottom: 0;
    -moz-border-radius: 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    color: #5a5a5a;
    background-color: #f4f3f4;
    padding: 2px;
    border: solid 1px #d7d7d7;
    text-shadow: 0 1px 1px #c4c4c4;
    text-indent: 28px
}

#loadingMessageDivStatic {
    background-color: transparent;
    bottom: 0;
    margin-top: 10px;
    z-index: 99999999999;
    position: fixed;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.form-table-2 {
    width: 100%
}

    .form-table-2 tr td {
        padding-top: 4px;
        padding-right: 5px;
        vertical-align:top;
    }

        .form-table-2 tr td:first-child {
            white-space: nowrap;
            width: 25%;
            text-indent: 2%;
            font-weight: 400;
        }

.loader {
    font-size: 10px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: #15143d;
    background: -moz-linear-gradient(left,#15143d 10%,rgba(255,255,255,0) 42%);
    background: -webkit-gradient(left top,right top,color-stop(10%,#15143d),color-stop(42%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,#15143d 10%,rgba(255,255,255,0) 42%);
    background: -o-linear-gradient(left,#15143d 10%,rgba(255,255,255,0) 42%);
    background: -ms-linear-gradient(left,#15143d 10%,rgba(255,255,255,0) 42%);
    background: linear-gradient(to right,#15143d 10%,rgba(255,255,255,0) 42%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15143d', endColorstr='#ffffff', GradientType=1 );
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0)
}

    .loader:after, .loader:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0
    }

    .loader:before {
        background: #fff;
        width: 50%;
        height: 50%;
        border-radius: 100% 0 0 0
    }

    .loader:after {
        background: #0dc5c1;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        margin: auto;
        bottom: 0;
        right: 0
    }

.order-total-label {
    font-size: 24px;
    color: #888;
    font-weight: 500
}

.table-summary td:first-child {
    width: 40%
}

.modal-draggable .modal-header:hover {
    cursor: move
}

.modal.fade.nofly {
    -webkit-transition: opacity .05s linear;
    -moz-transition: opacity .05s linear;
    -o-transition: opacity .05s linear;
    transition: opacity .05s linear
}

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1a2226;
    background: rgba(26,34,38,.6);
    width: 35px;
    height: 39px;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 5px;
    display: none;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 999
}

.strip {
    height: 0;
    border-bottom: solid 25px #529ac3
}

.cursor {
    cursor: pointer
}

.modal-header-danger, .modal-header-success, .modal-header-warning {
    color: #fff;
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    background-color: #5cb85c
}

.modal-header-danger, .modal-header-warning {
    background-color: #f0ad4e
}

.modal-header-danger {
    color: #fff !important;
    background-color: #d9544f !important
}

.modal-header-info, .modal-header-primary {
    color: #fff;
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    background-color: #5bc0de
}

.modal-header-primary {
    color: #fff !important;
    background-color: #1ab394
}

.panel-heading {
    cursor: pointer
}

.accordion-toggle:after {
    font-family: 'FontAwesome';
    content: "\f077";
    float: right;
    color: inherit
}

.panel-heading.collapsed .accordion-toggle:after {
    content: "\f078"
}

.modal {
    overflow: auto;
    border: 0 !important;
    border-radius: 10px
}

.bt-column-fix-wrap td {
    max-width: 150px;
    word-wrap: break-word !important
}

.no-radius {
    border-radius: 0;
    -webkit-appearance: none
}

.text-center, table.product-grid-table .form-control.input-sm, table.product-grid-table td, table.product-grid-table th {
    text-align: center
}

.Cheque {
    background-image: url(../../Images/resources/cheque-background6.jpg);
    -webkit-box-shadow: 10px 10px 14px -9px rgba(0,0,0,.75);
    -moz-box-shadow: 10px 10px 14px -9px rgba(0,0,0,.75);
    box-shadow: 10px 10px 14px -9px rgba(0,0,0,.75);
    margin: 15px
}

.cheque-header-left {
    width: 65%
}

.payee-address {
    height: 85px !important;
    width: 300px;
    border-bottom: 1px solid #000 !important;
    overflow: hidden
}

.cheque-text-field {
    width: 190px
}

.cheque-header-right {
    text-align: right;
    width: 35%
}

.cheque-header-right-label {
    padding-right: 10px;
    padding-top: 2px;
    text-align: left
}

.cheque-body {
    clear: both
}

.transparentInput {
    outline: 0;
    background-color: transparent !important;
    resize: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 0 !important;
    border-radius: 0 !important
}

.cheque-payee {
    width: 100%
}

.underline {
    border-bottom: 1px solid #000 !important
}

.cheque-outer {
    padding: 35px !important;
    outline: 3px double #699;
    outline-offset: -9px
}

.cheque-footer {
    padding-top: 10px
}

.cheque-amount-text {
    width: 100%
}

.cheque-memo {
    width: 500px
}

.chkStyle[type=checkbox]:checked, .chkStyle[type=checkbox]:not(:checked), .chkStyle[type=radio]:checked, .chkStyle[type=radio]:not(:checked) {
    display: none;
}

    .chkStyle[type=checkbox]:checked + label, .chkStyle[type=checkbox]:not(:checked) + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer
    }

        .chkStyle[type=checkbox]:checked + label:before, .chkStyle[type=checkbox]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 15px;
            height: 15px;
            border: 1px solid #aaa;
            background: #fff;
            border-radius: 1px
        }

        .chkStyle[type=checkbox]:checked + label:after, .chkStyle[type=checkbox]:not(:checked) + label:after {
            content: '✔';
            position: absolute;
            top: 3px;
            left: 3px;
            font-size: 12px;
            line-height: .8;
            font-weight: bolder;
            color: #1ab394
        }

        .chkStyle[type=checkbox]:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0)
        }

        .chkStyle[type=checkbox]:checked + label:after {
            opacity: 1;
            transform: scale(1)
        }

.chkStyle[type=checkbox]:disabled:checked + label:before, .chkStyle[type=checkbox]:disabled:not(:checked) + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd
}

.chkStyle[type=checkbox]:disabled:checked + label:after {
    color: #999
}

.chkStyle[type=checkbox]:disabled + label {
    color: #aaa
}

.chkStyle[type=checkbox]:checked:focus + label:before, .chkStyle[type=checkbox]:not(:checked):focus + label:before {
    border: 1px dotted #1ab394
}

.chkStyle[type=radio]:checked + label, .chkStyle[type=radio]:not(:checked) + label {
    position: relative;
    padding-left: 19px;
    cursor: pointer
}

    .chkStyle[type=radio]:checked + label:before, .chkStyle[type=radio]:not(:checked) + label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #aaa;
        background: #fff;
        border-radius: 50%
    }

    .chkStyle[type=radio]:checked + label:after, .chkStyle[type=radio]:not(:checked) + label:after {
        content: '✔';
        position: absolute;
        top: 3px;
        left: 3px;
        font-size: 11px;
        line-height: .8;
        color: #18a689;
        font-weight: 900;
    }

    .chkStyle[type=radio]:not(:checked) + label:after {
        opacity: 0;
        transform: scale(0)
    }

    .chkStyle[type=radio]:checked + label:after {
        opacity: 1;
        transform: scale(1)
    }

.chkStyle[type=radio]:disabled:checked + label:before, .chkStyle[type=radio]:disabled:not(:checked) + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd
}

.chkStyle[type=radio]:disabled:checked + label:after {
    color: #999
}

.chkStyle[type=radio]:disabled + label {
    color: #aaa
}

.chkStyle[type=radio]:checked:focus + label:before, .chkStyle[type=radio]:not(:checked):focus + label:before {
    border: 1px solid #18a689
}

.spinner-panel:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    border-radius: 50%;
    border: 7px solid #ccc;
    border-top-color: #1ab394;
    animation: spinner-panel 1s linear infinite
}

.spinner {
    min-width: 40px;
    min-height: 40px
}

    .spinner:before {
        content: 'Loading…';
        position: absolute;
        top: 50%;
        left: 45%;
        width: 50px;
        height: 50px;
        margin-top: -10px;
        margin-left: -10px
    }

.centered {
    position: fixed;
    z-index: 2000;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,.95)
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear
}

.read-notification {
    background-color: #f5f5f5
}

.unread-notification {
    background-color: #fff
}

.form-control-sm, .form-control-xs {
    font-size: 12px;
    height: 25px;
    padding-left: 8px;
    padding-top: 1px;
    padding-bottom: 1px;
    display: block !important;
    margin-left: 10px !important
}

.form-control-xs {
    font-size: 10px;
    height: 18px;
    padding-top: .5px;
    padding-bottom: .5px
}

.btn-control-sm {
    padding: 1px 6px;
    font-size: 10px
}

.dashboard-panel {
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 7px 7px 0 0;
    -webkit-box-shadow: 0 0 7px 0 rgba(74,73,74,.17) !important;
    -moz-box-shadow: 0 0 7px 0 rgba(74,73,74,.17) !important;
    box-shadow: 0 0 7px 0 rgba(74,73,74,.17) !important
}

    .dashboard-panel > .dashboard-panel-header {
        font-family: calibri;
        font-weight: 500;
        padding-top: 7px;
        padding-bottom: 7px;
        color: gray;
        border-bottom: 0 !important
    }

    .dashboard-panel * .box-body, .dashboard-panel > .box-body {
        overflow: auto;
        max-height: 300px
    }

.info-box {
    box-shadow: none !important
}

.bk-ol:before {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000
}

.highlight-row, .highlight-row:hover {
    background-color: rgba(26,179,148,.25) !Important;
    font-weight: 500
}

.highlight-cell, .highlight-cell:hover {
    border-right: solid 3px #1ab394 !important
}

.eml-wrapper {
    display: table
}

.eml-cell-input, .eml-cell-label {
    display: table-cell;
    padding-bottom: 6px
}

.eml-cell-input {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 5px
}

.eml-row {
    display: table-row
}

.round-border {
    border-radius: 4px !important
}

.header-default-gradient {
    background: #fcfcfc;
    background: -moz-linear-gradient(top,#fcfcfc 0%,#fafafb 52%,#f6f6f7 81%,#f1f1f2 97%,#ececec 100%);
    background: -webkit-linear-gradient(top,#fcfcfc 0%,#fafafb 52%,#f6f6f7 81%,#f1f1f2 97%,#ececec 100%);
    background: linear-gradient(to bottom,#fcfcfc 0%,#fafafb 52%,#f6f6f7 81%,#f1f1f2 97%,#ececec 100%);
    color: #000
}

.dims-avatar {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: text-bottom
}

.dims-avatar-inner {
    display: table-cell;
    vertical-align: middle
}

.dims-avatar-medium, .dims-avatar-medium .dims-avatar-inner {
    height: 32px;
    width: 32px
}

.dims-avatar-small, .dims-avatar-small .dims-avatar-inner {
    height: 20px;
    width: 20px
}

.dims-avatar-small-round, .dims-avatar-small-round .dims-avatar-inner {
    height: 25px;
    width: 25px;
    border-radius: 50%
}

div#summernote {
    width: 81%;
    margin: auto;
    text-align: left
}

.modal-dialog {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    margin: 0 !important
}

.notif-centr-img-container {
    width: 45px;
    height: 45px;
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

.nav-tabs > li:first-child {
    margin-left: 10px
}

.tabs-left > li:first-child {
    margin-left: 0 !important
}

.chart-placeholder {
    min-height: 400px;
    background-color: #fff;
    margin-bottom: 20px
}

.entity-number-sm {
    font-size: 14px;
    font-weight: 500
}

.entity-number-md {
    font-size: 16px;
    font-weight: 500
}

.label-md {
    font-size: 13px
}

.app-color-primary {
    color: #999c9e
}

.box-body:after, .box-body:before, .box-footer:after, .box-footer:before, .box-header:after, .box-header:before {
    content: " ";
    display: table
}

.box-body:after, .box-footer:after, .box-header:after {
    clear: both
}

.box-header {
    display: block;
    padding: 10px;
    position: relative
}

    .box-header.with-border {
        border-bottom: 1px solid #f4f4f4
    }

.collapsed-box .box-header.with-border {
    border-bottom: none
}

.box-header .box-title, .box-header > .fa, .box-header > .glyphicon, .box-header > .ion {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1
}

.box-header > .fa, .box-header > .glyphicon, .box-header > .ion {
    margin-right: 5px
}

.box-header > .box-tools {
    position: absolute;
    right: 10px;
    top: 5px
}

    .box-header > .box-tools [data-toggle=tooltip] {
        position: relative
    }

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px
}

.no-header .box-body {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px
}

.box-body > .table {
    margin-bottom: 0
}

.box-body .fc {
    margin-top: 5px
}

.box-body .full-width-chart {
    margin: -19px
}

.box-body.no-padding .full-width-chart {
    margin: -9px
}

.box-body .box-pane, .box-body .box-pane-right, .box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 3px
}

.box-body .box-pane-right, .box-footer {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0
}

.box-footer {
    border-bottom-left-radius: 3px;
    /* border-top: 1px solid #e5e5e5; */
    padding: 10px;
}

.modal-header-custom {
    padding: 7px !important;
    min-height: 40px !important;
    text-align: left !important
}

.modal-dialog-custom {
    margin: 0 !important
}

.table.no-border, .table.no-border td, .table.no-border th {
    border: 0
}

.summary-div {
    margin-top: 20px;
    padding-left: 0;
    padding-right: 0
}

.search-centre-filter-text {
    padding-bottom: 13px;
    overflow: hidden;
}

    .search-centre-filter-text:empty {
        display: none
    }

.tags-close-sign {
    float: none;
    vertical-align: middle;
    margin-left: 4px
}

.tags-label {
    display: inline-block;
    margin-bottom: 5px;
    text-align: unset;
    max-width: 100%;
}

@media screen and (max-width:764px) {
    .bs-bars .btn, .bs-bars .btn-group, .tags-label {
        width: 100% !important
    }
	.bs-bars [data-original-title]{
		width:unset !important;
	}

    .navbar-custom-menu>.globalSearchElement  {
        position: fixed;
        left: 10px;
        right: 10px !important;
        top: 63px;
        width: auto !important;
    }
}

.bootstrap-table .chkStyleLbl {
    display: inline
}

.no-top-padding {
    padding-top: 0 !important
}

.modal-header {
    padding: 13px !important;
    min-height: 25px !important;
    color: #888;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

    .modal-header .modal-title {
        font-size: 15px !important;
        text-indent: 5px
    }

.note-editor.note-frame {
    border: 0 !important
}

.modal .box-footer, .modal .modal-footer {
    background-color: #f3f3f48f;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.no-vertical-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.feed-element:hover .notify-btn, .feed-element:hover .notify-btn-popup {
    visibility: visible !important
}

.feed-element-popup {
    padding-left: 2px;
    padding-right: 2px
}

.top-bar-fixed {
    margin-bottom: 0;
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 1100
}

.top-bar-menu-fixed {
    position: fixed;
    right: 0;
    z-index: 1101
}

.page-header-fixed {
    position: fixed;
    width: 100%;
    z-index: 1099;
    top: 60px;
    min-width: 350px !important;
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 2rem;
}

@media (min-width:768px) {
    .page-header-menu-fixed {
        position: fixed;
        right: 0;
        margin-right: 20px
    }
}

.page-header-fixed-content {
    margin-top: 145px
}

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

.swal2-modal {
    overflow: visible !important;
    word-break: break-word;
}

.highlight {
    background-color: #ff0
}

.timeline-item, .timeline-item-activity {
    padding: 3em 2em 2em;
    position: relative;
    border-left: 2px solid #1ab394;
    margin-left: 15px
}

.timeline-item-activity {
    margin-left: 25px
}

.timeline-item::after {
    width: 13px;
    height: 13px;
    display: block;
    top: 1em;
    position: absolute;
    left: -7px;
    border-radius: 10px;
    content: '';
    border: 2px solid #1ab394;
    background: #1ab394
}

.timeline-activity-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    position: absolute;
    color: #666;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #1ab394;
    top: 14px;
    left: -14px
}

    .timeline-activity-icon::before {
        font-family: 'FontAwesome';
        content: attr(data-icon);
        font-style: normal;
        position: absolute;
        top: -2px;
        left: 7px
    }

.timeline-item-activity::before, .timeline-item::before {
    content: attr(data-date);
    left: 2em;
    top: 1em;
    display: block;
    font-family: 'Roboto',sans-serif;
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 11px;
    color: gray
}

.timeline-item-activity::before {
    margin-bottom: 4px
}

.comment-item {
    padding: 3em 2em 2em;
    position: relative;
    border-left: 2px solid #1ab394;
    margin-left: 15px
}

.loading-spinner-main:before, .search-spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 59%;
    left: 102%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #333;
    animation: spinner .6s linear infinite
}

.loading-spinner-main:before {
    left: 20px;
    width: 15px;
    height: 15px;
    margin-top: -9px;
    border: 2px solid #bab7b7;
    border-top-color: #303f4f;
    animation: spinner .9s linear infinite
}

.search-on-hover {
    background-color: #f9f9f9 !important
}

.para-top {
    margin: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.search-header {
    color: #f5f5f5;
    background: #676a6c;
    padding: 8px !important
}

.activity-menu {
    right: 0;
    position: fixed;
    background-color: #fff;
    z-index: 1115;
    top: 60px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    width: 400px
}

.chkStyle-big[type=checkbox]:checked, .chkStyle-big[type=checkbox]:not(:checked) {
    position: absolute;
    left: -9999px
}

    .chkStyle-big[type=checkbox]:checked + label, .chkStyle-big[type=checkbox]:not(:checked) + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer
    }

        .chkStyle-big[type=checkbox]:checked + label:before, .chkStyle-big[type=checkbox]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 25px;
            height: 25px;
            border: 1px solid #aaa;
            background: #fff
        }

        .chkStyle-big[type=checkbox]:checked + label:after, .chkStyle-big[type=checkbox]:not(:checked) + label:after {
            content: '✔';
            position: absolute;
            top: 2px;
            left: 3px;
            font-size: 30px;
            line-height: .8;
            font-weight: bolder;
            color: #1ab394
        }

        .chkStyle-big[type=checkbox]:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0)
        }

        .chkStyle-big[type=checkbox]:checked + label:after {
            opacity: 1;
            transform: scale(1)
        }

.chkStyle-big[type=checkbox]:disabled:checked + label:before, .chkStyle-big[type=checkbox]:disabled:not(:checked) + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd
}

.chkStyle-big[type=checkbox]:disabled:checked + label:after {
    color: #999
}

.chkStyle-big[type=checkbox]:disabled + label {
    color: #aaa
}

.chkStyle-big[type=checkbox]:checked:focus + label:before, .chkStyle-big[type=checkbox]:not(:checked):focus + label:before {
    border: 1px dotted #00f
}

.opt1Class, .opt2Class, .opt3Class {
    background-color: #d4879c;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    margin-bottom: 2px
}

.opt1Class, .opt2Class {
    background-color: #1ab394
}

.opt1Class {
    background-color: #e8c395
}

.container-product-img {
    position: relative;
    margin-top: 50px
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 0 0;
    transition: background .5s ease
}

.container-product-img:hover .overlay {
    display: block;
    background: rgba(0,0,0,.3)
}

.product-img {
    display: inline-block;
    height: 100px;
    width: 100px;
    overflow: hidden
}

.product-img-controls {
    position: absolute;
    height: 100%;
    opacity: 0;
    transition: opacity .35s ease;
    margin-top: 2px;
    right: 0;
    font-size: 16px;
}

.container-product-img:hover .product-img-controls {
    opacity: 1
}

.photo-overlay-actions {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%
}

#sortable > div {
    margin: 10px;
    float: left
}

#sortable {
    width: 100%;
    height: 35px;
    padding: .5em
}

.modal-maximized {
    display: block;
    border-radius: 0;
    margin: 4px !important;
    top: 0 !important;
    left: 0 !important;
    width: calc(100% - 19px)
}

    .modal-maximized .modal-dialog {
        width: auto
    }

    .modal-maximized .modal-header {
        cursor: default !important;
        border-radius: 0 !important
    }

.maximize-toggle {
    float: right;
    font-size: 14px;
    font-weight: 700;
    line-height: .75;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    border: 0;
    background: 0 0
}

button.maximize-toggle:focus {
    outline: 0
}

.greyedOut {
    text-decoration: line-through;
    color: #a0a0a0
}

.bootstrap-table .btn-group.bootstrap-select {
    width: auto !important;
    min-width: inherit !important;
    max-width: unset !important;
}

.callout {
    margin-bottom: 10px;
    font-size: 16px;
    padding: 15px 30px 15px 15px;
    border: 10px;
    background: #fff
}

    .callout.callout-primary {
        border-left: solid 4px #1ab394 !important
    }

    .callout.callout-warning {
        border-left: solid 4px #f8ac59 !important
    }

    .callout.callout-success {
        border-left: solid 4px #1c84c6 !important
    }

    .callout.callout-info {
        border-left: solid 4px #23c6c8 !important
    }

    .callout.callout-danger {
        border-left: solid 4px #ed5565 !important;
    }

hr.mini {
    margin-top: 4px;
    margin-bottom: 12px
}

[disabled]:not(button):not(span), input:not([type=button]).disabled {
    background-color: #fff !important;
    background-image: url(/Images/resources/lock_icon.png);
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: right 5px center;
    color: #cacaca;
    pointer-events: none !important
}

.buttonInsideInputWrapper {
    position: relative
}

.input-rd {
    font-size: 16px;
    border-radius: 15px
}

.buttonInsideInputWrapper .buttonInside {
    position: absolute;
    right: 7px;
    z-index: 999;
    top: 4px;
    border: 0;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    outline: 0;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 2px
}

.label-status-colored {
    color: #fff;
    font-size: 12.5px;
    border-radius: 5px;
    opacity: .65;
    text-shadow: 1px 1px 2.5px rgb(58 57 57 / 70%);
}

.editable-address input {
    width: 100%;
    border-radius: 3px;
    text-indent: 0;
    border: solid 1px #ddd
}

.input-small {
    background-color: #fff;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 2px 12px;
    transition: border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;
    font-size: 14px
}



.truncate, kbd {
    white-space: nowrap
}

kbd {
    padding: 2px 6px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 2px 0 rgba(0,0,0,.2),0 0 0 1px #fff inset;
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.2),0 0 0 1px #fff inset;
    box-shadow: 0 2px 0 rgba(0,0,0,.2),0 0 0 1px #fff inset;
    border-color: #ccc #ccc #fff;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    color: #7b7b7b;
    font-family: 'Helvetica Neue',Helvetica,Arial,Sans-serif;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 5px;
    background: #eee;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis
}

iframe.note-video-clip {
    max-width: 100%;
    max-height: 100%;
    min-width: 640px !important
}

@media (min-width:768px) {
    .bootstrap-table .form-inline .form-control {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        margin-bottom: 5px;
    }
}

.modal.left .modal-dialog, .modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 50%;
    height: 100%;
    -webkit-transform: translate3d(0%,0,0);
    -ms-transform: translate3d(0%,0,0);
    -o-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);
    bottom: 0 !important
}

@media screen and (max-width: 1500px) and (min-width: 800px) {
    .modal.left .modal-dialog, .modal.right .modal-dialog {
        width: 65%;
    }
}
@media screen and (max-width: 900px){
.modal.left .modal-dialog, .modal.right .modal-dialog {
    width: 100% !important;
}}

.modal.left .modal-content, .modal.right .modal-content {
    height: 100%;
    overflow-y: auto
}

.modal.left .modal-body, .modal.right .modal-body {
    padding: 15px 15px 80px
}

.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity .3s linear,left .3s ease-out;
    -moz-transition: opacity .3s linear,left .3s ease-out;
    -o-transition: opacity .3s linear,left .3s ease-out;
    transition: opacity .3s linear,left .3s ease-out
}

.modal.left.fade.in .modal-dialog {
    left: 0
}

.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity .3s linear,right .3s ease-out;
    -moz-transition: opacity .3s linear,right .3s ease-out;
    -o-transition: opacity .3s linear,right .3s ease-out;
    transition: opacity .3s linear,right .3s ease-out
}

.modal.right.fade.in .modal-dialog {
    right: 0;
    background-color: #fff;
    top: 0;
    border-left: 1px solid #999 !important;
    border-left: 1px solid rgba(0,0,0,.2) !important;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.4) !important;
    overflow: auto
}

.modal-header {
    border-bottom-color: #eee
}

.modal.right .box-footer, .modal.right .modal-header {
    border-radius: 0 !important
}

.bs-searchbox input.form-control {
    max-width: 100% !important
}

.menu-no-hide a {
    padding: 3px 4px 4px 27px !important
}

.selectize-dropdown, .selectize-dropdown.form-control{
    max-height: 400px !important;
    min-width: 300px;
}

.selectize-dropdown-content{
    max-height: 350px !important;
}

span.user-mention-tag {
    background-color: #faf4f4;
    color: #3e80ba;
    padding: 3px;
    margin-right: 2px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

[data-variantdataintableform] .editable-input {
    width: 100%;
}

.chart-placeholder button.btn.dropdown-toggle {
    font-size: 12px;
    padding: 3.6px;
    padding-right: 25px;
    width: 95%;
}

table.prod-matrix-grid td,
table.prod-matrix-grid th:not(:first-child) {
    padding: 0 !important;
    height: 28px !important;
    text-align: center;
    line-height: 29px;
}

    table.prod-matrix-grid td:first-child {
        text-align: left !important;
        padding-left: 3px !important;
    }

table.prod-matrix-grid th:first-child {
    text-align: left !important;
    padding-left: 0px !important;
}

table.prod-matrix-grid input {
    text-align: center;
}
.product-box-presentation {
    position: relative;
    display: inline-block;
    margin: 15px;
    margin-bottom: 0px;
    width: 280px;
}
.select-align-right .dropdown-menu.open {
    right: 0 !important;
    left: unset;
}

@media screen and (max-width: 980px) {
    .bs-bars.pull-left {
    width: 100% !important;
    margin:0 !important;
    padding:0;
}

.bs-bars.pull-left .form-group {
    margin: 1px !important;
}
.bs-bars.pull-left label {display: none;}

.bs-bars.pull-left .bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*=col-] {
  display: block;
}
.open > .dropdown-menu {
    width: 100% !important;
}

    .tags-label {
    display: inline-block;
    width: auto !important;
}
}.table-cell-qty-input {
 height: 32px !important;
 vertical-align: middle !important;
 font-size: 13px;
 font-weight: 400;
 border: solid 1px #eee;
 margin-bottom: 3px;
 margin-top: 3px;
}
.product-grid-data-section {
    border-top: solid 1px #eee;
    background: #f3f3f3;
    width: 100%;
    height: 16px;
    margin-bottom: 3px;
}
.product-grid-table td {
    padding: 0 !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}.product-grid-table thead {
    background-color: #f3f3f3;
    font-size: 14px;
}

 .loader-dots-wrapper {
    width: 90px;
    height: 90px;
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 2;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 2rem rgba(0,0,0,.1);
    margin-left: -45px;
}.product-desc {
    padding: 3px;
    margin: auto;
    max-width: 100% !important;
}.table-cell-qty-input:focus {
    outline-color: #6cd9c3 !important;
    outline-width: 1px;
    outline-style: solid;
}.bootstrap-select span.media-left {
    height: 40px !important;
    width: 40px !important;
}


.bootstrap-select span.media-body {
    display: inline-block;
}.btn-outline[disabled] {
    color: #fff;
}.chart-placeholder-title {
      width: 100%;
    text-align: center;
    display: block;
    font-size: 18px;
    padding-top: 6px;
    padding-bottom: 2px;
}

 .editable-input select.form-control.input-sm {
    max-width: 200px;
}
.bottom-top-margin {
    margin: 5px 0px 5px 0;
}


.fixed-table-toolbar {
    background: #fff;
}

.instruction-label {
    max-width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: underline;
    display: inline-block;

}

.nav-tabs>li.active >a>span.label-danger 
{
    -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.42);-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.42);box-shadow: 1px 2px 2px 0px rgba(0,0,0,0.42);
}  
.ui-selectable-helper {
  position: absolute; 
  z-index: 100; 
  border: 1px dotted black; 
}.table-trans-dropdowns button.btn.dropdown-toggle.btn-default {
    border: 0;
    background: transparent !important;
    background-color: transparent !important;
}

.table-trans-dropdowns .btn-group.bootstrap-select.form-control {
    background: transparent;
    border-bottom: 1px dashed #23c6c8;
}
.table-trans-dropdowns textarea, .table-trans-dropdowns input {
    background: transparent;
    border: 0;
    border-bottom: 1px dashed #23c6c8;
}

.checkcheckToggleWrapper {
  margin: auto;
  width: 55px;
}
.checkToggleWrapper input.mobileToggle {
  opacity: 0;
  position: absolute;
}
.checkToggleWrapper input.mobileToggle + label {
  position: relative;
  display: inline-block;
  user-select: none;
  -moz-transition: 0.4s ease;
  -o-transition: 0.4s ease;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  -webkit-tap-highlight-color: transparent;
  height: 20px;
  width: 45px;
  border: 1px solid #e4e4e4;
  border-radius: 60px;
  cursor: pointer !important;
}
.checkToggleWrapper input.mobileToggle + label:before {
  content: "";
  position: absolute;
  display: block;
  -moz-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  -o-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  height: 20px;
  width: 45px;
  top: -1px;
  left: -1px;
  border-radius: 30px;
}
.checkToggleWrapper input.mobileToggle + label:after {
  content: "";
  position: absolute;
  display: block;
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 2px 0px 0 hsla(0, 0%, 0%, 0.04), 0 2px 9px hsla(0, 0%, 0%, 0.13), 0 2px 3px hsla(0, 0%, 0%, 0.05);
  -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  background: whitesmoke;
  height: 22px;
  width: 22px;
  top: -2px;
  left: -1px;
  border-radius: 60px;
}
.checkToggleWrapper input.mobileToggle:checked + label:before {
  background: #1ab394;
  -moz-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
  -o-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
  -webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
}
.checkToggleWrapper input.mobileToggle:checked + label:after {
  left: 25px;
}
select#dd_multiCompanyList {
    padding:5px;
    border: 0;
    -webkit-appearance: none;
    cursor:pointer
}
select#dd_multiCompanyList:hover {
    text-decoration:underline ;
}.btn-group.bootstrap-select.form-control.multi-sort-name {
    width: 100% !important;
}

.btn-group.bootstrap-select.form-control.multi-sort-order {
    width: 100% !important;
}
.jobSchedActionDiv {
    display: none;
    height:2px;
}

table tr:hover .jobSchedActionDiv {
    display: block;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}


.editable-input .btn-group.bootstrap-select {
    width: 100% !important;
}
.bootstrap-table button.btn {
    margin-left: 0px !important;
    margin-bottom: 5px;
    margin-top: -3px;
}
.payment-box-wrapper {
    margin: 30px;
    background: white;
    padding: 30px;
    font-size: 18px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);

}

.no-stock-input {
    background: #f3f3f3;
    color: #b9b9b9;
}
.sticky-content
{
background: white;
    position: sticky;
    top: 0px;
    z-index: 10;
    padding-top: 5px;
    
}
#tbl_productVariantTable tbody td:first-child, #tbl_productVariantTable th:first-child {
    position: sticky;
    left: 0;
    z-index: 9;
}
#updates-feed .media-body a {
    padding: unset;
    font-size: 13px;
    color: #888;
    text-decoration: underline;
}
.fm-grid-column {
    max-width: 600px;
}
.uom-z-index {
    z-index: 0 !important;
}

.no-border {
   border: 0 !important;
}

button.btn.dropdown-toggle {
    /* margin-left: -8px !important; */
}
@media (max-width: 767px) {
.dropdown-submenu .dropdown-menu {
    position: relative !important;
    top: 0px !important;
    border-radius: 0 !important;
    width: 100%;
    box-shadow: none;
}.menu-header-text{
display:none;
	
}
	.dropdown-menu > li > a {
    max-width: 100%;
}
}
.modal-scrollable {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.datepicker  th {
    font-weight: 500;
}
.bs-actionsbox .btn-group {
    display: flex;
}

.b2b-img-thumbnail {
    height: auto !important;
    width: auto !important;
    max-width: 450px !important;
    max-height: 350px !important;
}
.editable-input .input-large {
max-width:unset !important;
}

.minimize-task {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    border: 0;
}/* Global Search Styles */
.custom-global-search-container {
    position: relative;
}

.custom-global-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    align-items: baseline;
    position: relative;
    flex-wrap: nowrap;
}

#global-search-input {
    flex-grow: 1;
    border: none;
    padding: 10px;
    font-size: 16px;
    margin-top: 5px;
    margin-left: 5px;
    outline: none;
    background: transparent;
    padding-left: 0px;
}

.custom-global-selected-modules {
    display: flex;
    gap: 5px;
    background: #f3f3f4;
}

.custom-global-selected-modules:has(.custom-global-module-tag) {
		padding: 10px;
		padding-right: 0;
}

.custom-global-selected-modules .custom-global-module-tag {
    background: #e0e0e0;
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
}
.module-tag {
 background: #e0e0e0;
    padding: 5px 10px;
    border-radius: 15px;
    align-items: center;
    text-wrap: nowrap;
}

.custom-global-selected-modules .custom-global-module-tag .custom-global-remove-module {
    margin-left: 5px;
    cursor: pointer;
    color: red;
    font-weight: bold;
}

.custom-global-dropdown {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    display: none;
    max-height: 300px;
    overflow: auto;
    max-width: 300px;
    max-height: 400px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    border-radius: 5px;
    z-index: 1;
}

.custom-global-dropdown.custom-no-items {
    border: none;
}

.custom-global-dropdown div {
    padding: 10px;
    cursor: pointer;
}

.custom-global-dropdown div:hover,
.custom-active {
    background: #f0f0f0;
}

.custom-fade-label {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #888;
    opacity: 0;
    transition: opacity 0.3s;
}

.custom-show-label .custom-fade-label {
    opacity: 1;
}.globalSearchElement {
    max-height: 400px;
    overflow-y: auto;
    width: 105%;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    display: none; /* Initially hidden */
    background: #fff;
    border-radius: 5px;
}
    .globalSearchElement div {
        cursor: pointer;
        /*padding: 5px !important;*/
        color: #000;
    }

.globalSearchElement :focus {
    background-color: #f0f0f0 !important;
    outline:none !important;
}

.globalSearchElement::-webkit-scrollbar {
    width: 8px;
}

.globalSearchElement::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.globalSearchElement::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}
.placeholder-global-search-div {
    font-size: 14px;
    padding: 15px;
}
@media only screen and (max-width: 768px) {
  .globalSearchElement {
    position:relative;
    width:calc(100vw - 100px) !important;
  }
}


.customInfo {
    cursor: pointer;
    font-size: 12px;
    line-height: 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
    .customInfo span {
        width: 100%;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #337ab7;
    }

.dropdown-submenu {
    position: relative;
}

.dropdown-menu.dropdown-menu-left.left-align {
    position: absolute;
    right: 100%;
    left: auto;
    top: 0;
}

.menu-header-text {
    border-bottom: solid 1px #ddd;
    padding: 5px 10px;
    background: #f7f7f7;
    font-size: 14px;
}
.menu-header-text i {
    display: none;
}
.dropdown-menu.left-align {
    left: auto;
    right: 100%;
}
.menu-header-text i {
    display: none;
}
.dropdown-menu.left-align {
    left: auto;
    right: 100%;
}
.form-customBtn {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .form-customBtn label,
    .form-customBtn .btn,
    .form-customBtn .form-control {
        margin: 0 !important;
    }

.CustomerTaxable-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.tooltip {
    z-index: 1100;
}

/*Activity tracking CSS*/
.activityTrackingChildren {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    letter-spacing: 0.5px;
    max-height: 90vh;
    overflow-y: auto;
}

.activityTrackingDiv p {
    padding: 5px 10px;
    background: #f1f1f1;
    margin-bottom: 10px !important
}

#activityJsonDataTree b, #activityJsonDataTree strong {
    font-weight: 500 !important;
    color: #292929;
}

.activityTrackingChildren::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
}

.activityTrackingChildren::-webkit-scrollbar-thumb {
    background-color: #8f8f8f;
    border-radius: 20px;
}

.activityTrackingDiv p, .activityTrackingChildren div {
    width: 100%;
}
.update-form__row {
    display: block;
    width: 100%;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
}

.update-form__col {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.update-form__col label {
    margin-bottom: 0;
    font-size: 16px;
}

.update-form__warning {
font-size: 13px;
line-height: 18px;
background: #f7f7f7;
padding: 10px 10px;
margin-top: 5px;
}

.update-form__warning i {
    color: #f1a552;
    font-size: 16px;
}
.searchItemInactive {
    /*background: #fee0e0;*/
    border-radius: 8px;
    color: #000000;
}
.globalSearchElement .cursor:has(.inactive) {
    padding: 10px;
    background: #fff4f3 !important;
    border-top: 1px solid #e1443829;
    border-bottom: 1px solid #e1443829;
}

.inactive {
    font-size: 12px;
    margin-right: 10px;
    border: 1px solid #e14438;
    color: #e14438;
    background: #fff;
    border-radius: 100px;
    margin-bottom: 0;
}

#itemQuickAdd_modal .form-group {
	max-width: 164px;
}

#itemQuickAdd_modal .form-group input {
	width: 100%;
}

.batchUpdateFieldValueDivStyle {
    max-width: 282px;
}

.customFieldContainer {
    column-count: 4;
    column-gap: 20px;
    padding: 0 20px;
}

.customFieldRowWrapper {
    width: 100%;
    display: block;
    padding-bottom: 5px;
    margin-bottom: 5px;
    float: left;
    border-bottom: 1px solid #eee;
}

    .customFieldRowWrapper:last-child,
    .customFieldRowWrapper:only-child {
        border-bottom: none;
    }

.customFieldContainer .form-group {
    break-inside: avoid;
    margin-bottom: 10px;
}

    .customFieldContainer .form-group textarea {
        height: 101px !important;
        resize: none;
    }

.customFldShowMore.customFldShowLess:hover {
    text-decoration: underline;
    cursor: pointer;
}

.tooltip-inner {
    max-width: 280px !important;
}

div#divProductCustomizationPopUpModal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
    row-gap: 10px;
    padding: 10px;
    position: relative;
    width: 100%;
}

#divProductCustomizationPopUpModal div label {
    font-weight: 600 !important;
    width: 45%;
}

#divProductCustomizationPopUpModal div span {
    word-break: break-all;
    width: 50%;
}

#divProductCustomizationPopUpModal div:last-child {
    border-bottom: 0;
}

#divProductCustomizationPopUpModal div:nth-last-child(2) {
    border: 0;
}

#divProductCustomizationPopUpModal .product-img-container img {
    width: 100%;
    height: auto;
    display: block;
}

#divProductCustomizationPopUpModal > div {
    width: 48%;
    display: flex;
}

#customizationImageSlider .carousel-inner {
    height: auto !important;
    background: #f1f1f1;
    border-radius: 6px;
    height: 350px !important;
}

#imageCarousel .item {
    margin: auto;
    height: 100%;
    text-align: center;
}

    #imageCarousel .item img {
        max-height: 100%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.hover-label {
    display: none;
    position: absolute;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    z-index: 5;
    word-wrap: break-word;
    width: 100%;
    text-align: center;
}

.item:hover .hover-label {
    display: block;
}