html, body{
	font-family: Raleway, KaputaUnicode;
	padding: 0px;
	margin: 0px;
	border: 0px none;
	/*text-shadow: 0px 0px 0.1px;
	overflow: hidden;*/
}

a{
	text-decoration: none;
	color: #344899;
	cursor: pointer;
}

a:hover, a:active, a.active{
	text-shadow: 0px 0px 0.1px;
}

*:focus {
    outline: 0px none;/*1px solid rgba(187, 78, 158, 0.1);*/
    border: 0px none;
}

table{
	border-collapse: collapse;
}

sup{
	display: inline-block;
	margin-top: -3px;
	font-size: 0.75em;
}

header{
	height: 52px;
	background-color: #ffffff;
	color: #828282;
	z-index: 20;
	position: fixed;
	width: 100%;
	box-shadow: 0px 0px 10px -4px #000000;
}
header div#user{
	text-align: right;
}
header div#user.new{
	padding: 11px 6px 12px 6px;
}
header div#user.reg{
	padding: 17px 6px 12px 6px;
}
header a{
	color: #386dee;
}
header a span.icon{
	font-weight: bolder;
	color: #386dee;
	width: 23px;
	padding: 7px 7px;
	margin: -2px;
	border: 1px solid transparent;
	font-size: 12pt;
	vertical-align: 0px;
	border-radius: 50%;
}
header a:hover span.icon{
	background-color: #f0f8ff;
	border: 1px solid rgba(213, 241, 255, 0.6);
}
header a:active span.icon{
	background-color: #ecf6f7;
	border: 1px solid rgba(178, 206, 244, 0.59);
}
a span.text, a.both span{
	display: inline-block;
	max-width: 130px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
a span.icon{
	display: none !important;
	padding: 12px 3px 14px 3px;
	margin: 0px 3px;
	vertical-align: -4px;
	font-size: 18px;
}
a span.mobile-only, .mobile-only{
	display: none !important;
}
header form{
	margin: 0px 0px 0px 6px;
	padding: 0px;
	display: inline-block;
	vertical-align: 14px;
	/*transition: margin-left 0.5s;*/
}
header form input[type="text"]{
	background-color: #f4f4f4;
	width: 160px;
}
header form button{
	background-color: transparent;
	height: 32px;
	width: 32px;
	min-width: 32px;
	color: #828282;
	margin-left: -35px;
}
header form button, header form button:active{
	box-shadow: none;
	border-radius: none;
	transform: translateY(2px);
}
header form button:hover{
	background-color: transparent;
}
/*header form span.mbri-menu{
	display: inline-block;
	font-size: 16pt;
	vertical-align: -4px;
	margin: 0px 10px 0px 0px;
	display: none;
}*/
header #input-lang{
	min-width: auto;
}
header #user.new #input-lang{
	vertical-align: 0px;
	margin: 0px 0px 0px 4px;
}
header #user.reg #input-lang{
	vertical-align: 5px;
	margin: -6px 0px 0px 4px;
}

/*nav{
	width: 200px;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	/*background-color: rgba(255, 242, 146, 0.5);* /
	background-color: rgba(181, 166, 180, 0.7);
	margin-left: 0px;
	transition: margin-left 0.5s, background-color 0.5s;
}*/
header img#logo{
	height: 38px;
	margin: 5px 0px 0px 3px;
}
header h1{
	display: inline-block;
	margin: 0px 0px 0px 3px;
	vertical-align: 11px;
	color: #9a4095;
	font-size: 16pt;
}

/*nav ul{
	list-style-type: none;
	margin: 0px 0px 0px 0px;
	/*position:relative;
	top: 48px;* /
	padding: 0px;
}

nav ul li a{
	display: inline-block;
	padding: 10px 0px 10px 16px;
	width: 183px;
}

nav ul li a span.mbri{
	font-size: 20pt;
	vertical-align: -5px;
	margin-right: 5px;
	/*color: #8DC63F;* /
	color: #61931b;
}*/

content{
	position: absolute;
	background-color: #eff2f6;
	width: calc(100vw - 0px);
	height: calc(100vh - 71px);
	top: 52px;
	/*padding-bottom: 22px;*/
	overflow-y: scroll;
	overflow-x: hidden;
	/*transition: left 0.5s, width 0.5s;
	box-shadow: inset 0px 1px 10px -5px;*/
}

.vscroll{
	padding-right: 10px;
	margin-right: -10px;
	overflow:scroll;
	max-height: 80vh;
	overflow-x:hidden;
	overflow-y:auto;
}

/* ================================= */

p{
	margin: 8px 0px;
}
large, .large{
	font-size: 1.3em !important;
	vertical-align: middle;
}
.button.large{
	height: 38px;
}
small{
	line-height: 0.8em;
}
huge, .huge{
	/*font-family: Raleway, KaputaUnicode;*/
	font-size: 2.5em;
	line-height: 1em;
}
.red{
	color: red;
}
.green{
	color: green;
}

.row{
	float:left;
	width:calc(100% + 10px);
	margin: 0px -5px;
}
ul.row{
	margin: 0px -5px;
	padding: 0px;
	list-style-type: none;
}
ul.row li{
	display: inline-block;
	float: left;
}
.row-loose, ul.row-loose{
	width:calc(100% + 40px);
	margin: 0px -20px;
}
.row .vspace{
	margin-bottom: 20px;
}

.row .col-1, .row .col-2, .row .col-3,
.row .col-4, .row .col-5, .row .col-6,
.row .col-7, .row .col-8, .row .col-9,
.row .col-10, .row .col-11,
.row .col-12, .row .col-half{
	display: inline-block;
	float: left;
	padding: 0px 5px;
}
.row .col-1{
	width:calc(8.33% - 10px);
}
.row .col-2{
	width:calc(16.66% - 10px);
}
.row .col-3{
	width:calc(25% - 10px);
}

.row .col-4{
	width:calc(33.33% - 10px);
}
.row-loose .col-4{
	width:calc(33.33% - 40px);
	padding: 0px 20px;
}

.row .col-5{
	width:calc(41.66% - 10px);
}

.row .col-6, .row .col-half{
	width:calc(50% - 10px);
}
.row-loose .col-6, .row-loose .col-half{
	width:calc(50% - 40px);
	padding: 0px 20px;
}

.row .col-7{
	width:calc(58.33% - 10px);
}
.row .col-8{
	width:calc(66.66% - 10px);
}
.row .col-9{
	width:calc(75% - 10px);
}
.row .col-10{
	width:calc(83.33% - 10px);
}
.row .col-11{
	width:calc(91.66% - 10px);
}
.row .col-12{
	width:calc(100% - 10px);
}

.row hr{
	clear: both;
	border: 0px none;
	background-color: rgba(194, 206, 232, 0.5);
	height: 1px;
	margin: 10px;
}
.row br{
	clear: both;
}
.row>[class^="col-"]>hr{
	margin: 10px 5px;
}

.row label{
	margin: 0px 0px 6px 2px;
	font-size: 11pt;
	display: block;
	color: #454d61;
	height: 17px;
}
.row label.inline{
	display: inline;
	height: auto;
}

.card hr{
	clear: both;
	border: 0px none;
	background-color: #f5efed;
	height: 1px;
	/*margin: 10px -15px;*/
	margin: 10px -9px;
	box-shadow: 0px 5px 0px 5px #FFFFFF, 0px 0px 7px rgba(0, 0, 0, 0.3);
}

select, input[type="date"], input[type="text"], input[type="password"], input[type="number"], input[type="email"], textarea, .file-input-wrap, iframe.form-control{
	/*background-color: rgba(247, 232, 228, 0.7);*/
	background-color: rgba(201, 224, 255, 0.2);
	color: #284f7b;
	font-family: Raleway, KaputaUnicode;
	/*font-weight: bold;*/
	font-size: 11pt;
	padding: 5px 8px 6px 8px;
	border: 0px none;
	/*min-width: 150px;*/
	height: 30px;
	border-bottom: 1px solid rgba(40, 72, 123, 0.08);
	box-shadow: inset 0px 3px 8px -6px #3f4c65;
	box-sizing: border-box;
}
select:focus, input[type="date"]:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, textarea:focus, .file-input-wrap:focus, iframe.form-control:focus{
	outline: 2px solid rgba(173, 101, 154, 0.1);
}
input[data-validate="numeric"], input[type="number"]{
	text-align: right;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	margin: -6px -10px -6px 2px;
}
input[type="checkbox"], input[type="radio"]{
	height: 18px;
	width: 18px;
	vertical-align: -4px;
	margin: 0px;
}
input[data-mask]{
	font-family: monospace;
}
textarea{
	height:45px;
	min-height:45px;
}
textarea, .file-input-wrap{
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	display: inline-block;
	/*white-space: nowrap;*/
	overflow: hidden;
	text-overflow: ellipsis;
}
.file-input-wrap input[type="file"]{
	opacity: 0.01;
	float: right;
	width: 1px;
	/*margin-left: -10px;
	margin-right: -10px;*/
}
.row .file-input-wrap{
	height: 30px;
}
.file-input-wrap span.mbri-opened-folder{
	vertical-align: -1px;
}

select.full-width, input[type="date"].full-width, input[type="text"].full-width, input[type="password"].full-width, input[type="number"].full-width, input[type="email"].full-width, iframe.form-control{
	width: 100%;
	box-sizing: border-box;
}
select[readonly], input[type="date"][readonly], input[type="text"][readonly], input[type="password"][readonly], input[type="number"][readonly], input[type="email"][readonly]{
	color: #43474e;
	background-color: #eaeef1;
}

iframe.form-control, .row div#map{
	height: 240px;
}
div#map{
	width: 100%;
	outline: 1px solid rgba(123, 40, 101, 0.125);
}
input[type="checkbox"].form-control{
	display: block;
	height: 30px;
}
/* ================ */
input[type="checkbox"].form-control:before{
    content: "";
    display: block;
    position: relative;
    top: -13px;
    height: 20px;
    width: 54px;
    margin: 4px 0px;
    background-color: rgba(247, 232, 228, 0.7);
    border-bottom: 1px solid rgba(123, 40, 101, 0.08);
    box-shadow: inset 0px 3px 8px -6px #653f5a;
    border-radius: 6px;
}
input[type="checkbox"].form-control:after{
    content: "";
    display: block;
    position: relative;
    top: -41px;
	left: 0px;
    height: 26px;
    width: 26px;
    background-color: #b06aac;
    border: 1px solid rgba(123, 40, 101, 0.3);
    box-shadow: inset 1px 3px 10px -3px #ffffff;
    border-radius: 8px;
	transition: left 0.3s, background-color 0.2s;
}
input[type="checkbox"]:checked.form-control:after{
	left: 25px;
    background-color: #89d8a6;
}
input[type="checkbox"].form-control{
	height: 0px;
	width: 0px;
	margin: 20px 0px 16px 0px;
	z-index: -1;
}
label.float-right.notifications{
	margin-top: 5px;
}
label.float-right.notifications input[type="checkbox"].form-control{
	display: inline-block;
	height: 0px;
	width: 0px;
	margin: 0px 57px 0px 4px;
	vertical-align: 6px;
}
/* ================ */

form.row .vspace.currency span{
	position: relative;
	float: left;
	top: 0.5em;
	left: 10px;
	width: 0px;
	color: rgb(123, 40, 101);
}
input[data-validate="currency"]{
	text-align: right;
}

form.row .vspace span.postfix{
	position: relative;
	float: right;
	top: 0.5em;
	right: 63px;
	width: 0px;
	color: rgb(123, 40, 101);
}

input:-webkit-autofill{
	-webkit-box-shadow: 0 0 35px 10px #f5faff inset;
}

button, input[type="submit"], input[type="button"], .button{
	display: inline-block;
	text-align:center;
	border: 0px none;
	cursor: pointer;
	color: #FFFFFF;
	background-color: rgba(78, 120, 187, 0.8);
	font-family: Raleway, KaputaUnicode;
	font-weight: bold;
	font-size: 11pt;
	padding: 6.5px 9px;
	/*min-width: 150px;*/
	vertical-align: -1px;
	height: 30px;
	margin: 2px 0px;
	box-shadow: 0px 1px 6px -2px rgb(0, 0, 0);
	border-radius: 2.5px;
	box-sizing: border-box;
}
/*i.label{
	padding: 3px;
	height: 30px;
}*/
button, input[type="submit"], input[type="button"], .button{
	margin-right: 6px;
}
.float-right button, .float-right input[type="submit"], .float-right input[type="button"], .float-right .button{
	margin-right: 0px;
	margin-left: 6px;
}
button, input[type="submit"], input[type="button"]{
	vertical-align: 0px;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover, .button.hover{
	background-color: rgb(78, 105, 187);
}
button:active, input[type="submit"]:active, input[type="button"]:active, .button:active, .button.active{
	/*margin-top: 2.5px;
	margin-bottom: 1.5px;*/
	box-shadow: 0px 0px 6px -2.5px rgb(0, 0, 0);
	transform: translateY(1px);
}
button[disabled], input[type="submit"][disabled], input[type="button"][disabled], .button[disabled],
button[disabled]:hover input[type="submit"][disabled]:hover, input[type="button"][disabled]:hover, .button[disabled]:hover{
	cursor: default;
	background-color: rgba(179, 116, 162, 0.8);
	text-shadow: none;
}
*[title]{
    cursor:help !important;
}
a[href] *[title]{
    cursor:pointer !important;
}
button[disabled]:active input[type="submit"][disabled]:active, input[type="button"][disabled]:active, .button[disabled]:active{
	cursor: not-allowed;
	transform: translateY(0px);
	box-shadow: 0px 1px 6px -2px rgb(0, 0, 0);
}
/*table.datatable tr td button:active, table.datatable tr td input[type="submit"]:active, table.datatable tr td input[type="button"]:active, table.datatable tr td .button:active{
	margin-top: -6.5px;
	margin-bottom: -5.5px;
	box-shadow: 0px 0px 8px -3px rgb(0, 0, 0);
}*/

button.green, input[type="submit"].green, input[type="button"].green, .button.green{
	background-color: rgba(81, 186, 79, 0.8);
}
button.green:hover, input[type="submit"].green:hover, input[type="button"].green:hover, .button.green:hover{
	background-color: rgb(81, 186, 79);
}
button[disabled].green, input[type="submit"][disabled].green, input[type="button"][disabled].green,.button[disabled].green,
button[disabled].green:hover, input[type="submit"][disabled].green:hover, input[type="button"][disabled].green:hover,.button[disabled].green:hover{
	background-color: rgba(122, 173, 121, 0.8);
}

button.text, input.text[type="submit"], input.text[type="button"], .button.text{
	background-color: transparent;
	color: rgba(78, 120, 187, 0.9);
	padding: 6.5px 4px;
	box-shadow: none;
}
button.text[disabled], input.text[type="submit"][disabled], input.text[type="button"][disabled], .button.text[disabled], .button.text[disabled]:hover, .button.text[disabled]:active{
	background-color: transparent;
	color: rgba(90, 108, 138, 0.9);
	box-shadow: none;
}

button [class^="mbri-"], button [class*=" mbri-"], .button [class^="mbri-"], .button [class*=" mbri-"], b [class^="mbri-"], b [class*=" mbri-"]{
	font-weight: bold;
	vertical-align: -2px;
}

.button span.mbri{
	font-weight: bolder !important;
	vertical-align: -1px;
}

#flash_messages button, #flash_messages input[type="submit"], #flash_messages input[type="button"], #flash_messages .button{
	min-width: auto;
	margin: -7px 0px -7px 0px;
	vertical-align: 0px;
	line-height: 17px;
}


table.datatable tr td button, table.datatable tr td input[type="submit"], table.datatable tr td input[type="button"], table.datatable tr td .button{
	min-width: auto;
	margin-top: -6px;
	margin-bottom: -6px;
	margin-left: 6px;
	margin-right: 0px;
	opacity: 0.35;
	transition: opacity 0.2s;
}
table.datatable tr:hover td button, table.datatable tr:hover td input[type="submit"], table.datatable tr:hover td input[type="button"], table.datatable tr:hover td .button{
	opacity: 1;
}

table.datatable tr td select, table.datatable tr td input[type="date"], table.datatable tr td input[type="text"], table.datatable tr td input[type="password"], table.datatable tr td input[type="number"], table.datatable tr td input[type="email"]{
	min-width: auto;
	max-width: 100%;
	margin-top: -8px;
	margin-bottom: -8px;
	margin-left: 6px;
	vertical-align: 2px;
}

table.datatable tr td:first-child select, table.datatable tr td:first-child input[type="date"], table.datatable tr td:first-child input[type="text"], table.datatable tr td:first-child input[type="password"], table.datatable tr td:first-child input[type="number"], table.datatable tr td:first-child input[type="email"]{
	margin-left: 0px;
}

/* ================================= */

div.masthead{
	text-align: center;
	font-size:24px;
	color:#f0f0f0;
	margin: -10px -10px 10px -10px;
	padding: 20px 0px;
	background-color:#96bad3;
	background-repeat: no-repeat;
	background-position: 64%;
	background-size: cover;
}

.slide-container{
	position: relative;
	height: 150px;
}
.slide{
	position: absolute;
	top: 0px;
	left: 70vw;
	width: calc(100% - 10px);
	opacity: 0;
	text-shadow: 0px 1px 2px black;
	transform: translateX(-50%);
	transition: all 0.35s;
}
.slide.active{
	left: calc(50vw - 5px);
	opacity: 1;
}
.slide.past{
	left: 30vw;
	opacity: 0;
}

.slide h3{
	font-size:36px;
	line-height:44px;
	color:#f0f0f0;
}

/* ================================= */

/*div.shop-head{
	background-repeat: no-repeat;
	background-position: 100% 0px;
	background-size: cover;
}

div.shop-profile{
	display: inline-block;
	padding: 15px;
	margin-left: -5px;
	background-color: rgba(166, 197, 218, 0.8);
}

div.shop-profile h2{
	margin: 6px 0px 16px 0px;
}*/

img.shop-logo{
	width: 90%;
	border: 3px solid #FFFFFF;
	margin: -20px;
	border-radius: 50%;
	box-shadow: 0px 1px 10px -2px #000000;
}

/* ================================= */

div.popup.intro iframe.intro{
	width: 640px;
	height: 360px;
	max-width: calc(100% + 30px);
	border: 0px none;
	margin: -15px -15px -18px -15px;
}

/* ================================= */
/* ================================= */

section{
	padding: 10px 10px 0px 10px;
	position: absolute;
	width: 100%;
	opacity: 0;
	box-sizing: border-box;
	transition: opacity 0.5s;
}
section.active{
	opacity: 1;
}

section h2{
	margin: 0px 6px 5px 6px;
	font-size: 15pt;
	height: 24px;
	color: #3861b3;
	text-shadow: 0px 1px 3px #FFFFFF;
}
section>h2{
	float: left;
}

section h3{
	margin: 10px 6px 5px 6px;
	font-size: 13.5pt;
	color: #59748c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

h2 a span{
	font-weight: bolder !important;
	vertical-align: -3px;
}

h2 small:before{
	content: ' - ';
}

.cmd{
	display: inline-block;
	float: left;
	margin: 5px 5px 8px 5px;
	padding: 10px;
	font-size: 12pt;
	font-weight: bold;
	box-sizing: border-box;
}
.cmd span{
	font-weight: bold;
}

.bubble{
	display: inline-block;
	text-align: center;
}
.bubble span[class^="mbri-"]{
	display: block;
	margin: 5px 8px;
	padding: 20px 0px;
	font-size: 32pt;
	background-color: #ffffff;
	width: 80px;
	height: 80px;
	box-shadow: 0px 1px 8px -4px rgba(0, 0, 0, 0.8);
	border-radius: 50%;
	box-sizing: border-box;
}
.bubble h3{
	font-size: 12pt;
}

.card{
	margin: 5px 5px 15px 5px;
	/*margin: 7px 5px 5px 5px;*/
	padding: 15px;
	font-size: 11pt;
	background-color: #FFFFFF;
	float: left;
	width: calc(100% - 10px);
	min-height: 90px;
	box-shadow: 0px 1px 8px -4px rgba(0, 0, 0, 0.8);
	border-radius: 4px;
	box-sizing: border-box;
}
.card.highlight{
	background-color: #FFFFF0;
}

.card.bg-right, .card.bg-left{
	min-height: 120px;
	background-repeat: no-repeat;
	background-size: contain;
}
.card.bg-right{
	background-position: 100% 50%;
}

.card.bg-left{
	padding-left: 120px;
	background-position: 10px 50%;
	/*position: relative;*/
}
/*.card.bg-left:before{
	content: ' ';
	display: block;
	height: calc(100% - 10px);
	width: calc(100% - 120px);
	background-color: #FFFFFF;
	position: absolute;
	top: 5px;
	left: 115px;
}*/
.card .txt-on-img-cntnr{
	float: right;
	width: 80%;
	height: 97px;
	margin: -9px -9px -9px 0px;
	padding: 4px;
	white-space: nowrap;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 10px 3px #FFFFFF;
	/*overflow-x: hidden;
	transition: transform 0.3s, width 0.3s;*/
}
/*.card:hover .txt-on-img-cntnr{
	width: 80%;
	transform: translateX(25%);
}*/

.card h2{
	margin: 0px 0px 20px 0px;
	text-shadow: none;
}
.card h3{
	margin: 0px 0px 15px 0px;
	font-size: 13pt;
	color: #395f82;
	text-shadow: 0px 0px 2px #FFFFFF, 0px 0px 8px #cbd0e1;
}

.lnk-cmts{
	display: block;
	text-align: center;
}

.card.disabled{
	cursor: default;
	opacity: 0.5;
}
.card.disabled:active{
	cursor: not-allowed;
}

.breadcrumbs{
	font-size: 10pt;
}
.breadcrumbs .mbri-arrow-next{
	font-size: 7pt;
	font-weight: bold;
	color: #6aac6e;
}

.retail-wholesale-widget{
	font-size: 10pt;
}
.retail-wholesale-widget span[class^="mbri-"]{
	font-size: 8pt;
	font-weight: bold;
}

.search-people-form{
	float: right;
	margin: -4px 10px 0px 0px;
}

#people-div a.card address,
#officers-div a.card address{
	display: none;
}

/* ================================= */

div.popup{
	position: fixed;
	background-color: rgba(255, 255, 255, 0.9);
	top: 50vh;
	left: 50vw;
	max-height:85vh;
	/*max-height: calc(100vh - 86px);*/
	max-width:85vw;
	min-width: 450px;
	padding: 55px 15px 15px 15px;
	font-size: 11pt;
	z-index: 666;
	opacity: 0;
	transform: translate(-50%, -40%) scale(0.85);
	transition: transform 0.35s, opacity 0.35s;
}
div.popup .popup-inner{
	margin: -15px;
	padding: 15px;
	max-height: calc(100vh - 108px);
	overflow-y: auto;
	overflow-x: hidden;
}
div.popup.active{
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}
div.popup:before{
	content: ' ';
	position: fixed;
	top: -50vh;
	left: -120vw;
	height: 200vh;
	width: 240vw;
	background-color: rgba(45, 59, 103, 0.5);
	z-index: -2;
}
div.popup:after{
	content: ' ';
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgb(255, 255, 255);
	z-index: -1;
	box-shadow: 0px 3px 42px -4px #000000;
	border-radius: 4px;
}
div.popup.blue:after{
	background-color: #a6c5da;
}
div.popup.creme:after{
	background-color: #f5efed;
}

div.popup h2{
	position: fixed;
	width: 100%;
	height: auto;
	background-color: rgba(78, 115, 187, 0.8);
	color: #FFFFFF;
	margin: -55px -15px 15px -15px;
	padding: 8px 15px;
	text-shadow: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	box-sizing: border-box;
}
div.popup h2 a{
	color: #FFFFFF;
}
div.popup table td{
	padding: 10px 0px;
}
div.popup table td input{
	margin: -10px 0px;
}
/*div.popup form.row .currency span{
	top: 0.1em;
}*/

/* ================================= */

table.datatable{
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}

.card table.datatable, .popup table.datatable{
	margin: 0px -15px -15px -15px;
	width: calc(100% + 31px);
}
.card div.tbody{
	margin: 0px -13px 0px -13px;
	width: calc(100% + 28px);
	padding: 0px 15px;
	box-sizing: border-box;
}

table.datatable thead, table.datatable tbody{
	display: block;
}
table.datatable tbody{
	border-top: 1px solid #f1e5ee;
	height: 100%;
	overflow-y: scroll;
}
table.datatable tbody.scroll-bottom, .tbody.scroll-bottom{
	box-shadow: inset 0px 8px 15px -15px #000000;
}
table.datatable tbody.scroll-top, .tbody.scroll-top{
	box-shadow: inset 0px -10px 15px -15px #000000;
}
table.datatable tbody.scroll-middle, .tbody.scroll-middle{
	box-shadow: inset 0px 8px 15px -15px #000000, inset 0px -10px 15px -15px #000000;
}
table.datatable tbody.scroll-none, .tbody.scroll-none{
	overflow-y: hidden;
}
table.datatable tr{
	display: table;
	width: 100%;
	table-layout:fixed;
}

table.datatable tr th{
	padding: 10px;
	font-weight: bold;
	color: #587194;
	font-size: 11pt;
	text-align: left;
	/* */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
table.datatable tr th.main{
	width:40%;
}
table.datatable tr th[align="right"]{
	text-align: right;
}

table.datatable tr td{
	padding: 10px;
	border-bottom: 1px solid #f7edf4;
	color: #242424;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
table.datatable tr td:first-child, table.datatable tr th:first-child{
	padding-left:15px;
}
table.datatable tr td:last-child, table.datatable tr th:last-child{
	padding-right:15px;
	white-space: nowrap;
}
table.datatable tr td:last-child{
	padding-right:5px;
}
table.datatable tfoot tr td{
	font-weight:bold;
}
table.datatable tfoot tr td:last-child{
	padding-right:4px;
}
table.datatable tr.hidden td{
	opacity: 0.7;
}

table.datatable tr td span{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.datatable tbody tr:hover{
	background-color: rgba(255, 242, 146, 0.15);
}
table.datatable tbody tr.highlight{
	background-color: rgba(255, 242, 146, 0.3);
}


.card table.datatable, .popup table.datatable{
	margin-bottom: 15px;
}
.card table.datatable:last-child, .popup table.datatable:last-child{
	margin-bottom: -15px;
	/*margin-bottom: -5px;*/
}

/* ================================= */

.float-right{
	float: right;
}
.float-left{
	float: left;
}
.align-right, table.datatable tr th.align-right{
	text-align: right;
}
.align-right input[type="text"]{
	text-align: right;
}
.align-center{
	text-align: center;
}
button.float-right, input[type="submit"].float-right, input[type="button"].float-right, .button.float-right {
    margin-right: 0px;
}

/* ================================= */

#flash_messages{
	/*padding: 5px 5px 10px 5px;*/
}

#flash_messages .error, #flash_messages .warning, #flash_messages .success, #flash_messages .info{
	padding: 4px 8px;
	margin: 5px 5px 10px 5px;
	line-height: 28px;
	overflow: hidden;
	box-shadow: 0px 1px 9px -4px #000000;
	border-radius: 3px;
	transition: opacity 0.5s, margin-bottom 0.5s;
}
#flash_messages .error .icon, #flash_messages .warning .icon, #flash_messages .success .icon, #flash_messages .info .icon{
	display: inline-block;
	font-family: MobiriseIcons !important;
	font-size: 25px;
	margin: -5px 10px -5px 0px;
	vertical-align: -5px;
}
#flash_messages .error .icon:before{
	content: "\e921";
}
#flash_messages .warning .icon{
	vertical-align: -3px;
	transform: scaleY(-1);
}
#flash_messages .warning .icon:before{
	content: "\e932";
}
#flash_messages .success .icon:before{
	content: "\e966";
}
#flash_messages .info .icon:before{
	content: "\e932";
}
#flash_messages .error{
	color: #980000;
	background-color: #ffcaca;
	border: 1px solid rgba(255, 0, 0, 0.1);
}
#flash_messages .warning{
	color: #986400;
	background-color: #fff4ca;
	border: 1px solid rgba(255, 128, 0, 0.1);
}
#flash_messages .success{
	color: #009800;
	background-color: #d5ffca;
	border: 1px solid rgba(0, 255, 0, 0.1);
}
#flash_messages .info{
	color: #004b98;
	background-color: #cae7ff;
	border: 1px solid rgba(0, 90, 255, 0.1);
}
#flash_messages .error .dismiss{
	color: #980000;
}
#flash_messages .warning .dismiss{
	color: #986400;
}
#flash_messages .success .dismiss{
	color: #009800;
}
#flash_messages .info .dismiss{
	color: #004b98;
}
#flash_messages div .dismiss{
	font-family: MobiriseIcons !important;
	float: right;
}
#flash_messages div .dismiss:after{
	content: '\e911';
}

/* ================================= */

::-webkit-scrollbar{
	width: 10px;
}
::-webkit-scrollbar-track{
	background: rgba(150, 150, 150, 0.2);
	/*background: transparent;*/
}
::-webkit-scrollbar-thumb{
	background: rgba(100, 100, 100, 0.5);
}
::-webkit-scrollbar-thumb:hover{
	background: rgba(100, 100, 100, 0.75);
}

/* ================================= */
/* ================================= */
/* ================================= */
/* ================================= */
/* ================================= */
/* ================================= */

.bgicon{
	font-size: 42pt;
	position: absolute;
	margin: 28px 0px 0px 0px;
	color: rgb(136, 153, 165);
}
/*.bgicon span[class^="mbri-"]{
	font-size: 24pt;
	font-weight: bold;
	position: absolute;
	margin: 25px 0px 0px 4px;
	color: rgb(136, 153, 165);
}*/

.tabBodies .tab-body.home a.icon{
	display: block;
	text-align: center;
	margin: 10px 0px 20px 0px;
}
.tabBodies .tab-body.home a.icon span{
	display: block;
}
.tabBodies .tab-body.home a.icon span[class^="mbri-"]{
	font-size: 32pt;
	color: rgb(136, 153, 165);
}

/*.card .card, .popup .card{
	border: 1px solid #ebf2f9;
}*/
a.card{
	min-height: 110px;
}
.card.blue{
	/*background-color: #a6c5da;
	border: 0px none;*/
	min-height: 118px;
	background-color: rgba(166, 197, 218, 0.25);
}
.card.blue:hover{
	background-color: rgba(166, 197, 218, 0.4);
}
.card.blue:active{
	margin: 5.5px 5px 14.5px 5px;
	box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.8);
}
.card.blue.disabled{
	cursor: default;
}
.card.blue.disabled:active{
	cursor: not-allowed;
	margin: 5px 5px 15px 5px;
	box-shadow: 0px 1px 8px -4px rgba(0, 0, 0, 0.8);
}
/*.card.blue .bgicon, .card.blue .bgicon span[class^="mbri-"], .card.blue h3, .card.blue huge{
	color: #fdff4c;
}*/

.card.blue huge{
	color: #ed3496;
}

/* ================================= */
/* ================================= */
/* ================================= */
/* ================================= */
/* ================================= */

.row .col-half{
	width:calc(50% - 10px);
}

@media only screen and (max-width: 1020px){
	.row .col-2, .row .col-3{/*, .row .col-4*/
		width:calc(33.33% - 10px);
	}
	.row .col-5, .row .col-6{
		width:calc(100% - 10px);
	}
}

@media only screen and (max-width: 800px){
	/*header{
		padding: 0px 5px;
	}
	header form{
		margin-left: 210px;
	}*/
	section{
		padding: 5px;
		position: absolute;
		width: 100%;
		left: 0px;
	}
	div.masthead{
		margin: -5px -5px 10px -5px;
	}
}

@media only screen and (max-width: 720px){
	.row .col-5, .row .col-6, .row .col-7, .row .col-8{
		width:calc(100% - 10px);
	}
	.row .col-3, .row .col-4{
		width:calc(50% - 10px);
	}
	img.shop-logo{
		width: 98%;
	}
	/*.desktop-only{
		display: none !important;
	}*/
}

@media only screen and (max-width: 640px){
	nav{
		margin-left: -200px;
		z-index: 10;
		background-color: rgba(181, 166, 180, 0.95);
	}
	content{
		left: 0px;
		width: 100vw;
	}
	/*header form{
		margin-left: 15px;
	}
	header form span.mbri-menu{
		display: inline-block;
	}
	header select{
		width: 33px !important;
		padding: 5px 6px 6px 6px !important;
		-webkit-appearance: none;
		appearance: none;
		margin-right: -4px;
	}*/
	header div#user.reg,
	header div#user.new{
		padding-top: 2px;
	}
	header div#user a.both{
		display: block;
		font-size: 10pt;
		padding-bottom: 6px;
	}
	header div#user a.both span{
		max-width: 100px;
	}
	header div#user a.only{
		padding: 15px 6px 12px 6px;
	}
	header div#user.reg a.only{
		display: block;
	}
	header #user select#input-lang{
		width: 42px;
		padding: 5px 1px 6px 3px;
	}
	header #user.new select#input-lang{
		vertical-align: 0px;
		margin: 9px 0px 0px 5px;
	}
	header #user.reg select#input-lang{
		vertical-align: 3px;
		margin: -7px 0px 0px 5px;
	}
	header h1{
		font-size: 12pt;
		vertical-align: 10px;
	}
	a span.desktop-only, .desktop-only, a span.text{
		display: none !important;
	}
	a span.mobile-only, a span.icon, .mobile-only{
		display: inline !important;
	}
	br.mobile-only, hr.mobile-only{
		display: block !important;
	}
	/*h2 small{
		display: block;
	}
	h2 small:before{
		content: none;
	}*/

	.tabBodies:before, .tabBodies:after{
		content: ' ';
		font-family: MobiriseIcons !important;
		line-height: 38px;
		position: absolute;
		top: -36px;
		z-index: 666;
		background-color: #f5efed;
		width: 14px;
		height: 38px;
	}
	.tabBodies:before{
		content: '\e904';
		left: -17px;
		box-shadow: 2px 0px 10px 0px #f5efed;
	}
	.tabBodies:after{
		content: '\e903';
		right: -17px;
		box-shadow: -2px 0px 10px 0px #f5efed;
	}

}

@media only screen and (max-width: 502px){/*480px*/
	header form input[type="text"]{
		width: calc(100vw - 230px);
	}
	section{
		padding: 0px;
	}
	section>.row>.col-12>.card{
		margin: 0px 0px 5px 0px;
		width: 100%;
		box-shadow: none;
	}
	/*.slide-container{
		height: 100px;
	}*/
	.row .col-3, .row .col-4, .row .col-half{/*, .row .col-5, .row .col-6*/
		width: calc(100% - 10px);
	}
	.cmd{
		/*text-align: center;*/
		padding-left: 15px !important;
		width: 50%;
	}
	div.popup{
		min-width: calc(100vw - 60px);
		max-width: calc(100vw - 60px);
	}
	div.popup .popup-body{
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}
	div.popup.intro{
		min-width: calc(100vw - 40px);
		max-width: calc(100vw - 40px);
	}
	div.popup.intro iframe.intro{
		height: calc(56vw + 50px);
	}
	img.shop-logo{
		margin: 0px 12% 15px 12%;
		width: 75%;
	}
	table.datatable tr th, table.datatable tr td{
		padding: 10px 4px;
	}
	section h2, .row label{
		height: auto;
	}
}

/*@media only screen and (max-width: 380px){
	button, input[type="submit"], input[type="button"], .button{
		min-width: calc(50vw - 32px);
		width: auto;
	}
}*/

@media only screen and (min-width: 1024px){
	section>.row, section>h2, section>hr{/*, section>#flash_messages*/
		clear:both;
		max-width: 1024px;
		transform: translateX(calc(50vw - 512px));
	}
	div.masthead{
		padding: 8vw 0px;
	}
	div.popup{
		top: auto;
	}
	/*div.masthead{
		margin: -10px 5px 10px 5px;
	}*/
}

/* ================================= */
/* ================================= */
/* ================================= */

.tabs{
	overflow: hidden;
}

.tabHeads{
    margin: 3px 4px -5px 4px;
    width: calc(100% - 9px);
	white-space: nowrap;
	position: relative;
	transition: left 0.25s;
}

.tabHeads .tab-head{
	display: inline-block;
	padding: 8px 12px;
	margin-left: 1px;
	background-color: #dde1e5;
	border-bottom: 0px none;
	cursor: pointer;
	border-top-left-radius: 8px;
	border-top-right-radius: 20px;
	box-shadow: 0px 0px 6px -3px rgba(0, 0, 0, 0.8);
	transition: background-color 0.25s;
}

.tabHeads .tab-head span[class^="mbri-"]{
	vertical-align: -2px;
	color: #30a261;
}

.tabHeads .tab-head.current{
	background-color: #ffffff;
}

.tabBodies{
	position: relative;
	height: 180px;
	border-top: #C0C0C0;
	transition: height 0.125s;
}

.tabBodies .tab-body{
	position: absolute;
	padding: 15px 15px 15px 0px;
	top: 0px;
	display: none;
	width: 100%;
	/*height: 180px;
	overflow-y: auto;
	overflow-y: hidden;*/
	box-sizing: border-box;
	transition: left 0.125s;
}
.card.tabBodies{
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
.card.tabBodies .tab-body{
	margin: 0px -15px -15px -15px;
	padding: 15px;
}

.tabBodies .tab-body.current{
	display: block;
}

/* ================================= */

.frame-container{
	/*position:absolute;
	overflow:hidden;*/
	/*width:100%;
	height:100%;*/
}

.frame{
	position:absolute;
	/*padding:5px;
	box-sizing: border-box;
	width:100%;
	height:100%;*/
	z-index:89;
	/*-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);*/
	opacity:0;
}
.frame.fade{
	/*opacity:0;*/
	transition:opacity 0.3s;
}
/*.frame.slide-left{
	-webkit-transform: translate3d(50%,0,0);
	transform: translate3d(50%,0,0);
	transition:all 0.3s;
}
.frame.slide-right{
	-webkit-transform: translate3d(-50%,0,0);
	transform: translate3d(-50%,0,0);
	transition:all 0.3s;
}*/

.frame.slow{
	transition:all 0.8s;
}
.frame.fast{
	transition:all 0.25s;
}

.frame.active{
	z-index:98;
	opacity:1;
	/*-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);*/
}

/* ================================= */
/* ================================= */
/* ================================= */

#live-chat{
	position: fixed;
	bottom: 20px;
	right: 32px;
	background-color: #f94b82;
	padding: 0px 8px 4px 8px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	box-shadow: 0px 0px 10px -4px #000000;
}

#live-chat h3{
	color: #F8F8F8;
	margin: 6px 3px 2px 3px;
}

footer{
	padding: 0px 4px 2px 4px;
	font-size: 10pt;
	position: fixed;
	bottom: 0px;
	width: 100%;
	color: #61475a;
	/*font-weight: bold;*/
	background-color: #f4f4f4;
	border-top: 1px solid rgba(136, 65, 117, 0.29);
	white-space: nowrap;
	box-shadow: 0px 0px 10px -4px #000000;
	box-sizing: border-box;
}

footer .float-right{
	background-color: #f4f4f4;
	padding-left: 4px;
	position: relative;
	z-index: 10;
	box-shadow: -5px 0px 10px 0px #f4f4f4;
}

footer a{
	color: #4647a2;
}

footer a span.mbri{
	vertical-align: -1px;
	margin-right: 3px;
}

/* ================================== */

.mce-btn button, .mce-close{
	box-shadow: none;
}
.mce-btn button:hover, .mce-close:hover{
	background-color: transparent;
}

.mce-window iframe{
	border: 1px solid #c5c5c5;
	width: calc(90vw - 10px) !important;
	height: calc(95vh - 240px) !important;
}

.mce-window, .mce-container.mce-foot, .mce-container.mce-foot .mce-container-body{
	width: calc(100vw - 30px) !important;
}
.mce-window{
	left: 15px !important;
}

.mce-window textarea.mce-textbox{
	width: calc(100vw - 78px) !important;
	min-width: 80vw;
}

.mce-panel.mce-statusbar, .mce-panel.mce-toolbar-grp{
	background-image: linear-gradient(to bottom,#fdfdfd,#e9f3ff);
}

.mce-toolbar .mce-widget.mce-btn{
	background-image: linear-gradient(to bottom,#e5edf5,#a5c0df) !important;
}

/* ================================== */