@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);
html, body {height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #666666; text-rendering: optimizeLegibility; /*background: #f9f9f9;*/}
body {padding-top: 45px;}
h1, h2, h3, h4, h5, h6, p {margin-top: 0;}
.page-header {vertical-align: middle; margin: 15px 0; padding: 0; border-bottom: none;}
.page-header h1 {font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 30px; color: #848484; display: inline-block; margin-bottom: 15px;}
.breadcrumb {display: inline-block; background: none; margin: 0; padding: 0 10px;}
.breadcrumb li a {color: #999999; font-size: 11px; padding: 0px; margin: 0px;}
.breadcrumb li:last-child a {color: #1e91cf;}
.breadcrumb li a:hover {text-decoration: none;}
.breadcrumb li + li:before {content: "/"; font-family: FontAwesome; color: #BBBBBB; padding: 0 5px;}
.mode .active {background:#eee; padding:3px 5px; border-radius:3px;}
a:hover, a:focus {text-decoration: none;}
/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {display: inline;}
#container {min-height: 100%; width: 100%; position: relative; overflow: hidden;}
.container-fluid {padding-left: 20px; padding-right: 20px;}
.clear {clear: both;}

#header {min-height: 0px; background: #FFFFFF; border-bottom: 1px solid #E5E5E5; margin: 0; padding: 0; box-shadow: 0 0 20px rgba(0,0,0,0.4); position: fixed; left: 0; right: 0; top: 0;}
#header .nav > li {float: left;}
#header .nav > li li {min-width: 200px;}
#header .navbar-header {min-height: 0px; padding: 0;}

.page-catalog-category .table-responsive,
	.page-catalog-product .table-responsive,
	.page-sale-order .table-responsive {max-height:calc(100vh - 340px);}

/* Mobile */
@media (max-width: 767px) {
	#header .navbar-header {margin-right: 0px; margin-left: 0px; float: left;}
}

#header #button-menu + .navbar-brand {padding: 7px 10px; margin-right: 10px; height: auto;}
#header .nav > li > a {padding: 3px 16px; line-height: 38px; cursor: pointer; color: #6D6D6D; border-left: 1px solid #E1E1E1;}
#header .nav > li > a > .label {text-shadow: none; padding: 1px 4px; position: absolute; top: 8px; left: 6px;}
#button-menu {padding: 10px 17px 9px 17px; line-height: 25px; float: left; display: inline-block; cursor: pointer; color: #6D6D6D; border-right: 1px solid #E1E1E1;}
#profile {display: none;}
#column-left.active #profile {display: block; padding: 10px 15px 10px 15px; overflow: auto; border-bottom: 1px solid #585858;}
#profile div {float: left; color: #C4C4C4;}
#profile div i {font-size: 42px; color: #2ca5d3;}
#profile div + div {margin-left: 15px;}
#profile h4 {margin-top: 6px; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; color: #FFF; margin-bottom: 0;}
#column-left {padding-top:40px;width: 50px; height: 100%; background-color: #515151; position: fixed; top: 0px; z-index: 10; transition: all 0.3s; 	max-height:calc(100%);}
#column-left.active {width: 255px; display: block;}
#content {padding-bottom: 10px; transition: all 0.3s; position: relative;}
#column-left + #content {margin-left: 50px;}
#column-left + #content + #footer {margin-left: 50px;}

/* Mobile */
@media (max-width: 767px) {
	#column-left {overflow: hidden; width: 0;}
	#column-left + #content {margin-left: 0; left: 0;}
	#column-left + #content + #footer {margin-left: 0; left: 0;}
}

/* Menu */
#menu, #menu ul, #menu li {padding: 0; margin: 0; list-style: none;}
#menu {margin-bottom: 25px;}
#menu > li {position: relative;}
#menu li a {text-decoration: none; display: block; padding: 10px; cursor: pointer; border-bottom: 1px solid #515151;}
#menu li a i {font-size: 16px;}
#menu > li > a {color: #C4C4C4; font-size: 14px; padding-left: 13px; border-bottom: 1px solid #585858;}
#menu > li > a:hover {background-color: #444444;}
#menu > li > a > span {display: none; margin-left: 8px;}
#menu li li a {color: #9d9d9d;}
#menu li li a:hover {color: #FFFFFF; background-color: #373737;}
#menu li li a:before {content: "\f101"; font-size: 14px; font-family: FontAwesome; margin-left: 10px; margin-right: 10px; transition: margin ease 0.5s;}
#menu li li a:hover:before {margin-right: 20px;}
#menu > li.active > a {color: #DDDDDD; background: #373737;}
#menu li.active li a {color: #C4C4C4;}
#menu li li.active > a:last-child {color: #FFFFFF;}
#menu li li.active a:last-child:before {margin-left: 20px; margin-right: 10px;}

#menu > li > ul {position: absolute; left: 50px; top: 0px; width: 210px; background-color: #444444; visibility: hidden;}
#menu li ul {overflow: hidden;}
#menu > li:hover > ul {visibility: visible;}
#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {font-family: FontAwesome; content: "\f105"; float: right; margin-right: 8px;}
#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after, #column-left.active #menu > li li.open > a.parent:after {font-family: FontAwesome; content: "\f107"; float: right; margin-right: 8px;}

#menu li ul a {padding-left: 20px;}
#menu li li ul a {padding-left: 40px;}
#menu li li li ul a {padding-left: 60px;}
#menu li li li li ul a {padding-left: 80px;}

/* Menu Active */
/* Desktop */
@media (min-width: 768px) {
	#column-left.active {overflow: auto;}
	#column-left.active + #content {margin-left: 235px;}
	#column-left.active + #content + #footer {margin-left: 235px;}
}
/* Mobile */
@media (max-width: 767px) {
	#column-left.active + #content {position: relative; left: 235px;}
	#column-left.active + #content + #footer {position: relative; left: 235px;}
}

#column-left.active {width: 235px;}
#column-left.active #menu li i {font-size: 14px;}
#column-left.active #menu > li > a > span {display: inline;}
#column-left.active #menu > li > ul {position: relative; left: auto; top: auto; width: auto; visibility: visible;}
/* footer */
#footer {height: 40px; text-align: center;}

/* Navs */
.nav > li.disabled > a {color: #999;}
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {color: #999;}
/* Tabs */
.nav-tabs {margin-bottom: 20px;}
.nav-tabs > li > a {color: #666; border-radius: 2px 2px 0 0;}
.nav-tabs > li > a:hover {border-color: transparent; background-color: #eee;}
/* .nav-tabs {margin-bottom: 25px;} */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {font-weight: bold; color: #333; background-color: #eee; border-color: #eee;}
.form-control:hover {border: 1px solid #b9b9b9; border-top-color: #a0a0a0; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);}
div.required .control-label:not(span):before, td.required:before {content: '* '; color: #F00; font-weight: bold;}
.table thead td span[data-toggle="tooltip"]:after, label.control-label span:after {font-family: FontAwesome; color: #1E91CF; content: "\f059"; margin-left: 4px;}
fieldset legend {padding-bottom: 5px;}

input[type="radio"], input[type="checkbox"] {margin: 2px 0 0;}
.radio, .checkbox {min-height: 18px;}
input[type="radio"], .radio input[type="radio"], .radio-inline input[type="radio"], input[type="checkbox"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {position: relative; width: 13px; width: 16px \0; height: 13px; height: 16px \0; -webkit-appearance: none; background: white; border: 1px solid #dcdcdc; border: 1px solid transparent \0; border-radius: 1px;}
input[type="radio"]:focus, .radio input[type="radio"]:focus, .radio-inline input[type="radio"]:focus, input[type="checkbox"]:focus, .checkbox input[type="checkbox"]:focus, .checkbox-inline input[type="checkbox"]:focus {border-color: #4d90fe; outline: 0;}
input[type="radio"]:active, .radio input[type="radio"]:active, .radio-inline input[type="radio"]:active, input[type="checkbox"]:active, .checkbox input[type="checkbox"]:active, .checkbox-inline input[type="checkbox"]:active {background-color: #ebebeb; border-color: #c6c6c6;}
input[type="radio"]:checked, .radio input[type="radio"]:checked, .radio-inline input[type="radio"]:checked, input[type="checkbox"]:checked, .checkbox input[type="checkbox"]:checked, .checkbox-inline input[type="checkbox"]:checked {background: #fff;}
input[type="radio"], .radio input[type="radio"], .radio-inline input[type="radio"] {width: 15px; width: 18px \0; height: 15px; height: 18px \0; border-radius: 1em;}
input[type="radio"]:checked::after, .radio input[type="radio"]:checked::after, .radio-inline input[type="radio"]:checked::after, input[type="radio"][checked=checked]::after {position: relative; top: 3px; left: 3px; display: block; width: 7px; height: 7px; content: ''; background: #666; border-radius: 1em;}
input[type="checkbox"]:hover, .checkbox input[type="checkbox"]:hover, .checkbox-inline input[type="checkbox"]:hover {border-color: #c6c6c6; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); -webkit-box-shadow: none \9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); box-shadow: none \9;}
input[type="checkbox"]:checked::after, .checkbox input[type="checkbox"]:checked::after, .checkbox-inline input[type="checkbox"]:checked::after {position: absolute; top: -6px; left: -5px; display: block; content: url('../image/checkmark.png');}

.bootstrap-datetimepicker-widget .datepicker {color: #666;}
.bootstrap-datetimepicker-widget td.day.old, .bootstrap-datetimepicker-widget td.day.new {color: #ddd;}
.bootstrap-datetimepicker-widget td.day.active, .bootstrap-datetimepicker-widget td.day.active:hover {color: #fff;}

.table thead td {font-weight: bold;}
.table thead > tr > td, .table tbody > tr > td {vertical-align: middle;}
.table a.asc:after {content: " \f107"; font-family: FontAwesome; font-size: 14px;}
.table a.desc:after {content: " \f106"; font-family: FontAwesome; font-size: 14px;}

.table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th {background-color: #ffdcdc;}
.table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr.danger:hover > th {background-color: #fdb3b3;}

.pagination {margin: 0; vertical-align:middle;}
.form-group {padding-top: 15px; padding-bottom: 15px; margin-bottom: 0;}

.form-group + .form-group {border-top: 1px solid #ededed;}
/* Panels */
.panel {border-radius: 0px;}
.panel .panel-heading {position: relative;}
.panel-heading h3 i {margin-right: 8px; -webkit-tap-highlight-color: rgba(0,0,0,0);}
.panel-heading i {font-size: 16px; font-weight: 500;}
.panel-heading h3 {font-size: 16px; font-weight: 500; display: inline-block;}

/* Primary Panel */
.panel-primary {border: 1px solid #c3e4f6; border-top: 2px solid #5cb7e7;}

.panel-primary .panel-heading {color: #1e91cf; border-color: #96d0f0; background: white;}

/* Default Panel */
.panel-default {border: 1px solid #e8e8e8; border-top: 2px solid #bfbfbf;}

.panel-default .panel-heading {color: #595959; border-color: #e8e8e8; background: #fcfcfc;}
.img-thumbnail i {color: #FFFFFF; background-color: #EEEEEE; text-align: center; vertical-align: middle; width: 100px; height: 100px; padding-top: 20px; vertical-align: middle; display: inline-block;}
.img-thumbnail.list i {width: 40px; height: 40px; padding-top: 10px;}
.img-thumbnail img, img.img-thumbnail, #filemanager .thumbnail img {width: 100px; height: 100px; object-fit: contain;}

/* Tiles */
.tile {margin-bottom: 15px; border-radius: 3px; background-color: #279FE0; color: #FFFFFF; transition: all 1s;}
.tile:hover {opacity: 0.95;}

.tile a {color: #FFFFFF;}
.tile-heading {padding: 5px 8px; text-transform: uppercase; background-color: #1E91CF; color: #FFF;}
.tile .tile-heading .pull-right {transition: all 1s; opacity: 0.7;}
.tile:hover .tile-heading .pull-right {opacity: 1;}
.tile-body {padding: 15px; color: #FFFFFF; line-height: 48px;}
.tile .tile-body i {font-size: 50px; opacity: 0.3; transition: all 1s;}
.tile:hover .tile-body i {color: #FFFFFF; opacity: 1;}
.tile .tile-body h2 {font-size: 42px;}
.tile-footer {padding: 5px 8px; background-color: #3DA9E3;}
#column-left.active #stats {display: block;}
#stats {display: none; border-radius: 2px; color: #666666; background: #2b2b2b; margin: 15px 20px; padding: 5px 0;}
#stats ul, #stats li {padding: 0; margin: 0; list-style: none;}
#stats li {font-size: 11px; color: #9d9d9d; padding: 5px 10px; border-bottom: 1px dotted #373737;}
#stats div:first-child {margin-bottom: 4px;}
#stats .progress {height: 3px; margin-bottom: 0;}
.jqvmap-label {z-index: 999;}
.alert {overflow: auto;}

/* Menu Fix For System -> Layout -> Banner */
.collapse.in {display: block; visibility: unset;}
.collapse {display: none; visibility: unset;}
/* Menu Fix For System -> Layout -> Banner */

/* Fix form-group margin inside the modal */
.modal-body  .form-group {margin: 0;}
/* Fixed Sumernote Button Height */
.note-toolbar.panel-heading i {font-size: 14px;}
/* Filemanager Folder Size */
#filemanager .fa-5x {font-size: 8em;}
#filemanager .popup {position: absolute; right: 17px; top: 0; z-index: 1;}

/* Images grid */
#images .image-grid-item>div {margin-bottom: 30px; border: 1px solid #eee; padding: 3px; background: #eee; border-radius: 3px;}
#images .image-grid-item.ui-sortable-helper>div {box-shadow: 0 0 10px #000;}
#images .image-grid-item>div>div {padding: 5px;}
#images .image-grid-item>div>div .img-thumbnail {margin-bottom: 10px;}

/* Misc */
.edit, .editSelect {border-bottom: 1px dashed #d00;}
.editSelect select {width: 100%;}
.edit-inline {display:inline-block; min-width: 60px;}
.edit-inline *{ width:auto; }
.edit form, .editSelect form {white-space: nowrap;}
.edit form input, .editSelect form select {padding: 0; min-width: 40px;}
.editSelect form select {width: calc(100% - 40px); margin-right: 3px;}
.mass-special {background-color: #085; color: #fff; border-radius: 1000px; padding: 2px 6px; margin: 5px 0; display: inline-block; width: 20px; height: 20px;}
.need_trans {background-color: #afa !important;}
.need_trans.active {color: #555 !important;}
.product-list-options {width: auto;}

.loading {background-image: url('../image/loading.gif') !important; background-repeat: no-repeat; }
.xml {cursor: pointer; display: inline-block; background: #ef5f05 url('../image/skroutz.png') no-repeat 2px 2px; background-size: 13px auto; border-radius: 100px; padding: 1px 5px 1px 18px; color: #fff; font-size: 0.8em; font-weight: bold; margin: 3px;}
.xml-0 {background-color: transparent; opacity: 0.5; color: #000;}
.character_counter {float: right;}
.character_counter::before {content: 'Characters: '}

/* Generic */
option:disabled {color: #bbb !important;}

/* Product Labels List */
.product_label_wrapper {margin: 3px; display: inline-block;}
.product_label_wrapper.label-loading {opacity: 0.3;}
.product_label {background-color: #ccc; color: #fff; border-radius: 100px; width: 100%; height: 100%; display: inline-block; text-align: center; position: relative; cursor: pointer; font-size:0.8em; padding:1px 5px;}
.product_label.active {background-color: #1e91cf;}

/* Orders */
#form-order .address {font-size: 0.9em; border-top: 1px solid #ddd;}

/* Quantities */
.quantities td {border: 1px solid #ddd; padding: 5px; min-width: 50px;}

/* Tags */
.bootstrap-tagsinput {width: 100%; height: 35px;}

#tab-attribute .panel {margin-bottom: 0;}

#mass_update_wrapper{background: #fff; display: inline-block; width: 98%; position:fixed; z-index: 1000; bottom: 0%; left: 0.5%; padding: 5px; border-radius: 3px 3px 0px 0px; box-shadow: 0px 0px 5px #000;}
#mass_update_wrapper h3 {background-color: #eee; padding: 5px 10px; margin: 0px 0px 5px 0px; cursor: pointer;}
#mass_update_wrapper #mass_update_panel>.row>div:first-child {border-right: 1px solid #e8e8e8; min-height: 300px;}
#mass_update_wrapper #mass_update_panel .nav-tabs {margin-bottom: 0; border-bottom: none;}
#mass_update_wrapper #mass_update_panel .nav-tabs>li {float: none;}
.help {color: #999; font-size: 10px; font-weight: normal; font-family: Verdana, Geneva, sans-serif; display: block;}
.priceField, .priceTaxedField {max-width: 100px; display: inline-block;} .table.table-borderless td {border-width: 0;}

.row.filter .hasValue {border-color: #f00;}

.multiselect-close{position: absolute; left: 0px;  top: 0px; width: 36px; text-align: center; z-index: 1001; padding: 3px; font-size: 28px; line-height: 26px; display: none; border-radius: 3px 0 0 3px;}

.label.j_editable {display: inline-block; color: #000;}
.label.j_editable button {display: block; margin: 0 auto;}

.filters-aside {position: fixed; width: 360px; right: -360px; top: 60px; height: calc(100% - 130px); z-index: 10; transition: right 0.3s ease; box-shadow: -3px 3px 3px rgba(0,0,0,0.5); padding: 0px;}
.filters-aside-opened {right: 0;}
.filters-aside-inner {height: 100%; overflow: auto; padding: 0 15px 15px 15px;}
.filters-aside-toggle {position: absolute; top:110px; left:-36px; width:36px; height:36px; cursor:pointer; background:#f5f5f5; z-index:20; text-align:center; border-radius:3px 0 0 3px;  box-shadow:-3px 3px 3px rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center;}
.filters-aside .form-group {padding-top: 0; padding-bottom:0;}
.filters-aside label, .filters-aside .btn-primary, .filters-aside .btn-danger {margin-top:15px;}
.filters-aside .dropdown-menu {max-width:100%;}
.filters-aside .btn {margin-right:15px;}
.filters-aside .pull-right {float:none !important;}
.filters-aside .has-value {border:1px solid #d00;}
.filters-aside-toggle>div{position:relative;}
.filters-aside-toggle>div>div {background-color:#d00; color:#fff; font-size:10px; font-weight:bold; width:14px; height:14px; display:flex; justify-content:center; align-items:center; position:absolute; top:-23px; left:-15px; border-radius:100px; }

/* 20220630 | kpant | back in stock menu module */
.module-menu {padding: 0; margin-bottom: 20px;}
.module-menu li {display: inline-block; font-size: 1.4em; line-height: 1em; text-transform: uppercase; padding: 0 10px; border-right: 1px solid #999999;}
.module-menu li:last-child {border-right: none;}
.module-menu li a {color: #999999;}
.module-menu li.active a {color: #1e91cf;}

/* 20231204 | kpant | digas.gr: changes for erp and quote */
.pill {border-radius: 3px; padding: 2px 4px; color: #fff; font-size: 0.8em; background: #0c0;}
.pill.removeExclude {background: #e80;}
.pill.addExclude {background: #888;}
.pill.error {background: #d00;}
.pill>span {display: none; cursor: pointer; margin-left: 5px;}
.pill>span:hover {text-decoration: underline;}
.pill:hover>span {display: inline-block;}

/* Content Builder Specific */
.flex-row, .flex-hv-center, .flex-v-center {display: flex !important;}
	.flex-hv-center, .flex-v-center {flex-direction: column; justify-content: center;}
	.flex-hv-center {align-items: center;}
.img-circular {display: inline-block; width: 200px; height: 200px; position: relative; overflow: hidden; border-radius: 50%;}
.img-circular img {display: inline; margin: 0 auto; height: 100%; width: auto; max-width: none; min-width: 100%; min-height: 100%;}

/* Digas specific */
.stock::before {content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 100px; background-color: #888; margin-right: 3px;}
.stock-0::before, .stock-1::before, .stock-4::before {background-color: #0a0}
.stock-5::before, .stock-6::before {background-color: #c70;}
.stock-3::before {background-color: #777;}
.stock-2::before {background-color: #a00;}