/**********************************************
******************** scroll *******************
**********************************************/

::-webkit-scrollbar {height: 12px; width: 12px; background:var(--card_body_bg);}
::-webkit-scrollbar-thumb {background: var(--card_header_bg); -webkit-border-radius: 1ex;}
::-webkit-scrollbar-corner {background: var(--card_header_bg);}

/**********************************************
******************** fonts *******************
**********************************************/

@font-face {
    font-family: 'RobotoCondensed-Regular';
	src: url('../fonts/RobotoCondensed-Regular.eot?#iefix') format('embedded-opentype'),
	url('../fonts/RobotoCondensed-Regular.woff') format('woff'),
	url('../fonts/RobotoCondensed-Regular.svg#RobotoCondensed-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'RobotoCondensed-Light';
	src: url('../fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
	url('../fonts/RobotoCondensed-Light.woff') format('woff'),
	url('../fonts/RobotoCondensed-Light.ttf') format('truetype'),
	url('../fonts/RobotoCondensed-Light.svg#RobotoCondensed-Light') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'RobotoCondensed-Bold';
	src: url('../fonts/RobotoCondensed-Bold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/RobotoCondensed-Bold.woff') format('woff'),
	url('../fonts/RobotoCondensed-Bold.ttf') format('truetype'),
	url('../fonts/RobotoCondensed-Bold.svg#RobotoCondensed-Bold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face { 
    font-family: 'Roboto-Regular';
	src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
	url('../fonts/Roboto-Regular.woff') format('woff'),
	url('../fonts/Roboto-Regular.ttf') format('truetype'),
	url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face { 
    font-family: 'Roboto-Light';
	src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
	url('../fonts/Roboto-Light.woff') format('woff'),
	url('../fonts/Roboto-Light.ttf') format('truetype'),
	url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
	font-weight: normal;
	font-style: normal;
}

/**********************************************
******************** print ********************
**********************************************/

@page {
  size: auto;
}
page[size="A4"][layout="portrait"] {
	color: var(--text_print);
	background: var(--background_print);
    padding-left: 20mm;
    font-size: 14px;
	width: 297mm;
	display: block;
	margin: 0 auto;
	margin-bottom: 5mm;
	box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
page[size="A4"][layout="invoice"] {
	color: var(--text_print);
	background: var(--background_print);
    padding: 0mm 4mm 0mm 15mm;
    font-size: 14px;
	width: 297mm;
	display: block;
	margin: 0 auto;
	/*margin-bottom: 5mm;*/
	box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
page[size="A4"][layout="pricelist"] {
	color: var(--text_print);
	background: var(--background_print);
    padding: 0mm 4mm 0mm 15mm;
    font-size: 14px;
	width: 297mm;
	display: block;
	margin: 0 auto;
	/*margin-bottom: 5mm;*/
	box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
page[size="A4"][layout="landscape"] {
	color: var(--text_print);
	background: var(--background_print);
    padding: 20mm 10mm 0 10mm;
    font-size: 14px;
	width: 420mm;
	display: block;
	margin: 0 auto;
	box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
page[size="A4"][layout="wide"] {
	color: var(--text_print);
	background: var(--background_print);
    padding: 0 5mm 0 5mm;
    font-size: 13px;
	width: 420mm;
	display: block;
	margin: 0 auto;
	box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
@media print {
	page {margin: 0; box-shadow: 0; overflow:initial!important; position: relative!important; float: none!important; display: block!important;}
    page[layout="wide"] div,
    page[layout="wide"] table {
        overflow:initial!important;
        position: relative!important;
        float: none!important;
        display: block!important;
    }
    page[layout="wide"] tbody {min-width: 410mm; display: table;}
    page[layout="wide"] p {white-space: nowrap;}
  	.pagebreak {page-break-after: always!important;}

    page[layout="invoice"] div,
    page[layout="invoice"] table {
        overflow:initial!important;
        position: relative!important;
        display: block!important;
    }
    page[layout="invoice"] tbody {display: table;}
    page[layout="presentation"] div,
    page[layout="presentation"] tablex {
        overflow:initial!important;
        position: relative!important;
        display: block!important;
    }
    page[layout="presentation"] tbody {display: table;}
    page[layout="presentation_custom"] div,
    page[layout="presentation_custom"] tablex {
        overflow:initial!important;
        position: relative!important;
        display: block!important;
    }
    page[layout="presentation_custom"] tbody {display: table;}
    .no-print, .no-print * {display: none !important;}
}
html.print body {background-color: var(--background_body_print)!important;}
html.print body table {color: var(--text_print)!important;}
html.print body {color: var(--text_print)!important;}
html.print body a {color: var(--text_print)}
html.print input[type="checkbox"], html.print input[type="radio"] {border: 1px solid var(--text_print); outline: none;}

/**********************************************
******************** global *******************
**********************************************/

body {font-family: RobotoCondensed-Light; background: var(--background); color: var(--text_dark);}
h1,h2,h3,h4,h5,h6 {font-family: RobotoCondensed-Regular; padding-bottom: 8px; margin: 0;}
h3 {font-size: 18px;}
th {font-family: RobotoCondensed-Regular; font-weight: normal;}
input[type="checkbox"], input[type="radio"] {
	appearance:none;-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;
	width: 20px; height: 20px;
	border: 1px solid var(--text_dark); outline: none;
}
a {color: var(--text_dark);}
a:hover {text-decoration: none; color: var(--text_dark);}
p {margin-bottom: 8px;}
span.strong {font-family: Roboto-Regular;}
.badge {padding: 4px 8px; font-size: 1rem;}
.container-fluid {padding-top: 50px; padding-bottom: 20px; padding-right: 25px; padding-left: 25px;}
.col-sm-6 {padding: 0;}
.space {padding: 20px 10px 0px 10px;}
hr {border: none; border-top: 1px solid var(--gridline);}
.close {text-shadow: none; color: var(--text_dark);}
.close:hover {color: var(--text_dark);}
.custom-select {background-color: var(--input_bg); color: var(--text_dark)!important; border: 1px solid var(--border);}
.input-group-text {background-color: var(--input_bg); color: var(--text_dark)!important; border: 1px solid var(--border);}
.form-group {margin-bottom: 0;}
.text-warning {color: #ff835d!important;}
div.hidden {display:none;}
.modal-dialog {max-width: 600px; margin: 4rem auto;}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {padding-left:8px; padding-right: 8px;}
ul.pagination {margin: 0 auto;}
.nrpages {padding-top: 8px;}
.no-left-padding {padding-left: 0!important;}
.no-right-padding {padding-right: 0!important;}
.no-left-border {border-left: none!important;}
.no-right-border {border-right: none!important;}
.no-top-border {border-top: none!important;}
.no-bottom-border {border-bottom: none!important;}
.table-striped tbody tr:nth-of-type(odd) {background-color: rgba(0,0,0,.03);}

/**********************************************
****************** page-link ******************
**********************************************/

.page-item {font-family: RobotoCondensed-Regular;}
.page-item.active .page-link {background-color: var(--color1);}
.page-link {padding: 8px 16px; background-color: var(--input_bg); color: var(--text_dark)!important; border-color: var(--gridline)!important;}
.page-link:hover {color: var(--color1)!important; background-color: var(--color1)!important; filter: brightness(120%); color: rgba(255, 255, 255, 0.7)!important; border-color: var(--gridline)!important;}
.page-item.active .page-link {border-color: var(--gridline)!important; color: rgba(255, 255, 255, 0.7)!important;}
/* .page-link, .page-link:focus {box-shadow: none!important; border: none!important;} */

/**********************************************
******************** years ********************
**********************************************/

li.years {padding: 4px 2px!important;}
li.years a {padding: 0 4px;}

/**********************************************
******************* progress ******************
**********************************************/

.progress, .progress-bar {height: 10px;}
.progress {background-color: var(--card_header_bg)!important;}
.progress-bar {background-color: var(--progressbar)!important;}

/**********************************************
********************* table *******************
**********************************************/

/* table th, table td {border-top: 0px!important;} */
/* .table thead th {border-bottom: 2px solid var(--color1);} */
.table thead th {box-shadow: inset 0 -2px 0 var(--color1); height: 40px; padding-bottom: 6px; top: 0; position: sticky; background: var(--card_header_bg); border-bottom: none; z-index: 999;}
.table-bordered {border: 1px solid var(--gridline)!important;}
.table-bordered td {border: 1px solid var(--gridline);}
.table td, .table th {border-bottom: 1px solid var(--gridline); border-top: 1px solid var(--gridline);}
.table {margin-bottom: 4px; color: var(--text_dark);}
.table-sm td, .table-sm th {padding: 4px;}
.table-sm td {vertical-align: middle;}
.table-hover tbody tr:hover {color: var(--text_dark)!important; background-color: var(--card_header_bg)!important;}
html.print table td {border-bottom: none;}
.no_left_border {border-left: 1px solid  transparent !important;}
.no_right_border {border-right: 1px solid  transparent !important;}
.no_top_border {border-top: 1px solid  transparent !important;}
.no_bottom_border {border-bottom: 1px solid  transparent !important;}

/**********************************************
********************* card ********************
**********************************************/

.card {border: 1px solid var(--border); /*box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);*/}
.card-header {overflow: visible; background-color: var(--card_header_bg); /*border-bottom: var(--card_header_border_width) solid var(--card_header_border_color);*/ font-family: RobotoCondensed-Regular; padding: 8px 16px;}
.card-header p {
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.card-body {padding: 10px; background-color: var(--card_body_bg)}
.card-footer {font-family: RobotoCondensed-Regular;}
.card-footer {background-color: var(--card_header_bg); border-top: 1px solid var(--border);}
.card {background-color: var(--card_body_bg);}
.card_select {overflow: hidden;}
.card_select div.card-body {background-color: var(--card_header_bg)!important;}

/**********************************************
********************* tabs ********************
**********************************************/

.nav-tabs {border: none;}
.nav {padding-bottom: 1px;}
.nav-tabs .active {
    border-left: 1px solid var(--color1)!important;
    border-top: 1px solid var(--color1)!important;
    border-right: 3px solid var(--color1)!important;
    border-bottom: 3px solid var(--color1)!important;
    color: #fff!important;
    background-color: var(--color1)!important;
}
.nav-tabs .nav-link {margin-right: 3px; background-color: var(--card_body_bg); border-bottom: 1px solid var(--background);}
.nav-tabs .last {margin-right: 0px;}
.nav-tabs .nav-link {border-top-left-radius: 4px; border-top-right-radius: 4px; color: var(--text_dark);}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {border: 1px solid transparent; background-color: var(--color1); color: rgba(255, 255, 255, 0.7);}
.tabcontent {background-color: var(--input_bg_light); height: calc(100vh - 210px);	min-height: 600px; overflow: auto;}

/**********************************************
******************** modal ********************
**********************************************/

.modal-body {background-color: var(--card_body_bg);}
.modal-header {background-color: var(--card_header_bg); min-height: 30px; border-bottom: none; border-radius: 0;}
.modal-footer {background-color: var(--modal_footer); min-height: 30px; border-top: none;}
.scroll_list {overflow: auto; height: calc(100vh - 590px); min-height: 248px;}
.modal-body label{margin-bottom: 0; line-height: 32px;}

/**********************************************
****************** dropdown *******************
**********************************************/

div.dropdown {background-color: var(--menu_bg);}
div.dropdown ul {padding: 10px;}
div.dropdown ul li {padding: 2px 8px;}
div.dropdown ul li:hover {background-color: var(--color1);}
div.dropdown ul li:hover a {color: rgba(255, 255, 255, 0.7);}

.form-control, .form-control:focus {background-color: var(--input_bg)!important; border: 1px solid var(--border); color: var(--text_dark); box-shadow: none;}
.form-control:focus-visible {text-shadow: none;}

/**********************************************
******************* buttons *******************
**********************************************/

.btn {padding: 0.325rem 1rem; font-family: RobotoCondensed-Regular; font-size: 1rem;}
i.fas, i.far {margin-right: 6px;}
.btn-info {background-color: var(--button); border-color: var(--button); color: rgba(255, 255, 255, 0.7);}
.btn-info:hover {background-color: var(--button); filter: brightness(120%); border-color:  var(--button);}
.btn-primary {color: var(--button_color); background-image: linear-gradient(var(--angle), var(--button1), var(--button2)); border-color: var(--button_border);}
.btn-primary:hover {filter: brightness(90%); border-color:  var(--button_border); color: var(--button_color);}
.btn.focus, .btn:focus {outline: 0; box-shadow: none; background-image: linear-gradient(var(--angle), var(--button1), var(--button2)); color: var(--button_color); border-color: var(--button_border);}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {color: var(--button_color); background-image: linear-gradient(var(--angle), var(--button1), var(--button2)); filter: brightness(90%); border-color: var(--gridline)!important;}

/**********************************************
***************** radio button ****************
**********************************************/

.radioBtn {font-family: RobotoCondensed-Regular;}
.radioBtn .notActive {color: var(--text_dark); background-color: var(--input_bg); color: var(--text_dark); border: 1px solid var(--gridline)!important;}
.radioBtn .notActive {color: #9e9e9e;}

/**********************************************
*************** tiny mce editor ***************
**********************************************/
.tox-tinymce {border: 1px solid var(--border)!important; border-radius: 4px!important;}
.tox .tox-promotion {display: none!important;}
.tox .tox-statusbar {display: none!important;}
.tox .tox-menubar + .tox-toolbar, .tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {border-top: 1px solid var(--border);}
.tox .tox-menubar+.tox-toolbar-overlord {border-top: none!important; margin-top: 0!important; padding-bottom: 0!important; padding-top: 0!important;}
.tox .tox-menubar {background: var(--input_bg)!important;}
.tox .tox-edit-area__iframe {background-color: var(--input_bg)!important; background: var(--input_bg)!important;} 
.tox:not(.tox-tinymce-inline) .tox-editor-header {background-color: var(--input_bg)!important; box-shadow: none!important;}
.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary {background-color: var(--input_bg)!important; background: var(--input_bg)!important;}
.tox .tox-menubar+.tox-toolbar-overlord {border-top: none!important;}
.tox .tox-mbtn {background: none!important;}
.tox button span {color: var(--text_dark)!important;}

/**********************************************
****************** highcharts *****************
**********************************************/

.highcharts-label, .highcharts-data-label, .highcharts-data-label-color-1, .highcharts-data-label-hidden {font-family: RobotoCondensed-Regular!important;}
.highcharts-axis-labels {font-family: RobotoCondensed-Regular!important;}
.highcharts-background {fill: var(--card_body_bg)}
.highcharts-text-outline {stroke: var(--card_body_bg)}
.highcharts-point {stroke: var(--card_body_bg);}
.highcharts-yaxis-grid .highcharts-grid-line {opacity: 1; stroke: var(--gridline);}
.highcharts-xaxis path{opacity: 1; stroke: var(--gridline);}
.highcharts-label text, .highcharts-data-label text, .highcharts-data-label-color-0 text {color: var(--text_dark)!important; fill: var(--text_dark)!important; font-family: RobotoCondensed-Regular!important;}
.highcharts-legend-item text {color: var(--text_dark)!important; fill: var(--text_dark)!important; font-family: RobotoCondensed-Regular!important;}

/**********************************************
******************** modal ********************
**********************************************/

.modal-content {border-radius: 8px; background: transparent; border: none; overflow: hidden;}
.modal-header {border: none;}
.modal-body { border: none;}
.modal-header .close {padding: 6px; margin: 0 6px 0 0;}
html.index div#myModal .modal-header {padding: 6px}
html.index div#myModal h4.modal-title {margin: 4px 0 0 20px; text-transform: uppercase;	width: 100%; padding: 0; line-height: 1;}
html.index div#myModal input {margin: 20px 0; padding: 0 10px;}
html.index div#myModal button {padding: 6px 12px; margin-bottom: 20px;}
html.index div.user_login_languages {width: 200px; text-align: right; margin-right: 20px;}
#load {width:100%; height:100%; position:fixed; z-index:9999; background:url("/pictures/loading1.gif") no-repeat center center rgba(0,0,0,0.0);}

/**********************************************
********************* menu ********************
**********************************************/

.dropdown-menu {margin-top: 7px; border-radius: 0 0 3px 3px; background-color: var(--menu_bg);}
.dropdown-item.active, .dropdown-item:active {background-color: var(--color1);}
.dropdown-item:focus, .dropdown-item:hover {color: rgba(255, 255, 255, 0.7); background-color: var(--color1); outline:  none;}
.dropdown-toggle:after {margin-top: 0.5em; margin-left: 0.3em;}
ul.dropdown-menu .dropdown-toggle:after { transform: rotate(-90deg); position: absolute; top: 5px;}
.dropdown-menu .dropdown-menu {margin-left:0; margin-right: 0;}
.dropdown-menu li {position: relative;}
a.nav-link:focus {outline:  none;}
.nav-item .submenu {display: none; position: absolute; left:100%; top:-7px;}
.nav-item .submenu-left {right:100%; left:auto;}
.dropdown-menu > li:hover {background-color: #f1f1f1}
.dropdown-menu > li:hover > .submenu {display: block;}
.item0 { margin-left: 10px;}

/* search form */
.search-phone {display: none;}
.search-desktop {
	float: right; margin-right: 6px; padding-top: 0px; padding-bottom: 0px;
	width: 20%; height: 44px; background: transparent!important;
}
.search-desktop input.form-control {
	border-radius: 0px 0 0 0px; border-color: transparent; height: 32px;
	margin-top: 0; background: rgba(255,255,255, 0.1)!important;
	color: var(--text_light);
	font-size: 1em;
}

/* logout */
a.logout{margin-right: 8px;	float: right;}
img.logout {height: 18px;}

/* languages */
.navbar li.languages {padding-left: 4px;}
img.logout {margin-top: -4px;}
img.flag {margin-top: -4px; margin-bottom: 2px;}
.droplanguages {height: 0;}
li.droplanguages {list-style-type: none;}

/**********************************************
**************** navbar desktop ***************
**********************************************/

.navbar-dark .navbar-nav .nav-link, .navbar-phone a {color: #bbb;}
.navbar hr {margin-top: 0; margin-bottom: 0; border-top: 1px solid var(--menu_separator);}
.navbar {padding: 0px 0px; display: block; z-index: 9999; /* border-bottom: 16px solid var(--background); */}
.navbar-nav {float: left; padding: 0;}
.navbar-brand {background-color: rgba(255, 255, 255, 0.15); padding-top: 10px; padding-bottom: 0px; padding-left: 8px; padding-right: 8px;font-size: 18px; float: left; margin-right: 0px; height: 44px;}
.navbar-brand:hover {background-color:  rgba(255, 255, 255, 0.1)}
.nav-link {padding: 4px 2px 0;}
.bg-dark {background-color: var(--navbar)!important;}
a.nav-link {font-family: RobotoCondensed-Regular;}

/**********************************************
***************** navbar phone ****************
**********************************************/

.navbar-phone {display: none;}
.navbar-phone .nav-link {padding: 8px 10px 0; float: right; margin-left: 10px; margin-top: 6px; background: rgba(255, 255, 255, 0.15); border-radius: 0.25rem;}
.dropdown-phone {top: 2px;}
.fa-user {vertical-align: top; margin-top: 1px;}
.fa-right-from-bracket {vertical-align: top; margin-top: 2px;}
.fa-circle, .fa-moon {color: #bbb;}
ul.navbar-nav a.btn-primary {background-image: linear-gradient(var(--angle), #444444, #525252)!important; border: none!important; padding: 6px 10px;}
ul.navbar-nav .switch-light {margin-right: 8px;}
nav.sidebar ul.navbar-switch {padding-left: 8px;}
a.navbar-phone {background-color: transparent!important}

.navbar-phone ul {list-style-type: none; margin: 0; padding: 0;}
.navbar-phone ul li {float: right; padding-top: 6px;}
.navbar-phone a.flag {margin-left: 10px; margin-right: 10px; }
.navbar-phone li.switch-theme { margin-top: 6px; display: block; float: right; padding: 0;}
.navbar-phone li.switch-theme .input-group {height: 32px; padding: 0;}
.navbar-phone li.switch-theme .input-group i {padding-top: 5px;}
.navbar-phone li.switch-theme a {background-image: linear-gradient(var(--angle), #444444, #525252)!important; border: none!important; padding: 4px 12px;
}

/**********************************************
******************** sidebar ******************
**********************************************/

.open-menu {
    width: 32px;
    height: 44px;;
	margin: 0px;
    padding: 12px 0px 0px 12px;
	display: none;
	float: left;
    /*background: rgba(255,255,255, 0.15);*/
    border-radius: 0;
}
.open-menu:hover {background: rgba(255,255,255, 0.1);}
.open-menu:focus {background: rgba(255,255,255, 0.1); border-color: transparent;}
.sidebar {
	width: 250px;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: -250px;
	z-index: 9999;
	background: var(--navbar);
	background: rgb(47,47,47,0.95);
	color: var(--text_light);
	transition: all .3s;
	/* box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.5); */
	text-align: left;
	overflow: auto;
}
.sidebar.active {left: 0;}
.dismiss {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 14px;
	right:16px;
	transition: all .3s;
	border-radius: 4px;
	text-align: center;
	line-height: 35px;
	cursor: pointer;
	float: right;
}
.dismiss img {width: 16px; height: 16px;}
.dismiss:hover, .dismiss:focus {color: var(--text_light);}
.sidebar .logo {padding: 14px 0px 0px 8px;	transition: all .3s; background: var(--navbar);}
.sidebar .logo a {background: var(--color1);}
.sidebar a[data-toggle="collapse"] {position: relative;}
.sidebar .dropdown-toggle::after {display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.sidebar a.nav-link {color: rgba(255, 255, 255, 0.7); padding: 8px 0px 0 8px;}
.sidebar ul.dropdown-menu {min-width: 250px; margin-left: 0; list-style-type: none;}
.sidebar li.nav-item {list-style-type: none;}
.sidebar li.nav-item ul {transform: translate3d(0px, 32px, 0px)!important; border-radius: 0;}

/* html print - sidebar */
/* html.print .sidebar {left: 0; position: fixed; top: 0;} */

/**********************************************
****************** dashboard ******************
**********************************************/

html.dashboard div.container-fluid {padding-top: 0px;}
div.first_title {margin: 70px 20px 0; color: rgba(255, 255, 255, 0.7); border: none;}
div.second_title {margin: 0px 20px 0; color: rgba(255, 255, 255, 0.7); border: none;}
div.first_title .card-header {background-color: var(--color1); /* border: 1px solid var(--border_dark); */ border-radius: calc(.25rem - 1px) calc(.25rem - 1px); box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);}
div.second_title .card-header {background-color: var(--color1); /* border: 1px solid var(--border_dark); */ border-radius: calc(.25rem - 1px) calc(.25rem - 1px); box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.06);}
html.dashboard div.row1 {min-height: 160px;}
html.dashboard div.row2 {min-height: 240px;}
h2.difference {padding-top: 10px;}
html.dashboard div.row1 button {margin-top: 6px;}
html.dashboard div.today {padding: 4px;	background-color: var(--color1); text-align: center; color: rgba(255, 255, 255, 0.7); margin-bottom: 10px;}
html.dashboard div.details {width: 78%; float: left;}
html.dashboard div.actions {width: 18%; float: right;}
button.client_link {padding: 0; margin: 0; background: none; border: none; float: right;}
img.client_link {height: 16px; margin-right: 10px;}
html.dashboard .same_height {height: 460px;}
html.dashboard #numeric_values_1 td {font-size: 0.9em;}
div.mini_stat {min-height: 170px;}
div.percent h2 {font-size: 3rem; padding-bottom: 0;}
div.percent p {padding-top: 0;}

/**********************************************
*************** cashflow sales ****************
**********************************************/

html.cashflow_sales .same_height {height: 460px;}
html.cashflow_sales #numeric_values_1 td {font-size: 0.9em;}
html.cashflow_sales div.row2 {min-height: 240px;}

/**********************************************
************** cashflow income ****************
**********************************************/

html.cashflow_income .same_height {height: calc(100vh - 440px);	min-height: 400px;}
html.cashflow_income div.container_svg {overflow: visible; height: calc(100vh - 500px);	min-height: 340px;}
html.cashflow_income div.highcharts-container {overflow: visible;}
html.cashflow_income .same_height  div.card-body svg {height: calc(100vh - 480px); overflow: visible; min-height: 340px;}

/**********************************************
***************** receivable ******************
**********************************************/

html.receivables .card_receivables {max-height: calc(100vh - 220px);}
div.container_receivable p {text-align: center;	font-size: 26px; margin-bottom: 0; font-family: RobotoCondensed-Regular;}
div.expired p {color: #DD0032;}
div.scroll_receivable {overflow: auto; max-height: calc(100vh - 330px);}
table.receivable td {vertical-align: middle;}

/**********************************************
******************** debts ********************
**********************************************/

html.debts .card_debts {max-height: calc(100vh - 200px);}
div.container_debts p {text-align: center; font-size: 26px;	margin-bottom: 0; font-family: RobotoCondensed-Regular;}
div.scroll_debts {overflow: auto; max-height: calc(100vh - 326px);}

/**********************************************
******************* margin ********************
**********************************************/

/**********************************************
************* cashflow expenses ***************
**********************************************/

html.expenses #container1,
html.expenses .expenses_table {min-height: 840px;}
html.expenses .total_expenses_header,
html.expenses .total_margin_header {font-size: 1.2em; margin-top: 6px;}
html.expenses .expenses_table .card-header button {margin-right: 10px;}
html.expenses label {margin: 0; margin-right: 10px; vertical-align: -webkit-baseline-middle;}
html.expenses select {background-color: var(--card_header_bg)!important;}
html.expenses .btn-submit {height: 34px; margin-left: 20px;}
span.red {color: #db2727;}
html.expenses .container-summary {padding: 0 5px;}
html.expenses .summary p {text-align: center; font-size: 26px; margin-bottom: 0; font-family: RobotoCondensed-Regular;}
html.expenses .colored-red {background-color: rgba(222, 107, 107, 0.9);}
html.expenses .colored-red p {color: #ffffff;}
html.expenses .progress-bar-red {background-color: #db2727!important;}

/**********************************************
******* cashflow list expense account *********
**********************************************/

html.list_expense_account div.scroll_expenses {overflow: auto; height: calc(100vh - 220px);	min-height: 550px;}
html.list_expense_account label {margin: 0; margin-right: 10px; vertical-align: -webkit-baseline-middle;}
html.list_expense_account select {background-color: var(--card_header_bg)!important;}
html.list_expense_account .btn-submit {height: 34px; margin-left: 20px;}

/**********************************************
******* cashflow show expense invoice *********
**********************************************/

html.list_expense_invoice tr.total td {border-top: 2px solid var(--color1);}
html.list_expense_invoice .seller_container {float: left; width: 50%; padding: 20px;}
html.list_expense_invoice .buyer_container {float: left; width: 50%; padding: 20px;}
html.list_expense_invoice div.info {
    float: left;
    border-top: 2px solid var(--color1);
    border-bottom: 2px solid var(--color1);
    padding: 10px;
}
html.list_expense_invoice span.ammount {float: right;}


/**********************************************
*************** product sales *****************
**********************************************/

html.products_sales  div.card_top12 .card-header {padding: 6px 10px; margin-bottom: 0px;}
html.products_sales  div.container_top {padding: 10px;}
html.products_sales  .card-header p {margin: 0;}
html.products_sales  div.container_top .picture {float: left; margin-right: 20px; margin-bottom: 10px;}
html.products_sales div.position {margin-top: 40px;	font-size: 26px; font-family: RobotoCondensed-Regular;}
html.products_sales  div.container_top .quantity {font-size: 34px; text-align: left; font-family: RobotoCondensed-Regular;}
html.products_sales div.top12 {float: left;}
html.products_sales div.scroll_top_products {overflow: auto; max-height: calc(100vh - 190px);}

/**********************************************
************** product details ****************
**********************************************/

html.product_details div.container_svg {overflow: visible; min-height: 550px;}
html.product_details div.col-sm-4 {padding-right: 0;}
html.product_details div.col-sm-8 {padding-left: 0;}
html.product_details div.col-sm-6 {min-height: 500px;}
html.product_details div.product_details_card {min-height: 620px;}
html.product_details div.same_height {min-height: 620px;}
html.product_details div.highcharts-container {overflow: visible;}
html.product_details .same_height div.card-body svg {overflow: visible;}
html.product_details div#container_details_1  {height: 100%;}
html.product_details div.picture {
    /* height: calc(44vh);  */
    margin: 10px 10px 0 20px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
}
html.product_details div.image_container {display: flex; justify-content: center; align-items: center; margin-top: 20px;}
html.product_details div.picture img {float: left; height: 100%; padding: 0px; cursor: pointer;}
html.product_details div#container_details_1 {margin-top: 0px; padding-left: 0; padding-right: 20px;}
html.product_details button.memo {float: right; background-color: #ffc869; padding: 3px 8px;}
/* html.product_details button.edit_picture {float: right; margin-right: 10px; padding: 3px 8px;} */
html.product_details div.edit_picture {width: 100%; display: flex; justify-content: center; align-items: center;}
html.product_details button.edit_picture {margin: 20px auto 0; padding: 3px 8px;}
html.product_details h1 {
    padding: 5px 0 0 0;
    font-size: 22px;
    float: left;
    width: 560px;
    white-space: nowrap;
    text-overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
}
html.product_details div#container_details_1 h3 {margin: 0;	padding: 0;}
html.product_details div.container_details p {margin-top: 0; margin-bottom: 0;}
html.product_details .container_details .card-header,
html.product_details .container_details .card-footer {padding: 4px;}
html.product_details .container_details .card-header p,
html.product_details .container_details .card-footer p  {margin: 0;}
html.product_details .container_details .card-body h3 {margin: 0px;}
html.product_details .container_details .card-body {padding: 4px;}
html.product_details td.delta span {float: right; margin-left: 6px; margin-top: 4px;}
html.product_details table td {padding: 0.38em;}
html.product_details .container-fluid {padding-bottom: 0px;}
html.product_details .top-buyers {padding-top: 0px; padding-bottom: 20px;}

html.product_details .badge {font-family: RobotoCondensed-Regular;}

html.product_details button.price,
html.product_details button.barcode,
html.product_details button.customs_code,
html.product_details button.pricelist,
html.product_details button.category,
html.product_details button.box_id,
html.product_details button.net_weight {min-width: 100px; padding: 0px 20px;}
html.product_details .badge-price-exvat, html.product_details .badge-price-incvat {padding: 5px 8px;}
html.product_details .badge-price-exvat:hover,
html.product_details .badge-price-incvat:hover,
html.product_details .badge-pricelist:hover {cursor: pointer;}

html.product_details .badge-barcode {padding: 5px 8px;}
html.product_details .badge-barcode:hover {cursor: pointer;}

html.product_details .badge-category {padding: 5px 8px;}
html.product_details .badge-category:hover {cursor: pointer;}

html.product_details .badge-box_id {padding: 5px 8px;}
html.product_details .badge-box_id:hover {cursor: pointer;}

html.product_details .badge-net_weight {padding: 5px 8px;}
html.product_details .badge-net_weight:hover {cursor: pointer;}

html.product_details #myMemo .modal-content {background-color: #ffce89;}
html.product_details .modal-header {border-bottom: none; padding: 0.5rem 1rem 0;}
html.product_details .modal button.save, html.product_details .modal button.cancel {float: right; margin-top: 20px; margin-left: 10px;}
html.product_details .modal input, html.product_details .modal select, html.product_details .modal .input-group {margin-bottom: 1rem;}

html.product_details .modal_picture {text-align: center;}
/* html.product_details .modal_picture img {height: calc(84vh);} */

/* #fileToUpload {display: none;} */
/* ::-webkit-file-upload-button {margin-left: 20px; margin-top: 6px; margin-right: 10px; border-radius: 3px; padding: 4px 10px; border: none;} */
#fileToUpload {margin-left: 20px; border: none;}

::-webkit-file-upload-button {
    font-family: RobotoCondensed-Regular;
    color: var(--button_color);
    background-image: linear-gradient(var(--angle), var(--button1), var(--button2));
    border-color: var(--button_border);
    margin-left: 20px;
    margin-top: 6px;
    margin-right: 10px;
    border-radius: 3px;
    padding: 4px 10px;
    border: none;
    outline: none;
}
::-webkit-file-upload-button:hover {filter: brightness(90%); border-color:  var(--button_border); color: var(--button_color);}
html.product_details span.discontinued {margin-left: 20px; margin-right: 20px; font-size: 0.8em;}

html.product_details button.stockinfo {padding: 4px 8px;}

html.products_presentation div.vanzari {
    margin-top: 10px;
    padding: 6px 20px; 
    background-color: #F15D4B; 
    color: #fff; 
    border-radius: 20px; 
    float: left; 
    width: 174px; 
    height: 36px;
}

html.products_presentation div.vanzari p{ font-family: RobotoCondensed-Regular;}

/**********************************************
************* product manager *****************
**********************************************/

html.product_manager div.products_table {overflow: auto; height: calc(100vh - 200px); min-height: 360px;}
html.product_manager div.products_table th {border: none; height: 40px; padding-bottom: 6px;}
html.product_manager .card-header {font-size: 22px;}
html.product_manager .save_product {padding: 10px;}
html.product_manager .save_product i {margin: 0}

/**********************************************
********** product purchase order *************
**********************************************/

html.purchase_order .card_stock {height: calc(100vh - 100px); min-height: 500px;}
html.purchase_order div.scroll_stock {overflow: auto; height: calc(100vh - 240px);}
html.purchase_order .mytooltip {display: inline; position: relative; z-index: 999; cursor: default;}
html.purchase_order .mytooltip .tooltip-content {
    position: absolute;
    z-index: 9999;
    left: 50%;
    margin: 0 0 20px 30px;
    bottom: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}
html.purchase_order .mytooltip .tooltip-content img {
    height: 160px;
    padding: 10px;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
}
html.purchase_order .mytooltip:hover .tooltip-content {pointer-events: auto; opacity: 1;}
html.purchase_order .mytooltip:hover .tooltip-content2 {opacity: 1; font-size: 18px}
html.purchase_order .card-header {font-size: 22px;}
html.purchase_order .card-body input.fixedheight {border: 1px solid var(--gridline); height: calc(1em + 11px);}
html.purchase_order .card-header .btn {margin-top: 1px; margin-right: 8px;}
html.purchase_order span.badge-secondary {margin-left: 6px; background-color: var(--input_bg_light); color: var(--text_dark); font-weight: 300;}
html.purchase_order .modal-dialog {max-width: 800px;}
html.purchase_order .modal .input-group-text {min-width: 80px;}
html.purchase_order .modal-footer button {float: right; padding: 4px 20px;}
html.purchase_order .card-body i.fa-calculator {margin: 0;}
html.purchase_order .modal-footer button {float: right; padding: 4px 20px;}
html.purchase_order .card-header .btn {min-width: 120px;}
html.purchase_order .card-header .btn i,
html.purchase_order .modal .btn i {margin-right: 4px;}
html.purchase_order  span.badge-large {min-width: 70px;}
html.purchase_order  .card-header .sent_orders {min-width: 180px; white-space: nowrap;}
html.purchase_order  .card-body .calculate_individual {padding: 0.2rem 0.6rem;}
html.purchase_order input[type=checkbox] {appearance:none;-webkit-appearance: none; -moz-appearance: none; border: 1px solid #444; width: 32px;}
html.purchase_order input[type=checkbox]:checked {background-color: var(--color1);}
html.purchase_order input[type=checkbox]:checked:after {
    margin-left: 10px;
    margin-top: 2px;
    width: 10px;
    height: 16px;
    border: solid var(--color1);
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}
html.purchase_order button.memo {
    background-color: #ffce89;
    width: 16px;
    height: 16px;
    border-radius: 0;
    border: none;
    padding: 0;
    margin-top: -4px;}
html.purchase_order span.memotooltip {background-color: #ffce89; padding: 6px 10px;}
html.purchase_order .modal-body {height: 60vh; overflow: auto;}

/**********************************************
************ product presentation *************
**********************************************/

page[size="A4"][layout="presentation"] {
	color: var(--text_print);
    background: #fff;
    padding: 0mm 10mm 10mm 20mm;
	width: 297mm;
	display: block;
	margin: 0 auto;
}

html.products_presentation button#home {width: 100%;}
html.products_presentation button#home i {margin-right: 8px;}
html.products_presentation .row-select {margin-left: 0px; width: 240px!important;}
html.products_presentation .row-select .col-select {padding: 10px; float: left;}
html.products_presentation .row-select p.select{color: var(--text_light)!important; padding-top: 6px;}
html.products_presentation .space {padding: 0;}
html.products_presentation .gap {padding: 20px 0 0 0; margin: 0;}
html.products_presentation .container-fluid {padding: 0; width: 100% !important;}
html.products_presentation .row {margin-right: 0; width: 100%;}
html.products_presentation .card {border: none; box-shadow: none; width: 100% !important; background: #fff;}
html.products_presentation .product_container_top {min-height: 390mm; width: 100% !important; padding: 5mm 5mm 0 10mm;}
html.products_presentation table.product, html.products_presentation table.page_header {width: 100% !important;}
html.products_presentation table.product tbody, html.products_presentation table.page_header tbody {width: 100% !important;}
html.products_presentation span.position {
    font-size: 0.9em;
    background-color: #ddd;
    padding: 0px;
    border-radius: 20px;
    margin-right: 8px;
    line-height: 30px;
    text-align: center;
    min-width: 30px;
    float:left;
    margin-top: 10px;
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
    font-family: RobotoCondensed-Regular;
}
html.products_presentation .product_name {font-size: 22px; padding: 0; float: left; margin-left: 8px; margin-top: 14px;}
span.product_code {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
    float: left; margin-top: 8px; padding: 3px 6px; background-color: #F15D4B; color: #fff; border-radius: 4px; text-align: center; width: 80px; font-size: 18px; font-family: RobotoCondensed-Regular}
html.products_presentation .product_name_hr {border: none; border-bottom: 2px solid  #F15D4B; padding: 0; margin: 0 0 30px 0; height: 0}
html.products_presentation .product_bottom_hr {border: none; border-bottom: 1px solid  #ddd; margin-bottom: 2px;}
html.products_presentation .product_description {max-width: 740px;}
html.products_presentation .product_description p {font-size: 15px;}
html.products_presentation .product_image {float: right; max-height: 410px; max-width: 200px; padding-left: 20px;}
html.products_presentation td.product_image {vertical-align: top;}

html.products_presentation div.label {padding: 4px 10px; margin: 15px 0 0px 0; border: 1px solid #444; font-size: 15px}
html.products_presentation table.label td {border-bottom: 1px solid #444; padding: 4px;}
html.products_presentation table.label td.produs {font-family: RobotoCondensed-Regular; border-top: none; border-bottom: 6px solid #444; font-size: 20px; text-transform: uppercase;font-weight: 500;}
html.products_presentation table.label td.notif {border-bottom: 2px solid #444;}
html.products_presentation table.label td.ingredient {font-size:18px; border-bottom: 4px solid #444;}
html.products_presentation table.label td.alte {border-top: 4px solid #444; border-bottom: 2px solid #444;}
html.products_presentation table.label tr:hover {cursor: default;	background-color: #eeeeee; transition: all 0.25s ease-in-out;}
html.products_presentation table.label td.continut {border-bottom: none;}
html.products_presentation p.vitaking {font-size: 14px; padding: 0; margin: 0; text-align: center;}
html.products_presentation p.vitaking span.dot {
    background-color: #444;
    border-radius: 50%; display: inline-block; margin: 0px 22px 1px 22px; padding: 4px;
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
}
html.products_presentation div.price {padding: 10px 10px 2px; margin: 15px 0 0px 0; border: 1px solid #444; max-width: 740px;}
html.products_presentation div.price span {font-family: RobotoCondensed-Regular}
html.products_presentation .topofpage {position:fixed; top: 0px; left: 0; padding: 16px 16px; background-color: rgba(255, 255, 255, 0.1);}
html.products_presentation .topofpage .radioBtn {width: 200px; margin-bottom: 10px;}
html.products_presentation .highcharts-background {fill: #fff!important;}
div.chart {margin-top: 15px; padding: 0px; border: 1px solid #756B68; float: left; width: 100%; display: inline!important;}


/**********************************************
********* product presentation custom *********
**********************************************/

page[size="A4"][layout="presentation_custom"] {
	color: var(--text_print);
	/* background: var(--background_print); */
    background: #fff;
    padding: 0mm 5mm 0mm 20mm;
	width: 297mm;
	display: block;
	margin: 0 auto;
 	/* margin-bottom: 5mm; */
}

html.products_presentation h1,
html.products_presentation h2,
html.products_presentation h3,
html.products_presentation h4,
html.products_presentation h5 {font-size: 18px; padding-top: 10px; padding-bottom: 16px;}
html.products_presentation button,
html.products_presentation option {min-width: 80px; min-height: 38px;}
html.products_presentation .product_container_custom {min-height: 365mm; width: 100% !important; padding: 0 0mm 0 0mm;}
html.products_presentation .short_description,
html.products_presentation .full_description,
html.products_presentation .product_label {max-width: 740px;}
html.products_presentation .short_description p,
html.products_presentation .full_description p,
html.products_presentation .product_label p,
html.products_presentation li {font-size: 15px;}
html.products_presentation p.product_barcode {text-align: center; padding-top: 30px; padding-left: 20px; min-width: 210px; float: right;}
html.products_presentation page[size="A4"][layout="presentation_custom"] table.label td {padding: 4px;}

html.products_presentation .topofpage_custom select {min-width: 100px;}
html.products_presentation .topofpage_custom button {min-width: 100px;}

/**********************************************
************ product stock value **************
**********************************************/

html.products_stock .card-header {font-size: 22px;}
html.products_stock div.scroll_stock_value {overflow: auto;	height: calc(100vh - 210px); min-height: 360px;}
html.products_stock .flexible {text-align: center;}

html.products_stock .mytooltip {display: inline; position: relative; z-index: 999; cursor: default;}
html.products_stock .mytooltip .tooltip-content {
    position: absolute;
    z-index: 9999;
    left: 50%;
    margin: 0 0 20px 30px;
    bottom: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}
html.products_stock .mytooltip .tooltip-content img {
    height: 160px;
    padding: 10px;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
}
html.products_stock .mytooltip:hover .tooltip-content {pointer-events: auto; opacity: 1;}
html.products_stock .mytooltip:hover .tooltip-content2 {opacity: 1; font-size: 18px}

/**********************************************
************ product stock info **************
**********************************************/

html.products_stock_info .mytooltip {display: inline; position: relative; z-index: 999; cursor: default;}
html.products_stock_info .mytooltip .tooltip-content {
    position: absolute;
    z-index: 9999;
    left: 50%;
    margin: 0 0 20px 30px;
    bottom: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}
html.products_stock_info .mytooltip .tooltip-content img {
    height: 160px;
    padding: 10px;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
}
html.products_stock_info .mytooltip:hover .tooltip-content {pointer-events: auto; opacity: 1;}
html.products_stock_info .mytooltip:hover .tooltip-content2 {opacity: 1; font-size: 18px}

/**********************************************
***************** edit clientlist *************
**********************************************/

html.client_list div.scroll {overflow: auto; height: calc(100vh - 296px); min-height: 400px;}
html.client_list .card-footer {padding: 10px;}

/**********************************************
**************** client sales *****************
**********************************************/

html.clients_sales .same_height {height: 460px;}
html.clients_sales .scroll {overflow: auto;	height: 340px;}

/**********************************************
************** client details ****************
**********************************************/

html.client_details hr {margin-top: 8px; margin-bottom: 8px;}
html.client_details .card_details {height: 574px;}
html.client_details .card_details .card-body .row {height: 100%;}
html.client_details .card_details .card-body .row .client-map {padding: 0 15px 15px; max-height: 510px;}
html.client_details .card_details .card-body .row .client-data {padding: 0 15px 0px 15px;}
html.client_details .card_details .card-body .row .client-data .client-address {overflow: auto;	/*height: 160px;*/}
html.client_details .card_invoices {height: 574px;}
html.client_details .scroll {overflow: auto; height: 432px;}
html.client_details div.map {width: 100%; height:100%;}
html.client_details div.map iframe {width: 100%; height:100%;}
html.client_details p.hidden {display: none;}
html.client_details .badge {padding: 8px 8px; height: 32px; float: right; margin: 4px 8px 4px 0; color: rgba(255, 255, 255, 0.7); background-color: var(--badge-primary)}
html.client_details button.edit_client {padding: 2px 8px; height: 32px; margin: 4px 0px 0px 0; float:  right;}
html.client_details button.departments {padding: 2px 8px; height: 32px; margin: 4px 8px 0px 0px; float:  right;}
html.client_details p.note {max-height: 90px; overflow: auto; padding: 4px 8px; background-color: #ffdeb2; color: #55482C; border-radius:  4px;}
html.client_details textarea.note {background-color: #ffdeb2!important;}
html.client_details div.container_details table {border: 1px solid #ccc; margin: 10px;}
html.client_details div.container_details table td {border-top: 1px solid #ccc;}
html.client_details h1 {padding: 4px 0px 0px 0px; font-size: 20px;}
html.client_details h3 {font-size: 20px; margin: 0;	padding: 0;}
html.client_details .container_details .card-header,
html.client_details .container_details .card-footer {padding: 8px;}
html.client_details .container_details .card-header p,
html.client_details .container_details .card-footer p  {margin: 0;}
html.client_details .container_details .card-body h3 {margin: 0px;}
html.client_details span.title_invoices {padding-top: 10px;}
html.client_details button.btn-open-window {color: var(--text_dark); margin-top: 4px; margin-right: 0; margin-left: 4px; height: 36px; width: 30px; padding: 0;}
html.client_details .card_details  p {margin-bottom: 4px;}
input.client_details_filter {float: right; height: 36px; margin-top: 4px;}
a.debt_report, a.invoice_report {float: right; margin: 4px 20px 0 0;}
html.client_details tr.first td {border-top: none;}
html.client_details button.invoice_report {margin: 0; padding-left: 8px; padding-right: 8px;}
html.client_details button.invoice {margin: 0; padding: 2px 8px;}
html.client_details .fas {margin: 0;}
html.client_details .card-header p {margin: 0;}
html.client_details div.container_top .picture {float: left; margin-right: 20px; margin-bottom: 10px;}
html.client_details div.position {margin-top: 40px;	font-size: 26px; font-family: RobotoCondensed-Regular;}
html.client_details div.container_top .quantity {font-size: 34px; text-align: left; font-family: RobotoCondensed-Regular;}
html.client_details div.top12 {float: left;}
html.client_details .edit_client_modal .modal-dialog {max-width: 600px;}
html.client_details .scroll_departments {overflow: auto; max-height: 500px;}
html.client_details .edit_department {border: none; background: none;}
html.client_details #ModalDepartments .modal-dialog {min-width: 800px;}
html.client_details #ModalAddDepartment .modal-content,
html.client_details #ModalEditDepartment .modal-content {border: 1px solid var(--border); margin-top: 170px;}
html.client_details #ModalAddDepartment .modal-dialog .modal-body,
html.client_details #ModalEditDepartment .modal-dialog .modal-body {background-color: var(--gridline);}
html.client_details .save_department {float: right;}
html.client_details button.edit_notes {
    margin-top: 20px; 
    float: right; 
    background-image: none; 
    background-color: #ffdeb2; 
    border: 1px solid #d6bb96; 
    color: var(--text_dark);
}
html.client_details a.profit_report {margin-top: 20px;}
html.client_details .mytooltip:hover .tooltip-content {pointer-events: auto; opacity: 1;}
html.client_details button.save_notes {float: right; margin-top: 20px;}

/**********************************************
**************** profit report ****************
**********************************************/

html.client_profit_report h1 {font-size: 1.6em; padding-bottom: 0;}

/**********************************************
**************** edit client ******************
**********************************************/

div.edit_client_modal input, div.edit_client_modal textarea {margin-bottom: 6px;}
div.edit_client_modal button.save {float: right; min-width: 120px; margin-top: 10px;}

/**********************************************
**************** client income ****************
**********************************************/

html.clients_income .card_table {max-height: calc(100vh - 428px);}
html.clients_income .card_graph {min-height: calc(100vh - 432px);}
html.clients_income .scroll {overflow: auto; max-height: calc(100vh - 540px);}
table.income_by_cliets td {vertical-align: middle;}

/**********************************************
************** client fidelity ****************
**********************************************/

html.clients_fidelity .same_height {height: 460px;}
html.clients_fidelity .scroll {overflow: auto; height: 310px;}

/**********************************************
****************** history ********************
**********************************************/

div.card_history {min-height: 500px;}
html.history div.today {padding: 4px; background-color: var(--color1); text-align: center; color: rgba(255, 255, 255, 0.7); margin-bottom: 10px; border: 1px solid var(--border_dark);}
div.card_history div.card {margin-bottom: 6px;}
div.card_history div.card-header button {float: right;}
div#accordion div.card-header {padding: 0; background: var(--card_body_bg); border-bottom: 0px;}
div#accordion div.card-header .table {margin-bottom: 0;}
.datepicker1 {width: 48%; float: left; margin-bottom: 20px;}
.datepicker2 {width: 48%; float: right;	margin-bottom: 20px;}
#myModalHistory select {margin-bottom: 20px;}
#myModalHistory .modal-header {padding: 6px;}
#myModalHistory h4.modal-title {text-align: center;	width: 100%; padding: 0;}
#myModalHistory button.save {margin-top: 20px; float: right;}
#myModalHistory label,
#myModalEditHistory label {margin-bottom: 0px; float: left;}
#myModalHistory .label1,
#myModalEditHistory .label1 {margin-bottom: 4px;}
#myModalHistory .label2,
#myModalEditHistory .label2 {margin-bottom: 4px;}
div.details {width:90%;	float: left;}
html.client_details div.details {width:90%;	float: left;}
html.client_details div.actions {width:8%; float: right;}
div.actions img {float: right;}
img.trash {height: 16px; margin-left: 10px;}
img.edit {height: 16px;}
button.edit_action {padding: 0;	margin: 0; background: none; border: none; float: right;}
#myModalEditHistory select {margin-bottom: 20px; background-color: var(--input_bg_light);}
#myModalEditHistory .modal-header {padding: 6px;}
#myModalEditHistory h4.modal-title {text-align: center;	width: 100%; padding: 0;}
#myModalEditHistory button.save {margin-top: 20px; float: right;}
img.date {height: 20px;}

/**********************************************
************* qval average cart ***************
**********************************************/


/**********************************************
***************** invoices ********************
**********************************************/

html.invoices div.scroll_invoices {overflow: auto; height: calc(100vh - 284px);	min-height: 500px;}
html.invoices li.years a {padding: 2px 20px;}
html.invoices tr.link {cursor: pointer;}
html.invoices button.invoice {font-size: 1rem; white-space: nowrap; overflow: hidden;}
html.invoices button.invoice_report {font-size: 1rem; white-space: nowrap; overflow: hidden; padding-left: 10px; padding-right: 10px; min-height: 36px;}
html.invoices button.invoice_report i, html.invoices button.send_email i {margin: 0;}
html.invoices div.rowcount {float: right; width: 200px;}
html.invoices .card-footer {padding: 10px;}
html.invoices .card-footer ul{margin-bottom: 0;}
html.invoices .input-group {width: auto;}
html.invoices .modal-footer {justify-content:space-evenly;}
html.invoices .input-group-invoice {margin-right: 20px;}
html.invoices .input-group-cc {margin-right: 20px;}

/**********************************************
*************** invoice list ******************
**********************************************/

html.invoices h1.client-name {font-size: 1.5rem; padding: 6px  0 0 0; margin-left: 20px;}
i.fa-square-caret-left {font-size: 1.4rem; margin-left:0; padding-left: 0;}
.btn-back {height: 36px; width: 32px; margin-left: 0; margin-right: 20px; padding: 0;}

/**********************************************
************** invoice_report *****************
**********************************************/

html.invoice_report .scroll {overflow: auto; height: calc(100vh - 250px); min-height: 500px;}
html.invoice_report .product_table_header {
	border-bottom: 1px solid var(--text_dark);
	max-width: 100%;
    font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;
}
html.invoice_report .product_table {border: none;}
html.invoice_report span.total_number {padding: 6px 12px; border-radius: 3px; margin-left: 10px;}
html.invoice_report span.margin,
html.invoice_report span.percentage {background-color: var(--color1); color: rgba(255, 255, 255, 0.7);}

/**********************************************
************* detailed invoice ****************
**********************************************/

html.detailed_invoice body table { margin: 0; color: var(--text_print);}
html.detailed_invoice body table.page1,
html.detailed_invoice body table.invoice_footer {border-top: 0px solid transparent;}
html.detailed_invoice a {text-decoration: none;	color: var(--text_print);}
html.detailed_invoice .navbar {display: none;}
html.detailed_invoice body {background: var(--background); font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;}
html.detailed_invoice body p {font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;}
img.logo {max-width: 200px;}
html.detailed_invoice div.container-fluid {padding-top: 10px; border: none;}
html.detailed_invoice .card {border: none; background: none;}
table.invoice_header {font-family: Roboto-Light; width: 100%;}
table.invoice_header h2 {font-family: Roboto-Regular; margin: 0; padding: 0;}
table.invoice_header td {border: 1px solid var(--text_print); padding: 24px;}
table.invoice_header p {margin-bottom: 4px;}
html.product_table h2 {padding: 2px 0; margin: 0;}
table.product_table {border: 1px solid var(--text_print); max-width: 100%; font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;}
table.product_table td {font-size: 14px; padding: 8px 6px;}
html.detailed_invoice span.number{font-size: 16px;}
html.detailed_invoice table.product_table th {border: 1px solid var(--text_print);	padding: 4px;}
table.product_table td {border-top: none;}
table.invoice_footer {max-width:100%; font-size: 14px;}
table.invoice_footer td {border-left: 1px solid var(--text_print)!important; border-right: 1px solid var(--text_print)!important; border-bottom: 1px solid var(--text_print)!important; border-top: 1px solid transparent;}
img.stamp {width: 100px; margin: 0px auto;}
td.spedition p {margin: 6px 0;}
tr.dereportat td {border-top: 1px solid var(--text_print); font-family: RobotoCondensed-Regular;}
tr.reportat td {border-bottom: 1px solid var(--text_print);	font-family: RobotoCondensed-Regular;}
html.detailed_invoice span.lot, html.detailed_invoice span.ean, html.detailed_invoice span.lot, html.detailed_invoice span.exp, html.detailed_invoice span.obs {float: left; font-size: 13px; /*text-transform:uppercase;*/ padding-top: 3px; margin-right: 10px;}
html.detailed_invoice span.pagina {float: right;}
html.detailed_invoice div.col-md-4 {width: 33%!important;}
html.detailed_invoice div.total0 p,
html.detailed_invoice div.total1 p {font-family: RobotoCondensed-Regular; font-size: 18px;}
html.detailed_invoice table.invoice_footer td.middle {vertical-align: middle;}
html.detailed_invoice .btn_department {padding: 0; margin: 0; font-size: 14px;}
html.detailed_invoice .btn_department:focus {background: none; border: none;}
html.detailed_invoice .topofpage {position:fixed; top: 0px; left: 0; padding: 16px 16px; background-color: rgba(255, 255, 255, 0.1);}
html.detailed_invoice .topofpage .radioBtn {width: 170px; margin-bottom: 10px;}
html.detailed_invoice button.certificate, html.cc button.invoice {width: 170px; border: 1px solid var(--gridline); margin-bottom: 10px;}
html.detailed_invoice button.certificate:hover, html.cc button.invoice:hover {border: 1px solid var(--gridline);}
html.detailed_invoice button#home {width: 170px;}

html.detailed_invoice .topofpage-horizontal {display: none; overflow: auto; position: fixed; z-index: 99999; width: 100%;}
html.detailed_invoice .topofpage-horizontal .radioBtn {width: 184px;}
html.detailed_invoice .topofpage-horizontal {top: 0px; background-color: #444;}
html.detailed_invoice .input-horizontal, html.detailed_invoice #home-horizontal {float: left; height: 36px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;}
html.detailed_invoice #home-horizontal {width: 50px; margin-right: 10px; height: 36px; margin-left: 10px;}
html.detailed_invoice .input-horizontal button.certificate {width: 140px;}
html.detailed_invoice .input-horizontal button.invoices {width: 136px;}

/* invoice 2 */

div.invoice_header .left_container {
    float: left;
    width: 50%;
    height: 120px;
    padding: 20px;
    border: 1px solid var(--text_print);
}
div.invoice_header .right_container {
    float: left;
    width: 50%;
    height: 120px;
    padding: 20px;
    border: 1px solid var(--text_print);
    border-left: none;
}
div.invoice_header .title_container {
    float: left;
    width: 100%;
    border: 1px solid var(--text_print);
    border-top: none;
    border-bottom: none;
    padding: 15px;
}
div.invoice_header .title_container p {padding: 0; margin: 0;}
div.invoice_header .title_container h2 {font-family: Roboto-Regular;}
div.invoice_header .seller_container {
    float: left;
    width: 50%;
    height: 240px;
    padding: 20px;
    border: 1px solid var(--text_print);
}
div.invoice_header .buyer_container {
    float: left;
    width: 50%;
    height: 240px;
    padding: 20px;
    border: 1px solid var(--text_print);
    border-left: none;
}

/**********************************************
********* certificate of conformity ***********
**********************************************/

html.cc body table { margin: 0; color: var(--text_print);}
html.cc body table.page1,
html.cc body table.invoice_footer {border-top: 0px solid transparent;}
html.cc a {text-decoration: none;	color: var(--text_print);}
html.cc .navbar {display: none;}
html.cc body {background: var(--background); font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;}
html.cc body p {font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;}
img.logo {max-width: 200px;}
html.cc div.container-fluid {padding-top: 10px; border: none;}
html.cc .card {border: none; background: none;}
table.invoice_header {font-family: Roboto-Light; width: 100%;}
table.invoice_header h2 {font-family: Roboto-Regular; margin: 0; padding: 0;}
table.invoice_header td {border: 1px solid var(--text_print); padding: 24px;}
table.invoice_header p {margin-bottom: 4px;}
html.product_table h2 {padding: 2px 0; margin: 0;}
table.product_table {border: 1px solid var(--text_print); max-width: 100%;}
html.cc span.number{font-size: 16px;}
html.cc table.product_table th {border: 1px solid var(--text_print);	padding: 4px;}
table.invoice_footer {max-width:100%; font-size: 14px;}
table.invoice_footer td {border-left: 1px solid var(--text_print)!important; border-right: 1px solid var(--text_print)!important; border-bottom: 1px solid var(--text_print)!important; border-top: 1px solid transparent;}
img.stamp {width: 100px; margin: 0px auto;}
td.spedition p {margin: 6px 0;}
tr.dereportat td {border-top: 1px solid var(--text_print); font-family: RobotoCondensed-Regular;}
tr.reportat td {border-bottom: 1px solid var(--text_print);	font-family: RobotoCondensed-Regular;}
html.cc span.lot, html.cc span.ean, html.cc span.lot, html.cc span.exp, html.cc span.obs {font-size: 14px;	padding-top: 3px; margin-left: 10px;}
html.cc span.pagina {float: right;}
html.cc div.col-md-4 {width: 33%!important;}
html.cc div.total0 p,
html.cc div.total1 p {font-family: RobotoCondensed-Regular; font-size: 18px;}
html.cc table.invoice_footer td.middle {vertical-align: middle;}
html.cc .btn_department {padding: 0; margin: 0; font-size: 14px;}
html.cc .topofpage {position:fixed; top: 0px; left: 0; padding: 16px 16px; background-color: rgba(255, 255, 255, 0.1);}
html.cc .topofpage .radioBtn {width: 170px; margin-bottom: 10px;}
html.cc button#home {width: 170px;}

html.cc .topofpage-horizontal {display: none; overflow: auto; position: fixed; z-index: 99999; width: 100%;}
html.cc .topofpage-horizontal .radioBtn {width: 184px;}
html.cc .topofpage-horizontal {top: 0px; background-color: #444;}
html.cc .input-horizontal, html.cc #home-horizontal {float: left; height: 36px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;}
html.cc #home-horizontal {width: 50px; margin-right: 10px; height: 36px; margin-left: 10px;}
html.cc .input-horizontal button.invoice {width: 140px;}
html.cc .input-horizontal button.invoices {width: 136px;}

/**********************************************
************* consumption notes ***************
**********************************************/

html.consumption div.scroll_consumption {overflow: auto; height: calc(100vh - 284px);	min-height: 500px;}
html.consumption li.years a {padding: 2px 20px;}
html.consumption tr.link {cursor: pointer;}
html.consumption button.consumption {font-size: 1rem; white-space: nowrap; overflow: hidden;}
html.consumption div.rowcount {float: right; width: 200px;}
html.consumption .card-footer {padding: 10px;}
html.consumption .card-footer ul{margin-bottom: 0;}
html.consumption .input-group {width: auto;}
html.consumption .modal-footer {justify-content:space-evenly;}

/**********************************************
***************** receipts ********************
**********************************************/

html.receipts div.scroll_invoices {overflow: auto; height: calc(100vh - 284px); min-height: 500px;}
html.receipts li.years a {padding: 2px 20px;}
html.receipts tr.link {cursor: pointer;}

/**********************************************
************* detailed receipt ****************
**********************************************/

html.detailed_receipt body {
    background: var(--background);
    font-size: 15px;
    font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;
}
html.detailed_receipt body p{
	font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;
    font-size: 15px;
	color: var(--text_print);
}
html.detailed_receipt a {text-decoration: none;	color: var(--text_print);}
html.detailed_receipt body table {margin: 0;}
html.detailed_receipt .navbar {display: none;}
html.detailed_receipt .card {border: none; background: none;}
table.receipt_header td {border: 1px solid var(--text_print); padding: 24px;}
table.receipt_header p {margin-bottom: 4px;}
table.receipt_header h2 {font-family: "Roboto-Regular", Arial, Helvetica, sans-serif; margin-bottom: 0;	padding-bottom: 0;}
div.space-receipt {width: 100%;	min-height: 160px; float: left;}
html.detailed_receipt .table td {vertical-align: middle;}
html.detailed_receipt .table tr {border: 1px solid var(--text_print);}
table.receipt_footer {max-width:100%; font-size: 14px; color: var(--text_print);}
table.receipt_footer p {margin-bottom: 0;}
table.receipt_footer p.suma {font-size: 24px;}
table.receipt_footer td {
    border-left: 1px solid var(--text_print);
    border-right: 1px solid var(--text_print);
    border-bottom: 1px solid var(--text_print);
    border-top: 1px solid  transparent;
	padding: 6px 6px;
}

/**********************************************
*************** debt report *******************
**********************************************/

html.debt_report .card {border: none; background: none;}
html.debt_report body {
    background: var(--background);
    font-size: 15px;
    font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;
}
html.debt_report body p{
	font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;
    font-size: 15px;
	color: var(--text_print);
}
html.debt_report table {margin: 0;}
html.debt_report table tr {border: 1px solid var(--text_print);}
html.debt_report .table td {vertical-align: middle; border: none;}
html.debt_report table.debt_report_header td {border: 1px solid var(--text_print);}
html.debt_report body table.debtlist {
    border-left: 1px solid var(--text_print);
    border-right: 1px solid var(--text_print);
    border-bottom: 1px solid var(--text_print);
}
html.debt_report body table.debtlist th {border-bottom: 1px solid var(--text_print);}
html.debt_report body table.debtlist2 {
    border-left: 1px solid var(--text_print);
    border-right: 1px solid var(--text_print);
    border-top: 1px solid var(--text_print);
    border-bottom: 1px solid var(--text_print);
}
html.debt_report body table.debt_report_footer {
    border-left: 1px solid var(--text_print);
    border-right: 1px solid var(--text_print);
    border-bottom: 1px solid var(--text_print);
}
html.debt_report body table.debt_report_footer td {vertical-align: top;}
html.debt_report a {text-decoration: none; color: var(--text_print);}
html.debt_report .navbar {display: none;}
html.debt_report body {background: var(--background);}
html.debt_report img.stamp {margin: 0; float: right;}

/**********************************************
************ client invoice list **************
**********************************************/

html.invoice_list .card {border: none; background: none;}
html.invoice_list body {
    background: var(--background);
    font-size: 15px;
    font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;
}
html.invoice_list body p{
	font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;
    font-size: 15px;
	color: var(--text_print);
}
html.invoice_list table.invoicelist_header tbody {width: 100%;}
html.invoice_list table {margin: 0;}
html.invoice_list table tr {border: 1px solid var(--text_print);}
html.invoice_list .table td {vertical-align: middle; border: none;}
html.invoice_list table.invoicelist_header td {border: 1px solid var(--text_print);}
html.invoice_list body table.invoicelist th {border-bottom: 1px solid var(--text_print);}
html.invoice_list body table.invoicelist tbody {width: 100%;}
html.invoice_list a {text-decoration: none; color: var(--text_print);}
html.invoice_list .navbar {display: none;}
html.invoice_list table.invoicelist_footer tbody {width: 100%;}
html.invoice_list img.stamp {margin: 0; float: right;}
html.invoice_list .topofpage {position:fixed; top: 0px; left: 0; padding: 16px 16px; background-color: rgba(255, 255, 255, 0.1);}
html.invoice_list .topofpage .radioBtn {width: 200px; margin-bottom: 10px;}
html.invoice_list .dropdown-menu a li {padding: 2px 10px;}


/**********************************************
******************* journals ******************
**********************************************/

html.journals div.scroll_journals {overflow: auto; max-height: calc(100vh - 280px);}
html.journals div.scroll_journals tr.link {cursor: pointer;}
html.journals ul {margin-bottom: 0;}

/**********************************************
***************** show journal ****************
**********************************************/

html.show_journal body {background: var(--background);}
html.show_journal .card {border: none; background: none;}
html.show_journal div.container-fluid {padding-top: 10px; border: none;}
table.journal_page_header {margin-bottom: 0;}
table.journal_page_header td {border: 1px solid var(--text_print); padding: 20px 20px 14px;}
table.journal_page_body th {border: 1px solid var(--text_print); padding: 12px 10px;}
table.journal_page_body td {border: 1px solid var(--text_print); padding: 12px 10px;}
table.journal_page_body td.noborder {border-top: none!important; border-bottom: none!important; padding: 6px 10px;}
table.journal_page_body td.noleftborder {border-left: none!important;}
table.journal_page_body td.norightborder { border-right: none!important;}
div.verify {width: 230mm; text-align: right; margin-top: 20px;}

/**********************************************
**************** journals_vc ******************
**********************************************/

html.journals_vc .card-header h1 {font-size: 22px; float: left;}
html.journals_vc .scroll_journals {	overflow: auto;	height: calc(100vh - 240px); min-height: 500px;}
a.print_journal {margin-top: 0px; padding: 5px 26px; margin-right: 20px;}

/**********************************************
******** print sales journal summary **********
**********************************************/

html.print_sales_journal table {margin: 0;}
html.print_sales_journal table.journal_vc td {border: 1px solid var(--text_print); vertical-align: middle; padding: 12px 10px;}
html.print_sales_journal table.journal_page_title td {border: none;}
html.print_sales_journal table tr {border: 1px solid var(--text_print)}
html.print_sales_journal page .card {border: none; background: none;}
html.print_sales_journal img.qrcode {margin-left: 10px; margin-bottom: -4px;}
html.print_sales_journal td.title, html.print_sales_journal td.date {vertical-align: middle;}
html.print_sales_journal table.signatures {width: 100%; margin-bottom: 40px;}

/**********************************************
****** print purchases journal summary ********
**********************************************/

html.print_purchases_journal_summary table {margin: 0;}
html.print_purchases_journal_summary table.journal_vc td {border: 1px solid var(--text_print); vertical-align: middle; padding: 12px 10px;}
html.print_purchases_journal_summary table.journal_page_title td {border: none;}
html.print_purchases_journal_summary tr {border: 1px solid var(--text_print);}
html.print_purchases_journal_summary page .card {border: none; background: none;}
html.print_purchases_journal_summary img.qrcode {margin-left: 10px; margin-bottom: -4px;}
html.print_purchases_journal_summary td.title, html.print_purchases_journal_summary td.date {vertical-align: middle;}
html.print_purchases_journal_summary table.signatures {width: 100%;}
html.print_purchases_journal_summary table.signatures {margin-bottom: 40px;}
html.print_purchases_journal_summary table.signatures tr {border: none;}

/**********************************************
****** print purchases journal chrono ********
**********************************************/

html.print_purchases_journal_chrono table {margin: 0;}
html.print_purchases_journal_chrono table.journal_vc td {border: 1px solid var(--text_print); vertical-align: middle; padding: 10px 2px;}
html.print_purchases_journal_chrono table.journal_page_title td {border: none;}
html.print_purchases_journal_chrono tr {border: 1px solid var(--text_print);}
html.print_purchases_journal_chrono page .card {border: none; background: none;}
html.print_purchases_journal_chrono img.qrcode {margin-left: 10px; margin-bottom: -4px;}
html.print_purchases_journal_chrono td.company,
html.print_purchases_journal_chrono td.title,
html.print_purchases_journal_chrono td.date {vertical-align: middle;}
html.print_purchases_journal_chrono table.signatures {width: 100%;}
html.print_purchases_journal_chrono h6 {font-size: 16px; margin:0; padding: 0;}
html.print_purchases_journal_chrono table.signatures {margin-bottom: 40px;}
html.print_purchases_journal_chrono table.signatures tr {border: none;}

/**********************************************
********* print sales journal chrono **********
**********************************************/

html.print_sales_journal_chrono table {margin: 0;}
html.print_sales_journal_chrono table.journal_vc td {border: 1px solid var(--text_print); vertical-align: middle; padding: 10px 2px;}
html.print_sales_journal_chrono tr {border: 1px solid var(--text_print);}
html.print_sales_journal_chrono table.journal_page_title td {border: none;}
html.print_sales_journal_chrono page .card {border: none; background: none;}
html.print_sales_journal_chrono img.qrcode {margin-left: 10px; margin-bottom: -4px;}
html.print_sales_journal_chrono td.company,
html.print_sales_journal_chrono td.title,
html.print_sales_journal_chrono td.date {vertical-align: middle;}
html.print_sales_journal_chrono table.signatures {width: 100%;}
html.print_sales_journal_chrono h6 {font-size: 16px; margin:0; padding: 0;}
html.print_sales_journal_chrono table.signatures {margin-bottom: 40px;}
html.print_sales_journal_chrono table.signatures tr {border: none;}

/**********************************************
******** print purchases journal vat **********
**********************************************/

html.print_purchases_journal_vat table {margin: 0;}
html.print_purchases_journal_vat table.journal_vc td {border: 1px solid var(--text_print); vertical-align: middle; padding: 10px 2px;}
html.print_purchases_journal_vat tr {border: 1px solid var(--text_print);}
html.print_purchases_journal_vat table.journal_page_title td {border: none;}
html.print_purchases_journal_vat page .card {border: none; background: none;}
html.print_purchases_journal_vat img.qrcode {margin-left: 10px; margin-bottom: -4px;}
html.print_purchases_journal_vat td.company,
html.print_purchases_journal_vat td.title,
html.print_purchases_journal_vat td.date {vertical-align: middle;}
html.print_purchases_journal_vat table.signatures {width: 100%;}
html.print_purchases_journal_vat h6 {font-size: 16px; margin:0; padding: 0;}
html.print_purchases_journal_vat table.signatures {margin-bottom: 40px;}
html.print_purchases_journal_vat table.signatures tr {border: none;}

/**********************************************
********** print sales journal vat ************
**********************************************/

html.print_sales_journal_vat table {margin: 0;}
html.print_sales_journal_vat table.journal_vc td {border: 1px solid var(--text_print); vertical-align: middle; padding: 10px 2px;}
html.print_sales_journal_vat tr {border: 1px solid var(--text_print);}
html.print_sales_journal_vat table.journal_page_title td {border: none;}
html.print_sales_journal_vat page .card {border: none; background: none;}
html.print_sales_journal_vat img.qrcode {margin-left: 10px; margin-bottom: -4px;}
html.print_sales_journal_vat td.company,
html.print_sales_journal_vat td.title,
html.print_sales_journal_vat td.date {vertical-align: middle;}
html.print_sales_journal_vat table.signatures {width: 100%;}
html.print_sales_journal_vat h6 {font-size: 16px; margin:0; padding: 0;}
html.print_sales_journal_vat table.signatures {margin-bottom: 40px;}
html.print_sales_journal_vat table.signatures tr {border: none;}

/**********************************************
***************** show register ***************
**********************************************/

html.show_register .card {border: none; background: none;}
html.show_register table {margin: 0;}
html.show_register table tr {border: 1px solid var(--text_print)}

/**********************************************
************** show payment order *************
**********************************************/

html.show_payment_order body {background: var(--background); font-size: 15px; font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif;}
html.show_payment_order body p {font-family: "RobotoCondensed-Regular", Arial, Helvetica, sans-serif; font-size: 15px; color: var(--text_print);}
html.show_payment_order a {text-decoration: none; color: var(--text_print);}
html.show_payment_order body {background: var(--background);}
html.show_payment_order body table {margin: 0;}
html.show_payment_order h1 {font-size: 20px; margin-bottom: 16px; color: var(--text_print);}
html.show_payment_order .payment_page_header p.company {padding-top: 10px; padding-left: 20px;}
html.show_payment_order .card {border: none; background: none;}
html.show_payment_order div.container-fluid {padding-top: 10px; border: none;}
table.payment_page_header {margin-bottom: 0;}
table.payment_page_header td {border: 1px solid var(--text_print); border-bottom: none; padding: 20px 20px 14px;}
table.payment_page_body td {border: 1px solid var(--text_print); padding: 12px 10px;}
table.payment_page_body p {margin-bottom: 0;}
div.space-payment {width: 100%;	min-height:240px; float: left;}
html.show_payment_order .table tr {border: 1px solid var(--text_print);}

/**********************************************
*************** show cash order ***************
**********************************************/

html.show_cash_order .card {border: none; background: none;}
html.show_cash_order table tr {border: 1px solid var(--text_print);}
html.show_cash_order body {background: var(--background);}
html.show_cash_order h1 {font-size: 20px; margin-bottom: 16px;}
html.show_cash_order .cash_page_header p.company {padding-top: 10px; padding-left: 20px;}
html.show_cash_order .card {border: none; background: none;}
html.show_cash_order div.container-fluid {padding-top: 10px; border: none;}
table.cash_page_header {margin-bottom: 0;}
table.cash_page_header td {border: 1px solid var(--text_print); border-bottom: none; padding: 20px 20px 14px;}
table.cash_page_body td {border: 1px solid var(--text_print); padding: 12px 10px;}
table.cash_page_body p {margin-bottom: 0;}
div.space-cash {width: 100%; min-height:240px; float: left;}

/**********************************************
****************** receptions *****************
**********************************************/

div.scroll_receptions {overflow: auto; max-height: calc(100vh - 260px);}
div.scroll_receptions tr.link {cursor: pointer;}
html.show_reception body {background: var(--background);}
span.title {font-size: 20px;}
html.show_reception .card {border: none;}
html.show_reception div.container-fluid {padding-top: 10px; border: none;}

/**********************************************
**************** show reception ***************
**********************************************/

html.show_reception .card {border: none; background: none;}
html.show_reception table tr {border: 1px solid var(--text_print);}
html.show_reception_list ul {margin-bottom: 0;}
table.reception_page_header {margin-bottom: 0;}
table.reception_page_header td {border: 1px solid var(--text_print); padding: 20px 20px 14px;}
table.reception_page_data {margin-bottom: 0;}
table.reception_page_data td {border: none; padding: 2px 6px;}
table.reception_page_data tr.top td {border-top: 1px solid var(--text_print);}
table.reception_page_data tr.bottom td {border-bottom: 1px solid var(--text_print);}
table.reception_page_data td.first {border-left: 1px solid var(--text_print);}
table.reception_page_data td.last {border-right: 1px solid var(--text_print);}
table.reception_page_body {border: 1px solid var(--text_print);}
table.reception_page_body th {border: 1px solid var(--text_print); padding: 12px 10px;}
table.reception_page_body td {border: 1px solid var(--text_print); padding: 12px 10px;}
table.reception_page_body td.noborder {border-top: none!important; border-bottom: none!important; padding: 4px 10px;}
table.reception_page_body td.noleftborder {border-left: none!important;}
table.reception_page_body td.norightborder {border-right: none!important;}

/**********************************************
********** show consumption note **************
**********************************************/

html.show_consumption_note body {background: var(--background);}
html.show_consumption_note .card {border: none; background: none;}
html.show_consumption_note .logo {width: 170px; margin-bottom: 20px;}
html.show_consumption_note p.company {padding-left: 10px;}
html.show_consumption_note table tr {border: 1px solid var(--text_print)}
html.show_consumption_note table.show_consumption_note_header {margin-bottom: 0;}

/**********************************************
****************** stock list *****************
**********************************************/

html.products_stock_list body {background: var(--background);}
html.products_stock_list .card {border: none; background: none;}
html.products_stock_list table.stock_list_header {font-weight: bold;}
html.products_stock_list table.stock_list_header {border: 1px solid var(--text_print);}
html.products_stock_list table.stock_list_header td{border: none;}
html.products_stock_list table.stock_list_data {border: 1px solid var(--text_print);}
html.products_stock_list table.stock_list_data td {border: none; vertical-align: middle; padding: 7px;}
html.products_stock_list table.stock_list_data tr {border-bottom: 1px solid var(--text_print);}

/**********************************************
****************** stock info *****************
**********************************************/

html.products_stock_info body {background: var(--background);}
html.products_stock_info .card {border: none; background: none;}
html.products_stock_info table.stock_list_header {font-weight: bold;}
html.products_stock_info table.stock_list_header {border: 1px solid var(--text_print);}
html.products_stock_info table.stock_list_header td{border: none;}
html.products_stock_info table.stock_list_data {border: 1px solid var(--text_print);}
html.products_stock_info table.stock_list_data td {border: none; vertical-align: middle; padding: 7px;}
html.products_stock_info table.stock_list_data tr {border-bottom: 1px solid var(--text_print);}
html.products_stock_info .modal button.save {float: right; margin-top: 20px; margin-left: 10px;}

/**********************************************
******************** TOOLS ********************
**********************************************/

html.tools_export_users div.card_cities .card-body,
html.tools_export_users div.card_clients .card-body,
html.tools_export_users div.card_results .card-body {height: calc(100vh - 160px); min-height: 460px; overflow: auto;}
html.tools_export_users div.card_table .card-body {height: calc(100vh - 186px); min-height: 460px; overflow: auto;}
html.tools_export_users input#filter_clients {width: 100%;}
html.tools_export_users input[type=checkbox] {appearance:none;-webkit-appearance: none; -moz-appearance: none; border: 1px solid #444;}
html.tools_export_users input[type=checkbox]:checked {background-color: var(--color1);}
html.tools_export_users input[type=checkbox]:checked:after {
    margin-left: 5px;
    margin-top: 2px;
    width: 8px;
    height: 12px;
    border: solid var(--color1);
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}
html.tools_export_users .card-header {height: 54px;}
html.tools_export_users .card-header-table {height: 80px;}
html.tools_export_users h2 {font-size: 1.4em;}
html.tools_export_users tr.category td {background-color: var(--color1); color: #ccc; font-family: RobotoCondensed-Regular; text-align: center;}
html.tools_export_users .card_clients .button_select, html.tools_export_users .card_clients .button_clear {height: 26px; padding: 0 10px; margin: 4px 4px;}
html.tools_export_users span.category {line-height: 36px;}
html.tools_export_users .card_cities .button_select, html.tools_export_users .card_cities .button_clear {height: 38px; padding: 0 10px; margin: 0px 4px;}

html.sent_mails .scroll_emails {overflow: auto; height: calc(100vh - 300px); min-height: 500px;}
html.sent_mails .tox-menubar {display: none;}

html.sent_mails a.invoice,
html.sent_mails a.cc {color: var(--link);}


/**********************************************
******************** MARKET *******************
**********************************************/

html.map .card-map {height: calc(42vh); min-height: 540px;}
html.map .card-country {height: calc(42vh);  min-height: 540px;}
html.map .scroll {overflow: auto; height: calc(34vh);  min-height: 430px;}
html.map .card-chart {height: calc(42vh); min-height: 540px;}
/* html.map .scroll_map {overflow: auto; height: calc(40vh);}
html.map .scroll {overflow: auto; height: calc(35.5vh); min-height: 460px;}
html.map div.map .card-body-map {height: calc(40vh); min-height: 515px;}
html.map #container2 {height: calc(36vh);} */

html.map div.map svg a:hover path {fill: #FF6B94!important;}
html.map div.map svg a text {font-family: RobotoCondensed-Regular!important; fill: #FF6B94!important;}
html.map div.map svg a:hover text {fill: var(--text_light)!important;}

.legend .legend_00 {background-color: #ffffff; color: #002064; border: 1px solid #e6e9f0; padding: 4px;}
.legend .legend_0 {background-color: #e7e6f2; color: #002064; padding: 4px;}
.legend .legend_1 {background-color: #dcdaf2; color: #002064; padding: 4px;}
.legend .legend_2 {background-color: #c6c3e6; color: #002064; padding: 4px;}
.legend .legend_3 {background-color: #b1add9; color: var(--text_light); padding: 4px;}
.legend .legend_4 {background-color: #9d99cc; color: var(--text_light); padding: 4px;}
.legend .legend_5 {background-color: #8a86bf; color: var(--text_light); padding: 4px;}
.legend .legend_6 {background-color: #7874b3; color: var(--text_light); padding: 4px;}
.legend .legend_7 {background-color: #6763a6; color: var(--text_light); padding: 4px;}
.legend .legend_8 {background-color: #585499; color: var(--text_light); padding: 4px;}
.legend .legend_9 {background-color: #4d498a; color: var(--text_light); padding: 4px;}
html.map div.col-sm-11 {padding-left: 0; padding-right: 0; padding-top: 15px;}
html.map div.col-sm-1 {margin-left: -15px; padding-right: 0; padding-top: 0;}

/* show_district */
html.show_district .card-district {height: calc(42vh); min-height: 540px;}
html.show_district .card-city {height: calc(42vh); min-height: 540px;}
html.show_district .scroll {overflow: auto; height: calc(34vh); min-height: 430px;}
html.show_district .map iframe {height: calc(36vh); width: 100%; min-height: 476px;}
html.show_district .card-chart {height: calc(40vh); min-height: 540px;}

/* show_city */
/* html.show_city .card-map {height: calc(44vh);} */
html.show_city .map iframe {height: calc(36vh); width: 100%; min-height: 502px;}
/* html.show_city .card-chart {height: calc(44vh); } */
html.show_city #container3 {height: calc(36vh); width: 100%; min-height: 504px;}
html.show_city #tabs {margin-top: 20px;}
html.show_city .col-xl-12 {padding-left: 8px; padding-right: 8px;}
html.show_city div.scroll {overflow: auto; height: calc(36vh); min-height: 500px;}
html.show_city .tabcontent { height: calc(48vh); min-height: 520px;}
html.show_city .nav-tabs .nav-link {border-top-left-radius: 4px; border-top-right-radius: 4px;}
html.show_city .nav-tabs .nav-link {margin-right: 3px; background-color: #ccc; max-width: 200px;}
html.show_city .nav-tabs .last {margin-right: 0;}
html.show_city .nav-tabs .active {border: 1px solid var(--text_light); background-color: var(--text_light);}
html.show_city tr.link {cursor: pointer;}

/**********************************************
******************* pricelist *****************
**********************************************/

html.pricelist a.print {margin-right: 15px;}
html.pricelist div.scroll_pricelist {overflow: auto;height: 79vh;}
html.pricelist .card, html.pricelist_print .card {border: none; background: none;}
html.pricelist_print div.pricelist_print_header {margin-bottom: 4px; padding-bottom: 20px;}
html.pricelist_print .left_container {width: 65%; float: left;}
html.pricelist_print .right_container {width: 35%; float: right;}
html.pricelist_print div.pricelist_print_header img.qrcode {padding: 20px 20px 0 20px;}
html.pricelist_print table.pricelist_print_header th,
html.pricelist_print table.pricelist_print td {border: 1px solid #000!important;}
html.pricelist_print table.pricelist_print_header tr.category,
html.pricelist_print table.pricelist_print tr.category {
    font-family: "Roboto-Regular", Arial, Helvetica, sans-serif;
    background-color: var(--card_body_bg);
	color: var(--text_dark);
}
html.pricelist_print p.oferta {
    font-family: "Roboto-Regular", Arial, Helvetica, sans-serif;
    font-size: 26px;
    padding-top: 42px;
}
html.pricelist_print p.tel {font-size: 16px; padding-top: 54px; text-align: right;}
html.pricelist_print p.tva {padding: 6px 10px; margin: 0;}

/**********************************************
****************** preferences ****************
**********************************************/

html.preferences div.container-fluid {margin-top: 20px;	margin-bottom: 0; padding-bottom: 0;}
html.preferences .col-xl-12 {padding-left: 7.5px; padding-right: 7.5px;}
html.preferences .tab-content {background-color: var(--card_body_bg);}
html.preferences div.preferences-buttons {margin: 0 auto; width: 100%; text-align: center;}
html.preferences div.container-save {background-color: var(--card_header_bg); padding: 20px 20px;}
html.preferences div.tab-content {padding-top: 40px!important;}
html.preferences div.wholesale .scroll,
html.preferences div.wholesale-vip .scroll,
html.preferences div.prospects .scroll {height: 54vh; overflow: auto;}

html.preferences div#myModal input {margin: 10px 0; padding: 0 10px;}
html.preferences div#myModal button.btn {padding: 4px 12px; margin: 10px 0;}
html.preferences div#myModal_VIP input {margin: 10px 0;	padding: 0 10px;}
html.preferences div#myModal_VIP button.btn {padding: 4px 12px;	margin: 10px 0;}
html.preferences div#myModalProspects .modal-header {padding: 6px;}
html.preferences div#myModalProspects input {margin: 10px 0; padding: 0 10px;}
html.preferences div#myModalProspects button.btn {padding: 4px 12px; margin: 10px 0;}
html.preferences label {margin-bottom: 0px;}
html.preferences img.trash {height: 18px;}

html.preferences button.close {padding: 4px; margin: 0 10px;}
html.preferences h4.modal-title {text-align: center; width: 100%; padding: 0;}
html.preferences .modal-header {padding: 6px;}

/* preferences - hamor */
html.preferences .card {padding-left: 0; padding-right: 0; padding-bottom: 0px; margin-bottom: 20px;}
html.preferences .card  label {margin-top: 10px; margin-bottom: 2px;}

/* preferences - documents */
table.pricelist tr.category {background-color: var(--card_header_bg);}

/* preferences - products */
html.preferences #save_category {display: inline; float: right; margin-top: 20px;}
html.preferences #scroll_category {height: 56vh; overflow: auto;}
html.preferences .add_category {padding-bottom: 0; margin-bottom: 20px;}
html.preferences .add_product_group {padding-bottom: 0; margin-bottom: 20px;}
#generate_thumbnails_button {float: right; min-width: 120px;}

/**********************************************
***************** preferences 2 ***************
**********************************************/

html.preferences2 .tab {float: left; border-right: 1px solid var(--background); width: 120px; height: calc(100vh - 100px); background-color: var(--input_bg_light)}
html.preferences2 .tab button {
    display: block;
    background-color: var(--input_bg_light);
    color: var(--button_color);
    padding: 12px 12px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--background); 
}
html.preferences2 .tab button:hover {color: #ddd; background-color: var(--color1); outline: 1px solid var(--color1); border-bottom: 1px solid transparent;}
html.preferences2 .tab button.active {color: #ddd; background-color: var(--color1); outline: 1px solid var(--color1);  border-bottom: 1px solid transparent;}
html.preferences2 .tabcontent {float: left; padding: 20px; width: calc(100% - 120px); height: calc(100vh - 100px);}
html.preferences2 div.wholesale .scroll,
html.preferences2 div.wholesale-vip .scroll,
html.preferences2 div.prospects .scroll {height: 54vh; overflow: auto;}
html.preferences2 #scroll_category {height: 52vh; overflow: auto;}
html.preferences2 .tab_save {margin-top: calc(100vh - 590px); background-color: var(--color1)!important; color: #ddd!important; text-align: center!important;}
html.preferences2 .card{margin-bottom: 20px; min-height: 150px;}

/**********************************************
******************* search ********************
**********************************************/

html.search div.card-body {min-height: 142px;}
html.search div.card:hover {border-color: #0775FB;}
html.search div.card-body img{float: left; margin-right: 10px; max-width: 56px;}
html.search div.card-body h4{padding-left: 66px; margin-bottom: 4px; font-size: 16px;}
html.search div.card-body h5 {padding-left: 66px; font-size: 16px;}
div.no_result {margin-top: 80px;}
div.no_result p {
	text-align: center;
	padding: 20px 40px;
	background: var(--text_light);
	max-width: 400px;
	margin: 0 auto;
	border: 1px solid var(--navbar);
	border-radius: 4px;
}

/**********************************************
******************** media ********************
**********************************************/

@media (max-width: 1550px) {
    html.detailed_invoice .topofpage {display: none;}
    html.detailed_invoice .topofpage-horizontal {display: flex;}
    html.cc .topofpage {display: none;}
    html.cc .topofpage-horizontal {display: flex;}
    page[size="A4"][layout="invoice"] {margin-top: 60px;}
}
@media (max-width: 1500px) {
    html.map div.col-sm-1 div.legend div {width: 60px;}
    html.map div.col-sm-1 {margin-left: -25px;}
    .search-desktop {width: 22%;}
}
@media (max-width: 1460px) {
	div#container_details_1 p {font-size: 0.9em;}
}
@media (max-width: 1340px) {
    .search-desktop {width: 18%;}
    div.row .col-sm-3 {max-width: 50%; flex: 0 0 50%;}
	div.row .col-sm-2 {max-width: 33.33%; flex: 0 0 33.33%;}
    html.dashboard .col-sm-4 {-ms-flex: 0 0 66.6%; flex: 0 0 66.6%; max-width: 66.6%;}
    .col-sm-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .search-desktop {width: 15%;}
    span.searchstring {display: none;}
    html.client_details .card_details {height:100%;}
    html.client_details .scroll {height: 408px;}
    .navbar-expand-sm .navbar-nav .nav-link {padding-left: 0.3rem; padding-right: 0.3rem;}
}
@media (max-width: 1140px) {
    .container-fluid {padding-top: 86px;}
    div.first_title {margin: 100px 20px 0;}
    .search-desktop {display: none;}
    .search-phone {display: block; margin-top: 45px;}
    .search-phone .input-group {margin-top: -3px; border-radius: 0!important; border-bottom: 16px solid var(--background);}
    .search-phone input, .search-phone button {border-radius: 0!important; min-height: 36px; border: none;}
    .search-phone button {min-height: 38px; padding: 4px 16px;}
    .navbar {border-bottom: none;}
    /* adjust the height of fixed tables */



}
@media (max-width: 1100px) {
	html.map div.col-sm-1 div.legend div {float: left; width: 60px;}
    html.map div.col-sm-11 {padding-left: 10px; padding-right: 10px; padding-top: 15px;}
    html.map .scroll_map {min-height: 480px;}
}
@media (max-width: 960px) {
	div.row .col-sm-2 {max-width: 50%; width: 50%; flex: 0 0 50%;}
    div.row .col-sm-4 {max-width: 100%; width: 100%; flex: 0 0 100%;}
    div.product_details_card div.row .col-sm-4 {max-width: 33%; width: 33%; flex: 0 0 33%;}
    /* div.row .col-sm-8 {max-width: 100%; width: 100%; flex: 0 0 100%;} */
    .navbar-expand-sm .navbar-nav .nav-link {padding-left: 0.1rem; padding-right: 0.1rem;}
}
@media (max-width: 880px) {
    .navbar-desktop {display: none;}
    .navbar-phone {display: block;}
    .open-menu {display: inline-block;}
	div.card_select {overflow: visible;}
    ul.pagination{display: none;}
    div.hidden {display:block; float:left;}
    .hidden  {padding: 0;}
    .hidden .dropdown {border-radius: 4px; width: 100%; padding: 2px;}
    html.product_details h1 {width: 500px;}

	/*********** fix tables ***********/
	table.phone,
	table.phone thead,
	table.phone tbody,
	table.phone th,
	table.phone td,
	table.phone tr {display: block;}
	table.phone thead tr {display: none;}
	table.phone tr {
	    border-left: 1px solid var(--gridline);
	    border-right: 1px solid var(--gridline);
	    border-top: 1px solid var(--gridline);
	}
	table.phone td {
		border: none;
		border-bottom: 1px solid var(--gridline);
		position: relative;
		width: 100%!important;
		text-align: right;
	}
	/*********** /fix tables ***********/

	div.row .col-sm-3 {max-width: 100%;	flex: 0 0 100%;}
	html.invoices .hidden .dropdown {margin-top: 10px;}
	.last_line {margin-bottom: 30px;}

}
@media (max-width: 750px) {
    html.product_details h1 {width: 470px;}
}
@media (max-width: 720px) {
    html.client_details .badge {float: left;}
    a.debt_report {float: left;}
	html.products_stock .flexible {text-align: right;}
    html.product_details h1 {width: 420px;}
}
@media (max-width: 670px) {
    html.client_details div.map {width: 100%;}
    html.client_details div.map iframe {height: 350px;}
    html.client_details .card_phone {min-height: 100%; height: 100%;}
    html.client_details div#container_details_1 h1 {padding: 20px 10px 10px 0px;}
    html.client_details .badge {margin-top: 16px;}
    html.client_details button.edit_client {margin-top: 16px;}
    html.client_details div.container_details table {margin: 10px 15px 5px;}
    html.product_details h1 {width: 380px;}
}
@media (max-width: 622px) {
	.form-inline input.form-control {width: 270px;}
}
@media (max-width: 600px) {
    div.row .col-sm-8 {max-width: 100%; width: 100%; flex: 0 0 100%;}
    nav .form-inline {width: 100%; float: left;}
    div.first_title {margin-top: 100px;}
    div.value {text-align: center;}
	.form-inline input.form-control {width: 80%; float: left; border: none;}
	.form-inline button {float: right; border-radius: 0; max-width: 70px;}
	nav .form-inline {width: 100%; display: block; float: left; background-color: var(--text_light);	padding: 0;}
	html.product_details div.container_details table {padding: 0 0px; margin-left:10px;}
    div.product_details_card div.row .col-sm-4 {max-width: 100%; width: 100%; flex: 0 0 100%;}
    html.product_details div.picture {-webkit-mask-image: none; mask-image: none;}
    html.product_details div.picture {text-align: center;}
    html.product_details div.picture img {float: none;}
    html.product_details h1 {float: none; width: 100%;}
    html.product_details button.memo, html.product_details button.edit_picture {float: left; margin-top: 4px; margin-right: 10px;}

}
@media (max-width: 520px) {
    html.product_details div#container_details_1 div.picture {width: 94%;}
    html.product_details .card_phone {min-height: 100%; height: 100%;}
    html.product_details div#container_details_1 h1 {padding: 10px 10px 20px 10px; text-align: center; font-size: 24px;}
}
@media (max-width: 480px) {
	.form-inline input.form-control {width: 220px;}
}
@media (max-width: 430px) {
	div.row .col-sm-2 {width: 100%; max-width: 100%; flex: 0 0 100%;}
	div.row .col-sm-3 {width: 100%; max-width: 100%; flex: 0 0 100%;}
	.space {padding: 10px 5px 0px 5px;}
	.page-link {padding: 4px 8px; font-size: 13px;}
    .card-header {padding: 6px 10px; font-size: 14px;}
    html.client_details .desktop_badge {display: none;}
    html.client_details div.client_details .badge {float: none; margin-top: 0; margin-bottom: 10px;}
	div.first_title, div.second_title {margin-left: 15px; margin-right: 15px;}
}
@media (max-width: 300px) {
	.form-inline input.form-control {width: 70%;}
}