/**********************************************
******************** 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;
    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;
    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 {
    body {
        background: #fff;
    }
    page[size="A4"] {
        margin: 0;
        box-shadow: none;
    }
    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, 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);
}

/**********************************************
********************* 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 0.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 0.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 0.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(0.25rem - 1px) calc(0.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(0.25rem - 1px) calc(0.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;
}
#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;
}
html.product_manager .product_code {
    padding: 0;
    background-color: transparent!important;
    border: none!important;
}

/**********************************************
********** 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-sm-4 {
    padding: 10px 0;
    float: left;
}
html.products_presentation .row-select .col-sm-8 {
    padding: 10px 0 10px 20px;
    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);
    width: 220px;
}
html.products_presentation .topofpage .radioBtn {
    width: 160px;
    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 catalog *************
**********************************************/

html.products_catalog .topofpage {
    position: fixed;
    top: 0px;
    left: 0;
    padding: 16px 16px;
    background-color: rgba(255, 255, 255, 0.1);
    width: 220px;
}
html.products_catalog .topofpage .radioBtn {
    width: 160px;
    margin-bottom: 10px;
}
html.products_catalog page[size="A4"] {
    display: block;
    width: 210mm;
    height: 297mm;
    margin: 10mm auto;
    background: #fff;
    page-break-after: always;
    position: relative;
    border: 1px solid red;
}

html.products_catalog page[size="A4"]:last-child {
    page-break-after: auto;
}
.page-header,
.page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    font-size: 10pt;
}
.page-footer {
    position: absolute;
    right: 14mm;
    bottom: 10mm;
    left: 14mm;
    border-top: 1px solid #bbb;
    padding-top: 4mm;
}

/*.page-header {
    border-bottom: 1px solid #bbb;
    padding-bottom: 5mm;
}*/

html.products_catalog table {
    width: 100%;
}
/*html.products_catalog 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_catalog .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_catalog .product_name_hr {
    border: none;
    border-bottom: 2px solid #f15d4b;
    padding: 0;
    margin: 0 0 30px 0;
    height: 0;
}
html.products_catalog .product_bottom_hr {
    border: none;
    border-bottom: 1px solid #ddd;
    margin-bottom: 2px;
}
html.products_catalog .product_image {
    float: right;
    padding-left: 40px;
}
html.products_catalog td.product_image {
    vertical-align: top;
}












/*
html.products_catalog button#home {
    width: 100%;
}
html.products_catalog button#home i {
    margin-right: 8px;
}
html.products_catalog .row-select {
    margin-left: 0px;
}
html.products_catalog .row-select .col-sm-4 {
    padding: 10px 0;
    float: left;
}
html.products_catalog .row-select .col-sm-8 {
    padding: 10px 0 10px 20px;
    float: left;
}
html.products_catalog .row-select p.select {
    color: var(--text_light) !important;
    padding-top: 6px;
}
html.products_catalog .space {
    padding: 0;
}
html.products_catalog .gap {
    padding: 20px 0 0 0;
    margin: 0;
}
html.products_catalog .container-fluid {
    padding: 0;
    width: 100% !important;
}
html.products_catalog .row {
    margin-right: 0;
    width: 100%;
}
html.products_catalog .card {
    border: none;
    box-shadow: none;
    width: 100% !important;
    background: #fff;
}
html.products_catalog .product_container_top {
    min-height: 390mm;
    width: 100% !important;
    padding: 5mm 5mm 0 10mm;
}
html.products_catalog table.product,
html.products_catalog table.page_header {
    width: 100% !important;
}
html.products_catalog table.product tbody,
html.products_catalog table.page_header tbody {
    width: 100% !important;
}
html.products_catalog 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_catalog .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_catalog .product_name_hr {
    border: none;
    border-bottom: 2px solid #f15d4b;
    padding: 0;
    margin: 0 0 30px 0;
    height: 0;
}
html.products_catalog .product_bottom_hr {
    border: none;
    border-bottom: 1px solid #ddd;
    margin-bottom: 2px;
}
html.products_catalog .product_description p {
    font-size: 15px;
}
html.products_catalog .product_image {
    float: right;
    padding-left: 40px;
}
html.products_catalog td.product_image {
    vertical-align: top;
}

html.products_catalog div.label {
    padding: 4px 10px;
    margin: 15px 0 0px 0;
    border: 1px solid #444;
    font-size: 15px;
}
html.products_catalog table.label td {
    padding: 4px;
}
html.products_catalog 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_catalog table.label td.notif {
    border-bottom: 2px solid #444;
}
html.products_catalog table.label td.ingredient {
    font-size: 18px;
    border-bottom: 4px solid #444;
}
html.products_catalog table.label td.alte {
    border-top: 4px solid #444;
    border-bottom: 2px solid #444;
}
html.products_catalog table.label tr:hover {
    cursor: default;
    background-color: #eeeeee;
    transition: all 0.25s ease-in-out;
}
html.products_catalog table.label td.continut {
    border-bottom: none;
}
html.products_catalog p.vitaking {
    font-size: 14px;
    padding: 0;
    margin: 0;
    text-align: center;
}
html.products_catalog p.vitaking span.dot {
    background-color: #444;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 18px 1px 18px;
    padding: 4px;
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
}
html.products_catalog div.price {
    padding: 10px 10px 2px;
    margin: 15px 0 0px 0;
    border: 1px solid #444;
    max-width: 740px;
}
html.products_catalog div.price span {
    font-family: RobotoCondensed-Regular;
}
*/

/**********************************************
********* 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) {
    .navbar-brand {
        padding-left: 4px;
        padding-right: 4px;
    }
    .open-menu {
        padding: 12px 0 0 4px;
    }
    .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: 380px) {
	.navbar-brand {padding-left: 4px; padding-right: 4px;}
} */
@media (max-width: 300px) {
    .form-inline input.form-control {
        width: 70%;
    }
}