/* Tags */
html, body#mpb { font-family: Verdana, Arial, Helvetica, sans-serif; color: #375F86; background-color: #FFFFFF; margin: 0px; padding: 0px; font-size:.8em; }
body#mpb.bootstrap { font-size: 14px; }
img { border: none; }
form { margin: 0px; padding: 0px; display: inline; }
input { border: 1px solid #A7A6AA; background-color: #FFFFFF; padding: 2px; font-size: 1.3em; }
textarea { border: 1px solid #A7A6AA; padding: 2px; }
button { cursor: pointer; font-size: 1.2em; }
p { margin: 0.5em 0 0.5em 0; }
a { color: #375F86; font-weight: bold; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
h1 { font-size: 18px; font-weight: bold; margin: 0px;}
h2 { font-size: 16px; font-weight: bold; margin: 10px 0px 0px;}
h3 { font-size: 14px; font-weight: bold; margin: 0px;}
table { font-size: 100%; }
tr { font-size: 100%; }
td { font-size: 100%; }
pre { font-size: 1.5em; }
th { font-size: 100%; color: #FFFFFF; background-color: #375F86; text-align: left; }
table img { vertical-align: middle; padding: 0px; }
/*.product-link img { max-width: 70px; }*/
button.no-background { cursor: pointer; border: none; background: none; padding: 0px; margin: 0px; vertical-align: middle; }
table button img { vertical-align: top; padding: 0px; }
hr { border-top: 1px solid #375F86; border-bottom: none; border-left: none; border-right: none; height: 1px; }

.red { color:red }
.orange { color:rgb(255, 136, 0) }
.yellow {color:#fff788}
.gold {color:#edb867}
.silver {color:#c0c0c0}
.limegreen {color:limegreen}
a .limegreen:hover {color:seagreen}

/* Page Construction */
div#header { background-color: #598ABB; width: 100%; overflow: hidden; font-size: 10px; line-height:normal; }
div#header div#logo { float: left; }
div#header div#actions { float: right; padding-top: 10px;}
div#header div#actions p { color:#FFFFFF; display:inline-block; font-weight:bold; margin-right:8px; margin-top:8px; width:auto;}
div#shadow { background: url(/images/admin/headergradient.gif); clear: both;}
div#container { background: url(/images/admin/leftbg.png) top left repeat-y; overflow-y:auto; display: flex; min-height: calc(100vh - 64px);}
div#left { width: 166px; background-color: #598ABB; z-index: 100; font-size: 12px; line-height:normal; }
div#left ul { list-style: none; padding: 0; margin: 0 0 0 2px; }
div#left ul li { background: url(../images/admin/sep.png) 0px 13px repeat-x; padding-top: 2px; padding-bottom: 2px; }
div#left ul li span { color: #FFFFFF; font-weight: bold; font-size: 110%; background: #598ABB; padding-right: 2px; line-height:20px; }
div#left ul.mpbnav { margin: 4px 0 0 5px; background: #598ABB; }
div#left ul.mpbnav li { background: url(../images/admin/arrow.png) center left no-repeat; padding: 0 0 0 10px; font-weight: normal; line-height: 1.3em }
div#left ul.mpbnav a.current_action { font-size:120%; font-weight:bold; color:#FF9; }
div#left a { color: #FFFFFF; text-decoration: none; font-weight: normal; }
div#left a:hover { text-decoration: underline; }
div#main { flex: 1; position:relative; background-color:white;}
div#content { padding: 0px 5px 10px 5px; width: auto; }
br.clear { clear: both; }
div#copyright { margin-top: 10px; text-align: center; font-family: Arial, sans-serif; }
div#copyright a { font-weight: normal; }
div#accessDenied { width: 600px; text-align: left; }

/* Login */
div#login-google { margin-bottom: 50px; }
div#loginContainer { padding-top: 75px; }
div#login { width: 466px; font-size: 10px;}
div#loginBody { background: url(/images/admin/loginbg.png) repeat-y; padding: 10px 9px 32px 9px; }
div#loginBody table td { padding-bottom: 7px; text-align: left;}
div#loginBody label { font-weight: bold; vertical-align: middle; }
div#loginBody input { float: right; vertical-align: middle; }
div#loginBody a { font-weight: normal; }
.capslock { background: url(/images/admin/capslock.png) center right no-repeat; }

/* Start Page */
div.categoryLine { background-image: url(../images/admin/line.gif); background-repeat: repeat-x; background-position: 0px 8px; padding-top: 3px; padding-bottom: 2px; clear: both;}
div.categoryLine span { font-size: 10px; font-weight: bold; background-color: #FFFFFF;}
ul.icons { clear: both; padding: 0px; margin: 0px; overflow: hidden; }
ul.icons li { display: inline; float: left; text-align: center; width: 90px; }
ul.icons li a { font-size: 90%; font-weight: normal; }

/* Classes */
hr.faint { border-top: 1px solid #CCCCCC; border-bottom: none; border-left: none; border-right: none; height: 1px; }
.optionName { width: 450px; padding: 0px; margin: 0px; }
.priceDiff { width: 65px; padding: 0px; margin: 0px; }
.weightDiff { width: 65px; padding: 0px; margin: 0px; }
.specName { width: 100px; padding: 0px; margin: 0px; }
.specValue { width: 300px; padding: 0px; margin: 0px; }
div.right { text-align: right; margin: 0.5em 0.3em 0.3em 0.3em; }

/* Forms */
input.nb { border: none; background: none; margin: 0px; padding: 0px; }
input.submit	{ background: url(/images/admin/submitbutton.png)	top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.submit	{ background: url(/images/admin/submitbutton.png)	top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.feed		{ background: url(/images/admin/publishbutton.png)	top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.button 	{ background: url(/images/admin/button.png)			top left no-repeat; width: 100px; height: 22px; border: none; text-align: center; padding: 0 3px 0 0; font-size: 1.2em; }
button.move 	{ background: url(/images/admin/movebutton.png)		top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.delete 	{ background: url(/images/admin/deletebutton.png)	top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.add 		{ background: url(/images/admin/addbutton.png)		top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.view 	{ background: url(/images/admin/viewbutton.png)		top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.hide 	{ background: url(/images/admin/hidebutton.png)		top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.finished { background: url(/images/admin/finishedbutton.png) top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.discount { background: url(/images/admin/no_discountbutton_2.png) top left no-repeat; width: 100px; height: 22px; border: none; text-align: right; padding: 0 3px 0 0; font-size: 1.2em; }
button.border img { vertical-align: middle; }

div.legend { background-color: #375F86; color: #FFFFFF; font-size: 120%; font-weight: bold; padding: 0.4em; }
div.blackground { background: rgba(0, 0, 0, .5); position: fixed; width: 100%; height: 100vh; top: 0; z-index: 1000; overflow: hidden;}
div#blocked_reason {z-index: 1001; position: relative;}
div.form { border-width: 0px 1px 1px 1px; border-color: #375F86; border-style: solid; overflow: hidden; background-color: #F9FAFB; margin: 0 0 1em 0; padding: 0.6em 0.6em 0.2em 0.6em; clear: both;}
label       { font-weight: bold; width: 20em; float: left; margin-top: 0.3em; }
label.basic { font-weight: normal; width: auto; float: none; margin-top: 0; }
div.form label { clear: left; }

div.form br { clear: both !important; }
div.form span { margin: 0.3em 0.3em 1em 0.3em; }
div.form img { margin: 0 0.3em 0.3em 0; vertical-align: top;}
div.form input { margin-bottom: 0.3em; }
div.pane table { margin-bottom: 0.3em; }
div.form select { margin-bottom: 0.3em; }
div.form textarea {margin-bottom: 0.3em; width: 99.5%; }
div.form .assign { clear: both; }
div.form .assign select { float: left; }
div.form .assign .buttons { float: left; width: 10em; text-align: center; }
div.form #meta_title,
div.form #name,
div.form #code,
div.form #header_en,
div.form #header_fr,
div.form #header_de,
div.form #image_product { width: 400px; }


div.pane { border-width: 0px 1px 1px 1px; border-color: #91A7B4; border-style: solid; overflow: hidden; background-color: #FFFFFF; margin: 0 0 1em 0; padding: 0.6em 0.6em 0.2em 0.6em; clear: both;}
div.pane label { font-weight: bold; width: 20em; float: left; margin-top: 0.3em; clear: left; }
div.pane br { clear: both !important; }
div.pane span { margin: 0.3em 0.3em 1em 0.3em; }
div.pane img { margin: 0 0.3em 0.3em 0; vertical-align: top;}
div.pane input { margin-bottom: 0.3em; }
div.pane table { margin-bottom: 0.3em; }
div.pane select { margin-bottom: 0.3em; }
div.pane textarea {margin-bottom: 0.3em; }

div.formRight { text-align: right; overflow: hidden; background-color: #FFFFFF; margin: 0px; padding: 0 0.6em 0.6em 0.6em; }

#files span { font-weight: bold; }
#files select { margin-left: 5px; }
#files select#select_reference { margin-left: 0; }

/* Tables */
td.right { text-align: right; }
td.center { text-align: center; }
td.light { color: #243F59; background-color: #EAF0F7; }
td.dark { color: #243F59; background-color: #BED1E4; }
td.thin { width: 1px; }
td.thinButton { width: 55px; }
tr.light { color: #243F59; background-color: #EAF0F7; }
tr.dark { color: #243F59; background-color: #BED1E4; }
tr.heading, tr.heading a  { color: #fff; background-color: #375F86; }
th.right { text-align: right; }
table.values { width: 100%; border-collapse: collapse; }
table.values > tbody > tr > th { padding: 4px; }
table.values > tbody > tr > td { padding: 6px 4px 6px 4px; }
table.values .num { text-align:right; padding-right:1em; }
table.options { padding: 0px; margin: 0px; border-collapse: collapse; }
table.options > tbody > tr > td { padding: 0px; margin: 0px; }
table.options > tbody > tr > td input { margin: 0px; }
table.specs { padding: 0px; margin: 0px; border-collapse: collapse; }
table.specs td { padding: 0px; margin: 0px; }
table.specs td input { margin: 0px; }
table.products { width: 100%; border-collapse: collapse; }
table.products td { padding: 6px 4px 6px 4px; border-bottom: 1px solid #D2DFEC; }
table.products .out-of-stock td { background-color:#CCC; }

table.AdminTable > tbody > tr > td.pre { white-space:pre; }
table.AdminTable > tbody > tr > td, table.AdminTable > tbody > tr > th { border: 1px solid #598ABB; }
table.AdminTable { width:auto; }
table.inside-table {font-size: 14px;}

a.moveProduct img { margin:3px; }

/* Categories */
div.container div { background-color: #5688BA; overflow: hidden; padding: 2px 0 2px 0px; }
div.container table { border-collapse: collapse; width: 100%; }
div.container table td.fit { width: 40px; }
div.container div h1 { margin-left: 5px; color: #FFFFFF; }
div.container div h1 a { color: #FFFFFF; }
div.container div img { padding: 0px; margin: 0px; color: #FFFFFF; vertical-align: middle; }

/* Error Messages */
div.error { font-family: Verdana, Arial, sans-serif; border-top: 1px solid #E0B2B2; border-left: 1px solid #E0B2B2; border-bottom: 1px solid #990000; border-right: 1px solid #990000; background-color: #FFF0F0; color: #990000; padding: 5px 5px 5px 43px; margin: 10px 0px 10px 0px; text-align: left; background: url(/images/admin/error.png) 5px 5px no-repeat #FFF0F0; }
div.error h3 { font-size: 1.2em; font-weight: bold; color: #990000; margin: 0px; }
div.error hr { border-bottom: 1px solid #E0B2B2; border-top: none; border-left: none; border-right: none; height: 1px; }
/*div.alert p { font-size: 10px; color: #990000; font-weight: normal; margin: 0px; padding: 0px; }
div.alert a { font-weight: bold; }

/* Alert Messages/*
div.alert { font-family: Verdana, Arial, sans-serif; border-top: 1px solid #FFDC93; border-left: 1px solid #FFDC93; border-bottom: 1px solid #F0A300; border-right: 1px solid #F0A300; background-color: #FFFFCC; color: #333333; padding: 5px 5px 5px 43px; margin: 10px 0px 10px 0px; text-align: left; background: url(/images/admin/warning.png) 5px 5px no-repeat #FFFFCC; }
div.alert h3 { font-size: 1.2em; font-weight: bold; color: #333333; margin: 0px; }
div.alert hr { border-bottom: 1px solid #F0A300; border-top: none; border-left: none; border-right: none; height: 1px; }
div.alert p { font-size: 10px; color: #333333; font-weight: normal; margin: 0px; padding: 0px; }
div.alert a { font-weight: bold; }*/
*/
/* Other Messages */
div.message { font-family: Verdana, Arial, sans-serif; border: 1px solid #AFA; background-color: #CFC; color: #333333; padding: 5px 5px 5px 43px; margin: 10px 0px 10px 0px; text-align: left; background: url(/images/admin/tick.gif) 5px 5px no-repeat #CFC; }
div.message h3 { font-size: 1.2em; font-weight: bold; color: #333333; margin: 0px; }
div.message hr { border-bottom: 1px solid #F0A300; border-top: none; border-left: none; border-right: none; height: 1px; }
div.message p { font-size: 10px; color: #333333; font-weight: normal; margin: 0px; padding: 0px; }
div.message a { font-weight: bold; }

/* Tabs */
#tabHeader { width:100%; font-size:93%; line-height:normal; background: url(/images/admin/tabs/bg.png) bottom left repeat-x; overflow: hidden; }
#tabHeader a { display:block; padding: 3px 0.3em; font-size: 1.1em !important; font-weight: normal !important; color: #333333 !important; text-decoration: none; }
#tabHeader ul { margin:0; padding:0 0 0 1px; list-style:none; overflow: hidden; }
#tabHeader li {	float: left; background:url(/images/admin/tabs/right.png) no-repeat right 0px; margin: 0 2px 0 0; padding:0; border-bottom: 1px solid #91A7B4; cursor: pointer; }
#tabHeader li a { background:url(/images/admin/tabs/left.png) no-repeat left 0px; }
#tabHeader li.active { border-bottom: 1px solid #FFFFFF; }

.nav_location { background-color:#DDF; margin-bottom:1em; padding:2px; }

.product-link div {display:none}
.product-link:hover div { display:block; position:absolute; margin: -200px 0 0 400px; width:260px; height:260px; border-radius:10px; border:1px solid #666; overflow:hidden; background-color:white }

#prod_img_static { height:200px; width:200px; display:none; position:fixed; top: 200px; left: 600px; width:260px; height:260px; border-radius:10px; border:1px solid #666; overflow:hidden; background-color:white; z-index:20; text-align:center; }

.hidden {
    display: none;
}
.show {
    display: block;
}
[clear="all"]{
    clear: both;
    display: block;
}
/* new */

:root {
    --content: #5EBEC4;
    --costumer: #82a4c7;;
    /* --marketing: #FF6A3D; */
    --marketing: #f7776a;
    --white: #fff;
    --color-1: #f1f1f1;
    --quick: #6c757d;
    --finance: #87bb80;
    --finance-dark: #70916c;
    --dressing:  #005241;
    --cellar: #971111;
    --logistics: #8f8fbe;
    --dev-tools: #63615e;
}

body#backoffice  {
    margin: 0;
    font-family: "Rubik", sans-serif;
    color: #333;
    background-color: var(--color-1);
}
body#backoffice a.active{
    color: #fb240d;
    font-weight: 500;
    text-decoration: none;
    background-color: transparent;
}
body#backoffice a{
    font-weight: 500;
    color: #333;
    text-decoration: none;
    background-color: transparent;
}

.switch { float: left;min-width: 30px;position: relative;margin-top: 3px;}
.switch a {font-size: 21px; color:#FFFFFF ; }

header {
  /*  height: 65px;*/
    box-shadow: 10px 5px 5px #e7e7e7;
    border-bottom: 1px solid #E7E7E7;
    z-index: 9;
}

.header-middle { display: flex; background-color: #f1f1f1; }
.header-middle a { color:#333}
.logo { flex: 4; padding: 0 15px;}
.logo img{height: 65px;}
.user-logged {font-size: 15px;padding: 15px; margin-top: 5px;}
.zone {padding: 15px; margin: 0.5em 0 0.5em 0;}
.language {padding: 15px; margin: 0.5em 0 0.5em 0;}
.logout {font-size: 25px;}
.logout .fa{padding: 20px;}
.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
    height: calc(100vh - 80px);
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}
.sidebar {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
    box-shadow: inset -1px 0 0 rgb(0 0 0 / 10%);
}

.first-menu {
    display: flex;
    margin: 10px 0;
}

.costumer {
    flex:3;
    padding: 10px 0;
    cursor: pointer;
    color: var(--white);
    font-size: 15px;
}

.finance {
    flex:3;
    padding: 10px 0;
    cursor: pointer;
    color: var(--white);
    font-size: 15px;
}

.marketing {
    flex:3;
    padding: 10px 0;
    cursor: pointer;
    color: var(--white);
    font-size: 15px;

}
.content {
    flex:3;
    padding: 10px 0;
    cursor: pointer;
    color: var(--white);
    font-size: 15px;
}

.logistics {
    flex:3;
    padding: 10px 0;
    cursor: pointer;
    color: var(--white);
    font-size: 15px;
}

.devTools {
    flex:3;
    padding: 10px 0;
    font-size: 15px;
}

.finance-sub {
    color: var(--finance);
    box-shadow: 10px 5px 5px #e7e7e7;
    background-color: var(--white);
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #f8f6f6;
}
.marketing-sub {
    color: var(--marketing);
    box-shadow: 10px 5px 5px #e7e7e7;
    background-color: var(--white);
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #f8f6f6;
}

.content-sub {
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: var(--content);
    box-shadow: 10px 5px 5px #e7e7e7;
    background-color: var(--white);
    border-radius: 5px;
    border: 1px solid #f8f6f6;
}

.costumer-sub {
    color: var(--costumer);
    box-shadow: 10px 5px 5px #e7e7e7;
    background-color: var(--white);
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #f8f6f6;
}
.logistics-sub {
    color: var(--logistics);
    box-shadow: 10px 5px 5px #e7e7e7;
    background-color: var(--white);
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #f8f6f6;
}
.logistics-sub {
    color: var(--logistics);
    box-shadow: 10px 5px 5px #e7e7e7;
    background-color: var(--white);
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #f8f6f6;
}
.costumer-sub span{
    font-size: 30px;
}

.content-sub span{
    font-size: 30px;
}
.finance-sub span {
    font-size: 30px;
}

.marketing-sub span {
    font-size: 30px;
}

.logistics-sub span {
    font-size: 30px;
}

.second-menu {
    padding: 0 15px;
}

.second-menu a {
    color: #333;
    font-weight: 400;
}

.second-menu a:hover {
    color: var(--marketing);
    text-decoration: none;
}
.quick-container {
    width:100%;
    margin: 15px 0 25px;
    border-radius: 5px;
    background-color: var(--white);
    box-shadow: 10px 5px 5px #e7e7e7;
    border: 1px solid #f8f6f6;
}
.quick-container span{
    padding: 10px;
    padding: 10px;
    color: var(--quick);
    font-size: 20px;
}

.quick-container .info {
    color:#333;
    padding: 30px 0;
    margin: 0 15px;
    align-items: end;
}

.quick-container .info .col{
    height: 50px;
    font-size: 15px;
}

.costumer-container {
    width:100%;
    margin: 15px 0 25px;
    border-radius: 5px;
    background-color: var(--white);
    box-shadow: 10px 5px 5px #e7e7e7;
}

.costumer-container .pin .active{
    font-size: 30px;
}

.costumer-container span{
    padding: 10px;
    padding: 10px;
    color: var(--costumer);
    font-size: 20px;
}


.costumer-container .info {
    color:#333;
    padding: 30px;
    margin: 0 15px;
}

.costumer-container .info .col{
    height: 50px;
    font-size: 15px;
}

.costumer-container .title {
    padding:0 15px;
    height: 50px;
    color: var(--white);
    background-color: var(--costumer);
    font-size: 18px;
    display: flex;
    align-items: center;
}

.costumer-container .pin {
    width: 100%;
    text-align: right;
}

.costumer-container .pin .active{
    font-size: 30px;
}

.marketing-container {
    width:100%;
    margin: 15px 0 25px;
    border-radius: 5px;
    background-color: var(--white);
    box-shadow: 10px 5px 5px #e7e7e7;
}

.marketing-container span{
    padding: 10px;
    padding: 10px;
    color: var(--marketing);
    font-size: 20px;
}

.marketing-container .pin .active{
    font-size: 30px;
}

.marketing-container .pin {
    width: 100%;
    text-align: right;
}

.finance-container {
    width:100%;
    margin: 15px 0 25px;
    border-radius: 5px;
    background-color: var(--white);
    box-shadow: 10px 5px 5px #e7e7e7;
}

.finance-container span {
    padding: 10px;
    padding: 10px;
    color: var(--finance);
    font-size: 20px;

}

.finance-container .pin .active{
    font-size: 30px;
}

.finance-container .pin {
    width: 100%;
    text-align: right;
}

.logistics-container {
    width:100%;
    margin: 15px 0 25px;
    border-radius: 5px;
    background-color: var(--white);
    box-shadow: 10px 5px 5px #e7e7e7;
}

.logistics-container span {
    padding: 10px;
    padding: 10px;
    color: var(--logistics);
    font-size: 20px;

}

.logistics-container .pin .active{
    font-size: 30px;
}

.logistics-container .pin {
    width: 100%;
    text-align: right;
}

.dev-container {
    width:100%;
    margin: 15px 0 25px;
    border-radius: 5px;
    background-color: var(--white);
    box-shadow: 10px 5px 5px #e7e7e7;
}

.dev-container span {
    padding: 10px;
    padding: 10px;
    color: var(--dev-tools);
    font-size: 20px;

}

.content-container {
    width:100%;
    margin: 15px 0 25px;
    border-radius: 5px;
    background-color: var(--white);
    box-shadow: 10px 5px 5px #e7e7e7;
}

.content-container span {
    padding: 10px;
    padding: 10px;
    color: var(--content);
    font-size: 20px;
}

.content-container .pin {
    width: 100%;
    text-align: right;
}

.content-container .pin .active{
    font-size: 30px;
}

.marketing-container .title {
    padding:0 15px;
    height: 50px;
    color: var(--white);
    background-color: var(--marketing);
    font-size: 18px;
    display: flex;
    align-items: center;
}

.finance-container .title {
    padding:0 15px;
    height: 50px;
    color: var(--white);
    background-color: var(--finance);
    display: flex;
    align-items: center;
    font-size: 18px;
}

.logistics-container .title {
    padding:0 15px;
    height: 50px;
    color: var(--white);
    background-color: var(--logistics);
    display: flex;
    align-items: center;
    font-size: 18px;
}

.dev-container .title {
    padding:0 15px;
    height: 50px;
    color: var(--white);
    background-color: var(--dev-tools);
    display: flex;
    align-items: center;
    font-size: 18px;
}

.content-container .title {
    padding:0 15px;
    height: 50px;
    color: var(--white);
    background-color: var(--content);
    display: flex;
    align-items: center;
    font-size: 18px;
}

.content-container .info {
    color:#333;
    padding: 30px;
    margin: 0 15px;
}

.content-container .info .col{
    height: 50px;
    font-size: 15px;
}

.finance-container .info {
    color:#333;
    padding: 30px;
    margin: 0 15px;
}

.finance-container .info .col{
    height: 50px;
    font-size: 15px;
}

.logistics-container .info {
    color:#333;
    padding: 30px;
    margin: 0 15px;
}

.logistics-container .info .col{
    height: 50px;
    font-size: 15px;
}

.dev-container .info {
    color:#333;
    padding: 30px;
    margin: 0 15px;
}

.dev-container .info .col{
    height: 50px;
    font-size: 15px;
}

.marketing-container .info {
    color:#333;
    padding: 30px;
    margin: 0 15px;
}

.marketing-container .info .col{
    height: 50px;
    font-size: 15px;
}

.dropdown-toggle { outline: 0; }

.content-info {
    width: 100%;
    float: left;
    position: relative;
    padding: 0 0 0 30px;
}

.admin-mode {
    width: 100%;
    height: 100px;
    text-align: right;
    padding: 30px 0px;
}

.admin-mode .fa {
    padding: 5px;
}


.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }

.exchange {
    color: #fff;
    width: 35px;
    float: left;
    font-size: 20px;
}

.goto {
    color:#fff!important;
}

.msg {
    color:#333;
    font-size: 10px;
    padding: 0 4em;
}
.green {
    color:green!important;
}

.coral {
    color:#9DAAF2!important;
}
.other-pink {
    color: #bf436c!important;
}
.other-green {
    color: darkolivegreen!important;
}

.quick-access {
    padding: 0 15px;
}

.quick-access input.text {
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    margin: 0 8px;
    width: 50%;
}
.editable {
    display: flex;
}

.limit_char {
    display: block;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #375F86; background-color: #FFFFFF; vertical-align: top; text-align: justify; margin: 0px; padding: 0px;}
h1 { font-size: 18px; font-weight: bold; margin: 0px;}
h2 { font-size: 16px; font-weight: bold; margin: 10px 0px 0px;}
h3 { font-size: 14px; font-weight: bold; margin: 0px;}
iframe { border: none;}
.current { height: 30px; vertical-align: middle; text-align: center; line-height: 30px;}
form { margin: 0px;}
p { margin-top: 10px; margin-bottom: 0px;}
a { font-size: 10px; font-weight: bold; color: #243F59; text-decoration: none; cursor: pointer;}
a:hover { font-size: 10px; font-weight: bold; color: #243F59; text-decoration: underline; cursor: pointer;}
td { font-size: 10px; color: #375F86; text-align: justify;}
input { font-size: 11px; color: #375F86; border: 1px solid #84AACC; background-color: #F0F4F9;}
textarea { font-size: 11px; color: #375F86; background-color: #F0F4F9; border: 1px solid #375F86;}
select { font-size: 11px; color: #375F86; background-color: #F0F4F9; border: 1px solid #375F86;}
.checkbox { border: none; background-color: #FFFFFF;}
img { border: none; behavior: url("/lib/lib_PNG.htc");}

ul { padding: 0px 0px 0px 13px; margin: 0px;}
li { list-style-image: url(../images/admin/arrow.png);}
.inverse { list-style-image: url(../images/admin/arrow_inv.png);}


.sendPassword { font-size: 9px; font-weight: normal;}
.sendPassword:hover { font-size: 9px; font-weight: normal;}
.logo { background-color: #375F86;}
.actions { background-color: #598ABB; vertical-align: bottom;}
.navbar { background-color: #598ABB; font-size: 10px; font-weight: bold; color: #FFFFFF; padding: 0px; vertical-align: top; width: 166px;}
.nav { font-size: 10px; color: #FFFFFF; background-color: #598ABB; padding: 2px 2px 2px 5px;}
.navLine { background-image: url(../images/admin/sep.png); background-repeat: repeat-x; background-position: 0px 8px; padding-top: 2px; padding-bottom: 2px;}
.navHeader { font-size: 11px; background-color: #598ABB; padding: 2px;}
.content { font-size: 10px; color: #375F86; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #375F86; padding: 5px; background-color: #FFFFFF; vertical-align: top; text-align: justify;}
.border { border-left-width: 1px; border-left-style: solid; border-left-color: #375686; border-right-width: 1px; border-right-style: solid; border-right-color: #375686; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #375686; padding: 7px;}
.login { background-image: url(../images/admin/loginbg.png); background-repeat: no-repeat; background-position: top right;}
#alert { width: 250px; border: 1px solid #000000; position: relative; left: -130px; top: -83px; background: #FFFFCC; padding: 5px; visibility: hidden; text-align: justify;}
#alert .warning { float: left; width: 32px; height: 32px;}
#alert .warningText { float: left; width: 80%; padding-left: 5px;}
.right { text-align: right;}
.center { text-align: center;}
div table { margin-left: auto; margin-right: auto;}


.white { font-size: 10px; font-weight: bold; color: #FFFFFF; text-decoration: none; cursor: pointer;}
.white:hover { font-size: 10px; font-weight: bold; color: #FFFFFF; text-decoration: underline; cursor: pointer;}
.navLink { font-size: 10px; font-weight: normal; color: #FFFFFF; text-decoration: none; cursor: pointer;}
.navLink:hover { font-size: 10px; font-weight: normal; color: #FFFFFF; cursor: pointer; text-decoration: underline;}
.title { font-size: 18px; font-weight: bold;}
.subTitle { font-size: 16px; font-weight: bold;}
.subSubTitle { font-size: 14px; font-weight: bold;}

.icon { font-size: 9px; text-align: center; width: 90px;}
.iconLink { font-size: 9px; font-weight: normal; text-decoration: none;}
.iconLink:hover { font-size: 9px; font-weight: normal; text-decoration: underline;}
.heading { font-size: 10px; font-weight: bold; color: #FFFFFF; background-color: #375F86; vertical-align: middle; padding: 4px;}
.field { font-size: 10px; font-weight: bold; color: #375F86; text-align: left; vertical-align: middle; padding: 6px; }
.copyright { font-size: 9px; font-weight: normal; color: #375F86; background-color: #FFFFFF; text-align: center; vertical-align: bottom; padding: 10px;}
.submit { font-size: 10px; color: #000000; background-image: url(../images/admin/button.png); border: none; width: 100px; height: 22px;}
.button { font-size: 10px; color: #000000; background-image: url(../images/admin/button.png); border: none; width: 100px; height: 22px; vertical-align: middle; text-align: center; padding: 0px;}
.plainButton { border: none; background-color: #FFFFFF; padding: 0px; margin: 0px;}



.plain { font-size: 10px; color: #375F86; padding: 3px; background-color: #FFFFFF; vertical-align: top; text-align: justify;}
.light { font-size: 10px; color: #243F59; background-color: #EAF0F7; vertical-align: middle; padding: 4px; text-align: left;}
.dark { font-size: 10px; color: #243F59; background-color: #BED1E4; vertical-align: middle; padding: 4px; text-align: left;}
.darker { font-size: 10px; font-weight: bold; color: #FFFFFF; background-color: #5688BA; vertical-align: middle; padding: 3px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #375F86;}
.sep { border-top: 1px solid #1C2F42; border-bottom: 1px solid #82A7CC;}


*/

#po-table, #koala-table, #goods-table, #sbreports-table, #blorders-table, #bigreturners-table {
    font-size: 12px;
}

#po-table th , #koala-table th, #goods-table th , #aeschbach-table th, 
#outofstock-rules-table th, #sbreports-table th, #blorders-table th, #bigreturners-table th {
    background-color: #fff;
    color: #333;
}

#po-table_wrapper #po-table_filter  {
    width: 100%;
    float: right;
}
.finance .dt-button-collection {
    margin-top: 5.5px!important;
}

.finance .page-title {
    margin: 20px 0;
    width: 100%;
    float: left;
    background-color: var(--finance);
    padding: 10px;
    box-shadow: 10px 5px 5px #e7e7e7;
    border: 1px solid #f8f6f614;
    color: var(--white);
    font-family: 'Open Sans', sans-serif;
}

.page-title h1 {
    margin-bottom: 0;
    font-weight: 300;
}
.page-title h1 i{
    padding: 0 10px;
}

#po-table_wrapper .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--finance);
    border-color: var(--finance);
}

#po-table_wrapper .page-link {
    color: #333;
}

#po-table_wrapper .custom-select:focus {
    border-color: #87bb80a1;
    box-shadow: 0 0 0 0.2rem rgb(135 187 128 / 25%);
}

#goods-table_wrapper .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--finance);
    border-color: var(--finance);
}

.finance #po-table_wrapper .custom-select option:focus {
    background-color:  var(--finance)!important;
}

.finance #po-table_wrapper a {
    color: var(--finance);
}

.finance #po-table_wrapper a:hover {
    text-decoration: none;
    color: var(--finance-dark);
}

.finance #goods-table_wrapper a {
    color: var(--finance);
}

.finance #goods-table_wrapper a:hover {
    text-decoration: none;
    color: var(--finance-dark);
}

.finance #goods-table_wrapper button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    padding: 0 16px;
    /* background-color: var(--finance); */
    background-color: #fff;
    border-radius: 0.25rem;
    /*border: 1px solid #dddbda;*/
    border: 1px solid var(--finance);
    color: #212529;
    font-size: 13px;
    line-height: 30px;
    font-weight: 400;
    text-align: center;
}

.finance #goods-table_wrapper button:hover {
    background-color: #ebe9e8;
}

.finance #goods-table_wrapper input {
    border: 0;
    outline: 0;
    color: rgb(60, 66, 87);
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px;
    border-radius: 4px;
    line-height: 20px;
    font-weight: 400;
    padding: 4px 8px;
    min-height: 28px;
    vertical-align: middle;
    transition: background-color .24s,box-shadow .24s;
    transition-property: background-color, box-shadow;
    transition-duration: 0.24s, 0.24s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
}

.finance #sbreports-table_wrapper a {
    color: var(--finance);
}

.finance #sbreports-table_wrapper .page-item.active a{
    background-color: #fff;
    border-color: var(--finance)
}


.finance #blorders-table_wrapper a {
    color: var(--finance);
}

.finance #blorders-table_wrapper .page-item.active a{
    background-color: #fff;
    border-color: var(--finance)
}

.finance #bigreturners-table_wrapper a {
    color: var(--finance);
}

.finance #bigreturners-table_wrapper .page-item.active a{
    background-color: #fff;
    border-color: var(--finance)
}


.finance .lemon {
    background-color: #eaf0cc !important;
}

.finance .header-message {
    color: #212529;
    font-size: 12px;
}

.finance .btn-primary {
    background-color: var(--finance);
    border-color: var(--finance);
}

.finance .btn-primary:hover {
    background-color: var(--finance-dark);
    border-color: var(--finance-dark);
}

.finance .btn-primary:active {
    background-color: var(--finance-dark)!important;
    border-color: var(--finance-dark)!important;
}

.finance label {
    color:#333;
}

.finance .modal-header {
    color: #333;
}
.font-size-7 {
    font-size: 7px;
}

.status-dots i:nth-child(1) {
    color: rgb(160, 160, 160);
}

.status-dots i:nth-child(2) {
    color: rgb(110, 194, 0);
}

.status-dots i:nth-child(3) {
    color: rgb(77, 170, 0);
}

.status-dots i:nth-child(4) {
    color: rgb(0, 139, 19);
}
.status-dots i:nth-child(5) {
    color: rgb(0, 87, 43);
}
.status-dots i:nth-child(6) {
    color: red;
}

div.dataTables_filter label{
    text-align: right!important;
    float: right;
}
.buttons-excel {
    text-align: right;
    float: right;
}

.information {
    margin: 20px 0 40px 0;
    display: flex;
    flex-direction: column;
}
.information .title {
    margin: 15px;
    border-bottom: 1px solid #f1f1f1;
    color: #8a8a8a;
}
.information .subtitle{
    color: #8a8a8a;
}
.legend-detail {
    display: flex;
}
.status-legend {
    display: flex;
    gap: 12px;
}
.status-1::before {
    content: "\f05e";
    font-family: 'Font Awesome 6 Pro';
    padding: 0 10px;

}
.status-2::before {
    content: "\e59b";
    font-family: 'Font Awesome 6 Pro';
    padding: 0 10px;
}
.status-3::before {
    content: "\f48c";
    font-family: 'Font Awesome 6 Pro';
    padding: 0 10px;
}
.status-4::before {
    content: "\f571";
    font-family: 'Font Awesome 6 Pro';
    padding: 0 10px;
}
.status-5::before {
    content: "\f49c";
    font-family: 'Font Awesome 6 Pro';
    padding: 0 10px;
}

.information .first {
    width: 3vw;
}

.status-legend .status {
    width: 2vw;
}
.legend-dots {
    visibility: hidden;
    width: auto;
    background-color: #7fa37b;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    left: 10%;
}

.status-dots:hover .legend-dots {
    visibility: visible;
}

.orders-label {
    position: relative;
}

.order_detail_info {
    cursor: pointer;
}

.legend_detail {
    visibility: hidden;
    width: 175%;
    background-color: #82a4c7;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    margin-top: 5%;
    font-size: 10px;
    line-height: 1.3;
    text-transform: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.liveProductSign:hover .legend_detail {
    width: auto;
    margin-top: 1%;
    visibility: visible;
}

.order_detail_info:hover .legend_detail {
    visibility: visible;
}

.text-right {
    text-align: right;
}
.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-container.space-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
    justify-content: space-around;
}
.flex-container-column {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-center {
    align-items: center;
}
.cellar {
    color: var(--cellar)!important;
}

.dressing {
    color: var(--dressing)!important;
}

#new-modal .modal-dialog , #prices-modal .modal-dialog {
    max-width: 75%!important;
}

.inline-flex {
   display: inline-flex;
}

#info-products tbody, #order-products tbody{
  color:#000;
}

#info-products th {
    min-width: 90px;
}

.txt-red {
    color: red;
}

.filter-form {
    color:#000;
}

.menu-filters {
    width: 100%;
    float: left;
    min-height: 75px;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.menu-filters input {
    margin-right: 10px;
}

.menu-filters #btn {
    margin-top: 10px;
}

#koala-table .not {
    background-color: #ff8282;
    color: white;
}
#koala-table .invoice {
    background-color: #ffb082;
    color: white;
}

#koala-table .manual , #koala-table .invoice.paid{
    background-color: #188f007c;
    color: white;
}

#koala-table .borderRed {
    border: 2px solid red;
}

.koalita-list {
    display: flex;
    position: relative;
    justify-content: space-around;
}

.koalita-list .koalita-setup {
    float: left;
    position: relative;
    margin-bottom: 1em;
}

.koalita-wrapper {
    position: relative;
}

.koalita-wrapper .is-visible {
    position: relative;
    z-index: 5;
}

.koalita-header {
    position: relative;
    z-index: 1;
    height: auto;
    padding: 1.9em 0.9em 1.6em;
    pointer-events: auto;
    text-align: center;
    color: var(--finance);
    background-color: transparent;
    box-shadow: 10px 5px 5px #e7e7e7;
    border-bottom: 1px solid #E7E7E7;
}

.koalita-header h2 {
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 3px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
}

.koalita-info {
    color:black;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 10px;
}

.kc-value {
    font-size: 3.5rem;
}

.kc-label {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.kc-label::before {
    content: '/';
    margin-right: 2px;
}

.po-title {
    margin-bottom: 1%;
}

.po-info {
    margin-bottom: 1%;
}

#koalita-table th {
    background-color: var(--finance);
    color: #fff;
    text-align: center;
    vertical-align: middle;
    width: 10%;
}

.koalita-body {
    padding: 15px;
}

#koalita-table .koalita-body th{
    background-color: #e6e6e6;
    color: #333;
    border: none;
}

#koalita-pagination {
    padding: 10px 0;
}

#koalita-pagination ul, #koalita-pagination li {
    list-style: none;
    display: inline;
    padding-left: 0px;
}

#koalita-pagination a {
    border: solid 1px black;
    border-radius: 0.2rem;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
}

#koalita-pagination li a:hover{
    color: white;
    background-color: black;
}

.koalita-body {
    font-size: 12px;
}

.koalita-body thead .koalita_pn {
    min-width: 25vw;
 }

.allFeed {
   display: none;
}

#spinner , #spinner_gen { display:none; color: #000; }
#spinner.busy , #spinner_gen.busy { display:block!important; }

.align-spinner {
    float:right;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

#spinner { display:none; color: #000; }
#spinner.busy { display:block!important; }

.align-spinner {
    float:right;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.btn-primary:focus {
    color: #fff;
    background-color: var(--finance-dark)!important;
    border-color:var(--finance)!important;
    box-shadow: 0 0 0 0.2rem rgba(5, 54, 7, 0.5)!important;
}
#duplo-table th {
    background-color: var(--finance)!important;
}

.px-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.legend-ae {
    visibility: hidden;
    width: auto;
    background-color: #7fa37b;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    right: 10%;
}

.status-ae:hover .legend-ae {
    visibility: visible;
}

.delete-sup-codes {
    color: var(--quick);
}

.delete-sup-codes #supplier-input {
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    margin: 0 8px;
    width: 50%;
}

.delete-sup-codes #supplier-input:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.delete-sup-codes .text-area {
    margin-top: 2%;
}

.delete-sup-codes #product-list {
    width: 50%;
}

.delete-sup-codes #product-list:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.delete-sup-codes .button-display {
    margin-top: 0.5%;
    margin-bottom: 0.5%;
}

.delete-sup-codes #reset-form {
    margin-top: 0.5%;
}

.clear-cache {
    color: var(--quick);
}

.clear-cache .clear-folder {
    margin-bottom: 2%;
}
.clear-cache .folder-name {
    margin-bottom: 2%;
}

.editor-tabs {
    margin-bottom: 1%;
}

@media screen and (max-width: 1200px) {
    .search {
        display: block;
    }
    .info {
        align-items: center!important;
    }
    .angular {
        float: left;
    }
    #info-products th {
        min-width: 60px;
        font: 12px;
    }
    #new-modal .modal-dialog {
        max-width: 90%!important;
    }
}

@media screen and (max-width: 980px) {

    .koalita-list {
        flex-wrap: wrap;
    }

    .koalita-list .koalita-setup {
        flex: 50%;
    }

    .koalita-wrapper {
        width: 100%;
    }

}