:root {
  --blue: #6751f1;
  --blueDark: #1b2433;
  --white: #fdffff;
  --whiteDark: #f3f3f7;
  --whiteDarkTraslucent: #f3f3f75c;
  --grey: #e8ebf3;
}

@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/dosis-regular.woff2') format('woff2');
}


html, body {
    width:      100% !important;
    height:     100% !important;
    margin:     0px;
    padding:    0px;
    overflow:   hidden;
    font-family: 'Dosis', sans-serif;
    font-size: 13px;
    background: url("../img/bk.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

*{
    font-family: 'Dosis', sans-serif; 
}

/*
.dhx_label, .dhx_text, 
.dhx_combobox-input, 
.dhx_input
{
    font-family: 'saira' !important;
    overflow: hidden;
}
*/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb {
    background: #b3b3b3;
    -webkit-box-shadow: none;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: none;
}

@media only screen and (hover: none) and (pointer: coarse){

	::-webkit-scrollbar {
	    width: 0px;
	    height: 0px;
	}

}

/*********** WINDOW GENERIC **********/

.dhx_window-content-without-header:not(.scroll-view)>.dhx_layout-cell-content, .dhx_window-content-without-header:not(.scroll-view)>.dhx_layout-cell-content>.dhx_layout-cell-inner_html, .dhx_window-content:not(.scroll-view)>.dhx_layout-cell-content, .dhx_window-content:not(.scroll-view)>.dhx_layout-cell-content>.dhx_layout-cell-inner_html {
    position: relative;
    overflow: hidden;
}

.generic-window .dhx_window-header .dhx_navbar-title {
    margin-left: 0 !important;
    font-size: calc(var(--dhx-font-size-small) * 1.2);
}

.generic-window .dhx_widget.dhx_form .dhx_form-fieldset-legend--center {
    text-align: center;
    font-size: 11pt;
    border: 0px;
}

.win-header{
	background-color: red;
    cursor: move;
}

.generic-window .dhx_window-content-without-header {
    padding: 10px;
    overflow-y: auto;
	color: white;
	text-align: center;
}

.generic-window .dhx_window-footer {
    padding-top: 0px;
    height: 17px;
}

.generic-window .dhx_window .dhx_window-footer .dhx_toolbar .dhx_navbar {
    padding: 0px 2px 0px 2px;
}

.generic-window .dhx_window-header--movable {
	cursor: all-scroll;
	height: 34px;
    border-bottom: 1px solid #d1d1d1;
}

.generic-window .dhx_window-header {
	padding-bottom: 0px;
}

.generic-window .dhx_toolbar-button:hover{
	background-color: rgba(255, 255, 255, 0);
	transition: background-color .2s ease-out;
}

.generic-window .dhx_window .dhx_window-header .dhx_toolbar {
    padding: 0px 0px 0px 0px;
}

.generic-window .dhx_window .dhx_toolbar {
    background-color: #cdcde35c;
    height: 0px !important;
}

.generic-window .dhx_window .dhx_window-header .dhx_toolbar .dhx_navbar {
    padding: 1px 0px 9px 9px;
}

.generic-window .dhx_toolbar-button {
    padding: 0px 0px;
}

.generic-window .dhx_layout-cell{
	background-color: transparent;
}

.generic-window .dhx_layout,
.generic-window,
.dhx_toolbar {
    background-color: #ffffff73;
	border-radius: 6px;
	padding-bottom: 0px;
	padding-left: 0px;
    padding-right: 0px;
	
	-webkit-animation: scale-in-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.generic-window{
	color: #ffffff;
	border: 1px solid #00000029;
	backdrop-filter: blur(2px);
}

.generic-window .dhx_window-content {
    /* padding-left: 28px; */
    /* padding-right: 28px; */
    /* padding-bottom: 28px; */
    padding: 3px;
}

.generic-window .dhx_form-group--textarea {
    display: flex;
    flex-direction: column;
    height: calc(100% - 4px);
}

.dhx_button--view_flat.dhx_button--color_primary {
    background-color: #6751f1bf;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.dhx_button--view_flat.dhx_button--color_danger {
    background-color: #d23535;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.dhx_button--view_flat.dhx_button--color_primary.dhx_button--disabled, .dhx_button--view_flat.dhx_button--color_primary:disabled {
    color: #ffffff6b;
    background-color: #a398e6bf !important;
}

.dhx_button--view_flat.dhx_button--color_primary:hover {
    background-color: #6751f1;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.dhx_button--view_flat.dhx_button--color_danger:hover {
    background-color: #c21f1f;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.dhx_button--view_flat.dhx_button--color_secondary {
    background-color: transparent;
    font-size: 11px;
    border-radius: 6px;
    margin-left: -9px;
}

.dhx_button--view_flat.dhx_button--color_secondary:hover {
    background-color: transparent;
    color: #0288d1;
}


.generic-window .dhx_input__container {
    width: 100%;
    display: inline-block;
    position: relative;
    background-color: transparent;
}

.generic-window .dhx_input {
    border-radius: 6px;
    background-color: #fefefec2;
    backdrop-filter: blur(5px);
}

.generic-window .dhx_window-content-without-header .dhx_layout-rows:first-of-type, .dhx_window-content .dhx_layout-rows:first-of-type {
    overflow-y: hidden !important;
    background-color: transparent;
    border: 0px;
    padding: 0px !important;
}

.generic-window .dhx_widget.dhx_form .dhx_form-fieldset {
    width: 100%;
    margin: 0 0 16px;
    padding: 0 5px;
    border: 0px;
    border-radius: 0px;
}


/*********** WINDOW WARNING **********/

/*
.dhx_alert__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000038;
    backdrop-filter: blur(5px);
    z-index: calc(var(--dhx-z-index-overlay-total) - 1);
    
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
*/

.warning-header{
	width: 294px;
    height: 41px;
    background-image: url(../img/warning-header.png);
    background-repeat: no-repeat;
    background-size: 294px;
    cursor: default;
}

.warning-footer{
	width: 294px;
    height: 41px;
    background-image: url(../img/warning-footer-static.png);
    background-repeat: no-repeat;
    background-size: 294px;
    cursor: default;
}

.warning-window .loader-img{
	padding-top: 7px;
}

.warning-window .dhx_window-content-without-header {
    padding: 10px;
    overflow-y: auto;
	color: white;
	text-align: center;
}

.warning-window .dhx_window-footer {
    padding-top: 0px;
    height: 17px;
}

.warning-window .dhx_window .dhx_window-footer .dhx_toolbar .dhx_navbar {
    padding: 0px 2px 0px 2px;
}

.warning-window .dhx_window-header--movable {
	cursor: all-scroll;
	height: 33px;
}

.warning-window .dhx_window-header {
	padding-bottom: 0px;
}

.warning-window .dhx_toolbar-button:hover{
	background-color: rgba(255, 255, 255, 0);
	transition: background-color .2s ease-out;
}

.warning-window .dhx_window .dhx_window-header .dhx_toolbar {
    padding: 0px 0px 0px 0px;
}

/*
.dhx_window__overlay {
    background: transparent;
}
*/

.warning-window .dhx_window .dhx_toolbar {
    background-color: transparent;
    height: 0px !important;
}

.warning-window .dhx_window .dhx_window-header .dhx_toolbar .dhx_navbar {
    padding: 0px 0px 0px 2px;
}

.warning-window .dhx_toolbar-button {
    padding: 0px 0px;
}

.warning-window .dhx_layout-cell{
	background-color: transparent;
}

.warning-window .dhx_layout,
/*.warning-window .dhx_layout-cell,*/
.warning-window,
.dhx_toolbar {
	background-color: #00000021;
	border-radius: 6px;
	padding-bottom: 0px;
	padding-left: 0px;
    padding-right: 0px;
	
	-webkit-animation: scale-in-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.warning-window{
	color: #ffffff;
	border: 1px solid #00000029;
	backdrop-filter: blur(2px);
}

.warning-window .dhx_window-content {
    /* padding-left: 28px; */
    /* padding-right: 28px; */
    /* padding-bottom: 28px; */
    padding: 3px;
}

.warning-window .dhx_form-group--textarea {
    display: flex;
    flex-direction: column;
    height: calc(100% - 4px);
}

.warning-window .dhx_button--view_flat.dhx_button--color_primary {
    background-color: #6751f1bf;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.warning-window .dhx_button--view_flat.dhx_button--color_primary:hover {
    background-color: #6751f1;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.warning-window .dhx_button--view_flat.dhx_button--color_secondary {
    background-color: transparent;
    font-size: 11px;
    border-radius: 6px;
    margin-left: -9px;
}

.warning-window .dhx_button--view_flat.dhx_button--color_secondary:hover {
    background-color: transparent;
    color: #0288d1;
}


.warning-window .dhx_input__container {
    width: 100%;
    display: inline-block;
    position: relative;
    background-color: transparent;
}

.warning-window .dhx_input {
    border-radius: 6px;
    background-color: #fefefec2;
    backdrop-filter: blur(5px);
}

.warning-window .dhx_window-content-without-header .dhx_layout-rows:first-of-type, .dhx_window-content .dhx_layout-rows:first-of-type {
    overflow-y: hidden !important;
    background-color: transparent;
    border: 0px;
    padding: 0px !important;
}

.warning-form{
	background-color: var(--white);
}

.warning-form .dhx_form-fieldset {
    border-radius: 6px !important;
    padding: 3px 3px !important;
    background-color: #ffffff12;
    margin: 0 0 0 0 !important;
    backdrop-filter: blur(5px);
}

.warning-form .dhx_form-group--inline {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    position: relative;
    margin: 2px 0px 2px 0px;
}

.warning-form .dhx_form-fieldset-legend {
    margin-bottom: 0px !important;
}

.warning-form .dhx_form-fieldset-legend {
    padding: 0 0px !important;
}

.warning-spacer{
	margin-bottom: 6px;
}

.warning-form .dhx_label, .dhx_text {
	color: var(--white);	
}


/*********** WINDOW LOGIN **********/


.dhx_window__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000038;
    backdrop-filter: blur(2px);
    z-index: var(--dhx-z-index-overlay-total);
    
    -webkit-animation: fade-in 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.login-window .dhx_window-header--movable {
	cursor: all-scroll;
	height: 130px;
}

.login-window .dhx_window-header {
	padding-bottom: 0px;
}

.logo{
	margin-left: 120px;
	width: 180px;
    height: 101px;
    background-image: url(../../assets/img/logo.png);
    background-repeat: no-repeat;
    cursor: default;
}

.login-window .dhx_toolbar-button:hover{
	background-color: rgba(255, 255, 255, 0);
	transition: background-color .2s ease-out;
}

.login-window .dhx_window .dhx_window-header .dhx_toolbar {
    padding: 10px 0px 0;
}

/*
.dhx_window__overlay {
    background: transparent;
}
*/

.login-window .dhx_window .dhx_toolbar {
    background-color: transparent;
    height: 131px !important;
}

.login-window .dhx_window .dhx_window-header .dhx_toolbar .dhx_navbar {
    padding: 10px 0px 0 0px;
}

.login-window .dhx_layout-cell{
	background-color: transparent;
}

.login-window .dhx_layout,
/*.login-window .dhx_layout-cell,*/
.login-window,
.dhx_toolbar {
	background-color: #ffffff08;
	border-radius: 6px;
	padding-bottom: 0px;
	padding-left: 0px;
    padding-right: 0px;
    
    -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.login-window{
	color: #ffffff;
	border: 1px solid #00000029;
	backdrop-filter: blur(5px);
}

.login-window .dhx_window-content {
    /* padding-left: 28px; */
    /* padding-right: 28px; */
    /* padding-bottom: 28px; */
    padding: 12px;
}

.login-window .dhx_button--view_flat.dhx_button--color_primary {
    background-color: #6751f1bf;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.login-window .dhx_button--view_flat.dhx_button--color_primary:hover {
    background-color: #6751f1;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.login-window .dhx_button--view_flat.dhx_button--color_secondary {
    background-color: transparent;
    font-size: 11px;
    border-radius: 6px;
    margin-left: -9px;
}

.login-window .dhx_button--view_flat.dhx_button--color_secondary:hover {
    background-color: transparent;
    color: #0288d1;
}


.login-window .dhx_input__container {
    width: 100%;
    display: inline-block;
    position: relative;
    background-color: transparent;
}

.login-window .dhx_input {
    border-radius: 6px;
    background-color: #fefefec2;
    backdrop-filter: blur(5px);
}

.login-window .dhx_window-content-without-header .dhx_layout-rows:first-of-type, .dhx_window-content .dhx_layout-rows:first-of-type {
    overflow-y: hidden !important;
    background-color: transparent;
    border: 0px;
    padding: 0px !important;
}

.edit-prdoduct-window .dhx_window-content-without-header .dhx_layout-rows:first-of-type, .dhx_window-content .dhx_layout-rows:first-of-type {
    overflow-y: auto !important;
}

.login-form{
	background-color: var(--white);
}

.login-form .dhx_form-fieldset-legend{
	display: none;
}

.login-form .dhx_form-fieldset {
    border-radius: 6px !important;
    padding: 3px 3px !important;
    background-color: #ffffff12;
    margin: 0 0 0 0 !important;
    backdrop-filter: blur(5px);
}

.login-form .dhx_form-group--inline {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    position: relative;
    margin: 2px 0px 2px 0px;
}

.login-form .dhx_form-fieldset-legend {
    margin-bottom: 0px !important;
}

.login-form .dhx_form-fieldset-legend {
    padding: 0 0px !important;
}

.login-spacer{
	margin-bottom: 6px;
}

/* ===== Custom grid header filter styles ===== */
/* Make selects/inputs used as header filters match DHTMLX input appearance */
.dhx_grid-header-cell .dhx_grid-filter,
.dhx_grid-filter.dhx_input {
    display: block;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0px 8px !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    color: #535353 !important;
    font-size: 12px !important;
    z-index: 5 !important; /* ensure select sits above any underlying input */
    position: relative !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* If an input exists under the select, make sure it's visually behind */
.dhx_grid-header-cell input.dhx_grid-filter {
    z-index: 1 !important;
    position: relative !important;
}

/* Hide select dropdown arrow in IE/Edge default style tweaks */
.dhx_grid-header-cell .dhx_grid-filter::-ms-expand { display: none; }

/* End custom styles */

.login-form .dhx_label, .dhx_text {
	color: var(--white);	
}


/*********** MAIN SIDEBAR **********/

/* .main-sidebar{
    width: 50px !important;
} */

.dhx_menu-button--disabled *, .dhx_menu-button:disabled * {
    color: rgb(212 208 208 / 30%);
}

.dhx_menu-button__icon {
    /*color: rgb(28 37 51 / 82%);*/
        color: rgb(160 177 204);
}

.main-sidebar .sidebar-logo{
	display: block;
    padding: 13px;
}

.main-sidebar .sidebar-logo-cell{
	background-color: transparent;
	padding-left: 3px;
}

.main-sidebar .dhx_sidebar__item--separator {
    height: 1px;
    min-height: 1px;
    width: 100%;
    background-color: transparent;
    margin: 0px 0;
}

.main-sidebar .dhx_navbar {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    /* background-color: var(--whiteDark); */
    background: #1B2433;
    background: linear-gradient(180deg,rgba(27, 36, 51, 1) 0%, rgba(54, 71, 105, 1) 100%);
}

.main-sidebar .dhx_sidebar-button__icon {
    color: var(--white);
}

.main-sidebar .dhx_sidebar-button:hover .dhx_sidebar-button__icon {
    color: white;
}

.main-sidebar .dhx_sidebar-button {
    color: white;
}

.main-sidebar .dhx_sidebar-button:hover {
    background-color: #3a4860;
    color: white;
}

.main-sidebar .dhx_sidebar-button--active .dhx_sidebar-button__icon{
    color: #ffffff;
}

.main-sidebar .dhx_sidebar-button--active {
    background-color: #3a4860;
    color: white !important;
}

.main-sidebar .dhx_sidebar-button--active:hover {
    color: var(--blueDark);
}

.toolbar_title:hover{
    background-color: transparent !important;
    cursor: default;
}

.dhx_menu-button--active:not(:disabled), .dhx_menu-button:active:not(:disabled), .dhx_menu-button:focus:not(:disabled), .dhx_menu-button:hover:not(:disabled) {
    background-color: #1c2533;
    transition: background-color var(--dhx-transition-time) var(--dhx-transition-out);
    color: white;
}

.dhx_menu {
    padding: 0;
    margin: 0;
    /* background: hsl(0deg 20.13% 37.28%); */
    background: #1B2433;
    background: linear-gradient(180deg, rgba(27, 36, 51, 1) 0%, rgba(54, 71, 105, 1) 100%);
}

.dhx_menu-button {
    color: rgb(230 231 235);
}

/*********** SECONDARY SIDEBAR **********/

.secondary-sidebar {
    border-right: 1px solid #dadada;
}

.secondary-sidebar .dhx_sidebar__item--separator {
    height: 1px;
    min-height: 1px;
    width: 100%;
    background-color: var(--dhx-border-color);
    margin: 0px 0;
}

.secondary-sidebar .dhx_navbar {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    background-color: var(--whiteDark);
}

.secondary-sidebar .dhx_sidebar-button__icon {
    color: var(--blue);
}

.secondary-sidebar .dhx_sidebar__item:first-child {
    background-color: var(--grey);
    height: 43px;
}

.secondary-sidebar .dhx_sidebar__item:first-child .dhx_sidebar-button__icon{
    color: var(--blueDark);
}

.secondary-sidebar .dhx_sidebar-button:hover .dhx_sidebar-button__icon{
	color: var(--blue);
}

.secondary-sidebar .dhx_sidebar-button:hover {
	background-color: var(--whiteDark);
}

.secondary-sidebar .dhx_sidebar-button:first-child:hover {
	background-color: var(--grey);
}

.secondary-sidebar .dhx_sidebar-button:first-child:hover .dhx_sidebar-button__icon{
	color: var(--blueDark);
}

/*********** MAIN FRAME **********/

.mainFrame{
	flex: auto !important;
	background-color: var(--dhx-border-color);
}

.mainHeader{
	height: 45px !important;
	background-color: var(--dhx-border-color);
}


/*********** TOOLBAR **********/

.toolbar{
	background-color: var(--whiteDark);
    height: 45px !important;
    padding-right: 7px;
    padding-left: 7px;
    border-bottom: 1px solid #9e9e9e94;
    border-radius: 0px;
}

.toolbar .toolbar_btn_min {
    background-color: #6b53f112;
    border-radius: 6px;
    color: var(--blueDark);
    margin-left: 2px;
}

.toolbar .toolbar_btn_min:hover {
    background-color: #674ef129;
}

.toolbar .toolbar_btn {
    background-color: #6751f1bf;
    border-radius: 6px;
    backdrop-filter: blur(5px);
    color: var(--whiteDark);
}

.toolbar .toolbar_btn:hover {
    background-color: #5a49c5bf;
    color: var(--whiteDark);
}

.toolbar_btn .dhx_toolbar-button__icon{
	color: var(--whiteDark);
}

/*********** GRID **********/

.grid_custom_row_error{
	background-color: #e95050;
}

.grid_custom_row_error .dhx_grid-cell__content {
    color: white;
}

.grid_custom_row_publish{
	background-color: #d4d1e6;
}

/* Tree level background helpers
   These classes provide a blue/azure tonal scale from very light
   (level 0) to darker (level 7). They're intended to be applied to
   grid rows (for example adding "tree-level-2" to a row element)
   based on the depth of the node (count of underscores in row.parent).
   Only classes are added here; no existing rules are modified. */
.tree-level-0 {
    background-color: #eef8ff; /* very light */
    color: #0b2b3a;
    transition: background-color .18s ease-in-out, color .18s ease-in-out;
}
.tree-level-1 {
    background-color: #e0f4ff;
    color: #0b2b3a;
}
.tree-level-2 {
    background-color: #c9ecff;
    color: #062433;
}
.tree-level-3 {
    background-color: #aee0ff;
    color: #042b3a;
}
.tree-level-4 {
    background-color: #86ceff;
    color: #012938;
}
.tree-level-5 {
    background-color: #4fb8ff;
    color: #001f2a;
}
.tree-level-6 {
    background-color: #1aa8ff;
    color: #ffffff;
}
.tree-level-7 {
    background-color: #0096e6; /* darkest provided */
    color: #ffffff;
}

/* A subtle left border to reinforce indentation (optional).
   The app can toggle this rule by also adding the 'tree-with-border' class
   to the grid container if desired. */
.tree-with-border .dhx_grid-row.tree-level-1 { border-left: 6px solid rgba(0,150,230,0.06); }
.tree-with-border .dhx_grid-row.tree-level-2 { border-left: 12px solid rgba(0,150,230,0.08); }
.tree-with-border .dhx_grid-row.tree-level-3 { border-left: 18px solid rgba(0,150,230,0.10); }
.tree-with-border .dhx_grid-row.tree-level-4 { border-left: 24px solid rgba(0,150,230,0.12); }
.tree-with-border .dhx_grid-row.tree-level-5 { border-left: 30px solid rgba(0,150,230,0.14); }
.tree-with-border .dhx_grid-row.tree-level-6 { border-left: 36px solid rgba(0,150,230,0.16); }
.tree-with-border .dhx_grid-row.tree-level-7 { border-left: 42px solid rgba(0,150,230,0.18); }

/* Product presence indicator (used in category grid actions column) */
.prod-true { color: #16a34a !important; /* green */ }
.prod-false { color: #ef4444 !important; /* red */ }

/* small badge with product count shown before the icon */
.prod-count {
    display: inline-block;
    min-width: 20px;
    padding: 2px 6px;
    margin-right: 6px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #111827;
    font-size: 12px;
    text-align: center;
}

.custom_preview_grid {
    --dhx-font-color-primary: #fff;
    --dhx-background-primary: #3A434A;
    --dhx-s-grid-header-background: #2C3338;

    --dhx-border-color: #4A555E;
    --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color);
}

.combo-has-value .dhx_combo__input, .combo-has-value .dhx_combo__button, .combo-has-value .dhx_combo__wrap{outline: none; border: 2px solid #d9534f !important; box-shadow: 0 0 4px rgba(217,83,79,0.35);}

/* Highlighted preview column header / cells */
.preview-col-highlight{
    background-color: #cfeffd !important; /* light azure */
    transition: background-color 180ms ease-in-out;
}

/* Visual indicator applied to the link input when the product row has a link error */
.product-link--error {
    border: 2px solid #c62828 !important; /* strong red border */
    box-shadow: 0 0 0 3px rgba(198,40,40,0.08) !important;
    color: #6b0000 !important;
    text-decoration: line-through !important;
}

/* Small icon button placed next to link input to mark it as valid */
.link-mark-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: #ffffffcc;
    cursor: pointer;
    font-size: 13px;
}
.link-mark-btn i{ pointer-events: none; }
.link-mark-btn:hover{ background: rgba(255,255,255,0.12); color: #fff; }

/* Wrapper to position the mark button inside the input field on the right */
.link-input-wrap{
    display: inline-flex;
    position: relative;
    align-items: center;
    width: 100%;
}
.link-input-wrap .dhx_input, .link-input-wrap input, .link-input-wrap textarea, .link-input-wrap select{ 
    padding-right: 40px !important; /* reserve space for the button */
    box-sizing: border-box;
}
.link-input-wrap .link-mark-btn{
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    color: green;
}

/* In case header and cells have nested elements */
.dhx_grid__header .preview-col-highlight, .dhx_grid__cell.preview-col-highlight{
    background-color: #cfeffd !important;
}

/*********** EDITOR IFRAME **********/

.button-save-exception{
    margin-top: 30px;
}

.generic-window .dhx_layout-cell-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: var(--dhx-border);
    padding: 5px 5px;
    background-color: transparent;
}

.editor-frame{
	margin: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
}

.ql-toolbar.ql-snow {
    background-color: grey !important;
}

.editor-form .dhx_form-group {
    position: relative;
    display: block;
    text-align: left;
    margin-bottom: 7px;
}

.editor-form .dhx_label, .dhx_text {
    margin-bottom: 2px;
    border: 0px;
    text-align: left;
}

.dhx_form-group--inline .dhx_input__wrapper {
    flex: 0 1 auto;
    width: 100%;
    overflow: hidden;
    height: auto;
    text-align: left;
}

.editor-form .dhx_form-group--state_error .dhx_input__caption, .dhx_form-group--state_error .dhx_label, .dhx_form-group--state_error .dhx_text {
    color: var(--dhx-font-color-primary);
}

.editor-form .dhx_form-group--state_error .dhx_combobox-input-box, .dhx_form-group--state_error .dhx_combobox-input-box:focus, .dhx_form-group--state_error .dhx_input, .dhx_form-group--state_error .dhx_input:focus {
    box-shadow: var(--dhx-shadow-input-size) var(--dhx-border-color);
}

/*********** DASHBOARD **********/

/* Stili per le dashboard card */
/*
.dashboard-card{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s cubic-bezier(.2,.9,.3,1), border-color .18s ease;
    will-change: transform, box-shadow;
}
*/
.dashboard-card {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #FFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(219, 219, 219, 1) 100%);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #ffffff;
    cursor: pointer;
}
/*
.dashboard-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.14);
    border: 0px;
}
*/
.dashboard-card__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:6px;
}
.dashboard-card__title{
    font-size:18px;
    color:#767575;
}
.dashboard-card__icon{
    font-size:18px;
    color:#666;
}
.dashboard-card__center{
    flex:1;
    display:flex;
    align-items:center;
}
.dashboard-card__count{
    font-size:36px;
    text-align:left;
    color:#111;
}
.dashboard-card__footer{
    margin-top:0px; /* ridotto per diminuire lo spazio rispetto alla riga meta */
    color:#1a7f1a;
    font-size:12px;
}

/* Meta line immediately above footer: same styling as footer */
.dashboard-card__meta{
    margin-top:8px;
    margin-bottom:0px; /* piccolo spazio tra meta e footer */
    color:#1a7f1a;
    font-size:12px;
}

.lastmodified-list .dhx_list-item {
    overflow: hidden;
    position: relative;
    font-family: var(--dhx-font-family);
    padding: 3px 5px;
    border-bottom: 0px;
    outline: none;
}

.lastmodified-list .dhx_list-item--focus, .dhx_list-item--selected:hover, .dhx_list-item:hover {
    background-color: transparent;
    transition: background-color var(--dhx-transition-time) var(--dhx-transition-out);
}

/* Stili per la sezione lastmodified e le mini-card interne */
.lastmodified-container{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:6px 4px;
}
/* Intestazione per la sezione "Attività recenti" dentro lastmodified */
.lastmodified-header{
    font-size: 18px;
    color: #333;
    padding: 8px 12px;
    margin: 0 0 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    background: #f5f5f5;
    border-radius: 6px 6px 0 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.lastmodified-header__title{
    font-size:16px;
    color:#333;
}

/* Ensure the lastmodified top-right icon matches other card icons (size, circle, gradient already defined for #dash-card-icon-lastmodified) */
#dash-card-icon-lastmodified{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* small inline tag icon spacing and color */
.lastmodified-mini-tag i{
    vertical-align:middle;
    margin-right:6px;
    color:#6b6b6b;
}
.lastmodified-mini-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background: #f9f6f6;
    border-radius:8px;
    padding:10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    position: relative;
    min-height:56px;
}
.lastmodified-mini-title{
    font-size:13px;
    color:#222;
    margin-bottom:4px;
}
.lastmodified-mini-row{
    display:flex;
    align-items:center;
    gap:8px;
}
.lastmodified-mini-tag{
    font-size:11px;
    padding:4px 8px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,0.06);
    color:#444;
    background: #fbfbfb;
}
.lastmodified-mini-when{
    font-size:12px;
    color:#666;
}
.lastmodified-mini-status{
    position: absolute;
    right:10px;
    bottom:10px;
    padding:6px 10px;
    border-radius:12px;
    font-size:12px;
    color:#fff;
}
.lastmodified-mini-status.published{
    background: linear-gradient(135deg,#2f855a,#2bb673);
}
.lastmodified-mini-status.pending{
    background: linear-gradient(135deg,#9ae6b4,#c6f6d5);
    color: #22543d;
}

/* Icone: cerchio colorato, icona al centro, look moderno e acceso */

.dashboard-card__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; /* leggermente più piccolo */
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s cubic-bezier(.2,.9,.3,1);
    will-change: transform, box-shadow;
}
.dashboard-card__icon i{
    font-size:16px;
    color: #fff;
}

/* Gradienti e colori distinti per sezione (accese e moderne) */
#dash-card-icon-news { background: linear-gradient(135deg,#ff6b6b 0%,#ff4d4f 100%); --dash-glow: 0 12px 30px rgba(255,77,77,0.18); }
#dash-card-icon-focus { background: linear-gradient(135deg,#ff9a4d 0%,#ff7a18 100%); --dash-glow: 0 12px 30px rgba(255,122,24,0.16); }
#dash-card-icon-promozioni { background: linear-gradient(135deg,#ffd54f 0%,#ffc107 100%); --dash-glow: 0 12px 30px rgba(255,193,7,0.16); }
#dash-card-icon-eventi { background: linear-gradient(135deg,#7fe0ff 0%,#40c4ff 100%); --dash-glow: 0 12px 30px rgba(64,196,255,0.16); }
#dash-card-icon-brochures { background: linear-gradient(135deg,#9a7bff 0%,#7c4dff 100%); --dash-glow: 0 12px 30px rgba(124,77,255,0.16); }
#dash-card-icon-partner { background: linear-gradient(135deg,#5fffa1 0%,#00c853 100%); --dash-glow: 0 12px 30px rgba(0,200,83,0.16); }
#dash-card-icon-lastmodified { background: linear-gradient(135deg,#ff80b3 0%,#ff4081 100%); --dash-glow: 0 12px 30px rgba(255,64,129,0.16); }

/* fallback: se l'icona è impostata direttamente sul contenitore, mantieni colore di testo bianco */
#dash-card-icon-news, #dash-card-icon-focus, #dash-card-icon-promozioni,
#dash-card-icon-eventi, #dash-card-icon-brochures, #dash-card-icon-partner,
#dash-card-icon-lastmodified { color: #fff; }

/* Hover generale: ingrandimento leggero e glow basato sulla variabile --dash-glow */
.dashboard-card:hover .dashboard-card__icon{
    transform: scale(1.08);
    box-shadow: var(--dash-glow, 0 12px 30px rgba(0,0,0,0.12));
}

.dashboard-layout .dhx_layout-wide.dhx_layout-rows>.dhx_layout-cell {
    margin: 12px;
    border: 1px solid #c7c4c4c4;
    border-radius: 11px;
    box-shadow: 0px 0px 18px -9px rgba(0, 0, 0, 0.41);
}

.dashboard-layout .dhx_layout-wide.dhx_layout-rows>.dhx_layout-cell:last-of-type {
    margin-bottom: 12 !important;
}

.dhx_layout-space.dhx_layout-columns>.dhx_layout-cell:last-of-type {
    margin: 24px;
    border-radius: 12px;
    border: 1px solid #c7c4c4c4;
    box-shadow: 0px 0px 18px -9px rgba(0, 0, 0, 0.41);
}

.dhx_layout-wide {
    background: transparent;
    border: none !important;
}

.dhx_list_template_a_box .dhx_list-item {
    padding: 0;
    height: 64px !important;
}

.dhx_list_template_a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 64px;
}

.dhx_list_template_a__avatar-elem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 72px;
}

.dhx_list_template_a__avatar {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    background: center center/cover no-repeat #f7f7f7;
}

.dhx_list_template_a__container-wrapper {
    width: 100%;
    overflow: hidden;
}

.dhx_list_template_a__body {
    width: 180px;
}

.dhx_list_template_a__title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dhx_list_template_a__description {
    color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dhx_list_template_a__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 12px;
    min-width: 74px;
    width: 74px;
}

.dhx_list_template_a__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: green;
}

.dhx_list_template_a__label-icon {
    color: #0ab169;
    font-size: 16px;
    line-height: 16px;
    height: 16px;
    opacity: 0;
}

.dhx_list_template_a__label-icon.checked {
    opacity: 1;
}

.dhx_list_template_a__button-elem {
	color: var(--blue);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 20px;
    width: 20px;
    padding: 0 2px;
    border-radius: 50%;
    border: 0;
    background: inherit;
    outline: 0;
    cursor: pointer;
}

.dhx_list_template_a__icon-small {
    color: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    line-height: 16px;
    height: 16px;
}

.dhx_layout-space.dhx_layout-rows>.dhx_layout-cell {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border: 0px;
}
.dhx_layout-space {
    background: transparent;
    border: none;
}

.dhx_layout-space.dhx_layout-rows>.dhx_layout-cell:last-of-type {
    margin-bottom: 0px;
}

.dhx_widget--bordered {
    border: 0px;
}

.dhx_layout-cell-header__title {
    font-weight: 600;
}

.dhx_layout-cell-header__icon {
    margin-right: 16px;
    color: var(--dhx-color-primary);
}


/*********** TABBAR **********/

.custom-tabbar .dhx_tabbar-tab-button--active {
    background-color: rgb(2, 136, 209) !important;
    color: var(--dhx-color-white) !important;
}
.custom-tabbar .dhx_tabbar-header-active {
    background-color: rgb(3, 94, 143) !important;
}

.custom-tabbar {
    display: flex;
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    background-color: hsl(205deg 12% 19.61% / 88%);
    position: relative;
}

.custom-tabbar .dhx_tabbar-tab-button {
    width: 100%;
    height: 100%;
    font-family: var(--dhx-font-family);
    font-size: var(--dhx-font-size-normal);
    font-weight: var(--dhx-font-weight-medium);
    line-height: var(--dhx-line-height-normal);
    position: relative;
    padding: 12px 24px;
    border-radius: 0;
    color: #ffffff69;
    text-transform: uppercase;
    background-color: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color var(--dhx-transition-time) var(--dhx-transition-in);
}

.custom-tabbar .dhx_tabbar_scroll.arrow-down {
    bottom: 0;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsl(205deg 12% 19.61%) 75%);
}

.custom-tabbar .dhx_tabbar_scroll.arrow-up {
    top: 0;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0), hsl(205deg 12% 19.61%) 75%);
}

.custom-tabbar .dhx_tabbar_scroll.arrow-down:hover {
    bottom: 0;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsl(206, 12%, 26%) 75%);
}

.custom-tabbar .dhx_tabbar_scroll.arrow-up:hover {
    top: 0;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0), hsl(206, 12%, 26%) 75%);
}